/* Modelo access_4 — escuro, fundo com manchas animadas, cartao de vidro. Componentes em base.css. */
:root {
  --fundo: #1E1E2D; --fundo-2: #14141f;
  --indigo: #6366f1; --indigo-escuro: #4f46e5; --petroleo: #0ea5a4; --ambar: #f5b400;
  --texto: #eef0f6; --texto-suave: rgba(238, 240, 246, .68);
  --borda: rgba(255, 255, 255, .12);
  --campo-fundo: rgba(255, 255, 255, .05); --campo-fundo-foco: rgba(255, 255, 255, .08); --campo-autofill: #2a2a3f;
  --acento: rgba(99, 102, 241, .9); --acento-sombra: rgba(99, 102, 241, .22); --rotulo: #a5b4fc; --trilho: rgba(255, 255, 255, .16);
  --link: #c7d2fe; --link-hover: #fff;
  --botao-fundo: linear-gradient(135deg, var(--indigo-escuro), var(--indigo) 55%, var(--petroleo)); --botao-texto: #fff;
  --botao-sombra: 0 10px 30px rgba(79, 70, 229, .35); --botao-sombra-hover: 0 14px 36px rgba(79, 70, 229, .45);
  --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: 20px;
}
body { background: var(--fundo); }

.fundo { position: fixed; inset: 0; overflow: hidden; z-index: 0; background: radial-gradient(120% 90% at 50% -10%, #2a2a44 0%, var(--fundo) 55%, var(--fundo-2) 100%); }
.mancha { position: absolute; width: 46vw; height: 46vw; min-width: 320px; min-height: 320px; border-radius: 50%; filter: blur(90px); opacity: .5; will-change: transform; animation: flutuar var(--duracao, 22s) ease-in-out infinite alternate; }
.mancha-1 { left: -12vw; top: -10vh; background: var(--indigo); --dx: 10vw; --dy: 8vh; --duracao: 24s; }
.mancha-2 { right: -14vw; top: 20vh; background: var(--petroleo); --dx: -9vw; --dy: -10vh; --duracao: 28s; opacity: .38; }
.mancha-3 { left: 30vw; bottom: -22vh; background: var(--ambar); --dx: 8vw; --dy: -6vh; --duracao: 32s; opacity: .14; }
.grade { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask-image: radial-gradient(70% 60% at 50% 45%, #000 20%, transparent 100%); mask-image: radial-gradient(70% 60% at 50% 45%, #000 20%, transparent 100%); }

.palco { position: relative; z-index: 1; min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 28px 16px; }
.cartao {
  position: relative; width: min(440px, 100%);
  background: rgba(255, 255, 255, .06); -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid var(--borda); border-radius: var(--raio); padding: 36px 32px 28px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .08);
  animation: entrar .7s cubic-bezier(.2, .8, .2, 1) both;
}
.cartao::before { content: ""; position: absolute; inset: -1px; border-radius: calc(var(--raio) + 1px); padding: 1px; pointer-events: none; background: linear-gradient(135deg, rgba(99, 102, 241, .65), rgba(14, 165, 164, .25) 50%, rgba(245, 180, 0, .4)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.cartao.tremer { animation: entrar .7s cubic-bezier(.2, .8, .2, 1) both, tremer .55s .75s both; }
@keyframes entrar { from { opacity: 0; transform: translateY(26px) scale(.98); } to { opacity: 1; transform: none; } }

.marca { text-align: center; margin-bottom: 26px; }
.marca-icone { width: 60px; height: 60px; color: #a5b4fc; filter: drop-shadow(0 6px 18px rgba(99, 102, 241, .45)); }
.marca-rota { stroke-dasharray: 80; stroke-dashoffset: 80; animation: desenhar 1.4s .35s ease forwards; }
.marca-pino { stroke-dasharray: 90; stroke-dashoffset: 90; animation: desenhar 1s 1.1s ease forwards; }
.marca-ponto { opacity: 0; animation: aparecer .4s 1.5s ease forwards; }
@keyframes desenhar { to { stroke-dashoffset: 0; } }
.marca h1 { margin: 10px 0 2px; font-size: 27px; 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; border-radius: 16px; }
  .marca-icone { width: 52px; height: 52px; }
  .marca h1 { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) { .marca-rota, .marca-pino { stroke-dashoffset: 0; } .marca-ponto { opacity: 1; } }