/* SEND2.DAD quiz — um campo por tela, tudo centralizado, mobile-first.
   Refino 29/07: rodapé limpo (sem gradiente-sombra), seletor de ano em popup
   com rolagem, opções que avançam com um toque, foto inteira sem corte. */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --fundo:#0a0b14; --card:#171923; --borda:#262a3a; --texto:#f4f1ea; --suave:#b6b3c4;
  --dourado:#e9bb79; --dourado2:#f7ddab;
  --serif:ui-serif,Georgia,'Times New Roman',serif;
  --sans:ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--sans);color:var(--texto);background:var(--fundo);min-height:100svh;
  display:flex;flex-direction:column}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;touch-action:manipulation}

#fundo{position:fixed;inset:0;z-index:0;overflow:hidden}
.aurora{position:absolute;width:110vmax;height:110vmax;border-radius:50%;filter:blur(70px);opacity:.45}
#au1{left:-40vmax;top:-46vmax;background:radial-gradient(closest-side,#3c2a6e,transparent 70%);
  animation:au1 26s ease-in-out infinite alternate}
#au2{right:-46vmax;top:-30vmax;background:radial-gradient(closest-side,#173a63,transparent 70%);
  animation:au2 31s ease-in-out infinite alternate}
#au3{left:8vw;bottom:-70vmax;background:radial-gradient(closest-side,rgba(233,187,121,.5),transparent 70%);
  opacity:.3;animation:au3 23s ease-in-out infinite alternate}
@keyframes au1{to{transform:translate(9vw,7vh) rotate(40deg)}}
@keyframes au2{to{transform:translate(-8vw,9vh)}}
@keyframes au3{to{transform:translate(6vw,-6vh) scale(1.14)}}
#grao{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.05;
  background-image:radial-gradient(rgba(255,255,255,.9) .5px,transparent .5px);background-size:3px 3px}

#topo{position:relative;z-index:10;max-width:520px;width:100%;margin:0 auto;
  padding:16px 22px 10px;text-align:center}
.marca{font-weight:800;font-size:16px;letter-spacing:.4px;color:var(--dourado)}
.marca span,.marca small{display:none}
.progresso{height:4px;border-radius:3px;background:rgba(255,255,255,.1);margin-top:12px;overflow:hidden}
#prog-fill{display:block;height:100%;width:0;border-radius:3px;
  background:linear-gradient(90deg,var(--dourado),var(--dourado2));transition:width .5s cubic-bezier(.2,.8,.3,1)}

#palco{position:relative;z-index:10;flex:1;width:100%;max-width:520px;margin:0 auto;
  padding:22px 22px 150px;overflow-y:auto;text-align:center}
.passo{animation:entra .55s cubic-bezier(.2,.8,.3,1)}
@keyframes entra{from{opacity:0;transform:translateY(18px)}}
.rotulo{color:var(--dourado);font-size:12px;font-weight:700;letter-spacing:2.6px;text-transform:uppercase}
h1{font-family:var(--serif);font-weight:400;font-size:clamp(27px,7.4vw,38px);line-height:1.22;margin-top:10px}
h1 b{color:var(--dourado);font-weight:700}
h1.gigante{font-size:clamp(31px,8.8vw,44px)}
.sub{color:var(--suave);font-size:15px;line-height:1.6;margin-top:12px;max-width:36ch;margin-inline:auto}
.sub.grande{font-size:17px;color:#d9d5e4;line-height:1.65;max-width:32ch}
.sub b{color:var(--texto)}
.campo{margin-top:22px}
input[type=text],input[type=email]{
  width:100%;padding:16px;border-radius:14px;border:1.5px solid var(--borda);
  background:rgba(16,15,28,.7);color:var(--texto);font:inherit;font-size:16px;text-align:center}
input:focus{outline:none;border-color:rgba(233,187,121,.6)}
.dica{font-size:12px;color:var(--suave);margin-top:8px;line-height:1.5}
.erro{color:#f2a1a1;font-size:13px;margin-top:12px;min-height:18px}

/* botão-campo que abre a rolagem */
.botao-grande{margin-top:24px;width:100%;padding:20px;border-radius:16px;
  border:1.5px solid var(--borda);background:rgba(16,15,28,.7);
  font-size:22px;font-weight:700;color:var(--dourado)}

/* opções de um toque */
.grade-meses{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:22px}
.lista-opcoes{display:grid;gap:10px;margin-top:22px}
.opcao{padding:15px 14px;border-radius:14px;border:1.5px solid var(--borda);
  background:rgba(16,15,28,.6);font-size:15px;font-weight:600;color:var(--texto);transition:.15s}
.opcao.on{border-color:var(--dourado);color:var(--dourado);background:rgba(233,187,121,.08)}
.opcao.larga{text-align:left}
.opcao.com-icone{display:flex;align-items:center;gap:12px}
.opcao.com-icone svg{width:22px;height:22px;color:var(--dourado);flex:none}

/* upload: a foto aparece INTEIRA (contain), sem corte */
.up{margin-top:18px;position:relative;border:1.5px dashed rgba(233,187,121,.45);border-radius:16px;
  min-height:130px;display:grid;place-items:center;text-align:center;padding:16px;overflow:hidden;
  background:rgba(16,15,28,.5);cursor:pointer}
.up input{position:absolute;inset:0;opacity:0;cursor:pointer}
.up .txt{color:var(--suave);font-size:13.5px;line-height:1.6}
.up .txt b{display:block;color:var(--dourado);font-size:15px;margin-bottom:4px}
.up-inteira img{max-height:44svh;width:auto;max-width:100%;object-fit:contain;border-radius:8px}
.up-media img{max-height:32svh}
.up.tem{border-style:solid;padding:10px}
.up.tem::after{content:'trocar';position:absolute;right:10px;bottom:10px;z-index:2;
  padding:5px 12px;border-radius:999px;background:rgba(10,11,20,.85);font-size:11.5px;
  letter-spacing:1px;text-transform:uppercase;color:var(--dourado)}
.pular{margin-top:14px;color:var(--suave);font-size:13.5px;text-decoration:underline}

/* chips de tag */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;justify-content:center}
.chip{padding:8px 14px;border-radius:999px;border:1.5px solid var(--borda);font-size:13px;color:var(--suave)}
.chip:active{border-color:var(--dourado);color:var(--dourado)}

/* tons (estilo emoji) */
.tons-linha{margin-top:24px}
.tons-linha>label{display:block;font-size:13px;font-weight:700;color:var(--suave);
  letter-spacing:1.6px;text-transform:uppercase;margin-bottom:10px}
.tons{display:flex;gap:12px;justify-content:center}
.tom{width:44px;height:44px;border-radius:50%;border:3px solid transparent;
  box-shadow:0 4px 14px rgba(0,0,0,.35);transition:.15s}
.tom.on{border-color:var(--dourado);transform:scale(1.12)}
.tom-rot{min-height:18px;font-size:12px;color:var(--dourado);margin-top:8px}

/* popup de rolagem de ano */
.rolagem-fundo{position:fixed;inset:0;z-index:60;display:grid;place-items:end center;
  background:rgba(5,6,12,.7);backdrop-filter:blur(4px)}
.rolagem-caixa{position:relative;width:100%;max-width:520px;border-radius:22px 22px 0 0;
  background:#14151f;border-top:1.5px solid var(--borda);padding:20px 22px calc(20px + env(safe-area-inset-bottom));
  text-align:center;animation:sobe .35s cubic-bezier(.2,.8,.3,1)}
@keyframes sobe{from{transform:translateY(40%)}}
.rolagem-caixa b{font-size:15px}
.rolagem{height:230px;margin:14px 0;overflow-y:auto;scroll-snap-type:y mandatory;
  padding:92px 0;-webkit-mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent)}
.rolagem-item{height:46px;line-height:46px;font-size:21px;color:var(--suave);
  scroll-snap-align:center;font-variant-numeric:tabular-nums}
.rolagem-item.on{color:var(--dourado);font-weight:800;font-size:25px}
.rolagem-mira{position:absolute;left:22px;right:22px;top:calc(20px + 15px + 14px + 92px);height:46px;
  border-top:1.5px solid rgba(233,187,121,.35);border-bottom:1.5px solid rgba(233,187,121,.35);
  pointer-events:none}

/* rodapé de navegação LIMPO (sem gradiente-sombra), tudo centralizado */
#rodape{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;flex-direction:column;
  gap:8px;align-items:center;max-width:520px;margin:0 auto;
  padding:10px 22px calc(16px + env(safe-area-inset-bottom));
  background:rgba(10,11,20,.92);backdrop-filter:blur(10px);border-top:1px solid rgba(255,255,255,.06)}
.cta{width:100%;max-width:340px;padding:16px 30px;border-radius:999px;
  background:linear-gradient(160deg,var(--dourado2),var(--dourado));color:#241806;
  font-weight:800;font-size:15.5px;min-height:52px;transition:transform .15s,opacity .2s}
.cta:active{transform:scale(.97)}
.cta[disabled]{opacity:.45;pointer-events:none}
#btn-voltar{color:var(--suave);font-size:13px;letter-spacing:.6px;padding:6px}

/* intro */
.intro-selos{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;justify-content:center}
.selo{padding:9px 15px;border-radius:999px;border:1px solid rgba(233,187,121,.4);
  font-size:13.5px;font-weight:600;color:var(--dourado)}
/* teste positivo: altura travada pra não empurrar o botão pra fora da 1ª dobra
   em tela pequena (a foto é 4:5; inteira ela comeria 420px de um palco de 640). */
.intro-foto{margin-top:20px;border-radius:18px;overflow:hidden;
  box-shadow:0 18px 40px rgba(0,0,0,.45)}
.intro-foto img{display:block;width:100%;height:clamp(180px,32vh,300px);
  object-fit:cover;object-position:center 55%}
/* celular baixo (360x640): com 32vh os selos sumiam atrás da barra do botão */
@media (max-height:700px){.intro-foto{margin-top:14px}.intro-foto img{height:148px}}
.final-brilho{font-size:44px;margin-top:10px;animation:respira-f 2s ease-in-out infinite}
@keyframes respira-f{50%{transform:scale(1.15)}}

/* rolagem inline (sempre aberta) */
.rolagem-wrap{position:relative;margin-top:20px}
.rolagem-in{height:230px;overflow-y:auto;scroll-snap-type:y mandatory;padding:92px 0;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent)}
.rolagem-mira-in{position:absolute;left:8%;right:8%;top:92px;height:46px;z-index:2;
  border-top:1.5px solid rgba(233,187,121,.4);border-bottom:1.5px solid rgba(233,187,121,.4);
  pointer-events:none;border-radius:6px}
.lado-a-lado{display:grid;grid-template-columns:1.2fr 1fr;gap:16px;margin-top:20px;align-items:start}
.lado-a-lado .rolagem-wrap{margin-top:0}
.mini-label{font-size:12.5px;font-weight:700;color:var(--suave);letter-spacing:1.6px;
  text-transform:uppercase;margin-bottom:10px}
.lado-a-lado .grade-meses{margin-top:0}

/* carinhas do bebê (SVG) */
.carinhas{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:24px}
.carinha{aspect-ratio:1/1;border-radius:20px;border:2.5px solid var(--borda);
  background:rgba(16,15,28,.6);padding:8px;transition:.15s}
.carinha svg{width:100%;height:100%}
.carinha.on{border-color:var(--dourado);background:rgba(233,187,121,.1);transform:scale(1.06)}

/* envio */
.enviando{display:grid;place-items:center;gap:18px;padding:60px 0}
.spinner{width:44px;height:44px;border-radius:50%;border:3px solid rgba(233,187,121,.25);
  border-top-color:var(--dourado);animation:gira 1s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}

/* checkout */
.caixa-preco{margin-top:22px;border:1.5px solid var(--borda);border-radius:18px;padding:20px;
  background:rgba(16,15,28,.65);text-align:left}
.caixa-preco .linha-preco{display:flex;justify-content:space-between;align-items:center}
.caixa-preco .linha-preco b{font-size:22px}
.garantias{display:grid;gap:9px;margin-top:18px;text-align:left}
.garantia{display:flex;gap:10px;align-items:center;color:var(--suave);font-size:13.5px}
.garantia svg{width:17px;height:17px;color:var(--dourado);flex:none}
.provas{display:grid;gap:10px;margin-top:22px}
.prova{border:1.5px solid var(--borda);border-radius:14px;padding:14px 16px;text-align:left;
  background:rgba(16,15,28,.5)}
.prova .estrelas{color:var(--dourado);font-size:13px;letter-spacing:2px}
.prova p{font-size:13.5px;color:var(--texto);margin-top:6px;line-height:1.5;font-family:var(--serif)}
.prova small{display:block;color:var(--suave);font-size:11.5px;margin-top:6px}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.01ms!important}}