/* Doceteca — página de venda (issue #712), v5 "o livro à altura do app".
   Texto: landing/textos/doceteca.md §2 (v5, aprovado pelo dono em 2026-10-14). Visual: produtos/lowticket/confeitaria/
   DESIGN.md e app/paleta.json (dez cores, nenhuma outra; sombra e brilho só como alfa de chocolate e de glacê).
   Movimento: tokens e regras do onguia-site (docs/oraculos/oficio-fabrica/movimento-e-scroll-na-web.md §4): curva da
   casa cubic-bezier(.23,1,.32,1); só transform/opacity/clip-path; estado inicial VISÍVEL (o JS esconde e revela, com
   trava de 1,5 s); com prefers-reduced-motion, menos e mais suave, nunca zero, e nada se move sozinho.
   Encostos proibidos respeitados: rosa nunca encosta em chocolate (renda ou anel glacê), ouro em glacê/prata só com
   contorno chocolate, chocolate e cacau nunca em menta, glacê nunca em prata, rosa-escuro nunca sobre prata. */

@font-face{font-family:"Sansita Swashed";font-style:normal;font-weight:600 900;font-display:swap;
  src:url(/fontes/doceteca/sansita-swashed-latin.woff2) format("woff2")}
@font-face{font-family:"Gabarito";font-style:normal;font-weight:400 900;font-display:swap;
  src:url(/fontes/doceteca/gabarito-latin.woff2) format("woff2")}

:root{
  --chocolate:#2A120C; --cacau:#6A3A2C; --glace:#FFF5F8;
  --rosa:#CC1166; --rosa-escuro:#9E0B50;
  --ouro:#DCA42C; --ouro-claro:#F6D373;
  --menta:#0A5446; --menta-clara:#A9E6D2;
  --prata:#ECE3E8;
  --sombra:42 18 12; --luz:255 245 248;
  --casa:cubic-bezier(.23,1,.32,1);
  --display:"Sansita Swashed","Gabarito",Georgia,serif;
  --texto:"Gabarito",system-ui,-apple-system,"Segoe UI",sans-serif;
  --gutter:18px;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html,body{margin:0}
body{background:var(--glace);color:var(--chocolate);font-family:var(--texto);font-size:17px;line-height:1.5;
  -webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;overflow-x:clip}
h1,h2,h3,h4{margin:0;text-wrap:balance}
p{margin:0;text-wrap:pretty}
img,video{display:block;max-width:100%;height:auto}
a{color:var(--rosa-escuro);text-underline-offset:.2em;text-decoration-thickness:1.5px}
:focus-visible{outline:3px solid var(--rosa);outline-offset:3px;border-radius:8px}
.escuro :focus-visible,.toalha :focus-visible{outline-color:var(--ouro-claro)}
.painel-prata :focus-visible{outline-color:var(--chocolate)}
[hidden]{display:none !important}
.so-leitor{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.pular{position:absolute;left:12px;top:-60px;z-index:90;padding:10px 16px;border-radius:12px;background:var(--glace);color:var(--chocolate);font-weight:700}
.pular:focus{top:12px}
.miolo{width:min(100% - 2*var(--gutter), 1120px);margin-inline:auto}
.estreito{width:min(100% - 2*var(--gutter), 720px);margin-inline:auto}
.ico{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- botão plissado (DESIGN.md, Buttons; pressão do onguia-site: 150 ms, achata em 80 ms) ---------- */
.plisse{--cor:var(--rosa);--tinta:var(--glace);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  min-height:58px;padding:0 1.5em;border-radius:999px;text-decoration:none;border:0;cursor:pointer;
  background-color:var(--cor);color:var(--tinta);font:inherit;
  background-image:repeating-linear-gradient(90deg, rgb(var(--luz)/.16) 0 4px, rgb(var(--sombra)/.10) 4px 9px);
  background-size:9px 100%;font-weight:700;font-size:1.1rem;line-height:1.15;text-align:center;
  box-shadow:0 2px 0 rgb(var(--sombra)/.25), 0 8px 18px -8px rgb(var(--sombra)/.55);
  transition:transform .15s var(--casa), box-shadow .22s var(--casa)}
/* rosa sobre chocolate: o anel glacê faz o papel da renda (The Lace Between Rule) */
.escuro .plisse,.barra-compra .plisse{box-shadow:0 0 0 3px var(--glace), 0 10px 22px -8px rgb(var(--sombra)/.9)}
@media (hover:hover) and (pointer:fine){.plisse:hover{transform:translateY(-1px)}}
.plisse:active{transform:scale(.97);transition-duration:.08s}
.plisse .ico{width:22px;height:22px}

/* renda glacê: separa o chocolate da página glacê */
.renda{position:relative}
.renda::before{content:"";position:absolute;left:0;right:0;top:-14px;height:22px;pointer-events:none;z-index:2;
  background:
    radial-gradient(circle at 12px 16px, var(--rosa) 2.4px, transparent 3.2px) 0 0/24px 22px repeat-x,
    radial-gradient(circle at 12px 16px, var(--glace) 9.5px, transparent 10.5px) 0 0/24px 16px repeat-x,
    linear-gradient(var(--glace), var(--glace)) 0 14px/100% 8px no-repeat}

/* ---------- revelação (onguia-site reveal.tsx: só esconde com JS pronto; varia o gesto por tipo) ---------- */
.js-movimento [data-revela]{opacity:0;translate:0 18px;transition:opacity .6s var(--casa), translate .6s var(--casa)}
.js-movimento [data-revela="lado"]{translate:-22px 0}
.js-movimento [data-revela="escala"]{translate:0 0;scale:.95;transition:opacity .48s var(--casa), scale .48s var(--casa)}
.js-movimento [data-revela].visto{opacity:1;translate:0 0;scale:1}
.js-movimento [data-cascata] > *{opacity:0;translate:0 16px;transition:opacity .48s var(--casa), translate .48s var(--casa);transition-delay:calc(var(--i,0)*60ms)}
.js-movimento [data-cascata].visto > *{opacity:1;translate:0 0}

/* ============================== TOPO ============================== */
.topo{background:var(--chocolate);color:var(--glace);overflow:hidden;position:relative;
  background-image:radial-gradient(120% 70% at 50% 0%, rgb(var(--luz)/.07), transparent 60%)}
.topo-grade{display:grid;gap:40px;padding-block:max(22px, env(safe-area-inset-top)) 70px}
.topo-texto{text-align:center}
.olho{display:inline-flex;align-items:center;gap:10px;color:var(--menta-clara);font-weight:600;font-size:.98rem}
.olho img{width:auto;height:30px}
.topo h1{margin-top:18px;font-family:var(--display);font-weight:900;color:var(--glace);
  font-size:clamp(2.3rem, 10.4vw, 4.3rem);line-height:1;letter-spacing:-.005em}
.topo h1 em{font-style:normal;color:var(--ouro-claro)}
.topo-apoio{margin:18px auto 0;max-width:36ch;color:var(--menta-clara);font-size:1.1rem;line-height:1.5}
.topo-cta{margin-top:26px;display:flex;flex-direction:column;align-items:center;gap:12px}
.topo-cta .plisse{min-width:min(100%, 330px)}
.tira{color:var(--menta-clara);font-size:.92rem;line-height:1.4}
.tira span{white-space:nowrap}
/* entrada do topo na montagem (onguia-site: hero sem Reveal; nasce opaco e só se desloca) */
@media (prefers-reduced-motion:no-preference){
  .topo-texto > *{animation:entra .7s var(--casa) both}
  .topo-texto > :nth-child(2){animation-delay:.07s}
  .topo-texto > :nth-child(3){animation-delay:.14s}
  .topo-texto > :nth-child(4){animation-delay:.21s}
  .topo-video{animation:entra-cel 1s var(--casa) .18s both}
}
@keyframes entra{from{translate:0 10px}to{translate:0 0}}
@keyframes entra-cel{from{translate:0 16px;scale:.97}to{translate:0 0;scale:1}}

/* o celular com o vídeo do app */
.topo-video{position:relative;display:flex;justify-content:center;padding-bottom:26px}
.cel{position:relative;width:min(72vw, 300px);border-radius:42px;padding:10px;background:var(--chocolate);
  box-shadow:0 0 0 2px var(--ouro), 0 0 0 10px rgb(var(--luz)/.05), 0 50px 70px -30px rgb(var(--sombra)/1)}
.cel video,.cel img{width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:33px;background:var(--chocolate)}
.cel-controles{position:absolute;left:50%;bottom:-24px;translate:-50% 0;display:flex;gap:8px;z-index:3}
.cel-controles button{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px;border-radius:999px;border:0;cursor:pointer;
  font:inherit;font-weight:700;font-size:.92rem;background:var(--ouro);color:var(--chocolate);white-space:nowrap;
  box-shadow:inset 0 0 0 2px var(--chocolate), 0 8px 18px -8px rgb(var(--sombra)/.9);transition:transform .15s var(--casa)}
.cel-controles button:active{transform:scale(.96)}
.cel-controles .ico{width:18px;height:18px}
.cel-selo{position:absolute;right:-6px;top:28px;rotate:4deg;background:var(--glace);color:var(--chocolate);font-weight:700;font-size:.82rem;
  padding:7px 12px;border-radius:999px;box-shadow:inset 0 0 0 2px var(--cacau), 0 8px 16px -8px rgb(var(--sombra)/.9)}
@media (min-width:960px){
  .topo-grade{grid-template-columns:1.15fr .85fr;align-items:center;padding-block:60px 96px}
  .topo-texto{text-align:left}
  .topo-apoio{margin-left:0}
  .topo-cta{align-items:flex-start}
  .cel{width:320px}
}

/* ============================== SEÇÕES ============================== */
.secao{padding-block:64px}
.titulo{font-family:var(--display);font-weight:900;color:var(--rosa-escuro);font-size:clamp(2rem, 8vw, 3rem);line-height:1.04}
.dor{padding-top:72px}
.dor p{margin-top:16px;font-size:1.14rem}

/* ============================== FAÇA A CONTA AQUI ============================== */
.demo .titulo{text-align:center}
.painel-prata{margin-top:26px;border-radius:30px;background:var(--prata);overflow:hidden;
  background-image:linear-gradient(115deg, transparent 0 38%, rgb(var(--luz)/.55) 46%, transparent 56%);
  box-shadow:0 0 0 1.5px var(--chocolate), 0 0 0 6px var(--ouro), 0 0 0 7.5px var(--chocolate), 0 26px 40px -22px rgb(var(--sombra)/.8)}
.demo-foto{position:relative;height:150px;background:var(--chocolate)}
.demo-foto img{width:100%;height:100%;object-fit:cover;object-position:50% 58%}
.demo-titulo{position:absolute;left:0;right:0;bottom:0;padding:34px 18px 14px;color:var(--glace);
  background:linear-gradient(to top, rgb(var(--sombra)/.92), rgb(var(--sombra)/0))}
.demo-titulo h3{font-family:var(--display);font-weight:900;font-size:1.45rem;line-height:1.1}
.demo-titulo p{color:var(--menta-clara);font-size:.92rem;margin-top:2px}
.demo-corpo{padding:16px 14px 18px}
.ing{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.ing li{display:grid;grid-template-columns:1fr 1fr;gap:6px 10px;padding:10px 12px;border-radius:18px;background:var(--glace);box-shadow:inset 0 0 0 2px var(--cacau)}
.ing-nome{grid-column:1 / -1;display:flex;justify-content:space-between;gap:10px;font-weight:700}
.ing-nome .qtd{color:var(--cacau);font-weight:600;white-space:nowrap}
.ing label,.acrescimo label{display:flex;flex-direction:column;gap:3px;font-size:.8rem;color:var(--cacau);min-width:0}
.campo-un{position:relative;display:flex;align-items:center}
.campo{font:inherit;font-variant-numeric:tabular-nums;width:100%;min-width:0;min-height:46px;border-radius:14px;
  border:2px solid var(--cacau);background:var(--glace);color:var(--chocolate);padding:0 12px;font-size:1rem}
.campo:focus{outline:none;border-color:var(--rosa);box-shadow:0 0 0 3px rgb(var(--sombra)/.10)}
.campo-un .campo{padding-left:38px}
.campo-un .pre{position:absolute;left:12px;color:var(--cacau);font-size:.95rem;pointer-events:none}
.campo-un .pos{position:absolute;right:12px;color:var(--cacau);font-size:.95rem;pointer-events:none}
.campo-un.g .campo{padding-left:12px;padding-right:34px}
.escala{margin-top:16px;display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.escala-rotulo{font-weight:700;flex:1 0 100%}
.forma{min-width:64px;min-height:48px;padding:0 12px;border-radius:999px;border:0;cursor:pointer;font:inherit;font-weight:800;font-size:1.05rem;
  background:var(--glace);color:var(--chocolate);box-shadow:inset 0 0 0 2px var(--cacau);transition:transform .15s var(--casa)}
.forma:active{transform:scale(.94)}
.forma[aria-pressed="true"]{background:var(--ouro);box-shadow:inset 0 0 0 2px var(--chocolate), 0 6px 12px -8px rgb(var(--sombra)/.8)}
.acrescimo{margin-top:14px;padding:12px;border-radius:18px;background:var(--glace);box-shadow:inset 0 0 0 2px var(--cacau)}
.resultado{margin-top:16px;border-radius:24px;background:var(--chocolate);color:var(--glace);padding:16px 18px;display:grid;gap:10px}
.resultado div{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.resultado .rot{color:var(--menta-clara);font-size:.92rem;line-height:1.25}
.resultado output{font-weight:900;color:var(--ouro-claro);font-size:clamp(1.9rem, 9vw, 2.6rem);line-height:1;letter-spacing:-.02em;white-space:nowrap}
.resultado .total{color:var(--menta-clara);font-size:.92rem}
.compras{margin-top:14px;padding:12px 14px;border-radius:18px;background:var(--glace);box-shadow:inset 0 0 0 2px var(--cacau)}
.compras h4{margin:0 0 6px;font-size:.98rem}
.compras ul{margin:0;padding-left:1.1em;font-size:.95rem}
.demo-nota{margin-top:14px;text-align:center;font-style:italic;color:var(--cacau);font-size:.94rem}

/* ============================== PROVA ============================== */
.prova .titulo{text-align:center}
.numeros{margin:26px auto 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;max-width:720px}
.numeros div{padding:16px 8px;border-radius:22px;background:var(--glace);box-shadow:inset 0 0 0 2px var(--cacau);text-align:center}
.numeros b{display:block;font-weight:900;font-size:clamp(2rem, 9vw, 3rem);line-height:1;color:var(--rosa-escuro);min-width:3ch}
.numeros span{display:block;margin-top:6px;font-size:.88rem;line-height:1.25}
.prova-texto{margin:22px auto 0;max-width:62ch;text-align:center;font-size:1.06rem}
/* faixa de fotos (onguia-site faixa-de-imagens: duas cópias, translate -50%, pausa obrigatória) */
.faixa{position:relative;margin-top:30px}
.faixa-janela{overflow:hidden;-webkit-mask-image:linear-gradient(90deg, transparent, var(--chocolate) 6%, var(--chocolate) 94%, transparent);mask-image:linear-gradient(90deg, transparent, var(--chocolate) 6%, var(--chocolate) 94%, transparent)}
.faixa-trilho{display:flex;width:max-content;animation:faixa calc(var(--n) * 4.5s) linear infinite;animation-play-state:paused}
.faixa[data-pronto] .faixa-trilho{animation-play-state:running}
.faixa[data-pausada] .faixa-trilho{animation-play-state:paused}
.faixa figure{margin:0;padding-inline-end:14px;flex:none;width:214px}
.faixa img{width:200px;aspect-ratio:2/3;object-fit:cover;border-radius:16px;box-shadow:0 0 0 1.5px var(--chocolate), 0 10px 18px -12px rgb(var(--sombra)/.8)}
.faixa figcaption{margin-top:8px;font-size:.84rem;color:var(--cacau);line-height:1.25;width:200px}
@keyframes faixa{to{transform:translate3d(-50%,0,0)}}
.faixa-pausa{display:flex;justify-content:flex-end;margin-top:10px}
.faixa-pausa button{min-height:44px;padding:0 16px;border-radius:999px;border:0;cursor:pointer;font:inherit;font-weight:700;
  background:var(--glace);color:var(--chocolate);box-shadow:inset 0 0 0 2px var(--cacau)}
/* celular e movimento reduzido: trilho que a pessoa arrasta, nada anda sozinho (carrossel-e-faixa-em-movimento.md §4) */
/* [2026-10-14, decisão do dono] a faixa anda sozinha também no celular, com o Pausar sempre à vista (SC 2.2.2); o
   canônico do onguia-site ("no celular nada avança sozinho") cede aqui. Com movimento reduzido, vira trilho de arrastar. */
@media (prefers-reduced-motion:reduce){
  .faixa-janela{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-mask-image:none;mask-image:none;padding-inline:var(--gutter)}
  .faixa-trilho{animation:none}
  .faixa figure{scroll-snap-align:start}
  .faixa figure[aria-hidden="true"]{display:none}
  .faixa-pausa{display:none}
}

/* ============================== O QUE VEM e PARA QUEM ============================== */
.toalha{background:var(--menta);color:var(--glace);
  background-image:repeating-linear-gradient(0deg, rgb(var(--luz)/.035) 0 1px, transparent 1px 7px),
                   repeating-linear-gradient(90deg, rgb(var(--sombra)/.06) 0 1px, transparent 1px 7px)}
.toalha .titulo{color:var(--ouro-claro)}
.itens{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:10px}
.itens li{padding:14px 18px;border-radius:20px;background:var(--glace);color:var(--chocolate);box-shadow:0 14px 24px -16px rgb(var(--sombra)/.9)}
.itens b{color:var(--rosa-escuro)}
@media (min-width:860px){.itens{grid-template-columns:repeat(2,1fr)}}
.paraquem{margin-top:26px;display:grid;gap:10px}
.paraquem p{padding:16px 18px;border-radius:20px;background:var(--glace);color:var(--chocolate)}
.paraquem b{font-family:var(--display);font-weight:900;color:var(--rosa-escuro);font-size:1.25rem}
@media (min-width:760px){.paraquem{grid-template-columns:1fr 1fr}}

/* ============================== PREÇO ============================== */
.preco-wrap{padding-block:70px 56px}
.preco{border-radius:32px;background:var(--chocolate);color:var(--glace);padding:34px 22px 30px;text-align:center;
  background-image:radial-gradient(90% 60% at 50% 0%, rgb(var(--luz)/.08), transparent 70%);
  box-shadow:0 0 0 1.5px var(--chocolate), 0 0 0 6px var(--ouro), 0 0 0 7.5px var(--chocolate), 0 30px 50px -26px rgb(var(--sombra)/.9)}
.preco h2{font-family:var(--display);font-weight:900;color:var(--glace);font-size:clamp(1.75rem, 7vw, 2.5rem);line-height:1.05}
.preco ul{list-style:none;margin:20px auto 0;padding:0;display:grid;gap:6px;max-width:32ch;text-align:left}
.preco li{position:relative;padding-left:26px;color:var(--menta-clara);font-size:1.04rem}
.preco li::before{content:"";position:absolute;left:2px;top:.42em;width:14px;height:14px;border-radius:50%;
  background:var(--ouro-claro);box-shadow:inset 0 0 0 3px var(--chocolate), 0 0 0 1.5px var(--ouro-claro)}
.valor{margin-top:22px;font-weight:900;color:var(--ouro-claro);line-height:.95;letter-spacing:-.03em;font-size:clamp(3.6rem, 19vw, 5.4rem)}
.valor small{font-size:.42em;letter-spacing:0;margin-right:.12em;vertical-align:.62em}
.preco .tira{margin-top:10px}
.preco .plisse{margin-top:24px;width:min(100%, 360px)}
.preco-meta{margin-top:18px;color:var(--menta-clara);font-size:.95rem}
.preco-lei{margin-top:10px;color:var(--menta-clara);font-size:.9rem}
.marcador{font-style:italic;border-bottom:2px dashed currentColor}

/* ============================== FAQ, RESUMO, FECHO, RODAPÉ ============================== */
.faq-lista{margin-top:20px;display:grid;gap:10px}
.ja-comprou{margin-top:18px}  /* v6 (#1056): a ajuda de uso mora em página própria */
.faq-lista details{border-radius:20px;background:var(--glace);box-shadow:inset 0 0 0 2px var(--cacau)}
.faq-lista summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:14px;
  min-height:56px;padding:12px 18px;font-weight:700;font-size:1.05rem}
.faq-lista summary::-webkit-details-marker{display:none}
.faq-lista summary .ico{transition:transform .3s var(--casa);color:var(--rosa-escuro)}
.faq-lista details[open] summary .ico{transform:rotate(180deg)}
.faq-lista details p{padding:0 18px 16px}
.resumo{margin-top:20px;padding:20px 20px 18px;border-radius:24px;background:var(--glace);box-shadow:inset 0 0 0 2px var(--cacau)}
.resumo ul{margin:0;padding-left:1.1em;display:grid;gap:8px}
.fecho{text-align:center;padding-block:40px 76px}
.fecho .titulo{max-width:20ch;margin-inline:auto}
.fecho-preco{margin-top:12px;font-size:1.25rem;font-weight:800}
.fecho .plisse{margin-top:22px;min-width:min(100%, 320px)}
.rodape{background:var(--chocolate);color:var(--glace);padding-block:30px calc(30px + env(safe-area-inset-bottom));font-size:.92rem}
.rodape p+p{margin-top:8px}
.rodape a,.rodape button{color:var(--ouro-claro)}
.rodape button{font:inherit;background:none;border:0;padding:0;text-decoration:underline;text-underline-offset:.2em;cursor:pointer}
.rodape .credito{color:var(--menta-clara);font-size:.84rem}

/* barra fixa de compra no celular (L-T4-22): o botão sempre junto do preço */
.barra-compra{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:10px max(var(--gutter), env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-left));
  background:var(--chocolate);color:var(--glace);box-shadow:0 -10px 24px -14px rgb(var(--sombra)/.9);
  transform:translateY(110%);transition:transform .35s var(--casa)}
.barra-compra.ver{transform:none}
.barra-compra .bp{font-weight:900;color:var(--ouro-claro);font-size:1.5rem;line-height:1}
.barra-compra .bp small{display:block;font-weight:500;font-size:.72rem;color:var(--menta-clara)}
.barra-compra .plisse{min-height:50px;font-size:1rem;padding:0 1.2em}
@media (min-width:960px){.barra-compra{display:none}}
@media (max-width:959px){.rodape{padding-bottom:calc(104px + env(safe-area-inset-bottom))}}

/* aviso de cookies: só existe quando há pixel (PIXEL_ID); Aceitar e Recusar com o mesmo peso */
.cookies{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:60;max-width:520px;margin-inline:auto;
  padding:16px 16px 14px;border-radius:22px;background:var(--glace);color:var(--chocolate);
  box-shadow:inset 0 0 0 2px var(--cacau), 0 20px 40px -18px rgb(var(--sombra)/.9)}
.cookies p{font-size:.95rem}
.cookies-acoes{margin-top:12px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cookies-acoes button{min-height:48px;border-radius:999px;border:0;cursor:pointer;font:inherit;font-weight:700;
  background:var(--glace);color:var(--chocolate);box-shadow:inset 0 0 0 2px var(--cacau)}

/* ============================== v5 · TOPO EM CAMADAS ============================== */
/* cartões de receitas DO APP em volta do celular, em profundidade: cada um anda numa fração (--p) do ponteiro e da
   rolagem (o JS escreve --mx/--my); parados em movimento reduzido e sem JS */
.topo-video{perspective:1200px}
.flutua{position:absolute;inset:0;pointer-events:none;display:grid;place-items:center}
.cartao{position:absolute;margin:0;width:118px;padding:6px 6px 8px;border-radius:16px;background:var(--glace);
  box-shadow:0 0 0 2px var(--ouro), 0 22px 30px -16px rgb(var(--sombra)/1);
  transform:translate3d(calc(var(--x) * var(--k,1) + var(--mx,0px) * var(--p)), calc(var(--y) * var(--k,1) + var(--my,0px) * var(--p)), 0) rotate(var(--r)) scale(calc(.82 + var(--p) * .25));
  transition:transform .5s var(--casa)}
.cartao img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:11px}
.cartao figcaption{margin-top:6px;color:var(--chocolate);font-weight:700;font-size:.72rem;line-height:1.15}
.topo-video .cel{z-index:2}
/* no celular os cartões encostam no aparelho e não passam da borda da tela (o topo corta o que sai) */
@media (max-width:600px){.flutua{--k:.78}.cartao{width:92px}.cartao figcaption{font-size:.62rem}}
@media (min-width:960px){.cartao{width:140px}}
@media (prefers-reduced-motion:no-preference){.cartao{animation:cartao-entra .9s var(--casa) both;animation-delay:calc(.25s + var(--p) * .3s)}}
@keyframes cartao-entra{from{opacity:0;translate:0 24px}to{opacity:1;translate:0 0}}

/* ============================== v5 · O LIVRO ============================== */
.livro{padding-bottom:20px}
.livro-grade{display:grid;gap:34px;align-items:center}
.livro-cel{display:grid;justify-items:center;gap:14px}
.cel-p{width:min(64vw, 270px)}
.livro-texto .titulo{margin-bottom:14px}
.livro-texto > p{font-size:1.08rem}
.livro .numeros{margin:22px 0 0;max-width:none}
.livro .prova-texto{margin:20px 0 0;max-width:none;text-align:left}
.capitulo{margin-top:20px;padding:20px 20px 18px;border-radius:24px;background:var(--rosa);color:var(--glace);
  background-image:repeating-linear-gradient(90deg, rgb(var(--luz)/.07) 0 10px, rgb(var(--sombra)/.07) 10px 22px)}
.capitulo h3{font-weight:600;font-size:1.1rem;line-height:1.25}
.capitulo h3 b{font-family:var(--display);font-weight:900;font-size:1.45rem}
.capitulo ul{margin:12px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.capitulo li{padding:7px 13px;border-radius:999px;background:var(--glace);color:var(--rosa-escuro);font-weight:700;font-size:.95rem}
.laco-pausa{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px;border-radius:999px;border:0;cursor:pointer;
  font:inherit;font-weight:700;font-size:.92rem;background:var(--glace);color:var(--chocolate);box-shadow:inset 0 0 0 2px var(--cacau)}
.laco-pausa .ico{width:18px;height:18px}
@media (min-width:900px){.livro-grade{grid-template-columns:.8fr 1.2fr;gap:56px}}

/* ============================== v5 · O PONTO ============================== */
.ponto{background:var(--chocolate);color:var(--glace)}
.ponto .titulo{color:var(--ouro-claro);text-align:center}
.ponto-texto{margin:14px auto 0;max-width:60ch;text-align:center;color:var(--menta-clara);font-size:1.08rem}
.estagios{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:16px}
.estagios li{border-radius:24px;overflow:hidden;background:var(--glace);color:var(--chocolate);box-shadow:0 0 0 2px var(--ouro), 0 24px 34px -22px rgb(var(--sombra)/1)}
.estagios img{width:100%;aspect-ratio:4/3;object-fit:cover}
.estagios div{padding:14px 16px 16px;font-size:.98rem}
.estagio-n{display:inline-grid;place-items:center;width:30px;height:30px;margin-right:8px;border-radius:50%;background:var(--ouro);color:var(--chocolate);
  font-weight:900;box-shadow:inset 0 0 0 2px var(--chocolate)}
.estagios b{color:var(--rosa-escuro)}
@media (min-width:820px){.estagios{grid-template-columns:repeat(3,1fr)}}

/* ============================== v5 · TOUR DAS FERRAMENTAS ============================== */
.tour .titulo{text-align:center}
.abas{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x proximity;padding:4px 2px 10px;margin:24px calc(-1 * var(--gutter)) 0;padding-inline:var(--gutter);
  scrollbar-width:none}
.abas::-webkit-scrollbar{display:none}
.abas [role="tab"]{flex:none;scroll-snap-align:start;min-height:46px;padding:0 18px;border-radius:999px;border:0;cursor:pointer;font:inherit;font-weight:700;
  background:var(--glace);color:var(--chocolate);box-shadow:inset 0 0 0 2px var(--cacau);transition:background-color .2s var(--casa), transform .15s var(--casa)}
.abas [role="tab"][aria-selected="true"]{background:var(--rosa);color:var(--glace);box-shadow:none}
.abas [role="tab"]:active{transform:scale(.96)}
.tour-palco{margin-top:18px;display:grid;gap:22px;align-items:center}
.tour-cel-wrap{display:grid;justify-items:center;gap:12px}
.tour-cel video{transition:opacity .25s var(--casa)}
.tour-cel.trocando video{opacity:.15}
.painel h3{font-family:var(--display);font-weight:900;color:var(--rosa-escuro);font-size:clamp(1.5rem, 6vw, 2.1rem);line-height:1.08}
.painel ol{margin:16px 0 0;padding:0;list-style:none;counter-reset:passo;display:grid;gap:10px}
.painel li{counter-increment:passo;position:relative;padding:12px 14px 12px 56px;border-radius:18px;background:var(--glace);box-shadow:inset 0 0 0 2px var(--cacau)}
.painel li::before{content:counter(passo);position:absolute;left:12px;top:10px;width:32px;height:32px;display:grid;place-items:center;border-radius:50%;
  background:var(--ouro);color:var(--chocolate);font-weight:900;box-shadow:inset 0 0 0 2px var(--chocolate)}
.painel p{margin-top:14px;font-size:1.06rem}
.js-movimento .painel:not([hidden]){animation:painel-entra .45s var(--casa) both}
@keyframes painel-entra{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}
@media (min-width:900px){.tour-palco{grid-template-columns:.75fr 1.25fr;gap:56px}.abas{flex-wrap:wrap;justify-content:center;overflow:visible;margin-inline:0}}

/* ============================== v5 · A CONTA ============================== */
.demo-pergunta{margin:16px auto 0;max-width:56ch;text-align:center;font-size:1.1rem}

/* ============================== v5 · A ETIQUETA EM 3D ============================== */
.etiqueta{background:var(--chocolate);color:var(--glace)}
.etiqueta .titulo{color:var(--ouro-claro)}
.etq-grade{display:grid;gap:36px;align-items:center}
.etq-texto p{margin-top:14px;font-size:1.08rem}
.etq-texto .etq-aviso{color:var(--menta-clara);font-size:.98rem}
.etq-cena{display:grid;justify-items:center;gap:22px;perspective:1100px;padding-block:20px}
/* a caixa de cento: 6 faces; a frente leva a etiqueta REAL do app (dados de exemplo). Rosa com anel glacê (encosto) */
.caixa3d{--w:300px;--h:208px;--d:150px;--ry:-28deg;--rx:-12deg;position:relative;width:var(--w);height:var(--h);transform-style:preserve-3d;
  transform:rotateX(var(--rx)) rotateY(var(--ry));transition:transform .6s var(--casa);touch-action:pan-y;cursor:grab}
.caixa3d.arrastando{transition:none;cursor:grabbing}
.caixa3d .face{position:absolute;left:0;top:0;background:var(--rosa);box-shadow:inset 0 0 0 3px var(--glace);
  background-image:repeating-linear-gradient(90deg, rgb(var(--luz)/.10) 0 6px, rgb(var(--sombra)/.10) 6px 13px)}
.caixa3d .frente,.caixa3d .tras{width:var(--w);height:var(--h)}
.caixa3d .lado-e,.caixa3d .lado-d{width:var(--d);height:var(--h)}
.caixa3d .tampa,.caixa3d .fundo{width:var(--w);height:var(--d)}
.caixa3d .frente{transform:translateZ(calc(var(--d) / 2));display:grid;place-items:center;padding:14px}
.caixa3d .tras{transform:rotateY(180deg) translateZ(calc(var(--d) / 2))}
.caixa3d .lado-e{transform:rotateY(-90deg) translateZ(calc(var(--d) / 2))}
.caixa3d .lado-d{left:calc(var(--w) - var(--d));transform:rotateY(90deg) translateZ(calc(var(--d) / 2))}
.caixa3d .tampa{background-color:var(--rosa-escuro);transform:rotateX(90deg) translateZ(calc(var(--d) / 2))}
.caixa3d .fundo{top:calc(var(--h) - var(--d));transform:rotateX(-90deg) translateZ(calc(var(--d) / 2))}
.caixa3d .frente img{width:100%;height:auto;border-radius:6px;box-shadow:0 0 0 3px var(--glace), 0 8px 14px -6px rgb(var(--sombra)/.8)}
.selo-exemplo{position:absolute;right:-12px;top:-14px;rotate:6deg;padding:6px 12px;border-radius:999px;background:var(--ouro-claro);color:var(--chocolate);
  font-weight:900;font-size:.8rem;letter-spacing:.06em;box-shadow:inset 0 0 0 2px var(--chocolate)}
.etq-acoes{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px}
.etq-dica{display:inline-flex;align-items:center;gap:6px;color:var(--menta-clara);font-size:.9rem}
.etq-dica .ico{width:18px;height:18px}
#etq-ver{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 18px;border-radius:999px;border:0;cursor:pointer;font:inherit;font-weight:700;
  background:var(--ouro);color:var(--chocolate);box-shadow:inset 0 0 0 2px var(--chocolate)}
#etq-ver .ico{width:20px;height:20px}
.etq-dialogo{width:min(100% - 24px, 760px);padding:18px;border:0;border-radius:24px;background:var(--glace);color:var(--chocolate)}
.etq-dialogo::backdrop{background:rgb(var(--sombra)/.82)}
.etq-dialogo img{width:100%;height:auto;border-radius:8px}
.etq-dialogo .selo-exemplo{right:22px;top:6px}
.etq-dialogo form{margin-top:14px;display:flex;justify-content:flex-end}
.etq-dialogo button{display:inline-flex;align-items:center;gap:6px;min-height:46px;padding:0 18px;border-radius:999px;border:0;cursor:pointer;font:inherit;font-weight:700;
  background:var(--glace);color:var(--chocolate);box-shadow:inset 0 0 0 2px var(--cacau)}
@media (min-width:900px){.etq-grade{grid-template-columns:1fr 1fr}.caixa3d{--w:360px;--h:250px;--d:150px}.etq-cena{padding-block:90px 30px}.etq-acoes{margin-top:44px}}
@media (max-width:600px){.caixa3d{--w:262px;--h:182px;--d:104px;--ry:-20deg}.etq-cena{padding-block:26px 6px}.etq-acoes{margin-top:18px}}
@media (max-width:360px){.caixa3d{--w:232px;--h:161px;--d:92px}}

/* ============================== v5 · OS 4 BÔNUS COMO LIVROS 3D ============================== */
.bonus .titulo,.bonus-intro,.bonus-nota{text-align:center}
.bonus-intro{margin:14px auto 0;max-width:58ch;font-size:1.08rem}
.bonus-nota{margin-top:18px;color:var(--cacau)}
.estante{list-style:none;margin:30px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 16px}
.estante li{display:grid;justify-items:center;align-content:start;gap:12px}
.livro3d{--rot:-22deg;position:relative;width:min(100%, 190px);aspect-ratio:3/4.1;border:0;padding:0;background:none;cursor:pointer;font:inherit;
  transform-style:preserve-3d;transform:perspective(900px) rotateY(var(--rot)) rotateX(4deg);transition:transform .6s var(--casa)}
@media (hover:hover) and (pointer:fine){.livro3d:hover{--rot:-12deg}}
.livro3d .folhas{position:absolute;inset:3% 0 3% 8%;border-radius:4px 10px 10px 4px;background:var(--glace);
  background-image:repeating-linear-gradient(90deg, rgb(var(--sombra)/.10) 0 1px, transparent 1px 4px);transform:translateZ(-14px);
  box-shadow:0 22px 30px -18px rgb(var(--sombra)/.9)}
.livro3d .lombada{position:absolute;left:0;top:0;bottom:0;width:28px;background:var(--capa);transform-origin:left;transform:rotateY(90deg) translateX(-14px);
  filter:brightness(.82);box-shadow:inset 0 0 0 2px var(--glace)}
.livro3d .capa{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;padding:16px 14px;border-radius:6px 14px 14px 6px;
  background-color:var(--capa);color:var(--tinta);text-align:left;transform-origin:left;transition:transform .7s var(--casa);
  background-image:linear-gradient(90deg, rgb(var(--sombra)/.22) 0 8px, transparent 8px 14px, rgb(var(--luz)/.10) 14px 16px, transparent 16px);
  box-shadow:inset 0 0 0 3px var(--glace), 0 20px 30px -18px rgb(var(--sombra)/1)}
.livro3d.ouro .capa{box-shadow:inset 0 0 0 3px var(--chocolate), 0 20px 30px -18px rgb(var(--sombra)/1)}
.livro3d .capa small{font-weight:800;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;opacity:.85}
.livro3d .capa b{font-family:var(--display);font-weight:900;font-size:1.22rem;line-height:1.05}
.livro3d .capa-sub{font-size:.76rem;line-height:1.25;opacity:.92}
.livro3d[aria-expanded="true"]{--rot:-8deg}
.livro3d[aria-expanded="true"] .capa{transform:rotateY(-62deg)}
.sumario{display:none;max-width:24ch;padding:12px 14px;border-radius:18px;background:var(--glace);box-shadow:inset 0 0 0 2px var(--cacau);font-size:.92rem}
.abre-dica{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:999px;background:var(--glace);color:var(--rosa-escuro);
  font-weight:800;font-size:.86rem;box-shadow:inset 0 0 0 2px var(--rosa-escuro);pointer-events:none}
.abre-dica::after{content:"";width:8px;height:8px;border-right:2.5px solid currentColor;border-bottom:2.5px solid currentColor;rotate:-45deg}
@media (prefers-reduced-motion:no-preference){.abre-dica{animation:dica 1.8s var(--casa) infinite}}
@keyframes dica{0%,60%,100%{translate:0 0}30%{translate:0 -3px}}
.livro3d[aria-expanded="true"] + .abre-dica{display:none}
.livro3d[aria-expanded="true"] + .abre-dica + .sumario{display:block;animation:painel-entra .4s var(--casa) both}
.estante li:last-child:nth-child(odd){grid-column:1/-1}
@media (min-width:900px){.estante{grid-template-columns:repeat(5,minmax(0,1fr))}.estante li:last-child:nth-child(odd){grid-column:auto}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.22s !important;animation:none !important}
  .js-movimento [data-revela],.js-movimento [data-cascata] > *{translate:0 0 !important;scale:1 !important}
  .cartao{transition:none}
}