/* ═══════════════════════════════════════════════════════════════════════
   TintoAI — Hoja de estilo del SITIO · v2.0 · agosto de 2026
   Rediseño minimalista · escena 1: la taza ASCII.
   Modo primario: OSCURO. Fuentes autoalojadas en assets/fonts/.
   ═══════════════════════════════════════════════════════════════════════ */

@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:300 700;
  font-display:swap;src:url('../fonts/space-grotesk-latin.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;
  font-display:swap;src:url('../fonts/inter-latin.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:100 800;
  font-display:swap;src:url('../fonts/jetbrains-mono-latin.woff2') format('woff2')}

:root{
  --negro:#0C0A09; --carbon:#14110F; --grafito:#1D1916;
  --borde:#2A2420; --borde-2:#3A322C;
  --txt:#F4EFE9; --txt-2:#A79A8E; --txt-3:#6F655C;
  --tueste:#D9722F; --tueste-cl:#F0904A; --dorado:#E0AE52; --tinto:#7A3F22;
  --display:'Space Grotesk',-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  /* Los titulares del dominio · fallo de David del 22 de agosto: la
     monoespaciada toma los encabezados. Es la cara que ya sostiene el
     polvo, la taza y toda la evidencia citada, y el titular deja de
     hablar en un registro distinto al del resto de la página.
     El logotipo conserva --display hasta que haya fallo sobre la firma. */
  --titular:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  /* La monoespaciada avanza 26,8 % más ancho por carácter. Para que el
     titular conserve su huella —tres líneas, y el clon del gesto de IA
     en una sola— la ficha lleva la equivalencia óptica de la familia.
     La ESCALA del kit no cambia: cambia la cara, y este es su cambio de
     unidad. Medido: el clon queda en 958 px contra los 947 de antes. */
  --titular-optico:.79;
  /* ── El marco vertical del dominio · 23 de agosto de 2026 ──────────
     La pregunta de cada sección se cuelga SIEMPRE del mismo píxel, y el
     instrumento se centra en el campo que queda debajo. Antes cada
     escena se centraba entera y la pregunta viajaba 164 px entre una y
     otra —reloj 142, orden 220, costo 306—: la página carecía de marco.
     El aire entre piezas deja de ser un valor suelto por escena. */
  --percha:150px;
  --campo:calc(var(--percha) + 64px);
  --aire-bloque:40px;
  /* el espejo de la percha: la door de la escena se ancla a esta
     distancia del pie, y el bloque principal se centra ENTRE las dos.
     Antes la door iba pegada a la frase (40 px) y la frase colgaba
     215 px por debajo de la pregunta: 87 px de desfase medido. */
  --umbral:150px;
  /* lo que la esfera del reloj puede medir sin desbordar: la pantalla
     menos el marco —percha con su pregunta, aire, remate y pie— */
  --alto-esfera:calc(100svh - var(--campo) - 141px);
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --curva:cubic-bezier(.22,1,.36,1);
  --t-rapido:160ms; --t-normal:240ms; --t-nivel:1200ms;
  /* ── Escala tipográfica del dominio · única fuente de verdad ──
     Extiende el manual de marca (entregables: h1 30-44 · h2 21-27 ·
     texto 16) a pantalla completa. TODA página del dominio usa
     estas fichas; cero tamaños sueltos. */
  --tipo-h1:clamp(30px,4.6vw,58px);
  --tipo-h2:clamp(22px,3vw,38px);
  --tipo-h3:clamp(18px,2vw,23px);
  --tipo-cuerpo:clamp(15.5px,1.4vw,17.5px);
  --tipo-cita:14px;
  --tipo-nota:12.5px;
  --tipo-etiqueta:10.5px;
  --tipo-rotulo:9.5px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{height:100%}
body{margin:0;background:var(--negro);color:var(--txt);
  font:16px/1.65 var(--sans);-webkit-font-smoothing:antialiased;
  overflow:hidden}

::selection{background:var(--tinto);color:var(--txt)}

/* Contenido presente en el HTML, fuera de la vista.
   Los rastreadores lo leen; la pantalla lo revela por interacción. */
.solo-lectores{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ═══ BARRA · vidrio líquido ═════════════════════════════════════════ */
.cabecera{position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:60;
  display:flex;align-items:center;gap:26px;
  padding:11px 18px;border-radius:999px;
  background:color-mix(in srgb,var(--carbon) 52%,transparent);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  backdrop-filter:blur(18px) saturate(1.4);
  border:1px solid color-mix(in srgb,var(--borde-2) 70%,transparent);
  box-shadow:0 1px 0 rgba(244,239,233,.05) inset,0 12px 40px rgba(0,0,0,.45)}
.cabecera .marca{display:flex;align-items:center;gap:10px;border:0;text-decoration:none}
.cabecera .marca svg{width:24px;height:24px;flex:none;color:var(--txt)}
.cabecera .wm{font:600 16px/1 var(--display);letter-spacing:-.5px;color:var(--txt)}
.cabecera .wm em{font-style:normal;color:var(--tueste)}
.cabecera nav{display:flex;align-items:center;gap:6px}
.cabecera nav a{font:500 10.5px/1 var(--mono);letter-spacing:1.6px;
  text-transform:uppercase;color:var(--txt-3);text-decoration:none;border:0;
  padding:9px 11px;border-radius:999px;
  transition:color var(--t-rapido) var(--curva),background var(--t-rapido) var(--curva)}
.cabecera nav a:hover{color:var(--txt);
  background:color-mix(in srgb,var(--grafito) 85%,transparent)}
.cabecera nav a.accion{color:var(--tueste)}
.cabecera nav a.accion:hover{color:var(--tueste-cl)}

/* ═══ EL PIE · cromo transversal, pareja de la cabecera ══════════════
   Vive aquí y no dentro de una página porque es el mismo en las 23
   direcciones: quien llega al home desde /problemas/… tiene que
   reconocer el mismo pie, y eso solo se sostiene con UNA definición.
   Estaba escrito dentro del home, anclado al umbral y como pila
   centrada, y por eso se leía como un bloque más de la escena de cierre.
   Fallo de David del 7 de septiembre de 2026.

   ES UNA BANDA AL BORDE, NO UNA PILA. Filete arriba, pegada al fondo de
   la ventana, una sola fila: el correo, los perfiles y la fecha. En el
   home eso la deja POR DEBAJO del umbral, y es a propósito: el marco
   vertical gobierna el contenido, y el pie no es contenido —es el cierre
   del documento—. En las otras 22 direcciones, que sí tienen
   desplazamiento, la misma banda cierra la página como es habitual.

   El material es el de la cabecera —mismo fondo, mismo desenfoque, mismo
   filete—: es lo que las hace leer como una pareja, arriba y abajo, y no
   como dos inventos distintos. */
.pie{position:fixed;left:0;right:0;bottom:0;z-index:55;
  border-top:1px solid color-mix(in srgb,var(--borde-2) 70%,transparent);
  background:color-mix(in srgb,var(--carbon) 62%,transparent);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  backdrop-filter:blur(18px) saturate(1.4);
  opacity:0;pointer-events:none;transition:opacity .8s var(--curva)}
.pie.visible{opacity:1;pointer-events:auto}
/* `.pie` trae `display` propio, y una regla de autor le gana a
   `[hidden]{display:none}` del navegador. Sin esta línea el atributo era
   inerte: el pie seguía maquetado con opacidad 0 y sus seis enlaces
   recibían el foco del teclado en las ocho escenas donde no debía
   existir. Medido el 7 de septiembre en la escena del costo. */
.pie[hidden]{display:none}

/* LA CAJA SE CIÑE A LA MEDIDA DEL CONTENIDO, no al ancho de la ventana.
   La primera versión repartía las tres piezas de borde a borde con
   `space-between` sobre 1440 px, y eso no lee como pie: lee como barra
   de estado. Fallo de David del 7 de septiembre de 2026. Un pie clásico
   agrupa —cada bloque con su rótulo—, respira, y deja la letra menuda
   bajo su propia regla. */
.pie-caja{max-width:1200px;margin:0 auto;
  /* EL AIRE SOSTIENE EL TAMAÑO. Al salir la fecha a la firma, el pie
     perdió su línea fina y con ella 38 px: volvía a quedar delgado,
     que era el reproche original. Lo que se fue en contenido se repone
     en respiración, no en tipografía más grande. */
  padding:34px max(4vw,26px) 30px;
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:18px 64px;flex-wrap:wrap}
.pie-bloque{display:flex;flex-direction:column;gap:9px;min-width:0}
.pie-rotulo{margin:0;font:500 var(--tipo-rotulo)/1 var(--mono);
  letter-spacing:2.4px;text-transform:uppercase;color:var(--txt-3)}
.pie-linea{margin:0}
/* EL CORREO ES LO ÚNICO ACCIONABLE DEL PIE, así que es lo que más pesa.
   El naranja de marca se guarda para cuando el cursor lo toca: en
   reposo lo volvía la llamada de la escena, que era parte de por qué el
   pie no se leía como pie. */
.pie-correo{font:500 var(--tipo-cuerpo)/1.35 var(--mono);letter-spacing:.2px;
  color:var(--txt);text-decoration:none;
  transition:color var(--t-rapido) var(--curva)}
.pie-correo:hover,.pie-correo:focus-visible{color:var(--tueste);outline:none}
.pie-perfiles{display:flex;flex-wrap:wrap;gap:7px 26px}
.pie-perfiles a{font:400 var(--tipo-nota)/1.35 var(--sans);
  color:var(--txt-2);text-decoration:none;
  transition:color var(--t-rapido) var(--curva)}
.pie-perfiles a:hover,.pie-perfiles a:focus-visible{color:var(--txt);outline:none}

/* LA FECHA SALIÓ DEL PIE Y BAJÓ A LA FIRMA. El pie ya no se ve al
   llegar —se pide con un gesto más—, y la fecha de actualización tiene
   que leerse sin pedir nada: es lo que fecha el documento. Vive bajo la
   palabra, en el umbral del marco, y sube por encima del pie cuando el
   pie llega. Fallo de David del 7 de septiembre de 2026. */
/* SU SITIO ES UNO SOLO, con el pie a la vista o sin él. Cuenta con el
   alto del pie desde el arranque —`medirPie()` lo publica en
   `--alto-pie` antes de que haga falta—, así que revelar el pie no la
   mueve un pixel. Antes subía al llegar el pie, y ese salto se veía.
   Fallo de David del 7 de septiembre de 2026.
   NO LLEVA RETARDO: la enciende el guion cuando la palabra termina de
   escribirse. Un retardo escrito aquí sería un segundo reloj corriendo
   contra el de la firma, y ya se desincronizaron una vez —0,9 s contra
   3,4 de escritura—. */
.firma-fecha{position:fixed;left:0;right:0;z-index:24;
  bottom:calc(var(--alto-pie,110px) + 26px);
  margin:0;padding:0 4vw;text-align:center;pointer-events:none;
  font:400 var(--tipo-etiqueta)/1.6 var(--mono);letter-spacing:2.6px;
  text-transform:uppercase;color:var(--txt-3);text-indent:2.6px;
  opacity:0;visibility:hidden;
  transition:opacity .7s var(--curva),visibility 0s linear .7s}
.firma-fecha.visible{opacity:1;visibility:visible;
  transition:opacity .7s var(--curva),visibility 0s}

/* EL CROMO NO SE PISA CON EL CROMO. La taza narradora vive fija en la
   esquina —bottom:20px— y los saltos encima de ella; con la banda a la
   vista aterrizaban dentro de ella, y en angosto la taza caía justo
   sobre la fecha. Suben lo que mide la banda, que el guion publica en
   `--alto-pie` al mostrarla porque cambia con el ancho: 55 px en una
   fila, 116 apilada. El desplazamiento comparte la curva y el tiempo de
   la aparición del pie, así que suben con él y no después. */
.taza-avance,.saltos{transition:opacity .5s var(--curva),
  transform .5s var(--curva),bottom .8s var(--curva)}
body.con-pie .taza-avance{bottom:calc(20px + var(--alto-pie,0px))}
body.con-pie .saltos{bottom:calc(72px + var(--alto-pie,0px))}

/* angosto · la fila no cabe, así que se centra y se apila sola */
@media(max-width:760px){
  .pie-caja{padding:26px 5vw 24px;gap:16px 30px}
  .pie-perfiles{gap:6px 18px}
}

/* ═══ ESCENA 1 · la taza ASCII ═══════════════════════════════════════ */
/* `clip` y no `hidden`: con `hidden` la escena SIGUE siendo contenedor
   de desplazamiento, y el lienzo del polvo la desborda 6 px por el pie
   —808 de contenido en 800 de caja—. Al enfocar un control de la mitad
   de abajo, el navegador aprovechaba esa holgura y deslizaba la escena
   entera 8 px: la pregunta caía de 150 a 142 y la percha se rompía.
   Medido con clic real sobre «Auditar». `clip` recorta igual pero no
   crea contenedor de desplazamiento, así que no hay holgura que tomar. */
.escena{height:100svh;width:100%;display:grid;place-items:center;
  position:relative;overflow:clip}
.ascii{user-select:none;-webkit-user-select:none;pointer-events:none}
.ascii pre{margin:0;font-family:var(--mono);font-weight:500;
  color:var(--txt-3);white-space:pre}
.ascii .a{color:var(--tueste)}   /* tinto y señal */
.ascii .b{color:var(--txt)}      /* contorno vivo */
.ascii .c{color:var(--tueste-cl)}/* el tinto que brilla con el gesto */
.ascii .d{color:var(--dorado)}   /* destello */
.ascii .r{color:var(--txt-2)}    /* referencia en humo */

/* ═══ EL VUELO · la taza se desarma hacia el titular ═════════════════ */
.vuelo{position:fixed;inset:0;z-index:30;pointer-events:none}
.vuelo span{position:absolute;font-family:var(--mono);font-weight:500;
  line-height:1;will-change:transform,opacity;
  transition:transform 1.1s var(--curva),opacity 1.1s var(--curva)}
.vuelo .va{color:var(--tueste)}
.vuelo .vb{color:var(--txt)}

/* ═══ ESCENA 2 · el titular y su texto de apoyo ══════════════════════ */
.relato2{position:absolute;z-index:20;left:50%;top:50%;
  transform:translate(-50%,-50%);width:min(90vw,1060px);
  text-align:center;pointer-events:none}
.titulo{margin:0;
  font:600 var(--tipo-h1)/1.14 var(--titular);
  font-size:calc(var(--tipo-h1) * var(--titular-optico));
  letter-spacing:-1.6px;color:var(--txt);
  opacity:0;transform:scale(.98);
  transition:opacity .5s var(--curva),transform .5s var(--curva)}
.titulo.visible{opacity:1;transform:scale(1)}
/* al expandir, el resto del H1 se apaga · «tres minutos» permanece quieto */
.h1-resto{transition:opacity .6s var(--curva)}
.relato2.expandida .h1-resto{opacity:0}

/* «tres minutos» · el botón del relato · polvo basal + invitación
   periódica: cada 6 s la barra ASCII carga de izquierda a derecha y
   desaparece, hasta que el usuario interactúa */
.tres-min{font:inherit;letter-spacing:inherit;color:var(--tueste);
  background:none;border:0;padding:0 2px;cursor:pointer;
  pointer-events:auto;position:relative;
  transition:color var(--t-rapido) var(--curva)}
.tres-min::before{content:'· : . ∙ , ·';position:absolute;left:0;right:0;
  bottom:-0.55em;font:500 0.22em/1 var(--mono);letter-spacing:0.9em;
  color:color-mix(in srgb,var(--tueste) 38%,transparent);
  text-align:center;white-space:nowrap;pointer-events:none}
.tres-min::after{content:'∙ : · ∙ : · ∙ : · ∙ : · ∙ : ·';position:absolute;
  left:0;bottom:-0.55em;width:0;overflow:hidden;white-space:nowrap;
  font:500 0.22em/1 var(--mono);letter-spacing:0.9em;
  color:var(--tueste-cl);opacity:0;pointer-events:none}
.tres-min.invita::after{animation:invita-carga 6s linear infinite}
@keyframes invita-carga{
  0%{width:0;opacity:1}
  26%{width:100%;opacity:1}
  33%{width:100%;opacity:0}
  34%,100%{width:0;opacity:0}}
.tres-min:hover,.tres-min:focus-visible{color:var(--tueste-cl);outline:none}
.tres-min:hover::before{color:var(--tueste-cl)}

/* la escena expandida · el apoyo aparece a la DERECHA de «tres minutos»,
   que permanece quieto en su posición del H1 */
.detalle{display:none;position:absolute;text-align:left;
  transform:translateY(-50%)}
.relato2.expandida .detalle{display:block;pointer-events:auto;
  animation:aparece-detalle .7s var(--curva) .25s both}
@keyframes aparece-detalle{from{opacity:0;transform:translateY(calc(-50% + 14px))}
  to{opacity:1;transform:translateY(-50%)}}
.detalle.abajo{transform:none}
.relato2.expandida .detalle.abajo{animation:aparece-abajo .7s var(--curva) .25s both}
@keyframes aparece-abajo{from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}}
.apoyo-pregunta{font:600 var(--tipo-h3)/1.3 var(--titular);
  font-size:calc(var(--tipo-h3) * var(--titular-optico));
  letter-spacing:-.5px;color:var(--tueste);margin:0 0 14px}
/* Regla del sitio (7-ago-2026): todo bloque de texto va justificado */
.apoyo-texto{font:400 var(--tipo-cuerpo)/1.7 var(--sans);
  color:var(--txt);margin:0;text-align:justify;hyphens:auto;
  -webkit-hyphens:auto}
.apoyo-texto strong{color:var(--tueste);font-weight:600}
/* el enlace de la demostración · naranja limpio; el hover lo subraya en
   ASCII de izquierda a derecha, como una barra de carga */
.apoyo-texto a{color:var(--tueste);text-decoration:none;border-bottom:0;
  position:relative;transition:color var(--t-rapido) var(--curva)}
.apoyo-texto a::after{content:'· ∙ : ∙ · ∙ : ∙ · ∙ : ∙ · ∙ : ∙ · ∙ : ∙ · ∙ : ∙ · ∙ : ∙ ·';
  position:absolute;left:0;bottom:-0.9em;width:0;overflow:hidden;
  white-space:nowrap;font:500 10px/1 var(--mono);letter-spacing:3px;
  color:var(--tueste-cl);transition:width .3s var(--curva)}
.apoyo-texto a:hover,.apoyo-texto a:focus-visible{color:var(--tueste-cl);outline:none}
.apoyo-texto a:hover::after,.apoyo-texto a:focus-visible::after{
  width:100%;transition:width 1.6s linear}

/* ═══ ESCENA 3 · resultados · el tablero ASCII con flecha ════════════ */
/* El tablero se dibuja en la retícula de caracteres (bloque central,
   25%–75% de la pantalla). Aquí viven el H2, el eje X y las citas. */
.relato3{position:absolute;inset:0;z-index:20;pointer-events:none;
  opacity:0;visibility:hidden;
  transition:opacity .7s var(--curva),visibility 0s linear .7s}
.relato3.visible{opacity:1;visibility:visible;
  transition:opacity .7s var(--curva) .15s}
.titulo3{position:absolute;left:50%;transform:translateX(-50%);
  top:calc(25% - 92px);margin:0;width:min(90vw,900px);text-align:center;
  font:600 var(--tipo-h2)/1.2 var(--titular);
  font-size:calc(var(--tipo-h2) * var(--titular-optico));
  letter-spacing:-1px;color:var(--txt)}
.titulo3 em{font-style:normal;color:var(--tueste)}

/* el % dinámico · acompaña la flecha */
.valor-tablero{position:absolute;margin:0;
  top:calc(25% + 3vh);left:calc(50% + 11vh);
  font:500 clamp(26px,5vh,44px)/1 var(--mono);letter-spacing:-1.5px;
  color:var(--tueste);opacity:0;transform:translateY(6px);
  transition:opacity .4s var(--curva),transform .4s var(--curva)}
.valor-tablero.visible{opacity:1;transform:none}

/* los rótulos de los ejes · en el naranja de la marca, pegados al eje */
.rotulo{position:absolute;margin:0;font:500 var(--tipo-rotulo)/1 var(--mono);
  letter-spacing:2px;text-transform:uppercase;color:var(--tueste)}
.rotulo-y{left:calc(50% - 16.5vh - 44px);top:50%;
  transform:rotate(-90deg);transform-origin:center}
.rotulo-x{right:calc(50% - 26vh);top:calc(75% + 4px)}
/* el eje X · las áreas de la empresa */
.ejes{position:absolute;left:50%;transform:translateX(-50%);
  top:calc(75% + 26px);display:flex;gap:6px;flex-wrap:wrap;
  justify-content:center;pointer-events:auto}
.eje{font:500 10.5px/1 var(--mono);letter-spacing:1.4px;
  text-transform:uppercase;color:var(--txt-3);background:none;border:0;
  padding:9px 12px;cursor:pointer;position:relative;
  transition:color var(--t-rapido) var(--curva)}
.eje:hover,.eje:focus-visible{color:var(--txt);outline:none}
.eje.activa{color:var(--tueste)}
/* el destello · salta de área en área hasta el primer hover */
.eje.destello{color:var(--tueste)}
.eje.activa::after{content:'∙ : ∙';position:absolute;left:0;right:0;
  bottom:-4px;font:500 8px/1 var(--mono);letter-spacing:6px;
  text-align:center;color:color-mix(in srgb,var(--tueste) 55%,transparent)}
/* la cita · discreta, da fuerza sin quitar protagonismo */
.citas{position:absolute;left:50%;transform:translateX(-50%);
  top:calc(75% + 80px);width:min(86vw,720px)}
.cita{position:absolute;inset:0 0 auto 0;margin:0;
  font:400 14px/1.65 var(--sans);color:var(--txt-2);
  text-align:justify;hyphens:auto;-webkit-hyphens:auto;
  opacity:0;transform:translateY(8px);
  transition:opacity .45s var(--curva),transform .45s var(--curva)}
.cita.activa{opacity:1;transform:none}
.cita strong{color:var(--tueste);font-weight:600}
/* la escena anterior se va mientras el polvo fluye */
.relato2.se-va{opacity:0;transition:opacity .55s var(--curva)}

/* ═══ LA TAZA NARRADORA · el nivel marca el avance del relato ════════ */
.taza-avance{position:fixed;right:20px;bottom:20px;z-index:60;
  width:32px;height:32px;opacity:0;transform:translateY(8px);
  transition:opacity var(--t-normal) var(--curva),transform var(--t-normal) var(--curva);
  pointer-events:none}
.taza-avance.activa{opacity:1;transform:none}
.taza-avance svg{width:100%;height:100%}
.taza-avance .nivel-rect{transition:transform .25s var(--curva)}

/* ═══ LOS SALTOS · puntos que llevan directo a cada escena ═══════════ */
.saltos{position:fixed;right:29px;bottom:72px;z-index:60;
  display:flex;flex-direction:column;gap:12px;
  opacity:0;transform:translateY(8px);pointer-events:none;
  transition:opacity var(--t-normal) var(--curva),transform var(--t-normal) var(--curva)}
.saltos.activa{opacity:1;transform:none;pointer-events:auto}
.salto{width:14px;height:14px;background:none;border:0;cursor:pointer;
  position:relative;padding:0}
.salto::before{content:'';position:absolute;inset:3px;border-radius:50%;
  background:var(--txt-3);transition:background var(--t-rapido) var(--curva),
  transform var(--t-rapido) var(--curva)}
.salto:hover::before,.salto:focus-visible::before{background:var(--txt);
  transform:scale(1.35)}
.salto.activa::before{background:var(--tueste)}
.salto:focus-visible{outline:none}
.salto span{position:absolute;right:22px;top:50%;transform:translateY(-50%);
  font:500 10px/1 var(--mono);letter-spacing:1.4px;text-transform:uppercase;
  color:var(--txt-2);white-space:nowrap;padding:6px 10px;border-radius:6px;
  background:color-mix(in srgb,var(--carbon) 78%,transparent);
  border:1px solid var(--borde);opacity:0;pointer-events:none;
  transition:opacity var(--t-rapido) var(--curva)}
.salto:hover span,.salto:focus-visible span{opacity:1}

/* ═══ ADAPTABLE · ancho y alto ═══════════════════════════════════════ */
@media(max-width:900px){
  .valor-tablero{left:auto;right:5vw}
  .rotulo-y{display:none}
}
@media(max-width:720px){
  .titulo3{top:calc(25% - 76px)}
  .ejes{gap:0;width:92vw}
  .eje{padding:8px 8px;letter-spacing:1px}
  .citas{width:92vw}
  .cita{font-size:13px}
  .saltos{right:25px}
}
@media(max-height:640px){
  .cabecera{top:8px}
  .titulo3{top:calc(25% - 64px);font-size:22px}
  .valor-tablero{font-size:24px}
  .citas{top:calc(75% + 70px)}
  .cita{font-size:12.5px}
}
@media(max-height:480px){
  .titulo3{top:10px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms !important;
    animation-iteration-count:1 !important;transition-duration:1ms !important}
}