/* ---------- Reproductor de animaciones ---------- */
.xp {
  --atelia: #46e0ff;
  --carbon: #0b0e13;
  margin: 0;
  border-radius: var(--radius-l);
  background: var(--ink);
  color: var(--paper);
  overflow: hidden;
  box-shadow: var(--shadow-lift);
}
.xp:focus-visible { outline: 3px solid var(--signal); outline-offset: 3px; }

.xp-tabs { display: flex; gap: var(--space-1); padding: var(--space-2) var(--space-3) 0; overflow-x: auto; scrollbar-width: none; }
.xp-tab {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 0; border-bottom: 2px solid transparent; background: none;
  color: rgba(243, 238, 227, 0.55); font-size: var(--text-sm); font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: color var(--duration-fast), border-color var(--duration-fast);
}
.xp-tab span { display: grid; place-items: center; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: rgba(243, 238, 227, 0.12); font-size: var(--text-xs); }
.xp-tab:hover { color: var(--paper); }
.xp-tab.is-active { color: var(--paper); border-color: var(--signal); }
.xp-tab.is-active span { background: var(--signal); color: #fff; }

.xp-stage {
  position: relative;
  aspect-ratio: 16 / 9;
  container-type: inline-size;
  overflow: hidden;
  background:
    linear-gradient(rgba(243, 238, 227, 0.045) 1px, transparent 1px) 0 0 / 3.2cqw 3.2cqw,
    linear-gradient(90deg, rgba(243, 238, 227, 0.045) 1px, transparent 1px) 0 0 / 3.2cqw 3.2cqw,
    radial-gradient(circle at 80% 15%, rgba(226, 81, 43, 0.22), transparent 45%),
    radial-gradient(circle at 15% 85%, rgba(31, 111, 92, 0.3), transparent 50%),
    #101a24;
}

.xp-caption {
  min-height: 4.2em;
  padding: var(--space-4) var(--space-5) var(--space-2);
  font: italic 500 var(--text-lg) / 1.35 var(--font-display);
}

.xp-controls { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4) var(--space-4); }
.xp-btn {
  display: grid; place-items: center; flex: none;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid rgba(243, 238, 227, 0.25); background: transparent; color: var(--paper); cursor: pointer;
  transition: background var(--duration-fast), transform var(--duration-fast);
}
.xp-btn:hover { background: rgba(243, 238, 227, 0.1); }
.xp-btn:active { transform: scale(0.94); }
.xp-btn svg { width: 18px; height: 18px; }
.xp-btn.is-main { width: 46px; height: 46px; background: var(--signal); border-color: var(--signal); color: #fff; }
.xp-btn.is-main svg { width: 20px; height: 20px; }
.xp-dots { display: flex; flex: 1; justify-content: center; gap: 6px; }
.xp-dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: rgba(243, 238, 227, 0.2); cursor: pointer; transition: width var(--duration-normal) var(--ease-out-expo), background var(--duration-fast); }
.xp-dot.is-past { background: rgba(243, 238, 227, 0.55); }
.xp-dot.is-active { width: 26px; background: var(--signal); }

.xp:fullscreen { display: flex; flex-direction: column; justify-content: center; border-radius: 0; }
.xp:fullscreen .xp-stage { width: min(100vw, calc((100vh - 10rem) * 16 / 9)); margin-inline: auto; }
.xp:fullscreen .xp-caption { text-align: center; font-size: clamp(1.2rem, 2vw, 2rem); }

/* ---------- Escenas y paneles ---------- */
.xp-scene { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 0.45s, visibility 0.45s; }
.xp-scene.is-active { opacity: 1; visibility: visible; }

.pane { position: absolute; opacity: 0; transform: translateY(2.5cqw) scale(0.98); transition: opacity 0.5s, transform 0.7s var(--ease-out-expo); }
.xp-scene[data-s="0"] .pane[data-on~="0"],
.xp-scene[data-s="1"] .pane[data-on~="1"],
.xp-scene[data-s="2"] .pane[data-on~="2"],
.xp-scene[data-s="3"] .pane[data-on~="3"] { opacity: 1; transform: none; }

.xp-label { font-size: 1.3cqw; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(243, 238, 227, 0.6); }

/* ---------- 1 · Token ---------- */
.tk-sentence {
  left: 4%; right: 4%; top: 30%;
  display: flex; flex-wrap: nowrap; justify-content: center; gap: 0;
  font: 600 4cqw / 1.3 var(--font-display);
  transition: opacity 0.5s, transform 0.7s var(--ease-out-expo), gap 0.6s var(--ease-out-expo);
}
.tk { border-radius: 0.2em; transition: background 0.4s, color 0.4s, box-shadow 0.4s; transition-delay: calc(var(--i) * 70ms); }
.xp-scene[data-s="1"] .tk-sentence { gap: 0.9cqw; }
.xp-scene[data-s="1"] .tk-sentence .tk { color: var(--ink); box-shadow: 0 0 0 0.35cqw currentColor inset; }
.xp-scene[data-s="1"] .tk:nth-child(4n + 1) { background: #f6d9cc; color: #a8361a; }
.xp-scene[data-s="1"] .tk:nth-child(4n + 2) { background: #d3e6dd; color: #175546; }
.xp-scene[data-s="1"] .tk:nth-child(4n + 3) { background: #f1e2bd; color: #7d5a12; }
.xp-scene[data-s="1"] .tk:nth-child(4n + 4) { background: #d9e3f0; color: #23466e; }

.tk-count { left: 0; right: 0; top: 60%; text-align: center; font-size: 2.2cqw; color: rgba(243, 238, 227, 0.8); transition-delay: 0.7s; }
.tk-count strong { font: 700 5cqw var(--font-display); color: var(--signal); margin-right: 0.3em; }
.tk-count small { font-size: 1.4cqw; opacity: 0.6; }

.tk-predict { left: 12%; right: 12%; top: 16%; }
.tk-prompt { margin: 0 0 3.5cqw; font: 600 4cqw var(--font-display); }
.tk-next { display: inline-block; margin-left: 0.25em; padding: 0 0.2em; border-radius: 0.2em; background: var(--signal); color: #fff; opacity: 0; transform: translateY(1cqw); transition: opacity 0.4s, transform 0.5s var(--ease-out-expo); }
.tk-caret { display: inline-block; width: 0.35cqw; height: 4cqw; margin-left: 0.4cqw; vertical-align: -0.6cqw; background: var(--paper); animation: blink 1s steps(1) infinite; }
.tk-cands { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.6cqw; }
.tk-cands li { display: grid; grid-template-columns: 14cqw 1fr 6cqw; align-items: center; gap: 2cqw; font-size: 2.2cqw; transition: color 0.4s; }
.tk-cand { font-family: var(--font-display); font-weight: 600; text-align: right; }
.tk-bar { height: 2.2cqw; border-radius: 999px; background: rgba(243, 238, 227, 0.1); overflow: hidden; }
.tk-bar i { display: block; height: 100%; border-radius: inherit; background: rgba(243, 238, 227, 0.55); transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease-out-expo), background 0.4s; transition-delay: calc(0.5s + var(--i) * 0.18s); }
.tk-cands b { font-variant-numeric: tabular-nums; opacity: 0.8; }
.xp-scene[data-s="2"] .tk-bar i { transform: scaleX(var(--p)); }
.xp-scene[data-s="2"] .tk-cands .is-win { color: var(--signal); transition-delay: 2s; }
.xp-scene[data-s="2"] .tk-cands .is-win .tk-bar i { background: var(--signal); }
.xp-scene[data-s="2"] .tk-next { opacity: 1; transform: none; transition-delay: 2.2s; }

.tk-window { left: 8%; right: 8%; top: 24%; display: grid; gap: 2cqw; }
.tk-track {
  padding: 2cqw 0; border: 2px solid rgba(70, 224, 255, 0.5); border-radius: 1.5cqw; overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0, #000 18%, #000 100%);
}
.tk-flow { display: flex; gap: 0.8cqw; width: max-content; font: 600 2.6cqw var(--font-display); animation: marquee 16s linear infinite; animation-play-state: paused; }
.tk-flow .tk { padding: 0.2cqw 0.8cqw; background: rgba(243, 238, 227, 0.1); }
.xp-scene[data-s="3"] .tk-flow { animation-play-state: running; }
.tk-meter { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.5cqw; font-size: 1.6cqw; color: rgba(243, 238, 227, 0.7); }
.tk-meter-bar { height: 1.4cqw; border-radius: 999px; background: rgba(243, 238, 227, 0.1); overflow: hidden; }
.tk-meter-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--sea), var(--gold), var(--signal)); transform: scaleX(0.1); transform-origin: left; transition: transform 4.5s linear 0.5s; }
.xp-scene[data-s="3"] .tk-meter-bar i { transform: scaleX(0.82); }

/* ---------- 2 · Harness ---------- */
.hz-basic { inset: 0; display: flex; align-items: center; justify-content: center; gap: 5cqw; }
.hz-io { max-width: 15cqw; padding: 1cqw 1.4cqw; border-radius: 1cqw; background: rgba(243, 238, 227, 0.08); font: 1.6cqw/1.3 ui-monospace, Menlo, Consolas, monospace; }
.hz-arrow { font-size: 3cqw; opacity: 0.6; }
.hz-frame { position: relative; padding: 6cqw 5cqw; border: 0.25cqw dashed transparent; border-radius: 2cqw; transition: border-color 0.6s, background 0.6s; }
.hz-frame-label { position: absolute; top: 1.2cqw; left: 0; right: 0; text-align: center; white-space: nowrap; font-size: 1.25cqw; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #7fd1b8; opacity: 0; transition: opacity 0.5s 0.3s; }
.hz-model { display: grid; place-items: center; width: 17cqw; height: 10cqw; border-radius: 1.4cqw; background: var(--paper); color: var(--ink); font: 700 3cqw/1 var(--font-display); text-align: center; box-shadow: 0 1.5cqw 3cqw -1.5cqw rgba(0, 0, 0, 0.6); }
.hz-model small { display: block; margin-top: 0.6cqw; font: 500 1.3cqw var(--font-body); color: var(--muted); }
.hz-tool { position: absolute; padding: 0.6cqw 1.2cqw; border-radius: 999px; background: var(--sea); color: #fff; font-size: 1.4cqw; font-weight: 600; white-space: nowrap; opacity: 0; scale: 0.6; transition: opacity 0.4s, scale 0.5s var(--ease-out-expo); transition-delay: calc(0.4s + var(--i) * 0.2s); }
.hz-tool:nth-of-type(2) { top: 50%; right: 0; translate: 50% -50%; }
.hz-tool:nth-of-type(3) { bottom: 0; left: 4%; translate: 0 50%; }
.hz-tool:nth-of-type(4) { bottom: 0; right: 4%; translate: 0 50%; }
.xp-scene[data-s="1"] .hz-frame { border-color: #7fd1b8; background: rgba(31, 111, 92, 0.22); }
.xp-scene[data-s="1"] .hz-frame-label,
.xp-scene[data-s="1"] .hz-tool { opacity: 1; scale: 1; }

.hz-loop { inset: 0; display: grid; place-items: center; }
.hz-ring { position: relative; width: 30cqw; aspect-ratio: 1; border: 0.25cqw dashed rgba(243, 238, 227, 0.25); border-radius: 50%; }
.hz-orbit { position: absolute; inset: -0.15cqw; animation: spin 4.8s linear infinite; animation-play-state: paused; }
.hz-dot { position: absolute; top: 0; left: 50%; width: 2.2cqw; height: 2.2cqw; border-radius: 50%; background: var(--signal); translate: -50% -50%; box-shadow: 0 0 2cqw 0.6cqw rgba(226, 81, 43, 0.6); }
.hz-node {
  position: absolute; width: 17cqw; padding: 1cqw 1.2cqw; border-radius: 1.2cqw;
  background: #1b2733; border: 1px solid rgba(243, 238, 227, 0.15);
  font: 600 1.6cqw/1.2 var(--font-display); text-align: center;
  animation: nodo 4.8s infinite; animation-play-state: paused;
}
.hz-node small { display: block; margin-top: 0.4cqw; font: 1.2cqw ui-monospace, Menlo, monospace; color: rgba(243, 238, 227, 0.6); }
.n-top { top: 0; left: 50%; translate: -50% -60%; animation-delay: 0s; }
.n-right { top: 50%; left: 100%; translate: -25% -50%; animation-delay: 1.2s; }
.n-bottom { top: 100%; left: 50%; translate: -50% -40%; animation-delay: 2.4s; }
.n-left { top: 50%; right: 100%; translate: 25% -50%; animation-delay: 3.6s; }
.hz-center { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; font: italic 1.7cqw var(--font-display); color: rgba(243, 238, 227, 0.55); }
.xp-scene[data-s="2"] .hz-orbit,
.xp-scene[data-s="2"] .hz-node { animation-play-state: running; }

.hz-perm { inset: 0; display: flex; align-items: center; justify-content: center; gap: 5cqw; }
.hz-dialog { display: grid; gap: 1.5cqw; width: 32cqw; padding: 2.5cqw; border-radius: 1.6cqw; background: var(--paper); color: var(--ink); box-shadow: 0 2cqw 4cqw -2cqw rgba(0, 0, 0, 0.7); }
.hz-dialog .xp-label { color: var(--muted); }
.hz-dialog code { font: 600 2.6cqw ui-monospace, Menlo, monospace; }
.hz-actions { display: flex; gap: 1cqw; }
.hz-actions span { padding: 0.8cqw 1.6cqw; border-radius: 999px; border: 1.5px solid var(--ink); font-size: 1.5cqw; font-weight: 600; }
.hz-yes { transition: background 0.3s 2.4s, color 0.3s 2.4s, transform 0.3s 2.4s; }
.xp-scene[data-s="3"] .hz-yes { background: var(--sea); border-color: var(--sea) !important; color: #fff; transform: scale(1.06); }
.hz-rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.4cqw; font-size: 2cqw; }
.hz-rules li { opacity: 0; transform: translateX(-1.5cqw); transition: opacity 0.4s, transform 0.5s var(--ease-out-expo); }
.hz-rules li:nth-child(2) { transition-delay: 0.25s; }
.hz-rules li:nth-child(3) { transition-delay: 0.5s; }
.xp-scene[data-s="3"] .hz-rules li { opacity: 1; transform: none; }

/* ---------- 3 · Atelia ---------- */
.at-term { inset: 0; display: grid; place-content: center; justify-items: center; gap: 2.5cqw; }
.at-window { width: 46cqw; padding: 0 2cqw 2cqw; border-radius: 1.4cqw; background: var(--carbon); border: 1px solid rgba(243, 238, 227, 0.12); font: 1.8cqw/1.7 ui-monospace, Menlo, Consolas, monospace; }
.at-window p { margin: 0; }
.at-window b { color: var(--atelia); }
.at-titlebar { display: flex; align-items: center; gap: 0.7cqw; margin: 0 -2cqw 1.4cqw; padding: 1cqw 1.6cqw; border-bottom: 1px solid rgba(243, 238, 227, 0.1); font-size: 1.2cqw; color: rgba(243, 238, 227, 0.45); }
.at-titlebar i { width: 1cqw; height: 1cqw; border-radius: 50%; background: rgba(243, 238, 227, 0.2); }
.at-titlebar span { margin-left: auto; }
.at-typed { clip-path: inset(0 100% 0 0); transition: clip-path 1.8s steps(32) 0.6s; }
.at-dim { color: rgba(243, 238, 227, 0.45); opacity: 0; transition: opacity 0.4s 2.6s; }
.xp-scene[data-s="0"] .at-typed { clip-path: inset(0 0 0 0); }
.xp-scene[data-s="0"] .at-dim { opacity: 1; }
.at-note { font: italic 2cqw var(--font-display); color: rgba(243, 238, 227, 0.6); }

.at-grid { left: 7%; right: 7%; top: 5%; bottom: 21%; }
.at-app { height: 100%; display: grid; grid-template-rows: auto 1fr; border-radius: 1.4cqw; background: var(--carbon); border: 1px solid rgba(70, 224, 255, 0.35); box-shadow: 0 0 4cqw -1cqw rgba(70, 224, 255, 0.25); overflow: hidden; }
.at-app-bar { display: flex; justify-content: space-between; align-items: center; padding: 1cqw 1.6cqw; border-bottom: 1px solid rgba(243, 238, 227, 0.08); font-size: 1.3cqw; color: rgba(243, 238, 227, 0.55); }
.at-logo { font: 700 1.8cqw var(--font-display); color: var(--atelia); letter-spacing: 0.02em; }
.at-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2cqw; padding: 1.4cqw; }
.at-card {
  display: grid; align-content: start; gap: 0.7cqw; padding: 1.2cqw; border-radius: 1cqw;
  background: #131a23; border: 1px solid rgba(243, 238, 227, 0.08); font-size: 1.3cqw;
  opacity: 0; transform: scale(0.92); transition: opacity 0.4s, transform 0.6s var(--ease-out-expo); transition-delay: calc(0.2s + var(--i) * 0.15s);
}
.at-card-head { display: flex; align-items: center; gap: 0.8cqw; margin-bottom: 0.3cqw; }
.at-led { width: 0.9cqw; height: 0.9cqw; border-radius: 50%; background: var(--atelia); box-shadow: 0 0 1cqw var(--atelia); animation: blink 1.4s ease-in-out infinite; }
.at-agent { margin-left: auto; padding: 0.15cqw 0.7cqw; border-radius: 999px; background: rgba(70, 224, 255, 0.12); color: var(--atelia); font-size: 1.1cqw; font-weight: 600; }
.at-line { display: block; height: 0.8cqw; width: calc(var(--w) * 100%); border-radius: 999px; background: linear-gradient(90deg, rgba(243, 238, 227, 0.08), rgba(243, 238, 227, 0.2), rgba(243, 238, 227, 0.08)) 0 0 / 200% 100%; animation: shimmer 2s linear infinite; }
.at-progress { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 1cqw; margin-top: 0.5cqw; color: rgba(243, 238, 227, 0.7); }
.at-bar { height: 0.8cqw; border-radius: 999px; background: rgba(243, 238, 227, 0.08); overflow: hidden; }
.at-bar i { display: block; height: 100%; background: var(--atelia); transform: scaleX(0.05); transform-origin: left; transition: transform 3.5s var(--ease-out-expo); transition-delay: calc(0.8s + var(--i) * 0.3s); }
.xp-scene[data-s="1"] .at-card,
.xp-scene[data-s="2"] .at-card { opacity: 1; transform: none; }
.xp-scene[data-s="1"] .at-bar i,
.xp-scene[data-s="2"] .at-bar i { transform: scaleX(var(--p)); }

.at-badges { left: 4%; right: 4%; bottom: 6%; display: flex; flex-wrap: wrap; justify-content: center; gap: 1.2cqw; }
.at-badges span { padding: 0.8cqw 1.6cqw; border-radius: 999px; background: rgba(70, 224, 255, 0.12); border: 1px solid rgba(70, 224, 255, 0.4); font-size: 1.6cqw; font-weight: 600; }

/* ---------- 4 · Todo junto ---------- */
.nest { inset: 5% 9%; }
.nest-box { position: relative; height: 100%; display: grid; grid-template-rows: auto 1fr; gap: 1.4cqw; padding: 1.8cqw 2.2cqw 2.2cqw; border-radius: 2cqw; opacity: 0; transform: scale(0.94); transition: opacity 0.5s, transform 0.8s var(--ease-out-expo); transition-delay: calc(var(--i) * 0.7s); }
.nest-box > span { font: 700 2.6cqw/1 var(--font-display); }
.nest-box > span small { margin-left: 1cqw; font: italic 500 1.6cqw var(--font-display); opacity: 0.75; }
.n-atelia { border: 0.3cqw solid var(--atelia); background: rgba(70, 224, 255, 0.06); }
.n-atelia > span { color: var(--atelia); }
.n-harness { border: 0.3cqw solid #7fd1b8; background: rgba(31, 111, 92, 0.25); }
.n-harness > span { color: #a7e3d0; }
.n-model { background: var(--paper); color: var(--ink); }
.nest-tokens { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; align-self: center; gap: 1cqw; font: 600 3.6cqw var(--font-display); opacity: 0; transform: translateY(1cqw); transition: opacity 0.5s, transform 0.6s var(--ease-out-expo); transition-delay: 2.1s; }
.nest-tokens .tk { padding: 0.2cqw 0.8cqw; background: var(--signal-soft); color: #a8361a; }
.nest-tokens small { margin-left: 1cqw; font: italic 500 1.6cqw var(--font-display); color: var(--muted); }
.xp-scene[data-s="0"] .nest-box,
.xp-scene[data-s="0"] .nest-tokens { opacity: 1; transform: none; }

@keyframes blink { 50% { opacity: 0.2; } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shimmer { to { background-position: -200% 0; } }
@keyframes nodo {
  0%, 22% { border-color: var(--signal); background: #3a2420; transform: scale(1.06); }
  30%, 100% { border-color: rgba(243, 238, 227, 0.15); background: #1b2733; transform: none; }
}

@media (max-width: 560px) {
  .xp-dots { display: none; }
  .xp-controls { justify-content: center; }
  .xp-caption { font-size: var(--text-base); min-height: 5em; }
}