/**
 * ============================================
 * SALADOS-CUSTOM.CSS
 * ============================================
 * Estilos específicos para la página de salados (salados.html)
 * Incluye: tipografía, listas en cards, grid de productos
 */

/* ============================================
   TIPOGRAFÍA
   ============================================ */
body { 
  font-family: 'Noto Sans', sans-serif; 
}

/* Títulos: Noto Serif Display Thin (100) en toda la web */
.font-serif { 
  font-family: 'Noto Serif Display', serif; 
  font-weight: 100; 
}

/* ============================================
   LISTAS EN CARDS
   ============================================ */
/* Lista con viñetas en cards (alineada con intro) */
.subtitulo-contenido .subtitulo-linea-intro { 
  display: block; 
}

.subtitulo-contenido .subtitulo-lista-card {
  list-style-type: disc;
  margin: 0.25rem 0 0 0;
  padding-left: 1.25rem;
  list-style-position: outside;
}

.subtitulo-contenido .subtitulo-lista-card li {
  margin-bottom: 0.125rem;
}

/* ============================================
   GRID DE PRODUCTOS
   ============================================ */
/* Grid 4 columnas máx, centrado; columnas dinámicas según cantidad de productos */
#productos-grid {
  display: grid;
  gap: 1.5rem;
  margin: 0 auto;
  width: 100%;
  grid-template-columns: 1fr;
  justify-items: center;
}

#productos-grid > * {
  max-width: 260px;
  width: 100%;
}

@media (min-width: 600px) {
  #productos-grid {
    grid-template-columns: repeat(var(--cols, 4), 260px);
    width: fit-content;
  }
}