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

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

/* ==========================================================================
   2. FRANJA 2 NEGRA: NAVEGACIÓN CORPORATIVA SINCRONIZADA (PC ESCRITORIO)
   ========================================================================== */
.main-nav {
    background-color: var(--negro-nav, #111111);
    position: sticky;
    top: 0;
    z-index: 1000;
    /* Filamento láser en verde esmeralda mecánico unificado de la división de portones */
    border-bottom: 2px solid rgba(46, 204, 113, 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 mecánico 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 Verde Esmeralda al 15% */
    border: 1px solid rgba(46, 204, 113, 0.15) !important; 
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

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

.main-nav .nav-links-pc li a:hover i {
    color: #2ecc71 !important; 
    /* Brillo de panel digital mecánico intensificado al pasar el mouse */
    text-shadow: 0 0 12px rgba(46, 204, 113, 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: #2ecc71 !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: #2ecc71 !important;
    text-shadow: none !important; 
}

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

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

/* ==========================================================================
   3. FRANJA 3 INTERNA: HERO ACABADO GRIS GRAFITO METALIZADO Y MECÁNICA VIVA (PC)
   ========================================================================== */
.main-wrapper .hero-blue {
    /* Efecto metalizado trilineal basado en el tono Verde Esmeralda Mecánico 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 de Verde Esmeralda a un profundo Gris Carbón Forjado */
        linear-gradient(135deg, #27ae60 0%, #2ecc71 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 verde pino denso para cerrar el chasis mecánico */
    border-bottom: 5px solid #1e5f36 !important; 
    box-shadow: inset 0 -10px 25px rgba(0, 0, 0, 0.45) !important;
}

/* --- 3.1 MARCA DE AGUA: DIENTES DE CREMALLERA Y ACOPLE DE ENGRANAJES --- */
.main-wrapper .hero-blue::after {
    content: "" !important;
    position: absolute !important;
    bottom: 0 !important;
    right: 40px !important; /* Posicionado fijamente a la derecha de la caja del hero */
    width: 200px !important; /* Ancho fijo unificado para evitar estiramientos elásticos */
    height: 100% !important;
    /* Geometría de líneas paralelas que simula de forma exacta el dentado milimétrico de una cremallera de tracción */
    background-image: 
        /* Dientes verticales continuos del riel de arrastre */
        linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0px, rgba(255, 255, 255, 0.08) 3px, transparent 4px),
        /* Línea base de soporte del riel de acero */
        linear-gradient(0deg, rgba(255, 255, 255, 0.10) 4px, transparent 5px),
        /* Retícula de fondo que representa las lamas enrollables de una Santa María */
        linear-gradient(0deg, transparent 45%, rgba(255, 255, 255, 0.03) 46%, rgba(255, 255, 255, 0.03) 54%, transparent 55%) !important;
    /* Tamaños controlados fijos para neutralizar distorsiones en pantallas ultrapanorámicas */
    background-size: 12px 100%, 100% 12px, 100% 14px !important;
    background-position: left center, bottom 20px center, center !important;
    background-repeat: repeat-x, no-repeat, repeat-y !important;
    pointer-events: none !important;
    z-index: 1 !important;
    opacity: 0.80 !important;
}

/* --- 3.2 DETALLE EXTRA: PIÑÓN DE ARRASTRE Y BRAZO DE PIVOTE AUTOMÁTICO --- */
.main-wrapper .hero-blue::before {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    right: 260px !important; /* Colocado al lado izquierdo de la cremallera sin colisionar */
    width: 44px !important;
    height: 44px !important;
    /* 3 círculos y líneas concéntricas que dibujan de manera exacta un piñón de motor corredizo */
    background-image: 
        /* Núcleo o eje central del rotor */
        radial-gradient(circle, rgba(255, 255, 255, 0.15) 20%, transparent 22%),
        /* Anillo perimetral del cuerpo del engranaje */
        radial-gradient(circle, transparent 55%, rgba(255, 255, 255, 0.12) 56%, rgba(255, 255, 255, 0.12) 68%, transparent 69%),
        /* Muescas o chaveteros mecánicos cruzados */
        linear-gradient(90deg, transparent 46%, rgba(255, 255, 255, 0.10) 47%, rgba(255, 255, 255, 0.10) 53%, transparent 54%) !important;
    background-size: 100% 100%, 100% 100%, 100% 100% !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

/* --- 3.3 TEXTOS INTERNOS DEL HERO --- */
.main-wrapper .hero-blue h1 {
    font-family: 'Poppins', sans-serif !important;
    font-size: 3.2rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.6) !important;
    position: relative !important;
    z-index: 2 !important;
    letter-spacing: 1.5px !important;
    color: #ffffff !important;
}

.main-wrapper .hero-blue .hero-subtitle {
    font-family: 'Poppins', sans-serif !important;
    font-size: 1.2rem !important;
    font-weight: 400 !important;
    max-width: 850px !important;
    margin: 0 auto !important;
    position: relative !important;
    z-index: 2 !important;
    line-height: 1.6 !important;
    color: #edfbf2 !important; /* Tono blanco esmeralda ultra-suave para legibilidad premium */
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5) !important;
}

/* ==========================================================================
   4. DISTRIBUCIÓN DE FILAS, IMÁGENES GEMELAS Y EFECTO ZIGZAG (PC GENERAL - PORTONES)
   ========================================================================== */
/* Dirección global de rejilla y proporciones asimétricas para las filas en PC */
.services-list .service-row {
    display: grid !important;
    grid-template-columns: 1.10fr 0.90fr; /* Proporción calibrada de expansión de texto */
    gap: 40px;
    margin-bottom: 60px;
    align-items: center;
}

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

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

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

/* --- 4.2 CAJA DE VIÑETAS TÉCNICAS CON CHECKS (EMPAQUETADO MODULAR COINCIDENTE) --- */
/* 🛠️ AJUSTE DE COINCIDENCIA MÁXIMA: Selector unificado para capturar la viñeta suelta en la raíz 
   de tu HTML de Portones, haciendo juego idéntico con la distribución limpia */
.services-list .service-row .service-features {
    max-width: 750px !important; /* Evita que la caja de ítems se abra elásticamente en PC */
    width: 100% !important;
    padding: 10px 5px !important; 
    margin: 15px 0 !important;
    box-sizing: border-box !important;
    
    /* Suelta el estiramiento forzado de rejilla y alinea a la izquierda de su celda */
    justify-self: start !important;
    align-self: flex-start !important;
}

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


/* ==========================================================================
   4.3 MÓDULO: CONTROL DE EQUILIBRIO EN ZIGZAG (ELIMINADO EL ESTIRAMIENTO MASIVO)
   ========================================================================== */
/* 1. FILAS NORMALES (Texto a la izquierda, Fotos a la derecha) - Aplica a Bloques 1, 3 y 4 en tu HTML de Portones */
.services-list .service-row:not(.reverse) .tech-intro-box,
.services-list .service-row:not(.reverse) .service-features {
    margin-left: 0px !important; /* Regresa al borde natural alineado con la cabecera */
    margin-right: 15px !important;  
}

/* 2. FILAS INVERTIDAS REVERSE (Fotos a la izquierda, Texto a la derecha) - Aplica a Bloque 2 (Motores) */
.services-list .service-row.reverse .tech-intro-box,
.services-list .service-row.reverse .service-features {
    margin-right: 0px !important; /* Regresa al contorno limpio sin desbordar el extremo derecho */
    margin-left: 15px !important;   
}

/* ==========================================================================
   4.4 MÓDULO: EXPANSIÓN ANCHURA EXTERIOR DE IMÁGENES (PRESERVADO INTACTO)
   ========================================================================== */
/* 1. FILAS NORMALES (Texto a la izquierda, Fotos a la derecha) - Aplica a Bloques 1, 3 y 4 */
.services-list .service-row:not(.reverse) .service-images {
    width: 112% !important;          
    margin-right: 0px !important;    
    margin-left: -40px !important;   
    display: flex !important;
    gap: 15px !important;
    align-items: center !important;
    position: relative !important;
}

/* 2. FILAS INVERTIDAS REVERSE (Fotos a la izquierda, Texto a la derecha) - Aplica a Bloque 2 */
.services-list .service-row.reverse .service-images {
    width: 112% !important;          
    margin-left: -25px !important;   
    margin-right: 15px !important;   
    display: flex !important;
    gap: 15px !important;
    align-items: center !important;
    position: relative !important;
}

/* --- 4.5 PROPIEDADES INTERNAS DE IMÁGENES GEMELAS EN PC --- */
.services-list .service-row .service-images img {
    width: calc(50% - 8px) !important; 
    height: 300px !important;          
    object-fit: cover !important; 
    border-radius: 10px !important;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15) !important;
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s ease !important;
    will-change: transform;
}

/* --- 4.6 INTERACCIONES DE ACERCAMIENTO ÓPTICO Y BRILLO TÉCNICO --- */
.services-list .service-row .service-images img:hover {
    transform: scale(1.05) !important;
    /* ⚙️ SINCRO: Destello perimetral sintonizado al Verde Esmeralda Mecánico de Automatización */
    box-shadow: 0 15px 30px rgba(46, 204, 113, 0.25) !important; 
    z-index: 5 !important;
}

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

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

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

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

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

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

/* ==========================================================================
   5. SEPARADOR TEMÁTICO: ENGRANAJE MECÁNICO Y AUTOMATISMOS (PC GENERAL)
   ========================================================================== */
/* 🛠️ SINCRO TOTAL: Vinculado quirúrgicamente al chasis divisor .gate-dual-divider de tu HTML de portones */
.gate-dual-divider {
    grid-column: span 2 !important; /* Se extiende a lo ancho de las dos columnas de la retícula */
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    margin: 45px auto !important;  
    height: 52px !important;       /* Altura unificada con el chasis industrial de la web */
}

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

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

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

/* Componentes vectoriales de piñones en estado pasivo apagado (Negro Carbón) */
.gate-dual-divider .gears-mesh-container i {
    position: absolute !important;
    color: #111111 !important; 
    transition: color 0.2s ease, filter 0.2s ease, transform 0.3s ease !important;
    will-change: transform, filter;
}

/* Piñón Mecánico Principal (Centro geométrico unificado) */
.gate-dual-divider .gears-mesh-container .gear-main {
    font-size: 18px !important;
    top: auto !important;
    left: auto !important;
}

/* Piñón Secundario Acoplado (Tracción perimetral) */
.gate-dual-divider .gears-mesh-container .gear-sub {
    font-size: 30px !important; 
    top: auto !important;
    left: auto !important;
    opacity: 0.3; /* Atenuado en reposo */
}

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

/* Encendido e iluminación completa de los componentes en tu Verde Esmeralda Mecánico */
.gate-dual-divider:hover .gears-mesh-container i {
    color: #2ecc71 !important; 
    filter: drop-shadow(0 0 8px rgba(46, 204, 113, 0.95)) !important;
    opacity: 1 !important;
}

/* El piñón mecánico principal ejecuta una rotación cinemática continua por hardware hacia la derecha */
.gate-dual-divider:hover .gear-main {
    animation: rotateGearMain 2.5s linear infinite !important;
}

/* El piñón secundario ejecuta la rotación de acople en fase inversa hacia la izquierda */
.gate-dual-divider:hover .gear-sub {
    animation: rotateGearSub 2.5s linear infinite !important;
}

/* --- KEYFRAMES DE ROTACIÓN CINEMÁTICA MECÁNICA POR HARDWARE --- */
/* Piñón principal: Giro completo en sentido de las agujas del reloj */
@keyframes rotateGearMain {
    0% { transform: rotate(0deg) scale(1); }
    100% { transform: rotate(360deg) scale(1); }
}

/* Piñón secundario: Giro de engranaje inverso contrarreloj con micropulsación lineal */
@keyframes rotateGearSub {
    0% { transform: rotate(0deg) scale(0.95); }
    100% { transform: rotate(-360deg) scale(1.02); }
}

/* ==========================================================================
   6. CLASIFICACIÓN NOMINAL DE PLACAS DE INGENIERÍA METALMECÁNICA (PC)
   ========================================================================== */

/* --- 6.1 BLOQUE 1: FABRICACIÓN Y REPARACIÓN DE PORTONES (FILA NORMAL) ---------------------------------------------------- */
/* ⚙️ SINCRO TOTAL PC: Redireccionado de forma quirúrgica al contenedor .bloque-reparaciones de portones */
.services-list .bloque-reparaciones {
    background-color: #020618 !important; /* Base azul noche profundo unificada de la firma */
    background-image: linear-gradient(135deg, 
        rgba(153, 161, 175, 1) 0%,   
        rgba(125, 133, 145, 0.50) 100%  
    ), url('img/portones_venezuela.webp') !important; /* Tu marca de agua fotográfica real */
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
    background-blend-mode: luminosity !important;
    border: 0px solid rgba(0, 0, 0, 0.50) !important; 
    border-radius: 30px !important; 
    padding: 35px 35px !important; 
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35) !important; 
}

/* ⚙️ SOLUCIÓN PRINCIPAL: Obliga a la columna de texto a respetar su carril izquierdo y no pisar las fotos */
.services-list .bloque-reparaciones .service-text {
    max-width: 600px !important; /* Limita la envoltura completa del texto */
    width: 100% !important;
    justify-self: start !important;
    align-self: flex-start !important;
}

/* ⚙️ EMPAQUETADO COMPACTO DEL PÁRRAFO INTRODUCTORIO */
.services-list .bloque-reparaciones .tech-intro-box {
    max-width: 550px !important; /* Recorta el párrafo para que termine antes de las imágenes */
    width: 100% !important;
    margin-top: 15px !important;
    margin-bottom: 2px !important;
    margin-right: 0px !important;
    padding-right: 20px !important;
    padding-left: 25px !important;
}

.services-list .bloque-reparaciones .tech-intro-box p {
    text-align: left !important; 
    color: #e2e8f0 !important; /* Platino de alto contraste */
}

/* ⚙️ SOLUCIÓN PARA LAS VIÑETAS: Panel de Cristal Líquido Oscuro sobre la lista */
/* 🛠️ AJUSTE DE ACOPLE MAESTRO: Selector calibrado para capturar la viñeta suelta en la raíz 
   de la cuadrícula, forzándola mediante grid-column: 1 a sostener el carril izquierdo en PC */
.services-list .bloque-reparaciones .service-features {
    grid-column: 1 !important; /* Fuerza a las pastillas a quedarse en la columna 1 (Izquierda) */
    max-width: 550px !important; /* Evita que las pastillas toquen el bloque de fotos */
    width: 100% !important;
    margin-bottom: 30px !important;
    margin-top: -20px !important;
    margin-left: 0px !important;
    justify-self: start !important;
    align-self: flex-start !important;
    
    background: rgba(11, 22, 34, 0.82) !important; /* Panel cyber-oscuro traslúcido de la firma */
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(46, 204, 113, 0.25) !important; /* Sintonizado al Verde Esmeralda de la división */
    border-left: 5px solid #2ecc71 !important; /* Haz de acento mecánico izquierdo */
    border-radius: 16px !important; 
    padding: 25px !important;
}

/* ⚙️ FILAMENTO VERTICAL Y DIODO LED DE ENTRADA (Sincronizado con Portones) */
.services-list .bloque-reparaciones .service-header-flex .service-icon i {
    color: #2ecc71 !important; /* Verde Esmeralda Mecánico */
    filter: drop-shadow(0 0 10px rgba(46, 204, 113, 0.6)) !important; 
}

.services-list .bloque-reparaciones .service-header-flex .vertical-divider {
    background-color: #2ecc71 !important; 
    box-shadow: 0 0 8px rgba(46, 204, 113, 0.5) !important;
}

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

/* Ajustes de los Checks dentro de las pastillas */
.services-list .bloque-reparaciones .service-features li i {
    color: #2ecc71 !important;
    filter: drop-shadow(0 0 4px rgba(46, 204, 113, 0.7)) !important;
}

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

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

.services-list .bloque-reparaciones .service-btn-wrapper .btn-ste-small {
    display: inline-block !important; 
    font-family: inherit !important;
    font-size: 15px !important; 
    font-weight: 600 !important;
    color: #ffffff !important; 
    background-color: #00bcd4 !important; /* Coherencia de marca global institucional */
    border: 1px solid transparent !important;
    border-radius: 12px !important; 
    padding: 12px 25px !important; 
    text-decoration: none !important;
    box-shadow: 0 5px 15px rgba(0, 188, 212, 0.3) !important;
    transition: all 0.3s ease !important;
}

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

/* 🛠️ ENLACE CIRCUITAL ADICIONAL DEL BLOQUE 1 EN PC */
.services-list .bloque-reparaciones .gate-dual-divider {
    grid-column: span 2 !important;
    width: 100% !important;
    margin-top: -20px !important;
    margin-bottom: -20px !important;
}

/* --- 6.2 BLOQUE 2: AUTOMATIZACIÓN E INSTALACIÓN DE MOTORES (ZIGZAG INVERTIDO) ------------------------------------------ */
/* ⚙️ SINCRO TOTAL PC REVERSE: Redireccionado de forma quirúrgica al contenedor .bloque-motores de portones */
.services-list .bloque-motores {
    background-color: #020617 !important; /* Base azul espacial oscuro unificada */
    
    /* ⚙️ MARCA DE AGUA INDEPENDIENTE: Fondo de motores de portón eléctrico y automatismos en Caracas */
    background-image: linear-gradient(135deg, 
        rgba(153, 161, 175, 1) 0%,   
        rgba(125, 133, 145, 0.50) 100%  
    ), url('img/motores.webp') !important; 
    
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
    background-blend-mode: luminosity !important;
    
    border: 0px solid rgba(0, 0, 0, 0.50) !important; 
    border-radius: 30px !important; 
    padding: 35px 35px !important; 
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35) !important; 
}

/* ⚙️ REVERSE DE PC: Obliga a la columna de texto a respetar su carril DERECHO en el zigzag */
.services-list .bloque-motores .service-text {
    max-width: 600px !important; 
    width: 100% !important;
    
    /* ⚙️ CLAVE REVERSE: En las filas invertidas, el texto se alinea hacia la derecha de la pantalla */
    justify-self: end !important; 
    align-self: flex-start !important;
}

/* EMPAQUETADO COMPACTO DEL PÁRRAFO INTRODUCTORIO (Clonando tus valores exactos) */
.services-list .bloque-motores .tech-intro-box {
    max-width: 550px !important; 
    width: 100% !important;
    margin-top: 15px !important;
    margin-bottom: 2px !important;
    margin-right: 0px !important;
    padding-right: 20px !important;
    padding-left: 25px !important;
}

.services-list .bloque-motores .tech-intro-box p {
    text-align: left !important; 
    color: #e2e8f0 !important; 
}

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

/* FILAMENTO VERTICAL Y DIODO LED DE ENTRADA (Sincronizado) */
.services-list .bloque-motores .service-header-flex .service-icon i {
    color: #2ecc71 !important; /* Verde Esmeralda Mecánico */
    filter: drop-shadow(0 0 10px rgba(46, 204, 113, 0.6)) !important; 
}

.services-list .bloque-motores .service-header-flex .vertical-divider {
    background-color: #2ecc71 !important; 
    box-shadow: 0 0 8px rgba(46, 204, 113, 0.5) !important;
}

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

/* Ajustes de las Viñetas Blancas */
.services-list .bloque-motores .service-features li i {
    color: #2ecc71 !important;
    filter: drop-shadow(0 0 4px rgba(46, 204, 113, 0.7)) !important;
}

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

/* ⚙️ CAJA CONTENEDORA Y BOTÓN DE COTIZACIÓN EN POSICIÓN REVERSE */
.services-list .bloque-motores .service-btn-wrapper {
    grid-column: 2 !important; /* Fuerza al botón a alinearse en la columna derecha de PC */
    display: flex !important;
    justify-content: flex-end !important; /* Clava el botón al filo derecho alineado con el cristal */
    margin-top: -15px !important; 
    width: 100% !important;
    max-width: 550px !important; /* Modulador de ancho para no pisar el abanico */
    justify-self: end !important;
}

.services-list .bloque-motores .service-btn-wrapper .btn-ste-small {
    display: inline-block !important; 
    font-family: inherit !important;
    font-size: 15px !important; 
    font-weight: 600 !important;
    color: #ffffff !important; 
    background-color: #00bcd4 !important; /* Coherencia de marca global index */
    border: 1px solid transparent !important;
    border-radius: 12px !important; 
    padding: 12px 25px !important; 
    text-decoration: none !important;
    box-shadow: 0 5px 15px rgba(0, 188, 212, 0.3) !important;
    transition: all 0.3s ease !important;
}

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

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

/* --- 6.3 BLOQUE 3: INSTALACIÓN Y MANTENIMIENTO DE CERCO ELÉCTRICO (FILA NORMAL) --------------------------------------- */
/* ⚡ SINCRO TOTAL PC NORMAL: Redireccionado de forma quirúrgica al contenedor .bloque-cercos de tu HTML de portones */
.services-list .bloque-cercos {
    background-color: #020618 !important; /* Base azul espacial oscuro unificada */
    
    /* ⚡ MARCA DE AGUA INDEPENDIENTE: Fondo de protección perimetral y cercos de alto voltaje en Venezuela */
    background-image: linear-gradient(135deg, 
        rgba(153, 161, 175, 1) 0%,   
        rgba(125, 133, 145, 0.50) 100%  
    ), url('img/cerco_electrico.webp') !important; 
    
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
    background-blend-mode: luminosity !important;
    
    border: 0px solid rgba(0, 0, 0, 0.50) !important; 
    border-radius: 30px !important; 
    padding: 35px 35px !important; /* Tu colchón ergonómico premium exacto */
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35) !important; 
}

/* ⚡ SOLUCIÓN PRINCIPAL: Obliga a la columna de texto a respetar su carril izquierdo y no pisar las fotos */
.services-list .bloque-cercos .service-text {
    max-width: 600px !important; /* Limita la envoltura completa del texto */
    width: 100% !important;
    justify-self: start !important;
    align-self: flex-start !important;
}

/* EMPAQUETADO COMPACTO DEL PÁRRAFO INTRODUCTORIO (Clonando tus valores de éxito) */
.services-list .bloque-cercos .tech-intro-box {
    max-width: 550px !important; /* Recorta el párrafo para que termine antes de las imágenes */
    width: 100% !important;
    margin-top: 15px !important;
    margin-bottom: 2px !important;
    margin-right: 0px !important;
    padding-right: 20px !important;
    padding-left: 25px !important;
}

.services-list .bloque-cercos .tech-intro-box p {
    text-align: left !important; 
    color: #e2e8f0 !important; 
}

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

/* FILAMENTO VERTICAL Y DIODO LED DE ENTRADA (Sincronizado) */
.services-list .bloque-cercos .service-header-flex .service-icon i {
    color: #2ecc71 !important; /* Verde Esmeralda Mecánico */
    filter: drop-shadow(0 0 10px rgba(46, 204, 113, 0.6)) !important; 
}

.services-list .bloque-cercos .service-header-flex .vertical-divider {
    background-color: #2ecc71 !important; 
    box-shadow: 0 0 8px rgba(46, 204, 113, 0.5) !important;
}

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

/* Ajustes de las Viñetas Blancas */
.services-list .bloque-cercos .service-features li i {
    color: #2ecc71 !important;
    filter: drop-shadow(0 0 4px rgba(46, 204, 113, 0.7)) !important;
}

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

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

.services-list .bloque-cercos .service-btn-wrapper .btn-ste-small {
    display: inline-block !important; 
    font-family: inherit !important;
    font-size: 15px !important; 
    font-weight: 600 !important;
    color: #ffffff !important; 
    background-color: #00bcd4 !important; /* Coherencia de marca global index */
    border: 1px solid transparent !important;
    border-radius: 12px !important; 
    padding: 12px 25px !important; 
    text-decoration: none !important;
    box-shadow: 0 5px 15px rgba(0, 188, 212, 0.3) !important;
    transition: all 0.3s ease !important;
}

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

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


/* --- 6.4 BLOQUE 4: MANTENIMIENTO Y REPARACIÓN DE BARRERA VEHICULAR (ZIGZAG INVERTIDO) ---------------------------------- */
/* ⚙️ SINCRO TOTAL PC REVERSE COMPLEMENTARIO: Redireccionado de forma quirúrgica al contenedor .bloque-barreras de portones */
.services-list .bloque-barreras {
    background-color: #020617 !important; /* Base azul espacial oscuro unificada */
    
    /* ⚙️ MARCA DE AGUA INDEPENDIENTE: Fondo de barreras vehiculares y control de acceso automotor en Caracas */
    background-image: linear-gradient(135deg, 
        rgba(153, 161, 175, 1) 0%,   
        rgba(125, 133, 145, 0.50) 100%  
    ), url('img/barrera_caracas.webp') !important; 
    
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
    background-blend-mode: luminosity !important;
    
    border: 0px solid rgba(0, 0, 0, 0.50) !important; 
    border-radius: 30px !important; 
    padding: 35px 35px !important; 
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35) !important; 
}

/* ⚙️ REVERSE DE PC: Obliga a la columna de texto a respetar su carril DERECHO en el zigzag */
.services-list .bloque-barreras .service-text {
    max-width: 600px !important; 
    width: 100% !important;
    
    /* En las filas invertidas, el texto se alinea firmemente hacia la derecha de la pantalla */
    justify-self: end !important; 
    align-self: flex-start !important;
}

/* EMPAQUETADO COMPACTO DEL PÁRRAFO INTRODUCTORIO (Clonando tus valores exactos de éxito) */
.services-list .bloque-barreras .tech-intro-box {
    max-width: 550px !important; 
    width: 100% !important;
    margin-top: 15px !important;
    margin-bottom: 2px !important;
    margin-right: 0px !important;
    padding-right: 20px !important;
    padding-left: 25px !important;
}

.services-list .bloque-barreras .tech-intro-box p {
    text-align: left !important; 
    color: #e2e8f0 !important; 
}

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

/* 🛠️ SINCRO DE ICONO: FILAMENTO VERTICAL Y DIODO LED DE ENTRADA EN VERDE ESMERALDA MECÁNICO */
.services-list .bloque-barreras .service-header-flex .service-icon i {
    color: #2ecc71 !important; /* Verde esmeralda mecánico */
    filter: drop-shadow(0 0 10px rgba(46, 204, 113, 0.6)) !important; 
}

.services-list .bloque-barreras .service-header-flex .vertical-divider {
    background-color: #2ecc71 !important; 
    box-shadow: 0 0 8px rgba(46, 204, 113, 0.5) !important;
}

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

/* Ajustes de las Viñetas Blancas */
.services-list .bloque-barreras .service-features li i {
    color: #2ecc71 !important;
    filter: drop-shadow(0 0 4px rgba(46, 204, 113, 0.7)) !important;
}

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

/* ⚙️ CAJA CONTENEDORA Y BOTÓN DE COTIZACIÓN EN POSICIÓN REVERSE */
.services-list .bloque-barreras .service-btn-wrapper {
    grid-column: 2 !important; /* Fuerza al botón a alinearse en la columna derecha de PC */
    display: flex !important;
    justify-content: flex-end !important; /* Clava el botón al filo derecho de la tarjeta */
    margin-top: -15px !important; 
    width: 100% !important;
    max-width: 550px !important; 
    justify-self: end !important;
}

.services-list .bloque-barreras .service-btn-wrapper .btn-ste-small {
    display: inline-block !important; 
    font-family: inherit !important;
    font-size: 15px !important; 
    font-weight: 600 !important;
    color: #ffffff !important; 
    background-color: #00bcd4 !important; /* Coherencia de marca global index */
    border: 1px solid transparent !important;
    border-radius: 12px !important; 
    padding: 12px 25px !important; 
    text-decoration: none !important;
    box-shadow: 0 5px 15px rgba(0, 188, 212, 0.3) !important;
    transition: all 0.3s ease !important;
}

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

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


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

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

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

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

/* ==========================================================================
   8. BOTÓN FLOTANTE INDEPENDIENTE "PB" (EN VERDE ESMERALDA DE AUTOMATIZACIÓN)
   ========================================================================== */
/* 🛠️ SINCRO TOTAL PC: Sintonizado a la clase .elevator-btn-back de tu HTML de portones y cercos */
.elevator-btn-back {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 999;
    text-decoration: none;
    display: block;
    border-radius: 50%;
    -webkit-tap-highlight-color: transparent !important;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

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

.elevator-btn-back .button-text {
    color: #cbd5e1; /* Platino de alta visibilidad de tu documento unificado */
    font-family: 'Poppins', 'Arial', sans-serif;
    font-weight: 900;
    font-size: 18px;
    line-height: 1;
    margin-top: 2px;
    transition: color 0.3s ease;
}

.elevator-btn-back .button-light {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #334155; /* LED apagado en reposo */
    margin-top: 4px;
    transition: all 0.3s ease;
}

/* --- INTERACCIONES DEL PULSADOR (HOVER EN COMPUTADORA) --- */
.elevator-btn-back:hover .panel-button {
    border-color: #2ecc71; /* Cambio temático sintonizado al Verde Esmeralda de tu división */
    box-shadow: 0 0 20px rgba(46, 204, 113, 0.6), inset 0 1px 3px rgba(255, 255, 255, 0.2);
    transform: translateY(-3px);
}

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

.elevator-btn-back:hover .button-light {
    background-color: #2ecc71; /* Luz indicadora LED verde esmeralda mecánica activa */
    box-shadow: 0 0 10px #2ecc71, 0 0 20px #2ecc71;
}

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


/* ==========================================================================
   9. PARCHE DE ALINEACIÓN SECCIÓN DE COTIZACIONES (PC Y MÓVIL)
   ========================================================================== */
.quote-section h2 {
    text-align: center !important;   /* Fuerza el centrado horizontal absoluto de la frase */
    width: 100% !important;          /* Asegura que ocupe todo el ancho disponible para alinearse */
    margin-left: auto !important;
    margin-right: auto !important;
}

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


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


/* ==========================================================================
   12. MEDIA QUERY: TRANSICIÓN PARA TABLETS EN FORMATO HORIZONTAL (992PX)
   ========================================================================== */
@media (max-width: 992px) {
    /* Reducción de la cuadrícula de servicios y conversión elástica a flujo vertical en tablets */
    .services-list .service-row {
        display: flex !important;
        flex-direction: column !important; /* Pasa la grilla de PC a flujo vertical unificado */
        gap: 30px !important;
        margin-bottom: 55px !important;
        padding: 30px 20px !important;
    }
    
    /* 🦾 SINCRO: Reordenamiento elástico de las filas invertidas para mantener la secuencia visual */
    .services-list .service-row.reverse {
        flex-direction: column !important; 
    }

    /* Fuerza a las cajas de texto, viñetas y párrafos a ocupar el ancho completo en tablets */
    .services-list .service-row .service-text,
    .services-list .service-row .service-features,
    .services-list .service-row .tech-intro-box {
        max-width: 100% !important;
        width: 100% !important;
    }
    
    /* Adaptación geométrica de las imágenes gemelas en formato tableta */
    .services-list .service-row .service-images {
        width: 100% !important;
        max-width: 500px !important;
        margin: 20px auto !important;
    }

    .services-list .service-row .service-images img {
        height: 240px !important; 
        width: calc(50% - 6px) !important;
        max-width: 50% !important;
    }
    
    /* Ajuste de escala para el Héro de automatización mecánica en formato tableta */
    .main-wrapper .hero-blue h1 {
        font-size: 2.5rem !important;
    }
    
    .main-wrapper .hero-blue .hero-subtitle {
        font-size: 1.05rem !important;
        max-width: 90% !important;
    }
    
    /* 🦾 SINCRO BOTONES: Alineación centrada del botón de cotización en formato tableta */
    .services-list .service-row .service-btn-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        margin-top: 10px !important;
        margin-bottom: 20px !important;
    }
    
    /* 🦾 SINCRO DIVISORES: Calibración holgada para que el engranaje mecánico no tape los nuevos botones */
    .services-list .gate-dual-divider {
        grid-column: span 2 !important;
        width: 100% !important;
        margin-top: 20px !important;
        margin-bottom: 0px !important;
    }

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

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

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

    /* ----------------------------------------------------------------------
       13.1 BOTÓN FLOTANTE INDEPENDIENTE "PB" (RESPUESTA TÁCTIL VERDE MECÁNICO)
       ---------------------------------------------------------------------- */
    /* 🛠️ SINCRO TOTAL: Apunta al botón unificado .elevator-btn-back de tu HTML de portones */
    .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(46, 204, 113, 0); /* Sincronizado en Verde Esmeralda Mecánico */
        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(46, 204, 113, 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 AUTOMATIZACIÓN)
       ---------------------------------------------------------------------- */
    body .ads-layout-container .main-wrapper .hero-blue {
        padding: 15px 0 25px 0 !important; 
        /* 🛠️ SINCRO TOTAL: Enlazado al banner técnico de portones modernos unificado con tu HTML */
        background: linear-gradient(135deg, rgba(17, 24, 39, 0.95) 0%, rgba(22, 34, 57, 0.9) 100%),
                    url('img/portones_venezuela.webp') no-repeat center center !important;
        background-size: cover !important;
    }

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

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

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

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

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

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

    /* ----------------------------------------------------------------------
       13.3 ORDENAMIENTO DE FILAS Y ACOPLE DE ELEMENTOS EN MÓVIL (768PX)
       ---------------------------------------------------------------------- */
    /* Fuerza el comportamiento elástico vertical puro para todas las tarjetas */
    .services-list .service-row {
        display: flex !important;
        flex-direction: column !important; /* Fuerza el apilamiento vertical unificado */
        padding: 25px 15px !important;     /* 🛠️ SINCRO TOTAL: Colchón perimetral homogéneo protector */
        margin-bottom: 45px !important;
        gap: 20px !important;
        box-sizing: border-box !important;
    }

    /* Cancela el modo reverse de PC para que el texto siempre lidere en smartphones */
    .services-list .service-row.reverse {
        flex-direction: column !important;
    }

    /* Centrado axial y estiramiento del bloque de texto y títulos */
    .services-list .service-row .service-text {
        max-width: 100% !important;
        width: 100% !important;
        text-align: center !important;
        order: 1 !important;               /* Primero en el orden jerárquico táctil */
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Centra los iconos de cabecera y elimina la raya vertical divisoria en pantallas pequeñas */
    .services-list .service-row .service-header-flex {
        justify-content: center !important;
        flex-direction: column !important;
        gap: 10px !important;
    }

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

    .services-list .service-row .service-header-flex h3 {
        font-size: 1.3rem !important;
        text-align: center !important;
        line-height: 1.3 !important;
    }

    /* 📦 CAJA DEL PÁRRAFO INTRODUCTORIO EN MÓVIL */
    .services-list .service-row .tech-intro-box {
        max-width: 100% !important;
        width: 100% !important;
        padding: 15px !important;
        margin-top: 15px !important;
        margin-bottom: 20px !important;
        border-left: none !important;
        border-top: 4px solid #2ecc71 !important; /* ⚙️ SINCRO: Haz de acento superior sintonizado al Verde Esmeralda Mecánico */
        border-radius: 12px !important;
        box-sizing: border-box !important;
    }

    .services-list .service-row .tech-intro-box p {
        text-align: center !important;     /* Centrado de lectura ergonómica unificado */
        font-size: 14px !important;
        box-sizing: border-box !important;
    }

    /* 📦 CAJA DE VIÑETAS / PASTILLAS EN MÓVIL */
    .services-list .service-row .service-features {
        max-width: 100% !important;
        width: 100% !important;
        margin-top: 0 !important;
        margin-bottom: 25px !important;
        padding: 15px !important;
        border-left: none !important;
        border-top: 4px solid #2ecc71 !important; /* ⚙️ SINCRO: Sincronía perimetral táctil en Verde Esmeralda */
        border-radius: 12px !important;
        order: 3 !important;               /* Tercero: Lista de viñetas con checks */
        display: flex !important;
        flex-direction: column !important;
        box-sizing: border-box !important;
    }

    /* Ajuste de empaque para los ítems li tipo pastilla */
    .services-list .service-row .service-features li {
        font-size: 13.5px !important;
        padding: 10px 12px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        flex-direction: row !important;
        align-items: center !important;
    }

    /* 🔘 SINCRO DE BOTONES DE COTIZACIÓN EN MÓVIL */
    .services-list .service-row .service-btn-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        margin-top: 10px !important;
        margin-bottom: 10px !important;
        box-sizing: border-box !important;
        order: 4 !important;               /* Cuarto: Botón de Cotización táctil expandido */
    }

    .services-list .service-row .service-btn-wrapper .btn-ste-small {
        width: 100% !important;            /* El botón se expande a lo ancho para facilitar el clic táctil */
        text-align: center !important;
        padding: 14px 20px !important;
        font-size: 15px !important;
    }

    /* 🛡️ SINCRO DE SEPARADORES DE ENGRANAJE EN MÓVIL */
    .services-list .gate-dual-divider {
        width: 90% !important;
        max-width: 90% !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        margin: 30px auto !important;
        margin-top: 10px !important;   
        margin-bottom: -10px !important; 	
        order: 5 !important;               /* Quinto y último: Línea de conducción y piñones mecánicos */
    }

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

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

    /* 🛠️ SINCRO TOTAL: Contenedor general que enmarca tus fotos gemelas con equilibrado al 100% */
    .services-list .service-row .service-images {
        width: 100% !important;
        height: 160px !important; 
        max-width: 100% !important;        /* 🛠️ CORRECCIÓN: Corta el estiramiento masivo de PC */
        order: 2 !important;               /* Se clava automáticamente en segundo orden */
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 10px !important;
        margin: 15px auto !important;      /* Centrado simétrico exacto por hardware */
        padding-left: 0 !important;        /* 🛠️ CORRECCIÓN: Elimina el desvío que causaba el corte visual */
        padding-right: 0 !important;
        position: relative !important;
        box-sizing: border-box !important;
    }

    /* --- 13.4.2 CONTROL CINÉTICO DE EXPANSIÓN (ZOOM ABSOLUTO EN CAJA DE CRISTAL) --- */
    /* FOTO 1 (Izquierda): Fuerza el centrado axial restando los píxeles perimetrales del vidrio */
    .services-list .service-row .service-images img.img-1.foto-expandida {
        position: fixed !important;        /* Flota sobre el viewport real */
        top: 50% !important;
        left: 50% !important;              /* Clava el punto de anclaje en el centro de la pantalla */
        right: auto !important;
        bottom: auto !important;
        margin-left: 0px !important;       /* Centrado milimétrico corregido sin desvíos en portones */
        
        /* TRUCO INDESTRUCTIBLE: Mide el ancho completo del celular y le quita 48px de aire en total */
        width: calc(100vw - 48px) !important;/* Deja exactamente 24px de respiro a los lados */
        height: auto !important; 
        max-height: 70vh !important;       /* Limita el estiramiento vertical en pantallas alargadas */
        object-fit: contain !important; 
        background: transparent !important;
        
        /* Centrado simétrico puro por GPU: el -50% compensa el desfase del left/top */
        transform: translate3d(-50%, -50%, 0) scale(1.05) !important;
        transform-origin: center center !important; 
        z-index: 999999 !important;        /* Capa soberana por encima de la página */
        box-shadow: 0px 20px 50px rgba(0, 0, 0, 0.6) !important;
        border-radius: 14px !important;
    }

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

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

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

    /* ⚙️ MARCA DE AGUA: CONTROL TOTAL DE IMAGEN DE FONDO, COLOR Y OPACIDAD DE FONDO DEL BLOQUE 1 */
    .services-list .bloque-reparaciones::before {
        content: "" !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        z-index: -1 !important; /* Se clava por debajo de los textos y fotos para no estorbar la lectura */
        
        /* ⚙️ TUS CONTROLES DIRECTOS DE MARCA DE AGUA:
           Sincronizado con tu imagen de fabricación de portones unificada en tu HTML */
        background: url('img/portones_venezuela.webp') no-repeat !important;
        background-size: cover !important; 
        background-position: center center !important;
        opacity: 0.12 !important; 
        pointer-events: none !important; /* Hace que el dedo ignore el fondo al deslizar la pantalla */
    }

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

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

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

    /* ⚙️ CONTROL DIRECTO DEL DIVISOR DEL BLOQUE 1 (CENTRADO AXIAL INDESTRUCTIBLE Y DESPEGADO) */
    /* 🛠️ SINCRO TOTAL: Re-encaminado a tu divisor unificado de engranajes .gate-dual-divider */
    .services-list .bloque-reparaciones .gate-dual-divider {
        order: 5 !important;                 /* Lo clava al final absoluto de la tarjeta */
        width: 90% !important;
        max-width: 90% !important;
        display: flex !important;            /* Cambiado a Flex para un control rígido de alineación */
        justify-content: center !important;  /* Fuerza mecánicamente el centrado axial de los nodos */
        align-items: center !important;
        float: none !important;              
        
        /* TRUCO LÁSER: Fuerza al navegador móvil a equilibrar los orillos de forma elástica */
        margin: 0 auto !important;
        margin-top: 25px !important;         /* Separa el chasis de las viñetas de arriba */
        margin-bottom: 15px !important;      /* Separa el engranaje del filo inferior de la tarjeta */
    }

    /* Ajuste milimétrico para asegurar que las líneas e íconos internos del Bloque 1 fluyan al medio */
    .services-list .bloque-reparaciones .gate-dual-divider .gears-mesh-container {
        margin-left: auto !important;
        margin-right: auto !important;
        float: none !important;
    }
    /* ==========================================================================
       🔐 CONTENEDOR GENERAL - BLOQUE 2: AUTOMATIZACIÓN E INSTALACIÓN DE MOTORES (INMUNIZADO Y CENTRADO) ******BLOQUE 2********BLOQUE 2****BLOQUE 2**************
       ========================================================================== */
    /* 🛠️ SINCRO TOTAL: Apunta a tu contenedor de motores y automatismos unificado de tu HTML */
    .services-list .bloque-motores {
        border-radius: 16px !important;
        margin-bottom: 40px !important;
        display: flex !important;
        flex-direction: column !important; /* Mantiene el flujo vertical limpio */
        
        /* ⚙️ CONTROL DE ALTURA DE LA TARJETA (BLOQUE 2):
           El primer número (25px) es el aire de ARRIBA.
           El segundo y cuarto número (10px) es el aire de los LATERALES.
           El tercer número (45px) es el aire base de ABAJO. ¡Auméntalo si quieres darle más colchón horizontal! */
        padding: 25px 10px 45px 10px !important;

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

    /* ⚙️ MARCA DE AGUA: CONTROL TOTAL DE IMAGEN DE FONDO, COLOR Y OPACIDAD DE FONDO DEL BLOQUE 2 */
    .services-list .bloque-motores::before {
        content: "" !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        z-index: -1 !important; /* Se clava por debajo de textos y fotos */
        
        /* ⚙️ TUS CONTROLES DIRECTOS DE MARCA DE AGUA (BLOQUE 2):
           Sincronizado con tu imagen de motores de portón para la división mecánica. */
        background: url('img/motores.webp') no-repeat !important;
        background-size: cover !important; 
        background-position: center center !important;
        opacity: 0.12 !important; 
        pointer-events: none !important; 
    }

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

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

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

    /* ⚙️ CONTROL DIRECTO DEL DIVISOR DEL BLOQUE 2 (CENTRADO AXIAL INDESTRUCTIBLE Y DESPEGADO) */
    /* 🛠️ SINCRO TOTAL: Re-encaminado a tu divisor unificado de engranajes .gate-dual-divider */
    .services-list .service-row.reverse.bloque-motores .gate-dual-divider,
    .services-list .bloque-motores .gate-dual-divider {
        order: 5 !important;                 /* Lo clava al final absoluto de la tarjeta */
        width: 90% !important;
        max-width: 90% !important;
        display: flex !important;            /* Cambiado a Flex para un control rígido de alineación */
        justify-content: center !important;  /* Fuerza mecánicamente el centrado axial de los piñones */
        align-items: center !important;
        float: none !important;              /* Rompe de raíz la inercia lateral del reverse */
        
        /* TRUCO LÁSER: Fuerza al navegador móvil a equilibrar los orillos e ignora el sabotaje de la sección 13.3 */
        margin: 0 auto !important;
        margin-top: 25px !important;         /* Separa el chasis del botón de cotizar de arriba */
        margin-bottom: 15px !important;      /* Separa el engranaje del filo inferior de la tarjeta */
    }

    /* Ajuste milimétrico para asegurar que las líneas e íconos internos fluyan exactamente al medio */
    .services-list .service-row.reverse.bloque-motores .gate-dual-divider .gears-mesh-container,
    .services-list .bloque-motores .gate-dual-divider .gears-mesh-container {
        margin-left: auto !important;
        margin-right: auto !important;
        float: none !important;
    }

    /* ==========================================================================
       🔐 CONTENEDOR GENERAL - BLOQUE 3: INSTALACIÓN Y MANTENIMIENTO DE CERCO ELÉCTRICO (INMUNIZADO Y CENTRADO) ******BLOQUE 3********BLOQUE 3****BLOQUE 3**************
       ========================================================================== */
    /* 🛠️ SINCRO TOTAL: Apunta a tu contenedor de seguridad perimetral unificado de tu HTML de portones */
    .services-list .bloque-cercos {
        border-radius: 16px !important;
        margin-bottom: 40px !important;
        display: flex !important;
        flex-direction: column !important; /* Mantiene el flujo vertical limpio */

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

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

    /* ⚙️ MARCA DE AGUA: CONTROL TOTAL DE IMAGEN DE FONDO, COLOR Y OPACIDAD DE FONDO DEL BLOQUE 3 */
    .services-list .bloque-cercos::before {
        content: "" !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        z-index: -1 !important; /* Se clava por debajo de textos y fotos */
        
        /* ⚙️ TUS CONTROLES DIRECTOS DE MARCA DE AGUA (BLOQUE 3):
           Sincronizado con tu imagen de cerco eléctrico perimetral para protección activa. */
        background: url('img/cerco_electrico.webp') no-repeat !important;
        background-size: cover !important; 
        background-position: center center !important;
        opacity: 0.12 !important; 
        pointer-events: none !important; 
    }

    /* ⚙️ CAJA DE PÁRRAFOS: Alineación Absoluta y Centrada del Párrafo del Bloque 3 */
    .services-list .bloque-cercos .tech-intro-box,
    .services-list .bloque-cercos .tech-intro-box p {
        width: 100% !important;              
        max-width: 100% !important;
        margin-left: 0 !important;           
        margin-right: 0 !important;          
        margin: 0 auto 15px auto !important; /* Añade un margen inferior de 15px para empujar las fotos */
        padding-left: 10px !important;       /* Respiro ergonómico junto al haz verde mecánico */
        padding-right: 10px !important;      
        border-radius: 8px !important;       
        float: none !important;              
    }

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

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

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

    /* ⚙️ CONTROL DIRECTO DEL DIVISOR DEL BLOQUE 3 (CENTRADO AXIAL INDESTRUCTIBLE Y DESPEGADO) */
    /* 🛠️ SINCRO TOTAL: Re-encaminado a tu divisor unificado de engranajes .gate-dual-divider */
    .services-list .bloque-cercos .gate-dual-divider {
        order: 5 !important;                 /* Lo clava al final absoluto de la tarjeta */
        width: 90% !important;
        max-width: 90% !important;
        display: flex !important;            /* Cambiado a Flex para un control rígido de alineación */
        justify-content: center !important;  /* Fuerza mecánicamente el centrado axial de los nodos */
        align-items: center !important;
        float: none !important;              
        
        /* TRUCO LÁSER: Fuerza al navegador móvil a equilibrar los orillos de forma elástica */
        margin: 0 auto !important;
        margin-top: 25px !important;         /* Separa el chasis de las viñetas de arriba */
        margin-bottom: 15px !important;      /* Separa el engranaje del filo inferior de la tarjeta */
    }

    /* Ajuste milimétrico para asegurar que las líneas e íconos internos del Bloque 3 fluyan al medio */
    .services-list .bloque-cercos .gate-dual-divider .gears-mesh-container {
        margin-left: auto !important;
        margin-right: auto !important;
        float: none !important;
    }

    /* ==========================================================================
       🔐 CONTENEDOR GENERAL - BLOQUE 4: MANTENIMIENTO Y REPARACIÓN DE BARRERAS (INMUNIZADO Y CENTRADO) ******BLOQUE 4********BLOQUE 4****BLOQUE 4**************
       ========================================================================== */
    /* 🛠️ SINCRO INTEGRAL: Creado en espejo bajo la misma matriz geométrica de los bloques anteriores */
    .services-list .bloque-barreras {
        border-radius: 16px !important;
        margin-bottom: 40px !important;
        display: flex !important;
        flex-direction: column !important; /* Mantiene el flujo vertical limpio en smartphones */
        
        /* ⚙️ CONTROL DE ALTURA DE LA TARJETA (BLOQUE 4):
           El primer número (25px) es el aire de ARRIBA.
           El segundo y cuarto número (10px) es el aire de los LATERALES.
           El tercer número (45px) es el aire base de ABAJO. */
        padding: 25px 10px 45px 10px !important;

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

    /* ⚙️ MARCA DE AGUA: CONTROL TOTAL DE IMAGEN DE FONDO, COLOR Y OPACIDAD DE FONDO DEL BLOQUE 4 */
    .services-list .bloque-barreras::before {
        content: "" !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        z-index: -1 !important; /* Se clava por debajo de textos y fotos */
        
        /* ⚙️ TUS CONTROLES DIRECTOS DE MARCA DE AGUA (BLOQUE 4):
           Sincronizado con tu imagen técnica de barreras vehiculares y brazos automáticos en Caracas. */
        background: url('img/barrera_caracas.webp') no-repeat !important;
        background-size: cover !important; 
        background-position: center center !important;
        opacity: 0.12 !important; 
        pointer-events: none !important; 
    }

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

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

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

    /* ⚙️ CONTROL DIRECTO DEL DIVISOR DEL BLOQUE 4 (CENTRADO AXIAL INDESTRUCTIBLE Y DESPEGADO) */
    /* 🛠️ SINCRO TOTAL: Activado el circuito con el mismo truco láser elástico de las tarjetas anteriores */
    .services-list .service-row.reverse.bloque-barreras .gate-dual-divider,
    .services-list .bloque-barreras .gate-dual-divider {
        order: 5 !important;                 /* Lo clava al final absoluto de la tarjeta */
        width: 90% !important;
        max-width: 90% !important;
        display: flex !important;            /* Cambiado a Flex para un control rígido de alineación */
        justify-content: center !important;  /* Fuerza mecánicamente el centrado axial de los piñones */
        align-items: center !important;
        float: none !important;              /* Rompe de raíz la inercia lateral del reverse */
        
        /* TRUCO LÁSER: Fuerza al navegador móvil a equilibrar los orillos e ignora el sabotaje de la sección 13.3 */
        margin: 0 auto !important;
        margin-top: 25px !important;         /* Separa el chasis del botón de cotizar de arriba */
        margin-bottom: 15px !important;      /* Separa el engranaje del filo inferior de la tarjeta */
    }

    /* Ajuste milimétrico para asegurar que las líneas e íconos internos fluyan exactamente al medio */
    .services-list .service-row.reverse.bloque-barreras .gate-dual-divider .gears-mesh-container,
    .services-list .bloque-barreras .gate-dual-divider .gears-mesh-container {
        margin-left: auto !important;
        margin-right: auto !important;
        float: none !important;
    }

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

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

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

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

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

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

    /* ⚙️ SINCRO TOTAL: EFECTO DE PANEL CRISTAL TRASLÚCIDO EN LOS ÍCONOS RÁPIDOS MÓVILES */
    .main-nav .quick-btn-mob {
        border: none !important;
        color: #ffffff !important;
        font-size: 1.1rem !important;        /* Tamaño equilibrado del ícono para centrarse en el chasis */
        cursor: pointer !important;
        -webkit-tap-highlight-color: transparent !important;
        
        /* CONTENEDOR EN ACABADO DE CRISTAL MÓVIL (CENTRADO CUADRADO): */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;  /* Mantiene la casita y el sobre centrados en su cuadradito */
        text-decoration: none !important;
        width: 38px !important;               /* Ancho fijo cuadrado del panel en celulares */
        height: 38px !important;              /* Alto fijo cuadrado del panel en celulares */
        border-radius: 8px !important;        /* Esquinas suavizadas idénticas a la versión PC */
        
        /* Mismo trasfondo y filamento láser translúcido adaptado a tu Verde Esmeralda Mecánico */
        background: rgba(255, 255, 255, 0.04) !important; 
        border: 1px solid rgba(46, 204, 113, 0.18) !important; 
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2) !important;
        transition: all 0.2s ease-in-out !important;
    }

    /* Enciende los íconos internos con tu tono Verde Esmeralda unificado de la división */
    .main-nav .quick-btn-mob i {
        color: #2ecc71 !important; 
        text-shadow: 0 0 5px rgba(46, 204, 113, 0.3) !important;
        margin: 0 !important;                
        padding: 0 !important;
    }

    /* ⚙️ RESPUESTA TÁCTIL CINÉTICA AL PULSAR EN EL TELÉFONO */
    .main-nav .quick-btn-mob:active {
        background: rgba(46, 204, 113, 0.15) !important; 
        border-color: #2ecc71 !important;               
        box-shadow: 0 0 12px rgba(46, 204, 113, 0.4) !important;
        transform: scale(0.95) !important;               
    }

    /* Calibración ergonómica para el pulsador táctil de tres rayitas horizontales */
    .main-nav .menu-toggle {
        display: block !important;
        background: none !important;
        border: none !important;
        color: #2ecc71 !important;           
        font-size: 26px !important;
        margin: 0 !important;
        padding: 5px 10px !important;
        cursor: pointer !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    /* ⚙️ BOTÓN DE COTIZACIÓN ADAPTATIVO EN GRADIENTE VERDE ESMERALDA PROFUNDO */
    .main-nav .btn-quote-adaptive {
        padding: 8px 16px !important;
        font-size: 0.65rem !important;
        background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%) !important; 
        border-radius: 6px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 4px 12px rgba(46, 204, 113, 0.3) !important;
    }

    /* Modifica el icono para que resalte en negro sobre la base esmeralda de alta conversión */
    .main-nav .btn-quote-adaptive i {
        color: #111111 !important;
    }

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

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

    /* ⚙️ PERSIANA MÓVIL INTERACTIVA CON TRASFONDO OSCURO CYBER */
    .main-nav .nav-links.active {
        display: flex !important;            
        flex-direction: column !important;
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        width: 100% !important;
        background: rgba(11, 22, 34, 0.98) !important; /* Trasfondo oscuro unificado de la división */
        border-bottom: 3px solid #2ecc71 !important;   
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6) !important;
        padding: 15px !important;
        gap: 12px !important;
        box-sizing: border-box !important;
        z-index: 999999 !important;                    
    }

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

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

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

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

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

    /* Respuesta táctil de iluminación al presionar las opciones en el teléfono */
    .main-nav .nav-links .dropdown-menu li a:active,
    .main-nav .nav-links .dropdown-menu li a:hover {
        background: rgba(46, 204, 113, 0.2) !important; /* ⚙️ SINCRO: Iluminación en Verde Esmeralda Mecánico */
        border-color: #2ecc71 !important;
        box-shadow: 0 0 15px rgba(46, 204, 113, 0.3) !important;
        padding-left: 25px !important; /* Desplazamiento cinético indicativo de pulsación */
    }

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

    /* SINCRONIZACIÓN ERGONÓMICA Y CONTROL DE ALTURAS ASIMÉTRICAS DE MARCAS */
    /* 🛠️ SINCRO TOTAL: Modificado para inmunizar la clase elástica de 5 columnas (.grid-five-columns) de tu HTML de marcas aliadas */
    .brands-grid,
    .brands-grid.grid-five-columns {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important; /* Cuadrícula exacta de 2 columnas en teléfonos */
        grid-auto-rows: 1fr !important; /* ¡OBLIGATORIO! Fuerza a que las filas midan lo mismo */
        align-items: stretch !important; /* Estira las tarjetas al tamaño de la más alta de su fila */
        gap: 12px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 0 10px !important; /* Pequeño respiro con los bordes de la pantalla */
    }

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

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

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