/* Escalón · Moxen — los estilos del efecto y de la demostración.
   Tres colores y nada más: --es-cobalto (la escena), --es-limon (el acento) y
   --es-blanco (el panel y el texto). --es-hondo es un cobalto más oscuro: la tinta
   del panel y las sombras. El panel se redefine con las variables --es-panel,
   --es-tinta, --es-fila y --es-alt; cada paso cambia unas pocas en el panel. */
:root {
  --es-cobalto: #1b3dff;
  --es-hondo: #0b1fb5;
  --es-limon: #f2ff4d;
  --es-blanco: #fafaff;

  /* la escena */
  --es-escena: var(--es-cobalto);
  --es-texto: var(--es-blanco);
  --es-suave: rgba(250, 250, 255, .84);
  --es-borde: rgba(250, 250, 255, .3);
  --es-aro: rgba(242, 255, 77, .34);
  --es-disco: rgba(8, 22, 150, .5);
  /* el panel (cada paso cambia algunas de estas) */
  --es-panel: var(--es-blanco);
  --es-tinta: var(--es-hondo);
  --es-fila: #eceeff;
  --es-borde-panel: rgba(27, 61, 255, .14);
  --es-alt: var(--es-cobalto);                /* piezas oscuras del panel: la tarjeta de «En curso», los iconos */
  --es-alt-tinta: var(--es-blanco);
  --es-boton: var(--es-cobalto);
  --es-boton-tinta: var(--es-blanco);
  --es-sombra: 4, 12, 110;
  /* el movimiento */
  --es-muelle: cubic-bezier(.34, 1.4, .64, 1);   /* escalon.js lo cambia por un resorte de verdad */
  --es-dur: .95s;
  --es-curva: cubic-bezier(.22, 1, .36, 1);
  --es-k: 1;                                  /* escala del panel en pantallas pequeñas (la fija escalon.js) */
  --es-titulo: "Clash Display", "General Sans", system-ui, sans-serif;
  --es-cuerpo: "General Sans", system-ui, sans-serif;
}
/* tema claro: la escena es blanca y el panel, cobalto (los papeles se cambian entre sí) */
:root[data-tema="claro"] {
  --es-escena: #f1f3ff;
  --es-texto: #0b1fb5;
  --es-suave: rgba(11, 31, 181, .8);
  --es-borde: rgba(27, 61, 255, .26);
  --es-aro: rgba(27, 61, 255, .2);
  --es-disco: rgba(27, 61, 255, .08);
  --es-panel: var(--es-cobalto);
  --es-tinta: var(--es-blanco);
  --es-fila: rgba(250, 250, 255, .14);
  --es-borde-panel: rgba(250, 250, 255, .2);
  --es-alt: var(--es-blanco);
  --es-alt-tinta: var(--es-cobalto);
  --es-boton: var(--es-limon);
  --es-boton-tinta: var(--es-hondo);
  --es-sombra: 27, 61, 255;
}

* { box-sizing: border-box; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
svg { display: block; }
h2, p { margin: 0; }
.es-oculto { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--es-limon); outline-offset: 4px; }
:root[data-tema="claro"] :focus-visible { outline-color: var(--es-cobalto); }

/* ── el recorrido: alto, con la escena anclada mientras se baja ───── */
/* El scroll es el de la página, nativo. El recorrido mide la pantalla más cuatro pasos
   de --es-paso cada uno; la escena se queda pegada arriba mientras tanto. */
.es-recorrido { --es-paso: 75vh; position: relative; height: calc(100vh + var(--es-paso) * 4); height: calc(100svh + var(--es-paso) * 4); }
.es-escena {
  --paso: 1; --es-pp: 0;
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; isolation: isolate;
  display: grid; grid-template-rows: auto 1fr auto; justify-items: center; align-items: center;
  background: var(--es-escena); color: var(--es-texto); transition: background-color .6s;
}

/* ── el fondo ──────────────────────────────────────────────────────── */
.es-fondo { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.es-aro { position: absolute; border-radius: 50%; border: 2px solid var(--es-aro); will-change: transform; }
.es-aro-a { left: -12vw; top: -26vh; width: 58vh; aspect-ratio: 1; transform: translateY(calc(var(--es-pp) * 160px)) rotate(calc(var(--es-pp) * 40deg)); }
.es-aro-b { right: -10vw; bottom: -30vh; width: 74vh; aspect-ratio: 1; transform: translateY(calc(var(--es-pp) * -190px)); border-width: 2px; }
.es-aro-b::after { content: ""; position: absolute; inset: 9%; border-radius: 50%; border: 2px dashed var(--es-aro); }
.es-disco { position: absolute; left: 50%; top: 50%; width: min(86vh, 110vw); aspect-ratio: 1; margin: calc(min(86vh, 110vw) / -2 - 20px) 0 0 calc(min(86vh, 110vw) / -2);
  border-radius: 50%; background: radial-gradient(closest-side, var(--es-disco), transparent); }

/* ── la cabecera ───────────────────────────────────────────────────── */
.es-cab { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 28px 56px 0; }
.es-marca { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--es-suave); }
.es-marca i { width: 11px; height: 11px; border-radius: 3px; background: var(--es-limon); transform: rotate(45deg); }
:root[data-tema="claro"] .es-marca i { background: var(--es-cobalto); }
.es-cuenta { display: flex; align-items: baseline; gap: 8px; font: 600 22px/1 var(--es-titulo); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.es-cuenta small { font: 500 14px var(--es-cuerpo); color: var(--es-suave); letter-spacing: .04em; }
.es-rodillo { display: inline-block; height: 1em; overflow: hidden; color: var(--es-limon); }
:root[data-tema="claro"] .es-rodillo { color: var(--es-cobalto); }
.es-rodillo > span { display: block; transform: translateY(calc((var(--paso) - 1) * -1em)); transition: transform var(--es-dur) var(--es-muelle); }
.es-rodillo i { display: block; height: 1em; font-style: normal; line-height: 1; }

/* ── el panel: el mismo, siempre ───────────────────────────────────── */
/* El marco mide lo que mide el panel ya escalado; el panel se dibuja siempre a 480 × 520. */
.es-marco { position: relative; width: calc(400px * var(--es-k)); height: calc(500px * var(--es-k)); transform: perspective(1300px) translateY(var(--vy, 0px)) rotateX(var(--rx, 0deg)); will-change: transform; }
.es-panel {
  position: absolute; left: 0; top: 0; width: 480px; height: 520px; overflow: hidden; border-radius: 34px;
  background: var(--es-panel); color: var(--es-tinta); transform: scale(var(--es-k)); transform-origin: 0 0;
  box-shadow: 0 2px 0 rgba(255, 255, 255, .6) inset, 0 50px 80px -34px rgba(var(--es-sombra), .7), 0 16px 26px -14px rgba(var(--es-sombra), .5);
  transition: background-color .7s, color .7s;
}
.es-sombra { position: absolute; inset: 8% -6% -6%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(242, 255, 77, .2), transparent); pointer-events: none; }
:root[data-tema="claro"] .es-sombra { background: radial-gradient(closest-side, rgba(27, 61, 255, .2), transparent); }

/* lo que cambia de un paso a otro en el panel entero */
.es-panel[data-paso="3"] { --es-panel: var(--es-limon); --es-tinta: var(--es-hondo); --es-fila: rgba(11, 31, 181, .1); --es-borde-panel: rgba(11, 31, 181, .18); --es-alt: var(--es-cobalto); --es-alt-tinta: var(--es-blanco); }
.es-panel[data-paso="2"] { --es-fila: color-mix(in srgb, var(--es-tinta) 9%, var(--es-panel)); }

/* la barra de arriba: el título rueda de un paso al siguiente */
.es-barra { position: absolute; left: 0; right: 0; top: 0; height: 62px; display: flex; align-items: center; gap: 16px; padding: 0 22px; border-bottom: 1px solid var(--es-borde-panel); transition: border-color .7s; }
.es-menu { display: grid; gap: 4px; width: 20px; }
.es-menu b { display: block; height: 2.5px; border-radius: 2px; background: currentColor; }
.es-menu b:nth-child(2) { width: 70%; transition: width var(--es-dur) var(--es-muelle); }
.es-panel[data-paso="2"] .es-menu b:nth-child(2) { width: 100%; }
.es-panel[data-paso="3"] .es-menu b:nth-child(2) { width: 45%; }
.es-titulos { position: relative; flex: 1; height: 26px; }
.es-ro { --dd: calc(var(--t) - var(--paso)); position: absolute; left: 0; top: 0; white-space: nowrap;
  opacity: clamp(0, calc(1 - var(--dd) * var(--dd)), 1); transform: translateY(calc(var(--dd) * 18px));
  transition: transform var(--es-dur) var(--es-muelle), opacity .4s; }
.es-titulos .es-ro { font: 600 22px/26px var(--es-titulo); letter-spacing: -.01em; }
.es-chip { position: relative; width: 108px; height: 28px; border-radius: 14px; background: var(--es-fila); transition: background-color .7s; }
.es-chip .es-ro { left: 0; right: 0; text-align: center; font: 500 12.5px/28px var(--es-cuerpo); letter-spacing: .02em; }

/* el carril de la izquierda: el resaltado baja de un icono al siguiente y, al final, todo se esconde */
.es-rail { position: absolute; left: 20px; top: 84px; width: 36px; display: grid; gap: 16px;
  transform: translateX(calc(max(0, var(--paso) - 3) * -70px)); opacity: calc(1 - max(0, var(--paso) - 3));
  transition: transform var(--es-dur) var(--es-muelle), opacity .4s; }
.es-ri { position: relative; z-index: 1; display: grid; place-items: center; width: 36px; height: 36px; font-style: normal; opacity: .72; transition: color .5s, opacity .5s; }
.es-ri svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.es-rsel { position: absolute; left: 0; top: 0; z-index: 0; width: 36px; height: 36px; border-radius: 12px; background: var(--es-limon);
  transform: translateY(calc((var(--paso) - 1) * 52px)); transition: transform var(--es-dur) var(--es-muelle); box-shadow: 0 8px 14px -8px rgba(var(--es-sombra), .6); }
.es-panel[data-paso="1"] .es-ri:nth-of-type(1), .es-panel[data-paso="2"] .es-ri:nth-of-type(2),
.es-panel[data-paso="3"] .es-ri:nth-of-type(3), .es-panel[data-paso="4"] .es-ri:nth-of-type(4) { color: var(--es-hondo); opacity: 1; }
.es-rsel { margin-top: 0; }

/* la zona de las piezas */
.es-main { position: absolute; left: 80px; top: 78px; width: 376px; height: 340px; transform: translateX(calc(max(0, var(--paso) - 3) * -28px)); transition: transform var(--es-dur) var(--es-muelle); }
.es-hueco { position: absolute; left: 260px; top: 232px; width: 116px; height: 98px; display: grid; place-items: center; border-radius: 22px; border: 2px dashed currentColor; pointer-events: none;
  opacity: clamp(0, calc(.38 * (1 - (var(--paso) - 2) * (var(--paso) - 2))), .4); transform: scale(calc(.8 + .2 * clamp(0, calc(1 - (var(--paso) - 2) * (var(--paso) - 2)), 1))); transition: opacity .5s, transform var(--es-dur) var(--es-muelle); transition-delay: .25s; }
.es-hueco svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.es-cols, .es-kpi, .es-t4 { position: absolute; left: 0; top: 0; width: 100%; pointer-events: none; transition: opacity .5s, transform var(--es-dur) var(--es-muelle); }
.es-cols { display: flex; justify-content: space-between; opacity: clamp(0, calc(1 - (var(--paso) - 2) * (var(--paso) - 2)), 1); transform: translateY(calc((var(--paso) - 2) * -12px)); }
.es-cols span { width: 116px; font-size: 11.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; opacity: .7; padding-left: 4px; }
.es-kpi { opacity: clamp(0, calc(1 - (var(--paso) - 3) * (var(--paso) - 3)), 1); transform: translateY(calc((var(--paso) - 3) * -14px)); }
.es-kpi b { display: block; font: 600 54px/1 var(--es-titulo); letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.es-kpi small { display: block; margin-top: 6px; font-size: 14px; font-weight: 500; opacity: .75; }
.es-t4 { display: grid; justify-items: center; gap: 6px; text-align: center; opacity: clamp(0, calc(1 - (var(--paso) - 4) * (var(--paso) - 4)), 1); transform: translateY(calc((var(--paso) - 4) * -12px)); }
.es-t4 b { font: 600 24px/1.1 var(--es-titulo); letter-spacing: 0; margin-top: 8px; }
.es-t4 small { font-size: 14.5px; font-weight: 500; opacity: .75; }
.es-ok { display: grid; place-items: center; width: 66px; height: 66px; border-radius: 50%; background: var(--es-limon); box-shadow: 0 12px 20px -10px rgba(var(--es-sombra), .6); transform: scale(calc(.5 + .5 * clamp(0, calc(1 - (var(--paso) - 4) * (var(--paso) - 4)), 1))); transition: transform var(--es-dur) var(--es-muelle); transition-delay: .12s; }
.es-ok svg { width: 34px; height: 34px; fill: none; stroke: var(--es-hondo); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* ── las piezas: cinco, siempre las mismas ─────────────────────────── */
/* Cada paso les da otra posición, otro tamaño y otro color con un resorte; sus
   contenidos (casilla, líneas, etiqueta, cifra, icono) se encienden o se apagan. */
.es-p {
  position: absolute; left: 0; top: 0; width: var(--w); height: var(--h); border-radius: var(--r); background: var(--bg); color: var(--fg); overflow: hidden;
  transform: translate(var(--x), var(--y)); transition-property: transform, width, height, border-radius, background-color, color; transition-duration: var(--es-dur), var(--es-dur), var(--es-dur), var(--es-dur), .6s, .6s;
  transition-timing-function: var(--es-muelle), var(--es-muelle), var(--es-muelle), var(--es-muelle), ease, ease; transition-delay: calc(var(--i) * 50ms);
}
/* paso 1 · lista */
.es-panel[data-paso="1"] .es-p { --x: 0px; --w: 376px; --h: 54px; --r: 18px; --bg: var(--es-fila); --fg: var(--es-tinta); }
.es-panel[data-paso="1"] .es-p[data-p="1"] { --y: 0px; --bg: var(--es-limon); --fg: var(--es-hondo); }
.es-panel[data-paso="1"] .es-p[data-p="2"] { --y: 64px; }
.es-panel[data-paso="1"] .es-p[data-p="3"] { --y: 128px; }
.es-panel[data-paso="1"] .es-p[data-p="4"] { --y: 192px; }
.es-panel[data-paso="1"] .es-p[data-p="5"] { --y: 256px; }
/* paso 2 · tablero */
.es-panel[data-paso="2"] .es-p { --w: 116px; --r: 22px; --bg: var(--es-fila); --fg: var(--es-tinta); }
.es-panel[data-paso="2"] .es-p[data-p="1"] { --x: 0px; --y: 32px; --h: 146px; --bg: var(--es-limon); --fg: var(--es-hondo); }
.es-panel[data-paso="2"] .es-p[data-p="2"] { --x: 130px; --y: 32px; --h: 114px; }
.es-panel[data-paso="2"] .es-p[data-p="3"] { --x: 260px; --y: 32px; --h: 184px; --bg: var(--es-alt); --fg: var(--es-alt-tinta); }
.es-panel[data-paso="2"] .es-p[data-p="4"] { --x: 0px; --y: 192px; --h: 138px; }
.es-panel[data-paso="2"] .es-p[data-p="5"] { --x: 130px; --y: 160px; --h: 170px; }
/* paso 3 · gráfico de barras */
.es-panel[data-paso="3"] .es-p { --w: 52px; --r: 16px; --bg: var(--es-cobalto); --fg: var(--es-blanco); }
.es-panel[data-paso="3"] .es-p[data-p="1"] { --x: 0px; --y: 262px; --h: 80px; }
.es-panel[data-paso="3"] .es-p[data-p="2"] { --x: 81px; --y: 208px; --h: 134px; }
.es-panel[data-paso="3"] .es-p[data-p="3"] { --x: 162px; --y: 232px; --h: 110px; }
.es-panel[data-paso="3"] .es-p[data-p="4"] { --x: 243px; --y: 152px; --h: 190px; }
.es-panel[data-paso="3"] .es-p[data-p="5"] { --x: 324px; --y: 98px; --h: 244px; --bg: var(--es-blanco); --fg: var(--es-hondo); }
/* paso 4 · hoja de publicación: cinco iconos de destino */
.es-panel[data-paso="4"] .es-p { --y: 204px; --w: 64px; --h: 64px; --r: 22px; --bg: var(--es-fila); --fg: var(--es-tinta); }
.es-panel[data-paso="4"] .es-p[data-p="1"] { --x: 0px; --bg: var(--es-limon); --fg: var(--es-hondo); }
.es-panel[data-paso="4"] .es-p[data-p="2"] { --x: 78px; --bg: var(--es-alt); --fg: var(--es-alt-tinta); }
.es-panel[data-paso="4"] .es-p[data-p="3"] { --x: 156px; }
.es-panel[data-paso="4"] .es-p[data-p="4"] { --x: 234px; --bg: var(--es-limon); --fg: var(--es-hondo); }
.es-panel[data-paso="4"] .es-p[data-p="5"] { --x: 312px; --bg: var(--es-alt); --fg: var(--es-alt-tinta); }

/* lo que cada paso enciende dentro de las piezas */
.es-panel[data-paso="1"] { --lx: 52px; --l1y: 17px; --l1w: 46%; --l2y: 33px; --l2w: 28%; --tx: 306px; --ta: .5; --tb: -11px; }
.es-panel[data-paso="2"] { --lx: 13px; --l1y: 15px; --l1w: 64%; --l2y: 31px; --l2w: 40%; --tx: 11px; --ta: 1; --tb: -33px; }
.es-ck, .es-l, .es-tag, .es-vv, .es-ic { position: absolute; transition: opacity .45s, transform var(--es-dur) var(--es-muelle), left var(--es-dur) var(--es-muelle), top var(--es-dur) var(--es-muelle), width var(--es-dur) var(--es-muelle); }
.es-ck { left: 15px; top: 50%; width: 24px; height: 24px; margin-top: -12px; border-radius: 50%; border: 2px solid currentColor; opacity: 0; transform: scale(.4); display: grid; place-items: center; font-style: normal; }
.es-ck svg { width: 16px; height: 16px; fill: none; stroke: var(--es-blanco); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.es-panel[data-paso="1"] .es-ck { opacity: .55; transform: none; }
.es-panel[data-paso="1"] .es-p[data-p="1"] .es-ck { opacity: 1; background: var(--es-hondo); border-color: var(--es-hondo); }
.es-panel[data-paso="1"] .es-p[data-p="1"] .es-ck svg { opacity: 1; }
.es-l { left: var(--lx); height: 8px; border-radius: 4px; background: currentColor; opacity: 0; }
.es-l1 { top: var(--l1y); width: var(--l1w); }
.es-l2 { top: var(--l2y); width: var(--l2w); height: 6px; }
.es-panel[data-paso="1"] .es-l1, .es-panel[data-paso="2"] .es-l1 { opacity: .85; }
.es-panel[data-paso="1"] .es-l2, .es-panel[data-paso="2"] .es-l2 { opacity: .3; }
.es-tag { left: 0; top: 0; width: 52px; height: 22px; border-radius: 11px; background: color-mix(in srgb, currentColor 14%, transparent); font: 500 11px/22px var(--es-cuerpo); font-style: normal; text-align: center; letter-spacing: .02em; opacity: 0;
  transform: translate(var(--tx), calc(var(--h) * var(--ta) + var(--tb))); }
.es-panel[data-paso="1"] .es-tag, .es-panel[data-paso="2"] .es-tag { opacity: 1; }
.es-vv { left: 0; top: 12px; width: 100%; text-align: center; font: 600 16px/1 var(--es-titulo); letter-spacing: -.02em; font-variant-numeric: tabular-nums; opacity: 0; transform: translateY(10px); }
.es-panel[data-paso="3"] .es-vv { opacity: 1; transform: none; transition-delay: .35s; }
.es-ic { inset: 0; display: grid; place-items: center; opacity: 0; transform: scale(.5) rotate(-20deg); }
.es-ic svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.es-panel[data-paso="4"] .es-ic { opacity: 1; transform: none; transition-delay: .3s; }

/* los pies del panel: cada paso trae el suyo */
.es-add, .es-eje, .es-pub { position: absolute; left: 80px; width: 376px; transition: opacity .5s, transform var(--es-dur) var(--es-muelle); }
.es-add { top: 440px; height: 52px; display: flex; align-items: center; justify-content: space-between; padding: 0 8px 0 18px; border-radius: 18px; background: var(--es-fila);
  opacity: clamp(0, calc(1 - max(0, var(--paso) - 2) * max(0, var(--paso) - 2)), 1); transform: translateY(calc(max(0, var(--paso) - 2) * 40px)); }
.es-add-t { position: relative; flex: 1; height: 20px; font-size: 15px; }
.es-add-t .es-ro { font: 500 15px/20px var(--es-cuerpo); opacity: clamp(0, calc((1 - var(--dd) * var(--dd)) * .6), .6); }
.es-add i { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: var(--es-boton); color: var(--es-boton-tinta); }
.es-add svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.es-eje { top: 432px; display: grid; grid-template-columns: repeat(5, 52px); justify-content: space-between; text-align: center; font-size: 12.5px; font-weight: 500;
  opacity: clamp(0, calc(1 - (var(--paso) - 3) * (var(--paso) - 3)), 1); transform: translateY(calc((var(--paso) - 3) * 20px)); }
.es-eje span { opacity: .75; }
.es-eje span:last-child { opacity: 1; font-weight: 500; }
.es-eje::before { content: ""; position: absolute; left: -6px; right: -6px; top: -12px; height: 2px; border-radius: 1px; background: currentColor; opacity: .25; }
.es-pub { top: 436px; height: 56px; display: flex; align-items: center; justify-content: center; gap: 10px; border-radius: 20px; background: var(--es-boton); color: var(--es-boton-tinta);
  font: 600 18px/1 var(--es-titulo); letter-spacing: .01em; box-shadow: 0 14px 22px -12px rgba(var(--es-sombra), .8), 0 -2px 0 rgba(255, 255, 255, .18) inset;
  opacity: clamp(0, calc(1 - (var(--paso) - 4) * (var(--paso) - 4)), 1); transform: translateY(calc((4 - var(--paso)) * 24px)); }
.es-pub svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* ── el texto de cada paso: entra por el lado ──────────────────────── */
.es-textos { position: absolute; inset: 0; pointer-events: none; }
.es-txt { position: absolute; top: calc(50% - 8px); width: min(300px, 23.5vw); opacity: 0; visibility: hidden;
  transform: translate(calc(var(--lado) * 150px), -50%); transition: transform .8s var(--es-curva), opacity .3s, visibility 0s .8s; }
.es-txt[data-lado="izq"] { --lado: -1; left: 56px; }
.es-txt[data-lado="der"] { --lado: 1; right: 56px; }
.es-txt.is-activo { opacity: 1; visibility: visible; transform: translate(0, -50%); transition: transform var(--es-dur) var(--es-muelle), opacity .4s, visibility 0s; pointer-events: auto; }
.es-txt > * { opacity: 0; transform: translateX(calc(var(--lado) * 46px)); transition: opacity .25s, transform .5s var(--es-curva); }
.es-txt.is-activo > * { opacity: 1; transform: none; transition: opacity .5s, transform var(--es-dur) var(--es-muelle); transition-delay: calc(.1s + var(--k) * .075s); }
.es-num { font: 600 17px var(--es-titulo); letter-spacing: .14em; color: var(--es-limon); }
:root[data-tema="claro"] .es-num { color: var(--es-cobalto); }
.es-txt h2 { margin: 10px 0 14px; font: 600 clamp(40px, 4.7vw, 62px)/.95 var(--es-titulo); letter-spacing: -.03em; }
.es-lema { font-size: 20px; font-weight: 500; line-height: 1.3; }
.es-par { margin-top: 12px; font-size: 17px; line-height: 1.5; color: var(--es-suave); }

/* ── el pie: el indicador de pasos con su progreso ─────────────────── */
.es-pie { width: 100%; display: grid; justify-items: center; padding: 0 56px 28px; position: relative; }
.es-pasos { position: relative; display: flex; justify-content: space-between; width: min(560px, 100%); }
.es-pista { position: absolute; left: calc(64px / 2); right: calc(64px / 2); top: 19px; height: 2px; border-radius: 1px; background: var(--es-borde); overflow: hidden; }
.es-pista i { position: absolute; inset: 0; border-radius: inherit; background: var(--es-limon); transform-origin: left; transform: scaleX(var(--u, 0)); }
:root[data-tema="claro"] .es-pista i { background: var(--es-cobalto); }
.es-pi { position: relative; display: grid; justify-items: center; gap: 8px; width: 64px; }
.es-pn { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--es-borde); background: var(--es-escena); font: 600 14px var(--es-titulo); font-variant-numeric: tabular-nums;
  transition: background-color .35s, border-color .35s, color .35s, transform .6s var(--es-muelle); }
.es-pl { font-size: 13px; font-weight: 500; color: var(--es-suave); transition: color .3s; }
.es-pi.is-hecho .es-pn { border-color: var(--es-limon); color: var(--es-limon); }
.es-pi.is-activo .es-pn { background: var(--es-limon); border-color: var(--es-limon); color: var(--es-hondo); transform: scale(1.14); box-shadow: 0 8px 16px -8px rgba(var(--es-sombra), .8); }
.es-pi.is-activo .es-pl { color: var(--es-texto); }
:root[data-tema="claro"] .es-pi.is-hecho .es-pn { border-color: var(--es-cobalto); color: var(--es-cobalto); }
:root[data-tema="claro"] .es-pi.is-activo .es-pn { background: var(--es-cobalto); border-color: var(--es-cobalto); color: var(--es-blanco); }
@media (hover: hover) { .es-pi:hover .es-pn { transform: scale(1.1); } .es-pi.is-activo:hover .es-pn { transform: scale(1.18); } }
.es-baja { position: absolute; left: 56px; bottom: 38px; display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--es-suave);
  opacity: clamp(0, calc(1 - (var(--paso) - 1) * (var(--paso) - 1)), 1); transition: opacity .4s; }
.es-baja i { position: relative; width: 22px; height: 34px; border-radius: 12px; border: 2px solid currentColor; }
.es-baja i::after { content: ""; position: absolute; left: 50%; top: 6px; width: 4px; height: 7px; margin-left: -2px; border-radius: 2px; background: currentColor; animation: es-rueda 1.6s ease-in-out infinite; }
@keyframes es-rueda { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(10px); opacity: 0; } 100% { opacity: 0; } }

/* ── el final: la escena se suelta y llega la última sección ──────── */
.es-fin { display: grid; justify-items: center; align-content: center; gap: 18px; min-height: 80vh; padding: 12vh 24px; text-align: center; background: var(--es-limon); color: var(--es-hondo); }
.es-fin h2 { font: 600 clamp(42px, 6vw, 88px)/1 var(--es-titulo); letter-spacing: -.03em; word-spacing: .05em; }
.es-fin p { font-size: 19px; font-weight: 500; opacity: .8; max-width: 30ch; }
.es-boton { display: inline-flex; align-items: center; gap: 10px; margin-top: 14px; padding: 18px 28px 18px 30px; border-radius: 999px; background: var(--es-cobalto); color: var(--es-blanco); font: 600 18px var(--es-titulo); letter-spacing: .01em;
  box-shadow: 0 18px 26px -14px rgba(var(--es-sombra), .8); transition: transform .5s var(--es-muelle); }
.es-boton svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.es-boton:focus-visible { outline-color: var(--es-hondo); }
@media (hover: hover) { .es-boton:hover { transform: translateY(-3px); } }
.es-boton:active { transform: scale(.95); transition-duration: .1s; }
:root[data-tema="claro"] .es-fin { background: var(--es-cobalto); color: var(--es-blanco); }
:root[data-tema="claro"] .es-boton { background: var(--es-limon); color: var(--es-hondo); }

/* ── 375 px: el panel pasa arriba (pegajoso) y el texto va debajo ─── */
@media (max-width: 760px) {
  .es-recorrido { --es-paso: 70vh; }
  .es-escena { grid-template-rows: auto auto minmax(0, 1fr) auto; align-items: start; }
  .es-cab { padding: 18px 20px 0; }
  .es-marca { font-size: 12px; }
  .es-cuenta { font-size: 19px; }
  .es-marco { margin-top: 12px; }
  .es-textos { position: relative; inset: auto; width: 100%; align-self: stretch; }
  .es-txt { top: 14px; width: auto; left: 0 !important; right: 0 !important; padding: 0 24px; transform: translate(calc(var(--lado) * 60px), 0); }
  .es-txt.is-activo { transform: none; }
  .es-txt h2 { font-size: 40px; margin: 6px 0 8px; }
  .es-lema { font-size: 16.5px; }
  .es-par { font-size: 14.5px; margin-top: 6px; }
  .es-num { font-size: 14px; }
  .es-pie { padding: 0 20px 16px; }
  .es-pasos { width: 100%; }
  .es-pl { display: none; }
  .es-pn { width: 34px; height: 34px; font-size: 12px; }
  .es-pista { top: 16px; left: 32px; right: 32px; }
  .es-pi { width: 64px; }
  .es-baja { display: none; }
  .es-aro-a { width: 46vh; left: -40vw; }
  .es-fin h2 { font-size: 40px; }
}

/* ── movimiento reducido: los pasos cambian sin resortes ni viajes ── */
@media (prefers-reduced-motion: reduce) {
  .es-baja i::after { animation: none; }
  .es-p, .es-ck, .es-l, .es-tag, .es-vv, .es-ic, .es-ro, .es-rail, .es-rsel, .es-main, .es-cols, .es-kpi, .es-t4, .es-ok, .es-add, .es-eje, .es-pub, .es-txt, .es-txt > *, .es-rodillo > span, .es-pn, .es-menu b {
    transition-duration: .01s !important; transition-delay: 0s !important;
  }
  .es-aro-a, .es-aro-b { transform: none; }
  .es-marco { transform: none; }
}