/* Reset global */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

#slideshow {
    padding-top: 30px;
    height: 200px;
    width: 100%;
    background-color: #ffffff;
}

/* Estilo para el texto con sombra */
.deepshadow {
    text-align: center;
    color: #000033;
    letter-spacing: .1em;
    text-shadow: 
        0 0 1px #AED6F1, 
        0 0 2px #26C6DA, 
        0 0 3px #26C6DA, 
        0 0 4px #26C6DA, 
        0 0 5px #26C6DA, 
        0 0 6px #26C6DA, 
        0 0 7px #26C6DA, 
        0 0 8px #26C6DA, 
        0 0 9px #26C6DA, 
        0 0 10px #26C6DA, 
        0 0 11px #26C6DA, 
        0 0 12px #26C6DA, 
        0 0 13px #26C6DA, 
        0 0 14px #26C6DA, 
        0 0 15px #26C6DA, 
        0 0 16px #0288D1, 
        0 0 20px rgba(0, 0, 0, 0.9);
}

/* Estilos de subtítulos */
.sub-heading {
    padding-top: 50px;
    font-size: 1.125rem; /* Ajuste de tamaño de fuente usando rem para mejor adaptabilidad */
}

.sub-heading-two { font-size: 1rem; }
.sub-heading-three { font-size: .875rem; }
.sub-heading-four { font-size: .6875rem; }
.sub-heading-five { font-size: .5625rem; }
.sub-heading-six { font-size: .4375rem; }
.sub-heading-seven { font-size: .3125rem; }
.sub-heading-eight { font-size: .1875rem; }
.sub-heading-nine { font-size: .125rem; }

/* Contenedor principal del contenido */
.entire-content {
    margin: auto;
    width: 90%;
    max-width: 1200px; /* Añadido para mayor control en pantallas grandes */
    perspective: 2000px;
    position: relative;
    padding-top: 20px;
}

/* Estilo del carrusel de contenido */
.content-carrousel {
    width: 70%;
    position: absolute;
    float: right;
    animation: rotar 80s infinite linear;
    transform-style: preserve-3d;
}

/* Pausar la animación al pasar el ratón (opcional) */
.content-carrousel:hover {
    animation-play-state: paused;
    cursor: pointer;
}

.content-carrousel figure {
    width: 100%;
    height: 50px;
    position: absolute;
}

/* Animación de rotación en 3D */
@keyframes rotar {
    0% { transform: rotateY(0deg); }
    100% { transform: rotateY(360deg); }
}

/* Posicionamiento de figuras dentro del carrusel */
.content-carrousel figure {
    transform: rotateY(calc(360deg / 21 * var(--i))) translateZ(550px);
}

.content-carrousel figure:nth-child(1) { --i: 0; }
.content-carrousel figure:nth-child(2) { --i: 1; }
.content-carrousel figure:nth-child(3) { --i: 2; }
.content-carrousel figure:nth-child(4) { --i: 3; }
.content-carrousel figure:nth-child(5) { --i: 4; }
.content-carrousel figure:nth-child(6) { --i: 5; }
.content-carrousel figure:nth-child(7) { --i: 6; }
.content-carrousel figure:nth-child(8) { --i: 7; }
.content-carrousel figure:nth-child(9) { --i: 8; }
.content-carrousel figure:nth-child(10) { --i: 9; }
.content-carrousel figure:nth-child(11) { --i: 10; }
.content-carrousel figure:nth-child(12) { --i: 11; }
.content-carrousel figure:nth-child(13) { --i: 12; }
.content-carrousel figure:nth-child(14) { --i: 13; }
.content-carrousel figure:nth-child(15) { --i: 14; }
.content-carrousel figure:nth-child(16) { --i: 15; }
.content-carrousel figure:nth-child(17) { --i: 16; }
.content-carrousel figure:nth-child(18) { --i: 17; }
.content-carrousel figure:nth-child(19) { --i: 18; }
.content-carrousel figure:nth-child(20) { --i: 19; }
.content-carrousel figure:nth-child(21) { --i: 20; }

/* Sombra para las imágenes */
.shadow {
    position: absolute;
    box-shadow: 0px 0px 5px 0px #191D88;
    border-radius: .5px;
}

/* Estilo para las imágenes dentro del carrusel */
.content-carrousel img {
    image-rendering: auto;
    transition: transform 400ms, box-shadow 400ms;
    width: 100%;
    height: 100%;
}

/* Efecto de escala en el hover */
.content-carrousel img:hover {
    transform: scale(1.9);
    box-shadow: 0px 0px 15px 0px #191D88; /* Intensificación de la sombra en hover */
}

/* Ajustes para pantallas de hasta 880px de ancho */
@media (max-width: 880px) {
    .content-carrousel {
        width: 100%;
        height: auto; /* Ajuste para evitar desbordamiento */
    }

    .content-carrousel figure {
        height: 60px;
    }

    #slideshow {
        margin: 0;
        padding-top: 50px;
        background-color: #ffffff;
        box-sizing: border-box;
    }

    .content-carrousel figure {
        transform: rotateY(calc(360deg / 21 * var(--i))) translateZ(220px);
    }
}

/* Ajustes para pantallas de hasta 480px de ancho */
@media (max-width: 480px) {
    .content-carrousel {
        width: 100%;
        height: auto; /* Ajuste para evitar desbordamiento */
    }

    .content-carrousel figure {
        height: 50px;
    }

    #slideshow {
        padding-top: 40px; /* Ajuste menor para pantallas más pequeñas */
    }
}