/**
 * Estilos globales del proyecto (consolidado).
 * Alineado con .cursorrules: variables CSS, sin !important, mobile-first donde aplica.
 * Orden: Variables → Componentes → Utilidades → Keyframes.
 */

/* ========== 1. Variables (ya en principal.php :root, aquí solo refs) ========== */
/* Usar var(--primary), var(--industrial-gray), var(--border-dark), etc. */

/* ========== 2. Hero carrusel ========== */
.hero-carrusel {
    position: absolute;
    inset: 0;
    overflow: hidden;
}
.hero-carrusel-track {
    display: flex;
    width: 100%;
    height: 100%;
    animation: hero-carrusel-move 10s ease-in-out infinite;
}
.hero-carrusel-slide {
    position: relative;
    min-width: 100%;
    height: 100%;
    flex-shrink: 0;
}
.hero-carrusel-slide img {
    display: block;
    width: 100%;
    height: 100%;
}

/* ========== 3. Carrusel logos (marcas) ========== */
.logos-slider {
    display: flex;
    width: -webkit-fit-content;
    width: fit-content;
    animation: scroll-logos 40s linear infinite;
}
.logos-slider:hover {
    animation-play-state: paused;
}
.logos-slide {
    display: flex;
    gap: 2rem;
    padding: 0 1rem;
}
@media (min-width: 769px) {
    .logos-slide {
        gap: 4rem;
        padding: 0 2rem;
    }
}
.logo-item {
    min-width: 200px;
    width: 200px;
    height: 120px;
    flex-shrink: 0;
    background-color: var(--background-dark, #000);
    border: 1px solid var(--border-dark, #2a2a2a);
    display: flex;
    align-items: center;
    justify-content: center;
}
@media (min-width: 769px) {
    .logo-item {
        min-width: 280px;
        width: 280px;
        height: 140px;
    }
}
.logo-img {
    width: 160px;
    height: 85px;
    object-fit: contain;
    object-position: center;
    opacity: 0.95;
    transition: all 0.4s ease;
}
@media (min-width: 769px) {
    .logo-img {
        width: 220px;
        height: 100px;
    }
}
.logo-img-lg {
    width: 190px;
    height: 100px;
}
@media (min-width: 769px) {
    .logo-img-lg {
        width: 260px;
        height: 120px;
    }
}
.logo-item:hover .logo-img {
    opacity: 1;
    transform: scale(1.06);
}
.logo-item:hover {
    border-color: var(--primary);
    box-shadow: 0 0 25px var(--primary-glow, rgba(255, 107, 0, 0.4));
}
@media (max-width: 768px) {
    .logos-slider {
        animation-duration: 25s;
    }
}

/* ========== 4. Bloque pago (métodos de pago) ========== */
.pago-block {
    animation: pago-fade-in 0.6s ease-out both;
}
.pago-block--1 { animation-delay: 0.1s; }
.pago-block--2 { animation-delay: 0.2s; }
.pago-block--3 { animation-delay: 0.3s; }
.pago-block--4 { animation-delay: 0.4s; }
.pago-block:hover h3 {
    color: var(--primary);
    transition: color 0.3s ease;
}
.pago-block:hover p {
    color: var(--text-light);
    transition: color 0.3s ease;
}

/* ========== 5. Carrusel ofertas ========== */
.ofertas-slider {
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
    max-width: 100%;
    padding-bottom: 0.5rem;
    scroll-behavior: auto; /* auto para movimiento continuo; JS pone smooth solo en flechas */
}
.ofertas-slider.smooth-scroll {
    scroll-behavior: smooth;
}
.ofertas-slider::-webkit-scrollbar {
    display: none;
}
.oferta-card {
    flex-shrink: 0;
    min-width: 260px;
    width: 260px;
}
@media (min-width: 641px) {
    .oferta-card {
        min-width: 280px;
        width: 280px;
    }
}
.ofertas-slide {
    padding: 0 0.5rem;
}

/* ========== 6. Modal descripción ========== */
.modal-scroll::-webkit-scrollbar {
    width: 4px;
}
.modal-scroll::-webkit-scrollbar-track {
    background: transparent;
}
.modal-scroll::-webkit-scrollbar-thumb {
    background: var(--primary);
    border-radius: 4px;
}

/* ========== 7. Menú móvil (Cabecera) ========== */
#mobile-menu.show {
    animation: fadeIn 0.3s ease-in-out;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
#mobile-menu nav ul li a {
    position: relative;
    display: inline-block;
}
#mobile-menu nav ul li a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 3px;
    bottom: -5px;
    left: 50%;
    background-color: var(--primary);
    transition: all 0.3s ease;
    transform: translateX(-50%);
}
#mobile-menu nav ul li a:hover::after {
    width: 80%;
}

/* ========== 8. WhatsApp flotante ========== */
.animate-pulse-whatsapp {
    animation: pulse-whatsapp 2s infinite;
}

/* ========== 9. Keyframes (sin duplicar) ========== */
@keyframes hero-carrusel-move {
    0%, 22% { transform: translateX(0); }
    25%, 47% { transform: translateX(-100%); }
    50%, 72% { transform: translateX(-200%); }
    75%, 97% { transform: translateX(-300%); }
    100% { transform: translateX(0); }
}
@keyframes scroll-logos {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
@keyframes pago-fade-in {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes fadeIn {
    from {
        opacity: 0;
        -webkit-backdrop-filter: blur(0px);
        backdrop-filter: blur(0px);
    }
    to {
        opacity: 1;
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
    }
}
@keyframes modal-in {
    from { opacity: 0; transform: scale(0.95) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes pulse-whatsapp {
    0%, 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); }
    50% { box-shadow: 0 0 0 15px rgba(37, 211, 102, 0); }
}