/*
Theme Name: msrwilo
Description: Tema propio de msrwilo.com. Cuaderno de campo: papel, tres tintas, estratos y bloques. Sin plugins, sin CDN de terceros salvo Google Fonts.
Author: msrwilo
Version: 1.17.0
Requires PHP: 8.1
Text Domain: msrwilo
*/

/* Los valores salen de la guía de diseño. Si la guía y esto difieren, manda la guía. */
:root{
  /* Siete variables y nada más. Ninguna pieza lleva un color escrito a mano:
     cambiar de lugar (día a noche) es cambiar estas siete. Guía §16. */
  --papel:#F1EEE7; --mesa:#DCD8CF; --tinta:#1C1B19; --lapiz:#6B675F; --linea:#D8D3C8;
  --sello:#A5281B; --azul:#2B3F8C;
  --fusion:multiply;   /* de día la foto se funde con el papel */
  --velo:rgba(28,27,25,.28);  /* lo que oscurece detrás de una hoja abierta */
  --calca:72%;         /* cuánto papel tiene la barra translúcida */
  --grano:.13;         /* grano de papel */
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --garamond:'EB Garamond',Georgia,serif;
  --col:430px; --margen:20px; --suave:cubic-bezier(.2,.8,.2,1);
  /* La medida: ninguna línea de lectura pasa de aquí, por ancha que esté la pantalla. */
  --medida:34em;
  color-scheme:light;
  accent-color:var(--tinta);
}

/* ── La noche: Tlaltícpac. No es un tema del sitio, es otro lugar,
   y por eso lo enciende el dominio y no el sistema del visitante. ── */
[data-noche]{
  --papel:#141412; --mesa:#0C0C0B; --tinta:#EDEAE2; --lapiz:#8E8A80; --linea:#2E2D29;
  --sello:#5FB3C4;   /* el rojo no cruza: allá el acento es el azul maya */
  --azul:#5FB3C4;    /* y el azul maya hace también de mano que anota */
  --fusion:normal;   /* sobre oscuro, fundir la foto la apaga hasta el negro */
  --grano:.06;       /* de noche el mismo grano se ve sucio: es polvo */
  --velo:rgba(0,0,0,.58);  /* de noche el velo sigue oscureciendo, no aclarando */
  --calca:78%;
  color-scheme:dark;
}

*{box-sizing:border-box;margin:0}
html,body{height:100%}
body{
  background:var(--mesa); color:var(--tinta);
  font:400 14px/1.55 var(--mono); -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:underline;text-underline-offset:4px}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--tinta);outline-offset:3px}

/* La hoja: una sola columna de teléfono, centrada en pantallas anchas */
.hoja{
  position:relative; max-width:var(--col); margin:0 auto; min-height:100%;
  background-color:var(--papel);
  box-shadow:0 0 0 1px var(--linea);
}
/* El grano va en una capa aparte para poder cambiarle la opacidad de noche. */
.hoja::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:var(--grano);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Barra: papel calca */
.barra{
  position:sticky; top:0; z-index:5; display:flex; justify-content:space-between; align-items:center;
  padding:14px var(--margen);
  background:color-mix(in srgb,var(--papel) var(--calca),transparent);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-bottom:1px solid transparent; transition:border-color .3s;
}
.movida .barra{border-color:var(--linea)}
.barra a,.barra button{min-height:44px;display:flex;align-items:center;text-decoration:none}

.cuerpo{padding:8px var(--margen) 48px;display:flex;flex-direction:column;gap:14px}

/* La tipografía crece sola entre teléfono y escritorio. No da brincos. */
h1{font:500 clamp(30px,2.1vw + 22px,44px)/1.12 var(--garamond);text-wrap:balance;max-width:20em}
h2{font:500 clamp(22px,.9vw + 19px,28px)/1.2 var(--garamond)}
.lp{color:var(--lapiz);font-size:clamp(12.5px,.2vw + 12px,13.5px)}
.voz{font:italic 400 clamp(23px,1.5vw + 17px,34px)/1.28 var(--garamond);text-wrap:balance;max-width:18em}
.mito{font:400 clamp(18px,.35vw + 17px,21px)/1.55 var(--garamond);max-width:var(--medida)}
.regla{height:1px;background:var(--linea);transform-origin:left}

/* Estrato */
.estrato{display:flex;gap:10px;align-items:center;color:var(--lapiz);font-size:11.5px;letter-spacing:.08em;margin-top:10px}
.estrato::after{content:"";flex:1;height:1px;background:var(--linea)}

/* Sello */
.sello{
  display:inline-block;color:var(--sello);border:1.5px solid var(--sello);
  padding:1px 7px;font-weight:500;font-size:12.5px;
  transform:rotate(-1.6deg);filter:url(#msr-tinta);white-space:nowrap;
}
.estado{color:var(--sello);font-size:12.5px}
.arch{color:var(--lapiz);font-size:12.5px}

/* Bloque de pieza */
.bloque{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;width:100%;text-align:left;transition:transform .15s}
.bloque:active{transform:scale(.985)}
.bloque .marco{position:relative;display:block}
.bloque .foto{display:block;aspect-ratio:1;overflow:hidden}

.bloque .foto img{width:100%;height:100%;object-fit:cover;mix-blend-mode:var(--fusion)}
.bloque .sello{position:absolute;left:-5px;bottom:14px;background:var(--papel)}
.bloque.chico .sello{font-size:10px;bottom:8px}
.bloque .afijos{writing-mode:vertical-rl;font-size:11px;color:var(--lapiz);letter-spacing:.08em;white-space:nowrap;overflow:hidden}
.bloque b{grid-column:1/-1;font:500 21px/1.2 var(--garamond)}
.bloque.chico b{font-size:17px}
/* La lista de obra es una retícula desde el teléfono: el grande ocupa
   el renglón entero y los dos chicos se reparten el siguiente. */
.lista-obra{display:grid;grid-template-columns:1fr 1fr;gap:28px 14px;margin-top:6px;align-items:start;grid-auto-flow:dense}
.lista-obra .bloque:not(.chico){grid-column:1/-1}
.par{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
.par-ficha{grid-template-columns:2fr 3fr}

/* Archivo: la foto se ve un poco apagada */
.es-archivo .foto img,.bloque.archivo .foto img{filter:saturate(.25) contrast(.92)}

/* Pieza sola */
.heroe{aspect-ratio:1;overflow:hidden}
.heroe img{width:100%;height:100%;object-fit:contain;mix-blend-mode:var(--fusion)}
/* Las fotos entran fundiéndose desde el papel; su lugar es papel, nunca un gris. */
/* El fundido solo existe si el guion está vivo: sin él las fotos se ven igual,
   no en blanco. Una foto que depende de JavaScript para verse es una foto rota. */
.js .foto img,.js .heroe img,.js .vinetas img,.js .portada-ent img{opacity:0;transition:opacity .5s ease-out}
.js .foto img.lista,.js .heroe img.lista,.js .vinetas img.lista,.js .portada-ent img.lista{opacity:1}
.vinetas{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.vinetas .v{display:block;overflow:hidden}
.vinetas .v{aspect-ratio:1}
.vinetas img{width:100%;height:100%;object-fit:cover;mix-blend-mode:var(--fusion)}

/* Dato y par */
.sec{display:flex;flex-direction:column;gap:6px}
.et{display:flex;flex-direction:column;font-size:13px}
.et span{color:var(--lapiz);font-size:11.5px}
.kv{display:flex;justify-content:space-between;gap:12px;font-variant-numeric:tabular-nums;padding:2px 0}
.kv span:first-child{color:var(--lapiz)}

/* Colofón y nota al margen: la mano que anota */
.colofon,.nota{color:var(--azul);border-left:1px solid var(--azul);padding-left:12px;font:italic 17px/1.4 var(--garamond)}
.colofon time{display:block;font:normal 11.5px var(--mono)}

/* Botones */
.btn{
  display:block;width:100%;min-height:50px;padding:13px;text-align:center;
  border:1.5px solid var(--tinta);background:var(--tinta);color:var(--papel);
  --mancha:var(--papel);font-size:15px;letter-spacing:.02em;border-radius:0;text-decoration:none;
}
.btn.hueco{background:transparent;color:var(--tinta);--mancha:var(--tinta)}
.enlaces{display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:center}
.enlaces a,.enl{padding:10px 0;display:inline-block}

/* La mancha de tinta */
.tinta{position:relative;overflow:hidden;-webkit-tap-highlight-color:transparent;transition:transform .12s}
.tinta:active{transform:scale(.975)}
.tinta::after{
  content:"";position:absolute;left:var(--x,50%);top:var(--y,50%);width:12px;height:12px;border-radius:50%;
  background:var(--mancha,var(--tinta));transform:translate(-50%,-50%) scale(0);opacity:0;pointer-events:none;
}
.tinta.moja::after{animation:msr-mancha .65s ease-out}

/* Filtros */
.filtros{display:flex;flex-wrap:wrap;gap:4px 16px}
.filtros a{
  padding:8px 0;color:var(--lapiz);font-size:13px;text-decoration:none;
  background-image:linear-gradient(var(--tinta),var(--tinta));background-repeat:no-repeat;
  background-position:0 85%;background-size:0 1px;transition:background-size .35s var(--suave),color .2s;
}
.filtros a[aria-current]{color:var(--tinta);background-size:100% 1px}

/* Índice: hoja suelta */
.velo{position:fixed;inset:0;z-index:60;background:var(--velo);opacity:0;pointer-events:none;transition:opacity .35s}
.indice{
  position:fixed;left:50%;transform:translateX(-50%) translateY(102%);bottom:0;z-index:61;
  width:100%;max-width:var(--col);max-height:92%;overflow-y:auto;touch-action:none;
  background-color:var(--papel);border-top:1px solid var(--tinta);
  padding:10px var(--margen) calc(28px + env(safe-area-inset-bottom));
  transition:transform .55s cubic-bezier(.3,1.3,.45,1);
}
.abierto .velo[data-msr="cerrar"]{opacity:1;pointer-events:auto}
.abierto .indice{transform:translateX(-50%) translateY(0)}
.indice .asa{width:44px;height:3px;background:var(--linea);margin:4px auto 36px}
.it{display:flex;gap:16px;width:100%;text-align:left;border-top:1px solid var(--linea);padding:12px 0;min-height:46px;font-size:15px;text-decoration:none;align-items:baseline}
.it em{margin-left:auto;font-style:normal;color:var(--lapiz);font-size:12px}

/* Hoja de opciones (catálogo) */
.chk{display:flex;gap:10px;align-items:center;min-height:44px;text-align:left;width:100%}
.chk input{position:absolute;opacity:0;pointer-events:none}
.chk i{width:16px;height:16px;border:1.5px solid var(--tinta);flex:none;transition:background .2s}
.chk input:checked+i{background:var(--tinta)}
.grupo{display:grid;grid-template-columns:1fr 1fr;gap:0 14px;margin-bottom:8px}

/* ══════════════════════════════════════════════════════════════
   LAS TRES MEDIDAS DE LA HOJA

   La hoja no se estira: cambia de tamaño, como el papel.
     teléfono   — la hoja en la mano, una columna
     tableta    — la hoja abierta sobre las piernas
     escritorio — la hoja sobre la mesa, con su margen

   El texto nunca rebasa su medida (--medida). Lo que crece es
   la composición: más piezas por renglón, la foto al lado del dato.
   ══════════════════════════════════════════════════════════════ */

/* La portadilla y la ficha son una sola columna hasta que haya ancho. */
.portadilla,.ficha-txt,.col-texto{display:contents}
.col-indice{display:none}

/* La tabla de tres o más columnas se vuelve fichas: el contenido nunca
   se desliza de lado. La primera celda sube como título. */
@media (max-width:779px){
  .tabla.parte thead{display:none}
  .tabla.parte,.tabla.parte tbody,.tabla.parte tr,.tabla.parte td{display:block;width:100%}
  .tabla.parte tr{border-top:1px solid var(--linea);padding:12px 0}
  .tabla.parte td{border:0;padding:2px 0;display:flex;justify-content:space-between;gap:12px;color:var(--lapiz)}
  .tabla.parte td::before{content:attr(data-col);color:var(--lapiz);font-size:12.5px}
  .tabla.parte td:first-child{display:block;color:var(--tinta);font:500 18px/1.25 var(--garamond);margin-bottom:6px}
  .tabla.parte td:first-child::before{content:none}
  .tabla.parte .num{text-align:left}
}

/* ───────── 1. Teléfono acostado y tableta chica (desde 620) ───────── */
@media (min-width:620px){
  :root{--col:600px;--margen:30px}
  .cuerpo{gap:18px;padding-bottom:64px}
  .par{gap:20px}
  .lista-obra{gap:36px}
  .btn{max-width:420px;margin-left:auto;margin-right:auto}
  .indice{padding-bottom:36px}
}

/* ───────── 2. Tableta (desde 780): la hoja se abre en dos ───────── */
@media (min-width:780px){
  :root{--col:740px;--margen:36px}
  .cuerpo{gap:20px;padding-top:12px;padding-bottom:76px}
  .estrato{margin-top:16px}
  .par{gap:24px}
  .vinetas{gap:8px}

  /* Portada: la pieza de un lado, la voz del otro. */
  .portadilla{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);
    gap:30px;align-items:end;margin-bottom:6px;
  }
  .portadilla .voz{align-self:end;padding-bottom:6px}

  /* Obra: el grande sigue mandando el renglón, los dos chicos lo siguen. */
  .lista-obra{gap:44px 24px}

  /* Ficha de obra: la foto se queda quieta mientras se lee el dato.
     Es la cédula de museo: el objeto a un lado, lo que se sabe de él al otro. */
  .ficha{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);column-gap:38px;align-items:start}
  .ficha > .heroe{position:sticky;top:78px}
  .ficha-txt{display:flex;flex-direction:column;gap:20px;min-width:0}
  .ficha-txt .btn{margin-left:0;max-width:340px}
  /* La columna de texto ya es angosta: el dato y el mito no se la reparten. */
  .ficha-txt .par-ficha{grid-template-columns:1fr;gap:18px}
  .ficha-txt .par-ficha .sec{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;align-items:start}

  /* Glosa: término a la izquierda, explicación a la derecha. */
  .glosa > div{display:grid;grid-template-columns:1fr 3fr;gap:24px;align-items:baseline}
  .glosa dd,.glosa .expl{margin:0}
}

/* ───────── 3. Portátil (desde 980) ───────── */
@media (min-width:980px){
  :root{--col:940px;--margen:48px}
  .barra{padding:16px var(--margen)}
  .cuerpo{gap:22px;padding-bottom:88px}
  .lista-obra{gap:48px 26px}
  .ficha{column-gap:46px}
  .filtros{gap:4px 24px}
}

/* ───────── 4. Escritorio (desde 1180): la hoja sobre la mesa ───────── */
@media (min-width:1180px){
  :root{--col:1120px;--margen:64px}
  .cuerpo{gap:26px;padding-bottom:110px}

  /* Obra en escritorio: el grande ocupa dos columnas y dos renglones,
     y los dos chicos se apilan a su derecha. Cada ciclo de tres piezas
     llena un cuadro completo. Ninguna pieza queda suelta. */
  .lista-obra{grid-template-columns:repeat(3,1fr);gap:40px 28px}
  .lista-obra .bloque:not(.chico){grid-column:span 2;grid-row:span 2}
  .lista-obra .bloque.chico b{font-size:19px}

  /* La hoja de lectura: el índice vive en el margen izquierdo mientras se lee,
     y las notas con asterisco salen de la columna, al margen derecho.
     Por eso la columna de lectura no ocupa toda la hoja. */
  /* La hoja de lectura es más ancha que las demás: tiene que caber
     el índice a la izquierda, la columna de lectura y las notas al margen
     a la derecha, sin que nada se salga del papel. */
  .hoja.lee{max-width:1240px}
  .lectura{display:grid;grid-template-columns:170px minmax(0,1fr);column-gap:36px;align-items:start}
  .col-indice{display:block;position:sticky;top:92px}
  .col-texto{display:flex;flex-direction:column;gap:22px;min-width:0}
  .col-texto .texto{max-width:30em}
  /* La nota ya no flota al margen (se encimaba, Wilo 15 nov 2026): va en el texto, como la cita. */
  .col-texto .portada-ent{margin-left:0;margin-right:0}
  .indice-ent a{font-size:13px}

  /* Las listas de secciones, en dos columnas. */
  .cuerpo > .in:has(> .it){display:grid;grid-template-columns:1fr 1fr;gap:0 40px}

  /* El índice ya no sube desde abajo: se saca por el lado,
     como la pestaña de un cuaderno. Con ratón nadie empuja hacia arriba. */
  .indice{
    left:0;top:0;bottom:auto;height:100%;width:420px;max-width:420px;max-height:none;
    transform:translateX(-102%);
    border-top:0;border-right:1px solid var(--tinta);
    padding:88px 44px 44px;
    transition:transform .5s cubic-bezier(.3,1.22,.45,1);
  }
  .abierto .indice{transform:translateX(0)}
  .indice .asa{position:absolute;right:15px;top:50%;width:3px;height:46px;margin:0;transform:translateY(-50%)}
  .it{font-size:16px;padding:14px 0}
}

/* Pensamiento: secciones de periódico */
@media (min-width:780px){
  .periodico{display:grid;grid-template-columns:repeat(2,1fr);gap:30px 24px}
  .periodico .destacada{grid-column:1/-1}
}
@media (min-width:1180px){
  .periodico{grid-template-columns:repeat(4,1fr);gap:34px 24px}
  .periodico .destacada{grid-column:1/3;grid-row:span 2}
  .periodico .destacada b{font-size:28px}
}

/* ───────── Con ratón hay otra cosa que no hay con el dedo: pasar por encima ───────── */
@media (hover:hover) and (pointer:fine){
  .bloque .foto img{transition:transform .5s var(--suave),filter .4s}
  .bloque:hover .foto img{transform:scale(1.025)}
  .bloque:hover b{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
  .it{transition:padding-left .25s var(--suave),color .2s}
  .it:hover{padding-left:8px}
  .filtros a:hover{color:var(--tinta);background-size:100% 1px}
  .btn:hover{background:transparent;color:var(--tinta)}
  .btn.hueco:hover{background:var(--tinta);color:var(--papel)}
  .colofon:hover,.nota:hover{border-left-width:3px}
  .colofon,.nota{transition:border-left-width .2s}
}

/* ══════════════ SISTEMA DE INTERFAZ ══════════════ */

input,textarea,select{caret-color:var(--tinta)}
::placeholder{color:var(--lapiz);opacity:1}


/* Selección: la marca de quien subraya un documento. */
::selection{background:color-mix(in srgb,var(--azul) 18%,transparent);color:var(--tinta)}

/* Barra de desplazamiento: una regla al margen, no un control del sistema. */
@media (pointer:fine){
  html{scrollbar-width:thin;scrollbar-color:var(--lapiz) var(--papel)}
  ::-webkit-scrollbar{width:10px;height:10px}
  ::-webkit-scrollbar-track{background:var(--papel)}
  ::-webkit-scrollbar-thumb{background:var(--lapiz);border:3px solid var(--papel)}
}

/* Saltos del índice: la barra no tapa el apartado. */
html{scroll-behavior:smooth}
[id]{scroll-margin-top:78px}
input,textarea,select{scroll-margin-bottom:120px}

/* Saltar al contenido */
.saltar{position:absolute;left:-9999px;top:0;z-index:99;background:var(--tinta);color:var(--papel);padding:12px 18px}
.saltar:focus{left:0}

/* Botón de cerrar */
.cerrar{position:absolute;right:10px;top:8px;width:44px;height:44px;display:flex;align-items:center;
  justify-content:center;font-size:20px;line-height:1;color:var(--lapiz);transition:color .2s}
.cerrar:hover,.cerrar:active{color:var(--tinta)}

/* Visor de foto: pantalla completa sobre papel, nunca negro. */
.visor{position:fixed;inset:0;z-index:70;background:color-mix(in srgb,var(--papel) 98%,transparent);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px;
  opacity:0;pointer-events:none;transition:opacity .35s}
.visor[data-abierto]{opacity:1;pointer-events:auto}
.visor img{max-width:100%;max-height:78vh;object-fit:contain;mix-blend-mode:var(--fusion);opacity:1}
.visor .pie{color:var(--lapiz);font-size:12.5px;text-align:center}
.visor .rayas{display:flex;gap:6px}
.visor .rayas i{width:16px;height:2px;background:var(--linea)}
.visor .rayas i[data-aqui]{background:var(--tinta)}

/* Progreso de lectura: la misma regla que se traza, pero tarda toda la entrada. */
.avance{position:fixed;left:0;top:0;height:1px;background:var(--tinta);z-index:6;
  width:var(--avance,0%);transition:width .1s linear}

/* Glosa: así escribe Wilo. Término y explicación, no negritas sueltas. */
.glosa{display:flex;flex-direction:column;gap:0}
.glosa > div{padding:12px 0;border-top:1px solid var(--linea)}
.glosa dt,.glosa .term{font:500 14px/1.5 var(--mono);color:var(--tinta)}
.glosa dd,.glosa .expl{margin:6px 0 0;font:400 17px/1.5 var(--garamond)}

/* Tabla: papel pautado, no cuadrícula de programa. */
.tabla{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.tabla th{font:400 11.5px/1.4 var(--mono);color:var(--lapiz);letter-spacing:.06em;
  text-align:left;padding:0 20px 7px 0;border-bottom:1px solid var(--tinta);white-space:nowrap}
.tabla td{padding:9px 20px 9px 0;border-top:1px solid var(--linea);vertical-align:top;font-size:13.5px}
.tabla td:first-child,.tabla th:first-child{padding-left:0}
.tabla th:last-child,.tabla td:last-child{padding-right:0}
.tabla tbody td:first-child{color:var(--tinta)}
.tabla tbody td{color:var(--lapiz)}
.tabla th.num,.tabla td.num{text-align:right}
.tabla .vacio{color:var(--linea)}
.tabla + .pie-tabla{color:var(--lapiz);font-size:12.5px;margin-top:8px}
/* La única tabla que se desliza: la que no se puede partir. */
.tabla-ancha{overflow-x:auto;-webkit-overflow-scrolling:touch;
  mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}

/* Nota al margen: la mano que anota. */
.margen{color:var(--azul);border-left:1px solid var(--azul);padding-left:12px;
  font:400 15px/1.45 var(--garamond)}

/* Texto de lectura */
.texto{max-width:var(--medida);font:400 clamp(18px,.35vw + 17px,21px)/1.62 var(--garamond)}
.texto > * + *{margin-top:1em}
.texto h2{font:500 clamp(22px,.9vw + 19px,28px)/1.22 var(--garamond);margin-top:1.6em}
.texto h3{font:400 13px/1.4 var(--mono);color:var(--lapiz);letter-spacing:.06em;margin-top:1.4em}
.texto ul,.texto ol{padding-left:16px}
.texto ul{list-style:none}
.texto ul li{position:relative}
.texto ul li::before{content:"";position:absolute;left:-16px;top:.72em;width:8px;height:1px;background:var(--linea)}
.texto ol{list-style:none;counter-reset:n}
.texto ol li{counter-increment:n;position:relative}
.texto ol li::before{content:counter(n,decimal-leading-zero);position:absolute;left:-22px;top:.25em;
  font:400 11.5px var(--mono);color:var(--lapiz)}
.texto li + li{margin-top:.4em}
.texto blockquote{font-style:italic;border-left:1px solid var(--tinta);padding-left:16px}
.texto figure img{width:100%}
.texto figcaption{color:var(--lapiz);font:400 12.5px var(--mono);margin-top:6px}
.texto a[href^="http"]::after{content:" ↗";font-size:.8em}

/* Portada de una entrada: lo único que no es cuadrado. */
.portada-ent{display:block;aspect-ratio:3/2;overflow:hidden;margin:0 calc(var(--margen)*-1)}
.portada-ent img{width:100%;height:100%;object-fit:cover;mix-blend-mode:var(--fusion)}

/* Índice de la entrada */
.indice-ent{display:flex;flex-direction:column}
.indice-ent a{display:flex;gap:12px;padding:9px 0;text-decoration:none;color:var(--lapiz);
  font-size:13.5px;align-items:baseline;transition:color .2s}
.indice-ent a[aria-current]{color:var(--tinta)}
.indice-ent a span{font-size:11.5px;color:var(--lapiz)}
.indice-ent .h3{padding-left:22px}

/* ── Piezas que faltaban ── */

/* Desplegable: el campo muestra lo elegido; al tocarlo abre la hoja.
   La flecha es propia, de trazo; la del sistema nunca se usa. */
.desplegable{
  width:100%;min-height:48px;padding:12px 32px 12px 0;text-align:left;
  border:0;border-bottom:1px solid var(--lapiz);background:none;
  font:400 16px var(--mono);color:var(--tinta);position:relative;
}
.desplegable::after{
  content:"";position:absolute;right:12px;top:50%;width:9px;height:9px;
  border-right:1.5px solid var(--lapiz);border-bottom:1.5px solid var(--lapiz);
  transform:translateY(-70%) rotate(45deg);transition:transform .3s var(--suave);
}
.desplegable[aria-expanded="true"]::after{transform:translateY(-20%) rotate(225deg)}

/* Plegable: nunca el triángulo del navegador. */
.plegable{border-top:1px solid var(--linea)}
.plegable > summary{
  list-style:none;cursor:pointer;min-height:46px;display:flex;align-items:center;
  gap:10px;font:400 14px var(--mono);
}
.plegable > summary::-webkit-details-marker{display:none}
.plegable > summary::after{
  content:"";margin-left:auto;width:8px;height:8px;
  border-right:1.5px solid var(--lapiz);border-top:1.5px solid var(--lapiz);
  transform:rotate(45deg);transition:transform .25s var(--suave);
}
.plegable[open] > summary::after{transform:rotate(135deg)}
.plegable > div{padding:0 0 14px}

/* Campo de fecha: el del sistema, con nuestra línea. */
.fecha{
  min-height:48px;padding:10px 0;border:0;border-bottom:1px solid var(--lapiz);
  background:none;font:400 16px var(--mono);color:var(--tinta);
  font-variant-numeric:tabular-nums;
}
.fecha::-webkit-calendar-picker-indicator{opacity:.45;cursor:pointer}

/* La «x» del buscador, igual en todos los navegadores. */
.busca{position:relative;display:block}
.busca input{width:100%;min-height:48px;padding:10px 44px 10px 0;border:0;
  border-bottom:1px solid var(--lapiz);background:none;font:400 16px var(--mono);color:var(--tinta)}
.busca input::-webkit-search-cancel-button{-webkit-appearance:none;display:none}
.busca .limpia{position:absolute;right:0;top:50%;transform:translateY(-50%);
  width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  font-size:17px;color:var(--lapiz)}
.busca input:placeholder-shown ~ .limpia{display:none}

/* Pie fijo de una hoja que pide una decisión. */
.indice .pie-hoja{position:sticky;bottom:0;padding:14px 0 0;background:var(--papel);
  border-top:1px solid var(--linea);display:flex;flex-direction:column;gap:4px;align-items:center}

/* Marcas, no texto: no se seleccionan. */
.sello,.afijos,.estrato{user-select:none;-webkit-user-select:none}
img{-webkit-user-drag:none;user-drag:none}

/* Avisos */
.atn{color:var(--sello);display:flex;gap:8px;align-items:baseline}
.atn::before{content:"●";font-size:8px}

/* Tinta que seca */
.in{animation:msr-seca .75s both;animation-delay:calc(var(--i,0)*55ms + 140ms)}
.regla{animation:msr-traza .9s .2s both var(--suave)}

@keyframes msr-seca{from{opacity:0;filter:blur(3px);transform:translateY(8px)}to{opacity:1;filter:none;transform:none}}
@keyframes msr-traza{from{transform:scaleX(0)}to{transform:none}}
@keyframes msr-mancha{0%{transform:translate(-50%,-50%) scale(0);opacity:.4}100%{transform:translate(-50%,-50%) scale(70);opacity:0}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important}
}

/* Accesibilidad */
.solo-lectores{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Pie de página: no se repite el menú; para eso está el índice. */
.pie{padding:40px var(--margen) 40px;display:flex;flex-direction:column;gap:10px}
.pie .enlaces{justify-content:flex-start}

/* Impresión: hoja blanca, sin grano, sin barra, las fotos enteras. */
@media print{
  :root{--papel:#fff;--mesa:#fff}
  body{background:#fff}
  .hoja{max-width:none;background-image:none;box-shadow:none}
  .barra,.indice,.velo,.visor,.avance,.saltar,.col-indice,.btn,.filtros,.sel{display:none !important}
  .foto img,.heroe img,.vinetas img,.portada-ent img{opacity:1 !important}
  .heroe,.foto,.vinetas .v{aspect-ratio:auto;overflow:visible}
  .heroe img,.foto img{object-fit:contain;height:auto}
  .texto a[href^="http"]::after{content:" (" attr(href) ")";font-size:.7em;color:#666}
  .in{animation:none;opacity:1}
  .pie::after{content:"msrwilo.com";display:block;color:#666;font-size:10px;margin-top:8px}
}

/* Pensamiento: tarjeta de texto para la retícula de periódico. */
.bloque-texto{display:flex;flex-direction:column;gap:6px;text-align:left}
.bloque-texto .foto-texto{display:block;aspect-ratio:3/2;overflow:hidden;margin-bottom:4px}
.bloque-texto .foto-texto img{width:100%;height:100%;object-fit:cover;mix-blend-mode:var(--fusion)}
.bloque-texto b{font:500 clamp(18px,.5vw + 16px,21px)/1.22 var(--garamond)}
.bloque-texto .mito{margin-top:4px}
.bloque-texto.destacada b{font:500 clamp(24px,1.3vw + 19px,32px)/1.18 var(--garamond)}
.bloque-texto.destacada .foto-texto{aspect-ratio:16/9}
@media (max-width:779px){.periodico{display:flex;flex-direction:column;gap:30px}}
@media (hover:hover) and (pointer:fine){
  .bloque-texto .foto-texto img{transition:transform .5s var(--suave)}
  .bloque-texto:hover .foto-texto img{transform:scale(1.025)}
  .bloque-texto:hover b{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
}

/* ── La bio ───────────────────────────────────────────────────────────
   El retrato no va a sangre: es la foto de alguien, no una portada. */
.retrato-bio{display:flex;flex-direction:column;gap:16px}
.retrato{display:block;max-width:230px;aspect-ratio:4/5;overflow:hidden}
.retrato img{width:100%;height:100%;object-fit:cover;mix-blend-mode:var(--fusion)}

/* Línea de tiempo: la regla vertical y un punto por suceso. */
.tiempo{list-style:none;padding:0 0 0 18px;margin:0;position:relative}
.tiempo::before{content:"";position:absolute;left:0;top:7px;bottom:7px;width:1px;background:var(--linea)}
.tiempo li{position:relative;padding:9px 0;display:flex;gap:16px;align-items:baseline;
  font:400 16px/1.4 var(--garamond)}
.tiempo li::before{content:"";position:absolute;left:-18px;top:16px;width:5px;height:5px;
  border-radius:50%;background:var(--tinta)}
.tiempo li span{font:400 12px var(--mono);color:var(--lapiz);flex:none;min-width:5.5em;
  font-variant-numeric:tabular-nums}

@media (min-width:780px){
  .retrato-bio{flex-direction:row;align-items:flex-end;gap:30px}
  .retrato{flex:none;max-width:260px}
  .tiempo li{font-size:18px}
}

/* Nada se sale de la hoja: una dirección larga se parte antes que romper
   la columna. Esto vale para todo el texto, no solo para la bio. */
.texto,.mito,.glosa,.it,.et{overflow-wrap:anywhere;word-break:normal}
.texto img,.texto iframe,.texto video,.texto table{max-width:100%}
.texto pre{overflow-x:auto;white-space:pre-wrap}

/* Mientras llega la lista nueva, la que está se apaga un poco.
   Sin ruedas que giran: solo se nota que algo está pasando. */
[data-lista]{transition:opacity .25s}
[data-lista][data-trabajando]{opacity:.35;pointer-events:none}

/* La hoja de opciones: la misma hoja del índice con otro contenido. */
.opciones{transform:translateX(-50%) translateY(102%)}
.abierto-op .opciones{transform:translateX(-50%) translateY(0)}
.abierto-op .velo[data-msr="cerrar-op"]{opacity:1;pointer-events:auto}
.opciones .estrato:first-of-type{margin-top:0}
.opciones .grupo{margin-bottom:4px}
@media (min-width:1180px){
  /* La hoja de opciones sigue subiendo desde abajo aunque el índice salga
     por el lado: no es navegación, es una decisión que se toma y se cierra. */
  .opciones{left:50%;top:auto;bottom:0;height:auto;width:100%;max-width:560px;max-height:92%;
    border-top:1px solid var(--tinta);border-right:0;padding:10px var(--margen) 28px;
    transform:translateX(-50%) translateY(102%)}
  .abierto-op .opciones{transform:translateX(-50%) translateY(0)}
  .opciones .asa{position:static;width:44px;height:3px;margin:4px auto 36px;transform:none}
}

/* La bitácora: un apunte por renglón, con su día a la izquierda. */
.apunte{display:flex;gap:16px;align-items:flex-start;padding:14px 0;border-top:1px solid var(--linea)}
.apunte time{font:400 11.5px var(--mono);color:var(--lapiz);flex:none;min-width:2.2em;padding-top:5px;
  font-variant-numeric:tabular-nums}
.apunte h2{font:500 19px/1.25 var(--garamond);margin:0 0 4px}
.apunte h2 a{text-decoration:none}
.apunte .texto{font-size:16px}
.apunte .texto > * + *{margin-top:.6em}
.foto-apunte{display:block;max-width:180px;margin-top:10px}
.foto-apunte img{width:100%;height:auto;mix-blend-mode:var(--fusion)}
@media (min-width:780px){
  .apunte{gap:24px}
  .apunte time{min-width:3em}
  .foto-apunte{max-width:240px}
}

/* ── Destacadas (estrella, solo para quien edita) ───────────────────── */
.bloque .estrella{position:absolute;top:6px;right:6px;z-index:2;padding:4px 6px;font-size:19px;line-height:1;
  background:var(--papel);color:var(--lapiz);opacity:.5;cursor:pointer;user-select:none;transition:opacity .2s,color .2s}
.bloque .estrella:hover,.bloque .estrella:focus-visible{opacity:1}
.bloque .estrella.on{color:var(--sello);opacity:1}

/* ── Acciones de la obra: discretas, a la altura de los filtros ─────── */
.acciones{display:flex;flex-wrap:wrap;gap:2px 18px;margin:2px 0 4px}
.acciones a,.acciones button{font:400 12px var(--mono);letter-spacing:.04em;color:var(--lapiz);
  background:none;border:0;padding:10px 0;min-height:40px;cursor:pointer;text-decoration:none}
.acciones a:hover,.acciones button:hover,.acciones a:focus-visible,.acciones button:focus-visible{color:var(--tinta);text-decoration:underline;text-underline-offset:4px}

/* El índice y la hoja de opciones comparten forma, pero no se abren juntas:
   al abrir el índice, la de opciones se queda guardada. */
body.abierto:not(.abierto-op) .indice.opciones{transform:translateX(-50%) translateY(102%)}

/* ── Eventos: lista, calendario del mes y ventana de cada evento ───── */
button.it{background:none;font:inherit;color:inherit;cursor:pointer;border-left:0;border-right:0;border-bottom:0}
.it .que{display:flex;flex-direction:column;gap:3px;min-width:0}
.it .tipo{font:400 11px var(--mono);font-style:normal;letter-spacing:.06em;color:var(--sello)}
.lista-ev{margin-top:10px}

.mes-nombre{margin:14px 0 8px}
.calendario{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border-left:1px solid var(--linea);border-top:1px solid var(--linea)}
.calendario .cab{font:400 10.5px var(--mono);letter-spacing:.06em;color:var(--lapiz);text-align:center;padding:6px 0;
  border-right:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.calendario .dia{position:relative;min-height:52px;padding:5px;display:flex;flex-direction:column;gap:3px;
  border-right:1px solid var(--linea);border-bottom:1px solid var(--linea);min-width:0}
.calendario .dia b{font:400 11.5px var(--mono);color:var(--lapiz)}
.calendario .dia.con b{color:var(--tinta);font-weight:500}
.calendario .dia.hoy b{color:var(--sello)}
.calendario .dia.hoy{box-shadow:inset 0 0 0 1px var(--sello)}
.ev-dia{background:none;border:0;padding:0;margin:0;cursor:pointer;text-align:left;color:var(--tinta);font:inherit;min-width:0}
/* En el teléfono el día con evento es todo él un botón con una marca. */
.ev-dia::before{content:"";display:block;width:7px;height:7px;border-radius:50%;background:var(--sello)}
.ev-dia span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.ev-dia:first-of-type::after{content:"";position:absolute;inset:0}
@media (min-width:780px){
  .calendario .dia{min-height:92px;padding:7px}
  .ev-dia{display:block;width:100%;border-left:2px solid var(--sello);padding:1px 0 1px 6px}
  .ev-dia::before,.ev-dia:first-of-type::after{content:none}
  .ev-dia span{position:static;width:auto;height:auto;clip-path:none;display:block;font:400 12.5px/1.25 var(--garamond);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .ev-dia:hover span{text-decoration:underline}
}

.velo-ev{z-index:60}
.evento-hoja{position:fixed;left:50%;bottom:0;z-index:61;width:100%;max-width:var(--col);max-height:86vh;overflow-y:auto;
  box-sizing:border-box;background:var(--papel);border-top:1px solid var(--tinta);
  padding:10px var(--margen) calc(28px + env(safe-area-inset-bottom));
  transform:translate(-50%,104%);transition:transform .55s cubic-bezier(.3,1.3,.45,1),visibility .55s;visibility:hidden}
.evento-hoja.activa{visibility:visible}
.evento-hoja .asa{width:44px;height:3px;background:var(--linea);margin:4px auto 26px}
.evento-hoja .cerrar{position:absolute;right:10px;top:8px}
.evento-hoja h2{font:500 26px/1.15 var(--garamond);margin:12px 0 14px}
.evento-hoja .pie-hoja{margin-top:18px}
.abierto-ev .velo-ev{opacity:1;pointer-events:auto}
.abierto-ev .evento-hoja.activa{transform:translate(-50%,0)}
/* En pantalla ancha la ventana flota al centro en vez de subir del borde. */
@media (min-width:780px){
  .evento-hoja{bottom:auto;top:50%;max-width:560px;border:1px solid var(--tinta);padding:34px 36px 30px;
    opacity:0;transform:translate(-50%,-46%);transition:transform .4s var(--suave),opacity .3s,visibility .4s}
  .evento-hoja .asa{display:none}
  .abierto-ev .evento-hoja.activa{opacity:1;transform:translate(-50%,-50%)}
}

/* ── Eventos: estrella y tipo, solo para quien edita ───────────────── */
.fila-ev{display:flex;align-items:stretch}
.fila-ev .it{flex:1;min-width:0}
.estrella-ev{flex:none;width:44px;background:none;border:0;border-top:1px solid var(--linea);
  font-size:18px;color:var(--lapiz);opacity:.45;cursor:pointer;transition:opacity .2s,color .2s}
.estrella-ev:hover,.estrella-ev:focus-visible{opacity:1}
.estrella-ev.on{color:var(--sello);opacity:1}
.it .tipo:empty{display:none}
.filtros .solo-editor{color:var(--sello)}
.evento-hoja .solo-editor{margin-top:18px}
.tipos-ev{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.tipos-ev button{font:400 12px var(--mono);letter-spacing:.03em;color:var(--lapiz);background:none;
  border:1px solid var(--linea);padding:7px 10px;min-height:36px;cursor:pointer}
.tipos-ev button[aria-pressed="true"]{color:var(--papel);background:var(--tinta);border-color:var(--tinta)}
.sello[hidden]{display:none}

/* El visor acerca con dos dedos, doble toque o rueda: el navegador no debe
   hacer su propio zoom encima. */
.visor{touch-action:none}
.visor img{cursor:zoom-in;transform-origin:center center;will-change:transform}
.visor[data-zoom] img{cursor:grab;max-height:78vh}
.visor[data-zoom] .pie,.visor[data-zoom] .rayas{opacity:0;transition:opacity .2s}

/* ── 404: el astrolabio ─────────────────────────────────────────────── */
html{transition:background-color .9s}
.astro{margin-top:22px}
.astro [hidden],.astro[hidden]{display:none !important}
.astro-caja{max-width:340px;margin:14px auto 0}
.astrolabio{display:block;width:100%;height:auto;overflow:visible;-webkit-tap-highlight-color:transparent}
.astrolabio .traza{fill:none;stroke:var(--tinta);stroke-width:1.1}
.astrolabio .fina{stroke:var(--lapiz);stroke-width:.7}
.astrolabio .estrella-a{fill:var(--sello)}
/* Sin el recuadro que el teléfono pinta al tocar: el anillo responde solo con su banda. */
.astrolabio .anillo{cursor:pointer;transform-origin:130px 130px;outline:none;-webkit-tap-highlight-color:transparent}
.astrolabio .banda{fill:var(--papel);stroke:var(--tinta);stroke-width:1;transition:fill .25s}
.astrolabio .anillo:active .banda{fill:color-mix(in srgb,var(--tinta) 8%,var(--papel))}
@media (hover:hover){.astrolabio .anillo:hover .banda{fill:color-mix(in srgb,var(--tinta) 5%,var(--papel))}}
.astrolabio .anillo:focus-visible .banda{stroke-width:1.8}
.astrolabio .grano-a{fill:var(--lapiz)}
.astrolabio .signo{fill:none;stroke:var(--sello);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.astrolabio .anillo[data-a="0"] .signo{fill:var(--sello)}
.astrolabio .eje{fill:var(--tinta)}
.astrolabio .alidada{stroke:var(--sello);stroke-width:1.4;stroke-dasharray:116;stroke-dashoffset:116;opacity:0}
.astrolabio .rumbo{fill:none;stroke:var(--sello);stroke-width:2.2;stroke-dasharray:100;stroke-dashoffset:100;opacity:0}
.astro.apunta .alidada{stroke-dashoffset:0;opacity:1}
.astro.apunta .anillo{cursor:default;pointer-events:none}
.astro.viaja .rumbo{opacity:1;stroke-dashoffset:0}
.astro-aviso{min-height:1.4em;text-align:center;font:400 13px var(--mono);color:var(--lapiz);margin:12px 0 0}
.astro-sueno{text-align:center;margin:18px auto 0}
.estrato-sueno{font:400 11.5px var(--mono);letter-spacing:.12em;color:var(--lapiz)}
.astro-destino{font:500 clamp(30px,8vw,40px)/1.1 var(--garamond);color:var(--sello);margin:4px 0 2px}
.astro-que{margin:0}
/* La tinta que cubre la hoja al entrar al sueño. */
.astro-tinta{position:fixed;z-index:90;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;
  background:var(--mesa);transform:scale(0);pointer-events:none}
.astro-tinta.cubre{transform:scale(260);transition:transform .9s cubic-bezier(.6,0,.4,1)}
@media (prefers-reduced-motion:no-preference){
  .astrolabio .anillo{transition:transform .55s cubic-bezier(.3,1.4,.5,1)}
  .astrolabio .alidada{transition:stroke-dashoffset .7s .1s ease-out,opacity .2s}
  .astro.apunta .estrella-a{animation:late 1s ease-in-out infinite}
  /* Algo está pasando: el astrolabio se sacude y luego los anillos se desbocan,
     cada uno a su ritmo, mientras el rumbo se llena. */
  .astro.viaja .astrolabio{animation:sacude .5s ease-in-out 2}
  .astro.viaja .anillo[data-a="0"]{animation:gira 3.6s cubic-bezier(.5,0,.9,.6) both}
  .astro.viaja .anillo[data-a="1"]{animation:gira-al-reves 3.6s cubic-bezier(.5,0,.9,.6) both}
  .astro.viaja .anillo[data-a="2"]{animation:gira 3.6s .15s cubic-bezier(.5,0,.9,.6) both}
  .astro.viaja .rumbo{transition:stroke-dashoffset 3.6s linear,opacity .3s}
  .astro-sueno:not([hidden]){animation:sueno .9s ease-out both}
}
@keyframes late{50%{opacity:.3}}
@keyframes sacude{0%,100%{transform:none}20%{transform:rotate(-2.5deg)}40%{transform:rotate(2deg)}60%{transform:rotate(-1.5deg)}80%{transform:rotate(1deg)}}
@keyframes gira{from{transform:rotate(0)}to{transform:rotate(1800deg)}}
@keyframes gira-al-reves{from{transform:rotate(0)}to{transform:rotate(-2160deg)}}
@keyframes sueno{from{opacity:0;filter:blur(6px);transform:translateY(8px)}}

/* ── El índice jalado desde la barra de arriba (solo con dedo) ─────── */
@media (pointer:coarse){
  .barra{touch-action:none}
}
.desde-arriba .indice:not(.opciones){top:0;bottom:auto;border-top:0;border-bottom:1px solid var(--tinta);
  transform:translateX(-50%) translateY(-102%);display:flex;flex-direction:column;
  padding-top:calc(14px + env(safe-area-inset-top));padding-bottom:10px}
.desde-arriba .indice:not(.opciones) .asa{order:99;flex:none;margin:22px auto 4px}
.abierto.desde-arriba .indice:not(.opciones){transform:translateX(-50%) translateY(0)}

/* La pieza sin relato todavía: se dice, no se inventa. */
.mito .sin-mito{font-style:italic}
/* Fórmulas (assets/latex.js las dibuja en MathML, sin librerías) */
.texto .tex math{font-size:1.06em}
.texto .tex.bloque{display:block;text-align:center;margin:1.2em 0;overflow-x:auto;cursor:auto}
.texto .tex.bloque math{font-size:1.18em}
.texto .tex{cursor:auto}
.texto .tex.bloque{overflow-y:hidden;padding:6px 0}