/* =====================================================================
   style.css — Identidad visual de la tienda
   Ambientación de comercio centenario (principios del s. XX): maderas
   oscuras, verde botella y azul marino de vitrina, rojo teja envejecido
   como acento, y detalles en latón dorado. El blanco y negro del suelo
   histórico aparece como una fina franja a modo de zócalo decorativo
   entre secciones, sin saturar el resto de la página. Tipografía: una
   serif editorial para títulos (personalidad, "de toda la vida")
   combinada con una sans-serif muy legible para el texto funcional
   (precios, formularios, tablas), para que el conjunto no canse la vista.
   ===================================================================== */

:root {
    --color-fondo: #F2E9D4;
    --color-fondo-pagina: #F7F1E3;
    --color-azul-oscuro: #14293F;
    --color-superficie: #FFFDF6;
    --color-texto: #2A2117;
    --color-texto-suave: #6B5D48;
    --color-verde: #2E4D3A;
    --color-verde-oscuro: #1B3024;
    --color-acento: #6B4226;
    --color-acento-oscuro: #4A2C17;
    --color-borde: #D9C9A3;
    --color-error: #B3261E;
    --color-exito: #2E5233;
    --color-granate: #7A3421;
    --color-granate-oscuro: #55240F;
    --color-dorado: #C39A3E;
    --color-dorado-claro: #E8CD82;
    --color-azul: #1D3A5F;
    --color-azul-claro: #4C7A9E;

    --fuente-titulo: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
    --fuente-texto: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

    --ancho-lateral: 240px;
    --alto-cabecera: 74px; /* alto aproximado de la fila de menú+buscador (la parte fija) */
    --alto-pie: auto;
    --radio: 4px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--color-fondo-pagina);
    color: var(--color-texto);
    font-family: var(--fuente-texto);
    font-size: 16px;
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
}

h1, h2, h3, h4 {
    font-family: var(--fuente-titulo);
    font-weight: 600;
    line-height: 1.2;
    margin: 0 0 .6em;
    color: var(--color-verde-oscuro);
}

a { color: var(--color-verde); text-decoration: none; }
a:hover { text-decoration: underline; }

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

:focus-visible {
    outline: 3px solid var(--color-acento);
    outline-offset: 2px;
}

button, .boton {
    font-family: var(--fuente-texto);
    font-size: .95rem;
    cursor: pointer;
    border: none;
    border-radius: var(--radio);
    padding: .65em 1.3em;
    background: var(--color-verde);
    color: #fff;
    transition: background .15s ease;
}
button:hover, .boton:hover { background: var(--color-verde-oscuro); text-decoration: none; }
.boton-acento { background: var(--color-acento); }
.boton-acento:hover { background: var(--color-acento-oscuro); }
.boton-secundario { background: transparent; color: var(--color-verde); border: 1px solid var(--color-borde); }
.boton-secundario:hover { background: #fff; color: var(--color-verde-oscuro); }
button:disabled, .boton-secundario:disabled {
    opacity: .35;
    cursor: not-allowed;
    background: var(--color-fondo);
    color: var(--color-texto-suave);
}
button:disabled:hover, .boton-secundario:disabled:hover { background: var(--color-fondo); color: var(--color-texto-suave); }

/* Flechas de subir/bajar categoría: verde suave cuando se pueden usar,
   gris claro cuando están desactivadas (primera/última posición). */
.flecha-orden {
    padding: .1em .5em;
    background: #ECE3C8;
    color: var(--color-verde);
    border: 1px solid var(--color-borde);
}
.flecha-orden:hover { background: var(--color-verde); color: #fff; }
.flecha-orden:disabled {
    opacity: 1;
    background: #F1F1EE;
    color: #BEBEB6;
    border-color: #E3E3DD;
    cursor: not-allowed;
}
.flecha-orden:disabled:hover { background: #F1F1EE; color: #BEBEB6; }

input, select, textarea {
    font-family: var(--fuente-texto);
    font-size: 1rem;
    padding: .6em .7em;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    width: 100%;
    background: #fff;
    color: var(--color-texto);
}

label { display: block; font-size: .9rem; margin-bottom: .3em; color: var(--color-texto-suave); }
.campo { margin-bottom: 1.1em; }

/* --- Franja roja de descuento (esquina superior de la imagen) --- */
.cinta-descuento {
    position: absolute;
    top: .6em;
    right: -.4em;
    background: var(--color-error);
    color: #fff;
    font-weight: 700;
    font-size: .82rem;
    padding: .3em .8em;
    border-radius: var(--radio) 0 0 var(--radio);
    box-shadow: 0 2px 4px rgba(0,0,0,.15);
    z-index: 2;
}
.precio-tachado { text-decoration: line-through; color: var(--color-texto-suave); font-size: .85em; margin-right: .5em; }
.precio-final { color: var(--color-error); font-weight: 700; }
.nota-descuento { font-size: .78rem; color: var(--color-texto-suave); font-style: italic; }
.cuenta-atras-oferta { font-size: .8rem; font-weight: 700; color: var(--color-error); }
.etiqueta-oferta-limitada {
    display: inline-block;
    font-size: .74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #fff;
    background: var(--color-error);
    padding: .15em .6em;
    border-radius: 999px;
    margin-top: .3em;
}


/* Miniaturas de imágenes adicionales en la ficha de un producto (clicables) */
.miniaturas-producto { display: flex; gap: .6em; margin-top: .8em; flex-wrap: wrap; }
.miniaturas-producto img {
    width: 64px; height: 64px;
    object-fit: cover;
    border-radius: var(--radio);
    border: 2px solid var(--color-borde);
    cursor: pointer;
    transition: border-color .15s ease;
}
.miniaturas-producto img:hover { border-color: var(--color-acento); }
.miniaturas-producto img.activa { border-color: var(--color-verde); }

/* Miniaturas (sin interacción) en la tarjeta del listado: solo avisan de
   que el producto tiene más fotos, no cambian nada al pincharlas. */
.miniaturas-tarjeta { display: flex; gap: .3em; margin: -.4em 0 .6em; pointer-events: none; }
.miniaturas-tarjeta img {
    width: 28px; height: 28px;
    object-fit: cover;
    border-radius: 3px;
    border: 1px solid var(--color-borde);
    opacity: .85;
    margin: 0;
}


/* Filas de "imágenes adicionales" en el formulario de productos */
.fila-imagen-extra { margin-bottom: 1em; }
.boton-quitar-imagen-extra { flex-shrink: 0; padding: .5em .8em; }

.mensaje { padding: .8em 1em; border-radius: var(--radio); margin-bottom: 1em; font-size: .95rem; }
.mensaje-error { background: #FBEAE9; color: var(--color-error); border: 1px solid #F0C7C4; }
.mensaje-exito { background: #E9F5EC; color: var(--color-exito); border: 1px solid #C4E4CF; }
.mensaje-aviso { background: #FCEFD8; color: #8A5A00; border: 1px solid #F0DBA8; }

/* Aviso flotante al añadir al carrito por AJAX: no forma parte del
   flujo de la página, así que aparece siempre visible (esquina de la
   pantalla) sin importar en qué punto del scroll esté el cliente. */
.aviso-carrito-flotante {
    position: fixed;
    right: 1.2em;
    bottom: 1.2em;
    z-index: 200;
    max-width: 320px;
    box-shadow: 0 4px 16px rgba(0,0,0,.2);
    transition: opacity .4s ease;
}

/* =====================  ESTRUCTURA FIJA GENERAL  ===================== */

/* .pagina: columna al 100% de ancho que apila cabecera / cuerpo / pie */
.pagina {
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* --- Cabecera (100% ancho): imagen arriba + menú/buscador debajo --- */
.cabecera {
    width: 100%;
    display: flex;
    flex-direction: column;
    background: var(--color-fondo-pagina);
}

/* Fila 1: imagen de cabecera a todo el ancho (lleva el logo/nombre dentro).
   Se ve ENTERA (sin recortar), con 15px de margen a los lados, 25px por
   encima y 10px por debajo. Se desplaza con la página (no fija); lo que
   queda fijo al hacer scroll es la fila del menú. */
.cabecera-imagen {
    width: calc(100% - 40px);
    margin: 25px 20px 10px 20px;
    line-height: 0;
}
.cabecera-imagen img {
    width: 100%;
    height: auto;
    display: block;
}

/* Fila 2: menú de departamentos + buscador + cuenta/carrito.
   Esta es la parte que queda FIJA arriba al hacer scroll. */
.cabecera-inferior {
    position: sticky;
    top: 0;
    z-index: 100;
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    background: var(--color-fondo-pagina);
    border-bottom: 1px solid var(--color-borde);
}
.cabecera-parte { padding: .7em 1.2em; }

/* Menú horizontal con los 6 departamentos numerados */
.cabecera-menu {
    flex: 1 1 50%;
    min-width: 0;
}
.cabecera-menu nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .3em;
}
.cabecera-menu nav a {
    display: inline-flex;
    align-items: center;
    padding: .55em 1.1em;
    border-radius: 999px;
    background: var(--color-granate);
    color: var(--color-dorado);
    font-size: .92rem;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease;
}
.icono-dpto { display: none; } /* en escritorio solo se ve el texto; en móvil se muestra este icono en su lugar */
.separador-paginacion-movil { display: none; } /* el "/" de "2/8"; en escritorio ya se lee "Página 2 de 8" */
.cabecera-menu nav a:hover, .cabecera-menu nav a.activo {
    background: var(--color-granate-oscuro);
    color: var(--color-dorado-claro);
    text-decoration: none;
}
.cabecera-menu nav .enlace-deshabilitado {
    display: inline-flex;
    align-items: center;
    padding: .55em 1.1em;
    border-radius: 999px;
    background: var(--color-borde);
    color: var(--color-texto-suave) !important;
    font-size: .92rem;
    white-space: nowrap;
    opacity: 1;
    text-decoration: line-through;
}
.distintivo-aviso {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.4em;
    height: 1.4em;
    padding: 0 .35em;
    margin-left: .4em;
    border-radius: 999px;
    background: var(--color-error);
    color: #fff;
    font-size: .78rem;
    font-weight: 700;
    line-height: 1;
}
.cabecera-menu nav a .texto {
    display: inline-block;
    transition: transform .15s ease;
}
.cabecera-menu nav a:hover .texto {
    transform: scale(1.12);
}

/* --- Desplegable "Historia de..." (se abre al pasar el ratón o al hacer clic) --- */
.cabecera-menu li.tiene-submenu { position: relative; }
.cabecera-menu .flecha {
    font-size: .7em;
    margin-left: .3em;
    transition: transform .15s ease;
}
.cabecera-menu li.tiene-submenu:hover > .activador-submenu .flecha,
.cabecera-menu li.tiene-submenu.abierto > .activador-submenu .flecha {
    transform: rotate(180deg);
}
.cabecera-menu .submenu {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    /* Sin margen respecto al botón: si hubiera un hueco entre el botón y
       el desplegable, el ratón "saldría" del menú al cruzarlo y este se
       cerraría antes de llegar a las opciones. Con top:100% y sin margen,
       el desplegable empieza justo donde termina el botón, sin hueco. */
    margin-top: 0;
    min-width: 210px;
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    box-shadow: 0 6px 16px rgba(0,0,0,.1);
    padding: .6em .4em .4em;
    gap: .2em;
    z-index: 200;
}
.cabecera-menu li.tiene-submenu:hover .submenu,
.cabecera-menu li.tiene-submenu.abierto .submenu {
    display: flex;
}
.cabecera-menu .submenu a {
    display: block;
    width: 100%;
    border-radius: var(--radio);
    background: transparent;
    color: var(--color-texto);
    padding: .55em .8em;
    font-size: .9rem;
}
.cabecera-menu .submenu a:hover, .cabecera-menu .submenu a.activo {
    background: var(--color-fondo);
    color: var(--color-verde-oscuro);
}
.cabecera-menu .submenu a:hover .texto { transform: none; } /* sin el efecto de "crecer" dentro del desplegable */

/* Buscador + acceso a cuenta/carrito */
.cabecera-buscador { flex: 0 0 30%; min-width: 260px; }
.cabecera-buscador form { display: flex; }
.cabecera-buscador input { border-radius: var(--radio) 0 0 var(--radio); border-right: none; }
.cabecera-buscador button { border-radius: 0 var(--radio) var(--radio) 0; }
.cabecera-cuenta {
    display: flex;
    align-items: center;
    gap: .9em;
    font-size: .85rem;
    white-space: nowrap;
    margin-top: .5em;
    color: var(--color-texto-suave);
}
.cabecera-cuenta a { color: var(--color-texto); }

.menu-movil-boton {
    display: none;
    background: none;
    border: none;
    color: var(--color-verde-oscuro);
    font-size: 1.6rem;
    padding: .2em .5em .2em 0;
}

.oculto {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

/* --- Cuerpo (100% ancho): menu-lateral (20%) + centro (resto) --- */
.cuerpo {
    width: calc(100% - 40px);
    margin: 0 20px;
    flex: 1;
    display: flex;
    align-items: stretch;
}

/* Menú lateral izquierdo: fijo al 20% del ancho, con las secciones/categorías */
.menu-lateral {
    flex: 0 0 20%;
    max-width: 20%;
    position: sticky;
    top: var(--alto-cabecera);
    align-self: flex-start;
    height: calc(100vh - var(--alto-cabecera));
    overflow-y: auto;
    background: var(--color-superficie);
    border-right: 1px solid var(--color-borde);
    padding: 1.4em 1em;
}
.menu-lateral-extra-movil { display: none; } /* solo se muestra en móvil, ver media query */
.menu-lateral h2 {
    font-size: .95rem;
    color: #fff;
    font-family: var(--fuente-texto);
    font-weight: 600;
    text-align: center;
    background: var(--color-verde);
    padding: .6em .5em;
    margin: -1.4em -1em .9em -1em; /* ocupa todo el ancho del lateral, hasta sus bordes */
    border-radius: var(--radio) var(--radio) 0 0;
}
.menu-lateral ul { list-style: none; margin: 0; padding: 0; }
.menu-lateral li { margin-bottom: .3em; }
.menu-lateral > ul > li:not(:last-child) { padding-bottom: .5em; margin-bottom: .5em; border-bottom: 1px solid var(--color-borde); }
.menu-lateral a {
    display: block;
    padding: .5em .6em;
    border-radius: var(--radio);
    color: var(--color-texto);
    font-size: .95rem;
}
.menu-lateral a:hover, .menu-lateral a.activo { background: var(--color-fondo); color: var(--color-verde-oscuro); text-decoration: none; }

/* --- Acordeón de subcategorías dentro del menú lateral --- */
.menu-lateral .activador-subcat {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.menu-lateral .flecha-subcat {
    font-size: .8em;
    transition: transform .15s ease;
    color: var(--color-texto-suave);
}
.menu-lateral .tiene-hijos.abierto > .activador-subcat .flecha-subcat {
    transform: rotate(90deg);
}
/* Sombreado de la sección abierta, para saber de un vistazo en qué
   parte del menú se está, sin tener que fijarse solo en la flecha. */
.menu-lateral .tiene-hijos.abierto > .activador-subcat {
    background: var(--color-fondo);
    color: var(--color-verde-oscuro);
}
.menu-lateral .submenu-lateral {
    display: none;
    list-style: none;
    margin: 0;
    padding-left: 1em;
}
.menu-lateral .tiene-hijos.abierto > .submenu-lateral {
    display: block;
}
/* Cada nivel se ve un poco más pequeño y con un borde a la izquierda,
   para distinguir visualmente la profundidad. */
.menu-lateral .submenu-lateral a { font-size: .92rem; }
.menu-lateral .submenu-lateral .submenu-lateral a { font-size: .88rem; }
.menu-lateral > ul > li.tiene-hijos > .submenu-lateral {
    border-left: 2px solid var(--color-borde);
    margin-left: .6em;
}

/* Centro: ocupa el resto del ancho disponible.
   El contenido interno se centra horizontalmente: las páginas que limitan
   su ancho (login, registro, formularios, textos legales…) usan
   max-width y "margin: 0 auto" para quedar centradas en el espacio,
   en lugar de pegadas al lado izquierdo. */
.centro {
    flex: 1 1 auto;
    padding: 2em 2em 3em;
    min-width: 0;
    margin: 0 auto;
    width: 100%;
}
.centro h1 { font-size: 1.9rem; }

/* Enlace "← Volver": siempre arriba a la izquierda del contenido, bien
   diferenciado y separado de lo que viene debajo, con un pequeño resalte
   al pasar el ratón por encima. Se usa en el panel de administración y
   en todas las secciones de "Mi cuenta". */
.enlace-volver {
    display: inline-flex;
    align-items: center;
    gap: .4em;
    align-self: flex-start;
    margin-bottom: 1.4em;
    padding: .45em .9em;
    border-radius: var(--radio);
    background: var(--color-fondo);
    color: var(--color-texto-suave);
    font-size: .9rem;
    border: 1px solid var(--color-borde);
    transition: background .15s ease, color .15s ease, transform .15s ease;
}
.enlace-volver:hover {
    background: var(--color-verde);
    color: #fff;
    border-color: var(--color-verde);
    text-decoration: none;
    transform: translateX(-2px);
}
/* Como .centro puede centrar contenido con max-width, esto asegura que
   el enlace de volver siempre quede pegado al borde izquierdo real de la
   columna de contenido, no solo dentro de un bloque estrecho centrado. */
.centro > .enlace-volver:first-child { display: flex; width: fit-content; }


/* --- Pie de página (100% ancho): datos legales, presente en toda la web --- */
.pie {
    width: 100%;
    background: var(--color-azul-oscuro);
    color: #E6E9E3;
    padding: 2.2em 2em 1.6em;
    font-size: .85rem;
    border-top: 1px solid var(--color-borde);
}
.pie-columnas { display: flex; flex-wrap: wrap; gap: 2.5em; max-width: 1200px; margin: 0 auto 1.4em; }
.pie-columnas-4 .pie-columna { flex: 1 1 220px; }
.pie-columna h3 { color: #fff; font-family: var(--fuente-texto); font-size: .85rem; letter-spacing: .02em; margin-bottom: .7em; }
.pie-columna a { color: #C7B98A; display: block; margin-bottom: .4em; }
.pie-columna .enlace-deshabilitado { display: block; margin-bottom: .4em; }
.pie-columna a:hover { color: #fff; }
.pie-legal { text-align: center; color: #B7A97E; border-top: 1px solid rgba(255,255,255,.12); padding-top: 1.2em; max-width: 1200px; margin: 0 auto; }

/* --- Aviso de cookies (LSSI-CE) --- */
.aviso-cookies {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    background: var(--color-verde-oscuro);
    color: #fff;
    padding: 1em 1.4em;
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    align-items: center;
    justify-content: space-between;
    z-index: 1000;
    font-size: .9rem;
}
.aviso-cookies a { color: #fff; text-decoration: underline; }
.aviso-cookies-botones { display: flex; gap: .7em; }

/* --- Portada (index.php): fecha centrada + imagen debajo --- */
.portada {
    text-align: center;
}
.portada-fecha {
    font-family: var(--fuente-titulo);
    font-size: 1.5rem;
    color: var(--color-verde-oscuro);
    margin: 0 0 1.2em;
}
.portada-imagen {
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    border-radius: var(--radio);
}

/* --- Carrusel de la portada: 3 fotos a la vez (una grande en el centro,
   dos más pequeñas a los lados), en bucle continuo, con las fotos
   históricas de "Quiénes somos" avanzando de derecha a izquierda. --- */
.carrusel-portada {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.4em;
    margin: 2em auto 2.6em;
    max-width: 1000px;
}
.carrusel-portada-slot {
    margin: 0;
    flex-shrink: 0;
    border-radius: var(--radio);
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,0,0,.18);
    border: 1px solid var(--color-borde);
    background: var(--color-fondo);
    transition: width .6s ease, height .6s ease;
}
.carrusel-portada-slot img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: opacity .5s ease, transform .5s ease;
}
.carrusel-portada-slot.cambiando img {
    opacity: 0;
    transform: scale(1.06);
}
.carrusel-portada-izquierda, .carrusel-portada-derecha {
    width: 150px;
    height: 200px;
}
.carrusel-portada-izquierda img, .carrusel-portada-derecha img {
    filter: sepia(.25);
    opacity: .7;
}
.carrusel-portada-centro {
    width: 440px;
    height: 300px;
}

/* --- Carrusel de destacados en la portada: libro abierto con efecto de "pasar hojas" --- */
.destacados-portada {
    margin-top: 2.4em;
    text-align: center;
}
.destacados-portada h2 {
    font-size: 1.2rem;
    margin-bottom: 1em;
}
.libro-portada {
    position: relative;
    max-width: 640px;
    margin: 0 auto;
    background: linear-gradient(160deg, #6b4226, #4a2c17);
    border-radius: 10px;
    padding: 1.6em 2em;
    box-shadow: 0 10px 28px rgba(0,0,0,.3);
}
/* Pilas de hojas asomando a los lados, como un libro abierto por la mitad */
.pila-hojas {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 10px;
    background: #fdfaf3;
    border: 1px solid rgba(0,0,0,.1);
    box-shadow:
        2px 0 0 #f4eee1, 3px 0 0 rgba(0,0,0,.05),
        4px 0 0 #ece3d0, 5px 0 0 rgba(0,0,0,.05),
        6px 0 0 #e3d7bf;
    z-index: 0;
}
.pila-hojas.izquierda { left: -6px; }
.pila-hojas.derecha { right: -6px; box-shadow:
        -2px 0 0 #f4eee1, -3px 0 0 rgba(0,0,0,.05),
        -4px 0 0 #ece3d0, -5px 0 0 rgba(0,0,0,.05),
        -6px 0 0 #e3d7bf;
}
.lomo-libro {
    position: absolute;
    top: 1.6em;
    bottom: 1.6em;
    left: 50%;
    width: 10px;
    margin-left: -5px;
    background: linear-gradient(90deg, rgba(0,0,0,.35), rgba(0,0,0,.05) 40%, rgba(0,0,0,.05) 60%, rgba(0,0,0,.35));
    z-index: 3;
    pointer-events: none;
}
.carrusel-flip {
    position: relative;
    background: #fdfaf3;
    border-radius: 4px;
    box-shadow: inset 0 0 30px rgba(0,0,0,.1);
    height: 340px;
    z-index: 2;
}
.pagina-flip {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    opacity: 0;
    z-index: 0;
    transition: opacity .3s ease;
    pointer-events: none;
}
.pagina-flip.activa {
    position: relative;
    opacity: 1;
    z-index: 1;
    pointer-events: auto;
}
.hoja-libro {
    display: flex;
    height: 340px;
    perspective: 1600px;
}
.cara-pagina {
    flex: 1;
    padding: 1.4em 1.2em;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cara-izquierda {
    position: relative;
    z-index: 1;
    box-shadow: inset -10px 0 14px -10px rgba(0,0,0,.2);
}
.cara-derecha {
    position: relative;
    z-index: 2;
    box-shadow: inset 10px 0 14px -10px rgba(0,0,0,.2);
    transform-origin: left center;
    backface-visibility: hidden;
    transition: transform .9s ease;
}
/* Al pasar página: gira la hoja de la derecha sobre la línea central
   (el lomo del libro) hasta quedar tumbada sobre la hoja izquierda. */
.cara-derecha.volteando {
    transform: rotateY(-180deg);
    box-shadow: inset -10px 0 14px -10px rgba(0,0,0,.2);
}
.cara-pagina .tarjeta-libro {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: var(--color-texto);
    width: 100%;
    max-width: 200px;
}
.cara-pagina .tarjeta-libro:hover { text-decoration: none; }
.cara-pagina .tarjeta-libro img {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: contain;
    background: var(--color-fondo);
    border-radius: var(--radio);
    margin-bottom: .7em;
}
.cara-pagina .tarjeta-libro h3 {
    font-size: .92rem;
    font-family: var(--fuente-texto);
    font-weight: 600;
    margin: 0 0 .4em;
    line-height: 1.3em;
    height: 2.6em; /* exactamente 2 líneas, siempre el mismo alto */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.precio-libro { font-size: .92rem; }
.precio-libro .precio-tachado { display: block; font-size: .85em; }
.precio-libro .precio-final { font-weight: 700; }

/* Editor de texto (Quill) para la descripción del producto */
#editorDescripcion .ql-editor { min-height: 140px; font-family: var(--fuente-texto); font-size: 1rem; }
#editorDescripcion.ql-container, #editorDescripcion .ql-toolbar { border-color: var(--color-borde); }

/* Descripción del producto, ya con el formato puesto desde el editor
   (negrita, cursiva, color, listas...) */
.descripcion-producto ul, .descripcion-producto ol { padding-left: 1.4em; margin: .6em 0; }
.descripcion-producto p { margin: 0 0 .6em; }

/* --- Página "Quiénes somos" --- */
.quien-titulo {
    font-family: var(--fuente-titulo);
    font-size: 2.4rem;
    text-align: center;
    color: var(--color-acento);
    letter-spacing: .02em;
    margin-bottom: .5em;
    padding-bottom: .5em;
    border-bottom: 3px solid var(--color-dorado);
    text-shadow:
        0 1px 0 #fff8e8,
        0 2px 0 #e8d9b5,
        0 3px 0 #d9c9a3,
        0 4px 6px rgba(0,0,0,.3);
}
.quien-etapa p { line-height: 1.7; }
.quien-separador {
    border: none;
    border-top: 1px solid var(--color-borde);
    margin: 2em auto;
    width: 85%;
}
.quien-figura {
    margin: 1.4em auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.quien-etapa > .quien-figura {
    width: fit-content;
}
.quien-figura img {
    height: 150px;
    width: auto;
    max-width: 100%;
    border-radius: var(--radio);
    border: 1px solid var(--color-borde);
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
    filter: sepia(.15);
}
.quien-figura figcaption {
    font-family: var(--fuente-titulo);
    font-style: italic;
    font-size: .85rem;
    color: var(--color-texto-suave);
    margin-top: .6em;
}
.quien-figuras-doble {
    display: flex;
    flex-wrap: wrap;
    gap: 1.4em;
    justify-content: center;
    align-items: flex-start;
}
.quien-figuras-doble .quien-figura { flex: 0 0 auto; }

/* --- Página "Historia del Billete Español" --- */
/* El título, el texto y las secciones se quedan en un ancho de lectura
   cómodo; el índice de acceso rápido, en cambio, se sale de ese ancho
   y aprovecha todo el hueco libre junto al menú lateral. */
.hb-ancho-lectura { max-width: 1100px; margin: 0 auto; }
.hb-indice-titulo {
    text-align: center;
    font-family: var(--fuente-titulo);
    font-style: italic;
    color: var(--color-texto-suave);
    font-size: 1.1rem;
    margin-bottom: .6em;
}
.hb-indice {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: .9em 1.2em;
    background: var(--color-fondo);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    padding: 1.8em 2em;
    margin-bottom: 2em;
    font-size: .86rem;
}
.hb-indice a {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--color-verde);
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    padding: .7em 1em;
    line-height: 1.35;
}
.hb-indice a:hover { background: var(--color-verde); color: #fff; border-color: var(--color-verde); }
.hb-seccion {
    margin-bottom: 2.4em;
    padding-bottom: 2em;
    border-bottom: 1px solid var(--color-borde);
}
.hb-seccion:last-of-type { border-bottom: none; }
.hb-seccion h2 {
    font-family: var(--fuente-titulo);
    color: var(--color-acento);
    border-bottom: 2px solid var(--color-dorado);
    padding-bottom: .3em;
    margin-bottom: .8em;
}
.hb-seccion h3 {
    font-family: var(--fuente-titulo);
    font-style: italic;
    color: var(--color-verde-oscuro);
    margin-top: 1.6em;
}
.hb-seccion p { line-height: 1.7; }
.hb-dos-columnas {
    display: flex;
    flex-wrap: wrap;
    gap: 0 2.5em;
}
.hb-dos-columnas ul { flex: 1 1 320px; margin: 0; padding-left: 1.3em; }
.hb-dos-columnas li { margin-bottom: .4em; }
.hb-galeria {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2em;
    justify-content: center;
    margin: 1.2em 0;
}
.hb-figura { margin: 0; text-align: center; max-width: 220px; }
.hb-figura img {
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    border-radius: var(--radio);
    border: 1px solid var(--color-borde);
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
    filter: sepia(.1);
}
.hb-figura figcaption {
    font-size: .78rem;
    color: var(--color-texto-suave);
    margin-top: .4em;
}


/* Hueco de "imagen todavía no subida", del mismo tamaño que una
   fotografía real, para que la fila no quede descuadrada mientras se
   completa el contenido poco a poco. */
.hb-figura-marcador {
    width: 100%;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-fondo);
    border: 1px dashed var(--color-borde);
    border-radius: var(--radio);
    color: var(--color-texto-suave);
    font-size: .72rem;
    text-align: center;
    line-height: 1.3;
}

/* Conjunto de varias imágenes que se trata visualmente como si fuera
   una sola: se le quita el reborde/sombra individual a cada foto y se
   le pone un único reborde al bloque entero. Las imágenes conservan su
   colocación interna (misma rejilla de .hb-galeria); es el bloque el
   que se ajusta al ancho disponible, en pc o en móvil. */
.hb-galeria-conjunto {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* centrado siempre, tanto la fila completa como una suelta con menos monedas */
    align-items: center;     /* cada imagen centrada en su hueco, no estirada a su alto */
    gap: .8em;
    max-width: 620px;
    margin: 1.2em auto;
    padding: 1em;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
    background: none; /* el mismo fondo de la página, no una tarjeta blanca encima */
}
.hb-galeria-conjunto .hb-figura {
    /* Ancho fijo (no 1fr de una rejilla): con 4 monedas por fila caben
       cómodas dentro del max-width de arriba, y así el hueco que no se
       usa en una fila incompleta queda repartido a los lados (centrado)
       en vez de estirar la última imagen o pegarla a la izquierda. */
    flex: 0 0 120px;
    max-width: 120px;
}
.hb-galeria-conjunto .hb-figura img {
    /* Sin ancho forzado: cada moneda conserva su tamaño real, solo
       limitado a no salirse de su hueco si fuera más grande que él. */
    width: auto;
    max-width: 100%;
    border: none;
    box-shadow: none;
    border-radius: 0;
}
.hb-galeria-conjunto .hb-galeria-etiqueta {
    flex-basis: 100%; /* el nombre del país ocupa toda la fila, debajo de las monedas */
    margin: .3em 0 0;
}
/* Modificador de .hb-galeria-conjunto para los bloques por año (monedas
   conmemorativas de 2 euros): marco un 50% más ancho, el título del año
   va primero y resaltado como una pequeña cabecera, y aquí SÍ se ajusta
   cada imagen a un hueco de tamaño fijo (todas estas monedas son de 2€,
   así que no hay tamaños reales distintos que conservar, al contrario
   que en los conjuntos de "todas las monedas de un país"). */
.hb-galeria-conjunto-anio {
    max-width: 930px; /* 620px x 1,5 */
    align-items: flex-start; /* las imágenes de cada fila alineadas arriba; así el texto de
                                 debajo puede ocupar el alto que necesite sin descolocarlas */
}
.hb-galeria-conjunto-anio .hb-galeria-etiqueta {
    order: -1; /* se ve el primero, aunque en el código venga el primero ya de por sí */
    flex-basis: 100%;
    margin: 0 0 .8em;
    padding: .5em .9em;
    background: var(--color-fondo);
    border-radius: var(--radio);
}
.hb-galeria-conjunto-anio .hb-figura {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 165px; /* ancho fijo: con el marco a 930px, siempre caben 5 por fila, nunca 6 */
    max-width: 165px;
    height: 260px; /* misma altura total en todas: así las filas quedan alineadas pase lo que pase de largo el texto */
}
.hb-galeria-conjunto-anio .hb-figura img {
    flex: 0 0 auto;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 122px; /* aquí sí, todas las monedas se ajustan a este mismo hueco */
    object-fit: contain;
}
.hb-galeria-conjunto-anio .hb-figura figcaption {
    flex: 0 0 132px; /* alto FIJO (no "el que haga falta"): con margen de sobra hasta para
                         los pies de foto más largos, para que no se corten */
    width: 100%;
    overflow: hidden;
    text-align: center; /* centrado de texto normal: cada línea centrada por separado, sin flex */
}
/* La moneda de emisión común: sola en su fila (nunca hay otra imagen al
   lado), así que su texto puede usar todo el ancho del bloque en vez de
   quedarse apretado en la misma columna estrecha que las demás. Se le
   quita también la altura fija, ya que al ir sola no hace falta alinearla
   con nada. */
.hb-galeria-conjunto-anio .hb-figura-comun {
    flex-basis: 100%;
    max-width: 100%;
    height: auto;
    margin-bottom: 1em; /* margen de seguridad: su texto puede ocupar varias líneas sin
                            llegar nunca a tocar la fila de monedas de países de abajo */
}
.hb-galeria-conjunto-anio .hb-figura-comun figcaption {
    flex-basis: auto;
    height: auto;
    overflow: visible;
    width: 100%;
    max-width: 480px;
    margin: .3em auto 0;
}
/* Salto de fila "a mano": un elemento invisible de ancho completo que
   empuja el resto de monedas a la fila siguiente, para los pocos casos
   en que el reparto no debe ser simplemente "4 y las que sobren". */
.hb-galeria-salto { flex-basis: 100%; height: 0; margin: 0; padding: 0; }
@media (max-width: 480px) {
    /* En el móvil se sigue viendo en el mismo reparto por filas, solo
       que más pequeño (el bloque entero se encoge), en vez de una
       imagen debajo de otra. */
    .hb-galeria-conjunto { gap: .4em; padding: .6em; }
    .hb-galeria-conjunto .hb-figura { flex: 0 0 22%; max-width: 22%; }
}
/* Este bloque va DESPUÉS a propósito: .hb-galeria-conjunto-anio también
   lleva la clase .hb-galeria-conjunto, así que sin este orden la regla
   genérica de arriba (22%, pensada para los conjuntos de país) le
   ganaba por ir después, aunque la de abajo sea más específica para
   este caso. */
@media (max-width: 480px) {
    /* Aquí ya no se fija un alto total para toda la tarjeta: las imágenes
       quedan alineadas arriba (ver align-items más arriba) y el texto de
       debajo de cada una ocupa el alto que le haga falta, para que nunca
       se corte una frase a medias. */
    .hb-galeria-conjunto-anio .hb-figura { flex-basis: 30%; max-width: 30%; height: auto; }
    .hb-galeria-conjunto-anio .hb-figura img { max-height: 90px; }
    .hb-galeria-conjunto-anio .hb-figura figcaption { flex-basis: auto; height: auto; overflow: visible; }
    .hb-galeria-conjunto-anio .hb-figura-comun { flex-basis: 100%; max-width: 100%; }
}

/* Etiqueta encima de un grupo de imágenes dentro de una galería
   (p. ej. "Acuñaciones en oro"). */
.hb-galeria-etiqueta {
    font-size: .92rem;
    color: var(--color-verde-oscuro);
    margin: 1.2em 0 .4em;
    text-align: center;
}

/* Enlace de "Más modelos..." que abre la ventana flotante. */
.hb-mas-modelos {
    text-align: right;
    margin: -.6em 0 1.2em;
}
.hb-mas-modelos a { font-size: .85rem; font-style: italic; }

/* Ventana flotante (modal) de "más modelos" */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.6);
    z-index: 300;
    align-items: center;
    justify-content: center;
    padding: 2em;
}
.modal-overlay.abierto { display: flex; }
.modal-caja {
    background: var(--color-superficie);
    border-radius: var(--radio);
    padding: 2.2em 2em 2em;
    max-width: 700px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 10px 40px rgba(0,0,0,.3);
}
.modal-cerrar {
    position: absolute;
    top: .6em;
    right: .9em;
    font-size: 1.6rem;
    line-height: 1;
    color: var(--color-texto-suave);
    text-decoration: none;
}
.modal-cerrar:hover { color: var(--color-error); }

/* Lightbox: ver la imagen del producto en grande, con flechas para
   moverse entre todas las fotos (si hay más de una). */
.lightbox-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.88);
    z-index: 400;
    align-items: center;
    justify-content: center;
}
.lightbox-overlay.abierto { display: flex; }
.lightbox-overlay img {
    max-width: 90vw;
    max-height: 88vh;
    object-fit: contain;
    border-radius: 4px;
}
.lightbox-cerrar {
    position: absolute;
    top: 1em;
    right: 1.2em;
    font-size: 2.2rem;
    line-height: 1;
    color: #fff;
    text-decoration: none;
}
.lightbox-cerrar:hover { color: var(--color-dorado); }
.lightbox-flecha {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 2rem;
    color: #fff;
    text-decoration: none;
    padding: .2em .5em;
    user-select: none;
}
.lightbox-flecha:hover { color: var(--color-dorado); }
.lightbox-flecha-izq { left: 1em; }
.lightbox-flecha-der { right: 1em; }

/* Variante de galería a dos columnas iguales: cada imagen y su texto
   centrados en su propia mitad, en vez de compartir una fila estrecha. */
.hb-galeria-dos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5em 2.5em;
    align-items: start;
}
.hb-galeria-dos .hb-figura { max-width: 100%; }

/* Flecha fija para volver arriba, alojada en el hueco entre el menú
   lateral y el texto. Se queda siempre visible mientras se hace scroll
   por este artículo tan largo. */
.hb-arriba-fijo {
    position: fixed;
    left: calc(20% + 6px);
    bottom: 90px;
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25em;
    text-decoration: none;
    color: var(--color-verde-oscuro);
    font-size: .7rem;
    font-weight: 600;
}
.hb-arriba-flecha {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.hb-arriba-fijo:hover .hb-arriba-flecha { background: var(--color-verde); color: #fff; }

/* Flecha fija para volver al paso anterior (la criba de categorías)
   mientras se ve una lista de productos: se queda siempre visible,
   sin importar el punto de scroll, en el hueco junto al menú lateral. */
.flecha-volver-fija {
    position: fixed;
    left: calc(20% + 6px);
    bottom: 90px;
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25em;
    text-decoration: none;
    color: var(--color-verde-oscuro);
    font-size: .7rem;
    font-weight: 600;
}
.flecha-volver-fija-icono {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.flecha-volver-fija:hover .flecha-volver-fija-icono { background: var(--color-verde); color: #fff; }

/* Pareja anverso/reverso de un mismo billete: las dos imágenes una
   junto a otra, con su etiqueta debajo de cada una, y el texto
   explicativo de la emisión (si lo hay) debajo de las dos, ocupando
   su ancho conjunto. */
.hb-par {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 460px;
}
.hb-par-imagenes {
    display: flex;
    gap: 1.2em;
    justify-content: center;
}
.hb-par-imagenes .hb-figura figcaption { font-weight: 700; text-transform: uppercase; letter-spacing: .03em; font-size: .72rem; }
.hb-par-texto {
    font-size: .82rem;
    color: var(--color-texto-suave);
    text-align: center;
    margin-top: .6em;
}

/* Enlaces desactivados para la cuenta de administrador (Contacto,
   Seguimiento de mi pedido): un administrador no va a enviarse una
   consulta ni a hacerle un seguimiento a un pedido propio. */
.enlace-deshabilitado {
    display: inline-block;
    color: var(--color-texto-suave) !important;
    opacity: .55;
    cursor: not-allowed;
    text-decoration: line-through;
}

/* --- Rejilla de subcategorías (cuando una sección tiene más secciones dentro) --- */
.rejilla-subcategorias {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.8em;
}
.tarjeta-subcategoria {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: .9em;
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    padding: 1.6em 1.2em;
    text-align: center;
    color: var(--color-texto);
    font-weight: 600;
    font-size: 1.05rem;
    flex: 0 1 310px;
    max-width: 310px;
    height: 260px;
    transition: border-color .15s ease, transform .15s ease;
}
.tarjeta-subcategoria:hover {
    border-color: var(--color-verde);
    text-decoration: none;
    transform: translateY(-2px);
}
.tarjeta-subcategoria img {
    width: 100%;
    height: 170px;
    object-fit: contain;
    border-radius: var(--radio);
    background: var(--color-fondo);
}

/* --- Productos --- */
.rejilla-productos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.4em;
}
.tarjeta-producto {
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    padding: 1em;
    display: flex;
    flex-direction: column;
}
.tarjeta-producto img { aspect-ratio: 1/1; object-fit: contain; border-radius: var(--radio); margin-bottom: .8em; background: var(--color-fondo); }
.tarjeta-producto h3 { font-size: 1.05rem; margin-bottom: .3em; }
/* En las tarjetas usadas como accesos del panel (admin/cuenta), el
   botón de acción es un enlace directo (no un formulario, como en las
   tarjetas de producto): lo empujamos al fondo de la tarjeta para que
   quede a la misma altura en todas, tengan más o menos texto encima. */
.tarjeta-producto > .boton { margin-top: auto; }
.tarjeta-producto .precio { font-size: 1.15rem; color: var(--color-acento-oscuro); font-weight: 700; margin: .3em 0 .8em; font-family: var(--fuente-texto); }
.tarjeta-producto .stock-bajo { color: var(--color-error); font-size: .8rem; }

/* --- Tablas (pedidos, admin) --- */
table { width: 100%; border-collapse: collapse; background: var(--color-superficie); }

/* Contenedor con el que tienda.js envuelve cada tabla, para poder
   ponerle encima la flechita de "hay más columnas hacia la derecha"
   (solo llega a notarse cuando la tabla realmente se desplaza, en
   pantallas estrechas — ver @media más abajo). */
.tabla-desplazable { position: relative; }
.aviso-tabla-desplazable {
    display: none;
    position: absolute;
    top: .4em;
    right: .4em;
    width: 1.8em;
    height: 1.8em;
    line-height: 1.8em;
    text-align: center;
    border-radius: 50%;
    background: var(--color-verde-oscuro);
    color: #fff;
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(0,0,0,.25);
    pointer-events: none;
    animation: pulsoAvisoTabla 1.6s ease-in-out infinite;
}
.tabla-con-mas-contenido .aviso-tabla-desplazable { display: block; }
@keyframes pulsoAvisoTabla {
    0%, 100% { transform: translateX(0); opacity: 1; }
    50% { transform: translateX(3px); opacity: .75; }
}
th, td { padding: .7em .8em; border-bottom: 1px solid var(--color-borde); text-align: left; font-size: .92rem; }
th { color: var(--color-texto-suave); font-weight: 600; background: var(--color-borde); border-top: 2px solid #000; border-bottom: 2px solid #000; }

/* Filas de categoría principal (nivel 0) en admin/categorias.php: un
   ligero sombreado para distinguirlas de sus subcategorías. */
tr.fila-categoria-principal { background: var(--color-fondo); }
tr.fila-categoria-principal:hover { background: var(--color-fondo); }

.etiqueta-estado { display: inline-block; padding: .25em .7em; border-radius: 999px; font-size: .78rem; font-weight: 600; }
.estado-pendiente { background: #FCEFD8; color: #8A5A00; }
.estado-pagado { background: #E4EEFB; color: #1D4E89; }
.estado-preparando { background: #EEE7FB; color: #5B2E9C; }
.estado-enviado { background: #DDF0E4; color: #1E6B3C; }
.estado-entregado { background: #D9F0D9; color: #226622; }
.estado-cancelado { background: #FBE3E1; color: var(--color-error); }
.estado-finalizado { background: #D9F0D9; color: #226622; }

/* =====================  RESPONSIVE / MÓVIL  ===================== */
@media (max-width: 900px) {
    /* El botón de las 3 rayas deja de formar parte de la barra que se
       pega arriba del todo al hacer scroll (antes quedaba pegado justo
       al borde superior, y a algunos les resultaba raro); ahora es un
       botón flotante fijo en la pantalla, más o menos donde aparece al
       principio (debajo de la imagen de cabecera), así se puede abrir
       el menú en cualquier momento sin tener que subir del todo. */
    .menu-movil-boton {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 130px;
        left: 12px;
        z-index: 140;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: var(--color-superficie);
        border: 1px solid var(--color-borde);
        box-shadow: 0 2px 8px rgba(0,0,0,.2);
        padding: 0;
    }

    /* Cabecera: el menú y el buscador pasan a ocupar toda la fila cada uno */
    .cabecera-menu, .cabecera-buscador {
        flex: 1 1 100%;
        max-width: 100%;
    }
    .cabecera-menu nav ul { justify-content: center; }
    .cabecera-buscador { order: 3; }

    /* Menú de cabecera en móvil: Inicio y Contactar pasan a ser solo un
       icono (sin texto), y Novedades/Oferta se quitan de aquí (están más
       abajo, en el propio menú lateral deslizante), para que el resto de
       enlaces quepan en una sola fila en vez de partirse en dos líneas. */
    .cabecera-menu .dpto-inicio .texto,
    .cabecera-menu .dpto-contactar .texto { display: none; }
    .cabecera-menu .icono-dpto { display: inline; font-size: 1.1rem; }
    .cabecera-menu .dpto-novedades,
    .cabecera-menu .dpto-oferta { display: none; }

    /* Cuerpo: el menú lateral se convierte en panel deslizante. En móvil
       la cabecera ocupa más alto que en escritorio (el menú y el
       buscador van cada uno en su propia fila), así que aquí no se
       reutiliza --alto-cabecera (calculada para la fila única de
       escritorio): un valor más generoso evita que la parte de arriba
       del panel quede tapada por la cabecera real. El z-index también
       va por encima del de la cabecera (100), para que nunca quede por
       debajo aunque el cálculo de alturas no sea exacto. */
    .menu-lateral {
        position: fixed;
        top: 132px;
        left: 0;
        bottom: 0;
        width: 78vw;
        max-width: 300px;
        height: auto;
        transform: translateX(-100%);
        transition: transform .2s ease;
        z-index: 150;
        box-shadow: 2px 0 12px rgba(0,0,0,.15);
        overflow-y: auto;
    }
    .menu-lateral.abierto { transform: translateX(0); }
    .menu-lateral-extra-movil {
        display: block;
        list-style: none;
        margin: 0 0 1em;
        padding: 0 0 1em;
        border-bottom: 1px solid var(--color-borde);
    }
    .menu-lateral-extra-movil a {
        display: block;
        padding: .5em .6em;
        border-radius: 6px;
        color: var(--color-texto);
        font-weight: 600;
    }
    .menu-lateral-extra-movil a:hover { background: var(--color-fondo); color: var(--color-verde-oscuro); text-decoration: none; }
    .centro { padding: 1.4em 1em 2.4em; }

    /* Portada: en móvil solo se ve una imagen (la central, más pequeña),
       sin las dos laterales, que no caben junto a ella. */
    .carrusel-portada-izquierda, .carrusel-portada-derecha { display: none; }
    .carrusel-portada-centro { width: 260px; height: 180px; }

    /* Libro de "Puede que te interese": la altura estaba fija (340px) sin
       importar el ancho, así que en el móvil (más estrecho) salía
       desproporcionadamente alto. Aquí se reduce a un alto más acorde. */
    .libro-portada { padding: 1em 1.1em; }
    .carrusel-flip, .hoja-libro { height: 230px; }
    .cara-pagina { padding: .7em .5em; }
    .cara-pagina .tarjeta-libro { max-width: 130px; }
    .pie-columnas { gap: 1.6em; }

    /* Tablas (carrito, pedidos, listados de administración...): en vez de
       apretarse o cortarse, se desplazan hacia los lados si hace falta. */
    table { display: block; overflow-x: auto; white-space: nowrap; }
    table th, table td { white-space: nowrap; }

    /* La flecha fija de "Volver" se coloca a partir del 20% del ancho
       del menú lateral de escritorio (left: calc(20% + 6px)), pero en
       el móvil ese menú ya no ocupa espacio en la fila (es un panel
       deslizante aparte), así que caía en mitad del contenido en vez
       de pegada al margen izquierdo real de la pantalla. */
    .flecha-volver-fija { left: 10px; }
    .hb-arriba-fijo { left: 10px; }

    /* Paginación compacta: en el móvil se deja fijo en 25 por página (se
       oculta el selector para ganar espacio) y los controles de abajo se
       quedan solo en una flecha a cada lado con "página/total" en medio,
       en vez del texto completo. */
    .selector-por-pagina { display: none !important; }

    /* Carrito: el campo de cantidad y el botón de actualizar (↻) eran
       demasiado anchos para el hueco que tienen en el móvil, y se
       montaban encima del importe del subtotal de al lado. */
    .campo-cantidad-carrito { width: 42px !important; padding: .35em .3em !important; }
    .fila-cantidad-carrito { gap: .2em !important; }
    .fila-cantidad-carrito .boton-secundario { padding: .35em .5em !important; }

    /* El desplegable de "Historia de..." se abre por defecto desde el
       borde izquierdo del botón hacia la derecha (bien en escritorio,
       donde el botón está a la izquierda de la pantalla); en el móvil
       ese botón puede caer más hacia la derecha, y el desplegable se
       salía de la pantalla. Aquí crece hacia la izquierda en su lugar. */
    .cabecera-menu .submenu { left: auto; right: 0; }

    /* Índice de "Acceso rápido a cada sección" (hbillete/hmoneda/heuro):
       la rejilla fija de 5 columnas no cabía en el móvil y salía toda
       descolocada; aquí pasa a 2 columnas (y a 1 en pantallas muy
       estrechas, ver el otro media query más abajo). */
    .hb-indice { grid-template-columns: repeat(2, 1fr); padding: 1.2em 1em; }
    .controles-paginacion .texto-paginacion { display: none; }
    .controles-paginacion .separador-paginacion-movil { display: inline; }
    .controles-paginacion .boton { padding: .5em .8em; }

    /* Ficha de producto: la imagen y la información pasan a apilarse
       en una sola columna, en vez de ir forzadas una al lado de la
       otra sin caber. */
    .rejilla-ficha-producto { grid-template-columns: 1fr !important; }
}

@media (max-width: 480px) {
    .cabecera-menu nav a { padding: .45em .8em; font-size: .85rem; } /* botones algo más compactos */
    .rejilla-productos { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
    .fila-cp-ciudad { flex-direction: column; gap: 0 !important; }
    .hb-indice { grid-template-columns: 1fr; }
}

/* Aviso visual cuando un campo obligatorio no se ha rellenado/marcado:
   un reborde rojo que se difumina de dentro hacia afuera. */
@keyframes resplandorCampoObligatorio {
    0%   { box-shadow: 0 0 0 3px rgba(179, 38, 30, .65); }
    100% { box-shadow: 0 0 0 16px rgba(179, 38, 30, 0); }
}
.aviso-campo-obligatorio {
    border-radius: 6px;
    animation: resplandorCampoObligatorio 1.2s ease-out;
}

/* =====================  VÍDEO DEL ARTÍCULO (ficha de producto)  =====================
   Con YouTube se ve primero una caja con un botón de reproducir (sin pedir nada
   a YouTube todavía); al pulsarla, tienda/producto.php la sustituye por el
   reproductor. Con un archivo propio se usa la etiqueta <video> normal. */
.video-producto { margin-top: 1.8em; }
.video-producto h2 { font-size: 1.05rem; margin: 0 0 .6em; }
.video-youtube-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .4em;
    width: 100%;
    max-width: 640px;
    aspect-ratio: 16 / 9;
    padding: 1em;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    background: #2b2118;
    color: #fff;
    cursor: pointer;
}
.video-youtube-placeholder:hover { background: #3a2c20; }
.video-youtube-play {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.4rem;
    height: 3.4rem;
    padding-left: .2em; /* el triángulo ▶ se ve descentrado si no */
    border-radius: 50%;
    background: var(--color-acento);
    font-size: 1.5rem;
}
.video-youtube-texto { font-weight: 600; font-size: 1rem; }
.video-youtube-aviso { font-size: .75rem; opacity: .75; text-align: center; }
.video-youtube-marco {
    display: block;
    width: 100%;
    max-width: 640px;
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: var(--radio);
    background: #000;
}
.video-propio {
    display: block;
    width: 100%;
    max-width: 640px;
    border-radius: var(--radio);
    background: #000;
}