/* ============================================================
   MANUAL DA FLORA · Design system
   Derivado do próprio manual: creme, lettering de gibi com
   contorno e sombra sólida, stickers, pílulas e estouros de HQ.
   ------------------------------------------------------------
   Cores com função fixa:
   --lime   ação (todo CTA de compra) e "certo"
   --orange primeira linha de título, destaques de número
   --pink   alerta, erro, sticker de atenção
   --blue   selos e informação técnica
   Formas: cards 20px · botões e pílulas 999px · borda 2px ink
   Sombra: sempre sólida, deslocada, cor ink (nunca desfocada)
   ============================================================ */
@font-face{font-family:Lilita;src:url('assets/lilita-one.woff2') format('woff2');font-display:swap}
@font-face{font-family:Nunito;src:url('assets/nunito-regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Nunito;src:url('assets/nunito-bold.ttf') format('truetype');font-weight:700 900;font-display:swap}

:root{
  --bg:#F4F1EA; --paper:#FFFDF7; --ink:#1E2417; --muted:#545B49; --line:#1E2417;
  --lime:#C6FF3D; --orange:#FF6B35; --pink:#FF4F81; --blue:#2D5BFF;
  --lime-soft:#EEFFC2; --pink-soft:#FFE1EA; --orange-soft:#FFE6DB; --blue-soft:#E1E8FF;
  --r-card:20px; --r-pill:999px; --b:2px solid var(--ink);
  --sh:4px 4px 0 var(--ink); --sh-lg:7px 7px 0 var(--ink);
  --display:Lilita,'Arial Black',sans-serif; --body:Nunito,system-ui,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --z-header:20; --z-mobile:25;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--body);overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,p{margin:0}
:focus-visible{outline:3px solid var(--blue);outline-offset:4px;border-radius:6px}
.wrap{width:min(1200px,calc(100% - 64px));margin-inline:auto}
.section{padding-block:96px}
.skip{position:fixed;left:12px;top:12px;z-index:99;background:var(--lime);border:var(--b);padding:10px 14px;border-radius:12px;transform:translateY(-200%)}
.skip:focus{transform:none}

/* ---------- Tipografia de título (a assinatura do manual) ---------- */
.title{font-family:var(--display);font-weight:400;line-height:.98;letter-spacing:.005em;display:flex;flex-direction:column}
.title span{-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;text-shadow:4px 4px 0 var(--ink)}
.t1{color:var(--orange)}
.t2{color:var(--lime)}
h1.title{font-size:clamp(40px,4.3vw,64px)}
h1.title span{white-space:nowrap}
.title-md{font-size:clamp(34px,4.2vw,58px)}
.title-md span{-webkit-text-stroke:2.5px var(--ink);text-shadow:3px 3px 0 var(--ink)}
.sub{margin-top:18px;color:var(--muted);font-size:18px;max-width:56ch}
.lead{margin-block:26px 30px;font-size:19px;max-width:30ch;color:var(--ink)}

/* ---------- Componentes base ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:12px 26px;background:var(--lime);color:var(--ink);font-weight:900;font-size:16px;border:var(--b);border-radius:var(--r-pill);box-shadow:var(--sh);white-space:nowrap;transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
.btn i{font-size:18px;transition:transform .25s var(--ease)}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.btn:hover i{transform:translateX(3px)}
.btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
.btn-sm{min-height:44px;padding:8px 18px;font-size:14px;box-shadow:3px 3px 0 var(--ink)}
.btn-lg{min-height:62px;padding:14px 32px;font-size:18px}
.btn-block{width:100%}
.link{display:inline-flex;align-items:center;gap:8px;font-weight:900;font-size:15px;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px}
.link:hover{text-decoration-color:var(--orange)}
.pill{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border:var(--b);border-radius:var(--r-pill);font-weight:900;font-size:13px;background:var(--paper)}
.pill-ink{background:var(--ink);color:var(--paper)}
.pill i{font-size:16px}
.icon-btn{width:44px;height:44px;display:grid;place-items:center;border:var(--b);border-radius:var(--r-pill);background:var(--paper);font-size:18px}
.icon-btn:hover{background:var(--lime)}
.c-lime{background:var(--lime)} .c-pink{background:var(--pink)} .c-orange{background:var(--orange)} .c-blue{background:var(--blue);color:var(--paper)}

/* Estouro de HQ (selo) */
.burst{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;width:128px;height:128px;font:900 12px/1.1 var(--body);clip-path:polygon(50% 0,61% 13%,78% 5%,80% 22%,97% 25%,88% 40%,100% 52%,86% 62%,93% 79%,76% 80%,70% 97%,56% 87%,43% 100%,36% 84%,18% 93%,18% 75%,1% 70%,11% 55%,0 40%,15% 32%,10% 14%,28% 17%,38% 2%);transform:rotate(-10deg);z-index:4}
.burst b{font:400 34px/1 var(--display);display:block}
.burst-blue{background:var(--blue);color:var(--paper)}
.burst-lime{background:var(--lime);color:var(--ink)}
.sticker{position:absolute;z-index:4;padding:10px 16px;border:var(--b);border-radius:14px;box-shadow:var(--sh);font-weight:900;font-size:13px;line-height:1.25;max-width:170px}
.sticker-pink{background:var(--pink);color:var(--ink)}
/* Sol listrado: assinatura do manual */
.sun{position:absolute;border-radius:50%;background:repeating-linear-gradient(180deg,var(--lime) 0 22px,var(--lime-soft) 22px 30px);border:var(--b);z-index:0}

/* ---------- Header ---------- */
.header{position:sticky;top:0;z-index:var(--z-header);background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(8px);border-bottom:var(--b)}
.header-in{display:flex;align-items:center;justify-content:space-between;min-height:70px;gap:20px}
.wordmark{display:flex;flex-direction:column;font-family:var(--display);line-height:.9}
.wordmark{align-items:flex-start}
.wm-1{font:900 9.5px/1 var(--body);letter-spacing:.14em;color:var(--lime);background:var(--ink);padding:4px 7px 3px;border-radius:var(--r-pill);transform:rotate(-4deg);margin:0 0 -3px -2px;position:relative;z-index:1}
.wm-2{font-size:28px;color:var(--lime);-webkit-text-stroke:2px var(--ink);paint-order:stroke fill;text-shadow:2px 2px 0 var(--ink)}
.header nav{display:flex;align-items:center;gap:26px;font-weight:900;font-size:14px}
.header nav>a:not(.btn):hover{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px}

/* ---------- Hero ---------- */
.hero{display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:40px;padding-block:64px 80px;min-height:calc(100dvh - 70px);max-height:900px}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:18px 26px}
.hero-copy .pill{margin-bottom:24px}
.hero-art{position:relative;height:540px;display:grid;place-items:center;perspective:1200px}
.hero-art .sun{width:440px;height:440px}
.tilt{position:relative;width:280px;transform-style:preserve-3d;transition:transform .5s var(--ease);z-index:2}
.cover{display:block;position:relative;z-index:3;transform:rotate(4deg);border:var(--b);border-radius:6px;overflow:hidden;box-shadow:var(--sh-lg);transition:transform .4s var(--ease)}
.cover:hover{transform:rotate(1deg) translateY(-6px)}
.fan{position:absolute;inset:0;width:100%;border:var(--b);border-radius:6px;box-shadow:var(--sh);transition:transform .6s var(--ease)}
.fan-l{transform:translateX(-78px) rotate(-14deg) scale(.94)}
.fan-r{transform:translateX(80px) rotate(17deg) scale(.94)}
.hero-art:hover .fan-l{transform:translateX(-104px) rotate(-19deg) scale(.94)}
.hero-art:hover .fan-r{transform:translateX(106px) rotate(22deg) scale(.94)}
.hero-art .burst{right:4%;top:6%}
.hero-art .sticker{left:0;bottom:10%;transform:rotate(-6deg)}

/* ---------- Faixa de marca (único marquee da página) ---------- */
.brandband{background:var(--lime);border-block:var(--b);overflow:hidden;transform:rotate(-1.2deg);margin-block:-6px;position:relative;z-index:3}
.brandband-track{display:flex;width:max-content}
.brandband-set{display:flex;align-items:center;gap:26px;padding:12px 13px;font:400 26px/1 var(--display);white-space:nowrap}
.brandband-set span{color:var(--paper);-webkit-text-stroke:2px var(--ink);paint-order:stroke fill;text-shadow:2px 2px 0 var(--ink)}
.brandband-set span:nth-of-type(3n+2){color:var(--orange)}
.brandband-set i{font-size:22px}
@media (prefers-reduced-motion:no-preference){.brandband-track{animation:band 38s linear infinite}@keyframes band{to{transform:translateX(-50%)}}}

/* ---------- Quiz ---------- */
.quiz-options{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.chip{display:inline-flex;align-items:center;gap:10px;min-height:56px;padding:12px 22px;border:var(--b);border-radius:var(--r-pill);background:var(--paper);font-weight:900;font-size:17px;box-shadow:var(--sh);transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .2s}
.chip i{font-size:22px}
.chip:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.chip[aria-checked="true"]{background:var(--lime);transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.quiz-result{margin-top:30px;min-height:220px}
.quiz-empty{display:flex;align-items:center;gap:12px;padding:26px;border:2px dashed var(--ink);border-radius:var(--r-card);color:var(--muted);font-weight:700}
.quiz-empty i{font-size:26px;color:var(--ink)}
.result{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center;padding:30px;background:var(--paper);border:var(--b);border-radius:var(--r-card);box-shadow:var(--sh-lg)}
.result h3{font:400 30px/1.05 var(--display)}
.result p{margin-block:12px 20px;color:var(--muted);max-width:48ch}
.result-pages{display:flex;gap:12px}
.result-pages figure{margin:0;width:104px;text-align:center;font-size:12px;font-weight:900}
.result-pages img{width:104px;aspect-ratio:2/3;object-fit:cover;border:var(--b);border-radius:6px;box-shadow:3px 3px 0 var(--ink);margin-bottom:8px;background:var(--paper)}
.result-pages figure:nth-child(1) img{transform:rotate(-4deg)} .result-pages figure:nth-child(3) img{transform:rotate(4deg)}

/* ---------- Prévia ---------- */
.preview{background:var(--paper);border-block:var(--b)}
.reader{margin-top:40px;border:var(--b);border-radius:var(--r-card);background:var(--bg);box-shadow:var(--sh-lg);overflow:hidden}
.reader-tabs{display:flex;gap:10px;padding:16px;border-bottom:var(--b);overflow-x:auto;background:var(--paper)}
.tab{flex-shrink:0;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 16px;border:var(--b);border-radius:var(--r-pill);font-weight:900;font-size:14px;background:var(--paper)}
.tab b{font-family:var(--display);font-weight:400;color:var(--orange);-webkit-text-stroke:1px var(--ink);paint-order:stroke fill}
.tab:hover{background:var(--lime-soft)}
.tab.is-on{background:var(--lime);box-shadow:3px 3px 0 var(--ink)}
.tab-lock{border-style:dashed}
.reader-stage{display:flex;align-items:center;justify-content:center;gap:28px;padding:40px 20px;background-image:radial-gradient(color-mix(in srgb,var(--ink) 18%,transparent) 1px,transparent 1px);background-size:14px 14px}
.arrow{width:52px;height:52px;flex-shrink:0;display:grid;place-items:center;border:var(--b);border-radius:var(--r-pill);background:var(--paper);font-size:22px;box-shadow:3px 3px 0 var(--ink);transition:transform .15s}
.arrow:not(:disabled):hover{background:var(--lime)}
.arrow:not(:disabled):active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.arrow:disabled{opacity:.3;cursor:default}
.page-btn{position:relative;width:min(360px,100%);border:var(--b);border-radius:6px;overflow:hidden;box-shadow:var(--sh-lg);cursor:zoom-in;background:var(--paper)}
.page-btn img{width:100%;aspect-ratio:2/3}
.zoom-hint{position:absolute;right:12px;bottom:12px;display:inline-flex;gap:6px;align-items:center;padding:6px 12px;border:var(--b);border-radius:var(--r-pill);background:var(--lime);font-weight:900;font-size:13px;opacity:0;transform:translateY(6px);transition:.25s var(--ease)}
.page-btn:hover .zoom-hint,.page-btn:focus-visible .zoom-hint{opacity:1;transform:none}
.locked{position:relative;width:min(360px,100%);aspect-ratio:2/3;border:var(--b);border-radius:6px;overflow:hidden;box-shadow:var(--sh-lg)}
.locked>img{width:100%;height:100%;object-fit:cover;filter:blur(6px);transform:scale(1.1)}
.locked-msg{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:24px;background:color-mix(in srgb,var(--paper) 86%,transparent)}
.locked-msg>i{font-size:34px;width:64px;height:64px;display:grid;place-items:center;border:var(--b);border-radius:50%;background:var(--pink)}
.locked-msg h3{font:400 28px/1.05 var(--display)}
.locked-msg p{color:var(--muted);font-size:15px;margin-bottom:6px}
.reader-status{text-align:center;padding:14px;border-top:var(--b);font-weight:900;font-size:14px;background:var(--paper)}
.shelf{position:relative;margin-top:26px;min-height:170px;border:2px dashed var(--ink);border-radius:var(--r-card);overflow:hidden;display:grid;place-items:center}
.shelf-track{position:absolute;inset:14px;display:flex;gap:10px;opacity:.5;pointer-events:none}
.shelf-track img{width:92px;height:138px;flex-shrink:0;border:1.5px solid var(--ink);border-radius:4px;object-fit:cover}
.shelf-cta{position:relative;z-index:1;text-align:center;padding:18px 26px;border:var(--b);border-radius:var(--r-card);background:var(--paper);box-shadow:var(--sh);transition:transform .2s var(--ease)}
.shelf-cta:hover{transform:translate(-2px,-2px)}
.shelf-cta b{display:block;font:400 22px/1.1 var(--display)}
.shelf-cta span{display:inline-flex;gap:6px;align-items:center;margin-top:6px;font-weight:900;font-size:14px;text-decoration:underline;text-underline-offset:4px}

/* ---------- Erros (bento com flip) ---------- */
.c-ink{background:var(--ink);color:var(--paper)}
.errors-grid{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:22px;margin-top:40px}
.flip{position:relative;min-height:300px;perspective:1200px;text-align:left;background:none}
.flip-big{grid-row:span 2;min-height:622px}
.flip:last-child{grid-column:1/-1;min-height:250px}
.flip-in{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .7s var(--ease)}
.flip[aria-pressed="true"] .flip-in{transform:rotateY(180deg)}
.face{position:absolute;inset:0;display:flex;flex-direction:column;gap:10px;padding:26px;border:var(--b);border-radius:var(--r-card);box-shadow:var(--sh-lg);backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
.flip:hover .face{box-shadow:10px 10px 0 var(--ink)}
.front{justify-content:flex-end}
.flip.c-pink .front{background:var(--pink)} .flip.c-orange .front{background:var(--orange)} .flip.c-blue .front{background:var(--blue);color:var(--paper)} .flip.c-lime .front{background:var(--lime)} .flip.c-ink .front{background:var(--ink);color:var(--paper)}
.flip.c-ink .front>i{color:var(--lime)}
.front>i{font-size:44px;margin-bottom:auto}
.flip-big .front>i{font-size:72px}
.face b{font:400 30px/1.05 var(--display)}
.flip-big .front b{font-size:48px}
.front>span{font-size:17px;font-weight:700;max-width:32ch}
.front em{font-style:normal;font-weight:900;font-size:14px;display:inline-flex;gap:6px;align-items:center;margin-top:4px;text-decoration:underline;text-underline-offset:4px}
.back{background:var(--paper);color:var(--ink);transform:rotateY(180deg);justify-content:flex-start;gap:16px}
.back-head{display:flex;align-items:center;gap:14px;padding-bottom:14px;border-bottom:1.5px dashed var(--ink)}
.back-head img{width:54px;height:81px;object-fit:cover;flex-shrink:0;border:var(--b);border-radius:4px;transform:rotate(-5deg);box-shadow:2px 2px 0 var(--ink)}
.back-head>span{font:400 26px/1.05 var(--display)}
.back-head small{display:block;width:max-content;font:900 12px/1 var(--body);letter-spacing:.04em;text-transform:uppercase;padding:5px 10px;margin-bottom:6px;border:var(--b);border-radius:var(--r-pill);background:var(--lime)}
.back ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.back li{display:flex;gap:10px;align-items:flex-start;font-weight:700;font-size:15.5px;line-height:1.4}
.back 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}
.flip-big .back-head img{width:96px;height:144px}
.flip-big .back-head>span{font-size:36px}
.flip-big .back li{font-size:18px}
.back-art{margin-top:auto;width:100%;border:var(--b);border-radius:12px;background:var(--bg)}
.flip:last-child .back{flex-direction:row;align-items:center;gap:30px}
.flip:last-child .back-head{border-bottom:0;border-right:1.5px dashed var(--ink);padding:0 30px 0 0}
.flip:last-child .back ul{flex:1}

/* ---------- Dentro ---------- */
.inside{background:var(--lime-soft);border-block:var(--b)}
.inside-in{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;align-items:start}
.inside-poster{position:sticky;top:110px}
.inside-poster img{width:min(320px,100%);margin-inline:auto;transform:rotate(-4deg);border:var(--b);border-radius:6px;box-shadow:9px 9px 0 var(--pink)}
.chapters{margin-top:34px;display:grid;gap:14px}
.chapters details{border:var(--b);border-radius:var(--r-card);background:var(--paper);box-shadow:var(--sh);overflow:hidden}
.chapters summary,.faq-list summary{list-style:none;cursor:pointer}
.chapters summary::-webkit-details-marker,.faq-list summary::-webkit-details-marker{display:none}
.chapters summary{display:flex;align-items:center;gap:16px;padding:18px 22px;font-weight:900;font-size:19px}
.chapters summary>i:first-child{font-size:24px;width:48px;height:48px;flex-shrink:0;display:grid;place-items:center;border:var(--b);border-radius:50%;background:var(--lime)}
.chapters summary small{display:block;font-size:13px;color:var(--muted);font-weight:700}
.tog{margin-left:auto;font-size:18px;transition:transform .25s var(--ease)}
details[open] .tog{transform:rotate(45deg)}
.chapters ul{list-style:none;margin:0;padding:0 22px 20px 86px;display:flex;flex-wrap:wrap;gap:8px}
.chapters li{padding:6px 12px;border:1.5px solid var(--ink);border-radius:var(--r-pill);font-weight:700;font-size:14px;background:var(--bg)}

/* ---------- Detalhes (bento de recortes) ---------- */
.details-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-template-areas:"a a b b" "a a c c" "d d e e" "f f g g";grid-auto-rows:minmax(250px,auto);gap:22px;margin-top:40px}
.shot-a{grid-area:a}.shot-b{grid-area:b}.shot-c{grid-area:c}.shot-d{grid-area:d}.shot-e{grid-area:e}.shot-f{grid-area:f}.shot-g{grid-area:g}
.shot{position:relative;display:flex;align-items:center;justify-content:center;padding:58px 16px 16px;border:var(--b);border-radius:var(--r-card);overflow:hidden;background:var(--paper);box-shadow:var(--sh-lg);cursor:zoom-in;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.shot img{width:100%;height:100%;object-fit:contain;transition:transform .5s var(--ease)}
.shot:nth-child(odd){transform:rotate(-.6deg)} .shot:nth-child(even){transform:rotate(.6deg)}
.shot:hover{transform:translate(-3px,-3px) rotate(0);box-shadow:10px 10px 0 var(--ink)}
.shot:hover img{transform:scale(1.03)}
.shot-a{background:var(--lime-soft)} .shot-d{background:var(--pink-soft)} .shot-g{background:var(--blue-soft)}
.shot-tag{position:absolute;left:14px;top:14px;z-index:1;display:inline-flex;gap:8px;align-items:center;padding:7px 14px;border:var(--b);border-radius:var(--r-pill);font-weight:900;font-size:13px;box-shadow:2px 2px 0 var(--ink)}
.shot-tag small{font-weight:700;opacity:.75}

/* ---------- Oferta ---------- */
.offer{background:var(--paper);border-block:var(--b)}
.offer-in{display:grid;grid-template-columns:.9fr 1fr;gap:70px;align-items:center}
.offer-art{position:relative;display:grid;place-items:center;min-height:520px}
.offer-art .sun-sm{width:380px;height:380px}
.offer-art img{position:relative;z-index:1;width:280px;transform:rotate(-5deg);border:var(--b);border-radius:6px;box-shadow:var(--sh-lg)}
.offer-art .burst{right:8%;top:4%}
.offer-card{padding:40px;border:var(--b);border-radius:var(--r-card);background:var(--bg);box-shadow:10px 10px 0 var(--ink)}
.checks{list-style:none;padding:0;margin:28px 0;display:grid;gap:12px}
.checks li{display:flex;gap:12px;align-items:flex-start;font-weight:700;font-size:17px}
.checks i{flex-shrink:0;width:26px;height:26px;display:grid;place-items:center;border:var(--b);border-radius:50%;background:var(--lime);font-size:14px;margin-top:1px}
.price{display:flex;align-items:flex-start;gap:4px;font-family:var(--display);line-height:.9}
.price strong{font-weight:400;font-size:104px;color:var(--lime);-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;text-shadow:5px 5px 0 var(--ink)}
.price .cur{font-size:30px;margin-top:12px}
.price .cents{font-size:34px;margin-top:12px}
.price-note{margin-block:10px 24px;color:var(--muted);font-size:15px;font-weight:700}
.guarantee{display:flex;align-items:center;gap:14px;margin-top:20px;padding:14px 16px;border:var(--b);border-radius:16px;background:var(--lime-soft)}
.guarantee>i{flex-shrink:0;width:48px;height:48px;display:grid;place-items:center;border:var(--b);border-radius:50%;background:var(--lime);font-size:24px;transform:rotate(-6deg)}
.guarantee b{display:block;font:400 21px/1.1 var(--display)}
.guarantee span{display:block;font-size:14px;font-weight:700;color:var(--muted);line-height:1.4;margin-top:2px}
.buy-status{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:16px;font-size:14px;font-weight:700;color:var(--muted)}
.buy-status.attention{background:var(--pink-soft);color:var(--ink);padding:10px;border-radius:12px}
.scope{margin-top:16px;padding-top:14px;border-top:1.5px dashed var(--ink);font-size:13px;color:var(--muted);text-align:center}

/* ---------- FAQ ---------- */
.faq{display:grid;grid-template-columns:.8fr 1.2fr;gap:60px;align-items:start}
.faq-list{display:grid;gap:12px}
.faq-list details{border:var(--b);border-radius:16px;background:var(--paper)}
.faq-list details[open]{box-shadow:var(--sh)}
.faq-list summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;font-weight:900;font-size:17px}
.faq-list details>p{padding:0 22px 20px;color:var(--muted);font-size:16px}

/* ---------- Footer / mobile / dialog ---------- */
.footer{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:36px 48px;border-top:var(--b)}
.footer p{color:var(--muted);font-weight:700;font-size:15px}
.mobile-bar{display:none}
dialog{padding:0;border:var(--b);border-radius:var(--r-card);background:var(--paper);width:min(880px,95vw);max-height:92dvh;box-shadow:var(--sh-lg);overflow:hidden}
dialog::backdrop{background:color-mix(in srgb,var(--ink) 80%,transparent)}
body:has(dialog[open]){overflow:hidden}
.dialog-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;border-bottom:var(--b)}
.dialog-bar h2{font:900 15px/1.3 var(--body)}
.dialog-body{max-height:calc(92dvh - 66px);overflow:auto;overscroll-behavior:contain;padding:16px}
.dialog-body img{width:1024px;max-width:none;margin:auto}
.dialog-body img.is-shot{width:100%;max-width:1004px}

/* ---------- Revelação no scroll ---------- */
@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
  .reveal.in{opacity:1;transform:none}
  .hero-copy>*{animation:rise .7s var(--ease) both}
  .hero-copy>*:nth-child(2){animation-delay:.08s}.hero-copy>*:nth-child(3){animation-delay:.16s}.hero-copy>*:nth-child(4){animation-delay:.24s}
  .hero-art{animation:rise .9s .15s var(--ease) both}
  .result{animation:pop .45s var(--ease) both}
  @keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
  @keyframes pop{from{opacity:0;transform:scale(.96) translateY(10px)}to{opacity:1;transform:none}}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .flip[aria-pressed="true"] .front{visibility:hidden}
  .flip[aria-pressed="true"] .back{transform:none}
  .flip[aria-pressed="true"] .flip-in{transform:none}
}

/* ---------- Responsivo ---------- */
@media (max-width:1024px){
  .errors-grid{grid-template-columns:1fr 1fr}
  .flip-big{grid-row:auto;grid-column:1/-1;min-height:420px}

  .wrap{width:calc(100% - 48px)}
  .hero{gap:24px;min-height:0;max-height:none}
  .hero-art{height:470px}.hero-art .sun{width:370px;height:370px}.tilt{width:240px}
  .fan-l{transform:translateX(-58px) rotate(-14deg) scale(.94)}.fan-r{transform:translateX(60px) rotate(17deg) scale(.94)}
  .inside-in,.offer-in{gap:40px}.faq{gap:36px}
}
@media (max-width:767px){
  html{scroll-padding-top:74px}
  body{font-size:16px}
  .wrap{width:calc(100% - 32px)}
  .section{padding-block:64px}
  .header-in{min-height:62px}
  .wm-2{font-size:23px}
  .header nav>a:not(.btn){display:none}
  .hero{grid-template-columns:1fr;padding-block:36px 48px;gap:30px}
  .lead{font-size:17px;margin-block:20px 24px}
  .hero-actions{flex-direction:column;align-items:stretch}
  .hero-actions .btn{width:100%}
  .hero-actions .link{align-self:center}
  .hero-art{height:400px}
  .hero-art .sun{width:300px;height:300px}
  .tilt{width:200px}
  .fan-l{transform:translateX(-50px) rotate(-13deg) scale(.92)}.fan-r{transform:translateX(52px) rotate(16deg) scale(.92)}
  .hero-art:hover .fan-l{transform:translateX(-58px) rotate(-15deg) scale(.92)}.hero-art:hover .fan-r{transform:translateX(60px) rotate(18deg) scale(.92)}
  .burst{width:104px;height:104px;font-size:10px}.burst b{font-size:27px}
  .hero-art .burst{right:0;top:0}
  .hero-art .sticker{left:0;bottom:4%;font-size:11px;max-width:140px;padding:8px 12px}
  .title span{-webkit-text-stroke:2px var(--ink);text-shadow:3px 3px 0 var(--ink)}
  h1.title{font-size:clamp(36px,10.5vw,54px)}
  .title-md{font-size:clamp(30px,8.6vw,42px)}
  .sub{font-size:16px}
  .brandband-set{font-size:20px;gap:18px;padding:10px}
  h1.title span{white-space:normal}
  .quiz-options{flex-direction:column}
  .chip{width:100%;justify-content:flex-start}
  .result{grid-template-columns:1fr;padding:22px;gap:20px}
  .result h3{font-size:25px}
  .result-pages{justify-content:center}
  .result-pages figure,.result-pages img{width:88px}
  .reader-stage{gap:10px;padding:24px 10px}
  .arrow{width:44px;height:44px;font-size:19px}
  .page-btn,.locked{width:min(300px,100%)}
  .zoom-hint{opacity:1;transform:none;font-size:11px;padding:5px 10px}
  .locked-msg h3{font-size:22px}
  .shelf-track img{width:74px;height:111px}
  .errors-grid{grid-template-columns:1fr}
  .flip,.flip-big,.flip:last-child{grid-row:auto;grid-column:auto;min-height:300px}
  .flip-big .front b,.face b{font-size:28px}
  .flip-big .front>i{font-size:44px}
  .flip-big .back-head img{width:54px;height:81px}
  .flip-big .back-head>span,.back-head>span{font-size:23px}
  .flip-big .back li{font-size:15.5px}
  .back-art{display:none}
  .flip:last-child .back{flex-direction:column;align-items:stretch;gap:16px}
  .flip:last-child .back-head{border-right:0;border-bottom:1.5px dashed var(--ink);padding:0 0 14px}
  .inside-in{grid-template-columns:1fr}
  .inside-poster{display:none}
  .chapters summary{font-size:17px;padding:16px}
  .chapters ul{padding:0 16px 18px}
  .details-grid{grid-template-columns:1fr;grid-template-areas:"a" "b" "c" "d" "e" "f" "g";grid-auto-rows:auto}
  .shot{padding:54px 12px 12px}
  .offer-in{grid-template-columns:1fr}
  .offer-art{display:none}
  .offer-card{padding:26px 20px;box-shadow:6px 6px 0 var(--ink)}
  .price strong{font-size:88px}
  .faq{grid-template-columns:1fr;gap:26px}
  .footer{flex-direction:column;align-items:flex-start;padding-bottom:120px}
  .mobile-bar{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-mobile);display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px max(12px,env(safe-area-inset-bottom));background:var(--paper);border-top:var(--b);transform:translateY(110%);transition:transform .35s var(--ease)}
  .mobile-bar.show{transform:none}
  .mobile-bar>span{font-size:12px;font-weight:700;line-height:1.2}
  .mobile-bar strong{display:block;font:400 20px/1.1 var(--display)}
}
@media (max-width:360px){
  h1.title{font-size:34px}
  .hero-art{height:360px}.tilt{width:180px}
  .btn-lg{font-size:16px;padding:12px 20px}
}

/* ============================================================
   Contraste máximo no lettering (2026-09-22)
   Texto sempre escuro sólido. O verde-limão vira fundo
   (marca-texto de sticker), nunca cor de letra.
   Sem contorno fino e sem sombra deslocada nas letras.
   ============================================================ */
.title span,.title-md span{-webkit-text-stroke:0;text-shadow:none;color:var(--ink)}
.title .t2{width:fit-content;background:var(--lime);border:var(--b);border-radius:12px;box-shadow:var(--sh);padding:.02em .16em .06em;margin-top:.12em;transform:rotate(-1deg)}
.title-md .t2{border-radius:10px;box-shadow:3px 3px 0 var(--ink)}
h1.title .t2{box-shadow:5px 5px 0 var(--ink)}
.wm-2{color:var(--ink);-webkit-text-stroke:0;text-shadow:2px 2px 0 var(--lime)}
.brandband-set span,.brandband-set span:nth-of-type(3n+2){color:var(--ink);-webkit-text-stroke:0;text-shadow:none}
.tab b{color:var(--ink);-webkit-text-stroke:0}
.price strong{color:var(--ink);-webkit-text-stroke:0;text-shadow:5px 5px 0 var(--lime)}
@media (max-width:767px){
  .title .t2{box-shadow:3px 3px 0 var(--ink);border-radius:9px}
  h1.title .t2{white-space:normal}
}

/* ============================================================
   Refino de leitura e ritmo (2026-09-22)
   ============================================================ */
/* Marca-texto colorido por seção, sempre com contraste AA */
.hl-pink .t2{background:var(--pink)}
.hl-orange .t2{background:var(--orange)}
.hl-blue .t2{background:var(--blue);color:#fff}
/* Sem viúvas: títulos equilibrados, parágrafos com quebra "bonita" */
h1,h2,h3,.t1,.t2,.face b,.back-head>span,.shelf-cta b,.guarantee b{text-wrap:balance}
p,li,.sub,.lead,.face>span,.back li,.faq-list summary{text-wrap:pretty}
.lead{max-width:34ch}
/* Erros: 4 cartões em 2x2, todos com o mesmo peso */
.errors-grid{grid-template-columns:1fr 1fr}
.errors-grid .flip,.errors-grid .flip:last-child{grid-row:auto;grid-column:auto;min-height:290px}
.errors-grid .flip:last-child .back{flex-direction:column;align-items:stretch;gap:16px}
.errors-grid .flip:last-child .back-head{border-right:0;border-bottom:1.5px dashed var(--ink);padding:0 0 14px}
.errors-grid .front>i{font-size:52px}
.errors-grid .front b{font-size:36px}
/* Bento com 5 recortes reais */
.details-grid{grid-template-areas:"a a b b" "a a c c" "d d e e";grid-auto-rows:minmax(260px,auto)}
@media (max-width:1024px){.errors-grid .flip{min-height:300px}}
@media (max-width:767px){
  .errors-grid{grid-template-columns:1fr}
  .errors-grid .front b{font-size:30px}
  .errors-grid .flip,.errors-grid .flip:last-child{min-height:250px}
  .details-grid{grid-template-areas:"a" "b" "c" "d" "e"}
  h1.title{font-size:clamp(36px,10.4vw,52px)}
  .title-md{font-size:clamp(30px,8.4vw,40px)}
  .title .t2{padding:.04em .18em .08em}
}

/* ============================================================
   Marca-texto por linha (corrige caixa larga no iOS, 2026-09-22)
   O destaque vira inline: cada linha quebrada ganha a própria
   faixa, justa ao texto. Sem área vazia pintada.
   ============================================================ */
.title{display:block}
.title .t1{display:block}
.title .t2{display:inline;width:auto;transform:none;margin:0;border:0;border-radius:10px;padding:.02em .18em .04em;line-height:1.28;
  box-shadow:inset 0 0 0 2px var(--ink),4px 4px 0 var(--ink);
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
.title-md .t2{box-shadow:inset 0 0 0 2px var(--ink),3px 3px 0 var(--ink)}
h1.title .t2{box-shadow:inset 0 0 0 2px var(--ink),5px 5px 0 var(--ink)}
.title .t1+.t2{margin-top:0}
.title{line-height:1.12}
.wm-1{margin-bottom:2px}
@media (max-width:767px){
  .title .t2,h1.title .t2{box-shadow:inset 0 0 0 2px var(--ink),3px 3px 0 var(--ink);border-radius:8px}
}

/* Selos: pontas nunca cortadas e contraste alto (2026-09-22) */
.burst-ink{background:var(--ink);color:var(--paper)}
.burst-ink b{color:var(--lime)}
.hero-art .burst{right:3%;top:7%}
@media (max-width:1024px){.hero-art .burst{right:14px;top:14px}}
@media (max-width:767px){.hero-art .burst{right:16px;top:10px}}

/* Miniatura do produto no card de oferta */
.offer-thumb{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.offer-thumb img{width:62px;aspect-ratio:2/3;object-fit:cover;border:var(--b);border-radius:5px;box-shadow:3px 3px 0 var(--ink);transform:rotate(-5deg);background:var(--paper)}
.offer-thumb span{font:400 20px/1.1 var(--display)}
.offer-thumb small{display:block;margin-top:4px;font:700 13px/1.3 var(--body);color:var(--muted)}

/* ============================================================
   Método do guia: páginas reais fundidas ao fundo
   As imagens já têm as bordas em transparência; sem moldura.
   ============================================================ */
.method-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:44px;align-items:start}
.m-item{margin:0;display:flex;flex-direction:column;gap:6px}
.m-item:nth-child(2){margin-top:70px}
.m-page{display:block;cursor:zoom-in;transition:transform .5s var(--ease)}
.m-page img{width:100%;height:auto;filter:drop-shadow(0 14px 18px rgba(30,36,23,.10))}
.m-item:nth-child(1) .m-page{transform:rotate(-1.5deg)}
.m-item:nth-child(3) .m-page{transform:rotate(1.5deg)}
.m-page:hover{transform:translateY(-6px) rotate(0)}
.m-item figcaption{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:0 8px;margin-top:-34px;position:relative}
.m-tag{display:inline-flex;padding:7px 14px;border:var(--b);border-radius:var(--r-pill);font-weight:900;font-size:13px;box-shadow:2px 2px 0 var(--ink)}
.m-item b{font:400 27px/1.1 var(--display);text-wrap:balance}
.m-item figcaption>span:not(.m-tag){font-weight:700;color:var(--muted);font-size:16px;text-wrap:pretty}
.m-item small{font-weight:900;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);opacity:.65}
@media (max-width:1024px){.method-grid{gap:18px}.m-item b{font-size:23px}}
@media (max-width:767px){
  .method-grid{grid-template-columns:1fr;gap:36px}
  .m-item:nth-child(2){margin-top:0}
  .m-page{max-width:420px;margin-inline:auto}
  .m-item figcaption{margin-top:-26px}
}
/* Selos mais seguros contra corte */
.burst{width:122px;height:122px}
@media (max-width:767px){.burst{width:100px;height:100px}}

/* Ancoragem: preço de lançamento (sem preço riscado fictício) */
.launch{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-bottom:10px}
.launch-tag{display:inline-flex;padding:6px 14px;border:var(--b);border-radius:var(--r-pill);background:var(--orange);font-weight:900;font-size:13px;box-shadow:2px 2px 0 var(--ink)}
.launch-next{font-weight:700;font-size:15px;color:var(--muted)}
.launch-next b{color:var(--ink);font-weight:900}
.launch-save{display:inline-flex;align-items:center;gap:8px;margin-top:12px;padding:6px 12px;border-radius:10px;background:var(--lime-soft);font-weight:900;font-size:14px}
.launch-save i{font-size:16px}

/* Popup de saída */
.exit{width:min(720px,94vw);padding:0;overflow:visible}
.exit-x{position:absolute;top:-16px;right:-16px;z-index:2;box-shadow:3px 3px 0 var(--ink)}
.exit-in{display:grid;grid-template-columns:200px 1fr;gap:30px;align-items:center;padding:34px}
.exit-cover{width:100%;border:var(--b);border-radius:6px;box-shadow:var(--sh);transform:rotate(-5deg)}
.exit-list{list-style:none;margin:20px 0 22px;padding:0;display:grid;gap:10px}
.exit-list li{display:flex;gap:10px;align-items:flex-start;font-weight:700;font-size:16px;line-height:1.4}
.exit-list 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}
.exit-alt{display:block;text-align:center;margin-top:14px;font-size:14px}
.exit .title{font-size:clamp(30px,3.4vw,42px)}
@media (prefers-reduced-motion:no-preference){.exit[open]{animation:pop .4s var(--ease) both}}
@media (max-width:767px){
  .exit{width:calc(100vw - 32px)}
  .exit-in{grid-template-columns:1fr;gap:18px;padding:26px 20px}
  .exit-cover{width:110px;margin:0 auto}
  .exit-x{top:-12px;right:-8px}
}
