/* =========================================================
   WhatsApp que Vende — Nortea Ads
   Página de vendas | mobile-first
   ========================================================= */

:root{
  /* Paleta Nortea Ads */
  --deep-teal:#0B2831;
  --petrol:#0F4651;
  --gold:#C6A15B;           /* dourado da marca: filetes, botões e fundos escuros */
  --gold-soft:#E0C48D;      /* dourado claro: texto sobre azul-petróleo */
  --gold-ink:#7A5C24;       /* dourado escuro: texto pequeno sobre marfim/branco (AA) */
  --ivory:#F6F2EA;
  --sage:#DDE9E4;
  --ink:#25383C;
  --muted:#6C7A7D;          /* uso decorativo (bordas, ícones) */
  --muted-text:#55666A;     /* texto secundário — contraste AA */
  --white:#FFFFFF;
  --line:rgba(11,40,49,.12);
  --line-light:rgba(246,242,234,.18);

  --font-head:"Libre Baskerville",Georgia,"Times New Roman",serif;
  --font-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --wrap:1180px;
  --radius:12px;
  --pill:999px;
  --pad-x:20px;
  --section-y:60px;
  --shadow-soft:0 18px 40px -22px rgba(11,40,49,.45);
  --shadow-mockup:0 34px 60px -28px rgba(11,40,49,.55);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.65;
  color:var(--ink);
  background:var(--ivory);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,p,ul,ol,dl,dd,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
button{font:inherit;color:inherit}

.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-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--gold);color:var(--deep-teal);
  padding:12px 20px;border-radius:0 0 var(--radius) 0;font-weight:600;
}
.skip-link:focus{left:0}

/* ---------- Foco visível global ---------- */
a:focus-visible,button:focus-visible{
  outline:3px solid var(--gold);
  outline-offset:3px;
  border-radius:4px;
}
.section--dark a:focus-visible,.section--dark button:focus-visible,
.footer a:focus-visible,.footer button:focus-visible{outline-color:var(--gold-soft)}

/* ---------- Layout ---------- */
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--pad-x)}
.wrap--narrow{max-width:820px}

.section{padding:var(--section-y) 0;position:relative}
.section--white{background:var(--white)}
.section--ivory{background:var(--ivory)}
.section--sage{background:var(--sage)}
.section--dark{background:var(--deep-teal);color:var(--ivory)}

/* ---------- Tipografia ---------- */
.h1{
  font-family:var(--font-head);
  font-weight:700;
  font-size:clamp(1.75rem,6.2vw,2.15rem);
  line-height:1.22;
  letter-spacing:-.005em;
  color:var(--deep-teal);
  margin:0 0 16px;
  text-wrap:balance;
}
.h2{
  font-family:var(--font-head);
  font-weight:700;
  font-size:clamp(1.4rem,4.8vw,1.75rem);
  line-height:1.28;
  color:var(--deep-teal);
  margin:0 0 14px;
  text-wrap:balance;
}
.h2--sm{font-size:clamp(1.25rem,4.2vw,1.5rem)}
.section--dark .h2{color:var(--white)}

.eyebrow{
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--petrol);
  margin:0 0 14px;
  display:flex;
  align-items:center;
  gap:10px;
  line-height:1.4;
}
.eyebrow::before{
  content:"";
  flex:0 0 26px;
  height:1px;
  background:var(--gold);
}
.eyebrow--gold{color:var(--gold-soft)}
.head--center .eyebrow{justify-content:center}

.intro{color:var(--muted-text);font-size:1rem;max-width:62ch;margin-top:4px}
.intro--light{color:var(--sage)}
.head{margin-bottom:32px;max-width:760px}
.head--center{margin-left:auto;margin-right:auto;text-align:center}

.brandmark{
  font-size:.78rem;font-weight:700;letter-spacing:.18em;
  color:var(--deep-teal);margin:0 0 20px;
}
.brandmark__gold{color:var(--gold-ink)}
.footer .brandmark{color:var(--white);margin-bottom:8px}
.footer .brandmark__gold{color:var(--gold)} /* sobre fundo escuro o dourado original já passa AA */

.microcopy{
  font-size:.83rem;color:var(--muted-text);margin-top:14px;line-height:1.5;
}
.microcopy--light{color:var(--sage);opacity:.92}
.link{color:var(--petrol);text-decoration:underline;text-underline-offset:2px}

/* ---------- Botões ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:54px;
  padding:15px 26px;
  border-radius:var(--pill);
  font-weight:600;
  font-size:1rem;
  line-height:1.3;
  text-align:center;
  text-decoration:none;
  border:2px solid transparent;
  cursor:pointer;
  transition:background-color .18s ease,color .18s ease,transform .18s ease,box-shadow .18s ease;
  max-width:100%;
}
.btn--block{display:flex;width:100%}
.btn--gold{
  background:var(--gold);
  color:var(--deep-teal);
  box-shadow:0 10px 24px -14px rgba(11,40,49,.6);
}
.btn--gold:hover{background:var(--gold-soft);transform:translateY(-1px)}
.btn--gold:active{transform:translateY(0);background:#B8914C}
.btn--dark{background:var(--deep-teal);color:var(--white)}
.btn--dark:hover{background:var(--petrol);transform:translateY(-1px)}
.btn--dark:active{transform:translateY(0)}
.btn.is-loading{opacity:.72;pointer-events:none}
.btn.is-loading::after{
  content:"";
  width:16px;height:16px;flex:0 0 16px;
  border:2px solid currentColor;border-top-color:transparent;
  border-radius:50%;
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

.cta-block{margin-top:26px}

/* =========================================================
   TOP BAR
   ========================================================= */
.topbar{background:var(--deep-teal);color:var(--ivory);padding:10px 0}
.topbar p{
  margin:0;font-size:.78rem;line-height:1.45;text-align:center;
  letter-spacing:.01em;color:#E8EEEC;
}

/* =========================================================
   HERO
   ========================================================= */
.hero{background:var(--ivory);overflow:hidden;padding-top:44px}
.hero__grid{display:grid;gap:44px}
.hero__text{max-width:620px}
.lead{font-size:1.03rem;color:var(--ink);margin-bottom:14px;max-width:58ch}
.support{font-size:.97rem;color:var(--muted-text);max-width:58ch}

/* Mockup do ebook (capa real do PDF) */
.hero__media{display:flex;justify-content:center}
.mockup{margin:0;width:100%;max-width:420px;position:relative}
/* A altura da pilha é definida pela própria capa (fluxo normal),
   evitando espaço vazio abaixo do mockup. */
.mockup__stack{position:relative;isolation:isolate}
.mockup__cover,.mockup__page{
  border-radius:3px 8px 8px 3px;
  background:var(--white);
}
.mockup__cover{
  position:relative;
  width:70%;
  z-index:3;
  box-shadow:var(--shadow-mockup);
  border-left:4px solid rgba(198,161,91,.85);
  transform:rotate(-1.6deg);
}
.mockup__page{
  position:absolute;
  z-index:1;
  border:1px solid rgba(11,40,49,.10);
  box-shadow:0 16px 34px -24px rgba(11,40,49,.5);
}
.mockup__page--a{
  right:0;top:6%;width:54%;
  transform:rotate(3.2deg);
  z-index:2;
}
.mockup__page--b{
  right:1%;top:14%;width:50%;
  transform:rotate(7deg);
  z-index:1;
  opacity:.96;
}
.mockup__badge{
  position:relative;
  z-index:4;
  margin:20px auto 0;
  width:fit-content;
  max-width:100%;
  background:var(--deep-teal);
  color:var(--ivory);
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.02em;
  padding:9px 18px;
  border-radius:var(--pill);
  border:1px solid rgba(198,161,91,.55);
  text-align:center;
  line-height:1.4;
}

/* =========================================================
   PROBLEMA
   ========================================================= */
.pain-grid{display:grid;gap:14px}
.pain{
  display:flex;
  gap:14px;
  align-items:flex-start;
  background:var(--ivory);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:18px 20px;
  font-size:.97rem;
  line-height:1.55;
  color:var(--ink);
}
.pain__icon{flex:0 0 20px;color:var(--petrol);margin-top:2px}
.closing{
  margin-top:30px;
  font-size:1.02rem;
  color:var(--ink);
  padding-left:18px;
  border-left:2px solid var(--gold);
  max-width:60ch;
}
.closing strong{font-weight:600}

/* =========================================================
   PRODUTO (bloco escuro)
   ========================================================= */
.stats{
  display:grid;
  gap:0;
  margin:36px 0 0;
  border:1px solid var(--line-light);
  border-radius:var(--radius);
  overflow:hidden;
}
.stat{
  padding:24px 20px;
  text-align:center;
  border-bottom:1px solid var(--line-light);
}
.stat:last-child{border-bottom:0}
.stat__num{
  font-family:var(--font-head);
  font-weight:700;
  font-size:2.3rem;
  line-height:1;
  color:var(--gold);
  margin:0 0 6px;
}
.stat__label{
  margin:0;
  font-size:.86rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--sage);
}

/* =========================================================
   BENEFÍCIOS
   ========================================================= */
.benefit-grid{display:grid;gap:16px}
.benefit{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:24px 22px;
  box-shadow:0 2px 0 rgba(11,40,49,.02);
}
.benefit__rule{display:block;width:34px;height:2px;background:var(--gold);margin-bottom:14px}
.benefit__title{
  font-family:var(--font-head);
  font-size:1.03rem;
  font-weight:700;
  line-height:1.35;
  color:var(--deep-teal);
  margin:0 0 8px;
}
.benefit p{font-size:.95rem;color:var(--muted-text);line-height:1.6}

/* =========================================================
   MÉTODO CCA
   ========================================================= */
.steps{display:grid;gap:16px;counter-reset:none}
.step{
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:24px 22px;
  background:var(--ivory);
}
.step__num{
  font-family:var(--font-head);
  font-size:1.15rem;
  font-weight:700;
  color:var(--gold-ink);
  margin:0 0 8px;
  letter-spacing:.04em;
}
.step__title{
  font-family:var(--font-head);
  font-size:1.12rem;
  color:var(--deep-teal);
  margin:0 0 8px;
  line-height:1.3;
}
.step__desc{font-size:.95rem;color:var(--muted-text);line-height:1.6}

.compare{display:grid;gap:18px;margin-top:34px}
.compare__col{
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:22px;
  background:var(--white);
}
.compare__col--after{background:var(--ivory);border-color:rgba(198,161,91,.45)}
.compare__label{
  font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted-text);margin:0 0 12px;
}
.compare__label--gold{color:var(--petrol)}
.bubble{
  position:relative;
  border-radius:14px;
  padding:16px 18px;
  font-size:.97rem;
  line-height:1.6;
}
.bubble::after{
  content:"";position:absolute;bottom:-8px;left:22px;
  width:0;height:0;border:9px solid transparent;border-top-width:10px;border-bottom:0;
}
.bubble--before{background:#EDEFEF;color:var(--muted-text);border:1px solid rgba(11,40,49,.1)}
.bubble--before::after{border-top-color:#EDEFEF}
.bubble--after{background:var(--sage);color:var(--ink);border:1px solid rgba(15,70,81,.18)}
.bubble--after::after{border-top-color:var(--sage)}

/* =========================================================
   CONTEÚDO / TIMELINE
   ========================================================= */
.timeline{
  display:grid;
  gap:0;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--white);
  overflow:hidden;
}
.tl{
  display:grid;
  grid-template-columns:74px 1fr;
  gap:16px;
  align-items:start;
  padding:18px 20px;
  border-bottom:1px solid var(--line);
}
.tl:last-child{border-bottom:0}
.tl__range{
  font-family:var(--font-head);
  font-size:.9rem;
  font-weight:700;
  color:var(--gold-ink);
  letter-spacing:.02em;
  margin:0;
  padding-top:2px;
  white-space:nowrap;
}
.tl__title{
  font-family:var(--font-head);
  font-size:1rem;
  color:var(--deep-teal);
  margin:0 0 4px;
  line-height:1.35;
}
.tl__body p{font-size:.92rem;color:var(--muted-text);line-height:1.55}

.extras{
  margin-top:24px;
  background:var(--white);
  border:1px solid var(--line);
  border-left:3px solid var(--gold);
  border-radius:var(--radius);
  padding:24px 22px;
}
.extras__title{
  font-family:var(--font-head);
  font-size:1.02rem;
  color:var(--deep-teal);
  margin:0 0 14px;
}
.extras__list{display:grid;gap:10px}
.extras__list li{
  position:relative;
  padding-left:22px;
  font-size:.95rem;
  color:var(--ink);
  line-height:1.55;
}
.extras__list li::before{
  content:"";
  position:absolute;left:0;top:.6em;
  width:8px;height:8px;border-radius:50%;
  background:var(--petrol);
}

/* =========================================================
   PRÉVIA DO PRODUTO
   ========================================================= */
.preview-grid{display:grid;gap:20px}
.pv{
  background:var(--ivory);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:24px 22px;
}
.pv__head{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.pv__num{
  flex:0 0 auto;
  font-family:var(--font-head);
  font-size:.88rem;font-weight:700;
  color:var(--deep-teal);
  background:var(--gold);
  width:38px;height:38px;
  display:grid;place-items:center;
  border-radius:50%;
  margin:0;
}
.pv__title{
  font-family:var(--font-head);
  font-size:1.08rem;
  color:var(--deep-teal);
  margin:0;
  line-height:1.3;
}
.pv__tag{
  font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--petrol);margin:0 0 10px;
}
.pv__msg{
  margin:0 0 14px;
  background:var(--white);
  border:1px solid rgba(15,70,81,.18);
  border-left:3px solid var(--petrol);
  border-radius:10px;
  padding:16px 18px;
}
.pv__msg p{font-size:.97rem;line-height:1.65;color:var(--ink)}
.pv__msg p::before{content:"\201C"}
.pv__msg p::after{content:"\201D"}
.pv__why{font-size:.9rem;color:var(--muted-text);line-height:1.6}
.pv__why strong{color:var(--ink);font-weight:600}

/* =========================================================
   PARA QUEM É
   ========================================================= */
.fit{display:grid;gap:18px}
.fit__card{
  border-radius:var(--radius);
  padding:26px 24px;
  border:1px solid var(--line);
  background:var(--white);
}
.fit__card--yes{border-color:rgba(15,70,81,.3)}
.fit__card--no{background:#F1F1EE;border-color:rgba(11,40,49,.14)}
.fit__title{
  font-family:var(--font-head);
  font-size:1.08rem;
  color:var(--deep-teal);
  margin:0 0 16px;
  display:flex;align-items:center;gap:12px;
}
.fit__mark{
  flex:0 0 30px;width:30px;height:30px;
  display:grid;place-items:center;border-radius:50%;
}
.fit__mark--yes{background:var(--petrol);color:var(--white)}
.fit__mark--no{background:#7A5A5A;color:var(--white)}
.fit__list{display:grid;gap:12px}
.fit__list li{
  position:relative;padding-left:20px;
  font-size:.95rem;line-height:1.55;color:var(--ink);
}
.fit__list li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:7px;height:7px;border-radius:50%;background:var(--muted);
}
.fit__card--yes .fit__list li::before{background:var(--petrol)}

/* =========================================================
   OFERTA
   ========================================================= */
.offer{
  display:grid;
  gap:0;
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid rgba(198,161,91,.4);
  box-shadow:var(--shadow-soft);
}
.offer__list-col{background:rgba(255,255,255,.05);padding:28px 24px}
.offer__subtitle{
  font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-soft);margin:0 0 18px;
}
.offer__list{display:grid;gap:13px}
.offer__list li{
  position:relative;padding-left:28px;
  font-size:.97rem;line-height:1.55;color:var(--ivory);
}
.offer__list li::before{
  content:"";
  position:absolute;left:0;top:.42em;
  width:15px;height:8px;
  border-left:2px solid var(--gold);
  border-bottom:2px solid var(--gold);
  transform:rotate(-45deg);
}
.offer__buy{
  background:var(--white);
  padding:30px 24px;
  text-align:center;
}
.offer__price-label{
  font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted-text);margin:0 0 8px;
}
.offer__price{
  font-family:var(--font-head);
  font-size:clamp(2.4rem,10vw,3rem);
  font-weight:700;
  line-height:1.05;
  color:var(--deep-teal);
  margin:0 0 10px;
}
.offer__delivery{
  font-size:.9rem;color:var(--muted-text);margin:0 0 22px;line-height:1.5;
}
.offer__buy .microcopy{color:var(--muted-text)}

/* =========================================================
   GARANTIA
   ========================================================= */
.guarantee{
  display:grid;
  grid-template-columns:64px 1fr;
  gap:22px;
  align-items:start;
  padding:28px 24px;
  background:var(--white);
  border:1px solid rgba(198,161,91,.45);
  border-radius:var(--radius);
  box-shadow:var(--shadow-soft);
}
.guarantee__seal{
  width:64px;height:64px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--deep-teal);color:var(--gold-soft);
  border:2px solid var(--gold);
  font-family:var(--font-head);font-size:1.8rem;font-weight:700;
}
.guarantee p{color:var(--muted-text);font-size:.96rem;line-height:1.65}
.guarantee .eyebrow{margin-bottom:10px}
.guarantee__note{margin-top:10px;font-size:.86rem!important}

/* =========================================================
   USO RESPONSÁVEL
   ========================================================= */
.note{
  background:var(--white);
  border:1px solid rgba(15,70,81,.18);
  border-radius:var(--radius);
  padding:30px 24px;
}
.note__body{font-size:.98rem;color:var(--muted-text);line-height:1.65;margin-bottom:20px}
.note__highlight{
  font-family:var(--font-head);
  font-style:italic;
  font-size:1.02rem;
  color:var(--petrol);
  padding-left:16px;
  border-left:2px solid var(--gold);
  line-height:1.5;
}

/* =========================================================
   FAQ
   ========================================================= */
.accordion{
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--white);
}
.acc{border-bottom:1px solid var(--line)}
.acc:last-child{border-bottom:0}
.acc__h{margin:0;font-size:1rem}
.acc__btn{
  width:100%;
  min-height:58px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:17px 20px;
  background:transparent;
  border:0;
  text-align:left;
  font-family:var(--font-body);
  font-size:1rem;
  font-weight:600;
  line-height:1.45;
  color:var(--deep-teal);
  cursor:pointer;
  transition:background-color .16s ease;
}
.acc__btn:hover{background:var(--ivory)}
.acc__btn[aria-expanded="true"]{background:var(--ivory)}
.acc__icon{
  position:relative;
  flex:0 0 18px;width:18px;height:18px;
  margin-top:2px;
}
.acc__icon::before,.acc__icon::after{
  content:"";position:absolute;left:50%;top:50%;
  background:var(--petrol);
  transform:translate(-50%,-50%);
  transition:transform .2s ease,opacity .2s ease;
}
.acc__icon::before{width:14px;height:2px}
.acc__icon::after{width:2px;height:14px}
.acc__btn[aria-expanded="true"] .acc__icon::after{transform:translate(-50%,-50%) scaleY(0);opacity:0}
.acc__panel{padding:0 20px 20px}
.acc__panel p{font-size:.96rem;color:var(--muted-text);line-height:1.65}

/* =========================================================
   CTA FINAL
   ========================================================= */
.final{text-align:center}
.final__rule{display:block;width:44px;height:2px;background:var(--gold);margin:0 auto 22px}
.final__sub{
  font-size:1rem;color:var(--muted-text);line-height:1.6;
  max-width:52ch;margin:0 auto 26px;
}
.final .btn{margin:0 auto}

/* =========================================================
   RODAPÉ
   ========================================================= */
.footer{background:var(--deep-teal);color:var(--sage);padding:44px 0 0}
.footer__grid{display:grid;gap:26px;padding-bottom:26px}
.footer__tag{font-size:.9rem;color:var(--sage);opacity:.85;margin:0}
.footer__nav ul{display:grid;gap:12px}
.footer__nav a{
  font-size:.92rem;
  color:var(--sage);
  text-decoration:none;
  border-bottom:1px solid transparent;
  display:inline-block;
  padding:2px 0;
  transition:color .16s ease,border-color .16s ease;
}
.footer__nav a:hover{color:var(--gold-soft);border-bottom-color:var(--gold)}
.footer__legal{
  border-top:1px solid var(--line-light);
  padding-top:20px;padding-bottom:28px;
}
.footer__legal p{font-size:.8rem;color:var(--sage);opacity:.8;line-height:1.6;margin:0}
.footer__disclaimer{margin-top:8px !important;max-width:70ch}

/* =========================================================
   CONSENTIMENTO DE MEDIÇÃO
   ========================================================= */
.consent{
  position:fixed;left:16px;right:16px;bottom:16px;z-index:120;
  max-width:520px;margin-left:auto;
  padding:20px;background:var(--white);color:var(--ink);
  border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 20px 60px rgba(11,40,49,.28);
}
.consent p{font-size:.88rem;line-height:1.5;margin:0 0 10px}
.consent__actions{display:flex;gap:10px;margin:14px 0 8px}
.consent button{border:0;border-radius:var(--pill);padding:10px 18px;font-weight:600;cursor:pointer}
.consent__accept{background:var(--deep-teal);color:var(--white)}
.consent__reject{background:var(--sage);color:var(--deep-teal)}
.consent>a{font-size:.78rem;color:var(--petrol)}

@media (max-width:520px){
  .guarantee{grid-template-columns:1fr}
  .guarantee__seal{width:54px;height:54px;font-size:1.5rem}
}

/* =========================================================
   CTA FIXO MOBILE
   ========================================================= */
.sticky{
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:90;
  background:rgba(11,40,49,.97);
  backdrop-filter:blur(6px);
  border-top:1px solid rgba(198,161,91,.4);
  padding:10px var(--pad-x) calc(10px + env(safe-area-inset-bottom));
  transform:translateY(110%);
  transition:transform .28s ease;
}
.sticky.is-visible{transform:translateY(0)}
.sticky__inner{
  display:flex;align-items:center;gap:10px;
  max-width:var(--wrap);margin:0 auto;
}
.sticky__btn{flex:1 1 auto;min-height:52px;padding:13px 18px;font-size:.97rem}
.sticky__close{
  flex:0 0 44px;width:44px;height:44px;
  display:grid;place-items:center;
  background:transparent;
  border:1px solid rgba(246,242,234,.28);
  border-radius:50%;
  color:var(--sage);
  cursor:pointer;
  transition:background-color .16s ease,color .16s ease;
}
.sticky__close:hover{background:rgba(246,242,234,.12);color:var(--white)}
/* espaço extra no rodapé enquanto a barra estiver visível */
body.has-sticky .footer__legal{padding-bottom:calc(28px + 76px)}

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

/* --- ≥ 560px: grids de 2 colunas --- */
@media (min-width:560px){
  :root{--pad-x:28px}
  .pain-grid,.benefit-grid{grid-template-columns:repeat(2,1fr)}
  /* stretch mantém cartões vizinhos com a mesma altura */
  .fit{grid-template-columns:repeat(2,1fr);align-items:stretch}
  .compare{grid-template-columns:repeat(2,1fr);align-items:stretch}
  .stats{grid-template-columns:repeat(3,1fr)}
  .stat{border-bottom:0;border-right:1px solid var(--line-light)}
  .stat:last-child{border-right:0}
}

/* --- ≥ 768px: desktop --- */
@media (min-width:768px){
  :root{--section-y:88px;--pad-x:32px}
  body{font-size:17px}

  .h1{font-size:clamp(2.2rem,3.6vw,2.85rem);line-height:1.16}
  .h2{font-size:clamp(1.75rem,2.6vw,2.1rem)}
  .h2--sm{font-size:1.6rem}
  .eyebrow{font-size:.75rem}
  .lead{font-size:1.1rem}
  .support{font-size:1rem}

  .hero{padding-top:72px}
  .hero__grid{
    grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
    align-items:center;
    gap:56px;
  }
  .mockup{max-width:460px}

  .head{margin-bottom:44px}
  .timeline{grid-template-columns:repeat(2,1fr)}
  .tl{border-bottom:1px solid var(--line)}
  .tl:nth-child(odd){border-right:1px solid var(--line)}
  .tl:nth-last-child(-n+2){border-bottom:0}

  .preview-grid{grid-template-columns:repeat(2,1fr);gap:24px;align-items:stretch}
  .pain{padding:22px 24px}
  .benefit{padding:28px 26px}
  .steps{grid-template-columns:repeat(3,1fr)}
  .step{padding:30px 26px}

  .offer{grid-template-columns:1.1fr .9fr;align-items:stretch}
  .offer__list-col{padding:40px 36px}
  .offer__buy{
    padding:44px 36px;
    display:flex;flex-direction:column;justify-content:center;
  }

  .note{padding:44px 40px}
  .extras{padding:32px 34px}
  .extras__list{grid-template-columns:repeat(2,1fr);gap:12px 28px}
  .acc__btn{padding:20px 26px;font-size:1.05rem}
  .acc__panel{padding:0 26px 24px}

  .footer{padding-top:56px}
  .footer__grid{
    grid-template-columns:1fr auto;
    align-items:start;
    gap:40px;
    padding-bottom:32px;
  }
  .footer__nav ul{
    display:flex;flex-wrap:wrap;gap:8px 26px;justify-content:flex-end;
  }

  /* CTA fixo é exclusivo de telas pequenas */
  .sticky{display:none !important}
  body.has-sticky .footer__legal{padding-bottom:28px}
}

/* --- ≥ 1024px --- */
@media (min-width:1024px){
  :root{--section-y:104px;--pad-x:40px}
  .hero{padding-top:88px}
  .hero__grid{gap:72px}
  .mockup{max-width:500px}
  .pain-grid,.benefit-grid{grid-template-columns:repeat(3,1fr)}
  .timeline{grid-template-columns:repeat(2,1fr)}
  .compare{gap:26px}
}

/* --- ≥ 1280px --- */
@media (min-width:1280px){
  :root{--section-y:112px}
  .mockup{max-width:520px}
}

/* =========================================================
   MOVIMENTO REDUZIDO
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .btn:hover{transform:none}
  .sticky{transition:none}
}

/* =========================================================
   IMPRESSÃO
   ========================================================= */
@media print{
  .sticky,.topbar,.skip-link{display:none !important}
  body{background:#fff;color:#000}
  .section{padding:24px 0;break-inside:avoid}
}