@charset "UTF-8";
/* ==========================================================================
   master.css — Hoja de estilos única de bellatinta
   Librería · Café · Talleres · Comunidad
   Paleta cálida y elegante tomada del logotipo: espresso sobre crema,
   con acentos en terracota, dorado y verde oliva. Sin colores estridentes.
   Todo el CSS del sitio vive aquí, comentado y agrupado por secciones.

   Índice:
     1. Variables de color y tipografía
     2. Reinicio y base
     3. Tipografía general
     4. Contenedores y utilidades de maquetación
     5. Botones
     6. Cabecera y navegación
     7. Pie de página
     8. Portada (hero) y bloques de inicio
     9. Tarjetas (libros, talleres) y rejillas
    10. Carta del café
    11. Formularios
    12. Carrito y tienda
    13. Mensajes / avisos
    14. Tablas y panel de administración
    15. Adaptación a móviles (responsive)

   Desarrollado por Iñaki Serrano para Webcomunica.solutions
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Variables de color y tipografía
   -------------------------------------------------------------------------- */
:root {
    /* Colores: ver el bloque PALETA DEFINITIVA al final de este fichero (y CLAUDE.md) */

    /* Tipografía */
    --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
    --sans:  "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

    /* Medidas */
    --ancho-max: 1140px;
    --radio: 10px;
}

/* --------------------------------------------------------------------------
   2. Reinicio y base
   -------------------------------------------------------------------------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* ============================================================
   Landing de pre-lanzamiento ("próximamente")
   ============================================================ */
.landing-cuerpo {
    margin: 0; min-height: 100vh; min-height: 100svh;
    display: flex; align-items: center; justify-content: center;
    background: var(--crema); color: var(--espresso);   /* fondo EXACTO del logo */
    font-family: var(--sans); padding: 32px 22px;
}
.landing { width: 100%; max-width: 660px; text-align: center; }
.landing-logo { width: 100%; max-width: 320px; height: auto; margin: 0 auto 26px; display: block; }
.landing-eyebrow {
    font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .2em;
    color: var(--terracota); margin: 0 0 16px;
}
.landing-titulo {
    font-family: var(--serif); font-weight: 600; font-size: clamp(1.55rem, 4.2vw, 2.1rem);
    line-height: 1.22; margin: 0 0 16px; text-wrap: balance;
}
.landing-texto {
    font-size: 1.05rem; line-height: 1.7; color: var(--marron); margin: 0 auto 30px; max-width: none;
    text-align: center;
}
.landing-texto strong { color: var(--espresso); }
/* 540 y no 440: dentro va el recuadro de qué quieres recibir, y con 440 la
   primera descripción necesitaba 406px en un hueco de 344 y se partía en dos
   líneas. El texto es de Marta, así que se ensancha la caja, no se recorta. */
.landing-form {
    display: flex; gap: 10px; max-width: 540px; margin: 0 auto; flex-wrap: wrap;
}
.landing-form input {
    flex: 1 1 220px; min-width: 0; padding: 14px 16px; font-size: 1rem;
    border: 1px solid var(--borde); border-radius: var(--radio); background: var(--blanco); color: var(--espresso);
}
.landing-form input:focus { outline: none; border-color: var(--terracota); }
.landing-form .boton { flex: 0 0 auto; padding: 14px 26px; }
.landing-msg { min-height: 1.2em; margin: 14px 0 0; font-weight: 600; }
.landing-msg.ok { color: var(--petroleo); }
.landing-msg.error { color: var(--terracota); }
.landing-nota { font-size: .82rem; color: var(--dorado); margin: 14px 0 0; }
/* Bloque social: "Síguenos" + mano animada + botón de Instagram */
.landing-social { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 34px; }
.landing-social-cta {
    display: inline-flex; align-items: center; gap: 8px;
    font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: .82rem; color: var(--espresso);
}
.landing-social-cta .flecha { width: 50px; height: 27px; color: var(--terracota); flex: 0 0 auto; animation: flecha-apunta 1s ease-in-out infinite; }
@keyframes flecha-apunta { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(8px); } }
.landing-insta {
    display: inline-flex; align-items: center; gap: 9px;
    background: var(--espresso); color: var(--crema); text-decoration: none;
    font-size: .92rem; font-weight: 600; padding: 11px 20px; border-radius: 40px;
    transition: background .15s;
}
.landing-insta:hover { background: var(--terracota); color: var(--crema); }
.landing-insta svg { width: 18px; height: 18px; }
/* En móvil se apila y la mano apunta hacia abajo (al botón) */
@media (max-width: 560px) {
    .landing-social { flex-direction: column; gap: 8px; }
    .landing-social-cta .flecha { animation: flecha-apunta-abajo 1s ease-in-out infinite; }
    @keyframes flecha-apunta-abajo { 0%, 100% { transform: rotate(90deg) translateX(0); } 50% { transform: rotate(90deg) translateX(8px); } }
}
@media (max-width: 480px) {
    .landing-form { flex-direction: column; }
    .landing-form input { flex: 0 0 auto; width: 100%; }   /* que no crezca en vertical */
    .landing-form .boton { width: 100%; }
    .landing-logo { max-width: 280px; }
}

html { overflow-x: clip; }
/* Tamaño de letra de toda la web. Todo va en rem, así que subir la raíz sube todos los textos a la vez:
   18 px de cuerpo en el ordenador (antes 17) y los textos pequeños pasan de ~13,6 a ~15,3 px. En el móvil, 17 px. */
html { font-size: 112.5%; }
@media (max-width: 720px) { html { font-size: 106.25%; } }
body {
    font-family: var(--sans);
    font-size: 1rem;
    line-height: 1.65;
    color: var(--espresso);
    background-color: var(--crema);  /* off-white cálido (fondo de página) */
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;         /* evita desbordes horizontales (efecto "zoom" en Mac) */
    max-width: 100%;
}
/* Ningún elemento debe superar el ancho de la pantalla */
img, svg, video, table { max-width: 100%; }

img { max-width: 100%; display: block; }
a   { color: var(--terracota); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--terracota-osc); }

/* --------------------------------------------------------------------------
   3. Tipografía general
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
    font-family: var(--serif);
    font-weight: 600;
    line-height: 1.2;
    color: var(--espresso);
}
h1 { font-size: 2.9rem; }
h2 { font-size: 2.2rem; }
h3 { font-size: 1.5rem; }
p  { margin-bottom: 1rem; }

/* Subtítulo en mayúsculas espaciadas, como el lema del logotipo */
.lema {
    font-family: var(--sans);
    text-transform: uppercase;
    letter-spacing: .22em;
    font-size: .8rem;
    color: var(--dorado);
    font-weight: 600;
}

/* Título de sección centrado con pequeño antetítulo */
.titulo-seccion { text-align: center; margin-bottom: 2.5rem; }
/* Cuando debajo del título va un párrafo de entrada, se acercan: son la misma
   idea y separarlos tanto los desune */
.titulo-seccion:has(+ p) { margin-bottom: 1rem; }
/* …y por debajo pasa lo contrario: ese párrafo de entrada necesita aire antes
   de lo que viene después. Con el margen normal de un párrafo (17px) quedaba
   pegado a las tarjetas y se perdía entre el título y la rejilla; lo dijo Marta
   el 15-09-2026 mirando Historias. Vale para todas las páginas que llevan
   entradilla, que están todas montadas igual. */
.titulo-seccion + p.medido { margin-bottom: 2.6rem; }
.titulo-seccion p { margin-top: .6rem; }
.titulo-seccion .lema { display: block; margin-bottom: .6rem; }
.titulo-seccion h2 { font-size: 2.4rem; }
/* El título de cada página es el h1 (Google lo necesita), pero se ve igual que cuando era h2 */
h1.h1-como-h2 { font-size: 2.2rem; letter-spacing: normal; margin-top: 0; margin-bottom: 0; line-height: 1.2; }
.titulo-seccion h1.h1-como-h2 { font-size: 2.4rem; }

/* --------------------------------------------------------------------------
   4. Contenedores y utilidades de maquetación
   -------------------------------------------------------------------------- */
.contenedor {
    width: 100%;
    max-width: var(--ancho-max);
    margin: 0 auto;
    padding: 0 24px;
}

.seccion        { padding: 70px 0; }
.seccion-clara  { background: var(--crema-claro); }
.seccion-blanca { background: var(--blanco); }

.centrado     { text-align: center; }
/* 🔴 REGLA DE LA CASA (13-09-2026): los párrafos de texto van SIEMPRE
   justificados, nunca centrados. A Iñaki el texto centrado no le gusta: quiere
   que todas las líneas midan lo mismo.
   Se aplica a `p.medido`, que es como está marcada la prosa en toda la web, y
   NO a los `<p class="centrado">` que solo envuelven un botón, que esos sí
   tienen que seguir centrados.
   `hyphens: none` es innegociable: al partir palabras salía «bella-tinta». */
p.medido {
    text-align: justify;
    text-justify: inter-word;
    hyphens: none;
}
/* Excepción, y es la única que tiene sentido: un párrafo cuyos saltos de línea
   están puestos a mano (con <br>) NO se justifica. Justificar no hace nada en
   una línea que acaba en <br>, así que lo único que consigue es quitarle el
   centrado y descuadrarlo respecto al título de encima. Pasó en la portada:
   «Creemos en los libros» centrado y su texto pegado a la izquierda.
   La segunda regla es la general, por si aparece otro; la primera cubre los
   navegadores que aún no entienden :has(). */
p.medido.sub,
p.medido:has(br) {
    text-align: center;
    text-justify: auto;
}

/* 🔴 Y AHORA EN SERIO: TODO EL TEXTO DE LA WEB, VENGA DE DONDE VENGA.
   La regla de arriba solo alcanzaba a los párrafos marcados con `medido`, que
   son los que están escritos a mano en las páginas. Todo lo que sale de la
   base de datos —la descripción de un taller, la de un club, el texto de una
   tarjeta— se pintaba sin esa clase y salía en bandera. Lo cazó Iñaki el
   15-09-2026 en la ficha de Editores Voladores, y con razón: la regla era
   «todos los textos», no «los que yo me acuerde de marcar».
   Va sobre `main`, así que cubre la web pública entera y también las páginas
   que se escriban mañana, sin tener que acordarse de nada. El panel queda
   fuera a propósito: ahí se rellenan formularios, no se lee.
   En un párrafo de una sola línea justificar no hace nada (la última línea
   nunca se estira), así que esto solo se nota donde de verdad hay texto. */
main p,
main li,
main dd,
main blockquote {
    text-align: justify;
    text-justify: inter-word;
    hyphens: none;
}

/* Un párrafo cuyos saltos de línea están puestos a mano NO se justifica:
   justificar no hace nada en una línea que acaba en <br>, y lo único que
   consigue es descuadrar lo que ya estaba en su sitio. En bandera se queda,
   por ejemplo, la dirección postal de «Cómo visitarnos». Si además estaba
   centrado a propósito, manda la regla de abajo. */
main p:has(br) {
    text-align: start;
    text-justify: auto;
}

/* Lo que sigue centrado, porque no es texto corrido y justificarlo lo
   descuadra: los párrafos que solo envuelven un botón o un enlace, las notas
   de una línea al pie de un formulario, el reclamo de la portada y de la
   landing, la entradilla y la firma de un artículo, y los párrafos cuyos
   saltos de línea están puestos a mano. */
main p.centrado:not(.medido),
main p.medido.sub,
main p.medido:has(br),
.landing > p,
main .nota-privacidad,
main .hero-min p,
main .articulo-cab p,
main .cierre-marca p,
main .nosotros-remate,
main .test-cabecera p,
main .test-opcion p,
main .saldo-resultado p,
main .modal-caja p {
    text-align: center;
    text-justify: auto;
}
.espacio-sup  { margin-top: 1.5rem; }
.medido       { max-width: 680px; margin-left: auto; margin-right: auto; }

/* --------------------------------------------------------------------------
   5. Botones
   -------------------------------------------------------------------------- */
.boton {
    display: inline-block;
    font-family: var(--sans);
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: .03em;
    padding: 13px 28px;
    border: 1px solid var(--terracota);
    border-radius: var(--radio);
    background: var(--terracota);
    color: var(--crema);
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.boton:hover { background: var(--terracota-osc); border-color: var(--terracota-osc); color: var(--crema); }

/* Botón secundario (contorno) */
.boton-linea {
    background: transparent;
    color: var(--espresso);
    border-color: var(--espresso);
}
.boton-linea:hover { background: var(--espresso); color: var(--crema); }

.boton-pequeno { padding: 8px 16px; font-size: .85rem; }
.boton-bloque  { display: block; width: 100%; text-align: center; }

/* --------------------------------------------------------------------------
   6. Cabecera y navegación
   -------------------------------------------------------------------------- */
/* Bloque superior fijo: barra del recomendador + cabecera */
.top-fijo { position: sticky; top: 0; z-index: 60; }
.cabecera {
    background: var(--crema);
    border-bottom: 1px solid var(--borde);
    box-shadow: 0 4px 14px rgba(0, 89, 120, .05);
}
/* Barra superior clicable que lanza el recomendador (PC/tablet) */
.barra-test { display: block; background: var(--terracota); color: var(--crema); text-decoration: none; transition: background .2s; }
.barra-test:hover { background: var(--terracota-osc); color: var(--crema); }
.barra-test-cont { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 0; font-size: .9rem; flex-wrap: wrap; }
.barra-test strong { font-weight: 700; text-decoration: underline; }
@media (max-width: 900px) { .barra-test { display: none; } }

/* Franja de ventajas: ticker deslizante tipo teleprompt */
.barra-ventajas { background: var(--espresso); color: var(--crema-claro); overflow: hidden; }
.ticker { display: flex; width: max-content; animation: ticker-mueve 136s linear infinite; }
.ticker:hover { animation-play-state: paused; }
.ticker-grupo { display: flex; }
.barra-ventajas .ventaja {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 11px 42px; font-size: .85rem; white-space: nowrap;
}
.barra-ventajas .ventaja .ico { display: inline-flex; color: var(--terracota); }
.barra-ventajas .ventaja svg { width: 18px; height: 18px; display: block; }
.barra-ventajas .ventaja strong { color: var(--crema); font-weight: 600; }
@keyframes ticker-mueve { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker { animation: none; } }
/* Items clicables del ticker */
.barra-ventajas button.ventaja { background: none; border: 0; font-family: inherit; font-weight: inherit; color: inherit; cursor: pointer; }
.barra-ventajas a.ventaja { color: inherit; cursor: pointer; }
.barra-ventajas a.ventaja:hover, .barra-ventajas button.ventaja:hover { color: var(--crema); }

/* Ventana modal (newsletter, avisos) */
.modal { position: fixed; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center; }
.modal[hidden] { display: none; }
.modal-fondo { position: absolute; inset: 0; background: rgba(0, 89, 120, .55); }
.modal-caja {
    position: relative; z-index: 1; background: var(--blanco);
    border-radius: var(--radio); padding: 34px 30px; width: 92%; max-width: 460px;
    box-shadow: 0 24px 60px rgba(0, 89, 120, .35); text-align: center;
}
.modal-caja h3 { font-size: 1.6rem; margin-bottom: 8px; }
.modal-caja p { color: var(--marron); margin-bottom: 18px; }
.modal-cerrar { position: absolute; top: 8px; right: 12px; background: none; border: 0; font-size: 1.7rem; line-height: 1; color: var(--marron); cursor: pointer; }
.modal .suscripcion { justify-content: center; margin: 0 auto; }
.modal-msg { margin: 14px 0 0; font-weight: 600; min-height: 1.2em; }
.modal-msg.ok { color: var(--petroleo); }
.modal-msg.error { color: var(--terracota); }
/* Modal de confirmación (sustituye a los alert/confirm nativos) */
.modal-confirmar { max-width: 420px; }
.modal-confirmar h3 { font-size: 1.35rem; margin-bottom: 10px; }
.modal-confirmar-texto { color: var(--marron); margin-bottom: 22px; font-size: 1rem; }
.modal-acciones { display: flex; gap: 12px; justify-content: center; }
.modal-acciones .boton { flex: 1; max-width: 180px; }
@media (max-width: 420px) { .modal-acciones { flex-direction: column; } .modal-acciones .boton { max-width: none; } }

/* Formularios del panel en dos columnas: los bloques se apilan dentro de cada
   una, sin el hueco que deja una rejilla normal cuando una columna es más alta
   que la otra. Cada bloque pega con el siguiente, no con el de al lado. */
.form-columnas { align-items: start; gap: 16px; }
.form-columnas > div > .form-bloque { margin-bottom: 16px; }
.form-columnas > div > .form-bloque:last-child { margin-bottom: 0; }
/* Aquí el aire se mide: un formulario de alta que no cabe en la pantalla
   obliga a bajar para dar a Guardar, y eso se nota cada vez que se usa. Se
   recorta el marco, no el contenido: los campos siguen igual de grandes. */
.form-columnas .form-bloque { padding: 15px 18px; }
.form-columnas .form-bloque > h3 { font-size: 1rem; margin-bottom: 10px; padding-bottom: 8px; }
.form-columnas .campo { margin-bottom: 13px; }
.form-columnas .campo-doble { gap: 14px; }
.form-columnas .campo-doble .campo { margin-bottom: 0; }
/* La casilla necesita separarse del texto de ayuda de arriba o parece
   que forma parte de él. */
.form-columnas .campo-check { margin-top: 14px; }

/* Campo de imagen del panel: la miniatura al lado de los botones, para ver de
   un vistazo si hay imagen puesta y cuál. Antes esto era un cuadro de texto
   donde había que escribir el nombre del fichero a mano. */
.imagen-campo { display: flex; align-items: flex-start; gap: 18px; flex-wrap: wrap; }
.imagen-vista {
    flex: 0 0 auto; width: 190px;
    border: 1px solid var(--borde); border-radius: var(--radio);
    overflow: hidden; background: var(--crema-claro);
}
.imagen-vista img { display: block; width: 100%; height: auto; }
/* La vista previa del panel recorta igual que la web, asi que lo que Marta ve
   aqui es exactamente lo que va a salir en la tarjeta. Sin esto la foto se
   veia entera en el panel y recortada en la web, que es peor que no avisar. */
.imagen-vista-recorte img { height: 100%; object-fit: cover; object-position: center; }
.imagen-vista-32  { aspect-ratio: 3 / 2; }
.imagen-vista-169 { aspect-ratio: 16 / 9; }
/* Aviso cuando la imagen elegida es mas alta que ancha */
.aviso-imagen { flex: 1 1 100%; margin: 0; color: var(--terracota-osc); font-size: .85rem; }
.imagen-acciones { flex: 1 1 240px; min-width: 0; display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }
.imagen-acciones .ayuda-campo { flex: 1 1 100%; margin: 0; }
@media (max-width: 560px) { .imagen-vista { width: 100%; } }

/* Selector de imágenes ya subidas (editor del blog). Es ancho a propósito:
   se elige por la miniatura, no por el nombre del fichero. */
.modal-biblioteca { max-width: 900px; text-align: left; padding: 28px; }
.modal-biblioteca h3 { text-align: left; }
.biblioteca-subir {
    border: 1px dashed var(--borde); border-radius: var(--radio);
    padding: 14px 16px; margin-bottom: 16px;
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.biblioteca-subir span { color: var(--marron); font-size: .9rem; }
.biblioteca-rejilla {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px; max-height: 52vh; overflow-y: auto; padding: 2px;
}
.biblioteca-item {
    position: relative; border: 1px solid var(--borde); border-radius: 10px;
    overflow: hidden; cursor: pointer; background: var(--crema-claro); padding: 0;
}
.biblioteca-item img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.biblioteca-item.elegida { outline: 3px solid var(--terracota); outline-offset: -3px; }
.biblioteca-item .orden {
    position: absolute; top: 6px; right: 6px; min-width: 22px; height: 22px;
    border-radius: 11px; background: var(--terracota); color: var(--crema);
    font-size: .78rem; font-weight: 700; display: none;
    align-items: center; justify-content: center;
}
.biblioteca-item.elegida .orden { display: flex; }
.biblioteca-vacia { color: var(--marron); padding: 30px 0; text-align: center; }

/* Cabecera con LOGO CENTRADO y el menú partido a ambos lados */
.cab {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 24px;
    padding-top: 14px;
    padding-bottom: 14px;
}
.cab .logo { grid-column: 2; justify-self: center; }
.logo img { height: 56px; width: auto; display: block; }

.menu { display: flex; align-items: center; gap: 24px; list-style: none; margin: 0; }
.menu.izq { grid-column: 1; justify-content: flex-end; }
.menu.der { grid-column: 3; justify-content: flex-start; }
.menu a {
    font-family: var(--sans);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--marron);
    padding-bottom: 4px;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
}
.menu a:hover,
.menu a.activo { color: var(--espresso); border-bottom-color: var(--terracota); }

/* Menú desplegable "La librería" (al pasar el ratón) */
.menu .tiene-submenu { position: relative; }
.menu .chevron { font-size: .55rem; margin-left: 4px; display: inline-block; transition: transform .2s ease; vertical-align: middle; }
.menu .tiene-submenu:hover .chevron { transform: rotate(180deg); }
.menu .submenu {
    position: absolute; top: 100%; left: 50%;
    transform: translateX(-50%) translateY(8px);
    min-width: 200px; margin: 0; padding: 8px; list-style: none;
    background: var(--blanco); border: 1px solid var(--borde);
    border-radius: 12px; box-shadow: 0 16px 36px var(--sombra);
    opacity: 0; visibility: hidden; z-index: 80;
    transition: opacity .16s ease, transform .16s ease;
}
.menu .tiene-submenu:hover .submenu {
    opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.menu .submenu li { display: block; }
.menu .submenu a {
    display: block; padding: 10px 14px; border: 0; border-radius: 8px;
    text-align: left;
    text-transform: none; letter-spacing: .01em; font-size: .9rem;
    color: var(--espresso); white-space: nowrap;
}
.menu .submenu button {
    display: block; width: 100%; text-align: left;
    padding: 10px 14px; border: 0; border-radius: 8px;
    background: none; cursor: pointer;
    font-family: var(--sans); font-size: .9rem; font-weight: 500;
    letter-spacing: .01em; color: var(--espresso); white-space: nowrap;
}
.menu .submenu a:hover,
.menu .submenu button:hover { border: 0; background: var(--crema-claro); color: var(--espresso); }

/* El submenú de la derecha se pega a su borde, que si no se sale de la pantalla */
.menu .submenu-der { left: auto; right: 0; transform: translateX(0) translateY(8px); }
.menu .tiene-submenu:hover .submenu-der { transform: translateX(0) translateY(0); }

/* Enlace del carrito con su contador */
.carrito-enlace .contador {
    display: inline-block;
    min-width: 20px;
    padding: 1px 6px;
    margin-left: 4px;
    font-size: .72rem;
    text-align: center;
    color: var(--crema-claro);
    background: var(--oliva);
    border-radius: 20px;
}

/* Importe de la cesta, junto al contador */
.carrito-enlace .carrito-importe { margin-left: 4px; text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--espresso); }

/* «Buscar» del menú y su panel bajo la cabecera */
.menu .abrir-buscador-cab {
    font-family: var(--sans); font-size: .78rem; text-transform: uppercase; letter-spacing: .12em;
    color: var(--marron); padding: 0 0 4px; background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer;
}
.menu .abrir-buscador-cab:hover, .menu .abrir-buscador-cab[aria-expanded="true"] { color: var(--espresso); border-bottom-color: var(--terracota); }
.buscador-cab { background: var(--crema-claro); border-bottom: 1px solid var(--borde); padding: 14px 0; }
.buscador-cab[hidden] { display: none; }
.buscador-cab .buscador-tienda { max-width: 720px; margin: 0 auto; }
.menu-full-buscar { display: flex; gap: 8px; margin: 0 0 14px; }
.menu-full-buscar input { flex: 1; min-width: 0; padding: 12px 14px; border: 1px solid var(--borde); border-radius: var(--radio); font: inherit; background: var(--blanco); color: var(--espresso); }
.menu-full-buscar button { padding: 12px 18px; border: 0; border-radius: var(--radio); background: var(--terracota); color: var(--crema); font: inherit; font-weight: 600; cursor: pointer; }

/* Botón hamburguesa (solo móvil): círculo terracota con tres barras crema, la
   última más corta. Mide 46 px para que se acierte con el pulgar. */
.menu-movil {
    display: none;
    width: 46px; height: 46px; padding: 0 13px;
    flex-direction: column; justify-content: center; align-items: flex-start; gap: 5px;
    background: var(--terracota); border: none; border-radius: 50%; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background .2s;
}
.menu-movil:active { background: var(--terracota-osc); }
.menu-movil span { display: block; width: 100%; height: 2px; border-radius: 2px; background: var(--crema-claro); }
.menu-movil span:nth-child(3) { width: 55%; }

/* Menú móvil a pantalla completa. Arriba, la misma barra crema de la cabecera;
   después un bloque a sangre por apartado, que rota entre terracota, espresso y
   crema como los lomos de una estantería; abajo, los botones de contacto.
   Con pocos apartados (.mf-grande) los bloques se reparten toda la altura y los
   títulos crecen hasta llenarla. */
.menu-full {
    position: fixed; top: 0; left: 0; right: 0; z-index: 300;
    height: 100vh; height: 100dvh;
    background: var(--espresso); color: var(--crema-claro);
    display: none; flex-direction: column;
    overflow-y: auto; overscroll-behavior: contain;
}
.menu-full.abierto { display: flex; animation: mf-fundido .3s ease both; }
/* Entra desde la izquierda con fundido: la barra, después cada bloque y por último los botones */
.menu-full.abierto .menu-full-top,
.menu-full.abierto .mf-grupo,
.menu-full.abierto .menu-full-pie { animation: mf-desde-izq .6s cubic-bezier(.2,.7,.2,1) backwards; }
.menu-full.abierto .mf-grupo { animation-delay: calc(.07s * var(--i, 1)); }
.menu-full.abierto .menu-full-pie { animation-delay: .38s; }
/* El texto llega un poco después que el bloque, para que no vaya todo de una pieza */
.menu-full.abierto .mf-cab,
.menu-full.abierto .mf-plegable { animation: mf-texto .6s cubic-bezier(.2,.7,.2,1) backwards; animation-delay: calc(.07s * var(--i, 1) + .16s); }
.menu-full.abierto .mf-fila .mf-titulo { animation: mf-texto .6s cubic-bezier(.2,.7,.2,1) backwards; animation-delay: calc(.07s * var(--i, 1) + .16s); }
.menu-full.cerrando { animation: mf-cierra .28s ease forwards; }
.menu-full-top {
    flex: 0 0 auto; display: flex; justify-content: space-between; align-items: center;
    padding: 10px 24px; background: var(--crema);
}
.menu-full-top .logo-menu { display: block; }
.menu-full-top .logo-menu img { height: 34px; width: auto; display: block; }
.menu-full-cerrar {
    position: relative; width: 46px; height: 46px; border: none; border-radius: 50%; padding: 0;
    background: var(--terracota); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.menu-full-cerrar span {
    position: absolute; top: 50%; left: 50%; width: 20px; height: 2px; margin: -1px 0 0 -10px;
    border-radius: 2px; background: var(--crema-claro);
}
.menu-full-cerrar span:nth-child(1) { transform: rotate(45deg); }
.menu-full-cerrar span:nth-child(2) { transform: rotate(-45deg); }

.menu-full-nav { flex: 1 0 auto; display: flex; flex-direction: column; }
.mf-grupo {
    --fondo: var(--granate); --tx: var(--crema); --ac: rgba(229, 228, 169, .8);
    --sub: var(--crema); --marca: rgba(229, 228, 169, .16);
    position: relative; overflow: hidden; flex: 1 1 auto;
    display: flex; flex-direction: column; justify-content: center;
    padding: 14px 24px 16px; background: var(--fondo); color: var(--tx);
}
.mf-grupo:nth-child(3n+2) { --fondo: var(--petroleo); --ac: rgba(229, 228, 169, .8); --marca: rgba(229, 228, 169, .16); }
.mf-grupo:nth-child(3n+3) { --fondo: var(--purpura); --ac: rgba(229, 228, 169, .8); --marca: rgba(229, 228, 169, .16); }

/* El número gigante que asoma por detrás, como el lomo de un tomo */
.mf-fondo {
    position: absolute; right: 8px; bottom: -.2em; z-index: 0;
    font-family: var(--serif); font-weight: 700; line-height: 1;
    font-size: clamp(5rem, 24vw, 7rem); color: var(--marca);
    pointer-events: none; user-select: none;
}
.mf-titulo, .mf-subs { position: relative; z-index: 1; }
.mf-titulo {
    display: flex; align-items: baseline; gap: 12px; min-width: 0;
    color: var(--tx); font-family: var(--serif); font-weight: 700;
    font-size: 2.1rem; line-height: 1.05;
}
.mf-titulo:active { opacity: .7; }
.mf-titulo .num { font-family: var(--sans); font-weight: 600; font-size: .8rem; color: var(--ac); flex: 0 0 26px; }
.mf-titulo .mf-nombre { min-width: 0; }
.mf-titulo .flecha { margin-left: auto; font-family: var(--sans); font-size: 1.5rem; color: var(--ac); }

/* Sub-apartados: una sola línea de texto separada por puntos, sin pastillas */
.mf-subs { display: flex; flex-wrap: wrap; align-items: center; margin: 0 0 0 38px; }
.mf-subs .sub-movil {
    display: inline-block; padding: 7px 0; border: 0; background: none;
    color: var(--sub); font: 500 clamp(.85rem, 3.8vw, 1rem)/1.3 var(--sans);
    cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.mf-subs .sub-movil:not(:last-child)::after { content: '·'; margin: 0 .6em; opacity: .55; }
.mf-subs .sub-movil:active { opacity: .6; }
/* Con seis apartados los sub-apartados pueden saltar de línea: ahí van separados por hueco, sin puntos colgando */
.menu-full-nav:not(.mf-grande) .mf-subs { column-gap: 20px; }
.menu-full-nav:not(.mf-grande) .mf-subs .sub-movil::after { display: none; }

.mf-cab { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; }
.mf-cab .mf-titulo { flex: 1; min-width: 0; }
.mf-plegable { position: relative; z-index: 1; display: grid; grid-template-rows: 1fr; transition: grid-template-rows .32s ease; }
.mf-plegable > .mf-subs { min-height: 0; overflow: hidden; }

/* Acordeón: con más de cuatro apartados los sub-apartados se pliegan tras un
   botón +/−, y solo hay uno abierto a la vez. Así el menú no crece por mucho
   que se añadan secciones: la altura de la pantalla no depende de cuántas haya. */
.mf-toggle {
    display: none; flex: 0 0 auto; position: relative; width: 42px; height: 42px; padding: 0;
    border: 2px solid var(--ac); border-radius: 50%; background: none; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.mf-toggle span {
    position: absolute; top: 50%; left: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px;
    border-radius: 2px; background: var(--tx); transition: transform .3s ease;
}
.mf-toggle span:nth-child(2) { transform: rotate(90deg); }
.mf-acordeon .mf-toggle { display: block; }
.mf-acordeon .mf-cab .flecha { display: none; }
.mf-acordeon.desplegado .mf-toggle span:nth-child(2) { transform: rotate(0deg); }
.mf-acordeon:not(.desplegado) .mf-plegable { grid-template-rows: 0fr; }
.mf-acordeon:not(.desplegado) .mf-subs { visibility: hidden; transition: visibility 0s .32s; }

/* Acceder y Carrito, en una sola fila de dos columnas */
.mf-fila { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; column-gap: 18px; }
.mf-fila .mf-titulo + .mf-titulo { padding-left: 18px; border-left: 2px solid var(--ac); }

/* Pocos apartados: el número pasa encima del título y todo crece */
.menu-full-nav.mf-grande .mf-grupo { padding: 22px 24px 24px; }
.menu-full-nav.mf-grande .mf-titulo { flex-wrap: wrap; gap: 0 10px; font-size: clamp(2.7rem, 15.5vw, 5rem); }
.menu-full-nav.mf-grande .mf-titulo .num { flex: 1 0 100%; font-size: .85rem; letter-spacing: .08em; margin-bottom: 2px; }
.menu-full-nav.mf-grande .mf-titulo .flecha { align-self: center; font-size: 2rem; }
.menu-full-nav.mf-grande .mf-subs { margin: 8px 0 0 0; }
.menu-full-nav.mf-grande .mf-fondo { font-size: clamp(9rem, 44vw, 14rem); right: 4px; bottom: -.27em; }

.menu-full-pie { flex: 0 0 auto; padding: 16px 24px calc(16px + env(safe-area-inset-bottom)); background: var(--espresso); border-top: 1px solid rgba(229, 228, 169, .16); }
.menu-full-cta {
    display: block; text-align: center; margin: 0 0 12px;
    background: var(--terracota); color: var(--crema);
    font-weight: 700; font-size: .98rem; line-height: 1.35;
    padding: 16px; border-radius: 14px; text-wrap: balance;
}
.menu-full-contacto { display: grid; grid-template-columns: repeat(var(--botones, 2), 1fr); gap: 10px; }
.menu-full-contacto a {
    display: flex; align-items: center; justify-content: center; padding: 16px 6px;
    border-radius: 40px; font-weight: 600; font-size: 1rem; border: 1px solid rgba(229, 228, 169, .5);
    color: var(--crema-claro); -webkit-tap-highlight-color: transparent;
}
.menu-full-contacto .whatsapp { background: var(--crema-claro); border-color: var(--crema-claro); color: var(--espresso); }
@media (min-width: 901px) { .menu-full { display: none !important; } }
@keyframes mf-fundido   { from { opacity: 0; } to { opacity: 1; } }
@keyframes mf-desde-izq { from { opacity: 0; transform: translateX(-100%); } to { opacity: 1; transform: none; } }
@keyframes mf-texto     { from { opacity: 0; transform: translateX(-34px); } to { opacity: 1; transform: none; } }
@keyframes mf-cierra    { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(-36px); } }
@media (prefers-reduced-motion: reduce) {
    .menu-full.abierto, .menu-full.abierto * { animation: none !important; }
    .mf-plegable { transition: none !important; }
}
/* Móviles bajitos: se aprieta para que no haga falta scroll. Con pocos
   apartados solo hace falta apretar en los de verdad pequeños (SE, 568-640 px). */
@media (max-height: 780px) {
    .menu-full-top { padding: 6px 24px; }
    .menu-full-top .logo-menu img { height: 28px; }
    .menu-full-cerrar { width: 42px; height: 42px; }
    .menu-full-nav:not(.mf-grande) .mf-grupo { padding: 8px 24px 10px; }
    .menu-full-nav:not(.mf-grande) .mf-titulo { font-size: 1.85rem; }
    .menu-full-nav:not(.mf-grande) .mf-subs { margin-top: 0; }
    .menu-full-nav:not(.mf-grande) .mf-fondo { font-size: 4.5rem; }
    .menu-full-pie { padding-top: 12px; }
    .menu-full-cta { padding: 12px; margin-bottom: 10px; font-size: .92rem; }
    .menu-full-contacto a { padding: 13px 6px; }
}
@media (max-height: 640px) {
    .menu-full-nav.mf-grande .mf-grupo { padding: 12px 24px 14px; }
    .menu-full-nav.mf-grande .mf-titulo { font-size: clamp(2.3rem, 12.5vw, 3.6rem); }
    .menu-full-nav.mf-grande .mf-subs { margin-top: 2px; }
}

/* --------------------------------------------------------------------------
   7. Pie de página
   -------------------------------------------------------------------------- */
.pie {
    background: var(--espresso);
    color: var(--crema);
    padding: 54px 0 26px;
    font-size: .92rem;
}
.pie a { color: var(--crema); }
.pie a:hover { color: var(--blanco); }
.pie-columnas {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 34px;
}
.pie h4 {
    color: var(--crema-claro);
    font-size: 1.15rem;
    margin-bottom: 14px;
}
.pie ul { list-style: none; }
.pie ul li { margin-bottom: 8px; }
.pie .marca { font-family: var(--serif); font-size: 1.8rem; color: var(--crema-claro); }
.pie-columnas > div:first-child p { text-align: justify; text-justify: inter-word; hyphens: none; }
.pie-abajo {
    border-top: 1px solid rgba(229, 228, 169, .12);
    padding-top: 18px;
    display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
    font-size: .82rem;
    color: var(--crema);
}
.pie-credito { text-align: right; }
.pie-credito a { color: inherit; text-decoration: none; font-weight: 600; }
.pie-credito a:hover { color: var(--crema-claro); }
@media (max-width: 640px) {
    .pie-abajo { flex-direction: column; text-align: center; gap: 8px; }
    .pie-credito { text-align: center; }
}

/* --------------------------------------------------------------------------
   8. Portada (hero) y bloques de inicio
   -------------------------------------------------------------------------- */
.hero {
    position: relative;
    min-height: 78vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--crema-claro);
    background-size: cover;
    background-position: center;
}
.hero::after {                       /* velo oscuro para legibilidad */
    content: "";
    position: absolute; inset: 0;
    background: rgba(0, 89, 120, 0.5);
}
.hero-contenido { position: relative; z-index: 2; max-width: 720px; padding: 0 24px; }
.hero-contenido h1 { color: var(--crema-claro); font-size: 3.6rem; margin-bottom: 1rem; }
.hero-contenido p  { font-size: 1.2rem; margin-bottom: 1.8rem; color: var(--crema); }
.hero .lema { color: var(--crema); }

/* Invitación tipo "Ven a leer, a tomar un café…" */
.invitacion { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 34px; }
.invitacion span { font-family: var(--serif); font-size: 1.4rem; color: var(--marron); }

/* Galería del local (página de inicio): mosaico con una imagen destacada */
.galeria {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 200px;
    gap: 16px;
}
.galeria-item {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
}
.galeria-item img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    transition: transform .45s ease;
}
.galeria-item:hover img { transform: scale(1.05); }
.galeria-item .pie-foto {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 14px 16px;
    font-family: var(--serif); font-size: 1.15rem;
    color: var(--crema-claro);
    background: linear-gradient(to top, rgba(0, 89, 120, .78), rgba(0, 89, 120, 0));
}
.galeria-destacada { grid-column: span 2; grid-row: span 2; }

/* Bloque de cuatro pilares: Librería, Café, Talleres, Comunidad */
.pilares { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.pilar {
    text-align: center;
    padding: 30px 22px;
    background: var(--blanco);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
}
.pilar h3 { margin-bottom: .5rem; }
.pilar p  { color: var(--marron); font-size: .95rem; margin-bottom: 0; }

/* --- Portada minimalista --- */
.hero-min {
    padding: 96px 0 84px; text-align: center;
    background: var(--crema-claro); border-bottom: 1px solid var(--borde);
}
.hero-min .eyebrow {
    text-transform: uppercase; letter-spacing: .24em; font-size: .78rem;
    font-weight: 600; color: var(--terracota); margin-bottom: 20px;
}
.hero-min h1 { font-size: 4.4rem; line-height: 1.04; margin-bottom: 22px; letter-spacing: -.01em; }
.hero-min .sub { max-width: 900px; margin: 0 auto 32px; color: var(--marron); font-size: 1.15rem; }
.hero-min .cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* Accesos intuitivos a las secciones (home) */
.accesos-web { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.acceso-web {
    display: block; padding: 32px 26px; border: 1px solid var(--borde);
    border-radius: var(--radio); background: var(--blanco); color: var(--espresso);
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.acceso-web:hover { transform: translateY(-3px); border-color: var(--espresso); box-shadow: 0 10px 24px var(--sombra); color: var(--espresso); }
.acceso-web h3 { margin-bottom: 8px; }
.acceso-web p { color: var(--marron); font-size: .93rem; margin: 0; }
.acceso-web .flecha { color: var(--terracota); font-weight: 600; }

/* Recomendador de lecturas (test) */
.test-cabecera { text-align: center; margin-bottom: 30px; }
.test-cabecera h1 { font-size: 2.5rem; }
.test-opciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; max-width: 900px; margin: 0 auto; }
.test-opcion {
    display: flex; align-items: center; justify-content: center; text-align: center;
    min-height: 96px; padding: 22px; border: 1px solid var(--borde); border-radius: var(--radio);
    background: var(--blanco); color: var(--espresso);
    font-family: var(--serif); font-size: 1.3rem; line-height: 1.2;
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.test-opcion:hover { transform: translateY(-3px); border-color: var(--espresso); box-shadow: 0 10px 24px var(--sombra); color: var(--espresso); }

/* Blog */
.blog-fecha { color: var(--dorado); font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 6px; }
.blog-imagen { aspect-ratio: 16 / 10; background: var(--crema); overflow: hidden; }
.blog-imagen img { width: 100%; height: 100%; object-fit: cover; }
.flecha-leer { color: var(--terracota); font-weight: 600; font-size: .9rem; }
.libro-cuerpo h3.blog-card-titulo { font-family: var(--serif); font-weight: 600; font-size: clamp(1.9rem, 2.4vw, 2.2rem); line-height: 1.12; letter-spacing: -.01em; color: var(--espresso); margin: 4px 0 12px; }
.blog-card-extracto { color: var(--marron); text-align: justify; text-justify: inter-word; hyphens: none; }
/* Artículo */
.articulo-cab { max-width: 760px; margin: 0 auto 34px; text-align: center; }
.articulo-cab h1 { font-family: var(--serif); font-weight: 600; font-size: clamp(2rem, 4.2vw, 2.9rem); line-height: 1.12; letter-spacing: -.01em; color: var(--espresso); margin: 0 0 18px; }
.articulo-subtitulo { font-family: var(--serif); font-style: italic; font-size: 1.3rem; line-height: 1.5; color: var(--marron); max-width: 620px; margin: 0 auto; }
.articulo-linea { width: 72px; height: 1px; background: var(--dorado); border: 0; margin: 24px auto; opacity: .7; }
.articulo-meta { font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; color: var(--marron); margin: 0; }
.articulo-meta .articulo-autor { font-weight: 700; color: var(--espresso); }
.articulo-meta .sep { color: var(--dorado); margin: 0 5px; }
.articulo-portada { max-width: 900px; margin: 0 auto 30px; border-radius: var(--radio); overflow: hidden; border: 1px solid var(--borde); }
.articulo-portada img { width: 100%; display: block; }
/* El texto mide lo mismo que la imagen de cabecera (900 px): ni más estrecho ni más ancho */
.articulo-contenido { max-width: 900px; margin: 0 auto; font-size: 1.08rem; line-height: 1.75; color: var(--espresso); }
.articulo-contenido p { margin-bottom: 1.1rem; text-align: justify; text-justify: inter-word; hyphens: none; }
.articulo-contenido h2 { font-size: 1.7rem; margin: 30px 0 12px; }
.articulo-contenido h3 { font-size: 1.35rem; margin: 24px 0 10px; }
.articulo-contenido ul, .articulo-contenido ol { margin: 0 0 1.1rem 1.5rem; }
.articulo-contenido li { margin-bottom: .4rem; }
.articulo-contenido a { color: var(--terracota); text-decoration: underline; }
.articulo-contenido img, .articulo-contenido video { max-width: 100%; height: auto; border-radius: var(--radio); margin: 20px 0; display: block; }
.articulo-contenido iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radio); margin: 20px 0; }
.articulo-contenido blockquote { margin: 20px 0; padding: 4px 0 4px 18px; border-left: 1px solid var(--borde); color: var(--marron); font-style: italic; }
/* Tablas del artículo: limpias, sin bordes, alineadas arriba (para maquetar texto + imagen) */
.articulo-contenido table { width: 100%; border-collapse: collapse; border: 0 !important; margin: 24px 0; }
.articulo-contenido td, .articulo-contenido th { border: 0 !important; padding: 6px 16px 6px 0; vertical-align: top; text-align: left; background: none; }
.articulo-contenido td:last-child, .articulo-contenido th:last-child { padding-right: 0; }
.articulo-contenido td p, .articulo-contenido th p { text-align: left; }
.articulo-contenido td img { margin: 0; }
@media (max-width: 640px) {
    .articulo-contenido table, .articulo-contenido thead, .articulo-contenido tbody,
    .articulo-contenido tr, .articulo-contenido td, .articulo-contenido th { display: block; width: 100% !important; }
    .articulo-contenido td, .articulo-contenido th { padding: 0 0 14px; }
}

/* Imagen con pie de foto. El editor genera <figure class="image"> con su
   <figcaption>; sin estos estilos el pie salía como un párrafo suelto y
   justificado, separado de su imagen. */
.articulo-contenido figure { margin: 24px 0; }
.articulo-contenido figure img { margin: 0; }
.articulo-contenido figcaption {
    margin-top: 8px;
    font-family: var(--sans);
    font-size: .86rem;
    line-height: 1.5;
    color: var(--marron);
    text-align: left;
}

/* Botón suelto dentro de un artículo, para poner debajo de una foto de libro
   cuando la tarjeta entera es demasiado. */
.articulo-contenido .boton-suelto { text-align: center; margin: 18px 0 24px; }
/* El color hay que forzarlo: .articulo-contenido a pinta los enlaces en
   terracota, y el botón tiene el fondo terracota, así que salía marrón sobre
   marrón y no se leía el texto. */
.articulo-contenido .boton-suelto a.boton { color: var(--crema); text-decoration: none; }
.articulo-contenido .boton-suelto a.boton:hover { color: var(--crema); }

/* Varias imágenes en fila, cada una con su pie. Columnas iguales, y en el
   móvil se apilan: tres fotos a lo ancho de un teléfono no se ven. */
.galeria-blog {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 18px;
    margin: 24px 0;
    align-items: start;
}
.galeria-blog figure { margin: 0; }
/* Sin recortar: las imágenes conservan sus proporciones. Se probó a cuadrarlas
   todas a 4/3 y quedaba muy ordenado, pero cortaba las portadas y los grabados
   antiguos por la mitad, que es justo lo que se quiere enseñar. Mejor una fila
   despareja que una imagen mutilada. */
.galeria-blog img { width: 100%; height: auto; margin: 0; }
.galeria-blog figcaption { margin-top: 7px; }
@media (max-width: 560px) {
    .galeria-blog { grid-template-columns: 1fr; }
}

/* Qué quiere recibir quien se suscribe. Va dentro de formularios que son flex
   en fila (la landing) y de otros que son bloques, así que se fuerza a ocupar
   toda la anchura y a ponerse encima del correo en los dos casos. */
.news-opciones {
    flex: 1 1 100%;
    width: 100%;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background: var(--blanco);
    padding: 4px 18px 12px;
    margin: 0 0 14px;
    text-align: left;
}
/* El rótulo va DENTRO de la caja. Antes era un <legend>, que se dibuja sobre el
   borde, y al ser más largo que el hueco se montaba encima de la línea. */
.news-titulo {
    margin: 14px 0 10px;
    font-family: var(--sans); font-size: .88rem; font-weight: 600;
    color: var(--espresso);
}
.news-titulo span { font-weight: 400; color: var(--marron); }
.news-opciones > label {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 9px 0; cursor: pointer;
}
.news-opciones > label + label { border-top: 1px solid var(--borde); }
/* Estos formularios tienen reglas para SU campo de correo (.landing-form input,
   .suscripcion input) que también alcanzaban a la casilla y la convertían en una
   caja de 220px con borde y relleno, que empujaba el texto fuera del recuadro.
   Aquí se le devuelve su aspecto de casilla. */
.news-opciones input[type="checkbox"] {
    margin: 3px 0 0;
    flex: 0 0 auto;
    width: auto; min-width: 0;
    padding: 0; border: 0; border-radius: 0; background: none;
}
/* min-width:0 es imprescindible: un hijo de flex no baja de su anchura natural
   por defecto, así que en el móvil el texto se salía de la caja en vez de
   partirse en varias líneas. */
.news-opciones > label > span { display: block; flex: 1 1 auto; min-width: 0; }
.news-opciones > label strong { display: block; font-size: .95rem; color: var(--espresso); }
.news-opciones > label strong + span { font-size: .85rem; color: var(--marron); line-height: 1.45; }

/* El remate del recomendador va en pequeño: el titular ya dice lo importante */
.reco-remate { font-size: .95rem; color: var(--marron); }

/* Acordeón de actividades. Es <details>/<summary> nativo: sin JavaScript,
   accesible con el teclado y se adapta solo. */
.acordeon-hoja {
    background: var(--blanco);
    border: 1px solid var(--borde);
    border-radius: 16px;
    margin-bottom: 14px;
    overflow: hidden;
}
.acordeon-hoja > summary {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    padding: 20px 24px;
    cursor: pointer;
    list-style: none;
    font-family: var(--serif);
    font-size: 1.5rem;
    color: var(--espresso);
}
/* El triangulito por defecto lo pone el navegador y cada uno lo pinta a su
   manera; se quita y se usa el mismo chevron que el menú. */
.acordeon-hoja > summary::-webkit-details-marker { display: none; }
.acordeon-hoja > summary::marker { content: ""; }
.acordeon-hoja > summary:hover { background: var(--crema-claro); }
.acordeon-hoja > summary .acordeon-pista {
    font-family: var(--sans); font-size: .84rem; color: var(--marron);
    font-weight: 500; letter-spacing: .01em;
}
.acordeon-hoja > summary .chevron {
    margin-left: auto; color: var(--marron); font-size: 1rem;
    transition: transform .18s ease;
}
.acordeon-hoja[open] > summary { border-bottom: 1px solid var(--borde); }
.acordeon-hoja[open] > summary .chevron { transform: rotate(180deg); }
.acordeon-cuerpo { padding: 24px; }
.acordeon-cuerpo > .medido { margin-bottom: 4px; }
@media (max-width: 560px) {
    .acordeon-hoja > summary { padding: 16px 18px; font-size: 1.3rem; gap: 8px; }
    .acordeon-hoja > summary .chevron { margin-left: auto; }
    .acordeon-cuerpo { padding: 18px; }
}

/* Banner (tarjeta regalo u otras promos) */
.banner { background: var(--espresso); color: var(--crema-claro); }
/* Ojo con el relleno: este div ES el .contenedor, así que un `padding: 44px 0`
   le borraba los 24px laterales y la franja salía desalineada con el pie y con
   el resto de la página (y en el móvil, pegada al borde). Con padding-block
   solo se toca el vertical y el lateral se queda como en todo lo demás.
   Y el botón va pegado al texto: con space-between se iba al otro extremo de
   la pantalla, a 600px del párrafo al que acompaña. */
.banner-cont { display: flex; align-items: center; justify-content: flex-start; gap: 32px; flex-wrap: wrap; padding-block: 44px; }
.banner h2 { color: var(--crema-claro); margin-bottom: 8px; }
.banner p  { color: var(--crema); margin: 0; max-width: 560px; }
.banner-cont > div { flex: 0 1 auto; }
@media (max-width: 640px) { .banner-cont { gap: 22px; padding-block: 36px; } }
.banner .boton { background: var(--terracota); border-color: var(--terracota); }
.banner .boton:hover { background: var(--terracota-osc); border-color: var(--terracota-osc); }

/* Bloque de newsletter compacto (con gancho de descuento) */
.newsletter {
    background: var(--crema-claro);
    border-top: 1px solid var(--borde); border-bottom: 1px solid var(--borde);
    padding: 40px 0; text-align: center;
}
.newsletter-carta {
    max-width: 760px; margin: 0 auto; text-align: center;
    background: var(--blanco); border: 1px solid var(--borde); border-radius: 16px;
    padding: 30px 36px; box-shadow: 0 10px 30px var(--sombra);
}
.newsletter-carta .lema { display: block; margin-bottom: 8px; }
/* En un telefono, 36px de relleno a cada lado se comen un tercio del ancho:
   el texto de la newsletter salia en tres lineas donde en la landing cabia
   en dos. */
@media (max-width: 560px) { .newsletter-carta { padding-left: 18px; padding-right: 18px; } }
.newsletter h3 { font-family: var(--serif); font-size: 1.5rem; line-height: 1.2; margin: 0 auto 8px; white-space: nowrap; }
.newsletter h3 strong { color: var(--terracota); font-weight: 700; }
.newsletter p { color: var(--marron); margin: 0 auto 18px; max-width: 560px; }
.newsletter .sin-ruido {
    display: block; margin-top: 10px;
    text-transform: uppercase; letter-spacing: .24em; font-size: .72rem; font-weight: 600;
    color: var(--dorado);
}

/* Franja de newsletter que abre la ventana (incluir/newsletter_ventana.php).
   Crema con borde suave, como las tarjetas de al lado: la primera versión era
   casi negra y a Iñaki le pareció «muy agresiva» (21-09-2026). El único acento
   es el botón. Texto a la izquierda y botón a la derecha: así ocupa poca altura
   y encima del listado no lo empuja fuera de la primera pantalla. */
.news-banda {
    display: flex; align-items: center; justify-content: space-between; gap: 32px;
    background: var(--crema); color: var(--espresso);
    border: 1px solid var(--borde); border-radius: 16px; padding: 24px 40px;
}
.news-banda-texto { min-width: 0; }
.news-banda .lema { display: block; margin-bottom: 4px; }
.news-banda h3 { font-family: var(--serif); font-size: 1.8rem; line-height: 1.15; color: var(--espresso); margin: 0 0 6px; }
.news-banda p { margin: 0; max-width: 640px; color: var(--marron); }
.news-banda .boton { flex: 0 0 auto; }
@media (max-width: 760px) {
    .news-banda { flex-direction: column; align-items: stretch; gap: 20px; padding: 26px 22px; }
    .news-banda h3 { font-size: 1.6rem; }
    .news-banda .boton { width: 100%; text-align: center; }
}

/* --------------------------------------------------------------------------
   9. Tarjetas (libros, talleres) y rejillas
   -------------------------------------------------------------------------- */
.rejilla        { display: grid; gap: 28px; }
.rejilla-2      { grid-template-columns: repeat(2, 1fr); }
.rejilla-3      { grid-template-columns: repeat(3, 1fr); }
.rejilla-4      { grid-template-columns: repeat(4, 1fr); }

/* Tarjeta genérica — sin barra de color a la izquierda */
.tarjeta {
    position: relative;   /* para que el enlace pueda cubrirla entera */
    background: var(--blanco);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .2s ease, box-shadow .2s ease;
}
.tarjeta:hover { transform: translateY(-3px); box-shadow: 0 10px 24px var(--sombra); }
/* El boton «Saber más» estira una capa invisible sobre toda la tarjeta, asi que
   vale pinchar en cualquier sitio. Se hace con `::after` y no metiendo la
   tarjeta dentro de un <a> porque un enlace no puede contener otro enlace. */
.tarjeta-enlace::after { content: ''; position: absolute; inset: 0; }

/* Tarjeta de libro */
.libro-imagen {
    aspect-ratio: 3 / 4;
    background: var(--crema);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.libro-imagen img { width: 100%; height: 100%; object-fit: cover; }
.libro-imagen .sin-imagen {
    font-family: var(--serif); font-size: 1.1rem; color: var(--dorado);
    padding: 20px; text-align: center;
}
.libro-cuerpo { padding: 18px 18px 20px; display: flex; flex-direction: column; flex: 1; }
.libro-cuerpo h3 { font-size: 1.25rem; margin-bottom: 4px; }
.libro-autor { font-size: .88rem; color: var(--marron); margin-bottom: 10px; }
.libro-precio { font-family: var(--serif); font-size: 1.4rem; color: var(--terracota); margin: 6px 0 14px; }
/* Bloque de botones de la tarjeta: pegado abajo para que TODAS las tarjetas
   tengan los botones a la misma altura, aunque el título tenga 1 o 2 líneas */
.libro-acciones { margin-top: auto; padding-top: 12px; display: flex; flex-direction: column; gap: 8px; }
/* Botones de la ficha de producto: en una misma línea */
.producto-acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.producto-acciones .boton { flex: 1 1 auto; text-align: center; }
@media (max-width: 480px) { .producto-acciones { flex-direction: column; } }

/* Ficha de un libro (producto.php y libro.php). Antes reutilizaba la rejilla de las tarjetas: dos
   columnas iguales y la portada a 3:4 llenando la mitad de la pantalla (700 px de alto). Ahora la
   portada va a su tamaño de ficha, como en cualquier librería online, y los datos ocupan el resto. */
.ficha-libro { grid-template-columns: minmax(240px, 420px) 1fr; align-items: start; gap: 48px; }
/* La galería: la portada (y, si hay más imágenes, sus miniaturas a la izquierda, como en Casa del Libro) */
.ficha-galeria { display: flex; gap: 14px; align-items: flex-start; position: sticky; top: 24px; }
.ficha-minis { display: flex; flex-direction: column; gap: 8px; flex: 0 0 62px; }
.ficha-mini {
    display: block; width: 62px; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 4px;
    border: 1px solid var(--borde); background: var(--crema); opacity: .75;
}
.ficha-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ficha-mini:hover, .ficha-mini.activo { opacity: 1; border-color: var(--espresso); }
.ficha-libro .libro-imagen {
    aspect-ratio: auto; background: transparent; overflow: visible;
    width: 100%; max-width: 320px; margin: 0 auto;
}
.ficha-galeria .libro-imagen { flex: 1 1 auto; margin: 0; }
.ficha-libro .libro-imagen img {
    width: 100%; height: auto; max-height: 480px; object-fit: contain;
    border-radius: 6px; box-shadow: 0 6px 22px rgba(166, 9, 59, .14);
}
.ficha-libro .libro-imagen .sin-imagen {
    display: flex; align-items: center; justify-content: center;
    aspect-ratio: 3 / 4; background: var(--crema); border-radius: 6px;
}
/* Accesibilidad: el foco del teclado se ve siempre (antes no había ningún :focus-visible en toda la web) */
:focus-visible { outline: 2px solid var(--espresso); outline-offset: 2px; }
.ficha-acordeon summary:focus-visible { outline-offset: -2px; }

/* El panel de la ficha: rutas, título, autor, estrellas, caja de compra, compartir y acordeones */
.ficha-panel { min-width: 0; }
.ficha-migas { margin: 0 0 14px; font-size: .86rem; line-height: 1.5; color: var(--marron); text-align: left; }
.ficha-migas a { color: var(--marron); text-decoration: none; }
.ficha-migas a:hover { color: var(--terracota); text-decoration: underline; }
.ficha-migas a:last-child { color: var(--espresso); font-weight: 600; }
.ficha-titulo { font-size: clamp(1.8rem, 2.6vw, 2.5rem); line-height: 1.1; margin: 0 0 8px; text-align: left; }
.ficha-autor { margin: 0 0 12px; font-size: 1.05rem; text-align: left; }
.ficha-autor a { color: var(--terracota); font-weight: 600; text-decoration: none; }
.ficha-autor a:hover { text-decoration: underline; }
.ficha-estrellas { margin: 0 0 16px; font-size: .95rem; text-align: left; display: flex; align-items: center; gap: 10px; }
.ficha-estrellas .estrellas { color: var(--terracota); letter-spacing: 2px; font-size: 1.15rem; }
.ficha-estrellas a { color: var(--espresso); text-decoration: underline; text-underline-offset: 2px; }
.ficha-estrellas-vacias .estrellas { color: var(--borde); }
.ficha-opinion { margin: 0 0 16px; padding-bottom: 12px; border-bottom: 1px solid var(--borde); }
.ficha-opinion-cab { margin: 0 0 4px !important; }
.ficha-opinion-cab .estrellas { color: var(--terracota); letter-spacing: 2px; margin-right: 8px; }
.ficha-opinion-autor { font-size: .85rem; color: var(--marron); margin: 0 !important; }

.ficha-caja { border: 1px solid var(--borde); border-radius: 12px; background: var(--crema-claro); overflow: hidden; margin-bottom: 14px; }
.ficha-caja-precio { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding: 18px 22px; border-bottom: 1px solid var(--borde); }
.ficha-caja-formato { display: flex; flex-direction: column; gap: 2px; font-size: .92rem; color: var(--marron); }
.ficha-formato-principal { color: var(--espresso); font-weight: 600; font-size: 1rem; }
.ficha-precio { text-align: right; display: flex; flex-direction: column; align-items: flex-end; line-height: 1; }
.ficha-precio-valor { font-family: var(--serif); font-weight: 700; font-size: clamp(2.1rem, 3vw, 2.8rem); color: var(--espresso); }
.ficha-precio-nota { font-size: .76rem; color: var(--marron); margin-top: 6px; }
.ficha-caja-compra { padding: 16px 22px 20px; }
.ficha-disp-fila { margin: 0 0 4px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; text-align: left; }
.ficha-disp {
    display: inline-block; padding: 3px 12px; border-radius: 999px; font-size: .82rem; font-weight: 600;
    border: 1px solid var(--borde); background: var(--crema); color: var(--espresso); letter-spacing: .01em;
}
.ficha-disp-ok { background: var(--espresso); border-color: var(--espresso); color: var(--crema-claro); }
.ficha-disp-no { color: var(--marron); }
.ficha-disp-novedad { background: transparent; }
.ficha-disp-nota { margin: 0 0 14px; font-size: .9rem; color: var(--marron); text-align: left; }
.ficha-cta { display: flex; flex-wrap: wrap; gap: 10px; }
.ficha-cta .boton { flex: 1 1 200px; text-align: center; }
.ficha-cta-apagado { opacity: .6; cursor: not-allowed; }

.ficha-compartir { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin: 0 0 22px; font-size: .88rem; }
.ficha-compartir-rotulo { color: var(--marron); font-weight: 600; }
.ficha-red {
    display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0;
    border: 1px solid var(--borde); border-radius: 50%; background: transparent; color: var(--espresso); cursor: pointer;
}
.ficha-red svg { width: 19px; height: 19px; }
.ficha-red:hover { color: var(--crema-claro); background: var(--espresso); border-color: var(--espresso); }
.ficha-compartir { gap: 8px; }
.ficha-compartir-rotulo { margin-right: 6px; }
.ficha-compartir-aviso { font-size: .82rem; color: var(--marron); }
.ficha-red[hidden] { display: none; }

/* Visor de imágenes a pantalla completa */
.ficha-visor { position: fixed; inset: 0; z-index: 1000; background: rgba(0, 89, 120, .92); display: flex; align-items: center; justify-content: center; padding: 24px; }
.ficha-visor[hidden] { display: none; }
.ficha-visor img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; background: var(--crema); }
.ficha-visor button { position: absolute; background: rgba(229, 228, 169, .14); color: var(--crema); border: 0; border-radius: 50%; width: 46px; height: 46px; font-size: 2rem; line-height: 1; cursor: pointer; }
.ficha-visor button:hover { background: rgba(229, 228, 169, .3); }
.ficha-visor-cerrar { top: 16px; right: 16px; }
.ficha-visor-ant { left: 16px; top: 50%; transform: translateY(-50%); }
.ficha-visor-sig { right: 16px; top: 50%; transform: translateY(-50%); }

.ficha-acordeones { border-top: 1px solid var(--borde); }
.ficha-acordeon { border-bottom: 1px solid var(--borde); }
.ficha-acordeon summary {
    list-style: none; cursor: pointer; padding: 16px 2px; display: flex; justify-content: space-between; align-items: center;
    font-weight: 600; font-size: 1.02rem; color: var(--espresso);
}
.ficha-acordeon summary::-webkit-details-marker { display: none; }
.ficha-acordeon summary::after { content: '+'; font-size: 1.4rem; font-weight: 400; line-height: 1; color: var(--marron); }
.ficha-acordeon[open] summary::after { content: '\2212'; }
.ficha-acordeon-cuerpo { padding: 0 2px 18px; }
.ficha-acordeon-cuerpo p { margin: 0 0 12px; }
.ficha-datos { display: grid; grid-template-columns: max-content 1fr; gap: 8px 22px; margin: 0; }
.ficha-datos dt { color: var(--marron); font-size: .9rem; }
.ficha-datos dd { margin: 0; font-size: .95rem; word-break: break-word; }

/* Debajo de la sinopsis: fragmento, tráiler, reseñas y biografía */
.ficha-extras { margin-top: 26px; padding-top: 4px; }
.ficha-enlaces { margin: 0 0 18px; }
.ficha-enlaces a { color: var(--terracota); text-decoration: underline; text-underline-offset: 3px; }
.ficha-resena {
    margin: 0 0 14px; padding: 0;
    font-family: var(--serif); font-size: 1.12rem; line-height: 1.4; color: var(--espresso);
}
.ficha-sub { font-family: var(--serif); font-size: 1.35rem; margin: 22px 0 8px; }
@media (max-width: 680px) {
    .ficha-galeria { position: static; }
    .ficha-caja-precio { flex-direction: column-reverse; gap: 10px; }
    .ficha-precio { align-items: flex-start; text-align: left; }
    .ficha-libro { grid-template-columns: 1fr; gap: 24px; }
    .ficha-galeria { flex-direction: column-reverse; align-items: center; }
    .ficha-minis { flex-direction: row; flex: none; justify-content: center; flex-wrap: wrap; }
    .ficha-libro .libro-imagen { max-width: 240px; }
}

/* Etiqueta "Destacado" / estados */
.etiqueta {
    display: inline-block;
    font-size: .7rem; text-transform: uppercase; letter-spacing: .1em;
    padding: 3px 10px; border-radius: 20px;
    background: var(--crema); color: var(--marron); border: 1px solid var(--borde);
    margin-bottom: 10px; align-self: flex-start;
}
.etiqueta-oliva { background: var(--oliva); color: var(--crema-claro); border-color: var(--oliva); }

/* Tarjeta de taller */
.taller-imagen { aspect-ratio: 3 / 2; background: var(--crema); overflow: hidden; }
/* `cover`: la imagen llena la franja de lado a lado, sin bandas de crema a los
   costados. A cambio recorta lo que sobra por arriba y por abajo, asi que las
   imagenes se suben ya apaisadas (3:2, 900x600 va sobrado). `object-position`
   centrado deja el recorte en el medio, que es donde suele estar lo que
   importa. En la ficha de detalle si se ve entera. */
.taller-imagen img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* En la ficha de detalle, la imagen lleva esquinas redondeadas y un margen */
/* En la ficha hay sitio de sobra, asi que la imagen se ve tal cual es, sin
   recorte ni proporcion forzada. Se le pone tope de alto para que un cartel
   muy alargado no se coma la pantalla entera. */
.taller-imagen-detalle { border: 1px solid var(--borde); border-radius: var(--radio); margin-bottom: 18px; aspect-ratio: auto; }
.taller-imagen-detalle img { width: 100%; height: auto; max-height: 70vh; object-fit: contain; }
/* Igual que la tarjeta de club: el cuerpo crece y el botón se va abajo del
   todo, así los botones de la fila quedan a la misma altura aunque las
   descripciones sean de distinto largo */
.taller-cuerpo { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.taller-cuerpo .boton { margin-top: auto; }
.taller-fecha {
    font-family: var(--sans); font-size: .82rem; text-transform: uppercase;
    letter-spacing: .1em; color: var(--dorado); margin-bottom: 8px;
}
.taller-cuerpo h3 { margin-bottom: 8px; }
.taller-cuerpo p  { color: var(--marron); font-size: .96rem; }
.taller-datos { font-size: .88rem; color: var(--marron); margin: 12px 0 16px; }
.taller-datos span { display: inline-block; margin-right: 16px; }

/* --------------------------------------------------------------------------
   10. Carta del café
   -------------------------------------------------------------------------- */
.carta-grupo { margin-bottom: 40px; }
.carta-grupo h3 {
    font-size: 1.7rem; color: var(--terracota);
    border-bottom: 1px solid var(--borde); padding-bottom: 8px; margin-bottom: 18px;
}
.carta-linea {
    display: flex; align-items: baseline; gap: 12px;
    padding: 8px 0;
}
.carta-linea .nombre  { font-family: var(--serif); font-size: 1.25rem; white-space: nowrap; }
.carta-linea .puntos  { flex: 1; border-bottom: 1px dotted var(--borde); transform: translateY(-4px); }
.carta-linea .precio  { font-weight: 600; color: var(--terracota); white-space: nowrap; }
.carta-linea .desc    { display: block; font-size: .9rem; color: var(--marron); }

/* --------------------------------------------------------------------------
   11. Formularios
   -------------------------------------------------------------------------- */
.formulario { max-width: 620px; }
.campo { margin-bottom: 18px; }
.campo label {
    display: block; font-size: .85rem; font-weight: 600;
    letter-spacing: .04em; color: var(--marron); margin-bottom: 6px;
}
.campo input:not([type="checkbox"]):not([type="radio"]),
.campo textarea,
.campo select {
    width: 100%;
    font-family: var(--sans); font-size: 1rem; color: var(--espresso);
    padding: 12px 14px;
    background: var(--blanco);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    transition: border-color .2s ease;
}
/* Casillas y radios: tamaño natural, alineados con su texto */
.campo input[type="checkbox"], .campo input[type="radio"] { margin-right: 7px; vertical-align: middle; }
.campo label input[type="checkbox"], .campo label input[type="radio"] { margin-top: -2px; }
.campo input:focus,
.campo textarea:focus,
.campo select:focus { outline: none; border-color: var(--dorado); }
.campo textarea { min-height: 140px; resize: vertical; }
/* Casilla de conformidad: texto largo al lado de la casilla, no encima.
   Se sale de .campo porque ahí la etiqueta va arriba y en mayúsculas */
/* Los botones de borrar son formularios (por el token), pero tienen que
   seguir alineados con los demás botones de la fila */
.form-en-linea { display: inline; }

.campo-check { margin-bottom: 14px; }
.campo-check label {
    display: flex; align-items: flex-start; gap: 10px;
    font-size: .9rem; font-weight: 400; letter-spacing: 0;
    color: var(--marron); line-height: 1.45; cursor: pointer;
}
.campo-check input[type="checkbox"],
.campo-check input[type="radio"] { margin: 3px 0 0; flex: 0 0 auto; }

/* El atributo hidden no puede con un display explícito: sin esto, ocultar un
   .campo-doble no surte efecto. */
[hidden] { display: none !important; }

.campo-doble { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.campo-triple { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; }
.campo-cuadruple { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 18px; }
/* Bloque de secciones del formulario de alta/edición */
.form-bloque { background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio); padding: 20px 22px; margin-bottom: 18px; }
.form-bloque > h3 { font-size: 1.05rem; margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--borde); }
.visibilidad-inline { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }
.visibilidad-inline label { display: inline-flex; align-items: center; gap: 7px; margin: 0; font-weight: 500; }
.campo-portada { display: flex; gap: 14px; align-items: flex-start; }
.campo-portada .portada-preview { max-width: 90px; border-radius: 6px; border: 1px solid var(--borde); }
.campo-portada .crece { flex: 1; min-width: 0; }
.check-linea { display: inline-flex !important; align-items: center; gap: 7px; font-weight: 500; padding: 11px 0; }
/* Etiqueta con tuerca de gestión de opciones */
.label-tuerca { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.label-tuerca .tuerca { display: inline-flex; color: var(--marron); }
.label-tuerca .tuerca:hover { color: var(--terracota); }
.label-tuerca .tuerca svg { width: 16px; height: 16px; }
@media (max-width: 980px) { .campo-cuadruple { grid-template-columns: 1fr 1fr; } .campo-triple { grid-template-columns: 1fr 1fr; } }

/* Bloque de suscripción a la comunidad (newsletter) */
/* flex-wrap hace falta desde que el formulario lleva encima las opciones de qué
   recibir: sin él no podían saltar a su propia línea y se metían de columna
   estrecha al lado del correo. */
.suscripcion { display: flex; flex-wrap: wrap; gap: 12px; max-width: 540px; margin: 0 auto; }
.suscripcion input {
    flex: 1; font-family: var(--sans); font-size: 1rem; color: var(--espresso);
    padding: 12px 14px; background: var(--blanco);
    border: 1px solid var(--borde); border-radius: var(--radio);
}
.suscripcion input:focus { outline: none; border-color: var(--terracota); }

/* --------------------------------------------------------------------------
   12. Carrito y tienda
   -------------------------------------------------------------------------- */
.tienda-cabecera { margin-bottom: 22px; }
.tienda-cabecera h1 { margin-bottom: 8px; }
.tienda-cabecera p { color: var(--marron); max-width: 640px; margin: 0; }

/* Tarjeta de stock y plazos de envío */
.envio-info {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
    background: var(--borde); border: 1px solid var(--borde);
    border-radius: var(--radio); overflow: hidden; margin-bottom: 28px;
}
.envio-info > div { background: var(--blanco); padding: 18px 22px; }
.envio-info strong { display: block; color: var(--espresso); font-size: 1.02rem; margin-bottom: 3px; }
.envio-info strong em { color: var(--terracota); font-style: normal; }
.envio-info span { color: var(--marron); font-size: .9rem; }
.filtros, .filtros ul { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; }
.filtros li { list-style: none; }
.filtros a {
    font-size: .82rem; padding: 8px 17px;
    border: 1px solid var(--borde); border-radius: 22px; color: var(--marron);
}
.filtros a:hover, .filtros a.activo { background: var(--espresso); color: var(--crema-claro); border-color: var(--espresso); }

/* Tabla del carrito */
.tabla-carrito { width: 100%; border-collapse: collapse; }
.tabla-carrito th, .tabla-carrito td { padding: 14px 10px; border-bottom: 1px solid var(--borde); text-align: left; vertical-align: middle; }
.tabla-carrito th { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--marron); }
.tabla-carrito .producto { display: flex; align-items: center; gap: 14px; }
.tabla-carrito .producto img { width: 54px; height: 72px; object-fit: cover; border-radius: 6px; }
.tabla-carrito input[type=number] { width: 66px; padding: 8px; text-align: center; border: 1px solid var(--borde); border-radius: 8px; }

/* En el móvil la tabla no cabe: cada línea pasa a ser una ficha (producto arriba, precio/cantidad/subtotal debajo, cada uno con su rótulo) */
@media (max-width: 680px) {
    .rejilla-2 > * { min-width: 0; }
    .tabla-carrito thead { display: none; }
    .tabla-carrito, .tabla-carrito tbody, .tabla-carrito tr, .tabla-carrito td { display: block; width: 100%; }
    .tabla-carrito tr { padding: 18px 0; border-bottom: 1px solid var(--borde); }
    .tabla-carrito td { border: 0; padding: 5px 0; }
    .tabla-carrito td[data-label] { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
    .tabla-carrito td[data-label]::before { content: attr(data-label); color: var(--marron); font-size: .85rem; }
    .tabla-carrito .producto h3 { font-size: 1.1rem; line-height: 1.25; }
    .tabla-carrito .celda-quitar { padding-top: 10px; }
}

/* Resumen del pedido */
.resumen {
    background: var(--crema-claro); border: 1px solid var(--borde);
    border-radius: var(--radio); padding: 26px;
}
.resumen h3 { margin-bottom: 16px; }
.resumen-linea { display: flex; justify-content: space-between; padding: 8px 0; color: var(--marron); }
.resumen-total { display: flex; justify-content: space-between; padding-top: 14px; margin-top: 6px; border-top: 1px solid var(--borde); font-family: var(--serif); font-size: 1.4rem; color: var(--espresso); }

/* --------------------------------------------------------------------------
   13. Mensajes / avisos
   -------------------------------------------------------------------------- */
.aviso {
    padding: 14px 18px; border-radius: var(--radio);
    border: 1px solid var(--borde); background: var(--crema-claro);
    margin-bottom: 20px; font-size: .95rem;
}
.aviso-ok    { background: var(--crema); border-color: var(--crema); color: var(--petroleo); }
.aviso-error { background: var(--crema); border-color: var(--crema); color: var(--granate); }

/* --------------------------------------------------------------------------
   14. Tablas y panel de administración
   -------------------------------------------------------------------------- */
.admin-cuerpo { background: var(--crema); min-height: 100vh; }

/* ---- Panel de gestión: menú lateral con iconos ---- */
.admin-layout { display: flex; align-items: stretch; min-height: 100vh; }
.admin-lateral {
    width: 230px; flex: 0 0 230px; background: var(--espresso); color: var(--crema);
    display: flex; flex-direction: column; position: sticky; top: 0;
    height: 100vh; overflow-y: auto; padding: 16px 0;
}
.admin-nav { display: flex; flex-direction: column; }
/* Grupos del menú del panel */
.admin-grupo > summary {
    display: flex; align-items: center; gap: 8px;
    padding: 13px 22px 7px; cursor: pointer; list-style: none;
    font-size: .7rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
    color: var(--crema);
}
.admin-grupo > summary::-webkit-details-marker { display: none; }
.admin-grupo > summary::marker { content: ""; }
.admin-grupo > summary:hover { color: var(--crema); }
.admin-grupo > summary .chevron { margin-left: auto; font-size: .85rem; transition: transform .15s ease; }
.admin-grupo[open] > summary .chevron { transform: rotate(180deg); }
/* Si el grupo está recogido pero la página que ves es de dentro, se marca, para
   que no parezca que no estás en ninguna parte. */
.admin-grupo:not([open])[data-aqui] > summary { color: var(--crema); }
.admin-grupo-items { display: flex; flex-direction: column; }
.admin-nav-pie { margin-top: auto; padding-top: 10px; border-top: 1px solid rgba(229, 228, 169, .1); }
.admin-lateral a {
    display: flex; align-items: center; gap: 13px; padding: 11px 22px;
    color: var(--crema); font-size: .92rem; border-left: 3px solid transparent; transition: background .12s, color .12s;
}
.admin-lateral a svg { width: 19px; height: 19px; flex: 0 0 19px; }
.admin-lateral a:hover { color: var(--crema); background: rgba(229, 228, 169, .06); }
.admin-lateral a.activo { color: var(--crema); background: rgba(229, 228, 169, .08); border-left-color: var(--terracota); }
.admin-lateral .admin-salir { color: var(--coral); }
.admin-lateral .admin-salir:hover { color: var(--crema); background: var(--terracota); }
/* ---- Contabilidad ----
   La franja del periodo: los botones de siempre (el trimestre, que es como se
   declara) y detrás las fechas a mano. Antes eran tres filas sueltas, con los
   enlaces de exportar pegados al botón de ver, y no se entendía qué mandaba. */
.conta-periodo {
    background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio);
    padding: 14px 18px 12px;
}
.conta-periodo-elige { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.conta-periodo-fechas {
    display: flex; align-items: center; gap: 8px; margin-left: auto;
    padding-left: 14px; border-left: 1px solid var(--borde);
}
.conta-periodo-fechas label { font-size: .82rem; color: var(--marron); }
.conta-periodo-fechas input[type=date] {
    padding: 6px 8px; border: 1px solid var(--borde); border-radius: 8px;
    font-family: inherit; font-size: .84rem; background: var(--blanco);
}
.conta-periodo-rotulo { margin: 12px 0 0; font-size: .85rem; color: var(--marron); }

/* Rótulo de sección de la contabilidad: aire por arriba y una línea que separe,
   para que las cuentas no salgan una detrás de otra sin respirar. */
.conta-rotulo {
    margin: 2.4rem 0 1rem; padding-bottom: .5rem; border-bottom: 1px solid var(--borde);
    font-size: 1.3rem;
}
/* Cuentas: el concepto a la izquierda, el número a la derecha y el matiz debajo
   en pequeño, en vez de meterlo entre paréntesis en la misma línea. */
.tabla-cuentas td { padding-top: 10px; padding-bottom: 10px; }
.tabla-cuentas .panel-dato { display: block; font-size: .78rem; }
.tabla-cuentas .der { white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabla-cuentas tr.conta-sub td:first-child { padding-left: 26px; color: var(--marron); font-size: .88rem; }
.tabla-cuentas tr.tot td { border-top: 1px solid var(--borde); font-size: 1.02rem; }

@media (max-width: 700px) {
    .conta-periodo-fechas { margin-left: 0; padding-left: 0; border-left: none; }
}

/* El numerito del menú: lo que hay sin abonar, junto a «Albaranes». */
.admin-numerito {
    margin-left: auto; min-width: 20px; padding: 1px 6px; border-radius: 10px;
    background: var(--terracota); color: var(--crema);
    font-style: normal; font-size: .72rem; font-weight: 700; text-align: center; line-height: 1.5;
}

.admin-principal { flex: 1 1 auto; min-width: 0; }

/* La barra de arriba cuando hay un albarán sin pagar. Azeta no manda el
   siguiente pedido hasta cobrar el anterior, así que esto no es un recordatorio
   más: es la tienda parada. Por eso va en rojo y arriba del todo. */
.barra-abono {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    margin: -24px 0 22px; padding: 13px 32px;
    background: var(--granate); color: var(--crema); font-size: .88rem;
}
.barra-abono strong { letter-spacing: .06em; }
.barra-abono span { color: var(--crema); }
.barra-abono em { margin-left: auto; font-style: normal; text-decoration: underline; }
.barra-abono:hover { background: var(--granate); color: var(--crema); }

/* Panel: lista «Sin portada o sinopsis» compacta (una sola fila de herramientas, tabla que no se sale) */
.solo-lectores{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.faltan-barra{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 10px}
.faltan-barra .campo-buscar{position:relative;flex:1 1 260px;min-width:0}
.faltan-barra input[type=search],.faltan-barra select{height:40px;padding:0 12px;font-size:.92rem;margin:0;box-sizing:border-box}
.faltan-barra input[type=search]{width:100%}
.faltan-barra select{flex:0 1 auto;max-width:100%}
.faltan-cuenta{margin:0 0 8px;font-size:.88rem;color:var(--marron)}
.faltan-paginas{margin-left:14px}.faltan-paginas a{margin-right:14px}
.tabla-scroll{overflow-x:auto;max-width:100%}
.tabla-faltan{width:100%;table-layout:fixed}
.tabla-faltan th,.tabla-faltan td{padding:8px 10px;vertical-align:middle}
.tabla-faltan td:first-child{overflow-wrap:anywhere}
.tabla-faltan .col-anio{width:64px}
.tabla-faltan th{font-size:.72rem;vertical-align:middle;white-space:nowrap}
.tabla-faltan .col-falta{width:132px;font-size:.88rem}
.tabla-faltan .col-accion{width:132px;text-align:right}
.tabla-faltan .boton{white-space:nowrap;padding-left:14px;padding-right:14px}
.tabla-faltan .panel-dato{display:block;margin-top:2px}

/* Barra de progreso de la carga del catálogo (panel). Neutra: no es una alarma */
.barra-carga { margin: 0 0 22px; padding: 14px 32px 12px; background: var(--espresso); color: var(--crema-claro); font-size: .88rem; }
.barra-carga-cab { display: flex; gap: 16px; flex-wrap: wrap; align-items: baseline; margin-bottom: 8px; }
.barra-carga-cab strong { letter-spacing: .06em; }
.barra-carga-cab span { color: rgba(229, 228, 169, .8); }
.barra-carga-pista { height: 12px; background: rgba(229, 228, 169, .18); border-radius: 999px; overflow: hidden; }
.barra-carga-relleno { height: 100%; background: var(--terracota); border-radius: 999px; min-width: 6px; transition: width .6s ease; }
.barra-carga-pie { margin-top: 8px; font-size: .8rem; color: rgba(229, 228, 169, .72); }
.admin-principal .contenedor { padding-left: 32px; padding-right: 32px; }

/* Responsive: en móvil/tablet el lateral pasa a barra superior con iconos */
@media (max-width: 900px) {
    .admin-layout { flex-direction: column; }
    .admin-lateral {
        width: 100%; flex: none; height: auto; position: static; flex-direction: row;
        overflow-x: auto; padding: 6px 8px; scrollbar-width: none;
    }
    .admin-lateral::-webkit-scrollbar { display: none; }
    .admin-nav { flex-direction: row; }
    /* En la barra horizontal del móvil los grupos no pintan nada: se quita el
       rótulo y cada grupo se convierte en un tramo de la misma fila.
       Se probó `display: contents`, que sería lo elegante, pero sobre <details>
       no lo respetan todos los navegadores y los enlaces se partían en dos
       líneas. Esto funciona en todos. */
    .admin-grupo { display: flex; flex: 0 0 auto; }
    .admin-grupo > summary { display: none; }
    .admin-grupo-items { flex-direction: row; }
    .admin-nav-pie { margin-top: 0; padding-top: 0; border-top: none; display: flex; }
    .admin-lateral a {
        flex-direction: column; gap: 5px; padding: 8px 12px; font-size: .66rem;
        white-space: nowrap; border-left: none; border-bottom: 3px solid transparent; text-align: center;
    }
    .admin-lateral a.activo { border-left: none; border-bottom-color: var(--terracota); }
    .admin-principal .contenedor { padding-left: 18px; padding-right: 18px; }
    .barra-abono { padding: 11px 18px; gap: 8px; font-size: .8rem; }
    .barra-abono em { margin-left: 0; }
}

/* 36px arriba y abajo eran 72px de nada en una pantalla de portatil */
.panel { padding: 24px 0 26px; }
.panel-titulo { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 18px; }
.panel-dato { color: var(--marron); font-size: .9rem; }
/* Dentro de una tabla, el dato menor va debajo del principal y más pequeño:
   el tipo de actividad bajo su título, sin gastar una columna entera. */
.tabla .panel-dato { display: block; font-size: .8rem; margin-top: 3px; }
.form-acciones { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

/* Etiquetas de estado (pill) */
.pill { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; vertical-align: middle; }
.pill-ok   { background: var(--crema); color: var(--petroleo); }
.pill-pend { background: var(--crema); color: var(--petroleo); }

/* Buscador del panel (usuarios) */
.buscador-admin { display: flex; gap: 10px; flex-wrap: wrap; }
.buscador-admin input { flex: 1; min-width: 220px; padding: 10px 14px; border: 1px solid var(--borde); border-radius: var(--radio); }

/* Tabla de pares clave/valor (ficha de cliente) */
.tabla-datos th { text-align: left; white-space: nowrap; width: 130px; color: var(--marron); font-weight: 600; vertical-align: top; }

/* Estado de la reseña en «Mi cuenta» */
.resena-estado { display: inline-block; font-size: .8rem; font-weight: 600; margin-top: 4px; }
.resena-estado-ok   { color: var(--petroleo); }
.resena-estado-pend { color: var(--petroleo); }

/* Moderación de reseñas (panel) */
.resenas-admin { display: grid; gap: 16px; }
.resena-admin { background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio); padding: 18px 20px; }
.resena-admin-pend { border-left: 4px solid var(--mostaza); }
.resena-admin-cab { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.resena-admin-cab .estrellas { color: var(--mostaza); letter-spacing: 2px; }
.resena-admin-fecha { margin-left: auto; color: var(--marron); font-size: .82rem; }
.resena-admin h3 { margin: 0 0 6px; font-size: 1.05rem; }
.resena-admin-texto { margin: 0 0 10px; }
.resena-admin-meta { color: var(--marron); font-size: .88rem; margin: 0 0 14px; }
.resena-admin-acciones { display: flex; gap: 8px; flex-wrap: wrap; }

/* Autocompletado del buscador de inventario */
.buscador-auto { position: relative; }
.buscador-sugerencias {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 40;
    background: var(--blanco); border: 1px solid var(--borde); border-top: none;
    border-radius: 0 0 var(--radio) var(--radio); box-shadow: 0 12px 26px var(--sombra);
    max-height: 360px; overflow-y: auto; display: none;
}
.buscador-sugerencias.visible { display: block; }
.buscador-sugerencias a {
    display: flex; align-items: center; gap: 12px; padding: 10px 14px;
    border-bottom: 1px solid var(--borde); color: var(--espresso);
}
.buscador-sugerencias a:last-child { border-bottom: none; }
.buscador-sugerencias a:hover { background: var(--crema-claro); }
.buscador-sugerencias img { width: 30px; height: 40px; object-fit: cover; border-radius: 4px; flex: 0 0 30px; }
.buscador-sugerencias .s-texto { flex: 1 1 auto; min-width: 0; }
.buscador-sugerencias .s-tit { display: block; font-weight: 600; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.buscador-sugerencias .s-aut { display: block; color: var(--marron); font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.buscador-sugerencias .s-sinportada { width: 30px; height: 40px; flex: 0 0 30px; border-radius: 4px; background: var(--crema); border: 1px solid var(--borde); }
.buscador-sugerencias a { overflow: hidden; }
.buscador-sugerencias .s-stock { margin-left: auto; color: var(--marron); font-size: .8rem; white-space: nowrap; }
/* Buscador de la tienda pública */
.buscador-tienda { display: flex; gap: 10px; max-width: 560px; margin: 0 auto 26px; }
.buscador-tienda .buscador-auto { flex: 1; }
.buscador-tienda .s-aut { display: block; }

/* Fila alta de la ficha: volver, migas de pan y el botón que abre el buscador */
.ficha-fila-alta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; margin: 0 0 18px; }
.ficha-fila-alta .ficha-migas { margin: 0; flex: 1 1 auto; min-width: 0; }
.ficha-volver { flex: 0 0 auto; font-size: .86rem; color: var(--marron); text-decoration: none; padding-right: 16px; border-right: 1px solid var(--borde); line-height: 1.2; }
.ficha-volver:hover { color: var(--terracota); }
.ficha-buscar-abrir {
    flex: 0 0 auto; margin-left: auto; background: transparent; border: 1px solid var(--espresso); color: var(--espresso);
    border-radius: 999px; padding: 8px 18px; font: inherit; font-size: .86rem; font-weight: 600; cursor: pointer;
    transition: background .2s, color .2s;
}
.ficha-buscar-abrir:hover { background: var(--espresso); color: var(--crema-claro); }

/* La capa de búsqueda: entra con un fundido */
.capa-buscar {
    position: fixed; inset: 0; z-index: 900; background: rgba(229, 228, 169, .96); display: flex; align-items: flex-start; justify-content: center;
    padding: 18vh 20px 20px; opacity: 0; transition: opacity .28s ease;
}
.capa-buscar[hidden] { display: none; }
.capa-buscar.visible { opacity: 1; }
.capa-buscar-caja { width: 100%; max-width: 640px; transform: translateY(14px); transition: transform .32s ease; }
.capa-buscar.visible .capa-buscar-caja { transform: none; }
.capa-buscar-titulo { font-family: var(--serif); font-size: clamp(1.6rem, 3.4vw, 2.3rem); text-align: center; margin: 0 0 20px; color: var(--espresso); }
.capa-buscar-form { display: flex; gap: 10px; }
.capa-buscar-form .buscador-auto { flex: 1; }
.capa-buscar-form input { width: 100%; box-sizing: border-box; padding: 14px 18px; font-size: 1.05rem; border-radius: var(--radio); border: 1px solid var(--borde); background: var(--blanco); }
.capa-buscar-form input:focus { outline: none; border-color: var(--terracota); }
.capa-buscar-cerrar { position: absolute; top: 18px; right: 22px; background: none; border: 0; font-size: 2.4rem; line-height: 1; color: var(--espresso); cursor: pointer; }
.capa-buscar-cerrar:hover { color: var(--terracota); }
@media (max-width: 680px) { .ficha-buscar-abrir { margin-left: 0; } .capa-buscar { padding-top: 14vh; } .capa-buscar-form { flex-direction: column; } }

/* Listas de regalo */
.enlace-banner { color: inherit; text-decoration: underline; }
.intro-justificada { max-width: 620px; margin: 14px auto 0; text-align: justify; text-align-last: center; color: var(--marron); line-height: 1.7; }
.subtitulo-form { margin: 18px 0 4px; font-size: 1.05rem; }
.subtitulo-panel { margin: 26px 0 12px; font-size: 1.15rem; }
/* Ayudas y contadores del editor del blog */
.ayuda-campo { margin: 6px 0 0; font-size: .82rem; color: var(--marron); line-height: 1.5; }
.etiqueta-opcional { font-weight: 400; font-size: .8rem; color: var(--dorado); text-transform: none; letter-spacing: 0; }
.pista-inline { font-weight: 400; font-size: .82rem; color: var(--marron); }
.contador { font-weight: 700; color: var(--espresso); }
.contador.corto { color: var(--dorado); }
.contador.bien { color: var(--petroleo); }
.contador.largo { color: var(--terracota); }
.portada-actual { margin-top: 10px; }
.portada-actual img { max-width: 220px; border: 1px solid var(--borde); border-radius: var(--radio); display: block; }
.portada-actual span { display: block; font-size: .8rem; color: var(--marron); margin-top: 4px; }
.espacio-inf { margin-bottom: 30px; }
.nota-envio { color: var(--marron); font-size: .86rem; margin-bottom: 14px; }
.envio-regalo { background: var(--crema-claro); border: 1px solid var(--borde); border-radius: var(--radio); padding: 14px 16px; margin-bottom: 16px; font-size: .92rem; }
.envio-regalo span { display: block; color: var(--marron); font-size: .82rem; margin-top: 4px; }
.badge-regalo { display: inline-block; background: var(--terracota); color: var(--crema); font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 3px 8px; border-radius: 3px; vertical-align: middle; }
.dedicatoria-pedido { margin-top: 6px; font-size: .85rem; color: var(--terracota-osc); font-style: italic; }
.regalo-opcion .libro-cuerpo { padding: 30px 30px 32px; }
.regalo-opcion h3 { font-size: 1.5rem; margin-bottom: 10px; }
.regalo-opcion p { color: var(--marron); margin-bottom: 20px; }
.pasos-lista { margin: 0 0 24px 1.1rem; }
.pasos-lista li { margin-bottom: 10px; padding-left: 6px; }
.campo-copiar { width: 100%; padding: 10px 12px; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--crema-claro); font-size: .9rem; margin-bottom: 8px; cursor: pointer; }
.sugerencia-add { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 10px 14px; background: none; border: 0; border-bottom: 1px solid var(--borde); cursor: pointer; color: var(--espresso); font: inherit; }
.sugerencia-add:last-child { border-bottom: none; }
.sugerencia-add:hover { background: var(--crema-claro); }
.sugerencia-add img { width: 30px; height: 40px; object-fit: cover; border-radius: 4px; flex: 0 0 30px; }
.sugerencia-add .s-tit { display: block; font-weight: 600; font-size: .92rem; }
.sugerencia-add .s-aut { display: block; color: var(--marron); font-size: .82rem; }
.sugerencia-add .s-stock { margin-left: auto; color: var(--terracota); font-weight: 600; font-size: .82rem; white-space: nowrap; }

/* Home: hero y cierre de marca */
.hero-home .sub { margin: 18px auto 0; color: var(--marron); font-size: 1.12rem; }
.hero-home .cta { margin-top: 38px; }
.cierre-marca { text-align: center; background: var(--crema); }
.cierre-marca .marca-cierre { font-family: var(--serif); font-size: 2rem; display: block; margin-bottom: 14px; }

/* Reseñas / opiniones */
.estrellas { color: var(--terracota); letter-spacing: 2px; }
.opiniones { max-width: 820px; margin: 40px auto 0; border-top: 1px solid var(--borde); padding-top: 34px; }
.opiniones-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.opiniones-media { margin: 0; font-size: 1.05rem; }
.opiniones-lista { display: flex; flex-direction: column; gap: 18px; }
.opinion { background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio); padding: 18px 20px; }
.opinion-cab { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.opinion-verificada { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--petroleo); background: var(--crema); padding: 3px 8px; border-radius: 3px; }
.opinion h3 { font-size: 1.1rem; margin: 4px 0; }
.opinion p { margin: 0 0 6px; }
.opinion-firma { color: var(--marron); font-size: .85rem; }
.opiniones-nota { color: var(--marron); margin-top: 20px; }
/* Reseñas en Mi cuenta */
.resena-item { border-top: 1px solid var(--borde); padding: 18px 0; }
.resena-libro { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.resena-libro img { width: 40px; height: 55px; object-fit: cover; border-radius: 4px; }

/* Página "La librería" */
.video-marco { position: relative; max-width: 900px; margin: 0 auto; aspect-ratio: 16/9; border-radius: var(--radio); overflow: hidden; border: 1px solid var(--borde); box-shadow: 0 12px 30px var(--sombra); }
.video-marco iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--espresso); }
.video-placeholder img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.video-placeholder span { position: relative; color: var(--crema); font-family: var(--serif); font-size: 1.4rem; letter-spacing: .02em; }
.galeria-local { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.galeria-local figure { margin: 0; aspect-ratio: 4/3; overflow: hidden; border-radius: var(--radio); border: 1px solid var(--borde); }
.galeria-local img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.galeria-local figure:hover img { transform: scale(1.05); }
.bloque-agenda h3 { font-size: 1.5rem; margin-bottom: 8px; }
.bloque-agenda > p { color: var(--marron); margin-bottom: 16px; }
.lista-agenda { list-style: none; margin: 0 0 18px; padding: 0; }
.lista-agenda li { border-top: 1px solid var(--borde); }
.lista-agenda a { display: block; padding: 11px 0; color: var(--espresso); }
.lista-agenda a:hover { color: var(--terracota); }
.lista-agenda span { display: inline-block; min-width: 130px; color: var(--dorado); font-size: .85rem; }
.visita-info { align-items: stretch; }
.mapa-marco { border-radius: var(--radio); overflow: hidden; border: 1px solid var(--borde); min-height: 260px; }
.mapa-marco iframe { width: 100%; height: 100%; min-height: 260px; border: 0; display: block; }
@media (max-width: 700px) { .galeria-local { grid-template-columns: repeat(2, 1fr); } }

/* Página Sobre nosotros */
.nosotros-intro { font-size: 1.15rem; color: var(--marron); }

/* Sobre nosotros: el relato de cómo empezó todo. Texto seguido y justificado,
   como una página de libro, que es de lo que va. */
.nosotros-relato p { text-align: justify; text-justify: inter-word; hyphens: none; margin-bottom: 1.1rem; }
.nosotros-pasos { margin: 0 0 1.1rem 1.4rem; }
.nosotros-pasos li { margin-bottom: .5rem; }
.nosotros-remate {
    font-family: var(--serif); font-size: 1.5rem; font-style: italic;
    color: var(--terracota); text-align: center !important; margin-top: 1.8rem;
}
/* "En Bellatinta defendemos…": un solo panel con divisores finos, como la
   franja de info de la tienda. En cuatro columnas los párrafos salían a cinco
   palabras por línea y no había quien los leyera; en dos respiran. */
.defendemos {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
    background: var(--borde); border: 1px solid var(--borde);
    border-radius: 16px; overflow: hidden;
}
.defendemos > div { background: var(--blanco); padding: 32px 34px; }
.defendemos h3 {
    font-family: var(--serif); font-size: 1.45rem; font-weight: 600;
    color: var(--espresso); margin-bottom: .55rem;
}
.defendemos p {
    color: var(--marron); font-size: .98rem; line-height: 1.6;
    margin: 0;
}
@media (max-width: 760px) {
    .defendemos { grid-template-columns: 1fr; }
    .defendemos > div { padding: 26px 24px; }
}

.nosotros-quienes { align-items: center; gap: 44px; }
.nosotros-quienes h2 { margin-bottom: 1.1rem; }
.nosotros-quienes p { text-align: justify; text-justify: inter-word; hyphens: none; margin-bottom: 1rem; }
.nosotros-foto img { width: 100%; border-radius: var(--radio); display: block; }
.nosotros-historia { align-items: center; gap: 40px; }
.nosotros-historia h3 { font-size: 1.8rem; margin-bottom: 14px; }
.nosotros-historia p { margin-bottom: 14px; }
.nosotros-cita { background: var(--espresso); color: var(--crema-claro); padding: 40px 34px; border-radius: var(--radio); }
.nosotros-cita p { font-family: var(--serif); font-size: 1.5rem; line-height: 1.4; font-style: italic; margin: 0; }

/* Redes sociales en el pie */
.pie-redes { display: flex; gap: 12px; margin-top: 14px; }
.pie-redes a { display: inline-flex; width: 38px; height: 38px; align-items: center; justify-content: center; border: 1px solid rgba(229, 228, 169, .25); border-radius: 50%; color: var(--crema); transition: background .2s, border-color .2s; }
.pie-redes a:hover { background: var(--terracota); border-color: var(--terracota); }
.pie-redes svg { width: 19px; height: 19px; }

/* ============================================================
   TIENDA — estilo editorial elegante (fino, coherente con el logo).
   Serif refinada, líneas suaves, sin bloques gordos ni sombras duras.
   ============================================================ */
.tienda-pop { background: transparent; }

/* Cabecera-héroe, centrada y elegante */
.tienda-pop .tienda-cabecera { text-align: center; margin-bottom: 30px; }
.tienda-pop .kicker-pop {
    display: inline-block; background: none; color: var(--terracota);
    font-family: var(--sans); font-weight: 600; text-transform: uppercase;
    letter-spacing: .2em; font-size: .76rem; padding: 0; margin-bottom: 12px; transform: none;
}
.tienda-pop .tienda-cabecera h1 {
    font-family: var(--serif); font-weight: 600; text-transform: none;
    font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1.12; letter-spacing: 0;
    color: var(--espresso); margin: 0;
}
.tienda-pop .tienda-cabecera h1 .resalte {
    background: none; color: var(--terracota); padding: 0;
}
.tienda-pop .buscador-titulo { margin-top: 34px; }
.tienda-pop .titulo-seccion { margin-bottom: 18px; }
.tienda-pop .sub-pop { font-size: 1.08rem; font-weight: 400; color: var(--marron); max-width: 560px; margin: 16px auto 0; }
@media (max-width: 720px) { .tienda-pop .sub-pop { font-size: 1rem; } }

/* Buscador refinado */
.tienda-pop .buscador-tienda { max-width: 560px; margin: 26px auto; }
.tienda-pop .buscador-tienda .buscador-auto { flex: 1; }
.tienda-pop .buscador-tienda input {
    width: 100%; border: 1px solid var(--borde); border-radius: var(--radio); padding: 13px 16px;
    font-weight: 400; box-shadow: none; background: var(--blanco); color: var(--espresso);
}
.tienda-pop .buscador-tienda input:focus { outline: none; border-color: var(--terracota); box-shadow: none; }
.tienda-pop .buscador-tienda .boton {
    border-radius: var(--radio); font-weight: 600; text-transform: none; letter-spacing: 0;
    border: none; box-shadow: none;
}

/* Barra de la tienda: título y buscador en una fila. Los libros tienen que verse sin hacer scroll. */
.tienda-pop.seccion { padding-top: 34px; }
.tienda-pop .tienda-barra { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 0 0 18px; }
.tienda-pop .tienda-barra h1 {
    font-family: var(--serif); font-weight: 600; text-transform: none; letter-spacing: 0;
    font-size: clamp(1.9rem, 3vw, 2.4rem); line-height: 1.1; color: var(--espresso); margin: 0;
}
.tienda-pop .tienda-barra .buscador-tienda { flex: 0 1 560px; max-width: none; width: 100%; margin: 0; }

.envio-linea { font-size: .9rem; color: var(--marron); margin: 0 0 24px; text-align: left; }
.envio-linea strong { color: var(--terracota); }
.tienda-pop .tienda-cuerpo ~ .reco-banner { margin-top: 48px; }
@media (max-width: 720px) {
    .tienda-pop.seccion { padding-top: 22px; }
    .tienda-pop .tienda-barra { flex-direction: column; align-items: stretch; gap: 12px; }
    .tienda-pop .tienda-barra .buscador-tienda { flex: none; flex-direction: row; gap: 8px; }
    .tienda-pop .tienda-barra .buscador-tienda .boton { padding-left: 18px; padding-right: 18px; }
}

/* Géneros: rejilla en la portada de la tienda y lista lateral dentro de cada género */
.generos-rejilla { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0 0 36px; }
/* Editorial, formato y año de la edición, en una línea bajo el autor */
.libro-edicion { margin: 0 0 6px; font-size: .78rem; color: var(--marron); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.genero-tarjeta {
    display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; text-align: left;
    background: var(--crema-claro); border: 1px solid var(--borde); border-radius: 12px; color: var(--espresso);
    transition: background .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease, color .2s ease;
}
.genero-tarjeta strong { font-family: var(--serif); font-size: 1.2rem; font-weight: 600; line-height: 1.2; }
.genero-tarjeta span { font-size: .84rem; color: var(--marron); }
.genero-tarjeta:hover, .genero-tarjeta:focus-visible {
    background: var(--terracota); border-color: var(--terracota); color: var(--crema);
    transform: translateY(-4px); box-shadow: 0 12px 22px rgba(171, 134, 17, .32);
}
.genero-tarjeta:hover span, .genero-tarjeta:focus-visible span { color: rgba(229, 228, 169, .92); }
/* Al elegir un género la página llega a esta altura, no arriba del todo (deja sitio a la cabecera fija) */
#catalogo { scroll-margin-top: 96px; }
/* Con la lista de géneros al lado quedan 3 libros por fila */
.tienda-cuerpo.con-lateral .rejilla-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 800px) { .tienda-cuerpo.con-lateral .rejilla-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tienda-migas { margin: 0 0 22px; font-size: .9rem; text-align: left; }
.tienda-migas strong { color: var(--espresso); }
.tienda-cuerpo.con-lateral { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 40px; align-items: start; }
/* Se pega justo debajo de la cabecera fija (su alto lo pone general.js en --alto-cab), no debajo de ella */
.tienda-lateral { position: sticky; top: calc(var(--alto-cab, 130px) + 16px); max-height: calc(100vh - var(--alto-cab, 130px) - 32px); overflow-y: auto; scrollbar-width: thin; }
.tienda-generos summary { list-style: none; cursor: pointer; font-family: var(--serif); font-size: 1.3rem; font-weight: 600; margin: 0 0 10px; display: flex; justify-content: space-between; align-items: center; }
.tienda-generos summary::-webkit-details-marker { display: none; }
.tienda-generos ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--borde); }
.tienda-generos li { border-bottom: 1px solid var(--borde); }
.tienda-generos a { display: block; padding: 11px 4px; font-size: .95rem; color: var(--marron); }
.tienda-generos a { transition: background .15s ease, color .15s ease, padding .15s ease; }
.tienda-generos a:hover { background: var(--terracota); color: var(--crema); padding-left: 14px; }
.tienda-generos a.activo { color: var(--espresso); font-weight: 700; }
.tienda-generos a.activo:hover { color: var(--crema); }
@media (max-width: 1000px) { .generos-rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 800px) {
    .generos-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .tienda-cuerpo.con-lateral { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .tienda-lateral { position: static; border: 1px solid var(--borde); border-radius: 12px; padding: 12px 16px; background: var(--crema-claro); }
    .tienda-generos summary { margin: 0; font-size: 1.1rem; }
    .tienda-generos summary::after { content: '+'; font-weight: 400; }
    .tienda-generos[open] summary::after { content: '‘2'; }
    .tienda-generos[open] summary { margin-bottom: 10px; }
}

/* Banner del recomendador: texto a la izquierda, botón a la derecha */
.reco-banner {
    display: flex; align-items: center; justify-content: space-between; gap: 32px;
    background: var(--crema-claro); border: 1px solid var(--borde); border-radius: 18px;
    padding: 30px 38px; margin-bottom: 30px;
}
.reco-banner-txt { text-align: left; }
.reco-banner-txt h1, .reco-banner-txt h2 {
    font-family: var(--serif); font-weight: 600; text-transform: none;
    font-size: clamp(1.7rem, 3vw, 2.35rem); line-height: 1.14; letter-spacing: 0;
    color: var(--espresso); margin: 0 0 8px;
}
.reco-banner-txt h1 .resalte, .reco-banner-txt h2 .resalte { background: none; color: var(--terracota); padding: 0; }
.reco-banner-txt p { color: var(--marron); margin: 0; max-width: 560px; font-size: 1.02rem; }
.reco-banner-btn { flex: 0 0 auto; white-space: nowrap; padding: 14px 34px; }
@media (max-width: 720px) {
    .reco-banner { flex-direction: column; align-items: flex-start; gap: 18px; padding: 26px 24px; }
    .reco-banner-btn { width: 100%; text-align: center; }
}

/* Franja de ventajas de envío: panel unido con divisores finos, icono a la izquierda */
.tienda-pop .envio-info {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
    background: var(--blanco); border: 1px solid var(--borde);
    border-radius: 16px; overflow: hidden; padding: 0; margin: 0 0 32px;
}
.tienda-pop .envio-info > div {
    display: flex; align-items: flex-start; gap: 16px;
    background: transparent; color: var(--espresso);
    border: none; border-right: 1px solid var(--borde); border-radius: 0;
    padding: 26px 26px; transform: none;
}
.tienda-pop .envio-info > div:last-child { border-right: none; }
.tienda-pop .envio-info-dos { grid-template-columns: repeat(2, 1fr); }
.tienda-pop .envio-info-cuatro { grid-template-columns: repeat(4, 1fr); }
.tienda-pop .envio-info-cuatro > div { padding: 22px 20px; gap: 14px; }
@media (max-width: 1100px) {
    .tienda-pop .envio-info-cuatro { grid-template-columns: repeat(2, 1fr); }
    .tienda-pop .envio-info-cuatro > div:nth-child(2) { border-right: none; }
    .tienda-pop .envio-info-cuatro > div:nth-child(-n+2) { border-bottom: 1px solid var(--borde); }
}
@media (max-width: 720px) {
    .tienda-pop .envio-info-dos, .tienda-pop .envio-info-cuatro { grid-template-columns: 1fr; }
    .tienda-pop .envio-info-cuatro > div, .tienda-pop .envio-info-cuatro > div:nth-child(2) { border-right: none; border-bottom: 1px solid var(--borde); padding: 18px 20px; }
    .tienda-pop .envio-info-cuatro > div:last-child { border-bottom: none; }
}
.tienda-pop .envio-ico {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 46px;
    width: 46px; height: 46px; border-radius: 50%;
    background: var(--crema-claro); color: var(--terracota);
}
.tienda-pop .envio-ico svg { width: 23px; height: 23px; }
.tienda-pop .envio-txt { padding-top: 2px; }
.tienda-pop .envio-txt strong { display: block; color: var(--espresso); font-size: 1.02rem; margin-bottom: 6px; }
.tienda-pop .envio-txt em { color: var(--terracota); font-style: normal; }
.tienda-pop .envio-txt span { display: block; color: var(--marron); font-size: .9rem; line-height: 1.55; text-align: justify; text-justify: inter-word; hyphens: none; }
@media (max-width: 720px) {
    .tienda-pop .envio-info { grid-template-columns: 1fr; }
    .tienda-pop .envio-info > div { border-right: none; border-bottom: 1px solid var(--borde); }
    .tienda-pop .envio-info > div:last-child { border-bottom: none; }
}

/* Tarjetas de libro: sobrias, con borde suave y sombra ligera */
.tienda-pop .tarjeta {
    border: 1px solid var(--borde); border-radius: var(--radio); background: var(--blanco);
    box-shadow: 0 4px 14px var(--sombra); transition: transform .15s, box-shadow .15s; overflow: hidden;
}
.tienda-pop .tarjeta:hover { transform: translateY(-3px); box-shadow: 0 12px 26px var(--sombra); }
.tienda-pop .tarjeta .libro-imagen { border-bottom: 1px solid var(--borde); overflow: hidden; }
.tienda-pop .rejilla-4 { padding-top: 4px; }
.tienda-pop .libro-cuerpo { padding: 18px 18px 20px; }
.tienda-pop .libro-cuerpo h3 { font-family: var(--serif); font-weight: 600; font-size: 1.22rem; line-height: 1.2; }
.tienda-pop .libro-autor { font-weight: 400; }
.tienda-pop .libro-precio {
    display: inline-block; background: none; color: var(--terracota); font-family: var(--sans);
    font-weight: 700; font-size: 1.05rem; padding: 0; transform: none; margin: 4px 0 12px;
}
.tienda-pop .boton { border-radius: var(--radio); font-weight: 600; text-transform: none; letter-spacing: 0; font-size: .92rem; }
.tienda-pop .boton-linea { border-width: 1px; }

/* Fichas compactas: título en 2 líneas como mucho, sin el hueco vacío de antes y un solo botón (con el carrito
   encendido, «Añadir»; a la ficha se entra por la portada). */
.tienda-pop .libro-cuerpo { padding: 12px 14px 14px; }
.tienda-pop .libro-cuerpo h3 {
    font-size: 1.05rem; line-height: 1.2; margin: 0 0 3px;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.tienda-pop .libro-autor { font-size: .84rem; margin: 0 0 4px; }
/* En el listado solo título, autor y precio, como las librerías grandes: editorial y formato van en la ficha */
.tienda-pop .libro-edicion { display: none; }
.tienda-pop .libro-cuerpo .libro-precio { margin: 0 0 8px; white-space: nowrap; }
.tienda-pop .libro-acciones { margin-top: auto; padding: 0; gap: 0; }
.tienda-pop .libro-acciones .boton { padding: 8px 12px; font-size: .85rem; }
/* Como Casa del Libro y Luces: la tarjeta no lleva botón (portada, título, autor y precio) y se pulsa entera;
   comprar se hace en la ficha */
.tienda-pop .libro-acciones { display: none; }
.tienda-pop .libro-cuerpo h3 a { color: inherit; text-decoration: none; }
.tienda-pop .libro-cuerpo h3 a::after { content: ''; position: absolute; inset: 0; }
.tienda-pop .libro-cuerpo .libro-precio { margin: 4px 0 0; }
@media (min-width: 1100px) { .tienda-cuerpo.con-lateral .rejilla-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 560px) { .tienda-pop .rejilla { gap: 14px; } }
}

/* Etiquetas de estado: discretas dentro de la portada */
.tienda-pop .etiqueta-libro {
    top: 10px; left: 10px; z-index: 3; border: none; border-radius: 4px;
    font-weight: 600; padding: 4px 9px; transform: none; box-shadow: none;
}
.tienda-pop .etiqueta-novedad { background: var(--espresso); color: var(--crema); }
.tienda-pop .etiqueta-ultimas { background: var(--terracota); color: var(--crema); }

/* ===================== Compramos tus libros ===================== */
.contenedor-estrecho { max-width: 680px; }
.seccion-corta { padding: 40px 0; }
.titulo-ajustado { margin-bottom: 22px; }
.texto-justo { text-align: justify; text-justify: inter-word; hyphens: none; }

/* Mismo componente que la franja de envío de la tienda: panel unido, icono a la izquierda */
.pasos-compra {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
    background: var(--blanco); border: 1px solid var(--borde);
    border-radius: 16px; overflow: hidden; margin-top: 8px;
}
.paso-compra {
    display: flex; align-items: flex-start; gap: 16px;
    padding: 26px; border-right: 1px solid var(--borde);
}
.paso-compra:last-child { border-right: none; }
.paso-ico {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 46px;
    width: 46px; height: 46px; border-radius: 50%;
    background: var(--crema-claro); color: var(--terracota);
}
.paso-ico svg { width: 23px; height: 23px; }
.paso-txt strong { display: block; color: var(--espresso); font-size: 1.02rem; margin-bottom: 6px; }
.paso-txt span { display: block; color: var(--marron); font-size: .9rem; line-height: 1.55; text-align: justify; text-justify: inter-word; hyphens: none; }

.condiciones .libro-cuerpo { padding: 26px 28px; }
.condiciones h3 { margin-bottom: 14px; }
.condiciones ul { list-style: none; margin: 0; padding: 0; }
.condiciones li { position: relative; padding-left: 30px; margin-bottom: 12px; color: var(--espresso); line-height: 1.5; }
.condiciones li::before {
    position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .8rem; font-weight: 700;
}
.lista-check li::before { content: '✓'; background: var(--crema); color: var(--petroleo); }
.lista-cruz  li::before { content: '×'; background: var(--crema); color: var(--terracota-osc); }

.form-compra { max-width: none; }

/* Tarjeta que contiene el formulario */
.form-tarjeta {
    background: var(--blanco); border: 1px solid var(--borde); border-radius: 16px;
    padding: 34px 36px; box-shadow: 0 10px 30px var(--sombra);
}
@media (max-width: 600px) { .form-tarjeta { padding: 24px 20px; } }

/* Zona de subida de fotos (sustituye al input feo del navegador) */
.subida-fotos {
    position: relative; border: 2px dashed var(--borde); border-radius: var(--radio);
    background: var(--crema-claro); padding: 26px 20px; text-align: center;
    transition: border-color .2s ease, background .2s ease; cursor: pointer;
}
.subida-fotos:hover { border-color: var(--terracota); background: var(--blanco); }
.subida-fotos.tiene-archivos { border-style: solid; border-color: var(--terracota); background: var(--blanco); }
.subida-fotos input[type="file"] {
    position: absolute; inset: 0; width: 100%; height: 100%;
    opacity: 0; cursor: pointer; padding: 0; border: none;
}
.subida-txt strong { display: block; color: var(--espresso); font-weight: 600; margin-bottom: 4px; }
.subida-txt span { color: var(--marron); font-size: .85rem; }
.subida-lista { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.subida-lista li {
    font-size: .82rem; background: var(--crema-claro); border: 1px solid var(--borde);
    border-radius: 999px; padding: 4px 12px; color: var(--espresso);
}
.compra-fotos { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }

/* Caja de venta de libro dentro de un artículo del blog */
.cta-libro {
    background: var(--crema-claro); border: 1px solid var(--borde);
    border-radius: 12px; padding: 22px 26px; margin: 30px 0;
}
.cta-libro p { margin: 0 0 8px; }
.cta-libro p:first-child { font-family: var(--serif); font-weight: 600; font-size: 1.5rem; line-height: 1.22; color: var(--espresso); text-align: left; margin-bottom: 10px; }
.cta-libro .boton { margin-top: 10px; color: var(--crema); text-decoration: none; }
.cta-libro .boton:hover { color: var(--crema); }
.compra-fotos img { width: 84px; height: 84px; object-fit: cover; border-radius: 8px; border: 1px solid var(--borde); }

/* Banner de la portada: «Compramos tus libros» */
.compra-banner {
    display: flex; align-items: center; justify-content: space-between; gap: 32px;
    background: var(--espresso); color: var(--crema-claro);
    border-radius: 18px; padding: 36px 44px;
}
.compra-banner-txt { text-align: left; }
.compra-banner-txt .lema { color: var(--dorado); }
.compra-banner-txt h2 { color: var(--crema-claro); margin: 6px 0 10px; }
.compra-banner-txt p { color: rgba(229, 228, 169, .8); margin: 0; max-width: 620px; }
.compra-banner-txt strong { color: var(--crema); }
.compra-banner-btn {
    flex: 0 0 auto; white-space: nowrap; padding: 14px 34px;
    background: var(--crema-claro); color: var(--espresso); border: none;
}
.compra-banner-btn:hover { background: var(--crema); }

@media (max-width: 720px) {
    .pasos-compra { grid-template-columns: 1fr; }
    .paso-compra { border-right: none; border-bottom: 1px solid var(--borde); }
    .paso-compra:last-child { border-bottom: none; }
    .compra-banner { flex-direction: column; align-items: flex-start; gap: 20px; padding: 30px 26px; }
    .compra-banner-btn { width: 100%; text-align: center; }
}

@media (max-width: 600px) {
    .tienda-pop .buscador-tienda { flex-direction: column; }
    /* Filtros: tira horizontal deslizable en una sola línea */
    .tienda-pop .filtros { margin: 0 -20px 26px; }
    .tienda-pop .filtros ul {
        flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scroll-snap-type: x proximity;
        padding: 4px 20px 10px; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    }
    .tienda-pop .filtros ul::-webkit-scrollbar { display: none; }
    .tienda-pop .filtros li { flex: 0 0 auto; scroll-snap-align: start; }
    .tienda-pop .filtros a { white-space: nowrap; }
}

/* Etiqueta de estado sobre la portada del libro */
.libro-imagen { position: relative; }
.etiqueta-libro {
    position: absolute; top: 10px; left: 10px; z-index: 2;
    font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
    padding: 4px 9px; border-radius: 3px; color: var(--crema);
}
.etiqueta-novedad { background: var(--espresso); }
.etiqueta-ultimas { background: var(--terracota); }
.etiqueta-agotado { background: var(--marron); }
.etiqueta-segunda { background: var(--petroleo); }
.tienda-pop .etiqueta-segunda { background: var(--petroleo); color: var(--crema); }
.libro-estado { display: inline-block; font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--petroleo); margin: 0 0 6px; }
.aviso-segunda { background: var(--crema); border-radius: var(--radio); padding: 12px 14px; font-size: .92rem; color: var(--petroleo); }

/* Clubes de lectura */
.intro-clubes { color: var(--marron); }

/* Cuando una agenda está vacía, el mensaje va centrado y con aire, no metido
   en la primera columna de la rejilla */
.agenda-vacia { margin-top: 2rem; color: var(--marron); }
.club-tarjeta { display: flex; flex-direction: column; }
.club-imagen { aspect-ratio: 16 / 9; background: var(--crema); overflow: hidden; }
/* Igual que la del taller: llena la franja entera. Aqui la caja es 16:9, asi
   que la imagen conviene subirla apaisada (1200x675 va sobrado). */
.club-imagen img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.club-cuerpo { padding: 22px 24px; display: flex; flex-direction: column; flex: 1; }
.club-dirigido, .ficha-dirigido { color: var(--terracota); font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 600; margin-bottom: 4px; }
.club-datos, .ficha-datos { list-style: none; margin: 14px 0 20px; padding: 14px 0 0; border-top: 1px solid var(--borde); }
ul.club-datos, ul.ficha-datos { display: block; }   /* la rejilla de dt/dd de la ficha (más arriba) desbordaba los li de las actividades en el móvil */
.club-datos li, .ficha-datos li { display: flex; justify-content: space-between; gap: 16px; padding: 5px 0; font-size: .9rem; }
.club-datos li span, .ficha-datos li span { color: var(--marron); }
.club-datos li strong, .ficha-datos li strong { text-align: right; }
.club-cuerpo .boton { margin-top: auto; }
.club-ficha, .ficha-actividad { align-items: start; }
.club-form, .ficha-form { position: sticky; top: 160px; }
.club-form h3, .ficha-form h3 { font-size: 1.65rem; line-height: 1.15; margin-bottom: 10px; }

/* Páginas legales: texto largo y seguido, pensado para leerse, no para lucir */
/* Descripciones con formato (clubes, talleres, eventos): lo que escriben en
   el editor del panel. Solo hay negrita, cursiva, listas y enlaces. */
.texto-formateado p { margin-bottom: 1rem; }
.texto-formateado p:last-child { margin-bottom: 0; }
.texto-formateado ul, .texto-formateado ol { margin: 0 0 1rem 1.2rem; }
.texto-formateado li { margin-bottom: .35rem; }
.texto-formateado strong, .texto-formateado b { font-weight: 700; color: var(--espresso); }

.nota-privacidad { margin-top: 10px; font-size: .82rem; color: var(--marron); text-align: center; }

.legal { margin-top: 2rem; }
.legal p { text-align: justify; text-justify: inter-word; hyphens: none; }
.legal h3 { font-size: 1.5rem; margin: 2.4rem 0 .8rem; }
.legal h4 { font-size: 1.05rem; font-family: var(--sans); font-weight: 600; margin: 1.6rem 0 .4rem; }
.legal-fecha { color: var(--marron); font-size: .88rem; }
.legal-datos, .legal-lista { list-style: none; margin: 0 0 1.2rem; padding: 0; }
.legal-datos li {
    display: flex; gap: 18px; padding: 10px 0;
    border-bottom: 1px solid var(--borde); font-size: .95rem;
}
.legal-datos li:last-child { border-bottom: none; }
.legal-datos li span { color: var(--marron); flex: 0 0 150px; }
.legal-lista li { padding: 5px 0 5px 18px; position: relative; }
.legal-lista li::before { content: "·"; position: absolute; left: 4px; color: var(--dorado); }
@media (max-width: 640px) {
    .legal-datos li { flex-direction: column; gap: 2px; }
    .legal-datos li span { flex: none; }
}

/* Tarjetas-resumen del panel */
.cifras { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 28px; }
.cifra { flex: 0 1 190px; background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio); padding: 14px 18px; text-align: center; }
.cifra .numero { font-family: var(--serif); font-size: 1.7rem; color: var(--terracota); line-height: 1.15; }
.cifra .texto  { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--marron); }

/* Grafica de visitas del panel. Barras y punto. Sin libreria de graficas: son
   barras de colores, no hace falta traerse 200 KB de JavaScript para eso.
   Cada dia es una columna que se estira; el alto lo pone PHP en el `style`,
   porque es un dato, no un estilo. */
.grafica {
    display: flex; align-items: flex-end; gap: 3px;
    height: 180px; padding: 12px 14px 0;
    background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio);
    overflow-x: auto;   /* un ano son 365 barras: que se pueda arrastrar */
}
.grafica-dia { flex: 1 1 0; min-width: 6px; display: flex; flex-direction: column; height: 100%; }
/* La barra crece desde abajo, de ahi el flex-end */
.grafica-barra { flex: 1; display: flex; align-items: flex-end; }
.grafica-barra span {
    display: block; width: 100%; min-height: 0;
    background: var(--terracota); border-radius: 2px 2px 0 0;
    transition: background .15s ease;
}
.grafica-dia:hover .grafica-barra span { background: var(--espresso); }
.grafica-pie {
    font-size: .62rem; color: var(--marron); text-align: center;
    padding: 4px 0 6px; white-space: nowrap;
}
.grafica-leyenda { margin-top: 8px; }
/* En movil no caben los numeros de los dias, y amontonados no dicen nada */
@media (max-width: 700px) {
    .grafica { height: 140px; }
    .grafica-pie { display: none; }
}

/* El tramo que se esta mirando, marcado entre los botones de arriba */
.boton-activo { background: var(--espresso); border-color: var(--espresso); color: var(--crema); }
.boton-activo:hover { background: var(--espresso); border-color: var(--espresso); color: var(--crema); }

/* Tabla de datos */
.tabla {
    width: 100%; border-collapse: collapse;
    background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden;
}
.tabla th, .tabla td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--borde); font-size: .92rem; }
.tabla th { background: var(--crema-claro); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--marron); }
.tabla tr:last-child td { border-bottom: none; }
.tabla tr:hover td { background: var(--crema-claro); }
/* Cada fila en una sola línea (en móvil la tabla se desplaza en horizontal) */
.tabla th, .tabla td { white-space: nowrap; }
/* …pero en pantalla grande eso hacía que la tabla se saliera por la derecha y
   se comiera la última columna: en Talleres, la columna «Cuándo» es una frase
   («Segundo y cuarto miércoles de cada mes de 17:30 a 19:00») y empujaba los
   botones fuera de la pantalla. Lo cazó Iñaki el 16-09-2026. Desde 860px el
   texto puede partirse, que es lo que hace que quepa; los botones de acciones
   siguen en una línea, que partidos quedan fatal. */
/* …salvo las celdas marcadas con `parte`, que son las que llevan una frase en
   vez de un dato: el «cuándo» de un taller es «Segundo y cuarto miércoles de
   cada mes de 17:30 a 19:00», y en una sola línea empuja la tabla fuera de la
   pantalla y se come los botones. Lo cazó Iñaki el 16-09-2026.
   Se marcan a mano y no se pone en todas porque una tabla de números o de
   fechas se lee mucho mejor en una línea, que es para lo que se hizo la regla
   de arriba. Y NUNCA se parte una palabra por la mitad: se parte por espacios,
   como se ha escrito siempre en esta casa. */
.tabla .parte { white-space: normal; overflow-wrap: normal; word-break: normal; hyphens: none; min-width: 9.5rem; }

/* Y el cinturón, por si aun así no cabe (una pantalla de portátil pequeña, una
   tabla con muchas columnas): la tabla se arrastra DENTRO de su propia caja en
   vez de cortarse contra el borde. Nunca se pierde una columna. */
@media (max-width: 1200px) {
    .tabla { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
/* Una fila de algo que sigue ahí pero ya no está en uso (una distribuidora con
   la que no se trabaja ahora). Se apaga, no se esconde: el dato hace falta. */
.tabla tr.fila-apagada td { color: var(--marron); background: var(--crema); }

/* Escritorio del admin: rejilla de accesos directos */
.accesos { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; }
.tarjeta-acceso {
    display: block; background: var(--blanco); border: 1px solid var(--borde);
    border-radius: var(--radio); padding: 24px 22px; color: var(--espresso);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.tarjeta-acceso:hover { transform: translateY(-3px); box-shadow: 0 10px 24px var(--sombra); border-color: var(--dorado); color: var(--espresso); }
.tarjeta-acceso h3 { margin-bottom: 6px; }
.tarjeta-acceso p  { color: var(--marron); font-size: .92rem; margin: 0; }
.tarjeta-acceso-principal { background: var(--terracota); border-color: var(--terracota); }
.tarjeta-acceso-principal:hover { background: var(--terracota-osc); border-color: var(--terracota-osc); }
.tarjeta-acceso-principal h3, .tarjeta-acceso-principal p { color: var(--crema-claro); }

/* Acceso al panel */
/* Login del panel: tarjeta centrada a pantalla completa, 100% responsive */
body.pagina-acceso { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; margin: 0; }
.acceso { width: 100%; max-width: 380px; margin: 0 auto; background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio); padding: 36px; box-shadow: 0 10px 30px var(--sombra); }
.acceso .formulario { max-width: none; }
@media (max-width: 420px) { .acceso { padding: 26px 20px; border-radius: 12px; } }

/* Estado de pedidos */
.estado { display: inline-block; font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; padding: 3px 10px; border-radius: 20px; }
.estado-pendiente  { background: var(--crema); color: var(--petroleo); }
.estado-enviado    { background: var(--crema); color: var(--petroleo); }
.estado-cancelado  { background: var(--crema); color: var(--granate); }
.estado-pendiente_pago { background: var(--crema); color: var(--petroleo); }
.estado-pagado     { background: var(--crema); color: var(--petroleo); }
.estado-reembolsado { background: var(--crema); color: var(--petroleo); }

/* --------------------------------------------------------------------------
   14b. Recaos (marketplace local de Coín)
   -------------------------------------------------------------------------- */
/* "Cómo funciona": pasos numerados */
.pasos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.paso {
    text-align: center; padding: 28px 20px;
    background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio);
}
.paso .numero {
    display: inline-flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; margin-bottom: 14px;
    font-family: var(--serif); font-size: 1.5rem;
    color: var(--crema-claro); background: var(--terracota); border-radius: 50%;
}
.paso h3 { font-size: 1.2rem; margin-bottom: 6px; }
.paso p  { font-size: .92rem; color: var(--marron); margin-bottom: 0; }

/* Distintivo de origen local en los productos */
.sello-local {
    display: inline-block; align-self: flex-start;
    font-size: .7rem; text-transform: uppercase; letter-spacing: .08em;
    padding: 3px 10px; border-radius: 20px;
    background: var(--oliva); color: var(--crema-claro); margin-bottom: 10px;
}

/* Nombre del comercio y datos en las fichas */
.comercio-nombre { font-family: var(--serif); font-size: 1.35rem; color: var(--espresso); }
.comercio-datos  { font-size: .9rem; color: var(--marron); }
.producto-vendedor { font-size: .85rem; color: var(--marron); margin-bottom: 10px; }
.producto-vendedor a { color: var(--oliva); }

/* Opciones de entrega (reparto / casillero) en el pago */
.opciones-entrega { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 8px; }
.opcion-entrega {
    border: 1px solid var(--borde); border-radius: var(--radio);
    padding: 18px; background: var(--blanco); cursor: pointer;
}
.opcion-entrega h4 { font-family: var(--serif); font-size: 1.2rem; margin-bottom: 4px; }
.opcion-entrega p  { font-size: .88rem; color: var(--marron); margin-bottom: 0; }
.opcion-entrega input { margin-right: 8px; }

/* Estados logísticos del reparto (usan también la clase base .estado) */
.estado-pendiente_recogida { background: var(--crema); color: var(--petroleo); }
.estado-recogido           { background: var(--crema); color: var(--petroleo); }
.estado-en_reparto         { background: var(--crema); color: var(--petroleo); }
.estado-entregado          { background: var(--crema); color: var(--petroleo); }
.estado-en_casillero       { background: var(--crema); color: var(--petroleo); }
.estado-cancelado          { background: var(--crema); color: var(--granate); }

/* --------------------------------------------------------------------------
   14c. Tarjetas regalo
   -------------------------------------------------------------------------- */
/* Selección rápida de importe */
.importes { display: flex; flex-wrap: wrap; gap: 12px; }
.importe-opcion {
    position: relative; flex: 1; min-width: 92px;
    border: 1px solid var(--borde); border-radius: var(--radio);
    background: var(--blanco); text-align: center; cursor: pointer;
    padding: 16px 10px; transition: border-color .2s ease, background .2s ease;
}
.importe-opcion input { position: absolute; opacity: 0; }
.importe-opcion .cifra { font-family: var(--serif); font-size: 1.6rem; color: var(--espresso); display: block; }
.importe-opcion:hover { border-color: var(--dorado); }
/* Resalte cuando el radio está marcado */
.importe-opcion input:checked + .cifra { color: var(--terracota); }
.importe-opcion:has(input:checked) { border-color: var(--terracota); background: var(--crema-claro); }

/* La tarjeta regalo (vista elegante, estilo premium) */
.regalo-tarjeta {
    max-width: 540px; margin: 0 auto;
    background: var(--espresso);
    color: var(--crema-claro);
    border-radius: 18px;
    padding: 36px 38px 30px;
    position: relative; overflow: hidden;
    box-shadow: 0 18px 40px rgba(0, 89, 120, .28);
}
/* Un aro dorado muy tenue asomando por la esquina: da profundidad sin ser un
   adorno que se note. Nada de rojos: la marca es crema, espresso y dorado. */
.regalo-tarjeta::after {
    content: ""; position: absolute; right: -80px; bottom: -100px;
    width: 280px; height: 280px; border-radius: 50%;
    border: 34px solid rgba(229, 228, 169, .10);
}
.regalo-tarjeta > * { position: relative; z-index: 1; }

/* El rótulo va apilado, como el logo real: el nombre y debajo qué es.
   Antes "Tarjeta regalo" iba a la derecha y quedaba descolgado. */
.regalo-tarjeta .rt-cab { margin-bottom: 26px; }
.regalo-tarjeta .rt-marca {
    display: block; font-family: var(--serif); font-size: 2.1rem;
    line-height: 1; color: var(--crema-claro);
}
.regalo-tarjeta .rt-tipo {
    display: block; margin-top: 6px;
    font-size: .72rem; letter-spacing: .28em; text-transform: uppercase;
    color: var(--dorado);
}
.regalo-tarjeta .rt-importe {
    font-family: var(--serif); font-size: 3.2rem; line-height: 1;
    color: var(--crema); margin-bottom: 8px;
}
.regalo-tarjeta .rt-saldo { font-size: .86rem; color: var(--dorado); }
.regalo-tarjeta .rt-mensaje {
    font-family: var(--serif); font-style: italic; font-size: 1.12rem;
    color: rgba(229, 228, 169, .82); margin: 22px 0 0; line-height: 1.5;
}
.regalo-tarjeta .rt-pie {
    display: flex; justify-content: space-between; align-items: flex-end; gap: 18px;
    margin-top: 28px; padding-top: 18px;
    border-top: 1px solid rgba(229, 228, 169, .16);
    font-size: .84rem; color: rgba(229, 228, 169, .62);
}
.regalo-tarjeta .rt-codigo {
    font-family: "Consolas", "Courier New", monospace; letter-spacing: .12em;
    font-size: .95rem; color: var(--crema-claro);
    background: rgba(229, 228, 169, .10); padding: 7px 13px; border-radius: 8px;
    white-space: nowrap;
}
.regalo-tarjeta .rt-de-para span { display: block; }
.regalo-tarjeta .rt-de-para strong { color: var(--crema-claro); font-weight: 600; }

@media (max-width: 520px) {
    .regalo-tarjeta { padding: 28px 24px 24px; }
    .regalo-tarjeta .rt-importe { font-size: 2.6rem; }
    .regalo-tarjeta .rt-pie { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* Títulos de columna: iban con el tamaño de un h3 suelto y se quedaban más
   pequeños que el texto de al lado */
.titulo-columna { font-size: 1.65rem; line-height: 1.15; margin-bottom: 14px; }

/* Resultados de buscar un libro en las fuentes de datos (panel de inventario).
   Se ve la portada porque es lo que permite reconocer la edición correcta de un
   vistazo, que es justo lo que cuesta decidir aquí. */
.resultados-libros { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
.resultado-libro {
    display: flex; gap: 16px; padding: 16px;
    background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio);
}
.resultado-portada {
    flex: 0 0 78px; height: 112px; border-radius: 6px; overflow: hidden;
    background: var(--crema); display: flex; align-items: center; justify-content: center;
}
.resultado-portada img { width: 100%; height: 100%; object-fit: cover; }
.resultado-portada .sin-portada { font-size: .68rem; color: var(--marron); text-align: center; padding: 0 6px; }
.resultado-datos { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.resultado-datos h3 { font-size: 1.05rem; line-height: 1.25; margin-bottom: 4px; }
.resultado-autor { font-size: .9rem; color: var(--espresso); margin-bottom: 2px; }
.resultado-pie   { font-size: .82rem; color: var(--marron); }
.resultado-isbn  {
    font-family: "Consolas", "Courier New", monospace;
    font-size: .78rem; color: var(--marron); margin: 4px 0 10px;
}
.resultado-datos form { margin-top: auto; }

/* Ficha de saldo tras consultar un código */
.saldo-resultado {
    max-width: 460px; margin: 20px auto 0; text-align: center;
    background: var(--crema-claro); border: 1px solid var(--borde);
    border-radius: var(--radio); padding: 24px;
}
.saldo-resultado .cantidad { font-family: var(--serif); font-size: 2.6rem; color: var(--terracota); }

/* Estados de las tarjetas regalo (usan también la clase base .estado) */
.estado-activa   { background: var(--crema); color: var(--petroleo); }
.estado-agotada  { background: var(--crema); color: var(--petroleo); }
.estado-anulada  { background: var(--crema); color: var(--granate); }

/* --------------------------------------------------------------------------
   14d. Utilidades del panel de inventario
   -------------------------------------------------------------------------- */
.formulario-admin { max-width: 100%; }
.portada-preview  { max-height: 220px; border: 1px solid var(--borde); border-radius: 8px; }
.miniatura-libro  { width: 34px; height: 46px; object-fit: cover; border-radius: 4px; }
.oculto { display: none; }
.der { text-align: right; }
.tabla .tot td, tr.tot td { font-weight: 700; }
.form-inline { display: inline; }

/* Aviso emergente (toast), p. ej. al añadir un libro al carrito */
.toast {
    position: fixed; bottom: 26px; left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--espresso); color: var(--crema-claro);
    padding: 14px 22px; border-radius: 12px;
    box-shadow: 0 14px 34px rgba(0, 89, 120, .28);
    font-size: .95rem; z-index: 200; max-width: 90vw;
    display: flex; align-items: center; gap: 16px;
    opacity: 0; pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
}
.toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.toast a { color: var(--crema); font-weight: 600; white-space: nowrap; }

/* Ticket 80mm para impresión por navegador (respaldo del ESC/POS) */
.ticket-pagina { background: var(--crema); min-height: 100vh; padding: 20px 0; }
.ticket {
    width: 72mm; margin: 0 auto; padding: 6mm 4mm; background: var(--crema);
    font-family: "Consolas", "Courier New", monospace; font-size: 12px; color: var(--petroleo);
    box-shadow: 0 6px 18px rgba(0, 89, 120, .12);
}
.ticket h1 { font-family: inherit; font-weight: bold; font-size: 18px; text-align: center; margin: 0 0 2px; color: var(--petroleo); }
.ticket .c   { text-align: center; }
.ticket .sep { border-top: 1px dashed var(--petroleo); margin: 7px 0; }
.ticket table { width: 100%; border-collapse: collapse; }
.ticket td { padding: 1px 0; vertical-align: top; }
.ticket .der { text-align: right; white-space: nowrap; }
.ticket .tot { font-weight: bold; font-size: 15px; }
/* QR tributario (Verifactu). La Orden pide 30-40 mm de lado, al menos 2 mm de
   blanco alrededor (recomienda 6) y que el rótulo y la leyenda se lean igual de
   bien que el resto del ticket: nada de letra pequeña al pie. */
.ticket-qr { margin: 0 0 6px; }
.ticket-qr svg { display: block; margin: 4px auto; }
.ticket-acciones { text-align: center; margin: 16px; }
@media print {
    .ticket-acciones { display: none; }
    .ticket-pagina { background: var(--crema); padding: 0; }
    .ticket { box-shadow: none; width: auto; margin: 0; }
    @page { margin: 0; }
}

/* --------------------------------------------------------------------------
   15. Adaptación a móviles (responsive)
   -------------------------------------------------------------------------- */
/* Cabecera: por debajo de este ancho, hamburguesa a la izquierda y logo
   centrado de verdad (columnas laterales del mismo ancho). El menú entero
   vive en el panel a pantalla completa (#menuFull). */
@media (max-width: 900px) {
    .cab { grid-template-columns: 46px 1fr 46px; gap: 8px; padding-top: 10px; padding-bottom: 10px; }
    .menu-movil { display: flex; grid-column: 1; }
    .cab .logo { grid-column: 2; justify-self: center; }
    .logo img { height: 44px; }
    .menu.izq, .menu.der { display: none; }
}

@media (max-width: 920px) {
    .rejilla-4 { grid-template-columns: repeat(3, 1fr); }
    .pilares   { grid-template-columns: repeat(2, 1fr); }
    .pie-columnas { grid-template-columns: 1fr 1fr; }
    .cifras    { grid-template-columns: repeat(2, 1fr); }
    .pasos     { grid-template-columns: repeat(2, 1fr); }
    .accesos-web { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 680px) {
    body { font-size: 1rem; }
    h1 { font-size: 2.3rem; }
    .hero-contenido h1 { font-size: 2.6rem; }
    .rejilla-2, .rejilla-3, .rejilla-4 { grid-template-columns: 1fr; }
    .galeria { grid-template-columns: 1fr 1fr; grid-auto-rows: 140px; }
    .galeria-item .pie-foto { font-size: .95rem; padding: 10px 12px; }
    .pilares { grid-template-columns: 1fr; }
    .pasos { grid-template-columns: 1fr; }
    .opciones-entrega { grid-template-columns: 1fr; }
    .accesos-web { grid-template-columns: 1fr; }
    .envio-info { grid-template-columns: 1fr; }
    .hero-min { padding: 60px 0 54px; }
    .hero-min h1 { font-size: 2.7rem; }
    .pie-columnas { grid-template-columns: 1fr; }
    .cifras { grid-template-columns: 1fr 1fr; }
    .campo-doble, .campo-triple, .campo-cuadruple { grid-template-columns: 1fr; }
    .suscripcion { flex-direction: column; }
    .newsletter h3 { white-space: normal; font-size: 1.45rem; max-width: 340px; }
    .admin-barra .contenedor { flex-direction: column; gap: 12px; align-items: stretch; }
    .admin-menu { width: 100%; margin-left: 0; }
    .panel-titulo { flex-direction: column; align-items: flex-start; gap: 10px; }
    /* Tablas desplazables en móvil (mantienen una fila por registro) */
    .tabla { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* Lo que sale del banco al abonar un albarán: va aparte y grande, porque es la
   cifra que hay que casar con la transferencia. El total de la factura puede
   ser otro si la distribuidora descuenta un saldo a favor. */
.albaran-transferir {
    margin: 4px 0 18px; padding: 12px 16px;
    background: var(--crema-claro); border: 1px solid var(--borde); border-radius: var(--radio);
    font-size: 1.05rem;
}
.albaran-transferir strong { font-family: var(--serif); font-size: 1.35rem; color: var(--espresso); }

/* ---- Ficha del catálogo: la portada a la izquierda y los datos al lado ---- */
.ficha-catalogo { display: flex; gap: 28px; align-items: flex-start; flex-wrap: wrap; }
.ficha-catalogo-portada { flex: 0 0 200px; }
.ficha-catalogo-portada img {
    width: 100%; border-radius: var(--radio); border: 1px solid var(--borde); background: var(--blanco);
}
.ficha-catalogo-portada .sin-portada {
    display: flex; align-items: center; justify-content: center; text-align: center;
    height: 280px; border: 1px dashed var(--borde); border-radius: var(--radio);
    color: var(--marron); font-size: .85rem; background: var(--crema-claro);
}
.ficha-catalogo-datos { flex: 1 1 340px; min-width: 0; }
.ficha-catalogo-datos h2 { margin-bottom: 4px; }
@media (max-width: 700px) { .ficha-catalogo-portada { flex: 0 0 140px; } }

/* Cuentas con distribuidoras: crédito usado y plazos de devolución */
.cuenta-cifras { display: flex; gap: 12px; flex-wrap: wrap; margin: 6px 0 10px; }
.cuenta-cifras > div { flex: 1 1 160px; background: var(--crema); border: 1px solid var(--crema); border-radius: var(--radio); padding: 12px 14px; }
.cuenta-cifras span { display: block; font-size: .8rem; color: var(--marron); }
.cuenta-cifras strong { font-size: 1.5rem; }
.cuenta-barra { height: 12px; background: var(--crema); border-radius: 6px; overflow: hidden; margin-bottom: 14px; }
.cuenta-barra i { display: block; height: 100%; background: var(--petroleo); }
.cuenta-barra-alta i { background: var(--mostaza); }
.cuenta-barra-roja i { background: var(--granate); }
.cuenta-roja, .cuenta-roja strong { color: var(--granate); font-weight: 700; }
.cuenta-ambar { color: var(--mostaza); font-weight: 700; }
.cuenta-condiciones { margin-top: 22px; }
.cuenta-condiciones summary { cursor: pointer; font-weight: 700; margin-bottom: 12px; }
.tabla td.der, .tabla th.der { text-align: right; }
.tabla-lotes { table-layout: fixed; width: 100%; }
.tabla-lotes th:nth-child(2), .tabla-lotes td:nth-child(2) { width: 150px; }
.tabla-lotes th:nth-child(3), .tabla-lotes td:nth-child(3) { width: 72px; }
.tabla-lotes th:nth-child(4), .tabla-lotes td:nth-child(4) { width: 100px; }
.tabla-lotes th:nth-child(5), .tabla-lotes td:nth-child(5) { width: 140px; }
@media (max-width: 700px) { .tabla-lotes { table-layout: auto; min-width: 640px; } }

/* Devoluciones */
.botones-fila { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.tabla-lotes td:first-child { overflow-wrap: anywhere; padding-right: 12px; }
.tabla-devolver input[type=number] { padding: 6px 8px; border: 1px solid var(--crema); border-radius: 6px; font: inherit; background: var(--crema); }
@media (max-width: 700px) {
    .tabla-lotes.tabla-devolver { min-width: 0; }
    .tabla-devolver th:nth-child(2), .tabla-devolver td:nth-child(2) { display: none; }
    .tabla-devolver th:nth-child(3), .tabla-devolver td:nth-child(3) { width: 56px; }
    .tabla-devolver th:nth-child(4), .tabla-devolver td:nth-child(4) { width: 84px; }
    .tabla-devolver th:nth-child(5), .tabla-devolver td:nth-child(5) { width: 72px; }
    .tabla-devolver input[type=number] { width: 3.8rem !important; }
}
@media (max-width: 700px) {
    .tabla-lotes.tabla-devolver { table-layout: fixed; width: 100%; }
    .tabla-devolver td:first-child { white-space: normal; }
}
@media (max-width: 700px) {
    .tabla-devolver th, .tabla-devolver td { padding-left: 6px; padding-right: 6px; }
    .tabla-devolver th:nth-child(3), .tabla-devolver td:nth-child(3) { width: 48px; }
    .tabla-devolver th:nth-child(4), .tabla-devolver td:nth-child(4) { width: 76px; font-size: .85rem; }
    .tabla-devolver th:nth-child(5), .tabla-devolver td:nth-child(5) { width: 60px; }
    .tabla-devolver input[type=number] { width: 3.2rem !important; padding: 6px 4px; }
}
/* Tabla que en el móvil se apila: cada fila es una ficha (Encargos) */
@media (max-width: 700px) {
    .tabla-apilada, .tabla-apilada tbody, .tabla-apilada tr, .tabla-apilada td { display: block; width: 100%; }
    .tabla-apilada thead { display: none; }
    .tabla-apilada tr { padding: 10px 0; border-bottom: 1px solid var(--crema); }
    .tabla-apilada td { border: 0; padding: 4px 14px; text-align: left; }
    .tabla-apilada td.der { text-align: left; }
    .tabla-apilada .botones-fila { justify-content: flex-start !important; }
}

/* Botón flotante de consulta por WhatsApp (como Luces): stock y plazo antes de comprar */
.whatsapp-flotante {
    position: fixed; right: 18px; bottom: 18px; z-index: 60;
    display: inline-flex; align-items: center; gap: 10px;
    padding: 12px 20px 12px 14px; border-radius: 999px;
    background: var(--verde); color: var(--crema); font-size: .92rem; font-weight: 600; line-height: 1.1;
    box-shadow: 0 6px 18px rgba(0, 89, 120, .22);
}
.whatsapp-flotante svg { width: 28px; height: 28px; flex: 0 0 auto; }
.whatsapp-flotante:hover { background: var(--verde); color: var(--crema); }

/* Barra de compra fija de la ficha (solo en el móvil) */
.barra-compra { display: none; }
.ficha-envio-nota { margin-top: -4px; }
@media (max-width: 720px) {
    .barra-compra {
        display: flex; align-items: center; justify-content: space-between; gap: 14px;
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
        padding: 10px 16px; background: var(--crema-claro); border-top: 1px solid var(--borde);
    }
    .barra-compra-precio { font-weight: 700; font-size: 1.15rem; color: var(--terracota); }
    .barra-compra .boton { flex: 1; text-align: center; max-width: 260px; }
    body:has(.barra-compra) { padding-bottom: 72px; }
    body:has(.barra-compra) .whatsapp-flotante { bottom: 84px; }
}

/* Pago: el importe no se parte en dos líneas, y las garantías van junto al botón */
.resumen-linea > span:last-child { white-space: nowrap; }
.resumen-nota { font-size: .88rem; color: var(--marron); margin: 14px 0 0; }
.pago-garantias { list-style: none; margin: 14px 0 0; padding: 0; font-size: .88rem; color: var(--marron); }
.pago-garantias li { margin: 0 0 4px; }

/* Panel «Tu cesta»: sale por la derecha al añadir un libro */
.panel-cesta { position: fixed; inset: 0; z-index: 200; background: rgba(0, 89, 120, .38); opacity: 0; transition: opacity .2s ease; }
.panel-cesta[hidden] { display: none; }
.panel-cesta.visible { opacity: 1; }
.panel-cesta-caja {
    position: absolute; top: 0; right: 0; bottom: 0; width: min(400px, 100%); box-sizing: border-box;
    background: var(--crema-claro); padding: 34px 28px; display: flex; flex-direction: column; gap: 12px;
    transform: translateX(100%); transition: transform .22s ease; box-shadow: -10px 0 30px rgba(0, 89, 120, .14);
}
.panel-cesta.visible .panel-cesta-caja { transform: translateX(0); }
.panel-cesta-cerrar { position: absolute; top: 12px; right: 16px; background: none; border: 0; font-size: 1.8rem; line-height: 1; color: var(--marron); cursor: pointer; }
.panel-cesta-aviso { margin: 0; font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; color: var(--terracota); font-weight: 600; text-align: left; }
.panel-cesta-titulo { margin: 0; font-family: var(--serif); font-size: 1.4rem; line-height: 1.2; color: var(--espresso); text-align: left; }
.panel-cesta-total { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 0; border-top: 1px solid var(--borde); border-bottom: 1px solid var(--borde); color: var(--marron); }
.panel-cesta-total strong { font-family: var(--serif); font-size: 1.5rem; color: var(--espresso); }
.panel-cesta-nota { margin: 0; font-size: .9rem; color: var(--marron); text-align: left; }
.panel-cesta-ver { text-align: center; font-size: .9rem; color: var(--marron); text-decoration: underline; margin-top: 4px; }
@media (max-width: 720px) { body:has(.barra-compra) .panel-cesta-caja { padding-bottom: 28px; } }

/* Preguntas frecuentes: desplegables sobrios */
.faq { margin: 0 0 22px; border-top: 1px solid var(--borde); }
.faq details { border-bottom: 1px solid var(--borde); }
.faq summary { cursor: pointer; padding: 14px 4px; font-weight: 600; color: var(--espresso); list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-weight: 400; color: var(--terracota); }
.faq details[open] summary::after { content: '\2212'; }
.faq details p { margin: 0 0 14px; padding: 0 4px; }

/* Ordenar por (tienda) */
.tienda-orden { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin: 0 0 14px; font-size: .9rem; color: var(--marron); }
.tienda-orden select { padding: 8px 12px; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--blanco); color: var(--espresso); font: inherit; }
/* Actividades en la portada */
.actividad-home .taller-cuerpo { display: flex; flex-direction: column; gap: 8px; padding: 22px; }
.actividad-home h3 { margin: 0; }
.actividad-home-cuando { margin: 0; color: var(--marron); font-size: .92rem; text-align: left; }
.actividad-home .boton { margin-top: auto; }

/* Portada de la casa para los libros sin portada */
.libro-imagen img.sin-portada { width: 100%; height: 100%; object-fit: cover; }

/* En el móvil el botón de WhatsApp es solo el círculo verde con el símbolo */
@media (max-width: 720px) {
    .whatsapp-flotante { right: 14px; bottom: 14px; padding: 13px; }
    .whatsapp-flotante .wa-texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ============================================================
   Ritmo vertical (25-10-2026): menos aire entre secciones.
   Había 70 px de relleno arriba Y abajo de cada sección (140 px entre dos), más 45 px bajo cada título:
   la página se hacía interminable. Se deja en 30 px (60 entre secciones) y los títulos más cerca de su contenido.
   También se bajan un poco los titulares, que habían crecido con el tamaño de letra nuevo.
   ============================================================ */
.seccion { padding: 30px 0; }
.seccion-corta { padding: 28px 0; }
.titulo-seccion { margin-bottom: 1.5rem; }
.titulo-seccion:has(+ p) { margin-bottom: .7rem; }
.titulo-seccion + p.medido { margin-bottom: 1.6rem; }
.espacio-sup { margin-top: 1.1rem; }
.rejilla { gap: 22px; }
.hero-min { padding: 56px 0 48px; }
.hero-min h1 { font-size: 3.6rem; margin-bottom: 16px; }
.hero-min .sub { margin-bottom: 22px; }
.hero-home .cta { margin-top: 26px; }
.newsletter { padding: 30px 0; }
h1 { font-size: 2.6rem; }
h2 { font-size: 2rem; }
.titulo-seccion h2, .titulo-seccion h1.h1-como-h2 { font-size: 2.1rem; }
h1.h1-como-h2 { font-size: 2rem; }
@media (max-width: 720px) {
    .seccion { padding: 22px 0; }
    .titulo-seccion { margin-bottom: 1.2rem; }
    .hero-min { padding: 40px 0 36px; }
    .hero-min h1 { font-size: 2.7rem; }
}

/* Ficha: la portada baja con el scroll y se queda justo debajo de la cabecera fija (su alto lo mide general.js en --alto-cab).
   Solo en pantallas anchas, donde portada y datos van en dos columnas. */
@media (min-width: 801px) {
    .ficha-libro > .ficha-galeria { position: sticky; top: calc(var(--alto-cab, 130px) + 20px); align-self: start; }
    .ficha-libro > .ficha-galeria .ficha-principal img { max-height: calc(100vh - var(--alto-cab, 130px) - 60px); width: auto; max-width: 100%; margin: 0 auto; display: block; }
}

/* Artículos: todo el texto justificado, listas, citas y pies incluidos, para que cada línea mida lo mismo. */
.articulo-contenido p, .articulo-contenido li, .articulo-contenido blockquote, .articulo-contenido figcaption,
.articulo-contenido td p, .articulo-contenido th p, .articulo-contenido dd { text-align: justify; text-justify: inter-word; hyphens: none; }

/* ============================================================
   Guía de interfaz de Vercel (25-10-2026): accesibilidad y detalles de interacción
   ============================================================ */
/* Enlace «saltar al contenido»: invisible hasta que se enfoca con el teclado */
.saltar-contenido { position: absolute; left: 12px; top: -60px; z-index: 300; padding: 10px 16px; background: var(--espresso); color: var(--crema-claro); border-radius: var(--radio); font-weight: 600; }
.saltar-contenido:focus { top: 12px; }
#contenido:focus { outline: none; }
/* Foco visible para quien navega con teclado (los campos ya cambian de borde; esto cubre botones, enlaces y desplegables) */
a:focus-visible, button:focus-visible, summary:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid var(--terracota); outline-offset: 3px;
}
/* Los anclajes (#catalogo, #opiniones…) no quedan tapados por la cabecera fija */
[id] { scroll-margin-top: calc(var(--alto-cab, 130px) + 16px); }
/* Sin retardo de doble toque en el móvil */
a, button, summary, label, select, input[type="submit"] { touch-action: manipulation; }
/* Cifras alineadas en precios, importes y totales */
.libro-precio, .ficha-precio-valor, .resumen-linea, .resumen-total, .carrito-importe, .panel-cesta-total, .barra-compra-precio { font-variant-numeric: tabular-nums; }
/* Titulares sin viudas */
h1, h2, h3 { text-wrap: balance; }
/* Quien pide menos movimiento, lo tiene: sin animaciones ni desplazamiento suave */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    .tarjeta:hover { transform: none; }
}

/* ============================================================
   Inspector de taste (25-10-2026): lo que se mide y falla de verdad
   ============================================================ */
/* Botón de WhatsApp: el símbolo blanco sobre el verde de la marca, y el texto oscuro para que se lea (blanco sobre ese verde, 2:1) */
.whatsapp-flotante { color: var(--crema); }
.whatsapp-flotante svg { color: var(--crema); }
.whatsapp-flotante:hover { color: var(--crema); }
/* Estrellas vacías: casi invisibles (1,3:1) y no dicen nada; basta «Sin opiniones todavía» */
.ficha-estrellas-vacias .estrellas { display: none; }
/* Nada que se lea por debajo de 13 px: etiquetas de las tarjetas y notas de precio */
.etiqueta-libro, .tienda-pop .etiqueta-libro { font-size: .8rem; }
.ficha-precio-nota { font-size: .8rem; }
/* Móvil: la franja de compromisos en 2 × 2, solo con el título, para que «Tienda» y los libros salgan en la primera pantalla */
@media (max-width: 720px) {
    .tienda-pop .envio-info-cuatro { grid-template-columns: 1fr 1fr; }
    .tienda-pop .envio-info-cuatro > div { flex-direction: column; gap: 8px; padding: 14px; border-right: 1px solid var(--borde); border-bottom: 1px solid var(--borde); }
    .tienda-pop .envio-info-cuatro > div:nth-child(2n) { border-right: none; }
    .tienda-pop .envio-info-cuatro > div:nth-child(n+3) { border-bottom: none; }
    .tienda-pop .envio-info-cuatro .envio-txt { position: relative; }
    .tienda-pop .envio-info-cuatro .envio-txt > span { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .tienda-pop .envio-info-cuatro .envio-txt strong { font-size: .95rem; margin: 0; }
    .reco-banner { padding: 18px; gap: 12px; }
    .reco-banner-txt p { display: none; }
}


body { background-color: var(--crema); }

/* ---- Barra de contacto: teléfono, correo y redes, siempre a la vista ---- */
.bt-contacto { background: var(--espresso); color: var(--tinta); font-size: .88rem; font-weight: 600; }
.bt-contacto-in { display: flex; justify-content: space-between; align-items: center; gap: 18px; max-width: 1500px; margin: 0 auto; padding: 9px clamp(16px, 3vw, 40px); }
.bt-c-datos, .bt-c-redes { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.bt-contacto a:hover { text-decoration: underline; text-underline-offset: 3px; }
.bt-hora { font-weight: 500; }
@media (max-width: 900px) { .bt-hora { display: none; } .bt-contacto-in { font-size: .8rem; gap: 10px; } .bt-c-datos, .bt-c-redes { gap: 14px; } }
@media (max-width: 430px) { .bt-contacto-in { flex-wrap: wrap; justify-content: center; gap: 2px 14px; padding: 7px 12px; } }

/* ---- Cabecera ---- */
.bt-cab { background: rgba(229, 228, 169, .94); }
.bt-cab-in { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; max-width: 1500px; margin: 0 auto; padding: 10px clamp(16px, 3vw, 40px); }
.bt-logo { display: block; width: clamp(190px, 15.5vw, 250px); }
.bt-logo img { display: block; width: 100%; height: auto; }
.bt-menu { justify-self: center; }
.bt-menu > ul { display: flex; gap: 2px; list-style: none; padding: 6px; background: var(--crema); border-radius: 999px; font-size: .95rem; font-weight: 700; }
.bt-menu li { position: relative; }
.bt-menu a { display: block; padding: 13px 24px; border-radius: 999px; white-space: nowrap; color: var(--espresso); transition: background .2s, color .2s; }
.bt-menu a.activo { background: var(--espresso); color: var(--tinta); }
.bt-menu li > a:not(.activo):hover, .bt-menu li:focus-within > a:not(.activo) { background: var(--crema); }
.bt-sub { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(8px); min-width: 210px; margin: 0; padding: 8px; list-style: none; background: var(--crema); border: 1px solid var(--borde); border-radius: 18px; box-shadow: 0 16px 36px var(--sombra); opacity: 0; visibility: hidden; z-index: 80; transition: opacity .16s ease, transform .16s ease; }
.bt-menu .tiene-sub:hover .bt-sub, .bt-menu .tiene-sub:focus-within .bt-sub { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.bt-sub a, .bt-sub button { display: block; width: 100%; text-align: left; padding: 10px 14px; border-radius: 12px; font: inherit; font-weight: 600; font-size: .92rem; background: none; border: 0; color: var(--espresso); cursor: pointer; }
.bt-sub a:hover, .bt-sub button:hover { background: var(--crema); }
.bt-acc { justify-self: end; display: flex; gap: 10px; align-items: center; }
.bt-b-buscar, .bt-b-acceder, .bt-b-carro { padding: 14px 22px; border-radius: 999px; font-weight: 700; font-size: .95rem; border: 0; cursor: pointer; font-family: inherit; transition: transform .2s, background .2s; }
.bt-b-buscar, .bt-b-acceder { background: var(--crema); color: var(--espresso); }
.bt-b-buscar:hover, .bt-b-acceder:hover { background: var(--crema); transform: translateY(-2px); }
.bt-b-carro { background: var(--espresso); color: var(--tinta); display: inline-flex; gap: 8px; align-items: center; }
.bt-b-carro:hover { transform: translateY(-2px); }
.bt-b-carro .contador { background: var(--terracota); color: var(--crema); border-radius: 999px; min-width: 24px; height: 24px; display: inline-grid; place-items: center; font-size: .8rem; padding: 0 6px; margin: 0; }
.bt-b-carro .carrito-importe { color: var(--tinta); }
.bt-cab .menu-movil { display: none; }
@media (max-width: 900px) {
    .bt-cab-in { grid-template-columns: auto 1fr auto; gap: 12px; }
    .bt-menu { display: none; }
    .bt-cab .menu-movil { display: flex; }
    .bt-logo { width: min(42vw, 170px); justify-self: center; }
    .bt-b-acceder, .bt-b-buscar { display: none; }
    .bt-b-carro { padding: 11px 16px; font-size: .88rem; }
}

/* ---- Portada: bento ---- */
.bt-bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; max-width: 1500px; margin: 0 auto; padding: 6px clamp(16px, 3vw, 40px) 40px; }
.bt-t { border-radius: 34px; position: relative; overflow: hidden; padding: 34px; transition: transform .35s, box-shadow .35s; }
a.bt-t:hover { transform: translateY(-5px); box-shadow: 0 22px 44px var(--sombra); }
.bt-peq { display: block; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; }
.bt-hero { grid-column: span 8; grid-row: span 3; background: var(--espresso); color: var(--tinta); min-height: 640px; display: flex; flex-direction: column; justify-content: space-between; }
.bt-hero.sin-libros { min-height: 440px; }
.bt-eyebrow { font-size: .8rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.bt-hero h1 { font-family: var(--serif); font-weight: 500; font-size: clamp(3.4rem, 8.2vw, 8.4rem); line-height: .92; letter-spacing: -.035em; margin: 20px 0; color: var(--tinta); }
.bt-hero h1 em { font-style: normal; font-family: var(--sans); font-weight: 800; letter-spacing: -.045em; color: var(--crema); }
.bt-hero > p { max-width: 300px; font-size: 1.1rem; line-height: 1.5; color: var(--crema); text-align: left; margin: 0; }
.bt-rota { position: absolute; right: 0; bottom: 6%; width: 62%; height: 52%; }
.bt-grupo { --cw: clamp(100px, 9.2vw, 132px); position: absolute; right: 3%; bottom: 0; display: flex; gap: 14px; align-items: flex-start; transform: rotate(-7deg); opacity: 0; transition: opacity .9s ease; pointer-events: none; }
.bt-grupo.on { opacity: 1; pointer-events: auto; }
.bt-grupo a { display: block; margin-left: 0; transition: transform .3s; }
.bt-grupo a:hover { transform: translateY(-14px) rotate(2deg); }
.bt-grupo a:nth-child(2) { margin-top: -24px; } .bt-grupo a:nth-child(3) { margin-top: 10px; } .bt-grupo a:nth-child(4) { margin-top: -12px; }
.bt-grupo img { width: auto; max-width: var(--cw); max-height: calc(var(--cw) * 1.3); height: auto; aspect-ratio: auto; object-fit: contain; border-radius: 10px; box-shadow: 0 22px 44px rgba(0, 89, 120, .5); }
.bt-buscar { grid-column: span 4; background: var(--crema); color: var(--espresso); display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 26px 28px; }
.bt-buscar.bt-alto { grid-row: span 3; }
.bt-buscar h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(1.7rem, 2.5vw, 2.4rem); line-height: 1; margin: 0; letter-spacing: -.025em; }
.bt-buscar h2 b { font-family: var(--sans); font-weight: 800; letter-spacing: -.045em; }
.bt-buscar p { margin: 0 0 8px; color: var(--marron); font-size: .95rem; text-align: left; }
.bt-buscar form { display: flex; background: var(--crema); border-radius: 999px; padding: 5px; box-shadow: 0 10px 26px rgba(166, 9, 59, .16); }
.bt-buscar .buscador-auto { flex: 1; min-width: 0; position: relative; }
.bt-buscar input { width: 100%; border: 0; outline: 0; background: transparent; font: inherit; padding: 12px 14px 12px 18px; color: var(--espresso); }
.bt-buscar input:focus-visible { outline: 0; box-shadow: none; }
.bt-buscar button { border: 0; border-radius: 999px; background: var(--terracota); color: var(--crema); font-weight: 800; font-family: inherit; padding: 0 22px; cursor: pointer; transition: background .2s; }
.bt-buscar button:hover { background: var(--espresso); }
.bt-compra { grid-column: span 4; grid-row: span 2; background: var(--terracota); color: var(--crema); display: flex; flex-direction: column; justify-content: flex-end; min-height: 300px; }
.bt-compra h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(2.4rem, 3.6vw, 3.8rem); line-height: .95; margin: 12px 0; letter-spacing: -.02em; color: var(--crema); }
.bt-compra h2 b { font-family: var(--sans); font-weight: 800; letter-spacing: -.045em; }
.bt-compra p { margin: 0; line-height: 1.5; max-width: 30ch; text-align: left; color: var(--crema); }
.bt-flecha { position: absolute; top: 24px; right: 24px; width: 48px; height: 48px; border-radius: 50%; background: var(--crema); color: var(--terracota); display: grid; place-items: center; font-size: 1.3rem; transition: transform .35s; }
a.bt-t:hover .bt-flecha { transform: rotate(-45deg); }
.bt-act { padding: 30px 34px; display: flex; flex-direction: column; justify-content: flex-end; }
.bt-act h3 { font-family: var(--serif); font-weight: 500; font-size: clamp(2.2rem, 3.4vw, 3.4rem); line-height: .95; margin: 10px 0 8px; letter-spacing: -.02em; }
.bt-act h3 b { font-family: var(--sans); font-weight: 800; letter-spacing: -.045em; }
.bt-act p { margin: 0; line-height: 1.5; text-align: left; }
.bt-lec { grid-column: span 6; background: var(--verde); color: var(--tinta); }
.bt-tal { grid-column: span 3; background: var(--crema-claro); color: var(--espresso); }
.bt-eve { grid-column: span 3; background: var(--crema); color: var(--espresso); }
.bt-estante { grid-column: span 12; background: var(--crema-claro); padding: 56px 52px 60px; color: var(--espresso); }
.bt-estante h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(2.2rem, 4vw, 3.8rem); line-height: .9; letter-spacing: -.03em; margin: 0 0 44px; }
.bt-estante h2 em { font-style: normal; font-family: var(--sans); font-weight: 800; letter-spacing: -.045em; color: var(--terracota); }
.bt-recs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.bt-rec { background: var(--crema); border: 1px solid rgba(166, 9, 59, .1); border-radius: 22px; padding: 26px 24px 24px; min-width: 0; }
.bt-rec h3 { font-family: var(--serif); font-weight: 500; font-size: 1.7rem; margin: 0 0 20px; padding-bottom: 16px; border-bottom: 1px solid rgba(166, 9, 59, .14); }
.bt-rec h3 b { font-family: var(--sans); font-weight: 800; letter-spacing: -.03em; }
.bt-rec h3 span { color: var(--marron); font-size: 1.15rem; }
.bt-mini-fila { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; }
.bt-mini { display: block; min-width: 0; transition: transform .25s; }
.bt-mini:hover { transform: translateY(-8px); }
.bt-mini img { display: block; width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; border-radius: 12px; }
/* Título bajo la portada: sans (más legible que la serif fina), alineado a la izquierda y sin capa de fondo (Iñaki, 09-11-2026) */
.bt-mini small { display: block; overflow-wrap: break-word; margin-top: 10px; text-align: left; hyphens: manual; font-family: var(--sans); font-size: .8rem; font-weight: 600; line-height: 1.3; letter-spacing: 0; color: var(--espresso); }
.bt-vacia { margin: 0; padding: 26px 4px; text-align: left; color: var(--marron); font-family: var(--serif); font-size: 1.2rem; line-height: 1.3; }
.bt-news { grid-column: span 12; background: var(--espresso); color: var(--tinta); padding: 26px 44px 24px; text-align: center; }
.bt-news-fila { display: flex; align-items: center; justify-content: center; gap: 26px; flex-wrap: nowrap; text-align: left; }
.bt-news h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(2.2rem, 4.4vw, 4rem); line-height: 1; margin: 0; letter-spacing: -.03em; white-space: nowrap; color: var(--tinta); }
.bt-news h2 em { font-style: normal; font-family: var(--sans); font-weight: 800; letter-spacing: -.045em; color: var(--terracota); margin-left: .22em; }
.bt-news form { display: flex; gap: 8px; flex: 0 1 480px; min-width: 0; }
.bt-news input { flex: 1; min-width: 0; padding: 18px 24px; border-radius: 999px; border: 0; font: inherit; background: var(--crema); color: var(--espresso); }
.bt-news button { padding: 18px 28px; border-radius: 999px; border: 0; background: var(--terracota); color: var(--crema); font: inherit; font-weight: 800; cursor: pointer; transition: background .2s, color .2s; }
.bt-news button:hover { background: var(--crema); color: var(--terracota); }
.bt-news-in { width: fit-content; max-width: 100%; margin: 0 auto; }
.bt-news-p { margin: 14px 0 0; width: 0; min-width: 100%; line-height: 1.5; font-size: .98rem; text-align: justify; hyphens: auto; color: var(--tinta); }
.bt-news-p b { color: var(--crema); } .bt-news-p a { text-decoration: underline; text-underline-offset: 3px; }
.bt-news-msg { margin: 10px 0 0; width: 0; min-width: 100%; min-height: 1.2em; font-weight: 700; text-align: center; }
.bt-news-msg.ok { color: var(--crema); } .bt-news-msg.error { color: var(--crema); }
@media (max-width: 900px) {
    .bt-hero, .bt-buscar, .bt-compra, .bt-lec, .bt-tal, .bt-eve { grid-column: span 12; grid-row: auto; }
    .bt-hero { min-height: 0; padding: 26px 26px 20px; }
    .bt-hero > p { max-width: none; }
    .bt-rota { position: relative; right: auto; bottom: auto; width: 100%; height: calc(24vw * 1.5 + 30px); margin-top: 22px; }
    .bt-grupo { left: 0; right: 0; justify-content: center; transform: none; }
    .bt-grupo { --cw: 21vw; } .bt-grupo a { margin-left: 0; }
    .bt-t { border-radius: 28px; padding: 26px; }
    .bt-estante { padding: 36px 22px 40px; } .bt-recs { grid-template-columns: 1fr; gap: 20px; }
    .bt-news { padding: 24px 20px 22px; } .bt-news-in { width: 100%; } .bt-news-fila { flex-direction: column; align-items: stretch; gap: 16px; }
    .bt-news h2 { white-space: normal; text-align: center; font-size: 2.4rem; } .bt-news form { flex: none; }
}
@media (min-width: 901px) and (max-width: 1300px) { .bt-grupo { --cw: 7.6vw; } .bt-grupo a { margin-left: 0; } .bt-grupo a:nth-child(1) { display: none; } }
@media (min-width: 901px) and (max-width: 1060px) { .bt-grupo a:nth-child(2) { display: none; } }
@media (prefers-reduced-motion: reduce) { .bt-grupo { transition: none; } a.bt-t:hover, .bt-mini:hover { transform: none; } }

/* ---- Pie: panel claro con el logotipo oficial ---- */
.pie { background: var(--crema-claro); color: var(--espresso); border-radius: 34px; margin: 0 clamp(16px, 3vw, 40px) 40px; padding: 44px 0 20px; }
.pie .contenedor { max-width: 1400px; }
.pie-logo { display: block; width: clamp(220px, 19vw, 300px); margin-bottom: 18px; }
.pie-logo img { display: block; width: 100%; height: auto; }
.pie p, .pie li, .pie-abajo { color: var(--marron); }
.pie h4 { color: var(--espresso); }
.pie a:hover { color: var(--terracota); }
.pie-redes a { background: var(--espresso); color: var(--tinta); }
.pie-redes a:hover { background: var(--terracota); color: var(--crema); }
@media (max-width: 720px) { .pie { border-radius: 28px; margin-bottom: 28px; padding: 32px 0 16px; } }

/* Ajustes del restyling (27-10): colores de enlaces y atajos de género */
.bt-contacto a { color: inherit; }
.bt-contacto a:hover { color: var(--crema); }
.bt-buscar.bt-alto { justify-content: center; gap: 10px; }
.bt-buscar.bt-alto h2 { font-size: clamp(2.2rem, 3.4vw, 3.4rem); }
.bt-gen-t { margin: 22px 0 0 !important; font-weight: 700; font-size: .85rem !important; letter-spacing: .12em; text-transform: uppercase; color: var(--espresso) !important; }
.bt-gen { display: flex; flex-wrap: wrap; gap: 8px; }
.bt-gen a { background: var(--crema); color: var(--espresso); border-radius: 999px; padding: 9px 16px; font-weight: 600; font-size: .92rem; transition: background .2s, color .2s; }
.bt-gen a:hover { background: var(--espresso); color: var(--tinta); }
/* Pie: enlaces legibles y títulos como en el resto de la marca */
.pie a { color: var(--espresso); }
.pie .pie-redes a { color: var(--tinta); }
.pie-abajo a { color: var(--espresso); font-weight: 600; }
.pie h4 { font-family: var(--sans); font-size: .78rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--espresso); }
@media (max-width: 900px) { .bt-buscar.bt-alto { min-height: 0; } }
.bt-act h3 b, .bt-act p, .bt-peq { color: inherit; }

/* Móvil: las portadas del titular cuelgan desde arriba de su caja (no suben sobre el texto) y el formulario del boletín cabe */
@media (max-width: 900px) {
    .bt-rota { height: calc(21vw * 1.7 + 96px); }
    .bt-grupo { top: 0; bottom: auto; align-items: flex-start; }
    .bt-news input { padding: 15px 16px; } .bt-news button { padding: 15px 18px; font-size: .95rem; }
}

/* ==========================================================================
   PÁGINAS INTERIORES, en el mismo lenguaje que la portada (01-11-2026)
   Cabecera de página como panel azul, secciones claras como paneles
   redondeados, tarjetas, acordeón, franja del boletín y banner final.
   ========================================================================== */
.contenedor { max-width: 1500px; padding: 0 clamp(16px, 3vw, 40px); }
.seccion { padding: 28px 0; }
.seccion:has(.bt-pag-cab) { padding-top: 6px; }

.bt-pag-cab { background: var(--espresso); color: var(--tinta); border-radius: 34px; padding: clamp(28px, 5vw, 64px); margin: 0 0 26px; position: relative; overflow: hidden; }
.bt-pag-cab .titulo-seccion, .bt-pag-cab .titulo-seccion:has(+ p) { text-align: left; margin: 0; }
.bt-pag-cab .lema { display: inline-block; background: var(--terracota); color: var(--crema); border-radius: 999px; padding: 6px 16px; margin: 0 0 22px; font-size: .78rem; font-weight: 800; letter-spacing: .18em; }
.bt-pag-cab h1, .bt-pag-cab h1.h1-como-h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(2.6rem, 6.2vw, 5.6rem); line-height: .95; letter-spacing: -.03em; margin: 0; color: var(--tinta); }
.bt-pag-cab p { max-width: 760px; margin: 24px 0 0 !important; text-align: justify; hyphens: none; font-size: 1.12rem; line-height: 1.55; color: var(--crema); }
.bt-pag-cab p a { color: var(--crema); text-decoration: underline; text-underline-offset: 3px; }
.bt-pag-cab p.centrado, .bt-pag-cab p.medido { margin-left: 0; margin-right: 0; text-align: justify; }
.bt-pag-cab .boton { margin-top: 4px; }

.seccion-clara, .seccion-blanca { width: min(1420px, 100% - 2 * clamp(16px, 3vw, 40px)); margin: 20px auto; border-radius: 34px; }
.seccion-clara { background: var(--crema-claro); }
.seccion-clara .contenedor, .seccion-blanca .contenedor { max-width: none; }

.tarjeta, .acordeon-hoja { border-radius: 26px; border: 1px solid rgba(166, 9, 59, .1); }
.tarjeta:hover { box-shadow: 0 14px 30px var(--sombra); }
.acordeon-hoja > summary { padding: 24px 30px; font-size: 1.7rem; }
.acordeon-hoja > summary:hover { background: var(--crema-claro); }
.acordeon-hoja[open] > summary { border-bottom-color: rgba(166, 9, 59, .1); }
.acordeon-cuerpo { padding: 28px 30px; }
.defendemos { border-radius: 26px; border: 1px solid rgba(166, 9, 59, .1); overflow: hidden; }

/* Franja del boletín: el mismo azul que la portada */
.news-banda { background: var(--espresso); border: 0; border-radius: 34px; padding: 34px clamp(22px, 4vw, 52px); gap: 28px; }
.news-banda .lema { color: var(--terracota); }
.news-banda h3 { color: var(--tinta); font-size: clamp(1.7rem, 3vw, 2.5rem); }
.news-banda p { color: var(--crema); text-align: left; }
.news-banda .boton { border-radius: 999px; padding: 16px 30px; }

/* Banner final («Ven a conocernos») */
.banner { background: transparent; padding: 20px 0 8px; }
.banner-cont { background: var(--espresso); border-radius: 34px; width: min(1420px, 100% - 2 * clamp(16px, 3vw, 40px)); max-width: none; padding: clamp(28px, 4vw, 52px) clamp(22px, 4vw, 52px); }
.banner h2 { color: var(--tinta); font-size: clamp(1.9rem, 3.4vw, 3rem); }
.banner p { color: var(--crema); }
.banner .boton { border-radius: 999px; padding: 16px 30px; }

@media (max-width: 700px) {
    .bt-pag-cab { border-radius: 28px; padding: 28px 22px; }
    .bt-pag-cab p { font-size: 1rem; }
    .seccion-clara, .seccion-blanca, .news-banda, .banner-cont { border-radius: 28px; }
}

/* Tienda: banda del recomendador y compromisos con las mismas esquinas que la portada */
.reco-banner { border-radius: 30px; border: 0; background: var(--crema-claro); }
.envio-info-cuatro { border-radius: 30px; border: 0; overflow: hidden; }

/* COMPACTO (01-11-2026): que el contenido quede a la vista sin tener que hacer scroll.
   Cabecera de página en una sola banda: título a la izquierda, texto a la derecha. */
.bt-pag-cab { display: flex; align-items: center; gap: 12px 44px; flex-wrap: wrap; padding: 26px clamp(22px, 3.4vw, 44px); margin-bottom: 16px; border-radius: 30px; }
.bt-pag-cab .titulo-seccion, .bt-pag-cab .titulo-seccion:has(+ p) { flex: 0 0 auto; max-width: 100%; }
.bt-pag-cab .lema { margin: 0 0 10px; padding: 5px 13px; font-size: .72rem; }
.bt-pag-cab h1, .bt-pag-cab h1.h1-como-h2 { font-size: clamp(2.1rem, 4vw, 3.4rem); }
.bt-pag-cab p { flex: 1 1 380px; max-width: 720px; margin: 0 !important; font-size: 1rem; line-height: 1.5; }
.seccion { padding: 16px 0; }
.news-banda { padding: 18px clamp(20px, 3vw, 36px); gap: 20px; border-radius: 28px; margin-bottom: 14px; }
.news-banda .lema { margin-bottom: 2px; }
.news-banda h3 { font-size: clamp(1.3rem, 2.2vw, 1.8rem); margin: 0 0 2px; }
.news-banda p { font-size: .95rem; }
.news-banda .boton { padding: 12px 26px; }
.acordeon-hoja { margin-bottom: 10px; }
.acordeon-hoja > summary { padding: 16px 26px; font-size: 1.45rem; }
.banner-cont { padding: 24px clamp(22px, 3.4vw, 44px); }
.banner h2 { font-size: clamp(1.5rem, 2.6vw, 2.2rem); }
@media (max-width: 700px) { .bt-pag-cab { padding: 22px 20px; gap: 10px; } .bt-pag-cab h1, .bt-pag-cab h1.h1-como-h2 { font-size: 2.2rem; } }

/* «Ven a conocernos»: centrado, separado del pie, texto a la izquierda y botón a la derecha */
.banner { padding: 16px 0 20px; }
.banner-cont { margin-left: auto; margin-right: auto; justify-content: space-between; gap: 20px 40px; }
.banner-cont > div { flex: 1 1 420px; }
.banner p { max-width: 720px; text-align: justify; }
.banner .boton { flex: 0 0 auto; }

/* Mapa de contacto: no se pide nada a Google hasta que se pulsa el botón */
.mapa { position: relative; margin-top: 18px; height: 320px; border-radius: 22px; overflow: hidden; background: var(--crema-claro); border: 1px solid rgba(166, 9, 59, .1); }
.mapa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mapa-boton { padding: 14px 28px; border-radius: 999px; border: 0; background: var(--terracota); color: var(--crema); font: inherit; font-weight: 800; cursor: pointer; }
.mapa-boton:hover { background: var(--terracota-osc); }
.mapa small { color: var(--marron); }
.mapa-enlace { margin: 10px 0 0; }
.mapa-clic { position: absolute; inset: 0; z-index: 2; cursor: pointer; }


/* ==========================================================================
   MÓVIL (02-11-2026): cabecera, barra de contacto, portadas, géneros y paleta
   ========================================================================== */
.bt-red-i { display: none; width: 20px; height: 20px; }
@media (max-width: 900px) {
    /* Barra de contacto en una sola línea: teléfono, correo y redes como iconos */
    .bt-contacto-in { flex-wrap: nowrap; justify-content: space-between; gap: 10px; padding: 8px 14px; font-size: .78rem; }
    .bt-c-datos { flex-wrap: nowrap; gap: 12px; min-width: 0; }
    .bt-c-datos a { white-space: nowrap; }
    .bt-c-redes { flex-wrap: nowrap; gap: 12px; flex: none; }
    .bt-red-t { display: none; }
    .bt-red-i { display: block; }
    /* Cabecera: logotipo a la izquierda, carrito y menú a la derecha */
    .bt-cab-in { grid-template-columns: 1fr auto auto; gap: 10px; }
    .bt-logo { grid-column: 1; grid-row: 1; justify-self: start; width: min(46vw, 180px); }
    .bt-acc { grid-column: 2; grid-row: 1; }
    .bt-cab .menu-movil { grid-column: 3; grid-row: 1; }
    /* Portadas del titular: dos, enteras y sin solapar */
    .bt-rota { height: calc(min(40vw, 170px) * 1.7); margin-top: 22px; }
    .bt-grupo { position: absolute; inset: 0 0 auto 0; display: flex; justify-content: center; gap: 14px; transform: none; align-items: flex-start; }
    .bt-buscar input { font-size: .95rem; padding-left: 16px; }
    .bt-grupo a, .bt-grupo a:nth-child(n) { margin: 0; }
    .bt-grupo a:nth-child(n+3) { display: none; }
    .bt-grupo { --cw: min(40vw, 170px); }
    /* Atajos de género: rejilla de dos columnas, todos del mismo tamaño */
    .bt-gen { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .bt-gen a { display: flex; align-items: center; min-height: 48px; padding: 8px 16px; border-radius: 16px; font-size: .9rem; line-height: 1.2; }
    .bt-gen a:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* Paleta: Eventos en el salmón de la paleta, en lugar del amarillo apagado */
.bt-eve { background: var(--coral); color: var(--espresso); }

/* Clubes de lectura: chocolate de la marca (el verde azulado no casaba con el fondo) */
.bt-lec { background: var(--espresso); color: var(--tinta); }
.bt-lec h3 { color: var(--tinta); } .bt-lec h3 b { color: var(--crema); }
@media (max-width: 900px) {
    .bt-rec { padding: 18px 18px 16px; border-radius: 20px; }
    .bt-rec h3 { margin-bottom: 8px; padding-bottom: 12px; font-size: 1.5rem; }
    .bt-vacia { padding: 8px 2px 4px; font-size: 1.05rem; }
    .bt-estante h2 { margin-bottom: 22px; }
}


/* === PALETA DEFINITIVA (02-11-2026) ==========================================
   Los 9 colores oficiales de la marca y NINGUNO MÁS (ver CLAUDE.md).
   Texto pequeño solo: petróleo / púrpura / granate sobre crema, o crema sobre
   petróleo / púrpura / granate. Los colores vivos van en paneles con titular grande.
   ============================================================================ */
:root {
    --petroleo: #005978;
    --coral:    #F05B74;
    --cian:     #00AEEF;
    --naranja:  #DF5620;
    --verde:    #008A7F;
    --mostaza:  #AB8611;
    --crema:    #E5E4A9;
    --purpura:  #8D278F;
    --granate:  #A6093B;
    /* Prueba de Iñaki (09-11-2026), fuera de los 9 de la marca: blanco grisáceo, la crema desaturada y aclarada. Solo en los paneles de recomendaciones; para quitarlo, apuntarlo a var(--crema) */
    --hueso:    #EFEFE2;
    /* nombres antiguos, ahora apuntan a la paleta */
    --crema-claro: var(--crema);
    --blanco: var(--crema);
    --tinta: var(--crema);
    --espresso: var(--petroleo);
    --marron: var(--petroleo);
    --dorado: var(--petroleo);
    --oliva: var(--petroleo);
    --terracota: var(--granate);
    --terracota-osc: var(--petroleo);
    --borde: rgba(0, 89, 120, .55);
    --sombra: rgba(0, 89, 120, .22);
}
html, body { background-color: var(--crema); color: var(--petroleo); }
.cuenta-ambar { color: var(--petroleo); }
.admin-lateral .admin-salir { color: var(--crema); }

/* ---- Cabecera ---- */
.bt-contacto { background: var(--petroleo); color: var(--crema); }
.bt-cab { background: rgba(229, 228, 169, .96); }
.bt-menu > ul { background: var(--crema); box-shadow: inset 0 0 0 2px var(--petroleo); }
.bt-menu a { color: var(--petroleo); }
.bt-menu a.activo { background: var(--petroleo); color: var(--crema); }
.bt-menu li > a:not(.activo):hover, .bt-menu li:focus-within > a:not(.activo) { background: rgba(0, 89, 120, .16); }
.bt-sub { background: var(--crema); border: 2px solid var(--petroleo); }
.bt-sub a:hover, .bt-sub button:hover { background: rgba(0, 89, 120, .16); }
.bt-b-buscar, .bt-b-acceder { background: var(--crema); color: var(--petroleo); box-shadow: inset 0 0 0 2px var(--petroleo); }
.bt-b-buscar:hover, .bt-b-acceder:hover { background: var(--petroleo); color: var(--crema); }
.bt-b-carro { background: var(--petroleo); color: var(--crema); }
.bt-b-carro .contador { background: var(--granate); color: var(--crema); }
.bt-b-carro .carrito-importe { color: var(--crema); }
.menu-movil { background: var(--granate); }
.menu-movil span { background: var(--crema); }

/* ---- Portada: cada panel, un color de la paleta ---- */
.bt-hero { background: var(--petroleo); color: var(--crema); }
.bt-hero h1, .bt-hero h1 em, .bt-hero > p, .bt-eyebrow { color: var(--crema); }
.bt-buscar { background: var(--purpura); color: var(--crema); }
.bt-buscar h2, .bt-buscar h2 b, .bt-buscar p, .bt-gen-t { color: var(--crema) !important; }
.bt-buscar form { background: var(--crema); box-shadow: none; }
.bt-buscar input { color: var(--petroleo); }
.bt-buscar input::placeholder { color: var(--petroleo); opacity: .7; }
.bt-buscar button { background: var(--granate); color: var(--crema); }
.bt-buscar button:hover { background: var(--petroleo); }
.bt-gen a { background: var(--crema); color: var(--petroleo); }
.bt-gen a:hover { background: var(--petroleo); color: var(--crema); }
.bt-compra { background: var(--naranja); color: var(--crema); }
.bt-compra h2, .bt-compra h2 b, .bt-compra p, .bt-compra .bt-peq { color: var(--crema); }
.bt-flecha { background: var(--crema); color: var(--petroleo); }
.bt-lec { background: var(--verde); color: var(--crema); }
.bt-lec h3, .bt-lec h3 b { color: var(--crema); }
.bt-tal { background: var(--cian); color: var(--petroleo); }
.bt-tal h3, .bt-tal h3 b { color: var(--petroleo); }
.bt-eve { background: var(--granate); color: var(--crema); }
.bt-eve h3, .bt-eve h3 b { color: var(--crema); }
/* el texto pequeño de los paneles vivos se lee como texto grande: 19 px en negrita */
.bt-act p { font-size: 1.2rem; font-weight: 700; }
.bt-estante { background: var(--petroleo); color: var(--crema); }
.bt-estante h2 { color: var(--crema); }
.bt-estante h2 em { color: var(--crema); }
.bt-rec { background: var(--hueso); border: 0; color: var(--petroleo); }
.bt-rec h3, .bt-rec h3 b, .bt-rec h3 span, .bt-mini small, .bt-vacia { color: var(--petroleo); }
.bt-rec h3 { border-bottom-color: rgba(0, 89, 120, .45); }
.bt-news { background: var(--purpura); color: var(--crema); }
.bt-news h2, .bt-news h2 em, .bt-news-p, .bt-news-p b { color: var(--crema); }
.bt-news input { background: var(--crema); color: var(--petroleo); }
.bt-news button { background: var(--petroleo); color: var(--crema); }
.bt-news button:hover { background: var(--crema); color: var(--petroleo); }
.bt-news-msg.ok, .bt-news-msg.error { color: var(--crema); }

/* ---- Pie: panel crema con contorno petróleo ---- */
.pie { background: var(--crema); box-shadow: inset 0 0 0 2px var(--petroleo); }
.pie p, .pie li, .pie-abajo, .pie a, .pie h4, .pie-abajo a { color: var(--petroleo); }
.pie a:hover { color: var(--granate); }
.pie-redes a, .pie .pie-redes a { background: var(--petroleo); color: var(--crema); }

/* ---- Superficies sobre fondo crema: contorno petróleo en lugar de blanco ---- */
.tarjeta, .acordeon-hoja, .defendemos, .seccion-clara { box-shadow: inset 0 0 0 2px rgba(0, 89, 120, .45); }
/* etiquetas y títulos de los paneles vivos: más gruesos para compensar el contraste */
.bt-lec .bt-peq, .bt-tal .bt-peq, .bt-compra .bt-peq { font-size: .95rem; font-weight: 800; }
.bt-lec h3, .bt-tal h3, .bt-eve h3 { font-weight: 600; }
/* vídeo aún sin subir: la foto entera y la etiqueta en una pastilla, sin pisar el texto de la foto */
.video-placeholder img { opacity: 1; }
.video-placeholder { align-items: flex-end; justify-content: flex-start; }
.video-placeholder span { margin: 16px; padding: 10px 18px; border-radius: 999px; background: var(--petroleo); color: var(--crema); font-family: var(--sans); font-weight: 700; font-size: 1rem; letter-spacing: 0; }

/* campos de formulario: nunca blanco ni gris del navegador */
input, select, textarea { background-color: var(--crema); color: var(--petroleo); border-color: var(--petroleo); }
input::placeholder, textarea::placeholder { color: var(--petroleo); opacity: .7; }
input[type="checkbox"], input[type="radio"], progress { accent-color: var(--petroleo); }

/* Recomendaciones semanales en el móvil (09-11-2026): un libro por fila, con la portada entera y el título completo.
   En tres columnas de 80 px los títulos se partían a mitad de palabra. */
@media (max-width: 600px) {
    .bt-mini-fila { grid-template-columns: 1fr; gap: 18px; }
    .bt-mini { display: grid; grid-template-columns: 92px 1fr; gap: 16px; align-items: center; }
    .bt-mini img { width: 92px; }
    .bt-mini small { margin-top: 0; font-size: 1rem; line-height: 1.35; }
}

/* Ficha del libro (09-11-2026): el fondo de la página sigue siendo crema y las cajas (precio y opiniones) van en hueso */
.ficha-caja, .opinion { background: var(--hueso); }

/* Ficha del libro, desplegables (09-11-2026): el texto abierto va sobre una capa hueso, con una medida de línea de lectura
   (unos 70 caracteres), interlineado holgado y alineado a la izquierda. La sinopsis separa el gancho, el texto y las citas. */
.ficha-acordeon-cuerpo { background: var(--hueso); border-radius: 16px; padding: 24px 28px 8px; margin: 2px 0 18px; max-width: 46rem; font-size: 1.04rem; line-height: 1.7; }
.ficha-acordeon-cuerpo p { margin: 0 0 1.05em; text-align: left; hyphens: manual; }
.ficha-acordeon-cuerpo .ficha-datos { margin-bottom: 16px; }
.ficha-acordeon-cuerpo .ficha-enlaces { margin: 0 0 16px; }
.sinopsis-gancho { font-family: var(--serif); font-size: 1.3rem; line-height: 1.4; margin-bottom: 1.2em !important; }
.sinopsis-gancho strong { font-weight: 700; }
.sinopsis-critica { margin: 1.8em 0 .4em; }
.sinopsis-critica-t { font-size: .78rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; margin: 0 0 14px !important; }
.sinopsis-critica blockquote { margin: 0 0 20px; padding: 0; }
.sinopsis-critica blockquote p { font-family: var(--serif); font-size: 1.12rem; line-height: 1.5; margin: 0 0 6px; }
.sinopsis-critica cite { display: block; font-style: normal; font-weight: 700; font-size: .86rem; line-height: 1.3; }
.sinopsis-critica cite::before { content: '— '; }
@media (max-width: 680px) {
    .ficha-acordeon-cuerpo { padding: 18px 16px 4px; border-radius: 14px; font-size: 1rem; }
    .sinopsis-gancho { font-size: 1.18rem; }
}
.sinopsis-mas summary { cursor: pointer; font-weight: 700; font-size: .92rem; padding: 4px 0 14px; list-style: none; text-decoration: underline; text-underline-offset: 3px; }
.sinopsis-mas summary::-webkit-details-marker { display: none; }
.sinopsis-mas[open] summary { display: none; }
.sinopsis-mas summary::after { content: none !important; }
.sinopsis-mas summary { display: block; }

/* Panel del titular de la home: todos sus textos en hueso (prueba de Iñaki, 09-11-2026; para quitarlo, borrar este bloque) */
.bt-hero, .bt-hero h1, .bt-hero h1 em, .bt-hero > p, .bt-hero .bt-eyebrow { color: var(--hueso); }

/* Textos de los paneles de color de la home, en hueso (Iñaki, 09-11-2026). Talleres (cian) se queda en petróleo: el hueso sobre cian no se lee. */
.bt-buscar h2, .bt-buscar h2 b, .bt-buscar > p, .bt-buscar button, .bt-buscar .bt-gen-t,
.bt-lec .bt-peq, .bt-lec h3, .bt-lec h3 b, .bt-lec p,
.bt-eve .bt-peq, .bt-eve h3, .bt-eve p,
.bt-estante h2, .bt-estante h2 em,
.bt-news h2, .bt-news h2 em, .bt-news button, .bt-news-p, .bt-news-p b, .bt-news-p a { color: var(--hueso); }
.bt-news-p a { text-decoration: underline; text-underline-offset: 3px; }

/* Panel morado de «Encuentra cualquier libro»: sus textos también en hueso (la regla de arriba usa !important) */
.bt-buscar h2, .bt-buscar h2 b, .bt-buscar p, .bt-gen-t { color: var(--hueso) !important; }

/* Barra de búsqueda y etiquetas de género del panel morado, en hueso; y los textos de Talleres (cian), en hueso (Iñaki, 09-11-2026) */
.bt-buscar form, .bt-gen a { background: var(--hueso); }
.bt-tal, .bt-tal h3, .bt-tal p, .bt-tal .bt-peq { color: var(--hueso); }

/* Barra de contacto con iconos de línea (teléfono, correo, horario) y la cabecera separada de la banda superior (Iñaki, 09-11-2026) */
.bt-c-datos a, .bt-hora { display: inline-flex; align-items: center; gap: 8px; }
.bt-ic { width: 16px; height: 16px; flex: none; }
.bt-cab-in { padding-top: 20px; }
@media (max-width: 900px) { .bt-hora { display: none; } .bt-c-datos a { gap: 6px; } .bt-ic { width: 14px; height: 14px; } .bt-cab-in { padding-top: 14px; } }

/* Etiquetas de género: al pasar el ratón (o con el teclado), el crema del fondo de la página, no el azul (Iñaki, 09-11-2026) */
.bt-gen a:hover, .bt-gen a:focus-visible { background: var(--crema); color: var(--petroleo); }

/* Botón flotante de WhatsApp con el texto en hueso; botón «Buscar» del panel morado en mayúsculas y más grande (Iñaki, 09-11-2026) */
.whatsapp-flotante, .whatsapp-flotante svg, .whatsapp-flotante:hover { color: var(--hueso); }
.bt-buscar button { text-transform: uppercase; font-size: 1.05rem; letter-spacing: .06em; padding: 0 26px; }
@media (max-width: 520px) { .bt-buscar { padding-left: 20px; padding-right: 20px; } .bt-buscar button { font-size: .92rem; letter-spacing: .02em; padding: 0 13px; } .bt-buscar input { padding-left: 14px; padding-right: 6px; } }

/* ==========================================================================
   ACCESO AL PANEL (09-11-2026): el formulario sobre las hojas de un libro abierto (ilustración propia, 3768×2502,
   fondo transparente). Hojas, en % de la imagen: izquierda 3,3–49,4 · derecha 50,5–96,6 · de arriba 1,7 a 91,3.
   En escritorio, el libro entero; en móvil, solo la hoja derecha (el formulario), con la marca dentro de ella.
   ========================================================================== */
body.pagina-acceso { padding: 24px 0; }
.login { width: 100%; display: flex; justify-content: center; }
.login-libro { container-type: inline-size; position: relative; width: min(1040px, 94vw); aspect-ratio: 3768 / 2502; }
.login-libro::before { content: ''; position: absolute; inset: 0; background: image-set(url('assets/img/login-libro.webp') type('image/webp'), url('assets/img/login-libro.png') type('image/png')) center / 100% 100% no-repeat; filter: drop-shadow(0 22px 26px rgba(0, 89, 120, .3)); }
.login-pag { position: absolute; top: 8%; height: 76%; z-index: 1; display: flex; flex-direction: column; justify-content: center; color: var(--petroleo); }
.login-izq { left: 9%; width: 35.5%; align-items: center; text-align: center; }
.login-der { left: 55.5%; width: 35.5%; }
.login-logo { width: 78%; height: auto; }
.login-logo-movil { display: none; }
.login-lema { margin: 3cqw 0 0; font-size: 1.7cqw; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.login-titulo { margin: 0 0 2cqw; font-family: var(--serif); font-weight: 500; font-size: 4cqw; line-height: 1; color: var(--petroleo); }
.login-error { margin: 0 0 1.6cqw; font-size: max(14px, 1.45cqw); font-weight: 700; color: var(--granate); }
.login-form { display: flex; flex-direction: column; }
.login-form label { margin: 0 0 .5cqw; font-size: max(13px, 1.4cqw); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.login-form input { width: 100%; box-sizing: border-box; margin: 0 0 1.7cqw; padding: .9cqw 1.3cqw; font: inherit; font-size: max(16px, 1.75cqw); color: var(--petroleo); background: var(--hueso); border: 2px solid var(--petroleo); border-radius: 12px; }
.login-form input:focus { outline: 3px solid var(--granate); outline-offset: 2px; }
.login-form button { margin-top: .6cqw; padding: 1.1cqw 1.5cqw; font: inherit; font-size: max(16px, 1.8cqw); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--hueso); background: var(--granate); border: 0; border-radius: 999px; cursor: pointer; transition: background .2s; }
.login-form button:hover, .login-form button:focus-visible { background: var(--petroleo); }
@media (max-width: 760px) {
    /* Solo la hoja derecha: el libro se ve más grande y el formulario cabe con comodidad (la imagen, a toda altura y pegada a la derecha) */
    .login-libro { width: min(440px, 94vw); aspect-ratio: 4 / 5; }
    .login-libro::before { background-size: auto 100%; background-position: 100% center; }
    .login-izq { display: none; }
    .login-der { left: 12%; width: 77%; top: 7%; height: 80%; }
    .login-logo-movil { display: block; width: 62%; margin: 0 0 14px; }
    .login-titulo { font-size: 2rem; margin-bottom: 14px; }
    .login-error { font-size: .95rem; margin-bottom: 12px; }
    .login-form label { font-size: .82rem; margin-bottom: 5px; }
    .login-form input { font-size: 1rem; padding: 11px 14px; margin-bottom: 14px; }
    .login-form button { font-size: 1rem; padding: 13px 18px; margin-top: 4px; }
}

/* Autorrelleno del navegador (Chrome pone amarillo claro y texto negro, fuera de la paleta): se pisa con los colores de la web.
   El truco es un box-shadow interior, porque el fondo del autorrelleno no se puede cambiar con background. */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active,
textarea:-webkit-autofill, select:-webkit-autofill {
    -webkit-text-fill-color: var(--petroleo);
    caret-color: var(--petroleo);
    -webkit-box-shadow: 0 0 0 1000px var(--crema) inset;
    box-shadow: 0 0 0 1000px var(--crema) inset;
    transition: background-color 600000s 0s;
}
input:autofill { color: var(--petroleo); box-shadow: 0 0 0 1000px var(--crema) inset; }
.login-form input:-webkit-autofill, .login-form input:-webkit-autofill:hover, .login-form input:-webkit-autofill:focus, .login-form input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px var(--hueso) inset;
    box-shadow: 0 0 0 1000px var(--hueso) inset;
}
.login-form input:autofill { box-shadow: 0 0 0 1000px var(--hueso) inset; }

/* Campo del correo de «cartas desde bellatinta» en hueso (Iñaki, 09-11-2026), también cuando lo rellena el navegador */
.bt-news input { background: var(--hueso); }
.bt-news input:-webkit-autofill, .bt-news input:-webkit-autofill:hover, .bt-news input:-webkit-autofill:focus, .bt-news input:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 1000px var(--hueso) inset; box-shadow: 0 0 0 1000px var(--hueso) inset; }
.bt-news input:autofill { box-shadow: 0 0 0 1000px var(--hueso) inset; }

/* Campos de formulario de la web pública en hueso (Iñaki, 09-11-2026): todos iguales, y también cuando los rellena el navegador. El panel de gestión no se toca. */
body:not(.admin-cuerpo) :is(input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="file"], [type="hidden"], [type="range"], [type="color"], [type="image"]), textarea, select) { background-color: var(--hueso); }
body:not(.admin-cuerpo) :is(input, textarea, select):-webkit-autofill, body:not(.admin-cuerpo) :is(input, textarea, select):-webkit-autofill:hover,
body:not(.admin-cuerpo) :is(input, textarea, select):-webkit-autofill:focus, body:not(.admin-cuerpo) :is(input, textarea, select):-webkit-autofill:active { -webkit-box-shadow: 0 0 0 1000px var(--hueso) inset; box-shadow: 0 0 0 1000px var(--hueso) inset; }

/* ==========================================================================
   TIENDA (09-11-2026): el mismo lenguaje que la portada. Aviso en panel petróleo, ventajas y fichas en hueso,
   portadas ENTERAS (sin recortar) y el menú de géneros con el hover en hueso, sin mover el texto (antes se rompía en dos líneas).
   ========================================================================== */
/* Aviso del recomendador */
.tienda-pop .reco-banner { background: var(--petroleo); border: 0; border-radius: 34px; padding: 36px 44px; margin-bottom: 14px; box-shadow: none; }
.tienda-pop .reco-banner-txt h2 { color: var(--hueso); font-weight: 500; font-size: clamp(2rem, 3.6vw, 3.3rem); }
.tienda-pop .reco-banner-txt h2 .resalte { color: var(--hueso); font-family: var(--sans); font-weight: 800; letter-spacing: -.03em; }
.tienda-pop .reco-banner-txt p { color: var(--hueso); font-size: 1.05rem; text-align: left; }
.tienda-pop .reco-banner-btn { background: var(--granate); color: var(--hueso); border: 0; border-radius: 999px; text-transform: uppercase; font-weight: 800; letter-spacing: .08em; font-size: 1rem; padding: 16px 34px; }
.tienda-pop .reco-banner-btn:hover, .tienda-pop .reco-banner-btn:focus-visible { background: var(--hueso); color: var(--petroleo); }

/* Franja de ventajas: panel hueso, sin rayas, texto alineado a la izquierda */
.tienda-pop .envio-info { background: var(--hueso); border: 0; border-radius: 34px; box-shadow: none; margin-bottom: 14px; }
.tienda-pop .envio-info > div { border-right: 0; }
.tienda-pop .envio-ico { color: var(--petroleo); }
.tienda-pop .envio-txt strong { color: var(--petroleo); font-weight: 800; }
.tienda-pop .envio-txt em { color: var(--granate); }
.tienda-pop .envio-txt span { color: var(--petroleo); text-align: left; text-justify: auto; }

/* Menú de géneros: elementos en píldora; hover en hueso, el activo en petróleo; el texto no se mueve ni se rompe */
.tienda-generos ul { border-top: 0; display: flex; flex-direction: column; gap: 4px; }
.tienda-generos li { border-bottom: 0; }
.tienda-generos a { padding: 11px 16px; border-radius: 14px; text-align: left; color: var(--petroleo); transition: background .15s ease, color .15s ease; }
.tienda-generos a:hover, .tienda-generos a:focus-visible { background: var(--hueso); color: var(--petroleo); padding-left: 16px; }
.tienda-generos a.activo, .tienda-generos a.activo:hover { background: var(--petroleo); color: var(--hueso); font-weight: 700; }

/* Fichas de libro en hueso, con la portada entera */
.tienda-pop .tarjeta { background: var(--hueso); border: 0; border-radius: 26px; box-shadow: none; }
.tienda-pop .tarjeta:hover { box-shadow: none; transform: translateY(-4px); }
.tienda-pop .tarjeta .libro-imagen { aspect-ratio: 2 / 3; background: transparent; border-bottom: 0; padding: 14px 14px 0; box-sizing: border-box; }
.tienda-pop .tarjeta .libro-imagen img { object-fit: contain; border-radius: 10px; }
.tienda-pop .tarjeta .libro-imagen img.sin-portada { object-fit: contain; }
.tienda-pop .libro-cuerpo h3 { font-family: var(--sans); font-weight: 700; font-size: .98rem; line-height: 1.3; }
.tienda-pop .libro-cuerpo h3 a { color: var(--petroleo); }
.tienda-pop .libro-cuerpo p { text-align: left; }
.tienda-pop .libro-autor { color: var(--petroleo); font-size: .86rem; }
.tienda-pop .etiqueta-libro { top: 24px; left: 24px; }
.tienda-pop .etiqueta-novedad { background: var(--petroleo); color: var(--hueso); }
.tienda-pop .etiqueta-ultimas { background: var(--granate); color: var(--hueso); }
.tienda-pop .etiqueta-segunda { background: var(--petroleo); color: var(--hueso); }

/* «Más libros» / «Anteriores» como botones, con el hover en petróleo */
.tienda-pop .paginas-listado a { display: inline-block; padding: 12px 26px; border-radius: 999px; background: var(--hueso); color: var(--petroleo); font-weight: 800; text-decoration: none; transition: background .15s, color .15s; }
.tienda-pop .paginas-listado a:hover, .tienda-pop .paginas-listado a:focus-visible { background: var(--petroleo); color: var(--hueso); }
/* Menú de géneros más compacto y sin recorte: se ve entero y los nombres largos caben en una línea */
@media (min-width: 801px) { .tienda-cuerpo.con-lateral { grid-template-columns: 244px minmax(0, 1fr); gap: 32px; } }
.tienda-lateral { max-height: none; overflow: visible; }
.tienda-generos ul { gap: 2px; }
.tienda-generos a { padding: 8px 14px; font-size: .93rem; line-height: 1.25; }
@media (max-height: 640px) { .tienda-lateral { position: static; } }
/* Los campos dentro de .campo llevan una regla con más peso: se iguala */
body:not(.admin-cuerpo) .campo input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="file"]):not([type="hidden"]),
body:not(.admin-cuerpo) .campo textarea, body:not(.admin-cuerpo) .campo select { background: var(--hueso); }
/* Login en móviles muy estrechos (≤ 400 px): todo un poco más compacto para que quepa en la hoja */
@media (max-width: 400px) {
    .login-der { top: 6%; height: 84%; }
    .login-logo-movil { width: 52%; margin-bottom: 8px; }
    .login-titulo { font-size: 1.7rem; margin-bottom: 8px; }
    .login-form label { margin-bottom: 3px; }
    .login-form input { padding: 9px 12px; margin-bottom: 10px; }
    .login-form button { padding: 11px 16px; }
}

/* ==========================================================================
   Aviso del recomendador de la tienda como ACORDEÓN (09-11-2026): cerrado es una barra fina con el título; abierto,
   la explicación y el botón juntos y alineados. Antes era un bloque enorme con el botón a un kilómetro del texto.
   ========================================================================== */
.reco-acordeon { background: var(--petroleo); color: var(--hueso); border-radius: 26px; margin: 0 0 14px; }
.reco-acordeon summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px 14px 28px; border-radius: 26px; }
.reco-acordeon summary::-webkit-details-marker { display: none; }
.reco-acordeon summary:focus-visible { outline: 3px solid var(--hueso); outline-offset: -3px; }
.reco-acordeon-titulo { font-family: var(--serif); font-size: clamp(1.3rem, 2.1vw, 1.85rem); line-height: 1.15; color: var(--hueso); }
.reco-acordeon-titulo b { font-family: var(--sans); font-weight: 800; letter-spacing: -.02em; }
.reco-acordeon-mas { flex: none; position: relative; width: 36px; height: 36px; border: 2px solid var(--hueso); border-radius: 50%; transition: background .15s; }
.reco-acordeon-mas::before, .reco-acordeon-mas::after { content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px; background: var(--hueso); transition: background .15s, transform .2s; }
.reco-acordeon-mas::after { transform: rotate(90deg); }
.reco-acordeon[open] .reco-acordeon-mas::after { transform: rotate(0); }
.reco-acordeon summary:hover .reco-acordeon-mas { background: var(--hueso); }
.reco-acordeon summary:hover .reco-acordeon-mas::before, .reco-acordeon summary:hover .reco-acordeon-mas::after { background: var(--petroleo); }
.reco-acordeon-cuerpo { padding: 2px 28px 26px; max-width: 48rem; }
.reco-acordeon-cuerpo p { margin: 0 0 18px; font-size: 1.02rem; line-height: 1.6; text-align: left; color: var(--hueso); }
.reco-acordeon-btn { display: inline-block; padding: 13px 30px; border-radius: 999px; background: var(--granate); color: var(--hueso); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; transition: background .15s, color .15s; }
.reco-acordeon-btn:hover, .reco-acordeon-btn:focus-visible { background: var(--hueso); color: var(--petroleo); }
@media (max-width: 600px) { .reco-acordeon summary { padding: 12px 14px 12px 20px; } .reco-acordeon-cuerpo { padding: 2px 20px 22px; } .reco-acordeon-btn { display: block; text-align: center; } }
/* Acordeón del recomendador abierto: el texto usa todo el ancho (antes tenía un máximo y se partía en dos líneas dejando un hueco enorme) y el botón va pegado a él, en la misma fila si cabe */
.reco-acordeon-cuerpo { max-width: none; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; padding-bottom: 24px; }
.reco-acordeon-cuerpo p { margin: 0; flex: 0 1 auto; }
.reco-acordeon-btn { flex: none; }
@media (max-width: 600px) { .reco-acordeon-btn { flex: 1 1 100%; } }
/* Texto del acordeón repartido en líneas equilibradas (sin una palabra huérfana abajo) y «Más libros» con aire por arriba y por abajo (Iñaki, 09-11-2026) */
.reco-acordeon-cuerpo p { text-wrap: balance; }
.tienda-pop .paginas-listado { margin: 56px 0 48px; }

/* Paginación de la tienda con números (09-11-2026): Anterior, 1 2 3 … n, Siguiente, y «Página X de N». Con aire por arriba y por abajo. */
.tienda-pop .paginacion { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin: 56px 0 10px; }
.tienda-pop .paginacion a, .tienda-pop .pag-actual { display: inline-flex; align-items: center; justify-content: center; min-width: 46px; height: 46px; padding: 0 16px; box-sizing: border-box; border-radius: 999px; font-weight: 800; text-decoration: none; background: var(--hueso); color: var(--petroleo); transition: background .15s, color .15s; }
.tienda-pop .paginacion a:hover, .tienda-pop .paginacion a:focus-visible { background: var(--petroleo); color: var(--hueso); }
.tienda-pop .pag-actual { background: var(--petroleo); color: var(--hueso); }
.tienda-pop .pag-puntos { min-width: 22px; text-align: center; font-weight: 800; color: var(--petroleo); }
.tienda-pop .pag-resumen { text-align: center; margin: 14px 0 48px; font-size: .9rem; color: var(--petroleo); }
@media (max-width: 520px) { .tienda-pop .paginacion { gap: 6px; } .tienda-pop .paginacion a, .tienda-pop .pag-actual { min-width: 42px; height: 42px; padding: 0 12px; } .tienda-pop .pag-lado { padding: 0 14px; } }

/* ==========================================================================
   NUESTRAS RESEÑAS (09-11-2026): todas las reseñas juntas, con filtro por quién las escribió. Mismo lenguaje que la tienda.
   ========================================================================== */
.resenas-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px; background: var(--petroleo); border-radius: 34px; padding: 34px 44px; margin-bottom: 18px; }
.resenas-cab h1 { margin: 0; font-family: var(--serif); font-weight: 500; font-size: clamp(2rem, 3.6vw, 3.2rem); line-height: 1.05; color: var(--hueso); text-align: left; }
.resenas-filtros { display: flex; flex-wrap: wrap; gap: 8px; }
.resenas-filtros a { padding: 10px 20px; border-radius: 999px; box-shadow: inset 0 0 0 2px var(--hueso); color: var(--hueso); font-weight: 700; text-decoration: none; transition: background .15s, color .15s; }
.resenas-filtros a:hover, .resenas-filtros a:focus-visible, .resenas-filtros a.activo { background: var(--hueso); color: var(--petroleo); }
.resenas-lista { display: flex; flex-direction: column; gap: 14px; }
.resena-tarjeta { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 28px; align-items: start; background: var(--hueso); border-radius: 26px; padding: 26px 30px; }
.resena-portada img { display: block; width: 100%; height: auto; border-radius: 10px; }
.resena-cuerpo h2 { margin: 0 0 4px; font-family: var(--sans); font-weight: 700; font-size: 1.25rem; line-height: 1.25; text-align: left; }
.resena-cuerpo h2 a { color: var(--petroleo); text-decoration: none; }
.resena-cuerpo h2 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.resena-autor { margin: 0 0 16px; color: var(--petroleo); text-align: left; }
.resena-texto p { margin: 0 0 1em; max-width: 46rem; line-height: 1.7; text-align: left; color: var(--petroleo); }
.resena-firma { margin: 4px 0 0; font-size: .95rem; color: var(--petroleo); text-align: left; }
.resenas-vacio { text-align: center; color: var(--petroleo); padding: 40px 0; }
.resenas-pop .paginacion { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin: 56px 0 10px; }
.resenas-pop .paginacion a, .resenas-pop .pag-actual { display: inline-flex; align-items: center; justify-content: center; min-width: 46px; height: 46px; padding: 0 16px; box-sizing: border-box; border-radius: 999px; font-weight: 800; text-decoration: none; background: var(--hueso); color: var(--petroleo); transition: background .15s, color .15s; }
.resenas-pop .paginacion a:hover, .resenas-pop .paginacion a:focus-visible { background: var(--petroleo); color: var(--hueso); }
.resenas-pop .pag-actual { background: var(--petroleo); color: var(--hueso); }
.resenas-pop .pag-puntos { min-width: 22px; text-align: center; font-weight: 800; color: var(--petroleo); }
.resenas-pop .pag-resumen { text-align: center; margin: 14px 0 48px; font-size: .9rem; color: var(--petroleo); }
@media (max-width: 700px) {
    .resenas-cab { padding: 26px 22px; border-radius: 26px; }
    .resena-tarjeta { grid-template-columns: 1fr; gap: 16px; padding: 20px 20px 24px; }
    .resena-portada { width: 120px; }
    .resenas-pop .paginacion { gap: 6px; }
    .resenas-pop .paginacion a, .resenas-pop .pag-actual { min-width: 42px; height: 42px; padding: 0 12px; }
}
.ficha-mas-resenas { margin: 0 0 14px; }
.ficha-mas-resenas a { color: var(--petroleo); text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   PANEL DE GESTIÓN (09-11-2026): fondo hueso, texto negro puro, sin negritas por todas partes, mejor contraste y avisos
   agrupados. Se redefinen las variables SOLO dentro del panel (no la web pública ni el login). Negro puro por decisión de Iñaki.
   ========================================================================== */
body.admin-cuerpo:not(.pagina-acceso) {
    --crema: var(--hueso); --crema-claro: var(--hueso); --blanco: var(--hueso);
    --espresso: #000; --petroleo: #000; --marron: #000; --tinta: #000;
    --terracota: #000; --terracota-osc: #000; --dorado: #000; --coral: #000;
    --borde: rgba(0, 0, 0, .3); --sombra: rgba(0, 0, 0, .12);
    background: var(--hueso); color: #000; font-size: 1rem; line-height: 1.55;
}
body.admin-cuerpo:not(.pagina-acceso) :is(h1, h2, h3, h4, p, li, td, th, label, summary, small, em, strong, b, span, dt, dd, legend) { color: #000; }
/* Sin negritas: todo en peso normal; solo los botones y las cabeceras de tabla un punto más firmes */
body.admin-cuerpo:not(.pagina-acceso) *:not(h1):not(h2) { font-weight: 400 !important; }
body.admin-cuerpo:not(.pagina-acceso) :is(h1, h2) { font-weight: 500 !important; }
body.admin-cuerpo:not(.pagina-acceso) :is(.boton, .boton-pequeno, .boton-linea, button, th, .admin-lateral a.activo, .avisos-n) { font-weight: 500 !important; }
body.admin-cuerpo:not(.pagina-acceso) :focus-visible { outline: 3px solid #000; outline-offset: 2px; }
body.admin-cuerpo:not(.pagina-acceso) :is(input:not([type="checkbox"], [type="radio"]), select, textarea) { background: var(--hueso); color: #000; border: 1.5px solid #000; border-radius: 8px; }

/* Menú lateral: hueso con letra negra; el apartado en el que estás, en negro */
body.admin-cuerpo:not(.pagina-acceso) .admin-lateral { background: var(--hueso); color: #000; border-right: 1px solid rgba(0, 0, 0, .3); }
body.admin-cuerpo:not(.pagina-acceso) .admin-lateral a, body.admin-cuerpo:not(.pagina-acceso) .admin-grupo > summary, body.admin-cuerpo:not(.pagina-acceso) .admin-lateral .admin-salir { color: #000; }
body.admin-cuerpo:not(.pagina-acceso) .admin-grupo > summary { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; }
body.admin-cuerpo:not(.pagina-acceso) .admin-lateral a { font-size: .98rem; }
body.admin-cuerpo:not(.pagina-acceso) .admin-lateral a:hover, body.admin-cuerpo:not(.pagina-acceso) .admin-grupo > summary:hover { background: rgba(0, 0, 0, .08); color: #000; }
body.admin-cuerpo:not(.pagina-acceso) .admin-lateral a.activo { background: #000; color: var(--hueso); border-left-color: transparent; border-radius: 0 999px 999px 0; margin-right: 10px; }
body.admin-cuerpo:not(.pagina-acceso) .admin-lateral a.activo * { color: var(--hueso); }
body.admin-cuerpo:not(.pagina-acceso) .admin-nav-pie { border-top: 1px solid rgba(0, 0, 0, .3); }
body.admin-cuerpo:not(.pagina-acceso) .admin-numerito { background: #000; color: var(--hueso); }

/* Avisos agrupados en un desplegable, sin barras rojas */
.avisos { margin: -24px 0 22px; border-bottom: 1px solid rgba(0, 0, 0, .3); }
.avisos > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 12px 32px; font-size: 1rem; }
.avisos > summary::-webkit-details-marker { display: none; }
.avisos > summary::after { content: '+'; margin-left: auto; font-size: 1.5rem; line-height: 1; }
.avisos[open] > summary::after { content: '\2212'; }
.avisos > summary:hover { background: rgba(0, 0, 0, .06); }
.avisos-n { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 8px; border-radius: 999px; background: #000; color: var(--hueso) !important; font-size: .85rem; }
.avisos .barra-abono, .avisos .barra-carga { margin: 0; padding: 12px 32px; background: transparent; color: #000; border-top: 1px solid rgba(0, 0, 0, .2); font-size: .95rem; }
.avisos .barra-abono:hover { background: rgba(0, 0, 0, .06); color: #000; }
.avisos .barra-abono :is(strong, span, em), .avisos .barra-carga :is(strong, span, div) { color: #000; }
.avisos .barra-abono strong, .avisos .barra-carga-cab strong { letter-spacing: 0; text-transform: lowercase; }
.avisos .barra-abono strong::first-letter, .avisos .barra-carga-cab strong::first-letter { text-transform: uppercase; }
.avisos .barra-abono em { text-decoration: underline; text-underline-offset: 3px; font-style: normal; }
.avisos .barra-carga-pista { background: rgba(0, 0, 0, .15); }
.avisos .barra-carga-relleno { background: #000; }
.avisos .barra-carga-pie { color: #000; }

/* Escritorio: tarjetas más claras */
body.admin-cuerpo:not(.pagina-acceso) .accesos { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
body.admin-cuerpo:not(.pagina-acceso) .tarjeta-acceso { background: transparent; border: 1px solid rgba(0, 0, 0, .35); border-radius: 14px; padding: 22px; box-shadow: none; color: #000; }
body.admin-cuerpo:not(.pagina-acceso) .tarjeta-acceso:hover { background: rgba(0, 0, 0, .06); border-color: #000; transform: none; box-shadow: none; }
body.admin-cuerpo:not(.pagina-acceso) .tarjeta-acceso h3 { font-family: var(--serif); font-size: 1.4rem; margin-bottom: 6px; }
body.admin-cuerpo:not(.pagina-acceso) .tarjeta-acceso p { font-size: 1rem; }
body.admin-cuerpo:not(.pagina-acceso) .tarjeta-acceso-principal, body.admin-cuerpo:not(.pagina-acceso) .tarjeta-acceso-principal:hover { background: #000; border-color: #000; }
body.admin-cuerpo:not(.pagina-acceso) .tarjeta-acceso-principal :is(h3, p) { color: var(--hueso); }
@media (max-width: 900px) { .avisos > summary, .avisos .barra-abono, .avisos .barra-carga { padding-left: 18px; padding-right: 18px; } body.admin-cuerpo:not(.pagina-acceso) .admin-lateral { border-right: 0; border-bottom: 1px solid rgba(0, 0, 0, .3); } body.admin-cuerpo:not(.pagina-acceso) .admin-lateral a.activo { border-radius: 999px; margin-right: 0; } }
/* Las tablas del panel nunca se salen de la pantalla: si no caben, se desplazan dentro de su caja */
body.admin-cuerpo:not(.pagina-acceso) .admin-principal table { display: block; max-width: 100%; overflow-x: auto; }
/* Etiquetas del panel (p. ej. «Total: 58»): negro con letra hueso, para que se lean siempre */
body.admin-cuerpo:not(.pagina-acceso) :is(span, em, b).etiqueta { background: #000; color: var(--hueso); border-color: #000; }

/* Buscador de la portada: el campo vuelve a ser transparente y de extremos redondos (con el hueso global asomaban sus esquinas cuadradas por los extremos de la píldora) */
.bt-buscar input { background: transparent; border-radius: 999px; }

/* ==========================================================================
   PASADA GENERAL (09-11-2026): todas las tarjetas y recuadros de la web pública en hueso, sin aro de línea, y los campos de formulario bien marcados.
   Es lo que ya se había decidido para la tienda y la portada, aplicado a TODAS las páginas: blog, talleres, clubes, actividades,
   contacto, La librería, Nosotros, preguntas frecuentes y recomendador.
   ========================================================================== */
.tarjeta, .acordeon-hoja, .defendemos, .seccion-clara, .faq, .test-opcion, .regalo-opcion { background: var(--hueso); border: 0; box-shadow: none; }
.tarjeta:hover { box-shadow: none; }
.test-opcion:hover { background: var(--petroleo); color: var(--hueso); }
.formulario .campo :is(input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="file"], [type="hidden"]), textarea, select) { border: 2px solid var(--petroleo); }
/* En el panel de gestión las tarjetas se distinguen con una línea fina (fondo hueso sobre hueso) */
body.admin-cuerpo:not(.pagina-acceso) :is(.tarjeta, .acordeon-hoja, .faq) { background: transparent; border: 1px solid rgba(0, 0, 0, .3); }

/* ==========================================================================
   TEXTO EN HUESO SOBRE LOS COLORES (09-11-2026): todo texto que va sobre un color de la paleta (petróleo, granate, morado, verde…)
   es hueso. Hecho con un barrido de todas las páginas, no solo de una: barra fija de arriba, botón del carrito, menú activo,
   etiquetas, cabeceras de página, franja de newsletter, bandas, y todos los botones.
   ========================================================================== */
.bt-contacto, .bt-contacto :is(a, span, em, strong, small), .bt-contacto a:hover { color: var(--hueso); }
.bt-cab .bt-b-carro, .bt-cab .bt-b-carro :is(span, em), .saltar-contenido, .bt-cab a.activo, .bt-cab nav a.activo { color: var(--hueso); }
.bt-pag-cab, .bt-pag-cab :is(h1, h2, h3, p, span, strong, em, a, .lema, .h1-como-h2) { color: var(--hueso); }
.news-banda, .news-banda :is(h2, h3, p, span, strong, em, .lema) { color: var(--hueso); }
.banner-cont :is(h2, h3, p, span, strong, em) { color: var(--hueso); }
.tienda-pop .reco-banner :is(h1, h2, h3, p, span, strong, em, .resalte) { color: var(--hueso); }
.boton:not(.boton-linea), .boton:not(.boton-linea):hover, .boton:not(.boton-linea):focus-visible { color: var(--hueso); }
header.bt-pag-cab .titulo-seccion :is(h1, h2), header.bt-pag-cab h1.h1-como-h2 { color: var(--hueso); }
.filtros a.activo, .filtros a.activo:hover { color: var(--hueso); }

/* Panel de control: nada de negrita, letra normal en todo el panel (pedido de Iñaki, 12-11-2026) */
body.admin-cuerpo, body.admin-cuerpo *:not(svg):not(path) { font-weight: 400 !important; }

/* Panel de control (12-11-2026): menú lateral en hueso y página de la derecha en un tono más claro,
   para que los campos de los formularios (hueso con borde negro) se distingan del fondo. */
body.admin-cuerpo:not(.pagina-acceso) { --hueso-claro: #F8F8F1; }
body.admin-cuerpo:not(.pagina-acceso) .admin-principal { background: var(--hueso-claro); min-height: 100vh; }

/* Albarán (panel, 12-11-2026): compacto, cada libro en una línea y el resumen en una franja */
body.admin-cuerpo:not(.pagina-acceso) .alb-resumen { display: flex; flex-wrap: wrap; gap: 8px 32px; padding: 10px 14px; border: 1px solid rgba(0, 0, 0, .3); border-radius: 10px; margin-bottom: 14px; }
body.admin-cuerpo:not(.pagina-acceso) .alb-resumen small { display: block; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
body.admin-cuerpo:not(.pagina-acceso) .tabla-albaran { font-size: .88rem; }
body.admin-cuerpo:not(.pagina-acceso) .tabla-albaran :is(th, td) { padding: 3px 8px; white-space: nowrap; line-height: 1.25; }
body.admin-cuerpo:not(.pagina-acceso) .tabla-albaran td.alb-libro { max-width: 72ch; overflow: hidden; text-overflow: ellipsis; }
body.admin-cuerpo:not(.pagina-acceso) .tabla-albaran :is(input[type="number"], input[type="text"], select) { padding: 2px 6px; height: auto; min-height: 0; font-size: .88rem; border-width: 1px; }
body.admin-cuerpo:not(.pagina-acceso) .tabla-albaran .panel-dato { margin-left: 6px; }
body.admin-cuerpo:not(.pagina-acceso) .alb-importes { margin: 6px 0 12px; }
.alb-dto-ed[hidden], .alb-dto-ver[hidden], #alb-editar-dto[hidden], #alb-guardar-dto[hidden] { display: none !important; }
body.admin-cuerpo:not(.pagina-acceso) .tabla-albaran { font-size: .8rem; }
body.admin-cuerpo:not(.pagina-acceso) .tabla-albaran .panel-dato { display: inline; font-size: .72rem; margin: 0 0 0 8px; }
body.admin-cuerpo:not(.pagina-acceso) .tabla-albaran :is(th, td) { padding: 2px 8px !important; height: 0; }
body.admin-cuerpo:not(.pagina-acceso) .tabla-albaran :is(input[type="number"], input[type="text"], select) { padding: 0 4px !important; height: 22px !important; border-radius: 5px; font-size: .8rem; }
body.admin-cuerpo:not(.pagina-acceso) .tabla-albaran input[type="checkbox"] { margin: 0; }
body.admin-cuerpo:not(.pagina-acceso) .tabla-albaran label { display: inline; margin: 0; }
body.admin-cuerpo:not(.pagina-acceso) .alb-todos { margin: 4px 0 8px; }
.alb-todos[hidden] { display: none !important; }

/* Panel de control (12-11-2026): fondos BLANCOS puros en la parte de la derecha, para leer mejor. El menú lateral sigue en hueso. */
body.admin-cuerpo:not(.pagina-acceso) { --hueso-claro: #FFFFFF; }
body.admin-cuerpo:not(.pagina-acceso) .admin-principal :is(.tabla, .aviso, .alb-resumen, .albaran-transferir) { background: #FFFFFF; }
body.admin-cuerpo:not(.pagina-acceso) .admin-principal :is(input:not([type="checkbox"], [type="radio"]), select, textarea) { background: #FFFFFF; }
body.admin-cuerpo:not(.pagina-acceso) .admin-principal .tabla tbody tr:hover { background: #FFFFFF; }
/* Corregir cuándo llegó: todo en una línea */
body.admin-cuerpo:not(.pagina-acceso) .alb-corregir { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 10px 0 16px; }
body.admin-cuerpo:not(.pagina-acceso) .alb-corregir :is(label, strong) { margin: 0; }
body.admin-cuerpo:not(.pagina-acceso) .alb-corregir :is(input, select) { width: auto; min-width: 0; height: 32px; padding: 0 8px; }
body.admin-cuerpo:not(.pagina-acceso) .alb-corregir { flex-wrap: nowrap; font-size: .85rem; white-space: nowrap; }
body.admin-cuerpo:not(.pagina-acceso) .alb-corregir :is(label, strong, input, select, button) { font-size: .85rem; }
body.admin-cuerpo:not(.pagina-acceso) .alb-corregir input[type="date"] { width: 10.5em; }
body.admin-cuerpo:not(.pagina-acceso) .alb-corregir select { max-width: 17em; }

/* ============================================================================================
   PANEL /centrodemando — UNA SOLA TIPOGRAFÍA (12-11-2026)
   Una fuente (Inter), un tamaño para todo el texto, tres tamaños de título, nada de negrita,
   cursiva, mayúsculas ni minúsculas forzadas. Va el último y con prioridad máxima a propósito:
   así ninguna regla anterior del panel puede volver a mezclar fuentes ni tamaños.
   ============================================================================================ */
body.admin-cuerpo:not(#_) :where(*:not(svg):not(path)) {
    font-family: "Inter", "Segoe UI", system-ui, -apple-system, Arial, sans-serif !important;
    font-size: .85rem !important;
    line-height: 1.5 !important;
    font-weight: 400 !important;
    font-style: normal !important;
    font-variant: normal !important;
    font-synthesis: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    text-decoration-thickness: auto;
}
body.admin-cuerpo:not(#_) :is(h1) { font-size: 1.6rem !important; line-height: 1.25 !important; }
body.admin-cuerpo:not(#_) :is(h2) { font-size: 1.25rem !important; line-height: 1.3 !important; }
body.admin-cuerpo:not(#_) :is(h3, h4) { font-size: 1.05rem !important; line-height: 1.35 !important; }
body.admin-cuerpo:not(#_) :is(input, select, textarea, button)::placeholder { font: inherit !important; }

/* Las tablas del panel ocupan SIEMPRE todo el ancho de la página (antes se encogían al contenido y dejaban
   un hueco vacío a la derecha). Solo en pantallas estrechas se desplazan dentro de su caja. */
@media (min-width: 901px) {
    body.admin-cuerpo:not(.pagina-acceso) .admin-principal table { display: table; width: 100%; max-width: 100%; overflow: visible; }
    body.admin-cuerpo:not(.pagina-acceso) .tabla-albaran td.alb-libro { max-width: none; width: 100%; }
}

/* Listas del panel compactas: una línea por fila, botones de la fila del mismo alto que el texto */
body.admin-cuerpo:not(.pagina-acceso) .tabla-albaran :is(a.boton, button.boton) { padding: 1px 12px !important; min-height: 0 !important; height: 22px !important; line-height: 20px !important; border-width: 1px; display: inline-flex; align-items: center; }
body.admin-cuerpo:not(.pagina-acceso) .tabla-albaran td.parte { max-width: 40ch; overflow: hidden; text-overflow: ellipsis; }

/* Inventario: escaneo y buscador en una sola línea */
body.admin-cuerpo:not(.pagina-acceso) .inv-entrada { display: flex; align-items: center; gap: 12px; flex-wrap: nowrap; }
body.admin-cuerpo:not(.pagina-acceso) .inv-entrada > :is(input[type="text"], .campo) { flex: 1 1 auto; min-width: 0; margin: 0; }
body.admin-cuerpo:not(.pagina-acceso) .inv-entrada .campo input { width: 100%; }
body.admin-cuerpo:not(.pagina-acceso) .inv-entrada input[type="number"] { flex: 0 0 5.5em; width: 5.5em; }
body.admin-cuerpo:not(.pagina-acceso) .inv-entrada :is(label:not(.solo-lectores)) { margin: 0; white-space: nowrap; }
body.admin-cuerpo:not(.pagina-acceso) .inv-entrada :is(input, button) { height: 36px; margin: 0; }
body.admin-cuerpo:not(.pagina-acceso) .inv-entrada button { flex: 0 0 auto; white-space: nowrap; padding-top: 0; padding-bottom: 0; }
@media (max-width: 700px) { body.admin-cuerpo:not(.pagina-acceso) .inv-entrada { flex-wrap: wrap; } }

/* En las tablas compactas, el formulario de «Borrar» va en la misma línea que «Editar» */
body.admin-cuerpo:not(.pagina-acceso) .tabla-albaran form { display: inline; margin: 0; padding: 0; }
body.admin-cuerpo:not(.pagina-acceso) .tabla-albaran td:last-child { white-space: nowrap; }
body.admin-cuerpo:not(.pagina-acceso) .tabla-albaran .miniatura-libro { width: 18px !important; height: 26px !important; object-fit: cover; vertical-align: middle; }
body.admin-cuerpo:not(.pagina-acceso) .tabla-albaran td.parte { max-width: 26ch; }

/* ============================================================================================
   TODAS LAS TABLAS DEL PANEL, IGUALES Y COMPACTAS (12-11-2026)
   Una línea por fila: relleno mínimo, notas pequeñas en la misma línea, campos y botones de la
   altura del texto, etiquetas en línea. Vale para cualquier tabla del panel, sin clase especial.
   ============================================================================================ */
body.admin-cuerpo:not(.pagina-acceso) .admin-principal table :is(th, td) { padding: 3px 8px !important; line-height: 1.3 !important; vertical-align: middle; }
body.admin-cuerpo:not(.pagina-acceso) .admin-principal table .panel-dato { display: inline !important; margin: 0 0 0 8px !important; }
body.admin-cuerpo:not(.pagina-acceso) .admin-principal table :is(input:not([type="checkbox"], [type="radio"], [type="file"]), select) { height: 24px !important; min-height: 0 !important; padding: 0 6px !important; border-width: 1px; border-radius: 5px; }
body.admin-cuerpo:not(.pagina-acceso) .admin-principal table textarea { padding: 2px 6px !important; min-height: 0 !important; }
body.admin-cuerpo:not(.pagina-acceso) .admin-principal table :is(a.boton, button.boton, a.boton-pequeno, button.boton-pequeno) { padding: 0 12px !important; min-height: 0 !important; height: 22px !important; line-height: 20px !important; border-width: 1px; display: inline-flex; align-items: center; margin: 0; }
body.admin-cuerpo:not(.pagina-acceso) .admin-principal table form { display: inline; margin: 0; padding: 0; }
body.admin-cuerpo:not(.pagina-acceso) .admin-principal table :is(.etiqueta, .avisos-n) { display: inline-block; padding: 0 8px !important; line-height: 18px !important; min-height: 0; margin: 0 0 0 6px; vertical-align: middle; }
body.admin-cuerpo:not(.pagina-acceso) .admin-principal table :is(img, .miniatura-libro) { width: auto !important; height: 26px !important; max-width: 40px; object-fit: cover; vertical-align: middle; }
body.admin-cuerpo:not(.pagina-acceso) .admin-principal table td:last-child:has(> :is(a.boton, a.boton-pequeno, form, button)) { white-space: nowrap; }
body.admin-cuerpo:not(.pagina-acceso) .admin-principal .tabla-albaran td.alb-libro { white-space: normal; }

/* Campos y botones fuera de las tablas (filtros, buscadores, formularios): todos de la misma altura */
body.admin-cuerpo:not(.pagina-acceso) .admin-principal :is(input:not([type="checkbox"], [type="radio"], [type="file"], [type="hidden"], [type="range"], [type="color"]), select):not(table *) { height: 36px; padding-top: 0; padding-bottom: 0; box-sizing: border-box; }
body.admin-cuerpo:not(.pagina-acceso) .admin-principal :is(a.boton, button.boton):not(table *):not(.boton-pequeno) { height: 36px; padding-top: 0; padding-bottom: 0; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; }

/* Campos con aire por dentro y por fuera: el texto no toca el borde y nada se pega al elemento de arriba */
body.admin-cuerpo:not(.pagina-acceso) .admin-principal :is(input:not([type="checkbox"], [type="radio"], [type="file"], [type="hidden"], [type="range"], [type="color"]), select) { padding-left: 12px !important; padding-right: 12px !important; }
body.admin-cuerpo:not(.pagina-acceso) .admin-principal .tabla-albaran :is(input:not([type="checkbox"], [type="radio"], [type="file"]), select) { padding-left: 6px !important; padding-right: 6px !important; }
body.admin-cuerpo:not(.pagina-acceso) .inv-entrada { margin-top: 12px; }
body.admin-cuerpo:not(.pagina-acceso) .admin-principal .ayuda-campo { margin: 4px 0 8px; }
body.admin-cuerpo:not(.pagina-acceso) .admin-principal .inv-entrada + .panel-dato, body.admin-cuerpo:not(.pagina-acceso) .admin-principal form + .panel-dato { margin-top: 10px; }
body.admin-cuerpo:not(.pagina-acceso) .admin-principal .tarjeta .libro-cuerpo { padding-bottom: 20px; }

/* Filas que llevan a su ficha al pulsar en cualquier parte de la línea */
body.admin-cuerpo:not(.pagina-acceso) .admin-principal tr.fila-enlace { cursor: pointer; }
body.admin-cuerpo:not(.pagina-acceso) .admin-principal .tabla tbody tr.fila-enlace:hover { background: var(--hueso) !important; }

/* Tablas de lotes y de «faltan»: columnas según su contenido (con ancho fijo se pisaban al ir las notas en línea) */
@media (min-width: 701px) {
    body.admin-cuerpo:not(.pagina-acceso) .admin-principal table:is(.tabla-lotes, .tabla-faltan) { table-layout: auto; width: 100%; }
    body.admin-cuerpo:not(.pagina-acceso) .admin-principal table:is(.tabla-lotes, .tabla-faltan) :is(th, td) { white-space: normal; }
    body.admin-cuerpo:not(.pagina-acceso) .admin-principal table.tabla-lotes :is(th, td):not(:first-child) { white-space: nowrap; }
}

/* ============================================================================================
   PANEL /centrodemando — ESTRUCTURA POR TAREAS (13-11-2026)
   Escritorio «Hoy» en tres bandas, contadores, migas, buscador global, pestañas y estados
   vacíos comunes. Solo blanco, negro y hueso; sin negrita, cursiva ni mayúsculas.
   ============================================================================================ */

/* Menú lateral compacto: cabe en 900 px; el scroll es interno, la página no se mueve */
body.admin-cuerpo:not(.pagina-acceso) .admin-lateral { padding: 10px 0; overscroll-behavior: contain; }
body.admin-cuerpo:not(.pagina-acceso) .admin-lateral a { padding: 6px 18px; gap: 10px; }
body.admin-cuerpo:not(.pagina-acceso) .admin-lateral a svg { width: 16px; height: 16px; flex: 0 0 16px; }
body.admin-cuerpo:not(.pagina-acceso) .admin-grupo > summary { padding: 9px 18px 4px; }
body.admin-cuerpo:not(.pagina-acceso) .admin-nav-pie { padding-top: 6px; }
body.admin-cuerpo:not(.pagina-acceso) .admin-lateral .admin-numerito { margin-left: auto; font-size: .72rem !important; line-height: 1.4 !important; }
.admin-punto { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #000; margin-left: 8px; flex: 0 0 8px; }
body.admin-cuerpo:not(.pagina-acceso) .admin-lateral a.activo .admin-punto { background: var(--hueso); }
body.admin-cuerpo:not(.pagina-acceso) .admin-grupo > summary .admin-punto { margin-left: 8px; }

/* Barra de arriba: buscador global */
body.admin-cuerpo:not(.pagina-acceso) .panel-barra { display: flex; justify-content: flex-end; padding: 12px clamp(16px, 3vw, 40px) 0; max-width: 1500px; margin: 0 auto; box-sizing: border-box; }
body.admin-cuerpo:not(.pagina-acceso) .buscador-global { display: flex; align-items: center; gap: 8px; width: 100%; max-width: 520px; margin: 0; }
body.admin-cuerpo:not(.pagina-acceso) .buscador-global input[type="search"] { flex: 1 1 auto; min-width: 0; margin: 0; }
body.admin-cuerpo:not(.pagina-acceso) .buscador-global button { height: 36px !important; flex: 0 0 auto; }
/* La barra de abono ya no cuelga de un margen negativo: va entre el buscador y el contenido */
body.admin-cuerpo:not(.pagina-acceso) .admin-principal > .barra-abono { margin: 12px 0 0; padding: 10px clamp(16px, 3vw, 40px); background: #000; color: var(--hueso); }
body.admin-cuerpo:not(.pagina-acceso) .admin-principal > .barra-abono :is(strong, span, em) { color: var(--hueso); }
body.admin-cuerpo:not(.pagina-acceso) .admin-principal > .barra-abono em { text-decoration: underline; text-underline-offset: 3px; }
body.admin-cuerpo:not(.pagina-acceso) .admin-principal > .barra-abono:hover { background: #000; }

/* Aire entre el buscador global, la barra de abono y el título de la página */
body.admin-cuerpo:not(.pagina-acceso) .panel-barra { padding-bottom: 8px; }
body.admin-cuerpo:not(.pagina-acceso) .admin-principal > .barra-abono + * { margin-top: 16px; }

/* Migas de pan y atajos bajo el h1 */
body.admin-cuerpo:not(.pagina-acceso) .migas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -8px 0 16px; color: rgba(0, 0, 0, .6); }
body.admin-cuerpo:not(.pagina-acceso) .migas :is(a, span) { color: rgba(0, 0, 0, .6); }
body.admin-cuerpo:not(.pagina-acceso) .migas a { text-decoration: underline; text-underline-offset: 3px; }
body.admin-cuerpo:not(.pagina-acceso) .migas a:hover { color: #000; }
body.admin-cuerpo:not(.pagina-acceso) .migas > span:last-of-type:not(.migas-atajos):not(.migas-sep) { color: #000; }
body.admin-cuerpo:not(.pagina-acceso) .migas-atajos { margin-left: auto; display: inline-flex; gap: 14px; flex-wrap: wrap; }

/* Pestañas comunes (los demás paquetes las usan: <nav class="panel-pestanas"><a class="activa">…) */
body.admin-cuerpo:not(.pagina-acceso) .panel-pestanas { display: flex; flex-wrap: wrap; gap: 0; margin: 0 0 16px; border-bottom: 1px solid rgba(0, 0, 0, .3); }
body.admin-cuerpo:not(.pagina-acceso) .panel-pestanas a { padding: 8px 16px; border-bottom: 2px solid transparent; margin-bottom: -1px; text-decoration: none; color: rgba(0, 0, 0, .65); }
body.admin-cuerpo:not(.pagina-acceso) .panel-pestanas a:hover { color: #000; background: rgba(0, 0, 0, .05); }
body.admin-cuerpo:not(.pagina-acceso) .panel-pestanas :is(a.activa, a.activo, a[aria-current]) { color: #000; border-bottom-color: #000; }
body.admin-cuerpo:not(.pagina-acceso) .panel-pestanas .panel-dato { margin-left: 6px; }

/* Estado vacío: dice qué hacer */
body.admin-cuerpo:not(.pagina-acceso) .panel-vacio { margin: 8px 0 20px; padding: 14px 16px; border: 1px dashed rgba(0, 0, 0, .35); border-radius: 8px; color: #000; }
body.admin-cuerpo:not(.pagina-acceso) .panel-vacio a:not(.boton) { text-decoration: underline; text-underline-offset: 3px; }

/* Escritorio «Hoy» */
body.admin-cuerpo:not(.pagina-acceso) .hoy-banda { margin: 0 0 26px; }
body.admin-cuerpo:not(.pagina-acceso) .hoy-banda > h2 { margin: 0 0 8px; }
body.admin-cuerpo:not(.pagina-acceso) .hoy-urgente > h2 { display: inline-block; background: #000; color: var(--hueso); padding: 0 12px; border-radius: 999px; font-size: 1.05rem !important; }
body.admin-cuerpo:not(.pagina-acceso) .hoy-urgente table { border: 1.5px solid #000; }
body.admin-cuerpo:not(.pagina-acceso) .hoy-tabla td { height: 30px; }
body.admin-cuerpo:not(.pagina-acceso) .hoy-tabla td.hoy-n { width: 64px; text-align: right; font-size: 1.05rem !important; padding-right: 14px !important; white-space: nowrap; }
body.admin-cuerpo:not(.pagina-acceso) .hoy-tabla td.hoy-accion { width: 1%; text-align: right; white-space: nowrap; }
body.admin-cuerpo:not(.pagina-acceso) .hoy-tabla td:nth-child(2) { white-space: normal; }
body.admin-cuerpo:not(.pagina-acceso) .hoy-atajos { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 14px; }
body.admin-cuerpo:not(.pagina-acceso) .hoy-dia td.hoy-n { color: #000; }

@media (max-width: 900px) {
    body.admin-cuerpo:not(.pagina-acceso) .panel-barra { padding-top: 10px; }
    body.admin-cuerpo:not(.pagina-acceso) .buscador-global { max-width: none; }
    body.admin-cuerpo:not(.pagina-acceso) .migas-atajos { margin-left: 0; }
    body.admin-cuerpo:not(.pagina-acceso) .admin-lateral a { padding: 10px 14px; }
}
body.admin-cuerpo:not(.pagina-acceso) .admin-lateral { width: 256px; flex: 0 0 256px; }
@media (max-width: 900px) { body.admin-cuerpo:not(.pagina-acceso) .admin-lateral { width: auto; flex: 0 0 auto; } }

/* Albarán a mano: filas de entrada de datos a 30 px como el resto de tablas del panel */
body.admin-cuerpo:not(.pagina-acceso) #tabla-manual :is(th, td) { padding-top: 2px !important; padding-bottom: 2px !important; }

/* PANEL · Cifras resumen: una línea de texto, sin cajas (decisión 13-11-2026: nada de «kpis» en recuadros) */
body.admin-cuerpo:not(.pagina-acceso) .cifras { display: flex !important; flex-wrap: wrap; align-items: baseline; gap: 0 !important; margin: 0 0 12px !important; padding: 0; font-size: .85rem; }
body.admin-cuerpo:not(.pagina-acceso) .cifras .cifra { flex: 0 0 auto !important; display: inline-flex; align-items: baseline; gap: 6px; background: none !important; border: 0 !important; border-radius: 0 !important; padding: 0 16px 0 0 !important; margin: 0 16px 0 0; border-right: 1px solid var(--borde) !important; text-align: left !important; }
body.admin-cuerpo:not(.pagina-acceso) .cifras .cifra:last-child { border-right: 0 !important; margin-right: 0; padding-right: 0 !important; }
body.admin-cuerpo:not(.pagina-acceso) .cifras .cifra .numero { font-family: inherit !important; font-size: 1.05rem !important; font-weight: 400 !important; color: inherit !important; line-height: 1.3 !important; }
body.admin-cuerpo:not(.pagina-acceso) .cifras .cifra .texto { font-size: .85rem !important; text-transform: none !important; letter-spacing: 0 !important; color: inherit !important; opacity: .75; }
body.admin-cuerpo:not(.pagina-acceso) .inv-entrada > form { display: block; margin: 0; flex: 0 0 auto; }
body.admin-cuerpo:not(.pagina-acceso) form.inv-entrada.consumo-tarjeta { flex-wrap: wrap; }
body.admin-cuerpo:not(.pagina-acceso) form.inv-entrada.consumo-tarjeta #concepto { order: -1; flex: 1 1 100%; }
body.admin-cuerpo:not(.pagina-acceso) .tarjeta .libro-cuerpo > p { margin: 0 0 6px; }
body.admin-cuerpo:not(.pagina-acceso) .tarjeta .libro-cuerpo > h3 { margin: 0 0 10px; }
body.admin-cuerpo:not(.pagina-acceso) .panel-titulo > span { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
body.admin-cuerpo:not(.pagina-acceso) .panel-titulo > span { flex: 0 0 auto; flex-wrap: nowrap; }
body.admin-cuerpo:not(.pagina-acceso) .panel-titulo > h1 { flex: 1 1 0; min-width: 0; }
body.admin-cuerpo:not(.pagina-acceso) .tabla-inscritos td.parte { max-width: 12ch; }