/* ==========================================================================
   PFC 3D CAROUSEL ENGINE - V. UNIVERSAL
   ========================================================================== */

/* --- 1. Estructura Principal (Wrapper) --- */
.pfc-carousel-wrapper {
    position: relative;
    max-width: 1000px;
    margin: 60px auto;
    padding: 0 80px;
    box-sizing: border-box;
}

/* --- 2. Estilos Base (Comunes a todos los carruseles) --- */
.pfc-carousel-container {
    width: 100%;
    position: relative;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.pfc-carousel-scene {
    width: 100%;
    position: relative;
    height: 0;
    padding-top: 56.25%;
    perspective: 1200px;
    overflow: visible; /* Asegura que los paneles 3D no se corten */
}

.pfc-carousel {
    width: 100%; height: 100%; position: absolute; top: 0; left: 0;
    transform-style: preserve-3d;
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.pfc-carousel-panel {
    position: absolute; width: 96%; height: 96%; top: 2%; left: 2%;
    background: rgba(20, 20, 30, 0.85); /* Un poco más oscuro */
    border-radius: 15px; border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4);
    color: white; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    display: flex; justify-content: center; align-items: center;
    font-size: 2.5em; font-weight: bold; text-align: center;
    padding: 20px; box-sizing: border-box;
    -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
}

/* --- 3. Navegación Universal y VISIBLE --- */
.pfc-carousel-nav {
    position: absolute; top: 50%; left: 0; right: 0;
    transform: translateY(-50%);
    display: flex; justify-content: space-between;
    z-index: 10;
    pointer-events: none;
}

.pfc-carousel-nav button {
    pointer-events: all;
    /* ¡LA SOLUCIÓN! Hacemos los botones oscuros con flechas blancas */
    background-color: rgba(10, 10, 10, 0.5);
    color: #FFFFFF; /* Flechas BLANCAS para que contrasten con el fondo oscuro */
    border: 1px solid rgba(0, 0, 0, 0.3);
    width: 50px; height: 50px; border-radius: 50%;
    cursor: pointer; font-size: 24px; line-height: 50px; padding: 0;
    transition: background-color 0.3s, transform 0.2s;
}
.pfc-carousel-nav button:hover {
    background-color: rgba(0, 0, 0, 0.8);
    transform: scale(1.1);
}



/* --- 4. Estilos Específicos por Modal --- */


/* ==========================================================================
   MODAL 1: Carrusel Circular (style-carousel)
   ========================================================================== */
/* No necesita estilos extra, usa los base. */   



/* ==========================================================================
   MODAL 2: Cover Flow (style-coverflow)
   ========================================================================== */
.pfc-carousel-wrapper.style-coverflow { max-width: 800px; } /* Más ancho para que respire */
.pfc-carousel-container.style-coverflow .pfc-carousel { transform: translateZ(0); }
.pfc-carousel-container.style-coverflow .pfc-carousel-panel { transition: transform 0.6s cubic-bezier(0.77, 0, 0.175, 1), opacity 0.6s; }


/* ==========================================================================
   MODAL 3: Cubo Giratorio (style-cube) 
========================================================================== */   
.pfc-carousel-wrapper.style-cube { max-width: 700px; }  /* ¡Ahora puedes controlar el tamaño desde aquí! */
.pfc-carousel-container.style-cube .pfc-carousel { transform: translateZ(0); }
.pfc-carousel-container.style-cube .pfc-carousel-panel { width: 100%; height: 100%; left: 0; top: 0; }


/* ==========================================================================
   MODAL 4: Mazo de Cartas Acostado (style-flip)
========================================================================== */   
.pfc-carousel-wrapper.style-flip { max-width: 700px; }
.pfc-carousel-container.style-flip .pfc-carousel-scene { height: 0; padding-top: 75%; }


/* ==========================================================================
   MODAL 5: Mazo de Cartas de Pie (style-stack)
========================================================================== */   
.pfc-carousel-wrapper.style-stack { max-width: 800px; }
.pfc-carousel-container.style-stack .pfc-carousel-scene { perspective-origin: 50% 150%; padding-top: 75%; height: 0; }
.pfc-carousel-container.style-stack .pfc-carousel { transform: translateZ(0); }
.pfc-carousel-container.style-stack .pfc-carousel-panel { transition: transform 0.7s cubic-bezier(0.4, 0.0, 0.2, 1), opacity 0.7s; }




/* ==========================================================================
   MODAL 6: Filmstrip Deslizante (style-filmstrip)
   ========================================================================== */

/* Ajustamos el wrapper para darle más aire al efecto */
.pfc-carousel-wrapper.style-filmstrip {
    max-width: 1000px;
}

/* La escena necesita una perspectiva fuerte para este efecto */
.pfc-carousel-container.style-filmstrip .pfc-carousel-scene {
    perspective: 1500px;
    /* Evitamos que los paneles que se salen se vean cortados */
    overflow: hidden;
}

.pfc-carousel-container.style-filmstrip .pfc-carousel {
    transform-style: preserve-3d;
}

.pfc-carousel-container.style-filmstrip .pfc-carousel-panel {
    /* La transición es la clave de este efecto */
    transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.8s;
}



/* ==========================================================================
   MODAL 7: Giro Vertical con Desvanecimiento (style-v-flip)
   ========================================================================== */

.pfc-carousel-wrapper.style-v-flip {
    max-width: 1100px; /* Un buen tamaño estándar */
}

/* La escena necesita una perspectiva fuerte para que el giro se aprecie */
.pfc-carousel-container.style-v-flip .pfc-carousel-scene {
    perspective: 1500px;
}

.pfc-carousel-container.style-v-flip .pfc-carousel {
    transform: translateZ(0);
}

.pfc-carousel-container.style-v-flip .pfc-carousel-panel {
    /* La transición es la clave de este efecto */
    transition: transform 0.8s cubic-bezier(0.5, 0, 0.5, 1), opacity 0.8s;
    /* Por defecto, los paneles están ocultos hasta que JS los posicione */
    opacity: 0;
}



/* ==========================================================================
   MODAL 8: Zoom y Foco (style-zoom)
   ========================================================================== */

.pfc-carousel-wrapper.style-zoom {
    max-width: 1100px; /* Un buen tamaño para este efecto */
}

/* Para este efecto, no necesitamos una perspectiva 3D fuerte */
.pfc-carousel-container.style-zoom .pfc-carousel-scene {
    perspective: none;
}

.pfc-carousel-container.style-zoom .pfc-carousel {
    transform: none; /* El carrusel no se mueve, solo los paneles */
    transition: none; /* Sin transición en el contenedor principal */
}

.pfc-carousel-container.style-zoom .pfc-carousel-panel {
    /* La transición de cada panel es la clave */
    transition: transform 0.7s cubic-bezier(0.4, 0.0, 0.2, 1), opacity 0.7s;
    /* Por defecto, los paneles están ocultos */
    opacity: 0;
}



/* ==========================================================================
   MODAL 9: Cascada en Perspectiva (style-cascade)
   ========================================================================== */

.pfc-carousel-wrapper.style-cascade {
    max-width: 900px;
}

.pfc-carousel-container.style-cascade .pfc-carousel-scene {
    perspective: 1500px;
    /* Añadimos overflow hidden para que los paneles que se van no se vean a los lados */
    overflow: hidden;
}

.pfc-carousel-container.style-cascade .pfc-carousel {
    transform-style: preserve-3d;
    /* La transición se controla por panel, no en el carrusel general */
    transition: none;
}

.pfc-carousel-container.style-cascade .pfc-carousel-panel {
    /* ¡LA CLAVE! Animamos tanto el transform como la opacidad */
    transition: transform 0.8s cubic-bezier(0.6, 0, 0.2, 1), opacity 0.8s;
}



/* ==========================================================================
   MODAL 10: Cubo Desplegable (style-box)
   ========================================================================== */

.pfc-carousel-wrapper.style-box {
    max-width: 800px;
}

.pfc-carousel-container.style-box .pfc-carousel-scene {
    perspective: 2000px; /* Necesita mucha perspectiva para el efecto 3D */
    overflow: visible;  /* Permitimos que las caras se salgan al desplegarse */
}

.pfc-carousel-container.style-box .pfc-carousel {
    transform-style: preserve-3d;
    transition: transform 1s cubic-bezier(0.68, -0.55, 0.27, 1.55); /* Transición con rebote */
}

/* La clave de este efecto es que cada panel es una cara de un cubo */
.pfc-carousel-container.style-box .pfc-carousel-panel {
    /* Eliminamos el padding para que las imágenes ocupen toda la cara */
    padding: 0;
    /* Las caras también necesitan su propia transición */
    transition: transform 1s cubic-bezier(0.68, -0.55, 0.27, 1.55), opacity 0.8s;
}

/* Estado "desplegado" que controlaremos con JS */
.pfc-carousel-container.style-box .pfc-carousel.is-open .pfc-carousel-panel:nth-child(1) {
    transform: translateZ(500px) rotateY(0deg);
}
.pfc-carousel-container.style-box .pfc-carousel.is-open .pfc-carousel-panel:nth-child(2) {
    transform: translateY(-500px) rotateX(90deg);
}
.pfc-carousel-container.style-box .pfc-carousel.is-open .pfc-carousel-panel:nth-child(3) {
    transform: translateZ(-500px) rotateY(180deg);
}
.pfc-carousel-container.style-box .pfc-carousel.is-open .pfc-carousel-panel:nth-child(4) {
    transform: translateY(500px) rotateX(-90deg);
}



/* ==========================================================================
   MODAL 11: Cubo Explosivo (style-explode)
   ========================================================================== */

.pfc-carousel-wrapper.style-explode {
    max-width: 800px;
}

.pfc-carousel-container.style-explode .pfc-carousel-scene {
    perspective: 2000px;
    overflow: visible;
}

.pfc-carousel-container.style-explode .pfc-carousel {
    transform-style: preserve-3d;
    transition: transform 1s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.pfc-carousel-container.style-explode .pfc-carousel-panel {
    padding: 0;
    transition: transform 1s cubic-bezier(0.68, -0.55, 0.27, 1.55), opacity 0.8s;
}

/* Estado "explotado" que controlaremos con JS */
.pfc-carousel-container.style-explode .pfc-carousel.is-open .pfc-carousel-panel:nth-child(1) { /* Frontal */
    transform: translateZ(calc(var(--cube-size) * 1.5)) rotateY(0deg) scale(0.9);
}
.pfc-carousel-container.style-explode .pfc-carousel.is-open .pfc-carousel-panel:nth-child(2) { /* Superior */
    transform: rotateX(-90deg) translateZ(calc(var(--cube-size) * 1.5)) scale(0.9);
}
.pfc-carousel-container.style-explode .pfc-carousel.is-open .pfc-carousel-panel:nth-child(3) { /* Trasera */
    transform: rotateY(180deg) translateZ(calc(var(--cube-size) * 1.5)) scale(0.9);
}
.pfc-carousel-container.style-explode .pfc-carousel.is-open .pfc-carousel-panel:nth-child(4) { /* Inferior */
    transform: rotateX(90deg) translateZ(calc(var(--cube-size) * 1.5)) scale(0.9);
}



/* ==========================================================================
   5. Media Queries para Móviles
========================================================================== */ 
@media (max-width: 768px) {
    .pfc-carousel-wrapper { padding: 0 10px; }
    .pfc-carousel-nav button { width: 40px; height: 40px; line-height: 40px; font-size: 20px; }
}