/* ==========================================================================
   sections.css — composición de secciones de página y utilidades de layout
   que no son componentes reutilizables. Solo usa tokens de tokens.css.
   ========================================================================== */

/* Accesos rápidos: se superponen al borde inferior del hero */
.quick-access { position: relative; z-index: 1; margin-top: calc(-1 * var(--space-8)); }
@media (min-width: 48em) { .quick-access { margin-top: calc(-1 * var(--space-16)); } }

/* Resultados de búsqueda: una columna */
.card-grid--results { grid-template-columns: 1fr; gap: var(--space-3); }

/* Separación vertical puntual */
.u-mt { margin-top: var(--space-6); }

/* Ancla de secciones con encabezado propio dentro de .stack */
.stack > section > h2 { margin-bottom: var(--space-5); }

/* --- Página de componentes (referencia interna) -------------------------- */
.showcase { padding-top: var(--space-8); border-top: var(--border-width) solid var(--color-border); }
.showcase__title { font-size: var(--text-xl); }
.showcase__row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.showcase__row--dark { margin-top: var(--space-4); padding: var(--space-5); background: var(--color-structure); border-radius: var(--radius-lg); }
.showcase__bleed { border-radius: var(--radius-lg); }

.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.swatch { display: grid; gap: var(--space-1); font-size: var(--text-sm); }
.swatch__color { height: 4.5rem; border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); }
.swatch__name { font-weight: var(--weight-semibold); color: var(--color-text-strong); }
.swatch__value { color: var(--color-text-muted); }

.type-sample__h1 { font-size: var(--text-3xl); font-weight: var(--weight-bold); line-height: var(--leading-tight); color: var(--color-heading); }
.type-sample__h2 { font-size: var(--text-2xl); font-weight: var(--weight-bold); line-height: var(--leading-tight); color: var(--color-heading); }
.type-sample__h3 { font-size: var(--text-lg); font-weight: var(--weight-bold); color: var(--color-heading); }
.hero .type-sample__h1 { color: var(--color-on-primary); }

/* Estado vacío/error ocupa toda la fila de la grilla */
.feed__state { grid-column: 1 / -1; }

.swatch__color--blue-700 { background: var(--blue-700); }
.swatch__color--blue-900 { background: var(--blue-900); }
.swatch__color--yellow-400 { background: var(--yellow-400); }
.swatch__color--yellow-500 { background: var(--yellow-500); }
.swatch__color--terracotta-700 { background: var(--terracotta-700); }
.swatch__color--white { background: var(--white); }
.swatch__color--gray-50 { background: var(--gray-50); }
.swatch__color--gray-800 { background: var(--gray-800); }
.swatch__color--gray-900 { background: var(--gray-900); }