/* Generado por scripts/build-css.php desde assets/css/tienda/: no editar, editar los archivos de origen. */

/* ==== 00-tokens.css ==== */
/* Tokens de la tienda: lo que cambia de una tienda a otra vive aquí y se usa con var(). El color de marca ya llega
   como --bs-primary (Brand::cssTema()); los espacios son la escala de Bootstrap (m-*, p-*, g-*), no se duplican. */
:root {
  --tienda-precio: #EC6B18;            /* precio y acentos de oferta */
  --tienda-superficie: #fff;           /* fondo de las tarjetas */
  --tienda-superficie-suave: #f1f3f5;  /* fondo de «sin imagen» */
  --tienda-borde: rgba(33, 37, 41, .12);
  --tienda-radio: .75rem;
  --tienda-sombra: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
  --tienda-sombra-alta: 0 8px 24px rgba(16, 24, 40, .16);
  --tienda-zona-toque: 2.75rem;        /* 44 px: mínimo cómodo para el dedo */
  --tienda-proporcion-img: 1 / 1;
  --tienda-transicion: .18s ease;
  --tienda-pie-fondo: #14171c;         /* pie: fondo neutro oscuro, no depende del color de marca */
  --tienda-pie-texto: #c8ced6;
}

/* ==== 10-tarjeta.css ==== */
/* Tarjeta de producto (mods/mod_ui/tarjeta.php): una sola para todas las páginas y las dos familias.
   Variantes: --compacta (sin «Agregar») y la limpia (sin precio). Todas del mismo alto por fila. */
.tarjeta-prod {
  /* El fondo de la tarjeta es siempre blanco: sus textos no siguen al tema oscuro de la familia limpia. */
  --bs-body-color: #212529;
  --bs-secondary-color: rgba(33, 37, 41, .75);
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--tienda-superficie);
  color: var(--bs-body-color);
  border: 1px solid var(--tienda-borde);
  border-radius: var(--tienda-radio);
  box-shadow: var(--tienda-sombra);
  overflow: hidden;
  transition: box-shadow var(--tienda-transicion), transform var(--tienda-transicion);
}
.tarjeta-prod:hover,
.tarjeta-prod:focus-within {
  box-shadow: var(--tienda-sombra-alta);
  transform: translateY(-2px);
}

.tarjeta-prod__img {
  position: relative;
  aspect-ratio: var(--tienda-proporcion-img);
  background: var(--tienda-superficie);
}
.tarjeta-prod__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: .5rem;
}
.tarjeta-prod--agotado .tarjeta-prod__img img {
  opacity: .45;
  filter: grayscale(.7);
}

/* Sin imagen: un respaldo digno con la misma proporción */
.tarjeta-prod__vacia {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .25rem;
  width: 100%;
  height: 100%;
  background: var(--tienda-superficie-suave);
  color: var(--bs-secondary-color);
  font-size: 2rem;
}
.tarjeta-prod__vacia small {
  font-size: .75rem;
}

.tarjeta-prod__insignias {
  position: absolute;
  top: .5rem;
  left: .5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .25rem;
}

.tarjeta-prod__cuerpo {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: .75rem;
  border-top: 1px solid var(--tienda-borde);
}
.tarjeta-prod__marca {
  min-height: 1.125rem; /* sin marca, el nombre arranca a la misma altura que en las demás */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .75rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--bs-secondary-color);
}
.tarjeta-prod__nombre {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  min-height: 2.6em; /* dos líneas siempre: la fila no se desalinea con nombres cortos */
  margin: .125rem 0 0;
  overflow: hidden;
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.3;
}
.tarjeta-prod__nombre a {
  color: inherit;
  text-decoration: none;
}
.tarjeta-prod__nombre a:hover {
  text-decoration: underline;
}
/* Toda la tarjeta es el enlace (stretched-link); el foco se ve alrededor de la tarjeta entera */
.tarjeta-prod__nombre a:focus-visible {
  outline: none;
}
.tarjeta-prod__nombre a:focus-visible::after {
  outline: 2px solid var(--bs-primary);
  outline-offset: -2px;
  border-radius: var(--tienda-radio);
}

.tarjeta-prod__precio {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 .5rem;
  margin: .5rem 0 .75rem;
}
.tarjeta-prod__ahora {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--tienda-precio);
}
.tarjeta-prod__antes {
  font-size: .8125rem;
  color: var(--bs-secondary-color);
}
.tarjeta-prod__consultar {
  margin: .5rem 0 .75rem;
  font-size: .875rem;
  color: var(--bs-secondary-color);
}

/* El botón queda pegado al fondo: en una fila, todos los «Agregar» a la misma altura */
.tarjeta-prod__agregar {
  position: relative; /* por encima del enlace que cubre la tarjeta */
  z-index: 2;
  min-height: var(--tienda-zona-toque);
  margin-top: auto;
  white-space: nowrap;
}

/* Agotado: ocupa el lugar del botón para que la fila no se desalinee */
.tarjeta-prod__agotado {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tienda-zona-toque);
  margin-top: auto;
  border: 1px dashed var(--tienda-borde);
  border-radius: var(--bs-border-radius);
  font-size: .875rem;
  color: var(--bs-secondary-color);
}

/* Compacta: más pequeña, para listas secundarias (vistos recientemente, relacionados) */
.tarjeta-prod--compacta .tarjeta-prod__cuerpo {
  padding: .5rem;
}
.tarjeta-prod--compacta .tarjeta-prod__nombre {
  font-size: .8125rem;
}
.tarjeta-prod--compacta .tarjeta-prod__ahora {
  font-size: 1.0625rem;
}
.tarjeta-prod--compacta .tarjeta-prod__precio {
  margin-bottom: 0;
}
@media (prefers-reduced-motion: reduce) {
  .tarjeta-prod,
  .tarjeta-prod:hover,
  .tarjeta-prod:focus-within {
    transition: none;
    transform: none;
  }
}

/* ==== 20-seccion.css ==== */
/* Cabecera de sección (título + «Ver todos») y banda de fondo para las secciones del inicio.
   La cuadrícula es la de Bootstrap: 6 columnas en escritorio, 3 en tableta, 2 en teléfono (renderGrillaProductos). */
.seccion__cab {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .25rem 1rem;
  margin-bottom: 1rem;
}
.seccion__titulo {
  margin: 0;
  font-size: clamp(1.25rem, 1.05rem + .8vw, 1.75rem);
  font-weight: 700;
  line-height: 1.2;
}
.seccion__subtitulo {
  flex-basis: 100%;
  margin: 0;
  font-size: .9375rem;
  color: var(--bs-secondary-color);
}
.seccion__ver {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  min-height: var(--tienda-zona-toque);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.seccion__ver:hover {
  text-decoration: underline;
}

/* Banda a todo el ancho: con el color de marca o con fondo oscuro. Las tarjetas conservan su fondo blanco. */
.banda {
  padding: 1.5rem 0;
}
.banda--marca {
  background: var(--bs-primary);
  color: var(--brand-sobre, #fff);
}
.banda--oscura {
  background: var(--bs-dark);
  color: #fff;
}
.banda--marca .seccion__subtitulo,
.banda--oscura .seccion__subtitulo {
  color: inherit;
  opacity: .8;
}
.banda--marca .seccion__ver,
.banda--oscura .seccion__ver {
  color: inherit;
}

/* Sección sobre el fondo de la página (Populares, Nuevos): el aire lo da ella misma, no el contenedor. */
.seccion-inicio {
  padding: 1.5rem 0;
}

/* Franja de confianza: tres avisos cortos en una fila (una columna en teléfono). */
.confianza {
  padding: 2rem 0;
  background: var(--tienda-superficie-suave);
}
.confianza__item {
  display: flex;
  align-items: center;
  gap: .875rem;
  min-height: var(--tienda-zona-toque);
  padding: .875rem 1rem;
  height: 100%;
  background: var(--tienda-superficie);
  border: 1px solid var(--tienda-borde);
  border-radius: var(--tienda-radio);
  color: inherit;
  text-decoration: none;
  transition: box-shadow var(--tienda-transicion), border-color var(--tienda-transicion);
}
.confianza__item:hover,
.confianza__item:focus-visible {
  border-color: var(--bs-primary);
  box-shadow: var(--tienda-sombra);
}
.confianza__icono {
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
  border-radius: 50%;
  background: var(--bs-primary);
  color: var(--brand-sobre, #fff);
}
.confianza__titulo,
.confianza__texto {
  display: block;
}
.confianza__texto {
  font-size: .875rem;
  color: var(--bs-secondary-color);
}

/* ==== 25-banner.css ==== */
/* Banners del inicio (4.1): proporción fija 5:1 como las imágenes que se suben (1500×300), así no salta el contenido al cargar ni cambia
   de alto de un banner a otro. Las flechas van DENTRO del ancho (antes salían 20 px y empujaban la página de lado en el teléfono). */
.banner {
  border-radius: var(--tienda-radio);
  overflow: hidden;
}
.banner__marco {
  aspect-ratio: 5 / 1;
  background: var(--tienda-superficie-suave);
}
.banner .carousel-item,
.banner .carousel-item > a {
  display: block;
  height: 100%;
}
.banner__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.banner .carousel-control-prev,
.banner .carousel-control-next {
  top: 50%;
  bottom: auto;
  width: 2.25rem;
  height: 2.25rem;
  margin: 0 .5rem;
  padding: 0;
  transform: translateY(-50%);
  opacity: 1;
  border-radius: 50%;
  background: rgba(0, 0, 0, .55);
  box-shadow: none;
}
.banner .carousel-control-prev {
  left: 0;
  right: auto;
}
.banner .carousel-control-next {
  right: 0;
  left: auto;
}
.banner .carousel-control-prev:hover,
.banner .carousel-control-next:hover,
.banner .carousel-control-prev:focus-visible,
.banner .carousel-control-next:focus-visible {
  background: rgba(0, 0, 0, .8);
}
.banner .carousel-control-prev i,
.banner .carousel-control-next i {
  font-size: .875rem;
  color: #fff;
}
.banner .carousel-indicators {
  margin-bottom: .25rem;
}
@media (max-width: 575.98px) {
  .banner .carousel-control-prev,
  .banner .carousel-control-next {
    width: 1.75rem;
    height: 1.75rem;
    margin: 0 .25rem;
  }
  .banner .carousel-indicators {
    display: none;
  }
}

/* ==== 30-encabezado.css ==== */
/* Encabezado (barra de Viernes Negro, fila principal y menú) y los dos paneles laterales (menú y mini-carrito).
   El color sale del tema: --bs-primary de fondo y --brand-sobre (texto legible sobre él, lo calcula Brand::cssTema).
   Los botones se tiñen con el propio color del texto (color-mix), así se leen con cualquier color de marca.
   Móvil (< 768): menú · logo · cuenta · carrito y el buscador debajo a todo el ancho. Desde 768: logo · buscador · cuenta · carrito. */
.cab__bf {
  background: #000;
  text-align: center;
}
.cab__bf a {
  display: block;
  padding: .5rem 1rem;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}
.cab__bf a:hover {
  text-decoration: underline;
}

.cab__principal {
  background: var(--bs-primary);
  color: var(--brand-sobre, #fff);
}
.cab__rejilla {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "menu logo acciones" "buscar buscar buscar";
  align-items: center;
  gap: .5rem .75rem;
  padding-block: .75rem;
}
@media (min-width: 768px) {
  .cab__rejilla {
    grid-template-areas: "logo buscar acciones";
    gap: 1rem 1.5rem;
    padding-block: 1rem;
  }
}
.cab__menu { grid-area: menu; }
.cab__logo {
  grid-area: logo;
  display: inline-flex;
  align-items: center;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}
.cab__logo img {
  max-width: min(100%, 11rem);
  object-fit: contain;
}
.cab__logo .brand-texto {
  font-size: 1.375rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cab__buscar { grid-area: buscar; }
.cab__buscar .form-control {
  min-height: var(--tienda-zona-toque);
  border-radius: var(--tienda-radio) 0 0 var(--tienda-radio);
}
.cab__buscar .btn {
  min-width: var(--tienda-zona-toque);
  border-radius: 0 var(--tienda-radio) var(--tienda-radio) 0;
}
.cab__acciones {
  grid-area: acciones;
  display: flex;
  align-items: center;
  gap: .5rem;
}

/* Botón del encabezado: transparente, teñido con el color del texto. */
.cab__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-width: var(--tienda-zona-toque);
  min-height: var(--tienda-zona-toque);
  padding: 0 .75rem;
  border: 0;
  border-radius: var(--tienda-radio);
  background: color-mix(in srgb, currentColor 14%, transparent);
  color: inherit;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--tienda-transicion);
}
.cab__btn:hover,
.cab__btn:focus,
.cab__btn.show {
  background: color-mix(in srgb, currentColor 26%, transparent);
  color: inherit;
}
.cab__btn:focus-visible,
.cab__enlace:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
.cab__nombre {
  max-width: 9rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Menú (desde 768): la fila de enlaces bajo la principal. */
.cab__nav {
  border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  background: var(--bs-primary);
  color: var(--brand-sobre, #fff);
}
.cab__nav-lista {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 .25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cab__enlace {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: var(--tienda-zona-toque);
  padding: 0 .85rem;
  border: 0;
  border-bottom: 3px solid transparent;
  background: none;
  color: inherit;
  font-weight: 500;
  text-decoration: none;
}
.cab__enlace:hover,
.cab__enlace:focus {
  border-bottom-color: currentColor;
  color: inherit;
}
.cab__enlace--bf {
  min-height: auto;
  margin-inline: .25rem;
  padding: .3rem .85rem;
  border: 0;
  border-radius: 999px;
  background: #000;
  color: #fff;
}
.cab__enlace--bf:hover,
.cab__enlace--bf:focus {
  color: #fff;
  background: #212529;
}
.cab__tel {
  margin-left: auto;
}
.cab__tel + .cab__tel {
  margin-left: 0;
}

/* Panel de categorías y mini-carrito: mismo borde, sombra y alto de fila que el resto de la tienda. */
.offcanvas {
  --bs-offcanvas-border-color: var(--tienda-borde);
  --bs-offcanvas-box-shadow: var(--tienda-sombra-alta);
}
.offcanvas-title {
  font-size: 1.125rem;
  font-weight: 700;
}
.offcanvas .list-group-item {
  padding-block: 0;
}
.panel-enlace {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  min-height: var(--tienda-zona-toque);
  color: var(--bs-body-color);
  text-decoration: none;
}
.panel-enlace:hover,
.panel-enlace:focus {
  color: var(--bs-primary);
}
.panel-titulo {
  padding: 1rem 1rem .5rem;
  color: var(--bs-secondary-color);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* Familia limpia: sólo el logo, sobre fondo oscuro. */
.cab-limpia {
  padding-block: .75rem;
  border-bottom: 1px solid rgb(255 255 255 / .12);
  background: var(--tienda-pie-fondo);
  margin-bottom: 1rem;
}

/* ==== 40-pie.css ==== */
/* «Vistos recientemente» y pie. El pie es oscuro y neutro (tokens --tienda-pie-*): no depende del color de marca. */
.vistos {
  padding: 1.5rem 0;
  background: var(--tienda-superficie-suave);
}
/* Teléfono: sólo los 4 más recientes (dos filas de dos); desde 576 caben los 6 en filas completas. */
@media (max-width: 575.98px) {
  .vistos__lista .row > :nth-child(n+5) {
    display: none;
  }
}

.pie {
  background: var(--tienda-pie-fondo);
  color: var(--tienda-pie-texto);
  padding-top: 2.5rem;
}
.pie a {
  color: inherit;
  text-decoration: none;
}
.pie a:hover,
.pie a:focus {
  color: #fff;
  text-decoration: underline;
}
.pie__logo {
  display: inline-block;
  margin-bottom: 1rem;
}
.pie__logo:hover {
  text-decoration: none;
}
.pie__titulo {
  margin-bottom: .75rem;
  color: #fff;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.pie__lista {
  margin: 0;
}
.pie__lista li {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  padding: .25rem 0;
  overflow-wrap: anywhere;
}
.pie__lista li > a {
  display: inline-flex;
  align-items: baseline;
  gap: .5rem;
  min-height: 1.75rem;
}
.pie__redes {
  display: flex;
  gap: .5rem;
  margin: 0;
}
.pie__redes a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tienda-zona-toque);
  height: var(--tienda-zona-toque);
  border-radius: 50%;
  background: rgb(255 255 255 / .1);
  color: #fff;
  font-size: 1.25rem;
  transition: background var(--tienda-transicion);
}
.pie__redes a:hover,
.pie__redes a:focus {
  background: rgb(255 255 255 / .22);
  text-decoration: none;
}
.pie__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .25rem 1.25rem;
  margin-top: 2rem;
  padding: 1.25rem 0;
  border-top: 1px solid rgb(255 255 255 / .12);
  text-align: center;
}
.pie__version {
  padding: .1rem .5rem;
  border-radius: 999px;
  background: rgb(255 255 255 / .12);
}

/* Familia limpia: sólo la línea de derechos. */
.pie--minimo {
  margin-top: 2rem;
  padding-top: 0;
}
.pie--minimo .pie__legal {
  margin-top: 0;
  border-top: 0;
}

/* ==== 50-listado.css ==== */
/* Listados del catálogo (mods/mod_ui/listado.php): categoría, marca, búsqueda, nuevos y Viernes Negro, en las dos familias.
   Cabecera con migas, barra de cantidad + filtro + orden, losetas de categoría y de marca, paginación y estado vacío. */
.listado {
  padding: 1rem 0;
}

/* — Cabecera — */
.listado__cab {
  margin-bottom: 1rem;
}
.listado__migas {
  margin-bottom: .5rem;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  font-size: .875rem;
  flex-wrap: wrap;
}
.listado__titulo {
  display: flex;
  align-items: center;
  gap: .75rem;
}
.listado__titulo h1 {
  margin: 0;
  font-size: clamp(1.375rem, 1.1rem + 1.1vw, 2rem);
  font-weight: 700;
  line-height: 1.2;
}
.listado__logo {
  flex: none;
  width: 3.5rem;
  height: 3.5rem;
  object-fit: contain;
  padding: .25rem;
  background: var(--tienda-superficie);
  border: 1px solid var(--tienda-borde);
  border-radius: var(--tienda-radio);
}
.listado__descripcion {
  max-width: 60rem;
  margin-top: .5rem;
  color: var(--bs-secondary-color);
}

/* — Barra: cuántos hay, filtro de marca y orden. Siempre sobre fondo claro, también sobre la banda oscura — */
.listado__barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 1rem;
  margin-bottom: 1rem;
  padding: .625rem .875rem;
  background: var(--tienda-superficie);
  color: #212529;
  border: 1px solid var(--tienda-borde);
  border-radius: var(--tienda-radio);
}
.listado__cuenta {
  margin: 0;
}
.listado__filtros {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1rem;
}
.listado__campo {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0;
}
.listado__campo span {
  font-size: .875rem;
  color: #6c757d;
}
.listado__campo .form-select {
  width: auto;
  min-width: 9rem;
  max-width: 100%;
}
@media (max-width: 575.98px) {
  /* En teléfono: la cantidad arriba y los dos menús repartidos en una fila */
  .listado__filtros,
  .listado__campo {
    flex: 1 1 100%;
  }
  .listado__campo {
    flex: 1 1 0;
    flex-direction: column;
    align-items: stretch;
    gap: .125rem;
  }
  .listado__campo .form-select {
    width: 100%;
    min-width: 0;
  }
}

/* — Pie del listado: la paginación — */
.listado__pie {
  margin-top: 1.5rem;
}
/* Los números llevan su propio fondo claro: se leen igual sobre la banda oscura y en el tema oscuro de la familia limpia. */
.listado__paginas {
  --bs-pagination-bg: #fff;
  --bs-pagination-color: #212529;
  --bs-pagination-border-color: #dee2e6;
  --bs-pagination-hover-bg: #e9ecef;
  --bs-pagination-hover-color: #212529;
  --bs-pagination-hover-border-color: #dee2e6;
  --bs-pagination-focus-bg: #e9ecef;
  --bs-pagination-focus-color: #212529;
  --bs-pagination-active-bg: var(--bs-primary);
  --bs-pagination-active-color: var(--brand-sobre, #fff);
  --bs-pagination-active-border-color: var(--bs-primary);
  --bs-pagination-disabled-bg: #f1f3f5;
  --bs-pagination-disabled-color: #adb5bd;
  --bs-pagination-disabled-border-color: #dee2e6;
}
.listado__paginas .page-link {
  min-width: var(--tienda-zona-toque);
  min-height: var(--tienda-zona-toque);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* — Estado vacío — */
.listado__vacio {
  padding: 2.5rem 1rem;
  text-align: center;
  background: var(--tienda-superficie);
  color: #212529;
  border: 1px dashed var(--tienda-borde);
  border-radius: var(--tienda-radio);
}
.listado__vacio-icono {
  display: block;
  margin-bottom: .75rem;
  font-size: 2.25rem;
  color: #adb5bd;
}

/* — Losetas de categoría y de marca — */
.listado__losetas {
  margin-bottom: 1.5rem;
}
.loseta {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: #212529;
  text-decoration: none;
  background: var(--tienda-superficie);
  border: 1px solid var(--tienda-borde);
  border-radius: var(--tienda-radio);
  box-shadow: var(--tienda-sombra);
  overflow: hidden;
  transition: box-shadow var(--tienda-transicion), transform var(--tienda-transicion), border-color var(--tienda-transicion);
}
a.loseta:hover,
a.loseta:focus-visible {
  color: #212529;
  border-color: var(--bs-primary);
  box-shadow: var(--tienda-sombra-alta);
  transform: translateY(-2px);
}
.loseta__img {
  aspect-ratio: 16 / 10;
  background: var(--tienda-superficie-suave);
}
.loseta__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.loseta--marca .loseta__img {
  background: var(--tienda-superficie);
}
.loseta--marca .loseta__img img {
  object-fit: contain;
  padding: .75rem;
}
.loseta__vacia {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 2rem;
  color: #adb5bd;
}
.loseta__nombre {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  padding: .625rem .5rem;
  font-weight: 600;
  font-size: .9375rem;
  line-height: 1.25;
  text-align: center;
}

/* — Categorías: círculos compactos (no se parecen a una tarjeta de producto, y caben muchas) — */
.listado__circulos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
  gap: 1rem .75rem;
}
@media (min-width: 768px) {
  .listado__circulos {
    grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
    gap: 1.25rem 1rem;
  }
}
.loseta--categoria {
  align-items: center;
  height: auto;
  color: var(--bs-body-color);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}
a.loseta--categoria:hover,
a.loseta--categoria:focus-visible {
  color: var(--bs-body-color);
  box-shadow: none;
  transform: none;
}
.loseta--categoria .loseta__img {
  width: 100%;
  max-width: 7.5rem;
  aspect-ratio: 1 / 1;
  background: var(--tienda-superficie-suave);
  border: 1px solid var(--tienda-borde);
  border-radius: 50%;
  box-shadow: var(--tienda-sombra);
  overflow: hidden;
  transition: box-shadow var(--tienda-transicion), transform var(--tienda-transicion), border-color var(--tienda-transicion);
}
a.loseta--categoria:hover .loseta__img,
a.loseta--categoria:focus-visible .loseta__img {
  border-color: var(--bs-primary);
  box-shadow: var(--tienda-sombra-alta);
  transform: translateY(-2px);
}
a.loseta--categoria:focus-visible {
  outline: 0;
}
a.loseta--categoria:focus-visible .loseta__img {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
}
.loseta--foto-producto .loseta__img {
  background: #fff;
}
.loseta--foto-producto .loseta__img img {
  object-fit: contain;
  padding: .625rem;
}
.loseta--categoria .loseta__nombre {
  flex: 0 0 auto;
  padding: .5rem .125rem 0;
  font-size: .875rem;
}

/* — Sobre una banda oscura (Viernes Negro): textos y migas claros; la barra y las tarjetas conservan su fondo blanco — */
.banda--oscura .listado {
  padding-top: 0;
}
.banda--oscura .listado__migas,
.banda--oscura .listado__migas .breadcrumb-item.active,
.banda--oscura .listado__migas .breadcrumb-item + .breadcrumb-item::before {
  color: rgba(255, 255, 255, .75);
}
.banda--oscura .listado__migas a {
  color: #fff;
}
.banda--oscura .listado__descripcion {
  color: rgba(255, 255, 255, .8);
}
.listado__vacio-texto {
  color: #6c757d;
}

/* Los menús de la barra también se quedan claros en el tema oscuro (la barra es siempre blanca). */
.listado__barra .form-select {
  --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-color: #fff;
  color: #212529;
  border-color: #ced4da;
}