/* ============================================================
   Guia de Compras Bonificadas — landing
   Paleta e tipografia derivadas das artes originais (Canva).
   ============================================================ */

:root{
  --bg:        #071726;
  --bg-2:      #0A2135;
  --surface:   #11314B;
  --surface-2: #17405F;
  --line:      rgba(255,255,255,.12);

  --green:     #24C55F;
  --green-700: #12933F;
  --gold:      #F5C518;

  --red:       #E5484D;

  --ink:       #F2F7FB;
  --muted:     #A3BBCD;
  --dim:       #7D97AB;

  --wrap: 1120px;
  --r: 14px;
  --shadow: 0 18px 50px rgba(0,0,0,.45);

  /* curvas de saída exponenciais — nada de bounce numa página de venda */
  --ease: cubic-bezier(.2,.7,.3,1);
  --ease-out-quart: cubic-bezier(.25,1,.5,1);
  --ease-out-expo:  cubic-bezier(.16,1,.3,1);
}

/* deixa o <details> do FAQ animar até altura auto onde houver suporte */
@supports (interpolate-size: allow-keywords){
  :root{ interpolate-size: allow-keywords; }
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:Poppins,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:16px;
  line-height:1.6;
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }

::selection{ background:var(--green); color:#04121D; }

:focus-visible{
  outline:3px solid var(--gold);
  outline-offset:3px;
  border-radius:4px;
}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.skip{
  position:absolute; left:50%; top:-100px; transform:translateX(-50%);
  z-index:99; background:var(--gold); color:#04121D; font-weight:700;
  padding:.7rem 1.2rem; border-radius:0 0 var(--r) var(--r); text-decoration:none;
  transition:top .2s var(--ease);
}
.skip:focus{ top:0; }

.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:22px;
}

/* ---------- tipografia base ---------- */

h1,h2,h3{ margin:0; line-height:1.14; letter-spacing:-.02em; font-weight:700; text-wrap:balance; }
h1{ font-size:clamp(1.6rem, 6.4vw, 2.72rem); }
h2{ font-size:clamp(1.55rem, 4.6vw, 2.5rem); }

h1 em, h2 em{ font-style:normal; color:var(--gold); }
h1 b, h2 b{ font-weight:700; color:var(--green); }

p{ margin:0 0 1rem; }

.section-lead{
  color:var(--muted);
  font-size:clamp(1rem,2.2vw,1.12rem);
  max-width:62ch;
  margin-top:1.1rem;
}

.eyebrow{
  display:flex; align-items:center; gap:.55rem;
  margin:0 0 1.15rem;
  font-size:.72rem; font-weight:600; letter-spacing:.19em; text-transform:uppercase;
  color:var(--dim);
}
.eyebrow img{ border-radius:50%; }
.eyebrow--center{ justify-content:center; }

/* ---------- CTA ---------- */

.cta{
  position:relative;
  overflow:hidden;
  display:block;
  width:100%;
  padding:1.05rem 1.4rem;
  border-radius:11px;
  background:linear-gradient(180deg,var(--green),var(--green-700));
  color:#03230F;
  font-size:clamp(1rem,3.4vw,1.16rem);
  font-weight:700;
  letter-spacing:.01em;
  text-align:center;
  text-decoration:none;
  text-transform:uppercase;
  box-shadow:0 10px 26px rgba(18,147,63,.38), inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .16s var(--ease), box-shadow .16s var(--ease), filter .16s var(--ease);
}
.cta:hover{ transform:translateY(-2px); box-shadow:0 16px 34px rgba(18,147,63,.5), inset 0 1px 0 rgba(255,255,255,.35); }
.cta:active{ transform:translateY(0); filter:brightness(.96); }
.cta--big{ padding:1.2rem 1.4rem; font-size:clamp(1.02rem,3.4vw,1.24rem); }

/* brilho que atravessa o botão — uma vez só, quando ele chega.
   Em loop viraria pisca-pisca de anúncio.                      */
.cta::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background:linear-gradient(105deg, transparent 38%, rgba(255,255,255,.4) 50%, transparent 62%);
  transform:translateX(-130%);
}
@keyframes sheen{ to{ transform:translateX(130%); } }
.hero .cta::after{ animation:sheen 1.05s var(--ease-out-quart) .95s both; }
.card.is-in .cta::after{ animation:sheen 1.05s var(--ease-out-quart) .4s both; }

.reassure{
  margin:.85rem 0 0;
  font-size:.83rem;
  color:var(--dim);
  text-align:center;
}

/* ---------- preço ---------- */

.price{ margin:1.5rem 0 1.15rem; }
.price__from{ margin:0; font-size:.98rem; color:var(--muted); }

/* o risco do preço antigo é um traço nosso, não o line-through do
   browser — assim ele pode ser desenhado da esquerda para a direita */
.price__from s{
  position:relative;
  color:#E4626B;
  text-decoration:none;
}
.price__from s::after{
  content:"";
  position:absolute; left:-.06em; right:-.06em; top:.54em;
  height:2px; border-radius:2px;
  background:currentColor;
  transform-origin:left center;
}
@keyframes strike{ from{ transform:scaleX(0); } }
.hero .price__from s::after{ animation:strike .42s var(--ease-out-quart) .52s both; }
.price__now{
  margin:.1rem 0 0;
  font-size:clamp(2.9rem,10vw,3.7rem);
  font-weight:800;
  line-height:1;
  letter-spacing:-.035em;
  color:var(--green);
}
.price__now span{ font-size:.42em; font-weight:700; vertical-align:.42em; margin-right:.06em; }
.price__cents{ vertical-align:.42em; }
.price__terms{ margin:.35rem 0 0; font-size:.86rem; color:var(--dim); }

/* ============================ HERO ============================ */

.hero{
  position:relative;
  overflow:hidden;
  padding:clamp(2.2rem,6vw,4rem) 0 clamp(2.5rem,6vw,4.5rem);
  background:var(--bg);
}

/* o céu vive num pseudo-elemento próprio para poder deslizar com o
   scroll. Mais alto que o hero, sobra folga nas duas pontas.      */
.hero::before{
  content:"";
  position:absolute;
  left:0; right:0; top:-10%;
  height:120%;
  z-index:0;
  background:
    radial-gradient(120% 90% at 78% 12%, rgba(28,86,130,.55), transparent 60%),
    url("assets/ceu.webp") center/cover no-repeat;
  will-change:transform;
}

@supports (animation-timeline: scroll()){
  @media (prefers-reduced-motion: no-preference){
    @keyframes sky{ to{ transform:translateY(6%); } }
    .hero::before{
      animation:sky linear both;
      animation-timeline:scroll(root);
      animation-range:0 90vh;
    }
  }
}

.hero::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(7,23,38,.72) 0%, rgba(7,23,38,.88) 62%, var(--bg) 100%);
  z-index:0;
}

/* No celular a ordem é: título → foto → preço e botão → o resto.
   Assim a arte e o CTA cabem juntos na primeira tela.            */
.hero__grid{
  position:relative; z-index:1;
  width:100%; max-width:var(--wrap);
  margin-inline:auto; padding-inline:22px;
  display:grid; gap:1.3rem;
}

.hero__intro,
.hero__buy,
.hero__more{ max-width:640px; }

/* Coreografia de abertura. CSS puro, sem depender do JS: o pior
   caso de uma animação que não roda é o conteúdo já no lugar.   */
@keyframes rise{ from{ opacity:0; transform:translateY(15px); } }

.hero__intro{ animation:rise .62s var(--ease-out-quart) both; }
.hero__art  { animation:rise .72s var(--ease-out-quart) .1s both; }
.hero__buy  { animation:rise .62s var(--ease-out-quart) .2s both; }
.hero__more { animation:rise .62s var(--ease-out-quart) .28s both; }

.hero .lead{
  margin-top:0;
  color:var(--muted);
  font-size:clamp(1rem,2.4vw,1.14rem);
  max-width:52ch;
}

.checks{
  list-style:none;
  margin:1.15rem 0 0;
  padding:0;
  display:grid;
  gap:.72rem;
}
.checks li{
  position:relative;
  padding-left:2.1rem;
  font-size:.97rem;
  color:var(--ink);
}
.checks li::before{
  content:"";
  position:absolute; left:0; top:.16em;
  width:1.35rem; height:1.35rem;
  border-radius:5px;
  background:var(--green);
  /* check */
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/74% no-repeat,
          linear-gradient(#000,#000);
  -webkit-mask-composite:xor;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/74% no-repeat,
          linear-gradient(#000,#000);
          mask-composite:exclude;
}

.hero__art{ margin:0; }
.hero__art img{
  width:100%;
  /* no celular a foto entra recortada, mostrando rosto e tabela */
  max-height:min(34vh, 300px);
  object-fit:cover;
  object-position:50% 6%;
  /* dissolve as quatro bordas do recorte no fundo de céu da seção */
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0, #000 13%, #000 87%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 11%, #000 80%, transparent 100%);
  -webkit-mask-composite:source-in;
          mask-image:
    linear-gradient(90deg, transparent 0, #000 13%, #000 87%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 11%, #000 80%, transparent 100%);
          mask-composite:intersect;
}

/* ============================ DOR ============================ */

.pain{
  padding:clamp(3rem,8vw,5.5rem) 0;
  background:var(--bg-2);
  border-top:1px solid var(--line);
}

.compare{
  margin-top:2.6rem;
  display:grid;
  gap:.9rem;
  align-items:stretch;
}
.compare__side{
  padding:1.5rem 1.4rem;
  border-radius:var(--r);
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
}
.compare__side--good{
  border-color:rgba(36,197,95,.45);
  background:rgba(36,197,95,.07);
}
.compare__label{
  margin:0 0 .3rem;
  font-size:.74rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--dim);
}
.compare__side--good .compare__label{ color:var(--green); }
.compare__num{
  display:flex; align-items:center; gap:.4rem;
  margin:0;
  font-size:clamp(2.6rem,9vw,3.6rem); font-weight:800; line-height:1;
  letter-spacing:-.04em;
  color:var(--red);
}
.compare__side--good .compare__num{ color:var(--green); }

/* tabular-nums: a largura não pula enquanto o número sobe de 4 a 10 */
.compare__val{
  font-weight:inherit;
  font-variant-numeric:tabular-nums;
}

/* o check se desenha; o X do lado ruim fica parado de propósito */
.mark__draw{
  stroke-dasharray:17;
  stroke-dashoffset:0;
  transition:stroke-dashoffset .5s var(--ease-out-quart) .42s;
}
.motion .pain .wrap:not(.is-in) .mark__draw{ stroke-dashoffset:17; }

/* o X e o check que deixam a comparação óbvia à primeira vista */
.mark{
  flex:0 0 auto;
  margin-left:auto;
  width:clamp(38px,9vw,46px); height:auto;
}
.mark--bad rect{ fill:var(--red); }
.mark--good rect{ fill:var(--green-700); }
.compare__num span{
  display:inline-block;
  margin-left:.4rem;
  font-size:.28em; font-weight:600; letter-spacing:.02em;
  vertical-align:.9em;
  color:var(--muted);
}
.compare__note{ margin:.7rem 0 0; font-size:.92rem; color:var(--muted); }
.compare__vs{
  margin:0;
  align-self:center;
  text-align:center;
  font-size:.74rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--dim);
}

/* ============================ NÃO É UM CURSO ============================ */

.what{ padding:clamp(3rem,8vw,5.5rem) 0; }

.steps__title{
  margin:2.2rem 0 1.1rem;
  font-size:clamp(1.05rem,2.8vw,1.25rem);
  font-weight:600;
  color:var(--ink);
}

.steps{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:1rem;
  counter-reset:s;
}
.steps li{
  display:flex; gap:1rem; align-items:flex-start;
  padding:1.25rem 1.3rem;
  border-radius:var(--r);
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
}
.steps li p{ margin:0; font-size:.98rem; color:var(--muted); }
.steps li b{ color:var(--ink); font-weight:600; }
.steps__n{
  flex:0 0 auto;
  width:2.15rem; height:2.15rem;
  display:grid; place-items:center;
  border-radius:50%;
  background:rgba(245,197,24,.14);
  border:1px solid rgba(245,197,24,.4);
  color:var(--gold);
  font-weight:700; font-size:.95rem;
  transition:transform .42s var(--ease-out-quart) calc(.14s + var(--i,0) * 55ms);
}
.motion .steps:not(.is-in) .steps__n{ transform:scale(.55); }

/* ============================ DENTRO DO GUIA (âncora) ============================ */

.inside{
  padding:clamp(3rem,8vw,5.5rem) 0;
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(28,86,130,.4), transparent 70%),
    var(--bg-2);
  border-top:1px solid var(--line);
  text-align:center;
}
.inside h2{ margin-inline:auto; max-width:18ch; }

.sheet{
  position:relative;
  margin:2.8rem auto 0;
  max-width:860px;
  border-radius:var(--r);
  border:1px solid var(--line);
  background:linear-gradient(180deg,var(--surface),#0E2B42);
  box-shadow:var(--shadow);
  overflow:hidden;
  text-align:left;
}

.sheet__table{
  width:100%;
  border-collapse:collapse;
  font-size:.95rem;
}
.sheet__table thead th{
  padding:.85rem 1.1rem;
  background:rgba(0,0,0,.28);
  border-bottom:1px solid var(--line);
  text-align:left;
  font-size:.68rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  color:var(--dim);
  white-space:nowrap;
}
.sheet__table thead th.n{ color:var(--dim); text-align:right; }
.sheet__table thead th.hid i{ display:none; }
.sheet__table tbody tr{ border-top:1px solid rgba(255,255,255,.07); }
.sheet__table tbody tr:first-child{ border-top:0; }
.sheet__table th[scope="row"]{
  padding:.82rem .9rem;
  text-align:left;
  font-weight:500;
  color:var(--ink);
}
.sheet__table .n{
  padding:.82rem 1.1rem;
  text-align:right;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  color:var(--gold);
  white-space:nowrap;
}
/* no celular sobra uma coluna coberta — o suficiente para a ideia se manter de pé */
.sheet__table .hid{ display:table-cell; padding:.82rem .55rem; }
.sheet__table .hid:nth-last-child(-n+2){ display:none; }
.sheet__table .hid i{
  display:block;
  height:.72rem;
  border-radius:99px;
  background:linear-gradient(90deg,rgba(36,197,95,.75),rgba(245,197,24,.6));
  filter:blur(4px);
  opacity:.75;
  /* o --i vem do <tr> e desce por herança até aqui */
  transform-origin:left center;
  transition:transform .5s var(--ease-out-quart) calc(.22s + var(--i,0) * 38ms);
}
.motion .sheet__table tbody:not(.is-in) .hid i{ transform:scaleX(0); }
.sheet__table tr:nth-child(odd) .hid i{ width:74%; }
.sheet__table tr:nth-child(even) .hid i{ width:56%; }
.sheet__table tr:nth-child(3n) .hid i{ width:88%; }

.sheet__lock{
  margin:0;
  padding:1rem 1.1rem;
  border-top:1px solid var(--line);
  background:rgba(0,0,0,.3);
  font-size:.88rem;
  color:var(--muted);
  text-align:center;
}
.sheet__lock a{
  color:var(--green);
  font-weight:600;
  text-underline-offset:3px;
}

.cols{
  list-style:none;
  margin:2rem auto 0;
  padding:0;
  max-width:860px;
  display:grid;
  gap:.55rem;
  text-align:left;
}
.cols li{
  position:relative;
  padding-left:1.5rem;
  font-size:.92rem;
  color:var(--muted);
}
.cols li::before{
  content:"";
  position:absolute; left:.35rem; top:.62em;
  width:6px; height:6px; border-radius:50%;
  background:var(--gold);
}

/* ============================ BÔNUS ============================ */

.bonus{
  position:relative;
  padding:clamp(3rem,8vw,5.5rem) 0;
  background:
    linear-gradient(180deg, rgba(7,23,38,.86), rgba(7,23,38,.94)),
    url("assets/aviao.webp") left bottom/clamp(280px,55%,560px) no-repeat,
    var(--bg);
}
.bonus__grid{ display:grid; gap:2rem; }
.bonus__copy .eyebrow{ color:var(--gold); }
.bonus__copy h2{ color:var(--ink); }

.bonus__list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:.7rem;
}
.bonus__list li{
  position:relative;
  padding:1rem 1.1rem 1rem 3.1rem;
  border-radius:11px;
  border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.04));
  font-size:.95rem;
  font-weight:500;
}
.bonus__list li::before{
  content:"";
  position:absolute; left:1.05rem; top:1.15rem;
  width:1.2rem; height:1.2rem;
  border-radius:5px;
  background:var(--green);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/74% no-repeat,
          linear-gradient(#000,#000);
  -webkit-mask-composite:xor;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/74% no-repeat,
          linear-gradient(#000,#000);
          mask-composite:exclude;
  transition:transform .4s var(--ease-out-quart) calc(.2s + var(--i,0) * 55ms);
}
.motion .bonus__list:not(.is-in) li::before{ transform:scale(.4); }

/* ============================ OFERTA ============================ */

.offer{
  padding:clamp(3rem,8vw,5.5rem) 0 clamp(3.5rem,9vw,6rem);
  background:
    radial-gradient(90% 70% at 20% 20%, rgba(28,86,130,.45), transparent 65%),
    var(--bg-2);
  border-top:1px solid var(--line);
}
.offer__grid{ display:grid; gap:2.2rem; align-items:center; }
.offer__art{ margin:0; }
.offer__art img{ width:100%; border-radius:14px; }

.card{
  padding:clamp(1.6rem,4.5vw,2.2rem);
  border-radius:18px;
  border:1px solid rgba(255,255,255,.16);
  background:linear-gradient(180deg,var(--surface-2),#0F2E47);
  box-shadow:var(--shadow);
  text-align:center;
}
.card h2{ font-size:clamp(1.45rem,4.4vw,1.85rem); }
.card__specs{
  margin:.9rem 0 0;
  padding-top:.9rem;
  border-top:1px solid var(--line);
  font-size:.95rem;
  color:var(--ink);
}
.card__bonus{ margin:.25rem 0 0; font-size:.95rem; font-weight:600; color:var(--gold); }
.card__desc{
  margin:.9rem 0 0;
  padding-top:.9rem;
  border-top:1px solid var(--line);
  font-size:.92rem;
  color:var(--muted);
}
.price--card{ margin:1.1rem 0 1.5rem; }

/* ============================ FAQ ============================ */

.faq{ padding:clamp(3rem,8vw,5rem) 0 clamp(4rem,9vw,6rem); }
.faq h2{ text-align:center; margin-bottom:2.2rem; }

.faq details{
  border-bottom:1px solid var(--line);
  max-width:760px;
  margin-inline:auto;
}
.faq summary{
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding:1.15rem .2rem;
  font-weight:600;
  font-size:1rem;
  cursor:pointer;
  list-style:none;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+";
  flex:0 0 auto;
  font-size:1.5rem;
  font-weight:400;
  line-height:1;
  color:var(--green);
  transition:transform .2s var(--ease);
}
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq__body p{
  margin:0;
  padding:0 .2rem 1.3rem;
  color:var(--muted);
  font-size:.95rem;
  max-width:66ch;
  text-wrap:pretty;
}

/* a resposta desliza para dentro — funciona em qualquer browser */
.faq details[open] .faq__body{ animation:rise .34s var(--ease-out-quart) both; }

/* e onde ::details-content existe, a altura acompanha em vez de saltar */
@supports selector(details::details-content){
  .faq details::details-content{
    block-size:0;
    overflow:hidden;
    transition:block-size .34s var(--ease-out-quart), content-visibility .34s allow-discrete;
  }
  .faq details[open]::details-content{ block-size:auto; }
}

/* ============================ RODAPÉ ============================ */

.foot{
  padding:2.6rem 0 max(2.6rem, env(safe-area-inset-bottom));
  background:#050F19;
  border-top:1px solid var(--line);
  text-align:center;
}
.foot img{ margin:0 auto 1.1rem; border-radius:50%; opacity:.85; }
.foot__legal{
  margin:0 auto .8rem;
  max-width:62ch;
  font-size:.79rem;
  line-height:1.6;
  color:var(--dim);
}
.foot__contact{ margin:0; font-size:.79rem; color:var(--dim); }
.foot__contact a{ color:var(--muted); }

/* ============================ BARRA FIXA ============================ */

.bar{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:40;
  display:flex; align-items:center; gap:.9rem;
  padding:.7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
  background:rgba(7,23,38,.94);
  -webkit-backdrop-filter:blur(10px);
          backdrop-filter:blur(10px);
  border-top:1px solid var(--line);
  transform:translateY(110%);
  opacity:0;
  transition:transform .34s var(--ease-out-expo), opacity .2s linear;
}
.bar.is-visible{ transform:translateY(0); opacity:1; }
.bar[hidden]{ display:none; }
.bar__price{ flex:0 0 auto; line-height:1.15; }
.bar__price s{ display:block; font-size:.7rem; color:var(--dim); }
.bar__price b{ font-size:1.15rem; font-weight:800; color:var(--green); }
.cta--bar{ flex:1 1 auto; padding:.85rem 1rem; font-size:.92rem; }

/* ============================ REVEAL ============================
   Regra de ouro desta seção: nada aqui esconde conteúdo por conta
   própria. Todo estado inicial depende de .motion no <html>, que só
   existe depois que o script rodou. Se o JS falhar, a página inteira
   aparece normalmente — numa landing de tráfego pago, seção em
   branco é dinheiro queimado em silêncio.
   ================================================================= */

.motion [data-reveal]:not([data-stagger]){
  opacity:0;
  transform:translateY(18px);
  transition:opacity .55s var(--ease-out-quart), transform .55s var(--ease-out-quart);
}
.motion [data-reveal]:not([data-stagger]).is-in{ opacity:1; transform:none; }

/* "lift" sobe sem sumir. É para os blocos que já têm filhos
   animando dentro — duas opacidades em cascata se multiplicam e
   dão aquele piscar sujo no meio da transição.                  */
.motion [data-reveal="lift"]:not([data-stagger]){
  opacity:1;
  transform:translateY(26px) scale(.99);
}

.motion [data-stagger] > *{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .5s var(--ease-out-quart), transform .5s var(--ease-out-quart);
  transition-delay:calc(var(--i,0) * 55ms);
}
.motion [data-stagger].is-in > *{ opacity:1; transform:none; }

/* a tabela tem 9 linhas: no ritmo dos cartões viraria fila de banco */
.motion .sheet__table tbody > *{ transition-delay:calc(var(--i,0) * 38ms); }

/* ============================ BREAKPOINTS ============================ */

@media (min-width:640px){
  .compare{
    grid-template-columns:1fr auto 1fr;
    gap:1.2rem;
  }
  .compare__vs{ writing-mode:vertical-rl; letter-spacing:.22em; }
  .cols{ grid-template-columns:1fr 1fr; gap:.7rem 2rem; }
  .cta{ display:inline-block; width:auto; min-width:300px; }
  .reassure{ text-align:left; }
  .card .cta{ display:block; width:100%; }
  .card .reassure{ text-align:center; }
}

@media (min-width:860px){
  .hero{ padding-top:clamp(2.6rem,5vw,3.4rem); }
  .hero__grid{
    grid-template-columns:1.08fr .92fr;
    grid-template-areas:
      "intro art"
      "more  art"
      "buy   art";
    align-items:start;
    gap:1.15rem 2rem;
  }
  .hero__intro{ grid-area:intro; }
  .hero__more{ grid-area:more; }
  .hero__buy{ grid-area:buy; }
  .hero__art{ grid-area:art; align-self:center; }
  .hero__art img{ max-height:none; object-fit:fill; }
  .steps{ grid-template-columns:repeat(3,1fr); gap:1.1rem; }
  .steps li{ flex-direction:column; gap:.9rem; }

  .sheet__head{ grid-template-columns:1.6fr .7fr 1fr 1fr 1.2fr; }
  .sheet__head span:nth-child(n+3){ display:block; }
  .sheet__head span:nth-child(2){ text-align:right; }
  .sheet__table .hid:nth-last-child(-n+2){ display:table-cell; }
  .sheet__table th[scope="row"]{ width:34%; }
  .sheet__table .n{ width:12%; }

  .bonus__grid{ grid-template-columns:1fr 1fr; gap:3rem; align-items:center; }
  .offer__grid{ grid-template-columns:1.05fr .95fr; gap:3rem; }
  .bar{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-delay:0ms !important;
    transition-duration:.001ms !important;
    transition-delay:0ms !important;
  }
  /* cinto de segurança: se .motion tiver entrado antes da
     preferência mudar, nada fica escondido mesmo assim */
  .motion [data-reveal],
  .motion [data-stagger] > *{ opacity:1 !important; transform:none !important; }
  .motion .sheet__table tbody:not(.is-in) .hid i,
  .motion .steps:not(.is-in) .steps__n,
  .motion .bonus__list:not(.is-in) li::before{ transform:none !important; }
  .motion .pain .wrap:not(.is-in) .mark__draw{ stroke-dashoffset:0 !important; }
  .cta::after{ display:none; }
}