/* =========================================================
   Como Humanizar a IA — landing (gabrueldev.com/humanizeaIA/)
   Sistema: Poppins editorial + JetBrains Mono como sotaque,
   preto e amarelo. Os blocos alternam entre preto puro e um
   azul-marinho profundo, quase preto.
   Mesmo sistema da landing de tráfego orgânico.

   REGRA DA PALETA: o amarelo é sempre PREENCHIMENTO, nunca tinta.
   Onde tem amarelo, o texto em cima é preto (13:1 nos dois blocos).
   ========================================================= */

:root{
  --yellow:      #FFD426;
  --yellow-deep: #E5BC00;   /* hover dos preenchimentos */
  --ink:         #08090A;   /* o preto */
  --navy:        var(--ink); /* era azul #020318; agora o site é só preto */
  --deep:        var(--ink);
  --font:        "Poppins", system-ui, -apple-system, sans-serif;
  --mono:        "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --container:   1140px;
  --ease:        cubic-bezier(0.22, 1, 0.36, 1);
  --radius:      2px;
  --hairline:    rgba(255,255,255,.11);

  /* padrão = bloco preto; cada seção redefine */
  --bg:#08090A; --fg:#FFFFFF; --fg-2:#B0B0B4; --fg-3:#84848A;
  --rule:#1C1D20; --rule-2:#2A2B2F; --surface:#121316;
  --vivid:var(--yellow); --mark-bg:var(--yellow); --mark-fg:var(--ink);
}

/* ---- os dois blocos ----
   Não são classes de cor: são temas locais. Cada um redefine --bg, --fg,
   --rule e --surface, e todo componente lê essas variáveis e se adapta
   sozinho — por isso o mesmo .card serve nos dois, sem variante.
   Como os dois agora são escuros, a divisa entre seções não vem mais do
   contraste: vem do fio de cabelo em .section (ver abaixo). */
.sec--ink{
  --bg:#08090A; --fg:#FFFFFF; --fg-2:#B0B0B4; --fg-3:#84848A;
  --rule:#1C1D20; --rule-2:#2A2B2F; --surface:#121316;
  --vivid:var(--yellow); --mark-bg:var(--yellow); --mark-fg:var(--ink);
  background:var(--bg); color:var(--fg);
}
/* .sec--navy era azul-escuro; agora é o mesmo preto do .sec--ink.
   A classe fica pra não mexer no HTML. */
.sec--navy{
  --bg:#08090A; --fg:#FFFFFF; --fg-2:#B0B0B4; --fg-3:#84848A;
  --rule:#1C1D20; --rule-2:#2A2B2F; --surface:#121316;
  --vivid:var(--yellow); --mark-bg:var(--yellow); --mark-fg:var(--ink);
  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:#08090A;color:#FFFFFF;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:1.12;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(--yellow);color:var(--ink)}
:focus-visible{outline:2px solid var(--yellow);outline-offset:3px}

.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--yellow);color:var(--ink);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;border-top:1px solid var(--hairline)}
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 (padrão do orgânico) */
.section-head h2+h2{margin-top:-.35rem;font-size:clamp(1.15rem,3.3vw,2.5rem)}
.section-head h3{margin-top:1rem;color:var(--fg-3)}

/* rótulo com prompt de shell: o sotaque de programação mais barato da página */
.eyebrow{
  font-family:var(--mono);font-weight:400;font-size:.76rem;letter-spacing:.02em;
  color:var(--fg-3);margin:0 0 1rem;
}
.eyebrow::before{content:"$ ";color:var(--vivid);font-weight:700}

/* comentário de código, para notas de rodapé de seção */
.comment{font-family:var(--mono);font-size:.8rem;color:var(--fg-3);margin:0}
.comment::before{content:"// ";opacity:.7}

/* mark = bloco sólido amarelo com texto preto, igual nos dois blocos.
   Feito com background-image no próprio elemento (e não ::after absoluto):
   acompanha quebra de linha como uma seleção real e não deixa entalhe
   nas letras da linha de cima. */
mark{
  color:var(--mark-fg);
  background-color:transparent;
  background-image:linear-gradient(var(--mark-bg),var(--mark-bg));
  background-repeat:no-repeat;background-position:0 0;background-size:100% 100%;
  padding:0 .12em;margin:0 -.04em;
  border-radius:1px;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}
mark.mark--sm{font-size:.68em;padding:.06em .16em}

/* cursor de bloco piscando */
.caret{
  display:inline-block;width:.54em;height:.92em;margin-left:.1em;
  background:var(--vivid);vertical-align:-.08em;
  animation:blink 1.1s steps(1) infinite;
}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}

/* ---------- 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);
}
.btn span[aria-hidden]{transition:transform .25s var(--ease)}
.btn:hover span[aria-hidden]{transform:translateX(4px)}
/* o CTA é a mesma placa amarela em toda a página */
.btn-brand{background:var(--yellow);color:var(--ink);border-color:var(--yellow)}
.btn-brand:hover{background:var(--yellow-deep);border-color:var(--yellow-deep)}
/* fundo sólido no ghost: no hero ele encosta no print do editor */
.btn-ghost{border-color:var(--fg);color:var(--fg);background:var(--bg)}
.btn-ghost:hover{background:var(--fg);color:var(--bg)}
.btn-lg{padding:1rem 1.8rem;font-size:.98rem}
.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(--yellow);transform:scaleX(0);transform-origin:left center;will-change:transform;
}

/* =========================================================
   HERO
   Mesma montagem do orgânico: malha ao fundo, uma linha que se
   desenha, dois ícones desfocados e o print entrando pela direita,
   dissolvido pela máscara e cortado pela borda de baixo.
   ========================================================= */
.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(--yellow)}
.hero-grid{
  position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.055) 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%);
}
/* a linha que sobe, desenhada no carregamento */
.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:.13}
@keyframes draw{to{stroke-dashoffset:0}}

/* O livro em 3D (PNG/WebP com fundo recortado).
   Mobile: entra no fluxo entre os botões e os números.
   Desktop: coluna da direita, ao lado do texto. A sombra amarela é o que
   descola a capa preta do fundo preto. */
.hero-inner{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr);justify-items:center}
.hero-copy{min-width:0}
.hero-book{
  display:block;width:min(64vw,300px);margin:0 auto 2.6rem;line-height:0;
  filter:drop-shadow(0 28px 40px rgba(0,0,0,.65)) drop-shadow(0 0 70px rgba(255,212,38,.16));
}
.hero-book img{width:100%;height:auto}
@media (min-width:861px){
  .hero{text-align:left}
  .hero-inner{
    grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
    grid-template-areas:"copy book" "stats book";
    column-gap:clamp(2rem,5vw,4.5rem);align-items:center;justify-items:stretch;
  }
  .hero-copy{grid-area:copy}
  .hero-book{grid-area:book;width:100%;max-width:430px;margin:0 0 0 auto}
}
.hero-title{max-width:16ch;margin:0 auto 1.6rem}
.title-sub{display:inline-block;font-size:.62em;margin-top:.18em}
.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}

/* desktop: texto alinhado à esquerda, na coluna ao lado do livro.
   Fica DEPOIS das regras base de .hero-title/.hero-sub/.hero-ctas de propósito:
   antes delas, o "margin:0 auto" e o "justify-content:center" base venciam. */
@media (min-width:861px){
  .hero-title{max-width:none;margin-left:0;font-size:clamp(2.3rem,3.9vw,3.5rem)}
  .hero-sub{margin-left:0}
  .hero-ctas{justify-content:flex-start}
}
.nowrap{white-space:nowrap}

@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-book {animation:hero-in 1s var(--ease) .24s backwards}

/* =========================================================
   A DOR — as duas barras
   ========================================================= */
.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-family:var(--mono);font-weight:700;font-size:clamp(1rem,2vw,1.3rem);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.bar-value em{font-family:var(--font);font-style:normal;color:var(--fg-3);font-weight:400;font-size:.72em}
.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(--yellow)}
.bar-fill--you{background:var(--fg-3)}
.bars.is-visible .bar-fill--rival{transform:scaleX(1)}
.bars.is-visible .bar-fill--you{transform:scaleX(.12);transition-delay:.25s}

/* ---------- Cards ---------- */
.cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule-2);border:1px solid var(--rule-2);margin-top:1.6rem}
.card{background:var(--bg);padding:1.8rem}
.card h3{margin-bottom:.5rem}
.card p{color:var(--fg-2);font-size:.92rem;margin:0}

/* =========================================================
   O TERMINAL — o gesto grande da página.
   Janela preta mesmo no bloco claro: um terminal é escuro, e é aqui
   que o preto-e-amarelo aparece mais forte. Redefine os próprios
   tokens, então tudo lá dentro se adapta sozinho.
   ========================================================= */
.term{
  --bg:#000000; --fg:#FFFFFF; --fg-2:#B4B4B4; --fg-3:#8A8A8A;
  --rule:#1E1E1E; --rule-2:#2E2E2E; --vivid:var(--yellow);
  max-width:860px;margin-inline:auto;
  /* preto puro num bloco já escuro: quem faz a janela existir é a borda */
  border:1px solid #313136;border-radius:var(--radius);overflow:clip;
  background:var(--bg);color:var(--fg);
  box-shadow:0 30px 70px -30px #000;
}
.term-bar{
  display:flex;align-items:center;gap:.7rem;
  padding:.7rem 1rem;border-bottom:1px solid #262626;background:#141416;
}
.term-dots{display:flex;gap:.4rem;flex:none}
.term-dots i{width:11px;height:11px;border-radius:50%;background:var(--rule-2)}
.term-dots i:first-child{background:#E5674B}
.term-dots i:nth-child(2){background:#E5B33F}
.term-dots i:last-child{background:#5BB85B}
.term-title{font-family:var(--mono);font-size:.76rem;color:var(--fg-3);margin-inline:auto;padding-right:2.4rem}

.term-body{padding:clamp(1.1rem,2.5vw,1.8rem);font-family:var(--mono);font-size:clamp(.78rem,1.5vw,.9rem);line-height:1.75}
.term-prompt{color:var(--vivid);font-weight:700;margin-right:.5em;user-select:none}
.term-intro{margin:0 0 1.4rem;color:var(--fg)}
.term-flag{color:var(--fg-3)}

.term-steps{list-style:none;margin:0;padding:0}
.term-step{
  padding:.75rem 0;border-bottom:1px dashed var(--rule);
  opacity:.34;transition:opacity .5s var(--ease);
}
.term-step.is-run{opacity:1}
.term-step:last-child{border-bottom:0}
.term-cmd{margin:0;position:relative;color:var(--fg);white-space:nowrap;overflow-x:auto;scrollbar-width:none}
.term-cmd::-webkit-scrollbar{display:none}
.term-n{color:var(--vivid);font-weight:700}
.term-str{color:var(--fg-2)}
/* o ✓ só aparece quando o passo "rodou" */
.term-ok{
  float:right;margin-left:1rem;color:var(--vivid);font-weight:700;
  opacity:0;transform:translateX(-6px);
  transition:opacity .4s var(--ease),transform .4s var(--ease);
}
.term-step.is-run .term-ok{opacity:1;transform:none}
.term-out{
  margin:.3rem 0 0;padding-left:1.4em;
  font-family:var(--font);font-size:.94rem;line-height:1.55;color:var(--fg-2);
}
.term-done{margin:1.2rem 0 0;color:var(--fg)}

/* =========================================================
   O CHUTE — três rolos que param no lugar certo
   ========================================================= */
.slot{max-width:660px;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);border-radius:var(--radius);overflow:clip;
}
.slot-reel{height:112px;overflow:clip;background:var(--surface);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:112px;display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-weight:700;font-size:clamp(.74rem,1.6vw,1.05rem);
  letter-spacing:-.02em;color:var(--fg-3);padding-inline:.4rem;text-align:center;
}
/* o último item de cada rolo é o "resultado certo" e acende */
.slot-strip span:last-child{color:var(--vivid)}
.slot.is-visible .slot-strip{transform:translateY(-336px)}
.slot.is-visible [data-reel="1"] .slot-strip{transition-duration:2s}
.slot.is-visible [data-reel="2"] .slot-strip{transition-duration:2.4s}
.slot-caption{margin:1.2rem 0 0;text-align:center}

/* =========================================================
   PRA QUEM É — um diff
   ========================================================= */
.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);border-radius:var(--radius);padding:1.8rem}
.fit-col--yes{border-style:solid;border-color:var(--fg)}
.fit-col h3{margin-bottom:1.2rem;font-family:var(--mono);font-size:.86rem;font-weight:700;letter-spacing:0}
.fit-col--yes h3{color:var(--vivid)}
.fit-col--no h3{color:var(--fg-3)}
.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.6rem;position:relative}
.fit-col li::before{
  content:"-";position:absolute;left:0;top:0;
  font-family:var(--mono);font-weight:700;color:var(--fg-3);
}
.fit-col--yes li{color:var(--fg)}
.fit-col--yes li::before{content:"+";color:var(--vivid)}

/* =========================================================
   OFERTA
   ========================================================= */
.offer{max-width:560px;margin-inline:auto;text-align:center;border:1px solid var(--rule-2);border-radius:var(--radius);padding:clamp(2rem,4vw,3rem)}
/* o h2 global vai a 4.4vw; num card de 560px isso quebra em três linhas */
.offer h2{font-size:clamp(1.4rem,2.6vw,2rem);margin-bottom:1.6rem}
/* grid 1fr-auto-1fr: quem fica centralizado é o NÚMERO, não o conjunto
   "R$ + número" — senão o preço nasce deslocado das frases de cima e baixo. */
.price{display:grid;grid-template-columns:1fr auto 1fr;align-items:baseline;margin-bottom:.4rem}
.price-cur{grid-column:1;justify-self:end;margin-right:.35rem;font-weight:800;font-size:1.5rem;letter-spacing:-.02em;color:var(--fg-2)}
.price-num{grid-column:2;font-weight:900;font-size:clamp(3.1rem,9.5vw,5.2rem);line-height:.95;letter-spacing:-.04em;color:var(--vivid);font-variant-numeric:tabular-nums}
.offer-list{list-style:none;margin:0 0 2rem;padding:0;display:grid;gap:.7rem;text-align:left;max-width:330px;margin-inline:auto}
.offer-list li{position:relative;padding-left:1.7rem;color:var(--fg-2);font-size:.94rem}
.offer-list li::before{content:"✓";position:absolute;left:0;top:0;font-family:var(--mono);color:var(--vivid);font-weight:700}
.offer-micro{margin:.9rem 0 0;text-align:center}

/* garantia */
.guarantee{max-width:560px;margin:1.2rem auto 0;border:2px dashed var(--rule-2);border-radius:var(--radius);padding:1.6rem;display:flex;gap:1.2rem;align-items:flex-start}
.seal{
  width:66px;height:66px;flex:none;border-radius:50%;border:2px dashed var(--vivid);color:var(--vivid);
  display:grid;place-content:center;text-align:center;line-height:1;font-family:var(--mono);
}
.seal strong{font-size:1.5rem;font-weight:700}
.seal span{font-size:.62rem;letter-spacing:.12em;text-transform:uppercase}
.guarantee h3{margin-bottom:.4rem}
.guarantee p{color:var(--fg-2);font-size:.92rem;margin:0}
.guarantee-legal{font-size:.78rem !important;color:var(--fg-3) !important;margin-top:.5rem !important}

/* order bump: lê como um arquivo, com a borda tracejada em amarelo
   (preenchimento/linha, nunca tinta) pra soar opcional */
.file-tag{display:block;font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3);margin-bottom:.7rem}
.file-ext{color:var(--fg-3)}
.bump{max-width:560px;margin:1.2rem auto 0;border:2px dashed var(--yellow);border-radius:var(--radius);padding:1.6rem;background:var(--bg)}
.bump-name{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem .8rem;font-family:var(--mono);font-weight:700;font-size:1rem;color:var(--fg);margin:0 0 .6rem}
.bump-name .file-ext{margin-left:-.8rem}
.bump-price{margin-left:auto;background:var(--yellow);color:var(--ink);padding:.1rem .5rem;font-size:.88rem;white-space:nowrap}
.bump>p{color:var(--fg-2);font-size:.92rem;margin:0 0 1rem}
.bump .offer-list{margin:0;max-width:none}

/* =========================================================
   FAQ
   ========================================================= */
.faq-list{max-width:760px;margin-inline:auto;border-top:1px solid var(--rule)}
.faq-item{border-bottom:1px solid var(--rule)}
.faq-item summary{
  list-style:none;cursor:pointer;padding:1.15rem 2.2rem 1.15rem 0;
  font-weight:600;font-size:1.02rem;letter-spacing:-.02em;position:relative;
  transition:color .25s var(--ease);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"+";position:absolute;right:.2rem;top:50%;transform:translateY(-50%);
  font-family:var(--mono);color:var(--vivid);font-size:1.3rem;font-weight:400;
  transition:transform .3s var(--ease);
}
.faq-item[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq-item summary:hover{color:var(--fg-2)}
.faq-item p{color:var(--fg-2);padding:0 2.2rem 1.3rem 0;font-size:.95rem;margin:-.2rem 0 0}

/* =========================================================
   FOOTER
   ========================================================= */
.footer{padding-top:clamp(2.5rem,5vw,3.5rem);padding-bottom:2.5rem;border-top:1px solid var(--hairline)}
.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;font-size:1.1rem}
.brand-text span{color:var(--yellow)}
.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{border-top:1px solid var(--rule);padding-top:1.4rem}
.footer-legal{color:var(--fg-3);font-size:.76rem;line-height:1.8;margin:0}

/* =========================================================
   CTA FIXO MOBILE
   ========================================================= */
.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(--ink);color:#fff;border-top:1px solid #242424;
  transform:translateY(110%);transition:transform .35s var(--ease);
}
.sticky-cta .btn-brand{border-color:var(--yellow)}
.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{font-family:var(--mono);color:#B4B4B4;font-size:.8rem}
.sticky-info s{color:#8A8A8A}

/* =========================================================
   BANNER DE COOKIES — só aviso, mesmo padrão do /organico/
   ========================================================= */
.btn-sm{padding:.6rem 1.1rem;font-size:.86rem}
.cookies{
  position:fixed;left:0;right:0;bottom:0;z-index:120;
  background:#000;color:#fff;border-top:1px solid #313136;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:#B0B0B4}
.cookies-actions{display:flex;gap:.6rem;flex-wrap:wrap;flex:none}
.cookies .btn-ghost{border-color:#3A3B40;color:#fff;background:transparent}
.cookies .btn-ghost:hover{background:#fff;color:var(--ink)}
/* enquanto o aviso está aberto o CTA fixo sai do caminho */
body.cookies-abertos .sticky-cta{display:none}

/* =========================================================
   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}
.fit .reveal:nth-child(2){transition-delay:.12s}
.faq-list .reveal:nth-child(2){transition-delay:.06s}
.faq-list .reveal:nth-child(3){transition-delay:.12s}
.faq-list .reveal:nth-child(4){transition-delay:.18s}
.faq-list .reveal:nth-child(5){transition-delay:.24s}

/* =========================================================
   Responsivo
   ========================================================= */
@media (max-width:1100px){ .hero-signal{opacity:.09} }
@media (max-width:860px){
  /* três itens em coluna única: nunca 2+1, que deixa uma célula vazia */
  .cards-3{grid-template-columns:1fr}
  .sticky-cta{display:flex}
  .footer{padding-bottom:6rem}
  .term-body{font-size:.76rem}
  .term-out{font-size:.9rem}
  .guarantee{flex-direction:column;align-items:center;text-align:center}
}
@media (max-width:640px){
  .hero{padding-top:5rem}
  .hero-ctas .btn{width:100%}
  /* o ✓ flutuando à direita vira uma marca solta em linha estreita:
     volta a ser inline, no fim do próprio comando */
  .term-ok{float:none;display:inline;margin-left:.6rem}
  .term-cmd{white-space:normal}
}

/* =========================================================
   prefers-reduced-motion — fallback estático por efeito
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1 !important;transform:none !important;transition:none !important}
  .hero-title,.hero-sub,.hero-ctas,.hero-book{animation:none !important}
  .hero-signal{animation:none;stroke-dashoffset:0}
  .caret{animation:none;opacity:1}
  .term-step{opacity:1 !important;transition:none}
  .term-ok{opacity:1 !important;transform:none !important;transition:none}
  .bar-fill--rival{transform:scaleX(1) !important;transition:none}
  .bar-fill--you{transform:scaleX(.12) !important;transition:none}
  .slot-strip{transform:translateY(-336px) !important;transition:none}
  .btn:hover span[aria-hidden]{transform:none}
  .sticky-cta{transition:none}
}