:root {
    /* Paleta Thesauros: negro, papel y hueso. Un solo acento: el negro. */
    --ink: #23231F;
    /* texto principal */
    --muted: #6E6A63;
    /* texto secundario */
    --brand: #111110;
    /* marca y acento (botones, links, precios) */
    --brand-hover: #333330;
    --paper: #FAF7F3;
    /* fondo de página */
    --bone: #EFE7DD;
    /* bandas y superficies fuertes */
    --border: #E3DAD0;
    /* bordes y separadores */
    --border-strong: #C7B8A4;
    /* hairline marcado: la cabecera al quedar pegada */
    --plum: #6A2338;
    /* vino del hero (base del velo y fondo de los slides sin foto) y color de
       resaltado puntual: con él se marca todo lo del carrito. */
    --error: #A63A2B;
    --ok: #3E6B4C;
    --warn: #8A6420;
}

/* Firefox de Android infla el texto de las páginas anchas y Chrome no, así que el
   mismo diseño se veía de dos tamaños según el navegador. Esto apaga la inflación:
   los dos quedan en el tamaño que dice la hoja. */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}


/* Los <a> sueltos heredaban el azul de MDB y no tenían peso propio. Ahora toman
   el color del contexto (tinta en el cuerpo, blanco en el hero, apagado donde el
   contexto es apagado) y se distinguen por PESO, no por color ni subrayado. */
a {
    color: inherit;
    text-decoration: none;
    font-weight: 500;
}

/* El título del libro dentro de la tarjeta conserva su peso: es contenido. */
.card-title a {
    font-weight: inherit;
}

/* En hover el peso NO cambia (eso movería el texto): el feedback es el subrayado,
   que tampoco afecta el flujo. */
a:hover {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

/* Enlace de texto con el vino de la marca. El sitio distingue los enlaces por
   peso, no por color: esta variante es para una mención suelta dentro de una
   bajada, donde el peso solo no avisa que hay un destino. */
.link-plum,
.link-plum:hover,
.link-plum:focus {
    color: var(--plum);
}

.nav-link:hover,
.page-link:hover,
/* El navbar, los controles y el interruptor ARS/USD no son enlaces de texto: al
   pasar el mouse no se subrayan. */
.navbar a:hover,
.navbar a:focus,
button:hover,
select:hover,
.form-control:hover,
.form-select:hover,
.moneda-switch-opcion:hover,
.moneda-switch-opcion:focus {
    text-decoration: none !important;
}

.btn-link {
    color: var(--brand);
}

.btn-link:hover {
    color: var(--brand);
}

.text-palesilver {
    color: var(--muted)
}

.bg-black {
    background-color: var(--brand);
}

.bg-bone {
    background-color: var(--bone);
}

/* MDB tiene el gris como token (`--mdb-gray-200`) pero no trae la utilidad
   `.bg-gray-200`: por eso el nombre no hacía nada. Se define acá con su token. */
.bg-gray-200 {
    background-color: var(--mdb-gray-200);
}

.bg-brand {
    background-color: var(--brand);
}

.bg-plum {
    background-color: var(--plum) !important;
}

.bg-paper {
    background-color: var(--paper);
}

/* Los espaciadores de Bootstrap llegan hasta `*-5` (3rem) y el pie necesita un paso
   más para no quedar pegado al contenido. Se agrega el 6 siguiendo la proporción de
   la escala —1, 1,5, 3…— en vez de un margen suelto por plantilla. */
.mt-6 {
    margin-top: 4.5rem;
}

/* Remapea las utilidades de color de MDB a la paleta, así las plantillas que ya
   las usan quedan dentro sin tocarlas. Llevan !important porque las utilidades
   de color de Bootstrap lo traen puesto. */
.bg-light {
    background-color: var(--paper) !important;
}

.text-muted {
    color: var(--muted) !important;
}

.text-dark {
    color: var(--ink) !important;
}

.border-palesilver {
    border-color: var(--border);
}

.navbar-paper {
    background-color: var(--paper);
    border-bottom: 1px solid var(--border);
    /* MDB le pone una sombra por defecto a .navbar. Acá la jerarquía la da el
       hairline, no la sombra. */
    box-shadow: none;
}

/* La cabecera acompaña el scroll en todas las pantallas. No lleva sombra: cuando
   queda pegada, se marca con un hairline un poco más firme, que es el recurso del
   sitio. */
.cabecera-sitio {
    position: sticky;
    top: 0;
    z-index: 1030;
}

.cabecera-sitio .navbar-paper {
    transition: border-bottom-color 0.2s ease;
}

.cabecera-sitio.cabecera-pegada .navbar-paper {
    border-bottom-color: var(--border-strong);
}

/* El alto real lo escribe cabecera.js: cambia entre pantallas y cuando se abre el
   buscador. Sin esto las anclas quedarían tapadas por la cabecera. */
html {
    scroll-padding-top: var(--alto-cabecera, 68px);
}

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

/* El logo es blanco (se hizo para la barra negra). Sobre papel se lleva a negro
   hasta que exista la versión oscura. */
.navbar-brand img {
    filter: brightness(0);
}

/* El selector de moneda no usa la clase .nav-link, así que tomaba el azul por
   defecto de MDB. */
.navbar .dropdown-toggle {
    color: var(--ink);
    font-size: 15px;
}

/* Paginador: cajas con hairline, en gris de dato y la página actual en negro. */
.pagination {
    gap: 4px;
    margin: 2.5rem 0 0;
}

.pagination .page-link {
    color: var(--muted);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 0;
    min-width: 36px;
    text-align: center;
}

.pagination .page-link:hover {
    color: var(--ink);
    background: var(--bone);
    border-color: var(--border);
}

.pagination .page-item.active .page-link {
    color: #fff;
    background: var(--brand);
    border-color: var(--brand);
    /* MDB le pone la misma sombra que a los botones: las superficies van planas. */
    box-shadow: none;
}

.pagination .page-item.disabled .page-link {
    color: var(--muted);
    background: transparent;
    border-color: var(--border);
    opacity: 0.5;
}

.navbar .nav-item .nav-link {
    color: var(--ink);
    font-weight: 500;
    font-size: 15px;
}

.navbar .navbar-toggler {
    color: var(--ink);
}

/* En pantallas grandes el buscador va centrado en la barra. Para que el centro
   sea el de la barra y no el que dejan la marca y los iconos —que miden
   distinto—, los dos laterales se reparten el mismo ancho: así el del medio cae
   justo en el medio, sin importar cuánto ocupen. */
@media (min-width: 992px) {
    .navbar-buscador > .container > .navbar-brand,
    .navbar-buscador > .container > .cuenta-bolsa {
        flex: 1 1 0;
        min-width: 0;
    }

    /* Bootstrap le pone 1rem de margen derecho a la marca; sumado al bloque de
       iconos, que no lo tiene, corría el buscador del centro. */
    .navbar-buscador > .container > .navbar-brand {
        margin-right: 0;
    }

    .navbar-buscador > .container > .cuenta-bolsa {
        justify-content: flex-end;
    }

    .navbar-buscador > .container > .navbar-collapse {
        flex: 0 0 auto;
        width: min(440px, 44vw);
    }

    .navbar-buscador .buscador-form {
        width: 100%;
    }
}

/* La marca y los iconos tienen que entrar en la misma línea. En un teléfono de
   ~354px de ancho (el caso típico: 1080px físicos con densidad 3) la barra no
   entra: la marca —que es ancha, 404×47— más los iconos son 338px y hay 330. Se
   parte en dos líneas en cualquier navegador, no solo en Firefox. Se achica el
   logo y se acorta la separación en pantallas chicas para que entre con aire
   (284 contra 330). El del pie se achica igual, para que los dos midan lo mismo.
   Además la marca pierde su margen derecho (1rem que Bootstrap le deja en
   mobile y en escritorio ya era 0): no hace falta para separarla de los iconos
   —los empuja el `ms-auto`— y son los 16px que hacen entrar el interruptor de
   moneda compacto. */
@media (max-width: 575.98px) {
    .navbar-buscador > .container > .navbar-brand {
        margin-right: 0;
    }

    .navbar-buscador > .container > .navbar-brand img {
        height: 20px;
    }

    .navbar .cuenta-bolsa {
        gap: 1rem;
    }
}

/* En mobile la franja del pie muestra solo los logos fijos: las tarjetas de
   Mercado Pago no entran y se esconden. Todo va más junto y centrado, y el
   copyright baja a su propia línea, también centrado. */
@media (max-width: 575.98px) {
    .footer-strip .payment-logo {
        display: none;
    }

    .footer-strip ul.payment-methods {
        justify-content: center;
        gap: 0.4rem;
    }

    .footer-strip .footer-legal {
        flex-basis: 100%;
        text-align: center;
    }
}

/* La lupa del navbar mobile: sólo el ícono, sin el borde que traía el botón de
   menú de Bootstrap. */
.buscador-toggle {
    background: none;
    border: 0;
    padding: 0;
    color: var(--ink);
    font-size: 1.25rem;
    line-height: 1;
}

/* Cuenta, bolsa y lupa: separación pareja entre los tres y el mismo tamaño de
   ícono. Antes el link de Bootstrap traía padding propio y márgenes sueltos,
   así que en mobile quedaban lejos entre sí y más chicos que la lupa. */
.cuenta-bolsa {
    gap: 1.35rem;
}

.navbar .nav-icono {
    padding: 0;
}

.navbar .nav-icono i {
    font-size: 1.25rem;
    line-height: 1;
}

/* Selector de moneda: dos pastillas, la activa rellena con el color del borde
   —`--border`— y el texto oscuro: en negro pesaba más que los iconos que tiene al
   lado. El hover del otro lado queda un escalón más claro (`--bone`), así que se
   distingue de la activa. Vive solo en la navbar; en la ficha y en el flujo de
   compra la moneda se muestra con el equivalente «≈». En la navbar mobile se usa la
   variante de una sola pastilla (`.moneda-switch-solo`). */
.moneda-switch {
    display: inline-flex;
    border: 1px solid var(--border);
    border-radius: 999px;
    overflow: hidden;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    line-height: 1;
    vertical-align: middle;
}

.moneda-switch-opcion {
    padding: 4px 10px;
    color: var(--muted);
    transition: background-color 0.2s ease, color 0.2s ease;
}

.moneda-switch-opcion.active {
    background: var(--border);
    color: var(--ink);
}

a.moneda-switch-opcion:hover {
    background: var(--bone);
    color: var(--ink);
}

/* Variante de la navbar mobile: una sola pastilla con la moneda a la que se
   cambia. Sin fondo "activa" porque no hay estado que mostrar, sólo la acción;
   se mantiene chica a propósito para que entre junto al logo en un teléfono
   angosto (en 354px hay ~62px de aire y esta pastilla mide ~40 con su
   separación). */
.moneda-switch-solo {
    padding: 4px 6px;
    color: var(--muted);
    transition: background-color 0.2s ease, color 0.2s ease;
}

.moneda-switch-solo:hover,
.moneda-switch-solo:focus {
    background: var(--bone);
    color: var(--ink);
}

/* Franja de medios de pago de Mercado Pago: los trae el servidor y los pinta el
   navegador en cada `.payment-methods` (el pie y el bloque de MP en el pago). */
.payment-methods {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 0.75rem 0 0;
}

/* Bajo el botón de pago los logos van chicos: el mismo alto que en la franja
   del pie. */
.payment-methods img {
    display: block;
    height: 18px;
    width: auto;
}

.border-dotted {
    border-bottom: 1px dotted;
    padding-bottom: .10rem !important;
}

.accordion-button,
.accordion-button:not(.collapsed) {
    background-color: inherit;
    font-weight: 500;
    font-size: 1.2rem;
}

.accordion-button:not(.collapsed) {
    color: var(--mdb-body-color);
}

.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%234f4f4f'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 01.708 0L8 10.293l5.646-5.647a.5.5 0 01.708.708l-6 6a.5.5 0 01-.708 0l-6-6a.5.5 0 010-.708z'/%3E%3C/svg%3E");
    transform: rotate(-180deg)
}

/* Buscador: una sola pieza. El borde vive en el `input-group` —no en el campo—
   así el icono de la lupa queda adentro del mismo contorno, con las esquinas
   apenas redondeadas. El hairline es el de la paleta (`--border`), no la tinta
   del navbar. En focus pasa a tinta, así que "se enciende" cuando lo vas a usar. */
.buscador-form .input-group {
    background-color: #fff;
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
}

#search {
    border: 0;
    border-radius: 0;
    background-color: transparent;
}

.buscador-form .input-group:focus-within {
    border-color: var(--brand);
    box-shadow: inset 0 0 0 1px var(--brand);
}

#search-addon,
#search-addon .bi {
    color: var(--ink);
}

/* El placeholder del buscador va un escalón más chico que el texto del campo. */
#search::placeholder {
    font-size: 13px;
}

/* Bootstrap/MDB dibujan un halo en el campo al enfocar. Acá el foco lo marca el
   contorno del grupo. */
input#search:focus {
    box-shadow: none;
}

.form-control:focus~.form-label {
    color: var(--mdb-dark) !important;
}

.form-control:focus~.form-notch div {
    border-color: var(--mdb-dark) !important;
}

.form-select:focus~.form-label {
    color: var(--mdb-dark) !important;
}

.form-select:focus {
    border-color: var(--mdb-dark) !important;
    box-shadow: inset 0 0 0 1px var(--mdb-color-dark) !important;
}

.disabled {
    opacity: .45;
}

.form-switch .form-check-input:checked[type="checkbox"]::after {
    background-color: var(--mdb-dark) !important;
}

.form-check-input[type="checkbox"]:checked {
    background-color: var(--mdb-dark) !important;
}

.form-check-input[type="checkbox"]:checked:focus {
    background-color: var(--mdb-dark) !important;
}
/* 
.carousel-control-prev,
.carousel-control-next {
    background-color: #e1e1e1;
    width: 6vh;
    height: 6vh;
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
} */

.img-tapa {
    aspect-ratio: 12 / 16;
    object-fit: contain;
    /* La tapa entra con un fade corto al terminar de cargar (la clase la pone
       imagenes.js). Sin JS no se oculta nada: la imagen se ve igual, sin fade. */
    transition: opacity 0.2s ease;
}

/* Mientras la tapa todavía no llegó, la caja se ve en el neutro de la paleta en
   vez de blanco. El fondo va en el contenedor: si fuera en la imagen, el fade lo
   apagaría junto con la tapa. */
.card .bg-image {
    background: var(--bone);
}

/* Mientras la tapa todavía no llegó, el navegador escribe el texto del `alt` en el
   hueco. Se lo deja transparente para que no se lea un título suelto: la imagen en
   sí NO se oculta, así las que ya están en caché aparecen al instante. Si la imagen
   falla (o el usuario tiene las imágenes apagadas), `imagenes.js` agrega
   `img-tapa-error` y el texto vuelve a verse. Sin JS (no está `html.js`) no se
   esconde nada. */
.js .img-tapa {
    color: transparent;
}

.js .img-tapa.img-tapa-error {
    color: var(--muted);
}

.img-tapa-cargando {
    opacity: 0;
}

/* MDB deja `transition: all .3s linear` en las imágenes de `.hover-zoom` (el zoom
   del hover), y esa regla le gana a `.img-tapa`. Se conserva ese efecto y se fija
   el fade de la tapa en 0.2s: la entrada de `opacity` pisa la de `all`. */
.hover-zoom img.img-tapa {
    transition: all 0.3s linear, opacity 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
    .img-tapa {
        transition: none;
    }
}

.card-img,
.card-img-top {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.card .bg-image {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* La tarjeta se apoya en una línea de 1px, no en una sombra difusa: el sistema es
   plano (§8) y un degradé sobre el papel ensucia. La línea va en negro al 6%, que
   es el mismo peso que los separadores de adentro (ver `.card-footer`), así que
   ninguna de las dos manda sobre la otra. */
.card {
    border-radius: 0;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}

.bg-white-25 {
    background-color: rgba(255,255,255,0.20) !important;
}

/* --- Tipografía: EB Garamond para títulos y contenido, Montserrat para el dato --- */
body {
    font-family: "Montserrat", sans-serif;
    color: var(--ink);
}

h1,
h2,
h3,
h4 {
    font-family: "EB Garamond", serif;
    font-weight: 500;
    letter-spacing: -0.01em;
    text-transform: none;
}

h1 {
    font-size: 40px;
    line-height: 1.15;
}

h2 {
    font-size: 26px;
    line-height: 1.25;
}

h3 {
    font-size: 19px;
    line-height: 1.3;
}

h4 {
    font-size: 17px;
    line-height: 1.35;
}

/* Hero: el carousel es la única parte del sitio con h1 pelado, y el h1 del sitio
   (40px) está pensado para una columna de texto, no para un cartel sobre la foto.
   El h5 y el h6 de MDB (20 y 16) acompañan más chicos. */
.carousel h1 {
    font-size: 32px;
}

.carousel h5 {
    font-size: 17px;
}

.carousel h6 {
    font-size: 14px;
}

/* Bajada de cada slide: el texto que va debajo del título (un `p` o el `h5` de
   «Compramos»). Un punto más de peso para que no se lea como relleno. */
.carousel h1 + p,
.carousel h1 + h5 {
    font-weight: 500;
}

/* Título de sección: sentence case y sin fw-lighter. El logo es lo único que va en
   mayúsculas sostenidas; el uppercase queda para kickers y labels. */
.section-title {
    font-family: "EB Garamond", serif;
    font-weight: 500;
    font-size: 26px;
    line-height: 1.25;
    letter-spacing: -0.01em;
    text-transform: none;
}

/* Título de página: serif, en caja baja y sin línea abajo. */
.page-title {
    font-family: "EB Garamond", serif;
    font-weight: 500;
    font-size: 30px;
    line-height: 1.2;
    letter-spacing: -0.01em;
    text-transform: none;
}

/* Título de portada: la home abre con el título más grande del sitio, un paso
   arriba del `.page-title` (30px). */
.page-title--xl {
    font-size: 36px;
    line-height: 1.15;
}

@media (max-width: 575.98px) {
    .page-title--xl {
        font-size: 30px;
    }
}

/* Separador de sección: una línea de 1px que se difumina en las puntas y no
   cruza todo el ancho. Marca el corte entre una cabecera y su contenido sin
   dibujar una caja. Va como `hr` pelado en la plantilla. */
.separador-suave {
    width: 100%;
    max-width: 20rem;
    height: 1px;
    margin: 1.5rem auto 2rem;
    border: 0;
    /* Bootstrap pinta el `hr` con `background-color: currentColor` y opacidad
       .25. Si se deja ese fondo, la tinta se ve a través del degradé y la línea
       sale oscura. */
    background-color: transparent;
    opacity: 1;
    background-image: linear-gradient(to right,
        rgba(199, 184, 164, 0), rgba(199, 184, 164, .55), rgba(199, 184, 164, 0));
}

/* En mobile el ancho útil es corto y el texto de la bajada ocupa casi todo:
   la línea se acorta, se aclara y el aire se reparte parejo (16px arriba y
   abajo, contra los 24/40 que dejaba la medida de escritorio). */
@media (max-width: 575.98px) {
    .separador-suave {
        max-width: 10rem;
        margin: 1rem auto 1.5rem;
        opacity: .7;
    }
}

/* Los títulos largos reparten las palabras entre sus líneas en vez de dejar una
   sola colgando al final. Solo en títulos: `balance` tiene tope de líneas y en
   párrafos largos no aplica. */
.page-title,
.section-title,
h1 {
    text-wrap: balance;
}

/* --- Tarjeta de libro: el contenido manda --- */
.card-title {
    font-family: "EB Garamond", serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 1.25;
    letter-spacing: -0.01em;
    margin-bottom: 6px;
}

/* Título y autores de la tarjeta: dos líneas y, si no entra, puntos suspensivos.
   Sin esto un título largo estira la tarjeta y desalinea la grilla. */
.clamp-2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

/* El autor es información que importa: 14px, no 12. Va en el párrafo y no en el
   link para que los separadores “·” midan lo mismo que los nombres. */
.card-subtitle {
    font-size: 14px;
}

/* Estado del ejemplar: usa el `progress` de Bootstrap con un segmento por peldaño
   de la escala, el que le corresponde a este ejemplar en tinta y el resto en el
   hairline. Las etiquetas van debajo, alineadas con los segmentos. */
.estado-escala {
    height: 6px;
    gap: 4px;
    background: transparent;
    border-radius: 0;
}

.estado-escala .progress-bar {
    flex-grow: 1;
    background: var(--border);
}

.estado-escala .progress-bar.activo {
    background: var(--ink);
}

.estado-etiquetas {
    display: flex;
    gap: 4px;
    font-size: 12px;
    color: var(--muted);
}

.estado-etiquetas span {
    flex: 1;
    text-align: center;
}

/* La etiqueta activa se distingue por color, no por peso: 600 no es un peso
   cargado de Montserrat (la familia trae 400, 500 y 700), así que el navegador
   lo resolvía con el más cercano. 500 sí existe. */
.estado-etiquetas .activo {
    color: var(--ink);
    font-weight: 500;
}

/* Sticky de la ficha. En md la foto va al lado del texto y es la más baja, así
   que se clava mientras el texto scrollea. La info y la compra recién desde lg:
   en md comparten la misma columna (la compra va justo debajo de la info), y
   dos sticky en la misma columna se superpondrían. */
@media (min-width: 768px) {
    .ficha-foto-col {
        position: sticky;
        top: calc(var(--alto-cabecera, 68px) + 1rem);
        align-self: flex-start;
    }
}

@media (min-width: 992px) {
    .ficha-info-col,
    .ficha-precio-col {
        position: sticky;
        top: calc(var(--alto-cabecera, 68px) + 1rem);
        align-self: flex-start;
    }
}

/* La nota del ejemplar: la salvedad puntual, al final del box. La franja se
   separa con un hairline, sin fondo propio ni sombra. */
.estado-nota {
    border-top: 1px solid var(--border);
    margin-top: 1rem;
    padding-top: 0.75rem;
    font-size: 13px;
    color: var(--ink);
}

/* Bloque de envío del detalle: la caja de compra es angosta (col-lg-3, unos
   273px) y a 14px el texto se parte en demasiadas líneas. Va un escalón abajo,
   como las leyendas del botón de pago. */
.detalle-envio {
    font-size: 12px;
}

/* El precio es dato: pesa por peso, nunca por tamaño. */
.card-price {
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: var(--ink);
}

/* El pie de la tarjeta lleva precio y acción. El paso de cantidad es más ancho que
   el botón redondo, así que en pantallas muy chicas se acomoda en dos líneas en vez
   de desbordar. */
.card-footer > div {
    flex-wrap: wrap;
    row-gap: 6px;
}

/* El borde superior del pie viene de Bootstrap en negro al 12,5%: sobre el blanco
   se lee como un corte y pesa más que la línea que apoya la tarjeta. Se baja al 6%,
   el mismo tono que esa línea de apoyo, para que el separador y el apoyo tengan el
   mismo peso. */
.card-footer {
    border-top-color: rgba(0, 0, 0, 0.06);
}

/* Las cifras de dinero se leen mejor con figuras de ancho fijo: los dígitos caen
   en la misma columna y el total no "baila" al recalcularse (carrito, envíos).
   Montserrat trae figuras proporcionales por defecto, así que esto sí cambia. */
.card-price,
.precio_unitario,
.precio_total,
#cart_total_products,
#subtotal_general,
#total_general,
#costo_envio,
[itemprop="price"],
.table {
    font-variant-numeric: tabular-nums;
}

/* El equivalente en la otra moneda: en la ficha va al lado del precio, y en el
   Resumen de la bolsa y del checkout debajo del subtotal (o del total), alineado
   con él y pegado: la fila de arriba pierde su margen para que se lean juntos.
   Es una conversión por cotización y no un precio fijado, así que va más chico
   que el precio (`small` no alcanza en la ficha: cuelga del `fs-4`) y apagado; el
   «≈» ya lo dice sin necesidad de explicarlo. `line-height` corto por lo mismo:
   con el 1.6 heredado la caja de línea medía 25,6px para un texto de 11px y
   separaba las dos líneas solo. Sin corte entre el signo y la cifra: la columna
   del precio de la ficha es angosta y "≈ USD" solo en un renglón no se entiende. */
.precio-equivalente {
    font-size: 0.6875rem;
    line-height: 1.2;
    color: var(--muted);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Cuotas de la ficha: van en el vino del resaltado y en 500, para acompañar al
   precio sin competir con él. */
.precio-cuotas {
    color: var(--plum);
}

.precio-cuotas strong {
    font-weight: 500;
}

/* El mínimo de compra va debajo y más chico: es la condición, no el beneficio. */
.precio-cuotas-minimo {
    display: block;
    font-size: .85em;
    font-weight: 400;
    opacity: .8;
}

/* El enlace a las condiciones tiene que parecer texto, no un botón. */
.precio-cuotas-link {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    text-decoration: underline;
    cursor: pointer;
}

/* --- Footer --- */
/* Links del pie: lista limpia, un renglón por link. */
.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li + li {
    margin-top: 0.35rem;
}

/* Redes del pie: un círculo del color de la franja de abajo —`--border`— con el
   ícono oscuro adentro. Antes eran más grandes y en `--muted` con el ícono blanco,
   así que pesaban más que los datos de contacto que tienen al lado. */
.footer-social-links {
    display: flex;
    gap: 10px;
    margin-top: 12px;
}

.footer-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: var(--border);
    border: 0;
    border-radius: 50%;
    color: var(--ink);
    font-size: 14px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.footer-social:hover,
.footer-social:focus {
    background: var(--bone);
    color: var(--ink);
    text-decoration: none;
}

/* Franja fina al pie del footer: pago, envíos y legal. El fondo y los hairlines
   van en la banda entera; adentro van solo los iconos. */
.footer-strip {
    background: var(--border);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.footer-strip .payment-methods {
    margin: 0;
    gap: 0.75rem;
}

/* Toda la franja va en un tono sepia, del aire del fondo: a todo color los logos
   se comen el resto. */
.footer-strip .payment-methods img {
    height: 18px;
    width: auto;
    filter: grayscale(1) sepia(0.5);
}

/* Las tarjetas venían con un fondito blanco para despegarlas de la banda; con el
   sepia ya no hace falta. */
.footer-strip .payment-logo {
    background: transparent;
    padding: 2px 4px;
    line-height: 0;
}

.footer-legal {
    font-size: 13px;
    color: var(--muted);
}

/* El footer baja un escalón tipográfico: los datos de contacto van en 14px.
   Estaban en 16, el mismo cuerpo que el contenido de la página, así que no
   había jerarquía. */
footer {
    font-size: 14px;
}

/* Kicker / label: el único lugar donde vive el uppercase, además del logotipo. */
.kicker {
    font-family: "Montserrat", sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
}

/* Remapea los estados de MDB a la paleta (el verde y el rojo de fábrica son
   fríos y no pertenecen a este sistema). */
.text-success {
    color: var(--ok) !important;
}

.text-danger {
    color: var(--error) !important;
}

/* Los fondos de estado (los badges de "mis compras"), por el mismo motivo: el
   ámbar y el rojo de fábrica no son de la paleta. */
.bg-success {
    background-color: var(--ok) !important;
}

.bg-warning {
    background-color: var(--warn) !important;
}

.bg-danger {
    background-color: var(--error) !important;
}

/* Las alertas de estado (avisos de pago, mensajes de Django) también van a la
   paleta: texto del color del estado, fondo apenas teñido y borde del mismo
   tono. El tinte se arma con `color-mix` sobre el papel, así sigue al token si
   el color cambia. */
.alert-success {
    color: var(--ok);
    background-color: color-mix(in srgb, var(--ok) 8%, var(--paper));
    border-color: color-mix(in srgb, var(--ok) 30%, var(--paper));
}

.alert-warning {
    color: var(--warn);
    background-color: color-mix(in srgb, var(--warn) 8%, var(--paper));
    border-color: color-mix(in srgb, var(--warn) 30%, var(--paper));
}

.alert-danger {
    color: var(--error);
    background-color: color-mix(in srgb, var(--error) 8%, var(--paper));
    border-color: color-mix(in srgb, var(--error) 30%, var(--paper));
}


/* Los mensajes sin estado explícito salen como `alert-dark`: quedan en los
   neutros de la paleta. */
.alert-dark {
    color: var(--ink);
    background-color: var(--bone);
    border-color: var(--border);
}

/* Cada filtro es un desplegable en mobile y md: el encabezado abre y cierra el
   panel, y encabezado y panel son la misma caja blanca, así el panel se lee como
   parte del desplegable y no como otra superficie. En lg el encabezado queda
   como rótulo y el panel siempre abierto: la sidebar de antes. */
.filtro-desplegable {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 0.25rem;
    margin-bottom: 12px;
}

.filtro-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 10px 12px;
    background: transparent;
    border: 0;
    color: var(--ink);
    font-family: "Montserrat", sans-serif;
    font-size: 13px;
    font-weight: 600;
    text-align: left;
}

.filtro-toggle:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

.filtro-toggle i {
    color: var(--muted);
    transition: transform 0.2s ease;
}

/* La flecha gira cuando el panel está abierto: Bootstrap actualiza
   `aria-expanded` en el botón. */
.filtro-toggle[aria-expanded="true"] i {
    transform: rotate(180deg);
}

.filtro-panel {
    padding: 12px;
    border-top: 1px solid var(--border);
}

/* Desde lg el desplegable desaparece: se abre el panel, el encabezado pasa a
   rótulo y la caja se vuelve transparente. */
@media (min-width: 992px) {
    .filtro-desplegable {
        background: transparent;
        border: 0;
        border-top: 1px solid var(--border);
        border-radius: 0;
        padding-top: 12px;
        margin-bottom: 18px;
    }

    .filtro-toggle {
        padding: 0 0 8px;
        pointer-events: none;
        font-size: 11px;
        font-weight: 500;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--muted);
    }

    .filtro-toggle i {
        display: none;
    }

    .filtro-panel {
        padding: 0;
        border-top: 0;
    }
}

/* Opciones marcadas: badges con una cruz, a la vista aunque el desplegable esté
   cerrado. Llevan el mismo hairline de arriba que separa un grupo de filtros del
   siguiente, así el bloque se lee como una sección aparte. */
.filtros-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    border-top: 1px solid var(--border);
    padding: 12px 0 0;
    margin: 0 0 12px;
}

.filtro-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 0.25rem;
    color: var(--ink);
    font-size: 13px;
    transition: border-color 0.2s ease;
}

.filtro-badge i {
    color: var(--muted);
}

.filtro-badge:hover {
    border-color: var(--muted);
    text-decoration: none;
}

.filtros-opcion {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding-left: 0;
    margin-bottom: 2px;
}

.filtros-opcion .form-check-input {
    float: none;
    margin: 2px 0 0;
    flex: 0 0 auto;
}

.filtros-opcion .form-check-label {
    padding-left: 0;
    min-width: 0;
    font-size: 13px;
    cursor: pointer;
}

.filtros-num {
    color: var(--muted);
    font-size: 12px;
    white-space: nowrap;
}

.filtros-limpiar {
    display: inline-block;
    margin-top: 4px;
    font-size: 13px;
    color: var(--muted);
}

/* Los boxes de la ficha (foto, título, datos, estado y compra) llevan `.card` por la
   superficie: blanco, esquinas rectas y la misma línea de apoyo que el resto de las
   tarjetas. Pero `.card` es flex y estos boxes se diseñaron en bloque; en flex, el
   bloque de estado + precio mide 8px más y empuja el botón de compra. Con `block`
   el reparto interno queda igual que antes de llevar la clase. */
.caja-ficha {
    display: block;
}

/* El autor es dato: va en sans. En el detalle un escalón más grande que en la
   tarjeta (14px), porque es la primera línea de la ficha. */
.book-author {
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.4;
    color: var(--muted);
}

/* Los datos de la ficha (encuadernación, páginas, idioma, sello…) van un escalón
   abajo del subtítulo: son dato, no contenido. */
.book-data p {
    font-size: 14px;
    line-height: 1.5;
}

/* Botón flotante de WhatsApp, abajo a la derecha. */
.whatsapp-fab {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1030;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    font-size: 23px;
    line-height: 1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    transition: background-color 0.2s ease, color 0.2s ease;
}

.whatsapp-fab:hover {
    background: #1ebe5b;
    color: #fff;
}

/* Aviso de "agregado a la bolsa": arriba a la derecha, justo debajo de la
   cabecera (que es sticky) y al lado del ícono de la bolsa. Usa el vino del
   carrito para atarse a él; flota, así que lleva sombra como el FAB. */
.aviso-bolsa {
    position: fixed;
    top: calc(var(--alto-cabecera, 68px) + 12px);
    right: 20px;
    z-index: 1045;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    max-width: min(380px, calc(100vw - 40px));
    padding: 10px 12px;
    background: var(--plum);
    border-radius: 0.25rem;
    box-shadow: 0 6px 20px rgba(106, 35, 56, 0.28);
    color: #fff;
    font-family: "Montserrat", sans-serif;
    font-size: 13px;
    line-height: 1.3;
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.aviso-bolsa.aviso-visible {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

/* El mismo cartel sirve para el camino inverso: al quitar cambia el texto y pasa a
   negro, para que no se lea como un alta. */
.aviso-bolsa.aviso-quitar {
    background: var(--ink);
    box-shadow: 0 6px 20px rgba(35, 35, 31, 0.28);
}

/* Miniatura de la tapa: chica y con la proporción de siempre. */
.aviso-bolsa .aviso-tapa {
    flex: 0 0 auto;
    width: 40px;
    aspect-ratio: 12 / 16;
    object-fit: cover;
    border-radius: 2px;
}

.aviso-bolsa .aviso-datos {
    flex: 1 1 auto;
    min-width: 0; /* deja truncar el título a dos líneas */
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.aviso-bolsa .aviso-titulo {
    font-weight: 600;
}

.aviso-bolsa .aviso-libro {
    color: rgba(255, 255, 255, 0.85);
}

.aviso-bolsa .aviso-pie {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.aviso-bolsa .aviso-precio {
    font-variant-numeric: tabular-nums;
}

.aviso-bolsa .aviso-ir {
    white-space: nowrap;
    color: #fff;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

/* La cruz: sobre el vino va blanca. */
.aviso-bolsa .aviso-cerrar {
    flex: 0 0 auto;
    margin: 0;
}

/* El contador de la bolsa late cuando cambia: confirma sin hacer ruido. */
@keyframes pulso-bolsa {
    0%,
    100% {
        transform: scale(1);
    }
    40% {
        transform: scale(1.5);
    }
}

.items_quantity.pulso {
    animation: pulso-bolsa 0.45s ease;
}

@media (prefers-reduced-motion: reduce) {
    .aviso-bolsa {
        transition: none;
    }
    .items_quantity.pulso {
        animation: none;
    }
}

/* La fila que se saca de la bolsa se desvanece y se colapsa antes de irse, así no
   desaparece de golpe. `bolsa.html` le fija el alto de partida antes de agregar la
   clase; por eso el `max-height: 0` va con `!important` (tiene que ganarle al
   estilo en línea). */
.item-saliendo {
    overflow: hidden;
    opacity: 0;
    transform: translateX(12px);
    max-height: 0 !important;
    margin-bottom: 0 !important;
    transition: opacity 0.28s ease, transform 0.28s ease,
                max-height 0.28s ease, margin-bottom 0.28s ease;
}

@media (prefers-reduced-motion: reduce) {
    .item-saliendo {
        transition: none;
    }
}

/* Migas de pan: mismo estilo y misma separación en todo el sitio. */
.crumbs {
    font-family: "Montserrat", sans-serif;
    font-size: 14px;
    color: var(--muted);
}

.crumbs .crumbs-sep {
    margin: 0 0.35em;
    color: var(--muted);
}

/* Stepper del checkout: número + etiqueta en una línea. Reemplaza al breadcrumb en
   bolsa, envío y pago: son tres pasos lineales, y así se ve dónde está el comprador
   y cuánto le falta. */
.pasos-compra ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pasos-compra li {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--muted);
}

/* La línea fina que une un paso con el siguiente. */
.pasos-compra li + li::before {
    content: "";
    width: 1.25rem;
    height: 1px;
    margin-right: 0.1rem;
    background: var(--border);
}

.pasos-compra .paso-numero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: 1px solid var(--border-strong);
    border-radius: 50%;
    font-family: "Montserrat", sans-serif;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
}

.pasos-compra .paso-label {
    font-family: "Montserrat", sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* Los pasos ya recorridos se pueden tocar; el que falta, no. */
.pasos-compra a {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: inherit;
}

.pasos-compra a:hover {
    text-decoration: none;
}

.pasos-compra .completado {
    color: var(--ink);
}

.pasos-compra .completado .paso-numero {
    border-color: var(--ink);
    color: var(--ink);
}

/* Los pasos ya hechos muestran un check; al pasar el mouse vuelve el número, que
   es lo que anticipa a dónde lleva el clic. */
.pasos-compra .completado .paso-numero {
    font-size: 0;
}

.pasos-compra .completado .paso-numero::before {
    content: "✓";
    font-size: 11px;
    line-height: 1;
}

.pasos-compra .completado:hover .paso-numero {
    font-size: 11px;
}

.pasos-compra .completado:hover .paso-numero::before {
    content: none;
}

.pasos-compra .actual {
    color: var(--ink);
}

.pasos-compra .actual .paso-numero {
    border-color: var(--brand);
    background: var(--brand);
    color: #fff;
}

/* Checkout: los datos del envío van como resumen en texto y «Editar» abre los
   campos. La alternancia se resuelve por CSS para que sin JS la página siga siendo
   el formulario de siempre: el resumen y el botón se dibujan solo con JS, y los
   campos solo se esconden con JS. El servidor pone `datos-abierto` cuando no hay
   nada que resumir, cuando hay errores o cuando falta el destino. */
.datos-checkout .resumen,
.datos-checkout .boton-editar {
    display: none;
}

/* En el resumen, el marco lo pone la card de datos: el formulario no dibuja caja
   propia para no anidar dos. El formulario es `.card` y los campos van en un
   `card-body`, así el padding sale de Bootstrap y no de un valor suelto. */
html.js .datos-checkout:not(.datos-abierto) {
    background-color: transparent;
}

/* El resumen es una card: el cuerpo lleva los datos y el pie, los botones. */
html.js .datos-checkout .resumen {
    display: flex;
}

html.js .datos-checkout .boton-editar {
    display: inline-block;
}

html.js .datos-checkout .campos {
    display: none;
}

/* Cerrado, los botones viven en el pie de la card; al abrir la edición pasan al
   pie del formulario, que sin JS es el único que existe. */
html.js .datos-checkout:not(.datos-abierto) .acciones-campos {
    display: none;
}

html.js .datos-checkout.datos-abierto .resumen,
html.js .datos-checkout.datos-abierto .boton-editar {
    display: none;
}

html.js .datos-checkout.datos-abierto .campos {
    display: block;
}

/* La última miga es el título del libro, así que puede ser larguísima: se recorta
   con puntos suspensivos. El texto no sale del DOM —los lectores de pantalla y el
   buscador lo leen entero— y el `title` lo muestra al pasar el mouse. */
.crumbs-actual {
    display: inline-block;
    max-width: min(100%, 40ch);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

/* Encabezado de subgrupo dentro de un filtro (hoy, el tema de los subtemas). */
.filtros-subgrupo {
    margin: 12px 0 4px;
    font-size: 12px;
    font-weight: 500;
    color: var(--muted);
}

/* Cajita para formularios cortos: superficie blanca y ancho acotado, para que el
   formulario no se estire de lado a lado. */
.form-box {
    background: #fff;
    padding: 1.75rem;
    max-width: 520px;
}

/* La caja de ingreso lleva más ancho: adentro va el aviso de "Revisá tu correo",
   que nombra la dirección, y dos acciones en la misma fila. A 520px el texto se
   parte en cuatro renglones y los botones quedan apretados. */
.form-box-ancho {
    max-width: 640px;
}

/* Los campos de la cajita siguen el sistema: cuadrados, hairline y foco en tinta
   (los widgets de Django vienen pelados y tomaban el foco azul del navegador). */
.form-box input,
.form-box select,
.form-box textarea {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 0;
    background: #fff;
    color: var(--ink);
    font-family: "Montserrat", sans-serif;
    font-size: 15px;
}

.form-box input:focus,
.form-box select:focus,
.form-box textarea:focus {
    border-color: var(--brand);
    outline: none;
    box-shadow: inset 0 0 0 1px var(--brand);
}

/* Botones: un solo estilo de acción. Redondeados (salvo los flotantes, que son
   redondos), en el negro de la marca y sin subrayado al pasar. MDB les pone una
   sombra propia —y la agranda al pasar y al enfocar— que acá se apaga: las
   superficies van planas y la jerarquía la dan el blanco y los hairlines. También
   se le saca el uppercase y se lo lleva a 600. */
.btn {
    border-radius: 0.25rem;
    text-decoration: none !important;
    box-shadow: none;
    text-transform: none;
    font-weight: 600;
    /* No depender del .btn de la CDN de MDB: transición explícita del proyecto. */
    transition: color 0.2s ease, background-color 0.2s ease,
        border-color 0.2s ease, box-shadow 0.2s ease;
}

.btn:hover,
.btn:focus,
.btn:active {
    text-decoration: none !important;
    box-shadow: none;
}

/* Al apagar las sombras se apaga también el halo que MDB usaba como foco. Se
   devuelve un indicador propio, y solo para el teclado. */
.btn:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

.btn-floating {
    border-radius: 50%;
}

.btn-dark {
    background-color: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

.btn-dark:hover,
.btn-dark:focus {
    background-color: var(--brand-hover);
    border-color: var(--brand-hover);
    color: #fff;
}

/* Botón secundario: la superficie hueso sobre papel. Acompaña a la acción
   principal —el negro de la marca— sin competirle. */
.btn-secondary {
    background-color: var(--bone);
    border-color: var(--bone);
    color: var(--ink);
}

.btn-secondary:hover,
.btn-secondary:focus {
    background-color: var(--border);
    border-color: var(--border);
    color: var(--ink);
}

/* Botones outline del hero: al pasar el mouse y al presionar quedan blancos y
   la letra toma el vino del hero, en vez del negro que pone Bootstrap. */
.btn-outline-light:hover,
.btn-outline-light:focus,
.btn-outline-light:active {
    background-color: #fff;
    border-color: #fff;
    color: var(--plum);
}

/* Botón "ya está en la bolsa": usa el vino del carrito. En reposo muestra el
   check; al pasar el mouse (o al enfocar con el teclado) avisa que el clic quita. */
.btn-plum {
    background-color: var(--plum);
    border-color: var(--plum);
    color: #fff;
}

.btn-plum:hover,
.btn-plum:focus,
.btn-plum:active {
    background-color: #541B2B;
    border-color: #541B2B;
    color: #fff;
}

/* Botones con dos caras: en reposo una cosa y al pasar el mouse (o al enfocar con
   el teclado) otra. Los dos íconos van siempre en el HTML y el CSS elige.
   Agregar: bolsa → +.  Quitar: check → cruz. */
.boton-agregar .icono-hover,
.boton-quitar .icono-hover {
    display: none;
}

.boton-agregar:hover .icono-reposo,
.boton-agregar:focus-visible .icono-reposo,
.boton-quitar:hover .icono-reposo,
.boton-quitar:focus-visible .icono-reposo {
    display: none;
}

.boton-agregar:hover .icono-hover,
.boton-agregar:focus-visible .icono-hover,
.boton-quitar:hover .icono-hover,
.boton-quitar:focus-visible .icono-hover {
    display: inline-block;
}

/* En la ficha el botón de quitar lleva texto: el ícono necesita aire antes. */
.boton-quitar:not(.btn-floating) > i {
    margin-right: 0.5rem;
}

/* Paso de cantidad (− n +): reemplaza al botón cuando el libro tiene más de un
   ejemplar, así se suma y se resta sin pasar por la bolsa. Mismo alto que el botón
   flotante de la tarjeta; en la ficha ocupa el ancho del botón que reemplaza. */
.paso-bolsa {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    height: 29px;
    padding: 0 4px;
    background: var(--plum);
    border-radius: 999px;
    color: #fff;
    font-family: "Montserrat", sans-serif;
}

.paso-bolsa form {
    display: flex;
    margin: 0;
}

.paso-bolsa-signo {
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}

.paso-bolsa-signo:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.2);
}

/* En la bolsa el paso va sin el relleno de vino, así que el hover blanco no se
   vería: ahí el signo se marca con un gris apenas oscuro. */
.paso-bolsa.bg-transparent .paso-bolsa-signo:hover:not(:disabled) {
    background: rgba(35, 35, 31, 0.08);
}

.paso-bolsa-signo:disabled {
    opacity: 0.4;
    cursor: default;
}

.paso-bolsa-signo:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 1px;
}

.paso-bolsa-cantidad {
    min-width: 15px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.ficha-precio-col .paso-bolsa {
    display: flex;
    width: 100%;
    height: 48px;
    justify-content: space-between;
    padding: 0 8px;
}

.ficha-precio-col .paso-bolsa-signo {
    width: 32px;
    height: 32px;
    font-size: 18px;
}

.ficha-precio-col .paso-bolsa-cantidad {
    font-size: 16px;
}

/* Cajita para el contenido de las páginas de texto o tablas. */
.content-box {
    background: #fff;
    padding: 1.75rem;
    max-width: 900px;
}

/* La tabla de envíos necesita más ancho que un bloque de texto: los 900px del
   `content-box` son para que las líneas largas se lean, no para una tabla. */
.content-box-ancha {
    max-width: none;
}