/* ==================================================
   PRODUCTOS DESTACADOS - ESTILOS PERSONALIZADOS
================================================== */

/* Contenedor de imagen con altura fija y centrado */
.producto-imagen-container {
  height: 250px; /* Establece la altura fija del contenedor */
  overflow: hidden; /* Oculta cualquier contenido que se desborde */
  position: relative; /* Necesario para posicionar los elementos dentro */
  background-color: #f8f8f8; /* Fondo gris claro */
  display: flex; /* Usamos flexbox para centrar la imagen */
  align-items: center; /* Alinea la imagen verticalmente en el centro */
  justify-content: center; /* Alinea la imagen horizontalmente en el centro */
  padding: 1rem; /* Agrega un pequeño espaciado alrededor */
}

/* Imagen del producto centrada y contenida */
.producto-imagen {
  max-height: 100%; /* Limita la altura de la imagen al contenedor */
  max-width: 100%; /* Limita el ancho de la imagen al contenedor */
  object-fit: contain; /* Mantiene las proporciones de la imagen dentro del contenedor */
  object-position: center; /* Centra la imagen dentro del contenedor */
  display: block; /* Elimina el espacio debajo de la imagen */
}

/* Efecto de zoom suave al pasar el cursor */
.producto-imagen-container:hover .producto-imagen {
  transform: scale(
    1.05
  ); /* Aumenta el tamaño de la imagen un 5% al hacer hover */
  transition: transform 0.3s ease; /* Transición suave de 0.3 segundos */
}

/* Estilo de la tarjeta para altura uniforme */
.producto-card {
  display: flex; /* Usamos flexbox para la disposición */
  flex-direction: column; /* Los elementos dentro de la tarjeta se apilan verticalmente */
  height: 100%; /* Asegura que la tarjeta ocupe toda la altura disponible */
}

/* Contenido ocupa todo el alto disponible */
.producto-contenido {
  flex: 1; /* El contenido toma el espacio restante disponible */
  display: flex; /* Usamos flexbox para la disposición interna */
  flex-direction: column; /* Los elementos dentro del contenido se apilan verticalmente */
}

/* Botón "Ver más" pegado al fondo */
.producto-enlace {
  margin-top: auto; /* El botón se mueve automáticamente al final del contenedor */
}