/*
 * Me Gusta La Papelería · tema «Cuaderno»
 * Papel crema, tinta azul-negra, rojo de la marca y amarillo de lápiz como subrayador.
 * Gestos: hojas con renglones y margen rojo, fichas de índice, cinta adhesiva sobre las fotos,
 * regla milimetrada para el archivo y pie de cartón kraft. Gelasio (lectura) + Mulish (interfaz).
 */

:root {
  --papel: #f8f4ec;
  --papel-2: #f0e9da;
  --hoja: #fffdf8;
  --tinta: #1d2230;
  --tinta-2: #353a47;
  --tenue: #6a6457;
  --rojo: #c8262c;
  --rojo-osc: #a51f24;
  --lapiz: #f2b632;
  --subrayado: #f9dc7a;
  --renglon: #c9daf0;
  --margen-rojo: #eaa3a3;
  --kraft: #dccaa6;
  --kraft-2: #cdb78d;
  --linea: #e1d8c6;
  --sombra: 0 1px 2px rgba(29, 34, 48, .06), 0 10px 26px -14px rgba(29, 34, 48, .3);
  --margen: clamp(1rem, 4vw, 2.5rem);
  --ancho: 74rem;
  --bloque: clamp(3rem, 7vw, 5.5rem);
  --f-texto: "Gelasio", Georgia, "Times New Roman", serif;
  --f-ui: "Mulish", "Segoe UI", system-ui, sans-serif;

  --ancho-texto: 42rem;
  --ancho-amplio: 42rem;
  --hueco: 1.25rem;
  --radio: 4px;
  --color-texto: var(--tinta-2);
  --color-fondo: var(--hoja);
  --color-suave: var(--papel-2);
  --color-borde: var(--linea);
  --color-acento: var(--rojo);
  --color-acento-texto: #fff;
  --color-tenue: var(--tenue);
  --fuente-texto: var(--f-texto);
  --fuente-titulos: var(--f-texto);
}

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 1.5rem; }
body { margin: 0; font-variant-numeric: lining-nums; background: var(--papel); color: var(--tinta-2); font: 400 1.0625rem/1.65 var(--f-texto); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--f-texto); color: var(--tinta); font-weight: 700; line-height: 1.15; text-wrap: balance; margin: 0; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
main { display: block; outline: none; }
.icono { width: 1.1em; height: 1.1em; flex: none; vertical-align: -.15em; }
:focus-visible { outline: 3px solid var(--lapiz); outline-offset: 2px; border-radius: 2px; }
::selection { background: var(--subrayado); color: var(--tinta); }
.envoltorio { width: min(100% - 2 * var(--margen), var(--ancho)); margin-inline: auto; }
.saltar { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--tinta); color: #fff; padding: .7rem 1rem; font: 700 .9rem var(--f-ui); text-decoration: none; }
.saltar:focus { top: 1rem; }
.x-oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* subrayador amarillo (gesto principal) */
.seccion-etiqueta { margin: 0 0 .6rem; font: 800 .72rem/1.3 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; }
.seccion-etiqueta a, .seccion-etiqueta span { color: var(--rojo-osc); text-decoration: none; background: linear-gradient(transparent 52%, var(--subrayado) 52%, var(--subrayado) 92%, transparent 92%); padding: 0 .15em; }
.seccion-etiqueta a:hover { color: var(--tinta); }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1rem; margin: 0; font: 600 .82rem/1.4 var(--f-ui); color: var(--tenue); }
.meta span { display: inline-flex; align-items: center; gap: .3rem; }
.meta-comentarios { display: inline-flex; align-items: center; gap: .3rem; color: var(--rojo-osc); text-decoration: none; }
.meta-comentarios:hover { text-decoration: underline; }
.enlace { display: inline-flex; align-items: center; gap: .4rem; font: 800 .85rem/1.2 var(--f-ui); letter-spacing: .04em; color: var(--rojo-osc); text-decoration: none; padding-block: .5rem; }
.enlace:hover { text-decoration: underline; text-underline-offset: .25em; }
.enlace .icono { transition: transform .2s ease; }
.enlace:hover .icono { transform: translateX(3px); }
.boton, .contenido .boton, .x-contacto .boton {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 2.9rem; padding: .7rem 1.3rem; border: 2px solid var(--tinta); border-radius: 3px;
  background: var(--tinta); color: var(--papel); font: 800 .9rem/1.1 var(--f-ui); letter-spacing: .03em; text-decoration: none; cursor: pointer;
  box-shadow: 3px 3px 0 var(--rojo); transition: transform .15s ease, box-shadow .15s ease;
}
.boton:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--rojo); }
.boton-icono { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 0; border-radius: 50%; background: transparent; color: var(--tinta); cursor: pointer; text-decoration: none; }
.boton-icono .icono { width: 1.35rem; height: 1.35rem; }
.boton-icono:hover { background: var(--papel-2); }

/* rótulo de sección: letras de cuaderno + raya */
.rotulo { display: flex; align-items: center; gap: 1rem; margin: 0 0 1.75rem; font: 800 .8rem/1 var(--f-ui); letter-spacing: .18em; text-transform: uppercase; color: var(--rojo); }
.rotulo::after { content: ""; flex: 1; height: 0; border-top: 1px solid var(--tinta); box-shadow: 0 3px 0 -2px var(--tinta); padding-top: 2px; border-bottom: 1px solid var(--tinta); }
.rotulo small { font: inherit; color: var(--tenue); margin-left: .35rem; }

/* ------------------------------------------------------------------ cabecera */
.cabecera { background: var(--papel); }
.cabecera-fila { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1rem; padding-block: 1.1rem .9rem; }
.marca { margin: 0; font: 400 1rem/1 var(--f-ui); }
.marca a { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: .1em .45em; text-decoration: none; color: var(--tinta); }
.marca-pre { font: 300 clamp(1.25rem, 1rem + 1vw, 1.75rem)/1 var(--f-ui); color: var(--rojo); letter-spacing: -.01em; }
.marca-principal { position: relative; font: 800 clamp(1.45rem, 1.1rem + 1.4vw, 2.15rem)/1 var(--f-ui); color: var(--rojo); text-transform: uppercase; letter-spacing: .01em; padding-bottom: .45em; }
.marca-lapiz { position: absolute; left: -.1em; right: -.6em; bottom: 0; width: calc(100% + .7em); height: .32em; }
.lema { display: none; margin: 0; font: italic 400 1.05rem/1.3 var(--f-texto); color: var(--tenue); }
.cabecera-acciones { display: flex; gap: .25rem; }
.navegacion { border-block: 1px solid var(--tinta); box-shadow: 0 3px 0 -2px var(--tinta); margin-bottom: 4px; }
.menu { list-style: none; margin: 0; padding: 0; }
.menu a { text-decoration: none; }
@media (min-width: 60rem) {
  .cabecera-fila { grid-template-columns: auto 1fr auto; gap: 2rem; }
  .lema { display: block; text-align: center; }
  .menu-boton { display: none; }
  .menu { display: flex; flex-wrap: wrap; justify-content: center; gap: .1rem 1.4rem; }
  .menu a { display: inline-block; padding: .8rem .1rem; font: 800 .78rem/1 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--tinta); }
  .menu a:hover, .menu a[aria-current] { background: linear-gradient(transparent 62%, var(--subrayado) 62%, var(--subrayado) 88%, transparent 88%); }
  .cabecera-portada .cabecera-fila { padding-block: 2.2rem 1.6rem; }
  .cabecera-portada .marca-pre { font-size: clamp(1.6rem, 1rem + 2vw, 2.6rem); }
  .cabecera-portada .marca-principal { font-size: clamp(2rem, 1.2rem + 2.6vw, 3.4rem); }
}
@media (max-width: 59.99rem) {
  .navegacion { display: none; }
  .navegacion.abierto { display: block; }
  .menu { padding-block: .5rem; }
  .menu a { display: flex; align-items: center; min-height: 2.9rem; padding: .3rem 0; font: 700 1.05rem/1.2 var(--f-ui); color: var(--tinta); border-bottom: 1px dashed var(--linea); }
  .menu li:last-child a { border-bottom: 0; }
  .menu a[aria-current] { color: var(--rojo-osc); }
}
.menu-boton .icono-cerrar { display: none; }
.menu-boton[aria-expanded="true"] .icono-abrir { display: none; }
.menu-boton[aria-expanded="true"] .icono-cerrar { display: block; }

/* ------------------------------------------------------------------ portada */
.presentacion { border-bottom: 1px solid var(--linea); background:
  linear-gradient(90deg, transparent calc(var(--margen) + 1.6rem), var(--margen-rojo) calc(var(--margen) + 1.6rem), var(--margen-rojo) calc(var(--margen) + 1.6rem + 1px), transparent calc(var(--margen) + 1.6rem + 1px)),
  repeating-linear-gradient(transparent 0 calc(2rem - 1px), var(--renglon) calc(2rem - 1px) 2rem),
  var(--hoja); }
.presentacion-fila { display: grid; gap: 1.5rem 3rem; align-items: center; padding-block: 2rem; padding-left: 2.6rem; }
@media (min-width: 52rem) { .presentacion-fila { grid-template-columns: 1fr auto; } }
.presentacion-cita { margin: 0; }
.presentacion-cita p { margin: 0 0 .2rem; font: italic 400 clamp(1.3rem, 1rem + 1.2vw, 1.85rem)/1.35 var(--f-texto); color: var(--tinta); }
.cifras { display: flex; gap: 2rem; margin: 0; }
.cifras div { display: flex; flex-direction: column-reverse; }
.cifras dt { font: 800 .7rem/1 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--tenue); margin-top: .4rem; }
.cifras dd { margin: 0; font: 700 clamp(1.8rem, 1.3rem + 1.6vw, 2.6rem)/1 var(--f-texto); color: var(--rojo); font-variant-numeric: lining-nums tabular-nums; }

.bloque { padding-block: var(--bloque) 0; }
.bloque:last-child { padding-bottom: var(--bloque); }

.ultimo-rejilla { display: grid; gap: 2.5rem 3.5rem; }
@media (min-width: 60rem) { .ultimo-rejilla { grid-template-columns: 1.35fr 1fr; } }
.destacada-imagen { position: relative; display: block; margin-bottom: 1.4rem; padding: .6rem; background: #fff; box-shadow: var(--sombra); transform: rotate(-.6deg); transition: transform .25s ease; }
.destacada-imagen::before { content: ""; position: absolute; z-index: 1; top: -.8rem; left: 50%; width: 7rem; height: 1.6rem; margin-left: -3.5rem; background: rgba(242, 182, 50, .55); transform: rotate(-3deg); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.destacada-imagen:hover { transform: rotate(0); }
.destacada-imagen img { display: block; width: 100%; }
.destacada-titulo { font-size: clamp(1.8rem, 1.2rem + 2vw, 2.75rem); line-height: 1.08; margin-bottom: .8rem; }
.destacada-titulo a, .fila-titulo a, .ficha a, .lista-comentadas a { text-decoration: none; }
.destacada-titulo a:hover, .fila-titulo a:hover { background: linear-gradient(transparent 60%, var(--subrayado) 60%, var(--subrayado) 92%, transparent 92%); }
.destacada-extracto { font-size: 1.15rem; line-height: 1.6; color: var(--tinta-2); }
.ultimo-lista .fila:first-child { padding-top: 0; }

/* filas de listado */
.filas { display: grid; }
.fila { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem 1.5rem; padding-block: 1.5rem; border-bottom: 1px solid var(--linea); }
.fila:has(.fila-imagen) { grid-template-columns: 7.5rem minmax(0, 1fr); }
@media (min-width: 48rem) { .filas .fila:has(.fila-imagen) { grid-template-columns: 12rem minmax(0, 1fr); } .ultimo-lista .fila:has(.fila-imagen) { grid-template-columns: 7.5rem minmax(0, 1fr); } }
.fila-imagen { display: block; align-self: start; padding: .3rem; background: #fff; box-shadow: var(--sombra); }
.fila-imagen img { display: block; width: 100%; }
.fila-titulo { font-size: clamp(1.2rem, 1.05rem + .5vw, 1.45rem); margin-bottom: .45rem; }
h2.fila-titulo { font-size: clamp(1.3rem, 1.1rem + .7vw, 1.65rem); }
.fila-extracto { font-size: 1rem; line-height: 1.55; color: var(--tinta-2); margin-bottom: .6rem; }
.ultimo-lista .fila-extracto { display: none; }

/* lo más comentado */
.comentadas { margin-top: var(--bloque); padding-bottom: var(--bloque); background: var(--papel-2); border-block: 1px solid var(--linea); }
.comentadas-rejilla { display: grid; gap: 1.5rem 4rem; }
@media (min-width: 60rem) { .comentadas-rejilla { grid-template-columns: 1fr 2fr; } }
.rotulo-solo::after { display: none; }
.comentadas-intro { font: italic 400 1.25rem/1.45 var(--f-texto); color: var(--tinta-2); max-width: 22rem; }
.lista-comentadas { list-style: none; margin: 0; padding: 0; }
.lista-comentadas a { display: grid; grid-template-columns: 3rem 1fr auto; align-items: baseline; gap: 1rem; padding: 1rem 0; border-bottom: 1px dashed var(--kraft-2); }
.lista-comentadas li:first-child a { padding-top: 0; }
.lista-comentadas-pos { font: italic 700 2.4rem/1 var(--f-texto); color: var(--rojo); }
.lista-comentadas-titulo { font: 700 clamp(1.15rem, 1rem + .5vw, 1.4rem)/1.25 var(--f-texto); color: var(--tinta); }
.lista-comentadas a:hover .lista-comentadas-titulo { text-decoration: underline; text-decoration-color: var(--lapiz); text-decoration-thickness: 3px; text-underline-offset: .15em; }
.num-comentarios { display: inline-flex; align-items: center; gap: .3rem; font: 800 .85rem/1 var(--f-ui); color: var(--rojo-osc); white-space: nowrap; }
.lista-comentadas-mini a { grid-template-columns: 2.2rem 1fr; gap: .6rem; padding: .7rem 0; align-items: start; }
.lista-comentadas-mini .num-comentarios { display: grid; place-items: center; width: 2.2rem; height: 1.7rem; border-radius: 3px; background: var(--hoja); border: 1px solid var(--linea); font-size: .75rem; }
.lista-comentadas-mini a > span:last-child { font: 700 .98rem/1.3 var(--f-texto); color: var(--tinta); }
.lista-comentadas-mini a:hover > span:last-child { text-decoration: underline; text-decoration-color: var(--lapiz); }

/* estanterías con fichas de índice */
.estanterias-rejilla { display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
.estante { display: flex; flex-direction: column; gap: .9rem; }
.estante-titulo { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; font-size: 1.45rem; padding-bottom: .5rem; border-bottom: 2px solid var(--tinta); }
.estante-titulo a { text-decoration: none; }
.estante-titulo a::first-letter { text-transform: uppercase; }
.estante-titulo span { font: 800 .8rem/1 var(--f-ui); color: var(--tenue); }
.estante .enlace { align-self: flex-start; }
.ficha a { position: relative; display: block; padding: 1rem 1.1rem .75rem; color: inherit; background: var(--hoja); box-shadow: var(--sombra); transition: transform .2s ease, box-shadow .2s ease; }
.ficha a:hover { transform: translateY(-2px) rotate(-.4deg); box-shadow: 0 2px 4px rgba(29, 34, 48, .08), 0 16px 30px -16px rgba(29, 34, 48, .4); }
.ficha-titulo { font-size: 1.08rem; line-height: 1.3; padding-bottom: .65rem; margin-bottom: 0; border-bottom: 1px solid rgba(200, 38, 44, .6); }
.ficha a:hover .ficha-titulo { color: var(--rojo-osc); }
.ficha-renglones { display: block; padding-top: .1rem; background: repeating-linear-gradient(transparent 0 calc(1.6rem - 1px), var(--renglon) calc(1.6rem - 1px) 1.6rem); background-position: 0 .1rem; }
.ficha-texto { display: block; font-size: .95rem; line-height: 1.6rem; color: var(--tinta-2); }
.ficha time { display: block; font: 700 .72rem/1.6rem var(--f-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--tenue); }

/* más entradas + lateral */
.mas-rejilla, .listado-rejilla, .entrada-rejilla { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3rem 4rem; }
@media (min-width: 64rem) {
  .mas-rejilla, .listado-rejilla, .entrada-rejilla { grid-template-columns: minmax(0, 1fr) 17.5rem; }
}
.mas-enlace { margin-top: 2rem; }

.lateral { display: grid; gap: 2.25rem; align-content: start; }
.lateral-bloque h2 { font: 800 .75rem/1 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--rojo); padding-bottom: .7rem; margin-bottom: .6rem; border-bottom: 2px solid var(--tinta); }
.lateral-sobre p { font: italic 400 1.05rem/1.5 var(--f-texto); margin-bottom: .4rem; }
.lateral-etiqueta { font: 700 .68rem/1 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--tenue); margin-bottom: .5rem; }
.lateral-banner img { display: block; width: 100%; max-width: 16rem; box-shadow: var(--sombra); }
.lateral-categorias, .pie-categorias { list-style: none; margin: 0; padding: 0; }
.lateral-categorias li { display: flex; justify-content: space-between; gap: .5rem; border-bottom: 1px dashed var(--linea); }
.lateral-categorias a { display: block; padding: .5rem 0; font: 600 .95rem/1.3 var(--f-ui); text-decoration: none; }
.lateral-categorias a::first-letter { text-transform: uppercase; }
.lateral-categorias a:hover { color: var(--rojo-osc); }
.lateral-categorias span { font: 700 .78rem/2.3 var(--f-ui); color: var(--tenue); }

/* archivo: regla milimetrada */
.regla { list-style: none; margin: 0; padding: 0 0 2.6rem; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(2.6rem, 1fr); height: 13rem; position: relative; overflow-x: auto; overflow-y: hidden;
  background:
    repeating-linear-gradient(90deg, var(--tinta) 0 1px, transparent 1px 10px) left calc(100% - 2.6rem) / 100% .45rem no-repeat,
    repeating-linear-gradient(90deg, var(--tinta) 0 1px, transparent 1px 50px) left calc(100% - 2.6rem) / 100% .85rem no-repeat,
    linear-gradient(var(--lapiz), var(--lapiz)) left calc(100% - 2.6rem) / 100% 1px no-repeat; }
.regla li { position: relative; }
.regla a { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; text-decoration: none; }
.regla-barra { width: 52%; height: calc(var(--h) * .72); min-height: 3px; background: var(--rojo); border-radius: 2px 2px 0 0; transition: background-color .2s ease; }
.regla a:hover .regla-barra { background: var(--lapiz); }
.regla-n { order: -1; font: 800 .75rem/1 var(--f-ui); color: var(--tinta); margin-bottom: .35rem; }
.regla-anio { position: absolute; bottom: -2.2rem; font: 700 .8rem/1 var(--f-ui); color: var(--tenue); }
.regla a:hover .regla-anio { color: var(--rojo-osc); }

/* nube de etiquetas */
.nube { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.nube a { display: inline-flex; align-items: baseline; gap: .35rem; min-height: 2.5rem; align-items: center; padding: .35rem .85rem .35rem 1.15rem; position: relative; background: var(--hoja); border: 1px solid var(--linea); border-radius: 2px 999px 999px 2px; text-decoration: none; font: 600 .92rem/1.2 var(--f-ui); color: var(--tinta); }
.nube a::before { content: ""; position: absolute; left: .45rem; top: 50%; width: .32rem; height: .32rem; margin-top: -.16rem; border-radius: 50%; background: var(--papel); box-shadow: inset 0 0 0 1px var(--kraft-2); }
.nube a span { font-size: .72rem; color: var(--tenue); font-weight: 800; }
.nube a:hover { border-color: var(--rojo); color: var(--rojo-osc); }
.nube .peso-2 a { font-size: 1rem; } .nube .peso-3 a { font-size: 1.1rem; } .nube .peso-4 a { font-size: 1.22rem; font-weight: 800; }

/* ------------------------------------------------------------------ entrada */
.entrada-cabecera { border-bottom: 1px solid var(--linea); background:
  repeating-linear-gradient(transparent 0 calc(2rem - 1px), var(--renglon) calc(2rem - 1px) 2rem); background-color: var(--papel); }
.entrada-cabecera-texto { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(2rem, 4vw, 3rem); }
.entrada-cabecera h1 { font-size: clamp(2.1rem, 1.3rem + 3vw, 3.6rem); line-height: 1.06; max-width: 22ch; margin-bottom: 1.1rem; }
.entrada-rejilla { padding-block: clamp(2rem, 5vw, 3.5rem) var(--bloque); }
.entrada-imagen { margin: 0 0 2rem; padding: .6rem; background: #fff; box-shadow: var(--sombra); position: relative; }
.entrada-imagen::before { content: ""; position: absolute; top: -.75rem; right: 2rem; width: 6rem; height: 1.5rem; background: rgba(242, 182, 50, .55); transform: rotate(4deg); }
.entrada-imagen img { display: block; width: 100%; }
.hoja { position: relative; background: var(--hoja); padding: clamp(1.5rem, 4vw, 2.75rem) clamp(1.25rem, 4vw, 3rem) clamp(1.5rem, 4vw, 2.5rem) clamp(2.25rem, 6vw, 4.5rem); box-shadow: var(--sombra); }
.hoja::before { content: ""; position: absolute; top: 0; bottom: 0; left: clamp(1.4rem, 4vw, 3rem); width: 1px; background: var(--margen-rojo); box-shadow: 3px 0 0 -2px var(--margen-rojo), 3px 0 0 0 var(--margen-rojo); }
.entrada .contenido { font-size: 1.125rem; line-height: 1.75; }
.contenido > * { max-width: none; }
.contenido h2 { font-size: clamp(1.45rem, 1.2rem + .9vw, 1.85rem); margin: 1.8em 0 .55em; }
.contenido h3 { font-size: 1.35rem; margin: 1.6em 0 .5em; }
.contenido h4 { font-size: 1.15rem; margin: 1.5em 0 .4em; }
.contenido a { color: var(--rojo-osc); text-decoration-color: rgba(165, 31, 36, .4); }
.contenido a:hover { text-decoration-color: currentColor; background: linear-gradient(transparent 62%, var(--subrayado) 62%); }
.contenido strong { color: var(--tinta); }
.contenido blockquote { border-left: 3px solid var(--lapiz); font-style: italic; padding-left: 1.25rem; }
.contenido figure.imagen img, .contenido p > img { border-radius: 0; }
.contenido figure.imagen { margin-inline: 0; }
.contenido figure.imagen:not(.alignleft):not(.alignright) img { margin-inline: auto; }
.contenido figure.imagen img { box-shadow: 0 0 0 .4rem #fff, var(--sombra); }
.contenido figcaption { font: italic 400 .9rem/1.4 var(--f-texto); color: var(--tenue); margin-top: .9rem; }
.contenido .galeria { gap: .75rem; }
.contenido .galeria img { border-radius: 0; box-shadow: 0 0 0 .3rem #fff, var(--sombra); }
.contenido hr { border-top: 1px dashed var(--kraft-2); }
.contenido ul li::marker { color: var(--rojo); }
.contenido figure.video iframe { border-radius: 0; box-shadow: var(--sombra); }
/* tablas de datos y de maquetación */
.contenido figure.tabla { margin-inline: 0; overflow-x: auto; }
.contenido table { font: 400 .98rem/1.45 var(--f-ui); background: #fff; }
.contenido th { font: 800 .74rem/1.3 var(--f-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--rojo-osc); background: var(--papel-2); border-bottom: 2px solid var(--tinta); }
.contenido td { border-bottom: 1px solid var(--renglon); font-variant-numeric: tabular-nums; }
.contenido tr:nth-child(even) td { background: #fcfaf5; }
.contenido .tabla-maqueta table { font: inherit; background: none; }
.contenido .tabla-maqueta td { border: 0; background: none !important; padding: .4em .6em; }
.contenido .tabla-maqueta td p:last-child { margin-bottom: 0; }

.etiquetas { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: 2rem 0 0; padding: 0; }
.etiquetas a { display: inline-flex; align-items: center; min-height: 2.5rem; padding: .35rem .85rem .35rem 1.15rem; position: relative; background: var(--hoja); border: 1px solid var(--linea); border-radius: 2px 999px 999px 2px; text-decoration: none; font: 600 .88rem/1.2 var(--f-ui); }
.etiquetas a::before { content: ""; position: absolute; left: .45rem; top: 50%; width: .32rem; height: .32rem; margin-top: -.16rem; border-radius: 50%; background: var(--papel); box-shadow: inset 0 0 0 1px var(--kraft-2); }
.etiquetas a:hover { border-color: var(--rojo); color: var(--rojo-osc); }

.vecinas { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); margin-top: 2.5rem; }
.vecina { display: block; padding: 1rem 1.2rem; border: 1px solid var(--linea); background: var(--hoja); text-decoration: none; font: 700 1.05rem/1.3 var(--f-texto); color: var(--tinta); }
.vecina small { display: flex; align-items: center; gap: .35rem; margin-bottom: .4rem; font: 800 .7rem/1 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--rojo); }
.vecina-sig { text-align: right; }
.vecina-sig small { justify-content: flex-end; }
.vecina:hover { border-color: var(--tinta); }

/* comentarios: notas en papel; las respuestas del papelero, en pósit */
.comentarios { margin-top: 3.5rem; }
.comentarios-lista, .comentarios-respuestas { list-style: none; margin: 0; padding: 0; }
.comentario > article { background: var(--hoja); padding: 1.1rem 1.25rem 1.2rem; margin-bottom: 1rem; box-shadow: 0 1px 0 var(--linea); border: 1px solid var(--linea); }
.comentarios-respuestas { margin-left: clamp(1rem, 4vw, 2.5rem); padding-left: clamp(.75rem, 2vw, 1.25rem); border-left: 2px dashed var(--kraft-2); }
.comentario-autor > article { background: #fdf3c4; border-color: #f0dc8a; transform: rotate(-.25deg); box-shadow: 2px 3px 0 rgba(29, 34, 48, .06); }
.comentario-cabecera { display: flex; align-items: center; gap: .75rem; margin-bottom: .6rem; }
.comentario-inicial { display: grid; place-items: center; flex: none; width: 2.3rem; height: 2.3rem; border-radius: 50%; background: var(--papel-2); color: var(--rojo-osc); font: 800 1rem/1 var(--f-ui); }
.comentario-autor .comentario-inicial { background: var(--rojo); color: #fff; }
.comentario-quien { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .6rem; font: 400 .95rem/1.3 var(--f-ui); }
.comentario-quien strong { font-weight: 800; color: var(--tinta); overflow-wrap: anywhere; }
.distintivo { font: 800 .65rem/1 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: #fff; background: var(--rojo); padding: .3rem .45rem; border-radius: 2px; }
.comentario-fecha { font-size: .8rem; color: var(--tenue); text-decoration: none; }
.comentario-fecha:hover { text-decoration: underline; }
.comentario-texto { font-size: 1.02rem; line-height: 1.6; overflow-wrap: anywhere; }
.comentario-texto p:last-child { margin-bottom: 0; }
.comentario-texto a { color: var(--rojo-osc); }

.relacionadas { padding-bottom: var(--bloque); }
.relacionadas-rejilla { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }

/* ------------------------------------------------------------------ listados y búsqueda */
.listado-cabecera { border-bottom: 1px solid var(--linea); background: repeating-linear-gradient(transparent 0 calc(2rem - 1px), var(--renglon) calc(2rem - 1px) 2rem); }
.listado-cabecera .envoltorio { padding-block: clamp(2.5rem, 6vw, 4rem) clamp(1.75rem, 4vw, 2.5rem); }
.listado-cabecera h1 { font-size: clamp(2.2rem, 1.4rem + 3vw, 3.6rem); margin-bottom: .75rem; }
.listado-cabecera h1::first-letter { text-transform: uppercase; }
.listado-desc { font: italic 400 1.15rem/1.5 var(--f-texto); max-width: 40rem; }
.listado-rejilla { padding-block: clamp(1.5rem, 4vw, 2.5rem) var(--bloque); }
.vacio { font: italic 400 1.15rem/1.5 var(--f-texto); color: var(--tinta-2); margin: 1.5rem 0 2rem; }
.x-buscador { display: flex; gap: .5rem; max-width: 34rem; margin-block: 1.25rem; }
.x-buscador input { min-height: 2.9rem; padding: .6rem 1rem; border: 1px solid var(--tinta); border-radius: 3px; background: var(--hoja); font: 400 1rem var(--f-ui); color: var(--tinta); }
.x-buscador input:focus { outline: 3px solid var(--lapiz); outline-offset: 0; }
.x-buscador button { min-height: 2.9rem; border-radius: 3px; background: var(--tinta); border-color: var(--tinta); color: var(--papel); font: 800 .9rem var(--f-ui); box-shadow: 3px 3px 0 var(--rojo); }
.paginacion { font-family: var(--f-ui); font-weight: 700; }
.paginacion a, .paginacion span[aria-current] { min-width: 2.75rem; min-height: 2.75rem; display: inline-grid; place-items: center; border-radius: 3px; background: var(--hoja); border-color: var(--linea); }
.paginacion a:hover { border-color: var(--tinta); }
.paginacion span[aria-current] { background: var(--tinta); border-color: var(--tinta); color: var(--papel); }

/* ------------------------------------------------------------------ 404: hoja arrancada */
.error-404 { padding-block: clamp(3rem, 8vw, 6rem); }
.hoja-arrancada { position: relative; max-width: 40rem; margin-inline: auto; padding: 3.5rem clamp(1.5rem, 5vw, 3rem) 2.5rem clamp(2.5rem, 7vw, 4.5rem); box-shadow: var(--sombra); transform: rotate(-1deg);
  background:
    linear-gradient(90deg, transparent clamp(1.6rem, 5vw, 3rem), var(--margen-rojo) clamp(1.6rem, 5vw, 3rem), var(--margen-rojo) calc(clamp(1.6rem, 5vw, 3rem) + 1px), transparent calc(clamp(1.6rem, 5vw, 3rem) + 1px)),
    repeating-linear-gradient(var(--hoja) 0 calc(2rem - 1px), var(--renglon) calc(2rem - 1px) 2rem);
  clip-path: polygon(0 1.2rem, 4% 0, 8% .9rem, 12% .2rem, 17% 1rem, 22% .1rem, 27% .8rem, 31% .3rem, 36% 1.1rem, 41% .2rem, 46% .9rem, 50% 0, 55% 1rem, 60% .3rem, 64% .9rem, 69% .1rem, 74% 1rem, 79% .2rem, 84% .8rem, 89% 0, 94% 1rem, 100% .3rem, 100% 100%, 0 100%); }
.error-codigo { margin: 0; font: italic 700 clamp(4rem, 12vw, 7rem)/1 var(--f-texto); color: var(--rojo); }
.hoja-arrancada h1 { font-size: clamp(1.8rem, 1.2rem + 2vw, 2.6rem); margin: .5rem 0 1rem; }
.error-acciones { margin-top: 1.5rem; }

/* ------------------------------------------------------------------ pie de cartón kraft */
.pie { margin-top: 0; background: var(--kraft); color: var(--tinta); background-image: radial-gradient(rgba(120, 90, 40, .12) 1px, transparent 1.2px); background-size: 7px 7px; }
.pie-lapiz { height: 16px; transform: translateY(-50%); }
.pie-lapiz .lapiz { display: block; width: min(100%, 26rem); height: 16px; }
.pie-rejilla { display: grid; gap: 2.5rem 3rem; padding-block: 2.5rem 2rem; }
@media (min-width: 56rem) { .pie-rejilla { grid-template-columns: 1.4fr 1.2fr .8fr; } }
.marca-pie a { gap: .35em; }
.marca-pie .marca-pre { font-size: 1.3rem; }
.marca-pie .marca-principal { font-size: 1.55rem; padding: 0; }
.pie-marca p:not(.marca) { font: italic 400 1.02rem/1.55 var(--f-texto); max-width: 30rem; margin-top: 1rem; }
.pie h2 { font: 800 .75rem/1 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; margin-bottom: 1rem; color: var(--tinta); }
.pie a { text-decoration: none; }
.pie a:hover { text-decoration: underline; text-decoration-color: var(--rojo); text-underline-offset: .2em; }
.pie-categorias { columns: 2; column-gap: 1.5rem; }
.pie-categorias li { break-inside: avoid; display: flex; justify-content: space-between; gap: .5rem; font: 600 .92rem/1.2 var(--f-ui); }
.pie-categorias a { display: block; padding: .38rem 0; }
.pie-categorias span { font-size: .75rem; color: #5b5240; padding-top: .45rem; }
.menu-pie { list-style: none; margin: 0 0 .5rem; padding: 0; font: 600 .95rem/1.2 var(--f-ui); }
.menu-pie a { display: inline-block; padding: .4rem 0; }
.pie .x-buscador input { background: #f6eedd; }
.pie-base { margin: 0; padding-block: 1.2rem 1.6rem; border-top: 1px solid var(--kraft-2); font: 600 .82rem/1.4 var(--f-ui); color: #4c4433; }

/* ------------------------------------------------------------------ móvil fino */
@media (max-width: 40rem) {
  .presentacion-fila { padding-left: 2.2rem; }
  .cifras { gap: 1.5rem; }
  .lista-comentadas:not(.lista-comentadas-mini) a { grid-template-columns: 2.2rem 1fr; }
  .lista-comentadas:not(.lista-comentadas-mini) .num-comentarios { grid-column: 2; }
  .lista-comentadas-pos { font-size: 1.9rem; }
  .entrada .contenido { font-size: 1.06rem; }
  .x-buscador { flex-wrap: wrap; }
  .x-buscador label { flex: 1 1 12rem; }
  .fila-extracto { display: none; }
  h2.fila-titulo, .fila-titulo { font-size: 1.15rem; }
}

@media (prefers-reduced-motion: reduce) { .destacada-imagen, .ficha a, .hoja-arrancada { transform: none !important; } }

@media print {
  .cabecera .navegacion, .cabecera-acciones, .lateral, .pie, .vecinas, .relacionadas, .x-buscador { display: none !important; }
  body, .hoja, .entrada-cabecera { background: #fff !important; box-shadow: none; }
  .hoja::before { display: none; }
  .entrada-rejilla { display: block; }
}
.img-rota { display: none !important; }
.entrada-cuerpo, .hoja { min-width: 0; }
h1, h2, h3, .fila-titulo, .ficha-titulo { overflow-wrap: break-word; }
.entrada-cabecera h1, .listado-cabecera h1 { overflow-wrap: anywhere; }
.contenido figure.tabla { max-width: 100%; }

/* casilla de privacidad: el enlace del motor partía la etiqueta flexible en columnas */
.x-contacto .x-acepto label { display: block; position: relative; padding-left: 1.9rem; }
.x-contacto .x-acepto input { position: absolute; left: 0; top: .2em; margin: 0; }

/* ------------------------------------------------------------------ afinado */
/* vídeos (botón del motor): pantalla de televisor antigua sobre la hoja */
.contenido figure.video { margin-inline: 0; }
.contenido .x-video { border-radius: 2px; background: radial-gradient(120% 90% at 50% 40%, #3a3f4b, #1d2230 70%); box-shadow: 0 0 0 .4rem #fff, var(--sombra); }
.contenido .x-video::before { background: repeating-linear-gradient(transparent 0 3px, rgba(255, 255, 255, .03) 3px 4px); opacity: 1; }
.contenido .x-video .x-video-icono { color: var(--rojo); }
.contenido .x-video-texto { font-family: var(--f-ui); font-weight: 800; letter-spacing: .03em; }
.contenido .x-video-texto small { font-weight: 600; letter-spacing: 0; }
.contenido .x-video:focus-visible { outline: 3px solid var(--lapiz); outline-offset: .6rem; }
.contenido figure.video iframe { box-shadow: 0 0 0 .4rem #fff, var(--sombra); }
.boton:active, .x-buscador button:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--rojo); }
.ficha a:focus-visible, .lista-comentadas a:focus-visible, .vecina:focus-visible { outline-offset: 4px; }
.destacada-extracto, .fila-extracto, .comentadas-intro, .listado-desc, .lateral-sobre p { text-wrap: pretty; }
.cifras dd, .regla-n, .num-comentarios, .estante-titulo span, .lateral-categorias span, .pie-categorias span { font-variant-numeric: tabular-nums lining-nums; }
@media (max-width: 40rem) {
  .entrada .contenido { font-size: 1.0625rem; }
  .hoja { padding: 1.4rem 1.1rem 1.4rem 2.1rem; }
  .hoja::before { left: 1.15rem; }
  .comentario-texto { font-size: 1rem; }
  .destacada-extracto { font-size: 1.0625rem; }
}

/* ------------------------------------------------------------------ ronda 2 */
/* índice de las entradas largas: una ficha con renglones */
.indice { margin: 0 0 1.75rem; padding: 1.1rem 1.4rem 1rem; background: var(--hoja); border-left: 4px solid var(--lapiz); box-shadow: var(--sombra); }
.indice h2 { font: 800 .72rem/1 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--rojo); margin: 0 0 .6rem; }
.indice ol { list-style: none; margin: 0; padding: 0; columns: 2 16rem; column-gap: 2rem; counter-reset: ind; }
.indice li { break-inside: avoid; }
.indice li.indice-nivel-2 { counter-increment: ind; }
.indice a { display: block; padding: .35rem 0; border-bottom: 1px dashed var(--linea); font: 600 .95rem/1.35 var(--f-ui); text-decoration: none; color: var(--tinta); }
.indice .indice-nivel-2 a::before { content: counter(ind) ". "; color: var(--rojo); font-variant-numeric: tabular-nums; }
.indice .indice-nivel-3 a { padding-left: 1.2rem; font-weight: 400; color: var(--tinta-2); }
.indice a:hover { background: linear-gradient(transparent 62%, var(--subrayado) 62%, var(--subrayado) 90%, transparent 90%); }
.contenido [id^="apartado-"] { scroll-margin-top: 1.5rem; }
/* 404: sugerencias */
.error-sugerencias { display: grid; gap: 2.5rem 4rem; max-width: 60rem; margin: clamp(3rem, 7vw, 4.5rem) auto 0; }
@media (min-width: 52rem) { .error-sugerencias { grid-template-columns: 1fr 1fr; } }
.error-sugerencias .nube a::first-letter { text-transform: uppercase; }
/* progreso de lectura: un lápiz que se va pintando arriba */
.progreso { display: none; }
@supports (animation-timeline: scroll()) {
  .progreso { display: block; position: fixed; z-index: 70; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--lapiz), #f7cb5f); transform-origin: 0 50%; transform: scaleX(0); animation: progreso linear both; animation-timeline: scroll(root); }
  @keyframes progreso { to { transform: scaleX(1); } }
}
@media (prefers-reduced-motion: reduce) { .progreso { display: none !important; } }
@media print { .indice, .progreso { display: none !important; } }
/* medida de lectura: unos 70 caracteres por línea; imágenes, tablas, galerías y vídeos pueden ir más anchos */
@media (min-width: 64rem) {
  .entrada .contenido.hoja > * { max-width: 38.5rem; }
  .entrada .contenido.hoja > figure, .entrada .contenido.hoja > .galeria, .entrada .contenido.hoja > .tabla, .entrada .contenido.hoja > .alignwide, .entrada .contenido.hoja > .grupo, .entrada .contenido.hoja > div { max-width: none; }
}

/* ================================================================== ronda 3: sistema y acabado */
:root {
  --t-xs: .8125rem; --t-s: .875rem; --t-m: 1rem; --t-l: 1.125rem; --t-xl: 1.375rem; --t-2xl: 1.75rem;
  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 5.5rem;
  --margen: clamp(1.25rem, 4vw, 2.5rem);
  --transicion: 180ms cubic-bezier(.2, .7, .2, 1);
  accent-color: var(--rojo);
}
html { scrollbar-color: var(--kraft-2) var(--papel); }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-thumb { background: var(--kraft-2); border-radius: 99px; border: 3px solid var(--papel); }
::-webkit-scrollbar-thumb:hover { background: var(--rojo); }
a { text-underline-offset: .2em; }
h1, h2, h3, h4 { text-wrap: balance; }
p, li, dd, blockquote { text-wrap: pretty; }
.contenido p, .contenido li, .comentario-texto, .fila-extracto, .ficha-texto { hyphens: auto; }
button, summary, label[for] { cursor: pointer; }
.boton, .enlace, .nube a, .etiquetas a, .vecina, .ficha a, .fila-titulo a, .menu a, .pie a, .boton-icono, .lateral-categorias a { transition: transform var(--transicion), box-shadow var(--transicion), background-color var(--transicion), color var(--transicion), border-color var(--transicion); }
.meta { font-size: var(--t-s); }

/* cabecera: el lema como firma de la cabecera, alineado con la marca */
@media (min-width: 60rem) {
  .cabecera-fila { grid-template-columns: auto auto 1fr; }
  .lema { text-align: left; padding-left: var(--s-5); border-left: 1px solid var(--linea); align-self: center; }
  .cabecera-acciones { justify-self: end; }
}
.navegacion-buscar { display: none; }

/* ritmo vertical común */
.bloque { padding-block: var(--s-9) 0; }
.bloque:last-child, .relacionadas { padding-bottom: var(--s-9); }
.comentadas { margin-top: var(--s-9); padding-bottom: var(--s-9); }
.rotulo { margin-bottom: var(--s-6); }

/* anuncio de la columna: una lámina pegada con cinta, como las fotos */
.lateral-banner a { position: relative; display: inline-block; padding: var(--s-2); background: #fff; box-shadow: var(--sombra); transform: rotate(.6deg); }
.lateral-banner a::before { content: ""; position: absolute; top: -.7rem; left: 50%; width: 5rem; height: 1.3rem; margin-left: -2.5rem; background: rgba(242, 182, 50, .55); transform: rotate(-2deg); }
.lateral-banner a:hover { transform: rotate(0); }
.lateral-banner img { box-shadow: none; }

/* objetivos táctiles en títulos de listado */
.fila-titulo a, .destacada-titulo a { padding-block: .12em; }

/* móvil: cabecera de 64 px, menú a pantalla completa con buscador */
@media (max-width: 59.99rem) {
  .cabecera-fila { padding-block: .5rem; min-height: 4rem; }
  .marca-pre { font-size: 1.1rem; }
  .marca-principal { font-size: 1.35rem; padding-bottom: .4em; }
  .navegacion { position: fixed; z-index: 60; inset: 4rem 0 0; margin: 0; overflow-y: auto; background: var(--papel); border-bottom: 0; box-shadow: none;
    background-image: repeating-linear-gradient(transparent 0 calc(3.25rem - 1px), var(--renglon) calc(3.25rem - 1px) 3.25rem); }
  html.menu-abierto { overflow: hidden; }
  .menu { padding-block: var(--s-2) 0; }
  .menu a { min-height: 3.25rem; font: 700 1.2rem/1.2 var(--f-texto); border-bottom: 0; }
  .navegacion-buscar { display: block; padding-block: var(--s-5) var(--s-7); }
  .navegacion-buscar .x-buscador { margin: 0; }
  .listado-cabecera .meta, .presentacion .meta { font-size: var(--t-m); }
  .meta { font-size: .9375rem; }
  .bloque { padding-block: var(--s-8) 0; }
  .bloque:last-child, .relacionadas { padding-bottom: var(--s-8); }
  .comentadas { margin-top: var(--s-8); padding-bottom: var(--s-8); }
  .fila { padding-block: var(--s-5); }
  .x-buscador button { min-width: 6rem; }
  .pie-categorias { column-gap: var(--s-4); }
  .pie-categorias a, .menu-pie a { padding-block: .55rem; }
}
@media (max-width: 59.99rem) {
  .seccion-etiqueta { font-size: .9375rem; letter-spacing: .01em; text-transform: none; font-weight: 800; }
  .etiquetas a, .nube a { font-size: .9375rem; }
}
@media (max-width: 59.99rem) { .cabecera { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--linea); } .navegacion { border: 0; } }

/* ================================================================== ronda 4: bloques con imagen y dibujo */
/* la serie A: dibujo de hojas plegadas + tabla de medidas de la entrada */
.serie-a-rejilla { display: grid; gap: var(--s-6) var(--s-8); align-items: center; }
@media (min-width: 60rem) { .serie-a-rejilla { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.serie-a-titulo { font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.6rem); margin-bottom: var(--s-5); overflow-wrap: break-word; }
.serie-a-titulo a { text-decoration: none; }
.serie-a-titulo a:hover { background: linear-gradient(transparent 60%, var(--subrayado) 60%, var(--subrayado) 92%, transparent 92%); }
.serie-a-tabla { width: 100%; max-width: 24rem; border-collapse: collapse; margin-bottom: var(--s-5); font: 400 1rem/1.3 var(--f-ui); font-variant-numeric: tabular-nums lining-nums; }
.serie-a-tabla thead th { font: 800 .75rem/1 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--rojo); text-align: left; padding: 0 0 var(--s-2); border-bottom: 2px solid var(--tinta); }
.serie-a-tabla tbody th { text-align: left; font: 700 1.05rem/1 var(--f-texto); padding: .55rem 0; width: 5rem; }
.serie-a-tabla td { padding: .55rem 0; border-bottom: 1px dashed var(--linea); }
.serie-a-tabla tbody tr th { border-bottom: 1px dashed var(--linea); }
.serie-a-figura { margin: 0; padding: clamp(.75rem, 2vw, 1.25rem); background: var(--hoja); box-shadow: var(--sombra); transform: rotate(.5deg); }
.serie-a-dibujo { display: block; width: 100%; height: auto; }
.serie-a-dibujo rect { fill: var(--hoja); stroke: var(--tinta); stroke-width: 3; vector-effect: non-scaling-stroke; transition: fill var(--transicion); }
.serie-a-dibujo .hoja-a0 rect, .serie-a-dibujo .hoja-a2 rect, .serie-a-dibujo .hoja-a6 rect { fill: #fdf3c4; }
.serie-a-dibujo .hoja-a4 rect { fill: var(--rojo); }
.serie-a-dibujo .hoja-a4 text { fill: #fff; }
.serie-a-dibujo text { font-family: var(--f-texto); font-weight: 700; fill: var(--tinta); text-anchor: middle; }
.serie-a-dibujo g:hover rect { fill: var(--subrayado); }

/* en imágenes: fotos pegadas en un corcho de papel */
.imagenes { padding-bottom: 0; }
.mosaico { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-5); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 60rem) { .mosaico { grid-template-columns: repeat(4, minmax(0, 1fr)); } .mosaico-0 { grid-column: span 2; grid-row: span 2; } }
.mosaico-item a { display: flex; flex-direction: column; gap: var(--s-3); height: 100%; text-decoration: none; color: inherit; }
.mosaico-foto { position: relative; display: block; padding: .4rem .4rem 0; background: #fff; box-shadow: var(--sombra); transition: transform var(--transicion), box-shadow var(--transicion); }
.mosaico-foto::after { content: ""; display: block; height: .4rem; }
.mosaico-foto img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.mosaico-0 .mosaico-foto img { aspect-ratio: 4 / 3.15; }
.mosaico-item:nth-child(3n+1) .mosaico-foto { transform: rotate(-.8deg); }
.mosaico-item:nth-child(3n+2) .mosaico-foto { transform: rotate(.6deg); }
.mosaico-item a:hover .mosaico-foto { transform: rotate(0) translateY(-3px); box-shadow: 0 2px 4px rgba(29, 34, 48, .08), 0 18px 32px -16px rgba(29, 34, 48, .45); }
.mosaico-titulo { font: 700 1rem/1.3 var(--f-texto); color: var(--tinta); text-wrap: balance; }
.mosaico-0 .mosaico-titulo { font-size: clamp(1.25rem, 1rem + .8vw, 1.6rem); }
.mosaico-item a:hover .mosaico-titulo { text-decoration: underline; text-decoration-color: var(--lapiz); text-decoration-thickness: 3px; }
@media (max-width: 40rem) { .mosaico { gap: var(--s-4); } .mosaico-0 { grid-column: span 2; } .mosaico-titulo { font-size: .9375rem; } }
@media (prefers-reduced-motion: reduce) { .mosaico-foto, .serie-a-figura { transform: none !important; } }
@media (max-width: 40rem) { .estante .ficha:nth-of-type(n+3) { display: none; } }
/* «Sobre nosotros»: cifras reales del blog bajo la frase de presentación */
.pagina-cifras { margin: 2rem 0 0; padding: 1.25rem 1.5rem; border-top: 3px solid var(--rojo); background: var(--hoja, #fffdf8); box-shadow: var(--sombra); flex-wrap: wrap; }

/* ================================================================== mejora de diseño (25/10/2026) */
/* cabeceras de cuaderno: el lápiz del logotipo, grande y en diagonal, apoyado sobre los renglones */
.entrada-cabecera, .listado-cabecera { position: relative; overflow: hidden; }
.lapiz-cabecera { position: absolute; right: max(1.5rem, calc((100% - 74rem) / 2 + 1rem)); top: 50%; width: clamp(16rem, 26vw, 25rem); height: clamp(1.1rem, 1.75vw, 1.65rem); transform: translateY(-50%) rotate(-16deg); filter: drop-shadow(0 10px 8px rgb(29 34 48 / .18)); pointer-events: none; }
.entrada-cabecera > .envoltorio, .listado-cabecera > .envoltorio { position: relative; }
@media (max-width: 63.99rem) { .lapiz-cabecera { display: none; } }

/* la entrada: inicial en rojo de la marca sobre un trazo de subrayador */
.entrada .hoja > p:first-child:not(:has(img, iframe))::first-letter {
  float: left; margin: .1em .12em 0 -.04em; padding: 0 .06em; font-weight: 700; font-size: 3.35em; line-height: .8; color: var(--rojo);
  background: linear-gradient(transparent 58%, var(--subrayado) 58%, var(--subrayado) 92%, transparent 92%);
}

/* listados, página 1: la entrada más reciente en grande para que la lista no empiece plana */
@media (min-width: 48rem) {
  .filas-destacada > .fila:first-child:has(.fila-imagen) { grid-template-columns: minmax(0, 19rem) minmax(0, 1fr); gap: 1.25rem 2rem; padding-block: 1.75rem 2.25rem; }
  .filas-destacada > .fila:first-child .fila-imagen { transform: rotate(-1.2deg); }
  .filas-destacada > .fila:first-child .fila-titulo { font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.15rem); line-height: 1.12; }
  .filas-destacada > .fila:first-child .fila-extracto { font-size: 1.08rem; }
}
.filas-destacada > .fila:first-child .fila-imagen { position: relative; }
.filas-destacada > .fila:first-child .fila-imagen::after { content: ""; position: absolute; left: 50%; top: -.55rem; width: 4.5rem; height: 1.1rem; transform: translateX(-50%) rotate(2deg); background: rgb(242 182 50 / .55); }