/* ============================================
   SLIDER DE PROMOCIONES - RESPONSIVE OPTIMIZADO
   Versión mejorada con breakpoints completos
   Desktop → Tablet → Mobile
   Centrado perfecto y altura automática
============================================ */

/* ============================================
   AJUSTE DEL CONTENEDOR - Slider funcional correcto
============================================ */

.promociones-slider-container {
    position: relative !important;
    margin: 0 auto !important;
    overflow: hidden !important;
    height: auto !important;
    min-height: 0 !important;
}

.promociones-slider {
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
}

/* Slides inactivos ocultos con position absolute */
.promo-slide {
    display: none !important;
    opacity: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    visibility: hidden !important;
}

/* Slide activo visible con position relative */
.promo-slide.active {
    display: block !important;
    opacity: 1 !important;
    position: relative !important;
    visibility: visible !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Restablecer estilos originales de la tarjeta */
.banner-ofertas {
    /* Los estilos se manejan en slider-promociones.css y los breakpoints específicos */
}

.banner-contenido {
    /* Los estilos se manejan en slider-promociones.css y los breakpoints específicos */
}

/* ============================================
   DESKTOP (>1200px) - Diseño completo
============================================ */
@media (min-width: 1201px) {
    .promociones-slider-container {
        padding: 0 70px;
        max-width: 1450px;
        margin: 2rem auto;
    }

    .banner-ofertas {
        padding: 2.8rem 3.5rem;
        border-radius: 24px;
    }

    .banner-contenido {
        gap: 3rem;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .oferta-icono {
        width: 105px;
        height: 105px;
        font-size: 2.9rem;
    }

    .oferta-texto {
        flex: 1;
        padding: 0.5rem 2rem;
    }

    .oferta-texto h3 {
        font-size: 2.3rem;
        line-height: 1.35;
        margin-bottom: 1rem;
        letter-spacing: 1.5px;
        word-spacing: 3px;
    }

    .oferta-texto p {
        font-size: 1.3rem;
        line-height: 1.6;
        letter-spacing: 0.3px;
        word-spacing: 2px;
    }

    .oferta-contador {
        gap: 1.2rem;
        flex-direction: row;
    }

    .contador-item {
        min-width: 95px;
        padding: 1.2rem 1.4rem;
        border-radius: 18px;
    }

    .contador-numero {
        font-size: 2.1rem;
        margin-bottom: 0.45rem;
    }

    .contador-label {
        font-size: 0.78rem;
        letter-spacing: 2.2px;
    }

    .slider-arrow {
        width: 60px;
        height: 60px;
    }

    .slider-arrow i {
        font-size: 1.55rem;
    }
}

/* ============================================
   LAPTOP (993px - 1200px)
============================================ */
@media (min-width: 993px) and (max-width: 1200px) {
    .promociones-slider-container {
        padding: 0 60px;
        max-width: 1250px;
        margin: 2rem auto;
    }

    .banner-ofertas {
        padding: 2.4rem 2.8rem;
        border-radius: 22px;
    }

    .banner-contenido {
        gap: 2.6rem;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .oferta-icono {
        width: 95px;
        height: 95px;
        font-size: 2.5rem;
    }

    .oferta-texto {
        flex: 1;
        padding: 0.4rem 1.8rem;
    }

    .oferta-texto h3 {
        font-size: 2.1rem;
        line-height: 1.35;
        margin-bottom: 0.9rem;
        letter-spacing: 1.3px;
        word-spacing: 2.5px;
    }

    .oferta-texto p {
        font-size: 1.2rem;
        line-height: 1.55;
        letter-spacing: 0.3px;
        word-spacing: 2px;
    }

    .oferta-contador {
        gap: 1.1rem;
        flex-direction: row;
    }

    .contador-item {
        min-width: 88px;
        padding: 1.1rem 1.3rem;
        border-radius: 17px;
    }

    .contador-numero {
        font-size: 1.9rem;
        margin-bottom: 0.4rem;
    }

    .contador-label {
        font-size: 0.74rem;
        letter-spacing: 2.1px;
    }

    .slider-arrow {
        width: 54px;
        height: 54px;
    }

    .slider-arrow i {
        font-size: 1.4rem;
    }
}

/* ============================================
   TABLET (769px - 992px)
============================================ */
@media (min-width: 769px) and (max-width: 992px) {
    .promociones-slider-container {
        padding: 0 50px;
        max-width: 1050px;
        margin: 1.8rem auto;
    }

    .banner-ofertas {
        padding: 2rem 2.5rem;
        border-radius: 20px;
    }

    .banner-contenido {
        gap: 1.8rem;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .oferta-icono {
        width: 88px;
        height: 88px;
        font-size: 2.3rem;
        margin: 0 auto;
    }

    .oferta-texto {
        width: 100%;
        text-align: center;
        padding: 0.4rem 1.5rem;
    }

    .oferta-texto h3 {
        font-size: 1.9rem;
        line-height: 1.4;
        margin-bottom: 0.75rem;
        letter-spacing: 1px;
        word-spacing: 2px;
    }

    .oferta-texto p {
        font-size: 1.15rem;
        line-height: 1.6;
        letter-spacing: 0.2px;
        word-spacing: 1.5px;
    }

    .oferta-contador {
        gap: 0.9rem;
        flex-direction: row;
        width: 100%;
        justify-content: center;
        display: flex;
    }

    .contador-item {
        min-width: 80px;
        padding: 1rem 1.1rem;
        border-radius: 15px;
    }

    .contador-numero {
        font-size: 1.8rem;
        margin-bottom: 0.35rem;
    }

    .contador-label {
        font-size: 0.68rem;
        letter-spacing: 1.9px;
    }

    .slider-arrow {
        width: 50px;
        height: 50px;
    }

    .slider-arrow i {
        font-size: 1.28rem;
    }
}

/* ============================================
   TABLET PEQUEÑO (577px - 768px)
============================================ */
@media (min-width: 577px) and (max-width: 768px) {
    .promociones-slider-container {
        padding: 0 20px;
        margin: 1.5rem auto;
    }

    /* Ocultar flechas en tablet pequeño */
    .slider-arrow {
        display: none !important;
    }

    .banner-ofertas {
        padding: 2.2rem 2.4rem;
        border-radius: 18px;
    }

    .banner-contenido {
        flex-direction: column;
        text-align: center;
        gap: 1.5rem;
    }

    .oferta-icono {
        width: 82px;
        height: 82px;
        font-size: 2.15rem;
        margin: 0 auto;
    }

    .oferta-texto {
        width: 100%;
        padding: 0.3rem 1.4rem;
    }

    .oferta-texto h3 {
        font-size: 1.75rem;
        line-height: 1.4;
        margin-bottom: 0.7rem;
        letter-spacing: 0.8px;
        word-spacing: 2px;
    }

    .oferta-texto p {
        font-size: 1.1rem;
        line-height: 1.55;
        letter-spacing: 0.2px;
        word-spacing: 1.5px;
    }

    .oferta-contador {
        justify-content: center;
        gap: 0.75rem;
        width: 100%;
        flex-wrap: nowrap;
    }

    .contador-item {
        min-width: 72px;
        padding: 0.9rem 0.95rem;
        border-radius: 14px;
    }

    .contador-numero {
        font-size: 1.65rem;
        margin-bottom: 0.32rem;
    }

    .contador-label {
        font-size: 0.64rem;
        letter-spacing: 1.8px;
    }

    .promociones-dots {
        margin-top: 1.3rem;
        gap: 0.7rem;
    }

    .promo-dot {
        width: 11px;
        height: 11px;
    }

    .promo-dot.active {
        width: 32px;
    }
}

/* ============================================
   MÓVIL GRANDE (481px - 576px)
============================================ */
@media (min-width: 481px) and (max-width: 576px) {
    .promociones-slider-container {
        padding: 0 18px;
        margin: 1.3rem auto;
    }

    /* Ocultar flechas en móvil grande */
    .slider-arrow {
        display: none !important;
    }

    .banner-ofertas {
        padding: 2rem 2.2rem;
        border-radius: 16px;
    }

    .banner-contenido {
        flex-direction: column;
        text-align: center;
        gap: 1.3rem;
    }

    .oferta-icono {
        width: 76px;
        height: 76px;
        font-size: 1.95rem;
        margin: 0 auto;
    }

    .oferta-texto {
        width: 100%;
        padding: 0.3rem 1.2rem;
    }

    .oferta-texto h3 {
        font-size: 1.55rem;
        line-height: 1.4;
        margin-bottom: 0.65rem;
        letter-spacing: 0.6px;
        word-spacing: 1.5px;
    }

    .oferta-texto p {
        font-size: 1.02rem;
        line-height: 1.5;
        letter-spacing: 0.2px;
    }

    .oferta-contador {
        gap: 0.65rem;
        justify-content: center;
        width: 100%;
    }

    .contador-item {
        min-width: 68px;
        padding: 0.75rem 0.75rem;
        border-radius: 12px;
    }

    .contador-numero {
        font-size: 1.5rem;
        margin-bottom: 0.28rem;
    }

    .contador-label {
        font-size: 0.6rem;
        letter-spacing: 1.5px;
    }

    .promociones-dots {
        margin-top: 1.1rem;
        gap: 0.65rem;
    }

    .promo-dot {
        width: 10px;
        height: 10px;
    }

    .promo-dot.active {
        width: 28px;
    }
}

/* ============================================
   MÓVIL MEDIANO (401px - 480px)
============================================ */
@media (min-width: 401px) and (max-width: 480px) {
    .promociones-slider-container {
        padding: 0 16px;
        margin: 1.2rem auto;
    }

    /* Ocultar flechas en móvil mediano */
    .slider-arrow {
        display: none !important;
    }

    .banner-ofertas {
        padding: 1.8rem 1.8rem;
        border-radius: 15px;
    }

    .banner-contenido {
        flex-direction: column;
        text-align: center;
        gap: 1.1rem;
    }

    .oferta-icono {
        width: 70px;
        height: 70px;
        font-size: 1.75rem;
        margin: 0 auto;
    }

    .oferta-texto {
        width: 100%;
        padding: 0.25rem 1rem;
    }

    .oferta-texto h3 {
        font-size: 1.38rem;
        line-height: 1.4;
        margin-bottom: 0.55rem;
        letter-spacing: 0.5px;
        word-spacing: 1.5px;
    }

    .oferta-texto p {
        font-size: 0.94rem;
        line-height: 1.5;
        letter-spacing: 0.2px;
    }

    .oferta-contador {
        gap: 0.6rem;
        justify-content: center;
        width: 100%;
    }

    .contador-item {
        min-width: 62px;
        padding: 0.7rem 0.6rem;
        border-radius: 11px;
    }

    .contador-numero {
        font-size: 1.35rem;
        margin-bottom: 0.25rem;
    }

    .contador-label {
        font-size: 0.58rem;
        letter-spacing: 1.3px;
    }

    .promociones-dots {
        margin-top: 1rem;
        gap: 0.6rem;
    }

    .promo-dot {
        width: 9px;
        height: 9px;
    }

    .promo-dot.active {
        width: 26px;
    }
}

/* ============================================
   MÓVIL PEQUEÑO (361px - 400px)
============================================ */
@media (min-width: 361px) and (max-width: 400px) {
    .promociones-slider-container {
        padding: 0 14px;
        margin: 1.1rem auto;
    }

    /* Ocultar flechas en móvil pequeño */
    .slider-arrow {
        display: none !important;
    }

    .banner-ofertas {
        padding: 1.6rem 1.5rem;
        border-radius: 14px;
    }

    .banner-contenido {
        gap: 1rem;
    }

    .oferta-icono {
        width: 65px;
        height: 65px;
        font-size: 1.6rem;
        margin: 0 auto;
    }

    .oferta-texto {
        width: 100%;
        padding: 0.25rem 0.9rem;
    }

    .oferta-texto h3 {
        font-size: 1.25rem;
        line-height: 1.4;
        margin-bottom: 0.5rem;
        letter-spacing: 0.4px;
        word-spacing: 1.2px;
    }

    .oferta-texto p {
        font-size: 0.87rem;
        line-height: 1.45;
        letter-spacing: 0.15px;
    }

    .oferta-contador {
        gap: 0.52rem;
        justify-content: center;
        width: 100%;
    }

    .contador-item {
        min-width: 58px;
        padding: 0.6rem 0.52rem;
        border-radius: 10px;
    }

    .contador-numero {
        font-size: 1.25rem;
        margin-bottom: 0.2rem;
    }

    .contador-label {
        font-size: 0.54rem;
        letter-spacing: 0.9px;
    }

    .promociones-dots {
        margin-top: 0.9rem;
        gap: 0.55rem;
    }

    .promo-dot {
        width: 8px;
        height: 8px;
    }

    .promo-dot.active {
        width: 23px;
    }
}

/* ============================================
   MÓVIL MUY PEQUEÑO (≤360px)
============================================ */
@media (max-width: 360px) {
    .promociones-slider-container {
        padding: 0 12px;
        margin: 1rem auto;
    }

    /* Ocultar flechas en móvil muy pequeño */
    .slider-arrow {
        display: none !important;
    }

    .banner-ofertas {
        padding: 1.5rem 1.4rem;
        border-radius: 13px;
    }

    .banner-contenido {
        gap: 0.9rem;
    }

    .oferta-icono {
        width: 62px;
        height: 62px;
        font-size: 1.5rem;
        margin: 0 auto;
    }

    .oferta-texto {
        width: 100%;
        padding: 0.2rem 0.8rem;
    }

    .oferta-texto h3 {
        font-size: 1.15rem;
        line-height: 1.4;
        margin-bottom: 0.45rem;
        letter-spacing: 0.3px;
        word-spacing: 1px;
    }

    .oferta-texto p {
        font-size: 0.82rem;
        line-height: 1.4;
        letter-spacing: 0.1px;
    }

    .oferta-contador {
        gap: 0.45rem;
        justify-content: center;
        width: 100%;
    }

    .contador-item {
        min-width: 54px;
        padding: 0.55rem 0.48rem;
        border-radius: 9px;
    }

    .contador-numero {
        font-size: 1.18rem;
        margin-bottom: 0.16rem;
    }

    .contador-label {
        font-size: 0.52rem;
        letter-spacing: 0.75px;
    }

    .promociones-dots {
        margin-top: 0.8rem;
        gap: 0.5rem;
    }

    .promo-dot {
        width: 7px;
        height: 7px;
    }

    .promo-dot.active {
        width: 21px;
    }
}

/* ============================================
   AJUSTES POR ALTURA DE PANTALLA
============================================ */

/* Pantallas cortas en móvil */
@media (max-width: 480px) and (max-height: 700px) {
    .banner-ofertas {
        padding: 0.8rem 0.7rem !important;
    }

    .oferta-icono {
        width: 42px !important;
        height: 42px !important;
    }

    .contador-item {
        padding: 0.4rem 0.35rem !important;
    }

    .contador-numero {
        font-size: 1.1rem !important;
    }
}

/* Pantallas muy cortas */
@media (max-width: 360px) and (max-height: 640px) {
    .banner-ofertas {
        padding: 0.7rem 0.6rem !important;
    }

    .oferta-texto h3 {
        font-size: 0.85rem !important;
    }

    .oferta-texto p {
        font-size: 0.62rem !important;
    }

    .contador-numero {
        font-size: 1rem !important;
    }

    .contador-label {
        font-size: 0.45rem !important;
    }
}