/* Silviopedia Web — hoja de estilo.
   Maqueta del autor: #contenedor > #cabecera, #menu, #contenido (#contenidoprincipal + #lateral), #pie.
   Aspecto tomado de «Gestión de skills frente a la demanda» (1 de noviembre de 2026): fondo azul
   noche, marcos con brillo cian, azul y lavanda. La cuadrícula del fondo se quitó el 2 de noviembre de 2026,
   a petición del autor, en los dos temas. La tipografía es la del libro:
   Georgia para el texto y Garamond para títulos y capitulares. */

:root {
  color-scheme: dark;
  --fondo: #030913;
  --superficie: #071328;
  --superficie-2: #0B1B36;
  --velo: rgba(7, 19, 40, .6);
  --texto: #E6F1FF;
  --texto-2: #9DB6D8;
  --texto-3: #6F88AD;
  --cian: #19E3FF;
  --azul: #3D8BFF;
  --lavanda: #8FA6FF;
  --graf-1: #3D8BFF;   /* los tres colores de los gráficos (graficos.py), validados para el fondo oscuro */
  --graf-2: #259478;
  --graf-3: #8E66E6;
  --graf-4: #D95926;   /* el cuarto (7 de noviembre de 2026), validado con los otros tres */
  --linea: #3FB6FF;
  --marco: rgba(63, 182, 255, .32);
  --marco-suave: rgba(63, 182, 255, .16);
  --brillo: 0 0 10px rgba(25, 227, 255, .5);
  --garamond: "EB Garamond", Garamond, "Adobe Garamond Pro", Georgia, serif;
  --georgia: Georgia, "Times New Roman", serif;
  --menu: "Alegreya Sans SC", "Gill Sans", "Trebuchet MS", sans-serif;   /* los dos menús de inicio (7 nov 2026) */
  --alto-cabecera: 8.5rem;
  --ancho-menu: 15.5rem;
  --ancho-lateral: 19rem;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; } }
:root[data-theme="dark"] { color-scheme: dark; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--alto-cabecera) + 1.5rem); scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font: 1.0625rem/1.7 var(--georgia);
  -webkit-text-size-adjust: 100%;
  scrollbar-color: var(--marco) transparent;
}
::selection { background: rgba(25, 227, 255, .25); }
a { color: var(--cian); }
img { max-width: 100%; height: auto; }
kbd {
  font: .8em var(--georgia);
  padding: .05em .4em;
  border: 1px solid var(--marco);
  border-radius: 4px;
  color: var(--cian);
}

.saltar { position: absolute; left: -999px; }
.saltar:focus { left: 1rem; top: .5rem; z-index: 50; background: var(--superficie); padding: .4rem .8rem; }

/* La raya con brillo de la referencia (su «.rule»). */
.raya {
  height: 1px;
  border: 0;
  margin: 1.4rem 0 1.6rem;
  background: linear-gradient(90deg, var(--linea), transparent);
  box-shadow: 0 0 10px var(--linea);
}

/* ------------------------------------------------------------ la maqueta */
#contenedor {
  display: grid;
  grid-template-columns: var(--ancho-menu) minmax(0, 1fr);
  grid-template-areas:
    "cabecera cabecera"
    "menu contenido"
    "pie pie";
  column-gap: 2.5rem;
  max-width: 92rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}

#cabecera {
  grid-area: cabecera;
  position: sticky;
  top: 0;
  z-index: 20;
  padding-top: .9rem;
  background: rgba(3, 9, 19, .9);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
#cabecera::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--linea), rgba(63, 182, 255, .15) 70%, transparent);
  box-shadow: 0 0 10px var(--linea);
}
.cabecera-fila { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.titulo {
  margin-right: auto;
  font-family: var(--garamond);
  font-size: 1.7rem;
  font-weight: 600;
  font-variant: small-caps;
  letter-spacing: .02em;
  line-height: 1.1;
  color: var(--texto);
  text-decoration: none;
  text-shadow: 0 0 18px rgba(25, 227, 255, .35);
}
.titulo { display: inline-flex; align-items: center; gap: .75rem; }
/* El logo del autor (2 de noviembre de 2026), limpio de su fondo por web/limpiar_logo.py */
.titulo .logo {
  height: 3.6rem;
  width: auto;
  flex: none;
  filter: drop-shadow(0 0 10px rgba(25, 227, 255, .22));
}
.titulo .nombre span { font-style: italic; font-variant: normal; font-weight: 500; color: var(--cian); }
.secciones { display: flex; gap: 1.2rem; font-size: .9rem; }
.secciones a { color: var(--texto-2); text-decoration: none; }
.secciones a:hover, .secciones a:focus-visible { color: var(--cian); }

.buscador { position: relative; width: 18rem; margin: 0; }
.buscador input, .busqueda-grande input, .filtro {
  width: 100%;
  font: inherit;
  color: var(--texto);
  background: var(--velo);
  border: 1px solid var(--marco);
  border-radius: 10px;
}
.buscador input { font-size: .9rem; padding: .45rem .8rem; }
.buscador input:focus, .busqueda-grande input:focus, .filtro:focus {
  outline: none;
  border-color: var(--cian);
  box-shadow: var(--brillo);
}
::placeholder { color: var(--texto-3); }
#resultados {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  width: max(100%, 26rem);
  max-height: 70vh;
  overflow: auto;
  margin: 0;
  padding: .35rem 0;
  list-style: none;
  background: var(--superficie);
  border: 1px solid var(--marco);
  border-radius: 12px;
  box-shadow: 0 0 30px rgba(25, 227, 255, .08) inset, 0 12px 40px rgba(0, 0, 0, .6);
}
#resultados a {
  display: block;
  padding: .4rem .9rem;
  color: var(--texto);
  text-decoration: none;
  font-size: .9rem;
  line-height: 1.35;
}
#resultados small { display: block; color: var(--texto-3); font-size: .75rem; }
#resultados .frag { display: block; color: var(--texto-2); font-size: .78rem; margin-top: .15rem; }
#resultados .elegido a, #resultados a:hover { background: var(--superficie-2); }
#resultados .elegido a { box-shadow: inset 2px 0 0 var(--cian); }
#resultados .remision a { color: var(--texto-2); font-style: italic; }
#resultados .grupo {
  padding: .5rem .9rem .2rem;
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--texto-3);
}
#resultados .todo a { color: var(--cian); border-top: 1px solid var(--marco-suave); margin-top: .3rem; }
#resultados .nada { padding: .45rem .9rem; color: var(--texto-3); font-size: .85rem; }

.abecedario {
  display: flex;
  gap: .2rem;
  padding: .6rem 0 .7rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.abecedario::-webkit-scrollbar { display: none; }
.abecedario a, .abecedario span {
  flex: 1 0 1.9rem;
  text-align: center;
  font-family: var(--garamond);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 2rem;
  color: var(--texto-2);
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 6px;
  transition: background-color .2s, color .2s;
}
.abecedario a:hover, .abecedario a:focus-visible {
  color: var(--texto);
  background: var(--superficie-2);
  border-color: var(--marco);
  outline: none;
}
.abecedario a[aria-current] {
  color: var(--cian);
  background: var(--superficie);
  border-color: var(--cian);
  box-shadow: var(--brillo);
  text-shadow: 0 0 8px rgba(25, 227, 255, .6);
}
.abecedario .vacia { color: var(--texto-3); opacity: .35; cursor: default; }

#menu {
  grid-area: menu;
  position: sticky;
  top: calc(var(--alto-cabecera) + 1.25rem);
  align-self: start;
  max-height: calc(100vh - var(--alto-cabecera) - 2.5rem);
  overflow: auto;
  margin-top: 1.25rem;
  font-size: .875rem;
  scrollbar-width: thin;
}
.plegable > summary {
  list-style: none;
  cursor: default;
  padding-bottom: .55rem;
  margin-bottom: .7rem;
  border-bottom: 1px solid var(--marco);
  font-family: var(--garamond);
  font-size: 1.2rem;
  font-weight: 600;
  font-variant: small-caps;
  letter-spacing: .04em;
  color: var(--texto);
}
.plegable > summary::-webkit-details-marker { display: none; }
.menu-letra {
  font-size: 1.7rem;
  margin-right: .3rem;
  color: var(--cian);
  text-decoration: none;
  text-shadow: 0 0 12px rgba(25, 227, 255, .55);
}
.menu-cuenta { color: var(--texto-3); font-size: .95rem; font-weight: 400; }
.filtro { font-size: .82rem; padding: .35rem .65rem; margin-bottom: .7rem; }
.lista-lemas, .lista-anexos { list-style: none; margin: 0; padding: 0; }
.lista-lemas a, .lista-anexos a {
  display: block;
  padding: .2rem .55rem;
  border-left: 2px solid transparent;
  color: var(--texto-2);
  text-decoration: none;
  line-height: 1.3;
}
.lista-lemas a { font-size: .78rem; letter-spacing: .02em; }
.lista-lemas .remision a { color: var(--texto-3); font-style: italic; }
.lista-lemas a:hover, .lista-anexos a:hover { color: var(--texto); }
.lista-lemas a.activo, .lista-lemas a[aria-current], .lista-anexos a.activo, .lista-anexos a[aria-current] {
  color: var(--cian);
  border-left-color: var(--cian);
  background: rgba(25, 227, 255, .06);
  box-shadow: inset 1px 0 8px -4px var(--cian);
}
/* Al llegar a una entrada, la palabra activa late tres veces en la lista, para que el ojo la encuentre
   (3 de noviembre de 2026, a petición del autor, al abrir cada letra en su primera entrada). */
@keyframes latido {
  0%, 100% { box-shadow: inset 1px 0 8px -4px var(--cian); background: rgba(25, 227, 255, .06); }
  50% { box-shadow: inset 1px 0 8px -4px var(--cian), 0 0 0 1px var(--cian), 0 0 14px var(--cian); background: rgba(25, 227, 255, .24); }
}
.lista-lemas a[aria-current] { animation: latido .9s ease-in-out .3s 3; }
@media (prefers-reduced-motion: reduce) { .lista-lemas a[aria-current] { animation: none; } }
.lista-anexos ol { list-style: none; padding: 0 0 .4rem .75rem; margin: 0; font-size: .82rem; }
.lista-anexos > li > a { font-weight: 700; color: var(--texto); }
.lista-anexos ol a { font-weight: 400; color: var(--texto-2); }
/* La flecha que pliega los apartados del anexo abierto (5 de noviembre de 2026, a petición del autor). */
.lista-anexos > li.con-sub { position: relative; }
.lista-anexos > li.con-sub > a { padding-right: 1.9rem; }
.plegar {
  position: absolute; top: .05rem; right: 0;
  width: 1.6rem; height: 1.6rem; padding: 0;
  display: grid; place-items: center;
  background: none; border: 0; border-radius: 4px;
  color: var(--texto-2); cursor: pointer;
}
.plegar:hover { color: var(--cian); background: rgba(25, 227, 255, .08); }
.plegar:focus-visible { outline: 2px solid var(--cian); outline-offset: 1px; }
.plegar svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; }
.lista-anexos > li.cerrado > .plegar svg { transform: rotate(-90deg); }
.lista-anexos > li.cerrado > ol { display: none; }
@media (prefers-reduced-motion: reduce) { .plegar svg { transition: none; } }
.ayuda { color: var(--texto-2); font-size: .85rem; }
.ayuda p { margin: 0 0 .7rem; }

#contenido {
  grid-area: contenido;
  display: grid;
  grid-template-columns: minmax(0, 46rem) var(--ancho-lateral);
  column-gap: 3rem;
  align-items: start;
  min-width: 0;
}
.pagina-letra #contenido, .pagina-anexos #contenido, .pagina-buscar #contenido, .pagina-canciones #contenido { grid-template-columns: minmax(0, 1fr); }
#contenidoprincipal { min-width: 0; padding: 1.4rem 0 3.5rem; }

#lateral {
  position: sticky;
  top: calc(var(--alto-cabecera) + 1.25rem);
  max-height: calc(100vh - var(--alto-cabecera) - 2.5rem);
  overflow: auto;
  margin-top: 1.4rem;
  scrollbar-width: thin;
}
#lateral:empty { display: none; }
/* La foto de Silvio en transparencia, al fondo del panel de notas (el autor, 2 de noviembre de 2026). El panel
   ocupa todo el alto disponible y no se desplaza: lo hace la capa de las notas (.desplazable), que va encima.
   Con pocas notas la foto se ve casi entera; con muchas, el recuadro la cubre. Arriba se funde con el fondo. */
#lateral.con-foto { height: calc(100vh - var(--alto-cabecera) - 2.5rem); overflow: hidden; display: flex; flex-direction: column; }
/* Desde el 7 de noviembre de 2026 la foto va justo debajo de la caja de las referencias, no al fondo de la columna
   (el autor: «no más de 1,5 cm debajo de la caja»): es el segundo elemento de la columna, se funde arriba en los
   primeros 1,3 cm y, cuando las referencias ocupan todo el alto, se encoge hasta desaparecer. */
#lateral.con-foto::before {
  content: "";
  order: 2;
  flex: 0 1 auto;
  min-height: 0;
  width: 100%;
  aspect-ratio: 640 / 936;
  background: url("foto-lateral.jpg") center top / 100% auto no-repeat;
  opacity: .3;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 1.3cm, #000 84%, transparent 100%),
                      linear-gradient(to right, transparent 0%, #000 14%, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to bottom, transparent 0, #000 1.3cm, #000 84%, transparent 100%),
                      linear-gradient(to right, transparent 0%, #000 14%, #000 86%, transparent 100%);
          mask-composite: intersect;
  pointer-events: none;
}
#lateral.con-foto .desplazable { position: relative; z-index: 1; flex: 0 0 auto; max-height: 100%; min-height: 0; overflow: auto; scrollbar-width: thin; }
/* La misma foto difuminada, otra distinta, debajo de la lista de una letra con 10 entradas o menos. */
.foto-menu {
  width: 100%;
  margin-top: .3rem;
  background: center top / 100% auto no-repeat;
  opacity: .3;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 1.3cm, #000 84%, transparent 100%),
                      linear-gradient(to right, transparent 0%, #000 14%, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to bottom, transparent 0, #000 1.3cm, #000 84%, transparent 100%),
                      linear-gradient(to right, transparent 0%, #000 14%, #000 86%, transparent 100%);
          mask-composite: intersect;
  pointer-events: none;
}
:root[data-theme="light"] .foto-menu { opacity: .5; mix-blend-mode: multiply; }
/* En el modo claro la foto pierde fuerza sobre el fondo blanco: va más opaca (el autor, 2 de noviembre de 2026). */
:root[data-theme="light"] #lateral.con-foto::before { opacity: .5; mix-blend-mode: multiply; }

#pie {
  grid-area: pie;
  margin-top: 2rem;
  padding: 1.4rem 0 2.5rem;
  border-top: 1px solid var(--marco);
  text-align: center;
  color: var(--texto-3);
  font-size: .82rem;
}
#pie p { margin: .2rem 0; }

/* ------------------------------------------------------------ títulos */
.capitular, .titulo-anexo, .portada h1 {
  font-family: var(--garamond);
  color: var(--texto);
  text-shadow: 0 0 18px rgba(25, 227, 255, .35);
  margin: 0;
}
.capitular { font-size: 5.5rem; font-weight: 600; line-height: 1; text-align: center; color: var(--cian); }
.recuento {
  text-align: center;
  color: var(--texto-3);
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin: .5rem 0 0;
}
.miga { font-size: .8rem; color: var(--texto-3); letter-spacing: .04em; margin-bottom: .6rem; }
.miga a { color: var(--cian); text-decoration: none; }
.miga a:hover { text-decoration: underline; }
/* En la página de una entrada el lema es el título y la definición empieza debajo, como en
   un blog (el autor, 2 de noviembre de 2026; en el libro sigue en línea). Los datos que el
   libro pone entre paréntesis detrás del lema van en una línea propia, sin paréntesis. */
.titulo-entrada {
  font-family: var(--garamond);
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  font-weight: 600;
  font-variant: small-caps;
  letter-spacing: .03em;
  line-height: 1.15;
  color: var(--texto);
  text-shadow: 0 0 18px rgba(25, 227, 255, .35);
  margin: 0;
  overflow-wrap: anywhere;
}
.datos-lema { color: var(--texto-2); font-size: 1.05rem; margin: .5rem 0 0; }
/* «Compartir» (9 de noviembre de 2026): debajo del lema, discreto, con la misma línea que el botón del sol. */
.acciones-entrada { margin: .7rem 0 0; }
.compartir {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .3rem .8rem .3rem .6rem;
  font: inherit;
  font-size: .82rem;
  letter-spacing: .03em;
  color: var(--texto-2);
  background: transparent;
  border: 1px solid var(--marco);
  border-radius: 999px;
  cursor: pointer;
}
.compartir:hover, .compartir:focus-visible, .compartir.hecho { color: var(--cian); border-color: var(--cian); box-shadow: var(--brillo); outline: none; }
.compartir svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* Comentarios de cada entrada (9 de noviembre de 2026): solo en silviopedia.reijavo.me (silviopedia.js, 10). */
.comentarios { margin: 2.2rem 0 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--marco); }
.comentarios[hidden], .sin-comentarios[hidden] { display: none; }
.comentarios h2 { font: 1.35rem/1.3 var(--garamond); font-variant: small-caps; letter-spacing: .04em; margin: 0 0 .8rem; }
.comentarios h3 { font: 1.1rem/1.3 var(--garamond); margin: 0 0 .3rem; }
.lista-comentarios { list-style: none; margin: 0 0 1.4rem; padding: 0; }
.lista-comentarios li { background: var(--superficie); border: 1px solid var(--marco-suave); border-radius: 10px; padding: .7rem 1rem; margin: 0 0 .7rem; }
.autor-comentario { margin: 0; font-size: .85rem; color: var(--texto-2); }
.autor-comentario strong { color: var(--texto); font-weight: bold; }
.texto-comentario { margin: .35rem 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.sin-comentarios, .nota-comentarios { color: var(--texto-2); font-size: .9rem; }
.nota-comentarios { margin: 0 0 .8rem; }
.form-comentario label { display: block; font-size: .85rem; color: var(--texto-2); margin: 0 0 .7rem; }
.campos-comentario { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0 1rem; }
.form-comentario input, .form-comentario textarea {
  display: block; width: 100%; box-sizing: border-box; margin-top: .25rem;
  font: 1rem/1.5 var(--georgia); color: var(--texto); background: var(--superficie);
  border: 1px solid var(--marco); border-radius: 8px; padding: .5rem .75rem;
}
.form-comentario textarea { resize: vertical; min-height: 7rem; }
.form-comentario input:focus, .form-comentario textarea:focus { outline: none; border-color: var(--cian); box-shadow: var(--brillo); }
.form-comentario .trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.enviar-comentario { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin: 0; }
.enviar-comentario button {
  font: .95rem var(--georgia); color: var(--texto); background: transparent; cursor: pointer;
  border: 1px solid var(--marco); border-radius: 999px; padding: .4rem 1.2rem;
}
.enviar-comentario button:hover, .enviar-comentario button:focus-visible { color: var(--cian); border-color: var(--cian); box-shadow: var(--brillo); outline: none; }
.enviar-comentario button:disabled { opacity: .5; cursor: wait; }
.aviso-comentario { font-size: .9rem; color: var(--texto-2); }
/* Buscador de ANÁLISIS DE CANCIONES (9 de noviembre de 2026): el cuadro, la cuenta y la lista de canciones. */
.buscar-analisis { margin: 0 0 1.4rem; }
.buscar-analisis .filtro { font-size: 1rem; padding: .6rem .9rem; margin: 0; }
.cuenta-analisis { margin: .5rem 0 0; color: var(--texto-3); font-size: .85rem; }
.lista-hallazgos { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem .5rem; margin: .6rem 0 0; padding: 0; }
.lista-hallazgos a { display: inline-block; padding: .15rem .6rem; font-size: .8rem; letter-spacing: .02em; color: var(--texto-2);
  text-decoration: none; border: 1px solid var(--marco); border-radius: 999px; }
.lista-hallazgos a:hover, .lista-hallazgos a:focus-visible { color: var(--cian); border-color: var(--cian); outline: none; }
.lista-hallazgos small { color: var(--texto-3); font-size: .72rem; }
section.apartado[hidden] { display: none; }
/* Si un lema no se pudo separar sigue en línea, y el h1 solo lo leen los lectores de pantalla. */
.oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.titulo-anexo {
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  font-weight: 600;
  font-variant: small-caps;
  letter-spacing: .03em;
  line-height: 1.15;
}
.entradilla { color: var(--texto-2); font-size: 1.1rem; margin: .8rem 0 0; }

/* ------------------------------------------------------------ el texto */
.entrada { padding: 0 0 1rem; }
.apartado { padding: .4rem 0 1.4rem; border-bottom: 1px solid var(--marco-suave); }
.apartado:last-child { border-bottom: 0; }
.entrada p { margin: 0 0 .9rem; text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
.lema { font-weight: 700; letter-spacing: .03em; color: var(--texto); }
strong { color: var(--texto); }

/* La cita: el bloque con filete lateral de la referencia (su «.inputs div»). */
.cita {
  margin: 1.1rem 0 !important;
  padding: .8rem 1.1rem;
  font-size: .97em;
  color: var(--texto);
  background: var(--velo);
  border: 1px solid var(--marco-suave);
  border-left: 3px solid var(--lavanda);
  border-radius: 0 12px 12px 0;
}
.cita em { color: var(--texto); }
.cita strong { color: var(--lavanda); }
.cita strong em { color: var(--cian); text-shadow: 0 0 8px rgba(25, 227, 255, .45); }
.cita.verso { text-align: left !important; }
/* El título de la canción, en una línea aparte y solo (el autor, 2 de noviembre de 2026): sin esto se partía
   detrás del último verso («(Mi casa ha sido to- / mada por las flores)»). */
.cita .titulo-cita { display: block; margin-top: .3rem; text-align: left; hyphens: none; -webkit-hyphens: none; }
.centro { text-align: center !important; }
.frances { padding-left: 1.6em; text-indent: -1.6em; }
.pie { text-align: center !important; font-size: .85rem; color: var(--texto-3); }
.versalita { font-variant: small-caps; letter-spacing: .03em; }
.tab { display: inline-block; width: 1.5em; }

a.remision {
  color: var(--cian);
  text-decoration: none;
  border-bottom: 1px dotted rgba(25, 227, 255, .45);
  transition: text-shadow .2s, border-color .2s;
}
a.remision:hover, a.remision:focus-visible {
  border-bottom: 1px solid var(--cian);
  text-shadow: 0 0 8px rgba(25, 227, 255, .6);
  outline: none;
}
a.externo { color: var(--azul); overflow-wrap: anywhere; }
/* Las palabras de un verso que son lema enlazan a su entrada (el autor, 2 de noviembre de 2026): discretas, en el
   color del verso y con un punteado debajo, para no llenar la cita de azul; al pasar el ratón se encienden. */
/* Lo que alguien dijo, casi siempre Silvio, va en cursiva y en lavanda, sin negrita (el autor, 2 de noviembre de
   2026); un título en cursiva dentro del dicho vuelve a la redonda. */
.dicho { font-style: italic; color: var(--lavanda); }
.dicho em { font-style: normal; }
.cita a.lema-cita { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--texto-3); }
.cita a.lema-cita:hover, .cita a.lema-cita:focus-visible {
  color: var(--cian);
  border-bottom: 1px solid var(--cian);
  outline: none;
}

figure { margin: 1.4rem auto; text-align: center; }
figure img {
  display: inline-block;
  margin: 0 .25rem;
  vertical-align: top;
  border-radius: 8px;
  border: 1px solid var(--marco);
  box-shadow: 0 0 24px rgba(25, 227, 255, .08);
}
figcaption { margin-top: .5rem; font-size: .85rem; color: var(--texto-3); line-height: 1.45; }

.tabla { overflow-x: auto; margin: 1.2rem 0; border: 1px solid var(--marco); border-radius: 12px; }
.tabla table { border-collapse: collapse; width: 100%; }
.tabla td { vertical-align: top; padding: .8rem 1rem; border-bottom: 1px solid var(--marco-suave); }
.tabla tr:last-child td { border-bottom: 0; }
.tabla td p { text-align: left; }
.tabla .cita { background: transparent; }

.apartado h2 {
  font-family: var(--garamond);
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.2;
  margin: 1.2rem 0 .8rem;
  color: var(--texto);
}
.apartado h3 { font-family: var(--garamond); font-size: 1.3rem; font-weight: 600; color: var(--cian); margin: 1.6rem 0 .5rem; }
.apartado h4 { font-size: 1rem; color: var(--lavanda); margin: 1.2rem 0 .4rem; }

.sigla { display: grid; grid-template-columns: 5.5rem 1fr; gap: .8rem; margin: 0 0 .45rem !important; text-align: left !important; }
.sigla .clave { font-weight: 700; letter-spacing: .02em; color: var(--cian); }
.sigla .def { color: var(--texto-2); }

.llamada { font-size: .68em; line-height: 0; margin-left: .05em; }
.llamada a { color: var(--cian); text-decoration: none; padding: 0 .12em; }
.llamada a:hover { text-shadow: 0 0 8px rgba(25, 227, 255, .7); }

/* El fragmento cantado de una cita, recortado del disco: va pegado debajo de la cita. */
.cita:has(+ .escucha) { margin-bottom: 0 !important; border-bottom-right-radius: 0; }
.escucha {
  margin: 0 0 1.2rem;
  padding: .55rem .9rem .5rem;
  background: rgba(143, 166, 255, .05);
  border: 1px solid var(--marco-suave);
  border-left: 3px solid var(--lavanda);
  border-top: 0;
  border-radius: 0 0 12px 0;
}
.escucha audio { width: 100%; height: 2rem; }
.escucha figcaption { margin: .35rem 0 0; font-size: .78rem; color: var(--texto-3); text-align: left; }
.escucha-ui { display: flex; align-items: center; gap: .8rem; }
.escucha-boton {
  flex: none;
  width: 2.2rem;
  height: 2.2rem;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: .8rem;
  line-height: 1;
}
.escucha-barra {
  flex: 1;
  position: relative;
  height: 6px;
  border-radius: 3px;
  background: var(--marco-suave);
  cursor: pointer;
}
.escucha-barra:focus-visible { outline: 2px solid var(--cian); outline-offset: 4px; }
.escucha-relleno {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: 3px;
  background: var(--cian);
  box-shadow: 0 0 8px rgba(25, 227, 255, .6);
}
.escucha-tiempo { flex: none; font-size: .78rem; color: var(--texto-2); font-variant-numeric: tabular-nums; }
.escucha.sonando { border-left-color: var(--cian); box-shadow: -4px 0 14px -8px var(--cian); }
/* La canción completa (vídeo del canal de Silvio), en el mismo marco que el fragmento. */
.video .video-portada, .video .video-marco {
  position: relative;
  display: block;
  width: 100%;
  max-width: 34rem;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 8px;
  overflow: hidden;
  background: #000;
}
.video .video-portada img { width: 100%; height: 100%; object-fit: cover; opacity: .82; transition: opacity .2s; }
.video .video-portada:hover img, .video .video-portada:focus-visible img { opacity: 1; }
.video .video-portada:focus-visible { outline: 2px solid var(--cian); outline-offset: 3px; }
.video-boton {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 3.4rem;
  height: 3.4rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(3, 9, 19, .72);
  border: 1px solid var(--cian);
  color: var(--cian);
  font-size: 1.2rem;
  box-shadow: var(--brillo);
}
.video-duracion {
  position: absolute;
  right: .5rem;
  bottom: .5rem;
  padding: .05rem .4rem;
  border-radius: 4px;
  background: rgba(3, 9, 19, .8);
  color: var(--texto);
  font-size: .75rem;
  font-variant-numeric: tabular-nums;
}
.video figcaption a { color: var(--texto-2); }

/* Notas: al pie de la entrada (móvil, sin JavaScript) o en el #lateral. */
.notas {
  margin-top: 1.4rem;
  padding: 1rem 1.1rem .4rem;
  border: 1px solid var(--marco);
  border-radius: 12px;
  background: var(--velo);
  font-size: .84rem;
  line-height: 1.5;
  color: var(--texto-2);
}
.notas h2, .panel-notas h2, .panel-azar h2, .rotulo {
  font: 600 .7rem/1.3 var(--georgia);
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--texto-3);
  margin: 0 0 .6rem;
}
.notas ol, .panel-notas ol { list-style: none; margin: 0; padding: 0; }
.notas li, .panel-notas li {
  display: grid;
  grid-template-columns: 2.8em 1fr;
  margin: 0 0 .55rem;
  padding: .2rem .35rem .2rem 0;
  border-radius: 6px;
  transition: background-color .4s;
}
.notas .num, .panel-notas .num { color: var(--cian); text-decoration: none; font-variant-numeric: tabular-nums; }
.notas .cuerpo, .panel-notas .cuerpo { overflow-wrap: anywhere; }
@media (min-width: 72.01rem) {
  .js .entrada > .notas { display: none; }
}

.panel-notas, .panel-azar {
  padding: 1rem 1.1rem;
  border: 1px solid var(--marco);
  border-radius: 14px;
  background: var(--velo);
  box-shadow: 0 0 30px rgba(25, 227, 255, .06) inset;
}
.panel-notas .de {
  font-family: var(--garamond);
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 .8rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--marco-suave);
  color: var(--texto);
}
.panel-notas li { font-size: .82rem; line-height: 1.5; color: var(--texto-2); }
.panel-notas li.resaltada { background: rgba(25, 227, 255, .1); box-shadow: inset 2px 0 0 var(--cian); color: var(--texto); }
.panel-notas .vacio { margin: 0; font-size: .85rem; color: var(--texto-3); font-style: italic; }

.vecinas { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-top: 2rem; }
.vecinas a {
  display: block;
  padding: .7rem 1rem;
  border: 1px solid var(--marco);
  border-radius: 12px;
  background: var(--velo);
  color: var(--texto);
  text-decoration: none;
  font-size: .9rem;
  letter-spacing: .02em;
  transition: border-color .2s, box-shadow .2s;
}
.vecinas a[rel="next"] { text-align: right; }
.vecinas a:hover, .vecinas a:focus-visible { border-color: var(--cian); box-shadow: var(--brillo); outline: none; }
.vecinas small { display: block; color: var(--texto-3); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; }

/* Destello al llegar a un ancla, como en la referencia. */
:target { animation: destello 1.6s ease-out; }
@keyframes destello { 0% { box-shadow: 0 0 0 2px var(--cian), 0 0 24px var(--cian); } 100% { box-shadow: none; } }
@media (prefers-reduced-motion: reduce) { :target { animation: none; } }

/* ------------------------------------------------------------ vista de una letra
   SIN USO desde el 3 de noviembre de 2026: cada letra abre en su primera entrada y `letra/<x>.html` es una
   redirección. Las reglas .fichas quedan por si el autor quiere volver a una vista de conjunto. */
.fichas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: .8rem;
}
.fichas a {
  display: block;
  height: 100%;
  padding: .85rem 1rem .9rem;
  border: 1px solid var(--marco);
  border-radius: 12px;
  background: var(--velo);
  text-decoration: none;
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.fichas a:hover, .fichas a:focus-visible {
  border-color: var(--cian);
  background: var(--superficie-2);
  box-shadow: 0 0 18px rgba(25, 227, 255, .18);
  outline: none;
}
.ficha-lema {
  display: block;
  font-family: var(--garamond);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: .03em;
  line-height: 1.2;
  color: var(--texto);
}
.ficha-texto { display: block; margin-top: .3rem; color: var(--texto-2); font-size: .84rem; line-height: 1.5; }
.fichas .remision a { border-style: dashed; background: transparent; }
.fichas .remision .ficha-lema { color: var(--texto-2); font-style: italic; }
.fichas .remision .ficha-texto { color: var(--cian); }

/* ------------------------------------------------------------ anexos */
.tarjetas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: .9rem;
}
.tarjetas a {
  display: block;
  height: 100%;
  padding: .9rem 1.1rem 1rem;
  border: 1px solid var(--marco);
  border-left: 3px solid var(--c, var(--cian));
  background: var(--velo);
  text-decoration: none;
  transition: background-color .2s, box-shadow .2s;
}
.tarjetas li:nth-child(3n+2) a { --c: var(--azul); }
.tarjetas li:nth-child(3n) a { --c: var(--lavanda); }
.tarjetas a:hover, .tarjetas a:focus-visible { background: var(--superficie-2); box-shadow: -4px 0 14px -6px var(--c, var(--cian)); outline: none; }
.tarjetas b { display: block; font-family: var(--garamond); font-size: 1.25rem; font-weight: 600; color: var(--c, var(--cian)); }
.tarjetas span { display: block; margin-top: .35rem; color: var(--texto-2); font-size: .88rem; line-height: 1.55; }
.tarjetas.compactas a { padding: .65rem 1rem; }

/* ------------------------------------------------------------ portada */
/* El banner de la portada: ocupa el texto y la columna lateral. SIN USO desde el 2 de noviembre de 2026: el
   autor quitó el banner y la franja para pensar otra solución; las reglas .banner y .franja quedan por si vuelven. */
.banner {
  grid-column: 1 / -1;
  margin: 1.4rem 0 0;
  border: 1px solid var(--marco);
  border-radius: 14px;
  overflow: hidden;
  line-height: 0;
  background: #000;
  box-shadow: 0 0 30px rgba(25, 227, 255, .12);
}
/* Un 20 % más bajo que la imagen (1584 × 672 → 538), a petición del autor (2 de noviembre de 2026):
   se recorta, no se deforma, y casi todo por abajo, porque arriba están las cabezas. */
.banner img {
  display: block; width: 100%; height: auto; aspect-ratio: 1584 / 538;
  object-fit: cover; object-position: 50% 8%;
  border: 0; border-radius: 0; box-shadow: none; margin: 0;
}
/* La franja: el mismo banner en una tira baja, en todas las páginas menos la portada (el autor,
   2 de noviembre de 2026). Se ven las caras: las cabezas están en la parte de arriba de la imagen. */
.franja { box-shadow: 0 0 22px rgba(25, 227, 255, .10); }
.franja img { aspect-ratio: auto; height: clamp(64px, 8vw, 110px); object-position: 50% 14%; }
.pagina-portada .portada { padding-top: 1.6rem; }
.portada { text-align: center; padding: 2.5rem 0 .5rem; }
.portada h1 {
  font-size: clamp(2.6rem, 6.5vw, 4.2rem);
  font-weight: 600;
  font-variant: small-caps;
  letter-spacing: .02em;
  line-height: 1.02;
}
.portada h1 span { display: block; font-style: italic; font-variant: normal; font-weight: 500; color: var(--cian); }
.subtitulo { font-size: 1.2rem; color: var(--texto-2); margin: 1rem 0 .3rem; }
.autor { font-family: var(--garamond); font-size: 1.25rem; font-variant: small-caps; color: var(--texto-3); margin: 0 0 2rem; }
.epigrafe {
  max-width: 32rem;
  margin: 0 auto;
  padding: 1rem 1.3rem;
  border: 1px solid var(--lavanda);
  border-radius: 12px;
  background: rgba(143, 166, 255, .06);
  box-shadow: 0 0 18px rgba(143, 166, 255, .12);
}
.epigrafe p { font-size: 1.2rem; font-style: italic; margin: 0 0 .3rem; color: var(--texto); }
.epigrafe footer { font-size: .85rem; color: var(--texto-2); }
.rotulo { margin: 2.2rem 0 1rem; }
.teselas { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.3rem, 1fr)); gap: .55rem; }
.teselas a, .teselas .vacia {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: .6rem 0 .5rem;
  border: 1px solid var(--marco);
  border-radius: 10px;
  background: var(--velo);
  text-decoration: none;
  color: var(--texto);
  transition: border-color .2s, box-shadow .2s, color .2s;
}
.teselas a:hover, .teselas a:focus-visible {
  border-color: var(--cian);
  color: var(--cian);
  box-shadow: var(--brillo);
  outline: none;
}
.teselas .l { font-family: var(--garamond); font-size: 2rem; font-weight: 600; line-height: 1; }
.teselas .n { font-size: .72rem; color: var(--texto-3); margin-top: .3rem; }
.teselas .vacia { opacity: .35; background: transparent; }

.panel-azar ol { list-style: none; padding: 0; margin: .4rem 0 1rem; }
.panel-azar li { margin-bottom: .5rem; }
.panel-azar a { color: var(--texto); text-decoration: none; font-size: .88rem; letter-spacing: .02em; }
.panel-azar a:hover { color: var(--cian); }
button, .busqueda-grande button {
  font: inherit;
  font-size: .85rem;
  padding: .4rem 1rem;
  color: var(--cian);
  background: var(--superficie);
  border: 1px solid var(--cian);
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(25, 227, 255, .25);
}
button:hover { background: var(--superficie-2); box-shadow: var(--brillo); }

/* ------------------------------------------------------------ buscar */
.busqueda-grande { display: flex; gap: .6rem; margin: 1.4rem 0 .8rem; }
.busqueda-grande input { font-size: 1.05rem; padding: .6rem .9rem; }
.resumen-busqueda { color: var(--texto-3); font-size: .9rem; }
.hallazgos { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.hallazgos a {
  display: block;
  padding: .8rem 1rem;
  border: 1px solid var(--marco);
  border-radius: 12px;
  background: var(--velo);
  text-decoration: none;
  transition: border-color .2s, box-shadow .2s;
}
.hallazgos a:hover, .hallazgos a:focus-visible { border-color: var(--cian); box-shadow: 0 0 18px rgba(25, 227, 255, .15); outline: none; }
.hallazgos b { font-family: var(--garamond); font-size: 1.2rem; color: var(--texto); letter-spacing: .02em; }
.hallazgos small { margin-left: .5rem; color: var(--texto-3); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; }
.hallazgos span { display: block; margin-top: .3rem; color: var(--texto-2); font-size: .88rem; line-height: 1.55; }
mark {
  color: var(--texto);
  background: rgba(25, 227, 255, .2);
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(25, 227, 255, .35);
  padding: 0 .1em;
}

/* ------------------------------------------------------------ pantallas medianas y móviles */
@media (max-width: 72rem) {
  #contenido { grid-template-columns: minmax(0, 1fr); }
  /* también el panel con foto de las entradas: `#lateral.con-foto` pesa más que `#lateral` y, sin
     nombrarlo aquí, el panel seguía saliendo al pie de cada lema con el rótulo vacío (4-11-2026) */
  #lateral, #lateral.con-foto { display: none; }
}

@media (max-width: 52rem) {
  #contenedor {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "cabecera" "menu" "contenido" "pie";
    padding: 0 1rem;
  }
  body { font-size: 1rem; }
  .cabecera-fila { gap: .6rem 1rem; }
  .titulo { font-size: 1.4rem; gap: .55rem; }
  .titulo .logo { height: 2.8rem; }
  .secciones { order: 3; width: 100%; gap: 1rem; font-size: .85rem; }
  .buscador { width: 100%; order: 4; }
  #resultados { width: 100%; }
  .abecedario { flex-wrap: wrap; row-gap: .25rem; }
  .abecedario a, .abecedario span { flex: 1 0 calc(100% / 14 - .2rem); font-size: 1.1rem; line-height: 1.8rem; }
  /* relative y no static: el filete de #cabecera::after se coloca respecto de la cabecera; con static quedaba al pie
     de la primera pantalla, cruzando la bienvenida (el autor, 8 de noviembre de 2026, desde el teléfono) */
  #cabecera { position: relative; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
  html { scroll-padding-top: 1rem; }
  #menu { position: static; max-height: none; overflow: visible; margin-top: 1rem; }
  .foto-menu { display: none; }
  .plegable > summary { cursor: pointer; }
  .plegable > summary::after { content: " ▾"; color: var(--texto-3); font-size: .9rem; }
  .plegable[open] > summary::after { content: " ▴"; }
  .plegable[open] .lista-lemas { max-height: 50vh; overflow: auto; }
  .entrada p { text-align: left; }
  .capitular { font-size: 4.2rem; }
  .sigla { grid-template-columns: 4.5rem 1fr; }
  .vecinas { grid-template-columns: 1fr; }
  .vecinas a[rel="next"] { text-align: left; }
  .busqueda-grande { flex-direction: column; }
}

/* ------------------------------------------------------------ carátulas de los álbumes */
/* En HISTORIA DE LOS ÁLBUMES DE ESTUDIO (el autor, 2 de noviembre de 2026): al principio, todas
   las carátulas, y cada una lleva a la historia de su álbum; luego, la de cada álbum junto a su
   historia. Van enteras, sin recortar: algunas no son cuadradas y el recorte se come el nombre. */
.galeria-caratulas { margin: 0 0 2.2rem; }
.galeria-caratulas ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: 1.3rem 1.1rem;
}
.galeria-caratulas a { display: block; text-decoration: none; text-align: center; color: var(--texto-2); }
.galeria-caratulas img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  background: #000;
  border: 1px solid var(--marco);
  border-radius: 8px;
  margin: 0 0 .5rem;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.galeria-caratulas a:hover img, .galeria-caratulas a:focus-visible img {
  transform: translateY(-3px);
  border-color: var(--cian);
  box-shadow: 0 0 22px rgba(25, 227, 255, .35);
}
.galeria-caratulas span { display: block; font-size: .92rem; line-height: 1.25; color: var(--texto); }
.galeria-caratulas small { color: var(--texto-3); font-size: .8rem; }
.galeria-caratulas .credito { font-size: .78rem; color: var(--texto-3); margin: 1rem 0 0; text-align: right; }
@media (prefers-reduced-motion: reduce) { .galeria-caratulas img { transition: none; } }
.pagina-anexo .apartado { display: flow-root; }   /* la carátula flotante no se sale de su apartado */
.caratula { float: right; width: 12rem; margin: .35rem 0 1rem 1.5rem; }
.caratula img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  border: 1px solid var(--marco);
  border-radius: 8px;
  box-shadow: 0 0 24px rgba(25, 227, 255, .15);
}
@media (max-width: 52rem) {
  .caratula { float: none; width: 60%; max-width: 14rem; margin: .4rem auto 1.2rem; }
}

/* ------------------------------------------------------------ carteles de los documentales */
/* En DOCUMENTALES SOBRE SILVIO (el autor, 2 de noviembre de 2026), lo mismo que las carátulas, con
   carteles verticales. El documental sin cartel lleva en la galería una ficha con su título. */
.galeria-carteles img, .galeria-carteles .hueco { aspect-ratio: 2 / 3; }
.galeria-carteles ol { grid-template-columns: repeat(auto-fill, minmax(7.2rem, 1fr)); }
.galeria-carteles .hueco {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .8rem;
  margin: 0 0 .5rem;
  box-sizing: border-box;
  border: 1px solid var(--marco);
  border-radius: 8px;
  background:
    linear-gradient(160deg, rgba(25, 227, 255, .10), rgba(124, 92, 255, .14) 55%, rgba(0, 0, 0, .25)),
    var(--superficie-2);
  font-family: var(--garamond);
  font-style: italic;
  font-size: 1.12rem;
  line-height: 1.2;
  color: var(--texto);
  text-wrap: balance;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.galeria-carteles a:hover .hueco, .galeria-carteles a:focus-visible .hueco {
  transform: translateY(-3px);
  border-color: var(--cian);
  box-shadow: 0 0 22px rgba(25, 227, 255, .35);
}
@media (prefers-reduced-motion: reduce) { .galeria-carteles .hueco { transition: none; } }
.cartel { width: 10rem; }
@media (max-width: 52rem) {
  .cartel { width: 50%; max-width: 12rem; }
}
/* DOCUMENTALES CON PARTICIPACIÓN DE SILVIO: un párrafo por documental, casi siempre corto. El cartel, más
   pequeño, va en una caja con su párrafo que crece hasta el alto del cartel: sin ella, los carteles se
   apilarían y cada uno quedaría junto al párrafo de otro documental. */
.con-cartel { display: flow-root; }
/* Cada documental lleva delante un fotograma pequeño en cian (el autor, 2 de noviembre de 2026): sin
   viñeta, la relación se leía como un solo bloque de texto. Los párrafos que no son documentales (la
   introducción, el Noticiero ICAIC, la ficción) quedan sin ella. */
.pagina-anexo p.documental, .pagina-anexo p.version { position: relative; padding-left: 1.75rem; margin: 1.05rem 0; }
.pagina-anexo p.version { margin: .7rem 0; text-align: left; }   /* fichas: sin los huecos de la justificación */
.pagina-anexo p.documental::before, .pagina-anexo p.version::before {
  content: "";
  position: absolute;
  left: 0;
  top: .38em;
  width: 1.05em;
  height: 1.05em;
  background: var(--cian);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M4 2h16a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2zM5 4.5v2h2v-2zm0 4.5v2h2V9zm0 4v2h2v-2zm0 4.5v2h2v-2zM17 4.5v2h2v-2zm0 4.5v2h2V9zm0 4v2h2v-2zm0 4.5v2h2v-2zM9 5v14h6V5z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M4 2h16a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2zM5 4.5v2h2v-2zm0 4.5v2h2V9zm0 4v2h2v-2zm0 4.5v2h2v-2zM17 4.5v2h2v-2zm0 4.5v2h2V9zm0 4v2h2v-2zm0 4.5v2h2v-2zM9 5v14h6V5z'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 0 4px rgba(25, 227, 255, .55));
  opacity: .9;
}
/* VERSIONES DE OTROS INTÉRPRETES: la viñeta es una nota musical (el autor, 2 de noviembre de 2026). */
.pagina-anexo p.version::before {
  width: 1.2em;
  height: 1.2em;
  top: .3em;
  left: -.1em;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3v10.55A4 4 0 1 0 14 17V7h4V3z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3v10.55A4 4 0 1 0 14 17V7h4V3z'/%3E%3C/svg%3E");
}
/* DISCOS COLECTIVOS Y COLABORACIONES: cada disco, una ficha con un vinilo de viñeta, el año de rótulo, el título
   destacado y las canciones en su línea (el autor, 6 de noviembre de 2026: las listas largas pesaban). */
.pagina-anexo p.disco {
  position: relative;
  margin: 0;
  padding: .8rem 0 .8rem 2.2rem;
  text-align: left;
  border-top: 1px solid var(--marco-suave);
}
.pagina-anexo h2 + p.disco, .pagina-anexo h3 + p.disco { border-top: 0; }
.pagina-anexo p.disco::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.05rem;
  width: 1.45em;
  height: 1.45em;
  background: var(--cian);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 1a11 11 0 1 0 0 22a11 11 0 1 0 0-22zm0 2.2a8.8 8.8 0 1 1 0 17.6a8.8 8.8 0 1 1 0-17.6z'/%3E%3Cpath fill-rule='evenodd' opacity='.55' d='M12 4.6a7.4 7.4 0 1 0 0 14.8a7.4 7.4 0 1 0 0-14.8zm0 1.2a6.2 6.2 0 1 1 0 12.4a6.2 6.2 0 1 1 0-12.4z'/%3E%3Cpath fill-rule='evenodd' d='M12 8.2a3.8 3.8 0 1 0 0 7.6a3.8 3.8 0 1 0 0-7.6zm0 2.8a1 1 0 1 1 0 2a1 1 0 1 1 0-2z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 1a11 11 0 1 0 0 22a11 11 0 1 0 0-22zm0 2.2a8.8 8.8 0 1 1 0 17.6a8.8 8.8 0 1 1 0-17.6z'/%3E%3Cpath fill-rule='evenodd' opacity='.55' d='M12 4.6a7.4 7.4 0 1 0 0 14.8a7.4 7.4 0 1 0 0-14.8zm0 1.2a6.2 6.2 0 1 1 0 12.4a6.2 6.2 0 1 1 0-12.4z'/%3E%3Cpath fill-rule='evenodd' d='M12 8.2a3.8 3.8 0 1 0 0 7.6a3.8 3.8 0 1 0 0-7.6zm0 2.8a1 1 0 1 1 0 2a1 1 0 1 1 0-2z'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 0 4px rgba(25, 227, 255, .45));
  opacity: .85;
}
.ficha-ano {
  display: block;
  font-family: var(--garamond);
  font-variant: small-caps;
  letter-spacing: .08em;
  font-size: .95em;
  line-height: 1.2;
  color: var(--cian);
  margin-bottom: .15rem;
}
.ficha-ano strong { font-weight: 600; }
.ficha-titulo { font-family: var(--garamond); font-weight: 600; font-size: 1.12em; color: var(--texto); }
.ficha-titulo .dicho { font-style: normal; color: inherit; }   /* un título marcado como cita se lee como título */
.ficha-pistas { display: block; margin-top: .3rem; color: var(--texto-2); font-size: .95em; }
.ficha-pistas::before { content: "♪" / ""; margin-right: .45em; color: var(--cian); opacity: .8; }
.oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* La carátula de cada disco, cuando está en la colección del autor (6 de noviembre de 2026): pequeña, a la derecha
   de la ficha y con visor. La caja lleva el filete en lugar de la ficha, para que no quede debajo de la carátula. */
.pagina-anexo .con-caratula { display: flow-root; border-top: 1px solid var(--marco-suave); }
.pagina-anexo h2 + .con-caratula, .pagina-anexo h3 + .con-caratula { border-top: 0; }
.pagina-anexo .con-caratula > p.disco { border-top: 0; }
.caratula-disco { float: right; width: 5.2rem; margin: .95rem 0 .6rem 1.1rem; }
.caratula-disco a { display: block; line-height: 0; }
.caratula-disco .lamina {
  display: block;
  width: 100%;
  background-repeat: no-repeat;
  border-radius: 3px;
  border: 1px solid var(--marco);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
  transition: transform .2s ease;
}
.caratula-disco a:hover .lamina, .caratula-disco a:focus-visible .lamina { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) { .caratula-disco .lamina { transition: none; } }
.visor .lamina-grande { display: block; margin: 0 auto; background-repeat: no-repeat; border-radius: 4px; cursor: zoom-out; }
.visor .lamina-grande[hidden], .visor img[hidden] { display: none; }
@media (max-width: 640px) { .caratula-disco { width: 4.2rem; margin-left: .8rem; } }
/* VERSIONES DE OTROS INTÉRPRETES y PREMIOS Y RECONOCIMIENTOS, con la misma ficha que los discos (el autor, 6 de
   noviembre de 2026): el intérprete o el año de rótulo y un filete entre ficha y ficha. Las versiones conservan la
   nota musical de viñeta, así que su línea de canciones no la repite; los premios llevan una medalla. */
.pagina-anexo p.version.ficha, .pagina-anexo p.premio {
  position: relative;
  margin: 0;
  padding: .75rem 0 .75rem 2.2rem;
  text-align: left;
  border-top: 1px solid var(--marco-suave);
}
.pagina-anexo h2 + p.version.ficha, .pagina-anexo h3 + p.version.ficha,
.pagina-anexo h2 + p.premio, .pagina-anexo h3 + p.premio { border-top: 0; }
.pagina-anexo p.version.ficha::before { top: .95rem; left: .1rem; width: 1.3em; height: 1.3em; }
.pagina-anexo p.version.ficha .ficha-pistas::before { content: none; }
.pagina-anexo p.premio::before {
  content: "";
  position: absolute;
  left: 0;
  top: .95rem;
  width: 1.45em;
  height: 1.45em;
  background: var(--cian);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 1.5h4l2.4 6.2-3.1 1.6zM17.5 1.5h-4l-.9 2.4 1.8 4.6 1.3.7z'/%3E%3Cpath fill-rule='evenodd' d='M12 8.6a6.9 6.9 0 1 0 0 13.8a6.9 6.9 0 1 0 0-13.8zm0 1.9a5 5 0 1 1 0 10a5 5 0 1 1 0-10z'/%3E%3Cpath d='M12 12.2l1.05 2.1 2.3.33-1.67 1.63.4 2.3L12 17.47l-2.08 1.09.4-2.3-1.67-1.63 2.3-.33z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 1.5h4l2.4 6.2-3.1 1.6zM17.5 1.5h-4l-.9 2.4 1.8 4.6 1.3.7z'/%3E%3Cpath fill-rule='evenodd' d='M12 8.6a6.9 6.9 0 1 0 0 13.8a6.9 6.9 0 1 0 0-13.8zm0 1.9a5 5 0 1 1 0 10a5 5 0 1 1 0-10z'/%3E%3Cpath d='M12 12.2l1.05 2.1 2.3.33-1.67 1.63.4 2.3L12 17.47l-2.08 1.09.4-2.3-1.67-1.63 2.3-.33z'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 0 4px rgba(25, 227, 255, .45));
  opacity: .85;
}
/* LIBROS SOBRE SILVIO y BIBLIOGRAFÍA: el autor en versalitas, el título en su línea y un filete entre ficha y ficha. */
.pagina-anexo p.libro { border-top: 1px solid var(--marco-suave); padding-top: .9rem; margin: .9rem 0 0; }
.libro-autor {
  display: block;
  font-variant: small-caps;
  letter-spacing: .04em;
  color: var(--texto-2);
  font-size: .95em;
}
.libro-titulo {
  display: block;
  font-family: var(--garamond);
  font-style: normal;
  font-weight: 600;
  font-size: 1.22em;
  line-height: 1.25;
  color: var(--texto);
  margin: .1rem 0 .35rem;
  text-align: left;
}
.con-cartel .cartel { float: right; width: 7rem; margin: .3rem 0 .8rem 1.2rem; }
/* BIBLIOGRAFÍA: la cubierta de cada libro, más pequeña aún, junto a su ficha (el autor, 2 de noviembre de 2026). */
.con-cartel .cubierta { width: 5.5rem; margin-top: 1.2rem; margin-bottom: .6rem; }
/* Un libro con las cubiertas de dos ediciones las lleva lado a lado («El unicornio y otras invenciones»). */
.con-cartel .cubierta.varias { width: 11.5rem; display: flex; gap: .5rem; align-items: flex-start; }
.con-cartel .cubierta.varias img { flex: 1 1 0; min-width: 0; }

/* ------------------------------------------------------------ banderas de SILVIO POR EL MUNDO */
/* Al principio, la bandera de cada país, enlazada a su apartado, y la bandera delante del nombre de
   cada país (el autor, 2 de noviembre de 2026). Son emojis: el Mac los dibuja con su diseño completo. */
.galeria-banderas ol { grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); }
.galeria-banderas .bandera {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 3 / 2;
  margin: 0 0 .5rem;
  border: 1px solid var(--marco);
  border-radius: 8px;
  background: var(--superficie-2);
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: 4.4rem;
  line-height: 1;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.galeria-banderas a:hover .bandera, .galeria-banderas a:focus-visible .bandera {
  transform: translateY(-3px);
  border-color: var(--cian);
  box-shadow: 0 0 22px rgba(25, 227, 255, .35);
}
@media (prefers-reduced-motion: reduce) { .galeria-banderas .bandera { transition: none; } }
.bandera-pais {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: 1.15em;
  margin-right: .45em;
  vertical-align: -.06em;
}

/* ------------------------------------------------------------ la Bienvenida del autor */
/* En la portada, a la vista (el autor, 2 de noviembre de 2026): el primer párrafo y el enlace al texto. */
.bienvenida-portada {
  margin: 0 0 2.2rem;
  padding: 1.2rem 1.5rem 1rem;
  background: linear-gradient(160deg, rgba(25, 227, 255, .06), rgba(124, 92, 255, .07) 60%, transparent), var(--superficie);
  border: 1px solid var(--marco);
  border-radius: 14px;
  box-shadow: 0 0 28px rgba(25, 227, 255, .07);
}
.bienvenida-portada .rotulo { margin-top: 0; }
.bienvenida-portada p { margin: .4rem 0 0; }
.bienvenida-portada .seguir { margin-top: .8rem; text-align: right; font-size: .95rem; }
/* Los enlaces de descarga de TESIS Y ESTUDIOS ACADÉMICOS (7 de noviembre de 2026). */
.descargas { display: flex; flex-wrap: wrap; gap: .4rem .9rem; margin-top: .45rem; font-family: var(--garamond);
  font-size: .98rem; }
.descarga { display: inline-flex; align-items: center; gap: .35rem; padding: .15rem .65rem; border: 1px solid var(--marco);
  border-radius: 999px; color: var(--cian); text-decoration: none; background: var(--superficie); }
.descarga:hover, .descarga:focus-visible { border-color: var(--cian); box-shadow: var(--brillo); }
.descarga.pdf::before { content: "↓"; }
.descarga.web::after { content: "↗"; font-size: .85em; }
/* El contador de visitantes de la portada (7 de noviembre de 2026), a la antigua: cifras sueltas en casillas. */
.contador { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .4rem .5rem;
  margin: 2.6rem 0 .5rem; text-align: center; font-family: var(--garamond); font-size: 1.05rem; color: var(--texto-2); }
.contador[hidden] { display: none; }
#menu .contador { margin: 1.4rem 0 0; padding-top: 1.1rem; border-top: 1px solid var(--marco-suave); font-size: .95rem; }
.contador .cifras { display: inline-flex; flex-wrap: nowrap; gap: 3px; }
.contador .cifras span { display: inline-block; min-width: 1.35em; padding: .12em 0 .08em; text-align: center;
  font-family: var(--garamond); font-variant-numeric: lining-nums tabular-nums; font-size: 1.1rem; color: var(--cian);
  background: var(--superficie); border: 1px solid var(--marco); border-radius: 3px; text-shadow: var(--brillo); }
.bienvenida-portada .seguir a { color: var(--cian); text-decoration: none; }
.bienvenida-portada .seguir a:hover, .bienvenida-portada .seguir a:focus-visible { text-decoration: underline; }
.pagina-bienvenida .bienvenida p { margin: 0 0 1.1rem; }
.pagina-bienvenida .bienvenida p:first-child::first-letter {
  float: left;
  font-family: var(--garamond);
  font-size: 3.4em;
  line-height: .9;
  margin: .06em .12em 0 0;
  color: var(--cian);
  text-shadow: 0 0 14px rgba(25, 227, 255, .45);
}

/* ------------------------------------------------------------ el buscador de la cabecera, más a la vista */
/* El autor lo veía poco (2 de noviembre de 2026): fondo más claro, borde cian con brillo, una lupa, el texto de
   ayuda con más contraste y la tecla «/», que lleva al buscador desde cualquier página. */
/* parte de 11rem y crece hasta 21rem con el sitio libre: en una fila que puede partirse, el salto se decide con
   el ancho de partida, así que con 21rem bajaba de línea en pantallas de unos 1100 px */
.buscador { width: auto; flex: 1 1 11rem; max-width: 21rem; }
.cabecera-fila { gap: 1.2rem; }
.buscador input {
  font-size: .95rem;
  padding: .55rem 2.4rem .55rem 2.35rem;
  background: var(--superficie-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2319E3FF' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21'/%3E%3C/svg%3E") no-repeat .8rem center / 1.05rem;
  border: 1px solid rgba(25, 227, 255, .55);
  box-shadow: 0 0 14px rgba(25, 227, 255, .16), inset 0 0 0 1px rgba(25, 227, 255, .06);
}
.buscador input::placeholder { color: var(--texto-2); }
.buscador input:hover { border-color: rgba(25, 227, 255, .8); }
.buscador::after {
  content: "/";
  position: absolute;
  right: .65rem;
  top: 50%;
  transform: translateY(-50%);
  padding: 0 .4rem;
  font-size: .75rem;
  line-height: 1.5;
  color: var(--texto-2);
  border: 1px solid var(--marco);
  border-radius: 5px;
  pointer-events: none;
}
.buscador:focus-within::after, .buscador:has(input:not(:placeholder-shown))::after { display: none; }
.bienvenida .firma {
  margin-top: 1.6rem;
  text-align: right;
  font-family: var(--garamond);
  font-variant: small-caps;
  font-size: 1.3rem;
  letter-spacing: .03em;
  color: var(--texto-2);
}
@media (max-width: 52rem) {
  .buscador { width: 100%; flex-basis: 100%; max-width: none; }
  .buscador::after { display: none; }   /* en el móvil no hay teclado con «/» a mano */
}

/* ------------------------------------------------------------ modo claro */
/* A petición del autor (2 de noviembre de 2026), con el botón del sol en la cabecera. El diseño sigue siendo el
   oscuro por defecto; el claro redefine la paleta: fondo blanco azulado, texto azul noche y, en lugar del cian
   de neón, que sobre blanco no se lee, un turquesa oscuro. Fuera los brillos de los títulos: sobre claro se ven
   borrosos. La elección se guarda en el navegador (localStorage «silviopedia-tema»). */
.tema {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  margin-left: -.2rem;
  color: var(--texto-2);
  background: transparent;
  border: 1px solid var(--marco);
  border-radius: 50%;
  cursor: pointer;
}
.tema:hover, .tema:focus-visible { color: var(--cian); border-color: var(--cian); box-shadow: var(--brillo); outline: none; }
.tema svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tema .luna { display: none; }
:root[data-theme="light"] .tema .sol { display: none; }
:root[data-theme="light"] .tema .luna { display: block; }
.secciones { align-items: center; }

:root[data-theme="light"] {
  color-scheme: light;
  --fondo: #F4F7FB;
  --superficie: #FFFFFF;
  --superficie-2: #E9F0F8;
  --velo: rgba(255, 255, 255, .75);
  --texto: #0B1B36;
  --texto-2: #3A5272;
  --texto-3: #687E9B;
  --cian: #00799A;
  --azul: #1F5FCC;
  --lavanda: #4B5FCF;
  --graf-1: #1F5FCC;   /* validados para el fondo claro */
  --graf-2: #0E8C78;
  --graf-3: #7B4FD6;
  --graf-4: #C4501F;
  --linea: #2A8BD6;
  --marco: rgba(31, 95, 160, .28);
  --marco-suave: rgba(31, 95, 160, .14);
  --brillo: 0 0 8px rgba(0, 121, 154, .25);
}
:root[data-theme="light"] body * { text-shadow: none; }
:root[data-theme="light"] ::selection { background: rgba(0, 121, 154, .2); }
:root[data-theme="light"] #cabecera { background: rgba(244, 247, 251, .92); }
:root[data-theme="light"] #cabecera::after { box-shadow: none; }
:root[data-theme="light"] #resultados { box-shadow: 0 12px 34px rgba(11, 27, 54, .16); }
:root[data-theme="light"] .galeria-caratulas img { background: #DCE4EE; }
:root[data-theme="light"] .titulo .logo { filter: none; }
:root[data-theme="light"] .buscador input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300799A' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21'/%3E%3C/svg%3E");
  border-color: rgba(0, 121, 154, .55);
  box-shadow: 0 0 0 3px rgba(0, 121, 154, .07);
}
:root[data-theme="light"] .galeria-carteles .hueco {
  background: linear-gradient(160deg, rgba(0, 121, 154, .08), rgba(75, 95, 207, .10) 60%, transparent), var(--superficie-2);
}

/* ------------------------------------------------------------ contacto */
/* El correo de la Silviopedia (el autor, 2 de noviembre de 2026): en la cabecera, en su página y en el pie. */
.contacto .correo { margin-top: 1.4rem; }
.contacto .form-contacto { margin: 1.2rem 0 2rem; }
.contacto .correo a {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: .75rem 1.3rem;
  font-size: 1.15rem;
  color: var(--cian);
  text-decoration: none;
  background: var(--superficie-2);
  border: 1px solid var(--cian);
  border-radius: 12px;
  box-shadow: var(--brillo);
  overflow-wrap: anywhere;
}
.contacto .correo a:hover, .contacto .correo a:focus-visible { background: var(--superficie); outline: none; }
.contacto .correo svg { width: 1.4rem; height: 1.4rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linejoin: round; stroke-linecap: round; }
#pie a { color: var(--texto-2); }
#pie a:hover, #pie a:focus-visible { color: var(--cian); }

/* «Canciones de Silvio» (2 de noviembre de 2026): las cuentas, con gráficos en SVG hechos por graficos.py.
   Los colores de las series son --graf-1/2/3, uno por tema; los textos van en los colores del texto. */
.pagina-canciones .heroe { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin: 1.2rem 0 .4rem; }
.pagina-canciones .heroe .cifra { font-family: var(--garamond); font-size: 4rem; line-height: 1; color: var(--texto); }
.pagina-canciones .heroe .de-que { color: var(--texto-2); font-size: 1.05rem; max-width: 24rem; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .8rem; margin: .8rem 0 1.6rem; }
.kpi { background: var(--velo); border: 1px solid var(--marco-suave); border-radius: 12px; padding: .8rem .9rem;
       display: flex; flex-direction: column; gap: .15rem; }
.kpi .valor { font-family: var(--garamond); font-size: 2rem; line-height: 1.1; color: var(--texto); }
.kpi .que { color: var(--texto-2); font-size: .95rem; }
.kpi .nota { color: var(--texto-3); font-size: .85rem; }
.figura { margin: 1.8rem 0; }
.figura h2 { font-family: var(--garamond); font-size: 1.45rem; margin: 0 0 .4rem; }
.graf { display: block; max-width: 100%; height: auto; margin: .6rem 0 .2rem; font-family: var(--georgia); }
.graf .g1 { fill: var(--graf-1); } .graf .g2 { fill: var(--graf-2); } .graf .g3 { fill: var(--graf-3); } .graf .g4 { fill: var(--graf-4); }
.graf .marca:hover path, .graf .marca:hover rect { filter: brightness(1.18); }
.graf .etq { fill: var(--texto-2); font-size: 13px; }
.graf .valor { fill: var(--texto); font-size: 13px; font-variant-numeric: tabular-nums; }
.graf .dentro { fill: #fff; font-size: 12px; font-weight: bold; }
.graf .eje { stroke: var(--marco-suave); stroke-width: 1; }
.leyenda { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; padding: 0; margin: .5rem 0 0;
           color: var(--texto-2); font-size: .92rem; }
.leyenda .muestra { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: .4rem;
                    vertical-align: -1px; }
.leyenda .g1 { background: var(--graf-1); } .leyenda .g2 { background: var(--graf-2); }
.leyenda .g3 { background: var(--graf-3); }
.tabla-datos { margin: .4rem 0 0; font-size: .9rem; }
.tabla-datos summary { cursor: pointer; color: var(--texto-3); }
.tabla-datos table, table.datos { border-collapse: collapse; width: 100%; margin: .5rem 0; font-size: .92rem; }
.tabla-datos th, .tabla-datos td, table.datos th, table.datos td {
  text-align: left; padding: .3rem .5rem; border-bottom: 1px solid var(--marco-suave); vertical-align: top; }
.tabla-datos td:nth-child(2), .tabla-datos th:nth-child(2) { text-align: right; font-variant-numeric: tabular-nums; }
table.datos td:nth-child(3) { font-variant-numeric: tabular-nums; }
.tarjetas li.solo-web a { --c: var(--cian); }
@media (max-width: 640px) {
  .pagina-canciones .heroe .cifra { font-size: 3rem; }
  .graf .etq, .graf .valor { font-size: 15px; }
}

/* ------------------------------------------------------------ imágenes solo de la web */
/* (el autor, 4 de noviembre de 2026): entradas de conciertos, carteles y fotos que no están en el
   libro, declaradas en web/imagenes-web.json. Van en una tira al final de la entrada, o debajo del
   título del apartado del anexo, y cada una se abre entera en el visor (silviopedia.js, 7). */
.galeria-lema {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
  gap: 1.2rem 1rem;
  margin: 1.6rem 0 1.2rem;
}
.galeria-lema figure { margin: 0; text-align: center; }
.galeria-lema a { display: block; text-decoration: none; }
.galeria-lema img {
  display: block;
  width: 100%;
  height: 9.5rem;
  object-fit: contain;
  margin: 0 0 .45rem;
  background: rgba(0, 0, 0, .35);
  border: 1px solid var(--marco);
  border-radius: 8px;
  box-shadow: none;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.galeria-lema a:hover img, .galeria-lema a:focus-visible img {
  transform: translateY(-3px);
  border-color: var(--cian);
  box-shadow: 0 0 22px rgba(25, 227, 255, .35);
}
.galeria-lema figcaption { margin: 0; font-size: .8rem; line-height: 1.4; color: var(--texto-3); text-align: center; }
:root[data-theme="light"] .galeria-lema img { background: #DCE4EE; }
@media (prefers-reduced-motion: reduce) { .galeria-lema img { transition: none; } }

/* El visor: un <dialog> que crea el guion al pulsar una imagen de la tira. */
.visor { border: 0; padding: 0; background: transparent; max-width: min(96vw, 1200px); overflow: visible; }
.visor::backdrop { background: rgba(5, 10, 25, .9); }
.visor figure { margin: 0; position: relative; }
.visor img {
  display: block;
  max-width: min(96vw, 1200px);
  max-height: 84vh;
  width: auto; height: auto;
  margin: 0 auto;
  border-radius: 8px;
  border: 1px solid var(--marco);
  box-shadow: 0 0 40px rgba(25, 227, 255, .25);
  cursor: zoom-out;
}
.visor figcaption { color: var(--texto-2); font-size: .92rem; line-height: 1.45; margin: .7rem auto 0; max-width: 60ch; text-align: center; }
.visor .cerrar {
  position: absolute; top: -.6rem; right: -.6rem;
  width: 2.2rem; height: 2.2rem; border-radius: 50%;
  border: 1px solid var(--marco); background: var(--fondo, #0b1226); color: var(--texto);
  font-size: 1.3rem; line-height: 1; cursor: pointer;
}
.visor .cerrar:hover, .visor .cerrar:focus-visible { border-color: var(--cian); color: var(--cian); }

/* ---------- imágenes solo de la web dentro del texto de una entrada (el autor, 4 de noviembre de 2026) ----------
   En la tira del final «quedó un poco pequeña»; pidió algo «similar a la opción "ajuste estrecho" de los editores
   de texto»: la imagen flota a un lado y el párrafo se ajusta a su alrededor, la primera entre el primer y el
   segundo párrafo y las demás repartidas, alternando el lado. `clear: both` evita que dos queden una frente a
   otra estrangulando el texto. Las citas, el reproductor, las figuras del libro y las tablas se hacen contexto de
   formato propio (`flow-root`) para que su caja se estreche junto a la imagen en vez de pasar por debajo. */
.foto-lema { float: right; clear: both; width: min(46%, 17rem); margin: .25rem 0 .9rem 1.5rem; }
.foto-lema.izq { float: left; margin: .25rem 1.5rem .9rem 0; }
.foto-lema a { display: block; text-decoration: none; }
.foto-lema img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--marco);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.foto-lema a:hover img, .foto-lema a:focus-visible img {
  transform: translateY(-3px);
  border-color: var(--cian);
  box-shadow: 0 0 22px rgba(25, 227, 255, .35);
}
.foto-lema figcaption { margin: .45rem .2rem 0; font-size: .78rem; line-height: 1.4; color: var(--texto-3); text-align: center; }
.entrada { display: flow-root; }
.entrada > .cita, .entrada > figure:not(.foto-lema), .entrada > .tabla, .entrada > ul { display: flow-root; }
/* Una cita que arranca cuando todavía flotan dos fotos, una a cada lado, se estrangulaba en el hueco entre las dos
   y se quedaba así de estrecha hasta el final (HIROSHIMA, 5 de noviembre de 2026). Con un ancho mínimo que no cabe
   en ese hueco, el navegador la baja hasta donde solo queda una foto: junto a una sola cabe siempre (54 % o más). */
.entrada > .cita { min-width: 45%; }
/* El cuadro de referencias y la tira de miniaturas del final despejan antes las fotos flotantes: sin esto,
   una foto junto al último párrafo caía encima del cuadro (HIROSHIMA, 5 de noviembre de 2026). */
.vecinas, .entrada > .notas, .galeria-lema { clear: both; }
/* Dos o más fotos seguidas, sin texto entre ellas: en fila, lado a lado y a la misma altura de arranque, en vez de
   flotar una a cada lado (VIRGILIO, 9 de noviembre de 2026). */
.fotos-fila { clear: both; display: flex; justify-content: center; align-items: flex-start; gap: 1.2rem; margin: .4rem 0 1.1rem; }
.foto-lema.en-fila { float: none; flex: 1 1 0; min-width: 0; width: auto; max-width: 17rem; margin: 0; }
@media (max-width: 640px) {
  .foto-lema, .foto-lema.izq { float: none; width: auto; max-width: 20rem; margin: 1.1rem auto; }
  .fotos-fila { gap: .8rem; }
  .foto-lema.en-fila { margin: 0; }
}
@media (prefers-reduced-motion: reduce) { .foto-lema img { transition: none; } }

/* «Para empezar» con iconos (el autor, 6 de noviembre de 2026), en cian como las viñetas de los anexos, y la vuelta a
   ese menú encima del de los anexos. */
.lista-inicio a { display: flex; align-items: center; gap: .6rem; }
.lista-inicio a::before, .volver::before {
  content: "";
  flex: none;
  width: 1.05rem;
  height: 1.05rem;
  background: var(--cian);
  opacity: .85;
}
.lista-inicio .ico-bienvenida a::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M5 2.5h14V21H5zM14 11a1.1 1.1 0 1 0 0 2.2a1.1 1.1 0 1 0 0-2.2zM2.5 21h19v1.6h-19z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M5 2.5h14V21H5zM14 11a1.1 1.1 0 1 0 0 2.2a1.1 1.1 0 1 0 0-2.2zM2.5 21h19v1.6h-19z'/%3E%3C/svg%3E") center / contain no-repeat; }
.lista-inicio .ico-siglas a::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M3.5 4.5h3.5V8H3.5zM9 5.25h11.5v2H9zM3.5 10.25h3.5v3.5H3.5zM9 11h11.5v2H9zM3.5 16h3.5v3.5H3.5zM9 16.75h11.5v2H9z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M3.5 4.5h3.5V8H3.5zM9 5.25h11.5v2H9zM3.5 10.25h3.5v3.5H3.5zM9 11h11.5v2H9zM3.5 16h3.5v3.5H3.5zM9 16.75h11.5v2H9z'/%3E%3C/svg%3E") center / contain no-repeat; }
.lista-inicio .ico-anexos a::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M2.5 5.5A1.5 1.5 0 0 1 4 4h5.5l2 2.2H20A1.5 1.5 0 0 1 21.5 7.7V18.5A1.5 1.5 0 0 1 20 20H4a1.5 1.5 0 0 1-1.5-1.5z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M2.5 5.5A1.5 1.5 0 0 1 4 4h5.5l2 2.2H20A1.5 1.5 0 0 1 21.5 7.7V18.5A1.5 1.5 0 0 1 20 20H4a1.5 1.5 0 0 1-1.5-1.5z'/%3E%3C/svg%3E") center / contain no-repeat; }
.lista-inicio .ico-contacto a::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M2 5h20v14H2zM4 8.4V17h16V8.4l-8 5.3z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M2 5h20v14H2zM4 8.4V17h16V8.4l-8 5.3z'/%3E%3C/svg%3E") center / contain no-repeat; }
.lista-inicio .ico-buscar a::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M10 2.5a7.5 7.5 0 1 0 4.55 13.46l5.25 5.25 1.6-1.6-5.25-5.25A7.5 7.5 0 0 0 10 2.5zm0 2.2a5.3 5.3 0 1 1 0 10.6a5.3 5.3 0 1 1 0-10.6z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M10 2.5a7.5 7.5 0 1 0 4.55 13.46l5.25 5.25 1.6-1.6-5.25-5.25A7.5 7.5 0 0 0 10 2.5zm0 2.2a5.3 5.3 0 1 1 0 10.6a5.3 5.3 0 1 1 0-10.6z'/%3E%3C/svg%3E") center / contain no-repeat; }
.volver {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin: 0 0 .9rem;
  font-size: .85rem;
  color: var(--texto-2);
  text-decoration: none;
}
.volver::before { width: .85rem; height: .85rem; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M15.4 4.6 8 12l7.4 7.4-1.7 1.7L4.6 12l9.1-9.1z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M15.4 4.6 8 12l7.4 7.4-1.7 1.7L4.6 12l9.1-9.1z'/%3E%3C/svg%3E") center / contain no-repeat; }
.volver:hover, .volver:focus-visible { color: var(--cian); }

/* buscar.html (el autor, 6 de noviembre de 2026): un verso bajo el título y, debajo del buscador, el botón «Al azar»
   (que dejó la cabecera) con su verso. */
.pagina-buscar .cita-pagina { margin: .4rem 0 1.4rem; }
.al-azar { margin: 1.6rem 0 2rem; }
.boton-azar {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .55rem 1.1rem;
  font: inherit;
  font-family: var(--garamond);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--texto);
  background: var(--superficie);
  border: 1px solid var(--marco);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease;
}
.boton-azar::before {
  content: "";
  width: 1.15rem;
  height: 1.15rem;
  background: var(--cian);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M5.5 2.5h13a3 3 0 0 1 3 3v13a3 3 0 0 1-3 3h-13a3 3 0 0 1-3-3v-13a3 3 0 0 1 3-3zM8 6.3a1.7 1.7 0 1 0 0 3.4a1.7 1.7 0 1 0 0-3.4zM16 6.3a1.7 1.7 0 1 0 0 3.4a1.7 1.7 0 1 0 0-3.4zM12 10.3a1.7 1.7 0 1 0 0 3.4a1.7 1.7 0 1 0 0-3.4zM8 14.3a1.7 1.7 0 1 0 0 3.4a1.7 1.7 0 1 0 0-3.4zM16 14.3a1.7 1.7 0 1 0 0 3.4a1.7 1.7 0 1 0 0-3.4z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M5.5 2.5h13a3 3 0 0 1 3 3v13a3 3 0 0 1-3 3h-13a3 3 0 0 1-3-3v-13a3 3 0 0 1 3-3zM8 6.3a1.7 1.7 0 1 0 0 3.4a1.7 1.7 0 1 0 0-3.4zM16 6.3a1.7 1.7 0 1 0 0 3.4a1.7 1.7 0 1 0 0-3.4zM12 10.3a1.7 1.7 0 1 0 0 3.4a1.7 1.7 0 1 0 0-3.4zM8 14.3a1.7 1.7 0 1 0 0 3.4a1.7 1.7 0 1 0 0-3.4zM16 14.3a1.7 1.7 0 1 0 0 3.4a1.7 1.7 0 1 0 0-3.4z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.boton-azar:hover, .boton-azar:focus-visible { border-color: var(--cian); color: var(--cian); }
.al-azar .cita-pagina { margin-top: .9rem; }

/* La página de los anexos, sin cajas: una foto de Silvio en azul que se funde con el fondo por los bordes (el autor,
   6 de noviembre de 2026). */
/* La foto es un recorte del original centrado en la cara (el autor, 7 de noviembre de 2026: «está un poco corrida
   hacia la izquierda del círculo»). El círculo va en la imagen, no en el marco: Safari no pintaba la foto con la
   máscara en el marco y la imagen desplazada dentro. */
.foto-anexos { margin: 1.5rem auto 0; max-width: 34rem; }
.foto-anexos img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  opacity: .85;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 52%, transparent 100%);
          mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 52%, transparent 100%);
}
:root[data-theme="light"] .foto-anexos img { opacity: .9; }

/* Búsqueda sin resultados: un aviso a la vista, no una línea que pasa inadvertida (el autor, 6 de noviembre de 2026). */
.resumen-busqueda.sin-resultados {
  padding: .9rem 1.1rem;
  border: 1px solid var(--marco);
  border-left: 3px solid var(--cian);
  border-radius: 6px;
  background: var(--superficie);
  color: var(--texto);
}

/* (el autor, 7 de noviembre de 2026) Otra tipografía para el menú de arriba (Bienvenida, Anexos, Contacto) y para
   «Para empezar»: Alegreya Sans SC, versalitas sin remates, elegida entre cinco muestras; y el menú de arriba lleva
   los mismos iconos de líneas que «Para empezar» (prefirió los dibujos a los emoticones). */
.secciones a, .lista-inicio a { font-family: var(--menu); font-weight: 500; letter-spacing: .03em; }
.secciones { font-size: 1.02rem; }
.lista-inicio a { font-size: 1.02rem; }
.secciones a { display: inline-flex; align-items: center; gap: .45rem; }
.secciones a::before { content: ""; flex: none; width: 1.05em; height: 1.05em; background: currentColor; }
.secciones a[href$="bienvenida.html"]::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M5 2.5h14V21H5zM14 11a1.1 1.1 0 1 0 0 2.2a1.1 1.1 0 1 0 0-2.2zM2.5 21h19v1.6h-19z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M5 2.5h14V21H5zM14 11a1.1 1.1 0 1 0 0 2.2a1.1 1.1 0 1 0 0-2.2zM2.5 21h19v1.6h-19z'/%3E%3C/svg%3E") center / contain no-repeat; }
.secciones a[href$="anexos.html"]::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M2.5 5.5A1.5 1.5 0 0 1 4 4h5.5l2 2.2H20A1.5 1.5 0 0 1 21.5 7.7V18.5A1.5 1.5 0 0 1 20 20H4a1.5 1.5 0 0 1-1.5-1.5z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M2.5 5.5A1.5 1.5 0 0 1 4 4h5.5l2 2.2H20A1.5 1.5 0 0 1 21.5 7.7V18.5A1.5 1.5 0 0 1 20 20H4a1.5 1.5 0 0 1-1.5-1.5z'/%3E%3C/svg%3E") center / contain no-repeat; }
.secciones a[href$="contacto.html"]::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M2 5h20v14H2zM4 8.4V17h16V8.4l-8 5.3z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M2 5h20v14H2zM4 8.4V17h16V8.4l-8 5.3z'/%3E%3C/svg%3E") center / contain no-repeat; }
@media (max-width: 640px) { .secciones { font-size: .92rem; } }

/* (el autor, 7 de noviembre de 2026) La letra de «Para empezar», en cascada a los demás menús: la lista de los
   anexos, con sus apartados, y el enlace de vuelta. */
#menu .lista-anexos a, .volver { font-family: var(--menu); font-weight: 500; letter-spacing: .03em; }
#menu .lista-anexos a { font-size: .98rem; line-height: 1.35; }
#menu .lista-anexos ol a { font-size: .9rem; }
.volver { font-size: .95rem; }

/* Los versos de la página de búsqueda (7 de noviembre de 2026): sueltos, sin recuadro y sin título. */
.verso-suelto { margin: .2rem 0 1.2rem; font-family: var(--garamond); font-size: 1.12rem; color: var(--texto-2); }
.verso-suelto em { font-style: italic; }
.al-azar .verso-suelto { margin-top: .8rem; }

/* (el autor, 7 de noviembre de 2026) Los elementos de los menús se iluminan al pasar el cursor: el texto y el icono
   pasan a cian con un resplandor suave, y en las listas el elemento se marca como el activo, sin moverse. */
.secciones a, .lista-inicio a, #menu .lista-anexos a, .volver {
  transition: color .15s ease, text-shadow .15s ease, background-color .15s ease, border-color .15s ease;
}
.secciones a:hover, .secciones a:focus-visible,
.lista-inicio a:hover, .lista-inicio a:focus-visible,
#menu .lista-anexos a:hover, #menu .lista-anexos a:focus-visible,
.volver:hover, .volver:focus-visible {
  color: var(--cian);
  text-shadow: var(--brillo);
}
.secciones a:hover::before, .secciones a:focus-visible::before,
.lista-inicio a:hover::before, .lista-inicio a:focus-visible::before,
.volver:hover::before, .volver:focus-visible::before { filter: drop-shadow(0 0 4px var(--cian)); }
#menu .lista-anexos a:hover, #menu .lista-anexos a:focus-visible {
  background: rgba(25, 227, 255, .05);
  border-left-color: var(--marco);
}
@media (prefers-reduced-motion: reduce) {
  .secciones a, .lista-inicio a, #menu .lista-anexos a, .volver { transition: none; }
}

/* (el autor, 7 de noviembre de 2026) Los encabezados del menú («Para empezar», «Anexos», «Cómo buscar») van también
   en la letra de los menús; no el de las páginas de letra («A · 109 entradas»), que sigue como la lista. */
#menu .plegable > summary:not(:has(.menu-letra)) { font-family: var(--menu); font-weight: 700; font-variant: normal; letter-spacing: .04em; }

/* Un cartel de documental con otra carátula de la web al lado, en el mismo recuadro (7 de noviembre de 2026). */
.caratula.cartel.varias { width: 17rem; display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-start; }
.caratula.cartel.varias > img, .caratula.cartel.varias > a { flex: 1 1 0; min-width: 0; }
.caratula.cartel.varias > a img { display: block; width: 100%; height: auto; }
.caratula.cartel.varias figcaption { flex-basis: 100%; margin-top: .2rem; font-size: .78rem; line-height: 1.4;
  color: var(--texto-3); text-align: center; }

/* La BIBLIOGRAFÍA en formato APA (7 de noviembre de 2026): sangría francesa, sin imágenes. */
p.apa { padding-left: 2.2em; text-indent: -2.2em; text-align: left; hyphens: manual; margin: .35rem 0; }

/* (7 de noviembre de 2026) «Oh, bienvenido seas» y «Lo de más» son más largos que «Bienvenida» y «Anexos»: cada
   rótulo del menú de arriba va en una sola línea, y en el teléfono la fila se reparte en dos si no cabe. */
.secciones a { white-space: nowrap; }
@media (max-width: 860px) {
  .secciones { flex-wrap: wrap; row-gap: .5rem; column-gap: 1rem; }
}

/* ------------------------------------------------------------ conciertos de Silvio (8 de noviembre de 2026) */
.filtros-conciertos { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: flex-end; margin: .6rem 0 .4rem; }
.filtros-conciertos label { display: flex; flex-direction: column; gap: .2rem; font-size: .85rem; color: var(--texto-3); }
.filtros-conciertos select, .filtros-conciertos button {
  font: inherit; font-size: .95rem; color: var(--texto); background: var(--velo); border: 1px solid var(--marco-suave);
  border-radius: 8px; padding: .35rem .6rem; min-width: 9rem; max-width: 100%; }
.filtros-conciertos button { cursor: pointer; min-width: 0; color: var(--texto-2); }
.filtros-conciertos button:hover { border-color: var(--cian); color: var(--texto); }
.cuenta-conciertos { color: var(--texto-2); margin: .3rem 0 .2rem; font-variant-numeric: tabular-nums; }
table.conciertos { font-size: .9rem; }
table.conciertos .fila-anio th { font-family: var(--garamond); font-size: 1.35rem; font-weight: normal; color: var(--texto);
  padding: 1rem .5rem .2rem; border-bottom: 1px solid var(--marco); }
table.conciertos td.fecha { white-space: nowrap; color: var(--texto-2); font-variant-numeric: tabular-nums; }
table.conciertos td.donde .pais { display: block; color: var(--texto-3); font-size: .82rem; }
table.conciertos td.detalle { color: var(--texto-2); }
table.conciertos tr[hidden] { display: none; }
@media (max-width: 640px) {
  .filtros-conciertos label { flex: 1 1 8rem; }
  .filtros-conciertos select { min-width: 0; width: 100%; }
  table.conciertos thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.conciertos, table.conciertos tbody, table.conciertos tr, table.conciertos td, table.conciertos th { display: block; }
  table.conciertos tr { padding: .45rem 0; border-bottom: 1px solid var(--marco-suave); }
  table.conciertos td { border: 0; padding: .05rem 0; }
  table.conciertos td.fecha { font-size: .82rem; }
  table.conciertos td.donde { font-weight: bold; }
  table.conciertos td.donde .pais { display: inline; font-weight: normal; margin-left: .35rem; }
  table.conciertos .fila-anio { border-bottom: 0; padding: 0; }
}

/* ------------------------------------------------------------ FIGURAS LITERARIAS (8 de noviembre de 2026) */
.juego-figuras { background: var(--velo); border: 1px solid var(--marco); border-radius: 14px; padding: 1rem 1.2rem 1.1rem;
  margin: 1rem 0 1.4rem; }
.juego-figuras h2 { margin: 0 0 .2rem; font-size: 1.3rem; }
.juego-ayuda { color: var(--texto-3); margin: 0 0 .6rem; font-size: .92rem; }
.juego-verso { font-style: italic; font-size: 1.15rem; line-height: 1.5; margin: .2rem 0 .8rem; padding: 0 0 0 .9rem;
  border-left: 3px solid var(--cian); color: var(--texto); }
.juego-verso cite { display: block; font-style: normal; font-size: .85rem; color: var(--texto-3); margin-top: .3rem; }
.juego-verso cite::before { content: "— "; }
.juego-opciones { display: flex; flex-wrap: wrap; gap: .5rem; }
.juego-opciones button, .juego-pie button, .familias-figuras .chip {
  font: inherit; font-size: .95rem; color: var(--texto); background: transparent; border: 1px solid var(--marco);
  border-radius: 999px; padding: .35rem .9rem; cursor: pointer; }
.juego-opciones button:hover:not(:disabled), .juego-pie button:hover, .familias-figuras .chip:hover { border-color: var(--cian); }
.juego-opciones button.correcta { border-color: var(--graf-1); background: color-mix(in srgb, var(--graf-1) 22%, transparent); }
.juego-opciones button.errada { border-color: var(--graf-4); background: color-mix(in srgb, var(--graf-4) 22%, transparent); }
.juego-opciones button:disabled { cursor: default; }
.juego-resultado { min-height: 1.4em; margin: .6rem 0 0; color: var(--texto-2); }
.juego-resultado.bien::before { content: "✅ "; } .juego-resultado.mal::before { content: "💡 "; }
.juego-pie { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin: .5rem 0 0;
  color: var(--texto-3); font-variant-numeric: tabular-nums; font-size: .9rem; }
.familias-figuras { display: flex; flex-wrap: wrap; gap: .5rem; margin: .4rem 0 1rem; }
.familias-figuras .chip span { color: var(--texto-3); margin-left: .25rem; font-variant-numeric: tabular-nums; }
.familias-figuras .chip.activo { background: var(--velo); border-color: var(--cian); }
.familias-figuras .chip.g1 { border-left: 4px solid var(--graf-1); } .familias-figuras .chip.g2 { border-left: 4px solid var(--graf-2); }
.familias-figuras .chip.g3 { border-left: 4px solid var(--graf-3); } .familias-figuras .chip.g4 { border-left: 4px solid var(--graf-4); }
.figuras-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 1rem;
  align-items: start; }
.figura-carta { background: var(--velo); border: 1px solid var(--marco-suave); border-top: 4px solid var(--c, var(--marco));
  border-radius: 12px; padding: .8rem 1rem .6rem; margin: 0; }
.figura-carta.g1 { --c: var(--graf-1); } .figura-carta.g2 { --c: var(--graf-2); }
.figura-carta.g3 { --c: var(--graf-3); } .figura-carta.g4 { --c: var(--graf-4); }
.figura-carta[hidden] { display: none; }
.figura-carta header { display: grid; grid-template-columns: auto 1fr; column-gap: .6rem; align-items: center; }
.figura-carta .figura-emoji { grid-row: span 2; font-size: 1.9rem; line-height: 1; }
.figura-carta h2 { margin: 0; font-size: 1.2rem; }
.figura-carta .figura-familia { font-size: .78rem; color: var(--texto-3); letter-spacing: .02em; }
.figura-carta .figura-definicion { margin: .6rem 0 .4rem; }
.figura-carta details summary { cursor: pointer; color: var(--cian); font-size: .92rem; padding: .2rem 0; }
.figura-carta details[open] summary { margin-bottom: .2rem; }
.figura-carta details p { margin: .2rem 0 .3rem; font-size: .95rem; }
.figura-carta .dicho { color: var(--texto); }
@media (max-width: 640px) {
  .juego-figuras { padding: .8rem .9rem; }
  .juego-verso { font-size: 1.05rem; }
}
/* ------------------------------------------------------------ agradecimientos (8 de noviembre de 2026) */
.lista-inicio .ico-agradecimientos a::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20.5 3.6 12.4A5 5 0 0 1 12 6.1a5 5 0 0 1 8.4 6.3z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20.5 3.6 12.4A5 5 0 0 1 12 6.1a5 5 0 0 1 8.4 6.3z'/%3E%3C/svg%3E") center / contain no-repeat; }
.agradecimientos .lista-gracias { list-style: none; padding: 0; margin: 1rem 0 1.2rem; columns: 2 16rem; column-gap: 2rem; }
.agradecimientos .lista-gracias li { break-inside: avoid; padding: .35rem 0 .35rem 1.4rem; position: relative; }
.agradecimientos .lista-gracias li::before { content: "♪"; position: absolute; left: 0; color: var(--cian); }
.agradecimientos .firma { text-align: right; font-family: var(--garamond); font-size: 1.15rem; margin-top: 1.4rem; }

/* Navegador marcado con ?no-contar (9 de noviembre de 2026): el aviso va en una línea propia, debajo del número. */
.contador .sin-sumar { flex-basis: 100%; text-align: center; font-size: .8rem; color: var(--texto-2); }

/* DOCUMENTALES y LIBROS, un anexo con dos partes (9 de noviembre de 2026): la cabecera de cada parte, entre el título
   del anexo y los apartados. */
.titulo-parte { font-family: var(--garamond); font-variant: small-caps; font-size: clamp(1.6rem, 3vw, 2rem);
  font-weight: 600; letter-spacing: .03em; line-height: 1.2; color: var(--cian); margin: 2.6rem 0 1rem;
  padding-bottom: .4rem; border-bottom: 1px solid var(--marco); }
.raya + .titulo-parte { margin-top: .4rem; }