/* carousel.css — Carrusel de categorías (Brujería, Oráculos) */

/* ── Contenedor principal ─────────────────────────────── */
.witchcraft-container,
.oracles-container {
    padding-bottom: 4rem;
}

.witchcraft-container > .section-title,
.oracles-container > .section-title {
    padding: 3.5rem 2rem 2.5rem;
    margin-bottom: 0;
}

/* ── Carrusel wrapper ─────────────────────────────────── */
.witchcraft-carousel,
.oracle-carousel {
    position: relative;
    padding: 0 64px;
    max-width: 1400px;
    margin: 0 auto;
    user-select: none;
}

/* Track container — overflow oculto */
.carousel-track-container {
    overflow: hidden;
    border-radius: var(--radius-lg);
}

/* Track — flex row de slides */
.carousel-track {
    display: flex;
    gap: 16px;
    list-style: none;
    margin: 0; padding: 0;
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: grab;
    will-change: transform;
}
.carousel-track:active { cursor: grabbing; }

/* ── Slides ───────────────────────────────────────────── */
.carousel-slide { flex: 0 0 auto; }

.carousel-slide::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(
        to top,
        rgba(0,0,0,0.88) 0%,
        rgba(0,0,0,0.3)  50%,
        rgba(0,0,0,0.05) 100%
    );
    z-index: 1;
    transition: background 0.3s ease;
}

.carousel-slide:hover {
    transform: translateY(-4px) scale(1.02);
    border-color: rgba(168,85,247,0.5);
    box-shadow: 0 16px 40px rgba(0,0,0,0.6), 0 0 0 1px rgba(168,85,247,0.3);
    z-index: 2;
}

.carousel-slide:hover::before {
    background: linear-gradient(
        to top,
        rgba(76,29,149,0.85) 0%,
        rgba(0,0,0,0.25)     50%,
        rgba(0,0,0,0.02)     100%
    );
}

/* Enlace de fondo (área clickable) */
.slide-link {
    position: absolute; inset: 0; z-index: 2;
}

/* Título de la slide */
.slide-title {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    z-index: 3;
    font-family: 'Cinzel', serif;
    font-size: clamp(0.75rem, 1.2vw, 0.95rem);
    font-weight: 600;
    color: #fff;
    padding: 1rem 1rem 1.1rem;
    line-height: 1.3;
    text-decoration: none;
    display: block;
    text-align: center;
    letter-spacing: 0.03em;
    transition: color 0.2s ease;
}
.carousel-slide:hover .slide-title { color: #d8b4fe; }

/* Número / índice decorativo */
.slide-number {
    position: absolute;
    top: 12px; left: 14px;
    z-index: 3;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: rgba(255,255,255,0.45);
    font-family: 'Inter', sans-serif;
}

/* ── Botones de navegación ────────────────────────────── */
.carousel-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    width: 48px; height: 48px;
    background: rgba(13,13,20,0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--border-hover);
    border-radius: 50%;
    color: var(--text);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: var(--transition);
    padding: 0;
}
.carousel-button:hover {
    background: var(--purple);
    border-color: var(--purple);
    box-shadow: 0 0 20px rgba(168,85,247,0.45);
    transform: translateY(-50%) scale(1.08);
}
.carousel-button.left  { left: 8px; }
.carousel-button.right { right: 8px; }
.carousel-button:disabled {
    opacity: 0.2;
    cursor: default;
    pointer-events: none;
}

/* ── Dots / bullets ───────────────────────────────────── */
.carousel-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 1.75rem;
}
.carousel-dot {
    width: 8px; height: 8px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 50%;
    cursor: pointer;
    transition: var(--transition);
}
.carousel-dot.active, .carousel-dot:hover {
    background: var(--purple);
    border-color: var(--purple);
    transform: scale(1.35);
}

/* ── Responsivo ───────────────────────────────────────── */
@media (max-width: 1200px) {
    .carousel-slide { flex: 0 0 auto; } /* 3 visibles */
}
@media (max-width: 900px) {
    .carousel-slide { flex: 0 0 auto; }      /* 2 visibles */
    .witchcraft-carousel, .oracle-carousel { padding: 0 52px; }
}
@media (max-width: 560px) {
    .carousel-slide { flex: 0 0 auto; }           /* 1 visible */
    .witchcraft-carousel, .oracle-carousel { padding: 0 48px; }
    .carousel-button { width: 40px; height: 40px; font-size: 1.3rem; }
}