/* ==========================================================================
   layout.css — Ritmo de secciones, rejillas y cabeceras de sección
   ========================================================================== */

main { display: block; }

/* ----- Sección base ----- */
.section {
  position: relative;
  padding: var(--space-section) var(--gutter);
  overflow: hidden;
}
.section--light { background: var(--c-cream); }
.section--alt   { background: var(--c-cream-alt); }
.section--dark  { background: var(--c-ink-900); color: var(--c-on-dark); }

.section__inner { position: relative; max-width: var(--container); margin-inline: auto; }
.section__inner--narrow { max-width: var(--container-narrow); }
.section__inner--tight  { max-width: var(--container-tight); }

/* ----- Cabecera de sección: 01 ─────── ETIQUETA ----- */
.sec-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: clamp(36px, 5vw, 60px);
}
.sec-head__num {
  font-family: var(--font-serif);
  font-size: 15px;
  color: var(--c-teal);
  letter-spacing: .04em;
}
.sec-head__line { flex: 1; height: 1px; background: var(--c-border-soft); }
.sec-head__label {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-muted-2);
}

/* Variante sobre fondo oscuro */
.section--dark .sec-head__num   { color: var(--c-teal-200); }
.section--dark .sec-head__line  { background: rgba(255, 255, 255, .14); }
.section--dark .sec-head__label { color: var(--c-on-dark-faint); }

/* ----- Bloque de intro (título + lead) ----- */
.intro { max-width: 780px; }
.intro__title { font-size: var(--fs-h2); margin-bottom: 20px; }
.intro__lead {
  font-size: var(--fs-lead-sm);
  line-height: 1.6;
  color: var(--c-ink-body);
  max-width: 600px;
}
.section--dark .intro__lead { color: var(--c-on-dark-soft); }

/* ----- Rejillas reutilizables ----- */
.grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(18px, 2vw, 28px);
}
.grid-auto--sm { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }