.titulo {
    width: 134.9rem;  /* Ancho del rectángulo */
    height: 60px; /* Alto del rectángulo */
    position: relative;
    top: 22px;
    background-color: #0BA6A4; /* Color de fondo (azul) */
    margin: 50px auto; /* Centrar el rectángulo en la página */
}

.titulo {
    font-size: 24px;          /* Tamaño de la fuente */
    font-family: 'Segoe UI', sans-serif;  /* Fuente del texto */
    font-weight: bold;                    /* Grosor de la fuente (negrita) */
    color: #ffffff;           /* Color del texto */
    text-align: center;       /* Alinear el texto al centro */
    padding: 11px;            /* Espaciado interno (padding) alrededor del texto */
    margin-top: 5px;         /* Espacio en la parte superior */
    line-height: 1.5;         /* Altura de la línea para espaciado entre líneas */
    text-transform: uppercase;/* Transformar el texto a mayúsculas */
    letter-spacing: 2px;      /* Espaciado entre letras */
}

.BotonesFONDO {
    width: 134.9rem;  /* Ancho del rectángulo */
    height: 45px; /* Alto del rectángulo */
    position: relative;
    top: 82px;
    background-color: #81cac9; /* Color de fondo (azul) */
    margin: 50px auto; /* Centrar el rectángulo en la página */
}

/* VISUALIZADOR_______________________________________________________________ */
.titulo {
    text-align: center;
    margin-bottom: 20px;
}

.boton {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    background-color: transparent; /* Sin fondo */
    color: #1a73e8; /* Color del texto y el icono */
    text-decoration: none;
    font-size: 16px;
    border: none;
    cursor: pointer;
    font-weight: bold;
    margin: 5px; /* Añadimos margen para que los botones no estén pegados */
    position: relative; /* Cambiamos de absolute a relative para que se coloquen bien */
}

.boton i {
    margin-right: 8px; /* Espacio entre el icono y el texto */
}

.boton:hover {
    color: #0c47a1; /* Cambio de color al pasar el ratón */
}

.Botones {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.Botones button {
    background-color: transparent; /* Sin fondo para los botones */
    color: #1a73e8;
    font-size: 16px;
    font-weight: bold;
    border: none;
    cursor: pointer;
}

.Botones button i {
    margin-right: 8px; /* Espacio entre el icono y el texto */
}

.Botones button:hover {
    color: #0c47a1; /* Cambia de color al pasar el ratón */
}

.contenedor {
    display: none;
    text-align: center;
}

.contenedor img {
    display: block;
    margin: 40px auto;
    max-width: 80%;
    width: 1030px;
    height: auto; /* Asegura que la proporción de la imagen se mantenga */
}

#contenedor-cascada {
    max-width: 100%;
    height: auto; /* Asegura que el contenedor crezca con el contenido */
    overflow-y: visible; /* Elimina el scroll del contenedor si está presente */
    overflow-x: hidden;
    padding: 20px;

    margin-bottom: 20px;
}

#contenedor-cascada img {
    max-width: 100%;
    height: auto;
    display: block;
    pointer-events: none; /* Evitar que las imágenes capturen el scroll */
}


/* Deshabilitar scroll vertical en el contenedor de la imagen fuera de pantalla completa */
#pagina-unica {
    overflow-y: hidden; /* No permite scroll vertical fuera de pantalla completa */
    overflow-x: auto; /* Permite scroll horizontal si es necesario */

    margin-bottom: 20px;
}

#pagina-unica.fullscreen-mode {
    overflow-y: auto; /* Habilitar scroll vertical solo en pantalla completa */
    overflow-x: auto; /* Mantener scroll horizontal si es necesario */
    height: 100vh;    /* Asegurar que ocupe toda la altura de la pantalla completa */
}

.contenedor-imagen-unica {
    position: relative;
    display: inline-block;
    width: 1030px;
    top: 60px;
    right: -150px;
}

#pagina-unica img {
    max-width: 100%;
    height: auto;
}

#capitulo-select {
    position: relative;
    top: -50px; /* Alineamos el selector en la parte superior de la imagen */
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(255, 255, 255, 0.7); /* Fondo semitransparente para que se vea bien */
    color: rgb(0, 0, 0);
    padding: 5px 10px;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    z-index: 1; /* Para asegurarnos de que esté encima de la imagen */
}

#capitulo-select option {
    color: rgb(0, 0, 0); /* Color de texto de las opciones */
}


/* Pantalla completa */
.fullscreen-mode {
    overflow-x: hidden; /* Deshabilitar scroll horizontal del cuerpo en pantalla completa */
}








.navigation-container {
    position: relative;
    display: flex;
    justify-content: space-between;
    width: 90%;
    right: -60px;
    top: 3px;
}

.nav-button {
    padding: 5px 5px;
    font-size: 12px;
    font-weight: bold;
    color: white;
    background-color: #4a55a1;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.nav-button.prev {
    position: relative;
    width: 10rem;
    height: 4rem;
    top: -0.1rem;
    text-decoration: none; /* Elimina el subrayado */
    background-color: #4a55a1;
}

.nav-button.next {
    position: relative;
    width: 10rem;
    height: 4rem;
    top: -0.1rem;
    text-decoration: none; /* Elimina el subrayado */
    background-color: #1d8f8f;
}

.nav-button:hover {
    background-color: #333;
}




.Botones12 {
    width: 134.9rem;  /* Ancho del rectángulo */
    height: 60px; /* Alto del rectángulo */
    position: relative;
    background-color: #81cac9; /* Color de fondo (azul) */
    margin-top: 20px; /* Centrar el rectángulo en la página */
    margin-top: auto; /* Empuja el div hacia abajo */
    text-align: center;  /* Alineación del contenido */
    padding: 10px;       /* Espacio interno */
}
/* VISUALIZADOR_______________________________________________________________ */











































/* Adaptación para pantallas de hasta 2560px */
@media (max-width: 2560px) {
    .cuerpo {
        position: relative;
        top: 0px;
        left: 0px;
        margin-top: 0px;
        margin-bottom: 610px;
    }
    
    .cuerpo2 {
        position: relative;
        top: 10px;
        left: 0px;
        margin-top: 10px;
        margin-bottom: -550px;
    }
    
    .visualizador {
        position: relative;
        z-index: 200;
    }

    .titulo {
        width: 255.5rem;  /* Ancho del rectángulo */
        height: 80px; /* Alto del rectángulo */
        position: relative;
        top: 70px;
        background-color: #0BA6A4; /* Color de fondo (azul) */
        margin: 50px auto; /* Centrar el rectángulo en la página */
    }
    
    .titulo {
        display: flex;               /* Utilizar flexbox para centrar */
        justify-content: center;     /* Centrar horizontalmente */
        align-items: center;         /* Centrar verticalmente */
        font-size: 24px;             /* Tamaño de la fuente */
        font-family: 'Segoe UI', sans-serif;  /* Fuente del texto */
        font-weight: bold;           /* Grosor de la fuente (negrita) */
        color: #ffffff;              /* Color del texto */
        text-align: center;          /* Alinear el texto al centro */
        padding: 11px;               /* Espaciado interno */
        margin-top: 5px;             /* Espacio en la parte superior */
        line-height: 1.5;            /* Altura de la línea */
        text-transform: uppercase;   /* Transformar a mayúsculas */
        letter-spacing: 2px;         /* Espaciado entre letras */
    }
    
    .BotonesFONDO {
        width: 255.5rem; /* Ancho del rectángulo */
        height: 65px; /* Alto del rectángulo */
        position: relative;
        top: 0px;
        background-color: #81cac9; /* Color de fondo (azul) */
        margin: 60px auto; /* Centrar el rectángulo en la página */
        
        /* Alineación de texto centrada */
        display: flex;
        align-items: center; /* Centra el texto verticalmente */
        justify-content: center; /* Centra el texto horizontalmente */
        text-align: center; /* Alineación de texto al centro */
    }
    
    /* VISUALIZADOR_______________________________________________________________ */
    .titulo {
        text-align: center;
        margin-bottom: 20px;
    }
    
    .boton {
        display: flex;                /* Para activar flexbox */
        justify-content: center;      /* Centra horizontalmente */
        align-items: center;          /* Centra verticalmente */
        background-color: transparent; /* Sin fondo para los botones */
        color: #1a73e8;
        font-size: 17px;
        font-weight: bold;
        border: none;
        cursor: pointer;
        height: 50px;               /* Ajusta la altura según sea necesario */
        width: 100px;                /* Ajusta el ancho según sea necesario */
    }
    
    .boton i {
        margin-right: 8px; /* Espacio entre el icono y el texto */
    }
    
    .boton:hover {
        color: #0c47a1; /* Cambio de color al pasar el ratón */
    }
    
    .Botones {
        display: flex;
        justify-content: center;
        margin-bottom: 20px;
    }
    
    .Botones button {
        display: flex;                /* Para activar flexbox */
        justify-content: center;      /* Centra horizontalmente */
        align-items: center;          /* Centra verticalmente */
        background-color: transparent; /* Sin fondo para los botones */
        color: #1a73e8;
        font-size: 17px;
        font-weight: bold;
        border: none;
        cursor: pointer;
        height: 50px;               /* Ajusta la altura según sea necesario */
        width: 200px;                /* Ajusta el ancho según sea necesario */
    }
    
    .Botones button i {
        margin-right: 8px; /* Espacio entre el icono y el texto */
    }
    
    .Botones button:hover {
        color: #0c47a1; /* Cambia de color al pasar el ratón */
    }
    
    .contenedor {
        display: none;
        text-align: center;
    }
    
    .contenedor img {
        display: block;
        margin: 40px auto;
        max-width: 500%;
        width: 1500px;
        height: auto;
    }
    
    #contenedor-cascada {
        max-width: 100%;
        height: auto; /* Asegura que el contenedor crezca con el contenido */
        overflow-y: visible; /* Elimina el scroll del contenedor si está presente */
        overflow-x: hidden;
        padding: 20px;
    }



    /* Modificaciones para .contenedor-cascada */
    .contenedor-cascada {
        position: relative;
        top: 60px;
        display: flex;
        flex-direction: column;
        align-items: center;
        min-height: auto;
        width: 1030px;
        box-sizing: border-box;
        padding: 20px;
    }
    
    
    /* Ajuste para la imagen en modo cascada */
    #contenedor-cascada img {
        max-width: 500%;
        width: 1500px;
        height: auto;
        display: block;
        pointer-events: none;
    }
    
    
    /* Deshabilitar scroll vertical en el contenedor de la imagen fuera de pantalla completa */
    #pagina-unica {
        overflow-y: hidden; /* No permite scroll vertical fuera de pantalla completa */
        overflow-x: auto; /* Permite scroll horizontal si es necesario */
    
        margin-bottom: 20px;
    }
    
    #pagina-unica.fullscreen-mode {
        overflow-y: auto; /* Habilitar scroll vertical solo en pantalla completa */
        overflow-x: auto; /* Mantener scroll horizontal si es necesario */
        height: 100vh;    /* Asegurar que ocupe toda la altura de la pantalla completa */
    }
    
    .contenedor-imagen-unica {
        position: relative;
        display: inline-block;
        width: 1480px;
        top: 60px;
        right: -250px;
        margin-bottom: 60px;


    }
    
    #pagina-unica img {
        position: relative;
        left: 355px;
        max-width: 500%;
        width: 1500px;
        height: auto;

    }
    
    #capitulo-select {
        position: relative;
        top: -50px; /* Alineamos el selector en la parte superior de la imagen */
        left: 1150px;
        transform: translateX(-50%);
        background-color: rgba(255, 255, 255, 0.7); /* Fondo semitransparente para que se vea bien */
        color: rgb(0, 0, 0);
        padding: 5px 10px;
        font-size: 20px;
        border: none;
        border-radius: 5px;
        z-index: 1; /* Para asegurarnos de que esté encima de la imagen */
    }
    
    #capitulo-select option {
        color: rgb(0, 0, 0); /* Color de texto de las opciones */
    }
    
    
    /* Pantalla completa */
    .fullscreen-mode {
        overflow-x: hidden; /* Deshabilitar scroll horizontal del cuerpo en pantalla completa */
    }
    
    
    
    
    
    
    
    
    .navigation-container {
        position: relative;
        display: flex;
        justify-content: space-between;
        width: 90%;
        right: -60px;
        top: 3px;
    }
    
    .nav-button {
        padding: 10px 0px;
        font-size: 20px;
        font-weight: bold;
        color: white;
        background-color: #4a55a1;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        transition: background-color 0.3s;
    }
    
    .nav-button.prev {
        position: relative;
        width: 14rem;
        height: 5rem;
        top: -0.1rem;
        text-decoration: none; /* Elimina el subrayado */
        background-color: #4a55a1;
    }
    
    .nav-button.next {
        position: relative;
        width: 15rem;
        height: 5rem;
        top: -0.1rem;
        text-decoration: none; /* Elimina el subrayado */
        background-color: #1d8f8f;
        left: 130px;
    }
    
    .nav-button:hover {
        background-color: #333;
    }
    
    
    
    
    .Botones12 {
        width: 255.5rem;  /* Ancho del rectángulo */
        height: 80px; /* Alto del rectángulo */

        margin: 50px auto; /* Centrar el rectángulo en la página */


        position: relative;
        background-color: #81cac9; /* Color de fondo (azul) */
        margin-top: 20px; /* Empuja el div hacia abajo */

        text-align: center;  /* Alineación del contenido */

        
    }
    /* VISUALIZADOR_______________________________________________________________ */
}

/* Adaptación para pantallas de hasta 1920px */
@media (max-width: 1920px) {
    .cuerpo {
        position: relative;
        top: 0px;
        left: 0px;
        margin-top: 0px;
        margin-bottom: 610px;
    }
    
    .cuerpo2 {
        position: relative;
        top: 10px;
        left: 0px;
        margin-top: 10px;
        margin-bottom: -550px;
    }
    
    .visualizador {
        position: relative;
        z-index: 200;
    }

    .titulo {
        width: 191.5rem;  /* Ancho del rectángulo */
        height: 80px; /* Alto del rectángulo */
        position: relative;
        top: 70px;
        background-color: #0BA6A4; /* Color de fondo (azul) */
        margin: 50px auto; /* Centrar el rectángulo en la página */
    }
    
    .titulo {
        display: flex;               /* Utilizar flexbox para centrar */
        justify-content: center;     /* Centrar horizontalmente */
        align-items: center;         /* Centrar verticalmente */
        font-size: 24px;             /* Tamaño de la fuente */
        font-family: 'Segoe UI', sans-serif;  /* Fuente del texto */
        font-weight: bold;           /* Grosor de la fuente (negrita) */
        color: #ffffff;              /* Color del texto */
        text-align: center;          /* Alinear el texto al centro */
        padding: 11px;               /* Espaciado interno */
        margin-top: 5px;             /* Espacio en la parte superior */
        line-height: 1.5;            /* Altura de la línea */
        text-transform: uppercase;   /* Transformar a mayúsculas */
        letter-spacing: 2px;         /* Espaciado entre letras */
    }
    
    .BotonesFONDO {
        width: 191.5rem;  /* Ancho del rectángulo */
        height: 65px; /* Alto del rectángulo */
        position: relative;
        top: 0px;
        background-color: #81cac9; /* Color de fondo (azul) */
        margin: 60px auto; /* Centrar el rectángulo en la página */
        
        /* Alineación de texto centrada */
        display: flex;
        align-items: center; /* Centra el texto verticalmente */
        justify-content: center; /* Centra el texto horizontalmente */
        text-align: center; /* Alineación de texto al centro */
    }
    
    /* VISUALIZADOR_______________________________________________________________ */
    .titulo {
        text-align: center;
        margin-bottom: 20px;
    }
    
    .boton {
        display: flex;                /* Para activar flexbox */
        justify-content: center;      /* Centra horizontalmente */
        align-items: center;          /* Centra verticalmente */
        background-color: transparent; /* Sin fondo para los botones */
        color: #1a73e8;
        font-size: 17px;
        font-weight: bold;
        border: none;
        cursor: pointer;
        height: 50px;               /* Ajusta la altura según sea necesario */
        width: 100px;                /* Ajusta el ancho según sea necesario */
    }
    
    .boton i {
        margin-right: 8px; /* Espacio entre el icono y el texto */
    }
    
    .boton:hover {
        color: #0c47a1; /* Cambio de color al pasar el ratón */
    }
    
    .Botones {
        display: flex;
        justify-content: center;
        margin-bottom: 20px;
    }
    
    .Botones button {
        display: flex;                /* Para activar flexbox */
        justify-content: center;      /* Centra horizontalmente */
        align-items: center;          /* Centra verticalmente */
        background-color: transparent; /* Sin fondo para los botones */
        color: #1a73e8;
        font-size: 17px;
        font-weight: bold;
        border: none;
        cursor: pointer;
        height: 50px;               /* Ajusta la altura según sea necesario */
        width: 200px;                /* Ajusta el ancho según sea necesario */
    }
    
    .Botones button i {
        margin-right: 8px; /* Espacio entre el icono y el texto */
    }
    
    .Botones button:hover {
        color: #0c47a1; /* Cambia de color al pasar el ratón */
    }
    
    .contenedor {
        display: none;
        text-align: center;
    }
    
    .contenedor img {
        display: block;
        margin: 40px auto;
        max-width: 500%;
        width: 1500px;
        height: auto;
    }
    
    #contenedor-cascada {
        max-width: 100%;
        height: auto; /* Asegura que el contenedor crezca con el contenido */
        overflow-y: visible; /* Elimina el scroll del contenedor si está presente */
        overflow-x: hidden;
        padding: 20px;
    }



    /* Modificaciones para .contenedor-cascada */
    .contenedor-cascada {
        position: relative;
        top: 60px;
        display: flex;
        flex-direction: column;
        align-items: center;
        min-height: auto;
        width: 1030px;
        box-sizing: border-box;
        padding: 20px;
    }
    
    
    /* Ajuste para la imagen en modo cascada */
    #contenedor-cascada img {
        max-width: 500%;
        width: 1500px;
        height: auto;
        display: block;
        pointer-events: none;
    }
    
    
    /* Deshabilitar scroll vertical en el contenedor de la imagen fuera de pantalla completa */
    #pagina-unica {
        overflow-y: hidden; /* No permite scroll vertical fuera de pantalla completa */
        overflow-x: auto; /* Permite scroll horizontal si es necesario */
    
        margin-bottom: 20px;
    }
    
    #pagina-unica.fullscreen-mode {
        overflow-y: auto; /* Habilitar scroll vertical solo en pantalla completa */
        overflow-x: auto; /* Mantener scroll horizontal si es necesario */
        height: 100vh;    /* Asegurar que ocupe toda la altura de la pantalla completa */
    }
    
    .contenedor-imagen-unica {
        position: relative;
        display: inline-block;
        width: 1480px;
        top: 60px;
        right: 160px;
        margin-bottom: 60px;


    }
    
    #pagina-unica img {
        position: relative;
        left: 355px;
        max-width: 500%;
        width: 1500px;
        height: auto;

    }
    
    #capitulo-select {
        position: relative;
        top: -50px; /* Alineamos el selector en la parte superior de la imagen */
        left: 1150px;
        transform: translateX(-50%);
        background-color: rgba(255, 255, 255, 0.7); /* Fondo semitransparente para que se vea bien */
        color: rgb(0, 0, 0);
        padding: 5px 10px;
        font-size: 20px;
        border: none;
        border-radius: 5px;
        z-index: 1; /* Para asegurarnos de que esté encima de la imagen */
    }
    
    #capitulo-select option {
        color: rgb(0, 0, 0); /* Color de texto de las opciones */
    }
    
    
    /* Pantalla completa */
    .fullscreen-mode {
        overflow-x: hidden; /* Deshabilitar scroll horizontal del cuerpo en pantalla completa */
    }
    
    
    
    
    
    
    
    
    .navigation-container {
        position: relative;
        display: flex;
        justify-content: space-between;
        width: 90%;
        right: -60px;
        top: 3px;
    }
    
    .nav-button {
        padding: 10px 0px;
        font-size: 20px;
        font-weight: bold;
        color: white;
        background-color: #4a55a1;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        transition: background-color 0.3s;
    }
    
    .nav-button.prev {
        position: relative;
        width: 14rem;
        height: 5rem;
        top: -0.1rem;
        text-decoration: none; /* Elimina el subrayado */
        background-color: #4a55a1;
    }
    
    .nav-button.next {
        position: relative;
        width: 15rem;
        height: 5rem;
        top: -0.1rem;
        text-decoration: none; /* Elimina el subrayado */
        background-color: #1d8f8f;
        left: 130px;
    }
    
    .nav-button:hover {
        background-color: #333;
    }
    
    
    
    
    .Botones12 {
        width: 255.5rem;  /* Ancho del rectángulo */
        height: 80px; /* Alto del rectángulo */

        margin: 50px auto; /* Centrar el rectángulo en la página */


        position: relative;
        background-color: #81cac9; /* Color de fondo (azul) */
        margin-top: 20px; /* Empuja el div hacia abajo */

        text-align: center;  /* Alineación del contenido */

        
    }
    /* VISUALIZADOR_______________________________________________________________ */
}

/* Adaptación para pantallas de hasta 1366px */
@media (max-width: 1366px) {
/* General styling for the "abajo" container */
    .cuerpo {
        position: relative;
        top: 0px;
        left: 0px;
        margin-top: 0px;
        margin-bottom: 610px;
    }

    .cuerpo2 {
        position: relative;
        top: 10px;
        left: 0px;
        margin-top: 10px;
        margin-bottom: -550px;
    }

    
    .visualizador {
        position: relative;
        z-index: 200;
      }

    .titulo {
        width: 134.9rem;  /* Ancho del rectángulo */
        height: 60px; /* Alto del rectángulo */
        position: relative;
        top: 70px;
        background-color: #0BA6A4; /* Color de fondo (azul) */
        margin: 50px auto; /* Centrar el rectángulo en la página */
    }
    
    .titulo {
        font-size: 24px;          /* Tamaño de la fuente */
        font-family: 'Segoe UI', sans-serif;  /* Fuente del texto */
        font-weight: bold;                    /* Grosor de la fuente (negrita) */
        color: #ffffff;           /* Color del texto */
        text-align: center;       /* Alinear el texto al centro */
        padding: 11px;            /* Espaciado interno (padding) alrededor del texto */
        margin-top: 5px;         /* Espacio en la parte superior */
        line-height: 1.5;         /* Altura de la línea para espaciado entre líneas */
        text-transform: uppercase;/* Transformar el texto a mayúsculas */
        letter-spacing: 2px;      /* Espaciado entre letras */
    }
    
    .BotonesFONDO {
        width: 134.9rem;  /* Ancho del rectángulo */
        height: 45px; /* Alto del rectángulo */
        position: relative;
        top: 20px;
        background-color: #81cac9; /* Color de fondo (azul) */
        margin: 50px auto; /* Centrar el rectángulo en la página */
    }
    
    /* VISUALIZADOR_______________________________________________________________ */
    .titulo {
        text-align: center;
        margin-bottom: 20px;
    }
    
    .boton {
        display: inline-flex;
        align-items: center;
        padding: 5px 10px;
        background-color: transparent; /* Sin fondo */
        color: #1a73e8; /* Color del texto y el icono */
        text-decoration: none;
        font-size: 16px;
        border: none;
        cursor: pointer;
        font-weight: bold;
        margin: 5px; /* Añadimos margen para que los botones no estén pegados */
        position: relative; /* Cambiamos de absolute a relative para que se coloquen bien */
    }
    
    .boton i {
        margin-right: 8px; /* Espacio entre el icono y el texto */
    }
    
    .boton:hover {
        color: #0c47a1; /* Cambio de color al pasar el ratón */
    }
    
    .Botones {
        display: flex;
        justify-content: center;
        margin-bottom: 20px;
    }
    
    .Botones button {
        background-color: transparent; /* Sin fondo para los botones */
        color: #1a73e8;
        font-size: 16px;
        font-weight: bold;
        border: none;
        cursor: pointer;
    }
    
    .Botones button i {
        margin-right: 8px; /* Espacio entre el icono y el texto */
    }
    
    .Botones button:hover {
        color: #0c47a1; /* Cambia de color al pasar el ratón */
    }
    
    .contenedor {
        display: none;
        text-align: center;
    }
    
    .contenedor img {
        display: block;
        margin: 40px auto;
        max-width: 80%;
        width: 1030px;
        height: auto; /* Asegura que la proporción de la imagen se mantenga */
    }
    
    #contenedor-cascada {
        max-width: 100%;
        height: auto; /* Asegura que el contenedor crezca con el contenido */
        overflow-y: visible; /* Elimina el scroll del contenedor si está presente */
        overflow-x: hidden;
        padding: 20px;
    }


    .contenedor-cascada {
        position: relative;
        top: 1700px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
        min-height: 100vh; /* Make the container cover the full height of the viewport */
        box-sizing: border-box;
        padding: 20px; /* Optional padding */
    }
    
    
    #contenedor-cascada img {
        max-width: 80%;
        height: auto;
        display: block;
        pointer-events: none; /* Evitar que las imágenes capturen el scroll */
    }
    
    
    /* Deshabilitar scroll vertical en el contenedor de la imagen fuera de pantalla completa */
    #pagina-unica {
        overflow-y: hidden; /* No permite scroll vertical fuera de pantalla completa */
        overflow-x: auto; /* Permite scroll horizontal si es necesario */
    
        margin-bottom: 20px;
    }
    
    #pagina-unica.fullscreen-mode {
        overflow-y: auto; /* Habilitar scroll vertical solo en pantalla completa */
        overflow-x: auto; /* Mantener scroll horizontal si es necesario */
        height: 100vh;    /* Asegurar que ocupe toda la altura de la pantalla completa */
    }
    
    .contenedor-imagen-unica {
        position: relative;
        display: inline-block;
        width: 1030px;
        top: 60px;
        right: 180px;
    }
    
    #pagina-unica img {
        max-width: 100%;
        height: auto;
    }
    
    #capitulo-select {
        position: relative;
        top: -50px; /* Alineamos el selector en la parte superior de la imagen */
        left: 850px;
        transform: translateX(-50%);
        background-color: rgba(255, 255, 255, 0.7); /* Fondo semitransparente para que se vea bien */
        color: rgb(0, 0, 0);
        padding: 5px 10px;
        font-size: 16px;
        border: none;
        border-radius: 5px;
        z-index: 1; /* Para asegurarnos de que esté encima de la imagen */
    }
    
    #capitulo-select option {
        color: rgb(0, 0, 0); /* Color de texto de las opciones */
    }
    
    
    /* Pantalla completa */
    .fullscreen-mode {
        overflow-x: hidden; /* Deshabilitar scroll horizontal del cuerpo en pantalla completa */
    }
    
    
    
    
    
    
    
    
    .navigation-container {
        position: relative;
        display: flex;
        justify-content: space-between;
        width: 90%;
        right: -60px;
        top: 3px;
    }
    
    .nav-button {
        padding: 5px 5px;
        font-size: 12px;
        font-weight: bold;
        color: white;
        background-color: #4a55a1;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        transition: background-color 0.3s;
    }
    
    .nav-button.prev {
        position: relative;
        width: 10rem;
        height: 4rem;
        top: -0.1rem;
        text-decoration: none; /* Elimina el subrayado */
        background-color: #4a55a1;
    }
    
    .nav-button.next {
        position: relative;
        width: 10rem;
        height: 4rem;
        top: -0.1rem;
        text-decoration: none; /* Elimina el subrayado */
        background-color: #1d8f8f;
    }
    
    .nav-button:hover {
        background-color: #333;
    }
    
    
    
    
    .Botones12 {
        width: 134.9rem;  /* Ancho del rectángulo */
        height: 60px; /* Alto del rectángulo */
        position: relative;
        background-color: #81cac9; /* Color de fondo (azul) */
        margin-top: 20px; /* Empuja el div hacia abajo */

        text-align: center;  /* Alineación del contenido */
        padding: 10px;       /* Espacio interno */
        
    }
    /* VISUALIZADOR_______________________________________________________________ */
    
    
}

/* Adaptación para pantallas de hasta 1366px */
@media (max-width: 1024px) {
    /* General styling for the "abajo" container */
        .cuerpo {
            position: relative;
            top: 0px;
            left: 0px;
            margin-top: 0px;
            margin-bottom: 610px;
        }
    
        .cuerpo2 {
            position: relative;
            top: 10px;
            left: 0px;
            margin-top: 10px;
            margin-bottom: -550px;
        }
    
        
        .visualizador {
            position: relative;
            z-index: 200;
          }
    
        .titulo {
            width: 102rem;  /* Ancho del rectángulo */
            height: 60px; /* Alto del rectángulo */
            position: relative;
            top: 70px;
            background-color: #0BA6A4; /* Color de fondo (azul) */
            margin: 50px auto; /* Centrar el rectángulo en la página */
        }
        
        .titulo {
            font-size: 20px;          /* Tamaño de la fuente */
            font-family: 'Segoe UI', sans-serif;  /* Fuente del texto */
            font-weight: bold;                    /* Grosor de la fuente (negrita) */
            color: #ffffff;           /* Color del texto */
            text-align: center;       /* Alinear el texto al centro */
            padding: 11px;            /* Espaciado interno (padding) alrededor del texto */
            margin-top: 5px;         /* Espacio en la parte superior */
            line-height: 1.5;         /* Altura de la línea para espaciado entre líneas */
            text-transform: uppercase;/* Transformar el texto a mayúsculas */
            letter-spacing: 2px;      /* Espaciado entre letras */
        }
        
        .BotonesFONDO {
            width: 102rem;  /* Ancho del rectángulo */
            height: 45px; /* Alto del rectángulo */
            position: relative;
            top: 20px;
            background-color: #81cac9; /* Color de fondo (azul) */
            margin: 50px auto; /* Centrar el rectángulo en la página */
        }
        
        /* VISUALIZADOR_______________________________________________________________ */
        .titulo {
            text-align: center;
            margin-bottom: 20px;
        }
        
        .boton {
            display: inline-flex;
            align-items: center;
            padding: 5px 10px;
            background-color: transparent; /* Sin fondo */
            color: #1a73e8; /* Color del texto y el icono */
            text-decoration: none;
            font-size: 14px;
            border: none;
            cursor: pointer;
            font-weight: bold;
            top: 10px;
            margin: -9px; /* Añadimos margen para que los botones no estén pegados */
            position: relative; /* Cambiamos de absolute a relative para que se coloquen bien */
        }
        
        .boton i {
            margin-right: 1px; /* Espacio entre el icono y el texto */
        }
        
        .boton:hover {
            color: #0c47a1; /* Cambio de color al pasar el ratón */
        }
        
        .Botones {
            display: flex;
            justify-content: center;
            margin-bottom: 20px;
        }
        
        .Botones button {
            background-color: transparent; /* Sin fondo para los botones */
            color: #1a73e8;
            font-size: 14px;
            font-weight: bold;
            border: none;
            cursor: pointer;
        }
        
        .Botones button i {
            margin-right: 8px; /* Espacio entre el icono y el texto */
        }
        
        .Botones button:hover {
            color: #0c47a1; /* Cambia de color al pasar el ratón */
        }
        
        .contenedor {
            display: none;
            text-align: center;
        }
        
        .contenedor img {
            display: block;
            margin: 40px auto;
            max-width: 80%;
            width: 1030px;
            height: auto; /* Asegura que la proporción de la imagen se mantenga */
        }
        
        #contenedor-cascada {
            max-width: 100%;
            height: auto; /* Asegura que el contenedor crezca con el contenido */
            overflow-y: visible; /* Elimina el scroll del contenedor si está presente */
            overflow-x: hidden;
            padding: 20px;
        }
    
    
        .contenedor-cascada {
            position: relative;
            top: 1700px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-end;
            min-height: 100vh; /* Make the container cover the full height of the viewport */
            box-sizing: border-box;
            padding: 20px; /* Optional padding */
        }
        
        
        #contenedor-cascada img {
            max-width: 80%;
            height: auto;
            display: block;
            pointer-events: none; /* Evitar que las imágenes capturen el scroll */
        }
        
        
        /* Deshabilitar scroll vertical en el contenedor de la imagen fuera de pantalla completa */
        #pagina-unica {
            overflow-y: hidden; /* No permite scroll vertical fuera de pantalla completa */
            overflow-x: auto; /* Permite scroll horizontal si es necesario */
        
            margin-bottom: 20px;
        }
        
        #pagina-unica.fullscreen-mode {
            overflow-y: auto; /* Habilitar scroll vertical solo en pantalla completa */
            overflow-x: auto; /* Mantener scroll horizontal si es necesario */
            height: 100vh;    /* Asegurar que ocupe toda la altura de la pantalla completa */
        }
        
        .contenedor-imagen-unica {
            position: relative;
            display: inline-block;
            width: 720px;
            top: 50px;
            right: 200px;
        }
        
        #pagina-unica img {
            max-width: 100%;
            height: auto;
        }
        
        #capitulo-select {
            position: relative;
            top: -50px; /* Alineamos el selector en la parte superior de la imagen */
            left: 730px;
            transform: translateX(-50%);
            background-color: rgba(255, 255, 255, 0.7); /* Fondo semitransparente para que se vea bien */
            color: rgb(0, 0, 0);
            padding: 5px 10px;
            font-size: 16px;
            border: none;
            border-radius: 5px;
            z-index: 1; /* Para asegurarnos de que esté encima de la imagen */
        }
        
        #capitulo-select option {
            color: rgb(0, 0, 0); /* Color de texto de las opciones */
        }
        
        
        /* Pantalla completa */
        .fullscreen-mode {
            overflow-x: hidden; /* Deshabilitar scroll horizontal del cuerpo en pantalla completa */
        }
        
        
        
        
        
        
        
        
        .navigation-container {
            position: relative;
            display: flex;
            justify-content: space-between;
            width: 90%;
            right: -60px;
            top: 3px;
        }
        
        .nav-button {
            padding: 5px 5px;
            font-size: 12px;
            font-weight: bold;
            color: white;
            background-color: #4a55a1;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        
        .nav-button.prev {
            position: relative;
            width: 10rem;
            height: 4rem;
            top: -0.1rem;
            left: -30px;
            text-decoration: none; /* Elimina el subrayado */
            background-color: #4a55a1;
        }
        
        .nav-button.next {
            position: relative;
            width: 10rem;
            height: 4rem;
            top: -0.1rem;
            left: -5px;
            text-decoration: none; /* Elimina el subrayado */
            background-color: #1d8f8f;
        }
        
        .nav-button:hover {
            background-color: #333;
        }
        
        
        
        
        .Botones12 {
            width: 102rem;  /* Ancho del rectángulo */
            height: 60px; /* Alto del rectángulo */
            position: relative;
            background-color: #81cac9; /* Color de fondo (azul) */
            margin-top: 20px; /* Empuja el div hacia abajo */
    
            text-align: center;  /* Alineación del contenido */
            padding: 10px;       /* Espacio interno */
            
        }
        /* VISUALIZADOR_______________________________________________________________ */
        
        
    }