:root{
  --rose:#d1477f;
  --rose-deep:#a83568;
  --ink:#2c2230;
  --muted:#7a7080;
  --bg:#ffffff;
  --cream:#fff7fb;
  --soft:#fbeef4;
  --line:#f1dbe7;
  --radius:20px;
  --shadow:0 14px 40px rgba(168,53,104,.12);
  --shadow-sm:0 6px 18px rgba(168,53,104,.10);
  --wrap:1040px;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--bg);line-height:1.6}
img{max-width:100%;height:auto;display:block}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 22px}
h1,h2,h3{font-family:var(--serif);line-height:1.15;margin:0 0 .4em;font-weight:700}
p{margin:0 0 1em}

.topbar{background:var(--rose);color:#fff;text-align:center;font-weight:700;font-size:.86rem;letter-spacing:.02em;padding:11px 16px}

/* botoes */
.btn{display:inline-block;text-decoration:none;font-weight:800;border-radius:999px;padding:17px 30px;text-align:center;cursor:pointer;transition:transform .05s ease,box-shadow .2s ease}
.btn--primary{background:linear-gradient(135deg,var(--rose),var(--rose-deep));color:#fff;box-shadow:0 10px 24px rgba(168,53,104,.30)}
.btn--primary:hover{box-shadow:0 14px 30px rgba(168,53,104,.40)}
.btn--lg{font-size:1.12rem;padding:18px 36px}
.btn:active{transform:translateY(1px)}

/* hero */
.eyebrow{color:var(--rose);font-weight:800;text-transform:uppercase;letter-spacing:.12em;font-size:.78rem;margin:0 0 .7em;font-family:var(--sans)}
.hero{background:radial-gradient(120% 90% at 80% 0%,var(--soft),#fff 60%);padding:44px 0 54px}
.hero__grid{display:grid;gap:34px;align-items:center}
.hero__title{font-size:2.15rem}
.hero__title em{color:var(--rose);font-style:italic}
.hero__sub{color:var(--muted);font-size:1.12rem;margin-bottom:24px}
.pills{list-style:none;display:flex;flex-wrap:wrap;gap:10px;padding:0;margin:20px 0 0}
.pills li{background:#fff;border:1px solid var(--line);color:var(--ink);font-weight:600;font-size:.85rem;padding:8px 14px;border-radius:999px;box-shadow:var(--shadow-sm)}
.pills li::before{content:"\2713";color:var(--rose);font-weight:800;margin-right:7px}
.hero__media{position:relative}
.device{background:#fff;border:1px solid var(--line);border-radius:26px;padding:14px;box-shadow:var(--shadow)}
.device img{border-radius:14px}
.price-tag{position:absolute;right:-6px;top:-14px;background:linear-gradient(135deg,var(--rose),var(--rose-deep));color:#fff;font-family:var(--serif);font-weight:800;font-size:1.7rem;width:82px;height:82px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:var(--shadow);transform:rotate(8deg)}
.price-tag small{font-family:var(--sans);font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;opacity:.9}

/* secoes */
.section__title{font-size:1.75rem;text-align:center;margin:0 auto .35em;max-width:720px}
.section__lead{text-align:center;color:var(--muted);max-width:620px;margin:0 auto 28px}
.grid3{display:grid;gap:18px}

.benefits{padding:60px 22px}
.benefits .section__title{margin-bottom:34px}
.feature{background:var(--cream);border:1px solid var(--line);border-radius:var(--radius);padding:24px 20px;box-shadow:var(--shadow-sm)}
.feature .ic{display:inline-flex;width:46px;height:46px;align-items:center;justify-content:center;border-radius:14px;background:#fff;border:1px solid var(--line);margin-bottom:14px}
.feature .ic svg{width:24px;height:24px;fill:none;stroke:var(--rose);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.feature h3{font-size:1.15rem;margin-bottom:.25em}
.feature p{color:var(--muted);margin:0;font-size:.98rem}

.showcase{background:var(--soft);padding:60px 0}

/* SLIDER "Asi se ve por dentro": scroll-snap nativo (arrasta no celular sem JS);
   arrows/dots/autoplay entram via JS que adiciona .is-ready. Sem JS, vira scroll horizontal normal. */
.slider{position:relative}
.slider__track{
  display:flex;gap:16px;list-style:none;margin:0;padding:4px;
  overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.slider__track::-webkit-scrollbar{display:none}
.slide{flex:0 0 80%}
.slide figure{margin:0;height:100%;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);padding:12px;box-shadow:var(--shadow-sm)}
.slide img{width:100%;height:auto;aspect-ratio:4/3;border-radius:12px}  /* aspect-ratio reserva a caixa: sem reflow que zera o scroll */
.slide figcaption{text-align:center;font-weight:700;color:var(--ink);padding:12px 6px 4px;font-size:.98rem}

.slider__nav{
  position:absolute;top:44%;transform:translateY(-50%);z-index:3;
  width:46px;height:46px;border-radius:50%;border:1px solid var(--line);
  background:rgba(255,255,255,.96);color:var(--rose);font-size:1.7rem;line-height:1;
  cursor:pointer;box-shadow:var(--shadow-sm);display:none;align-items:center;justify-content:center;
  transition:transform .1s ease,box-shadow .2s ease,opacity .2s ease}
.slider.is-ready .slider__nav{display:none}          /* mobile: usa o arraste, sem setas */
.slider__nav:hover{box-shadow:var(--shadow);transform:translateY(-50%) scale(1.06)}
.slider__nav:active{transform:translateY(-50%) scale(.95)}
.slider__nav--prev{left:-8px}
.slider__nav--next{right:-8px}
.slider__nav[disabled]{opacity:.3;cursor:default;pointer-events:none;box-shadow:var(--shadow-sm)}

.slider__dots{display:flex;justify-content:center;gap:9px;margin-top:20px;min-height:10px}
.slider__dots button{width:9px;height:9px;padding:0;border:none;border-radius:50%;cursor:pointer;
  background:var(--line);transition:background .2s ease,transform .2s ease}
.slider__dots button[aria-current="true"]{background:var(--rose);transform:scale(1.3)}

@media (min-width:720px){
  .slide{flex-basis:44%}
  .slider.is-ready .slider__nav{display:flex}         /* desktop: mostra as setas */
}
@media (min-width:1040px){ .slide{flex-basis:31.5%} }

.compat{padding:34px 0;text-align:center}
.compat__text{max-width:680px;margin:0 auto 6px}
.compat__brands{color:var(--muted);font-weight:700;letter-spacing:.05em;margin:0}

.features{padding:56px 22px}
.checklist{list-style:none;padding:0;margin:0;display:grid;gap:12px;max-width:820px;margin-inline:auto}
.checklist li{background:var(--cream);border:1px solid var(--line);border-radius:14px;padding:15px 16px 15px 46px;position:relative;box-shadow:var(--shadow-sm)}
.checklist li::before{content:"\2713";position:absolute;left:18px;top:15px;color:#fff;background:var(--rose);width:20px;height:20px;border-radius:50%;font-size:.72rem;display:flex;align-items:center;justify-content:center;font-weight:800}

.stack{padding:56px 0}
.stack__box{max-width:640px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px 26px;box-shadow:var(--shadow)}
.stack__list{list-style:none;padding:0;margin:0 0 18px}
.stack__list li{display:flex;justify-content:space-between;gap:14px;align-items:baseline;padding:12px 0;border-bottom:1px dashed var(--line)}
.stack__list li span{color:var(--ink)}
.stack__list li b{color:var(--muted);font-weight:700;white-space:nowrap}
.stack__total{text-align:center;font-size:1.25rem;margin:14px 0 0}
.stack__total s{color:var(--muted)}
.stack__total strong{color:var(--rose)}

.testi{padding:56px 22px}
.quote{margin:0;background:var(--cream);border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow-sm)}
.quote .stars{color:#e2a72e;letter-spacing:2px;margin-bottom:8px}
.quote p{font-style:italic;color:var(--ink)}
.quote cite{display:block;margin-top:10px;font-style:normal;font-weight:700;color:var(--rose)}

.offer{padding:60px 0}
.offer__box{position:relative;max-width:600px;margin:0 auto;background:radial-gradient(120% 100% at 50% 0%,var(--soft),#fff 70%);border:2px solid var(--rose);border-radius:26px;padding:40px 26px 32px;text-align:center;box-shadow:var(--shadow)}
.offer__ribbon{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--rose);color:#fff;font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;padding:7px 16px;border-radius:999px;white-space:nowrap}
.offer__desc{color:var(--muted);max-width:420px;margin:0 auto 14px}
.offer__price{margin:10px 0 2px;display:flex;flex-direction:column;align-items:center;gap:2px}
.offer__from{font-size:1rem;color:var(--muted);text-decoration:line-through}
.offer__now{font-family:var(--serif);font-size:3.2rem;font-weight:800;color:var(--ink);line-height:1}
.offer__now small{font-size:1.1rem;color:var(--muted)}
.offer__once{color:var(--muted);margin:0 0 18px}
.guarantee{display:flex;align-items:center;gap:14px;text-align:left;background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px 16px;margin-top:20px}
.guarantee .shield{flex:0 0 auto;width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;color:var(--rose)}
.guarantee .shield svg{width:30px;height:30px;fill:none;stroke:var(--rose);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.guarantee p{margin:0;font-size:.92rem;color:var(--muted)}
.guarantee strong{color:var(--ink)}

.faq{padding:20px 22px 96px;max-width:820px;margin-inline:auto}
.faq details{border:1px solid var(--line);border-radius:14px;padding:14px 18px;margin-bottom:12px;background:#fff;box-shadow:var(--shadow-sm)}
.faq summary{font-weight:700;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;color:var(--rose);font-weight:800}
.faq details[open] summary::after{content:"\2212"}
.faq details p{color:var(--muted);margin:.7em 0 0}

.footer{background:var(--ink);color:#d8cfe0;padding:30px 0;text-align:center}
.footer__brand{font-family:var(--serif);font-size:1.2rem;margin:0 0 .4em}
.footer__legal{font-size:.8rem;color:#9a90a6;margin:0 auto .5em;max-width:680px}
.footer__legal:last-child{margin-bottom:0}
/* Links legais/suporte do rodape (04/08/2026): sem esta regra herdavam o cinza do paragrafo
   e ninguem percebia que sao clicaveis, que e o mesmo que nao existirem. */
.footer__legal a{color:#e7dff0;text-decoration:underline}
.footer__legal a:hover{color:#fff}

.cta-sticky{position:fixed;left:12px;right:12px;bottom:12px;background:linear-gradient(135deg,var(--rose),var(--rose-deep));color:#fff;text-decoration:none;font-weight:800;text-align:center;padding:16px;border-radius:999px;box-shadow:0 10px 26px rgba(0,0,0,.22);z-index:50}

@media(min-width:760px){
  .hero{padding:70px 0 80px}
  .hero__grid{grid-template-columns:1.05fr .95fr;gap:48px}
  .hero__title{font-size:3rem}
  .grid3{grid-template-columns:repeat(3,1fr)}
  .checklist{grid-template-columns:repeat(2,1fr)}
  .section__title{font-size:2.1rem}
  .cta-sticky{display:none}
}

/* EXTRAS: portadas + stickers (ativos reais do produto) */
.extras{padding:56px 0;background:var(--cream,#fefbfa)}
.extras__shot{margin:0 0 18px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:10px;box-shadow:var(--shadow-sm)}
.extras__shot img{display:block;width:100%;height:auto;border-radius:12px}
.stack__list li span small{display:block;color:var(--muted);font-weight:400;font-size:.82rem;margin-top:2px}
.stack__list li b s{color:var(--muted);font-weight:400;margin-right:6px;opacity:.75}
/* nota de ancoragem: os 3 bonos tem preco base US$9 real e ativo na Hotmart (produtos 8118524/8118131/8117903) */
.stack__note{text-align:center;font-size:.82rem;color:var(--muted);margin:10px 0 0}
/* stack em tela estreita: o preco ("$169 GRATIS") e nowrap e pode espremer a descricao */
@media (max-width:430px){
  .stack__list li{flex-direction:column;align-items:flex-start;gap:4px}
  .stack__list li b{align-self:flex-start}
  .stack__box{padding:24px 18px}
}
/* contador no topbar/promo-bar */
.topbar strong{font-weight:800}
.topbar #cd{font-variant-numeric:tabular-nums;font-weight:800;letter-spacing:.02em;
  background:rgba(255,255,255,.18);padding:2px 8px;border-radius:6px;margin-left:2px;white-space:nowrap}

/* PROMO ALTERNADA: barra + chip de codigo "copiar" + elementos so-de-promo */
.promo-bar{line-height:1.5}
.promo-code{font:inherit;font-weight:800;letter-spacing:.04em;cursor:pointer;
  color:var(--rose);background:#fff;border:0;border-radius:6px;padding:2px 9px;margin:0 2px;
  box-shadow:0 1px 0 rgba(0,0,0,.06);transition:transform .05s ease,background .2s ease}
.promo-code:hover{background:#fff}
.promo-code:active{transform:translateY(1px)}
.promo-code::before{content:"\1F4CB";font-weight:400;margin-right:5px;opacity:.8}   /* clipboard */
.promo-code.is-copied,.promo-code .promo-code__label{white-space:nowrap}
/* elementos que so aparecem em dia de promo (default oculto = direcao segura antes do JS) */
.promo-only{display:none}
body[data-promo="on"] .promo-only{display:block}
.offer__code{margin:0 0 10px;color:var(--ink);font-weight:600}
.offer__code .promo-code{color:#fff;background:var(--rose)}
.offer__code .promo-code::before{opacity:.9}

/* PROVA SOCIAL AO VIVO — so aparece com compra REAL (widget do Marcus, /api/compras-recentes) */
.live-sale{position:fixed;left:16px;bottom:16px;z-index:60;display:flex;align-items:flex-start;gap:10px;
  max-width:330px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 12px 12px 14px;
  box-shadow:0 10px 30px rgba(60,20,45,.16);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .28s ease,transform .28s ease,visibility .28s}
.live-sale.is-visible{opacity:1;visibility:visible;transform:translateY(0)}
.live-sale__dot{flex:0 0 auto;width:9px;height:9px;margin-top:6px;border-radius:50%;background:#22c55e;
  box-shadow:0 0 0 3px rgba(34,197,94,.18)}
.live-sale__body{flex:1;min-width:0}
.live-sale__title{margin:0;font-weight:800;color:var(--ink);font-size:.92rem;line-height:1.25}
.live-sale__text{margin:2px 0 0;color:var(--muted);font-size:.82rem;line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.live-sale__meta{margin:5px 0 0;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.live-sale__time{color:var(--muted);font-size:.72rem}
.live-sale__verified{font-size:.66rem;font-weight:800;letter-spacing:.03em;text-transform:uppercase;
  color:#15803d;background:rgba(34,197,94,.12);padding:2px 6px;border-radius:5px}
.live-sale__close{flex:0 0 auto;background:none;border:0;color:var(--muted);font-size:1.15rem;line-height:1;
  cursor:pointer;padding:0 2px;opacity:.6}
.live-sale__close:hover{opacity:1}
/* no celular o CTA fixo ocupa o rodape: sobe o toast pra nao cobrir o botao de compra */
@media (max-width:720px){ .live-sale{left:10px;right:10px;max-width:none;bottom:74px} }

/* SELOS DE CONFIANCA (meios de pagamento + compra segura).
   Motivo: o meio de pagamento era a informacao que mais destrava a compra no Mexico
   (muita compradora nao tem cartao; OXXO e pagamento em dinheiro) e estava so no FAQ,
   longe do momento da decisao. Vem logo abaixo do CTA, onde a duvida acontece.
   Sao badges proprios em CSS -- nao usamos as logomarcas de terceiros (marca registrada
   + peso de imagem). Tudo o que esta escrito foi conferido ao vivo no checkout MX. */
.trust{margin:18px 0 0}
.trust__label{display:block;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:8px}
.trust__pay{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 10px;padding:0}
.pay{display:inline-flex;align-items:center;background:#fff;border:1px solid var(--line);color:var(--ink);
     font-size:.74rem;font-weight:700;letter-spacing:.02em;padding:6px 11px;border-radius:8px;box-shadow:var(--shadow-sm)}
.pay--cash{border-color:var(--rose);color:var(--rose-deep)}   /* OXXO em destaque: e o que destrava quem nao tem cartao */
/* meios de pagamento LOCAIS: a pagina hispanica nao pode prometer OXXO/SPEI/PSE
   (variam por pais), so dizer com honestidade que o checkout mostra os de cada um */
.trust__local{margin:-4px 0 10px;color:var(--muted);font-size:.74rem;line-height:1.4}
.trust__safe{display:flex;align-items:center;flex-wrap:wrap;gap:4px 7px;margin:0;color:var(--muted);font-size:.78rem;line-height:1.45}
.trust__safe svg{width:15px;height:15px;flex:none;stroke:var(--rose);fill:none;stroke-width:1.9}
.trust__safe strong{color:var(--ink)}
/* dentro da caixa de oferta o bloco fica centralizado */
.offer__box .trust{margin-top:16px;margin-bottom:26px}
.offer__box .trust__pay,.offer__box .trust__safe{justify-content:center}
.offer__box .trust__label{text-align:center}

/* CTA secundario do hero ("ver por dentro").
   Motivo: o anuncio que trouxe 423 dos 510 cliques prometia "mira el planner por
   dentro". Quem chega com essa intencao e nao acha o produto na primeira tela sai.
   Este link leva direto ao slider, que agora e a primeira secao depois do hero. */
.hero__peek{margin:14px 0 0}
.hero__peek a{color:var(--rose-deep);font-weight:700;font-size:.92rem;text-decoration:none;
  border-bottom:1px solid var(--line);padding-bottom:2px}
.hero__peek a:hover{border-bottom-color:var(--rose)}

/* COMO LO RECIBES (3 passos).
   Motivo: a duvida nº1 de uma lead real no Messenger foi "en que formato se envia".
   A resposta estava so no FAQ, no fim da pagina, longe de quem desiste calado. */
.steps{padding:56px 0;background:var(--cream)}
.steps__list{list-style:none;counter-reset:none;padding:0;margin:0;display:grid;gap:16px;
  max-width:960px;margin-inline:auto}
.steps__list li{position:relative;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);padding:24px 22px 22px;box-shadow:var(--shadow-sm)}
.steps__n{display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;margin-bottom:12px;
  background:linear-gradient(135deg,var(--rose),var(--rose-deep));color:#fff;
  font-family:var(--serif);font-weight:800;font-size:1.15rem;box-shadow:var(--shadow-sm)}
.steps__list h3{font-size:1.15rem;margin:0 0 .3em}
.steps__list p{color:var(--muted);margin:0;font-size:.96rem}
@media(min-width:760px){ .steps__list{grid-template-columns:repeat(3,1fr)} }