/* Identidade lúdica: cores vivas, formas arredondadas, fundo de confete. */
:root {
  --papel:#fef8f0; --cartao:#ffffff; --tinta:#2b2420; --suave:#7a726a; --linha:#e8e0d4;
  --giz:#e8563a; --fita:#ffd166; --verde:#38b89a; --roxo:#7c5cfc;
  --serifa:"Fraunces", Georgia, serif;
  --corpo:"Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:"DM Mono", ui-monospace, Menlo, monospace;
  --mola:cubic-bezier(.16,1,.3,1);
}
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; color:var(--tinta); font:17px/1.55 var(--corpo);
  /* fundo lúdico: bolinhas coloridas espalhadas */
  background:
    radial-gradient(circle 3px at 15% 25%, var(--fita) .8px, transparent 1px),
    radial-gradient(circle 3px at 72% 12%, var(--giz) .8px, transparent 1px),
    radial-gradient(circle 2.5px at 45% 65%, var(--verde) .7px, transparent 1px),
    radial-gradient(circle 2px at 88% 45%, var(--roxo) .6px, transparent 1px),
    radial-gradient(circle 2.5px at 28% 82%, var(--giz) .7px, transparent 1px),
    radial-gradient(circle 3px at 62% 38%, var(--fita) .8px, transparent 1px),
    radial-gradient(circle 2px at 8% 55%, var(--verde) .6px, transparent 1px),
    radial-gradient(circle 2.5px at 92% 78%, var(--roxo) .7px, transparent 1px),
    var(--papel);
}
img { display:block; max-width:100%; height:auto; }
body { overflow-x:hidden; }
:focus-visible { outline:3px solid var(--giz); outline-offset:3px; }

.topo { display:flex; align-items:center; justify-content:space-between; gap:12px; max-width:1080px; margin:0 auto; padding:18px 16px 0; }
.marca { font:italic 600 22px/1 var(--serifa); letter-spacing:-.01em; color:inherit; text-decoration:none; display:flex; align-items:center; gap:10px; }
.marca::before { content:"✦"; font-size:20px; color:var(--giz); }
.mono { font:500 12px/1.3 var(--mono); letter-spacing:.09em; text-transform:uppercase; color:var(--suave); }

h1, h2, h3 { font-family:var(--serifa); font-weight:600; letter-spacing:-.02em; margin:0; }
em { font-style:italic; color:var(--giz); }

.botao {
  display:inline-flex; align-items:center; justify-content:center; gap:10px; width:100%; padding:17px 22px;
  font:600 17px/1 var(--corpo); color:#fff; background:linear-gradient(135deg, var(--giz), var(--roxo)); border:0; border-radius:14px; cursor:pointer;
  box-shadow:0 4px 16px rgba(124,92,252,.3); transition:transform .25s var(--mola), box-shadow .25s var(--mola);
}
.botao:hover { transform:translateY(-2px); box-shadow:0 6px 24px rgba(124,92,252,.4); }
.botao:active { transform:translateY(2px); box-shadow:0 2px 8px rgba(124,92,252,.2); }
.botao:disabled { opacity:.55; cursor:default; transform:none; }
.botao .seta { transition:transform .25s var(--mola); }
.botao:hover .seta { transform:translateX(4px); }

.erro { color:#a5260f; min-height:1.5em; margin-top:12px; font-size:15px; }

/* espera: varinha mágica */
.espera { text-align:center; padding:22vh 16px 0; max-width:460px; margin:0 auto; }
.corte { position:relative; height:34px; margin:0 auto 22px; max-width:260px; border-bottom:2px dashed var(--roxo); }
.corte svg { position:absolute; left:0; bottom:-13px; width:30px; height:30px; animation:corta 2.2s ease-in-out infinite; }
@keyframes corta { 0% { transform:translateX(-10px); opacity:0; } 12% { opacity:1; } 88% { opacity:1; } 100% { transform:translateX(240px); opacity:0; } }
.espera p { margin:0 0 6px; }

.entra { animation:entra .6s var(--mola) both; }
@keyframes entra { from { opacity:0; transform:translateY(18px); } }

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