/* ============================================================
   LAYOUT — Wrap, secciones, grid base, responsive
   ============================================================ */

/* ── Contenedor principal ── */
.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ── Secciones ── */
section {
  padding-block: var(--section-y);
  position: relative;
}

/* ── Cabecera de sección ── */
.section-head {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 56px;
  align-items: end;
  margin-bottom: 64px;
}
.section-head .left  { display: flex; flex-direction: column; gap: 14px; }
.section-head .right h2 { font-size: var(--t-h1); line-height: 1.08; max-width: 18ch; }
.section-head .right .lede { margin-top: 18px; }

/* ── Grid 2 columnas estándar ── */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
}
.grid-2-asym {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 96px;
}
.grid-2-wide {
  display: grid;
  grid-template-columns: 1fr 2.2fr;
  gap: 56px;
}

/* ── Responsive ── */
@media (max-width: 1100px) {
  :root { --gutter: 40px; }
}

@media (max-width: 900px) {
  :root { --gutter: 24px; }

  .section-head,
  .grid-2,
  .grid-2-asym,
  .grid-2-wide {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

@media (max-width: 600px) {
  :root {
    --gutter: 20px;
    --section-y: clamp(60px, 8vw, 100px);
  }
}