/* ==========================================================================
   instrumento.css · /tree-of-life/ (Etz Jaim, sobre vino) y /las-letras/ (papel)
   Instrumentos a pantalla completa: barra · escena (Árbol) + panel de lectura · pie.
   Todo con roles (--c-*): funciona en .s-vino y en papel.
   Marcado del Árbol: build.mjs (instrumentoEstatico) · comportamiento: instrumento.js,
   tree-of-life.js, las-letras.js.
   Índice: 1 armazón · 2 barra y controles · 3 Árbol (lienzo, sendas, nodos, letras,
   efectos) · 4 panel de lectura · 5 Etz Jaim · 6 Las letras · 7 móvil · 8 sin JS / movimiento
   ========================================================================== */

/* 1 · ARMAZÓN ------------------------------------------------------------ */
.instr {
  --instr-ancho: min(100% - 2 * var(--margen), var(--ancho));
  --i-linea: color-mix(in srgb, var(--c-texto) 30%, transparent);
  --i-tenue: color-mix(in srgb, var(--c-texto) 12%, transparent);
  position: relative; background: var(--c-fondo); color: var(--c-texto);
  padding-block: clamp(14px, 2vw, 24px) 14px; overflow-x: clip;
}
.instr__barra, .instr__cuerpo, .instr__pie { width: var(--instr-ancho); margin-inline: auto; }
@media (min-width: 1024px) {
  .instr {
    height: calc(100svh - var(--cabecera)); min-height: 640px;
    display: grid; grid-template-rows: auto minmax(0, 1fr) auto; row-gap: 14px;
  }
  .instr__cuerpo {
    display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--gutter);
    min-height: 0;
  }
  .instr__escena { display: flex; flex-direction: column; align-items: center; gap: 12px; min-height: 0; }
  .instr__lienzo-caja { flex: 1; min-height: 0; width: 100%; container-type: size; display: flex; justify-content: center; }
  .instr__arbol { height: min(100cqh, 100cqw * 348 / 212); }
  .instr__panel {
    min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
    scrollbar-color: var(--i-linea) transparent;
    border-left: 1px solid var(--c-linea); padding: 4px 4px 32px clamp(20px, 2.4vw, 40px);
  }
}

/* 2 · BARRA Y CONTROLES --------------------------------------------------- */
.instr__barra {
  position: relative; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 32px;
  border-top: 1px solid var(--c-fuerte); padding-top: 12px;
}
.instr__etq { color: var(--c-sec); }
.instr__etq::before { content: ""; display: inline-block; width: 7px; height: 7px; background: var(--c-acento); margin-right: 10px; transform: translateY(-1px); }
.instr__etq a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.instr__etq a:hover { color: var(--c-acento-texto); }
.instr__h { margin-top: 8px; font-size: clamp(1.9rem, 2.7vw, 2.75rem); line-height: .95; }
.instr__ctrl { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.instr__progreso { display: flex; align-items: center; gap: 10px; }
.instr__puntos { display: flex; gap: 4px; }
.instr__puntos li { width: 8px; height: 8px; border: 1px solid var(--c-sec); transition: background .3s, border-color .3s; }
.instr__puntos li.is-on { background: var(--c-acento); border-color: var(--c-acento); }
.instr__cuenta { white-space: nowrap; color: var(--c-sec); }
.instr__cuenta b { font-weight: 500; color: var(--c-texto); }
.instr .pildora, .instr .segmentado button { height: 34px; }
.instr__sonido { padding-left: 12px; }
.instr__onda { display: inline-flex; align-items: flex-end; gap: 2px; width: 12px; height: 11px; }
.instr__onda i { flex: 1; height: 30%; background: currentColor; transition: height .3s; }
.instr__sonido[aria-pressed="true"] .instr__onda i { animation: onda 1.1s var(--ease-io) infinite alternate; }
.instr__sonido[aria-pressed="true"] .instr__onda i:nth-child(1) { height: 55%; animation-delay: -.4s; }
.instr__sonido[aria-pressed="true"] .instr__onda i:nth-child(2) { height: 100%; animation-delay: -.8s; }
.instr__sonido[aria-pressed="true"] .instr__onda i:nth-child(3) { height: 70%; }
.instr__sonido[aria-pressed="false"] { color: var(--c-sec); border-color: var(--c-sec); background: transparent; }
.instr__sonido[aria-pressed="true"] { background: transparent; color: var(--c-texto); border-color: var(--c-fuerte); }
.instr__sonido[aria-pressed="true"]:hover { color: var(--c-acento-texto); border-color: var(--c-acento); }
@keyframes onda { to { transform: scaleY(.35); } }
.instr__onda i { transform-origin: 50% 100%; }
.instr__aviso {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 45; width: max-content; max-width: min(56ch, 100% - 24px); text-align: left;
  background: var(--c-texto); color: var(--c-fondo); padding: 10px 14px; line-height: 1.5;
  text-transform: none; letter-spacing: .02em; animation: ficha-in .45s var(--ease);
}
.instr__aviso b { font-weight: 500; text-transform: uppercase; letter-spacing: .06em; }
.instr__pie { border-top: 1px solid var(--c-linea); padding-top: 10px; color: var(--c-sec); font-size: .625rem; line-height: 1.7; }
.instr__pie a { text-decoration: underline; text-underline-offset: 3px; }
.instr__pie a:hover { color: var(--c-acento-texto); }

/* 3 · ÁRBOL --------------------------------------------------------------- */
/* caja 212 × 348: 22 unidades de pilares encima del lienzo (viewBox 212 × 326) */
.instr__arbol { position: relative; aspect-ratio: 212 / 348; max-width: 100%; }
.inst-pilares { position: absolute; inset: 0 0 auto 0; height: calc(100% * 22 / 348); }
.inst-pilares li {
  position: absolute; left: var(--x); top: 50%; transform: translate(-50%, -50%);
  font-size: .5625rem; letter-spacing: .16em; color: var(--c-sec); white-space: nowrap;
}
.inst-lienzo {
  position: absolute; inset: auto 0 0 0; height: calc(100% * 326 / 348);
  container-type: inline-size; touch-action: manipulation;
}
.inst-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.inst-guias line { stroke: var(--c-texto); stroke-opacity: .08; stroke-width: .5; stroke-dasharray: 2 3; }
.inst-senda {
  fill: none; stroke: var(--c-texto); stroke-opacity: .3; stroke-width: .5; stroke-linecap: round;
  transition: stroke .35s, stroke-opacity .35s, stroke-width .35s;
}
.inst-senda.is-previa { stroke-opacity: .6; }
.inst-senda.is-encendida { stroke: var(--c-acento); stroke-opacity: .6; stroke-width: .75; }
.inst-senda.is-activa { stroke: var(--c-acento); stroke-opacity: 1; stroke-width: 1.25; }
.inst-pulso { fill: var(--senal); }
.inst-pulso-cola { stroke: var(--senal); stroke-width: 1.2; stroke-linecap: round; }
.inst-anillo { fill: none; stroke: var(--c-texto); stroke-width: .5; stroke-dasharray: 1.5 2; }

/* nodos · el tamaño va con el ancho del lienzo */
.inst-nodo {
  --r: clamp(30px, 10.5cqw, 58px);
  position: absolute; left: var(--x); top: var(--y); width: var(--r); height: var(--r); z-index: 3;
  transform: translate(-50%, -50%); -webkit-tap-highlight-color: transparent;
}
button.inst-nodo::before { content: ""; position: absolute; left: 50%; top: 50%; width: max(var(--r), 44px); height: max(var(--r), 44px); transform: translate(-50%, -50%); }
.inst-nodo__c {
  position: absolute; left: 50%; top: 50%; width: var(--r); height: var(--r); transform: translate(-50%, -50%);
  display: grid; place-items: center; border-radius: 50%;
  border: 1px solid var(--i-linea); background: var(--c-fondo); color: var(--c-sec);
  transition: background .3s, border-color .3s, color .3s, transform .45s var(--ease);
}
.inst-nodo__he { font-family: var(--f-he); font-size: calc(var(--r) * .34); line-height: 1; transform: translateY(-4%); }
.inst-nodo__n {
  position: absolute; left: calc(100% + 4px); top: 50%; transform: translateY(-50%);
  font-size: clamp(.5rem, 2.2cqw, .6875rem); letter-spacing: .05em; white-space: nowrap; line-height: 1.2;
  padding: 1px 3px; background: var(--c-fondo); color: var(--c-sec); transition: color .3s;
}
button.inst-nodo:hover .inst-nodo__c, button.inst-nodo:focus-visible .inst-nodo__c { border-color: var(--c-acento); color: var(--c-texto); }
button.inst-nodo:hover .inst-nodo__n, button.inst-nodo:focus-visible .inst-nodo__n { color: var(--c-texto); }
button.inst-nodo:focus-visible { outline: none; }
button.inst-nodo:focus-visible .inst-nodo__c { box-shadow: var(--foco); }
.inst-nodo.is-visitada .inst-nodo__c { border-color: var(--c-acento); color: var(--c-acento-texto); }
.inst-nodo.is-visitada .inst-nodo__c::after { content: ""; position: absolute; right: 8%; top: 8%; width: 5px; height: 5px; background: var(--c-acento); }
.inst-nodo[aria-pressed="true"] .inst-nodo__c { background: var(--c-acento); border-color: var(--c-acento); color: var(--c-fondo); transform: translate(-50%, -50%) scale(1.08); }
.inst-nodo[aria-pressed="true"] .inst-nodo__c::after { background: var(--c-fondo); }
.inst-nodo[aria-pressed="true"] .inst-nodo__n { color: var(--c-acento-texto); }
/* etiquetas al lado: el pilar izquierdo hacia fuera por la izquierda; el resto, a la derecha */
.inst-nodo[data-pilar="izquierdo"] .inst-nodo__n { left: auto; right: calc(100% + 4px); }
[aria-pressed="true"].inst-nodo .inst-nodo__n { left: calc(100% + 9px); }
[aria-pressed="true"].inst-nodo[data-pilar="izquierdo"] .inst-nodo__n { left: auto; right: calc(100% + 9px); }
/* «estás aquí»: el anillo señal alrededor de la Sefirá tocada */
.inst-nodo[aria-pressed="true"]::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: calc(var(--r) * 1.08 + 10px); height: calc(var(--r) * 1.08 + 10px);
  transform: translate(-50%, -50%); border: 1px solid var(--senal); border-radius: 50%; pointer-events: none;
}
/* Daat: punteado, más pequeño */
.inst-nodo--daat { --r: clamp(24px, 7.6cqw, 42px); z-index: 2; }
.inst-nodo--daat .inst-nodo__c { border-style: dashed; border-color: color-mix(in srgb, var(--c-texto) 45%, transparent); }
.inst-nodo--daat .inst-nodo__n { font-size: clamp(.5rem, 2cqw, .625rem); }

/* letras sobre las sendas */
.inst-letra {
  --t: clamp(15px, 5.2cqw, 26px);
  position: absolute; left: var(--x); top: var(--y); z-index: 2; transform: translate(-50%, -50%);
  display: grid; place-items: center; min-width: var(--t); height: var(--t); padding: 0 2px;
  font-family: var(--f-he); font-size: calc(var(--t) * .66); line-height: 1;
  background: var(--c-fondo); color: var(--c-acento-texto);
}
.inst-letra span { transform: translateY(-3%); }

/* Maguén David (mi lectura) · colores propios, distintos del fucsia del resto del
   instrumento — el superior en un amarillo intenso, el inferior en un turquesa
   intenso, para que las dos estrellas se distingan a simple vista. Fijos (no
   tokens de tema) porque este dibujo sólo vive sobre el fondo vino. */
.inst-maguen polygon { fill: none; stroke: none; stroke-linejoin: round; }
.inst-maguen.is-on polygon { transition: opacity .6s; }
.inst-maguen--superior.is-on polygon { stroke: #F0C419; stroke-width: .9; fill: color-mix(in srgb, #F0C419 9%, transparent); }
.inst-maguen--inferior.is-on polygon { stroke: #16C2C0; stroke-opacity: .95; stroke-width: .9; stroke-dasharray: 3 2; fill: color-mix(in srgb, #16C2C0 7%, transparent); }
/* los botones «Superior/Inferior» heredan el mismo color al activarse */
[data-maguen="superior"][aria-pressed="true"] { background: #F0C419; border-color: #F0C419; color: #1a1305; }
[data-maguen="inferior"][aria-pressed="true"] { background: #16C2C0; border-color: #16C2C0; color: #06201f; }
.inst-maguen.is-dibuja polygon { animation: maguen-in .9s var(--ease) both; }
.inst-maguen.is-dibuja polygon + polygon { animation-delay: .35s; }
@keyframes maguen-in { from { opacity: 0; } }

/* 4 · PANEL DE LECTURA ---------------------------------------------------- */
.lec { border-top: 1px solid var(--c-fuerte); padding-top: 12px; }
.lec + .lec:not([hidden]) { margin-top: 40px; }
html:not(.js) .lec + .lec { margin-top: 56px; }
.lec.is-entra { animation: ficha-in .45s var(--ease); }
.lec__cab { display: flex; justify-content: space-between; gap: 16px; color: var(--c-sec); }
.lec__h { margin-top: 14px; font-size: clamp(2.5rem, 3.9vw, 4rem); line-height: .95; }
.lec__he { display: inline-block; margin-left: .2em; font-family: var(--f-he); font-size: .7em; color: var(--c-acento-texto); line-height: 1; }
.lt-grupo .lec__h { font-size: clamp(2.2rem, 3.2vw, 3.2rem); }
.lec__sig { margin-top: 6px; font-style: italic; font-size: clamp(1.15rem, 1.4vw, 1.35rem); color: var(--c-sec); }
.lec__lectura {
  position: relative; margin-top: 20px; padding-left: 1.1em; max-width: 42ch;
  font-style: italic; font-size: clamp(1.2rem, 1.5vw, 1.4rem); line-height: 1.35;
}
.lec__lectura::before { content: ""; position: absolute; left: 0; top: .6em; width: 5px; height: 5px; background: var(--c-acento); }
.lec__texto { margin-top: 14px; max-width: 54ch; font-size: 1.0625rem; line-height: 1.55; }
.lec__texto p + p { margin-top: .7em; }
.lec__datos { margin-top: 20px; border-top: 1px solid var(--c-linea); }
.lec__datos > div { display: grid; grid-template-columns: 11ch minmax(0, 1fr); gap: 12px; padding: 9px 0 8px; border-bottom: 1px solid var(--c-linea); align-items: baseline; }
.lec__datos dt { color: var(--c-sec); font-size: .6875rem; }
.lec__datos dd { font-size: 1.0625rem; line-height: 1.4; }
.lec__heb, .lec__calc { font-family: var(--f-he); color: var(--c-sec); margin-left: .3em; }
.lec__vecinos { display: flex; flex-wrap: wrap; gap: 6px; }
.lec__vecinos .pildora { height: 34px; }
.lec__vecino-he { font-family: var(--f-he); font-size: 1rem; letter-spacing: 0; text-transform: none; color: var(--c-acento-texto); }
.lec__vecinos .pildora:hover .lec__vecino-he { color: inherit; }
.lec__calc-n { margin-top: 8px; color: var(--c-sec); font-size: .625rem; }
.lec__fuente { margin-top: 16px; color: var(--c-sec); font-size: .625rem; }
.lec__nota { margin-top: 14px; color: var(--c-sec); font-size: .625rem; line-height: 1.7; }
.lec__versiculo { margin-top: 10px; font-family: var(--f-he); font-size: clamp(1.8rem, 2.6vw, 2.4rem); line-height: 1.2; }
.lec__acciones { margin-top: 22px; }
.lec__enlaces { margin-top: 24px; }
.lec--resumen .lec__vecinos { margin-top: 14px; }

/* 5 · ETZ JAIM ------------------------------------------------------------ */
.pagina-tree .inst-letra {
  --t: clamp(14px, 4.6cqw, 22px); border: 1px solid transparent;
  opacity: 0; pointer-events: none; transition: opacity .45s, color .3s, border-color .3s;
}
.pagina-tree .inst-letra.is-encendida { opacity: .85; }
.pagina-tree .inst-letra.is-activa { opacity: 1; color: var(--c-texto); border-color: var(--c-acento); }
.pagina-tree [class*="is-maguen-"] .inst-letra:not(.is-activa) { background: transparent; }
.lec--daat { border-top-style: dashed; }
.lec--daat .lec__he { color: var(--c-texto); }
.lec--plenitud { border-top: 2px solid var(--c-acento); }
.lec--maguen .lec__cab span:last-child { color: var(--c-acento-texto); }
.instr__maguen { justify-content: center; }
.instr__maguen-mi { text-transform: none; letter-spacing: .02em; }
/* plenitud: el Árbol entero */
.is-plenitud .inst-senda { stroke: var(--c-acento); stroke-opacity: .85; stroke-width: .8; }
.is-plenitud .inst-senda.is-activa { stroke-opacity: 1; stroke-width: 1.25; }
.is-plenitud .inst-nodo:not([aria-pressed="true"]) .inst-nodo__c { background: color-mix(in srgb, var(--c-acento) 16%, var(--c-fondo)); color: var(--c-texto); }
.is-plenitud .inst-letra { opacity: 1; }
.is-trazando .inst-senda { stroke-dasharray: 1; animation: trazo 1s var(--ease) var(--d, 0s) both; }
@keyframes trazo { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
/* Daat: las sendas destellan desde el centro hacia fuera */
.is-daat .inst-senda { animation: destello 1.3s var(--ease-io) var(--dd, 0s) both; }
@keyframes destello {
  0% { stroke-opacity: inherit; }
  35% { stroke: var(--c-texto); stroke-opacity: 1; stroke-width: 1.1; }
  100% { stroke-opacity: inherit; }
}
.is-daat .inst-nodo--daat .inst-nodo__c { border-style: solid; border-color: var(--c-texto); }

/* 6 · LAS LETRAS ---------------------------------------------------------- */
.pagina-letras .inst-nodo { --r: clamp(22px, 7.4cqw, 40px); z-index: 1; }
.pagina-letras .inst-nodo__c { border-color: var(--c-fuerte); color: var(--c-texto); }
.pagina-letras .inst-nodo__n { font-size: clamp(.5rem, 2.1cqw, .625rem); }
.pagina-letras .inst-nodo--daat { --r: clamp(18px, 5.6cqw, 30px); }
.pagina-letras .inst-nodo--daat .inst-nodo__c { border-color: var(--c-sec); color: var(--c-sec); }
.pagina-letras .inst-nodo--daat .inst-nodo__he { font-size: calc(var(--r) * .4); }
.pagina-letras .inst-nodo.is-extremo .inst-nodo__c { border-color: var(--c-acento); background: var(--c-acento); color: var(--c-invertido); }
.pagina-letras .inst-nodo.is-extremo .inst-nodo__n { color: var(--c-acento-texto); }
.pagina-letras .inst-senda { stroke-opacity: .38; stroke-width: .6; }
.pagina-letras .inst-senda.is-grupo { stroke: var(--c-acento); stroke-opacity: .85; stroke-width: .9; }
.pagina-letras .inst-senda.is-fuera { stroke-opacity: .1; }
.pagina-letras .inst-senda.is-activa { stroke: var(--c-acento); stroke-opacity: 1; stroke-width: 1.6; }
button.inst-letra {
  --t: clamp(22px, 6.8cqw, 34px);
  border: 1px solid var(--c-fuerte); color: var(--c-texto); cursor: pointer;
  transition: background .25s, color .25s, border-color .25s, opacity .35s, transform .35s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
button.inst-letra::before { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 40px); height: max(100%, 40px); transform: translate(-50%, -50%); }
.inst-letra--madres { --t: clamp(27px, 8.4cqw, 42px) !important; border-width: 2px !important; }
.inst-letra--dobles { --t: clamp(24px, 7.5cqw, 38px) !important; }
button.inst-letra:hover { border-color: var(--c-acento); color: var(--c-acento-texto); }
button.inst-letra:focus-visible { outline: none; box-shadow: var(--foco); }
button.inst-letra.is-grupo { border-color: var(--c-acento); color: var(--c-acento-texto); }
button.inst-letra.is-fuera { opacity: .22; }
button.inst-letra.is-fuera:hover, button.inst-letra.is-fuera:focus-visible { opacity: 1; }
button.inst-letra.is-luz { transform: translate(-50%, -50%) scale(1.18); }
button.inst-letra[aria-pressed="true"] { background: var(--c-acento); border-color: var(--c-acento); color: var(--c-invertido); opacity: 1; transform: translate(-50%, -50%) scale(1.12); }
button.inst-letra[aria-pressed="true"]::after {
  content: ""; position: absolute; inset: -6px; border: 1px solid var(--senal); pointer-events: none;
}
.inst-letra--vacia { --t: clamp(12px, 3.8cqw, 18px); min-width: var(--t); border: 1px dashed var(--c-sec); opacity: .8; }
.inst-letra--vacia.is-fuera { opacity: .2; }

/* grupo (texto de la familia) */
.lt-grupo__letras { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 16px; font-family: var(--f-he); font-size: clamp(1.6rem, 2.3vw, 2.2rem); line-height: 1.2; }
.lt-grupo__letras span { color: var(--c-sec); transition: color .3s; }
.lt-grupo__letras span.is-luz, html:not(.js) .lt-grupo__letras span { color: var(--c-acento-texto); }
/* ficha de la letra elegida */
.lt-ficha__fila { display: flex; align-items: flex-end; gap: 20px; margin-top: 12px; }
.lt-ficha__he { font-family: var(--f-he); font-size: clamp(5rem, 8vw, 7.5rem); line-height: .9; color: var(--c-acento-texto); }
.lt-ficha__n { font-size: clamp(2.4rem, 3.6vw, 3.6rem); line-height: .95; }
.lt-ficha__v { margin-top: 6px; color: var(--c-sec); }
.lt-ficha__v .cifra { font-family: var(--f-display); font-size: 1.6rem; color: var(--c-texto); margin-right: .25em; }
/* índice de las 22 */
.lt-lista { margin-top: 28px; border-top: 1px solid var(--c-fuerte); }
.lt-lista__cab { display: flex; justify-content: space-between; margin-top: 36px; color: var(--c-sec); }
.lt-fila__btn {
  display: grid; grid-template-columns: 2.2em minmax(0, .9fr) minmax(0, 1.4fr) 3.2em; column-gap: 12px; align-items: baseline;
  width: 100%; padding: 10px 6px 9px; border-bottom: 1px solid var(--c-linea); text-align: left;
  transition: background .25s, color .25s;
}
.lt-fila__btn:hover { background: color-mix(in srgb, var(--c-acento) 6%, transparent); }
.lt-fila__btn[aria-pressed="true"] { background: var(--c-fuerte); color: var(--c-invertido); }
.lt-fila__btn[aria-pressed="true"] .lt-fila__he, .lt-fila__btn[aria-pressed="true"] .lt-fila__g, .lt-fila__btn[aria-pressed="true"] .lt-fila__s { color: inherit; }
.lt-fila__he { font-family: var(--f-he); font-size: 1.6rem; line-height: 1; color: var(--c-acento-texto); text-align: center; }
.lt-fila__n { font-family: var(--f-display); font-size: 1.25rem; line-height: 1.1; }
.lt-fila__g { display: block; margin-top: 3px; font-size: .5625rem; color: var(--c-sec); }
.lt-fila__c { font-size: 1rem; line-height: 1.35; }
.lt-fila__s { display: block; margin-top: 3px; font-size: .5625rem; color: var(--c-sec); }
.lt-fila__s .por-confirmar { font-size: inherit; }
.lt-fila__v { text-align: right; font-family: var(--f-display); font-size: 1.2rem; }
.lt-fuentes { margin-top: 22px; max-width: 56ch; color: var(--c-sec); font-size: .9375rem; line-height: 1.5; font-style: italic; }

/* hoja móvil */
.instr__hoja {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 40;
  display: flex; align-items: center; gap: 12px; padding: 6px 6px 6px 16px;
  background: var(--c-texto); color: var(--c-fondo); animation: ficha-in .35s var(--ease);
}
.instr__hoja-t { flex: 1; min-width: 0; font-family: var(--f-display); font-size: 1.3rem; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.instr__hoja-he { font-family: var(--f-he); font-size: .9em; margin-left: .2em; }
.instr__hoja-leer { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border: 1px solid currentColor; border-radius: 999px; text-decoration: none; }
.instr__hoja-x { width: 44px; height: 44px; font-size: 1.6rem; line-height: 1; }
.instr__hoja-leer:focus-visible, .instr__hoja-x:focus-visible { outline-color: var(--c-fondo); }

.instr-sigue .enlaces { gap: 14px 40px; }

/* 7 · MÓVIL Y TABLETA ------------------------------------------------------ */
@media (max-width: 1023px) {
  .instr { padding-bottom: 8px; }
  .instr__h { font-size: clamp(1.9rem, 7vw, 2.8rem); }
  .instr__ctrl { width: 100%; justify-content: space-between; }
  .instr__cuerpo { margin-top: 18px; }
  .instr__escena { display: flex; flex-direction: column; align-items: center; gap: 14px; }
  .instr__lienzo-caja { width: 100%; display: flex; justify-content: center; }
  .instr__arbol { width: min(100%, 540px, (100svh - var(--cabecera) - 90px) * 212 / 348); }
  .instr__panel { margin-top: 28px; padding-bottom: 24px; scroll-margin-top: calc(var(--cabecera) + 12px); }
  .instr .pildora, .instr .segmentado button, .lec__vecinos .pildora { height: 40px; }
  .instr__aviso { left: 12px; right: 12px; bottom: auto; top: calc(var(--cabecera) + 8px); transform: none; width: auto; max-width: none; }
  .lec__h { font-size: clamp(2.4rem, 10vw, 3.4rem); }
}
@media (max-width: 767px) {
  .instr__pie { font-size: .5625rem; }
  .lt-filtro { display: grid; grid-template-columns: .9fr 1fr 1fr 1.1fr; width: 100%; gap: 5px; }
  .lt-filtro .segmentado__etq { display: none; }
  .instr .lt-filtro button { padding: 0 2px; justify-content: center; white-space: nowrap; font-size: .5625rem; letter-spacing: .02em; }
  .lt-fila__btn { grid-template-columns: 2em minmax(0, 1fr) 2.6em; row-gap: 4px; }
  .lt-fila__c { grid-column: 2 / 3; grid-row: 2; }
  .lt-fila__v { grid-column: 3; grid-row: 1; }
  .instr__cuenta-t { display: inline; }
}
@media (max-width: 400px) {
  .instr__puntos { gap: 3px; }
  .instr__puntos li { width: 6px; height: 6px; }
  .instr .segmentado { gap: 5px; }
  .instr .segmentado button { padding: 0 10px; }
}
@media (pointer: coarse) {
  .instr .pildora, .instr .segmentado button { min-height: 40px; }
}

/* 8 · SIN JS Y MOVIMIENTO -------------------------------------------------- */
html:not(.js) .instr__solo-js, html:not(.js) .instr__ctrl, html:not(.js) .instr__maguen, html:not(.js) .lt-filtro { display: none; }
html:not(.js) .pagina-tree .inst-letra { opacity: .8; }
@media (prefers-reduced-motion: reduce) {
  .instr__sonido[aria-pressed="true"] .instr__onda i { animation: none; }
  .is-trazando .inst-senda, .is-daat .inst-senda, .inst-maguen.is-dibuja polygon { animation: none; }
}