/* Modelo access_3 — "Aurora": escuro, faixas de aurora no topo, acento ambar. Componentes em base.css. */
:root {
  --fundo: #0b0c18; --ambar: #f5b400; --laranja: #f97316; --violeta: #7c3aed; --petroleo: #14b8a6;
  --texto: #f3f4fa; --texto-suave: rgba(243, 244, 250, .66);
  --borda: rgba(255, 255, 255, .1);
  --campo-fundo: rgba(255, 255, 255, .05); --campo-fundo-foco: rgba(255, 255, 255, .08); --campo-autofill: #1c1d33;
  --acento: var(--ambar); --acento-sombra: rgba(245, 180, 0, .22); --rotulo: #fcd34d; --trilho: rgba(255, 255, 255, .16);
  --link: #fde68a; --link-hover: #fff;
  --botao-fundo: linear-gradient(135deg, #f5b400, #f59e0b 55%, #f97316); --botao-texto: #1a1206;
  --botao-sombra: 0 10px 30px rgba(245, 180, 0, .28); --botao-sombra-hover: 0 14px 36px rgba(245, 180, 0, .4);
  --erro-fundo: rgba(255, 107, 107, .12); --erro-borda: rgba(255, 107, 107, .38); --erro-texto: #ffb9b9;
  --ok-fundo: rgba(52, 211, 153, .12); --ok-borda: rgba(52, 211, 153, .38); --ok-texto: #a7f3d0;
  --raio-campo: 14px;
}
body { background: var(--fundo); }
.botao-carregando { border-color: rgba(26, 18, 6, .3); border-top-color: #1a1206; }

/* aurora */
.aurora { position: fixed; inset: 0; overflow: hidden; z-index: 0; background: radial-gradient(90% 60% at 50% 0%, #1b1c35 0%, var(--fundo) 60%); }
.faixa { position: absolute; left: 50%; top: -30vh; width: 140vw; height: 60vh; border-radius: 50%; filter: blur(70px); opacity: .75; transform-origin: center; animation: ondular var(--duracao, 18s) ease-in-out infinite alternate; }
.faixa-1 { background: linear-gradient(90deg, transparent, var(--petroleo), transparent); --rot: -6deg; --dx: -54%; --duracao: 20s; }
.faixa-2 { background: linear-gradient(90deg, transparent, var(--violeta), transparent); --rot: 5deg; --dx: -46%; --duracao: 26s; top: -22vh; opacity: .65; }
.faixa-3 { background: linear-gradient(90deg, transparent, var(--ambar), transparent); --rot: -2deg; --dx: -50%; --duracao: 23s; top: -36vh; opacity: .42; }
@keyframes ondular {
  from { transform: translateX(-50%) rotate(var(--rot, 0deg)) translateY(0) scaleX(1); }
  to   { transform: translateX(var(--dx, -50%)) rotate(calc(var(--rot, 0deg) * -1)) translateY(6vh) scaleX(1.08); }
}

/* cartao */
.palco { position: relative; z-index: 1; min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 28px 16px; }
.cartao { width: min(400px, 100%); background: #15162a; border: 1px solid var(--borda); border-radius: 18px; padding: 34px 30px 26px; box-shadow: 0 30px 70px rgba(0, 0, 0, .55); animation: surgir .7s cubic-bezier(.2, .8, .2, 1) both; }
.cartao.tremer { animation: surgir .7s cubic-bezier(.2, .8, .2, 1) both, tremer .55s .75s both; }
@keyframes surgir { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.marca { text-align: center; margin-bottom: 24px; }
.marca-icone { width: 58px; height: 58px; color: var(--ambar); filter: drop-shadow(0 8px 20px rgba(245, 180, 0, .35)); }
.escudo { stroke-dasharray: 170; stroke-dashoffset: 170; animation: desenhar 1.3s .3s ease forwards; }
.check { stroke-dasharray: 40; stroke-dashoffset: 40; animation: desenhar .6s 1.4s ease forwards; }
@keyframes desenhar { to { stroke-dashoffset: 0; } }
.marca h1 { margin: 10px 0 2px; font-size: 30px; font-weight: 800; letter-spacing: -.02em; }
.marca p { margin: 0; color: var(--texto-suave); font-size: 14px; }

@media (max-width: 480px) {
  .cartao { padding: 28px 20px 22px; }
  .marca h1 { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) { .escudo, .check { stroke-dashoffset: 0; } }