/* MadeInMexicoHero.css — Título en mayúsculas, texto, cifras y foto. Nodos 4031:93616 (PC, 1280),
   4031:93687 (tablet, 768) y 4031:93767 (mobile, 375). Tipografía base: site.css.

   PC: texto (504) y foto (504 × 460) lado a lado. Tablet y mobile: foto abajo, a todo el ancho.
   SIN DESBORDES: cada texto admite su largo máximo del diseñador (título 120, texto 400, valor 15,
   leyenda 60) y baja de renglón; las cifras se envuelven a otra fila si no caben. El nodo de tablet
   dibuja el título y el texto en una sola línea que se sale del frame: acá bajan de renglón. */

/* --- Sección. --- */
.MadeInMexicoHero {
    width: 100%; /* Ocupa el ancho de la ventana. */
    background-color: #ffffff; /* Fondo del nodo. */
    font-family: var(--font-brand); /* Pila de marca. */
}

    .MadeInMexicoHero *,
    .MadeInMexicoHero *::before,
    .MadeInMexicoHero *::after {
        box-sizing: border-box; /* Medidas predecibles. */
    }

    .MadeInMexicoHero :where(h2, p, ul) {
        margin: 0; /* El espaciado lo ponen los contenedores. */
    }

    .MadeInMexicoHero :where(ul) {
        padding: 0; /* Sin sangría de lista. */
        list-style: none; /* Sin viñetas. */
    }

.MadeInMexicoHero-inner {
    display: grid; /* Texto y foto. */
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* 504 + 504 del nodo. */
    align-items: center; /* Texto centrado en vertical con la foto. */
    gap: 56px; /* Separación del nodo. */
    width: 100%; /* Ancho disponible. */
    max-width: 1280px; /* Ancho del nodo de PC. */
    margin-inline: auto; /* Centrado. */
    padding: 80px; /* Relleno del nodo. */
}

/* --- Texto. --- */
.MadeInMexicoHero-text {
    display: flex; /* Piezas apiladas. */
    flex-direction: column; /* Ídem. */
    gap: 24px; /* Separación del nodo. */
    min-width: 0; /* No ensancha la columna. */
}

.MadeInMexicoHero-title {
    font-size: 36px; /* Tamaño del nodo. */
    font-weight: 700; /* Bold del nodo. */
    line-height: 44px; /* Interlineado del nodo. */
    text-transform: uppercase; /* Como el nodo. */
    color: #1b2d3a; /* Azul noche del nodo. */
    overflow-wrap: anywhere; /* Una palabra larga no desborda. */
}

.MadeInMexicoHero-description {
    font-size: 16px; /* Tamaño del nodo. */
    line-height: 26px; /* Interlineado del nodo. */
    color: rgba(34, 42, 48, 0.8); /* Gris del nodo. */
    white-space: pre-line; /* Respeta los saltos de línea del editor. */
    overflow-wrap: anywhere; /* Una palabra larga no desborda. */
}

/* --- Cifras: se envuelven a otra fila si no caben. --- */
.MadeInMexicoHero-stats {
    display: flex; /* En fila. */
    flex-wrap: wrap; /* Bajan si no caben. */
    gap: 20px 40px; /* Separación del nodo entre cifras. */
}

.MadeInMexicoHero-stat {
    display: flex; /* Valor y leyenda apilados. */
    flex-direction: column; /* Ídem. */
    gap: 4px; /* Separación del nodo. */
    min-width: 0; /* No desborda. */
    max-width: 100%; /* Ídem. */
}

.MadeInMexicoHero-stat-value {
    font-size: 44px; /* Tamaño del nodo. */
    font-weight: 700; /* Bold del nodo. */
    line-height: 1.1; /* Interlineado ajustado. */
    color: #1b2d3a; /* Azul noche del nodo. */
    overflow-wrap: anywhere; /* No desborda. */
}

.MadeInMexicoHero-stat-caption {
    font-size: 13px; /* Tamaño del nodo. */
    line-height: 1.3; /* Interlineado. */
    color: rgba(34, 42, 48, 0.7); /* Gris del nodo. */
    overflow-wrap: anywhere; /* No desborda. */
}

/* --- Foto. --- */
.MadeInMexicoHero-media {
    min-width: 0; /* No ensancha la columna. */
    aspect-ratio: 504 / 460; /* Proporción del nodo de PC. */
    overflow: hidden; /* Recorta con las esquinas. */
    border-radius: 8px; /* Esquinas del nodo. */
}

.MadeInMexicoHero-image {
    display: block; /* Sin el espacio de línea base. */
    width: 100%; /* Llena el recuadro. */
    height: 100%; /* Ídem. */
    max-width: none; /* Anula el max-width de Bootstrap. */
    object-fit: cover; /* Llena sin deformar. */
}

/* --- Tablet: hasta 1024px (nodo 4031:93687). Foto abajo. --- */
@media (max-width: 1024px) {

    .MadeInMexicoHero-inner {
        grid-template-columns: minmax(0, 1fr); /* Una columna. */
        align-items: start; /* Arriba. */
        gap: 32px; /* Separación del nodo. */
        padding: 64px 32px; /* Relleno del nodo. */
    }

    .MadeInMexicoHero-text {
        gap: 20px; /* Separación del nodo. */
    }

    .MadeInMexicoHero-title {
        font-size: 28px; /* Tamaño del nodo. */
        line-height: 1.2; /* Interlineado del nodo. */
        color: #222a30; /* Color del nodo. */
    }

    .MadeInMexicoHero-description {
        font-size: 14px; /* Tamaño del nodo. */
        line-height: 1.6; /* Interlineado del nodo. */
        color: #222a30; /* Color del nodo. */
    }

    .MadeInMexicoHero-stat-value {
        font-size: 32px; /* Tamaño del nodo. */
    }

    .MadeInMexicoHero-stat-caption {
        font-size: 12px; /* Tamaño del nodo. */
        color: #222a30; /* Color del nodo. */
    }

    .MadeInMexicoHero-media {
        aspect-ratio: 704 / 340; /* Proporción del nodo de tablet. */
    }
}

/* --- Mobile: hasta 767px (nodo 4031:93767). --- */
@media (max-width: 767px) {

    .MadeInMexicoHero-inner {
        gap: 24px; /* Separación del nodo. */
        padding: 48px 20px; /* Relleno del nodo. */
    }

    .MadeInMexicoHero-text {
        gap: 24px; /* Separación del nodo. */
    }

    .MadeInMexicoHero-title {
        font-size: 22px; /* Tamaño del nodo. */
    }

    .MadeInMexicoHero-description {
        font-size: 13px; /* Tamaño del nodo. */
    }

    .MadeInMexicoHero-stats {
        gap: 16px 32px; /* Separación del nodo. */
    }

    .MadeInMexicoHero-stat-value {
        font-size: 28px; /* Tamaño del nodo. */
    }

    .MadeInMexicoHero-stat-caption {
        font-size: 11px; /* Tamaño del nodo. */
    }

    .MadeInMexicoHero-media {
        aspect-ratio: 335 / 240; /* Proporción del nodo de mobile. */
    }
}