/* ==========================================================================
   MENÚ DE CATEGORÍAS
   Botones tipo píldora para filtrar los productos en el catálogo
   ========================================================================== */
.categorias-menu {
  display: flex;             /* Usa Flexbox para alinear los enlaces en una fila elástica */
  justify-content: center;   /* Centra los botones de categoría horizontalmente */
  flex-wrap: wrap;           /* Permite que los botones bajen de línea ordenadamente en móviles */
  gap: 12px;                 /* Espacio de separación idéntico entre cada botón */
  margin: 25px 0 35px;       /* Separación de 25px superior y 35px inferior con el grid */
}

/* --- Botones individuales de categoría (Links) --- */
.categorias-menu a {
  padding: 10px 20px;        /* Espaciado interno cómodo para la pulsación */
  border-radius: 20px;       /* Bordes redondeados tipo píldora */
  background: #e3e6e6;       /* Fondo gris claro neutro estilo Amazon para botones secundarios */
  color: var(--texto-oscuro);/* Aplica el color gris casi negro para máxima legibilidad */
  text-decoration: none;     /* Quita el subrayado clásico de los enlaces */
  font-weight: 600;          /* Texto en grosor seminegrita */
  font-size: 15px;           /* Tamaño de letra equilibrado */
  transition: all 0.25s ease;/* Animación fluida para los cambios de color */
}

/* --- Efecto al pasar el ratón por encima de una categoría --- */
.categorias-menu a:hover {
  background: #d5d9d9;       /* Oscurece sutilmente el fondo gris para dar feedback visual */
  color: var(--texto-oscuro);/* Mantiene el texto oscuro legible */
}

/* --- Categoría actualmente seleccionada (Clase activa por JS) --- */
.categorias-menu a.activo {
  background: var(--azul-oscuro); /* Cambiado al azul navy corporativo para la categoría seleccionada */
  color: var(--blanco);           /* Letras en blanco para contrastar perfectamente */
}

/* ==========================================================================
   GRID DE PRODUCTOS
   Contenedor principal auto-responsivo que organiza las tarjetas
   ========================================================================== */
.productos-grid {
  display: grid;             /* Activa el modelo Grid Layout para estructurar las celdas */
  /* Genera columnas automáticas según el espacio; cada tarjeta medirá mínimo 280px y máximo 1 fracción */
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); 
  gap: 30px;                 /* Distancia de separación de 30px entre las tarjetas del catálogo */
  padding: 30px;             /* Colchón de espacio interno para el contenedor */
  max-width: 1200px;         /* Limita el ancho máximo del catálogo en pantallas de PC */
  margin: auto;              /* Centra el bloque entero en el monitor */
}

/* ==========================================================================
   CARD PRODUCTO
   Tarjeta individual para la visualización de cada artículo
   ========================================================================== */
.producto {
  background: var(--blanco);         /* Aplica el color blanco puro guardado en tus variables globales */
  display: flex;                     /* Convierte la tarjeta en un contenedor flexible */
  flex-direction: column;            /* Coloca los elementos internamente en vertical (Img -> Texto -> Botón) */
  justify-content: space-between;    /* Empuja el botón de compra siempre a la base de la tarjeta */
  border-radius: 18px;               /* Esquinas suavizadas y modernas para la tarjeta */
  padding: 18px;                     /* Espaciado interno para descolapsar el contenido de los bordes */
  text-align: center;                /* Centra todos los textos y el botón de la tarjeta */
  box-shadow: 0 4px 15px rgba(0,0,0,0.05); /* Sombra suave y ligera en la base para dar volumen */
  border: 1px solid #ddd;            /* Añade un marco perimetral fino para delimitar el producto */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transición suave para efectos interactivos */
}

/* --- Animación de elevación al posicionarse sobre la tarjeta --- */
.producto:hover {
  transform: translateY(-6px);       /* Eleva físicamente la tarjeta 6px hacia arriba */
  box-shadow: 0 10px 25px rgba(0,0,0,0.1); /* Intensifica la sombra para simular flotabilidad */
}

/* ==========================================================================
   IMAGEN DEL PRODUCTO
   ========================================================================== */
.producto img {
  width: 100%;               /* Forza a la imagen a ocupar todo el ancho disponible del contenedor */
  height: 230px;             /* Establece una altura fija estándar para homogeneizar todas las fotos */
  object-fit: contain;       /* Cambiado a contain para que los productos 3D se vean enteros sin recortarse */
  border-radius: 14px;       /* Redondeado suave en las esquinas de la foto */
  margin-bottom: 12px;       /* Distancia de separación inferior con respecto al título */
  background: #f9f9f9;       /* Fondo gris neutro muy claro en caso de imágenes transparentes */
}

/* ==========================================================================
   TEXTO Y DETALLES DEL PRODUCTO
   ========================================================================== */
/* --- Título del Producto --- */
.producto h3 {
  margin: 12px 0 6px;        /* Regula los márgenes superior e inferior de la etiqueta */
  font-size: 18px;           /* Tamaño jerárquico destacado para el nombre */
  color: var(--texto-oscuro);/* Aplica el tono principal para textos */
}

/* --- Descripción Corta --- */
.producto p {
  font-size: 14px;           /* Fuente compacta para información secundaria */
  color: #565959;            /* Gris tenue estilo Amazon para descripciones secundarias */
  margin: 6px 0;             /* Separación vertical equilibrada */
}

/* --- Precio Destacado --- */
.precio {
  font-weight: bold;         /* Resalta la cifra numérica en negrita */
  color: #b12704;            /* Cambiado al color rojo/granate característico de precios de Amazon */
  font-size: 22px;           /* Tamaño de letra mayor para captar la atención del comprador */
  margin: 10px 0;            /* Espacio de separación vertical */
}

/* ==========================================================================
   BOTÓN AÑADIR AL CARRITO
   Llamada a la acción principal dentro de la tarjeta
   ========================================================================== */
.producto input[type="submit"] {
  width: 100%;                        /* Estira el botón para ocupar todo el ancho disponible */
  padding: 12px;                      /* Espaciado interno para una pulsación cómoda */
  background: var(--naranja-amz);    /* Modificado al color naranja oficial de tus botones */
  color: var(--texto-oscuro);         /* Texto oscuro para garantizar el contraste y la accesibilidad */
  border: 1px solid #a88734;          /* Contorno perimetral en tono marrón dorado para dar solidez */
  border-radius: 20px;                /* Redondeado en formato píldora consistente con los botones del Hero */
  font-weight: bold;                  /* Texto en negrita para recalcar la acción */
  font-size: 14px;                    /* Tamaño estandarizado para botones de compra */
  cursor: pointer;                    /* Activa el puntero de mano interactivo */
  margin-top: 15px;                   /* Separación superior extra con el precio */
  transition: all 0.2s ease;          /* Suaviza las microanimaciones del botón */
  box-shadow: 0 2px 5px rgba(213,217,217,.5); /* Sombra base integrada */
}

/* --- Efecto dinámico al pasar el cursor sobre el botón de añadir --- */
.producto input[type="submit"]:hover {
  background: #f3a847;                /* Cambia al naranja más profundo al igual que tus otros botones */
  border-color: #846a29;              /* Oscurece levemente el borde en sintonía con el fondo */
  transform: translateY(-1px);        /* Micro-elevación limpia */
}