/* Páginas pós-compra dos volumes (OTO, downsell, obrigado).
   Componentes copiados de design/design-system.html. Cor e fonte só pelos tokens. */
@import url("../design/tokens.css");

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--breu); color:var(--tinta);
  font-family:var(--f-corpo); font-size:var(--t-md); line-height:1.75;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
@media (max-width:480px){body{font-size:1.125rem}}
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:var(--z-grao);
  background-image:var(--grao); opacity:.06; mix-blend-mode:overlay;
}
img{display:block; max-width:100%}
h1,h2,h3{font-family:var(--f-titulo); font-weight:700; text-transform:uppercase; line-height:1.02; letter-spacing:.01em; margin:0; text-wrap:balance}
p{margin:0 0 1em; text-wrap:pretty}
a{color:inherit}
:focus-visible{outline:2px solid var(--ouro); outline-offset:3px}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

.mesa{padding:var(--e-8) 16px; position:relative}
.largura{max-width:1080px; margin:0 auto}
.ficha-rotulo{font-family:var(--f-ficha); font-size:var(--t-sm); color:var(--tinta-2); letter-spacing:.02em}
.logo{font-family:var(--f-logo); font-size:var(--t-sm); letter-spacing:.28em; text-transform:uppercase; color:var(--ouro); margin:0}

/* ---------- recibo: faixa de confirmação do pagamento ---------- */
.recibo{border-bottom:1px solid var(--fio); padding:var(--e-4) 16px}
.recibo .largura{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--e-2) var(--e-5)}
.recibo p{margin:0}
.recibo .ok{color:var(--tinta)}
.recibo .ok b{color:var(--lacre-vivo); font-weight:700}

/* ---------- carimbo ---------- */
.carimbo{
  --cor:var(--lacre-vivo);
  display:inline-block; font-family:var(--f-titulo); font-weight:700; text-transform:uppercase;
  font-size:clamp(1.1rem,3.4vw,1.6rem); letter-spacing:.06em; line-height:1;
  color:var(--cor); padding:.45em .7em .4em;
  border:3px solid var(--cor); outline:1.5px solid var(--cor); outline-offset:3px;
  transform:rotate(var(--giro,-6deg));
  -webkit-mask-image:var(--tinta-falhada); mask-image:var(--tinta-falhada);
  -webkit-mask-size:220px; mask-size:220px;
  animation:bater .42s var(--ease-out) both;
}
.carimbo.tinta{--cor:var(--tinta-2)}
.carimbo.ouro{--cor:var(--ouro)}
.carimbo.pequeno{font-size:var(--t-sm); border-width:2px; outline-width:1px}
@keyframes bater{from{opacity:0; transform:rotate(var(--giro,-6deg)) scale(1.5)} to{opacity:1; transform:rotate(var(--giro,-6deg)) scale(1)}}

/* ---------- botões ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em; text-align:center;
  min-height:56px; padding:.5em 1.6em;
  font-family:var(--f-titulo); font-weight:600; font-size:1.125rem; letter-spacing:.06em; text-transform:uppercase; line-height:1.15;
  text-decoration:none; border:0; cursor:pointer;
  transition:background-color .2s var(--ease-out), transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.btn-lacre{background:var(--lacre); color:var(--tinta); box-shadow:0 1px 0 rgba(255,255,255,.12) inset, var(--sombra-objeto)}
.btn-lacre:hover{background:var(--lacre-fundo); transform:translateY(-1px)}
.btn-lacre:active{transform:translateY(1px); box-shadow:0 1px 2px rgba(0,0,0,.6)}
.btn-contorno{background:transparent; color:var(--tinta); box-shadow:inset 0 0 0 1.5px var(--tinta-2)}
.btn-contorno:hover{box-shadow:inset 0 0 0 1.5px var(--tinta)}
.btn-link{font-family:var(--f-corpo); font-size:var(--t-md); color:var(--tinta-2); text-decoration:underline; text-decoration-color:var(--lacre-vivo); text-underline-offset:4px; text-decoration-thickness:1.5px; min-height:44px; display:inline-flex; align-items:center}
.btn-link:hover{color:var(--tinta)}
.btn-bloco{width:100%}

/* ---------- pasta de volume ---------- */
.pasta{
  position:relative; background:var(--papelao); color:var(--tinta);
  background-image:var(--grao), linear-gradient(160deg, rgba(255,235,200,.05), rgba(0,0,0,.35));
  background-blend-mode:soft-light, normal;
  border-radius:3px 8px 8px 3px; padding:var(--e-6) var(--e-5) var(--e-5);
  box-shadow:inset 0 0 0 1px rgba(255,230,190,.06), inset 0 0 60px rgba(0,0,0,.45), var(--sombra-objeto);
}
.pasta-aba{
  position:absolute; top:-26px; left:24px; height:28px; padding:0 18px;
  display:flex; align-items:center; background:inherit; background-color:var(--papelao);
  border-radius:6px 6px 0 0; font-family:var(--f-ficha); font-size:var(--t-xs); font-weight:700; color:var(--tinta-2);
  box-shadow:inset 0 1px 0 rgba(255,230,190,.08);
}
.pasta-topo{display:flex; justify-content:space-between; align-items:start; gap:var(--e-4); margin-bottom:var(--e-5)}
.pasta h3{font-size:var(--t-xl)}
.pasta .carimbo{flex:none; --giro:-8deg}
.pasta-corpo{display:grid; grid-template-columns:112px minmax(0,1fr); gap:var(--e-5); align-items:start}
.foto-presa{position:relative; margin:0; background:#ddd4bf; padding:6px 6px 18px; transform:rotate(-2.5deg); box-shadow:var(--sombra-objeto)}
.foto-presa img{width:100%; height:auto; aspect-ratio:3/4; object-fit:cover; filter:grayscale(1) contrast(1.15)}
.foto-presa::before{
  content:""; position:absolute; top:-10px; left:50%; width:54px; height:20px; translate:-50% 0; rotate:3deg;
  background:rgba(230,220,198,.55); box-shadow:0 1px 2px rgba(0,0,0,.25);
}
.ficha{font-family:var(--f-ficha); font-size:var(--t-sm); line-height:1.65; margin:0; display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:.8em}
.ficha dt{color:var(--tinta-2)}
.ficha dd{margin:0; color:var(--tinta)}
.ficha .alerta{color:var(--lacre-vivo)}
.pasta-resumo{margin:var(--e-5) 0 0; font-size:var(--t-md); color:var(--tinta)}
.pasta-rodape{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--e-4); border-top:1px dashed rgba(236,230,216,.2); padding-top:var(--e-5); margin-top:var(--e-5)}
.preco{font-family:var(--f-titulo); font-weight:600; font-size:var(--t-xl); line-height:1; margin:0}
.preco s{font-family:var(--f-ficha); font-weight:400; font-size:var(--t-sm); color:var(--tinta-2); margin-right:.5em; vertical-align:middle}
@media (max-width:420px){.pasta-corpo{grid-template-columns:88px minmax(0,1fr)}}

/* ---------- OTO: único momento Drenched da página ---------- */
.oto{
  background:radial-gradient(120% 90% at 30% 20%, var(--lacre) 0%, var(--lacre-fundo) 55%, #5e0e09 100%);
  color:var(--tinta); position:relative; isolation:isolate; overflow:hidden;
  padding:var(--e-8) 16px;
}
.oto::before{content:""; position:absolute; inset:0; z-index:-1; background:url("../design/testes-zimage/papel-velho_seed2081850492.webp") 30% 50% / cover, var(--grao); background-blend-mode:normal, multiply; opacity:.42; mix-blend-mode:multiply}
.oto::after{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; box-shadow:inset 0 0 120px rgba(20,4,2,.75), inset 0 0 18px rgba(20,4,2,.6)}
.oto-grade{display:grid; gap:var(--e-7); align-items:center}
@media (min-width:860px){.oto-grade{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}}
.oto .ficha-rotulo{color:rgba(236,230,216,.82)}
.oto h1,.oto h2{font-size:var(--t-2xl); margin:var(--e-4) 0 var(--e-5)}
.oto p{font-size:var(--t-lg); line-height:1.6; max-width:40ch}
.oto-selo{justify-self:center; position:relative; width:min(280px,70vw); aspect-ratio:1}
/* No celular o botão precisa caber na primeira dobra: selo vira canto, respiro encolhe. */
@media (max-width:859px){
  .oto{padding-top:var(--e-6)}
  .oto-selo{position:absolute; top:calc(var(--e-6) - 8px); right:12px; width:84px; opacity:.9}
  .oto .ficha-rotulo{padding-right:96px}
  .oto p{font-size:1.2rem}
  .oto-acao{margin-top:var(--e-5)}
}
.oto-selo svg{width:100%; height:100%}
.oto-acao{margin-top:var(--e-6); display:grid; gap:var(--e-3); max-width:460px}
.btn-ouro{background:var(--ouro); color:var(--grafite); box-shadow:var(--sombra-objeto)}
.btn-ouro:hover{background:#e0b84f; transform:translateY(-1px)}
.btn-ouro:active{transform:translateY(1px)}
.preco-oto{font-family:var(--f-ficha); font-size:var(--t-md)}
.preco-oto s{opacity:.75}
.oto .recusa{color:rgba(236,230,216,.85); text-decoration-color:rgba(236,230,216,.5); font-size:var(--t-sm); justify-self:center}
.oto .recusa:hover{color:var(--tinta)}

/* ---------- anexo: folha de papel presa por clipe ---------- */
.anexo{
  position:relative; color:var(--grafite); padding:var(--e-6) var(--e-5) var(--e-6);
  background:
    radial-gradient(ellipse 75% 70% at 50% 45%, transparent 50%, rgba(92,58,18,.32) 100%),
    linear-gradient(rgba(236,226,204,.7), rgba(236,226,204,.7)),
    url("../design/testes-zimage/papel-velho_seed2081850492.webp") var(--pos,8% 10%) / 900px auto,
    var(--folha);
  box-shadow:var(--sombra-objeto); transform:rotate(var(--giro,0deg));
  clip-path:polygon(0 0,100% 0,100% 96%,96% 97.5%,92% 96%,87% 98%,82% 96.5%,76% 98.5%,70% 96%,63% 98%,57% 96.5%,50% 98.5%,44% 96%,38% 98%,31% 96.5%,25% 98.5%,19% 96%,13% 98%,7% 96.5%,3% 98%,0 96.5%);
}
.anexo .clipe{position:absolute; top:-6px; left:26px; width:22px; height:46px; border:2.5px solid #8b8478; border-radius:11px; border-bottom-color:transparent}
.anexo-num{font-family:var(--f-ficha); font-size:var(--t-xs); color:#5c5344; margin-bottom:var(--e-3)}
.anexo h2,.anexo h3{color:var(--grafite)}
.anexo mark{background:none; color:var(--lacre); box-shadow:inset 0 -.35em 0 rgba(184,29,19,.14)}

/* ---------- FAQ: fichas de índice ---------- */
.faq{display:grid; gap:var(--e-3); max-width:760px}
.faq details{background:var(--breu-2); border:1px solid var(--fio)}
.faq summary{
  list-style:none; cursor:pointer; min-height:56px; padding:var(--e-4) var(--e-5);
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:var(--e-4); align-items:center;
  font-family:var(--f-titulo); font-weight:500; font-size:var(--t-lg); text-transform:uppercase; letter-spacing:.02em; line-height:1.2;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary .ref{font-family:var(--f-ficha); font-size:var(--t-xs); font-weight:400; color:var(--apagado); text-transform:none}
.faq summary .sinal{width:14px; height:14px; position:relative}
.faq summary .sinal::before,.faq summary .sinal::after{content:""; position:absolute; inset:6px 0; background:var(--lacre-vivo); transition:transform .3s var(--ease-out)}
.faq summary .sinal::after{transform:rotate(90deg)}
.faq details[open] summary .sinal::after{transform:rotate(0)}
.faq details > div{padding:0 var(--e-5) var(--e-5) calc(var(--e-5) + 3.2em); color:var(--tinta-2); max-width:62ch}
@media (max-width:480px){.faq details > div{padding-left:var(--e-5)}}

/* ---------- fio vermelho ---------- */
.fio{width:100%; height:80px; display:block; margin:var(--e-6) 0}
.fio path{stroke:var(--lacre); stroke-width:1.6; fill:none; stroke-dasharray:1200; stroke-dashoffset:0; animation:desenhar 1.8s var(--ease-out) both}
.fio circle{fill:var(--ouro)}
@keyframes desenhar{from{stroke-dashoffset:1200}}

.rodape{padding:var(--e-7) 16px; border-top:1px solid var(--fio); text-align:center}
.rodape p{font-family:var(--f-ficha); font-size:var(--t-xs); color:var(--tinta-2); max-width:60ch; margin:var(--e-3) auto 0}

/* ---------- movimento (aprovado no design-system) ----------
   Sem JS ou com movimento reduzido, tudo aparece no estado final.
   Com .anima, cada peça espera pausada até entrar na tela (.visto). */
.foto-presa{animation:cair .75s var(--ease-out) .1s both}
.anexo{animation:pousar .8s var(--ease-out) both}
.pasta .carimbo{animation-delay:.55s}
.oto-selo svg{animation:selar .6s var(--ease-out) .2s both}
.oto-selo .anel{transform-box:view-box; transform-origin:50% 50%; animation:girar 60s linear infinite}
.anima :is(.carimbo,.foto-presa,.anexo,.oto-selo svg,.fio path){animation-play-state:paused}
.anima :is(.visto.carimbo,.visto .carimbo,.visto .foto-presa,.visto.anexo,.visto svg,.visto path){animation-play-state:running}
.anima .pasta.visto{animation:tremor .22s linear .78s}
@keyframes cair{from{opacity:0; transform:translate(10px,-70px) rotate(-16deg)} 70%{opacity:1} to{opacity:1; transform:rotate(-2.5deg)}}
@keyframes pousar{from{opacity:0; transform:translateY(48px) rotate(calc(var(--giro,0deg) - 4deg))} to{opacity:1; transform:rotate(var(--giro,0deg))}}
@keyframes selar{from{opacity:0; transform:scale(1.35) rotate(-25deg)} to{opacity:1; transform:none}}
@keyframes girar{to{transform:rotate(360deg)}}
@keyframes tremor{25%{transform:translate(1px,1px)} 50%{transform:translate(-1px,0)} 75%{transform:translate(0,1px)}}

.anima .linha{display:inline-block; overflow:hidden; white-space:pre; vertical-align:bottom; width:0}
.anima .visto .linha{animation:datilo calc(var(--n) * 28ms) steps(var(--n)) var(--atraso,0ms) forwards}
@keyframes datilo{to{width:calc(var(--n) * 1ch)}}

@supports (animation-timeline:view()){
  .anima .fio path{animation:desenhar linear both; animation-timeline:view(); animation-range:entry 10% cover 45%; animation-play-state:running}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important; transition:none !important}
}