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

html {
    scroll-behavior: smooth;
}
/* Estilos CSS del NavBar */
.navbar__li--white {
    color: #fff!important;
}

.navbar--home {
    background: #000;
    justify-content: center!important;
    gap: 20px;
}

/* Estilos base (para computadoras) */
.header-fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
    padding: 20px;
    border-bottom: 1px solid #ddd;
}

.header-title {
    font-size: 24px;
    font-weight: bold;
    margin: 0;
    font-family: 'Open Sans', sans-serif;
}

.main-content {
    font-family: 'Open Sans', sans-serif;

}

.welcome-section {
    text-align: initial;
}

.welcome-container {
    background-image: url('../images/fondo-principal-separador.png');
    background-size: cover;
    background-position: center;
    margin-bottom: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    height: 70vh;
    padding: 1vw;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    object-fit: cover;
    position: relative;
    /* Contenedor relativo para posicionar imágenes */
}

.welcome-container h2 {
    font-size: 80px;
    margin-left: 220px;
    margin-top: -20px
}

.welcome-container h2 .bienvenido {
    color: #fff;
    display: block;
    margin-top: 5px;
}

.welcome-container h2 .pasaporte {
    color: #fff;
    display: block;
    font-size: 50px;
}

button.pasaporte {
    background-color: rgb(0, 0, 0);
    color: white !important;
    border: solid 1px black;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 10px;
    transition: background-color 0.3s ease;
}

button.pasaporte:hover {
    background-color: #333333;
}

.color-link {
    color: gold;
    text-decoration: none;
    font-weight: bold;
}

.color-link:hover {
    text-decoration: underline;
}

.bold-text {
    font-weight: bold;
}

.welcome-title {
    font-size: 24px;
    font-weight: bold;
    margin: 0;
}

.welcome-text-title {
    font-size: 45px;
    font-weight: bold;
    margin-bottom: 20px;
    padding-left: calc(40vw);
}

#section1 {
    height: 600px;
}

#section2 {
    height: 600px;
}

.welcome-text-italic {
    font-size: 30px;
    font-style: italic;
    margin-bottom: 10px;
    padding-left: calc(50vw);
}

.welcome-text {
    text-align: justify;
    width: 43%;
    padding-left: calc(40vw);
    font-size: 26px;
    line-height: 1.5;
    box-sizing: content-box;
    margin-top: 40px;
    position: relative;
}

.second-info {
    text-align: center;
}

.second-container {
    margin-top: 40px;
    margin-bottom: 40px;
    height: 600px;
    position: relative;
    /* Contenedor relativo para posicionar imágenes */
}

.info-section {
    text-align: center;
    margin-top: 20px;
    position: relative;
    /* Contenedor relativo para posicionar imágenes */
}

.info-text-verde {
    font-size: 36px;
    font-weight: bold;
    margin: 0;
    color: #fff;
    background-color: #4B5320;
    padding: 80px 250px 80px 20px;
    border-radius: 10px;
}

.question-section {
    background-image: url('../images/fondo-principal-separador.png');
    background-size: cover;
    background-position: center;
    margin-top: 70px;
    position: relative;
    height: calc(125vh);
}

.question-title {
    color: #fff;
    font-size: 45px;
    font-weight: bold;
    margin: 19px;
    position: relative;
    top: 35px;
    padding-left: calc(10vw);
}

.question-text {
    color: #fff;
    font-size: 26px;
    margin-bottom: 10px;
    position: relative;
    top: 30px;
    padding-left: calc(8vw);
    width: 55%;
    text-align: center;
    font-weight: 100;
}

.question-text-fi {
    color: #fff;
    font-size: 40px;
    margin-bottom: 10px;
    position: relative;
    top: -110px;
    right: calc(-45vw);
    width: 48%;
    text-align: center;
}

.question-text-fi .bot {
    color: #fff;
    display: block;
    font-size: 50px;
}

.bot {
    background-color: rgb(0, 0, 0);
    color: white !important;
    border: solid 1px black;
    padding: 18px 24px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 10px;
    transition: background-color 0.3s ease;
    position: relative;
    left: calc(64vw);
    top: -28px;
    font-size: 25px;
}

.question-text-italic {
    font-size: 30px;
    font-style: italic;
    margin-bottom: 19px;
    position: relative;
    top: 30px;
}

.imagen1 {
    background-image: url('../images/head.png');
    top: 85px;
    right: calc(12vw);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 572px;
    height: 500px;
    position: absolute;
}

@keyframes bailar {
    0% {
        transform: translateY(0) rotate(0deg);
    }

    25% {
        transform: translateY(-10px) rotate(-5deg);
    }

    50% {
        transform: translateY(0) rotate(0deg);
    }

    75% {
        transform: translateY(10px) rotate(5deg);
    }

    100% {
        transform: translateY(0) rotate(0deg);
    }
}

@keyframes aumentar {
    0% {
        transform: translateY(0) scale(1);
        /* Escala normal */
    }

    25% {
        transform: translateY(-10px) scale(1.1);
        /* Aumenta el tamaño */
    }

    50% {
        transform: translateY(0) scale(1);
        /* Vuelve al tamaño normal */
    }

    75% {
        transform: translateY(10px) scale(0.9);
        /* Disminuye el tamaño */
    }

    100% {
        transform: translateY(0) scale(1);
        /* Vuelve al tamaño normal */
    }
}

.imagen2 {
    background-image: url('../images/indice.png');
    top: 100px;
    left: calc(12vw);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 320px;
    height: 385px;
    position: absolute;
}

.imagen3 {
    background-image: url('../images/biblio.png');
    top: -353px;
    left: calc(67vw);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 342px;
  height: 378px;
    position: relative;
}

.imagen4 {
    background-image: url('../images/REGIO.png');
    top: 600px;
    left: calc(11vw);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 420px;
    height: 380px;
    position: absolute;
}

.imagen5 {
    background-image: url('../images/FESTIVALES.png');
    top: 600px;
    left: calc(28vw);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 264px;
    height: 382px;
    position: absolute;
}

.third-container>div {
    border-radius: 5px;
}

.third-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 3rem 7rem;
    gap: 3rem;
}

img {
    max-height: 100%;
    max-width: 100%;
}

.image {
    justify-content: center;
    align-items: center;
    height: 100%;
}

.image-5 img {
    max-height: 300px;
    max-width: 350px;
}

.image-6 img {
    max-height: 450px;
    max-width: 350px;
}

.image-7 img {
    max-height: 350px;
    max-width: 350px;
}

.image-8 img {
    max-height: 450px;
    max-width: 350px;
}

/* 
.imagen5 {
    background-image: url('../images/OSEM.png');
    top: 250px;
    
    left: 560px;
    
    background-size: cover;
    
    background-position: center;
    
    background-repeat: no-repeat;
    
    width: 220px;
    
    height: 380px;
    
    position: absolute;
    
} 

.imagen6 {
    background-image: url('../images/COMEM.png');
    top: 340px;
    
    left: 310px;
    
    background-size: cover;
    
    background-position: center;
    
    background-repeat: no-repeat;
    
    width: 220px;
    
    height: 290px;
    position: absolute;
}

.imagen7 {
    background-image: url('../images/REGIO.png');
    top: 360px;
    left: 950px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 275px;
    height: 250px;
    position: absolute;
}

.imagen8 {
    background-image: url('../images/comem1.png');
    top: 260px;
    left: 1300px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 240px;
    height: 350px;
    position: absolute;
}
*/

@media (max-width: 1784px) {

    .welcome-text-title {
        padding-left: calc(42vw);
    }

    .welcome-text {
        padding-left: calc(42vw);
    }

    .question-text {
        padding-left: calc(10vw);
    }

    .question-text-fi {
        font-size: 35px;
        top: -180px;
        right: calc(-45vw);
        width: 48%;
    }

    .imagen4,
    .imagen5 {
        top: 700px;
    }

    .question-section {
        height: calc(140vh);
    }
}

@media (max-width: 1700px) {

    .imagen4,
    .imagen5 {
        top: 700px;
    }

    .question-section {
        height: calc(140vh);
    }
}

@media (max-width: 1680px) {

    .welcome-text-title {
        padding-left: calc(42vw);
    }

    .welcome-text {
        padding-left: calc(42vw);
    }

    .question-section {
        height: calc(118vh);
    }

    .question-text {
        padding-left: calc(14vw);
    }

    .imagen4 {
        top: 700px;
        left: calc(13vw);
        width: 308PX;
        height: 362px;
    }

    .imagen5 {
        top: 700px;
        left: calc(28vw);
        width: 215px;
        height: 362px;
    }

    .question-text-fi {
        font-size: 35px;
        top: -217px;
        right: calc(-45vw);
        width: 48%;
    }

    .question-section {
        height: calc(140vh);
    }
    .bot{
        left: calc(64vw);
        top: -125px;
        font-size: 25px;
    }
}

@media (max-width: 1615px) {
    .question-section {
        height: calc(140vh);
    }

    .question-text {
        width: 60%;
        padding-left: calc(9vw);
    }

    .bot{
        left: calc(64vw);
        top: -125px;
        font-size: 25px;
    }
}

@media (max-width: 1580px) {

    .imagen2 {
        left: calc(9vw);
    }

    .welcome-text-title {
        padding-left: calc(38vw);
    }

    .welcome-text {
        padding-left: calc(38vw);
    }

    .question-section {
        height: calc(135vh);
    }

    .question-text {
        padding-left: calc(11vw);
    }

    .imagen4 {
        top: 680px;
        left: calc(13vw);
        width: 308PX;
        height: 362px;
    }

    .imagen5 {
        top: 680px;
        left: calc(28vw);
        width: 215px;
        height: 362px;
    }
}

@media (max-width: 1480px) {

    .imagen1 {
        top: 130px;
        right: calc(10vw);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        width: 466px;
        height: 400px;
    }

    .imagen2 {
        left: calc(10vw);
    }

    .welcome-text-title {
        padding-left: calc(38vw);
    }

    .welcome-text {
        padding-left: calc(42vw);
    }

    .question-title {
        padding-left: calc(7vw);
        top: 70px;
    }

    .question-text {
        padding-left: calc(12vw);
        top: 60px;
    }
}

@media (max-width: 1380px) {

    .welcome-container h2 .bienvenido {
        color: #fff;
        display: block;
        margin-top: 5px;
        position: relative;
        left: calc(-6vw);
    }

    .welcome-container h2 .pasaporte {
        color: #fff;
        display: block;
        font-size: 50px;
        position: relative;
        left: calc(-6vw);
    }

    .imagen2 {
        left: calc(9vw);
    }

    .welcome-text-title {
        padding-left: calc(39vw);
        font-size: 38px;
    }

    .welcome-text {
        padding-left: calc(39vw);
    }

    .question-title {
        font-size: 35px;
        padding-left: calc(7vw);
    }

    .question-section {
        height: calc(120vh);
    }

    .question-text {
        font-size: 22px;
        padding-left: calc(5vw);
    }

    .imagen3 {
        top: -300px;
        left: calc(67vw);
        width: 320px;
        height: 350px;
    }

    .imagen4 {
        left: calc(11vw);
        top: 560px;
    }

    .imagen5 {
        left: calc(28vw);
        top: 560px;
    }

    .question-text-fi {
        font-size: 30px;
        right: calc(-48vw);
        top: -195px;
    }
}

@media (max-width: 1280px) {

    .welcome-container h2 .bienvenido {
        left: calc(-8vw);
    }

    .welcome-container h2 .pasaporte {
        left: calc(-8vw);
    }

    .question-section {
        height: calc(105vh);
    }

    .welcome-text-title {
        padding-left: calc(43vw);
        font-size: 31px;
    }

    .welcome-text {
        padding-left: calc(44vw);
        font-size: 23px;
    }

    .question-section {
        height: calc(116vh);
    }

    .question-text {
        font-size: 22px;
        padding-left: calc(10vw);
    }

    .imagen4 {
        height: 280px;
        top: 575px;
    }

    .imagen5 {
        height: 280px;
        width: 195px;
        top: 575px;
    }

    .question-text-fi {
        top: -225px;
    }
}

@media (max-width: 1230px) {

    .imagen1 {
        top: 140px;
        right: calc(8vw);
        width: 425px;
        height: 358px;
    }

    .welcome-container h2 .bienvenido {
        left: calc(-11vw);
    }

    .welcome-container h2 .pasaporte {
        left: calc(-11vw);
    }

    .imagen4 {
        height: 280px;
        top: 580px;
    }

    .imagen5 {
        height: 280px;
        width: 195px;
        top: 580px;
    }

    .question-text-fi {
        top: -200px;
    }
}

@media (max-width: 1190px) {

    .question-title {
        font-size: 35px;
        left: calc(-4vw);
    }

    .question-text {
        font-size: 22px;
        left: calc(-4vw);
        width: 60%;
    }
}

@media (max-width: 1130px) {
    .question-section {
        height: calc(122vh);
    }

    .imagen4,
    .imagen5 {
        top: 621px;
    }
}

@media (max-width: 1080px) {

    .welcome-container h2 .bienvenido {
        left: calc(-11vw);
        font-size: 60px;
    }

    .welcome-container h2 .pasaporte {
        left: calc(-11vw);
        font-size: 40px;
    }

    .imagen1 {
        top: 170px;
        right: calc(6vw);
        width: 370px;
        height: 305px;
    }

    .imagen2 {
        width: 285px;
        height: 350px;
    }

    .question-text {
        font-size: 21px;
        left: calc(-4vw);
        width: 60%;
    }

    .welcome-text {
        padding-left: calc(45vw);
        font-size: 21px;
    }

    .question-title {
        font-size: 31px;
    }

    .imagen4 {
        left: calc(9vw);
    }
}

@media (max-width: 980px) {

    .question-title {
        font-size: 29px;
    }

    .imagen3 {
        top: -300px;
        left: calc(63vw);
        width: 278px;
        height: 296px;
    }

    .imagen4 {
        height: 225px;
        top: 670px;
        width: 255px;
    }

    .imagen5 {
        height: 215px;
        top: 670px;
        width: 161px;
    }

    .question-text-fi {
        top: -165px;
    }

}

@media (max-width: 900px) {
    .imagen1 {
        top: 205px;
        right: calc(8vw);
        width: 338px;
        height: 270px;
    }

    .welcome-container h2 .bienvenido {
        left: calc(-17vw);
    }

    .welcome-container h2 .pasaporte {
        left: calc(-17vw);
    }

    .imagen2 {
        width: 285px;
        height: 350px;
        top: 115px;
    }

    .question-section {
        margin-top: 0px;
    }

    .welcome-text-title {
        padding-left: calc(48vw);
        font-size: 23px;
    }

    .welcome-text {
        padding-left: calc(48vw);
        font-size: 19px;
    }

    .question-title {
        font-size: 26px;
    }

    .imagen4 {
        left: calc(4vw);
    }

    .imagen5 {
        left: calc(26vw);
    }

    .question-text-fi {
        font-size: 25px;
        right: calc(-48vw);
        top: -195px;
    }
}

@media (max-width: 860px) {

    .question-section {
        height: calc(100vh);
    }

    .question-title {
        font-size: 27px;
        left: calc(-4vw);
    }

    .question-text {
        font-size: 19px;
        left: calc(-4vw);
        width: 60%;
    }

    .question-text-fi {
        top: -148px;
    }
}

@media (max-width: 800px) {
    .navbar {
        justify-content: space-between!important;
        background: #000!important;
    }

    .navbar__action span {
        font-size: 2rem;
        color: #fff!important;
    }

    .navbar--show {
        align-items: center!important;
        justify-content: center!important;
    }

    .welcome-container h2 .bienvenido {
        left: calc(-23vw);
    }

    .welcome-container h2 .pasaporte {
        left: calc(-23vw);
    }

    .imagen1 {
        top: 215px;
        right: calc(8vw);
        width: 243px;
        height: 204px;
    }

    .imagen2 {
        width: 195px;
        height: 253px;
        top: 184px;
    }
}

@media (max-width: 750px) {
    .welcome-container h2 .bienvenido {
        left: calc(-24vw);
        font-size: 50px;
    }

    .welcome-container h2 .pasaporte {
        left: calc(-24vw);
        font-size: 50px;
    }

    .question-title {
        font-size: 24px;
        left: calc(-5vw);
    }

    .imagen3 {
        top: -300px;
        left: calc(63vw);
        width: 197px;
        height: 225px;
    }

    .imagen4 {
        height: 246px;
        top: 670px;
        width: 240px;
    }

    .imagen5 {
        height: 245px;
        top: 670px;
        width: 150px;
    }

    .question-text-fi {
        top: -100px;
    }

    .bot{
        left: calc(59vw);
        top: -87px;
        font-size: 25px;
    }
}

@media (max-width: 700px) {
    .welcome-container h2 .bienvenido {
        left: calc(-24vw);
        font-size: 40px;
    }

    .welcome-container h2 .pasaporte {
        left: calc(-24vw);
        font-size: 40px;
    }

    .second-container {
        margin-bottom: -6px;
    }

    .welcome-text {
        padding-left: calc(48vw);
        font-size: 17px;
    }
}

@media (max-width: 650px) {

    .welcome-container h2 .bienvenido {
        left: calc(-30vw);
        font-size: 40px;
    }

    .welcome-container h2 .pasaporte {
        left: calc(-30vw);
        font-size: 40px;
    }

    .imagen1 {
        top: 239px;
        right: calc(5vw);
        width: 216px;
        height: 165px;
    }

    .imagen4 {
        height: 180px;
        top: 720px;
        width: 170px;
    }

    .imagen5 {
        height: 156px;
        top: 720px;
        width: 111px;
    }

    .question-text-fi {
        font-size: 21px;
        right: calc(-48vw);
        top: -110px;
    }


    .bot{
        left: calc(55vw);
        top: -87px;
        font-size: 25px;
    }
}

@media (max-width: 580px) {

    .welcome-container h2 .bienvenido {
        left: calc(-33vw);
        font-size: 35px;
    }

    .welcome-container h2 .pasaporte {
        left: calc(-33vw);
        font-size: 35px;
    }

    .welcome-text {
        padding-left: calc(48vw);
        font-size: 15px;
    }

    .question-title {
        font-size: 20px;
        left: calc(-7vw);
    }

    .question-text {
        font-size: 17px;
        left: calc(-4vw);
        width: 60%;
    }

    .question-text-fi {
        font-size: 21px;
        right: calc(-48vw);
        top: -102px;
    }
}

@media (max-width: 550px) {

    .welcome-container h2 .bienvenido {
        left: calc(-35vw);
        font-size: 30px;
    }

    .welcome-container h2 .pasaporte {
        left: calc(-35vw);
        font-size: 30px;
    }

    .imagen1 {
        top: 268px;
        right: calc(5vw);
        width: 180px;
        height: 139px;
    }

    .imagen2 {
        width: 159px;
        height: 208px;
        top: 184px;
    }

    .welcome-text-title {
        padding-left: calc(45vw);
        font-size: 21px;
    }

    .welcome-text {
        padding-left: calc(45vw);
        font-size: 15px;
    }

    .question-title {
        font-size: 18px;
        left: calc(-9vw);
    }

    .imagen3 {
        top: -267px;
        left: calc(63vw);
        width: 167px;
        height: 195px;
    }

    .bot{
        left: calc(53vw);
        top: -87px;
        font-size: 25px;
    }
}

@media (max-width: 490px) {
    .welcome-container h2 .bienvenido {
        left: calc(-40vw);
        font-size: 27px;
    }

    .welcome-container h2 .pasaporte {
        left: calc(-40vw);
        font-size: 27px;
    }

    .imagen2 {
        width: 119px;
        height: 152px;
        top: 200px;
    }

    .welcome-text-title {
        padding-left: calc(36vw);
        font-size: 14px;
    }

    .welcome-text {
        padding-left: calc(41vw);
        font-size: 15px;
    }
}

@media (max-width: 470px) {

    .welcome-container h2 .bienvenido {
        left: calc(-17vw);
        font-size: 27px;
        top: -84px;
    }

    .welcome-container h2 .pasaporte {
        left: calc(-17vw);
        font-size: 27px;
        top: -84px;
    }

    .imagen1 {
        top: 370px;
        right: calc(29vw);
        width: 180px;
        height: 139px;
    }

    .imagen3 {
        display: none;
    }

    .question-section {
        height: calc(135vh);
    }

    .question-title {
        font-size: 20px;
        left: calc(2vw);
        top: 80px;
    }

    .question-text {
        font-size: 17px;
        left: calc(3vw);
        width: 83%;
        top: 100px;
    }

    .imagen2 {
        display: none;
    }

    .welcome-text-title {
        padding-left: calc(19vw);
        font-size: 16px;
    }

    .welcome-text {
        padding-left: calc(22vw);
        font-size: 16px;
        width: 59%;
    }

    .imagen4 {
        height: 180px;
        top: 630px;
        width: 170px;
        left: calc(20vw);
    }

    .imagen5 {
        height: 156px;
        top: 630px;
        width: 111px;
        left: calc(48vw);
    }

    .question-text-fi {
        font-size: 21px;
        right: calc(-25vw);
        top: 353px;
    }

    .bot {
        left: calc(28vw);
        top: 425px;
        font-size: 22px;
      }
}

@media (max-width: 440px) {

    .welcome-container h2 .bienvenido {
        left: calc(-23vw);
        font-size: 27px;
        top: -84px;
    }

    .welcome-container h2 .pasaporte {
        left: calc(-23vw);
        font-size: 27px;
        top: -84px;
    }

    .welcome-text-title {
        padding-left: calc(16vw);
        font-size: 16px;
    }

    .welcome-text {
        padding-left: calc(17vw);
        font-size: 16px;
        width: 62%;
    }

    .question-title {
        font-size: 20px;
        left: calc(-2vw);
        top: 80px;
    }

    .question-text {
        font-size: 17px;
        left: calc(1vw);
        width: 83%;
        top: 100px;
    }
}

@media (max-width: 415px) {
    .imagen1 {
        top: 325px;
        right: calc(29vw);
        width: 180px;
        height: 139px;
    }

    .question-title {
        font-size: 16px;
        left: calc(2vw);
        top: 80px;
        width: 109%;
    }

    .question-text {
        font-size: 16px;
        left: calc(1vw);
        width: 83%;
        top: 100px;
    }

    .imagen4 {
        height: 180px;
        top: 700px;
        width: 170px;
        left: calc(15vw);
    }

    .imagen5 {
        height: 156px;
        top: 700px;
        width: 111px;
        left: calc(50vw);
    }

    .question-text-fi {
        font-size: 18px;
        right: calc(-8vw);
        top: 390px;
        width: 80%;
    }
}

@media (max-width: 395px) {

    .imagen1 {
        top: 320px;
        right: calc(29vw);
        width: 180px;
        height: 139px;
    }

    .welcome-text-title {
        padding-left: calc(9vw);
        font-size: 16px;
    }

    .welcome-container h2 .bienvenido {
        left: calc(-30vw);
    }

    .welcome-container h2 .pasaporte {
        left: calc(-30vw);
    }

    .question-section {
        height: calc(150vh);
    }
}

@media (max-width: 360px) {

    .welcome-container h2 .bienvenido {
        left: calc(-41vw);
    }

    .welcome-container h2 .pasaporte {
        left: calc(-41vw);
    }

    .question-title {
        font-size: 16px;
        left: calc(-3vw);
        top: 80px;
        width: 109%;
    }

    .imagen4,
    .imagen5 {
        top: 650px;
    }
}

@media (max-width: 320px) {

    .imagen4,
    .imagen5 {
        top: 710px;
    }
}