/* =========================================================================
   Mútua Associação de Caminhoneiros
   Paleta tirada do próprio logotipo: verde #20382F e dourado #837028

   Leitor real: caminhoneiro na cabine, celular Android modesto, sol forte,
   internet de beira de estrada, vista cansada, às vezes de luva.
   Por isso: corpo grande, contraste alto (AAA no texto corrido),
   alvo de toque de 48px pra cima e nada que fique se mexendo sozinho.
   ========================================================================= */

/* ---------- fonte self-hosted: 1 arquivo variável cobre 400 a 800 -------- */
@font-face{
  font-family:"Archivo";
  src:url("../fonts/archivo-latin-var.woff2") format("woff2") tech(variations),
      url("../fonts/archivo-latin-var.woff2") format("woff2-variations");
  font-weight:400 800;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
                U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;
}

/* -------------------------------------------------------------------------
   FONTE ÚNICA DE VERDADE

   Todo token da página mora aqui. O arquivo tinha quatro blocos :root
   empilhados de gerações diferentes de correção, e o valor que valia era
   sempre o último, o que tornava impossível saber o tamanho de qualquer
   coisa sem rodar o navegador. Consolidado num bloco só.
   ------------------------------------------------------------------------- */
:root{
  /* cor de marca */
  --verde:#20382F;
  --verde-esc:#1B2F27;
  --verde-prof:#132420;
  --verde-linha:#35483F;
  --ouro:#837028;
  --ouro-esc:#6F5F22;
  --ouro-luz:#D9B65C;
  --vermelho:#B3261E;
  --vermelho-claro:#E1655C;

  /* papel e tinta */
  --creme:#F7F4EC;
  --papel:#EFEADE;
  --branco:#FFFFFF;
  --tinta:#131815;        /* 16,3:1 sobre creme  AAA */
  --tinta-2:#39423C;      /*  9,5:1 sobre creme  AAA */
  --tinta-3:#4C564F;      /*  6,9:1 sobre creme  AA forte, só legenda */
  --linha:rgba(19,24,21,.14);
  --linha-forte:rgba(19,24,21,.24);
  --zap:#0E7A3F;

  /* sobre fundo escuro */
  --claro:#FFFFFF;
  --claro-2:#DDE2DE;      /* 12,3:1 sobre verde profundo  AAA */

  /* medidas */
  --max:1200px;
  --borda:22px;
  --secao:clamp(64px,7.6vw,124px);

  /* raio: quatro degraus, nada fora desta lista */
  --r-btn:999px;          /* botão em cápsula */
  --r-campo:14px;         /* campo de formulário, item de menu */
  --r-card:20px;          /* cartão, retrato, conversa, sanfona */
  --r-placa:28px;         /* placa e formulário, as duas maiores caixas */
  --r-img:22px;           /* foto com moldura */

  /* profundidade */
  --sombra-baixa:0 2px 8px -2px rgba(13,22,19,.18);
  --sombra-media:0 14px 34px -18px rgba(13,22,19,.55);
  --sombra-alta:0 34px 80px -40px rgba(13,22,19,.72);

  /* ESCALA TIPOGRÁFICA
     Calibrada depois da redução geral pedida pelo cliente. Os dois degraus
     de cima (display e seção) ficam exatamente como ele aprovou. O que foi
     corrigido é o meio da escala, que na redução tinha desabado: título de
     cartão (17,2px) e linha de apoio (16,9px) ficaram do tamanho do corpo
     (17px), ou menores que ele, e a hierarquia sumiu. Agora cada degrau é
     visivelmente maior que o de baixo, e o menor tamanho da página voltou
     a ser 16px, com uma única exceção: o rótulo em caixa alta, em 13px.
     Piso pensado para vista cansada e sol na cabine. */
  --t-display:clamp(1.95rem,1.15rem + 2.7vw,3.15rem);   /* 31,2  →  50,4 */
  --t-secao:clamp(1.55rem,1.05rem + 2vw,2.5rem);        /* 24,8  →  40,0 */
  --t-placa:clamp(1.3rem,1.05rem + 1.1vw,1.85rem);      /* 21,1  →  29,6 */
  --t-sub:clamp(1.18rem,1.04rem + .5vw,1.4rem);         /* 18,9  →  22,4 */
  --t-card:clamp(1.18rem,1.08rem + .42vw,1.38rem);      /* 18,9  →  22,1 */
  --t-lead:clamp(1.125rem,1.05rem + .3vw,1.24rem);      /* 18,0  →  19,8 */
  --t-numero:clamp(3rem,2rem + 4.2vw,4.6rem);
  --t-corpo:1.0625rem;    /* 17px, acima do padrão de 16 por causa do sol */
  --t-nota:1rem;          /* 16px é o piso do texto de leitura */
  --t-rotulo:.8125rem;    /* 13px, só em caixa alta com espacejamento */

  /* movimento */
  --saida:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:96px;
}

body{
  margin:0;
  background:var(--creme);
  color:var(--tinta);
  font-family:"Archivo","Roboto","Helvetica Neue",system-ui,-apple-system,Arial,sans-serif;
  font-size:var(--t-corpo);
  line-height:1.62;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}

.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--borda)}

/* ---------- foco: desenhado, nunca removido ---------- */
:focus{outline:none}
:focus-visible{
  outline:3px solid var(--ouro);
  outline-offset:3px;
  border-radius:2px;
}
.sobre-escuro :focus-visible,
.hero :focus-visible,
.assoc :focus-visible,
.simular :focus-visible,
.rodape :focus-visible,
.barra-topo :focus-visible,
.barra-fixa :focus-visible{outline-color:var(--ouro-luz)}

.pular{
  position:absolute;left:-9999px;top:0;z-index:300;
  background:var(--verde);color:#fff;padding:16px 24px;font-weight:700;
  border-bottom-right-radius:var(--r-campo);
}
.pular:focus{left:0}

.oculto-visual{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

/* =========================================================================
   BOTÕES  ·  altura mínima de 52px no desktop, 56px no toque
   ========================================================================= */
/* Forma e comportamento aqui; superfície (degradê, raio, sombra) no bloco
   de ACABAMENTO, no fim do arquivo. Antes as duas coisas estavam divididas
   entre dois blocos que declaravam as MESMAS propriedades, e o fundo de
   cada botão dependia de qual regra vinha por último. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:10px;min-height:52px;padding:14px 30px;
  border:2px solid transparent;
  font:inherit;font-size:1.0625rem;font-weight:700;letter-spacing:.005em;
  line-height:1.2;text-align:center;text-decoration:none;cursor:pointer;
}

.btn--ouro{color:#fff}
.btn--verde{color:#fff}
.btn--linha{background:transparent;color:var(--verde-esc);border-color:var(--linha-forte)}
.btn--claro{color:var(--verde-esc)}
.btn--zap{background:var(--zap);color:#fff}

/* hover com intenção: o botão levanta um fio e ganha sombra, em vez de só
   trocar de cor. Duração curta, porque é gesto de mil vezes por dia. */
@media (hover:hover) and (pointer:fine){
  .btn:hover{transform:translateY(-2px)}
  .btn--linha:hover{border-color:var(--verde-esc);background:rgba(32,56,47,.06)}
  .btn--claro:hover{background:var(--papel);box-shadow:0 10px 24px -14px rgba(9,16,13,.8)}
  .btn--zap:hover{background:#0B6835;box-shadow:0 10px 22px -12px rgba(11,104,53,.9)}
}
.btn:active{transform:translateY(1px);box-shadow:none}

/* glifo do WhatsApp dentro dos botões: monocromático, herdando a cor do
   texto. O verde oficial da marca do WhatsApp briga com o verde da Mútua,
   então ele fica reservado ao flutuante e à barra fixa do celular. */
.ico{
  width:1.28em;height:1.28em;flex:none;
  fill:currentColor;color:inherit;
  transform:translateY(-.03em);
}

.btn--g{min-height:58px;padding:16px 34px;font-size:1.125rem}
.btn--bloco{width:100%}

/* botão de ligar: rótulo pequeno em cima, número grande embaixo */
.btn--fone{
  flex-direction:column;align-items:flex-start;gap:2px;
  padding-block:12px;text-align:left;
}
.btn__sup{
  font-size:var(--t-rotulo);font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;opacity:.9;
}
.btn__prin{font-size:1.3rem;font-weight:800;letter-spacing:-.01em}

/* bloco de chamada que fecha cada seção: botão mais um apoio discreto */
.naos__acao,.cobre__acao,.time__acao,.prova__rodape{
  display:flex;align-items:center;gap:18px 22px;flex-wrap:wrap;
}
.naos__acao{margin-top:clamp(28px,3vw,40px);padding-top:clamp(24px,2.6vw,34px);border-top:1px solid var(--linha)}
.time__acao{margin-top:clamp(32px,3.4vw,46px)}
.cobre__acao{margin-top:4px}
.prova__rodape{margin-top:clamp(28px,3vw,40px);justify-content:space-between}
.prova__rodape .prova__nota{margin:0}
.acao__apoio{
  font-size:var(--t-nota);font-weight:600;color:var(--tinta-3);
}
.assoc .acao__apoio{color:var(--claro-2)}
@media (max-width:600px){
  .naos__acao .btn,.cobre__acao .btn,.time__acao .btn,.prova__rodape .btn{width:100%}
  .acao__apoio{width:100%}
}

/* =========================================================================
   TIPOGRAFIA DE SEÇÃO
   ========================================================================= */
.rotulo{
  display:block;
  font-size:var(--t-rotulo);font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--tinta-2);margin:0 0 18px;
}
.rotulo--claro{color:var(--claro-2)}

/* Entrelinha: a escala menor pede linha um pouco mais alta. Em 0,99 as
   linhas do título encostavam umas nas outras agora que a fonte encolheu,
   e no celular o título vira bloco maciço. */
.tit-display{
  font-size:var(--t-display);font-weight:800;
  letter-spacing:-.032em;line-height:1.06;margin:0 0 26px;
  max-width:17ch;
}
.tit-secao{
  font-size:var(--t-secao);font-weight:800;
  letter-spacing:-.026em;line-height:1.1;margin:0 0 22px;
  max-width:19ch;
}
.tit-secao--claro,.tit-display--claro{color:#fff}

.lead{
  font-size:var(--t-lead);line-height:1.55;color:var(--tinta-2);
  margin:0 0 32px;max-width:46ch;
}
.lead--claro{color:var(--claro-2)}

/* =========================================================================
   CABEÇALHO  ·  pílula flutuante sobre a página
   Fora do fluxo: a página começa no topo da tela e a pílula paira por
   cima, compacta quando rola e marca a seção ativa. A barra de telefones
   saiu; o televendas vive aqui, a emergência 24h vive no hero e no rodapé.
   ========================================================================= */
.cab{
  position:fixed;top:14px;left:0;right:0;z-index:60;
  display:flex;justify-content:center;
  padding-inline:14px;
  pointer-events:none;
  transition:top .24s var(--saida),padding .24s var(--saida);
}
.cab__pilula{
  pointer-events:auto;
  display:flex;align-items:center;gap:2px;
  width:100%;max-width:1080px;
  padding:8px 8px 8px 22px;
  border-radius:999px;
  background:rgba(250,247,240,.94);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65),
    0 12px 40px -18px rgba(19,24,21,.5),
    0 0 0 1px rgba(19,24,21,.07);
  transition:padding .24s var(--saida),box-shadow .24s var(--saida),
    max-width .24s var(--saida),border-radius .24s var(--saida);
}
/* Rolou, a pílula abre e vira barra INTEIRA colada no topo: o conteúdo
   passa por baixo dela, nunca do lado (apontado pelo Alê). */
.cab--rolado{top:0;padding-inline:0}
.cab--rolado .cab__pilula{
  max-width:100vw;
  border-radius:0;
  padding:5px clamp(16px,2.4vw,32px) 5px clamp(20px,3vw,40px);
  box-shadow:0 1px 0 rgba(19,24,21,.08),
    0 16px 44px -16px rgba(19,24,21,.55);
}
.cab__marca{display:inline-flex;align-items:center;margin-right:12px}
.cab__marca img{width:132px;height:auto;transition:width .22s var(--saida)}
.cab--rolado .cab__marca img{width:114px}

.cab__nav{display:flex;gap:2px;margin-left:auto}
.cab__nav a{
  display:inline-flex;align-items:center;min-height:44px;padding:0 15px;
  text-decoration:none;font-size:.98rem;font-weight:600;color:var(--tinta);
  border-radius:999px;position:relative;white-space:nowrap;
  transition:background-color .16s var(--saida),color .16s var(--saida);
}
.cab__nav a.ativo{color:var(--verde-prof)}
.cab__nav a.ativo::after{
  content:"";position:absolute;left:50%;bottom:5px;width:5px;height:5px;
  border-radius:50%;background:var(--ouro);transform:translateX(-50%);
}
@media (hover:hover) and (pointer:fine){
  .cab__nav a:hover{background:rgba(19,24,21,.06)}
}

.cab__fone{
  display:flex;flex-direction:column;align-items:flex-start;
  margin-left:10px;padding:5px 14px;line-height:1.18;
  text-decoration:none;border-radius:999px;
  transition:background-color .16s var(--saida);
}
.cab__fone span{
  font-size:var(--t-rotulo);font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:rgba(19,24,21,.55);
}
.cab__fone b{font-size:1rem;color:var(--tinta);white-space:nowrap}
@media (hover:hover) and (pointer:fine){
  .cab__fone:hover{background:rgba(19,24,21,.06)}
}
.cab__cta{margin-left:8px}

@media (max-width:1180px){
  .cab__fone{display:none}
}
@media (max-width:900px){
  .cab{top:10px;padding-inline:10px}
  .cab__nav{display:none}
  .cab__cta{margin-left:auto}
  .cab__pilula{padding:6px 6px 6px 16px}
  .cab__marca img{width:116px}
}
@media (max-width:430px){
  .cab__cta{padding-inline:16px;font-size:1rem}
  .cab__marca img{width:104px}
}

/* âncoras respiram sob a pílula */
[id]{scroll-margin-top:96px}

/* =========================================================================
   HERO  ·  foto tratada, gradação em camadas, conteúdo sobreposto
   ========================================================================= */
/* EMPILHAMENTO DO HERO, DECLARADO UMA VEZ SÓ.
   A montagem original punha foto e véu em z-index negativo, o que só
   funciona enquanto o .hero mantiver contexto de empilhamento próprio, e
   quebrou duas vezes. Agora é positivo e explícito: foto (0), véu (1),
   conteúdo (2). Estava havendo ainda um segundo bloco, no fim do arquivo,
   que repetia estas três regras com "inset:0". Como ele vinha depois do
   bloco de celular, o "inset" reescrevia o "top:auto" e a faixa da foto
   ia parar no TOPO do hero, atrás do texto, deixando 650px de verde vazio
   embaixo no aparelho de 390px. O bloco duplicado saiu. */
.hero{
  position:relative;isolation:isolate;z-index:0;
  background:var(--verde-prof);color:#fff;
  padding-block:clamp(64px,8.4vw,124px) clamp(88px,11vw,168px);
}
/* o cabeçalho flutua e não empurra mais o hero: o espaço dele é pago aqui.
   Enxuto de propósito: o hero precisa caber inteiro numa tela. */
@media (min-width:901px){
  .hero{padding-top:clamp(110px,11vw,148px)}
}
@media (max-width:900px){
  .hero{padding-top:116px}
}
.hero__foto{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero__foto img{width:100%;height:100%;object-fit:cover;object-position:62% 52%}

/* O véu não cobre o quadro: ele abre uma sombra onde o texto pousa e sai
   da frente do resto. O pôr do sol da direita chega quase limpo à tela, e
   é ali que o dourado da foto encontra o dourado da marca. Uma camada
   chapada sobre a imagem inteira mataria justamente isso.

   UMA camada, pintada no próprio elemento. As três gerações anteriores
   empilhavam ::before e ::after e o resultado composto apagava o pôr do
   sol inteiro; a última delas precisava de "content:none !important" para
   desligar as outras duas. Tudo isso saiu. */
.hero__veu{position:absolute;inset:0;z-index:1;pointer-events:none}
/* No celular a foto para de ficar ATRÁS do texto e passa a ficar ABAIXO
   dele, numa faixa própria.

   O motivo é prático: numa tela alta e estreita o texto cobre quase toda
   a altura, então a sombra necessária para ele ser lido sob sol acabava
   apagando a foto inteira. Separando os dois, o texto ganha o verde sólido
   (contraste máximo, sem depender de onde a foto está clara) e o caminhão
   aparece nítido, com o pôr do sol, na faixa de baixo. Legibilidade e foto
   deixam de disputar o mesmo espaço. */
@media (max-width:900px){
  /* A ALTURA DA FAIXA, DECLARADA UMA VEZ SÓ.
     A mesma medida vale para quatro coisas: a foto (fallback), o véu, a cena
     da estrada e o caminhão. Ela estava repetida em CINCO lugares entre dois
     arquivos, que é exatamente o "número gêmeo precisando andar junto" que
     este projeto já documentou como armadilha. Agora é um token: quem precisa
     da faixa lê --faixa-hero, inclusive o mobile-viagem.css, porque custom
     property herda para os filhos do .hero.

     2026-08-02, pedido do Alê ("o espaço pode ser maior onde aparece a estrada
     e o caminhão"): de clamp(268px,72vw,380px) para clamp(310px,90vw,425px).
     No aparelho dele (402px) são 289px → 362px, +25%. Toda a cena é função da
     faixa (horizonte em 38%, caminhão em 82% dela), então crescer a faixa
     cresce a cena inteira em proporção, sem recalibrar nada peça a peça. */
  .hero{--faixa-hero:clamp(310px,90vw,425px)}

  .hero{padding-bottom:var(--faixa-hero)}
  .hero__foto{top:auto;height:var(--faixa-hero)}
  .hero__foto img{object-position:60% 46%}
  /* o véu acompanha a faixa da foto, e a lavagem é vertical: começa no
     verde sólido, encostado no texto, e abre a foto no pé */
  .hero__veu{
    top:auto;height:var(--faixa-hero);
    background:linear-gradient(to bottom,
      var(--verde-prof) 0%,
      rgba(19,36,32,.92) 10%,
      rgba(19,36,32,.50) 30%,
      rgba(19,36,32,.16) 60%,
      rgba(19,36,32,.08) 100%);
  }
  .hero__int{text-shadow:none}
}

/* Sombra curta e escura, não um brilho: garante contraste ponto a ponto
   se um trecho claro da foto passar por baixo de uma letra, sem precisar
   escurecer mais o quadro inteiro. */
.hero__int{
  position:relative;z-index:2;
  text-shadow:0 1px 2px rgba(7,14,11,.5),0 2px 16px rgba(7,14,11,.42);
}
.hero__int .btn{text-shadow:none}
.hero__sub{
  font-size:var(--t-sub);line-height:1.46;font-weight:400;
  color:#EDF1ED;margin:0 0 40px;max-width:44ch;
}
.hero__acoes{display:flex;gap:14px;flex-wrap:wrap;align-items:stretch}
.hero__acoes .btn--fone{
  background:rgba(255,255,255,.09);color:#fff;border-color:rgba(255,255,255,.42);
}
@media (hover:hover) and (pointer:fine){
  .hero__acoes .btn--fone:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.7)}
}
@media (max-width:560px){
  .hero__acoes{flex-direction:column;gap:12px}
  .hero__acoes .btn{width:100%}
  .hero__acoes .btn--fone{align-items:center;text-align:center}
  .hero__sub{margin-bottom:32px}
}

/* CELULAR: UM CAMINHO SÓ NO HERO (2026-08-02, pedido do Alê).
   Na tela pequena o hero tinha três alvos competindo (WhatsApp, ligar na
   emergência, ir pro formulário) e o polegar não sabia qual era o principal.
   Ficou só o CTA de venda; os outros dois continuam no HTML e continuam
   inteiros no desktop, onde há espaço e o olho varre em vez de escolher.

   O 24h NÃO some do celular, e isso é regra travada deste projeto: ele fica
   na .barra-fixa, o dock fixo no pé da tela que só existe abaixo de 900px
   (item "Assistência 24h · Ligar agora"), e de novo no rodapé. Some do hero,
   não da página. O mesmo breakpoint de 900px do resto do site, de propósito:
   é a mesma fronteira que acende o dock que passa a carregar a emergência.  */
@media (max-width:900px){
  .hero__acoes .btn--fone{display:none}
  .hero__alt{display:none}
}

/* =========================================================================
   OS TRÊS NÃOS  ·  placa de papel que encaixa por cima do hero
   ========================================================================= */
/* o chão é o papel escuro; a placa é o creme claro. Sem essa diferença a
   placa se dissolve no fundo depois que passa o corte do hero. */
.naos{
  position:relative;z-index:2;background:var(--papel);
  padding-bottom:clamp(40px,4.4vw,68px);
}
/* Respiro da placa. O padding lateral precisa ser MAIOR que o raio dos
   cantos (28px), senão a primeira e a última linha de cada parágrafo
   entram na curva e o texto lê como colado na borda. É o mesmo defeito
   que o cliente apontou nos cartões de cobertura, aqui no bloco mais
   visível da página. O pé também subiu: estava em 37px contra 60px de
   topo, e a frase-ponte ficava caída no fundo da caixa. */
.naos__placa{
  padding:clamp(30px,4.4vw,60px) clamp(26px,3.4vw,54px) clamp(30px,3.4vw,48px);
}
.naos__tit{
  font-size:var(--t-placa);font-weight:800;
  letter-spacing:-.024em;line-height:1.16;margin:0 0 clamp(28px,3vw,44px);
}
/* Frase-ponte da seção (2026-08-14). Ela existe porque o título deixou de
   ser uma promessa redonda: duas cobranças somem, a terceira tem número.
   Sem esta linha o leitor chega no terceiro cartão e sente que foi enganado
   pelo título. Com ela, chega sabendo, e o número vira prova em vez de
   pegadinha. Fica logo abaixo do h2 e come a margem dele. */
.naos__lead{margin:clamp(-16px,-1.4vw,-10px) 0 clamp(28px,3vw,40px);max-width:52ch}

.naos__grade{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,44px)}

.nao{display:grid;grid-template-columns:auto 1fr;gap:12px 14px;align-items:start}
/* O X é uma negativa. Vermelho diz isso sem precisar de legenda. */
.nao__marca{
  grid-row:1/3;width:30px;height:30px;flex:none;
  color:var(--vermelho);margin-top:2px;
}
/* O SELO DA EXCEÇÃO (2026-08-14). A cota de participação EXISTE, então ela
   não pode usar o X vermelho dos outros dois: X é ausência, e usar o mesmo
   sinal para uma cobrança que existe é mentir com ícone.
   O selo carrega o próprio número, em verde de marca. Mesmos 30px e mesma
   margem do SVG para não mexer um pixel no subgrid que alinha os três
   cartões (achado do Kage; ver a regra logo abaixo). */
.nao__selo{
  display:grid;place-items:center;border-radius:50%;
  background:var(--verde);color:var(--claro);
  font-size:12.5px;font-weight:800;letter-spacing:-.04em;
  line-height:1;box-shadow:inset 0 1px 0 rgba(255,255,255,.16);
}
.nao h3{
  font-size:var(--t-card);font-weight:800;letter-spacing:-.018em;
  line-height:1.2;margin:0;color:var(--verde-esc);align-self:center;
}
.nao p{margin:0;font-size:var(--t-corpo);color:var(--tinta-2)}
/* a frase que decide, em dourado da marca: quebra o monocromático e guia
   o olho pro que importa (pedido do Alê) */
.nao__destaque{color:var(--ouro-esc);font-weight:700}
/* alinhamento REAL entre os três cartões: subgrid faz as linhas de
   título e de parágrafo conversarem entre colunas (achado do Kage:
   min-height por cartão não alinhava, cada .nao é um grid isolado) */
@media (min-width:901px){
  .naos__grade{grid-template-rows:auto auto}
  .nao{grid-template-rows:subgrid;grid-row:span 2}
  .nao h3{align-self:start}
}

@media (max-width:900px){
  /* A PLACA PAROU DE SUBIR SOBRE A CREDENCIAL (2026-08-02).
     Ela tinha margem NEGATIVA de -22vw (-88px no aparelho do Alê) para
     encaixar sobre a janela da foto. Isso foi escrito quando a faixa de
     credencial era uma linha só. Hoje ela quebra em QUATRO linhas no celular
     (166px de altura), e a placa branca, que pinta depois no DOM com o mesmo
     z-index, estava cobrindo os 88px de baixo dela: "Sede em Ribeirão Preto"
     sumia embaixo do papel e o título "Três cobranças que aqui não existem"
     era desenhado EM CIMA de "Assistência 24 horas". Medido em Chromium a
     402x753 com elementFromPoint, não deduzido.

     É a causa raiz do "textos encavalados um em cima do outro" que a rodada
     anterior procurou no hero e não achou: o encavalamento nunca esteve no
     hero, estava aqui embaixo. Agora a placa começa DEPOIS da credencial,
     com respiro, e quem costura o hero com o resto é a própria cápsula. */
  .naos{
    margin-top:clamp(24px,7vw,36px);
    padding-bottom:clamp(44px,6vw,64px);
    background:transparent;position:relative;z-index:3;
  }
  .naos__placa{
    padding:clamp(28px,7vw,38px) clamp(24px,6vw,30px) clamp(26px,6vw,32px);
    box-shadow:0 2px 4px rgba(9,16,13,.10),0 22px 46px -26px rgba(9,16,13,.8);
  }
  .naos__grade{grid-template-columns:1fr;gap:0}
  .nao{padding-block:22px}
  .nao + .nao{border-top:1px solid var(--linha)}
  /* o creme começava 88px abaixo do topo justamente para não cobrir o hero
     durante o encaixe negativo. Sem encaixe, não há o que preservar: ele
     preenche a seção inteira. */
  .naos::after{
    content:"";position:absolute;inset:0;z-index:-1;
    background:var(--creme);
  }
}
@media (min-width:901px){
  .naos{margin-top:clamp(-104px,-7vw,-64px)}
  /* dois dos três títulos ocupam duas linhas. Reservar a segunda linha em
     todos alinha o começo dos parágrafos, que é o que o olho compara. */
  .nao h3{min-height:2.4em;display:flex;align-items:center}
}

/* =========================================================================
   O QUE A PROTEÇÃO COBRE
   ========================================================================= */
.cobre{padding-block:var(--secao);background:var(--papel)}
.cobre__int{
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(36px,5vw,84px);align-items:start;
}
.cobre__texto{position:sticky;top:110px}
@media (max-width:900px){.cobre__texto{position:static}}

/* Estes itens nasceram como lista separada por fio e viraram cartão na
   passada de acabamento. As linhas de cima e de baixo ficaram para trás e
   cortavam o topo arredondado de cada cartão. Saíram: quem separa agora é
   o intervalo da grade. Padding declarado uma vez só, aqui. */
.itens{list-style:none;margin:0;padding:0;display:grid;gap:10px}
/* mesmo esqueleto dos X vermelhos da placa: ícone à esquerda, título ao
   lado, texto embaixo. O ícone dá a leitura visual antes da primeira
   palavra (pedido do Alê). */
.item{
  padding:22px clamp(20px,2vw,28px);
  display:grid;grid-template-columns:auto 1fr;gap:10px 14px;align-items:start;
}
.item__ico{
  grid-row:1/3;width:30px;height:30px;flex:none;
  color:var(--verde-esc);margin-top:2px;
}
.item h3{align-self:center}
.item h3{
  font-size:var(--t-card);font-weight:800;letter-spacing:-.016em;
  margin:0 0 6px;line-height:1.25;
}
.item p{margin:0;font-size:var(--t-corpo);color:var(--tinta-2);max-width:52ch}

@media (max-width:900px){
  .cobre__int{grid-template-columns:1fr}
  .cobre__texto .btn{width:100%;max-width:420px}
}

/* =========================================================================
   ASSOCIAÇÃO NÃO É SEGURADORA  ·  a placa verde que se encaixa
   ========================================================================= */
/* mesma correção de empilhamento do .hero */
.assoc{
  position:relative;isolation:isolate;z-index:0;color:#fff;
  padding-block:var(--secao);
}
/* O degradê vive AQUI, e não no .assoc, porque este é o elemento que o
   momento 2 da coreografia escala. Enquanto o fundo chapado estava neste
   elemento e o degradê no .assoc, a placa sólida cobria o degradê inteiro:
   a luz dourada da seção simplesmente não aparecia. */
.assoc__fundo{
  position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(100% 70% at 12% 0%, rgba(183,149,66,.14) 0%, rgba(183,149,66,0) 60%),
    linear-gradient(180deg,#1A2E26 0%,var(--verde-prof) 100%);
  transform-origin:center bottom;
}
.assoc__int{
  display:grid;grid-template-columns:minmax(0,1.22fr) minmax(0,.88fr);
  gap:clamp(40px,5.4vw,80px);align-items:start;
}
.assoc__texto p{color:var(--claro-2);margin:0}
/* o lead estava colado no botão de entrada (apontado pelo Alê) */
.assoc__texto .lead{margin-bottom:clamp(28px,3.4vw,46px)}

.numero{padding-top:0;position:relative;z-index:2}
/* Até 19/08 era "o rosto antes do número" (2.500 placas). O número saiu
   de vez, mas o resto da lógica vale igual: recorte vazado, sem moldura,
   cabeça TRANSBORDA a seção, sobe por cima da parte clara de cima (pedido
   do Alê). O transbordo é o margin-top negativo maior que o padding da
   seção. É a foto do Juliano Rodrigo de Faria, associado real. */
.numero__foto{
  display:block;width:min(72%,300px);height:auto;
  margin:-84px auto 6px 0;
  filter:drop-shadow(0 22px 34px rgba(0,0,0,.45));
}
@media (min-width:901px){
  .numero__foto{margin-top:calc(-1*var(--secao) - 46px)}
}
/* honestidade exigida pelo gate: o retrato é gerado, não é associado */
.numero__legenda{
  display:block;margin:2px 0 10px;
  font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(221,226,222,.5);
}
.numero__regua{
  display:block;height:3px;background:var(--ouro-luz);
  transform-origin:left center;margin:0 0 26px;
}
.numero__valor{
  font-size:var(--t-numero);font-weight:800;
  letter-spacing:-.05em;line-height:.92;margin:0;
  color:var(--ouro-luz);font-variant-numeric:tabular-nums;
}
.numero__rot{
  font-size:var(--t-rotulo);font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--claro-2);margin:14px 0 24px;
}
.numero__nota{
  margin:0;font-size:var(--t-corpo);color:var(--claro-2);
  padding-top:22px;border-top:1px solid var(--verde-linha);
}
@media (max-width:900px){
  .assoc__int{grid-template-columns:1fr}
  .numero{padding-top:22px}
}

/* =========================================================================
   PROVA  ·  conversas de WhatsApp com associados
   O conteúdo abaixo é PLACEHOLDER. Ver comentário no index.html.
   ========================================================================= */
/* fundo com um pouco de material: um clarão frio no alto, para os cartões
   claros terem de onde se destacar sem precisar de sombra pesada */
.prova{
  padding-block:var(--secao);
  background:
    radial-gradient(120% 62% at 50% 0%,#FBF9F3 0%,var(--creme)58%,var(--papel) 100%);
}
.prova__topo{max-width:56ch;margin:0 0 clamp(32px,4vw,54px)}

/* Mural em colunas, não grade travada: as conversas têm alturas diferentes
   de verdade, e uma grade que as force ao mesmo tamanho denuncia template. */
.prova__grade{
  columns:3;column-gap:clamp(18px,2.2vw,28px);
}
.prova__grade > *{
  break-inside:avoid;-webkit-column-break-inside:avoid;
  margin-bottom:clamp(18px,2.2vw,28px);
}
@media (max-width:1080px){.prova__grade{columns:2}}
@media (max-width:700px){.prova__grade{columns:1;max-width:520px}}

/* a moldura: recorte de conversa, não maquete de celular */
.conversa{
  display:block;margin:0;
  background:#E8E1D6;
  border:1px solid var(--linha-forte);
  border-radius:var(--r-card);overflow:hidden;
  box-shadow:0 1px 2px rgba(19,24,21,.06),0 18px 34px -26px rgba(19,24,21,.5);
}
.conversa__cab{
  display:flex;align-items:center;gap:11px;
  padding:12px 14px;background:var(--verde-esc);color:#fff;
}
/* glifo do WhatsApp encostado na borda, em baixa opacidade: diz de onde a
   conversa veio sem virar enfeite */
.conversa__zap{
  width:19px;height:19px;flex:none;margin-left:auto;
  fill:currentColor;opacity:.42;
}
/* Sem "?" e sem boneco: um disco liso. A foto de perfil do associado não
   entra no site nem quando existe, e um ponto de interrogação aqui leria
   como imagem quebrada. */
.conversa__avatar{
  width:36px;height:36px;flex:none;border-radius:50%;
  background:var(--verde-linha);
}
.conversa__quem{min-width:0}
.conversa__nome{
  display:block;font-size:1rem;font-weight:700;line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.conversa__meta{
  display:block;font-size:var(--t-nota);color:var(--claro-2);line-height:1.3;
}

.conversa__corpo{
  padding:16px 14px;display:flex;flex-direction:column;gap:10px;
}
.balao{
  position:relative;max-width:88%;
  padding:11px 13px 7px;border-radius:9px;
  font-size:1.0625rem;line-height:1.45;color:var(--tinta);
  box-shadow:0 1px 1px rgba(19,24,21,.14);
}
.balao--recebido{align-self:flex-start;background:#fff;border-top-left-radius:2px}
.balao--enviado{align-self:flex-end;background:#DCEFD8;border-top-right-radius:2px}
.balao p{margin:0}
.balao__hora{
  display:block;text-align:right;margin-top:4px;
  font-size:var(--t-nota);color:var(--tinta-3);
}

/* =========================================================================
   PLAYER DE ÁUDIO DOS DEPOIMENTOS (entrou em 19/08)

   Toca o áudio real recebido no WhatsApp, dentro do próprio balão. A onda
   NÃO é decorativa: as barras vêm de amplitude de verdade, extraída do
   arquivo com ffmpeg+numpy antes de publicar (42 picos por áudio, no
   data-picos do HTML) — o mesmo princípio do resto do site, nada fabricado.
   Toque em qualquer barra pula o áudio pra aquele ponto, igual WhatsApp.
   ========================================================================= */
.balao--audio{max-width:100%;width:min(360px,100%)}
.audio-player{display:flex;align-items:center;gap:10px}
.audio-player__play{
  width:38px;height:38px;flex:none;border:0;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;
  background:var(--verde-esc);color:#fff;
  transition:background-color .15s var(--saida);
}
.audio-player__play:hover{background:var(--verde-prof)}
.audio-player__ico{width:15px;height:15px;fill:currentColor}
.audio-player__ico--pause{display:none}
.audio-player.is-tocando .audio-player__ico--play{display:none}
.audio-player.is-tocando .audio-player__ico--pause{display:block}
.audio-player__onda{
  display:flex;align-items:center;gap:2px;height:28px;
  flex:1;min-width:0;cursor:pointer;
}
.audio-player__barra{
  width:2.5px;flex:none;border-radius:2px;
  height:calc(18% + var(--h,.3) * 82%);
  background:var(--linha-forte);
  transition:background-color .1s linear;
}
.audio-player__barra--tocada{background:var(--verde-esc)}
.audio-player__tempo{
  flex:none;min-width:32px;text-align:right;
  font-size:var(--t-nota);color:var(--tinta-3);
  font-variant-numeric:tabular-nums;
}
.audio-player__transcrever{
  display:inline-block;margin:8px 0 0;padding:0;border:0;background:none;
  font-size:var(--t-nota);font-weight:700;color:var(--verde-esc);
  text-decoration:underline;text-underline-offset:2px;cursor:pointer;
}
.audio-player__transcricao{
  margin:8px 0 0;padding-top:9px;border-top:1px dashed var(--linha-forte);
  font-size:.95rem;line-height:1.5;font-style:italic;color:var(--tinta-2);
}
.audio-player__transcricao[hidden]{display:none}

/* legenda escrita pelo cliente: o que aconteceu, onde */
.conversa__legenda{
  display:block;padding:13px 14px 15px;
  background:var(--creme);border-top:1px solid var(--linha);
  font-size:var(--t-nota);line-height:1.45;color:var(--tinta-2);
}

/* identificação censurada: quando o print vem com nome, foto e número
   borrados. Tarja sólida, e não falso desfoque: fica claro que foi a gente
   que cobriu, e o cabeçalho continua com a mesma altura e o mesmo ritmo. */
.conversa__cab--tarjado .conversa__avatar{
  background:var(--verde-linha);color:transparent;
}
.tarja{
  display:block;height:11px;border-radius:2px;
  background:var(--verde-linha);
  margin:4px 0 6px;
}
.tarja--nome{width:132px;max-width:100%}

/* marcação de placeholder: sai junto com o conteúdo de exemplo */
.provisorio{
  display:block;max-width:64ch;
  margin:0 0 20px;padding:13px 18px;
  background:#FBF0D2;border:1px dashed #A8801F;border-radius:var(--r-campo);
  font-size:var(--t-nota);font-weight:700;color:#6B5210;line-height:1.5;
}
.conversa--provisoria .balao{color:var(--tinta-2);font-style:italic}
.conversa--provisoria .conversa__legenda{font-style:italic;color:var(--tinta-3)}

.prova__nota{
  margin:clamp(26px,3vw,38px) 0 0;font-size:var(--t-nota);color:var(--tinta-3);
  max-width:60ch;
}

/* =========================================================================
   TIME  ·  rosto e nome de quem responde pela operação
   O medo do associado é associação fantasma. Esta seção existe para
   responder isso, então ela tem peso de seção, não de rodapé.
   ========================================================================= */
.time{padding-block:var(--secao);background:var(--creme)}
.time__topo{max-width:52ch;margin:0 0 clamp(32px,4vw,52px)}
.time__grade{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(20px,2.6vw,36px);
}
/* No celular ficam 2 colunas SEMPRE: em coluna única cada retrato virava
   uma tela inteira e o time sozinho custava 4 telas de rolagem. */
@media (max-width:820px){.time__grade{grid-template-columns:repeat(2,1fr);gap:16px}}

.pessoa{display:flex;flex-direction:column}
.pessoa__retrato{
  position:relative;aspect-ratio:4/5;overflow:hidden;
  border-radius:var(--r-card);background:var(--verde-prof);
  box-shadow:0 2px 4px rgba(19,24,21,.08),0 22px 44px -30px rgba(19,24,21,.65);
}
.pessoa__retrato img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
/* rebordo interno de luz: dá espessura à borda do retrato, com ou sem foto */
.pessoa__retrato::after{
  content:"";position:absolute;inset:0;border-radius:var(--r-card);pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),
             inset 0 -80px 70px -70px rgba(9,16,13,.7);
}

/* Estado sem foto. Não é bug e não é avatar de sistema: é uma superfície da
   marca com a inicial em marca d'água. Sai no instante em que o retrato real
   entrar no lugar. Nenhum rosto que não seja o da própria pessoa entra aqui. */
.pessoa__retrato--vazio{
  display:grid;place-items:center;
  background:
    repeating-linear-gradient(135deg,
      transparent 0 9px,rgba(255,255,255,.025) 9px 10px),
    radial-gradient(88% 70% at 50% 26%,#274036 0%,#1A2E26 52%,#101F1B 100%);
}
.pessoa__retrato--vazio::after{
  box-shadow:inset 0 0 0 1px rgba(217,182,92,.2),
             inset 0 -70px 60px -60px rgba(9,16,13,.55);
}
.pessoa__inicial{
  font-size:clamp(5rem,7.6vw,7rem);font-weight:800;letter-spacing:-.05em;
  line-height:1;color:#4E695C;user-select:none;
  transform:translateY(-.04em);
  text-shadow:0 1px 0 rgba(255,255,255,.05);
}
.pessoa__nome{
  font-size:var(--t-card);font-weight:800;letter-spacing:-.018em;
  line-height:1.2;margin:20px 0 4px;color:var(--tinta);
}
.pessoa__cargo{
  margin:0;font-size:var(--t-corpo);font-weight:600;color:var(--tinta-2);
}

/* =========================================================================
   SIMULAÇÃO  ·  formulário curto sobre a placa verde
   ========================================================================= */
.simular{background:var(--verde);color:#fff;padding-block:var(--secao)}
.simular__int{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);
  gap:clamp(36px,5vw,76px);align-items:start;
}
.simular__alt{font-size:var(--t-corpo);color:var(--claro-2);margin:0}
/* o número dentro da frase também é alvo de toque: 48px de altura real */
.simular__alt a{
  display:inline-block;min-height:48px;line-height:48px;
  font-weight:800;color:#fff;
  padding:0 2px;text-decoration-thickness:2px;text-underline-offset:5px;
}

/* mesma conta da placa: o respiro tem de vencer o raio de 28px */
.form{
  color:var(--tinta);
  padding:clamp(28px,3.2vw,40px);
  display:grid;gap:20px;
}
.campo{display:flex;flex-direction:column;gap:7px}
.campo label{
  font-size:1rem;font-weight:700;letter-spacing:.005em;color:var(--tinta);
}
.campo input,.campo select{
  font:inherit;font-size:1.125rem;min-height:56px;padding:13px 15px;
  border:2px solid rgba(19,24,21,.28);border-radius:4px;
  background:#fff;color:var(--tinta);
  appearance:none;-webkit-appearance:none;
}
.campo select{
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2339423C' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:20px;
  padding-right:46px;
}
.campo input:focus-visible,.campo select:focus-visible{
  outline:3px solid var(--ouro);outline-offset:1px;border-color:var(--ouro);
}
.campo input[aria-invalid="true"],.campo select[aria-invalid="true"]{
  border-color:#9E2A20;background:#FDF4F3;
}
.campo__erro{
  display:none;font-size:var(--t-nota);font-weight:700;color:#8C251C;
  margin:0;
}
.campo[data-erro="sim"] .campo__erro{display:block}

.form__nota{
  margin:0;font-size:var(--t-nota);color:var(--tinta-2);line-height:1.5;
}
@media (max-width:900px){
  .simular__int{grid-template-columns:1fr}
}

/* =========================================================================
   QUEM SOMOS
   ========================================================================= */
.quem{padding-block:var(--secao);background:var(--papel)}
.quem__int{
  display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:clamp(32px,4.6vw,72px);align-items:center;
}
.quem__foto{position:relative}
.quem__foto img{
  width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:4px;
  box-shadow:0 22px 46px -32px rgba(19,24,21,.7);
}
.quem__texto p{
  font-size:var(--t-corpo);color:var(--tinta-2);margin:0 0 18px;max-width:50ch;
}
.quem__texto p:last-child{margin-bottom:0}
@media (max-width:900px){
  .quem__int{grid-template-columns:1fr}
}

/* =========================================================================
   RODAPÉ
   ========================================================================= */
.rodape{color:#fff;padding-top:clamp(52px,6vw,84px)}
.rodape__int{
  display:grid;grid-template-columns:1.05fr 1fr 1fr;gap:clamp(30px,4vw,48px);
  padding-bottom:clamp(38px,4.4vw,56px);
}
.rodape__marca img{width:182px;filter:brightness(0) invert(1);opacity:.94}
.rodape__cnpj{font-size:var(--t-nota);color:var(--claro-2);margin:18px 0 0}
.rodape__bloco h3{
  font-size:var(--t-rotulo);font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ouro-luz);margin:0 0 14px;
}
.rodape__bloco p{margin:0 0 6px;font-size:var(--t-corpo);color:var(--claro-2)}
.rodape__rot{
  display:block;font-size:var(--t-rotulo);font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--claro-2);margin-bottom:2px;
}
/* alvo de toque de verdade nos contatos */
.rodape__link{
  display:inline-flex;align-items:center;min-height:48px;
  padding:4px 0;font-weight:700;font-size:1.0625rem;color:#fff;
  text-decoration:none;
  border-bottom:2px solid transparent;
}
.rodape__link--email{font-size:1rem;word-break:break-word}
@media (hover:hover) and (pointer:fine){
  .rodape__link:hover{border-bottom-color:var(--ouro-luz)}
}
.rodape__base{
  border-top:1px solid var(--verde-linha);
  padding-block:22px calc(26px + env(safe-area-inset-bottom));
}
.rodape__base p{margin:0;font-size:var(--t-nota);color:var(--claro-2)}
@media (max-width:900px){
  .rodape__int{grid-template-columns:1fr;gap:32px}
}

/* =========================================================================
   WHATSAPP FLUTUANTE  ·  só no desktop
   No celular quem cobre esse papel é a barra fixa, que já está no polegar.
   Fica encostado no canto, fora da coluna de conteúdo, e o rótulo só abre
   no hover para não virar um bloco pousado sobre a página.
   ========================================================================= */
.zap-flutua{display:none}
@media (min-width:901px){
  .zap-flutua{
    display:inline-flex;align-items:center;gap:0;
    position:fixed;right:26px;bottom:26px;z-index:130;
    height:60px;padding:0 18px;border-radius:30px;
    background:#25D366;color:#132420;          /* glifo escuro: 9,0:1 */
    box-shadow:0 10px 30px -8px rgba(18,140,74,.55),0 0 0 8px rgba(18,140,74,.12);
    text-decoration:none;font-weight:800;font-size:1.0625rem;letter-spacing:-.005em;
    transition:gap .22s var(--saida),background-color .18s var(--saida),
               transform .18s var(--saida),box-shadow .18s var(--saida);
  }
  .zap-flutua .ico{width:26px;height:26px}
  .zap-flutua__txt{
    max-width:0;overflow:hidden;white-space:nowrap;opacity:0;
    transition:max-width .26s var(--saida),opacity .18s var(--saida);
  }
  .zap-flutua:hover,.zap-flutua:focus-visible{
    gap:11px;background:#1FBE59;transform:translateY(-2px);
    box-shadow:0 6px 14px -4px rgba(9,16,13,.5),0 20px 40px -16px rgba(9,16,13,.75);
  }
  .zap-flutua:hover .zap-flutua__txt,
  .zap-flutua:focus-visible .zap-flutua__txt{max-width:220px;opacity:1}
  .zap-flutua:focus-visible{outline:3px solid var(--verde-esc);outline-offset:3px}
}
@media (min-width:901px) and (prefers-reduced-motion:reduce){
  .zap-flutua{gap:11px}
  .zap-flutua__txt{max-width:220px;opacity:1}
}

.rodape__zap{margin-top:24px}

/* =========================================================================
   BARRA FIXA  ·  telefone e WhatsApp a um toque, sempre
   ========================================================================= */
.barra-fixa{display:none}
@media (max-width:900px){
  .barra-fixa{
    display:grid;grid-template-columns:1fr 1fr;
    position:fixed;left:0;right:0;bottom:0;z-index:140;
    padding-bottom:env(safe-area-inset-bottom);
    box-shadow:0 -6px 22px -8px rgba(9,16,13,.55);
  }
  .barra-fixa__item{
    display:flex;align-items:center;justify-content:center;
    gap:10px;min-height:64px;padding:9px 8px;
    text-decoration:none;color:#fff;text-align:left;
  }
  .barra-fixa__txt{display:flex;flex-direction:column;gap:1px}
  .barra-fixa__rot{
    font-size:var(--t-rotulo);font-weight:700;letter-spacing:.08em;text-transform:uppercase;
    color:rgba(255,255,255,.92);
  }
  .barra-fixa__num{font-size:1.1875rem;font-weight:800;letter-spacing:-.01em;line-height:1.15}
  .barra-fixa__item .ico{width:27px;height:27px}
  /* verde oficial do WhatsApp aqui, com o glifo e o texto escuros para
     manter contraste alto sob sol */
  .barra-fixa__item--zap{background:#25D366;color:#0C1A15}
  .barra-fixa__item--zap .barra-fixa__rot{color:rgba(12,26,21,.78)}
  .barra-fixa__item--sos{background:var(--ouro-esc)}
  .barra-fixa__item + .barra-fixa__item{box-shadow:inset 1px 0 0 rgba(255,255,255,.22)}

  /* o conteúdo nunca fica atrás da barra */
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  .rodape__base{padding-bottom:22px}
}
@media (max-width:380px){
  .barra-fixa__item{gap:7px;padding-inline:5px}
  .barra-fixa__num{font-size:1.0625rem}
  .barra-fixa__item .ico{width:23px;height:23px}
}

/* =========================================================================
   MOVIMENTO
   Três momentos, todos disparados uma vez. Nenhum laço, nenhum parallax.
   No celular só o primeiro sobrevive, e em versão curta.
   ========================================================================= */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* --- CELULAR e conexão ruim ---------------------------------------------
   Sem a classe .anima, tudo abaixo é inerte e a página nasce pronta. No
   celular a entrada é só opacidade, curta: nada muda de lugar na tela de
   quem está com o aparelho na mão dentro da cabine.                        */
@media (max-width:900px) and (prefers-reduced-motion:no-preference){
  .hero__int > *{animation:assenta .34s var(--saida) both}
  .hero__int > .hero__tit{animation-delay:.05s}
  .hero__int > .hero__sub{animation-delay:.11s}
  .hero__int > .hero__acoes{animation-delay:.17s}
}
@keyframes assenta{from{opacity:0}to{opacity:1}}

/* --- DESKTOP: os três momentos coreografados ----------------------------
   A classe .anima é posta no <html> pelo script do topo, e só quando a
   visita tem tela grande, não pediu movimento reduzido e não está em
   conexão econômica. É ela que autoriza esconder alguma coisa. Sem ela,
   nenhuma das regras abaixo existe, então uma falha de rede jamais deixa
   texto invisível.

   O GSAP entra pelo <head> com async=false: baixa em paralelo ao CSS e
   executa antes da pintura da dobra, então a coreografia começa no tempo
   certo em vez de dar um salto tardio.                                     */
/* Só o hero tem estado inicial no CSS, porque é o único bloco que já está
   na tela quando a página abre. O estado de partida dos momentos 2 e 3 é
   posto pelo próprio motion.js, abaixo da dobra: assim, se o script falhar
   no meio do caminho, aquelas seções continuam visíveis e completas. */
.anima .hero__foto img{transform:scale(1.055);transform-origin:64% 55%;will-change:transform}
.anima .hero__int > *{opacity:0}
.anima .hero__tit{clip-path:inset(0 0 100% 0)}

/* =========================================================================
   PONTE + BLOCO DE OBJEÇÃO
   A espinha da página. Fundo escuro de propósito: é o momento em que a
   conversa fica séria, e o corte de cor marca isso sem precisar de efeito.
   ========================================================================= */
.naos__ponte{
  margin:clamp(24px,2.6vw,34px) 0 0;
  font-size:var(--t-lead);line-height:1.5;color:var(--verde-esc);
  font-weight:600;max-width:52ch;
}

.objecao{
  position:relative;z-index:2;color:#fff;
  padding-block:var(--secao);
}
.objecao__cabeca{max-width:60ch}
.objecao .rotulo{color:var(--ouro-luz)}
.objecao .tit-secao{color:#fff;max-width:14ch}
.objecao .lead{color:var(--claro-2);max-width:58ch;margin-bottom:clamp(38px,4.4vw,58px)}

/* Duas colunas no desktop, UMA no celular. A regra de uma coluna existia
   desde o começo mas estava sendo desfeita por uma declaração posterior
   sem media query: no aparelho de 390px a sanfona vinha em dois cartões de
   167px cada, com a pergunta quebrando em cinco linhas. */
.provas{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:12px;
}
@media (max-width:900px){
  .provas{grid-template-columns:1fr}
}
/* O <details> não tem padding próprio: quem paga o respiro é o <summary> e
   o corpo, cada um com o seu. Antes os dois somavam, e a pergunta da
   sanfona ficava a 66px da borda do cartão no desktop enquanto no celular
   a regra de padding-inline:0 zerava o lado e colava o texto na borda. */
.prova-item{background:transparent;padding:0}
.prova-item p{margin:0;font-size:var(--t-corpo);color:var(--claro-2)}

.objecao__numeros{
  margin:clamp(34px,3.6vw,48px) 0 0;padding-left:clamp(18px,2vw,26px);
  border-left:3px solid var(--ouro);
  font-size:var(--t-corpo);color:var(--claro-2);max-width:56ch;
}
.objecao__fecho{
  margin:clamp(26px,2.8vw,36px) 0 0;
  font-size:var(--t-lead);line-height:1.5;color:#fff;font-weight:600;max-width:48ch;
}
.objecao__acao{
  display:flex;align-items:center;gap:clamp(14px,1.8vw,24px);flex-wrap:wrap;
  margin-top:clamp(28px,3vw,40px);padding-top:clamp(24px,2.6vw,34px);
  border-top:1px solid var(--verde-linha);
}
.objecao__acao .acao__apoio{color:var(--claro-2)}

@media (max-width:900px){
  .objecao__acao{flex-direction:column;align-items:stretch}
  .objecao__acao .btn{width:100%}
}

/* atalho discreto sob os botões do hero, para quem prefere formulário */
/* Atalho discreto sob os botões do hero, para quem prefere formulário.
   Tinha 16px de altura de toque: alvo de alfinete para quem lê de luva
   dentro da cabine. Agora é um alvo de 48px como todo o resto. */
.hero__alt{margin:clamp(8px,1.4vw,16px) 0 0;font-size:var(--t-nota)}
.hero__alt a{
  display:inline-flex;align-items:center;min-height:48px;padding-inline:2px;
  color:var(--claro-2);font-weight:600;
  text-underline-offset:5px;text-decoration-thickness:2px;
}
.hero__alt a:hover{color:#fff}

/* As etapas da viagem só existem com a cena 3D viva (hero-3d.css). Aqui,
   na folha base, ficam desligadas: celular e tela sem cursor nunca as veem. */
.hero__etapas{display:none}

/* O caminhão da viagem do celular, pela mesma razão: desligado aqui, aceso
   só por css/mobile-viagem.css (media max-width:900px). Como a arte dele
   entra por background-image, este display:none é também o portão de PESO:
   navegador nenhum baixa background de elemento que não é exibido, então o
   desktop (que já tem o mesmo caminhão dentro da cena 3D), o movimento
   reduzido e o modo econômico não pagam um byte por ele. */
.hero__caminhao{display:none}

/* A CENA DA ESTRADA DO CELULAR, desligada aqui pela mesma disciplina.
   Ela é 100% CSS (nenhuma imagem, nenhum script novo), então o portão daqui
   não é de peso, é de ESCOPO: o desktop tem a cena 3D do hero-3d.js e não
   pode ter as duas ao mesmo tempo. Quem acende é css/mobile-viagem.css, e
   só onde a perspectiva CSS existe e o movimento é permitido. */
.hero__cena{display:none}

/* A coluna do número era mais curta que a do texto e deixava um vazio de
   ~250px no pé da seção. Centrar oticamente resolve sem mexer no conteúdo. */
@media (min-width:901px){
  .assoc__int{align-items:center}
}

/* =========================================================================
   FAIXA DE CREDENCIAL
   Vem logo abaixo do hero. Identidade checável em 3 segundos, antes de
   qualquer argumento: é o antídoto do "associação fantasma".
   Nos concorrentes esse dado fica no rodapé ou não existe.
   ========================================================================= */
/* A cápsula precisa de margem POR FORA para os cantos arredondados
   existirem. Sem esta linha ela encostava nas duas bordas da tela em
   qualquer largura abaixo de 1244px, o raio ficava cortado e a faixa
   voltava a ler como barra colada, que é justamente o que ela não é. */
.credencial{
  position:relative;z-index:3;color:#fff;
  padding-inline:var(--borda);
}
.credencial__int{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:clamp(14px,2.6vw,40px);
  padding-block:clamp(16px,1.8vw,22px);
}
.credencial__item{
  display:flex;align-items:baseline;gap:8px;
  font-size:var(--t-nota);color:var(--claro-2);
}
.credencial__item b{color:#fff;font-weight:700;letter-spacing:-.01em}
.credencial__item + .credencial__item{
  padding-left:clamp(14px,2.6vw,40px);
  border-left:1px solid var(--verde-linha);
}
/* NO CELULAR A CREDENCIAL VIROU FICHA (2026-08-03, "o CNPJ e aquela parte ali
   tá estranha").
   No desktop os quatro itens são UMA linha separada por fios verticais, e
   funciona. Abaixo de 820px eles empilham, os fios verticais somem e o que
   sobrava eram quatro frases soltas com 10px entre elas. Três coisas ficavam
   erradas, e nenhuma delas era falta de respiro:

   1. O NEGRITO PULAVA DE LADO. Três itens são "rótulo apagado + valor branco"
      (CNPJ · Sede em · Assistência) e um é o contrário ("2.500" branco vindo
      ANTES de "placas associadas"). Empilhado, o olho desce por uma coluna de
      rótulos cinza e tropeça num número branco no meio.
   2. OS VALORES COMEÇAVAM EM QUATRO x DIFERENTES, porque cada item media a
      largura do próprio rótulo ("CNPJ" tem 4 letras, "Assistência" tem 11).
      Serrilha, não coluna.
   3. NADA SEPARAVA AS LINHAS depois que o border-left saiu, e o ar de cima e
      de baixo (16px) era MENOR que o das laterais (24px), então a caixa
      apertava justo no eixo em que ela cresceu.

   O conserto é estrutural: rótulo encostado na borda esquerda, valor encostado
   na direita, um fio fino entre as linhas. Vira ficha de identificação, que é
   exatamente o que esta faixa é. Nenhuma palavra do HTML mudou. */
@media (max-width:820px){
  .credencial__int{
    flex-direction:column;align-items:stretch;
    gap:0;
    padding-block:6px;
  }
  .credencial__item{
    justify-content:space-between;
    gap:18px;
    padding-block:12px;
  }
  .credencial__item + .credencial__item{
    padding-left:0;border-left:0;
    border-top:1px solid var(--verde-linha);
  }
  /* A regra que invertia a ordem visual do 2º item (o número das placas
     vinha ANTES do rótulo) saiu em 19/08 junto com o próprio item: "No
     mercado desde 2019" já nasce no padrão rótulo→valor dos outros três,
     então não precisa mais de row-reverse nenhum. */
  /* a pintura da cápsula (fundo e sombra) mora no bloco de ACABAMENTO, mais
     abaixo neste arquivo: a regra de lá vem depois e com a mesma
     especificidade, então tem que ser lá que ela é trocada, senão esta aqui
     perderia sem !important. */
}

/* A placa branca dos "nãos" subia sobre o hero. Com a faixa de credencial
   entre os dois, quem encaixa sobre a foto passa a ser a faixa, e a placa
   segue logo abaixo. Mantém a composição em camadas sem esconder conteúdo. */
@media (min-width:901px){
  .naos{margin-top:0}
  .credencial{margin-top:clamp(-104px,-7vw,-64px)}
}

/* CELULAR: A CÁPSULA PRECISA DE AR EM CIMA (2026-08-02, pedido do Alê:
   "CNPJ e número de placas tá muito em cima").
   Ela nascia colada no pé do hero: cena escura terminando em y610 e cápsula
   verde-escura começando em y610, sem um pixel entre as duas. As duas massas
   escuras encostadas liam como um bloco só, e o CNPJ parecia caído dentro da
   estrada. No desktop a cápsula cavalga o hero de propósito (margem
   negativa); no celular não há altura para isso, então aqui ela faz o
   contrário e se descola. */
@media (max-width:900px){
  .credencial{margin-top:clamp(28px,9vw,44px)}
}

/* =========================================================================
   ACABAMENTO
   Bordas arredondadas, degradês e profundidade em camadas.

   Regra que guiou: degradê como LUZ (de onde a luz vem), nunca como
   enfeite colorido. Todos partem do dourado da marca ou do verde escuro,
   e nenhum deles se move sozinho.

   Este era o trecho do arquivo com correções empilhadas de várias
   gerações: quatro blocos :root, três véus de hero disputando com
   !important, e a mesma propriedade declarada em dois e três lugares. Foi
   consolidado: cada propriedade tem uma declaração e um dono. Os tokens
   subiram todos para o :root do topo.
   ========================================================================= */

/* ---------- botões em cápsula, com degradê e luz de topo ----------------
   O degradê do dourado começava em #9C8532, que dá 3,61:1 com o texto
   branco: abaixo do mínimo de 4,5:1, e justo no botão principal da página,
   que este leitor abre no sol. As três paradas foram escurecidas até o
   ponto mais claro passar de 5:1, sem perder a luz de topo. */
.btn{
  border-radius:var(--r-btn);
  box-shadow:var(--sombra-baixa);
  transition:background .18s var(--saida),border-color .18s var(--saida),
             color .18s var(--saida),transform .14s var(--saida),
             box-shadow .18s var(--saida);
}
.btn--ouro{
  background:linear-gradient(180deg,#83702A 0%,#776625 52%,#61511D 100%);
  box-shadow:var(--sombra-media),inset 0 1px 0 rgba(255,255,255,.20);
}
.btn--verde{
  background:linear-gradient(180deg,#2B4438 0%,var(--verde-esc) 55%,#14241E 100%);
  box-shadow:var(--sombra-media),inset 0 1px 0 rgba(255,255,255,.10);
}
.btn--claro{
  background:linear-gradient(180deg,#FFFFFF 0%,#F1ECE0 100%);
  box-shadow:var(--sombra-media);
}
.btn--linha{border-radius:var(--r-btn)}
.btn--fone{
  border-radius:var(--r-card);
  background:linear-gradient(180deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,.05) 100%);
  backdrop-filter:blur(6px);
}
@media (hover:hover) and (pointer:fine){
  /* o hover ESCURECE. A versão anterior clareava o topo para #B08F38 e
     derrubava o contraste do texto branco para 3,67:1 justamente no
     momento em que o dedo está sobre o botão principal. */
  .btn--ouro:hover{
    background:linear-gradient(180deg,#756324 0%,#6A5A21 52%,#544619 100%);
    box-shadow:var(--sombra-alta),inset 0 1px 0 rgba(255,255,255,.26);
  }
  .btn--verde:hover{background:linear-gradient(180deg,#35513F 0%,#1C3129 55%,#12211B 100%)}
}

/* ---------- a placa dos "nãos": cantos e sombra em camadas ---------- */
.naos__placa{
  border-radius:var(--r-placa);
  background:linear-gradient(180deg,#FBF9F3 0%,var(--creme) 46%,var(--papel) 100%);
  box-shadow:var(--sombra-alta),inset 0 1px 0 rgba(255,255,255,.9);
}

/* ---------- faixa de credencial: cápsula flutuante, não barra colada ---- */
.credencial__int{
  border-radius:var(--r-btn);
  background:linear-gradient(118deg,#2A4438 0%,var(--verde) 46%,#16281F 100%);
  box-shadow:var(--sombra-alta),inset 0 1px 0 rgba(255,255,255,.10);
  padding-inline:clamp(24px,2.6vw,38px);
  justify-content:center;
}
@media (max-width:820px){
  /* O DEGRADÊ ERA DIAGONAL (118deg) e a sombra era a --sombra-alta (80px de
     borrão, 34px pra baixo). As duas foram calibradas para a faixa larga e
     baixa do desktop, onde a diagonal atravessa como luz e a sombra cai sobre
     o hero escuro e some. Empilhada no celular a cápsula vira quase quadrada
     (402x166) e as duas denunciam:
     · a diagonal deixa o canto de cima claro e o de baixo quase preto, e a
       caixa lê TORTA, com a primeira linha sobre o claro e a última sobre o
       escuro;
     · a sombra cai sobre o CREME e vira uma mancha cinza atravessando a tela
       inteira entre a cápsula e o cartão branco (medido: creme 245 caindo
       para 189, um quarto de escurecimento espalhado por 402px de largura).
     Aqui a luz vem de cima, como no resto da página, e a sombra é curta:
     levanta a cápsula do papel sem sujar o fundo. */
  .credencial__int{
    border-radius:var(--r-card);justify-content:flex-start;
    background:linear-gradient(180deg,#2C4739 0%,var(--verde) 52%,#1A2F25 100%);
    box-shadow:0 12px 26px -14px rgba(13,22,19,.45),inset 0 1px 0 rgba(255,255,255,.10);
  }
}

/* ---------- cartões de cobertura ---------- */
.item{
  border-radius:var(--r-card);
  background:linear-gradient(180deg,#FFFFFF 0%,var(--creme) 100%);
  box-shadow:var(--sombra-baixa);
  transition:transform .2s var(--saida),box-shadow .2s var(--saida);
}
@media (hover:hover) and (pointer:fine){
  .item:hover{transform:translateY(-3px);box-shadow:var(--sombra-media)}
}
@media (max-width:860px){
  .item{padding:20px 22px}
}

/* =========================================================================
   SANFONA DAS PROVAS
   Frase na linha, sinal de mais na ponta, resposta abre no clique.
   Quem paga o respiro é o <summary> e o corpo. O <details> tem padding
   zero (ver a regra dele, acima), então não há mais soma de recuos.
   ========================================================================= */
.provas > li{
  display:flex;
  border-radius:var(--r-card);
  background:linear-gradient(180deg,#22392F 0%,var(--verde-prof) 100%);
  box-shadow:var(--sombra-media),inset 0 1px 0 rgba(255,255,255,.07);
  overflow:hidden;
}
.prova-item{width:100%}

.prova-item > summary{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  list-style:none;cursor:pointer;
  padding:clamp(22px,2.1vw,26px) clamp(22px,2.2vw,32px);
  min-height:64px;
  font-size:var(--t-card);font-weight:800;letter-spacing:-.018em;line-height:1.3;
  color:var(--ouro-luz);
  transition:background-color .18s var(--saida),color .18s var(--saida);
}
.prova-item > summary::-webkit-details-marker{display:none}
/* O cartão tem overflow:hidden para os cantos redondos funcionarem, e isso
   cortava o anel de foco de 3px por fora do summary. Anel por dentro:
   continua visível no teclado e não é mais recortado. */
.prova-item > summary:focus-visible{
  outline:3px solid var(--ouro-luz);
  outline-offset:-5px;
  border-radius:var(--r-card);
}
@media (hover:hover) and (pointer:fine){
  .prova-item > summary:hover{background:rgba(255,255,255,.05);color:#fff}
}

/* o sinal é desenhado em CSS: duas barras que viram uma ao abrir */
.prova-item__sinal{
  position:relative;flex:none;width:28px;height:28px;
  border:2px solid currentColor;border-radius:50%;opacity:.85;
}
.prova-item__sinal::before,
.prova-item__sinal::after{
  content:"";position:absolute;left:50%;top:50%;
  width:12px;height:2px;background:currentColor;border-radius:2px;
  transform:translate(-50%,-50%);
  transition:transform .22s var(--saida),opacity .22s var(--saida);
}
.prova-item__sinal::after{transform:translate(-50%,-50%) rotate(90deg)}
.prova-item[open] .prova-item__sinal::after{transform:translate(-50%,-50%) rotate(0deg)}
.prova-item[open] > summary{color:#fff}

.prova-item__corpo{
  padding:0 clamp(22px,2.2vw,32px) clamp(24px,2.2vw,28px);
}
.prova-item__corpo p{margin:0;font-size:var(--t-corpo);color:var(--claro-2)}

/* abertura com altura animada, sem salto */
@media (prefers-reduced-motion:no-preference){
  .prova-item__corpo{
    display:grid;grid-template-rows:0fr;
    transition:grid-template-rows .28s var(--saida);
  }
  .prova-item__corpo > p{overflow:hidden}
  .prova-item[open] .prova-item__corpo{grid-template-rows:1fr}
}

/* ---------- seção da objeção: luz vinda do dourado, não fundo chapado --- */
.objecao{
  background:
    radial-gradient(120% 80% at 88% 8%, rgba(183,149,66,.16) 0%, rgba(183,149,66,0) 58%),
    linear-gradient(180deg,#16281F 0%,var(--verde-prof) 40%,#101E19 100%);
}
/* O bloco tinha raio arredondado sobre fundo transparente, ou seja, um
   canto que não existia. Ganhou superfície: agora a nota sobre o número
   ainda não publicado lê como bloco de citação, que é o papel dela. */
.objecao__numeros{
  border-radius:0 var(--r-card) var(--r-card) 0;
  background:rgba(255,255,255,.045);
  padding-block:clamp(18px,2vw,24px);
  padding-right:clamp(18px,2vw,26px);
}

/* ---------- formulário ---------- */
.form{
  border-radius:var(--r-placa);
  background:linear-gradient(180deg,#FFFFFF 0%,#FAF7F0 100%);
  box-shadow:var(--sombra-alta);
}
.campo input,.campo select{
  border-radius:var(--r-campo);
  background:linear-gradient(180deg,#FDFCF9 0%,#FFFFFF 100%);
}

/* ---------- imagens ---------- */
.quem__foto img{border-radius:var(--r-img);box-shadow:var(--sombra-alta)}

/* ---------- rodapé com transição suave, sem corte reto ---------- */
.rodape{
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(183,149,66,.10) 0%, rgba(183,149,66,0) 55%),
    linear-gradient(180deg,#1B3129 0%,var(--verde) 30%,#12211C 100%);
}

/* =========================================================================
   VÉU DO HERO
   Uma camada só, pintada no próprio elemento. Lavagem à esquerda que some
   antes da metade: o texto ganha fundo, o caminhão e o céu quente do fim
   de tarde continuam vivos. A versão do celular está no bloco do hero,
   junto com o resto das regras de celular, e não aqui.
   ========================================================================= */
@media (min-width:901px){
  .hero__veu{
    background:
      /* brilho quente do lado do caminhão, faz a foto conversar com o dourado */
      radial-gradient(60% 50% at 82% 46%, rgba(214,164,72,.13) 0%, rgba(214,164,72,0) 70%),
      /* vinheta curta no pé, para o texto que cai embaixo */
      linear-gradient(to top, rgba(10,19,16,.52) 0%, rgba(10,19,16,.06) 20%, rgba(10,19,16,0) 34%),
      /* a mancha do texto: forte à esquerda, some antes da metade */
      linear-gradient(to right,
        rgba(8,15,12,.90) 0%,
        rgba(8,15,12,.80) 15%,
        rgba(8,15,12,.54) 27%,
        rgba(8,15,12,.22) 38%,
        rgba(8,15,12,.05) 48%,
        rgba(8,15,12,0) 56%);
  }
  /* o caminhão vive no terço direito do quadro: puxar o enquadramento
     garante que ele fique na faixa visível, e não cortado embaixo */
  .hero__foto img{object-position:66% 58%}
}

/* =========================================================================
   BLOCO DE OBJEÇÃO: quebra do título e vazio à direita
   O título estava limitado a 14ch, o que jogava "precisar" para a segunda
   linha no meio da pergunta. E a cabeça da seção ocupava só a coluna da
   esquerda, deixando metade da largura vazia.
   Agora a pergunta cabe inteira na primeira linha e o texto de apoio ocupa
   a coluna da direita, fechando a composição.
   ========================================================================= */
.objecao .tit-secao{max-width:20ch;text-wrap:pretty}

@media (min-width:1000px){
  .objecao__cabeca{
    max-width:none;
    display:grid;
    grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
    column-gap:clamp(40px,5vw,84px);
    align-items:end;
  }
  .objecao__cabeca > .rotulo{grid-column:1/-1}
  .objecao__cabeca > .tit-secao{margin-bottom:0}
  .objecao__cabeca > .lead{max-width:46ch;margin-bottom:0;align-self:end}
  /* o respiro que existia embaixo do título passa a ser da grade inteira */
  .objecao .provas{margin-top:clamp(38px,4.4vw,58px)}
}