@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
.adelante{
    width: 5%;
}

.atras{
    width: 5%;
}

.carrusel-bundle{
     margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    width: 80%;
    padding-top: 1%;
    padding-bottom: 3%;
}

.imagenes{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: end;
}

.img{
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.85);
     margin: auto;
   
    border-radius: 15px ;
   
    object-fit: cover;
    filter: saturate(175%);
}

.texto{
    overflow: hidden;
    position: absolute;
    flex-direction: column;
    transform: translateY(0px);
    margin-bottom: 9px;
    backdrop-filter: blur(20px);
    background-color: rgba(152, 149, 149, 0.21);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 30px;
}

.texto h3{
    text-shadow: 0px 0px 15px black;
    padding-top: 40px;
    color: white;
    font-weight: 300;
    font-size: 27px;
}

.texto p{
    align-items: center;
    padding: 0px;
    color:white;
    font-size: 0px;
    font-weight: 300;
}

.imagenes .texto{
    width: 50%;
    height: 100px;
    transition: 1s;
}

.imagenes:hover .texto{
    transition: height 1s, transform 1s, background-color 1s;
    transform: translateY(-150px);
    height: 300px;
    background-color: rgba(152, 149, 149, 0.71);
}

.imagenes:hover .texto p{
    transition: font-size 0s .2s linear;
    font-size: 23px;
    font-weight: 300;

    text-shadow: 0px 0px 10px #000000;
}

.puntos{
    display: flex;
    align-items: center;
    justify-content: center;
}

.puntos p{
    font-size: 100px;
    font-weight: 500;
    margin-top: -50px;
    color: lightgray;
}

.puntos .bold{
    font-weight: 700;
    margin-left: 10px;
    margin-right: 10px;
    color: #EB0028 ;
}

@media (max-width: 450px){
    
 .texto h3 {
    text-shadow: 0px 0px 15px black;
    padding-top: 1px;
    color: white;
    font-weight: 300;
    font-size: 27px;
}
    
.carrusel-bundle {
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    width: 90%;
    padding-top: 3%;
    padding-bottom: 3%;
}
    
  .imagenes .texto{
    width: 80%;
    height: 50px;
    transition: 1s;
}
    
.imagenes:hover .texto{
    transition: height 1s, transform 1s, background-color 1s;
    transform: translateY(-50px);
    height: 100px;
    background-color: rgba(152, 149, 149, 0.71);
}

.imagenes:hover .texto p{
    transition: font-size 0s .2s linear;
    font-size: 23px;
    font-weight: 50;

    text-shadow: 0px 0px 10px #000000;
}
    
    
.adelante{
    width: 20%;
}

.atras{
    width: 20%;
}   
    
}