/* css/style.css */

/* --- ESTILOS DARK MODE ZINE --- */
.font-zine { font-family: 'Special Elite', monospace; }
.font-title { font-family: 'Inter', sans-serif; font-weight: 900; text-transform: uppercase; letter-spacing: -0.02em; }
.zine-spread {
    background-color: #1a1a1a;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    border: 1px solid #333;
}

/* --- NUEVO: FONDO ANIMADO (ESPIRAL) --- */
body {
    font-family: 'Inter', sans-serif;
    background-color: #111111; /* Fondo base */
    /* Capa 1: Textura de ruido estático (anterior) */
   background-image: radial-gradient(circle, transparent, rgba(0,0,0,0.5));
    position: relative;
    overflow-x: hidden;
    z-index: 0;
}
/* Capa 2: Espiral animado (detrás) */
body::before {
    content: '';
    position: fixed;
    top: -50vh; left: -50vw;
    width: 200vw;
    height: 200vh;
    z-index: -1; /* Detrás del contenido */
    background-image: conic-gradient(
        from 0deg,
        #000000 0deg 90deg, 
        #080808 90deg 180deg, 
        #000000 180deg 270deg, 
        #080808 270deg 360deg
    );
    animation: spin 60s linear infinite;
    opacity: 0.3; /* Sutil */
}
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* --- ESTILOS CARRUSEL --- */
.carousel {
    /* El contenedor que oculta el overflow */
    overflow: hidden;
    /* Evita que el usuario seleccione el texto mientras se mueve */
    user-select: none;
    /* Añadimos un degradado 'fade' en los bordes */
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.carousel-track {
    /* Contenedor que se mueve. Usamos gap para el espaciado. */
    display: flex;
    gap: 1rem; /* 16px de espacio entre items */
    
    /* La animación: 30s de duración, lineal, infinita */
    /* Ajusta '30s' a '60s' si quieres que vaya más lento */
    animation: scroll 30s linear infinite;
}

/* Pausar la animación al pasar el ratón por encima */
.carousel:hover .carousel-track {
    animation-play-state: paused;
}
/* La animación que mueve el track */
@keyframes scroll {
    from {
        transform: translateX(0);
    }
    to {
        /* Se mueve exactamente el 50% (la longitud del primer set de imágenes) */
        transform: translateX(-50%);
    }
}

/* El item individual del carrusel */
.carousel-item {
    /* Los items ya no necesitan snap, solo un ancho fijo */
    transition: transform 0.9s ease, opacity 0.3s ease;
    cursor: pointer;
    opacity: 0.8;
    width: 80%; /* Ancho en móvil */
    flex-shrink: 0;
}

@media (min-width: 768px) {
    .carousel-item { width: 60%; }
}
.carousel-item:hover {
    transform: scale(1.03);
    opacity: 1;
}
.carousel-item:active {
    transform: scale(0.98);
}
.carousel::-webkit-scrollbar { display: none; }
.carousel { -ms-overflow-style: none; scrollbar-width: none; }

/* --- NUEVO: ESTILOS LIGHTBOX AVANZADO --- */
.lightbox {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    -webkit-backdrop-filter: blur(10px); /* Desenfoque de fondo */
    backdrop-filter: blur(10px);
}
.lightbox.show {
    opacity: 1;
    visibility: visible;
}
/* La imagen deja espacio para las flechas */
.lightbox img {
    max-width: 80vw;
    max-height: 90vh;
    box-shadow: 0 0 40px rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    user-select: none; /* Evita seleccionar la imagen */
    cursor: default; /* Cursor normal en la imagen */
}

/* Botón de Cierre (X) */
.lightbox-close {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    font-size: 3rem;
    color: #aaa;
    background: none;
    border: none;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s ease;
}
.lightbox-close:hover { color: #fff; }

/* Flechas de Navegación */
.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 3rem;
    color: #aaa;
    background: rgba(0,0,0,0.2);
    border: none;
    cursor: pointer;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    user-select: none;
    transition: all 0.2s ease;
}
.lightbox-nav:hover {
    color: #fff;
    background: rgba(0,0,0,0.5);
}
.lightbox-nav.prev { left: 1rem; }
.lightbox-nav.next { right: 1rem; }

/* --- BOTONES DARK MODE --- */
.btn-comprar { transition: all 0.3s ease; transform: scale(1); }
.btn-comprar:hover { transform: scale(1.05); box-shadow: 0 8px 25px -5px var(--tw-shadow-color); }
.btn-comprar:active { transform: scale(0.98); }
.btn-agotado { background-color: #444; color: #888; cursor: not-allowed; }
.btn-ver-drops { background-color: #f1f1f1; color: #111; }
.btn-ver-drops:hover { background-color: #ffffff; }