/* ==================================================================
   11 — landing.html
   A página é um fim de tarde: abre no céu (hero), desce para a mesa
   (pergaminho) e volta ao céu no fecho. Os dois usos do céu aqui, mais
   a capa do livro, são os três permitidos pelo 09 §3.
   Tudo aqui reusa 01-base, 02-hero, 05-caderno e 07-componentes.
   Só entra neste arquivo o que é exclusivo da landing.
   ================================================================== */

/* ---------- hero: o que a landing acrescenta ao 02-hero ---------- */

/* O título não espera o JS: as palavras já vêm fatiadas no HTML e a animação
   roda no primeiro quadro, em vez de esperar motion.js fatiar. A regra é do
   09 §6.3 — título visível em até 650 ms. Mesmo nome de animação que a regra
   `.play .palavra` do 01-base, então quando a cena do hero toca ela não
   reinicia: o título não pisca. */
.hero h1 .palavra{animation:palavra .5s var(--ease-saida) both; animation-delay:calc(var(--i,0) * 25ms)}

/* o campo de data fica AO LADO dos botões, nunca no caminho: os dois
   CTAs funcionam sem ele (plano §5, S1). */
.lp-data{display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:2px}
.lp-data label{font-size:14px; font-weight:600; color:rgb(253 253 250/.8)}
.lp-data input{height:40px; border:0; border-radius:10px; padding:0 12px; font:600 15px var(--f-ui); color:var(--tinta); background:rgb(253 253 250/.92); box-shadow:0 0 0 1px rgb(255 255 255/.4); transition:box-shadow .2s var(--ease-suave)}
.lp-data input:hover{box-shadow:0 0 0 1px rgb(255 255 255/.7),0 0 0 4px rgb(255 255 255/.16)}
.lp-data input:focus{outline:none; box-shadow:0 0 0 2px #fff,0 0 0 6px rgb(255 255 255/.22)}

/* o número que substitui "Um ano" no H1 quando a data é digitada */
.lp-conta{font-variant-numeric:tabular-nums}

/* a linha de urgência: só aparece depois da data, e tem três estados */
.lp-urgencia{min-height:22px; font-size:15px; font-weight:600; color:var(--mel)}
.lp-urgencia:empty{display:none}
.lp-urgencia b{color:#FDFDFA}

/* o trio de risco, sob os botões — o mesmo ritmo de três da marca */
.lp-trio{display:flex; flex-wrap:wrap; justify-content:center; gap:6px 14px; font-size:14px; color:rgb(253 253 250/.78)}
.lp-trio span{display:inline-flex; align-items:center; gap:14px}
.lp-trio span + span::before{content:"·"; opacity:.5}

/* ---------- fotos de casal, no lugar dos desenhos ----------
   O .foto do 01-base desenha um casal com gradientes, para o brand book não
   depender de imagem. Aqui ele mostra foto de verdade, mantendo a moldura
   branca, a rotação e o grão — o grão entra bem mais fraco, porque sobre foto
   real ele suja em vez de dar textura de papel.
   São fotos whitelabel: servem ao livro de EXEMPLO, que a página rotula como
   exemplo. O 09 §5.3 continua exigindo casal real com autorização para a
   landing de verdade, e é o que os casais-piloto resolvem. */
.foto--img{background:var(--src) center/cover no-repeat}
.foto--img::before{content:none}
.foto--img::after{opacity:.1}

/* ---------- S2 · a mesa vira livro ----------
   Estado de repouso = o final (o livro encadernado), como manda o
   01-base: a cena só roda com .play. Sem JS, a seção já está certa. */
.lp-mesa{position:relative; height:clamp(320px,38vw,440px); border-radius:24px; overflow:hidden;
  background:
    radial-gradient(120% 90% at 50% -20%,rgb(255 216 154/.42),transparent 62%),
    linear-gradient(180deg,#EDEAE4 0%,#D8D6CE 100%);
  box-shadow:var(--sombra-borda)}
.lp-mesa::after{content:""; position:absolute; inset:0; background-image:var(--grain); opacity:.2; mix-blend-mode:multiply; pointer-events:none}
.lp-palco{position:absolute; inset:0; display:grid; place-items:center}
/* cada cópia pousa espalhada (--dx/--dy/--dr) e recolhe para a pilha */
.lp-copia{grid-area:1/1; width:clamp(112px,14vw,164px); transform-origin:50% 60%;
  translate:var(--fx,0px) var(--fy,0px); rotate:var(--fr,0deg)}
@keyframes lp-recolhe{
  0%{opacity:0; translate:var(--dx) calc(var(--dy) - 44px); rotate:calc(var(--dr) - 6deg); scale:1.08; animation-timing-function:cubic-bezier(.2,.75,.3,1)}
  12%{opacity:1}
  34%{translate:var(--dx) var(--dy); rotate:var(--dr); scale:1; animation-timing-function:linear}
  58%{translate:var(--dx) var(--dy); rotate:var(--dr); animation-timing-function:var(--ease-saida)}
  100%{opacity:1; translate:var(--fx,0px) var(--fy,0px); rotate:var(--fr,0deg); scale:1}
}
.lp-mesa.play .lp-copia{animation:lp-recolhe 2.9s both; animation-delay:calc(var(--i,0) * 110ms)}
/* a capa fecha por cima da pilha, com o sol nascendo atrás */
.lp-capa{grid-area:1/1; width:clamp(128px,16vw,184px); z-index:4}
@keyframes lp-fecha{
  0%{opacity:0; translate:0 -30px; rotate:-5deg; scale:1.05}
  100%{opacity:1; translate:var(--fx,0px) var(--fy,0px); rotate:var(--fr,0deg); scale:1}
}
.lp-mesa.play .lp-capa{animation:lp-fecha .85s var(--ease-saida) both 3.25s}
/* z-index 0: o sol é luz NA mesa, atrás das cópias. Acima delas ele vira véu. */
.lp-sol-mesa{position:absolute; z-index:0; left:50%; bottom:-24%; width:clamp(200px,26vw,340px); aspect-ratio:1; border-radius:50%; transform:translateX(-50%);
  background:radial-gradient(circle at 50% 44%,rgb(255 244 214/.8) 0%,rgb(255 216 154/.65) 34%,rgb(255 176 112/0) 70%)}
.lp-mesa.play .lp-sol-mesa{animation:nasce 1.6s var(--ease-saida) both 3.1s}

/* ---------- S3 · folheie o exemplo ---------- */
.lp-exemplo{display:grid; grid-template-columns:minmax(0,320px) minmax(0,1fr); gap:clamp(24px,4vw,56px); align-items:center}
.lp-telefone{position:relative; width:100%; max-width:320px; aspect-ratio:9/19; padding:10px; border-radius:38px; background:linear-gradient(180deg,#2C2B29,#1D1D1C); box-shadow:0 24px 60px -18px rgb(26 16 36/.55),inset 0 0 0 1px rgb(255 255 255/.12)}
.lp-telefone iframe{width:100%; height:100%; border:0; border-radius:28px; background:var(--noite); display:block}
.lp-telefone-capa{position:absolute; inset:10px; border-radius:28px; display:grid; place-content:center; justify-items:center; gap:14px; padding:24px; text-align:center; color:#FDFDFA; background:linear-gradient(160deg,#8E5C88 0%,#3B2150 55%,#1A1024 100%)}
.lp-telefone-capa .display{font-size:26px; line-height:1.1}
.lp-telefone-capa small{font-size:12px; color:rgb(253 253 250/.72)}
.lp-fora{display:grid; gap:10px; align-content:start; max-width:52ch}
.lp-selo-exemplo{display:inline-flex; align-items:center; gap:8px; align-self:start; padding:5px 12px; border-radius:999px; background:var(--linho); font-size:13px; font-weight:800}

/* ---------- S4 · o lacre ---------- */
.lp-lacre{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px}
.lp-modo{display:grid; gap:14px; align-content:start; padding:24px; border-radius:16px; background:var(--superficie); box-shadow:var(--sombra-borda)}
.lp-modo h3{font-size:22px; letter-spacing:-.01em}
.lp-modo p{font-size:15px; color:var(--grafite); line-height:1.5}
/* o cartão com o QR: a chave que destrava na frente dos dois */
.lp-cartao{position:relative; display:grid; grid-template-columns:auto 1fr; align-items:center; gap:14px; padding:16px; border-radius:14px; background:var(--pergaminho); box-shadow:var(--sombra-borda-forte)}
.lp-cartao svg{width:76px; height:76px; flex:none; border-radius:8px; background:#fff}
.lp-cartao b{display:block; font-family:var(--f-display); font-weight:400; font-variation-settings:"SOFT" 100; font-size:19px}
.lp-cartao small{font-size:12.5px; color:var(--pedra)}
/* o cartão é um objeto de papel: ganha um palco do mesmo tamanho do painel de
   tela ao lado, para as duas colunas pesarem igual */
.lp-palco-cartao{display:grid; place-items:center; min-height:210px; padding:18px; border-radius:14px; background:var(--linho)}
.lp-palco-cartao > .lp-cartao{rotate:-1.5deg}

/* o palco do destravar: a capa gira e o contador corre */
.lp-destrava{position:relative; display:grid; place-items:center; height:210px; border-radius:14px; overflow:hidden; background:linear-gradient(180deg,#3B2150,#1A1024); perspective:900px}
.lp-destrava-capa{width:120px; aspect-ratio:4/5; border-radius:4px 10px 10px 4px; display:grid; align-content:center; justify-items:center; gap:4px; color:#FDFDFA; transform-origin:0% 50%;
  background:linear-gradient(160deg,#8E5C88,#3B2150 60%,#1A1024); box-shadow:var(--sombra-foto),inset 6px 0 0 rgb(0 0 0/.2)}
.lp-destrava-num{font-family:var(--f-display); font-weight:400; font-variation-settings:"SOFT" 100; font-size:34px; line-height:1; font-variant-numeric:tabular-nums}
.lp-destrava-rot{font-size:11px; font-weight:700; color:rgb(253 253 250/.75)}
@keyframes lp-gira{from{transform:rotateY(-104deg)} to{transform:rotateY(0deg)}}
.lp-destrava.play .lp-destrava-capa{animation:lp-gira 1.4s var(--ease-saida) both .25s}
/* a varredura da câmera, uma vez só, antes do giro */
.lp-varre{position:absolute; inset:0; pointer-events:none; opacity:0;
  background:linear-gradient(180deg,transparent 42%,rgb(255 216 154/.55) 50%,transparent 58%)}
@keyframes lp-varre{0%{opacity:0; translate:0 -50%} 35%{opacity:1} 100%{opacity:0; translate:0 50%}}
.lp-destrava.play .lp-varre{animation:lp-varre 1s var(--ease-padrao) both}

/* ---------- S5 · quem já ganhou ---------- */
.lp-prova{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px}
/* enquanto não há material real, o bloco fica marcado como vazio e NÃO
   vai ao ar: a regra do plano §4 é que nenhuma prova sobe com placeholder.
   O anel de areia é o mesmo vocabulário do .corte-vazio (05-caderno). */
.lp-vazio{display:grid; align-content:center; justify-items:center; gap:8px; min-height:220px; padding:24px; border-radius:16px; text-align:center; box-shadow:inset 0 0 0 1.5px var(--areia)}
.lp-vazio b{font-size:15px}
.lp-vazio p{font-size:13px; color:var(--pedra); line-height:1.45; max-width:28ch}
.lp-fora-do-ar{display:inline-flex; align-items:center; gap:8px; padding:4px 11px; border-radius:999px; background:var(--coral-profundo); color:#fff; font-size:11px; font-weight:800; letter-spacing:.02em}
/* o bloco que já existe no dia 1: quem responde */
.lp-autor{display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:center; padding:24px; border-radius:16px; background:var(--superficie); box-shadow:var(--sombra-borda)}
.lp-rosto{width:72px; height:72px; border-radius:50%; background:radial-gradient(70% 55% at 42% 32%,#E9E2D6,#CFC4B4 55%,#A89A87); box-shadow:0 0 0 3px #fff,var(--sombra-borda-forte)}
.lp-autor b{font-size:16px}
.lp-autor p{font-size:14.5px; color:var(--grafite); line-height:1.5}

/* ---------- S7 · o que você recebe ---------- */
.lp-recebe{display:block; columns:2; column-gap:24px}
.lp-recebe li{break-inside:avoid; margin-bottom:8px}
@media (max-width:640px){.lp-recebe{columns:1}}

/* ---------- S8 · preço ---------- */
.lp-preco{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,420px); gap:clamp(24px,4vw,48px); align-items:start}
.lp-caixa{display:grid; gap:14px; padding:24px; border-radius:16px; background:var(--superficie); box-shadow:var(--sombra-borda)}
.lp-depois{font-size:14.5px; color:var(--grafite); line-height:1.5; padding:14px 16px; border-radius:12px; background:var(--damasco-nevoa)}

/* ---------- S11 · fecho, no céu ---------- */
.lp-final{position:relative; isolation:isolate; overflow:hidden; margin-inline:clamp(8px,1.4vw,20px); border-radius:24px; background:var(--ceu); color:#FDFDFA; text-align:center; padding:clamp(56px,8vw,104px) 24px}
.lp-final .display{font-size:clamp(32px,4.4vw,52px); line-height:1.12}
.lp-final-corpo{display:grid; justify-items:center; gap:18px; max-width:640px; margin-inline:auto}
.lp-assina{font-family:"Sacramento",cursive; font-size:26px; color:rgb(253 253 250/.9)}

/* ---------- rodapé ---------- */
.lp-rodape{display:flex; flex-wrap:wrap; gap:8px 20px; justify-content:space-between; padding-block:28px 40px; font-size:13px; color:var(--pedra)}

/* ---------- barra fixa (celular) ----------
   Faz o trabalho dos 20 CTAs repetidos sem poluir a página, e carrega a
   urgência real da pessoa quando ela digitou a data. */
.lp-barra{position:fixed; z-index:40; left:0; right:0; bottom:0; display:none; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom)); background:rgb(248 247 242/.94); backdrop-filter:none;
  box-shadow:0 -1px 0 var(--areia),0 -10px 30px -18px rgb(26 16 36/.5); transform:translateY(110%); transition:transform .35s var(--ease-saida)}
.lp-barra.visivel{transform:none}
.lp-barra-txt{display:grid; gap:1px; font-size:13px; line-height:1.25}
.lp-barra-txt b{font-size:14.5px}
@media (max-width:760px){
  .lp-barra{display:flex}
  .lp-exemplo,.lp-lacre,.lp-preco{grid-template-columns:1fr}
  .lp-prova{grid-template-columns:1fr}
  .lp-telefone{margin-inline:auto}
  .lp-autor{grid-template-columns:1fr; justify-items:start}
  body{padding-bottom:76px}
}
@media (max-width:960px){
  .lp-prova{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* No brand book a página é larga e o adesivo "página 1" do .m-previa pode
   pendurar 10px para fora do módulo (05-caderno.css). Numa landing de celular
   esse pendurado vira rolagem horizontal na página inteira, então aqui ele
   entra — o adesivo continua na borda, só não passa dela. */
@media (max-width:760px){
  .bento .m-previa .cola{right:8px}
}

/* O verso de papel do adesivo (.cola::after, 01-base.css) é invisível em
   repouso — `--verso:0` — mas gira 180° em torno da borda direita, e continua
   contando como área rolável: sozinho, ele empurrava a página 47px para o lado
   no celular. `clip` no eixo X contém o verso sem tocar no eixo Y, onde a
   animação `encaixa` dos módulos precisa de espaço. */
.bento{overflow-x:clip}