/* =========================================================================
   CITEM — Home · Overrides de página
   Copy source: campus_dc/docs/branding/POSITIONING.md (SSoT · ADR-044)

   La home es hero split + marquee de banderas y, bajo las banderas, las
   secciones que explican el producto. El chasis (.hero-viewport /
   .hero-section / .hero-main / .hero-aside), el marquee y .about-section /
   .pillars-* viven en global.css porque son patrones de marca compartidos.
   Aquí solo queda lo que es exclusivo de esta página.
   ========================================================================= */

/* =======================================================================
   HERO IZQUIERDO — Wordmark
   Es el <h1> de la home: la página trata de CITEM, no de un producto.
   ======================================================================= */
.hero-wordmark {
    font-size: var(--text-hero);
    font-family: var(--font-heading);
    font-weight: 900;
    color: var(--c-indigo);
    line-height: 0.85;
    letter-spacing: var(--letter-spacing-title);
    text-transform: uppercase;
    margin-bottom: var(--spacing-md);
}

/* =======================================================================
   HERO DERECHO — Captación
   ======================================================================= */
.hero-form-title {
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    font-family: var(--font-heading);
    font-weight: 900;
    color: var(--c-paper);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-heading);
    /* El token es el mínimo medido de Gobold (ver global.css §tokens):
       por debajo, dos líneas apiladas se pisan — el 1.1 que hubo aquí
       también colisionaba con tildes (necesitan 1.30). */
    line-height: var(--leading-display);
    margin-bottom: var(--spacing-sm);
}

/* Hereda .cta-form del DS. Cancela su margin:auto — en la columna flex
   el container ya gestiona el ancho. El margin-top sustituye al que
   aportaba el sub-headline retirado. */
.hero-form {
    margin: var(--spacing-md) 0 0;
    max-width: 100%;
}


/* =========================================================================
   SECCIONES BAJO LAS BANDERAS
   Las cards salen enteras de global.css (.pillars-*). Aquí quedan la rejilla
   de .about-section y los enlaces.
   ========================================================================= */

/* ── .about-section: apertura editorial ──
   En global.css la sección es una columna con los párrafos topados a 800px.
   Dentro de un contenedor de 1440 eso deja 600px de vacío muerto a la derecha,
   y con los tres párrafos al mismo tamaño el bloque son tres masas de gris sin
   jerarquía. Plano y con medio ancho sin usar.

   Se monta como una apertura de revista:

       [ titular ]  [ entradilla ]
       ───────── regla de acento ─────────
       [ párrafo ]  [ párrafo ]

   El titular ya no queda solo en su columna —la entradilla lo acompaña— y la
   regla de acento parte el bloque en cabecera y cuerpo. La regla va en Coral y
   a 4px: la sección se había quedado monocroma al retirarse su último párrafo,
   y en una paleta 60-30-10 el acento tiene que estar. Coral como filete es
   seguro; como texto sobre Índigo no pasaría contraste, y por eso el enlace a
   la app sigue en Papel.

   Va en home.css y no en global.css a propósito: /quienes-somos/ usa las mismas
   clases y no carga este fichero, así que se queda como está. */

/* Escala display, no de sección: encabezando el bloque entero, un h2 al tamaño
   de token se queda pequeño. Comparte el line-height cerrado del wordmark. */
.about-section h2 {
    font-size: clamp(2.5rem, 5vw, 5rem);
    line-height: var(--leading-display);
    margin-bottom: var(--spacing-md);
}

/* Entradilla: un escalón por encima del cuerpo y a plena opacidad. Es lo que
   convierte tres párrafos iguales en jerarquía.
   El mínimo del clamp es 1.375rem y no 1.25rem porque el cuerpo ya mide
   1.25rem: con el mínimo igualado, en móvil el clamp tocaba suelo y los dos
   quedaban a 20px — la jerarquía desaparecía justo donde el bloque es una
   columna y más falta hace.

   El selector va anidado bajo .about-section y no suelto: global.css declara
   `.about-section p` (0,1,1) y un `.about-lede` a secas es (0,1,0), así que
   perdía y la entradilla se quedaba a 20px con opacidad 0.9. */
.about-section .about-lede {
    font-size: clamp(1.375rem, 1.7vw, 1.6rem);
    line-height: 1.45;
    opacity: 1;
}

/* La regla de acento vive en el borde superior del cuerpo, así que en apilado
   —sin rejilla— sigue separando cabecera y cuerpo igual. */
.about-body {
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-lg);
    border-top: var(--border-w-accent) solid var(--c-coral);
}

/* 1024: dos columnas piden bastante menos ancho que las tres de la versión
   anterior, que necesitaba 1200 para no bajar de 34 caracteres por línea. */
@media (min-width: 1024px) {

    .about-section .container {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: var(--spacing-xl);
        align-items: start;
    }

    .about-section h2 {
        grid-column: 1;
        margin-bottom: 0;
    }

    .about-section .about-lede {
        grid-column: 2;
        margin-bottom: 0;
    }

    /* El `row-gap` importa desde que el cuerpo son tres párrafos: con dos, la
       rejilla nunca tuvo segunda fila y la separación vertical no existía. Sin
       él, el tercero arranca pegado al borde inferior del primero —los párrafos
       llevan `margin-bottom: 0` aquí abajo— y las dos columnas se leen como un
       solo bloque continuo. */
    .about-body {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: var(--spacing-xl);
        row-gap: var(--spacing-md);
        align-items: start;
    }

    /* El ancho de línea lo acota ahora la columna, no un tope suelto.
       Ambos anidados bajo .about-section por lo mismo que arriba: el tope de
       800px lo pone `.about-section p`, y hay que ganarle en especificidad.
       Hoy la columna nunca llega a 800px, así que no se vería; se deja bien
       para que no reviva si mañana crece --site-max-width. */
    .about-section .about-body p,
    .about-section .about-lede {
        max-width: none;
    }

    .about-body p {
        margin-bottom: 0;
    }
}

/* Enlace a la app, dentro de .about-section (fondo Índigo).
   En Papel subrayado y no en Coral: sobre Índigo el Coral pierde contraste.
   Va acotado a la home — /quienes-somos/ no carga este fichero. */
.about-section a {
    color: var(--c-paper);
    font-weight: 700;
    /* SYNC DS §5.10: subrayado con offset, sin transición ni motion. */
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* ── La secuencia: pasos editoriales + evidencia del producto ──
   La 2×2 de cajas iguales con hover era el patrón genérico que la skill
   veta, y además una secuencia («el orden en el que pasan las cosas») no
   se lee como orden en una rejilla — se lee en columna. Izquierda, los
   cuatro pasos como filas con regla estructural y numeral display;
   derecha, pegajosa, la prueba: dos capturas reales de la app (manual
   §3.5). Los marcos de las capturas sí llevan blockout: son ventanas al
   producto, y ahí la elevación comunica algo de verdad. */
.steps-split {
    margin-top: var(--spacing-lg);
}
@media (min-width: 1024px) {
    .steps-split {
        display: grid;
        grid-template-columns: 7fr 5fr;
        column-gap: var(--spacing-xl);
        align-items: start;
    }
    .steps-evidence {
        position: sticky;
        top: var(--spacing-lg);
    }
}
.step-row {
    border-top: var(--border-w-structural) solid var(--c-indigo);
    padding: var(--spacing-md) 0;
}
@media (min-width: 768px) {
    .step-row {
        display: grid;
        grid-template-columns: clamp(80px, 9vw, 130px) 1fr;
        column-gap: var(--spacing-md);
        align-items: start;
    }
}
/* Numeral display: una sola línea garantizada — puede ir prieto (ver
   --leading-display en global.css: la excepción de una-línea). */
.step-num {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: clamp(3rem, 6vw, 5.5rem);
    line-height: 0.8;
    color: var(--c-coral);
    letter-spacing: var(--letter-spacing-title);
}
@media (max-width: 767px) {
    .step-num {
        margin-bottom: var(--spacing-xs);
    }
}
.step-row .pillar-text {
    max-width: 56ch;
}
/* Ventanas al producto: captura real + pie, en marco blockout. */
.steps-shot {
    margin: 0 0 var(--spacing-md);
    border: var(--border-w-structural) solid var(--c-indigo);
    background: var(--c-paper);
    box-shadow: var(--shadow-blockout);
}
.steps-shot img {
    display: block;
    width: 100%;
    height: auto;
}
.steps-shot figcaption {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--c-indigo);
    border-top: var(--border-w-interactive) solid rgb(var(--c-indigo-rgb) / 0.15);
}
/* La segunda captura entra medio paso desplazada: par asimétrico, no pila. */
@media (min-width: 768px) {
    .steps-shot--offset {
        margin-left: var(--space-2xl);
    }
}
@media (max-width: 1023px) {
    .steps-evidence {
        margin-top: var(--spacing-md);
    }
}

/* Cabecera de la secuencia en dos columnas (≥1024): titular a la izquierda,
   intro a la derecha — la misma apertura de revista que .about-section usa
   una pantalla más arriba. Apilados a ancho completo eran la única cabecera
   plana que quedaba en la página. La rejilla y los cierres cruzan entero. */
@media (min-width: 1024px) {
    .pillars-section .container {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: var(--spacing-xl);
        align-items: end;
    }
    .pillars-section h2 {
        margin-bottom: 0;
    }
    .pillars-section .intro {
        margin-bottom: 0;
    }
    .steps-split,
    .home-steps-outro,
    .home-cta-link {
        grid-column: 1 / -1;
    }
}

/* Cierre de la secuencia. Comparte tope de línea con .intro (global.css), que es
   el otro párrafo suelto de esta sección; sin él ocuparía los 1440 del contenedor
   y saldría una línea de 200 caracteres. 56ch = banda 65–78 del manual. */
.home-steps-outro {
    max-width: 56ch;
    margin-top: var(--spacing-lg);
    margin-bottom: 0;
    font-size: 1.125rem;
}

/* El cierre son dos párrafos —el encadenado y la comunidad—, y el segundo pega
   con el primero porque el primero cierra a cero. Separación de párrafo, no de
   bloque: siguen siendo el mismo cierre. */
.home-steps-outro + .home-steps-outro {
    margin-top: var(--spacing-sm);
}

/* CTA que cierra el scroll y devuelve al formulario del hero (fondo Papel).
   La cabecera es sticky y mide --nav-height, así que sin este margen de scroll
   el panel de captación aterriza justo debajo de ella y su titular queda tapado
   por la propia cabecera. */
.hero-aside {
    scroll-margin-top: var(--nav-height);
}

.home-cta-link {
    margin-top: var(--spacing-lg);
    margin-bottom: 0;
}

.home-cta-link a {
    color: var(--c-coral);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: underline;
    text-underline-offset: 4px;
}


/* =========================================================================
   RESPONSIVE
   Breakpoints: 479 (móvil pequeño) · 767 (quiebre principal) ·
   landscape móvil acotado a max-width 899px para no pillar escritorios
   con la ventana baja.
   ========================================================================= */

/* ── Apilado vertical (< 768px) ── */
@media (max-width: 767px) {

    /* height auto + min-height deja crecer el contenido si supera el
       viewport, en vez de recortarlo. */
    .hero-viewport {
        height: auto;
        min-height: calc(100svh - var(--nav-height));
    }

    .hero-main {
        flex: 0 0 auto;
        padding: var(--spacing-md) 0;
        /* border-right solo existe en min-width:768px (global.css) —
           en apilado el separador tiene que ser inferior. */
        border-bottom: var(--border-weight) solid var(--c-indigo);
    }

    .hero-wordmark {
        font-size: clamp(3rem, 18vw, 5.5rem);
        margin-bottom: var(--spacing-sm);
    }

    .hero-card-text {
        font-size: 1rem;
        max-width: 100%;
    }

    .hero-aside {
        padding: var(--spacing-md) 0 var(--spacing-lg);
    }

    .hero-form-title {
        font-size: clamp(1.4rem, 5.5vw, 2rem);
        letter-spacing: 0;
    }
}

/* ── Móvil pequeño (≤ 479px) ── */
@media (max-width: 479px) {

    .hero-wordmark {
        font-size: clamp(2.8rem, 20vw, 4.5rem);
    }

    .hero-kicker {
        font-size: 0.75rem;
        letter-spacing: 1px;
    }
}

/* ── Landscape móvil ──
   El hero-viewport se libera de su altura fija y el split horizontal
   nativo de .hero-section se mantiene. */
@media (max-height: 500px) and (max-width: 899px) and (orientation: landscape) {

    /* El min-height va en el viewport (el contenedor), no en el
       hero-section: es el viewport quien controla la altura del bloque.
       Descontando el header: con `100svh` a secas el hero ocupaba un
       viewport entero POR DEBAJO de una cabecera de 80px, así que el
       bloque medía 470 en un viewport de 390 y el footer se iba 80px
       bajo el pliegue — justo lo que este invariante evita. */
    .hero-viewport {
        height: auto;
        min-height: calc(100svh - var(--nav-height));
    }

    .hero-main,
    .hero-aside {
        padding: var(--spacing-sm) 0;
    }

    .hero-wordmark {
        font-size: clamp(2.5rem, 10vw, 4rem);
        margin-bottom: var(--spacing-xs);
    }

    .hero-form-title {
        font-size: clamp(1.1rem, 3vw, 1.6rem);
        margin-bottom: var(--spacing-xs);
    }

    .hero-form {
        margin-top: var(--spacing-sm);
    }

    .hero-kicker {
        font-size: 0.7rem;
        margin-bottom: var(--spacing-xs);
    }

    .hero-card-text {
        font-size: 0.9rem;
    }

    .marquee-container {
        padding: var(--spacing-xs) 0;
    }
}