/* =====================================================================
   App-Noda — estudio de videojuegos hechos con agentes de IA
   Papel y tinta para el estudio; naranja señal para la persona.
   ===================================================================== */

@font-face {
  font-family: "Lilita One";
  src: url(../assets/fuentes/v-ce78625203/LilitaOne-Regular.ttf) format("truetype");
  font-display: swap;
  font-weight: 400;
}

:root {
  --papel: #F3F0E9;
  --papel-2: #EAE6DC;
  --papel-3: #DED8CA;
  --tinta: #16140F;
  --tinta-2: #4F4B42;
  --tinta-3: #6B665A;
  --linea: rgba(22, 20, 15, .13);
  --linea-fuerte: rgba(22, 20, 15, .28);
  --senal: #FF5A1F;
  --senal-texto: #B63A0B;
  --senal-suave: rgba(255, 90, 31, .16);
  --noche: #131210;
  --noche-2: #1C1A17;
  --noche-3: #262420;
  --noche-linea: rgba(243, 240, 233, .13);
  --papel-tenue: rgba(243, 240, 233, .68);
  --cielo-arriba: #4C94FA;
  --cielo-abajo: #D1EDFF;
  --juego-tinta: #0D0A2B;
  --juego-contorno: #5C2408;

  --f-sans: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-serif: "Instrument Serif", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --f-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --f-juego: "Lilita One", "Arial Rounded MT Bold", ui-rounded, system-ui, sans-serif;

  --ancho: 1240px;
  --margen: clamp(16px, 4.2vw, 56px);
  --radio: 22px;
  --radio-chico: 12px;
  --salida: cubic-bezier(.22, 1, .36, 1);
  --cabecera: 64px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--cabecera) + 12px); }
html:not(.quieto) { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font: 400 17px/1.55 var(--f-sans);
  font-feature-settings: "ss01", "cv11";
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 600; }
p { margin: 0; }
ul, ol, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }
em { font-style: italic; }
::selection { background: var(--senal); color: #fff; }

:focus-visible { outline: 2px solid var(--senal); outline-offset: 3px; border-radius: 6px; }

.envase { width: 100%; max-width: calc(var(--ancho) + var(--margen) * 2); margin: 0 auto; padding: 0 var(--margen); }

.saltar {
  position: fixed; left: 12px; top: 12px; z-index: 100;
  padding: 10px 16px; border-radius: 999px; background: var(--tinta); color: var(--papel);
  font: 500 14px/1 var(--f-mono); text-decoration: none;
  transform: translateY(-160%); transition: transform .2s var(--salida);
}
.saltar:focus-visible { transform: none; }

/* ---------- piezas comunes ---------- */
.antetitulo {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 28px;
  font: 500 12.5px/1.2 var(--f-mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--tinta-2);
}
.antetitulo .num { color: var(--tinta); }
.antetitulo .num::after { content: ""; display: inline-block; width: 28px; height: 1px; margin-left: 12px; vertical-align: middle; background: currentColor; opacity: .5; }
.punto { width: 8px; height: 8px; border-radius: 50%; background: var(--senal); flex: none; }
.punto--vivo { position: relative; }
.punto--vivo::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid var(--senal); opacity: 0;
  animation: latido 2.4s var(--salida) infinite;
}
@keyframes latido { 0% { transform: scale(.5); opacity: .9; } 70%, 100% { transform: scale(1.9); opacity: 0; } }

.titulo { font: 600 clamp(32px, 4.4vw, 58px)/1.04 var(--f-sans); letter-spacing: -.032em; text-wrap: balance; }
.entrada { font: 400 clamp(17px, 1.45vw, 20px)/1.5 var(--f-sans); color: var(--tinta-2); max-width: 46ch; text-wrap: pretty; }

.seccion { padding: clamp(88px, 11vw, 160px) 0; position: relative; }

.boton {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px;
  padding: 0 22px; border-radius: 999px;
  font: 600 16px/1 var(--f-sans); letter-spacing: -.005em; text-decoration: none; white-space: nowrap;
  transition: transform .25s var(--salida), background-color .2s, color .2s, box-shadow .25s var(--salida), border-color .2s;
}
.boton .flecha { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--salida); }
.boton--lleno { background: var(--tinta); color: var(--papel); box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 6px 18px -8px rgba(22,20,15,.55); }
.boton--lleno:hover { background: #000; transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 12px 26px -10px rgba(22,20,15,.6); }
.boton--lleno:hover .flecha { transform: translate(2px, -2px); }
.boton--linea { border: 1.5px solid var(--linea-fuerte); color: var(--tinta); }
.boton--linea:hover { border-color: var(--tinta); }
.boton:active { transform: translateY(0) scale(.98); }
.boton--grande { min-height: 56px; padding: 0 28px; font-size: 17px; }

/* ---------- cabecera ---------- */
.cabecera {
  position: fixed; inset: 0 0 auto; z-index: 50; height: var(--cabecera);
  transition: background-color .3s, box-shadow .3s, backdrop-filter .3s;
}
.cabecera.con-fondo {
  background: rgba(243, 240, 233, .82);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  box-shadow: 0 1px 0 var(--linea);
}
html:not(.js) .cabecera { background: rgba(243, 240, 233, .94); box-shadow: 0 1px 0 var(--linea); }
/* sobre las secciones oscuras la cabecera se vuelve de noche */
.cabecera.sobre-noche.con-fondo { background: rgba(19, 18, 16, .8); box-shadow: 0 1px 0 var(--noche-linea); }
.cabecera.sobre-noche .cabecera__logo { color: var(--papel); }
.cabecera.sobre-noche .cabecera__nav a { color: var(--papel-tenue); }
.cabecera.sobre-noche .cabecera__nav a:hover, .cabecera.sobre-noche .cabecera__nav a[aria-current="true"] { color: var(--papel); background: rgba(243, 240, 233, .07); }
.cabecera.sobre-noche .idioma { border-color: rgba(243, 240, 233, .25); color: rgba(243, 240, 233, .45); }
.cabecera.sobre-noche .idioma:hover { border-color: var(--papel); }
html:not(.en) .cabecera.sobre-noche .idioma__op[data-op="es"], html.en .cabecera.sobre-noche .idioma__op[data-op="en"] { color: var(--papel); }
.cabecera__dentro {
  height: 100%; max-width: calc(var(--ancho) + var(--margen) * 2); margin: 0 auto; padding: 0 var(--margen);
  display: flex; align-items: center; gap: 24px;
}
.cabecera__logo { display: block; color: var(--tinta); border-radius: 8px; padding: 6px 4px; margin-left: -4px; transition: color .3s; }
.cabecera__logo svg { height: 29px; width: auto; }
.cabecera__nav { display: flex; gap: 4px; margin-left: auto; }
.cabecera__nav a {
  position: relative; padding: 8px 12px; border-radius: 999px;
  font: 500 15px/1 var(--f-sans); color: var(--tinta-2); text-decoration: none;
  transition: color .2s, background-color .2s;
}
.cabecera__nav a:hover { color: var(--tinta); background: rgba(22, 20, 15, .05); }
.cabecera__nav a[aria-current="true"] { color: var(--tinta); }
.cabecera__nav a[aria-current="true"]::after {
  content: ""; position: absolute; left: 50%; bottom: 1px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--senal);
}
.idioma {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; margin-left: 8px;
  border: 1.5px solid var(--linea-fuerte); border-radius: 999px; background: transparent; cursor: pointer;
  font: 500 13px/1 var(--f-mono); letter-spacing: .04em; color: var(--tinta-3);
  transition: border-color .2s, background-color .2s, color .3s;
}
.idioma:hover { border-color: var(--tinta); }
.idioma__op { transition: color .2s; }
.idioma__barra { opacity: .45; }
html:not(.en) .idioma__op[data-op="es"], html.en .idioma__op[data-op="en"] { color: var(--tinta); }
html:not(.js) .idioma, html:not(.js) .pie__idioma { display: none; }

@media (max-width: 760px) {
  :root { --cabecera: 58px; }
  .cabecera__nav { display: none; }
  .idioma { margin-left: auto; }
  .cabecera__logo svg { height: 22px; }
}

/* ---------- arranque sin destellos ---------- */
/* en inglés, el cuerpo espera a que lleguen los textos (máximo 1.2 s, por si el JavaScript falla) */
html.traduciendo body { visibility: hidden; animation: mostrar 0s 1.2s forwards; }
/* la portada se arma oculta y JavaScript la suelta ya preparada (si no llega, aparece sola a los 2 s) */
html.js:not(.quieto) .escenario:not(.preparado) .trazos { opacity: 0; animation: mostrar-op 0s 2s forwards; }
@keyframes mostrar { to { visibility: visible; } }
@keyframes mostrar-op { to { opacity: 1; } }

/* ---------- portada ---------- */
.portada {
  position: relative;
  padding: calc(var(--cabecera) + clamp(28px, 5vh, 60px)) 0 clamp(64px, 9vh, 104px);
  min-height: min(100svh, 980px);
  display: flex; align-items: center;
  isolation: isolate;
}
.portada::before {
  /* papel cuadriculado: los nodos del fondo */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(circle at 1.5px 1.5px, rgba(22, 20, 15, .17) 1.2px, transparent 1.7px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(120% 85% at 50% 32%, #000 30%, transparent 78%);
  mask-image: radial-gradient(120% 85% at 50% 32%, #000 30%, transparent 78%);
}
.portada > .envase { position: relative; min-width: 0; }
.portada__antetitulo { margin-bottom: clamp(20px, 3.4vh, 36px); }

.escenario { position: relative; margin: 0 0 clamp(26px, 4vh, 44px); }
.logo-grande { width: 100%; height: auto; overflow: visible; }
.logo-grande .letra { stroke: var(--tinta); }
.logo-grande .guion { stroke: var(--senal); }
.logo-grande--dos { display: none; }
.escenario .cuerdas line { stroke: var(--tinta); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.escenario .nodo-agente { fill: var(--papel); stroke: var(--tinta); stroke-width: 2; vector-effect: non-scaling-stroke; }
.escenario .nodo-persona { fill: var(--senal); }
.escenario .onda { fill: none; stroke: var(--senal); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.escenario .etiqueta-agente { font: 500 15px/1 var(--f-mono); fill: var(--tinta-2); }
.escenario .etiqueta-persona { font: 500 16px/1 var(--f-mono); fill: var(--senal-texto); letter-spacing: .04em; }
.escenario.apuntando { cursor: crosshair; }

.escenario__pie {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: clamp(14px, 2.4vh, 26px); min-height: 36px;
}
.estado { display: flex; align-items: center; gap: 10px; font: 500 13px/1.3 var(--f-mono); color: var(--tinta-2); letter-spacing: .02em; }
.estado__punto { width: 8px; height: 8px; border-radius: 50%; background: var(--senal); flex: none; transition: background-color .3s; }
.escenario.trabajando .estado__punto { animation: parpadeo .9s steps(2, start) infinite; }
@keyframes parpadeo { to { visibility: hidden; } }
.repetir {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; flex: none;
  border: 1.5px solid var(--linea); border-radius: 999px; background: rgba(243, 240, 233, .7); cursor: pointer;
  font: 500 13px/1 var(--f-mono); color: var(--tinta-2);
  transition: border-color .2s, color .2s, opacity .3s;
}
.repetir:hover { border-color: var(--tinta); color: var(--tinta); }
.repetir svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.repetir[hidden] { display: none; }

.portada__texto { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 72px); align-items: end; }
.titular { font: 600 clamp(36px, 4.6vw, 66px)/1.02 var(--f-sans); letter-spacing: -.036em; text-wrap: balance; }
.titular em, .declaracion em { font: italic 400 1.08em/1 var(--f-serif); letter-spacing: -.01em; color: var(--senal-texto); padding-right: .04em; }
.titular .maquina { font: 500 .84em/1 var(--f-mono); letter-spacing: -.045em; background: var(--tinta); color: var(--papel); padding: .04em .2em .1em; border-radius: .18em; box-decoration-break: clone; -webkit-box-decoration-break: clone; white-space: nowrap; }
.portada__parrafo { font-size: clamp(16px, 1.25vw, 18px); line-height: 1.55; color: var(--tinta-2); max-width: 44ch; text-wrap: pretty; }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

@media (max-width: 960px) {
  .portada__texto { grid-template-columns: 1fr; gap: 22px; }
  .titular { font-size: clamp(34px, 6.2vw, 56px); }
  .portada__parrafo { max-width: 56ch; }
}
@media (max-width: 640px) {
  .portada { padding-top: calc(var(--cabecera) + 22px); padding-bottom: 56px; min-height: 0; }
  .portada__antetitulo { font-size: 11.5px; letter-spacing: .06em; margin-bottom: 18px; }
  .logo-grande--una { display: none; }
  .logo-grande--dos { display: block; width: min(84%, 400px); }
  .escenario { margin-bottom: 22px; }
  .escenario__pie { margin-top: 6px; }
  .repetir { width: 36px; padding: 0; justify-content: center; }
  .repetir span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .portada__texto { grid-template-columns: 1fr; gap: 16px; }
  .titular { font-size: clamp(31px, 8.6vw, 40px); }
  .portada__parrafo { font-size: 16px; line-height: 1.5; }
  .acciones { margin-top: 20px; }
  .acciones .boton { flex: 1 1 auto; justify-content: center; }
}
@media (max-width: 380px) {
  .estado { font-size: 12px; }
}
/* celulares bajos (360x780 y parecidos): que los dos botones quepan en la primera pantalla */
@media (max-width: 640px) and (max-height: 820px) {
  .portada { padding-top: calc(var(--cabecera) + 14px); }
  .portada__antetitulo { margin-bottom: 12px; }
  .logo-grande--dos { width: min(74%, 360px); }
  .escenario { margin-bottom: 16px; }
  .acciones { margin-top: 16px; }
}

/* ---------- manifiesto ---------- */
.manifiesto { border-top: 1px solid var(--linea); }
.declaracion {
  font: 500 clamp(30px, 4.2vw, 60px)/1.1 var(--f-sans); letter-spacing: -.03em; max-width: 21ch; text-wrap: balance;
}
.declaracion em { font-size: 1.1em; }
.principios {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px);
  margin-top: clamp(56px, 7vw, 96px); counter-reset: principio;
}
.principio { border-top: 1.5px solid var(--tinta); padding-top: 22px; position: relative; }
.principio h3 { font: 600 22px/1.2 var(--f-sans); letter-spacing: -.02em; margin: 18px 0 10px; }
.principio p { color: var(--tinta-2); max-width: 34ch; text-wrap: pretty; }
.principio__nodo { display: block; position: relative; height: 18px; }
.principio__nodo--persona::before { content: ""; position: absolute; left: 0; top: 0; width: 18px; height: 18px; border-radius: 50%; background: var(--senal); }
.principio__nodo--agentes i { position: absolute; top: 3px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--tinta); background: var(--papel); }
.principio__nodo--agentes i:nth-child(1) { left: 0; }
.principio__nodo--agentes i:nth-child(2) { left: 20px; }
.principio__nodo--agentes i:nth-child(3) { left: 40px; }
.principio__nodo--agentes::before { content: ""; position: absolute; left: 6px; right: auto; width: 40px; top: 8px; height: 2px; background: var(--tinta); }
.principio__nodo--abierto::before { content: ""; position: absolute; left: 0; top: 0; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--tinta); }
.principio__nodo--abierto::after { content: ""; position: absolute; left: 6px; top: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--tinta); }

/* ---------- cómo trabajamos (noche) ---------- */
.proceso { background: var(--noche); color: var(--papel); }
.proceso .antetitulo { color: var(--papel-tenue); }
.proceso .antetitulo .num { color: var(--papel); }
.proceso .entrada { color: var(--papel-tenue); }
.proceso__cabeza { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px 64px; align-items: end; }

.roles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: clamp(48px, 6vw, 80px); }
.rol {
  background: var(--noche-2); border: 1px solid var(--noche-linea); border-radius: var(--radio);
  padding: 26px 24px 28px; display: flex; flex-direction: column;
  transition: transform .35s var(--salida), border-color .3s;
}
.rol:hover { transform: translateY(-3px); border-color: rgba(243, 240, 233, .28); }
.rol--persona { background: linear-gradient(160deg, rgba(255, 90, 31, .16), rgba(255, 90, 31, .03) 60%), var(--noche-2); border-color: rgba(255, 90, 31, .35); }
.rol__icono { width: 48px; height: 48px; margin-bottom: 26px; }
.rol__icono .relleno { fill: var(--papel); }
.rol__icono .relleno-senal { fill: var(--senal); }
.rol__icono .anillo { fill: none; stroke: var(--senal); stroke-width: 1.5; stroke-dasharray: 3 4; }
.rol__icono .arista { fill: none; stroke: rgba(243, 240, 233, .55); stroke-width: 1.5; stroke-linejoin: round; }
.rol__quien { font: 500 12px/1.2 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--papel-tenue); }
.rol__que { font: 600 24px/1.15 var(--f-sans); letter-spacing: -.02em; margin: 8px 0 10px; }
.rol__desc { color: var(--papel-tenue); font-size: 15.5px; line-height: 1.5; }

.ronda { margin-top: clamp(64px, 8vw, 112px); }
.ronda__titulo { font: 500 12.5px/1.2 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--papel-tenue); margin-bottom: 34px; }
.ronda__pasos { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 18px; position: relative; }
.ronda__pasos::before {
  /* la vía que une los pasos */
  content: ""; position: absolute; left: 9px; right: 9px; top: 9px; height: 1.5px; background: rgba(243, 240, 233, .2);
}
.ronda__pasos::after {
  /* el pulso que recorre la ronda */
  content: ""; position: absolute; left: 9px; top: 6px; width: 70px; height: 8px; border-radius: 8px;
  background: linear-gradient(90deg, transparent, var(--senal));
  opacity: 0; transform: translateX(0);
}
.ronda.en-vista .ronda__pasos::after { animation: recorrido 5.5s cubic-bezier(.55, 0, .35, 1) .4s infinite; }
@keyframes recorrido {
  0% { opacity: 0; transform: translateX(0); }
  8% { opacity: 1; }
  72% { opacity: 1; transform: translateX(var(--recorrido, 900px)); }
  80%, 100% { opacity: 0; transform: translateX(var(--recorrido, 900px)); }
}
.paso { position: relative; display: flex; flex-direction: column; gap: 6px; padding-top: 38px; }
.paso__nodo { position: absolute; left: 0; top: 0; width: 19px; height: 19px; border-radius: 50%; background: var(--noche); border: 2px solid var(--papel); z-index: 1; }
.paso--persona .paso__nodo { background: var(--senal); border-color: var(--senal); }
.paso__nodo--varios { border: 0; background: none; width: 46px; }
.paso__nodo--varios i { position: absolute; top: 0; width: 19px; height: 19px; border-radius: 50%; background: var(--noche); border: 2px solid var(--papel); }
.paso__nodo--varios i:nth-child(1) { left: 0; }
.paso__nodo--varios i:nth-child(2) { left: 12px; }
.paso__nodo--varios i:nth-child(3) { left: 24px; }
.paso__num { font: 500 12px/1 var(--f-mono); color: var(--papel-tenue); }
.paso strong { font: 600 19px/1.2 var(--f-sans); letter-spacing: -.015em; }
.paso span:last-child { color: var(--papel-tenue); font-size: 15px; line-height: 1.5; text-wrap: pretty; }

.cifras { margin-top: clamp(80px, 10vw, 136px); }
.cifras__titulo { font: 500 12.5px/1.2 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--papel-tenue); margin-bottom: 26px; }
.cifras__rejilla { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--noche-linea); border-left: 1px solid var(--noche-linea); }
.cifra { padding: 28px 24px 30px; border-right: 1px solid var(--noche-linea); border-bottom: 1px solid var(--noche-linea); min-width: 0; }
.cifra dt { display: flex; flex-direction: column; gap: 8px; }
.cifra__n { font: 600 clamp(44px, 5vw, 76px)/.95 var(--f-sans); letter-spacing: -.045em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cifra__u { font: 500 13px/1.25 var(--f-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--papel); }
.cifra dd { margin-top: 10px; color: var(--papel-tenue); font-size: 14.5px; line-height: 1.45; text-wrap: pretty; }
.cifra:nth-child(5) .cifra__n { color: var(--senal); }
.cifras__nota { margin-top: 18px; font: 400 13px/1.4 var(--f-mono); color: var(--papel-tenue); }

/* ---------- juegos ---------- */
.juegos .titulo { margin-bottom: clamp(36px, 5vw, 64px); }
.juego {
  display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr);
  border-radius: 30px; overflow: hidden; position: relative;
  background: linear-gradient(180deg, var(--cielo-arriba) 0%, #8CC3FF 48%, var(--cielo-abajo) 100%);
  box-shadow: 0 30px 80px -40px rgba(30, 60, 140, .55);
}
.juego__escena { position: relative; min-height: 520px; overflow: hidden; touch-action: pan-y; }
.juego__nubes i {
  position: absolute; width: 150px; height: 40px; border-radius: 999px; background: #fff; opacity: .9;
  animation: deriva 40s linear infinite alternate;
}
.juego__nubes i::before, .juego__nubes i::after { content: ""; position: absolute; border-radius: 50%; background: inherit; }
.juego__nubes i::before { width: 62px; height: 62px; left: 22px; top: -30px; }
.juego__nubes i::after { width: 46px; height: 46px; left: 70px; top: -20px; }
.juego__nubes i:nth-child(1) { left: 7%; top: 16%; transform: scale(.9); }
.juego__nubes i:nth-child(2) { right: 4%; top: 70%; animation-duration: 52s; transform: scale(1.25); opacity: .75; }
.juego__nubes i:nth-child(3) { left: 58%; top: 9%; animation-duration: 46s; transform: scale(.6); opacity: .7; }
@keyframes deriva { to { translate: 40px 0; } }
.juego__poster, .juego__lienzo { position: absolute; inset: 0; width: 100%; height: 100%; }
.juego__poster { object-fit: contain; transition: opacity .6s; }
.juego__lienzo { opacity: 0; transition: opacity .6s; cursor: grab; }
.juego__lienzo:active { cursor: grabbing; }
.juego.vivo .juego__lienzo { opacity: 1; }
.juego.vivo .juego__poster { opacity: 0; }
.juego__pista {
  position: absolute; left: 20px; bottom: 18px; padding: 7px 12px; border-radius: 999px;
  background: rgba(13, 10, 43, .42); color: #fff; font: 500 12px/1 var(--f-mono); letter-spacing: .03em;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .5s;
}
.juego.vivo .juego__pista { opacity: 1; }
.juego.vivo.girado .juego__pista { opacity: 0; }

.juego__info {
  position: relative; margin: 16px 16px 16px 0; padding: clamp(28px, 3.4vw, 48px);
  background: var(--papel); border-radius: 22px; display: flex; flex-direction: column; align-items: flex-start;
}
.juego__num { display: flex; align-items: center; gap: 10px; font: 500 12.5px/1.2 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-2); }
.juego__nombre {
  margin-top: 22px;
  font: 400 clamp(54px, 6vw, 84px)/.9 var(--f-juego); letter-spacing: .01em; text-transform: uppercase;
  color: #FFC21F;
  background: linear-gradient(180deg, #FFED66 10%, #FF990D 90%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  -webkit-text-stroke: .09em var(--juego-contorno); paint-order: stroke fill;
  filter: drop-shadow(0 .06em 0 var(--juego-contorno));
}
.juego__provisional { margin-top: 10px; font: 400 13px/1.2 var(--f-mono); color: var(--tinta-3); }
.juego__desc { margin-top: 22px; font: 500 clamp(19px, 1.7vw, 23px)/1.35 var(--f-sans); letter-spacing: -.015em; text-wrap: pretty; max-width: 26ch; }
.juego__datos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.juego__datos li { padding: 7px 12px; border-radius: 999px; background: var(--papel-2); font: 400 13.5px/1.2 var(--f-sans); color: var(--tinta-2); }
.juego__datos b { font: 600 13.5px/1 var(--f-mono); color: var(--tinta); }
.juego__plataformas { margin: 22px 0 28px; font-size: 14.5px; color: var(--tinta-2); }
.juego__info .boton { margin-top: auto; }
.juego__url { margin-top: 12px; font: 400 13px/1 var(--f-mono); color: var(--tinta-3); }

.siguiente {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 18px;
  margin-top: 16px; padding: 24px 28px; border-radius: 22px; border: 1.5px dashed var(--linea-fuerte);
}
.siguiente__nodo { grid-row: span 2; width: 22px; height: 22px; border-radius: 50%; border: 2px dashed var(--tinta-3); }
.siguiente__num { font: 500 12.5px/1.2 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-2); }
.siguiente__texto { font: 500 18px/1.3 var(--f-sans); color: var(--tinta-2); }

@media (max-width: 960px) {
  .juego { grid-template-columns: 1fr; }
  .juego__escena { min-height: 0; aspect-ratio: 1 / .86; }
  .juego__info { margin: 0 10px 10px; }
}

/* ---------- bitácora ---------- */
.bitacora { background: var(--papel-2); border-top: 1px solid var(--linea); }
.bitacora__cabeza { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px 64px; align-items: end; margin-bottom: clamp(40px, 5vw, 64px); }

.comparar { margin: 0; }
.comparar__marco {
  position: relative; overflow: hidden; border-radius: 18px; background: var(--papel-3);
  aspect-ratio: 16 / 9; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: ew-resize;
  box-shadow: 0 0 0 1px var(--linea), 0 24px 60px -36px rgba(22, 20, 15, .55);
  --pos: 50%;
}
.comparar--grande .comparar__marco { border-radius: 24px; }
.comparar__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.comparar__antes { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.comparar__linea { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 0 1px rgba(22, 20, 15, .15); pointer-events: none; }
.comparar__asa {
  position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%;
  background: #fff; color: var(--tinta); display: grid; place-items: center;
  box-shadow: 0 6px 18px -4px rgba(22, 20, 15, .45);
  transition: transform .25s var(--salida);
}
.comparar__asa svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.comparar.arrastrando .comparar__asa { transform: scale(1.1); }
.comparar__control { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; }
.comparar__control:focus-visible ~ .comparar__linea .comparar__asa { outline: 3px solid var(--senal); outline-offset: 3px; }
.comparar__etiqueta {
  position: absolute; top: 14px; padding: 7px 11px; border-radius: 999px; pointer-events: none;
  font: 500 12px/1 var(--f-mono); letter-spacing: .03em; color: #fff; background: rgba(22, 20, 15, .62);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: opacity .25s;
}
.comparar__etiqueta--antes { left: 14px; }
.comparar__etiqueta--despues { right: 14px; background: rgba(194, 65, 12, .92); }
.comparar figcaption, .foto figcaption { margin-top: 12px; font: 400 13.5px/1.45 var(--f-mono); color: var(--tinta-2); }
html:not(.js) .comparar__marco { cursor: default; }

.linea-tiempo { margin-top: clamp(72px, 9vw, 120px); position: relative; }
.linea-tiempo::before {
  content: ""; position: absolute; left: calc(180px + 10px); top: 10px; bottom: 0; width: 1.5px;
  background: linear-gradient(var(--linea-fuerte), var(--linea-fuerte) 92%, transparent);
}
.dia { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 0 56px; padding-bottom: clamp(64px, 8vw, 104px); position: relative; }
.dia__fecha { position: sticky; top: calc(var(--cabecera) + 28px); align-self: start; display: flex; flex-direction: column; gap: 6px; padding-top: 2px; }
.dia__fecha time { font: 500 13px/1.2 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-2); }
.dia__num { font: 600 34px/1 var(--f-sans); letter-spacing: -.03em; }
.dia__nodo {
  position: absolute; left: calc(180px + 2px); top: 4px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--papel-2); border: 2px solid var(--tinta); z-index: 1;
}
.dia--hoy .dia__nodo { background: var(--senal); border-color: var(--senal); box-shadow: 0 0 0 6px var(--senal-suave); }
.dia__cuerpo { min-width: 0; max-width: 780px; }
.dia__titulo { font: 600 clamp(26px, 2.8vw, 38px)/1.08 var(--f-sans); letter-spacing: -.028em; text-wrap: balance; }
.dia__cuerpo > p { margin-top: 16px; color: var(--tinta-2); font-size: 17px; line-height: 1.6; max-width: 62ch; text-wrap: pretty; }
.fichas { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 28px; }
.fichas li { padding: 6px 11px; border-radius: 999px; border: 1px solid var(--linea-fuerte); font: 500 12.5px/1.2 var(--f-mono); color: var(--tinta-2); }
.fichas .ficha--viva { border-color: var(--senal); color: var(--senal-texto); display: inline-flex; align-items: center; gap: 7px; }
.fichas .ficha--viva::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--senal); animation: latido-punto 1.6s ease-in-out infinite; }
@keyframes latido-punto { 50% { opacity: .25; } }
.foto { margin: 0; }
.foto img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 16px; background: var(--papel-3); box-shadow: 0 0 0 1px var(--linea), 0 20px 50px -34px rgba(22, 20, 15, .55); }
.dia__cuerpo > .comparar + .foto, .dia__cuerpo > .comparar + .fotos { margin-top: 22px; }
.fotos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.continuara { display: flex; align-items: center; gap: 12px; margin-left: calc(180px + 56px); font: 500 13.5px/1.3 var(--f-mono); color: var(--tinta-2); }

@media (max-width: 860px) {
  .proceso__cabeza, .bitacora__cabeza { grid-template-columns: 1fr; }
  .roles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ronda__pasos { grid-template-columns: 1fr; gap: 26px; padding-left: 40px; }
  .ronda__pasos::before { left: 9px; right: auto; top: 9px; bottom: 9px; width: 1.5px; height: auto; }
  .ronda__pasos::after { display: none; }
  .paso { padding-top: 0; }
  .paso__nodo { left: -40px; top: 0; }
  .paso__nodo--varios { left: -40px; width: 19px; }
  .paso__nodo--varios i:nth-child(2), .paso__nodo--varios i:nth-child(3) { display: none; }
  .cifras__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .principios { grid-template-columns: 1fr; gap: 40px; }
  .linea-tiempo::before { left: 8px; }
  .dia { grid-template-columns: 1fr; padding-left: 40px; gap: 14px; }
  .dia__fecha { position: static; flex-direction: row; align-items: baseline; gap: 12px; }
  .dia__num { font-size: 15px; font-family: var(--f-mono); font-weight: 500; letter-spacing: .02em; color: var(--tinta-2); order: -1; }
  .dia__num::after { content: " ·"; }
  .dia__nodo { left: 0; top: 1px; }
  .continuara { margin-left: 40px; }
}
@media (max-width: 560px) {
  .roles { grid-template-columns: 1fr; }
  .rol { padding: 22px 20px 24px; }
  .rol__icono { margin-bottom: 18px; width: 40px; height: 40px; }
  .cifra { padding: 22px 16px 24px; }
  .cifra__n { font-size: 40px; }
  .cifra:nth-child(5) .cifra__n { font-size: 34px; }
  .fotos { grid-template-columns: 1fr; }
  .comparar__etiqueta { top: 10px; font-size: 11px; padding: 6px 9px; }
  .comparar__etiqueta--antes { left: 10px; }
  .comparar__etiqueta--despues { right: 10px; }
  .comparar__asa { width: 40px; height: 40px; margin: -20px 0 0 -20px; }
  .juego { border-radius: 24px; }
  .juego__info { border-radius: 18px; }
  .siguiente { padding: 20px; }
}

/* ---------- pie ---------- */
.pie { background: var(--noche); color: var(--papel); padding: clamp(72px, 9vw, 120px) 0 28px; overflow: hidden; }
.pie__arriba { display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; flex-wrap: wrap; }
.pie__lema { font: 500 clamp(24px, 2.6vw, 34px)/1.15 var(--f-sans); letter-spacing: -.025em; }
.pie__nav { display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: center; }
.pie__nav a, .pie__idioma {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 0;
  font: 500 15px/1.2 var(--f-sans); color: var(--papel-tenue); text-decoration: none; background: none; border: 0; cursor: pointer;
  transition: color .2s;
}
.pie__nav a:hover, .pie__idioma:hover { color: var(--papel); }
.pie__nav .flecha { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.pie__idioma { font-family: var(--f-mono); font-size: 13.5px; border: 1.5px solid var(--noche-linea); border-radius: 999px; padding: 7px 13px; }
.pie__logo { width: 100%; height: auto; margin: clamp(56px, 8vw, 104px) 0 clamp(28px, 4vw, 40px); color: var(--papel); }
.pie__abajo { display: flex; justify-content: space-between; gap: 8px 32px; flex-wrap: wrap; padding-top: 22px; border-top: 1px solid var(--noche-linea); font: 400 12.5px/1.5 var(--f-mono); color: var(--papel-tenue); }

/* ---------- aparecer al bajar ---------- */
html.js:not(.quieto) [data-aparece] { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--salida), transform .9s var(--salida); }
html.js:not(.quieto) [data-aparece].visto { opacity: 1; transform: none; }
html.js:not(.quieto) .roles [data-aparece]:nth-child(2), html.js:not(.quieto) .principios [data-aparece]:nth-child(2) { transition-delay: .08s; }
html.js:not(.quieto) .roles [data-aparece]:nth-child(3), html.js:not(.quieto) .principios [data-aparece]:nth-child(3) { transition-delay: .16s; }
html.js:not(.quieto) .roles [data-aparece]:nth-child(4) { transition-delay: .24s; }
html.js:not(.quieto) .cifras__rejilla [data-aparece]:nth-child(4n+2) { transition-delay: .06s; }
html.js:not(.quieto) .cifras__rejilla [data-aparece]:nth-child(4n+3) { transition-delay: .12s; }
html.js:not(.quieto) .cifras__rejilla [data-aparece]:nth-child(4n+4) { transition-delay: .18s; }

/* ---------- movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}
html.quieto .punto--vivo::after, html.quieto .juego__nubes i, html.quieto .ronda__pasos::after, html.quieto .ficha--viva::before, html.quieto .estado__punto { animation: none !important; }

/* ---------- impresión ---------- */
@media print {
  .cabecera, .repetir, .comparar__linea, .comparar__etiqueta, .juego__lienzo, .juego__pista { display: none !important; }
  .proceso, .pie { background: #fff; color: #000; }
  [data-aparece] { opacity: 1 !important; transform: none !important; }
}