/* ==========================================================================
   1. CONFIGURACIÓN MODULAR GENERAL (PC BASE) - DIVISION DE ACCESOS
   ========================================================================== */
.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 azul ciberseguridad neón unificado de la división */
    border-bottom: 2px solid rgba(0, 240, 255, 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 CORREGIDOS: Alineación firme hacia el filo izquierdo */
.main-nav .nav-links-pc li a {
    color: #ffffff !important;
    text-decoration: none !important;
    font-size: 0.85rem !important;        /* 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; /* ??? CORRECCIÓN CLAVE: Clava el texto e icono a la izquierda de la pastilla */
    gap: 10px !important;                 /* Separación exacta entre el icono biométrico 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 Azul Neón al 15% */
    border: 1px solid rgba(0, 240, 255, 0.15) !important; 
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* Los iconos base de la barra brillan en el azul biométrico industrial */
.main-nav .nav-links-pc li a i {
    color: #00f0ff !important; 
    font-size: 1.05rem !important;
    transition: all 0.25s ease !important;
    text-shadow: 0 0 5px rgba(0, 240, 255, 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(0, 240, 255, 0.12) !important;   /* El panel se inunda del azul ciberseguridad corporativo */
    border-color: #00f0ff !important;                 /* El bordesito pasa a azul neón brillante pleno */
    box-shadow: 0 0 20px rgba(0, 240, 255, 0.35) !important;
    transform: translateY(-2px) !important;           /* Micro-elevación mecánica de resorte */
}

.main-nav .nav-links-pc li a:hover i {
    color: #00f0ff !important; 
    /* Brillo de panel digital texturizado intensificado al pasar el mouse */
    text-shadow: 0 0 12px rgba(0, 240, 255, 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: #00f0ff !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: #00f0ff !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 AZUL CIBERSEGURIDAD Y BLINDAJE DIGITAL (PC)
   ========================================================================== */
.main-wrapper .hero-blue {
    /* Efecto metalizado trilineal basado en el tono Azul Ciberseguridad Neón #00f0ff */
    background-image: 
        /* Capa 1: Reflejo e iluminación de placa de aluminio pulido */
        linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(0, 0, 0, 0.2) 100%),
        /* Capa 2: Degradado base de Azul Energía Biométrica a un profundo Gris Carbón Blindado */
        linear-gradient(135deg, #00f0ff 0%, #0072ff 50%, #1a1c1e 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 cobalto oscuro para cerrar el chasis de seguridad */
    border-bottom: 5px solid #002b47 !important; 
    box-shadow: inset 0 -10px 25px rgba(0, 0, 0, 0.35) !important;
}

/* --- 3.1 MARCA DE AGUA: MATRIZ GEOMÉTRICA DE FLUJO Y ESCUDO DE PROTECCIÓN --- */
.main-wrapper .hero-blue::after {
    content: "" !important;
    position: absolute !important;
    bottom: -15px !important;
    right: 50px !important;
    width: 260px !important;
    height: 100% !important;
    /* Estructura lineal pura que simula haces láser horizontales de escaneo y contornos de blindaje */
    background-image: 
        /* Filamentos paralelos continuos de escaneo infrarrojo o haces láser ópticos */
        linear-gradient(90deg, rgba(255, 255, 255, 0.06) 0px, rgba(255, 255, 255, 0.06) 1px, transparent 1px),
        /* Retícula de celdas de servidores o matriz de datos biométricos */
        linear-gradient(0deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        /* Líneas angulares de contención simétrica que configuran un chasis heráldico */
        linear-gradient(45deg, transparent 48%, rgba(255, 255, 255, 0.05) 49%, rgba(255, 255, 255, 0.05) 51%, transparent 52%),
        linear-gradient(-45deg, transparent 48%, rgba(255, 255, 255, 0.05) 49%, rgba(255, 255, 255, 0.05) 51%, transparent 52%) !important;
    /* Configuración de rejilla digital micro-espaciada de alta definición */
    background-size: 20px 100%, 100% 20px, 100% 60px, 100% 60px !important;
    background-position: left center, top center, center, center !important;
    background-repeat: repeat-x, repeat-y, repeat-y, repeat-y !important;
    pointer-events: none !important;
    transform: none !important; /* Mantiene las trazas perfectamente rectas para simular un panel tecnológico rígido */
    z-index: 1 !important;
    opacity: 0.75 !important;
}

/* --- 3.2 DETALLE EXTRA: NÚCLEO BIOMÉTRICO O LENTE DE ENFOQUE ÓPTICO CCTV --- */
.main-wrapper .hero-blue::before {
    content: "" !important;
    position: absolute !important;
    top: 40px !important;
    right: 340px !important;
    width: 35px !important;
    height: 35px !important;
    /* Dibujo lineal de un lente de cámara cuadrada o nodo receptor de radiofrecuencia (RFID) */
    border: 2px solid rgba(255, 255, 255, 0.04) !important;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 30%, transparent 31%) !important;
    pointer-events: none !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: #e6faff !important; /* Tono blanco cian ultra-suave para máxima legibilidad sobre el gradiente neón */
    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 - ACCESOS)
   ========================================================================== */
/* 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) --- */
.service-text .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;
}

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

/* ==========================================================================
   4.3 MÓDULO: CONTROL DE EQUILIBRIO EN ZIGZAG (ELIMINADO EL ESTIRAMIENTO MASIVO)
   ========================================================================== */
/* 1. FILAS NORMALES (Texto a la izquierda, Fotos a la derecha) - Aplica a Bloques 1 y 3 */
.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 y 3 */
.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;
    box-shadow: 0 15px 30px rgba(86, 200, 192, 0.25) !important; 
    z-index: 5 !important;
}

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

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

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

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

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

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



/* ==========================================================================
   5. SEPARADOR TEMÁTICO: ESCUDO DE BLINDAJE DIGITAL CON LÍNEA LÁSER (PC)
   ========================================================================== */
/* Chasis común del divisor extendido a lo ancho de las dos columnas de la retícula */
.access-shield-divider {
    grid-column: span 2 !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    margin: 45px auto !important;  
    height: 50px !important;
}

/* Sintonía fina de pegado vertical unificado para toda la lista de servicios */
.services-list .access-shield-divider {
    margin-top: -20px !important;
    margin-bottom: -20px !important;
}

/* --- 5.1 FILAMENTO DE ESCANEO EXTENDIDO AL CENTRO ÓPTICO --- */
.access-shield-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 --- */
.access-shield-divider .shield-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 */
    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) */
.access-shield-divider .shield-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;
}

/* Escudo Principal (Centrado axial por hardware) */
.access-shield-divider .shield-node-container .shield-main {
    font-size: 18px !important;
    top: auto !important;
    left: auto !important;
}

/* Recuadro de Enfoque Láser / Marco perimetral óptico */
.access-shield-divider .shield-node-container .laser-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 ascensores */
.access-shield-divider:hover .shield-node-container {
    transform: scale(1.08) !important;
}

/* Encendido láser completo de los componentes en tu Azul Ciberseguridad Neón */
.access-shield-divider:hover .shield-node-container i {
    color: #00f0ff !important; 
    filter: drop-shadow(0 0 8px rgba(0, 240, 255, 0.95)) !important;
    opacity: 1 !important;
}

/* El recuadro de enfoque ejecuta un barrido oscilante por hardware */
.access-shield-divider:hover .laser-sub {
    animation: scanLaser 1.5s ease-in-out infinite alternate !important;
}

/* El escudo heráldico realiza el pulso de verificación en fase inversa */
.access-shield-divider:hover .shield-main {
    animation: scanLaser 1.5s ease-in-out infinite alternate-reverse !important;
}

/* --- KEYFRAMES DE BARRIDO LÁSER ÓPTICO POR HARDWARE --- */
@keyframes scanLaser {
    0% { transform: scale(0.92); filter: drop-shadow(0 0 2px rgba(0, 240, 255, 0.4)); }
    100% { transform: scale(1.05); filter: drop-shadow(0 0 12px rgba(0, 240, 255, 0.95)); }
}

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

/* Encendido láser completo de los componentes en Azul Ciberseguridad Neón unificado */
.access-shield-divider:hover .shield-node-container i {
    color: #00f0ff !important; 
    filter: drop-shadow(0 0 8px rgba(0, 240, 255, 0.95)) !important;
    opacity: 1 !important;
}

/* El recuadro de enfoque ejecuta un barrido oscilante por hardware */
.access-shield-divider:hover .laser-sub {
    animation: scanLaser 1.5s ease-in-out infinite alternate !important;
}

/* El escudo heráldico realiza el pulso de verificación en fase inversa */
.access-shield-divider:hover .shield-main {
    animation: scanLaser 1.5s ease-in-out infinite alternate-reverse !important;
}

/* --- KEYFRAMES DE BARRIDO LÁSER ÓPTICO POR HARDWARE --- */
@keyframes scanLaser {
    0% { transform: scale(0.92); filter: drop-shadow(0 0 2px rgba(0, 240, 255, 0.4)); }
    100% { transform: scale(1.05); filter: drop-shadow(0 0 12px rgba(0, 240, 255, 0.95)); }
}

/* ==========================================================================
   6. CLASIFICACIÓN NOMINAL DE PLACAS DE SEGURIDAD ELECTRÓNICA (PC)
   ========================================================================== */

/* --- 6.1 BLOQUE 1: CONTROL DE ACCESO BIOMÉTRICO (REPLICADO EXACTO DE ASCENSORES) --- */
.services-list .bloque-biometria {
    background-color: #020618 !important; /* Base azul noche profundo unificada */
    background-image: linear-gradient(135deg, 
        rgba(153, 161, 175, 1) 0%,   
        rgba(125, 133, 145, 0.50) 100%  
    ), url('img/acceso_biometrico.webp') !important; /* Tu marca de agua específica */
    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-biometria .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-biometria .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-biometria .tech-intro-box p {
    text-align: left !important; 
    color: #e2e8f0 !important; /* Platino de alto contraste */
}

/* 🔐 SOLUCIÓN PARA LAS VIÑETAS: Panel de Cristal Líquido Oscuro sobre la lista */
.services-list .bloque-biometria .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 */
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(0, 240, 255, 0.25) !important; /* Ajustado a tu Azul Neón */
    border-left: 5px solid #00f0ff !important; /* Haz de acento biométrico izquierdo */
    border-radius: 16px !important; 
    padding: 25px !important;
}

/* 🔐 FILAMENTO VERTICAL Y DIODO LED DE ENTRADA (Sincronizado con Accesos) */
.services-list .bloque-biometria .service-header-flex .service-icon i {
    color: #00f0ff !important; /* Azul Energía Biométrica */
    filter: drop-shadow(0 0 10px rgba(0, 240, 255, 0.6)) !important; 
}

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

/* Título Principal de la Cabecera */
.services-list .bloque-biometria .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-biometria .service-features li i {
    color: #00f0ff !important;
    filter: drop-shadow(0 0 4px rgba(0, 240, 255, 0.7)) !important;
}

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

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

.services-list .bloque-biometria .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 */
    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-biometria .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: INSTALACIÓN DE CÁMARAS Y CCTV (Zigzag Invertido Calibrado) ---------BLOQUE 2-----------BLOQUE 2----------*/
.services-list .bloque-camaras {
    background-color: #020617 !important; /* Base azul espacial oscuro unificada */
    
    /* 📷 MARCA DE AGUA INDEPENDIENTE: Fondo de videovigilancia fusionado en luminosidad */
    background-image: linear-gradient(135deg, 
        rgba(153, 161, 175, 1) 0%,   
        rgba(125, 133, 145, 0.50) 100%  
    ), url('img/camaras_ascensores.webp') !important; 
    
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
    background-blend-mode: luminosity !important;
    
    border: 0px solid rgba(0, 0, 0, 0.50) !important; 
    border-radius: 30px !important; 
    padding: 35px 35px !important; 
    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-camaras .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-camaras .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-camaras .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-camaras .service-features {
    /* 📷 OBLIGATORIO EN REVERSE: Fuerza a las pastillas blancas a quedarse en la columna 2 (Derecha) */
    grid-column: 2 !important; 
    
    max-width: 550px !important; 
    width: 100% !important;
    margin-bottom: 30px !important;
    margin-top: -20px !important; /* Tu sintonía fina de pegado vertical */
    margin-left: 0px !important;
    
    /* 📷 Alínea la caja de viñetas hacia el filo derecho para hacer match con el título */
    justify-self: end !important;
    align-self: flex-start !important;
    
    background: rgba(11, 22, 34, 0.82) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(0, 240, 255, 0.25) !important; /* Ajustado a tu Azul Neón */
    border-left: 5px solid #00f0ff !important; /* Haz de acento biométrico izquierdo */
    border-radius: 16px !important; 
    padding: 25px !important;
}

/* FILAMENTO VERTICAL Y DIODO LED DE ENTRADA (Sincronizado) */
.services-list .bloque-camaras .service-header-flex .service-icon i {
    color: #00f0ff !important; /* Azul escaneo CCTV */
    filter: drop-shadow(0 0 10px rgba(0, 240, 255, 0.6)) !important; 
}

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

/* Título Principal */
.services-list .bloque-camaras .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-camaras .service-features li i {
    color: #00f0ff !important;
    filter: drop-shadow(0 0 4px rgba(0, 240, 255, 0.7)) !important;
}

.services-list .bloque-camaras .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-camaras .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-camaras .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-camaras .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: CONTROL PEATONAL Y VEHICULAR RFID (Fila Normal Calibrada) ---------BLOQUE 3-----------BLOQUE 3----------*/
.services-list .bloque-vehicular {
    background-color: #020618 !important; /* Base azul espacial oscuro unificada */
    
    /* 🚗 MARCA DE AGUA INDEPENDIENTE: Fondo de antenas RFID y portones automatizados en Venezuela */
    background-image: linear-gradient(135deg, 
        rgba(153, 161, 175, 1) 0%,   
        rgba(125, 133, 145, 0.50) 100%  
    ), url('img/antenas_rfid.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-vehicular .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-vehicular .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-vehicular .tech-intro-box p {
    text-align: left !important; 
    color: #e2e8f0 !important; 
}

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

/* FILAMENTO VERTICAL Y DIODO LED DE ENTRADA (Sincronizado) */
.services-list .bloque-vehicular .service-header-flex .service-icon i {
    color: #00f0ff !important; /* Azul escaneo RFID */
    filter: drop-shadow(0 0 10px rgba(0, 240, 255, 0.6)) !important; 
}

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

/* Título Principal */
.services-list .bloque-vehicular .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-vehicular .service-features li i {
    color: #00f0ff !important;
    filter: drop-shadow(0 0 4px rgba(0, 240, 255, 0.7)) !important;
}

.services-list .bloque-vehicular .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-vehicular .service-btn-wrapper {
    grid-column: 1 !important; 
    display: block !important;
    margin-top: -15px !important; /* Acople milimétrico de PC */
}

.services-list .bloque-vehicular .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-vehicular .service-btn-wrapper .btn-ste-small:hover {
    color: #ffffff !important; 
    background-color: #0097a7 !important; 
    transform: translateY(-2px) !important; 
    box-shadow: 0 8px 20px rgba(0, 188, 212, 0.4) !important;
}




/* ==========================================================================
   7. FIJACIÓN DE FLUJO TEXTUAL CONTINUO PARA CONTENEDORES SPAN (PC/MÓVIL)
   ========================================================================== */
.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 vectoriales 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 AZUL ELECTRÓNICO DE ALTA TENSIÓN)
   ========================================================================== */
.elevator-btn-back {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 999;
    text-decoration: none;
    display: block;
    border-radius: 50%;
    -webkit-tap-highlight-color: transparent !important;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

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

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

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

/* --- INTERACCIONES DEL PULSADOR (HOVER EN COMPUTADORA) --- */
.elevator-btn-back:hover .panel-button {
    border-color: #00d2ff; /* Cambio temático a azul de alta tensión */
    box-shadow: 0 0 20px rgba(0, 210, 255, 0.6), inset 0 1px 3px rgba(255, 255, 255, 0.2);
    transform: translateY(-3px);
}

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

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

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


/* ==========================================================================
   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) {
    /* El chasis lateral colapsa y las barras de publicidad reducen su presencia */
    .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) {
    /* Ocultación total por hardware de los banners de anuncios laterales */
    .ad-sidebar.left-ad,
    .ad-sidebar.right-ad {
        display: none !important;
    }
    
    /* El contenedor maestro absorbe el 100% del ancho disponible de forma fluida */
    .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 del tamaño de la cuadrícula de servicios para evitar desbordes */
    .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 del bloque inverso (Cámaras) para mantener la secuencia visual */
    .services-list .service-row.reverse {
        flex-direction: column !important; 
    }

    /* Fuerza a las cajas de texto y viñetas 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; /* Altura proporcional adaptada a pantallas medianas */
    }
    
    /* Ajuste de escala para el Héro de Ciberseguridad 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 escudo no pise los nuevos botones */
    .services-list .access-shield-divider {
        margin-top: 20px !important;
        margin-bottom: 0px !important;
        width: 100% !important;
    }
}


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

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

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

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

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

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

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

    /* ----------------------------------------------------------------------
       13.2 FRANJA HERO INTERNA (ADAPTACIÓN ERGONÓMICA MENTA INDUSTRIAL)
       ---------------------------------------------------------------------- */
    body .ads-layout-container .main-wrapper .hero-blue {
        padding: 15px 0 25px 0 !important; 
        /* Sincronización con el fondo de ciberseguridad oscuro unificado */
        background: linear-gradient(135deg, rgba(17, 24, 39, 0.95) 0%, rgba(22, 34, 57, 0.9) 100%),
                    url('img/acceso_biometrico.webp') no-repeat center center !important; /* Tu banner específico */
        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: ESCUDOS Y REDES 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 SISTEMAS DE ACCESO */
	.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;
        padding: 25px 15px !important;
        margin-bottom: 45px !important;
        gap: 20px !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;
    }

    /* 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 #00f0ff !important; /* El haz de acento pasa al filo superior */
        border-radius: 12px !important;
    }

    .services-list .service-row .tech-intro-box p {
        text-align: center !important; /* Centrado de lectura ergonómica */
        font-size: 14px !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 #00f0ff !important; /* Sincronía perimetral táctil */
        border-radius: 12px !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: 0 !important;
        margin-bottom: 15px !important;
    }

    .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 LÁSER EN MÓVIL */
    .services-list .access-shield-divider {
        width: 100% !important;
        margin-top: 25px !important;
        margin-bottom: -10px !important;
    }

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

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

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

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

    /* 🦾 SINCRO BOTONES: Posicionamiento intermedio comercial tras las viñetas */
    .services-list .service-row .service-btn-wrapper {
        order: 4 !important;        /* Cuarto: Botón de Cotización táctil expandido */
        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;
    }

    .services-list .service-row .service-btn-wrapper .btn-ste-small {
        width: 100% !important; /* Expande el pulsador para facilitar el clic en pantallas pequeñas */
        text-align: center !important;
        padding: 14px 20px !important;
        font-size: 15px !important;
    }

    /* Separadores de escudos y líneas láser al final absoluto de la fila */
    .services-list .access-shield-divider {
        order: 5 !important;        /* Quinto y último: Línea cónica y Escudo */
        margin: 30px auto !important;
        margin-top: 10px !important;   
        margin-bottom: -10px !important; 	
        width: 90% !important;
    }

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


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

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

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

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


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

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

    /* ⚙️ MARCA DE AGUA: CONTROL TOTAL DE IMAGEN DE FONDO, COLOR Y OPACIDAD DE FONDO DEL BLOQUE 1 */
    .services-list .bloque-biometria::before {
        content: "" !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        z-index: -1 !important; /* Se clava por debajo de los textos y fotos para no estorbar la lectura */
        
        /* ⚙️ TUS CONTROLES DIRECTOS DE MARCA DE AGUA:
           1. url('...'): Reemplaza por la ruta de tu imagen técnica de accesos.
           2. opacity: Controla qué tan translúcida es la imagen (0.12 es un 12%). Súbelo o bájalo para que no compita con las letras.
           3. background-size: 'cover' estira la foto al fondo completo, 'contain' la mantiene en proporción, '120px' le da un tamaño fijo de ícono.
           4. background-position: 'center', 'right bottom' (esquina inferior derecha) o 'left' según donde quieras ubicar el diseño. */
        background: url('img/acceso_biometrico.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-biometria .tech-intro-box,
    .services-list .bloque-biometria .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) */
    /* Replicado de forma milimétrica de tu plantilla base de ascensores */
    .services-list .bloque-biometria .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-biometria .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) */
    .services-list .bloque-biometria .access-shield-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 escudos */
        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 escudo 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-biometria .access-shield-divider .shield-node-container {
        margin-left: auto !important;
        margin-right: auto !important;
        float: none !important;
    }




    /* ==========================================================================
       🔐 CONTENEDOR GENERAL - BLOQUE 2: INSTALACIÓN DE CÁMARAS Y CCTV (INMUNIZADO Y CENTRADO) ******BLOQUE 2********BLOQUE 2****BLOQUE 2**************
       ========================================================================== */
    .services-list .bloque-camaras {
        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-camaras::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 CCTV específica para sistemas de acceso. */
        background: url('img/camaras_ascensores.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-camaras .tech-intro-box,
    .services-list .service-row.reverse.bloque-camaras .tech-intro-box p,
    .services-list .bloque-camaras .tech-intro-box,
    .services-list .bloque-camaras .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-camaras .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-camaras .service-features,
    .services-list .bloque-camaras .service-features {
        width: 100% !important;              
        max-width: 100% !important;
        margin-left: 0 !important;           
        margin-right: 0 !important;          
        padding-left: 15px !important;       
        padding-right: 15px !important;      
        gap: 12px !important;                
        float: none !important;
        order: 3 !important;                 /* Garantiza su posición secuencial antes del botón */
        
        /* ⚙️ TERCER CONTROL DE ALTURA MÓVIL:
           Le damos un margen inferior positivo de 20px. Esto empujará el botón de cotizar 
           y el divisor hacia abajo de forma obligatoria, despegándolos del filo metálico de la tarjeta. */
        margin: 5px auto 20px auto !important; 
    }

    /* ⚙️ CONTROL DIRECTO DEL DIVISOR DEL BLOQUE 2 (CENTRADO AXIAL INDESTRUCTIBLE Y DESPEGADO) */
    .services-list .service-row.reverse.bloque-camaras .access-shield-divider,
    .services-list .bloque-camaras .access-shield-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 escudos */
        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 escudo 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-camaras .access-shield-divider .shield-node-container,
    .services-list .bloque-camaras .access-shield-divider .shield-node-container {
        margin-left: auto !important;
        margin-right: auto !important;
        float: none !important;
    }


    /* ==========================================================================
       🔐 CONTENEDOR GENERAL - BLOQUE 3: CONTROL PEATONAL Y VEHICULAR (INMUNIZADO Y CENTRADO) ******BLOQUE 3********BLOQUE 3****BLOQUE 3**************
       ========================================================================== */
    .services-list .bloque-vehicular {
        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-vehicular::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 antenas RFID para sistemas de acceso. */
        background: url('img/antenas_rfid.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-vehicular .tech-intro-box,
    .services-list .bloque-vehicular .tech-intro-box p {
        width: 100% !important;              
        max-width: 100% !important;
        margin-left: 0 !important;           
        margin-right: 0 !important;          
        margin: 0 auto 15px auto !important; /* Añade un margen inferior de 15px para empujar las fotos */
        padding-left: 10px !important;       /* Respiro ergonómico junto al haz cian */
        padding-right: 10px !important;      
        border-radius: 8px !important;       
        float: none !important;              
    }

    /* ⚙️ CONTENEDOR DE IMÁGENES GEMELAS: Control Total de las Imágenes (Chasis de Fotos y Centrado) */
    .services-list .bloque-vehicular .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-vehicular .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 (Alineado pero sin separadores en HTML para el bloque final) */
    .services-list .bloque-vehicular .access-shield-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 escudos */
        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 escudo 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-vehicular .access-shield-divider .shield-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 3) --- */
    .services-list .service-row .service-images {
        width: 100% !important;
        height: 160px !important;   
        max-width: 116% !important;
        order: 2 !important; 
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        gap: 10px !important;
        margin: 15px auto !important;
        margin-top: -20px !important; 
        margin-bottom: -10px !important; 
        margin-left: 0 !important;           
        margin-right: 0 !important; 
        padding: 0 10px !important; 
        padding-left: 34px !important; /* Despega la foto 1 del borde izquierdo global */
        padding-right: 0px !important; 
        position: relative !important;
        align-items: center !important;
        box-sizing: border-box !important;
    }

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

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

    /* ??? SINCRO TOTAL: EFECTO DE PANEL CRISTAL TRASLÚCIDO EN LOS ÍCONOS RÁPIDOS MÓVILES */
    .main-nav .quick-btn-mob {
        border: none !important;
        color: #ffffff !important;
        font-size: 1.1rem !important;        /* Tamaño equilibrado del ícono para centrarse en el chasis */
        cursor: pointer !important;
        -webkit-tap-highlight-color: transparent !important;
        
        /* CONTENEDOR EN ACABADO DE CRISTAL MÓVIL (CENTRADO CUADRADO): */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;  /* Mantiene la casita y el sobre centrados en su cuadradito */
        text-decoration: none !important;
        width: 38px !important;               /* Ancho fijo cuadrado del panel en celulares */
        height: 38px !important;              /* Alto fijo cuadrado del panel en celulares */
        border-radius: 8px !important;        /* Esquinas suavizadas idénticas a la versión PC */
        
        /* Mismo trasfondo y filamento láser translúcido adaptado a tu azul ciberseguridad */
        background: rgba(255, 255, 255, 0.04) !important; 
        border: 1px solid rgba(0, 240, 255, 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 azul ciberseguridad unificado */
    .main-nav .quick-btn-mob i {
        color: #00f0ff !important; 
        text-shadow: 0 0 5px rgba(0, 240, 255, 0.3) !important;
        margin: 0 !important;                
        padding: 0 !important;
    }

    /* Respuesta táctil cinética al pulsar en el teléfono */
    .main-nav .quick-btn-mob:active {
        background: rgba(0, 240, 255, 0.15) !important; 
        border-color: #00f0ff !important;               
        box-shadow: 0 0 12px rgba(0, 240, 255, 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: #00f0ff !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 AZUL CIBERSEGURIDAD PROFUNDO */
    .main-nav .btn-quote-adaptive {
        padding: 8px 16px !important;
        font-size: 0.65rem !important;
        background: linear-gradient(135deg, #00f0ff 0%, #0097a7 100%) !important; 
        border-radius: 6px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 4px 12px rgba(0, 240, 255, 0.3) !important;
    }

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

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

    /* ?? PERSIANA MÓVIL INTERACTIVA CON TRASFONDO OSCURO 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; /* Tono de tu panel oscuro de accesos */
        border-bottom: 3px solid #00f0ff !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 (SISTEMAS DE ACCESO)
       ---------------------------------------------------------------------- */
    /* Nota: Se remueve la sección de marcas comerciales ausente en esta página */
    .main-nav .nav-links > li > a[href="#servicios"],
    .main-nav .nav-links > li > a[href="sistemas-acceso.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(0, 240, 255, 0.2) !important; 
        border-color: #00f0ff !important;
        box-shadow: 0 0 15px rgba(0, 240, 255, 0.3) !important;
        padding-left: 25px !important; /* Desplazamiento cinético indicativo de pulsación */
    }

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

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

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

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

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