/* KOOL — pensada primero para el celular (390 × 844); el escritorio es una adaptación.
   Tokens: negro de escenario, blanco cálido, un dorado de neón (el de KOOL 2023) reservado para la acción y KOOL.IA. */
:root {
  --fondo: #050407;
  --texto: #f6f1e7;
  --texto-2: #c9c0b3;
  --acento: #ffc874;
  --acento-tinta: #1a1208;
  --borde: clamp(16px, 4vw, 40px);
  --serif: 'Gloock', 'Times New Roman', serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --display: 'Unbounded', 'Arial Black', sans-serif; /* el texto de KOOL.IA (26/10, tercera tanda: "más moderno y tecnológico") */
}

* { box-sizing: border-box; margin: 0; }
html { background: var(--fondo); color: var(--texto); scroll-snap-type: y mandatory; overscroll-behavior: none; }
/* Con JS, un gesto = un capítulo (escena.js): la página no scrollea */
html.js { overflow: hidden; scroll-snap-type: none; }
body { font: 400 16px/1.5 var(--mono); -webkit-font-smoothing: antialiased; }
img { display: block; }

/* ——— El recorrido: un tramo por capítulo, con imán. Sin JS es la página que se lee. ——— */
.tramo {
  min-height: 100svh; scroll-snap-align: start; scroll-snap-stop: always;
  display: grid; place-content: center; justify-items: center; gap: 16px; padding: var(--borde); text-align: center;
}
.tramo h1, .tramo h2 { font: 400 clamp(36px, 9vw, 96px)/1 var(--serif); }
.tramo h2 img { width: min(70vw, 520px); height: auto; }
.js .tramo > * { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.js .tramo .boton { display: none; }

/* ——— El escenario fijo ——— */
.escena { display: none; }
.js .escena {
  display: block; position: fixed; inset: 0; overflow: hidden; z-index: 1;
  background: radial-gradient(80% 60% at 50% 40%, #1c1410 0%, var(--fondo) 72%);
  touch-action: none; /* deslizar vertical = pasar de capítulo (escena.js); horizontal y toques = jugar */
  user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
.js .recorrido { position: relative; z-index: 2; pointer-events: none; }

.fondo { position: absolute; inset: 0; z-index: 0; isolation: isolate; }
.fondo-imagen {
  position: absolute; inset: -6%; background: center / cover no-repeat; opacity: 0;
  filter: blur(14px) saturate(1.2) brightness(.55); /* imagen quieta: el desenfoque se calcula una vez */
}
.telefono { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.telefono-pantalla { position: absolute; inset: 0; overflow: hidden; }
.telefono-isla, .telefono-reflejo, .telefono-escarcha { display: none; }
.fondo-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
/* (29/10) la escenografía de la noche: nítida, apenas oscurecida para que el año y el logo se lean encima */
.escenografia { position: absolute; inset: -2%; background: center / cover no-repeat; opacity: 0; filter: brightness(.88) saturate(1.05); }
/* (29/10, Mauro: "en el 2023, que se vea un poquito más difuminado el background") la misma foto ya desenfocada (img/*-suave.webp),
   encima: entra cuando la escenografía baja a fondo (escena.js y movil.js, `desenfocar` en config.js) */
.escenografia-suave { position: absolute; inset: 0; background: center / cover no-repeat; opacity: 0; }
.tono {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to top, rgb(5 4 7 / .94) 0%, rgb(5 4 7 / .4) 34%, rgb(5 4 7 / .1) 58%, rgb(5 4 7 / .55) 100%),
    radial-gradient(130% 90% at 50% 45%, transparent 55%, rgb(5 4 7 / .7) 100%);
}
.ambiente { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; }
.grano {
  position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: .12;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.flash { position: absolute; inset: 0; z-index: 9; background: #fff8ee; opacity: 0; pointer-events: none; }

/* ——— El año ——— */
.anio { position: absolute; left: 0; right: 0; top: 36svh; z-index: 5; /* en contorno, por encima de fotos y piezas */ display: grid; place-items: center; pointer-events: none; translate: 0 -50%; perspective: 900px; }
/* (28/10) en la compu el año sube lo justo para no pisar el logo de la edición (escena.js, despegarAnio) */
.anio { translate: 0 calc(-50% - var(--anio-sube, 0px)); transition: translate .7s cubic-bezier(.65, 0, .35, 1); }
.anio-mano { transform-style: preserve-3d; }
/* El año destaca (24/10): contorno más grueso y brillante con el color de la edición (--tinte), relleno apenas teñido y un halo */
.anio-num {
  display: block;
  font: 400 clamp(130px, 36vw, 520px)/.8 var(--serif); letter-spacing: -.04em;
  color: color-mix(in srgb, var(--tinte, #ffd28a) 9%, transparent);
  -webkit-text-stroke: 2px color-mix(in srgb, var(--tinte, #ffd28a) 55%, #fff);
  filter: drop-shadow(0 0 18px color-mix(in srgb, var(--tinte, #ffd28a) 45%, transparent)) drop-shadow(0 0 2px rgb(255 255 255 / .5));
  opacity: 0;
}
/* ——— El logo ——— */
.ficha {
  position: absolute; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom) + 9svh); z-index: 6;
  display: grid; justify-items: center; gap: 12px; padding-inline: var(--borde); perspective: 700px;
  pointer-events: none;
}
.logo-caja { position: relative; width: calc(min(74vw, 440px) * var(--crece, 1)); pointer-events: auto; transform-style: preserve-3d; }
.logo { width: 100%; height: auto; max-height: 24svh; object-fit: contain; filter: drop-shadow(0 4px 26px rgb(0 0 0 / .8)); opacity: 0; }
/* la silueta blanca del logo para el parpadeo (escena.js) */
.logo-blanco {
  position: absolute; inset: 0; opacity: 0; pointer-events: none; background: #fff;
  -webkit-mask: var(--logo-url) center / contain no-repeat; mask: var(--logo-url) center / contain no-repeat;
  filter: drop-shadow(0 0 18px rgb(255 255 255 / .9));
}
/* ICE: el logo se congela (capa de hielo con la forma del logo). */
.logo-hielo {
  position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background: linear-gradient(115deg, #e9f8ff 0%, #9fd8ff 30%, #ffffff 46%, #7cc4f2 62%, #e6f7ff 100%);
  background-size: 220% 100%;
  -webkit-mask: var(--logo-url) center / contain no-repeat; mask: var(--logo-url) center / contain no-repeat;
}
/* la fecha (solo la fecha, sin el lugar: Mauro 24/10) */
/* (27/10) sin texto (la portada ya no lleva «By Paradise Music Group") no ocupa lugar.
   (29/10, Mauro: "cuando pasás la mano por KOOL MEMORIES, el título en partículas tiene más tamaño que el logo") En las ediciones la
   fecha y el lema guardan su lugar aunque todavía no tengan texto (dos renglones el lema): las partículas se arman sobre el logo
   medido antes de que cambie el texto, y si la fecha o el lema cambiaban de alto, el logo se corría y las partículas quedaban
   más abajo y más grandes que él */
.escena[data-capitulo="intro"] .ficha-dato:empty { display: none; }
.ficha-dato { min-height: 1em; }
.ficha-dato {
  font: 500 clamp(15px, 1.5vw, 22px)/1 var(--mono); letter-spacing: .32em; margin-right: -.32em; text-transform: uppercase;
  color: color-mix(in srgb, var(--tinte, #ffd28a) 70%, #fff); text-shadow: 0 0 16px color-mix(in srgb, var(--tinte, #ffd28a) 50%, transparent), 0 1px 12px rgb(0 0 0 / .9);
  opacity: 0;
}
/* (27/10) la portada: la frase del cierre, entera y pareja (es un mensaje, no se destaca una parte); solo en la portada */
.ficha-frase {
  margin: 6px 0 0; max-width: 34em; text-align: center; text-wrap: balance;
  font: 300 clamp(13px, 1.2vw, 19px)/1.5 var(--display); letter-spacing: .2em; margin-right: -.2em; text-transform: uppercase;
  color: #fff4e2; text-shadow: 0 0 18px rgb(255 210 138 / .35), 0 1px 12px rgb(0 0 0 / .9);
  opacity: 0;
}
.escena:not([data-capitulo="intro"]) .ficha-frase { visibility: hidden; }
/* (29/10) el lema de la edición: más chico que la fecha, en minúsculas, como una línea de un relato */
.escena[data-capitulo="intro"] .ficha-lema:empty { display: none; }
.ficha-lema { min-height: 2.9em; }
.ficha-lema {
  margin: 2px 0 0; max-width: 30em; text-align: center; text-wrap: balance;
  /* (29/10, vigésima vuelta, Mauro: "que los subtítulos sean un poco más visibles y destacables; en el celular es un texto
     chiquitito") más grande, más pesado y blanco entero, con más sombra detrás */
  font: 500 clamp(15px, 1.3vw, 21px)/1.4 var(--display); letter-spacing: .04em; margin-right: -.04em;
  color: #fff; text-shadow: 0 0 18px color-mix(in srgb, var(--tinte, #ffd28a) 45%, transparent), 0 2px 14px rgb(0 0 0 / .95), 0 0 3px rgb(0 0 0 / .9);
  opacity: 0;
}
.muro { position: absolute; inset: -4%; width: 108%; height: 108%; opacity: 0; }
/* ICE: el vidrio congelado (hielo.js) tapa el fondo de la edición; el año, el logo y (en la compu, desde el 26/10) el celular
   quedan delante */
.vidrio { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; pointer-events: none; }
.selva { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; } /* detrás del celular: el video se ve entero */
/* SAFARI en la compu (26/10): por delante del celular, las hojas que lo rodean */
.selva-frente { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; pointer-events: none; visibility: hidden; }
.particulas { position: absolute; inset: 0; z-index: 7; width: 100%; height: 100%; pointer-events: none; }

/* ——— Piezas de cada edición ——— */
.pieza { position: absolute; inset: 0; z-index: 4; opacity: 0; visibility: hidden; pointer-events: none; }
.pieza.activa { visibility: visible; pointer-events: auto; }

/* 2023: fotos de la noche colgando de hilos; el pivote del péndulo es el techo (transform-origin arriba del hilo). */
.colgada {
  --x: 50vw; --hilo: 8svh; --ancho: 24vw;
  position: absolute; left: var(--x); top: var(--hilo); width: var(--ancho); margin: 0 0 0 calc(var(--ancho) / -2);
  padding: 1.6vw 1.6vw 6vw; background: #f3eadb; border-radius: 2px; transform-origin: 50% calc(-1 * var(--hilo));
  box-shadow: 0 18px 40px rgb(0 0 0 / .6), 0 0 0 1px rgb(255 210 138 / .2); cursor: grab; touch-action: pan-y; will-change: rotate;
}
.colgada img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; filter: contrast(1.05) saturate(1.1); pointer-events: none; }
.hilo { position: absolute; left: 50%; bottom: 100%; width: 1px; height: calc(var(--hilo) + 2px); background: linear-gradient(rgb(255 236 210 / .15), rgb(255 236 210 / .55)); }
.broche {
  position: absolute; left: calc(50% - 7px); top: -10px; width: 14px; height: 26px; border-radius: 2px;
  background: linear-gradient(90deg, #a77b4f, #d9b083 50%, #a77b4f); box-shadow: 0 3px 6px rgb(0 0 0 / .4);
}
.pieza--colgadas > .colgada:nth-child(1) { --x: 28vw; --hilo: 4svh; }
.pieza--colgadas > .colgada:nth-child(2) { --x: 72vw; --hilo: 3svh; }
/* (26/10) la foto de abajo cuelga del borde de abajo de la de arriba: el pivote de su péndulo es ese borde, y la de arriba la
   lleva cuando se mece (el giro se suma, como en una guirnalda de verdad) */
.colgada--abajo { --hilo: 3.2svh; left: 50%; top: calc(100% + var(--hilo)); margin-left: calc(var(--ancho) / -2); }

/* MEMORIES 2024: tocadiscos. Gabinete de madera oscura, plato de aluminio con puntos de estroboscopio, vinilo con surcos y
   la franja lisa entre temas, el reflejo quieto (la luz no gira con el disco), eje, brazo con contrapeso y cabezal. */
.pieza--vinilo { display: grid; place-items: center; }
.tocadiscos {
  position: relative; width: 86vw; aspect-ratio: 1.22; margin-top: -18svh; touch-action: pan-y; cursor: grab; border-radius: 14px;
  background:
    linear-gradient(180deg, rgb(255 255 255 / .1), transparent 8%),
    repeating-linear-gradient(92deg, rgb(0 0 0 / .12) 0 2px, transparent 2px 7px),
    linear-gradient(135deg, #3b2717, #24160c 60%, #1a0f07);
  box-shadow: 0 30px 70px rgb(0 0 0 / .75), inset 0 0 0 1px rgb(255 255 255 / .07), inset 0 -6px 14px rgb(0 0 0 / .5);
}
.plato {
  position: absolute; left: 3.5%; top: 4%; height: 92%; aspect-ratio: 1; border-radius: 50%;
  background:
    repeating-conic-gradient(#d9d9d9 0 2deg, #6d6d6d 2deg 4deg) ,
    #9a9a9a;
  -webkit-mask: radial-gradient(circle, transparent 0 66%, #000 66.5%); mask: radial-gradient(circle, transparent 0 66%, #000 66.5%);
  box-shadow: 0 8px 20px rgb(0 0 0 / .6);
}
.vinilo {
  position: absolute; left: 5.5%; top: 7.3%; height: 85.4%; aspect-ratio: 1; border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 34%, #070707 34.4% 36%, transparent 36.4%),
    radial-gradient(circle, transparent 0 58%, rgb(255 255 255 / .05) 58.3%, #050505 58.8% 59.6%, transparent 60%),
    radial-gradient(circle, transparent 0 78%, #050505 78.3% 79%, transparent 79.3%),
    repeating-radial-gradient(circle, #0c0c0c 0 .9px, #171717 1.1px 1.6px, #101010 1.8px 2.4px),
    #0b0b0b;
  box-shadow: 0 0 0 2px #050505, 0 10px 24px rgb(0 0 0 / .7);
}
.vinilo-etiqueta { position: absolute; inset: 32%; width: 36%; height: 36%; border-radius: 50%; box-shadow: 0 0 0 1px rgb(0 0 0 / .4); }
.vinilo-eje {
  position: absolute; left: calc(50% - 1.4%); top: calc(50% - 1.4%); width: 2.8%; height: 2.8%; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff, #9a9a9a 60%, #4a4a4a);
}
.vinilo-brillo {
  position: absolute; left: 5.5%; top: 7.3%; height: 85.4%; aspect-ratio: 1; border-radius: 50%; pointer-events: none; mix-blend-mode: screen;
  background:
    conic-gradient(from 20deg, transparent 0 6%, rgb(255 255 255 / .22) 10%, transparent 15% 50%, rgb(255 255 255 / .16) 58%, transparent 64%),
    radial-gradient(circle, transparent 0 35%, rgb(0 0 0 / 0) 36%);
  -webkit-mask: radial-gradient(circle, transparent 0 35%, #000 36%); mask: radial-gradient(circle, transparent 0 35%, #000 36%);
}
.brazo {
  position: absolute; right: 9%; top: 9%; width: 2.6%; height: 66%; border-radius: 6px; transform-origin: 50% 6%;
  background: linear-gradient(90deg, #7d7d7d, #f2f2f2 45%, #9d9d9d 60%, #5e5e5e); box-shadow: 6px 10px 14px rgb(0 0 0 / .5);
}
.brazo-base {
  position: absolute; left: 50%; top: 6%; width: 420%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #e9e9e9, #8a8a8a 45%, #2e2e2e 75%); box-shadow: 0 6px 12px rgb(0 0 0 / .6);
}
.brazo-contrapeso {
  position: absolute; left: 50%; top: -12%; width: 300%; height: 12%; translate: -50% 0; border-radius: 4px;
  background: linear-gradient(90deg, #1c1c1c, #5a5a5a 45%, #1c1c1c);
}
.brazo-cabezal {
  position: absolute; left: 50%; bottom: -9%; width: 360%; height: 11%; translate: -62% 0; rotate: 18deg; border-radius: 3px;
  background: linear-gradient(90deg, #111, #3c3c3c 50%, #111); box-shadow: 0 4px 8px rgb(0 0 0 / .6);
}
.tocadiscos-luz {
  position: absolute; left: 3%; bottom: 4%; width: 1.6%; aspect-ratio: 1; border-radius: 50%; background: #ff3d3d;
  box-shadow: 0 0 10px #ff3d3d, 0 0 22px rgb(255 61 61 / .6);
}
.decadas {
  position: absolute; left: 0; right: 0; top: calc(50% - 18svh + 36vw + 18px); list-style: none; padding: 0;
  display: flex; justify-content: center; gap: 3.2vw; font-size: 12px; letter-spacing: .08em; color: rgb(246 241 231 / .4);
}
.decadas li.encendida { color: #ff5aa5; text-shadow: 0 0 12px #ff5aa5; }
/* fotos impresas de los 2000: borde blanco, papel brillante y la fecha naranja de la cámara en la esquina */
.foto24 {
  position: absolute; width: 30vw; padding: 1.2vw; background: #f4efe6; border-radius: 2px; rotate: var(--giro);
  box-shadow: 0 16px 34px rgb(0 0 0 / .6), inset 0 0 0 1px rgb(0 0 0 / .06);
}
.foto24 img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; filter: contrast(1.04) sepia(.18); }
.foto24::after { /* brillo del papel */
  content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(125deg, rgb(255 255 255 / .22), transparent 35%, transparent 70%, rgb(255 255 255 / .08));
}
.foto24 figcaption {
  position: absolute; right: 2vw; bottom: 2.2vw; font: 700 clamp(9px, .85vw, 14px)/1 var(--mono); letter-spacing: .08em;
  color: #ff8a2a; text-shadow: 0 0 4px rgb(255 120 30 / .9);
}
.foto24:nth-of-type(1) { left: 2vw; top: 6svh; }
.foto24:nth-of-type(2) { right: 2vw; top: 8svh; }
.foto24:nth-of-type(3) { left: 4vw; bottom: 6svh; }
.foto24:nth-of-type(4) { right: 4vw; bottom: 5svh; }
@media (max-width: 899px), (orientation: portrait) { .foto24:nth-of-type(n+3) { display: none; } }
/* MEMORIES 2024 en la compu (26/10): la escena 3D (memorias3d.js) ocupa toda la pantalla, transparente; el tocadiscos queda en
   la mitad derecha. El crédito del modelo (CC BY) va chiquito abajo a la derecha. */
.memorias-3d, .memorias25-3d { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.credito-3d {
  position: absolute; right: 14px; bottom: 10px; margin: 0; pointer-events: none;
  font: 400 10px/1.3 var(--mono); letter-spacing: .04em; color: rgb(246 241 231 / .38);
}

/* MEMORIES 2025: un televisor de madera de los 70 (Mauro, 24/10, con la foto de referencia): gabinete de nogal, marco azul
   oscuro con filete dorado, bisel plateado, pantalla curva; a la derecha el panel dorado con el dial de canales, el parlante y
   las perillas. Los botones de verdad: dial (canal), volumen y power. */
.pieza--tele { display: grid; place-items: center; }
.tele { --tw: 76vw; position: relative; width: var(--tw); aspect-ratio: 1.5; margin-top: -10svh; filter: drop-shadow(0 30px 40px rgb(0 0 0 / .7)); }
.tele-gabinete {
  position: absolute; inset: 0 0 5% 0; border-radius: calc(var(--tw) * .014); overflow: hidden;
  background:
    linear-gradient(180deg, rgb(255 255 255 / .16), transparent 6%, transparent 92%, rgb(0 0 0 / .35)),
    repeating-linear-gradient(90deg, rgb(0 0 0 / .1) 0 1px, transparent 1px 3px, rgb(255 220 170 / .05) 3px 4px, transparent 4px 9px),
    repeating-radial-gradient(ellipse 340% 26% at 30% 120%, rgb(0 0 0 / .14) 0 2px, transparent 2px 7px),
    linear-gradient(100deg, #7a4a24, #a3683a 22%, #8a5329 45%, #a86d3d 68%, #6e4120);
  box-shadow: inset 0 0 0 calc(var(--tw) * .004) rgb(0 0 0 / .4), inset 0 calc(var(--tw) * .006) 0 rgb(255 230 190 / .25);
}
.tele-marco {
  position: absolute; left: 4%; top: 6%; width: 69%; bottom: 7%; border-radius: calc(var(--tw) * .012);
  background: #1b2433; box-shadow: inset 0 0 0 calc(var(--tw) * .0035) #c8a24a, inset 0 0 0 calc(var(--tw) * .006) #1b2433, 0 2px 6px rgb(0 0 0 / .5);
  padding: calc(var(--tw) * .028);
}
.tele-marco::before { /* bisel plateado alrededor de la pantalla */
  content: ''; position: absolute; inset: calc(var(--tw) * .016); border-radius: calc(var(--tw) * .03);
  background: linear-gradient(160deg, #e9edf0, #9aa3a8 30%, #f5f7f8 52%, #7f878c 75%, #c9cfd2);
  box-shadow: inset 0 0 calc(var(--tw) * .01) rgb(0 0 0 / .45);
}
.tele-pantalla {
  position: relative; width: 100%; height: 100%; transform-origin: 50% 50%; overflow: hidden; background: #0d0f0e;
  border-radius: 13% / 17%; box-shadow: inset 0 0 calc(var(--tw) * .04) rgb(0 0 0 / .95), 0 0 0 calc(var(--tw) * .003) #4b5257;
}
.tele-video, .tele-estatica { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tele-video { filter: sepia(.3) saturate(1.15) contrast(1.08); }
.tele-estatica { opacity: 0; image-rendering: pixelated; }
.tele-pantalla::after { /* líneas de barrido, viñeta y el reflejo del vidrio curvo */
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background:
    radial-gradient(70% 45% at 30% 18%, rgb(255 255 255 / .16), transparent 60%),
    repeating-linear-gradient(to bottom, rgb(0 0 0 / .22) 0 1px, transparent 1px 3px),
    radial-gradient(120% 100% at 50% 50%, transparent 50%, rgb(0 0 0 / .7));
}
.tele-panel {
  position: absolute; left: 76%; right: 3.5%; top: 6%; bottom: 7%; border-radius: calc(var(--tw) * .008);
  
  background:
    repeating-linear-gradient(0deg, rgb(255 255 255 / .06) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #e2ad3e, #c98e22 40%, #b37a17 70%, #d9a43a);
  box-shadow: inset 0 0 0 calc(var(--tw) * .003) #5b3e0d, inset 0 calc(var(--tw) * .004) 0 rgb(255 240 190 / .5), 0 1px 3px rgb(0 0 0 / .4);
}
.tele-dial {
  position: absolute; left: 12%; top: 5%; width: 76%; aspect-ratio: 1; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  background: radial-gradient(circle, #2a2620 0 55%, #15120e 56% 62%, #3a352c 63% 100%);
  box-shadow: 0 0 0 calc(var(--tw) * .004) #6b5520, 0 calc(var(--tw) * .004) calc(var(--tw) * .008) rgb(0 0 0 / .5), inset 0 0 calc(var(--tw) * .006) #000;
}
.tele-dial-numeros { position: absolute; inset: 0; }
.tele-dial-numeros b {
  position: absolute; left: 50%; top: 50%; font: 700 calc(var(--tw) * .011)/1 var(--mono); color: #f1e6cc; translate: -50% -50%;
}
.tele-dial-perilla {
  position: absolute; inset: 24%; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #f7f3ea, #bdb6a6 45%, #6d675c 80%);
  box-shadow: 0 calc(var(--tw) * .004) calc(var(--tw) * .006) rgb(0 0 0 / .6);
}
.tele-dial-perilla::after { content: ''; position: absolute; left: 46%; top: 6%; width: 8%; height: 46%; border-radius: 2px; background: #2c2a26; }
.tele-parlante {
  position: absolute; left: 10%; width: 48%; top: calc(10% + 76% * var(--panel-ratio, .37)); bottom: 5%; border-radius: calc(var(--tw) * .004);
  background: repeating-linear-gradient(0deg, #2d2a24 0 2px, #9a9184 2px 3px, #d6cdbd 3px 4px, #2d2a24 4px 6px);
  box-shadow: inset 0 0 0 calc(var(--tw) * .003) #5b3e0d, inset 0 0 calc(var(--tw) * .01) rgb(0 0 0 / .6);
}
.tele-perillas { position: absolute; left: 64%; right: 8%; top: calc(10% + 76% * var(--panel-ratio, .37)); bottom: 5%; display: flex; flex-direction: column; justify-content: space-between; align-items: center; }
.tele-boton {
  display: block; width: 100%; aspect-ratio: 1; border-radius: 50%; border: 0; padding: 0; position: relative;
  background: radial-gradient(circle at 36% 32%, #fbf8f0, #cfc8b8 40%, #7d7668 80%, #4b463c);
  box-shadow: 0 0 0 calc(var(--tw) * .002) #3a2a08, 0 calc(var(--tw) * .003) calc(var(--tw) * .005) rgb(0 0 0 / .6), inset 0 -2px 3px rgb(0 0 0 / .3);
}
button.tele-boton { cursor: pointer; }
.tele-boton::after { content: ''; position: absolute; left: calc(50% - 1px); top: 10%; width: 2px; height: 36%; border-radius: 1px; background: #2b2820; }
.tele-boton:focus-visible, .tele-dial:focus-visible { outline: 2px solid var(--texto); outline-offset: 3px; }
.tele-etiquetas { display: none; }
.tele-pata { position: absolute; bottom: 0; width: 6%; height: 6%; border-radius: 0 0 30% 30%; background: linear-gradient(90deg, #1a120a, #3a2a1a 50%, #120c06); }
.tele-pata:nth-of-type(1) { left: 9%; }
.tele-pata:nth-of-type(2) { right: 9%; }
.tele-indicador {
  position: absolute; left: 7%; top: 9%; z-index: 3; opacity: 0; pointer-events: none;
  font: 700 clamp(14px, 1.5vw, 24px)/1 var(--mono); letter-spacing: .1em; color: #7dff7d; text-shadow: 0 0 8px #3dff3d;
}
/* MEMORIES 2025: fotos colgadas sobre la tele, como un tendedero */
.pieza--tele .colgada { --ancho: 24vw; }
.pieza--tele .colgada:nth-child(1) { --x: 18vw; --hilo: 3svh; }
.pieza--tele .colgada:nth-child(2) { --x: 50vw; --hilo: 6svh; }
.pieza--tele .colgada:nth-child(3) { --x: 82vw; --hilo: 2svh; }

/* ——— El cierre: KOOL.IA ——— */
.final { position: absolute; inset: 0; z-index: 8; opacity: 0; visibility: hidden; pointer-events: none; }
.final.activa { visibility: visible; pointer-events: auto; }
/* El escenario (cierre.js; 25/10 el del celular pasó a la compu): el boliche con la cercha y las luces, una pantalla LED grande,
   el título, el botón y el fuego abajo. Esto es el celular (vertical); la compu acomoda las piezas en su @media. */
.final--escenario .boliche { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
/* (con .final--escenario delante: si no, la regla general .pantalla de abajo le pone los márgenes negativos del anillo viejo) */
.final--escenario .pantalla--grande {
  position: absolute; left: 7vw; right: 7vw; top: calc(env(safe-area-inset-top) + 16svh); width: auto; height: 26svh;
  aspect-ratio: auto; margin: 0; z-index: 1; border-radius: 4px;
  box-shadow: 0 0 0 1px #2a2530, 0 0 0 4px #0c0a0f, 0 0 0 5px #3a3540, 0 24px 60px rgb(0 0 0 / .7);
}
.final--escenario .titulo { top: 51svh; font-size: 13.5vw; } /* Unbounded es ancha: con el latido del bajo (+3 %) entra en 390 px */
.final--escenario .final-bloque { top: 58.5svh; gap: 8px; }
.final--escenario .final-bloque::before { top: -4svh; height: 34svh; }
.final--escenario .final-l2 { font-size: 10px; }
.final--escenario .final-prox { font-size: 4.6vw; }
.final--escenario .frase-a { font-size: 10px; letter-spacing: .22em; margin-right: -.22em; }
.final--escenario .frase-b { font-size: 5.9vw; }
.final--escenario .boton {
  position: absolute; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 4svh); translate: -50% 0; z-index: 5;
  min-height: 60px; font-size: 15px;
}
@media (hover: hover) { .final--escenario .boton:hover { translate: -50% -2px; } }
/* el fuego de abajo (fuego.js, con transparencia propia): por delante de la pantalla y por detrás del texto */
.final--escenario .fuego { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 48svh; z-index: 2; pointer-events: none; }
/* en el cierre las brasas (ambiente.js, modo kool) vuelan por delante de todo, como chispas de verdad */
.escena[data-capitulo="final"] .ambiente { z-index: 9; }

/* El título: cada letra tiene su --calor (0 frío, 1 al rojo; cierre.js): sale del fuego incandescente y se enfría; el dedo o el
   mouse que pasa la vuelve a calentar. Abajo les pega el reflejo del fuego (--reflejo, en .final). color-mix con porcentajes
   calculados: cada color va del frío al incandescente.
   (26/10, tercera tanda: "más moderno y tecnológico") En frío, KOOL es cromo azulado y .IA un degradé eléctrico (cian → azul →
   violeta → magenta, los colores de las luces), con la línea del horizonte a la mitad, como un reflejo. En cada golpe los
   colores se separan (--rgb: un fantasma cian a la izquierda y uno magenta a la derecha, la aberración cromática). */
.final--escenario .titulo:not(.titulo--volumen) .titulo-kool .letra {
  --c: calc(var(--calor, 0) * 100%);
  background: linear-gradient(180deg,
    color-mix(in srgb, #fff8e0 var(--c), #ffffff) 0%,
    color-mix(in srgb, #ffe27a var(--c), #e6edf7) 30%,
    color-mix(in srgb, #ff9a1e var(--c), #8e9bb2) 48%,
    color-mix(in srgb, #c42a06 var(--c), #222a3a) 50%,
    color-mix(in srgb, #ff7a14 var(--c), #bcc8da) 56%,
    color-mix(in srgb, #ffd25a var(--c), color-mix(in srgb, #ffb36b calc(var(--reflejo, 0) * 45%), #ffffff)) 82%,
    color-mix(in srgb, #ff5a00 var(--c), color-mix(in srgb, #ff7a2a calc(var(--reflejo, 0) * 85%), #93a3bd)) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(calc(var(--rgb, 0px) * -1) 0 0 rgb(0 225 255 / .85)) drop-shadow(var(--rgb, 0px) 0 0 rgb(255 40 140 / .85))
          drop-shadow(0 0 calc(var(--calor, 0) * 26px) rgb(255 110 20 / calc(var(--calor, 0) * .95)))
          drop-shadow(0 calc(4px + var(--reflejo, 0) * 6px) calc(10px + var(--reflejo, 0) * 14px) rgb(255 100 20 / calc(var(--reflejo, 0) * .55)));
}
.final--escenario .titulo:not(.titulo--volumen) .titulo-ia .letra {
  --c: calc(var(--calor, 0) * 100%);
  background: linear-gradient(180deg,
    color-mix(in srgb, #fffbe8 var(--c), #fff6dc) 0%,
    color-mix(in srgb, #ffe27a var(--c), #ffd98a) 30%,
    color-mix(in srgb, #ff9a1e var(--c), #e8a33c) 48%,
    color-mix(in srgb, #c42a06 var(--c), #4a2006) 50%,
    color-mix(in srgb, #ff7a14 var(--c), #ffb347) 57%,
    color-mix(in srgb, #ffd25a var(--c), #ff8a2a) 84%,
    color-mix(in srgb, #ff5a00 var(--c), color-mix(in srgb, #ff6a10 calc(var(--reflejo, 0) * 80%), #ff5a14)) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(calc(var(--rgb, 0px) * -1) 0 0 rgb(0 225 255 / .85)) drop-shadow(var(--rgb, 0px) 0 0 rgb(255 40 140 / .85))
          drop-shadow(0 0 calc(10px + var(--calor, 0) * 16px) rgb(255 calc(170 - var(--calor, 0) * 60) calc(70 - var(--calor, 0) * 50) / calc(.3 + var(--calor, 0) * .65)))
          drop-shadow(0 calc(4px + var(--reflejo, 0) * 6px) calc(10px + var(--reflejo, 0) * 14px) rgb(255 100 20 / calc(var(--reflejo, 0) * .55)));
}
/* La pista del cierre (28/10, Mauro: "no me gusta el botón de fueguito; prefiero un texto que diga mantener para ver el efecto,
   minimalista, que cuando se toque una vez desaparezca; una sutil dirección"): sin botón ni píldora, una línea chica en mono y,
   debajo, un hilo de luz que se llena de izquierda a derecha y vuelve a empezar (lo que pasa si se mantiene). Se va con el primer
   toque (cierre.js). La compu la pone entre «Próximamente» y la tarima; el celular, arriba de Precompra. */
.cierre-pista {
  position: absolute; left: 50%; bottom: calc(4vh + 92px); translate: -50% 0; z-index: 6; margin: 0; pointer-events: none; white-space: nowrap;
  font: 400 11px/1 var(--mono); letter-spacing: .26em; margin-right: -.26em; text-transform: uppercase; color: rgb(255 244 226 / .82);
  text-shadow: 0 1px 10px rgb(0 0 0 / .95), 0 0 2px rgb(0 0 0 / .8);
}
.cierre-pista::after {
  content: ''; position: absolute; left: 0; right: .26em; bottom: -9px; height: 1px; border-radius: 1px;
  background: linear-gradient(90deg, rgb(255 200 116 / 0), #ffc874 70%, #fff1c4); transform-origin: 0 50%; scale: 0 1;
  animation: pista-carga 2.4s cubic-bezier(.65, 0, .35, 1) infinite;
}
@keyframes pista-carga { 0% { scale: 0 1; opacity: 1; } 70% { scale: 1 1; opacity: 1; } 100% { scale: 1 1; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cierre-pista::after { animation: none; scale: 1 1; opacity: .6; } }
.pantalla {
  position: absolute; left: 0; top: 0; width: 30vw; aspect-ratio: 16 / 10; margin: calc(-30vw * 5 / 16) 0 0 -15vw;
  background: #060508; border-radius: 3px; overflow: hidden; backface-visibility: hidden;
  box-shadow: 0 0 0 1px #2a2530, 0 0 0 3px #0c0a0f; /* sin sombra desenfocada: en 3D, con 10 pantallas, cuesta un cuadro entero */
}
.pantalla canvas { width: 100%; height: 100%; display: block; }
.pantalla::after { /* la separación entre LEDs */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle, transparent 0 50%, rgb(6 5 8 / .85) 62%) 0 0 / var(--celda, 3px 3px);
}

/* El título: grotesca ancha (Unbounded 800, 26/10 tercera tanda: "más moderno y tecnológico"); detrás, una copia que hace el
   volumen, una extrusión azul noche con un halo cian que late con el bajo (cierre.js mueve las dos juntas) */
.titulo {
  position: absolute; left: 0; right: 0; top: 31svh; translate: 0 -50%; z-index: 4;
  display: flex; justify-content: center; align-items: baseline;
  font: 800 13vw/1 var(--display); letter-spacing: -.04em; white-space: nowrap; touch-action: pan-y;
}
.titulo .letra { display: inline-block; will-change: transform; padding: 0 .01em; }
.titulo:not(.titulo--volumen) .titulo-kool .letra {
  background: linear-gradient(180deg, #ffffff 0%, #e6edf7 30%, #8e9bb2 48%, #222a3a 50%, #bcc8da 56%, #ffffff 82%, #93a3bd 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* (28/10, Mauro: "el IA hacelo de un color relacionado con el fondo o la página") .IA ya no va en cian, azul y violeta: en los dorados
   de la página (el de Precompra, el de las brasas) que bajan a brasa, con la línea del horizonte en marrón */
.titulo:not(.titulo--volumen) .titulo-ia .letra {
  background: linear-gradient(180deg, #fff6dc 0%, #ffd98a 30%, #e8a33c 48%, #4a2006 50%, #ffb347 57%, #ff8a2a 84%, #ff5a14 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.titulo--volumen { z-index: 3; pointer-events: none; }
.titulo--volumen .letra {
  color: #070b18;
  text-shadow: .005em .006em 0 #131b33, .01em .012em 0 #111830, .015em .018em 0 #0f152b, .02em .024em 0 #0d1226, .025em .03em 0 #0b1021,
    .03em .036em 0 #090d1b, .035em .042em 0 #070a15, 0 0 .14em rgb(61 214 255 / calc(.2 + .45 * var(--nivel, 0))), .06em .09em .12em rgb(0 0 0 / .9);
}
.titulo--volumen .titulo-ia .letra { color: #1e0c04; }


/* El bloque del cierre: la sombra que lo separa de las pantallas es un óvalo que se desvanece antes de llegar al borde (24/10:
   "se notaba la línea del rectángulo negro") */
.final-bloque {
  position: absolute; left: 0; right: 0; top: 54svh; z-index: 4; padding: 0 var(--borde);
  display: grid; justify-items: center; align-content: start; gap: 14px; text-align: center;
}
.final-bloque::before {
  content: ''; position: absolute; left: 6%; right: 6%; top: -8svh; height: 60svh; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgb(3 2 8 / .82), rgb(3 2 8 / .5) 55%, rgb(3 2 8 / 0));
}
/* (26/10, tercera tanda: "más moderno y tecnológico; mantené el copy y la importancia") Las etiquetas en mono, como una terminal
   (se decodifican al entrar); «Próximamente» en mayúsculas finas y muy espaciadas; «nunca antes vista» en la grotesca más pesada,
   lo más grande del bloque después del título. */
.final-l2 { font: 500 12px/1 var(--mono); letter-spacing: .5em; text-transform: uppercase; color: #8fe9ff; margin-right: -.5em;
  text-shadow: 0 0 14px rgb(61 214 255 / .55), 0 2px 10px rgb(0 0 0 / .9); }
.final-prox {
  font: 300 6vw/1 var(--display); letter-spacing: .3em; margin-right: -.3em; text-transform: uppercase; padding: .1em 0;
  filter: drop-shadow(0 0 22px rgb(140 220 255 / .35)) drop-shadow(0 6px 26px rgb(0 0 0 / .9));
}
.final-frase { display: grid; justify-items: center; gap: 8px; max-width: none; }
.frase-a { font: 500 12px/1.3 var(--mono); letter-spacing: .32em; margin-right: -.32em; text-transform: uppercase; color: rgb(236 244 255 / .86); text-shadow: 0 2px 14px rgb(0 0 0 / .9); }
.frase-b {
  font: 900 6.2vw/1 var(--display); letter-spacing: -.04em; white-space: nowrap;
  filter: drop-shadow(0 0 26px rgb(120 120 255 / .35)) drop-shadow(0 4px 20px rgb(0 0 0 / .9));
}
.final .boton { margin-top: 14px; }

/* El botón (24/10: "el de precompra es horrible"): píldora de vidrio oscuro con un borde de luz que gira (los colores de las
   ediciones), texto dorado y un círculo con la flecha; al pasar el mouse se llena de dorado. */
.boton {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; gap: 18px; min-height: 64px; padding: 0 8px 0 34px; white-space: nowrap;
  border-radius: 999px; background: rgb(14 10 18 / .82); color: #ffe2ad;
  font: 700 16px/1 var(--mono); letter-spacing: .24em; text-transform: uppercase; text-decoration: none; cursor: pointer;
  /* (28/10, Mauro: "sacale la iluminación que tiene atrás") sin el halo que latía con el bajo: solo el filo de luz de arriba */
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .12);
  transition: background-color .25s, color .25s, translate .25s;
}
.boton-borde {
  position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 2px; pointer-events: none; overflow: hidden;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
/* (26/10, segunda tanda: "el botón no tiene que ser una banderita") un borde de fuego: rojo, naranja y oro que gira.
   (28/10, decimosexta vuelta: "se tranca mucho la última página") Antes giraba el ángulo del degradé (una variable que Anime.js
   escribía en cada cuadro): el borde se repintaba 60 veces por segundo. Ahora el degradé queda quieto en un cuadrado más grande que
   el botón, centrado, y lo que gira es ese cuadrado: una animación de transform, que la placa de video hace sola (lineal: Safari la
   acelera). Se ve igual: un degradé cónico girado es el mismo degradé con otro ángulo de arranque. Solo gira con el cierre a la vista. */
.boton-borde::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: 150%; aspect-ratio: 1; transform: translate(-50%, -50%);
  background: conic-gradient(#ff3d00, #ff8a00, #ffd25a, #fff1c4, #ffd25a, #ff8a00, #ff3d00);
}
.final.activa .boton-borde::before { animation: giro-borde 3.2s linear infinite; }
@keyframes giro-borde { from { transform: translate(-50%, -50%) rotate(0turn); } to { transform: translate(-50%, -50%) rotate(1turn); } }
@media (prefers-reduced-motion: reduce) { .final.activa .boton-borde::before { animation: none; } }
.boton-texto { display: inline-block; }
.boton-flecha { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(180deg, #ffe0a6, #f0a93f); transition: background-color .25s; }
.boton-flecha svg { width: 22px; height: 22px; fill: none; stroke: #1a1208; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: translate .25s, stroke .25s; }
@media (hover: hover) { .boton:hover { background: linear-gradient(180deg, #ffe0a6, #f0a93f); color: #1a1208; translate: 0 -2px; } }
@media (hover: hover) { .boton:hover .boton-flecha { background: #1a1208; } }
/* (28/10, Mauro: "la flecha de Precompra tiene que apuntar hacia abajo") la flecha baja; al pasar el mouse, baja un poco más */
@media (hover: hover) { .boton:hover .boton-flecha svg { stroke: #ffc874; translate: 0 3px; } }
.boton:focus-visible, .final-ig:focus-visible, .sonido:focus-visible { outline: 2px solid var(--texto); outline-offset: 4px; }
/* el botón de la página sin JS */
.tramo .boton { padding: 0 34px; }
/* (27/10, Mauro: "atrás del botón de precompra dice Instagram, no sé por qué") el link a Instagram ya no va abajo al centro (quedaba
   detrás del botón): es un ícono redondo arriba a la izquierda, del mismo tamaño que el del sonido, que está a la derecha */
.final-ig {
  position: absolute; left: calc(env(safe-area-inset-left) + 14px); top: calc(env(safe-area-inset-top) + 14px); z-index: 5;
  width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid rgb(255 200 116 / .5); background: rgb(5 4 7 / .6); color: var(--acento); transition: background-color .25s, color .25s;
}
.final-ig svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.final-ig .final-ig-punto { fill: currentColor; stroke: none; }
.final-ig:hover { background: var(--acento); color: #1a1208; }
.final-ig[hidden] { display: none; }
.sonido {
  position: absolute; right: calc(env(safe-area-inset-right) + 14px); top: calc(env(safe-area-inset-top) + 14px); z-index: 5;
  width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgb(255 200 116 / .5); background: rgb(5 4 7 / .6); color: var(--acento);
  display: grid; place-items: center; cursor: pointer; padding: 0;
}
.sonido svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sonido svg path:first-child { fill: currentColor; }
.sonido[aria-pressed="false"] .sonido-ondas { opacity: .25; }
/* sin sonido: el botón se agranda en una píldora que invita a prenderlo (el navegador no deja sonar sin un toque) */
.sonido-texto { display: none; font: 500 13px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.sonido[aria-pressed="false"] { width: auto; padding: 0 18px 0 14px; gap: 10px; display: flex; align-items: center; border-radius: 999px;
  background: rgb(255 200 116 / .14); border-color: var(--acento); box-shadow: 0 0 24px rgb(255 200 116 / .35); }
.sonido[aria-pressed="false"] .sonido-texto { display: inline; }

/* ——— Escritorio ——— */
@media (min-width: 900px) and (orientation: landscape) {
  /* El reel de cada edición va en un teléfono, centrado en la mitad derecha (Mauro, 23/10: "que parezca un celular");
     su imagen, desenfocada, llena el fondo. */
  /* El reel va en un iPhone 16 (Mauro, 24/10: "que no sobre espacio arriba y abajo"): proporción real 71,6 × 147,6 mm,
     marco de titanio, bordes finos, isla dinámica; el video llena toda la pantalla (cover). */
  .telefono {
    inset: auto; left: 76vw; top: 50%; translate: -50% -50%; z-index: 3; height: 82vh; aspect-ratio: 71.6 / 147.6; opacity: 0;
    padding: .75vh; border-radius: 6.4vh;
    background: linear-gradient(145deg, #3a3a40, #101013 30%, #050506 70%, #26262b);
    box-shadow: 0 0 0 1.5px #8a8a93, 0 0 0 3px #2b2b30, 0 0 0 4px #6f6f78, 0 40px 90px rgb(0 0 0 / .7), 0 0 120px rgb(255 200 140 / .08);
  }
  .telefono::before, .telefono::after { content: ''; position: absolute; width: 3px; border-radius: 2px; background: linear-gradient(90deg, #5c5c64, #9a9aa3); }
  .telefono::before { right: -5px; top: 25%; height: 11%; }
  .telefono::after { left: -5px; top: 16%; height: 4%; box-shadow: 0 6vh 0 #7a7a82, 0 12vh 0 #7a7a82; }
  .telefono-pantalla { position: relative; inset: auto; width: 100%; height: 100%; border-radius: 5.7vh; background: #000; }
  /* ICE (26/10, Mauro: "lo de desbloquear el video me gusta para el celular; en la compu el celular a la derecha y poder
     jugar con el fondo"): el celular queda delante del vidrio congelado, con el video a la vista y escarcha en las esquinas del
     vidrio; lo que se congela y se limpia es el fondo. Limpiar muestra la pista de ICE (.fondo-imagen, nítida en ICE). */
  .escena[data-capitulo="ice"] .telefono { z-index: 5; }
  .escena[data-capitulo="ice"] .fondo-imagen { inset: 0; filter: saturate(1.15) brightness(.8); }
  /* (26/10, segunda tanda: "que destaque el 2024 por encima del hielo, y el título y la fecha") sobre el hielo blanco el año en
     contorno y el logo blanco se perdían: el año pasa a hielo azul oscuro translúcido con contorno blanco y sombra; el logo y la
     fecha llevan una sombra azul marino que los despega del vidrio */
  .telefono-escarcha {
    display: block; position: absolute; inset: .75vh; border-radius: 5.7vh; z-index: 2; pointer-events: none; opacity: 0;
    background: url(img/escarcha-cristales.webp) center / cover, radial-gradient(closest-side, transparent 55%, rgb(220 238 250 / .55));
    -webkit-mask: radial-gradient(120% 75% at 50% 50%, transparent 44%, #000 84%); mask: radial-gradient(120% 75% at 50% 50%, transparent 44%, #000 84%);
  }
  .telefono .fondo-video { object-fit: cover; }
  .telefono-isla { display: block; position: absolute; left: 50%; top: 1.9vh; width: 31%; height: 2.6vh; translate: -50% 0; border-radius: 99px; background: #000; z-index: 2; }
  .telefono-reflejo { display: block; position: absolute; inset: .75vh; border-radius: 5.7vh; z-index: 2; pointer-events: none;
    background: linear-gradient(115deg, rgb(255 255 255 / .1), transparent 28%, transparent 70%, rgb(255 255 255 / .04)); }
  /* el año: 4 cifras = ~2,3 em; a 18vw ocupa ~41vw centrado en 29vw, y con el recorrido del mouse (±10 %) queda adentro */
  /* (29/10, Mauro: "el 2023 un poquito más arriba, ahora se pone mucho detrás de KOOL") 42vh → 37vh */
  .anio { top: 37vh; right: 42vw; }
  .anio-num { font-size: clamp(130px, 18vw, 380px); }
  .ficha { right: 42vw; bottom: 12vh; }
  .logo-caja { width: calc(min(34vw, 520px) * var(--crece, 1)); }
  /* 2023: las fotos cuelgan a los costados del teléfono */
  .colgada { --ancho: 9.5vw; padding: .6vw .6vw 2.2vw; }
  /* (26/10, segunda tanda) tres por guirnalda, para que llenen el alto de la pantalla: las fotos se achican lo justo para que
     las tres entren (alto de cada polaroid ≈ 1,49 × ancho + los hilos) */
  .pieza--colgadas .colgada { --ancho: min(9.2vw, 21vh); }
  .pieza--colgadas > .colgada:nth-child(1) { --x: 58.5vw; --hilo: 2.5vh; }
  .pieza--colgadas > .colgada:nth-child(2) { --x: 92.5vw; --hilo: 1.5vh; }
  .colgada--abajo { --hilo: 2.8vh; }
  /* MEMORIES 2024 (Mauro, 24/10, con su dibujo): el tocadiscos más chico arriba, las fotos a la derecha y abajo */
  .pieza--vinilo { display: block; }
  .tocadiscos { position: absolute; left: 53vw; top: 7vh; width: min(31vw, 50vh * 1.22); margin: 0; }
  .decadas { left: 53vw; right: auto; width: min(31vw, 50vh * 1.22); top: calc(7vh + min(31vw, 50vh * 1.22) / 1.22 + 12px); font-size: 13px; gap: 1.4vw; }
  .foto24 { width: 11.5vw; padding: .55vw .55vw 1.9vw; }
  .foto24 figcaption { right: .9vw; bottom: 2.3vw; }
  .foto24:nth-of-type(1) { left: auto; right: 2vw; top: 6vh; }
  .foto24:nth-of-type(2) { left: auto; right: 3vw; top: 45vh; }
  .foto24:nth-of-type(3) { left: 54.5vw; top: auto; bottom: 5vh; }
  .foto24:nth-of-type(4) { left: 69vw; right: auto; top: auto; bottom: 7vh; }
  /* la tele, centrada en la mitad derecha (centro en 76vw), con el tendedero arriba */
  .tele { --tw: min(40vw, 86vh); margin: 14vh 0 0 52vw; }
  .tele-indicador { font-size: 1.4vw; }
  .pieza--tele .colgada { --ancho: 10.5vw; }
  .pieza--tele .colgada:nth-child(1) { --x: 60vw; --hilo: 5vh; }
  .pieza--tele .colgada:nth-child(2) { --x: 76.5vw; --hilo: 2vh; }
  .pieza--tele .colgada:nth-child(3) { --x: 92.5vw; --hilo: 6vh; }

  /* El escenario apaisado (25/10, el del celular): la pantalla LED arriba al centro, el título debajo, la frase, el botón abajo y el
     fuego a lo ancho del piso. Seis luces en la cercha (cierre.js las cuenta por el ancho). */
  .final--escenario .pantalla--grande { left: 50%; right: auto; top: 10vh; width: min(38vw, 50vh); height: auto; aspect-ratio: 16 / 9; translate: -50% 0; }
  .final--escenario .titulo { top: 48.5vh; font-size: min(7.4vw, 12.5vh); } /* (26/10) Unbounded: más ancha que la serif */
  .final--escenario .final-bloque { top: 56.5vh; gap: 8px; }
  .final--escenario .final-bloque::before { top: -6vh; height: 34vh; left: 22%; right: 22%; }
  .final--escenario .final-l2 { font-size: 14px; }
  .final--escenario .final-prox { font-size: min(5vw, 9vh); }
  .final--escenario .frase-a { font-size: 13px; }
  .final--escenario .frase-b { font-size: min(2.8vw, 5vh); }
  .final--escenario .fuego { height: 42vh; }
  .boton { min-height: 70px; padding: 0 9px 0 40px; font-size: 18px; }
  /* la pista, donde iba el botón (27/10, Mauro, con la captura marcada): centrada entre «Próximamente» y el borde de la tarima */
  .cierre-pista { top: 70.5vh; bottom: auto; translate: -50% -50%; }
  .boton-flecha { width: 52px; height: 52px; }
}

/* ——— Estados ——— */
/* La entrada: el logo grande en el medio. Al pasar a 2023 baja a su lugar (las partículas viajan). */
.escena.en-intro .ficha { bottom: 50svh; translate: 0 50%; }
/* Lo del cierre aparece en su timeline (el escenario entero depende de JS). */
.final-prox, .final-l2, .final .boton, .final-ig, .sonido, .frase-a, .frase-b, .cierre-pista { opacity: 0; }
@media (min-width: 900px) and (orientation: landscape) {
  .escena.en-intro .ficha { right: 0; }
}

/* (27/10, el celular: "adaptala mucho más") el año, el logo y la fecha de ICE y de MEMORIES 2025 se despegan igual en la compu y
   en el celular (antes solo en la compu; en el celular el año de ICE casi no se veía sobre el hielo) */
.escena[data-capitulo="ice"] .anio-num {
  color: rgb(14 42 78 / .5); -webkit-text-stroke: 2.5px #ffffff;
  filter: drop-shadow(0 6px 22px rgb(5 22 48 / .75)) drop-shadow(0 0 3px rgb(5 22 48 / .9));
}
.escena[data-capitulo="ice"] .logo-caja { filter: drop-shadow(0 8px 24px rgb(4 18 40 / .85)) drop-shadow(0 0 4px rgb(4 18 40 / .9)); }
.escena[data-capitulo="ice"] .ficha-dato { color: #ffffff; text-shadow: 0 2px 10px rgb(4 18 40 / .95), 0 0 3px rgb(4 18 40 / .9); }
/* MEMORIES 2025 (26/10): como en ICE, relleno oscuro translúcido, contorno claro y sombra (venía del living de la
   segunda tanda; sin el living, sobre el fondo desenfocado, se sigue leyendo mejor que el contorno solo) */
.escena[data-capitulo="memories25"] .anio-num {
  color: rgb(40 16 4 / .55); -webkit-text-stroke: 2.5px #ffd9a8;
  filter: drop-shadow(0 6px 22px rgb(20 8 2 / .8)) drop-shadow(0 0 3px rgb(20 8 2 / .9));
}
.escena[data-capitulo="memories25"] .logo-caja { filter: drop-shadow(0 8px 24px rgb(20 8 2 / .85)); }
.escena[data-capitulo="memories25"] .ficha-dato { text-shadow: 0 2px 10px rgb(20 8 2 / .95), 0 0 3px rgb(20 8 2 / .9); }
/* ART (26/10, segunda tanda): con más graffitis en la pared, el año, el logo y la fecha llevan sombra para despegarse */
.escena[data-capitulo="art"] .anio-num { filter: drop-shadow(0 6px 22px rgb(0 0 0 / .85)) drop-shadow(0 0 3px rgb(0 0 0 / .9)); }
.escena[data-capitulo="art"] .logo-caja { filter: drop-shadow(0 8px 24px rgb(0 0 0 / .9)); }
.escena[data-capitulo="art"] .ficha-dato { text-shadow: 0 2px 10px rgb(0 0 0 / .95), 0 0 3px rgb(0 0 0 / .9); }

/* ——— KOOL.IA (26/10, segunda tanda) ———
   «Próximamente» y «nunca antes vista» se ponen al rojo letra por letra como el título (cierre.js les da --calor). La frase
   destaca más que «Próximamente» ("tiene que destacar mucho más, incluso más que el Próximamente").
   (tercera tanda) En frío ya no son metal dorado: «Próximamente» es blanco con un cian apenas; «nunca antes vista», cromo frío
   que baja a violeta. Al calentarse, los dos pasan a incandescente. También se separan en colores con cada golpe (--rgb). */
.final-prox .letra, .frase-b .letra {
  display: inline-block; --c: calc(var(--calor, 0) * 100%);
  /* el fondo recortado al texto solo pinta dentro de la caja de la letra: sin este aire, la tilde de la Ó quedaba afuera */
  padding: .22em 0 .1em; margin: -.22em 0 -.1em;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(calc(var(--rgb, 0px) * -1) 0 0 rgb(0 225 255 / .8)) drop-shadow(var(--rgb, 0px) 0 0 rgb(255 40 140 / .8))
          drop-shadow(0 0 calc(var(--calor, 0) * 22px) rgb(255 110 20 / calc(var(--calor, 0) * .9)));
}
/* (background-image y no background: el atajo reinicia el background-clip: text de arriba) */
.final-prox .letra {
  background-image: linear-gradient(180deg,
    color-mix(in srgb, #fff8e0 var(--c), #ffffff) 0%,
    color-mix(in srgb, #ffb347 var(--c), #e8f6ff) 55%,
    color-mix(in srgb, #ff5a00 var(--c), #9fdcff) 100%);
}
.frase-b .letra {
  background-image: linear-gradient(180deg,
    color-mix(in srgb, #fff8e0 var(--c), #ffffff) 0%,
    color-mix(in srgb, #ffe27a var(--c), #e3f4ff) 34%,
    color-mix(in srgb, #ff9a1e var(--c), #8fd8ff) 52%,
    color-mix(in srgb, #ff7a14 var(--c), #8b7bff) 74%,
    color-mix(in srgb, #ff5a00 var(--c), #c35cff) 100%);
}
.final-prox, .frase-b { background: none; }
@media (min-width: 900px) and (orientation: landscape) {
  .final--escenario .final-prox { font-size: min(2.2vw, 4.2vh); }
  .final--escenario .frase-a { font-size: min(1.15vw, 2.2vh); letter-spacing: .32em; margin-right: -.32em; color: rgb(236 244 255 / .9); text-shadow: 0 2px 16px rgb(0 0 0 / .95); }
  .final--escenario .frase-b { font-size: min(4.7vw, 8.6vh); line-height: 1; filter: drop-shadow(0 0 30px rgb(120 120 255 / .4)) drop-shadow(0 6px 26px rgb(0 0 0 / .95)); }
  .final--escenario .final-bloque { gap: 10px; }
  /* el fuego va en el escenario 3D (escenario3d.js lo usa de textura): el lienzo sigue dibujándose, pero no se ve encima */
  .final.con-3d .fuego { visibility: hidden; }
  /* el escenario 3D detrás de todo; cuando carga, reemplaza al boliche 2D y a la pantalla de DOM (cuyo lienzo sigue dibujándose:
     es la textura de la pantalla LED central) */
  .final--escenario .escenario-3d { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; opacity: 0; pointer-events: none; }
  .final.con-3d .escenario-3d { opacity: 1; }
  .final.con-3d .boliche { visibility: hidden; }
  .final.con-3d .pantalla--grande { visibility: hidden; }
}
.escenario-3d { display: none; }
/* los créditos de los modelos 3D (CC BY): el del cierre, abajo a la derecha del escenario */
.final .credito-3d { z-index: 6; }

/* ——— SAFARI en la compu (26/10, tercera tanda) ———
   La historia de Instagram que corre en el celular (historia.js) y el tucán del flyer que asoma detrás del teléfono (tucan.js). */
.historia, .tucan { display: none; }
/* (27/10) la historia, el tucán y los años de SAFARI y ART valen para las dos versiones; la caja de la historia (dentro del celular)
   y el lugar del tucán (detrás del celular) son de la compu: el celular tiene los suyos en movil.css */
.historia-barras { position: absolute; left: 5%; right: 5%; top: 5.4vh; display: flex; gap: 3px; }
.historia-barras i { flex: 1; height: 2.5px; border-radius: 2px; background: rgb(255 255 255 / .35); overflow: hidden; }
.historia-barras i::after { content: ''; display: block; height: 100%; width: calc(var(--lleno, 0) * 100%); background: #fff; }
.historia-cabeza { position: absolute; left: 5%; top: 7vh; display: flex; align-items: center; gap: 1vh; color: #fff;
  font: 600 1.55vh/1 system-ui, -apple-system, 'Segoe UI', sans-serif; text-shadow: 0 1px 4px rgb(0 0 0 / .5); }
.historia-cabeza small { font-weight: 400; opacity: .75; }
.historia-avatar { width: 3.6vh; height: 3.6vh; border-radius: 50%; padding: 2px; background: conic-gradient(#feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5, #feda75); }
.historia-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: contain; padding: 18%; background: #0c0c0c; border: 2px solid #0c0c0c; }
.historia-sticker {
  position: absolute; translate: -50% -50%; max-width: 86%; padding: .9vh 1.6vh; border-radius: 1.1vh; opacity: 0;
  font: 400 2.7vh/1.05 'Permanent Marker', cursive; text-align: center; white-space: nowrap; box-shadow: 0 6px 18px rgb(0 0 0 / .35);
}
.historia-sticker[data-estilo="0"] { background: #fff; color: #141414; }
.historia-sticker[data-estilo="1"] { background: linear-gradient(90deg, #ff8a2a, #e0218a); color: #fff; }
.historia-sticker[data-estilo="2"] { background: #101010; color: #fff1a8; }
.historia-sticker[data-estilo="3"] { background: none; box-shadow: none; color: #fff; font-size: 4.2vh;
  text-shadow: 0 3px 0 #e0218a, 0 6px 16px rgb(0 0 0 / .6); }

.tucan { perspective: 900px; }
.tucan-mira { width: 100%; height: 100%; transform-origin: 70% 90%; transform-style: preserve-3d; }
.tucan-cuerpo { width: 100%; height: 100%; transform-origin: 78% 100%; filter: drop-shadow(0 16px 26px rgb(0 0 0 / .55)); }

/* (tercera tanda) "que el 2024 llame más la atención, una sombra o algo". (27/10, undécima vuelta: "mejorá el texto del año de
   SAFARI") El relleno con la pintura del flyer quedaba ruidoso y no se leía: ahora es el atardecer del flyer en degradé (amarillo,
   naranja, rojo), contorno crema y un relieve verde selva a la derecha y abajo (como el graffiti de ART: drop-shadows sin desenfoque) */
/* (28/10, Mauro: "cambiá el estilo de las letras de KOOL SAFARI, los colores principalmente; algo más simple") dos colores: el
   crema de la edición y un contorno verde selva fino, con una sombra suave; sin el degradé del atardecer ni la extrusión */
.escena[data-capitulo="safari"] .anio-num {
  color: #fff1c9; -webkit-text-stroke: 2px #1d5a33;
  filter: drop-shadow(0 8px 24px rgb(2 20 6 / .8)) drop-shadow(0 0 2px rgb(2 20 6 / .6));
}
/* "el 2026 también": graffiti, con contorno negro y una extrusión 3D a la derecha y abajo (drop-shadows de 0 desenfoque apilados,
   como el relleno de una pieza). (27/10, décima vuelta, Mauro: "me gusta el estilo, pero con un degradé de blanco a un poco gris,
   algo más sutil, no amarillo y naranja") el relleno va del blanco a un gris frío, y la extrusión en grafito.
   (undécima vuelta: "que sea más TAG, sin pasarse") la letra pasa a una de tag (Sedgwick Ave Display, a mano alzada), apenas
   inclinada; el relleno, el contorno y el relieve quedan */
.escena[data-capitulo="art"] .anio-num {
  font-family: 'Sedgwick Ave Display', var(--serif); letter-spacing: -.02em; rotate: -4deg;
  /* (29/10, Mauro: "que el 2026 sea todo blanco, sin esa parte cortada, transparente, arriba") la letra de tag se sale por arriba de
     su caja (alto de línea .8) y el degradé recortado al texto no llegaba ahí: relleno blanco liso, como en el celular */
  color: #fff;
  -webkit-text-stroke: 3px #0d0b10;
  filter: drop-shadow(2px 2px 0 #4a4d55) drop-shadow(2px 2px 0 #4a4d55) drop-shadow(3px 3px 0 #0d0b10) drop-shadow(0 14px 30px rgb(0 0 0 / .85));
}
@media (min-width: 900px) and (orientation: landscape) {
  .historia { display: block; position: absolute; inset: .75vh; z-index: 2; border-radius: 5.7vh; overflow: hidden; pointer-events: none; opacity: 0;
    background: linear-gradient(180deg, rgb(0 0 0 / .45), transparent 16%, transparent 80%, rgb(0 0 0 / .35)); }
  .tucan { display: block; position: absolute; z-index: 2; pointer-events: none; visibility: hidden; opacity: 0; } /* detrás del celular (z 3) */
}


/* ——— la portada (29/10, Mauro: "los elementos no aportan; poné fotos de la fiesta desde arriba de fondo, detrás de KOOL, que vayan
   cambiando, del escenario") ——— las tomas con drone de KOOL ART (herramientas/preparar-portada.py) se cruzan despacio, con un
   acercamiento lento, oscurecidas y con una viñeta para que KOOL y la frase se lean encima (escena.js / movil.js, entrarPortada).
   Reemplazan a las seis piezas de cada edición que había pedido Mati el 29/10. */
.portada-fondo { position: absolute; inset: 0; opacity: 0; visibility: hidden; overflow: hidden; }
.pf { position: absolute; inset: -3%; background: center / cover no-repeat; opacity: 0; filter: brightness(.62) saturate(1.1); }
.portada-fondo::after { content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 48% at 50% 50%, rgb(8 5 3 / .55), rgb(8 5 3 / .2) 70%, transparent), linear-gradient(180deg, rgb(8 5 3 / .55), transparent 28%, transparent 70%, rgb(8 5 3 / .7)); }

/* (29/10) el cierre: la frase con la que termina el relato (más larga que «La nueva edición»): menos espaciado y en dos líneas si
   no entra */
.final-l2 { letter-spacing: .24em; margin-right: -.24em; line-height: 1.6; max-width: min(92vw, 40em); text-wrap: balance; text-align: center; }

/* ——— «Quiero participar de la KOOL» (29/10, participar.js): la tarjeta encima del cierre, que sigue andando detrás ———
   Un paso por pantalla, letras grandes, un solo botón.
   (29/10, Mauro: "más soft, más transparente, como un dashboard de vidrio; ahora es demasiado notorio", con la referencia «Glassy
   Dashboard»: tarjetas translúcidas, texto blanco al 60 %, bordes finos de luz, se levantan al pasar el mouse) Vidrio claro sobre
   el cierre: blanco al 10 % con un filo de luz arriba, sin el dorado. En la compu, el vidrio desenfoca lo que hay detrás
   (backdrop-filter); en el celular no (el cierre se mueve detrás y desenfocarlo en cada cuadro traba): ahí el vidrio es más
   denso para que se lea igual. */
.tarjeta-fondo { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px;
  background: radial-gradient(ellipse at 50% 55%, rgb(8 6 12 / .3), rgb(4 3 8 / .62)); opacity: 0; }
.tarjeta-fondo[hidden] { display: none; }
.tarjeta { position: relative; width: min(420px, 100%); max-height: calc(100svh - 32px); overflow: auto; overscroll-behavior: contain;
  padding: 30px 26px 24px; border-radius: 28px; color: #fff;
  background: linear-gradient(150deg, rgb(52 45 60), rgb(24 20 30));
  border: 1px solid rgb(255 255 255 / .16);
  box-shadow: 0 24px 70px rgb(0 0 0 / .45), inset 0 1px 0 rgb(255 255 255 / .22), inset 0 0 0 1px rgb(255 255 255 / .03); }
@media (hover: hover) and (pointer: fine) {
  .tarjeta { background: linear-gradient(150deg, rgb(255 255 255 / .14), rgb(255 255 255 / .05) 55%, rgb(255 255 255 / .08));
    -webkit-backdrop-filter: blur(26px) saturate(1.5); backdrop-filter: blur(26px) saturate(1.5); }
}
.tarjeta h2 { margin: 0 0 20px; font: 600 clamp(21px, 5.6vw, 25px)/1.2 var(--display); letter-spacing: -.01em; text-wrap: balance; color: #fff; }
.tarjeta-cerrar { position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; border: 1px solid rgb(255 255 255 / .12); border-radius: 50%;
  background: rgb(255 255 255 / .06); color: rgb(255 255 255 / .8); cursor: pointer; display: grid; place-items: center; transition: background .25s, rotate .3s; }
.tarjeta-cerrar:hover { background: rgb(255 255 255 / .14); rotate: 90deg; }
.tarjeta-cerrar svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.tarjeta-paso { display: flex; gap: 6px; margin: 0 0 20px; }
.tarjeta-paso i { width: 22px; height: 4px; border-radius: 4px; background: rgb(255 255 255 / .14); transition: background .4s; }
.tarjeta-paso i.hecho { background: rgb(255 255 255 / .85); }
.tarjeta-pantalla { display: flex; flex-direction: column; }
.tarjeta-pantalla[hidden] { display: none; }
.tarjeta-etiqueta { margin: 18px 0 8px; font: 400 14px/1.4 var(--display); color: rgb(255 255 255 / .62); }
.tarjeta-campo { width: 100%; box-sizing: border-box; padding: 14px 16px; border-radius: 16px; border: 1px solid rgb(255 255 255 / .12);
  background: rgb(255 255 255 / .06); color: #fff; font: 400 16px/1.4 var(--display); resize: none; outline: none; transition: border-color .25s, background .25s, box-shadow .25s; }
.tarjeta-campo:focus { border-color: rgb(255 255 255 / .38); background: rgb(255 255 255 / .1); box-shadow: 0 0 0 4px rgb(255 255 255 / .06); }
.tarjeta-campo::placeholder { color: rgb(255 255 255 / .32); }
/* (29/10, Mauro: "el contador, más interactivo y más soft") el puntaje: el número grande, una palabra y diez pastillas de vidrio
   que se encienden hasta el elegido (se tocan, se arrastra el dedo o las flechas; participar.js) */
.puntaje { display: grid; justify-items: center; gap: 2px; padding: 16px 12px 14px; border-radius: 22px;
  background: rgb(255 255 255 / .05); border: 1px solid rgb(255 255 255 / .08); }
.puntaje-num { font: 700 64px/1 var(--display); color: #fff; text-shadow: 0 0 30px rgb(255 214 150 / .35); font-variant-numeric: tabular-nums; }
.puntaje-palabra { margin: 0 0 12px; min-height: 1.4em; font: 400 14px/1.4 var(--display); color: rgb(255 255 255 / .6); }
.puntaje-barra { width: 100%; display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; cursor: pointer; touch-action: none;
  outline: none; border-radius: 14px; user-select: none; -webkit-user-select: none; }
.puntaje-barra:focus-visible { box-shadow: 0 0 0 2px rgb(255 255 255 / .5); }
.puntaje-barra i { display: grid; place-items: center; height: 38px; border-radius: 12px; background: rgb(255 255 255 / .07);
  border: 1px solid rgb(255 255 255 / .08); transition: background .3s, border-color .3s, box-shadow .3s; }
.puntaje-barra b { font: 500 12px/1 var(--display); color: rgb(255 255 255 / .45); transition: color .3s; }
.puntaje-barra i.lleno { background: linear-gradient(180deg, rgb(255 236 206 / .5), rgb(255 196 120 / .3)); border-color: rgb(255 230 190 / .35); }
.puntaje-barra i.lleno b { color: #fff; }
.puntaje-barra i.elegido { background: linear-gradient(180deg, #fff6e6, #ffd49a); border-color: #fff; box-shadow: 0 6px 22px rgb(255 200 120 / .45); }
.puntaje-barra i.elegido b { color: #2a1a0a; font-weight: 700; }
@media (hover: hover) { .puntaje-barra i:hover { border-color: rgb(255 255 255 / .35); } }
/* (29/10) el micrófono, adentro del cuadro de texto, abajo a la derecha (como en cualquier chat); grabando, rojo y latiendo */
.campo-audio { position: relative; }
.campo-audio .tarjeta-campo { padding-right: 58px; padding-bottom: 16px; }
.grabar-boton { position: absolute; right: 10px; bottom: 10px; width: 40px; height: 40px; display: grid; place-items: center; padding: 0;
  border-radius: 50%; border: 1px solid rgb(255 255 255 / .14); background: rgb(255 255 255 / .08); color: rgb(255 255 255 / .8); cursor: pointer;
  transition: background .25s, color .25s, scale .2s; }
.grabar-boton[hidden] { display: none; }
.grabar-boton svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.grabar-boton:hover { background: rgb(255 255 255 / .16); color: #fff; }
.grabar-boton:active { scale: .92; }
.grabar-boton.grabando { background: #ff5a4a; border-color: #ff8a7c; color: #fff; animation: kool-grabando 1s ease-out infinite; }
.grabar-boton.grabado { color: #ffd49a; border-color: rgb(255 212 154 / .45); }
.grabar-boton.sin-micro { opacity: .4; }
@keyframes kool-grabando { from { box-shadow: 0 0 0 0 rgb(255 90 74 / .55); } to { box-shadow: 0 0 0 12px rgb(255 90 74 / 0); } }
.grabar { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.grabar[hidden] { display: none; }
.grabar-oir { flex: 1; min-width: 0; height: 40px; }
.grabar-borrar { border: 0; background: none; color: rgb(255 255 255 / .55); font: 400 13px var(--display); text-decoration: underline; cursor: pointer; padding: 6px 0; white-space: nowrap; }
.tarjeta-regalo { margin: -12px 0 4px; font: 400 16px/1.4 var(--display); color: rgb(255 225 180 / .9); }
.tarjeta-nota { margin: 12px 0 0; font: 400 12px/1.5 var(--display); color: rgb(255 255 255 / .45); }
.tarjeta-gracias { margin: 0; font: 300 18px/1.5 var(--display); color: rgb(255 255 255 / .75); }
.tarjeta-seguir { margin-top: 22px; min-height: 54px; border: 1px solid rgb(255 255 255 / .6); border-radius: 999px; cursor: pointer;
  background: linear-gradient(180deg, #ffffff, #f1ebe3); color: #1c140c; font: 600 16px/1 var(--display); letter-spacing: .01em;
  box-shadow: 0 10px 30px rgb(0 0 0 / .3), inset 0 -2px 0 rgb(0 0 0 / .06); transition: translate .25s, box-shadow .25s; }
.tarjeta-seguir:hover { translate: 0 -3px; box-shadow: 0 16px 36px rgb(0 0 0 / .35), 0 0 0 4px rgb(255 255 255 / .08); }
.tarjeta-seguir:active { translate: 0 0; }
.tarjeta-seguir:focus-visible, .tarjeta-saltar:focus-visible, .grabar-boton:focus-visible, .tarjeta-cerrar:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.tarjeta-saltar { margin-top: 10px; min-height: 44px; border: 0; background: none; color: rgb(255 255 255 / .55); font: 400 14px var(--display); cursor: pointer; }
/* el botón del cierre: ahora es un <button> con un texto más largo */
button.boton { border: 0; }
.boton[data-participar] { letter-spacing: .14em; }
@media (hover: hover) { .boton[data-participar]:hover .boton-flecha svg { translate: 3px 0; } }
/* (29/10, Mauro: "mejorá ese botón para que sea más atractivo") el mismo vidrio de la tarjeta: blanco translúcido con el filo de fuego
   que gira, el texto blanco, un brillo que lo cruza cada tanto y, al pasar el mouse, se levanta y se enciende cálido. Todo en la
   placa de video (transform y opacidad): el cierre del celular no se traba. */
.boton[data-participar] { overflow: hidden; color: #fff; background: linear-gradient(180deg, rgb(255 255 255 / .16), rgb(255 255 255 / .06));
  box-shadow: 0 12px 34px rgb(0 0 0 / .45), inset 0 1px 0 rgb(255 255 255 / .35); font-weight: 600;
  transition: translate .3s cubic-bezier(.2, .8, .3, 1), box-shadow .3s, background-color .3s, color .3s; }
@media (hover: hover) and (pointer: fine) { .boton[data-participar] { -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); } }
.boton[data-participar] .boton-borde { padding: 1.5px; opacity: .85; }
.boton[data-participar] .boton-flecha { background: #fff; box-shadow: 0 4px 14px rgb(0 0 0 / .3); }
.boton[data-participar] .boton-flecha svg { stroke: #1c140c; }
.boton[data-participar]::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgb(255 255 255 / .32) 50%, transparent 62%); transform: translateX(-120%); }
.final.activa .boton[data-participar]::after { animation: boton-brillo 4.2s cubic-bezier(.45, 0, .2, 1) 3s infinite; }
@keyframes boton-brillo { 0% { transform: translateX(-120%); } 32%, 100% { transform: translateX(120%); } }
@media (prefers-reduced-motion: reduce) { .final.activa .boton[data-participar]::after { animation: none; } }
/* el hover solo con mouse: en el celular quedaba pegado después del toque */
@media (hover: hover) {
  .boton[data-participar]:hover { color: #1c140c; background: linear-gradient(180deg, #fff8ec, #ffd9a0); translate: 0 -4px;
    box-shadow: 0 18px 44px rgb(255 150 60 / .35), 0 0 0 5px rgb(255 220 170 / .12), inset 0 1px 0 #fff; }
  .final--escenario .boton[data-participar]:hover { translate: -50% -4px; }
  .boton[data-participar]:hover .boton-flecha { background: #1c140c; }
  .boton[data-participar]:hover .boton-flecha svg { stroke: #fff; }
}
.boton[data-participar]:active { translate: 0 -1px; }
.final--escenario .boton[data-participar]:active { translate: -50% -1px; }
/* (29/10) el lema sobre el hielo blanco de ICE: blanco con la sombra oscura de la fecha */
.escena[data-capitulo="ice"] .ficha-lema { color: #fff; font-weight: 500; text-shadow: 0 0 6px rgb(4 18 40), 0 2px 14px rgb(4 18 40 / .95), 0 0 2px rgb(4 18 40); }

/* ——— (29/10, vigésima vuelta) el cierre: Mauro, "que el título de KOOL esté más grande" y "que el botón de quiero participar esté
   un poco más arriba, tipo abajo de próximamente". El botón sale del pie y queda debajo de «Próximamente»; la pista de mantener
   apretado baja a donde estaba el botón. Celular primero; la compu en su @media. */
.final--escenario .titulo { top: 49svh; font-size: 20vw; }
.final--escenario .final-bloque { top: 57.5svh; }
.final--escenario .boton { top: calc(57.5svh + 92px); bottom: auto; }
.final--escenario .cierre-pista { bottom: calc(env(safe-area-inset-bottom) + 6svh); }
@media (min-width: 900px) and (orientation: landscape) {
  .final--escenario .titulo { top: 46vh; font-size: min(11vw, 19vh); }
  .final--escenario .final-bloque { top: 57vh; }
  .final--escenario .boton { top: calc(57vh + 96px); bottom: auto; }
  .cierre-pista { top: auto; bottom: 7vh; translate: -50% 0; }
}

/* ——— (29/10, vigésima vuelta) la tarjeta de participar, en 3D y por capas (participar.js) ———
   Mauro: "la tarjeta debería ser 3D, por capas: el título en la primera, en la segunda el número, en la tercera «la mejor» y los
   numeritos, en la cuarta el cuadrado del fondo, en la quinta el banner de atrás" y "medio transparente para que se vea el fondo;
   en el celular no es transparente". Ahora es vidrio en las dos versiones: en el celular sin desenfoque (el cierre se mueve
   detrás y desenfocarlo traba), con un velo apenas más oscuro y sombra en las letras para que se lea. */
.tarjeta-fondo { overflow: hidden; background: radial-gradient(ellipse at 50% 55%, rgb(8 6 12 / .18), rgb(4 3 8 / .5)); }
.tarjeta-escena { width: min(420px, 100%); perspective: 1100px; }
.tarjeta-giro { position: relative; transform-style: preserve-3d; will-change: transform; }
.tarjeta { width: 100%; outline: none; text-shadow: 0 1px 12px rgb(0 0 0 / .45);
  background: linear-gradient(150deg, rgb(255 255 255 / .16), rgb(255 255 255 / .05) 50%, rgb(255 255 255 / .1)), rgb(14 10 20 / .58); }
@media (hover: hover) and (pointer: fine) {
  .tarjeta { background: linear-gradient(150deg, rgb(255 255 255 / .14), rgb(255 255 255 / .05) 55%, rgb(255 255 255 / .08)); }
}
/* capa 5: el banner de atrás, una franja cálida con KOOL que asoma por los costados y se corre al revés que la tarjeta */
.tarjeta-banner { position: absolute; left: -24%; right: -24%; top: -7%; height: 15%; z-index: -1; pointer-events: none;
  display: grid; place-items: center; overflow: hidden; border-radius: 22px; rotate: -7deg; translate: 0 0 -70px;
  background: linear-gradient(100deg, rgb(255 120 40 / .78), rgb(255 70 120 / .62) 50%, rgb(110 90 255 / .62));
  box-shadow: 0 20px 60px rgb(255 110 60 / .35); }
.tarjeta-banner span { position: absolute; top: 50%; left: 0; translate: 0 -50%; white-space: nowrap; font: 700 34px/1 var(--display);
  letter-spacing: .06em; text-transform: uppercase; color: rgb(255 255 255 / .9); animation: banner-corre 16s linear infinite; }
@keyframes banner-corre { from { transform: translateX(0); } to { transform: translateX(-33.33%); } }
@media (prefers-reduced-motion: reduce) { .tarjeta-banner span { animation: none; } }
/* capas 1-3: se corren con `translate` (participar.js); los saltos van por transform */
.tarjeta [data-capa] { will-change: translate; }
.tarjeta h2[data-capa="1"] { text-shadow: 0 6px 22px rgb(0 0 0 / .55); }
.puntaje { background: rgb(255 255 255 / .04); }
.puntaje-capa { display: grid; place-items: center; }
.puntaje-num { display: inline-block; font-size: 72px; text-shadow: 0 0 30px rgb(255 214 150 / .45), 0 8px 24px rgb(0 0 0 / .45); transition: color .35s, text-shadow .35s; }
/* solo la elegida se enciende (antes se llenaban todas hasta ella) */
.puntaje-barra i.lleno { background: rgb(255 255 255 / .07); border-color: rgb(255 255 255 / .08); }
.puntaje-barra i.lleno b { color: rgb(255 255 255 / .45); }
.puntaje-barra i { will-change: transform; }
/* los tres caracteres del número: frío (1-5), cálido (6-9) y fuego (10) */
.tarjeta[data-tono="baja"] .puntaje-num { color: #dcecff; text-shadow: 0 0 26px rgb(120 180 255 / .45), 0 8px 24px rgb(0 0 0 / .45); }
.tarjeta[data-tono="baja"] .puntaje-barra i.elegido { background: linear-gradient(180deg, #f2f8ff, #a9cbff); box-shadow: 0 6px 20px rgb(120 170 255 / .4); }
.tarjeta[data-tono="baja"] .puntaje-barra i.elegido b { color: #0d1a2e; }
.tarjeta[data-tono="maxima"] .puntaje-num { color: #fff3c4; text-shadow: 0 0 22px rgb(255 160 40 / .9), 0 0 60px rgb(255 80 40 / .6), 0 8px 24px rgb(0 0 0 / .45); }
.tarjeta[data-tono="maxima"] .puntaje-barra i.elegido { background: linear-gradient(180deg, #fff1a8, #ff8a2a 60%, #ff3d6e); border-color: #fff;
  box-shadow: 0 6px 26px rgb(255 120 40 / .7); }
.tarjeta[data-tono="maxima"] .puntaje-palabra { color: #ffe2a8; font-weight: 600; }
.tarjeta.festejo { animation: tarjeta-festejo 1.1s ease-out; }
@keyframes tarjeta-festejo { 0% { box-shadow: 0 24px 70px rgb(0 0 0 / .45), 0 0 0 0 rgb(255 170 60 / .0); }
  25% { box-shadow: 0 24px 70px rgb(0 0 0 / .45), 0 0 0 6px rgb(255 170 60 / .55), 0 0 80px rgb(255 120 40 / .55); }
  100% { box-shadow: 0 24px 70px rgb(0 0 0 / .45), 0 0 0 0 rgb(255 170 60 / 0); } }
/* las chispas y los papelitos: una capa encima de todo, que no atrapa toques */
.tarjeta-chispas { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; border-radius: inherit; }
.tarjeta-chispas i { position: absolute; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; box-shadow: 0 0 10px currentColor; }
.tarjeta-chispas i.papel { width: 8px; height: 13px; margin: -6px 0 0 -4px; border-radius: 2px; box-shadow: none; }
/* con el teclado abierto (celular): la tarjeta va arriba, en lo que queda de pantalla, más compacta y sin el banner */
.tarjeta-fondo.con-teclado { bottom: auto; place-items: start center; padding-top: 8px; padding-bottom: 8px; }
.tarjeta-fondo.con-teclado .tarjeta { max-height: calc(100% - 4px); padding: 20px 20px 18px; }
.tarjeta-fondo.con-teclado .tarjeta-banner { opacity: 0 !important; }
.tarjeta-fondo.con-teclado .tarjeta h2 { margin-bottom: 10px; font-size: 19px; }
.tarjeta-fondo.con-teclado .puntaje { display: none; }
.tarjeta-fondo.con-teclado .tarjeta-etiqueta { margin-top: 8px; }
.tarjeta-fondo.con-teclado .tarjeta-seguir { margin-top: 12px; min-height: 48px; }
/* con la tarjeta abierta, los textos del cierre se apagan (se leían a través del vidrio) */
.con-tarjeta .final .titulo, .con-tarjeta .final-bloque, .con-tarjeta .final [data-participar], .con-tarjeta .cierre-pista,
.con-tarjeta .final-frase, .con-tarjeta .escena[data-capitulo="final"] .pista { visibility: hidden; }

/* (29/10, vigésima vuelta, Mauro: "acordate que cada una de las animaciones debe tener una guía de cómo usarlas") la pista también
   en la compu (venía de movil.css): con el gesto del mouse y 2-4 palabras; se va cuando la persona lo hizo */
/* ——— la pista: una píldora de vidrio a la altura del pulgar, con el gesto dibujado ——— */
.pista {
  position: absolute; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 2.5svh); translate: -50% 0; z-index: 8;
  display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 16px 0 12px; border-radius: 999px; white-space: nowrap;
  /* (28/10) sin backdrop-filter: desenfocar lo que pasa detrás en cada cuadro es caro en un Android barato; un vidrio más opaco se
     ve casi igual */
  background: rgb(12 9 16 / .78); border: 1px solid rgb(255 255 255 / .14);
  font: 500 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--texto); opacity: 0; pointer-events: none;
}
/* el ícono: un dedo (punto) que hace el gesto del capítulo; movil.js lo anima según data-gesto */
.pista-icono { position: relative; width: 22px; height: 22px; flex: none; }
.pista-icono::before { /* el recorrido del gesto */
  content: ''; position: absolute; inset: 3px; border-radius: 50%; border: 1px dashed rgb(255 255 255 / .35);
}
.pista-icono::after { /* la yema del dedo */
  content: ''; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
  background: var(--tinte, #ffd28a); box-shadow: 0 0 10px var(--tinte, #ffd28a); translate: var(--px, 0) var(--py, 0);
}
.pista[data-gesto="subir"] .pista-icono::before { inset: 2px 9px; border-radius: 6px; }

@media (min-width: 900px) and (orientation: landscape) {
  .pista { bottom: 4.5vh; min-height: 44px; font-size: 13px; padding: 0 20px 0 14px; }
}
.escena[data-capitulo="final"] .pista { opacity: 0 !important; } /* el cierre tiene su pista propia (cierre.js) */
/* (29/10) la guía del puntaje: cómo se usa, chica, se va con el primer toque (participar.js) */
.puntaje-guia { margin: 10px 0 0; font: 400 12px/1.3 var(--display); color: rgb(255 255 255 / .55); animation: guia-late 1.6s ease-in-out infinite; }
@keyframes guia-late { 50% { color: rgb(255 255 255 / .85); } }
@media (prefers-reduced-motion: reduce) { .puntaje-guia { animation: none; } }
.tarjeta-fondo.con-teclado .puntaje-guia { display: none; }