/* v2 · out/2026: sintomas alinhados aos anúncios, leitor com arraste, evolução da planta, FAQ */

/* ---------- Sintomas ---------- */
.sym{display:grid;grid-template-columns:1.15fr 1fr;gap:26px;margin-top:40px;align-items:start}
.sym-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.sym-tile{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-height:150px;padding:18px;text-align:left;border:var(--b);border-radius:var(--r-card);box-shadow:var(--sh);cursor:pointer;transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.sym-tile>i{font-size:30px}
.sym-tile b{font:400 23px/1.05 var(--display)}
.sym-tile small{margin-top:auto;font-weight:900;font-size:12px;letter-spacing:.04em;text-transform:uppercase;padding:4px 10px;border:1.5px solid currentColor;border-radius:var(--r-pill)}
.sym-tile:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.sym-tile[aria-selected="true"]{transform:translate(3px,3px);box-shadow:inset 0 0 0 3px var(--ink),1px 1px 0 var(--ink)}
.sym-tile[aria-selected="true"]::after{content:"";position:absolute;top:12px;right:12px;width:14px;height:14px;border:var(--b);border-radius:50%;background:var(--lime)}
.sym-tile.c-ink{background:var(--ink);color:var(--paper)}
.sym-tile.c-ink>i{color:var(--lime)}
.sym-tile.c-paper{background:var(--paper)}
.sym-tile.c-paper>i{color:var(--pink)}
.sym-tile.is-from{order:-1}
.sym-panel{position:sticky;top:96px;display:flex;flex-direction:column;gap:16px;padding:26px;border:var(--b);border-radius:var(--r-card);background:var(--paper);box-shadow:var(--sh-lg)}
.sym-from{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:var(--b);border-radius:var(--r-pill);background:var(--lime);font-weight:900;font-size:13px}
.sym-from[hidden]{display:none}
.sym-head{display:flex;align-items:center;gap:16px;padding-bottom:16px;border-bottom:1.5px dashed var(--ink)}
.sym-head img{width:64px;height:96px;object-fit:cover;flex-shrink:0;border:var(--b);border-radius:4px;transform:rotate(-5deg);box-shadow:2px 2px 0 var(--ink)}
.sym-head small{display:block;width:max-content;font:900 12px/1 var(--body);letter-spacing:.04em;text-transform:uppercase;padding:5px 10px;margin-bottom:8px;border:var(--b);border-radius:var(--r-pill);background:var(--lime)}
.sym-head h3{font:400 30px/1.02 var(--display)}
.sym-cause{font-weight:700;font-size:17px;line-height:1.45}
.sym-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.sym-list li{display:flex;gap:10px;align-items:flex-start;font-weight:700;font-size:16px;line-height:1.4}
.sym-list li i{flex-shrink:0;width:24px;height:24px;display:grid;place-items:center;border:var(--b);border-radius:50%;background:var(--lime);font-size:12px;margin-top:1px}
.sym-panel .btn{align-self:flex-start}
@media (prefers-reduced-motion:no-preference){
  .sym-panel.swap>*{animation:symIn .45s var(--ease) both}
  .sym-panel.swap>*:nth-child(2){animation-delay:.03s}.sym-panel.swap>*:nth-child(3){animation-delay:.06s}.sym-panel.swap>*:nth-child(4){animation-delay:.09s}
}
@keyframes symIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- Leitor ---------- */
.reader-stage{touch-action:pan-y;user-select:none;-webkit-user-select:none}
.page-btn{transition:transform .2s var(--ease)}
.page-btn.dragging{transition:none}
.page-btn img{pointer-events:none}
.reader-foot{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px;border-top:var(--b);background:var(--paper)}
.reader-foot .reader-status{padding:0;border:0;background:none}
.reader-dots{display:flex;gap:8px}
.reader-dots span{width:10px;height:10px;border:1.5px solid var(--ink);border-radius:50%;background:var(--paper);transition:width .3s var(--ease),background .3s}
.reader-dots span.on{width:28px;border-radius:99px;background:var(--lime)}
.reader-dots span.lock{border-style:dashed}
.swipe-hint{display:none;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--muted)}
.swipe-hint i{font-size:18px}
@media (hover:none){.swipe-hint{display:inline-flex}.swipe-hint.gone{display:none}}
@media (prefers-reduced-motion:no-preference){@media (hover:none){.swipe-hint:not(.gone) i{animation:nudge 1.6s var(--ease) infinite}}}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(-8px)}}
/* ampliação */
.dialog-body img.is-fit{width:100%;max-width:640px;cursor:zoom-in}
.dialog-body img.is-page:not(.is-fit){cursor:zoom-out}
.dialog-nav{display:flex;align-items:center;justify-content:center;gap:18px;padding:10px;border-top:var(--b)}
.dialog-nav[hidden]{display:none}
.dialog-nav span{font-weight:900;font-size:14px;min-width:52px;text-align:center}
.dialog-nav .arrow{width:44px;height:44px;font-size:19px}
dialog:has(.dialog-nav:not([hidden])) .dialog-body{max-height:calc(92dvh - 132px)}

/* ---------- Evolução da planta ---------- */
.grow .sub{max-width:60ch}
.grow-types{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.grow-types .pill.c-pink{background:var(--pink)}
.grow-track{--p:0;position:relative;list-style:none;margin:44px 0 0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:16px;align-items:end}
.grow-track::before,.grow-track::after{content:"";position:absolute;left:8%;right:8%;bottom:-22px;height:8px;border:var(--b);border-radius:99px;background:var(--paper)}
.grow-track::after{right:auto;width:calc(84% * var(--p));border-color:transparent;background:var(--lime);box-shadow:inset 0 0 0 2px var(--ink)}
.stage{display:flex;flex-direction:column;gap:12px}
.stage figure{margin:0;aspect-ratio:1;border:var(--b);border-radius:var(--r-card);background:var(--bg);overflow:hidden;box-shadow:var(--sh)}
.stage figure img{width:100%;height:100%;object-fit:cover}
.stage:nth-child(1) figure{width:72%}.stage:nth-child(2) figure{width:80%}.stage:nth-child(3) figure{width:88%}.stage:nth-child(4) figure,.stage:nth-child(5) figure,.stage:nth-child(6) figure{width:100%}
.st-time{display:inline-block;padding:4px 10px;border:1.5px solid var(--ink);border-radius:var(--r-pill);background:var(--lime);font-weight:900;font-size:12px}
.stage h3{margin-top:8px;font:400 26px/1 var(--display)}
.stage p{margin-top:6px;font-size:14px;line-height:1.4;color:var(--muted);font-weight:700}
.stage small{display:block;margin-top:6px;font-weight:900;font-size:12px;letter-spacing:.03em;text-transform:uppercase}
.grow-end{margin-top:64px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding:20px 24px;border:var(--b);border-radius:var(--r-card);background:var(--paper);box-shadow:var(--sh)}
.grow-end p{font-size:18px}
@media (prefers-reduced-motion:no-preference){
  .grow-track.js .stage{opacity:.25;transform:translateY(18px) scale(.96);transition:opacity .6s var(--ease),transform .6s var(--ease)}
  .grow-track.js .stage.on{opacity:1;transform:none}
  .grow-track.js .stage.on figure img{animation:sprout .7s var(--ease) both}
}
@keyframes sprout{from{transform:scale(.85) translateY(12px)}to{transform:none}}

/* ---------- FAQ ---------- */
.faq-list summary{justify-content:flex-start}
.faq-list summary .tog{margin-left:auto}
.q-ico{flex-shrink:0;width:38px;height:38px;display:grid;place-items:center;border:var(--b);border-radius:50%;font-size:18px}
.q-ico.c-ink{background:var(--ink);color:var(--lime)}
.faq-list details[open] summary{padding-bottom:10px}
.faq-list details>p{padding-left:76px}
.faq-link{display:inline-flex;margin-top:8px;font-weight:900;color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.faq-end{grid-column:2;display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:22px;border:2px dashed var(--ink);border-radius:var(--r-card)}
.faq-end p{font-size:17px}

/* ---------- Mobile ---------- */
@media (max-width:900px){
  .sym{grid-template-columns:1fr}
  .sym-panel{position:relative;top:auto}
  .grow-track{grid-template-columns:1fr;gap:0;align-items:stretch;padding-left:26px}
  .grow-track::before,.grow-track::after{left:6px;right:auto;top:0;bottom:0;width:8px;height:auto}
  .grow-track::after{height:calc(100% * var(--p));bottom:auto}
  .stage{flex-direction:row;align-items:center;gap:16px;padding:12px 0}
  .stage figure,.stage:nth-child(n) figure{width:108px;flex-shrink:0}
  .stage h3{font-size:24px}
  .grow-end{margin-top:28px}
}
@media (max-width:767px){
  .sym-grid{gap:10px}
  .sym-tile{min-height:122px;padding:14px;gap:6px}
  .sym-tile>i{font-size:24px}
  .sym-tile b{font-size:19px}
  .sym-tile small{font-size:10.5px;padding:3px 8px}
  .sym-panel{padding:20px}
  .sym-head h3{font-size:25px}
  .faq-end{grid-column:auto}
  .faq-list details>p{padding-left:22px}
  .q-ico{width:32px;height:32px;font-size:16px}
  .faq-list summary{gap:12px;padding:16px}
}

/* ícones extras (mesma fonte Phosphor Bold) */
.ph-megaphone-simple:before{content:"\e642"}.ph-thermometer-hot:before{content:"\e5ca"}.ph-hand-swipe-left:before{content:"\ec94"}.ph-timer:before{content:"\e492"}.ph-calendar:before{content:"\e108"}.ph-lightbulb:before{content:"\e2dc"}.ph-eye:before{content:"\e220"}.ph-credit-card:before{content:"\e1d2"}.ph-scales:before{content:"\e750"}
/* coluna do FAQ não pode crescer além da tela */
.faq>*{min-width:0}
.faq-list summary{min-width:0;overflow-wrap:anywhere}
@media (max-width:767px){.faq{grid-template-columns:minmax(0,1fr)}.faq-end .btn{width:100%}}

/* "Abra na dúvida" com 4 páginas: luz e folha no ângulo dos anúncios D6 e D7 */
@media (min-width:1025px){.method-grid{grid-template-columns:repeat(4,1fr);gap:22px}.m-item:nth-child(2){margin-top:0}.m-item:nth-child(2n){margin-top:56px}.m-item b{font-size:24px}}
@media (min-width:768px) and (max-width:1024px){.method-grid{grid-template-columns:repeat(2,1fr)}.m-item:nth-child(2){margin-top:0}}
.m-item:nth-child(4) .m-page{transform:rotate(-1deg)}
.m-tag.c-blue{color:var(--paper)}
/* espiadas na prévia */
.page-btn.is-peek img{aspect-ratio:auto}
.page-btn.is-peek::after{content:"Trecho · completa no manual";position:absolute;left:50%;bottom:14px;transform:translateX(-50%);white-space:nowrap;padding:6px 12px;border:var(--b);border-radius:var(--r-pill);background:var(--pink);font-weight:900;font-size:12px;box-shadow:2px 2px 0 var(--ink)}
.tab-peek{border-style:dashed}
.reader-dots span.peek{border-style:dashed}
.reader-dots{flex-wrap:wrap;justify-content:center}
.page-btn.is-peek{aspect-ratio:2/3;background:var(--paper)}
.page-btn.is-peek img{height:auto}

/* pricing: sem viúvas */
.offer-card .title,.offer-sub,.checks li,.guarantee b,.guarantee span,.buy-status,.offer-thumb span{text-wrap:balance}
.offer-sub,.guarantee span{text-wrap:pretty}

/* ---------- Oferta: entrada da capa e do pricing ---------- */
@media (prefers-reduced-motion:no-preference){
  .offer.anim .offer-art .sun{opacity:0;transform:scale(.3);transition:opacity .5s var(--ease),transform 1s cubic-bezier(.34,1.56,.64,1)}
  .offer.anim .offer-art img{opacity:0;transform:translateY(80px) rotate(-22deg) scale(.8);transition:opacity .45s var(--ease) .15s,transform 1s cubic-bezier(.34,1.45,.64,1) .15s}
  .offer.anim.on .offer-art .sun{opacity:1;transform:none;animation:sunSpin 60s linear 1s infinite}
  .offer.anim.on .offer-art img{opacity:1;transform:rotate(-5deg);animation:coverFloat 5s ease-in-out 1.3s infinite}
  .offer.anim .offer-card{opacity:0;transform:translateY(40px);transition:opacity .6s var(--ease) .2s,transform .8s var(--ease) .2s}
  .offer.anim.on .offer-card{opacity:1;transform:none}
  .offer.anim .fx-step{opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .6s var(--ease);transition-delay:calc(.35s + var(--i) * 90ms)}
  .offer.anim.on .fx-step{opacity:1;transform:none}
  .offer.anim .checks li i{transform:scale(0);transition:transform .45s cubic-bezier(.34,1.8,.64,1);transition-delay:calc(.55s + var(--i) * 90ms)}
  .offer.anim.on .checks li i{transform:none}
  .offer.anim .launch-next s{text-decoration:none;background:linear-gradient(var(--ink),var(--ink)) left 55%/0% 2px no-repeat;transition:background-size .5s var(--ease) 1.2s}
  .offer.anim.on .launch-next s{background-size:100% 2px}
  .offer.anim #buy{transform:scale(.85);opacity:0;transition:transform .55s cubic-bezier(.34,1.7,.64,1) 1.9s,opacity .3s 1.9s}
  .offer.anim.on #buy{transform:none;opacity:1}
  .offer.anim.on #buy:hover{transform:translate(-2px,-2px);transition-delay:0s}
  .price strong.pop{animation:pricePop .45s cubic-bezier(.34,1.8,.64,1)}
}
@keyframes sunSpin{to{rotate:360deg}}
@keyframes coverFloat{50%{translate:0 -10px}}
@keyframes pricePop{40%{transform:scale(1.12)}}
.price strong{display:inline-block;font-variant-numeric:tabular-nums}
/* pricing compacto no celular: o card inteiro cabe na tela */
@media (max-width:767px){
  .offer-card{padding:20px 18px}
  .offer-card .title-md{font-size:30px}
  .offer-sub{display:none}
  .checks{margin:14px 0 16px;gap:7px}
  .checks li{font-size:15px;gap:9px;text-wrap:wrap;line-height:1.3}
  .checks i{width:22px;height:22px;font-size:12px}
  .launch{margin-bottom:4px}
  .price strong{font-size:68px}
  .price .cur{font-size:24px;margin-top:8px}
  .price .cents{font-size:26px;margin-top:8px}
  .offer-buy .btn-lg{min-height:56px;margin-top:10px}
  .guarantee{margin-top:12px;padding:10px 12px;gap:10px;align-items:center}
  .guarantee b{font-size:15px}
  .guarantee span{font-size:13px;line-height:1.3}
  .guarantee>i{width:34px;height:34px;font-size:17px}
  .buy-status{margin-top:8px;font-size:12.5px}
}
/* ---------- Hero: promessa curta, maior, e arte dentro da primeira tela ---------- */
h1.title{font-size:clamp(46px,5.4vw,84px)}
.hero-proof{display:inline-flex;align-items:center;gap:8px;margin:-12px 0 26px;padding:7px 14px;border:var(--b);border-radius:var(--r-pill);background:var(--lime-soft);font-weight:800;font-size:14px}
.hero-proof i{font-size:17px}
@media (max-width:767px){
  .hero{padding-block:22px 28px;gap:8px}
  .hero-copy .pill{margin-bottom:16px}
  h1.title{font-size:clamp(34px,10.4vw,46px)}
  .lead{margin-block:14px 14px}
  .hero-proof{margin:0 0 18px;font-size:12.5px;padding:6px 12px}
  .hero-art{height:330px}
  .hero-art .sun{width:280px;height:280px}
  .tilt{width:190px}
}

/* ---------- Cenas: cada seção entra coreografada quando aparece ---------- */
@media (prefers-reduced-motion:no-preference){
  .scene .hero-copy>*,.scene .hero-art{animation:none}
  .scene .fx-up{opacity:0;translate:0 18px;transition:opacity .55s var(--ease),translate .7s var(--ease);transition-delay:calc(var(--i,0) * 75ms)}
  .scene.on .fx-up{opacity:1;translate:0 0}
  .scene .fx-pop{opacity:0;scale:.82;transition:opacity .35s var(--ease),scale .6s cubic-bezier(.34,1.7,.64,1);transition-delay:calc(var(--i,0) * 75ms)}
  .scene.on .fx-pop{opacity:1;scale:1}
  .scene .fx-wipe{-webkit-mask:linear-gradient(90deg,#000 50%,transparent 50%) 100% 0/200% 100% no-repeat;mask:linear-gradient(90deg,#000 50%,transparent 50%) 100% 0/200% 100% no-repeat;transition:-webkit-mask-position .75s cubic-bezier(.65,0,.35,1),mask-position .75s cubic-bezier(.65,0,.35,1);transition-delay:calc(var(--i,0) * 75ms)}
  .scene.on .fx-wipe{-webkit-mask-position:0 0;mask-position:0 0}
  .scene .fx-grow{opacity:0;scale:.3;transition:opacity .5s var(--ease),scale 1s cubic-bezier(.34,1.56,.64,1);transition-delay:calc(var(--i,0) * 75ms)}
  .scene.on .fx-grow{opacity:1;scale:1}
  .scene .fx-drop{opacity:0;translate:0 70px;rotate:-10deg;scale:.85;transition:opacity .45s var(--ease),translate 1s cubic-bezier(.34,1.45,.64,1),rotate 1s cubic-bezier(.34,1.45,.64,1),scale 1s cubic-bezier(.34,1.45,.64,1);transition-delay:calc(var(--i,0) * 75ms)}
  .scene.on .fx-drop{opacity:1;translate:0 0;rotate:0deg;scale:1}
  .scene.on .hero-art .sun{animation:sunHue 16s ease-in-out 1.2s infinite}
}
/* sol do hero: parado, trocando de cor dentro da paleta do manual */
@property --sa{syntax:"<color>";inherits:false;initial-value:#C6FF3D}
@property --sb{syntax:"<color>";inherits:false;initial-value:#EEFFC2}
.hero-art .sun{--sa:var(--lime);--sb:var(--lime-soft);background:repeating-linear-gradient(180deg,var(--sa) 0 22px,var(--sb) 22px 30px)}
@keyframes sunHue{
  0%,20%{--sa:#C6FF3D;--sb:#EEFFC2}
  25%,45%{--sa:#FF6B35;--sb:#FFE6DB}
  50%,70%{--sa:#FF4F81;--sb:#FFE1EA}
  75%,95%{--sa:#2D5BFF;--sb:#E1E8FF}
  100%{--sa:#C6FF3D;--sb:#EEFFC2}
}
/* linha de apoio do hero */
.hero-sign{display:flex;align-items:center;gap:8px;margin:-14px 0 28px;font-weight:900;font-size:17px}
.hero-sign i{font-size:20px;color:var(--ink);background:var(--lime);border:var(--b);border-radius:50%;width:32px;height:32px;display:grid;place-items:center;flex-shrink:0}
@media (max-width:767px){.hero-sign{margin:-2px 0 18px;font-size:15px}.hero-sign i{width:28px;height:28px;font-size:16px}}
#hero-lead{text-wrap:balance}

/* destaque de interação na prévia (mesmo estilo do hero) */
.preview-hint{margin:18px 0 0}
.preview-hint+.reader{margin-top:26px}
@media (max-width:767px){.preview-hint{margin:14px 0 0}}

/* convite ao toque em toda seção interativa */
.touch-hint{margin:16px 0 0}
.faq .faq-hint{margin:14px 0 0}
@media (prefers-reduced-motion:no-preference){
  .nudge-tap{animation:tapRing 1.8s var(--ease) 1.2s infinite}
  .touch-hint i,.preview-hint i{animation:tapIcon 1.8s var(--ease) infinite}
}
@keyframes tapRing{0%{outline:2px solid rgba(30,36,23,.6);outline-offset:0}70%,100%{outline:2px solid rgba(30,36,23,0);outline-offset:10px}}
@keyframes tapIcon{0%,100%{rotate:0deg}20%{rotate:-14deg}40%{rotate:0deg}}
/* CTA direto para o checkout: preço e garantia junto do botão */
.hero-cta{display:flex;flex-direction:column;align-items:stretch;gap:10px}
.hero-price{margin:0;text-align:center;font-size:14px;font-weight:700;line-height:1.3;color:var(--muted);text-wrap:balance}
.hero-price b{font-weight:900;color:var(--ink)}
@media (max-width:767px){
  .hero-cta{gap:8px}
  .hero-price{font-size:13px}
  .mobile-bar>span{text-wrap:balance}
  .mobile-bar strong{white-space:nowrap}
}
@media (min-width:768px){
  .hero-actions{align-items:flex-start}
  .hero-actions .link{align-self:flex-start;display:inline-flex;align-items:center;min-height:62px}
}

/* ============================================================
   v3 conversão (14/10): confiança no hero, páginas na oferta
   ============================================================ */
.ph-bold.ph-coins:before{content:"\e78e"}

/* hero: três garantias numa linha, logo abaixo do botão */
.hero-trust{display:flex;flex-wrap:wrap;gap:6px 14px;margin:14px 0 0;padding:0;list-style:none;font-weight:900;font-size:13.5px;color:var(--ink)}
.hero-trust li{display:inline-flex;align-items:center;gap:6px}
.hero-trust i{display:grid;place-items:center;width:24px;height:24px;border:2px solid var(--ink);border-radius:50%;background:var(--lime);font-size:13px}

/* oferta: as 21 páginas em leque, antes do preço */
.offer-pages{display:flex;align-items:center;gap:14px;margin:4px 0 2px;padding:12px 14px;border:2px dashed var(--ink);border-radius:18px;background:var(--bg)}
.op-fan{position:relative;display:flex;flex-shrink:0;height:72px;padding-right:6px}
.op-fan img{width:44px;height:66px;object-fit:cover;border:2px solid var(--ink);border-radius:5px;background:var(--paper);box-shadow:2px 2px 0 var(--ink)}
.op-fan img+img{margin-left:-24px}
.op-fan img:nth-child(1){transform:rotate(-8deg);z-index:6}
.op-fan img:nth-child(2){transform:rotate(-4deg) translateY(2px);z-index:5}
.op-fan img:nth-child(3){transform:rotate(0deg) translateY(3px);z-index:4}
.op-fan img:nth-child(4){transform:rotate(4deg) translateY(2px);z-index:3}
.op-fan img:nth-child(5){transform:rotate(7deg);z-index:2}
.op-fan img:nth-child(6){transform:rotate(10deg) translateY(-1px);z-index:1}
.op-fan .op-blur{filter:blur(1.5px) saturate(.8)}
.op-mais{position:absolute;right:-6px;bottom:-4px;z-index:7;display:grid;place-items:center;min-width:34px;height:26px;padding:0 6px;border:2px solid var(--ink);border-radius:var(--r-pill);background:var(--ink);color:var(--lime);font:400 14px/1 var(--display)}
.op-txt{display:grid;gap:2px;min-width:0;font-weight:700;font-size:13.5px;line-height:1.3;color:var(--muted)}
.op-txt b{font:400 18px/1.1 var(--display);color:var(--ink)}

/* preço: o que a pessoa paga, uma vez */
.price-note{display:block;margin:-2px 0 4px;font-weight:800;font-size:13.5px;line-height:1.3;color:var(--ink);text-align:center}
.price-note i{display:none}
@media (max-width:374px){ .op-fan img{width:38px;height:57px} .op-fan img+img{margin-left:-22px} .hero-trust{font-size:12.5px} }

/* ============================================================
   Oferta v3 (14/10): blocos centralizados com respiro.
   Ordem: título, páginas, 3 tópicos, preço, botão, garantias.
   ============================================================ */
.oc3{display:grid;justify-items:center;gap:22px;text-align:center}
.oc3 .title{align-items:center}
.oc3>.offer-thumb,.oc3>.offer-sub,.oc3>.offer-pages{display:none}

/* as páginas em leque: o produto como peça principal */
.oc-fan{position:relative;display:flex;justify-content:center;align-items:flex-end;height:150px;margin:4px 0 6px}
.oc-fan img{width:74px;height:111px;object-fit:cover;border:2px solid var(--ink);border-radius:6px;background:var(--paper);box-shadow:3px 3px 0 var(--ink)}
.oc-fan img+img{margin-left:-30px}
.oc-fan img:nth-child(1){transform:rotate(-14deg) translateY(10px);z-index:1}
.oc-fan img:nth-child(2){transform:rotate(-7deg) translateY(2px);z-index:2}
.oc-fan img:nth-child(3){width:92px;height:138px;transform:translateY(-6px);z-index:5}
.oc-fan img:nth-child(4){transform:rotate(7deg) translateY(2px);z-index:3}
.oc-fan img:nth-child(5){transform:rotate(14deg) translateY(10px);z-index:1}
.oc-fan .oc-blur{filter:blur(1.5px) saturate(.8)}
.oc-selo{position:absolute;right:calc(50% - 118px);top:-4px;z-index:6;display:grid;place-items:center;width:62px;height:62px;border:2px solid var(--ink);border-radius:50%;background:var(--lime);box-shadow:3px 3px 0 var(--ink);font:900 10px/1 var(--body);text-transform:uppercase;letter-spacing:.04em;transform:rotate(10deg)}
.oc-selo b{display:block;font:400 26px/.9 var(--display);letter-spacing:0}

/* três tópicos, alinhados à esquerda dentro de um bloco centralizado */
.oc3 .oc-checks{margin:0;justify-self:center;width:max-content;max-width:100%;text-align:left;gap:12px}
.oc3 .oc-checks li{font-size:16px;line-height:1.3}

/* preço: um bloco só, com o antes, o valor e como pagar */
.oc-preco{display:grid;justify-items:center;gap:8px;width:100%;padding:18px 16px 16px;border:2px solid var(--ink);border-radius:20px;background:var(--paper)}
.oc-de{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin:0}
.oc-tag{display:inline-flex;padding:4px 12px;border:2px solid var(--ink);border-radius:var(--r-pill);background:var(--orange);font-weight:900;font-size:12.5px;letter-spacing:.02em}
.oc-antes s{font-weight:900;font-size:17px;color:var(--muted);text-decoration-thickness:2px;text-decoration-color:var(--ink)}
.oc3 .price{justify-content:center;margin:2px 0 0}
.oc3 .price strong{font-size:84px}
.oc3 .price .cur{font-size:28px;margin-top:10px}
.oc3 .price .cents{font-size:30px;margin-top:10px}
.oc-forma{margin:0;font-weight:800;font-size:14.5px;color:var(--ink)}
.oc3 #buy{margin:0}

/* garantias: uma linha de três, colada no botão */
.oc-garantias{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 16px;margin:-6px 0 0;padding:0;list-style:none;font-weight:900;font-size:13px}
.oc-garantias li{display:inline-flex;align-items:center;gap:6px}
.oc-garantias i{display:grid;place-items:center;width:24px;height:24px;border:2px solid var(--ink);border-radius:50%;background:var(--lime);font-size:13px}
.oc3 .buy-status:empty{display:none}

@media (max-width:767px){
  .oc3{gap:20px;padding:26px 18px 22px}
  .oc3 .title-md{font-size:32px}
  .oc-fan{height:132px}
  .oc-fan img{width:62px;height:93px}
  .oc-fan img:nth-child(3){width:80px;height:120px}
  .oc-fan img+img{margin-left:-26px}
  .oc-selo{right:calc(50% - 104px);width:56px;height:56px}
  .oc3 .price strong{font-size:76px}
  .oc3 .checks i{width:24px;height:24px;font-size:13px}
}
/* selo "21 páginas" cabe no círculo; no celular a capa grande sai (o leque já mostra a capa) */
.oc-selo{width:66px;height:66px;font-size:8.5px;letter-spacing:.02em;line-height:1.1}
.oc-selo b{font-size:25px;margin-bottom:1px}
@media (max-width:899px){ .offer-in>.offer-art{display:none} .offer-in{gap:0} }
@media (max-width:767px){ .oc-selo{width:60px;height:60px;font-size:8px} .oc-selo b{font-size:22px} }
/* computador: o cartão novo é uma coluna só (a regra antiga dividia em duas) */
@media (min-width:900px){
  .offer-card.oc3{grid-template-columns:minmax(0,1fr);grid-template-rows:none;column-gap:0;padding:40px 44px}
  .oc3>*{grid-column:1!important;grid-row:auto!important}
  .oc3>.title{font-size:clamp(34px,3vw,44px)}
  .oc3 .oc-preco{max-width:420px}
}

/* 5 benefícios: lista com ritmo, texto à esquerda num bloco centralizado */
.oc3 .oc-checks{width:100%;max-width:400px;gap:11px}
.oc3 .oc-checks li{font-size:15.5px;line-height:1.35;text-wrap:pretty}

/* ============================================================
   Implicação (SPIN): quanto custa um erro, e a virada para o ganho
   ============================================================ */
.ph-bold.ph-hourglass:before{content:"\e2b2"}
.ph-bold.ph-arrows-clockwise:before{content:"\e094"}
.cost{display:grid;justify-items:center;gap:18px;text-align:center}
.cost .title{align-items:center}
.cost .sub{max-width:46ch;margin:0}
.cost-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;width:100%;margin:8px 0 0;padding:0;list-style:none;text-align:left}
.cost-list li{display:flex;gap:12px;align-items:flex-start;padding:16px;border:var(--b);border-radius:18px;background:var(--paper);box-shadow:var(--sh)}
.cost-list b{display:block;margin-bottom:4px;font:400 19px/1.15 var(--display);color:var(--ink)}
.cost-list span:last-child{font-weight:700;font-size:15px;line-height:1.4;color:var(--muted)}
.cost-ico{flex-shrink:0;display:grid;place-items:center;width:42px;height:42px;border:var(--b);border-radius:50%;font-size:20px}
.cost-ico.c-pink{background:var(--pink-soft)}
.cost-ico.c-lime{background:var(--lime)}
.cost-turn{display:flex;gap:14px;align-items:center;width:100%;max-width:720px;padding:16px 18px;border:var(--b);border-radius:20px;background:var(--lime-soft);text-align:left}
.cost-turn p{margin:0;font-weight:700;font-size:15.5px;line-height:1.45;color:var(--ink)}
.cost-turn b{font-weight:900}
@media (max-width:899px){
  .cost-list{grid-template-columns:minmax(0,1fr);gap:10px}
  .cost-list li{padding:14px;box-shadow:3px 3px 0 var(--ink)}
  .cost-list b{font-size:17px}
  .cost-list span:last-child{font-size:14.5px}
}

/* ============================================================
   Fases v3 (14/10): um cartão por fase. Celular: carrossel com
   o próximo aparecendo. Computador: grade 3 x 2.
   ============================================================ */
.grow .grow-track{display:none}
.fases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:28px 0 0;padding:0;list-style:none}
.fase{display:grid;align-content:start;gap:10px;padding:16px 16px 18px;border:var(--b);border-radius:22px;background:var(--paper);box-shadow:var(--sh)}
.fase-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.fase-n{font:400 30px/1 var(--display);color:var(--ink);text-shadow:2px 2px 0 var(--lime)}
.fase-t{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border:2px solid var(--ink);border-radius:var(--r-pill);background:var(--lime);font-weight:900;font-size:12.5px;white-space:nowrap}
.fase-t i{font-size:14px}
.fase-img{margin:2px 0 4px;aspect-ratio:1;border:2px solid var(--ink);border-radius:16px;overflow:hidden;background:var(--bg)}
.fase-img img{display:block;width:100%;height:100%;object-fit:contain}
.fase h3{margin:0;font:400 24px/1.05 var(--display)}
.fase p{margin:0;font-weight:700;font-size:15px;line-height:1.4;color:var(--muted)}
.fase .fase-pags{display:inline-flex;align-items:center;gap:6px;justify-self:start;margin-top:2px;padding:4px 10px;border-radius:10px;background:var(--lime-soft);font-weight:900;font-size:13px;color:var(--ink)}
.fase-pags i{font-size:15px}
.fases-dots{display:none}
@media (max-width:899px){
  .fases{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:78%;gap:14px;margin:22px -16px 0;padding:4px 16px 10px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:16px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .fases::-webkit-scrollbar{display:none}
  .fase{scroll-snap-align:start;box-shadow:4px 4px 0 var(--ink)}
  .fase h3{font-size:22px}
  .fases-dots{display:flex;justify-content:center;gap:7px;margin-top:6px}
  .fases-dots i{width:8px;height:8px;border-radius:50%;border:2px solid var(--ink);background:var(--paper);transition:background .2s,width .2s}
  .fases-dots i.on{width:22px;border-radius:var(--r-pill);background:var(--lime)}
}
@media (min-width:600px) and (max-width:899px){ .fases{grid-auto-columns:44%} }
@media (prefers-reduced-motion:reduce){ .fases-dots i{transition:none} }

/* um botão fixo só: o do topo. A barra do rodapé repetia o mesmo convite */
.mobile-bar{display:none!important}

/* a imagem do topo agora vem num <picture> (AVIF com WebP de reserva) */
.flo picture{display:block}

/* fases no celular: grade de 2 colunas (sem segundo carrossel na página) */
@media (max-width:899px){
  .fases{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:22px 0 0;padding:0;overflow:visible;scroll-snap-type:none}
  .fase{padding:12px 12px 14px;gap:8px;box-shadow:3px 3px 0 var(--ink)}
  .fase-top{flex-direction:column;align-items:flex-start;gap:6px}
  .fase-n{font-size:24px}
  .fase-t{font-size:11.5px;padding:3px 8px}
  .fase h3{font-size:19px}
  .fase p{font-size:13.5px;line-height:1.35}
  .fase .fase-pags{font-size:12px;padding:3px 8px}
  .fases-dots{display:none!important}
}
@media (min-width:600px) and (max-width:899px){ .fases{grid-template-columns:repeat(3,minmax(0,1fr))} }

/* estante sem botão: só a linha das páginas que faltam */
.shelf-note{pointer-events:none}
.shelf-note b{font:400 20px/1.15 var(--display)}

/* uma dica de arraste só (a do topo do leitor) */
#swipe-hint{display:none!important}