/* =============================================================
   PK2U Entregas Rápidas — v10 "Jornal"
   Um único CSS para o site inteiro (404 incluso). Mobile-first.
   Paleta fixa: marinho #1B1D6A · laranja #F26522 (só ação/acento)
   ============================================================= */

/* ---------- Fonte única, self-hosted ---------- */
@font-face{
  font-family:"Work Sans";
  src:url("../fontes/work-sans-roman.woff2") format("woff2");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Work Sans";
  src:url("../fontes/work-sans-italic.woff2") format("woff2");
  font-weight:100 900;
  font-style:italic;
  font-display:swap;
}

/* ---------- Tokens ---------- */
:root{
  --papel:#FCFCFC;
  --tinta:#1A1A22;
  --tinta-titulo:#111111;
  --corpo:#33364D;
  --cinza:#43465C;
  --cinza-brando:#5C6079;
  --fio:#D8DBE7;
  --marinho:#1B1D6A;
  --laranja:#F26522;
  --laranja-tinta:#14163A;      /* texto sobre laranja */
  --laranja-texto:#B23F07;      /* laranja para texto pequeno sobre papel (AA 4.5:1) */
  --miolo:72rem;                 /* largura máxima da mancha */
  --coluna-leitura:62ch;
}

/* ---------- Reset curto ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-bottom:4.5rem}
body{
  margin:0;
  font-family:"Work Sans","Segoe UI",Arial,sans-serif;
  font-size:1rem;
  line-height:1.6;
  background:var(--papel);
  color:var(--tinta);
  font-variant-numeric:lining-nums;
}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}
ul,ol{margin:0;padding:0}
a{color:var(--marinho)}
a:hover{color:var(--laranja-tinta)}

/* Foco de teclado sempre visível */
:focus-visible{outline:3px solid var(--laranja);outline-offset:2px;border-radius:2px}
:focus:not(:focus-visible){outline:none}
.cta:focus-visible,.nav-jornal .nav-cta a:focus-visible,.zap-fixo a:focus-visible{outline-color:var(--marinho)}

/* Movimento só para quem aceita movimento */
@media (prefers-reduced-motion: no-preference){
  html{scroll-behavior:smooth}
  a,.cta,.cta-linha,button{transition:background-color .15s ease,color .15s ease,border-color .15s ease}
}

/* ---------- Utilidades ---------- */
.miolo{max-width:var(--miolo);margin-inline:auto;padding-inline:1.125rem}
.pular{
  position:absolute;left:-999rem;top:0;
  background:var(--marinho);color:#FCFCFC;font-weight:700;
  padding:.625rem 1rem;z-index:50;
}
.pular:focus{left:.5rem;top:.5rem}

/* =============================================================
   CABEÇALHO — primeira dobra do jornal
   ============================================================= */
.cab{border-bottom:4px double var(--tinta);background:var(--papel)}
.cab-servico{
  border-bottom:1px solid var(--fio);
  font-size:.6875rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--cinza-brando);
}
.cab-servico .miolo{
  display:flex;justify-content:space-between;gap:1rem;
  padding-top:.375rem;padding-bottom:.375rem;
}
.cab-servico span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cab-servico span+span{display:none}
.cab-grade{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:.75rem 1.5rem;
  padding-top:.875rem;padding-bottom:.75rem;
}
.logotipo{display:inline-flex;align-items:center;flex-shrink:0}
.logotipo img{width:8.625rem;height:3.125rem}
.nav-jornal ul{display:flex;flex-wrap:wrap;gap:.25rem .375rem;list-style:none}
.nav-jornal a{
  display:inline-block;
  font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--cinza);text-decoration:none;
  padding:.375rem .5rem;border-bottom:2px solid transparent;
}
.nav-jornal a:hover{color:var(--laranja-tinta);border-bottom-color:var(--laranja)}
.nav-jornal a[aria-current="page"]{color:var(--marinho);border-bottom-color:var(--marinho)}
.nav-jornal .nav-cta a{
  background:var(--laranja);color:var(--laranja-tinta);
  border-radius:3px;border-bottom:0;padding:.4375rem .75rem;
}
.nav-jornal .nav-cta a:hover{background:var(--marinho);color:#FCFCFC}

/* =============================================================
   APARATO EDITORIAL — fios e títulos
   ============================================================= */
.secao{border-top:1px solid var(--fio);padding-block:2.25rem}
.secao-fio-forte{border-top:3px solid var(--tinta)}

.manchete{
  font-size:clamp(1.875rem,1.1rem + 4vw,3.375rem);
  font-weight:800;line-height:1.04;letter-spacing:-.01em;
  color:var(--tinta-titulo);
  max-width:20ch;
  margin:1.25rem 0 .75rem;
}
.titulo-secao{
  font-size:clamp(1.625rem,1.2rem + 2.2vw,2.5rem);
  font-weight:800;line-height:1.08;letter-spacing:-.01em;
  color:var(--tinta-titulo);
  max-width:24ch;
  margin:.875rem 0 .625rem;
}
.titulo-materia{
  font-size:1.1875rem;font-weight:800;line-height:1.2;
  color:var(--tinta-titulo);
  margin-bottom:.375rem;
}
.lede{
  font-size:clamp(1rem,.95rem + .4vw,1.1875rem);
  line-height:1.55;color:var(--cinza);
  max-width:58ch;
}

/* =============================================================
   ABERTURA (home) — manchete, colunas, sumário lateral
   ============================================================= */
.abertura{padding-block:1rem 2.25rem}
.colunas{
  display:grid;grid-template-columns:1fr;gap:2rem;
  border-top:1px solid var(--fio);
  margin-top:1.75rem;padding-top:1.5rem;
}
.coluna-texto p{
  font-size:.9375rem;color:var(--corpo);
  max-width:var(--coluna-leitura);
  margin-bottom:.875rem;
}
.colunas .coluna-texto p:first-of-type::first-letter{
  float:left;
  font-size:3.25em;line-height:.82;
  font-weight:800;color:var(--marinho);
  padding-right:.375rem;padding-top:.08em;
}

/* Sumário de números — assinatura visual do site */
.sumario{
  border-left:3px solid var(--laranja);
  padding-left:1.25rem;
  align-self:start;
}
.sumario h2{
  font-size:.6875rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cinza-brando);margin-bottom:.875rem;
}
.sumario dl{display:grid;gap:.875rem}
.sumario dt{
  font-size:1.75rem;font-weight:800;line-height:1.1;color:var(--marinho);
}
.sumario dd{
  font-size:.75rem;color:var(--cinza-brando);
  border-bottom:1px solid var(--fio);padding-bottom:.75rem;
}
.sumario dl div:last-child dd{border-bottom:0}
.sumario .fonte-nota{font-size:.6875rem;font-style:italic;color:var(--cinza-brando);margin-top:.75rem}

/* ---------- Botões ---------- */
.cta{
  display:inline-block;
  background:var(--laranja);color:var(--laranja-tinta);
  font-weight:700;font-size:.875rem;text-decoration:none;
  padding:.625rem 1.25rem;border-radius:3px;border:0;cursor:pointer;
  font-family:inherit;
}
.cta:hover{background:var(--marinho);color:#FCFCFC}
.cta-linha{
  display:inline-block;
  font-weight:700;font-size:.875rem;color:var(--marinho);text-decoration:none;
  border-bottom:2px solid var(--laranja);padding-bottom:.125rem;
}
.cta-linha:hover{color:var(--laranja-tinta)}
button.cta-linha{background:none;border:0;border-bottom:2px solid var(--laranja);cursor:pointer;font-family:inherit;line-height:1.6;padding:0 0 .125rem}
.cta-par{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;margin-top:.75rem}

/* ---------- Fotografia de imprensa ---------- */
.foto{margin-block:1.5rem}
.foto img{width:100%;border:1px solid var(--fio)}
.foto figcaption{
  font-size:.75rem;color:var(--cinza-brando);
  border-bottom:1px solid var(--fio);
  padding:.5rem 0 .625rem;
}
.foto figcaption b{color:var(--cinza);font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.galeria{display:grid;gap:1.5rem;margin-top:1.25rem}
.galeria .foto{margin-block:0}
.galeria .foto img{aspect-ratio:4/3;object-fit:cover}

/* =============================================================
   LISTAS EDITORIAIS — serviços, praças, registros
   ============================================================= */
.grade-materias,.grade-pracas{display:grid;gap:1.5rem;margin-top:1.25rem}
.grade-materias:has(> .materia:only-child){grid-template-columns:1fr}
.materia{border-top:1px solid var(--fio);padding-top:1rem}
.materia .cartola{
  font-size:.6875rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--laranja-texto);display:block;margin-bottom:.25rem;
}
.materia p{font-size:.9375rem;color:var(--corpo);max-width:52ch}
.materia p+p{margin-top:.625rem}

/* Índice de serviços (home) */
.indice{
  list-style:none;
  display:grid;gap:0;margin-top:1rem;
  border-top:1px solid var(--fio);
}
.indice li{
  border-bottom:1px solid var(--fio);
  padding:.625rem 0;
  font-size:.9375rem;font-weight:600;color:var(--tinta);
  display:flex;gap:.625rem;align-items:baseline;
}
.indice li::before{content:"›";content:"›" / "";color:var(--laranja);font-weight:800}
.indice li a{color:var(--tinta);text-decoration:none}
.indice li a:hover{color:var(--laranja-tinta);text-decoration:underline;text-decoration-color:var(--laranja);text-underline-offset:.2em}

/* Praças (cobertura) */
.praca{border-top:1px solid var(--fio);padding-top:1rem}
.praca h3{font-size:1.0625rem;font-weight:800;color:var(--tinta-titulo)}
.praca .uf{
  font-size:.6875rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--marinho);display:block;margin-bottom:.25rem;
}
.praca p{font-size:.875rem;color:var(--corpo);max-width:52ch;margin-top:.25rem}
.selo-sede{
  display:inline-block;vertical-align:.1em;margin-left:.5rem;
  font-size:.625rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--laranja-tinta);background:var(--laranja);
  border-radius:2px;padding:.125rem .375rem;
}
.selo-parceira{
  display:inline-block;vertical-align:.1em;margin-left:.5rem;
  font-size:.625rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--marinho);border:1px solid var(--marinho);
  border-radius:2px;padding:.125rem .375rem;
}

/* Tabela de registros (Anvisa) */
.rolagem-x{overflow-x:auto}
.registro{
  width:100%;border-collapse:collapse;
  font-size:.875rem;margin-top:1rem;
}
.registro caption{
  text-align:left;font-size:.75rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--cinza-brando);padding-bottom:.5rem;
}
.registro th,.registro td{
  text-align:left;vertical-align:top;
  padding:.625rem .75rem .625rem 0;
  border-bottom:1px solid var(--fio);
}
.registro thead th{
  font-size:.6875rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--cinza-brando);border-bottom:2px solid var(--tinta);
}
.registro td:first-child,.registro tbody th{
  font-weight:800;color:var(--marinho);white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.registro td{color:var(--corpo)}

/* Ficha técnica (dl horizontal) */
.ficha{display:grid;gap:.125rem 1.5rem;margin-top:1rem;font-size:.9375rem}
.ficha div{border-bottom:1px solid var(--fio);padding:.625rem 0;display:grid;gap:.125rem}
.ficha dt{
  font-size:.6875rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--cinza-brando);
}
.ficha dd{color:var(--corpo)}
.ficha dd a{color:var(--marinho)}

/* Aviso editorial (nota de serviço) */
.nota-servico{
  border:1px solid var(--fio);border-left:3px solid var(--marinho);
  padding:.875rem 1.125rem;margin-top:1.25rem;
  font-size:.875rem;color:var(--corpo);max-width:58ch;
}
.nota-servico b,.nota-servico strong{color:var(--marinho)}

/* =============================================================
   CHAMADA DE COTAÇÃO
   ============================================================= */
.chamada{
  border-top:3px solid var(--tinta);
  padding-block:2.25rem;
}
.chamada .titulo-secao{max-width:22ch}
.chamada p{font-size:.9375rem;color:var(--corpo);max-width:58ch;margin-top:.5rem}

/* ---------- Formulário ---------- */
.formulario{max-width:44rem;margin-top:1.5rem;display:grid;gap:1.125rem}
.formulario[hidden]{display:none}
.campo{display:grid;gap:.375rem}
.campo label{
  font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--cinza);
}
.campo label .opcional{font-weight:500;text-transform:none;letter-spacing:0;color:var(--cinza-brando)}
.campo input,.campo select,.campo textarea{
  font-family:inherit;font-size:1rem;color:var(--tinta);
  background:#FFFFFF;
  border:1px solid var(--cinza-brando);border-radius:3px;
  padding:.625rem .75rem;width:100%;
}
.campo textarea{min-height:7rem;resize:vertical}
.campo input:focus-visible,.campo select:focus-visible,.campo textarea:focus-visible{
  outline:3px solid var(--laranja);outline-offset:1px;border-color:var(--marinho);
}
.campo-par{display:grid;gap:1.125rem}
.form-acoes{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;margin-top:.25rem}
.form-nota{font-size:.8125rem;color:var(--cinza-brando);max-width:52ch}

/* =============================================================
   RODAPÉ
   ============================================================= */
.rodape{
  border-top:4px double var(--tinta);
  margin-top:2.5rem;
  padding-block:2rem 5.5rem;   /* espaço para a barra fixa do WhatsApp no celular */
  background:var(--papel);
}
.rodape h2{
  font-size:.6875rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--marinho);margin-bottom:1rem;
}
.rodape-grade{display:grid;gap:1.5rem}
.rodape h3{
  font-size:.6875rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--cinza-brando);margin-bottom:.375rem;
}
.rodape p,.rodape li{font-size:.8125rem;color:var(--corpo)}
.rodape ul{list-style:none;display:grid;gap:.5rem}
.rodape a{color:var(--marinho)}
.rodape .avisos{margin-top:1.75rem;display:grid;gap:.375rem}
.rodape .avisos p{font-size:.75rem;color:var(--cinza-brando);max-width:72ch}
.rodape .fecho{
  border-top:1px solid var(--fio);
  margin-top:1.75rem;padding-top:.875rem;
  font-size:.75rem;color:var(--cinza-brando);
  display:flex;flex-wrap:wrap;gap:.375rem 1.5rem;justify-content:space-between;
}

/* Barra fixa de WhatsApp — celular */
.zap-fixo{
  position:fixed;inset:auto 0 0 0;z-index:40;
  background:var(--laranja);
  display:flex;justify-content:center;
  padding:0 0 env(safe-area-inset-bottom);
  box-shadow:0 -1px 0 var(--laranja-tinta);
}
.zap-fixo a{
  flex:1;text-align:center;padding:.625rem 1rem;
  color:var(--laranja-tinta);font-weight:800;font-size:.9375rem;
  text-decoration:none;letter-spacing:.01em;
}
.zap-fixo a:hover{text-decoration:underline}
.sem-zap .rodape{padding-bottom:2rem}

/* =============================================================
   PÁGINA 404
   ============================================================= */
.pagina-erro{padding-block:3rem;min-height:55vh}
.pagina-erro .manchete{max-width:24ch}
.pagina-erro ul{list-style:none;margin-top:1.5rem;border-top:1px solid var(--fio)}
.pagina-erro li{border-bottom:1px solid var(--fio);font-size:.9375rem}
.pagina-erro li a{display:block;padding:.625rem 0}

/* =============================================================
   RESPONSIVO — do tabloide ao standard
   ============================================================= */
@media (min-width: 40rem){
  .miolo{padding-inline:1.75rem}
  .cab-servico span+span{display:block}
  .campo-par{grid-template-columns:1fr 1fr}
  .grade-materias{grid-template-columns:1fr 1fr;gap:1.5rem 2.5rem}
  .galeria{grid-template-columns:1fr 1fr}
  .indice{grid-template-columns:1fr 1fr;column-gap:2.5rem}
  .rodape-grade{grid-template-columns:1fr 1fr}
}

@media (min-width: 60rem){
  .miolo{padding-inline:2.25rem}
  .foto img{max-height:34rem;object-fit:cover}
  .colunas{grid-template-columns:2fr 1fr;gap:2.75rem}
  .grade-materias{grid-template-columns:1fr 1fr 1fr}
  .grade-pracas{grid-template-columns:1fr 1fr 1fr;gap:1.5rem 2.5rem}
  .foto-panorama img{aspect-ratio:21/9;object-fit:cover;object-position:center 75%}
  .rodape-grade{grid-template-columns:2fr 1fr 1fr 1fr}
  .ficha{grid-template-columns:1fr 1fr}
  .zap-fixo{display:none}
  .rodape{padding-bottom:2rem}
  html{scroll-padding-bottom:0}
}

@media (min-width: 90rem){
  :root{--miolo:80rem}
}

/* ---------- Impressão ---------- */
@media print{
  .zap-fixo,.pular{display:none}
  .rodape{padding-bottom:2rem}
}