/* =========================================
   1. HERO SECTION (Diseño de Tarjeta)
========================================= */
.equipamiento-hero-section {
    padding: 40px 20px;
    margin-bottom: 30px;
    position: relative;
    z-index: 10;
    overflow: visible !important; 
}

.equipamiento-hero-card {
    width: 100%; 
    max-width: 1200px; 
    min-height: 350px;
    margin: 0 auto; 
    display: flex;
    align-items: center;
    padding: 50px 60px;
    position: relative;
    overflow: visible !important; 
    background: transparent; 
    border-radius: 25px;
}

.equipamiento-hero-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 78%;
    height: 100%;
    background: #F7F7F7;
    border-radius: 25px;
    box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.05);
    z-index: 0;
}

.equipamiento-hero-text {
    width: 55%; 
    position: relative;
    z-index: 2;
}

.equipamiento-hero-text h2 {
    color: #6A00A7;
    font-size: 42px;
    font-weight: 800;
    margin-bottom: 20px;
    line-height: 1.15;
}

.equipamiento-hero-text p {
    color: #002955;
    font-size: 18px;
    line-height: 1.6;
}

.equipamiento-hero-image {
    position: absolute;
    right: 0; 
    top: 50%;
    transform: translateY(-50%);
    width: 45%; 
    height: 125%; 
    z-index: 1;
    pointer-events: none;
}

.equipamiento-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: right center;
}

/* =========================================
   2. LAYOUT CATÁLOGO INTERACTIVO
========================================= */
.equipamiento-catalogo-section {
    padding: 0 20px 80px 20px;
    font-family: 'Ubuntu', sans-serif;
}

.equipamiento-layout-wrapper {
    display: flex;
    gap: 30px;
    max-width: 1300px;
    margin: 0 auto;
    align-items: flex-start;
}

/* =========================================
   3. SIDEBAR IZQUIERDO (Escritorio)
========================================= */
.equipamiento-sidebar {
    width: 320px;
    flex-shrink: 0;
    position: sticky;
    top: 120px;
}

.equipamiento-sidebar-card {
    background: #FFF;
    border: 1.5px solid #E8DEF8;
    border-radius: 15px;
    padding: 25px 20px;
}

.equipamiento-sidebar-title {
    color: #6A00A7;
    font-size: 20px;
    font-weight: 800;
    margin: 0 0 20px 0;
    text-transform: uppercase;
}

.equipamiento-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.equipamiento-menu li {
    margin-bottom: 8px;
}

.eq-menu-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    border-radius: 10px;
    text-decoration: none;
    color: #002955;
    font-weight: 700;
    font-size: 15px;
    transition: all 0.3s ease;
}

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

.eq-icon img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    transition: filter 0.3s ease;
}

.eq-badge {
    background: #F4E8FF;
    color: #6A00A7;
    font-size: 13px;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 20px;
    transition: all 0.3s ease;
}

.eq-menu-item:hover {
    background: #F4F0F9;
}

.eq-menu-item.active {
    background: #6A00A7;
    color: #FFF;
}

.eq-menu-item.active .eq-icon img {
    filter: brightness(0) invert(1);
}

.eq-menu-item.active .eq-badge {
    background: rgba(255,255,255,0.2);
    color: #FFF;
}

.equipamiento-sidebar-footer {
    background: #FCFAFF;
    margin: 20px -20px -25px -20px;
    padding: 25px 20px;
    border-top: 1px solid #E8DEF8;
    border-radius: 0 0 15px 15px;
}

.equipamiento-sidebar-footer h4 {
    color: #6A00A7;
    font-size: 13px;
    font-weight: 800;
    margin: 0 0 15px 0;
    text-transform: uppercase;
}

.eq-countries {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.eq-countries span {
    background: #F4E8FF;
    color: #002955;
    padding: 6px 15px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
}

/* =========================================
   4. ELEMENTOS MÓVILES POR DEFECTO
========================================= */
.eq-mobile-dropdown-container, 
.eq-bottom-sheet-overlay, 
.eq-bottom-sheet-menu { 
    display: none; 
}

/* =========================================
   5. CONTENEDOR DERECHO (Grilla)
========================================= */
.equipamiento-content {
    flex-grow: 1;
    width: 100%;
}

.equipamiento-grid-card {
    background: #FDFBFF;
    border: 1.5px solid #E8DEF8;
    border-radius: 15px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    height: 700px; 
}

.eq-content-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid #E8DEF8;
}

.eq-header-title {
    display: flex;
    align-items: center;
    gap: 15px;
}

.eq-header-title img {
    width: 26px;
    height: 26px;
}

.eq-header-title h3 {
    color: #6A00A7;
    font-size: 22px;
    font-weight: 700;
    margin: 0;
}

.eq-header-tag {
    background: #FFF;
    border: 1px solid #E8DEF8;
    color: #002955;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 15px;
    border-radius: 20px;
}

.eq-scroll-area {
    flex-grow: 1;
    overflow-y: auto;
    padding-right: 15px;
}

.eq-scroll-area::-webkit-scrollbar {
    width: 8px;
}
.eq-scroll-area::-webkit-scrollbar-track {
    background: #F0F0F0;
    border-radius: 10px;
}
.eq-scroll-area::-webkit-scrollbar-thumb {
    background: #D5C2ED;
    border-radius: 10px;
}

/* =========================================
   6. TARJETAS DE DISPOSITIVOS (CORREGIDAS)
========================================= */
.eq-devices-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
}

.eq-device-card {
    background: #FFF;
    border: 1.5px solid #E8DEF8;
    border-radius: 16px;
    text-align: center;
    overflow: hidden; /* Esto mantiene los bordes curvos limpios */
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
}

.eq-device-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(106, 0, 167, 0.1);
}

.eq-device-img {
    background: #E2D4F0; /* LILA MÁS OSCURO COMO PEDISTE PARA NOTAR EL CAMBIO */
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 25px; 
    margin-bottom: 0; 
}

.eq-device-img img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.eq-device-name {
    background: #FFF;
    color: #6A00A7;
    font-size: 15px;
    font-weight: 800;
    margin: 0;
    padding: 20px 10px;
    text-transform: uppercase;
}

.eq-no-devices {
    color: #002955;
    font-size: 18px;
    text-align: center;
    margin-top: 50px;
}


/* =========================================
   7. RESPONSIVE MÓVIL Y TABLET
========================================= */
@media (max-width: 991px) {
    /* Hero Móvil */
    .equipamiento-hero-section {
        padding: 20px 15px; 
    }
    .equipamiento-hero-card {
        flex-direction: column;
        padding: 40px 20px 0 20px;
        text-align: center;
        overflow: hidden !important; 
        min-height: auto;
        background: #F7F7F7; 
        box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.05);
    }
    .equipamiento-hero-card::before {
        display: none;
    }
    .equipamiento-hero-text {
        width: 100%;
    }
    .equipamiento-hero-text h2 br,
    .equipamiento-hero-text p br {
        display: none !important; 
    }
    .equipamiento-hero-text h2 {
        font-size: 30px !important;
    }
    .equipamiento-hero-text p {
        font-size: 15px !important;
        margin-top: 15px;
    }
    .equipamiento-hero-image {
        position: relative; 
        top: auto;
        right: auto;
        transform: none;
        width: calc(100% + 40px);
        margin-left: -70px;
        margin-right: -20px;
        height: auto;
        margin-top: -30px;
    }
    .equipamiento-hero-image img {
        width: 100%;
        height: auto;
        object-fit: cover;
        object-position: center bottom;
        display: block;
    }

    /* Layout Móvil */
    .equipamiento-layout-wrapper { 
        flex-direction: column; 
    }
    .equipamiento-sidebar { 
        width: 100%; 
        position: relative; 
        top: 0; 
    }
    .equipamiento-sidebar-card { 
        display: none; 
    }
    
    /* Selector Móvil */
    .eq-mobile-dropdown-container { 
        display: flex; 
        flex-direction: column; 
        align-items: center; 
        margin-bottom: 25px; 
        width: 100%; 
    }
    .eq-mobile-sidebar-title { 
        color: #002955; 
        font-size: 18px; 
        font-weight: 700; 
        margin: 0 0 15px 0; 
        text-transform: uppercase; 
        font-family: 'Ubuntu', sans-serif; 
        letter-spacing: 0.5px;
    }
    .eq-mobile-custom-select {
        width: 100%; 
        max-width: 400px; 
        background: #FFF; 
        border: 1px solid #002955; 
        border-radius: 12px;
        padding: 16px 20px; 
        display: flex; 
        justify-content: space-between; 
        align-items: center;
        font-size: 16px; 
        color: #002955; 
        font-weight: 700; 
        cursor: pointer; 
        box-sizing: border-box;
        font-family: 'Ubuntu', sans-serif; 
        box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    }
    .eq-mobile-select-left { 
        display: flex; 
        align-items: center; 
        gap: 12px; 
    }
    .eq-selected-icon-wrapper { 
        display: inline-flex; 
        align-items: center; 
        justify-content: center; 
    }
    .eq-selected-icon-wrapper img { 
        width: 24px; 
        height: 24px; 
        object-fit: contain; 
        filter: invert(15%) sepia(85%) saturate(5432%) hue-rotate(278deg) brightness(78%) contrast(113%); 
    }

    /* Modal Bottom Sheet */
    .eq-bottom-sheet-overlay { 
        display: block; 
        position: fixed; 
        top: 0; 
        left: 0; 
        width: 100%; 
        height: 100%; 
        background: rgba(0,0,0,0.5); 
        z-index: 999998; 
        opacity: 0; 
        visibility: hidden; 
        transition: all 0.3s ease; 
    }
    .eq-bottom-sheet-overlay.show { 
        opacity: 1; 
        visibility: visible; 
    }
    .eq-bottom-sheet-menu { 
        display: flex; 
        flex-direction: column; 
        position: fixed; 
        bottom: -100%; 
        left: 0; 
        width: 100%; 
        background: #FFF; 
        border-radius: 20px 20px 0 0; 
        z-index: 999999; 
        padding: 15px 25px 40px 25px; 
        box-sizing: border-box; 
        transition: bottom 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); 
        max-height: 85vh; 
        box-shadow: 0 -5px 25px rgba(0,0,0,0.1); 
    }
    .eq-bottom-sheet-menu.show { 
        bottom: 0; 
    }
    .eq-bs-handle { 
        width: 45px; 
        height: 5px; 
        background: #D9D9D9; 
        border-radius: 3px; 
        margin: 0 auto 20px auto; 
        flex-shrink: 0; 
    }
    .eq-bs-scroll-area { 
        overflow-y: auto; 
        width: 100%; 
        padding-right: 5px; 
    }
    .eq-bs-list { 
        list-style: none; 
        padding: 0; 
        margin: 0; 
    }
    .eq-bs-list li { 
        border-bottom: 1px solid #F0F0F0; 
    }
    .eq-bs-list li:last-child { 
        border-bottom: none; 
    }
    .eq-bs-item { 
        display: flex; 
        align-items: center; 
        padding: 20px 0; 
        color: #002955; 
        font-size: 16px; 
        font-weight: 700; 
        text-decoration: none; 
        font-family: 'Ubuntu', sans-serif;
    }
    .eq-bs-item .eq-icon { 
        margin-right: 18px; 
        display: flex; 
        align-items: center; 
        justify-content: center; 
        width: 30px;
    }
    .eq-bs-item .eq-icon img { 
        width: 24px; 
        height: 24px; 
        object-fit: contain; 
        filter: invert(15%) sepia(85%) saturate(5432%) hue-rotate(278deg) brightness(78%) contrast(113%); 
    }

    /* Grilla Ajustes Móviles */
    .equipamiento-grid-card { 
        height: auto; 
        min-height: 400px; 
        padding: 20px 15px; 
    }
    .eq-content-header { 
        flex-direction: column; 
        align-items: flex-start; 
        gap: 15px; 
    }
    .eq-header-tags-container { 
        justify-content: flex-start; 
        width: 100%; 
    }
    .eq-header-title h3 {
        color: #6A00A7;
        font-size: 16px !important;
        font-weight: 700;
        margin: 0;
    }
}