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

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

/* ==========================================================================
   2. FRANJA 2 NEGRA: NAVEGACIÓN CORPORATIVA SINCRONIZADA (PC ESCRITORIO)
   ========================================================================== */
.main-nav {
    background-color: #111111 !important; /* ⚡ FORZADO SÓLIDO: Asegura la manifestación real de la Franja Negra */
    position: sticky;
    top: 0;
    z-index: 1000;
    /* Filamento láser en azul STE unificado de la corporación */
    border-bottom: 2px solid rgba(0, 188, 212, 0.4); 
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 10px 0;
}

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

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

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

    /* ARQUITECTURA DEL PANEL CONTENEDOR EN CRISTAL (SINCRO CON EL INDEX): */
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important; /* Clava el texto e icono a la izquierda de la pastilla */
    gap: 10px !important;                 /* Separación exacta entre el icono institucional y el texto */
    padding: 8px 18px !important;         /* Colchón interno que moldea la forma de la pastilla */
    border-radius: 8px !important;        /* Esquinas suavizadas de la caja */
    
    /* Trasfondo oscuro de pozo traslúcido sutil al 3% */
    background: rgba(255, 255, 255, 0.03) !important; 
    
    /* Bordesito con filamento láser en acabado Azul STE al 15% */
    border: 1px solid rgba(0, 188, 212, 0.15) !important; 
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

/* ==========================================================================
   3. FRANJA 3 INTERNA: HERO DE ALTA ALTA GAMA CORPORATIVA (PC - NOSOTROS)
   ========================================================================== */
/* 🛠️ SINCRO TOTAL: Apunta a tu sección .hero-clear-watermark del HTML de Nosotros, mutándola al chasis premium */
.main-wrapper .hero-clear-watermark,
.main-wrapper .hero-blue {
    /* Efecto metalizado trilineal institucional basado en el tono Azul STE y Gris Grafito Industrial */
    background-image: 
        /* Capa 1: Reflejo e iluminación de placa de acero/aluminio pulido */
        linear-gradient(135deg, rgba(255, 255, 255, 0.20) 0%, rgba(0, 0, 0, 0.35) 100%),
        /* Capa 2: Degradado base institucional de la firma de Azul STE a un profundo Gris Carbón */
        linear-gradient(135deg, #00bcd4 0%, #0097a7 40%, #111b24 100%) !important;
    background-blend-mode: overlay !important;
    padding: 37px 0 !important;
    text-align: center !important;
    color: #ffffff !important;
    position: relative !important;
    overflow: hidden !important;
    /* Línea de acento inferior en un tono azul pino denso para cerrar el chasis de potencia */
    border-bottom: 5px solid #006064 !important; 
    box-shadow: inset 0 -10px 25px rgba(0, 0, 0, 0.45) !important;
    width: 100% !important;
}

/* --- 3.1 MARCA DE AGUA: LOGOTIPO CORPORATIVO STE INTEGRADO EN SEGUNDO PLANO --- */
.main-wrapper .hero-clear-watermark::after,
.main-wrapper .hero-blue::after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) rotate(-15deg) !important;
    right: 5% !important; /* Posicionado fijamente a la derecha igual al engranaje */
    width: 350px !important; /* Ancho unificado para evitar deformaciones horizontales */
    height: 350px !important;
    background: url('img/ste.png') no-repeat center center !important;
    background-size: contain !important;
    opacity: 0.08 !important; /* Opacidad atenuada elegante para no interferir con la lectura */
    pointer-events: none !important;
    z-index: 1 !important;
    will-change: transform;
}

/* --- 3.2 ANULACIÓN DE COMPONENTES ELÉCTRICOS VIEJOS EN NOSOTROS --- */
.main-wrapper .hero-clear-watermark::before,
.main-wrapper .hero-blue::before {
    display: none !important; /* Elimina de raíz el símbolo ground para un look limpio institucional */
}

/* --- 3.3 TEXTOS INTERNOS DEL HERO INSTITUCIONAL --- */
.main-wrapper .hero-clear-watermark h1,
.main-wrapper .hero-blue h1 {
    font-family: 'Poppins', sans-serif !important;
    /* 🛠️ SINCRO: Mantiene tus 2.3rem originales calibrados para que el nombre de la empresa no colapse en laptops */
    font-size: 2.3rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.6) !important;
    position: relative !important;
    z-index: 2 !important;
    letter-spacing: 1.5px !important;
    color: #ffffff !important;
    margin: 0 !important;
}

.main-wrapper .hero-clear-watermark .hero-subtitle,
.main-wrapper .hero-blue .hero-subtitle {
    font-family: 'Poppins', sans-serif !important;
    font-size: 1.1rem !important; /* Mantiene tu 1.1rem original balanceado de Nosotros */
    font-weight: 500 !important;
    max-width: 750px !important; /* Mantiene tu max-width exacto de la plantilla original */
    margin: 10px auto 0 auto !important;
    position: relative !important;
    z-index: 2 !important;
    line-height: 1.6 !important;
    color: #edfbf2 !important; /* Tono blanco cian ultra-suave para legibilidad premium */
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5) !important;
}


/* ==========================================================================
   3.4 TEXTOS INTERNOS ELECTROMECÁNICOS - INTRODUCCIÓN EXTENDIDA (PC)
   ========================================================================== */
/* ⚡ ENERGÍA VIVA: Caja expandida con degradado de cristal líquido y filamentos de la firma */
.tech-intro-box {
    max-width: 1000px !important; /* Se mantiene expandido a 1000px */
    width: 100% !important;
    padding: 28px 35px !important; /* Respiro elástico interno premium */
    margin: 35px auto 45px auto !important; /* Centrado axial balanceado por GPU */
    box-sizing: border-box !important;
    
    /* ⚡ COLOR INYECTADO: Degradado traslúcido suave que va de blanco a un sutil tinte cian electrónico */
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(0, 188, 212, 0.04) 100%) !important;
    
    /* Filamento perimetral elástico unificado */
    border: 1px solid rgba(0, 188, 212, 0.15) !important;
    /* ⚡ LÍNEA DE ALTA TENSIÓN SUPERIOR: Inyecta el color Azul STE instantáneo en la cabecera de la placa */
    border-top: 4px solid #00bcd4 !important;
    
    border-radius: 0px 0px 16px 16px !important; /* Esquinas inferiores redondeadas para look continuo */
    box-shadow: 0 10px 30px rgba(0, 188, 212, 0.04) !important; /* Destello sutil de fondo */
}

/* Título de la sección */
.tech-intro-box h2 {
    font-family: 'Poppins', sans-serif !important;
    font-size: 1.8rem !important;
    color: #111111 !important; 
    margin-top: 0 !important;
    margin-bottom: 22px !important;
    position: relative !important;
    text-align: left !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

/* ⚡ DETALLE EXTRA: Inyecta un micro-icono dinámico antes del título para dar más color */
.tech-intro-box h2::before {
    content: "\f05a" !important; /* Icono info-circle de FontAwesome */
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    color: #00bcd4 !important; /* Brilla en Azul STE unificado */
    font-size: 1.5rem !important;
    text-shadow: 0 0 8px rgba(0, 188, 212, 0.4) !important;
}

/* Párrafos descriptivos interiores */
.tech-intro-box p {
    font-size: 1.05rem !important;
    line-height: 1.75 !important; /* Aire tipográfico premium */
    color: #2c3e50 !important; /* Grafito de alta definición */
    margin-bottom: 15px !important;
    text-align: justify !important; /* Justificado simétrico perfecto */
}

/* Remueve el colchón excedente en el cierre del bloque */
.tech-intro-box p:last-child {
    margin-bottom: 0 !important;
}



/* ==========================================================================
   4. REJILLA DE TARJETAS LEGALES - CHASIS INDUSTRIAL CYBER-OSCURO (PC)
   ========================================================================== */
.service-features-about {
    list-style: none !important;
    padding: 0 !important;
    margin: 40px 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
}

.service-features-about li {
    /* ⚡ ADIÓS AL BLANCO: Placa Cyber-Oscura traslúcida unificada de la firma */
    background: rgba(11, 22, 34, 0.94) !important; 
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    
    /* Filamento perimetral sutil en Azul STE al 25% */
    border: 1px solid rgba(0, 188, 212, 0.25) !important; 
    /* Haz de acento de alta tensión izquierdo para inyectar color instantáneo */
    border-left: 5px solid #00bcd4 !important; 
    
    border-radius: 16px !important; 
    padding: 24px !important;
    display: flex !important;
    align-items: start !important;
    gap: 16px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
    transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1), 
                box-shadow 0.35s cubic-bezier(0.25, 1, 0.5, 1), 
                background 0.3s ease, 
                border-color 0.3s ease !important;
    will-change: transform, box-shadow;
}

.service-features-about li .card-icon-box {
    /* El icono se enciende con el Azul STE original y recibe un destello neón */
    color: #00bcd4 !important; 
    font-size: 1.6rem !important; 
    width: 35px !important;
    text-align: center !important;
    margin-top: 2px !important;
    filter: drop-shadow(0 0 8px rgba(0, 188, 212, 0.6)) !important;
    transition: color 0.3s ease, transform 0.3s ease !important;
}

.service-features-about li .card-content-text {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    padding-right: 18px !important;
}

.service-features-about li .card-content-text strong {
    font-family: 'Poppins', sans-serif !important;
    font-size: 1.1rem !important;
    color: #ffffff !important; /* Texto principal en blanco puro brillante */
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
}

.service-features-about li .card-content-text span {
    font-size: 0.95rem !important;
    line-height: 1.60 !important; 
    color: #cbd5e1 !important; /* Platino de alta visibilidad técnica */
    display: inline-block !important;
}

/* ✨ INTERACCIÓN CINÉTICA DE IMPACTO AL PASAR EL CURSOR */
.service-features-about li:hover {
    background: rgba(11, 22, 34, 0.98) !important; 
    border-color: #00bcd4 !important; /* El orillo se enciende por completo */
    transform: translateY(-6px) !important; /* Micro-elevación mecánica de resorte unificada */
    /* Halo lumínico expansivo sincronizado en el Azul de la firma al 40% */
    box-shadow: 0 15px 35px rgba(0, 188, 212, 0.4) !important; 
    cursor: pointer;
}

.service-features-about li:hover .card-icon-box {
    color: #ffffff !important; /* El icono muta a blanco brillante */
    filter: drop-shadow(0 0 12px #00bcd4) !important; /* Intensifica el destello digital */
    transform: scale(1.15) rotate(5deg) !important; 
}



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


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


/* ==========================================================================
   7. MEDIA QUERY: TRANSICIÓN PARA TABLETS EN FORMATO HORIZONTAL (992PX)
   ========================================================================== */
@media (max-width: 992px) {
    
    /* 🦾 SINCRO HERO: Ajuste de escala para el Héro de alta tensión en formato tableta */
    .main-wrapper .hero-clear-watermark h1,
    .main-wrapper .hero-blue h1 {
        font-size: 2.5rem !important;
    }
    
    .main-wrapper .hero-clear-watermark .hero-subtitle,
    .main-wrapper .hero-blue .hero-subtitle {
        font-size: 1.05rem !important;
        max-width: 90% !important;
    }

    /* 🦾 SINCRO INTRO: Caja expandida de Ingeniería Multimarca adaptada a celdas horizontales */
    .tech-intro-box {
        max-width: 95% !important;
        width: 100% !important;
        padding: 24px 25px !important;
        margin: 25px auto !important;
    }
    
    /* 🦾 REJILLA DE RESPALDO EN TABLETAS: Conversión elástica de la cuadrícula a columna única */
    .service-features-about {
        grid-template-columns: 1fr !important; /* Pasa de 2 columnas de PC a 1 columna unificada */
        gap: 20px !important;
        padding: 0 15px !important;
        margin: 30px 0 !important;
    }

    .service-features-about li {
        padding: 20px !important;
        gap: 14px !important;
    }

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

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

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

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

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

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

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

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

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

    /* ----------------------------------------------------------------------
       13.2 FRANJA HERO INTERNA (ADAPTACIÓN ERGONÓMICA INTERNACIONAL)
       ---------------------------------------------------------------------- */
    body .ads-layout-container .main-wrapper .hero-clear-watermark,
    body .ads-layout-container .main-wrapper .hero-blue {
        padding: 15px 0 25px 0 !important; 
        /* 🛠️ SINCRO TOTAL: Fondo metalizado unificado con tu marca de agua fotográfica */
        background: linear-gradient(135deg, rgba(17, 24, 39, 0.95) 0%, rgba(22, 34, 57, 0.9) 100%),
                    url('img/ste.png') no-repeat center center !important;
        background-size: contain !important;
    }

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

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

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

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

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

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

        /* ----------------------------------------------------------------------
       13.3 CAJA DE INTRODUCCIÓN MULTIMARCA EN MÓVIL (768PX)
       ---------------------------------------------------------------------- */
    .tech-intro-box {
        max-width: 100% !important;
        width: 100% !important;
        padding: 20px 15px !important;
        margin-top: 15px !important;
        margin-bottom: 25px !important;
        border-left: none !important;
        border-top: 4px solid #00bcd4 !important; 
        border-radius: 0px 0px 12px 12px !important;
        box-sizing: border-box !important;
    }

    .tech-intro-box h2 {
        font-size: 1.3rem !important;
        text-align: center !important;
        justify-content: center !important;
    }

    .tech-intro-box p {
        /* ⚡ CORRECCIÓN DE ALINEACIÓN: Forza el filo izquierdo puro en smartphones */
        text-align: left !important;     /* 🧠 ANTES: center !important */
        font-size: 14px !important;
        line-height: 1.60 !important;     /* Colchón de aire idóneo para lectura táctil */
        box-sizing: border-box !important;
    }


    /* ----------------------------------------------------------------------
       13.4 REJILLA DE TARJETAS LEGALES CYBER-OSCURAS EN MÓVIL
       ---------------------------------------------------------------------- */
    .service-features-about {
        grid-template-columns: 1fr !important; /* Fuerza una sola columna vertical estricta */
        gap: 16px !important;
        padding: 0 10px !important;
        margin: 25px 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .service-features-about li {
        flex-direction: column !important; /* Alineación de arriba a abajo dentro de la tarjeta */
        align-items: center !important;    /* Centra axialmente el icono con los textos */
        padding: 20px 15px !important;
        border-left: none !important;
        border-top: 4px solid #00bcd4 !important; /* El haz de acento pasa arriba para look continuo móvil */
        border-radius: 0px 0px 14px 14px !important;
        gap: 12px !important;
    }

    .service-features-about li .card-icon-box {
        font-size: 1.8rem !important; /* Ícono expandido para facilitar el impacto visual táctil */
        margin-top: 0 !important;
        text-align: center !important;
        width: 100% !important;
    }

    .service-features-about li .card-content-text {
        padding-right: 0 !important;
        text-align: center !important;
        align-items: center !important;
        width: 100% !important;
    }

    .service-features-about li .card-content-text strong {
        font-size: 1.05rem !important;
        text-align: center !important;
        width: 100% !important;
    }

    .service-features-about li .card-content-text span {
        font-size: 13.5px !important;
        text-align: center !important; /* Centrado axial del párrafo legal */
        line-height: 1.50 !important;
        width: 100% !important;
    }

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

    .main-nav .nav-quick-actions-mobile {
        display: flex !important;
        align-items: center !important;
        gap: 15px !important;
    }

    .main-nav .quick-btn-mob {
        border: none !important;
        color: #ffffff !important;
        font-size: 1.1rem !important;
        cursor: pointer !important;
        -webkit-tap-highlight-color: transparent !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-decoration: none !important;
        width: 38px !important;
        height: 38px !important;
        border-radius: 8px !important;
        background: rgba(255, 255, 255, 0.04) !important; 
        border: 1px solid rgba(0, 188, 212, 0.18) !important; /* Filamento en Azul STE */
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2) !important;
        transition: all 0.2s ease-in-out !important;
    }

    .main-nav .quick-btn-mob i {
        color: #00bcd4 !important; 
        text-shadow: 0 0 5px rgba(0, 188, 212, 0.3) !important;
    }

    .main-nav .quick-btn-mob:active {
        background: rgba(0, 188, 212, 0.15) !important; 
        border-color: #00bcd4 !important;               
        box-shadow: 0 0 12px rgba(0, 188, 212, 0.4) !important;
        transform: scale(0.95) !important;               
    }

    .main-nav .menu-toggle {
        display: block !important;
        background: none !important;
        border: none !important;
        color: #00bcd4 !important;           
        font-size: 26px !important;
        padding: 5px 10px !important;
    }

    .main-nav .btn-quote-adaptive {
        padding: 8px 16px !important;
        font-size: 0.65rem !important;
        background: linear-gradient(135deg, #00bcd4 0%, #0097a7 100%) !important; 
        border-radius: 6px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 4px 12px rgba(0, 188, 212, 0.3) !important;
    }

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

    .main-nav .nav-links.active {
        display: flex !important;            
        flex-direction: column !important;
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        width: 100% !important;
        background: rgba(11, 22, 34, 0.98) !important;
        border-bottom: 3px solid #00bcd4 !important;   
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6) !important;
        padding: 15px !important;
        gap: 12px !important;
        box-sizing: border-box !important;
        z-index: 999999 !important;                    
    }

    /* ----------------------------------------------------------------------
       13.6 FILTROS DE NAVEGACIÓN MÓVIL ADICIONALES
       ---------------------------------------------------------------------- */
    .main-nav .nav-links > li > a[href="nosotros.html"] {
        display: none !important; /* Oculta el enlace a sí mismo en teléfonos */
    }

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

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

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

    .main-nav .nav-links .dropdown-menu li a {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important; 
        width: 100% !important;
        padding: 10px 20px !important; 
        font-size: 14px !important; 
        font-weight: 600 !important;
        letter-spacing: 1px !important;
        border-radius: 8px !important; 
        background: rgba(255, 255, 255, 0.03) !important; 
        border: 1px solid rgba(255, 255, 255, 0.08) !important; 
        color: #ffffff !important;
        text-transform: uppercase !important; 
        box-sizing: border-box !important;
        transition: all 0.2s ease !important;
    }

    .main-nav .nav-links .dropdown-menu li a:active {
        background: rgba(0, 188, 212, 0.2) !important; /* Iluminación háptica Azul STE */
        border-color: #00bcd4 !important;
        box-shadow: 0 0 15px rgba(0, 188, 212, 0.3) !important;
        padding-left: 25px !important; 
    }

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