/* ================================================================
   DESKTOP SCALING OVERRIDES (v9.0 - UNIVERSAL DESKTOP)
   "Pixel-Perfect Lock para TODAS las resoluciones de escritorio"
   Mantiene 1920x1080 exacto en cualquier pantalla >= 1024px
   ================================================================ */

/* ================================================================
   DESKTOP SCALING OVERRIDES (v9.1 - UNIVERSAL DESKTOP)
   "Pixel-Perfect Lock para TODAS las resoluciones de escritorio"
   Mantiene 1920x1080 exacto en cualquier pantalla >= 1024px
   NO AFECTA móviles ni tablets (< 1024px)
   ================================================================ */

/* IMPORTANTE: Solo aplicar en pantallas de escritorio */
@media (min-width: 1024px) {
    .desktop-scaling-active {
        /* 1. VARIABLE FREEZING - Valores fijos de 1920x1080 */
        --space-xs: 12px !important;
        --space-sm: 16px !important;
        --space-md: 24px !important;
        --space-lg: 40px !important;
        --space-xl: 56px !important;
        --space-2xl: 80px !important;

        --font-size-sm: 16px !important;
        --font-size-base: 18px !important;
        --font-size-md: 20px !important;
        --font-size-lg: 24px !important;
        --font-size-xl: 32px !important;
        --font-size-2xl: 48px !important;
        --font-size-3xl: 64px !important;

        --container-padding: 40px !important;
        --site-padding: 5% !important;

        /* 2. BODY & HTML STABILIZATION */
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }
}

html {
    overflow-x: hidden !important;
    background: #f7f6f2 !important;
}

.desktop-scaling-active body,
body.desktop-scaling-active {
    overflow-x: hidden !important;
    display: block !important;
    position: relative !important;
    background: transparent !important;
    min-height: auto !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;

    /* CRÍTICO: Preservar animaciones y transiciones */
    animation-play-state: running !important;
    transition: all 0.3s ease !important;
}

/* MASTER SCALING CONTAINER - Base para todo el contenido */
body.desktop-scaling-active #master-scaling-container {
    width: 1920px !important;
    max-width: 1920px !important;
    min-width: 1920px !important;
    display: block !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #f7f6f2 !important;
}

/* 3. ANIMACIONES Y TRANSICIONES - Mantener funcionamiento */
.desktop-scaling-active * {
    /* Asegurar que todas las animaciones funcionen */
    animation-play-state: running !important;
}

.desktop-scaling-active .hero-final,
.desktop-scaling-active .page-hero {
    height: 950px !important;
    min-height: 950px !important;
    /* Altura balanceada: legibilidad + imagen visible */
    /* Preservar animaciones del hero */
    animation: inherit !important;
    transition: inherit !important;
}

/* 4. SCROLL ANIMATIONS - Mantener detección correcta */
.desktop-scaling-active [data-aos],
.desktop-scaling-active .scroll-animate,
.desktop-scaling-active .reveal-element {
    /* Asegurar que las animaciones de scroll funcionen */
    animation-play-state: running !important;
    transition: all 0.6s ease !important;
}

/* 5. HOVER EFFECTS - Preservar interacciones */
.desktop-scaling-active .industry-btn:hover,
.desktop-scaling-active .value-card:hover,
.desktop-scaling-active .partner-btn:hover,
.desktop-scaling-active button:hover,
.desktop-scaling-active a:hover {
    /* Mantener todos los efectos hover */
    transition: all 0.3s ease !important;
    animation-play-state: running !important;
}

/* 6. CAROUSEL Y SLIDERS - Funcionalidad completa */
.desktop-scaling-active .carousel,
.desktop-scaling-active .slider,
.desktop-scaling-active .swiper {
    /* Preservar funcionalidad de carousels */
    transition: transform 0.3s ease !important;
    animation-play-state: running !important;
}

/* 7. MODALES Y OVERLAYS - Mantener z-index y animaciones */
.desktop-scaling-active .modal-overlay,
.desktop-scaling-active .nav-panel-overlay,
.desktop-scaling-active #salesPointsModal {
    /* Asegurar que los modales aparezcan correctamente */
    position: fixed !important;
    z-index: 9999 !important;
    animation-play-state: running !important;
    transition: all 0.3s ease !important;
}

/* 8. VIDEOS Y MEDIA - Mantener proporciones */
.desktop-scaling-active video:not(.hero-video-mobile):not(.news-video):not(.inversores-video),
.desktop-scaling-active iframe,
.desktop-scaling-active .video-container {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
}

.desktop-scaling-active .hero-video-mobile,
.desktop-scaling-active .news-video,
.desktop-scaling-active .inversores-video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* 9. INDUSTRIAS PREMIUM DESIGN LOCK */
.desktop-scaling-active .industries-content {
    display: grid !important;
    grid-template-columns: 1fr !important;
    position: relative !important;
    /* Preservar animaciones de industrias */
    transition: all 0.5s ease !important;
}

.desktop-scaling-active .industries-images {
    height: 650px !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3) !important;
    /* Animaciones de transición entre industrias */
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.desktop-scaling-active .industry-image {
    /* Transiciones suaves entre imágenes */
    transition: opacity 0.6s ease, transform 0.6s ease !important;
    animation-play-state: running !important;
}

.desktop-scaling-active .industries-descriptions {
    position: absolute !important;
    top: 50px !important;
    right: 50px !important;
    width: 480px !important;
    z-index: 100 !important;
    pointer-events: none;
}

.desktop-scaling-active .industries-descriptions .description-box {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 100% !important;
    background: rgba(15, 15, 15, 0.65) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-radius: 20px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 45px !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4) !important;
    pointer-events: auto;
    /* Animaciones de aparición */
    transition: opacity 0.6s ease, transform 0.6s ease !important;
    animation-play-state: running !important;
}

.desktop-scaling-active .stats-bar {
    position: absolute !important;
    bottom: 40px !important;
    left: 40px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    background: rgba(15, 15, 15, 0.6) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-radius: 16px !important;
    padding: 25px 50px !important;
    z-index: 110 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    width: auto !important;
    transform: none !important;
    /* Animaciones de contador */
    animation-play-state: running !important;
}

/* FIX: HEADER FIX PARA QUE NO SE DESPLACE CUANDO ESTÁ ESCALADO */
.desktop-scaling-active .header-final,
.desktop-scaling-active .header-productos-desktop,
.desktop-scaling-active .header-inversores,
.desktop-scaling-active .nav-bar,
.desktop-scaling-active .simple-header {
    position: fixed !important;
    width: 100% !important;
    z-index: 1000 !important;
    /* La transición de transform se maneja dinámicamente en JS para no interferir con el scroll */
    transition: background 0.3s ease, backdrop-filter 0.3s ease !important;
}

.desktop-scaling-active .header-final {
    background: transparent !important;
}

.desktop-scaling-active .header-final.scrolled {
    background: rgba(26, 26, 26, 0.9) !important;
    backdrop-filter: blur(10px) !important;
}

/* Estado oculto - Manejado por JS con traslación 3D para mayor performance */
.desktop-scaling-active .header-final.hidden,
.desktop-scaling-active .header-productos-desktop.hidden,
.desktop-scaling-active .header-inversores.hidden,
.desktop-scaling-active .nav-bar.hidden,
.desktop-scaling-active .simple-header.hidden {
    /* El transform real se aplica vía JS para incluir la compensación de scroll */
    pointer-events: none;
}

/* Fix Detached Header Scaling for Inversores and Global Headers */
body.desktop-scaling-active .header-final .header-container,
body.desktop-scaling-active .header-inversores .header-container,
body.desktop-scaling-active .header-inversores .header-content-inversores {
    /* Mantenemos el ancho original del diseño (1400px o 100%) pero permitimos que el JS aplique el transform */
    width: 100% !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
    /* NO aplicar transform aquí, dejar que js/desktop-scaler.js lo maneje para evitar doble escalado */
}

/* Remove horizontal scroll and white space on the right */
html,
body {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
}

/* NORMALIZACIÓN PARA PORTAL DE INVERSORES */
.desktop-scaling-active .inversores-main {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 110px 0 0 0 !important;
    display: block !important;
    background: #f7f6f2 !important;
}

.desktop-scaling-active .inversores-main .inversores-vision,
.desktop-scaling-active .inversores-main .inversores-project {
    width: 100% !important;
    height: var(--scaled-vh, 100vh) !important;
    min-height: calc(1080px - 110px) !important;
    position: relative !important;
    overflow: hidden !important;
    background: #f7f6f2 !important;
}

.desktop-scaling-active .inversores-main .inversores-vision {
    background: #000 !important;
    /* La primera sección suele ser oscura por el video */
}

/* Forzar que el video héroe ocupe todo el fondo en escalado */
.desktop-scaling-active .inversores-vision .hero-video-mobile {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    z-index: 0 !important;
}

/* Normalizar video en sección 2 */
.desktop-scaling-active .inversores-video {
    width: 80% !important;
    max-width: 1536px !important;
    height: auto !important;
    max-height: 80% !important;
    object-fit: cover !important;
}

.desktop-scaling-active .video-container-centered {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    gap: 30px !important;
    /* Espacio entre video y botones */
}

.desktop-scaling-active .inversores-project .relative-content {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
}

/* Fix Header Height Scaling */
.desktop-scaling-active .header-inversores {
    height: calc(110px * var(--desktop-scale, 1)) !important;
    min-height: calc(110px * var(--desktop-scale, 1)) !important;
}

.desktop-scaling-active .footer-final {
    width: 100% !important;
    margin: 0 !important;
    background: #1a1a1a !important;
    position: relative !important;
}

.desktop-scaling-active .footer-container {
    max-width: 1400px !important;
    margin: 0 !important;
    /* Volver a la izquierda como el index */
    padding: 0 40px !important;
}

/* Re-ubicar logo del footer para que no se escape de la pantalla */
.desktop-scaling-active .footer-bottom-row {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: flex-end !important;
    width: 100% !important;
    gap: 0 !important;
}

.desktop-scaling-active .footer-bottom-center {
    display: flex !important;
    flex-direction: row !important;
    gap: 30px !important;
    margin-bottom: 10px !important;
    margin-left: 200px !important;
    /* Distancia exacta del index */
    width: auto !important;
}

.desktop-scaling-active .footer-bottom-right {
    position: absolute !important;
    right: 200px !important;
    bottom: 40px !important;
    display: flex !important;
    align-items: flex-end !important;
}

.desktop-scaling-active .footer-logo-large img {
    height: 110px !important;
    width: auto !important;
}

.desktop-scaling-active .footer-logo-large span {
    font-size: 34px !important;
    /* Volviendo al tamaño original del index */
    margin-left: -35px !important;
    display: inline-block !important;
}

.desktop-scaling-active .stat-item {
    text-align: left !important;
    border: none !important;
    padding: 0 !important;
    width: 100% !important;
    /* Animación de conteo de números */
    transition: all 0.3s ease !important;
}

/* 10. VALORES PREMIUM DESIGN LOCK */
.desktop-scaling-active .values-section {
    padding: 120px 0 !important;
    background: #f7f6f2 !important;
}

.desktop-scaling-active .values-content-layout {
    display: block !important;
    height: 700px !important;
    position: relative !important;
    max-width: 1600px !important;
    margin: 0 auto !important;
}

.desktop-scaling-active .values-center-col {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
    z-index: 1 !important;
    border-radius: 40px !important;
    overflow: hidden !important;
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.25) !important;
}

.desktop-scaling-active .values-center-col img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    filter: brightness(0.7) !important;
    /* Transición suave de imágenes */
    transition: filter 0.3s ease, transform 0.3s ease !important;
}

.desktop-scaling-active .values-left-col {
    position: absolute !important;
    top: 60px !important;
    left: -100px !important;
    width: 520px !important;
    z-index: 10 !important;
    /* ELIMINAR COMPLETAMENTE EL BORDE NARANJA */
    border: none !important;
    border-left: none !important;
    padding-left: 0 !important;
    padding-top: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 35px !important;
}

.desktop-scaling-active .values-left-col::before {
    display: none !important;
    content: none !important;
    background: transparent !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* ELIMINAR TODAS LAS CLASES DE BORDE */
.desktop-scaling-active .values-left-col.border-hidden {
    border: none !important;
}

.desktop-scaling-active .values-left-col.border-hidden::before {
    display: none !important;
}

.desktop-scaling-active .values-title-box {
    background: rgba(15, 15, 15, 0.6) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-radius: 24px !important;
    padding: 40px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3) !important;
    width: 100% !important;
    margin-bottom: 25px !important;
    /* Animación de entrada */
    animation: slideInLeft 0.8s ease !important;
}

.desktop-scaling-active .values-intro-box {
    background: rgba(10, 10, 10, 0.65) !important;
    backdrop-filter: blur(25px) !important;
    -webkit-backdrop-filter: blur(25px) !important;
    border-radius: 24px !important;
    padding: 45px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    width: 100% !important;
    transform: translateY(20px) !important;
    position: relative !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.desktop-scaling-active .values-intro-box.visible {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

.desktop-scaling-active .values-intro {
    transition: opacity 0.4s ease !important;
    opacity: 0;
}

.desktop-scaling-active .values-intro:not(.hidden) {
    opacity: 1;
}

.desktop-scaling-active .values-right-col {
    position: absolute !important;
    top: 120px !important;
    right: -60px !important;
    width: 230px !important;
    z-index: 10 !important;
    transform: none !important;
}

.desktop-scaling-active .value-card {
    background: rgba(20, 20, 20, 0.5) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    padding: 22px 20px !important;
    width: 210px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    /* Animaciones de hover y selección */
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer !important;
}

.desktop-scaling-active .value-card:hover {
    background: rgba(30, 30, 30, 0.7) !important;
    transform: translateX(-10px) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3) !important;
}

.desktop-scaling-active .value-card.active {
    background: rgba(40, 40, 40, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    transform: translateX(-15px) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5) !important;
}

/* 11. KEYFRAMES - Animaciones personalizadas */
@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 12. BOTONES Y INTERACCIONES */
.desktop-scaling-active .btn-secondary,
.desktop-scaling-active .industry-btn,
.desktop-scaling-active .partner-btn {
    /* Preservar todas las animaciones de botones */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    animation-play-state: running !important;
}

/* 13. FORMULARIOS Y INPUTS */
.desktop-scaling-active input,
.desktop-scaling-active textarea,
.desktop-scaling-active select {
    /* Mantener animaciones de focus */
    transition: all 0.3s ease !important;
}

/* 14. LOADING Y SPINNERS */
.desktop-scaling-active .loading,
.desktop-scaling-active .spinner {
    /* Preservar animaciones de carga */
    animation-play-state: running !important;
}

/* 15. PÁGINAS LEGALES - ESPACIADO CORRECTO PARA HEADER FIJO */
@media (min-width: 1024px) {
    body.desktop-scaling-active {
        padding-top: 0 !important;
        /* Reset del padding del body */
    }

    /* Contenedores principales de páginas legales */
    .desktop-scaling-active .privacy-container,
    .desktop-scaling-active .terms-container,
    .desktop-scaling-active .faq-container {
        padding-top: 200px !important;
        /* Espacio suficiente para header fijo */
        padding-bottom: 80px !important;
        min-height: calc(100vh - 100px) !important;
    }

    /* Títulos principales - asegurar visibilidad */
    .desktop-scaling-active .privacy-hero h1,
    .desktop-scaling-active .terms-hero h1,
    .desktop-scaling-active .faq-hero h1 {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    /* Hero sections */
    .desktop-scaling-active .privacy-hero,
    .desktop-scaling-active .terms-hero,
    .desktop-scaling-active .faq-hero {
        margin-bottom: 70px !important;
    }
}

/* 16. NOSOTROS - SECCIÓN 2 MODIFICACIONES */
@media (min-width: 1024px) {

    /* Ajustar el contenedor padre para centrado perfecto */
    .desktop-scaling-active .mvvp-section .container {
        max-width: 1400px !important;
        padding-left: 20px !important;
        /* Padding simétrico */
        padding-right: 20px !important;
        /* Padding simétrico */
        margin: 0 auto !important;
        /* Centrar el contenedor */
    }

    /* Mover los botones más arriba */
    .desktop-scaling-active .grid-mvvp {
        display: flex !important;
        justify-content: flex-start !important;
        gap: 15px !important;
        flex-wrap: wrap !important;
        margin-left: 20px !important;
        transform: translateY(-20px) !important;
        /* Volver a posición inicial */
        position: relative !important;
        z-index: 5 !important;
        transition: all 0.5s ease !important;
        /* Animación para reorganizar botones */
    }

    /* Estado cuando un botón está seleccionado - ocultar otros botones */
    .desktop-scaling-active .grid-mvvp.single-mode .card-mvvp-btn:not(.selected) {
        opacity: 0 !important;
        transform: scale(0.8) translateY(-20px) !important;
        pointer-events: none !important;
        transition: all 0.5s ease !important;
        position: absolute !important;
        /* Para que no ocupen espacio */
    }

    /* Botón seleccionado en modo single - se mueve a la primera posición SIN AGRANDAR */
    .desktop-scaling-active .grid-mvvp.single-mode .card-mvvp-btn.selected {
        order: -1 !important;
        /* Mover a la primera posición */
        transform: translateY(0) scale(1) !important;
        /* Mantener tamaño normal */
        background: rgba(26, 26, 26, 0.8) !important;
        /* Ligeramente más opaco */
        border: 1px solid rgba(255, 255, 255, 0.3) !important;
        /* Borde más visible */
        transition: all 0.5s ease !important;
    }



    /* Imagen alargada - MUCHO MÁS ANCHA Y PERFECTAMENTE CENTRADA */
    .desktop-scaling-active .section-image {
        margin-top: 30px !important;
        text-align: center !important;
        position: relative !important;
        width: 100% !important;
        overflow: visible !important;
    }

    .desktop-scaling-active .section-image img {
        max-width: none !important;
        width: calc(100% + 300px) !important;
        /* La imagen es más ancha */
        height: 600px !important;
        object-fit: cover !important;
        border-radius: 24px !important;
        /* Imagen más redondeada */
        box-shadow: 0 10px 30px rgba(26, 26, 26, 0.1) !important;
        opacity: 1.0 !important;
        /* Volver la imagen a opacidad normal */
        /* Centrado perfecto */
        position: relative !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }

    /* Recuadro sobre la imagen con fondo transparente */
    .desktop-scaling-active .message-box {
        background: rgba(26, 26, 26, 0.5) !important;
        /* Más transparente - cambiado de 0.7 a 0.5 */
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        color: white !important;
        padding: 20px 30px !important;
        border-radius: 12px !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        text-align: center !important;
        max-width: 1400px !important;
        /* Aumentado a 1400px para que todo entre en una línea */
        /* Posicionamiento sobre la imagen */
        position: absolute !important;
        bottom: 60px !important;
        /* Subir el recuadro - cambiado de 20px a 60px */
        left: 50% !important;
        transform: translateX(-50%) !important;
        z-index: 10 !important;
        margin: 0 !important;
        margin-top: 0 !important;
        margin-left: 0 !important;
    }

    /* Eliminar completamente la línea naranja */
    .desktop-scaling-active .message-box::before {
        display: none !important;
        content: none !important;
        background: transparent !important;
        border: none !important;
        border-left: none !important;
        border-bottom: none !important;
        border-top: none !important;
        border-right: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
    }

    /* Eliminar cualquier borde del message-box */
    .desktop-scaling-active .message-box {
        background: rgba(26, 26, 26, 0.5) !important;
        /* Más transparente - cambiado de 0.7 a 0.5 */
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        color: white !important;
        padding: 20px 30px !important;
        border-radius: 12px !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        border-left: 1px solid rgba(255, 255, 255, 0.2) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
        text-align: center !important;
        max-width: 1400px !important;
        /* Aumentado a 1400px para que todo entre en una línea */
        white-space: nowrap !important;
        /* Forzar que no se rompa en líneas */
        /* Posicionamiento sobre la imagen */
        position: absolute !important;
        bottom: 60px !important;
        /* Subir el recuadro - cambiado de 20px a 60px */
        left: 50% !important;
        transform: translateX(-50%) !important;
        z-index: 10 !important;
        margin: 0 !important;
        margin-top: 0 !important;
        margin-left: 0 !important;
    }

    /* DESACTIVAR ANIMACIONES QUE INTERFIEREN */
    .desktop-scaling-active .hero-content {
        animation: none !important;
    }

    /* DESACTIVAR TAMBIÉN EN LA CLASE BASE */
    .hero-content {
        animation: none !important;
    }

    /* MVVP DESCRIPTIONS - IGUAL QUE INDUSTRIAS PERO MÁS ANGOSTOS Y MÁS A LA IZQUIERDA Y ABAJO */
    .desktop-scaling-active .mvvp-descriptions {
        position: absolute !important;
        top: 130px !important;
        /* Bajado más de 100px a 130px */
        right: 200px !important;
        /* Movido más a la izquierda de 150px a 200px */
        width: 350px !important;
        /* Reducido de 480px a 350px */
        z-index: 100 !important;
        pointer-events: none;
    }

    .desktop-scaling-active .mvvp-descriptions .description-box {
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: 380px !important;
        /* Aumentado de 350px a 380px - un poquito más largos */
        background: rgba(15, 15, 15, 0.65) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        border-radius: 20px !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        padding: 35px !important;
        /* Reducido de 45px a 35px */
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4) !important;
        pointer-events: auto;
        color: white !important;
        box-sizing: border-box !important;
        /* Para incluir padding en el tamaño total */
        overflow-y: auto !important;
        /* Scroll si el contenido es muy largo */
        /* OCULTO POR DEFECTO */
        opacity: 0 !important;
        visibility: hidden !important;
        transform: translateY(20px) !important;
        transition: all 0.6s ease !important;
    }

    /* VISIBLE CUANDO ESTÁ ACTIVO */
    .desktop-scaling-active .mvvp-descriptions .description-box.active {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important;
    }

    .desktop-scaling-active .mvvp-descriptions .description-box h3 {
        font-size: 1.5rem !important;
        color: #f5f5f5 !important;
        /* Cambiado de naranja #f9751c a blanco humo #f5f5f5 */
        margin-bottom: 20px !important;
        text-transform: uppercase !important;
    }

    .desktop-scaling-active .mvvp-descriptions .description-box p {
        font-size: 1rem !important;
        line-height: 1.6 !important;
        color: rgba(255, 255, 255, 0.9) !important;
        margin: 0 !important;
    }

    /* BORDE DECORATIVO CUANDO SE SELECCIONA */
    .desktop-scaling-active .mvvp-descriptions.show-border::before {
        content: '' !important;
        position: absolute !important;
        top: -20px !important;
        left: -20px !important;
        right: -20px !important;
        bottom: -20px !important;
        border-top: 3px solid #f9751c !important;
        border-right: 3px solid #f9751c !important;
        border-radius: 0 !important;
        z-index: -1 !important;
        opacity: 0 !important;
        animation: borderFadeIn 0.5s ease forwards !important;
    }

    @keyframes borderFadeIn {
        to {
            opacity: 1;
        }
    }

    /* ANIMACIONES FADE PARA BOTONES */
    .desktop-scaling-active .fade-out-down {
        animation: fadeOutDown 0.5s ease-in forwards !important;
    }

    .desktop-scaling-active .fade-in-up {
        animation: fadeInUp 0.5s ease-out forwards !important;
    }

    @keyframes fadeOutDown {
        from {
            opacity: 1;
            transform: translateY(0);
        }

        to {
            opacity: 0;
            transform: translateY(20px);
        }
    }

    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }



    /* Ajustar el contenido interno para que se adapte al tamaño fijo */
    .desktop-scaling-active .section-modal h3 {
        font-size: 1.3rem !important;
        margin-bottom: 20px !important;
        line-height: 1.2 !important;
    }

    .desktop-scaling-active .section-modal p {
        font-size: 1rem !important;
        line-height: 1.6 !important;
        margin: 0 !important;
        overflow-y: auto !important;
        /* Scroll si el texto es muy largo */
        max-height: 280px !important;
        /* Altura máxima del texto aumentada */
    }

    /* MODALES PDF - FUERA DEL CONTENEDOR DE SCALING */
    .section-modal.pdf-modal {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        z-index: 10000 !important;
        max-width: 95vw !important;
        width: 1000px !important;
        max-height: 95vh !important;
        overflow-y: auto !important;
        background: rgba(26, 26, 26, 0.95) !important;
        border-radius: 12px !important;
        padding: 30px !important;
        box-sizing: border-box !important;
        display: none;
        /* Oculto por defecto */
    }

    /* MODAL PDF ACTIVO - VISIBLE */
    .section-modal.pdf-modal.active {
        display: block !important;
    }

    /* CONTENEDOR PDF - AJUSTAR TAMAÑO */
    .section-modal.pdf-modal .pdf-container {
        margin: 20px 0 !important;
        border: 1px solid #333 !important;
        border-radius: 8px !important;
        overflow: hidden !important;
        background: #fff !important;
        height: 75vh !important;
        /* Altura más grande */
        min-height: 600px !important;
        width: 100% !important;
    }

    /* IFRAME PDF - OCUPAR TODO EL ESPACIO */
    .section-modal.pdf-modal .pdf-container iframe {
        border: none !important;
        width: 100% !important;
        height: 100% !important;
        display: block !important;
        object-fit: fill !important;
        /* Llenar todo el espacio */
    }
}

/* SECCIÓN 5 - COMMUNITY SECTION - IMAGEN ALARGADA CON RECUADRO TRANSPARENTE - CENTRADO */
@media (min-width: 1024px) {

    /* Contenedor de la sección 5 - MÁS ANCHO */
    .desktop-scaling-active .community-section .container {
        max-width: 1900px !important;
        /* Aumentado de 1600px a 1900px */
        padding-left: 40px !important;
        /* Más padding para usar más espacio */
        padding-right: 40px !important;
        margin: 0 auto !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        flex-direction: column !important;
        width: 100% !important;
        /* Ocupar todo el ancho disponible */
    }

    /* Split layout más ancho */
    .desktop-scaling-active .split-layout.reverse {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 1850px !important;
        /* Aumentado de 1500px a 1850px */
        margin: 0 auto !important;
    }

    /* Botones de compromiso - MANTENER LAYOUT ORIGINAL */
    .desktop-scaling-active .commitment-buttons {
        display: flex !important;
        gap: 15px !important;
        margin-bottom: 20px !important;
        justify-content: center !important;
        /* Solo centrar horizontalmente */
        flex-wrap: wrap !important;
        width: 100% !important;
    }

    /* Contenedor de imagen - MANTENER ESTRUCTURA ORIGINAL */
    .desktop-scaling-active .split-image {
        position: relative !important;
        padding: 0 !important;
        transform: none !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        /* Restaurar alineación original */
        gap: 20px !important;
        width: 100% !important;
        margin: 0 auto !important;
    }

    /* Imagen alargada - MÁS ANCHA Y MÁS ALTA */
    .desktop-scaling-active .split-image img {
        max-width: none !important;
        width: calc(100% + 400px) !important;
        /* Aumentado de +300px a +400px para más ancho */
        height: 700px !important;
        /* Aumentado de 600px a 700px */
        object-fit: cover !important;
        border-radius: 24px !important;
        /* Centrado perfecto */
        position: relative !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        display: block !important;
        margin: 0 auto !important;
    }

    /* Image-with-info centrado */
    .desktop-scaling-active .image-with-info {
        position: relative !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        margin: 0 auto !important;
    }

    /* Eliminar completamente la línea naranja */
    .desktop-scaling-active .border-container {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }

    /* Recuadro inferior SOBRE la imagen con glassmorphism - MOVIDO A LA IZQUIERDA */
    .desktop-scaling-active .bottom-commitment-box {
        background: rgba(15, 15, 15, 0.65) !important;
        /* Mismo glassmorphism que otras secciones */
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        color: #f5f5f5 !important;
        padding: 20px 80px !important;
        /* Más padding horizontal */
        border-radius: 20px !important;
        /* Mismo border-radius que otras secciones */
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        /* Mismo borde que otras secciones */
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4) !important;
        /* Misma sombra que otras secciones */
        position: absolute !important;
        bottom: 40px !important;
        /* Posicionado sobre la imagen */
        left: 37% !important;
        /* Un poquito más a la izquierda */
        transform: translateX(-50%) !important;
        width: auto !important;
        max-width: 1200px !important;
        /* Aumentado de 900px a 1200px */
        z-index: 10 !important;
        /* Por encima de la imagen */
        text-align: center !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Botones de compromiso - mismo glassmorphism */
    .desktop-scaling-active .commitment-btn {
        background: rgba(15, 15, 15, 0.65) !important;
        /* Mismo glassmorphism */
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-radius: 20px !important;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4) !important;
        color: white !important;
        padding: 15px 25px !important;
        transition: all 0.3s ease !important;
        flex: 0 0 auto !important;
        text-align: center !important;
    }

    /* Hover de los botones de compromiso */
    .desktop-scaling-active .commitment-btn:hover {
        background: rgba(20, 20, 20, 0.8) !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.6) !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
    }

    /* Paneles de información SOBRE la imagen - MISMO TAMAÑO PARA TODOS */
    .desktop-scaling-active .info-panel {
        background: rgba(15, 15, 15, 0.65) !important;
        /* Mismo glassmorphism transparente */
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        color: white !important;
        padding: 30px !important;
        border-radius: 20px !important;
        /* Mismo border-radius que otras secciones */
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        /* Mismo borde transparente */
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4) !important;
        /* Misma sombra que otras secciones */
        position: absolute !important;
        top: 50% !important;
        right: 50px !important;
        /* MOVIDO DENTRO DE LA IMAGEN */
        transform: translateY(-50%) !important;
        width: 380px !important;
        /* ANCHO FINAL a 380px */
        height: 450px !important;
        /* UN POCO MÁS ALTOS - aumentado de 400px a 450px */
        max-height: 450px !important;
        /* Limitar altura máxima */
        min-height: 450px !important;
        /* Forzar altura mínima */
        z-index: 15 !important;
        /* Por encima de la imagen */
        transition: all 0.3s ease !important;
        opacity: 0 !important;
        /* OCULTOS POR DEFECTO */
        visibility: hidden !important;
        /* OCULTOS POR DEFECTO */
        overflow-y: auto !important;
        box-sizing: border-box !important;
        /* Incluir padding en el tamaño */
    }

    /* PRIMER PANEL VISIBLE POR DEFECTO (comunidad) */
    .desktop-scaling-active #comunidad-panel {
        opacity: 1 !important;
        visibility: visible !important;
        right: 50px !important;
    }

    /* FORZAR QUE TODOS LOS PANELES SEAN EXACTAMENTE IGUALES - MÁXIMA ESPECIFICIDAD */
    body.desktop-scaling-active #comunidad-panel,
    body.desktop-scaling-active #sostenibilidad-panel,
    body.desktop-scaling-active #innovacion-panel,
    body.desktop-scaling-active #transparencia-panel,
    html body.desktop-scaling-active #comunidad-panel,
    html body.desktop-scaling-active #sostenibilidad-panel,
    html body.desktop-scaling-active #innovacion-panel,
    html body.desktop-scaling-active #transparencia-panel {
        background: rgba(15, 15, 15, 0.4) !important;
        /* MÁS TRANSPARENTE - reducido de 0.65 a 0.4 */
        backdrop-filter: blur(20px) !important;
        /* FORZAR mismo blur */
        -webkit-backdrop-filter: blur(20px) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        /* FORZAR mismo borde */
        border-radius: 20px !important;
        /* FORZAR mismo radio */
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4) !important;
        /* FORZAR misma sombra */
        color: white !important;
        padding: 30px !important;
        /* FORZAR mismo padding */
        width: 380px !important;
        /* FORZAR mismo ancho */
        height: 450px !important;
        /* FORZAR misma altura */
        position: absolute !important;
        top: 50% !important;
        right: 50px !important;
        transform: translateY(-50%) !important;
        z-index: 15 !important;
        transition: all 0.3s ease !important;
        overflow-y: auto !important;
        box-sizing: border-box !important;
    }

    /* TEXTO DEL MESSAGE-BOX EN BLANCO HUMO */
    .desktop-scaling-active .message-box p {
        color: #f5f5f5 !important;
        /* Blanco humo en lugar de naranja */
        font-size: 1.1rem !important;
        line-height: 1.6 !important;
        margin: 0 !important;
        font-style: italic !important;
    }
}

/* SECCIÓN 3 - COMPANY INTRO - RECUADROS TRANSPARENTES SOBRE LA IMAGEN */
@media (min-width: 1024px) {

    /* Recuadros de texto con glassmorphism transparente */
    .desktop-scaling-active .company-intro-section .company-card {
        background: rgba(15, 15, 15, 0.3) !important;
        /* MÁS TRANSPARENTE - reducido de 0.4 a 0.3 */
        backdrop-filter: blur(20px) !important;
        /* Efecto glassmorphism */
        -webkit-backdrop-filter: blur(20px) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        /* Borde transparente */
        border-radius: 20px !important;
        /* Border-radius moderno */
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4) !important;
        /* Sombra suave */
        color: white !important;
        padding: 30px 80px 30px 40px !important;
        /* Mantener padding ajustado */
        text-align: left !important;
        /* Eliminar el clip-path y borde naranja */
        clip-path: none !important;
    }

    /* Eliminar el pseudo-elemento con borde naranja */
    .desktop-scaling-active .company-intro-section .company-card::before {
        display: none !important;
        content: none !important;
        background: transparent !important;
        border: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }

    /* Texto dentro de los recuadros */
    .desktop-scaling-active .company-intro-section .company-card p {
        color: rgba(255, 255, 255, 0.9) !important;
        /* Texto blanco con ligera transparencia */
        text-align: justify !important;
        text-justify: inter-word !important;
        hyphens: auto !important;
        -webkit-hyphens: auto !important;
        -moz-hyphens: auto !important;
        font-size: 1.2rem !important;
        line-height: 1.7 !important;
        margin-bottom: 0 !important;
    }

    /* Títulos de los recuadros si los hay */
    .desktop-scaling-active .company-intro-section .company-card h3 {
        color: #f5f5f5 !important;
        /* Blanco humo para títulos */
        text-align: left !important;
        margin-bottom: 20px !important;
    }

    /* HEADER FIJO - FUERA DEL SISTEMA DE SCALING - TODAS LAS PÁGINAS */
    .header-final.header-productos-desktop,
    .header-productos-desktop,
    .header-final {
        position: fixed !important;
        /* FIJO para que acompañe el scroll */
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        z-index: 1000 !important;
        /* REDUCIDO - debe estar DEBAJO del panel de navegación */
        background: linear-gradient(to bottom, rgba(26, 26, 26, 0.7), transparent) !important;
        /* MÁS TRANSPARENTE - reducido de 0.9 a 0.7 */
        transition: transform 0.3s ease-in-out !important;
        transform: translateY(0) !important;
        height: 100px !important;
        display: flex !important;
        align-items: center !important;
    }

    /* Mantener estructura del header container cuando está fuera del scaling */
    .header-final .header-container {
        max-width: 1400px !important;
        margin: 0 auto !important;
        padding: 0 40px !important;
        display: grid !important;
        grid-template-columns: 200px 1fr 350px !important;
        align-items: center !important;
        gap: 20px !important;
        width: 100% !important;
    }

    /* Corregir posición específica del logo en index */
    .index-page .header-container {
        padding-left: 10px !important;
    }

    .index-page .logo-final {
        margin-left: -50px !important;
        justify-self: start !important;
    }

    /* Header oculto cuando se hace scroll hacia abajo - TODAS LAS PÁGINAS */
    .header-final.header-productos-desktop.hidden,
    .header-productos-desktop.hidden,
    .header-final.hidden {
        transform: translateY(-100%) !important;
    }

    /* Asegurar que el body tenga padding-top para el header fijo */
    body.desktop-scaling-active {
        padding-top: 100px !important;
    }

    /* EXCEPCIÓN: Páginas con Hero Full-Cover (Header sobre el contenido) */
    body.desktop-scaling-active.index-page,
    body.desktop-scaling-active:has(.contact-cover-hero),
    body.desktop-scaling-active:has(.hero-video-section),
    body.desktop-scaling-active:has(.hero-final) {
        padding-top: 0 !important;
    }



    /* Eliminar bordes naranjas de botones y elementos en productos */
    .productos-page *[style*="#f9751c"] {
        border-color: transparent !important;
        color: #333 !important;
    }

    /* EXCEPCIÓN: Mantener color naranja en hover de botones grises */
    .productos-page .grey-button:hover,
    .productos-page .grey-button.active,
    .product-section-page:nth-of-type(4) .btn-catalogo-float:hover {
        color: #f9751c !important;
        transform: translateY(-3px) !important;
        box-shadow: 0 5px 15px rgba(249, 117, 28, 0.3) !important;
    }

    /* RESTAURACIÓN DE DISEÑO SECCIÓN 4 (CORTE Y DOBLADO) */
    /* Convertimos vw a px para que el scaler pueda procesarlos proporcionalmente */

    .product-section-page:nth-of-type(4) .section-title-container {
        position: absolute !important;
        top: -100px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        z-index: 20 !important;
        width: 100% !important;
        text-align: center !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .section-title {
        font-size: 2.5rem !important;
        font-weight: 700 !important;
        color: #1a1a1a !important;
        text-transform: uppercase !important;
        letter-spacing: 2px !important;
        margin: 0 !important;
        position: relative !important;
    }

    .section-title::after {
        content: '' !important;
        position: absolute !important;
        bottom: -10px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 80px !important;
        height: 3px !important;
        background: #1a1a1a !important;
        border-radius: 2px !important;
    }

    .video-box-doblado {
        width: 1632px !important;
        /* Traducido de 85vw para 1920 */
        position: absolute !important;
        left: 144px !important;
        /* Traducido de 7.5vw para 1920 */
        top: 0px !important;
        margin-left: 0 !important;
        margin-bottom: 120px !important;
        z-index: 1 !important;
    }

    .product-section-page:nth-of-type(4) {
        padding-top: 200px !important;
        padding-bottom: 350px !important;
        min-height: 1000px !important;
    }

    .buttons-vertical-stack {
        position: absolute !important;
        right: 250px !important;
        top: 35% !important;
        transform: translateY(-50%) !important;
        z-index: 10 !important;
        width: 350px !important;
        margin: 0 !important;
    }

    .buttons-vertical-stack .grey-button {
        width: 100% !important;
        min-width: 350px !important;
        background: rgba(26, 26, 26, 0.6) !important;
        opacity: 0.9 !important;
        font-size: 18px !important;
    }

    .video-overlay-dark {
        display: none !important;
    }

    .buttons-vertical-stack .btn-catalogo-float {
        display: none !important;
    }

    .product-section-page:nth-of-type(4) .btn-bottom-right {
        right: 135px !important;
        bottom: 10px !important;
    }

    .product-section-page .text-floating-glass {
        bottom: -329px !important;
        max-width: 1200px !important;
        width: 1200px !important;
        left: 60% !important;
        transform: translateX(-50%) !important;
        right: auto !important;
        margin: 0 !important;
        padding-top: 20px !important;
        padding-bottom: 20px !important;
        background: rgba(26, 26, 26, 0.6) !important;
        opacity: 0.9 !important;
        font-size: 18px !important;
        text-align: justify !important;
        text-justify: inter-word !important;
    }



    /* CONTACTO: Eliminar línea negra arriba de la imagen */
    .contact-cover-main {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    .contact-cover-hero {
        margin-top: 0 !important;
        padding-top: 0 !important;
        height: var(--scaled-vh, 100vh) !important;
        min-height: var(--scaled-vh, 100vh) !important;
        background-size: cover !important;
        background-position: center top !important;
        /* Mostrar desde arriba */
        background-repeat: no-repeat !important;
    }

    /* Asegurar que la imagen de contacto empiece desde el top */
    body.desktop-scaling-active .contact-cover-hero {
        position: relative !important;
        top: 0 !important;
        background-size: cover !important;
        /* Volver a cover para llenar pantalla */
        background-position: center top !important;
        /* Priorizar la parte superior de la imagen */
    }

    /* MODAL PUNTOS DE VENTA: Corregir colores de las tarjetas */
    .sales-point-card {
        background: rgba(26, 26, 26, 0.95) !important;
        color: white !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-radius: 12px !important;
        padding: 25px !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
    }

    .sales-point-card h3 {
        color: white !important;
        /* CORREGIDO: blanco en lugar de naranja */
        margin-bottom: 20px !important;
        font-size: 1.3rem !important;
    }

    .sales-point-card p {
        color: rgba(255, 255, 255, 0.9) !important;
        margin-bottom: 15px !important;
        line-height: 1.6 !important;
    }

    .sales-point-card span {
        color: rgba(255, 255, 255, 0.8) !important;
        /* CORREGIDO: blanco en lugar de naranja */
        font-weight: 600 !important;
    }

    .sales-point-btn {
        background: rgba(255, 255, 255, 0.1) !important;
        /* CORREGIDO: fondo gris transparente */
        color: white !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        padding: 12px 24px !important;
        border-radius: 8px !important;
        cursor: pointer !important;
        font-weight: 600 !important;
        transition: all 0.3s ease !important;
    }

    .sales-point-btn:hover {
        background: rgba(255, 255, 255, 0.2) !important;
        /* CORREGIDO: hover gris más claro */
        transform: translateY(-2px) !important;
    }

    /* Modal de puntos de venta fondo */
    .modal-content.sales-modal {
        background: rgba(26, 26, 26, 0.98) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-radius: 16px !important;
        backdrop-filter: blur(15px) !important;
        -webkit-backdrop-filter: blur(15px) !important;
        max-height: 95vh !important;
        /* Aumentar altura máxima */
        height: auto !important;
        /* Altura automática */
        overflow-y: visible !important;
        /* Eliminar scroll */
        padding: 30px !important;
        /* Reducir padding para más espacio */
    }

    /* Ajustar altura del mapa para que quepa mejor */
    .sales-map-container {
        height: 280px !important;
        /* Reducir altura del mapa */
        margin: 20px 0 !important;
    }

    /* Ajustar espaciado del grid */
    .sales-points-grid {
        margin-bottom: 20px !important;
        /* Reducir margen inferior */
    }

    /* Ajustar footer del modal */
    .sales-modal-footer {
        margin-top: 15px !important;
        /* Reducir margen superior */
        padding-top: 15px !important;
    }

    .sales-modal-footer p {
        margin-bottom: 8px !important;
        /* Reducir espaciado entre párrafos */
        font-size: 0.9rem !important;
        /* Texto ligeramente más pequeño */
        line-height: 1.4 !important;
    }



    /* PRODUCTOS: Modal de catálogo fuera del scaling container */
    #catalogo-modal {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        z-index: 100000 !important;
        display: none !important;
        background-color: rgba(26, 26, 26, 0.8) !important;
        overflow: auto !important;
    }

    #catalogo-modal.show,
    #catalogo-modal[style*="block"] {
        display: block !important;
    }

    /* Modal content con glassmorphism */
    #catalogo-modal .modal-content {
        background: rgba(26, 26, 26, 0.85) !important;
        /* Fondo transparente oscuro */
        backdrop-filter: blur(15px) !important;
        -webkit-backdrop-filter: blur(15px) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        color: white !important;
        /* Texto blanco */
        margin: 8% auto !important;
        padding: 35px !important;
        width: 90% !important;
        max-width: 750px !important;
        border-radius: 16px !important;
        box-shadow: 0 20px 50px rgba(26, 26, 26, 0.3) !important;
        position: relative !important;
        max-height: 80vh !important;
        overflow-y: auto !important;
    }

    /* Título del modal */
    #catalogo-modal .modal-content h2 {
        color: white !important;
        /* Título blanco */
        border-bottom: 3px solid rgba(255, 255, 255, 0.2) !important;
        /* Línea blanca sutil */
        font-size: 1.6rem !important;
        font-weight: 800 !important;
        margin-bottom: 25px !important;
        padding-bottom: 10px !important;
        display: inline-block !important;
        text-transform: uppercase !important;
        letter-spacing: 1px !important;
    }

    /* Botón cerrar */
    #catalogo-modal .close {
        color: white !important;
        background: rgba(255, 255, 255, 0.1) !important;
        border-radius: 50% !important;
        width: 32px !important;
        height: 32px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 18px !important;
        font-weight: bold !important;
        transition: all 0.3s ease !important;
    }

    #catalogo-modal .close:hover {
        background: rgba(255, 255, 255, 0.2) !important;
        transform: scale(1.1) !important;
    }

    /* Botones PDF */
    #catalogo-modal .pdf-button {
        background: rgba(255, 255, 255, 0.1) !important;
        color: white !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        transition: all 0.3s ease !important;
    }

    #catalogo-modal .pdf-button:hover {
        background: rgba(255, 255, 255, 0.2) !important;
        color: white !important;
        border-color: rgba(255, 255, 255, 0.3) !important;
        transform: translateY(-2px) !important;
    }

    /* PRODUCTOS: Hacer clickeables los recuadros "Todos los productos" */
    #aceros-largos-link,
    #aceros-planos-link {
        cursor: pointer !important;
        transition: all 0.3s ease !important;
        user-select: none !important;
        background: rgba(26, 26, 26, 0.85) !important;
        /* Mismo fondo que botones grises */
        color: white !important;
        border-radius: 10px !important;
    }

    #aceros-largos-link:hover,
    #aceros-planos-link:hover {
        color: #f9751c !important;
        /* Texto naranja en hover como los botones grises */
        transform: translateY(-3px) !important;
        /* Mismo efecto de elevación */
        box-shadow: 0 5px 15px rgba(249, 117, 28, 0.3) !important;
        /* Sombra naranja como los botones originales */
        background: rgba(26, 26, 26, 0.95) !important;
        /* Fondo ligeramente más oscuro */
    }

    /* Panel de navegación - usar z-index original que ya funcionaba */
    .nav-panel-overlay {
        z-index: 2000 !important;
        /* Mayor que el header (1000) */
    }

    .nav-panel-overlay.active {
        z-index: 2000 !important;
    }

    .nav-panel-content {
        z-index: 2001 !important;
    }

    .nav-panel-close {
        z-index: 2002 !important;
    }

    /* SOLUCIÓN DEFINITIVA: Ocultar header cuando panel está activo */
    .nav-panel-overlay.active~.header-final,
    .nav-panel-overlay.active~* .header-final,
    body:has(.nav-panel-overlay.active) .header-final {
        display: none !important;
    }

    /* Alternativa con opacity si display no funciona */
    .nav-panel-overlay.active {
        background: rgba(26, 26, 26, 0.95) !important;
        /* Fondo más opaco para cubrir header */
    }
}

/* Panel visible - solo el que se toca */
.desktop-scaling-active .info-panel:not(.hidden) {
    opacity: 1 !important;
    visibility: visible !important;
    right: 50px !important;
    /* Mantener la posición ajustada */
}

/* Contenido del panel */
.desktop-scaling-active .info-panel .info-content p {
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 1rem !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

/* Eliminar completamente las X de todos los recuadros */
.desktop-scaling-active .info-panel .panel-close,
body.desktop-scaling-active .info-panel .panel-close {
    display: none !important;
    /* ELIMINAR completamente todas las X */
    opacity: 0 !important;
    visibility: hidden !important;
}





/* Botones con glassmorphism como estaban antes */
.desktop-scaling-active .card-mvvp-btn {
    background: rgba(26, 26, 26, 0.7) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    color: white !important;
    padding: 15px 25px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 10px 30px rgba(26, 26, 26, 0.1) !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    font-family: inherit !important;
    /* TAMAÑO FIJO */
    min-height: 60px !important;
    max-height: 60px !important;
    height: 60px !important;
    flex: 0 0 auto !important;
    width: 135px !important;
    max-width: 135px !important;
    min-width: 135px !important;
    font-size: 1rem !important;
    line-height: 1.2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

/* Hover de los botones */
.desktop-scaling-active .card-mvvp-btn:hover {
    background: rgba(26, 26, 26, 0.8) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 15px 40px rgba(26, 26, 26, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

/* Botón seleccionado */
.desktop-scaling-active .card-mvvp-btn.active {
    background: rgba(26, 26, 26, 0.9) !important;
    border: 2px solid rgba(255, 255, 255, 0.4) !important;
    transform: translateY(-2px) !important;
    color: #f9751c !important;
}

/* Botón "Volver" con el mismo estilo - CONTROLADO POR JAVASCRIPT */
.desktop-scaling-active .back-to-all-btn,
.desktop-scaling-active #mvvpBackBtn {
    background: rgba(26, 26, 26, 0.7) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    color: white !important;
    padding: 15px 25px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 10px 30px rgba(26, 26, 26, 0.1) !important;
    cursor: pointer !important;
    font-family: inherit !important;
    font-size: 1rem !important;
    line-height: 1.2 !important;
    font-weight: normal !important;
    text-transform: uppercase !important;
    transition: all 0.3s ease !important;
    /* MISMO TAMAÑO QUE LOS OTROS */
    min-height: 60px !important;
    max-height: 60px !important;
    height: 60px !important;
    width: 135px !important;
    max-width: 135px !important;
    min-width: 135px !important;
    /* SIN DISPLAY FIJO - CONTROLADO POR JS */
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    box-sizing: border-box !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 10 !important;
    position: relative !important;
}

/* Estado oculto del botón Volver */
.desktop-scaling-active #mvvpBackBtn.hidden {
    display: none !important;
}

/* Estado visible del botón Volver */
.desktop-scaling-active #mvvpBackBtn.visible {
    display: inline-flex !important;
}

/* Hover del botón volver */
.desktop-scaling-active .back-to-all-btn:hover,
.desktop-scaling-active #mvvpBackBtn:hover {
    background: rgba(26, 26, 26, 0.8) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 15px 40px rgba(26, 26, 26, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

/* Eliminar borde naranja del modal-border - AJUSTADO PARA RECUADROS MÁS ARRIBA */
.desktop-scaling-active .modal-border {
    position: absolute !important;
    top: 70px !important;
    /* Ajustar el borde para coincidir con recuadros subidos un poquito */
    right: 180px !important;
    transform: translateY(0) !important;
    width: 180px !important;
    /* Ancho del borde */
    height: 450px !important;
    /* Altura aumentada para coincidir con modales más largos */
    border-top: 3px solid rgba(255, 255, 255, 0.2) !important;
    /* Cambiar a blanco */
    border-right: 3px solid rgba(255, 255, 255, 0.2) !important;
    /* Cambiar a blanco */
    border-left: none !important;
    border-bottom: none !important;
    z-index: 5 !important;
    pointer-events: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.3s ease, visibility 0.3s ease !important;
}

/* Eliminar cualquier pseudo-elemento con borde naranja */
.desktop-scaling-active .section-modal::before {
    display: none !important;
    border: none !important;
    background: transparent !important;
}

/* COMPANY INTRO TEXTO JUSTIFICADO */
@media (min-width: 1024px) {
    body.desktop-scaling-active .company-intro-section {
        text-align: left !important;
    }

    body.desktop-scaling-active .company-intro-section .container {
        text-align: left !important;
    }

    body.desktop-scaling-active .intro-grid {
        text-align: left !important;
    }

    body.desktop-scaling-active .company-intro-section .company-card p {
        text-align: justify !important;
        text-justify: inter-word !important;
        hyphens: auto !important;
        -webkit-hyphens: auto !important;
        -moz-hyphens: auto !important;
    }

    body.desktop-scaling-active .company-intro-section .company-card h3 {
        text-align: left !important;
    }

    body.desktop-scaling-active .company-intro-section .company-card {
        text-align: left !important;
        padding: 30px 80px 30px 40px !important;
    }
}

/* SECCIÓN 4 - ETHICS SECTION - IMAGEN MÁS ALARGADA CON TODO POR ENCIMA */
@media (min-width: 1024px) {

    /* Contenedor de la sección 4 */
    .desktop-scaling-active .ethics-header {
        position: relative !important;
        display: block !important;
    }

    /* Contenedor de la imagen para mejor control */
    .desktop-scaling-active .ethics-right-content {
        position: relative !important;
        width: 100% !important;
    }

    /* Alargar la imagen IGUAL que la sección 2 - MÁS ALTA */
    .desktop-scaling-active .ethics-header-image {
        max-width: none !important;
        width: calc(100% + 300px) !important;
        /* MISMO ANCHO que sección 2 */
        height: 650px !important;
        /* Aumentado de 550px a 650px */
        object-fit: cover !important;
        border-radius: 24px !important;
        display: block !important;
        /* Centrado perfecto igual que sección 2 */
        position: relative !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }

    /* Recuadro de texto POR ENCIMA de la imagen - MISMO GLASSMORPHISM que sección 2 */
    html body.desktop-scaling-active .ethics-section .ethics-header .ethics-quote,
    body.desktop-scaling-active .ethics-section .ethics-header .ethics-quote {
        position: absolute !important;
        top: 60px !important;
        left: -50px !important;
        width: 500px !important;
        background: rgba(15, 15, 15, 0.65) !important;
        /* Mismo fondo que sección 2 */
        backdrop-filter: blur(20px) !important;
        /* Mismo blur que sección 2 */
        -webkit-backdrop-filter: blur(20px) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        /* Mismo borde que sección 2 */
        border-radius: 20px !important;
        /* Mismo border-radius que sección 2 */
        padding: 40px 40px !important;
        /* MUCHO MÁS PADDING para forzar altura */
        z-index: 15 !important;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4) !important;
        /* Misma sombra que sección 2 */
        /* ELIMINAR BORDE NARANJA COMPLETAMENTE */
        border-left: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
        min-height: 200px !important;
        /* FORZAR altura mínima mucho mayor */
        height: 200px !important;
        /* ALTURA FIJA para forzar el cambio */
        max-height: 200px !important;
        /* ALTURA MÁXIMA FIJA */
        flex: 0 0 200px !important;
        /* FLEX BASIS FIJO */
        display: flex !important;
        /* Flex para centrar contenido */
        align-items: center !important;
        /* Centrar contenido verticalmente */
        box-sizing: border-box !important;
        /* Incluir padding en el tamaño total */
        overflow: hidden !important;
        /* Evitar que el contenido se desborde */
    }

    /* Eliminar cualquier pseudo-elemento con borde naranja */
    body.desktop-scaling-active .ethics-section .ethics-header .ethics-quote::before {
        display: none !important;
        content: none !important;
        background: transparent !important;
        border: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }

    /* Mejorar el texto dentro del recuadro - TAMAÑO ORIGINAL */
    body.desktop-scaling-active .ethics-section .ethics-header .ethics-quote p {
        color: rgba(255, 255, 255, 0.95) !important;
        font-size: 1.15rem !important;
        /* Volver al tamaño original */
        line-height: 1.8 !important;
        /* Volver al espaciado original */
        margin: 0 !important;
    }

    /* Ethics top quote - MISMO GLASSMORPHISM que sección 2 */
    .desktop-scaling-active .ethics-top-quote {
        background: rgba(15, 15, 15, 0.65) !important;
        /* Mismo fondo que sección 2 */
        backdrop-filter: blur(20px) !important;
        /* Mismo blur que sección 2 */
        -webkit-backdrop-filter: blur(20px) !important;
        color: white !important;
        padding: 15px 40px !important;
        border-radius: 20px !important;
        /* Mismo border-radius que sección 2 */
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        /* Mismo borde que sección 2 */
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4) !important;
        /* Misma sombra que sección 2 */
        position: relative !important;
        text-align: center !important;
        max-width: 1000px !important;
        margin: 20px 0 40px 480px !important;
        transform: translateY(60px) !important;
        z-index: 20 !important;
        /* Z-index más alto que la imagen */
    }

    /* Cards de ética POR ENCIMA de la imagen */
    .desktop-scaling-active .ethics-grid {
        position: absolute !important;
        bottom: 40px !important;
        /* Posicionadas en la parte inferior de la imagen */
        left: 120px !important;
        z-index: 15 !important;
        /* Z-index más alto */
        display: flex !important;
        gap: 20px !important;
        flex-wrap: wrap !important;
    }

    /* Dar transparencia a las cards de ética - MISMO GLASSMORPHISM que sección 2 */
    .desktop-scaling-active .ethics-card {
        background: rgba(15, 15, 15, 0.65) !important;
        /* Mismo fondo que sección 2 */
        backdrop-filter: blur(20px) !important;
        /* Mismo blur que sección 2 */
        -webkit-backdrop-filter: blur(20px) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        /* Mismo borde que sección 2 */
        border-radius: 20px !important;
        /* Mismo border-radius que sección 2 */
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4) !important;
        /* Misma sombra que sección 2 */
    }

    /* Hover effects para las cards - MISMO EFECTO que sección 2 */
    .desktop-scaling-active .ethics-card:hover {
        background: rgba(20, 20, 20, 0.8) !important;
        /* Hover más opaco */
        transform: translateY(-8px) !important;
        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.6) !important;
        /* Sombra más intensa en hover */
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
    }
}

/* 20. CONTACTO INVERSOR PREMIUM LOCK */
@media (min-width: 1024px) {
    .desktop-scaling-active .contact-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 40px !important;
        max-width: none !important;
        margin: 0 auto !important;
        align-items: stretch !important;
        width: 1824px !important;
        /* Traducido de 95vw para 1920 */
        padding: 20px !important;
        flex: 1 !important;
    }

    .desktop-scaling-active .page-title {
        margin-bottom: 60px !important;
        background: transparent !important;
        backdrop-filter: none !important;
        border: none !important;
        padding-top: 60px !important;
    }

    .desktop-scaling-active .page-title h1 {
        font-size: 2rem !important;
        color: #1a1a1a !important;
        font-weight: 700 !important;
    }

    .desktop-scaling-active .page-title p {
        color: #666 !important;
        font-size: 1.2rem !important;
    }

    .desktop-scaling-active .contact-info {
        background: #fff !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border: 1px solid #e0e0e0 !important;
        box-shadow: 0 5px 25px rgba(0, 0, 0, 0.05) !important;
        padding: 30px 40px !important;
        border-radius: 8px !important;
        height: 100% !important;
        position: static !important;
        color: #333 !important;
        width: 100% !important;
        max-width: none !important;
        display: flex !important;
        flex-direction: column !important;
        overflow-y: auto !important;
    }

    .desktop-scaling-active .contact-info h2 {
        font-size: 2rem !important;
        margin-bottom: 40px !important;
        color: #1a1a1a !important;
        border-bottom: none !important;
    }

    .desktop-scaling-active .contact-form {
        background: transparent !important;
        box-shadow: none !important;
        width: 100% !important;
        max-width: none !important;
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .desktop-scaling-active .contact-form iframe {
        height: 100% !important;
        flex: 1 !important;
        border-radius: 12px !important;
        box-shadow: none !important;
        width: 100% !important;
    }

    .desktop-scaling-active .info-item h3 {
        color: #f9751c !important;
    }

    .desktop-scaling-active .info-item p {
        color: #555 !important;
    }
}