/* Login e cadastro com o banner da plataforma à direita (partials/acesso-banner.php): o formulário na metade esquerda,
   o banner na direita, preso na altura da tela. Abaixo de 1024 px fica só o formulário. */
:where(.ol-acesso-dividido) { display: grid; grid-template-columns: minmax(0, 1fr) auto; min-height: 100vh; min-height: 100dvh; }
:where(.ol-acesso-dividido) .ol-acesso-palco { min-height: 100vh; min-height: 100dvh; box-sizing: border-box; } /* o padding não soma à altura: sem rolagem à toa */
:where(.ol-shell, .ol-page).ol-acesso-banner { position: sticky; top: 0; height: 100vh; height: 100dvh; padding: 16px 16px 16px 0; box-sizing: border-box; display: flex; justify-content: flex-end; }
/* O quadro segue a proporção do banner (960 × 1080, o corte do ADM): a arte aparece inteira. Sem largura para isso, corta
   pela direita (o texto dos banners costuma ficar à esquerda). */
.ol-acesso-banner-quadro { position: relative; height: 100%; aspect-ratio: 960 / 1080; max-width: 52vw; overflow: hidden; border-radius: 28px; background: var(--surface-2); box-shadow: 0 1px 2px var(--shadow-near), 0 24px 60px -32px var(--shadow-far); }
.ol-acesso-banner-quadro img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: left center; animation: ol-acesso-banner-entra 0.6s var(--ease) both; }
@keyframes ol-acesso-banner-entra { from { opacity: 0; transform: scale(1.02); } }
.ol-acesso-banner-marca { display: grid; align-items: end; background: radial-gradient(120% 80% at 80% 10%, color-mix(in oklab, var(--accent) 70%, transparent), transparent 60%), linear-gradient(160deg, var(--accent-fill), color-mix(in oklab, var(--accent-fill) 55%, black)); }
.ol-acesso-banner-texto { display: grid; gap: 8px; padding: 48px; color: var(--accent-fg); }
.ol-acesso-banner-texto strong { font: 700 34px/1.15 var(--font); letter-spacing: -0.02em; max-width: 14ch; }
.ol-acesso-banner-texto span { font-size: 16px; opacity: 0.85; }
@media (max-width: 1023px) {
    :where(.ol-acesso-dividido) { display: block; }
    :where(.ol-shell, .ol-page).ol-acesso-banner { display: none; }
}
@media (prefers-reduced-motion: reduce) { .ol-acesso-banner-quadro img { animation: none; } }