/* ============================================================
   components.css — Componentes reutilizables
   ============================================================ */

/* ── Etiqueta de sección ── */
.section-label {
  font-family:    var(--font-display);
  font-size:      var(--text-13);   /* mínimo legible en naranja */
  font-weight:    600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color:          var(--color-orange);
  margin-bottom:  var(--space-xs);
}

/* ── Tags ── */
.tags {
  display:  flex;
  gap:      var(--space-xs);
  flex-wrap: wrap;
}

.tag {
  font-family:    var(--font-display);
  font-size:      var(--text-13);
  letter-spacing: 1px;
  text-transform: uppercase;
  color:          var(--color-navy);
  border:         1px solid var(--color-navy);
  padding:        3px 10px;
}

/* ── Muestras de color ── */
.colors-row {
  display:     flex;
  gap:         var(--space-md);
  align-items: flex-start;
  flex-wrap:   wrap;
}

.color-item {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            6px;
}

.color-swatch {
  width:  28px;
  height: 28px;
  border: 1px solid var(--color-gray-line);
}

.color-name {
  font-family:    var(--font-display);
  font-size:      var(--text-13);
  color:          var(--color-gray-mid);
}

/* ── Placeholder de imagen ── */
.img-placeholder {
  font-family:    var(--font-display);
  font-size:      var(--text-13);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color:          var(--color-gray-soft);
  padding:        var(--space-md);
  text-align:     center;
}