/* =====================================================================
   PuriClean — folha única, escrita MOBILE-FIRST.
   O padrão é o celular. Cada @media(min-width) só acrescenta.
   Tokens da marca: ver identidade/design-guide.md
   Marinho estrutura · azul-claro destaca · verde só em selo e prova.
   ===================================================================== */
:root{
  --marinho:#0F2D52; --azul:#2D9CDB; --verde:#00A676;
  /* o cinza do manual é #F5F7FA; escurecido um passo para a alternância
     entre seções aparecer de verdade no celular */
  --branco:#fff; --cinza:#EDF3F9; --azul-lav:#F1F8FD;
  --texto:#1F2937; --texto2:#6B7280; --borda:#E5E7EB; --erro:#d95757;
  --sombra:0 12px 30px rgba(15,45,82,.08);
  --sombra-alta:0 20px 50px rgba(15,45,82,.14);
  --r:20px;
  --limite:1180px;
  --topo:64px;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--topo) + 12px);-webkit-text-size-adjust:100%}
body{font-family:Inter,system-ui,sans-serif;color:var(--texto);background:var(--branco);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
  /* `clip` em vez de `hidden`: corta o transbordo lateral sem transformar
     o body num container de rolagem próprio — é isso que deixa a rolagem
     suave e o `position:sticky` do palco conviverem. A linha `hidden`
     fica antes como reserva para navegador antigo. */
  overflow-x:hidden;overflow-x:clip}
h1,h2,h3,h4,.fonte-titulo{font-family:Manrope,system-ui,sans-serif;letter-spacing:-.02em;line-height:1.15}
img{max-width:100%;display:block}
a{color:inherit}
button,input,select,textarea{font:inherit}
.limite{max-width:var(--limite);margin:0 auto;padding:0 20px}
.secao{padding:60px 0}
.secao.cinza{background:var(--cinza)}

/* =====================================================================
   Superfície escura — o marinho da marca virando fundo.
   Em vez de reescrever cada regra filha, os tokens locais são
   redefinidos aqui: quem usa var(--marinho) num título passa a receber
   branco, quem usa var(--texto2) recebe o azul claro de apoio.

   Vale pra seção inteira (`.secao.escura`) e pra um cartão solto dentro
   de uma seção clara — é por isso que o seletor é só `.escura`.
   ===================================================================== */
.escura{
  background:#0F2D52;
  --marinho:#FFFFFF;
  --texto:#E9F0F8;
  --texto2:#A8C4DF;
  --borda:rgba(255,255,255,.16);
  --cinza:rgba(255,255,255,.07);
  --azul-lav:rgba(45,156,219,.16);
  --sombra:0 12px 30px rgba(0,0,0,.22);
  --sombra-alta:0 20px 50px rgba(0,0,0,.32);
  color:var(--texto);
}
.escura .olho{color:#63B8EA}
/* o passo ativo é branco no claro; no escuro vira vidro, senão some o título */
.escura .passo.ativo{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.2)}
.escura .passo::before{color:#63B8EA;opacity:.42}
.escura .passo.ativo::before{opacity:1}

/* ---------- chamada final ----------
   Ela era uma seção escura inteira, e o marinho dela é exatamente o do
   rodapé (#0F2D52): os dois colavam num bloco só e o fechamento
   desaparecia dentro do rodapé.

   Agora é um CARTÃO sobre fundo claro. A faixa branca embaixo é o que
   separa do rodapé — e a de cima separa da seção cinza do formulário.
   O raio é um passo acima do `--r` dos outros cartões porque este é
   maior e um canto pequeno numa caixa grande parece reto. */
.fechar-card{background:#0F2D52;border-radius:calc(var(--r) + 6px);
  padding:42px 22px;text-align:center;box-shadow:var(--sombra-alta)}
.fechar-card .sub{margin-inline:auto;margin-bottom:28px}
@media(min-width:700px){ .fechar-card{padding:56px 40px} }
.olho{font-size:12.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--azul);margin-bottom:10px}
h2{font-size:clamp(26px,6vw,40px);font-weight:800;color:var(--marinho);margin-bottom:12px}
.sub{color:var(--texto2);font-size:16px;max-width:62ch;margin-bottom:32px}

/* ---------- botões ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:15px 24px;border-radius:999px;font-family:Manrope,sans-serif;font-weight:700;font-size:16px;
  border:none;cursor:pointer;text-decoration:none;transition:.18s;white-space:nowrap;
  min-height:52px;-webkit-tap-highlight-color:transparent}
.btn svg{width:20px;height:20px;flex-shrink:0}
.btn-primario{background:var(--marinho);color:#fff}
.btn-primario:hover{background:#0b2440}
.btn-zap{background:var(--verde);color:#fff}
.btn-zap:hover{background:#00915f}
.btn-linha{background:transparent;color:var(--marinho);border:2px solid var(--borda)}
.btn-linha:hover{border-color:var(--azul);color:var(--azul)}
.btn-bloco{width:100%}
.btn:focus-visible{outline:3px solid var(--azul);outline-offset:2px}

/* ---------- cabeçalho ---------- */
header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.95);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--borda)}
.barra{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 20px;
  max-width:var(--limite);margin:0 auto;min-height:var(--topo)}
.marca{display:flex;align-items:center;gap:9px;text-decoration:none;flex-shrink:0;min-width:0;
  min-height:44px}   /* alvo de toque: o logo e o caminho de volta pro topo */
.marca-p{width:36px;height:36px;object-fit:contain;flex-shrink:0}
.marca-nome{width:auto;height:26px;object-fit:contain}
.barra-fim{display:flex;align-items:center;gap:6px;flex-shrink:0}
.btn-conta{display:flex;align-items:center;justify-content:center;width:44px;height:44px;
  color:var(--marinho);text-decoration:none;flex-shrink:0;-webkit-tap-highlight-color:transparent}
/* o contorno de foco fica: sem ele, quem navega por teclado perde o botão */
.btn-conta:focus-visible{outline:2px solid var(--azul);outline-offset:2px;border-radius:10px}
.btn-conta svg{width:22px;height:22px}
.menu-btn{display:flex;align-items:center;justify-content:center;background:none;border:none;
  cursor:pointer;padding:9px;color:var(--marinho)}
.menu-btn svg{width:26px;height:26px}
nav{display:none}
nav.aberto{display:flex;position:absolute;top:100%;left:0;right:0;background:#fff;
  flex-direction:column;align-items:stretch;gap:0;padding:6px 20px 18px;
  border-bottom:1px solid var(--borda);box-shadow:var(--sombra);
  max-height:calc(100vh - var(--topo));overflow-y:auto}
nav a{text-decoration:none;font-size:16px;font-weight:500;color:var(--texto2);transition:.15s}
nav.aberto a:not(.btn){padding:14px 2px;border-bottom:1px solid var(--borda)}
nav.aberto a:not(.btn).ativo{color:var(--marinho);font-weight:700}
nav.aberto .btn{margin-top:14px}

/* ---------- hero ---------- */
.hero{background:linear-gradient(165deg,#F5F9FE 0%,#fff 60%);padding:44px 0 56px;overflow:hidden}
.hero-grid{display:grid;gap:34px}
.hero h1{font-size:clamp(30px,8vw,54px);font-weight:800;color:var(--marinho);margin-bottom:16px}
.hero h1 em{font-style:normal;color:var(--azul)}
.hero p.lead{font-size:17px;color:var(--texto2);margin-bottom:26px;max-width:54ch}
.hero-acoes{display:flex;flex-direction:column;gap:11px}
/* "Solicitar orçamento pelo WhatsApp" não cabe numa linha de celular. O
   .btn é nowrap por padrão, o que empurraria a página inteira pro lado;
   aqui o rótulo quebra em duas linhas e o botão cresce. A partir de
   560px o texto cabe e o nowrap de sempre volta a valer. */
.hero-acoes .btn{white-space:normal;text-align:center}
.selos{display:flex;flex-direction:column;gap:13px}
.selo{display:flex;align-items:center;gap:9px;font-size:14.5px;font-weight:600;color:var(--marinho)}
.selo svg{width:19px;height:19px;color:var(--verde);flex-shrink:0}
.hero-arte{position:relative}
.hero-arte>img{width:100%;border-radius:var(--r);box-shadow:var(--sombra-alta)}
.hero-vazio{aspect-ratio:4/3;border-radius:var(--r);background:var(--cinza);
  border:2px dashed var(--borda);display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:10px;text-align:center;padding:26px;color:var(--texto2)}
.hero-vazio svg{width:40px;height:40px;color:var(--azul);opacity:.55}
.hero-vazio b{font-family:Manrope,sans-serif;color:var(--marinho);font-size:15px}
.hero-vazio small{font-size:12.5px;max-width:34ch}
.flutua{position:absolute;background:#fff;border-radius:15px;box-shadow:var(--sombra-alta);
  padding:11px 14px;display:flex;align-items:center;gap:10px;bottom:-14px;left:8px}
.flutua svg{width:23px;height:23px;color:var(--verde);flex-shrink:0}
.flutua b{font-family:Manrope,sans-serif;font-size:14px;color:var(--marinho);display:block;line-height:1.2}
.flutua small{font-size:11.5px;color:var(--texto2)}

/* ---------- benefícios ---------- */
.beneficios{display:grid;gap:16px;grid-template-columns:1fr}
/* o slot faz a entrada, o cartão faz o hover — separados, senão um
   transform anula o outro */
.ben-slot{opacity:0;transform:translateY(20px);
  transition:opacity .5s ease,transform .6s cubic-bezier(.22,1,.36,1);
  transition-delay:var(--atraso,0ms)}
.ben-slot.visivel{opacity:1;transform:none}
.beneficio{position:relative;height:100%;background:#fff;border-radius:var(--r);text-align:center;
  padding:28px 22px 24px;border:1px solid var(--borda);box-shadow:var(--sombra);overflow:hidden;
  transition:transform .3s cubic-bezier(.34,1.2,.5,1),box-shadow .3s,border-color .3s}
.beneficio::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--azul),var(--verde));
  transform:scaleX(0);transform-origin:left;transition:transform .7s cubic-bezier(.22,1,.36,1) .18s}
.ben-slot.visivel .beneficio::before{transform:scaleX(1)}
.beneficio:active{transform:scale(.985)}
.ben-arte{position:relative;width:92px;height:92px;margin:0 auto 16px;
  display:flex;align-items:center;justify-content:center}
.ben-halo{position:absolute;inset:-8px;border-radius:50%;
  background:radial-gradient(circle at 50% 42%,#E4F0FA 0%,#F2F8FD 56%,rgba(242,248,253,0) 72%);
  transform:scale(.6);opacity:0;
  transition:transform .6s cubic-bezier(.34,1.35,.5,1) .12s,opacity .5s ease .12s}
.ben-slot.visivel .ben-halo{transform:scale(1);opacity:1}
.ben-fig{position:relative;width:78px;height:78px;object-fit:contain;
  transform:translate3d(var(--tx,0),var(--ty,0),0) scale(var(--z,1));
  transition:transform .35s cubic-bezier(.34,1.3,.5,1)}
.beneficio h3{font-size:19px;font-weight:700;color:var(--marinho);margin-bottom:9px}
.beneficio p{font-size:15px;color:var(--texto2);margin-bottom:16px}
.ben-selo{display:flex;align-items:flex-start;justify-content:center;gap:8px;padding-top:14px;
  border-top:1px solid var(--borda);font-size:13.5px;font-weight:600;
  color:var(--verde);line-height:1.35;text-align:left}
.ben-selo svg{width:14px;height:14px;flex-shrink:0;margin-top:2px}

/* ---------- processo ----------
   Um passo por vez fica em destaque, trocando sozinho. O resto não some:
   fica só mais leve, para a sequência continuar legível de uma olhada. */
.passos{counter-reset:p;display:grid;grid-template-columns:1fr;gap:8px}
.passo{position:relative;padding:14px 16px 15px 62px;border-radius:16px;cursor:default;
  border:1px solid transparent;overflow:hidden;
  transition:background .45s ease,box-shadow .45s ease,border-color .45s ease}
.passo::before{counter-increment:p;content:counter(p,decimal-leading-zero);
  position:absolute;top:13px;left:16px;font-family:Manrope,sans-serif;font-weight:800;
  font-size:30px;line-height:1;color:var(--azul);opacity:.3;transform-origin:left top;
  transition:opacity .45s ease,transform .45s cubic-bezier(.34,1.3,.5,1)}
.passo h4{font-size:16.5px;font-weight:700;color:var(--marinho);margin-bottom:5px}
.passo p{font-size:14.5px;color:var(--texto2);transition:color .45s ease}
.passo.ativo{background:#fff;border-color:var(--borda);box-shadow:var(--sombra)}
.passo.ativo::before{opacity:1;transform:scale(1.08)}
.passo.ativo p{color:var(--texto)}
/* barra que enche em 5s: mostra o ritmo sem precisar explicar */
.passo::after{content:'';position:absolute;left:0;bottom:0;height:3px;width:100%;
  background:linear-gradient(90deg,var(--azul),var(--verde));
  transform:scaleX(0);transform-origin:left}
.passo.ativo::after{animation:passoBarra 5s linear forwards}
.passos.pausado .passo.ativo::after{animation-play-state:paused}
@keyframes passoBarra{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---------- antes e depois ---------- */
.provas{display:grid;grid-template-columns:1fr;gap:22px}
.prova{border-radius:var(--r);overflow:hidden;box-shadow:var(--sombra);background:#fff;
  border:1px solid var(--borda)}
.comparador{position:relative;aspect-ratio:4/3;overflow:hidden;cursor:ew-resize;
  user-select:none;touch-action:none;background:var(--cinza)}
.comparador img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.comparador .depois{clip-path:inset(0 0 0 var(--x,50%))}
.comparador .puxador{position:absolute;top:0;bottom:0;left:var(--x,50%);width:3px;
  background:#fff;box-shadow:0 0 0 1px rgba(15,45,82,.18);pointer-events:none}
.comparador .puxador::after{content:'';position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:#fff;
  box-shadow:var(--sombra-alta)}
.comparador .puxador::before{content:'';position:absolute;top:50%;left:50%;z-index:2;
  transform:translate(-50%,-50%);width:20px;height:12px;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 14' fill='%230F2D52'%3E%3Cpath d='M6 0 0 7l6 7zM18 0l6 7-6 7z'/%3E%3C/svg%3E")}
.tag-ad{position:absolute;top:12px;padding:5px 12px;border-radius:999px;
  font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;z-index:3}
.tag-ad.a{left:12px;background:rgba(15,45,82,.86);color:#fff}
.tag-ad.d{right:12px;background:var(--verde);color:#fff}
.prova figcaption{padding:16px 18px;font-size:14.5px;color:var(--texto2)}
.prova figcaption b{color:var(--marinho);display:block;font-family:Manrope,sans-serif;font-size:15.5px;margin-bottom:2px}
.provas-vazio{grid-column:1/-1;border:2px dashed var(--borda);border-radius:var(--r);
  padding:44px 22px;text-align:center;background:#fff}
.provas-vazio svg{width:46px;height:46px;color:var(--azul);opacity:.5;margin:0 auto 14px}
.provas-vazio b{display:block;font-family:Manrope,sans-serif;font-size:18px;color:var(--marinho);margin-bottom:8px}
.provas-vazio p{color:var(--texto2);max-width:52ch;margin:0 auto;font-size:15px}

/* ---------- serviços por grupo ---------- */
.grupos{display:grid;gap:16px;grid-template-columns:1fr;align-items:start}
.gr-slot{opacity:0;transform:translateY(20px);
  transition:opacity .5s ease,transform .6s cubic-bezier(.22,1,.36,1);
  transition-delay:var(--atraso,0ms)}
.gr-slot.visivel{opacity:1;transform:none}
.grupo{position:relative;background:#fff;border-radius:var(--r);text-align:center;
  padding:26px 20px 20px;border:1px solid var(--borda);box-shadow:var(--sombra);
  transition:box-shadow .3s,border-color .3s,transform .3s cubic-bezier(.34,1.2,.5,1)}
.grupo.aberto{border-color:#CFE3F6;box-shadow:var(--sombra-alta)}
.gr-arte{position:relative;width:88px;height:88px;margin:0 auto 14px;
  display:flex;align-items:center;justify-content:center}
.gr-halo{position:absolute;inset:-8px;border-radius:50%;
  background:radial-gradient(circle at 50% 42%,#E4F0FA 0%,#F2F8FD 56%,rgba(242,248,253,0) 72%);
  transform:scale(.6);opacity:0;
  transition:transform .6s cubic-bezier(.34,1.35,.5,1) .12s,opacity .5s ease .12s}
.gr-slot.visivel .gr-halo{transform:scale(1);opacity:1}
.gr-fig{position:relative;width:74px;height:74px;object-fit:contain;
  transform:scale(var(--z,1));transition:transform .35s cubic-bezier(.34,1.3,.5,1)}
/* Alturas fixas para os quatro cartões baterem linha a linha, mesmo com
   título de duas linhas ou preço sem unidade. São 2 linhas de título,
   2 de resumo e o bloco de preço já contando a linha da unidade. */
.grupo h3{font-size:18px;font-weight:800;color:var(--marinho);margin-bottom:5px;
  line-height:1.2;min-height:43px;display:flex;align-items:center;justify-content:center}
.gr-sub{font-size:13.5px;line-height:1.45;color:var(--texto2);margin-bottom:14px;min-height:39px;
  display:flex;align-items:center;justify-content:center}
.gr-preco{font-size:13px;color:var(--texto2);margin-bottom:18px;min-height:72px}
.gr-preco b{display:block;font-family:Manrope,sans-serif;font-weight:800;font-size:26px;
  color:var(--azul);letter-spacing:-.02em;line-height:1.3}
.gr-preco small{display:block;font-size:12px;line-height:1.4}
.gr-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  padding:12px 14px;min-height:48px;border-radius:14px;border:2px solid var(--borda);
  background:#fff;cursor:pointer;font-family:Manrope,sans-serif;font-weight:700;font-size:14px;
  color:var(--marinho);transition:.18s;-webkit-tap-highlight-color:transparent}
.gr-btn:hover{border-color:var(--azul);color:var(--azul)}
.gr-btn:focus-visible{outline:none;border-color:var(--azul);box-shadow:0 0 0 4px rgba(45,156,219,.18)}
.gr-btn svg{width:15px;height:15px;flex-shrink:0;transition:transform .35s cubic-bezier(.22,1,.36,1)}
.grupo.aberto .gr-btn{border-color:var(--azul);background:var(--azul-lav);color:var(--marinho)}
.grupo.aberto .gr-btn svg{transform:rotate(180deg)}
/* categoria com uma peça só não tem tabela pra abrir: o botão vira o
   próprio pedido. Mesma caixa do .gr-btn pra fileira continuar alinhada,
   com o verde do WhatsApp só no ícone e no hover */
.gr-cta{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  padding:12px 14px;min-height:48px;border-radius:14px;border:2px solid var(--borda);
  background:#fff;font-family:Manrope,sans-serif;font-weight:700;font-size:14px;
  color:var(--marinho);text-decoration:none;transition:.18s;-webkit-tap-highlight-color:transparent}
.gr-cta svg{width:17px;height:17px;flex-shrink:0;color:var(--verde)}
.gr-cta:hover{border-color:var(--verde);color:var(--verde)}
.gr-cta:focus-visible{outline:none;border-color:var(--verde);box-shadow:0 0 0 4px rgba(0,166,118,.18)}
/* 0fr → 1fr anima altura automática sem precisar medir nada em JS */
.gr-painel{display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .4s cubic-bezier(.22,1,.36,1)}
.grupo.aberto .gr-painel{grid-template-rows:1fr}
.gr-painel-in{overflow:hidden;min-height:0}
.gr-lista{text-align:left;padding-top:16px}
.gr-dica{font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--azul);margin-bottom:6px;
  opacity:0;transform:translateY(6px);transition:opacity .3s ease,transform .3s ease}
.grupo.aberto .gr-dica{opacity:1;transform:none;transition-delay:60ms}
.gr-linha{display:flex;align-items:center;gap:10px;margin:0 -10px;
  padding:11px 10px;border-bottom:1px solid var(--borda);border-radius:10px;
  opacity:0;transform:translateY(6px);
  transition:opacity .3s ease,transform .3s ease,background .18s ease}
.grupo.aberto .gr-linha{opacity:1;transform:none;transition-delay:calc(var(--i,0)*55ms + 80ms)}
a.gr-linha{text-decoration:none;color:inherit;-webkit-tap-highlight-color:transparent}
a.gr-linha:hover{background:var(--azul-lav)}
a.gr-linha:active{background:#E4F0FA}
a.gr-linha:focus-visible{outline:none;background:var(--azul-lav);box-shadow:0 0 0 3px rgba(45,156,219,.25)}
.gr-zap{width:18px;height:18px;color:var(--verde);flex-shrink:0;opacity:.5;
  transition:opacity .18s ease,transform .18s ease}
a.gr-linha:hover .gr-zap{opacity:1;transform:scale(1.12)}
.gr-linha .n{flex:1;font-size:14.5px;font-weight:600;color:var(--marinho);text-align:left}
.gr-linha .v{font-family:Manrope,sans-serif;font-weight:800;font-size:16px;
  color:var(--azul);white-space:nowrap;text-align:right}
.gr-linha .v small{display:block;font-family:Inter,sans-serif;font-weight:500;font-size:10.5px;
  color:var(--texto2);text-transform:uppercase;letter-spacing:.04em}
.gr-obs{display:flex;align-items:flex-start;gap:9px;margin-top:16px;padding:12px 13px;
  border-radius:12px;background:var(--cinza);font-size:12.5px;line-height:1.5;color:var(--texto2);
  opacity:0;transform:translateY(6px);transition:opacity .3s ease,transform .3s ease}
.grupo.aberto .gr-obs{opacity:1;transform:none;transition-delay:calc(var(--i,0)*55ms + 80ms)}
.gr-obs svg{width:15px;height:15px;color:var(--azul);flex-shrink:0;margin-top:1px}
.gr-obs b{color:var(--marinho);font-weight:700}

/* =====================================================================
   Avisos honestos — palco de rolagem
   O bloco alto (.palco) é só espaço de scroll; o conteúdo fica preso no
   topo e vai trocando conforme a página desce. Um cartão por vez abre.
   ===================================================================== */
/* o cabeçalho mora dentro do palco: assim a imagem começa na mesma linha
   do título, em vez de rolar para fora antes do bloco fixo começar */
#avisos{padding:0}
/* No celular isto é uma seção comum: os três cartões em pilha, um aberto
   por toque. Prender a tela aqui briga com a rolagem por dedo — o deslize
   tem inércia, e um movimento rápido atravessa os 250vh de corrida inteiros,
   passando pelos três avisos sem mostrar nenhum. O palco preso entra só na
   tela grande, onde a rolagem é de roda e o percurso é controlado. */
.palco{position:relative}
.palco-fixo{display:flex;align-items:center;padding:24px 0}
.palco-grid{display:grid;gap:16px;width:100%;align-items:start}
.palco-texto .olho{margin-bottom:8px}
.palco-texto h2{margin-bottom:8px}
/* sem largura própria: o texto acompanha a coluna, do mesmo tamanho dos
   cartões. Sem margem embaixo: os cartões agora são outro bloco da grade,
   e quem separa é o `gap` — margem aqui somaria com ele */
.palco-texto .sub{max-width:none;font-size:14.5px;margin-bottom:0}
/* A imagem entra DEPOIS do título e ANTES dos cartões — a ordem do HTML.
   Ela já esteve no topo, empurrando o título da seção para baixo dela, e
   a pessoa chegava na imagem sem saber do que a seção trata. Depois dos
   cartões também não serve: ela troca conforme o cartão aberto, e sairia
   da tela justamente na hora em que muda. */
.arte-avisos{position:relative;border-radius:20px;overflow:hidden;
  aspect-ratio:2.3/1;border:1px solid rgba(255,255,255,.16);
  box-shadow:0 24px 60px rgba(0,0,0,.35)}
/* tela baixa e estreita não comporta imagem + título + três cartões */
@media(max-width:979px) and (max-height:720px){.arte-avisos{display:none}}
.av-img{position:absolute;inset:0;opacity:0;transform:scale(1.05);
  transition:opacity .65s ease,transform 1s cubic-bezier(.22,1,.36,1)}
.av-img.ativo{opacity:1;transform:scale(1)}
.av-img img{width:100%;height:100%;object-fit:cover}
.av-vazio{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:12px;text-align:center;padding:26px;
  background:radial-gradient(120% 90% at 50% 0%,rgba(45,156,219,.28) 0%,rgba(15,45,82,0) 70%),
             linear-gradient(160deg,#153A66 0%,#0C2444 100%)}
.av-vazio svg{width:52px;height:52px;color:#63B8EA}
.av-vazio b{font-family:Manrope,sans-serif;font-size:16px;color:#fff}
.av-vazio small{font-size:12.5px;color:#9FBBD8;max-width:30ch}

.pilha{display:flex;flex-direction:column;gap:10px}
.cartao{position:relative;border-radius:18px;padding:15px 17px;cursor:pointer;text-align:left;
  /* o recuo do cartão fechado é enfeite de tela larga; no celular ele só
     come largura de texto. O que está aberto já se anuncia por opacidade,
     fundo, borda e o ponto verde */
  margin-right:0;opacity:.6;
  background:rgba(255,255,255,.06);
  -webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);
  box-shadow:0 10px 28px rgba(0,0,0,.2);
  transition:margin-right .55s cubic-bezier(.22,1,.36,1),opacity .4s ease,
             background .45s ease,box-shadow .45s ease,transform .45s cubic-bezier(.34,1.2,.5,1)}
.cartao.ativo{margin-right:0;opacity:1;background:rgba(255,255,255,.12);
  box-shadow:0 22px 55px rgba(0,0,0,.34)}
/* borda em gradiente: a moldura é uma camada própria, recortada por máscara */
.cartao::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:linear-gradient(145deg,rgba(255,255,255,.55),rgba(255,255,255,.06) 45%,rgba(45,156,219,.55));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;pointer-events:none;opacity:.45;transition:opacity .45s ease}
.cartao.ativo::before{opacity:1}
.cartao-topo{display:flex;align-items:center;gap:12px}
.cartao-num{font-family:Manrope,sans-serif;font-weight:800;font-size:13px;letter-spacing:.06em;
  color:#63B8EA;flex-shrink:0;transition:color .4s ease}
.cartao.ativo .cartao-num{color:var(--verde)}
.cartao h4{flex:1;font-size:16px;font-weight:700;color:#fff;line-height:1.25}
.cartao-marca{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.3);
  flex-shrink:0;transition:background .4s ease,box-shadow .4s ease}
.cartao.ativo .cartao-marca{background:var(--verde);box-shadow:0 0 0 5px rgba(0,166,118,.22)}
.cartao-corpo{display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .55s cubic-bezier(.22,1,.36,1)}
.cartao.ativo .cartao-corpo{grid-template-rows:1fr}
.cartao-corpo>div{overflow:hidden;min-height:0}
.cartao-corpo p{font-size:14.5px;color:#CDDDEE;padding-top:11px;line-height:1.55}
.cartao-selo{display:inline-flex;align-items:center;gap:7px;margin-top:12px;padding:5px 11px;
  border-radius:999px;background:rgba(0,166,118,.18);border:1px solid rgba(0,166,118,.4);
  font-size:12px;font-weight:600;color:#5FD9B0}
.cartao-selo svg{width:12px;height:12px}

/* =====================================================================
   Perguntas frequentes — intro à esquerda, lista à direita
   ===================================================================== */
.faq-grid{display:grid;gap:32px}
.faq-intro .sub{margin-bottom:22px}
.faq-lista{display:flex;flex-direction:column;gap:10px}
.faq-item{background:#fff;border:1px solid var(--borda);border-radius:16px;overflow:hidden;
  transition:border-color .3s ease,box-shadow .3s ease}
.faq-item.aberto{border-color:#CFE3F6;box-shadow:var(--sombra)}
.faq-pergunta{display:flex;align-items:center;gap:14px;width:100%;padding:16px 18px;
  background:none;border:none;cursor:pointer;text-align:left;color:var(--marinho);
  -webkit-tap-highlight-color:transparent}
.faq-pergunta:focus-visible{outline:none;background:var(--azul-lav)}
.faq-num{font-family:Manrope,sans-serif;font-weight:800;font-size:12.5px;letter-spacing:.06em;
  color:var(--azul);flex-shrink:0;transition:color .3s ease}
.faq-item.aberto .faq-num{color:var(--verde)}
.faq-texto{flex:1;font-family:Manrope,sans-serif;font-weight:700;font-size:15.5px;line-height:1.3}
.faq-icone{position:relative;width:24px;height:24px;border-radius:50%;flex-shrink:0;
  border:1.5px solid var(--borda);color:var(--azul);
  transition:transform .4s cubic-bezier(.22,1,.36,1),border-color .3s ease,background .3s ease}
.faq-icone::before,.faq-icone::after{content:'';position:absolute;left:50%;top:50%;
  background:currentColor;border-radius:2px;transition:transform .35s cubic-bezier(.22,1,.36,1)}
.faq-icone::before{width:10px;height:1.8px;transform:translate(-50%,-50%)}
.faq-icone::after{width:1.8px;height:10px;transform:translate(-50%,-50%)}
.faq-item.aberto .faq-icone{transform:rotate(90deg);border-color:var(--verde);
  background:rgba(0,166,118,.1);color:var(--verde)}
.faq-item.aberto .faq-icone::after{transform:translate(-50%,-50%) scaleY(0)}
.faq-resposta{display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .45s cubic-bezier(.22,1,.36,1)}
.faq-item.aberto .faq-resposta{grid-template-rows:1fr}
.faq-resposta>div{overflow:hidden;min-height:0}
.faq-resposta p{padding:0 18px 18px 50px;font-size:14.5px;color:var(--texto2);line-height:1.6}
.faq-resposta strong{color:var(--marinho);font-weight:600}

/* ---------- entrada genérica ao rolar ---------- */
[data-sr]{opacity:0;transform:translateY(18px);
  transition:opacity .5s ease,transform .6s cubic-bezier(.22,1,.36,1);
  transition-delay:var(--atraso,0ms)}
[data-sr].visivel{opacity:1;transform:none}

/* =====================================================================
   ROLAGEM SUAVE (Lenis) E MOVIMENTO (GSAP)
   As regras acima continuam sendo o estado inicial e o plano B. Estas
   aqui só entram em cena quando as bibliotecas carregam de verdade.
   ===================================================================== */

/* folha mínima do Lenis, embutida para não depender de mais um arquivo */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:clip}
/* iframe engole a roda do mouse e trava a rolagem no meio da página */
.lenis.lenis-smooth iframe{pointer-events:none}
/* com o Lenis no comando quem interpola é ele; o suave nativo só brigaria */
html.rolagem-suave{scroll-behavior:auto}

/* estado inicial do hero — a lista é exatamente a mesma que a linha do
   tempo de abertura anima, para não sobrar ninguém escondido */
html.abrindo .hero-texto .olho,
html.abrindo .hero h1,
html.abrindo .hero p.lead,
html.abrindo .hero-acoes .btn,
html.abrindo .hero-arte,
html.abrindo .selo{opacity:0}

/* Com o GSAP no comando, a transição do CSS precisa sair da frente: as
   duas animariam opacidade e transform ao mesmo tempo e o movimento
   ficaria arrastado, meio passo atrás do scroll. O estado inicial
   (opacity:0) continua vindo do CSS — é ele que evita o piscar. */
html.gsap-on .ben-slot,
html.gsap-on .gr-slot,
html.gsap-on [data-sr]{transition:none}
/* o halo e a barra do topo seguem sendo CSS: pseudo-elemento o GSAP não
   alcança, e a classe .visivel continua sendo o gatilho dos dois */

/* =====================================================================
   FORMULÁRIO EM ETAPAS
   ===================================================================== */
.form-caixa{background:#fff;border-radius:var(--r);box-shadow:var(--sombra-alta);
  border:1px solid var(--borda);padding:24px 18px;max-width:780px;margin:0 auto}

.progresso{margin-bottom:24px}
.prog-topo{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:9px}
.prog-conta{font-family:Manrope,sans-serif;font-weight:700;font-size:12.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--azul)}
.prog-falta{font-size:12.5px;color:var(--texto2)}
.barra-prog{height:6px;border-radius:999px;background:var(--borda);overflow:hidden}
.barra-prog i{display:block;height:100%;width:20%;border-radius:999px;
  background:linear-gradient(90deg,var(--azul),var(--verde));transition:width .35s cubic-bezier(.4,0,.2,1)}
.trilha{display:none}

.etapa{display:none}
.etapa.ativa{display:block;animation:sobe .3s ease both}
@keyframes sobe{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.etapa-titulo{font-size:20px;font-weight:800;color:var(--marinho);margin-bottom:6px;outline:none}
.etapa-dica{font-size:14.5px;color:var(--texto2);margin-bottom:20px}

/* peças — cartões com ícone e contador */
.pecas{display:grid;grid-template-columns:repeat(auto-fill,minmax(144px,1fr));gap:10px}
.peca{position:relative;display:flex;flex-direction:column;align-items:center;gap:9px;
  padding:14px 13px 13px;border:2px solid var(--borda);border-radius:16px;background:#fff;
  cursor:pointer;transition:.16s;text-align:center;min-height:112px;
  -webkit-tap-highlight-color:transparent}
.peca:hover{border-color:var(--azul)}
.peca:focus-visible{outline:none;border-color:var(--azul);box-shadow:0 0 0 4px rgba(45,156,219,.18)}
.peca-ic{width:36px;height:36px;border-radius:11px;background:var(--cinza);color:var(--azul);
  display:flex;align-items:center;justify-content:center;transition:.16s;flex-shrink:0}
.peca-ic svg{width:21px;height:21px}
/* mesma lógica do .cat-ic.fig: com a ilustração no lugar do desenho de
   linha o azulejo sai, porque a arte é colorida e não vira branca em
   cima do azul. O cartão marcado continua dito pela borda e pelo selo. */
.peca-ic.fig,.peca.on .peca-ic.fig{width:52px;height:52px;border-radius:0;background:none}
.peca-ic.fig img{width:100%;height:100%;object-fit:contain;display:block}
.peca-nome{font-size:13.5px;font-weight:600;color:var(--marinho);line-height:1.28}
.peca.on{border-color:var(--azul);background:var(--azul-lav)}
.peca.on .peca-ic{background:var(--azul);color:#fff}
.peca-check{position:absolute;top:9px;right:9px;width:20px;height:20px;border-radius:50%;
  background:var(--verde);color:#fff;display:none;align-items:center;justify-content:center}
.peca-check svg{width:12px;height:12px}
.peca.on .peca-check{display:flex}
.peca-qtd{display:none;align-items:center;gap:9px;margin-top:auto;padding-top:5px}
.peca.on .peca-qtd{display:flex}
.peca-qtd button{width:32px;height:32px;border-radius:10px;border:1.5px solid #BCD9EE;
  background:#fff;color:var(--marinho);font-size:18px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;flex-shrink:0}
.peca-qtd button:hover{border-color:var(--azul);color:var(--azul)}
.peca-qtd [data-n]{min-width:16px;text-align:center;font-weight:700;color:var(--marinho);font-size:15px}

/* categorias — as mesmas quatro da tabela de preços. Onze cartões soltos
   viram parede no celular; fechados, a etapa cabe numa tela só. */
.categorias{display:flex;flex-direction:column;gap:10px}
.categoria{border:2px solid var(--borda);border-radius:16px;background:#fff;overflow:hidden;
  transition:border-color .25s ease,box-shadow .25s ease}
.categoria.aberta{border-color:#CFE3F6;box-shadow:var(--sombra)}
.categoria.tem{border-color:var(--azul)}
.cat-cab{display:flex;align-items:center;gap:12px;width:100%;min-height:64px;padding:12px 13px;
  background:none;border:none;cursor:pointer;text-align:left;
  -webkit-tap-highlight-color:transparent}
.cat-cab:focus-visible{outline:none;background:var(--azul-lav)}
.cat-ic{width:40px;height:40px;border-radius:12px;background:var(--cinza);color:var(--azul);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:.16s}
.cat-ic svg{width:23px;height:23px}
.categoria.tem .cat-ic{background:var(--azul);color:#fff}
/* com a ilustração no lugar do desenho de linha, o azulejo sai: a arte é
   colorida e não vira branca em cima do azul. Que a categoria tem peça
   marcada continua dito pela borda azul e pelo selo verde ao lado. */
.cat-ic.fig,.categoria.tem .cat-ic.fig{width:46px;height:46px;border-radius:0;background:none}
.cat-ic.fig img{width:100%;height:100%;object-fit:contain;display:block}
.cat-txt{flex:1;min-width:0}
.cat-txt b{display:block;font-family:Manrope,sans-serif;font-weight:700;font-size:15px;
  color:var(--marinho);line-height:1.25}
.cat-txt small{display:block;margin-top:3px;font-size:12.5px;color:var(--texto2);line-height:1.3}
.cat-tag{flex-shrink:0;padding:4px 9px;border-radius:999px;background:var(--verde);color:#fff;
  font-size:11.5px;font-weight:700;line-height:1.35;white-space:nowrap}
.cat-seta{position:relative;width:22px;height:22px;flex-shrink:0;color:var(--azul)}
.cat-seta::before,.cat-seta::after{content:'';position:absolute;left:50%;top:50%;
  background:currentColor;border-radius:2px;transition:transform .35s cubic-bezier(.22,1,.36,1)}
.cat-seta::before{width:11px;height:1.8px;transform:translate(-50%,-50%)}
.cat-seta::after{width:1.8px;height:11px;transform:translate(-50%,-50%)}
.categoria.aberta .cat-seta{color:var(--verde)}
.categoria.aberta .cat-seta::after{transform:translate(-50%,-50%) scaleY(0)}
.cat-corpo{display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .4s cubic-bezier(.22,1,.36,1)}
.categoria.aberta .cat-corpo{grid-template-rows:1fr}
.cat-corpo>div{overflow:hidden;min-height:0}
/* duas colunas fixas: dentro do painel sobra pouca largura no celular,
   e o auto-fill de .pecas cairia para uma coluna só */
.cat-corpo .pecas{grid-template-columns:repeat(2,1fr);padding:2px 12px 13px}
.cat-corpo .peca{padding:12px 10px 11px;min-height:106px}
.cat-corpo .peca-qtd{gap:6px}

.contagem{margin-top:14px;font-size:14px;font-weight:600;color:var(--verde);min-height:21px}

/* opções grandes — pet e mancha */
.op-grande{display:flex;align-items:center;gap:13px;width:100%;padding:15px;border-radius:16px;
  border:2px solid var(--borda);background:#fff;cursor:pointer;text-align:left;transition:.16s;
  margin-bottom:10px;-webkit-tap-highlight-color:transparent}
.op-grande:hover{border-color:var(--azul)}
.op-grande:focus-visible{outline:none;border-color:var(--azul);box-shadow:0 0 0 4px rgba(45,156,219,.18)}
.op-ic{width:44px;height:44px;border-radius:13px;background:var(--cinza);color:var(--azul);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:.16s}
.op-ic svg{width:23px;height:23px}
.op-txt b{display:block;font-family:Manrope,sans-serif;font-size:15.5px;color:var(--marinho);line-height:1.25}
.op-txt small{font-size:13px;color:var(--texto2)}
.op-marca{margin-left:auto;width:24px;height:24px;border-radius:50%;border:2px solid var(--borda);
  flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#fff;transition:.16s}
.op-marca svg{width:13px;height:13px;opacity:0;transition:.16s}
.op-grande.on{border-color:var(--azul);background:var(--azul-lav)}
.op-grande.on .op-ic{background:var(--azul);color:#fff}
.op-grande.on .op-marca{background:var(--verde);border-color:var(--verde)}
.op-grande.on .op-marca svg{opacity:1}

/* escolha única — urgência */
.escolhas{display:grid;gap:10px}
.escolha{display:flex;align-items:center;gap:12px;padding:14px 15px;border:2px solid var(--borda);
  border-radius:14px;background:#fff;cursor:pointer;transition:.16s;text-align:left;width:100%;
  -webkit-tap-highlight-color:transparent}
.escolha:hover{border-color:var(--azul)}
.escolha:focus-visible{outline:none;border-color:var(--azul);box-shadow:0 0 0 4px rgba(45,156,219,.18)}
.escolha .bolinha{width:21px;height:21px;border-radius:50%;border:2px solid var(--borda);
  flex-shrink:0;position:relative;transition:.16s}
.escolha.on{border-color:var(--azul);background:var(--azul-lav)}
.escolha.on .bolinha{border-color:var(--azul)}
.escolha.on .bolinha::after{content:'';position:absolute;inset:3px;border-radius:50%;background:var(--azul)}
.escolha b{display:block;font-family:Manrope,sans-serif;font-size:15.5px;color:var(--marinho);line-height:1.25}
.escolha small{font-size:13px;color:var(--texto2)}

/* campos */
.campos{display:grid;grid-template-columns:1fr;gap:15px}
.campo{display:flex;flex-direction:column;gap:6px}
.campo.largo{grid-column:1/-1}
.campo label{font-size:14px;font-weight:600;color:var(--marinho)}
.campo input,.campo select,.campo textarea{padding:14px 15px;border:2px solid var(--borda);
  border-radius:12px;font-family:Inter,sans-serif;font-size:16px;color:var(--texto);background:#fff;
  transition:.15s;width:100%;min-height:52px}
.campo textarea{min-height:110px;resize:vertical}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-color:var(--azul);
  box-shadow:0 0 0 4px rgba(45,156,219,.13)}
/* campo obrigatório em falta: borda vermelha e um anel suave em volta,
   pra achar o campo de longe sem precisar ler */
.campo input.erro,.campo select.erro,.campo textarea.erro{
  border-color:var(--erro);box-shadow:0 0 0 3px rgba(217,87,87,.15)}
.campo input.erro:focus,.campo select.erro:focus,.campo textarea.erro:focus{
  border-color:var(--erro);box-shadow:0 0 0 4px rgba(217,87,87,.2)}
.msg-erro{font-size:13px;color:var(--erro);display:none;font-weight:600}
.campo input.erro~.msg-erro,.campo select.erro~.msg-erro,
.campo textarea.erro~.msg-erro{display:block}
.mel{position:absolute;left:-9999px;opacity:0;height:0;width:0;overflow:hidden}

/* ---------- janela de conta ----------
   Mobile-first: no celular ocupa a largura toda e encosta embaixo, que é
   onde o polegar alcança. Só a partir de 560px vira cartão centrado. */
.jan{position:fixed;inset:0;z-index:200;display:flex;align-items:flex-end;justify-content:center}
.jan[hidden]{display:none}
.jan-fundo{position:absolute;inset:0;background:rgba(15,45,82,.55);backdrop-filter:blur(3px)}
.jan-cartao{position:relative;width:100%;max-width:420px;background:#fff;
  border-radius:20px 20px 0 0;padding:26px 22px calc(26px + env(safe-area-inset-bottom));
  box-shadow:0 -8px 40px rgba(15,45,82,.22);max-height:92vh;overflow-y:auto;
  animation:janSobe .22s ease}
@keyframes janSobe{from{transform:translateY(18px);opacity:.6}to{transform:none;opacity:1}}
.jan-x{position:absolute;top:14px;right:14px;width:38px;height:38px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;background:transparent;border:none;
  color:var(--texto2);cursor:pointer}
.jan-x:hover{background:var(--cinza);color:var(--marinho)}
.jan-x svg{width:20px;height:20px}
.jan-cartao h2{font-family:Manrope,sans-serif;font-size:22px;color:var(--marinho);margin:0 0 4px;padding-right:40px}
.jan-sub{font-size:14.5px;color:var(--texto2);margin:0 0 18px;line-height:1.5}
.jan-cartao .campo{margin-bottom:14px}
.jan-cartao .btn-bloco{width:100%;margin-top:4px}
.jan-troca{text-align:center;font-size:14px;color:var(--texto2);margin:16px 0 0}
.jan-troca button{background:none;border:none;color:var(--azul);font-weight:700;font-size:14px;
  cursor:pointer;font-family:inherit;text-decoration:underline;padding:4px}
.jan .recado{display:none;border-radius:12px;padding:12px 14px;font-size:14px;margin-bottom:14px}
.jan .recado.ok{display:block;background:#E4F5EC;color:#046b4c}
.jan .recado.ruim{display:block;background:#FBE9EC;color:#a83b3b}
@media(min-width:560px){
  .jan{align-items:center}
  .jan-cartao{border-radius:20px;padding:28px 26px}
}

/* resumo do pedido */
.resumo{background:var(--cinza);border-radius:16px;padding:17px 18px;margin-bottom:20px}
.resumo h4{font-family:Manrope,sans-serif;font-size:12.5px;font-weight:700;color:var(--marinho);
  margin-bottom:12px;letter-spacing:.07em;text-transform:uppercase}
.resumo dl{display:grid;gap:10px;margin:0}
.resumo .item{display:flex;gap:14px;justify-content:space-between;align-items:baseline;font-size:14.5px}
.resumo dt{color:var(--texto2);flex-shrink:0}
.resumo dd{color:var(--marinho);font-weight:600;text-align:right;margin:0}

/* navegação entre etapas */
.nav-etapas{display:flex;gap:10px;margin-top:24px;padding-top:20px;border-top:1px solid var(--borda)}
.nav-etapas .cresce{flex:1;min-width:0}
.nav-etapas .btn{padding:15px 18px}
.nav-etapas .btn[disabled]{opacity:.4;cursor:not-allowed;pointer-events:none}

.form-nota{font-size:13px;color:var(--texto2);text-align:center;margin-top:14px}
.form-status{border-radius:14px;padding:15px 18px;font-size:14.5px;margin-bottom:18px;display:none}
.form-status.ok{display:block;background:#E4F5EC;color:#046b4c;border:1px solid #A8E0C8}
.form-status.ruim{display:block;background:#FBE9EC;color:#a83b3b;border:1px solid #F2C3CA}
.sucesso{text-align:center;padding:18px 0}
.sucesso svg.certo{width:60px;height:60px;color:var(--verde);margin:0 auto 16px}
.sucesso h3{font-size:23px;font-weight:800;color:var(--marinho);margin-bottom:10px}
.sucesso p{color:var(--texto2);max-width:46ch;margin:0 auto 22px;font-size:15px}

/* ---------- rodapé ---------- */
footer{background:var(--marinho);color:#B9CEE4;padding:48px 0 26px}
.rodape-grid{display:grid;grid-template-columns:1fr;gap:30px;margin-bottom:34px}
footer h5{font-family:Manrope,sans-serif;font-weight:700;font-size:15px;color:#fff;margin-bottom:14px}
/* 44px de alvo de toque, que e a regra do projeto. Estes links vem
   empilhados e encostados uns nos outros, que e exatamente a situacao em
   que o dedo erra de linha. O `margin-bottom` antigo virou parte da
   altura: o espacamento visual continua o mesmo, o que cresce e a area
   que responde ao toque. */
footer a{color:#B9CEE4;text-decoration:none;font-size:15px;display:flex;align-items:center;
  gap:9px;min-height:44px;transition:.15s}
footer a svg{width:17px;height:17px;flex-shrink:0;opacity:.85}
footer a:hover{color:#fff}
/* logotipo já é a versão negativa: nada de caixa branca por trás */
.rodape-marca img{width:172px;height:auto;margin-bottom:16px}
.rodape-marca p{font-size:14.5px;max-width:38ch}
.rodape-fim{border-top:1px solid rgba(255,255,255,.13);padding-top:20px;
  display:flex;flex-direction:column;gap:8px;font-size:13px;color:#7E9BBB}
/* o unico link do rodape-fim tambem entra na regra */
.rodape-fim a{display:inline-flex;align-items:center;min-height:44px}

/* ---------- aviso de cookies ----------
   Fica acima do botão flutuante do WhatsApp (z-index maior) e empurra
   ele pra cima enquanto está na tela, senão um cobre o outro no celular */
.cookies{position:fixed;left:0;right:0;bottom:0;z-index:90;padding:14px 16px calc(14px + env(safe-area-inset-bottom));
  background:var(--marinho);color:#fff;box-shadow:0 -10px 30px rgba(15,45,82,.22);
  display:none}
.cookies.aparece{display:block;animation:sobe .35s cubic-bezier(.22,1,.36,1)}
@keyframes sobe{from{transform:translateY(100%)}to{transform:none}}
.cookies-in{width:min(100% - 8px,var(--limite));margin-inline:auto;display:flex;
  flex-direction:column;gap:12px}
.cookies p{font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.88);margin:0}
.cookies a{color:#fff;text-decoration:underline}
.cookies-bts{display:flex;gap:8px}
.cookies-bts button{flex:1;min-height:44px;border-radius:12px;border:1.6px solid rgba(255,255,255,.3);
  background:transparent;color:#fff;font-family:Manrope,sans-serif;font-weight:700;font-size:14px;
  cursor:pointer;transition:.18s;-webkit-tap-highlight-color:transparent}
.cookies-bts button:hover{border-color:#fff}
.cookies-bts .sim{background:var(--verde);border-color:var(--verde)}
.cookies-bts .sim:hover{background:#00915f;border-color:#00915f}
body.com-cookies .zap-flutua{bottom:150px}
@media(min-width:640px){
  .cookies-in{flex-direction:row;align-items:center;gap:18px}
  .cookies p{flex:1}
  .cookies-bts{flex:0 0 auto}
  .cookies-bts button{min-width:132px}
  body.com-cookies .zap-flutua{bottom:104px}
}

/* ---------- botão flutuante ----------
   Nasce escondido: no celular quem faz esse papel é a barra fixa, e dois
   botões verdes no mesmo canto competem entre si. Volta a partir de
   700px, onde a barra sai de cena. */
.zap-flutua{position:fixed;right:16px;bottom:16px;z-index:70;width:58px;height:58px;
  border-radius:50%;background:var(--verde);color:#fff;display:none;align-items:center;
  justify-content:center;box-shadow:var(--sombra-alta);transition:.2s;text-decoration:none}
.zap-flutua:hover{transform:scale(1.07)}
.zap-flutua svg{width:31px;height:31px}

/* ---------- barra fixa do celular ----------
   A página tem nove seções. Sem uma saída sempre à mão, quem decidiu no
   meio da rolagem precisa procurar um botão — e procurar é onde se
   perde gente.

   Ela não fica no ar o tempo todo, de propósito: some sobre o hero
   (onde o botão principal já está na tela) e some sobre o formulário
   (onde taparia justamente os campos). Quem cuida disso é o JS. */
.barra-zap{position:fixed;left:0;right:0;bottom:0;z-index:75;
  display:flex;align-items:center;gap:12px;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.97);border-top:1px solid var(--borda);
  box-shadow:0 -8px 24px rgba(15,45,82,.10);
  transform:translateY(115%);transition:transform .3s cubic-bezier(.22,1,.36,1)}
@supports(backdrop-filter:blur(8px)){.barra-zap{backdrop-filter:blur(8px)}}
.barra-zap.aparece{transform:none}
.barra-txt{flex:1;min-width:0;line-height:1.25}
.barra-txt b{display:block;font-family:Manrope,sans-serif;font-weight:700;font-size:14px;color:var(--marinho)}
.barra-txt small{font-size:11.5px;color:var(--texto2)}
/* o rótulo é curto e o alvo continua com 44px de altura mínima */
.barra-zap .btn{flex:0 0 auto;padding:11px 18px;min-height:44px;font-size:14.5px}
/* enquanto a barra está no ar, o rodapé ganha espaço pra não ficar embaixo dela */
body.com-barra{padding-bottom:74px}

/* =====================================================================
   ≥ 560px — telas grandes de celular e tablets pequenos
   ===================================================================== */
@media(min-width:560px){
  .limite{padding:0 24px}
  .hero-acoes{flex-direction:row;flex-wrap:wrap;gap:12px}
  .hero-acoes .btn{white-space:nowrap}
  .selos{flex-direction:row;flex-wrap:wrap;gap:12px 22px}
  .campos{grid-template-columns:1fr 1fr}
  .form-caixa{padding:32px 26px}
  .rodape-fim{flex-direction:row;justify-content:space-between;flex-wrap:wrap;gap:16px}
  .pecas{grid-template-columns:repeat(auto-fill,minmax(158px,1fr))}
  .cat-corpo .pecas{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));padding:2px 14px 15px}
  .cat-corpo .peca{padding:14px 13px 13px;min-height:112px}
  .cat-corpo .peca-qtd{gap:9px}
  .cat-cab{padding:14px 16px}
  .cat-ic.fig,.categoria.tem .cat-ic.fig{width:54px;height:54px}
  .peca-ic.fig,.peca.on .peca-ic.fig{width:58px;height:58px}
  .cat-txt b{font-size:16px}
  .linha-svc{padding:16px 24px}
  .linha-svc .nome{font-size:16px}
}

/* =====================================================================
   ≥ 700px — tablet: menu horizontal, grades de 2 colunas
   ===================================================================== */
@media(min-width:700px){
  body{font-size:17px}
  .secao{padding:76px 0}
  .sub{font-size:17.5px;margin-bottom:40px}
  .menu-btn{display:none}
  .marca-p{width:40px;height:40px}
  .marca-nome{height:30px}
  nav,nav.aberto{display:flex;margin-left:auto;position:static;flex-direction:row;align-items:center;gap:24px;
    background:none;padding:0;border:none;box-shadow:none;max-height:none;overflow:visible}
  nav a:not(.btn){position:relative;padding:8px 0;font-size:15px;border:none}
  nav a:not(.btn)::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;
    border-radius:2px;background:var(--azul);transform:scaleX(0);transform-origin:left;
    transition:transform .22s ease}
  nav a:not(.btn):hover{color:var(--azul)}
  nav a:not(.btn).ativo{color:var(--marinho);font-weight:600}
  nav a:not(.btn).ativo::after{transform:scaleX(1)}
  nav.aberto .btn{margin-top:0}
  .beneficios{grid-template-columns:repeat(2,1fr);gap:20px}
  .grupos{grid-template-columns:repeat(2,1fr);gap:20px}
  .passos{grid-template-columns:repeat(2,1fr);gap:26px 24px}
  .avisos{grid-template-columns:1fr;gap:20px}
  .rodape-grid{grid-template-columns:1fr 1fr;gap:40px}
  .rodape-marca{grid-column:1/-1}
  .btn-primario:hover,.btn-zap:hover{transform:translateY(-2px);box-shadow:var(--sombra)}
  .form-caixa{padding:40px}
  .etapa-titulo{font-size:23px}
  .trilha{display:flex;list-style:none;gap:6px;margin-top:18px}
  .trilha li{flex:1;display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;
    color:var(--texto2);min-width:0}
  .trilha .bolha{width:25px;height:25px;border-radius:50%;background:var(--cinza);
    border:2px solid var(--borda);color:var(--texto2);display:flex;align-items:center;
    justify-content:center;font-size:12px;font-weight:700;flex-shrink:0;transition:.2s}
  .trilha .rotulo{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .trilha li.ativa{color:var(--marinho)}
  .trilha li.ativa .bolha{background:var(--azul);border-color:var(--azul);color:#fff}
  .trilha li.feita .bolha{background:var(--verde);border-color:var(--verde);color:#fff}
  /* daqui pra cima o flutuante volta e a barra sai: em tela larga ela
     roubaria uma faixa do conteúdo sem resolver problema nenhum */
  .zap-flutua{display:flex;right:20px;bottom:20px;width:60px;height:60px}
  .barra-zap{display:none}
  body.com-barra{padding-bottom:0}
}

/* =====================================================================
   ≥ 980px — desktop
   ===================================================================== */
@media(min-width:980px){
  .secao{padding:88px 0}
  .hero{padding:76px 0 88px}
  .hero-grid{grid-template-columns:1.05fr .95fr;gap:24px 56px;align-items:center}
  .hero-texto{grid-column:1;grid-row:1;align-self:end}
  .hero-arte{grid-column:2;grid-row:1/span 2;align-self:center}
  .selos{grid-column:1;grid-row:2;align-self:start}
  .hero p.lead{font-size:19px;margin-bottom:32px}
  .flutua{left:-18px;bottom:-20px;padding:14px 18px}
  .flutua svg{width:24px;height:24px}
  .flutua b{font-size:15px}
  .flutua small{font-size:12px}
  .beneficios{grid-template-columns:repeat(4,1fr);gap:22px}
  .grupos{grid-template-columns:repeat(4,1fr);gap:22px}
  .faq-grid{grid-template-columns:.85fr 1.15fr;gap:56px;align-items:start}
  .faq-intro{position:sticky;top:calc(var(--topo) + 28px)}
  .faq-texto{font-size:16.5px}
  .faq-pergunta{padding:18px 20px}
  .faq-resposta p{padding:0 20px 20px 54px;font-size:15px}
  /* aqui sim: a corrida de rolagem e a tela presa, que é o que faz um
     cartão trocar pelo outro conforme a página desce */
  .palco{height:300vh}
  .palco-fixo{position:sticky;top:var(--topo);min-height:calc(100vh - var(--topo));padding:28px 0}
  /* stretch: a imagem vai do alto do título até a base do último cartão.
     As áreas remontam as duas colunas a partir dos três blocos soltos do
     HTML — título e cartões empilhados à esquerda, imagem ocupando as
     duas linhas à direita. */
  /* 20px entre título e cartões (o que a margem do subtítulo dava antes),
     48px entre as duas colunas */
  .palco-grid{grid-template-columns:1.02fr .98fr;gap:20px 48px;align-items:stretch;
    grid-template-areas:"texto arte" "pilha arte";grid-template-rows:auto 1fr}
  .palco-texto{grid-area:texto}
  .pilha{grid-area:pilha}
  .arte-avisos{grid-area:arte}
  .palco-texto .sub{font-size:16px}
  .arte-avisos{aspect-ratio:auto;height:100%;min-height:400px;
    max-height:calc(100vh - var(--topo) - 90px)}
  .pilha{gap:14px}
  .cartao{padding:20px 22px;margin-right:46px}
  .cartao h4{font-size:18px}
  .cartao-corpo p{font-size:15px}
  .passos{grid-template-columns:repeat(4,1fr);gap:14px}
  .passo{padding:58px 18px 20px}
  .passo::before{top:18px;left:18px;font-size:34px}
  .avisos{grid-template-columns:repeat(3,1fr);gap:22px}
  .provas{grid-template-columns:repeat(2,1fr);gap:26px}
  .provas-vazio{padding:64px 32px}
  .rodape-grid{grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px}
  .rodape-marca{grid-column:auto}
  .card{padding:32px}
}

@media(hover:hover) and (pointer:fine){
  .beneficio:hover{transform:translateY(-6px);box-shadow:var(--sombra-alta);border-color:#D3E6F7}
  .beneficio:hover .ben-fig{--z:1.08}
  .ben-slot.visivel .beneficio:hover .ben-halo{transform:scale(1.1)}
  .grupo:not(.aberto):hover{transform:translateY(-5px);box-shadow:var(--sombra-alta);border-color:#D3E6F7}
  .grupo:hover .gr-fig{--z:1.07}
  .gr-slot.visivel .grupo:hover .gr-halo{transform:scale(1.1)}
}
/* Aqui existia um bloco @media(prefers-reduced-motion:reduce) que entregava
   o site inteiro estático a quem tem "movimento reduzido" ligado no sistema.
   Foi removido por decisão do dono: os efeitos rodam para todo mundo.

   No Windows esse ajuste é o "Efeitos de animação", que muita gente desliga
   só pra deixar um PC velho mais rápido — e essa parte estava perdendo as
   entradas à toa. O custo assumido é o outro lado: quem liga a opção por
   causa de enjoo (labirintite, distúrbio vestibular) recebe a rolagem suave
   e o palco fixo dos avisos do mesmo jeito.

   Se um dia quiser o meio-termo, o ponto de corte é este: fade e opacidade
   não fazem mal a ninguém; os dois que pesam são a rolagem do Lenis, que
   sequestra a roda do mouse, e o palco que prende a tela. Dava pra soltar
   as entradas e segurar esses dois. */