/* ==========================================================================
   laminas/02-golpe.css : lo propio de las laminas 03, 04 y 05

   Son las tres laminas del golpe. Aqui solo esta lo que components.css no
   cubre.

   Tres piezas:

   1. .ice    El reparto de la lamina 03. Arriba de la linea de flotacion una
              sola caja, debajo ocho. El volumen de cada lado es el argumento.
              Antes esto era un iceberg dibujado con degradados y una frase
              encima, y un dibujo con una frase no dice nada.
   2. .enf    Dos barras enfrentadas sobre un mismo eje. Es una pieza
              GENERICA, sin nada de METR dentro: la lamina 11 la vuelve a
              usar tal cual, con otras cifras, y ese eco es el recurso
              narrativo de la ponencia. Los valores entran por --h, --w y
              --to en el propio marcado. La captura de prensa que acompaña a
              la 04 vive aparte, en .met, para que la pieza siga siendo
              generica.
   3. .nv     La lamina 05. El caso, el nueve y la palabra como una sola
              unidad tipografica, la cadena de cuatro pasos que se enciende
              mientras el reloj corre, la captura real de prensa que sirve de
              evidencia desde el primer fotograma y la banda de abajo con lo
              que costo.

   TRES REGLAS QUE SE RESPETAN EN TODA LA HOJA

   a. El estado BASE de cada elemento es el estado FINAL de su animacion, y
      las animaciones solo escriben el arranque con un fotograma "from". Asi
      el PDF, el modo sin movimiento y cualquier navegador que no anime
      muestran la lamina terminada en vez de una lamina en blanco.
   b. Nada queda atenuado. Ningun elemento termina su animacion por debajo de
      opacidad 1 ni a mitad de una cuenta. Una animacion que esconde una
      prueba es peor que no tener animacion.
   c. Nada por debajo de 18 pixeles y ningun gris mas claro que --text-dim.
      Se proyecta con videobeam: --text-faint se lava y desaparece desde la
      tercera fila, asi que no se usa en ninguna de estas tres laminas. Las
      versalitas pequeñas van sin letterspacing, que a ese tamaño solo
      deshace las palabras.

   Todo cuelga de .slide.is-active para que el ciclo vuelva a empezar cada
   vez que se entra a la lamina, que es como funciona el motor.
   ========================================================================== */

/* Numero entero animable, para que las cifras cuenten con CSS y sin tocar
   deck.js. Si el navegador no lo soporta, la cifra se queda en su valor
   final, que es justo lo que hay que leer. */
@property --nv-n {
  syntax: "<integer>";
  inherits: false;
  initial-value: 9;
}

/* ══════════════════════════════════════════════════════════════════════════
   03  El reparto

   Arriba de la linea de flotacion va UNA caja: escribir la peticion. Debajo
   van ocho, y la rejilla se estira hasta el borde inferior de la lamina a
   proposito. Ese desequilibrio de area es el argumento entero, y se lee de
   un vistazo desde cualquier fila sin leer una sola palabra.

   Sin sombra de tarjeta en ninguna pieza: esto es un diagrama, no una
   coleccion de tarjetas flotando.
   ══════════════════════════════════════════════════════════════════════════ */

.body-area.ice-area {
  justify-content: flex-start;
}

/* La etiqueta de cada mitad. Versalita, pero a 18px y sin letterspacing:
   proyectada, el espaciado a ese tamaño separa las letras antes que las
   palabras y deja de leerse. */
/* El !important no es capricho. base.css trae una regla de piso pensada para
   subir las etiquetas de 10 y 11 pixeles que habia en los diagramas, pero esta
   escrita como .slide [class*="-eti"] { font-size: 14px !important }, y eso no
   es un piso: es un techo que aplasta a 14 cualquier clase que termine en
   -eti, esta incluida. Proyectado, 14 pixeles no se leen desde la fila quince.
   Como esa hoja no se toca desde aqui, se contrarresta con la misma
   especificidad y mas abajo en la cascada. */
.slide .ice-eti {
  display: block;
  font-family: var(--font-mono);
  font-size: 18px !important;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 13px;
}

/* ── Sobre el agua ───────────────────────────────────────────────────────
   La caja a la izquierda y la cita a la derecha, en la misma banda. La cita
   ocupa el hueco que dejaba la caja sola, que es ancha de menos para llenar
   la lamina y tiene que seguir siendolo: si creciera, dejaria de leerse como
   la parte pequeña del reparto. */
.ice-sobre {
  flex: none;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 50px;
}

.ice-arriba { flex: none; }

/* El borde de acento marca que esto es lo unico que se hace a mano. Sin
   sombra: el resto del diagrama tampoco la lleva. */
.ice-caja {
  display: inline-flex;
  align-items: center;
  min-height: 64px;
  padding: 0 32px;
  background: var(--surface);
  border: 2px solid var(--accent);
  border-radius: var(--r);
  font-family: var(--font-display);
  font-size: 23px;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--text);
}

/* La cita hereda .quote de components.css, que es la pieza con barra lateral
   de acento, la misma que lleva la cita de Thompson en la lamina 13. Aqui
   solo cambian el sitio y el tamaño. El termino va en negrita encima, porque
   la frase define una palabra y la palabra tiene que verse antes. */
.ice-cita {
  flex: none;
  max-width: 520px;
  font-size: 25px;
  line-height: 1.34;
  padding-left: 22px;
}

.ice-cita b {
  display: block;
  font-family: var(--font-mono);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--accent);
  margin-bottom: 9px;
}

/* .quote .who viene en --text-faint, a 12px y con letterspacing de versalita.
   Los tres valores se caen proyectados, asi que aqui se rehace entera. */
.ice-cita .who {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-dim);
  margin-top: 14px;
}

/* ── La linea de flotacion ───────────────────────────────────────────────
   Es el eje de la lamina. La etiqueta va al final de la linea y la linea se
   detiene antes de ella, en vez de pasarle por debajo con un parche del
   color del fondo: el fondo del deck lleva una reticula y el parche se veria.
   ────────────────────────────────────────────────────────────────────── */
.ice-agua {
  flex: none;
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 26px 0 24px;
}

.ice-agua::before {
  content: "";
  flex: 1;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  transform-origin: left center;
}

.ice-agua span {
  flex: none;
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ── Debajo del agua ─────────────────────────────────────────────────────
   La rejilla se come todo lo que queda de lamina. No es que sobre sitio: es
   que el sitio que ocupa ES el dato. */
.ice-bajo {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.ice-rej {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr;
  gap: 14px;
}

/* Tintadas de azul muy claro, a diferencia de la caja de arriba, que es
   blanca. Asi las ocho se leen como UNA masa sumergida y no como ocho
   tarjetas sueltas, y el contraste de volumen con la caja de arriba se ve
   antes de leer una sola palabra. */
.ice-rej span {
  display: flex;
  align-items: center;
  padding: 12px 18px;
  background: rgba(9, 105, 218, 0.07);
  border: 1px solid rgba(9, 105, 218, 0.22);
  border-radius: var(--r-sm);
  font-size: 20px;
  line-height: 1.26;
  color: var(--text);
}

:root[data-theme="dark"] .ice-rej span {
  background: rgba(88, 166, 255, 0.10);
  border-color: rgba(88, 166, 255, 0.26);
}

/* Las ocho entran una detras de otra, rapido, y en 1.3s esta todo puesto. El
   goteo es lo que hace sentir que debajo hay mas de lo que uno pensaba, pero
   no puede durar: mientras dure, la lamina esta contando una cifra falsa. */
@keyframes iceSube { from { opacity: 0; transform: translate3d(0, 16px, 0); } }
@keyframes iceLinea { from { transform: scaleX(0); } }

.slide.is-active .ice-arriba    { animation: iceSube 0.52s cubic-bezier(0.22, 1, 0.36, 1) 0.16s both; }
.slide.is-active .ice-cita      { animation: iceSube 0.52s cubic-bezier(0.22, 1, 0.36, 1) 0.30s both; }
.slide.is-active .ice-agua::before { animation: iceLinea 0.60s cubic-bezier(0.22, 1, 0.36, 1) 0.34s both; }
.slide.is-active .ice-rej span  { animation: iceSube 0.40s cubic-bezier(0.22, 1, 0.36, 1) both; }

.slide.is-active .ice-rej span:nth-child(1) { animation-delay: 0.52s; }
.slide.is-active .ice-rej span:nth-child(2) { animation-delay: 0.60s; }
.slide.is-active .ice-rej span:nth-child(3) { animation-delay: 0.68s; }
.slide.is-active .ice-rej span:nth-child(4) { animation-delay: 0.76s; }
.slide.is-active .ice-rej span:nth-child(5) { animation-delay: 0.84s; }
.slide.is-active .ice-rej span:nth-child(6) { animation-delay: 0.92s; }
.slide.is-active .ice-rej span:nth-child(7) { animation-delay: 1.00s; }
.slide.is-active .ice-rej span:nth-child(8) { animation-delay: 1.08s; }

/* ══════════════════════════════════════════════════════════════════════════
   04 y 11  Dos barras enfrentadas sobre un mismo eje

   Pieza reutilizable. Nada de lo que hay aqui menciona METR ni porcentajes:
   la lamina 11 repite esta misma forma a proposito.

   Marcado esperado:

     <div class="enf">
       <div class="enf-arriba">
         <span class="enf-eti">...</span>
         <span class="enf-cifra" style="--to:20"><i class="sg">+</i><i class="nm"></i><i class="pc">%</i></span>
         <span class="enf-barra" style="--h:124px"></span>
       </div>
       <div class="enf-eje"></div>
       <div class="enf-abajo">
         <span class="enf-barra" style="--h:118px"></span>
         <span class="enf-cifra" style="--to:19"><i class="sg">-</i><i class="nm"></i><i class="pc">%</i></span>
         <span class="enf-eti">...</span>
       </div>
     </div>

   LAS CIFRAS NO CUENTAN. Antes subian de cero a su valor en casi un segundo,
   y durante ese segundo la lamina proyectaba cifras que no existen mientras
   el expositor decia la verdadera. Un numero mal leido por la sala no se
   arregla despues. Ahora estan completas desde el primer fotograma y lo unico
   que se mueve es la barra, que es donde el movimiento significa algo.

   La etiqueta y la cifra viajan pegadas al extremo de su barra mientras
   crece, que es contiguidad espacial en movimiento: nunca hay que buscar a
   que barra pertenece cada numero.
   ══════════════════════════════════════════════════════════════════════════ */

.body-area.enf-area { justify-content: center; }

.enf { display: flex; flex-direction: column; }

.enf-arriba,
.enf-abajo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

/* Las dos mitades llevan alto fijo. Si no lo llevaran, la barra al crecer
   empujaria al eje y el eje es justo lo unico que no se puede mover: sin un
   eje quieto las dos barras dejan de estar enfrentadas. */
.enf-arriba { height: var(--sup, 236px); justify-content: flex-end; }
.enf-abajo  { height: var(--inf, 229px); justify-content: flex-start; }

/* El eje va en el gris de texto de cuerpo y no en el de los bordes. Es la
   referencia que separa lo que sube de lo que cae, asi que tiene que seguir
   ahi cuando el proyector se coma los tonos suaves. */
.enf-eje {
  height: 2px;
  background: var(--text-dim);
  border-radius: 2px;
  transform-origin: left center;
}

/* Mismo caso que .ice-eti: base.css la aplastaba a 14 pixeles. Lo que
   nombra cada barra tiene que leerse, o las barras no dicen nada. */
.slide .enf-eti {
  font-size: 19px !important;
  letter-spacing: 0;
  color: var(--text-dim);
  white-space: nowrap;
}

.enf-cifra {
  counter-reset: enfc var(--to, 0);
  font-family: var(--font-display);
  font-size: 56px;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: baseline;
}

.enf-cifra i { font-style: normal; }
.enf-cifra .nm::after { content: counter(enfc); }
.enf-cifra .sg { margin-right: 2px; }
.enf-cifra .pc { font-size: 0.56em; margin-left: 3px; font-weight: 600; }

.enf-barra {
  flex: none;
  width: var(--w, 132px);
  height: var(--h, 140px);
  display: block;
}

.enf-eti, .enf-cifra { flex: none; }

/* Lo que se siente, en el azul de la casa. Lo medido, en rojo. El color no
   es decoracion: es la unica pista de cual de las dos duele. */
.enf-arriba .enf-cifra { color: var(--accent); }
.enf-arriba .enf-barra {
  border-radius: 10px 10px 0 0;
  background: linear-gradient(180deg, var(--accent-br), var(--accent));
}

.enf-abajo .enf-cifra { color: var(--danger); }
.enf-abajo .enf-barra {
  border-radius: 0 0 10px 10px;
  background: var(--danger);
}

@keyframes enfEje   { from { transform: scaleX(0); } }
@keyframes enfEntra { from { opacity: 0; } }
@keyframes enfCrece { from { height: 0; } }

/* Toda la secuencia termina a los 2.3 segundos. Primero sube la de arriba,
   rapida y optimista. Se sostiene un momento. Y entonces aparece la de abajo
   y cae hacia el otro lado, que es el unico gesto que hay que entender. */
.slide.is-active .enf-eje    { animation: enfEje 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.22s both; }
.slide.is-active .enf-arriba { animation: enfEntra 0.32s ease-out 0.38s both; }

.slide.is-active .enf-arriba .enf-barra {
  animation: enfCrece 0.60s cubic-bezier(0.16, 1, 0.30, 1) 0.55s both;
}

.slide.is-active .enf-abajo { animation: enfEntra 0.32s ease-out 1.45s both; }
.slide.is-active .enf-abajo .enf-barra {
  animation: enfCrece 0.70s cubic-bezier(0.50, 0, 0.20, 1) 1.60s both;
}

/* ── 04  La captura de METR en el flanco izquierdo ───────────────────────
   Una sola columna de barras centrada dejaba casi quinientos pixeles muertos
   a cada lado. Ahi entra la captura de la propia pagina del estudio: el
   titulo, el resumen donde se lee el 19 por ciento y la nota de febrero de
   2026. No hace falta leerla desde la fila quince; hace falta que la sala vea
   que la cifra tiene una pagina detras.

   El recorte lo hace el marco y no el archivo. La relacion 2100 por 1180 ES
   el encuadre: cambiarla mueve el corte y no hay que tocar nada mas. La
   imagen entra un 14% mas ancha que el marco y corrida a la izquierda, para
   quitarle el aire de los margenes de la pagina y que el titulo llegue al
   tamaño en que se lee. */
.body-area.met-area { justify-content: center; }

.met-grid {
  display: grid;
  grid-template-columns: 1fr 352px;
  gap: 46px;
  align-items: center;
}

.met-grid .enf { --sup: 224px; --inf: 218px; }

.met-nota { margin: 0; min-width: 0; }

.met-marco {
  position: relative;
  aspect-ratio: 2100 / 1180;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: #FFFFFF;
}

.met-marco img {
  position: absolute;
  top: 0;
  left: -2.86%;
  width: 114.29%;
  display: block;
}

.met-pie {
  margin-top: 12px;
  font-size: 18px;
  line-height: 1.35;
  color: var(--text-dim);
  padding-left: 14px;
  border-left: 3px solid var(--accent);
}

/* El ajuste de febrero de 2026. Va con filete rojo y no azul porque es la
   linea que dice que el propio estudio se corrige, y esa es la parte que le
   suma credibilidad en vez de quitarsela. */
.met-ajuste {
  flex: none;
  margin-top: 16px;
  font-size: 18px;
  line-height: 1.4;
  color: var(--text-dim);
  padding-left: 14px;
  border-left: 3px solid var(--danger);
}

@keyframes metEntra { from { opacity: 0; transform: translate3d(-18px, 0, 0); } }

.slide.is-active .met-nota   { animation: metEntra 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.10s both; }
.slide.is-active .met-ajuste { animation: enfEntra 0.45s ease-out 2.20s both; }

/* ══════════════════════════════════════════════════════════════════════════
   05  Nueve segundos

   La lamina tiene cuatro piezas y cada una hace un trabajo distinto.

   .nv-izq    El caso, el reloj y la cadena. Arriba el nombre de la empresa
              afectada, a cuerpo de informacion principal. Debajo el reloj,
              que corre de verdad. Debajo la cadena de cuatro pasos, que se
              enciende mientras corre.
   .nv-nota   La captura de prensa. Titular real de Hackread, en pantalla
              desde el primer fotograma: el numero 9 solo no cuenta la
              historia y una catastrofe que se afirma sin prueba a la vista
              no es una catastrofe, es una anecdota.
   .nv-saldo  Lo que costo. Cruza la lamina entera por debajo de las dos
              columnas, que es donde antes quedaba aire muerto.

   EL NUEVE Y LA PALABRA SON UNA SOLA UNIDAD. Antes eran dos objetos: un
   nueve de 150 pixeles y la palabra "segundos" en gris de 14 debajo. Desde
   el fondo del salon se leia "9" a secas, que no es un dato. Ahora van en la
   misma linea, sobre la misma base y en el mismo color, y se leen de corrido.

   Las cifras las escribe CSS con un contador, asi que el marcado no lleva ni
   un digito suelto y el estado base es el final: si el navegador no anima,
   se lee nueve.
   ══════════════════════════════════════════════════════════════════════════ */

.body-area.nueve { justify-content: center; }

.nv-grid {
  display: grid;
  grid-template-columns: 58fr 42fr;
  gap: 40px;
  align-items: start;
}

.nv-izq { min-width: 0; }

/* La columna de la derecha: el titular y, debajo, la cadena. Con la captura ya
   reducida a una tira, la cadena ocupa el hueco que quedaba debajo de ella y
   el que quedaba entre las dos columnas. Se reacomodo asi, en vez de agrandar
   nada para rellenar. */
.nv-der { min-width: 0; }

/* ── El nombre del caso ────────────────────────────────────────────────── */
.nv-caso { margin-bottom: 18px; }

.nv-marca {
  display: block;
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--text);
}

/* Versalita a 18px y sin letterspacing. A 14.5 y con 0.15em de espaciado no
   era una linea de texto, era una fila de letras sueltas. */
.nv-giro {
  display: block;
  margin-top: 9px;
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* ── El reloj ────────────────────────────────────────────────────────────
   Una sola linea: el digito y la palabra, misma base, mismo color, sin nada
   entre ellos. El digito sale de un contador animado, de modo que el estado
   base ya es el nueve y la animacion solo escribe el arranque en cero.

   El color base es el rojo porque es donde termina: cuando el reloj para, el
   daño ya ocurrio. Durante los nueve segundos va en azul, y el cambio llega
   justo al detenerse. */
.nv-seg {
  --nv-n: 9;
  counter-reset: nvs var(--nv-n);
  margin-bottom: 0;
  font-family: var(--font-display);
  font-size: 78px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  white-space: nowrap;
  color: var(--danger);
  font-variant-numeric: tabular-nums;
}

.nv-seg .nv-n {
  font-style: normal;
  font-size: 2.95em;
  letter-spacing: -0.05em;
  /* El espacio de la palabra, a cuerpo del digito y no del texto: sin esto el
     nueve y la ese se tocan y la unidad deja de leerse como una sola cosa. */
  margin-right: 0.10em;
}

.nv-seg .nv-n::after { content: counter(nvs); }

/* ── La cadena ───────────────────────────────────────────────────────────
   Los cuatro pasos comparten un rail de 2px formado por sus propios bordes
   izquierdos, asi que al encenderse uno detras de otro el rail se va
   llenando de arriba hacia abajo sin ningun elemento de mas. */
.nv-cadena { list-style: none; margin-top: 34px; }

.nv-paso {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 40px;
  padding-left: 26px;
  margin-left: 6px;
  border-left: 2px solid var(--accent);
  font-size: 19px;
  line-height: 1.3;
  color: var(--text);
}

.nv-paso::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 50%;
  margin-top: -7px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: currentColor;
}

/* El ultimo paso es la instruccion que borro todo. Va en rojo porque es el
   unico de los cuatro que hace daño. */
.nv-paso.fatal { color: var(--danger); border-left-color: var(--danger); }

.nv-paso code {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 650;
  letter-spacing: 0.01em;
  color: inherit;
  padding: 4px 11px;
  border-radius: 8px;
  border: 1px solid currentColor;
  background: var(--surface);
}

/* ── La captura de prensa ────────────────────────────────────────────────
   Solo el titular. Antes entraba la pagina con la barra de navegacion y la
   ilustracion, ocupaba mas que el dato y el nueve tenia que competir con ella.
   Ahora la imagen es tit-pocketos.png, ya recortada al titular, y el marco
   tiene su misma proporcion, 2400 por 435, medida en el archivo. La columna es
   el 42 por ciento de la lamina y la del nueve el 58: la captura es la prueba
   y no el foco. Cambiado el 25 de septiembre de 2026. */
.nv-nota { margin: 0; min-width: 0; }

/* El titular va limpio, en tit-pocketos-limpio.png: las dos bandas verdes
   de Hackread sobre blanco, sin la franja de la ilustracion que asomaba a
   la derecha ni los restos de la linea de arriba. El original sigue en
   tit-pocketos.png. Medido: 2180 por 423. */
.nv-marco {
  position: relative;
  aspect-ratio: 2180 / 423;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: #FFFFFF;
}

.nv-marco img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: block;
}

.nv-pie {
  margin-top: 12px;
  font-size: 21px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--text);
  padding-left: 14px;
  border-left: 3px solid var(--accent);
}

/* ── La banda de abajo ───────────────────────────────────────────────────
   Entra cuando el reloj para, y es lo que queda proyectado mientras se sigue
   hablando. El filete rojo de arriba la amarra al ultimo paso de la cadena.
   Cruza la lamina entera: debajo de la cadena no puede quedar aire. */
.nv-saldo {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 2px solid var(--danger);
}

/* La frase del expositor, a la derecha de las cifras y en el rojo del paso
   fatal. Cuerpo de cita y no de rotulo: es el remate de la lamina. */
.nv-frase {
  flex: 1 1 auto;
  max-width: 560px;
  text-align: right;
  font-family: var(--font-display);
  font-size: 27px;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--danger);
}

.nv-dano {
  flex: none;
  max-width: 360px;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--danger);
}

.nv-dato {
  flex: none;
  display: flex;
  align-items: baseline;
  gap: 9px;
}

.nv-dato b {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--text);
}

.nv-dato span {
  font-size: 20px;
  line-height: 1.2;
  color: var(--text);
  white-space: nowrap;
}

/* ── La secuencia ────────────────────────────────────────────────────────
   Cuatro movimientos y ninguno decorativo. El caso llega primero, la cadena
   se escribe en los primeros cuatro segundos y medio, el reloj corre nueve
   segundos reales y al pararse cambia de color y entra el saldo. La captura
   de prensa NO se anima: es la prueba, y la prueba esta desde el primer
   fotograma. Todo termina visible y a plena opacidad. */
@keyframes nvEntra    { from { opacity: 0; transform: translate3d(0, 12px, 0); } }
@keyframes nvEnciende { from { opacity: 0; transform: translate3d(-12px, 0, 0); } }
@keyframes nvCuenta   { from { --nv-n: 0; } }
@keyframes nvRojo     { 0%, 92% { color: var(--accent); } to { color: var(--danger); } }

.slide.is-active .nv-caso { animation: nvEntra 0.50s cubic-bezier(0.22, 1, 0.36, 1) 0.12s both; }

/* Nueve saltos en nueve segundos. El cero se ve al arrancar y el nueve entra
   exactamente nueve segundos despues, a los 9.45s de entrar la lamina. */
.slide.is-active .nv-seg {
  animation: nvCuenta 9s steps(9, end) 0.45s both,
             nvRojo 9.45s linear 0.45s both;
}

.slide.is-active .nv-paso { animation: nvEnciende 0.42s cubic-bezier(0.22, 1, 0.36, 1) both; }
.slide.is-active .nv-paso:nth-child(1) { animation-delay: 0.90s; }
.slide.is-active .nv-paso:nth-child(2) { animation-delay: 2.00s; }
.slide.is-active .nv-paso:nth-child(3) { animation-delay: 3.10s; }
.slide.is-active .nv-paso:nth-child(4) { animation-delay: 4.20s; }

/* El reloj para en 9.45s y el saldo entra justo detras */
.slide.is-active .nv-saldo { animation: nvEntra 0.60s cubic-bezier(0.22, 1, 0.36, 1) 9.55s both; }
.slide.is-active .nv-frase { animation: nvEntra 0.60s cubic-bezier(0.22, 1, 0.36, 1) 10.60s both; }

/* ══════════════════════════════════════════════════════════════════════════
   Sin movimiento y en papel

   El estado base de todo lo de arriba ya es el estado final, asi que basta
   con apagar las animaciones para que la lamina se lea entera. En la 05 eso
   significa el reloj detenido en nueve y en rojo, la cadena encendida y el
   saldo puesto, que es exactamente lo que queda proyectado en vivo.
   ══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .slide.is-active .ice-arriba,
  .slide.is-active .ice-cita,
  .slide.is-active .ice-agua::before,
  .slide.is-active .ice-rej span,
  .slide.is-active .enf-eje,
  .slide.is-active .enf-arriba,
  .slide.is-active .enf-abajo,
  .slide.is-active .enf-barra,
  .slide.is-active .met-nota,
  .slide.is-active .met-ajuste,
  .slide.is-active .nv-caso,
  .slide.is-active .nv-seg,
  .slide.is-active .nv-paso,
  .slide.is-active .nv-saldo,
  .slide.is-active .nv-frase {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

@media print {
  .ice-arriba, .ice-cita, .ice-agua::before, .ice-rej span,
  .enf-eje, .enf-arriba, .enf-abajo, .enf-barra,
  .met-nota, .met-ajuste,
  .nv-caso, .nv-seg, .nv-paso, .nv-saldo, .nv-frase {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .nv-paso code { background: #FFFFFF !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   03 El iceberg, rehecho el 25 de septiembre por la noche. Las reglas .ice-*
   de arriba que ya no se usan (.ice-sobre, .ice-arriba, .ice-agua, .ice-bajo,
   .ice-eti) quedan sin efecto y no se borran. Estas cuelgan de .ice-escena
   para ganarles en especificidad.
   ══════════════════════════════════════════════════════════════════════════ */
.ice-area { justify-content: center; }

.ice-escena {
  position: relative;
  flex: none;
  width: 1112px;
  height: 480px;
}

.ice-escena .ice-svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: visible; }

/* La unica caja de arriba, apoyada en la punta */
.ice-escena .ice-caja {
  position: absolute;
  left: 321px;
  top: 76px;
  width: 224px;
  height: auto;
  margin: 0;
  padding: 11px 0;
  display: flex;
  justify-content: center;
  text-align: center;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
  color: #1F2328;
  background: #FFFFFF;
  border: 2px solid var(--accent);
  border-radius: 10px;
  box-shadow: 0 10px 22px -12px rgba(9, 50, 90, 0.5);
}

/* La cita, arriba a la derecha y fuera del agua */
.ice-escena .ice-cita {
  position: absolute;
  left: 660px;
  top: 0;
  width: 452px;
  margin: 0;
  padding-left: 18px;
  border-left: 3px solid var(--accent);
  font-size: 22px;
  line-height: 1.32;
  color: var(--text);
}

.ice-escena .ice-cita b {
  display: block;
  font-size: 19px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 4px;
}

.ice-escena .ice-cita .who {
  display: block;
  margin-top: 6px;
  font-family: var(--font-display);
  font-size: 17px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-dim);
}

/* Las ocho cajas, en rejilla dentro de la masa sumergida. Blancas sobre el
   agua oscura: es el mayor contraste posible en un proyector. */
.ice-escena .ice-rej {
  position: absolute;
  left: 118px;
  top: 214px;
  width: 876px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 88px;
  gap: 18px 16px;
}

.ice-escena .ice-rej span {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  text-align: center;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
  color: #1F2328;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(255, 255, 255, 1);
  border-radius: 10px;
  box-shadow: 0 8px 18px -12px rgba(0, 20, 40, 0.6);
}

/* ── La secuencia ────────────────────────────────────────────────────────
   0,2 s   la punta, la linea del agua, la caja de arriba y la cita
   1,2 s   se aclara lo sumergido
   1,6 s   las ocho cajas, una cada 0,22 s, hasta los 3,2 s
   Todo termina visible. */
@keyframes iceNace  { from { opacity: 0; transform: translate3d(0, 10px, 0); } to { opacity: 1; transform: none; } }
@keyframes iceAclara { from { opacity: 0.12; } to { opacity: 1; } }

.slide.is-active .ice-escena .ice-punta,
.slide.is-active .ice-escena .ice-caja   { animation: iceNace 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both; }
.slide.is-active .ice-escena .ice-cita   { animation: iceNace 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.5s both; }
.slide.is-active .ice-escena .ice-masa   { animation: iceAclara 0.9s ease-out 1.2s both; }
.slide.is-active .ice-escena .ice-rej span { animation: iceNace 0.4s cubic-bezier(0.22, 1, 0.36, 1) both; }
.slide.is-active .ice-escena .ice-rej span:nth-child(1) { animation-delay: 1.60s; }
.slide.is-active .ice-escena .ice-rej span:nth-child(2) { animation-delay: 1.82s; }
.slide.is-active .ice-escena .ice-rej span:nth-child(3) { animation-delay: 2.04s; }
.slide.is-active .ice-escena .ice-rej span:nth-child(4) { animation-delay: 2.26s; }
.slide.is-active .ice-escena .ice-rej span:nth-child(5) { animation-delay: 2.48s; }
.slide.is-active .ice-escena .ice-rej span:nth-child(6) { animation-delay: 2.70s; }
.slide.is-active .ice-escena .ice-rej span:nth-child(7) { animation-delay: 2.92s; }
.slide.is-active .ice-escena .ice-rej span:nth-child(8) { animation-delay: 3.14s; }

:root[data-theme="dark"] .ice-escena .ice-rej span {
  color: #1F2328;
  background: rgba(255, 255, 255, 0.94);
  border-color: #FFFFFF;
}

@media (prefers-reduced-motion: reduce) {
  .slide.is-active .ice-escena .ice-punta, .slide.is-active .ice-escena .ice-caja,
  .slide.is-active .ice-escena .ice-cita, .slide.is-active .ice-escena .ice-masa,
  .slide.is-active .ice-escena .ice-rej span { animation: none !important; opacity: 1 !important; transform: none !important; }
}

@media print {
  .ice-escena .ice-punta, .ice-escena .ice-caja, .ice-escena .ice-cita,
  .ice-escena .ice-masa, .ice-escena .ice-rej span { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* 04: las dos lineas de fuente al color de texto y a cuerpo de lectura.
   En gris el videobeam las lavaba. 25 de septiembre por la noche. */
.enf-area .met-nota figcaption, .met-nota figcaption { color: var(--text); font-size: 21px; font-weight: 500; }
.met-ajuste { color: var(--text); font-size: 21px; font-weight: 500; }

/* 05: el logo de PocketOS, del sitio oficial pocketos.ai. Viene sobre negro
   opaco, asi que va como insignia redondeada al lado del nombre, que sigue
   siendo el que manda. */
.nv-caso { display: flex; align-items: center; gap: 20px; }
.nv-caso-tx { display: flex; flex-direction: column; }
.nv-logo { height: 64px; width: auto; border-radius: 12px; display: block; box-shadow: 0 10px 22px -14px rgba(0, 0, 0, 0.6); }

/* 04: la franja de 2026, debajo de la de 2025. Verde porque es la mejora,
   y entra despues de las barras, cuando ya se dijo lo de 2025. */
.met-2026 {
  flex: none;
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 16px;
  padding: 12px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--ok);
  border-radius: 12px;
}
.m26-a { font-family: var(--font-mono); font-size: 18px; font-weight: 700; color: var(--text); padding: 4px 10px; border: 1px solid var(--line); border-radius: 8px; }
.m26-n { font-family: var(--font-display); font-size: 44px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: var(--ok); }
.m26-l { font-size: 21px; font-weight: 600; color: var(--text); }
.m26-t { margin-left: auto; max-width: 560px; font-size: 19px; line-height: 1.3; color: var(--text); text-align: right; }
@keyframes m26Entra { from { opacity: 0; transform: translate3d(0, 12px, 0); } to { opacity: 1; transform: none; } }
.slide.is-active .met-2026 { animation: m26Entra 0.6s cubic-bezier(0.22, 1, 0.36, 1) 3.2s both; }
@media (prefers-reduced-motion: reduce) { .slide.is-active .met-2026 { animation: none !important; opacity: 1 !important; transform: none !important; } }
@media print { .met-2026 { animation: none !important; opacity: 1 !important; transform: none !important; } }
/* 04 con la franja de 2026: la captura se recorta por abajo (la nota de
   actualizacion de la pagina la reemplaza la franja) y las barras bajan un
   poco, para que la franja respire y no parta en dos lineas. */
.met-marco { aspect-ratio: 2100 / 1000; }
.met-grid .enf { --sup: 196px; --inf: 190px; }
.met-grid .enf .enf-arriba .enf-barra { --h: 104px !important; }
.met-grid .enf .enf-abajo .enf-barra { --h: 99px !important; }
.met-2026 { margin-top: 26px; padding: 14px 22px; }
.m26-l { white-space: nowrap; }
.m26-t { max-width: 600px; text-align: left; }
.met-marco { aspect-ratio: 2100 / 975; }
/* El logo completo era un bloque negro que competia con el nombre. Queda
   solo el escudo, sin fondo, del alto del nombre y su giro. */
.nv-logo { height: 92px; border-radius: 0; box-shadow: none; }
.nv-caso { gap: 16px; }

/* METR: la jerarquia al reves de antes. Lo que sintieron es una impresion,
   asi que va tenue: cifra chica, barra en contorno punteado. Lo que se
   midio es el dato real y manda: cifra grande, barra solida. Pedido el 25
   de septiembre por la noche. Solo en la lamina de METR, la .enf de la de
   BairesDev no se toca. */
.met-grid .enf-arriba .enf-cifra { font-size: 40px; color: #5B8FD4; opacity: 0.85; }
.met-grid .enf-arriba .enf-barra {
  background: rgba(9, 105, 218, 0.07);
  border: 3px dashed rgba(9, 105, 218, 0.45);
  border-bottom: none;
  box-sizing: border-box;
}
.met-grid .enf-arriba .enf-eti { color: var(--text-dim); font-size: 19px; }
.met-grid .enf-abajo .enf-cifra { font-size: 84px; font-weight: 800; }
.met-grid .enf-abajo .enf-eti { color: var(--text); font-size: 24px; font-weight: 700; }
.met-grid .enf-abajo .enf-barra { box-shadow: 0 16px 32px -16px rgba(207, 34, 41, 0.55); }
.met-grid .enf-abajo .enf-cifra { font-size: 74px; }