/* ==================================================================
   Developer Platform · deck de arquitectura
   Gramática visual:
     banda  = la red que ya atraviesa su tráfico
     svc    = algo que usted opera   (caja blanca con borde y sombra)
     cap    = algo que usted consume (pill naranja relleno)
     cred   = llamada con credenciales (discontinua, ámbar)
     bind   = binding (corta, sólida, naranja)
================================================================== */

@font-face {
  font-family: 'Kunst Grotesk';
  src: url('/fonts/Kunst Grotesk Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Kunst Grotesk';
  src: url('/fonts/Kunst Grotesk Medium.woff2') format('woff2');
  font-weight: 500 700;
  font-display: swap;
}
@font-face {
  font-family: 'Apercu Mono Pro';
  src: url('/fonts/Apercu Mono Pro Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

:root {
  --bg: #fffbf5;
  --bg-page: #f5f1eb;
  --bg-card: #fffdfb;
  --bg-warm: #fef7ed;
  --border: #ebd5c1;
  --border-light: rgba(235, 213, 193, 0.62);
  --orange: #ff4801;
  --orange-soft: rgba(255, 72, 1, 0.09);
  --orange-mid: rgba(255, 72, 1, 0.22);
  --text: #521000;
  --text-muted: rgba(82, 16, 0, 0.64);
  --text-subtle: rgba(82, 16, 0, 0.42);
  --warn: #b45309;
  --warn-soft: rgba(180, 83, 9, 0.12);
  --cool: #0b4ea2;
  --cool-soft: rgba(11, 78, 162, 0.1);

  --ease: cubic-bezier(0.68, 0, 0.12, 1);
  --dur: 900ms;

  --sans: 'Kunst Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Apercu Mono Pro', ui-monospace, 'SF Mono', Menlo, monospace;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  overflow: hidden;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  cursor: default;
}

#deck {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(14px, 2.2vh, 26px) clamp(18px, 2.6vw, 44px) 0;
}

/* ---------------- barra de progreso ---------------- */

.progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--border-light);
  z-index: 40;
}
.progress i {
  display: block;
  height: 100%;
  background: var(--orange);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}

/* ---------------- barra superior ---------------- */

.topbar {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  gap: clamp(12px, 1.6vw, 24px);
  padding-bottom: clamp(8px, 1.2vh, 16px);
  transition: opacity 300ms ease;
}
.topbar.is-hidden {
  opacity: 0;
}

.kicker {
  font-family: var(--mono);
  font-size: clamp(11px, 1.28vh, 15px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange);
  white-space: nowrap;
}

.title {
  font-size: clamp(19px, 2.8vh, 33px);
  font-weight: 500;
  letter-spacing: -0.017em;
  line-height: 1.08;
}

/* ---------------- stage ---------------- */

.stage-wrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  place-items: center;
  transition: opacity 420ms ease;
}
.stage-wrap.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.stage {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: calc((100vh - 200px) * 1.82);
  aspect-ratio: 1.82 / 1;
  max-height: 100%;
}

.layer {
  position: absolute;
  inset: 0;
}
.layer.links {
  overflow: visible;
  pointer-events: none;
  z-index: 2;
}
.layer.frames {
  z-index: 1;
}
.layer.nodes {
  z-index: 3;
  pointer-events: none;
}
.layer.linklabels {
  overflow: visible;
  pointer-events: none;
  z-index: 4;
}

/* ---------------- marcos ---------------- */

.frame {
  position: absolute;
  border-radius: 14px;
  opacity: 0;
  transition: left var(--dur) var(--ease), top var(--dur) var(--ease), width var(--dur) var(--ease),
    height var(--dur) var(--ease), opacity 520ms ease;
}
.frame.is-on {
  opacity: 1;
}
.frame.is-on.is-dim {
  opacity: 0.72;
}
/* la banda nunca se apaga: es el hilo conductor del deck */
.frame--band.is-on.is-dim {
  opacity: 1;
}

.frame__label {
  position: absolute;
  top: -0.78em;
  left: 14px;
  padding: 0 8px;
  background: var(--bg);
  font-family: var(--mono);
  font-size: clamp(10px, 1.15vh, 13px);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-subtle);
  white-space: nowrap;
}

.frame--group {
  border: 1px dashed var(--border);
  background: rgba(245, 241, 235, 0.42);
}
.frame--group[data-accent='warn'] {
  border-color: rgba(180, 83, 9, 0.34);
  background: var(--warn-soft);
}
.frame--group[data-accent='warn'] .frame__label {
  color: var(--warn);
}

/* la banda: la red que ya está en su arquitectura */
.frame--band {
  border: 1px solid var(--orange-mid);
  background: linear-gradient(180deg, rgba(255, 72, 1, 0.075), rgba(255, 72, 1, 0.035));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55), 0 2px 22px rgba(255, 72, 1, 0.07);
}
.frame--band .frame__label {
  color: var(--orange);
  font-weight: 500;
}

/* ---------------- nodos ---------------- */

.node {
  position: absolute;
  transform: translate(-50%, -50%) scale(0.94);
  opacity: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
  transition: left var(--dur) var(--ease), top var(--dur) var(--ease), opacity 480ms ease,
    transform 520ms var(--ease), filter 340ms ease;
}
.node.is-on {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.node.is-on.is-dim {
  opacity: 0.42;
}
.node.is-focus {
  z-index: 5;
}

.node__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: clamp(5px, 0.85vh, 9px) clamp(9px, 0.95vw, 16px);
  border-radius: 9px;
  text-align: center;
  transition: background 420ms ease, border-color 420ms ease, color 420ms ease, box-shadow 320ms ease;
}

.node__label {
  font-size: clamp(11px, 1.5vh, 17px);
  font-weight: 500;
  letter-spacing: -0.008em;
  line-height: 1.12;
}
.node__sub {
  font-family: var(--mono);
  font-size: clamp(9px, 1.1vh, 12.5px);
  line-height: 1.2;
  color: var(--text-subtle);
  letter-spacing: 0.004em;
}
.node__tag {
  font-family: var(--mono);
  font-size: clamp(9px, 1.06vh, 12px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

/* — algo que usted OPERA — */
.node[data-kind='svc'] .node__body {
  background: var(--bg-card);
  border: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(82, 16, 0, 0.05), 0 3px 10px rgba(82, 16, 0, 0.045);
}
.node[data-kind='svc'][data-accent='warn'] .node__body {
  border-color: rgba(180, 83, 9, 0.4);
  background: #fffaf2;
}
.node[data-kind='svc'][data-size='tall'] .node__body {
  padding-block: clamp(14px, 3.6vh, 34px);
}

/* — algo que usted CONSUME — */
.node[data-kind='cap'] .node__body {
  background: rgba(255, 72, 1, 0.13);
  border: 1px solid rgba(255, 72, 1, 0.5);
  color: #8f2600;
}
.node[data-kind='cap'] .node__label {
  color: var(--orange);
}
.node[data-kind='cap'] .node__sub {
  color: rgba(255, 72, 1, 0.72);
}
/* el compute es la pieza central: única en naranja sólido */
.node[data-kind='cap'][data-size='lg'] .node__body {
  background: var(--orange);
  border-color: var(--orange);
  padding: clamp(8px, 1.3vh, 15px) clamp(16px, 1.9vw, 34px);
  border-radius: 11px;
  box-shadow: 0 3px 16px rgba(255, 72, 1, 0.26);
}
.node[data-kind='cap'][data-size='lg'] .node__label {
  font-size: clamp(14px, 2.1vh, 24px);
  color: #fffbf5;
}
.node[data-kind='cap'][data-size='lg'] .node__sub {
  color: rgba(255, 251, 245, 0.76);
}
.node[data-kind='cap'][data-accent='agent'] .node__body {
  background: rgba(11, 78, 162, 0.1);
  border-color: rgba(11, 78, 162, 0.45);
}
.node[data-kind='cap'][data-accent='agent'] .node__label {
  color: var(--cool);
}
.node[data-kind='cap'][data-accent='agent'] .node__sub {
  color: rgba(11, 78, 162, 0.66);
}

/* — la fila de entrega y protección, sobre la banda — */
.node[data-kind='net'] .node__body {
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid var(--orange-mid);
  color: var(--text);
}

/* — actores — */
.node[data-kind='actor'] .node__body {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-card);
}
.node[data-kind='actor'][data-accent='agent'] .node__body {
  border-color: rgba(11, 78, 162, 0.4);
  background: #f7faff;
}
.node[data-kind='actor'][data-accent='agent'] .node__label {
  color: var(--cool);
}

/* — puertas sobre el borde de la banda — */
.node[data-kind='door'] .node__body {
  background: var(--bg);
  border: 1px solid var(--orange);
  border-radius: 999px;
  padding: 3px 12px;
}
.node[data-kind='door'] .node__label {
  font-family: var(--mono);
  font-size: clamp(9.5px, 1.18vh, 13px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--orange);
}
.node[data-kind='door'][data-accent='agent'] .node__body {
  border-color: var(--cool);
}
.node[data-kind='door'][data-accent='agent'] .node__label {
  color: var(--cool);
}

/* — carriles de construcción — */
.node[data-kind='lane'] {
  flex-direction: row;
  align-items: center;
  gap: 9px;
}
.node[data-kind='lane'] .node__body {
  flex-direction: row;
  align-items: center;
  gap: 14px;
  border-radius: 999px;
  padding: clamp(6px, 1vh, 11px) clamp(14px, 1.6vw, 26px);
  font-family: var(--mono);
}
.node[data-kind='lane'] .node__label {
  font-family: var(--mono);
  font-size: clamp(10px, 1.3vh, 15px);
  letter-spacing: 0.01em;
  font-weight: 400;
}
.node[data-kind='lane'][data-tone='muted'] .node__body {
  background: var(--bg-page);
  border: 1px dashed var(--border);
  color: var(--text-subtle);
}
.node[data-kind='lane'][data-tone='live'] .node__body {
  background: var(--orange-soft);
  border: 1px solid var(--orange);
  color: var(--text);
}
.node[data-kind='lane'] .node__tag {
  position: static;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(82, 16, 0, 0.07);
  color: var(--text-muted);
}
.node[data-kind='lane'][data-tone='live'] .node__tag {
  background: var(--orange);
  color: #fffbf5;
}

/* — foco — */
.node.is-focus .node__body {
  box-shadow: 0 0 0 3px rgba(255, 72, 1, 0.16), 0 4px 18px rgba(82, 16, 0, 0.1);
}
.node.is-focus[data-accent='agent'] .node__body {
  box-shadow: 0 0 0 3px rgba(11, 78, 162, 0.16), 0 4px 18px rgba(11, 78, 162, 0.12);
}

/* ---------------- conectores ---------------- */

.link {
  fill: none;
  stroke-linecap: round;
  opacity: 0;
  transition: opacity 420ms ease, stroke 420ms ease;
}
.link.is-on {
  opacity: 1;
}
.link.is-on.is-dim {
  opacity: 0.16;
}

.link--flow {
  stroke: rgba(82, 16, 0, 0.5);
  stroke-width: 1.6;
  marker-end: url(#arrow-sm);
}
.link--legacy {
  stroke: var(--text-subtle);
  stroke-width: 1;
  opacity: 0.34;
}
.link--legacy.is-on {
  opacity: 0.34;
}

.link--cred {
  stroke: var(--warn);
  stroke-width: 1.5;
  stroke-dasharray: 4 3.5;
  marker-end: url(#arrow-sm);
}

.link--bind {
  stroke: var(--orange);
  stroke-width: 2.4;
}

.link--tunnel {
  stroke: var(--cool);
  stroke-width: 1.8;
  stroke-dasharray: 9 4;
  marker-end: url(#arrow-sm);
}

/* Hyperdrive no es un túnel: es pool + caché en el camino del dato.
   Trazo continuo, color de capability, no de cruce de perímetro. */
.link--hyper {
  stroke: var(--orange);
  stroke-width: 2.2;
  marker-end: url(#arrow-sm);
}

.link--deploy {
  stroke: var(--orange);
  stroke-width: 2;
  stroke-dasharray: 7 5;
  marker-end: url(#arrow);
  animation: march 900ms linear infinite;
}
@keyframes march {
  to {
    stroke-dashoffset: -24;
  }
}

.link__label {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  fill: var(--cool);
  text-anchor: middle;
  paint-order: stroke;
  stroke: var(--bg);
  stroke-width: 4px;
  stroke-linejoin: round;
  transition: opacity 400ms ease;
}
.link__label.is-dim {
  opacity: 0.14;
}

/* ---------------- leyenda ---------------- */

.legend {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-self: center;
  gap: 3px 15px;
  max-width: 54%;
  opacity: 0;
  transform: translateY(3px);
  transition: opacity 500ms ease, transform 500ms ease;
  pointer-events: none;
}
.legend.is-on {
  opacity: 1;
  transform: none;
}
.legend__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: clamp(9.5px, 1.12vh, 12.5px);
  color: var(--text-subtle);
  letter-spacing: 0.02em;
}
.legend__swatch {
  width: 16px;
  height: 10px;
  border-radius: 3px;
  flex: 0 0 auto;
}
.legend__item[data-key='band'] .legend__swatch {
  background: rgba(255, 72, 1, 0.1);
  border: 1px solid var(--orange-mid);
}
.legend__item[data-key='svc'] .legend__swatch {
  background: var(--bg-card);
  border: 1px solid var(--border);
  box-shadow: 0 1px 3px rgba(82, 16, 0, 0.08);
}
.legend__item[data-key='cap'] .legend__swatch {
  background: var(--orange);
}
.legend__item[data-key='cred'] .legend__swatch {
  height: 0;
  border-top: 1.5px dashed var(--warn);
  border-radius: 0;
}
.legend__item[data-key='bind'] .legend__swatch {
  height: 0;
  border-top: 2.4px solid var(--orange);
  border-radius: 0;
}
.legend__item[data-key='tunnel'] .legend__swatch {
  height: 0;
  border-top: 2px dashed var(--cool);
  border-radius: 0;
}

/* ---------------- rail inferior ---------------- */

.rail {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  gap: clamp(12px, 1.6vw, 26px);
  padding: clamp(12px, 1.8vh, 22px) 0 clamp(14px, 2.2vh, 26px);
  min-height: clamp(74px, 11.5vh, 122px);
  border-top: 1px solid var(--border-light);
  transition: opacity 300ms ease;
}
.rail.is-hidden {
  opacity: 0;
}

.dots {
  display: flex;
  gap: 5px;
  padding-top: 0.62em;
  flex: 0 0 auto;
}
.dots i {
  width: 16px;
  height: 3px;
  border-radius: 2px;
  background: var(--border);
  transition: background 320ms ease;
}
.dots i.is-on {
  background: var(--orange);
}

.line {
  font-size: clamp(15px, 2.32vh, 27px);
  line-height: 1.32;
  letter-spacing: -0.012em;
  max-width: 86ch;
  color: var(--text);
}

/* ---------------- hojas ---------------- */

.sheet {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(28px, 7vh, 96px) clamp(30px, 8vw, 150px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 480ms ease;
}
.sheet.is-on {
  opacity: 1;
}
/* la hoja no intercepta clics (el deck avanza al hacer clic en los lados),
   pero sus controles sí tienen que recibirlos */
.sheet.is-on .modtog {
  pointer-events: auto;
}

/* portada */
.cover {
  background: var(--bg);
  gap: clamp(12px, 1.8vh, 24px);
  align-items: flex-start;
}
.cover h1 {
  font-size: clamp(36px, 8.8vh, 98px);
  font-weight: 500;
  letter-spacing: -0.033em;
  line-height: 0.98;
  max-width: 17ch;
}
.cover .lead {
  font-size: clamp(16px, 2.6vh, 29px);
  line-height: 1.42;
  color: var(--text-muted);
  max-width: 48ch;
  letter-spacing: -0.008em;
}
.cover .meta {
  margin-top: clamp(8px, 1.6vh, 20px);
  font-family: var(--mono);
  font-size: clamp(12px, 1.45vh, 16px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

/* frase: se superpone al diagrama, no lo sustituye */
.statement {
  background: rgba(255, 251, 245, 0.93);
  backdrop-filter: blur(7px) saturate(1.1);
  -webkit-backdrop-filter: blur(7px) saturate(1.1);
  align-items: flex-start;
  gap: clamp(14px, 2.2vh, 28px);
}
.statement h1 {
  font-size: clamp(30px, 7.5vh, 84px);
  font-weight: 500;
  letter-spacing: -0.031em;
  line-height: 1.02;
  max-width: 21ch;
  text-wrap: balance;
}
.statement p {
  font-size: clamp(16px, 2.55vh, 28px);
  line-height: 1.4;
  color: var(--text-muted);
  max-width: 50ch;
  letter-spacing: -0.008em;
}
.statement code {
  margin-top: clamp(6px, 1.4vh, 18px);
  font-family: var(--mono);
  font-size: clamp(14px, 1.9vh, 21px);
  padding: clamp(8px, 1.3vh, 15px) clamp(14px, 1.6vw, 24px);
  border-radius: 9px;
  background: var(--orange-soft);
  border: 1px solid var(--orange-mid);
  color: var(--orange);
}

/* mapa de lectura */
.map {
  background: var(--bg);
  justify-content: center;
  gap: clamp(8px, 1.4vh, 18px);
  padding-inline: clamp(24px, 5vw, 92px);
}
.map h1 {
  font-size: clamp(25px, 4.3vh, 47px);
  font-weight: 500;
  letter-spacing: -0.024em;
  line-height: 1.06;
  margin-bottom: clamp(6px, 1.2vh, 14px);
}
.map__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(300px, 29vw, 430px), 1fr));
  gap: clamp(3px, 0.5vh, 7px) clamp(14px, 2vw, 34px);
}
.map__row {
  display: flex;
  align-items: center;
  min-height: clamp(30px, 4.1vh, 46px);
  gap: 10px;
  padding: clamp(3px, 0.55vh, 7px) 0;
  border-bottom: 1px solid var(--border-light);
  animation: rise 460ms var(--ease) backwards;
  animation-delay: calc(var(--i) * 26ms);
}
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}
.map__task {
  font-size: clamp(15px, 2.1vh, 21px);
  color: var(--text-muted);
  line-height: 1.22;
}
.map__prim {
  margin-left: auto;
  font-family: var(--mono);
  font-size: clamp(14px, 1.95vh, 19px);
  color: var(--orange);
  white-space: nowrap;
  letter-spacing: -0.005em;
}
.map__outro {
  margin-top: clamp(10px, 1.8vh, 24px);
  font-size: clamp(19px, 2.9vh, 31px);
  letter-spacing: -0.012em;
  max-width: 56ch;
  line-height: 1.32;
}
.map__next {
  font-family: var(--mono);
  font-size: clamp(14px, 1.75vh, 18px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange);
}

/* ---------------- cromo ---------------- */

.lang,
.help {
  position: fixed;
  bottom: clamp(10px, 1.6vh, 18px);
  z-index: 30;
  font-family: var(--mono);
  font-size: clamp(10.5px, 1.25vh, 13.5px);
  letter-spacing: 0.1em;
  color: var(--text-subtle);
}
.lang {
  right: clamp(18px, 2.6vw, 44px);
  padding: 4px 11px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color 200ms ease, color 200ms ease;
}
.lang:hover {
  border-color: var(--orange);
  color: var(--orange);
}
.help {
  left: clamp(18px, 2.6vw, 44px);
  opacity: 0.5;
  pointer-events: none;
}

/* presentador */
.presenter {
  position: fixed;
  top: clamp(12px, 2vh, 22px);
  right: clamp(18px, 2.6vw, 44px);
  z-index: 35;
  display: none;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  padding: 10px 16px;
  border-radius: 12px;
  background: var(--text);
  color: var(--bg);
  font-family: var(--mono);
  box-shadow: 0 8px 28px rgba(82, 16, 0, 0.2);
}
.presenter.is-on {
  display: flex;
}
.presenter__clock {
  font-size: clamp(20px, 3vh, 32px);
  letter-spacing: -0.02em;
  line-height: 1;
}
.presenter__line,
.presenter__next {
  font-size: clamp(10px, 1.2vh, 13px);
  letter-spacing: 0.05em;
  opacity: 0.66;
}
.presenter[data-tone='late'] .presenter__line {
  color: #ff8a5b;
  opacity: 1;
}
.presenter[data-tone='early'] .presenter__line {
  color: #8ad0a0;
  opacity: 1;
}

/* índice */
.index {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  background: rgba(255, 251, 245, 0.96);
  backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms ease;
}
.index.is-on {
  opacity: 1;
  pointer-events: auto;
}
.index__inner {
  width: min(680px, 86vw);
  max-height: 84vh;
  overflow: auto;
}
.index__inner h3 {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 14px;
}
.index__list {
  list-style: none;
  counter-reset: s;
}
.index__list li button {
  display: flex;
  align-items: baseline;
  gap: 16px;
  width: 100%;
  padding: 7px 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  font: inherit;
  font-size: clamp(15px, 2.15vh, 20px);
  color: var(--text-muted);
  text-align: left;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}
.index__list li button:hover {
  background: var(--orange-soft);
  color: var(--text);
}
.index__list li.is-current button {
  color: var(--orange);
}
.index__time {
  font-family: var(--mono);
  font-size: 0.72em;
  color: var(--text-subtle);
  min-width: 3.4em;
}

/* ---------------- responsive / impresión ---------------- */

@media (max-width: 780px) {
  .stage {
    max-width: none;
  }
  .legend {
    display: none;
  }
  .help {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 1ms !important;
  }
}

/* ==================================================================
   Intro: la red, la latencia y los cuatro actos
================================================================== */

/* --- la red --- */
.network {
  background: var(--bg);
  justify-content: center;
  gap: clamp(10px, 1.6vh, 20px);
  align-items: stretch;
}
.network h1 {
  font-size: clamp(24px, 4.6vh, 54px);
  font-weight: 500;
  letter-spacing: -0.028em;
  line-height: 1.04;
  max-width: 22ch;
}
.network .lead {
  font-size: clamp(14px, 2.15vh, 24px);
  color: var(--text-muted);
  max-width: 52ch;
  line-height: 1.38;
  letter-spacing: -0.008em;
}

.netband {
  position: relative;
  margin: clamp(10px, 2.2vh, 30px) 0 clamp(6px, 1.4vh, 18px);
  height: clamp(58px, 12vh, 124px);
  border-radius: 14px;
  border: 1px solid var(--orange-mid);
  background: linear-gradient(180deg, rgba(255, 72, 1, 0.085), rgba(255, 72, 1, 0.035));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55), 0 2px 26px rgba(255, 72, 1, 0.08);
  overflow: hidden;
}
.netband__dots {
  position: absolute;
  inset: 0;
}
.netband__dots i {
  position: absolute;
  width: 4px;
  height: 4px;
  margin: -2px;
  border-radius: 50%;
  background: rgba(255, 72, 1, 0.42);
  animation: twinkle 3.6s ease-in-out infinite;
  animation-delay: var(--d);
}
.netband__dots i[data-hot] {
  width: 7px;
  height: 7px;
  margin: -3.5px;
  background: var(--orange);
  box-shadow: 0 0 0 4px rgba(255, 72, 1, 0.14);
}
@keyframes twinkle {
  0%,
  100% {
    opacity: 0.45;
  }
  50% {
    opacity: 1;
  }
}
.netband__tag {
  position: absolute;
  left: 14px;
  top: 10px;
  font-family: var(--mono);
  font-size: clamp(10px, 1.15vh, 13px);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--orange);
}

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(10px, 2vw, 34px);
}
.stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: clamp(6px, 1.1vh, 12px);
  border-top: 1px solid var(--border);
  animation: rise 500ms var(--ease) backwards;
  animation-delay: calc(var(--i) * 90ms + 180ms);
}
.stat strong {
  font-size: clamp(22px, 4.6vh, 54px);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--orange);
}
.stat span {
  font-family: var(--mono);
  font-size: clamp(10px, 1.32vh, 15px);
  line-height: 1.26;
  color: var(--text-muted);
}

/* --- 50 ms --- */
.bignum {
  background: var(--bg);
  align-items: flex-start;
  justify-content: center;
  gap: clamp(6px, 1.2vh, 16px);
}
.bignum h1 {
  display: flex;
  align-items: baseline;
  gap: 0.14em;
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 0.86;
}
.bignum__n {
  font-size: clamp(90px, 30vh, 330px);
  color: var(--orange);
}
.bignum__u {
  font-size: clamp(34px, 10vh, 110px);
  color: var(--text);
}
.bignum__sub {
  font-size: clamp(18px, 3.2vh, 38px);
  letter-spacing: -0.018em;
  line-height: 1.16;
  max-width: 24ch;
}
.bignum__note {
  margin-top: clamp(6px, 1.2vh, 16px);
  font-family: var(--mono);
  font-size: clamp(11px, 1.45vh, 16px);
  color: var(--text-muted);
  letter-spacing: 0.01em;
  max-width: 56ch;
  line-height: 1.4;
}

/* --- los cuatro actos --- */
.acts {
  background: var(--bg);
  justify-content: center;
  gap: clamp(8px, 1.4vh, 18px);
}
.acts h1 {
  font-size: clamp(24px, 4.6vh, 54px);
  font-weight: 500;
  letter-spacing: -0.028em;
  line-height: 1.04;
  margin-bottom: clamp(8px, 1.8vh, 24px);
}
.acts__row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(8px, 1.1vw, 18px);
  align-items: stretch;
}
.act {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: clamp(18px, 3.2vh, 38px) clamp(13px, 1.4vw, 24px) clamp(46px, 7vh, 76px);
  border-radius: 13px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  animation: rise 500ms var(--ease) backwards;
  animation-delay: calc(var(--i) * 80ms + 120ms);
}
.act__n {
  font-family: var(--mono);
  font-size: clamp(10px, 1.25vh, 14px);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-subtle);
}
.act h3 {
  font-size: clamp(14px, 2.15vh, 24px);
  font-weight: 500;
  letter-spacing: -0.016em;
  line-height: 1.12;
}
.act p {
  font-family: var(--mono);
  font-size: clamp(10px, 1.28vh, 14px);
  line-height: 1.38;
  color: var(--text-muted);
}
.act__badge {
  position: absolute;
  left: clamp(12px, 1.3vw, 22px);
  bottom: clamp(12px, 2vh, 22px);
  padding: 3px 10px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: clamp(9.5px, 1.16vh, 13px);
  letter-spacing: 0.04em;
  background: rgba(82, 16, 0, 0.07);
  color: var(--text-muted);
}
/* el acto que ya tienen, y el acto del que trata el deck */
.act[data-tone='have'] {
  border-color: rgba(82, 16, 0, 0.3);
}
.act[data-tone='have'] .act__badge {
  background: rgba(82, 16, 0, 0.1);
  color: var(--text);
}
.act[data-tone='past'] {
  opacity: 0.5;
}
.act[data-tone='now'] {
  border-color: var(--orange);
  background: var(--orange-soft);
  box-shadow: 0 4px 24px rgba(255, 72, 1, 0.13);
}
.act[data-tone='now'] .act__n,
.act[data-tone='now'] p {
  color: rgba(255, 72, 1, 0.82);
}
.act[data-tone='now'] h3 {
  color: var(--orange);
}
.act[data-tone='now'] .act__badge {
  background: var(--orange);
  color: #fffbf5;
}
.act[data-tone='next'] {
  border-style: dashed;
}

@media (max-width: 900px) {
  .acts__row,
  .stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- divisor de capítulo --- */
.section {
  background: var(--bg-warm);
  align-items: flex-start;
  justify-content: center;
  gap: clamp(14px, 2.4vh, 32px);
}
.section h1 {
  display: flex;
  flex-direction: column;
  font-size: clamp(30px, 7.6vh, 86px);
  font-weight: 500;
  letter-spacing: -0.032em;
  line-height: 1.02;
  max-width: 20ch;
}
.section h1 .accent {
  color: var(--orange);
}
.section p {
  font-size: clamp(16px, 2.55vh, 28px);
  line-height: 1.38;
  color: var(--text-muted);
  max-width: 50ch;
  letter-spacing: -0.008em;
}

/* ================================================================
   Slides del bloque de plataforma (portadas del deck EMEA)
================================================================ */

.lessons,
.isolates,
.think,
.sunburst,
.bindings {
  background: var(--bg);
  gap: clamp(14px, 2.6vh, 36px);
}
.bindings { background: var(--bg-warm); }

.lessons h1,
.isolates h1,
.sunburst h1,
.bindings h1 {
  font-size: clamp(26px, 5.4vh, 60px);
  font-weight: 500;
  letter-spacing: -0.028em;
  line-height: 1.04;
  text-wrap: balance;
}
.lessons .accent,
.isolates .accent,
.sunburst .accent,
.bindings .accent { color: var(--orange); }

/* ---- 1. A new developer platform ---- */
.lessons__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.9vw, 30px);
}
.lesson {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: clamp(16px, 2.6vh, 32px);
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.2vh, 15px);
  box-shadow: 0 2px 0 rgba(82, 16, 0, 0.045);
  opacity: 0;
  transform: translateY(14px);
  animation: sheetIn 560ms var(--ease) forwards;
  animation-delay: calc(var(--i) * 110ms + 120ms);
}
.lesson__icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--orange-soft);
  border: 1px solid var(--orange-mid);
  position: relative;
  flex: none;
}
.lesson__icon::after {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 17px;
  line-height: 1;
  color: var(--orange);
}
.lesson__icon[data-icon='speed']::after { content: '\2192'; }
.lesson__icon[data-icon='scale']::after { content: '\21F2'; }
.lesson__icon[data-icon='security']::after { content: '\25C7'; }
.lesson h3 {
  font-size: clamp(17px, 2.5vh, 27px);
  font-weight: 500;
  letter-spacing: -0.015em;
}
.lesson p {
  font-size: clamp(13px, 1.85vh, 19px);
  line-height: 1.45;
  color: var(--text-muted);
}

@keyframes sheetIn {
  to { opacity: 1; transform: none; }
}

/* ---- 2. Workers: compute across the network ---- */
.iso__cmp {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: clamp(18px, 3vw, 48px);
  align-items: start;
}
.iso__side {
  display: flex;
  flex-direction: column;
  gap: clamp(7px, 1.1vh, 14px);
}
.iso__side h3 {
  font-size: clamp(15px, 2.1vh, 23px);
  font-weight: 500;
  letter-spacing: -0.014em;
}
.iso__desc {
  font-size: clamp(12px, 1.7vh, 17px);
  color: var(--text-muted);
  line-height: 1.4;
  min-height: 2.8em;
}
.iso__procs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(7px, 1vh, 13px);
}
.iso__proc {
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--bg-card);
  aspect-ratio: 1.45;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  opacity: 0;
  animation: sheetIn 420ms var(--ease) forwards;
  animation-delay: calc(var(--i) * 55ms + 150ms);
}
.iso__shared {
  border: 1.5px solid var(--orange);
  border-radius: 11px;
  background: var(--orange-soft);
  padding: clamp(10px, 1.7vh, 20px);
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.6vw, 22px);
}
.iso__cells {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: clamp(4px, 0.7vh, 9px);
  flex: 1;
}
.iso__cells .iso__code {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 5px;
  padding: clamp(3px, 0.55vh, 7px) 0;
  text-align: center;
  opacity: 0;
  animation: sheetIn 340ms var(--ease) forwards;
  animation-delay: calc(var(--i) * 26ms + 220ms);
}
.iso__code {
  font-family: var(--mono);
  font-size: clamp(10px, 1.45vh, 15px);
  color: var(--text);
}
.iso__over {
  font-family: var(--mono);
  font-size: clamp(14px, 2.1vh, 22px);
  line-height: 1;
  color: var(--orange);
  flex: none;
}
.iso__legend {
  font-family: var(--mono);
  font-size: clamp(10px, 1.35vh, 14px);
  letter-spacing: 0.04em;
  color: var(--text-subtle);
  text-transform: uppercase;
}
.iso__legend span {
  color: var(--orange);
  margin-right: 3px;
}

/* ---- 3. Think <use case>. Think Workers. ---- */
.think {
  align-items: flex-start;
  justify-content: center;
}
.think h1 {
  font-size: clamp(34px, 9vh, 104px);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.02;
  display: flex;
  flex-direction: column;
}
.think__line { display: inline-flex; align-items: baseline; gap: 0.28em; }
.think__slot { position: relative; display: inline-block; }
.think__spacer { visibility: hidden; white-space: nowrap; }
.think__word {
  position: absolute;
  inset: 0;
  white-space: nowrap;
  color: var(--orange);
}
.think__word.is-in { animation: thinkIn 260ms var(--ease); }
@keyframes thinkIn {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}
.think__answer { color: var(--text); }
.think__note {
  margin-top: clamp(12px, 2.2vh, 30px);
  font-size: clamp(14px, 2.1vh, 23px);
  color: var(--text-muted);
  max-width: 44ch;
}

/* ---- 4. The Workers platform (sunburst) ---- */
.sunburst {
  display: grid;
  grid-template-columns: minmax(230px, 0.82fr) 1.18fr;
  grid-template-areas: 'head wrap';
  align-content: center;
  align-items: center;
  column-gap: clamp(16px, 2.6vw, 44px);
}
.sun__head { grid-area: head; display: flex; flex-direction: column; gap: clamp(8px, 1.3vh, 18px); }
.sun__wrap { grid-area: wrap; height: 100%; display: grid; place-items: center; min-height: 0; }
.sun__note {
  font-size: clamp(12px, 1.75vh, 18px);
  line-height: 1.45;
  color: var(--text-muted);
  max-width: 34ch;
  margin-top: clamp(8px, 1.4vh, 18px);
}
.sun__stage {
  font-family: var(--mono);
  font-size: clamp(11px, 1.55vh, 16px);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--orange);
}
.sun__marks { display: flex; gap: 6px; }
.sun__marks span {
  width: 26px;
  height: 3px;
  border-radius: 2px;
  background: var(--border);
  transition: background 320ms ease;
}
.sun__marks span.is-on { background: var(--orange); }
.sun__svg { width: 100%; height: 100%; max-height: 88vh; }
.sun__seg { opacity: 0; transition: opacity 420ms ease; pointer-events: none; }
.sun__seg.is-on { opacity: 1; transition-delay: calc(var(--i) * 18ms); }
.sun__seg path {
  stroke: var(--bg);
  stroke-width: 2;
  transition: fill 300ms ease;
}
.sun__seg[data-level='1'] path { fill: var(--orange); }
.sun__seg[data-level='2'] path { fill: #ffd2b6; }
.sun__seg[data-level='3'] path { fill: var(--cool-soft); stroke: var(--cool); stroke-width: 1.2; }
.sun__seg text {
  font-family: var(--mono);
  text-anchor: middle;
  fill: #fff;
  letter-spacing: 0.01em;
}
.sun__seg[data-level='2'] text { fill: var(--text); }
.sun__seg[data-level='3'] text { fill: var(--cool); }
.sun__core { fill: var(--text); }
.sun__coretext {
  font-family: var(--mono);
  font-size: 26px;
  text-anchor: middle;
  fill: var(--bg);
  letter-spacing: 0.02em;
}

/* ---- 5. Bindings ---- */
.bind__layout {
  display: grid;
  grid-template-columns: 1.02fr 1fr;
  gap: clamp(18px, 3.2vw, 56px);
  align-items: center;
}
.bind__code {
  background: var(--text);
  border-radius: 13px;
  padding: clamp(16px, 2.8vh, 34px) clamp(16px, 2.2vw, 32px);
  overflow: hidden;
}
.bind__code code { display: flex; flex-direction: column; gap: clamp(7px, 1.25vh, 16px); }
.bind__ln {
  font-family: var(--mono);
  font-size: clamp(11px, 1.85vh, 19px);
  color: #ffd9c6;
  white-space: nowrap;
  opacity: 0;
  animation: sheetIn 420ms var(--ease) forwards;
  animation-delay: calc(var(--i) * 95ms + 160ms);
}
.bind__points { display: flex; flex-direction: column; gap: clamp(11px, 2vh, 26px); }
.bind__points article {
  display: flex;
  gap: clamp(10px, 1.3vw, 18px);
  align-items: flex-start;
  opacity: 0;
  animation: sheetIn 480ms var(--ease) forwards;
  animation-delay: calc(var(--i) * 120ms + 480ms);
}
.bind__n {
  font-family: var(--mono);
  font-size: clamp(10px, 1.4vh, 14px);
  color: var(--orange);
  padding-top: 0.28em;
  flex: none;
}
.bind__points strong {
  display: block;
  font-size: clamp(15px, 2.15vh, 23px);
  font-weight: 500;
  letter-spacing: -0.014em;
  margin-bottom: 0.22em;
}
.bind__points p {
  font-size: clamp(12px, 1.75vh, 18px);
  line-height: 1.42;
  color: var(--text-muted);
}

@media (max-width: 900px) {
  .iso__cmp,
  .bind__layout { grid-template-columns: 1fr; }
  .sunburst { grid-template-columns: 1fr; grid-template-areas: 'head' 'wrap'; }
}

.iso__shared > .iso__over { font-size: clamp(20px, 3.4vh, 38px); }

/* ---------------- selector de módulos ---------------- */

.modbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px 0 18px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.modbar__h,
.modbar__total {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-subtle);
}
.modbar__total { margin-left: auto; }
.modtog {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-family: var(--sans);
  font-size: 14px;
  cursor: pointer;
  transition: border-color 200ms ease, color 200ms ease, background 200ms ease;
}
.modtog:hover { border-color: var(--orange-mid); }
.modtog__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  background: transparent;
  transition: background 200ms ease;
}
.modtog__min {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-subtle);
}
.modtog[data-on='1'] {
  border-color: var(--orange);
  background: var(--orange-soft);
  color: var(--orange);
}
.modtog[data-on='1'] .modtog__dot { background: currentColor; }
.modtog[data-on='1'] .modtog__min { color: var(--orange); }

/* etiqueta-chip: marca un servicio que vive en el camino del dato */
.link__label--chip {
  fill: var(--orange);
  stroke: none;
  paint-order: normal;
}
.link__chipbg {
  fill: var(--bg);
  stroke: var(--orange);
  stroke-width: 1.2;
  rx: 4;
}
.link__chipbg.is-dim { opacity: 0.14; }

/* ---------------- selector en la portada ---------------- */

.coverpick {
  margin-top: clamp(16px, 3.2vh, 44px);
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.3vh, 15px);
  align-items: flex-start;
}
.coverpick__ask,
.coverpick__hint {
  font-family: var(--mono);
  font-size: clamp(10px, 1.3vh, 14px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-subtle);
}
.coverpick__row { display: flex; gap: 12px; flex-wrap: wrap; }
.modtog--lg {
  padding: 11px 18px;
  border-radius: 13px;
  gap: 12px;
  align-items: center;
}
.modtog--lg .modtog__dot { width: 11px; height: 11px; }
.modtog__txt { display: flex; flex-direction: column; text-align: left; line-height: 1.2; }
.modtog__txt strong {
  font-size: clamp(14px, 1.95vh, 20px);
  font-weight: 500;
  letter-spacing: -0.012em;
}
.modtog__txt em {
  font-style: normal;
  font-size: clamp(10px, 1.35vh, 14px);
  color: var(--text-subtle);
}
.modtog--lg[data-on='1'] .modtog__txt em { color: var(--orange); opacity: 0.75; }

/* ---------------- #8 · bindings como diagrama ---------------- */

.bindmap {
  position: relative;
  border: 1.5px solid var(--orange-mid);
  background: var(--orange-soft);
  border-radius: 16px;
  padding: clamp(22px, 3.4vh, 40px) clamp(14px, 1.8vw, 28px) clamp(14px, 2vh, 24px);
}
.bindmap__tag {
  position: absolute;
  top: -9px;
  left: 20px;
  padding: 0 9px;
  background: var(--bg-warm);
  font-family: var(--mono);
  font-size: clamp(9px, 1.15vh, 12px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange);
}
.bindmap__worker {
  background: var(--orange);
  color: #fff;
  border-radius: 10px;
  padding: clamp(8px, 1.3vh, 15px);
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
}
.bindmap__worker strong {
  font-size: clamp(15px, 2.2vh, 24px);
  font-weight: 500;
  letter-spacing: -0.014em;
}
.bindmap__worker em {
  font-style: normal;
  font-family: var(--mono);
  font-size: clamp(9px, 1.25vh, 13px);
  opacity: 0.8;
}
.bindmap__legs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(8px, 1.1vw, 18px);
}
.bindmap__leg {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(5px, 0.8vh, 10px);
  opacity: 0;
  animation: sheetIn 460ms var(--ease) forwards;
  animation-delay: calc(var(--i) * 110ms + 180ms);
}
.bindmap__wire {
  width: 2.4px;
  height: clamp(14px, 2.6vh, 32px);
  background: var(--orange);
  border-radius: 2px;
}
.bindmap__cap {
  background: var(--bg-card);
  border: 1px solid var(--orange-mid);
  border-radius: 9px;
  padding: clamp(6px, 1vh, 12px) clamp(8px, 0.9vw, 14px);
  text-align: center;
  width: 100%;
}
.bindmap__cap strong {
  display: block;
  font-size: clamp(12px, 1.75vh, 18px);
  font-weight: 500;
  letter-spacing: -0.012em;
}
.bindmap__cap em {
  font-style: normal;
  font-family: var(--mono);
  font-size: clamp(8px, 1.1vh, 11px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-subtle);
}
.bindmap__leg code {
  font-family: var(--mono);
  font-size: clamp(8px, 1.15vh, 12px);
  color: var(--text-muted);
  text-align: center;
  word-break: break-all;
  line-height: 1.35;
}
.bindmap__note {
  font-size: clamp(12px, 1.7vh, 18px);
  color: var(--text-muted);
  text-align: center;
}
/* en esta slide los tres puntos van en fila, bajo el diagrama */
.bindings .bind__points {
  flex-direction: row;
  gap: clamp(14px, 2.4vw, 40px);
}
.bindings .bind__points article { flex: 1; }