/*
 * publico.css — el envoltorio de las pantallas públicas: landing e ingreso.
 *
 * Era la parte de `landing.css` que las DOS pantallas necesitan: los tokens
 * del territorio público (azul hondo, filete, ancho), la barra de arriba, el
 * pie y el formulario de acceso.
 *
 * El corte tiene una razón medible además del techo de líneas: la pantalla de
 * ingreso cargaba las ~765 líneas de la portada completa —el recorrido
 * animado, los planes, las preguntas— para dibujar un formulario de dos
 * campos. Ahora baja solo esto.
 *
 * Depende de `base.css` y `componentes.css`, que cargan antes: los tokens, la
 * tipografía, el anillo de foco y los controles base salen de ahí y no se
 * redefinen. Acá va solo lo que no existe dentro de la app.
 */

:root {
    /* Filete sobre blanco: gris frío de la misma familia del texto. Es
     * decorativo (no es borde de control), así que su contraste no cae bajo
     * el criterio 1.4.11. */
    --color-filete: #e3e7ed;

    /* --color-azul-hondo vive en `base.css`: ahora también lo usa la lateral
     * de la app, y `base.css` es lo que cargan las dos zonas. */
    --color-filete-oscuro: rgba(242, 237, 228, 0.18);

    --ancho-publico: 1120px;
}

.publico {
    background: var(--color-superficie);
}

/* El único movimiento que no depende de GSAP: la respuesta al dedo y al
 * cursor. Va acá y no en app.css porque la app no lo necesita. */
@media (prefers-reduced-motion: no-preference) {
    .publico .boton {
        transition: background-color 0.18s ease, transform 0.12s ease;
    }
    .publico .boton:active { transform: translateY(1px); }
}

.publico__contenedor {
    width: 100%;
    max-width: var(--ancho-publico);
    margin: 0 auto;
    padding: 0 var(--espacio);
}

/* .trama vive en `base.css`: ahora también la usa la lateral de la app, y
 * `base.css` es lo que cargan las dos zonas (esta y `base_publico.html`). */

/* --- Barra pública --------------------------------------------------------
 * Una sola línea en escritorio, alto contenido. Acá sí va el lockup completo
 * (marca-frontend.md §5.5 lo reserva para login, landing y exportes). */

/* Pegada arriba: la acción principal ("Entrar") queda a un clic en cualquier
 * punto del scroll. El filete va siempre puesto y no atado a un gatillo de
 * scroll: sin JS la barra igual se despega del contenido que pasa debajo. */
.barra-publica {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--color-superficie);
    border-bottom: 1px solid var(--color-filete);
}

.barra-publica__fila {
    display: flex;
    align-items: center;
    gap: var(--espacio);
    min-height: 68px;
}

.barra-publica__lockup { display: block; width: 150px; height: auto; }

.barra-publica__nav {
    display: none;
    align-items: center;
    gap: 0.25rem;
    margin-left: auto;
}

.barra-publica__enlace {
    display: inline-flex;
    align-items: center;
    min-height: var(--toque-minimo);
    padding: 0 0.75rem;
    color: var(--color-texto);
    text-decoration: none;
}

.barra-publica__enlace:hover { text-decoration: underline; }

.barra-publica__acceso { margin-left: auto; }

@media (min-width: 52rem) {
    .barra-publica__nav { display: flex; }
    /* Con el menú visible, es el menú el que empuja hacia la derecha; el
     * botón solo se separa de él. La regla vive dentro de la media query
     * porque el <nav> sigue en el DOM cuando está oculto, y afuera le
     * quitaba el `margin-left: auto` al botón también en celular. */
    .barra-publica__acceso { margin-left: 0.5rem; }
}

/* --- Pie ------------------------------------------------------------------- */

.pie { padding: var(--espacio-lg) 0 2.5rem; }

.pie__reja {
    display: grid;
    gap: var(--espacio-lg);
    padding-top: var(--espacio-lg);
    border-top: 1px solid var(--color-filete-oscuro);
}

.pie__lockup { display: block; width: 140px; height: auto; }

.pie__lema {
    margin: var(--espacio-sm) 0 0;
    color: rgba(242, 237, 228, 0.72);
    font-size: 0.95rem;
}

.pie__nav {
    display: grid;
    gap: 0.1rem;
    align-content: start;
}

.pie__enlace {
    display: inline-flex;
    align-items: center;
    min-height: var(--toque-minimo);
    color: var(--color-crema);
    text-decoration: none;
}

.pie__enlace:hover { text-decoration: underline; }

.pie__base {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-sm) var(--espacio);
    margin-top: var(--espacio-lg);
    padding-top: var(--espacio);
    border-top: 1px solid var(--color-filete-oscuro);
}

.pie__nota {
    margin: 0;
    font-family: var(--fuente-mono);
    font-size: 0.8rem;
    color: rgba(242, 237, 228, 0.6);
}

.pie__nota + .pie__nota { margin-left: auto; }

@media (min-width: 44rem) {
    .pie__reja { grid-template-columns: 1fr auto; align-items: start; }
    .pie__nav { grid-auto-flow: column; gap: var(--espacio); }
}

/* --- Acceso (login) --------------------------------------------------------
 * Mismo par que la landing: campo blanco para el formulario y losa de azul
 * hondo para la marca, así entrar no se siente como salir del sitio. La marca
 * va en lockup completo, no en badge. */

.acceso {
    display: grid;
    min-height: 100dvh;
}

.acceso__marca {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    padding: var(--espacio-lg);
    background: var(--color-azul-hondo);
    color: var(--color-crema);
    /* La losa lleva la trama de la portada. `isolation` encierra los z-index
     * negativos del canvas y del velo: sin esto se irían detrás del fondo de
     * la página en vez de quedarse detrás del texto de este panel. */
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

/* El mismo velo diagonal de la portada, y por la misma razón: el texto vive
 * pegado al borde izquierdo (la frase corta a 18ch) y el velo lo protege ahí,
 * mientras destapa la trama hacia la derecha. Un velo plano deja el panel
 * parejo y la trama se lee como ruido en vez de como impresión. */
.acceso__marca::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
        100deg,
        rgba(15, 37, 55, 0.94) 0%,
        rgba(15, 37, 55, 0.86) 42%,
        rgba(15, 37, 55, 0.35) 100%
    );
}

.acceso__lockup { display: block; width: 190px; height: auto; }

.acceso__frase {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.2;
    max-width: 18ch;
}

.acceso__pie { margin: 0; font-family: var(--fuente-mono); font-size: 0.8rem; opacity: 0.85; }

.acceso__panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--espacio-lg) var(--espacio);
}

.acceso__caja { width: 100%; max-width: 24rem; margin: 0 auto; }

.acceso__lockup-movil { display: block; width: 150px; height: auto; margin-bottom: var(--espacio-lg); }

.acceso__titulo { margin: 0 0 var(--espacio-sm); font-size: 1.4rem; }

.acceso__volver { display: inline-block; margin-top: var(--espacio-lg); font-size: 0.95rem; }

.acceso__enviar { width: 100%; }

@media (min-width: 56rem) {
    .acceso { grid-template-columns: 0.9fr 1.1fr; }
    .acceso__marca { display: flex; }
    .acceso__lockup-movil { display: none; }
}