/* ================================================================
   LAYOUT.CSS — Contenedores, grids globales, helpers
================================================================ */

.wrap     { max-width: var(--max-w); margin-inline: auto; padding-inline: var(--sp-lg); }
.wrap-sm  { max-width: 860px; margin-inline: auto; padding-inline: var(--sp-lg); }
.ctr      { text-align: center; }
.flex     { display: flex; }
.grid     { display: grid; }

/* Sección genérica */
section {
  padding-block: var(--sp-3xl);
  position: relative;
  overflow: hidden;
}

/* Cabeceras de sección */
.sec-tag {
  display: inline-block;
  font-family: var(--ff-body);
  font-size: .7rem;
  font-weight: var(--fw-semi);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gm);
  margin-bottom: var(--sp-sm);
}
.sec-tag.gold { color: var(--gold); }

.sec-h {
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  font-weight: var(--fw-black);
  color: var(--g0);
  line-height: 1.1;
  margin-bottom: var(--sp-sm);
}
.sec-h.light { color: var(--crw); }
.sec-h .c-g  { color: var(--gm); }
.sec-h .c-i  { font-style: italic; }
.sec-h .c-gold { color: var(--gold); }
.sec-h .c-b  { color: var(--gm); }

.sec-rule {
  display: flex; align-items: center; justify-content: center;
  gap: var(--sp-sm); margin-block: var(--sp-sm);
}
.sec-rule::before, .sec-rule::after {
  content: ''; flex: 1; max-width: 60px;
  height: 1px; background: currentColor; opacity: .25;
}

.sec-lead {
  font-size: 1.05rem; color: #4a5550;
  max-width: 600px; margin-inline: auto;
  margin-bottom: var(--sp-lg);
}

/* Divisor decorativo */
.wave-div {
  display: block; width: 100%;
  line-height: 0; overflow: hidden;
}
.wave-div svg { display: block; width: 100%; }