/* estilo.css — mundo Brasa: pieza de museo en penumbra calida.
   Sin un solo hex aqui: el color vive en tokens.css (test_web_ui_estructura lo vigila). */
* { box-sizing: border-box; }
html { min-width: 0; background: var(--fondo); scroll-padding-top: calc(var(--alto-barra) + 18px); }
body { min-width: 0; min-height: 100vh; margin: 0; overflow-x: hidden; background: var(--fondo); color: var(--hueso); font-family: var(--prosa); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
button, textarea { font: inherit; }
/* Superficies del navegador desde la paleta: el cursor de texto tambien es brasa. */
input, textarea { caret-color: var(--catodo); }
::selection { background: color-mix(in srgb, var(--catodo) 32%, transparent); color: var(--hueso); }
:focus-visible { outline: 2px solid var(--catodo); outline-offset: 3px; }
* { scrollbar-color: var(--bronce) var(--fondo); scrollbar-width: thin; }
/* La misma scrollbar fina en bronce para WebKit, que no lee scrollbar-color. */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--bronce); border-radius: 4px; }
::-webkit-scrollbar-track { background: var(--fondo); }
/* Un solo aire bajo el subrayado en toda la web. */
a { text-underline-offset: 3px; }
.saltar { position: absolute; z-index: 40; top: 8px; left: 8px; padding: 8px 12px; transform: translateY(-160%); background: var(--panel); color: var(--hueso); font: 700 .75rem/1 var(--datos); }
/* Al enfocarse es un boton de verdad y se toca con el dedo: 44px de alto y letra de 16px, el
   minimo que un telefono acierta (spec movil §5). El tamaño solo manda cuando aparece. */
.saltar:focus { transform: none; min-height: 44px; font-size: 1rem; }
.solo-lectores { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ——— barra superior fija: wordmark a la izquierda, cuatro secciones a la derecha ——— */
#barra { position: fixed; z-index: 30; top: 0; right: 0; left: 0; display: flex; align-items: center; justify-content: space-between; gap: 24px; height: var(--alto-barra); padding: 0 24px; background: transparent; transition: background-color var(--t-seccion) ease; }
body.leida #barra { background: color-mix(in srgb, var(--fondo) 86%, transparent); }
.casa { margin: 0; color: var(--hueso); font: 500 .8125rem/1 var(--condensada); letter-spacing: .02em; text-transform: none; }
#secciones { display: flex; gap: 28px; padding: 0; margin: 0; list-style: none; }
#secciones li { display: flex; }
#secciones button { min-height: 44px; border: 0; border-bottom: 1px solid transparent; padding: 4px 0 0; background: none; color: var(--hueso-3); font: 500 .75rem/1 var(--condensada); letter-spacing: .02em; text-transform: none; cursor: pointer; transition: color var(--t-seccion) ease; }
#secciones button:hover, #secciones button:focus-visible { color: var(--hueso); }
#secciones button[aria-selected="true"] { color: var(--hueso); border-bottom-color: var(--bronce); }
/* El rotulo corto de una pestaña («Elisa» por «Chat con Elisa») vive solo en la barra inferior del
   telefono: aqui no ocupa sitio ni se lee. Sin esta regla los dos rotulos conviven en la barra de
   arriba —«Chat con ElisaElisa», 126px de mas— y el escritorio cambia sin que nadie lo pida. */
.rotulo-corto { display: none; }
/* El indicador de actividad del chat vacio reservaba 26px entre «Chat con Elisa» y «Newsletter»:
   hueco irregular en la barra. Oculto, el hueco se iguala al resto. */
#chat-actividad[aria-hidden="true"] { display: none; }

/* ——— contenido ——— */
#contenido { min-width: 0; min-height: 100vh; padding: calc(var(--alto-barra) + 24px) 42px 40px; }
#contenido section[hidden] { display: none; }
#contenido .respuesta, #contenido .prosa-panel, #contenido #vacio, #biblioteca-indice { max-width: 68ch; }

/* ——— hero: titular / cerebro / nota, a un viewport ——— */
/* La pieza es el foco: su columna es ~44% del ancho util (regla del spec brasa plena: 42-48%) y
   esta lo bastante ancha para no recortarla: el TAMAÑO de la pieza lo pone su alto, que sale de lo
   que de verdad queda en el primer viewport (viewport menos barra, caja de pregunta y el resto de
   piezas menudas), y la columna solo tiene que darle sitio.
   Desde el 2026-09-22 la constelacion no existe: los 140px que su fila de orbes le quitaban al
   primer viewport se los queda la pieza (medido a 1440x900: de 450 a 590px de lado, 43% del ancho
   util frente al 33% de antes). */
#hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(340px, 44vw) minmax(0, .8fr); gap: 18px; align-items: center; min-height: calc(100svh - var(--alto-barra) - var(--alto-entrada) - 40px); }
.hero-tag { margin: 0 0 18px; color: var(--catodo); font: 500 .75rem/1 var(--condensada); letter-spacing: .16em; text-transform: none; }
.hero-claim { position: relative; z-index: 2; }
/* El velo: el dibujo desborda por detras del titular, asi que el texto necesita suelo propio.
   Un degradado de fondo, no un filtro, para no repintar la pieza en cada fotograma. */
.hero-claim::before {
  content: ""; position: absolute; z-index: -1;
  inset: -6% -14% -6% -50%;
  background: radial-gradient(ellipse at 35% 50%,
              color-mix(in srgb, var(--fondo) 92%, transparent) 0%,
              color-mix(in srgb, var(--fondo) 70%, transparent) 55%,
              transparent 78%);
  pointer-events: none;
}
/* El titular sube a display (techo 6rem, interletrado dentro de -0.04em) y se compone CON la
   pieza: la linea mas larga puede pisar el borde de la columna del cerebro, siempre por encima
   y con el velo detras para no bajar de AA. */
.hero-claim h1 { margin: 0; color: var(--hueso); font: 500 clamp(2.6rem, 4.2vw, 6rem)/0.95 var(--condensada); letter-spacing: -.02em; white-space: nowrap; text-transform: uppercase; }
.hero-nota { grid-column: 3; grid-row: 1; position: relative; z-index: 2; max-width: 30ch; margin: 0; color: var(--hueso); font: 400 clamp(1.15rem, 1.55vw, 1.8125rem)/1.26 var(--prosa); }
#cerebro-marco { position: relative; margin: 0; text-align: center; }
/* El pozo de luz: una luz calida radial muy suave detras de la pieza, sobre --fondo. Estatica
   (nada de halo de color ni de latido) y sin capturar clics.
   El derrame horizontal es CERO a proposito: con -16% el pseudo-elemento sobresalia de la columna
   del heroe y ensanchaba el documento 39px a 390 (y 99px a 768) — scroll horizontal, que el spec
   prohibe. Medido con tests/web/elisa-orb.check.py, que vigila documentElement.scrollWidth. */
#cerebro-marco::before {
  content: ""; position: absolute; z-index: 0; inset: -10% 0;
  background: radial-gradient(ellipse at 50% 44%, var(--pozo), transparent 68%);
  pointer-events: none;
}
/* #cerebro ya NO es la pieza: es solo el HUECO que reserva en la rejilla del hero (en height, no
   en max-width). La pieza en si se DIBUJA centrada sobre ese hueco y desborda (regla de abajo),
   asi que crece por los dos lados sin mover el flujo ni solapar la firma con el formulario. Como
   el desbordamiento es simetrico y la pieza va en z-index: 1 por debajo del texto, lo que se sale
   por la izquierda cae detras del titular.
   El hueco reserva el ALTO de la masa dibujada. La pieza es CUADRADA (cerebro-bronce.png,
   1254x1254) y `object-fit: contain` la dibuja al alto del hueco, asi que aqui el alto ES el lado
   de la pieza. Un vh suelto no vale — a 900px de viewport no cabe lo mismo que a 1080 — asi que
   sale de lo que de verdad queda en el primer viewport: viewport menos barra, caja de pregunta
   y firma. Los 150px sueltos son las piezas menudas: el padding de arriba de
   #contenido (24), la firma (28), los 53 que la caja de pregunta mide de mas sobre su token
   (149 reales frente a 96; eran 123 y 27 hasta que la Fase 3 le sumo la linea de ayuda de «/» y
   Ctrl+Enter, 26px mas) y la banda de la vista previa (30), que en el sitio publicado no existe
   — alli la pieza queda algo mayor — mas 15 de holgura. La constelacion ya no entra en la resta
   (2026-09-22): sus 140px son de la pieza. */
#cerebro { display: block; position: relative; z-index: 1; width: 100%; max-width: none;
           height: min(700px, calc(100svh - var(--alto-barra) - var(--alto-entrada) - 150px)); margin: 0 auto;
           transform: perspective(900px) rotateX(var(--giro-x, 0deg)) rotateY(var(--giro-y, 0deg)) scale(var(--escala, 1));
           transition: transform 220ms ease-out, filter 400ms ease; filter: none; }
#cerebro svg, #cerebro img, #cerebro canvas {
  display: block; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%); width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain;
}
/* Con una respuesta en pantalla el heroe deja de mandar: se recoge y la lectura ocupa su sitio.
   Antes la respuesta nacia debajo del pliegue y contestabas sin ver la contestacion. */
body.con-respuesta #hero { min-height: 0; grid-template-columns: minmax(0, 1fr) minmax(200px, 22vw); align-items: end; gap: 24px; padding-bottom: 8px; }
body.con-respuesta .hero-claim h1 { font-size: clamp(1.5rem, 2.4vw, 2.2rem); }
body.con-respuesta .hero-nota { display: none; }
body.con-respuesta #cerebro { height: min(220px, 26vh); }
body.con-respuesta #cerebro svg, body.con-respuesta #cerebro img, body.con-respuesta #cerebro canvas { width: min(320px, 30vh); }

#cerebro-firma { margin-top: 10px; color: var(--hueso-3); font: 500 .6875rem/1.5 var(--condensada); letter-spacing: .14em; text-transform: none; }
#cerebro-marco.encendido #cerebro-firma { color: var(--catodo); }

/* 2026-09-22 — la constelacion de las cinco mentes y el orbe de la cabecera de cada respuesta
   se retiraron (spec del ajuste de efectos): los orbes bajo la pieza le quitaban sitio al cerebro
   y solo se queria el orbe que aparece mientras Elisa piensa. Aquel estado sigue vivo donde
   importa —el orbe crema de la espera y el indicador de la barra—, y la brasa de la vista es el
   boton de preguntar. La referencia, en git. */

/* ——— respuestas del chat ——— */
#respuestas { margin-top: 24px; }
.respuesta { padding: 28px 0; margin-bottom: 8px; border-top: 1px solid var(--bronce); }
.respuesta.golpea { animation: golpe var(--t-golpe) steps(2) both; }
/* La llegada de una respuesta —el unico momento de movimiento de la web—: se revela de arriba
   abajo con un clip-path y un desenfoque que se resuelve, sobre un estado YA visible (si la
   animacion no corre, se lee igual). Sin `both` a proposito: no deja un `filter` ni un `clip-path`
   pegados a cada respuesta de la pagina. Con prefers-reduced-motion no corre (regla global, abajo). */
@keyframes llegada { from { clip-path: inset(0 0 100% 0); filter: blur(4px); } to { clip-path: inset(0); filter: blur(0); } }
.respuesta.golpea.respuesta-nueva { animation: golpe var(--t-golpe) steps(2) both, llegada var(--t-llegada) var(--curva-llegada); }
.respuesta-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding-bottom: 12px; margin-bottom: 22px; border-bottom: 1px solid color-mix(in srgb, var(--bronce) 50%, transparent); color: var(--catodo); font: 500 1.05rem/1.1 var(--condensada); letter-spacing: .01em; text-transform: none; }
.respuesta-cab time { color: var(--hueso-3); font: 400 .7rem/1 var(--datos); letter-spacing: 0; }
.respuesta-cab small { display: block; margin-top: 6px; color: var(--hueso-2); font: .7rem/1.3 var(--datos); letter-spacing: 0; text-transform: none; }
/* La cabecera firma: nombre y especialidad —y la hora, en el extremo opuesto—. Llevaba al lado el
   orbe de la mente que responde; se retiro el 2026-09-22 (una sola brasa por vista). */
.respuesta-quien { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; row-gap: 2px; }
.respuesta-nombre { grid-column: 1; }
.respuesta-texto { color: var(--hueso); font-size: 1.08rem; line-height: 1.7; }
.respuesta-texto p { margin: 0; }
.respuesta-texto p + p { margin-top: 18px; }
/* ——— el acta: la respuesta como documento firmado ———
   Cuatro lineas etiquetadas en rejilla —etiqueta a la izquierda en --hueso-3, valor a la derecha en
   --hueso-2, cifras tabulares—, separadas del cuerpo por aire y un filete discontinuo de --bronce,
   sin caja. Sustituye al viejo pie `respuesta-meta`: los mismos datos, leidos como lo que son, la
   certificacion de la respuesta. Lo que no hay se dice con palabras o con `n/d`, nunca con un cero. */
.respuesta-acta { margin-top: 30px; }
.acta-pregunta { margin: 0 0 16px; color: var(--hueso-3); font: .72rem/1.5 var(--datos); }
.acta { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 26px; margin: 0; padding-top: 16px; border-top: 1px dashed color-mix(in srgb, var(--bronce) 60%, transparent); }
.acta dt { color: var(--hueso-3); font: 500 .72rem/1.5 var(--datos); letter-spacing: .06em; }
.acta dd { margin: 0; color: var(--hueso-2); font: .72rem/1.5 var(--datos); font-variant-numeric: tabular-nums; }
.acta dd p { margin: 0; overflow-wrap: anywhere; }
.acta dd p + p { margin-top: 5px; }
.acta dd strong { color: var(--hueso-3); font-weight: 500; }
/* Tarea C2, Paso 6: la traza tecnica vive plegada en el acta. Se marca con el rombo de <details>
   en lugar de la linea de siempre para que se vea de un golpe que ahi dentro hay algo que se abre;
   el :hover solo cambia el tono, no mueve nada. */
.acta-traza summary { color: var(--hueso-3); cursor: pointer; text-decoration: underline; text-decoration-color: var(--bronce); text-underline-offset: 3px; }
.acta-traza summary:hover, .acta-traza summary:focus-visible { color: var(--catodo); }
.acta-traza[open] summary { margin-bottom: 5px; }
.acta-traza p { color: var(--hueso-3); }
.acta a { color: var(--hueso-2); text-decoration-color: var(--bronce); text-decoration-thickness: 1px; }
.acta a:hover, .acta a:focus-visible { color: var(--catodo); }
.acta-acciones { display: flex; flex-wrap: wrap; gap: 6px 24px; margin: 18px 0 0; }
.acta-acciones .accion.secundaria { font-size: .75rem; letter-spacing: .06em; }
/* El fallo al copiar se dice en el propio boton, en el color de fallo: no se traga. */
.acta-copiar[data-copiado="fallo"] { color: var(--aviso); border-bottom-color: var(--aviso); }
/* En un movil estrecho la rejilla etiqueta/valor se apila: dos columnas dejan el valor en un hilo. */
@media (max-width: 599px) { .acta { grid-template-columns: minmax(0, 1fr); gap: 2px 0; } .acta dd { margin-bottom: 12px; } }
.respuesta.recuerdo { opacity: .62; }
.respuesta.error .respuesta-texto { color: var(--aviso); }
/* El pie de la ultima respuesta se ve SIEMPRE: el rail del chat ya no repite firma, fuentes ni
   coste — enseña solo lo que la columna central no tiene— asi que esconderlo dejaba el dato
   sin ningun sitio donde vivir. */

/* ——— estado vacio: sugeridas e historial ——— */
#vacio { padding: 24px 0 8px; }
.sugeridas { display: grid; gap: 10px; }
.sugerida { min-height: 44px; border: 0; border-bottom: 1px solid var(--bronce); padding: 10px 0; background: none; color: var(--hueso-2); font: 500 .8125rem/1.4 var(--condensada); letter-spacing: .01em; text-align: left; text-transform: none; cursor: pointer; transition: color var(--t-seccion) ease; }
.sugerida:hover, .sugerida:focus-visible { color: var(--hueso); }
#historial { margin-top: 42px; color: var(--hueso-2); font: .75rem/1.5 var(--datos); }
#historial summary { cursor: pointer; }
#historial-lista { padding-left: 20px; }
#historial-lista li { margin: 12px 0; cursor: pointer; }

/* ——— entrada: subrayado y un solo boton brasa ——— */
#entrada { position: sticky; bottom: 0; z-index: 10; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: end; max-width: 68ch; padding: 20px 0 18px; background: linear-gradient(to top, var(--fondo) 78%, transparent); }
#pregunta { min-width: 0; resize: vertical; border: 0; border-bottom: 1px solid var(--hueso); border-radius: 0; padding: 8px 2px; background: transparent; color: var(--hueso); caret-color: var(--catodo); }
#pregunta::placeholder { color: var(--hueso-3); }
/* La ayuda de la caja: como se llega a ella sin raton y como se envia. Discreta, en --hueso-3,
   bajo la caja (ocupa la fila que le deja la rejilla de #entrada, en movil y en escritorio). */
.entrada-ayuda { grid-column: 1 / -1; margin: 0; color: var(--hueso-3); font: 400 .75rem/1.5 var(--prosa); }
.entrada-ayuda strong { color: var(--hueso-2); font-weight: 500; }
.accion { min-height: 48px; border: 0; border-radius: 36px; padding: 14px 28px; background: var(--catodo); color: var(--catodo-tinta); font: 500 .875rem/1 var(--condensada); letter-spacing: .16em; text-transform: none; cursor: pointer; }
.accion:disabled { cursor: wait; opacity: .55; }
/* Una sola brasa por vista: el resto de acciones son secundarias, subrayado discontinuo sin relleno. */
.accion.secundaria { min-height: 44px; border-bottom: 1px solid var(--bronce); border-radius: 0; padding: 10px 0; background: none; color: var(--hueso); }
.accion.secundaria:hover, .accion.secundaria:focus-visible { border-bottom-color: var(--catodo); color: var(--catodo); }

/* ——— la respuesta al toque (spec movil 2026-09-22, §5). Global a proposito ———
   En un telefono no hay :hover que avise de que el dedo ha llegado: la pulsacion tiene que verse
   sola. El navegador pinta su propio rectangulo azul al tocar un boton o un enlace; aqui se apaga
   y en su lugar el boton brasa baja el brillo y las secundarias aclaran su texto. La duracion es
   `--t-toque` y con prefers-reduced-motion la valvula global de abajo la deja en cero: el estado
   final es el mismo, sin coreografia. */
button, a, summary { -webkit-tap-highlight-color: transparent; }
.accion { transition: filter var(--t-toque) linear, color var(--t-toque) linear; }
.accion:active { filter: brightness(.85); }
.accion.secundaria:active { filter: brightness(1.18); }

/* ——— secciones de lectura (newsletter, cartera, biblioteca) ——— */
.seccion-cab { padding: 0; margin-bottom: 22px; }
.seccion-cab h2 { margin: 0; color: var(--hueso); font: 500 clamp(2rem, 4vw, 3.4rem)/0.9 var(--condensada); letter-spacing: 0; text-transform: none; text-wrap: balance; }
/* Cifras que cambian o se comparan en columna: todas del mismo ancho. */
.prosa-panel td, .respuesta-texto td, #instrumentos .cifra, .acta dd { font-variant-numeric: tabular-nums; }
.prosa-panel { padding: 8px 0 0; font-size: 1.08rem; line-height: 1.7; color: var(--hueso); }
.prosa-panel p { margin: 0; }
.prosa-panel p + p { margin-top: 18px; }
.lecturas { padding: 0; margin: 0; list-style: none; max-width: 68ch; }
.lecturas li { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 16px 0; border-bottom: 1px solid color-mix(in srgb, var(--bronce) 55%, transparent); }
.lecturas strong { display: block; color: var(--hueso); font: 500 1.05rem/1.2 var(--condensada); letter-spacing: .06em; text-transform: none; }
.lecturas small { display: block; margin-top: 5px; color: var(--hueso-2); font: .72rem/1.4 var(--datos); font-variant-numeric: tabular-nums; }
.lecturas li.esqueleto { pointer-events: none; }
.lecturas li.esqueleto div { width: 40%; height: 1em; background: var(--fantasma); }
/* El ancho se reserva con la medida, no con un fantasma detras del numero: el fantasma llevaba
   otra cadena («8.888,88» frente a «394,15 USD») y sobresalia como una raya sobre la cifra. */
.celda { display: inline-block; min-width: 11ch; font: 500 1.25rem/1 var(--condensada); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; color: var(--catodo); }
.sube { color: var(--catodo); } .baja { color: var(--aviso); }
.lecturas li.por-revelar { opacity: 0; transform: translateY(8px); }
.lecturas li.entra { opacity: 1; transform: none; transition: opacity var(--t-fila) ease var(--retardo, 0ms), transform var(--t-fila) ease var(--retardo, 0ms); }

/* ——— biblioteca: indice por materias y lector ——— */
#biblioteca-indice .materia { margin-bottom: 34px; }
#biblioteca-indice .materia h3 { margin: 0 0 4px; padding-bottom: 10px; border-bottom: 1px solid var(--bronce); color: var(--catodo); font: 500 .8125rem/1 var(--condensada); letter-spacing: .02em; text-transform: none; }
#biblioteca-indice .materia ul { padding: 0; margin: 0; list-style: none; }
/* Caja normal: 1.460 titulos en mayusculas se leian como un muro. */
#biblioteca-indice .materia button { display: block; width: 100%; min-height: 44px; border: 0; padding: 9px 0; background: none; color: var(--hueso-2); font: 400 1rem/1.35 var(--condensada); text-align: left; cursor: pointer; transition: color var(--t-seccion) ease; }
#biblioteca-indice .materia button:hover, #biblioteca-indice .materia button:focus-visible { color: var(--hueso); }
/* Leyendo una nota, el aparato del indice estorba: el filtro y su ayuda se apartan y volver es un
   enlace, no un boton que compite con la accion de la pagina. */
body.leyendo #biblioteca-filtro, body.leyendo #seccion-biblioteca > .seccion-nota { display: none; }
#lectura-volver { display: block; min-height: 44px; border: 0; padding: 0 0 4px; margin-bottom: 10px; background: transparent; color: var(--hueso-3); font: 500 .72rem/1 var(--condensada); letter-spacing: .02em; text-transform: none; cursor: pointer; }
#lectura-volver:hover, #lectura-volver:focus-visible { color: var(--catodo); }
#lectura-meta { margin: 0 0 26px; color: var(--hueso-3); font: 400 .72rem/1.5 var(--datos); letter-spacing: .04em; }
.lectura { max-width: 68ch; }
/* Un enlace dentro de la prosa no compite con el texto: subrayado fino en brasa, tinta crema. */
.prosa-panel a, .respuesta-texto a { color: var(--hueso); text-decoration-color: var(--catodo); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prosa-panel a:hover, .respuesta-texto a:hover, .prosa-panel a:focus-visible, .respuesta-texto a:focus-visible { color: var(--catodo); }
#biblioteca-lectura > .accion { margin-bottom: 30px; }
#lectura-titulo { margin: 0 0 14px; color: var(--hueso); font: 500 clamp(1.6rem, 3vw, 2.6rem)/0.95 var(--condensada); text-transform: none; }
.prosa-panel h1, .prosa-panel h2, .prosa-panel h3, .prosa-panel h4,
.respuesta-texto h1, .respuesta-texto h2, .respuesta-texto h3, .respuesta-texto h4 { margin: 34px 0 12px; color: var(--hueso); font-family: var(--condensada); font-weight: 500; line-height: 1.1; text-transform: none; }
.prosa-panel h1, .respuesta-texto h1 { font-size: 1.7rem; }
.prosa-panel h2, .respuesta-texto h2 { font-size: 1.4rem; }
.prosa-panel h3, .prosa-panel h4, .respuesta-texto h3, .respuesta-texto h4 { font-size: 1.1rem; letter-spacing: .06em; }
/* En el chat los encabezados son el esqueleto del analisis (el primero ES la conclusion y el
   ultimo suele ser el veredicto): van en brasa, como los rotulos de seccion del resto del sitio.
   El primero, ademas, un escalon mayor: es el titular. */
.respuesta-texto h1, .respuesta-texto h2, .respuesta-texto h3, .respuesta-texto h4 { color: var(--catodo); }
.respuesta-texto > h2:first-child { font-size: 1.7rem; }
.respuesta-texto > h2:first-child, .respuesta-texto > h3:first-child { margin-top: 0; }
.prosa-panel p { margin: 0; } .prosa-panel p + p { margin-top: 16px; }
.prosa-panel ul, .prosa-panel ol, .respuesta-texto ul, .respuesta-texto ol { margin: 16px 0; padding-left: 24px; }
.prosa-panel li, .respuesta-texto li { margin: 6px 0; }
.prosa-panel a, .respuesta-texto a { color: var(--catodo); }
/* ==subrayado==: la idea a retener. Brasa bajo el crema, no otro color de texto. */
.prosa-panel u, .respuesta-texto u { text-decoration: underline; text-decoration-color: var(--catodo); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
/* mini-indice de la newsletter: saltos a las secciones (los h2 de la nota) */
.indice-news { display: flex; flex-wrap: wrap; gap: 8px 22px; padding-bottom: 18px; margin-bottom: 8px; border-bottom: 1px solid var(--bronce); }
.indice-news a { color: var(--hueso-3); font: 500 .75rem/1.5 var(--condensada); letter-spacing: .01em; text-transform: none; text-decoration: none; }
.indice-news a:hover, .indice-news a:focus-visible { color: var(--catodo); }
.prosa-panel blockquote, .respuesta-texto blockquote { margin: 20px 0; padding-left: 18px; border-left: 1px solid var(--bronce); color: var(--hueso-2); }
.prosa-panel code, .respuesta-texto code { font-family: var(--datos); font-size: .92em; }
.prosa-panel table, .respuesta-texto table { width: 100%; margin: 20px 0; border-collapse: collapse; font-size: .92rem; line-height: 1.5; }
.prosa-panel th, .respuesta-texto th { color: var(--catodo); font: 500 .75rem/1.3 var(--condensada); letter-spacing: .01em; text-align: left; text-transform: none; }
.prosa-panel th, .prosa-panel td, .respuesta-texto th, .respuesta-texto td { padding: 9px 12px 9px 0; border-bottom: 1px solid color-mix(in srgb, var(--bronce) 55%, transparent); text-align: left; vertical-align: top; }
.prosa-panel hr, .respuesta-texto hr { border: 0; border-top: 1px solid var(--bronce); margin: 28px 0; }

/* ——— instrumentos ——— */
#instrumentos { display: none; }
body.con-instrumentos #instrumentos { display: block; position: fixed; top: var(--alto-barra); right: 0; bottom: 0; width: var(--ancho-instrumentos); overflow-y: auto; padding: 34px 30px 40px; background: color-mix(in srgb, var(--fondo) 92%, transparent); color: var(--hueso-2); font: .72rem/1.55 var(--datos); }
#instrumentos h2 { margin: 0 0 18px; color: var(--catodo); font: 500 .8rem/1 var(--condensada); letter-spacing: .02em; text-transform: none; }
#instrumentos h3 { margin: 0 0 6px; color: var(--hueso-3); font: 400 .68rem/1 var(--datos); letter-spacing: .14em; text-transform: none; }
#instrumentos .grupo { padding-top: 16px; margin-top: 16px; border-top: 1px solid var(--bronce); }
#instrumentos .grupo:first-of-type { padding-top: 0; margin-top: 0; border-top: 0; }
#instrumentos p { margin: 4px 0; overflow-wrap: anywhere; }
/* Saltos de materia del rail: botones secundarios, pero leidos como lista. Heredaban el centrado y el
   interletrado de .accion y los largos se partian centrados en dos lineas. */
#instrumentos .accion.secundaria { display: block; width: 100%; padding: 8px 0; font-size: .75rem; letter-spacing: .08em; text-align: left; }
#instrumentos .cifra { display: block; margin: 4px 0 0; color: var(--catodo); font: 500 2.4rem/1 var(--condensada); }
#instrumentos a { display: block; width: fit-content; margin-top: 6px; color: var(--hueso-2); text-decoration-color: var(--bronce); text-decoration-thickness: 1px; }
#instrumentos a:hover, #instrumentos a:focus-visible { color: var(--catodo); }
body.con-instrumentos #contenido { padding-right: calc(var(--ancho-instrumentos) + 42px); }

/* ——— la moneda: una pieza, dos sitios ———
   La capa es fixed y se coloca sobre el ancla que toque, midiendola con getBoundingClientRect. Va
   por encima de la barra (30) porque tiene que cruzarla. No se come clics: solo el canvas. */
#moneda { position: fixed; z-index: 31; top: 0; left: 0; pointer-events: none; will-change: transform, width, height; }
#moneda canvas { pointer-events: auto; }
#moneda img, #moneda canvas { display: block; width: 100%; height: 100%; }
#moneda-ancla-barra { display: inline-block; width: 18px; height: 18px; margin-right: 9px; vertical-align: -4px; }
#moneda-nicho { display: none; }
/* 2026-09-15: corona el rail. La banda entre el texto y el rail (458px a 1440) era ancho muerto que
   estrangulaba la lectura; ahora la moneda se sienta centrada sobre la columna de instrumentos, que
   le guarda su alto. En `cuenta` no hay rail: la moneda ocupa el mismo sitio y el contenido reserva
   ese ancho, porque el canvas SI recibe clics (es arrastrable) y no puede pisar un boton. */
body.con-moneda #moneda-nicho { display: block; position: fixed;
  top: calc(var(--alto-barra) + 28px);
  right: calc((var(--ancho-instrumentos) - var(--moneda-grande)) / 2);
  width: var(--moneda-grande); height: var(--moneda-grande); }
body.con-moneda.con-instrumentos #instrumentos { padding-top: calc(var(--moneda-grande) + 62px); }
body.con-moneda:not(.con-instrumentos) #contenido { padding-right: calc(var(--ancho-instrumentos) + 42px); }

@keyframes golpe { from { opacity: .25; filter: blur(6px); } to { opacity: 1; filter: blur(0); } }
/* ——— la cartera del visitante ——— */
.seccion-nota { max-width: 68ch; margin: 8px 0 0; color: var(--hueso-3); font: 400 .9rem/1.5 var(--prosa); }
#cartera-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 22px 0 18px; }
#cartera-form input { flex: 1 1 140px; min-width: 0; padding: 10px 12px; border: 1px solid var(--hueso-3); border-radius: 3px; background: transparent; color: var(--hueso); font: 400 .95rem/1.2 var(--prosa); }
#boletin-ediciones { appearance: none; width: 100%; max-width: 420px; padding: 10px 34px 10px 0; border: 0; border-bottom: 1px solid var(--bronce); border-radius: 0; background: transparent; color: var(--hueso); font: 500 .8125rem/1.4 var(--condensada); letter-spacing: .01em; text-transform: none; cursor: pointer; }
#boletin-ediciones:focus-visible { outline: 2px solid var(--catodo); outline-offset: 3px; }
.seccion-nota + #boletin-ediciones, #boletin-fecha + label + #boletin-ediciones { margin-top: 6px; }
.indice-news { gap: 10px 26px; padding-bottom: 22px; margin-bottom: 20px; }
#cartera-form input::placeholder { color: var(--hueso-3); }
#cartera-form input:focus-visible { outline: 2px solid var(--catodo); outline-offset: 1px; }
#cartera-form button { flex: 0 0 auto; }
/* Absoluto, no `margin-left: auto`: la fila envuelve y con auto el boton se alineaba dentro de
   la linea envuelta, asi que su posicion cambiaba segun cuantos datos tuviera la posicion
   (una con plusvalia lo mandaba a un sitio y una sin ella a otro). Anclado a la derecha de la
   fila queda igual en todas. El padding-right reserva su hueco para que no pise a las cifras. */
/* Fila de instrumento en dos lineas: arriba el valor y su precio, abajo lo tuyo y como va.
   La version de columnas fijas no cabia en la medida de lectura y superponia la variacion con la
   plusvalia; aqui los datos fluyen y se reparten en varias lineas cuando hace falta. */
#cartera-lista li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 18px; align-items: baseline; padding: 16px 0 12px; }
#cartera-lista .texto { grid-column: 1; grid-row: 1; }
#cartera-lista .celda { grid-column: 2; grid-row: 1; justify-self: end; }
#cartera-lista .datos { grid-column: 1; grid-row: 2; display: flex; flex-wrap: wrap; gap: 4px 20px; }
#cartera-lista .datos small { display: inline-block; margin: 0; }
#cartera-lista .quitar { grid-column: 2; grid-row: 2; justify-self: end; }
#cartera-lista .quitar { padding: 4px 10px; border: 1px solid transparent; border-radius: 3px; background: transparent; color: var(--hueso-3); font: 500 .6875rem/1.4 var(--condensada); letter-spacing: .01em; text-transform: none; cursor: pointer; }
#cartera-lista .quitar:hover { border-color: var(--catodo); color: var(--catodo); }
#cartera-vacia { color: var(--hueso-3); font: 400 1rem/1.5 var(--prosa); }
#cartera-aviso:empty { display: none; }
#cartera-aviso { margin: 0 0 12px; color: var(--catodo); font: 500 .8125rem/1.5 var(--prosa); }
#cartera-preguntar { margin-top: 18px; }
#cartera-pegar-area { margin: 22px 0 4px; border: 1px solid var(--hueso-2); border-radius: 10px; padding: 14px 16px; }
#cartera-pegar-area summary { cursor: pointer; font: 500 .9375rem/1.4 var(--prosa); color: var(--hueso); }
#cartera-pegar-area textarea { width: 100%; min-height: 120px; margin: 12px 0; padding: 10px 12px; border: 1px solid var(--hueso-2); border-radius: 8px; background: var(--panel); color: var(--hueso); font: 400 .875rem/1.5 var(--datos); }
#cartera-pegar-area textarea:focus-visible { outline: 2px solid var(--catodo); outline-offset: 1px; }
#cartera-pegar-aviso:empty { display: none; }
#cartera-pegar-aviso { margin: 8px 0 0; color: var(--catodo); font: 500 .8125rem/1.5 var(--prosa); }
#cartera-lista .bloque { width: 100%; color: var(--hueso-3); font: 400 .75rem/1.3 var(--prosa); }
#biblioteca-filtro { width: 100%; max-width: 440px; margin: 12px 0 4px; padding: 10px 12px; border: 1px solid var(--hueso-2); border-radius: 8px; background: var(--panel); color: var(--hueso); font: 400 .9375rem/1.4 var(--prosa); }
#biblioteca-filtro:focus-visible { outline: 2px solid var(--catodo); outline-offset: 1px; }
#seccion-biblioteca .seccion-nota { margin-bottom: 26px; }
#biblioteca-indice .materia { scroll-margin-top: calc(var(--alto-barra) + 18px); }
#biblioteca-sin-resultados { margin: 10px 0 0; }
#cartera-preguntar[hidden] { display: none; }

.aviso-legal { max-width: 68ch; margin: 18px 0 0; color: var(--hueso-3); font: 400 .8125rem/1.5 var(--prosa); }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

@media (max-width: 1199px) {
  body.con-instrumentos #contenido { padding-right: 42px; }
  /* El rail deja de ser columna: no hay hueco al que viajar. La moneda se queda en la barra. */
  body.con-moneda #moneda-nicho { display: none; }
  body.con-instrumentos #instrumentos { position: static; width: auto; padding: 0 42px 60px; }
  /* En chat el rail cae al fondo de la pagina, lejos de la respuesta a la que contextua: fuera. */
  body[data-seccion="chat"] #instrumentos { display: none; }
}
@media (min-width: 1200px) {
  /* En escritorio el indice de la newsletter vive en el rail (grupo 'Secciones'); debajo de
     1200px el rail baja al final de la pagina y el indice de arriba es el que se queda. */
  body.con-instrumentos .indice-news { display: none; }
}
@media (max-width: 999px) {
  #barra { flex-direction: column; align-items: stretch; justify-content: center; gap: 6px; height: var(--alto-barra); padding: 8px 18px 0; background: color-mix(in srgb, var(--fondo) 94%, transparent); }
  #secciones { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0 10px; padding-bottom: 0; }
  #secciones li { grid-column: span 2; }
  #secciones li:nth-child(n+4) { grid-column: span 3; }
  #secciones button { width: 100%; font-size: .8125rem; }
  #secciones::-webkit-scrollbar { height: 4px; }
  #secciones::-webkit-scrollbar-thumb { background: var(--bronce); }
  #secciones button { white-space: nowrap; scroll-snap-align: start; }
  #contenido { padding: calc(var(--alto-barra) + 24px) 18px 40px; }
  /* Las tablas del boletin desbordaban el documento a 390px: scroll propio, nunca el de la pagina. */
  .prosa-panel table, .respuesta-texto table { display: block; overflow-x: auto; }
  #hero { grid-template-columns: minmax(0, 1fr); min-height: auto; gap: 30px; padding-top: 20px; }
  body.con-respuesta #hero { grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: center; }
  .hero-claim h1 { max-width: none; }
  .hero-nota { grid-column: auto; grid-row: auto; max-width: 38ch; }
  /* 360, no 430: con la barra de dos filas, a 390px el pie de la pieza caia bajo la entrada fija. */
  #cerebro { max-width: 360px; height: auto; }
  #cerebro svg, #cerebro img, #cerebro canvas { position: static; transform: none; width: 100%; height: auto; max-height: none; }
  .hero-claim::before { display: none; }
  #entrada { grid-template-columns: 1fr; background: var(--fondo); }
  body.con-instrumentos #instrumentos { padding: 0 18px 40px; }
}

@media (max-width: 999px) {
  #historial summary, .seccion-nota summary, #cartera-pegar-area summary { min-height: 44px; padding-block: 11px; }
}

/* panel de cuenta */
.cuenta-form { display: grid; gap: 14px; max-width: 36ch; margin: 18px 0; }
.cuenta-form input { min-width: 0; padding: 10px 12px; border: 1px solid var(--hueso-3); border-radius: 3px; background: transparent; color: var(--hueso); font: 400 .95rem/1.2 var(--prosa); }
.cuenta-form input::placeholder { color: var(--hueso-3); }
.cuenta-form input:focus-visible { outline: 2px solid var(--catodo); outline-offset: 1px; }
.cuenta-form .accion { justify-self: start; }
.cuenta-aux { margin: 0; color: var(--hueso-2); font: 400 .9rem/1.5 var(--prosa); }
.cuenta-aux a { color: var(--hueso); }
#cuenta-mensaje { min-height: 1.4em; color: var(--hueso-2); }
#cuenta-mensaje:empty { display: none; }
#cuenta-mensaje.cuenta-error { display: block; color: var(--aviso); }
#cuenta-google { margin: 6px 0 18px; }
.cuenta-peligro { padding: 8px 0; border: 0; background: transparent; color: var(--aviso); font: 500 .8125rem/1 var(--condensada); letter-spacing: .01em; text-transform: none; cursor: pointer; }
#cartera-resumen { margin: 14px 0 0; color: var(--hueso); font: 500 .9375rem/1.5 var(--prosa); }
#cartera-fecha { margin: 4px 0 0; color: var(--hueso-3); font: 400 .8125rem/1.5 var(--prosa); }
#cartera-lista select { max-width: 180px; padding: 4px 8px; border: 1px solid var(--hueso-3); border-radius: 3px; background: transparent; color: var(--hueso-2); font: 400 .75rem/1.3 var(--prosa); }
#guardar-articulo { margin-left: 10px; padding: 8px 16px; border: 1px solid var(--hueso-3); border-radius: 3px; background: transparent; color: var(--hueso-2); font: 500 .6875rem/1.4 var(--condensada); letter-spacing: .01em; text-transform: none; cursor: pointer; }
#guardar-articulo:hover { border-color: var(--catodo); color: var(--catodo); }
#cuenta-guardados { margin: 0 0 22px; }

/* ——— 0.3 Ayuda de teclado: fuera donde no hay teclado ———
   «Pulsa / … y envia con Ctrl+Enter» explica atajos a quien va con el dedo. Se apaga por
   capacidad (hover: none), no por ancho: un portatil tactil estrecho sigue teniendo teclado. */
@media (hover: none) {
  .entrada-ayuda { display: none; }
}

/* El atributo hidden lo apaga la hoja del navegador con display:none, y cualquier regla nuestra que
   ponga display (.cuenta-form es grid) lo revive: los cuatro formularios salian a la vez. Se cierra
   aqui para toda la app, no formulario a formulario, porque el mismo choque ya habia obligado a
   parchear #cartera-resumen y #cartera-fecha por id. */
[hidden] { display: none !important; }

/* Lista de sugerencias del buscador de la cartera. */
#cartera-sugerencias { list-style: none; margin: 0.25rem 0 0; padding: 0; border: 1px solid var(--bronce); border-radius: 4px; max-height: 16rem; overflow-y: auto; }
#cartera-sugerencias li { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.4rem 0.6rem; cursor: pointer; }
#cartera-sugerencias li:hover, #cartera-sugerencias li:focus { background: var(--fantasma); outline: none; }
#cartera-sugerencias small { opacity: 0.7; }

/* Tabla de revision de la cartera leida de una imagen. */
#cartera-foto-tabla { width: 100%; border-collapse: collapse; margin: 0.5rem 0; }
#cartera-foto-tabla th, #cartera-foto-tabla td { padding: 0.3rem 0.4rem; text-align: left; border-bottom: 1px solid var(--bronce); }
#cartera-foto-tabla input[type="text"], #cartera-foto-tabla input[type="number"], #cartera-foto-tabla input:not([type]) { width: 100%; min-width: 5rem; }

/* Diagramas de la newsletter. `pre.mermaid` es el estado ANTES de que mermaid lo convierta en SVG,
   y tambien el estado final si mermaid no carga: por eso se estiliza como codigo legible en vez de
   esconderse. Un diagrama que no pinta deja su fuente a la vista, no un hueco. */
pre.mermaid {
  margin: 1.5rem 0;
  padding: 1rem;
  overflow-x: auto;
  text-align: center;
  background: var(--panel);
  border: 1px solid var(--bronce);
  border-radius: 6px;
  font-family: var(--datos);
  font-size: 0.85rem;
  line-height: 1.45;
  white-space: pre;
}
pre.mermaid[data-processed] {
  background: none;
  border: none;
  padding: 0;
}
pre.mermaid svg { max-width: 100%; height: auto; }

/* perfil de inversor: el cuestionario y su tarjeta. Cero colores propios — todo por token. */
.perfil-form fieldset { border: 1px solid var(--hueso-3); border-radius: 4px; margin: 0 0 1rem; padding: 0.75rem 1rem; }
.perfil-form legend { font-weight: 500; padding: 0 0.35rem; }
.perfil-form label { display: block; margin: 0.35rem 0; cursor: pointer; }
.perfil-form input[type="radio"] { margin-right: 0.5rem; }
#perfil-tarjeta { border: 1px solid var(--hueso-3); border-radius: 4px; margin: 0 0 1.25rem; padding: 0.75rem 1rem; }
#perfil-tarjeta p { margin: 0 0 0.5rem; }

/* Pulido integral: jerarquía editorial, filtros visibles y campos con etiqueta. */
.campo-label { display: block; color: var(--hueso-2); font: 500 .875rem/1.4 var(--prosa); }
input, select { font: inherit; min-height: 44px; }
input::placeholder, textarea::placeholder { color: var(--hueso-3); opacity: 1; }
#entrada { gap: 8px 18px; }
#entrada > label { grid-column: 1 / -1; }
#entrada > .accion { grid-column: 2; grid-row: 2; }
.seccion-cab h2 { line-height: 1.08; letter-spacing: -.025em; }
.seccion-nota { max-width: 68ch; line-height: 1.6; }
.hero-nota { color: var(--hueso-2); line-height: 1.45; font-size: clamp(1rem, 1.3vw, 1.3rem); }
#cerebro-firma { letter-spacing: .02em; font-size: .75rem; }
.sugerida { letter-spacing: 0; font-size: .9375rem; }
.respuesta-cab { color: var(--hueso-2); letter-spacing: 0; }
.respuesta-texto h1, .respuesta-texto h2, .respuesta-texto h3, .respuesta-texto h4 { color: var(--hueso); }
.prosa-panel h3, .prosa-panel h4, .respuesta-texto h3, .respuesta-texto h4 { letter-spacing: 0; }
.prosa-panel a, .respuesta-texto a { color: var(--hueso); }
.prosa-panel th, .respuesta-texto th { color: var(--hueso-2); letter-spacing: 0; font-size: .875rem; }
#biblioteca-controles { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 8px 20px; max-width: 68ch; margin: 28px 0 36px; }
#biblioteca-filtro, #biblioteca-materia { width: 100%; max-width: none; margin: 8px 0 0; min-height: 48px; padding: 10px 12px; border: 1px solid var(--bronce); border-radius: 4px; background: var(--panel); color: var(--hueso); }
#biblioteca-controles .seccion-nota, #biblioteca-conteo { margin: 0; color: var(--hueso-3); font-size: .8125rem; line-height: 1.5; }
#biblioteca-conteo { text-align: right; }
#biblioteca-indice .materia h3 { color: var(--hueso); font-size: 1.15rem; line-height: 1.4; letter-spacing: 0; padding-bottom: 12px; }
#biblioteca-indice .materia { margin-bottom: 40px; }
body.leyendo #biblioteca-controles, body.leyendo #seccion-biblioteca > .seccion-cab { display: none; }
#lectura-titulo { line-height: 1.15; letter-spacing: -.02em; margin-top: 20px; }
#lectura-meta { font: .875rem/1.5 var(--prosa); margin-bottom: 12px; }
.lectura-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-bottom: 32px; }
#guardar-articulo { margin-left: 0; min-height: 44px; }
#instrumentos { font-family: var(--prosa); }
body.con-instrumentos #instrumentos { font: .8125rem/1.6 var(--prosa); }
#instrumentos h2 { color: var(--hueso-2); }
#instrumentos h3 { font: 500 .8125rem/1.4 var(--prosa); letter-spacing: 0; }
#cartera-form { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: 8px 16px; align-items: end; max-width: 68ch; }
#cartera-form label { grid-row: 1; }
#cartera-form input:not([type="hidden"]), #cartera-form > button { grid-row: 2; width: 100%; }
#cartera-form label[for="cartera-titulos"], #cartera-titulos { grid-column: 2; }
#cartera-form label[for="cartera-entrada"], #cartera-entrada { grid-column: 3; }
#cartera-sugerencias { grid-column: 1 / -1; grid-row: 3; }
#cartera-pegar-area { max-width: 68ch; border: 0; border-bottom: 1px solid var(--fantasma); border-radius: 0; padding: 8px 0; }
#cartera-vacia { max-width: 52ch; margin: 32px 0; line-height: 1.7; }
#boletin-ediciones { margin: 8px 0 24px; max-width: 100%; }
.cuenta-form { gap: 8px; max-width: 400px; }
.cuenta-form input { min-height: 48px; margin-bottom: 12px; }
.cuenta-form .cuenta-aux { margin-top: 12px; }
.cuenta-aux a { display: inline-block; padding-block: 12px; }
@media (max-width: 999px) {
  #entrada > .accion { grid-column: 1; grid-row: auto; }
  #biblioteca-controles { grid-template-columns: 1fr; gap: 12px; }
  #biblioteca-conteo { text-align: left; }
  #cartera-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  #cartera-form label[for="cartera-ticker"] { grid-column: 1 / -1; grid-row: 1; }
  #cartera-form #cartera-ticker { grid-column: 1 / -1; grid-row: 2; }
  #cartera-sugerencias { grid-row: 3; }
  #cartera-form label[for="cartera-titulos"] { grid-column: 1; grid-row: 4; }
  #cartera-form label[for="cartera-entrada"] { grid-column: 2; grid-row: 4; }
  #cartera-form #cartera-titulos { grid-column: 1; grid-row: 5; }
  #cartera-form #cartera-entrada { grid-column: 2; grid-row: 5; }
  #cartera-form > button { grid-column: 1 / -1; grid-row: 6; margin-top: 8px; }
  .prosa-panel th, .prosa-panel td, .respuesta-texto th, .respuesta-texto td { min-width: 120px; padding-block: 12px; }
  .hero-claim h1 { font-size: clamp(2.1rem, 7.5vw, 4rem); }
}

/* ——— Fase 4: la lectura editorial ———
   La newsletter abre con mancheta, la cartera con su franja de composicion y la biblioteca con
   columnas de fichero. Todo lo de aqui sale de tokens: ni un color ni una medida suelta. */

/* La mancheta: la fecha de la edicion como display sobre un filete doble fino de bronce. El
   formato en mayusculas es tipografico —lo decide esta regla, no el texto que escribe app.js—.
   Va con las dos clases porque `.seccion-cab h2` fija `text-transform: none` y le gana por
   especificidad: el titular de las demas secciones no se toca, y el de esta si. */
.seccion-cab .mancheta-fecha { margin: 0; padding-bottom: 12px; color: var(--hueso); font: 500 clamp(1.9rem, 3.4vw, 3rem)/1 var(--condensada); letter-spacing: .06em; text-transform: uppercase; }
.seccion-cab .mancheta-fecha::after { content: ""; display: block; height: 2px; margin-top: 12px; border-top: 1px solid var(--bronce); border-bottom: 1px solid var(--bronce); }
/* La linea de datos —antiguedad, tiempo de lectura y secciones— con el selector de edicion DENTRO:
   es un control de la linea, no un bloque aparte. Las cajas vacias no reservan su hueco. */
.mancheta-datos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; margin-top: 12px; color: var(--hueso-3); font: .8125rem/1.5 var(--datos); font-variant-numeric: tabular-nums; }
.mancheta-datos > span:empty { display: none; }
.mancheta-control { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.mancheta-control .campo-label { margin: 0; color: var(--hueso-3); font: .8125rem/1.5 var(--datos); }
#boletin-ediciones { appearance: auto; width: auto; max-width: 100%; min-height: 44px; margin: 0; padding: 6px 10px; border: 1px solid var(--bronce); border-radius: 4px; background: var(--panel); color: var(--hueso); font: 500 .8125rem/1.4 var(--condensada); letter-spacing: 0; cursor: pointer; }
/* Las tablas de cifras: cabecera apagada y cuerpo con numeros tabulares, para comparar en columna. */
.prosa-panel th { color: var(--hueso-3); }
.prosa-panel .col-cifra { text-align: right; }

/* Plan elisa-respuesta C2: tablas del chat y del wiki desplazables DENTRO de si mismas en movil. */
.tabla { max-width: 100%; overflow-x: auto; margin: 18px 0; -webkit-overflow-scrolling: touch; }
.tabla:focus-visible { outline: 1px solid var(--catodo); outline-offset: 2px; }
.tabla table { min-width: 100%; }
.respuesta-texto .col-cifra, .prosa-panel .col-cifra { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.respuesta-texto h2.valoracion { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--bronce); }

/* ——— la franja de composicion de la cartera: el resumen antes del detalle ———
   Una barra por divisa. La mayor posicion va en brasa —la unica brasa rellena de la vista— y el
   resto alterna hueso-3 y bronce. El tono es una trama para separar segmentos vecinos; el dato
   (ticker y %) va en texto dentro del segmento cuando cabe y siempre en la clave de debajo. */
.franja-area { margin: 18px 0 4px; }
.franja { margin-bottom: 18px; }
.franja-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 8px; color: var(--hueso-3); font: 500 .6875rem/1.4 var(--datos); letter-spacing: .08em; }
.franja-total { color: var(--hueso-2); font-variant-numeric: tabular-nums; }
.franja-barra { display: flex; gap: 2px; height: var(--alto-franja); background: var(--fondo); }
/* Sin relleno lateral: el flex-basis es 0 y el relleno se sumaria a cada segmento por igual, lo que
   romperia la proporcion. El texto va centrado y solo se pone cuando el segmento lo admite. */
.franja-seg { flex: 0 1 0; min-width: 2px; display: flex; align-items: center; justify-content: center; gap: 7px; overflow: hidden; white-space: nowrap; }
/* Tinta nogal en los tres tonos: es el unico texto que pasa AA sobre ellos (lo mide el contraste). */
.franja-seg.brasa { background: var(--catodo); color: var(--catodo-tinta); }
.franja-seg.hueso { background: var(--hueso-3); color: var(--catodo-tinta); }
.franja-seg.bronce { background: var(--bronce); color: var(--catodo-tinta); }
.franja-seg-tick { font: 500 .6875rem/1 var(--condensada); letter-spacing: .02em; }
.franja-seg-pct { font: .6875rem/1 var(--datos); font-variant-numeric: tabular-nums; }
.franja-clave { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 10px 0 0; color: var(--hueso-3); font: .75rem/1.4 var(--datos); }
.franja-item { display: inline-flex; align-items: center; gap: 7px; }
.franja-item-texto { font-variant-numeric: tabular-nums; }
.franja-punto { display: inline-block; width: 8px; height: 8px; }
.franja-punto.brasa { background: var(--catodo); }
.franja-punto.hueso { background: var(--hueso-3); }
.franja-punto.bronce { background: var(--bronce); }
.franja-sin { margin: 0; color: var(--hueso-3); font: .75rem/1.5 var(--datos); }
/* Sin cotizacion la celda dice n/d: el cero se leeria como un dato y la brasa la tiene la franja. */
#cartera-lista .celda.sin-dato { color: var(--hueso-3); }

/* ——— la biblioteca como un fichero: columnas de materias ———
   2-3 columnas por medida en escritorio, una en movil. El ancho de la seccion manda: la medida de
   lectura (68ch) es para la prosa, y esto es un indice. */
#contenido #biblioteca-indice { max-width: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 0 44px; align-items: start; }
#biblioteca-indice .materia h3 { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
#biblioteca-indice .materia-cuenta { color: var(--hueso-3); font: 500 .8125rem/1 var(--datos); font-variant-numeric: tabular-nums; }
/* ——— la materia plegada (spec movil 2026-09-22, §4) ———
   Cada materia es un <details>: en escritorio nace ABIERTA —el indice de siempre, sin un clic de
   mas— y en el telefono plegada, porque 1.478 notas desplegadas eran 80.000px de alto. El summary
   lleva dentro el h3 que ya existia (mismo span.materia-nombre y mismo span.materia-cuenta), asi
   que el rotulo y el recuento los sigue pintando app.js: aqui solo se le pone el cuerpo, el filete
   y el +/− de la derecha. */
#biblioteca-indice .materia > summary { display: flex; align-items: center; gap: 12px; min-height: 44px; padding-bottom: 12px; border-bottom: 1px solid var(--bronce); cursor: pointer; list-style: none; }
/* El triangulo nativo del summary sobra: el signo del estado lo pone la regla de abajo. */
#biblioteca-indice .materia > summary::-webkit-details-marker { display: none; }
/* El filete y el aire del cuerpo del indice viven ahora en el summary: el h3 es solo su rotulo. */
#biblioteca-indice .materia > summary h3 { flex: 1; margin: 0; padding-bottom: 0; border-bottom: 0; }
#biblioteca-indice .materia > summary::after { content: "+"; color: var(--bronce); font: 500 1.1rem/1 var(--datos); }
#biblioteca-indice .materia[open] > summary::after { content: "−"; }
/* El estado vacio dice con que palabra se ha quedado vacio y da salida: no es un callejon. */
.biblioteca-vacio { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; max-width: 68ch; margin: 20px 0 0; }
.biblioteca-vacio p { margin: 0; color: var(--hueso-2); font: 400 1rem/1.5 var(--prosa); }

/* El hueco entre la columna y el rail: pegada a la izquierda dejaba 590px de vacio a 1440 (y 1.028
   a 1920). En escritorio la columna de lectura se centra en el espacio que queda, que es el unico
   reparto que no toca ni la medida de lectura ni el ancho del rail. */
@media (min-width: 1200px) {
  #seccion-newsletter, #seccion-cartera { max-width: var(--ancho-lectura); margin-inline: auto; }
}
@media (max-width: 999px) {
  /* 0.1 — la newsletter ensanchaba el documento a 741px en un telefono de 390: el <select> de
     ediciones mide lo que su opcion mas larga («22 de septiembre de 2026 · El crédito de la IA…»)
     y, con el `min-width: auto` de un item flexible, ninguna caja le dejaba encogerse. La fila del
     selector se va a su propia linea y los dos pueden encogerse. Criterio: en todas las secciones
     `document.documentElement.scrollWidth === innerWidth`. */
  .mancheta-control { flex: 1 1 100%; min-width: 0; margin-left: 0; }
  #boletin-ediciones { flex: 1 1 12rem; min-width: 0; max-width: 100%; }
  /* 0.2 — el zoom de iOS: por debajo de 16px Safari hace zoom al enfocar un campo y descoloca la
     pagina (medido: ocho campos, de 13 a 15,2px). Un solo selector agrupado —no uno por campo— y
     `!important` porque las reglas por id de mas arriba fijan 14px y 15,2px y ganarian por
     especificidad. */
  input, select, textarea { font-size: 1rem !important; }
}
/* Una sola columna de fichero en el telefono: a 390 dos columnas dejan el titulo en un hilo. A 768
   ya caben dos de verdad (732px utiles), que es lo que pide el spec: 2-3 por medida. */
@media (max-width: 599px) {
  #contenido #biblioteca-indice { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   EL TELEFONO
   Spec: docs/superpowers/specs/2026-09-22-web-movil-design.md. Todo lo de aqui vive por debajo de
   600px: el escritorio (>=1000px) no cambia ni un pixel y la franja 600-999 conserva lo que ya
   tenia salvo los arreglos 0.1 y 0.2, que van arriba en su bloque de max-width 999px.
   Este bloque va al FINAL del fichero a proposito: bajo 600px siguen valiendo enteras las reglas
   de max-width 999px —600-999 es otra cosa— y aqui solo se pisa lo que cambia en el telefono.
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */

/* «Arriba», el boton de la newsletter: existe en el marcado para el telefono y para ningun otro
   sitio, asi que en escritorio no se enseña ni aunque app.js le levante el hidden. */
#boletin-subir { display: none; }

@media (max-width: 599px) {
  /* La etiqueta de la caja de pregunta pasa a solo lectura de pantalla. La clase se define AQUI —y
     no arriba, junto a .solo-lectores— porque el escritorio conserva su etiqueta visible: fuera de
     este bloque `visualmente-oculto` no significa nada, que es justo lo que queremos. */
  .visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

  /* ——— 1. La barra: la marca arriba en UNA fila, las secciones abajo ——— */
  #barra { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; padding: 0 18px; }
  /* Fondo pleno arriba y abajo: al 86-94% la prosa crema se leia a traves de las dos barras. */
  #barra, body.leida #barra { background: var(--fondo); }
  /* El <nav> de secciones baja al borde inferior: el MISMO marcado, movido con CSS (las pestañas
     siguen siendo role="tab" y el teclado sigue igual). El filete de arriba es el recurso de la
     casa para separar; el fondo es el de la barra (94%) para que lo que pasa por debajo no se lea
     a traves. */
  #barra > nav {
    position: fixed; z-index: 30; right: 0; bottom: 0; left: 0;
    height: calc(var(--alto-tabbar) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--fondo);
    border-top: 1px solid var(--bronce);
  }
  #secciones { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; height: var(--alto-tabbar); }
  #secciones li, #secciones li:nth-child(n+4) { display: block; grid-column: auto; }
  #secciones button { display: flex; align-items: center; justify-content: center; gap: 5px; width: 100%; height: 100%; min-height: 44px; border: 0; border-top: 2px solid transparent; padding: 0 2px; font-size: .75rem; }
  /* Activa: crema con el filete de 2px pegado al borde SUPERIOR del boton (abajo es donde estaba la
     linea de la barra de dos filas). Nunca brasa: la brasa de la vista es el boton de enviar. */
  #secciones button[aria-selected="true"] { color: var(--hueso); border-bottom: 0; border-top-color: var(--bronce); }
  /* El rotulo corto existe solo aqui: arriba manda el largo. */
  .rotulo-corto { display: inline-flex; align-items: center; }
  .rotulo-largo { display: none; }
  /* El contenido reserva el alto de la barra inferior: la ultima linea no queda debajo. */
  #contenido { padding-bottom: calc(var(--alto-tabbar) + env(safe-area-inset-bottom) + 24px); }

  /* ——— 2. El chat: la caja de pregunta fija sobre la barra ———
     `--alto-caja` lo mide app.js (la caja crece con el texto, asi que su alto no es una constante
     que se pueda escribir aqui) y `--alto-teclado` es el hueco del teclado abierto: los dos caen a
     su valor de respaldo mientras el JS no ha corrido. */
  #entrada {
    position: fixed; z-index: 20; right: 12px; left: 12px;
    bottom: calc(var(--alto-tabbar) + env(safe-area-inset-bottom) + var(--alto-teclado, 0px));
    display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: 8px; align-items: end;
    max-width: none; padding: 10px 10px 10px 12px; background: var(--fondo);
  }
  /* La caja: una fila al principio y hasta cuatro con el texto. `field-sizing` lo hace solo donde
     existe (Chromium 123+); donde no, app.js ajusta el alto a mano en cada tecla, con el mismo
     tope. El relleno de la derecha es el sitio del boton, que va DENTRO de la caja. */
  #pregunta { grid-row: 1; grid-column: 1 / -1; min-height: 44px; max-height: 6.25rem; resize: none; overflow-y: auto; field-sizing: content; padding: 10px 54px 10px 14px; border: 1px solid var(--bronce); border-radius: 22px; background: var(--panel); }
  /* El boton, un circulo de 44 dentro de la caja, a la derecha. Sigue siendo .accion = la brasa. */
  #entrada > .accion { grid-row: 1; grid-column: 2; justify-self: end; align-self: end; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 50%; }
  /* Las sugeridas: una fila de pastillas deslizable justo encima de la caja. Se apagan solas al
     haber respuesta (#vacio se oculta entero) y tocar una siembra la pregunta sin enviarla (esa
     logica de app.js no se toca). */
  #vacio .sugeridas {
    position: fixed; z-index: 20; right: 0; left: 0;
    bottom: calc(var(--alto-tabbar) + env(safe-area-inset-bottom) + var(--alto-caja, 64px) + var(--alto-teclado, 0px));
    display: flex; gap: 8px; padding: 8px 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 12px;
    background: var(--fondo); scrollbar-width: none;
  }
  #vacio .sugeridas::-webkit-scrollbar { display: none; }
  #vacio .sugerida { flex: 0 0 auto; scroll-snap-align: start; display: inline-flex; align-items: center; min-height: 44px; padding: 10px 16px; border: 1px solid var(--bronce); border-radius: 999px; color: var(--hueso-2); font-size: .8125rem; white-space: nowrap; }
  /* La seccion del chat reserva lo que tapa su pila fija: sin esto la ultima linea de la ultima
     respuesta —y el historial, cuando no hay respuesta— quedaba debajo del cristal. */
  #seccion-chat { padding-bottom: calc(var(--alto-caja, 64px) + var(--alto-pastillas, 0px) + 16px); }
  /* Teclado abierto: lo detecta app.js con visualViewport y lo deja dicho con `teclado` en el body.
     La barra inferior se aparta —el teclado ya ocupa ese sitio— y la caja se apoya en el borde del
     viewport VISUAL, que es el unico que encoge; el hueco lo mide el propio JS. */
  body.teclado #barra > nav { display: none; }
  body.teclado #entrada { bottom: var(--alto-teclado, 0px); }
  body.teclado #vacio .sugeridas { bottom: calc(var(--alto-teclado, 0px) + var(--alto-caja, 64px)); }

  /* ——— 3. La newsletter: el indice pegado bajo la barra ——— */
  /* El salto a #tema-N tiene que contar el alto de la fila fija: sin esto el titular de la seccion
     quedaba debajo de ella. */
  html { scroll-padding-top: calc(var(--alto-barra) + 44px + 8px); }
  .indice-news {
    position: sticky; z-index: 12; top: var(--alto-barra);
    display: flex; flex-wrap: nowrap; gap: 0 18px; padding: 0 12px; margin: 0 0 8px;
    background: var(--fondo); border-bottom: 1px solid var(--bronce);
    overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
  }
  .indice-news::-webkit-scrollbar { display: none; }
  .indice-news a { display: inline-flex; align-items: center; flex: 0 0 auto; min-height: 44px; padding: 0 2px; color: var(--hueso-3); font-size: .8125rem; white-space: nowrap; }
  /* El tema que se esta leyendo: crema y subrayado discontinuo en bronce. Lo marca con aria-current
     app.js (marcaTema) al hacer scroll. */
  .indice-news a[aria-current="true"] { color: var(--hueso); text-decoration: underline dashed var(--bronce); text-decoration-thickness: 1px; text-underline-offset: 7px; }
  /* El progreso de lectura: 2px de bronce pegados al borde inferior de la barra y solo con la
     newsletter delante. `transform: scaleX()` y no `width`: la barra no se repinta en cada
     fotograma del scroll. El ancho lo deja app.js en --progreso-lectura. */
  body[data-seccion="newsletter"] #barra::after {
    content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 2px;
    background: var(--bronce); transform: scaleX(var(--progreso-lectura, 0)); transform-origin: left center;
  }
  /* «Arriba»: vuelve a la mancheta desde el fondo de una edicion larga. */
  #boletin-subir:not([hidden]) {
    display: block; position: fixed; z-index: 20; right: 12px;
    bottom: calc(var(--alto-tabbar) + env(safe-area-inset-bottom) + 12px);
    min-height: 44px; padding: 10px 16px; border: 1px solid var(--bronce); border-radius: 999px;
    background: var(--fondo); color: var(--hueso); font-size: .8125rem;
  }

  /* ——— 5. La cartera: una tarjeta de dos lineas por posicion ———
     Arriba el ticker (izquierda) y su valor (derecha, cifras tabulares); abajo lo tuyo y como va.
     Sin caja: la separa el mismo hairline discontinuo del resto. */
  #cartera-lista li { gap: 6px 12px; padding: 14px 0; border-bottom: 1px dashed color-mix(in srgb, var(--bronce) 55%, transparent); }
  #cartera-lista .texto { grid-row: 1; grid-column: 1; }
  #cartera-lista .celda { grid-row: 1; grid-column: 2; justify-self: end; }
  #cartera-lista .datos { grid-row: 2; grid-column: 1; color: var(--hueso-3); }
  #cartera-lista .quitar { grid-row: 2; grid-column: 2; justify-self: end; }
  /* El select de la fila se queda en la segunda linea, a lo ancho. */
  #cartera-lista select { grid-row: 2; grid-column: 1 / -1; width: 100%; max-width: none; }
}

/* ——— Ronda 2026-09-22 tarde ———
   Spec docs/superpowers/specs/2026-09-22-web-ronda-mejoras-design.md. Cada regla lleva su apartado.
   No se reescribe nada de arriba: se pisa, como hace el bloque del telefono. */

/* B2 — la marca del filtro no es una cita: sin barra lateral, apagada y en cursiva. */
.prosa-panel blockquote.retirado, .respuesta-texto blockquote.retirado { padding-left: 0; border-left: 0; color: var(--hueso-3); font-style: italic; font-size: .875rem; }

/* B3 — la barra de escritorio no transparenta la prosa; el filete solo existe leyendo. */
@media (min-width: 1000px) {
  body.leida #barra { background: var(--fondo); box-shadow: 0 1px 0 var(--bronce); }
}

/* B4 — la caja de pregunta es opaca y el fundido va POR ENCIMA: la etiqueta ya no se monta sobre
   la respuesta. */
@media (min-width: 1000px) {
  #entrada { background: var(--fondo); }
  #entrada::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: var(--fundido-entrada); background: linear-gradient(to bottom, transparent, var(--fondo)); pointer-events: none; }
}

/* B5 — tableta: una fila de cinco columnas iguales bajo la marca (--alto-barra en tokens.css). */
@media (min-width: 600px) and (max-width: 999px) {
  #secciones { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  #secciones li, #secciones li:nth-child(n+4) { grid-column: auto; }
}

/* B6 — la frase de entrada sube bajo el titular y el cerebro encoge en el telefono: los dos caben
   sobre la caja fija con el scroll arriba. */
@media (max-width: 999px) {
  .hero-nota { order: 1; font-size: 1rem; line-height: 1.45; }
  #cerebro-marco { order: 2; }
}
@media (max-width: 599px) {
  #cerebro { max-width: var(--cerebro-movil); margin-inline: auto; }
}

/* B7 — el selector de edicion no desborda la columna de lectura. */
@media (min-width: 1000px) {
  .mancheta-control { max-width: 100%; min-width: 0; }
  #boletin-ediciones { width: auto; max-width: min(100%, var(--ancho-selector-edicion)); }
}

/* A1 — chat en escritorio: un solo eje. Caja, sugerencias, historial, respuestas y la tarjeta de
   registro comparten una columna centrada; con rail, #contenido ya reserva su hueco y la columna se
   centra en lo que queda (la misma regla que --ancho-lectura en la newsletter). */
@media (min-width: 1000px) {
  #entrada, #vacio, #respuestas, #perfil-tarjeta { width: 100%; max-width: var(--ancho-conversacion); margin-inline: auto; }
  /* Por especificidad: la regla de 68ch de arriba es #contenido + id/clase. */
  #contenido #vacio { max-width: var(--ancho-conversacion); }
  #contenido .respuesta { max-width: none; }
  /* El aviso legal conserva su medida de 68ch, alineado con el borde izquierdo de la columna. */
  #aviso-legal { max-width: 68ch; margin-left: max(0px, calc((100% - var(--ancho-conversacion)) / 2)); }
}

/* A2 — biblioteca: cada materia enseña 12 notas en reposo; con filtro, todas. */
#biblioteca-indice .materia:not(.desplegada) li.extra { display: none; }
#biblioteca-indice.filtrando .materia li.extra { display: list-item; }
#biblioteca-indice .ver-todas { margin-top: 8px; }
#biblioteca-indice.filtrando .ver-todas, .ver-todas[hidden] { display: none; }

/* F1 — el marcador, dentro de la newsletter. Hereda la tabla de la prosa (y su scroll propio). */
#marcador td:not(:first-child) { white-space: nowrap; }
#marcador { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--bronce); scroll-margin-top: calc(var(--alto-barra) + 18px); }
.marcador-entradilla { color: var(--hueso-2); }
.marcador-ver[hidden] { display: none; }
@media (max-width: 599px) {
  #marcador:not(.completo) tr.extra { display: none; }
}
@media (min-width: 600px) {
  .marcador-ver { display: none; }
}

/* F2 — los apartados de una nota son destinos de salto; «Arriba» solo donde el rail cae debajo. */
#lectura-texto h2 { scroll-margin-top: calc(var(--alto-barra) + 18px); }
@media (min-width: 1000px) {
  #instrumentos .arriba-nota { display: none; }
}