/* ========================================================================
   COMPONENTES — direção LUZ E TERRITÓRIO
   GERADO por _qa/extrair-css.mjs a partir de _build/12_DIRECAO_VISUAL_V2.md.
   NÃO EDITE ESTE ARQUIVO À MÃO: edite o documento e rode o extrator de novo.
   ======================================================================== */

/* ══════════ BASE DO CORPO ══════════ */
@layer tipografia{
  body{ background:var(--cor-creme); color:var(--cor-tinta);
        font-family:var(--fam); font-size:var(--t-corpo); line-height:var(--lh-corpo);
        font-weight:var(--p-normal); }
  h1,h2,h3,h4{ font-family:var(--fam); font-weight:var(--p-mega); line-height:var(--lh-titulo);
               letter-spacing:var(--ls-h1); color:inherit;
               hyphens:none; overflow-wrap:normal; }   /* título não parte palavra ao meio */
  h1{ font-size:var(--t-h1); } h2{ font-size:var(--t-h2); } h3{ font-size:var(--t-h3); font-weight:var(--p-forte); }
  p{ max-width:var(--max-texto); }
  a{ color:inherit; text-underline-offset:3px; text-decoration-thickness:from-font; }
  strong,b{ font-weight:var(--p-forte); }

  /* A ASSINATURA: uma frase por tela, em serifada itálica e verde vivo. */
  .grifo{ font-family:var(--fam-italico); font-style:italic; font-weight:500;
          letter-spacing:-.01em; color:var(--cor-roxo); }
  .escuro .grifo, .hero--foto .grifo{ color:var(--cor-roxo-claro); }

  .rotulo{ font-size:var(--t-rotulo); font-weight:var(--p-forte); letter-spacing:var(--ls-rotulo);
           text-transform:uppercase; color:var(--cor-verde-tinta); display:flex; align-items:center; gap:var(--esp-3); }
  .rotulo::before{ content:""; width:28px; height:2px; background:currentColor; flex:none; }
  .escuro .rotulo, .hero--foto .rotulo{ color:var(--cor-verde-claro); }

  .olho{ font-size:var(--t-olho); line-height:var(--lh-olho); color:var(--cor-tinta-2); max-width:56ch; }
  .hero--foto .olho, .escuro .olho{ color:var(--cor-claro-2); }
  .nota{ font-size:var(--t-nota); line-height:var(--lh-nota); color:var(--cor-tinta-2); }
}

@layer layout{
  /* A-05: qualquer link fora de texto corrido tem alvo de 44px. */
  li > a, .carimbo a, .migalhas a, .socorro a, .rodape a, .fluxo a{
    min-height:44px; display:inline-flex; align-items:center; }
  .env{ max-width:calc(var(--max-pagina) + 2*var(--esp-margem));
        margin-inline:auto; padding-inline:var(--esp-margem); }
  .secao{ padding-block:var(--esp-secao); }
  .secao--creme2{ background:var(--cor-creme-2); }
  .escuro{ background:var(--cor-mata); color:var(--cor-claro); }
  .escuro h1,.escuro h2,.escuro h3{ color:var(--cor-claro); }
  .duas{ display:grid; gap:var(--esp-bloco) var(--esp-7); align-items:center;
         grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr)); }
}

@layer componentes{
  /* ══════════ BOTÕES — pílula ══════════ */
  .botao{ display:inline-flex; align-items:center; justify-content:center; gap:var(--esp-3);
          min-height:var(--alvo); padding:.85rem 1.6rem; border-radius:var(--raio-pill);
          font-weight:var(--p-forte); font-size:var(--t-corpo); text-decoration:none;
          border:1.5px solid transparent; cursor:pointer;
          transition:transform var(--dur-rapida) var(--curva-estado),
                     background-color var(--dur-rapida) var(--curva-estado),
                     border-color var(--dur-rapida) var(--curva-estado); }
  .botao:hover{ transform:translateY(-2px); }
  /* O "laminar" vem daqui: um gradiente de roxo com brilho no canto superior, e não
     de uma cor pálida. O texto é o azul-profundo; o ponto mais claro do gradiente
     mede 6,3:1 contra ele e o mais escuro 5,0:1 — os dois acima do exigido. */
  .botao--principal{ background-color:var(--cor-lima);
                     background-image:linear-gradient(135deg,#C4B5FD 0%,#A78BFA 45%,#8B5CF6 100%);
                     color:var(--cor-mata); }
  .botao--principal:hover{ background:linear-gradient(135deg,#D6CCFE 0%,#B79BFB 45%,#9C6EF8 100%); }
  .botao--fantasma{ border-color:var(--cor-linha); color:var(--cor-tinta); background:transparent; }
  .hero--foto .botao--fantasma, .escuro .botao--fantasma{ border-color:rgba(242,245,255,.45); color:var(--cor-claro); }
  .hero--foto .botao--fantasma:hover, .escuro .botao--fantasma:hover{ border-color:var(--cor-lima); color:var(--cor-lima); }
  .botao--verde{ background:var(--cor-verde); color:var(--cor-branco); }    /* 6,6:1 */
  .botao .seta{ transition:transform var(--dur-rapida) var(--curva-estado); }
  .botao:hover .seta{ transform:translateX(4px); }

  /* ══════════ CABEÇALHO ══════════ */
  /* Véu do cabeçalho: sem ele o menu claro fica sobre a fotografia sem fundo
     garantido — 1,03:1 medido. Com ele o contraste é o da chapa: 15,8:1. */
  .topo::before{ content:""; position:absolute; inset:0; z-index:-1;
                 background:linear-gradient(180deg, rgba(5,11,34,.92) 0%, rgba(5,11,34,.72) 70%, rgba(5,11,34,0) 100%); }
  .topo{ position:fixed; inset:0 0 auto; z-index:var(--z-cabecalho);
         background:rgba(5,11,34,.86);
         display:flex; align-items:center; justify-content:space-between; gap:var(--esp-5);
         /* A barra sangra na largura toda (é o fundo), mas o CONTEÚDO dela pousa na mesma
            coluna do resto da página. Sem isto o logotipo começa a 75px da borda e o texto
            da página a 178px — dois eixos verticais na mesma tela, defeito apontado na banca. */
         padding-block:var(--esp-3);
         padding-inline:max(var(--esp-margem), calc((100% - var(--max-pagina)) / 2));
         transition:background-color var(--dur-media) var(--curva-estado),
                    backdrop-filter var(--dur-media) var(--curva-estado); }
  .topo[data-nav="rolado"]{ background:color-mix(in srgb,var(--cor-mata) 92%,transparent);
                            backdrop-filter:saturate(140%) blur(10px); }
  .topo__marca{ display:flex; align-items:center; gap:var(--esp-3); text-decoration:none;
                color:var(--cor-claro); min-height:var(--alvo); }
  /* A marca do Instituto — o Broto de Rede (escolha do CEO, 01/09/2026). Desenho vetorial
     inline: acompanha a cor do tema, não pede requisição extra e fica nítido em qualquer tela.
     Sem placa de fundo: o símbolo já tem silhueta própria e a placa competia com o menu. */
  .topo__selo{ width:42px; height:42px; flex:none; display:block; }
  .topo__nome{ display:block; font-weight:var(--p-forte); font-size:var(--t-nota); letter-spacing:.04em; }
  /* No celular, "Falar com o Instituto" empurrava o botão para fora da tela e a marca quebrava
     em três linhas. Abaixo de 620px a ação vira "Contato" — mesmo destino, mesmo alvo de toque. */
  .topo__acao-curta{ display:none; }
  @media (max-width:620px){
    .topo__acao-longa{ display:none; }
    .topo__acao-curta{ display:inline; }
    /* A letra continua no piso de 16px (D-01): quem cede espaço é o botão, nunca o texto. */
    .topo__nome{ line-height:1.2; }
  }
  /* Tela de 320px — o menor aparelho que o projeto se obriga a atender. Aqui o botão de
     contato ainda saía 22px para fora da tela: quem cede é a folga da barra e do botão,
     nunca a altura do alvo de toque nem o corpo da letra. Medido, não estimado. */
  @media (max-width:400px){
    .topo{ padding-inline:var(--esp-4); gap:var(--esp-3); }
    .topo .botao{ padding-inline:var(--esp-4); }
    .topo__marca{ gap:var(--esp-2); }
    .topo__selo{ width:34px; height:34px; }
  }
  /* A razão social por extenso quebrava o cabeçalho em TRÊS linhas, com "GESTÃO" órfã,
     desalinhava o selo e inflava a barra — os quatro juízes cegos reclamaram disso.
     Ela continua publicada no rodapé de todas as páginas, que é o lugar dela. */
  .topo__desc{ display:none; }
  .topo__menu{ display:none; gap:var(--esp-5); }
  @media (min-width:1000px){ .topo__menu{ display:flex; } }
  .topo__menu a{ color:var(--cor-claro); text-decoration:none; font-weight:var(--p-medio);
                 min-height:var(--alvo); display:flex; align-items:center;
                 white-space:nowrap; font-size:var(--t-nota);
                 min-width:44px; justify-content:center; padding-inline:var(--esp-2); }
  .topo__menu a:hover{ color:var(--cor-lima); }
  /* A página em que se está precisa se ver no menu — a banca notou que REVERDE, aberto,
     ficava igual aos outros três. */
  .topo__menu a[aria-current="page"]{ color:var(--cor-lima); position:relative; }
  .topo__menu a[aria-current="page"]::after{ content:""; position:absolute; left:var(--esp-2);
    right:var(--esp-2); bottom:6px; height:2px; background:var(--cor-lima); border-radius:2px; }
  /* O botão do cabeçalho quebrava em duas linhas, media 143px de altura e virava o objeto
     mais chamativo da tela, roubando o foco da manchete. Uma linha, altura de botão. */
  .topo .botao{ white-space:nowrap; padding:var(--esp-3) var(--esp-5); min-height:var(--alvo);
                font-size:var(--t-nota); }
  .topo .botao .seta{ margin-left:var(--esp-1); }
  .topo details > summary{ list-style:none; }
  .topo details > summary::-webkit-details-marker{ display:none; }

  /* ══════════ MENU DO CELULAR ══════════
     Um <details> nativo. Aparece só abaixo de 1000px, exatamente onde o menu largo some —
     antes disso o celular ficava sem navegação nenhuma, e a única saída era o rodapé. */
  .topo__sanfona{ display:none; }
  .topo__menu-botao{ display:inline-flex; align-items:center; gap:var(--esp-3);
                     min-height:var(--alvo); min-width:var(--alvo); padding-inline:var(--esp-3);
                     border-radius:var(--raio-p); cursor:pointer; color:var(--cor-claro);
                     font-weight:var(--p-forte); font-size:var(--t-nota); }
  .topo__menu-botao:hover{ color:var(--cor-lima); }
  /* Três traços desenhados em CSS: o do meio é o próprio elemento, os outros dois são
     pseudoelementos. Ao abrir, viram um X — o mesmo desenho, sem trocar de ícone. */
  .topo__hamburguer, .topo__hamburguer::before, .topo__hamburguer::after{
    display:block; width:22px; height:2px; background:currentColor; border-radius:2px;
    transition:transform var(--dur-rapida) var(--curva-estado),
               opacity var(--dur-rapida) var(--curva-estado); }
  .topo__hamburguer{ position:relative; }
  .topo__hamburguer::before, .topo__hamburguer::after{ content:""; position:absolute; left:0; }
  .topo__hamburguer::before{ top:-7px; }
  .topo__hamburguer::after{ top:7px; }
  .topo__sanfona[open] .topo__hamburguer{ background:transparent; }
  .topo__sanfona[open] .topo__hamburguer::before{ transform:translateY(7px) rotate(45deg); }
  .topo__sanfona[open] .topo__hamburguer::after{ transform:translateY(-7px) rotate(-45deg); }

  .topo__gaveta{ position:absolute; left:0; right:0; top:100%;
                 background:var(--cor-mata); border-top:var(--filete) solid var(--cor-linha-esc);
                 box-shadow:var(--sombra-2);
                 display:grid; gap:var(--esp-1);
                 padding:var(--esp-4) max(var(--esp-margem), calc((100% - var(--max-pagina)) / 2)) var(--esp-5);
                 max-height:calc(100dvh - var(--h-cabecalho, 76px)); overflow-y:auto; }
  .topo__gaveta a{ color:var(--cor-claro); text-decoration:none; font-weight:var(--p-medio);
                   min-height:var(--alvo); display:flex; align-items:center;
                   padding-inline:var(--esp-2); border-radius:var(--raio-p); }
  .topo__gaveta a:hover{ color:var(--cor-lima); background:var(--cor-mata-2); }
  .topo__gaveta a[aria-current="page"]{ color:var(--cor-lima); font-weight:var(--p-forte); }
  /* A regra de cor da gaveta vinha por cima do botão e deixava texto branco sobre lilás
     (2,4:1 — reprovado). O botão principal manda na própria cor: azul-profundo sobre o
     gradiente, 6,3:1 no ponto mais claro. */
  .topo__gaveta a.topo__gaveta-acao{ margin-top:var(--esp-3); justify-content:center;
                                     color:var(--cor-mata); }
  .topo__gaveta a.topo__gaveta-acao:hover{ color:var(--cor-mata); background:transparent; }

  @media (max-width:999px){
    .topo{ position:fixed; }
    .topo__sanfona{ display:block; }
    /* A ação vira o primeiro item da gaveta: em 320px, marca + botão + menu não cabem. */
    .topo__acao{ display:none; }
  }
  @media (prefers-reduced-motion: reduce){
    .topo__hamburguer, .topo__hamburguer::before, .topo__hamburguer::after{ transition:none; }
  }

  /* ══════════ ABERTURA — fotografia de tela cheia ══════════ */
  .hero{ position:relative; isolation:isolate; min-height:min(94svh,900px);
         display:grid; grid-template-rows:auto 1fr; align-content:stretch;
         padding-block:0 var(--esp-bloco);
         color:var(--cor-claro); overflow:hidden; }
  .hero > .env{ align-self:end; justify-self:stretch; width:100%;
                padding-block:var(--esp-bloco); }
  /* Na home a fotografia começa DEBAIXO do cabeçalho fixo (é o efeito de tela cheia),
     então o conteúdo da abertura precisa do recuo do cabeçalho — senão o rótulo do topo
     nasce escondido atrás da barra. As páginas internas já ganham esse recuo no <main>. */
  .pagina-home .hero > .env{ padding-top:calc(var(--h-cabecalho,77px) + var(--esp-6)); }
  /* A faixa de socorro é o primeiro elemento do documento E vive DENTRO da abertura,
     logo abaixo do cabeçalho flutuante. Sem isto ela colide com o cabeçalho fixo. */
  .hero > .socorro{ position:relative; z-index:var(--z-conteudo);
                    background:color-mix(in srgb, var(--cor-mata) 82%, transparent);
                    backdrop-filter:blur(6px);
                    border-top:1px solid var(--cor-linha-esc); }
  /* As dezesseis fotografias foram feitas para a paleta anterior, quente e verde. Em vez
     de refazer todas, elas são GRADUADAS para o azul-roxo: dessatura, contraste e um véu
     de cor por cima. O lugar continua sendo o lugar; a temperatura é que passa a ser a
     do sistema. Custo: uma linha de filtro, contra dezesseis imagens novas. */
  .hero__foto{ position:absolute; inset:0; z-index:var(--z-cena); width:100%; height:100%;
               object-fit:cover; transform:scale(1.06);
               filter:saturate(.55) contrast(1.04) brightness(1.02); }
  /* A abertura do Nexo é um render NOTURNO: com o véu padrão por cima, o veículo — que é o
     assunto da página — vira uma mancha escura. Só esta fotografia recebe um ganho de brilho,
     porque só ela nasceu escura. O véu continua garantindo o contraste do texto. */
  .pagina-nexo .hero__foto{ filter:saturate(.6) contrast(1.02) brightness(1.42); }

  /* Camada de cor: mistura a fotografia com o azul e o roxo do sistema. Fica ABAIXO do véu
     e do conteúdo, então não mexe no contraste medido do texto. */
  .hero--foto::after{ content:""; position:absolute; inset:0; z-index:var(--z-cena);
                      mix-blend-mode:color;
                      background:linear-gradient(135deg, #1D4ED8 0%, #4C3BD8 55%, #7C3AED 100%);
                      opacity:.32; pointer-events:none; }
  .hero__veu{ position:absolute; inset:0; z-index:var(--z-veu); pointer-events:none;
              background:
                linear-gradient(180deg, rgba(5,11,34,.72) 0%, rgba(5,11,34,.22) 36%, rgba(5,11,34,.50) 64%, rgba(5,11,34,.92) 100%),
                radial-gradient(115% 78% at 18% 72%, rgba(5,11,34,.72) 0%, transparent 62%),
                /* brilho laminar: um roxo suave no alto à direita, onde não há texto */
                radial-gradient(70% 55% at 88% 8%, rgba(124,58,237,.30) 0%, transparent 70%); }
  .hero > .env{ position:relative; z-index:var(--z-conteudo); }
  .hero__titulo{ font-size:var(--t-mega); line-height:var(--lh-mega); letter-spacing:var(--ls-mega);
                 hyphens:none; overflow-wrap:normal; text-wrap:balance;
                 font-weight:var(--p-mega); max-width:17ch; margin-block:var(--esp-4) var(--esp-5); }
  /* A abertura precisa CABER na tela: com 94svh o pé ("Onda 1", "última revisão") ficava
     cortado ao meio pela dobra em 900px de altura — os quatro juízes viram texto fatiado. */
  .hero{ min-height:min(88svh,820px); }
  .hero__acoes{ display:flex; flex-wrap:wrap; gap:var(--esp-4); margin-top:var(--esp-6); }
  .hero__pe{ display:flex; flex-wrap:wrap; gap:var(--esp-3) var(--esp-6); align-items:center;
             margin-top:var(--esp-7); padding-top:var(--esp-5);
             border-top:var(--filete) solid rgba(242,245,255,.18);
             font-size:var(--t-nota); color:var(--cor-claro-2); }

  /* ══════════ CARTÃO FLUTUANTE ══════════ */
  .flutua{ background:var(--cor-creme); color:var(--cor-tinta); border-radius:var(--raio-g);
           box-shadow:var(--sombra-3); overflow:hidden; }
  .flutua__topo{ display:flex; align-items:center; justify-content:space-between; gap:var(--esp-4);
                 padding:var(--esp-4) var(--esp-5); background:var(--cor-creme-2);
                 font-size:var(--t-nota); font-weight:var(--p-forte); }
  .flutua__corpo{ padding:var(--esp-5); }

  /* ══════════ CARTÕES ══════════ */
  .cards{ display:grid; gap:var(--esp-5);
          grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr)); align-items:stretch; }
  .card{ position:relative; display:flex; flex-direction:column;
         background:var(--cor-branco); border-radius:var(--raio-g); overflow:hidden;
         box-shadow:var(--sombra-1);
         transition:transform var(--dur-media) var(--curva-saida), box-shadow var(--dur-media) var(--curva-saida); }
  .card:hover{ transform:translateY(-6px); box-shadow:var(--sombra-2); }
  .card__foto{ aspect-ratio:4/3; width:100%; object-fit:cover; }
  .card__corpo{ padding:var(--esp-5) var(--esp-5) var(--esp-6); display:flex; flex-direction:column; gap:var(--esp-3); flex:1; }
  .card__titulo{ font-size:var(--t-h3); }
  .card__titulo a{ text-decoration:none; }
  .card__titulo a::after{ content:""; position:absolute; inset:0; }
  .card__resumo{ color:var(--cor-tinta-2); font-size:var(--t-corpo); margin:0; }
  /* link do pé do cartão: área de toque de 44 px sem mudar o desenho (a margem negativa devolve o espaço) */
  .card__pe a{ display:inline-block; padding-block:.6rem; margin-block:-.6rem; }
  .card__pe{ margin-top:auto; padding-top:var(--esp-3); font-size:var(--t-nota); color:var(--cor-tinta-2);
             display:flex; align-items:center; gap:var(--esp-2); }
  .card:has(a:focus-visible){ outline:3px solid var(--foco-a); outline-offset:3px; }

  /* ══════════ PASSOS NUMERADOS ══════════ */
  .passos{ list-style:none; margin:0; padding:0; display:grid; gap:0; grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));
           background:var(--cor-branco); border-radius:var(--raio-g); overflow:hidden; box-shadow:var(--sombra-1); }
  .passo{ padding:var(--esp-6) var(--esp-5); border-right:var(--filete) solid var(--cor-linha); }
  .passo:last-child{ border-right:0; }
  .passo__n{ font-size:var(--t-nota); font-weight:var(--p-mega); color:var(--cor-verde-tinta); display:block; margin-bottom:var(--esp-2); }
  .passo__t{ font-weight:var(--p-forte); margin-bottom:var(--esp-1); }
  .passo__d{ color:var(--cor-tinta-2); font-size:var(--t-nota); margin:0; }
  @media (max-width:760px){ .passo{ border-right:0; border-bottom:var(--filete) solid var(--cor-linha); } .passo:last-child{ border-bottom:0; } }

  /* ══════════ FLUXO COM SETAS ══════════ */
  .fluxo{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--esp-3) var(--esp-5);
          padding-block:var(--esp-5); border-block:var(--filete) solid var(--cor-linha);
          font-size:var(--t-rotulo); font-weight:var(--p-forte); letter-spacing:var(--ls-rotulo);
          text-transform:uppercase; color:var(--cor-tinta); }
  .fluxo li{ display:flex; align-items:center; gap:var(--esp-5); }
  .fluxo li:not(:last-child)::after{ content:"→"; color:var(--cor-verde-tinta); font-weight:400; letter-spacing:0; }

  /* ══════════ NÚMERO GRANDE ══════════ */
  .numero{ font-size:var(--t-h1); font-weight:var(--p-mega); letter-spacing:var(--ls-h1);
           line-height:1; color:var(--cor-verde-tinta); font-variant-numeric:tabular-nums; }
  .escuro .numero{ color:var(--cor-lima); }

  /* ══════════ FAIXA DE SOCORRO — discreta ══════════ */
  .socorro{ background:var(--cor-mata-2); color:var(--cor-claro-2); }
  .socorro__env{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--esp-2) var(--esp-5);
                 padding-block:var(--esp-3); font-size:var(--t-nota); }
  .socorro b{ color:var(--cor-lima); font-weight:var(--p-mega); }   /* 14,2:1 sobre --cor-mata */
  .socorro a{ color:var(--cor-claro); display:inline-flex; align-items:center; gap:.4ch;
              min-height:var(--alvo); min-width:44px; padding-inline:var(--esp-1); }
  .socorro ul{ display:flex; flex-wrap:wrap; gap:var(--esp-2) var(--esp-4); list-style:none; margin:0; padding:0; }

  /* Página sensível: o bloco é o PRIMEIRO do documento e tem cor própria — mas é uma
     FAIXA, não um muro. Medido em /nexo/: no formato antigo ele engolia a tela inteira
     de abertura e o leitor não via o programa. Os telefones continuam primeiro, em alvo
     grande e cor de alerta; o que encolheu foi o espaço, não a informação. */
  .pagina-sensivel .socorro{ background:#FBE9E4; color:var(--cor-tinta); border-radius:var(--raio-g);
                             box-shadow:var(--sombra-1); margin-block:var(--esp-5); }
  .pagina-sensivel .socorro__env{ display:block; padding:var(--esp-5) var(--esp-5) var(--esp-4); }
  .pagina-sensivel .socorro ul{ display:flex; flex-wrap:wrap; gap:var(--esp-2) var(--esp-3);
                                margin-top:var(--esp-3); }
  .pagina-sensivel .socorro li a{ background:var(--cor-branco); border-radius:var(--raio-pill);
                                  padding:var(--esp-2) var(--esp-4); min-height:48px; width:auto;
                                  text-decoration:none; gap:var(--esp-2); font-size:var(--t-nota); }
  /* A regra antiga era `.socorro b` e aumentava TODO negrito do bloco, inclusive no meio
     da frase: o texto saía com palavras gigantes no meio do parágrafo. Só o NÚMERO cresce. */
  .pagina-sensivel .socorro b{ color:var(--cor-coral); }
  .pagina-sensivel .socorro .socorro__numero{ font-size:var(--t-corpo); font-variant-numeric:tabular-nums; }
  .pagina-sensivel .socorro__titulo{ font-size:var(--t-h3); line-height:var(--lh-titulo); }
  .pagina-sensivel .socorro__limite{ font-size:var(--t-nota); margin-top:var(--esp-2); max-width:var(--max-texto); }

  /* Âncora que aterrissa DEBAIXO do cabeçalho fixo é âncora que parece quebrada: o
     título fica escondido atrás da barra. A folga é a altura do cabeçalho mais o trilho. */
  :target, [id]{ scroll-margin-top:calc(var(--h-cabecalho, 72px) + 72px); }

  /* Trilha DENTRO da fotografia de abertura: sem faixa creme, sem padding de topo,
     cor clara medida contra o véu. Ela deixa de cortar a abertura em duas. */
  .hero--foto .migalhas{ padding:0; margin-bottom:var(--esp-4); color:var(--cor-claro-2); }
  .hero--foto .migalhas a{ color:var(--cor-claro-2); }
  .hero--foto .migalhas [aria-current]{ color:var(--cor-claro); }

  /* Hifenização automática do Chrome em português parte palavra em lugar feio
     ("chega-rem", flagrado pelo juiz cego). Fica ligada — evita estouro no celular —
     mas só entra em palavra longa, com pedaço decente dos dois lados. */
  body{ hyphenate-limit-chars: 12 6 4; }
  .olho, .hero__titulo, .hero__manchete, .card__titulo{ hyphens:manual; }

  /* ══════════ ÍNDICE DA PÁGINA ══════════
     Página interna longa sem índice obriga a rolar para descobrir o que existe. Este é
     um trilho de atalhos logo abaixo da abertura: o leitor vê o mapa da página em uma
     olhada e salta direto. Gerado pelo montador a partir de data-indice nas seções. */
  .indice{ background:var(--cor-creme-2); border-block:var(--filete) solid var(--cor-linha);
           position:sticky; top:var(--h-cabecalho, 72px); z-index:var(--z-indice); }
  .indice .env{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--esp-2) var(--esp-4);
                padding-block:var(--esp-2); }
  .indice__t{ font-size:var(--t-nota); font-weight:var(--p-forte); color:var(--cor-tinta-2);
              text-transform:uppercase; letter-spacing:.08em; margin:0; }
  .indice ul{ display:flex; flex-wrap:wrap; gap:var(--esp-1) var(--esp-2); list-style:none; margin:0; padding:0; }
  .indice a{ display:inline-flex; align-items:center; min-height:var(--alvo); padding-inline:var(--esp-3);
             border-radius:var(--raio-pill); font-size:var(--t-nota); font-weight:var(--p-forte);
             color:var(--cor-verde); text-decoration:none; }
  .indice a:hover{ background:var(--cor-branco); color:var(--cor-tinta); }
  /* Em tela estreita o trilho rola na horizontal em vez de virar cinco linhas de altura. */
  @media (max-width:900px){
    .indice{ position:static; }
    .indice .env{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:thin; }
    .indice ul{ flex-wrap:nowrap; }
    .indice a{ white-space:nowrap; }
  }

  /* ══════════ SAÍDA RÁPIDA ══════════ */
  /* Abaixo do cabeçalho: fixada no topo da janela ela caía EM CIMA do botão de contato
     do cabeçalho (medido em /nexo/ e /sos/). --h-cabecalho é medido em tempo real. */
  /* Atalho de volta ao início, fixo na tela — pedido do CEO em 01/09/2026, pensado para o
     celular: nas páginas longas, subir até o topo para achar o menu custa muitos gestos.
     Substituiu o botão "Sair rapidamente" (que levava a um site neutro). */
  .voltar{ position:fixed; bottom:var(--esp-5); right:var(--esp-5); z-index:var(--z-saida);
           background:var(--cor-mata); color:var(--cor-claro); border-radius:var(--raio-pill);
           padding:.7rem 1.2rem; min-height:var(--alvo); display:inline-flex; align-items:center;
           gap:var(--esp-2); font-weight:var(--p-forte); text-decoration:none;
           box-shadow:var(--sombra-2); border:1px solid var(--cor-linha-esc); }
  .voltar:hover{ background:var(--cor-mata-2); }
  .voltar__seta{ font-size:1.05em; line-height:1; }
  /* Sai da frente de quem está lendo (o núcleo marca ao descer a página) e volta ao subir.
     Sem JavaScript o atributo nunca aparece e o botão fica sempre visível. O foco de
     teclado sempre o traz de volta — atalho que some do teclado é armadilha. */
  .voltar{ transition:transform var(--dur-media) var(--curva-saida),
                      opacity var(--dur-media) var(--curva-saida); }
  .voltar[data-oculto]{ transform:translateY(160%); opacity:0; pointer-events:none; }
  .voltar[data-oculto]:focus-visible,
  .voltar[data-oculto]:focus{ transform:none; opacity:1; pointer-events:auto; }
  /* Movimento reduzido não quer dizer "não some": quer dizer sumir sem deslizar. */
  @media (prefers-reduced-motion: reduce){
    .voltar{ transition:none; }
    .voltar[data-oculto]{ transform:none; }
  }
  @media (max-width:620px){
    .voltar{ bottom:var(--esp-4); right:var(--esp-4); }
  }

  /* ══════════ CARIMBO — miúdo, no pé do bloco ══════════ */
  .carimbo{ font-size:var(--t-nota); color:var(--cor-tinta-2); display:flex; flex-wrap:wrap;
            gap:.4ch var(--esp-4); align-items:baseline; margin-top:var(--esp-4); }
  .escuro .carimbo, .hero--foto .carimbo{ color:var(--cor-claro-2); }
  .carimbo b{ font-weight:var(--p-forte); }

  /* ══════════ SELO DE ESTÁGIO ══════════ */
  .selo{ display:inline-flex; align-items:center; gap:var(--esp-2);
         padding:.3rem .8rem; border-radius:var(--raio-pill);
         background:var(--cor-creme-2); color:var(--cor-tinta);
         font-size:var(--t-nota); font-weight:var(--p-forte); }
  .selo::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--cor-verde-vivo); }
  .selo--estrutura::before{ background:var(--cor-tinta-2); }
  .escuro .selo{ background:rgba(242,245,255,.12); color:var(--cor-claro); }

  /* ══════════ FIGURA ══════════ */
  .figura{ margin:0; border-radius:var(--raio-g); overflow:hidden; box-shadow:var(--sombra-2); }
  .figura img{ width:100%; height:auto; display:block; }
  .figura figcaption{ padding:var(--esp-4) var(--esp-5); background:var(--cor-branco);
                      font-size:var(--t-nota); color:var(--cor-tinta-2); }
  .figura--alta img{ aspect-ratio:4/5; object-fit:cover; }

  /* ══════════ ILHA CLARA DENTRO DE SEÇÃO ESCURA ══════════
     Cartão, legenda de figura, bloco flutuante e estado-vazio carregam fundo
     CLARO próprio. Quando caem dentro de uma seção escura, as regras de texto
     claro da seção continuam valendo e o resultado é branco sobre branco —
     medido em /nexo/: 1,07:1 no título do cartão e 1,56:1 no carimbo da legenda.
     Dentro da ilha, a tinta volta. */
  .escuro :is(.card,.flutua,.vazio,.figura figcaption){ color:var(--cor-tinta); }
  .escuro :is(.card,.flutua,.vazio,.figura figcaption) :is(h1,h2,h3,h4){ color:var(--cor-tinta); }
  .escuro :is(.card,.flutua,.vazio,.figura figcaption) :is(.rotulo,a){ color:var(--cor-verde); }
  .escuro :is(.card,.flutua,.vazio,.figura figcaption) .grifo{ color:var(--cor-roxo); }
  .escuro :is(.card,.flutua,.vazio,.figura figcaption) :is(.olho,.carimbo,.card__resumo){ color:var(--cor-tinta-2); }
  .escuro :is(.card,.flutua,.vazio,.figura figcaption) .selo{ background:var(--cor-creme-2); color:var(--cor-tinta); }
  .escuro :is(.card,.flutua,.vazio,.figura figcaption) .filete{ background:var(--cor-linha); }

  /* ══════════ ESTADO VAZIO ══════════ */
  /* O pé do cartão de rota diz o que o clique faz. Não é selo de estágio: é a promessa
     da ação, e ela precisa ser cumprida — o link abre o e-mail com assunto e corpo prontos. */
  .abre-email{ margin-top:auto; padding-top:var(--esp-3); font-size:var(--t-nota);
               color:var(--cor-verde-tinta); font-weight:var(--p-forte);
               display:flex; align-items:center; gap:var(--esp-2); }
  .abre-email::before{ content:"✉"; font-size:1.1em; line-height:1; }
  .escuro .abre-email{ color:var(--cor-lima); }

  /* ══════════ ONDE ATUAMOS ══════════
     A gravura do Brasil é ilustração: quem carrega a informação é esta lista. Sem ela,
     um Estado aceso no canvas seria cor sem legenda — e cor não pode ser o único portador
     de significado (A-17). Cada item nomeia o Estado por extenso e diz o que acontece lá. */
  .onde{ list-style:none; padding:0; margin:var(--esp-5) 0 0;
         display:grid; gap:var(--esp-4); }
  .onde li{ display:grid; gap:var(--esp-1);
            padding-left:var(--esp-4); border-left:3px solid var(--cor-lima); }
  .onde b{ font-weight:var(--p-forte); }
  .escuro .onde b{ color:var(--cor-lima); }
  .onde span{ color:var(--cor-tinta-2); }
  .escuro .onde span{ color:var(--cor-claro-2); }

  .vazio{ background:var(--cor-creme-2); border-radius:var(--raio-g); padding:var(--esp-7) var(--esp-6);
          display:grid; gap:var(--esp-4); justify-items:start; }
  .vazio__t{ font-size:var(--t-h3); font-weight:var(--p-mega); }

  /* ══════════ TABELA ══════════ */
  .tabela-env{ overflow-x:auto; border-radius:var(--raio); box-shadow:var(--sombra-1); background:var(--cor-branco); }
  table{ width:100%; border-collapse:collapse; font-size:var(--t-nota); }
  th,td{ padding:var(--esp-4) var(--esp-5); text-align:left; border-bottom:var(--filete) solid var(--cor-linha); }
  thead th{ background:var(--cor-creme-2); font-weight:var(--p-forte); }
  tbody tr:last-child td{ border-bottom:0; }

  /* ══════════ FORMULÁRIO ══════════ */
  .campo{ display:grid; gap:var(--esp-2); margin-bottom:var(--esp-5); }
  .campo label{ font-weight:var(--p-forte); }
  .campo input,.campo select,.campo textarea{
    min-height:52px; padding:var(--esp-3) var(--esp-4); border-radius:var(--raio-p);
    border:1.5px solid var(--cor-linha); background:var(--cor-branco); font:inherit; }
  .campo input:focus-visible,.campo textarea:focus-visible{ border-color:var(--cor-verde); }
  .campo__ajuda{ font-size:var(--t-nota); color:var(--cor-tinta-2); }

  /* ══════════ RODAPÉ ══════════ */
  .rodape{ background:var(--cor-mata); color:var(--cor-claro-2); padding-block:var(--esp-secao) var(--esp-6); }
  .rodape h2,.rodape h3{ color:var(--cor-claro); }
  .rodape a{ color:var(--cor-claro); }
  .rodape__grade{ display:grid; gap:var(--esp-bloco);
                  grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr)); }
  .rodape__t{ font-size:var(--t-rotulo); font-weight:var(--p-forte); letter-spacing:var(--ls-rotulo);
              text-transform:uppercase; color:var(--cor-verde-claro); margin-bottom:var(--esp-4); }
  .rodape ul{ list-style:none; margin:0; padding:0; display:grid; gap:var(--esp-2); }
  /* O alvo de toque é quadrado: altura já vinha de --alvo, mas "Início" tinha 41px de
     LARGURA e ficava abaixo do mínimo de 44. Palavra curta não pode virar alvo pequeno. */
  .rodape li a{ min-height:var(--alvo); min-width:var(--alvo); display:inline-flex;
                align-items:center; text-decoration:none; }
  .rodape li a:hover{ color:var(--cor-lima); }
  .rodape__pe{ margin-top:var(--esp-bloco); padding-top:var(--esp-5);
               border-top:var(--filete) solid var(--cor-linha-esc);
               display:flex; flex-wrap:wrap; gap:var(--esp-3) var(--esp-5); align-items:center;
               font-size:var(--t-nota); }

  /* ══════════ MIGALHAS ══════════ */
  .migalhas{ font-size:var(--t-nota); color:var(--cor-tinta-2); padding-top:var(--esp-6); }
  .migalhas a{ color:var(--cor-tinta-2); }
  .migalhas [aria-current]{ color:var(--cor-tinta); font-weight:var(--p-forte); }

  /* ══════════ PULAR PARA O CONTEÚDO ══════════ */
  .pular:focus{ position:fixed; top:var(--esp-3); left:var(--esp-3); z-index:60;
                background:var(--cor-lima); color:var(--cor-mata); padding:var(--esp-3) var(--esp-5);
                border-radius:var(--raio-pill); font-weight:var(--p-forte); }
}

@layer estados{
  /* ══════════ MOVIMENTO ══════════ */
  [data-revelar="espera"]{ opacity:0; transform:translate3d(0,26px,0); }
  [data-revelar="visivel"]{ opacity:1; transform:none;
    transition:opacity var(--dur-lenta) var(--curva-saida), transform var(--dur-lenta) var(--curva-saida);
    transition-delay:var(--atraso,0ms); }

  /* a fotografia da abertura respira, devagar — Ken Burns discreto */
  @media (prefers-reduced-motion:no-preference){
    .hero__foto{ animation:respirar 26s ease-in-out infinite alternate; }
    @keyframes respirar{ from{ transform:scale(1.06) translate3d(0,0,0); }
                         to{   transform:scale(1.14) translate3d(-1.5%,-1.5%,0); } }
  }
  @media (prefers-reduced-motion:reduce){
    .hero__foto{ animation:none; transform:scale(1.02); }
    [data-revelar]{ opacity:1!important; transform:none!important; }
  }
}

@layer componentes{
  /* ── ABERTURA DE PÁGINA INTERNA: sem fotografia, fundo escuro sólido ── */
  /* Só a home tem fotografia. A abertura das páginas internas é CLARA: as 21
     páginas trazem estilos próprios que fixam texto escuro, e sobre fundo escuro
     isso dava 1,08:1. Claro é o solo em que o conteúdo delas foi escrito. */
  .hero:not(.hero--foto){
    min-height:0; background:var(--cor-creme); color:var(--cor-tinta);
    padding-block:var(--esp-bloco) var(--esp-secao);
    display:block; overflow:visible;
    border-bottom:1px solid var(--cor-linha);
  }
  .hero:not(.hero--foto) .rotulo{ color:var(--cor-verde-tinta); }
  .hero:not(.hero--foto) .olho{ color:var(--cor-tinta-2); }
  .hero:not(.hero--foto) .hero__carimbo{ color:var(--cor-tinta-2); }
  .hero:not(.hero--foto) .hero__carimbo a{ color:var(--cor-verde-tinta); }
  .hero:not(.hero--foto) .botao--contorno,
  .hero:not(.hero--foto) .botao--fantasma{ border-color:var(--cor-linha); color:var(--cor-tinta); }
  .hero:not(.hero--foto) .grifo{ color:var(--cor-roxo); }   /* 5,7:1 sobre branco */
  .hero:not(.hero--foto) > .env{ padding-block:0; }
  .hero__manchete{ font-size:var(--t-h1); line-height:var(--lh-titulo); letter-spacing:var(--ls-h1);
                   font-weight:var(--p-mega); max-width:20ch; margin-block:var(--esp-4) var(--esp-5);
                   hyphens:none; }
  .hero__manchete .linha{ display:block; }
  .hero__carimbo, .carimbo-pos-dobra{ display:flex; flex-wrap:wrap; gap:.5ch var(--esp-4);
                   align-items:baseline; font-size:var(--t-nota); color:var(--cor-claro-2); margin-top:var(--esp-4); }
  .hero__carimbo a, .carimbo-pos-dobra a{ color:var(--cor-lima); min-height:var(--alvo);
                   display:inline-flex; align-items:center; }

  /* ── O CABEÇALHO É FLUTUANTE: páginas internas precisam do espaço dele ── */
  /* Só a home tem fotografia atrás do cabeçalho. Nas demais ele precisa do próprio
     fundo, senão o texto claro cai sobre o creme e some. */
  body:not(.pagina-home) .topo{ background:var(--cor-mata); }
  body:not(.pagina-home) main{ padding-top:var(--h-cabecalho,93px); }
  .migalhas{ max-width:calc(var(--max-pagina) + 2*var(--esp-margem)); margin-inline:auto;
             padding:var(--esp-6) var(--esp-margem) 0; }

  /* ── APELIDOS DE BOTÃO DO VOCABULÁRIO ANTIGO ── */
    /* Cor sólida SOB o gradiente, sempre. Se o gradiente não pintar, o botão continua roxo
     em vez de transparente — e a medição de contraste tem uma cor para ler. */
  .botao--cheio{ background-color:var(--cor-lima);
                 background-image:linear-gradient(135deg,#C4B5FD 0%,#A78BFA 45%,#8B5CF6 100%);
                 color:var(--cor-mata); }
  .botao--cheio:hover{ background:linear-gradient(135deg,#D6CCFE 0%,#B79BFB 45%,#9C6EF8 100%); }
  .botao--contorno{ border-color:var(--cor-linha); color:var(--cor-tinta); background:transparent; }
  .hero--foto .botao--contorno, .escuro .botao--contorno{ border-color:rgba(242,245,255,.45); color:var(--cor-claro); }
  .hero--foto .botao--contorno:hover, .escuro .botao--contorno:hover{ border-color:var(--cor-lima); color:var(--cor-lima); }

  /* ── ABERTURA SEM FOTO: o conteúdo entra na mesma margem do resto ── */
  .hero:not(.hero--foto) > *{
    max-width:calc(var(--max-pagina) + 2*var(--esp-margem));
    margin-inline:auto; padding-inline:var(--esp-margem);
  }
  .hero:not(.hero--foto) > .env{ padding-inline:var(--esp-margem); }
  /* seções soltas das páginas internas também respeitam a margem */
  main > section:not(.hero):not(.secao):not(.escuro) > *:not(.grelha):not(.env),
  main > section:not(.hero) > h2, main > section:not(.hero) > p{
    max-width:calc(var(--max-pagina) + 2*var(--esp-margem));
    margin-inline:auto; padding-inline:var(--esp-margem);
  }
  main > section:not(.hero){ padding-block:var(--esp-secao); }

  /* ── GRELHA ── */
  .grelha{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:var(--esp-bloco) var(--esp-6);
           max-width:calc(var(--max-pagina) + 2*var(--esp-margem)); margin-inline:auto;
           padding-inline:var(--esp-margem); }
  .t-texto{ grid-column:1/8; } .t-lateral{ grid-column:9/13; } .t-larga{ grid-column:1/13; }
  .t-meia{ grid-column:1/7; } .t-meia-b{ grid-column:7/13; }
  @media (max-width:900px){ .grelha{ grid-template-columns:1fr; }
    .t-texto,.t-lateral,.t-larga,.t-meia,.t-meia-b{ grid-column:1/-1; } }

  /* ── AVISOS ── */
  .aviso{ display:block; padding:var(--esp-5) var(--esp-6); border-radius:var(--raio-g);
          background:var(--cor-creme-2); color:var(--cor-tinta); margin-block:var(--esp-5);
          border-left:5px solid var(--cor-verde-vivo); }
  .aviso__titulo{ font-size:var(--t-h3); font-weight:var(--p-mega); margin-bottom:var(--esp-3); }
  .aviso--limite{ background:#FBE9E4; border-left-color:var(--cor-coral); }
  .aviso--atencao{ background:#FBF0D6; border-left-color:#8A5A00; }
  .aviso--estagio{ background:var(--cor-creme-2); border-left-color:var(--cor-tinta-2); }
  .escuro .aviso, .hero--foto .aviso{ background:rgba(242,245,255,.10); color:var(--cor-claro); border-left-color:var(--cor-verde-claro); }

  /* ── INDICADOR ── */
  .indicador{ margin:0; background:var(--cor-branco); border-radius:var(--raio-g);
              padding:var(--esp-6); box-shadow:var(--sombra-1); display:grid; gap:var(--esp-2); }
  .indicador__rotulo{ font-size:var(--t-rotulo); font-weight:var(--p-forte); letter-spacing:var(--ls-rotulo);
                      text-transform:uppercase; color:var(--cor-verde-tinta); }
  .indicador__valor, .num{ font-size:var(--t-h1); font-weight:var(--p-mega); line-height:1;
                           letter-spacing:var(--ls-h1); color:var(--cor-tinta); font-variant-numeric:tabular-nums; }
  .indicador__unidade{ color:var(--cor-tinta-2); }
  .barra{ display:block; height:8px; border-radius:var(--raio-pill); background:var(--cor-creme-2); overflow:hidden; }
  .barra span{ display:block; height:100%; width:calc(var(--p,0)*100%); background:var(--cor-verde-vivo); border-radius:inherit; }

  /* ── FICHA (details) ── */
  .ficha{ border-top:var(--filete) solid var(--cor-linha); margin-top:var(--esp-4); padding-top:var(--esp-3); }
  .ficha > summary{ cursor:pointer; font-weight:var(--p-forte); min-height:var(--alvo);
                    display:flex; align-items:center; gap:var(--esp-2); color:var(--cor-verde-tinta); }
  .ficha__corpo{ padding-top:var(--esp-3); color:var(--cor-tinta-2); font-size:var(--t-nota); }
  .ficha dl{ display:grid; gap:var(--esp-3); margin:0; }
  .ficha dt{ font-weight:var(--p-forte); color:var(--cor-tinta); }
  .ficha dd{ margin:0; }

  /* ── SELO DE ESTÁGIO (nome antigo) ── */
  .estado{ display:inline-flex; align-items:center; gap:var(--esp-2);
           padding:.3rem .8rem; border-radius:var(--raio-pill);
           background:var(--cor-creme-2); color:var(--cor-tinta);
           font-size:var(--t-nota); font-weight:var(--p-forte); }
  .estado__marca{ width:8px; height:8px; border-radius:50%; background:var(--cor-tinta-2); flex:none; }
  .estado--operacional .estado__marca{ background:var(--cor-verde-vivo); }
  .estado--piloto .estado__marca, .estado--formalizacao .estado__marca{ background:#8A5A00; }
  .estado--suspenso .estado__marca{ background:var(--cor-coral); }
  .escuro .estado{ background:rgba(242,245,255,.12); color:var(--cor-claro); }

  /* ── VAZIO (nome antigo) ── */
  .vazio__titulo{ font-size:var(--t-h3); font-weight:var(--p-mega); }

  /* ── PLACA / FIGURA (nomes antigos) ── */
  .placa{ margin:0; }
  .placa__caixa{ position:relative; border-radius:var(--raio-g); overflow:hidden;
                 background:var(--cor-mata); aspect-ratio:16/10; }
  .placa__caixa img, .placa__caixa canvas{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  .placa__legenda{ padding:var(--esp-4) 0 0; font-size:var(--t-nota); color:var(--cor-tinta-2); }
  .escuro .placa__legenda{ color:var(--cor-claro-2); }
  .placa__vinheta, .placa__grao, .placa__registro, .placa__controles{ display:none; }
  .figura--sangria, .figura--editorial{ border-radius:var(--raio-g); overflow:hidden; }

  /* ── DECORATIVOS QUE SAEM DE CENA ── */
  .filete{ display:none; }
  .quadriculada{ background-image:none; }

  /* ── CLASSES ÓRFÃS: sem regra própria elas herdavam a cor clara do bloco anterior
        e caíam para 1,08:1 sobre o creme. Aqui recebem a cor do solo em que estão. ── */
  .entrada, .atalho, .destaque, .intro, .sumario, .chamada{ color:var(--cor-tinta); }
  .escuro .entrada, .escuro .atalho, .hero--foto .entrada, .hero--foto .atalho{ color:var(--cor-claro); }
  .entrada{ font-size:var(--t-olho); line-height:var(--lh-olho); color:var(--cor-tinta-2); }
  .escuro .entrada, .hero--foto .entrada{ color:var(--cor-claro-2); }
  a.atalho{ color:var(--cor-verde-tinta); font-weight:var(--p-forte);
            min-height:var(--alvo); display:inline-flex; align-items:center; gap:var(--esp-2); }
  .escuro a.atalho, .hero--foto a.atalho{ color:var(--cor-lima); }

  /* ── MISCELÂNEA ── */
  .bloco__corpo{ display:block; }
  .lista-rotas{ list-style:none; padding:0; display:grid; gap:var(--esp-3); }
  .socorro__titulo{ font-size:var(--t-h3); font-weight:var(--p-mega); margin-bottom:var(--esp-3);
                    color:#8E2415; }                                /* 6,4:1 sobre creme e sobre #FBE9E4 */
  .hero--foto .socorro__titulo, .escuro .socorro__titulo{ color:var(--cor-claro); }
  .pagina-sensivel .socorro__titulo{ color:#8E2415; }               /* 6,4:1 sobre #FBE9E4 */
  body:not(.pagina-sensivel) .socorro li a span,
  body:not(.pagina-sensivel) .socorro__linhas span{ color:var(--cor-claro-2); }
  .pagina-sensivel .socorro li a span,
  .pagina-sensivel .socorro__linhas span{ color:var(--cor-tinta); }
  .pagina-sensivel .socorro li a{ color:var(--cor-tinta); }
  .pagina-sensivel .socorro__limite{ color:var(--cor-tinta); }
  .socorro__linhas{ list-style:none; margin:0; padding:0; }
  .socorro__linhas a{ min-height:56px; min-width:44px; display:inline-flex; align-items:center; gap:var(--esp-3); }
  .socorro__numero{ font-weight:var(--p-mega); font-variant-numeric:tabular-nums; }
  .socorro__limite{ margin-top:var(--esp-4); font-size:var(--t-nota); }
  .rotulo--longo{ align-items:flex-start; }
}

@layer estados{
  /* O bloco de socorro tem cor e alvo GARANTIDOS, aconteça o que acontecer com o
     estilo da página. É o único lugar do sistema com !important, e é deliberado. */
  .socorro{ background:var(--cor-mata) !important; }
  /* O título só fica claro DENTRO da faixa escura. Solto numa página clara ele
     precisa ser escuro — foi assim que ele mediu 1,1:1 em /privacidade/. */
  .socorro .socorro__titulo{ color:var(--cor-claro) !important; }
  .socorro__titulo{ color:#8E2415; }
  .socorro a, .socorro__linhas a{
    color:var(--cor-claro) !important;
    min-height:56px !important; min-width:56px !important;
    display:inline-flex !important; align-items:center !important; gap:var(--esp-3) !important;
    padding-inline:var(--esp-2) !important;
  }
  .socorro b, .socorro .socorro__numero{ color:var(--cor-lima) !important; }   /* 14,2:1 */

  /* TODO telefone do site é alvo de 56x56, esteja onde estiver. É a regra mais
     dura do sistema porque é a única que alguém pode precisar com a mão trêmula. */
  a[href^="tel:"]{
    min-height:56px !important; min-width:56px !important;
    display:inline-flex !important; align-items:center !important;
    gap:var(--esp-3) !important; padding-inline:var(--esp-2) !important;
  }
  .socorro span, .socorro__limite, .socorro p{ color:var(--cor-claro-2) !important; }  /* 9,4:1 */

  /* Na página sensível o bloco é claro e grande — mas com a mesma garantia. */
  .pagina-sensivel .socorro{ background:#FBE9E4 !important; }
  .pagina-sensivel .socorro__titulo{ color:#8E2415 !important; }
  /* A trava garante COR e ALVO do telefone, não o tamanho da caixa: a folga generosa
     saiu daqui quando a faixa virou faixa (o alvo de 48px continua garantido). */
  .pagina-sensivel .socorro a, .pagina-sensivel .socorro__linhas a{
    color:var(--cor-tinta) !important; background:var(--cor-branco) !important;
    border-radius:var(--raio-pill) !important; padding:var(--esp-2) var(--esp-4) !important;
    min-height:48px !important; }
  .pagina-sensivel .socorro b, .pagina-sensivel .socorro__numero{ color:#8E2415 !important; }
  .pagina-sensivel .socorro span, .pagina-sensivel .socorro__limite,
  .pagina-sensivel .socorro p{ color:var(--cor-tinta) !important; }

  /* A abertura da home é medida contra a cor da chapa, não contra o branco:
     a fotografia cobre este fundo, e o véu garante o contraste. */
  .hero--foto{ background:var(--cor-mata); }
}

.topo a[data-secao-ativa],.rodape a[data-secao-ativa]{text-decoration:underline;text-underline-offset:.35em;font-weight:600}