/* /demos/: heading and explanation on the left, the phone with the interactive demo on the right.
   On phones the order is heading, phone, explanation: the demo is reachable without scrolling past prose. */
.demos-cuerpo { display: grid; gap: 0 clamp(24px, 4vw, 56px); grid-template-areas: "cabeza" "telefono" "texto"; padding-bottom: var(--section); }
.demos-cabeza { grid-area: cabeza; border-bottom: 0; margin-bottom: 32px; }
.demos-texto { grid-area: texto; max-width: 52ch; padding-top: var(--section); }
.demos-nota { margin: 20px 0 0; color: color-mix(in srgb, var(--tinta) 78%, transparent); }
.telefono { grid-area: telefono; width: min(100%, 390px); margin-inline: auto; padding: 10px; background: var(--tinta); border-radius: 38px; box-shadow: 0 24px 48px -20px rgba(30, 24, 25, 0.45); }
.telefono iframe { display: block; width: 100%; height: 680px; border: 0; border-radius: 28px; background: var(--blanco); }
@media (min-width: 900px) {
  .telefono iframe { height: min(760px, calc(100dvh - 110px)); min-height: 560px; }
  .demos-cuerpo { grid-template-columns: minmax(0, 1fr) 390px; grid-template-rows: auto 1fr; grid-template-areas: "cabeza telefono" "texto telefono"; align-items: start; }
  .demos-cabeza { padding-top: clamp(32px, 5vw, 64px); }
  .demos-texto { padding-top: 8px; }
  .telefono { margin-inline: 0; position: sticky; top: 24px; align-self: start; margin-top: 24px; }
}