/* ===== Nakkai · la lectura de las páginas de la Biblioteca con el molde de seis pasos (23-10-2026) =====
   Migue aprobó el prototipo `opciones-lectura/sol-a-c.html` («me gusta, hay que hacerlo en todos»): la opción A, «el libro abierto»
   (todo el texto a la vista, fuentes al margen, el paso IV en tarjetas), con las marcas de la C, «tu cuaderno» (al final de cada paso,
   «Me suena / No me cuadra / No lo sé», y «Tu página» al final). Pedido: «un poquito más interactivo para que no sea aburrido leer,
   pero sin tanto movimiento, para no cansar la vista ni al lector».
   Las páginas las genera web-nakkai/biblioteca/articulos.js (el HTML, lectura-molde.js) y lo interactivo está en lectura.js.
   Se carga DESPUÉS de estilo.css y solo en esas 37 páginas; todo va con prefijo lec- (y lo que toca a otras clases, bajo body.lec).
   Menos movimiento: NADA se mueve solo ni se dibuja al bajar. Lo interactivo es tocar (marcas, «Todo / Lo esencial», las notas en el
   móvil, la pregunta de «Antes de leer»). Transiciones de 0,15 s como mucho y solo al tocar; ninguna con «reducir movimiento»;
   sin scroll-behavior: smooth. Letra de 12 px como mínimo y toques de 44 px. Sin cursiva. */

html.lec-html { scroll-behavior: auto; scroll-padding-top: 92px; }   /* Migue: nada de saltos que se deslizan */
body.lec {
  --sala: #e6c463;                                    /* el color de la sala de la página (lo pone cada página con su estilo) */
  --medido: var(--celeste);
  --tradicion: var(--oro-vivo);
  --interp: var(--hueso);
  --nocuadra: color-mix(in srgb, var(--hoja-roja) 50%, var(--hueso));
  --si: var(--celeste); --no: var(--nocuadra); --duda: var(--oro-vivo);
  --tinta: rgb(var(--fondo-rgb));
  --lectura: 1.25rem; --nota: 1.0625rem;
  --r-min: .8125rem;                                  /* rótulos en Aboreto: 13 px (la regla es 12 como mínimo) */
  --barra: 76px;
}
@media (min-width: 900px) { body.lec { --lectura: 1.375rem; --nota: 1.125rem; } }
@media (max-width: 370px) { body.lec { --lectura: 1.1875rem; } }

/* lo que lleva la letra de lectura (la barra, el pie y lo que ya tenían las páginas conservan la suya) */
.lec-cab, .lec-lectura, .lec-indice, .lec-cuerpo, .lec-pagina-sec { font-size: var(--lectura); line-height: 1.6; }
.lec-cab button, .lec-lectura button, .lec-cuerpo button, .lec-pagina-sec button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: inherit; }
.lec-cab :focus-visible, .lec-lectura :focus-visible, .lec-indice :focus-visible, .lec-cuerpo :focus-visible, .lec-pagina-sec :focus-visible { outline: 2px solid var(--oro-vivo); outline-offset: 3px; }
.lec-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.lec-ico { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* botones: el dorado de la web y uno de línea fina; los dos con 48 px de alto */
.lec-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 28px; border-radius: 999px; text-decoration: none; font-family: var(--rotulo); font-size: var(--r-min); letter-spacing: .2em; text-transform: uppercase; line-height: 1.3;
  color: #1a1305; background: linear-gradient(180deg, #f6e7b4, var(--oro) 62%, color-mix(in srgb, var(--hoja-roja) 38%, var(--oro))); box-shadow: 0 0 0 1px rgba(239, 210, 149, .4), 0 10px 36px rgba(210, 183, 92, .22); transition: box-shadow .15s; }
.lec-btn:hover { box-shadow: 0 0 0 1px rgba(239, 210, 149, .6), 0 14px 44px rgba(210, 183, 92, .4); }
.lec-btn--fino { color: var(--oro-vivo); background: transparent; box-shadow: inset 0 0 0 1px rgba(239, 210, 149, .45); }
.lec-btn--fino:hover { box-shadow: inset 0 0 0 1px var(--oro-vivo); }

/* los sellos: de dónde sale cada afirmación. Solo donde el propio punto lo dice (su encabezado: «Lo que se mide», «Lo que se interpreta», «Lo que no cuadra») */
.lec-sellos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.lec-sello { --c: var(--hueso); display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 2px 11px; border-radius: 999px; font-family: var(--rotulo); font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; line-height: 1.3; white-space: nowrap;
  color: var(--c); background: color-mix(in srgb, var(--c) 9%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 58%, transparent); }
.lec-sello--medido { --c: var(--medido); }
.lec-sello--tradicion { --c: var(--tradicion); }
.lec-sello--interpretacion { --c: var(--interp); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 50%, transparent); background-image: repeating-linear-gradient(135deg, transparent 0 5px, color-mix(in srgb, var(--c) 9%, transparent) 5px 6px); }
.lec-sello--nocuadra { --c: var(--nocuadra); }
.lec-sello .lec-ico { width: 14px; height: 14px; stroke-width: 2; }
.lec-sentido { color: var(--oro-vivo); }   /* lo que se ve (a la izquierda de la flecha) y lo que significa (a la derecha, en dorado) */

/* la mesa: en pantallas anchas, la guía de pasos a la izquierda y el libro a la derecha (todo lo de lectura comparte esa columna) */
.lec-ancho { width: 100%; max-width: 956px; margin-inline: auto; }
.lec-cuerpo { position: static; }                       /* sin position: el fondo 3D mide cada paso respecto de .contenido */
.lec-art { min-width: 0; position: static; }
.lec-riel { display: none; }
@media (min-width: 1260px) {
  body.lec .contenido { display: grid; grid-template-columns: 210px minmax(0, 956px); column-gap: 44px; justify-content: center; }
  body.lec .contenido > * { grid-column: 1 / -1; width: 100%; }   /* con width: los de margen automático no se encogen al contenido (en una cuadrícula lo harían) */
  body.lec .contenido > .lec-cab, body.lec .contenido > .lec-ancho, body.lec .contenido > .seccion.adl, body.lec .contenido > .md-mini { grid-column: 2; }
  .lec-cuerpo { display: grid; grid-template-columns: 210px minmax(0, 956px); column-gap: 44px; justify-content: center; }
  .lec-art { grid-column: 2; }
  .lec-riel { display: block; grid-column: 1; grid-row: 1; position: sticky; top: 96px; align-self: start; padding-top: 52px; }
}
.lec-riel-t { font-family: var(--rotulo); font-size: var(--r-min); letter-spacing: .2em; text-transform: uppercase; color: var(--oro); margin: 0 0 12px 4px; }
.lec-riel ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.lec-riel a { display: grid; grid-template-columns: 34px 1fr 18px; align-items: center; min-height: 44px; padding: 0 10px 0 4px; border-radius: 12px; text-decoration: none; font-family: var(--rotulo); font-size: var(--r-min); letter-spacing: .08em; text-transform: uppercase; line-height: 1.25; color: var(--bruma); background: rgba(var(--fondo-rgb), .55); }
.lec-riel a span { font-family: var(--serif); font-size: 1.15rem; letter-spacing: 0; color: var(--oro); }
.lec-riel a.aqui { color: var(--oro-vivo); background: rgba(239, 210, 149, .1); box-shadow: inset 2px 0 0 var(--sala); }
.lec-riel a.aqui span { color: var(--sala); }
.lec-riel a i, .lec-indice a i { width: 10px; height: 10px; border-radius: 50%; background: var(--mc); display: none; }
.lec-riel a[data-m] i, .lec-indice a[data-m] i { display: block; }
[data-m="si"] { --mc: var(--si); } [data-m="no"] { --mc: var(--no); } [data-m="duda"] { --mc: var(--duda); }

/* la entrada: ruta, título en dos niveles, lo esencial, el colofón del libro y el botón de la práctica (arriba y a la vista) */
body.lec .cabecera.lec-cab { min-height: 0; display: block; place-items: normal; text-align: left; padding: calc(var(--barra) + 44px) 0 8px; }
.lec-cab-in { position: relative; z-index: 0; display: block; }
.lec-cab-in::before { content: ""; position: absolute; inset: -40px -14vw; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 58% 55% at 50% 55%, rgba(var(--fondo-rgb), .7), rgba(var(--fondo-rgb), .3) 55%, rgba(var(--fondo-rgb), 0) 80%); }
.lec-cab-in::after { content: ""; display: block; clear: both; }
@media (min-width: 1000px) {
  .lec-cab-in { display: grid; gap: 28px 40px; grid-template-columns: minmax(0, 1fr) 280px; align-items: start; }
  .lec-cab-in::after { display: none; }
  .lec-cab-txt { grid-column: 1; grid-row: 1; } .lec-placa { grid-column: 2; grid-row: 1; }
}
.lec-ruta { font-family: var(--rotulo); font-size: var(--r-min); letter-spacing: .3em; text-transform: uppercase; color: var(--oro); line-height: 1.6; }
.lec-ruta a { padding: 15px 4px; margin: -15px -4px; color: inherit; text-decoration: none; }   /* el relleno hace la zona de toque de 44 px sin ensanchar la línea */
.lec-ruta a:hover { text-decoration: underline; }
.lec-titulo { margin: 14px 0 0; font-weight: 400; display: block; }   /* en bloque: las líneas del título rodean el símbolo flotante y una palabra larga baja por debajo si no cabe al lado */
.lec-linea { display: block; font-family: var(--rotulo); font-size: clamp(.95rem, 2.4vw, 1.3rem); letter-spacing: .26em; text-transform: uppercase; color: var(--hueso); line-height: 1.6; }
.lec-nombre { display: block; --W: calc(100vw - 48px); font-family: var(--rotulo); font-size: clamp(2.2rem, 7vw, 4.4rem);   /* el tamaño depende del nombre: --n son sus letras y --L las de su palabra más larga (lo pone el generador); --W, el ancho de la columna del texto; .68 es lo que ocupa una letra de Aboreto en mayúsculas, con su espaciado, DE MEDIA (vale para repartir el nombre en líneas), y .88 lo que ocupa la MÁS ANCHA (vale para que la palabra más larga quepa entera: medido el 24-10 en las 37 páginas, de .55 a .867 por letra; con .68 se partían «MA/RTE», «VEN/US» o «QUIROMANCI/A»). Sin partir NUNCA la palabra (overflow-wrap: normal): con anywhere o break-word, Chrome la partía al lado del símbolo en vez de bajarla debajo; así baja, como dice arriba. Y el mínimo, 1.6rem: con 2rem, «pensamientos» no cabía en un móvil de 360 */
  font-size: clamp(1.6rem, min(6.6rem, calc(var(--W) / (var(--L) * .88)), calc(var(--W) * 1.8 / (var(--n) * .68))), 6.6rem); letter-spacing: .05em; line-height: 1.02; color: var(--oro-vivo); text-shadow: 0 0 34px rgba(239, 210, 149, .4), 0 0 90px rgba(var(--luz-rgb), .35); overflow-wrap: normal; }
@media (min-width: 1000px) { .lec-nombre { --W: 636px; } }   /* la columna del texto: 956 de la mesa menos el símbolo (280) y su hueco (40) */
.lec-esencia { margin-top: 22px; font-size: clamp(1.3rem, 2.4vw, 1.6rem); line-height: 1.5; max-width: 30em; }
.lec-colofon { margin: 26px 0 0; padding: 12px 0; display: flex; flex-wrap: wrap; border-top: 1px solid rgba(239, 210, 149, .22); border-bottom: 1px solid rgba(239, 210, 149, .22); font-family: var(--rotulo); font-size: var(--r-min); letter-spacing: .16em; text-transform: uppercase; color: var(--bruma); line-height: 1.8; }
.lec-colofon span { padding: 0 14px 0 0; margin-right: 14px; border-right: 1px solid rgba(239, 210, 149, .22); white-space: nowrap; }
.lec-colofon span:last-child { border: 0; margin: 0; padding: 0; }
.lec-colofon b { font-weight: 400; color: var(--oro-vivo); }
.lec-practica { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.lec-practica small { font-size: var(--nota); color: var(--bruma); }
.lec-promesa { margin-top: 18px; max-width: 34em; font-size: var(--nota); line-height: 1.45; color: var(--bruma); }
.lec-placa { margin: 0; display: grid; gap: 12px; justify-items: center; align-content: start; }
.lec-placa img { width: min(240px, 100%); height: auto; filter: drop-shadow(0 0 22px rgba(239, 210, 149, .25)); }
@media (max-width: 999px) { .lec-placa { float: right; width: 112px; margin: 0 0 4px 14px; } }
@media (max-width: 520px) {
  body.lec .cabecera.lec-cab { padding-top: calc(var(--barra) + 22px); }
  .lec-ruta { letter-spacing: .2em; font-size: .75rem; }
  .lec-esencia { margin-top: 16px; }
  .lec-colofon { letter-spacing: .08em; margin-top: 20px; } .lec-colofon span { padding-right: 10px; margin-right: 10px; }
  .lec-practica { margin-top: 22px; } .lec-practica small { display: none; }
}

/* el índice del tramo de la meditación (nav.md-mini), cuando lo hay: con la columna de lectura, a su izquierda y sin subirse sobre la entrada (antes la entrada medía casi una pantalla) */
body.lec .md-mini { width: 100%; max-width: 956px; margin: 32px auto 0; justify-content: flex-start; }
body.lec .md-mini-r { text-align: left; }

/* «Antes de leer» (lo pone antes-de-leer.js justo debajo de la entrada) como el epígrafe del libro */
body.lec .seccion.adl { width: 100%; max-width: 956px; margin-inline: auto; padding-block: 44px 0; }
body.lec .adl-tarjeta { border-radius: 0; background: none; box-shadow: none; padding: 28px 0 30px; border-top: 1px solid var(--oro-hilo); border-bottom: 1px solid var(--oro-hilo); gap: 16px; }
body.lec .adl-rot { font-size: var(--r-min); letter-spacing: .24em; }
body.lec .adl-preg { font-size: clamp(1.55rem, 3.2vw, 2.1rem); max-width: 22em; }
body.lec .adl-ops { flex-direction: row; gap: 10px; }
body.lec .adl-ops button { width: auto; text-align: center; padding: 10px 22px; font-size: 1.25rem; }
body.lec .adl-resp { border-top: 0; padding-top: 6px; gap: 12px; }
body.lec .adl-eco { font-size: clamp(1.3rem, 2.4vw, 1.5rem); max-width: 30em; }
body.lec .adl-cita { margin: 4px 0; padding: 4px 0 4px 20px; border-left: 2px solid var(--oro); gap: 6px; }
body.lec .adl-cita p { font-size: clamp(1.5rem, 3vw, 1.9rem); max-width: 24em; }
body.lec .adl-cita span { font-size: .75rem; }
body.lec .adl-dato { line-height: 1.5; max-width: 34em; font-size: clamp(1.1rem, 2vw, 1.3rem); }
body.lec .adl-ir { font-size: var(--r-min); }
@media (max-width: 600px) { body.lec .adl-tarjeta { padding: 24px 0; } body.lec .adl-ops button { font-size: 1.1875rem; } }

/* cuánto quieres leer + tu página + cómo leer los sellos */
.lec-lectura { margin-top: 40px; display: grid; gap: 22px; }
.lec-modo { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.lec-modo-r { font-family: var(--rotulo); font-size: var(--r-min); letter-spacing: .22em; text-transform: uppercase; color: var(--bruma); }
.lec-modo-bt { display: inline-flex; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(239, 210, 149, .4); overflow: hidden; background: rgba(var(--fondo-rgb), .55); }
.lec-modo-bt button { min-height: 48px; padding: 0 22px; font-family: var(--rotulo); font-size: var(--r-min); letter-spacing: .16em; text-transform: uppercase; color: var(--oro-vivo); }
.lec-modo-bt button[aria-pressed="true"] { background: linear-gradient(#f1d68d, #c08a3c); color: #1a1206; }
.lec-mipag { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 16px; border-radius: 999px; font-family: var(--rotulo); font-size: var(--r-min); letter-spacing: .14em; text-transform: uppercase; color: var(--oro-vivo); text-decoration: none; box-shadow: inset 0 0 0 1px rgba(239, 210, 149, .5); background: rgba(var(--fondo-rgb), .55); }
.lec-mipag:hover { box-shadow: inset 0 0 0 1px var(--oro-vivo); }
.lec-mipag b { font-weight: 400; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 12px; display: inline-grid; place-items: center; background: var(--oro-vivo); color: #1a1305; font-size: .75rem; letter-spacing: 0; }
.lec-leyenda { display: grid; gap: 14px 24px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); font-size: var(--nota); line-height: 1.4; color: var(--bruma); }
.lec-leyenda div { display: grid; gap: 4px; justify-items: start; }
.lec-indice { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.lec-indice a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; border-radius: 999px; text-decoration: none; font-family: var(--rotulo); font-size: var(--r-min); letter-spacing: .1em; text-transform: uppercase; color: var(--bruma); box-shadow: inset 0 0 0 1px var(--oro-hilo); background: rgba(var(--fondo-rgb), .55); }
.lec-indice a span { font-family: var(--serif); font-size: 1.1rem; letter-spacing: 0; color: var(--oro-vivo); }
.lec-indice a i { width: 9px; height: 9px; }
@media (min-width: 1260px) { .lec-indice { display: none; } }

/* cada paso, como el capítulo de un libro */
.lec-paso { position: relative; z-index: 0; padding: 76px 0 4px; }
.lec-paso::before { content: ""; display: block; height: 1px; margin-bottom: 30px; background: linear-gradient(90deg, rgba(210, 183, 92, .45), transparent 86%); }
.lec-paso::after { content: ""; position: absolute; inset: 0 -12vw; z-index: -1; pointer-events: none;   /* el velo de siempre, para que el viaje no estorbe al texto */
  background: radial-gradient(ellipse 60% 55% at 60% 50%, rgba(var(--fondo-rgb), .78), rgba(var(--fondo-rgb), .4) 55%, rgba(var(--fondo-rgb), 0) 80%); }
.lec-paso-cab { display: grid; grid-template-columns: 124px minmax(0, 1fr) auto; align-items: center; gap: 6px 18px; margin-bottom: 24px; }
.lec-num { font-family: var(--serif); font-size: clamp(3.6rem, 10vw, 5.8rem); line-height: .85; color: transparent; -webkit-text-stroke: 1.3px var(--oro); }
.lec-h2 { font-family: var(--rotulo); font-weight: 400; font-size: clamp(1.3rem, 3.2vw, 2rem); letter-spacing: .08em; text-transform: uppercase; color: var(--oro-vivo); line-height: 1.2; overflow-wrap: anywhere; }
.lec-lamina { width: 64px; height: 64px; color: var(--sala); opacity: .9; }
.lec-lamina * { vector-effect: non-scaling-stroke; }
@media (max-width: 520px) { .lec-lamina { width: 52px; height: 52px; } .lec-paso-cab { grid-template-columns: 78px minmax(0, 1fr) auto; gap: 4px 12px; } }
.lec-lead { font-size: clamp(1.3rem, 2.4vw, 1.62rem); line-height: 1.5; max-width: 28em; margin-bottom: 30px; }
.lec-lead strong, .lec-texto b, .lec-fuente b, .lec-antes b, .lec-despues b { color: var(--oro-vivo); font-weight: 500; }
.lec-detalle { display: grid; gap: 30px; margin: 0; padding: 0; list-style: none; }
.lec-item { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 10px; }
.lec-texto { font-size: var(--lectura); line-height: 1.6; max-width: 31em; overflow-wrap: break-word; }
.lec-texto b.rh { font-family: var(--rotulo); font-weight: 400; text-transform: uppercase; letter-spacing: .1em; font-size: .64em; color: var(--oro-vivo); line-height: 1.5; }
.lec-ref { font-size: .72em; line-height: 0; vertical-align: super; color: var(--sala); margin-left: 2px; }
.lec-nota { font-size: var(--nota); line-height: 1.45; color: var(--bruma); border-left: 1px solid var(--oro-hilo); padding-left: 14px; max-width: 30em; }
.lec-nota b { color: var(--hueso); font-weight: 500; }
.lec-nota sup { font-size: .76em; color: var(--sala); margin-right: 4px; }
.lec-notas { display: grid; gap: 12px; }
.lec-ref-bt { display: flex; flex-wrap: wrap; gap: 8px; }
.lec-fig { margin: 6px 0 0; display: grid; gap: 12px; justify-items: start; max-width: 560px; }
.lec-fig svg { width: 190px; height: auto; }
.lec-fig figcaption { font-size: var(--nota); line-height: 1.45; color: var(--bruma); border-left: 1px solid var(--oro-hilo); padding-left: 14px; }
@media (min-width: 1000px) {
  .lec-item { grid-template-columns: minmax(0, 1fr) 280px; grid-template-rows: auto auto 1fr; column-gap: 36px; }
  .lec-item > .lec-notas { grid-column: 2; grid-row: 1 / span 3; align-self: start; margin-top: 4px; }
  .lec-item > .lec-sellos, .lec-item > .lec-texto, .lec-item > .lec-fig { grid-column: 1; }
  .lec-fig { grid-template-columns: 190px minmax(0, 1fr); align-items: center; gap: 26px; }
  .lec-ref-bt { display: none; }
}
/* en el móvil las notas del margen se abren al tocar su botón (44 px) y no hacen sitio mientras tanto */
.lec-ref-b { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; font-family: var(--rotulo); font-size: var(--r-min); letter-spacing: .14em; text-transform: uppercase; color: var(--sala); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sala) 55%, transparent); }
.lec-ref-b .lec-ico { width: 14px; height: 14px; stroke-width: 2; }
.lec-ref-b[aria-expanded="true"] { background: color-mix(in srgb, var(--sala) 16%, transparent); box-shadow: inset 0 0 0 1px var(--sala); }
@media (max-width: 999px) { .lec-nota:not([data-abierta]) { display: none; } .lec-nota[data-abierta] { margin-top: 2px; } }
.lec-antes, .lec-despues { margin-bottom: 22px; font-size: var(--lectura); line-height: 1.6; max-width: 31em; }
.lec-despues { margin: 26px 0 0; }

/* IV: cada punto en su tarjeta, en el orden del texto; el color es el de su sello (sin sello, neutra) */
.lec-tarjetas { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; align-items: start; }
.lec-tarjeta { --c: var(--hueso); padding: 20px 20px 24px; border-radius: 22px; display: grid; gap: 14px; align-content: start; min-width: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 9%, transparent), rgba(0, 0, 0, .28)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 42%, transparent); }
.lec-tarjeta--medido { --c: var(--medido); } .lec-tarjeta--nocuadra { --c: var(--nocuadra); } .lec-tarjeta--interpretacion { --c: var(--interp); } .lec-tarjeta--tradicion { --c: var(--tradicion); }
.lec-tarjeta .lec-texto { font-size: 1.2rem; }
@media (min-width: 900px) { .lec-tarjeta .lec-texto { font-size: 1.25rem; } }
.lec-tarjeta .lec-ref-bt { display: flex; }
@media (min-width: 1000px) { .lec-tarjeta .lec-ref-bt { display: none; } }

/* VI: las fuentes, como la bibliografía de un libro */
.lec-fuentes { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.lec-fuentes li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 0 12px; align-items: start; }
.lec-fn { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-family: var(--rotulo); font-size: var(--r-min); color: var(--sala); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sala) 55%, transparent); }
.lec-fuente { font-size: var(--lectura); line-height: 1.5; max-width: 31em; overflow-wrap: anywhere; }
.lec-citada { margin-top: 4px; font-family: var(--rotulo); font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--bruma); line-height: 1.6; }

/* las marcas de la C: «¿Te suena esto?» al final de cada paso */
.lec-reac { margin-top: 30px; padding-top: 18px; border-top: 1px dashed var(--oro-hilo); display: grid; gap: 12px; }
.lec-reac-r { font-family: var(--rotulo); font-size: var(--r-min); letter-spacing: .2em; text-transform: uppercase; color: var(--oro); line-height: 1.5; }
.lec-chips { display: flex; flex-wrap: wrap; gap: 10px; max-width: 640px; }
.lec-chip { --c: var(--hueso); flex: 1 1 auto; min-height: 48px; padding: 0 16px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 1.15rem; line-height: 1.1; white-space: nowrap; color: var(--c); background: color-mix(in srgb, var(--c) 7%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 55%, transparent); transition: background .15s, color .15s, box-shadow .15s; }
.lec-chip .lec-ico { width: 18px; height: 18px; stroke-width: 2.2; }
.lec-chip:hover { background: color-mix(in srgb, var(--c) 16%, transparent); }
.lec-chip[data-v="si"] { --c: var(--si); } .lec-chip[data-v="no"] { --c: var(--no); } .lec-chip[data-v="duda"] { --c: var(--duda); }
.lec-chip[aria-pressed="true"] { background: var(--c); color: #14110a; box-shadow: none; }
@media (max-width: 400px) { .lec-chip { padding: 0 10px; font-size: 1.0625rem; gap: 6px; } .lec-chip .lec-ico { width: 16px; height: 16px; } }

/* el camino del Sol en un año (solo en la página del Sol; lámina del margen del paso III): solo un esquema */
.lec-zodiaco { display: block; width: 100%; height: auto; overflow: visible; }
.lec-zodiaco .z-anillo { stroke: rgba(210, 183, 92, .5); stroke-width: 1.2; }
.lec-zodiaco .z-div { stroke: rgba(210, 183, 92, .5); stroke-width: 1; }
.lec-zodiaco .z-aries { fill: var(--oro-vivo); }
.lec-zodiaco .z-flecha { fill: var(--oro-vivo); }
.lec-zodiaco .z-tierra { fill: var(--hueso); }

/* tu página */
.lec-pagina-sec { margin-top: 90px; }
.lec-pagina { padding: 30px 22px 32px; border-radius: 34px; background: linear-gradient(180deg, color-mix(in srgb, var(--sala) 11%, transparent), rgba(8, 9, 6, .85) 55%); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sala) 50%, transparent), 0 0 70px color-mix(in srgb, var(--sala) 10%, transparent); display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr); scroll-margin-top: 92px; }
.lec-pagina-cab { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 16px; align-items: center; }
.lec-pagina-cab .lec-est { width: 84px; height: 84px; }
.lec-pagina h2 { font-family: var(--rotulo); font-weight: 400; font-size: clamp(1.3rem, 3vw, 1.8rem); letter-spacing: .08em; text-transform: uppercase; color: var(--oro-vivo); line-height: 1.2; }
.lec-nb { overflow-wrap: anywhere; }
.lec-pagina-cab p { font-size: var(--nota); color: var(--bruma); line-height: 1.4; margin-top: 4px; }
.lec-contenido { display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr); }
.lec-bloque { display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); overflow-wrap: anywhere; }
.lec-bloque h3 { font-family: var(--rotulo); font-weight: 400; font-size: var(--r-min); letter-spacing: .2em; text-transform: uppercase; color: var(--c, var(--oro)); display: flex; align-items: center; gap: 8px; }
.lec-bloque h3 .lec-ico { width: 16px; height: 16px; stroke-width: 2.2; }
.lec-bloque ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.lec-bloque li { font-size: 1.2rem; line-height: 1.4; }
.lec-bloque li a { display: inline-flex; align-items: center; min-height: 44px; color: var(--hueso); text-decoration: none; border-bottom: 1px solid var(--oro-hilo); }
.lec-ptexto { font-size: var(--lectura); line-height: 1.55; overflow-wrap: anywhere; }
.lec-vacio { font-size: var(--lectura); color: var(--bruma); line-height: 1.5; }
.lec-pie { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
.lec-borrar { justify-self: start; }
.lec-privado { font-size: var(--nota); color: var(--bruma); line-height: 1.45; }
.lec-confirma { display: grid; gap: 14px; padding: 16px 18px; border-radius: 22px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--no) 60%, transparent); background: color-mix(in srgb, var(--no) 8%, transparent); }
.lec-confirma[hidden] { display: none; }
.lec-confirma p { font-size: 1.2rem; line-height: 1.4; color: var(--hueso); }
.lec-confirma-bt { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 520px) { .lec-pagina { padding: 26px 16px 28px; } }
@media (min-width: 700px) { .lec-pagina { max-width: 760px; } }

/* la estrella de seis puntas del logo: una punta por cosa hecha (tu respuesta de «Antes de leer» y tu marca en los pasos I a V). Se llena al tocar, no al bajar */
.lec-est { --c: var(--sala); display: block; width: 100%; height: 100%; overflow: visible; }
.lec-est .e-circ { fill: none; stroke: color-mix(in srgb, var(--c) 24%, transparent); stroke-width: 1; }
.lec-est .e-guia { stroke: color-mix(in srgb, var(--c) 20%, transparent); stroke-width: 1.2; }
.lec-est .e-lado { stroke: var(--c); stroke-width: 2.8; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .15s; filter: drop-shadow(0 0 3px var(--c)); }
.lec-est .e-lado.hecho { stroke-dashoffset: 0; }
.lec-est .e-marca { fill: var(--tinta); stroke: color-mix(in srgb, var(--c) 60%, transparent); stroke-width: 1.4; transition: fill .15s, stroke .15s; }
.lec-est .e-marca.hecha { fill: var(--c); stroke: var(--c); }
.lec-est.e-completa .e-lado { stroke-width: 3.2; filter: drop-shadow(0 0 5px var(--c)) drop-shadow(0 0 14px var(--c)); }
.lec-est.e-completa .e-circ { stroke: color-mix(in srgb, var(--c) 55%, transparent); }

/* la estantería del tema (la de siempre; solo en pantalla sin animaciones de entrada) */
.lec-estante { margin: -6px 0 30px; }
.lec-estante .estante[data-estante] { margin-top: 0; max-width: 360px; }
.lec-estante .lomo-b { transition: transform .15s, box-shadow .15s; min-width: 44px; }   /* zona de toque de 44 px */
.lec-estante .estante-ficha, .lec-estante .estante-ficha .l3 .cuerpo { animation: none; }
.lec-estante .estante-r { font-size: .75rem; }

/* «Lo esencial»: solo la frase de cada paso (decisión de quien lee; por defecto se ve todo). El paso V, la práctica, y el VI, las fuentes, se quedan enteros */
body[data-modo="esencial"] .lec-detalle, body[data-modo="esencial"] .lec-antes, body[data-modo="esencial"] .lec-despues { display: none; }
body[data-modo="esencial"] .lec-paso { padding-top: 48px; }
body[data-modo="esencial"] .lec-paso#p6 .lec-detalle, body[data-modo="esencial"] .lec-paso#p5 .lec-detalle { display: grid; }
body[data-modo="esencial"] .lec-paso#p5 .lec-antes, body[data-modo="esencial"] .lec-paso#p5 .lec-despues { display: block; }
body[data-modo="esencial"] .lec-reac { margin-top: 0; }

/* con «reducir movimiento»: ninguna transición ni animación de esta lectura */
@media (prefers-reduced-motion: reduce) {
  .lec-btn, .lec-chip, .lec-est .e-lado, .lec-est .e-marca, .lec-estante .lomo-b { transition: none; }
  .lec-estante .estante-ficha, .lec-estante .estante-ficha .l3 .cuerpo { animation: none; }
}

/* «Ver tu cielo», al final de la página (lo pone cielo.js): con zona de toque de 44 px y el subrayado donde estaba (a unos 4 px del texto) */
body.lec .fm-ver { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 2px; border-bottom: 0;
  background: linear-gradient(var(--oro-hilo), var(--oro-hilo)) 0 calc(100% - 10px) / 100% 1px no-repeat; }
body.lec .fm-ver:hover { background-image: linear-gradient(var(--oro), var(--oro)); }

/* enlaces dentro de una frase (los de siempre, del texto): la zona de toque llega a 44 px sin mover el texto (el relleno vertical de un enlace en línea no cambia la línea) */
.lec-texto a, .lec-lead a, .lec-antes a, .lec-despues a, .lec-fuente a, .lec-nota a { padding: 10px 3px; margin-inline: -3px; }
/* «Descubrir tu mapa» de la tarjeta del Kin (viene de kin-articulos.js): zona de toque de 44 px sin que se mueva ni se vea el texto */
body.lec .kh-carta .kh-ir { display: inline-flex; align-items: center; min-height: 44px; margin-block: -9px; padding-inline: 4px; margin-inline: -4px; }

/* navegadores sin color-mix() (anteriores a 2023): bordes y fondos lisos, para que nada quede sin marco */
@supports not (color: color-mix(in srgb, red, blue)) {
  body.lec { --nocuadra: #d2a088; }
  .lec-sello, .lec-chip { box-shadow: inset 0 0 0 1px var(--c); }
  .lec-tarjeta { box-shadow: inset 0 0 0 1px var(--c); background: rgba(0, 0, 0, .28); }
  .lec-ref-b, .lec-fn { box-shadow: inset 0 0 0 1px var(--sala); }
  .lec-pagina { box-shadow: inset 0 0 0 1px var(--sala); background: rgba(8, 9, 6, .85); }
  .lec-confirma { box-shadow: inset 0 0 0 1px var(--no); }
  .lec-est .e-circ, .lec-est .e-guia, .lec-est .e-marca { stroke: var(--c); }
}