/* ═══════════════════════════════════════════════════════════════
   /llamadas — va SOBRE site.css: misma paleta, misma tipografía.
   El dibujo lo hace calls.js en un <canvas>; acá sólo el escenario,
   el velo para el texto y el acto 2.
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════ EL HILO ═══════════════ */

.call {
  position: relative;
  height: calc(var(--chapters, 6) * 100dvh);
}

.call__stage {
  position: sticky; top: 0;
  height: 100dvh; width: 100%;
  overflow: hidden;
  background: var(--ink);
}

.call__canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
}

/* En escritorio el texto va a la izquierda y el dibujo se corre a la
   derecha (calls.js lo centra en el 64% del ancho). El velo sólo cubre
   la columna del texto: el dibujo queda con todo su brillo. */
.call__veil {
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(to right,
    rgba(10,11,13,.88) 0%,
    rgba(10,11,13,.62) 26%,
    rgba(10,11,13,.12) 46%,
    rgba(10,11,13,0) 58%);
}

@media (max-width: 860px) {
  /* en vertical el texto va abajo y el dibujo arriba */
  .call__veil {
    background: linear-gradient(to top,
      rgba(10,11,13,.96) 0%,
      rgba(10,11,13,.84) 28%,
      rgba(10,11,13,.2) 44%,
      rgba(10,11,13,0) 54%);
  }
}

.call__chapters {
  position: absolute; inset: 0; z-index: 4;
  width: 100%;
}

.call .display { max-width: 14ch; }
.call .lede { max-width: 30ch; }
.call .punch { max-width: 16ch; font-size: clamp(2.125rem, 4.4vw, 4rem); }

/* «Suena.» — una palabra sola, del tamaño de un afiche */
.call__huge {
  font-size: clamp(4rem, 13vw, 11rem);
  letter-spacing: -.055em;
  line-height: .9;
}

@media (max-width: 860px) {
  .call .chapter { padding-bottom: max(5.5rem, env(safe-area-inset-bottom)); }
  .call .punch { font-size: clamp(1.875rem, 8.4vw, 2.75rem); }
  .call .call__huge { font-size: clamp(4.5rem, 24vw, 7rem); }
  .call .display { font-size: clamp(1.875rem, 8.4vw, 2.75rem); }
  .call .lede { margin-top: 1rem; }
}

/* ═══════════════ ACTO 2 — lo que hay que saber, en cuatro golpes ═══════════════ */

.facts {
  position: relative; z-index: 5;
  background: var(--ink);
  border-top: 1px solid var(--line);
  padding-inline: var(--gutter);
}

/* min(…, 100%) y no 15rem pelado: ver TRAMPA 3 del README */
.facts__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
}

.fact {
  padding: clamp(2.5rem, 6vh, 4rem) clamp(1rem, 2vw, 2rem) clamp(2.5rem, 6vh, 4rem) 0;
  box-shadow: inset 0 -1px 0 var(--line);
}

.fact__big {
  margin: 0;
  font-size: clamp(1.75rem, 2.6vw, 2.5rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.03em;
  color: var(--amber-hot);
  text-wrap: balance;
}

.fact__b {
  margin: 1rem 0 0;
  max-width: 28ch;
  font-size: .9375rem; line-height: 1.55;
  color: var(--fog);
  text-wrap: pretty;
}

/* ─────────────── Accesibilidad ─────────────── */

@media (prefers-reduced-motion: reduce) {
  /* igual que el film: sin recorrido. Un cuadro fijo arriba (calls.js dibuja
     el momento en que se elige al vendedor) y los capítulos se leen enteros. */
  .call { height: auto; }
  .call__stage { position: relative; height: 60dvh; }
  .call__chapters { position: relative; inset: auto; }
  .call__veil { opacity: .35; }
}