/* Página de vendas do Helmut. Gabriel, 5/nov/2026: "eu preciso que seja simples porque o publico é idoso" e "esse fundo branco
   dói a vista". Nada de branco puro: fundo creme e caixas em creme claro. Letra de 21 px, nada abaixo de 18 px, botões de 68 px. */
@font-face{font-family:Fraunces;src:url(assets/Fraunces.ttf);font-weight:100 900;font-display:swap}
@font-face{font-family:Inter;src:url(assets/Inter.ttf);font-weight:100 900;font-display:swap}
:root{--papel:#efe6d6;--areia:#e6dbc7;--caixa:#f6f0e4;--tinta:#1f1a15;--suave:#463e34;--linha:#d3c7b1;--brasa:#982c13;--brasa2:#7f2410;--verde:#2c5533;--carvao:#181718;--ouro:#e0ae4e;--osso:#f6f1e7}
*{box-sizing:border-box}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papel);color:var(--tinta);font:400 21px/1.6 Inter,system-ui,sans-serif}
img{display:block;max-width:100%;height:auto}a{color:var(--brasa)}
.w{max-width:1040px;margin:0 auto;padding:0 28px}.n{max-width:760px}
h1,h2,h3{font-family:Fraunces,Georgia,serif;font-weight:600;font-variation-settings:"SOFT" 0,"WONK" 0,"opsz" 48;letter-spacing:-.01em;line-height:1.14;margin:0}
h2{font-size:clamp(34px,3.6vw,46px)}p{margin:0}
section{padding:80px 0}.linha{border-top:1px solid var(--linha)}
.leve{color:var(--suave)}
a:focus-visible,summary:focus-visible,button:focus-visible{outline:3px solid currentColor;outline-offset:3px}

/* Botão */
.btn{display:flex;align-items:center;justify-content:center;min-height:68px;padding:14px 32px;background:var(--brasa);color:#fff;font:700 23px/1.25 Inter,sans-serif;text-align:center;text-decoration:none;border-radius:8px}
.btn:hover{background:var(--brasa2)}

/* Topo */
.hero{background:var(--carvao);color:var(--osso);padding:0 0 80px}
.topo{display:flex;justify-content:space-between;align-items:center;padding-top:22px;padding-bottom:30px;gap:16px}
.marca{font:600 22px Fraunces,serif;color:var(--osso);text-decoration:none;font-variation-settings:"SOFT" 0,"WONK" 0,"opsz" 48}
.hero .g{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:64px;align-items:center}
.selo{font-weight:700;font-size:19px;color:var(--ouro);margin-bottom:16px}
h1{font-size:clamp(36px,4.2vw,54px)}h1 em{font-style:normal;color:var(--ouro)}
.lead{font-size:23px;line-height:1.5;margin-top:20px}.hero .lead{color:#e9e2d5}
.hero .btn{margin-top:30px;background:#b93717;max-width:440px}.hero .btn:hover{background:#a02e12}
.confia{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:8px;font-size:20px;color:#e9e2d5}
.confia li{display:flex;gap:11px;align-items:baseline}.confia li::before{content:"✓";color:#8fcf95;font-weight:700}
.capa{box-shadow:0 26px 50px -20px rgba(0,0,0,.6);border-radius:3px}

/* Listas */
.lista{list-style:none;margin:32px 0 0;padding:0;display:grid;gap:20px}
.lista li{display:grid;grid-template-columns:28px 1fr;gap:12px}.lista li::before{content:"✓";color:var(--verde);font-weight:700;font-size:24px;line-height:1.4}

/* A conta */
.conta{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:36px}
.caixa{border:1px solid var(--linha);border-radius:10px;padding:28px;background:var(--caixa)}
.caixa h3{font-size:clamp(32px,3.2vw,40px);margin:8px 0 4px}.caixa small{font:400 19px Inter}
.et{font-size:19px;font-weight:700;color:var(--suave)}
.caixa dl{margin:18px 0 0}.caixa dl div{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--linha)}.caixa dd{margin:0;font-weight:700;white-space:nowrap}
.nova{border:2px solid var(--verde)}
.barra-conta{height:16px;border-radius:8px;background:var(--areia);margin-top:18px;overflow:hidden}
.barra-conta i{display:block;height:100%;border-radius:8px;background:var(--brasa);transform-origin:0 50%}
.nova .barra-conta i{background:var(--verde);width:69.36%}
.saldo{margin-top:28px;font-size:25px;line-height:1.4}.saldo b{color:var(--verde)}
.cta{max-width:520px;margin-top:28px}

/* Páginas do livro */
.paginas{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:36px}
.paginas figure{margin:0}.paginas a{display:block;text-decoration:none;color:var(--tinta)}.paginas img{border:1px solid var(--linha);border-radius:4px}
.paginas figcaption{margin-top:12px;font-size:20px;line-height:1.35}.paginas span{display:block;color:var(--suave);font-size:18px}

/* Helmut */
.par{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:60px;align-items:center}
.par img{border-radius:6px}.par p+p{margin-top:18px}.par h2{margin-bottom:22px}

/* Comentários */
.vozes{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:32px}
.vozes blockquote{margin:0;padding:26px;background:var(--caixa);border:1px solid var(--linha);border-radius:10px;font-size:20px;line-height:1.5}

/* Oferta */
.oferta{background:var(--areia)}.oferta .g{display:grid;grid-template-columns:minmax(0,.65fr) minmax(0,1.35fr);gap:60px;align-items:start;margin-top:40px}
.preco{display:flex;justify-content:space-between;align-items:baseline;gap:16px;border-top:1px solid #c5b89f;padding-top:22px;margin-top:30px}
.preco span{font-size:19px;color:var(--suave)}.preco b{font:600 48px/1 Fraunces,serif;font-variation-settings:"SOFT" 0,"WONK" 0,"opsz" 48}
.oferta .btn{margin-top:20px}
.digital{margin-top:16px;font-size:19px;line-height:1.45}
.garantia{margin-top:26px;padding-top:22px;border-top:1px solid #c5b89f;font-size:19px;line-height:1.5}.garantia b{display:block;font-size:22px;margin-bottom:4px}
.pag{margin-top:16px;font-size:19px;color:var(--suave)}
.oferta .lista small{display:block;font-size:19px;color:var(--suave)}

/* Perguntas */
details{border-top:1px solid var(--linha)}details:last-child{border-bottom:1px solid var(--linha)}
summary{cursor:pointer;font-weight:700;font-size:22px;padding:22px 36px 22px 0;list-style:none;position:relative}summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:4px;top:17px;font-size:32px;font-weight:400;color:var(--brasa)}details[open] summary::after{content:"–"}
details p{padding:0 0 24px}
.fim{text-align:center}.fim .btn{max-width:520px;margin:28px auto 0}
footer{border-top:1px solid var(--linha);padding:36px 0;font-size:18px;color:var(--suave)}

/* Barra fixa de compra */
.compra{position:fixed;left:0;right:0;bottom:0;z-index:25;background:var(--caixa);border-top:1px solid var(--linha);transform:translateY(110%);transition:transform .35s ease;visibility:hidden}
.compra.on{transform:none;visibility:visible}
.compra .w{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-top:10px;padding-bottom:10px}
.compra span{font-weight:700}.compra .btn{min-height:56px;padding:8px 26px;font-size:20px;white-space:nowrap}

/* Página ampliada */
dialog{border:0;padding:0;max-width:min(96vw,980px);width:100%;max-height:94vh;border-radius:8px;background:var(--caixa)}dialog::backdrop{background:rgba(10,9,8,.8)}
.barra{position:sticky;top:0;display:flex;justify-content:space-between;align-items:center;gap:12px;background:var(--caixa);padding:12px 18px;border-bottom:1px solid var(--linha);font-weight:700}
.barra button{min-height:52px;padding:0 20px;font:700 19px Inter;background:var(--tinta);color:#fff;border:0;border-radius:6px;cursor:pointer}

/* Movimento: só o surgimento suave de cada bloco, uma vez, e as barras da conta */
.anim [data-r]{opacity:0;transform:translateY(12px);transition:opacity .5s ease,transform .5s ease;transition-delay:calc(var(--i,0)*60ms)}
.anim [data-r].on{opacity:1;transform:none}
.anim .barra-conta i{transform:scaleX(0);transition:transform 1s ease .2s}
.anim .barra-conta.on i{transform:none}

@media (max-width:860px){
 body{font-size:20px}.w{padding-left:20px;padding-right:20px}section{padding:56px 0}
 .hero{padding-bottom:52px}.topo{padding-bottom:18px}.hero .g,.par,.oferta .g{grid-template-columns:minmax(0,1fr);gap:28px}
 .hero .g>div:first-child{order:2}.hero .capa{order:1;width:150px;margin:0 auto}
 .selo{font-size:18px;margin-bottom:12px}.lead{font-size:21px}.btn{width:100%}.hero .btn,.cta,.fim .btn{max-width:none}
 .oferta .capa{max-width:240px;margin:0 auto}
 .conta,.vozes,.paginas{grid-template-columns:minmax(0,1fr)}.caixa{padding:22px}.preco b{font-size:42px}
 .compra span{display:none}.compra .btn{width:100%;font-size:18px;padding:8px 12px;white-space:normal}
 footer{padding-bottom:104px}
}