/* Modelo access_2 — "Painel": painel da marca com gradiente animado e constelacao + formulario claro. Componentes em base.css. */
:root {
  --marinho: #1E1E2D; --indigo: #6366f1;
  --texto: #1E1E2D; --texto-suave: #6b6f85;
  --borda: #e3e5ef;
  --campo-fundo: #f3f4f9; --campo-fundo-foco: #fff; --campo-autofill: #f3f4f9;
  --acento: var(--indigo); --acento-sombra: rgba(99, 102, 241, .2); --rotulo: #4f46e5; --trilho: #d6d8e6;
  --link: #4f46e5; --link-hover: #1E1E2D;
  --botao-fundo: linear-gradient(135deg, #4f46e5, #6366f1 60%, #818cf8); --botao-texto: #fff;
  --botao-sombra: 0 10px 28px rgba(79, 70, 229, .3); --botao-sombra-hover: 0 14px 34px rgba(79, 70, 229, .4);
  --erro-fundo: #fff1f1; --erro-borda: #ffc9c9; --erro-texto: #b42318;
  --ok-fundo: #ecfdf5; --ok-borda: #a7f3d0; --ok-texto: #047857;
  --raio-campo: 12px;
}
body { background: #f7f8fc; }

.palco { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 45%) minmax(0, 1fr); }

/* painel da marca */
.painel-marca {
  position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; padding: 56px 52px; color: #fff;
  background: linear-gradient(135deg, #1E1E2D 0%, #312e81 45%, #1e3a8a 70%, #0f766e 100%); background-size: 300% 300%;
  animation: gradiente 16s ease-in-out infinite alternate;
}
@keyframes gradiente { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
.constelacao { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; opacity: .9; }
.constelacao .pontos circle { animation: piscar 4s ease-in-out infinite; transform-origin: center; }
.constelacao .pontos circle:nth-child(2n) { animation-delay: 1.3s; }
.constelacao .pontos circle:nth-child(3n) { animation-delay: 2.1s; }
.constelacao .linhas { stroke-dasharray: 400; stroke-dashoffset: 400; animation: tracar 3s .3s ease forwards; }
@keyframes piscar { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
@keyframes tracar { to { stroke-dashoffset: 0; } }
.marca { position: relative; z-index: 2; max-width: 420px; animation: aparecer .8s .2s ease both; }
/* halo escuro atras do texto: os nos brancos da constelacao nao se fundem com as letras */
.marca::before { content: ""; position: absolute; inset: -40px -60px; z-index: -1; border-radius: 40px; background: radial-gradient(closest-side, rgba(22, 22, 48, .85), rgba(22, 22, 48, 0)); }
.marca h1 { margin: 0 0 8px; font-size: 42px; font-weight: 800; letter-spacing: -.03em; }
.marca .sub { margin: 0 0 32px; font-size: 18px; color: rgba(255, 255, 255, .78); }
.destaques { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.destaques li { display: flex; align-items: center; gap: 12px; font-size: 15px; color: rgba(255, 255, 255, .9); }
.destaques svg { width: 22px; height: 22px; flex: none; padding: 9px; box-sizing: content-box; border-radius: 12px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .18); }

/* formulario */
.lado-form { display: flex; align-items: center; justify-content: center; padding: 40px 24px; }
.cartao { width: min(420px, 100%); 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: 24px; }
.cabecalho h2 { margin: 0 0 4px; font-size: 30px; font-weight: 800; letter-spacing: -.02em; }
.cabecalho .sub { margin: 0; color: var(--texto-suave); font-size: 14px; }
.campo input { background: #fff; }

@media (max-width: 900px) {
  .palco { grid-template-columns: 1fr; }
  .painel-marca { padding: 40px 24px 32px; min-height: 0; }
  .marca { max-width: none; text-align: center; }
  .marca h1 { font-size: 30px; } .marca .sub { margin-bottom: 0; font-size: 15px; }
  .destaques { display: none; }
  .lado-form { padding: 28px 16px 32px; }
}