* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  background-color: rgb(0, 0, 0);
}

body {
    margin: auto;
    max-width: 800px;
    background-color: rgb(0, 0, 0);
    justify-content: center; /* Centra horizontalmente */
}


/* Estilos para el contenedor del iframe */
.catalogo-container {
  position: relative; /* Muy importante para posicionar el iframe dentro */
  width: 90%; /* Ajusta este valor: 100% para todo el ancho, 80% si quieres márgenes, etc. */
  max-width: 900px; /* Un ancho máximo para que no se estire demasiado en pantallas muy grandes */
  margin: 20px auto; /* Centra el contenedor horizontalmente y le da un margen superior/inferior */
  padding-bottom: 75%; /* Esto crea una relación de aspecto 4:3 (altura / ancho * 100%). Prueba 56.25% para 16:9 */
  height: 0; /* Para que el padding-bottom determine la altura responsiva */
  overflow: hidden; /* Oculta cualquier cosa que se salga */
  background-color: #fff; /* Opcional: un fondo blanco para el área del PDF */
  border-radius: 8px; /* Opcional: bordes ligeramente redondeados */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Opcional: una sombra sutil */
}

/* Estilos para el iframe dentro del contenedor */
.catalogo-container iframe {
  position: absolute; /* Para que ocupe todo el espacio del contenedor */
  top: 0;
  left: 0;
  width: 100%; /* Ocupa todo el ancho del contenedor */
  height: 100%; /* Ocupa toda la altura del contenedor */
  border: none; /* Elimina el borde */
}

/* Opcional: Media Query para ajustar en móviles si es necesario */
@media (max-width: 768px) {
  .catalogo-container {
    width: 95%; /* Un poco más de ancho en móviles */
    padding-bottom: 120%; /* Podrías necesitar una relación más "vertical" para móviles, ajusta este valor */
    margin-top: 10px;
    margin-bottom: 10px;
  }
}
/* Definir el tamaño  del carrusel */
.carousel {
    margin:auto;
    width: 80%; /* Ancho del carrusel */
    /* height: 40%; Alto del carrusel */
  }
  
/* Ajustar imágenes  manteniendo proporciones y centrarlas */
.carousel-item img {
  
    object-fit: contain; /* Ajusta sin recortar */
    background-color: #000; /* Color de fondo para rellenar espacios */
    display: block; /* Permite centrar con margin */
    margin: auto; /* Centra la imagen */
  }


/* Estilo del nombre de la imagen */
.carousel-caption {
    background: rgba(0, 0, 0, 0.6);
    padding: 10px;
    border-radius: 5px;
}

.tex-venta {
    font-size: xx-large;
    font-family: montserrat;
    color: rgb(115, 149, 244);
    margin-top: 0px;

}


.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;
      }