/* =========================================================
   INICIO
========================================================= */

#hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

/* =========================================================
   VIDEO DE FONDO DEL HERO
========================================================= */

.hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    z-index: 0;

    /* Mejora visual sutil */
    filter:
        contrast(1.10)
        saturate(1.08)
        brightness(0.96);
}
.hero-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(15,30,45,.68) 0%,
            rgba(15,30,45,.48) 28%,
            rgba(15,30,45,.20) 50%,
            rgba(15,30,45,0) 72%
        ),
        linear-gradient(
            180deg,
            rgba(15,30,45,.30),
            rgba(15,30,45,0) 25%,
            rgba(15,30,45,0) 70%,
            rgba(15,30,45,.30)
        );
}

.hero-content {
    position: relative;
    z-index: 2;
    margin-left: 90px;
    max-width: 640px;
}

.hero-content h1 {
    margin: 28px 0;
    color: var(--white);
    font-family: 'Libre Baskerville', serif;
    font-weight: 400;
    line-height: .92;
    letter-spacing: -2px;
}

.hero-top {
    display: block;
    font-size: clamp(42px,3.8vw,52px);
    font-weight: 400;
    letter-spacing: 1px;
    line-height: 1.1;

    text-shadow:
        2px 2px 0 rgba(95,142,170,.35),
        4px 4px 0 rgba(31,97,139,.16);
}

.hero-center {
    display: block;
    font-size: clamp(100px,9vw,136px);
    font-weight: 700;
    letter-spacing: -3px;
    line-height: .88;

    text-shadow:
        3px 3px 0 rgba(95,142,170,.45),
        6px 6px 0 rgba(31,97,139,.20);
}

.hero-bottom {
    display: block;
    margin-top: 8px;
    color: var(--white);
    font-size: clamp(36px,3.4vw,46px);
    font-weight: 400;
    font-style: italic;
    text-transform: lowercase;
    letter-spacing: 1px;
    line-height: 1.1;

    text-shadow:
        2px 2px 0 rgba(95,142,170,.35),
        4px 4px 0 rgba(31,97,139,.16);
}

.hero-content p {
    width: 620px;
    max-width: 100%;
    margin-top: 20px;
    color: rgba(255,255,255,.92);
    font-size: 17px;
    font-weight: 500;
    line-height: 1.7;

    text-shadow:
        1px 2px 4px rgba(0,0,0,.25);
}

.hero-buttons {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 40px;
}


/* =========================================================
   INTRO
========================================================= */

.intro-section {
    position: relative;
    text-align: center;
    overflow: hidden;
}

.intro-title-container {
    width: 100%;
    margin-bottom: 40px;
    text-align: center;
}

.intro-title-container h2 {

    width: 100%;
    max-width: 100%;
    margin: 0;
    text-align: center;
    white-space: normal;

}


/* =========================================================
   DECORACIÓN INTRO
========================================================= */

.intro-section::before {
    content: "";
    position: absolute;
    top: 10px;
    right: 60px;
    width: 130px;
    height: 130px;

    border:
        1px solid rgba(31,97,139,.22);

    border-radius: 50%;

    background:
        linear-gradient(
            rgba(31,97,139,.22),
            rgba(31,97,139,.22)
        ) center / 100% 1px no-repeat,

        linear-gradient(
            rgba(31,97,139,.22),
            rgba(31,97,139,.22)
        ) center / 1px 100% no-repeat;

    pointer-events: none;
}

.intro-section::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 30px;
    width: 170px;
    height: 170px;

    background-image:
        radial-gradient(
            rgba(31,97,139,.35) 1px,
            transparent 1.5px
        );

    background-size: 18px 18px;

    -webkit-mask-image:
        radial-gradient(
            circle,
            black 30%,
            transparent 72%
        );

    mask-image:
        radial-gradient(
            circle,
            black 30%,
            transparent 72%
        );

    pointer-events: none;
}


/* =========================================================
   TARJETA INTRO
========================================================= */

.intro-card {
    position: relative;
    width: min(720px,100%);
    margin: 40px auto 0;
    padding: 44px 48px;

    background: rgba(255,255,255,.17);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    border:
        1px solid rgba(255,255,255,.42);

    border-radius: 18px;

    box-shadow: var(--shadow);

    transition: all .35s ease;
}

.intro-card::before,
.intro-card::after {
    content: "";
    position: absolute;

    width: 22px;
    height: 22px;

    border:
        1.5px solid var(--blue);

    opacity: .5;
    pointer-events: none;
}

.intro-card::before {
    top: -10px;
    left: -10px;

    border-right: none;
    border-bottom: none;
}

.intro-card::after {
    bottom: -10px;
    right: -10px;

    border-left: none;
    border-top: none;
}

.intro-card:hover {
    transform: translateY(-6px);

    background: rgba(255,255,255,.30);

    border-color:
        rgba(31,97,139,.22);

    box-shadow: var(--shadow-hover);
}

.intro-card p {
    color: var(--gray);
    font-size: 18px;
    line-height: 1.8;
    text-align: justify;
}


/* =========================================================
   ESTADÍSTICAS
========================================================= */

.stats {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 25px;
}

.stats div {
    width: 100%;
    max-width: 190px;
    aspect-ratio: 1 / 1;
    margin: 0 auto;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding: 20px;
    text-align: center;

    background: rgba(255,255,255,.12);

    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

    border-radius: 50%;

    box-shadow:
        0 12px 40px rgba(39,50,58,.055);

    transition: all .3s ease;
}

.stats div:hover {
    transform: translateY(-6px);
    background: rgba(255,255,255,.22);
}

.stats h2 {
    margin-bottom: 8px;
    color: var(--blue);

    font-family: 'Libre Baskerville',serif;

    font-size: 48px;
    font-weight: 400;
    letter-spacing: -1px;
}

.stats span {
    color: var(--blue-dark);
    font-family: 'Courier New', Courier, monospace;
    font-size: 14px;
}

.stats.stats-dark div {
    background: rgba(31,97,139,.16);
    border: none;
}

.stats.stats-dark div:hover {
    background: rgba(31,97,139,.26);
}

.stats.stats-dark h2 {
    color: var(--blue-dark);
}


/* =========================================================
   MISIÓN · VISIÓN · VALORES
========================================================= */

#mission-vision {
    position: relative;
    min-height: 620px;

    display: flex;
    align-items: center;

    overflow: hidden;
}

#mission-vision::before {
    content: "";
    position: absolute;
    inset: 0;

    background-image:
        url('../img/107.jpg');

    background-size: cover;
    background-position: center;

    filter:
        contrast(1.06)
        saturate(1.12)
        brightness(1.02);

    z-index: 0;
}

.mv-overlay {
    position: absolute;
    inset: 0;

    z-index: 1;
    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(15,30,45,.58),
            rgba(15,30,45,.40)
        );
}


/* =========================================================
   CONTENEDOR DE LAS 3 TARJETAS
========================================================= */

.mv-grid {
    position: relative;
    z-index: 2;

    width: 100%;

    display: grid;

    /* TRES TARJETAS EN UNA SOLA LÍNEA */
    grid-template-columns: repeat(3, 1fr);

    gap: 30px;

    padding: 70px 60px;
}


/* =========================================================
   TARJETAS MISIÓN / VISIÓN / VALORES
========================================================= */

.mv-card {
    width: 100%;
    max-width: 320px;
    margin: 0 auto;

    padding: 32px;

    background: rgba(255,255,255,.14);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    border:
        1px solid rgba(255,255,255,.35);

    border-radius: 18px;

    transition: all .35s ease;
}

.mv-card:hover {
    transform: translateY(-6px);

    background:
        rgba(255,255,255,.22);
}


/* =========================================================
   ETIQUETA "NUESTRA"
========================================================= */

.mv-card .section-tag {
    display: block;

    text-align: center;

    color:
        rgba(255,255,255,.85);
}


/* =========================================================
   TÍTULO
========================================================= */

.mv-card h3 {
    margin:
        14px 0 16px;

    color: var(--white);

    font-family:
        'Libre Baskerville',serif;

    font-size: 28px;

    text-align: center;
}


/* =========================================================
   TEXTO
========================================================= */

.mv-card p {
    color:
        rgba(255,255,255,.88);

    font-size: 16px;
    line-height: 1.8;
}


/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media (max-width:1000px) {

    .hero-content {
        margin-left: 50px;
    }

    .hero-content p {
        width: 80%;
    }

    .stats {
        grid-template-columns:
            repeat(2,1fr);
    }

    /* En tablet las 3 tarjetas pasan a 2 columnas */
    .mv-grid {
        grid-template-columns:
            repeat(2,1fr);

        padding:
            80px 50px;
    }

}


/* =========================================================
   RESPONSIVE — CELULAR
========================================================= */

@media (max-width:700px) {

    #hero {
        min-height: 900px;

        align-items: flex-end;

        padding-bottom: 80px;
    }

    .hero-content {
        margin:
            0 25px;
    }

    .hero-content p {
        width: 100%;
        font-size: 16px;
    }

    .hero-buttons {
        flex-direction: column;
        align-items: flex-start;
    }

    .stats {
        grid-template-columns:
            1fr;
    }

    .intro-card {
        padding:
            30px 25px;
    }

    .intro-card p {
        font-size: 16px;
    }


    /* =====================================================
       MISIÓN / VISIÓN / VALORES EN CELULAR
    ===================================================== */

    .mv-grid {
        grid-template-columns:
            1fr;

        gap: 25px;

        padding:
            70px 25px;
    }

    .mv-card {
        max-width: 500px;
    }

}


/* =========================================================
   PANTALLAS MUY PEQUEÑAS
========================================================= */

@media (max-width:450px) {

    .mv-grid {
        padding:
            60px 18px;
    }

    .mv-card {
        padding:
            26px 22px;
    }

    .mv-card h3 {
        font-size: 24px;
    }

    .mv-card p {
        font-size: 15px;
    }

}

/* =========================================================
   LISTA DE VALORES
========================================================= */

.valores-lista {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px 25px;

    margin: 25px 0 0;
    padding: 0;

    list-style: none;
}

.valores-lista li {
    position: relative;

    padding-left: 18px;

    color: rgba(255,255,255,.88);
    font-size: 16px;
    line-height: 1.6;
}

.valores-lista li::before {
    content: "";
    position: absolute;

    left: 0;
    top: 11px;

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: rgba(255,255,255,.75);

   
   }


/* ================================================================================================================== */
   
/* =========================================================
   TARJETAS INTRO — ETIQUETA + CARD
========================================================= */

.intro-cards {
    width: min(1100px, 100%);
    margin: 55px auto 0;

    display: flex;
    flex-direction: column;
    gap: 55px;
}


/* =========================================================
   FILA
========================================================= */

.intro-row {
    display: grid;

    grid-template-columns:
        220px 1fr 220px;

    align-items: center;

    width: 100%;
}


/* =========================================================
   TARJETA
========================================================= */

.intro-row .intro-card {
    grid-column: 2;

    position: relative;

    width: 100%;

    padding: 38px 44px;

    background: rgba(255,255,255,.17);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    border:
        1px solid rgba(255,255,255,.42);

    border-radius: 18px;

    box-shadow: var(--shadow);

    transition:
        transform .35s ease,
        background .35s ease,
        box-shadow .35s ease;
}


/* =========================================================
   TEXTO
========================================================= */

.intro-row .intro-card p {
    color: var(--gray);

    font-size: 17px;
    line-height: 1.8;

    text-align: justify;
}


/* =========================================================
   ETIQUETA
========================================================= */

.intro-label {
    display: flex;
    align-items: center;

    color: var(--blue);

    font-family: 'Cormorant Garamond', serif;

    font-size: 22px;
    font-weight: 700;

    letter-spacing: 2px;

    white-space: nowrap;
}


/* =========================================================
   LÍNEA DE CONEXIÓN
========================================================= */

.intro-label::after {
    content: "";

    width: 70px;
    height: 1px;

    background: var(--blue);

    opacity: .55;
}


/* =========================================================
   ETIQUETA IZQUIERDA
========================================================= */

.intro-row-left .intro-label {
    grid-column: 1;

    justify-content: flex-end;

    gap: 14px;
}


/* =========================================================
   ETIQUETA DERECHA
========================================================= */

.intro-row-right .intro-label {
    grid-column: 3;

    justify-content: flex-start;

    gap: 14px;
}


/* La línea de la etiqueta derecha debe quedar
   antes de la etiqueta */

.intro-row-right .intro-label::after {
    display: none;
}

.intro-row-right .intro-label::before {
    content: "";

    width: 70px;
    height: 1px;

    background: var(--blue);

    opacity: .55;
}


/* =========================================================
   DECORACIÓN DE TARJETA
========================================================= */

.intro-row .intro-card::before,
.intro-row .intro-card::after {
    content: "";

    position: absolute;

    width: 20px;
    height: 20px;

    border:
        1.5px solid var(--blue);

    opacity: .5;

    pointer-events: none;
}

.intro-row .intro-card::before {
    top: -9px;
    left: -9px;

    border-right: none;
    border-bottom: none;
}

.intro-row .intro-card::after {
    bottom: -9px;
    right: -9px;

    border-left: none;
    border-top: none;
}


/* =========================================================
   HOVER
========================================================= */

.intro-row .intro-card:hover {
    transform: translateY(-5px);

    background:
        rgba(255,255,255,.27);

    box-shadow:
        var(--shadow-hover);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 900px) {

    .intro-row {
        grid-template-columns:
            150px 1fr 150px;
    }

    .intro-label {
        font-size: 18px;
    }

    .intro-label::after,
    .intro-row-right .intro-label::before {
        width: 35px;
    }
}


@media (max-width: 700px) {

    .intro-cards {
        gap: 40px;
    }

    .intro-row {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .intro-label {
        justify-content: flex-start !important;

        font-size: 18px;
    }

    .intro-row-left .intro-label,
    .intro-row-right .intro-label {
        order: 1;
    }

    .intro-row .intro-card {
        order: 2;

        padding: 30px 25px;
    }

    .intro-row-right .intro-label::before {
        display: none;
    }

    .intro-row-left .intro-label::after {
        display: none;
    }
}


/* =========================================================
   QUIÉNES SOMOS / HISTORIA
========================================================= */

.about-section {
    position: relative;

    width: min(1050px, 100%);

    margin: 0 auto 80px;

    display: grid;

    grid-template-columns: 1fr 1fr;

    align-items: stretch;

    gap: 45px;
}


/* =========================================================
   ELEMENTO VISUAL
========================================================= */

.about-visual {
    position: relative;

    min-height: 380px;

    display: flex;
    align-items: stretch;
    justify-content: center;
}


/* =========================================================
   TARJETA TÉCNICA
========================================================= */

.technical-card {
    position: relative;

    width: 100%;
    min-height: 380px;

    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        linear-gradient(
            135deg,
            rgba(31,97,139,.10),
            rgba(255,255,255,.22)
        );

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    border: 1px solid rgba(31,97,139,.22);

    box-shadow:
        0 15px 45px rgba(39,50,58,.055);

    transition:
        transform .35s ease,
        background .35s ease,
        box-shadow .35s ease;
}


/* =========================================================
   ESQUINAS TÉCNICAS
========================================================= */

.technical-card::before,
.technical-card::after {
    content: "";

    position: absolute;

    width: 35px;
    height: 35px;

    border: 1px solid var(--blue);

    opacity: .45;

    pointer-events: none;
}

.technical-card::before {
    top: 18px;
    left: 18px;

    border-right: none;
    border-bottom: none;
}

.technical-card::after {
    right: 18px;
    bottom: 18px;

    border-left: none;
    border-top: none;
}



/* =========================================================
   HOVER
========================================================= */

.technical-card:hover {
    transform: translateY(-6px);

    background:
        linear-gradient(
            135deg,
            rgba(31,97,139,.16),
            rgba(255,255,255,.28)
        );

    box-shadow:
        0 25px 60px rgba(39,50,58,.09);
}


/* =========================================================
   NÚMERO
========================================================= */

.technical-number {
    position: absolute;

    top: 25px;
    right: 30px;

    color: rgba(31,97,139,.18);

    font-family: 'Libre Baskerville', serif;

    font-size: 70px;

    line-height: 1;

    font-weight: 400;
}


/* =========================================================
   LÍNEAS TÉCNICAS
========================================================= */

.technical-lines {
    position: absolute;

    width: 270px;
    height: 1px;

    background: rgba(31,97,139,.25);

    transform: rotate(45deg);
}

.technical-lines::after {
    content: "";

    position: absolute;

    width: 270px;
    height: 1px;

    background: rgba(31,97,139,.15);

    transform: rotate(90deg);
}


/* =========================================================
   CÍRCULO IMEXA
========================================================= */

.technical-circle {
    position: relative;

    width: 190px;
    height: 190px;

    display: flex;
    align-items: center;
    justify-content: center;

    border:
        1px solid rgba(31,97,139,.45);

    border-radius: 50%;
}

.technical-circle::before {
    content: "";

    position: absolute;

    inset: 18px;

    border:
        1px dashed rgba(31,97,139,.28);

    border-radius: 50%;
}

.technical-circle span {
    position: relative;

    color: var(--blue-dark);

    font-family: 'Libre Baskerville', serif;

    font-size: 28px;

    letter-spacing: 4px;
}


/* =========================================================
   ETIQUETA DEL ELEMENTO VISUAL
========================================================= */

.technical-label {
    position: absolute;

    bottom: 25px;
    left: 30px;

    color: var(--blue);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 3px;

    text-transform: uppercase;
}


/* =========================================================
   TARJETA DE INFORMACIÓN
========================================================= */

.about-card {
    position: relative;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 45px;

    background: rgba(255,255,255,.17);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    border:
        1px solid rgba(255,255,255,.42);

    border-radius: 18px;

    box-shadow: var(--shadow);

    transition:
        transform .35s ease,
        background .35s ease,
        box-shadow .35s ease;
}

.about-card:hover {
    transform: translateY(-6px);

    background: rgba(255,255,255,.30);

    box-shadow: var(--shadow-hover);
}


/* =========================================================
   TÍTULO
========================================================= */

.about-card h2 {
    margin: 14px 0 22px;

    color: var(--text);

    font-family: 'Libre Baskerville', serif;

    font-size: 30px;

    font-weight: 400;

    line-height: 1.3;

    text-align: center;
}


/* =========================================================
   TEXTO
========================================================= */

.about-card p {
    margin-bottom: 18px;

    color: var(--gray);

    font-size: 16px;

    line-height: 1.8;

    text-align: justify;
}


/* =========================================================
   HISTORIA — ELEMENTO VISUAL
========================================================= */

.technical-card-mission {
    background:
        linear-gradient(
            135deg,
            rgba(31,97,139,.08),
            rgba(255,255,255,.20)
        );
}


/* =========================================================
   ÓRBITAS
========================================================= */

.technical-orbit {
    position: absolute;

    width: 230px;
    height: 130px;

    border:
        1px solid rgba(31,97,139,.30);

    border-radius: 50%;

    transform: rotate(25deg);
}

.technical-orbit.orbit-two {
    width: 130px;
    height: 230px;

    transform: rotate(25deg);
}


/* =========================================================
   CENTRO
========================================================= */

.technical-center {
    position: relative;

    width: 155px;
    height: 155px;

    display: flex;
    align-items: center;
    justify-content: center;

    border:
        1px solid rgba(31,97,139,.40);

    border-radius: 50%;

    background: rgba(255,255,255,.10);

    z-index: 2;
}

.technical-center::before {
    content: "";

    position: absolute;

    inset: 12px;

    border:
        1px dashed rgba(31,97,139,.25);

    border-radius: 50%;
}

.technical-center span {
    position: relative;

    color: var(--blue-dark);

    font-family: 'Libre Baskerville', serif;

    font-size: 28px;

    letter-spacing: 4px;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 800px) {

    .about-section,
    .about-section-reverse {
        grid-template-columns: 1fr;

        gap: 25px;

        margin-bottom: 60px;
    }

    .about-section-reverse .about-card {
        order: 1;
    }

    .about-section-reverse .about-visual {
        order: 2;
    }

    .about-visual,
    .technical-card {
        min-height: 300px;
    }

    .about-card {
        padding: 32px 28px;
    }

    .about-card h2 {
        font-size: 27px;
    }

    .about-card p {
        font-size: 16px;
    }

    .technical-circle {
        width: 155px;
        height: 155px;
    }

    .technical-number {
        font-size: 55px;
    }

    .technical-label {
        font-size: 9px;
    }
}

/* =========================================================
   RESPONSIVE EXTRA — CELULARES PEQUEÑOS
   Ajuste final para pantallas estrechas
========================================================= */

@media (max-width: 600px) {

    /* =====================================================
       HERO
    ===================================================== */

    #hero {
        min-height: 100svh;
        height: auto;
        padding: 110px 20px 65px;
        align-items: center;
    }

    .hero-content {
        width: 100%;
        max-width: 100%;
        margin: 0;
    }

    .hero-content h1 {
        width: 100%;
        margin: 15px 0 22px;
        letter-spacing: -1px;
    }

    .hero-top {
        font-size: clamp(30px, 9vw, 42px);
        line-height: 1.08;
        letter-spacing: 0;
    }

    .hero-center {
        font-size: clamp(68px, 22vw, 105px);
        line-height: .9;
        letter-spacing: -2px;
    }

    .hero-bottom {
        font-size: clamp(28px, 8vw, 40px);
        line-height: 1.05;
        letter-spacing: 0;
    }

    .hero-content p {
        width: 100%;
        max-width: 520px;
        margin-top: 20px;
        font-size: 15px;
        line-height: 1.65;
    }

    .hero-buttons {
        width: 100%;
        margin-top: 30px;
        gap: 12px;
    }

    /* =====================================================
       TÍTULOS GENERALES
    ===================================================== */

    .intro-title-container {
        width: 100%;
        padding: 0 20px;
        margin-bottom: 30px;
    }

    .intro-title-container h2 {
        width: 100%;
        max-width: 100%;
        white-space: normal;
        overflow-wrap: break-word;
        word-break: normal;
        font-size: clamp(27px, 8vw, 38px);
        line-height: 1.2;
    }


    /* =====================================================
       INTRO
    ===================================================== */

    .intro-section {
        padding-left: 0;
        padding-right: 0;
    }

    .intro-cards {
        width: 100%;
        padding: 0 18px;
        margin-top: 35px;
        gap: 35px;
    }

    .intro-row {
        width: 100%;
        gap: 10px;
    }

    .intro-label {
        width: 100%;
        font-size: 17px;
        letter-spacing: 1.5px;
        white-space: normal;
    }

    .intro-row .intro-card {
        width: 100%;
        max-width: 100%;
        padding: 27px 22px;
    }

    .intro-row .intro-card p {
        font-size: 15px;
        line-height: 1.7;
        text-align: left;
    }


    /* =====================================================
       ESTADÍSTICAS
    ===================================================== */

    .stats {
        width: 100%;
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 0 20px;
    }

    .stats div {
        width: min(170px, 100%);
        max-width: 170px;
        margin: 0 auto;
    }

    .stats h2 {
        font-size: 42px;
    }

    .stats span {
        font-size: 13px;
    }


    /* =====================================================
       MISIÓN · VISIÓN · VALORES
    ===================================================== */

    #mission-vision {
        min-height: auto;
    }

    .mv-grid {
        width: 100%;
        grid-template-columns: 1fr;
        gap: 22px;
        padding: 60px 18px;
    }

    .mv-card {
        width: 100%;
        max-width: none;
        padding: 28px 22px;
    }

    .mv-card h3 {
        font-size: 24px;
        line-height: 1.25;
    }

    .mv-card p {
        font-size: 15px;
        line-height: 1.7;
    }

    .valores-lista {
        grid-template-columns: 1fr;
        gap: 9px;
    }

    .valores-lista li {
        font-size: 15px;
    }


    /* =====================================================
       QUIÉNES SOMOS / HISTORIA
    ===================================================== */

    .about-section,
    .about-section-reverse {
        width: 100%;
        grid-template-columns: 1fr;
        gap: 22px;
        margin-bottom: 50px;
        padding: 0 18px;
    }

    .about-visual {
        width: 100%;
        min-height: 280px;
    }

    .technical-card {
        width: 100%;
        min-height: 280px;
    }

    .about-card {
        width: 100%;
        padding: 28px 22px;
    }

    .about-card h2 {
        font-size: 24px;
        line-height: 1.3;
    }

    .about-card p {
        font-size: 15px;
        line-height: 1.7;
        text-align: left;
    }


    /* =====================================================
       ELEMENTOS TÉCNICOS
    ===================================================== */

    .technical-circle {
        width: 135px;
        height: 135px;
    }

    .technical-circle::before {
        inset: 13px;
    }

    .technical-circle span {
        font-size: 21px;
        letter-spacing: 3px;
    }

    .technical-number {
        top: 18px;
        right: 20px;
        font-size: 48px;
    }

    .technical-lines {
        width: 190px;
    }

    .technical-lines::after {
        width: 190px;
    }

    .technical-label {
        bottom: 18px;
        left: 20px;
        font-size: 8px;
        letter-spacing: 2px;
    }

    .technical-orbit {
        width: 190px;
        height: 105px;
    }

    .technical-orbit.orbit-two {
        width: 105px;
        height: 190px;
    }

    .technical-center {
        width: 125px;
        height: 125px;
    }

    .technical-center::before {
        inset: 10px;
    }

    .technical-center span {
        font-size: 21px;
        letter-spacing: 3px;
    }


    /* =====================================================
       DECORACIONES
    ===================================================== */

    .intro-section::before {
        right: 10px;
        width: 80px;
        height: 80px;
        opacity: .7;
    }

    .intro-section::after {
        left: -25px;
        width: 110px;
        height: 110px;
        background-size: 14px 14px;
    }
}


/* =========================================================
   TELÉFONOS MUY PEQUEÑOS
========================================================= */

@media (max-width: 380px) {

    #hero {
        padding-left: 16px;
        padding-right: 16px;
    }

    .hero-top {
        font-size: 28px;
    }

    .hero-center {
        font-size: 64px;
    }

    .hero-bottom {
        font-size: 27px;
    }

    .hero-content p {
        font-size: 14px;
    }

    .intro-title-container {
        padding: 0 16px;
    }

    .intro-title-container h2 {
        font-size: 26px;
    }

    .intro-cards {
        padding: 0 15px;
    }

    .intro-row .intro-card {
        padding: 24px 19px;
    }

    .mv-grid {
        padding-left: 15px;
        padding-right: 15px;
    }

    .about-section,
    .about-section-reverse {
        padding-left: 15px;
        padding-right: 15px;
    }
}

/* =========================================================
   AJUSTE FINAL RESPONSIVE — TELÉFONOS
   Correcciones visuales para pantallas pequeñas
========================================================= */

@media (max-width: 600px) {

    /* =====================================================
       HERO — ESTRUCTURA
    ===================================================== */

    #hero {
        min-height: 100svh;
        height: auto;
        padding: 105px 18px 110px;
        align-items: center;
        overflow: hidden;
    }


    /* =====================================================
       CONTENIDO
    ===================================================== */

    .hero-content {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
    }


    /* =====================================================
       TÍTULO PRINCIPAL
    ===================================================== */

    .hero-content h1 {
        width: 100%;
        max-width: 100%;
        margin: 20px 0 18px;
        letter-spacing: 0;
        line-height: 1;
    }


    /* =====================================================
       "INGENIEROS DE"
    ===================================================== */

    .hero-top {
        display: block;
        width: 100%;
        font-size: clamp(28px, 8vw, 38px);
        line-height: 1.08;
        letter-spacing: 0;
        white-space: nowrap;
    }


    /* =====================================================
       "MÉXICO"
       IMPORTANTE:
       No permitimos que se parta en dos líneas.
    ===================================================== */

    .hero-center {
        display: block;
        width: 100%;
        font-size: clamp(52px, 17vw, 72px);
        line-height: .95;
        letter-spacing: -2px;
        white-space: nowrap;
    }


    /* =====================================================
       "asociados"
    ===================================================== */

    .hero-bottom {
        display: block;
        width: 100%;
        margin-top: 8px;
        font-size: clamp(27px, 8vw, 36px);
        line-height: 1.05;
        letter-spacing: 0;
        white-space: nowrap;
    }


    /* =====================================================
       DESCRIPCIÓN
    ===================================================== */

    .hero-content p {
        width: 100%;
        max-width: 500px;
        margin: 20px auto 0;
        font-size: 15px;
        line-height: 1.6;
    }


    /* =====================================================
       BOTONES
    ===================================================== */

    .hero-buttons {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        margin-top: 28px;
    }

    .hero-buttons a,
    .hero-buttons button {
        width: 100%;
        max-width: 330px;
        margin: 0 auto;
        text-align: center;
    }


    /* =====================================================
       ELEMENTOS DECORATIVOS DEL HERO
    ===================================================== */

    #hero::before {
        background-position: center center;
    }
}


/* =========================================================
   TELÉFONOS PEQUEÑOS — 450px
========================================================= */

@media (max-width: 450px) {

    #hero {
        padding:
            95px
            16px
            105px;
    }


    /* =====================================================
       TÍTULO
    ===================================================== */

    .hero-content h1 {
        margin-top: 15px;
        margin-bottom: 16px;
    }

    .hero-top {
        font-size: 27px;
    }

    .hero-center {
        font-size: 54px;
        letter-spacing: -2px;
    }

    .hero-bottom {
        font-size: 28px;
    }


    /* =====================================================
       TEXTO
    ===================================================== */

    .hero-content p {
        font-size: 14px;
        line-height: 1.6;
    }


    /* =====================================================
       BOTONES
    ===================================================== */

    .hero-buttons {
        margin-top: 25px;
        gap: 10px;
    }

    .hero-buttons a,
    .hero-buttons button {
        max-width: 310px;
    }
}


/* =========================================================
   TELÉFONOS MUY PEQUEÑOS — 380px
========================================================= */

@media (max-width: 380px) {

    #hero {
        padding:
            90px
            14px
            100px;
    }


    /* =====================================================
       TÍTULO
    ===================================================== */

    .hero-top {
        font-size: 25px;
    }

    .hero-center {
        font-size: 50px;
        letter-spacing: -2px;
    }

    .hero-bottom {
        font-size: 26px;
    }


    /* =====================================================
       TEXTO
    ===================================================== */

    .hero-content p {
        font-size: 13.5px;
    }


    /* =====================================================
       BOTONES
    ===================================================== */

    .hero-buttons a,
    .hero-buttons button {
        max-width: 290px;
    }
}

    .technical-card-mission .technical-bg.prueba-1 {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0;
        transition: opacity .4s ease;
        z-index: 0;
    }

    .technical-card-mission:hover .technical-bg.prueba-1 {
        opacity: .80;
    }

    .technical-card-mission:hover .technical-center,
    .technical-card-mission:hover .technical-orbit {
        opacity: 0;
    }

    .technical-center,
    .technical-orbit {
        transition: opacity .4s ease;
    }


    .technical-card-about .technical-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    filter: contrast(1.25) saturate(1.10);
    transition: opacity .4s ease;
    z-index: 0;
}

    .technical-card-about:hover .technical-bg {
    opacity: .90;
}

    .technical-card-about:hover .technical-circle,
    .technical-card-about:hover .technical-lines {
    opacity: 0;
}

    .technical-card-about .technical-circle,
    .technical-card-about .technical-lines {
        transition: opacity .4s ease;
}

.btn-volver {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: 1px solid var(--blue);
    background: transparent;
    color: var(--blue-dark);
    font-family: 'Libre Baskerville', serif;
    font-size: 14px;
    cursor: pointer;
    transition: all .3s ease;
}

.btn-volver:hover {
    background: var(--blue);
    color: var(--white);
}