/* =========================================================================
   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 nada más. El chasis
   (.hero-viewport / .hero-section / .hero-main / .hero-aside) y el marquee
   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);
    /* 1.1 es el mínimo seguro: con line-height 1 un título multilínea en
       clamp corta los trazos ascendentes y descendentes. */
    line-height: 1.1;
    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%;
}


/* =========================================================================
   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;
    }
}