/* NULTAKT · la web, hecha con LA NORMA de la app (docs/design/la-norma/LA-NORMA.md).
   Los números de diseño viven aquí, como en LaNorma.swift, y en ningún otro sitio.
   La cadena de fondos es la de un motor: fondo → caja gris → mando negro con el borde de su dueño.
   Cada sección es una VENTANA COMPUESTA: borde del dueño, radio de caja + 20, cajas grises dentro. */

@font-face{font-family:"Syne Mono";src:url(../fuentes/SyneMono-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(../fuentes/JetBrainsMono-Medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(../fuentes/JetBrainsMono-Bold.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  /* 1.1 color por PAPEL */
  --fondo:#121212;        /* blanco 0,07: la pantalla y el cuerpo de una ventana compuesta */
  --panel:#252525;        /* 0,145: cajas */
  --elevado:#2d2d2d;      /* 0,175: lo abierto */
  --linea:#575757;        /* 0,34: bordes, filetes */
  --linea-fuerte:#757575; /* 0,46 */
  --texto:#e6e6e6;        /* 0,90 */
  --tenue:#999;           /* 0,60: explicaciones */
  --lectura:#bfbfbf;      /* texto a 0,75 (escala de opacidades): párrafos largos */
  --acento:#66EDC7;       /* menta: acción común y EVOLUCIÓN */
  --ahora:#FFB82E;        /* ámbar: EL AHORA y lo que entra en el compás siguiente */
  --encendido:#2ED696;    /* suena */
  --peligro:#D07068;
  --bipolar:#E633FF;      /* bipolares y nombre de grupo */
  --evolucion:#FF731F;    /* lo que pone la VIDA */
  --sistema:#A8C79E;      /* salvia: MENÚ */
  --cobre:#FF8A3D;        /* LA CREMALLERA */
  --cristal:#050506;      /* el vidrio de una pantalla de motor (CALÍGRAFO) */
  --hueso:#EFEDE6;        /* el logo */
  --velo:rgba(0,0,0,.8);

  /* 1.2 letra: Syne Mono = identidad · JetBrains Mono = todo lo demás */
  --syne:"Syne Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --jb:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;

  /* 1.3 forma: EL RODAMIENTO v3 */
  --pieza:44px;           /* alto de toda pieza tocable */
  --r-pieza:22px;         /* pastilla de 44 */
  --aire:7px;             /* relleno de toda caja, igual en los cuatro lados */
  --r-box:29px;           /* 22 + aire */
  --r-ventana:42px;       /* 22 + 20 */
  --r-ventana-cajas:49px; /* r-box + 20: ventana compuesta, concéntrica con sus cajas */
  --r-min:4px;
  --hueco:6px;            /* voiceGap: entre filas y piezas hermanas */
  --s-texto:10px;
  --s-pieza:12px;
  --pista:14px;           /* el rótulo empieza a 14 del borde de su pista */
  --relleno:20px;         /* relleno de ventana */
  --s-cabecera:14px;
  --s-fila-botones:5px;

  /* escala de la AYUDA para leer */
  --medida:560px;

  /* LA ESCALA DE LETRA: una medida por papel, igual en todas las secciones (nada de 12 aquí y 13 allí)
     tesis de sección 36/1.18 Syne · texto de entrada 15/24 · texto de tarjeta 13/21 · título de tarjeta 16/1.35 Syne · rótulo 13 (.t-rotulo) · leyenda 11 (.t-leyenda) */
  --f-tesis:36px;
  --f-carta:13px;
  --l-carta:21px;
  --f-carta-t:16px;

  /* LOS ESPACIOS DE LA WEB (ronda 2: canal de 24 px en escritorio; antes de la ronda 1, 6 px) (solo aquí; el pupitre de LA CUBA y las cajas anidadas conservan el --hueco de la app):
     --canal = la calle entre columnas y entre cajas hermanas (en una rejilla de cuatro, dos columnas de arriba son exactamente dos de abajo)
     --respiro = el aire entre la entrada de la sección (título, tesis y texto) y lo que cuelga debajo */
  --canal:24px;
  --respiro:32px;

  --ancho:1080px;
  color-scheme:dark;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px;-webkit-text-size-adjust:100%;scrollbar-gutter:stable}   /* sin salto de maquetación al bloquear el scroll de una ventana */
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--fondo);color:var(--texto);font:500 15px/24px var(--jb);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);background:var(--fondo);z-index:40}
p,h1,h2,h3,h4,ol,ul,dl,dd,figure{margin:0}
h1,h2,h3,h4{font-weight:400;text-wrap:balance}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
img,video,canvas,svg{max-width:100%}
:focus-visible{outline:2px solid var(--acento);outline-offset:3px}
.oculto{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.salto{position:absolute;left:16px;top:-60px;z-index:60;background:var(--acento);color:#000;padding:10px 16px;border-radius:var(--r-pieza);font:700 12px/1 var(--jb);letter-spacing:.6px;text-transform:uppercase;text-decoration:none}
.salto:focus{top:12px}

.envoltura{max-width:calc(var(--ancho) + 32px);margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}

/* ——— los diez estilos ——— */
.t-titulo{font:400 22px/1.15 var(--syne);letter-spacing:1.4px;text-transform:uppercase}
.t-maquina{font:400 18px/1.2 var(--syne);text-transform:uppercase}
.t-cifra{font:700 20px/1 var(--jb);font-variant-numeric:tabular-nums}
.t-boton{font:500 15px/1 var(--jb);letter-spacing:1.2px;text-transform:uppercase}
.t-compacto{font:700 12px/1 var(--jb);letter-spacing:.6px;text-transform:uppercase}
.t-rotulo{font:500 13px/1.2 var(--jb);letter-spacing:1.1px;text-transform:uppercase}
.t-leyenda{font:700 11px/1.2 var(--jb);letter-spacing:1.6px;text-transform:uppercase;color:var(--bipolar)}
.t-nota{font:500 12px/18px var(--jb)}
.t-pagina{font:400 28px/1.2 var(--syne)}
.t-lema{font:500 13px/21px var(--jb);color:var(--tenue)}

/* ——— PIEZAS ——— */

/* la CAJA: gris, esquina de caja, sin raya, relleno a aire */
.caja{background:var(--panel);border-radius:var(--r-box);padding:var(--aire)}

/* la PASTILLA de 44 (NTBoton): reposo = borde del dueño a 0,55 · elegido = relleno del dueño, letra negra */
.pastilla{--d:var(--acento);display:inline-flex;align-items:center;justify-content:center;gap:var(--s-fila-botones);min-height:var(--pieza);padding:0 18px;border-radius:var(--r-pieza);background:var(--fondo);border:1px solid color-mix(in srgb,var(--d) 55%,transparent);color:var(--d);font:500 15px/1 var(--jb);letter-spacing:1.2px;text-transform:uppercase;text-decoration:none;white-space:nowrap;transition:background .12s,color .12s,border-color .12s}
.pastilla.compacta{font:700 12px/1 var(--jb);letter-spacing:.6px;padding:0 14px}
.pastilla:hover{background:color-mix(in srgb,var(--d) 16%,var(--fondo))}
.pastilla.elegida,.pastilla[aria-pressed="true"]{background:var(--d);border-color:var(--d);color:#000}
.pastilla.apagada{opacity:.35;pointer-events:none}
.pastilla.redonda{width:var(--pieza);padding:0}
.pastilla svg{flex:none}
.fila-botones{display:flex;gap:var(--s-fila-botones)}
.fila-botones>.pastilla{flex:1 1 0;min-width:0}

/* EL DADO: el icono de NUEVO (IconoNuevo, lienzo 24, cuadrado 16 con esquina 3,5 y tres puntos) */
.dado{width:16px;height:16px}

/* la CHAPA de número: disco lleno del dueño, número negro */
.chapa{display:inline-grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;background:var(--d,var(--texto));color:#000;font:700 13px/1 var(--jb);font-variant-numeric:tabular-nums}

/* la PANTALLA EN SU MARCO: filete + cristal, lo pintado a aire y concéntrico */
.marco{background:var(--cristal);border:1px solid var(--linea);border-radius:var(--r-box);padding:6px;position:relative}
.marco::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 .5px rgba(255,255,255,.06);pointer-events:none}
.marco>canvas,.marco>video,.marco>img{display:block;width:100%;height:auto;border-radius:calc(var(--r-box) - 6px)}

/* el DESLIZADOR (NTEje): rótulo a pista, carril 6, pomo 22, zona 44; el valor sustituye a la leyenda al tocar */
.eje{--d:var(--acento);position:relative;height:calc(var(--pieza) + 2 * var(--aire));padding:0 var(--pista);touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab}
.eje:active{cursor:grabbing}
.eje .linea-rotulo{display:flex;justify-content:space-between;align-items:center;padding-top:9px;height:24px}
.eje .rotulo{font:500 13px/1 var(--jb);letter-spacing:1.1px;text-transform:uppercase;color:var(--texto)}
.eje .der{position:relative;min-width:64px;text-align:right;height:13px}
.eje .valor{position:absolute;right:0;top:0;opacity:0;transition:opacity .3s;font:700 12px/1 var(--jb);font-variant-numeric:tabular-nums;color:var(--texto)}
.eje .t-leyenda{position:absolute;right:0;top:1px;transition:opacity .2s}
.eje.vivo .valor{opacity:1;transition:opacity .15s}
.eje.vivo .t-leyenda{opacity:0}
.eje .carril{position:absolute;left:var(--pista);right:var(--pista);top:38px;height:6px;border-radius:3px;background:rgba(87,87,87,.55)}
.eje .relleno{position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:var(--d)}
.eje .pomo{position:absolute;top:-8px;width:22px;height:22px;margin-left:-11px;border-radius:50%;background:#fff}

/* ——— LA BARRA: la cápsula de arriba, como la de la app ——— */
.barra{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;padding-block:var(--s-pieza)}
.barra::before{content:"";position:absolute;inset:0 0 -12px;background:linear-gradient(var(--fondo) 62%,transparent);z-index:-1}
/* EL DESVANECIDO DE ABAJO, simétrico al de la barra: el contenido se funde con el fondo al llegar al borde de la ventana (fijo, sin eventos, con la
   zona segura; el pie deja debajo más aire que su alto, así que al final de la página no tapa nada) */
:root{--desvanece:32px}
body::after{content:"";position:fixed;left:0;right:0;bottom:0;height:calc(var(--desvanece) + env(safe-area-inset-bottom,0px));z-index:29;pointer-events:none;
  background:linear-gradient(transparent,var(--fondo) var(--desvanece))}
.barra .caja{display:flex;align-items:center;gap:var(--hueco)}
.marca{display:flex;align-items:center;gap:var(--s-texto);height:var(--pieza);padding:0 var(--pista) 0 var(--aire);text-decoration:none;color:var(--hueso)}
.marca img{width:30px;height:30px;flex:none}
.marca span{font:400 18px/1 var(--syne);letter-spacing:.12em}
/* SIETE ENTRADAS, de INICIO a FICHA: cada una salta a la primera sección de su grupo y se marca en todas las del grupo. Las que no están
   elegidas llevan su cápsula (el fondo, hundida en la caja de la barra como el reloj), para que se lean como menú sobre el fondo; la elegida, salvia llena */
.indice{display:flex;gap:var(--hueco);margin-left:auto}
.indice .pastilla{--d:var(--sistema);min-height:36px;padding:0 13px;border-color:transparent;background:var(--fondo);color:var(--sistema);font-size:13px;letter-spacing:.8px}
.indice .pastilla:hover{border-color:color-mix(in srgb,var(--d) 55%,transparent);background:var(--fondo)}
.indice .pastilla.elegida{background:var(--d);color:#000}
.reloj{display:flex;align-items:center;gap:var(--s-texto);height:var(--pieza);padding:0 var(--pista);border-radius:var(--r-pieza);background:var(--fondo);border:1px solid var(--linea);color:var(--texto);transition:border-color .12s,background .12s}
button.reloj:hover,.reloj[aria-expanded="true"]{border-color:color-mix(in srgb,var(--acento) 55%,transparent);background:color-mix(in srgb,var(--acento) 10%,var(--fondo))}
.reloj .t-cifra{color:var(--texto)}
.reloj .t-cifra small{font:700 12px/1 var(--jb);color:var(--tenue);margin-left:3px;letter-spacing:.6px}
.reloj .clave{color:var(--ahora)}
.compas{display:grid;grid-template-columns:repeat(4,auto);gap:6px}
.compas span{display:grid;grid-template-columns:repeat(4,5px);gap:2px}
.compas i{display:block;width:5px;height:14px;border-radius:1.5px;border:1px solid rgba(230,230,230,.35)}
.compas i.pasada{background:rgba(230,230,230,.55);border-color:transparent}
.compas i.suena{background:var(--ahora);border-color:var(--ahora)}
.plegado{position:relative;display:none;margin-left:auto}
.abre-indice{--d:var(--sistema);gap:8px}
.abre-indice[aria-expanded="true"]{background:var(--d);color:#000}
.panel-indice{position:absolute;left:0;top:calc(100% + 10px);width:min(340px,calc(100vw - 32px));display:grid;gap:var(--s-fila-botones);padding:var(--aire);border-radius:var(--r-box);background:var(--panel);border:1px solid color-mix(in srgb,var(--sistema) 70%,transparent);box-shadow:0 18px 40px rgba(0,0,0,.6)}
.panel-indice[hidden]{display:none}
.entrada-indice{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:12px;row-gap:3px;align-items:center;padding:9px 14px 9px 9px;border-radius:calc(var(--r-box) - var(--aire));text-decoration:none;color:var(--texto);border:1px solid transparent}
.entrada-indice.inicio{grid-template-rows:auto;min-height:56px}.entrada-indice.inicio .chapa{grid-row:auto}
.entrada-indice .chapa{grid-row:1/3;background:transparent;color:var(--sistema);border:1px solid color-mix(in srgb,var(--sistema) 60%,transparent)}
.entrada-indice .t-rotulo{color:var(--sistema)}
.entrada-indice .t-nota{color:var(--tenue);text-transform:none;letter-spacing:0}
.entrada-indice:hover,.entrada-indice:focus-visible{background:var(--elevado);border-color:var(--linea)}
.entrada-indice.elegida{border-color:color-mix(in srgb,var(--sistema) 60%,transparent)}
.entrada-indice.elegida .chapa{background:var(--sistema);color:#000;border-color:var(--sistema)}
/* la portada no lleva marca (ronda 11): INICIO es la primera entrada y el índice arranca a la izquierda, con el mismo aire que el reloj a la derecha */
.barra .sin-marca .indice{margin-left:0}
.barra .sin-marca .reloj{margin-left:auto}
.barra .sin-marca .plegado{margin-left:0}
/* en el índice plegado, INICIO no lleva número: su chapa queda vacía para que el rótulo case con los de las demás */
.entrada-indice .chapa.vacia{visibility:hidden}
@media (max-width:1100px){.indice{display:none}.plegado{display:block}.reloj{margin-left:auto}}
@media (max-width:560px){.abre-indice span{display:none}.abre-indice{padding:0 12px}.plegado{position:static}.panel-indice{left:max(16px,env(safe-area-inset-left,0px));right:max(16px,env(safe-area-inset-right,0px));width:auto;top:calc(100% - 2px)}}
@media (max-width:560px){.compas{display:none}.marca span{display:none}.reloj{padding:0 12px}}

/* ——— LA VENTANA: toda sección es una ventana compuesta ——— */
main{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;padding-block:8px 28px}
.ventana{--d:var(--texto);border:1px solid color-mix(in srgb,var(--d) 55%,transparent);border-radius:var(--r-ventana-cajas);padding:var(--relleno);display:grid;grid-template-columns:minmax(0,1fr);gap:var(--hueco);background:var(--fondo)}
.cabecera{display:flex;align-items:center;gap:var(--s-pieza);min-height:var(--pieza);padding:0 var(--aire)}
.cabecera .t-titulo{color:var(--d)}
.cabecera .t-lema{margin-left:auto;text-align:right}
.cabecera .chapa{--d:inherit;background:var(--d)}
.filete{height:1px;background:color-mix(in srgb,var(--d) 55%,transparent);margin:1px var(--aire)}
main .ventana>.filete,.ventana.menu>.filete{margin-bottom:calc(var(--respiro) - var(--hueco))}   /* de la línea de la cabecera al contenido: el mismo respiro que de la entrada a lo que cuelga */
.cuerpo{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--canal);margin-top:calc(var(--respiro) - var(--hueco))}

/* la caja de entrada: la tesis de la sección, centrada y a todo el ancho; debajo, el texto en dos columnas */
.entrada{display:grid;justify-items:center;gap:24px;padding:34px 0 36px}
.entrada .tesis{font:400 var(--f-tesis)/1.18 var(--syne);color:var(--texto);text-align:center;text-wrap:balance;max-width:24em;padding:0 calc(var(--pista) + var(--aire))}
.entrada .txt{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--canal);width:100%;color:var(--lectura)}
.entrada .txt p{padding:0 calc(var(--pista) + var(--aire))}
.entrada b{color:var(--texto);font-weight:500}
/* secciones con rejilla de tres columnas: tres columnas de texto, una por columna de debajo */
.t3 .entrada .txt{grid-template-columns:repeat(3,minmax(0,1fr))}

/* rejillas de cajas hermanas */
.rejilla{display:grid;gap:var(--canal)}
.r2{grid-template-columns:repeat(2,minmax(0,1fr))}
.r3{grid-template-columns:repeat(3,minmax(0,1fr))}
.r4{grid-template-columns:repeat(4,minmax(0,1fr))}

/* una FICHA de texto dentro de su caja: rótulo arriba, texto a pista */
.ficha{display:grid;gap:8px;align-content:start;padding:calc(var(--pista) - 2px) var(--pista) var(--pista)}
.ficha .t-rotulo{color:var(--d,var(--texto));display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.ficha p{font:500 var(--f-carta)/var(--l-carta) var(--jb);color:var(--lectura)}
.ficha p b{color:var(--texto);font-weight:500}
.ficha h3{font:400 var(--f-carta-t)/1.35 var(--syne);color:var(--texto)}

/* TIRA: varios textos hermanos en UNA caja, en columnas con un hilo entre ellas; lo que sobra de la más corta queda dentro de la caja y no pinta gris */
.tira{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:var(--canal);padding:var(--aire) 0}
.tira>.ficha{position:relative;padding:var(--pista) calc(var(--pista) + var(--aire))}
.tira>.ficha+.ficha::before{content:"";position:absolute;left:calc(var(--canal) / -2 - .5px);top:var(--pista);bottom:var(--pista);width:1px;background:#303030}

/* tarjeta con pantalla de dibujo arriba */
.tarjeta{display:grid;grid-template-rows:auto 1fr;gap:0;align-content:start}
.tarjeta .marco{border-radius:calc(var(--r-box) - var(--aire))}
.tarjeta .marco>canvas{border-radius:calc(var(--r-box) - var(--aire) - 6px)}
.tarjeta .ficha{padding-top:var(--pista)}
.tarjeta .ficha .t-rotulo{display:grid;gap:4px;justify-content:start}
/* EL NOMBRE de la función arriba, en el color del dueño, y debajo, en pequeño, su escala de tiempo y dónde vive (EL AUTOR: cada cosa por su nombre) */
.ficha h3.t-rotulo{font:500 13px/1.2 var(--jb);letter-spacing:1.1px;color:var(--d,var(--texto))}
.ficha p.donde{font:500 12px/18px var(--jb);color:var(--tenue);margin-top:-6px}

@media (max-width:900px){
  :root{--canal:16px}
  .entrada{padding:26px 0 28px;gap:18px}
  .entrada .txt,.t3 .entrada .txt{grid-template-columns:minmax(0,1fr);row-gap:12px}
  .r3,.r4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tira{background:none;padding:0;grid-template-columns:repeat(2,minmax(0,1fr))}
  .tira>.ficha{background:var(--panel);border-radius:var(--r-box)}
  .tira>.ficha+.ficha::before{display:none}
}
@media (max-width:620px){
  .ventana{padding:12px;border-radius:calc(var(--r-box) + 12px)}
  .cabecera .t-lema{display:none}
  .r2,.r3,.r4,.tira{grid-template-columns:1fr}
  :root{--f-tesis:26px;--canal:12px;--respiro:24px}
}

/* ——— 0 · PORTADA ——— */
.portada{--d:var(--hueso)}
.portada .marco canvas{aspect-ratio:1600/440}
@media (max-width:620px){.portada .marco canvas{aspect-ratio:800/560}}
.portada{gap:var(--canal)}   /* animación, caja de texto y datos: el mismo canal que separa cajas hermanas en toda la página */
/* DOS ZONAS: a la izquierda, NULTAKT, grande y centrado en el alto; a la derecha, la que recibe: un solo texto y los dos botones */
.portada .bajo{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;padding:calc(var(--aire) + 22px) var(--aire)}
.portada .nombre{container-type:inline-size;min-width:0;padding:0 calc(var(--pista) + var(--aire))}
.portada h1{font:400 clamp(30px,25cqw,104px)/1 var(--syne);letter-spacing:0;color:var(--hueso);white-space:nowrap}
.portada .recibe{display:flex;flex-direction:column;gap:var(--canal);min-width:0;margin:0 calc(var(--pista) + var(--aire)) 0 calc(var(--canal) + var(--pista))}
.portada .recibe p{font:500 16px/26px var(--jb);color:var(--lectura);text-wrap:pretty}
.portada .recibe b{color:var(--texto);font-weight:700}
.portada .fila-botones{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--canal)}
.portada .fila-botones .pastilla{min-width:0}
.tienda{--d:var(--texto)}
.tienda small{font:500 12px/1 var(--jb);letter-spacing:.6px;text-transform:none;color:var(--tenue)}
.lectura-datos{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--hueco)}
/* EL DATO: cifra + rótulo en una pastilla de 44; la misma pieza en la portada y en la tarjeta «Gratis para probar» */
.dato{display:flex;align-items:baseline;justify-content:center;gap:8px;min-height:var(--pieza);padding:0 var(--pista);border-radius:var(--r-pieza);background:var(--fondo);border:1px solid var(--linea)}
.dato .t-cifra{line-height:42px}
.dato .t-nota{color:var(--tenue);text-transform:uppercase;letter-spacing:.6px;white-space:nowrap}
@media (max-width:620px){.dato{padding:0 8px;gap:6px}.dato .t-nota{font-size:11px;letter-spacing:.3px}}
@media (max-width:900px){.portada .bajo{grid-template-columns:minmax(0,1fr);row-gap:var(--canal);padding:calc(var(--aire) + 14px) var(--aire)}.portada .recibe{margin:0 calc(var(--pista) + var(--aire))}.lectura-datos{grid-template-columns:repeat(2,minmax(0,1fr))}.lectura-datos .dato:last-child{grid-column:1/-1}}
@media (max-width:620px){.portada .fila-botones{grid-template-columns:minmax(0,1fr);row-gap:var(--hueco)}.portada .recibe p{font-size:15px;line-height:24px}}

/* ——— 1 · PRUÉBALA: un panel de LA CUBA en miniatura ——— */
.banco{display:grid;grid-template-columns:minmax(0,1fr) 316px;gap:var(--canal);align-items:stretch}
.banco-izq{display:grid;grid-template-rows:auto 1fr auto;gap:var(--canal);min-width:0}
.banco-izq .concepto{align-content:center}
.pupitre{display:grid;grid-template-rows:auto 1fr;gap:var(--canal)}
.pup-alto{display:grid;gap:var(--hueco);align-content:start}
#mandos{display:grid;align-content:space-between}
.placa{display:flex;align-items:center;justify-content:center;gap:var(--s-texto);min-height:var(--pieza)}
.placa svg{width:30px;height:24px;flex:none}
.placa .t-maquina{color:var(--d)}
.tarjeta-motor{display:grid;justify-items:center;gap:2px;padding:4px 0 6px}
.tarjeta-motor .t-nota{color:var(--tenue);text-transform:uppercase;letter-spacing:.6px}
.pupitre .caja.botones{display:grid;gap:var(--aire)}
.pie-pantalla{padding:10px var(--pista) 4px;color:var(--tenue);font:500 12px/18px var(--jb);text-transform:uppercase;letter-spacing:.6px;text-align:center}
.letrero{min-height:calc(var(--pieza) * 2 + var(--hueco));display:flex;align-items:center;padding:var(--s-pieza) calc(var(--pista) + 4px);border-radius:var(--r-box);border:1px solid color-mix(in srgb,var(--d) 35%,transparent);color:var(--lectura);font:500 var(--f-carta)/var(--l-carta) var(--jb)}
.letrero b{color:var(--texto);font-weight:500}
@media (max-width:900px){.banco{grid-template-columns:minmax(0,1fr)}.banco-izq{display:contents}.banco-izq .letrero{order:2}.pupitre{order:1}}
.pupitre .fila-botones>.pastilla{flex:1 1 0;min-width:0}
/* la fila 6 de EL PUPITRE, como la de la app: VARIAR · ORIGINAL · BLOQUEO RITMO · BLOQUEO ALTURA (los candados, en dos líneas: candado y BLOQUEO en letra menor sobre la palabra) */
.pupitre .fila-botones.verbos>.pastilla{padding:0 3px}
.pastilla.candado{flex-direction:column;gap:3px}
.pastilla.candado .rot{display:inline-flex;align-items:center;gap:3px;font:700 8.5px/1 var(--jb);letter-spacing:.6px}
.pastilla.candado .pal{font:700 12px/1 var(--jb);letter-spacing:.6px}

/* ——— 2 · LAS MÁQUINAS: la tarjeta de cada motor es un botón negro con el borde de su dueño ——— */
.maq{--d:var(--acento);display:grid;grid-template-rows:auto auto 1fr auto;gap:12px;text-align:left;padding:var(--pista) var(--pista) var(--aire);border-radius:var(--r-box);background:var(--panel);border:1px solid color-mix(in srgb,var(--d) 35%,transparent);transition:border-color .15s}
.maq:hover{border-color:color-mix(in srgb,var(--d) 75%,transparent)}
.maq .placa{justify-content:flex-start;min-height:0}
.maq .placa svg{width:35px;height:28px}
.maq .serie{margin-left:auto;font:500 12px/1 var(--jb);color:var(--tenue);font-variant-numeric:tabular-nums}
.maq .lema{font:400 var(--f-carta-t)/1.35 var(--syne);color:var(--texto)}
.maq .txt{font:500 var(--f-carta)/var(--l-carta) var(--jb);color:var(--lectura)}
.maq .pista-toca{display:flex;align-items:center;justify-content:space-between;min-height:36px;padding:0 var(--pista);margin:0 calc(var(--pista) * -1 + 7px);border-top:1px solid #303030;color:var(--tenue);font:700 12px/1 var(--jb);letter-spacing:.6px;text-transform:uppercase}
.maq .pista-toca b{color:var(--d);font-weight:700}

/* ——— 3 · LOS 16 ——— */
.c16{display:flex;flex-direction:column}
.c16 .marco{border-radius:calc(var(--r-box) - var(--aire))}
.c16 .marco>canvas{border-radius:calc(var(--r-box) - var(--aire) - 6px)}
.c16 .linea-16{display:flex;align-items:center;gap:var(--s-texto);height:calc(var(--pieza) + 8px);padding:8px var(--pista) 0 calc(var(--pista) - 6px)}
.c16 .linea-16 .t-rotulo{color:var(--texto)}
.c16 .linea-16 .t-leyenda{margin-left:auto}
.c16 .chapa{width:24px;height:24px;font-size:11px;background:var(--d)}
.c16 .promesa{min-height:calc(var(--l-carta) * 2 + 8px);padding:0 var(--pista) 8px;font:500 var(--f-carta)/var(--l-carta) var(--jb);color:var(--texto)}
.c16 .mas{margin:0 var(--aire);padding:12px calc(var(--pista) - var(--aire)) var(--pista);border-top:1px solid #303030;font:500 var(--f-carta)/var(--l-carta) var(--jb);color:var(--tenue)}

/* ——— 4 · LA CENTRAL ——— */
.central{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--canal)}
.central .lado{grid-column:2/4}
.central .rueda{display:grid;place-items:center;padding:14px}
.central .rueda svg{width:100%;max-width:380px;height:auto}
#rueda g{cursor:pointer;outline:none}
#rueda g:focus-visible path{stroke:#fff}
.central .lado{display:grid;align-content:start;gap:0}
.central .linea-escala{display:flex;justify-content:space-between;align-items:center;min-height:var(--pieza);padding:0 var(--pista)}
.tabla-escala{display:grid;grid-template-columns:auto repeat(7,minmax(0,1fr));gap:4px;padding:4px var(--aire) 10px;align-items:center}
.tabla-escala span{text-align:center;font:500 13px/32px var(--jb)}
.tabla-escala .k{text-align:left;color:var(--tenue);font:700 11px/32px var(--jb);letter-spacing:1.6px;padding:0 10px 0 var(--aire)}
.tabla-escala .g{color:var(--texto);font-weight:700}
.tabla-escala .n{background:var(--fondo);border-radius:16px;border:1px solid var(--linea)}
.tabla-escala .n.t1{color:var(--ahora);border-color:color-mix(in srgb,var(--ahora) 55%,transparent)}
.tabla-escala .a{color:var(--tenue)}
.lineas{display:grid;gap:10px;padding:6px var(--pista) var(--pista);font:500 var(--f-carta)/var(--l-carta) var(--jb);color:var(--lectura)}
.lineas b{color:var(--texto);font-weight:500}
.lineas .prog{display:flex;gap:var(--s-fila-botones);flex-wrap:wrap;margin-top:4px}
.lineas .prog .pastilla{--d:var(--texto);text-transform:none;letter-spacing:.4px;min-width:64px;font-size:13px}
@media (max-width:900px){.central{grid-template-columns:1fr}.central .lado{grid-column:auto}}

/* ——— 6 · LAS CORREAS: la pantalla ocupa dos columnas de cuatro; la otra mitad dice cómo leerla; abajo, las cuatro piezas en la rejilla de cuatro ——— */
.correas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--canal)}
.correas>.caja:first-child{display:flex;flex-direction:column}
#correas-juguete{flex:1;display:flex;flex-direction:column;min-width:0}
#correas-juguete>.cor{flex:1}
.correas .leer{display:grid;align-content:start;padding:var(--aire) 0}
.correas .leer>.t-leyenda{color:var(--texto);display:flex;align-items:center;min-height:36px;padding:0 var(--pista)}
.correas .leer .ficha{margin:0 var(--aire);padding:var(--pista) calc(var(--pista) - var(--aire));border-top:1px solid #303030}
@media (max-width:900px){.correas{grid-template-columns:minmax(0,1fr)}}

/* ——— CONEXIONADO: la lámina del iPad, el hub y los aparatos (js/conexionado.js); su pie (figura, título, leyenda USB / MIDI DIN / reloj y el dato);
   las veinte figuras como la fila de memorias de la app; y EL RUTEO de la figura que suena, con su lectura al lado (el molde de LAS CORREAS) ——— */
/* UNA SOLA REJILLA, la de los bordes de la lámina: las cajas (tira, cuadro de leyenda, tarjetas del RUTEO) van de borde a borde de la lámina y
   todo texto suelto empieza a --conex-in de ese borde (el mismo que el texto dentro de las tarjetas). Espacios: 6 · 14 · 24 */
.conex{--conex-in:var(--pista);display:grid;grid-template-columns:minmax(0,1fr);gap:0}
/* EL APARATO: la tira de transporte con las veinte figuras va dentro del marco de la lámina, pegada a su pie, como parte del aparato */
.conex-figs{display:grid;grid-template-columns:repeat(20,minmax(0,1fr));gap:var(--s-fila-botones);margin-top:6px;padding-top:6px;border-top:1px solid #1e1e20}
.conex-figs .pastilla{--d:var(--sistema);position:relative;min-height:38px;padding:0 0 3px;min-width:0;background:#0c0c0d;border-color:#2b2b2b;font-variant-numeric:tabular-nums}
.conex-figs .pastilla:hover{border-color:color-mix(in srgb,var(--d) 60%,transparent);background:#0c0c0d}
.conex-figs .pastilla[aria-pressed="true"]{background:var(--d);border-color:var(--d);color:#000}
/* EL COMPÁS de la figura que suena: seis rayitas bajo su número, una por compás (se escribe una vez por compás, nunca por fotograma) */
.conex-figs .pastilla[aria-pressed="true"]::after{content:"";position:absolute;left:50%;bottom:5px;width:23px;height:2px;margin-left:-11.5px;
  background:linear-gradient(90deg,#000 calc(var(--c,0) * 4px),rgba(0,0,0,.25) 0);
  -webkit-mask:repeating-linear-gradient(90deg,#000 0 3px,transparent 3px 4px);mask:repeating-linear-gradient(90deg,#000 0 3px,transparent 3px 4px)}
/* EL PIE, a dos zonas: la figura que suena (número y título en una línea, su dato debajo) y, a la derecha, la leyenda en su cuadro */
.conex-pie{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;column-gap:var(--canal);padding-top:var(--pista)}
.conex-que{display:grid;gap:6px;min-width:0;padding:2px var(--conex-in) 0}
.conex-cab{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px var(--pista)}
.conex-cab>.t-rotulo{font-size:14px;color:var(--sistema);font-variant-numeric:tabular-nums}
.conex-tit{font:500 16px/1.3 var(--jb);letter-spacing:1.1px;text-transform:uppercase;color:var(--texto)}
.conex-que>.t-nota{margin:0;color:var(--texto);font-size:14px;line-height:21px;max-width:76ch}
.conex-ley{display:grid;grid-template-rows:repeat(3,auto);grid-auto-flow:column;gap:9px 24px;align-content:start;padding:11px calc(var(--conex-in) - 1px);border:1px solid #303030;border-radius:10px;font:700 11px/1 var(--jb);letter-spacing:1px;text-transform:uppercase;color:var(--lectura);white-space:nowrap}
.conex-ley>span{display:inline-flex;align-items:center;gap:8px}
.conex-ley>span::before{content:"";display:inline-block;flex:none;width:22px;height:0;border-top:1.5px solid var(--sistema)}
.conex-ley>.conex-ley-din::before{border-top:1.5px dashed var(--hueso)}
.conex-ley>.conex-ley-cv::before{border-top:1.5px dotted var(--texto)}
.conex-ley>.conex-ley-link::before{border-top:2px dotted var(--acento)}
.conex-ley>.conex-ley-reloj::before{width:7px;height:7px;margin:0 7.5px;border:0;border-radius:50%;background:var(--ahora)}
/* LAS NOTAS DE DEBAJO: dos sub-bloques rotulados como en un plano (letra, rótulo y un filete hasta el borde) sobre la misma rejilla de doce
   columnas; la misma tarjeta para las siete, numeradas y con su pictograma de línea fina. Aguanta textos de cualquier largo (la fila iguala alto) */
.notas-conex{display:grid;gap:var(--canal);padding:var(--pista) var(--pista) var(--pista)}
.nc{display:grid;gap:var(--pista)}
.nc-cab{display:flex;align-items:center;gap:12px;margin:0;font:500 13px/1.2 var(--jb);letter-spacing:1.4px;text-transform:uppercase;color:var(--sistema)}
.nc-cab::after{content:"";flex:1 1 auto;height:1px;background:#303030}
.nc-l{display:inline-grid;place-items:center;flex:none;width:24px;height:24px;border:1px solid color-mix(in srgb,var(--sistema) 60%,transparent);border-radius:6px;font:700 12px/1 var(--jb);letter-spacing:0}
.nc-rej{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--canal) var(--canal)}
.nc-f{grid-column:span var(--s,4);display:grid;grid-template-rows:auto auto 1fr;gap:10px;align-content:start;min-width:0;padding:var(--pista) var(--pista) calc(var(--pista) + 2px);border:1px solid #363636;border-radius:10px;background:#212121}
.nc-top{display:flex;align-items:center;justify-content:space-between;padding-bottom:10px;border-bottom:1px solid #303030}
.nc-n{font:700 11px/1 var(--jb);letter-spacing:1.2px;color:var(--tenue);font-variant-numeric:tabular-nums}
.nc-pic{width:30px;height:30px;fill:none;stroke:var(--sistema);stroke-width:1.15;stroke-linecap:round;stroke-linejoin:round}
.nc-f>.t-rotulo{margin:0;color:var(--texto)}
.nc-f>p{font:500 var(--f-carta)/var(--l-carta) var(--jb);color:var(--lectura)}
@media (max-width:900px){.nc-f{grid-column:span 6}}
@media (max-width:620px){.notas-conex{padding:12px 4px 6px}.nc-rej{gap:8px}.nc-f{grid-column:1/-1}}
/* EL RUTEO va en la caja de la lámina, bajo los botones de figura, tras un filete fino: la misma pieza. Una tarjeta por aparato, en el orden
   de la lámina y con su rótulo; su conexión con la raya de la leyenda; dentro, sus pistas. Cuando le llega una nota, la tarjeta toma el color
   de la máquina y su canal se enciende, y se apagan con la transición (el JS solo pone y quita una clase). El alto que se reserva para la
   figura más alta queda debajo de lo escrito, nunca entre la lámina y el RUTEO */
.ruteo{display:grid;grid-template-columns:minmax(0,1fr);align-content:start;gap:10px;margin-top:var(--pista);padding:var(--pista) 0 2px;border-top:1px solid #303030;min-width:0}
.ruteo .rt-cab{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;padding:0 var(--conex-in)}
.ruteo .rt-cab>.t-rotulo{color:var(--sistema)}
.ruteo .rt-fig{font:700 12px/1 var(--jb);letter-spacing:1.2px;color:var(--sistema);font-variant-numeric:tabular-nums;white-space:nowrap}
.ruteo .rt-fig::before{content:"· ";color:var(--tenue)}
.ruteo .rt-res{margin-left:auto;font:500 11px/1 var(--jb);letter-spacing:1px;color:var(--tenue);white-space:nowrap}
.ruteo .rt-res i{font-style:normal;color:#5c5c5c}
.ruteo .rt-res b{font-weight:700;color:var(--texto);font-variant-numeric:tabular-nums}
.ruteo .rt-res .rt-funde,.ruteo .rt-res .rt-funde b{color:var(--peligro)}
.ruteo .rt-eq{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:var(--hueco)}
.ruteo .rt-eq.apila{grid-template-columns:repeat(var(--c),minmax(0,1fr));align-items:start}
.ruteo .rt-col{display:grid;align-content:start;gap:var(--hueco);min-width:0}
.ruteo .rt-ap{--f:var(--sistema);display:grid;grid-template-columns:minmax(0,1fr);align-content:start;gap:1px;min-width:0;position:relative;padding:8px calc(var(--conex-in) - 1px) 6px;border:1px solid #363636;border-radius:10px;background:#212121}
/* el encendido va en capas que solo cambian de opacidad (las anima el compositor, sin recalcular estilos en cada fotograma) */
.ruteo .rt-ap::after{content:"";position:absolute;inset:-1px;border:1px solid var(--f);border-radius:inherit;opacity:0;transition:opacity .45s ease-out;pointer-events:none;will-change:opacity}
.ruteo .rt-ap.on::after{opacity:1;transition:none}
.ruteo .rt-ap.mano{border-color:var(--hueso)}
.ruteo .rt-ah{display:grid;gap:4px;padding-bottom:6px;margin-bottom:3px;border-bottom:1px solid #303030}
.ruteo .rt-ac{display:flex;align-items:baseline;gap:4px 10px;font:700 12px/1.35 var(--jb);letter-spacing:1.1px;color:var(--texto)}
.ruteo .rt-ac b{flex:1 1 auto;min-width:0;font-weight:700}
.ruteo .rt-rl{position:relative;z-index:0;display:inline-flex;align-items:center;gap:6px;font:700 11px/1 var(--jb);letter-spacing:1px;color:var(--ahora);white-space:nowrap}
.ruteo .rt-rl::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ahora)}
.ruteo .rt-rl::after{content:"";position:absolute;z-index:-1;left:-3px;top:50%;width:13px;height:13px;margin-top:-6.5px;border-radius:50%;background:color-mix(in srgb,var(--ahora) 45%,transparent);opacity:0;transition:opacity .4s ease-out;will-change:opacity}
.ruteo .rt-rl.on::after{opacity:1;transition:none}
.ruteo .rt-via{display:flex;align-items:flex-end;gap:10px;font:700 11px/1 var(--jb);letter-spacing:.9px;color:var(--sistema);white-space:nowrap}
.ruteo .rt-via>span{display:flex;align-items:baseline;gap:7px;flex:1 1 auto;min-width:0;white-space:normal;line-height:1.35}
.ruteo .rt-via>span::before{content:"";flex:none;width:18px;height:0;border-top:1.5px solid var(--sistema);transform:translateY(-.32em)}
.ruteo .rt-via-din{color:var(--hueso)}
.ruteo .rt-via-din>span::before{border-top:1.5px dashed var(--hueso)}
.ruteo .rt-via-cv{color:var(--texto)}
.ruteo .rt-via-cv>span::before{border-top:1.5px dotted var(--texto)}
.ruteo .rt-via-link{color:var(--acento)}
.ruteo .rt-via-link>span::before{border-top:2px dotted var(--acento)}
.ruteo .rt-via small{font:700 11px/1 var(--jb);letter-spacing:.8px;color:var(--tenue)}
.ruteo .rt-sin{font:500 11px/1.5 var(--jb);letter-spacing:.2px;color:var(--tenue);padding:1px 0 2px}
.ruteo .rt-l{display:grid;grid-template-columns:18px auto minmax(0,1fr) auto;align-items:center;column-gap:6px;min-height:21px;margin:0 -5px;padding:0 5px;border-radius:11px;font:500 11px/1 var(--jb);letter-spacing:.3px;white-space:nowrap}
.ruteo .rt-l.vista{background:color-mix(in srgb,var(--d) 13%,transparent)}
.ruteo .rt-l i{width:18px;height:18px;box-sizing:border-box;border-radius:50%;border:1px solid var(--d);color:var(--d);font:700 11px/16px var(--jb);letter-spacing:-.5px;text-align:center;font-style:normal}
.ruteo .rt-l i:empty{border-color:transparent}
.ruteo .rt-l.sigue b{visibility:hidden}
.ruteo .rt-l b{font-weight:500;color:var(--d)}
.ruteo .rt-voz{min-width:0;color:var(--lectura);overflow:hidden;text-overflow:ellipsis}
.ruteo .rt-l em{position:relative;z-index:0;min-width:22px;height:18px;padding:0 4px;box-sizing:border-box;border-radius:9px;background:color-mix(in srgb,var(--d) 30%,#262626);color:var(--texto);font:700 11px/18px var(--jb);font-style:normal;text-align:center;font-variant-numeric:tabular-nums;transition:color 0s .16s}
.ruteo .rt-l em::before{content:"";position:absolute;z-index:-1;inset:0;border-radius:inherit;background:var(--d);opacity:0;transition:opacity .32s ease-out;will-change:opacity}
.ruteo .rt-l.on em{color:#000;transition:none}
.ruteo .rt-l.on em::before{opacity:1;transition:none}
.ruteo .rt-l.funde .rt-voz{color:var(--peligro)}
.ruteo .rt-l.funde em{background:none;box-shadow:inset 0 0 0 1px var(--peligro);color:var(--peligro)}
.ruteo .rt-pie{padding:0 var(--conex-in);font:500 11px/1.6 var(--jb);letter-spacing:.3px;color:var(--lectura)}
.ruteo .rt-pie .rt-mt{font-weight:700;letter-spacing:1px;margin-right:10px;color:var(--lectura)}
.ruteo .rt-mudas{color:var(--tenue)}
.ruteo .rt-mudas b{font-weight:500;color:var(--d)}
.ruteo .rt-reloj .rt-mt{color:var(--ahora)}
/* EN EL MÓVIL la lámina y el arranque del RUTEO caben en una pantalla: el pie en tres renglones cortos (figura y título, el dato, la leyenda
   en una línea con sus nombres cortos), los veinte botones en una fila que se desliza dentro de su caja y nada por debajo de 11 px */
@media (max-width:620px){
  .conex{--conex-in:11px}
  .conex-pie{grid-template-columns:minmax(0,1fr);row-gap:10px;padding-top:12px}
  .conex-cab>.t-rotulo{font-size:13px}
  .conex-tit{font-size:13px;line-height:1.35;letter-spacing:.6px}
  .conex-que>.t-nota{font-size:13px;line-height:20px}
  /* la leyenda, en su cuadro y en una línea, con los nombres cortos */
  .conex-ley{display:flex;flex-wrap:nowrap;justify-content:space-between;gap:0 10px;padding:9px calc(var(--conex-in) - 1px)}
  .conex-ley>span{gap:5px;font-size:0;letter-spacing:0}
  .conex-ley>span::before{width:14px}
  .conex-ley>.conex-ley-reloj::before{margin:0 3.5px}
  .conex-ley>span::after{content:attr(data-c);font:700 11px/1 var(--jb);letter-spacing:.8px}
  .conex-ley{flex-wrap:wrap;row-gap:8px}
  .conex-figs{display:flex;gap:var(--s-fila-botones);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .conex-figs::-webkit-scrollbar{display:none}
  .conex-figs .pastilla{flex:0 0 40px;min-height:36px;height:36px;scroll-snap-align:center}
  .ruteo{margin-top:12px;padding-top:12px;gap:8px}
  /* una columna de tarjetas: el nombre y, a su derecha, la conexión en corto; debajo, una línea por voz */
  .ruteo .rt-res{margin-left:0;flex-basis:100%;letter-spacing:.3px;white-space:normal;line-height:1.5}
  .ruteo .rt-eq{grid-template-columns:minmax(0,1fr);gap:5px;padding:0}
  .ruteo .rt-ap{padding:6px 10px 4px}
  .ruteo .rt-ah{display:flex;align-items:center;gap:10px;min-height:20px;padding-bottom:4px;margin-bottom:2px}
  .ruteo .rt-ac{flex:1 1 auto;min-width:0;letter-spacing:.7px}
  .ruteo .rt-via{flex:none}
  .ruteo .rt-via>span{align-items:center;font-size:0;letter-spacing:0;gap:6px;white-space:nowrap}
  .ruteo .rt-via>span::before{width:14px;transform:none}
  .ruteo .rt-via>span::after{content:attr(data-c);font:700 11px/1 var(--jb);letter-spacing:.7px}
  .ruteo .rt-via small{display:none}
  .ruteo .rt-l{min-height:20px;letter-spacing:.1px}}

/* ——— 7 · EN DIRECTO: la rejilla de tres; MEMORIAS ocupa dos columnas, los cuatro pasos la tercera y debajo las tres tarjetas ——— */
.directo{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--canal)}
.directo>.memorias{grid-column:1/3;display:grid;grid-template-rows:auto 1fr}
.directo>.memorias>.marco{border-radius:calc(var(--r-box) - var(--aire))}
.directo>.memorias>.marco>canvas{border-radius:calc(var(--r-box) - var(--aire) - 6px)}
.directo>.memorias>.ficha{gap:10px;padding:18px var(--pista) var(--pista)}
.directo>.pasos-caja{display:grid;grid-template-rows:auto 1fr;padding:var(--aire)}
.pasos-caja>.ficha{padding:var(--pista) var(--pista) 4px}
.pasos{list-style:none;padding:0;margin:0;counter-reset:p;display:grid;align-content:start}
.pasos li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;align-content:start;padding:14px var(--pista);font:500 var(--f-carta)/var(--l-carta) var(--jb);color:var(--lectura)}
.pasos li+li{border-top:1px solid #303030;margin:0 var(--aire);padding-inline:calc(var(--pista) - var(--aire))}
.pasos li::before{counter-increment:p;content:counter(p);display:grid;place-items:center;width:24px;height:24px;border-radius:50%;border:1px solid color-mix(in srgb,var(--d) 55%,transparent);color:var(--d);font:700 11px/1 var(--jb)}
@media (max-width:900px){.directo{grid-template-columns:repeat(2,minmax(0,1fr))}.directo>.memorias,.directo>.pasos-caja{grid-column:1/-1}}
@media (max-width:620px){.directo{grid-template-columns:minmax(0,1fr)}}

/* ——— 8 · FICHA TÉCNICA ——— */
/* la ficha: dos columnas de cajas a la misma altura (la última de cada una crece lo que haga falta); la tarjeta de arriba usa EL MISMO reparto, así su segunda columna cae donde cae la de las cajas y la de la entrada */
.datos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--canal)}
.datos .col{display:flex;flex-direction:column;gap:var(--canal)}
.datos .grupo{display:flex;flex-direction:column;flex:1 1 auto;background:var(--panel);border-radius:var(--r-box);padding:var(--aire)}
.datos .grupo .t-leyenda{display:flex;align-items:center;min-height:36px;padding:0 var(--pista)}
.datos dl{display:flex;flex-direction:column;flex:1}
.datos dl div{display:grid;grid-template-columns:128px minmax(0,1fr);gap:14px;flex:1 1 auto;padding:10px var(--pista);border-top:1px solid #303030}
.datos dt{font:500 12px/20px var(--jb);letter-spacing:.6px;text-transform:uppercase;color:var(--tenue)}
.datos dd{font:500 var(--f-carta)/var(--l-carta) var(--jb);color:var(--lectura)}
/* PROBARLA Y QUEDÁRTELA: izquierda, el titular y las dos cifras; derecha, lo que hay que saber. Padding de 0 en la caja y el de la entrada en cada columna */
.precio{--d:var(--texto);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--canal);row-gap:var(--canal);align-items:stretch;padding:var(--aire);background:var(--fondo);border:1px solid color-mix(in srgb,var(--d) 55%,transparent)}
.precio>.izq,.precio>.der{padding:var(--relleno) var(--pista) 0}
.precio .izq{display:grid;align-content:center;gap:var(--s-pieza);padding-bottom:var(--pista)}   /* el titular, centrado en vertical a la izquierda como el texto de la derecha (antes caía al fondo: «un poco pobre») */
.precio .izq .t-rotulo{color:var(--tenue)}
.precio .cifra{font:400 56px/1.05 var(--syne);color:var(--acento);text-wrap:balance}
.precio .der{display:grid;align-content:center;gap:var(--s-pieza);padding-bottom:var(--pista)}
.precio .der p{font:500 15px/24px var(--jb);color:var(--lectura)}
/* LOS DOS SELLOS: juntos, debajo del texto y a su escala; son datos, no botones (sin fondo de pastilla, una raya fina) */
.sellos{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:var(--hueco);margin-top:2px}
.sello{display:inline-flex;align-items:baseline;gap:8px;min-height:34px;padding:8px 14px;border-radius:var(--r-pieza);border:1px solid var(--linea);font:500 12px/18px var(--jb);color:var(--tenue)}
.sello b{font:700 13px/18px var(--jb);letter-spacing:.6px;text-transform:uppercase;color:var(--texto);white-space:nowrap}
@media (max-width:900px){.datos{grid-template-columns:minmax(0,1fr);row-gap:var(--canal)}.datos .col{display:contents}.datos .grupo{flex:none}.precio{grid-template-columns:minmax(0,1fr)}.datos dl div{grid-template-columns:1fr;gap:2px}}
@media (max-width:620px){.precio .cifra{font-size:36px}}

/* ——— CIERRE ——— */
.cierre{--d:var(--hueso)}
.cierre .izq{display:grid;justify-items:center;gap:20px}
.cierre .correo{justify-self:center;padding:0 var(--pista)}
.cierre .izq img{width:52px;height:52px}
.correo{display:inline-flex;align-items:center;gap:12px;flex-wrap:wrap}
.correo code{font:700 13px/1 var(--jb);color:var(--texto);user-select:all;letter-spacing:.3px}

/* ——— EL MENÚ (pie): salvia, como el MENÚ de la app ——— */
.menu{--d:var(--sistema);margin-block:0 calc(var(--desvanece) + 16px + env(safe-area-inset-bottom,0px))}
.menu .rejilla{grid-template-columns:minmax(0,1fr) minmax(0,2fr);align-items:stretch}
.menu .caja{display:grid;gap:var(--hueco);align-content:start}
.menu .cab-menu{display:flex;align-items:baseline;gap:12px;min-height:var(--pieza);padding:12px var(--pista) 0}
.menu .cab-menu b{font:400 18px/1 var(--syne);color:var(--sistema);font-weight:400}
.menu .cab-menu span{font:500 12px/1 var(--jb);color:var(--tenue)}
.menu .entradas{display:grid;gap:var(--hueco)}
.menu .pastilla{--d:var(--sistema)}
.menu .idiomas{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--hueco)}
.menu .idiomas .pastilla{justify-content:center;text-transform:none;padding:0 6px;font:700 12px/1 var(--jb);letter-spacing:.3px}
.menu .contacto{margin-top:var(--hueco)}
.menu .direcciones{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--hueco)}
.menu .dir{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:var(--pieza);padding:0 18px;border-radius:var(--r-pieza);background:var(--fondo);border:1px solid color-mix(in srgb,var(--sistema) 55%,transparent);color:var(--sistema);text-decoration:none;min-width:0}
.menu .dir .t-rotulo{color:var(--tenue)}
.menu .dir-c{font:500 14px/1 var(--jb);letter-spacing:.2px;color:var(--sistema);overflow-wrap:anywhere;text-align:right}
@media (max-width:900px){.menu .direcciones{grid-template-columns:1fr}}
.menu .letra-pie{margin-top:var(--hueco);padding:12px var(--pista);font:500 12px/19px var(--jb);color:var(--tenue);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px var(--pista)}
.menu .letra-pie>p{flex:1 1 420px;min-width:0}
.menu .gracias-b{--d:var(--tenue);min-height:32px;padding:0 14px;color:var(--tenue);font-weight:500;letter-spacing:1px;text-transform:uppercase;font-size:11px}
@media (max-width:900px){.menu .rejilla{grid-template-columns:1fr}}
@media (max-width:620px){.menu .idiomas{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ——— LA VENTANA DE MÁQUINA: centrada, velo sobre todo, borde del dueño ——— */
.velo{position:fixed;inset:0;z-index:50;background:var(--velo);display:grid;place-items:center;padding:16px;opacity:0;pointer-events:none;transition:opacity .08s ease-in}
.velo.abierto{opacity:1;pointer-events:auto;transition:opacity .12s ease-out}
.velo .ventana{width:min(944px,100%);max-height:calc(100dvh - 32px);overflow:auto;overscroll-behavior:contain}
.velo .cabecera{justify-content:center;position:relative;padding:0 var(--pieza)}
.velo .cabecera .placa svg{width:30px;height:24px}
.velo .cabecera .t-titulo{color:var(--d)}
.velo .cabecera .cerrar{position:absolute;right:0;top:0;--d:var(--texto)}
.velo .sub{text-align:center;color:var(--tenue);font:500 12px/1 var(--jb);letter-spacing:.6px;text-transform:uppercase;padding-top:2px}
.velo .cuerpo-v{display:grid;gap:var(--hueco)}
.velo.horno .cuerpo-v{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.velo .oficio{display:grid;gap:12px;align-content:start;padding:var(--pista) calc(var(--pista) + var(--aire)) calc(var(--pista) + 4px)}
.velo .oficio .t-rotulo{color:var(--d)}
.velo .oficio p{color:var(--lectura)}
@media (max-width:700px){.velo.horno .cuerpo-v{grid-template-columns:1fr}.velo .ventana{border-radius:calc(var(--r-box) + 12px)}}

/* ——— PÁGINAS DE TEXTO (privacidad, soporte, aviso legal): ventana sencilla, escala de la AYUDA ——— */
.pagina{--d:var(--sistema);border:1px solid color-mix(in srgb,var(--d) 55%,transparent);border-radius:var(--r-ventana);padding:var(--relleno);background:var(--panel);margin-block:8px 28px}
.pagina .cabecera .t-lema{margin-left:auto}
.pagina .cuerpo-p,.doc .cuerpo-p{columns:2;column-gap:56px;padding:var(--respiro) var(--pista) 18px}
.pagina .cuerpo-p>*,.doc .cuerpo-p>*{break-inside:avoid;margin-bottom:24px}
.pagina .cuerpo-p>:first-child,.doc .cuerpo-p>:first-child{column-span:all}
.pagina h2,.doc .cuerpo-p h2{font:700 11px/1.3 var(--jb);letter-spacing:1.6px;text-transform:uppercase;color:var(--sistema);margin-bottom:8px}
.pagina p,.pagina li,.doc .cuerpo-p p,.doc .cuerpo-p li{color:var(--lectura);max-width:var(--medida)}
.pagina p+p,.doc .cuerpo-p p+p{margin-top:10px}
.pagina b,.doc .cuerpo-p b{color:var(--texto);font-weight:500}
.pagina ul,.doc .cuerpo-p ul{padding-left:18px;display:grid;gap:6px}
.pagina .dim,.doc .cuerpo-p .dim{font:500 12px/19px var(--jb);color:var(--tenue)}
.pagina .pendiente,.doc .cuerpo-p .pendiente{color:var(--ahora)}
.pagina .pregunta,.doc .cuerpo-p .pregunta{border-top:1px solid #303030;padding-top:18px}
.pagina .pregunta h3,.doc .cuerpo-p .pregunta h3{font:400 18px/1.3 var(--syne);color:var(--texto);margin-bottom:8px}
.pagina nav.idiomas,.doc .cuerpo-p nav.idiomas{display:flex;flex-wrap:wrap;gap:6px 14px;font:500 12px/1.6 var(--jb);color:var(--tenue)}
.pagina nav.idiomas a,.doc .cuerpo-p nav.idiomas a{color:var(--tenue)}
/* SOPORTE por temas: sin columnas de periódico; cada tema, su rótulo numerado y sus preguntas en dos columnas que se leen en fila */
.pagina .cuerpo-p>.soporte,.doc .cuerpo-p>.soporte{display:grid;gap:var(--respiro);margin-bottom:0}
.cuerpo-p>.soporte .sop-intro p{max-width:72ch}
.cuerpo-p>.soporte .tema{display:grid;gap:14px}
.cuerpo-p>.soporte .tema h2{display:flex;align-items:center;gap:12px;margin-bottom:0;font-size:12px}
.cuerpo-p>.soporte .tema-n{display:inline-grid;place-items:center;min-width:28px;height:22px;padding:0 6px;border-radius:11px;border:1px solid color-mix(in srgb,var(--sistema) 60%,transparent);font:700 11px/1 var(--jb);letter-spacing:.4px;color:var(--sistema)}
.cuerpo-p>.soporte .tema-rej{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:56px;row-gap:22px}
.cuerpo-p>.soporte .pregunta p{max-width:none}
@media (max-width:900px){.pagina .cuerpo-p,.doc .cuerpo-p{columns:1}.cuerpo-p>.soporte .tema-rej{grid-template-columns:minmax(0,1fr)}}
@media (max-width:620px){.pagina{padding:12px;border-radius:calc(var(--r-box) + 12px)}}

/* ——— TEMPO · CLAVE: la ventana de la app (TempoClaveVentana.swift), en menta; se abre con el reloj de la barra ——— */
.velo[hidden]{display:none}
.velo .ventana.tc{--d:var(--acento);--rueda:clamp(250px,calc(100dvh - 420px),470px);--entre:14px;width:min(1100px,100%);max-height:none;overflow:visible;gap:var(--entre)}
.tc button{cursor:pointer}
.tc-cab{display:grid;grid-template-columns:calc(var(--rueda) + 2 * var(--aire)) minmax(0,1fr) var(--pieza);gap:var(--entre);align-items:center}
.tc-tm{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0}
.tc-tm .t-titulo{color:var(--d);white-space:nowrap;padding-left:var(--aire)}
.tc-x{--d:var(--acento);justify-self:end}
.tc-metro,.tc-tempo{display:flex;align-items:center;gap:var(--hueco)}
.tc-salida{display:grid;place-items:center;min-width:72px;height:var(--pieza);border-radius:var(--r-pieza);background:var(--fondo);border:1px solid var(--linea);color:var(--texto);font:700 12px/1 var(--jb);letter-spacing:.6px;text-transform:uppercase;transition:background .12s,color .12s,border-color .12s}
.tc-salida[aria-pressed="true"]{background:var(--acento);border-color:var(--acento);color:#000}
.tc-tempo{min-width:0}
.tc-lectura{display:flex;align-items:baseline;flex:none;padding-left:calc(var(--pista) - var(--aire));color:var(--acento);font-variant-numeric:tabular-nums;white-space:nowrap}
.tc-lectura b{font:700 30px/1 var(--jb)}
.tc-lectura i{font:700 16px/1 var(--jb);font-style:normal;opacity:.55}
.tc-lectura small{font:700 12px/1 var(--jb);letter-spacing:.6px;color:var(--texto);opacity:.35}
.tc-dial{flex:1 1 0;min-width:96px;height:var(--pieza);border-radius:var(--r-pieza);background:var(--cristal);touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab;overflow:hidden}
.tc-dial.vivo{cursor:grabbing}
.tc-dial canvas{display:block;width:100%;height:var(--pieza)}
.tc-tempo .ntgrupo{flex:none;width:136px}

/* NTGrupo: pastilla de opciones; la elegida, rellena de menta con la letra en negro */
.ntgrupo{--d:var(--acento);display:flex;align-items:stretch;height:var(--pieza);border-radius:var(--r-pieza);background:var(--fondo);border:1px solid color-mix(in srgb,var(--d) 35%,transparent);min-width:0}
.ntgrupo button{flex:1 1 0;min-width:0;position:relative;display:grid;place-items:center;margin:3px;border-radius:var(--r-pieza);padding:0 6px;color:color-mix(in srgb,var(--d) 90%,transparent);font:500 15px/1 var(--jb);letter-spacing:1.2px;text-transform:uppercase;white-space:nowrap;transition:background .12s,color .12s}
.ntgrupo.compacto button,.tc-tempo .ntgrupo button{font:700 12px/1 var(--jb);letter-spacing:.6px}
.ntgrupo button+button::before{content:"";position:absolute;left:-3.5px;top:7px;bottom:7px;width:1px;background:color-mix(in srgb,var(--d) 16%,transparent)}
.ntgrupo button[aria-pressed="true"]{background:var(--d);color:#000}
.ntgrupo button[aria-pressed="true"]::before,.ntgrupo button[aria-pressed="true"]+button::before{opacity:0}
.ntgrupo button[aria-disabled="true"]{opacity:.35}
.ntgrupo.bipolar{--d:var(--bipolar)}
.ntgrupo.bipolar button{font:500 13px/1 var(--jb)}
.ntgrupo.ancho button{font:700 12px/1 var(--jb);letter-spacing:.6px}

/* las cajas de la ventana */
.tc-cuerpo{display:grid;grid-template-columns:calc(var(--rueda) + 2 * var(--aire)) minmax(0,1fr);gap:var(--entre);align-items:stretch}
.tc-clave{display:grid;grid-auto-rows:min-content;gap:var(--hueco);align-content:start;container-type:inline-size}
.tc-cabcaja{display:flex;align-items:center;justify-content:space-between;gap:var(--hueco);height:var(--pieza);padding-left:var(--pista)}
.tc-cabcaja .t-rotulo,.tc-fila>.t-rotulo{color:color-mix(in srgb,var(--acento) 90%,transparent)}
.tc-d{display:flex;align-items:center;gap:var(--hueco)}
.tc-d .ntgrupo{width:150px}
.tc-resto{display:grid;gap:var(--hueco);align-content:start;min-width:0}
.tc-rueda{position:relative;width:var(--rueda);height:var(--rueda);margin:0 auto}
.tc-rueda>*{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.tc-rueda canvas{pointer-events:none}
.tc-fondo text{font-family:var(--jb);fill:#e6e6e6;pointer-events:none}
.tc-fondo .eti{font-size:15px;font-weight:500;fill-opacity:.75}
.tc-fondo .eti.tin{font-weight:700;fill:#fff;fill-opacity:.92}
.tc-fondo .eti.cur{font-size:19px;font-weight:700;fill:var(--acento);fill-opacity:1}
.tc-fondo .eti.ar{font-weight:700;fill:var(--ahora);fill-opacity:1}
.tc-fondo .eti.conpal{transform:translateY(-15px)}
.tc-fondo .pal{font-size:12px;font-weight:700;fill-opacity:.95}
.tc-fondo .cod{font-size:46px;font-weight:700;fill:var(--acento);filter:drop-shadow(0 0 6px rgba(102,237,199,.45))}
.tc-fondo .nom{font-size:14px;font-weight:700;fill-opacity:.75}
.tc-fondo .cae{font-size:12px;font-weight:700;fill:var(--ahora);animation:tcpulso 1.1s ease-in-out infinite alternate}
@keyframes tcpulso{from{opacity:1}to{opacity:.45}}
@media (prefers-reduced-motion:reduce){.tc-fondo .cae{animation:none;opacity:.7}}
.tc-fondo .marca{transform-origin:235px 235px;transition:transform .35s ease-in-out}
@media (prefers-reduced-motion:reduce){.tc-fondo .marca{transition:none}}
.tc-toque .zona{fill:transparent;cursor:pointer;outline:none}
.tc-toque .zona:focus-visible{stroke:#fff;stroke-width:1.5}
.tc-ley{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:center;min-height:34px}
.tc-marca{display:flex;align-items:center;gap:var(--hueco);min-width:0}
.tc-marca i{flex:none;width:var(--pista);height:var(--pista);border-radius:var(--r-min);background:color-mix(in srgb,var(--c) 16%,transparent);border:1px solid var(--c);border-radius:5px}
.tc-marca[data-m="0"]{--c:var(--acento)}.tc-marca[data-m="1"]{--c:rgba(102,237,199,.55)}.tc-marca[data-m="2"]{--c:#FF3D00}.tc-marca[data-m="3"]{--c:var(--ahora)}
.tc-marca span{display:grid;min-width:0}
.tc-marca b{font:700 12px/17px var(--jb);color:var(--texto);white-space:nowrap}
.tc-marca small{font:500 12px/17px var(--jb);color:var(--tenue);white-space:nowrap}
.tc-fila{display:grid;grid-template-columns:112px minmax(0,1fr);align-items:center;gap:var(--hueco);min-height:calc(var(--pieza) + 2 * var(--aire));padding:0}
.tc-fila>.t-rotulo{padding-left:var(--pista);white-space:nowrap}
.tc-fila>.t-rotulo small{display:block;font:500 12px/1 var(--jb);letter-spacing:0;text-transform:none;opacity:.7;margin-top:3px}

/* la derecha */
.tc-der{display:grid;grid-template-rows:auto 1fr auto;gap:var(--entre);min-width:0}
.tc-compas{display:grid;grid-template-columns:112px minmax(0,1fr);align-items:center;gap:var(--hueco);height:calc(var(--pieza) + 2 * var(--aire))}
.tc-compas>.t-rotulo{padding-left:var(--pista);color:color-mix(in srgb,var(--acento) 90%,transparent)}
.tc-visor{display:flex;justify-content:space-around;align-items:center;height:var(--pieza);padding:0 14px;border-radius:var(--r-pieza);background:var(--fondo);border:1px solid var(--linea)}
.tc-visor.parado{opacity:.55}
.tc-visor span{display:flex;gap:4px}
.tc-visor i{display:block;width:16px;height:20px;border-radius:3px;border:1px solid rgba(230,230,230,.3)}
.tc-visor i.pasada{background:color-mix(in srgb,var(--acento) 80%,transparent);border-color:transparent}
.tc-visor i.suena{background:var(--ahora);border-color:var(--ahora);box-shadow:0 0 8px rgba(255,184,46,.6)}
.tc-prog{display:grid;grid-template-rows:auto 1fr}
.tc-estado{color:var(--tenue);white-space:nowrap}
.tc-estado.on{color:var(--acento)}
.interruptor{position:relative;flex:none;width:52px;height:30px;margin-right:7px;border-radius:15px;background:var(--fondo);border:1px solid var(--linea);transition:background .12s,border-color .12s}
.interruptor i{position:absolute;left:3px;top:3px;width:22px;height:22px;border-radius:50%;background:#8a8a8a;transition:transform .15s,background .15s}
.interruptor[aria-checked="true"]{background:color-mix(in srgb,var(--acento) 22%,var(--fondo));border-color:var(--acento)}
.interruptor[aria-checked="true"] i{transform:translateX(22px);background:var(--acento)}
.tc-filas{display:grid;grid-template-rows:auto auto 1fr auto;transition:opacity .15s}
.tc-prog.apagada .tc-filas{opacity:.55}
.tc-modo{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:var(--hueco);align-items:center}
.tc-modo>.ntgrupo:first-child{grid-column:1/4}
.tc-durarot{grid-column:4;padding-left:var(--pista);white-space:nowrap}
.tc-modo>.ntgrupo:last-child{grid-column:5/9}
.tc-ocho{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:var(--hueco)}
.tc-ocho button{height:var(--pieza);border-radius:var(--r-pieza);background:var(--fondo);border:1px solid var(--linea);color:var(--texto);font:700 20px/1 var(--jb);font-variant-numeric:tabular-nums;transition:background .12s,color .12s}
.tc-ocho button.dentro{background:color-mix(in srgb,var(--acento) 16%,transparent);border-color:color-mix(in srgb,var(--acento) 55%,transparent);color:var(--acento)}
.tc-ocho button.ult{background:var(--acento);border-color:var(--acento);color:#000}
.tc-ocho button.fuera{border-style:dashed;opacity:.35}
.tc-ocho button.fuera.ult{opacity:1}
.tc-tira{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:var(--hueco);min-height:56px;padding:var(--aire) var(--aire) var(--aire) calc(112px + var(--hueco) + var(--aire) - var(--aire));background:var(--cristal);border-radius:var(--r-box)}
.tc-slot{display:grid;align-content:center;justify-items:center;gap:3px;border:1px dashed rgba(87,87,87,.55);border-radius:var(--r-pieza);color:var(--texto);font:700 13px/1 var(--jb)}
.tc-slot.dentro{border-style:solid;border-color:color-mix(in srgb,var(--acento) 55%,transparent)}
.tc-slot.elegido{border-color:var(--acento);box-shadow:0 0 10px rgba(102,237,199,.25)}
.tc-slot i{display:block;width:22px;height:2px;background:var(--texto);opacity:.7}
.tc-slot span{font-weight:500;opacity:.85}
.tc-pasoc .tc-cabcaja .t-nota{color:var(--tenue);padding-right:var(--pista);white-space:nowrap}
.tc-acordes{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:var(--hueco)}
.tc-acordes button{display:grid;place-items:center;align-content:center;gap:2px;height:var(--pieza);border-radius:var(--r-pieza);background:var(--fondo);border:1px solid var(--linea);color:var(--texto);padding:0}
.tc-acordes .rm{display:flex;align-items:flex-end;gap:3px;font:500 12px/1 var(--jb);letter-spacing:.3px}
.tc-acordes .nm{font:500 14px/1 var(--jb)}
.tc-acordes .barras{width:10px;height:9px;fill:currentColor}
.tc-acordes button[aria-pressed="true"]{background:var(--acento);border-color:var(--acento);color:#000}
.tc-acordes button[aria-disabled="true"]{opacity:.35}

@media (max-width:1119px),(max-height:759px){
  .tc-cab{grid-template-columns:minmax(0,1fr) var(--pieza)}
  .tc-tempo{grid-column:1/-1;grid-row:2}
  .tc-cuerpo{grid-template-columns:minmax(0,1fr)}
  .tc-der{display:none}
  .tc-ley{grid-template-columns:repeat(2,minmax(0,1fr));max-width:calc(var(--rueda) + 2 * var(--aire));margin:0 auto;width:100%}
  .velo .ventana.tc{--rueda:clamp(220px,min(calc(100dvh - 520px),calc(100vw - 110px)),470px)}
}
@media (min-width:861px) and (max-width:1119px),(min-width:861px) and (max-height:759px){
  .velo .ventana.tc{width:min(880px,100%);--rueda:clamp(220px,min(calc(100dvh - 300px),calc(100vw - 480px)),470px)}
  .tc-clave{grid-template-columns:var(--rueda) minmax(0,1fr);grid-template-areas:"cab cab" "rueda resto";column-gap:var(--entre)}
  .tc-clave>.tc-cabcaja{grid-area:cab}.tc-clave>.tc-rueda{grid-area:rueda}.tc-clave>.tc-resto{grid-area:resto;align-content:center}
  .tc-resto .tc-ley{max-width:none;margin:0}
  .tc-clave .ntgrupo button{font:700 12px/1 var(--jb);letter-spacing:.6px}
}
@media (max-width:760px){.velo .ventana.tc{padding:14px;border-radius:calc(var(--r-box) + 14px)}}
@media (max-width:560px){
  .velo:has(.tc){padding:8px}
  .velo .ventana.tc{--rueda:min(calc(100vw - 72px),calc(100dvh - 292px),400px);--entre:8px;padding:10px;border-radius:calc(var(--r-box) + 10px);gap:8px}
  .tc-metro,.tc-ley,.tc-escala,.tc-ext{display:none}
  .tc-tm .t-titulo{font-size:18px;letter-spacing:1px}
  .tc-tempo{gap:5px}
  .tc-lectura{padding-left:4px}.tc-lectura b{font-size:22px}.tc-lectura i{font-size:13px}.tc-lectura small{display:none}
  .tc-tempo .ntgrupo{width:108px}.tc-tempo .ntgrupo button{padding:0 2px;font-size:11px}
  .tc-dial{min-width:60px}
  .tc-d .ntgrupo{width:112px}
  .tc-fondo .eti{font-size:21px}.tc-fondo .eti.cur{font-size:24px}.tc-fondo .eti.conpal{transform:none}.tc-fondo .pal{display:none}
  .tc-fondo .cod{font-size:52px}.tc-fondo .nom{font-size:16px}
}
@container (max-width:483px){.tc-ley{grid-template-columns:repeat(2,minmax(0,1fr))}}


/* ——— PRIVACIDAD y SOPORTE en la portada: el molde de GRACIAS con el cuerpo de las páginas (.pagina); la cabecera queda fija y se lee dentro; js/documentos.js ——— */
.velo .ventana.doc{--d:var(--sistema);width:min(944px,100%);max-height:min(760px,calc(100dvh - 32px));overflow:visible;display:flex;flex-direction:column}
.doc .cabecera #docCerrar{position:absolute;right:0;top:0;--d:var(--texto)}
.doc .sub{text-transform:none;letter-spacing:.2px;line-height:1.5}
.doc-rollo{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;border-radius:6px;margin-top:calc(var(--respiro) - var(--hueco))}
.doc-rollo:focus-visible{outline:1px solid color-mix(in srgb,var(--sistema) 55%,transparent);outline-offset:-1px}
.doc .cuerpo-p{padding:0 var(--pista) 18px}
@media (max-width:620px){.velo .ventana.doc{padding:12px;border-radius:calc(var(--r-box) + 12px)}.doc .cuerpo-p{padding-inline:8px}.doc-rollo{margin-top:16px}}

/* ——— GRACIAS: el rodillo de créditos de la app (Gracias.swift), al pie de todas las páginas; js/gracias.js ——— */
.velo .ventana.gr{--d:var(--texto);width:min(640px,100%);overflow:hidden}
.gr .cabecera .gr-pausa{position:absolute;left:0;top:0;--d:var(--texto)}
.gr .cabecera #grCerrar{position:absolute;right:0;top:0;--d:var(--texto)}
.gr .gr-pausa .ic-play,.gr .gr-pausa.parado .ic-pausa{display:none}
.gr .gr-pausa.parado .ic-play{display:inline}
.gr-exp{color:var(--lectura);font:500 12px/18px var(--jb);text-align:center;padding:2px var(--pista) 0;max-width:62ch;justify-self:center}
.gr-rodillo{position:relative;height:min(470px,calc(100dvh - 300px));min-height:220px;overflow:hidden;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;
  -webkit-mask-image:linear-gradient(#0000,#000 10%,#000 90%,#0000);mask-image:linear-gradient(#0000,#000 10%,#000 90%,#0000);border-radius:var(--r-box)}
.gr-rodillo.agarra{cursor:grabbing}
.gr-rodillo:focus-visible{outline:1px solid color-mix(in srgb,var(--texto) 55%,transparent);outline-offset:-1px}
.gr-lista{position:absolute;left:0;right:0;top:0;display:grid;gap:34px;padding:8px var(--pista);text-align:center;will-change:transform}
.gr-marca{font:400 34px/1 var(--syne);letter-spacing:3px;color:var(--acento)}
.gr-fam{display:grid;gap:12px;justify-items:center}
.gr-fam h3{font:400 22px/1.15 var(--syne);letter-spacing:1.4px;color:var(--d)}
.gr-lema{font:500 13px/1.4 var(--jb);color:var(--lectura)}
.gr-raya{display:block;width:48px;height:1px;background:color-mix(in srgb,var(--d) 50%,transparent)}
.gr-f{display:grid;gap:2px;max-width:52ch}
.gr-f b{font:700 12px/1.35 var(--jb);letter-spacing:.6px;color:var(--texto)}
.gr-f span{font:500 13px/1.4 var(--jb);color:var(--lectura)}
.gr-ofl{justify-items:stretch;text-align:left;padding:0 var(--aire)}
.gr-ofl h3,.gr-ofl .gr-lema{text-align:center}.gr-ofl .gr-raya{justify-self:center}
.gr-oflt{font:700 13px/1.4 var(--jb);color:var(--texto);padding-top:6px}
.gr-oflp{font:500 11px/1.5 var(--jb);color:var(--lectura)}
.gr-legal{font:500 11px/1.5 var(--jb);color:var(--tenue);max-width:52ch;justify-self:center}
.gr-fin{font:400 18px/1 var(--syne);letter-spacing:1px;color:var(--acento);padding-top:10px}
.gr-pie{text-align:center;color:var(--tenue)}
@media (max-width:620px){.gr-marca{font-size:28px}.gr-fam h3{font-size:19px}.gr-rodillo{height:min(470px,calc(100dvh - 260px))}}

@media (max-width:380px){.conex-ley{gap:8px 6px}.conex-ley>span{gap:4px}.conex-ley>span::before{width:10px}.conex-ley>.conex-ley-reloj::before{margin:0 1.5px}.conex-ley>span::after{letter-spacing:.3px}}   /* a 360 la leyenda cabe en una línea */

/* ——— LA DEMO DE LA CUBA, fila 7 del pupitre: LONGITUD · − · OCTAVA · + (como la de la app) y sus dos ventanas ——— */
.pupitre .fila-botones.registro>.pastilla{padding:0 3px}
.pastilla.valor{font:700 13px/1 var(--jb);letter-spacing:.6px}
.pupitre .fila-botones.registro>.pastilla:not(.valor){font:500 18px/1 var(--jb)}
.velo .ventana.demo-m{width:min(520px,100%);max-height:calc(100dvh - 32px);overflow:auto}
.velo .ventana.dm-oc{width:min(460px,100%)}
.dm-cuerpo{display:grid;gap:var(--hueco);padding:var(--aire)}
.dm-rej{display:grid;gap:var(--s-fila-botones)}
.dm-rej.r8{grid-template-columns:repeat(8,minmax(0,1fr))}
.dm-rej.r6{grid-template-columns:repeat(6,minmax(0,1fr))}
.dm-rej>.pastilla{padding:0;min-width:0}
.dm-nota{color:var(--tenue);text-align:center;padding:0 var(--pista) var(--aire)}
@media (max-width:420px){.dm-rej.r8{grid-template-columns:repeat(4,minmax(0,1fr))}.dm-rej.r6{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* los cuatro deslizadores, un poco más juntos para que la fila nueva no alargue la demo (el alto es el de antes) */
#mandos{padding-block:3.5px}
#mandos .eje{height:48px}
#mandos .eje .linea-rotulo{padding-top:5px;height:20px}
#mandos .eje .carril{top:31px}
.pupitre .caja.botones{gap:var(--s-fila-botones)}

/* ——— LA GUÍA DE LA PRIMERA VEZ QUE SUENA: velo con un hueco sobre TEMPO · CLAVE y una nota que lo señala ——— */
.guia-tc{position:fixed;inset:0;z-index:60;pointer-events:none}
.guia-tc[hidden]{display:none}
.guia-velo{position:absolute;inset:0;pointer-events:auto;background:rgba(5,5,6,.86);touch-action:none;overscroll-behavior:contain;opacity:0;transition:opacity .35s ease-out}
.guia-aro{position:absolute;pointer-events:none;border-radius:calc(var(--r-pieza) + 6px);border:1px solid var(--acento);box-shadow:0 0 16px color-mix(in srgb,var(--acento) 45%,transparent);opacity:0;transition:opacity .35s ease-out}
.guia-nota{--d:var(--acento);position:absolute;width:min(300px,calc(100vw - 32px));display:grid;gap:6px;padding:14px 16px;border-radius:var(--r-box);background:var(--fondo);border:1px solid color-mix(in srgb,var(--d) 55%,transparent);opacity:0;transform:translateY(-6px);transition:opacity .35s ease-out .15s,transform .35s ease-out .15s}
.guia-nota .t-rotulo{color:var(--d)}
.guia-nota p{font:500 13px/20px var(--jb);color:var(--lectura);margin:0}
.guia-pico{position:absolute;top:-6px;width:10px;height:10px;margin-left:-5px;background:var(--fondo);border-left:1px solid color-mix(in srgb,var(--d) 55%,transparent);border-top:1px solid color-mix(in srgb,var(--d) 55%,transparent);transform:rotate(45deg)}
.guia-tc.abierta .guia-velo,.guia-tc.abierta .guia-aro,.guia-tc.abierta .guia-nota{opacity:1}
.guia-tc.abierta .guia-nota{transform:none}
.guia-tc.abierta .guia-aro{animation:guia-late 1.8s ease-in-out infinite}
@keyframes guia-late{0%,100%{box-shadow:0 0 10px color-mix(in srgb,var(--acento) 30%,transparent)}50%{box-shadow:0 0 22px color-mix(in srgb,var(--acento) 70%,transparent)}}
@media (prefers-reduced-motion:reduce){.guia-velo,.guia-aro,.guia-nota{transition:none}.guia-tc.abierta .guia-aro{animation:none}}

/* LOS IDIOMAS CJK (WEB-INTEGRA-1109): solo fuentes del SISTEMA de cada escritura, nada que descargar. JetBrains Mono y Syne Mono se quedan para el latino
   (cifras, MIDI, NULTAKT); lo que ellas no tienen cae en la primera fuente del sistema que exista, sin cajas vacías. Corea separa por palabras, no por sílaba. */
html:lang(ja){--syne:"Syne Mono","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo","Noto Sans CJK JP","Noto Sans JP",sans-serif;
  --jb:"JetBrains Mono","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo","Noto Sans CJK JP","Noto Sans JP",ui-monospace,"SF Mono",Menlo,monospace}
html:lang(ko){--syne:"Syne Mono","Apple SD Gothic Neo","Malgun Gothic","Noto Sans CJK KR","Noto Sans KR",sans-serif;
  --jb:"JetBrains Mono","Apple SD Gothic Neo","Malgun Gothic","Noto Sans CJK KR","Noto Sans KR",ui-monospace,"SF Mono",Menlo,monospace;word-break:keep-all}
html:lang(zh-Hans){--syne:"Syne Mono","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC","Noto Sans SC",sans-serif;
  --jb:"JetBrains Mono","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC","Noto Sans SC",ui-monospace,"SF Mono",Menlo,monospace}
/* sin interletraje en kana, hanzi y hangul (el de 0,6 a 1,4 px es para las latinas y abre demasiado), y sin espacios donde partir: la línea parte donde puede.
   Los párrafos largos y las pastillas no se desbordan en 390 px. */
html:lang(ja) :is(.t-boton,.t-compacto,.t-titulo,.t-rotulo,.t-leyenda,.t-nota,.pastilla),html:lang(zh-Hans) :is(.t-boton,.t-compacto,.t-titulo,.t-rotulo,.t-leyenda,.t-nota,.pastilla),
html:lang(ko) :is(.t-boton,.t-compacto,.t-titulo,.t-rotulo,.t-leyenda,.t-nota,.pastilla){letter-spacing:0}
html:lang(ja) body,html:lang(zh-Hans) body{line-break:strict;overflow-wrap:anywhere}
html:lang(ja) .pastilla,html:lang(zh-Hans) .pastilla,html:lang(ko) .pastilla{white-space:normal;text-align:center}

/* CUANTIZA de TEMPO · CLAVE (WEB-INTEGRA-1109): el grupo de dos opciones crece con su texto y, si no cabe junto al rótulo, baja a otra línea. En castellano e inglés
   («1 C · 4 C») sigue midiendo lo de siempre; en it, nl, pt-br y ja («1 BATT · 4 BATT», «1 MAAT · 4 MATEN», «1 COMPASSO · 4 COMPASSOS») se cortaba. */
.tc-cabcaja{flex-wrap:wrap;height:auto;min-height:var(--pieza)}
.tc-d{margin-left:auto}
.tc-d .ntgrupo{width:auto;min-width:150px}
.tc-d .ntgrupo button{flex:1 0 auto;padding:0 10px}
@media (max-width:560px){.tc-d .ntgrupo{min-width:112px}.tc-d .ntgrupo button{padding:0 7px;font-size:11px;letter-spacing:.2px}.tc-cabcaja{padding-right:var(--aire)}}