/* Reset básico */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Variables CSS */
:root {
    /* Existing variables */
    --primary-orange: #ff6600;
    --text-color-dark: #333;
    --text-color-medium: #666;
    --button-bg-color: #FFA500;
    --primary-blue: #003366; /* Your existing primary blue */
    --background-blue-shape: #2b5585;
    --page-background: #f0f0f0;

    /* Form specific variables */
    --form-border-color: #e0e0e0;
    --input-border-color: #d1d1d1;
    --placeholder-color: #999;
    --light-orange: #FF7A00;
    --light-orange-hover: #e06a00;
    --cancel-button-border: #FF7A00;
    --form-header-text: #333;
    --form-subtitle-text: #666;

    /* Variables from my previous generation (integrated and named to avoid conflicts) */
    --hero-family-blue: #00458C; /* A blue similar to the one in the original image's text */
    --light-gray-section: #f2f2f2; /* Background for vision/mission section */
    --text-light: #fff; /* For text on dark backgrounds */
    --green-flag: #006847;
    --red-flag: #ce1126;
}

/* Estilos generales del cuerpo */
html {
    background-color: var(--page-background);
    overflow-x: hidden;
}

body {
    margin: 0;
    font-family: 'Roboto', sans-serif, 'Poppins'; /* Ensure both fonts are available */
    overflow-x: hidden;
    overflow-y: auto;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: var(--page-background);
    position: relative;
}

/* Prevent media from causing horizontal overflow */
img, picture, video, iframe {
    max-width: 100%;
    height: auto;
    display: block;
}

/* --- Overlay for modals/popups --- */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

body.overlay-active::before {
    opacity: 1;
    visibility: visible;
}

body.modal-open {
    overflow: hidden;
}

/*----------------------------- NAV BAR ----------------------------------*/
.navbar {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 10000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(5px);
    border-bottom: 2px solid #ccc;
    height: 70px;
    transition: background-color 0.3s ease, border-bottom 0.3s ease;
}

.logo-container {
    flex: 0 0 auto;
}

.overlay-image {
    max-width: 150px;
    height: auto;
    cursor: pointer;
}

.nav-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
}

.nav-links li {
    margin: 0 15px;
    position: relative; /* Needed for dropdown */
}

.nav-links a {
    color: var(--primary-orange);
    text-decoration: none;
    padding: 8px 12px;
    display: block;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
    font-size: 18px;
    font-weight: bold;
    border-radius: 5px;
    font-family: 'Poppins', sans-serif; /* Explicitly set Poppins for navbar links */
}

.nav-links a.active {
    color: #ff6600;
}

.nav-links a:hover {
    transform: scale(1.05);
    background-color: rgba(255, 255, 255, 0.2);
    color: var(--primary-blue); /* Changed to primary-blue */
}

.nav-links li.contacto a {
    color: white;
    padding: 8px 15px;
    transition: color 0.3s ease;
    background-color: var(--primary-blue); /* Applied from .contacto rule */
    border-radius: 25px; /* Applied from .contacto rule */
}

.navbar.scrolled {
    background-color: var(--primary-blue); /* Used var instead of hardcoded */
    border-bottom-color: #001a33;
}
/* This rule was duplicated and slightly conflicting, combined into .nav-links li.contacto a */
.nav-links li.contacto a:hover {
    background-color: #e67e00;
    color: white;
    transform: none;
}
/* This rule was duplicated, combined into .nav-links li.contacto a */
.contacto {
    background-color: var(--primary-blue);
    border-radius: 25px;
    transition: background-color 0.3s ease;
}

/* This rule was duplicated, combined into .nav-links li.contacto a */
.contacto a {
    color: white;
    padding: 8px 15px;
}
/* This rule was duplicated, combined into .nav-links li.contacto a:hover */
.contacto a:hover {
    background-color: #e67e00;
    color: white;
    transform: none;
}


main {
    margin-top: 70px;
    background-color: var(--page-background);
}

.has-dropdown {
    position: relative;
    z-index: 1001;
}

/* --- ANIMACIÓN PARA EL REBOTE --- */
@keyframes bounceInDownFromTop {
    0% {
        opacity: 0;
        transform: translateY(-80px) scale(0.7);
    }
    60% {
        opacity: 1;
        transform: translateY(10px) scale(1.05);
    }
    75% {
        transform: translateY(-5px) scale(0.98);
    }
    90% {
        transform: translateY(2px) scale(1.01);
    }
    100% {
        transform: translateY(0) scale(1);
    }
}

.dropdown-menu {
    display: block; /* Kept block for animation visibility */
    visibility: hidden;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 20px 48px 46px 0px rgba(0,0,0,0.2);
    z-index: 1000;
    list-style: none;
    padding: 0;
    margin: 0;
    top: 100%;
    right: 0; /* Align to the right of the parent li */
    left: auto; /* Ensure right alignment takes precedence */
    opacity: 0;
    transition: background-color 0.3s ease-in-out;
    border-radius: 5px;
}

.dropdown-menu.show {
    visibility: visible;
    animation: bounceInDownFromTop 0.8s ease forwards;
}

.dropdown-menu.scrolled {
    background-color: var(--primary-blue);
}

.dropdown-menu li a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    white-space: nowrap;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

.dropdown-menu li a:hover {
    background-color: rgba(0,0,0,0.2);
}

.dropdown-menu.scrolled li a {
    color: white;
}

.has-dropdown:hover .dropdown-menu {
    visibility: visible;
    opacity: 1;
    transition-delay: 0s;
}

.dropdown-arrow {
    margin-left: 5px;
    font-size: 0.8em;
}

/* Estilos para el botón de hamburguesa */
.hamburger-button {
    display: none; /* Ocultar por defecto en pantallas grandes */
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 10001;
}

.hamburger-icon {
    width: 35px; /* Ajusta el tamaño de tu imagen */
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}

/* --- Media Query para dispositivos móviles y tabletas --- */
@media (max-width: 768px) {
    .navbar {
        justify-content: space-between;
        align-items: center;
        height: 60px;
        padding: 10px 15px;
    }

    /* Oculta el menú de navegación por defecto */
    .nav-links {
        display: none;
        flex-direction: column;
        width: 100%;
        position: absolute;
        top: 60px; /* Alinea el menú debajo del navbar */
        left: 0;
        background-color: var(--primary-blue, #003366);
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        z-index: 10000;
        padding: 0;
    }

    /* Muestra el menú cuando tiene la clase 'active' */
    .nav-links.active {
        display: flex;
    }

    /* Muestra el botón de hamburguesa en pantallas pequeñas */
    .hamburger-button {
        display: block;
    }

    .nav-links li {
        margin: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .nav-links a {
        color: white; /* Color de los enlaces en el menú móvil */
        text-align: left;
        padding: 15px 20px;
        font-size: 16px;
    }

    .nav-links a:hover {
        background-color: rgba(255, 255, 255, 0.1);
    }
}

/*------------------------ IMAGENES Y BANDERA (Second Hero Section) ----------------------------------*/

@keyframes slideInFromLeft {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

.second-hero-section {
    padding: 0 0;
    background-color: var(--text-light);
}

.second-hero-container {
    background-color: black; /* White background for the grid container itself */
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    max-width: 100%;
    width: 100%;
    padding: 40px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    align-items: center;
    justify-items: center;
    margin: 0 auto; /* Center the container */
}

.image-box {
    background-color: #f7f7f7;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    display: flex;
    justify-content: center;
    align-items: center;
    grid-column: span 1;
    position: relative;
    height: 250px; /* Consistent height for images */
}

.image-box img {
    width: 100%;
    height: 100%; /* Make image fill the box */
    object-fit: cover; /* Crop as needed */
    display: block;
    position: relative;
    z-index: 1;
}

.image-box::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30%;
    background: linear-gradient(to top, black, rgba(255, 255, 255, 0));
    z-index: 2;
    pointer-events: none;
}

.top-left { grid-column: 1 / 2; grid-row: 1 / 2; }
.top-right { grid-column: 3 / 4; grid-row: 1 / 2; }
.bottom-left { grid-column: 1 / 2; grid-row: 2 / 3; }
.bottom-middle { grid-column: 2 / 3; grid-row: 2 / 3; }
.bottom-right { grid-column: 3 / 4; grid-row: 2 / 3; }

.text-content {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    text-align: center;
    padding: 20px;
}

.text-content h1 {
    font-size: 2.2em; /* Adjusted based on previous output */
    color: white; /* Using variable */
    margin-bottom: 15px;
    line-height: 1.2;
    font-family: 'Poppins', sans-serif; /* Explicitly set Poppins */
}

.text-content .orange{
    font-size: 1em; /* Adjusted based on previous output */
    color: var(--primary-orange); /* Using variable */
    margin-bottom: 15px;
    line-height: 1.2;
    font-family: 'Poppins', sans-serif; /* Explicitly set Poppins */
}

.text-content p {
    font-size: 1.1em;
    color: var(--text-color-medium); /* Using variable */
    margin-top: 0;
    font-family: 'Poppins', sans-serif; /* Explicitly set Roboto */
}

.mexican-flag {
    display: flex;
    width: 385px; /* Width of the flag */
    height: 10px; /* Height of the flag */
    margin: 50px auto 40px auto; /* Centered margin */
    animation: slideInFromLeft 1.5s ease-out forwards;
    border-radius: 8px; /* Added from your CSS */
    overflow: hidden; /* Added from your CSS */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Added from your CSS */
}

.mexican-flag span {
    flex: 1; /* Make spans take equal width */
    height: 100%;
    display: block; /* Changed from inline-block to block for flexbox */
    border-radius: 0; /* Remove individual border-radius for seamless look */
}

.mexican-flag .green { background-color: var(--green-flag); }
.mexican-flag .white { background-color: var(--text-light); position: relative; display: flex; justify-content: center; align-items: center; } /* From your CSS */
.mexican-flag .red { background-color: var(--red-flag); }


/* Responsive adjustments for Second Hero */
@media (max-width: 900px) {
    .second-hero-container {
        grid-template-columns: 1fr;
        padding: 20px;
        gap: 20px;
    }

    .image-box, .text-content {
        grid-column: span 1;
        grid-row: auto;
    }

    .text-content {
        order: -1;
    }

    .top-left, .top-right, .bottom-left, .bottom-middle, .bottom-right {
        grid-column: auto;
        grid-row: auto;
    }

    .text-content h1 {
        font-size: 1.8em;
    }

    .text-content p {
        font-size: 1em;
    }
}

@media (max-width: 600px) {
    .second-hero-container {
        padding: 15px;
    }

    .text-content h1 {
        font-size: 1.5em;
    }

    .text-content p {
        font-size: 0.9em;
    }
}


/* --- Combined Hero Section (Más que una empresa, somos familia) --- */
.combined-hero-section {
    position: relative;
    background: url('img/0e1d1d8b4880fb0315ee2924da03bd6b63a9ed1a.jpg') no-repeat center center fixed;
    background-size: cover;
    color: var(--text-light);
    height: 90vh;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 5%;
    text-align: left;
    margin-top: 10px; /* Add some space after history section */
}

.hero-image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.6) 100%);
    z-index: 1;
}

.hero-content-left {
    position: relative;
    z-index: 2;
    max-width: 50%;
    padding-right: 20px;
}

.hero-content-left h1 {
    font-family: 'Poppins', sans-serif;
    font-size: 3.5em;
    margin-bottom: 20px;
    line-height: 1.1;
    background: linear-gradient(90deg, rgba(0, 169, 224, 0.90) 0.14%, #FFF 58.31%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-content-left p {
    font-family: 'Roboto', sans-serif;
    font-size: 1.1em;
    line-height: 1.5;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

/* --- Vision and Mission Section --- */
.vision-mission-section {
    background-color: var(--light-gray-section); /* Using the specific variable */
    padding: 50px 0;
    text-align: center;
}

.vision-mission-section .container {
    display: flex;
    justify-content: center;
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    background-color: transparent; /* Remove container background from second hero */
    box-shadow: none; /* Remove container shadow from second hero */
    border-radius: 0;
}

.vision-box,
.mission-box {
    background-color: var(--text-light);
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    flex: 1;
    max-width: 450px;
}

.vision-box h2,
.mission-box h2 {    
    background: var(--degradado-Blue, linear-gradient(90deg, #07477D 35.1%, #0D81E3 100%));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 2em;
    margin-bottom: 15px;
    font-family: 'Poppins', sans-serif;
}

.vision-box p,
.mission-box p {
    font-size: 1.1em;
    color: var(--text-color-dark); 
    font-family: 'Roboto', sans-serif;
}

/*---------------------------- Historia ---------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Oswald:wght@700&display=swap');



:root {
--bg-color: #000;
--text-color: #fff;
--highlight-color: #ff6600;
--secondary-text-color: #aaa;
--body-font: 'Montserrat', sans-serif;
--heading-font: 'Oswald', sans-serif;
--timeline-line-color: #fff;
--timeline-line-width: 2px;
}



* {
box-sizing: border-box;
margin: 0;
padding: 0;
}



body {
color: var(--text-color);
font-family: var(--body-font);
line-height: 1.6;
}



/* Estilo para la nueva barra de navegación de la línea de tiempo */

.timeline-nav-pill {
width: 100%;
max-width: 800px;
margin: 2rem auto;
background-color: #212121;
border-radius: 50px;
display: flex;
justify-content: space-around;
align-items: center;
padding: 0.5rem 1rem;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    transition: top 0.28s cubic-bezier(.2,.9,.2,1), left 0.28s cubic-bezier(.2,.9,.2,1), width 0.28s cubic-bezier(.2,.9,.2,1), box-shadow 0.28s ease, background 0.28s ease, opacity 0.28s ease, transform 0.28s ease;
    will-change: top, left, width, opacity, transform;
}

.timeline-nav-pill.sticky {
    position: fixed;
    /* left/width are set dynamically from JS to match the container and avoid layout jumps */
    z-index: 9999;
    background: #212121;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
    transform: translateY(0);
}

/* Compact state: small pill at right side when historia ends */
.timeline-nav-pill.compact {
    position: fixed;
    right: 18px; /* fallback if JS doesn't set left */
    width: 44px !important;
    height: 44px;
    padding: 0.25rem !important;
    border-radius: 999px !important;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #212121;
    box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}

.timeline-nav-pill.compact .timeline-link {
    opacity: 0;
    pointer-events: none;
}

.timeline-nav-pill.compact::after {
    content: '';
    display: block;
    width: 28px;
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(90deg,#ff8c00,#ff4500);
}

.timeline-link {
color: var(--secondary-text-color);
text-decoration: none;
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
transition: color 0.3s ease;
padding: 0.5rem 1rem;
border-radius: 50px;
transition: all 0.3s ease;
}

.timeline-link:hover {
color: var(--text-color);
background: linear-gradient(to right, #ff8c00, #ff4500);
box-shadow: 0 4px 10px rgba(255, 140, 0, 0.4);
}

.timeline-link.active {
color: var(--text-color);
background: linear-gradient(to right, #ff8c00, #ff4500);
box-shadow: 0 4px 10px rgba(255, 140, 0, 0.4);
font-size: 1rem;
position: relative;
}

.hero-section {
text-align: center;
padding: 4rem 2rem;
max-width: 100%;
margin: 0 auto;
background-color: var(--bg-color);
}

.hero-title {
color: var(--highlight-color);
font-family: var(--heading-font);
font-size: 3rem;
font-weight: 700;
margin-bottom: 0.5rem;
}

.hero-subtitle {
font-size: 1rem;
color: var(--secondary-text-color);
}

.historia {
width: 100%;
overflow: hidden;
position: relative;
padding-bottom: 4rem;
background-color: var(--bg-color);
}

.history-container {
display: flex;
justify-content: center;
align-items: flex-start;
max-width: 1400px;
margin: 0 auto;
position: relative;
background-color: var(--bg-color);
}

.history-container::before {
content: '';
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: var(--timeline-line-width);
background-color: var(--timeline-line-color);
transform: translateX(-50%);
z-index: 0;
}

/* Por defecto la línea está oculta; se muestra sólo cuando .history-container tiene la clase .show-line */
.history-container::before {
    opacity: 0;
    transition: opacity 0.25s ease;
}
.history-container.show-line::before {
    opacity: 1;
}

.timeline-content-main {
flex-grow: 1;
width: 100%;
position: relative;
z-index: 1;
background-color: var(--bg-color);
}

.timeline-entry {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 4rem;
position: relative;
}

.timeline-entry::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 15px;
height: 15px;
background-color: var(--highlight-color);
border: 2px solid var(--text-color);
border-radius: 50%;
z-index: 2;
}

.timeline-entry:nth-child(even) {
flex-direction: row;
}

.timeline-entry:nth-child(odd) {
flex-direction: row-reverse;
}

.year-info {
width: 45%;
padding: 1rem;
position: relative;
background-color: var(--bg-color);
text-align: right;
}

.timeline-entry:nth-child(even) .year-info {
text-align: left;
}

.year-title {
color: var(--highlight-color);
font-family: var(--heading-font);
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 0.5rem;
position: relative;
padding-bottom: 0.5rem;
}

.year-title::after {
content: '';
position: absolute;
right: 0;
bottom: 0;
width: 50px;
height: 3px;
background-color: var(--highlight-color);
}

.timeline-entry:nth-child(even) .year-title::after {
left: 0;
right: auto;
}

.year-title-text {
font-family: var(--heading-font);
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 0.5rem;
position: relative;
padding-bottom: 0.5rem;
}

.year-subtitle {
font-size: 1rem;
color: var(--secondary-text-color);
}

.year-subtitle strong {
font-size: 1rem;
color: var(--primary-orange);
}

.year-image-container {
width: 45%;
padding: 1rem;
position: relative;
background-color: var(--bg-color);
}

.year-image {
width: 85%;
height: auto;
display: block;
border: 1px solid var(--secondary-text-color);
transition: transform 0.5s ease, filter 0.5s ease;
position: relative; /* Necesario para que z-index funcione correctamente */
z-index: 2; /* Asegura que la imagen esté por encima del pseudo-elemento SVG */
}

.year-image-42 {
width: 55%;
height: auto;
display: block;
border: 1px solid var(--secondary-text-color);
transition: transform 0.5s ease, filter 0.5s ease;
position: relative; /* Necesario para que z-index funcione correctamente */
z-index: 2; /* Asegura que la imagen esté por encima del pseudo-elemento SVG */
}


.year-image-container:hover .year-image {
transform: scale(1.1); /* Escala la imagen para resaltarla */
filter: brightness(1.2) drop-shadow(35px 15px 55px rgba(255, 102, 0, 0.7)); /* Añade brillo y sombra */
}

.year-image-container::after {
content: ''; /* Propiedad obligatoria para los pseudo-elementos */
position: absolute; /* Posicionamiento absoluto con respecto al contenedor padre */
bottom: 0; /* Ancla la parte inferior del pseudo-elemento a la parte inferior del contenedor */
right: 0; /* Ancla la parte derecha del pseudo-elemento a la parte derecha del contenedor */
width: 493px; /* Tamaño del SVG */
height: 493px; /* Tamaño del SVG */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='442' height='443' viewBox='0 0 442 443' fill='none'%3E%3Cpath d='M434.974 151.054C385.654 123.49 355.732 133.161 344.885 139.836C340.556 140.064 337.543 138.622 336.323 137.888C330.78 128.766 324.226 120.359 316.829 112.828C315.645 111.059 313.989 107.718 315.956 104.944C320.357 101.117 346.165 76.9436 327.479 13.9649C325.231 6.38993 311.788 3.68415 308.876 3C249.607 24.0854 244.53 57.4731 243.627 70.3117C243.627 72.623 240.602 73.5475 239.089 73.868C233.522 73.1469 227.853 72.7771 222.095 72.7771C216.336 72.7771 210.746 73.1407 205.214 73.8557C203.199 73.5044 200.586 72.4689 199.731 69.4981C198.535 55.6055 192.526 22.4212 134.703 3.2527C131.791 3.94302 118.361 6.68578 116.137 14.2731C97.558 77.5846 124.024 100.827 128.305 104.39C130.141 106.855 129.8 109.573 128.891 111.287C120.239 119.817 112.71 129.518 106.527 140.144C104.973 141.494 102.264 143.072 99.2861 141.408C99.2741 141.395 99.2562 141.389 99.2442 141.377C84.4806 131.25 56.6576 121.839 9.83752 150.437C7.44568 152.286 -0.154366 167.516 4.45589 173.859C42.2349 225.86 68.9935 221.2 79.404 220.707C84.5285 220.806 87.2731 224.683 88.5109 227.204C89.641 237.053 91.7817 246.582 94.8253 255.679C94.8253 255.679 94.8273 255.683 94.8313 255.691C95.1781 257.818 95.0944 259.876 94.7476 263.846C94.6878 264.524 94.1735 265.263 93.6174 265.861C81.2277 269.763 48.6211 282.657 42.7252 346.437C44.0048 349.223 49.4881 362.154 57.154 362.77C125.034 368.206 139.451 332.409 140.79 331.028C142.219 329.555 147.84 327.687 152.785 329.185C160.547 333.993 168.823 338.005 177.499 341.136C178.551 341.839 182.731 343.275 183.192 346.468C178.396 364.311 171.98 402.087 210.919 438.026C213.801 438.846 227.327 442.563 232.792 436.991C281.203 387.64 261.488 351.17 260.866 349.327C260.376 347.879 260.37 344.329 264.436 341.925C274.506 338.504 284.043 333.894 292.899 328.254C294.226 327.823 296.738 327.318 299.243 328.563C299.781 328.834 300.248 329.142 300.643 329.462C300.643 329.469 300.654 329.475 300.654 329.475C311.531 344.341 336.652 372.262 387.741 362.462C390.133 360.613 401.243 351.836 400.298 343.971C391.927 274.324 351.864 268.16 350.07 267.544C348.886 267.137 346.919 265.923 346.751 262.841C351.325 251.309 354.423 239.007 355.81 226.168C356.396 224.418 357.843 221.496 360.965 221.287C369.312 222.076 403.103 226.717 437.372 175.091C441.713 168.552 436.128 153.901 434.98 151.054H434.974ZM222.555 290.651C180.71 290.651 146.782 255.679 146.782 212.541C146.782 169.402 180.71 134.437 222.555 134.437C264.4 134.437 298.334 169.409 298.334 212.541C298.334 255.673 264.406 290.651 222.555 290.651Z' stroke='url(%23paint0_radial_1323_2192)' stroke-width='5'/%3E%3Cdefs%3E%3CradialGradient id='paint0_radial_1323_2192' cx='0' cy='0' r='1' gradientTransform='matrix(-446.076 -721.83 427.917 14324.9 439 440.001)' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23F09819'/%3E%3Cstop offset='1' stop-color='%23FF512F'/%3E%3C/radialGradient%3E%3C/defs%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: contain;
background-position: center;
transform: translate(23%, 13%); /* Mueve el pseudo-elemento para que su centro quede en la esquina */
opacity: 0; /* Oculto por defecto */
transition: transform 0.5s ease, opacity 0.5s ease;
pointer-events: none;
z-index: 1;
}

.year-image-container:hover::after {
opacity: 1; /* Muestra el SVG */
transform: translate(1, 1); /* Regresa el SVG a la esquina */
}

.recognition-section {
position: relative;
width: 100%;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 1rem;
overflow: hidden;
}

.background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('img/21de114639d8c51c9eee2f883c5e21ca5bd6569b.jpg');
background-repeat: repeat;
z-index: 0;
}

.content-wrapper {
position: relative;
z-index: 1;
max-width: 1200px;
width: 100%;
text-align: center;
}

.section-title {
font-size: 2rem;
color: #fff;
margin-bottom: 2rem;
position: relative;
}

.section-title::after {
content: '';
display: block;
width: 50px;
height: 3px;
background-color: #ff6600;
margin: 0.5rem auto 0;
}

.recognition-content {
display: flex;
justify-content: center;
align-items: center;
gap: 4rem;
padding: 2rem;
}

.person-image-container {
flex-shrink: 0;
}

.person-image {
width: 250px;
height: auto;
border-radius: 10px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
}

.person-details {
text-align: left;
max-width: 500px;
}

.person-name {
font-family: 'Times New Roman', Times, serif; /* Tipo de letra manuscrita */
font-size: 2.5rem;
color: #fff;
margin-bottom: 0.5rem;
}

.person-job {
font-size: 1.2rem;
color: #ff6600;
text-transform: uppercase;
margin-bottom: 0.5rem;
}

.person-description {
font-size: 1rem;
color: #aaa;
}


@media (max-width: 768px) {
.timeline-nav-pill {
width: 90%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}

.timeline-link {
white-space: nowrap;
padding: 0.5rem 0.75rem;
}

.history-container {
flex-direction: column;
align-items: center;
}

.history-container::before {
left: 50%;
transform: translateX(-50%);
}

.timeline-content-main {
padding-left: 0;
}

.timeline-entry, .timeline-entry.alternate {
flex-direction: column;
align-items: center;
text-align: center;
}

.year-info, .year-image-container {
width: 100%;
margin-bottom: 2rem;
}

.year-title {
text-align: center;
}
.year-title::after {
left: 50% !important;
right: auto !important;
transform: translateX(-50%);
}

.recognition-content {
flex-direction: column;
text-align: center;
gap: 2rem;
}

.person-details {
text-align: center;
}

}

.person-name {
    font-family: 'Times New Roman', Times, serif; /* Tipo de letra manuscrita */
    font-size: 2.5rem;
    color: #fff;
    margin-bottom: 0.5rem;
}

.person-job {
    font-size: 1.2rem;
    color: #ff6600;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.person-description {
    font-size: 1rem;
    color: #aaa;
}

/* Contenedor para toda la sección */
.proposito-container {
    position: relative;
    width: 100%;
    min-height: 100vh; /* Ajusta la altura según sea necesario */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #fff;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    /* Optional: Ensure text remains readable on image changes */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
}

/* Capa oscura sobre la imagen de fondo */
.proposito-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* Contenedor principal para todo el contenido de texto */
.content-wrapper {
    position: relative;
    z-index: 2;
    padding: 20px;
    max-width: 900px; /* Ajusta el ancho máximo según sea necesario */
    /* Fuente general para el contenido si no se especifica */
    font-family: 'Montserrat', sans-serif; /* Usando una fuente similar a la imagen */
}

/* Encabezado con el título "Propósito" y el SVG "2035" */
.proposito-header {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 30px; /* Espacio entre el encabezado y el subtítulo */
}

.proposito-title {
    font-family: 'Oswald', sans-serif; /* Fuente para "Propósito" */
    font-size: 2.5rem; /* Tamaño de fuente para "Propósito" */
    font-weight: 700;
    color: #fff;
    margin: 0 10px 0 0; /* Margen a la derecha de "Propósito" */
    line-height: 1; /* Ajusta la altura de línea para centrarlo con el SVG */
}

.proposito-svg-logo {
    width: 120px; /* Ajusta el ancho del SVG para que "2035" y el engranaje tengan el tamaño adecuado */
    height: auto;
    display: block; /* Para evitar espacios no deseados debajo de la imagen */
}

/* Sección de contenido de texto */
.proposito-text-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.proposito-subtitle {
    font-size: 1.5rem; /* Tamaño de fuente para "Por un mundo sostenible" */
    font-weight: 400;
    color: #fff;
    margin: 0;
    line-height: 1.4;
}

.proposito-highlight {
    font-size: 2.2rem; /* Tamaño de fuente para "engranado por manos mexicanas" */
    font-weight: 700;
    color: #ff8c00; /* Naranja vibrante */
    text-transform: lowercase; /* La imagen muestra letras minúsculas */
    margin: 10px 0;
    line-height: 1.2;
}

.proposito-description {
    font-size: 1.2rem; /* Tamaño de fuente para "impulsando la industria y tecnología en México" */
    font-weight: 400;
    color: #fff;
    margin: 0;
    line-height: 1.4;
}

/* Media Queries para responsividad */
@media (max-width: 768px) {
    .proposito-title {
        font-size: 2rem;
    }
    .proposito-svg-logo {
        width: 100px;
    }
    .proposito-subtitle {
        font-size: 1.2rem;
    }
    .proposito-highlight {
        font-size: 1.8rem;
    }
    .proposito-description {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .proposito-title {
        font-size: 1.8rem;
    }
    .proposito-svg-logo {
        width: 80px;
    }

/* Reduce tamaño de la franja (bandera) solo en móviles pequeños */
@media (max-width: 480px) {
    .mexican-flag {
        width: 60%;
        max-width: 260px;
        height: 8px;
        margin: 20px auto 16px auto;
    }

    .mexican-flag span {
        height: 100%;
    }
}
    .proposito-subtitle {
        font-size: 1rem;
    }
    .proposito-highlight {
        font-size: 1.5rem;
    }
    .proposito-description {
        font-size: 0.9rem;
    }
}


@media (max-width: 768px) {
    .timeline-nav-pill {
        width: 90%;
        overflow-x: auto;
        justify-content: flex-start;
        border-radius: 10px;
        -webkit-overflow-scrolling: touch;
    }

    .timeline-link {
        white-space: nowrap;
        padding: 0.5rem 0.75rem;
    }

    .history-container {
        flex-direction: column;
        align-items: center;
    }

    .history-container::before {
        left: 50%;
        transform: translateX(-50%);
    }

    .timeline-content-main {
        padding-left: 0;
    }
    
    .timeline-entry, .timeline-entry.alternate {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .year-info, .year-image-container {
        width: 100%;
        margin-bottom: 2rem;
    }
    
    .year-title {
        text-align: center;
    }
    
    .year-title::after {
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%);
    }
    .recognition-content {
        flex-direction: column;
        text-align: center;
        gap: 2rem;
    }

    .person-details {
        text-align: center;
    }
}

/*----------------------------- 2035 -------------------------------------------*/

.container-2030 {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.top-section {
    background: #fff;;
    width: 100%;
    height: 30vh;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    position: relative;
}

.bottom-section {
    background: linear-gradient(to top, #07477D 35.1%,  #0D81E3 100% );
    width: 100%;
    height: 56vh;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    text-align: center;
    padding: 0 10%;
    box-sizing: border-box;
}

.image-2030 {
    background-image: url('img/YEAR-2.png'); /* URL de la imagen subida */
    background-size: cover;
    background-position: center;
    width: 950px; /* Ajusta el ancho según sea necesario */
    height: 267px; /* Ajusta el alto según sea necesario */
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -1%);
    z-index: 10;
}

.text-overlay {
    max-width: 800px;
    margin: auto;
    line-height: 1.6;
    font-size: 20px;
}

/*-------------------------------- VALORES -------------------------------------*/

.valores-container {
    max-width: 1200px;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 20px;
}

.header {
    grid-column: 1 / 3;
    padding-right: 20px;
}

.header h2 {
    color: #003366;
    font-size: 2.5em;
    margin-bottom: 10px;
}

.header p {
    color: #555;
    line-height: 1.6;
}

.valor-item {
    background-color: black;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 6px #000;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.valor-item img {
    width: 150px; /* Ajusta el tamaño de los iconos */
    height: auto;
    margin-bottom: 10px;
    background-color: black;
}

.valor-item p {
    margin: 0;
    color: #fff;
    font-weight: bold;
}

/* Ajustes para tablet y móvil */
@media (max-width: 1024px) {
    .valores-container {
        grid-template-columns: 1fr 1fr 1fr;
    }
    .header {
        grid-column: 1 / 3;
    }
    .m-logo {
        grid-column: 3 / 4;
    }
}

@media (max-width: 768px) {
    .valores-container {
        grid-template-columns: 1fr 1fr;
    }
    .header {
        grid-column: 1 / 3;
    }
    .m-logo {
        display: none; /* Ocultar en móviles si es necesario */
    }
    /* Timeline: evitar scroll lateral en móviles, apilar entradas verticalmente */
    @media (max-width: 768px) {
        .history-container {
            max-width: 100%;
            padding: 0 16px;
            margin: 0 auto;
            display: block;
            box-sizing: border-box;
        }

        .history-container::before {
            /* vertical line moved near the left edge for mobile */
            left: 20px;
            transform: none;
            width: 2px;
            height: 100%;
        }

        .timeline-content-main {
            width: 100%;
            box-sizing: border-box;
            padding-left: 0;
        }

        .timeline-entry {
            flex-direction: column !important;
            align-items: flex-start;
            margin: 1.5rem 0;
            padding-left: 36px; /* leave space for the vertical line */
            width: 100%;
            box-sizing: border-box;
        }

        .timeline-entry::before {
            left: 20px; /* position the dot on the vertical line */
            transform: translate(-50%, -50%);
        }

        .year-info,
        .year-image-container,
        .year-image,
        .year-image-42 {
            width: 100%;
            max-width: 100%;
            padding: 0;
        }

        .timeline-nav-pill,
        .timeline-nav-pill.sticky {
            left: 0;
            width: 100%;
            max-width: 100%;
            box-sizing: border-box;
        }
    }
}


/*----------------------------- PIE DE PÁGINA ----------------------------------*/
footer {
    background-color: var(--primary-blue); /* Usar variable para el color */
    color: #ffffff;
    padding: 20px;
    text-align: center;
    margin-top: 50px; /* Margen para separar del contenido superior */
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    max-width: 1200px;
    margin: 0 auto;
    gap: 20px;
    padding: 0 20px;
}

/* Define las columnas del pie de página */
.footer-content .logo,
.footer-content .contact-info, /* Se mantiene, aunque el .contact-info-container es el nuevo para la sección principal */
.footer-content .quick-links {
    flex: 1;
    min-width: 280px;
    max-width: 33%;
    text-align: left;
    padding: 0 10px;
}

.footer-content .logo p {
    font-size: 0.9em;
    line-height: 1.4;
    margin-top: 10px;
}

.contact-info p {
    margin-bottom: 5px;
    font-size: 0.9em;
}

/* --- CAMBIOS AQUÍ para Enlaces Rápidos --- */
.quick-links {
    /* El padre de los enlaces ahora será un flex container */
    display: flex;
    flex-direction: row; /* Asegura que los ítems se coloquen en fila */
    flex-wrap: wrap; /* Permite que los enlaces se envuelvan si no hay suficiente espacio horizontal */
    gap: 10px; /* Espacio entre los enlaces */
}

.quick-links p { /* Estilo para el título "Enlaces Rápidos:" */
    width: 100%; /* Asegura que el título ocupe su propia línea */
    margin-bottom: 10px; /* Espacio después del título */
    font-weight: bold; /* Hacer el título más visible */
    text-align: left; /* Asegura que el título se alinee con los enlaces */
}

.quick-links a {
    display: inline-block; /* O puedes quitarlo y se comportarán como inline, pero inline-block permite padding/margin vertical */
    color: white;
    text-decoration: none;
    transition: color 0.3s ease;
    padding: 2px 5px; /* Pequeño padding para los enlaces si son inline-block */
    border-radius: 3px; /* Pequeños bordes redondeados */
}

.quick-links a:hover {
    color: var(--primary-orange); /* Usar variable */
}
/* --- FIN CAMBIOS para Enlaces Rápidos --- */
.sco {
    margin-top: 10px;
    display: flex;
    list-style: none;
    padding: 0;
}

.sco li {
    margin-right: 15px;
}

.sco li a {
    color: #ccc;
    font-size: 2em;
    transition: color 0.3s ease;
}

.sco li a:hover {
    color: var(--primary-orange); /* Usar variable */
}

/* Estilos para el texto de copyright del footer */
.footer-copyright-text {
    margin-top: 20px;
    font-size: 0.9em; /* Aproximadamente 14.4px si el font-size base es 16px */
    color: #ffffff; /* Texto blanco para todo el párrafo */
}

/* Estilos para los enlaces dentro del texto de copyright */
.footer-copyright-text a {
    color: #ffffff; /* Por defecto, los enlaces también serán blancos */
    text-decoration: none; /* Elimina el subrayado por defecto si no lo quieres */
    transition: color 0.3s ease; /* Transición suave para el cambio de color */
}

/* Estilo cuando el mouse pasa por encima del enlace */
.footer-copyright-text a:hover {
    color: var(--primary-orange, #FF6600); /* Naranja cuando el mouse pasa por encima */
    /* Usamos una variable CSS si la tienes definida, o un color hexadecimal directo */
}

/* Estilo para la línea divisoria del footer */
footer > div:nth-of-type(2) { /* Selecciona el segundo div directo dentro del footer */
    border-bottom: 1px solid #ffffff;
    margin-top: 20px;
    width: 70%;
    margin-left: auto;
    margin-right: auto;
}


/* --- Responsive Adjustments (Consolidated) --- */
@media (max-width: 992px) {
    body {
        min-height: 100vh;
        width: 100vw;
        background-color: var(--page-background);
        position: relative;
        overflow-x: hidden;
        /* Asegura que el fondo cubra toda la pantalla */
    }
    main {
        min-height: calc(100vh - 70px); /* Ajusta según la altura del navbar */
        width: 100vw;
        background-color: var(--page-background);
        box-sizing: border-box;
    }
    .navbar {
        height: 60px;
        padding: 8px 10px;
    }
    .overlay-image {
        max-width: 110px;
    }
    .nav-links {
        flex-direction: column;
        gap: 10px;
        background: var(--primary-blue);
        position: absolute;
        top: 60px;
        left: 0;
        width: 100vw;
        display: none;
        z-index: 10001;
    }
    .nav-links.active {
        display: flex;
    }
    .hamburger-button {
        display: block;
    }
    .nav-links li {
        width: 100%;
        text-align: left;
        margin: 0;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }
    .nav-links a {
        color: #fff;
        padding: 12px 20px;
        font-size: 1em;
        width: 100%;
        border-radius: 0;
        background: none;
    }
    .nav-links a:hover {
        background: rgba(255,255,255,0.08);
        color: var(--primary-orange);
    }
    .dropdown-menu {
        position: static;
        width: 100%;
        box-shadow: none;
        background: rgba(0,0,0,0.1);
        padding-left: 20px;
    }
    .timeline-nav-pill {
        width: 98vw;
        left: 0 !important;
        border-radius: 10px;
        margin: 1rem auto;
        font-size: 0.9em;
        padding: 0.5rem 0.5rem;
    }
    .timeline-link {
        padding: 0.5rem 0.5rem;
        font-size: 0.9em;
        white-space: nowrap;
    }
    .history-container {
        flex-direction: column;
        align-items: center;
        padding: 0 8px;
    }
    .timeline-entry {
        flex-direction: column;
        align-items: center;
        text-align: center;
        margin-bottom: 2rem;
    }
    .year-info, .year-image-container {
        width: 100%;
        margin-bottom: 1rem;
        text-align: center;
        padding: 0.5rem;
    }
    .year-title {
        font-size: 1.5rem;
        text-align: center;
    }
    .year-title::after {
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%);
    }
    .recognition-content {
        flex-direction: column;
        gap: 1rem;
        padding: 1rem;
    }
    .person-details {
        text-align: center;
    }
    .proposito-container {
        min-height: 60vh;
        padding: 10px;
        background-position: center;
    }
    .content-wrapper {
        padding: 10px;
        max-width: 98vw;
    }
    .proposito-title {
        font-size: 1.5rem;
    }
    .proposito-svg-logo {
        width: 70px;
    }
    .proposito-subtitle {
        font-size: 1rem;
    }
    .proposito-highlight {
        font-size: 1.2rem;
    }
    .proposito-description {
        font-size: 0.95rem;
    }
    .container-2030 {
        height: auto;
        padding: 10px 0;
    }
    .top-section, .bottom-section {
        height: auto;
        padding: 10px 0;
    }
    .image-2030 {
        width: 98vw;
        height: 120px;
        position: static;
        transform: none;
        margin: 0 auto;
    }
    .text-overlay {
        font-size: 1em;
        padding: 0 5px;
    }
    .valores-container {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        padding: 0 5px;
    }
    .header {
        grid-column: 1 / 3;
        padding-right: 0;
    }
    .valor-item img {
        width: 90px;
    }
    footer {
        padding: 10px 5px;
        text-align: left;
    }
    .footer-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 0 5px;
    }
    .footer-content > * {
        width: 100%;
        min-width: unset;
        max-width: unset;
        margin-bottom: 10px;
        text-align: left;
        padding: 0;
    }
    .quick-links {
        flex-direction: column;
        gap: 0;
        align-items: flex-start;
    }
    .quick-links a {
        width: 100%;
        padding: 2px 0;
        border-radius: 0;
        border-bottom: none;
        text-align: left;
    }
    .sco {
        justify-content: flex-start;
        margin-left: 0;
    }
    .footer-copyright-text {
        text-align: left;
        padding-left: 0;
        font-size: 0.85em;
    }
}

@media (max-width: 600px) {
    body {
        min-height: 100vh;
        width: 100vw;
        background-color: var(--page-background);
        position: relative;
        overflow-x: hidden;
    }
    main {
        min-height: calc(100vh - 60px); /* Ajusta según la altura del navbar en móviles */
        width: 100vw;
        background-color: var(--page-background);
        box-sizing: border-box;
    }
    .timeline-nav-container {
        max-width: 99vw;
        margin: 0 auto 8px auto;
        padding: 0 2px;
        height: 38px; /* Más pequeño en teléfonos */
    }
    .timeline-nav-pill {
        min-height: 28px;
        font-size: 0.8em;
        padding: 0.2rem 0.2rem;
    }
    .valores-container {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .header {
        grid-column: 1 / 2;
    }
    .valor-item img {
        width: 60px;
    }
    .footer-content {
        gap: 5px;
        padding: 0 2px;
    }
    .footer-content .logo img {
        width: 90px;
    }
    .footer-content .logo,
    .footer-content .contact-info,
    .footer-content .quick-links {
        margin-bottom: 7px;
    }
    .quick-links a {
        font-size: 0.9em;
        padding: 1px 0;
    }
    .footer-copyright-text {
        font-size: 0.75em;
    }
}

/* --- Timeline Navigation Adjustments --- */
@media (max-width: 992px) {
    .timeline-nav-container {
        max-width: 95vw;
        margin: 0 auto 10px auto;
        padding: 0 4px;
        height: 48px; /* Más pequeño en tabletas */
    }
    .timeline-nav-pill {
        min-height: 38px;
        font-size: 0.9em;
        padding: 0.3rem 0.5rem;
    }
}

/* ===== Estilos de navbar por defecto (escritorio): fondo blanco, enlaces naranjas ===== */
nav.navbar {
    background-color: #ffffff;
}

/* El contenedor de enlaces en desktop puede ser transparente o blanco según diseño */
nav.navbar .nav-links,
nav.navbar ul.nav-links#nav-links-list {
    background-color: transparent;
}

/* Enlaces por defecto en escritorio: naranja */
nav.navbar .nav-links a,
.nav-links a {
    color: var(--primary-orange);
}

/* Submenus por defecto en escritorio: fondo blanco y texto naranja */
.dropdown-menu {
    background-color: #ffffff;
    color: var(--primary-orange);
    box-shadow: 20px 48px 46px 0px rgba(0,0,0,0.12);
}

.dropdown-menu li a {
    color: var(--primary-orange);
}

/* Hover en desktop mantiene legibilidad */
nav.navbar .nav-links li a:hover,
.dropdown-menu li a:hover {
    background-color: rgba(0,0,0,0.04);
    color: var(--primary-orange);
}

/* ===== Reglas móviles: forzar fondo azul y texto blanco ===== */
@media (max-width: 992px) {
    /* Alta especificidad en móvil para evitar conflictos */
    nav.navbar .nav-links,
    nav.navbar ul.nav-links#nav-links-list,
    nav.navbar .nav-links li,
    nav.navbar .nav-links li a,
    nav.navbar .nav-links .has-dropdown > a {
        background-color: var(--primary-blue) !important;
        color: #ffffff !important;
    }

    /* Asegurar que el contenedor del menú (off-canvas o desplegable) sea azul */
    .nav-links {
        background-color: var(--primary-blue) !important;
    }

    /* Dropdowns: fondo azul y texto blanco siempre en móvil */
    .dropdown-menu {
        background-color: var(--primary-blue) !important;
        color: #ffffff !important;
        box-shadow: 0 8px 24px rgba(0,0,0,0.25) !important;
    }

    .dropdown-menu li a {
        color: #ffffff !important;
    }

    /* Hover/active styles para móvil */
    nav.navbar .nav-links li a:hover,
    .nav-links li a:focus,
    .dropdown-menu li a:hover {
        background-color: rgba(0, 0, 0, 0.12) !important;
        color: #ffffff !important;
    }

    nav.navbar .nav-links a {
        color: #ffffff !important;
    }

    .dropdown-menu {
        position: static !important;
        box-shadow: none !important;
        padding-left: 20px !important;
    }

    /* If any rule sets visibility/opacity differently, ensure visible when active */
    .nav-links.active,
    .nav-links.open,
    .dropdown-menu.show,
    .has-dropdown.open > .dropdown-menu {
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
    }

    /* Extra: ensure contacto button keeps white text on blue */
    .nav-links li.contacto a {
        background-color: var(--primary-blue) !important;
        color: #ffffff !important;
    }
}

/* === Eliminar el espacio reservado por submenús en vistas móviles === */
@media (max-width: 992px) {
    /* Cuando el dropdown está en flujo (position: static) puede ocupar espacio aun oculto.
       Por eso lo ocultamos por completo y sólo lo mostramos cuando la clase .show o .open está presente. */
    .dropdown-menu {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        pointer-events: none !important;
    }

    /* Mostrar sólo cuando esté abierto/activo */
    .has-dropdown.open > .dropdown-menu,
    .dropdown-menu.show {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        margin: 0 !important;
        padding: 12px 16px !important;
        pointer-events: auto !important;
    }

    /* Asegurar que el enlace padre no tenga altura extra cuando el submenu está cerrado */
    .has-dropdown {
        display: block;
    }
}
/* Ajustes para que la imagen de `proposito-container` se vea completa en móviles */
@media (max-width: 600px) {
    .proposito-container {
        background-size: contain !important;
        background-position: center top !important;
        background-repeat: no-repeat !important;
        min-height: 25vh !important; /* Aumentar altura para mostrar imagen completa */
    }

    .proposito-container::before {
        background-color: rgba(73, 72, 72, 0.22) !important; /* suavizar overlay en móviles */
    }
}