/* ─────────────────────────────────────────────────────────────
   FLUYO · página de demos (/demos/)
   Depende de base.css, que va cargado antes.
   Un solo acento terracota por pantalla: arriba la etiqueta «Demos»,
   abajo —ya fuera de vista— el botón de la asesoría. Las secciones se
   separan con una línea de 1px, no cambiando el fondo.
   ───────────────────────────────────────────────────────────── */

.pagina-demos{
  max-width:900px;margin:0 auto;
  padding:calc(74px + clamp(36px,6vw,72px)) clamp(18px,4vw,52px) clamp(56px,8vw,110px);
}

.demos-entrada h1{
  font-size:clamp(32px,5.4vw,62px);font-weight:600;letter-spacing:-.045em;
  line-height:1.04;margin:14px 0 18px;text-wrap:balance;max-width:16ch;
}
.demos-entrada .entrada{
  font-size:clamp(17px,1.8vw,20px);color:var(--tx2);line-height:1.5;
  max-width:58ch;text-wrap:pretty;
}

.pagina-demos section{
  margin-top:clamp(44px,6vw,84px);
  padding-top:clamp(36px,5vw,64px);
  border-top:1px solid var(--hair);
}
.pagina-demos h2{
  font-size:clamp(24px,3vw,34px);font-weight:600;letter-spacing:-.035em;
  line-height:1.1;margin-bottom:16px;text-wrap:balance;
}
.pagina-demos p{color:var(--tx2);margin-bottom:14px;max-width:62ch;text-wrap:pretty}
.pagina-demos em{font-style:normal;color:var(--tx);font-weight:500}

/* Rejilla de tarjetas pegadas: el gap de 1px sobre el fondo de línea
   convierte la separación en el filete, sin dibujar bordes. */
.rejilla-demos{
  list-style:none;display:grid;gap:1px;background:var(--hair);
  border:1px solid var(--hair);border-radius:20px;overflow:hidden;
  grid-template-columns:repeat(2,1fr);margin-top:28px;
}
.rejilla-demos li{background:var(--page);padding:clamp(22px,3vw,32px)}
.rejilla-demos h3{
  font-size:17px;font-weight:600;letter-spacing:-.02em;margin-bottom:8px;
}
.rejilla-demos p{margin:0;font-size:15.5px}

.pasos-demos{list-style:none;display:flex;flex-direction:column;gap:0;margin-top:28px}
.pasos-demos li{
  display:flex;gap:clamp(16px,3vw,32px);align-items:baseline;
  padding:22px 0;border-bottom:1px solid var(--hair);
}
.pasos-demos li:last-child{border-bottom:none;padding-bottom:0}
.pasos-demos span{
  font-size:12px;font-weight:600;letter-spacing:.16em;color:var(--tx3);
  min-width:26px;font-variant-numeric:tabular-nums;
}
.pasos-demos p{margin:0}

.demos-cierre p{margin-bottom:26px}
.demos-cierre .btn-acc{display:inline-flex}

@media (max-width:640px){
  .rejilla-demos{grid-template-columns:1fr}
  .demos-entrada h1{max-width:none}
}