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

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

/* ==========================================================================
   2. FRANJA 2 NEGRA: NAVEGACIÓN CORPORATIVA SINCRONIZADA (PC ESCRITORIO)
   ========================================================================== */
.main-nav {
    background-color: var(--negro-nav, #111111);
    position: sticky;
    top: 0;
    z-index: 1000;
    /* Filamento láser en amarillo voltio unificado de la división de electricidad */
    border-bottom: 2px solid rgba(255, 234, 0, 0.4); 
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 10px 0;
}

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

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

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

    /* ARQUITECTURA DEL PANEL CONTENEDOR EN CRISTAL (SINCRO CON EL INDEX): */
    display: flex !important;
    align-items: center !important;
    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 eléctrico y el texto */
    padding: 8px 18px !important;         /* Colchón interno que moldea la forma de la pastilla */
    border-radius: 8px !important;        /* Esquinas suavizadas de la caja */
    
    /* Trasfondo oscuro de pozo traslúcido sutil al 3% */
    background: rgba(255, 255, 255, 0.03) !important; 
    
    /* Bordesito con filamento láser en acabado Amarillo Voltio al 15% */
    border: 1px solid rgba(255, 234, 0, 0.15) !important; 
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* Los iconos base de la barra brillan en el amarillo voltio industrial */
.main-nav .nav-links-pc li a i {
    color: #ffea00 !important; 
    font-size: 1.05rem !important;
    transition: all 0.25s ease !important;
    text-shadow: 0 0 5px rgba(255, 234, 0, 0.3) !important;
}

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

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

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

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

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

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

.main-nav .nav-links-pc .dropdown-menu li a {
    color: #ffffff !important;
    padding: 12px 20px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    font-size: 0.9rem !important;
    text-transform: none !important; 
    font-weight: 500 !important;
    
    /* Mantiene el fondo limpio y remueve 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-pc .dropdown-menu li a:hover {
    background-color: rgba(255, 255, 255, 0.04) !important;
    color: #ffea00 !important;
    transform: none !important; /* Desactiva el salto vertical del hover padre en los sub-enlaces */
}

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

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

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

/* ==========================================================================
   3. FRANJA 3 INTERNA: HERO ACABADO COBRE INDUSTRIAL Y ENERGÍA VIVA (PC)
   ========================================================================== */
.main-wrapper .hero-blue {
    /* Efecto metalizado trilineal basado en el tono Cobre de Automatización y Oro Eléctrico de tu PDF */
    background-image: 
        /* Capa 1: Reflejo e iluminación de placa de aluminio/cobre pulido */
        linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(0, 0, 0, 0.25) 100%),
        /* Capa 2: Degradado base de Cobre Forjado a Oro Eléctrico y Carbón de Potencia */
        linear-gradient(135deg, #d35400 0%, #f39c12 50%, #1a252f 100%) !important;
    background-blend-mode: overlay !important;
    padding: 37px 0 !important;
    text-align: center !important;
    color: #ffffff !important;
    position: relative !important;
    overflow: hidden !important;
    /* Línea de acento inferior en un tono bronce forjado pesado para cerrar el chasis de potencia */
    border-bottom: 5px solid #6e2c00 !important; 
    box-shadow: inset 0 -10px 25px rgba(0, 0, 0, 0.35) !important;
}

/* --- 3.1 MARCA DE AGUA: DESCARGA DE RAYO EN ZIGZAG DE ALTA TENSIÓN --- */
.main-wrapper .hero-blue::after {
    content: "" !important;
    position: absolute !important;
    bottom: 0 !important;
    right: 40px !important; /* Posicionado fijamente a la derecha igual al engranaje */
    width: 200px !important; /* Ancho fijo para que el rayo no se estire horizontalmente */
    height: 100% !important;
    /* Geometría angular precisa extraída de tu PDF eléctrico que forma el quiebre de un rayo */
    background-image: 
        /* Trazo superior diagonal del rayo */
        linear-gradient(120deg, transparent 46%, rgba(255, 255, 255, 0.12) 47%, rgba(255, 255, 255, 0.12) 53%, transparent 54%),
        /* Trazo inferior invertido que completa el zigzag */
        linear-gradient(30deg, transparent 46%, rgba(255, 255, 255, 0.12) 47%, rgba(255, 255, 255, 0.12) 53%, transparent 54%),
        /* Líneas horizontales de sobretensión de fondo */
        linear-gradient(0deg, transparent 40%, rgba(255, 255, 255, 0.04) 41%, rgba(255, 255, 255, 0.04) 59%, transparent 60%) !important;
    /* Tamaños controlados en píxeles fijos para evitar deformaciones del navegador */
    background-size: 200px 90px, 200px 90px, 200px 20px !important;
    background-position: top 10px center, top 95px center, center !important;
    background-repeat: no-repeat, no-repeat, repeat-y !important;
    pointer-events: none !important;
    z-index: 1 !important;
    opacity: 0.85 !important;
}

/* --- 3.2 DETALLE EXTRA: SÍMBOLO INTERNACIONAL DE PUESTA A TIERRA (GROUND) --- */
.main-wrapper .hero-blue::before {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    right: 260px !important; /* Colocado al lado izquierdo del rayo para que no se encimen */
    width: 40px !important;
    height: 45px !important;
    /* 4 líneas puras de tu PDF que dibujan de forma exacta el símbolo de puesta a tierra */
    background-image: 
        /* Línea vertical central (Varilla/Electrodo de cobre) */
        linear-gradient(90deg, transparent 44%, rgba(255, 255, 255, 0.15) 45%, rgba(255, 255, 255, 0.15) 55%, transparent 56%),
        /* Primera barra horizontal superior (Más ancha) */
        linear-gradient(90deg, rgba(255, 255, 255, 0.15) 100%, transparent 0%),
        /* Segunda barra horizontal intermedia (Mediana) */
        linear-gradient(90deg, rgba(255, 255, 255, 0.12) 100%, transparent 0%),
        /* Tercera barra horizontal inferior (Pequeña) */
        linear-gradient(90deg, rgba(255, 255, 255, 0.1) 100%, transparent 0%) !important;
    /* Distribución y escala fija de las tres barras descendentes del símbolo ground */
    background-size: 4px 30px, 40px 4px, 26px 4px, 12px 4px !important;
    background-position: center top, center top 6px, center top 16px, center top 26px !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;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.6) !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: #fef5e7 !important; /* Tono blanco crema/cobre ultra-suave de tu PDF de ingeniería */
    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 - ELECTRICIDAD)
   ========================================================================== */
/* Dirección global de rejilla y proporciones asimétricas para las filas en PC */
.services-list .service-row {
    display: grid !important;
    grid-template-columns: 1.10fr 0.90fr; /* Proporción calibrada de expansión de texto */
    gap: 40px;
    margin-bottom: 60px;
    align-items: center;
}

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

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

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

/* --- 4.2 CAJA DE VIÑETAS TÉCNICAS CON CHECKS (EMPAQUETADO MODULAR COINCIDENTE) --- */
/* 🛠️ AJUSTE DE COINCIDENCIA MÁXIMA: Modificado el selector madre para acoplarse 
   milimétricamente a tu nuevo HTML unificado donde la lista está fuera de .service-text */
.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-list .service-row .service-features li {
    font-size: 15px;
    line-height: 1.2;
    padding-right: 5px !important; 
}

/* ==========================================================================
   4.3 MÓDULO: CONTROL DE EQUILIBRIO EN ZIGZAG (ELIMINADO EL ESTIRAMIENTO MASIVO)
   ========================================================================== */
/* 1. FILAS NORMALES (Texto a la izquierda, Fotos a la derecha) - Aplica a Bloques 1, 3 y 4 en tu HTML */
.services-list .service-row:not(.reverse) .tech-intro-box,
.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-list .service-row.reverse .tech-intro-box,
.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-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-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-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-list .service-row .service-images img:hover {
    transform: scale(1.05) !important;
    /* ⚡ SINCRO: Destello perimetral sintonizado al Amarillo Voltio Eléctrico */
    box-shadow: 0 15px 30px rgba(255, 234, 0, 0.25) !important; 
    z-index: 5 !important;
}

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

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

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

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

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

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

/* ==========================================================================
   5. SEPARADOR TEMÁTICO: CIRCUITO DE CONECTIVIDAD ELÉCTRICA (PC GENERAL)
   ========================================================================== */
/* Chasis común del divisor extendido a lo ancho de las dos columnas de la retícula */
.electricity-circuit-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: 52px !important;       /* Altura unificada con el chasis industrial de la web */
}

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

/* --- 5.1 FILAMENTO DE CONDUCCIÓN EXTENDIDO HACIA LOS NODOS --- */
.electricity-circuit-divider .divider-tapered-line {
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    width: 100% !important;
    height: 2px !important;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(30, 41, 59, 0.2) 10%,
        rgba(30, 41, 59, 1) 42%, 
        transparent 43%, 
        transparent 57%, 
        rgba(30, 41, 59, 1) 58%, 
        rgba(30, 41, 59, 0.2) 90%, 
        transparent 100%
    ) !important;
    transform: translateY(-50%) !important;
    z-index: 1 !important;
}

/* --- 5.2 CONTENEDOR CENTRAL: CHASIS INDUSTRIAL ACABADO CROMO Y DORADO --- */
.electricity-circuit-divider .circuit-node-container {
    position: relative !important;
    z-index: 2 !important;
    width: 52px !important;
    height: 52px !important;
    background: linear-gradient(135deg, #ffffff 0%, #cbd5e1 50%, #94a3b8 100%) !important;
    border: 3px solid #f5b041 !important; /* Anillo perimetral dorado unificado de la corporación */
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

/* Componentes vectoriales internos (Estado pasivo apagado: Negro Carbón) */
.electricity-circuit-divider .circuit-node-container i {
    position: absolute !important;
    color: #111111 !important; 
    transition: color 0.2s ease, filter 0.2s ease, transform 0.3s ease !important;
    will-change: transform, filter;
}

/* Nodo Principal (Centro geométrico unificado) */
.electricity-circuit-divider .circuit-node-container .node-main {
    font-size: 18px !important;
    top: auto !important;
    left: auto !important;
}

/* Nodo Secundario Acoplado (Estación de Carga perimetral) */
.electricity-circuit-divider .circuit-node-container .node-sub {
    font-size: 30px !important; 
    top: auto !important;
    left: auto !important;
    opacity: 0.3; /* Atenuado en reposo */
}

/* ==========================================================================
   5.3 INTERACCIONES CINÉTICAS ADAPTATIVAS (HOVER PC ESCRITORIO)
   ========================================================================== */
/* Al pasar el cursor, el chasis circular reacciona con la elasticidad de la plantilla unificada */
.electricity-circuit-divider:hover .circuit-node-container {
    transform: scale(1.08) !important;
}

/* Encendido e iluminación completa de los componentes en tu Amarillo Voltio Eléctrico */
.electricity-circuit-divider:hover .circuit-node-container i {
    color: #ffea00 !important; 
    filter: drop-shadow(0 0 8px rgba(255, 234, 0, 0.95)) !important;
    opacity: 1 !important;
}

/* El nodo secundario ejecuta un barrido oscilante continuo por hardware */
.electricity-circuit-divider:hover .node-sub {
    animation: pulseCurrent 1.5s ease-in-out infinite alternate !important;
}

/* El nodo principal realiza la pulsación viva de corriente en fase inversa */
.electricity-circuit-divider:hover .node-main {
    animation: pulseCurrent 1.5s ease-in-out infinite alternate-reverse !important;
}

/* --- KEYFRAMES DE PULSACIÓN VIVA DE CORRIENTE POR HARDWARE --- */
@keyframes pulseCurrent {
    0% { transform: scale(0.92); filter: drop-shadow(0 0 2px rgba(255, 234, 0, 0.4)); }
    100% { transform: scale(1.05); filter: drop-shadow(0 0 12px rgba(255, 234, 0, 0.95)); }
}


/* ==========================================================================
   6. CLASIFICACIÓN NOMINAL DE PLACAS DE INGENIERÍA ELÉCTRICA (PC)
   ========================================================================== */

/* --- 6.1 BLOQUE 1: INSTALACIÓN DE TABLEROS ELÉCTRICOS (REPLICADO EXACTO DE ASCENSORES) ----Bloque 1 -----------Bloque 1 ------Bloque 1 --------- */
/* 🛠️ SINCRO TOTAL PC: Redireccionado quirúrgicamente a .bloque-tableros de electricidad */
.services-list .bloque-tableros {
    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/tableros_electricos.webp') !important; /* Tu marca de agua fotográfica real */
    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-list .bloque-tableros .service-text {
    max-width: 600px !important; /* Limita la envoltura completa del texto */
    width: 100% !important;
    justify-self: start !important;
    align-self: flex-start !important;
}

/* ⚡ EMPAQUETADO COMPACTO DEL PÁRRAFO INTRODUCTORIO */
.services-list .bloque-tableros .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-list .bloque-tableros .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 */
/* 🛠️ AJUSTE DE ACOPLE MAESTRO: Selector corregido para capturar la viñeta suelta en la raíz 
   de la cuadrícula, forzándola mediante grid-column a sostener el carril izquierdo en PC */
.services-list .bloque-tableros .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(255, 234, 0, 0.25) !important; /* Sintonizado al Amarillo Voltio de la división */
    border-left: 5px solid #ffea00 !important; /* Haz de acento de alta tensión izquierdo */
    border-radius: 16px !important; 
    padding: 25px !important;
}

/* ⚡ FILAMENTO VERTICAL Y DIODO LED DE ENTRADA (Sincronizado con Electricidad) */
.services-list .bloque-tableros .service-header-flex .service-icon i {
    color: #ffea00 !important; /* Amarillo Voltio Industrial */
    filter: drop-shadow(0 0 10px rgba(255, 234, 0, 0.6)) !important; 
}

.services-list .bloque-tableros .service-header-flex .vertical-divider {
    background-color: #ffea00 !important; 
    box-shadow: 0 0 8px rgba(255, 234, 0, 0.5) !important;
}

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

/* Ajustes de los Checks dentro de las pastillas */
.services-list .bloque-tableros .service-features li i {
    color: #ffea00 !important;
    filter: drop-shadow(0 0 4px rgba(255, 234, 0, 0.7)) !important;
}

/* Forzar que las letras sigan siendo legibles sobre las pastillas blancas */
.services-list .bloque-tableros .service-features li span {
    color: #1e293b !important; /* Grafito oscuro de tu documento */
}

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

.services-list .bloque-tableros .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-list .bloque-tableros .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: MANTENIMIENTO DE PLANTAS ELÉCTRICAS (Zigzag Invertido Calibrado) ---------BLOQUE 2-----------BLOQUE 2----------*/
/* 🛠️ SINCRO TOTAL PC REVERSE: Redireccionado de forma quirúrgica a .bloque-plantas de electricidad */
.services-list .bloque-plantas {
    background-color: #020617 !important; /* Base azul espacial oscuro unificada */
    
    /* 🔌 MARCA DE AGUA INDEPENDIENTE: Fondo de grupos electrógenos y sistemas ATS en Caracas */
    background-image: linear-gradient(135deg, 
        rgba(153, 161, 175, 1) 0%,   
        rgba(125, 133, 145, 0.50) 100%  
    ), url('img/plantas_electricas.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-list .bloque-plantas .service-text {
    max-width: 600px !important; 
    width: 100% !important;
    
    /* 🔌 CLAVE REVERSE: En las filas invertidas, el texto se alinea hacia la derecha de la pantalla */
    justify-self: end !important; 
    align-self: flex-start !important;
}

/* EMPAQUETADO COMPACTO DEL PÁRRAFO INTRODUCTORIO (Clonando tus valores exactos) */
.services-list .bloque-plantas .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-list .bloque-plantas .tech-intro-box p {
    text-align: left !important; 
    color: #e2e8f0 !important; 
}

/* 🔌 SOLUCIÓN PARA LAS VIÑETAS REVERSE: Mueve la lista técnica hacia el carril derecho */
/* 🛠️ AJUSTE DE COINCIDENCIA MÁXIMA: Modificado el selector para capturar la viñeta suelta en la raíz 
   de tu nuevo HTML de potencia, forzándola mediante grid-column: 2 a sostener el carril derecho en PC */
.services-list .bloque-plantas .service-features {
    /* 🔌 OBLIGATORIO EN REVERSE: Fuerza a las pastillas blancas a quedarse en la columna 2 (Derecha) */
    grid-column: 2 !important; 
    
    max-width: 550px !important; 
    width: 100% !important;
    margin-bottom: 30px !important;
    margin-top: -20px !important; /* Tu sintonía fina de pegado vertical */
    margin-left: 0px !important;
    
    /* 🔌 Alínea la caja de viñetas hacia el filo derecho para hacer match con el título */
    justify-self: end !important;
    align-self: flex-start !important;
    
    background: rgba(11, 22, 34, 0.82) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 234, 0, 0.25) !important; /* Sintonizado a tu Amarillo Voltio */
    border-left: 5px solid #ffea00 !important; /* Haz de acento de alta tensión izquierdo */
    border-radius: 16px !important; 
    padding: 25px !important;
}

/* FILAMENTO VERTICAL Y DIODO LED DE ENTRADA (Sincronizado) */
.services-list .bloque-plantas .service-header-flex .service-icon i {
    color: #ffea00 !important; /* Amarillo de generación eléctrica */
    filter: drop-shadow(0 0 10px rgba(255, 234, 0, 0.6)) !important; 
}

.services-list .bloque-plantas .service-header-flex .vertical-divider {
    background-color: #ffea00 !important; 
    box-shadow: 0 0 8px rgba(255, 234, 0, 0.5) !important;
}

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

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

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

/* 🔌 CAJA CONTENEDORA Y BOTÓN DE COTIZACIÓN EN POSICIÓN REVERSE */
.services-list .bloque-plantas .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 el abanico */
    justify-self: end !important;
}

.services-list .bloque-plantas .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-list .bloque-plantas .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: ANÁLISIS POR TERMOGRAFÍA INFRARROJA (Fila Normal Calibrada) ---------BLOQUE 3-----------BLOQUE 3----------*/
/* 🛠️ SINCRO TOTAL PC NORMAL: Redireccionado quirúrgicamente a .bloque-termografia de electricidad */
.services-list .bloque-termografia {
    background-color: #020618 !important; /* Base azul espacial oscuro unificada */
    
    /* 🌡️ MARCA DE AGUA INDEPENDIENTE: Fondo de escaneo térmico y mantenimiento predictivo en Venezuela */
    background-image: linear-gradient(135deg, 
        rgba(153, 161, 175, 1) 0%,   
        rgba(125, 133, 145, 0.50) 100%  
    ), url('img/termografia_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; /* 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-list .bloque-termografia .service-text {
    max-width: 600px !important; /* Limita la envoltura completa del texto */
    width: 100% !important;
    justify-self: start !important;
    align-self: flex-start !important;
}

/* EMPAQUETADO COMPACTO DEL PÁRRAFO INTRODUCTORIO (Clonando tus valores exactos) */
.services-list .bloque-termografia .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-list .bloque-termografia .tech-intro-box p {
    text-align: left !important; 
    color: #e2e8f0 !important; 
}

/* 🌡️ SOLUCIÓN PARA LAS VIÑETAS: Le ordena a la lista que se meta en la columna izquierda y no se estire abajo */
/* 🛠️ AJUSTE DE COINCIDENCIA MÁXIMA: Selector acoplado a la raíz de tu nuevo HTML unificado de potencia, 
   forzando mediante grid-column: 1 a sostener el carril izquierdo frente a las fotos gemelas */
.services-list .bloque-termografia .service-features {
    grid-column: 1 !important; /* Fuerza a las pastillas blancas a quedarse en la columna 1 (Izquierda) */
    max-width: 550px !important; /* Evita que las pastillas toquen el bloque de fotos */
    width: 100% !important;
    margin-bottom: 30px !important;
    margin-top: -20px !important; /* Tu sintonía fina de pegado vertical */
    margin-left: 0px !important;
    justify-self: start !important;
    align-self: flex-start !important;
    
    background: rgba(11, 22, 34, 0.82) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 234, 0, 0.25) !important; /* Sintonizado a tu Amarillo Voltio */
    border-left: 5px solid #ffea00 !important; /* Haz de acento de alta tensión izquierdo */
    border-radius: 16px !important; 
    padding: 25px !important;
}

/* FILAMENTO VERTICAL Y DIODO LED DE ENTRADA (Sincronizado) */
.services-list .bloque-termografia .service-header-flex .service-icon i {
    color: #ffea00 !important; /* Amarillo voltio predictivo */
    filter: drop-shadow(0 0 10px rgba(255, 234, 0, 0.6)) !important; 
}

.services-list .bloque-termografia .service-header-flex .vertical-divider {
    background-color: #ffea00 !important; 
    box-shadow: 0 0 8px rgba(255, 234, 0, 0.5) !important;
}

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

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

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

/* 🌡️ CAJA CONTENEDORA Y BOTÓN DE COTIZACIÓN (Márgenes Sincronizados de Salida) */
.services-list .bloque-termografia .service-btn-wrapper {
    grid-column: 1 !important; 
    display: block !important;
    margin-top: -15px !important; /* Acople milimétrico de la plantilla maestra */
}

.services-list .bloque-termografia .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-list .bloque-termografia .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: SISTEMAS DE PUESTA A TIERRA (Zigzag Invertido Calibrado) ---------BLOQUE 4-----------BLOQUE 4----------*/
/* 🛠️ SINCRO TOTAL PC REVERSE: Redireccionado de forma quirúrgica a .bloque-tierras de tu HTML unificado */
.services-list .bloque-tierras {
    background-color: #020617 !important; /* Base azul espacial oscuro unificada */
    
    /* ⚡ MARCA DE AGUA INDEPENDIENTE: Fondo de mallas de cobre y pruebas de resistividad de terreno */
    background-image: linear-gradient(135deg, 
        rgba(153, 161, 175, 1) 0%,   
        rgba(125, 133, 145, 0.50) 100%  
    ), url('img/puesta_a_tierra.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-list .bloque-tierras .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 (Clonando tus valores exactos) */
.services-list .bloque-tierras .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-list .bloque-tierras .tech-intro-box p {
    text-align: left !important; 
    color: #e2e8f0 !important; 
}

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

/* 🛠️ SINCRO DE ICONO: FILAMENTO VERTICAL Y DIODO LED DE ENTRADA EN AMARILLO VOLTIO */
.services-list .bloque-tierras .service-header-flex .service-icon i {
    color: #ffea00 !important; /* Amarillo voltio electrodo */
    filter: drop-shadow(0 0 10px rgba(255, 234, 0, 0.6)) !important; 
}

.services-list .bloque-tierras .service-header-flex .vertical-divider {
    background-color: #ffea00 !important; 
    box-shadow: 0 0 8px rgba(255, 234, 0, 0.5) !important;
}

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

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

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

/* ⚡ CAJA CONTENEDORA Y BOTÓN DE COTIZACIÓN EN POSICIÓN REVERSE */
.services-list .bloque-tierras .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 el abanico */
    justify-self: end !important;
}

.services-list .bloque-tierras .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-list .bloque-tierras .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;
}

/* 🛠️ SINCRO DE SEPARADOR CIRCUITAL AL FINAL ABSOLUTO DE LA FILA EN PC */
.services-list .bloque-tierras .electricity-circuit-divider {
    grid-column: span 2 !important; /* Se extiende a lo ancho de las dos columnas de la retícula */
    width: 100% !important;
    margin-top: -20px !important; 
    margin-bottom: -20px !important; 
}


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

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

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

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

/* ==========================================================================
   8. BOTÓN FLOTANTE INDEPENDIENTE "PB" (EN AMARILLO VOLTIO DE ALTA TENSIÓN)
   ========================================================================== */
/* 🛠️ SINCRO TOTAL PC: Nombre de la clase cambiado a .electricity-btn-back para acoplarse 
   a la estructura semántica de tu HTML de potencia y separarse de la hoja de ascensores */
.electricity-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);
}

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

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

.electricity-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) --- */
.electricity-btn-back:hover .panel-button {
    border-color: #ffea00; /* Cambio temático sintonizado al Amarillo Voltio de tu división */
    box-shadow: 0 0 20px rgba(255, 234, 0, 0.6), inset 0 1px 3px rgba(255, 255, 255, 0.2);
    transform: translateY(-3px);
}

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

.electricity-btn-back:hover .button-light {
    background-color: #ffea00; /* Luz indicadora LED amarilla voltio activa */
    box-shadow: 0 0 10px #ffea00, 0 0 20px #ffea00;
}

.electricity-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)
   ========================================================================== */
.quote-section h2 {
    text-align: center !important;   /* Fuerza el centrado horizontal absoluto de la frase */
    width: 100% !important;          /* Asegura que ocupe todo el ancho disponible para alinearse */
    margin-left: auto !important;
    margin-right: auto !important;
}





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


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


/* ==========================================================================
   12. MEDIA QUERY: TRANSICIÓN PARA TABLETS EN FORMATO HORIZONTAL (992PX)
   ========================================================================== */
@media (max-width: 992px) {
    /* Reducción de la cuadrícula de servicios y conversión elástica a flujo vertical en tablets */
    .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-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-list .service-row .service-text,
    .services-list .service-row .service-features,
    .services-list .service-row .tech-intro-box {
        max-width: 100% !important;
        width: 100% !important;
    }
    
    /* Adaptación geométrica de las imágenes gemelas en formato tableta */
    .services-list .service-row .service-images {
        width: 100% !important;
        max-width: 500px !important;
        margin: 20px auto !important;
    }

    .services-list .service-row .service-images img {
        height: 240px !important; 
        width: calc(50% - 6px) !important;
        max-width: 50% !important;
    }
    
    /* Ajuste de escala para el Héro de alta tensión en formato tableta */
    .main-wrapper .hero-blue h1 {
        font-size: 2.5rem !important;
    }
    
    .main-wrapper .hero-blue .hero-subtitle {
        font-size: 1.05rem !important;
        max-width: 90% !important;
    }
    
    /* 🦾 SINCRO BOTONES: Alineación centrada del botón de cotización en formato tableta */
    .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 nodo eléctrico no tape los nuevos botones */
    .services-list .electricity-circuit-divider {
        grid-column: span 2 !important;
        width: 100% !important;
        margin-top: 20px !important;
        margin-bottom: 0px !important;
    }

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

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


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

    /* ----------------------------------------------------------------------
       13.1 BOTÓN FLOTANTE INDEPENDIENTE "PB" (RESPUESTA TÁCTIL AMARILLO VOLTIO)
       ---------------------------------------------------------------------- */
    /* 🛠️ SINCRO: Apunta al botón de electricidad unificado de tu HTML */
    .electricity-btn-back {
        position: fixed;
        bottom: 20px !important;
        right: 20px !important;
        z-index: 999;
        display: block;
    }

    .electricity-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 */
    .electricity-btn-back .panel-button::after {
        content: "";
        position: absolute;
        top: -8px; 
        left: -8px; 
        right: -8px; 
        bottom: -8px;
        border-radius: 50%;
        background: rgba(255, 234, 0, 0); /* Sincronizado en Amarillo Voltio Eléctrico */
        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 */
    .electricity-btn-back:active .panel-button::after {
        background: rgba(255, 234, 0, 0.25) !important;
        transform: scale(1.1) !important;
    }

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

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

    /* ----------------------------------------------------------------------
       13.2 FRANJA HERO INTERNA (ADAPTACIÓN ERGONÓMICA ENERGÍA VOLTIO)
       ---------------------------------------------------------------------- */
    body .ads-layout-container .main-wrapper .hero-blue {
        padding: 15px 0 25px 0 !important; 
        /* 🛠️ SINCRO: Enlazado al banner técnico de tableros eléctricos unificado con tu HTML */
        background: linear-gradient(135deg, rgba(17, 24, 39, 0.95) 0%, rgba(22, 34, 57, 0.9) 100%),
                    url('img/tableros_electricos.webp') no-repeat center center !important;
        background-size: cover !important;
    }

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

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

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

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

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

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

    /* ----------------------------------------------------------------------
       13.3 ORDENAMIENTO DE FILAS Y ACOPLE DE ELEMENTOS EN MÓVIL (768PX)
       ---------------------------------------------------------------------- */
    /* Fuerza el comportamiento elástico vertical puro para todas las tarjetas */
    .services-list .service-row {
        display: flex !important;
        flex-direction: column !important; /* Fuerza el apilamiento vertical unificado */
        padding: 25px 15px !important;     /* 🛠️ SINCRO ACCESOS: 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-list .service-row.reverse {
        flex-direction: column !important;
    }

    /* Centrado axial y estiramiento del bloque de texto y títulos */
    .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-list .service-row .service-header-flex {
        justify-content: center !important;
        flex-direction: column !important;
        gap: 10px !important;
    }

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

    .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-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;
        border-top: 4px solid #ffea00 !important; /* 🛠️ SINCRO: Haz de acento superior sintonizado al Amarillo Voltio */
        border-radius: 12px !important;
        box-sizing: border-box !important;
    }

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

    /* 📦 CAJA DE VIÑETAS / PASTILLAS EN MÓVIL */
    .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;
        border-top: 4px solid #ffea00 !important; /* 🛠️ SINCRO: Sincronía perimetral táctil en Amarillo Voltio */
        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-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-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-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 RED EN MÓVIL */
    .services-list .electricity-circuit-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 Nodos eléctricos */
    }

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

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

    /* 🛠️ SINCRO TOTAL: Contenedor general que enmarca tus fotos gemelas con equilibrado al 100% */
    .services-list .service-row .service-images {
        width: 100% !important;
        height: 160px !important; 
        max-width: 100% !important;        /* 🛠️ CORRECCIÓ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;        /* 🛠️ CORRECCIÓN: Elimina el desvío que causaba el corte visual */
        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) --- */
    /* FOTO 1 (Izquierda): Fuerza el centrado axial restando los píxeles perimetrales del vidrio */
    .services-list .service-row .service-images img.img-1.foto-expandida {
        position: fixed !important;        /* Flota sobre el viewport real */
        top: 50% !important;
        left: 50% !important;              /* Clava el punto de anclaje en el centro de la pantalla */
        right: auto !important;
        bottom: auto !important;
        margin-left: 0px !important;       /* Centrado milimétrico corregido sin desvíos en electricidad */
        
        /* TRUCO INDESTRUCTIBLE: Mide el ancho completo del celular y le quita 48px de aire en total */
        width: calc(100vw - 48px) !important;/* Deja exactamente 24px de respiro a los lados */
        height: auto !important; 
        max-height: 70vh !important;       /* Limita el estiramiento vertical en pantallas alargadas */
        object-fit: contain !important; 
        background: transparent !important;
        
        /* Centrado simétrico puro por GPU: el -50% compensa el desfase del left/top */
        transform: translate3d(-50%, -50%, 0) scale(1.05) !important;
        transform-origin: center center !important; 
        z-index: 999999 !important;        /* Capa soberana por encima de la página */
        box-shadow: 0px 20px 50px rgba(0, 0, 0, 0.6) !important;
        border-radius: 14px !important;
    }

    /* FOTO 2 (Derecha): Comportamiento espejo idéntico y centrado para la foto derecha */
    .services-list .service-row .service-images img.img-2.foto-expandida {
        position: fixed !important;        /* Inmunidad contra cajas invertidas reverse */
        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 */
        transform: translate3d(-50%, -50%, 0) scale(1.05) !important;
        transform-origin: center center !important; 
        z-index: 999999 !important;
        box-shadow: 0px 20px 50px rgba(0, 0, 0, 0.6) !important;
        border-radius: 14px !important;
    }

    /* ==========================================================================
       🔐 CONTENEDOR GENERAL - BLOQUE 1: INSTALACIÓN DE TABLEROS ELÉCTRICOS (AUTÓNOMO MÓVIL) ******BLOQUE 1********BLOQUE 1****BLOQUE 1*************
       ========================================================================= */
    /* 🛠️ SINCRO TOTAL: Apunta a tu contenedor de electricidad unificado de tu HTML */
    .services-list .bloque-tableros {
        border-radius: 16px !important;
        margin-bottom: 40px !important;
        display: flex !important;
        flex-direction: column !important; /* Asegura el flujo vertical limpio en smartphones */
        
        /* ⚙️ CONTROL DE ALTURA DE LA TARJETA GENERAL:
           El primer número (25px) es el aire de ARRIBA.
           El segundo número (10px) es el aire de los LATERALES.
           El tercer número (45px) es el aire de ABAJO. ¡Aumenta este 45px si quieres que la tarjeta estire más hacia abajo! */
        padding: 25px 10px 45px 10px !important;   

        /* ⚙️ FONDO DE TARJETA Y COLOR CORPORATIVO:
           Asegura que el contenedor tenga posición 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-list .bloque-tableros::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 de tableros eléctricos unificada en tu HTML */
        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; /* Hace que el dedo ignore el fondo al deslizar la pantalla */
    }

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

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

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

    /* ⚙️ CONTROL DIRECTO DEL DIVISOR DEL BLOQUE 1 (CENTRADO AXIAL INDESTRUCTIBLE Y DESPEGADO) */
    /* 🛠️ SINCRO TOTAL: Re-encaminado a tu divisor unificado de circuitos .electricity-circuit-divider */
    .services-list .bloque-tableros .electricity-circuit-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 los nodos */
        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-list .bloque-tableros .electricity-circuit-divider .circuit-node-container {
        margin-left: auto !important;
        margin-right: auto !important;
        float: none !important;
    }

    /* ==========================================================================
       🔐 CONTENEDOR GENERAL - BLOQUE 2: MANTENIMIENTO DE PLANTAS ELÉCTRICAS (INMUNIZADO Y CENTRADO) ******BLOQUE 2********BLOQUE 2****BLOQUE 2**************
       ========================================================================== */
    /* 🛠️ SINCRO TOTAL: Apunta a tu contenedor de plantas eléctricas unificado de tu HTML */
    .services-list .bloque-plantas {
        border-radius: 16px !important;
        margin-bottom: 40px !important;
        display: flex !important;
        flex-direction: column !important; /* Mantiene el flujo vertical limpio */
        
        /* ⚙️ CONTROL DE ALTURA DE LA TARJETA (BLOQUE 2):
           El primer número (25px) es el aire de ARRIBA.
           El segundo y cuarto número (10px) es el aire de los LATERALES.
           El tercer número (45px) es el aire base de ABAJO. ¡Auméntalo si quieres darle más colchón horizontal! */
        padding: 25px 10px 45px 10px !important;

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

    /* ⚙️ MARCA DE AGUA: CONTROL TOTAL DE IMAGEN DE FONDO, COLOR Y OPACIDAD DE FONDO DEL BLOQUE 2 */
    .services-list .bloque-plantas::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 tu imagen de plantas eléctricas para la división de energía. */
        background: url('img/plantas_electricas.webp') no-repeat !important;
        background-size: cover !important; 
        background-position: center center !important;
        opacity: 0.12 !important; 
        pointer-events: none !important; 
    }

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

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

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

    /* ⚙️ CONTROL DIRECTO DEL DIVISOR DEL BLOQUE 2 (CENTRADO AXIAL INDESTRUCTIBLE Y DESPEGADO) */
    /* 🛠️ SINCRO TOTAL: Re-encaminado a tu divisor unificado de circuitos .electricity-circuit-divider */
    .services-list .service-row.reverse.bloque-plantas .electricity-circuit-divider,
    .services-list .bloque-plantas .electricity-circuit-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 los nodos */
        align-items: center !important;
        float: none !important;              /* Rompe de raíz la inercia lateral del reverse */
        
        /* TRUCO LÁSER: Fuerza al navegador móvil a equilibrar los orillos e ignora el sabotaje de la sección 13.3 */
        margin: 0 auto !important;
        margin-top: 25px !important;         /* Separa el chasis del botón de cotizar de arriba */
        margin-bottom: 15px !important;      /* Separa 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-list .service-row.reverse.bloque-plantas .electricity-circuit-divider .circuit-node-container,
    .services-list .bloque-plantas .electricity-circuit-divider .circuit-node-container {
        margin-left: auto !important;
        margin-right: auto !important;
        float: none !important;
    }

    /* ==========================================================================
       🔐 CONTENEDOR GENERAL - BLOQUE 3: ANÁLISIS POR TERMOGRAFÍA INFRARROJA (INMUNIZADO Y CENTRADO) ******BLOQUE 3********BLOQUE 3****BLOQUE 3**************
       ========================================================================== */
    /* 🛠️ SINCRO TOTAL: Apunta a tu contenedor de termografía avanzada unificado de tu HTML */
    .services-list .bloque-termografia {
        border-radius: 16px !important;
        margin-bottom: 40px !important;
        display: flex !important;
        flex-direction: column !important; /* Mantiene el flujo vertical limpio */

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

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

    /* ⚙️ MARCA DE AGUA: CONTROL TOTAL DE IMAGEN DE FONDO, COLOR Y OPACIDAD DE FONDO DEL BLOQUE 3 */
    .services-list .bloque-termografia::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 tu imagen de termografía infrarroja para mantenimiento predictivo. */
        background: url('img/termografia_caracas.webp') no-repeat !important;
        background-size: cover !important; 
        background-position: center center !important;
        opacity: 0.12 !important; 
        pointer-events: none !important; 
    }

    /* ⚙️ CAJA DE PÁRRAFOS: Alineación Absoluta y Centrada del Párrafo del Bloque 3 */
    .services-list .bloque-termografia .tech-intro-box,
    .services-list .bloque-termografia .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 amarillo voltio */
        padding-right: 10px !important;      
        border-radius: 8px !important;       
        float: none !important;              
    }

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

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

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

    /* ⚙️ CONTROL DIRECTO DEL DIVISOR DEL BLOQUE 3 (CENTRADO AXIAL INDESTRUCTIBLE Y DESPEGADO) */
    /* 🛠️ SINCRO TOTAL: Re-encaminado a tu divisor unificado de circuitos .electricity-circuit-divider */
    .services-list .bloque-termografia .electricity-circuit-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 los nodos */
        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 al medio */
    .services-list .bloque-termografia .electricity-circuit-divider .circuit-node-container {
        margin-left: auto !important;
        margin-right: auto !important;
        float: none !important;
    }

    /* ==========================================================================
       🔐 CONTENEDOR GENERAL - BLOQUE 4: SISTEMAS DE PUESTA A TIERRA (INMUNIZADO Y CENTRADO) ******BLOQUE 4********BLOQUE 4****BLOQUE 4**************
       ========================================================================== */
    /* 🛠️ SINCRO INTEGRAL: Creado en espejo bajo la misma matriz geométrica de los bloques anteriores */
    .services-list .bloque-tierras {
        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):
           El primer número (25px) es el aire de ARRIBA.
           El segundo y cuarto número (10px) es el aire de los LATERALES.
           El tercer número (45px) es el aire base de ABAJO. */
        padding: 25px 10px 45px 10px !important;

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

    /* ⚙️ MARCA DE AGUA: CONTROL TOTAL DE IMAGEN DE FONDO, COLOR Y OPACIDAD DE FONDO DEL BLOQUE 4 */
    .services-list .bloque-tierras::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 tu imagen técnica de puesta a tierra y medición óhmica. */
        background: url('img/puesta_a_tierra.webp') no-repeat !important;
        background-size: cover !important; 
        background-position: center center !important;
        opacity: 0.12 !important; 
        pointer-events: none !important; 
    }

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

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

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

    /* ⚙️ CONTROL DIRECTO DEL DIVISOR DEL BLOQUE 4 (CENTRADO AXIAL INDESTRUCTIBLE Y DESPEGADO) */
    /* 🛠️ SINCRO TOTAL: Activado el circuito con el mismo truco láser elástico de las tarjetas anteriores */
    .services-list .service-row.reverse.bloque-tierras .electricity-circuit-divider,
    .services-list .bloque-tierras .electricity-circuit-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 los nodos */
        align-items: center !important;
        float: none !important;              /* Rompe de raíz la inercia lateral del reverse */
        
        /* TRUCO LÁSER: Fuerza al navegador móvil a equilibrar los orillos e ignora el sabotaje de la sección 13.3 */
        margin: 0 auto !important;
        margin-top: 25px !important;         /* Separa el chasis del botón de cotizar de arriba */
        margin-bottom: 15px !important;      /* Separa 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-list .service-row.reverse.bloque-tierras .electricity-circuit-divider .circuit-node-container,
    .services-list .bloque-tierras .electricity-circuit-divider .circuit-node-container {
        margin-left: auto !important;
        margin-right: auto !important;
        float: none !important;
    }

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

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

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

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

    /* ----------------------------------------------------------------------
       13.5 CONFIGURACIÓN DE LA BARRA DE NAVEGACIÓN MÓVIL (EDICIÓN ELÉCTRICA)
       ---------------------------------------------------------------------- */
    .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 Amarillo Voltio Eléctrico */
        background: rgba(255, 255, 255, 0.04) !important; 
        border: 1px solid rgba(255, 234, 0, 0.18) !important; 
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2) !important;
        transition: all 0.2s ease-in-out !important;
    }

    /* Enciende los íconos internos con tu tono Amarillo Voltio unificado de la división */
    .main-nav .quick-btn-mob i {
        color: #ffea00 !important; 
        text-shadow: 0 0 5px rgba(255, 234, 0, 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(255, 234, 0, 0.15) !important; 
        border-color: #ffea00 !important;               
        box-shadow: 0 0 12px rgba(255, 234, 0, 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: #ffea00 !important;           
        font-size: 26px !important;
        margin: 0 !important;
        padding: 5px 10px !important;
        cursor: pointer !important;
        -webkit-tap-highlight-color: transparent !important;
    }

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

    /* Modifica el icono para que resalte en negro sobre la base dorada/amarilla 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 división */
        border-bottom: 3px solid #ffea00 !important;   
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6) !important;
        padding: 15px !important;
        gap: 12px !important;
        box-sizing: border-box !important;
        z-index: 999999 !important;                    
    }

    /* ----------------------------------------------------------------------
       13.6 FILTROS DE VISIBILIDAD Y PERSIANA DE SERVICIOS CONTINUA (ELECTRICIDAD)
       ---------------------------------------------------------------------- */
    /* 🛠️ SINCRO TOTAL: Modificado para apuntar a la ruta e inicio del ecosistema eléctrico */
    .main-nav .nav-links > li > a[href="#servicios"],
    .main-nav .nav-links > li > a[href="electricidad.html"],
    .main-nav .nav-links > li > a[href="#inicio"],
    .main-nav .nav-links > li > a[href="#contacto"] {
        display: none !important;
    }

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

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

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

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

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

    /* ----------------------------------------------------------------------
       13.8 ADAPTACIÓN ADICIONAL PARA LAS NUEVAS SECCIONES MODULARES EN SMARTPHONES
       ---------------------------------------------------------------------- */
    /* Despliegue en columna única vertical para las fases del proceso de ingeniería */
    .process-grid,
    .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) >>> */