/* ============================================================
   VIRE O POTE — página de vendas
   Direção: claro orgânico (areia · barro · sálvia · mel)
   Contrato de tokens: nada fora de :root entra no CSS abaixo.
   ============================================================ */
:root{
  --areia:        #F2E9DC;
  --areia-2:      #EADFCE;
  --creme:        #FBF6EE;
  --branco:       #FFFFFF;

  --barro:        #A85B41;
  --barro-forte:  #8E4830;
  --barro-claro:  #C98063;
  --barro-veu:    #F0DCD1;

  --salvia:       #5E6B54;
  --salvia-forte: #4A5642;
  --salvia-veu:   #E3E7DB;

  --mel:          #D9A05B;
  --mel-veu:      #F6E4C8;

  --tinta:        #2B211B;
  --tinta-media:  #55483F;
  --tinta-suave:  #665950;

  --r-xs: 12px;  --r-sm: 16px;  --r-md: 22px;  --r-lg: 28px;  --r-pill: 999px;

  --sh-1: 0 2px 10px rgba(142,72,48,.05), 0 10px 30px rgba(142,72,48,.06);
  --sh-2: 0 4px 18px rgba(142,72,48,.07), 0 22px 55px rgba(142,72,48,.10);
  --sh-3: 0 6px 22px rgba(142,72,48,.10), 0 34px 80px rgba(142,72,48,.14);
  --sh-cta: 0 8px 20px rgba(142,72,48,.20), 0 18px 44px rgba(142,72,48,.22);

  --fonte-titulo: "Bricolage Grotesque", "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  --fonte-corpo: "Nunito Sans", "Segoe UI", Avenir, "Trebuchet MS", system-ui, sans-serif;

  --curva: cubic-bezier(.22,.72,.24,1);
  --header-h: 70px;

  --secao-y: 72px;
}
@media (min-width:920px){ :root{ --secao-y: 120px } }

/* ========================= base ========================= */
*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 12px) }
body{
  margin:0;
  background:var(--areia);
  color:var(--tinta-media);
  font-family:var(--fonte-corpo);
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{ max-width:100%; display:block; height:auto }
a{ color:inherit }
button{ font:inherit; color:inherit; border:0; background:none; cursor:pointer }
h1,h2,h3,p,ul,ol,figure{ margin:0 }
ul,ol{ padding:0; list-style:none }
::selection{ background:var(--mel-veu); color:var(--tinta) }
:focus-visible{ outline:3px solid var(--salvia); outline-offset:3px; border-radius:var(--r-xs) }

.env{ width:100%; max-width:1240px; margin-inline:auto; padding-inline:22px }
@media (min-width:768px){ .env{ padding-inline:40px } }
@media (min-width:1200px){ .env{ padding-inline:56px } }
.env--estreito{ max-width:880px }

.pular{
  position:absolute; left:14px; top:-120px; z-index:100;
  background:var(--branco); color:var(--tinta);
  padding:12px 20px; border-radius:var(--r-pill);
  box-shadow:var(--sh-2); font-weight:600; text-decoration:none;
}
.pular:focus{ top:14px }

/* tipografia de seção */
.secao{ padding:var(--secao-y) 0 }
.rotulo-secao{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--fonte-titulo);
  font-size:.8rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--salvia);
  margin-bottom:18px;
}
.rotulo-secao::before{
  content:""; width:8px; height:8px; border-radius:var(--r-pill);
  background:var(--salvia); box-shadow:0 0 0 4px var(--salvia-veu);
}
.h2{
  font-family:var(--fonte-titulo);
  font-weight:800;
  font-size:clamp(1.75rem, 4.4vw, 2.75rem);
  line-height:1.12;
  letter-spacing:-.022em;
  color:var(--tinta);
  max-width:20em;
}
.h2 em{ font-style:normal; color:var(--barro-forte) }
.h3{
  font-family:var(--fonte-titulo);
  font-weight:700;
  font-size:1.2rem; line-height:1.3;
  color:var(--tinta);
}
.lead{ font-size:1.08rem; line-height:1.7; max-width:38em }
@media (min-width:1060px){ .lead{ font-size:1.14rem } }
.paragrafo + .paragrafo{ margin-top:18px }
.paragrafo b{ color:var(--tinta); font-weight:700 }
.grifo{
  color:var(--tinta); font-weight:700;
  background:linear-gradient(180deg, transparent 62%, var(--mel-veu) 62%);
  border-radius:4px; padding:0 2px 1px;
}

/* ========================= botões ========================= */
.cta{
  display:inline-flex; align-items:center; justify-content:center;
  gap:12px; text-align:center; width:100%;
  text-decoration:none;
  font-family:var(--fonte-titulo); font-weight:700;
  font-size:1.02rem; line-height:1.3;
  color:#FFF9F2;
  background:linear-gradient(168deg, var(--barro) 0%, var(--barro-forte) 100%);
  padding:20px 26px; border-radius:var(--r-pill);
  box-shadow:var(--sh-cta);
  transition:transform .35s var(--curva), box-shadow .35s var(--curva);
}
@media (min-width:430px){ .cta{ font-size:1.08rem; padding:21px 32px } }
@media (min-width:560px){ .cta{ width:auto } }
@media (min-width:1060px){ .cta{ font-size:1.14rem; padding:23px 40px } }
.cta:hover{ transform:scale(1.025); box-shadow:0 10px 26px rgba(142,72,48,.24), 0 26px 58px rgba(142,72,48,.26) }
.cta:active{ transform:scale(.995) }
.cta__seta{ width:20px; height:20px; flex:none; transition:transform .35s var(--curva) }
.cta:hover .cta__seta{ transform:translateX(4px) }
.cta--largo{ width:100% }

.microcopy{ margin-top:14px; font-size:.95rem; line-height:1.65; color:var(--tinta-suave); max-width:32em }
.microcopy .junto{ white-space:nowrap }

.bloco-cta{ margin-top:38px }
@media (min-width:920px){ .bloco-cta{ margin-top:52px } }
.bloco-cta--centro{ text-align:center; display:flex; flex-direction:column; align-items:center }

/* selos de confiança */
.selos{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px }
.selo{
  display:inline-flex; align-items:center; gap:9px;
  background:var(--branco);
  padding:10px 16px 10px 12px; border-radius:var(--r-pill);
  box-shadow:inset 0 0 0 1.5px var(--salvia-veu), var(--sh-1);
  font-size:.92rem; font-weight:600; line-height:1.3; color:var(--tinta-media);
}
.selo svg{ width:18px; height:18px; flex:none; color:var(--salvia) }
@media (max-width:430px){ .selo{ font-size:1rem } }

/* ========================= header ========================= */
.cabecalho{ position:sticky; top:0; z-index:60; background:var(--areia); transition:box-shadow .35s var(--curva), background .35s var(--curva) }
.cabecalho.rolou{ background:var(--creme); box-shadow:0 1px 0 rgba(142,72,48,.07), 0 14px 34px rgba(142,72,48,.08) }
.cabecalho__linha{ min-height:var(--header-h); display:flex; align-items:center; justify-content:space-between; gap:18px }

.marca{
  display:inline-flex; align-items:center; gap:11px;
  text-decoration:none; color:var(--tinta);
  font-family:var(--fonte-titulo); font-weight:700; font-size:.95rem; letter-spacing:.15em;
  padding:8px 4px; border-radius:var(--r-sm);
  transition:transform .35s var(--curva);
}
@media (min-width:430px){ .marca{ font-size:1rem } }
.marca:hover{ transform:scale(1.02) }
.marca__selo{ width:30px; height:30px; flex:none; border-radius:var(--r-pill); background:var(--barro-veu); display:grid; place-items:center; transition:transform .55s var(--curva), background .35s var(--curva) }
.marca:hover .marca__selo{ transform:rotate(-28deg); background:var(--mel-veu) }
.marca__selo svg{ width:17px; height:17px }

.nav-desk{ display:none }
@media (min-width:920px){ .nav-desk{ display:flex; align-items:center; gap:4px } }
.nav-desk a{ text-decoration:none; color:var(--tinta-media); font-size:1rem; font-weight:500; padding:10px 16px; border-radius:var(--r-pill); transition:color .3s var(--curva), background .3s var(--curva) }
.nav-desk a:hover{ color:var(--tinta); background:var(--branco) }

.acoes-topo{ display:flex; align-items:center; gap:10px }
.preco-topo{
  display:none; text-decoration:none;
  font-family:var(--fonte-titulo); font-weight:700; font-size:.98rem;
  color:var(--barro-forte); padding:11px 22px; border-radius:var(--r-pill);
  background:var(--branco);
  box-shadow:inset 0 0 0 1.5px var(--barro-veu), var(--sh-1);
  transition:transform .35s var(--curva), box-shadow .35s var(--curva), background .35s var(--curva), color .35s var(--curva);
}
.preco-topo:hover{ transform:scale(1.03); background:var(--barro-forte); color:#FFF9F2; box-shadow:inset 0 0 0 1.5px var(--barro-forte), var(--sh-2) }
@media (min-width:560px){ .preco-topo{ display:inline-block } }

.hamburguer{ width:46px; height:46px; flex:none; display:grid; place-items:center; border-radius:var(--r-pill); background:var(--branco); box-shadow:var(--sh-1); transition:transform .35s var(--curva) }
.hamburguer:hover{ transform:scale(1.04) }
@media (min-width:920px){ .hamburguer{ display:none } }
.hamburguer span{ display:block; width:19px; height:2.5px; border-radius:var(--r-pill); background:var(--tinta); transition:transform .4s var(--curva), opacity .25s var(--curva) }
.hamburguer span + span{ margin-top:5px }
.hamburguer[aria-expanded="true"] span:nth-child(1){ transform:translateY(7.5px) rotate(45deg) }
.hamburguer[aria-expanded="true"] span:nth-child(2){ opacity:0 }
.hamburguer[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg) }

.menu-mob{ position:absolute; left:0; right:0; top:100%; padding:0 22px 22px; opacity:0; visibility:hidden; transform:translate3d(0,-10px,0); transition:opacity .35s var(--curva), transform .4s var(--curva), visibility .4s }
.menu-mob.aberto{ opacity:1; visibility:visible; transform:translate3d(0,0,0) }
@media (min-width:920px){ .menu-mob{ display:none } }
.menu-mob__caixa{ background:var(--creme); border-radius:var(--r-lg); box-shadow:var(--sh-3); padding:12px }
.menu-mob a{ display:block; text-decoration:none; color:var(--tinta); font-size:1.06rem; font-weight:500; padding:15px 18px; border-radius:var(--r-md); transition:background .3s var(--curva) }
.menu-mob a:hover{ background:var(--areia) }
.menu-mob a.destaque{ margin-top:6px; background:var(--barro-forte); color:#FFF9F2; font-family:var(--fonte-titulo); font-weight:700; text-align:center }
.menu-mob a.destaque:hover{ background:var(--barro) }

/* ========================= hero ========================= */
.hero{ position:relative; padding:34px 0 64px; overflow:hidden }
@media (min-width:920px){ .hero{ padding:56px 0 96px } }
.hero::before{
  content:""; position:absolute; inset:-30% -20% auto -20%; height:900px;
  background:
    radial-gradient(58% 46% at 22% 4%, rgba(255,252,246,.95) 0%, rgba(255,252,246,0) 68%),
    radial-gradient(46% 40% at 92% 14%, rgba(246,228,200,.55) 0%, rgba(246,228,200,0) 70%);
  pointer-events:none;
}
.hero > .env{ position:relative }
.hero__grade{ display:grid; gap:34px; align-items:center }
@media (min-width:1000px){ .hero__grade{ grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:48px } }
@media (min-width:1200px){ .hero__grade{ gap:72px } }
.hero__texto{ max-width:36em }

.sobrelinha{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--branco); padding:9px 18px 9px 14px; border-radius:var(--r-pill);
  box-shadow:inset 0 0 0 1.5px var(--salvia-veu), var(--sh-1);
  font-size:.88rem; line-height:1.45; font-weight:600; color:var(--tinta-media);
}
.sobrelinha::before{ content:""; width:8px; height:8px; flex:none; border-radius:var(--r-pill); background:var(--salvia); box-shadow:0 0 0 4px var(--salvia-veu) }

.hero h1{
  font-family:var(--fonte-titulo); font-weight:800;
  font-size:clamp(2.3rem, 7vw, 4.3rem);
  line-height:1.04; letter-spacing:-.028em; color:var(--tinta);
  margin:24px 0 0;
}
.hero h1 .l{ display:block }
.hero h1 .l--2{ color:var(--barro-forte) }
.hero__sub{ margin-top:22px; font-size:1.08rem; line-height:1.7; max-width:34em }
@media (min-width:1060px){ .hero__sub{ font-size:1.16rem } }
.hero__sub b{ color:var(--tinta) }
.hero__acoes{ margin-top:30px }

/* mockup do produto: capa real + página interna real */
.mockup{ position:relative; width:100%; max-width:560px; margin-inline:auto; aspect-ratio:1.12 }
.mockup::before{
  content:""; position:absolute; left:6%; right:6%; bottom:2%; height:28%;
  border-radius:50%;
  background:radial-gradient(closest-side, rgba(142,72,48,.16), rgba(142,72,48,0));
  filter:blur(6px);
}
.mockup__pag{
  position:absolute; width:58%; height:auto;
  border-radius:6px;
  box-shadow:var(--sh-3), 0 0 0 1px rgba(43,33,27,.06);
  background:var(--creme);
  transition:transform .7s var(--curva);
}
.mockup__pag--tras{ right:0; top:0; transform:rotate(5deg) }
.mockup__pag--frente{ left:0; bottom:4%; transform:rotate(-4deg) }
.mockup:hover .mockup__pag--frente{ transform:rotate(-5.5deg) translateY(-6px) }
.mockup:hover .mockup__pag--tras{ transform:rotate(6deg) translateY(-3px) }
.mockup__legenda{
  position:absolute; left:50%; bottom:-6px; transform:translateX(-50%);
  white-space:nowrap;
  font-size:.82rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--tinta-suave);
  background:var(--branco); padding:7px 14px; border-radius:var(--r-pill);
  box-shadow:var(--sh-1);
}

/* ========================= o livro que abre ========================= */
.livro{ width:100%; max-width:600px; margin-inline:auto; -webkit-user-select:none; user-select:none }
/* só o livro: nada de moldura. O palco existe apenas para dar perspectiva. */
.livro__palco{ position:relative; perspective:2000px; perspective-origin:50% 42%; padding:30px 0 24px }
.livro__miolo{
  position:relative; width:100%; aspect-ratio:1.4142;
  transform-style:preserve-3d;
  transform-origin:75% 50%;                   /* o centro da capa */
  transition:transform 1s cubic-bezier(.45,.05,.2,1);
  transform:translateX(-25%) rotateY(24deg);  /* fechado: um volume de pé, visto de leve pela lombada */
  cursor:pointer; outline:none;
}
.livro__miolo[data-estado="aberto"],
.livro__miolo[data-estado="fim"]{ transform:translateX(0) rotateY(0) }   /* aberto, deita: a lombada fica no centro */

/* o corpo do livro fechado: contracapa atrás, lombada na esquerda, bloco de páginas embaixo */
.livro__bloco{
  position:absolute; left:50%; top:0; width:50%; height:100%;
  transform-style:preserve-3d; pointer-events:none;
  transition:opacity .35s var(--curva);
}
.livro__miolo:not([data-estado="fechado"]) .livro__bloco{ opacity:0 }
.bloco__tras{
  position:absolute; inset:-2px 0 -2px -2px;
  background:#2A211C; border-radius:0 6px 6px 0;   /* contracapa escura, como a capa */
  transform:translateZ(-26px);
  box-shadow:0 0 0 1px rgba(43,33,27,.3);
}
.bloco__lombada{
  position:absolute; left:0; top:0; width:26px; height:100%;
  transform-origin:left center; transform:rotateY(90deg);
  background:linear-gradient(90deg, #7A3D28 0%, #8E4830 45%, #A85B41 100%);
  display:grid; place-items:center;
  box-shadow:inset -3px 0 6px rgba(43,33,27,.25);
}
.bloco__lombada span{
  writing-mode:vertical-rl; transform:rotate(180deg);
  font-family:var(--fonte-titulo); font-weight:700; letter-spacing:.22em; font-size:clamp(.5rem, 1.6vw, .7rem);
  color:rgba(255,249,242,.9); white-space:nowrap;
}
.bloco__pe{
  position:absolute; left:0; right:0; bottom:0; height:26px;
  transform-origin:center bottom; transform:rotateX(90deg);
  background:repeating-linear-gradient(180deg, #F6F1EA 0 2px, #D9CDBB 2px 3px);
  box-shadow:inset 0 0 0 1px rgba(43,33,27,.08);
}
.bloco__lado{
  position:absolute; top:0; right:0; width:26px; height:100%;
  transform-origin:right center; transform:rotateY(-90deg);
  background:repeating-linear-gradient(90deg, #F6F1EA 0 2px, #D9CDBB 2px 3px);
}
/* a capa fechada recebe um brilho de curvatura para não parecer uma folha */
.face--capa::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(100deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.28) 48%, rgba(255,255,255,0) 62%);
}
.livro__miolo:focus-visible{ outline:3px solid var(--salvia); outline-offset:8px; border-radius:8px }
/* a contracapa e a pilha de folhas por baixo */
.livro__miolo::before{
  content:""; position:absolute; left:50%; top:0; width:50%; height:100%;
  background:var(--creme); border-radius:0 6px 6px 0;
  box-shadow:var(--sh-3), 0 0 0 1px rgba(43,33,27,.06);
  opacity:0; transition:opacity .4s var(--curva);
}
.livro__miolo[data-estado="fim"]::before{ opacity:1 }
.livro__sombra{
  position:absolute; left:8%; right:8%; bottom:-5%; height:22%; border-radius:50%;
  background:radial-gradient(closest-side, rgba(142,72,48,.24), rgba(142,72,48,0));
  filter:blur(8px); pointer-events:none;
  transition:left .9s var(--curva), right .9s var(--curva);
}
.livro__miolo[data-estado="fechado"] .livro__sombra{ left:46%; right:-4% }   /* fechado, a sombra fica só sob o volume */
.folha{
  position:absolute; top:0; left:50%; width:50%; height:100%;
  transform-origin:left center; transform-style:preserve-3d;
  transition:transform .95s cubic-bezier(.45,.05,.2,1);
}
.folha.folha--virada{ transform:rotateY(-180deg) }
.face{
  position:absolute; inset:0; overflow:hidden;
  background:#F6F1EA;
  -webkit-backface-visibility:hidden; backface-visibility:hidden;
  box-shadow:0 0 0 1px rgba(43,33,27,.13), 0 10px 26px rgba(43,33,27,.10);
}
.face--frente{ border-radius:0 6px 6px 0 }
.face--verso{ transform:rotateY(180deg); border-radius:6px 0 0 6px; box-shadow:0 0 0 1px rgba(43,33,27,.13), -8px 10px 26px rgba(43,33,27,.10) }
/* a contracapa, quando a prévia termina */
.livro__miolo::before{ content:"VIRE O POTE"; display:grid; place-items:center; font-family:var(--fonte-titulo); font-weight:700; letter-spacing:.2em; font-size:clamp(.6rem, 1.8vw, .85rem); color:rgba(246,241,234,.35); background:linear-gradient(170deg,#2a211c 0%,#1a1614 100%) }
.face img{ width:100%; height:100%; object-fit:cover; display:block }
/* sombra da lombada: a página curva perto do miolo */
.face--frente::after{ content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg, rgba(43,33,27,.16), rgba(43,33,27,0) 14%) }
.face--verso::after{ content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(270deg, rgba(43,33,27,.16), rgba(43,33,27,0) 14%) }
.face--capa::after{ background:linear-gradient(90deg, rgba(43,33,27,.22), rgba(43,33,27,0) 9%) }
.face--capa{ box-shadow:0 0 0 1px rgba(43,33,27,.1), var(--sh-3) }
/* páginas que não são imagem: a guarda e a última */
.face--texto{ display:grid; place-items:center; padding:12%; text-align:center }
.face--texto p{ font-size:clamp(.72rem, 2.2vw, 1rem); line-height:1.5; color:var(--tinta-suave); max-width:16em }
.face--texto b{ display:block; font-family:var(--fonte-titulo); font-weight:800; font-size:clamp(1.1rem, 3.4vw, 1.6rem); color:var(--tinta); margin-bottom:.4em; line-height:1.15 }
.face--texto .mini-cta{ display:inline-block; margin-top:1em; font-family:var(--fonte-titulo); font-weight:700; font-size:clamp(.72rem, 2vw, .95rem); color:#FFF9F2; background:var(--barro-forte); padding:.6em 1.1em; border-radius:var(--r-pill); text-decoration:none }
.folha.virando{ z-index:99 !important }

.livro__controles{ display:flex; align-items:center; justify-content:center; gap:14px; margin-top:8px }
.livro__btn{
  width:46px; height:46px; flex:none; border-radius:var(--r-pill);
  background:var(--branco); color:var(--barro-forte); box-shadow:var(--sh-1);
  display:grid; place-items:center;
  transition:transform .3s var(--curva), background .3s var(--curva), color .3s var(--curva), opacity .3s;
}
.livro__btn svg{ width:20px; height:20px }
.livro__btn:hover{ transform:scale(1.06); background:var(--barro-forte); color:#FFF9F2 }
.livro__btn[disabled]{ opacity:.35; pointer-events:none }
.livro__status{ font-size:.95rem; font-weight:600; color:var(--tinta-suave); text-align:center; min-width:12em; line-height:1.4 }
.livro__lupa{
  display:inline-flex; align-items:center; gap:7px; margin:10px auto 0;
  font-size:.92rem; font-weight:600; color:var(--tinta-suave);
  padding:8px 14px; border-radius:var(--r-pill);
  transition:color .3s var(--curva), background .3s var(--curva);
}
.livro__lupa:hover{ color:var(--barro-forte); background:var(--branco) }
.livro__lupa svg{ width:16px; height:16px }
.livro__rodape{ display:flex; justify-content:center }

/* a página ampliada */
.lupa{ border:0; padding:0; background:transparent; max-width:min(92vw, 640px); max-height:92vh; border-radius:var(--r-sm); overflow:hidden }
.lupa::backdrop{ background:rgba(43,33,27,.72) }
.lupa img{ width:100%; height:auto; display:block; border-radius:var(--r-sm) }
.lupa__fechar{
  position:absolute; top:10px; right:10px; width:44px; height:44px; border-radius:var(--r-pill);
  background:var(--branco); color:var(--tinta); box-shadow:var(--sh-2); display:grid; place-items:center;
}
.lupa__fechar svg{ width:18px; height:18px }

.livro__lupa{ min-height:46px }
/* telas pequenas: o mesmo volume com lombada do desktop, mas nada passa da borda.
   A abertura acontece em duas etapas (no JS): o livro deita e se centraliza, e só
   então a capa gira. O palco recorta qualquer coisa que tente passar. */
@media (max-width:600px){
  .livro__palco{ overflow:hidden; padding:18px 6px 18px }
  /* a linha de controles não pode exigir mais largura do que a tela tem */
  .livro{ min-width:0; max-width:100% }
  .livro__controles{ gap:10px }
  .livro__status{ min-width:0; flex:1 1 auto; font-size:.95rem }
}
@media (max-width:430px){
  .livro__status,.livro__lupa{ font-size:1rem }
  .so-desk{ display:none }
  .bloco__lombada,.bloco__pe,.bloco__lado{ --esp:18px }
  .bloco__lombada{ width:18px } .bloco__pe{ height:18px } .bloco__lado{ width:18px } .bloco__tras{ transform:translateZ(-18px) }
  /* na página de 165px, o cartão mostra só o essencial, em corpo legível */
  .face--texto .so-desk{ display:none }
  .face--texto p{ font-size:1rem; line-height:1.3 }
  .face--texto b{ font-size:1.05rem; margin-bottom:.5em }
  .face--texto .mini-cta{ font-size:.95rem; padding:.55em .9em; margin-top:.6em; line-height:1.25 }
}
@media (prefers-reduced-motion: reduce){
  .livro__miolo,.folha{ transition:none }
}

/* ========================= credibilidade ========================= */
.cred{ background:var(--creme); border-block:1.5px solid var(--areia-2); padding:26px 0 }
.cred__linha{ display:flex; flex-direction:column; gap:16px }
@media (min-width:920px){ .cred__linha{ flex-direction:row; align-items:center; gap:36px } }
.cred__rotulo{ font-family:var(--fonte-titulo); font-size:.8rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--salvia); flex:none }
.cred__fontes{ display:flex; flex-wrap:wrap; gap:8px 10px }
.cred__fontes li{
  font-size:.92rem; font-weight:600; color:var(--tinta-media);
  background:var(--areia); padding:8px 14px; border-radius:var(--r-pill);
  box-shadow:inset 0 0 0 1.5px var(--areia-2);
}
@media (max-width:430px){ .cred__fontes li{ font-size:1rem } }
.cred__nota{ margin-top:14px; font-size:.95rem; color:var(--tinta-suave); max-width:60em }

/* ========================= o caso ========================= */
.caso__grade{ display:grid; gap:34px; margin-top:34px }
@media (min-width:920px){ .caso__grade{ grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:56px; align-items:start } }
.caso__texto{ font-size:1.05rem; line-height:1.75; max-width:36em }
@media (min-width:1060px){ .caso__texto{ font-size:1.1rem } }
.xis{ color:var(--barro-forte); font-weight:700 }

.numero{
  background:var(--branco); border-radius:var(--r-lg); box-shadow:var(--sh-2);
  padding:30px 28px;
  position:relative;
}
.numero::before{ content:""; position:absolute; left:14px; top:28px; bottom:28px; width:4px; border-radius:var(--r-pill); background:linear-gradient(180deg, var(--barro) 0%, var(--mel) 100%) }
.numero__valor{ font-family:var(--fonte-titulo); font-weight:800; font-size:clamp(3rem, 8vw, 4.6rem); line-height:1; letter-spacing:-.03em; color:var(--barro-forte) }
.numero__texto{ margin-top:10px; font-size:1.02rem; color:var(--tinta-media) }
.numero__texto b{ color:var(--tinta) }
.numero__fonte{ margin-top:14px; font-size:.85rem; color:var(--tinta-suave); line-height:1.5 }
@media (max-width:430px){ .numero__fonte{ font-size:1rem } }

.virada{ margin-top:38px; max-width:30em }
.virada::before{ content:""; display:block; width:58px; height:3px; border-radius:var(--r-pill); background:var(--salvia); margin-bottom:16px; transform-origin:left center }
.virada p{ font-family:var(--fonte-titulo); font-weight:600; font-size:1.12rem; line-height:1.5; color:var(--barro-forte) }
@media (min-width:920px){ .virada p{ font-size:1.25rem } }

/* ========================= a virada / rótulo ========================= */
.mecanismo__grade{ display:grid; gap:36px; margin-top:34px; align-items:center }
@media (min-width:1000px){ .mecanismo__grade{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:64px } }

.rotulo{ position:relative; background:var(--creme); border-radius:var(--r-lg); box-shadow:var(--sh-3); padding:26px 22px 24px; max-width:520px; margin-inline:auto; transition:transform .6s var(--curva) }
@media (min-width:600px){ .rotulo{ padding:32px 32px 28px } }
.rotulo::before{ content:""; position:absolute; inset:-9px; border-radius:36px; box-shadow:inset 0 0 0 1.5px var(--barro-veu); pointer-events:none }
.rotulo__cabeca{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; padding-bottom:14px; border-bottom:1.5px solid var(--areia-2) }
.rotulo__titulo{ font-family:var(--fonte-titulo); font-size:.78rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--tinta) }
.rotulo__nota{ font-size:.8rem; line-height:1.4; font-weight:600; color:var(--salvia); letter-spacing:.02em }
.inci li{ display:flex; align-items:center; gap:14px; padding:11px 4px; font-size:.98rem; line-height:1.45; color:var(--tinta); border-bottom:1px solid rgba(234,223,206,.85) }
@media (min-width:600px){ .inci li{ font-size:1.02rem; padding:12px 6px } }
.inci li:last-child{ border-bottom:0 }
.inci .barra{ flex:none; height:9px; border-radius:var(--r-pill); background:var(--barro-claro); margin-left:auto; transform-origin:right center; transition:transform .65s var(--curva) }
.inci--abaixo li{ color:var(--tinta-suave) }
.inci--abaixo .barra{ background:var(--salvia); opacity:.5 }
.regua{ position:relative; margin:22px 0 14px; padding-top:38px }
.regua__fio{ position:relative; height:3px; border-radius:var(--r-pill); background:var(--salvia); transform-origin:left center }
.regua__fio::after{ content:""; position:absolute; left:0; right:0; top:7px; height:6px; border-radius:var(--r-pill); background:repeating-linear-gradient(90deg, var(--salvia) 0 1.5px, transparent 1.5px 11px); opacity:.38 }
.regua__marca{ position:absolute; top:0; left:0; display:inline-flex; align-items:center; background:var(--salvia); color:#FBFDF8; font-family:var(--fonte-titulo); font-size:.71rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; padding:6px 13px; border-radius:var(--r-pill); box-shadow:0 6px 16px rgba(94,107,84,.26) }
.rotulo figcaption{ margin-top:18px; font-size:.9rem; line-height:1.65; color:var(--tinta-suave) }
.rotulo figcaption b{ color:var(--tinta-media); font-weight:700 }
.rotulo:hover{ transform:translate3d(0,-5px,0) scale(1.008) }
@media (max-width:430px){ .inci li,.rotulo figcaption,.rotulo__nota{ font-size:1rem } .inci li{ gap:10px } }

/* ========================= para quem é ========================= */
.quem__grade{ display:grid; gap:24px; margin-top:34px }
@media (min-width:920px){ .quem__grade{ grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:32px; align-items:start } }
.cartao{ background:var(--branco); border-radius:var(--r-lg); box-shadow:var(--sh-2); padding:28px 24px }
@media (min-width:600px){ .cartao{ padding:34px 36px } }
.cartao--suave{ background:var(--creme); box-shadow:inset 0 0 0 1.5px var(--areia-2) }
.cartao .h3{ margin-bottom:16px }
.lista-check li{ display:flex; gap:14px; align-items:flex-start; padding:11px 0; border-bottom:1px solid var(--areia-2); font-size:1.02rem; line-height:1.6; color:var(--tinta-media) }
.lista-check li:last-child{ border-bottom:0 }
.lista-check .ico{ flex:none; width:26px; height:26px; margin-top:2px; border-radius:var(--r-pill); display:grid; place-items:center; background:var(--salvia-veu); color:var(--salvia-forte) }
.lista-check .ico svg{ width:14px; height:14px }
.lista-check--nao .ico{ background:var(--barro-veu); color:var(--barro-forte) }

/* ========================= transformação ========================= */
.cena{ max-width:38em; font-size:1.06rem; line-height:1.75 }
@media (min-width:1060px){ .cena{ font-size:1.12rem } }
.cena b{ color:var(--tinta) }
.cena em{ color:var(--barro-forte); font-style:italic }
.antes-depois{ display:grid; gap:14px; margin-top:34px }
@media (min-width:700px){ .antes-depois{ grid-template-columns:1fr 1fr; gap:18px } }
.coluna{ border-radius:var(--r-lg); padding:26px 24px }
.coluna--antes{ background:var(--creme); box-shadow:inset 0 0 0 1.5px var(--areia-2) }
.coluna--depois{ background:var(--branco); box-shadow:var(--sh-2) }
.coluna__titulo{ font-family:var(--fonte-titulo); font-size:.8rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; margin-bottom:12px }
.coluna--antes .coluna__titulo{ color:var(--tinta-suave) }
.coluna--depois .coluna__titulo{ color:var(--salvia) }
.coluna li{ padding:10px 0; border-bottom:1px solid var(--areia-2); font-size:1rem; line-height:1.55 }
.coluna li:last-child{ border-bottom:0 }
.coluna--depois li{ color:var(--tinta) }

/* ========================= o que você recebe ========================= */
.modulos{ display:grid; gap:18px; margin-top:38px }
.modulo{
  display:grid; gap:20px;
  background:var(--branco); border-radius:var(--r-lg); box-shadow:var(--sh-1);
  padding:26px 22px;
  transition:transform .4s var(--curva), box-shadow .4s var(--curva);
}
@media (min-width:600px){ .modulo{ padding:30px 32px } }
@media (min-width:860px){ .modulo{ grid-template-columns:minmax(0,1.1fr) minmax(240px,.9fr); align-items:center; gap:36px } }
.modulo:hover{ transform:translateY(-3px); box-shadow:var(--sh-2) }
.modulo__num{ display:inline-flex; align-items:center; gap:10px; font-family:var(--fonte-titulo); font-size:.8rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--barro-forte); margin-bottom:10px }
.modulo__num::before{ content:""; width:22px; height:3px; border-radius:var(--r-pill); background:var(--barro-claro) }
.modulo .h3{ font-size:1.28rem; margin-bottom:10px }
.modulo__texto{ font-size:1rem; line-height:1.7 }
.modulo__texto b{ color:var(--tinta) }
.modulo__fig{ background:var(--creme); border-radius:var(--r-md); padding:16px; box-shadow:inset 0 0 0 1.5px var(--areia-2) }
.modulo__fig img{ width:100%; height:auto }
.modulo__fig figcaption{ margin-top:10px; font-size:.82rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--tinta-suave); text-align:center }
.modulo--sem-fig{ grid-template-columns:1fr }
.modulo--anexo{ background:var(--creme); box-shadow:inset 0 0 0 1.5px var(--mel-veu), var(--sh-1) }

/* ========================= onde você lê: três telas ========================= */
.dispositivos{
  position:relative; width:100%; max-width:980px; margin:38px auto 0;
  aspect-ratio:1.7;
}
.disp{ position:absolute }
.disp__tela{
  position:relative; overflow:hidden; background:#1E1714;
  box-shadow:0 0 0 1.5px rgba(43,33,27,.35), var(--sh-3);
}
.disp__tela img{ width:100%; height:100%; object-fit:cover; object-position:top center; display:block; background:#EDE6DB }
/* computador: tela 16:10, moldura escura, base clara */
.disp--note{ left:14%; right:14%; top:2%; z-index:1 }
.disp--note .disp__tela{ aspect-ratio:16/10; border-radius:14px 14px 4px 4px; padding:2.2% 2.2% 0; box-sizing:border-box }
.disp--note .disp__tela img{ border-radius:6px 6px 0 0; object-fit:contain; background:#EDE6DB }
.disp--note .disp__tela::before{ content:""; position:absolute; top:6px; left:50%; width:7px; height:7px; border-radius:50%; background:#3a302a; transform:translateX(-50%) }
.disp--note .disp__base{
  position:relative;                       /* o ::after do pezinho se ancora aqui, não no notebook inteiro */
  height:12px; margin:0 -3.5%; border-radius:0 0 14px 14px;
  background:linear-gradient(180deg, #DDD3C6, #C9BCAB);
  box-shadow:0 10px 24px rgba(43,33,27,.18);
}
.disp--note .disp__base::after{ content:""; position:absolute; left:50%; top:0; width:14%; height:35%; transform:translateX(-50%); background:#B8AA98; border-radius:0 0 8px 8px }
/* tablet: à esquerda, à frente do computador */
.disp--tablet{ left:0; bottom:0; width:30%; z-index:2 }
.disp--tablet .disp__tela{ aspect-ratio:3/4; border-radius:8%/6%; padding:4.5%; box-sizing:border-box }
.disp--tablet .disp__tela img{ border-radius:4px }
/* celular: à direita, mais à frente */
.disp--fone{ right:4%; bottom:-2%; width:15%; z-index:3 }
.disp--fone .disp__tela{ aspect-ratio:9/19; border-radius:16%/8%; padding:5% 4.5%; box-sizing:border-box }
.disp--fone .disp__tela img{ border-radius:10%/5%; object-fit:contain; object-position:center; background:#1a1614 }   /* a capa é escura: as faixas somem nela */
.disp--fone .disp__tela::before{ content:""; position:absolute; top:2.4%; left:50%; width:36%; height:2.6%; transform:translateX(-50%); background:#1E1714; border-radius:999px; z-index:2 }
.selos--centro{ justify-content:center; margin-top:34px }
@media (max-width:600px){
  .dispositivos{ aspect-ratio:1.45; margin-top:28px }
  .disp--note{ left:6%; right:6% }
  .disp--tablet{ width:34%; bottom:2% }
  .disp--fone{ width:18%; right:2% }
}

/* ========================= 22 vereditos ========================= */
.duas-vias{ display:grid; gap:16px; margin-top:30px }
@media (min-width:700px){ .duas-vias{ grid-template-columns:1fr 1fr } }
.nota-nomes{
  margin-top:26px; display:inline-block;
  font-family:var(--fonte-titulo); font-weight:600; font-size:1rem; line-height:1.5;
  color:var(--barro-forte);
  background:var(--branco); padding:14px 20px; border-radius:var(--r-md);
  box-shadow:inset 0 0 0 1.5px var(--barro-veu), var(--sh-1);
}

/* ilustrações inline dos módulos */
.ilu{ width:100%; height:auto; display:block }
.ilu text{ font-family:var(--fonte-titulo) }
.inci li small{ display:block; font-size:.8rem; font-weight:600; color:var(--salvia); line-height:1.3; margin-top:1px }
@media (max-width:430px){ .inci li small{ font-size:.95rem } }

/* ========================= [FALTA] ========================= */
.falta{
  border:2px dashed var(--barro-claro);
  background:var(--mel-veu);
  border-radius:var(--r-lg);
  padding:24px 22px;
  color:var(--barro-forte);
  font-weight:600; line-height:1.6;
}
.falta code{ font-family:ui-monospace, "Cascadia Mono", Consolas, monospace; font-size:.95em; background:rgba(255,255,255,.55); padding:2px 6px; border-radius:6px }
.falta--inline{ display:block; margin-top:14px; padding:14px 18px; font-size:.95rem }

/* ========================= oferta ========================= */
.oferta{ background:var(--creme); border-block:1.5px solid var(--areia-2) }
.oferta__caixa{
  background:var(--branco); border-radius:var(--r-lg); box-shadow:var(--sh-3);
  padding:30px 22px;
  display:grid; gap:30px;
  position:relative;
}
@media (min-width:600px){ .oferta__caixa{ padding:40px 40px } }
@media (min-width:960px){ .oferta__caixa{ grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:48px; align-items:center; padding:52px 56px } }
.oferta__caixa::before{ content:""; position:absolute; inset:-9px; border-radius:36px; box-shadow:inset 0 0 0 1.5px var(--barro-veu); pointer-events:none }
.oferta__mock .mockup{ max-width:420px; aspect-ratio:1.05 }
.oferta__nome{ font-family:var(--fonte-titulo); font-weight:800; font-size:clamp(1.9rem, 4.5vw, 2.6rem); letter-spacing:.06em; color:var(--tinta); line-height:1.1 }
.oferta__sub{ margin-top:10px; font-size:1.02rem; color:var(--tinta-media); max-width:30em }
.oferta__lista{ margin-top:24px }
.oferta__lista li{ display:flex; gap:12px; align-items:flex-start; padding:9px 0; font-size:1rem; line-height:1.55; color:var(--tinta-media) }
.oferta__lista li b{ color:var(--tinta) }
.oferta__lista .ico{ flex:none; width:24px; height:24px; margin-top:2px; border-radius:var(--r-pill); display:grid; place-items:center; background:var(--salvia-veu); color:var(--salvia-forte) }
.oferta__lista .ico svg{ width:13px; height:13px }
.preco{ margin-top:26px; display:flex; align-items:baseline; gap:12px; flex-wrap:wrap }
.preco__valor{ font-family:var(--fonte-titulo); font-weight:800; font-size:clamp(2.6rem, 7vw, 3.6rem); letter-spacing:-.03em; line-height:1; color:var(--barro-forte) }
.preco__cond{ font-size:.98rem; color:var(--tinta-suave) }
.preco__ancora{ margin-top:12px; font-size:1rem; color:var(--tinta-media); max-width:34em }
.preco__ancora b{ color:var(--tinta) }
.oferta .bloco-cta{ margin-top:26px }

/* ========================= garantia ========================= */
.garantia{ display:grid; gap:26px; align-items:center; background:var(--branco); border-radius:var(--r-lg); box-shadow:var(--sh-2); padding:30px 24px }
@media (min-width:760px){ .garantia{ grid-template-columns:170px minmax(0,1fr); gap:40px; padding:40px 44px } }
.selo-garantia{ width:150px; height:150px; margin-inline:auto; position:relative; display:grid; place-items:center; border-radius:50%; background:var(--salvia-veu) }
.selo-garantia::before{ content:""; position:absolute; inset:8px; border-radius:50%; border:2px dashed var(--salvia) }
.selo-garantia__n{ font-family:var(--fonte-titulo); font-weight:800; font-size:3rem; line-height:1; color:var(--salvia-forte); letter-spacing:-.03em }
.selo-garantia__t{ font-family:var(--fonte-titulo); font-size:.74rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--salvia-forte); margin-top:4px }
.garantia .h2{ font-size:clamp(1.5rem, 3.6vw, 2.1rem) }
.garantia p{ margin-top:12px; font-size:1.04rem; line-height:1.7 }

/* ========================= honestidade ========================= */
.honesto{ display:grid; gap:16px; margin-top:34px }
@media (min-width:860px){ .honesto{ grid-template-columns:repeat(3, 1fr); gap:18px } }
.honesto__item{ background:var(--creme); border-radius:var(--r-lg); padding:26px 24px; box-shadow:inset 0 0 0 1.5px var(--areia-2) }
.honesto__item .h3{ font-size:1.12rem; margin-bottom:10px }
.honesto__item p{ font-size:1rem; line-height:1.65 }
.honesto__fonte{ margin-top:12px; font-size:.86rem; color:var(--tinta-suave) }
@media (max-width:430px){ .honesto__fonte{ font-size:1rem } }

/* ========================= perguntas ========================= */
.faq{ margin-top:30px; display:grid; gap:10px }
.faq details{ background:var(--branco); border-radius:var(--r-md); box-shadow:var(--sh-1); overflow:hidden }
.faq summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:20px 22px; min-height:60px;
  font-family:var(--fonte-titulo); font-weight:700; font-size:1.06rem; line-height:1.35; color:var(--tinta);
}
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{ content:"+"; flex:none; width:30px; height:30px; display:grid; place-items:center; border-radius:var(--r-pill); background:var(--areia); color:var(--barro-forte); font-weight:700; font-size:1.2rem; transition:transform .35s var(--curva) }
.faq details[open] summary::after{ transform:rotate(45deg) }
.faq details p{ padding:0 22px 22px; font-size:1rem; line-height:1.7; color:var(--tinta-media) }

/* ========================= cta final ========================= */
.final{ text-align:center }
.final .h2{ margin-inline:auto }
.final p{ margin:16px auto 0; max-width:32em; font-size:1.08rem }

/* ========================= aviso / rodapé ========================= */
.aviso{ border-top:1.5px solid var(--areia-2); padding:34px 0 }
.aviso p{ font-size:.95rem; line-height:1.65; color:var(--tinta-suave); max-width:70em }
@media (max-width:430px){ .aviso p{ font-size:1rem } }
.rodape{ padding:26px 0 44px; font-size:.92rem; color:var(--tinta-suave) }
.rodape__linha{ display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center }
.rodape__marca{ font-family:var(--fonte-titulo); font-weight:700; letter-spacing:.15em; color:var(--tinta) }
.rodape__fontes{ margin-top:12px; line-height:1.6 }
@media (max-width:430px){ .rodape{ font-size:1rem } }

/* telas pequenas: nenhum texto de leitura abaixo de 16px */
@media (max-width:430px){
  .sobrelinha,.microcopy,.cred__nota,.preco__cond,.falta,.falta code,.falta--inline,.mockup__legenda,.modulo__fig figcaption{ font-size:1rem }
  .rotulo-secao,.cred__rotulo,.modulo__num,.coluna__titulo,.rotulo__titulo{ font-size:1rem; letter-spacing:.08em }
  .modulo__fig figcaption{ letter-spacing:.02em; text-transform:none }
  .sobrelinha{ padding:9px 16px 9px 12px }
}

/* ========================= movimento ========================= */
[data-sobe]{ opacity:0; transform:translate3d(0,16px,0); transition:opacity .45s var(--curva), transform .45s var(--curva); transition-delay:var(--atraso, 0ms) }
[data-sobe].dentro{ opacity:1; transform:translate3d(0,0,0) }
.regua__fio{ transform:scaleX(.04); transition:transform .7s var(--curva) .35s }
.rotulo.dentro .regua__fio{ transform:scaleX(1) }
.inci .barra{ transform:scaleX(.05) }
.rotulo.dentro .inci .barra{ transform:scaleX(1) }
.virada::before{ transform:scaleX(.06); transition:transform .6s var(--curva) .2s }
.virada.dentro::before{ transform:scaleX(1) }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; transition-delay:0ms !important }
  [data-sobe]{ opacity:1; transform:none }
  .regua__fio,.inci .barra,.virada::before{ transform:none }
  .mockup__pag--tras,.mockup__pag--frente{ transition:none }
}