/*
 * responsive-mobile.css  —  Highcom Cala SAS
 * Cierre de responsividad móvil compartida para todas las subpáginas.
 * Este archivo se carga DESPUÉS del CSS propio de cada página.
 * Breakpoint principal: max-width 768px
 * Breakpoint secondary: max-width 480px
 */

/* ============================================================
   0. RESET GLOBAL DE DESBORDAMIENTO HORIZONTAL
   ============================================================ */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

img, video, iframe {
    max-width: 100%;
    height: auto;
}

/* ============================================================
   1. HEADER MÓVIL — común a todas las subpáginas
      (header con logo + language switcher, sin mega-menu)
   ============================================================ */
@media (max-width: 768px) {
    header {
        padding: 12px 5% !important;
        min-height: 64px !important;
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
    }

    .logo img {
        width: clamp(88px, 28vw, 120px) !important;
        height: auto !important;
    }

    /* Mega-menu nav: ocultar en móvil — la navegación es via header logo + language */
    nav {
        display: none !important;
    }

    .title_header {
        display: none !important;
    }

    /* language flags — compactar */
    .language {
        width: auto !important;
        gap: 8px !important;
        display: flex !important;
        align-items: center !important;
    }

    .language-item img {
        width: 26px !important;
        height: auto !important;
    }
}

/* ============================================================
   2. BOTÓN WHATSAPP FLOTANTE
   ============================================================ */
@media (max-width: 768px) {
    .whatsapp-icon {
        right: 16px !important;
        bottom: 20px !important;
        font-size: 38px !important;
    }
}

/* ============================================================
   3. SECCIÓN HOME / HERO DE SUBPÁGINAS
      (slider de 4 etapas, video de fondo)
   ============================================================ */
@media (max-width: 768px) {
    .container2 {
        height: 420px !important;
        min-height: 420px !important;
        max-height: 420px !important;
        overflow: hidden !important;
        display: flex;
        flex-direction: column;
        position: relative !important;
    }

    .slider {
        height: 100% !important;
        display: flex !important;
        flex-direction: row !important;
    }

    .slider .box {
        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
        background-color: transparent !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        min-height: 100% !important;
        height: 100% !important;
        padding-top: 0 !important;
    }

    .slider .box .details {
        position: absolute !important;
        inset: 0 !important;
        border-top: none !important;
        text-align: center !important;
        padding: 40px 20px 60px 20px !important;
        transform: none !important;
        box-shadow: none !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        height: 100% !important;
        width: 100% !important;
        margin: 0 !important;
        z-index: 100 !important;
        opacity: 1 !important;
        visibility: visible !important;
        background: rgba(0, 0, 0, 0.45) !important;
    }
    .trail {
        bottom: 12px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 140px !important;
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 8px !important;
        font-size: 0.8rem !important;
    }

    .trail div {
        padding: 4px !important;
        border-top: 2px solid rgba(255, 255, 255, 0.4) !important;
        cursor: pointer !important;
        opacity: 0.5 !important;
    }

    .trail div.active {
        border-top: 2px solid var(--success) !important;
        opacity: 1 !important;
    }

    .slider .box .details h1 {
        font-size: clamp(1.8rem, 7vw, 2.3rem) !important;
        margin-bottom: 12px !important;
        color: #fff !important;
        font-weight: 800 !important;
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.95), 0 1px 3px rgba(0, 0, 0, 0.9) !important;
        letter-spacing: 0.02em !important;
    }

    .slider .box .details p {
        font-size: clamp(1.05rem, 4.5vw, 1.25rem) !important;
        line-height: 1.6 !important;
        color: rgba(255, 255, 255, 0.95) !important;
        margin-bottom: 24px !important;
        margin-right: 0 !important;
        max-width: 92% !important;
        text-align: center !important;
        text-shadow: 0 1px 5px rgba(0, 0, 0, 0.9), 0 2px 10px rgba(0, 0, 0, 0.8) !important;
        font-weight: 400 !important;
    }

    .slider .box .details .btn-box {
        margin-top: 5px !important;
    }

    .slider .box .details .btn-box .btn {
        padding: 12px 32px !important;
        font-size: 1.05rem !important;
        font-weight: 700 !important;
        border-radius: 30px !important;
        letter-spacing: 0.03em !important;
        text-transform: uppercase !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5) !important;
        transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    }

    /* Ocultar elementos decorativos del slider en móvil */
    .slider .box .bg,
    .slider .illustration {
        display: none !important;
    }
}

/* ============================================================
   4. SECCIÓN SERVICIOS (service-card grid)
      Tarjetas de servicios: stack vertical en móvil
   ============================================================ */
@media (max-width: 768px) {
    /* contenedor flex → columna */
    .container-todoservices {
        flex-direction: column !important;
        align-items: center !important;
        gap: 0 !important;
    }

    .container-services {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        padding: 0 5% !important;
        gap: 16px !important;
    }

    /* cada tarjeta: ancho completo, altura auto */
    .service-card {
        width: 100% !important;
        max-width: 420px !important;
        height: auto !important;
        min-height: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 0 !important;
    }

    /* imagen del carrusel dentro de la tarjeta */
    .carousel,
    .service-carousel-item {
        max-height: 220px !important;
        height: 220px !important;
        overflow: hidden !important;
    }

    .carousel img,
    .service-carousel-item img {
        width: 100% !important;
        height: 220px !important;
        object-fit: contain !important;
        object-position: center !important;
        background-color: #1f2327 !important;
    }

    /* texto de tarjeta */
    .card-content {
        padding: 14px !important;
    }

    .card-content h3 {
        font-size: 1rem !important;
        margin: 8px 0 !important;
    }

    .card-content a.read-more {
        width: 100% !important;
        text-align: center !important;
    }

    /* Ancho del texto descriptivo */
    .legacy-h.textos-servicios,
    h.textos-servicios {
        width: 100% !important;
        font-size: 0.95rem !important;
        padding: 0 5% !important;
    }

    /* videos adjuntos a servicios */
    .videos {
        margin-left: 0 !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    .videos video {
        width: 100% !important;
        max-width: 420px !important;
    }
}

/* ============================================================
   5. GRID DE PRODUCTOS / TABS
   ============================================================ */
@media (max-width: 768px) {
    /* Tabs de categoría horizontal → scroll */
    .tabs,
    .fillter-buttons {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 8px !important;
        padding-bottom: 6px !important;
    }

    .tabs button,
    .fillter-buttons .button {
        flex-shrink: 0 !important;
        font-size: 0.8rem !important;
        padding: 6px 12px !important;
        white-space: nowrap !important;
    }

    /* Grid de productos → 1 columna */
    .todo_services,
    .section-products .row,
    .container-products {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================================
   6. SECCIÓN EMPRESA (Compañía, Misión, Visión)
   ============================================================ */
@media (max-width: 768px) {
    .section-compañia,
    .section-compa\00F1ia {
        padding: 30px 5% !important;
    }

    .sobre {
        padding: 0 5% 30px !important;
    }

    .fondo-compañia,
    .fondo-compa\00F1ia {
        width: 100% !important;
        height: auto !important;
    }

    .partes {
        flex-direction: column !important;
        gap: 20px !important;
        padding: 15px !important;
    }

    .part1 {
        margin: 0 !important;
        width: 100% !important;
    }
}

/* ============================================================
   7. SECCIÓN INTERÉS / POLÍTICA (background image + texto)
   ============================================================ */
@media (max-width: 768px) {
    .interes,
    .interesg {
        min-height: 0 !important;
        padding: 30px 5% !important;
    }

    .container-interes {
        flex-direction: column !important;
        align-items: center !important;
        gap: 20px !important;
        padding: 20px 5% !important;
        text-align: center !important;
    }

    .container-interes img {
        position: static !important;
        width: 60% !important;
        max-width: 200px !important;
        display: block !important;
        margin: 0 auto !important;
    }

    .todopolitica {
        left: auto !important;
        width: 100% !important;
        position: static !important;
        margin: 0 !important;
        text-align: center !important;
    }

    .Ititle,
    .Ititle span {
        font-size: clamp(1.6rem, 7vw, 2.2rem) !important;
        text-align: center !important;
    }

    .interes p,
    .todopolitica p {
        font-size: 0.9rem !important;
        text-align: justify !important;
    }
}

/* ============================================================
   8. FOOTER — todas las subpáginas
   ============================================================ */
@media (max-width: 768px) {
    footer {
        padding: 30px 5% 20px !important;
    }

    .container-footer {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 20px 0 !important;
        gap: 24px !important;
    }

    .footer-row {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .container-logo {
        text-align: center !important;
    }

    .logo2 {
        display: block !important;
        margin: 0 auto !important;
        max-width: 160px !important;
    }

    .social-icons {
        margin: 12px auto 0 !important;
        width: auto !important;
        justify-content: flex-start !important;
        gap: 10px !important;
    }

    .Stitle {
        font-size: 1.1rem !important;
        padding-bottom: 10px !important;
    }

    .services-item {
        width: 100% !important;
        height: auto !important;
    }

    .services-item ul li a {
        font-size: 0.9rem !important;
    }

    .copy {
        padding: 0.6rem 5% !important;
        font-size: 0.8rem !important;
    }
}

/* ============================================================
   9. SECCIÓN ABOUT / CLIENTES / EXPERIENCIA (index.html)
   ============================================================ */
@media (max-width: 768px) {
    .about {
        flex-direction: column !important;
        gap: 20px !important;
        padding: 30px 5% !important;
    }

    .about img {
        width: 100% !important;
        max-width: 380px !important;
        margin: 0 auto !important;
    }

    .client {
        padding: 20px 5% !important;
    }

    /* logos de clientes: 3 por fila como mínimo */
    .client-logos,
    .logos-container {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 12px !important;
    }

    .client-logos img,
    .logos-container img {
        width: clamp(60px, 22vw, 100px) !important;
        height: auto !important;
    }
}

/* ============================================================
   10. UTILIDADES MÓVIL
   ============================================================ */
@media (max-width: 480px) {
    /* Reducir tipografía base */
    html {
        font-size: 90% !important;
    }

    /* Título h1 de secciones */
    h1 {
        font-size: clamp(1.6rem, 8vw, 2.2rem) !important;
        line-height: 1.15 !important;
    }

    h2 {
        font-size: clamp(1.3rem, 6vw, 1.8rem) !important;
    }

    /* Tarjetas de servicio aún más compactas */
    .service-card {
        max-width: 100% !important;
    }

    /* Carrusel Nosotros — ajuste altura mínima */
    .carrusel,
    .card-home {
        height: 260px !important;
        min-height: 0 !important;
    }
}

/* ============================================================
   11. NAVEGACIÓN MÓVIL (MENÚ HAMBURGUESA Y PANEL LATERAL)
   ============================================================ */
.mobile-menu-toggle-btn,
.mobile-nav-drawer,
.mobile-drawer-overlay {
    display: none;
}

@media (max-width: 768px) {
    .mobile-menu-toggle-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 44px !important;
        height: 44px !important;
        background: var(--secon-bg-color) !important;
        border: 1px solid rgba(18, 247, 255, 0.3) !important;
        box-shadow: 0 0 5px rgba(18, 247, 255, 0.2) !important;
        border-radius: 8px !important;
        color: var(--hover-color) !important;
        font-size: 22px !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
    }

    .mobile-menu-toggle-btn:hover {
        background: var(--hover-color) !important;
        color: var(--bg-color) !important;
        box-shadow: 0 0 10px var(--hover-color) !important;
    }

    /* Ocultar barra de navegación estándar o lista de nav principal */
    .navlist, nav {
        display: none !important;
    }

    .mobile-nav-drawer {
        position: fixed !important;
        top: 0 !important;
        left: -300px !important;
        width: 280px !important;
        height: 100vh !important;
        background: rgba(31, 35, 39, 0.98) !important;
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
        box-shadow: 4px 0 15px rgba(0, 0, 0, 0.6) !important;
        z-index: 100000 !important;
        display: flex !important;
        flex-direction: column !important;
        transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        padding: 24px 20px !important;
    }

    .mobile-nav-drawer.open {
        left: 0 !important;
    }

    .mobile-drawer-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding-bottom: 20px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
        margin-bottom: 24px !important;
    }

    .drawer-logo {
        width: 110px !important;
        height: auto !important;
    }

    .drawer-close-btn {
        width: 36px !important;
        height: 36px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: #fff !important;
        font-size: 22px !important;
        cursor: pointer !important;
        border-radius: 50% !important;
        transition: background-color 0.2s ease !important;
    }

    .drawer-close-btn:hover {
        background-color: rgba(255, 255, 255, 0.1) !important;
        color: var(--hover-color-red) !important;
    }

    .mobile-drawer-links {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .mobile-drawer-links li a {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        color: #e0e0e0 !important;
        font-size: 1.05rem !important;
        font-weight: 500 !important;
        text-decoration: none !important;
        padding: 10px 14px !important;
        border-radius: 8px !important;
        transition: all 0.25s ease !important;
    }

    .mobile-drawer-links li a i {
        font-size: 18px !important;
        width: 24px !important;
        text-align: center !important;
        color: var(--hover-color) !important;
    }

    .mobile-drawer-links li a:hover {
        background: rgba(18, 247, 255, 0.08) !important;
        color: var(--hover-color) !important;
        padding-left: 20px !important;
    }

    .mobile-drawer-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        background: rgba(0, 0, 0, 0.6) !important;
        backdrop-filter: blur(2px) !important;
        -webkit-backdrop-filter: blur(2px) !important;
        z-index: 99999 !important;
        display: none !important;
        opacity: 0 !important;
        transition: opacity 0.3s ease !important;
    }

    .mobile-drawer-overlay.active {
        display: block !important;
        opacity: 1 !important;
    }

    body.drawer-open {
        overflow: hidden !important;
    }
}

/* ============================================================
   12. PESTAÑAS DE PRODUCTOS EN MÓVIL Y TABLET (RESPONSIVO)
   ============================================================ */
@media (max-width: 768px) {
    /* Ajustes generales de la sección de productos */
    .section-products {
        height: auto !important;
        min-height: 0 !important;
        padding: 40px 16px !important;
        background-color: var(--secon-bg-color) !important;
    }

    .titulo_produc {
        margin-bottom: 20px !important;
    }

    /* Contenedor de pestañas */
    .tabs {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        margin: 20px 0 0 0 !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        border: none !important;
        padding: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        overflow: visible !important;
    }

    /* Encabezado de pestañas → scroll horizontal */
    .tabs .tab-header {
        display: flex !important;
        flex-direction: row !important;
        width: 100% !important;
        height: auto !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        border-bottom: 2px solid rgba(255, 255, 255, 0.1) !important;
        padding: 10px !important;
        gap: 12px !important;
        white-space: nowrap !important;
        background: rgba(31, 35, 39, 0.95) !important;
        border-radius: 10px !important;
        scrollbar-width: none !important;
    }

    .tabs .tab-header::-webkit-scrollbar {
        display: none !important;
    }

    .tabs .tab-header > div {
        flex-shrink: 0 !important;
        float: none !important;
        width: auto !important;
        height: auto !important;
        padding: 8px 16px !important;
        border-radius: 6px !important;
        font-size: 0.82rem !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        background: var(--bg-color) !important;
        color: #bdbdbd !important;
        text-align: center !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
    }

    .tabs .tab-header > div.active,
    .tabs .tab-header > div:hover {
        background: var(--success) !important;
        color: var(--secon-bg-color) !important;
        border-color: var(--success) !important;
        font-weight: 700 !important;
    }

    .tabs .tab-header > div .icon-svg {
        width: 14px !important;
        height: 14px !important;
        margin: 0 !important;
        filter: none !important;
    }

    /* Ocultar el indicador de pestañas vertical y sobre-div */
    .tabs .tab-indicator,
    .sobre-div {
        display: none !important;
    }

    /* Contenedor de contenido de pestañas */
    .tabs .tab-content {
        width: 100% !important;
        height: auto !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        float: none !important;
        border: none !important;
        margin-top: 15px !important;
        overflow: visible !important;
        display: block !important;
        padding: 0 !important;
    }
    /* Paneles individuales de cada producto */
    .tabs .tab-content > div {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        overflow-y: visible !important;
        padding: 10px 0 !important;
        opacity: 0 !important;
        display: none !important;
        pointer-events: none !important;
        transform: none !important;
        transition: none !important;
    }

    .tabs .tab-content > div.active {
        opacity: 1 !important;
        display: block !important;
        pointer-events: auto !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        overflow-y: visible !important;
    }

    /* Estructura del contenido visual del producto */
    .c0-product-visual {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 20px !important;
        background: var(--secon-bg-color) !important;
        padding: 16px !important;
        border-radius: 15px !important;
        box-shadow: 0 5px 15px rgba(0,0,0,0.3) !important;
        align-items: center !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    .c0-product-copy {
        width: 100% !important;
        float: none !important;
        padding: 0 !important;
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    .title-tab {
        font-size: 1.5rem !important;
        text-align: center !important;
        width: 100% !important;
        margin: 5px 0 12px 0 !important;
        left: auto !important;
        font-weight: 800 !important;
        color: var(--success) !important;
        padding-bottom: 0 !important;
        position: relative !important;
    }

    .subtitle-tab {
        font-size: 1.1rem !important;
        text-align: center !important;
        width: 100% !important;
        margin: 15px 0 8px 0 !important;
        font-weight: 700 !important;
        left: auto !important;
        position: relative !important;
    }

    /* Textos y listas descriptivas */
    .tabs .tab-content .textos,
    .tabs .tab-content .legacy-h,
    .c0-product-copy .legacy-h {
        width: 100% !important;
        float: none !important;
        font-size: 0.95rem !important;
        line-height: 1.5 !important;
        text-align: center !important;
        color: #e0e0e0 !important;
        padding: 0 !important;
        margin-bottom: 12px !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
    }

    .tabs .tab-content ul {
        padding-left: 0 !important;
        margin-bottom: 15px !important;
        list-style-type: none !important;
        text-align: left !important;
        display: inline-block !important;
    }

    .tabs .tab-content li {
        position: relative !important;
        padding-left: 18px !important;
        margin-bottom: 8px !important;
        font-size: 0.9rem !important;
        line-height: 1.45 !important;
        color: #e0e0e0 !important;
        text-align: left !important;
        list-style-type: none !important;
        display: block !important;
    }

    .tabs .tab-content li::before {
        content: '\2022' !important;
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        color: var(--success) !important;
        font-size: 1.15rem !important;
        line-height: 1 !important;
    }

    /* Botón de descarga de ficha técnica */
    .btn-box-tab {
        margin: 15px 0 25px 0 !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
        width: 100% !important;
        justify-content: center !important;
    }

    .btn-tab {
        width: 100% !important;
        max-width: 250px !important;
        height: 44px !important;
        font-size: 0.9rem !important;
        font-weight: 600 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 22px !important;
        margin: 0 !important;
    }

    /* Solucionar imágenes aplastadas y fuera de pantalla en CableadoYFO.html y otros */
    .imagen-tap, .imagen-tap2, .imagen-tap3,
    main[class^="imagen-tap"], main[class*=" imagen-tap"],
    div[class^="imagen-tap"], div[class*=" imagen-tap"] {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 15px !important;
        width: 100% !important;
        margin-top: 20px !important;
    }

    .imagen-tap img, .imagen-tap2 img, .imagen-tap3 img,
    main[class^="imagen-tap"] img, main[class*=" imagen-tap"] img,
    div[class^="imagen-tap"] img, div[class*=" imagen-tap"] img {
        width: 100% !important;
        max-width: 300px !important;
        height: auto !important;
        object-fit: contain !important;
    }

    /* Media y fotos de producto (carrusel swipeable nativo en móvil) */
    .c0-product-media {
        width: 100% !important;
        max-width: 100% !important;
        margin: 15px 0 0 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        position: relative !important;
    }

    .c0-product-media-frame {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        width: 100% !important;
        height: 220px !important;
        max-height: 220px !important;
        gap: 10px !important;
        scrollbar-width: none !important;
        background: transparent !important;
        border-radius: 8px !important;
        aspect-ratio: auto !important;
    }

    .c0-product-media-frame::-webkit-scrollbar {
        display: none !important;
    }

    .c0-product-media .c0-carousel-slide {
        display: block !important;
        position: relative !important;
        flex-shrink: 0 !important;
        width: 100% !important;
        height: 100% !important;
        scroll-snap-align: center !important;
        opacity: 1 !important;
    }

    .c0-product-media .c0-carousel-slide img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        background-color: #1f2327 !important;
        border-radius: 8px !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        box-shadow: 0 4px 10px rgba(0,0,0,0.3) !important;
    }

    /* Ocultar botones e indicadores superfluos del carrusel */
    .c0-carousel-control,
    .c0-carousel-status {
        display: none !important;
    }
}

/* ============================================================
   13. CORRECCIÓN DE TEXTO CORTADO EN HERO SLIDER
   ============================================================ */
@media (max-width: 768px) {
    /* BLOQUE ELIMINADO PARA EVITAR CONFLICTO CON SLIDER ARRIBA */
}

/* ============================================================
   14. DISEÑO RESPONSIVO DE SECCIÓN PRODUCTOS EN INFRAESTRUCTURA
   ============================================================ */
@media (max-width: 900px) {
    .servd_acce {
        height: auto !important;
        padding: 40px 5% !important;
        display: block !important;
        position: relative !important;
        background-color: var(--bg-color) !important;
    }

    .servd_acce_dos {
        display: none !important; /* Ocultar fondo absoluto para simplificar en móvil */
    }

    .servd_acce_container {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 30px !important;
        left: 0 !important;
        padding: 0 !important;
    }

    .servd_acce_info,
    .servd_acce_info2 {
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        padding: 24px 16px !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        background-color: var(--secon-bg-color) !important;
        border-radius: 15px !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
    }

    /* Ocultar elemento de línea decorativa */
    .servd_acce_line {
        display: none !important;
    }

    /* Contenedor del Video de producto */
    .servd_acce_video {
        position: relative !important;
        width: 100% !important;
        max-width: 340px !important;
        height: 200px !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        margin: 0 0 15px 0 !important;
        border: 2px solid rgba(255, 255, 255, 0.2) !important;
        border-radius: 8px !important;
        overflow: hidden !important;
        z-index: 10 !important;
    }

    .servd_acce_video video {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    /* Texto descriptivo del producto */
    .servd_acce_text {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        padding: 0 !important;
        text-align: center !important;
    }

    .servd_acce_text .title {
        font-size: 1.3rem !important;
        font-weight: 800 !important;
        color: var(--success) !important;
        margin-top: 10px !important;
        margin-bottom: 12px !important;
        text-align: center !important;
        padding: 0 !important;
        top: auto !important;
        transform: none !important;
    }

    .servd_acce_text span {
        font-size: 0.8rem !important;
        letter-spacing: 1.5px !important;
        color: #bdbdbd !important;
        display: block !important;
        margin-bottom: 6px !important;
        padding-top: 0 !important;
    }

    .servd_acce_text .text_serv {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        width: 100% !important;
        font-size: 0.95rem !important;
        line-height: 1.5 !important;
        text-align: justify !important;
        color: #e0e0e0 !important;
        margin: 0 !important;
    }

    /* Segunda tarjeta de información */
    .servd_acce_info2 .servd_acce_img {
        width: 100% !important;
        max-width: 320px !important;
        height: 180px !important;
        margin: 0 0 15px 0 !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
    }

    .servd_acce_info2 .servd_acce_img img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        border-radius: 8px !important;
    }

    .servd_acce_info2 .servd_acce_video {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        width: 100% !important;
        max-width: 340px !important;
        height: 200px !important;
        margin: 0 0 15px 0 !important;
    }
}

/* ============================================================
   15. REFINAMIENTOS RESPONSIVOS PARA LA PÁGINA DE INICIO (INDEX.HTML)
   ============================================================ */
@media (max-width: 768px) {
    /* Ocultar el menú-icon duplicado original de index.html */
    #menu-icon,
    header #menu-icon {
        display: none !important;
    }

    /* Ajustar las Tarjetas de Especialidades / Servicios para evitar overlap */
    #services .card_services,
    #services .flip-container_services:hover .card_services {
        width: min(100%, 310px) !important;
        height: 335px !important;
        aspect-ratio: auto !important;
        margin: 10px auto !important;
    }

    /* Reverso de las Tarjetas de Especialidades / Servicios */
    #services .back_services {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        padding: 16px 12px !important;
        height: 100% !important;
        gap: 6px !important;
        transform: rotateY(180deg) !important;
        box-sizing: border-box !important;
    }

    #services .back_services .service-icon {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        margin: 0 0 4px 0 !important;
        font-size: 1.4rem !important;
        padding: 6px !important;
        border: 2px solid var(--hover-color) !important;
        box-shadow: var(--neon-box-shadow) !important;
        outline: none !important;
    }

    #services .back_services h1 {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        width: 100% !important;
        font-size: 1.05rem !important;
        font-weight: 700 !important;
        margin: 0 0 4px 0 !important;
        color: #fff !important;
        text-shadow: none !important;
        text-align: center !important;
    }

    #services .back_services p {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        font-size: 0.76rem !important;
        line-height: 1.35 !important;
        color: rgba(255, 255, 255, 0.9) !important;
        text-align: center !important;
        border-left: none !important;
        background: transparent !important;
        padding: 0 !important;
        box-shadow: none !important;
        max-height: none !important;
        overflow: visible !important;
    }

    #services .back_services .services-btn {
        position: relative !important;
        margin-top: 6px !important;
        top: auto !important;
        z-index: 2 !important;
    }

    #services .back_services .services-btn .btn {
        padding: 5px 12px !important;
        font-size: 0.72rem !important;
        height: auto !important;
        width: auto !important;
        min-width: 90px !important;
        margin-top: 0 !important;
    }

    /* Aliados (Sección Clientes) - Acordeón Horizontal Similar a Web */
    #timeline {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        align-items: stretch !important;
        height: 60vh !important;
        min-height: 350px !important;
        background-color: #0d67ac !important;
        padding: 0 !important;
        gap: 0 !important;
        border-radius: 0 !important;
        margin: 20px 0 0 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    #timeline:hover .tl-item,
    #timeline:active .tl-item {
        width: 10% !important;
    }

    .tl-item {
        height: 100% !important;
        min-height: 100% !important;
        width: 14.28% !important;
        max-width: 100% !important;
        flex-grow: 1 !important;
        flex-shrink: 1 !important;
        transition: width 0.5s ease !important;
        position: relative !important;
        background-color: transparent !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        display: block !important;
        overflow: hidden !important;
        transform: translate3d(0, 0, 0) !important;
    }

    .tl-item:hover,
    .tl-item:active {
        width: 40% !important;
        transform: translate3d(0, 0, 0) !important;
    }

    .tl-item:before, .tl-item:after {
        display: block !important;
        content: "" !important;
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        height: 100% !important;
        transform: translate3d(0, 0, 0) !important;
    }

    .tl-item:after {
        background: rgba(12, 44, 69, 0.85) !important;
        opacity: 1 !important;
        transition: opacity 0.5s ease !important;
    }

    .tl-item:before {
        background: linear-gradient(to bottom, rgba(28, 96, 198, 0) 0%, rgb(60, 121, 235) 75%) !important;
        z-index: 1 !important;
        opacity: 0 !important;
        transform: translate3d(0, 0, 0) translateY(50%) !important;
        transition: opacity 0.5s ease, transform 0.5s ease !important;
    }

    .tl-item:hover:after,
    .tl-item:active:after {
        opacity: 0 !important;
    }

    .tl-item:hover:before,
    .tl-item:active:before {
        opacity: 1 !important;
        transform: translate3d(0, 0, 0) translateY(0) !important;
        transition: opacity 1s ease, transform 1s ease 0.25s !important;
    }

    .tl-bg {
        filter: grayscale(100%) !important;
        background: transparent !important;
        position: absolute !important;
        width: 100% !important;
        height: 100% !important;
        top: 0 !important;
        left: 0 !important;
        display: block !important;
        transition: filter 0.5s ease !important;
    }

    .tl-item:hover .tl-bg,
    .tl-item:active .tl-bg {
        filter: grayscale(0) !important;
    }

    .tl-bg img, .tl-bg .img1 {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        padding: 0 !important;
        background: transparent !important;
    }

    .tl-content {
        display: block !important;
        transform: translate3d(0, 0, 0) translateY(25px) !important;
        position: relative !important;
        z-index: 2 !important;
        text-align: center !important;
        margin: 0 !important;
        top: 55% !important;
        opacity: 0 !important;
        transition: all 0.75s ease 0.5s !important;
    }

    .tl-item:hover .tl-content,
    .tl-item:active .tl-content {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }

    .tl-content h1 {
        font-size: 1.1rem !important;
        color: #fff !important;
        font-weight: normal !important;
        text-shadow: 1px 1px 3px rgba(0,0,0,0.8) !important;
    }

    /* Carrusel de Experiencia Swipeable / Deslizable */
    .experience .options {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 320px !important;
        min-width: 0 !important;
        gap: 12px !important;
        padding: 10px 0 !important;
        margin: 0 auto !important;
        scrollbar-width: none !important;
    }

    .experience .options::-webkit-scrollbar {
        display: none !important;
    }

    .experience .options .option {
        display: block !important;
        flex-shrink: 0 !important;
        width: calc(100% - 24px) !important;
        min-width: calc(100% - 24px) !important;
        height: 100% !important;
        margin: 0 !important;
        scroll-snap-align: center !important;
        border-radius: 15px !important;
        flex-grow: 0 !important;
        transform: none !important;
        position: relative !important;
        background-size: cover !important;
        background-position: center !important;
    }

    /* Forzar que se muestren todas las imágenes en el carrusel móvil */
    .experience .options .option:nth-child(2),
    .experience .options .option:nth-child(3),
    .experience .options .option:nth-child(4),
    .experience .options .option:nth-child(5) {
        display: block !important;
    }

    .experience .options .option .shadow {
        position: absolute !important;
        inset: 0 !important;
        background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 80%) !important;
        z-index: 1 !important;
    }

    .experience .options .option .label {
        position: absolute !important;
        bottom: 15px !important;
        left: 15px !important;
        display: flex !important;
        align-items: center !important;
        z-index: 2 !important;
    }

    .experience .options .option .label .icon {
        width: 40px !important;
        height: 40px !important;
        background-color: var(--success) !important;
        color: var(--secon-bg-color) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important;
        font-size: 1.1rem !important;
    }

    /* Puntos de paginación del carrusel de Experiencia */
    .experience-dots-container {
        display: flex !important;
        justify-content: center !important;
        gap: 8px !important;
        margin-top: 15px !important;
        width: 100% !important;
    }

    .experience-dot {
        width: 10px !important;
        height: 10px !important;
        border-radius: 50% !important;
        background-color: rgba(255, 255, 255, 0.25) !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
    }

    .experience-dot.active {
        background-color: var(--success) !important;
        transform: scale(1.2) !important;
        box-shadow: 0 0 8px var(--success) !important;
    }
}

/* ============================================================
   16. REFINAMIENTOS PARA TELECOMUNICACIONES.HTML Y SUBPÁGINAS
   ============================================================ */
@media (max-width: 768px) {
    /* Soluciones: fila con 2 columnas */
    #solution .services-container {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: stretch !important;
        gap: 16px 8px !important;
    }

    #solution .service-box {
        width: calc(50% - 8px) !important;
        max-width: calc(50% - 8px) !important;
        flex-grow: 0 !important;
        flex-shrink: 0 !important;
        padding: 8px !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        margin: 0 !important;
    }

    #solution .service-icon,
    .time .service-icon {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        height: auto !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    #solution .service-icon img,
    .time .service-icon img {
        width: 80px !important;
        height: 80px !important;
        max-width: 80px !important;
        display: block !important;
        margin: 10px auto 12px auto !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    #solution .service-title {
        font-size: 0.82rem !important;
        line-height: 1.3 !important;
        color: #fff !important;
        margin-bottom: 0 !important;
        font-weight: 600 !important;
    }

    /* Servicios: imágenes cubiertas y mejores espaciados */
    #section-services .services-section2 {
        margin: 0 !important;
        width: 100% !important;
        padding: 30px 16px !important;
        text-align: center !important;
    }

    #section-services .header-section {
        text-align: center !important;
        margin-bottom: 20px !important;
    }

    #section-services .container-services {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        padding: 0 5% !important;
        gap: 16px !important;
    }

    #section-services .service-card {
        background: var(--secon-bg-color) !important;
        border: 1px solid rgba(255, 255, 255, 0.05) !important;
        border-radius: 12px !important;
        overflow: hidden !important;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3) !important;
        margin-bottom: 15px !important;
    }

    #section-services .service-card .carousel img,
    #section-services .service-card .service-carousel-item img {
        object-fit: contain !important;
        background-color: #1f2327 !important;
    }
    
    #section-services .service-card h3 {
        font-size: 1.05rem !important;
        line-height: 1.4 !important;
        color: #fff !important;
        margin: 0 !important;
        font-weight: 700 !important;
        text-align: center !important;
        width: 100% !important;
    }

    #section-services .service-card .card-content {
        padding: 18px 14px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        align-items: center !important;
        text-align: center !important;
    }

    #section-services .service-card .card-content .legacy-h,
    #section-services .service-card .card-content p {
        text-align: center !important;
        width: 100% !important;
        margin: 0 !important;
        font-size: 0.9rem !important;
        line-height: 1.45 !important;
    }

    #section-services .service-card .read-more {
        display: none !important;
    }

    /* Productos en Infraestructura.html */
    .container_productos {
        height: auto !important;
    }

    .contact_info {
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        background-color: var(--secon-bg-color) !important;
        padding: 20px !important;
        border-radius: 12px !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
    }

    .contact_info img {
        width: 100% !important;
        max-width: 320px !important;
        height: auto !important;
        border-radius: 8px !important;
        margin-bottom: 15px !important;
        position: static !important;
        transform: none !important;
    }

    .container_info_text {
        position: static !important;
        transform: none !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }

    .container_info_text .legacy-h.title {
        font-size: 1.5rem !important;
        font-weight: 800 !important;
        color: var(--success) !important;
        margin-bottom: 10px !important;
        text-align: center !important;
        position: static !important;
        padding: 0 !important;
        width: 100% !important;
    }

    .container_info_text h6 {
        position: static !important;
        width: 100% !important;
        opacity: 1 !important;
        color: #e0e0e0 !important;
        font-size: 0.95rem !important;
        line-height: 1.5 !important;
        text-align: justify !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    #servicios_productos {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 20px !important;
        margin-top: 20px !important;
    }

    .servizq,
    .servdcha {
        width: 100% !important;
        min-height: 280px !important;
        height: auto !important;
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 40px 20px !important;
        border-radius: 12px !important;
        overflow: hidden !important;
    }

    .servizq img,
    .servdcha img {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        z-index: 1 !important;
    }

    .servizq::before,
    .servdcha::before {
        position: absolute !important;
        inset: 0 !important;
        background-color: rgba(0, 0, 0, 0.65) !important;
        z-index: 2 !important;
        content: "" !important;
    }

    .servtextoizq,
    .servtextodcha {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        width: 100% !important;
        z-index: 3 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        padding: 0 !important;
    }

    .servtextoizq .title,
    .servtextodcha .title {
        font-size: 1.4rem !important;
        font-weight: 800 !important;
        color: var(--success) !important;
        margin-bottom: 12px !important;
        text-transform: uppercase !important;
    }

    .servtextoizq .legacy-h,
    .servtextodcha .legacy-h {
        font-size: 0.9rem !important;
        line-height: 1.5 !important;
        color: #fff !important;
        text-align: center !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    /* ============================================================
       17. SECCIÓN FABRICACIÓN DE TABLEROS EN MÓVIL
       ============================================================ */
    /* Apilar Pasos debajo de los Rombos */
    #section-products .d-flex.flex-colunm {
        flex-direction: column !important;
        display: flex !important;
        gap: 20px !important;
    }

    #section-products .tableros-rombos {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        padding: 0 !important;
    }

    #section-products .tableros-rombos .colunm {
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        margin: 0 auto !important;
    }

    #section-products .tableros-rombos .first {
        margin-bottom: 0 !important;
    }

    #section-products .tableros-rombos .second {
        margin-top: -30px !important; /* Honeycomb nesting */
    }

    #section-products .tableros-rombos .third {
        margin-top: -30px !important; /* Honeycomb nesting */
    }

    #section-products .tableros-rombos .figure_rom {
        margin: 6px !important;
        width: 90px !important;
        height: 90px !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    #section-products .tableros-rombos .imagea {
        width: 90px !important;
        height: 90px !important;
        transform: rotate(45deg) !important;
        transition: all 0.3s ease !important;
        border: 1px solid rgba(255, 255, 255, .10) !important;
        box-shadow: 0 12px 30px rgba(0, 0, 0, .25) !important;
    }

    #section-products .tableros-rombos .imagea:hover,
    #section-products .tableros-rombos .imagea:active {
        z-index: 5 !important;
        border-color: rgba(0, 255, 95, .48) !important;
        box-shadow: 0 20px 42px rgba(0, 0, 0, .36) !important;
        transform: rotate(0deg) scale(1.4) !important;
    }

    #section-products .tableros-rombos .image-romb {
        width: 142% !important;
        height: 142% !important;
        margin: -21% 0 0 -21% !important;
        transform: rotate(-45deg) !important;
        transition: all 0.3s ease !important;
    }

    #section-products .tableros-rombos .imagea:hover .image-romb,
    #section-products .tableros-rombos .imagea:active .image-romb {
        transform: rotate(0deg) scale(1) !important;
    }

    #section-products .tableros-rombos .overlay-text {
        font-size: 0.55rem !important;
        padding: 4px 2px !important;
    }

    /* Carrusel de Pasos (Vertical auto-scroll) debajo de los rombos */
    #section-products .wrapper1 {
        width: 100% !important;
        height: 240px !important;
        min-height: 240px !important;
        margin-top: 30px !important;
        overflow: hidden !important;
        position: relative !important;
    }

    .carousel__item-head {
        width: 60px !important;
        height: 60px !important;
        font-size: 28px !important;
        margin-right: -30px !important;
        padding: 10px !important;
        z-index: 10 !important;
    }

    .carousel__item-body {
        width: auto !important;
        flex-grow: 1 !important;
        padding: 12px 15px 12px 40px !important;
        background-color: var(--secon-bg-color) !important;
    }

    .carousel__item-body .title_tab {
        font-size: 1.1rem !important;
        margin-bottom: 4px !important;
    }

    .carousel__item-body .text_tab {
        font-size: 0.85rem !important;
    }

    /* GALERÍA DE TABLEROS EN MÓVIL (Mantenida como carrusel) */
    .Galery .c0-gallery-carousel {
        position: relative !important;
        width: 100% !important;
        overflow: hidden !important;
        border: 1px solid rgba(255, 255, 255, .1) !important;
        border-radius: 8px !important;
        background: rgba(18, 25, 30, .96) !important;
        box-shadow: 0 10px 25px rgba(0, 0, 0, .3) !important;
        margin-top: 15px !important;
    }

    .Galery .c0-gallery-frame {
        position: relative !important;
        display: grid !important;
        place-items: center !important;
        width: 100% !important;
        min-height: 220px !important;
        max-height: 300px !important;
        height: 240px !important;
        overflow: hidden !important;
        aspect-ratio: auto !important;
    }

    .Galery .c0-gallery-slide {
        position: absolute !important;
        inset: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 100% !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transition: opacity .45s ease-in-out, visibility .45s ease-in-out !important;
    }

    .Galery .c0-gallery-slide.active {
        opacity: 1 !important;
        visibility: visible !important;
    }

    .Galery .c0-gallery-slide img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        object-fit: contain !important;
        object-position: center !important;
    }

    /* Mostrar controles de galería en móvil */
    .Galery .c0-carousel-control {
        position: absolute !important;
        top: 50% !important;
        z-index: 100 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 32px !important;
        height: 32px !important;
        border: 1px solid rgba(255, 255, 255, .18) !important;
        border-radius: 50% !important;
        background: rgba(12, 18, 23, .84) !important;
        color: #fff !important;
        font-size: 1.5rem !important;
        line-height: 1 !important;
        transform: translateY(-50%) !important;
        cursor: pointer !important;
    }

    .Galery .c0-carousel-prev {
        left: 10px !important;
    }

    .Galery .c0-carousel-next {
        right: 10px !important;
    }

    .Galery .c0-carousel-status {
        position: absolute !important;
        right: 10px !important;
        bottom: 10px !important;
        z-index: 100 !important;
        display: block !important;
        padding: 2px 8px !important;
        border-radius: 999px !important;
        background: rgba(12, 18, 23, .78) !important;
        color: rgba(255, 255, 255, .78) !important;
        font-size: .72rem !important;
        font-weight: 800 !important;
        letter-spacing: .03em !important;
    }
}

/* ============================================================
   18. FIX DE SCROLL Y SWIPE EN CARRUSELES MÓVILES
   - Usamos touch-action: auto !important para restaurar el comportamiento
     táctil por defecto del navegador. Esto permite que Slick Carousel,
     Swiper y los sliders personalizados por JS capten el deslizamiento
     horizontal (swipe) y el navegador maneje el desplazamiento vertical
     (scroll) de la página sin conflictos.
   ============================================================ */
@media (max-width: 768px) {

    /* Carrusel de Experiencia (scroll horizontal entre cards) */
    .experience .options {
        touch-action: auto !important;
    }

    /* Tabs de productos (scroll horizontal de botones) */
    .tabs .tab-header {
        touch-action: auto !important;
    }

    /* Carrusel de imágenes de producto */
    .c0-product-media-frame {
        touch-action: auto !important;
    }

    /* Tabs horizontales generales */
    .tabs,
    .fillter-buttons {
        touch-action: auto !important;
    }

    /* Carrusel de servicio card (Slick) y todos sus elementos internos */
    .carousel,
    .slick-slider,
    .slick-list,
    .slick-track,
    .slick-slide,
    .service-carousel-item {
        touch-action: auto !important;
    }

    /* Galería de tableros */
    .Galery .c0-gallery-frame {
        touch-action: auto !important;
    }

    /* El slider principal (hero) */
    .slider {
        touch-action: auto !important;
    }

    /* Asegurar que body y html nunca queden bloqueados */
    html, body {
        touch-action: auto !important;
    }
}

/* ODF Mini de pared: Fondo negro en el carrusel e imágenes para evitar las líneas blancas */
#content-odf-mini-pared .c0-product-media,
#content-odf-mini-pared .c0-product-media-frame,
#content-odf-mini-pared .c0-carousel-slide,
#content-odf-mini-pared .c0-carousel-slide img,
#content-odf-mini-pared img[class^="imagen"],
#content-odf-mini-pared img[class*=" imagen"],
#content-odf-mini-pared .imagen-tap img,
#content-odf-mini-pared .imagen-tap2 img {
    background: #000000 !important;
    background-color: #000000 !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}


/* Optimize carousel image rendering to avoid blurriness and pixelation */
.carousel img,
.carousel-item img,
.carousel-inner img,
.service-carousel-item img,
.c0-carousel-slide img,
.c0-product-media img {
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
    -webkit-transform: translate3d(0, 0, 0) !important;
    transform: translate3d(0, 0, 0) !important;
}