/* ==========================================================================
   FASE 03.3 V3.3 — AUDITORIA EXTERNA CONSOLIDADA
   --------------------------------------------------------------------------
   Última folha da cascata. Contém APENAS as correções que a auditoria
   confirmou por medição — cada bloco diz o que foi medido, qual o impacto e
   qual a prioridade.

   O que NÃO está aqui, por decisão explícita: hero centralizado, diferenciais
   com ícone acima, tamanho da marca, paleta, tipografia, cards de serviço,
   barra inferior, arquitetura, imagens, FAQ. Nenhum deles apresentou
   regressão objetiva, e o princípio da auditoria é: sem ganho perceptível,
   MANTER.
   ========================================================================== */


/* --------------------------------------------------------------------------
   P0 · A — MENU DO CELULAR SEM CALHA LATERAL
   [F] Medido nas duas páginas, em 360, 390, 430 e 768: o `<ul>` do painel
   tem `padding-left` e `padding-right` = 0px. O primeiro link vai de x=0 até
   x=largura da tela, e o selo numérico da direita (01…05) é cortado pela
   borda em TODAS essas larguras.

   Causa-raiz: `.hd__panel ul{ padding:6px 0 14px }`, em home.css, tem
   especificidade maior que a classe `.wrap` que o `<ul>` carrega justamente
   para ter a calha.

   Impacto: o menu aberto — a navegação principal do celular — lê como
   quebrado, e a numeração fica ilegível.

   Correção: a exata que o briefing autoriza no item 9. Devolve a calha e não
   toca em mais nada da estrutura do menu.
   -------------------------------------------------------------------------- */
.hd__panel ul{ padding:6px var(--pad) 14px; }


/* --------------------------------------------------------------------------
   P0 · B — A LISTA DE SITUAÇÕES PERDEU A VARREDURA
   [F] A seção "O que você precisa resolver?" é uma LISTA de seis linhas, e a
   função dela é ser varrida, não lida. Medido:

     390px  → a célula de texto tem 200px. Os seis títulos quebram em
              2, 2, 3, 3, 2 e 2 linhas, centralizados, com borda irregular
              dos dois lados
     1440px → a célula tem 354px e os títulos variam entre 1 e 2 linhas,
              cada um com um recuo diferente

   [I→descartado] Cheguei a supor que a grade 2×3 do desktop estivesse
   desalinhada entre as colunas. A medição desmentiu: os topos das linhas são
   1519/1519, 1639/1639 e 1758/1758 — pareados, como um grid faz por
   definição. Fica aqui porque inferência não vira fato, nem quando é minha.

   Impacto real, e só ele: sem margem esquerda comum, o olho não tem por onde
   descer a lista. Alinhar não muda onde a linha quebra — muda onde ela se
   apoia, e é isso que devolve a varredura.

   Correção: o TEXTO da lista volta à esquerda. O bloco continua centrado na
   página, o cabeçalho da seção continua centrado, o filete dourado continua
   no eixo. É exatamente a regra do item 8 do briefing: composição
   centralizada não é o mesmo que todo texto centralizado, e UX tem
   prioridade.
   -------------------------------------------------------------------------- */
.lista > *{ text-align:left; }
.item__b{ text-align:left; }


/* --------------------------------------------------------------------------
   P1 · C — O TRILHO DO "COMO FUNCIONA" ATRAVESSA O CONTEÚDO NO CELULAR
   [F] Ao centralizar as etapas, o trilho vertical — que antes corria à
   esquerda, ao lado do texto — passou para o eixo central e agora cruza o
   meio de cada bloco, com o nó dourado empilhado acima do ícone. São dois
   marcadores diferentes na mesma coluna, sem relação legível entre si.

   Impacto: ruído visual numa seção que existe para explicar uma sequência
   simples em quatro passos.

   Correção: no celular a sequência se apoia no ESPAÇO e na numeração, não
   num trilho. O nó e a linha saem; ícone, número e título ficam no eixo. No
   desktop, onde o trilho é horizontal e liga as quatro etapas lado a lado,
   nada muda — lá ele funciona.
   -------------------------------------------------------------------------- */
@media (max-width:979px){
  .etapa::before,
  .etapa::after{ display:none; }
  .etapa{ padding:20px 0; }
  .etapa + .etapa{ border-top:1px solid var(--line-soft); }
}


/* --------------------------------------------------------------------------
   P1 · F — ALVO DO BOTÃO DE MENU COM 36px DE LARGURA
   [F] Medido em 390px: 36 × 48px. Cumpre o mínimo da AA (24px, WCAG 2.5.8) e
   fica abaixo da meta de conforto de 44px que o projeto adota, na horizontal.

   Correção: só a área de toque cresce. O desenho do ícone — dois traços de
   20px — não muda em nada.
   -------------------------------------------------------------------------- */
.hd__btn{ min-width:48px; justify-content:flex-end; }


/* --------------------------------------------------------------------------
   P1 · D — O REGISTRO PROFISSIONAL PARTIDO NO RODAPÉ
   [F] Em 390 e 430px a credencial do rodapé quebra entre "CREA-PE" e
   "182385569-5", deixando o registro em duas linhas.

   A D-069 já tinha tratado exatamente isso no painel de credencial da seção
   de Responsabilidade, com a justificativa registrada de que "um registro
   partido lê como erro". O rodapé ficou de fora na ocasião.

   Correção: o número do registro não quebra. O `nowrap` entra por uma classe
   no HTML, junto ao próprio dado — ver `.nao-quebra` abaixo.
   -------------------------------------------------------------------------- */
.nao-quebra{ white-space:nowrap; }


/* --------------------------------------------------------------------------
   P0 · G — O ANEL DE FOCO É INVISÍVEL NO CABEÇALHO E NO HERO
   [F] Achado pelo teste de teclado, que nenhuma bateria anterior fazia: elas
   conferiam se o elemento tinha NOME acessível, não se dava para VER onde o
   foco estava.

   Medido: com o foco na marca ou num item do menu, o anel sai em
   `rgb(13,27,42)` — o navy — sobre o fundo navy do cabeçalho. Contraste de
   aproximadamente 1,1:1. Na captura antes/depois, o foco alterou ZERO pixels.

   Causa-raiz: `tokens.css` troca o anel para dourado em `.sec--navy`, `.ft` e
   `.wa-fix`, mas o cabeçalho, o painel do menu e o hero nunca entraram nessa
   lista — e os três são navy. Vem da Fase 02.7.

   Impacto: quem navega por teclado não enxerga onde está em toda a navegação
   principal, na marca, no botão de WhatsApp do topo e no CTA do hero.
   É falha de WCAG 2.4.7 (Focus Visible), nível AA.

   Correção: os três contextos escuros passam a usar o mesmo anel dourado que
   o rodapé já usava. Nenhuma cor nova, nenhuma mudança no estado normal — só
   o foco fica visível.
   -------------------------------------------------------------------------- */
.hd :focus-visible,
.hd__panel :focus-visible,
.hero :focus-visible{ outline-color:var(--gold); }
/* o CTA dourado do hero é a exceção dentro da exceção: sobre ele, o anel
   dourado sumiria. Ali o anel é branco, que contrasta com o dourado e com o
   navy que o cerca. */
.hero .cta:focus-visible,
.hd__cta:focus-visible{ outline-color:var(--white); }


/* ==========================================================================
   GATE A — INTEGRAÇÃO DOS DADOS CONFIRMADOS PELO RT
   Caruaru-PE e nunesavaliacoes@gmail.com deixaram de ser pendência em
   21/09/2026. Só isso. Nenhuma outra alteração visual.
   ========================================================================== */

/* --------------------------------------------------------------------------
   A FAIXA DE BENEFÍCIOS VOLTA A QUATRO COLUNAS
   Ela nasceu com quatro na referência canônica. Passou a três na Fase 03.3 V2
   porque o quarto item era "Atendimento na sua região" e a região não estava
   confirmada — dado pendente não entra na interface (D-018, D-019), e deixar
   uma coluna vazia seria pior que redistribuir.

   Com a região confirmada, o quarto volta e a geometria volta com ele. É
   restauração do modelo aprovado, não desenho novo.
   -------------------------------------------------------------------------- */
@media (min-width:700px) and (max-width:999px){
  .ben__l{ grid-template-columns:repeat(2,1fr); gap:22px 26px; }
}
@media (min-width:1000px){
  .ben__l{ grid-template-columns:repeat(4,1fr); gap:0 30px; }
}

/* o e-mail é longo e não pode empurrar a coluna do rodapé nem vazar a tela */
.ft__mail{ word-break:break-word; }


/* --------------------------------------------------------------------------
   GATE A.1 — A FAIXA DE BENEFÍCIOS EM 2×2 NO CELULAR
   A auditoria externa do Gate A apontou o único problema visual restante: com
   o quarto benefício de volta, os quatro ficavam empilhados em coluna única
   abaixo de 700px. Informação curta e simétrica não precisa de quatro linhas
   — o 2×2 aproveita a largura disponível e devolve altura à página.

   Os breakpoints de 700–999 e de 1000+ não foram tocados: o tablet e o
   desktop continuam idênticos ao Gate A.
   -------------------------------------------------------------------------- */
/* Gate A.1 — benefícios mobile 2×2 */
@media (max-width:699px){
  .ben__l{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:28px 14px;
  }

  .ben__l li{
    min-width:0;
    padding-inline:6px;
  }

  .ben__l li > span:last-child{
    max-width:150px;
    margin-inline:auto;
  }
}