/* --- Estilos Generales --- */
body {
  font-family: Arial, sans-serif;
  margin-top: 100px;
  padding: 0;
  background-color: #2e3848; /* Fondo principal más oscuro, como en tu imagen */
}

/* --- NAVBAR --- */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 20px;
  background-color: #12181b;
  color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  z-index: 1000;
}

.navbar .logo img {
  max-width: 60px;
  height: auto;
  display: block;
}

.navbar .nav-links {
  list-style: none;
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}

.navbar .nav-links li {
  white-space: nowrap;
}

.navbar .nav-links a {
  color: rgb(232, 225, 225);
  text-decoration: none;
  font-size: 1em;
  transition: color 0.3s;
}

.navbar .nav-links a:hover {
  color: #195d7b;
}

/* --- SECCIÓN PRODUCT-LIST --- */
.product-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  padding: 20px;
  max-width: 1200px; /* Limita el ancho máximo del CONTENEDOR de productos */
  margin: 0 auto; /* Centra la lista de productos en pantallas grandes */
}

/* Quita subrayado y color azul de los enlaces de productos */
.product-list a {
  text-decoration: none;
  color: inherit;
}

/* Evita el color de enlace visitado */
.product-list a:visited {
  color: inherit;
}

/* Opcional: efecto al pasar el mouse */
.product-list a:hover .product,
.product-list a:focus .product {
  box-shadow: 0 6px 16px rgba(0,0,0,0.25);
  transform: translateY(-2px) scale(1.02);
  transition: box-shadow 0.2s, transform 0.2s;
}

/* --- PRODUCT INDIVIDUAL (.product) --- */
/* Mobile-First: Estilos base para una columna en móviles */
.product {
  background-color: #242829;
  width: calc(100% - 40px); /* Ocupa casi todo el ancho en móviles */
  max-width: 300px; /* Limita el ancho máximo de la TARJETA individual en móvil */
  margin: 10px auto; /* Centra la tarjeta individual en móvil */
  padding: 10px;
  box-sizing: border-box;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 8px;
}

.product img {
  width: 80%;
  height: auto;
  display: block;
  margin: 10px auto;
  max-width: 90%;
  border-radius: 3px;
}

.product h2 {
  color: #f8f2f2;
  font-size: 1.2em;
  margin-top: 5px;
  margin-bottom: 5px;
}

.product p {
  color: #f3f1f1;
  font-size: 0.85em;
  line-height: 1.4;
  flex-grow: 1;
  margin-bottom: 5px;
}

.precio {
  color: #e3ded7;
  font-weight: bold;
  margin-top: 1px;
  font-size: 1.1em;
}

.product button {
  background-color: #464955;
  color: #FFFFFF;
  border: none;
  padding: 8px 5px;
  cursor: pointer;
  border-radius: 5px;
  margin-top: 2px;
  transition: background-color 0.3s ease;
}

.product button:hover {
  background-color: #dce3e9;
  color: #000000;
}

.derechos {
  text-align: center;
  padding: 15px 0;
  color: #fff;
  font-size: 0.5em;
  margin-top: 10px;
  background-color: #12181b;
  width: 100%;
  box-sizing: border-box;
}

/* --- MEDIA QUERIES (Mobile-First) --- */