/* ========================================================
   CARRUSEL DE PRODUCTOS PROMOCIONALES - VERSIÓN FORZADA
   Estilos con !important para evitar conflictos
   ======================================================== */

/* Contenedor principal del carrusel */
.carrusel-promocional {
    width: 100% !important;
    max-width: 1400px !important;
    background: #fdebd2 !important;
    border-radius: 24px !important;
    padding: 2rem 1.5rem !important;
    margin: 2rem auto !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
    overflow: hidden !important;
    display: block !important;
}

/* Título del carrusel */
.carrusel-promocional-titulo {
    font-size: clamp(1.25rem, 3vw, 1.75rem) !important;
    font-weight: 700 !important;
    color: #ff6f61 !important;
    text-align: center !important;
    margin-bottom: 1.5rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
}

.carrusel-promocional-titulo::before {
    content: "✨" !important;
    font-size: 1.5em !important;
}

/* Wrapper del carrusel con overflow */
.carrusel-promocional-wrapper {
    position: relative !important;
    width: 100% !important;
    overflow: hidden !important;
    mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent) !important;
    -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent) !important;
}

/* Track del carrusel (contiene los productos) */
.carrusel-promocional-track {
    display: flex !important;
    gap: 1.5rem !important;
    animation: carrusel-scroll 30s linear infinite !important;
    will-change: transform !important;
    padding: 0.5rem 0 !important;
}

/* Pausar animación al hacer hover */
.carrusel-promocional-wrapper:hover .carrusel-promocional-track {
    animation-play-state: paused !important;
}

/* Animación de scroll automático */
@keyframes carrusel-scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(-50% - 0.75rem));
    }
}

/* Card individual de producto - TAMAÑO FIJO */
.carrusel-producto-card {
    flex: 0 0 220px !important;
    min-width: 220px !important;
    max-width: 220px !important;
    width: 220px !important;
    height: auto !important;
    background: white !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer !important;
    text-decoration: none !important;
    color: inherit !important;
    display: flex !important;
    flex-direction: column !important;
}

.carrusel-producto-card:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
}

/* Imagen del producto - TAMAÑO CONTROLADO */
.carrusel-producto-imagen {
    width: 100% !important;
    height: 180px !important;
    max-height: 180px !important;
    min-height: 180px !important;
    object-fit: cover !important;
    background: #f5f5f5 !important;
    display: block !important;
}

/* Contenido del producto */
.carrusel-producto-info {
    padding: 1rem !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
    background: white !important;
}

.carrusel-producto-nombre {
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    color: #1a1a1a !important;
    line-height: 1.3 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    min-height: 2.6em !important;
    max-height: 2.6em !important;
}

.carrusel-producto-precio {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: #004e59 !important;
    margin-top: auto !important;
}

/* Placeholder para productos sin imagen */
.carrusel-producto-sin-imagen {
    width: 100% !important;
    height: 180px !important;
    max-height: 180px !important;
    min-height: 180px !important;
    background: linear-gradient(135deg, #f5f5f5 0%, #bdbdbd 100%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 3rem !important;
    color: #757575 !important;
}

/* ========== RESPONSIVE ========== */

/* Tablet */
@media (max-width: 768px) {
    .carrusel-promocional {
        padding: 1.5rem 1rem !important;
        margin: 1.5rem 0 !important;
        border-radius: 16px !important;
    }
    
    .carrusel-producto-card {
        flex: 0 0 160px !important;
        min-width: 160px !important;
        max-width: 160px !important;
        width: 160px !important;
    }
    
    .carrusel-producto-imagen,
    .carrusel-producto-sin-imagen {
        height: 140px !important;
        max-height: 140px !important;
        min-height: 140px !important;
    }
    
    .carrusel-producto-info {
        padding: 0.75rem !important;
    }
    
    .carrusel-producto-nombre {
        font-size: 0.875rem !important;
        min-height: 2.4em !important;
        max-height: 2.4em !important;
    }
    
    .carrusel-producto-precio {
        font-size: 1.1rem !important;
    }
    
    .carrusel-promocional-track {
        animation-duration: 25s !important;
    }
}

/* Mobile */
@media (max-width: 480px) {
    .carrusel-promocional {
        padding: 1.25rem 0.75rem !important;
        margin: 1rem 0 !important;
    }
    
    .carrusel-promocional-titulo {
        font-size: 1.1rem !important;
        margin-bottom: 1rem !important;
    }
    
    .carrusel-producto-card {
        flex: 0 0 140px !important;
        min-width: 140px !important;
        max-width: 140px !important;
        width: 140px !important;
    }
    
    .carrusel-producto-imagen,
    .carrusel-producto-sin-imagen {
        height: 120px !important;
        max-height: 120px !important;
        min-height: 120px !important;
    }
    
    .carrusel-producto-info {
        padding: 0.6rem !important;
    }
    
    .carrusel-producto-nombre {
        font-size: 0.8rem !important;
        -webkit-line-clamp: 2 !important;
    }
    
    .carrusel-producto-precio {
        font-size: 1rem !important;
    }
    
    .carrusel-promocional-track {
        gap: 1rem !important;
        animation-duration: 20s !important;
    }
}

/* ========== ACCESIBILIDAD ========== */

/* Reducir movimiento si el usuario lo prefiere */
@media (prefers-reduced-motion: reduce) {
    .carrusel-promocional-track {
        animation: none !important;
    }
    
    .carrusel-promocional-wrapper {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    .carrusel-producto-card {
        scroll-snap-align: start !important;
    }
}

/* Focus visible para navegación por teclado */
.carrusel-producto-card:focus-visible {
    outline: 3px solid #ff6f61 !important;
    outline-offset: 4px !important;
}

/* ========== EFECTO DE ENFOQUE AL LLEGAR DESDE CARRUSEL ========== */

/* Efecto de resaltado cuando se enfoca un producto desde el carrusel */
.producto-enfocado {
    animation: producto-pulse 1.5s ease-in-out 2 !important;
    position: relative !important;
    z-index: 10 !important;
}

@keyframes producto-pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 4px 16px rgba(255, 111, 97, 0.3);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 8px 32px rgba(255, 111, 97, 0.6);
    }
}

/* Ring effect adicional */
.producto-enfocado::before {
    content: '' !important;
    position: absolute !important;
    top: -4px !important;
    left: -4px !important;
    right: -4px !important;
    bottom: -4px !important;
    border: 3px solid #ff6f61 !important;
    border-radius: 16px !important;
    animation: ring-pulse 1.5s ease-out 2 !important;
    pointer-events: none !important;
}

@keyframes ring-pulse {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(1.1);
    }
}