/* ==========================================================================
   responsive.css — Media queries y ajustes por breakpoint
   Breakpoints:
     xl:  ≥ 1600px   (monitores grandes)
     lg:  ≤ 1200px
     md:  ≤ 992px    (tablet)
     sm:  ≤ 640px    (móvil)
     xs:  ≤ 420px    (móvil chico)
   ========================================================================== */

/* ---------- XL: monitores grandes (≥1600px, p. ej. 21.5" 1920×1080) ----------
   Sin estos overrides, todos los `clamp()` ya tocaban su `max` antes de 1600px,
   así que el contenido quedaba del mismo tamaño que en una laptop 13" mientras
   el viewport seguía creciendo. Resultado: tipografía y elementos "perdidos en
   el centro", con grandes vacíos hacia los bordes. Aquí escalamos hacia arriba
   para que el contenido aproveche el ancho extra del monitor.                 */
@media (min-width: 1600px) {
    :root {
        --section-padding-y: 8rem;
        /* Container max sube de 1480 → 1720 en monitor grande: a 1920px viewport
           el margen lateral baja de 220px por lado a 100px → contenido más
           próximo a los bordes (lo que pediste para valores/ecosistema/vision). */
        --container-max: 1720px;
    }

    /* `.hero__text.container-fluid` impone max-width: 720px desde base.css,
       lo cual deja un hueco enorme en el track 3fr del grid (1152px a 1920px
       de viewport → 432px de aire entre la última letra de TRANSFORMAR y la
       imagen). En xl liberamos ese cap y dejamos que el dark-bg llene la
       columna. La quote y el author tienen sus propios max-width internos
       (.hero__quote = 560px aquí abajo). */
    .hero__text.container-fluid,
    .hero__text {
        max-width: none;
    }

    .hero__title {
        /* En 1920px la columna 3fr (60% del viewport) mide ~1088px de contenido.
           Con el max 4.6rem (73.6px), "TRANSFORMAR" mide ~440px → quedan 648px
           de gap muerto hasta la imagen. Subimos el max a 6.5rem (104px) para
           que el verbo llene ~780px y el gap baje a ~300px (más balanceado). */
        font-size: clamp(4.6rem, 5.5vw, 6.5rem);
    }

    .hero__quote {
        font-size: clamp(1.02rem, 1.1vw, 1.2rem);
        max-width: 560px;
    }

    .vision__title {
        font-size: clamp(2.4rem, 2.8vw, 3rem);
    }

    .vision__text {
        font-size: clamp(1.05rem, 1.15vw, 1.2rem);
        max-width: 760px;
    }

    .valores__title,
    .ecosistema__title {
        font-size: clamp(3.2rem, 4vw, 4rem);
    }

    .valor {
        min-height: 200px;
    }

    .valor__label {
        font-size: clamp(1.8rem, 2vw, 2.2rem);
    }

    /* Bento del ecosistema: títulos y copy más grandes para que las tarjetas
       no parezcan ilustraciones flotando con texto chiquito en la esquina. */
    .bento__item--marvelsa,
    .bento__item--mdh {
        --copy-title-size: clamp(2.4rem, 2.8vw, 3rem);
        --copy-text-size: clamp(1.1rem, 1.2vw, 1.3rem);
    }

    .bento__item--arrendadora {
        --copy-title-size: clamp(1.8rem, 2vw, 2.2rem);
        --copy-text-size: clamp(0.95rem, 1.05vw, 1.1rem);
    }

    .bento__item--bolder {
        --copy-title-size: clamp(2.1rem, 2.4vw, 2.4rem);
        --copy-text-size: clamp(1rem, 1.15vw, 1.2rem);
    }
}

/* ---------- Laptop / monitor pequeño (1024px–1599px) ----------------------
   El footer "Transforma · leaf · Industrias" está en clamp(1.6rem, 3.5vw,
   2.4rem). En 13.3" laptop (1280-1440 px) ya tocaba el max 2.4rem y se sentía
   demasiado dominante para la franja final del sitio. Bajamos el max para
   este rango sin tocar el comportamiento de monitor grande ni de móvil. El
   límite superior (1599) coincide con el inicio del breakpoint XL.            */
@media (min-width: 1024px) and (max-width: 1599px) {
    .site-footer__word {
        font-size: clamp(1.4rem, 2.6vw, 1.9rem);
        letter-spacing: 0.16em;
    }

    .site-footer__leaf {
        width: clamp(48px, 5vw, 60px);
        height: 44px;
    }

    .site-footer__leaf-img {
        height: 44px;
    }
}

/* ---------- LG: ≤1200px ---------- */
@media (max-width: 1200px) {
    .hero {
        /* Mantenemos 3fr 2fr (60/40) hasta el md-breakpoint; el cambio a 55/45
           recortaba demasiado la columna de texto para palabras largas. */
        grid-template-columns: 3fr 2fr;
    }
}

/* ---------- MD: tablet (≤992px) ---------- */
@media (max-width: 992px) {
    :root {
        --header-height: 70px;
    }

    .hero {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .hero__text {
        padding: calc(var(--header-height) + 3rem) var(--section-padding-x) 4rem;
    }

    .hero__image {
        min-height: 60vh;
    }

    .vision__row {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding: 2rem 0;
    }

    .valores__grid {
        grid-template-columns: 1fr;
        /* Cancelamos el gap de 1px que en desktop hace de divisor (mostrando
           el bg oscuro del grid). En mobile/tablet ese gap de 1px se rendía
           inconsistente entre dispositivos: con DPR fraccionario o widths
           awkward se redondeaba a 0 y la línea desaparecía en algunas filas
           pero no en otras. Lo reemplazamos por border-top explícito en cada
           .valor (excepto el primero), que es estable en cualquier DPR. */
        gap: 0;
    }

    .valor + .valor {
        border-top: 1px solid var(--color-border-light);
    }

    .valor--centered {
        grid-column: span 1;
    }

    .valor {
        justify-content: center;
        min-height: 150px;
    }

    .valor__label {
        font-size: clamp(1.15rem, 4vw, 1.45rem);
    }

    /* Reducimos --valor-icon-box ~25% en tablet/mobile.
       Razón: el .valor__icon tiene height: clamp(74px, 8vw, 96px). A ≤992
       viewport, 8vw cae bajo 74 → el clamp se queda en 74 (mín). El ancho
       de la imagen es proporcional al alto, así que el PNG se ve más
       angosto que en desktop (96px) — pero el icon-box mantenía el ancho
       desktop, dejando expuestas las letras baked-in (HV, NAPQTA, HMCM,
       NJA). Con widths reducidos, el clipping vuelve a quedar exacto. */
    .valor--simple      { --valor-icon-box: 104px; }
    .valor--helicopter  { --valor-icon-box: 126px; }
    /* acceptance: 75px. PNG recortado (120×119), centrado en el box. */
    .valor--acceptance  { --valor-icon-box: 75px; }
    .valor--efficiency  { --valor-icon-box: 124px; }
    .valor--respect     { --valor-icon-box: 110px; }

    /* MDH en tablet/mobile: con aspect-ratio uniforme 16/9 sobre una imagen
       que es 370×411 (casi cuadrada, ratio 0.90), object-fit: cover deja
       casi 200px de imagen recortados arriba y abajo a igual proporción.
       Por defecto se ve el centro; el cliente prefiere el top → forzamos
       `--bento-position: 50% 0%`. Override sólo aquí: a desktop el card
       casi no recorta (8px) y el centro luce mejor. */
    .bento__item--mdh {
        --bento-position: 50% 0%;
    }

    .bento {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        aspect-ratio: auto;
    }

    .bento__item {
        grid-column: 1 / -1;
        grid-row: auto;
        aspect-ratio: auto;
        /* Forzar column en TODAS las cards en mobile: incluso Bolder/MDH que
           en desktop son row/row-reverse — en pantallas estrechas las cards
           con imagen a un lado se quedan sin ancho útil para el texto. */
        flex-direction: column !important;
    }

    .bento__media {
        /* En mobile/tablet usamos un 16/9 UNIFORME para todas las cards.
           Antes usábamos `var(--stack-ratio)` que era el ratio del PNG default
           de cada empresa — eso daba imágenes desbalanceadas (Arrendadora a
           ratio 0.54 → 606px de alto a 327 viewport, MDH a 3.31 → 99px de
           alto). 16/9 (1.78) entrega cards consistentes a todas las anchuras
           y mantiene proporción cinemática. object-fit: cover de .bento__img
           se encarga del crop centrado de cada hover.jpeg. */
        flex: 0 0 auto;
        aspect-ratio: 16 / 9;
        background-color: #1e2630;
    }

    .bento__sep {
        /* Separador siempre horizontal en mobile (porque el item es column).
           Anchamos a 100% mediante flex stretch automático. */
        flex: 0 0 var(--sep-size, 2px);
        height: var(--sep-size, 2px);
        width: auto;
    }

    .bento__copy {
        padding: 1.25rem 1.25rem 1.35rem;
    }

    .bento__copy-title {
        font-size: clamp(1.35rem, 4.8vw, 1.8rem);
    }

    .bento__copy-text {
        font-size: 0.98rem;
        line-height: 1.4;
    }

    .bento__cover {
        /* Mobile/tablet: sin estado hover (touch no tiene cursor que entre y
           salga). Mostrar siempre la composición informativa para que el
           usuario lea descripciones sin tener que hacer un tap arriesgado. */
        display: none;
    }
}

/* ---------- SM: móvil (≤640px) ---------- */
@media (max-width: 640px) {
    .site-header {
        padding: 1rem 1.25rem;
    }

    /* En mobile, los selectors targetean el contenedor (que ahora controla
       la altura) en vez del <img> hijo, ya que las imgs son position:absolute
       y heredan height: 100% del padre. */
    .site-header__logo {
        height: 36px;
        width: 136px;
    }

    .site-header.is-scrolled .site-header__logo {
        height: 34px;
        width: 38px;
    }

    .site-header__controls {
        gap: 1rem;
    }

    #animated-lang {
        min-width: 72px;
    }

    .site-header__btn {
        font-size: 0.75rem;
        letter-spacing: 1px;
    }

    .hero__title {
        letter-spacing: -1px;
    }

    .modal__close {
        top: 1rem;
        right: 1.25rem;
    }

    /* Stacked vertical layout en mobile chico: el ícono va arriba centrado y
       el copy (label + desc) abajo con todo el ancho de la card. Antes con
       row-layout y card 327px, el copy se quedaba con sólo 131px → labels
       como "No aceptes para que te acepten" desbordaban a 18px font. */
    .valor {
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
        gap: 0.6rem;
        padding: 1.5rem 1.25rem;
        min-height: auto;
    }

    .valor__icon {
        /* margin: 0 auto centra el icon-box (que mantiene la posición
           absoluta del icon graphic en su esquina superior izquierda).
           CRÍTICO: en flex-direction:column, el `flex-basis` heredado
           (= var(--valor-icon-box)) se convierte en HEIGHT (main axis), no
           width. Reseteamos a `auto` para que el clamp del height (74px
           min) tome efecto. */
        flex: 0 0 auto;
        margin: 0 auto;
    }

    /* Sin movimiento horizontal en el hover/touch a mobile: el ícono está
       centrado en el stacked layout, así que un translate(-8px, ...) lo
       descentraría visualmente. Mantenemos solo el "salto" vertical. */
    .valor:hover .valor__icon,
    .valor:focus-visible .valor__icon {
        transform: translateY(-6px);
    }

    .valor__copy {
        /* Stacked: copy ya no comparte fila con el ícono — usa todo el ancho
           del card para que labels largos como "No aceptes para que te
           acepten" no overflow. */
        flex: 0 0 auto;
        width: 100%;
    }

    .valor__label {
        /* Sin max-width 18ch para que use el ancho completo del card */
        max-width: none;
    }

    .valor__desc {
        max-width: none;
        font-size: clamp(0.82rem, 3.5vw, 0.92rem);
    }

    .site-footer__top {
        /* En mobile apilamos vertical — con 1fr auto 1fr las palabras no
           tienen espacio horizontal suficiente en viewports estrechos. */
        grid-template-columns: 1fr;
        padding: 2rem 1.5rem;
        gap: 0.5rem;
        justify-items: center;
    }

    .site-footer__top > :first-child,
    .site-footer__top > :last-child {
        justify-self: center;
    }

    .site-footer__bottom {
        padding: 1rem 1.5rem;
    }
}

/* ---------- XS: móvil chico (≤420px) ---------- */
@media (max-width: 420px) {
    .site-header__btn {
        font-size: 0.7rem;
    }

    #animated-lang {
        min-width: 60px;
    }
}