.catalogo {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Distribuye las columnas de forma flexible */
      gap: 20px;
      justify-content: center;
      padding: 20px;
      width: 100%;
      max-width: 1200px; /* Limita el ancho máximo del catálogo */
      margin: 0 auto; /* Centra el catálogo horizontalmente */
  }
  
  .imagen-container {
      position: relative;
      overflow: hidden;
      background-color: #e0f7fa; /* Fondo celeste */
      border-radius: 10px;
      padding: 10px;
      box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
      cursor: pointer;
      transition: transform 0.5s ease, box-shadow 0.5s ease;
      text-align: center;
  }
  
  .imagen-container img {
      width: 100%;
      height: auto;
      max-height: 250px; /* Limita la altura de las imágenes */
      object-fit: cover; /* Mantiene la proporción de las imágenes */
      transition: transform 0.5s ease;
      transform: scale(1);
  }
  
  .imagen-container:hover {
      transform: scale(1.1) rotateY(15deg) rotateX(10deg); /* Efecto 3D más pronunciado */
  }
  
  .imagen-container:hover img {
      transform: scale(1.2); /* Zoom más grande al pasar el cursor */
  }
  
  .imagen-container:active {
      transform: rotateY(180deg) rotateX(180deg); /* Efecto 3D al hacer clic */
      transition: transform 0.8s ease; /* Suaviza la transición */
  }
  
  .info {
      margin-top: 10px;
  }
  
  .btn-agregar {
      margin-top: 10px;
      padding: 10px 20px;
      background-color: #007bff;
      color: #fff;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      transition: background-color 0.3s ease;
  }
  
  .btn-agregar:hover {
      background-color: #0056b3;
  }
  
  /* Media queries para adaptabilidad */
  
  /* Tablets y pantallas medianas */
  @media (max-width: 768px) {
      .catalogo {
          grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Ajusta las columnas para pantallas medianas */
      }
  
      .imagen-container {
          padding: 8px;
      }
  
      .btn-agregar {
          padding: 8px 15px;
      }
  }
  
  /* Móviles y pantallas pequeñas */
  @media (max-width: 480px) {
      .catalogo {
          grid-template-columns: 1fr; /* Una columna en pantallas pequeñas */
          gap: 15px;
      }
  
      .imagen-container {
          padding: 5px;
      }
  
      .imagen-container img {
          max-height: 200px; /* Ajusta la altura de las imágenes en pantallas pequeñas */
      }
  
      .btn-agregar {
          padding: 6px 10px;
      }
  }