/* Modelo access — "Luz": claro, minimalista, formas geometricas flutuantes. Componentes em base.css. */
:root {
  --marinho: #1E1E2D; --indigo: #6366f1; --ambar: #f5b400;
  --texto: #1E1E2D; --texto-suave: #6b6f85;
  --borda: #e3e5ef;
  --campo-fundo: #f6f7fb; --campo-fundo-foco: #fff; --campo-autofill: #f6f7fb;
  --acento: var(--indigo); --acento-sombra: rgba(99, 102, 241, .18); --rotulo: #4f46e5; --trilho: #d6d8e6;
  --link: #4f46e5; --link-hover: #1E1E2D;
  --botao-fundo: linear-gradient(135deg, #1E1E2D, #2d2d4a 60%, #3b3b63); --botao-texto: #fff;
  --botao-sombra: 0 10px 26px rgba(30, 30, 45, .25); --botao-sombra-hover: 0 14px 32px rgba(30, 30, 45, .32);
  --erro-fundo: #fff1f1; --erro-borda: #ffc9c9; --erro-texto: #b42318;
  --ok-fundo: #ecfdf5; --ok-borda: #a7f3d0; --ok-texto: #047857;
  --raio-campo: 12px;
}
body { background: #f6f7fb; }

.palco { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: 1.1fr 1fr; }

/* vitrine com formas */
.vitrine { position: relative; overflow: hidden; display: flex; align-items: flex-end; padding: 56px; background: linear-gradient(160deg, #f6f7fb 0%, #eceefb 100%); }
.forma { position: absolute; border-radius: 50%; animation: flutuar var(--duracao, 20s) ease-in-out infinite alternate; will-change: transform; }
.anel { border: 16px solid rgba(99, 102, 241, .18); }
.anel-1 { width: 360px; height: 360px; left: 10%; top: 10%; --dx: 4vw; --dy: 3vh; --escala: 1.06; --duracao: 26s; }
.anel-2 { width: 160px; height: 160px; right: 12%; top: 46%; border-width: 10px; border-color: rgba(30, 30, 45, .12); --dx: -3vw; --dy: -4vh; --duracao: 19s; }
.disco-marinho { width: 220px; height: 220px; left: 42%; top: 28%; background: var(--marinho); --dx: 3vw; --dy: -3vh; --escala: 1.08; --duracao: 24s; box-shadow: 0 30px 60px rgba(30, 30, 45, .25); }
.disco-ambar { width: 110px; height: 110px; left: 30%; top: 58%; background: var(--ambar); --dx: -2vw; --dy: 2vh; --duracao: 17s; box-shadow: 0 20px 40px rgba(245, 180, 0, .35); }
.disco-indigo { width: 70px; height: 70px; right: 24%; top: 18%; background: var(--indigo); --dx: 2vw; --dy: 3vh; --duracao: 15s; opacity: .9; }
.ponto { width: 14px; height: 14px; background: var(--marinho); opacity: .35; }
.ponto-1 { left: 18%; top: 62%; --duracao: 12s; } .ponto-2 { right: 18%; top: 70%; --dx: -2vw; --duracao: 14s; }
.vitrine-texto { position: relative; z-index: 1; animation: aparecer .8s .2s ease both; }
.vitrine-texto h1 { margin: 0 0 6px; font-size: 44px; font-weight: 800; letter-spacing: -.03em; color: var(--marinho); }
.vitrine-texto p { margin: 0; font-size: 18px; color: var(--texto-suave); }

/* cartao */
.lado-form { display: flex; align-items: center; justify-content: center; padding: 40px 24px; }
.cartao { width: min(440px, 100%); background: #fff; border: 1px solid var(--borda); border-radius: 22px; padding: 36px 34px 28px; box-shadow: 0 24px 60px rgba(30, 30, 45, .10); animation: subir .6s cubic-bezier(.2, .8, .2, 1) both; }
.cartao.tremer { animation: subir .6s cubic-bezier(.2, .8, .2, 1) both, tremer .55s .7s both; }
@keyframes subir { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.cabecalho { margin-bottom: 22px; }
.eyebrow { margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--indigo); }
.cabecalho h2 { margin: 0 0 4px; font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.cabecalho .sub { margin: 0; color: var(--texto-suave); font-size: 14px; }

/* campos com linha inferior que cresce no foco */
.campo input { border-radius: 10px; }
.campo::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 2px; border-radius: 2px; background: var(--indigo); transform: scaleX(0); transition: transform .25s ease; }
.campo:focus-within::after { transform: scaleX(1); }
.campo input:focus { box-shadow: none; }

/* botao com seta */
.botao-texto::after { content: "\2192"; margin-left: 8px; display: inline-block; transition: transform .2s; }
.botao:hover .botao-texto::after { transform: translateX(4px); }
.botao.carregando .botao-texto::after { content: ""; margin: 0; }

@media (max-width: 900px) {
  .palco { grid-template-columns: 1fr; }
  .vitrine { align-items: center; justify-content: center; text-align: center; padding: 48px 24px 36px; min-height: 240px; }
  .vitrine-texto h1 { font-size: 32px; }
  /* formas afastadas do centro: o titulo e azul-marinho e sumiria em cima do disco */
  .vitrine-texto h1 { text-shadow: 0 2px 18px rgba(246, 247, 251, .95); }
  .anel-1 { width: 220px; height: 220px; left: -90px; top: -110px; } .disco-marinho { width: 110px; height: 110px; left: auto; right: -34px; top: -34px; }
  .disco-ambar { width: 70px; height: 70px; left: -16px; top: auto; bottom: -18px; } .anel-2, .disco-indigo, .ponto { display: none; }
  .lado-form { padding: 0 16px 32px; margin-top: -24px; }
}