1 · Tarjeta sobre fondo
La pantalla de cis-auth (Authentik): .acceso-escena lleva la imagen en style="background-image" y un velo fijo; la tarjeta .acceso va centrada. El lockup y el acento salen de data-brand.
2 · Portada dividida
Para las entradas públicas (usaia.cl, indieweb.cl, cuenta): .acceso-portada pone el formulario sobre papel a la izquierda y la imagen a la derecha; .acceso-portada--invertida cambia el orden. Dentro del panel la tarjeta pierde borde y relleno. Aquí con data-brand="usaia" en la sección.
3 · Pop-up sobre el sitio
El sitio ya cargó su esqueleto (admin, drive, claudia) y el login aparece como tarjeta sobre .acceso-velo. En una página real el velo es position: fixed; .acceso-velo--local lo ancla al contenedor de esta demo. Cada botón manda al flujo OIDC y vuelve. Con data-brand="cochid".
4 · Embebida en el cuerpo del sitio
Misma tarjeta sin velo: la barra y el menú siguen visibles y .acceso--embebida centra el formulario en el área de contenido. Sirve cuando el usuario llega por un enlace profundo. Con data-brand="periodismo2".
