:root{--paper:#F7F3E9;--ink:#1A1714;--red:#C8472E;--muted:#574f47;--faint:#8a8278;--faint2:#a39b8f;
--caslon:"Libre Caslon Display",Georgia,serif;--news:"Newsreader",Georgia,serif;--mono:"Courier Prime","Courier New",monospace}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--news);font-size:15px;line-height:1.5}
::selection{background:var(--red);color:#fff}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);
padding:11px 16px;z-index:10;font-family:var(--mono);font-size:12px;text-decoration:none}
.skip:focus{left:0}
.stripnav{display:contents}  /* landmark <nav> sin alterar el flex de la tira */
/* Bloque de compra (encargo DAMA, bloque B): botones de IGUAL peso — en Convoca el
   relleno sólido significa «estado activo», no «acción», así que ninguno va relleno.
   Amazon trabaja a su favor por ir primero, poder decir «Comprar» y llevar a ficha. */
.buyrow{display:flex;flex-wrap:wrap;gap:9px;margin:13px 0 0}
.buy{display:inline-flex;align-items:center;justify-content:center;gap:8px;
background:transparent;color:var(--ink);text-decoration:none;
padding:11px 16px;min-height:44px;box-sizing:border-box;
font-family:var(--news);font-size:.88rem;border:1px solid rgba(26,23,20,.38)}
.buy .ar{font-family:var(--mono);color:var(--red)}
.buy:hover{border-color:var(--red);color:var(--red)}
.buyaff{font-family:var(--mono);font-size:10.5px;color:var(--faint);margin:9px 0 0}
@media(max-width:560px){.buy{flex:1 1 100%}}   /* móvil: uno por línea, ancho completo */
/* Ficha de libro (bloque C): identidad + cuerpo a dos columnas, sin estilos inline */
.bookhead{border-bottom:3px double rgba(26,23,20,.55);padding-bottom:15px}
.bookhead .bauth{font-family:var(--news);font-style:italic;font-size:19px;color:var(--muted);margin:3px 0 0}
.bookhead .bprize{font-family:var(--mono);font-size:12px;letter-spacing:.11em;text-transform:uppercase;
color:var(--ink);margin:12px 0 0}
.bookhead .bpub{font-family:var(--mono);font-size:12px;letter-spacing:.05em;color:var(--red);margin:5px 0 0}
/* La segunda fila se lleva lo que sobra (Bea, 13-09-2026: los datos, debajo de la
   portada). La prosa ocupa las dos filas, y sin esto repartía su alto entre ellas: la
   primera crecía media página y los datos bajaban con ella, lejos de la cubierta. */
.bookgrid{display:grid;grid-template-columns:180px 1fr;grid-template-rows:auto 1fr;gap:36px;align-items:start;margin:24px 0 56px}
/* En escritorio, cubierta y ficha técnica siguen apiladas en la columna estrecha
   aunque en el documento la prosa vaya en medio: el grid las coloca. */
.bkcol{grid-column:1;grid-row:1}
.bkmeta{grid-column:1;grid-row:2}
.bkprosa{grid-column:2;grid-row:1/span 2}
.bookcover{aspect-ratio:2/3;background:#EFE8D8;box-shadow:2px 2px 0 rgba(26,23,20,.16);
overflow:hidden;display:block;margin:0}   /* margin:0 anula el de <figure>: la imagen llena 180px */
.bookcover img{width:100%;height:100%;object-fit:cover}
.bookcover .ph{display:flex;align-items:center;justify-content:center;height:100%;text-align:center;
padding:12px;font-family:var(--caslon);font-size:16px;color:#574f47}
/* La cuarta vida: el único eslabón de la cadena en el que se puede hacer algo hoy.
   Se marca con color y peso, no con una caja. */
.cadena .cad-abierta{color:var(--ink)}
.cadena .cad-abierta b{color:var(--red)}
.cad-lnk{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;white-space:nowrap;
color:var(--red);text-decoration:none;border-bottom:1px solid rgba(200,71,46,.4)}
.cad-lnk:hover{border-color:var(--red)}
.volver-lnk{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--muted);
text-decoration:none;display:inline-block}
.volver-lnk:hover{color:var(--red)}
.sino{max-width:56ch;font-size:1.06rem;line-height:1.62}
.sino p{margin:0 0 .7em}
/* Volumen colectivo: quién más está en el libro (caso Premi Tinet) */
.vol-i{max-width:56ch;color:var(--muted);margin:0 0 .6em}
.volumen{list-style:none;padding:0;margin:0;max-width:56ch}
.volumen li{padding:.42em 0;border-bottom:1px dotted rgba(26,23,20,.22);font-size:.95rem}
.vol-m{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
color:var(--red);margin-left:6px}
.bookmeta{margin:15px 0 0}
.bookmeta div{display:flex;justify-content:space-between;gap:12px;padding:6px 0;
border-bottom:1px solid rgba(26,23,20,.1);font-family:var(--mono);font-size:11.5px}
.bookmeta dt{color:var(--faint);letter-spacing:.04em;text-transform:uppercase}
.bookmeta dd{margin:0;color:var(--ink);text-align:right}
.cadena{list-style:none;padding:0;margin:6px 0 0;max-width:60ch}
.cadena li{position:relative;padding:0 0 15px 22px;font-family:var(--news);font-size:15px;color:var(--muted)}
.cadena li::before{content:"";position:absolute;left:2px;top:6px;width:7px;height:7px;border-radius:50%;
background:var(--red)}
.cadena li:not(:last-child)::after{content:"";position:absolute;left:5px;top:14px;bottom:-1px;width:1px;
background:rgba(26,23,20,.22)}
.cadena b{color:var(--ink);font-weight:600}
.sinofirma{font-family:var(--news);font-style:italic;font-size:.78rem;color:var(--faint);margin:10px 0 0}
.medios a{display:block;margin:5px 0;border-bottom:0}   /* sin el subrayado largo del .src */
/* Del mismo premio (Bea, 12-09-2026): los otros libros que ganó el mismo premio. Sin
   cajas: portada pequeña, título y filete, como la lista de medios. */
.mismo{list-style:none;padding:0;margin:6px 0 0;max-width:60ch}
.mismo li{border-bottom:1px solid rgba(26,23,20,.12)}
.mismo a{display:grid;grid-template-columns:46px minmax(0,1fr);gap:14px;align-items:center;
padding:9px 0;text-decoration:none;color:inherit}
.mismo a:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.mp-cub{aspect-ratio:2/3;background:#EFE8D8;box-shadow:1px 1px 0 rgba(26,23,20,.16);overflow:hidden;display:block}
.mp-cub img{width:100%;height:100%;object-fit:cover;display:block}
.mp-cub .ph{display:flex;align-items:center;justify-content:center;height:100%;padding:3px;
font-family:var(--caslon);font-size:8px;line-height:1.1;text-align:center;color:#574f47;overflow:hidden}
.mp-txt{display:flex;flex-direction:column;gap:1px;min-width:0}
.mp-t{font-family:var(--caslon);font-size:1.02rem;line-height:1.2;color:var(--ink)}
.mismo a:hover .mp-t{color:var(--red)}
.mp-a{font-size:.86rem;color:var(--muted)}
.mp-p{font-family:var(--mono);font-size:.7rem;letter-spacing:.03em;color:var(--faint)}
/* Los temas del libro, bajo la sinopsis (12-09-2026): una línea en la letra de los
   datos; los que tienen estantería llevan a ella. */
.temas{font-family:var(--mono);font-size:.74rem;letter-spacing:.03em;line-height:1.8;
color:var(--muted);margin:12px 0 0;max-width:60ch}
.temas-l{text-transform:uppercase;letter-spacing:.12em;color:var(--faint);margin-right:8px}
.temas a{color:var(--ink);text-decoration:none;border-bottom:1px solid rgba(26,23,20,.25)}
.temas a:hover{color:var(--red);border-bottom-color:var(--red)}
@media(max-width:640px){.bookgrid{grid-template-columns:1fr;grid-template-rows:none;gap:18px}.bookcover{max-width:180px}
/* Una sola columna: se sueltan las coordenadas y manda el orden del documento,
   que es cubierta -> sinopsis -> ficha técnica. */
.bkcol,.bkmeta,.bkprosa{grid-column:auto;grid-row:auto}}
/* La página de un premio (20-10-2026): la convocatoria, sus ediciones, el palmarés y los
   libros, en una columna de lectura. Sin cajas: filete, peso y color, como la ficha de un
   libro. Los datos van en dos columnas —rótulo en la letra de los datos, valor en la de
   leer— porque las condiciones son frases largas y en la tabla estrecha de la ficha de
   libro, alineadas a la derecha, no se leerían. */
.premio{max-width:760px;margin:22px 0 56px}
.pr-ed{font-family:var(--caslon);font-size:19px;line-height:1.3;margin:4px 0 14px;color:var(--ink)}
.pr-datos{display:grid;grid-template-columns:minmax(7.5em,max-content) minmax(0,1fr);margin:0;
border-top:1px solid rgba(26,23,20,.12)}
.pr-datos div{display:contents}
.pr-datos dt,.pr-datos dd{padding:8px 0;border-bottom:1px solid rgba(26,23,20,.12)}
.pr-datos dt{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
color:var(--faint);padding:10px 18px 8px 0}
.pr-datos dd{margin:0;font-size:15px;color:var(--ink)}
.pr-nota{font-style:italic;color:var(--muted);margin:12px 0 0;max-width:62ch}
.pr-aviso{color:var(--red);margin:12px 0 0;max-width:62ch}
/* El palmarés usa la fila de «Del mismo premio»: con libro, su cubierta a la izquierda; sin
   libro, el texto alineado con los títulos de las filas que la llevan. */
.pr-palm{max-width:66ch}
.pr-palm .sin-libro{padding:9px 0 9px 60px}
.pr-palm .mp-p a{color:var(--muted)}
.pr-fuente{font-size:13px;font-style:italic;color:var(--faint);margin:34px 0 0;max-width:66ch;line-height:1.55}
.pr-fuente a{color:var(--ink)}
/* El mes en Mejoras: rótulo en la letra de los datos y filete, no un título que compita
   con los de cada mejora (21-10-2026). */
.mes{font-family:var(--mono);font-size:12px;font-weight:400;letter-spacing:.14em;
text-transform:uppercase;color:var(--ink);margin:38px 0 0;padding:0 0 9px;
border-bottom:1px solid rgba(26,23,20,.3)}
/* El nombre del premio, en el palmarés, lleva a su página: subrayado fino, como los temas. */
.lt a{text-decoration:none;border-bottom:1px solid rgba(26,23,20,.25)}
.lt a:hover{color:var(--red);border-bottom-color:var(--red)}
@media(max-width:560px){.pr-datos{grid-template-columns:minmax(0,1fr)}
.pr-datos dt{border-bottom:0;padding:10px 0 0}.pr-datos dd{padding-top:2px}}
/* Escaparate (bloque D): la mesa (destacados) y el estante — sin cajas, solo filete */
.fpills{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0 2px;align-items:center}
/* Corta la fila: el grupo del año empieza línea, en vez de quedarse colgando detrás
del idioma. Petición de Bea, 14-08-2026. */
.fpills .fbr{flex-basis:100%;height:0;margin:0}
.fpills button{font:inherit;font-size:13px;padding:6px 13px;border-radius:0;
border:1px solid rgba(26,23,20,.3);background:transparent;cursor:pointer;color:var(--muted)}
.fpills button.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.fpills .flbl{font-size:13px;color:var(--faint)}
.fpills .fsep{opacity:.4}
/* La caja de búsqueda del escaparate: una línea con su filete, sin caja, como la del
   buscador. Al enfocarla el filete se vuelve rojo y más grueso, sin recuadro. El número
   de las pastillas va en la letra de los datos y se apaga con ellas. */
.fbusca{max-width:640px;margin:14px 0 6px}
.fbusca input{width:100%;font:inherit;font-size:1.02rem;padding:7px 0 8px;border:0;border-radius:0;
border-bottom:1.5px solid var(--ink);background:transparent;color:var(--ink)}
.fbusca input::placeholder{color:var(--faint);font-style:italic}
.fbusca input:focus{outline:none;border-bottom-color:var(--red);box-shadow:0 1px 0 var(--red)}
.fbusca label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* El tema que viene de una ficha (?tema=): se ve, y se quita, en la letra de los datos. */
.ftema{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
color:var(--faint);margin:10px 0 0}
.ftema b{color:var(--ink);font-weight:400}
.ftema button{font:inherit;background:none;border:0;border-bottom:1px solid currentColor;
color:var(--red);cursor:pointer;padding:0;margin-left:10px}
.fpills .fn{font-family:var(--mono);font-size:11px;margin-left:6px;opacity:.65}
.fpills .fn:empty{display:none}
.fpills button:disabled{opacity:.35;cursor:default}
.mesa{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 34px;grid-auto-rows:1fr}
.mesa .mrow{display:grid;grid-template-columns:180px 1fr;gap:18px;align-content:start;
padding:18px 0;border-bottom:1px solid rgba(26,23,20,.16)}
.mesa .cover{aspect-ratio:2/3;background:#EFE8D8;box-shadow:2px 2px 0 rgba(26,23,20,.16);
overflow:hidden;display:block}
.mesa .cover img{width:100%;height:100%;object-fit:cover}
/* Libro sin portada en la MESA. Faltaba: el estante y la ficha sí tenían su regla,
   la mesa no, así que el título salía suelto arriba a la izquierda y subrayado. No se
   veía porque esos libros llevaban el GIF vacío de Cegal, que cargaba; al retirarlo
   quedó el hueco a la vista (lo cazó Beatriz en el escaparate).
   OJO al subrayado: lo pinta el <a class="cover"> que envuelve, y text-decoration en
   un descendiente NO lo borra — tiene que ir en el propio enlace. */
.mesa .cover{text-decoration:none}
.mesa .cover .ph{display:flex;align-items:center;justify-content:center;height:100%;
text-align:center;padding:12px;font-family:var(--caslon);font-size:1rem;color:#574f47}
.esc-tt{font-family:var(--caslon);font-size:1.2rem;line-height:1.15;margin:0 0 3px}
.esc-tt a{text-decoration:none}
/* El bloque de texto entero es el enlace a la ficha; el subrayado solo lo lleva el
   título, para que no parezca que hay cuatro enlaces distintos. */
.fresco{position:fixed;left:50%;transform:translateX(-50%);
bottom:calc(14px + env(safe-area-inset-bottom));z-index:80;display:flex;align-items:center;
gap:12px;max-width:min(560px,calc(100vw - 24px));background:var(--ink);color:var(--paper);
padding:11px 12px 11px 16px;box-shadow:0 6px 24px rgba(26,23,20,.35);font-size:.9rem}
.fresco button{font:inherit;cursor:pointer;border:1px solid var(--paper);background:none;
color:var(--paper);padding:6px 11px;white-space:nowrap}
.fresco .fr-si{background:var(--paper);color:var(--ink);font-weight:500}
.fresco .fr-no{border-color:rgba(247,243,233,.45);padding:6px 9px}
.vsel{display:flex;align-items:center;justify-content:flex-end;gap:8px;
position:sticky;top:0;z-index:20;
background:var(--paper);padding:11px 0;margin:0 0 4px;
border-bottom:1px solid rgba(26,23,20,.12);
font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase}
/* 8 px arriba y abajo, no 6: con 6 la pestaña medía 23 px de alto y la Mirona
   la marcaba —24 es el mínimo de WCAG 2.5.8 y estas van pegadas—. Tres píxeles
   de más y un dedo deja de fallarlas. */
.vsel b,.vsel a{padding:8px 12px;font-weight:400;text-decoration:none}
/* El peso va en «Explorar», no en «Normal». Estaban al revés: el negro se lo llevaba
   la vista en la que YA estás, que no hace falta anunciar, y la otra —una forma de
   navegar que nadie ha visto antes— quedaba como un enlace más del montón. Lo pidió Bea
   el 15-08-2026: «al ser tan especial la navegación, deberíamos destacar Explorar». */
.vsel b{background:var(--ink);color:var(--paper)}
.vsel a{color:var(--muted);border:1px solid rgba(26,23,20,.35)}
.vsel a:hover{border-color:var(--red);color:var(--red)}
@media(max-width:759px){.vsel .pc{display:none}}
.mtxt{display:block;text-decoration:none;color:inherit}
.compartir{margin:34px 0 0}
.cbtns{display:flex;flex-wrap:wrap;gap:8px}
.cbtn{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;
padding:9px 13px;border:1px solid rgba(26,23,20,.4);background:#FFFDF6;color:var(--muted);
text-decoration:none;cursor:pointer;line-height:1}
.cbtn:hover{border-color:var(--ink);color:var(--ink)}
.cbtn[hidden]{display:none}
.mtxt:hover .esc-tt,.mtxt:focus-visible .esc-tt{text-decoration:underline}
.mtxt:focus-visible{outline:2px solid var(--rojo);outline-offset:3px}
.esc-aa{color:var(--muted);margin:0 0 7px}
.esc-pp{font-family:var(--mono);font-size:.72rem;letter-spacing:.03em;color:var(--faint);margin:2px 0}
.esc-pub{font-family:var(--mono);font-size:.72rem;color:var(--red);margin:5px 0 2px}
.estanteria{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));
gap:0 26px;grid-auto-rows:1fr}          /* filas de igual alto: los filetes se alinean */
/* Los premios se alineaban ABAJO (margin-top:auto), así que empezaban a distinta
altura en cada tarjeta según lo largo que fuera el título: el de tres premios casi
pegado al autor y el de uno, a un palmo. Con subgrid, cada fila de la tarjeta —portada,
título, autor, premios— se mide con las de sus vecinas de estante, y el bloque de
premios arranca a la misma altura en toda la fila. Lo pidió Bea el 14-08-2026 viendo
justo esa distancia desigual.
El flex de abajo se queda como respaldo: donde no haya subgrid, la página sigue bien
—solo que alineada por abajo, como hasta hoy—. */
.libro{display:flex;flex-direction:column;padding:0 0 20px;margin-bottom:26px;
border-bottom:1px solid rgba(26,23,20,.28);text-decoration:none;color:inherit}
.libro .cover{aspect-ratio:2/3;width:100%;box-shadow:2px 2px 0 rgba(26,23,20,.14);
background:#EFE8D8;overflow:hidden;margin:0 0 9px}
.libro .cover img{width:100%;height:100%;object-fit:cover}
.libro .cover .ph{display:flex;align-items:center;justify-content:center;height:100%;
text-align:center;padding:10px;font-family:var(--caslon);font-size:.9rem;color:#574f47}
.libro .tt{font-family:var(--caslon);font-size:1rem;line-height:1.2;margin:0}
.libro:hover .tt{color:var(--red)}
.libro .aa{font-size:.82rem;color:var(--muted);margin:2px 0 0}
.libro .pp{margin-top:auto;padding-top:6px;font-family:var(--mono);font-size:.7rem;
letter-spacing:.03em;color:var(--faint);line-height:1.4}
@supports(grid-template-rows:subgrid){
/* El 1fr de arriba estaba para que todas las tarjetas de una fila midieran lo mismo.
Con subgrid sobra —las cuatro filas las comparten ya— y encima estorba: reparte la
altura a partes iguales entre portada, título, autor y premios, y deja la estantería
llena de huecos. Se vio publicado el 14-08-2026. */
.estanteria{grid-auto-rows:auto}
/* El subgrid solo funciona si quien lo pide es HIJO DIRECTO de la rejilla. Al añadir los
favoritos (57c4547) metí `.libro-w` en medio para que el corazón quedara fuera del <a>, y
`.libro` dejó de ser el elemento de la rejilla sin que nadie lo dijera: sus cuatro filas
se quedaron sin repartir, la ficha se acható a 150 px y la portada (262) se derramó sobre
el título. Las 64 fichas del listado se solapaban. Lo vio Bea publicado el 25-08-2026.
Ahora el que hereda las filas es el envoltorio, y `.libro` las vuelve a heredar de él: dos
subgrids encadenados, que es lo que hay que hacer cuando se interpone una caja. */
.estanteria .libro-w{display:grid;grid-template-rows:subgrid;grid-row:span 4}
.estanteria .libro{display:grid;grid-template-rows:subgrid;grid-row:span 4;row-gap:0}
.estanteria .libro .pp{margin-top:0}}
@media(max-width:820px){.mesa{grid-template-columns:1fr}}
/* móvil: la mesa se recompone a 1 columna, pero la portada mide LO MISMO que una del
   estante (2 columnas con 18px de calle) — un libro se elige por la cubierta */
@media(max-width:560px){.mesa .mrow{grid-template-columns:1fr;gap:12px}
.mesa .cover{max-width:calc((100% - 18px) / 2)}
.estanteria{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px}}
.wrap{max-width:1340px;margin:0 auto;padding:0 44px}   /* igual que la home (índice) */
.masthead{padding-top:32px}
.strip{display:flex;flex-wrap:wrap;gap:4px 12px;justify-content:space-between;align-items:center;
font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);
border-bottom:1px solid rgba(26,23,20,.2);padding-bottom:11px}
.strip a{text-decoration:none}
.strip .navlink{color:var(--faint)}
.strip .navlink.on{color:var(--ink)}
.strip .navsep{margin:0 8px;color:var(--faint2)}
.strip .navsep.gap{margin:0 14px}
.strip .nav{display:inline-flex;align-items:center;flex-wrap:wrap}
.strip .langsel{display:inline-flex;align-items:center;padding-left:18px;
border-left:1px solid rgba(26,23,20,.25)}
/* 24×24 los dos, que es lo que pide la WCAG 2.5.8. No ensancha la tira: el corazón ya
   mide 25 px y manda sobre la altura de la fila. Las letras no se mueven, porque siguen
   centradas en una caja que crece por igual arriba y abajo. */
/* El 404: lista con filete, sin pastillas. */
.p404{list-style:none;padding:0;margin:18px 0 0;max-width:640px}
.p404 li{padding:11px 0;border-top:1px solid rgba(26,23,20,.14);font-size:15px}
.p404 li a{font-weight:600;color:var(--ink);text-decoration:none;
border-bottom:1px solid rgba(26,23,20,.3)}
.p404 li a:hover{color:var(--red);border-color:var(--red)}
.sep404{border:0;border-top:1px solid rgba(26,23,20,.14);margin:30px 0 18px;max-width:640px}
.strip .langsel .navlink{padding:0 2px;letter-spacing:.1em;
display:inline-flex;align-items:center;justify-content:center;min-width:24px;min-height:24px}
/* El corazón del menú: al tamaño del de las convocatorias (17 px), no al de la tira.
   Es una sección más, y una sección que se ve. */
.strip .favmenu{display:inline-flex;align-items:center;gap:5px;font-size:17px;
line-height:1;padding:4px 2px;color:var(--faint)}
/* El corazón lleva su tipografía DICHA, no heredada de --mono. El símbolo ♥ (U+2665) no
   existe en Courier Prime, así que el navegador cae al siguiente tipo de la lista — y esa
   lista no era la misma en todas partes: el álbum y la mesa redefinen `:root` con
   «ui-monospace» donde el resto pone «Courier New». Dos listas distintas, dos corazones
   distintos. Bea lo vio a ojo el 20-08-2026 y yo lo había descartado como redondeo de un
   píxel; medido, el glifo pasa de 16 px a 15 y cambia de forma.
   El número sigue en --mono: las cifras SÍ están en Courier Prime y salen iguales. */
.strip .favmenu{font-family:"Courier Prime","Courier New",monospace}
.strip .favmenu:hover{color:var(--red)}
.strip .favmenu .favn{font-family:var(--mono);font-size:11px;letter-spacing:.06em}
/* El menú móvil, tercera iteración (Bea, 18-08-2026): ni la tira de periódico —se
   partía en tres líneas con un «|» huérfano— ni los chips con caja, que «no molan»:
   «usar el recurso de las cajas no es la opción». UNA sola línea de cabecera: cada
   sección parte su nombre en dos líneas (width:min-content), filete fino entre
   secciones, la actual en tinta y negrita, ES·CA a la derecha. En escritorio la tira
   sigue siendo tira. Este bloque vive DUPLICADO en index.html y en BRAND_CSS a
   propósito —los dos mundos no comparten fichero— y un test los compara byte a byte
   para que no se separen. */
@media(max-width:759px){
/* el mismo aire por arriba en TODAS las páginas: la home dejaba 32 px sobre el menú
   y las generadas cero, y al navegar el menú «se subía» de un salto. Con `body`
   delante para ganar a la regla base del masthead, que en las generadas viene
   después en la hoja y a igual peso ganaría ella. */
body .masthead{padding-top:18px}
.strip{gap:8px 14px;padding:0 0 12px;align-items:flex-start}
.strip .navsep{display:none}
.strip .nav,.strip .stripright{display:contents}
.strip .navlink{background:none;border:0;padding:0;width:min-content;
white-space:normal;text-align:left;color:var(--faint);
font-size:10.5px;letter-spacing:.08em;line-height:1.5}
.strip .navlink:not(:first-child){border-left:1px solid rgba(26,23,20,.22);
padding-left:14px}
.strip .navlink.on{color:var(--ink);font-weight:700}
.strip .stripright,.strip .langsel{margin-left:auto}
.strip .langsel{border-left:0;padding-left:0;gap:8px;align-self:flex-start;margin-top:2px}
.strip .langsel .navlink{width:auto;white-space:nowrap;border-left:0;padding-left:0}
.strip .navlink.favmenu{width:auto;white-space:nowrap;font-size:17px;line-height:1;
letter-spacing:0;align-self:center;padding:4px 0}
/* En móvil, el corazón sin su número: el símbolo es la señal y el recuento es una
   comodidad de escritorio. Medido a 375 px — con el número, la cuarta sección empuja
   ES·CA a una segunda línea y la tira pasa de 45 px a 70. El aire entre secciones baja
   de 14 a 10 por lo mismo. */
.strip .favmenu .favn{display:none}
/* 24 px de ancho mínimo: sin él el corazón se queda en 11 y deja de ser pulsable —el
   mismo listón que acabo de aplicarle a las pestañas—. El aire entre secciones baja a
   8 y el interletrado a .06em para que los cuatro y ES·CA sigan cabiendo en UNA línea:
   con 14 de aire, la tira pasaba de 45 px a 70. */
.strip .favmenu{min-width:24px;justify-content:center}
.strip{column-gap:8px}
.strip .navlink{letter-spacing:.06em}
}
.titlerow{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:10px;
padding:18px 0 16px;border-bottom:3px double rgba(26,23,20,.55)}
.wordmark{font-family:var(--caslon);font-weight:400;font-size:60px;line-height:.9;margin:0;letter-spacing:-.01em}
.wordmark a{text-decoration:none}
.wordmark .dot{color:var(--red)}
.tagline{font-family:var(--news);font-style:italic;font-size:17px;color:var(--muted);margin:0 0 6px;text-align:right;max-width:40ch}
.subnav{display:flex;flex-wrap:wrap;gap:8px;padding:16px 0;border-bottom:1px solid rgba(26,23,20,.16)}
.subnav a{font-family:var(--mono);font-size:12px;letter-spacing:.04em;text-decoration:none;color:var(--muted);
border:1px solid rgba(26,23,20,.3);padding:6px 12px;white-space:nowrap}
.subnav a.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.subnav a .n{opacity:.5;font-size:11px}
.phead{font-family:var(--caslon);font-weight:400;font-size:33px;line-height:1.1;margin:26px 0 0}
.sh{font-family:var(--caslon);font-weight:400;font-size:21px;margin:30px 0 6px}
.plist{font-family:var(--news);font-size:16px;color:var(--muted);max-width:66ch;line-height:1.75;padding-left:20px}
.plist a{color:var(--ink)}
code{font-family:var(--mono);font-size:13px}
.intro{font-family:var(--news);font-size:18px;color:var(--muted);max-width:66ch;padding:22px 0 4px;line-height:1.55}
.count{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);
padding:10px 0 0;border-bottom:1px solid rgba(26,23,20,.16)}
.list{padding:0 0 8px}
.lcard{padding:22px 0 20px;border-bottom:1px solid rgba(26,23,20,.16)}
.lk{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.lk .kk{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--red)}
.bdg{font-family:var(--mono);font-size:11px;letter-spacing:.05em;padding:3px 9px;white-space:nowrap;border:1px solid rgba(26,23,20,.32)}
.bdg.urgent{color:#fff;background:var(--red);border-color:var(--red)}
.lt{font-family:var(--caslon);font-weight:400;font-size:23px;line-height:1.15;margin:0}
.lm{font-family:var(--news);font-size:15px;color:var(--muted);margin:7px 0 11px}
.src{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--ink);text-decoration:none;
border-bottom:1px solid rgba(26,23,20,.35);padding-bottom:1px}
.src:hover{color:var(--red);border-bottom-color:var(--red)}
.lalso{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--faint);margin-top:7px}
.bridge{display:inline-block;margin:26px 0 0;font-family:var(--mono);font-size:13px;letter-spacing:.04em;
text-decoration:none;color:var(--ink);border:1px solid rgba(26,23,20,.4);padding:10px 18px}
.bridge:hover{border-color:var(--red);color:var(--red)}
.sig{padding:24px 0 44px;border-top:1px solid rgba(26,23,20,.16);font-family:var(--news);font-style:italic;
font-size:14px;color:var(--faint);text-align:center;margin-top:8px;line-height:1.6}
.sig a{color:var(--ink);font-style:normal;text-decoration:none;border-bottom:1px solid rgba(26,23,20,.3)}
.sig a:hover{color:var(--red)}
.sig .heart{color:var(--red);font-style:normal}
@media(max-width:820px){.wrap{padding:0 16px}.wordmark{font-size:40px}.tagline{text-align:left}}