/* assets/css/pages/que-incluyen.css
   Lo propio de /que-incluyen-las-guias: el héroe y el cierre de compra.

   Todo lo demás —cabecera, pie, retícula, botones, listas de beneficios— lo
   ponen /assets/css/pages/index.css y /assets/css/beneficios-guias.css. Esta
   página no repite un solo componente: solo añade lo que no existía. */

body { background: var(--paper); }

/* ── Héroe ── */
.qi-hero { padding: 108px 0 96px; background: var(--ink); color: var(--white); }
.qi-hero__inner { max-width: 900px; }
.qi-hero .section-kicker { display: block; margin: 0 0 26px; }
.qi-hero h1 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(42px, 6vw, 82px);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: .98;
}
.qi-hero h1 em { color: var(--lime); font-style: normal; }
.qi-hero__lede {
  max-width: 610px;
  margin: 28px 0 0;
  color: rgba(251, 250, 247, .68);
  font-size: 16px;
  line-height: 1.65;
}
.qi-hero__ctas { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 28px; margin-top: 38px; }
.qi-hero__ctas .text-link { margin-top: 0; }
/* El enlace de vuelta solo existe si se llegó desde una guía (?volver=…).
   `hidden` sin esto no oculta un flex/inline-flex. */
.qi-volver[hidden] { display: none; }

/* ── Secciones de contenido ──
   Una sección oscura seguida de otra clara no necesita la línea divisoria:
   el cambio de fondo ya la dibuja. */
.qi-hero + .vg-seccion { border-top: 0; }

/* ── Cierre de compra ── */
.qi-compra { padding-bottom: 96px; }
.qi-compra__cta { margin-top: 36px; }

@media (max-width: 760px) {
  .qi-hero { padding: 74px 0 66px; }
  .qi-hero__lede { font-size: 15px; }
  .qi-compra { padding-bottom: 70px; }
}