.bannerprincipal {
    height: 100vh; /* Restamos la altura del menú */
    overflow: hidden;
    position: relative;
    min-height: 100vh;
}

.bannerimagesprincipal {
    width: 100%;
    height: 300%; /* Tres veces la altura de la ventana */
    position: absolute;
    top: 0;
    left: 0;
}

.bannerimagesprincipal img {
    width: 100%;
    height: 100vh;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    object-fit: cover; /* Ajustar la imagen para cubrir el contenedor */
    overflow: hidden; /* Ocultar cualquier parte de la imagen que se desborde */
    animation-fill-mode: forwards;
    animation-iteration-count: infinite; /* Mantener el estado final de la animación */
}


.bannerimagesprincipal img:nth-child(1) {
    animation: zoomFadeInOut1 60s infinite; /* Animación para la primera imagen */
}

.bannerimagesprincipal img:nth-child(2) {
    animation: zoomFadeInOut2 60s infinite; /* Animación para la segunda imagen */
}

.bannerimagesprincipal img:nth-child(3) {
    animation: zoomFadeInOut3 60s infinite; /* Animación para la tercera imagen */
}

@keyframes zoomFadeInOut1 {
    /* Definir la animación para la primera imagen */
    0% {
        opacity: .7;
        transform: scale(1.5); /* Comienza con un zoom */
    }
    5% {
        opacity: 1;
        transform: scale(1.4); /* Comienza con un zoom */
    }
    10% {
        opacity: 1;
        transform: scale(1.3); /* Comienza con un zoom */
    }
    20% {
        opacity: 1;
        transform: scale(1.2); /* Comienza con un zoom */
    }
    30% {
        opacity: 1;
        transform: scale(1.1); /* Comienza con un zoom */
    }
    40% {
        opacity: 0;
        transform: scale(1.09); /* Comienza con un zoom */
    }
    50% {
        opacity: 0;
        transform: scale(1.08); /* Se desvanece */
    }
    60% {
        opacity: 0;
        transform: scale(1.07); /* Se mantiene completamente visible */
    }
    70% {
        opacity: 0;
        transform: scale(1.06); /* Se mantiene completamente visible */
    }
    80% {
        opacity: 0;
        transform: scale(1.05); /* Comienza a desaparecer */
    }
    90% {
        opacity: 0;
        transform: scale(1.04); /* Comienza a desaparecer */
    }
}

@keyframes zoomFadeInOut2 {
    /* Definir la animación para la segunda imagen */
    0% {
        opacity: 0;
        transform: scale(1.7); /* Comienza con un zoom */
    }
    10% {
        opacity: 0;
        transform: scale(1.6); /* Comienza con un zoom */
    }
    20% {
        opacity: 0;
        transform: scale(1.5); /* Comienza con un zoom */
    }
    30% {
        opacity: 0;
        transform: scale(1.4); /* Comienza con un zoom */
    }
    40% {
        opacity: 1;
        transform: scale(1.3); /* Comienza con un zoom */
    }
    50% {
        opacity: 1;
        transform: scale(1.2); /* Se desvanece */
    }
    60% {
        opacity: 1;
        transform: scale(1.1); /* Se mantiene completamente visible */
    }
    70% {
        opacity: 0;
        transform: scale(1.09); /* Se mantiene completamente visible */
    }
    80% {
        opacity: 0;
        transform: scale(1.08); /* Comienza a desaparecer */
    }
    90% {
        opacity: 0;
        transform: scale(1.07); /* Comienza a desaparecer */
    }
}

@keyframes zoomFadeInOut3 {
    /* Definir la animación para la tercera imagen */
    0% {
        opacity: 0;
        transform: scale(2.0); /* Comienza con un zoom */
    }
    10% {
        opacity: 0;
        transform: scale(1.9); /* Comienza con un zoom */
    }
    20% {
        opacity: 0;
        transform: scale(1.8); /* Comienza con un zoom */
    }
    30% {
        opacity: 0;
        transform: scale(1.7); /* Comienza con un zoom */
    }
    40% {
        opacity: 0;
        transform: scale(1.8); /* Comienza con un zoom */
    }
    50% {
        opacity: 0;
        transform: scale(1.6); /* Se desvanece */
    }
    60% {
        opacity: 0;
        transform: scale(1.6); /* Se mantiene completamente visible */
    }
    70% {
        opacity: 1;
        transform: scale(1.5); /* Se mantiene completamente visible */
    }
    80% {
        opacity: 1;
        transform: scale(1.4); /* Comienza a desaparecer */
    }
    90% {
        opacity: 1;
        transform: scale(1.3); /* Comienza a desaparecer */
    }
    95% {
        opacity: 1;
        transform: scale(1.2); /* Comienza a desaparecer */
    }
    100% {
        opacity: .7;
        transform: scale(1.1); /* Comienza a desaparecer */
    }
}
.text-overlay {
    height: calc(100vh); /* Restamos la altura del menú */
    overflow: hidden;
    position: absolute;
    width: 100%;
    z-index: 999;
    position: absolute;
    top: 18vw;
    
    color: white; /* Color del texto */
    background-color: transparent; /* Color de fondo semi-transparente */
    padding: 10px; /* Espacio interno */
    bottom: 1vw; /* Utiliza vw en lugar de px */
    left: 20px; /* Utiliza vw en lugar de px */
    font-size: 3vw; /* Utiliza vw en lugar de px */
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    text-decoration-style: bold;
    margin-left: 20px;
    pointer-events: none;
}

.text-overlay h2 {
    margin: 0; /* Elimina el margen del título */
}
.text-overlay h2:nth-child(1) {
    animation: zoomtextbanner 20s infinite; /* Animación para la primer imagen */
}

@keyframes zoomtextbanner {
    /* Definir la animación para el texto */
    0% {
        opacity: 0;
        transform: translateY(60px); /* Comienza desde abajo */
    }
    5% {
        opacity: 1;
        transform: translateY(40px); /* Se mueve hacia arriba */
    }
    10% {
        opacity: 1;
        transform: translateY(20px); /* Se mueve hacia arriba */
    }
    20% {
        opacity: 1;
        transform: translateY(10px); /* Se mueve hacia arriba */
    }
    30% {
        opacity: 1;
        transform: translateY(5px); /* Se mueve hacia arriba */
    }
    40% {
        opacity: 1;
        transform: translateY(0px); /* Comienza a desvanecerse */
    }
    50% {
        opacity: 1;
        transform: translateY(-5px); /* Se desvanece */
    }
    60% {
        opacity: 1;
        transform: translateY(-10px); /* Se mantiene completamente visible */
    }
    70% {
        opacity: 1;
        transform: translateY(-20px); /* Se mantiene completamente visible */
    }
    80% {
        opacity: 1;
        transform: translateY(-30px); /* Comienza a desaparecer */
    }
    90% {
        opacity: 0;
        transform: translateY(-40px); /* Comienza a desaparecer */
    }
    100% {
        opacity: 0;
        transform: translateY(-50px); /* Comienza a desaparecer */
    }
}