/* ==========================================================================
   1. CONFIGURACIÓN MODULAR GENERAL (PC BASE) - DIVISION DE ASCENSORES
   ========================================================================== */
.top-bar .info-wrapper .info-item i {
    font-size: 1.75rem !important;
    color: var(--azul-ste, #00bcd4); /* Mantiene la coherencia del Index global */
    margin-right: 6px;
    display: inline-block;
}

.nav-quick-actions {
    display: none; /* Ocultar accesos rápidos viejos */
}

/* ==========================================================================
   2. FRANJA 2 NEGRA: NAVEGACIÓN CORPORATIVA SINCRONIZADA (PC ESCRITORIO)
   ========================================================================== */
.main-nav {
    background-color: var(--negro-nav, #111111);
    position: sticky;
    top: 0;
    z-index: 1000;
    /* Filamento láser en acabado Cian / Menta Metalizado Industrial */
    border-bottom: 2px solid rgba(86, 200, 192, 0.5); 
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 10px 0;
}

.main-nav .nav-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.main-nav .nav-links-pc {
    display: flex;
    list-style: none;
    gap: 30px; 
    margin: 0;
    padding: 0;
}

/* ??? ENLACES DE CRISTAL CORREGIDOS: Alineación firme hacia el filo izquierdo */
.main-nav .nav-links-pc li a {
    color: #ffffff !important;
    text-decoration: none !important;
    font-size: 0.85rem !important; 
    font-weight: 600 !important; 
    letter-spacing: 0.8px !important;
    text-transform: uppercase !important; 
    transition: all 0.25s cubic-bezier(0.25, 1, 0.5, 1) !important;
    -webkit-tap-highlight-color: transparent !important;

    /* ARQUITECTURA DEL PANEL CONTENEDOR EN CRISTAL (SINCRO CON EL INDEX): */
    display: flex !important;
    align-items: center !important;
    
    /* ??? CORRECCIÓN CLAVE: Cambiado de center a flex-start para clavar el texto a la izquierda */
    justify-content: flex-start !important; 
    
    gap: 10px !important;                 /* Separación exacta entre el icono de elevación y el texto */
    padding: 8px 18px !important;         /* Colchón interno que define la forma de la pastilla */
    border-radius: 8px !important;        /* Esquinas suavizadas de la caja */
    
    /* Trasfondo oscuro de pozo traslúcido sutil al 3% */
    background: rgba(255, 255, 255, 0.03) !important; 
    
    /* Bordesito con filamento láser en acabado Menta/Cian al 15% */
    border: 1px solid rgba(86, 200, 192, 0.15) !important; 
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* Los iconos base de la barra brillan en el color de acento de elevación */
.main-nav .nav-links-pc li a i {
    color: #56C8C0 !important; 
    font-size: 1.05rem !important;
    transition: all 0.25s ease !important;
    text-shadow: 0 0 5px rgba(86, 200, 192, 0.3) !important;
}

/* ? INTERACCIÓN CINÉTICA EN PC: Iluminación de la pastilla de cristal al posar el cursor */
.main-nav .nav-links-pc li a:hover {
    color: #ffffff !important; 
    background: rgba(86, 200, 192, 0.12) !important;  /* El panel se inunda del color corporativo */
    border-color: #56C8C0 !important;                /* El bordesito pasa a menta neón brillante */
    box-shadow: 0 0 20px rgba(86, 200, 192, 0.35) !important;
    transform: translateY(-2px) !important;          /* Micro-elevación mecánica de resorte */
}

.main-nav .nav-links-pc li a:hover i {
    color: #56C8C0 !important; 
    /* Brillo de panel digital texturizado intensificado al pasar el mouse */
    text-shadow: 0 0 12px rgba(86, 200, 192, 0.9) !important;
    transform: scale(1.08) !important;
}

/* --- 2.1 CONTROL ESTRUCTURAL DEL MENÚ DESPLEGABLE EN PC --- */
.main-nav .nav-links-pc .dropdown {
    position: relative;
}

.main-nav .nav-links-pc .dropdown:hover .dropdown-menu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(5px) !important; 
}

/* La caja flotante adopta un trasfondo oscuro de pozo / cabina */
.main-nav .nav-links-pc .dropdown-menu {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    background-color: #111b24 !important; 
    min-width: 240px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
    border-radius: 6px !important;
    padding: 10px 0 !important;
    list-style: none !important;
    margin: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(15px) !important;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) !important; 
}

.main-nav .nav-links-pc .dropdown-menu li {
    width: 100% !important;
    display: block !important;
}

.main-nav .nav-links-pc .dropdown-menu li a {
    color: #ffffff !important;
    padding: 12px 20px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    font-size: 0.9rem !important;
    text-transform: none !important; 
    font-weight: 500 !important;
    
    /* Mantiene el fondo limpio y remueve el chasis del botón padre en el submenú */
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    transform: none !important;
    transition: background 0.2s ease, color 0.2s ease !important;
}

.main-nav .nav-links-pc .dropdown-menu li a:hover {
    background-color: rgba(255, 255, 255, 0.04) !important;
    color: #56C8C0 !important;
    transform: none !important; /* Desactiva el salto vertical del hover padre en los sub-enlaces */
}

.main-nav .nav-links-pc .dropdown-menu li a i {
    width: 20px !important;
    text-align: center !important;
    font-size: 1.1rem !important;
    color: #56C8C0 !important;
    text-shadow: none !important; 
}

/* Ocultación de componentes cruzados en PC */
.main-nav .nav-quick-actions-mobile { 
    display: none; 
}

/* Regla de equilibrio nativa para visualización en computadoras */
@media (min-width: 769px) {
    .main-nav .nav-links { 
        display: none !important; 
    }
}



/* ==========================================================================
   3. FRANJA 3 INTERNA: HERO DE TRANSPORTE VERTICAL DE ALTA GAMA (PC)
   ========================================================================== */
.hero-blue {
    background: linear-gradient(135deg, rgba(17, 24, 39, 0.95) 0%, rgba(22, 34, 57, 0.9) 100%),
                url('img/ductos_caracas.webp') no-repeat center center;
    background-size: cover;
    background-attachment: fixed;
    padding: 40px 20px 70px 20px !important; 
    text-align: center;
    position: relative;
    border-bottom: 4px solid var(--primary-elevator, #56C8C0);
    overflow: hidden;
}

/* Efecto de líneas cinéticas traseras (Simula cables de tracción del pozo en movimiento continuo) */
.hero-blue::before {
    content: '';
    position: absolute;
    top: 0;
    left: 15%;
    width: 2px;
    height: 100%;
    background: linear-gradient(to bottom, transparent, rgba(86, 200, 192, 0.2), transparent);
    animation: cablesMove 8s linear infinite;
}

.hero-blue::after {
    content: '';
    position: absolute;
    top: 0;
    right: 15%;
    width: 2px;
    height: 100%;
    background: linear-gradient(to bottom, transparent, rgba(0, 210, 253, 0.2), transparent);
    animation: cablesMove 12s linear infinite reverse;
}

.hero-blue h1 {
    font-family: 'Poppins', sans-serif;
    font-size: 2.0rem;
    font-weight: 800;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    position: relative;
    z-index: 2;
}

.hero-subtitle {
    font-family: 'Poppins', sans-serif;
    font-size: 1.1rem;
    font-weight: 300;
    color: #e2e8f0;
    max-width: 850px;
    margin: 0 auto;
    line-height: 1.6;
    position: relative;
    z-index: 2;
}


/* ==========================================================================
   4. DISTRIBUCIÓN DE FILAS, IMÁGENES GEMELAS Y EFECTO ZIGZAG (PC GENERAL)
   ========================================================================== */
.services-list .service-row {
    display: grid !important;
    grid-template-columns: 1.10fr 0.90fr; /* Proporción calibrada de expansión de texto */
    gap: 40px;
    margin-bottom: 60px;
    align-items: center;
}

/* Inversión simétrica para las filas en Zigzag (Garantiza el mismo ancho) */
.services-list .service-row.reverse {
    grid-template-columns: 0.90fr 1.10fr;
}

/* --- 4.1 CAJA DE INTRODUCCIÓN TÉCNICA (EMPAQUETADO COMPACTO DE PARRAFO) --- */
.tech-intro-box {
    max-width: 650px !important; /* ?? CORREGIDO: Compacta el texto evitando que se estire a los lados */
    width: 100% !important;
    padding: 18px 10px 18px 10px !important; /* Colchón optimizado perimetral */
    margin: 20px 0 !important;	
    box-sizing: border-box !important;
    
    /* Suelta el estiramiento forzado de rejilla y alinea a la izquierda de su celda */
    justify-self: start !important; 
    align-self: flex-start !important;
}

.tech-intro-box p {
    font-size: 1.05rem;
    line-height: 1.60;
    text-align: left !important; /* Cambiado a izquierda pura para consistencia de lectura */
}

/* --- 4.2 CAJA DE VIÑETAS TÉCNICAS CON CHECKS (EMPAQUETADO MODULAR) --- */
.service-text .service-features {
    max-width: 750px !important; /* ?? CORREGIDO: Evita que la caja de ítems se abra elásticamente en PC */
    width: 100% !important;
    padding: 10px 5px !important; 
    margin: 15px 0 !important;
    box-sizing: border-box !important;
    
    /* Suelta el estiramiento forzado de rejilla y alinea a la izquierda de su celda */
    justify-self: start !important;
    align-self: flex-start !important;
}

.service-text .service-features li {
    font-size: 15px;
    line-height: 1.2;
    padding-right: 5px !important; 
}

/* ==========================================================================
   4.3 MÓDULO: CONTROL DE EQUILIBRIO EN ZIGZAG (ELIMINADO EL ESTIRAMIENTO MASIVO)
   ========================================================================== */
/* 1. FILAS NORMALES (Texto a la izquierda, Fotos a la derecha) */
.services-list .service-row:not(.reverse) .tech-intro-box,
.services-list .service-row:not(.reverse) .service-features {
    margin-left: 0px !important;   /* ?? CORREGIDO: Regresa al borde natural alineado con la cabecera */
    margin-right: 15px !important;  
}

/* 2. FILAS INVERTIDAS REVERSE (Fotos a la izquierda, Texto a la derecha) */
.services-list .service-row.reverse .tech-intro-box,
.services-list .service-row.reverse .service-features {
    margin-right: 0px !important;  /* ?? CORREGIDO: Regresa al contorno limpio sin desbordar el extremo derecho */
    margin-left: 15px !important;   
}

/* ==========================================================================
   4.4 MÓDULO: EXPANSIÓN ANCHURA EXTERIOR DE IMÁGENES (PRESERVADO INTACTO)
   ========================================================================== */
/* 1. FILAS NORMALES (Texto a la izquierda, Fotos a la derecha) */
.services-list .service-row:not(.reverse) .service-images {
    width: 112% !important;          
    margin-right: 0px !important;    
    margin-left: -40px !important;   
    display: flex !important;
    gap: 15px !important;
    align-items: center !important;
    position: relative !important;
}

/* 2. FILAS INVERTIDAS REVERSE (Fotos a la izquierda, Texto a la derecha) */
.services-list .service-row.reverse .service-images {
    width: 112% !important;          
    margin-left: -25px !important;   
    margin-right: 15px !important;   
    display: flex !important;
    gap: 15px !important;
    align-items: center !important;
    position: relative !important;
}

/* --- 4.5 PROPIEDADES INTERNAS DE IMÁGENES GEMELAS EN PC (PRESERVADO INTACTO) --- */
.services-list .service-row .service-images img {
    width: calc(50% - 8px) !important; 
    height: 300px !important;          
    object-fit: cover !important; 
    border-radius: 10px !important;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15) !important;
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s ease !important;
    will-change: transform;
}

/* --- 4.6 INTERACCIONES DE ACERCAMIENTO ÓPTICO Y BRILLO TÉCNICO (PRESERVADO INTACTO) --- */
.services-list .service-row .service-images img:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 15px 30px rgba(86, 200, 192, 0.25) !important; 
    z-index: 5 !important;
}

/* --- 4.7 ORDENAMIENTO DE FILAS INVERTIDAS (ZIGZAG NATIVO PC) --- */
.services-list .service-row.reverse .service-images { 
    grid-column: 1 !important; 
}

.services-list .service-row.reverse .service-text { 
    grid-column: 2 !important; 
}

.services-list .service-row.reverse .service-features { 
    grid-column: 2 !important; 
}

/* --- 4.8 ANULACIÓN DE TRASLACIONES O CAÍDAS RESIDUALES --- */
.services-list .service-row .service-images .img-1,
.services-list .service-row .service-images .img-2 {
    margin: 0 !important;
    top: auto !important;
    position: static !important;
}

.services-list .service-row:hover .service-images img {
    transform: none;
}

.services-list .service-row .service-images img:hover {
    transform: scale(1.05) !important;
}

/* ==========================================================================
   5. SEPARADOR TEMÁTICO: ARQUITECTURA DE FLECHAS MECÁNICAS DE ELEVACIÓN (PC)
   ========================================================================== */
.elevator-divider {
    grid-column: span 2 !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    margin: 45px auto !important;  
    height: 50px !important;
}

.services-list .elevator-divider {
    margin-top: -20px !important;
    margin-bottom: -20px !important;
}

/* --- 5.1 LÍNEA DE TRACCIÓN EXTENDIDA HACIA EL NÚCLEO MECÁNICO --- */
.elevator-divider .divider-tapered-line {
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    width: 100% !important;
    height: 2px !important;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(30, 41, 59, 0.2) 10%,
        rgba(30, 41, 59, 1) 42%, 
        transparent 43%, 
        transparent 57%, 
        rgba(30, 41, 59, 1) 58%, 
        rgba(30, 41, 59, 0.2) 90%, 
        transparent 100%
    ) !important;
    transform: translateY(-50%) !important;
    z-index: 1 !important;
}

/* --- 5.2 CONTENEDOR CENTRAL: BOTONERA INDUSTRIAL ACABADO DORADO LATÓN --- */
.elevator-arrows {
    position: relative !important;
    z-index: 2 !important;
    width: 52px !important;
    height: 52px !important;
    background: linear-gradient(135deg, #ffffff 0%, #cbd5e1 50%, #94a3b8 100%) !important;
    border: 3px solid #f5b041 !important; /* Anillo perimetral dorado brillante */
    border-radius: 50% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    box-shadow: none !important;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

/* Construcción pura CSS para flechas mecánicas simétricas */
.arrow-up, .arrow-down {
    width: 0 !important;
    height: 0 !important;
    border-left: 7px solid transparent !important;
    border-right: 7px solid transparent !important;
    transition: border-bottom-color 0.2s ease, border-top-color 0.2s ease, filter 0.2s ease !important;
    will-change: transform, filter;
}

.arrow-up {
    border-bottom: 9px solid #111111 !important; /* Estado pasivo apagado: Negro Carbón */
}

.arrow-down {
    border-top: 9px solid #111111 !important;  /* Estado pasivo apagado: Negro Carbón */
}

/* --- 5.3 INTERACCIÓN CINÉTICA DIRECCIONAL (ENCENDIDO POR JS SCROLL) --- */
.elevator-divider:hover .elevator-arrows {
    transform: scale(1.08) !important;
}

/* AL BAJAR: Enciende únicamente la flecha inferior en ROJO y apaga la superior */
.elevator-divider.scrolling-down .arrow-down {
    border-top-color: #ff0033 !important; 
    filter: drop-shadow(0 0 8px rgba(255, 0, 51, 0.95)) !important;
}
.elevator-divider.scrolling-down .arrow-up {
    border-bottom-color: #111111 !important; 
    filter: none !important; 
}

/* AL SUBIR: Enciende únicamente la flecha superior en ROJO y apaga la inferior */
.elevator-divider.scrolling-up .arrow-up {
    border-bottom-color: #ff0033 !important; 
    filter: drop-shadow(0 0 8px rgba(255, 0, 51, 0.95)) !important;
}
.elevator-divider.scrolling-up .arrow-down {
    border-top-color: #111111 !important; 
    filter: none !important; 
}

/* ==========================================================================
   5.4 CONFIGURACIÓN LIGERA DE ICONOS DE SERVICIO (AUTONOMÍA LIBERADA)
   ========================================================================== */
.service-text .service-icon {
    background: transparent !important;   
    border: none !important;               
    box-shadow: none !important;           
    width: auto !important;
    height: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    margin-bottom: 15px !important;
    padding: 0 !important;
}

/* Iconos puros y estilizados: Quitamos la variable rígida para que hereden el color del bloque */
.service-text .service-icon i {
    font-size: 2.2rem !important;          
    transition: transform 0.3s ease, filter 0.3s ease !important;
    will-change: transform, filter;
}

/* Efecto de elevación cinética al posar el mouse sobre la fila */
.service-row:hover .service-icon i {
    transform: scale(1.08) translateY(-2px) !important;
}



/* ==========================================================================
   6. CLASIFICACIÓN MODULAR DE PLACAS DE INGENIERÍA DE ELEVACIÓN (PC)
   ========================================================================== */

/* --- 6.1 BLOQUE 1: INSTALACIÓN DE ASCENSORES NUEVOS (Solución de Estiramiento Lateral) *********BLOQUE 1-----------BLOQUE 1----------*/
.services-showcase .bloque-ascensores {
    background-color: #020618 !important; /* Tu base azul */
    background-image: linear-gradient(135deg, 
        rgba(153, 161, 175, 1) 0%,   
        rgba(125, 133, 145, 0.50) 100%  
    ), url('img/cctv_perimetral.webp') !important; 
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
    background-blend-mode: luminosity !important;
    border: 0px solid rgba(0, 0, 0, 0.50) !important; 
    border-radius: 30px !important; 
    padding: 35px 35px !important; 
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35) !important; 
}

/* ?? SOLUCIÓN PRINCIPAL: Obliga a la columna de texto a respetar su carril izquierdo y no pisar las fotos */
.services-showcase .bloque-ascensores .service-text {
    max-width: 600px !important; /* Limita la envoltura completa del texto */
    width: 100% !important;
    justify-self: start !important;
    align-self: flex-start !important;
}

/* ?? EMPAQUETADO COMPACTO DEL PÁRRAFO INTRODUCTORIO */
.services-showcase .bloque-ascensores .tech-intro-box {
    max-width: 550px !important; /* Recorta el párrafo para que termine antes de las imágenes */
    width: 100% !important;
    margin-top: 15px !important;
    margin-bottom: 2px !important;
    margin-right: 0px !important;
	padding-right: 20px !important;
	padding-left: 25px !important;
}

.services-showcase .bloque-ascensores .tech-intro-box p {
    text-align: left !important; 
    color: #e2e8f0 !important; 
}

/* ?? SOLUCIÓN PARA LAS VIÑETAS: Le ordena a la lista que se meta en la columna izquierda y no se estire abajo */
.services-showcase .bloque-ascensores .service-features {
    grid-column: 1 !important; /* ?? OBLIGATORIO: Fuerza a las pastillas blancas a quedarse en la columna 1 (Izquierda) */
    max-width: 550px !important; /* Evita que las pastillas toquen el bloque de fotos */
    width: 100% !important;
    margin-bottom: 30px !important;
	margin-top: -20px !important;
    margin-left: 0px !important;
    justify-self: start !important;
    align-self: flex-start !important;
    
    background: rgba(11, 22, 34, 0.82) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(0, 229, 255, 0.25) !important;
    border-left: 5px solid #00e5ff !important; 
    border-radius: 16px !important; 
    padding: 25px !important;
}

/* ?? FILAMENTO VERTICAL Y DIODO LED DE ENTRADA (Sincronizado) */
.services-showcase .bloque-ascensores .service-header-flex .service-icon i {
    color: #00e5ff !important; 
    filter: drop-shadow(0 0 10px rgba(0, 229, 255, 0.6)) !important; 
}

.services-showcase .bloque-ascensores .service-header-flex .vertical-divider {
    background-color: #00e5ff !important; 
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.5) !important;
}

/* Título Principal */
.services-showcase .bloque-ascensores .service-header-flex h3 {
    color: #ffffff !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
}

/* Ajustes de las Viñetas Blancas */
.services-showcase .bloque-ascensores .service-features li i {
    color: #00e5ff !important;
    filter: drop-shadow(0 0 4px rgba(0, 229, 255, 0.7)) !important;
}

.services-showcase .bloque-ascensores .service-features li span {
    color: #1e293b !important; /* Oscuro para que se lea perfecto sobre las pastillas blancas de tu imagen */
}



/* --- 6.2 BLOQUE 2: MODERNIZACIÓN Y SISTEMAS DE CONTROL (Zigzag Invertido Calibrado) *********BLOQUE 2-----------BLOQUE 2----------*/
.services-showcase .bloque-modernizacion {
    background-color: #020617 !important; /* Base azul espacial oscuro unificada */
    
    /* ??? MARCA DE AGUA INDEPENDIENTE: Fondo de hardware electrónico Monarch fusionado en luminosidad */
    background-image: linear-gradient(135deg, 
        rgba(153, 161, 175, 1) 0%,   
        rgba(125, 133, 145, 0.50) 100%  
    ), url('img/tablero_monarch_caracas.webp') !important; 
    
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
    background-blend-mode: luminosity !important;
    
    border: 0px solid rgba(0, 0, 0, 0.50) !important; 
    border-radius: 30px !important; 
    padding: 35px 35px !important; 
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35) !important; 
}

/* ?? REVERSE DE PC: Obliga a la columna de texto a respetar su carril DERECHO en el zigzag */
.services-showcase .bloque-modernizacion .service-text {
    max-width: 600px !important; 
    width: 100% !important;
    
    /* ?? CLAVE REVERSE: En las filas invertidas, el texto se alinea hacia la derecha de la pantalla */
    justify-self: end !important; 
    align-self: flex-start !important;
}

/* EMPAQUETADO COMPACTO DEL PÁRRAFO INTRODUCTORIO (Clonando tus valores exactos) */
.services-showcase .bloque-modernizacion .tech-intro-box {
    max-width: 550px !important; 
    width: 100% !important;
    margin-top: 15px !important;
    margin-bottom: 2px !important;
    margin-right: 0px !important;
    padding-right: 20px !important;
    padding-left: 25px !important;
}

.services-showcase .bloque-modernizacion .tech-intro-box p {
    text-align: left !important; 
    color: #e2e8f0 !important; 
}

/* ?? SOLUCIÓN PARA LAS VIÑETAS REVERSE: Mueve la lista técnica hacia el carril derecho */
.services-showcase .bloque-modernizacion .service-features {
    /* ?? OBLIGATORIO EN REVERSE: Fuerza a las pastillas blancas a quedarse en la columna 2 (Derecha) */
    grid-column: 2 !important; 
    
    max-width: 550px !important; 
    width: 100% !important;
    margin-bottom: 30px !important;
    margin-top: -20px !important; /* Tu sintonía fina de pegado vertical */
    margin-left: 0px !important;
    
    /* ?? Alínea la caja de viñetas hacia el filo derecho para hacer match con el título */
    justify-self: end !important;
    align-self: flex-start !important;
    
    background: rgba(11, 22, 34, 0.82) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(0, 229, 255, 0.25) !important;
    border-left: 5px solid #00e5ff !important; 
    border-radius: 16px !important; 
    padding: 25px !important;
}

/* FILAMENTO VERTICAL Y DIODO LED DE ENTRADA (Sincronizado) */
.services-showcase .bloque-modernizacion .service-header-flex .service-icon i {
    color: #00e5ff !important; 
    filter: drop-shadow(0 0 10px rgba(0, 229, 255, 0.6)) !important; 
}

.services-showcase .bloque-modernizacion .service-header-flex .vertical-divider {
    background-color: #00e5ff !important; 
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.5) !important;
}

/* Título Principal */
.services-showcase .bloque-modernizacion .service-header-flex h3 {
    color: #ffffff !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
}

/* Ajustes de las Viñetas Blancas */
.services-showcase .bloque-modernizacion .service-features li i {
    color: #00e5ff !important;
    filter: drop-shadow(0 0 4px rgba(0, 229, 255, 0.7)) !important;
}

.services-showcase .bloque-modernizacion .service-features li span {
    color: #1e293b !important; /* Texto oscuro de alta nitidez sobre las pastillas blancas */
}


/* --- 6.3 BLOQUE 3: MANTENIMIENTO PREVENTIVO DE ASCENSORES (Fila Normal Calibrada) *********BLOQUE 3-----------BLOQUE 3----------*/
.services-showcase .bloque-mantenimiento {
    background-color: #020618 !important; /* Tu base azul exitosa */
    
    /* ??? MARCA DE AGUA INDEPENDIENTE: Fondo de cables de tracción y sala de máquinas en luminosidad */
    background-image: linear-gradient(135deg, 
        rgba(153, 161, 175, 1) 0%,   
        rgba(125, 133, 145, 0.50) 100%  
    ), url('img/mantenimiento_preventivo_ascensores.webp') !important; 
    
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
    background-blend-mode: luminosity !important;
    
    border: 0px solid rgba(0, 0, 0, 0.50) !important; 
    border-radius: 30px !important; 
    padding: 35px 35px !important; /* Tu colchón ergonómico premium */
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35) !important; 
}

/* ?? SOLUCIÓN PRINCIPAL: Obliga a la columna de texto a respetar su carril izquierdo y no pisar las fotos */
.services-showcase .bloque-mantenimiento .service-text {
    max-width: 600px !important; /* Limita la envoltura completa del texto */
    width: 100% !important;
    justify-self: start !important;
    align-self: flex-start !important;
}

/* EMPAQUETADO COMPACTO DEL PÁRRAFO INTRODUCTORIO (Clonando tus valores exactos) */
.services-showcase .bloque-mantenimiento .tech-intro-box {
    max-width: 550px !important; /* Recorta el párrafo para que termine antes de las imágenes */
    width: 100% !important;
    margin-top: 15px !important;
    margin-bottom: 2px !important;
    margin-right: 0px !important;
    padding-right: 20px !important;
    padding-left: 25px !important;
}

.services-showcase .bloque-mantenimiento .tech-intro-box p {
    text-align: left !important; 
    color: #e2e8f0 !important; 
}

/* ?? SOLUCIÓN PARA LAS VIÑETAS: Le ordena a la lista que se meta en la columna izquierda y no se estire abajo */
.services-showcase .bloque-mantenimiento .service-features {
    grid-column: 1 !important; /* Fuerza a las pastillas blancas a quedarse en la columna 1 (Izquierda) */
    max-width: 550px !important; /* Evita que las pastillas toquen el bloque de fotos */
    width: 100% !important;
    margin-bottom: 30px !important;
    margin-top: -20px !important; /* Tu sintonía fina de pegado vertical */
    margin-left: 0px !important;
    justify-self: start !important;
    align-self: flex-start !important;
    
    background: rgba(11, 22, 34, 0.82) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(0, 229, 255, 0.25) !important;
    border-left: 5px solid #00e5ff !important; 
    border-radius: 16px !important; 
    padding: 25px !important;
}

/* FILAMENTO VERTICAL Y DIODO LED DE ENTRADA (Sincronizado) */
.services-showcase .bloque-mantenimiento .service-header-flex .service-icon i {
    color: #00e5ff !important; 
    filter: drop-shadow(0 0 10px rgba(0, 229, 255, 0.6)) !important; 
}

.services-showcase .bloque-mantenimiento .service-header-flex .vertical-divider {
    background-color: #00e5ff !important; 
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.5) !important;
}

/* Título Principal */
.services-showcase .bloque-mantenimiento .service-header-flex h3 {
    color: #ffffff !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
}

/* Ajustes de las Viñetas Blancas */
.services-showcase .bloque-mantenimiento .service-features li i {
    color: #00e5ff !important;
    filter: drop-shadow(0 0 4px rgba(0, 229, 255, 0.7)) !important;
}

.services-showcase .bloque-mantenimiento .service-features li span {
    color: #1e293b !important; /* Texto oscuro de alta nitidez sobre las pastillas blancas */
}


/* --- 6.4 BLOQUE 4: FABRICACIÓN Y REPARACIÓN DE MONTACARGAS (Zigzag Invertido Calibrado) *********BLOQUE 4-----------BLOQUE 4----------*/
.services-showcase .bloque-montacargas {
    background-color: #020618 !important; /* Tu base azul exitosa */
    
    /* ??? MARCA DE AGUA INDEPENDIENTE: Fondo de perfiles estructurales pesados y chasis industrial */
    background-image: linear-gradient(135deg, 
        rgba(153, 161, 175, 1) 0%,   
        rgba(125, 133, 145, 0.50) 100%  
    ), url('img/fabricacion_montacargas_industrial.webp') !important; 
    
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
    background-blend-mode: luminosity !important;
    
    border: 0px solid rgba(0, 0, 0, 0.50) !important; 
    border-radius: 30px !important;  
    padding: 35px 35px !important; 
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35) !important; 
}

/* ?? REVERSE DE PC: Obliga a la columna de texto a respetar su carril DERECHO en el zigzag */
.services-showcase .bloque-montacargas .service-text {
    max-width: 600px !important; 
    width: 100% !important;
    
    /* En las filas invertidas, el texto se alinea firmemente hacia la derecha de la pantalla */
    justify-self: end !important; 
    align-self: flex-start !important;
}

/* EMPAQUETADO COMPACTO DEL PÁRRAFO INTRODUCTORIO (Clonando tus valores de éxito) */
.services-showcase .bloque-montacargas .tech-intro-box {
    max-width: 550px !important; 
    width: 100% !important;
    margin-top: 15px !important;
    margin-bottom: 2px !important;
    margin-right: 0px !important;
    padding-right: 20px !important;
    padding-left: 25px !important;
}

.services-showcase .bloque-montacargas .tech-intro-box p {
    text-align: left !important; 
    color: #e2e8f0 !important; 
}

/* ?? SOLUCIÓN PARA LAS VIÑETAS REVERSE: Mueve la lista técnica hacia el carril derecho */
.services-showcase .bloque-montacargas .service-features {
    /* Fuerza a las pastillas blancas a quedarse en la columna 2 (Derecha) */
    grid-column: 2 !important; 
    
    max-width: 550px !important; 
    width: 100% !important;
    margin-bottom: 30px !important;
    margin-top: -20px !important; /* Tu sintonía fina de pegado vertical */
    margin-left: 0px !important;
    
    /* Alinea la caja de viñetas hacia el filo derecho para hacer juego con el título */
    justify-self: end !important;
    align-self: flex-start !important;
    
    background: rgba(11, 22, 34, 0.82) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(0, 229, 255, 0.25) !important;
    border-left: 5px solid #00e5ff !important; 
    border-radius: 16px !important; 
    padding: 25px !important;
}

/* FILAMENTO VERTICAL Y DIODO LED DE ENTRADA (Sincronizado) */
.services-showcase .bloque-montacargas .service-header-flex .service-icon i {
    color: #00e5ff !important; 
    filter: drop-shadow(0 0 10px rgba(0, 229, 255, 0.6)) !important; 
}

.services-showcase .bloque-montacargas .service-header-flex .vertical-divider {
    background-color: #00e5ff !important; 
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.5) !important;
}

/* Título Principal */
.services-showcase .bloque-montacargas .service-header-flex h3 {
    color: #ffffff !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
}

/* Ajustes de las Viñetas Blancas */
.services-showcase .bloque-montacargas .service-features li i {
    color: #00e5ff !important;
    filter: drop-shadow(0 0 4px rgba(0, 229, 255, 0.7)) !important;
}

.services-showcase .bloque-montacargas .service-features li span {
    color: #1e293b !important; /* Texto oscuro de alta nitidez sobre las pastillas blancas */
}


/* --- 6.5 BLOQUE 5: SISTEMAS SALVAESCALERAS Y ACCESIBILIDAD (Fila Normal Calibrada) *********BLOQUE 5-----------BLOQUE 5----------*/
.services-showcase .bloque-salvaescaleras {
    background-color: #020618 !important; /* Tu base azul exitosa */
    
    /* ??? MARCA DE AGUA INDEPENDIENTE: Fondo ergonómico de rieles y silla salvaescaleras (¡CORREGIDO CON !IMPORTANT!) */
    background-image: linear-gradient(135deg, 
        rgba(153, 161, 175, 1) 0%,   
        rgba(125, 133, 145, 0.50) 100%  
    ), url('img/silla_salvaescaleras_caracas.webp') !important; 
    
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
    background-blend-mode: luminosity !important;
    
    border: 1px solid rgba(0, 229, 255, 0.2) !important; /* Filamento perimetral unificado */
    border-radius: 20px !important; /* ?? CORREGIDO: Ajustado a 20px para mantener simetría exacta con el Bloque 1 */ 
    padding: 35px 35px !important; /* Tu colchón ergonómico premium unificado */
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35) !important; 
}

/* ?? SOLUCIÓN PRINCIPAL: Obliga a la columna de texto a respetar su carril izquierdo y no pisar las fotos */
.services-showcase .bloque-salvaescaleras .service-text {
    max-width: 600px !important; /* Limita la envoltura completa del texto */
    width: 100% !important;
    justify-self: start !important;
    align-self: flex-start !important;
}

/* EMPAQUETADO COMPACTO DEL PÁRRAFO INTRODUCTORIO (Clonando tus valores de éxito) */
.services-showcase .bloque-salvaescaleras .tech-intro-box {
    max-width: 550px !important; /* Recorta el párrafo para que termine antes de las imágenes */
    width: 100% !important;
    margin-top: 15px !important;
    margin-bottom: 2px !important;
    margin-right: 0px !important;
    padding-right: 20px !important;
    padding-left: 25px !important;
}

.services-showcase .bloque-salvaescaleras .tech-intro-box p {
    text-align: left !important; 
    color: #e2e8f0 !important; 
}

/* ?? SOLUCIÓN PARA LAS VIÑETAS: Le ordena a la lista que se meta en la columna izquierda y no se estire abajo */
.services-showcase .bloque-salvaescaleras .service-features {
    grid-column: 1 !important; /* Fuerza a las pastillas blancas a quedarse en la columna 1 (Izquierda) */
    max-width: 550px !important; /* Evita que las pastillas toquen el bloque de fotos */
    width: 100% !important;
    margin-bottom: 30px !important;
    margin-top: -20px !important; /* Tu sintonía fina de pegado vertical */
    margin-left: 0px !important;
    justify-self: start !important;
    align-self: flex-start !important;
    
    background: rgba(11, 22, 34, 0.82) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(0, 229, 255, 0.25) !important;
    border-left: 5px solid #00e5ff !important; 
    border-radius: 16px !important; 
    padding: 25px !important;
}

/* FILAMENTO VERTICAL Y DIODO LED DE ENTRADA (Sincronizado) */
.services-showcase .bloque-salvaescaleras .service-header-flex .service-icon i {
    color: #00e5ff !important; 
    filter: drop-shadow(0 0 10px rgba(0, 229, 255, 0.6)) !important; 
}

.services-showcase .bloque-salvaescaleras .service-header-flex .vertical-divider {
    background-color: #00e5ff !important; 
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.5) !important;
}

/* Título Principal (Corregido a blanco para alto contraste sobre fondo oscuro) */
.services-showcase .bloque-salvaescaleras .service-header-flex h3 {
    color: #ffffff !important; /* ?? CORREGIDO: Pasa a blanco puro para alinearse al éxito de tus bloques oscuros */
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
}

/* Ajustes de las Viñetas Blancas */
.services-showcase .bloque-salvaescaleras .service-features li i {
    color: #00e5ff !important;
    filter: drop-shadow(0 0 4px rgba(0, 229, 255, 0.7)) !important;
}

.services-showcase .bloque-salvaescaleras .service-features li span {
    color: #1e293b !important; /* Texto oscuro de alta nitidez sobre las pastillas blancas */
}




/* ==========================================================================
   7. FIJACIÓN DE FLUJO TEXTUAL CONTINUO PARA CONTENEDORES SPAN (PC/MÓVIL)
   ========================================================================== */
.service-features li {
    display: flex !important;
    justify-content: flex-start !important; /* Fuerza a los elementos a pegarse a la izquierda */
    align-items: flex-start !important;
    gap: 12px !important;                   /* Separa el checkmark del texto de forma fija */
}

.service-features li span {
    display: inline !important;             /* Obliga a todo el texto a fluir de forma corrida */
    text-align: left !important;
    width: 100% !important;
}

.service-features li span strong {
    display: inline !important;             /* Fusiona la negrita dentro del mismo renglón */
    font-weight: 700 !important;
}

/* ==========================================================================
   8. BOTÓN FLOTANTE INDEPENDIENTE "PB" (EN ACABADO DE BOTONERA METÁLICA)
   ========================================================================== */
.elevator-btn-back {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 999;
    text-decoration: none;
    display: block;
    border-radius: 50%;
    -webkit-tap-highlight-color: transparent !important;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.elevator-btn-back .panel-button {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #162225 0%, #0b0e11 100%); 
    border: 3px solid #7f8c8d;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5), inset 0 2px 5px rgba(255, 255, 255, 0.1);
    cursor: pointer;
    transition: all 0.2s ease;
}

.elevator-btn-back .button-text {
    color: #bdc3c7;
    font-family: 'Arial', sans-serif;
    font-weight: 900;
    font-size: 18px;
    line-height: 1;
    margin-top: 2px;
    transition: color 0.3s ease;
}

.elevator-btn-back .button-light {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #555555; 
    margin-top: 4px;
    transition: all 0.3s ease;
}

/* --- INTERACCIONES DEL PULSADOR (HOVER EN COMPUTADORA) --- */
.elevator-btn-back:hover .panel-button {
    border-color: #56C8C0; /* Cambio temático a cian/menta de cabina activa */
    box-shadow: 0 0 20px rgba(86, 200, 192, 0.6), inset 0 1px 3px rgba(255, 255, 255, 0.2);
    transform: translateY(-3px);
}

.elevator-btn-back:hover .button-text {
    color: #ffffff;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
}

.elevator-btn-back:hover .button-light {
    background-color: #00d2ff; /* Luz indicadora LED azul activa */
    box-shadow: 0 0 10px #00d2ff, 0 0 20px #00d2ff;
}

.elevator-btn-back:active .panel-button {
    transform: translateY(1px) scale(0.95);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}


/* ==========================================================================
   X1. SECCIÓN: AUTOMATIZACIÓN, CARGA Y ACCESIBILIDAD (3 COLUMNAS PC)
   ========================================================================== */
.process-section {
    padding: 60px 0;
    background-color: #ffffff;
}

.process-grid.columns-three {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Estructura exacta de 3 columnas de la foto */
    gap: 30px;
    margin-top: 40px;
}

.process-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    
    /* ? FILAMENTO SUPERIOR DELGADO EN CIAN NEÓN EXACTO A TU CAPTURA */
    border-top: 3px solid #00d2ff; 
    
    border-radius: 8px;
    padding: 35px 25px;
    text-align: left; /* Alineación limpia a la izquierda */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), border-color 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
}

/* Contenedor ligero para los iconos nativos del PDF sin fondos feos */
.process-icon-box {
    width: auto;
    height: auto;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 20px;
    background: transparent !important; /* Totalmente limpio */
}

.process-icon-box i {
    font-size: 2rem; /* Tamaño destacado de ingeniería */
    color: #1e293b;  /* Tono oscuro minimalista pasivo */
    transition: color 0.3s ease, transform 0.3s ease;
}

.process-card h3 {
    font-size: 1.35rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 15px;
    font-family: 'Poppins', sans-serif;
}

.process-card p {
    font-size: 14px;
    color: #64748b;
    line-height: 1.6;
    margin-bottom: 25px;
    text-align: justify;
}

/* Estilo exacto para el botón "Ver detalles ?" */
.card-detalles-link {
    font-size: 14px;
    font-weight: 600;
    color: #56C8C0; /* Tu menta metalizado de STE para los enlaces */
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s ease, gap 0.2s ease;
}

.card-detalles-link i {
    font-size: 12px;
}

/* ==========================================================================
   INTERACCIONES CINÉTICAS (EFECTO HOVER DE RESPUESTA)
   ========================================================================== */
.process-card:hover {
    transform: translateY(-5px);
    border-color: #00d2ff;
    box-shadow: 0 12px 30px rgba(0, 210, 255, 0.1);
}

/* El icono se enciende en Cian al pasar el mouse por la tarjeta */
.process-card:hover .process-icon-box i {
    color: #00d2ff;
    transform: scale(1.05);
}

.process-card:hover .card-detalles-link {
    color: #00d2ff; /* El enlace cambia a azul neón al activarse */
    gap: 10px;       /* Desplazamiento dinámico de la flecha */
}



/* ==========================================================================
   X2. SECCIÓN: MARCAS ALIADAS EN REJILLA DE 5 COLUMNAS PC (ESTILO CAPTURA)
   ========================================================================== */
.brands-section {
    padding: 60px 0;
    background-color: #ffffff; /* Fondo blanco limpio unificado con tu pantalla */
}

.brands-section .section-title span {
    font-size: 13px;
    font-weight: 700;
    color: #00d2ff; /* Subtítulo superior en cian neón */
    letter-spacing: 1px;
    display: block;
    margin-bottom: 10px;
}

.brands-section .section-title h2 {
    font-size: 2.2rem;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 20px;
}

/* Rejilla de 5 columnas fluidas alineadas con la GPU */
.brands-grid.grid-five-columns {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    margin-top: 40px;
    padding: 0 10px;
}

/* Estilo exacto de las tarjetas blancas minimalistas */
.brand-item {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 25px 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 110px;
    box-sizing: border-box;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
    cursor: default;
}

.brand-item strong {
    font-family: 'Poppins', sans-serif;
    font-size: 1.25rem;
    font-weight: 800;
    color: #1e293b;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.brand-item span {
    font-family: 'Poppins', sans-serif;
    font-size: 10px;
    font-weight: 600;
    color: #94a3b8;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-align: center;
}

/* ? EFECTO HOVER SELECCIONADO EN CIAN NEÓN IDENTICO A TU IMAGEN (OTIS) */
.brand-item:hover {
    border-color: #00d2ff;
    box-shadow: 0 0 15px rgba(0, 210, 255, 0.15);
    transform: translateY(-2px);
}

.brand-item:hover strong {
    color: #00d2ff; /* El texto se enciende con el acento digital */
}

/* Ajuste del miniseparador interno de la sección de marcas */
.short-divider {
    margin: 15px auto !important;
    height: 40px !important;
}
.short-divider .elevator-arrows {
    width: 40px !important;
    height: 40px !important;
    gap: 2px !important;
}



/* ==========================================================================
   9. PARCHE DE ALINEACIÓN SECCIÓN DE COTIZACIONES (PC Y MÓVIL)
   ========================================================================== */
.quote-section h2 {
    text-align: center !important;   /* Fuerza el centrado horizontal absoluto de la frase */
    width: 100% !important;          /* Asegura que ocupe todo el ancho disponible para alinearse */
    margin-left: auto !important;
    margin-right: auto !important;
}


/* ==========================================================================
   10. MEDIA QUERY: OPTIMIZACIÓN PARA LAPTOPS Y MONITORES MEDIANOS (1400PX)
   ========================================================================== */
@media (max-width: 1400px) {
    .ad-sidebar {
        width: 120px !important;
    }
    .main-wrapper {
        max-width: 1140px !important;
    }
}


/* ==========================================================================
   11. MEDIA QUERY: PUNTO DE QUIEBRE PARA PANTALLAS ESTÁNDAR (1300PX)
   ========================================================================== */
@media (max-width: 1300px) {
    .ad-sidebar.left-ad,
    .ad-sidebar.right-ad {
        display: none !important;
    }
    
    .ads-layout-container {
        display: block !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .main-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        border: none !important;
        box-shadow: none !important;
    }
}


/* ==========================================================================
   12. MEDIA QUERY: TRANSICIÓN PARA TABLETS EN FORMATO HORIZONTAL (992PX)
   ========================================================================== */
@media (max-width: 992px) {
    /* ?? ACTUALIZACIÓN: Pasa la cuadrícula masiva de PC a un flujo vertical limpio */
    .services-list .service-row {
        display: flex !important;
        flex-direction: column !important; 
        gap: 30px !important;
        margin-bottom: 55px !important;
        padding: 30px 20px !important;
    }
    
    /* ?? ACTUALIZACIÓN: Desactiva el modo reverse de PC para que el texto siempre lidere verticalmente */
    .services-list .service-row.reverse {
        flex-direction: column !important; 
    }

    /* Modula las cajas de texto, viñetas y párrafos al ancho total de la tableta */
    .services-list .service-row .service-text,
    .services-list .service-row .service-features,
    .services-list .service-row .tech-intro-box {
        max-width: 100% !important;
        width: 100% !important;
    }
    
    /* Adaptación del abanico de imágenes gemelas en formato tableta */
    .services-list .service-row .service-images {
        width: 100% !important;
        max-width: 500px !important;
        margin: 20px auto !important;
    }

    .services-list .service-row .service-images img {
        height: 240px !important; 
        width: calc(50% - 6px) !important;
        max-width: 50% !important;
    }
    
    /* Ajuste de escala para el Héro de elevación en formato tableta */
    .main-wrapper .hero-blue h1 {
        font-size: 2.5rem !important;
    }
    
    .main-wrapper .hero-blue .hero-subtitle {
        font-size: 1.05rem !important;
        max-width: 90% !important;
    }
    
    /* ?? ACTUALIZACIÓN: Centrado simétrico de la nueva botonera por fila */
    .services-list .service-row .service-btn-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        margin-top: 10px !important;
        margin-bottom: 20px !important;
    }
    
    /* ?? ACTUALIZACIÓN CRÍTICA: Despega el divisor de flechas mecánicas para no tapar el botón */
    .services-list .elevator-divider {
        grid-column: span 2 !important;
        width: 100% !important;
        margin-top: 20px !important;
        margin-bottom: 0px !important;
    }

    /* Ajuste de grillas secundarias en formato tableta */
    .process-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }

    .brands-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}


/* ==========================================================================
   13. RESPONSIVE MAESTRO: CRÍTICO PARA SMARTPHONES (768PX)
   ========================================================================== */
@media (max-width: 768px) {

    /* ----------------------------------------------------------------------
       13.1 BOTÓN FLOTANTE INDEPENDIENTE "PB" (RESPUESTA TÁCTIL AZUL NEÓN)
       ---------------------------------------------------------------------- */
    .elevator-btn-back {
        bottom: 20px !important;
        right: 20px !important;
    }

    .elevator-btn-back .panel-button {
        width: 48px !important;
        height: 48px !important;
        border-width: 2px !important;
    }

    /* Colchón elástico por hardware para facilitar la pulsación con el pulgar */
    .elevator-btn-back .panel-button::after {
        content: "";
        position: absolute;
        top: -8px; 
        left: -8px; 
        right: -8px; 
        bottom: -8px;
        border-radius: 50%;
        background: rgba(0, 210, 255, 0);
        transition: background 0.2s ease, transform 0.2s ease;
        pointer-events: none;
        transform: scale(0.9);
    }

    /* Efecto de destello de llamada registrada al mantener presionado en celulares */
    .elevator-btn-back:active .panel-button::after {
        background: rgba(0, 210, 255, 0.25) !important;
        transform: scale(1.1) !important;
    }

    .elevator-btn-back .button-text { 
        font-size: 14px !important; 
    }

    .elevator-btn-back .button-light { 
        width: 4px !important; 
        height: 4px !important; 
        margin-top: 2px !important; 
    }

    /* ----------------------------------------------------------------------
       13.2 FRANJA HERO INTERNA (ADAPTACIÓN ERGONÓMICA MENTA INDUSTRIAL)
       ---------------------------------------------------------------------- */
    body .ads-layout-container .main-wrapper .hero-blue {
        padding: 15px 0 25px 0 !important; 
        /* Sincronización con el fondo metalizado industrial oscuro unificado de la versión PC */
        background: linear-gradient(135deg, rgba(17, 24, 39, 0.95) 0%, rgba(22, 34, 57, 0.9) 100%),
                    url('img/ductos_caracas.webp') no-repeat center center !important;
        background-size: cover !important;
    }

    body .ads-layout-container .main-wrapper .hero-blue h1 {
        font-size: 1.3rem !important;
        line-height: 1.3 !important;
        padding: 0 10px;
    }

    body .ads-layout-container .main-wrapper .hero-blue .hero-subtitle {
        font-size: 0.85rem !important;
        padding: 0 15px !important;
        line-height: 1.5 !important;
        color: #e2e8f0 !important; /* Tono blanco cian suave idéntico al de PC */
    }

    /* --- 13.2.1 MARCA DE AGUA: LÍNEAS DE TRACCIÓN EN SEGUNDO PLANO (MÓVIL) --- */
    body .ads-layout-container .main-wrapper .hero-blue::after {
        content: "" !important;
        width: 130px !important;
        height: 100% !important;
        right: 10px !important;
        bottom: 0 !important;
        opacity: 0.15 !important; /* Opacidad atenuada para no competir con el H1 en pantallas pequeñas */
        background-size: cover !important;
        transform: none !important; 
    }

    body .ads-layout-container .main-wrapper .hero-blue::before {
        display: none !important; 
    }
	
	/* ?? EXPANSIÓN HORIZONTAL DEL SUBTÍTULO EN EL HERO AZUL DE ASCENSORES */
	.hero-blue {
        width: 100% !important;
        padding: 30px 0 !important; /* Espaciado arriba y abajo balanceado */
        text-align: center !important;
        float: none !important;      /* Elimina desvíos laterales */
    }
	
	.hero-blue .container {
        width: 100% !important;
        max-width: 100% !important;
        /* El truco maestro: 'auto' distribuye el espacio sobrante por igual en ambos lados */
        margin-left: auto !important; 
        margin-right: auto !important;
        padding-left: 5px !important;  /* Margen interno izquierdo idéntico... */
        padding-right: 5px !important; /* ...al margen interno derecho */
        box-sizing: border-box !important; /* Evita que el padding sume ancho extra */
        float: none !important;
    }

    .hero-blue h1 {
        font-size: 1.0rem !important;   /* Evita que el título se desborde en pantallas pequeñas */
        text-align: center !important;
    }

    /* ?? CENTRADO AXIAL ABSOLUTO DEL PÁRRAFO HERO EN MÓVILES */
    .hero-blue .hero-subtitle {
        font-size: 0.85rem !important;
        width: 100% !important;        /* Ocupa el ancho completo para evitar que la caja se encoja */
        max-width: 100% !important;    /* Rompe cualquier límite porcentual heredado de PC */
        margin-left: auto !important;  /* TRUCO MAESTRO: Centra la caja equilibrando el espacio izquierdo... */
        margin-right: auto !important; /* ...con el espacio derecho de la pantalla */
        margin-top: 12px !important;   /* Separa verticalmente del H1 */
        margin-bottom: 0 !important;
        padding-left: 0 !important;    /* Elimina cualquier sangría o espacio interno izquierdo */
        padding-right: 0 !important;   /* Elimina cualquier sangría o espacio interno derecho */
        text-align: center !important; /* Centra las palabras dentro del bloque alineado */
        line-height: 1.35 !important;
        display: block !important;     /* Asegura el comportamiento de bloque alineable */
    }


    /* ----------------------------------------------------------------------
       13.3 CHASIS ESTRUCTURAL COMÚN PARA EL FLUJO VERTICAL TÁCTIL
       ---------------------------------------------------------------------- */
    /* Reseteo y dirección del flujo maestro de la rejilla de servicios */
    .services-list .service-row {
        display: flex !important;
        flex-direction: column !important; /* Fuerza el apilamiento vertical unificado */
        box-sizing: border-box !important;
    }

    /* Secuencia lógica estricta de componentes en el chasis móvil general */
    .services-list .service-row .service-text {
        width: 100% !important;
        order: 1 !important;        /* 1?? Primero: Título e introducción */
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Nota: Las imágenes gemelas (.service-images) adoptarán automáticamente el order: 2 */

    /* Forzado base de visualización flex para las listas de viñetas */
    .services-list .service-row .service-features {
        order: 3 !important;        /* 3?? Tercero: Lista de viñetas con checks */
        display: flex !important;
        flex-direction: column !important;
        box-sizing: border-box !important;
    }

    /* Separadores de flechas y botoneras al final de la fila */
    .services-list .elevator-divider {
        order: 4 !important;        /* 4?? Cuarto y último: Línea cónica y flechas */
        margin: 30px auto !important;
        margin-top: -10px !important;   
        margin-bottom: -10px !important; 	
        width: 90% !important;
    }

    /* Base común para el texto del párrafo de introducción holográfico */
    .services-list .service-row .tech-intro-box,
    .services-list .service-row .tech-intro-box p {
        text-align: left !important; /* Evita justificaciones con huecos antiestéticos */
        box-sizing: border-box !important;
    }


    /* ----------------------------------------------------------------------
       13.4 LÓGICA DE ANIMACIÓN CINEMÁTICA INTERACTIVA GLOBAL (IMÁGENES)
       ---------------------------------------------------------------------- */
    /* Comportamiento base y transiciones elásticas para las imágenes gemelas */
    .services-list .service-row .service-images img {
        width: calc(50% - 6px) !important;
        max-width: 50% !important;
        height: 100% !important;
        border-radius: 8px !important;
        object-fit: cover !important; 
        touch-action: pan-y !important;
        position: relative !important;
        z-index: 1 !important;
        transform: translate3d(0, 0, 0) scale(1) !important;
        transform-origin: center center !important;
        transition: transform 0.38s cubic-bezier(0.25, 1, 0.5, 1), 
                    width 0.38s cubic-bezier(0.25, 1, 0.5, 1),
                    box-shadow 0.38s ease, 
                    opacity 0.35s ease !important;
        will-change: transform, width, opacity;
        margin: 0 !important;
    }

    /* --- 13.4.1 CONTROL DE COMPAÑERA ATENUADA CUANDO LA OTRA TIENE ZOOM --- */
    .services-list .service-row .service-images img.img-1.foto-expandida ~ img.img-2 {
        position: relative !important;
        margin: 0 0 0 auto !important;
        transform: translate3d(0, 0, 0) scale(1) !important;
        opacity: 0.3 !important; 
        box-shadow: none !important;
    }
    .services-list .service-row .service-images img.img-2.foto-expandida ~ img.img-1 {
        position: relative !important;
        margin: 0 auto 0 0 !important;
        transform: translate3d(0, 0, 0) scale(1) !important;
        opacity: 0.3 !important;
        box-shadow: none !important;
    }

        /* --- 13.4.2 CONTROL CINÉTICO DE EXPANSIÓN (ZOOM ABSOLUTO EN CAJA DE CRISTAL) --- */
    /* FOTO 1 (Izquierda): Fuerza el centrado axial restando los píxeles perimetrales del vidrio */
    .services-list .service-row .service-images img.img-1.foto-expandida {
        position: fixed !important;          /* ? CAMBIO CLAVE: Cambiado a fixed para flotar sobre el viewport real */
        top: 50% !important;
        left: 50% !important;                /* Clava el punto de anclaje en el centro de la pantalla */
        right: auto !important;
        bottom: auto !important;
		margin-left: 20px !important; 
        
        /* TRUCO INDESTRUCTIBLE: Mide el ancho completo del celular y le quita 48px de aire en total */
        width: calc(100vw - 48px) !important;/* ??? Deja exactamente 24px de respiro a la izquierda y 24px a la derecha */
        height: auto !important; 
        max-height: 70vh !important;         /* Limita el estiramiento vertical en pantallas alargadas */
        object-fit: contain !important; 
        background: transparent !important;
        
        /* Centrado simétrico puro por GPU: el -50% compensa el desfase del left/top */
        transform: translate3d(-50%, -50%, 0) scale(1.05) !important;
        transform-origin: center center !important; 
        z-index: 999999 !important;          /* Súper capa soberana por encima del pozo y el menú */
        box-shadow: 0px 20px 50px rgba(0, 0, 0, 0.6) !important;
        border-radius: 14px !important;
    }

    /* FOTO 2 (Derecha): Comportamiento espejo idéntico y centrado para la foto derecha */
    .services-list .service-row .service-images img.img-2.foto-expandida {
        position: fixed !important;          /* ? Cambiado a fixed para asegurar inmunidad contra cajas invertidas reverse */
        top: 50% !important;
        left: 50% !important;                
        right: auto !important;
        bottom: auto !important;
		margin-right: 12px !important; 
        
        /* Sincronización matemática idéntica de respiro lateral */
        width: calc(100vw - 48px) !important;/* ??? Garantiza el mismo colchón simétrico de 24px a los lados */
        height: auto !important;
        max-height: 70vh !important;
        object-fit: contain !important;
        background: transparent !important;
        
        /* Renderizado elástico centrado por hardware */
        transform: translate3d(-50%, -50%, 0) scale(1.05) !important;
        transform-origin: center center !important; 
        z-index: 999999 !important;
        box-shadow: 0px 20px 50px rgba(0, 0, 0, 0.6) !important;
        border-radius: 14px !important;
    }




    /* ==========================================================================
       ?? CONTENEDOR GENERAL - BLOQUE 1: INSTALACIÓN DE ASCENSORES NUEVOS (AUTÓNOMO MÓVIL) ******BLOQUE 1********BLOQUE 1****BLOQUE 1*************
       ========================================================================= */
    .services-list .bloque-ascensores {
        border-radius: 16px !important;
        margin-bottom: 40px !important;
        display: flex !important;
        flex-direction: column !important; /* Asegura el flujo vertical limpio en smartphones */
        
        /* ??? CONTROL DE ALTURA DE LA TARJETA GENERAL:
           El primer número (25px) es el aire de ARRIBA.
           El segundo número (10px) es el aire de los LATERALES.
           El tercer número (45px) es el aire de ABAJO. ¡Aumenta este 45px si quieres que la tarjeta estire más hacia abajo! */
        padding: 25px 10px 45px 10px !important;   

        /* ?? FONDO DE TARJETA Y COLOR CORPORATIVO:
           Asegura que el contenedor tenga posición relativa para poder meter la marca de agua detrás.
           Cambia el 'rgba(17, 24, 39, 0.95)' si quieres alterar el tono oscuro de la tarjeta en móviles. */
        position: relative !important;
        z-index: 1 !important;
        background: rgba(17, 24, 39, 0.95) !important;
        overflow: hidden !important; /* Evita que la marca de agua se desborde de las esquinas redondeadas */
    }

    /* ??? MARCA DE AGUA: CONTROL TOTAL DE IMAGEN DE FONDO, COLOR Y OPACIDAD DE FONDO DEL BLOQUE 1 */
    .services-list .bloque-ascensores::before {
        content: "" !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        z-index: -1 !important; /* Se clava por debajo de los textos y fotos para no estorbar la lectura */
        
        /* ??? TUS CONTROLES DIRECTOS DE MARCA DE AGUA:
           1. url('...'): Reemplaza por la ruta de tu imagen técnica (ej: 'img/plano_ducto.webp').
           2. opacity: Controla qué tan translúcida es la imagen (0.12 es un 12%). Súbelo o bájalo para que no compita con las letras.
           3. background-size: 'cover' estira la foto al fondo completo, 'contain' la mantiene en proporción, '120px' le da un tamaño fijo de ícono.
           4. background-position: 'center', 'right bottom' (esquina inferior derecha) o 'left' según donde quieras ubicar el diseño. */
        background: url('img/ductos_caracas.webp') no-repeat !important;
        background-size: cover !important; 
        background-position: center center !important;
        opacity: 0.12 !important; 
        pointer-events: none !important; /* Hace que el dedo ignore el fondo al deslizar la pantalla */
    }

    /* ?? CAJA DE PÁRRAFOS: Control Total (Ancho, Lectura, Márgenes y Estiramiento) */
    .services-list .bloque-ascensores .tech-intro-box,
    .services-list .bloque-ascensores .tech-intro-box p {
        width: calc(96% + 40px) !important;  /* Altera este valor o pon % (ej. 92%) si quieres cambiar el ancho horizontal */
        max-width: 100% !important;
        margin-left: -14px !important;       /* Alineación al filo izquierdo de la tarjeta (-14px para calc, 0 para % normal) */
        margin-right: -20px !important;      /* Evita desbordes extraños a la derecha (-20px para calc, 0 para % normal) */
        padding-left: 5px !important;        /* Respiro de lectura interno izquierdo junto a la línea de acento */
        padding-right: 15px !important;      /* Respiro de lectura interno derecho para las letras */
        border-radius: 0 !important;         /* Look continuo holográfico industrial */
    }

    /* ?? CONTENEDOR DE IMÁGENES GEMELAS: Control Total (Chasis de Fotos y Centrado) */
    .services-list .bloque-ascensores .service-images {
        width: 100% !important;
        height: 160px !important;            /* Altura de la caja que enmarca tus fotos */
        max-width: 116% !important;          /* Bloquea desplazamientos fantasmas laterales */
        order: 2 !important;                 /* Se posiciona en segundo orden dentro del flujo vertical */
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 10px !important;                /* Separación elástica exacta y fija entre ambas imágenes */
        margin: 15px auto !important;        /* Centrado perimetral limpio arriba y abajo */
        margin-top: -20px !important; 
        margin-bottom: -10px !important; 
        margin-left: 0 !important;           
        margin-right: 0 !important; 
        padding: 0 10px !important; 
        padding-left: 34px !important;       /* Despega la foto 1 del borde izquierdo para centrado manual */
        padding-right: 0px !important; 
        position: relative !important;
        box-sizing: border-box !important;
    }

    /* ?? CAJA DE LOS ÍTEMS: Control Total de Viñetas (Ancho, Relleno, Acople y Estiramiento) */
    .services-list .bloque-ascensores .service-features {
        width: calc(96% + 40px) !important;  /* Altera este valor o pon % si quieres cambiar el ancho de las pastillas */
        max-width: 100% !important;
        margin-left: -14px !important;       /* Alineación al filo izquierdo (-14px para calc, 0 para % normal) */
        margin-right: -20px !important;      /* Evita desbordes extraños a la derecha (-20px para calc, 0 para % normal) */
        padding-left: 25px !important;       /* Sincronizado al acolchado de la lista cyber-oscura */
        padding-right: 25px !important;       
        margin-top: 5px !important;          /* Distancia simétrica respecto a las fotos superiores */
        gap: 12px !important;                /* Distancia de separación vertical entre pastillas */
        order: 3 !important;                 /* Fuerza su orden jerárquico antes del divisor */
        margin-bottom: 15px !important;     
    }

    /* ??? CONTROL DIRECTO DEL DIVISOR DEL BLOQUE 1 (CENTRADO AXIAL INDESTRUCTIBLE Y DESPEGADO)
       Esta nueva sub-sección anula el acople rígido general y clava tus flechas al medio */
    .services-list .bloque-ascensores .elevator-divider {
        order: 5 !important;                 /* Lo clava al final absoluto de la tarjeta */
        width: 90% !important;
        max-width: 90% !important;
        display: flex !important;            /* Cambiado a Flex para un control rígido de alineación */
        justify-content: center !important;  /* Fuerza mecánicamente el centrado axial de las flechas */
        align-items: center !important;
        float: none !important;              
        
        /* TRUCO LÁSER: Fuerza al navegador móvil a equilibrar los orillos de forma elástica */
        margin: 0 auto !important;
        margin-top: 25px !important;         /* Separa el chasis de las viñetas de arriba */
        margin-bottom: 15px !important;      /* Separa las flechas del filo inferior de la tarjeta */
    }

    /* Ajuste milimétrico para asegurar que las líneas e íconos internos del Bloque 1 fluyan al medio */
    .services-list .bloque-ascensores .elevator-divider .elevator-arrows {
        margin-left: auto !important;
        margin-right: auto !important;
        float: none !important;
    }



        /* ==========================================================================
       ??? CONTENEDOR GENERAL - BLOQUE 2: MODERNIZACIÓN Y SISTEMAS DE CONTROL (INMUNIZADO Y CENTRADO) ******BLOQUE 2********BLOQUE 2****BLOQUE 2**************
       ========================================================================== */
    .services-list .bloque-modernizacion {
        border-radius: 16px !important;
        margin-bottom: 40px !important;
        display: flex !important;
        flex-direction: column !important; /* Mantiene el flujo vertical limpio */
        
        /* ??? CONTROL DE ALTURA DE LA TARJETA (BLOQUE 2):
           El primer número (25px) es el aire de ARRIBA.
           El segundo y cuarto número (10px) es el aire de los LATERALES.
           El tercer número (45px) es el aire base de ABAJO. ¡Auméntalo si quieres darle más colchón horizontal! */
        padding: 25px 10px 45px 10px !important;

        /* ?? FONDO DE TARJETA Y COLOR CORPORATIVO:
           Asegura que el contenedor tenga posición relativa para que la marca de agua funcione. */
        position: relative !important;
        z-index: 1 !important;
        background: rgba(17, 24, 39, 0.95) !important;
        overflow: hidden !important; 
    }

    /* ??? MARCA DE AGUA: CONTROL TOTAL DE IMAGEN DE FONDO, COLOR Y OPACIDAD DE FONDO DEL BLOQUE 2 */
    .services-list .bloque-modernizacion::before {
        content: "" !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        z-index: -1 !important; /* Se clava por debajo de textos y fotos */
        
        /* ??? TUS CONTROLES DIRECTOS DE MARCA DE AGUA (BLOQUE 2):
           Cambia la url o la opacidad para tunear el fondo de este bloque de forma independiente. */
        background: url('img/ductos_caracas.webp') no-repeat !important;
        background-size: cover !important; 
        background-position: center center !important;
        opacity: 0.12 !important; 
        pointer-events: none !important; 
    }

    /* ?? CAJA DE PÁRRAFOS: ¡BLINDAJE ABSOLUTO! Forzado de Centrado para Fila Invertida (Reverse) */
    .services-list .service-row.reverse.bloque-modernizacion .tech-intro-box,
    .services-list .service-row.reverse.bloque-modernizacion .tech-intro-box p,
    .services-list .bloque-modernizacion .tech-intro-box,
    .services-list .bloque-modernizacion .tech-intro-box p {
        width: 100% !important;              
        max-width: 100% !important;
        margin-left: 0 !important;           
        margin-right: 0 !important;          
        margin: 0 auto 15px auto !important; /* Añade un margen inferior de 15px para empujar las fotos */
        padding-left: 10px !important;       
        padding-right: 10px !important;      
        border-radius: 8px !important;       
        float: none !important;              
    }

    /* ?? CONTENEDOR DE IMÁGENES GEMELAS: Control Total de las Imágenes (Chasis de Fotos y Centrado) */
    .services-list .bloque-modernizacion .service-images {
        width: 100% !important;
        height: 160px !important;            
        max-width: 116% !important;          
        order: 2 !important;                 
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 10px !important;                
        margin: 15px auto !important;        
        margin-top: -20px !important; 
        margin-bottom: 10px !important;      /* Cambiado a positivo para empujar las viñetas abajo */
        margin-left: 0 !important;           
        margin-right: 0 !important; 
        padding: 0 10px !important; 
        padding-left: 34px !important;       
        padding-right: 0px !important; 
        position: relative !important;
        box-sizing: border-box !important;
    }

    /* ?? CAJA DE LOS ÍTEMS: ¡BLINDAJE ABSOLUTO! Centrado Forzado de la Lista de Viñetas */
    .services-list .service-row.reverse.bloque-modernizacion .service-features,
    .services-list .bloque-modernizacion .service-features {
        width: 100% !important;              
        max-width: 100% !important;
        margin-left: 0 !important;           
        margin-right: 0 !important;          
        padding-left: 15px !important;       
        padding-right: 15px !important;      
        gap: 12px !important;                
        float: none !important;
        order: 3 !important;                 /* Garantiza su posición secuencial antes del botón */
        
        /* ??? TERCER CONTROL DE ALTURA MÓVIL:
           Le damos un margen inferior positivo de 20px. Esto empujará el botón de cotizar 
           y el divisor hacia abajo de forma obligatoria, despegándolos del filo metálico de la tarjeta. */
        margin: 5px auto 20px auto !important; 
    }

    /* ??? CONTROL DIRECTO DEL DIVISOR DEL BLOQUE 2 (CENTRADO AXIAL INDESTRUCTIBLE Y DESPEGADO) */
    .services-list .service-row.reverse.bloque-modernizacion .elevator-divider,
    .services-list .bloque-modernizacion .elevator-divider {
        order: 5 !important;                 /* Lo clava al final absoluto de la tarjeta */
        width: 90% !important;
        max-width: 90% !important;
        display: flex !important;            /* Cambiado a Flex para un control rígido de alineación */
        justify-content: center !important;  /* Fuerza mecánicamente el centrado axial de las flechas */
        align-items: center !important;
        float: none !important;              /* Rompe de raíz la inercia lateral del reverse */
        
        /* TRUCO LÁSER: Fuerza al navegador móvil a equilibrar los orillos e ignora el sabotaje de la sección 13.3 */
        margin: 0 auto !important;
        margin-top: 25px !important;         /* Separa el chasis del botón de cotizar de arriba */
        margin-bottom: 15px !important;      /* Separa las flechas del filo inferior de la tarjeta */
    }

    /* Ajuste milimétrico para asegurar que las líneas e íconos internos fluyan exactamente al medio */
    .services-list .service-row.reverse.bloque-modernizacion .elevator-divider .elevator-arrows,
    .services-list .bloque-modernizacion .elevator-divider .elevator-arrows {
        margin-left: auto !important;
        margin-right: auto !important;
        float: none !important;
    }


        /* ==========================================================================
       ?? CONTENEDOR GENERAL - BLOQUE 3: MANTENIMIENTO PREVENTIVO DE ASCENSORES (INMUNIZADO Y CENTRADO) ******BLOQUE 3********BLOQUE 3****BLOQUE 3**************
       ========================================================================== */
    .services-list .bloque-mantenimiento {
        border-radius: 16px !important;
        margin-bottom: 40px !important;
        display: flex !important;
        flex-direction: column !important; /* Mantiene el flujo vertical limpio */

        /* ??? CONTROL DE ALTURA DE LA TARJETA (BLOQUE 3):
           El primer número (25px) es el aire de ARRIBA.
           El segundo y cuarto número (10px) es el aire de los LATERALES.
           El tercer número (100px) es tu estiramiento personalizado de ABAJO. */
        padding: 25px 10px 100px 10px !important;   

        /* ?? FONDO DE TARJETA Y COLOR CORPORATIVO:
           Asegura que el contenedor tenga posición relativa para que la marca de agua funcione. */
        position: relative !important;
        z-index: 1 !important;
        background: rgba(17, 24, 39, 0.95) !important;
        overflow: hidden !important; 
    }

    /* ??? MARCA DE AGUA: CONTROL TOTAL DE IMAGEN DE FONDO, COLOR Y OPACIDAD DE FONDO DEL BLOQUE 3 */
    .services-list .bloque-mantenimiento::before {
        content: "" !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        z-index: -1 !important; /* Se clava por debajo de textos y fotos */
        
        /* ??? TUS CONTROLES DIRECTOS DE MARCA DE AGUA (BLOQUE 3):
           Cambia la url o la opacidad para tunear el fondo de este bloque de forma independiente. */
        background: url('img/ductos_caracas.webp') no-repeat !important;
        background-size: cover !important; 
        background-position: center center !important;
        opacity: 0.12 !important; 
        pointer-events: none !important; 
    }

    /* ?? CAJA DE PÁRRAFOS: Alineación Absoluta y Centrada del Párrafo del Bloque 3 */
    .services-list .bloque-mantenimiento .tech-intro-box,
    .services-list .bloque-mantenimiento .tech-intro-box p {
        width: 100% !important;              
        max-width: 100% !important;
        margin-left: 0 !important;           
        margin-right: 0 !important;          
        margin: 0 auto 15px auto !important; /* Añade un margen inferior de 15px para empujar las fotos */
        padding-left: 10px !important;       /* Respiro ergonómico junto al haz cian */
        padding-right: 10px !important;      
        border-radius: 8px !important;       
        float: none !important;              
    }

    /* ?? CONTENEDOR DE IMÁGENES GEMELAS: Control Total de las Imágenes (Chasis de Fotos y Centrado) */
    .services-list .bloque-mantenimiento .service-images {
        width: 100% !important;
        height: 160px !important;            
        max-width: 116% !important;          
        order: 2 !important;                 
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 10px !important;                
        margin: 15px auto !important;        
        margin-top: -20px !important; 
        margin-bottom: 10px !important;      /* Cambiado a positivo para empujar las viñetas abajo */
        margin-left: 0 !important;           
        margin-right: 0 !important; 
        padding: 0 10px !important; 
        padding-left: 34px !important;       /* Mantiene tus fotos gemelas en abanico intactas */
        padding-right: 0px !important; 
        position: relative !important;
        box-sizing: border-box !important;
    }

    /* ?? CAJA DE LOS ÍTEMS: Centrado Forzado de la Lista de Viñetas del Bloque 3 */
    .services-list .bloque-mantenimiento .service-features {
        width: 100% !important;              
        max-width: 100% !important;
        margin-left: 0 !important;           
        margin-right: 0 !important;          
        padding-left: 15px !important;       /* Espacio ergonómico para el checkmark doble */
        padding-right: 15px !important;      
        gap: 12px !important;                
        float: none !important;
        order: 3 !important;                 /* Garantiza su posición secuencial antes del botón */

        /* ??? TERCER CONTROL DE ALTURA MÓVIL:
           Le damos un margen inferior positivo de 20px. Esto empujará el botón de cotizar 
           y el divisor hacia abajo de forma obligatoria, despegándolos del filo metálico de la tarjeta. */
        margin: 5px auto 20px auto !important; 
    }

    /* ??? CONTROL DIRECTO DEL DIVISOR DEL BLOQUE 3 (CENTRADO AXIAL INDESTRUCTIBLE Y DESPEGADO) */
    .services-list .bloque-mantenimiento .elevator-divider {
        order: 5 !important;                 /* Lo clava al final absoluto de la tarjeta */
        width: 90% !important;
        max-width: 90% !important;
        display: flex !important;            /* Cambiado a Flex para un control rígido de alineación */
        justify-content: center !important;  /* Fuerza mecánicamente el centrado axial de las flechas */
        align-items: center !important;
        float: none !important;              
        
        /* TRUCO LÁSER: Fuerza al navegador móvil a equilibrar los orillos de forma elástica */
        margin: 0 auto !important;
        margin-top: 25px !important;         /* Separa el chasis de las viñetas de arriba */
        margin-bottom: 15px !important;      /* Separa las flechas del filo inferior de la tarjeta */
    }

    /* Ajuste milimétrico para asegurar que las líneas e íconos internos del Bloque 3 fluyan al medio */
    .services-list .bloque-mantenimiento .elevator-divider .elevator-arrows {
        margin-left: auto !important;
        margin-right: auto !important;
        float: none !important;
    }



        /* ==========================================================================
       ??? CONTENEDOR GENERAL - BLOQUE 4: FABRICACIÓN Y REPARACIÓN DE MONTACARGAS (INMUNIZADO Y CENTRADO)
       ========================================================================== */
    .services-list .bloque-montacargas {
        border-radius: 16px !important;
        margin-bottom: 40px !important;
        display: flex !important;
        flex-direction: column !important; /* Mantiene el flujo vertical limpio */
        
        /* ??? CONTROL DE ALTURA DE LA TARJETA (BLOQUE 4):
           El primer número (25px) es el aire de ARRIBA.
           El segundo y cuarto número (10px) es el aire de los LATERALES.
           El tercer número (45px) es el aire base de ABAJO. ¡Auméntalo si quieres darle más colchón horizontal! */
        padding: 25px 10px 45px 10px !important;

        /* ?? FONDO DE TARJETA Y COLOR CORPORATIVO:
           Asegura que el contenedor tenga posición relativa para que la marca de agua funcione. */
        position: relative !important;
        z-index: 1 !important;
        background: rgba(17, 24, 39, 0.95) !important;
        overflow: hidden !important; 
    }

    /* ??? MARCA DE AGUA: CONTROL TOTAL DE IMAGEN DE FONDO, COLOR Y OPACIDAD DE FONDO DEL BLOQUE 4 */
    .services-list .bloque-montacargas::before {
        content: "" !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        z-index: -1 !important; /* Se clava por debajo de textos y fotos */
        
        /* ??? TUS CONTROLES DIRECTOS DE MARCA DE AGUA (BLOQUE 4):
           Cambia la url o la opacidad para tunear el fondo de este bloque de forma independiente. */
        background: url('img/ductos_caracas.webp') no-repeat !important;
        background-size: cover !important; 
        background-position: center center !important;
        opacity: 0.12 !important; 
        pointer-events: none !important; 
    }

    /* ?? CAJA DE PÁRRAFOS: ¡BLINDAJE ABSOLUTO! Forzado de Centrado para Fila Invertida (Reverse) */
    .services-list .service-row.reverse.bloque-montacargas .tech-intro-box,
    .services-list .service-row.reverse.bloque-montacargas .tech-intro-box p,
    .services-list .bloque-montacargas .tech-intro-box,
    .services-list .bloque-montacargas .tech-intro-box p {
        width: 100% !important;              
        max-width: 100% !important;
        margin-left: 0 !important;           
        margin-right: 0 !important;          
        margin: 0 auto 15px auto !important; /* Añade un margen inferior de 15px para empujar las fotos */
        padding-left: 10px !important;       
        padding-right: 10px !important;      
        border-radius: 8px !important;       
        float: none !important;              
    }

    /* ?? CONTENEDOR DE IMÁGENES GEMELAS: Control Total de las Imágenes (Chasis de Fotos y Centrado) */
    .services-list .bloque-montacargas .service-images {
        width: 100% !important;
        height: 160px !important;            
        max-width: 116% !important;          
        order: 2 !important;                 
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 10px !important;                
        margin: 15px auto !important;        
        margin-top: -20px !important; 
        margin-bottom: 10px !important;      /* Cambiado a positivo para empujar las viñetas abajo */
        margin-left: 0 !important;           
        margin-right: 0 !important; 
        padding: 0 10px !important; 
        padding-left: 34px !important;       
        padding-right: 0px !important; 
        position: relative !important;
        box-sizing: border-box !important;
    }

    /* ?? CAJA DE LOS ÍTEMS: ¡BLINDAJE ABSOLUTO! Centrado Forzado de la Lista de Viñetas */
    .services-list .service-row.reverse.bloque-montacargas .service-features,
    .services-list .bloque-montacargas .service-features {
        width: 100% !important;              
        max-width: 100% !important;
        margin-left: 0 !important;           
        margin-right: 0 !important;          
        padding-left: 15px !important;       
        padding-right: 15px !important;      
        gap: 12px !important;                
        float: none !important;
        order: 3 !important;                 /* Garantiza su posición secuencial antes del botón */
        
        /* ??? TERCER CONTROL DE ALTURA MÓVIL:
           Le damos un margen inferior positivo de 20px. Esto empujará el botón de cotizar 
           y el divisor hacia abajo de forma obligatoria, despegándolos del filo metálico de la tarjeta. */
        margin: 5px auto 20px auto !important; 
    }

    /* ??? CONTROL DIRECTO DEL DIVISOR DEL BLOQUE 4 (CENTRADO AXIAL INDESTRUCTIBLE Y DESPEGADO) */
    .services-list .service-row.reverse.bloque-montacargas .elevator-divider,
    .services-list .bloque-montacargas .elevator-divider {
        order: 5 !important;                 /* Lo clava al final absoluto de la tarjeta */
        width: 90% !important;
        max-width: 90% !important;
        display: flex !important;            /* Cambiado a Flex para un control rígido de alineación */
        justify-content: center !important;  /* Fuerza mecánicamente el centrado axial de las flechas */
        align-items: center !important;
        float: none !important;              /* Rompe de raíz la inercia lateral del reverse */
        
        /* TRUCO LÁSER: Fuerza al navegador móvil a equilibrar los orillos e ignora el sabotaje de la sección 13.3 */
        margin: 0 auto !important;
        margin-top: 25px !important;         /* Separa el chasis del botón de cotizar de arriba */
        margin-bottom: 15px !important;      /* Separa las flechas del filo inferior de la tarjeta */
    }

    /* Ajuste milimétrico para asegurar que las líneas e íconos internos fluyan exactamente al medio */
    .services-list .service-row.reverse.bloque-montacargas .elevator-divider .elevator-arrows,
    .services-list .bloque-montacargas .elevator-divider .elevator-arrows {
        margin-left: auto !important;
        margin-right: auto !important;
        float: none !important;
    }


    /* ==========================================================================
       ? CONTENEDOR GENERAL - BLOQUE 5: SISTEMAS SALVAESCALERAS Y ACCESIBILIDAD (TUNEO MÓVIL BLINDADO)
       ========================================================================== */
    .services-list .bloque-salvaescaleras {
        border-radius: 16px !important;
        margin-bottom: 40px !important;
        display: flex !important;
        flex-direction: column !important; /* Mantiene el flujo vertical limpio */
        
        /* ??? CONTROL DE ALTURA DE LA TARJETA (BLOQUE 5):
           El primer número (25px) es el aire de ARRIBA.
           El segundo y cuarto número (10px) es el aire de los LATERALES.
           El tercer número (45px) es el aire base de ABAJO. ¡Auméntalo si quieres darle más colchón horizontal! */
        padding: 25px 10px 45px 10px !important;

        /* ?? FONDO DE TARJETA Y COLOR CORPORATIVO:
           Asegura que el contenedor tenga posición relative para que la marca de agua funcione. */
        position: relative !important;
        z-index: 1 !important;
        background: rgba(17, 24, 39, 0.95) !important;
        overflow: hidden !important; 
    }

    /* ??? MARCA DE AGUA: CONTROL TOTAL DE IMAGEN DE FONDO, COLOR Y OPACIDAD DE FONDO DEL BLOQUE 5 */
    .services-list .bloque-salvaescaleras::before {
        content: "" !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        z-index: -1 !important; /* Se clava por debajo de textos y fotos */
        
        /* ??? TUS CONTROLES DIRECTOS DE MARCA DE AGUA (BLOQUE 5):
           Cambia la url o la opacidad para tunear el fondo de este bloque de forma independiente. */
        background: url('img/ductos_caracas.webp') no-repeat !important;
        background-size: cover !important; 
        background-position: center center !important;
        opacity: 0.12 !important; 
        pointer-events: none !important; 
    }

    /* ?? CAJA DE PÁRRAFOS: Control Total (Inmunizado con tus Anchos Originales) */
    .services-list .bloque-salvaescaleras .tech-intro-box,
    .services-list .bloque-salvaescaleras .tech-intro-box p {
        width: 100% !important;              
        max-width: 110% !important;          /* Conserva tu de ancho de párrafo personalizado original */
        margin-left: 0px !important;          /* Mantiene tu empuje lateral de letras original */
        margin-right: 0 !important;          
        margin: 0 auto 15px auto !important; /* Equilibra y estabiliza el texto en smartphones */
        padding-left: 10px !important;       
        padding-right: 10px !important;      
        border-radius: 8px !important;       
        float: none !important;              
    }

        /* ?? CONTENEDOR DE IMÁGENES GEMELAS: Control Total (Conserva tu calibración de 39px y 110%) */
    .services-list .bloque-salvaescaleras .service-images {
        width: 100% !important;
        height: 160px !important;            
        max-width: 110% !important;          /* Conserva tu de ancho de chasis de fotos original */
        order: 2 !important;                 
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 10px !important;                
        margin: 15px auto !important;        
        margin-top: -20px !important; 
        margin-bottom: 10px !important;      /* Cambiado a positivo para empujar las viñetas abajo */
        margin-left: 0 !important;           
        margin-right: 0 !important; 
        padding: 0 10px !important; 
        padding-left: 39px !important;       /* Mantiene tu despeje de orilla izquierdo original */
        padding-right: 0px !important; 
        position: relative !important;
        box-sizing: border-box !important;
    }

    /* ?? CAJA DE LOS ÍTEMS: Control Total de las Viñetas (Inmunizado con tus Anchos Originales) */
    .services-list .bloque-salvaescaleras .service-features {
        width: 100% !important;              
        max-width: 100% !important;          /* Conserva tu ancho de viñetas personalizado original */
        margin-left: 0px !important;          /* Mantiene tu empuje de pastillas original */
        margin-right: 0 !important;          
        padding-left: 15px !important;       /* Espacio ergonómico para el checkmark doble */
        padding-right: 15px !important;      
        gap: 12px !important;                
        float: none !important;
        order: 3 !important;                 /* Garantiza su posición secuencial antes del botón */
        margin: 5px auto 20px auto !important; /* Fuerza la holgura hacia el botón inferior */
    }

    /* ??? CONTROL DIRECTO DEL DIVISOR DEL BLOQUE 5 (CENTRADO AXIAL INDESTRUCTIBLE Y DESPEGADO) */
    .services-list .bloque-salvaescaleras .elevator-divider {
        order: 5 !important;                 /* Lo clava al final absoluto de la tarjeta */
        width: 90% !important;
        max-width: 90% !important;
        display: flex !important;            /* Cambiado a Flex para un control rígido de alineación */
        justify-content: center !important;  /* Fuerza mecánicamente el centrado axial de las flechas */
        align-items: center !important;
        float: none !important;              
        
        /* TRUCO LÁSER: Fuerza al navegador móvil a equilibrar los orillos de forma elástica */
        margin: 0 auto !important;
        margin-top: 25px !important;         /* Separa el chasis del botón de cotizar de arriba */
        margin-bottom: 15px !important;      /* Separa las flechas del filo inferior de la tarjeta */
    }

    /* Ajuste milimétrico para asegurar que las líneas e íconos internos fluyan exactamente al medio */
    .services-list .bloque-salvaescaleras .elevator-divider .elevator-arrows {
        margin-left: auto !important;
        margin-right: auto !important;
        float: none !important;
    }



     /* ----------------------------------------------------------------------
       13.4 CINEMÁTICA EN ABANICO (ESTADO DE REPOSO Y ATENUACIÓN MÓVIL)
       ---------------------------------------------------------------------- */
    /* Reglas cinéticas globales para el comportamiento y zoom interactivo de las fotos */
    .services-list .service-row .service-images img {
        width: calc(50% - 6px) !important;
        max-width: 50% !important;
        height: 100% !important;
        border-radius: 8px !important;
        object-fit: cover !important; 
        touch-action: pan-y !important;
        position: relative !important;
        z-index: 1 !important;
        transform: translate3d(0, 0, 0) scale(1) !important;
        transform-origin: center center !important;
        transition: transform 0.38s cubic-bezier(0.25, 1, 0.5, 1), 
                    width 0.38s cubic-bezier(0.25, 1, 0.5, 1),
                    box-shadow 0.38s ease, 
                    opacity 0.35s ease !important;
        will-change: transform, width, opacity;
        margin: 0 !important;
    }

    /* --- 13.4.1 CONTROL DE HERMANOS GENERALES PARA COMPAÑERA ATENUADA --- */
    .services-list .service-row .service-images img.img-1.foto-expandida ~ img.img-2 {
        position: relative !important;
        margin: 0 0 0 auto !important;
        transform: translate3d(0, 0, 0) scale(1) !important;
        opacity: 0.3 !important; 
        box-shadow: none !important;
    }
    .services-list .service-row .service-images img.img-2.foto-expandida ~ img.img-1 {
        position: relative !important;
        margin: 0 auto 0 0 !important;
        transform: translate3d(0, 0, 0) scale(1) !important;
        opacity: 0.3 !important;
        box-shadow: none !important;
    }

    /* --- 13.4.2 CONTROL CINÉTICO DE EXPANSIÓN (CODENADAS DE ZOOM) --- */
    .services-list .service-row .service-images img.img-1.foto-expandida {
        position: absolute !important; 
        top: 50% !important;
        bottom: auto !important;
        left: 15px !important; 
        right: auto !important;
        width: 72vw !important;
        height: auto !important; 
        max-height: 280px !important; 
        object-fit: contain !important; 
        background: transparent !important;
        transform: translate3d(0, -50%, 0) scale(1.1) !important;
        transform-origin: left center !important; 
        z-index: 99999 !important; 
        box-shadow: -10px 15px 40px rgba(0, 0, 0, 0.4) !important;
        border-radius: 12px !important;
    }
    .services-list .service-row .service-images img.img-2.foto-expandida {
        position: absolute !important; 
        top: 50% !important;
        bottom: auto !important;
        right: -15px !important;
        left: auto !important;
        width: 72vw !important;
        height: auto !important;
        max-height: 280px !important;
        object-fit: contain !important;
        background: transparent !important;
        transform: translate3d(0, -50%, 0) scale(1.1) !important;
        transform-origin: right center !important; 
        z-index: 99999 !important;
        box-shadow: 10px 15px 40px rgba(0, 0, 0, 0.4) !important;
        border-radius: 12px !important;
    }

    /* --- 13.4.3 REAJUSTE DE CONTENEDOR GENERAL DE IMÁGENES GEMELAS (BLOQUES 1 AL 4) --- */
    .services-list .service-row .service-images {
        width: 100% !important;
        height: 160px !important;   
        max-width: 116% !important;
        order: 2 !important; 
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        gap: 10px !important;
        margin: 15px auto !important;
        margin-top: -20px !important; 
        margin-bottom: -10px !important; 
        margin-left: 0 !important;           
        margin-right: 0 !important; 
        padding: 0 10px !important; 
        padding-left: 34px !important; /* Despega la foto 1 del borde izquierdo global */
        padding-right: 0px !important; 
        position: relative !important;
        align-items: center !important;
        box-sizing: border-box !important;
    }


    


    


   


    /* ----------------------------------------------------------------------
       13.5 CONFIGURACIÓN DE LA BARRA DE NAVEGACIÓN MÓVIL (EDICIÓN DE ELEVACIÓN)
       ---------------------------------------------------------------------- */
    .main-nav .nav-links-pc {
        display: none !important;
    }

    .main-nav .nav-quick-actions-mobile {
        display: flex !important;
        align-items: center !important;
        gap: 15px !important;                /* Separación elástica entre los paneles de cristal */
    }

    /* ??? SINCRO TOTAL: EFECTO DE PANEL CRISTAL TRASLÚCIDO EN LOS ÍCONOS RÁPIDOS MÓVILES */
    .main-nav .quick-btn-mob {
        border: none !important;
        color: #ffffff !important;
        font-size: 1.1rem !important;        /* Tamaño equilibrado del ícono para centrarse en el chasis */
        cursor: pointer !important;
        -webkit-tap-highlight-color: transparent !important;
        
        /* CONTENEDOR EN ACABADO DE CRISTAL MÓVIL (CENTRADO CUADRADO): */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;  /* ?? Mantiene la casita y el sobre centrados en su cuadradito */
        text-decoration: none !important;
        width: 38px !important;               /* Ancho fijo cuadrado del panel en celulares */
        height: 38px !important;              /* Alto fijo cuadrado del panel en celulares */
        border-radius: 8px !important;        /* Esquinas suavizadas idénticas a la versión PC */
        
        /* Mismo trasfondo y filamento láser translúcido que la versión de escritorio */
        background: rgba(255, 255, 255, 0.04) !important; 
        border: 1px solid rgba(86, 200, 192, 0.18) !important; 
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2) !important;
        transition: all 0.2s ease-in-out !important;
    }

    /* Enciende los íconos internos con el tono menta de STE */
    .main-nav .quick-btn-mob i {
        color: #56C8C0 !important; 
        text-shadow: 0 0 5px rgba(86, 200, 192, 0.3) !important;
        margin: 0 !important;                
        padding: 0 !important;
    }

    /* ? RESPUESTA TÁCTIL CINÉTICA AL PULSAR EN EL TELÉFONO */
    .main-nav .quick-btn-mob:active {
        background: rgba(86, 200, 192, 0.15) !important; 
        border-color: #56C8C0 !important;               
        box-shadow: 0 0 12px rgba(86, 200, 192, 0.4) !important;
        transform: scale(0.95) !important;               
    }

    /* Calibración ergonómica para el pulsador táctil de tres rayitas horizontales */
    .main-nav .menu-toggle {
        display: block !important;
        background: none !important;
        border: none !important;
        color: #56C8C0 !important;           
        font-size: 26px !important;
        margin: 0 !important;
        padding: 5px 10px !important;
        cursor: pointer !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    /* ?? BOTÓN DE COTIZACIÓN ADAPTATIVO EN GRADIENTE MENTA PROFUNDO */
    .main-nav .btn-quote-adaptive {
        padding: 8px 16px !important;
        font-size: 0.65rem !important;
        background: linear-gradient(135deg, #56C8C0 0%, #3a9690 100%) !important; 
        border-radius: 6px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 4px 12px rgba(86, 200, 192, 0.3) !important;
    }

    .main-nav .btn-quote-adaptive .quote-text-pc {
        display: none !important;            
    }

    .main-nav .btn-quote-adaptive .quote-text-mob {
        display: inline !important;          
    }

    /* ?? PERSIANA MÓVIL INTERACTIVA CON TRASFONDO OSCURO DE POZO */
    .main-nav .nav-links.active {
        display: flex !important;            
        flex-direction: column !important;
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        width: 100% !important;
        background: rgba(17, 27, 36, 0.98) !important; 
        border-bottom: 3px solid #56C8C0 !important;   
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6) !important;
        padding: 15px !important;
        gap: 12px !important;
        box-sizing: border-box !important;
        z-index: 999999 !important;                    
    }

    /* ----------------------------------------------------------------------
       13.6 FILTROS DE VISIBILIDAD Y PERSIANA DE SERVICIOS CONTINUA (ASCENSORES)
       ---------------------------------------------------------------------- */
    .main-nav .nav-links > li > a[href="#servicios"],
    .main-nav .nav-links > li > a[href="ascensores.html"],
    .main-nav .nav-links > li > a[href="#inicio"],
    .main-nav .nav-links > li > a[href="#contacto"] {
        display: none !important;
    }

    .main-nav .nav-links .dropdown .dropdown-toggle {
        display: none !important;
    }

    .main-nav .nav-links .dropdown-menu {
        display: flex !important;
        flex-direction: column !important;
        position: static !important; 
        background-color: transparent !important; 
        box-shadow: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        padding: 0 !important; 
        margin: 0 !important; 
        width: 100% !important;
        gap: 12px !important; 
    }

    .main-nav .nav-links .dropdown-menu li {
        width: 100% !important;
        display: block !important;
    }

    /* ??? SUB-ITEMS DESPLEGABLES CORREGIDOS: Alineación estricta a la izquierda en smartphones */
    .main-nav .nav-links .dropdown-menu li a {
        display: flex !important;
        align-items: center !important;
        
        /* ??? CORRECCIÓN CLAVE: Fuerza a los renglones largos de servicios a alinearse a la izquierda */
        justify-content: flex-start !important; 
        
        width: 100% !important;
        padding: 10px 20px !important; 
        font-size: 14px !important; 
        font-weight: 600 !important;
        letter-spacing: 1px !important;
        border-radius: 8px !important; 
        background: rgba(255, 255, 255, 0.03) !important; 
        border: 1px solid rgba(255, 255, 255, 0.08) !important; 
        color: #ffffff !important;
        text-transform: uppercase !important; 
        box-sizing: border-box !important;
        transition: all 0.2s ease !important;
    }

    /* Respuesta táctil de iluminación al presionar las opciones en el teléfono */
    .main-nav .nav-links .dropdown-menu li a:active,
    .main-nav .nav-links .dropdown-menu li a:hover {
        background: rgba(86, 200, 192, 0.2) !important; 
        border-color: #56C8C0 !important;
        box-shadow: 0 0 15px rgba(86, 200, 192, 0.3) !important;
        padding-left: 25px !important; /* Desplazamiento cinético indicativo de pulsación */
    }


    /* ----------------------------------------------------------------------
       13.8 ADAPTACIÓN ADICIONAL PARA LAS NUEVAS SECCIONES MODULARES EN SMARTPHONES
       ---------------------------------------------------------------------- */
    /* Despliegue en columna única vertical para las fases del proceso de ingeniería */
    .process-grid {
        grid-template-columns: 1fr !important; 
        gap: 15px !important;
    }

    /* SINCRONIZACIÓN ERGONÓMICA Y CONTROL DE ALTURAS ASIMÉTRICAS DE MARCAS */
    .brands-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important; /* Cuadrícula exacta de 2 columnas */
        grid-auto-rows: 1fr !important; /* ¡OBLIGATORIO! Fuerza a que las filas midan lo mismo */
        align-items: stretch !important; /* Estira las tarjetas al tamaño de la más alta de su fila */
        gap: 12px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 0 10px !important; /* Pequeño respiro con los bordes de la pantalla */
    }

    /* Centrado axial y nivelación interna absoluta para cada tarjeta de marca */
    .brands-grid li,
    .brands-grid .brand-card {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important; /* Centra verticalmente el contenido si la caja se estira */
        align-items: center !important;    /* Centra horizontalmente logos y textos */
        text-align: center !important;     /* Centra palabras largas */
        height: 100% !important;           /* Obliga a la tarjeta a usar toda la altura de la fila grid */
        padding: 15px 10px !important;     /* Colchón de espacio interno idéntico para todas */
        box-sizing: border-box !important;
    }

    /* Forzado de centrado para los títulos y subtítulos de las marcas */
    .brands-grid li h3,
    .brands-grid li p,
    .brands-grid .brand-card h3,
    .brands-grid .brand-card p {
        text-align: center !important;
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

} /* <<< CIERRE HERMÉTICO Y SEGURO DE LA SECCIÓN RESPONSIVE @MEDIA DE SMARTPHONES (768PX) >>> */










/* ==========================================================================
   14. SIMULADOR DE CABINA INTELIGENTE STE (SISTEMA VIRTUAL DE ELEVACIÓN)
   ========================================================================== */

/* --- 14.1 ESTRUCTURA MAESTRA Y CONTENEDOR EN PARALELO (PC) --- */

.elevator-sim-section {
    /* Modelo de caja */
    padding: 60px 20px;
    
    /* Visual */
    background-color: #ffffff;
}

.sim-flex-container {
    /* Flexbox Layout */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 60px;
    
    /* Modelo de caja */
    max-width: 900px;
    margin: 40px auto 0;
}


/* --- 14.2 EL POZO DEL ASCENSOR (DISEÑO TRIDIMENSIONAL EVOLUCIONADO) --- */

.shaft-container {
    /* Posicionamiento y Capas */
    position: relative;
    z-index: 1;
    
    /* Modelo de caja */
    width: 200px;
    height: 565px;
    
    /* Apertura visual crítica: Permite que las poleas se rendericen al frente sin sufrir mutilaciones */
    overflow: visible !important;
    isolation: auto !important;
    
    /* Zonificación por gradientes de colores reales (Incluye fosa restaurada) */
    background: linear-gradient(180deg, 
        #1a2436 0px, #1a2436 45px,     /* 1. Sala de Máquinas (0 a 45px) */
        #2d3748 45px, #2d3748 105px,   /* 2. Sobrerrecorrido Gris (45px a 105px) */
        #0b0f17 105px, #0b0f17 505px,  /* 3. Ducto de Viaje Oscuro (105px a 505px) */
        #1e2530 505px, #1e2530 100%    /* 4. Fosa: Gris cemento industrial (505px a 565px) */
    );
    
    /* Bordes y Sombras */
    border: 2px solid #577590; /* Chasis metalizado de alta fidelidad */
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6), 
                inset 0 0 15px rgba(255, 255, 255, 0.03);
}

/* Eliminación absoluta de pseudo-elementos antiguos para liberar la visualización de fosa y poleas */
.shaft-container::before,
.shaft-container::after {
    display: none !important;
    content: "" !important;
}


/* --- 14.3 CABLES DE TRACCIÓN DE ACERO (SISTEMA GUSTAV WOLF) --- */

/* Cable principal de la cabina: Sube limpio hasta el eje del motor */
.shaft-cables {
    /* Posicionamiento y Capas */
    position: absolute;
    top: 17px;
    right: 76px;
    z-index: 10 !important; /* Mayor que la sala (5), pero menor que las poleas y la cabina */
    
    /* Modelo de caja */
    width: 1px;
    height: 0;
    
    /* Visual y Efectos */
    background: #7f8c8d; /* Gris Acero Industrial unificado */
    box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);
    
    /* Rendimiento y Animación (Aceleración por Hardware VVVF) */
    transition: height 2.5s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: height;
}

/* Cable secundario invertido del contrapeso: Arranca en el centro de la polea de desvío */
.counterweight-cable {
    /* Posicionamiento y Capas */
    position: absolute;
    top: 45px;
    right: 16px; /* Centrado quirúrgico sobre el contrapeso */
    z-index: 1;
    
    /* Modelo de caja */
    width: 1px;
    height: 0;
    
    /* Visual y Efectos */
    background: #7f8c8d;
    box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);
    
    /* Rendimiento y Animación */
    transition: height 2.5s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: height;
}

/* Bloque físico del contrapeso mecánico de fundición */
.moving-counterweight {
    /* Posicionamiento y Capas */
    position: absolute;
    right: 9px;
    bottom: auto !important;
    z-index: 4;
    
    /* Modelo de caja */
    width: 14px;
    height: 60px;
    
    /* Bordes y Acabado Visual */
    background: linear-gradient(135deg, #34495e 0%, #2c3e50 100%);
    border: 2px solid #7f8c8d;
    border-radius: 2px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
    
    /* Rendimiento y Animación */
    transition: bottom 2.5s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: bottom;
}

/* --- 14.3 ETIQUETAS TÉCNICAS FLOTANTES ALINEADAS A LA IZQUIERDA --- */

/* Base unificada para indicadores fijos del pozo */
.label-machin, 
.label-sobrerrecorrido, 
.label-fosa {
    /* Posicionamiento y Capas */
    position: absolute;
    left: 12px;
    z-index: 25; /* Elevadas para que ninguna estructura móvil las opaque */
    
    /* Tipografía y Estilo */
    font-size: 0.58rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.35);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    
    /* Comportamiento */
    pointer-events: none;
}

/* Coordenadas de altitud milimétrica de las etiquetas */
.label-machin { 
    top: 16px; 
    color: rgba(0, 168, 107, 0.6); /* Verde sutil identificador Gustav Wolf */
}

.label-sobrerrecorrido { 
    top: 68px; 
}

.label-fosa { 
    bottom: 22px; 
}


/* --- 14.4 SALA DE MÁQUINAS SUPERIOR (TECHO ESTRUCTURAL FLUIDO) --- */

.machine-room-top {
    /* Posicionamiento y Capas */
    position: absolute;
    top: 0; 
    left: 0;
    z-index: 5; /* Bajado para que los cables pasen CONTINUOS sobre su línea divisoria */
    
    /* Modelo de caja */
    width: 100%;
    height: 45px; 
    
    /* Visual y Bordes */
    background: transparent !important; 
    border-bottom: 2px solid #233149; /* Techo estructural del pozo */
    
    /* Comportamiento */
    pointer-events: none;
}

/* Línea divisoria estructural en una capa inferior flotante */
.machine-room-top::before {
    /* Posicionamiento y Capas */
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -5 !important; /* Se dibuja por detrás de los cables para evitar cortes */
    
    /* Modelo de caja */
    width: 100%;
    height: 2px;
    
    /* Visual */
    content: "";
    background-color: #233149; 
}


/* --- 14.5 POLEAS MECÁNICAS SUPERIORES E INTERRUPTORES DE GIRO --- */

/* Polea Principal del Motor: Coronado al frente cubriendo la punta de la guaya */
.traction-sheave {
    /* Posicionamiento y Capas */
    position: absolute;
    top: 4px; 
    right: 51px; 
    z-index: 25 !important; 
    
    /* Modelo de caja y Recorte */
    width: 26px;
    height: 26px;
    overflow: hidden; /* Obliga a los radios (.sheave-spoke) a recortarse en el círculo */
    
    /* Bordes y Estética Visual */
    background: #2c3e50;    
    border: 3px solid #7f8c8d; 
    border-radius: 50%;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5), 
                0 0 6px rgba(255, 235, 59, 0.4); 
}

/* Polea de Desvío: Coplanar al plano de interacción del motor principal */
.deflector-sheave {
    /* Posicionamiento y Capas */
    position: absolute;
    top: 35px;  
    right: 16px; 
    z-index: 2 !important; 
    
    /* Modelo de caja y Recorte */
    width: 20px;
    height: 20px;
    overflow: hidden; /* Mantiene los radios dentro de su diámetro */
    
    /* Bordes y Estética Visual */
    background: #2c3e50;    
    border: 2px solid #7f8c8d; 
    border-radius: 50%;
    box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.5), 
                0 0 5px rgba(255, 235, 59, 0.3);
}

/* Radios internos decorativos para notar la rotación del motor */
.sheave-spoke {
    /* Posicionamiento */
    position: absolute;
    top: 50%;
    
    /* Modelo de caja */
    width: 100%;
    height: 2px;
    
    /* Estilo Visual */
    background: #95a5a6;
    
    /* Origen de Transformación */
    transform-origin: center;
}

/* Distribución angular de los radios mecánicos */
.sheave-spoke:nth-child(1) { 
    transform: translateY(-50%) rotate(0deg); 
}

.sheave-spoke:nth-child(2) { 
    transform: translateY(-50%) rotate(60deg); 
}

.sheave-spoke:nth-child(3) { 
    transform: translateY(-50%) rotate(120deg); 
}

/* --- 14.6 TRAMO DE GUAYA INCLINADO INTER-POLEAS --- */

/* Enlace tangencial exacto entre el centro del motor y la polea de desvío */
.machine-room-top::after {
    /* Posicionamiento y Capas */
    position: absolute;
    top: 9px;
    right: 54px;
    z-index: 1 !important; 
    
    /* Modelo de caja */
    width: 44px; /* Distancia horizontal exacta entre ambos ejes en PC */
    height: 41px; /* Distancia vertical exacta entre ambos ejes en PC */
    
    /* Diseño Estructural y Efectos */
    content: "";
    border-right: 1.5px solid #7f8c8d; /* Gris Acero Industrial unificado */
    filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.4)); /* Sutil destello metálico reflejante */
    
    /* Transformaciones Geométricas */
    transform: rotate(-50deg); /* Ángulo calibrado para la escala de escritorio */
    transform-origin: top right;
    
    /* Comportamiento */
    pointer-events: none;
}


/* --- 14.7 SISTEMA DE CABLES Y TRACCIÓN INVERTIDA (VVVF REAL) --- */

/* 1. Cable de la cabina: Sube limpio hasta el eje del motor (top: 17px) */
.shaft-cables {
    /* Posicionamiento y Capas */
    position: absolute;
    top: 17px; 
    right: 76px; 
    z-index: 10 !important; /* Tracción ininterrumpida: Mayor que la sala (5), menor que poleas (15) y cabina (20) */
    
    /* Modelo de caja */
    width: 1px;    
    height: 0; 
    
    /* Visual */
    background: #7f8c8d;   
    box-shadow: 0 0 3px rgba(255, 255, 255, 0.4); 
    
    /* Animación */
    transition: height 2.5s cubic-bezier(0.25, 1, 0.5, 1);
}

/* 2. Cable del contrapeso: Arranca en el centro de la polea de desvío (top: 45px) */
.counterweight-cable {
    /* Posicionamiento y Capas */
    position: absolute;
    top: 45px; 
    right: 16px; /* Ajustado para centrado quirúrgico sobre el contrapeso */
    z-index: 1;
    
    /* Modelo de caja */
    width: 1px;
    height: 0;
    
    /* Visual */
    background: #7f8c8d;   
    box-shadow: 0 0 3px rgba(255, 255, 255, 0.4); 
    
    /* Animación */
    transition: height 2.5s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Bloque físico del contrapeso mecánico de perfil */
.moving-counterweight {
    /* Posicionamiento y Capas */
    position: absolute;
    right: 9px; 
    bottom: auto !important; 
    z-index: 4;
    
    /* Modelo de caja */
    width: 14px; 
    height: 60px; 
    
    /* Bordes y Estética Visual */
    background: linear-gradient(135deg, #34495e 0%, #2c3e50 100%);
    border: 2px solid #7f8c8d;
    border-radius: 2px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
    
    /* Animación */
    transition: bottom 2.5s cubic-bezier(0.25, 1, 0.5, 1);
}


/* ==========================================================================
   14.8 LOS 4 PISOS ÚTILES (ESTRUCTURA INDEPENDIENTE CON SOBRERRECORRIDO PROTEGIDO)
   ========================================================================== */

/* Contenedor base para delimitar las plantas del ducto */
.floor-level {
    /* Posicionamiento */
    position: absolute; 
    width: 100%;
    height: 100px; 
    
    /* Flexbox Layout */
    display: flex;
    align-items: flex-end;
    
    /* Modelo de caja */
    padding: 5px 10px;
    box-sizing: border-box;
    
    /* Visual */
    border-bottom: 1px dashed rgba(255, 255, 255, 0.04);
}

/* Distribución exacta de los pisos empezando abajo de la sala de máquinas (45px) */
.floor-level[data-floor="4"] { top: 45px; }
.floor-level[data-floor="3"] { top: 145px; }
.floor-level[data-floor="2"] { top: 245px; }
.floor-level[data-floor="1"] { top: 345px; } 

/* Tipografía de las nomenclaturas de cada piso (Piso X / PB) */
.floor-level span {
    /* Capas */
    z-index: 5; 
    
    /* Tipografía y Estilo */
    font-size: 0.72rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.45);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}


/* --- 14.9 LA CABINA ESTILIZADA DE PASAJEROS (ASIMÉTRICA A LA DERECHA) --- */

/* Chasis móvil estructural de la cabina */
.moving-cabin {
    /* Posicionamiento y Capas */
    position: absolute;
    right: 38px;       
    bottom: 67px;      
    left: auto;        
    z-index: 20;
    
    /* Flexbox Layout */
    display: flex;
    justify-content: space-between;
    
    /* Modelo de caja */
    width: 76px; 
    height: 86px; 
    padding: 0 3px;
    box-sizing: border-box;
    
    /* Acabado Estético Metalizado */
    background: linear-gradient(135deg, #7f8c8d 0%, #95a5a6 50%, #7f8c8d 100%);
    border: 3px solid #bdc3c7;
    border-radius: 4px;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.5), 
                inset 0 2px 5px rgba(255, 255, 255, 0.2);
    
    /* Transformaciones y Animación */
    transform: none;   
    transition: bottom 2.5s cubic-bezier(0.25, 1, 0.5, 1); 
}

/* Hojas de puertas: Lógica base estructural */
.cabin-door-left, 
.cabin-door-right {
    /* Modelo de caja */
    width: 33px; 
    height: 100%;
    
    /* Visual */
    background: linear-gradient(90deg, #34495e 0%, #2c3e50 100%);
    border: 1px solid #7f8c8d;
    
    /* Animación */
    transition: transform 0.6s ease-in-out;
}

/* Secuencias cinéticas mecánicas de apertura de puertas laterales */
.moving-cabin.doors-open .cabin-door-left { 
    transform: translateX(-26px); 
}

.moving-cabin.doors-open .cabin-door-right { 
    transform: translateX(26px); 
}

/* --- 14.10 EL PANEL DE OPERACIÓN INDUSTRIAL (COP MONARCH EN PC) --- */

/* Indicador luminoso superior (Tubo de neón cian) */
.cabin-interior-light {
    /* Posicionamiento y Transformación */
    position: absolute;
    top: 2px;
    left: 50%;
    transform: translateX(-50%);
    
    /* Modelo de caja */
    width: 20px; /* RESTAURADO FIELMENTE A SU ANCHO ORIGINAL */
    height: 3px;
    
    /* Efecto Visual Estilo Tubo de Neón */
    background-color: #00bcd4;
    box-shadow: 0 0 10px #00bcd4;
}

/* Consola maestra del panel de control lateral */
.control-panel {
    /* Flexbox Layout */
    display: flex;
    flex-direction: column;
    align-items: center;
    
    /* Modelo de caja */
    width: 220px;
    padding: 25px 20px;
    
    /* Diseño Estético y Bordes */
    background: linear-gradient(135deg, #1a2e44 0%, #0c1622 100%);
    border: 4px solid #34495e;
    border-radius: 12px;
    box-shadow: 0 15px 35px rgba(26, 46, 68, 0.2);
}


/* --- DISPLAY DIGITAL DE POSICIONAMIENTO E INDICADOR DE DIRECCIÓN --- */

/* Caja base del display digital superior */
.panel-display {
    /* Flexbox Layout */
    display: flex;
    justify-content: space-around;
    align-items: center;
    
    /* Modelo de caja */
    width: 100%;
    margin-bottom: 25px;
    padding: 10px;
    
    /* Visual Estilo Matriz */
    background-color: #050b11;
    border: 2px solid #1a2e44;
    border-radius: 6px;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.8);
}

/* Nomenclatura del piso digital en Rojo Monarch */
.display-floor {
    /* Tipografía y Estilo */
    font-family: 'Arial', sans-serif;
    font-size: 2.2rem;
    font-weight: 900;
    line-height: 1;
    color: #ff2a2a; 
    text-shadow: 0 0 8px #ff2a2a, 
                 0 0 15px #ff2a2a;
}

/* Flecha de dirección cinemática */
.display-arrow {
    /* Tipografía */
    font-size: 1.6rem;
    color: #ff2a2a;
    text-shadow: 0 0 8px #ff2a2a;
}


/* --- 14.11 LÓGICA DE ANIMACIÓN CINÉTIQUE DE LA FLECHA DE VIAJE --- */

/* Disparador de animación intermitente durante el tránsito */
.display-arrow.moving-up-anim i,
.display-arrow.moving-down-anim i { 
    animation: pulseArrow 0.5s infinite alternate; 
}

@keyframes pulseArrow {
    from { 
        opacity: 0.3; 
    }
    to { 
        opacity: 1; 
    }
}


/* --- TECLADO ERGONÓMICO DE BOTONES DE LLAMADA --- */

/* Rejilla elástica para la botonera del edificio (Matriz 2x2) */
.panel-buttons-grid {
    /* Grid Layout */
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    
    /* Modelo de caja */
    width: 100%;
}

/* Los botones físicos circulares del panel */
.sim-btn {
    /* Modelo de caja */
    width: 65px;
    height: 65px;
    margin: 0 auto;
    
    /* Tipografía y Estilo */
    font-size: 1.15rem;
    font-weight: 900;
    color: #bdc3c7;
    
    /* Diseño Estético y Bordes */
    background: linear-gradient(135deg, #2c3e50 0%, #10171e 100%);
    border: 3px solid #7f8c8d;
    border-radius: 50%;
    cursor: pointer;
    
    /* Transiciones y Optimización */
    -webkit-tap-highlight-color: transparent;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Estado de preselección al pasar el cursor (Brillo Cian Corporativo) */
.sim-btn:hover {
    border-color: #00bcd4; 
    color: #ffffff;
    box-shadow: 0 0 12px rgba(0, 188, 212, 0.4);
}

/* Señales luminosas de llamada activa y destino alcanzado */
.sim-btn.active-floor {
    background: linear-gradient(135deg, #10171e 0%, #1a2e44 100%);
    border-color: #00bcd4;
    color: #00bcd4;
    box-shadow: 0 0 15px rgba(0, 188, 212, 0.5);
}

/* Efecto de hundimiento mecánico al presionar */
.sim-btn:active { 
    transform: scale(0.92); 
}

/* Deshabilitado temporal de seguridad de la botonera mientras viaja la cabina */
.control-panel.panel-disabled {
    opacity: 0.95;                    
    pointer-events: none !important;
}


/* --- 14.12 SELLO DE INGENIERÍA CORPORATIVA (ANTI-ROTURA EN PC) --- */

/* Contenedor base de la firma de marca inferior */
.panel-brand-tag {
    /* Modelo de caja */
    width: 100%;
    margin-top: 25px;
    padding-top: 15px;
    box-sizing: border-box;
    
    /* Diseño Visual */
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* Fila del microprocesador maestro */
.panel-brand-tag strong {
    /* Layout */
    display: block;
    
    /* Tipografía */
    font-size: 0.58rem; 
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #00bcd4; 
}

/* Fila de la firma tecnológica secundaria */
.panel-brand-tag span {
    /* Layout */
    display: block;
    
    /* Modelo de caja */
    margin-top: 3px;
    
    /* Tipografía */
    font-size: 0.52rem; 
    line-height: 1.3;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #7f8c8d; 
}


/* --- 14.13 INTERRUPTOR GENERAL DE AUDIO DEL EDIFICIO VIRTUAL --- */

/* Pulsador flotante de control acústico */
.mute-button {
    /* Posicionamiento y Capas */
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 10;
    
    /* Flexbox Layout */
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* Modelo de caja */
    width: 42px;
    height: 42px;
    
    /* Diseño Estético y Bordes */
    background: rgba(17, 17, 17, 0.85);
    border: 1px solid rgba(0, 188, 212, 0.3); /* Sincronizado con el Index */
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    
    /* Tipografía y Cursor */
    font-size: 16px;
    color: var(--azul-ste, #00bcd4);
    cursor: pointer;
    
    /* Transiciones de Estado */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Efecto hover con brillo integrado cian */
.mute-button:hover {
    background: var(--azul-ste, #00bcd4);
    color: #111111;
    box-shadow: 0 0 15px rgba(0, 188, 212, 0.5);
    transform: scale(1.05);
}

/* Estado visual de alerta en rojo cuando el Gong está silenciado */
.mute-button.is-muted {
    border-color: rgba(255, 42, 42, 0.4) !important;
    color: #ff2a2a !important;
}

/* Hover específico sobre el estado silenciado */
.mute-button.is-muted:hover {
    background: #ff2a2a !important;
    color: #ffffff !important;
    box-shadow: 0 0 15px rgba(255, 42, 42, 0.5);
}


/* ==========================================================================
   14.14 LÓGICA DE ROTACIÓN DE MOTORES (SALA DE MÁQUINAS GENERAL)
   ========================================================================== */

/* Clase de activación instantánea de giro horario (Subida de cabina) */
.rotate-clockwise {
    animation: rotateSheave 2.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

/* Clase de activación instantánea de giro antihorario (Bajada de cabina) */
.rotate-counter-clockwise {
    animation: rotateSheaveInverse 2.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

/* --- SECUENCIAS CINÉTICAS: DOS VUELTAS COMPLETAS DE INGENIERÍA REAL --- */

@keyframes rotateSheave {
    0% { 
        transform: rotate(0deg); 
    }
    100% { 
        transform: rotate(720deg); 
    } 
}

@keyframes rotateSheaveInverse {
    0% { 
        transform: rotate(0deg); 
    }
    100% { 
        transform: rotate(-720deg); 
    }
}




/* ==========================================================================
   15. MÓVIL EN PANTALLA DIVIDIDA: ASCENSOR CON TECLADO DELGADO (PANTALLAS <= 768PX)
   ========================================================================== */
@media (max-width: 768px) {
    
    /* --- 15.1 CONTENEDOR FLEXIBLE MAESTRO EN HORIZONTAL --- */
    .sim-flex-container {
        /* Layout Flexbox Compacto */
        display: flex !important;
        flex-direction: row !important; 
        justify-content: center !important;
        align-items: center !important; 
        gap: 12px !important;
        
        /* Modelo de Caja */
        width: 100% !important;
        padding: 0 5px !important;
        box-sizing: border-box;
    }


    /* --- 15.2 CHASIS DEL POZO ADAPTATIVO MÓVIL --- */
    .shaft-container {
        /* Modelo de Caja Compacto */
        width: 150px !important;  
        height: 395px !important; /* 35px Sala Machin + 45px Sobrerrecorrido + 280px Pisos + 35px Fosa */
        overflow: hidden !important;
        isolation: isolate !important;
        
        /* Zonificación Cromática de Ingeniería */
        background: linear-gradient(180deg, 
            #1a2436 0px, #1a2436 35px,     /* 1. Sala Machin (0px a 35px) */
            #2d3748 35px, #2d3748 80px,    /* 2. Sobrerrecorrido Gris (35px a 80px) */
            #0b0f17 80px, #0b0f17 360px,   /* 3. Ducto Oscuro de Viaje (80px a 360px) */
            #1e2530 360px, #1e2530 100%    /* 4. Fosa Inferior Metálica (360px a 395px) */
        ) !important;
        
        /* Bordes y Estructura */
        border: 2px solid #577590 !important; 
        border-radius: 12px !important;
    }

    /* Solución crítica: Invalida pseudo-elementos antiguos para dar paso a la nueva fosa */
    .shaft-container::before,
    .shaft-container::after {
        display: none !important;
        content: "" !important;
    }


    /* --- 15.3 ETIQUETAS TÉCNICAS FLOTANTES MÓVILES --- */
    .label-machin { 
        top: 11px !important; 
        left: 8px !important; 
        font-size: 0.50rem !important; 
    }
    
    .label-sobrerrecorrido { 
        top: 49px !important; 
        left: 8px !important; 
        font-size: 0.47rem !important; 
    }
    
    .label-fosa { 
        bottom: 12px !important; 
        left: 8px !important; 
        font-size: 0.55rem !important; 
    }


    /* --- 15.4 INFRAESTRUCTURA DE SALA DE MÁQUINAS Y POLEAS --- */
    .machine-room-top {
        /* Posicionamiento y Capas */
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        z-index: 10 !important;
        
        /* Modelo de Caja */
        width: 100% !important;
        height: 35px !important;
        
        /* Estilo y Bordes */
        background: transparent !important;
        border-bottom: 1px solid #233149 !important;
        pointer-events: none !important;
    }

    /* Polea de Tracción Principal del Motor */
    .traction-sheave { 
        position: absolute !important;
        top: 3px !important; 
        right: 24px !important; /* Alineación exacta sobre la caída de guaya de la cabina */
        z-index: 12 !important;
        width: 22px !important; 
        height: 22px !important; 
    }
    
    /* Polea de Desvío Deflectora de Carga */
    .deflector-sheave { 
        position: absolute !important;
        top: 27px !important;   /* Cortada milimétricamente a la mitad por el piso de los 35px */
        right: 13px !important;  /* Centrada quirúrgicamente con el contrapeso móvil */
        z-index: 11 !important;
        width: 16px !important; 
        height: 16px !important; 
    }


    /* --- 15.5 COMPONENTES DE TRACCIÓN (SISTEMA DE CABLES) --- */
    
    /* 1. Cable de la cabina: Alineado con el eje del motor */
    .shaft-cables {
        /* Posicionamiento y Capas */
        position: absolute !important; 
        top: 15px !important; 
        right: 45px !important; 
        left: auto !important; 
        z-index: 15 !important; 
        
        /* Modelo de Caja */
        width: 1px !important; 
        height: 0; 
        
        /* Visual y Animación */
        background: #7f8c8d;   
        box-shadow: 0 0 3px rgba(255, 255, 255, 0.4); 
        background-size: auto !important;
        transition: height 2.5s cubic-bezier(0.25, 1, 0.5, 1) !important;
    }

    /* 2. Cable del contrapeso: Fijado al centro del desvío */
    .counterweight-cable {
        /* Posicionamiento y Capas */
        position: absolute !important;
        top: 35px !important; 
        right: 13px !important; 
        left: auto !important; 
        z-index: 1;
        
        /* Modelo de Caja */
        width: 1px !important;
        height: 0;
        
        /* Visual y Animación */
        background: #7f8c8d;   
        box-shadow: 0 0 3px rgba(255, 255, 255, 0.4); 
        transition: height 2.5s cubic-bezier(0.25, 1, 0.5, 1) !important;
    }


    /* --- 15.6 REDISTRIBUCIÓN DE PLANTAS VIRTUALES (PISOS) --- */
    .floor-level {
        /* Posicionamiento */
        position: absolute !important;
        
        /* Flexbox Layout */
        display: flex !important;
        align-items: flex-end !important;
        
        /* Modelo de Caja Compacto */
        width: 100% !important;
        height: 70px !important; 
        padding: 2px 6px !important;
        box-sizing: border-box !important;
        
        /* Visual */
        border-bottom: 1px dashed rgba(255, 255, 255, 0.04) !important;
    }

    /* Coordenadas absolutas móviles partiendo desde los 35px del techo */
    .floor-level[data-floor="4"] { top: 35px !important; }
    .floor-level[data-floor="3"] { top: 105px !important; }
    .floor-level[data-floor="2"] { top: 175px !important; }
    .floor-level[data-floor="1"] { top: 245px !important; } /* Deja libres los 35px inferiores para la fosa */

    /* Tipografía de las nomenclaturas en móvil */
    .floor-level span {
        font-size: 0.58rem !important;
        font-weight: 700 !important;
        color: rgba(255, 255, 255, 0.55) !important;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9) !important;
        z-index: 5 !important;
    }


    /* --- 15.7 CHASIS INTERACTIVO DE LA CABINA MÓVIL --- */
    .moving-cabin {
        /* Posicionamiento y Capas */
        position: absolute !important;
        right: 21px !important;  /* Desplazada para no colisionar con el contrapeso derecho */
        bottom: 35px; 
        left: auto !important;   
        z-index: 20 !important;
        
        /* Flexbox Layout */
        display: flex !important;
        justify-content: space-between !important;
        
        /* Modelo de Caja */
        width: 50px !important;  
        height: 52px !important;
        padding: 0 1px !important;
        box-sizing: border-box !important;
        
        /* Diseño Estético Metalizado */
        background: linear-gradient(135deg, #7f8c8d 0%, #95a5a6 50%, #7f8c8d 100%) !important;
        border: 2px solid #bdc3c7 !important;
        border-radius: 4px !important;
        
        /* Transformaciones y Animación */
        transform: none !important;
        transition: bottom 2.5s cubic-bezier(0.25, 1, 0.5, 1) !important;
    }

    /* --- 15.8 COMPONENTES INTERNOS DE LA CABINA MÓVIL --- */

    /* Bloque físico del contrapeso mecánico de fundición */
    .moving-counterweight {
        /* Posicionamiento y Capas */
        position: absolute !important;
        right: 8px !important; /* Desplazado al borde derecho del chasis de 150px */ 
        bottom: auto !important;        
        z-index: 4 !important;
        left: auto !important;          
        
        /* Modelo de Caja */
        width: 10px !important;         
        height: 40px !important;        
        border-width: 1px !important;
        
        /* Animación */
        transition: bottom 2.5s cubic-bezier(0.25, 1, 0.5, 1) !important;
    }

    /* Hojas de puertas: Configuración base en formato compacto */
    .cabin-door-left, 
    .cabin-door-right {
        /* Modelo de Caja */
        width: 23px !important; 
        height: 100% !important;
        
        /* Visual y Estructura */
        background: linear-gradient(90deg, #34495e 0%, #2c3e50 100%) !important;
        border: 1px solid #7f8c8d !important;
        
        /* Animación */
        transition: transform 0.6s ease-in-out !important;
    }

    /* Secuencias cinéticas de apertura de puertas laterales en móvil */
    .moving-cabin.doors-open .cabin-door-left { 
        transform: translateX(-18px) !important; 
    }
    
    .moving-cabin.doors-open .cabin-door-right { 
        transform: translateX(18px) !important; 
    }

    /* Indicador luminoso superior (Tubo de neón cian adaptado) */
    .cabin-interior-light {
        /* Modelo de Caja Sincronizado */
        width: 15px !important;
        height: 2px !important;
        
        /* Efectos Visuales */
        box-shadow: 0 0 6px #00bcd4 !important;
    }


    /* --- 15.9 CONSOLA ERGONÓMICA MÓVIL (PANEL DE CONTROL DELGADO) --- */

    /* Chasis de control vertical estilizado */
    .control-panel {
        /* Flexbox Layout */
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        
        /* Modelo de Caja */
        width: 110px !important;  
        padding: 12px 6px !important;
        box-sizing: border-box !important;
        
        /* Bordes y Estética Visual */
        background: linear-gradient(135deg, #1a2e44 0%, #0c1622 100%) !important;
        border: 2px solid #34495e !important;
        border-radius: 12px !important;
        box-shadow: 0 15px 35px rgba(26, 46, 68, 0.2) !important;
    }

    /* Contenedor del display de matriz digital */
    .panel-display {
        /* Flexbox Layout */
        display: flex !important;
        justify-content: space-around !important;
        align-items: center !important;
        
        /* Modelo de Caja */
        width: 100% !important;
        margin-bottom: 12px !important;
        padding: 4px !important;
        box-sizing: border-box !important;
        
        /* Estilo Visual */
        background-color: #050b11 !important;
        border: 2px solid #1a2e44 !important;
        border-radius: 6px !important;
        box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.8) !important;
    }

    /* Nomenclatura digital de pisos compacta */
    .display-floor { 
        font-size: 1.3rem !important; 
        color: #ff2a2a !important;
        text-shadow: 0 0 6px #ff2a2a !important;
    }
    
    /* Flecha de sentido cinemático compacta */
    .display-arrow { 
        font-size: 0.9rem !important; 
        color: #ff2a2a !important;
        text-shadow: 0 0 6px #ff2a2a !important;
    }


    /* --- 15.10 MATRIZ DE BOTONES Y SELLO DE MARCA ADAPTADO --- */

    /* Rejilla de distribución vertical de pulsadores (Columna 1x4) */
    .panel-buttons-grid {
        /* Grid Layout */
        display: grid !important;
        grid-template-columns: 1fr !important; 
        gap: 6px !important;
        
        /* Modelo de Caja */
        width: 100% !important;
    }
	
    /* Pulsadores circulares con centrado de precisión antidesborde */
    .sim-btn {
        /* Flexbox Layout Integrado para Centrado Absoluto */
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        
        /* Modelo de Caja */
        width: 40px !important;  
        height: 40px !important;
        margin: 0 auto !important;
        padding: 0 !important; 
        
        /* Tipografía y Estilo */
        font-size: 0.8rem !important;
        font-weight: 900 !important;
        line-height: 1 !important;
        color: #bdc3c7 !important;
        
        /* Bordes y Estética Visual */
        background: linear-gradient(135deg, #2c3e50 0%, #10171e 100%) !important;
        border: 2px solid #7f8c8d !important;
        border-radius: 50% !important;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4) !important;
        cursor: pointer !important;
        
        /* Transiciones y Optimización */
        -webkit-tap-highlight-color: transparent !important;
        transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    }
    
    /* Estado activo de llamada registrada en teléfonos */
    .sim-btn.active-floor {
        background: linear-gradient(135deg, #10171e 0%, #1a2e44 100%) !important;
        border-color: #00bcd4 !important;
        color: #00bcd4 !important;
        box-shadow: 0 0 10px rgba(0, 188, 212, 0.5) !important;
    }

    /* Interrupción de seguridad temporal por hardware mientras el ascensor viaja */
    .control-panel.panel-disabled {
        opacity: 0.95 !important;                    
        pointer-events: none !important;
    }

    /* Sello corporativo de firma optimizado para evitar desbordamientos de texto */
    .panel-brand-tag {
        /* Layout */
        display: block !important; 
        
        /* Modelo de Caja */
        width: 100% !important;
        margin-top: 15px !important; 
        padding-top: 10px !important;
        box-sizing: border-box !important;
        
        /* Estilo Visual */
        text-align: center !important;
        border-top: 1px solid rgba(255, 255, 255, 0.05) !important; 
    }

    /* Fila del microprocesador en móvil */
    .panel-brand-tag strong {
        display: block !important;
        font-size: 0.50rem !important; 
        line-height: 1.2 !important;
        letter-spacing: 0.3px !important;
        text-transform: uppercase !important;
        color: #00bcd4 !important; 
    }

    /* Fila de la marca tecnológica en móvil */
    .panel-brand-tag span {
        display: block !important;
        margin-top: 2px !important;
        font-size: 0.46rem !important; 
        line-height: 1.2 !important;
        letter-spacing: 0.3px !important;
        text-transform: uppercase !important;
        color: #7f8c8d !important; 
    }

    /* --- 15.11 COMPONENTES GEOMÉTRICOS DE SINCRO-POLEAS EN MÓVIL --- */

    /* Ajuste de transparencia para la sala de máquinas móvil */
    .machine-room-top {
        /* Posicionamiento y Capas */
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        z-index: 15 !important;
        
        /* Modelo de Caja */
        width: 100% !important;
        height: 35px !important;
        
        /* Diseño Visual y Bordes */
        background: transparent !important;
        border-bottom: 1px solid #233149 !important;
        
        /* Comportamiento */
        pointer-events: none !important;
    }
	
    /* Tramo de guaya inclinado entre las dos poleas en móvil (Conexión geométrica) */
    .machine-room-top::after {
        /* Posicionamiento y Capas */
        position: absolute !important;
        top: 12px !important;
        right: 24px !important;
        z-index: 10 !important;
        
        /* Modelo de Caja Computado */
        width: 12px !important; /* Distancia horizontal entre los dos centros */
        height: 22px !important; /* Distancia vertical entre los dos centros */
        
        /* Diseño Estructural Estilo Acero Unificado */
        content: "" !important;
        border-right: 1.5px solid #7f8c8d !important; 
        filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.4)) !important; 
        
        /* Transformaciones Lineales */
        transform: rotate(-28deg) !important; /* Ángulo milimétrico adaptado a pantallas pequeñas */
        transform-origin: top right !important;
        
        /* Comportamiento */
        pointer-events: none !important;
    }
	
    /* Línea divisoria móvil al fondo del chasis */
    .machine-room-top::before {
        /* Posicionamiento y Capas */
        position: absolute !important;
        bottom: 0 !important;
        left: 0 !important;
        z-index: -5 !important; /* Se esconde detrás de las guayas mecánicas */
        
        /* Modelo de Caja */
        width: 100% !important;
        height: 2px !important;
        
        /* Estilo Visual */
        content: "" !important;
        background-color: #233149; /* Color gris estructural industrial */
    }

} /* CIERRE ABSOLUTO DE LA MEDIA QUERY (MAX-WIDTH: 768PX) */