/* ==========================================================================
   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 INDEPENDIENTES (COVENIN.CSS)
   ========================================================================== */
.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;
}

/* ⚡ CHASSIS COMÚN BASE: Fondo oscuro profundo para todas las placas */
.service-features-about .norma-card {
    background: rgba(11, 22, 34, 0.94) !important; 
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !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 .norma-card .card-icon-box {
    font-size: 1.6rem !important; 
    width: 35px !important;
    text-align: center !important;
    margin-top: 2px !important;
    transition: color 0.3s ease, transform 0.3s ease !important;
}

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

.service-features-about .norma-card .card-content-text strong {
    font-family: 'Poppins', sans-serif !important;
    font-size: 1.1rem !important;
    color: #ffffff !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
}

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

/* ==========================================================================
   🎨 CONTROLES DE COLOR PERSONALIZADOS POR CUADRO (ADIÓS A LO MONÓTONO)
   ========================================================================== */

/* --- 🌟 CUADRO 1: COVENIN 621-1 (Haz Láser Azul STE Eléctrico) --- */
.service-features-about .doc-1 {
    border-left: 5px solid #00bcd4 !important;
}
.service-features-about .doc-1 .card-icon-box {
    color: #00bcd4 !important;
    filter: drop-shadow(0 0 8px rgba(0, 188, 212, 0.6)) !important;
}
.service-features-about .doc-1:hover {
    background: rgba(11, 22, 34, 0.98) !important; 
    border-color: #00bcd4 !important;
    transform: translateY(-6px) !important; 
    box-shadow: 0 15px 35px rgba(0, 188, 212, 0.4) !important; 
    cursor: pointer;
}
.service-features-about .doc-1:hover .card-icon-box {
    color: #ffffff !important;
    filter: drop-shadow(0 0 12px #00bcd4) !important;
    transform: scale(1.15) rotate(5deg) !important; 
}

/* --- 🌟 CUADRO 2: MERCOSUR NM 267 (Haz Láser Naranja Cobre Hidráulico) --- */
.service-features-about .doc-2 {
    border-left: 5px solid #e67e22 !important;
}
.service-features-about .doc-2 .card-icon-box {
    color: #e67e22 !important;
    filter: drop-shadow(0 0 8px rgba(230, 126, 34, 0.6)) !important;
}
.service-features-about .doc-2:hover {
    background: rgba(11, 22, 34, 0.98) !important; 
    border-color: #e67e22 !important;
    transform: translateY(-6px) !important; 
    box-shadow: 0 15px 35px rgba(230, 126, 34, 0.4) !important; 
    cursor: pointer;
}
.service-features-about .doc-2:hover .card-icon-box {
    color: #ffffff !important;
    filter: drop-shadow(0 0 12px #e67e22) !important;
    transform: scale(1.15) rotate(5deg) !important; 
}

/* --- 🌟 CUADRO 3: COVENIN 621-3 (Haz Láser Verde Tráfico VVVF) --- */
.service-features-about .doc-3 {
    border-left: 5px solid #2ecc71 !important;
}
.service-features-about .doc-3 .card-icon-box {
    color: #2ecc71 !important;
    filter: drop-shadow(0 0 8px rgba(46, 204, 113, 0.6)) !important;
}
.service-features-about .doc-3:hover {
    background: rgba(11, 22, 34, 0.98) !important; 
    border-color: #2ecc71 !important;
    transform: translateY(-6px) !important; 
    box-shadow: 0 15px 35px rgba(46, 204, 113, 0.4) !important; 
    cursor: pointer;
}
.service-features-about .doc-3:hover .card-icon-box {
    color: #ffffff !important;
    filter: drop-shadow(0 0 12px #2ecc71) !important;
    transform: scale(1.15) rotate(5deg) !important; 
}

/* --- 🌟 CUADRO 4: COVENIN 621-4 (Haz Láser Rojo Alerta Crítica) --- */
.service-features-about .doc-4 {
    border-left: 5px solid #e74c3c !important;
}
.service-features-about .doc-4 .card-icon-box {
    color: #e74c3c !important;
    filter: drop-shadow(0 0 8px rgba(231, 76, 60, 0.6)) !important;
}
.service-features-about .doc-4:hover {
    background: rgba(11, 22, 34, 0.98) !important; 
    border-color: #e74c3c !important;
    transform: translateY(-6px) !important; 
    box-shadow: 0 15px 35px rgba(231, 76, 60, 0.4) !important; 
    cursor: pointer;
}
.service-features-about .doc-4:hover .card-icon-box {
    color: #ffffff !important;
    filter: drop-shadow(0 0 12px #e74c3c) !important;
    transform: scale(1.15) rotate(5deg) !important; 
}

/* --- 🌟 CUADRO 5: COVENIN 621-5 (Haz Láser Azul STE Corporativo Seguro) --- */
.service-features-about .doc-5 {
    border-left: 5px solid #00bcd4 !important;
}
.service-features-about .doc-5 .card-icon-box {
    color: #00bcd4 !important;
    filter: drop-shadow(0 0 8px rgba(0, 188, 212, 0.6)) !important;
}
.service-features-about .doc-5:hover {
    background: rgba(11, 22, 34, 0.98) !important; 
    border-color: #00bcd4 !important;
    transform: translateY(-6px) !important; 
    box-shadow: 0 15px 35px rgba(0, 188, 212, 0.4) !important; 
    cursor: pointer;
}
.service-features-about .doc-5:hover .card-icon-box {
    color: #ffffff !important;
    filter: drop-shadow(0 0 12px #00bcd4) !important;
    transform: scale(1.15) rotate(5deg) !important; 
}
.service-features-about .doc-5 .btn-ste-small { background: #00bcd4 !important; }

/* --- 🌟 CUADRO 6: COVENIN 623 (Haz Láser Platino Industrial Pesado) --- */
.service-features-about .doc-6 {
    border-left: 5px solid #94a3b8 !important;
}
.service-features-about .doc-6 .card-icon-box {
    color: #94a3b8 !important;
    filter: drop-shadow(0 0 8px rgba(148, 163, 184, 0.6)) !important;
}
.service-features-about .doc-6:hover {
    background: rgba(11, 22, 34, 0.98) !important; 
    border-color: #94a3b8 !important;
    transform: translateY(-6px) !important; 
    box-shadow: 0 15px 35px rgba(148, 163, 184, 0.4) !important; 
    cursor: pointer;
}
.service-features-about .doc-6:hover .card-icon-box {
    color: #ffffff !important;
    filter: drop-shadow(0 0 12px #94a3b8) !important;
    transform: scale(1.15) rotate(5deg) !important; 
}
.service-features-about .doc-6 .btn-ste-small { background: #94a3b8 !important; }

/* --- 🌟 CUADRO 7: COVENIN 2265 (Haz Láser Esmeralda de Inspección Técnica) --- */
.service-features-about .doc-7 {
    border-left: 5px solid #2ecc71 !important;
}
.service-features-about .doc-7 .card-icon-box {
    color: #2ecc71 !important;
    filter: drop-shadow(0 0 8px rgba(46, 204, 113, 0.6)) !important;
}
.service-features-about .doc-7:hover {
    background: rgba(11, 22, 34, 0.98) !important; 
    border-color: #2ecc71 !important;
    transform: translateY(-6px) !important; 
    box-shadow: 0 15px 35px rgba(46, 204, 113, 0.4) !important; 
    cursor: pointer;
}
.service-features-about .doc-7:hover .card-icon-box {
    color: #ffffff !important;
    filter: drop-shadow(0 0 12px #2ecc71) !important;
    transform: scale(1.15) rotate(5deg) !important; 
}
.service-features-about .doc-7 .btn-ste-small { background: #2ecc71 !important; }

/* --- 🌟 CUADRO 8: COVENIN 1720 (Haz Láser Acero Plomo de Guayas) --- */
.service-features-about .doc-8 {
    border-left: 5px solid #64748b !important;
}
.service-features-about .doc-8 .card-icon-box {
    color: #64748b !important;
    filter: drop-shadow(0 0 8px rgba(100, 116, 139, 0.6)) !important;
}
.service-features-about .doc-8:hover {
    background: rgba(11, 22, 34, 0.98) !important; 
    border-color: #64748b !important;
    transform: translateY(-6px) !important; 
    box-shadow: 0 15px 35px rgba(100, 116, 139, 0.4) !important; 
    cursor: pointer;
}
.service-features-about .doc-8:hover .card-icon-box {
    color: #ffffff !important;
    filter: drop-shadow(0 0 12px #64748b) !important;
    transform: scale(1.15) rotate(5deg) !important; 
}
.service-features-about .doc-8 .btn-ste-small { background: #64748b !important; }

/* --- 🌟 CUADRO 9: COVENIN 1018 (Haz Láser Nube Cian de Flujos de Presurización) --- */
.service-features-about .doc-9 {
    border-left: 5px solid #a5f3fc !important;
}
.service-features-about .doc-9 .card-icon-box {
    color: #a5f3fc !important;
    filter: drop-shadow(0 0 8px rgba(165, 243, 252, 0.6)) !important;
}
.service-features-about .doc-9:hover {
    background: rgba(11, 22, 34, 0.98) !important; 
    border-color: #a5f3fc !important;
    transform: translateY(-6px) !important; 
    box-shadow: 0 15px 35px rgba(165, 243, 252, 0.4) !important; 
    cursor: pointer;
}
.service-features-about .doc-9:hover .card-icon-box {
    color: #111111 !important;
    filter: drop-shadow(0 0 12px #a5f3fc) !important;
    transform: scale(1.15) rotate(5deg) !important; 
}
.service-features-about .doc-9 .btn-ste-small { background: #a5f3fc !important; color: #111111 !important; }

/* --- 🌟 CUADRO 10: COVENIN 3230 (Haz Láser Amatista de Tránsito de Escaleras) --- */
.service-features-about .doc-10 {
    border-left: 5px solid #a855f7 !important;
}
.service-features-about .doc-10 .card-icon-box {
    color: #a855f7 !important;
    filter: drop-shadow(0 0 8px rgba(168, 85, 247, 0.6)) !important;
}
.service-features-about .doc-10:hover {
    background: rgba(11, 22, 34, 0.98) !important; 
    border-color: #a855f7 !important;
    transform: translateY(-6px) !important; 
    box-shadow: 0 15px 35px rgba(168, 85, 247, 0.4) !important; 
    cursor: pointer;
}
.service-features-about .doc-10:hover .card-icon-box {
    color: #ffffff !important;
    filter: drop-shadow(0 0 12px #a855f7) !important;
    transform: scale(1.15) rotate(5deg) !important; 
}
.service-features-about .doc-10 .btn-ste-small { background: #a855f7 !important; }

/* --- 🌟 CUADRO 11: COVENIN 3229 (Haz Láser Púrpura de Conservación Mecánica) --- */
.service-features-about .doc-11 {
    border-left: 5px solid #c084fc !important;
}
.service-features-about .doc-11 .card-icon-box {
    color: #c084fc !important;
    filter: drop-shadow(0 0 8px rgba(192, 132, 252, 0.6)) !important;
}
.service-features-about .doc-11:hover {
    background: rgba(11, 22, 34, 0.98) !important; 
    border-color: #c084fc !important;
    transform: translateY(-6px) !important; 
    box-shadow: 0 15px 35px rgba(192, 132, 252, 0.4) !important; 
    cursor: pointer;
}
.service-features-about .doc-11:hover .card-icon-box {
    color: #ffffff !important;
    filter: drop-shadow(0 0 12px #c084fc) !important;
    transform: scale(1.15) rotate(5deg) !important; 
}
.service-features-about .doc-11 .btn-ste-small { background: #c084fc !important; }

/* --- 🌟 CUADRO 12: COVENIN 3333 (Haz Láser Carmesí de Prohibición Crítica) --- */
.service-features-about .doc-12 {
    border-left: 5px solid #dc2626 !important;
}
.service-features-about .doc-12 .card-icon-box {
    color: #dc2626 !important;
    filter: drop-shadow(0 0 8px rgba(220, 38, 38, 0.6)) !important;
}
.service-features-about .doc-12:hover {
    background: rgba(11, 22, 34, 0.98) !important; 
    border-color: #dc2626 !important;
    transform: translateY(-6px) !important; 
    box-shadow: 0 15px 35px rgba(220, 38, 38, 0.4) !important; 
    cursor: pointer;
}
.service-features-about .doc-12:hover .card-icon-box {
    color: #ffffff !important;
    filter: drop-shadow(0 0 12px #dc2626) !important;
    transform: scale(1.15) rotate(5deg) !important; 
}
.service-features-about .doc-12 .btn-ste-small { background: #dc2626 !important; }

/* --- 🌟 CUADRO 13: COVENIN 3656 (Haz Láser Turquesa Azul STE de Accesibilidad) --- */
.service-features-about .doc-13 {
    border-left: 5px solid #06b6d4 !important;
}
.service-features-about .doc-13 .card-icon-box {
    color: #06b6d4 !important;
    filter: drop-shadow(0 0 8px rgba(6, 182, 212, 0.6)) !important;
}
.service-features-about .doc-13:hover {
    background: rgba(11, 22, 34, 0.98) !important; 
    border-color: #06b6d4 !important;
    transform: translateY(-6px) !important; 
    box-shadow: 0 15px 35px rgba(6, 182, 212, 0.4) !important; 
    cursor: pointer;
}
.service-features-about .doc-13:hover .card-icon-box {
    color: #ffffff !important;
    filter: drop-shadow(0 0 12px #06b6d4) !important;
    transform: scale(1.15) rotate(5deg) !important; 
}
.service-features-about .doc-13 .btn-ste-small { background: #06b6d4 !important; }

/* ==========================================================================
   ⚙️ REGLAS EXCLUSIVAS PARA TARJETAS INTERNACIONALES (ORO DE CERTIFICACIÓN)
   ========================================================================== */
/* Inyección de contorno Oro/Cromo pasivo para separar las normas globales */
.service-features-about .inter-card {
    border-left: 5px solid #d4af37 !important;
    background: linear-gradient(145deg, rgba(11, 22, 34, 0.96) 0%, rgba(212, 175, 55, 0.02) 100%) !important;
}

.service-features-about .inter-card .card-icon-box {
    color: #d4af37 !important;
    filter: drop-shadow(0 0 8px rgba(212, 175, 55, 0.5)) !important;
}

/* Efecto de cotización de botón de descarga unificado en oro */
.service-features-about .inter-card .btn-ste-small {
    background: linear-gradient(135deg, #d4af37 0%, #aa8214 100%) !important;
    color: #111111 !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 10px rgba(212, 175, 55, 0.2) !important;
}

/* ✨ INTERACCIÓN INTERNACIONAL HÁPTICA AL PASAR EL CURSOR (HOVER) */
.service-features-about .inter-card:hover {
    background: rgba(11, 22, 34, 0.99) !important;
    border-color: #d4af37 !important; /* El orillo brilla en oro pleno */
    transform: translateY(-6px) !important;
    /* Halo lumínico dorado expansivo de alta jerarquía corporativa */
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.3) !important;
}

.service-features-about .inter-card:hover .card-icon-box {
    color: #ffffff !important;
    filter: drop-shadow(0 0 12px #d4af37) !important;
    transform: scale(1.15) rotate(5deg) !important;
}

.service-features-about .inter-card .btn-ste-small:hover {
    background: #ffffff !important;
    color: #111111 !important;
    box-shadow: 0 6px 15px rgba(212, 175, 55, 0.4) !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 a una columna unificada */
    .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;
    }

    /* 🛠️ SINCRO TOTAL: Adaptado a la clase independiente .norma-card de la biblioteca técnica */
    .service-features-about .norma-card {
        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
       ---------------------------------------------------------------------- */
    /* 🦾 REJILLA DE TARJETAS DE NORMAS 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;
    }

    /* 🦾 TRANSFORMACIÓN DEL CHASIS EN SMARTPHONES */
    .service-features-about .norma-card {
        flex-direction: column !important; /* Alinea los elementos de arriba a abajo */
        align-items: center !important;    /* Centra axialmente el icono con los textos */
        padding: 20px 15px !important;
        border-left: none !important;      /* Cancela la línea de PC... */
        border-top: 4px solid rgba(255, 255, 255, 0.15) !important; /* ...y la mueve arriba para look continuo */
        border-radius: 0px 0px 14px 14px !important; /* Suavizado inferior */
        gap: 12px !important;
    }

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

    .service-features-about .norma-card .card-content-text {
        padding-right: 0 !important;
        text-align: center !important; /* Centrado de lectura ergonómica en celulares */
        align-items: center !important;
        width: 100% !important;
    }

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

    .service-features-about .norma-card .card-content-text span {
        font-size: 13.5px !important;
        text-align: center !important;
        line-height: 1.50 !important;
        width: 100% !important;
    }

    /* 🔘 EXPANSIÓN DEL BOTÓN DE DESCARGA EN CELULARES */
    .service-features-about .norma-card .service-btn-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }

    .service-features-about .norma-card .service-btn-wrapper .btn-ste-small {
        width: 100% !important; /* El botón ocupa todo el ancho de la tarjeta para facilitar el clic */
        text-align: center !important;
        padding: 14px 20px !important; /* Colchón grueso para el pulgar */
        font-size: 14px !important;
        border-radius: 10px !important;
    }

    /* ==========================================================================
       🎨 ADAPTACIÓN DE COLORES INDIVIDUALES PARA SMARTPHONES
       ========================================================================== */
    /* Pasa el haz de luz arriba y tiñe el orillo superior en cada tarjeta */
    .service-features-about .doc-1 { border-top-color: #00bcd4 !important; }
    .service-features-about .doc-2 { border-top-color: #e67e22 !important; }
    .service-features-about .doc-3 { border-top-color: #2ecc71 !important; }
    .service-features-about .doc-4 { border-top-color: #e74c3c !important; }
    .service-features-about .doc-5 { border-top-color: #00bcd4 !important; }
    .service-features-about .doc-6 { border-top-color: #94a3b8 !important; }
    .service-features-about .doc-7 { border-top-color: #2ecc71 !important; }
    .service-features-about .doc-8 { border-top-color: #64748b !important; }
    .service-features-about .doc-9 { border-top-color: #a5f3fc !important; }
    .service-features-about .doc-10 { border-top-color: #a855f7 !important; }
    .service-features-about .doc-11 { border-top-color: #c084fc !important; }
    .service-features-about .doc-12 { border-top-color: #e74c3c !important; }
    .service-features-about .doc-13 { border-top-color: #06b6d4 !important; }
    
    /* Chasis Oro Internacional unificado arriba en teléfonos */
    .service-features-about .inter-card {
        border-top: 4px solid #d4af37 !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) >>> */