/* ============ MÉTODO G · ADVOCACIA — LANDING PAGE ============
   Identidade visual: consorcio.briansthefano.com (fonte de verdade do :root).
   Dark-only, zero dependência externa, zero build.
   ============================================================= */
@font-face{
  font-family:'Sora';font-style:normal;font-weight:100 900;font-display:swap;
  src:url("../fonts/sora-variable.woff2") format('woff2');
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url("../fonts/inter-variable.woff2") format('woff2');
}
:root{
  --ink:#04070F;
  --navy:#0A1322;
  --panel:#0D1830;
  --card:#101E38;
  --line:rgba(146,170,216,.14);
  --line2:rgba(146,170,216,.24);
  --txt:#EAF0FB;
  --mut:#9AABC9;
  --blue:#3E7BFF;
  --blue2:#79A5FF;
  --org:#F1712D;
  --org2:#FF925A;
  --grad:linear-gradient(90deg,#5233B8 0%,#A34A6B 48%,#F1712D 100%);
  --grad-soft:linear-gradient(135deg,rgba(82,51,184,.35),rgba(163,74,107,.25),rgba(241,113,45,.3));
  /* arte genérica (prédios) — a mesma imagem serve de fundo do hero e da
     sessão final; trocou a arte, muda só aqui */
  --hero-img:url("../images/covers/predios.jpg");
  --r:20px;
  --w:1180px;
  /* medidas reais gravadas pelo assets/js/main.js; os valores abaixo são só o
     fallback para o primeiro paint (e para o caso de o JS não rodar) */
  --topo-h:68px;
  --faixa-h:81px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  background:var(--ink);color:var(--txt);
  font-size:16.5px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
::selection{background:rgba(241,113,45,.35)}
h1,h2,h3{font-family:'Sora',sans-serif;letter-spacing:-.02em;text-wrap:balance;line-height:1.16}
.wrap{max-width:var(--w);margin:0 auto;padding:0 24px}
section{position:relative;padding:96px 0}
/* faixas em --navy recebem as duas hairlines: é o que separa os blocos */
.faixa-navy{background:var(--navy);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;max-width:100%;
  font-family:'Sora',sans-serif;font-size:.72rem;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--blue2);
  margin-bottom:18px;
}
.eyebrow::before{content:"";width:34px;height:2px;background:var(--grad);border-radius:2px;flex:none}
.h2{font-size:clamp(1.7rem,3.4vw,2.5rem);font-weight:700;max-width:21ch}
.h2 .gd,.h1 .gd{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.sub{color:var(--mut);max-width:62ch;margin-top:16px;font-size:1.05rem}
.center{text-align:center}
.center .h2,.center .sub{margin-left:auto;margin-right:auto}
.center .eyebrow{justify-content:center}

/* ---------- Botões ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  font-family:'Sora',sans-serif;font-weight:700;font-size:.92rem;letter-spacing:.02em;
  padding:18px 30px;border-radius:14px;cursor:pointer;text-align:center;
  transition:transform .25s ease,box-shadow .25s ease,background .25s ease;
}
.btn svg{flex:none}
.btn-cta{
  background:linear-gradient(135deg,#FF8A45 0%,#F1712D 55%,#D95314 100%);
  color:#12060A;
  box-shadow:0 12px 34px -10px rgba(241,113,45,.55),inset 0 1px 0 rgba(255,255,255,.35);
}
.btn-cta:hover{transform:translateY(-3px);box-shadow:0 20px 44px -12px rgba(241,113,45,.7),inset 0 1px 0 rgba(255,255,255,.35)}
.btn:active{transform:none}

/* ---------- Cabeçalho ---------- */
.topo{
  position:fixed;inset:0 0 auto 0;z-index:60;
  background:rgba(4,7,15,.66);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;transition:border-color .3s ease,background .3s ease;
}
.topo.rolou{border-color:var(--line);background:rgba(4,7,15,.86)}
.topo-in{
  max-width:var(--w);margin:0 auto;padding:14px 24px;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;
}
.marcas{grid-column:1;justify-self:start;display:flex;align-items:center;gap:14px;min-width:0}
.brand{display:flex;flex:none}
.brand img{height:34px;width:auto}
.marca-brian{height:40px;width:auto;flex:none;border-left:1px solid var(--line2);padding-left:14px}
.topo nav{grid-column:2;justify-self:center;display:flex;gap:28px}
.topo nav a{font-size:.9rem;color:var(--mut);font-weight:500;transition:color .2s}
.topo nav a:hover{color:var(--txt)}
.topo .btn{grid-column:3;justify-self:end;padding:11px 20px;font-size:.8rem;border-radius:11px}

/* ---------- Hero ----------
   A arte de fundo é genérica (prédios) e não tem lado livre: ela cobre a seção
   inteira sob um véu escuro, e o conteúdo fica centralizado por cima.

   Hero + faixa de autoridade fecham exatamente uma viewport — a seção seguinte
   só aparece depois da rolagem. min-height (e não height) de propósito: em tela
   baixa o bloco cresce em vez de cortar o conteúdo. */
.hero{
  min-height:calc(100vh - var(--faixa-h));
  min-height:calc(100dvh - var(--faixa-h));
  padding:calc(var(--topo-h) + 56px) 0 72px;
  display:flex;align-items:center;overflow:hidden;
}
.hero::before{
  content:"";position:absolute;inset:0;
  background-image:var(--hero-img);background-size:cover;background-position:center 20%;
  opacity:.42;
}
.hero::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(58% 68% at 78% 18%,rgba(62,123,255,.20),transparent 60%),
    linear-gradient(180deg,rgba(4,7,15,.55) 0%,rgba(4,7,15,.82) 55%,var(--ink) 96%);
}
.hero .wrap{position:relative;z-index:2;width:100%}
/* o bloco todo (título, apoio e CTA) fica centrado na coluna e no eixo do texto */
.hero-conteudo{
  max-width:860px;margin:0 auto;
  display:flex;flex-direction:column;align-items:center;text-align:center;
}
.hero-conteudo .lead{margin-left:auto;margin-right:auto}
.hero-conteudo .cta-row{justify-content:center}
.h1{font-size:clamp(2.15rem,4.6vw,3.55rem);font-weight:800}
.hero p.lead{color:var(--mut);font-size:1.12rem;max-width:56ch;margin:24px 0 34px}
.cta-row{display:flex;flex-wrap:wrap;gap:16px;align-items:center}

/* ---------- Faixa de autoridade (logo abaixo do hero) ----------
   Faixa rolante com a mecânica do .mq: o track anda exatamente uma cópia do
   conteúdo e reinicia — como a cópia seguinte já está no lugar da anterior, o
   corte é invisível. Ela é full-bleed (sem .wrap) e TODOS os itens mantêm a
   divisória à esquerda, inclusive o primeiro: no loop não existe "primeiro".

   QUANTAS CÓPIAS? No fim de cada volta sobram (cópias − 1) larguras de cópia
   para preencher a tela; se isso for menor que a viewport, abre um vão e a
   faixa parece "acabar". Os 4 itens medem ~1191px, então:
     2 cópias → só até 1191px de tela (abria vão em qualquer desktop)
     3 cópias → até 2382px       5 cópias → até 4764px
   Daí as 5 cópias do HTML e o -20% (= 1/5 do track) do keyframe abaixo: os
   dois números andam juntos, mexeu num, mexe no outro. */
.faixa{
  padding:26px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:linear-gradient(90deg,rgba(82,51,184,.14),rgba(163,74,107,.08) 52%,rgba(241,113,45,.13)),var(--ink);
}
/* a duração acompanha o passo: 38s para 1/5 do track dá a mesma velocidade em
   px/s que 38s davam para 1/2 do track antigo */
.mq-faixa .mq-track{animation-name:rola-faixa;animation-duration:38s}
@keyframes rola-faixa{to{transform:translateX(-20%)}}
.barra{display:flex;align-items:center;width:max-content}
.barra li{
  display:flex;align-items:center;gap:12px;flex:none;white-space:nowrap;
  padding:4px 26px;border-left:1px solid var(--line);
}
.barra svg{flex:none;color:var(--blue2)}
.barra span{
  font-family:'Sora',sans-serif;font-size:.82rem;font-weight:600;
  line-height:1.35;color:var(--mut);letter-spacing:.01em;
}
.barra em{
  font-style:normal;font-weight:800;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ---------- Grades de cards ---------- */
/* .passos entra aqui de propósito: os 4 passos do mapa usam a mesma grade dos
   4 diferenciais, e juntos formam a tabela 4×2 daquela seção */
.grid4,.passos{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:52px}
.grid6{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:52px}

/* ---------- Card de dor (problema) ---------- */
.dor{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:30px 26px;transition:transform .3s ease,border-color .3s ease;
}
.dor:hover{transform:translateY(-6px);border-color:var(--line2)}
.dor .ico,.sol .ico{
  width:48px;height:48px;border-radius:13px;display:flex;align-items:center;justify-content:center;
  background:rgba(62,123,255,.12);color:var(--blue2);margin-bottom:20px;
}
.dor h3,.sol h3{font-size:1.05rem;font-weight:700;margin-bottom:10px}
.dor p,.sol p{font-size:.92rem;color:var(--mut)}

/* ---------- Card de pilar / diferencial ---------- */
.sol{
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);padding:30px 26px;
  transition:transform .3s ease,border-color .3s ease;position:relative;overflow:hidden;
}
.sol:hover{transform:translateY(-6px);border-color:var(--line2)}
.sol::after{
  content:"";position:absolute;left:26px;right:26px;top:0;height:2px;background:var(--grad);
  opacity:0;transition:opacity .3s ease;
}
.sol:hover::after{opacity:1}
/* ---------- Metodologia: lista vertical + gráfico ---------- */
.metodo-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:20px;margin-top:52px;align-items:stretch;text-align:left;
}
.metodo-lista{display:flex;flex-direction:column;gap:14px}
.metodo-item{
  display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;align-items:center;gap:22px;
  background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:22px 24px;
  transition:transform .3s ease,border-color .3s ease;
}
.metodo-item:hover{transform:translateY(-4px);border-color:var(--line2)}
.mi-num{
  font-family:'Sora',sans-serif;font-size:.78rem;font-weight:700;color:var(--mut);
  letter-spacing:.02em;font-variant-numeric:tabular-nums;
  padding-right:22px;border-right:1px solid var(--line);
}
/* a inicial de Gestão / Geração / Ganho — o "G" do Método G */
.mi-letra{
  font-family:'Sora',sans-serif;font-size:2.6rem;font-weight:800;line-height:1;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.mi-txt h3{font-size:1.02rem;font-weight:700;margin-bottom:6px}
.mi-txt p{font-size:.85rem;color:var(--mut);line-height:1.55}
.mi-ico{
  width:46px;height:46px;border-radius:13px;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:rgba(62,123,255,.12);color:var(--blue2);
}
.metodo-grafico{
  position:relative;overflow:hidden;border-radius:16px;min-height:300px;
  border:1px solid var(--line);
  background:
    repeating-linear-gradient(0deg,rgba(121,165,255,.05) 0 1px,transparent 1px 58px),
    repeating-linear-gradient(90deg,rgba(121,165,255,.05) 0 1px,transparent 1px 58px),
    linear-gradient(165deg,#101D36,#070D1A);
}
/* o filtro fica no elemento SVG (espaço em px do CSS), não nos paths — nos
   paths ele seria deformado junto com o preserveAspectRatio="none" */
.metodo-grafico svg{
  position:absolute;inset:0;width:100%;height:100%;
  filter:drop-shadow(0 6px 20px rgba(241,113,45,.22));
}
.mg-area{fill:url(#grafico-area)}
/* non-scaling-stroke: sem isso o preserveAspectRatio="none" deforma a espessura */
.mg-linha{
  fill:none;stroke:url(#grafico-linha);stroke-width:2.5;
  stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;
}
.mg-ponto{
  position:absolute;width:11px;height:11px;border-radius:50%;transform:translate(-50%,-50%);
  background:var(--org2);box-shadow:0 0 0 5px rgba(241,113,45,.16);
}
.mg-selo{
  position:absolute;transform:translate(-50%,-50%);
  width:44px;height:44px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  font-family:'Sora',sans-serif;font-size:1.15rem;font-weight:800;color:#12060A;
  background:linear-gradient(135deg,#FF8A45 0%,#F1712D 55%,#D95314 100%);
  box-shadow:0 12px 30px -10px rgba(241,113,45,.6);
}

/* ---------- Solução (bloco-manifesto) ---------- */
.verdade{
  border-radius:var(--r);padding:52px 56px;
  background:linear-gradient(150deg,rgba(82,51,184,.16),rgba(163,74,107,.10) 50%,rgba(241,113,45,.14));
  border:1px solid var(--line2);position:relative;overflow:hidden;
}
.verdade::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--grad)}
.verdade .h2{max-width:24ch}
.verdade p{
  font-family:'Sora',sans-serif;font-size:clamp(1.05rem,1.75vw,1.28rem);font-weight:600;
  line-height:1.55;letter-spacing:-.01em;max-width:62ch;margin-top:22px;
}
/* o realce em gradiente deste bloco já está no .gd do título — no parágrafo o
   destaque é só de peso, para não diluir a assinatura de marca */
.verdade strong{color:var(--txt);font-weight:800}
.verdade .cta-row{margin-top:34px}

/* ---------- Mapa do caminho ---------- */
.mapa{
  background:
    radial-gradient(640px 320px at 88% 10%,rgba(82,51,184,.14),transparent 70%),
    radial-gradient(560px 300px at 4% 94%,rgba(241,113,45,.09),transparent 70%),
    repeating-linear-gradient(0deg,rgba(121,165,255,.045) 0 1px,transparent 1px 76px),
    repeating-linear-gradient(90deg,rgba(121,165,255,.045) 0 1px,transparent 1px 76px),
    var(--ink);
}
/* Os 4 passos são <li class="sol">: card, ícone (.ico) e hover vêm todos das
   mesmas regras dos diferenciais — não há estilo próprio da 1ª fileira.
   A 2ª fileira só ajusta o respiro: o espaço entre ela e os passos é o mesmo
   gap das colunas, para as 8 células lerem como uma grade só. */
.diferenciais{margin-top:20px}
.caminho-cta{margin-top:52px;display:flex;justify-content:center}

/* ---------- Resultados / depoimentos ---------- */
.depos{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:52px}
.depo{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:30px 26px;
  display:flex;flex-direction:column;gap:18px;transition:transform .3s ease,border-color .3s ease;
}
.depo:hover{transform:translateY(-6px);border-color:var(--line2)}
.depo .tag{
  align-self:flex-start;font-family:'Sora',sans-serif;font-size:.72rem;font-weight:700;letter-spacing:.05em;
  color:var(--org2);border:1px solid rgba(241,113,45,.4);border-radius:999px;padding:6px 13px;
}
.depo blockquote{font-size:.95rem;line-height:1.6;color:var(--txt);flex:1}
.depo blockquote::before{content:"“";display:block;font-family:'Sora',sans-serif;font-size:2.4rem;line-height:.6;margin-bottom:12px;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.depo footer{font-size:.8rem;color:var(--mut);border-top:1px solid var(--line);padding-top:16px}
.depo footer b{color:var(--txt);display:block;font-weight:600}
/* a tese é mais longa que uma tag comum e pode quebrar em duas linhas — daí o
   line-height e o text-align próprios, para a pílula continuar legível */
.depo .tag{line-height:1.4;text-align:left}

/* ---------- Quem ---------- */
.quem{overflow:hidden}
.quem-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:64px;align-items:start}
.quem-card{
  position:relative;border-radius:26px;padding:14px;min-width:0;
  background:linear-gradient(165deg,#111E38,#070D1A);border:1px solid var(--line2);
  box-shadow:0 40px 80px -30px rgba(0,0,0,.7);
  display:flex;flex-direction:column;gap:14px;
}
.quem-card::before{
  content:"";position:absolute;inset:-1px;border-radius:27px;padding:1px;background:var(--grad);opacity:.45;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
}
.quem-foto{position:relative;border-radius:18px;overflow:hidden}
.quem-foto img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:center 12%}
/* véu discreto só para a foto se fundir no card — não há mais legenda embaixo
   para proteger, então o degradê é bem mais leve que o do sistema */
.quem-foto::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,13,26,.30) 0%,transparent 26%,transparent 70%,rgba(7,13,26,.55) 100%);
}
/* Motor das faixas rolantes (premiações desta seção e faixa de autoridade): a
   segunda metade da lista repete a primeira (e é escondida dos leitores de
   tela) — é ela que dá o loop contínuo. O ritmo de cada faixa é ajustado no
   .mq-track dela. */
.mq{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.mq-track{display:flex;align-items:center;width:max-content;animation:rola 26s linear infinite}
.mq:hover .mq-track{animation-play-state:paused}
@keyframes rola{to{transform:translateX(-50%)}}
.mq-premios{border-radius:12px}
.mq-premios .mq-track{gap:10px;padding-right:10px}
.quem-premios img{
  width:104px;aspect-ratio:1;object-fit:cover;border-radius:12px;border:1px solid var(--line);
  opacity:.88;transition:opacity .3s ease,transform .3s ease;
}
.quem-premios img:hover{opacity:1;transform:translateY(-3px)}
.quem-txt .h2{max-width:24ch}
.quem-txt .oi{
  font-family:'Sora',sans-serif;font-weight:700;font-size:1.1rem;margin:26px 0 6px;
  display:flex;align-items:center;gap:14px;
}
.quem-txt .oi::after{content:"";flex:1;max-width:80px;height:2px;background:var(--grad)}
.quem-txt p{color:var(--mut);margin-top:16px;max-width:60ch}
.quem-txt p strong{color:var(--txt);font-weight:600}

/* ---------- Garantia ---------- */
.gar-box{
  position:relative;max-width:880px;margin:0 auto;text-align:center;
  border-radius:30px;padding:64px 48px;
  background:linear-gradient(165deg,#101D36,#070D1A);border:1px solid var(--line2);overflow:hidden;
}
.gar-box::before{
  content:"";position:absolute;inset:-1px;border-radius:31px;padding:1px;background:var(--grad);opacity:.5;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
}
.gar-selo{
  width:96px;height:96px;margin:0 auto 28px;border-radius:50%;
  background:rgba(241,113,45,.12);border:1px solid rgba(241,113,45,.45);
  display:flex;align-items:center;justify-content:center;color:var(--org2);
}
.gar-box .h2{margin:0 auto;max-width:24ch}
.gar-box .sub{margin:20px auto 36px;max-width:60ch}
.gar-box .sub strong{color:var(--txt)}

/* ---------- FAQ ---------- */
.faq-list{max-width:800px;margin:52px auto 0}
details{border-bottom:1px solid var(--line)}
details summary{
  cursor:pointer;list-style:none;display:flex;align-items:center;gap:18px;
  padding:24px 4px;font-family:'Sora',sans-serif;font-weight:600;font-size:1.02rem;
  transition:color .2s ease;
}
details summary::-webkit-details-marker{display:none}
details summary:hover{color:var(--blue2)}
details summary::after{
  content:"+";margin-left:auto;font-family:'Sora',sans-serif;font-size:1.5rem;font-weight:600;
  color:var(--org);transition:transform .3s ease;flex:none;line-height:1;
}
details[open] summary::after{transform:rotate(45deg)}
details .resp{padding:0 40px 26px 4px;color:var(--mut);font-size:.96rem;max-width:68ch}

/* ---------- Próximo passo ---------- */
.final{overflow:hidden}
.final::before{
  content:"";position:absolute;inset:0;
  background-image:var(--hero-img);background-size:cover;background-position:center 30%;opacity:.22;
}
.final::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,var(--ink) 2%,rgba(4,7,15,.72) 50%,var(--ink) 100%);
}
.final .wrap{position:relative;z-index:2}
.caminhos{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:52px 0 48px}
.caminho{border-radius:var(--r);padding:36px 32px;border:1px solid var(--line);background:rgba(10,19,34,.82);text-align:left}
.caminho.b{border-color:rgba(241,113,45,.5);background:linear-gradient(160deg,rgba(241,113,45,.14),rgba(10,19,34,.85) 55%)}
.caminho p{font-size:.98rem;color:var(--mut);line-height:1.7}
.caminho.b p{color:var(--txt)}
.caminho svg{display:block;margin-bottom:16px;color:#E25B5B}
.caminho.b svg{color:#37C871}
.final .cta-row{justify-content:center}
.final .btn-cta{padding:21px 40px;font-size:1rem}

/* ---------- Rodapé ---------- */
.rodape{border-top:1px solid var(--line);padding:34px 0;background:#030509}
.rod-fim{
  display:flex;justify-content:center;align-items:center;text-align:center;
  font-size:.76rem;color:#66779A;
}

/* ---------- WhatsApp flutuante ---------- */
.zap{
  position:fixed;right:22px;bottom:22px;z-index:70;width:60px;height:60px;border-radius:50%;
  background:#25D366;display:flex;align-items:center;justify-content:center;color:#fff;
  box-shadow:0 14px 34px -8px rgba(37,211,102,.6);
  transition:transform .25s ease;
}
.zap:hover{transform:scale(1.1)}
.zap::before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid rgba(37,211,102,.65);animation:ping 2.4s ease-out infinite}
@keyframes ping{0%{transform:scale(.5);opacity:1}80%,100%{transform:scale(1.4);opacity:0}}

/* ---------- Reveal ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .75s ease,transform .75s ease;transition-delay:var(--d,0s)}
.reveal.in{opacity:1;transform:none}

/* ---------- Responsivo ---------- */
@media (max-width:1020px){
  .grid4,.grid6,.passos{grid-template-columns:1fr 1fr}
  /* lista e gráfico empilham: o gráfico vai para baixo, com altura própria */
  .metodo-grid{grid-template-columns:minmax(0,1fr);gap:24px}
  .metodo-grafico{min-height:260px}
  .verdade{padding:44px 40px}
  .depos{grid-template-columns:1fr;max-width:560px;margin-left:auto;margin-right:auto}
  .quem-grid{grid-template-columns:minmax(0,1fr);gap:48px}
  /* width:100% é necessário: com margin auto o card vira shrink-to-fit e a
     faixa rolante o empurraria até o max-width */
  .quem-card{width:100%;max-width:480px;margin:0 auto}
  .topo nav{display:none}
}
@media (max-width:900px){
  .hero{padding:calc(var(--topo-h) + 44px) 0 56px}
}
@media (max-width:640px){
  section{padding:72px 0}
  .grid4,.grid6,.caminhos,.passos{grid-template-columns:1fr}
  /* sem espaço para as 4 colunas: o ícone sai e o parágrafo desce para uma
     segunda linha, ocupando a largura toda em vez de espremer numa coluna */
  .metodo-item{
    grid-template-columns:auto auto minmax(0,1fr);
    grid-template-areas:"num letra titulo" "texto texto texto";
    gap:4px 14px;padding:20px;
  }
  .mi-num{grid-area:num;padding-right:14px}
  .mi-letra{grid-area:letra;font-size:2rem}
  .mi-txt{display:contents}
  .mi-txt h3{grid-area:titulo;margin-bottom:0}
  .mi-txt p{grid-area:texto;margin-top:12px}
  .mi-ico{display:none}
  .metodo-grafico{min-height:220px}
  .verdade{padding:34px 26px}
  .gar-box{padding:48px 26px}
  .barra li{padding:4px 18px}
  .hero{padding:calc(var(--topo-h) + 36px) 0 48px}
  .btn{width:100%}
  .topo .btn{width:auto}
  .caminho-cta,.final .cta-row{display:block}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
}
a:focus-visible,summary:focus-visible,button:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:6px}