@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Montserrat:wght@300;400;500&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Montserrat', sans-serif; }


.carousel {
    width: 100vw; height: 100vh;
    /* margin-top: -50px; */
    overflow: hidden; position: relative;
}

/* --- BARRA DE TIEMPO --- */
.timeRunning {
    position: absolute; bottom: 0; left: 0; width: 0%; height: 10px;
    z-index: 1000;
    background: repeating-linear-gradient(
        45deg,
        #ffd700, #ffd700 10px,
        #ffffff 10px, #ffffff 20px
    );
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.6), 0 0 30px rgba(255, 255, 255, 0.4);
}
/* --- LOGICA FLUIDA (MOTOR PRINCIPAL) --- */
.carousel .list .item {
    position: absolute;
    inset: 0 0 0 0;
    /* Transición suave para todos los cambios de estado */
    transition: all 1s cubic-bezier(0.25, 1, 0.5, 1);
}

.carousel .list .item .bg-image {
    width: 100%; height: 100%;
    object-fit: cover;
    background-size: cover; background-position: center;
    position: absolute;
}


/* --- ESTADO 1: FONDO ACTIVO (Full Screen) --- */
.carousel .list .item:nth-child(1) {
    z-index: 1;
    top: 0; left: 0; width: 100%; height: 100%;
    border-radius: 0;
    transform: translate(0, 0) scale(1); /* Reset transform */
}
/* Efecto de zoom lento solo en el fondo */
.carousel .list .item:nth-child(1) .bg-image {
    animation: zoomSlow 25s infinite alternate ease-in-out;
}
/* Overlay visible solo en fondo */
.carousel .list .item:nth-child(1) .cinematic-overlay {
    opacity: 1; transition: opacity 1s;
}


/* --- ESTADO 2, 3, 4: EFECTO BARAJA DE NAIPES --- */

/* --- ESTADO 2, 3, 4: EFECTO ESCALERA VERTICAL (Columna Derecha) --- */

/* La carta principal (Siguiente en la lista) - ABAJO */
.carousel .list .item:nth-child(2) {
    z-index: 100;
    /* Posición base abajo a la derecha */
    top: auto; bottom: 50px; left: auto; right: 50px;
    width: 150px; height: 220px;
    
    /* border-radius: 15px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.6);
    border: 2px solid rgba(255,255,255,0.8); */
    
    /* Sin transformaciones raras, limpio */
    filter: brightness(1);
    transform: translateX(0);
}

/* La segunda carta - EN MEDIO */
.carousel .list .item:nth-child(3) {
    z-index: 90;
    /* Calculamos altura: 50px (base) + 220px (altura item) + 20px (espacio) = 290px */
    top: auto; bottom: 290px; left: auto; right: 50px;
    width: 150px; height: 220px;
    
    border-radius: 15px;
    border: 1px solid rgba(255,255,255,0.5);
    
    /* Un poco más oscura para dar profundidad */
    filter: brightness(0.7);
    /* Opcional: Un poco desplazada a la derecha para efecto escalera sutil, o déjala en 0 para columna recta */
    transform: translateX(0); 
}

/* La tercera carta - ARRIBA */
.carousel .list .item:nth-child(4) {
    z-index: 80;
    /* Calculamos altura: 290px + 220px + 20px = 530px */
    top: auto; bottom: 530px; left: auto; right: 50px;
    width: 150px; height: 220px;
    
    border-radius: 15px;
    border: 1px solid rgba(255,255,255,0.3);
    
    /* Más oscura */
    filter: brightness(0.4);
    opacity: 0.8;
}

/* Ocultar las demás (Items 5, 6...) para que no se salgan de la pantalla hacia arriba */
.carousel .list .item:nth-child(n+5) {
    /* Las mandamos muy arriba y las ocultamos */
    bottom: 800px; right: 50px;
    opacity: 0; pointer-events: none;
}

/* Limpieza de estilos internos */
.carousel .list .item:nth-child(n+2) .bg-image { animation: none; }
.carousel .list .item:nth-child(n+2) .cinematic-overlay { display: none; }
/* --- CAPA CINEMATICA --- */
.cinematic-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 5; pointer-events: none;
    backdrop-filter: blur(4px); 
    -webkit-backdrop-filter: blur(4px);
    background: rgba(2, 10, 25, 0.4); 
    box-shadow: inset 0 0 150px rgb(0, 0, 0);
    opacity: 0;
}


/* --- CONTENIDO DE TEXTO --- */
.list .item .content {
    position: absolute;
    top: 50%; left: 50%;
    /* Centrado perfecto */
    transform: translate(-50%, -50%);
    width: 80%; max-width: 900px;
    text-align: center;
    z-index: 60; /* Encima de nieve y miniaturas traseras */
    display: none;
}

/* IMPORTANTE: Asegurar que el texto no toque la zona de las cartas si la pantalla es pequeña */
@media screen and (min-width: 1024px) {
    .list .item .content {
        /* Dejamos un margen derecho para respetar las cartas */
        padding-right: 150px; 
    }
}

.list .item:nth-child(1) .content { display: block; }

.content .title {
    font-family: 'Cinzel', serif; font-size: 25px; font-weight: 700;
    line-height: 1.1; color:#ffd700;;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.9), 0 0 30px rgba(0, 150, 255, 0.6);
    margin-bottom: 25px;
    opacity: 0; animation: slideUp 0.8s ease-out 0.5s forwards;
} 




.content .name {
    font-family: 'Cinzel', serif; font-size: 70px; font-weight: 700;
    line-height: 1.1; color: #fff;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.9), 0 0 30px rgba(0, 150, 255, 0.6);
    margin-bottom: 25px;
    opacity: 0; animation: slideUp 0.8s ease-out 0.5s forwards;
}

.content .deco-line {
    height: 3px; width: 0; background: #fff; margin: 0 auto 30px auto;
    box-shadow: 0 0 10px #fff;
    opacity: 0; animation: growLine 0.8s ease-out 0.7s forwards;
}

.content .des {
    font-size: 19px; line-height: 1.6; color: #f0f0f0;
    max-width: 750px; margin: 0 auto; font-weight: 400;
    text-shadow: 0 2px 5px rgba(0,0,0,0.8);
    opacity: 0; animation: slideUp 0.8s ease-out 0.9s forwards;
}


/* --- ANIMACIONES --- */
@keyframes slideUp { from { opacity: 0; transform: translateY(40px); filter: blur(5px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } }
@keyframes growLine { from { width: 0; opacity: 0; } to { width: 100px; opacity: 1; } }
@keyframes zoomSlow { from { transform: scale(1); } to { transform: scale(1.15); } }
@keyframes runningTime { from { width: 0%; } to { width: 100%; } }


/* --- CONTROLES (Flechas) --- */
.arrows {
    position: absolute; bottom: 30px; 
    /* Las flechas ahora están a la izquierda de la baraja */
    right: 220px; 
    display: flex; gap: 15px; z-index: 1001;
}
.arrows button {
    width: 50px; height: 50px; border-radius: 50%;
    background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255,255,255,0.4);
    color: #fff; font-size: 20px; cursor: pointer; transition: 0.3s;
    backdrop-filter: blur(5px);
}
.arrows button:hover { background: #fff; color: #000; box-shadow: 0 0 20px #fff; }

/* RESPONSIVE */
@media screen and (max-width: 768px) {
    /* En móvil ocultamos el mazo o lo hacemos muy pequeño para priorizar texto */
    .carousel .list .item:nth-child(n+3) { display: none; }
    .carousel .list .item:nth-child(2) { 
        right: 10px; bottom: 10px; 
        width: 80px; height: 120px; 
    }
    .content .name { font-size: 40px; }
    .content .des { font-size: 16px; padding: 0; }
    .arrows { bottom: 20px; right: 50%; transform: translateX(50%); width: auto; }
    /* Quitamos el padding derecho en móvil */
    .list .item .content { padding-right: 0; left: 50%; width: 90%; }
}