/* =========================
   CARDS.CSS
   Estilos para las tarjetas de productos
========================= */


.card {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: var(--shadow-light);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  width: 280px; /* Ancho fijo para las tarjetas */
}

.card img {
  width: 55%;
  height: 180px;
  object-fit: cover;
  display: block;
  margin: 0 auto;
}

.card-info {
  padding: 15px;
  text-align: center;
}

.card-info h2 {
  font-size: 1rem;
  margin-bottom: 8px;
}

.card-info p {
  color: var(--color-primary);
  font-weight: 600;
  margin-bottom: 10px;
}
/*solo funciona el header checa eso*/
.nav {
    background-color: #b89280;
    padding: 12px 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid #000000;
}

.nav a {
    margin: 0 40px;
    text-decoration: none;
    color: #000000;
    font-weight: 500;
}

.nav a:hover {
    color: #e9e481; /* Color al hacer hover */
}