.carousel .thumbnail .item .content .littleTitle{
    color: var(--text-color-second);
    text-shadow: 0 5px 10px #0004;
}

.nav-option{
    color: var(--text-color-second);
}

.content{
    display: grid;
    grid-template-columns: 2fr 1fr; /* Define dos columnas, la primera ocupa 3 fracciones y la segunda 1 fracción */
}

.left{
    padding: 20px; /* Relleno de 20 píxeles alrededor del contenido */
}

.right{
    padding: 20px; /* Relleno de 20 píxeles alrededor del contenido */
}

.carousel .list .item .content .right{ /* Contenedor de la imagen en el lado derecho */
    display: flex; /* Utiliza un diseño flexible */
    align-items: flex-start;   /* alinea arriba */
    justify-content: flex-start; /* a la izquierda */
}

.carousel .list .item .content .right img{ /* Imagen dentro del contenedor derecho */
    width: 240px;   /* ajusta el tamaño que quieras */
    height: auto;   /* evita estirarlo */
    object-fit: contain; /* Mantiene la proporción de la imagen */
}

.carousel{ /* Carousel principal */
    width: 100vw; /* Ancho completo de la ventana gráfica */
    height: 100vh; /* Alto completo de la ventana gráfica */
    overflow: hidden; /* Oculta el contenido que desborda el contenedor */
    position: relative; /* Posicionamiento relativo para los elementos hijos */
}

.carousel .list .item{ /* Elementos individuales del carrusel */
    position: absolute; /* Posicionamiento absoluto dentro del contenedor del carrusel */
    inset: 0 0 0 0; /* Posiciona el elemento en los cuatro lados del contenedor */
}

.carousel .list .item img{ /* Imagen dentro de cada elemento del carrusel */
    width: 100%; /* Ancho completo del contenedor padre */
    height: 100%; /* Alto completo del contenedor padre */
    object-fit: cover; /* La imagen cubre todo el contenedor, recortando si es necesario */
}

.carousel .list .item .content{ /* Contenido superpuesto en cada elemento del carrusel */
    position: absolute; /* Posicionamiento absoluto dentro del elemento del carrusel */
    top: 20%; /* Posiciona el contenido al 20% desde la parte superior */
    width: 1140px; /* Ancho fijo de 1140 píxeles */
    max-width: 80%; /* Ancho máximo del 80% del contenedor padre */
    left: 50%; /* Centra el contenido horizontalmente */
    transform: translateX(-50%); /* Ajusta la posición para centrar el contenido */
    box-sizing: border-box; /* Incluye el relleno y el borde en el ancho y alto total */
    color: #fff; /* Color del texto blanco */
    text-shadow: 0 5px 10px #0004; /* Sombra de texto para mejorar la legibilidad */
}

.carousel .list .item .content .author{ /* Autor del contenido */
    font-weight: bold; /* Fuente en negrita */
    letter-spacing: 10px; /* Espaciado entre letras de 10 píxeles */
}

.carousel .list .item .content .title{ /* Tema del contenido */
    font-weight: bold; /* Fuente en negrita */
    font-size: 5em; /* Tamaño de fuente de 5em */
    line-height: 1.3em; /* Altura de línea de 1.3em */
}
.carousel .list .item .content .topic{ /* Tema del contenido */
    font-weight: bold; /* Fuente en negrita */
    font-size: 3em; /* Tamaño de fuente de 5em */
    line-height: 1.3em; /* Altura de línea de 1.3em */
}

.carousel .list .item .content .topic{ /* Tema del contenido */
    color: var(--main-color); /* Color específico para el tema */
}

.carousel .list .item .content .buttons{ /* Contenedor de botones */
    display: grid; /* Utiliza un diseño de cuadrícula */
    grid-template-columns: repeat(2, 130px); /* Dos columnas de 130 píxeles cada una */
    grid-template-rows: 40px; /* Una fila de 40 píxeles */
    gap: 5px; /* Espacio de 5 píxeles entre los botones */
    margin-top: 20px; /* Margen superior de 20 píxeles */
}

.carousel .list .item .content button{ /* Estilos para los botones */
    border: none; /* Sin borde */
    background-color: #eee; /* Color de fondo gris claro */
    letter-spacing: 3px; /* Espaciado entre letras de 3 píxeles */
    font-family: Poppins; /* Fuente Poppins */
    font-weight: 500; /* Peso de fuente medio */
}

.carousel .list .item .content button:nth-child(2){ /* Estilos para el segundo botón */
    background-color: transparent; /* Fondo transparente */
    color: #eee; /* Color de texto gris claro */
    border: 1px solid #eee; /* Borde sólido gris claro */
}

.carousel .list .item:nth-child(1){ /* Primer elemento del carrusel */
    z-index: 1; /* Asegura que esté por encima de otros elementos */
}

.carousel .list .item:nth-child(1) .author, /* Autor del primer elemento */
.carousel .list .item:nth-child(1) .title, /* Título del primer elemento */
.carousel .list .item:nth-child(1) .topic, /* Tema del primer elemento */
.carousel .list .item:nth-child(1) .des, /* Descripción del primer elemento */
.carousel .list .item:nth-child(1) .buttons,
.carousel .list .item:nth-child(1) .content .right{ /* Botones del primer elemento */
    transform: translateY(50px); /* Desplaza el contenido 50 píxeles hacia abajo */
    filter: blur(20px); /* Aplica un desenfoque de 20 píxeles */
    opacity: 0; /* Hace el contenido completamente transparente */
    animation: showContent 0.5s 1s linear 1 forwards; /* Anima el contenido para que aparezca suavemente */
}

@keyframes showContent{ /* Define la animación llamada showContent */
    to{ /* Estado final de la animación */
        opacity: 1; /* Hace el contenido completamente opaco */
        filter: blur(0); /* Elimina el desenfoque */
        transform: translateY(0); /* Restaura la posición original */
    }
}

.carousel .list .item:nth-child(1) .title{ /* Título del primer elemento */
    animation-delay: 1.2s; /* Retrasa la animación del título 1.2 segundos */
}

.carousel .list .item:nth-child(1) .topic{ /* Tema del primer elemento */
    animation-delay: 1.4s; /* Retrasa la animación del tema 1.4 segundos */
}

.carousel .list .item:nth-child(1) .des{ /* Descripción del primer elemento */
    animation-delay: 1.6s; /* Retrasa la animación de la descripción 1.6 segundos */
}

.carousel .list .item:nth-child(1) .buttons{ /* Botones del primer elemento */
    animation-delay: 1.8s; /* Retrasa la animación de los botones 1.8 segundos */
}

.carousel.next .list .item:nth-child(1) img{ /* Imagen del primer elemento al avanzar el carrusel */
    width: 150px; /* Ancho reducido a 150 píxeles */
    height: 220px; /* Alto reducido a 220 píxeles */
    position: absolute; /* Posicionamiento absoluto */
    left: 50%; /* Centrado horizontalmente */
    bottom: 50px; /* Posicionado a 50 píxeles desde la parte inferior */
    border-radius: 20px; /* Bordes redondeados de 20 píxeles */
    animation: showImage 0.5s linear 1 forwards; /* Anima la imagen para que se reduzca suavemente */
}

@keyframes showImage{ /* Define la animación llamada showImage */
    to{ /* Estado final de la animación */
        width: 100%; /* Ancho completo del contenedor padre */
        height: 100%; /* Alto completo del contenedor padre */
        left: 0; /* Posicionado a la izquierda */
        bottom: 0; /* Posicionado en la parte inferior */
        border-radius: 0; /* Sin bordes redondeados */
    }
}

.carousel.next .thumbnail .item:nth-last-child(1){
    width: 0;
    overflow: hidden;
    animation: showThumbnail .5s linear 1 forwards;
}

@keyframes showThumbnail{
    to{
        width: 150px;
    }
}

.carousel.next .thumbnail{
    transform: translateX(150px);
    animation: transformThumbnail .5s linear 1 forwards;
}

@keyframes transformThumbnail{
    to{
        transform: translateX(0);
    }
}

.carousel.prev .list .item:nth-child(2){
    z-index: 2;
}

.carousel.prev .list .item:nth-child(2) img{
    position: absolute;
    bottom: 0;
    left: 0;
    animation: outImage 0.5s linear 1 forwards;
}

@keyframes outImage{
    to{
        width: 150px;
        height: 220px;
        border-radius: 20px;
        left: 50%;
        bottom: 50px;
    }
}

.carousel.prev .thumbnail .item:nth-child(1){
    width: 0;
    overflow: hidden;
    opacity: 0;
    animation: showThumbnail 0.5s linear 1 forwards;
}

.carousel.prev .list .item:nth-child(2) .author,
.carousel.prev .list .item:nth-child(2) .title,
.carousel.prev .list .item:nth-child(2) .topic,
.carousel.prev .list .item:nth-child(2) .des,
.carousel.prev .list .item:nth-child(2) .buttons{
    animation: contentOut 1.5s linear forwards;
}

@keyframes contentOut{
    to{
        transform: translateY(-150px);
        filter: blur(20px);
        opacity: 0;
    }
}

.carousel.next .arrows button,
.carousel.prev .arrows button{
    pointer-events: none;
}

.arrows{
    position: absolute;
    top: 80%;
    right: 52%;
    width: 300px;
    max-width: 30%;
    display: flex;
    gap: 10px;
    align-items: center;
}

.arrows button{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #eee4;
    border: none;
    font-family: monospace;
    color: #fff;
    font-weight: bold;
    font-size: large;
    transition: .5s;
    z-index: 100;
}

.arrows button:hover{
    background-color: #eee;
    color: #555;
}

.thumbnail{
    position: absolute;
    bottom: 50px;
    left: 50%;
    width: max-content;
    z-index: 100;
    display: flex;
    gap: 20px;
}

.thumbnail .item{
    width: 150px;
    height: 220px;
    flex-shrink: 0;
    position: relative;
}

.thumbnail .item img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
}

.thumbnail .item .content{
    position: absolute;
    bottom: 10px;
    left: 10px;
    right: 10px;
}

.thumbnail .item .content .title{
    font-weight: bold;
    text-shadow: 0 5px 10px #0004;
}

.time{
    width: 0%;
    height: 5px;
    background-color: var(--main-color);
    position: absolute;
    z-index: 100;
}

.carousel.next .time,
.carousel.prev .time{
    width: 100%;
    animation: timeRunning 2s linear 1 forwards;
}

@keyframes timeRunning{
    to{
        width: 0;
    }
}

@media screen and (max-width: 678px) {
    .carousel .list .item .content{
        padding-right: 0;
    }
    .carousel .list .item .content .title{
        font-size: 30px;
    }
}