/* TODOS Protegidos · site institucional v6 · direção do marketing (Figma "LP - DOBRAS ATUALIZADAS", 16/09/2026)
   Cores oficiais do Manual de Identidade Visual (jan/2026):
   azul #05309b (Pantone 286 C) · verde #0cc1b0 (Pantone 3262 C)

   O que a v6 traz em relação à v5:
   - faixa de aviso no topo ("cotação em 1 minuto, direto no WhatsApp");
   - cabeçalho dentro da dobra azul, só logo + Área do associado;
   - hero em cartão azul arredondado sobre faixa verde, com rotador de mensagens,
     preços de moto e carro lado a lado e o formulário de cotação na própria dobra;
   - indicadores em escudos sobre a faixa verde (+54 mil, +25, 98%, 24/7);
   - motivos em bento de quatro cartões ao lado do símbolo da marca;
   - planos em cartões claros sobre azul, com selo de parceria do Cartão de TODOS;
   - "Como faço para aderir?" em quatro passos num cartão claro (parecer jurídico de 09/10/2026);
   - "Cobertura Nacional" em lista única de dez itens ao lado da foto;
   - avaliações em cartões com aspas, mantendo as avaliações reais do Google;
   - dobra "Onde você estiver" repetindo o formulário antes do FAQ;
   - FAQ em duas colunas e rodapé azul com Navegue + Sede. */

:root{
  /* Paleta lida no Figma (painel Colors de "Home - D" e "Section - Planos"),
     nenhum tom inventado: azuis 05309B / 1A3F9B / 1F4FD1 / 000856 / 273863 / CFD9EC,
     verdes 0CC1B0 / 3ED4C6 / 00ADC0 / A8FFF7 / C9FDFF, neutros F5F5F5 / F2F4F7 / 101828 / 344054. */
  --azul:#05309b; --azul-900:#1a3f9b; --azul-950:#000856; --azul-500:#1f4fd1;
  --azul-cinza:#273863; --azul-claro:#cfd9ec;
  --verde:#0cc1b0; --verde-400:#3ed4c6; --ciano:#00adc0;
  --verde-200:#a8fff7; --verde-100:#c9fdff; --verde-50:rgba(168,255,247,.32);
  --faixa:#0cc1b0;
  --ink:#05309b; --titulo:#101828; --texto:#344054; --cinza:rgba(16,24,40,.62);
  --linha:#f2f4f7; --bg:#f5f5f5; --branco:#fff;
  /* Erro de campo (25/09/2026): a paleta do Figma não tem vermelho; este é o error-600
     da mesma família de neutros que o site já usa (101828 / 344054 / F2F4F7). */
  --erro:#d92d20;
  --head:'Poppins',system-ui,sans-serif; --body:'Poppins',system-ui,sans-serif; --ui:'Inter',system-ui,sans-serif;
  --r:18px; --r-lg:28px; --r-xl:44px;
  --sombra:0 24px 60px rgba(5,48,155,.12); --sombra-card:0 18px 40px rgba(5,48,155,.10);
  --wrap:1220px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font-family:var(--body);color:var(--texto);background:var(--bg);line-height:1.6;font-size:1rem;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit}
ul{list-style:none}
h1,h2,h3,h4{font-family:var(--head);color:var(--titulo);line-height:1.14;font-weight:700;letter-spacing:-.015em}
h2{font-size:clamp(1.75rem,3.2vw,2.5rem)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
section{position:relative}

/* Botões */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--head);font-weight:600;font-size:.95rem;padding:16px 30px;border-radius:999px;text-decoration:none;border:0;cursor:pointer;transition:transform .2s,box-shadow .2s,background .2s,color .2s,border-color .2s;white-space:nowrap}
.btn svg{width:18px;height:18px;flex-shrink:0}
.btn:hover{transform:translateY(-2px)}
.btn:disabled{opacity:.75;cursor:default;transform:none}
.btn:focus-visible,a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--verde);outline-offset:3px}
.btn-azul{background:var(--azul);color:#fff;box-shadow:0 14px 30px rgba(5,48,155,.26)}
.btn-azul:hover{background:var(--azul-900)}
.btn-verde{background:var(--verde);color:var(--azul-950);box-shadow:0 14px 30px rgba(12,193,176,.32)}
.btn-verde:hover{background:var(--verde-400)}
.btn-degrade{background:linear-gradient(90deg,var(--azul) 0%,var(--verde) 100%);color:#fff;box-shadow:0 14px 30px rgba(5,48,155,.24)}
.btn-degrade:hover{filter:brightness(1.06)}
.btn-claro{background:var(--verde-100);color:var(--azul);box-shadow:0 14px 30px rgba(12,193,176,.22)}
.btn-claro:hover{background:var(--verde-200)}
.btn-borda{background:rgba(255,255,255,.06);color:#fff;border:1.5px solid rgba(168,255,247,.7)}
.btn-borda:hover{background:rgba(255,255,255,.14);border-color:#fff}
.btn-largo{width:100%;white-space:normal;line-height:1.25}
.btn-mini{padding:12px 22px;font-size:.88rem}

/* Faixa de aviso */
/* Faixa de aviso do topo (não é fixa — decisão de 17/09/2026); os dois links levam ao formulário. */
.aviso{background:var(--verde);color:var(--azul);border-bottom:1px solid rgba(201,253,255,.24);font-size:.92rem;text-align:center;padding:12px 44px 12px 24px;position:relative}
.aviso p{margin:0}
.aviso b{font-weight:700;text-decoration:underline}
.aviso a{color:inherit;font-weight:700;text-decoration:underline}
.aviso .seta{display:inline-block;margin-left:6px;transform:translateY(1px)}
.aviso-x{position:absolute;right:14px;top:50%;transform:translateY(-50%);width:28px;height:28px;border:0;background:transparent;color:var(--azul);border-radius:8px;cursor:pointer;line-height:1;font-size:1.2rem}
.aviso-x:hover{background:rgba(5,48,155,.08)}
.aviso[hidden]{display:none}

/* Faixa verde que sustenta hero + indicadores */
/* Verde chapado, como no Figma: nada de degradê na faixa */
.faixa-verde{background:var(--faixa)}

/* Cabeçalho, dentro do cartão azul do hero */
.topo{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 0;border-bottom:1px solid rgba(255,255,255,.14)}
.topo .logo img{width:auto;height:44px}
.topo .acoes{display:flex;align-items:center;gap:12px}
.burger{display:none;width:44px;height:44px;border:0;background:transparent;border-radius:12px;cursor:pointer;flex-direction:column;justify-content:center;gap:5px;padding:0 10px}
.burger span{display:block;height:2px;background:#fff;border-radius:2px;transition:transform .25s,opacity .25s}
.burger.aberto span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.aberto span:nth-child(2){opacity:0}
.burger.aberto span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.menu{display:none}
.menu.aberto{display:block;position:absolute;top:100%;left:0;right:0;margin-top:12px;background:#fff;border-radius:var(--r-lg);padding:12px;box-shadow:var(--sombra);z-index:4}
.menu.aberto li a{display:block;padding:14px 16px;border-radius:14px;color:var(--titulo);text-decoration:none;font-weight:600}
.menu.aberto li a:hover{background:var(--verde-50)}
/* Grupo Institucional, só no menu do celular (30/09/2026): filete, rótulo em caixa alta e links secundários */
.menu.aberto{max-height:calc(100vh - 110px);max-height:calc(100dvh - 110px);overflow-y:auto;overscroll-behavior:contain}
.menu.aberto .menu-inst{margin-top:8px;padding-top:12px;border-top:1px solid var(--linha)}
.menu.aberto .menu-rotulo{display:block;padding:4px 16px 6px;font:600 .72rem/1.4 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--cinza)}
.menu.aberto .menu-inst li a{padding:10px 16px;font-size:.88rem;font-weight:500;color:var(--cinza)}

/* ---------- Dobra 1 · hero ---------- */
.hero{padding:22px 0 0}
.hero .wrap{position:relative}
.cartao-hero{position:relative;border-radius:var(--r-xl);overflow:hidden;color:#fff;
  background:var(--azul);
  background-image:
    radial-gradient(120% 120% at 100% 100%, rgba(12,193,176,.50) 0%, rgba(12,193,176,0) 55%),
    radial-gradient(90% 110% at 96% 8%, rgba(31,79,209,.55) 0%, rgba(31,79,209,0) 60%),
    linear-gradient(115deg,#000856 0%,#05309b 42%,#1a3f9b 70%,#1f4fd1 100%);
  padding:0 clamp(20px,3.4vw,48px) clamp(10px,1.2vw,18px)}
.hero-grade{display:grid;grid-template-columns:1fr minmax(360px,420px);gap:clamp(24px,3vw,48px);align-items:stretch;padding-top:clamp(24px,3vw,40px)}
.hero-grade .form-wrap{align-self:start}
.hero-copy{position:relative;display:flex;flex-direction:column}
.hero h1{color:#fff;font-size:clamp(1.9rem,2.9vw,2.6rem);line-height:1.18;max-width:21ch;font-weight:600}
.hero h1 u{text-decoration:underline;text-underline-offset:4px}
.hero h1 em{display:block;font-style:normal;color:var(--verde-400);font-size:clamp(2.4rem,4.6vw,3.9rem);line-height:1.02;letter-spacing:-.03em;margin-top:6px}

/* rotador de mensagens */
.rotador{display:flex;align-items:center;gap:14px;margin-bottom:18px;min-height:26px}
.rotador .pontos{display:flex;gap:6px;align-items:center}
.rotador .pontos i{width:8px;height:8px;border-radius:99px;background:rgba(255,255,255,.35);transition:width .3s,background .3s}
.rotador .pontos i.on{width:26px;background:var(--verde-400)}
.rotador .msg{font-size:.98rem;color:var(--verde-100);font-weight:500}

/* preços lado a lado */
/* margin-top:auto empurra pílulas + figura para a base do cartão (no Figma a base do
   cartão corta arco e veículos); o padding-top garante o respiro mínimo abaixo do h1. */
.precos{display:flex;gap:clamp(18px,3vw,44px);margin:auto 0 0;padding-top:clamp(18px,2.4vw,30px);position:relative;z-index:2;justify-content:center;max-width:560px}
.precos .item{text-align:center}
.precos .item .rot{display:block;font-family:var(--head);font-weight:600;font-size:.86rem;color:#fff;margin-bottom:8px}
.precos .valor{display:inline-flex;align-items:baseline;gap:6px;background:linear-gradient(90deg,rgba(5,48,155,.55),rgba(12,193,176,.55));border:1px solid rgba(168,255,247,.5);border-radius:999px;padding:8px 18px 8px 8px;backdrop-filter:blur(4px)}
.precos .valor .rs{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:99px;background:var(--verde);color:var(--azul-950);font-family:var(--head);font-weight:700;font-size:.72rem;align-self:center}
.precos .valor b{font-family:var(--head);font-size:clamp(1.5rem,2.4vw,2rem);font-weight:700;color:#fff;letter-spacing:-.02em}
.precos .valor small{font-size:.68rem;color:var(--verde-100);font-weight:500}
.precos .item-dest .valor{background:linear-gradient(90deg,rgba(12,193,176,.35),rgba(12,193,176,.7));box-shadow:0 10px 26px rgba(12,193,176,.28)}

/* Figura do hero = composição do Figma ("Home - D", quadro de 1920 px): três imagens
   exportadas do próprio arquivo — arco neon (raster com desfoque gaussiano σ=12 px aplicado
   no próprio arquivo, porque no Figma o arco é uma faixa suave e o SVG exportado não
   trouxe esse efeito; mix-blend-mode lighten a 90 %),
   moto e carro — nas posições e escalas lidas do SVG do quadro, em % de uma caixa de
   857,8 × 486,4 px (do topo do arco ao pé da sombra do carro). A caixa começa 162,6 px
   acima da base das pílulas (18,96 % da largura; a pílula do Figma tem 63 px) e termina
   na base do cartão. No Figma o cartão corta as rodas (caixa de 411,1 px); aqui a caixa
   foi estendida até o pé dos veículos (decisão de 17/09/2026) para nada ficar cortado.
   Os deslocamentos verticais usam margin-top em % (relativo à largura). Sem z-index em .hero-copy/.hero-foto: o blend do arco precisa enxergar o
   fundo azul do cartão (stacking context isolaria e mostraria o quadrado preto). */
.hero-foto{position:relative;flex:0 0 auto;width:100%;max-width:560px;aspect-ratio:857.8/486.4;overflow:hidden;
  margin:calc(-1*min(18.96%,106.2px)) 0 0}
.hero-foto img{position:absolute;top:0;display:block;height:auto;max-width:none}
.hero-foto .arco{left:0;width:99.42%;opacity:.9;mix-blend-mode:lighten}
.hero-foto .moto{left:9.55%;margin-top:20.38%;width:34.57%}
.hero-foto .carro{left:44.43%;margin-top:22.08%;width:55.57%;clip-path:inset(0 0 0 3.4%)}
@media(min-width:1101px){.hero-foto{margin-bottom:calc(-1*clamp(10px,1.2vw,18px))}}

/* formulário da dobra */
/* Painel do formulário = nó "Background+Overlay" do Figma: um contêiner só,
   raio 24px, branco 20% + gradiente #0CC1B0 60%→30%, com o cartão branco DENTRO.
   Desde 25/09/2026 o contêiner fica só com a borda de 8px: o consentimento entrou no cartão. */
.form-wrap{background:linear-gradient(180deg,rgba(12,193,176,.60),rgba(12,193,176,.30)),rgba(255,255,255,.2);border-radius:24px;padding:8px;box-shadow:0 26px 60px rgba(0,8,86,.28)}
.form-cot{background:#fff;border-radius:18px;padding:clamp(20px,2vw,28px);color:var(--texto)}
.form-cot h2,.form-cot h3{font-size:1.16rem;color:var(--titulo);margin-bottom:16px}
.campo{margin-bottom:14px}
.campo label{display:block;font-family:var(--head);font-size:.86rem;font-weight:500;color:var(--titulo);margin-bottom:6px}
.campo label .req{color:var(--verde)}
.campo input,.campo select,.campo textarea{width:100%;font-family:var(--ui);font-size:1rem;color:var(--titulo);background:var(--linha);border:1px solid transparent;border-radius:12px;padding:13px 14px;transition:border-color .2s,background .2s}
.campo input::placeholder{color:rgba(16,24,40,.38)}
.campo input:focus,.campo select:focus,.campo textarea:focus{background:#fff;border-color:var(--azul-500);outline:none;box-shadow:0 0 0 3px rgba(31,79,209,.18)}
.campo select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23344054' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:18px;padding-right:38px}
.par{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.par .campo{margin-bottom:14px}
.form-cot .btn{margin-top:4px}

/* Formulário de cotação: cidades, consentimento e envio (25/09/2026, mockup
   design-system/mockups/2026-09-25-site6-formulario-cotacao-cidades-lgpd.html).
   Mesmas regras do design system do painel, no dialeto do site: erro de campo
   com borda + ícone + texto na borda do input, botão em envio travado com spinner
   e gerúndio. O termo solto saiu: o consentimento é a caixa .aceite, obrigatória. */
.campo input,.campo select{height:48px;line-height:normal}

/* spinner: a receita do .spin do design system (anel em currentColor, quarto de cima vazado) */
@keyframes giro{to{transform:rotate(360deg)}}
.spin{display:inline-block;width:18px;height:18px;flex:none;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;animation:giro .8s linear infinite}
@media(prefers-reduced-motion:reduce){.spin{animation-duration:2.4s}}

/* cidade carregando do sistema: select travado, spinner no lugar da seta */
.ctrl{position:relative}
.campo.carregando select{background-image:none;color:var(--cinza);cursor:progress;opacity:1}
.campo.carregando .spin{position:absolute;right:14px;top:15px;color:var(--azul-500)}
.campo:not(.carregando) .ctrl .spin{display:none}
.campo select:invalid,.campo select.placeholder{color:rgba(16,24,40,.38)}
.campo select option{color:var(--titulo)}

/* erro de campo: borda + ícone + mensagem, tudo na borda esquerda do input */
.campo.invalido input,.campo.invalido select{background-color:#fff;border-color:var(--erro)}
.campo.invalido input:focus,.campo.invalido select:focus{border-color:var(--erro);box-shadow:0 0 0 3px rgba(217,45,32,.18)}
.msg-erro{display:flex;align-items:flex-start;gap:6px;margin-top:6px;font-family:var(--ui);font-size:.8rem;line-height:1.35;color:var(--erro)}
.msg-erro svg{width:14px;height:14px;flex:none;margin-top:1px}

/* consentimento LGPD: caixa de 22px no fundo dos inputs, marcada em azul; a linha inteira
   é clicável e tem 44px de altura mínima (alvo de toque) */
.aceite{position:relative;display:flex;align-items:flex-start;gap:10px;min-height:44px;margin:2px 0 16px;font-size:.84rem;line-height:1.45;color:var(--texto);cursor:pointer}
.aceite input{position:absolute;left:0;top:0;width:22px;height:22px;margin:0;opacity:0;cursor:pointer}
.aceite .caixa{width:22px;height:22px;flex:none;margin-top:-1px;border-radius:6px;background:var(--linha);border:1.5px solid rgba(16,24,40,.38);display:grid;place-items:center;color:#fff;transition:background .2s,border-color .2s}
.aceite .caixa svg{width:14px;height:14px;opacity:0}
.aceite input:checked+.caixa{background:var(--azul);border-color:var(--azul)}
.aceite input:checked+.caixa svg{opacity:1}
.aceite input:focus-visible+.caixa{outline:3px solid var(--verde);outline-offset:3px}
.aceite a{color:var(--azul);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.aceite .req{color:var(--verde)}
.aceite-bloco.invalido .caixa{background:#fff;border-color:var(--erro)}
.aceite-bloco .msg-erro{margin:-10px 0 14px}
.nw{white-space:nowrap}

/* lugar do Turnstile: sem desafio não ocupa nada; com desafio o widget centra acima do botão */
.ts-slot{display:flex;justify-content:center}
.ts-slot.vis{margin-bottom:14px}

/* Retorno do envio (28/09/2026, mockup
   design-system/mockups/2026-09-28-site6-mensagem-apos-envio.html, decisões M1 a M9).
   .cot-fim é o cartão que ocupa o lugar do formulário depois do envio: mesma caixa branca
   do .form-cot, dentro do mesmo .form-wrap verde. Variantes .ok (lead gravado) e .falha
   (não enviou; dados guardados, "Tentar de novo" e WhatsApp). Nenhuma cor nova: tudo sai
   das variáveis do :root. .lnk é a ação discreta de texto do site (alvo de 44px). */
.form-cotacao[hidden],.cot-fim[hidden]{display:none}
.cot-fim{text-align:center;display:flex;flex-direction:column;align-items:center}
.cot-fim .fim-selo{width:64px;height:64px;border-radius:999px;display:grid;place-items:center;flex:none;margin:6px 0 18px}
.cot-fim .fim-selo svg{width:30px;height:30px}
.cot-fim.ok .fim-selo{background:var(--verde-100);color:var(--azul);box-shadow:0 0 0 8px var(--verde-50)}
.cot-fim.falha .fim-selo{background:var(--linha);color:var(--azul);box-shadow:0 0 0 8px rgba(207,217,236,.45)}
/* entrada: o selo cresce uma vez (0,4 s); com movimento reduzido, aparece parado */
@keyframes selo{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
.cot-fim.ok .fim-selo{animation:selo .4s cubic-bezier(.2,.9,.3,1.3) both}
@media(prefers-reduced-motion:reduce){.cot-fim .fim-selo{animation:none}}
.cot-fim .fim-tit{font-size:1.3rem;color:var(--titulo);margin:0 0 8px;outline:none}
.cot-fim .fim-lead{font-family:var(--head);font-weight:600;font-size:1rem;line-height:1.4;color:var(--azul);margin:0 0 10px}
.cot-fim .fim-txt{font-size:.92rem;line-height:1.55;color:var(--texto);margin:0 0 16px;max-width:34ch}
.cot-fim .fim-txt b{color:var(--titulo);font-weight:600}
.cot-fim .fim-resumo{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;list-style:none;margin:0 0 18px}
.cot-fim .fim-resumo li{font-family:var(--ui);font-size:.8rem;font-weight:500;color:var(--titulo);background:var(--linha);border-radius:999px;padding:5px 10px;line-height:1.4}
.cot-fim .fim-acoes{width:100%;display:flex;flex-direction:column;gap:12px;margin-bottom:6px}
.cot-fim .fim-acoes .btn{margin-top:0}
.cot-fim .fim-rodape{width:100%;border-top:1px solid var(--linha);padding-top:12px;font-size:.84rem;line-height:1.45;color:var(--cinza)}
.cot-fim .fim-rodape.sem-linha{border-top:0;padding-top:0}
.lnk{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 10px;border:0;background:none;cursor:pointer;
  font-family:var(--head);font-weight:600;font-size:.9rem;color:var(--azul);text-decoration:underline;text-underline-offset:3px}
.lnk svg{width:16px;height:16px;flex:none}
/* até 640px o botão largo do cartão perde 12px de cada lado (30 para 18): "Quero minha cotação" cabe numa linha */
@media(max-width:640px){.form-cot .btn-largo{padding-inline:18px}}
/* desktop (duas colunas, acima de 1100px): o cartão guarda a altura do formulário que substituiu
   (min-height medido no site.js) e o conteúdo centra na vertical; o hero não dá salto */
@media(min-width:1101px){.cot-fim{justify-content:center}}

/* isca (honeypot): fora da tela, fora do leitor de tela e fora do Tab */
.isca{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

/* Pares lado a lado acima de 640px (Nome | WhatsApp e Tipo | Placa, decisões D7 e E3,
   mockup design-system/mockups/2026-09-25-site6-hero-precos-cidade-dobra.html): rótulo,
   input e mensagem de erro em trilhos comuns por subgrid. Os inputs ficam no mesmo Y
   mesmo quando um rótulo quebra, e a altura extra só existe quando ele quebra. */
@media(min-width:641px){
  .par{grid-template-rows:auto auto auto;row-gap:0}
  .par>.campo{display:grid;grid-row:span 3;grid-template-rows:subgrid;align-content:start}
  .par>.campo>label{align-self:end}
}

/* seta "saiba mais" entre o hero e os indicadores */
.seta-saiba{position:absolute;left:50%;bottom:-27px;transform:translateX(-50%);width:54px;height:54px;border-radius:99px;background:#fff;display:grid;place-items:center;box-shadow:0 12px 26px rgba(0,8,86,.28),0 0 0 8px rgba(255,255,255,.35);z-index:4}
.seta-saiba img{width:26px}
.seta-saiba:hover{transform:translateX(-50%) translateY(3px)}

/* ---------- Dobra 2 · indicadores ---------- */
.numeros{padding:clamp(56px,7vw,92px) 0 clamp(48px,6vw,80px)}
.numeros .grade{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,3vw,40px);text-align:center}
.num .escudo{width:76px;height:76px;margin:0 auto 16px;color:var(--azul);position:relative;display:block}
.num .escudo .borda{width:100%;height:100%;filter:drop-shadow(0 0 0 rgba(0,0,0,0))}
.num .escudo::before{content:'';position:absolute;inset:-7px;border-radius:44% 44% 38% 38%/50% 50% 30% 30%;border:2px solid rgba(5,48,155,.28)}
.num .escudo::after{content:'';position:absolute;inset:-14px;border-radius:44% 44% 38% 38%/50% 50% 30% 30%;border:2px solid rgba(5,48,155,.14)}
.num .escudo .ico{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);width:30px;height:30px}
.num b{display:block;font-family:var(--head);font-size:clamp(1.7rem,3vw,2.3rem);font-weight:700;color:var(--azul);letter-spacing:-.02em;line-height:1}
.num span{display:block;margin-top:6px;color:var(--azul-900);font-size:.98rem}

/* ---------- Dobra 3 · motivos ---------- */
.motivos{background:#fff;padding:clamp(64px,8vw,110px) 0}
.motivos .grade{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,4vw,64px);align-items:center}
/* Título e símbolo compartilham a mesma caixa: o símbolo centra no eixo do texto,
   não no da coluna (que é mais larga que as linhas do título). */
.motivos h2{font-size:clamp(2rem,3.6vw,2.9rem);color:var(--azul);line-height:1.1;max-width:8.2em}
.motivos h2 em{font-style:normal;display:block;color:var(--azul-950)}
.motivos .simbolo{margin-top:clamp(18px,2.4vw,32px);width:8.2em;max-width:100%;font-size:clamp(2rem,3.6vw,2.9rem)}
.motivos .simbolo img{width:clamp(120px,12vw,180px);margin:0 auto}
.motivos .simbolo img{opacity:.95}
/* As duas colunas do bento fecham no mesmo eixo: sem align-items:start, os cartões
   da direita esticam para preencher as linhas que o cartão alto da esquerda define. */
.bento{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:stretch}
.mot{background:var(--verde-50);border:1px solid rgba(12,193,176,.18);border-radius:24px;padding:22px 24px;display:flex;flex-direction:column}
.mot h3{font-size:1.06rem;color:var(--azul);margin-bottom:0}
.mot p{margin-top:10px;color:var(--texto);font-size:.96rem}
.mot p.nota{font-size:.82rem}
.mot p.nota a{color:var(--texto);text-decoration:underline}
.mot .cab-mot{display:flex;align-items:center;gap:12px}
.mot .ico{width:44px;height:44px;border-radius:14px;background:var(--verde-100);color:var(--azul);display:grid;place-items:center;flex:none}
.mot .ico svg{width:22px;height:22px}
.mot a{display:inline-flex;align-self:flex-start;align-items:center;gap:8px;margin-top:auto;padding-top:16px;font-family:var(--head);font-weight:600;font-size:.94rem;color:var(--azul);text-decoration:underline;text-underline-offset:4px}
.mot a svg{width:16px;height:16px}
.mot-alta{grid-column:1/-1;background:rgba(168,255,247,.42)}
.mot-alta .cab-mot{justify-content:flex-start}
.mot-alta .caras{display:flex}
.mot-alta .caras span{width:38px;height:38px;border-radius:99px;display:grid;place-items:center;font-family:var(--head);font-weight:700;font-size:.78rem;color:#fff;background:var(--azul);border:2px solid var(--verde-200);margin-left:-10px}
.mot-alta .caras span:first-child{margin-left:0;background:var(--verde)}
.mot-alta .caras span:nth-child(3){background:var(--azul-500)}
.mot-completa{grid-row:span 2}
.mot-branco{background:#fff;border-color:var(--linha)}

/* ---------- Dobra 4 · planos ---------- */
.planos{color:#fff;padding:clamp(64px,8vw,110px) 0;
  background:var(--azul);
  background-image:radial-gradient(90% 90% at 12% 0%, rgba(31,79,209,.55) 0%, rgba(31,79,209,0) 60%),
                   radial-gradient(80% 80% at 100% 100%, rgba(12,193,176,.26) 0%, rgba(12,193,176,0) 60%)}
.planos .cab{text-align:center;max-width:720px;margin:0 auto clamp(32px,4vw,56px)}
.planos .cab h2{color:var(--verde-400);font-size:clamp(1.6rem,2.6vw,2rem)}
.planos .cab p{color:#fff;font-family:var(--head);font-weight:700;font-size:clamp(1.3rem,2.4vw,1.85rem);line-height:1.2;margin-top:4px}
.planos .grade{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,40px);max-width:900px;margin:0 auto}
.plano{background:#fff;border-radius:30px;padding:14px 14px 22px;box-shadow:0 26px 60px rgba(0,8,86,.32);text-align:center;color:var(--texto)}
.plano figure{border-radius:22px;overflow:hidden}
.plano h3{margin:18px 0 12px;color:var(--azul);font-size:1.15rem}
.plano .preco{border-radius:18px;overflow:hidden;border:1px solid rgba(12,193,176,.35);margin:0 6px}
.plano .preco .apartir{background:linear-gradient(90deg,var(--azul) 0%,var(--verde) 100%);color:#fff;font-family:var(--head);font-weight:600;font-size:.88rem;padding:8px}
.plano .preco .valor{display:flex;align-items:baseline;justify-content:center;gap:6px;padding:12px 8px;background:#fff}
.plano .preco .valor .rs{font-family:var(--head);font-weight:600;font-size:.9rem;color:var(--azul)}
.plano .preco .valor b{font-family:var(--head);font-size:clamp(1.8rem,3vw,2.3rem);font-weight:700;color:var(--verde);letter-spacing:-.02em}
.plano .preco .valor small{font-size:.8rem;color:var(--cinza)}
.plano .nota{font-size:.78rem;color:var(--cinza);margin:12px 0 4px}
.plano .parceria{display:inline-flex;align-items:center;gap:8px;font-size:.74rem;color:var(--cinza);margin-bottom:16px}
.plano .parceria img{height:16px;width:auto}
.plano .btn{width:calc(100% - 12px)}

/* ---------- Dobra 5 · como aderir ---------- */
.aderir{padding:0 0 clamp(64px,8vw,110px);
  background:var(--azul);
  background-image:radial-gradient(90% 90% at 0% 100%, rgba(12,193,176,.22) 0%, rgba(12,193,176,0) 60%)}
.aderir .painel{background:#fff;border-radius:var(--r-xl);padding:clamp(32px,4vw,56px) clamp(20px,3vw,48px);text-align:center}
.aderir h2{color:var(--azul);font-size:clamp(1.5rem,2.6vw,2rem);margin-bottom:clamp(24px,3vw,40px)}
.passos{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.4vw,28px)}
.passo{background:var(--verde-50);border:1px solid rgba(12,193,176,.22);border-radius:22px;padding:34px 20px 22px;position:relative}
.passo .ico{position:absolute;top:-24px;left:50%;transform:translateX(-50%);width:48px;height:48px;border-radius:99px;background:linear-gradient(180deg,var(--verde-400),var(--verde));color:#fff;display:grid;place-items:center;box-shadow:0 10px 22px rgba(12,193,176,.35)}
.passo .ico svg{width:24px;height:24px}
.passo h3{font-size:.92rem;color:var(--azul);text-transform:uppercase;letter-spacing:.02em;line-height:1.3}
.passo p{margin-top:10px;font-size:.92rem;color:var(--texto)}
.aderir .cta{margin:clamp(24px,3vw,36px) 0 0}
.parceiro{margin-top:clamp(26px,3vw,40px);border-radius:26px;padding:22px clamp(20px,3vw,40px);color:#fff;display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:clamp(16px,3vw,36px);text-align:left;
  background:linear-gradient(90deg,#05309b 0%,#1a3f9b 55%,#1f4fd1 100%)}
.parceiro b{font-family:var(--head);font-size:1.02rem;line-height:1.25;display:block}
.parceiro img{height:42px;width:auto}
.parceiro p{font-size:.86rem;color:var(--azul-claro)}

/* ---------- Dobra 6 · cobertura nacional ---------- */
/* Fundo na faixa verde da marca, para contrastar com a dobra azul de cima (17/09/2026);
   o cartão tem a mesma largura e o mesmo raio do painel "Como faço para aderir?". A foto
   do casal saiu da dobra: na escala igual à das outras pessoas do site sobrava muito fundo. */
.cobertura{color:#fff;padding:clamp(56px,7vw,96px) 0;
  background:var(--faixa);
  background-image:radial-gradient(70% 90% at 100% 0%, rgba(168,255,247,.35) 0%, rgba(168,255,247,0) 60%)}
.cobertura .grade{display:grid;grid-template-columns:1fr}
.cob-card{background:#fff;border-radius:var(--r-xl);padding:clamp(32px,4vw,56px) clamp(20px,3vw,48px);color:var(--texto);box-shadow:0 26px 60px rgba(0,8,86,.18)}
.cob-card h2{color:var(--verde);font-size:clamp(1.6rem,2.8vw,2.1rem);margin-bottom:18px}
.cob-card ul li{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--linha);font-family:var(--head);font-weight:600;font-size:.98rem;color:var(--azul)}
.cob-card ul li:last-child{border-bottom:0}
.cob-card ul li svg{width:20px;height:20px;flex:none;color:var(--verde)}
.cob-card ul li .vide{margin-left:auto;padding-left:10px;font-weight:500;font-size:.78rem;color:var(--texto);text-decoration:underline;white-space:nowrap}
.cob-card .btn{margin-top:22px}
/* ---------- Dobra 7 · avaliações ---------- */
.depos{background:#fff;padding:clamp(56px,7vw,96px) 0}
.depos .topo-dep{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:clamp(22px,3vw,34px);flex-wrap:wrap}
.depos h2{color:var(--azul);font-size:clamp(1.6rem,3vw,2.2rem)}
.depos-rodape{margin-top:22px;text-align:center}
.depos .nota-google{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--texto);font-size:.9rem}
.depos .nota-google .g{width:32px;height:32px;border-radius:99px;background:#fff;border:1px solid var(--linha);display:grid;place-items:center;font-family:var(--head);font-weight:700;color:var(--azul)}
.dep-nav{display:flex;gap:10px}
.dep-seta{width:40px;height:40px;border-radius:99px;border:0;background:var(--verde);color:#fff;display:grid;place-items:center;cursor:pointer;transition:opacity .2s,background .2s}
.dep-seta:disabled{opacity:.35;cursor:default}
.dep-seta svg{width:20px;height:20px}
.dep-carrossel{position:relative}
/* O trilho rola no eixo x, então o overflow recortava a sombra dos cartões e deixava
   uma borda reta de fundo. A folga interna dá espaço para a sombra inteira. */
.trilho{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(300px,1fr);gap:20px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:22px;padding:16px 22px 32px;margin:-16px -22px -32px;scrollbar-width:none}
.trilho::-webkit-scrollbar{display:none}
.depo{scroll-snap-align:start;background:#fff;border:1px solid var(--linha);border-radius:24px;padding:26px;box-shadow:0 8px 20px rgba(5,48,155,.07);display:flex;flex-direction:column;gap:14px}
.depo .quem{display:flex;align-items:center;gap:12px}
.depo .av{width:46px;height:46px;border-radius:99px;background:var(--azul);color:#fff;display:flex;align-items:center;justify-content:center;line-height:1;font-family:var(--head);font-weight:700;font-size:.9rem;flex:none}
.depo .quem b{display:block;font-family:var(--head);color:var(--azul);font-size:1rem;line-height:1.25}
.depo .quem div span{display:block;font-size:.8rem;line-height:1.3;color:var(--cinza)}
/* Aspas inline, no tamanho do texto: soltas e grandes ficavam desalinhadas da primeira linha */
.depo blockquote{font-size:.96rem;line-height:1.55;color:var(--texto)}
.depo blockquote::before{content:'“';font-family:var(--head);font-weight:700;font-size:1.5rem;line-height:0;vertical-align:-.32em;margin-right:4px;color:var(--verde)}
.depo blockquote::after{content:'”';font-family:var(--head);font-weight:700;font-size:1.5rem;line-height:0;vertical-align:-.32em;margin-left:2px;color:var(--verde)}
.depo .estrelas{color:var(--verde);letter-spacing:2px;font-size:.9rem}

/* ---------- Dobra 8 · onde você estiver ---------- */
.onde{padding:clamp(48px,6vw,80px) 0;background:var(--bg)}
.onde .cartao{position:relative;border-radius:var(--r-xl);overflow:hidden;color:#fff;padding:clamp(28px,3.4vw,52px);
  background:var(--azul);
  background-image:radial-gradient(110% 120% at 100% 100%, rgba(12,193,176,.45) 0%, rgba(12,193,176,0) 55%),
                   linear-gradient(115deg,#000856 0%,#05309b 45%,#1a3f9b 72%,#1f4fd1 100%)}
.onde .grade{display:grid;grid-template-columns:1fr minmax(340px,420px);gap:clamp(24px,3vw,48px);align-items:stretch}
.onde .grade>div:first-child{display:flex;flex-direction:column}
.onde .grade .form-wrap{align-self:start}
.onde h2{color:#fff;font-size:clamp(1.8rem,3.4vw,2.8rem);max-width:14ch}
.onde .precos{max-width:600px}
/* Figura = quadro "LP - D - Dobra formulario" do Figma (1920 px): por baixo, o mesmo arco
   raster do hero (mix-blend-mode lighten a 90 %, aqui na escala 0,933 do arquivo); por cima,
   a composição exportada do próprio quadro (entregador + motorista de app com os selos
   "ENTREGADOR DE APP" e "MOTORISTA DE APP", moto e carro espelhados) renderizada a 2x
   com fundo transparente; as duas imagens de "brilho" do quadro ficaram de fora porque
   na exportação viram faixa larga e véu preto, e no Figma o arco é a linha fina. Caixa de 730,7 × 556,7 px (do topo do arco ao pé da sombra
   do carro), começando 52,7 px acima da base das pílulas (7,21 % da largura); a base da
   figura é a base do cartão, que corta as pernas como no arquivo. */
.onde .foto{position:relative;flex:0 0 auto;width:100%;max-width:600px;aspect-ratio:730.7/556.7;overflow:hidden;
  margin:calc(-1*min(7.21%,43.3px)) 0 0}
.onde .foto img{position:absolute;left:0;top:0;display:block;width:100%;height:auto;max-width:none}
.onde .foto .arco{opacity:.9;mix-blend-mode:lighten}
@media(min-width:1101px){.onde .foto{margin-bottom:calc(-1*clamp(28px,3.4vw,52px))}}
/* Cobertura Nacional no desktop: lista em duas colunas de cinco itens (fluxo por coluna). */
@media(min-width:1101px){
  .cob-card ul{display:grid;grid-auto-flow:column;grid-template-rows:repeat(5,auto);column-gap:28px}
  .cob-card ul li:nth-child(5){border-bottom:0}
}

/* ---------- Dobra 9 · FAQ ---------- */
.faq{background:var(--bg);padding:clamp(56px,7vw,96px) 0}
.faq .grade{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(28px,4vw,64px);align-items:start}
.faq h2{color:var(--azul);font-size:clamp(2rem,3.6vw,2.9rem);line-height:1.05}
.faq .lado p{margin:18px 0 22px;color:var(--texto);font-size:.96rem;max-width:34ch}
.faq .faq-foto{margin-top:clamp(22px,3vw,34px);border-radius:22px;overflow:hidden;border:2px solid var(--verde-200);max-width:420px}
.faq details{background:#fff;border:1px solid var(--linha);border-radius:20px;margin-bottom:14px;padding:4px 24px;box-shadow:var(--sombra-card)}
.faq details[open]{padding-bottom:18px}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 0;font-family:var(--head);font-weight:600;color:var(--azul);font-size:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary .mais{width:24px;height:24px;flex:none;color:var(--verde);display:grid;place-items:center;transition:transform .25s}
.faq summary .mais svg{width:18px;height:18px}
.faq details[open] summary .mais{transform:rotate(180deg)}
.faq details p{color:var(--texto);font-size:.94rem;margin-bottom:10px}
.faq details p.nota{font-size:.82rem}
.faq details p a{color:var(--azul)}

/* ---------- Rodapé ---------- */
footer{background:var(--azul);color:#fff;padding:clamp(44px,5vw,64px) 0 0}
footer .grade{display:grid;grid-template-columns:1.2fr 1fr 1.4fr;gap:clamp(24px,4vw,56px)}
footer .logo img{height:52px;width:auto}
footer h4{color:var(--verde-400);font-size:1rem;margin-bottom:16px}
footer .desc{color:var(--azul-claro);font-size:.9rem;margin-top:18px;max-width:38ch}
footer ul li{margin-bottom:10px}
footer ul li a{color:var(--azul-claro);text-decoration:none;font-size:.95rem}
footer ul li a:hover{color:#fff;text-decoration:underline}
footer .sede p{color:var(--azul-claro);font-size:.92rem;margin-bottom:12px}
footer .sede a{color:#fff}
footer .social{display:flex;gap:12px;margin-top:22px}
footer .social a{width:38px;height:38px;border-radius:99px;display:grid;place-items:center;color:var(--verde-400);background:rgba(255,255,255,.06)}
footer .social a:hover{background:rgba(255,255,255,.14);color:#fff}
footer .social svg{width:20px;height:20px;fill:currentColor}
footer .base{margin-top:clamp(28px,4vw,48px);border-top:1px solid rgba(255,255,255,.16);padding:20px 0;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.82rem;color:var(--azul-claro)}

/* WhatsApp flutuante */

/* Barra fixa do celular */
/* Botão flutuante do WhatsApp: leva ao formulário de cotação (o envio do formulário é que
   abre o WhatsApp com os dados preenchidos); aparece depois do hero (site.js). */
.wa-float{position:fixed;right:18px;bottom:18px;z-index:60;width:56px;height:56px;border-radius:99px;background:#25d366;color:#fff;display:grid;place-items:center;box-shadow:0 14px 30px rgba(0,0,0,.22);transition:opacity .25s,visibility .25s}
.wa-float svg{width:30px;height:30px;fill:currentColor}
/* Barra fixa do celular: o botão de cotação tem 56px de altura, a mesma do WhatsApp, e os dois
   ficam na mesma linha — padding de 12px em cima/embaixo na barra e `bottom:12px` no WhatsApp
   (no breakpoint da barra); o padding-right reserva 56px + 14px + 14px para o WhatsApp. */
.barra-mobile{position:fixed;left:0;right:0;bottom:0;z-index:55;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-top:1px solid var(--linha);padding:12px 84px 12px 14px;display:none;transform:translateY(100%);transition:transform .25s}
.barra-mobile.vis{transform:none}
.barra-mobile .btn{width:100%;height:56px;padding-top:0;padding-bottom:0}

/* Revelação suave */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.reveal.vis{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ---------- Páginas internas (quem somos, contato) ---------- */
.pagina{background:var(--bg);padding:clamp(48px,6vw,84px) 0}
.pagina .cab{max-width:720px}
.pagina h1{color:var(--azul);font-size:clamp(2rem,4vw,3rem);line-height:1.08}
.pagina .cab p{margin-top:16px;color:var(--texto)}
.topo-interno{background:var(--azul);background-image:linear-gradient(115deg,#000856 0%,#05309b 60%,#1f4fd1 100%)}
.topo-interno .wrap{position:relative}
.topo-interno .topo{border-bottom:0}
.qs-hist{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:clamp(28px,4vw,44px)}
.qs-hist article{background:#fff;border:1px solid var(--linha);border-radius:24px;padding:26px;box-shadow:var(--sombra-card)}
.qs-hist h3{color:var(--azul);font-size:1.05rem;margin-bottom:10px}
.qs-hist p{font-size:.94rem}
.abas{display:flex;gap:10px;flex-wrap:wrap;margin:clamp(28px,4vw,44px) 0 20px}
.abas button{border:1px solid var(--linha);background:#fff;color:var(--azul);font-family:var(--head);font-weight:600;font-size:.92rem;padding:12px 22px;border-radius:999px;cursor:pointer}
.abas button[aria-selected="true"]{background:var(--verde);border-color:var(--verde);color:var(--azul-950)}
.pagina .painel{display:none;background:#fff;border:1px solid var(--linha);border-radius:24px;padding:clamp(22px,3vw,34px);box-shadow:var(--sombra-card)}
.pagina .painel[data-ativo]{display:block}
.pagina .painel h3{color:var(--azul);margin-bottom:12px}
.pagina .painel p+p{margin-top:12px}
/* Texto longo em cartão único (política de privacidade) */
.pagina .politica{max-width:880px;margin-top:clamp(28px,4vw,44px)}
.pagina .politica * + h3{margin-top:30px}
.pagina .politica ul{margin:12px 0 0 1.25em;list-style:disc}
.pagina .politica li+li{margin-top:6px}
.pagina .politica ul+p{margin-top:12px}
.pagina .politica a{color:var(--azul)}
.pagina .politica p,.pagina .politica li{text-align:justify;-webkit-hyphens:auto;hyphens:auto}
.pagina .politica h2{color:var(--titulo);font-size:1.05rem;line-height:1.4;margin-bottom:14px}
/* Páginas legais (30/09/2026): documentos para baixar, Código de Ética e Canal de Denúncia */
.doc-baixar{display:flex;align-items:center;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;background:var(--branco);border:1px solid var(--linha);border-radius:24px;padding:18px 22px;box-shadow:var(--sombra-card);margin-top:clamp(20px,3vw,28px);max-width:880px}
.doc-baixar .info{display:flex;align-items:center;gap:14px;min-width:0}
.doc-baixar .ico,.doc-card .ico{flex:none;display:grid;place-items:center;background:var(--verde-50);color:var(--azul)}
.doc-baixar .ico{width:48px;height:48px;border-radius:14px}
.doc-baixar .ico svg{width:24px;height:24px}
.doc-baixar b{display:block;color:var(--titulo);font-family:var(--head);font-size:1rem;line-height:1.3}
.doc-meta{display:block;color:var(--cinza);font:500 .84rem/1.4 var(--ui);margin-top:2px}
.selo-doc{display:inline-block;background:var(--verde-100);color:var(--azul);font:700 .74rem/1 var(--ui);letter-spacing:.04em;text-transform:uppercase;border-radius:999px;padding:7px 12px;margin-top:14px}
.docs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:clamp(28px,4vw,44px)}
.doc-card{display:flex;flex-direction:column;background:var(--branco);border:1px solid var(--linha);border-radius:24px;padding:26px;box-shadow:var(--sombra-card)}
.doc-card .ico{width:52px;height:52px;border-radius:16px;margin-bottom:16px}
.doc-card .ico svg{width:26px;height:26px}
.doc-card h3{color:var(--azul);font-size:1.08rem;margin-bottom:8px}
.doc-card p{font-size:.93rem;flex:1}
.doc-card .doc-meta{margin:16px 0}
.doc-card .btn{align-self:flex-start}
.nota{max-width:880px;margin-top:24px;color:var(--texto);font-size:.93rem}
.nota a{color:var(--azul)}
.canal{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:clamp(28px,4vw,44px)}
.canal article{background:var(--branco);border:1px solid var(--linha);border-radius:24px;padding:26px;box-shadow:var(--sombra-card)}
.canal h2{color:var(--azul);font-size:1.15rem;margin-bottom:12px}
.canal ul{list-style:none;display:grid;gap:10px}
.canal li{display:flex;gap:10px;align-items:flex-start;font-size:.94rem}
.canal li svg{flex:none;width:20px;height:20px;color:var(--verde);margin-top:2px}
.canal p+p{margin-top:12px}
.canal a{color:var(--azul)}
.canal .como{grid-column:1/-1;border:2px solid var(--verde)}
.canal .largo{grid-column:1/-1}
.canal .largo .etapas{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
/* e-mail numa linha só (30/09/2026): o texto mede ~19,7em em Poppins 700; a fonte acompanha a largura do cartão (viewport menos gutter, padding, borda, ícone e gap = 116px) e para em 1.05rem no desktop */
.canal-email{display:inline-flex;align-items:center;gap:10px;max-width:100%;margin:14px 0 4px;color:var(--azul);font:700 clamp(.6rem,calc((100vw - 116px) / 20),1.05rem)/1.3 var(--head);white-space:nowrap}
.canal-email svg{flex:none;width:22px;height:22px;color:var(--verde)}
.canal-email + p{margin-top:12px}
.etapas{list-style:none;counter-reset:etapa;display:grid;gap:14px}
.etapas li{counter-increment:etapa;display:grid;grid-template-columns:36px 1fr;gap:12px;align-items:start}
.etapas li::before{content:counter(etapa);width:36px;height:36px;border-radius:50%;background:var(--azul);color:var(--branco);display:grid;place-items:center;font:700 .95rem/1 var(--head)}
.etapas b{display:block;color:var(--titulo);font-family:var(--head)}
.contato{display:grid;grid-template-columns:1fr minmax(320px,420px);gap:clamp(24px,4vw,48px);align-items:start;margin-top:clamp(28px,4vw,44px)}
.contato .dados p{margin-bottom:14px;color:var(--texto)}
.contato .dados b{display:block;color:var(--azul);font-family:var(--head)}
.form-card{background:#fff;border:1px solid var(--linha);border-radius:var(--r-lg);padding:clamp(22px,3vw,30px);box-shadow:var(--sombra-card)}
.form-card h2{font-size:1.2rem;margin-bottom:16px}
.form-card textarea{min-height:120px;resize:vertical}

/* ---------- Responsivo · 1100 / 860 / 640 ---------- */
@media(max-width:1100px){
  /* coluna única em minmax(0,1fr), não 1fr (E1, 25/09/2026): nenhum conteúdo da coluna
     (a linha de preços pedia 310px) pode alargar o formulário no celular */
  .hero-grade{grid-template-columns:minmax(0,1fr);gap:28px}
  .passos{grid-template-columns:repeat(2,1fr)}
  .passo{margin-top:26px}
  .hero h1{max-width:20ch}
  .hero-foto{max-width:560px}
  .form-wrap{max-width:520px}
  .motivos .grade{grid-template-columns:1fr;gap:32px}
  /* no celular título e símbolo ficam centralizados (pedido de 17/09/2026) */
  .motivos .col-titulo{text-align:center}
  .motivos h2{margin-inline:auto}
  .motivos .simbolo{margin-inline:auto}
  .motivos .simbolo img{width:150px;display:block}
  .cobertura .grade{grid-template-columns:1fr}
  .onde .grade{grid-template-columns:minmax(0,1fr);gap:0} /* coluna única: a foto encosta no cartão do formulário, como no quadro mobile */
  .faq .grade{grid-template-columns:1fr}
  .faq .faq-foto{max-width:100%}
  footer .grade{grid-template-columns:1fr 1fr}
  .docs{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:860px){
  .topo .acoes{display:none}
  .burger{display:flex;margin-left:auto}
  .numeros .grade{grid-template-columns:repeat(3,1fr);gap:36px 16px}
  .bento{grid-template-columns:1fr}
  .mot-completa{grid-row:auto}
  .parceiro{grid-template-columns:1fr;text-align:center;justify-items:center;gap:14px}
  .qs-hist{grid-template-columns:1fr}
  .contato{grid-template-columns:1fr}
  .docs,.canal,.canal .largo .etapas{grid-template-columns:minmax(0,1fr)}
  .barra-mobile{display:block}
  .wa-float{right:14px;bottom:12px}
  body{padding-bottom:0}
}
@media(max-width:640px){
  .wrap{padding:0 16px}
  .passos{grid-template-columns:1fr}
  .hero{padding-top:14px}
  .cartao-hero{border-radius:28px;padding:0 16px 22px}
  .topo .logo img{height:36px}
  .hero h1{font-size:1.9rem}
  .hero h1 em{font-size:2.3rem}
  /* preços (E1, 25/09/2026): cabem numa linha em 360; abaixo de ~356px quebram em duas, centradas */
  .precos{gap:12px 10px;justify-content:center;flex-wrap:wrap}
  .precos .valor{padding:6px 12px 6px 6px}
  .precos .valor b{font-size:1.4rem}
  .par{grid-template-columns:1fr;row-gap:0} /* empilhado, o ritmo é só a margem do .campo (14px) */
  .numeros .grade{grid-template-columns:1fr;gap:34px}
  .planos .grade{grid-template-columns:1fr;max-width:420px}
  .trilho{grid-auto-columns:minmax(min(84vw,320px),1fr);scroll-padding-inline:16px;padding:12px 16px 26px;margin:-12px -16px -26px}
  .onde .cartao{border-radius:28px;padding:22px 16px}
  .cob-card{border-radius:28px}
  .aderir .painel{border-radius:28px}
  footer .grade{grid-template-columns:1fr}
  .doc-baixar{padding:16px}
  .doc-baixar .btn{width:100%}
  .doc-card,.canal article{padding:22px}
  footer .base{justify-content:center;text-align:center}
  .campo input,.campo select,.campo textarea{font-size:16px}
}
@media(pointer:coarse){
  .btn{min-height:48px}
  .dep-seta{width:44px;height:44px}
  .aviso-x{width:44px;height:44px}
}