/* SERIES */

.series{
    margin-bottom: 70px;
    }
    
    .series .contenedor-carousel-series{
        width: 100%;
        padding: 20px 0;
       /* overflow: visible; */
      /*   scroll-behavior: smooth; */
    }
    
    .series .contenedor-carousel-series .carousel-series{
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* 3 columnas, con tamaño de una fraccion, es decir, cada columna abarcará lo mismo */
        gap: 14px; /* es el espaciado entre cada elemento de la grid*/
    
    }
    
    .series .contenedor-carousel-series .carousel-series .serie {
        min-width: 20%;
        box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
        position: relative; /* Necesario para que funcione z-index */
        transition: transform 0.3s ease-in-out, z-index 0.1s; /* Suaviza la animación */
        transform-origin: center;
        display: inline-block;
        z-index: 1; /* Nivel base */
    }
    
    .series .contenedor-carousel-series .carousel-series .serie:hover {
        transform: scale(1.1); /* Aumenta un 10% el tamaño */
        z-index: 10; /* Se coloca por encima de los demás */
    }
    
    .series .contenedor-carousel-series .carousel-series .serie p {
        display: none;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        text-align: center;
        background: rgba(0, 0, 0, 0.7); /* Fondo oscuro semitransparente */
        color: white;
        padding: 5px;
        font-size: 22px;
        font-weight: bold;
        cursor: pointer;
        z-index: 3; /* Se coloca arriba del iframe */
    }
    
    .series .contenedor-carousel-series .carousel-series .serie p:hover {
        background: rgba(84, 10, 6, 0.7); /* Fondo oscuro semitransparente */
    }
    
    .series .contenedor-carousel-series .carousel-series .serie:hover p {
        display: block;

    }
    
    .serie iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: none; /* Ocultar al inicio */
        z-index: 2; /* El iframe queda debajo del texto */
    }
    
    .series .contenedor-carousel-series .carousel-series .serie img {
        width: 100%;
        height: 360px;
        vertical-align: top;

    }
    
    @media screen and (max-width: 800px) {
        .series .contenedor-carousel-series .carousel-series .serie img {
            width: 100%;
            height: 90px;
            vertical-align: top;
    
        }

        .series .contenedor-carousel-series .carousel-series .serie p {
            display: none;
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            text-align: center;
            background: rgba(0, 0, 0, 0.7); /* Fondo oscuro semitransparente */
            color: white;
            padding: 5px;
            font-size: 11px;
            font-weight: bold;
            cursor: pointer;
            z-index: 3; /* Se coloca arriba del iframe */
        }
    }