/* ═══════════════════════════════════════════════════════════
   MISUNET · Contenedores, ritmo vertical y rejillas
   ═══════════════════════════════════════════════════════════ */

.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.section{
  position:relative;
  padding-block:var(--section-y);
}
.section--tight{ padding-block:clamp(3rem,2rem + 4vw,5.5rem); }

/* ── Cabecera de sección ────────────────────────────────── */
.s-head{ max-width:760px; margin-bottom:clamp(3rem,2rem + 3vw,4.5rem); }
.s-head--center{ margin-inline:auto; text-align:center; }

.eyebrow{
  display:inline-flex; align-items:center; gap:.65em;
  font-family:var(--font-mono);
  font-size:var(--fs-xs);
  font-weight:500;
  letter-spacing:var(--tracking-wide);
  text-transform:uppercase;
  color:var(--brand-600);
  margin-bottom:var(--space-5);
}
.eyebrow::before{
  content:''; width:22px; height:1px; background:currentColor; opacity:.5;
}
.eyebrow--light{ color:var(--brand-300); }

.s-title{ font-size:var(--fs-3xl); }
.s-title--light{ color:var(--on-dark); }

.s-lead{
  margin-top:var(--space-5);
  font-size:var(--fs-lg);
  color:var(--ink-3);
  max-width:62ch;
}
.s-lead--light{ color:var(--on-dark-2); }
.s-head--center .s-lead{ margin-inline:auto; }

/* ── Rejilla de dos columnas reutilizable ───────────────── */
.split{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(2.5rem,2rem + 4vw,5rem);
  align-items:center;
}
@media (min-width:900px){
  .split{ grid-template-columns:1.05fr .95fr; }
  .split--about{ grid-template-columns:1.35fr .65fr; }
  .split--faq{ grid-template-columns:.8fr 1.2fr; align-items:start; }
  .split--contact{ grid-template-columns:.92fr 1.08fr; align-items:start; }
}
.split__copy{ min-width:0; }
.split__visual{ min-width:0; }

/* ── Transición diagonal entre superficies ─────────────────
   Eco del chevron del logotipo. Firma de marca, no decoración. */
.bleed--diagonal{ position:relative; }
.bleed--diagonal::before{
  content:'';
  position:absolute; inset-inline:0; top:-1px;
  height:clamp(40px,5vw,80px);
  background:var(--paper);
  clip-path:polygon(0 0,100% 0,100% 0,0 100%);
}