
* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  background-color: rgba(20, 32, 50, 1);
}

body {

    margin: 0;
    display: flex;
    justify-content: center; /* Centra horizontalmente */
                             /*   align-items: center;  Centra verticalmente */
    min-height: 100vh;      /* Asegura que el body ocupe toda la altura de la ventana */
    background-color: rgba(20, 32, 50, 1); /* Opcional: fondo agradable */
  
}

.ochenta {   /* Centra y reducir div al 80% */

    width: 80%;
    margin: auto;

}


.cientodiez {   /* Centra y reducir div al 110% */

    width: 110%;
    margin: auto;

}

.comollegar {
    background-color: rgba(20, 32, 50, 1);
}


.espacio {
    width: 100%;
    height: 70px;

}

.animalogo {    /* Animar logo   5s linear 3s infinite both; */

    animation:flicker 1.5s linear infinite both

}
 @keyframes flicker{
    0%,100%{opacity:1}41.99%{opacity:1}42%{opacity:0}43%{opacity:0}43.01%{opacity:1}47.99%{opacity:1}48%{opacity:0}49%{opacity:0}49.01%{opacity:1}
}


.animaportada {   /*meter animacion de la portada */
    animation:scale-up-bottom 5s linear 2s both; 
} 
@keyframes scale-up-bottom{
     0%{
        transform:scale(0);
        transform-origin:center center
       }
    
    100%{
        transform:scale(1);
        transform-origin:center bottom
       }
}

 /* Animar desaparecer  animation: blur-out-expand 5s linear 3s infinite both; */

.animaprecio {

    animation:slide-rotate-horizontal-bottom 10s linear 10s infinite both
} 

    @keyframes slide-rotate-horizontal-bottom{

        0% {
            transform:translateY(0) rotateX(0deg)
            }
        
        100%{
            transform:translateY(150px) rotateX(90deg)
        }
    } 


.animablur {  /* Animar animablur  animation: blur-out-expand 5s linear 3s infinite both; */


        animation: blur-out-expand 5s linear 5s infinite both;
    }

    @keyframes blur-out-expand {
        0% {
           
            transform: scale(1);
            filter: blur(0.10px);
            opacity: 1;
        }
        100% {
            
            transform: scale(2);
            filter: blur(12px);
            opacity: 0;
        }
    }

        /* Oculta las tarjetas al inicio */
.retraso {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 20s ease-out, transform 20s ease-out;
        }



        /* Personalizar flechas */
.carousel-control-prev-icon, 
.carousel-control-next-icon {
            width: 80px; /* Aumentar tamaño */
            height: 80px;
            filter: invert(0%);
            /*   Cambiar color (100% blanco, 0% negro) */
        }
        
        /* Opcional: cambiar el fondo del botón para que se vea mejor 
        .carousel-control-prev, 
        .carousel-control-next {
         background: rgba(255, 0, 0, 1); /* Fondo semitransparente
            width: 10%; /* Hacer los botones más grandes */
        
            .rotanoventa {
                transform: rotate(90deg); /* Rota el carrusel */
              /*  width: 100vh;  Mantiene el tamaño adecuado 
                height: 100vw;
                position: absolute;
                top: 50%;
                left: 50%; 
                transform-origin: center;
                translate: -50% -50%; */
            }
                /* Rota el carrusel pero no hace nada esto 
            .carousel-inner {
                display: flex;
            }  */
    
            .rotamenosnoventa img {
                transform: rotate(-90deg); /* Rota las imágenes de vuelta 
                width: 100vw;
                height: 100vh; 
                object-fit: cover;*/
            }

.icono {
    position: fixed;
    left: 280px;
    top: 40px;
    width: 12%;
}
 .tex-iconos{
   color: white;
   font-size: .8em;

 }

.tex-venta {
    color: rgb(48, 35, 19);
    margin-top: 0px;
    font-size: 2em;
    font-family: montserrat;
}

.tex-menu {
    color: rgb(255, 255, 255);
    font-size: 2em;
    font-family: tangerine;
}
.tex-primera{
    color: burlywood;
    position: relative;
    top: -168px;
    left: 50px;
    font-size: 1em;
    font-family: montserrat;

}
 .zona-texto {
     margin-top: -100px;
 }

  .logo-escon {
      width: 60%;
      opacity: 0.4;
  }

