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

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

/* ==========================================================================
   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;
    /* 🌐 SINCRO LÁSER: Filamento inferior adaptado al Azul STE al 40% de opacidad */
    border-bottom: 2px solid rgba(0, 188, 212, 0.4) !important; 
    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%;
}

/* 🛠️ SINCRO DE CLASE: Apunta directamente al .nav-links real de tu index.html */
.main-nav .nav-links {
    display: flex !important;
    list-style: none !important;
    gap: 15px !important; /* Separación simétrica ergonómica para tus pastillas */
    margin: 0 !important;
    padding: 0 !important;
}

/* ⚡ ENLACES DE CRISTAL UNIFICADOS EN AZUL STE: Alineación firme hacia el filo izquierdo */
.main-nav .nav-links li a {
    color: #ffffff !important;
    text-decoration: none !important;
    font-size: 0.85rem !important;        /* Ligera reducción ergonómica para el balance interno */
    font-weight: 600 !important; 
    letter-spacing: 0.5px !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;
    justify-content: flex-start !important; /* Clava el texto e icono a la izquierda de la pastilla */
    gap: 10px !important;                 /* Separación exacta entre el icono cian y el texto */
    padding: 10px 16px !important;         /* Colchón interno que moldea la forma de la pastilla */
    border-radius: 6px !important;        /* Esquinas suavizadas del botón digital */
    
    /* Trasfondo oscuro de pozo traslúcido sutil al 2% */
    background: rgba(255, 255, 255, 0.02) !important; 
    
    /* Bordesito con filamento láser en acabado Azul STE al 15% */
    border: 1px solid rgba(0, 188, 212, 0.15) !important; 
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* Los iconos base de la barra brillan en el Azul STE de alta gama */
.main-nav .nav-links li a i {
    color: #00bcd4 !important; 
    font-size: 0.95rem !important;
    transition: all 0.25s ease !important;
    text-shadow: 0 0 5px rgba(0, 188, 212, 0.3) !important; /* Micro-resplandor LED */
}

/* ✨ INTERACCIÓN CINÉTICA EN PC: Iluminación de la pastilla de cristal al posar el cursor */
.main-nav .nav-links li a:hover {
    color: #ffffff !important; 
    background: rgba(0, 188, 212, 0.15) !important;   /* El panel se inunda del cian corporativo */
    border-color: #00bcd4 !important;                 /* El bordesito pasa a Azul STE neón brillante pleno */
    box-shadow: 0 0 15px rgba(0, 188, 212, 0.4) !important; /* Aura exterior reflectante */
    transform: translateY(-2px) !important;           /* Micro-elevación mecánica de resorte */
}

.main-nav .nav-links li a:hover i {
    color: #ffffff !important; /* Pasa a blanco brillante para máximo contraste en el hover */
    text-shadow: 0 0 12px rgba(0, 188, 212, 0.9) !important;
    transform: scale(1.2) rotate(5deg) !important; /* Animación rotativa de tu style.css original */
}

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

/* Formato elástico alineado para el botón puente MENÚ */
.main-nav .nav-links .dropdown-toggle {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    cursor: pointer !important;
}

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

/* La caja flotante adopta un trasfondo oscuro de seguridad */
.main-nav .nav-links .dropdown-menu {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    background-color: #1a2e44 !important; /* Azul oscuro corporativo de ingeniería de tu style.css */
    min-width: 240px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !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; 
    z-index: 1000 !important;
}

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

.main-nav .nav-links .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 la herencia del chasis de botón 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 .dropdown-menu li a:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: #00bcd4 !important; /* Las opciones del submenú se iluminan en cian */
    transform: none !important; 
}

.main-nav .nav-links .dropdown-menu li a i {
    width: 20px !important;
    text-align: center !important;
    font-size: 1.1rem !important;
    color: #00bcd4 !important; /* Iconos internos del menú en Azul STE */
    text-shadow: none !important; 
}

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

/* ==========================================================================
   3. FRANJA 3 INTERNA: HERO DE ELEVACIÓN INTELIGENTE Y ELECTROMECÁNICA (PC)
   ========================================================================== */
.main-wrapper .hero-blue {
    /* 🌐 ACABADO PREMIUM INDEX: Sincronización en Azul Corporativo STE a Grafito de Elevación */
    background-image: 
        /* Capa 1: Reflejo cinético y textura de placa de aluminio pulido */
        linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(0, 0, 0, 0.3) 100%),
        /* Capa 2: Degradado base de Cian STE a Azul Marino de Ingeniería y Fondo Cyber */
        linear-gradient(135deg, #00bcd4 0%, #1a2e44 60%, #0b0e11 100%) !important;
    background-blend-mode: overlay !important;
    padding: 45px 0 !important; /* Espaciado balanceado para monitores de PC */
    text-align: center !important;
    color: #ffffff !important;
    position: relative !important;
    overflow: hidden !important;
    /* Filamento inferior en Azul STE Sólido para cerrar el chasis de control de la página raíz */
    border-bottom: 5px solid #0097a7 !important; 
    box-shadow: inset 0 -10px 30px rgba(0, 0, 0, 0.45) !important;
}

/* --- 3.1 MARCA DE AGUA: RETÍCULA VECTORIAL DE PLANOS Y DUCTOS DE ELEVACIÓN --- */
.main-wrapper .hero-blue::after {
    content: "" !important;
    position: absolute !important;
    bottom: -10px !important;
    right: 40px !important; /* Alineado fijamente en el extremo derecho */
    width: 200px !important; /* Ancho rígido anti-deformaciones */
    height: 120% !important;
    
    /* 📐 GEOMETRÍA DE PLANOS: Simula guías lineales de cabina y rieles de contrapeso */
    background-image: 
        /* Riel vertical maestro izquierdo */
        linear-gradient(90deg, transparent 20%, rgba(255, 255, 255, 0.08) 21%, rgba(255, 255, 255, 0.08) 23%, transparent 24%),
        /* Riel vertical de velocidad derecho */
        linear-gradient(90deg, transparent 70%, rgba(255, 255, 255, 0.05) 71%, rgba(255, 255, 255, 0.05) 72%, transparent 73%),
        /* Cables de tracción diagonales cruzados en 45 grados */
        linear-gradient(45deg, transparent 45%, rgba(0, 188, 212, 0.1) 46%, rgba(0, 188, 212, 0.1) 50%, transparent 51%),
        /* Cuadrícula técnica horizontal de fondo */
        linear-gradient(0deg, transparent 10%, rgba(255, 255, 255, 0.03) 11%, rgba(255, 255, 255, 0.03) 15%, transparent 16%) !important;
    
    background-size: 200px 90px, 200px 90px, 40px 40px, 200px 20px !important;
    background-position: top 10px center, top 95px center, center, center !important;
    background-repeat: no-repeat, no-repeat, repeat, repeat-y !important;
    pointer-events: none !important;
    z-index: 1 !important;
    opacity: 0.90 !important;
}

/* --- 3.2 DETALLE EXTRA: SÍMBOLO VECTORIAL DE POLEAS DE TRACCIÓN (VENEZUELA) --- */
.main-wrapper .hero-blue::before {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    right: 260px !important; /* Colocado exactamente a la izquierda del panel de guías */
    width: 40px !important;
    height: 45px !important;
    display: block !important;
    
    /* ⚙️ EMBLEMA MECÁNICO: Simula un rodamiento concéntrico de tracción por cables */
    background-image: 
        /* Eje vertical de suspensión */
        linear-gradient(90deg, transparent 44%, rgba(0, 188, 212, 0.25) 45%, rgba(0, 188, 212, 0.25) 55%, transparent 56%),
        /* Corona externa de polea */
        radial-gradient(circle, transparent 40%, rgba(255, 255, 255, 0.08) 41%, rgba(255, 255, 255, 0.08) 50%, transparent 51%),
        /* Núcleo interno de rodamiento */
        radial-gradient(circle, transparent 20%, rgba(0, 188, 212, 0.15) 21%, rgba(0, 188, 212, 0.15) 30%, transparent 31%) !important;
    
    background-size: 4px 30px, 40px 40px, 26px 26px !important;
    background-position: center top, center, center !important;
    background-repeat: no-repeat !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

/* --- 3.3 TEXTOS INTERNOS DEL HERO --- */
.main-wrapper .hero-blue h1 {
    font-family: 'Poppins', sans-serif !important;
    font-size: 3.2rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    /* Sombra pesada en negro puro para romper el brillo del fondo cian */
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.7) !important;
    position: relative !important;
    z-index: 2 !important;
    letter-spacing: 1.5px !important;
    color: #ffffff !important;
}

.main-wrapper .hero-blue .hero-subtitle {
    font-family: 'Poppins', sans-serif !important;
    font-size: 1.2rem !important;
    font-weight: 400 !important;
    max-width: 850px !important;
    margin: 0 auto !important;
    position: relative !important;
    z-index: 2 !important;
    line-height: 1.6 !important;
    color: #e2e8f0 !important; /* Platino de alto contraste unificado para legibilidad absoluta */
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5) !important;
}

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

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

/* --- 4.1 CAJA DE INTRODUCCIÓN TÉCNICA (EMPAQUETADO COMPACTO DE PÁRRAFO) --- */
.services-showcase .tech-intro-box {
    max-width: 650px !important; /* 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;
}

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

/* --- 4.2 CAJA DE VIÑETAS TÉCNICAS CON CHECKS (EMPAQUETADO MODULAR COINCIDENTE) --- */
/* 🛠️ SINCRO TOTAL: Selector mapeado a la estructura depurada de tu index.html */
.services-showcase .services-list .service-row .service-features {
    max-width: 750px !important; /* 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;
}

.services-showcase .services-list .service-row .service-features li {
    font-size: 15px !important;
    line-height: 1.2 !important;
    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) - Aplica a Bloques 1, 3 y 4 en tu HTML */
.services-showcase .services-list .service-row:not(.reverse) .tech-intro-box,
.services-showcase .services-list .service-row:not(.reverse) .service-features {
    margin-left: 0px !important; /* Regresa al borde natural alineado con la cabecera */
    margin-right: 15px !important;  
}

/* 2. FILAS INVERTIDAS REVERSE (Fotos a la izquierda, Texto a la derecha) - Aplica a Bloque 2 */
.services-showcase .services-list .service-row.reverse .tech-intro-box,
.services-showcase .services-list .service-row.reverse .service-features {
    margin-right: 0px !important; /* 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) - Aplica a Bloques 1, 3 y 4 */
.services-showcase .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) - Aplica a Bloque 2 */
.services-showcase .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 --- */
.services-showcase .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 --- */
.services-showcase .services-list .service-row .service-images img:hover {
    transform: scale(1.05) !important;
    /* 🌐 SINCRO LÁSER: Destello perimetral sintonizado al Azul STE Corporativo */
    box-shadow: 0 15px 30px rgba(0, 188, 212, 0.25) !important; 
    z-index: 5 !important;
}

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

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

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

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

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

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

/* ==========================================================================
   5. SEPARADOR TEMÁTICO: SISTEMA DE DIVISORES DE ROMBO CON ENERGÍA TURQUESA
   ========================================================================== */
/* Chasis común del divisor extendido a lo ancho de las dos columnas de la retícula */
.services-showcase .service-row .service-divider {
    grid-column: span 2 !important; /* Se extiende a lo ancho de las dos columnas de la retícula */
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    margin: 45px auto !important;  
    height: 10px !important; /* Altura compacta unificada de tu index.css original */
}

/* Sintonía fina de pegado vertical unificado para toda la lista de servicios del Home */
.services-showcase .services-list .service-divider {
    margin-top: -20px !important;  /* Evita que el separador sea sepultado por la tarjeta */
    margin-bottom: -20px !important; /* Distribuye el espacio de forma homogénea */
}

/* Oculta la línea decorativa en el último servicio listado para limpiar el fondo */
.services-showcase .services-list .service-row:last-child .service-divider {
    display: none !important;
}

/* --- 5.1 FILAMENTO IZQUIERDO: CONDUCCIÓN GRADUAL HACIA EL CIAN LÁSER --- */
.services-showcase .service-row .service-divider::before {
    content: "" !important;
    flex: 1 !important;
    height: 1px !important;
    background: linear-gradient(90deg, transparent, #00e5ff) !important; /* 🌐 SINCRO AZUL STE */
}

/* --- 5.2 FILAMENTO DERECHO: CONDUCCIÓN GRADUAL HACIA EL CIAN LÁSER --- */
.services-showcase .service-row .service-divider::after {
    content: "" !important;
    flex: 1 !important;
    height: 1px !important;
    background: linear-gradient(270deg, transparent, #00e5ff) !important; /* 🌐 SINCRO AZUL STE */
}

/* Contenedor central de gemas mecánicas */
.services-showcase .service-row .service-divider .line-diamonds {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    margin: 0 20px !important;
    z-index: 2 !important;
}

/* Estilo geométrico industrial base para los rombos periféricos */
.services-showcase .service-row .service-divider .diamond {
    background-color: #1a2e44 !important; /* Azul marino profundo corporativo de tu style.css */
    transform: rotate(45deg) !important; 
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 0.2s ease, box-shadow 0.2s ease !important;
}

/* Gema Central Dinámica: Unificada con el diodo LED de tu haz de alta tensión */
.services-showcase .service-row .service-divider .diamond-large {
    width: 10px !important;
    height: 10px !important;
    background-color: #00e5ff !important; /* 🌐 SINCRO CIAN NEÓN */
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.6) !important; /* Efecto de diodo LED activo en reposo */
}

/* Rombos menores periféricos de equilibrio mecánico */
.services-showcase .service-row .service-divider .diamond-small {
    width: 6px !important;
    height: 6px !important;
}

/* ==========================================================================
   5.3 INTERACCIONES CINÉTICAS EN ELEMENTOS DE DIVISOR (HOVER PC)
   ========================================================================== */
/* Al pasar el cursor sobre la fila, el rombo central rota de forma elástica e intensifica su energía */
.services-showcase .service-row:hover .service-divider .diamond-large {
    transform: rotate(135deg) scale(1.25) !important; /* Giro elástico de ingeniería */
    background-color: #00e5ff !important;
    box-shadow: 0 0 14px rgba(0, 229, 255, 0.95) !important; /* Incremento de saturación y brillo láser */
}

/* ==========================================================================
   6. CLASIFICACIÓN NOMINAL DE PLACAS DEL HOME - RAÍZ CORPORATIVA (INDEX.CSS)
   ========================================================================== */

/* --- 6.1 BLOQUE 1: ASCENSORES Y MONTACARGAS (FILA NORMAL 1 PC) -------------------------BLOQUE 1--------------------------------------- */
.services-showcase .service-row:first-of-type {
    background-color: #020618 !important; /* Base azul noche profundo unificada de la firma */
    background-image: linear-gradient(135deg, 
        rgba(153, 161, 175, 1) 0%,   
        rgba(125, 133, 145, 0.50) 100%  
    ), url('img/ascensores_caracas.webp') !important; /* Marca de agua fotográfica real de ascensores */
    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 .service-row:first-of-type .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 DE ASCENSORES */
.services-showcase .service-row:first-of-type .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 .service-row:first-of-type .tech-intro-box p {
    text-align: left !important; 
    color: #e2e8f0 !important; /* Platino de alto contraste */
}

/* ⚡ SOLUCIÓN PARA LAS VIÑETAS: Panel de Cristal Líquido Oscuro sobre la lista */
.services-showcase .service-row:first-of-type .service-features {
    grid-column: 1 !important; /* Fuerza a las pastillas 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; /* Panel cyber-oscuro traslúcido de la firma */
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(0, 229, 255, 0.25) !important; /* Sintonizado al Cian Neón STE de la firma */
    border-left: 5px solid #00e5ff !important; /* Haz de acento cian láser izquierdo */
    border-radius: 16px !important; 
    padding: 25px !important;
}

/* ⚡ FILAMENTO VERTICAL Y DIODO LED DE ENTRADA (Sincronizado en Cian) */
.services-showcase .service-row:first-of-type .service-header-flex .service-icon i {
    color: #00e5ff !important; /* Cian Láser Corporativo */
    filter: drop-shadow(0 0 10px rgba(0, 229, 255, 0.6)) !important; 
}

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

/* Título Principal de la Cabecera de Ascensores */
.services-showcase .service-row:first-of-type .service-header-flex h3 {
    color: #ffffff !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
}

/* Ajustes de las dobles viñetas dentro de las pastillas */
.services-showcase .service-row:first-of-type .service-features li i {
    color: #00e5ff !important;
    filter: drop-shadow(0 0 4px rgba(0, 229, 255, 0.7)) !important;
}

/* Forzar que las letras sean legibles sobre el panel oscuro de la pastilla */
.services-showcase .service-row:first-of-type .service-features li span {
    color: #000000 !important; /* Cambiado a blanco para máxima nitidez */
}

/* ⚡ CAJA CONTENEDORA Y BOTÓN DE DETALLES DE ASCENSORES (Márgenes Sincronizados) */
.services-showcase .service-row:first-of-type .service-btn-wrapper {
    grid-column: 1 !important; 
    display: block !important;
    margin-top: -15px !important; /* Acople milimétrico de la plantilla maestra */
}

.services-showcase .service-row:first-of-type .service-btn-wrapper .btn-ste-small {
    display: inline-block !important; 
    font-family: inherit !important;
    font-size: 15px !important; 
    font-weight: 600 !important;
    color: #ffffff !important; 
    background-color: #00bcd4 !important; /* Coherencia de marca global institucional */
    border: 1px solid transparent !important;
    border-radius: 12px !important; 
    padding: 12px 25px !important; 
    text-decoration: none !important;
    box-shadow: 0 5px 15px rgba(0, 188, 212, 0.3) !important;
    transition: all 0.3s ease !important;
}

.services-showcase .service-row:first-of-type .service-btn-wrapper .btn-ste-small:hover {
    color: #ffffff !important; 
    background-color: #0097a7 !important; 
    transform: translateY(-2px) !important; 
    box-shadow: 0 8px 20px rgba(0, 188, 212, 0.4) !important;
}

/* --- 6.2 BLOQUE 2: SISTEMAS DE ACCESO Y VIGILANCIA (Zigzag Invertido Calibrado PC) --- -------------------------BLOQUE 2--------------------------------------- */
.services-showcase .service-row:nth-of-type(2) {
    background-color: #020617 !important; /* Base azul espacial oscuro unificada */
    
    /* 🌐 MARCA DE AGUA INDEPENDIENTE: Fondo de sistemas biométricos y de acceso en el Index */
    background-image: linear-gradient(135deg, 
        rgba(153, 161, 175, 1) 0%,   
        rgba(125, 133, 145, 0.50) 100%  
    ), url('img/sistemas_acceso.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 .service-row:nth-of-type(2) .service-text {
    max-width: 600px !important; 
    width: 100% !important;
    
    /* 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 DE ACCESOS */
.services-showcase .service-row:nth-of-type(2) .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 .service-row:nth-of-type(2) .tech-intro-box p {
    text-align: left !important; 
    color: #e2e8f0 !important; /* Platino de alto contraste */
}

/* 🌐 SOLUCIÓN PARA LAS VIÑETAS REVERSE: Mueve la lista técnica hacia el carril derecho */
.services-showcase .service-row:nth-of-type(2) .service-features {
    /* Fuerza a las pastillas a quedarse fijas en la columna 2 (Derecha) */
    grid-column: 2 !important; 
    
    max-width: 550px !important; 
    width: 100% !important;
    margin-bottom: 30px !important;
    margin-top: -20px !important; /* 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 texto */
    justify-self: end !important;
    align-self: flex-start !important;
    
    background: rgba(11, 22, 34, 0.82) !important; /* Panel cyber-oscuro traslúcido */
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(0, 229, 255, 0.25) !important; /* Sintonizado al Cian Neón STE */
    border-left: 5px solid #00e5ff !important; /* Haz de acento de alta tensión izquierdo */
    border-radius: 16px !important; 
    padding: 25px !important;
}

/* FILAMENTO VERTICAL Y DIODO LED DE ENTRADA (SINCRO CIAN) */
.services-showcase .service-row:nth-of-type(2) .service-header-flex .service-icon i {
    color: #00e5ff !important; /* Icono en Cian Láser Corporativo */
    filter: drop-shadow(0 0 10px rgba(0, 229, 255, 0.6)) !important; 
}

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

/* Título Principal de Sistemas de Acceso */
.services-showcase .service-row:nth-of-type(2) .service-header-flex h3 {
    color: #ffffff !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
}

/* Ajustes de las viñetas dobles en la placa oscura */
.services-showcase .service-row:nth-of-type(2) .service-features li i {
    color: #00e5ff !important;
    filter: drop-shadow(0 0 4px rgba(0, 229, 255, 0.7)) !important;
}

.services-showcase .service-row:nth-of-type(2) .service-features li span {
    color: #000000 !important; /* Texto platinado de alta nitidez sobre fondo oscuro */
}

/* 🌐 CAJA CONTENEDORA Y BOTÓN DE DETALLES EN POSICIÓN REVERSE */
.services-showcase .service-row:nth-of-type(2) .service-btn-wrapper {
    grid-column: 2 !important; /* Fuerza al botón a alinearse en la columna derecha de PC */
    display: flex !important;
    justify-content: flex-end !important; /* Clava el botón al filo derecho alineado con el cristal */
    margin-top: -15px !important; 
    width: 100% !important;
    max-width: 550px !important; /* Modulador de ancho para no pisar las fotos */
    justify-self: end !important;
}

.services-showcase .service-row:nth-of-type(2) .service-btn-wrapper .btn-ste-small {
    display: inline-block !important; 
    font-family: inherit !important;
    font-size: 15px !important; 
    font-weight: 600 !important;
    color: #ffffff !important; 
    background-color: #00bcd4 !important; /* Coherencia de marca global index */
    border: 1px solid transparent !important;
    border-radius: 12px !important; 
    padding: 12px 25px !important; 
    text-decoration: none !important;
    box-shadow: 0 5px 15px rgba(0, 188, 212, 0.3) !important;
    transition: all 0.3s ease !important;
}

.services-showcase .service-row:nth-of-type(2) .service-btn-wrapper .btn-ste-small:hover {
    color: #ffffff !important; 
    background-color: #0097a7 !important; 
    transform: translateY(-2px) !important; 
    box-shadow: 0 8px 20px rgba(0, 188, 212, 0.4) !important;
}

/* --- 6.3 BLOQUE 3: ELECTRICIDAD (Fila Normal Calibrada PC) --- --- -------------------------BLOQUE 3--------------------------------------- */
.services-showcase .service-row:nth-of-type(3) {
    background-color: #020618 !important; /* Base azul espacial oscuro unificada */
    
    /* 🌐 MARCA DE AGUA INDEPENDIENTE: Fondo de tableros eléctricos de potencia en el Index */
    background-image: linear-gradient(135deg, 
        rgba(153, 161, 175, 1) 0%,   
        rgba(125, 133, 145, 0.50) 100%  
    ), url('img/tableros_electricos.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 .service-row:nth-of-type(3) .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 DE ELECTRICIDAD */
.services-showcase .service-row:nth-of-type(3) .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 .service-row:nth-of-type(3) .tech-intro-box p {
    text-align: left !important; 
    color: #e2e8f0 !important; /* Platino de alto contraste */
}

/* 🌐 SOLUCIÓN PARA LAS VIÑETAS: Le ordena a la lista técnica sostener el carril izquierdo en PC frente a las fotos gemelas */
.services-showcase .service-row:nth-of-type(3) .service-features {
    grid-column: 1 !important; /* Fuerza a las pastillas a quedarse fijas 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; /* Panel cyber-oscuro traslúcido */
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(0, 229, 255, 0.25) !important; /* Sintonizado al Cian Neón STE */
    border-left: 5px solid #00e5ff !important; /* Haz de acento de alta tensión izquierdo */
    border-radius: 16px !important; 
    padding: 25px !important;
}

/* FILAMENTO VERTICAL Y DIODO LED DE ENTRADA (SINCRO CIAN) */
.services-showcase .service-row:nth-of-type(3) .service-header-flex .service-icon i {
    color: #00e5ff !important; /* Icono en Cian Láser Corporativo */
    filter: drop-shadow(0 0 10px rgba(0, 229, 255, 0.6)) !important; 
}

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

/* Título Principal de la Sección de Electricidad */
.services-showcase .service-row:nth-of-type(3) .service-header-flex h3 {
    color: #ffffff !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
}

/* Ajustes de las viñetas dobles en la placa oscura */
.services-showcase .service-row:nth-of-type(3) .service-features li i {
    color: #00e5ff !important;
    filter: drop-shadow(0 0 4px rgba(0, 229, 255, 0.7)) !important;
}

.services-showcase .service-row:nth-of-type(3) .service-features li span {
    color: #000000 !important; /* Máxima nitidez blanca sobre el cristal líquido oscuro */
}

/* 🌐 CAJA CONTENEDORA Y BOTÓN DE COTIZACIÓN (Márgenes Sincronizados de PC) */
.services-showcase .service-row:nth-of-type(3) .service-btn-wrapper {
    grid-column: 1 !important; 
    display: block !important;
    margin-top: -15px !important; /* Acople milimétrico de la plantilla maestra */
}

.services-showcase .service-row:nth-of-type(3) .service-btn-wrapper .btn-ste-small {
    display: inline-block !important; 
    font-family: inherit !important;
    font-size: 15px !important; 
    font-weight: 600 !important;
    color: #ffffff !important; 
    background-color: #00bcd4 !important; /* Coherencia de marca global index */
    border: 1px solid transparent !important;
    border-radius: 12px !important; 
    padding: 12px 25px !important; 
    text-decoration: none !important;
    box-shadow: 0 5px 15px rgba(0, 188, 212, 0.3) !important;
    transition: all 0.3s ease !important;
}

.services-showcase .service-row:nth-of-type(3) .service-btn-wrapper .btn-ste-small:hover {
    color: #ffffff !important; 
    background-color: #0097a7 !important; 
    transform: translateY(-2px) !important; 
    box-shadow: 0 8px 20px rgba(0, 188, 212, 0.4) !important;
}

/* --- 6.4 BLOQUE 4: PORTONES ELÉCTRICOS Y AUTOMATIZACIÓN (Zigzag Invertido Calibrado PC) --- --- --- -------------------------BLOQUE 4--------------------------------------- */
.services-showcase .service-row:nth-of-type(4) {
    background-color: #020617 !important; /* Base azul espacial oscuro unificada */
    
    /* 🌐 MARCA DE AGUA INDEPENDIENTE: Fondo de automatización de accesos en el Index */
    background-image: linear-gradient(135deg, 
        rgba(153, 161, 175, 1) 0%,   
        rgba(125, 133, 145, 0.50) 100%  
    ), url('img/portones_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 .service-row:nth-of-type(4) .service-text {
    max-width: 600px !important; 
    width: 100% !important;
    
    /* 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 DE PORTONES */
.services-showcase .service-row:nth-of-type(4) .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 .service-row:nth-of-type(4) .tech-intro-box p {
    text-align: left !important; 
    color: #e2e8f0 !important; /* Platino de alto contraste */
}

/* 🌐 SOLUCIÓN PARA LAS VIÑETAS REVERSE: Mueve la lista técnica hacia el carril derecho */
.services-showcase .service-row:nth-of-type(4) .service-features {
    /* Fuerza a las pastillas a quedarse fijas en la columna 2 (Derecha) */
    grid-column: 2 !important; 
    
    max-width: 550px !important; 
    width: 100% !important;
    margin-bottom: 30px !important;
    margin-top: -20px !important; /* 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 texto */
    justify-self: end !important;
    align-self: flex-start !important;
    
    background: rgba(11, 22, 34, 0.82) !important; /* Panel cyber-oscuro traslúcido */
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(0, 229, 255, 0.25) !important; /* Sintonizado al Cian Neón STE */
    border-left: 5px solid #00e5ff !important; /* Haz de acento de alta tensión izquierdo */
    border-radius: 16px !important; 
    padding: 25px !important;
}

/* FILAMENTO VERTICAL Y DIODO LED DE ENTRADA (SINCRO CIAN) */
.services-showcase .service-row:nth-of-type(4) .service-header-flex .service-icon i {
    color: #00e5ff !important; /* Icono en Cian Láser Corporativo */
    filter: drop-shadow(0 0 10px rgba(0, 229, 255, 0.6)) !important; 
}

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

/* Título Principal de Portones y Automatizaciones */
.services-showcase .service-row:nth-of-type(4) .service-header-flex h3 {
    color: #ffffff !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
}

/* Ajustes de las viñetas dobles en la placa oscura */
.services-showcase .service-row:nth-of-type(4) .service-features li i {
    color: #00e5ff !important;
    filter: drop-shadow(0 0 4px rgba(0, 229, 255, 0.7)) !important;
}

.services-showcase .service-row:nth-of-type(4) .service-features li span {
    color: #000000 !important; /* Texto platinado brillante sobre el panel */
}

/* 🌐 CAJA CONTENEDORA Y BOTÓN DE DETALLES EN POSICIÓN REVERSE */
.services-showcase .service-row:nth-of-type(4) .service-btn-wrapper {
    grid-column: 2 !important; /* Fuerza al botón a alinearse en la columna derecha de PC */
    display: flex !important;
    justify-content: flex-end !important; /* Clava el botón al filo derecho alineado con el cristal */
    margin-top: -15px !important; 
    width: 100% !important;
    max-width: 550px !important; /* Modulador de ancho para no pisar las fotos */
    justify-self: end !important;
}

.services-showcase .service-row:nth-of-type(4) .service-btn-wrapper .btn-ste-small {
    display: inline-block !important; 
    font-family: inherit !important;
    font-size: 15px !important; 
    font-weight: 600 !important;
    color: #ffffff !important; 
    background-color: #00bcd4 !important; /* Coherencia de marca global index */
    border: 1px solid transparent !important;
    border-radius: 12px !important; 
    padding: 12px 25px !important; 
    text-decoration: none !important;
    box-shadow: 0 5px 15px rgba(0, 188, 212, 0.3) !important;
    transition: all 0.3s ease !important;
}

.services-showcase .service-row:nth-of-type(4) .service-btn-wrapper .btn-ste-small:hover {
    color: #ffffff !important; 
    background-color: #0097a7 !important; 
    transform: translateY(-2px) !important; 
    box-shadow: 0 8px 20px rgba(0, 188, 212, 0.4) !important;
}


/* ==========================================================================
   7. FIJACIÓN DE FLUJO TEXTUAL CONTINUO PARA CONTENEDORES SPAN (PC/MÓVIL)
   ========================================================================== */
.services-showcase .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 */
    box-sizing: border-box !important;
}

/* Evita que el checkmark de doble flecha se aplaste con textos muy largos */
.services-showcase .service-features li i {
    flex-shrink: 0 !important;
}

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

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

/* ==========================================================================
   8. BOTÓN FLOTANTE TEMÁTICO "PB" (EN ROJO DE ASCENSOR EN COLA DE ACTIVACIÓN)
   ========================================================================== */
/* 🛠️ SINCRO TOTAL INDEX: Apunta directamente a la clase real de tu index.html */
.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 #475569; /* Borde titanio oscuro en reposo para un acabado cyber premium */
    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: #cbd5e1; /* Platino de alta visibilidad institucional unificada */
    font-family: 'Poppins', '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: #334155; /* LED apagado en reposo */
    margin-top: 4px;
    transition: all 0.3s ease;
}

/* --- INTERACCIONES DEL PULSADOR (HOVER EN COMPUTADORA) --- */
.elevator-btn-back:hover .panel-button {
    border-color: var(--azul-ste, #00bcd4) !important; /* El anillo metálico se enciende en Azul STE */
    box-shadow: 0 0 20px rgba(0, 188, 212, 0.6), inset 0 1px 3px rgba(255, 255, 255, 0.2) !important;
    transform: translateY(-3px);
}

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

/* 🔴 SINCRO DE INTERFAZ: El indicador LED se enciende en el Rojo oficial de llamada de ascensor */
.elevator-btn-back:hover .button-light {
    background-color: #ff2a2a !important; 
    box-shadow: 0 0 10px #ff2a2a, 0 0 20px #ff2a2a !important;
}

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

/* ==========================================================================
   9. PARCHE DE ALINEACIÓN SECCIÓN DE COTIZACIONES (PC Y MÓVIL)
   ========================================================================== */
/* 🛠️ SINCRO TOTAL INDEX: Apunta directamente al encabezado real de tu consola flotante del Home */
.quote-form-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) {
    /* Reducción de la cuadrícula de servicios y conversión elástica a flujo vertical en tablets */
    .services-showcase .services-list .service-row {
        display: flex !important;
        flex-direction: column !important; /* Pasa la grilla de PC a flujo vertical unificado */
        gap: 30px !important;
        margin-bottom: 55px !important;
        padding: 30px 20px !important;
    }
    
    /* 🦾 SINCRO: Reordenamiento elástico de las filas invertidas para mantener la secuencia visual */
    .services-showcase .services-list .service-row.reverse {
        flex-direction: column !important; 
    }

    /* Fuerza a las cajas de texto, viñetas y párrafos a ocupar el ancho completo en tablets */
    .services-showcase .services-list .service-row .service-text,
    .services-showcase .services-list .service-row .service-features,
    .services-showcase .services-list .service-row .tech-intro-box {
        max-width: 100% !important;
        width: 100% !important;
    }
    
    /* Adaptación geométrica de las imágenes gemelas en formato tableta */
    .services-showcase .services-list .service-row .service-images {
        width: 100% !important;
        max-width: 500px !important;
        margin: 20px auto !important;
    }

    .services-showcase .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 en formato tableta horizontal */
    .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;
    }
    
    /* 🦾 SINCRO BOTONES: Alineación centrada del botón de detalles en formato tableta */
    .services-showcase .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;
    }
    
    /* 🦾 SINCRO DIVISORES: Calibración holgada para que el divisor de rombos no tape los nuevos botones */
    .services-showcase .services-list .service-row .service-divider {
        grid-column: span 2 !important;
        width: 100% !important;
        margin-top: 20px !important;
        margin-bottom: 0px !important;
    }

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

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

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

    /* ----------------------------------------------------------------------
       13.1 BOTÓN FLOTANTE INDEPENDIENTE "PB" (RESPUESTA TÁCTIL AZUL STE)
       ---------------------------------------------------------------------- */
    /* 🛠️ SINCRO TOTAL: Apunta directamente a la clase real de tu index.html */
    .elevator-btn-back {
        position: fixed;
        bottom: 20px !important;
        right: 20px !important;
        z-index: 999;
        display: block;
    }

    .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, 188, 212, 0); /* Sincronizado en tu Azul STE original */
        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, 188, 212, 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 EN AZUL CORPORATIVO)
       ---------------------------------------------------------------------- */
    body .ads-layout-container .main-wrapper .hero-blue {
        padding: 15px 0 25px 0 !important; 
        /* 🛠️ SINCRO INDEX: Chasis oscurecido VVVF que unifica la entrada del Home */
        background: linear-gradient(135deg, rgba(17, 24, 39, 0.95) 0%, rgba(22, 34, 57, 0.9) 100%) !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 platino idéntico al de PC */
    }

    /* --- 13.2.1 MARCA DE AGUA CORPORATIVA 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.10 !important; /* Atenuado para optimizar contraste en smartphones */
        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 DE LA PÁGINA RAÍZ */
	.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 los laterales */
        margin-right: auto !important; 
        margin-top: 12px !important;   /* Separa verticalmente del H1 */
        margin-bottom: 0 !important;
        padding-left: 0 !important;    /* Elimina cualquier sangría residual */
        padding-right: 0 !important;   
        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 ORDENAMIENTO DE FILAS Y ACOPLE DE ELEMENTOS EN MÓVIL (768PX)
       ---------------------------------------------------------------------- */
    /* Fuerza el comportamiento elástico vertical puro para todas las tarjetas */
    .services-showcase .services-list .service-row {
        display: flex !important;
        flex-direction: column !important; /* Fuerza el apilamiento vertical unificado */
        padding: 25px 15px !important;     /* Colchón perimetral homogéneo protector */
        margin-bottom: 45px !important;
        gap: 20px !important;
        box-sizing: border-box !important;
    }

    /* Cancela el modo reverse de PC para que el texto siempre lidere en smartphones */
    .services-showcase .services-list .service-row.reverse {
        flex-direction: column !important;
    }

    /* Centrado axial y estiramiento del bloque de texto y títulos */
    .services-showcase .services-list .service-row .service-text {
        max-width: 100% !important;
        width: 100% !important;
        text-align: center !important;
        order: 1 !important;               /* Primero en el orden jerárquico táctil */
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Centra los iconos de cabecera y elimina la raya vertical divisoria en pantallas pequeñas */
    .services-showcase .services-list .service-row .service-header-flex {
        justify-content: center !important;
        flex-direction: column !important;
        gap: 10px !important;
    }

    .services-showcase .services-list .service-row .service-header-flex .vertical-divider {
        display: none !important;          /* Desaparece por hardware para ganar espacio límpido */
    }

    .services-showcase .services-list .service-row .service-header-flex h3 {
        font-size: 1.3rem !important;
        text-align: center !important;
        line-height: 1.3 !important;
    }

    /* 📦 CAJA DEL PÁRRAFO INTRODUCTORIO EN MÓVIL */
    .services-showcase .services-list .service-row .tech-intro-box {
        max-width: 100% !important;
        width: 100% !important;
        padding: 15px !important;
        margin-top: 15px !important;
        margin-bottom: 20px !important;
        border-left: none !important;
        /* 🌐 SINCRO LÁSER: Haz de acento superior sintonizado al Azul STE Corporativo */
        border-top: 4px solid #00bcd4 !important; 
        border-radius: 12px !important;
        box-sizing: border-box !important;
    }

    .services-showcase .services-list .service-row .tech-intro-box p {
        text-align: center !important;     /* Centrado de lectura ergonómica unificado */
        font-size: 14px !important;
        box-sizing: border-box !important;
        color: #ffffff !important;         /* Blanco radiante para las cajas oscuras del index */
    }

    /* 📦 CAJA DE VIÑETAS / PASTILLAS EN MÓVIL */
    .services-showcase .services-list .service-row .service-features {
        max-width: 100% !important;
        width: 100% !important;
        margin-top: 0 !important;
        margin-bottom: 25px !important;
        padding: 15px !important;
        border-left: none !important;
        /* 🌐 SINCRO LÁSER: Sincronía perimetral táctil en Azul STE Corporativo */
        border-top: 4px solid #00bcd4 !important; 
        border-radius: 12px !important;
        order: 3 !important;               /* Tercero: Lista de viñetas con checks */
        display: flex !important;
        flex-direction: column !important;
        box-sizing: border-box !important;
    }

    /* Ajuste de empaque para los ítems li tipo pastilla */
    .services-showcase .services-list .service-row .service-features li {
        font-size: 13.5px !important;
        padding: 10px 12px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        flex-direction: row !important;
        align-items: center !important;
    }

    /* 🔘 SINCRO DE BOTONES DE COTIZACIÓN EN MÓVIL */
    .services-showcase .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: 10px !important;
        box-sizing: border-box !important;
        order: 4 !important;               /* Cuarto: Botón de Cotización táctil expandido */
    }

    .services-showcase .services-list .service-row .service-btn-wrapper .btn-ste-small {
        width: 100% !important;            /* El botón se expande a lo ancho para facilitar el clic táctil */
        text-align: center !important;
        padding: 14px 20px !important;
        font-size: 15px !important;
    }

    /* 🛡️ SINCRO DE SEPARADORES DE ROMBO EN MÓVIL */
    .services-showcase .services-list .service-row .service-divider {
        width: 90% !important;
        max-width: 90% !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        margin: 30px auto !important;
        margin-top: 10px !important;   
        margin-bottom: -10px !important; 	
        order: 5 !important;               /* Quinto y último: Línea de conducción y rombos */
    }


	  /* ----------------------------------------------------------------------
		 13.4 LÓGICA DE ANIMACIÓN CINEMÁTICA INTERACTIVA GLOBAL (IMÁGENES) - SINCRO INDEX
		 ---------------------------------------------------------------------- */
	  /* Comportamiento base y transiciones elásticas para las imágenes gemelas del Home */
	  .services-showcase .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-showcase .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-showcase .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;
	  }

	  /* 🛠️ SINCRO TOTAL: Contenedor general que enmarca tus fotos gemelas con equilibrado al 100% */
	  .services-showcase .services-list .service-row .service-images {
		  width: 100% !important;
		  height: 160px !important; 
		  max-width: 100% !important;        /* 🦾 REPARACIÓN: Corta el estiramiento masivo de PC */
		  order: 2 !important;               /* Se clava automáticamente en segundo orden */
		  display: flex !important;
		  flex-direction: row !important;
		  justify-content: space-between !important;
		  align-items: center !important;
		  gap: 10px !important;
		  margin: 15px auto !important;      /* Centrado simétrico exacto por hardware */
		  padding-left: 0 !important;        /* 🦾 REPARACIÓN: Elimina los desvíos laterales */
		  padding-right: 0 !important;
		  position: relative !important;
		  box-sizing: border-box !important;
	  }

	  /* --- 13.4.2 CONTROL CINÉTICO DE EXPANSIÓN (ZOOM ABSOLUTO EN CAJA DE CRISTAL IDENTICO A ELECTRICIDAD) --- */
	  /* FOTO 1 (Izquierda): Fuerza el centrado axial flotando de forma soberana sobre el Viewport */
	  .services-showcase .services-list .service-row .service-images img.img-1.foto-expandida {
		  position: fixed !important;        /* 🦾 REPARACIÓN: Flota sobre toda la pantalla real, rompiendo la tarjeta */
		  top: 50% !important;
		  left: 50% !important;              /* Clava el punto de anclaje exactamente en el medio de la pantalla */
		  right: auto !important;
		  bottom: auto !important;
		  margin-left: 0px !important;       
		  
		  /* TRUCO INDESTRUCTIBLE ELÉCTRICO: Mide el ancho del celular y le quita 48px de aire en total */
		  width: calc(100vw - 48px) !important;/* Deja exactamente 24px de respiro límpido a los lados */
		  height: auto !important; 
		  max-height: 70vh !important;       /* Limita el estiramiento vertical en smartphones alargados */
		  object-fit: contain !important; 
		  background: transparent !important;
		  
		  /* Centrado simétrico puro por GPU: el -50% compensa el left/top para anular tirones */
		  transform: translate3d(-50%, -50%, 0) scale(1.05) !important;
		  transform-origin: center center !important; 
		  z-index: 999999 !important;        /* Capa máxima absoluta por encima de menús y textos del Home */
		  box-shadow: 0px 20px 50px rgba(0, 0, 0, 0.6) !important; /* Aura tridimensional premium */
		  border-radius: 14px !important;
	  }

	  /* FOTO 2 (Derecha): Comportamiento espejo idéntico y centrado para la foto derecha, inmune a filas reverse */
	  .services-showcase .services-list .service-row .service-images img.img-2.foto-expandida {
		  position: fixed !important;        /* 🦾 REPARACIÓN: Inmunidad contra saltos o desvíos laterales */
		  top: 50% !important;
		  left: 50% !important;                
		  right: auto !important;
		  bottom: auto !important;
		  margin-right: 0px !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 en GPU */
		  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: ASCENSORES Y MONTACARGAS (SOLUCIÓN SMARTPHONE COMPLETA)
       ============================================================================================ */
    /* 🛠️ SINCRO TOTAL: Apunta de forma exacta al primer bloque de tu index.html */
    .services-showcase .services-list .service-row:first-of-type {
        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 y cuarto número (15px) es el colchón de seguridad de los LATERALES.
           El tercer número (45px) es el aire base de ABAJO. */
        padding: 25px 15px 45px 15px !important;   
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
        box-sizing: border-box !important;

        /* ⚙️ FONDO DE TARJETA Y COLOR CORPORATIVO:
           Asegura que el contenedor tenga posición relative para poder meter la marca de agua detrás. */
        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-showcase .services-list .service-row:first-of-type::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:
           Sincronizado con tu imagen real de ascensores en tu index.html */
        background: url('img/ascensores_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 REPARADA: Adopta un ancho elástico limpio para evitar desbordes */
    .services-showcase .services-list .service-row:first-of-type .tech-intro-box,
    .services-showcase .services-list .service-row:first-of-type .tech-intro-box p {
        width: 100% !important;  /* Cambiado a 100% para contener el texto dentro de la tarjeta */
        max-width: 100% !important;
        margin-left: 0 !important; /* Elimina los desvíos negativos que causaban el corte visual */
        margin-right: 0 !important;      
        margin-bottom: 20px !important;
        padding-left: 10px !important; /* Colchón ergonómico perimetral simétrico */
        padding-right: 10px !important;      
        border-radius: 8px !important;
        box-sizing: border-box !important;
		text-align: left !important; /* 🛠️ MODIFICACIÓN: Lectura corrida hacia la izquierda en celulares */
    }

    /* ⚙️ CONTENEDOR DE IMÁGENES GEMELAS REPARADO PARA ZOOM FLOTANTE (ESTÁNDAR ELECTRICIDAD) */
    .services-showcase .services-list .service-row:first-of-type .service-images {
        width: 100% !important;
        height: 160px !important;            /* Altura de la caja que enmarca tus fotos */
        max-width: 100% !important;          
        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 */
        padding: 0 !important; 
        position: relative !important;
        box-sizing: border-box !important;
    }

    /* ⚙️ CAJA DE LOS ÍTEMS REPARADA: Alineación interna perfecta de las pastillas */
    .services-showcase .services-list .service-row:first-of-type .service-features {
        width: 100% !important;  /* Ancho elástico completo sin desbordar los bordes */
        max-width: 100% !important;
        margin-left: 0 !important;       
        margin-right: 0 !important;      
        padding-left: 10px !important; /* Alineación simétrica con el párrafo superior */
        padding-right: 10px !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: 25px !important;     
        box-sizing: border-box !important;
    }

    /* 🔘 SINCRO DE BOTONES DE COTIZACIÓN (MOLDE COMPACTO DE ELECTRICIDAD ADAPTADO) */
    .services-showcase .services-list .service-row:first-of-type .service-btn-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        justify-content: center !important; /* Mantiene la pastilla centrada bajo el contenido móvil */
        margin-top: 10px !important;
        margin-bottom: 10px !important;
        box-sizing: border-box !important;
        order: 4 !important;                /* Se posiciona secuencialmente en cuarto orden vertical */
    }

    .services-showcase .services-list .service-row:first-of-type .service-btn-wrapper .btn-ste-small {
        width: auto !important;             /* 🛠️ REPARACIÓN: Cancela el estiramiento intrusivo al 100% */
        display: inline-block !important;   /* Se comporta como bloque compacto autoadaptativo */
        text-align: center !important;
        padding: 12px 25px !important;      /* Colchón original de tu botón premium */
        font-size: 15px !important;
    }

    /* ⚙️ CONTROL DIRECTO DEL DIVISOR DEL BLOQUE 1 (CENTRADO AXIAL INDESTRUCTIBLE Y DESPEGADO) */
    /* 🛠️ SINCRO TOTAL: Re-encaminado a tu divisor unificado de rombos de tu index.html */
    .services-showcase .services-list .service-row:first-of-type .service-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 gemas */
        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 el circuito 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-showcase .services-list .service-row:first-of-type .service-divider .line-diamonds {
        margin-left: auto !important;
        margin-right: auto !important;
        float: none !important;
    }





        /* ==========================================================--------------------------------------------==================================
       🔐 CONTENEDOR GENERAL - BLOQUE 2: SISTEMAS DE ACCESO Y VIGILANCIA (SOLUCIÓN SMARTPHONE COMPLETA)
       =====================================================================-------------------------------------======================= */
    /* 🛠️ SINCRO TOTAL: Apunta de forma exacta al segundo bloque de tu index.html */
    .services-showcase .services-list .service-row:nth-of-type(2) {
        border-radius: 16px !important;
        margin-bottom: 40px !important;
        display: flex !important;
        flex-direction: column !important; /* Mantiene el flujo vertical limpio en smartphones */
        
        /* ⚙️ CONTROL DE ALTURA DE LA TARJETA (BLOQUE 2): Colchón simétrico perimetral */
        padding: 25px 15px 45px 15px !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
        box-sizing: border-box !important;

        /* ⚙️ FONDO DE TARJETA Y COLOR CORPORATIVO */
        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-showcase .services-list .service-row:nth-of-type(2)::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): Sincronizado con accesos en tu HTML */
        background: url('img/acceso_cabina.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 REPARADA: Adopta un ancho elástico limpio para evitar desbordes */
    .services-showcase .services-list .service-row.reverse:nth-of-type(2) .tech-intro-box,
    .services-showcase .services-list .service-row.reverse:nth-of-type(2) .tech-intro-box p,
    .services-showcase .services-list .service-row:nth-of-type(2) .tech-intro-box,
    .services-showcase .services-list .service-row:nth-of-type(2) .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;              
        text-align: left !important; /* 🛠️ MODIFICACIÓN: Lectura corrida hacia la izquierda en celulares */
        box-sizing: border-box !important;
    }

    /* ⚙️ CONTENEDOR DE IMÁGENES GEMELAS: Control Total de las Imágenes (Chasis de Fotos y Centrado) */
    .services-showcase .services-list .service-row:nth-of-type(2) .service-images {
        width: 100% !important;
        height: 160px !important;            
        max-width: 100% !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: 25px !important;      /* Cambiado a positivo para empujar las viñetas abajo */
        margin-left: 0 !important;           
        margin-right: 0 !important; 
        padding: 0 !important; 
        position: relative !important;
        box-sizing: border-box !important;
    }

    /* ⚙️ CAJA DE LOS ÍTEMS REPARADA: Alineación interna perfecta de las pastillas */
    .services-showcase .services-list .service-row.reverse:nth-of-type(2) .service-features,
    .services-showcase .services-list .service-row:nth-of-type(2) .service-features {
        width: 100% !important;              
        max-width: 100% !important;
        margin-left: 0 !important;           
        margin-right: 0 !important;          
        padding-left: 10px !important;       
        padding-right: 10px !important;      
        gap: 12px !important;                
        float: none !important;
        order: 3 !important;                 /* Garantiza su posición secuencial antes del botón */
        margin: 5px auto 25px auto !important; 
        box-sizing: border-box !important;
    }

    /* 🔘 SINCRO DE BOTONES DE COTIZACIÓN (MOLDE COMPACTO DE ELECTRICIDAD ADAPTADO) */
    .services-showcase .services-list .service-row:nth-of-type(2) .service-btn-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        justify-content: center !important; /* Mantiene la pastilla centrada bajo el contenido móvil */
        margin-top: 10px !important;
        margin-bottom: 10px !important;
        box-sizing: border-box !important;
        order: 4 !important;                /* Se posiciona secuencialmente en cuarto orden vertical */
    }

    .services-showcase .services-list .service-row:nth-of-type(2) .service-btn-wrapper .btn-ste-small {
        width: auto !important;             /* 🛠️ REPARACIÓN: Cancela el estiramiento intrusivo al 100% */
        display: inline-block !important;   /* Se comporta como bloque compacto autoadaptativo */
        text-align: center !important;
        padding: 12px 25px !important;      /* Colchón original de tu botón premium */
        font-size: 15px !important;
    }

    /* ⚙️ CONTROL DIRECTO DEL DIVISOR DEL BLOQUE 2 (CENTRADO AXIAL INDESTRUCTIBLE Y DESPEGADO) */
    /* 🛠️ SINCRO TOTAL: Re-encaminado a tu divisor unificado de rombos de tu index.html */
    .services-showcase .services-list .service-row.reverse:nth-of-type(2) .service-divider,
    .services-showcase .services-list .service-row:nth-of-type(2) .service-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 gemas */
        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 de forma elástica */
        margin: 0 auto !important;
        margin-top: 25px !important;         /* Separa el chasis del botón de detalles de arriba */
        margin-bottom: 15px !important;      /* Separa el circuito del filo inferior de la tarjeta */
    }

    /* Ajuste milimétrico para asegurar que las líneas e íconos internos fluyan exactamente al medio */
    .services-showcase .services-list .service-row.reverse:nth-of-type(2) .service-divider .line-diamonds,
    .services-showcase .services-list .service-row:nth-of-type(2) .service-divider .line-diamonds {
        margin-left: auto !important;
        margin-right: auto !important;
        float: none !important;
    }


        /* ====================================================================---------------------------------------========================
       🔐 CONTENEDOR GENERAL - BLOQUE 3: ELECTRICIDAD (SOLUCIÓN SMARTPHONE COMPLETA)
       ====================================================================================---------------------------------------======== */
    /* 🛠️ SINCRO TOTAL: Apunta de forma exacta al tercer bloque de tu index.html */
    .services-showcase .services-list .service-row:nth-of-type(3) {
        border-radius: 16px !important;
        margin-bottom: 40px !important;
        display: flex !important;
        flex-direction: column !important; /* Mantiene el flujo vertical limpio en smartphones */

        /* ⚙️ CONTROL DE ALTURA DE LA TARJETA (BLOQUE 3): Altura simétrica estandarizada */
        padding: 25px 15px 45px 15px !important;   
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
        box-sizing: border-box !important;

        /* ⚙️ FONDO DE TARJETA Y POSITION RELATIVE PARA LA MARCA DE AGUA */
        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-showcase .services-list .service-row:nth-of-type(3)::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): Sincronizado con electricidad en el index */
        background: url('img/tableros_electricos.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 REPARADA: Adopta un ancho elástico limpio para evitar desbordes */
    .services-showcase .services-list .service-row:nth-of-type(3) .tech-intro-box,
    .services-showcase .services-list .service-row:nth-of-type(3) .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 turquesa */
        padding-right: 10px !important;      
        border-radius: 8px !important;       
        float: none !important;              
        text-align: left !important; /* 🛠️ MODIFICACIÓN: Lectura corrida hacia la izquierda en celulares */
        box-sizing: border-box !important;
    }

    /* ⚙️ CONTENEDOR DE IMÁGENES GEMELAS: Control Total de las Imágenes (Chasis de Fotos y Centrado) */
    .services-showcase .services-list .service-row:nth-of-type(3) .service-images {
        width: 100% !important;
        height: 160px !important;            
        max-width: 100% !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: 25px !important;      /* Empuja las viñetas abajo de forma simétrica */
        margin-left: 0 !important;           
        margin-right: 0 !important; 
        padding: 0 !important; 
        position: relative !important;
        box-sizing: border-box !important;
    }

    /* ⚙️ CAJA DE LOS ÍTEMS REPARADA: Alineación interna perfecta de las pastillas */
    .services-showcase .services-list .service-row:nth-of-type(3) .service-features {
        width: 100% !important;              
        max-width: 100% !important;
        margin-left: 0 !important;           
        margin-right: 0 !important;          
        padding-left: 10px !important;       /* Espacio ergonómico alineado con el párrafo */
        padding-right: 10px !important;      
        gap: 12px !important;                
        float: none !important;
        order: 3 !important;                 /* Garantiza su posición secuencial antes del botón */
        margin: 5px auto 25px auto !important; 
        box-sizing: border-box !important;
    }

    /* 🔘 SINCRO DE BOTONES DE COTIZACIÓN (MOLDE COMPACTO DE ELECTRICIDAD ADAPTADO) */
    .services-showcase .services-list .service-row:nth-of-type(3) .service-btn-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        justify-content: center !important; /* Mantiene la pastilla centrada bajo el contenido móvil */
        margin-top: 10px !important;
        margin-bottom: 10px !important;
        box-sizing: border-box !important;
        order: 4 !important;                /* Se posiciona secuencialmente en cuarto orden vertical */
    }

    .services-showcase .services-list .service-row:nth-of-type(3) .service-btn-wrapper .btn-ste-small {
        width: auto !important;             /* 🛠️ REPARACIÓN: Cancela el estiramiento intrusivo al 100% */
        display: inline-block !important;   /* Se comporta como bloque compacto autoadaptativo */
        text-align: center !important;
        padding: 12px 25px !important;      /* Colchón original de tu botón premium */
        font-size: 15px !important;
    }

    /* ⚙️ CONTROL DIRECTO DEL DIVISOR DEL BLOQUE 3 (CENTRADO AXIAL INDESTRUCTIBLE Y DESPEGADO) */
    /* 🛠️ SINCRO TOTAL: Re-encaminado a tu divisor de rombos unificado de tu index.html */
    .services-showcase .services-list .service-row:nth-of-type(3) .service-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 gemas */
        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 el circuito del filo inferior de la tarjeta */
    }

    /* Ajuste milimétrico para asegurar que las líneas e íconos internos del Bloque 3 fluyan exactamente al medio */
    .services-showcase .services-list .service-row:nth-of-type(3) .service-divider .line-diamonds {
        margin-left: auto !important;
        margin-right: auto !important;
        float: none !important;
    }


       /* =============================================================--------------------------------------------------=============
       🔐 CONTENEDOR GENERAL - BLOQUE 4: PORTONES ELÉCTRICOS (SOLUCIÓN SMARTPHONE COMPLETA)
       =================================================================-------------------------------------------------========= */
    /* 🛠️ SINCRO TOTAL: Apunta de forma exacta al cuarto bloque de tu index.html */
    .services-showcase .services-list .service-row:nth-of-type(4) {
        border-radius: 16px !important;
        margin-bottom: 40px !important;
        display: flex !important;
        flex-direction: column !important; /* Mantiene el flujo vertical limpio en smartphones */
        
        /* ⚙️ CONTROL DE ALTURA DE LA TARJETA (BLOQUE 4): Colchón simétrico perimetral */
        padding: 25px 15px 45px 15px !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
        box-sizing: border-box !important;

        /* ⚙️ FONDO DE TARJETA Y POSITION RELATIVE PARA LA MARCA DE AGUA */
        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-showcase .services-list .service-row:nth-of-type(4)::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): Sincronizado con portones en tu HTML */
        background: url('img/portones_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 REPARADA: Adopta un ancho elástico limpio para evitar desbordes */
    .services-showcase .services-list .service-row.reverse:nth-of-type(4) .tech-intro-box,
    .services-showcase .services-list .service-row.reverse:nth-of-type(4) .tech-intro-box p,
    .services-showcase .services-list .service-row:nth-of-type(4) .tech-intro-box,
    .services-showcase .services-list .service-row:nth-of-type(4) .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;              
        text-align: left !important; /* 🛠️ MODIFICACIÓN: Lectura corrida hacia la izquierda en celulares */
        box-sizing: border-box !important;
    }

    /* ⚙️ CONTENEDOR DE IMÁGENES GEMELAS: Control Total de las Imágenes (Chasis de Fotos y Centrado) */
    .services-showcase .services-list .service-row:nth-of-type(4) .service-images {
        width: 100% !important;
        height: 160px !important;            
        max-width: 100% !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: 25px !important;      /* Cambiado a positivo para empujar las viñetas abajo */
        margin-left: 0 !important;           
        margin-right: 0 !important; 
        padding: 0 !important; 
        position: relative !important;
        box-sizing: border-box !important;
    }

    /* ⚙️ CAJA DE LOS ÍTEMS REPARADA: Alineación interna perfecta de las pastillas */
    .services-showcase .services-list .service-row.reverse:nth-of-type(4) .service-features,
    .services-showcase .services-list .service-row:nth-of-type(4) .service-features {
        width: 100% !important;              
        max-width: 100% !important;
        margin-left: 0 !important;           
        margin-right: 0 !important;          
        padding-left: 10px !important;       
        padding-right: 10px !important;      
        gap: 12px !important;                
        float: none !important;
        order: 3 !important;                 /* Garantiza su posición secuencial antes del botón */
        margin: 5px auto 25px auto !important; 
        box-sizing: border-box !important;
    }

    /* 🔘 SINCRO DE BOTONES DE COTIZACIÓN (MOLDE COMPACTO DE ELECTRICIDAD ADAPTADO) */
    .services-showcase .services-list .service-row:nth-of-type(4) .service-btn-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        justify-content: center !important; /* Mantiene la pastilla centrada bajo el contenido móvil */
        margin-top: 10px !important;
        margin-bottom: 10px !important;
        box-sizing: border-box !important;
        order: 4 !important;                /* Se posiciona secuencialmente en cuarto orden vertical */
    }

    .services-showcase .services-list .service-row:nth-of-type(4) .service-btn-wrapper .btn-ste-small {
        width: auto !important;             /* 🛠️ REPARACIÓN: Cancela el estiramiento intrusivo al 100% */
        display: inline-block !important;   /* Se comporta como bloque compacto autoadaptativo */
        text-align: center !important;
        padding: 12px 25px !important;      /* Colchón original de tu botón premium */
        font-size: 15px !important;
    }

    /* ⚙️ CONTROL DIRECTO DEL DIVISOR DEL BLOQUE 4 (CENTRADO AXIAL INDESTRUCTIBLE Y DESPEGADO) */
    /* 🛠️ SINCRO TOTAL: Re-encaminado a tu divisor de rombos unificado de tu index.html */
    .services-showcase .services-list .service-row.reverse:nth-of-type(4) .service-divider,
    .services-showcase .services-list .service-row:nth-of-type(4) .service-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 gemas */
        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 de forma elástica */
        margin: 0 auto !important;
        margin-top: 25px !important;         /* Separa el chasis del botón de detalles de arriba */
        margin-bottom: 15px !important;      /* Separa el circuito del filo inferior de la tarjeta */
    }

    /* Ajuste milimétrico para asegurar que las líneas e íconos internos del Bloque 4 fluyan exactamente al medio */
    .services-showcase .services-list .service-row.reverse:nth-of-type(4) .service-divider .line-diamonds,
    .services-showcase .services-list .service-row:nth-of-type(4) .service-divider .line-diamonds {
        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) - SINCRO INDEX
     ---------------------------------------------------------------------- */
  /* Reglas cinéticas globales para el comportamiento y zoom interactivo de las fotos en el Home */
  .services-showcase .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-showcase .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-showcase .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 EN ABANICO ASIMÉTRICO) --- */
  /* FOTO 1 (Izquierda): Abre hacia la izquierda despegándose los píxeles calibrados */
  .services-showcase .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;
  }
  
  /* FOTO 2 (Derecha): Comportamiento espejo asimétrico para la foto derecha */
  .services-showcase .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 --- */
  /* Ajusta los orillos laterales y añade el padding de 34px para el centrado manual del abanico */
  .services-showcase .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 del Home */
      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 INDEX)
       ---------------------------------------------------------------------- */
    .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 adaptado a tu Azul STE de la Firma */
        background: rgba(255, 255, 255, 0.04) !important; 
        border: 1px solid rgba(0, 188, 212, 0.18) !important; /* 🌐 SINCRO CIAN LÁSER CORPORATIVO */
        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 tu tono Azul STE unificado de la corporación */
    .main-nav .quick-btn-mob i {
        color: #00bcd4 !important; /* 🌐 SINCRO AZUL STE */
        text-shadow: 0 0 5px rgba(0, 188, 212, 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(0, 188, 212, 0.15) !important; 
        border-color: #00bcd4 !important;               
        box-shadow: 0 0 12px rgba(0, 188, 212, 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: #00bcd4 !important; /* 🌐 SINCRO AZUL STE CORPORATIVO */          
        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 AZUL STE DE ALTA CONVERSIÓN */
    .main-nav .btn-quote-adaptive {
        padding: 8px 16px !important;
        font-size: 0.65rem !important;
        background: linear-gradient(135deg, #00bcd4 0%, #00e5ff 100%) !important; 
        border-radius: 6px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 4px 12px rgba(0, 188, 212, 0.3) !important;
    }

    /* Modifica el icono para que resalte en negro sobre la base cian de alta conversión */
    .main-nav .btn-quote-adaptive i {
        color: #111111 !important;
    }

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

    .main-nav .btn-quote-adaptive .quote-text-mob {
        display: inline !important;          
        color: #111111 !important;
        font-weight: 700 !important;
    }

    /* ?? PERSIANA MÓVIL INTERACTIVA CON TRASFONDO OSCURO CYBER */
    .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(11, 22, 34, 0.98) !important; /* Trasfondo oscuro unificado de la firma */
        border-bottom: 3px solid #00bcd4 !important; /* 🌐 SINCRO AZUL STE */  
        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 (INDEX) - REPARADO
       ---------------------------------------------------------------------- */
    /* 🛠️ SOLUCIÓN MAESTRA: En el index, la persiana móvil por defecto DEBE estar oculta */
    .main-nav .nav-links {
        display: none !important; /* Mantiene el menú herméticamente guardado en reposo */
        flex-direction: column !important;
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        width: 100% !important;
        background: rgba(11, 22, 34, 0.98) !important; /* Fondo cyber-oscuro traslúcido */
        border-bottom: 3px solid #00bcd4 !important; /* Filamento inferior en Azul STE */
        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;
    }

    /* 🟢 ACTIVACIÓN POR HARDWARE: Cuando el JS inyecta la clase .active, la persiana se despliega con Flex */
    .main-nav .nav-links.active {
        display: flex !important; 
    }

    /* 🛠️ SINCRO INDEX: Remueve los enlaces redundantes o duplicados en smartphones para optimizar espacio */
    .main-nav .nav-links > li > a[href="#servicios"] {
        display: none !important;
    }

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

    /* Cancela de raíz cualquier herencia de caja flotante absoluta de PC en los subenlaces */
    .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;
    }

    /* 📱 DISEÑO DE BOTONES DE PANEL TÁCTIL INDEPENDIENTES CON ALINEACIÓN IZQUIERDA */
    .main-nav .nav-links .dropdown-menu li a {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important; /* Fuerza a los renglones largos a alinearse firmes a la izquierda */
        width: 100% !important;
        padding: 12px 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;
        -webkit-tap-highlight-color: transparent !important;
    }

    /* Respuesta háptica de iluminación instantánea al presionar con el pulgar en el celular */
    .main-nav .nav-links .dropdown-menu li a:active {
        background: rgba(0, 188, 212, 0.20) !important; /* Destello en el Azul STE Corporativo */
        border-color: #00bcd4 !important;
        box-shadow: 0 0 15px rgba(0, 188, 212, 0.3) !important;
        padding-left: 25px !important; /* Desplazamiento cinético indicativo de pulsación táctil */
    }

     /* ----------------------------------------------------------------------
       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,
    .process-grid.columns-three {
        grid-template-columns: 1fr !important; 
        gap: 15px !important;
    }

    /* SINCRONIZACIÓN ERGONÓMICA Y CONTROL DE ALTURAS ASIMÉTRICAS DE MARCAS */
    /* 🛠️ SINCRO TOTAL: Modificado para inmunizar la clase elástica de 5 columnas (.grid-five-columns) de tu HTML de marcas aliadas */
    .brands-grid,
    .brands-grid.grid-five-columns {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important; /* Cuadrícula exacta de 2 columnas en teléfonos */
        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 o ítem de la grilla */
    .brands-grid li,
    .brands-grid .brand-card,
    .brands-grid .brand-item {
        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, subtítulos de las marcas, negritas y spans de la grilla */
    .brands-grid li h3,
    .brands-grid li p,
    .brands-grid .brand-card h3,
    .brands-grid .brand-card p,
    .brands-grid .brand-item strong,
    .brands-grid .brand-item span {
        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) >>> */