/* ==========================================================================
   1. CONFIGURACIÓN GENERAL Y VARIABLES (PC BASE)
   ========================================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

:root {
    --azul-ste: #00bcd4;
    --negro-nav: #111;
    --gris-texto: #555;
    --blanco: #ffffff;
}

html {
    scroll-behavior: smooth;
}

/* Margen de seguridad para evitar que la barra de navegación tape los títulos al bajar */
#servicios, #cotizacion, #contacto, #nosotros {
    scroll-margin-top: 100px;
}

/* ==========================================================================
   2. DISEÑO ENCAJONADO Y PUBLICIDAD LATERAL (BOXED & ADS STRUCTURE)
   ========================================================================== */

body {
    background-color: #f0f2f5; /* Fondo para los laterales donde se renderiza la publicidad */
    display: flex;
    justify-content: center;
}

/* Contención central de la arquitectura web */
.main-wrapper {
    width: 100%;
    max-width: 1300px; 
    background-color: var(--blanco); 
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.1); /* Sombra perimetral de profundidad */
    margin: 0 auto;
}

/* Unificación de ancho máximo estructural para evitar desbordes físicos */
.main-wrapper .hero-blue, 
.main-wrapper .main-nav, 
.main-wrapper .top-bar, 
.main-wrapper .main-footer, 
.main-wrapper .cta-emergency {
    width: 100%;
    max-width: 1300px;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* --- INFRAESTRUCTURA DE ANUNCIOS LATERALES --- */
.ads-layout-container {
    display: flex;
    justify-content: center; 
    background-color: #f0f2f5; 
    min-height: 100vh;
}

.ad-sidebar {
    flex: 1; /* Expansión elástica en pantallas ultra-anchas */
    max-width: 200px; 
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Espacio reservado fijo para banners estilo Skyscraper */
.ad-placeholder {
    width: 160px; 
    height: 600px;
    background: #dddddd;
    border: 1px dashed #999999;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666666;
    font-size: 12px;
    position: sticky;
    top: 100px; /* Anclaje flotante magnético durante el scroll */
}

/* ==========================================================================
   3. FRANJA 1: LOGO E INFORMACIÓN (TOP BAR)
   ========================================================================== */

.top-bar {
    background: var(--blanco);
    padding: 10px 0; 
    border-bottom: 1px solid #f0f0f0;
}

.header-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Unificación cromática corporativa para iconos de la barra superior */
.top-bar i {
    color: var(--azul-ste); 
    margin-right: 6px; 
    font-size: 1.05rem; 
}

/* --- ESTRUCTURA LOGO ANIMADO (PROCESAMIENTO POR HARDWARE) --- */
.logo-animation-container {
    display: flex;
    align-items: center;
    overflow: hidden;
}

.logo-wrapper {
    display: flex;
    align-items: center;
}

/* Estado estático base en PC: Bloqueamos las dimensiones para evitar el efecto resorte */
.logo-img {
    height: 115px; 
    width: auto;
    z-index: 2;
    transform: translateX(0);
    will-change: transform; 
}

.logo-text-reveal {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 15px;
    opacity: 1; 
    white-space: nowrap;
    will-change: opacity, transform;
}

/* Desencadenantes cinéticos activados vía JavaScript */
.animate .logo-img {
    animation: moveLogo 1.2s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}

.animate .logo-text-reveal {
    animation: revealText 1s cubic-bezier(0.77, 0, 0.175, 1) forwards;
    animation-delay: 0.4s; 
}

.text-ste {
    font-weight: 800;
    font-size: 1.4rem;
    color: #1a2e44;
    line-height: 1;
}

.text-ste-sub {
    font-weight: 400;
    font-size: 0.82rem;
    color: var(--azul-ste);
    letter-spacing: 2px;
    margin-top: 2px;
}

/* --- CONTINUACIÓN FRANJA 1: PANEL DE DATOS DE CONTACTO DE CABECERA --- */
.info-wrapper {
    display: flex;
    gap: 30px;
}

.info-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.info-item i {
    font-size: 28px;
}

.info-item strong {
    display: block;
    font-size: 13px;
    color: #333;
    line-height: 1.2;
}

.info-item span {
    font-size: 13px;
    color: var(--gris-texto);
    display: block;
}

/* --- ANEXO: KEYFRAMES DE ANIMACIÓN DEL LOGOTIPO (PROCESAMIENTO POR HARDWARE) --- */
@keyframes moveLogo {
    from { transform: translateX(80px); } /* Desplazamiento inicial centrado */
    to { transform: translateX(0); }      /* Anclaje estructural definitivo */
}

@keyframes revealText {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}


/* ==========================================================================
   4. FRANJA 2: NAVEGACIÓN Y MENÚ (MAIN NAV) - BARRA NEGRA DIGITAL
   ========================================================================== */

.main-nav {
    /* Fondo de cristal esmerilado translúcido (Glassmorphism de precisión) */
    background: rgba(10, 20, 30, 0.85); 
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    
    /* Borde inferior que emula un filamento de luz láser cian corporativo */
    border-bottom: 2px solid rgba(86, 200, 192, 0.4);
    
    padding: 10px 0; 
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease;
}

.nav-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

/* Ocultar accesos rápidos de celular en la versión de computadoras */
.nav-quick-actions {
    display: none; 
}

/* 💻 🌟 NUEVO: ELIMINACIÓN DE REDUNDANCIA EN ESCRITORIO (PC) 🌟 */
/* Oculta el pulsador de INICIO de la barra digital únicamente en la página principal */
.main-nav .nav-links > li:first-child:has(a[href="#inicio"]) {
    display: none !important;
}

/* ==========================================================================
   5. MENÚ DESPLEGABLE TÉCNICO Y PANEL INTERACTIVO DE NAVEGACIÓN (PC)
   ========================================================================== */

/* --- ENLACES Y BOTONES DIGITALES TIPO PANEL INTERACTIVO (PC) --- */
.nav-links {
    list-style: none;
    display: flex;
    gap: 12px; /* Separación simétrica entre los pulsadores del panel */
}

.nav-links li a {
    color: var(--blanco);
    text-decoration: none;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.5px;
    padding: 10px 16px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 8px; /* Distancia calibrada entre el icono de ingeniería y el texto general */
    
    /* Micro-borde perimetral translúcido que simula la hendidura de un botón físico */
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.02);
    
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Iconografía técnica integrada en la barra de navegación */
.nav-links li a i {
    color: var(--azul-ste); /* El filamento del icono brilla en tu tono cian */
    font-size: 0.95rem;
    transition: transform 0.3s ease;
}

/* 💻 RESPUESTA INTERACTIVA AL PASAR EL CURSOR (HOVER GLOW EFFECT) */
.nav-links li a:hover {
    color: var(--blanco);
    background: rgba(0, 188, 212, 0.15); /* Iluminación translúcida con carga cian global */
    border-color: var(--azul-ste); /* Encendido láser del borde perimetral */
    
    /* Aura exterior reflectante de pulsador electrónico activo */
    box-shadow: 0 0 15px rgba(0, 188, 212, 0.4);
    transform: translateY(-2px); /* Desplazamiento cinético ascendente */
}

/* Micro-animación rotativa del icono al posicionar el mouse */
.nav-links li a:hover i {
    transform: scale(1.2) rotate(5deg);
}

/* --- MENÚ DESPLEGABLE TÉCNICO (PC) --- */

/* Anclaje relativo para la contención del submenú flotante */
.main-nav .nav-links .dropdown {
    position: relative;
}

/* 💻 ESTILO EN PC: Formato elástico alineado para el botón puente MENÚ */
.main-nav .nav-links .dropdown-toggle {
    display: flex !important;
    align-items: center;
    gap: 8px; /* Separación simétrica entre el icono estructural de capas y la palabra */
    cursor: pointer;
}

/* Arquitectura de la caja flotante del submenú (Oculta en reposo) */
.main-nav .nav-links .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #1a2e44; /* Azul oscuro corporativo de ingeniería */
    min-width: 240px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    border-radius: 6px;
    padding: 10px 0;
    list-style: none;
    margin: 0;
    
    /* Efecto cinematográfico de desvanecimiento suave (Fade & Slide) */
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    z-index: 1000;
}

/* 💻 COMPORTAMIENTO EN PC: Muestra el menú flotante al pasar el cursor por encima */
.main-nav .nav-links .dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(5px);
}

/* Estilo para los hipervínculos de los servicios técnicos dentro del submenú */
.main-nav .nav-links .dropdown-menu li a {
    color: var(--blanco);
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.9rem;
    text-transform: none; /* Letras normales para máxima legibilidad de términos */
    font-weight: 500;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    transform: none;
    transition: background 0.2s ease, color 0.2s ease;
}

/* Interacción de submenú: Las opciones brillan en tu cian STE al posar el mouse */
.main-nav .nav-links .dropdown-menu li a:hover {
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--azul-ste);
}

/* Calibración geométrica para los iconos de las especialidades internas */
.main-nav .nav-links .dropdown-menu li a i {
    width: 20px;
    text-align: center;
    font-size: 1.1rem;
    color: var(--azul-ste);
}

/* --- BOTÓN DE COTIZACIÓN DE ALTA VISIBILIDAD DE HARDWARE --- */
.btn-quote {
    background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
    color: var(--blanco);
    padding: 12px 22px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    text-decoration: none;
    font-weight: bold;
    font-size: 13px;
    text-transform: uppercase;
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);
    display: inline-flex;
    align-items: center;
    transition: all 0.3s ease;
}

.btn-quote:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.5);
    filter: brightness(1.1);
}

/* Forzado simétrico para mantener el icono del lápiz tecnológico en color blanco puro */
.btn-quote i {
    color: var(--blanco); 
    margin-right: 8px; 
    font-size: 1.1em;
    transition: transform 0.3s ease;
}

.btn-quote:hover i {
    transform: scale(1.2);
}

/* --- INTERRUPTOR DE ACCESO MÓVIL (OCULTO EN ESCRITORIO) --- */
.menu-toggle {
    display: none; /* Bloqueado en computadoras para preservar la rejilla de PC */
    background: none;
    border: none;
    color: var(--blanco);
    font-size: 24px;
    cursor: pointer;
    padding: 15px;
}

/* ==========================================================================
   6. FRANJA 3: AZUL (HERO SECTION) CON PATRÓN TECNOLÓGICO
   ========================================================================== */

.hero-blue {
    /* Degradado lineal cinético que se oscurece hacia el extremo inferior derecho */
    background: linear-gradient(135deg, var(--azul-ste) 0%, #041a2f 100%);
    padding: 40px 0;
    text-align: center;
    color: var(--blanco);
    position: relative;
    overflow: hidden; /* Garantiza la contención de la marca de agua decorativa */
    border-bottom: 5px solid rgba(0, 0, 0, 0.1);
}

/* Remoción estricta de pseudo-elementos obsoletos en PC */
.hero-blue::before { 
    display: none; 
}

/* Renderizado del símbolo técnico en formato marca de agua asimétrica */
.hero-blue::after {
    content: "\f11e"; /* Código Unicode de Font Awesome para el teclado (fa-keyboard) */
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free", sans-serif;
    font-weight: 900;
    position: absolute;
    bottom: -20px;   
    right: -20px;    
    font-size: 15rem; /* Escala gigante de impacto visual atenuado */
    color: rgba(255, 255, 255, 0.05); /* Opacidad mínima translúcida */
    transform: rotate(-15deg); 
    pointer-events: none;
}

.hero-blue h1 {
    font-size: 3.2rem;
    font-weight: 800;
    text-transform: uppercase;
    text-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
    position: relative;
    z-index: 2;
}

.hero-subtitle {
    font-size: 1.2rem;
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

/* ==========================================================================
   7. FRANJA 4: SERVICIOS DESTACADOS (ESTRUCTURA, FILAS Y CONTENEDORES MAESTROS)
   ========================================================================== */

/* --- CONTENEDOR PRINCIPAL --- */
.services-showcase {
    padding: 40px 20px 80px; /* Colchón estructural definitivo para que el bloque respire en PC */
}

/* --- TÍTULO DE SECCIÓN DESTACADO --- */
.section-title {
    text-align: center;
    margin-bottom: 80px; /* Separación simétrica hacia las placas de ingeniería */
}

.section-title span {
    display: block;
    color: var(--azul-ste);
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-size: 0.9rem;
    margin-bottom: 10px;
}

.section-title h2 {
    font-size: 3rem; 
    font-weight: 900;
    color: #1a2e44; /* Azul marino profundo corporativo */
    position: relative;
    display: inline-block;
    padding-bottom: 20px;
}

/* Línea decorativa moderna de doble tono debajo del título h2 */
.section-title h2::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 5px;
    background: linear-gradient(90deg, var(--azul-ste), #004a99);
    border-radius: 10px;
}

/* --- CAJA DE INTRODUCCIÓN TÉCNICA BASE (VALORES POR DEFECTO REPETIBLES) --- */
/* Nota: Las propiedades de color y fondo aquí declaradas actúan como fallback genérico; */
/* las reglas específicas de tus bloques del 1 al 5 las sobreescribirán mediante !important. */
.tech-intro-box {
    background-color: #f7fafc; 
    border-left: 4px solid var(--azul-ste); /* Filamento láser turquesa característico */
    border-top: 1px solid #edf2f7;
    border-right: 1px solid #edf2f7;
    border-bottom: 1px solid #edf2f7;
    border-radius: 0 8px 8px 0;
    padding: 25px 30px;
    margin: 30px 0 0 0; 
    max-width: 900px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
}

.tech-intro-box p {
    font-size: 1.05rem;
    line-height: 1.7;
    color: #2d3748;
    font-weight: 500;
    margin: 0;
    text-align: start;
}

/* ==========================================================================
   8. FRANJA 4: SERVICIOS DESTACADOS (CUADRÍCULA DE REJILLA Y ALINEACIÓN PC)
   ========================================================================== */

.services-showcase .service-row {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Divide el bloque en dos columnas simétricas de PC */
    gap: 50px;
    margin-bottom: 40px; /* Nota: Tus bloques del 1 al 5 sobreescribirán este margen con sus !important */
    align-items: stretch; /* Equilibra la altura elástica entre la columna de texto y las fotos gemelas */
}

/* 💻 EN PC: El texto (Título, Icono y Caja Gris) se ancla de forma fija en la parte superior */
.services-showcase .service-row .service-text {
    grid-column: 1;
    grid-row: 1;
    margin-bottom: 0; /* Eliminación estricta de márgenes redundantes inferiores */
}

.service-icon {
    font-size: 40px;
    color: var(--azul-ste);
    margin-top: -15px; /* Recorte calibrado para acoplar el icono de forma fluida */
    margin-bottom: -5px;
}

/* Base por defecto para títulos (Tus bloques personalizados tienen prioridad legal más abajo) */
.services-showcase .service-row h3 {
    font-size: 2rem;
    margin-bottom: 20px;
    color: #111;
}

/* 💻 EN PC: Las viñetas técnicas se acoplan inmediatamente abajo de la caja gris */
.services-showcase .service-row .service-features {
    grid-column: 1;
    grid-row: 2;
    margin-top: -30px; /* Recorte de acople milimétrico que elimina el vacío artificial en PC */
    margin-bottom: 5px;
}

/* 💻 EN PC: El botón de "Ver Detalles" se posiciona justo debajo de las viñetas */
.services-showcase .service-row .btn-ste-small,
.services-showcase .service-row .service-btn,
.services-showcase .service-row .btn-ste {
    grid-column: 1;
    grid-row: 3;
    justify-self: start; /* Mantiene el botón compacto pegado a la izquierda en monitores */
    
    /* 🛡️ EL FILTRO DE RESPALDO MÓVIL: Evita de raíz que el botón se estire en pantallas táctiles Flex */
    align-self: flex-start; 
    
    margin-top: -15px; /* Recorte de acople calibrado para empaquetar el llamado a la acción */
}

/* 💻 EN PC: Las imágenes gemelas se quedan fijas en la columna derecha cubriendo las 3 filas elásticas */
.services-showcase .service-row .service-images {
    grid-column: 2;
    grid-row: 1 / span 3; /* Expansión vertical absoluta cubriendo todo el lateral derecho */
    display: flex;
    gap: 15px;
    align-items: center; /* Centra las imágenes de forma milimétrica respecto a la altura del texto */
}

/* 💻 COMPORTAMIENTO AUTOMÁTICO EN REJILLA PARA LAS FILAS INVERTIDAS (.reverse) EN PC */
.services-showcase .service-row.reverse .service-text { grid-column: 2; }
.services-showcase .service-row.reverse .service-features { grid-column: 2; }
.services-showcase .service-row.reverse .service-images { grid-column: 1; }

/* 🔀 Sincronización de alineación en PC para todas las variantes de botones en filas invertidas */
.services-showcase .service-row.reverse .btn-ste-small,
.services-showcase .service-row.reverse .service-btn,
.services-showcase .service-row.reverse .btn-ste { 
    grid-column: 2; 
}



/* ==========================================================================
 9. FRANJA 4: SISTEMA DE DIVISORES DE ROMBO (.SERVICE-DIVIDER CORREGIDO)
 ========================================================================== */
.services-showcase .service-row .service-divider {
 grid-column: span 2 !important;
 width: 100% !important;
 display: flex !important;
 align-items: center !important;
 justify-content: center !important;
 margin: -20px auto 0 auto !important; 
 height: 10px !important;
}

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

/* Filamento izquierdo: Gradual hacia el Cian Cyber Láser */
.service-divider::before {
 content: "" !important;
 flex: 1 !important;
 height: 1px !important;
 background: linear-gradient(to right, transparent, #00e5ff) !important; /* 🌟 COLOR SINCRONIZADO */
}

/* Filamento derecho: Gradual hacia el Cian Cyber Láser */
.service-divider::after {
 content: "" !important;
 flex: 1 !important;
 height: 1px !important;
 background: linear-gradient(to left, transparent, #00e5ff) !important; /* 🌟 COLOR SINCRONIZADO */
}

/* Contenedor central de gemas */
.service-divider .line-diamonds {
 display: flex !important;
 align-items: center !important;
 justify-content: center !important;
 gap: 6px !important;
 margin: 0 20px !important;
}

/* Estilo geométrico de ingeniería para los rombos periféricos */
.service-divider .diamond {
 background-color: #1a2e44 !important; 
 transform: rotate(45deg) !important; 
 transition: transform 0.3s ease !important;
}

/* Gema central dinámica: Ahora unificada en el Cian Cyber de la barra vertical */
.service-divider .diamond-large {
 width: 10px !important;
 height: 10px !important;
 background-color: #00e5ff !important; /* 🌟 COLOR SINCRONIZADO: Sintonizado con la barra vertical */
 box-shadow: 0 0 8px rgba(0, 229, 255, 0.6) !important; /* Añadido efecto LED coincidente */
}

/* Rombos menores periféricos de equilibrio visual */
.service-divider .diamond-small {
 width: 6px !important;
 height: 6px !important;
}

/* --- INTERACCIONES CINÉTICAS EN ELEMENTOS DE DIVISOR --- */
/* Al pasar el cursor, el rombo central rota de forma elástica e intensifica su energía digital */
.service-row:hover .service-divider .diamond-large {
 transform: rotate(135deg) scale(1.2) !important;
 background-color: #00e5ff !important;
 box-shadow: 0 0 14px rgba(0, 229, 255, 0.9) !important; /* Incremento de saturación láser */
}


/* ==========================================================================
   10. FRANJA 4: CONTROL INTERACTIVO Y ANIMACIÓN CINEMÁTICA DE ICONOS (PC)
   ========================================================================== */

.service-icon {
    font-size: 40px;
    color: var(--azul-ste);
    margin-top: -15px;
    margin-bottom: -5px;
    transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    display: inline-block;
}

/* Hover cinético sobre la fila: los iconos cobran vida emulando su función mecánica */
.service-row:hover .service-icon {
    transform: scale(1.2);
}

/* Animación de maquinaria en movimiento constante para la división de ascensores */
.service-row:hover .fa-elevator {
    animation: elevatorBounce 0.6s ease-in-out alternate;
}

@keyframes elevatorBounce {
    0% { transform: translateY(0) scale(1.2); }
    50% { transform: translateY(-8px) scale(1.2); }
    100% { transform: translateY(0) scale(1.2); }
}

/* ==========================================================================
 11. FRANJA 4: CONTENEDORES MAESTROS Y TIPOGRAFÍAS POR SERVICIO
 ========================================================================== */

/********* 1. 🛗 CONTENEDOR MAESTRO PRINCIPAL (BLOQUE 1) *****************(BLOQUE 1)***************(BLOQUE 1)******************/
.services-showcase .service-row:first-of-type {
    background-color: #020618; 
    background-image: linear-gradient(135deg, 
        rgba(153, 161, 175, 1) 0%,   
        rgba(125, 133, 145, 0.50) 100%  
    ), url('img/ductos_caracas.webp'); 
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-blend-mode: luminosity; 
    border: 0px solid rgba(0, 0, 0, 0.50); 
    border-radius: 30px; 
    padding: 40px 35px; 
    margin-bottom: 25px !important; 
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2) !important; 
    transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease !important;
}
.services-showcase .service-row:first-of-type:hover {
    transform: translateY(-5px) !important;
    border-color: rgba(0, 188, 212, 0.4) !important; 
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.3) !important; 
}

/********* 2.A 🔀 CONTENEDOR DE CABECERA HORIZONTAL (NUEVO) ***********************************/
.services-showcase .service-row:first-of-type .service-header-flex {
    display: flex !important;
    align-items: center !important;   /* Centra verticalmente el icono, la raya y el texto */
    justify-content: flex-start !important;
    gap: 20px !important;             /* Espacio de aire entre el icono, la raya y el texto */
    margin-bottom: 20px !important;   /* Separación inferior respecto a la caja del párrafo */
}

/* Control del Icono dentro de la Cabecera Horizontal (PC) */
.services-showcase .service-row:first-of-type .service-header-flex .service-icon i {
    color: #00e5ff !important;       /* 🎨 COLOR DEL ICONO EN PC: Cámbialo por el tono que prefieras */
    font-size: 40px !important;      /* Mantiene el tamaño de impacto visual en monitores */
    text-shadow: 0 0 12px rgba(0, 229, 255, 0.4) !important; /* Micro-resplandor LED para un look cyber premium */
}


/* Propiedades físicas de la raya divisoria láser vertical */
.services-showcase .service-row:first-of-type .service-header-flex .vertical-divider {
   width: 2px !important;            
    height: 38px !important;          
    background-color: #00e5ff !important; /* 🎨 COLOR SINCRONIZADO: Mismo cian cyber del icono */
    display: inline-block !important;
    flex-shrink: 0 !important;        
    opacity: 1 !important;                /* Subido a 1 para maximizar la viveza del color */
    
    /* 🪐 EFECTO LED: Resplandor de energía idéntico al del icono en monitores */
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.5) !important; 
}

/********* 2.B 🏷️ TÍTULO PRINCIPAL (ACOPLADO) *************************************************/
.services-showcase .service-row:first-of-type .service-header-flex h3 {
    font-family: inherit !important; 
    font-size: 27px !important;      
    color: #000000 !important;       
    margin: 0 !important;             /* Resetea márgenes para alineación perfecta con la raya */
    letter-spacing: 0.5px !important;
    line-height: 1 !important;
}

/********* 3. 📦 CAJA GENERAL QUE ENCIERRA AL PÁRRAFO (.tech-intro-box) *******************/
.services-showcase .service-row:first-of-type .tech-intro-box {
    margin-top: 5px;      /* 🎛️ Incrementado a 5px para dar una separación elegante bajo la cabecera */
    margin-bottom: -10px;   /* 🎛️ Incrementado a 25px para dar espacio óptimo hacia las viñetas inferiores */
    padding: 18px 25px;    
    padding-left: 30px;  
    
    /* 🛸 TEXTURA DE ALTA TECNOLOGÍA: Cristal líquido oscuro traslúcido */
    background: rgba(11, 22, 34, 0.85) !important; 
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    
    /* 📐 GEOMETRÍA ASIMÉTRICA: Esquinas de corte técnico industrial moderno */
    border-radius: 4px 24px 4px 24px !important; 
    
    /* ⚡ ILUMINACIÓN LÁSER: Marco de neón cian continuo con filamento principal izquierdo */
    border: 1px solid rgba(0, 188, 212, 0.4) !important;
    border-left: 5px solid var(--azul-ste, #00bcd4) !important; 
    
    /* 🪐 RESPLANDOR DIGITAL: Aura holográfica perimetral y relieve interno */
    box-shadow: 0 8px 25px rgba(0, 188, 212, 0.08), 
                inset 0 0 15px rgba(0, 188, 212, 0.03) !important;
    
    transition: all 0.4s ease !important;
}

/* Micro-interacción: El panel se sobreilumina cuando el usuario pasa el cursor por encima */
.services-showcase .service-row:first-of-type:hover .tech-intro-box {
    border-color: rgba(0, 188, 212, 0.7) !important;
    box-shadow: 0 10px 30px rgba(0, 188, 212, 0.15), 
                inset 0 0 20px rgba(0, 188, 212, 0.05) !important;
}

/********* 4. 📝 PROPIEDADES DEL PÁRRAFO INTRODUCTORIO (Texto interno) *******************/
.services-showcase .service-row:first-of-type .tech-intro-box p {
    font-family: inherit !important; 
    font-size: 15.5px !important;     /* Calibrado para máxima nitidez en pantallas de PC */
    line-height: 1.4 !important;      /* Espaciado de líneas óptimo para lectura técnica */
    margin-bottom: 0px !important;  
    margin-left: -15px !important;   
    letter-spacing: 0.3px !important; 
    
    /* 🎨 COLOR PLATINO DE ALTO CONTRASTE: Garantiza una legibilidad perfecta sobre la caja oscura */
    color: #e2e8f0 !important;       
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) !important; /* Protege el contorno de las letras */
}


/********* 5. 📦 CAJA GENERAL QUE ENCIERRA A LOS ÍTEMS (.service-features) ****************/
.services-showcase .service-row:first-of-type .service-features {    
    margin-top: -10px;       /* Separación fina bajo el panel holográfico */
    margin-bottom: -5px;   /* Calibración simétrica hacia la envoltura del botón */
    padding: 20px 25px;    /* Espacio interno para que la matriz digital respire */
    width: 100%;
    list-style: none;
    
    /* 🛸 RETÍCULA DIGITAL EN PC: Micro-cuadrícula en gris platino pulido (Cian eliminado) */
    background-color: rgba(248, 250, 252, 0.4) !important; /* Base gris hielo sumamente sutil */
    background-image: linear-gradient(rgba(219, 226, 230, 0.3) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(219, 226, 230, 0.3) 1px, transparent 1px) !important;
    background-size: 20px 20px !important; /* Tamaño de la retícula digital de PC */
    
    /* 🛡️ ENMARCADO SÓLIDO PREMIUM: Cambiado de punteado a línea continua limpia */
    border: 1px solid rgba(27, 38, 59, 0.12) !important; /* Borde sólido continuo en gris basalto traslúcido */
    border-radius: 16px !important;
    
    /* Sombra interna para dar profundidad de panel industrial */
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.02) !important;
}


/********* 6. 💊 ÍTEMS / PASTILLAS COMPACTAS (Elementos li individuales) ******************/
.services-showcase .service-row:first-of-type .service-features li {
    font-family: inherit !important;
    font-size: 14.5px !important;      /* Letra técnica estilizada */
    font-weight: 500 !important;
    color: #1e293b !important;        /* Gris grafito de alta legibilidad ejecutiva */
    
    /* Cápsula modular con degradado de aluminio pulido reflectante */
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(241, 245, 249, 0.9) 100%) !important;
    
    /* Borde estructural micro-pulido */
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    border-left: 4px solid #475569 !important; /* Pestaña lateral color titanio oscuro */
    border-radius: 8px !important; 
    
    /* Separaciones y alineación interna */
    padding: 4px 16px !important;     /* Cojín de aire interno simétrico */
    margin-left: -10px !important; 
    margin-right: -15px !important;
    margin-bottom: 8px !important;    /* ↕️ Distancia vertical calibrada entre cápsulas */
    
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    
    /* Efecto de relieve flotante */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03) !important;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* Interacción Háptica en PC: Las cápsulas se iluminan y se desplazan al posar el mouse */
.services-showcase .service-row:first-of-type .service-features li:hover {
    transform: translateX(5px) !important; /* Desplazamiento cinético indicativo hacia la derecha */
    border-left-color: var(--azul-ste, #00bcd4) !important; /* La pestaña titanio se enciende en cian */
    background: #ffffff !important;   /* Pasa a blanco puro brillante */
    box-shadow: 0 6px 15px rgba(0, 188, 212, 0.12) !important; /* Resplandor láser inferior */
}

.services-showcase .service-row:first-of-type .service-features li:last-child {
    margin-bottom: 0px !important;   /* Quita el margen residual al último ítem */
}

/********* 7. 🎨 ICONOS INTERNOS DE LOS ÍTEMS (Viñetas i) *********************************/
.services-showcase .service-row:first-of-type .service-features li i {
    font-size: 15px !important;      
    color: var(--azul-ste, #00bcd4) !important; /* Tono cian unificado */
    background: transparent !important;
    
    /* Efecto de diodo LED encendido en el nodo */
    filter: drop-shadow(0 0 4px rgba(0, 188, 212, 0.6)) !important;
    transition: transform 0.3s ease !important;
}

/* El icono (nodo) hace un micro-pulso de escala cuando el usuario pasa el mouse sobre su cápsula */
.services-showcase .service-row:first-of-type .service-features li:hover i {
    transform: scale(1.2) !important;
    filter: drop-shadow(0 0 8px rgba(0, 188, 212, 0.9)) !important; /* Satura el brillo del LED */
}


/********* 8. 🖼️ IMAGEN / ILUSTRACIÓN SECUNDARIA ******************************************/
.services-showcase .service-row:first-of-type .service-image-box img,
.services-showcase .service-row:first-of-type .service-img img {
    max-width: 100% !important;     
    height: auto !important;
    border-radius: 20px !important;  
    border: 0px solid transparent !important; 
    box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important; 
    margin-top: 0px !important;      
    margin-bottom: 0px !important;   
    filter: none !important;         
}

/********* 9. 📦 CAJA CONTENEDORA DEL BOTÓN EN PC (NUEVO) *********************************/
.services-showcase .service-row:first-of-type .service-btn-wrapper {
    grid-column: 1 !important;        /* Lo ancla en la columna del texto de PC */
    grid-row: 3 !important;           /* Lo posiciona en la tercera fila de la rejilla */
    display: block !important;
    margin-top: -15px !important;     /* Mantiene el acople milimétrico de PC original */
}

/********* 10. 🔘 BOTÓN DE ACCIÓN (ESTADO NORMAL - PC INTERNO) *****************************/
.services-showcase .service-row:first-of-type .service-btn-wrapper .btn-ste-small,
.services-showcase .service-row:first-of-type .service-btn-wrapper .service-btn,
.services-showcase .service-row:first-of-type .service-btn-wrapper .btn-ste {
    display: inline-block !important; /* Mide exactamente lo que mida su texto */
    font-family: inherit !important;
    font-size: 15px !important;      
    font-weight: 600 !important;
    color: #ffffff !important;       
    background-color: #00bcd4 !important; 
    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;
}

/********* 11. 🔘 BOTÓN DE ACCIÓN (AL PASAR EL CURSOR EN PC) ********************************/
.services-showcase .service-row:first-of-type .service-btn-wrapper .btn-ste-small:hover,
.services-showcase .service-row:first-of-type .service-btn-wrapper .service-btn:hover,
.services-showcase .service-row:first-of-type .service-btn-wrapper .btn-ste:hover {
    color: #ffffff !important;       
    background-color: #0097a7 !important; 
    transform: translateY(-2px) !important; 
    box-shadow: 0 8px 20px rgba(0, 188, 212, 0.4) !important;
}


/* --- 🔐 BLOQUE 2: SISTEMAS DE ACCESO Y VIGILANCIA --- */

/********* 1. 🛗 CONTENEDOR MAESTRO PRINCIPAL (BLOQUE 2) *****************(BLOQUE 2)**************(BLOQUE 2)********/
.services-showcase .service-row:nth-of-type(2) {
    background-color: #CAD14D; /* Mantiene tu variante de color de base */
    background-image: linear-gradient(135deg, 
        rgba(153, 161, 175, 1) 0%,   
        rgba(125, 133, 145, 0.50) 100%  
    ), url('img/sistemas_acceso.webp'); /* Marca de agua específica del bloque 2 */
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-blend-mode: luminosity; 
    border: 0px solid rgba(0, 0, 0, 0.50); 
    border-radius: 30px; 
    padding: 40px 35px; 
    margin-bottom: 25px; 
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2); 
    transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}
.services-showcase .service-row:nth-of-type(2):hover {
    transform: translateY(-5px) !important;
    border-color: rgba(0, 188, 212, 0.4) !important; 
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.3) !important; 
}

/********* 2.A 🔀 CONTENEDOR DE CABECERA HORIZONTAL (BLOQUE 2) ***********************************/
.services-showcase .service-row:nth-of-type(2) .service-header-flex {
    display: flex !important;
    align-items: center !important;   /* Centra verticalmente el icono, la raya y el texto */
    justify-content: flex-start !important;
    gap: 20px !important;             /* Espacio de aire entre el icono, la raya y el texto */
    margin-bottom: 20px !important;   /* Separación inferior respecto a la caja del párrafo */
}

/* Control del Icono dentro de la Cabecera Horizontal (Bloque 2) */
.services-showcase .service-row:nth-of-type(2) .service-header-flex .service-icon i {
    color: #00e5ff !important;       /* 🎨 COLOR DEL ICONO EN PC: Cámbialo por el tono que prefieras */
    font-size: 40px !important;      /* Mantiene el tamaño de impacto visual en monitores */
    text-shadow: 0 0 12px rgba(0, 229, 255, 0.4) !important; /* Micro-resplandor LED para un look cyber premium */
}

/* Propiedades físicas de la raya divisoria láser vertical sincronizada */
.services-showcase .service-row:nth-of-type(2) .service-header-flex .vertical-divider {
    width: 2px !important;            
    height: 38px !important;          
    background-color: #00e5ff !important; /* 🎨 COLOR SINCRONIZADO: Mismo cian cyber del icono */
    display: inline-block !important;
    flex-shrink: 0 !important;        
    opacity: 1 !important;                /* Subido a 1 para maximizar la viveza del color */
    
    /* 🪐 EFECTO LED: Resplandor de energía idéntico al del icono en monitores */
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.5) !important; 
}

/********* 2.B 🏷️ TÍTULO PRINCIPAL (BLOQUE 2 ACOPLADO) *************************************************/
.services-showcase .service-row:nth-of-type(2) .service-header-flex h3 {
    font-family: inherit !important; 
    font-size: 27px !important;      
    color: #000000 !important;       /* Replicado exactamente al original solicitado */
    margin: 0 !important;             /* Resetea márgenes para alineación perfecta con la raya */
    letter-spacing: 0.5px !important;
    line-height: 1 !important;
}

/********* 3. 📦 CAJA GENERAL QUE ENCIERRA AL PÁRRAFO (.tech-intro-box - BLOQUE 2) *******************/
.services-showcase .service-row:nth-of-type(2) .tech-intro-box {
    margin-top: 5px;      /* 🎛️ Incrementado a 5px para dar una separación elegante bajo la cabecera */
    margin-bottom: -10px;   /* 🎛️ Incrementado a 25px para dar espacio óptimo hacia las viñetas inferiores */
    padding: 18px 25px;    
    padding-left: 30px;  
    
    /* 🛸 TEXTURA DE ALTA TECNOLOGÍA: Cristal líquido oscuro traslúcido */
    background: rgba(11, 22, 34, 0.85) !important; 
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    
    /* 📐 GEOMETRÍA ASIMÉTRICA: Esquinas de corte técnico industrial moderno */
    border-radius: 4px 24px 4px 24px !important; 
    
    /* ⚡ ILUMINACIÓN LÁSER: Marco de neón cian continuo con filamento principal izquierdo */
    border: 1px solid rgba(0, 188, 212, 0.4) !important;
    border-left: 5px solid var(--azul-ste, #00bcd4) !important; 
    
    /* 🪐 RESPLANDOR DIGITAL: Aura holográfica perimetral y relieve interno */
    box-shadow: 0 8px 25px rgba(0, 188, 212, 0.08), 
                inset 0 0 15px rgba(0, 188, 212, 0.03) !important;
    
    transition: all 0.4s ease !important;
}

/* Micro-interacción: El panel se sobreilumina cuando el usuario pasa el cursor por encima */
.services-showcase .service-row:nth-of-type(2):hover .tech-intro-box {
    border-color: rgba(0, 188, 212, 0.7) !important;
    box-shadow: 0 10px 30px rgba(0, 188, 212, 0.15), 
                inset 0 0 20px rgba(0, 188, 212, 0.05) !important;
}

/********* 4. 📝 PROPIEDADES DEL PÁRRAFO INTRODUCTORIO (Texto interno - BLOQUE 2) *******************/
.services-showcase .service-row:nth-of-type(2) .tech-intro-box p {
    font-family: inherit !important; 
    font-size: 15.5px !important;     /* Calibrado para máxima nitidez en pantallas de PC */
    line-height: 1.4 !important;      /* Espaciado de líneas óptimo para lectura técnica */
    margin-bottom: 0px !important;  
    margin-left: -15px !important;   
    letter-spacing: 0.3px !important; 
    
    /* 🎨 COLOR PLATINO DE ALTO CONTRASTE: Garantiza una legibilidad perfecta sobre la caja oscura */
    color: #e2e8f0 !important;       
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) !important; /* Protege el contorno de las letras */
}

/********* 5. 📦 CAJA GENERAL QUE ENCIERRA A LOS ÍTEMS (.service-features - BLOQUE 2) ****************/
.services-showcase .service-row:nth-of-type(2) .service-features {    
    margin-top: -10px;       /* Separación fina bajo el panel holográfico */
    margin-bottom: -5px;   /* Calibración simétrica hacia la envoltura del botón */
    padding: 20px 25px;    /* Espacio interno para que la matriz digital respire */
    width: 100%;
    list-style: none;
    
    /* 🛸 RETÍCULA DIGITAL EN PC: Micro-cuadrícula en gris platino pulido (Cian eliminado) */
    background-color: rgba(248, 250, 252, 0.4) !important; /* Base gris hielo sumamente sutil */
    background-image: linear-gradient(rgba(219, 226, 230, 0.3) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(219, 226, 230, 0.3) 1px, transparent 1px) !important;
    background-size: 20px 20px !important; /* Tamaño de la retícula digital de PC */
    
    /* 🛡️ ENMARCADO SÓLIDO PREMIUM: Cambiado de punteado a línea continua limpia */
    border: 1px solid rgba(27, 38, 59, 0.12) !important; /* Borde sólido continuo en gris basalto traslúcido */
    border-radius: 16px !important;
    
    /* Sombra interna para dar profundidad de panel industrial */
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.02) !important;
}


/********* 6. 💊 ÍTEMS / PASTILLAS COMPACTAS (Elementos li individuales - BLOQUE 2) ******************/
.services-showcase .service-row:nth-of-type(2) .service-features li {
    font-family: inherit !important;
    font-size: 14.5px !important;      /* Letra técnica estilizada */
    font-weight: 500 !important;
    color: #1e293b !important;        /* Gris grafito de alta legibilidad ejecutiva */
    
    /* Cápsula modular con degradado de aluminio pulido reflectante */
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(241, 245, 249, 0.9) 100%) !important;
    
    /* Borde estructural micro-pulido */
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    border-left: 4px solid #475569 !important; /* Pestaña lateral color titanio oscuro */
    border-radius: 8px !important; 
    
    /* Separaciones y alineación interna exactas del Bloque 1 */
    padding: 4px 16px !important;     /* Colchón compacto unificado */
    margin-left: -10px !important; 
    margin-right: -15px !important;
    margin-bottom: 8px !important;    /* ↕️ Distancia vertical calibrada entre cápsulas */
    
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    
    /* Efecto de relieve flotante */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03) !important;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* Interacción Háptica en PC: Las cápsulas se iluminan y se desplazan al posar el mouse */
.services-showcase .service-row:nth-of-type(2) .service-features li:hover {
    transform: translateX(5px) !important; /* Desplazamiento cinético indicativo hacia la derecha */
    border-left-color: var(--azul-ste, #00bcd4) !important; /* La pestaña titanio se enciende en cian */
    background: #ffffff !important;   /* Pasa a blanco puro brillante */
    box-shadow: 0 6px 15px rgba(0, 188, 212, 0.12) !important; /* Resplandor láser inferior */
}

.services-showcase .service-row:nth-of-type(2) .service-features li:last-child {
    margin-bottom: 0px !important;   /* Quita el margen residual al último ítem */
}

/********* 7. 🎨 ICONOS INTERNOS DE LOS ÍTEMS (Viñetas i - BLOQUE 2) *********************************/
.services-showcase .service-row:nth-of-type(2) .service-features li i {
    font-size: 15px !important;      
    color: var(--azul-ste, #00bcd4) !important; /* Tono cian unificado */
    background: transparent !important;
    
    /* Efecto de diodo LED encendido en el nodo */
    filter: drop-shadow(0 0 4px rgba(0, 188, 212, 0.6)) !important;
    transition: transform 0.3s ease !important;
}

/* El icono (nodo) hace un micro-pulso de escala cuando el usuario pasa el mouse sobre su cápsula */
.services-showcase .service-row:nth-of-type(2) .service-features li:hover i {
    transform: scale(1.2) !important;
    filter: drop-shadow(0 0 8px rgba(0, 188, 212, 0.9)) !important; /* Satura el brillo del LED */
}


/********* 8. 🖼️ IMAGEN / ILUSTRACIÓN SECUNDARIA (BLOQUE 2) ******************************************/
.services-showcase .service-row:nth-of-type(2) .service-image-box img,
.services-showcase .service-row:nth-of-type(2) .service-img img {
    max-width: 100% !important;     
    height: auto !important;
    border-radius: 20px !important;  
    border: 0px solid transparent !important; 
    box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important; 
    margin-top: 0px !important;      
    margin-bottom: 0px !important;   
    filter: none !important;         
}

/********* 9. 📦 CAJA CONTENEDORA DEL BOTÓN EN PC (BLOQUE 2) *********************************/
.services-showcase .service-row:nth-of-type(2) .service-btn-wrapper {
    grid-column: 1 !important;        
    grid-row: 3 !important;           
    display: block !important;
    margin-top: -15px !important;     
}

/********* 10. 🔘 BOTÓN DE ACCIÓN (ESTADO NORMAL - PC INTERNO BLOQUE 2) *****************************/
.services-showcase .service-row:nth-of-type(2) .service-btn-wrapper .btn-ste-small,
.services-showcase .service-row:nth-of-type(2) .service-btn-wrapper .service-btn,
.services-showcase .service-row:nth-of-type(2) .service-btn-wrapper .btn-ste {
    display: inline-block !important; 
    font-family: inherit !important;
    font-size: 15px !important;      
    font-weight: 600 !important;
    color: #ffffff !important;       
    background-color: #00bcd4 !important; 
    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;
}

/********* 11. 🔘 BOTÓN DE ACCIÓN (AL PASAR EL CURSOR EN PC BLOQUE 2) ********************************/
.services-showcase .service-row:nth-of-type(2) .service-btn-wrapper .btn-ste-small:hover,
.services-showcase .service-row:nth-of-type(2) .service-btn-wrapper .service-btn:hover,
.services-showcase .service-row:nth-of-type(2) .service-btn-wrapper .btn-ste:hover {
    color: #ffffff !important;       
    background-color: #0097a7 !important; 
    transform: translateY(-2px) !important; 
    box-shadow: 0 8px 20px rgba(0, 188, 212, 0.4) !important;
}



/* --- ⚡ BLOQUE 3: ELECTRICIDAD --- */

/********* 1. ⚡ CONTENEDOR MAESTRO PRINCIPAL (BLOQUE 3) *****************(BLOQUE 3)***************(BLOQUE 3)*********/
.services-showcase .service-row:nth-of-type(3) {
    background-color: #1C398E; /* Base azul noche profundo corporativo */
    background-image: linear-gradient(135deg, 
        rgba(153, 161, 175, 1) 0%,   
        rgba(125, 133, 145, 0.50) 100%  
    ), url('img/electricidad.webp'); /* Marca de agua específica del bloque 3 */
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-blend-mode: luminosity; 
    border: 0px solid rgba(0, 0, 0, 0.50); 
    border-radius: 30px; 
    padding: 40px 35px; 
    margin-bottom: 25px; 
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2); 
    transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}
.services-showcase .service-row:nth-of-type(3):hover {
    transform: translateY(-5px) !important;
    border-color: rgba(0, 188, 212, 0.4) !important; 
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.3) !important; 
}

/********* 2.A 🔀 CONTENEDOR DE CABECERA HORIZONTAL (BLOQUE 3) ***********************************/
.services-showcase .service-row:nth-of-type(3) .service-header-flex {
    display: flex !important;
    align-items: center !important;   /* Centra verticalmente el icono, la raya y el texto */
    justify-content: flex-start !important;
    gap: 20px !important;             /* Espacio de aire entre el icono, la raya y el texto */
    margin-bottom: 20px !important;   /* Separación inferior respecto a la caja del párrafo */
}

/* Control del Icono dentro de la Cabecera Horizontal (Bloque 3) */
.services-showcase .service-row:nth-of-type(3) .service-header-flex .service-icon i {
    color: #00e5ff !important;       /* 🎨 COLOR DEL ICONO EN PC: Cámbialo por el tono que prefieras */
    font-size: 40px !important;      /* Mantiene el tamaño de impacto visual en monitores */
    text-shadow: 0 0 12px rgba(0, 229, 255, 0.4) !important; /* Micro-resplandor LED para un look cyber premium */
}

/* Propiedades físicas de la raya divisoria láser vertical sincronizada */
.services-showcase .service-row:nth-of-type(3) .service-header-flex .vertical-divider {
    width: 2px !important;            
    height: 38px !important;          
    background-color: #00e5ff !important; /* 🎨 COLOR SINCRONIZADO: Mismo cian cyber del icono */
    display: inline-block !important;
    flex-shrink: 0 !important;        
    opacity: 1 !important;                /* Subido a 1 para maximizar la viveza del color */
    
    /* 🪐 EFECTO LED: Resplandor de energía idéntico al del icono en monitores */
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.5) !important; 
}

/********* 2.B 🏷️ TÍTULO PRINCIPAL (BLOQUE 3 ACOPLADO) *************************************************/
.services-showcase .service-row:nth-of-type(3) .service-header-flex h3 {
    font-family: inherit !important; 
    font-size: 27px !important;      
    color: #000000 !important;       /* Resetea márgenes para alineación perfecta con la raya */
    margin: 0 !important;             
    letter-spacing: 0.5px !important;
    line-height: 1 !important;
}

/********* 3. 📦 CAJA GENERAL QUE ENCIERRA AL PÁRRAFO (.tech-intro-box - BLOQUE 3) *******************/
.services-showcase .service-row:nth-of-type(3) .tech-intro-box {
    margin-top: 5px;      /* 🎛️ Incrementado a 5px para dar una separación elegante bajo la cabecera */
    margin-bottom: -10pxt;   /* 🎛️ Incrementado a 25px para dar espacio óptimo hacia las viñetas inferiores */
    padding: 18px 25px;    
    padding-left: 30px;  
    
    /* 🛸 TEXTURA DE ALTA TECNOLOGÍA: Cristal líquido oscuro traslúcido */
    background: rgba(11, 22, 34, 0.85) !important; 
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    
    /* 📐 GEOMETRÍA ASIMÉTRICA: Esquinas de corte técnico industrial moderno */
    border-radius: 4px 24px 4px 24px !important; 
    
    /* ⚡ ILUMINACIÓN LÁSER: Marco de neón cian continuo con filamento principal izquierdo */
    border: 1px solid rgba(0, 188, 212, 0.4) !important;
    border-left: 5px solid var(--azul-ste, #00bcd4) !important; 
    
    /* 🪐 RESPLANDOR DIGITAL: Aura holográfica perimetral y relieve interno */
    box-shadow: 0 8px 25px rgba(0, 188, 212, 0.08), 
                inset 0 0 15px rgba(0, 188, 212, 0.03) !important;
    
    transition: all 0.4s ease !important;
}

/* Micro-interacción: El panel se sobreilumina cuando el usuario pasa el cursor por encima */
.services-showcase .service-row:nth-of-type(3):hover .tech-intro-box {
    border-color: rgba(0, 188, 212, 0.7) !important;
    box-shadow: 0 10px 30px rgba(0, 188, 212, 0.15), 
                inset 0 0 20px rgba(0, 188, 212, 0.05) !important;
}

/********* 4. 📝 PROPIEDADES DEL PÁRRAFO INTRODUCTORIO (Texto interno - BLOQUE 3) *******************/
.services-showcase .service-row:nth-of-type(3) .tech-intro-box p {
    font-family: inherit !important; 
    font-size: 15.5px !important;     /* Calibrado para máxima nitidez en pantallas de PC */
    line-height: 1.4 !important;      /* Espaciado de líneas óptimo para lectura técnica */
    margin-bottom: 0px !important;  
    margin-left: -15px !important;   
    letter-spacing: 0.3px !important; 
    
    /* 🎨 COLOR PLATINO DE ALTO CONTRASTE: Garantiza una legibilidad perfecta sobre la caja oscura */
    color: #e2e8f0 !important;       
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) !important; /* Protege el contorno de las letras */
}

/********* 5. 📦 CAJA GENERAL QUE ENCIERRA A LOS ÍTEMS (.service-features - BLOQUE 3) ****************/
.services-showcase .service-row:nth-of-type(3) .service-features {    
    margin-top: -10px;       /* Separación fina bajo el panel holográfico */
    margin-bottom: -5px;   /* Calibración simétrica hacia la envoltura del botón */
    padding: 20px 25px;    /* Espacio interno para que la matriz digital respire */
    width: 100%;
    list-style: none;
    
    /* 🛸 RETÍCULA DIGITAL EN PC: Micro-cuadrícula en gris platino pulido (Cian eliminado) */
    background-color: rgba(248, 250, 252, 0.4) !important; /* Base gris hielo sumamente sutil */
    background-image: linear-gradient(rgba(219, 226, 230, 0.3) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(219, 226, 230, 0.3) 1px, transparent 1px) !important;
    background-size: 20px 20px !important; /* Tamaño de la retícula digital de PC */
    
    /* 🛡️ ENMARCADO SÓLIDO PREMIUM: Cambiado de punteado a línea continua limpia */
    border: 1px solid rgba(27, 38, 59, 0.12) !important; /* Borde sólido continuo en gris basalto traslúcido */
    border-radius: 16px !important;
    
    /* Sombra interna para dar profundidad de panel industrial */
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.02) !important;
}


/********* 6. 💊 ÍTEMS / PASTILLAS COMPACTAS (Elementos li individuales - BLOQUE 3) ******************/
.services-showcase .service-row:nth-of-type(3) .service-features li {
    font-family: inherit !important;
    font-size: 14.5px !important;      
    font-weight: 500 !important;
    color: #1e293b !important;        /* Gris grafito ejecutivo */
    
    /* Cápsula modular con degradado de aluminio pulido reflectante */
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(241, 245, 249, 0.9) 100%) !important;
    
    /* Borde estructural micro-pulido y pestaña titanio */
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    border-left: 4px solid #475569 !important; 
    border-radius: 8px !important; 
    
    /* Tu colchón compacto optimizado */
    padding: 4px 16px !important;     
    margin-left: -10px !important; 
    margin-right: -15px !important;
    margin-bottom: 8px !important;    
    
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03) !important;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* Interacción Háptica en PC: Desplazamiento y encendido láser */
.services-showcase .service-row:nth-of-type(3) .service-features li:hover {
    transform: translateX(5px) !important; 
    border-left-color: var(--azul-ste, #00bcd4) !important; 
    background: #ffffff !important;   
    box-shadow: 0 6px 15px rgba(0, 188, 212, 0.12) !important; 
}
.services-showcase .service-row:nth-of-type(3) .service-features li:last-child {
    margin-bottom: 0px !important;   
}

/********* 7. 🎨 ICONOS INTERNOS DE LOS ÍTEMS (Viñetas i - BLOQUE 3) *********************************/
.services-showcase .service-row:nth-of-type(3) .service-features li i {
    font-size: 15px !important;      
    color: var(--azul-ste, #00bcd4) !important; 
    background: transparent !important;
    filter: drop-shadow(0 0 4px rgba(0, 188, 212, 0.6)) !important;
    transition: transform 0.3s ease !important;
}
.services-showcase .service-row:nth-of-type(3) .service-features li:hover i {
    transform: scale(1.2) !important;
    filter: drop-shadow(0 0 8px rgba(0, 188, 212, 0.9)) !important; 
}

/********* 8. 🖼️ IMAGEN / ILUSTRACIÓN SECUNDARIA (BLOQUE 3) ******************************************/
.services-showcase .service-row:nth-of-type(3) .service-image-box img,
.services-showcase .service-row:nth-of-type(3) .service-img img {
    max-width: 100% !important;     
    height: auto !important;
    border-radius: 20px !important;  
    border: 0px solid transparent !important; 
    box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important; 
    margin-top: 0px !important;      
    margin-bottom: 0px !important;   
    filter: none !important;         
}

/********* 9. 📦 CAJA CONTENEDORA DEL BOTÓN EN PC (BLOQUE 3) *********************************/
.services-showcase .service-row:nth-of-type(3) .service-btn-wrapper {
    grid-column: 1 !important;        
    grid-row: 3 !important;           
    display: block !important;
    margin-top: -15px !important;     
}

/********* 10. 🔘 BOTÓN DE ACCIÓN (ESTADO NORMAL - PC INTERNO BLOQUE 3) *****************************/
.services-showcase .service-row:nth-of-type(3) .service-btn-wrapper .btn-ste-small,
.services-showcase .service-row:nth-of-type(3) .service-btn-wrapper .service-btn,
.services-showcase .service-row:nth-of-type(3) .service-btn-wrapper .btn-ste {
    display: inline-block !important; /* Mide exactamente lo que mida su texto */
    font-family: inherit !important;
    font-size: 15px !important;      
    font-weight: 600 !important;
    color: #ffffff !important;       
    background-color: #00bcd4 !important; 
    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;
}

/********* 11. 🔘 BOTÓN DE ACCIÓN (AL PASAR EL CURSOR EN PC BLOQUE 3) ********************************/
.services-showcase .service-row:nth-of-type(3) .service-btn-wrapper .btn-ste-small:hover,
.services-showcase .service-row:nth-of-type(3) .service-btn-wrapper .service-btn:hover,
.services-showcase .service-row:nth-of-type(3) .service-btn-wrapper .btn-ste:hover {
    color: #ffffff !important;       
    background-color: #0097a7 !important; 
    transform: translateY(-2px) !important; 
    box-shadow: 0 8px 20px rgba(0, 188, 212, 0.4) !important;
}




/* --- 🚧 BLOQUE 4: PORTONES Y AUTOMATIZACIÓN --- */

/********* 1. 🚧 CONTENEDOR MAESTRO PRINCIPAL (BLOQUE 4) *****************(BLOQUE 4)***************(BLOQUE 4)****/
.services-showcase .service-row:nth-of-type(4) {
    background-color: #7A7A85; /* Mantiene tu variante de color de base */
    background-image: linear-gradient(135deg, 
        rgba(153, 161, 175, 1) 0%,   
        rgba(125, 133, 145, 0.50) 100%  
    ), url('img/antenas_rfid.webp'); /* Marca de agua específica del bloque 4 */
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-blend-mode: luminosity; 
    border: 0px solid rgba(0, 0, 0, 0.50); 
    border-radius: 30px; 
    padding: 40px 35px; 
    margin-bottom: 25px; 
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2); 
    transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}
.services-showcase .service-row:nth-of-type(4):hover {
    transform: translateY(-5px) !important;
    border-color: rgba(0, 188, 212, 0.4) !important; 
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.3) !important; 
}

/********* 2.A 🔀 CONTENEDOR DE CABECERA HORIZONTAL (BLOQUE 4) ***********************************/
.services-showcase .service-row:nth-of-type(4) .service-header-flex {
    display: flex !important;
    align-items: center !important;   /* Centra verticalmente el icono, la raya y el texto */
    justify-content: flex-start !important;
    gap: 20px !important;             /* Espacio de aire entre el icono, la raya y el texto */
    margin-bottom: 20px !important;   /* Separación inferior respecto a la caja del párrafo */
}

/* Control del Icono dentro de la Cabecera Horizontal (Bloque 4) */
.services-showcase .service-row:nth-of-type(4) .service-header-flex .service-icon i {
    color: #00e5ff !important;       /* 🎨 COLOR DEL ICONO EN PC: Cámbialo por el tono que prefieras */
    font-size: 40px !important;      /* Mantiene el tamaño de impacto visual en monitores */
    text-shadow: 0 0 12px rgba(0, 229, 255, 0.4) !important; /* Micro-resplandor LED para un look cyber premium */
}

/* Propiedades físicas de la raya divisoria láser vertical sincronizada */
.services-showcase .service-row:nth-of-type(4) .service-header-flex .vertical-divider {
    width: 2px !important;            
    height: 38px !important;          
    background-color: #00e5ff !important; /* 🎨 COLOR SINCRONIZADO: Mismo cian cyber del icono */
    display: inline-block !important;
    flex-shrink: 0 !important;        
    opacity: 1 !important;                /* Subido a 1 para maximizar la viveza del color */
    
    /* 🪐 EFECTO LED: Resplandor de energía idéntico al del icono en monitores */
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.5) !important; 
}

/********* 2.B 🏷️ TÍTULO PRINCIPAL (BLOQUE 4 ACOPLADO) *************************************************/
.services-showcase .service-row:nth-of-type(4) .service-header-flex h3 {
    font-family: inherit !important; 
    font-size: 27px !important;      
    color: #000000 !important;       /* Resetea márgenes para alineación perfecta con la raya */
    margin: 0 !important;             
    letter-spacing: 0.5px !important;
    line-height: 1 !important;
}

/********* 3. 📦 CAJA GENERAL QUE ENCIERRA AL PÁRRAFO (.tech-intro-box - BLOQUE 4) *******************/
.services-showcase .service-row:nth-of-type(4) .tech-intro-box {
    margin-top: 5px;      /* 🎛️ Incrementado a 5px para dar una separación elegante bajo la cabecera */
    margin-bottom: -10px;   /* 🎛️ Incrementado a 25px para dar espacio óptimo hacia las viñetas inferiores */
    padding: 18px 25px;    
    padding-left: 30px;  
    
    /* 🛸 TEXTURA DE ALTA TECNOLOGÍA: Cristal líquido oscuro traslúcido */
    background: rgba(11, 22, 34, 0.85) !important; 
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    
    /* 📐 GEOMETRÍA ASIMÉTRICA: Esquinas de corte técnico industrial moderno */
    border-radius: 4px 24px 4px 24px !important; 
    
    /* ⚡ ILUMINACIÓN LÁSER: Marco de neón cian continuo con filamento principal izquierdo */
    border: 1px solid rgba(0, 188, 212, 0.4) !important;
    border-left: 5px solid var(--azul-ste, #00bcd4) !important; 
    
    /* 🪐 RESPLANDOR DIGITAL: Aura holográfica perimetral y relieve interno */
    box-shadow: 0 8px 25px rgba(0, 188, 212, 0.08), 
                inset 0 0 15px rgba(0, 188, 212, 0.03) !important;
    transition: all 0.4s ease !important;
}
.services-showcase .service-row:nth-of-type(4):hover .tech-intro-box {
    border-color: rgba(0, 188, 212, 0.7) !important;
    box-shadow: 0 10px 30px rgba(0, 188, 212, 0.15), 
                inset 0 0 20px rgba(0, 188, 212, 0.05) !important;
}

/********* 4. 📝 PROPIEDADES DEL PÁRRAFO INTRODUCTORIO (Texto interno - BLOQUE 4) *******************/
.services-showcase .service-row:nth-of-type(4) .tech-intro-box p {
    font-family: inherit !important; 
    font-size: 15.5px !important;     /* Calibrado para máxima nitidez en pantallas de PC */
    line-height: 1.4 !important;      /* Espaciado de líneas óptimo para lectura técnica */
    margin-bottom: 0px !important;  
    margin-left: -15px !important;   
    letter-spacing: 0.3px !important; 
    
    /* 🎨 COLOR PLATINO DE ALTO CONTRASTE: Garantiza una legibilidad perfecta sobre la caja oscura */
    color: #e2e8f0 !important;       
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) !important; /* Protege el contorno de las letras */
}

/********* 5. 📦 CAJA GENERAL QUE ENCIERRA A LOS ÍTEMS (.service-features - BLOQUE 4 ACTUALIZADO) ****************/
.services-showcase .service-row:nth-of-type(4) .service-features {    
    margin-top: -10px;       /* Separación fina bajo el panel holográfico */
    margin-bottom: -5px;   /* Calibración simétrica hacia la envoltura del botón */
    padding: 20px 25px;    /* Espacio interno para que la matriz digital respire */
    width: 100%;
    list-style: none;
    
    /* 🛸 RETÍCULA DIGITAL EN PC: Micro-cuadrícula en gris platino pulido (Cian eliminado) */
    background-color: rgba(248, 250, 252, 0.4) !important; /* Base gris hielo sumamente sutil */
    background-image: linear-gradient(rgba(219, 226, 230, 0.3) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(219, 226, 230, 0.3) 1px, transparent 1px) !important;
    background-size: 20px 20px !important; /* Tamaño de la retícula digital de PC */
    
    /* 🛡️ ENMARCADO SÓLIDO PREMIUM: Cambiado de punteado a línea continua limpia */
    border: 1px solid rgba(27, 38, 59, 0.12) !important; /* Borde sólido continuo en gris basalto traslúcido */
    border-radius: 16px !important;
    
    /* Sombra interna para dar profundidad de panel industrial */
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.02) !important;
}


/********* 6. 💊 ÍTEMS / PASTILLAS COMPACTAS (Elementos li individuales - BLOQUE 4 REDONDEADO) ******************/
.services-showcase .service-row:nth-of-type(4) .service-features li {
    font-family: inherit !important;
    font-size: 14.5px !important; /* Letra técnica estilizada */     
    color: #1e293b !important; /* Gris grafito de alta legibilidad ejecutiva */       
    
    /* Cápsula modular con degradado de aluminio pulido reflectante */
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(241, 245, 249, 0.9) 100%) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important; 
    border-left: 4px solid #475569 !important; /* Pestaña lateral color titanio oscuro */
    
    /* 🌟 CORREGIDO: Cambiado de 8px a 16px para sincronizar la curvatura con el Bloque 3 */
    border-radius: 16px !important; 
    
    /* Separaciones y colchón ergonómico alineado */
    padding: 4px 16px !important;     
    margin-left: -10px !important; 
    margin-right: -15px !important;
    margin-bottom: 8px !important; /* Distancia vertical calibrada entre cápsulas */   
    
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03) !important;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
}


/* Interacción Háptica en PC: Desplazamiento cinético y encendido cian al posar el mouse */
.services-showcase .service-row:nth-of-type(4) .service-features li:hover {
    transform: translateX(5px) !important; /* Desplazamiento indicativo hacia la derecha */
    border-left-color: var(--azul-ste, #00bcd4) !important; /* La pestaña titanio se enciende en cian */
    background: #ffffff !important; /* Pasa a blanco puro brillante */  
    box-shadow: 0 6px 15px rgba(0, 188, 212, 0.12) !important; /* Resplandor láser inferior */
}
.services-showcase .service-row:nth-of-type(4) .service-features li:last-child {
    margin-bottom: 0px !important; /* Remueve el margen residual al último elemento */  
}

/********* 7. 🎨 ICONOS INTERNOS DE LOS ÍTEMS (Viñetas i - BLOQUE 4 ACTUALIZADO) *********************************/
.services-showcase .service-row:nth-of-type(4) .service-features li i {
    font-size: 15px !important;      
    color: var(--azul-ste, #00bcd4) !important; /* Tono cian unificado */      
    background: transparent !important;
    
    /* Efecto de diodo LED encendido en el nodo */
    filter: drop-shadow(0 0 4px rgba(0, 188, 212, 0.6)) !important;
    transition: transform 0.3s ease !important;
}

/* El nodo (icono) hace un micro-pulso de escala e incrementa su brillo LED */
.services-showcase .service-row:nth-of-type(4) .service-features li:hover i {
    transform: scale(1.2) !important;
    filter: drop-shadow(0 0 8px rgba(0, 188, 212, 0.9)) !important; /* Satura el brillo del diodo */
}


/********* 8. 🖼️ IMAGEN / ILUSTRACIÓN SECUNDARIA (BLOQUE 4) ******************************************/
.services-showcase .service-row:nth-of-type(4) .service-image-box img,
.services-showcase .service-row:nth-of-type(4) .service-img img {
    max-width: 100% !important;     
    height: auto !important;
    border-radius: 20px !important;  
    border: 0px solid transparent !important; 
    box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important; 
    margin-top: 0px !important;      
    margin-bottom: 0px !important;   
    filter: none !important;         
}

/********* 9. 📦 CAJA CONTENEDORA DEL BOTÓN EN PC (BLOQUE 4) *********************************/
.services-showcase .service-row:nth-of-type(4) .service-btn-wrapper {
    grid-column: 1 !important;        
    grid-row: 3 !important;           
    display: block !important;
    margin-top: -15px !important;     
}

/********* 10. 🔘 BOTÓN DE ACCIÓN (ESTADO NORMAL - PC INTERNO BLOQUE 4) *****************************/
.services-showcase .service-row:nth-of-type(4) .service-btn-wrapper .btn-ste-small,
.services-showcase .service-row:nth-of-type(4) .service-btn-wrapper .service-btn,
.services-showcase .service-row:nth-of-type(4) .service-btn-wrapper .btn-ste {
    display: inline-block !important; 
    font-family: inherit !important;
    font-size: 15px !important;      
    font-weight: 600 !important;
    color: #ffffff !important;       
    background-color: #00bcd4 !important; 
    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;
}

/********* 11. 🔘 BOTÓN DE ACCIÓN (AL PASAR EL CURSOR EN PC BLOQUE 4) ********************************/
.services-showcase .service-row:nth-of-type(4) .service-btn-wrapper .btn-ste-small:hover,
.services-showcase .service-row:nth-of-type(4) .service-btn-wrapper .service-btn:hover,
.services-showcase .service-row:nth-of-type(4) .service-btn-wrapper .btn-ste:hover {
    color: #ffffff !important;       
    background-color: #0097a7 !important; 
    transform: translateY(-2px) !important; 
    box-shadow: 0 8px 20px rgba(0, 188, 212, 0.4) !important;
}





/********* 1. 🛠️ CONTENEDOR MAESTRO PRINCIPAL (BLOQUE 5 ACTUALIZADO) *****************(BLOQUE 5)*************(BLOQUE 5)********/
.services-showcase .service-row:nth-of-type(5) {
    background-color: #020618; /* 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/servicio_cinco.webp'); /* 🖼️ Foto del nuevo servicio */
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-blend-mode: luminosity; 
    border: 0px solid rgba(0, 0, 0, 0.50); 
    border-radius: 30px; 
    padding: 40px 35px; 
    margin-bottom: 25px; 
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2); 
    transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}
.services-showcase .service-row:nth-of-type(5):hover {
    transform: translateY(-5px) !important;
    border-color: rgba(0, 188, 212, 0.4) !important; 
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.3) !important; 
}

/********* 2.A 🔀 CONTENEDOR DE CABECERA HORIZONTAL (NUEVO - BLOQUE 5) ***********************************/
.services-showcase .service-row:nth-of-type(5) .service-header-flex {
    display: flex !important;
    align-items: center !important; /* Centra verticalmente el icono, la raya y el texto */
    justify-content: flex-start !important;
    gap: 20px !important; /* Espacio de aire entre los elementos */
    margin-bottom: 20px !important; /* Separación inferior respecto a la caja gris */
}
/* Control del Icono dentro de la Cabecera Horizontal */
.services-showcase .service-row:nth-of-type(5) .service-header-flex .service-icon i {
    color: #00e5ff !important; /* Tono cian cyber */
    font-size: 40px !important; 
    text-shadow: 0 0 12px rgba(0, 229, 255, 0.4) !important; /* Micro-resplandor LED */
}
/* Propiedades físicas de la raya divisoria láser vertical sincronizada */
.services-showcase .service-row:nth-of-type(5) .service-header-flex .vertical-divider {
    width: 2px !important; 
    height: 38px !important; 
    background-color: #00e5ff !important; 
    display: inline-block !important;
    flex-shrink: 0 !important; 
    opacity: 1 !important;
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.5) !important; 
}

/********* 2.B 🏷️ TÍTULO PRINCIPAL (BLOQUE 5 ACTUALIZADO) *************************************************/
.services-showcase .service-row:nth-of-type(5) .service-header-flex h3 {
    font-family: inherit !important; 
    font-size: 27px !important;      
    color: #000000 !important; /* 🌟 SINCRO DE MOLDE: Replicado a negro carbón exacto según tu código base */      
    margin: 0 !important;  
    letter-spacing: 0.5px !important;
    line-height: 1 !important;
}

/********* 3. 📦 CAJA GENERAL QUE ENCIERRA AL PÁRRAFO (.tech-intro-box - BLOQUE 5) *******************/
.services-showcase .service-row:nth-of-type(5) .tech-intro-box {
    margin-top: 5px;      /* Separación elegante bajo la cabecera horizontal */
    margin-bottom: -10px; /* Calibración de empaquetado hacia las viñetas */   
    padding: 18px 25px;         
    padding-left: 30px;  
    
    /* Textura holográfica: Cristal líquido oscuro traslúcido */
    background: rgba(11, 22, 34, 0.85) !important; 
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    
    /* Geometría asimétrica industrial moderna */
    border-radius: 4px 24px 4px 24px !important; 
    border: 1px solid rgba(0, 188, 212, 0.4) !important;
    border-left: 5px solid var(--azul-ste, #00bcd4) !important; 
    box-shadow: 0 8px 25px rgba(0, 188, 212, 0.08), 
                inset 0 0 15px rgba(0, 188, 212, 0.03) !important;
    transition: all 0.4s ease !important;
}
.services-showcase .service-row:nth-of-type(5):hover .tech-intro-box {
    border-color: rgba(0, 188, 212, 0.7) !important;
    box-shadow: 0 10px 30px rgba(0, 188, 212, 0.15), 
                inset 0 0 20px rgba(0, 188, 212, 0.05) !important;
}

/********* 4. 📝 PROPIEDADES DEL PÁRRAFO INTRODUCTORIO (Texto interno - BLOQUE 5) *******************/
.services-showcase .service-row:nth-of-type(5) .tech-intro-box p {
    font-family: inherit !important; 
    font-size: 15.5px !important; /* Calibrado para monitores de PC */     
    line-height: 1.4 !important; /* Espaciado de líneas óptimo para lectura técnica */   
    margin-bottom: 0px !important;  
    margin-left: -15px !important;   
    letter-spacing: 0.3px !important;
    
    /* Color platino de alto contraste para lectura nítida sobre la caja oscura */
    color: #e2e8f0 !important; 
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) !important;
}

/********* 5. 📦 CAJA GENERAL QUE ENCIERRA A LOS ÍTEMS (.service-features - BLOQUE 5) ****************/
.services-showcase .service-row:nth-of-type(5) .service-features {    
    margin-top: -10px; /* Cancela el aire residual bajo el panel holográfico */
    margin-bottom: -5px; /* Equilibrio simétrico hacia la envoltura del botón */
    padding: 20px 25px; /* Espacio interno de respiración digital */
    width: 100%;
    list-style: none;
    
    /* Retícula digital en PC: Micro-cuadrícula neutral en gris platino pulido (Cian eliminado) */
    background-color: rgba(248, 250, 252, 0.4) !important; /* Base gris hielo sumamente sutil */
    background-image: linear-gradient(rgba(219, 226, 230, 0.3) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(219, 226, 230, 0.3) 1px, transparent 1px) !important;
    background-size: 20px 20px !important; 
    
    /* Enmarcado sólido premium continuo en gris basalto traslúcido */
    border: 1px solid rgba(27, 38, 59, 0.12) !important; 
    border-radius: 16px !important;
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.02) !important;
}


/********* 6. 💊 ÍTEMS / PASTILLAS COMPACTAS (Elementos li individuales - BLOQUE 5) ******************/
.services-showcase .service-row:nth-of-type(5) .service-features li {
    font-family: inherit !important;
    font-size: 14.5px !important; /* Letra técnica estilizada */     
    color: #1e293b !important; /* Gris grafito de alta legibilidad */       
    
    /* Cápsula modular con degradado de aluminio pulido reflectante */
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(241, 245, 249, 0.9) 100%) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important; 
    border-left: 4px solid #475569 !important; /* Pestaña titanio oscuro */
    
    /* 🌟 CORREGIDO: Ajustado a 16px para mantener la misma curvatura del bloque 3 y 4 */
    border-radius: 16px !important; 
    
    /* Colchón ergonómico y alineaciones del panel */
    padding: 4px 16px !important;
    margin-left: -10px !important; 
    margin-right: -15px !important;
    margin-bottom: 8px !important; /* Distancia vertical entre pastillas */   
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03) !important;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
}
/* Interacción Háptica en PC: Desplazamiento y encendido cian al posar el mouse */
.services-showcase .service-row:nth-of-type(5) .service-features li:hover {
    transform: translateX(5px) !important;
    border-left-color: var(--azul-ste, #00bcd4) !important; /* Enciende la pestaña en cian */
    background: #ffffff !important; /* Pasa a blanco brillante */
    box-shadow: 0 6px 15px rgba(0, 188, 212, 0.12) !important;
}
.services-showcase .service-row:nth-of-type(5) .service-features li:last-child {
    margin-bottom: 0px !important;   
}

/********* 7. 🎨 ICONOS INTERNOS DE LOS ÍTEMS (Viñetas i - BLOQUE 5) *********************************/
.services-showcase .service-row:nth-of-type(5) .service-features li i {
    font-size: 15px !important; /* Sincronizado a 15px */     
    color: var(--azul-ste, #00bcd4) !important; /* Tono cian unificado */       
    background: transparent !important;
    filter: drop-shadow(0 0 4px rgba(0, 188, 212, 0.6)) !important; /* Diodo LED encendido */
    transition: transform 0.3s ease !important;
}
/* Micro-pulso de escala y aumento de saturación LED en el hover */
.services-showcase .service-row:nth-of-type(5) .service-features li:hover i {
    transform: scale(1.2) !important;
    filter: drop-shadow(0 0 8px rgba(0, 188, 212, 0.9)) !important;
}

/********* 8. 🖼️ IMAGEN / ILUSTRACIÓN SECUNDARIA (BLOQUE 5) ******************************************/
.services-showcase .service-row:nth-of-type(5) .service-image-box img,
.services-showcase .service-row:nth-of-type(5) .service-img img {
    max-width: 100% !important;     
    height: auto !important;
    border-radius: 20px !important;  
    border: 0px solid transparent !important; 
    box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important; 
    margin-top: 0px !important;      
    margin-bottom: 0px !important;   
    filter: none !important;         
}

/********* 9. 📦 CAJA CONTENEDORA DEL BOTÓN EN PC (NUEVA - BLOQUE 5) *********************************/
.services-showcase .service-row:nth-of-type(5) .service-btn-wrapper {
    grid-column: 1 !important; /* Lo ancla en la columna izquierda de PC */
    grid-row: 3 !important; /* Lo posiciona en la tercera fila de la rejilla */
    display: block !important;
    margin-top: -15px !important; /* Acople milimétrico de PC */
}

/********* 10. 🔘 BOTÓN DE ACCIÓN (ESTADO NORMAL - PC INTERNO BLOQUE 5) *****************************/
.services-showcase .service-row:nth-of-type(5) .service-btn-wrapper .btn-ste-small,
.services-showcase .service-row:nth-of-type(5) .service-btn-wrapper .service-btn,
.services-showcase .service-row:nth-of-type(5) .service-btn-wrapper .btn-ste {
    display: inline-block !important; /* Mide exactamente lo que mida su texto */
    font-family: inherit !important;
    font-size: 15px !important;      
    font-weight: 600 !important;
    color: #ffffff !important;       
    background-color: #00bcd4 !important; 
    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;
}

/********* 11. 🔘 BOTÓN DE ACCIÓN (AL PASAR EL CURSOR EN PC BLOQUE 5) ********************************/
.services-showcase .service-row:nth-of-type(5) .service-btn-wrapper .btn-ste-small:hover,
.services-showcase .service-row:nth-of-type(5) .service-btn-wrapper .service-btn:hover,
.services-showcase .service-row:nth-of-type(5) .service-btn-wrapper .btn-ste:hover {
    color: #ffffff !important;       
    background-color: #0097a7 !important; 
    transform: translateY(-2px) !important; 
    box-shadow: 0 8px 20px rgba(0, 188, 212, 0.4) !important;
}


/* ==========================================================================
   12. FRANJA 4: RECTÁNGULO LINEAL COMPACTO Y DOBLES FLECHITAS EN ENLACES (PC)
   ========================================================================== */

.services-showcase .service-row .service-features {
    grid-column: 1;
    grid-row: 2;
    margin-top: -30px; 
    margin-bottom: 20px;
    width: 100%;
    
    /* RECTÁNGULO DE BORDE COMPACTO CON DEGRADADO LÁSER ATENUADO (ESTILO FIJADO) */
    border: 2px solid var(--azul-ste); 
    border-radius: 12px; 
    padding: 12px 20px; 
    list-style: none; 
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.01); 
}

/* Ítems internos y filamentos divisores de las fichas */
.services-showcase .service-row .service-features li {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--gris-texto);
    padding: 4px 0; 
    display: flex !important; 
    align-items: center;
    gap: 12px; 
    border-bottom: 1px solid rgba(86, 200, 192, 0.1); 
}

.services-showcase .service-row .service-features li:last-child {
    border-bottom: none;
}

/* RESTAURACIÓN ABSOLUTA DE LAS DOBLES FLECHITAS (fa-check-double) PUREZA TRANSPARENTE */
.services-showcase .service-row .service-features li i.fa-check-double,
.services-showcase .service-row .service-features li i {
    background: transparent !important; 
    background-color: transparent !important;
    border: none !important; 
    border-radius: 0 !important; 
    box-shadow: none !important;
    color: var(--azul-ste) !important; 
    font-size: 1rem !important; 
    display: inline-block !important;
    width: auto !important; 
    height: auto !important; 
    flex-shrink: 0 !important; 
    margin: 0;
    padding: 0;
}

/* --- BOTÓN DE ACCIÓN INTERNO EN PLACAS --- */
.btn-ste-small {
    display: inline-block;
    padding: 10px 25px;
    background: var(--azul-ste);
    color: var(--blanco);
    text-decoration: none;
    font-weight: bold;
    border-radius: 4px;
    font-size: 14px;
    transition: background 0.2s ease, transform 0.2s ease;
}

.btn-ste-small:hover {
    background: #00acc1;
    transform: translateY(-1px);
}

/* ==========================================================================
   13. FRANJA 4: CONTENEDOR MULTI-COLUMNA DE IMÁGENES GEMELAS (PC)
   ========================================================================== */

.service-images {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.service-images img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.service-images img:hover { 
    transform: scale(1.05); 
}

/* ==========================================================================
   14. FRANJA 5: MÉTODO DE TRABAJO (PROCESO DE PASOS 1 AL 4 EN PC)
   ========================================================================== */

.process-section { 
    padding: 40px 0; /* Espaciado óptimo tras las placas de servicios */
    margin-top: -60px; 
    background: #fdfdfd; 
}

.process-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 40px;
    gap: 15px;
}

/* --- TARJETAS INDIVIDUALES DEL FLUJO DE TRABAJO --- */
.process-card {
    background: var(--blanco);
    padding: 30px 20px;
    border-radius: 12px;
    text-align: center;
    flex: 1;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    border-bottom: 3px solid var(--azul-ste);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.process-card:hover { 
    transform: translateY(-10px); 
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.process-icon {
    font-size: 35px;
    color: var(--azul-ste);
    margin-bottom: 15px;
}

.process-card h3 { 
    font-size: 1.1rem; 
    color: #1a2e44; 
    margin-bottom: 10px; 
}

.process-card p { 
    font-size: 0.85rem; 
    color: #666; 
    line-height: 1.5; 
}

/* --- FLECHAS INDICADORAS DE FLUJO HORIZONTAL EN COMPUTADORAS --- */
.process-arrow { 
    color: #ddd; 
    font-size: 20px; 
}

/* ==========================================================================
   15. FRANJA 6: ZONAS DE COBERTURA TÉCNICO-OPERATIVA (BASE REGIONAL PC)
   ========================================================================== */

.coverage-section {
    padding: 80px 20px;
    background-color: var(--blanco);
}

.coverage-section .coverage-block {
    margin-bottom: 50px;
}

/* --- BLOQUE 1: ESTRUCTURA REGIONAL CENTRAL (ENCABEZADOS) --- */
.coverage-block .block-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 40px;
}

.coverage-block .block-header i {
    font-size: 32px;
    color: var(--azul-ste);
    margin-bottom: 15px;
}

.coverage-block .block-header h3 {
    font-size: 1.6rem;
    color: #1a2e44;
    margin-bottom: 10px;
    font-weight: 700;
}

.coverage-block .block-header p {
    font-size: 0.95rem;
    color: var(--gris-texto);
}

/* --- CUADRÍCULA DE REGIONES (3 COLUMNAS SIMÉTRICAS EN PC) --- */
.coverage-block .regions-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.regions-grid .region-card {
    background: #f8fafc;
    padding: 35px 25px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

/* Interacción: Elevación mecánica y encendido láser de tarjeta regional al pasar el mouse */
.regions-grid .region-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
    border-color: var(--azul-ste);
}

.region-card .region-badge {
    position: absolute;
    top: -12px;
    left: 25px;
    background: #1a2e44;
    color: var(--blanco);
    padding: 4px 14px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 20px;
    letter-spacing: 1px;
}

.region-card h4 {
    font-size: 1.3rem;
    color: #1a2e44;
    margin-bottom: 10px;
    font-weight: 700;
}

.region-card .municipalities-text {
    font-size: 0.85rem;
    color: #64748b;
    margin-bottom: 15px;
}

/* --- LISTADO INTERNO DE UBICACIONES Y LOCALIDADES --- */
.region-card .locations-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.locations-list li {
    font-size: 0.9rem;
    color: #334155;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
}

.locations-list li i {
    color: var(--azul-ste);
    font-size: 0.85rem;
}

/* ==========================================================================
   16. FRANJA 6: ZONAS DE COBERTURA TÉCNICO-OPERATIVA (DISEÑO PREMIUM NACIONAL)
   ========================================================================== */

.coverage-section .national-coverage-block {
    max-width: 1200px;
    margin: 40px auto 0;
}

.national-coverage-block .national-card {
    background: linear-gradient(135deg, #1a2e44 0%, #0c1622 100%);
    color: var(--blanco);
    border-radius: 16px;
    padding: 40px;
    display: flex;
    align-items: center;
    gap: 40px;
    box-shadow: 0 15px 35px rgba(26, 46, 68, 0.15);
}

.national-card .national-icon {
    font-size: 60px;
    color: var(--azul-ste);
    flex-shrink: 0;
    animation: pulseGlow 3s infinite ease-in-out; /* Disparador cinético constante */
}

/* --- ANEXO: KEYFRAMES DE RETROILUMINACIÓN NACIONAL --- */
@keyframes pulseGlow {
    0% { transform: scale(1); filter: drop-shadow(0 0 2px rgba(0, 188, 212, 0.2)); }
    50% { transform: scale(1.08); filter: drop-shadow(0 0 15px rgba(0, 188, 212, 0.6)); }
    100% { transform: scale(1); filter: drop-shadow(0 0 2px rgba(0, 188, 212, 0.2)); }
}

.national-card .national-content {
    flex: 1;
}

.national-content .national-badge {
    background: rgba(0, 188, 212, 0.15);
    color: #00e5ff;
    padding: 4px 12px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 4px;
    letter-spacing: 1px;
    display: inline-block;
    margin-bottom: 12px;
}

.national-content h3 {
    font-size: 1.8rem;
    margin-bottom: 10px;
    font-weight: 800;
}

.national-content p {
    font-size: 0.95rem;
    color: #94a3b8;
    line-height: 1.6;
    margin-bottom: 20px;
}

/* --- ETIQUETAS MODULARES DE LOS ESTADOS DE VENEZUELA --- */
.national-content .states-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.states-tags .state-tag {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #f1f5f9;
    padding: 6px 14px;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 6px;
    transition: all 0.2s ease;
}

/* Efecto Hover: Invierte la cromática al pasar el cursor sobre la etiqueta de un estado */
.states-tags .state-tag:hover {
    background: var(--azul-ste);
    border-color: var(--azul-ste);
    color: #1a2e44;
    transform: scale(1.05);
}

/* ==========================================================================
   ANEXO OPTIMIZADO: KEYFRAMES DE RETROILUMINACIÓN Y GLOW INTEGRAL (HARDWARE)
   ========================================================================== */

@keyframes pulseGlow {
    0% { 
        transform: scale(1); 
        opacity: 0.8;
        filter: drop-shadow(0 0 2px rgba(0, 188, 212, 0.2)); 
    }
    50% { 
        transform: scale(1.06); 
        opacity: 1;
        filter: drop-shadow(0 0 15px rgba(0, 188, 212, 0.6)); 
    }
    100% { 
        transform: scale(1); 
        opacity: 0.8;
        filter: drop-shadow(0 0 2px rgba(0, 188, 212, 0.2)); 
    }
}


/* ==========================================================================
   17. FRANJA 7: EMERGENCIA TÉCNICA (CTA) - ASISTENCIA CRÍTICA 24/7 (PC)
   ========================================================================== */

.cta-emergency {
    /* 🌟 RESTAURADO: Tu degradado original exacto */
    background: linear-gradient(135deg, #ff98D0 0%, #f57c00 100%); 
    padding: 50px 0;
    margin-bottom: 15px;
    color: var(--blanco);
}

.cta-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
}

.cta-text {
    display: flex;
    align-items: center;
    gap: 20px;
}

.cta-text i {
    font-size: 50px;
    opacity: 0.8;
}

.cta-text h2 {
    font-size: 1.8rem;
    margin-bottom: 5px;
    font-weight: 800;
}

.cta-text p {
    font-size: 1.1rem;
    font-weight: 400;
}

.cta-actions {
    display: flex;
    gap: 15px;
}

/* --- BOTONES DE LLAMADO DE ALTA ACCIÓN ASISTENCIAL --- */
.btn-emergency, .btn-whatsapp-cta {
    padding: 15px 30px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Botón de Llamada Telefónica Directa de Ingeniería */
.btn-emergency {
    background: #1a2e44; /* Azul Marino muy oscuro de alto contraste corporativo */
    color: var(--blanco);
}

/* Botón de Enlace Directo a la API de WhatsApp */
.btn-whatsapp-cta {
    background: #25d366; /* Verde oficial WhatsApp */
    color: var(--blanco);
}

/* Respuesta cinética al posar el cursor sobre los pulsadores de emergencia */
.btn-emergency:hover, .btn-whatsapp-cta:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}


/* ==========================================================================
   18. FRANJA 8: FORMULARIO DE COTIZACIÓN - CHASIS ORO INDUSTRIAL (PC/MÓVIL)
   ========================================================================== */
.quote-contact-wrapper { 
    padding: 80px 20px; 
    background: #ffffff !important; /* Mantiene el fondo exterior limpio para destacar la placa */
}

.contact-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
    align-items: start;
}

.quote-form-section {
    width: 100%;
    max-width: 750px;
    margin: 0 auto;
    box-sizing: border-box;
}

/* --- ⚡ RE-DISEÑO ESTILO TARJETA INTERNACIONAL CON COLOR ALTERNATIVO --- */
.cotizacion-block {
    /* Fondo Cyber-Oscuro profundo traslúcido unificado con micro-tinte Oro al 2% */
    background: linear-gradient(135deg, rgba(11, 22, 34, 0.98) 0%, rgba(20, 35, 38, 0.95) 100%) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    
    padding: 40px;
    /* Filamento perimetral sutil en cromo atenuado */
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    
    /* ⚡ EL TRUCO DE LA FIRMA: Haz láser en el filo izquierdo unificado en Oro Industrial */
    border-left: 5px solid #d4af37 !important; 
    border-top: none !important; /* Removemos el borde superior para calcar la retícula de las tarjetas covenin */
    
    border-radius: 16px !important; /* Esquinas suavizadas unificadas completas */
    margin: 0 auto;
    width: 100%;
    /* Halo lumínico expansivo sincronizado en el Oro de alta gama al 6% en reposo */
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45),
                0 4px 20px rgba(212, 175, 55, 0.06) !important;
    text-align: left;
    box-sizing: border-box;
    position: relative;
    transition: border-color 0.4s ease, box-shadow 0.4s ease !important;
}

/* Título de la consola flotante */
.cotizacion-block h2 {
    color: #ffffff !important; /* Blanco brillante nítido */
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6) !important;
    margin-bottom: 25px;
    text-transform: uppercase;
    font-weight: 800;
    font-size: 1.5rem;
    text-align: center;
    letter-spacing: 0.8px;
}

/* --- CAMPOS Y ETIQUETAS DE ENTRADA (ESTILO PANEL DIGITAL) --- */
.cotizacion-block label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    color: #cbd5e1 !important; /* Platino de alta visibilidad para destruir lo blancuzco */
    font-size: 0.95rem;
}

.cotizacion-block input, 
.cotizacion-block select, 
.cotizacion-block textarea {
    width: 100%;
    padding: 12px 14px;
    margin-bottom: 18px;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px;
    font-family: inherit;
    background-color: rgba(11, 22, 34, 0.5) !important;
    color: #ffffff !important; /* Texto que digita el usuario en blanco puro */
    box-sizing: border-box;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}

.cotizacion-block select option {
    background-color: #111b24 !important;
    color: #ffffff !important;
}

/* ✨ INTERFAZ ACTIVA: Al pulsar un campo, se ilumina en sintonía con el haz de la tarjeta */
.cotizacion-block input:focus, 
.cotizacion-block select:focus, 
.cotizacion-block textarea:focus {
    border-color: #d4af37 !important; /* El diodo del campo se enciende en Oro */
    background-color: rgba(11, 22, 34, 0.8) !important;
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.20) !important;
    outline: none;
}

/* --- BOTÓN DE ENVÍO INTEGRADO EN GRADIENTE ORO DE ALTA CONVERSIÓN --- */
.cotizacion-block button[type="submit"] {
    width: 100%;
    background: linear-gradient(135deg, #d4af37 0%, #aa8214 100%) !important;
    color: #111111 !important; /* Negro de alta densidad semántica */
    padding: 15px;
    border: none;
    border-radius: 8px;
    font-weight: 800;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3) !important;
    box-sizing: border-box;
    transition: all 0.3s ease;
}

/* ✨ INTERACCIÓN CINÉTICA DE IMPACTO AL PASAR EL CURSOR SOBRE LA CONSOLA */
.cotizacion-block:hover {
    border-color: rgba(212, 175, 55, 0.4) !important;
    /* Halo lumínico dorado expansivo que aviva toda la zona de cotización */
    box-shadow: 0 25px 55px rgba(0, 0, 0, 0.55),
                0 0 30px rgba(212, 175, 55, 0.25) !important;
}

.cotizacion-block button[type="submit"]:hover {
    background: #ffffff !important; /* Destello blanco puro en el botón */
    color: #111111 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(212, 175, 55, 0.5) !important;
}




/* ==========================================================================
   19. FRANJA 9: INFORMACIÓN DE CONTACTO (TARJETAS CYBER-VERDE DE ASESORES)
   ========================================================================== */
.contact-section {
    width: 100%;
    max-width: 1200px;
    margin: 60px auto; 
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center; 
    text-align: center;
}

.contact-section h2 {
    color: #00bcd4 !important; /* Mantiene tu Azul STE corporativo en el encabezado general */
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
    margin-bottom: 40px; 
    width: 100%;
    text-align: center !important; 
    font-size: 2.2rem;
    text-transform: uppercase;
}

/* Contenedor flexible para alinear las tarjetas en paralelo */
.contact-info-container {
    display: flex;
    justify-content: center; 
    gap: 30px;
    flex-wrap: wrap; 
    width: 100%;
}

/* --- 🌟 VARIANTE: TARJETA INDIVIDUAL (JOHN / ADRIAN) EN VERDE LED PREMIUM --- */
.contact-person {
    /* Base Cyber-Oscura traslúcida unificada con un micro-tinte Verde al 2% */
    background: linear-gradient(145deg, rgba(11, 22, 34, 0.96) 0%, rgba(46, 204, 113, 0.02) 100%) !important; 
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    
    padding: 30px;
    border-radius: 16px !important; 
    
    /* Filamento perimetral sutil e inyección de Haz Láser Izquierdo en Verde Esmeralda */
    border: 1px solid rgba(46, 204, 113, 0.18) !important;
    border-left: 5px solid #2ecc71 !important; /* ⚡ HAZ LÁSER VERDE ACTIVO */
    
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important; 
    max-width: 350px;
    width: 100%;
    transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1), 
                box-shadow 0.35s cubic-bezier(0.25, 1, 0.5, 1) !important;
    will-change: transform, box-shadow;
}

.contact-person h3 {
    color: #ffffff !important; /* Letras de los nombres en blanco brillante */
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
    margin-bottom: 15px !important;
    font-size: 1.25rem !important; 
    font-weight: 700;
}

.contact-person p {
    margin: 0 !important;
    width: 100% !important;
}

.contact-person a {
    /* ⚡ ACCIÓN MÁXIMA: Pulsador panelado en gradiente Verde Esmeralda VVVF */
    background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%) !important;
    color: #111111 !important; /* Texto negro carbón para máxima nitidez */
    font-weight: 800 !important;
    text-transform: uppercase !important;
    font-size: 14px !important;
    letter-spacing: 0.5px !important;
    
    padding: 12px 20px !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px;
    width: 100% !important; 
    box-shadow: 0 4px 10px rgba(46, 204, 113, 0.2) !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

/* Forzado cromático para el icono interior de WhatsApp */
.contact-person a .fa-whatsapp {
    color: #111111 !important; /* Icono en negro para fusionarse con el botón verde */
    font-size: 1.15rem !important;
    filter: none !important;
}

/* ✨ INTERACCIÓN INTERACTIVA HÁPTICA (HOVER) */
.contact-person:hover {
    background: rgba(11, 22, 34, 0.99) !important;
    border-color: #2ecc71 !important; /* El orillo perimetral se enciende en verde vivo */
    transform: translateY(-6px) !important; /* Micro-elevación mecánica unificada */
    /* Halo lumínico expansivo sincronizado en Verde Esmeralda al 30% */
    box-shadow: 0 18px 40px rgba(46, 204, 113, 0.3) !important;
}

.contact-person a:hover {
    background: #ffffff !important; /* El botón pasa a blanco brillante */
    color: #111111 !important;
    box-shadow: 0 6px 15px rgba(46, 204, 113, 0.4) !important;
}

.contact-person a:hover .fa-whatsapp {
    color: #25D366 !important; /* Recupera su color de marca al posar el mouse */
}

/* ==========================================================================
   20. FRANJA 9: INFORMACIÓN DE CONTACTO (TARJETA MARINA Y REDES SOCIALES)
   ========================================================================== */

/* --- TARJETA DE INFORMACIÓN CORPORATIVA CENTRALIZED --- */
.contact-info-card {
    background: #1a2e44; 
    color: white;
    padding: 40px;
    border-radius: 15px;
    border-left: 8px solid var(--azul-ste); /* Filamento de luz guía turquesa */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    
    /* Fuerza la alineación estructural hacia el centro */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.contact-info-card h2 {
    color: #ffffff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    margin-bottom: 25px;
    width: 100%;
    text-align: center; /* Garantiza el centrado del encabezado en PC */
    font-weight: 800;
}

.contact-item { 
    margin-bottom: 30px; 
    width: 100%;
}

.contact-item h3 { 
    color: var(--azul-ste); 
    margin-bottom: 10px;
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
}

/* Enlaces rápidos a canales de mensajería unificada (WhatsApp) */
.whatsapp-link {
    color: white;
    text-decoration: none;
    font-size: 1.2rem;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: opacity 0.2s ease;
}

.whatsapp-link:hover {
    opacity: 0.9;
}

/* Forzado permanente del color oficial para la marca registrada de WhatsApp */
.fa-whatsapp { 
    color: #25D366 !important; 
} 

/* --- CANALES SOCIALES INTEGRADOS --- */
.social-contact {
    margin-top: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 20px;
    width: 100%;
}

.social-contact p { 
    margin-bottom: 15px; 
    font-size: 0.95rem; 
    display: flex; 
    align-items: center; 
    justify-content: center; /* Centra horizontalmente el contenido de la red */
    gap: 10px; 
}

.social-contact a { 
    color: var(--azul-ste); 
    text-decoration: none; 
    font-weight: 500; 
    transition: color 0.2s ease;
}

.social-contact a:hover {
    color: #ffffff;
}


/* ==========================================================================
   21. FRANJA 9: CONECTORES DIGITALES (RECUADRO GRIS DE REDES SOCIALES)
   ========================================================================== */

.social-links-container {
    width: 100%;
    margin-top: 20px;
    padding: 20px;
    background: #f4f4f4; /* Gris claro industrial de fondo panelado */
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra los bloques de viñetas en la tarjeta de redes */
}

.social-links-container p {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important; /* Espacio natural milimétrico entre el icono y la red */
    margin-bottom: 12px !important;
    font-size: 0.95rem !important;
    color: #333333 !important; /* Texto oscuro de alto contraste de lectura */
}

/* Alineación compacta de iconos sin separaciones ni anchos fijos remanentes */
.social-links-container i {
    font-size: 1.2rem !important;
    width: auto !important; 
    display: inline-block !important;
}

/* Nomenclaturas cromáticas oficiales de marcas digitales */
.social-links-container .fa-instagram { 
    color: #E1306C !important; 
}

.social-links-container .fa-envelope { 
    color: #00bcd4 !important; 
}

/* Estilo de ingeniería para los hipervínculos de redes */
.social-links-container a {
    color: #1a2e44 !important; /* Azul marino para garantizar legibilidad sobre el gris */
    text-decoration: none !important;
    font-weight: 600 !important;
    transition: color 0.3s ease, text-decoration 0.3s ease;
}

/* Interacción Hover: Encendido láser turquesa y subrayado técnico corporativo */
.social-links-container a:hover {
    color: #00bcd4 !important; 
    text-decoration: underline !important;
}

/* ==========================================================================
   22. FRANJA 10: PERMISOS E INSCRIPCIÓN RNC (FOOTER DE LA PÁGINA EN PC)
   ========================================================================== */

.main-footer {
    background: #111111; /* Negro puro unificado con tu main-nav */
    color: #ffffff;
    padding: 40px 0 20px;
    margin-top: 50px;
    border-top: 4px solid var(--azul-ste); /* Filamento superior cian */
}

.footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

/* --- ESTILO DEL SELLO CONTRATACIONES PÚBLICAS DE VENEZUELA (RNC) --- */
.rnc-badge {
    display: flex;
    align-items: center;
    gap: 15px;
    background: rgba(255, 255, 255, 0.05);
    padding: 15px 25px;
    border-radius: 8px;
    border: 1px dashed rgba(0, 188, 212, 0.5); /* Borde cian punteado de certificación técnica */
}

.rnc-badge i {
    font-size: 30px;
    color: var(--azul-ste);
}

.rnc-text strong {
    display: block;
    font-size: 16px;
    text-transform: uppercase;
    color: var(--azul-ste);
    font-weight: 800;
}

.rnc-text span {
    font-size: 14px;
    display: block;
    opacity: 0.8;
}

.rnc-text small {
    font-size: 12px;
    color: #aaaaaa;
}

/* --- BLOQUE METÁLICO FINAL DE DERECHOS RESERVADOS --- */
.footer-bottom {
    text-align: center;
    width: 100%;
    border-top: 1px solid #333333;
    padding-top: 20px;
}

.footer-bottom p {
    font-size: 14px;
    margin: 5px 0;
    color: #bbbbbb;
}

.footer-bottom strong {
    color: var(--azul-ste);
}


/* ==========================================================================
   23. ELEMENTOS FLOTANTES E INTERACTIVOS (SISTEMA DE INTERFAZ DE ELEVACIÓN)
   ========================================================================== */

/* --- BOTÓN FLOTANTE TEMÁTICO "VOLVER A PLANTA BAJA (PB)" --- */
.elevator-btn-back {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 999;
    text-decoration: none;
    display: block;
    border-radius: 50%; /* Fuerza contenedor circular raíz */
    
    /* Elimina el recuadro gris de fábrica al presionar en pantallas de teléfonos celulares */
    -webkit-tap-highlight-color: transparent !important;
    
    /* Suaviza la aparición/desaparición si decides ocultarlo al inicio */
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* El cuerpo redondo del pulsador mecánico de ascensor */
.elevator-btn-back .panel-button {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2c3e50 0%, #0f171e 100%);
    border: 3px solid #7f8c8d; /* Anillo metálico gris de cabina */
    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.2);
    cursor: pointer;
    transition: all 0.2s ease;
}

/* El texto "PB" (Planta Baja) estilo display digital */
.elevator-btn-back .button-text {
    color: #bdc3c7;
    font-family: 'Arial', sans-serif;
    font-weight: 900;
    font-size: 18px;
    letter-spacing: 0.5px;
    line-height: 1;
    margin-top: 2px;
    transition: color 0.3s ease;
}

/* El pequeño LED indicador del botón */
.elevator-btn-back .button-light {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #555555; /* Apagado por defecto en reposo */
    margin-top: 4px;
    transition: all 0.3s ease;
}

/* --- COMPORTAMIENTO INTERACTIVO EN COMPUTADORAS (HOVER) --- */

/* Al pasar el cursor, el anillo metalizado se enciende con el láser de la empresa */
.elevator-btn-back:hover .panel-button {
    border-color: var(--azul-ste, #56C8C0); 
    box-shadow: 0 0 20px rgba(86, 200, 192, 0.6), 
                inset 0 1px 3px rgba(255, 255, 255, 0.3);
    transform: translateY(-3px); /* El botón se eleva sutilmente */
}

/* Iluminación de alto contraste para el display de texto */
.elevator-btn-back:hover .button-text {
    color: #ffffff;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
}

/* El indicador LED se enciende en ROJO de ascensor activo o llamado en cola */
.elevator-btn-back:hover .button-light {
    background-color: #ff2a2a; 
    box-shadow: 0 0 10px #ff2a2a, 0 0 20px #ff2a2a;
}

/* --- COMPORTAMIENTO TÁCTIL AL PRESIONAR (ACTIVE) --- */

/* Efecto cinético de compresión física real de un pulsador mecánico */
.elevator-btn-back:active .panel-button {
    transform: translateY(1px) scale(0.95);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}






/* ==========================================================================
   24. RESPONSIVE MAESTRO: AJUSTES PARA PANTALLAS MEDIANAS (1400PX)
   ========================================================================== */

@media (max-width: 1400px) {
    
    /* --- OPTIMIZACIÓN DE PUBLICIDAD LATERAL --- */
    /* Oculta los dos anuncios laterales para que no aprieten la página web */
    .ad-sidebar {
        display: none !important;
    }
    
    /* Remueve el fondo gris externo ya que la web ocupará el espacio completo */
    .ads-layout-container {
        background-color: #ffffff;
    }

    /* --- AJUSTES DEL CONTENEDOR MAESTRO (BOXED TO FULL WIDTH) --- */
    /* Hace que el cuerpo de la web aproveche el 100% del ancho de la pantalla */
    .main-wrapper {
        max-width: 100%;
        box-shadow: none; /* Remueve la sombra lateral para ahorrar recursos del navegador */
    }
}

/* ==========================================================================
   25. RESPONSIVE MAESTRO: AJUSTES DE CONTENEDOR FLUIDO (1300PX)
   ========================================================================== */

@media (max-width: 1300px) {
    
    /* --- CONFIGURACIÓN BASE DEL CUERPO --- */
    /* Elimina definitivamente el color de fondo grisáceo de los laterales */
    body {
        background-color: #ffffff !important;
    }
    
    /* --- REDIMENSIONAMIENTO DEL WRAPPER --- */
    /* Garantiza que la estructura de la web sea completamente fluida */
    .main-wrapper {
        max-width: 100% !important;
        box-shadow: none !important; /* Asegura la remoción de la sombra lateral */
    }
}


/* ==========================================================================
   25. RESPONSIVE MAESTRO: AJUSTES MAESTROS PARA TABLETS (992PX)
   ========================================================================== */

@media (max-width: 992px) {

    /* --- FRANJA 2: COMPORTAMIENTO DEL MENÚ DESPLEGABLE EN TABLETS --- */
    .nav-flex { 
        padding: 10px 0; 
    }
    
    /* Muestra el botón de tres líneas (hamburguesa) en dispositivos táctiles */
    .menu-toggle { 
        display: block !important; 
    }
    
    /* Transforma la barra horizontal de enlaces en un panel vertical oculto */
    .nav-links {
        display: none;
        flex-direction: column;
        width: 100%;
        background: var(--negro-nav);
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 999;
        border-bottom: 3px solid var(--azul-ste);
        gap: 0; /* Remueve la separación de botones para un estilo de lista continua */
        padding: 10px 0;
    }
    
    /* Clase interactiva que activa el JavaScript al presionar el menú toggle */
    .nav-links.active { 
        display: flex !important; 
    }
    
    /* Estilo de fila de panel para los enlaces del menú móvil */
    .nav-links li a { 
        border-bottom: 1px solid rgba(255, 255, 255, 0.1); 
        border-radius: 0;
        background: transparent;
        padding: 15px 20px;
        width: 100%;
    }
    
    /* Remueve efectos cinéticos elevados y resplandores que incomodan en pantallas táctiles */
    .nav-links li a:hover {
        transform: none !important;
        box-shadow: none !important;
        background: rgba(86, 200, 192, 0.1) !important;
    }

    /* --- FRANJA 4: REDISTRIBUCIÓN DE SERVICIOS EN TABLETS (CORRECCIÓN MAESTRA) --- */
    /* 🛡️ CORREGIDO: Fuerza a que la rejilla del index colapse a 1 sola columna vertical continua */
    .services-showcase .service-row, 
    .services-showcase .service-row.reverse {
        grid-template-columns: 1fr !important;
        text-align: center !important;
        gap: 30px;
        padding: 25px 20px !important; /* Calibración del colchón elástico interno */
    }
    
    /* Fuerza al texto, viñetas y botón a anclarse de forma fluida en la columna única */
    .services-showcase .service-row .service-text,
    .services-showcase .service-row .service-features,
    .services-showcase .service-row .btn-ste-small,
    .services-showcase .service-row.reverse .service-text,
    .services-showcase .service-row.reverse .service-features,
    .services-showcase .service-row.reverse .btn-ste-small {
        grid-column: 1 !important;
        grid-row: auto !important;
        justify-self: center !important;
    }
    
    /* El rectángulo lineal se separa de forma simétrica en el flujo vertical de tabletas */
    .services-showcase .service-row .service-features {
        margin-top: 10px !important;
        margin-bottom: 10px !important;
    }
    
    /* Asegura que el botón de acción respire de forma independiente en móviles */
    .services-showcase .service-row .btn-ste-small {
        margin-top: 10px !important;
    }

    /* El bloque de imágenes gemelas se reacomoda en la cuadrícula elástica única */
    .services-showcase .service-row .service-images,
    .services-showcase .service-row.reverse .service-images {
        grid-column: 1 !important;
        grid-row: auto !important;
        width: 100% !important; 
    }

    /* --- FRANJA 7: ADAPTACIÓN DE ASISTENCIA DE EMERGENCIA --- */
    /* Colapsa el bloque naranja de llamadas 24/7 a formato vertical */
    .cta-flex {
        flex-direction: column !important;
        text-align: center !important;
        gap: 25px;
    }
    
    .cta-text {
        flex-direction: column !important;
        gap: 10px;
    }
    
    /* Estira los botones de llamada y WhatsApp para que ocupen todo el ancho táctil */
    .cta-actions {
        flex-direction: column !important;
        width: 100% !important;
        gap: 15px;
    }
    
    .btn-emergency, 
    .btn-whatsapp-cta {
        justify-content: center; /* Centra el texto e icono dentro del pulsador estirado */
        width: 100%;
    }

    /* --- FRANJAS 8 Y 9: FORMULARIO Y CONTACTOS UNIFICADOS --- */
    /* Transforma la rejilla de dos columnas (Formulario / Datos) a 1 sola columna vertical */
    .contact-grid { 
        grid-template-columns: 1fr !important; 
        gap: 50px;
    }
}



    
/* ==========================================================================
   26. RESPONSIVE MAESTRO: OPTIMIZACIÓN CRÍTICA PARA SMARTPHONES (768PX)
   ========================================================================== */

@media (max-width: 768px) {

    /* --- FRANJA 1: CABECERA, LOGO ANIMADO E INFORMACIÓN MÓVIL --- */
    .top-bar {
        padding: 15px 0; 
    }

    .header-flex {
        flex-direction: column;
        gap: 15px;
    }

    /* Oculta los datos fijos de PC (horarios/correos) para liberar espacio físico en el teléfono */
    .info-wrapper {
        display: none !important; 
    }

    /* Redimensión y control cinético acelerado por hardware del logotipo corporativo en celulares */
    .animate .logo-img {
        height: 80px; 
        animation: moveLogoMobile 1.2s cubic-bezier(0.77, 0, 0.175, 1) forwards;
        animation-delay: 0.2s;
    }
    
    /* --- ANEXO DE LOGOTIPO MÓVIL (PROCESAMIENTO POR HARDWARE EN SMARTPHONES) --- */
    @keyframes moveLogoMobile {
        from { transform: translateX(40px); } /* Desplazamiento inicial suavizado para pantallas cortas */
        to { transform: translateX(0); }      /* Anclaje estructural móvil definitivo */
    }
    
    .animate .logo-text-reveal {
        opacity: 0;
        animation: revealText 1s cubic-bezier(0.77, 0, 0.175, 1) forwards;
        animation-delay: 0.5s;
        padding-left: 10px;
    }

    .text-ste { 
        font-size: 1.1rem; 
    }
    
    .text-ste-sub { 
        font-size: 0.6rem; 
        letter-spacing: 1px; 
        margin-top: 2px;
    }

    /* --- FRANJA 2: COMPORTAMIENTO TÁCTIL DE LA NAVEGACIÓN (GLASSMORPHISM MÓVIL) --- */
    .nav-flex {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center; 
        padding: 2px 15px; 
        box-sizing: border-box;
        flex-wrap: wrap; /* Previene superposiciones físicas de elementos en barras cortas */
    }

    /* 📱 EN CELULARES: El interruptor principal cambia a un formato táctil minimalista de SOLO ICONO */
    .menu-toggle {
        display: block !important; 
        background: none;
        border: none;
        color: var(--azul-ste) !important;
        font-size: 26px !important; /* Tamaño ergonómico absoluto y visible para pantallas táctiles */
        margin: 0;
        padding: 5px 10px;
        cursor: pointer;
        transition: transform 0.3s ease;
    }

    .menu-toggle:hover {
        transform: scale(1.1);
    }

    /* Persiana desplegable móvil con acabado premium de cristal esmerilado translúcido */
    .nav-links {
        display: none; /* Controlado dinámicamente mediante la clase .active en JS */
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: rgba(10, 20, 30, 0.95) !important; 
        backdrop-filter: blur(15px) !important;
        -webkit-backdrop-filter: blur(15px) !important;
        padding: 5px 15px !important;
        gap: 12px !important; /* Separación ergonómica simétrica entre los pulsadores de la persiana */
        border-bottom: 3px solid var(--azul-ste);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
        box-sizing: border-box;
    }

    .nav-links.active {
        display: flex !important;
    }

    .nav-links li {
        width: 100%;
    }

    /* 📱 🌟 ELIMINACIÓN DE DUPLICADOS Y REDUNDANCIAS EN CELULARES 🌟 */
    /* Ocultamos las opciones sueltas repetidas e innecesarias en el teléfono */
    .main-nav .nav-links > li > a[href="#servicios"],
    .main-nav .nav-links > li > a[href="ascensores.html"],
    .main-nav .nav-links > li > a[href="#inicio"],
    .main-nav .nav-links > li > a[href="#contacto"] {
        display: none !important;
    }

    /* Ocultamos el enlace puente escrito "MENÚ" de PC en el teléfono para evitar dobles títulos */
    .main-nav .nav-links .dropdown .dropdown-toggle {
        display: none !important;
    }

        /* Transformación de los enlaces en botones táctiles (SÓLO PARA LA BARRA DE NAVEGACIÓN SUPERIOR) */
    /* 🛡️ Al agregar el prefijo ".main-nav", encerramos el 100% arriba y liberamos tu botón "Ver Detalles" abajo */
    .main-nav .nav-links li a,
    .main-nav .nav-links .dropdown-menu li a {
        display: flex !important;
        align-items: center;
        width: 100%; 
        padding: 10px 20px !important; 
        font-size: 14px !important;
        font-weight: 600;
        letter-spacing: 1px;
        border-radius: 8px !important;
        background: rgba(255, 255, 255, 0.03) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        color: var(--blanco) !important;
        transition: all 0.2s ease;
        box-sizing: border-box;
    }



    /* Forzamos a que las sub-opciones técnicas sincronicen mayúsculas de panel industrial */
    .main-nav .nav-links .dropdown-menu li a {
        text-transform: uppercase; 
    }

    /* Respuesta háptica unificada para los pulsadores principales y sub-opciones técnicas */
    .nav-links li a:active,
    .nav-links li a:hover,
    .main-nav .nav-links .dropdown-menu li a:active,
    .main-nav .nav-links .dropdown-menu li a:hover {
        background: rgba(0, 188, 212, 0.2) !important; /* Iluminación con carga cian unificada */
        border-color: var(--azul-ste) !important;
        box-shadow: 0 0 15px rgba(0, 188, 212, 0.3);
        padding-left: 25px; /* Desplazamiento cinético indicativo de pulsación */
    }
	
    /* --- INTEGRACIÓN CONTINUA DEL SUBMENÚ TÉCNICO EN LA PERSIANA MÓVIL --- */
    .main-nav .nav-links .dropdown-menu {
        display: flex !important;
        flex-direction: column !important;
        position: static !important; /* Rompe el posicionamiento absoluto flotante de PC */
        background-color: transparent !important; /* Quita fondos oscuros redundantes */
        box-shadow: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        padding: 0 !important; 
        margin: 0 !important; /* Se fusiona consecutivamente con los pulsadores principales */
        width: 100% !important;
        gap: 12px !important; /* Hereda la misma separación ergonómica que el resto del menú móvil */
    }

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

    /* --- CONTINUACIÓN FRANJA 2 (MÓVIL): ACCESOS RÁPIDOS FIJOS EN BARRA SUPERIOR --- */
    
    /* El botón maestro de cotización de cabecera se recalibra para no saturar el espacio móvil */
    .btn-quote {
        margin: 0;
        padding: 8px 14px;
        font-size: 11px;
        font-weight: 700;
    }

    /* Activa la visibilidad de los accesos rápidos en smartphones */
    .main-nav .nav-quick-actions {
        display: flex !important; 
        align-items: center;
        margin: 0 auto 0 10px; /* Se acopla de forma fina a la derecha de las tres rayitas simétricas */
        padding: 0;
    }

    /* Estilo de botones mecánicos flotantes incrustados en la barra negra */
    .main-nav .nav-quick-actions .quick-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        border-radius: 6px;
        color: var(--blanco);
        text-decoration: none;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        font-size: 22px; /* Equilibrar el peso visual con las rayitas */
        transition: all 0.2s ease;
    }

    /* Resaltado del icono en tono cian industrial unificado */
    .main-nav .nav-quick-actions .quick-btn i {
        color: var(--azul-ste);
    }

    /* Feedback visual cinético e inmediato al presionar con el pulgar */
    .main-nav .nav-quick-actions .quick-btn:active {
        background: rgba(0, 188, 212, 0.2);
        border-color: var(--azul-ste);
        transform: scale(0.95); /* Simula la deformación física de un botón real de panel */
    }


    /* ==========================================================================
       FRANJA EXTRA (MÓVIL): FORMULARIO DE COTIZACIÓN INDUSTRIAL
       ========================================================================== */

    .quote-contact-wrapper {
        padding: 30px 0 !important; /* Reduce espacios vacíos en celulares */
    }

    .quote-form-section {
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
    }

    /* Fuerza el encajonamiento flotante dejando ver los canales grises laterales */
    form.cotizacion-block,
    #formCotizacion.cotizacion-block {
        display: block !important;
        width: auto !important; /* Permite al margen restar tamaño a la caja */
        
        /* Vacío lateral físico obligatorio en los costados del smartphone */
        margin-left: 16px !important;    
        margin-right: 16px !important;   
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        
        /* Colchón de aire interno reducido para el cristal del teléfono */
        padding: 25px 20px !important; 
        border-radius: 16px !important;
    }

    .cotizacion-block h2 {
        font-size: 1.25rem !important;
        margin-bottom: 20px !important;
    }

    .cotizacion-block input, 
    .cotizacion-block select, 
    .cotizacion-block textarea {
        padding: 12px !important;
        margin-bottom: 15px !important;
        font-size: 0.90rem !important;
    }

    .cotizacion-block button[type="submit"] {
        padding: 14px !important;
        font-size: 0.90rem !important;
    }
    
    .cotizacion-block button[type="submit"]:active {
        transform: scale(0.98) !important; /* Pequeño clic mecánico táctil */
    }
    /* --- FRANJA 3 (MÓVIL): HERO SECCIÓN Y MARCA DE AGUA ADAPTATIVA --- */
    .hero-blue { 
        padding: 12px 0; 
        background-attachment: scroll; 
        background-image: linear-gradient(135deg, rgba(0, 188, 212, 0.95) 0%, rgba(4, 26, 47, 1) 100%);
        border-bottom: 5px solid var(--azul-ste);
    }

    /* Ajuste de escala para el Símbolo del Teclado en marca de agua móvil */
    .hero-blue::after {
        bottom: -30px;    
        right: -30px;     
        font-size: 8rem;  /* Reducción ergonómica del tamaño de 15rem a 8rem */
        color: rgba(255, 255, 255, 0.04); 
    }
    
    .hero-blue h1 {
        font-size: 1.5rem; 
        padding: 0 10px;
        margin-bottom: 8px;
    }

    .hero-subtitle {
        font-size: 0.85rem;
        padding: 0 15px;
    }

    /* --- FRANJA 4 (MÓVIL): COMPACTACIÓN DE SERVICIOS Y TÍTULOS --- */
    .services-showcase { 
        padding: 20px 15px 40px; 
    }
    
    .section-title {
        margin-bottom: 30px; 
    }

    .section-title h2 {
        font-size: 1.8rem;
        padding-bottom: 15px;
    }
    
    .section-title span {
        font-size: 0.8rem;
        letter-spacing: 2px;
    }

    /* 📱 INTEGRACIÓN DE CONTENEDORES MAESTROS DE COLORES POR SERVICIO EN TELÉFONOS */
    /* Mantiene el flujo vertical original de tus teléfonos reseteando la rejilla de PC */    
	
	    
        /********* 1. 🛗 CONTENEDOR MAESTRO PRINCIPAL ------(BLOQUE 1)--------------(BLOQUE 1)----------------(BLOQUE 1) **********/
    .services-showcase .service-row:first-of-type {
        background-color: #CAD5E2 !important; 
        background-image: linear-gradient(135deg, 
            rgba(153, 161, 175, 1) 0%,   
            rgba(125, 133, 145, 0.50) 100%  
        ), url('img/ductos_caracas.webp'); 
        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: 24px !important; 
        padding: 25px 12px !important;  
		padding-bottom: 10px;
        margin-bottom: 20px !important; 
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2) !important; 
    }

       /********* 2.A 🔀 CONTENEDOR DE CABECERA HORIZONTAL MÓVIL (NUEVO) ****************************/
    .services-showcase .service-row:first-of-type .service-header-flex {
        display: flex !important;
        flex-direction: row !important;   
        align-items: center !important;   
        justify-content: flex-start !important;
        gap: 12px !important;             
        margin-bottom: 12px !important;   
		margin-left: 12px !important;  
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Control del Icono dentro de la Cabecera Horizontal Móvil */
    .services-showcase .service-row:first-of-type .service-header-flex .service-icon {
        margin: 0 !important;             
        display: inline-block !important;
    }

    /* 🎨 FILAMENTO INTERNO DEL ICONO EN MÓVIL (NUEVO) */
    .services-showcase .service-row:first-of-type .service-header-flex .service-icon i {
        color: #00e5ff !important;       /* Tono cian brillante de alta visibilidad cyber */
        font-size: 32px !important;      /* Mantiene tu escala ergonómica táctil perfecta */
        filter: drop-shadow(0 0 4px rgba(0, 229, 255, 0.4)) !important; /* Resplandor digital sutil */
    }

    /* Propiedades físicas de la raya divisoria vertical en celulares */
    .services-showcase .service-row:first-of-type .service-header-flex .vertical-divider {
        width: 2px !important;            
        height: 26px !important;          
        background-color: #00e5ff !important; /* 🎨 COLOR SINCRONIZADO: Mismo cian cyber en teléfono */
        display: inline-block !important;
        flex-shrink: 0 !important;        
        opacity: 1 !important;                
        
        /* 🪐 EFECTO LED MÓVIL: Resplandor optimizado para pantallas táctiles */
        box-shadow: 0 0 6px rgba(0, 229, 255, 0.4) !important; 
    }


    /********* 2.B 🏷️ TÍTULO PRINCIPAL EN MÓVIL (ACOPLADO) *****************************************/
    .services-showcase .service-row:first-of-type .service-header-flex h3 {
        font-family: inherit !important; 
        font-size: 19px !important;       
        color: #000000 !important;       
        margin: 0 !important;             
        letter-spacing: 0.5px !important;
        text-align: left !important;      
        line-height: 1.1 !important;
    }

        /********* 3. 📦 CAJA GENERAL QUE ENCIERRA AL PÁRRAFO (.tech-intro-box) *******************/
    .services-showcase .service-row:first-of-type .tech-intro-box {
        margin-top: 5px !important;      /* Separación balanceada bajo la cabecera móvil */
        margin-bottom: 18px !important;  /* Distancia ergonómica hacia las pastillas de la lista */
        padding: 14px 20px !important;   /* Relleno compactado ideal para el ancho de smartphones */
        
        /* 🛸 TEXTURA DE ALTA TECNOLOGÍA: Cristal líquido oscuro traslúcido */
        background: rgba(11, 22, 34, 0.88) !important; 
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
        
        /* 📐 GEOMETRÍA ASIMÉTRICA: Esquinas de corte técnico adaptadas a celulares */
        border-radius: 4px 18px 4px 18px !important; 
        
        /* ⚡ ILUMINACIÓN LÁSER MÓVIL: Marco continuo con filamento principal izquierdo */
        border: 1px solid rgba(0, 188, 212, 0.4) !important;
        border-left: 4px solid var(--azul-ste, #00bcd4) !important; 
        
        /* 🪐 RESPLANDOR DIGITAL: Aura holográfica perimetral en smartphone */
        box-shadow: 0 6px 20px rgba(0, 188, 212, 0.08), 
                    inset 0 0 12px rgba(0, 188, 212, 0.03) !important;
    }

    /********* 4. 📝 PROPIEDADES DEL PÁRRAFO INTRODUCTORIO (Texto interno) *******************/
    .services-showcase .service-row:first-of-type .tech-intro-box p {
        font-family: inherit !important; 
        font-size: 14.5px !important;    /* Tamaño de letra calibrado para lectura en celulares */
        line-height: 1.4 !important;     /* Interlineado cómodo para pantallas táctiles */
        margin-top: 0px !important;      
        margin-bottom: 0px !important;  
        margin-left: 0px;     /* Mantiene el reset de sangría para que no se pegue al borde */
        text-align: left !important;  /* Texto justificado elegantemente dentro del panel */
        letter-spacing: 0.2px !important;
        
        /* 🎨 COLOR PLATINO MÓVIL: Letras claras de alta nitidez sobre la pantalla oscura */
        color: #e2e8f0 !important;       
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) !important; /* Blindaje de legibilidad */
    }


        /********* 5. 📦 CAJA GENERAL QUE ENCIERRA A LOS ÍTEMS (.service-features) ****************/
    .services-showcase .service-row:first-of-type .service-features {
        margin-top: 5px !important;      /* Separación fina bajo el panel holográfico móvil */
        margin-bottom: 5px !important;   /* Distancia exacta hacia el botón compacto inferior */
        padding: 15px 12px !important;   /* Espaciado interno optimizado para smartphones */
        width: 100% !important;
        list-style: none !important;     
        box-sizing: border-box !important;
        
               /* 🛸 RETÍCULA DIGITAL MÓVIL: Micro-cuadrícula de ingeniería compactada a 15px */
        background-color: rgba(248, 250, 250, 0.4) !important; /* Base gris hielo sumamente sutil */
        background-image: linear-gradient(rgba(219, 226, 230, 0.3) 1px, transparent 1px),
                          linear-gradient(90deg, rgba(219, 226, 230, 0.3) 1px, transparent 1px) !important; /* Reemplazado cian por gris platino pulido */
        background-size: 15px 15px !important; 
        
        /* 🛡️ ENMARCADO SÓLIDO PREMIUM: Eliminado el efecto punteado por una línea continua limpia */
        border: 1px solid rgba(27, 38, 59, 0.12) !important; /* Borde sólido continuo en gris basalto traslúcido */
        border-radius: 12px !important;   
        box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.02) !important; /* Sombra interna para dar profundidad de panel */

    }

    /********* 6. 💊 ÍTEMS / PASTILLAS COMPACTAS (Elementos li individuales) ******************/
    .services-showcase .service-row:first-of-type .service-features li {
        font-family: inherit !important;
        font-size: 13px !important;       /* Tamaño de letra compacto y legible en celulares */
        font-weight: 500 !important;
        color: #1e293b !important;        
        
        /* Cápsula modular con degradado reflectante unificado */
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(241, 245, 249, 0.9) 100%) !important;
        
        /* Borde pulido con pestaña lateral color titanio oscuro */
        border: 1px solid rgba(0, 0, 0, 0.06) !important; 
        border-left: 4px solid #475569 !important; 
        border-radius: 6px !important;   
        
        /* 🛡️ SANEADO MÓVIL CRÍTICO: Reseteamos los márgenes negativos para evitar desbordes */
        padding-top: 6px !important;     /* Altura interna ergonómica para el pulgar */
        padding-bottom: 6px !important;  
        padding-left: 12px !important;   
        padding-right: 12px !important;  
        margin-left: 0px !important;     
        margin-right: 0px !important;    
        
        /* ↕️ CONTROL DE DISTANCIA ENTRE ÍTEMS MÓVIL: Espaciado vertical nítido */
        margin-bottom: -6px !important;   
        
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;             /* Separación estrecha ideal entre el icono y el texto */
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.02) !important;
        box-sizing: border-box !important;
        transition: background-color 0.2s ease, border-left-color 0.2s ease !important;
    }

    /* Respuesta táctil háptica visual cuando el usuario presiona la cápsula en su celular */
    .services-showcase .service-row:first-of-type .service-features li:active {
        background-color: #ffffff !important;
        border-left-color: var(--azul-ste, #00bcd4) !important; /* El nodo titanio se enciende en cian al pulsar */
    }

    .services-showcase .service-row:first-of-type .service-features li:last-child {
        margin-bottom: 0px !important;   /* Quita el margen inferior al último elemento de la lista */
    }

    /********* 7. 🎨 ICONOS INTERNOS DE LOS ÍTEMS (Viñetas i) *********************************/
    .services-showcase .service-row:first-of-type .service-features li i {
        font-size: 14px !important;      
        color: var(--azul-ste, #00bcd4) !important; 
        margin-right: 0px !important;     /* Resetea espacios residuales viejos */
        background: transparent !important;
        
        /* Efecto de nodo LED encendido atenuado para no saturar la GPU del teléfono */
        filter: drop-shadow(0 0 3px rgba(0, 188, 212, 0.5)) !important;
    }


    /********* 8. 🖼️ IMAGEN / ILUSTRACIÓN SECUNDARIA ******************************************/
    .services-showcase .service-row:first-of-type .service-image-box img,
    .services-showcase .service-row:first-of-type .service-img img {
        max-width: 90% !important;     
        height: auto !important;
        border-radius: 15px !important;  
        border: 0px solid transparent !important; 
        box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important; 
        margin-top: 15px !important;     
        margin-bottom: 15px !important;  
        display: block !important;
        margin-left: auto !important;    
        margin-right: auto !important;   
        filter: none !important;         
    }

        /********* 9.A 📦 CAJA CONTENEDORA DEL BOTÓN MÓVIL (NUEVO) *********************************/
    .services-showcase .service-row:first-of-type .service-btn-wrapper {
        order: 4 !important;              /* Se posiciona estrictamente en el paso 4, justo antes del rombo */
        width: 100% !important;
        display: flex !important;
        justify-content: center !important; /* Centra horizontalmente la pastilla en la pantalla del celular */
        margin-top: 15px !important;
        margin-bottom: 5px !important;
    }

    /********* 9.B 🔘 PROPIEDADES DEL BOTÓN INTERNO EN TELÉFONO *********************************/
    .services-showcase .service-row:first-of-type .service-btn-wrapper .btn-ste-small {
        display: inline-block !important; /* Mide exclusivamente el tamaño de su texto */
        width: auto !important;           /* Blindaje absoluto contra alargamientos */
        
        font-family: inherit !important;
        font-size: 15px !important;      
        font-weight: 600 !important;
        color: #ffffff !important;       
        background-color: #00bcd4 !important; 
        border: 1px solid transparent !important;
        border-radius: 12px !important;  
        padding: 12px 28px !important;    /* Cojín ergonómico ideal para el dedo */
        text-align: center !important;
        text-decoration: none !important;
        box-shadow: 0 5px 15px rgba(0, 188, 212, 0.3) !important;
    }



    /********* 10. 🔘 BOTÓN DE ACCIÓN (AL PRESIONAR / HOVER) ***********************************/
    .services-showcase .service-row:first-of-type .service-btn:hover,
    .services-showcase .service-row:first-of-type .btn-ste:hover {
        color: #ffffff !important;       
        background-color: #0097a7 !important; 
    }



	/********* 1. 🛗 CONTENEDOR MAESTRO PRINCIPAL ------(BLOQUE 2 MÓVIL ACTUALIZADO) *********(BLOQUE 2)* *********(BLOQUE 2) *********(BLOQUE 2)**/
	.services-showcase .service-row:nth-of-type(2) {
		background-color: #CAD5E2 !important; /* Mantiene la misma base que el Bloque 1 */
		background-image: linear-gradient(135deg, 
			rgba(153, 161, 175, 1) 0%, 
			rgba(125, 133, 145, 0.50) 100% 
		), url('img/sistemas_acceso.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: 24px !important; 
		padding: 25px 12px !important; 
		padding-bottom: 10px !important;
		margin-bottom: 20px; 
		box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2) !important; 
	}

	/********* 2.A 🔀 CONTENEDOR DE CABECERA HORIZONTAL MÓVIL (BLOQUE 2) ****************************/
	.services-showcase .service-row:nth-of-type(2) .service-header-flex {
		display: flex !important;
		flex-direction: row !important; 
		align-items: center !important; 
		justify-content: flex-start !important;
		gap: 12px !important; 
		margin-bottom: 12px !important; 
		margin-left: 12px !important; 
		width: 100% !important;
		box-sizing: border-box !important;
	}
	/* Control del Icono dentro de la Cabecera Horizontal Móvil */
	.services-showcase .service-row:nth-of-type(2) .service-header-flex .service-icon {
		margin: 0 !important; 
		display: inline-block !important;
	}
	/* 🎨 FILAMENTO INTERNO DEL ICONO EN MÓVIL (BLOQUE 2) */
	.services-showcase .service-row:nth-of-type(2) .service-header-flex .service-icon i {
		color: #00e5ff !important; /* Tono cian brillante cyber */
		font-size: 32px !important; /* Escala ergonómica táctil */
		filter: drop-shadow(0 0 4px rgba(0, 229, 255, 0.4)) !important; /* Resplandor digital */
	}
	/* Propiedades físicas de la raya divisoria vertical en celulares */
	.services-showcase .service-row:nth-of-type(2) .service-header-flex .vertical-divider {
		width: 2px !important; 
		height: 26px !important; 
		background-color: #00e5ff !important; 
		display: inline-block !important;
		flex-shrink: 0 !important; 
		opacity: 1 !important; 
		box-shadow: 0 0 6px rgba(0, 229, 255, 0.4) !important; /* Efecto LED móvil */
	}

	/********* 2.B 🏷️ TÍTULO PRINCIPAL EN MÓVIL (BLOQUE 2 ACOPLADO) *****************************************/
	.services-showcase .service-row:nth-of-type(2) .service-header-flex h3 {
		font-family: inherit !important; 
		font-size: 19px !important; 
		color: #000000 !important; 
		margin: 0 !important; 
		letter-spacing: 0.5px !important;
		text-align: left !important; 
		line-height: 1.1 !important;
	}

	/********* 3. 📦 CAJA GENERAL QUE ENCIERRA AL PÁRRAFO (.tech-intro-box) *******************/
	.services-showcase .service-row:nth-of-type(2) .tech-intro-box {
		margin-top: 5px !important; 
		margin-bottom: 18px !important; 
		padding: 14px 20px !important; /* Relleno compactado para smartphones */
		background: rgba(11, 22, 34, 0.88) !important; /* Cristal líquido oscuro translúcido */
		backdrop-filter: blur(8px) !important;
		-webkit-backdrop-filter: blur(8px) !important;
		border-radius: 4px 18px 4px 18px !important; /* Geometría asimétrica móvil */
		border: 1px solid rgba(0, 188, 212, 0.4) !important;
		border-left: 4px solid var(--azul-ste, #00bcd4) !important; 
		box-shadow: 0 6px 20px rgba(0, 188, 212, 0.08), 
					inset 0 0 12px rgba(0, 188, 212, 0.03) !important;
	}

	/********* 4. 📝 PROPIEDADES DEL PÁRRAFO INTRODUCTORIO (Texto interno) *******************/
	.services-showcase .service-row:nth-of-type(2) .tech-intro-box p {
		font-family: inherit !important; 
		font-size: 14.5px !important; 
		line-height: 1.4 !important; 
		margin-top: 0px !important; 
		margin-bottom: 0px !important; 
		margin-left: 0px !important; 
		text-align: left !important; 
		letter-spacing: 0.2px !important;
		color: #e2e8f0 !important; /* Color platino móvil de alto contraste */
		text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) !important; 
	}

	/********* 5. 📦 CAJA GENERAL QUE ENCIERRA A LOS ÍTEMS (.service-features) ****************/
	.services-showcase .service-row:nth-of-type(2) .service-features {
		margin-top: 5px !important; 
		margin-bottom: 5px !important; 
		padding: 15px 12px !important; 
		width: 100% !important;
		list-style: none !important; 
		box-sizing: border-box !important;
		background-color: rgba(248, 250, 250, 0.4) !important; 
		background-image: linear-gradient(rgba(219, 226, 230, 0.3) 1px, transparent 1px),
						  linear-gradient(90deg, rgba(219, 226, 230, 0.3) 1px, transparent 1px) !important;
		background-size: 15px 15px !important; /* Retícula compactada a 15px */
		border: 1px solid rgba(27, 38, 59, 0.12) !important; /* Enmarcado sólido continuo */
		border-radius: 12px !important; 
		box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.02) !important;
	}

	/********* 6. 💊 ÍTEMS / PASTILLAS COMPACTAS (Elementos li individuales) ******************/
	.services-showcase .service-row:nth-of-type(2) .service-features li {
		font-family: inherit !important;
		font-size: 13px !important; 
		font-weight: 500 !important;
		color: #1e293b !important; 
		background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(241, 245, 249, 0.9) 100%) !important;
		border: 1px solid rgba(0, 0, 0, 0.06) !important; 
		border-left: 4px solid #475569 !important; /* Pestaña lateral color titanio oscuro */
		border-radius: 6px !important; 
		padding-top: 6px !important; /* Altura ergonómica para el pulgar */
		padding-bottom: 6px !important; 
		padding-left: 12px !important; 
		padding-right: 12px !important; 
		margin-left: 0px !important; 
		margin-right: 0px !important; 
		margin-bottom: -6px !important; /* Control de distancia entre ítems móvil */
		display: flex !important;
		align-items: center !important;
		gap: 10px !important; 
		box-shadow: 0 3px 8px rgba(0, 0, 0, 0.02) !important;
		box-sizing: border-box !important;
		transition: background-color 0.2s ease, border-left-color 0.2s ease !important;
	}
	/* Respuesta táctil háptica al presionar en celular */
	.services-showcase .service-row:nth-of-type(2) .service-features li:active {
		background-color: #ffffff !important;
		border-left-color: var(--azul-ste, #00bcd4) !important; /* Enciende en cian al pulsar */
	}
	.services-showcase .service-row:nth-of-type(2) .service-features li:last-child {
		margin-bottom: 0px !important; 
	}

	/********* 7. 🎨 ICONOS INTERNOS DE LOS ÍTEMS (Viñetas i) *********************************/
	.services-showcase .service-row:nth-of-type(2) .service-features li i {
		font-size: 14px !important; 
		color: var(--azul-ste, #00bcd4) !important; 
		margin-right: 0px !important; 
		background: transparent !important;
		filter: drop-shadow(0 0 3px rgba(0, 188, 212, 0.5)) !important; /* Nodo LED móvil atenuado */
	}

	/********* 8. 🖼️ IMAGEN / ILUSTRACIÓN SECUNDARIA ******************************************/
	.services-showcase .service-row:nth-of-type(2) .service-image-box img,
	.services-showcase .service-row:nth-of-type(2) .service-img img {
		max-width: 90% !important; 
		height: auto !important;
		border-radius: 15px !important; 
		border: 0px solid transparent !important; 
		box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important; 
		margin-top: 15px !important; 
		margin-bottom: 15px !important; 
		display: block !important;
		margin-left: auto !important; 
		margin-right: auto !important; 
		filter: none !important; 
	}

	/********* 9.A 📦 CAJA CONTENEDORA DEL BOTÓN MÓVIL (NUEVO) *********************************/
	.services-showcase .service-row:nth-of-type(2) .service-btn-wrapper {
		order: 4 !important; /* Paso 4: Justo antes del rombo divisor */
		width: 100% !important;
		display: flex !important;
		justify-content: center !important; /* Centrado absoluto en smartphone */
		margin-top: 15px !important;
		margin-bottom: 5px !important;
	}

	/********* 9.B 🔘 PROPIEDADES DEL BOTÓN INTERNO EN TELÉFONO *********************************/
	.services-showcase .service-row:nth-of-type(2) .service-btn-wrapper .btn-ste-small {
		display: inline-block !important; 
		width: auto !important; /* Blindaje contra estiramientos elásticos */
		font-family: inherit !important;
		font-size: 15px !important; 
		font-weight: 600 !important;
		color: #ffffff !important; 
		background-color: #00bcd4 !important; 
		border: 1px solid transparent !important;
		border-radius: 12px !important; 
		padding: 12px 28px !important; /* Cojinete ergonómico táctil */
		text-align: center !important;
		text-decoration: none !important;
		box-shadow: 0 5px 15px rgba(0, 188, 212, 0.3) !important;
	}

	/********* 10. 🔘 BOTÓN DE ACCIÓN (AL PRESIONAR / HOVER) ***********************************/
	.services-showcase .service-row:nth-of-type(2) .service-btn:hover,
	.services-showcase .service-row:nth-of-type(2) .btn-ste:hover {
		color: #ffffff !important; 
		background-color: #0097a7 !important; 
	}


        /********* 1. ⚡ CONTENEDOR MAESTRO PRINCIPAL ------(BLOQUE 3)--------------(BLOQUE 3)----------------(BLOQUE 3) **********/		
	.services-showcase .service-row:nth-of-type(3) {
		background-color: #CAD5E2 !important; /* Mantiene la misma base que los bloques anteriores */
		background-image: linear-gradient(135deg, 
			rgba(153, 161, 175, 1) 0%, 
			rgba(125, 133, 145, 0.50) 100% 
		), url('img/tableros_electricos.webp') !important; /* 🖼️ Tu marca de agua específica del bloque 3 */
		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: 24px !important; 
		padding: 25px 12px !important; 
		padding-bottom: 10px !important;
		margin-bottom: 20px; 
		box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2) !important; 
	}

	/********* 2.A 🔀 CONTENEDOR DE CABECERA HORIZONTAL MÓVIL (BLOQUE 3) ****************************/
	.services-showcase .service-row:nth-of-type(3) .service-header-flex {
		display: flex !important;
		flex-direction: row !important; 
		align-items: center !important; 
		justify-content: flex-start !important;
		gap: 12px !important; 
		margin-bottom: 12px !important; 
		margin-left: 12px !important; 
		width: 100% !important;
		box-sizing: border-box !important;
	}
	/* Control del Icono dentro de la Cabecera Horizontal Móvil */
	.services-showcase .service-row:nth-of-type(3) .service-header-flex .service-icon {
		margin: 0 !important; 
		display: inline-block !important;
	}
	/* 🎨 FILAMENTO INTERNO DEL ICONO EN MÓVIL (BLOQUE 3) */
	.services-showcase .service-row:nth-of-type(3) .service-header-flex .service-icon i {
		color: #00e5ff !important; /* Tono cian brillante de alta visibilidad */
		font-size: 32px !important; /* Escala ergonómica táctil */
		filter: drop-shadow(0 0 4px rgba(0, 229, 255, 0.4)) !important; /* Resplandor digital sutil */
	}
	/* Propiedades físicas de la raya divisoria vertical en celulares */
	.services-showcase .service-row:nth-of-type(3) .service-header-flex .vertical-divider {
		width: 2px !important; 
		height: 26px !important; 
		background-color: #00e5ff !important; 
		display: inline-block !important;
		flex-shrink: 0 !important; 
		opacity: 1 !important; 
		box-shadow: 0 0 6px rgba(0, 229, 255, 0.4) !important; /* Efecto LED móvil */
	}

	/********* 2.B 🏷️ TÍTULO PRINCIPAL EN MÓVIL (BLOQUE 3 ACOPLADO) *****************************************/
	.services-showcase .service-row:nth-of-type(3) .service-header-flex h3 {
		font-family: inherit !important; 
		font-size: 19px !important; 
		color: #000000 !important; 
		margin: 0 !important; 
		letter-spacing: 0.5px !important;
		text-align: left !important; 
		line-height: 1.1 !important;
	}

	/********* 3. 📦 CAJA GENERAL QUE ENCIERRA AL PÁRRAFO (.tech-intro-box) *******************/
	.services-showcase .service-row:nth-of-type(3) .tech-intro-box {
		margin-top: 5px !important; 
		margin-bottom: 18px !important; 
		padding: 14px 20px !important; /* Relleno compactado ideal para smartphones */
		background: rgba(11, 22, 34, 0.88) !important; /* Cristal líquido oscuro translúcido */
		backdrop-filter: blur(8px) !important;
		-webkit-backdrop-filter: blur(8px) !important;
		border-radius: 4px 18px 4px 18px !important; /* Geometría asimétrica de corte técnico */
		border: 1px solid rgba(0, 188, 212, 0.4) !important;
		border-left: 4px solid var(--azul-ste, #00bcd4) !important; 
		box-shadow: 0 6px 20px rgba(0, 188, 212, 0.08), 
					inset 0 0 12px rgba(0, 188, 212, 0.03) !important;
	}

	/********* 4. 📝 PROPIEDADES DEL PÁRRAFO INTRODUCTORIO (Texto interno) *******************/
	.services-showcase .service-row:nth-of-type(3) .tech-intro-box p {
		font-family: inherit !important; 
		font-size: 14.5px !important; 
		line-height: 1.4 !important; /* Interlineado ergonómico para pantallas táctiles */
		margin-top: 0px !important; 
		margin-bottom: 0px !important; 
		margin-left: 0px !important; 
		text-align: left !important; 
		letter-spacing: 0.2px !important;
		color: #e2e8f0 !important; /* Color platino de alta nitidez */
		text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) !important; 
	}

	/********* 5. 📦 CAJA GENERAL QUE ENCIERRA A LOS ÍTEMS (.service-features) ****************/
	.services-showcase .service-row:nth-of-type(3) .service-features {
		margin-top: 5px !important; 
		margin-bottom: 5px !important; 
		padding: 15px 12px !important; 
		width: 100% !important;
		list-style: none !important; 
		box-sizing: border-box !important;
		background-color: rgba(248, 250, 250, 0.4) !important; 
		background-image: linear-gradient(rgba(219, 226, 230, 0.3) 1px, transparent 1px),
						  linear-gradient(90deg, rgba(219, 226, 230, 0.3) 1px, transparent 1px) !important;
		background-size: 15px 15px !important; /* Retícula compactada a 15px */
		border: 1px solid rgba(27, 38, 59, 0.12) !important; /* Enmarcado sólido continuo */
		border-radius: 12px !important; 
		box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.02) !important;
	}

	/********* 6. 💊 ÍTEMS / PASTILLAS COMPACTAS (Elementos li individuales) ******************/
	.services-showcase .service-row:nth-of-type(3) .service-features li {
		font-family: inherit !important;
		font-size: 13px !important; 
		font-weight: 500 !important;
		color: #1e293b !important; 
		background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(241, 245, 249, 0.9) 100%) !important;
		border: 1px solid rgba(0, 0, 0, 0.06) !important; 
		border-left: 4px solid #475569 !important; /* Pestaña lateral color titanio oscuro */
		
		/* 🌟 SINCRO DE CURVATURA MÓVIL: Calibrado a 12px en móvil para mantener la armonía redondeada */
		border-radius: 12px !important; 
		
		padding-top: 6px !important; /* Altura ideal para la interacción del pulgar */
		padding-bottom: 6px !important; 
		padding-left: 12px !important; 
		padding-right: 12px !important; 
		margin-left: 0px !important; 
		margin-right: 0px !important; 
		margin-bottom: -6px !important; /* Control de distancia vertical entre cápsulas */
		display: flex !important;
		align-items: center !important;
		gap: 10px !important; 
		box-shadow: 0 3px 8px rgba(0, 0, 0, 0.02) !important;
		box-sizing: border-box !important;
		transition: background-color 0.2s ease, border-left-color 0.2s ease !important;
	}
	/* Respuesta táctil háptica visual en smartphones */
	.services-showcase .service-row:nth-of-type(3) .service-features li:active {
		background-color: #ffffff !important;
		border-left-color: var(--azul-ste, #00bcd4) !important; /* Enciende en cian al presionar */
	}
	.services-showcase .service-row:nth-of-type(3) .service-features li:last-child {
		margin-bottom: 0px !important; 
	}

	/********* 7. 🎨 ICONOS INTERNOS DE LOS ÍTEMS (Viñetas i) *********************************/
	.services-showcase .service-row:nth-of-type(3) .service-features li i {
		font-size: 14px !important; 
		color: var(--azul-ste, #00bcd4) !important; 
		margin-right: 0px !important; 
		background: transparent !important;
		filter: drop-shadow(0 0 3px rgba(0, 188, 212, 0.5)) !important; /* Nodo LED móvil sutil */
	}

	/********* 8. 🖼️ IMAGEN / ILUSTRACIÓN SECUNDARIA ******************************************/
	.services-showcase .service-row:nth-of-type(3) .service-image-box img,
	.services-showcase .service-row:nth-of-type(3) .service-img img {
		max-width: 90% !important; 
		height: auto !important;
		border-radius: 15px !important; 
		border: 0px solid transparent !important; 
		box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important; 
		margin-top: 15px !important; 
		margin-bottom: 15px !important; 
		display: block !important;
		margin-left: auto !important; 
		margin-right: auto !important; 
		filter: none !important; 
	}

	/********* 9.A 📦 CAJA CONTENEDORA DEL BOTÓN MÓVIL (NUEVO) *********************************/
	.services-showcase .service-row:nth-of-type(3) .service-btn-wrapper {
		order: 4 !important; /* Se posiciona estrictamente antes del rombo divisor */
		width: 100% !important;
		display: flex !important;
		justify-content: center !important; /* Centrado absoluto en pantallas móviles */
		margin-top: 15px !important;
		margin-bottom: 5px !important;
	}

	/********* 9.B 🔘 PROPIEDADES DEL BOTÓN INTERNO EN TELÉFONO *********************************/
	.services-showcase .service-row:nth-of-type(3) .service-btn-wrapper .btn-ste-small {
		display: inline-block !important; 
		width: auto !important; /* Protección total contra alargamientos accidentales */
		font-family: inherit !important;
		font-size: 15px !important; 
		font-weight: 600 !important;
		color: #ffffff !important; 
		background-color: #00bcd4 !important; 
		border: 1px solid transparent !important;
		border-radius: 12px !important; 
		padding: 12px 28px !important; /* Área táctil ergonómica y cómoda */
		text-align: center !important;
		text-decoration: none !important;
		box-shadow: 0 5px 15px rgba(0, 188, 212, 0.3) !important;
	}

	/********* 10. 🔘 BOTÓN DE ACCIÓN (AL PRESIONAR / HOVER) ***********************************/
	.services-showcase .service-row:nth-of-type(3) .service-btn:hover,
	.services-showcase .service-row:nth-of-type(3) .btn-ste:hover {
		color: #ffffff !important; 
		background-color: #0097a7 !important; 
	}


        /********* 1. 🚧 CONTENEDOR MAESTRO PRINCIPAL ------(BLOQUE 4)--------------(BLOQUE 4)----------------(BLOQUE 4) **********/
		
	.services-showcase .service-row:nth-of-type(4) {
		background-color: #CAD5E2 !important; /* Mantiene la misma base que los bloques anteriores */
		background-image: linear-gradient(135deg, 
			rgba(153, 161, 175, 1) 0%, 
			rgba(125, 133, 145, 0.50) 100% 
		), url('img/portones_caracas.webp') !important; /* 🖼️ Tu marca de agua específica del bloque 4 */
		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: 24px !important; 
		padding: 25px 12px !important; 
		padding-bottom: 10px !important;
		margin-bottom: 20px; 
		box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2) !important; 
	}

	/********* 2.A 🔀 CONTENEDOR DE CABECERA HORIZONTAL MÓVIL (BLOQUE 4) ****************************/
	.services-showcase .service-row:nth-of-type(4) .service-header-flex {
		display: flex !important;
		flex-direction: row !important; 
		align-items: center !important; 
		justify-content: flex-start !important;
		gap: 12px !important; 
		margin-bottom: 12px !important; 
		margin-left: 12px !important; 
		width: 100% !important;
		box-sizing: border-box !important;
	}
	/* Control del Icono dentro de la Cabecera Horizontal Móvil */
	.services-showcase .service-row:nth-of-type(4) .service-header-flex .service-icon {
		margin: 0 !important; 
		display: inline-block !important;
	}
	/* 🎨 FILAMENTO INTERNO DEL ICONO EN MÓVIL (BLOQUE 4) */
	.services-showcase .service-row:nth-of-type(4) .service-header-flex .service-icon i {
		color: #00e5ff !important; /* Tono cian brillante de alta visibilidad */
		font-size: 32px !important; /* Escala ergonómica táctil */
		filter: drop-shadow(0 0 4px rgba(0, 229, 255, 0.4)) !important; /* Resplandor digital sutil */
	}
	/* Propiedades físicas de la raya divisoria vertical en celulares */
	.services-showcase .service-row:nth-of-type(4) .service-header-flex .vertical-divider {
		width: 2px !important; 
		height: 26px !important; 
		background-color: #00e5ff !important; 
		display: inline-block !important;
		flex-shrink: 0 !important; 
		opacity: 1 !important; 
		box-shadow: 0 0 6px rgba(0, 229, 255, 0.4) !important; /* Efecto LED móvil */
	}

	/********* 2.B 🏷️ TÍTULO PRINCIPAL EN MÓVIL (BLOQUE 4 ACOPLADO) *****************************************/
	.services-showcase .service-row:nth-of-type(4) .service-header-flex h3 {
		font-family: inherit !important; 
		font-size: 19px !important; 
		color: #000000 !important; /* Mantiene la consistencia del color de texto móvil */
		margin: 0 !important; 
		letter-spacing: 0.5px !important;
		text-align: left !important; 
		line-height: 1.1 !important;
	}

	/********* 3. 📦 CAJA GENERAL QUE ENCIERRA AL PÁRRAFO (.tech-intro-box) *******************/
	.services-showcase .service-row:nth-of-type(4) .tech-intro-box {
		margin-top: 5px !important; 
		margin-bottom: 18px !important; 
		padding: 14px 20px !important; /* Relleno compactado ideal para smartphones */
		background: rgba(11, 22, 34, 0.88) !important; /* Cristal líquido oscuro translúcido */
		backdrop-filter: blur(8px) !important;
		-webkit-backdrop-filter: blur(8px) !important;
		border-radius: 4px 18px 4px 18px !important; /* Geometría asimétrica de corte técnico */
		border: 1px solid rgba(0, 188, 212, 0.4) !important;
		border-left: 4px solid var(--azul-ste, #00bcd4) !important; 
		box-shadow: 0 6px 20px rgba(0, 188, 212, 0.08), 
					inset 0 0 12px rgba(0, 188, 212, 0.03) !important;
	}

	/********* 4. 📝 PROPIEDADES DEL PÁRRAFO INTRODUCTORIO (Texto interno) *******************/
	.services-showcase .service-row:nth-of-type(4) .tech-intro-box p {
		font-family: inherit !important; 
		font-size: 14.5px !important; 
		line-height: 1.4 !important; /* Interlineado ergonómico para pantallas táctiles */
		margin-top: 0px !important; 
		margin-bottom: 0px !important; 
		margin-left: 0px !important; 
		text-align: left !important; 
		letter-spacing: 0.2px !important;
		color: #e2e8f0 !important; /* Color platino de alta nitidez */
		text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) !important; 
	}

	/********* 5. 📦 CAJA GENERAL QUE ENCIERRA A LOS ÍTEMS (.service-features) ****************/
	.services-showcase .service-row:nth-of-type(4) .service-features {
		margin-top: 5px !important; 
		margin-bottom: 5px !important; 
		padding: 15px 12px !important; 
		width: 100% !important;
		list-style: none !important; 
		box-sizing: border-box !important;
		background-color: rgba(248, 250, 250, 0.4) !important; 
		background-image: linear-gradient(rgba(219, 226, 230, 0.3) 1px, transparent 1px),
						  linear-gradient(90deg, rgba(219, 226, 230, 0.3) 1px, transparent 1px) !important;
		background-size: 15px 15px !important; /* Retícula compactada a 15px */
		border: 1px solid rgba(27, 38, 59, 0.12) !important; /* Enmarcado sólido continuo */
		border-radius: 12px !important; 
		box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.02) !important;
	}

	/********* 6. 💊 ÍTEMS / PASTILLAS COMPACTAS (Elementos li individuales) ******************/
	.services-showcase .service-row:nth-of-type(4) .service-features li {
		font-family: inherit !important;
		font-size: 13px !important; 
		font-weight: 500 !important;
		color: #1e293b !important; 
		background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(241, 245, 249, 0.9) 100%) !important;
		border: 1px solid rgba(0, 0, 0, 0.06) !important; 
		border-left: 4px solid #475569 !important; /* Pestaña lateral color titanio oscuro */
		
		/* 🌟 SINCRO DE CURVATURA MÓVIL: Redondeado unificado a 12px en móvil para mantener la armonía */
		border-radius: 12px !important; 
		
		padding-top: 6px !important; /* Altura ideal para la interacción del pulgar */
		padding-bottom: 6px !important; 
		padding-left: 12px !important; 
		padding-right: 12px !important; 
		margin-left: 0px !important; 
		margin-right: 0px !important; 
		margin-bottom: -6px !important; /* Control de distancia vertical entre cápsulas */
		display: flex !important;
		align-items: center !important;
		gap: 10px !important; 
		box-shadow: 0 3px 8px rgba(0, 0, 0, 0.02) !important;
		box-sizing: border-box !important;
		transition: background-color 0.2s ease, border-left-color 0.2s ease !important;
	}
	/* Respuesta táctil háptica visual en smartphones */
	.services-showcase .service-row:nth-of-type(4) .service-features li:active {
		background-color: #ffffff !important;
		border-left-color: var(--azul-ste, #00bcd4) !important; /* Enciende en cian al presionar */
	}
	.services-showcase .service-row:nth-of-type(4) .service-features li:last-child {
		margin-bottom: 0px !important; 
	}

	/********* 7. 🎨 ICONOS INTERNOS DE LOS ÍTEMS (Viñetas i) *********************************/
	.services-showcase .service-row:nth-of-type(4) .service-features li i {
		font-size: 14px !important; 
		color: var(--azul-ste, #00bcd4) !important; 
		margin-right: 0px !important; 
		background: transparent !important;
		filter: drop-shadow(0 0 3px rgba(0, 188, 212, 0.5)) !important; /* Nodo LED móvil sutil */
	}

	/********* 8. 🖼️ IMAGEN / ILUSTRACIÓN SECUNDARIA ******************************************/
	.services-showcase .service-row:nth-of-type(4) .service-image-box img,
	.services-showcase .service-row:nth-of-type(4) .service-img img {
		max-width: 90% !important; 
		height: auto !important;
		border-radius: 15px !important; 
		border: 0px solid transparent !important; 
		box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important; 
		margin-top: 15px !important; 
		margin-bottom: 15px !important; 
		display: block !important;
		margin-left: auto !important; 
		margin-right: auto !important; 
		filter: none !important; 
	}

	/********* 9.A 📦 CAJA CONTENEDORA DEL BOTÓN MÓVIL (NUEVO) *********************************/
	.services-showcase .service-row:nth-of-type(4) .service-btn-wrapper {
		order: 4 !important; /* Se posiciona estrictamente antes del rombo divisor */
		width: 100% !important;
		display: flex !important;
		justify-content: center !important; /* Centrado absoluto en pantallas móviles */
		margin-top: 15px !important;
		margin-bottom: 5px !important;
	}

	/********* 9.B 🔘 PROPIEDADES DEL BOTÓN INTERNO EN TELÉFONO *********************************/
	.services-showcase .service-row:nth-of-type(4) .service-btn-wrapper .btn-ste-small {
		display: inline-block !important; 
		width: auto !important; /* Protección total contra alargamientos accidentales */
		font-family: inherit !important;
		font-size: 15px !important; 
		font-weight: 600 !important;
		color: #ffffff !important; 
		background-color: #00bcd4 !important; 
		border: 1px solid transparent !important;
		border-radius: 12px !important; 
		padding: 12px 28px !important; /* Área táctil ergonómica y cómoda */
		text-align: center !important;
		text-decoration: none !important;
		box-shadow: 0 5px 15px rgba(0, 188, 212, 0.3) !important;
	}

	/********* 10. 🔘 BOTÓN DE ACCIÓN (AL PRESIONAR / HOVER) ***********************************/
	.services-showcase .service-row:nth-of-type(4) .service-btn:hover,
	.services-showcase .service-row:nth-of-type(4) .btn-ste:hover {
		color: #ffffff !important; 
		background-color: #0097a7 !important; 
	}

	
	    /********* 1. 🛠️ CONTENEDOR MAESTRO PRINCIPAL ------(BLOQUE 5)--------------(BLOQUE 5)----------------(BLOQUE 5) **********/
	.services-showcase .service-row:nth-of-type(5) {
		background-color: #CAD5E2; /* Base gris unificada idéntica a los bloques 1 al 4 */
		background-image: linear-gradient(135deg, 
			rgba(153, 161, 175, 1) 0%, 
			rgba(125, 133, 145, 0.50) 100% 
		), url('img/servicio_cinco.webp') !important; /* 🖼️ Foto de agua específica del bloque 5 */
		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: 24px !important; 
		padding: 25px 12px !important; 
		padding-bottom: 10px !important;
		margin-bottom: 20px; 
		box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2) !important; 
	}

	/********* 2.A 🔀 CONTENEDOR DE CABECERA HORIZONTAL MÓVIL (BLOQUE 5) ****************************/
	.services-showcase .service-row:nth-of-type(5) .service-header-flex {
		display: flex !important;
		flex-direction: row !important; 
		align-items: center !important; 
		justify-content: flex-start !important;
		gap: 12px !important; 
		margin-bottom: 12px !important; 
		margin-left: 12px !important; 
		width: 100% !important;
		box-sizing: border-box !important;
	}
	/* Control del Icono dentro de la Cabecera Horizontal Móvil */
	.services-showcase .service-row:nth-of-type(5) .service-header-flex .service-icon {
		margin: 0 !important; 
		display: inline-block !important;
	}
	/* 🎨 FILAMENTO INTERNO DEL ICONO EN MÓVIL (BLOQUE 5) */
	.services-showcase .service-row:nth-of-type(5) .service-header-flex .service-icon i {
		color: #00e5ff !important; /* Tono cian cyber brillante */
		font-size: 32px !important; /* Escala ergonómica táctil */
		filter: drop-shadow(0 0 4px rgba(0, 229, 255, 0.4)) !important; /* Resplandor digital sutil */
	}
	/* Propiedades físicas de la raya divisoria vertical en celulares */
	.services-showcase .service-row:nth-of-type(5) .service-header-flex .vertical-divider {
		width: 2px !important; 
		height: 26px !important; 
		background-color: #00e5ff !important; 
		display: inline-block !important;
		flex-shrink: 0 !important; 
		opacity: 1 !important; 
		box-shadow: 0 0 6px rgba(0, 229, 255, 0.4) !important; /* Efecto LED móvil */
	}

	/********* 2.B 🏷️ TÍTULO PRINCIPAL EN MÓVIL (BLOQUE 5 ACOPLADO) *****************************************/
	.services-showcase .service-row:nth-of-type(5) .service-header-flex h3 {
		font-family: inherit !important; 
		font-size: 19px !important; 
		color: #000000 !important; /* Negro pulido en móvil para contraste sobre el fondo gris */
		margin: 0 !important; 
		letter-spacing: 0.5px !important;
		text-align: left !important; 
		line-height: 1.1 !important;
	}

	/********* 3. 📦 CAJA GENERAL QUE ENCIERRA AL PÁRRAFO (.tech-intro-box) *******************/
	.services-showcase .service-row:nth-of-type(5) .tech-intro-box {
		margin-top: 5px !important; 
		margin-bottom: 18px !important; 
		padding: 14px 20px !important; /* Relleno compactado ideal para smartphones */
		background: rgba(11, 22, 34, 0.88) !important; /* Cristal líquido oscuro translúcido */
		backdrop-filter: blur(8px) !important;
		-webkit-backdrop-filter: blur(8px) !important;
		border-radius: 4px 18px 4px 18px !important; /* Geometría asimétrica de corte técnico */
		border: 1px solid rgba(0, 188, 212, 0.4) !important;
		border-left: 4px solid var(--azul-ste, #00bcd4) !important; 
		box-shadow: 0 6px 20px rgba(0, 188, 212, 0.08), 
					inset 0 0 12px rgba(0, 188, 212, 0.03) !important;
	}

	/********* 4. 📝 PROPIEDADES DEL PÁRRAFO INTRODUCTORIO (Texto interno) *******************/
	.services-showcase .service-row:nth-of-type(5) .tech-intro-box p {
		font-family: inherit !important; 
		font-size: 14.5px !important; 
		line-height: 1.4 !important; /* Interlineado ergonómico para pantallas táctiles */
		margin-top: 0px !important; 
		margin-bottom: 0px !important; 
		margin-left: 0px !important; 
		text-align: left !important; 
		letter-spacing: 0.2px !important;
		color: #e2e8f0 !important; /* Color platino de alta nitidez en celular */
		text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) !important; 
	}

	/********* 5. 📦 CAJA GENERAL QUE ENCIERRA A LOS ÍTEMS (.service-features) ****************/
	.services-showcase .service-row:nth-of-type(5) .service-features {
		margin-top: 5px !important; 
		margin-bottom: 5px !important; 
		padding: 15px 12px !important; 
		width: 100% !important;
		list-style: none !important; 
		box-sizing: border-box !important;
		background-color: rgba(248, 250, 250, 0.4) !important; 
		background-image: linear-gradient(rgba(219, 226, 230, 0.3) 1px, transparent 1px),
						  linear-gradient(90deg, rgba(219, 226, 230, 0.3) 1px, transparent 1px) !important;
		background-size: 15px 15px !important; /* Retícula compactada a 15px */
		border: 1px solid rgba(27, 38, 59, 0.12) !important; /* Enmarcado sólido continuo */
		border-radius: 12px !important; 
		box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.02) !important;
	}

	/********* 6. 💊 ÍTEMS / PASTILLAS COMPACTAS (Elementos li individuales) ******************/
	.services-showcase .service-row:nth-of-type(5) .service-features li {
		font-family: inherit !important;
		font-size: 13px !important; 
		font-weight: 500 !important;
		color: #1e293b !important; 
		background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(241, 245, 249, 0.9) 100%) !important;
		border: 1px solid rgba(0, 0, 0, 0.06) !important; 
		border-left: 4px solid #475569 !important; /* Pestaña lateral titanio oscuro */
		
		/* 🌟 SINCRO DE CURVATURA MÓVIL: Redondeado unificado a 12px en móvil para simetría de diseño */
		border-radius: 12px !important; 
		
		padding-top: 6px !important; /* Altura ideal para la interacción del pulgar */
		padding-bottom: 6px !important; 
		padding-left: 12px !important; 
		padding-right: 12px !important; 
		margin-left: 0px !important; 
		margin-right: 0px !important; 
		margin-bottom: -6px !important; /* Distancia vertical unificada entre cápsulas */
		display: flex !important;
		align-items: center !important;
		gap: 10px !important; 
		box-shadow: 0 3px 8px rgba(0, 0, 0, 0.02) !important;
		box-sizing: border-box !important;
		transition: background-color 0.2s ease, border-left-color 0.2s ease !important;
	}
	/* Respuesta táctil háptica visual en smartphones */
	.services-showcase .service-row:nth-of-type(5) .service-features li:active {
		background-color: #ffffff !important;
		border-left-color: var(--azul-ste, #00bcd4) !important; /* Enciende en cian al presionar */
	}
	.services-showcase .service-row:nth-of-type(5) .service-features li:last-child {
		margin-bottom: 0px !important; 
	}

	/********* 7. 🎨 ICONOS INTERNOS DE LOS ÍTEMS (Viñetas i) *********************************/
	.services-showcase .service-row:nth-of-type(5) .service-features li i {
		font-size: 14px !important; 
		color: var(--azul-ste, #00bcd4) !important; 
		margin-right: 0px !important; 
		background: transparent !important;
		filter: drop-shadow(0 0 3px rgba(0, 188, 212, 0.5)) !important; /* Nodo LED móvil sutil */
	}

	/********* 8. 🖼️ IMAGEN / ILUSTRACIÓN SECUNDARIA ******************************************/
	.services-showcase .service-row:nth-of-type(5) .service-image-box img,
	.services-showcase .service-row:nth-of-type(5) .service-img img {
		max-width: 90% !important; 
		height: auto !important;
		border-radius: 15px !important; 
		border: 0px solid transparent !important; 
		box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important; 
		margin-top: 15px !important; 
		margin-bottom: 15px !important; 
		display: block !important;
		margin-left: auto !important; 
		margin-right: auto !important; 
		filter: none !important; 
	}

	/********* 9.A 📦 CAJA CONTENEDORA DEL BOTÓN MÓVIL (NUEVO) *********************************/
	.services-showcase .service-row:nth-of-type(5) .service-btn-wrapper {
		order: 4 !important; /* Se posiciona estrictamente antes del rombo divisor */
		width: 100% !important;
		display: flex !important;
		justify-content: center !important; /* Centrado absoluto en pantallas móviles */
		margin-top: 15px !important;
		margin-bottom: 5px !important;
	}

	/********* 9.B 🔘 PROPIEDADES DEL BOTÓN INTERNO EN TELÉFONO *********************************/
	.services-showcase .service-row:nth-of-type(5) .service-btn-wrapper .btn-ste-small {
		display: inline-block !important; 
		width: auto !important; /* Protección contra estiramientos elásticos */
		font-family: inherit !important;
		font-size: 15px !important; 
		font-weight: 600 !important;
		color: #ffffff !important; 
		background-color: #00bcd4 !important; 
		border: 1px solid transparent !important;
		border-radius: 12px !important; 
		padding: 12px 28px !important; /* Área táctil ergonómica */
		text-align: center !important;
		text-decoration: none !important;
		box-shadow: 0 5px 15px rgba(0, 188, 212, 0.3) !important;
	}

	/********* 10. 🔘 BOTÓN DE ACCIÓN (AL PRESIONAR / HOVER) ***********************************/
	.services-showcase .service-row:nth-of-type(5) .service-btn:hover,
	.services-showcase .service-row:nth-of-type(5) .btn-ste:hover {
		color: #ffffff !important; 
		background-color: #0097a7 !important; 
	}




    /* ==========================================================================
       FRANJA 4 (MÓVIL): REORDENAMIENTO SECUENCIAL FLEXIBLE DE ELEMENTOS
       ========================================================================== */

    /* REORDENAMIENTO SECUENCIAL FLEXIBLE DE ELEMENTOS (ESTRICTO TELÉFONO) */
    .services-showcase .service-row {
        display: flex !important;
        flex-direction: column !important; 
        align-items: center;
        text-align: left;
        gap: 20px;
        margin-bottom: 45px;
        box-sizing: border-box;
    }

    /* 📱 1. PÁRRAFO: Título y Caja Gris */
    .services-showcase .service-row .service-text { 
        width: 100% !important;
        order: 1 !important; 
    }	
	
    /* Ajuste estricto para pegar el párrafo a las imágenes por debajo */
    .services-showcase .service-row .tech-intro-box {
        padding: 18px 20px !important;
        margin: 20px 10px 5px 10px !important; /* 5px abajo para eliminar el espacio invisible móvil */
    }
    
    /* 📱 2. DOS IMÁGENES GEMELAS HORIZONTALES (Alineadas en Paralelo al Ancho Máximo Real) */
    .services-showcase .service-row .service-images { 
        width: 100% !important;
        order: 2 !important; 
        display: flex !important;
        flex-direction: row !important; /* Mantiene las fotos una al lado de la otra */
        justify-content: space-between !important; /* Base normal: las estira a los bordes protegidos */
        gap: 12px !important; 
        margin: 5px 0 !important; /* Calibrado para pegar las fotos al texto superior y a las viñetas inferiores */        
        position: relative;   
        z-index: 10; 
        box-sizing: border-box !important;
        padding: 0 10px !important; /* Colchón lateral protector de los bordes del vidrio del celular */
        align-items: center !important; /* Centrado vertical interno de las dos piezas gráficas */
        transition: justify-content 0.2s ease !important; /* Transición suave de enmarcado */
    }

    /* 🌟 COMPORTAMIENTO INTELLIGENT-FLEX: Si una foto dentro del contenedor se expande, el bloque se centra al instante */
    .services-showcase .service-row .service-images:has(img.foto-expandida) {
        justify-content: center !important; /* Rompe el amarre lateral y agrupa las imágenes en el medio exacto */
    }

    /* Formato base elástico y balanceado simétricamente para las fotos móviles */
    .services-showcase .service-row .service-images img {
        width: calc(50% - 6px) !important; /* Ocupa el máximo espacio real horizontal tomando el gap central */
        height: 155px !important; /* Proporción visual en celulares */
        object-fit: cover !important;
        border-radius: 8px !important; /* Curvatura perfecta y visible de las esquinas */
        cursor: pointer;
        z-index: 1;
        position: relative;
        left: auto !important;
        right: auto !important;
        transform: scale(1) translate(0, 0) !important; /* Forzado de inicio neutral */
        
        /* 🛡️ CORREGIDO: Devolvemos el control al navegador para que el usuario SÍ pueda arrastrar la pantalla libremente */
        touch-action: pan-y !important; 
        
        will-change: transform, box-shadow;
        transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.3s ease !important;
    }

    /* Resetea de forma absoluta la traslación asimétrica de PC en las pantallas táctiles */
    .services-showcase .service-row .service-images .img-2 {
        transform: none !important;
    }

    /* 🌟 EFECTO ZOOM TÁCTIL ACTIVO SÚPER FLUIDO EN EL CENTRO ABSOLUTO DE LA PANTALLA */
    /* Cuando se detecta el toque físico del pulgar, la foto se expande y se posiciona en el medio real del teléfono */
    .services-showcase .service-row .service-images img.foto-expandida {
        transform: scale(1.42) !important; /* Escala calibrada matemáticamente para anchos táctiles de 360px a 430px */
        z-index: 999 !important; 
        box-shadow: 0 15px 35px rgba(0, 229, 255, 0.45) !important; /* Aura cian unificada con tu nueva iluminación */
        pointer-events: auto !important;
        max-width: 100% !important; 
    }

    /* 📱 3. ITEMS: Las viñetas técnicas con las dobles flechas transparentes */
    /* Al heredar el rectángulo perimetral con degradado de PC, forzamos su acople en celulares */
    .services-showcase .service-row .service-features { 
        width: 100% !important;
        order: 3 !important; 
        background: transparent !important; /* Evita recuadros duplicados en teléfonos */
        border: 2px solid var(--azul-ste, #56C8C0) !important; /* Preserva tu marco perimetral cian */
        border-radius: 12px !important;
        padding: 12px 20px !important;
        margin: 10px 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        box-shadow: none !important;
    }

    .services-showcase .service-row .service-features li {
        font-size: 15px;
        display: flex !important;
        align-items: center;
        text-align: left;
    }

    /* 📱 4. El botón "Ver Detalles" */
    .services-showcase .service-row .btn-ste-small { 
        order: 4 !important; 
        width: 100% !important; 
        text-align: center;
        margin-top: 10px !important;
    }

    /* 📱 5. El divisor decorativo de rombos */
    .services-showcase .service-row .service-divider { 
        order: 5 !important; 
        margin: 25px auto !important;
        max-width: 85%;
        width: 100%;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }
    
    .services-showcase .service-row .service-divider .diamond-large {
        transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 0.3s ease;
    }

    /* --- ANIMACIÓN DINÁMICA DE ROMBOS MEDIANTE SCROLL (SINCRONIZACIÓN JS) --- */
    .services-showcase .service-row .service-divider.diamond-rotate .diamond-large {
        transform: rotate(225deg) scale(1.1); 
        background-color: #ff2a2a; 
    }


    /* ==========================================================================
       FRANJA 5 (MÓVIL): MÉTODO DE TRABAJO EN CUADRÍCULA ELÁSTICA 2X2
       ========================================================================== */
	
    .process-section {
        margin-top: -80px !important; /* 🎛️ CONTROL MÓVIL: Acerca o aleja de los servicios */
    }
	
    .process-flex {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important; /* Formato de cuadrícula de 2x2 */
        gap: 15px;
        padding: 0 10px;
    }

    /* Oculta las flechas conectoras horizontales de PC */
    .process-arrow {
        display: none !important;
    }

    .process-card {
        padding: 15px 10px;
    }

    .process-icon {
        font-size: 24px;
        margin-bottom: 8px;
    }

    .process-card h3 {
        font-size: 0.9rem;
    }

    .process-card p {
        font-size: 0.7rem;
        line-height: 1.2;
    }
	
    /* ==========================================================================
       FRANJA 6 (MÓVIL): COBERTURA GEOGRÁFICA REGIONAL Y NACIONAL
       ========================================================================== */
    .coverage-section {
        padding: 40px 15px;
    }

    .coverage-block .block-header h3 {
        font-size: 1.3rem;
    }

    /* Las 3 tarjetas de regiones colapsan a una sola columna continua */
    .coverage-block .regions-grid {
        grid-template-columns: 1fr !important;
        gap: 25px;
        padding: 0 5px;
    }

    .regions-grid .region-card {
        padding: 30px 20px;
    }

    /* El bloque premium nacional de fondo oscuro colapsa verticalmente */
    .coverage-section .national-coverage-block .national-card {
        flex-direction: column !important;
        text-align: center !important;
        padding: 30px 20px;
        gap: 20px;
    }

    .national-card .national-icon {
        font-size: 50px;
    }

    .national-content h3 {
        font-size: 1.4rem;
    }

    .national-content p {
        font-size: 0.85rem;
    }

    /* Centrado de las etiquetas de estados de Venezuela */
    .national-content .states-tags {
        justify-content: center;
        gap: 8px;
    }

    .states-tags .state-tag {
        padding: 4px 10px;
        font-size: 0.75rem;
    }
	
    /* ==========================================================================
       FRANJA 7 (MÓVIL): CALIBRACIÓN DE ASISTENCIA DE EMERGENCIA (CTA)
       ========================================================================== */
    .cta-flex {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }

    .cta-text h2 {
        font-size: 1.4rem;
        text-align: center !important;
    }

    .cta-text p {
        text-align: center !important;
        font-size: 0.9rem;
    }
		
    /* Distribuye los botones de acción uno al lado del otro de forma equilibrada */
    .cta-actions {
        display: flex !important;
        flex-direction: row !important; 
        justify-content: center !important; /* Centra los dos botones horizontalmente */
        align-items: center !important;
        gap: 15px; 
        width: 100%;
        margin-top: 25px !important;
    }

    .btn-emergency, 
    .btn-whatsapp-cta {
        flex: 1 !important; /* Fuerza el ancho simétrico */
        max-width: 160px;
        padding: 12px 5px;
        font-size: 13px;
        text-align: center;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px;
        border-radius: 8px;
    }
	
    /* ==========================================================================
       FRANJA 9 (MÓVIL): SECCIÓN DE CONTACTO DE ASESORES
       ========================================================================== */
    .contact-section h2 {
        text-align: center !important;
        font-size: 1.6rem !important;
        margin-bottom: 30px !important;
    }

    /* ==========================================================================
       FRANJA 10 (MÓVIL): PIE DE PÁGINA (FOOTER)
       ========================================================================== */
    /* El sello digital RNC se apila verticalmente para mayor comodidad de lectura */
    .rnc-badge {
        flex-direction: column !important;
        text-align: center !important;
        gap: 10px !important;
    }

    /* ==========================================================================
       ELEMENTOS FLOTANTES (MÓVIL): BOTÓN DE ASCENSOR (PB) ULTRA-PREMIUM TÁCTIL
       ========================================================================== */
    .elevator-btn-back {
        bottom: 20px !important;
        right: 20px !important;
        -webkit-tap-highlight-color: transparent !important; /* Elimina recuadro gris de fábrica */
        border-radius: 50% !important;
    }

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

    /* 🟢 EFECTO DE DESTELLO CIRCULAR HÁPTICO CON UN RADIO MAYOR AL BOTÓN */
    .elevator-btn-back .panel-button::after {
        content: "";
        position: absolute;
        top: -8px;    /* Expande el destello circular hacia afuera del anillo metálico */
        left: -8px;   
        right: -8px;  
        bottom: -8px; 
        border-radius: 50%; /* Aura de luz en esfera perfecta */
        background: rgba(0, 188, 212, 0); /* Totalmente invisible en reposo */
        transition: background 0.2s ease, transform 0.2s ease;
        pointer-events: none;
        transform: scale(0.9);
    }

    /* Aura elástica que se enciende de forma expansiva al pulsar con el dedo */
    .elevator-btn-back:active .panel-button::after {
        background: rgba(0, 188, 212, 0.25) !important; /* Círculo de luz cian translúcido unificado */
        transform: scale(1.1) !important; /* Efecto expansivo cinético premium */
    }

    .elevator-btn-back .button-text {
        font-size: 14px !important;
    }
    
    .elevator-btn-back .button-light {
        width: 4px !important;
        height: 4px !important;
        margin-top: 2px !important;
    }
	
} /* 🌟 Cierre definitivo de la LLAVE MAESTRA de la Media Query para teléfonos */





/* ==========================================================================
   GLOBAL: CHASIS DE AVALES LEGALES DE AUTORIDAD - LETRAS DORADAS LÍQUIDAS
   ========================================================================== */
.main-footer {
    background-color: #0b0e11 !important; /* Pozo oscuro titanio para resaltar el oro */
    padding: 40px 0 20px 0 !important;
    width: 100% !important;
    border-top: 3px solid #162225 !important;
}

/* Distribución elástica adaptativa para las dos insignias institucionales */
.main-footer .legal-badges-container {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 30px !important; /* Separación fija en computadoras */
    width: 100% !important;
    max-width: 1140px !important;
    margin: 0 auto 35px auto !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
}

/* Moldura común premium con trasfondo cyber-cristal líquido traslúcido */
.main-footer .rnc-badge-premium,
.main-footer .sencamer-badge-premium {
    flex: 1 !important;
    max-width: 480px !important;
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
    padding: 20px 25px !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.005) 100%) !important;
    /* Filamento láser perimetral en Cobre suave sutil */
    border: 1px solid rgba(245, 176, 65, 0.15) !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
    transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), border-color 0.3s ease, box-shadow 0.3s ease !important;
    will-change: transform;
}

/* --- 🌟 EFECTO ORO LÍQUIDO EN LOS ICONOS VECTORIALES DE ENTRADA --- */
.main-footer .rnc-badge-premium i,
.main-footer .sencamer-badge-premium i {
    font-size: 2rem !important;
    flex-shrink: 0 !important;
    /* Gradiente metalizado puro reflejado directamente sobre el vector del icono */
    background: linear-gradient(135deg, #fff3b0 0%, #ffd700 50%, #b8860b 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    filter: drop-shadow(0 2px 8px rgba(255, 215, 0, 0.4)) !important; /* Aura LED dorada activa */
    transition: transform 0.4s ease !important;
}

/* Envoltura interna para el flujo textual continuo */
.main-footer .badge-text-box {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    text-align: left !important;
}

/* --- 🌟 EFECTO ORO LÍQUIDO INDUSTRIAL EN LOS TÍTULOS CORE --- */
.main-footer .badge-text-box strong {
    font-family: 'Poppins', sans-serif !important;
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    line-height: 1.3 !important;
    
    /* Inyección de degradado metalizado pulido reflectante de tres capas de Oro */
    background: linear-gradient(135deg, #ffffff 0%, #ffeaa7 30%, #ffd700 60%, #d4af37 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    /* Sombra proyectada en negro puro por GPU para legibilidad destructiva de alto contraste */
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8)) !important; 
}

/* Subtítulos descriptivos en platino atenuado */
.main-footer .badge-text-box span {
    font-family: 'Poppins', sans-serif !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    color: #94a3b8 !important;
    line-height: 1.2 !important;
}

/* Números de registros impresos en haz de filamento cromo suave */
.main-footer .badge-text-box small {
    font-family: monospace !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    color: #cbd5e1 !important;
    letter-spacing: 1px !important;
    margin-top: 2px !important;
    opacity: 0.85 !important;
}

/* ==========================================================================
   INTERACCIONES CINÉTICAS ADAPTATIVAS (HOVER ESCRITORIO PC)
   ========================================================================== */
.main-footer .rnc-badge-premium:hover,
.main-footer .sencamer-badge-premium:hover {
    transform: translateY(-4px) !important; /* Micro-elevación mecánica de fuelle */
    border-color: #ffd700 !important; /* El filamento pasa a oro neón brillante pleno */
    box-shadow: 0 15px 35px rgba(255, 215, 0, 0.15) !important; /* Aura Envolvente Interactiva */
}

.main-footer .rnc-badge-premium:hover i,
.main-footer .sencamer-badge-premium:hover i {
    transform: scale(1.12) rotate(3deg) !important; /* Reacción elástica en el pulso del cursor */
}

/* ==========================================================================
   RESPONSIVE TOTAL PARA SMARTPHONES Y PANTALLAS TÁCTILES (768PX)
   ========================================================================== */
@media (max-width: 768px) {
    /* Muta la retícula horizontal de PC a un apilamiento vertical corrido y limpio */
    .main-footer .legal-badges-container {
        flex-direction: column !important;
        gap: 16px !important; /* Distancia elástica compacta de respiro perimetral */
        padding: 0 15px !important;
        margin-bottom: 25px !important;
    }

    .main-footer .rnc-badge-premium,
    .main-footer .sencamer-badge-premium {
        width: 100% !important;
        max-width: 100% !important;
        padding: 16px 20px !important;
        border-radius: 12px !important;
        box-sizing: border-box !important;
    }
    
    .main-footer .badge-text-box {
        text-align: left !important; /* Lectura simétrica de orillo corrida hacia la izquierda */
    }

    .main-footer .badge-text-box strong {
        font-size: 0.85rem !important; /* Ligera compresión de escala para smartphones */
    }

    .main-footer .badge-text-box span {
        font-size: 0.75rem !important;
    }
}