/*
 * landing.css — la portada, primera mitad: el argumento.
 *
 * Desde el primer scroll hasta el recorrido de cuatro pasos: qué le pasa al
 * que llega, a quién le sirve esto y cómo funciona. La segunda mitad —qué
 * trae, cuánto vale y quién está detrás— vive en `landing-oferta.css`.
 *
 * El corte es por el argumento de la página y no por tamaño: primero se
 * plantea el problema y recién después se ofrece algo. Las dos mitades cargan
 * juntas y solo en la portada (ver `templates/landing.html`); la pantalla de
 * ingreso, que comparte barra y pie, no baja ninguna de las dos.
 */

/* --- Portada ---------------------------------------------------------------
 *
 * Losa de azul hondo a sangre, con la promesa apoyada abajo a la izquierda y
 * una trama de puntos moviéndose detrás. La trama es un campo de plasma
 * tramado (dither ordenado de Bayer) que dibuja `landing.js` sobre un canvas
 * de baja resolución: son dos colores y un patrón de puntos, no un degradado,
 * así que se lee como impresión y no como fondo de plantilla.
 *
 * El texto va sobre un velo que oscurece el lado izquierdo: la trama tiene
 * zonas claras y sin velo el titular perdería contraste al pasar una. */

.portada {
    position: relative;
    isolation: isolate;
    display: flex;
    /* El contenido ocupa la losa entera y reparte el aire adentro (ver
     * `.portada .publico__contenedor`), en vez de apoyarse en un borde. */
    align-items: stretch;
    min-height: 60dvh;
    /* Simétrico arriba y abajo: mientras el bloque estuvo apoyado en el borde
     * inferior, el relleno de abajo era menor a propósito. Centrado, esa
     * diferencia se lee como un centrado mal hecho. */
    padding: 3.5rem 0;
    background: var(--color-azul-hondo);
    color: var(--color-crema);
    overflow: hidden;
}

.portada::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%
    );
}

/* Un solo bloque centrado en la losa: titular, bajada, carrusel y botones
 * separados por un ritmo fijo. Antes cada tramo se estiraba con `margin-top:
 * auto` y en pantalla alta el aire sobrante abría zanjas entre las partes;
 * el aire que sobra ahora queda arriba y abajo del bloque, no adentro. */
.portada .publico__contenedor {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.portada__titulo {
    margin: 0;
    font-size: clamp(2.1rem, 5.6vw, 3.5rem);
    font-weight: 600;
    line-height: 1.06;
    letter-spacing: -0.02em;
    max-width: 17ch;
}

/* Cada línea es su propia ventana: el reveal sube el texto desde abajo del
 * borde. El relleno inferior es la holgura de las colas de la "g"; sin él,
 * `overflow: hidden` las corta. */
.portada__linea {
    display: block;
    overflow: hidden;
    padding-bottom: 0.14em;
    margin-bottom: -0.14em;
}

.portada__linea > span { display: block; }

.portada__bajada {
    margin: var(--espacio) 0 0;
    font-size: 1.125rem;
    color: rgba(242, 237, 228, 0.85);
    max-width: 44ch;
}

/* Los tres puntos del hero: viñeta de guion, no de disco. El disco es el
 * default del navegador y se lee como lista de sistema; el guion es el mismo
 * signo que usa la prosa de la página. */
.portada__puntos {
    margin: var(--espacio) 0 0;
    padding: 0;
    max-width: 46ch;
    list-style: none;
    color: rgba(242, 237, 228, 0.9);
}

.portada__puntos li {
    position: relative;
    padding-left: 1.1rem;
    margin-bottom: 0.4rem;
}

.portada__puntos li::before {
    content: "—";
    position: absolute;
    left: 0;
    color: rgba(242, 237, 228, 0.55);
}

/* Modo carrusel: las viñetas ocupan la MISMA celda y se turnan, entrando y
 * saliendo de lado. La clase la pone `landing.js`, nunca el CSS: sin JS (o con
 * movimiento reducido) la lista se ve completa y apilada, como cualquier lista.
 * Al compartir celda, la fila mide lo que la viñeta más alta, así que el bloque
 * no cambia de alto al cambiar de mensaje y los botones de abajo no se mueven.
 *
 * Acá el mensaje sube de rango: más grande que la bajada, en crema pleno y
 * centrado en su propia caja. Es la única promesa que se está leyendo en ese
 * segundo, así que deja de ser una viñeta de lista y pasa a ser la línea que
 * compite con el titular. Por eso también se le saca el guion: una lista
 * centrada con marca de viñeta se lee como un error de maqueta.
 *
 * `overflow: hidden` es lo que convierte el desplazamiento en carrusel: la
 * viñeta que sale se corta contra el borde en vez de irse difuminando por
 * encima del texto vecino. El relleno inferior es la holgura de las colas de la
 * "g", que ese mismo recorte se comería. */
.portada__puntos--rotando {
    display: grid;
    overflow: hidden;
    /* Ancho para que cada promesa entre en UNA línea en escritorio: la más
     * larga son 68 caracteres. En pantalla angosta el tope no alcanza a
     * mandar, la promesa parte en dos y `text-wrap: balance` la equilibra. */
    max-width: 66ch;
    padding-bottom: 0.16em;
    /* Centrado en el ancho de la página, no bajo la columna de texto: el
     * bloque es su propia franja y por eso se despega del titular y de la
     * bajada, que son de alineación izquierda. Es a propósito — el carrusel
     * es lo único que se mueve en la portada y tiene su propio eje. */
    margin-inline: auto;
    margin-bottom: -0.16em;
    /* Separación fija de la bajada: el carrusel es la línea que sigue, no un
     * bloque aparte al fondo de la losa. */
    padding-top: var(--espacio-lg);
    text-align: center;
    /* Sin esto la primera línea llena el ancho y solo la segunda se ve
     * centrada, que es exactamente cómo se ve una sangría mal puesta.
     * Equilibrando las líneas, el centrado se lee como decisión. */
    text-wrap: balance;
    font-size: clamp(1.2rem, 2.7vw, 1.65rem);
    font-weight: 500;
    line-height: 1.28;
    letter-spacing: -0.01em;
    color: var(--color-crema);
}

.portada__puntos--rotando li {
    grid-area: 1 / 1;
    padding-left: 0;
    margin-bottom: 0;
}

/* Va después del guion a propósito: las dos reglas pesan lo mismo, así que
 * la que manda es la última escrita. Si esto sube, vuelve a aparecer el
 * guion en el carrusel. */
.portada__puntos--rotando li::before { content: none; }

/* El microcopy es el pie de los botones: se centra con ellos, no con el
 * titular. */
.portada__microcopy {
    margin: 0.75rem 0 0;
    text-align: center;
    font-size: 0.85rem;
    color: rgba(242, 237, 228, 0.7);
}

/* Los dos botones, centrados bajo el carrusel y del MISMO ancho aunque digan
 * cosas de distinto largo. La reja lo hace sin números a mano: `fit-content`
 * mide la caja por el botón más ancho y `1fr` reparte ese ancho en partes
 * iguales, así que un botón corto queda tan ancho como uno largo y sigue
 * calzando si mañana cambia el texto. Con flex habría que fijar un
 * `min-width` inventado que se rompe al primer cambio de copy. */
.portada__acciones {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: var(--espacio-sm);
    width: fit-content;
    margin: 0 auto;
    padding-top: var(--espacio-lg);
}

/* Bajo ~26rem los dos botones lado a lado se salen del contenedor. Apilados y
 * a todo el ancho quedan además más fáciles de tocar con el pulgar. */
@media (max-width: 26rem) {
    .portada__acciones {
        grid-auto-flow: row;
        width: 100%;
    }
}

@media (min-width: 56rem) {
    /* Alta, pero no tanto como para que el bloque centrado quede nadando: con
     * el contenido ya junto, 82dvh dejaba media losa vacía. */
    .portada { min-height: 72dvh; padding: 5rem 0; }
}

/* --- Sección genérica ------------------------------------------------------ */

/* La barra pegada mide 68px y tapaba la primera línea de la sección a la que
 * apuntaba el enlace del menú. Va sobre todas las anclas, no sobre una: el
 * problema es la barra, no la sección. */
main > section[id] { scroll-margin-top: 4.5rem; }

.seccion {
    padding: 3rem 0;
    border-top: 1px solid var(--color-filete);
}

/* Campo gris. Existe para una sola cosa: cortar la corrida de secciones
 * blancas seguidas sin usar tinta, que en el cuerpo de la página está
 * reservada a la banda del medio. Al tener fondo propio no necesita el filete
 * de arriba — el cambio de campo ya es el corte. */
.seccion--campo {
    background: var(--color-fondo);
    border-top: 0;
}

.seccion__titulo {
    margin: 0 0 var(--espacio);
    font-size: clamp(1.4rem, 3vw, 1.9rem);
    font-weight: 600;
    line-height: 1.15;
    color: var(--color-primario);
    max-width: 22ch;
}

.seccion__cuerpo { max-width: 62ch; }

.seccion__cuerpo p { margin: 0 0 var(--espacio); }

.rotulo {
    display: block;
    margin: 0 0 var(--espacio-sm);
    font-family: var(--fuente-mono);
    font-size: 0.75rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-texto-suave);
}

/* --- Problema: dos columnas de prosa -------------------------------------- */

@media (min-width: 56rem) {
    .problema__cuerpo {
        max-width: none;
        columns: 2;
        column-gap: 3rem;
    }
    .problema__cuerpo p { break-inside: avoid; }
}

/* --- Oficios: la fotografía del ICP multi-rubro --------------------------- */

.oficios {
    display: grid;
    gap: var(--espacio);
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
}

.oficio { margin: 0; }

.oficio__foto {
    display: block;
    width: 100%;
    height: 13rem;
    object-fit: cover;
    border-radius: var(--radio);
}

.oficio__nombre {
    margin: 0.6rem 0 0.2rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-primario);
}

.oficio__detalle { margin: 0; color: var(--color-texto-suave); font-size: 0.95rem; }

/* La pregunta concreta es la que hace que el visitante se reconozca: va en el
   color del texto principal para que pese más que la enumeración de oficios. */
.oficio__pregunta {
    margin: 0.4rem 0 0;
    font-size: 0.95rem;
    color: var(--color-texto);
}

/* --- Pasos ---------------------------------------------------------------- */

.pasos { margin: 0; padding: 0; list-style: none; counter-reset: paso; }

.paso {
    display: grid;
    gap: 0.2rem var(--espacio);
    padding: var(--espacio) 0;
    border-top: 1px solid var(--color-filete);
    counter-increment: paso;
}

.paso:first-child { border-top: 0; }

.paso::before {
    content: counter(paso, decimal-leading-zero);
    font-family: var(--fuente-mono);
    font-size: 1.6rem;
    line-height: 1;
    color: var(--color-primario);
}

.paso__titulo { margin: 0; font-size: 1.15rem; font-weight: 600; }

.paso__texto { margin: 0.3rem 0 0; color: var(--color-texto); max-width: 60ch; }

@media (min-width: 44rem) {
    .paso { grid-template-columns: 4rem 1fr; align-items: start; }
    .paso::before { padding-top: 0.15rem; }
}

/* --- El panel del recorrido -----------------------------------------------
 * Un solo dibujo al lado de los cuatro pasos, que cambia de escena según el
 * paso que se está leyendo. Cuatro demos animándose a la vez compiten con el
 * texto y ninguna se mira entera; así siempre hay una sola cosa en
 * movimiento, y es la que corresponde.
 *
 * El panel va PRIMERO en el marcado. En celular eso lo deja pegado arriba con
 * los pasos corriendo por debajo, que es la única forma de que el dibujo y su
 * texto se vean juntos en una sola columna. En escritorio el CSS lo manda a la
 * segunda columna y ahí queda fijo mientras el recorrido pasa por delante. */

.pasos__reja { position: relative; display: grid; gap: var(--espacio); }

.pasos__panel {
    position: sticky;
    /* La barra pública también es sticky y mide 68 px: por debajo de eso el
     * panel se metería detrás de ella. */
    top: 4.75rem;
    z-index: 1;
    display: grid;
    /* El marco es el mismo de `.plan`: un filete y el radio del sistema, nada
     * más. Sin él las escenas flotan sueltas en el blanco de la página y no se
     * leen como una pantalla, que es lo que son.
     *
     * Por dentro va blanco y no el gris de `.plan`: los dibujos están hechos de
     * cajas con filete gris, y sobre un campo gris esas cajas se pierden. Acá
     * el marco es solo la línea. */
    padding: var(--espacio);
    background: var(--color-superficie);
    border: 1px solid var(--color-filete);
    border-radius: var(--radio);
}

/* El hilo solo tiene sentido con los pasos AL LADO del panel. En celular están
 * debajo, no al lado, y no hay canaleta por donde tenderlo. */
.pasos__hilo { display: none; }

@media (min-width: 64rem) {
    /* El texto se corta en 60ch (~500 px) y el número ocupa 4rem: con el
     * contenedor de 1120 px quedan ~300 px libres, que es lo que pide el
     * panel. Bajo este ancho no caben lado a lado sin ahogar el párrafo.
     *
     * La canaleta es de 3rem y no de 2: por ahí pasa el hilo, y en 32 px no
     * caben el punto, la curva y la flecha sin quedar amontonados. Los 16 px
     * extra salen de la holgura de la columna de texto, que ya está topada en
     * 60ch y no reflowea. */
    .pasos__reja {
        grid-template-columns: minmax(0, 1fr) 20rem;
        gap: 3rem;
        align-items: start;
    }

    .pasos__panel {
        /* Repetido a propósito: NO poner `position: relative` acá. Pisa el
         * `sticky` de la regla base —misma especificidad, gana esta— y el panel
         * se va con el scroll sin que nada avise. */
        position: sticky;
        grid-column: 2;
        grid-row: 1;
        /* Centrado en la ventana, no pegado arriba. El paso activo es el que
         * cruza la mitad de la pantalla (ver `mandarPanel`), así que centrando
         * el panel los dos quedan a la misma altura y el hilo entre ellos sale
         * casi horizontal. Pegado arriba, en una ventana alta el paso quedaba
         * 200 px más abajo y el hilo era una horquilla.
         *
         * El 6.2rem es la mitad del alto del panel: 1rem de relleno arriba y
         * abajo más el dibujo, que a 288 px de ancho mide 165. */
        top: calc(50vh - 6.2rem);
    }

    .pasos { grid-column: 1; grid-row: 1; }

    /* Cubre la reja entera y no estorba: las coordenadas del hilo se miden
     * contra esta caja. `overflow: visible` porque el punto de arranque queda
     * justo en el borde y con recorte se vería a medias. */
    .pasos__hilo {
        position: absolute;
        inset: 0;
        display: block;
        width: 100%;
        height: 100%;
        overflow: visible;
        pointer-events: none;
    }

    .hilo__curva,
    .hilo__punta {
        fill: none;
        stroke: var(--color-primario);
        stroke-width: 1.4;
        stroke-linecap: butt;
        stroke-linejoin: miter;
    }

    /* La curva va más apagada que sus dos extremos: lo que tiene que leerse es
     * de dónde sale y adónde llega, no el trazo del medio. */
    .hilo__curva { opacity: 0.4; }
    .hilo__punto { fill: var(--color-primario); }
}

/* El hilo es decorativo y su gracia es seguir el scroll cuadro a cuadro. Sin
 * eso apuntaría al lugar equivocado apenas te muevas, así que con movimiento
 * reducido no se dibuja: el panel cambiando de escena ya dice lo mismo. */
@media (prefers-reduced-motion: reduce) {
    .pasos__hilo { display: none; }
}

/* Las cuatro escenas viven apiladas en la misma celda y se turnan por
 * opacidad: nada entra ni sale del layout, así que el cambio no mueve un solo
 * píxel de la página. La transición la hace el CSS y no GSAP para que el panel
 * siga funcionando aunque el JS no cargue. */
.escena {
    grid-area: 1 / 1;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.45s ease;
}

.escena--activa { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    .escena { transition: none; }
}

.escena svg { display: block; width: 100%; height: auto; }

/* Dibujo plano, dos tintas y nada más: los mismos trazos de los íconos de los
 * módulos, para que se lea como la misma mano. Sin relleno de color, sin
 * sombra, sin degradado (marca-identidad.md prohíbe la estética de IA).
 *
 * Las cajas y los filetes son la estructura y van en gris. Lo que se pinta de
 * azul es lo que el usuario mandó o lo que el sistema resolvió: esa es toda la
 * jerarquía que estas escenas necesitan.
 *
 * Las medidas van en unidades del viewBox, no en px: el SVG escala con la
 * columna y el dibujo no se recalcula nunca. */
.d-caja { fill: none; stroke: var(--color-filete); stroke-width: 1.2; }
.d-tinta { fill: var(--color-primario); }
/* Los filetes que barren son <rect>, no <line>: `transform-box: fill-box` sobre
 * una línea sin caja propia no tiene origen del que agarrarse, y el barrido
 * salía desde cualquier parte. */
.d-regla {
    fill: var(--color-filete);
    transform-box: fill-box;
    transform-origin: left center;
}
/* Los tildes se dibujan de un trazo (stroke-dashoffset), no aparecen: es el
 * gesto de "quedó hecho" y es lo único que se traza en toda la página. */
.d-marca,
.d-tilde {
    fill: none;
    stroke: var(--color-primario);
    stroke-width: 1.6;
    stroke-linecap: square;
    stroke-linejoin: miter;
}
.d-tilde { stroke-width: 1.3; }
.e3-punto { fill: var(--color-texto-suave); }

/* Todo el texto de las escenas va en mono: es dato de pantalla, no prosa. */
.escena text { font-family: var(--fuente-mono); }
.d-texto { fill: var(--color-texto); font-size: 10px; }
.d-suave { fill: var(--color-texto-suave); font-size: 9px; }
.d-clara { fill: var(--color-crema); font-size: 10px; }
.d-cifra { fill: var(--color-crema); font-size: 13px; }
.d-cuenta { fill: var(--color-primario); font-size: 15px; }
/* Las versalitas van escritas en mayúscula en el marcado: `text-transform` no
 * es de fiar en <text> de SVG. */
.d-rotulo { fill: var(--color-texto-suave); font-size: 8px; letter-spacing: 0.08em; }

/* El pie del recorrido va en gris suave y sin número: no es un paso más, es
 * quién sostiene los cuatro de arriba. */
.pasos__pie {
    margin: var(--espacio) 0 0;
    max-width: 60ch;
    color: var(--color-texto-suave);
    font-size: 0.95rem;
}