/* =========================================================
   Tráfego Orgânico, landing page
   Sistema: Poppins, blocos preto/branco alternados, acento azul
   ========================================================= */

:root{
  --accent:      #0F8341;   /* texto pequeno e botões: contraste 4.84 com branco */
  --accent-dark: #0B6832;
  --vivid:       #12A04C;   /* gráficos e títulos grandes: verde vivo, 3.41 */
  --accent-soft: #5BF08D;   /* sobre os blocos escuros */
  --deep:        #06341C;
  --font:        "Poppins", system-ui, -apple-system, sans-serif;
  --container:   1140px;
  --ease:        cubic-bezier(0.22, 1, 0.36, 1);
  --radius:      2px;

  /* padrão = bloco claro; cada seção redefine */
  --bg:#FFFFFF; --fg:#0B2117; --fg-2:#4C6156; --fg-3:#63786C;
  --rule:#E4EBE7; --rule-2:#CCDAD2; --mark-bg:var(--vivid); --mark-fg:#FFFFFF;
}

/* ---- os dois blocos ---- */
.sec--light{
  --bg:#FFFFFF; --fg:#0B2117; --fg-2:#4C6156; --fg-3:#63786C;
  --rule:#E4EBE7; --rule-2:#CCDAD2; --mark-bg:var(--vivid); --mark-fg:#FFFFFF;
  background:var(--bg); color:var(--fg);
}
.sec--dark{
  --bg:#06301A; --fg:#FFFFFF; --fg-2:#B9D2C4; --fg-3:#90AC9C;
  --rule:#154430; --rule-2:#20583D; --mark-bg:var(--accent-soft); --mark-fg:var(--deep);
  background:var(--bg); color:var(--fg);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body{
  margin:0;background:#FFFFFF;color:#0B2117;overflow-x:clip;
  font-family:var(--font);font-size:1rem;line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;font-weight:900;letter-spacing:-.03em;line-height:.98;overflow-wrap:break-word}
h1{font-size:clamp(1.9rem,5.9vw,4.6rem);font-weight:800}
h2{font-size:clamp(1.5rem,4.4vw,3.4rem)}
h3{font-size:clamp(1.05rem,1.7vw,1.25rem);line-height:1.15;letter-spacing:-.02em}
p{margin:0 0 1rem}
::selection{background:var(--accent);color:#fff}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--deep);color:#fff;padding:.7rem 1.1rem;font-weight:600}
.skip-link:focus{left:1rem;top:1rem}

.container{max-width:var(--container);margin-inline:auto;padding-inline:1.5rem;width:100%}

.section{padding:clamp(4rem,7.5vw,6.5rem) 0;position:relative}
section[id]{scroll-margin-top:24px}
.section-head{max-width:900px;margin-inline:auto;margin-bottom:clamp(2rem,4vw,3.2rem);text-align:center}
.section-head h2{margin-bottom:1rem}
.lead{color:var(--fg-2);font-size:clamp(1rem,1.3vw,1.1rem);max-width:56ch;margin-inline:auto}
/* dois títulos que formam uma frase só: o segundo entra colado e um
   pouco menor, para o de cima continuar sendo o título */
.section-head h2+h2{margin-top:-.7rem;font-size:clamp(1.15rem,3.3vw,2.5rem)}
.section-head h3{margin-top:1rem;color:var(--fg-3)}

.eyebrow{
  font-weight:600;font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);margin:0 0 1rem;
}
.section-head .eyebrow,.offer .eyebrow{justify-content:center}
.sec--dark .eyebrow{color:var(--accent-soft)}

/* mark padrão, bloco sólido, só a cor muda.
   z-index -1 joga o bloco para trás das letras vizinhas, para não cobrir
   as linhas de cima e de baixo (o line-height apertado faz elas se tocarem).
   O isolation nos títulos prende essa camada dentro do próprio título,
   senão o bloco cairia atrás do fundo da seção e sumiria. */
h1,h2,h3,.manifesto p{isolation:isolate}
mark{
  position:relative;z-index:-1;
  background-color:var(--mark-bg);
  color:var(--mark-fg);
  padding:0 .12em;margin:0 -.04em;
  border-radius:1px;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}
/* trecho marcado em corpo menor que o resto do título */
mark.mark--sm{font-size:.68em;padding:.06em .16em}

/* ---------- Botões ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--font);font-weight:600;font-size:.94rem;letter-spacing:-.01em;
  padding:.85rem 1.6rem;border-radius:var(--radius);border:1px solid transparent;cursor:pointer;
  background:transparent;-webkit-appearance:none;appearance:none;
  transition:background-color .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease);
}
.btn span[aria-hidden]{transition:transform .25s var(--ease)}
.btn:hover span[aria-hidden]{transform:translateX(4px)}
.btn-brand{background:var(--accent);color:#fff}
.btn-brand:hover{background:var(--accent-dark)}
/* sobre bloco verde escuro o CTA inverte, senão some no fundo */
.sec--dark .btn-brand,.sticky-cta .btn-brand,.cookies .btn-brand{background:var(--accent-soft);color:var(--deep)}
.sec--dark .btn-brand:hover,.sticky-cta .btn-brand:hover,.cookies .btn-brand:hover{background:#8BF7AE}
.btn-ghost{border-color:var(--fg);color:var(--fg)}
.btn-ghost:hover{background:var(--fg);color:var(--bg)}
.btn-lg{padding:1rem 1.8rem;font-size:.98rem}
.btn-sm{padding:.58rem 1.1rem;font-size:.85rem}
.btn-block{display:flex;width:100%}

/* ---------- Barra de progresso ---------- */
.scroll-progress{
  position:fixed;left:0;top:0;height:3px;width:100%;z-index:100;
  background:var(--vivid);transform:scaleX(0);transform-origin:left center;will-change:transform;
}

/* ---------- Hero ---------- */
.hero{position:relative;padding:clamp(7rem,14vh,9rem) 0 clamp(3.5rem,6vw,5rem);overflow:clip;text-align:center}
.hero-bg{position:absolute;inset:0;pointer-events:none;color:var(--accent)}
.hero-grid{
  position:absolute;inset:0;
  background-image:linear-gradient(#E4EBE7 1px,transparent 1px),linear-gradient(90deg,#E4EBE7 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 40%,#000 40%,transparent 100%);
          mask-image:radial-gradient(ellipse 90% 70% at 50% 40%,#000 40%,transparent 100%);
}
.hero-signal-svg{position:absolute;inset:0;width:100%;height:100%}
.hero-signal{stroke-dasharray:100;stroke-dashoffset:100;animation:draw 2.4s var(--ease) .4s forwards;opacity:.16}

/* dois ícones da Meta girados, só para dar textura ao fundo da hero.
   Decorativos: entram por background-image, não como <img>. */
.hero-badge{
  position:absolute;border-radius:50%;
  filter:blur(2.5px);          /* desfoque fraco, para ficarem no plano de fundo */
  background-repeat:no-repeat;background-size:contain;
  background-image:-webkit-image-set(url("../assets/icone-metaads.webp") type("image/webp"),
                                     url("../assets/icone-metaads.png") type("image/png"));
  background-image:image-set(url("../assets/icone-metaads.webp") type("image/webp"),
                             url("../assets/icone-metaads.png") type("image/png"));
}
.hero-badge--a{width:152px;height:152px;top:6%;left:4%;transform:rotate(-17deg)}
.hero-badge--b{width:104px;height:104px;top:27%;right:7%;transform:rotate(22deg)}

/* Print do gerenciador, entra pela direita e termina exatamente na borda
   de baixo da hero (o overflow:clip da seção corta o que passar).
   A máscara dissolve a esquerda para o título não disputar leitura com ela. */
.hero-shot{
  position:absolute;right:-5%;bottom:0;
  width:56%;max-width:820px;line-height:0;
  /* dissolve a partir do canto inferior direito, para não brigar com o
     título nem com os números que ficam por cima */
  -webkit-mask-image:radial-gradient(135% 150% at 100% 100%,#000 58%,rgba(0,0,0,.5) 82%,transparent 100%);
          mask-image:radial-gradient(135% 150% at 100% 100%,#000 58%,rgba(0,0,0,.5) 82%,transparent 100%);
}
/* o print é quase todo branco e sumiria no fundo branco da hero */
.hero-shot img{
  width:100%;height:auto;display:block;
  filter:drop-shadow(0 10px 30px rgba(11,33,23,.16));
}
@keyframes draw{to{stroke-dashoffset:0}}
.hero-inner{position:relative;z-index:1}
.hero-title{max-width:17ch;margin:0 auto 1.6rem}
.title-sub{display:inline-block;font-size:.6em;margin-top:.7em}
.hero-sub{color:var(--fg-2);font-size:clamp(1rem,1.4vw,1.14rem);max-width:52ch;margin:0 auto 2.4rem}
.hero-sub strong{color:var(--fg);font-weight:600}
.hero-ctas{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center;margin-bottom:3.5rem}

.hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;border-top:1px solid var(--rule);padding-top:2.2rem}
/* no desktop os números recuam para a metade esquerda: a direita é do print,
   e os rótulos pequenos ficavam ilegíveis por cima da tabela do gerenciador */
@media (min-width:861px){
  .hero-stats{max-width:48%;margin-right:auto;gap:.9rem}
}
.stat-num{display:block;font-weight:900;font-size:clamp(1.55rem,3.4vw,2.7rem);letter-spacing:-.045em;color:var(--vivid);line-height:1;margin-bottom:.5rem;font-variant-numeric:tabular-nums}
.stat-label{font-size:.86rem;color:var(--fg-2);line-height:1.4}
.stat-label em{color:var(--fg-3);font-style:normal}

@keyframes hero-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.hero-title{animation:hero-in .8s var(--ease) .05s backwards}
.hero-sub{animation:hero-in .8s var(--ease) .18s backwards}
.hero-ctas{animation:hero-in .8s var(--ease) .30s backwards}
.hero-stats{animation:hero-in .9s var(--ease) .42s backwards}

/* ---------- Barras (o problema) ---------- */
.bars{border:1px solid var(--rule-2);border-radius:var(--radius);padding:clamp(1.4rem,2.6vw,2rem);margin-bottom:1rem}
.bar-row+.bar-row{margin-top:1.6rem}
.bar-meta{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap;margin-bottom:.6rem}
.bar-name{font-weight:600;font-size:.88rem;color:var(--fg-2)}
.bar-value{font-weight:800;font-size:clamp(1rem,2vw,1.3rem);letter-spacing:-.02em}
.bar-value em{font-style:normal;color:var(--fg-3);font-weight:400;font-size:.78em}
.bar-value--you{color:var(--fg-3)}
.bar-track{height:10px;background:var(--rule);overflow:clip}
.bar-fill{display:block;height:100%;transform:scaleX(0);transform-origin:left center;transition:transform 1.3s var(--ease)}
.bar-fill--rival{background:var(--fg)}
.bar-fill--you{background:var(--vivid)}
.bars.is-visible .bar-fill--rival{transform:scaleX(1)}
.bars.is-visible .bar-fill--you{transform:scaleX(.045);transition-delay:.25s}
.bars-note{margin:1.4rem 0 0;color:var(--fg-3);font-size:.84rem}

/* ---------- Cards ---------- */
.cards-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));gap:1px;background:var(--rule-2);border:1px solid var(--rule-2)}
.card{background:var(--bg);padding:1.8rem;transition:background-color .25s var(--ease)}
.card-idx{display:block;font-size:1.4rem;font-weight:800;color:var(--accent);line-height:1;margin-bottom:1rem}
.sec--dark .card-idx{color:var(--accent-soft)}
.card h3{margin-bottom:.5rem}
.card p{color:var(--fg-2);font-size:.92rem;margin:0}

/* ---------- A curva ---------- */
.num-hl{color:var(--vivid);font-variant-numeric:tabular-nums}
.curve-wrap{position:relative;max-width:1140px;margin:0 auto;padding:2rem 1.5rem}
.curve-svg{position:absolute;inset:0;width:100%;height:100%}
.curve-grid line{stroke:var(--rule);stroke-width:1;vector-effect:non-scaling-stroke}
.curve-ghost{stroke:var(--rule);stroke-width:3}
.curve-line{stroke:var(--vivid);stroke-width:3;stroke-linecap:round;stroke-dasharray:1000;stroke-dashoffset:1000}

.curve-nodes{position:absolute;inset:0;pointer-events:none}
.node{
  position:absolute;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;
  background:var(--bg);border:2px solid var(--rule-2);
  transition:background-color .45s var(--ease),border-color .45s var(--ease),transform .45s var(--ease);
}
.node.lit{background:var(--vivid);border-color:var(--vivid);transform:scale(1.2)}
.node--last{width:22px;height:22px;margin:-11px 0 0 -11px}

.curve-steps{position:relative;z-index:1;list-style:none;margin:0;padding:0;display:grid;gap:clamp(2.5rem,7vw,5.5rem)}
.curve-step{
  max-width:380px;background:var(--bg);
  border:2px dashed var(--rule-2);padding:1.5rem;
  opacity:0;transform:translateY(22px);
  transition:opacity .7s var(--ease),transform .7s var(--ease),border-color .4s var(--ease);
}
.curve-step.is-visible{opacity:1;transform:none}
.curve-step.is-active{border-style:solid;border-color:var(--vivid)}
.curve-step:nth-child(1),.curve-step:nth-child(2){justify-self:end}
.curve-step:nth-child(3),.curve-step:nth-child(4){justify-self:start}
.step-day{display:block;font-weight:600;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:.6rem}
.curve-step h3{margin-bottom:.4rem}
.curve-step p{color:var(--fg-2);font-size:.92rem;margin:0}

/* ---------- Caça-níquel ---------- */
.slot{max-width:640px;margin-inline:auto}
.slot-frame{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule-2);border:1px solid var(--rule-2)}
.slot-reel{height:118px;overflow:clip;background:var(--bg);display:flex;align-items:flex-start;justify-content:center}
.slot-strip{display:flex;flex-direction:column;transform:translateY(0);transition:transform 1.6s var(--ease)}
.slot-strip span{height:118px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:clamp(.72rem,1.5vw,1.1rem);letter-spacing:-.02em;color:var(--fg-3);padding-inline:.4rem}
.slot-strip span:last-child{color:var(--fg)}
.slot.is-visible .slot-strip{transform:translateY(-354px)}
.slot.is-visible [data-reel="1"] .slot-strip{transition-duration:2s}
.slot.is-visible [data-reel="2"] .slot-strip{transition-duration:2.4s}

/* ---------- Temas do conteúdo ---------- */
.topics{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));column-gap:clamp(1.5rem,4vw,3.5rem)}
.topic{
  display:flex;align-items:baseline;gap:1rem;
  padding:1.15rem 0;border-bottom:1px solid var(--rule);
  font-weight:600;font-size:clamp(1rem,1.5vw,1.12rem);letter-spacing:-.02em;
  transition:color .25s var(--ease);
}
.topic:hover{color:var(--accent)}
.topic-idx{font-size:.76rem;font-weight:600;letter-spacing:.1em;color:var(--fg-3);flex:none;font-variant-numeric:tabular-nums}
.topic:hover .topic-idx{color:var(--accent)}

/* ---------- Manifesto ---------- */
.manifesto{margin:0;max-width:900px;margin-inline:auto;text-align:center}
.manifesto p{font-weight:800;font-size:clamp(1.2rem,3.5vw,2.7rem);line-height:1.1;letter-spacing:-.03em;margin-bottom:2rem}
.manifesto footer{display:flex;flex-direction:column;gap:.1rem;align-items:center}
.sig{font-weight:800}
.sig-sub{color:var(--fg-3);font-size:.84rem}

/* ---------- Pra quem é ---------- */
.fit{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:1.5rem}
.fit-col{border:2px dashed var(--rule-2);padding:1.8rem}
.fit-col--yes{border-style:solid;border-color:var(--fg)}
.fit-col h3{margin-bottom:1.2rem}
.fit-col--yes h3{color:var(--accent)}
.fit-col ul{list-style:none;margin:0;padding:0;display:grid;gap:.8rem}
.fit-col li{color:var(--fg-2);font-size:.94rem;padding-left:1.4rem;position:relative}
.fit-col li::before{content:"✕";position:absolute;left:0;top:0;color:var(--fg-3);font-size:.85em}
.fit-col--yes li::before{content:"✓";color:var(--accent);font-weight:700}

/* ---------- Oferta ---------- */
.offer{--offer-frase:#E6F2EA;max-width:560px;margin-inline:auto;text-align:center;border:1px solid var(--rule-2);padding:clamp(2rem,4vw,3rem)}
.offer h2{margin-bottom:1.8rem}
.offer-lead{font-weight:600;font-size:clamp(1rem,1.7vw,1.2rem);letter-spacing:-.02em;color:var(--offer-frase);margin:0 0 .74rem}
/* grid 1fr-auto-1fr: quem fica centralizado no card é o NÚMERO.
   Com flex, o "R$" empurrava o preço 18px para a direita e ele deixava
   de bater com o centro das duas frases. */
.price{display:grid;grid-template-columns:1fr auto 1fr;align-items:baseline;margin-bottom:2rem}
.price-cur{grid-column:1;justify-self:end;margin-right:.3rem;font-weight:800;font-size:1.5rem;color:var(--offer-frase)}
.price-num{grid-column:2;font-weight:900;font-size:clamp(2.9rem,9vw,5rem);line-height:1;letter-spacing:-.05em;color:var(--vivid)}
.sec--dark .price-num{color:var(--accent-soft)}
.price-tail{grid-column:1/-1;color:var(--offer-frase);font-size:clamp(1rem,1.7vw,1.2rem);font-weight:600;letter-spacing:-.02em;margin-top:.45rem}
.offer-list{list-style:none;margin:0 0 2rem;padding:0;display:grid;gap:.7rem;text-align:left;max-width:320px;margin-inline:auto}
.offer-list li{position:relative;padding-left:1.6rem;color:var(--fg-2);font-size:.94rem}
.offer-list li::before{content:"✓";position:absolute;left:0;top:0;color:var(--accent);font-weight:700}
.sec--dark .offer-list li::before{color:var(--accent-soft)}

/* ---------- Footer ---------- */
.footer{padding-top:clamp(2.5rem,5vw,3.5rem);padding-bottom:2.5rem}
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap;padding-bottom:2rem}
.brand-text{font-weight:800;letter-spacing:-.04em}
.brand-text span{color:var(--vivid)}
.footer-brand{font-size:1.1rem}
.footer-links{display:flex;flex-wrap:wrap;gap:1.6rem}
.footer-links a{color:var(--fg-2);font-size:.9rem;font-weight:600;transition:color .2s var(--ease)}
.footer-links a:hover{color:var(--fg)}
.footer-bottom{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;border-top:1px solid var(--rule);padding-top:1.4rem}
.footer-bottom p{color:var(--fg-3);font-size:.76rem;margin:0}

/* ---------- Banner de cookies ---------- */
.cookies{
  position:fixed;left:0;right:0;bottom:0;z-index:120;
  background:var(--deep);color:#fff;border-top:1px solid #1C5237;
  padding:1rem 0;
}
.cookies[hidden]{display:none}
.cookies-inner{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;flex-wrap:wrap}
.cookies-body{flex:1 1 320px;min-width:0}
.cookies-text{margin:0;font-size:.92rem;color:#fff}
.cookies-explain{margin-top:.7rem;max-width:62ch}
.cookies-explain[hidden]{display:none}
.cookies-explain p{margin:0;font-size:.86rem;color:#B9D2C4}
.cookies-actions{display:flex;gap:.6rem;flex-wrap:wrap;flex:none}
.cookies .btn-ghost{border-color:#2E6B4A;color:#fff}
.cookies .btn-ghost:hover{background:#fff;color:var(--deep)}
/* enquanto o aviso está aberto o CTA fixo sai do caminho */
body.cookies-abertos .sticky-cta{display:none}

/* ---------- CTA fixo ---------- */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:90;display:none;align-items:center;justify-content:space-between;gap:1rem;
  padding:.7rem 1rem;background:var(--deep);color:#fff;border-top:1px solid var(--deep);
  transform:translateY(110%);transition:transform .35s var(--ease);
}
.sticky-cta.is-shown{transform:translateY(0)}
.sticky-info{display:flex;flex-direction:column;line-height:1.25}
.sticky-info strong{font-weight:800;font-size:.92rem;letter-spacing:-.02em}
.sticky-info span{color:#B9D2C4;font-size:.8rem}

/* ---------- Reveal ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.is-visible{opacity:1;transform:none}
.cards-3 .reveal:nth-child(2){transition-delay:.1s}
.cards-3 .reveal:nth-child(3){transition-delay:.2s}
.topics .reveal:nth-child(2){transition-delay:.06s}
.topics .reveal:nth-child(3){transition-delay:.12s}
.topics .reveal:nth-child(4){transition-delay:.18s}
.topics .reveal:nth-child(5){transition-delay:.24s}
.topics .reveal:nth-child(6){transition-delay:.3s}
.fit .reveal:nth-child(2){transition-delay:.12s}

/* =========================================================
   Responsivo
   ========================================================= */
@media (max-width:1100px){ .hero-signal{opacity:.09} }
@media (max-width:860px){
  /* Abre uma faixa no fim da hero só para o print: abaixo dos números não há
     texto, então ele pode ocupar quase toda a largura sem atrapalhar leitura.
     A altura fixa + object-fit deixam o print em escala legível sem crescer
     a hero na proporção da imagem. */
  .hero{padding-bottom:14rem}
  .hero-badge--a{width:96px;height:96px;top:3%;left:-2%}
  .hero-badge--b{width:72px;height:72px;top:15%;right:-3%}
  .hero-shot{
    width:115%;right:-30%;height:200px;
    -webkit-mask-image:linear-gradient(to left,#000 72%,transparent 100%);
            mask-image:linear-gradient(to left,#000 72%,transparent 100%);
  }
  .hero-shot img{height:100%;object-fit:cover;object-position:left top}
}
@media (max-width:960px){
  .curve-step:nth-child(1),.curve-step:nth-child(2),
  .curve-step:nth-child(3),.curve-step:nth-child(4){justify-self:center}
  .curve-svg{opacity:.5}
  .curve-nodes{opacity:.5}
}
/* O gráfico foi desenhado para layout largo. Em tela estreita os cards o cobrem
   e sobram tocos de linha soltos e nós cortados pela borda, com cara de defeito.
   Aqui ele se recolhe e os cards viram uma lista; o progresso segue visível
   pela borda que acende em cada card na vez dele. */
@media (max-width:860px){
  .curve-svg,.curve-nodes{display:none}
  .curve-wrap{padding-block:0}
  .curve-steps{gap:1rem}
  .curve-step{width:100%}
}
@media (max-width:860px){
  .sticky-cta{display:flex}
  .footer{padding-bottom:6rem}
}
@media (max-width:640px){
  .hero-stats{grid-template-columns:1fr;gap:1.6rem}
  .hero-ctas .btn{width:100%}
  .curve-steps{gap:2rem}
  .curve-step{max-width:none}
  .footer-bottom{flex-direction:column;gap:.4rem}
}

/* =========================================================
   prefers-reduced-motion, fallback estático por efeito
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal,.curve-step{opacity:1!important;transform:none!important;transition:none!important}
  .hero-title,.hero-sub,.hero-ctas,.hero-stats{animation:none!important}
  .hero-signal{animation:none;stroke-dashoffset:0}
  .curve-line{stroke-dashoffset:0!important}
  .node{background:var(--vivid);border-color:var(--vivid);transform:none}
  .bar-fill--rival{transform:scaleX(1)!important;transition:none}
  .bar-fill--you{transform:scaleX(.045)!important;transition:none}
  .slot-strip{transform:translateY(-354px)!important;transition:none}
  .btn:hover,.btn:hover span[aria-hidden]{transform:none}
  .topic:hover{color:inherit}
  .sticky-cta{transition:none}
}