html {
    scroll-behavior: smooth;
}

@media (orientation: landscape) {
    

body {
    margin: 0px;
    padding: 0px;
    border: 0px;
    font-family: "Antonio", sans-serif;
    background-color: black;
}

body .encabezado_informacion {
    font-size: clamp(2rem, 3vw, 10rem);

}

body .informacion {
    font-size: clamp(1.0rem, 2.5vw, 7rem);
}

.sombreado {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}



/*Fondo de la pagina web*/

.contenedor_imagen {
    position: relative;
    width: 100%;
    height: auto;
}

.imagen_fondo_superior {

    width: 100%;
    max-height: auto;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: 0.5s ease;
    z-index: -2;
    overflow: hidden;
    will-change: transform, opacity;
    transform: scale(1.0);
}

.logo_vibrato {
    position: absolute;
    width: 60%;
    height: auto;
    transition: 0.5s ease;
    will-change: transform, opacity;
    top: 60%;  
    left: 70%; 
    transform: translate(-50%, -50%);

}

/*Separador*/

#separador {
    min-height: 3vh;
}

#separador_w {
    min-width: 3vw;
}

/*Primera seccion de contenido*/
#primera_seccion {
    display: flex;
    width: 100%;
    height: auto;
    justify-content: space-between;
    text-align: center;
    align-items: start;
}

#carouselImagenes {
    position: relative;
    max-width: 40vw;
    height: auto;
    color: white;
}

#carouselImagenes .carousel-indicators {
    position: absolute;
    top: calc(100%);
    left: calc(0%);
    width: 100%;
    height: 3vh;
    margin: 0%;
}

.carousel-indicators .active {
  background-color: #fcfcfc;
  opacity: 1;
}

.carousel-indicators button {
        width: 3vw;
        height: 2vh;
        border: none;
    }

#carouselImages .carousel-inner {
    position: relative;
    width: 100%;
    height: auto;
    border-radius: 1vh;
}
.carousel-inner{
    border-radius: 1vh;
    }


.carousel-inner .carousel-item{
    border-radius: 1vh;
    position: relative;
    }

.carousel-inner .carousel-item .parrafo_en_card{
position: absolute;
text-align: left;
top: calc(75%);
left: calc(5%);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    line-height: 1;
font-size: clamp(1.2rem, 4vh, 2.4rem);
}



    #acomodador {
    min-width: 1vw;
}

.tarjeta_informacion {
    max-width: 40vw;
    min-width: 40vw;
    font-size: clamp(1rem, 1.5vw, 5rem);
    position: relative;
    width: fit-content;
    height: fit-content;
    border-radius: 1vh;

}

.tarjeta_informacion .first-section {
    width: 100%;
    height: 100%;
}
.tarjeta_informacion .first-section .contenedor_imagen {
    position: relative;
    width: 100%;
    height: auto;
    pointer-events: none;
    z-index: -1;
    margin: 0px;
}



.tarjeta_informacion .first-section .contenedor_imagen .imagen {
    width: 100%;
    height: auto;
    position: relative;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
    transition: 0.3s ease, transform 0.3s ease;
    opacity: 1;
}



.tarjeta_informacion button {
    width: 12vw;
    height: auto;
    font-size: clamp(1rem, 1.5vw, 5rem);
}

.first-section {
    z-index: -1;
}

.second-section {
    text-align: start;
    position: absolute;
    width: auto;
    color: white;
    z-index: 1;
    top: 60%;
    left: 10%;

}

.first-section .contenedor_imagen .imagen {
    border-radius: 1vh;
}

}
/*Vista celular*/
@media (orientation: portrait) {

    body {
    margin: 0px;
    padding: 0px;
    border: 0px;
    font-family: "Antonio";
    background-color: black;
}

    body h1 {
        font-size: clamp(2rem, 5vh, 5rem);
    }
    /*Tamaño de texto funcional y adaptable*/
    body p {
        font-size: clamp(1.2rem, 3vh, 2.4rem);
        font-family: "Lato";
    }
    
.sombreado {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}



/*Fondo de la pagina web*/

.contenedor_imagen {
    position: relative;
    width: auto;
}

.imagen_fondo_superior {

    width: 100%;
    max-height: auto;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: 0.5s ease;
    z-index: -2;
    overflow: hidden;
    will-change: transform, opacity;
    transform: scale(1.0);
}

.logo_vibrato {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    width: 80%;
    height: auto;
    transition: 0.5s ease;
    will-change: transform, opacity;
    top: calc(35%);  
    left:calc(50%); 
    transform: translate(-50%, -50%);

}


/*Separador*/

#separador {
    min-height: 3vh;
}

#separador_w {
    min-width: 3vw;
}

/*Primera seccion de contenido*/
#primera_seccion {
    display: block;
    width: 100%;
    height: auto;
    justify-content: space-between;
    text-align: center;
    align-items: start;
}

#carouselImagenes {
    position: relative;
    max-width: 100%;
    height: auto;
    color: white;
}

#carouselImagenes .carousel-indicators {
    position: absolute;
    top: calc(100%);
    left: calc(0%);
    width: 100%;
    height: 3vh;
    margin: 0%;
    z-index: 2;
}

.carousel-indicators .active {
    background-color: #FFFFFF;
    opacity: 1;
    z-index: 2;
}

.carousel-indicators button {
        width: 3vw;
        height: 2vh;
        border: none;
    }

#carouselImages .carousel-inner {
    position: relative;
    width: 100%;
    height: auto;
}
.carousel-inner{
    border-radius: 0;
    }


.carousel-inner .carousel-item{
    border-radius: 0;
    position: relative;
    }

.carousel-inner .carousel-item .parrafo_en_card{
position: absolute;
text-align: left;
top: calc(50%);
left: calc(5%);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    line-height: 1;
font-size: clamp(1.2rem, 4vh, 2.4rem);
}



    #acomodador {
    min-width: 1vw;
}

.tarjeta_informacion {
    width: 100%;
    font-size: clamp(1rem, 1.5vw, 5rem);
    position: relative;
    width: fit-content;
    height: fit-content;
    margin-top: 2vh;
}

.tarjeta_informacion .first-section {
    width: 100%;
    height: 100%;
}
.tarjeta_informacion .first-section .contenedor_imagen {
    position: relative;
    width: 100%;
    height: auto;
    pointer-events: none;
    z-index: -1;
    margin: 0px;
}



.tarjeta_informacion .first-section .contenedor_imagen .imagen {
    width: 100%;
    height: auto;
    position: relative;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
    transition: 0.3s ease, transform 0.3s ease;
    opacity: 1;
}

.tarjeta_informacion button {
    width: auto;
    height: auto;
    font-size: clamp(1rem, 1.5vw, 5rem);
}

.first-section {
    z-index: -1;
}

.second-section {
    text-align: start;
    position: absolute;
    width: auto;
    color: white;
    z-index: 1;
    top: 50%;
    left: 10%;

}

}