* {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Final override: asegurar que el footer use ancho completo en móviles */
@media (max-width: 420px) {
    footer, footer * { box-sizing: border-box; }
    footer { text-align: left !important; padding: 12px !important; }
    .footer-content { width: 100% !important; display: block !important; padding: 0 !important; }
    .footer-content > * { width: 100% !important; display: block !important; text-align: left !important; padding: 8px 12px !important; }
    .footer-content .logo img { max-width: 160px !important; height: auto !important; display: block !important; }
    .footer-content a { display: block !important; width: 100% !important; padding: 6px 0 !important; }
    .footer-content .sco { display: flex !important; gap: 12px !important; align-items: center !important; }
    .footer-copyright-text { width: 100% !important; text-align: left !important; margin: 12px 0 6px 0 !important; padding: 0 12px !important; }
}

/* Último override: miniaturas alineadas horizontalmente SOBRE la parte baja de la imagen grande (móvil <=430px) */
@media (max-width: 430px) {
    .container .slide { position: relative !important; display: block !important; }
    /* ocultar items por defecto para controlar visual */
    .container .slide .item { display: none !important; }

    /* Imagen principal visible y en vertical (alto) */
    .container .slide .item:first-child {
        display: block !important;
        width: 100% !important;
        height: 72vh !important;
        position: relative !important;
        overflow: hidden !important;
        border-radius: 12px !important;
        background-size: cover !important;
        background-position: center center !important;
        z-index: 1 !important;
    }

    /* Texto principal: dentro de la imagen y encima de las miniaturas */
    .container .slide .item:first-child .content {
        position: absolute !important;
        top: 12px !important;
        left: 12px !important;
        right: 12px !important;
        z-index: 50 !important;
        color: #fff !important;
        background: rgba(0,51,102,0.95) !important; /* azul como en vista PC */
        padding: 10px 12px !important;
        border-radius: 8px !important;
        box-shadow: 0 8px 20px rgba(0,0,0,0.25) !important;
        text-align: left !important;
    }

    /* Miniaturas: mostrar 2-4, absolutas y centradas horizontalmente sobre la parte baja de la imagen */
    .container .slide .item:nth-child(2),
    .container .slide .item:nth-child(3),
    .container .slide .item:nth-child(4) {
        display: block !important;
        position: absolute !important;
        bottom: 12px !important;
        left: 50% !important;
        width: 28% !important;
        height: 16vh !important;
        transform-origin: center center !important;
        border-radius: 8px !important;
        overflow: hidden !important;
        box-shadow: 0 10px 22px rgba(45, 80, 136, 0.22) !important;
        background-size: cover !important;
        background-position: center center !important;
        z-index: 20 !important;
    }
    .container .slide .item:nth-child(2) { transform: translateX(-50%) ; transform: translateY(180%) !important;}
    .container .slide .item:nth-child(3) { transform: translateX(-50%) !important; transform: translateY(90%) !important; }
    .container .slide .item:nth-child(4) { transform: translateX(50%) !important; }

    /* Ocultar contenido interno de las miniaturas (solo imagen) */
    .container .slide .item:nth-child(2) .content,
    .container .slide .item:nth-child(3) .content,
    .container .slide .item:nth-child(4) .content { display: none !important; }

    /* Controles: mantener encima de miniaturas; separar botones de imagen */
    .container .button { position: relative !important; z-index: 60 !important; margin: 200px auto !important; }
}

/* Mobile override: imitar layout de PC en pantallas pequeñas (imagen grande + miniaturas a la derecha) */
@media (max-width: 430px) {
    .container { padding: 6px !important; height: auto !important; }
    .container .slide { position: relative !important; width: 100% !important; height: auto !important; }

    /* Ocultar todos los items por defecto y mostrar selectivamente */
    .container .slide .item { display: none !important; }

    /* Item principal grande (equivalente al primer slide en PC) */
    .container .slide .item:first-child {
        display: block !important;
        position: relative !important;
        width: 100% !important;
        height: 50vh !important; /* restaurar altura para que la imagen tenga espacio */
        border-radius: 12px !important;
        background-size: cover !important;
        background-position: center center !important;
        box-shadow: 0 10px 30px rgba(0,0,0,0.12) !important;
        overflow: hidden !important;
    }

    /* Mostrar el texto del primer slide como bloque debajo de la imagen, antes de las flechas */
    .container .slide .item:first-child .content {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        width: calc(100% - 24px) !important;
        max-width: 100% !important;
        margin: 12px auto 0 !important; /* separarlo visualmente de la imagen */
        background: transparent !important;
        padding: 8px 14px !important;
        border-radius: 8px !important;
        color: var(--primary-orange) !important;
        box-shadow: none !important;
        z-index: 2 !important;
        text-align: left !important;
        display: block !important;
    }
    .container .slide .item:first-child .content .name-solucion {
        font-size: 28px !important;
        line-height: 1.05 !important;
        color: var(--primary-orange) !important;
    }
    .container .slide .item:first-child .content .des {
        display: block !important;
        color: #fff !important;
        font-size: 14px !important;
        opacity: 1 !important;
        margin-top: 6px !important;
    }
    /* Asegurar que las flechas estén debajo del contenido */
    .container .button { position: relative !important; margin: 6px auto 18px !important; text-align: center !important; }

    /* Final mobile override: enforce blue overlay and button spacing */
    @media (max-width: 430px) {
        .container .slide .item:first-child .content {
            position: absolute !important;
            top: 12px !important;
            left: 12px !important;
            right: 12px !important;
            background: rgba(0, 51, 102, 0.445) !important;
            color: #ffff !important;
            padding: 12px 14px !important;
            border-radius: 8px !important;
            box-shadow: 0 8px 20px rgba(243, 239, 239, 0.25) !important;
            z-index: 1000 !important;
        }

        .container .slide .item:nth-child(2),
        .container .slide .item:nth-child(3),
        .container .slide .item:nth-child(4) {
            z-index: 900 !important;
        }

        .container .button {
            margin: 48px auto 12px !important;
            z-index: 1100 !important;
            display: flex !important;
            gap: 14px !important;
            justify-content: center !important;
        }
        .container .button button { margin: 5px 8px !important; }
    }

    /* Mostrar 3 miniaturas (otros slides) a la derecha, apiladas verticalmente */
    .container .slide .item:nth-child(2),
    .container .slide .item:nth-child(3),
    .container .slide .item:nth-child(4) {
        display: block !important;
        position: absolute !important;
        right: 6% !important;
        width: 30vw !important;
        height: 12.5vh !important;
        border-radius: 10px !important;
        overflow: hidden !important;
        background-size: cover !important;
        background-position: center center !important;
        box-shadow: 0 8px 20px rgba(0,0,0,0.12) !important;
        z-index: 5 !important;
    }
    .container .slide .item:nth-child(2) { top: 8% !important; }
    .container .slide .item:nth-child(3) { top: 30% !important; }
    .container .slide .item:nth-child(4) { top: 52% !important; }

    /* Ocultar contenido interno de miniaturas (solo imagen) */
    .container .slide .item:nth-child(2) .content,
    .container .slide .item:nth-child(3) .content,
    .container .slide .item:nth-child(4) .content { display: none !important; }

    /* Flechas centradas debajo del bloque principal */
    .container .button { position: relative !important; margin: 12px auto !important; text-align: center !important; }
    .container .button button { width: 46px !important; height: 46px !important; border-radius: 8px !important; }
}

/* Último override: forzar separación y altura del video en móviles pequeños */
@media (max-width: 430px) {
    .hero {
        padding-top: 0vh !important;
        padding-bottom: 0vh !important; /* separa del bloque naranja */
        min-height: auto !important;
    }

    /* Regla muy específica y con !important para evitar ser sobrescrita */
    .hero.video_inicio, .hero .video_inicio, .hero video#hero-video {
        position: relative !important;
        top: 0vh !important; /* subir más hacia el navbar */
        height: 0vh !important; /* ocupar más espacio vertical */
        max-height: calc(100vh - 48px) !important;
        width: auto !important;
        max-width: 100% !important;
        object-fit: contain !important;
        margin: 0 auto !important;
        z-index: 1 !important;
    }

}

/* Mobile override: mostrar las columnas del footer en vertical (apiladas) */
@media (max-width: 420px) {
    .footer-content {
        flex-direction: column !important;
        align-items: stretch;
        justify-content: flex-start;
        gap: 8px;
        width: 100%;
        padding: 0;
        display: block !important;
    }

    /* Hacer que todo el texto ocupe el ancho completo */
    .footer-content .logo,
    .footer-content .contact-info,
    .footer-content .quick-links {
        flex: 0 1 100%;
        width: 100%;
        min-width: 0;
        text-align: left;
        display: block !important;
        padding: 10px 16px;
        box-sizing: border-box;
    }

    /* Logo alineado y con espacio a la izquierda */
    .footer-content .logo {
        display: block;
        padding-left: 12px;
    }

    .footer-content .logo img {
        margin: 0;
        max-width: 160px;
        height: auto;
        display: block !important;
    }

    .footer-content .contact-info,
    .footer-content .quick-links {
        text-align: left;
        padding: 8px 16px;
    }

    /* Enlaces en bloque para ocupar todo el ancho */
    .quick-links a {
        display: block;
        width: 100%;
        margin: 6px 0;
        padding-left: 4px;
    }

    .sco {
        justify-content: flex-start;
        padding-left: 12px;
    }

    .sco li a {
        display: inline-flex;
        margin-right: 12px;
    }

    .footer-copyright-text {
        text-align: left;
        font-size: 12px;
        margin: 12px 16px 6px 16px;
        width: calc(100% - 32px);
    }
}
    

    /* Asegurar separación con la sección naranja por si algún margin negativo la acerca */
    .orange-square-section {
        margin-top: 4vh !important;
    }


/*inicia Colores engramex*/
:root {
    --primary-orange: #ff6600; 
    --text-color-dark: #333;
    --text-color-medium: #666; 
    --button-bg-color: #FFA500;
    --primary-blue: #003366;
    --background-blue-shape: #2b5585; 
    --page-background: #f0f0f0;
    --text-dark: #333333;
    --text-light: #555555;
    --box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
/*Terminan colores engramex*/


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

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;
}

/* Forzar eliminación de sombras y fondos en móviles muy pequeños */
@media (max-width: 430px) {
    .capa { display: none !important; opacity: 0 !important; }
    .video_inicio { background: none !important; }
    .video_inicio .hero-text-content { background: none !important; box-shadow: none !important; padding: 8px !important; border-radius: 0 !important; width: 100% !important; max-width: 100% !important; }
    .hero { background: transparent !important; }
    /* Asegurar que el video esté en el flujo y centrado */
    .hero video#hero-video { object-fit: contain !important; width: 100% !important; height: auto !important; max-height: calc(100vh - 100px) !important; display: block !important; }
}

/* Refuerzo: asegurar centrado del video y layout vertical en móviles pequeños */
@media (max-width: 430px) {
    .hero {
        display: block !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        align-items: initial !important;
        justify-content: initial !important;
    }
    .hero video#hero-video {
        position: relative !important;
        left: 0 !important;
        top: 0 !important;
        margin: 0 auto !important;
        width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
        max-width: 100% !important;
        max-height: calc(100vh - 120px) !important;
        border-bottom-left-radius: 0 !important;
    }
    /* Asegurar que el overlay no empuje el video a un lado */
    .video_inicio { width: 100% !important; left: 0 !important; right: 0 !important; }
}

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

/*----------------------------- LOADING ---------------------------------*/

     /* Estilos para la pantalla de carga que cubre toda la página */
        #loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #ffffff;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999;
            transition: opacity 0.5s ease-in-out;
            overflow: hidden;
        }

        .loading-container {
            width: 80%;
            position: relative;
            height: 200px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* Estilos del engrane, ahora estático */
        .gear {
            width: 100px;
            height: 100px;
            background: #333;
            border-radius: 50%;
            position: absolute;
            bottom: 60px;
        }

        .gear::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 60px;
            height: 60px;
            background: #ffffff;
            border-radius: 50%;
        }

        .gear::after {
            content: '';
            position: absolute;
            width: 150px;
            height: 150px;
            top: -25px;
            left: -25px;
            border-radius: 50%;
            box-shadow: 
                0 -25px 0 10px #333,
                0 25px 0 10px #333,
                -25px 0 0 10px #333,
                25px 0 0 10px #333,
                18px -18px 0 10px #333,
                -18px 18px 0 10px #333,
                18px 18px 0 10px #333,
                -18px -18px 0 10px #333;
        }

        /* Estilos de la cremallera, ahora con animación */
        .rack {
            position: absolute;
            bottom: 20px;
            width: 100%;
            height: 20px;
            background-color: #333;
            overflow: hidden;
        }

        .rack::before {
            content: '';
            width: 200%;
            height: 100%;
            position: absolute;
            background: repeating-linear-gradient(90deg, #555, #555 10px, #333 10px, #333 20px);
            animation: move-rack 4s linear infinite;
        }

        /* Animación de la cremallera */
        @keyframes move-rack {
            from { transform: translateX(0); }
            to { transform: translateX(-50%); }
        }


        /* Estilo para ocultar la pantalla de carga */
        .hidden {
            display: none;
        }
/* Oculta el contenido al principio */
.content {
    display: none;
}

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

.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;
}

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

.nav-links a:hover {
    transform: scale(1.05);
    background-color: rgba(255, 255, 255, 0.2);
    color: #003366;
}

.nav-links li.contacto a {
    color: white;
    padding: 8px 15px;
    transition: color 0.3s ease;
}

.navbar.scrolled {
    background-color: #003366;
    border-bottom-color: #001a33;
}

.nav-links li.contacto a:hover {
    background-color: #e67e00;
    color: white;
    transform: none;
}

.contacto {
    background-color: var(--primary-blue);
    border-radius: 25px;
    transition: background-color 0.3s ease;
}

.contacto a {
    color: white;
    padding: 8px 15px;
}

.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; 
}

@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;
    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;
    left: auto;
    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);
    }

    /* Hero: ocupar ancho y reducir alturas */
    .hero { min-height: 55vh; padding-left: 16px; padding-right: 16px; }
    .video_inicio { width: 100%; padding: 12px 8px; box-sizing: border-box; }
    .video_inicio h1 { font-size: 28px; }
    .video_inicio p { font-size: 14px; }
    .top-left-logo { top: 12px; left: 12px; width: 140px; }

    /* Slider container: más compacto y alto automático */
    .container { width: 98vw; height: auto; margin: 20px auto; padding-bottom: 12px; }
    .container .slide .item {
      position: relative !important;
      top: auto !important;
      left: auto !important;
      transform: none !important;
      width: 95vw !important;
      height: auto !important;
      border-radius: 12px;
      box-shadow: 0 12px 30px rgba(0,0,0,0.12);
      display: block !important;
      margin: 0 auto 18px;
    }
    .container .slide .item .content {
      position: relative !important;
      top: auto !important;
      left: auto !important;
      transform: none !important;
      width: calc(100% - 24px);
      margin: 12px auto 18px;
      background: rgba(0,51,102,0.92);
      color: #fff;
      padding: 14px;
      border-radius: 10px;
      backdrop-filter: none;
    }
    .container .slide .item .content .name-solucion { font-size: 26px; color: var(--primary-orange); }
    .container .slide .item .content .des { color: #fff; font-size: 14px; opacity: 1; }
    .container .slide .item .content button { display: inline-block; margin-top: 10px; }

    /* Controles prev/next: centrar y separar del overlay */
    .button { position: relative; bottom: auto; text-align:center; margin-top: 6px; }
    .button button { width: 46px; height: 36px; }

    /* Evita que el overlay se superponga al contenido principal */
    .content-wrapper, main { padding-top: 10px; }

    /* Ajustes nav / footer para mobile */
    .navbar { height: 60px; padding: 8px 12px; }
}

/* Mobile menu: textos blancos y submenú con fondo azul */
@media (max-width: 768px) {
    /* Asegurar que los enlaces del menú móvil sean blancos */
    .nav-links a {
        color: #ffffff !important;
    }
    /* Fondo del panel del menú (cuando se despliega) */
    .nav-links {
        background-color: var(--primary-blue) !important;
    }
    .nav-links li { border-bottom: 1px solid rgba(255,255,255,0.06) !important; }

    /* Submenú: fondo azul y texto blanco. Oculto por defecto en mobile. */
    .nav-links .dropdown-menu {
        background-color: var(--primary-blue) !important;
        box-shadow: none !important;
        position: static !important;
        width: 100% !important;
        left: 0 !important;
        top: auto !important;
        display: none !important; /* oculto por defecto */
        max-height: 0 !important;
        overflow: hidden !important;
        transition: max-height 0.22s ease-in-out;
    }
    .nav-links .dropdown-menu li a {
        color: #ffffff !important;
        padding: 12px 16px !important;
        display: block !important;
        text-align: left !important;
    }
    .nav-links .dropdown-menu li a:hover {
        background-color: rgba(255,255,255,0.06) !important;
        color: #ffffff !important;
    }

    /* Mostrar submenú solo cuando se agrega la clase de abierto/activo */
    .has-dropdown.open > .dropdown-menu,
    .has-dropdown.active > .dropdown-menu,
    .nav-links .dropdown-menu.show {
        display: block !important;
        max-height: 1000px !important;
        overflow: visible !important;
    }
}


/* Extra small phones (max 420px) */
@media (max-width: 420px) {
  .container .slide .item .content { padding: 12px; width: calc(100% - 20px); }
  .video_inicio h1 { font-size: 22px; }
  .video_inicio p { font-size: 13px; }
  .top-left-logo { width: 110px; }
}

/*-------------------- VIDEO DE FONDO (Sección Hero) ---------------------*/
.hero {
    min-height: calc(100vh - 70px);
    height: auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 5%;
    padding-right: 5%;
    overflow: hidden;
    z-index: 1; 
}

video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-bottom-left-radius: 150px;
    z-index: 1;
}

.capa {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #1c1c1d;
    opacity: 0.5;
    mix-blend-mode: overlay;
    border-bottom-left-radius: 150px;
    z-index: 2; 
}

.top-left-logo {
    position: absolute;
    top: 50px;
    left: 50px;
    width: 300px;
    height: auto;
    z-index: 10;
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
}

.top-left-logo.hidden{
    opacity: 0;
}

.video_inicio {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    width: 60%;
    position: relative;
    z-index: 5;
    height: 100%;
    box-sizing: border-box;
    padding-left: 50px;
}

.hero-text-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0px;
    max-width: 800px;
}

.video_inicio h1 {
    font-size: 50px;
    text-align: left;
    color: var(--primary-blue);
    font-weight: 500;
    font-family: 'Poppins', sans-serif;
    line-height: 1.2;
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
}

.video_inicio p {
    font-size: 25px;
    margin-top: 30px;
    text-align: left;
    color: var(--primary-orange);
    border-radius: 10px;
    font-weight: 700;
    font-family: 'Poppins', sans-serif;
    padding: 10px 15px;
    line-height: 1.5;
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
}

.video_inicio:hover h1,
.video_inicio:hover p {
    opacity: 1;
}

.hero-button-primary {
    display: inline-flex;
    align-items: center; /* Cambiado de 'bottom' a 'center' para centrar mejor el contenido */
    justify-content: center;
    height: 56px;
    padding: 16px;
    background: var(--primary-orange);
    border-radius: 50px;
    text-decoration: none;
    transition: background-color 0.3s ease;
    gap: 10px;
    position: absolute;
    bottom: 50%;
    left: 50%;
    transform: translate(-170%, 400%);
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
    z-index: 5;
}

.hero-button-primary.hidden {
    opacity: 0;
    transform: translate(-50%, -100px);
}

.hero-button-primary span {
    color: white;
    font-size: 20px;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 0.50px;
}

.hero-button-primary .button-icon {
    width: 24px;
    height: 24px;
    background-color: white;
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M10 6L8.59 7.41L13.17 12L8.59 16.59L10 18L16 12L10 6Z"/></svg>') no-repeat center;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M10 6L8.59 7.41L13.17 12L8.59 16.59L10 18L16 12L10 6Z"/></svg>') no-repeat center;
}

.hero-button-primary:hover {
    background: var(--primary-blue);
    opacity: 1;
}
/*------------------------------- SECCIÓN CONTEDOR NARANJA (CUADRADO) --------------------------------*/
.orange-square-section {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: flex-start; 
    padding: 20px; 
    box-sizing: border-box;
    margin: -80px 0 100px; 
    position: relative;
    z-index: 2;
    opacity: 0;
    transform: translateY(50px);
}

.orange-square-section {
    width: 100%;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s ease-in-out, transform 1s ease-in-out;
}

.orange-square-section.visible {
    opacity: 1;
    transform:translateY(0);
    transition: opacity 0.5s ease-in-out;
}

.contenedor-naranja {
    width: 1150px; 
    height: 250px; 
    background-color: var(--primary-orange); 
    display: flex; 
    justify-content: space-around;
    align-items: flex-start;
    padding: 20px;
    box-sizing: border-box;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    flex-wrap: nowrap; 
    margin-left: 0; 
}

.columna {
    flex: 1;
    color: #FFFFFF; 
    padding: 60px;
    text-align: center; 
    margin: 0 10px; 
    border-right: 2px solid white;
}

.contenedor-naranja .columna:last-child {
    border-right: none;
}

.columna p {
    margin: 10px; /* Elimina el margen por defecto de los párrafos */
    line-height: 1.5; /* Espaciado entre líneas para mejor legibilidad */
    font-weight: 900;
    font-family: 'Poppins', sans-serif;
}

.columna h2 {
    font-size: 45px;
    font-weight: 900;
    font-family: 'Poppins', sans-serif;

}


/* Media Queries para Responsividad del cuadrado naranja */
@media (max-width: 900px) {
    .contenedor-naranja {
        width: 90%; /* El cuadrado ocupa el 90% del ancho de la pantalla */
        height: auto; /* La altura se ajusta automáticamente */
        flex-wrap: wrap; /* Las columnas se envuelven a la siguiente línea si no caben */
        margin-left: auto; /* Centra el cuadrado si el ancho es limitado y no hay suficiente espacio a la izquierda */
        margin-right: auto; /* Centra el cuadrado */
    }

    .columna {
        flex: 1 1 100%; /* Cada columna ocupa todo el ancho disponible y se apila */
        margin: 10px 0; /* Margen vertical entre columnas cuando están apiladas */
        border-right: none; /* Eliminar el borde derecho cuando se apilan */
        border-bottom: 2px solid white; /* Añadir un borde inferior entre columnas apiladas */
    }
    .contenedor-naranja .columna:last-child {
        border-bottom: none; /* Eliminar el borde inferior de la última columna apilada */
    }
}

@media (max-width: 600px) {
    .orange-square-section {
        padding: 10px; /* Menos padding en pantallas muy pequeñas */
    }
    .contenedor-naranja {
        width: 95%; /* Ocupa casi todo el ancho */
        padding: 15px; /* Menos padding interno */
    }

    .columna {
        padding: 8px; /* Menos padding interno en las columnas */
    }
}
/*----------------------------- IMÁGENES TALLER (contenedor) ----------------------*/
.container {
    position: relative;
    z-index: 1;
    margin: 50px auto; /* Mantén el margen superior e inferior actual del contenedor si te gusta */
    width: 75%;
    height: 500px;
    background: #f5f5f5;
    box-shadow: 0 30px 50px #dbdbdb;
    max-width: 90%;
}

/* FONDO IMÁGENES PEQUEÑAS */
.container .slide .item{
    width: 200px;
    height: 300px;
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    border-radius: 20px;
    border: 2px solid white;
    box-shadow: 0 30px 50px #ccc;
    background-position: 50% 50%;
    background-size: cover;
    display: inline-block;
    transition: 0.5s;
}

.slide .item:nth-child(1),
.slide .item:nth-child(2){
    top: 0;
    left: 0;
    transform: translate(0, 0);
    border-radius: 0;
    width: 100%;
    height: 100%;
}

.slide .item:nth-child(3){
    left: 50%;
}
.slide .item:nth-child(4){
    left: calc(50% + 220px);
}
.slide .item:nth-child(5){
    left: calc(50% + 440px);
}

.slide .item:nth-child(n + 6){
    left: calc(50% + 660px);
    opacity: 0;
}

/* LETRAS PRODUCTOS*/
.item .content{
    position: absolute;
    top: 50%;
    left: 100px;
    width: 300px;
    text-align: left;
    Color: #eee;
    transform: translate(0, -50);
    font-family: serif;
    display: none;
    backdrop-filter:blur(5px);
    background-color: rgba(0, 51, 102, 0.54);
    border-radius: 10px;
    padding: 20px;
}

.slide .item:nth-child(2) .content{
    display: block;
}

.content .name-solucion{
    font-size: 40px;
    color: var(--primary-orange); /* Usar variable */
    font-weight: bold;
    animation: animate 1s ease-in-out 1 forwards;
}

.content .des{
    margin-top: 10px;
    margin-bottom: 20px;
    opacity: 0;
    animation: animate 1s ease-in-out 0.3s 1 forwards;
}

.content button{
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    opacity: 0;
    animation: animate 1s ease-in-out 0.6s 1 forwards;
    border-radius: 10px;
}
.content button:hover{
    background: var(--primary-orange); /* Usar variable */
    color: #fff;
}

@keyframes animate {
    from{
        opacity:0;
        transform: translate(0, 100px);
        filter: blur(33px)
    }
    to{
        opacity: 1;
        transform: translate(0);
        filter: blur(0);
    }
}

.button{
    width: 100%;
    text-align: center;
    position: absolute;
    bottom: 20px;
}

.button button{
    width: 40px;
    height: 35px;
    border-radius: 8px;
    border: 1px solid #000;
    cursor: pointer;
    margin: 0 5px;
    transition: 0.3s;
}

.button button:hover{
    background: var(--primary-orange); /* Usar variable */
    color: #fff;
}

/*------------------------------- CALIDAD -------------------------------*/

/* Contenedor principal de toda la sección */
.main-container.custom-effect-section { /* Se usa la clase 'custom-effect-section' para diferenciar */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 50px;
    background-color: #f8f8f8; /* Color de fondo para esta sección */
    min-height: 550px; /* Ajusta la altura según necesites */
    position: relative; /* Importante para posicionar la flecha y las imágenes */
    overflow: hidden; /* Evita que la flecha animada o las imágenes se desborden al inicio */
    gap: 30px; /* Espacio entre el texto y el grupo de imágenes/flecha */
    margin: 100px auto; /* Mantén el margen de tu diseño original */
    max-width: 100%; /* Limita el ancho de la sección */
    border-radius: 15px; /* Puedes añadir un border-radius si quieres */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05); /* Sombra suave */
}

/* Estilos para la sección de contenido de texto */
.main-container.custom-effect-section .text-content-section {
    flex: 1; /* Permite que el contenido de texto ocupe espacio */
    max-width: 50%; /* Limita el ancho del texto */
    text-align: left;
    padding: 0; /* Resetea el padding si el main-container lo tiene */
}

/* Estilos para el titular principal (dentro de la sección modificada) */
.main-container.custom-effect-section .headline {
    font-size: 2.5em; /* Ajustado para ser un poco más grande */
    color: var(--primary-orange); /* Usa tu variable de color naranja */
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.2;
}

/* Estilos para el subtítulo/párrafo (dentro de la sección modificada) */
.main-container.custom-effect-section .sub-headline {
    font-size: 1.2em;
    color: var(--text-color-dark); /* Usa tu variable de color oscuro */
    margin-bottom: 30px;
    line-height: 1.5;
}

/* Estilos para el botón principal "Conoce más" (dentro de la sección modificada) */
.main-container.custom-effect-section .cta-button { /* Clase específica para este botón */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--button-bg-color); /* Color naranja del botón */
    color: white;
    padding: 15px 30px;
    border: none;
    border-radius: 50px; /* Bordes redondeados */
    font-size: 1.1em;
    cursor: pointer;
    transition: background-color 0.3s ease;
    text-decoration: none; /* Asegura que el enlace no tenga subrayado */
    display: inline-block; /* Para aplicar padding correctamente */
    font-weight: 700;
}

.main-container.custom-effect-section .cta-button:hover {
    background-color: var(--primary-blue);
}

/* Contenedor para la flecha y las imágenes (lado derecho) */
.arrow-and-images-wrapper {
    position: relative; /* Para posicionar la flecha y las imágenes dentro */
    display: flex;
    flex-direction: column; /* Para apilar la flecha sobre las imágenes */
    align-items: center; /* Centra horizontalmente */
    flex: 1; /* Ocupa el resto del espacio */
    max-width: 100%; /* Limita el ancho */
    height: 100%; /* Ocupa la altura disponible */
    min-height: 400px; /* Asegura que haya suficiente espacio para las imágenes */
    justify-content: flex-end; /* Empuja las imágenes hacia abajo en el contenedor */
}

/* Estilos para el contenedor de la flecha SVG */
.arrow-container {
    position: absolute; /* Posiciona la flecha absolutamente dentro de .arrow-and-images-wrapper */
    width: 800px; /* Ancho de la flecha, ajusta según el tamaño de tu SVG */
    height: auto;
    bottom: -150px; /* Inicia la flecha más abajo para que se vea que sube */
    right: 5%; /* Ajusta la posición horizontal de la flecha. Experimenta con este valor. */
    transform: translateY(100%); /* Comienza oculta abajo, fuera del contenedor visible */
    opacity: 0; /* Opacidad inicial */
    transition: transform 1.2s ease-out, opacity 1.2s ease-out; /* Transición para la animación de la flecha */
    z-index: 1; /* Asegura que la flecha esté sobre las imágenes si es necesario */
}

/* La flecha SVG en sí, con clase para la animación */
.orange-arrow-svg.arrow-animated {
    width: 100%;
    height: auto;
    display: block; /* Para eliminar cualquier espacio extra debajo del SVG */
}

.arrow-container.active {
    transform: translateY(0); /* Sube a su posición final */
    opacity: 1; /* Se hace visible */
    bottom: 0px; /* Posición final de la flecha (ajusta si es necesario) */
    right: 10px;
}


/* Estilos para el grupo de imágenes */
.images-group {
    display: flex;
    gap: 20px; /* Espacio entre las imágenes */
    justify-content: center; /* Centra las imágenes si hay espacio */
    margin-top: auto; /* Empuja las imágenes hacia abajo en el contenedor */
    width: 100%; /* Ocupa todo el ancho disponible */
    padding-top: 50px; /* Espacio para que la flecha suba sin chocar */
}

.image-wrapper {
    width: 400px; /* Ancho de cada contenedor de imagen, ajusta según tu diseño */
    height: 500px; /* Alto de cada contenedor de imagen, ajusta según tu diseño */
    overflow: hidden; /* Para recortar la imagen si es necesario */
    border-radius: 15px; /* Bordes redondeados */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background-color: #fff; /* Un fondo blanco para las imágenes */
    display: flex;
    justify-content: center;
    align-items: center;
}

.animated-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Asegura que la imagen cubra el contenedor */
    transform: translateY(100%); /* Comienza oculta abajo */
    opacity: 0; /* Opacidad inicial */
    transition: transform 1s ease-out, opacity 1s ease-out; /* Transición para la animación */
}

.animated-image.active {
    transform: translateY(0); /* Sube a su posición final */
    opacity: 1; /* Se hace visible */
}

/* Retrasos para las imágenes (aparecen después de la flecha y entre sí) */
#image1.active {
    transition-delay: 0.5s; /* Retraso para la primera imagen */
}

#image2.active {
    transition-delay: 0.8s; /* Retraso para la segunda imagen */
}

/*------------------------------- Locos por Entregar ---------------------------*/
.crazy {
    background-color: var(--page-background); /* Gris claro de fondo */
    color: black; /* Color principal del texto */
    text-align: center; /* Centrar el texto horizontalmente */
    padding: 100px 20px; /* Espacio arriba, abajo y a los lados */

    /* --- CAMBIOS CLAVE PARA CENTRADO VERTICAL Y HORIZONTAL DEL CONTENIDO --- */
    display: flex; /* Habilitar Flexbox */
    justify-content: center; /* Centrar contenido horizontalmente */
    align-items: center; /* Centrar contenido verticalmente */
    min-height: 450px; /* Ajusta esta altura según lo necesites para el centrado vertical */
                               /* Asegura que haya suficiente espacio para centrar */
}

.crazy div {
    width: 100%;
    height: auto; /* Cambiamos a auto para que el contenido determine la altura */
    max-width: 1100px; /* Limitar el ancho del contenido para mejor lectura */
    margin: 0 auto; /* Centrar el div contenedor */
    text-align: center;

    /* --- CAMBIOS PARA CONTROLAR EL ESPACIO ENTRE ELEMENTOS INTERNOS --- */
    display: flex; /* Habilitar Flexbox para el div interno */
    flex-direction: column; /* Apilar los elementos verticalmente */
    justify-content: center; /* Centrar h1, p y button verticalmente dentro de este div */
    align-items: center; /* Centrar h1, p y button horizontalmente */
}

.crazy .titulo {
    margin-top: 0; /* Reiniciamos este margen, ya que Flexbox lo manejará */
    font-size: 50px; /* Tamaño del título */
    margin-bottom: 20px; /* Espacio debajo del título (ajustado para mejor flujo) */
    line-height: 1.3; /* Espaciado entre líneas del título */
}

.crazy .titulo span {
    color: var(--primary-orange); /* Usar variable */
}

.crazy .sub {
    color: var(--primary-blue); /* Letras del párrafo en azul */
    font-size: 25px; /* Tamaño del párrafo */
    line-height: 1.6; /* Espaciado entre líneas del párrafo */
    margin-bottom: 50px; /* *** AUMENTADO: Espacio debajo del párrafo para bajar el botón *** */
}

.crazy .button-action {
    display: inline-block; /* Para poder definir padding y márgenes */
    background-color: var(--primary-orange); /* Fondo naranja del botón */
    color: white; /* Texto blanco del botón */
    padding: 15px 30px; /* Espacio dentro del botón */
    text-decoration: none; /* Quitar subrayado del enlace */
    border-radius: 50px; /* Bordes redondeados del botón */
    font-weight: bold; /* Texto del botón en negrita (opcional) */
    transition: background-color 0.3s ease; /* Transición suave al pasar el ratón */
}

.crazy .button-action:hover {
    background-color: #e65c00; /* Un tono de naranja más oscuro al pasar el ratón */
}

/* Opcional: Media query para hacerlo responsive en pantallas más pequeñas */
@media (max-width: 768px) {
    .crazy {
        padding: 80px 15px;
        min-height: 350px; /* Ajusta la altura mínima para responsive */
    }
    .crazy .titulo { /* Asegúrate de apuntar a la clase .titulo, no a h1 directamente */
        font-size: 2em;
        margin-bottom: 15px; /* Ajuste para pantallas pequeñas */
    }
    .crazy .sub { /* Asegúrate de apuntar a la clase .sub, no a p directamente */
        font-size: 1em;
        margin-bottom: 30px; /* Ajuste para pantallas pequeñas */
    }
    .crazy .button-action {
        padding: 12px 25px;
    }
}

/*----------------------------- ACERCA DE --------------------------------------*/
.about-us-section {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-height: 100%;
  margin: 0px auto;
  padding: 20px;
  box-sizing: border-box;
  overflow: hidden;
}

.content-container {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100%;
}

.text-content {
  margin-bottom: 30px;
}

.main-title {
  font-size: 50px;
  font-weight: 700;
  color: var(--primary-orange);
  margin: 0;
}

.subtitle {
  font-size: 25px;
  font-weight: 400;
  color: var(--primary-blue);
  margin: 5px 0 0 0;
}

.media-wrapper {
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--box-shadow);
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 14px 20px;
}

/* --- CAMBIO AQUÍ: Usamos la clase específica para el video --- */
.video-player {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    border-radius: 14px;
    position: relative;
    transform: none;
    z-index: 2;
    max-height: 60vh;
}

/* Mobile-specific adjustments to keep the video visible and not cropped */
@media (max-width: 600px) {
    .about-us-section .media-wrapper {
        padding: 8px 12px;
    }
    .about-us-section .video-player {
        aspect-ratio: 3/4;
        width: 100%;
        max-height: 35vh;
        border-radius: 12px;
    }
}

@media (max-width: 420px) {
    .about-us-section .media-wrapper {
        padding: 6px 8px;
    }
    .about-us-section .video-player {
        top: 350px;
        aspect-ratio: 3/4;
        width: 100%;
        max-height: 35vh;
    }
}

/* --- Formas de fondo --- */
.background-blue-shape {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 400px;
  background-color: var(--primary-blue);
  z-index: 1;
  clip-path: polygon(0 20%, 100% 30%, 100% 100%, 0 100%);
}


/*------------------------------- SECCIÓN SOCIO ESTRATÉGICO -------------------------------*/
.strategic-partner-section {
    position: relative;
    width: 100%;
    height: 750px; /* Ajusta la altura según sea necesario */
    background-image: url('imag/8208fe7c40359d1f67b1450466cc7a3ff50f072f.png');
    background-size: cover;
    background-position: center bottom; /* Ajuste de la posición del fondo para mostrar más del edificio */
    display: flex;
    justify-content: center; /* Centrar horizontalmente */
    align-items: flex-end; /* Alinear contenido a la parte inferior */
    text-align: center;
    padding-bottom: 50px; /* Espacio desde el borde inferior */
    color: white; /* Color de texto predeterminado */
    overflow: hidden; /* Asegura que el contenido no se desborde */
    margin-top: 100px; /* Añade espacio encima de esta sección */
}

/* Gradiente de superposición para hacer el texto más legible */
.strategic-partner-section .overlay-gradient {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80%; /* Ajusta la altura del gradiente */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0)); /* Gradiente oscuro desde abajo */
    z-index: 1;
}

/* Contenedor para texto y botón */
.strategic-partner-section .content-container {
    position: relative;
    z-index: 2; /* Asegura que el contenido esté por encima de la superposición */
    max-width: 800px; /* Limita el ancho del contenido */
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center; /* Centrar elementos dentro del contenedor */
    gap: 20px; /* Espacio entre elementos */
}

.strategic-partner-section .title {
    font-size: 3em; /* Tamaño de fuente más grande para el título principal */
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 0; /* Sin margen por defecto */
    font-family: 'Poppins', sans-serif; /* Usar Poppins para consistencia */
    margin-bottom: 200px;
}

/* Estilo para resaltar texto en naranja */
.texto-naranja {
    color: var(--primary-orange); /* Usa tu variable de color naranja definida en :root */
}

.strategic-partner-section .subtitle {
    font-size: 1.5em; /* Tamaño de fuente más pequeño para el subtítulo */
    font-weight: 500;
    line-height: 1.4;
    margin-bottom: 0;
    font-family: 'Poppins', sans-serif;
}

/* Estilo para el botón (similar a tu botón hero) */
.strategic-partner-section .button-action {
    display: inline-block;
    background-color: var(--primary-orange); /* Color naranja */
    color: white;
    padding: 15px 30px;
    border-radius: 50px;
    text-decoration: none;
    font-size: 1.1em;
    font-weight: 500;
    transition: background-color 0.3s ease;
    margin-top: 10px; /* Espacio encima del botón */
}

.strategic-partner-section .button-action:hover {
    background-color: #e65c00; /* Naranja más oscuro al pasar el ratón */
}

/*----------------------------- 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,
.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 */
}

/* Si aún tienes estilos en línea en el footer principal, deberías moverlos aquí también */
/* Por ejemplo: */
footer {
    background-color: #003366;
    color: #ffffff;
    padding: 20px;
    text-align: center;
}
/* 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;
}

/* Ajustes Responsivos para pantallas más pequeñas (tabletas y monitores pequeños) */
@media (max-width: 992px) {
    .navbar {
        padding: 10px 15px;
    }
    .nav-links li {
        margin: 0 10px;
    }
    .nav-links a {
        font-size: 16px;
        padding: 6px 10px;
    }
    .hero {
        height: auto; /* Permite que el hero se ajuste al contenido en mobile */
        min-height: 80vh; /* Ajusta el min-height del hero */
        padding-top: 80px; /* Ajusta el padding para el navbar */
        padding-bottom: 50px;
    }
    /* Nueva clase para el contenedor del video con relación de aspecto */
    .video-inicio { 
        position: relative; 
        width:100%; 
        max-width:100%; 
        aspect-ratio: 16/9; 
        overflow:hidden; }
    .video-inicio video, .video-inicio iframe {
        position:absolute; 
        inset:0; 
        width:100%; 
        height:100%; 
        object-fit:cover;
    }
@media (max-width:600px) { .video-inicio { aspect-ratio: 4/3; } }
    .video_inicio h1 {
        font-size: 48px;
        line-height: 1.1;
    }
    .video_inicio p {
        font-size: 16px;
    }
    .hero-button-primary {
        padding: 10px 20px;
        font-size: 18px;
        height: auto;
    }

    .main-container {
        flex-direction: column; /* Apila las secciones de imagen y texto verticalmente */
        height: auto;
        max-width: 90%;
    }
    .image-section {
        height: 250px;
        width: 100%;
        margin-right: 0;
        margin-left: 0;
        margin-bottom: 10px;
        border-radius: 10px; /* Asegura bordes redondeados */
    }
    .image-left, .image-middle {
        margin-left: 0; /* Asegura que no haya margen izquierdo en responsive */
        margin-right: 0;
    }

    .text-content-section {
        padding: 15px;
        padding-top: 30px; /* Menos padding superior en responsive */
        height: auto;
    }
    .headline {
        font-size: 1.8em;
    }
    .sub-headline {
        font-size: 1em;
    }

    .container {
        width: 95%; /* Ajusta el ancho del carrusel */
        height: 500px; /* Ajusta la altura para tabletas */
    }

    /* ACERCA DE (Imagen Original) */
    .about-us-image-section {
        height: auto; /* Permite que la altura se ajuste en móviles */
        max-width: 95%; /* Ocupa más ancho en tabletas */
        padding: 40px 15px; /* Ajusta el padding */
        margin: 30px auto; /* Ajusta margen */
    }
    .about-us-image-section .main-title {
        font-size: 2em;
    }
    .about-us-image-section .subtitle {
        font-size: 1em;
        margin-bottom: 30px;
    }
    .background-blue-shape {
        width: 100%; /* Asegura que la forma azul siga extendiéndose */
        height: 40%; /* Un poco menos de alto para la forma azul en tabletas */
        transform: translateY(30%); /* Ajusta si es necesario */
    }


    /* Responsivo para la Sección de Socio Estratégico */
    .strategic-partner-section {
        height: 500px; /* Ajusta la altura para tabletas */
        padding-bottom: 40px;
    }
    .strategic-partner-section .title {
        font-size: 2.5em;
    }
    .strategic-partner-section .subtitle {
        font-size: 1.2em;
    }
    .strategic-partner-section .button-action {
        padding: 12px 25px;
        font-size: 1em;
    }


    .footer-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .footer-content .logo,
    .footer-content .contact-info,
    .footer-content .quick-links {
        min-width: unset;
        width: 100%;
        margin-bottom: 20px;
    }
    .footer-content .logo p, .contact-info p {
        text-align: center;
    }
    .quick-links p { /* Asegura que el título de enlaces rápidos se centre */
        text-align: center;
    }
    .quick-links a {
        /* Para que los enlaces se centren cuando se apilan */
        width: 100%;
        text-align: center;
    }
    .sco {
        justify-content: center;
    }
}

/* Ajustes Responsivos para pantallas muy pequeñas (teléfonos móviles) */
@media (max-width: 600px) {
    .navbar {
        padding: 8px 10px;
    }
    .overlay-image {
        max-width: 120px;
    }
    .nav-links {
        display: none; /* Podrías implementar un menú hamburguesa aquí */
    }

    .hero {
        padding-left: 20px;
        padding-right: 20px;
        min-height: 60vh; /* Reduce aún más el min-height del hero */
    }
    .video_inicio h1 {
        font-size: 36px;
    }
    .video_inicio p {
        font-size: 14px;
    }
    .hero-button-primary {
        padding: 8px 15px;
        font-size: 16px;
    }

    .headline {
        font-size: 1.5em;
    }
    .sub-headline {
        font-size: 0.9em;
    }
    .button-primary {
        padding: 10px 20px;
        font-size: 0.9em;
    }

    .container {
        height: 400px; /* Ajusta la altura para móviles */
    }
    .container .slide .item {
        width: 150px; /* Ajusta el tamaño de los elementos del slider */
        height: 250px;
    }
    /* Adapta las posiciones de los items del slider si es necesario */

    /* ACERCA DE (Imagen Original) */
    .about-us-image-section {
        padding: 30px 10px;
        margin: 20px auto;
    }
    .about-us-image-section .main-title {
        font-size: 1.8em;
    }
    .about-us-image-section .subtitle {
        font-size: 0.9em;
        margin-bottom: 20px;
    }
    .background-blue-shape {
        height: 30%; /* Menos alto para la forma azul en móviles */
        transform: translateY(20%); /* Ajusta si es necesario */
    }

    /* Responsivo para la Sección de Socio Estratégico */
    .strategic-partner-section {
        height: 400px; /* Ajusta la altura para móvil */
        padding-bottom: 30px;
    }
    .strategic-partner-section .title {
        font-size: 1.8em;
    }
    .strategic-partner-section .subtitle {
        font-size: 1em;
    }
    .strategic-partner-section .overlay-gradient {
        height: 70%; /* Aumenta la altura del gradiente para móvil */
    }

    .footer-content .logo p, .contact-info p, .quick-links p, .quick-links a {
        text-align: center; /* Asegura que todos los textos del footer se centren en móvil */
    }
}

/* Carrusel imágenes taller */
.container {
    position: relative;
    z-index: 1;
    margin: 50px auto;
    width: 75%;
    height: 500px;
    background: #f5f5f5;
    box-shadow: 0 30px 50px #dbdbdb;
    max-width: 90%;
}

.container .slide .item {
    width: 200px;
    height: 300px;
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    border-radius: 20px;
    border: 2px solid white;
    box-shadow: 0 30px 50px #ccc;
    background-position: 50% 50%;
    background-size: cover;
    display: inline-block;
    transition: 0.5s;
}

.slide .item:nth-child(1),
.slide .item:nth-child(2) {
    top: 0;
    left: 0;
    transform: translate(0, 0);
    border-radius: 0;
    width: 100%;
    height: 100%;
}

.slide .item:nth-child(3) {
    left: 50%;
}
.slide .item:nth-child(4) {
    left: calc(50% + 220px);
}
.slide .item:nth-child(5) {
    left: calc(50% + 440px);
}

.slide .item:nth-child(n + 6) {
    left: calc(50% + 660px);
    opacity: 0;
}

/* Responsive para tabletas */
@media (max-width: 992px) {
    .container {
        width: 98vw;
        height: 320px;
        margin: 20px auto;
        max-width: 100%;
    }
    .container .slide .item {
        width: 80vw;
        height: 220px;
        left: 0 !important;
        top: 0 !important;
        position: absolute;
        border-radius: 10px;
        /* Elimina cualquier display: none; para mostrar todas las imágenes */
        display: inline-block;
        opacity: 1;
    }
}

/* Responsive para móviles */
@media (max-width: 600px) {
    .container {
        width: 98vw;
        height: 220px;
        margin: 10px auto;
    }
    .container .slide .item {
        width: 95vw;
        height: 180px;
        left: 0 !important;
        top: 0 !important;
        position: absolute;
        border-radius: 10px;
        /* Elimina cualquier display: none; para mostrar todas las imágenes */
        display: inline-block;
        opacity: 1;
    }
}

/* ----------------------------------------- */
/* Ensure footer full-width only on small phones */
@media (max-width: 420px) {
    footer, footer * { box-sizing: border-box; }
    footer .footer-content { display: block !important; width: 100% !important; padding: 0 !important; text-align: center;}
    footer .footer-content > * { display: block !important; width: 350% !important; padding: 0 12px !important; text-align: center !important; }
    footer .footer-content a { display: block !important; width: 350% !important; padding: 6px 0 !important; text-align: center !important; }
    footer .footer-content p { display: block !important; width: 350% !important; padding: 6px 0 !important; text-align: center !important; }
    footer .footer-copyright-text { display: block !important; width: 100% !important; margin: 0 0 6px 0 !important; padding: 0 12px !important; text-align: center !important; }
    footer .contact-info p { display: block !important; width: 350% !important; padding: 6px 0 !important; text-align: center !important; }
    footer .sco a { display: block !important; width: 750% !important; padding: 6px 0 !important; text-align: center !important; }
}

/* Restore desktop/tablet footer layout to avoid PC visual changes */
@media (min-width: 421px) {
    .footer-content { display: flex !important; flex-direction: row !important; justify-content: space-between !important; align-items: flex-start !important; max-width: 1200px; margin: 0 auto; gap: 20px; padding: 0 20px; }
    .footer-content .logo, .footer-content .contact-info, .footer-content .quick-links { flex: 1 !important; min-width: 280px !important; max-width: 100% !important; width: auto !important; padding: 0 10px !important; text-align: left !important; }
    .quick-links a { display: inline-block !important; width: auto !important; padding: 2px 5px !important; }
    .sco li a { display: inline-flex !important; }
}


/* Ajustes: adaptar strategic-partner-section (título y botón) en tablet y móvil */
@media (max-width: 992px) {
    .strategic-partner-section .content-container {
        position: relative !important;
        z-index: 30 !important;
        padding: 120px 18px !important;
        max-width: 980px !important;
        margin: 0 auto !important;
        text-align: center !important;
    }

    .strategic-partner-section .title {
        font-size: 2.6rem !important;
        line-height: 1.02 !important;
        color: #f6f1f1 !important;
        margin: 100px 10px 8px !important;
        text-wrap: balance !important;
    }

    .strategic-partner-section .texto-naranja {
        color: var(--primary-orange) !important;
        display: inline-block !important;
    }

    .strategic-partner-section .subtitle {
        color: rgba(0,51,102,0.95) !important;
        font-size: 1rem !important;
        max-width: 760px !important;
        margin: 8px auto 0 !important;
    }

    .strategic-partner-section .button-action {
        display: inline-block !important;
        margin: 30px auto 0 !important;
        padding: 14px 30px !important;
        font-size: 1rem !important;
        border-radius: 28px !important;
        background: var(--primary-orange) !important;
        color: #fff !important;
        text-decoration: none !important;
        box-shadow: 0 10px 20px rgba(0,0,0,0.18) !important;
    }
}

@media (max-width: 430px) {
    .strategic-partner-section .content-container { padding: 28px 12px !important; }
    .strategic-partner-section .title { font-size: 1.8rem !important; line-height: 1.08 !important; }
    .strategic-partner-section .subtitle { font-size: 0.95rem !important; }
    .strategic-partner-section .button-action { padding: 12px 24px !important; font-size: 0.95rem !important; }
}

/* Ajustes: adaptar main-container y la flecha para que queden acorde a las imágenes */
@media (max-width: 992px) {
    .main-container.custom-effect-section {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 24px !important;
        padding: 18px !important;
    }

    .main-container.custom-effect-section .text-content-section {
        max-width: 92% !important;
        text-align: center !important;
    }

    .main-container.custom-effect-section .headline {
        font-size: 2.2rem !important;
        line-height: 1.05 !important;
        margin: 0 !important;
    }

    .main-container.custom-effect-section .sub-headline {
        font-size: 1rem !important;
        max-width: 640px !important;
        margin: 8px auto 0 !important;
    }

    .arrow-and-images-wrapper {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 18px !important;
    }

    .arrow-container {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
    }

    .arrow-container svg {
        width: min(920px, 100%) !important;
        height: auto !important;
        transform: none !important;
    }

    .images-group {
        display: flex !important;
        gap: 14px !important;
        justify-content: center !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
    }

    .image-wrapper {
        width: 46% !important;
        max-width: 240px !important;
        border-radius: 12px !important;
        overflow: hidden !important;
    }

    .image-wrapper img { display: block !important; width: 100% !important; height: auto !important; }
}

/* Ajustes específicos para pantallas muy pequeñas para mantener proporciones */
@media (max-width: 430px) {
    .main-container.custom-effect-section { padding: 12px !important; gap: 12px !important; }
    /* Separar el titular de las flechas sin mover las flechas (las flechas están en .container) */
    .main-container.custom-effect-section .headline { font-size: 1.8rem !important; margin-top:58px !important; }
    .main-container.custom-effect-section .sub-headline { font-size: 0.95rem !important; }
    .arrow-container svg { width: 540px !important; }
    /* Acercar las imágenes al botón 'Conoce más' reduciendo el espacio entre secciones */
    .main-container.custom-effect-section { padding-bottom: 8px !important; }
    .arrow-and-images-wrapper { margin-top: -116px !important; }
    .images-group { gap: 10px !important; margin-top: -6px !important; }
    .image-wrapper { width: 44% !important; max-width: 180px !important; }
}

/* Específico: Ajustes para teléfonos muy pequeños (<= 430px) - forzar 430x932 o menor */
@media (max-width: 430px) {
    /* Ajustes móviles: subir el video hacia el navbar y darle mayor altura */
    .hero {
        min-height: auto;
        height: auto;
        padding-left: 0;
        padding-right: 0;
        padding-top: 2vh; /* espacio pequeño arriba */
        padding-bottom: 14vh; /* espacio para separar del siguiente bloque */
        box-sizing: border-box;
        position: relative; /* para que el overlay absoluto se posicione respecto al hero */
    }

    /* El video ocupa más altura y se desplaza hacia arriba (pegado al navbar) */
    .hero video#hero-video {
        position: relative; /* en el flujo para que el hero tenga su altura */
        left: 0;
        top: -12vh; /* subir el video hacia el navbar */
        width: auto;
        height: 78vh; /* aumentar espacio vertical ocupado */
        max-height: calc(100vh - 60px); /* limitar para evitar overflow */
        max-width: 100%;
        object-fit: contain; /* muestra todo el cuadro del video sin recortar */
        transform: none;
        border-bottom-left-radius: 0; /* evitar radios que corten en móvil */
        z-index: 1;
        display: block;
        margin: 0 auto;
    }

    /* Overlay: colocar el contenido al fondo para no tapar el video en móviles pequeños */
    .video_inicio {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0; /* anclado al fondo del hero */
        width: 100%;
        z-index: 3;
        display: flex;
        align-items: flex-end; /* contenido en la parte inferior */
        justify-content: center;
        padding: 12px 12px 20px 12px;
        box-sizing: border-box;
        pointer-events: none; /* permitir tocar el video fuera de elementos */
        background: linear-gradient(180deg, rgba(0,0,0,0.0) 0%, rgba(0,0,0,0.45) 70%);
        gap: 8px;
    }
    .video_inicio .hero-text-content { pointer-events: auto; width: 100%; max-width: 420px; margin: 0 auto; background: rgba(0,0,0,0.35); padding: 12px; border-radius: 10px; }
    .video_inicio h1 { font-size: 1.2rem; color: #ffffff; line-height: 1.1; text-align: center; margin: 0 0 6px 0; }
    .video_inicio p { font-size: 0.95rem; color: #fff; text-align: center; margin: 0; }
    .hero-button-primary { position: relative; transform: none; bottom: auto; left: auto; padding: 10px 14px; pointer-events: auto; display: inline-flex; margin-top: 8px; }

    .top-left-logo { position: absolute; left: 10px; top: 8px; width: 90px; z-index: 4; }

    /* Evitar overflow horizontal */
    body { overflow-x: hidden; }
}

/* Mejoras: overlay ocupa ancho completo en móviles muy pequeños y se oculta texto lateral */
@media (max-width: 430px) {
    .video_inicio .hero-text-content {
        max-width: none;
        width: calc(100% - 24px);
        background: rgba(0,0,0,0.35);
        border-radius: 6px;
        padding: 12px 14px;
    }
    .hero video#hero-video {
        display: block;
        margin: 0 auto;
        width: auto;
        height: 72vh; /* ocupar más alto */
        max-height: calc(100vh - 100px);
        max-width: 100%;
        object-fit: contain;
        position: relative;
        top: -6vh; /* subir ligeramente el video */
    }
    /* Ocultar posibles elementos laterales dentro del hero que interfieran */
    .hero > *:not(video):not(.video_inicio):not(.top-left-logo):not(.capa) {
        display: none !important;
    }
}

/* Ajustes: aumentar altura del contenedor de imágenes para mejor visualización */
.container {
    height: 700px !important;
}

.image-wrapper {
    width: 500px !important;
    height: 650px !important;
}

.arrow-and-images-wrapper {
    min-height: 650px !important;
}

@media (max-width: 992px) {
    .container { height: 520px !important; }
    .image-wrapper { width: 420px !important; height: 480px !important; }
    .arrow-and-images-wrapper { min-height: 520px !important; }
}

@media (max-width: 600px) {
    .container { height: 360px !important; }
    .image-wrapper { width: 95vw !important; height: 220px !important; }
    .arrow-and-images-wrapper { min-height: 360px !important; }
}
* {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/*inicia Colores engramex*/
:root {
    --primary-orange: #ff6600; 
    --text-color-dark: #333;
    --text-color-medium: #666; 
    --button-bg-color: #FFA500;
    --primary-blue: #003366;
    --background-blue-shape: #2b5585; 
    --page-background: #f0f0f0;
    --text-dark: #333333;
    --text-light: #555555;
    --box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
/*Terminan colores engramex*/


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

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;
}

/*----------------------------- LOADING ---------------------------------*/

     /* Estilos para la pantalla de carga que cubre toda la página */
        #loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #ffffff;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999;
            transition: opacity 0.5s ease-in-out;
            overflow: hidden;
        }

        .loading-container {
            width: 80%;
            position: relative;
            height: 200px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* Estilos del engrane, ahora estático */
        .gear {
            width: 100px;
            height: 100px;
            background: #333;
            border-radius: 50%;
            position: absolute;
            bottom: 60px;
        }

        .gear::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 60px;
            height: 60px;
            background: #ffffff;
            border-radius: 50%;
        }

        .gear::after {
            content: '';
            position: absolute;
            width: 150px;
            height: 150px;
            top: -25px;
            left: -25px;
            border-radius: 50%;
            box-shadow: 
                0 -25px 0 10px #333,
                0 25px 0 10px #333,
                -25px 0 0 10px #333,
                25px 0 0 10px #333,
                18px -18px 0 10px #333,
                -18px 18px 0 10px #333,
                18px 18px 0 10px #333,
                -18px -18px 0 10px #333;
        }

        /* Estilos de la cremallera, ahora con animación */
        .rack {
            position: absolute;
            bottom: 20px;
            width: 100%;
            height: 20px;
            background-color: #333;
            overflow: hidden;
        }

        .rack::before {
            content: '';
            width: 200%;
            height: 100%;
            position: absolute;
            background: repeating-linear-gradient(90deg, #555, #555 10px, #333 10px, #333 20px);
            animation: move-rack 4s linear infinite;
        }

        /* Animación de la cremallera */
        @keyframes move-rack {
            from { transform: translateX(0); }
            to { transform: translateX(-50%); }
        }


        /* Estilo para ocultar la pantalla de carga */
        .hidden {
            display: none;
        }
/* Oculta el contenido al principio */
.content {
    display: none;
}

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

.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;
}

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

.nav-links a:hover {
    transform: scale(1.05);
    background-color: rgba(255, 255, 255, 0.2);
    color: #003366;
}

.nav-links li.contacto a {
    color: white;
    padding: 8px 15px;
    transition: color 0.3s ease;
}

.navbar.scrolled {
    background-color: #003366;
    border-bottom-color: #001a33;
}

.nav-links li.contacto a:hover {
    background-color: #e67e00;
    color: white;
    transform: none;
}

.contacto {
    background-color: var(--primary-blue);
    border-radius: 25px;
    transition: background-color 0.3s ease;
}

.contacto a {
    color: white;
    padding: 8px 15px;
}

.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; 
}

@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;
    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;
    left: auto;
    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);
    }

    /* Hero: ocupar ancho y reducir alturas */
    .hero { min-height: 55vh; padding-left: 16px; padding-right: 16px; }
    .video_inicio { width: 100%; padding: 12px 8px; box-sizing: border-box; }
    .video_inicio h1 { font-size: 28px; }
    .video_inicio p { font-size: 14px; }
    .top-left-logo { top: 12px; left: 12px; width: 140px; }

    /* Slider container: más compacto y alto automático */
    .container { width: 98vw; height: auto; margin: 20px auto; padding-bottom: 12px; }
    .container .slide .item {
      position: relative !important;
      top: auto !important;
      left: auto !important;
      transform: none !important;
      width: 95vw !important;
      height: auto !important;
      border-radius: 12px;
      box-shadow: 0 12px 30px rgba(0,0,0,0.12);
      display: block !important;
      margin: 0 auto 18px;
    }
    .container .slide .item .content {
      position: relative !important;
      top: auto !important;
      left: auto !important;
      transform: none !important;
      width: calc(100% - 24px);
      margin: 12px auto 18px;
      background: rgba(0,51,102,0.92);
      color: #fff;
      padding: 14px;
      border-radius: 10px;
      backdrop-filter: none;
    }
    .container .slide .item .content .name-solucion { font-size: 26px; color: var(--primary-orange); }
    .container .slide .item .content .des { color: #fff; font-size: 14px; opacity: 1; }
    .container .slide .item .content button { display: inline-block; margin-top: 10px; }

    /* Controles prev/next: centrar y separar del overlay */
    .button { position: relative; bottom: auto; text-align:center; margin-top: 6px; }
    .button button { width: 46px; height: 36px; }

    /* Evita que el overlay se superponga al contenido principal */
    .content-wrapper, main { padding-top: 10px; }

    /* Ajustes nav / footer para mobile */
    .navbar { height: 60px; padding: 8px 12px; }
}

/* Extra small phones (max 420px) */
@media (max-width: 420px) {
  .container .slide .item .content { padding: 12px; width: calc(100% - 20px); }
  .video_inicio h1 { font-size: 22px; }
  .video_inicio p { font-size: 13px; }
  .top-left-logo { width: 110px; }
}

/*-------------------- VIDEO DE FONDO (Sección Hero) ---------------------*/
.hero {
    min-height: calc(100vh - 70px);
    height: auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 5%;
    padding-right: 5%;
    overflow: hidden;
    z-index: 1; 
}

video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-bottom-left-radius: 150px;
    z-index: 1;
}

.capa {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #1c1c1d;
    opacity: 0.5;
    mix-blend-mode: overlay;
    border-bottom-left-radius: 150px;
    z-index: 2; 
}

.top-left-logo {
    position: absolute;
    top: 50px;
    left: 50px;
    width: 300px;
    height: auto;
    z-index: 10;
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
}

.top-left-logo.hidden{
    opacity: 0;
}

.video_inicio {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    width: 60%;
    position: relative;
    z-index: 5;
    height: 100%;
    box-sizing: border-box;
    padding-left: 50px;
}

.hero-text-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0px;
    max-width: 800px;
}

.video_inicio h1 {
    font-size: 50px;
    text-align: left;
    color: var(--primary-blue);
    font-weight: 500;
    font-family: 'Poppins', sans-serif;
    line-height: 1.2;
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
}

.video_inicio p {
    font-size: 25px;
    margin-top: 30px;
    text-align: left;
    color: var(--primary-orange);
    border-radius: 10px;
    font-weight: 700;
    font-family: 'Poppins', sans-serif;
    padding: 10px 15px;
    line-height: 1.5;
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
}

.video_inicio:hover h1,
.video_inicio:hover p {
    opacity: 1;
}

.hero-button-primary {
    display: inline-flex;
    align-items: center; /* Cambiado de 'bottom' a 'center' para centrar mejor el contenido */
    justify-content: center;
    height: 56px;
    padding: 16px;
    background: var(--primary-orange);
    border-radius: 50px;
    text-decoration: none;
    transition: background-color 0.3s ease;
    gap: 10px;
    position: absolute;
    bottom: 50%;
    left: 50%;
    transform: translate(-170%, 400%);
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
    z-index: 5;
}

.hero-button-primary.hidden {
    opacity: 0;
    transform: translate(-50%, -100px);
}

.hero-button-primary span {
    color: white;
    font-size: 20px;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 0.50px;
}

.hero-button-primary .button-icon {
    width: 24px;
    height: 24px;
    background-color: white;
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M10 6L8.59 7.41L13.17 12L8.59 16.59L10 18L16 12L10 6Z"/></svg>') no-repeat center;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M10 6L8.59 7.41L13.17 12L8.59 16.59L10 18L16 12L10 6Z"/></svg>') no-repeat center;
}

.hero-button-primary:hover {
    background: var(--primary-blue);
    opacity: 1;
}
/*------------------------------- SECCIÓN CONTENEDOR NARANJA (CUADRADO) --------------------------------*/
.orange-square-section {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: flex-start; 
    padding: 20px; 
    box-sizing: border-box;
    margin: -80px 0 100px; 
    position: relative;
    z-index: 2;
    opacity: 0;
    transform: translateY(50px);
}

.orange-square-section {
    width: 100%;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s ease-in-out, transform 1s ease-in-out;
}

.orange-square-section.visible {
    opacity: 1;
    transform:translateY(0);
    transition: opacity 0.5s ease-in-out;
}

.contenedor-naranja {
    width: 1150px; 
    height: 250px; 
    background-color: var(--primary-orange); 
    display: flex; 
    justify-content: space-around;
    align-items: flex-start;
    padding: 20px;
    box-sizing: border-box;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    flex-wrap: nowrap; 
    margin-left: 0; 
}

.columna {
    flex: 1;
    color: #FFFFFF; 
    padding: 40px;
    text-align: center; 
    margin: 0 10px; 
    border-right: 2px solid white;
}

.contenedor-naranja .columna:last-child {
    border-right: none;
}

.columna p {
    margin: 5px; /* Elimina el margen por defecto de los párrafos */
    line-height: 1.5; /* Espaciado entre líneas para mejor legibilidad */
    font-weight: 900;
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
}

.columna h2 {
    font-size: 60px;
    font-weight: 900;
    font-family: 'Poppins', sans-serif;

}


/* Media Queries para Responsividad del cuadrado naranja */
@media (max-width: 900px) {
    .contenedor-naranja {
        width: 90%; /* El cuadrado ocupa el 90% del ancho de la pantalla */
        height: auto; /* La altura se ajusta automáticamente */
        flex-wrap: wrap; /* Las columnas se envuelven a la siguiente línea si no caben */
        margin-left: auto; /* Centra el cuadrado si el ancho es limitado y no hay suficiente espacio a la izquierda */
        margin-right: auto; /* Centra el cuadrado */
    }

    .columna {
        flex: 1 1 100%; /* Cada columna ocupa todo el ancho disponible y se apila */
        margin: 10px 0; /* Margen vertical entre columnas cuando están apiladas */
        border-right: none; /* Eliminar el borde derecho cuando se apilan */
        border-bottom: 2px solid white; /* Añadir un borde inferior entre columnas apiladas */
    }
    .contenedor-naranja .columna:last-child {
        border-bottom: none; /* Eliminar el borde inferior de la última columna apilada */
    }
}

@media (max-width: 600px) {
    .orange-square-section {
        padding: 10px; /* Menos padding en pantallas muy pequeñas */
    }
    .contenedor-naranja {
        width: 95%; /* Ocupa casi todo el ancho */
        padding: 15px; /* Menos padding interno */
    }

    .columna {
        padding: 8px; /* Menos padding interno en las columnas */
    }
}
/*----------------------------- IMÁGENES TALLER (contenedor) ----------------------*/
.container {
    position: relative;
    z-index: 1;
    margin: 50px auto; /* Mantén el margen superior e inferior actual del contenedor si te gusta */
    width: 75%;
    height: 500px;
    background: #f5f5f5;
    box-shadow: 0 30px 50px #dbdbdb;
    max-width: 90%;
}

/* FONDO IMÁGENES PEQUEÑAS */
.container .slide .item{
    width: 200px;
    height: 300px;
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    border-radius: 20px;
    border: 2px solid white;
    box-shadow: 0 30px 50px #ccc;
    background-position: 50% 50%;
    background-size: cover;
    display: inline-block;
    transition: 0.5s;
}

.slide .item:nth-child(1),
.slide .item:nth-child(2){
    top: 0;
    left: 0;
    transform: translate(0, 0);
    border-radius: 0;
    width: 100%;
    height: 100%;
}

.slide .item:nth-child(3){
    left: 50%;
}
.slide .item:nth-child(4){
    left: calc(50% + 220px);
}
.slide .item:nth-child(5){
    left: calc(50% + 440px);
}

.slide .item:nth-child(n + 6){
    left: calc(50% + 660px);
    opacity: 0;
}

/* LETRAS PRODUCTOS*/
.item .content{
    position: absolute;
    top: 50%;
    left: 100px;
    width: 300px;
    text-align: left;
    Color: #eee;
    transform: translate(0, -50);
    font-family: serif;
    display: none;
    backdrop-filter:blur(5px);
    background-color: rgba(0, 51, 102, 0.54);
    border-radius: 10px;
    padding: 20px;
}

.slide .item:nth-child(2) .content{
    display: block;
}

.content .name-solucion{
    font-size: 40px;
    color: var(--primary-orange); /* Usar variable */
    font-weight: bold;
    animation: animate 1s ease-in-out 1 forwards;
}

.content .des{
    margin-top: 10px;
    margin-bottom: 20px;
    opacity: 0;
    animation: animate 1s ease-in-out 0.3s 1 forwards;
}

.content button{
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    opacity: 0;
    animation: animate 1s ease-in-out 0.6s 1 forwards;
    border-radius: 10px;
}
.content button:hover{
    background: var(--primary-orange); /* Usar variable */
    color: #fff;
}

@keyframes animate {
    from{
        opacity:0;
        transform: translate(0, 100px);
        filter: blur(33px)
    }
    to{
        opacity: 1;
        transform: translate(0);
        filter: blur(0);
    }
}

.button{
    width: 100%;
    text-align: center;
    position: absolute;
    bottom: 20px;
}

.button button{
    width: 40px;
    height: 35px;
    border-radius: 8px;
    border: 1px solid #000;
    cursor: pointer;
    margin: 0 5px;
    transition: 0.3s;
}

.button button:hover{
    background: var(--primary-orange); /* Usar variable */
    color: #fff;
}

/*------------------------------- CALIDAD -------------------------------*/

/* Contenedor principal de toda la sección */
.main-container.custom-effect-section { /* Se usa la clase 'custom-effect-section' para diferenciar */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 50px;
    background-color: #f8f8f8; /* Color de fondo para esta sección */
    min-height: 550px; /* Ajusta la altura según necesites */
    position: relative; /* Importante para posicionar la flecha y las imágenes */
    overflow: hidden; /* Evita que la flecha animada o las imágenes se desborden al inicio */
    gap: 30px; /* Espacio entre el texto y el grupo de imágenes/flecha */
    margin: 100px auto; /* Mantén el margen de tu diseño original */
    max-width: 100%; /* Limita el ancho de la sección */
    border-radius: 15px; /* Puedes añadir un border-radius si quieres */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05); /* Sombra suave */
}

/* Estilos para la sección de contenido de texto */
.main-container.custom-effect-section .text-content-section {
    flex: 1; /* Permite que el contenido de texto ocupe espacio */
    max-width: 50%; /* Limita el ancho del texto */
    text-align: left;
    padding: 0; /* Resetea el padding si el main-container lo tiene */
}

/* Estilos para el titular principal (dentro de la sección modificada) */
.main-container.custom-effect-section .headline {
    font-size: 2.5em; /* Ajustado para ser un poco más grande */
    color: var(--primary-orange); /* Usa tu variable de color naranja */
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.2;
}

/* Estilos para el subtítulo/párrafo (dentro de la sección modificada) */
.main-container.custom-effect-section .sub-headline {
    font-size: 1.2em;
    color: var(--text-color-dark); /* Usa tu variable de color oscuro */
    margin-bottom: 30px;
    line-height: 1.5;
}

/* Estilos para el botón principal "Conoce más" (dentro de la sección modificada) */
.main-container.custom-effect-section .cta-button { /* Clase específica para este botón */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--button-bg-color); /* Color naranja del botón */
    color: white;
    padding: 15px 30px;
    border: none;
    border-radius: 50px; /* Bordes redondeados */
    font-size: 1.1em;
    cursor: pointer;
    transition: background-color 0.3s ease;
    text-decoration: none; /* Asegura que el enlace no tenga subrayado */
    display: inline-block; /* Para aplicar padding correctamente */
    font-weight: 700;
}

.main-container.custom-effect-section .cta-button:hover {
    background-color: var(--primary-blue);
}

/* Contenedor para la flecha y las imágenes (lado derecho) */
.arrow-and-images-wrapper {
    position: relative; /* Para posicionar la flecha y las imágenes dentro */
    display: flex;
    flex-direction: column; /* Para apilar la flecha sobre las imágenes */
    align-items: center; /* Centra horizontalmente */
    flex: 1; /* Ocupa el resto del espacio */
    max-width: 100%; /* Limita el ancho */
    height: 100%; /* Ocupa la altura disponible */
    min-height: 400px; /* Asegura que haya suficiente espacio para las imágenes */
    justify-content: flex-end; /* Empuja las imágenes hacia abajo en el contenedor */
}

/* Estilos para el contenedor de la flecha SVG */
.arrow-container {
    position: absolute; /* Posiciona la flecha absolutamente dentro de .arrow-and-images-wrapper */
    width: 800px; /* Ancho de la flecha, ajusta según el tamaño de tu SVG */
    height: auto;
    bottom: -150px; /* Inicia la flecha más abajo para que se vea que sube */
    right: 5%; /* Ajusta la posición horizontal de la flecha. Experimenta con este valor. */
    transform: translateY(100%); /* Comienza oculta abajo, fuera del contenedor visible */
    opacity: 0; /* Opacidad inicial */
    transition: transform 1.2s ease-out, opacity 1.2s ease-out; /* Transición para la animación de la flecha */
    z-index: 1; /* Asegura que la flecha esté sobre las imágenes si es necesario */
}

/* La flecha SVG en sí, con clase para la animación */
.orange-arrow-svg.arrow-animated {
    width: 100%;
    height: auto;
    display: block; /* Para eliminar cualquier espacio extra debajo del SVG */
}

.arrow-container.active {
    transform: translateY(0); /* Sube a su posición final */
    opacity: 1; /* Se hace visible */
    bottom: 0px; /* Posición final de la flecha (ajusta si es necesario) */
    right: 10px;
}


/* Estilos para el grupo de imágenes */
.images-group {
    display: flex;
    gap: 20px; /* Espacio entre las imágenes */
    justify-content: center; /* Centra las imágenes si hay espacio */
    margin-top: auto; /* Empuja las imágenes hacia abajo en el contenedor */
    width: 100%; /* Ocupa todo el ancho disponible */
    padding-top: 50px; /* Espacio para que la flecha suba sin chocar */
}

.image-wrapper {
    width: 400px; /* Ancho de cada contenedor de imagen, ajusta según tu diseño */
    height: 500px; /* Alto de cada contenedor de imagen, ajusta según tu diseño */
    overflow: hidden; /* Para recortar la imagen si es necesario */
    border-radius: 15px; /* Bordes redondeados */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background-color: #fff; /* Un fondo blanco para las imágenes */
    display: flex;
    justify-content: center;
    align-items: center;
}

.animated-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Asegura que la imagen cubra el contenedor */
    transform: translateY(100%); /* Comienza oculta abajo */
    opacity: 0; /* Opacidad inicial */
    transition: transform 1s ease-out, opacity 1s ease-out; /* Transición para la animación */
}

.animated-image.active {
    transform: translateY(0); /* Sube a su posición final */
    opacity: 1; /* Se hace visible */
}

/* Retrasos para las imágenes (aparecen después de la flecha y entre sí) */
#image1.active {
    transition-delay: 0.5s; /* Retraso para la primera imagen */
}

#image2.active {
    transition-delay: 0.8s; /* Retraso para la segunda imagen */
}

/*------------------------------- Locos por Entregar ---------------------------*/
.crazy {
    background-color: var(--page-background); /* Gris claro de fondo */
    color: black; /* Color principal del texto */
    text-align: center; /* Centrar el texto horizontalmente */
    padding: 100px 20px; /* Espacio arriba, abajo y a los lados */

    /* --- CAMBIOS CLAVE PARA CENTRADO VERTICAL Y HORIZONTAL DEL CONTENIDO --- */
    display: flex; /* Habilitar Flexbox */
    justify-content: center; /* Centrar contenido horizontalmente */
    align-items: center; /* Centrar contenido verticalmente */
    min-height: 450px; /* Ajusta esta altura según lo necesites para el centrado vertical */
                               /* Asegura que haya suficiente espacio para centrar */
}

.crazy div {
    width: 100%;
    height: auto; /* Cambiamos a auto para que el contenido determine la altura */
    max-width: 1100px; /* Limitar el ancho del contenido para mejor lectura */
    margin: 0 auto; /* Centrar el div contenedor */
    text-align: center;

    /* --- CAMBIOS PARA CONTROLAR EL ESPACIO ENTRE ELEMENTOS INTERNOS --- */
    display: flex; /* Habilitar Flexbox para el div interno */
    flex-direction: column; /* Apilar los elementos verticalmente */
    justify-content: center; /* Centrar h1, p y button verticalmente dentro de este div */
    align-items: center; /* Centrar h1, p y button horizontalmente */
}

.crazy .titulo {
    margin-top: 0; /* Reiniciamos este margen, ya que Flexbox lo manejará */
    font-size: 50px; /* Tamaño del título */
    margin-bottom: 20px; /* Espacio debajo del título (ajustado para mejor flujo) */
    line-height: 1.3; /* Espaciado entre líneas del título */
}

.crazy .titulo span {
    color: var(--primary-orange); /* Usar variable */
}

.crazy .sub {
    color: var(--primary-blue); /* Letras del párrafo en azul */
    font-size: 25px; /* Tamaño del párrafo */
    line-height: 1.6; /* Espaciado entre líneas del párrafo */
    margin-bottom: 50px; /* *** AUMENTADO: Espacio debajo del párrafo para bajar el botón *** */
}

.crazy .button-action {
    display: inline-block; /* Para poder definir padding y márgenes */
    background-color: var(--primary-orange); /* Fondo naranja del botón */
    color: white; /* Texto blanco del botón */
    padding: 15px 30px; /* Espacio dentro del botón */
    text-decoration: none; /* Quitar subrayado del enlace */
    border-radius: 50px; /* Bordes redondeados del botón */
    font-weight: bold; /* Texto del botón en negrita (opcional) */
    transition: background-color 0.3s ease; /* Transición suave al pasar el ratón */
}

.crazy .button-action:hover {
    background-color: #e65c00; /* Un tono de naranja más oscuro al pasar el ratón */
}

/* Opcional: Media query para hacerlo responsive en pantallas más pequeñas */
@media (max-width: 768px) {
    .crazy {
        padding: 80px 15px;
        min-height: 350px; /* Ajusta la altura mínima para responsive */
    }
    .crazy .titulo { /* Asegúrate de apuntar a la clase .titulo, no a h1 directamente */
        font-size: 2em;
        margin-bottom: 15px; /* Ajuste para pantallas pequeñas */
    }
    .crazy .sub { /* Asegúrate de apuntar a la clase .sub, no a p directamente */
        font-size: 1em;
        margin-bottom: 30px; /* Ajuste para pantallas pequeñas */
    }
    .crazy .button-action {
        padding: 12px 25px;
    }
}

/*----------------------------- ACERCA DE --------------------------------------*/
.about-us-section {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-height: 100%;
  margin: 0px auto;
  padding: 20px;
  box-sizing: border-box;
  overflow: hidden;
}

.content-container {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100%;
}

.text-content {
  margin-bottom: 30px;
}

.main-title {
  font-size: 50px;
  font-weight: 700;
  color: var(--primary-orange);
  margin: 0;
}

.subtitle {
  font-size: 25px;
  font-weight: 400;
  color: var(--primary-blue);
  margin: 5px 0 0 0;
}

.media-wrapper {
  width: 100%;
  max-width: 100%;
  height: 550px;
  border-radius: 0px;
  overflow: hidden;
  box-shadow: var(--box-shadow);  
  position: relative;
}

/* --- CAMBIO AQUÍ: Usamos la clase específica para el video --- */
.video-player {
  width: 75%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%)
}

/* --- Formas de fondo --- */
.background-blue-shape {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 400px;
  background-color: var(--primary-blue);
  z-index: 1;
  clip-path: polygon(0 20%, 100% 30%, 100% 100%, 0 100%);
}


/*------------------------------- SECCIÓN SOCIO ESTRATÉGICO -------------------------------*/
.strategic-partner-section {
    position: relative;
    width: 100%;
    height: 750px; /* Ajusta la altura según sea necesario */
    background-image: url('imag/8208fe7c40359d1f67b1450466cc7a3ff50f072f.png');
    background-size: cover;
    background-position: center bottom; /* Ajuste de la posición del fondo para mostrar más del edificio */
    display: flex;
    justify-content: center; /* Centrar horizontalmente */
    align-items: flex-end; /* Alinear contenido a la parte inferior */
    text-align: center;
    padding-bottom: 50px; /* Espacio desde el borde inferior */
    color: white; /* Color de texto predeterminado */
    overflow: hidden; /* Asegura que el contenido no se desborde */
    margin-top: 100px; /* Añade espacio encima de esta sección */
}

/* Gradiente de superposición para hacer el texto más legible */
.strategic-partner-section .overlay-gradient {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80%; /* Ajusta la altura del gradiente */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0)); /* Gradiente oscuro desde abajo */
    z-index: 1;
}

/* Contenedor para texto y botón */
.strategic-partner-section .content-container {
    position: relative;
    z-index: 2; /* Asegura que el contenido esté por encima de la superposición */
    max-width: 800px; /* Limita el ancho del contenido */
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center; /* Centrar elementos dentro del contenedor */
    gap: 20px; /* Espacio entre elementos */
}

.strategic-partner-section .title {
    font-size: 3em; /* Tamaño de fuente más grande para el título principal */
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 0; /* Sin margen por defecto */
    font-family: 'Poppins', sans-serif; /* Usar Poppins para consistencia */
    margin-bottom: 200px;
}

/* Estilo para resaltar texto en naranja */
.texto-naranja {
    color: var(--primary-orange); /* Usa tu variable de color naranja definida en :root */
}

.strategic-partner-section .subtitle {
    font-size: 1.5em; /* Tamaño de fuente más pequeño para el subtítulo */
    font-weight: 500;
    line-height: 1.4;
    margin-bottom: 0;
    font-family: 'Poppins', sans-serif;
}

/* Estilo para el botón (similar a tu botón hero) */
.strategic-partner-section .button-action {
    display: inline-block;
    background-color: var(--primary-orange); /* Color naranja */
    color: white;
    padding: 15px 30px;
    border-radius: 50px;
    text-decoration: none;
    font-size: 1.1em;
    font-weight: 500;
    transition: background-color 0.3s ease;
    margin-top: 10px; /* Espacio encima del botón */
}

.strategic-partner-section .button-action:hover {
    background-color: #e65c00; /* Naranja más oscuro al pasar el ratón */
}

/*----------------------------- 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,
.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 */
}

/* Si aún tienes estilos en línea en el footer principal, deberías moverlos aquí también */
/* Por ejemplo: */
footer {
    background-color: #003366;
    color: #ffffff;
    padding: 20px;
    text-align: center;
}
/* 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;
}

/* Ajustes Responsivos para pantallas más pequeñas (tabletas y monitores pequeños) */
@media (max-width: 992px) {
    .navbar {
        padding: 10px 15px;
    }
    .nav-links li {
        margin: 0 10px;
    }
    .nav-links a {
        font-size: 16px;
        padding: 6px 10px;
    }
    .hero {
        height: auto; /* Permite que el hero se ajuste al contenido en mobile */
        min-height: 80vh; /* Ajusta el min-height del hero */
        padding-top: 80px; /* Ajusta el padding para el navbar */
        padding-bottom: 50px;
    }
    /* Nueva clase para el contenedor del video con relación de aspecto */
    .video-inicio { 
        position: relative; 
        width:100%; 
        max-width:100%; 
        aspect-ratio: 16/9; 
        overflow:hidden; }
    .video-inicio video, .video-inicio iframe {
        position:absolute; 
        inset:0; 
        width:100%; 
        height:100%; 
        object-fit:cover;
    }
@media (max-width:600px) { .video-inicio { aspect-ratio: 4/3; } }
    .video_inicio h1 {
        font-size: 48px;
        line-height: 1.1;
    }
    .video_inicio p {
        font-size: 16px;
    }
    .hero-button-primary {
        padding: 10px 20px;
        font-size: 18px;
        height: auto;
    }

    .main-container {
        flex-direction: column; /* Apila las secciones de imagen y texto verticalmente */
        height: auto;
        max-width: 90%;
    }
    .image-section {
        height: 250px;
        width: 100%;
        margin-right: 0;
        margin-left: 0;
        margin-bottom: 10px;
        border-radius: 10px; /* Asegura bordes redondeados */
    }
    .image-left, .image-middle {
        margin-left: 0; /* Asegura que no haya margen izquierdo en responsive */
        margin-right: 0;
    }

    .text-content-section {
        padding: 15px;
        padding-top: 30px; /* Menos padding superior en responsive */
        height: auto;
    }
    .headline {
        font-size: 1.8em;
    }
    .sub-headline {
        font-size: 1em;
    }

    .container {
        width: 95%; /* Ajusta el ancho del carrusel */
        height: 500px; /* Ajusta la altura para tabletas */
    }

    /* ACERCA DE (Imagen Original) */
    .about-us-image-section {
        height: auto; /* Permite que la altura se ajuste en móviles */
        max-width: 95%; /* Ocupa más ancho en tabletas */
        padding: 40px 15px; /* Ajusta el padding */
        margin: 30px auto; /* Ajusta margen */
    }
    .about-us-image-section .main-title {
        font-size: 2em;
    }
    .about-us-image-section .subtitle {
        font-size: 1em;
        margin-bottom: 30px;
    }
    .background-blue-shape {
        width: 100%; /* Asegura que la forma azul siga extendiéndose */
        height: 40%; /* Un poco menos de alto para la forma azul en tabletas */
        transform: translateY(30%); /* Ajusta si es necesario */
    }


    /* Responsivo para la Sección de Socio Estratégico */
    .strategic-partner-section {
        height: 500px; /* Ajusta la altura para tabletas */
        padding-bottom: 40px;
    }
    .strategic-partner-section .title {
        font-size: 2.5em;
    }
    .strategic-partner-section .subtitle {
        font-size: 1.2em;
    }
    .strategic-partner-section .button-action {
        padding: 12px 25px;
        font-size: 1em;
    }


    .footer-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .footer-content .logo,
    .footer-content .contact-info,
    .footer-content .quick-links {
        min-width: unset;
        width: 100%;
        margin-bottom: 20px;
    }
    .footer-content .logo p, .contact-info p {
        text-align: center;
    }
    .quick-links p { /* Asegura que el título de enlaces rápidos se centre */
        text-align: center;
    }
    .quick-links a {
        /* Para que los enlaces se centren cuando se apilan */
        width: 100%;
        text-align: center;
    }
    .sco {
        justify-content: center;
    }
}

/* Ajustes Responsivos para pantallas muy pequeñas (teléfonos móviles) */
@media (max-width: 600px) {
    .navbar {
        padding: 8px 10px;
    }
    .overlay-image {
        max-width: 120px;
    }
    .nav-links {
        display: none; /* Podrías implementar un menú hamburguesa aquí */
    }

    .hero {
        padding-left: 20px;
        padding-right: 20px;
        min-height: 60vh; /* Reduce aún más el min-height del hero */
    }
    .video_inicio h1 {
        font-size: 36px;
    }
    .video_inicio p {
        font-size: 14px;
    }
    .hero-button-primary {
        padding: 8px 15px;
        font-size: 16px;
    }

    .headline {
        font-size: 1.5em;
    }
    .sub-headline {
        font-size: 0.9em;
    }
    .button-primary {
        padding: 10px 20px;
        font-size: 0.9em;
    }

    .container {
        height: 400px; /* Ajusta la altura para móviles */
    }
    .container .slide .item {
        width: 150px; /* Ajusta el tamaño de los elementos del slider */
        height: 250px;
    }
    /* Adapta las posiciones de los items del slider si es necesario */

    /* ACERCA DE (Imagen Original) */
    .about-us-image-section {
        padding: 30px 10px;
        margin: 20px auto;
    }
    .about-us-image-section .main-title {
        font-size: 1.8em;
    }
    .about-us-image-section .subtitle {
        font-size: 0.9em;
        margin-bottom: 20px;
    }
    .background-blue-shape {
        height: 30%; /* Menos alto para la forma azul en móviles */
        transform: translateY(20%); /* Ajusta si es necesario */
    }

    /* Responsivo para la Sección de Socio Estratégico */
    .strategic-partner-section {
        height: 400px; /* Ajusta la altura para móvil */
        padding-bottom: 30px;
    }
    .strategic-partner-section .title {
        font-size: 1.8em;
    }
    .strategic-partner-section .subtitle {
        font-size: 1em;
    }
    .strategic-partner-section .overlay-gradient {
        height: 70%; /* Aumenta la altura del gradiente para móvil */
    }

    .footer-content .logo p, .contact-info p, .quick-links p, .quick-links a {
        text-align: center; /* Asegura que todos los textos del footer se centren en móvil */
    }
}

/* Carrusel imágenes taller */
.container {
    position: relative;
    z-index: 1;
    margin: 50px auto;
    width: 75%;
    height: 500px;
    background: #f5f5f5;
    box-shadow: 0 30px 50px #dbdbdb;
    max-width: 90%;
}

.container .slide .item {
    width: 200px;
    height: 300px;
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    border-radius: 20px;
    border: 2px solid white;
    box-shadow: 0 30px 50px #ccc;
    background-position: 50% 50%;
    background-size: cover;
    display: inline-block;
    transition: 0.5s;
}

.slide .item:nth-child(1),
.slide .item:nth-child(2) {
    top: 0;
    left: 0;
    transform: translate(0, 0);
    border-radius: 0;
    width: 100%;
    height: 100%;
}

.slide .item:nth-child(3) {
    left: 50%;
}
.slide .item:nth-child(4) {
    left: calc(50% + 220px);
}
.slide .item:nth-child(5) {
    left: calc(50% + 440px);
}

.slide .item:nth-child(n + 6) {
    left: calc(50% + 660px);
    opacity: 0;
}

/* Responsive para tabletas */
@media (max-width: 992px) {
    .container {
        width: 98vw;
        height: 320px;
        margin: 20px auto;
        max-width: 100%;
    }
    .container .slide .item {
        width: 80vw;
        height: 220px;
        left: 0 !important;
        top: 0 !important;
        position: absolute;
        border-radius: 10px;
        /* Elimina cualquier display: none; para mostrar todas las imágenes */
        display: inline-block;
        opacity: 1;
    }
}

/* Responsive para móviles */
@media (max-width: 600px) {
    .container {
        width: 98vw;
        height: 220px;
        margin: 10px auto;
    }
    .container .slide .item {
        width: 95vw;
        height: 180px;
        left: 0 !important;
        top: 0 !important;
        position: absolute;
        border-radius: 10px;
        /* Elimina cualquier display: none; para mostrar todas las imágenes */
        display: inline-block;
        opacity: 1;
    }
}