/* =====================================================================
   base.css — hoja común a los dieciocho sellos, al portal y a la tienda.

   No contiene ni un color de marca: todo sale de las variables que
   Tema.php inyecta desde SITIO. Si aquí apareciera un hex de sello,
   el sistema de personalización dejaría de servir para algo.

   Los valores tras la coma son solo la red de seguridad para cuando
   un sello aún no tiene la personalización rellena.

   ORDEN DEL ARCHIVO
     1. Variables
     2. Reajuste y tipografía
     3. Estructura: cabecera, menú, pie, buscador
     4. Piezas reutilizables: filas de libros y de autores
     5. Portada del portal
     6. Catálogo
     7. Ficha de libro
     8. Ficha de autor
     9. Noticias y blog
    10. Agenda
    11. Colecciones
    12. Páginas informativas y legales
    13. Aviso de cookies
    14. Premios
    15. Errores
    16. Pantallas pequeñas y movimiento reducido

   Las adaptaciones a pantalla pequeña van todas juntas al final, en un
   único punto de ruptura. Repartidas por el archivo era imposible
   saber qué se estaba anulando dónde.
   ===================================================================== */


/* =====================================================================
   1. VARIABLES
   ===================================================================== */

:root {
    /* Ritmo vertical y horizontal, en una escala de cuartas */
    --e1: 0.25rem;
    --e2: 0.5rem;
    --e3: 1rem;
    --e4: 1.5rem;
    --e5: 2.5rem;
    --e6: 4rem;

    --ancho-maximo: 74rem;
    --medida: 34em;          /* longitud de línea cómoda para leer */
    --borde: color-mix(in srgb, var(--color-texto, #222) 15%, transparent);
    --borde-tenue: color-mix(in srgb, var(--color-texto, #222) 8%, transparent);
    --fondo-suave: color-mix(in srgb, var(--color-texto, #222) 4%, transparent);
    --transicion: 160ms ease;

    /* Punto de ruptura único, para tenerlo escrito en un solo sitio.
       Las media queries no admiten var(), así que el valor se repite
       literal ahí abajo; esto queda como documentación. */
    --ruptura: 46rem;
}


/* =====================================================================
   2. REAJUSTE Y TIPOGRAFÍA
   ===================================================================== */

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--color-fondo, #fff);
    color: var(--color-texto, #222);
    font-family: var(--tipografia-texto, system-ui, sans-serif);
    font-size: 1.0625rem;
    line-height: 1.65;
    -webkit-text-size-adjust: 100%;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
a:hover { color: var(--color-principal, #1a1a1a); }

:focus-visible {
    outline: 2px solid var(--color-secundario, #8a6d3b);
    outline-offset: 3px;
}

/* Visible para buscadores y lectores de pantalla, no para el ojo.
   No se usa display:none porque eso lo escondería también de ellos. */
.visualmente-oculto {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

h1, h2, h3 {
    font-family: var(--tipografia-titulos, Georgia, serif);
    font-weight: 600;
    line-height: 1.15;
    text-wrap: balance;
    margin: 0 0 var(--e3);
}

h1 { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); }
h2 { font-size: clamp(1.25rem, 1rem + 1vw, 1.6rem); }
h3 { font-size: 1.0625rem; font-weight: 600; }


/* =====================================================================
   3. ESTRUCTURA
   ===================================================================== */

.cabecera,
.contenido,
.pie > * {
    max-width: var(--ancho-maximo);
    margin-inline: auto;
    padding-inline: var(--e3);
}

.contenido { padding-block: var(--e5) var(--e6); }

/* Cabecera en dos filas: el menú baja a su propia línea y ocupa todo
   el ancho. Arriba quedan el logo y lo que no crece —buscador, enlace
   al grupo y bolsa—, y así se pueden añadir entradas al menú sin que
   la bolsa acabe descolgada en una tercera fila. */
.cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--e3) var(--e4);
    padding-block: var(--e4);
    border-bottom: 1px solid var(--borde);
}

.cabecera .logo {
    font-family: var(--tipografia-titulos, Georgia, serif);
    font-size: 1.3rem;
    text-decoration: none;
    margin-right: auto;
}

.cabecera .logo img {
    /* Muchos SVG llegan sin dimensiones propias: con alto fijo y
       ancho automático se resuelven solos por su viewBox. */
    height: var(--alto-logo, 2.6rem);
    width: auto;
    max-width: 16rem;
}

.cabecera .grupo {
    font-size: 0.8rem;
    opacity: 0.65;
    text-decoration: none;
}

.menu {
    order: 9;             /* después de todo lo demás */
    flex: 1 0 100%;       /* y a lo ancho, así que cae a la fila siguiente */
    margin-top: var(--e2);
    display: flex;
    flex-wrap: wrap;
    gap: var(--e4);
}

.menu a {
    text-decoration: none;
    font-size: 0.9rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.menu a:hover { text-decoration: underline; }

.pie {
    margin-top: var(--e6);
    border-top: 1px solid var(--borde);
    padding-block: var(--e5) var(--e4);
    font-size: 0.9rem;
}

.pie-columnas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: var(--e4) var(--e5);
}

.pie-columnas h2 {
    font-size: .8rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .6;
    margin-bottom: var(--e2);
}

.pie-columnas ul { list-style: none; margin: 0; padding: 0; }
.pie-columnas li { margin-bottom: var(--e1); }
.pie-columnas a { text-decoration: none; }
.pie-columnas a:hover { text-decoration: underline; }

.pie-marcas {
    margin-top: var(--e5);
    padding-top: var(--e4);
    border-top: 1px solid var(--borde);
}

/* Mismo epígrafe que las columnas —versalitas pequeñas y atenuadas—
   pero centrado, porque aquí encabeza una banda y no una lista. */
.pie-marcas h2 {
    margin-bottom: var(--e3);
    font-family: var(--tipografia-texto, system-ui, sans-serif);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-align: center;
    opacity: .6;
}
 
/* Con el ancho máximo del sitio y un mínimo de 8.5rem caben ocho o
   nueve por fila, así que los sellos quedan en dos filas sin fijar el
   número de columnas. Si algún día son más, se reparten en tres sin
   tocar nada.
 
   auto-fit y no auto-fill: la última fila va casi siempre incompleta,
   y con auto-fill quedaría descolgada a la izquierda en lugar de
   repartirse. */
.pie-marcas ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
    gap: var(--e2) var(--e3);
    list-style: none;
    margin: 0;
    padding: 0;
}
 
.pie-marcas li { margin: 0; }
 
/* Caja centrada de altura fija: es la que ocuparán los logotipos
   cuando sustituyan a los nombres. Mientras tanto la ocupa el texto,
   y la banda ya tiene el ritmo que va a tener después. */
.pie-marcas a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding: var(--e1) var(--e2);
    text-align: center;
    text-decoration: none;
    text-wrap: balance;
    font-size: .85rem;
    line-height: 1.25;
    opacity: .6;
    transition: opacity var(--transicion);
}
 
.pie-marcas a:hover,
.pie-marcas a:focus-visible { opacity: 1; }
 
/* Alto máximo y no ancho: los SVG de los sellos tienen proporciones
   muy distintas —el de AlmuzaraUniversidad es una tira larga y el de
   LID casi cuadrado— y lo único que los iguala visualmente es la
   altura, igual que en la cabecera. */
.pie-marcas img {
    max-height: calc(1.75rem * var(--escala-logo, 1));
    width: auto;
    max-width: 100%;
}

.pie-cierre {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--e3);
    margin-top: var(--e5);
    padding-top: var(--e3);
    border-top: 1px solid var(--borde);
    opacity: .75;
}

.pie-cierre p { margin: 0; }
.pie-redes { display: flex; gap: var(--e3); }

/* --- Buscador -------------------------------------------------------- */

.buscador {
    display: flex;
    gap: var(--e2);
    flex: 0 1 18rem;
}

.buscador input {
    flex: 1;
    min-width: 0;
    padding: var(--e1) var(--e2);
    border: 1px solid var(--borde);
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 0.9rem;
}

.buscador button {
    padding: var(--e1) var(--e3);
    border: 1px solid var(--color-principal, #1a1a1a);
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background var(--transicion), color var(--transicion);
}

.buscador button:hover {
    background: var(--color-principal, #1a1a1a);
    color: var(--color-fondo, #fff);
}

/* =====================================================================
   BARRA DE SITIOS HERMANOS

   Va en base.css, al final de la sección 3 (ESTRUCTURA), después de
   las reglas de .menu.

   Segunda banda bajo la cabecera, para los dominios que sirven varios
   sellos en rutas distintas. Hoy solo LID.
   ===================================================================== */

.barra-paises {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--e4) var(--e6);
    max-width: var(--ancho-maximo);
    margin-inline: auto;
    padding: var(--e3);
    border-bottom: 1px solid var(--borde);
}

.barra-paises a {
    font-family: var(--tipografia-titulos, Georgia, serif);
    font-size: 1.05rem;
    text-decoration: none;
}

.barra-paises a:hover { text-decoration: underline; }

/* El sitio en el que estás, sin subrayado permanente: se distingue
   por el peso, que basta y no compite con el menú de arriba. */
.barra-paises a[aria-current="page"] {
    font-weight: 600;
    color: var(--color-principal, #1a1a1a);
}

/* --- Añadir a la @media de la sección 16 --------------------------- */

    /* Con cinco enlaces y poco ancho, la separación grande deja
       huérfano el último. */
    .barra-paises { gap: var(--e2) var(--e4); font-size: .95rem; }



/* =====================================================================
   4. PIEZAS REUTILIZABLES

   Las portadas no comparten proporción: las hay apaisadas, cuadradas
   y muy altas. Cada una vive dentro de una caja de altura fija y se
   apoya en su base, ajustándose sin recortarse ni deformarse. Así
   todas comparten línea de apoyo, como en un estante, y todos los
   títulos arrancan a la misma altura.
   ===================================================================== */

.fila { margin-bottom: var(--e6); }

.fila h2 {
    padding-bottom: var(--e2);
    border-bottom: 2px solid var(--color-principal, #1a1a1a);
}

.rejilla {
    display: grid;
    /* --columnas: número fijo de columnas. Sin definir, tantas como
       quepan. Lo pone la vista, y en su día lo pondrá el gestor.
       --minimo: ancho mínimo de cada columna. Cuando el número de
       columnas es fijo se pone a cero, o con muchas columnas el
       mínimo las haría desbordar el ancho de la página. */
    grid-template-columns: repeat(var(--columnas, auto-fill), minmax(var(--minimo, var(--ancho-tarjeta, 9.5rem)), 1fr));
    gap: var(--e5) var(--separacion, var(--e4));
    align-items: start;
    margin-top: var(--e4);
}

.libro > a {
    display: block;
    text-decoration: none;
}

/* La caja toma la proporción de un libro sobre el ancho de su
   columna, así que su altura se deduce sola del número de columnas:
   no hay ninguna medida que ajustar a mano. Dentro, cada portada se
   apoya en la base con su proporción intacta, de modo que un libro
   apaisado sencillamente queda más bajo. */
.libro .portada {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    aspect-ratio: var(--proporcion-portada, 2 / 3);
    margin-bottom: var(--e2);
}

.libro .portada img {
    width: auto;
    max-width: 100%;
    max-height: 100%;
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.18), 0 6px 14px rgb(0 0 0 / 0.10);
    transition: transform var(--transicion), box-shadow var(--transicion);
}

.libro > a:hover .portada img {
    transform: translateY(-3px);
    box-shadow: 0 2px 4px rgb(0 0 0 / 0.20), 0 10px 22px rgb(0 0 0 / 0.14);
}

.libro { text-align: center; }
.libro h3 { margin: 0; text-wrap: balance; }
.libro > a:hover h3 { color: var(--color-principal, #1a1a1a); }

/* Materia principal del libro dentro de la tarjeta. Ojo: no es la
   misma pieza que las etiquetas de la ficha (.etiquetas .etiqueta),
   aunque compartan palabra. */
.libro .etiqueta {
    display: inline-block;
    margin: var(--e2) 0 0;
    padding: 0.1em 0.6em;
    background: color-mix(in srgb, var(--color-secundario, #8a6d3b) 16%, transparent);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.6;
}

/* Hueco para los libros sin portada: mantiene la alineación */
.sin-portada {
    display: block;
    height: 100%;
    aspect-ratio: 2 / 3;
    background: color-mix(in srgb, var(--color-texto, #222) 7%, transparent);
}

/* Filas de autores: mismo esquema que los libros, pero con el retrato
   recortado en círculo. Las fotos llegan en proporciones muy variadas
   y así la fila queda regular sin deformar ninguna cara. */

.autor { text-align: center; }
.autor > a { display: block; text-decoration: none; }

.autor .retrato {
    display: block;
    width: min(100%, var(--ancho-retrato, 11rem));
    aspect-ratio: 1;
    margin: 0 auto var(--e2);
    border-radius: 50%;
    overflow: hidden;
    background: color-mix(in srgb, var(--color-texto, #222) 7%, transparent);
}

.autor .retrato img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;   /* las caras suelen ir en el tercio alto */
    transition: transform var(--transicion);
}

.autor > a:hover .retrato img { transform: scale(1.04); }

.autor h3 { margin: 0; font-size: 0.95rem; }
.autor > a:hover h3 { color: var(--color-principal, #1a1a1a); }

/* La silueta es un relleno, no un retrato: se atenúa y se encaja
   dentro del círculo sin recortarse, para que no compita con las
   fotos reales cuando ambas aparecen en la misma cuadrícula.
   `contain` en vez de `cover` porque una silueta recortada por el
   borde del círculo parece un fallo de la imagen. */
.retrato-silueta {
    object-fit: contain;
    object-position: center bottom;
    padding: 8%;
    opacity: .45;
}

/* En la ficha el círculo es mucho mayor y admite más aire */
.ficha-retrato .retrato-silueta { padding: 12%; }


/* =====================================================================
   5. PORTADA DEL PORTAL
   ===================================================================== */

.presentacion {
    max-width: var(--medida);
    font-size: 1.1rem;
    margin-bottom: var(--e5);
}

.sellos-rejilla { margin-bottom: var(--e6); }

.sellos-rejilla h2,
.fila-sello h2 {
    padding-bottom: var(--e2);
    border-bottom: 2px solid var(--color-principal, #1a1a1a);
}

.fila-sello h2 a { text-decoration: none; }
.fila-sello h2 a:hover { text-decoration: underline; }

.sellos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    gap: var(--e4);
    margin-top: var(--e4);
}

.sello-tarjeta {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 6rem;
    padding: var(--e3);
    border: 1px solid var(--borde);
    text-decoration: none;
    text-align: center;
    transition: border-color var(--transicion), transform var(--transicion);
}

.sello-tarjeta:hover {
    border-color: var(--color-principal, #1a1a1a);
    transform: translateY(-2px);
}

.sello-tarjeta img { max-height: 3.5rem; width: auto; max-width: 100%; }

.ver-mas { margin-top: var(--e3); font-size: .9rem; }
.ver-mas a { text-decoration: none; }
.ver-mas a:hover { text-decoration: underline; }


/* =====================================================================
   6. CATÁLOGO
   ===================================================================== */

.cuenta { margin-top: calc(var(--e4) * -1); opacity: 0.7; font-size: 0.9rem; }

.materias {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e2);
    margin: var(--e4) 0 var(--e5);
    padding-bottom: var(--e4);
    border-bottom: 1px solid var(--borde);
}

.materias a {
    padding: 0.15em 0.7em;
    border: 1px solid var(--borde);
    font-size: 0.85rem;
    text-decoration: none;
    transition: background var(--transicion), color var(--transicion);
}

.materias a span { opacity: 0.5; font-size: 0.8em; margin-left: 0.3em; }

.materias a:hover,
.materias a.activa {
    background: var(--color-principal, #1a1a1a);
    border-color: var(--color-principal, #1a1a1a);
    color: var(--color-fondo, #fff);
}

/* --- Abecedario del listado de autores -------------------------------
   Las cajas son de ancho fijo para que las veintisiete queden a la
   misma distancia entre sí: con ancho automático, la I y la M
   quedarían separadas de forma desigual y la fila se leería peor. */

.abecedario {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e1);
    margin: var(--e4) 0 var(--e5);
    padding-bottom: var(--e4);
    border-bottom: 1px solid var(--borde);
}

.abecedario a,
.abecedario span {
    min-width: 2rem;
    padding: 0.2em 0.4em;
    border: 1px solid var(--borde);
    text-align: center;
    text-decoration: none;
    font-size: 0.95rem;
    line-height: 1.4;
    transition: background var(--transicion), color var(--transicion);
}

.abecedario a:hover,
.abecedario .activa {
    background: var(--color-principal, #1a1a1a);
    border-color: var(--color-principal, #1a1a1a);
    color: var(--color-fondo, #fff);
}

/* Sin autores: se ve, ocupa su sitio y no invita a pulsar */
.abecedario .apagada {
    border-color: var(--borde-tenue);
    opacity: .35;
}

.paginacion {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--e2);
    margin-top: var(--e6);
    font-size: 0.9rem;
}

.paginacion a,
.paginacion .actual {
    min-width: 2.2rem;
    padding: 0.3em 0.6em;
    text-align: center;
    text-decoration: none;
    border: 1px solid var(--borde);
}

.paginacion .actual {
    background: var(--color-principal, #1a1a1a);
    border-color: var(--color-principal, #1a1a1a);
    color: var(--color-fondo, #fff);
}

.paginacion .hueco { border: 0; opacity: 0.5; }


/* =====================================================================
   7. FICHA DE LIBRO
   ===================================================================== */

.ficha-libro {
    display: grid;
    grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
    gap: var(--e5) var(--e6);
    align-items: start;
}

.ficha-portada img {
    width: 100%;
    box-shadow: 0 2px 4px rgb(0 0 0 / 0.18), 0 12px 30px rgb(0 0 0 / 0.14);
}

.ficha-datos > * { max-width: var(--medida); }
.ficha-datos h1 { margin-bottom: var(--e2); }

.ficha-datos .subtitulo {
    font-family: var(--tipografia-titulos, Georgia, serif);
    font-size: 1.15rem;
    opacity: 0.75;
    margin: 0 0 var(--e3);
}

.ficha-datos .autores {
    font-size: 1.05rem;
    margin: 0 0 var(--e4);
}

.ficha-datos .autores a { text-decoration-color: var(--borde); }

/* Frase destacada del libro (LIBRO.tagweb) */
.destacado {
    font-family: var(--tipografia-titulos, Georgia, serif);
    font-size: 1.1rem;
    line-height: 1.4;
    margin: var(--e4) 0;
    padding-left: var(--e3);
    border-left: 3px solid var(--color-secundario, #8a6d3b);
}

.coleccion, .participante { font-size: 0.9rem; opacity: 0.8; margin: var(--e2) 0; }

.precio {
    font-family: var(--tipografia-titulos, Georgia, serif);
    font-size: 1.6rem;
    margin: var(--e4) 0 var(--e3);
}

.boton-compra {
    display: inline-block;
    padding: var(--e2) var(--e4);
    border: 1px solid var(--color-principal, #1a1a1a);
    background: var(--color-principal, #1a1a1a);
    color: var(--color-fondo, #fff);
    font: inherit;
    font-size: 0.95rem;
    letter-spacing: 0.04em;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--transicion), color var(--transicion);
}

.boton-compra:hover {
    background: transparent;
    color: var(--color-principal, #1a1a1a);
}

.reclamo-tienda {
    margin: calc(var(--e3) * -1) 0 var(--e4);
    font-size: 0.85rem;
    opacity: 0.8;
}

.sinopsis { margin: var(--e4) 0; }
.sinopsis p:first-child { margin-top: 0; }

.otra-edicion {
    margin-top: var(--e4);
    padding: var(--e3);
    background: color-mix(in srgb, var(--color-secundario, #8a6d3b) 10%, transparent);
    font-size: 0.9rem;
}

/* --- Columna de la portada: datos técnicos, descargas y etiquetas ----
   Los tres bloques comparten tratamiento porque son lo mismo: letra
   pequeña bajo la portada, separada por una línea fina. Si cambia uno
   deberían cambiar los tres, así que comparten regla. */

.datos-tecnicos,
.archivos-libro,
.etiquetas-libro {
    margin-top: var(--e4);
    padding-top: var(--e3);
    border-top: 1px solid var(--borde);
}

.archivos-libro h2,
.etiquetas-libro h2 {
    margin: 0 0 var(--e2);
    font-family: var(--tipografia-texto, system-ui, sans-serif);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    opacity: .6;
}

/* La columna es estrecha, así que la lista va en dos columnas propias
   en vez de en la rejilla de la página: el término a la izquierda, el
   dato a la derecha, sin depender del ancho total. */
.datos-tecnicos {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--e1) var(--e3);
    font-size: 0.85rem;
    line-height: 1.4;
}

.datos-tecnicos dt { font-weight: 600; opacity: .6; }
.datos-tecnicos dd { margin: 0; }

/* Los códigos de clasificación se leen carácter a carácter: con
   tipografía monoespaciada no se confunden la I mayúscula y el 1. */
.datos-tecnicos dd.clasificacion {
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 0.8rem;
    word-break: break-word;
}

/* --- Descargas ------------------------------------------------------ */

.archivos { margin: 0; padding: 0; list-style: none; }
.archivos li { margin-bottom: var(--e2); }
.archivos li:last-child { margin-bottom: 0; }

/* El icono en su propia columna: así los nombres quedan alineados
   entre sí aunque ocupen dos líneas, que es lo que pasa en la columna
   estrecha de la portada. */
.archivos a {
    display: flex;
    gap: var(--e2);
    align-items: flex-start;
    font-size: 0.9rem;
    line-height: 1.35;
    text-decoration: none;
}

.archivos a:hover .archivo-nombre { text-decoration: underline; }

.archivo-icono { flex: 0 0 auto; font-size: 1rem; line-height: 1.35; }

/* El formato y el peso son datos de servicio, no parte del nombre:
   se leen si hacen falta y no compiten con la etiqueta. */
.archivo-detalle {
    display: block;
    font-size: 0.75rem;
    opacity: .65;
    text-decoration: none;
}

/* --- Etiquetas ------------------------------------------------------ */

.etiquetas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e1);
    margin: 0;
    padding: 0;
    list-style: none;
}

.etiquetas .etiqueta a,
.etiquetas .etiqueta span {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    border: 1px solid var(--borde);
    border-radius: 999px;
    font-size: 0.8rem;
    line-height: 1.3;
    text-decoration: none;
    transition: background var(--transicion), color var(--transicion);
}

.etiquetas .etiqueta a:hover {
    border-color: var(--color-principal, #1a1a1a);
    background: var(--color-principal, #1a1a1a);
    color: var(--color-fondo, #fff);
}

/* La materia principal es la que clasifica el libro; las demás son
   palabras clave, y conviene que se note cuál es cuál. */
.etiquetas .etiqueta-principal a,
.etiquetas .etiqueta-principal span {
    border-color: var(--color-secundario, #8a6d3b);
    font-weight: 600;
}

/* --- Secciones bajo la ficha -----------------------------------------
   Autores, agenda, reseñas, vídeos y las dos filas de libros comparten
   separación y epígrafe: son bloques hermanos, aunque unos vengan de
   la vista y otros del parcial de filas. */

.ficha-seccion,
.ficha-filas .fila {
    margin-top: var(--e6);
    padding-top: var(--e4);
    border-top: 1px solid var(--borde);
}

.ficha-seccion > h2,
.ficha-filas .fila > h2 {
    margin: 0 0 var(--e4);
    font-family: var(--tipografia-titulos, Georgia, serif);
    font-size: 1.3rem;
}

/* --- Autores del libro ---------------------------------------------- */

.autor-perfil {
    display: flex;
    gap: var(--e4);
    align-items: flex-start;
    margin-bottom: var(--e5);
}

.autor-perfil:last-child { margin-bottom: 0; }

/* El retrato que genera el gestor ya viene cuadrado y en grises; el
   contenedor fijo evita que la maquetación salte si algún fichero
   antiguo no lo estuviera. */
.autor-retrato {
    flex: 0 0 auto;
    width: 7.5rem;
    height: 7.5rem;
    overflow: hidden;
    border-radius: 50%;
    background: color-mix(in srgb, var(--color-texto, #222) 7%, transparent);
}

.autor-retrato img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.autor-texto h3 {
    margin: 0 0 var(--e2);
    font-family: var(--tipografia-titulos, Georgia, serif);
    font-size: 1.1rem;
}

.autor-biografia { font-size: 0.95rem; line-height: 1.6; }
.autor-biografia p:last-child { margin-bottom: 0; }

/* --- Actos de agenda en la ficha ------------------------------------ */

.actos { margin: 0; padding: 0; list-style: none; }

.acto {
    display: flex;
    gap: var(--e3);
    align-items: flex-start;
    margin-bottom: var(--e3);
    padding-bottom: var(--e3);
    border-bottom: 1px solid var(--borde-tenue);
}

.acto:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

/* El taco de calendario se lee de un vistazo, que es lo que hace falta
   cuando lo que decide si sigues leyendo es la fecha. La fecha
   completa va repetida en texto al lado, así que el taco queda oculto
   para los lectores de pantalla. */
.acto-fecha {
    flex: 0 0 auto;
    width: 3.25rem;
    padding: var(--e1) 0;
    border: 1px solid var(--borde);
    text-align: center;
    line-height: 1.1;
}

.acto-dia {
    display: block;
    font-family: var(--tipografia-titulos, Georgia, serif);
    font-size: 1.5rem;
}

.acto-mes {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    opacity: .7;
}

.acto-datos h3 {
    margin: 0 0 var(--e1);
    font-family: var(--tipografia-titulos, Georgia, serif);
    font-size: 1.05rem;
}

.acto-cuando { margin: 0; font-size: 0.85rem; opacity: .8; }
.acto-inscripcion { margin: var(--e1) 0 0; font-size: 0.85rem; }

/* --- Reseñas de prensa -----------------------------------------------
   Ancho mínimo generoso: una cita por debajo de unos 19rem parte en
   demasiadas líneas y deja de leerse como una cita. */

.resenas-rejilla {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
    gap: var(--e4);
    align-items: start;
}

.resena {
    display: flex;
    flex-direction: column;
    gap: var(--e2);
    height: 100%;
    padding: var(--e4);
    border: 1px solid var(--borde);
    border-top: 3px solid var(--color-secundario, #8a6d3b);
    background: var(--fondo-suave);
}

.resena-cita {
    flex: 1 1 auto;
    margin: 0;
    font-family: var(--tipografia-titulos, Georgia, serif);
    font-size: 1rem;
    line-height: 1.5;
}

/* El pie se pega abajo aunque las citas tengan distinta longitud, y
   así los medios quedan alineados de tarjeta a tarjeta. */
.resena-pie {
    margin: 0;
    padding-top: var(--e2);
    border-top: 1px solid var(--borde-tenue);
    font-size: 0.8rem;
}

.resena-titular { font-weight: 600; }
.resena-fecha { margin-left: var(--e2); opacity: .65; }

/* Una sola reseña no forma rejilla: a todo lo ancho quedaría una
   tarjeta desproporcionada. */
.resenas-rejilla:has(.resena:only-child) {
    grid-template-columns: minmax(0, 32rem);
}

/* --- Vídeos ---------------------------------------------------------- */

.videos-rejilla {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: var(--e4);
}

/* aspect-ratio evita el truco del padding-top y mantiene la
   proporción sin necesidad de posicionamiento absoluto. */
.video-marco {
    aspect-ratio: 16 / 9;
    background: #000;
}

.video-marco iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}


/* =====================================================================
   8. FICHA DE AUTOR
   ===================================================================== */

.ficha-autor {
    display: grid;
    grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
    gap: var(--e5) var(--e6);
    align-items: start;
    margin-bottom: var(--e6);
}

.ficha-retrato img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    object-position: center 20%;
    border-radius: 50%;
}

.biografia { margin-bottom: var(--e4); }

/* Los iconos heredan el color del texto y solo se encienden al pasar
   por encima: son un apunte al margen, no un reclamo. */
.redes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e2);
    margin-top: var(--e4);
}

.redes a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    color: inherit;
    opacity: .6;
    transition: opacity var(--transicion), color var(--transicion);
}

.redes a:hover,
.redes a:focus-visible {
    opacity: 1;
    color: var(--color-principal, #1a1a1a);
}


/* =====================================================================
   9. NOTICIAS Y BLOG

   La primera noticia ocupa dos columnas: es la que abre el listado y
   conviene que se distinga. Las fotografías se recortan a 16:9 para
   que la rejilla quede regular sin deformar ninguna.
   ===================================================================== */

.rejilla-noticias {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: var(--e5) var(--e4);
    margin-top: var(--e4);
}

.noticia-tarjeta.destacada { grid-column: span 2; }
.noticia-tarjeta > a { display: block; text-decoration: none; }

.noticia-foto {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    margin-bottom: var(--e2);
    background: color-mix(in srgb, var(--color-texto, #222) 7%, transparent);
}

.noticia-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transicion);
}

.noticia-tarjeta > a:hover .noticia-foto img { transform: scale(1.03); }

.noticia-tarjeta h3 {
    margin: 0 0 var(--e1);
    font-size: 1.1rem;
    line-height: 1.3;
}

.noticia-tarjeta.destacada h3 { font-size: 1.6rem; }
.noticia-tarjeta > a:hover h3 { color: var(--color-principal, #1a1a1a); }

.noticia-tarjeta .entradilla {
    margin: 0 0 var(--e1);
    font-size: .9rem;
    opacity: .8;
}

.noticia-imagen { margin: var(--e4) 0; }
.noticia-imagen img { width: 100%; }

.noticia-imagen figcaption {
    margin-top: var(--e1);
    font-size: .85rem;
    opacity: .7;
}

.antetitulo {
    margin: 0;
    font-size: .8rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--color-secundario, #8a6d3b);
}

/* La fecha, discreta y en el color de acento */
.noticia-tarjeta time,
.noticia > time,
.entrada-tarjeta time,
.entrada > time {
    display: block;
    font-size: .8rem;
    letter-spacing: .04em;
    color: var(--color-secundario, #8a6d3b);
}

/* Las páginas de texto se limitan enteras... */
.pagina { max-width: var(--medida); }

/* ...pero la noticia no: se limita cada parte por separado, para que
   el titular y la fotografía puedan ser más anchos que el cuerpo.
   Un max-width en el hijo nunca puede superar al del padre. */
.noticia { max-width: min(52rem, 100%); }
.noticia .destacado,
.noticia .cuerpo,
.noticia > p { max-width: var(--medida); }

.noticia h1, .pagina h1 { margin-bottom: var(--e2); }
.cuerpo p:first-child { margin-top: 0; }

/* Las entradas del blog son texto largo con firma, así que van en
   lista de una columna y no en rejilla: se leen, no se ojean como las
   noticias. */

.lista-entradas {
    display: grid;
    gap: var(--e5);
    max-width: min(52rem, 100%);
    margin-top: var(--e4);
}

.entrada-tarjeta {
    padding-bottom: var(--e4);
    border-bottom: 1px solid var(--borde);
}

.entrada-tarjeta > a { display: block; text-decoration: none; }

.entrada-tarjeta h3 {
    margin: 0 0 var(--e1);
    font-size: 1.35rem;
    line-height: 1.25;
}

.entrada-tarjeta > a:hover h3 { color: var(--color-principal, #1a1a1a); }
.entrada-tarjeta .entradilla { margin: 0 0 var(--e1); opacity: .85; }

.entrada-firma { font-size: .9rem; font-style: italic; opacity: .8; }

.entrada { max-width: min(52rem, 100%); }
.entrada .cuerpo,
.entrada > p { max-width: var(--medida); }
.entrada h1 { margin-bottom: var(--e2); }


/* --- Dos columnas del listado ----------------------------------------
   El lateral es estrecho a propósito: es un índice, no una sección.
   El ancho de .lista-entradas ya lo limita base.css. */
 
.blog-columnas {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 12rem;
    gap: var(--e6);
    align-items: start;
}
 
.blog-lateral h2 {
    margin: 0 0 var(--e2);
    font-family: var(--tipografia-texto, system-ui, sans-serif);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    opacity: .6;
}
 
.blog-categorias { list-style: none; margin: 0; padding: 0; }
 
.blog-categorias li + li { border-top: 1px solid var(--borde-tenue); }
 
.blog-categorias a {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--e3);
    padding: var(--e2) 0;
    text-decoration: none;
    font-size: .9rem;
}
 
.blog-categorias a:hover,
.blog-categorias a[aria-current="page"] { text-decoration: underline; }
.blog-categorias a[aria-current="page"] { font-weight: 600; }
.blog-categorias span { opacity: .5; font-size: .8em; }
 
/* --- Tarjeta con imagen ----------------------------------------------
   La foto va al lado y no arriba: en una lista de una columna, una
   imagen a todo lo ancho por entrada convertiría el listado en un
   desfile de fotos y haría desaparecer el texto, que es lo que aquí
   manda. La proporción fija reserva el hueco antes de que cargue, y
   deja un rectángulo limpio cuando el archivo falta. */
 
.entrada-tarjeta {
    display: grid;
    grid-template-columns: 13rem minmax(0, 1fr);
    gap: var(--e4);
    align-items: start;
}
 
.entrada-foto {
    display: block;
    overflow: hidden;
    background: color-mix(in srgb, var(--color-texto, #222) 7%, transparent);
}
 
.entrada-foto img {
    width: 100%;
    aspect-ratio: 1080 / 495;
    object-fit: cover;
    transition: transform var(--transicion);
}
 
.entrada-tarjeta:hover .entrada-foto img { transform: scale(1.03); }
 
.entrada-tarjeta h3 a { text-decoration: none; }
.entrada-tarjeta h3 a:hover { color: var(--color-principal, #1a1a1a); }
 
/* Sin imagen no se reserva columna: el texto ocupa todo el ancho en
   lugar de dejar un hueco vacío a la izquierda. */
.entrada-tarjeta.sin-foto { grid-template-columns: 1fr; }
 
/* La primera entrada abre el listado: foto a todo el ancho y titular
   mayor, igual que la noticia destacada. */
.entrada-tarjeta.destacada {
    grid-template-columns: 1fr;
    gap: var(--e3);
}
 
.entrada-tarjeta.destacada h3 { font-size: 1.75rem; }
.entrada-tarjeta.destacada .entradilla { font-size: 1.05rem; }
 
/* Las relacionadas son un pie de página, no contenido principal */
.lista-entradas.compacta { gap: var(--e4); max-width: none; }
.lista-entradas.compacta .entrada-tarjeta { grid-template-columns: 8rem minmax(0, 1fr); }
.lista-entradas.compacta .entrada-tarjeta.sin-foto { grid-template-columns: 1fr; }
.lista-entradas.compacta .entrada-tarjeta h3 { font-size: 1.05rem; }
.lista-entradas.compacta .entradilla { display: none; }
 
/* --- Ficha de la entrada --------------------------------------------- */
 
/* Las categorías reutilizan el antetítulo, que ya va en el color de
   acento y en versalitas. */
.entrada .antetitulo a { text-decoration: none; }
.entrada .antetitulo a:hover { text-decoration: underline; }
.entrada .antetitulo a + a { margin-left: var(--e3); }
 
.entrada > .entradilla {
    max-width: var(--medida);
    margin: 0 0 var(--e2);
    font-family: var(--tipografia-titulos, Georgia, serif);
    font-size: 1.15rem;
    line-height: 1.45;
    opacity: .8;
}
 
.entrada-lectura::before { content: "·"; margin: 0 .5em; }
 
.entrada-enlace { margin-top: var(--e4); font-size: .9rem; }
 
/* --- Compartir -------------------------------------------------------
   Enlaces, no botones: no llevan a ninguna acción destructiva y así
   funcionan también sin JavaScript. */
 
.compartir {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--e2) var(--e3);
    margin: var(--e5) 0;
    padding-block: var(--e3);
    border-top: 1px solid var(--borde);
    border-bottom: 1px solid var(--borde);
    font-size: .85rem;
}
 
.compartir span {
    font-size: .75rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    opacity: .6;
}
 
.compartir a {
    padding: .2em .8em;
    border: 1px solid var(--borde);
    border-radius: 999px;
    text-decoration: none;
    transition: background var(--transicion), color var(--transicion);
}
 
.compartir a:hover {
    background: var(--color-principal, #1a1a1a);
    border-color: var(--color-principal, #1a1a1a);
    color: var(--color-fondo, #fff);
}
 
/* --- Firma al pie ---------------------------------------------------- */
 
.firma + .firma {
    margin-top: var(--e4);
    padding-top: var(--e4);
    border-top: 1px solid var(--borde-tenue);
}
 
.firma h3 {
    margin: 0 0 var(--e1);
    font-family: var(--tipografia-titulos, Georgia, serif);
    font-size: 1.1rem;
}
 
/* El retrato es la mitad que el de la ficha de libro y bastante menos
   que el de la ficha de autor: aquí acompaña a un nombre, no encabeza
   una página. Mismo recorte circular y mismo encuadre alto, que es
   donde suelen quedar las caras. */
.firma {
    display: grid;
    grid-template-columns: 3.75rem minmax(0, 1fr);
    gap: var(--e3);
    align-items: start;
}
 
.firma.sin-foto { grid-template-columns: 1fr; }
 
.firma-retrato {
    display: block;
    width: 3.75rem;
    height: 3.75rem;
    overflow: hidden;
    border-radius: 50%;
    background: color-mix(in srgb, var(--color-texto, #222) 7%, transparent);
}
 
.firma-retrato img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
}
 
/* Las redes usan .redes tal cual, la misma pieza que la ficha de
   autor, para que los iconos y su comportamiento sean idénticos. Solo
   se recorta el margen superior, que allí separa de una biografía
   larga y aquí de dos líneas. */
.firma .redes { margin-top: var(--e2); }
 
.firma-bio {
    max-width: var(--medida);
    margin: 0 0 var(--e2);
    font-size: .95rem;
    line-height: 1.6;
    opacity: .85;
}

/* La foto de prensa se recorta a 16:9 y llena la caja: es una
   fotografía de acto, y perder los bordes no importa. */
.noticia-foto--prensa img { object-fit: cover; }
 
/* La portada, en cambio, se encaja entera. Recortarla a 16:9 la
   dejaría descabezada, y una portada sin su título deja de
   identificar al libro. La caja mantiene la proporción para que la
   rejilla siga alineada, y el fondo suave disimula las bandas. */
.noticia-foto--portada {
    background: var(--fondo-suave);
}
 
.noticia-foto--portada img {
    object-fit: contain;
    padding: var(--e2);
}
 
/* El retrato sí se recorta, con el encuadre alto de siempre: las
   caras suelen quedar en el tercio superior. */
.noticia-foto--retrato img {
    object-fit: cover;
    object-position: center 20%;
}
 
/* Sin ninguna de las tres, la tarjeta va solo con texto. No se
   reserva hueco ni se pinta un rectángulo vacío. */
.noticia-tarjeta.sin-foto .noticia-foto { display: none; }

/* =====================================================================
   10. AGENDA

   La portada manda: es lo que identifica el acto de un vistazo. El
   campo `titulo` de la tabla es el nombre del lugar, así que el
   titular se compone con el tipo de acto y el título del libro.
   ===================================================================== */

.pestanas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e1);
    margin: var(--e4) 0 var(--e5);
    border-bottom: 1px solid var(--borde);
}

.pestanas a {
    padding: var(--e2) var(--e4);
    border: 1px solid var(--borde);
    border-bottom: 0;
    margin-bottom: -1px;
    background: var(--fondo-suave);
    text-decoration: none;
    font-size: .95rem;
}

.pestanas a span { opacity: .5; font-size: .85em; margin-left: .35em; }

.pestanas a.activa {
    background: var(--color-fondo, #fff);
    border-bottom: 1px solid var(--color-fondo, #fff);
    font-weight: 600;
}

.rejilla-eventos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
    gap: var(--e4);
    margin-top: var(--e4);
}

.evento-tarjeta {
    border: 1px solid var(--borde);
    transition: border-color var(--transicion), transform var(--transicion);
}

.evento-tarjeta:hover {
    border-color: var(--color-principal, #1a1a1a);
    transform: translateY(-2px);
}

.evento-tarjeta > a {
    display: block;
    padding: var(--e3);
    text-decoration: none;
    height: 100%;
}

.evento-tarjeta h3 {
    margin: 0 0 var(--e2);
    padding-bottom: var(--e2);
    border-bottom: 1px solid var(--borde);
    font-size: 1.05rem;
    line-height: 1.3;
}

.evento-tipo {
    display: block;
    font-size: .75rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--color-secundario, #8a6d3b);
    font-family: var(--tipografia-texto, system-ui, sans-serif);
    font-weight: 400;
}

.evento-cuerpo { display: flex; gap: var(--e3); align-items: flex-start; }
.evento-portada { flex: 0 0 4.5rem; }

.evento-portada img {
    width: 100%;
    box-shadow: 0 1px 2px rgb(0 0 0 / .18), 0 4px 10px rgb(0 0 0 / .10);
}

.evento-datos { flex: 1; min-width: 0; }

.evento-fecha {
    margin: 0 0 var(--e1);
    font-weight: 600;
    color: var(--color-principal, #1a1a1a);
}

.evento-hora { display: block; font-weight: 400; opacity: .8; }
.evento-lugar,
.evento-autores { margin: 0 0 var(--e1); font-size: .9rem; opacity: .8; }

.eventos-pasados { margin-top: var(--e6); }
.eventos-pasados summary { cursor: pointer; font-weight: 600; }
.eventos-pasados .rejilla-eventos { opacity: .7; }

/* Ficha del evento */
.evento-ficha { max-width: min(52rem, 100%); }
.evento-ficha-cuerpo { display: flex; flex-wrap: wrap; gap: var(--e5); }
.evento-ficha-portada { flex: 0 0 12rem; }

.evento-ficha-portada img {
    width: 100%;
    box-shadow: 0 2px 4px rgb(0 0 0 / .18), 0 10px 24px rgb(0 0 0 / .14);
}

.evento-ficha-datos { flex: 1 1 20rem; }
.evento-ficha h1 { margin: var(--e1) 0 var(--e3); }
.evento-ficha .cuando { font-size: 1.1rem; font-weight: 600; margin-bottom: var(--e2); }
.evento-ficha .lugar { margin: 0 0 var(--e2); }
.evento-ficha .con,
.evento-ficha .presentan { font-size: .95rem; opacity: .85; margin: var(--e2) 0; }


/* =====================================================================
   11. COLECCIONES
   ===================================================================== */

.lista-colecciones {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: var(--e4);
    margin-top: var(--e4);
}

.coleccion-resumen {
    padding: var(--e3);
    border: 1px solid var(--borde);
}

.coleccion-resumen h2 { font-size: 1.1rem; margin: 0 0 var(--e2); }
.coleccion-resumen h2 a { text-decoration: none; }
.coleccion-resumen h2 a:hover { text-decoration: underline; }
.coleccion-resumen .descripcion { font-size: .9rem; opacity: .8; margin: 0 0 var(--e2); }
.coleccion-resumen .cuenta { margin: 0; font-size: .85rem; opacity: .6; }


/* =====================================================================
   12. PÁGINAS INFORMATIVAS Y LEGALES
   ===================================================================== */

.contactos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: var(--e5);
    margin: var(--e5) 0;
}

.contacto-bloque {
    padding-top: var(--e3);
    border-top: 2px solid var(--color-secundario, #8a6d3b);
}

.contacto-bloque h2 { font-size: 1.05rem; margin-bottom: var(--e2); }
.contacto-bloque p { margin: var(--e1) 0; }
.contacto-bloque .nombre { font-weight: 600; }
.contacto-bloque .fax { opacity: .7; font-size: .9rem; }

.aviso-originales {
    max-width: var(--medida);
    padding: var(--e3);
    background: color-mix(in srgb, var(--color-secundario, #8a6d3b) 10%, transparent);
}

.texto-largo { max-width: var(--medida); }
.texto-largo .consejos { padding-left: var(--e4); }
.texto-largo .consejos li { margin-bottom: var(--e3); }
.texto-largo h2 { margin-top: var(--e5); font-size: 1.25rem; }
.texto-largo h3 { margin-top: var(--e4); }
.direccion { line-height: 1.5; }

.tabla-cookies {
    width: 100%;
    border-collapse: collapse;
    margin: var(--e3) 0;
    font-size: .9rem;
}

.tabla-cookies th,
.tabla-cookies td {
    padding: var(--e2);
    border-bottom: 1px solid var(--borde);
    text-align: left;
}

.tabla-cookies th { font-weight: 600; opacity: .7; }

.enlaces-navegadores { padding-left: var(--e4); }

.pie-direccion {
    margin-top: var(--e5);
    padding-top: var(--e3);
    border-top: 1px solid var(--borde);
    font-style: normal;
    font-size: .85rem;
    opacity: .75;
}

/* La entradilla de la página. No se reutiliza .entradilla porque esa
   clase solo está definida dentro de las tarjetas de noticia y de
   entrada; suelta aquí no heredaría nada. */
.distribucion-intro {
    max-width: var(--medida);
    margin: calc(var(--e2) * -1) 0 var(--e5);
    font-size: 1.05rem;
    opacity: .85;
}
 
/* La rejilla se llena sola: en España son tres fichas y en el resto de
   territorios una sola, así que un número fijo de columnas dejaría
   huecos en casi todas las secciones. El mínimo de 17rem es el ancho
   por debajo del cual un correo largo —relacioncomercial@nirvana...—
   empieza a partirse en tres líneas. */
.distribucion-lista {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    gap: var(--e4);
    align-items: start;
}
 
/* Mismo tratamiento que .resena: caja con filete de acento arriba.
   Son las dos piezas del sitio que presentan un dato de tercero, y
   conviene que se lean como la misma familia. */
.distribuidor {
    height: 100%;
    padding: var(--e4);
    border: 1px solid var(--borde);
    border-top: 3px solid var(--color-secundario, #8a6d3b);
    background: var(--fondo-suave);
}
 
/* La zona es el antetítulo de la ficha: en España distingue Madrid de
   Cataluña o de grandes superficies, que es justo lo que se busca. */
.distribuidor-zona {
    margin: 0 0 var(--e1);
    font-size: .75rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--color-secundario, #8a6d3b);
}
 
.distribuidor h3 {
    margin: 0 0 var(--e2);
    font-family: var(--tipografia-titulos, Georgia, serif);
    font-size: 1.05rem;
    line-height: 1.3;
}
 
.distribuidor-direccion,
.distribuidor-contacto {
    margin: 0 0 var(--e2);
    font-size: .9rem;
    line-height: 1.5;
    opacity: .85;
}
 
.distribuidor-contacto { font-weight: 600; opacity: 1; }
 
.distribuidor-datos {
    margin: 0;
    padding-top: var(--e2);
    border-top: 1px solid var(--borde-tenue);
    list-style: none;
    font-size: .9rem;
}
 
.distribuidor-datos li { margin-bottom: var(--e1); }
.distribuidor-datos li:last-child { margin-bottom: 0; }
 
/* Los correos largos no caben en el ancho de la caja: se parten por
   donde puedan en vez de desbordarla. */
.distribuidor-datos a {
    text-decoration-color: var(--borde);
    overflow-wrap: anywhere;
}
 
.distribuidor-datos a:hover { text-decoration-color: currentColor; }
 
/* «Pedidos» y «Comercial» en su propia línea y en pequeño: son el
   rótulo del dato, no el dato. Sin ellos, dos correos seguidos no
   dicen a cuál escribir. */
.distribuidor-etiqueta {
    display: block;
    font-size: .7rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    opacity: .55;
}
 
.distribuidor-nota {
    margin: var(--e2) 0 0;
    font-size: .85rem;
    font-style: italic;
    opacity: .7;
}


/* =====================================================================
   13. AVISO DE COOKIES

   Rechazar tiene que costar lo mismo que aceptar: mismo tamaño, mismo
   sitio y un solo clic. Por eso los botones son iguales salvo el color
   del principal.
   ===================================================================== */

.cookies-aviso {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 100;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--e3) var(--e4);
    max-width: var(--ancho-maximo);
    margin: var(--e3) auto;
    padding: var(--e3) var(--e4);
    background: var(--color-fondo, #fff);
    border: 1px solid var(--color-principal, #1a1a1a);
    box-shadow: 0 4px 24px rgb(0 0 0 / 0.18);
    font-size: .9rem;
}

.cookies-texto { flex: 1 1 20rem; }
.cookies-texto p { margin: 0 0 var(--e1); }

.cookies-botones { display: flex; flex-wrap: wrap; gap: var(--e2); }

.cookies-aviso button {
    padding: var(--e2) var(--e4);
    border: 1px solid var(--color-principal, #1a1a1a);
    font: inherit;
    cursor: pointer;
}

.cookies-aviso .boton-secundario {
    background: transparent;
    color: inherit;
}

.cookies-aviso .boton-secundario:hover {
    background: color-mix(in srgb, var(--color-principal, #1a1a1a) 10%, transparent);
}

/* El atributo hidden lo aplica el navegador con display:none, y el
   display:flex de arriba lo anularía. Hay que devolverle la prioridad. */
.cookies-aviso[hidden] { display: none; }

.cookies-ajustes { flex: 1 1 100%; }

.cookies-opcion {
    display: flex;
    gap: var(--e2);
    align-items: flex-start;
    margin-bottom: var(--e2);
}

.cookies-opcion input { margin-top: .25em; }


/* =====================================================================
   14. PREMIOS

   Las imágenes de los premios son carteles con proporciones muy
   distintas entre sí, así que cada una se apoya en su caja sin
   recortarse. Es el mismo criterio que las portadas de libro.
   ===================================================================== */

.premios {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
    gap: var(--e5) var(--e4);
    margin: var(--e4) 0 var(--e6);
}

.premio { text-align: center; }
.premio > a { display: block; text-decoration: none; }

.premio img {
    width: 100%;
    margin-bottom: var(--e2);
    border: 1px solid var(--borde);
    box-shadow: 0 1px 3px rgb(0 0 0 / 0.14);
    transition: transform var(--transicion), box-shadow var(--transicion);
}

.premio > a:hover img {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgb(0 0 0 / 0.16);
}

.premio h3 {
    margin: 0 0 var(--e1);
    font-size: 1rem;
    text-wrap: balance;
}

.premio > a:hover h3 { color: var(--color-principal, #1a1a1a); }

.premio .descripcion {
    margin: var(--e2) 0;
    font-size: 0.9rem;
    text-align: left;
}

/* El estado del plazo, sin fecha: la exacta está en las bases. */
.premio .plazo {
    display: inline-block;
    margin: 0 0 var(--e2);
    padding: 0.1em 0.6em;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.premio .plazo.abierto {
    background: color-mix(in srgb, var(--color-secundario, #8a6d3b) 18%, transparent);
}

.premio .plazo.cerrado {
    background: color-mix(in srgb, var(--color-texto, #222) 8%, transparent);
    opacity: 0.7;
}

.premio .palmares {
    margin: var(--e2) 0;
    font-size: 0.88rem;
    text-align: left;
    opacity: 0.85;
}

.premio .bases {
    margin: var(--e2) 0 0;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.premio .bases a { text-decoration: none; opacity: 0.7; }
.premio .bases a:hover { opacity: 1; text-decoration: underline; }


/* =====================================================================
   15. ERRORES
   ===================================================================== */

.error {
    max-width: var(--medida);
    margin: 0 auto;
    padding: var(--e6) 0;
    text-align: center;
}

/* Decorativo y grande, pero sin gritar: el número orienta, el título
   es lo que se lee. */
.error-codigo {
    margin: 0;
    font-family: var(--tipografia-titulos, Georgia, serif);
    font-size: 4.5rem;
    line-height: 1;
    opacity: .15;
}

.error h1 { margin: 0 0 var(--e3); }
.error-texto { margin: 0 0 var(--e5); }

.error-buscador label {
    display: block;
    margin-bottom: var(--e1);
    font-size: 0.85rem;
    opacity: .7;
}

/* Mismos controles que el buscador de la cabecera, en tamaño de
   página: si aquí divergieran, serían dos buscadores distintos en el
   mismo sitio. */
.error-buscador-campos { display: flex; gap: var(--e2); }

.error-buscador input {
    flex: 1 1 auto;
    min-width: 0;
    padding: var(--e2) var(--e3);
    border: 1px solid var(--borde);
    background: transparent;
    color: inherit;
    font: inherit;
}

.error-buscador button {
    flex: 0 0 auto;
    padding: var(--e2) var(--e4);
    border: 1px solid var(--color-principal, #1a1a1a);
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
    transition: background var(--transicion), color var(--transicion);
}

.error-buscador button:hover {
    background: var(--color-principal, #1a1a1a);
    color: var(--color-fondo, #fff);
}

.error-enlaces {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--e2) var(--e4);
    margin-top: var(--e5);
    font-size: 0.9rem;
}


/* =====================================================================
   16. PANTALLAS PEQUEÑAS Y MOVIMIENTO REDUCIDO

   Un único punto de ruptura para todo el sitio. Antes había tres
   bloques repartidos por el archivo, más dos en píxeles, y no había
   forma de saber qué anulaba qué.
   ===================================================================== */

@media (max-width: 46rem) {

    /* Las fichas pasan a una columna */
    .ficha-libro,
    .ficha-autor { grid-template-columns: 1fr; }

    .ficha-retrato { max-width: 11rem; }
    .ficha-portada { max-width: 14rem; }

    /* En las filas manda el ancho mínimo, no el número de columnas:
       siete portadas en un teléfono no se ven. El !important es
       necesario porque --columnas llega en el atributo style. */
    .rejilla { grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)) !important; }

    .cabecera { padding-block: var(--e3); }

    .rejilla-noticias { grid-template-columns: 1fr; }
    .noticia-tarjeta.destacada { grid-column: span 1; }

    .resenas-rejilla { grid-template-columns: 1fr; }

    /* El retrato del autor, encima de su biografía */
    .autor-perfil { flex-direction: column; }
    .autor-retrato { width: 6rem; height: 6rem; }

    .cookies-aviso { margin: 0; border-left: 0; border-right: 0; }
    .cookies-botones { width: 100%; }
    .cookies-botones button { flex: 1; }

    /* El índice de categorías baja bajo el listado */
    .blog-columnas { grid-template-columns: 1fr; gap: var(--e5); }
 
    /* La foto, encima del texto: a 13rem no queda sitio para las dos */
    .entrada-tarjeta,
    .lista-entradas.compacta .entrada-tarjeta { grid-template-columns: 1fr; }
 
    .entrada-tarjeta.destacada h3 { font-size: 1.35rem; }
    /* A una columna las cajas quedan muy
	altas para el poco texto que
       llevan: menos aire dentro y las fichas se recorren antes. */
    .distribuidor { padding: var(--e3); }

    /* En el teléfono, dos o tres por fila en vez de una lista larga */
    .pie-marcas ul {
        grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
    }
 
    .pie-marcas a { font-size: .8rem; }

}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}