/* Vozeria · estrutura das telas do app (início, perfis, editor). Depende de tokens.css e componentes.css.
   O painel ao vivo tem estrutura própria (topo de transmissão); estas telas dividem a mesma navegação. */

body { min-height: 100vh; }

/* navegação: onde estou e para onde posso ir. O ponto lima marca a página atual. */
.a-nav { position: sticky; top: 0; z-index: 20; background: var(--fundo); }
.a-nav .vz-marca { margin-right: var(--e-3); }
.a-nav .vz-marca svg { width: 28px; height: 28px; }
/* o painel só aparece na navegação quando há uma análise para abrir; o ponto vermelho diz que está no ar */
.a-nav-painel { display: inline-flex !important; align-items: center; gap: 7px; }
.a-nav-painel i { width: 7px; height: 7px; border-radius: 50%; background: var(--ao-vivo); animation: vz-pulso 1.6s ease-in-out infinite; }

/* página de leitura: uma coluna com medida confortável */
.a-pagina { max-width: 1080px; margin: 0 auto; padding: var(--e-7) var(--e-5) var(--e-8); }
.a-estreita { max-width: 680px; }
.a-cab { display: flex; align-items: end; justify-content: space-between; gap: var(--e-5); flex-wrap: wrap; margin-bottom: var(--e-6); }
.a-cab h1 { margin: 0; font: var(--t-titulo-1); letter-spacing: -.025em; }
.a-cab p { margin: var(--e-2) 0 0; color: var(--texto-2); max-width: 60ch; }

.a-link { display: inline-flex; align-items: center; gap: 4px; font: var(--t-rotulo); color: var(--texto-2); text-decoration: none; }
.a-link:hover { color: var(--texto); }
.a-link .vz-icone { width: 16px; height: 16px; }

@media (max-width: 720px) {
  .a-nav { gap: var(--e-4); padding: 0 var(--e-4); }
  .a-nav .vz-marca span { display: none; }
  .a-pagina { padding: var(--e-5) var(--e-4) var(--e-7); }
  .a-cab h1 { font: var(--t-titulo-2); letter-spacing: -.02em; }
}
@media (prefers-reduced-motion: reduce) { .a-nav-painel i { animation: none; } }

/* acesso (entrar, criar senha): uma tarefa só, no centro. A marca no topo é a única decoração. */
.a-acesso { min-height: 100vh; display: grid; place-items: center; padding: var(--e-6) var(--e-4); }
.a-acesso-caixa { width: 100%; max-width: 380px; display: grid; gap: var(--e-6); }
.a-acesso .vz-marca { justify-self: start; }
.a-acesso .vz-marca svg { width: 32px; height: 32px; }
.a-acesso h1 { margin: 0; font: var(--t-titulo-2); letter-spacing: -.02em; }
.a-acesso h1 + p { margin: var(--e-2) 0 0; color: var(--texto-2); }
.a-acesso form { display: grid; gap: var(--e-5); }
.a-acesso .vz-input { height: 44px; }
.a-acesso .vz-btn--primario { height: 44px; width: 100%; justify-content: center; }
.a-acesso-rodape { display: flex; justify-content: space-between; gap: var(--e-4); flex-wrap: wrap; font-size: .875rem; color: var(--texto-3); }
.a-acesso-rodape button { all: unset; cursor: pointer; font: var(--t-rotulo); color: var(--texto-2); }
.a-acesso-rodape button:hover, .a-acesso-rodape button:focus-visible { color: var(--texto); text-decoration: underline; }