/* ============================================================
   Probar Distribuciones — Tienda pública
   ============================================================

   Se carga DESPUÉS de style-cliente-ui.css y reutiliza sus tokens
   (--probar-*, --ink-*, --radius-*, --shadow-*, --t-*) y sus componentes
   (.product-card, .qty-stepper, .empty-state, .pill). Acá solo va lo que la
   tienda tiene y el portal no: la navegación horizontal, el hero, el pie y
   el mapa.

   No se toca style-cliente-ui.css: cualquier cambio ahí afecta al portal
   que ya está en producción.
   ============================================================ */

/* ------------------------------------------------------------
   Paleta y tipografía de la tienda

   Los tokens se redefinen acotados a `.shop-shell`, no en `:root`. Así los
   componentes compartidos (.product-card, .pill, .qty-stepper) adoptan este
   aspecto dentro de la tienda y el portal de clientes, que usa la misma hoja,
   queda exactamente como está.

   Respecto del diseño de referencia se conserva el celeste de la marca como
   color de acción: cambiarlo no sería migrar estilos sino cambiar la marca, y
   el isologo es celeste. Lo que sí se toma son los neutros —verdosos y
   cálidos en lugar de azulados—, los radios, el tratamiento de las tarjetas y
   la tipografía de títulos.
   ------------------------------------------------------------ */
.shop-shell {
  /* Neutros cálidos con dejo verde */
  --bg-app:       #EDF1EE;
  --bg-surface:   #FCFEFC;
  --bg-surface-2: #E9EEEA;
  --bg-elevated:  #FCFEFC;
  --border:       #DAE0DC;
  --border-strong:#C4CCC7;
  --text:         #161C19;
  --text-soft:    #636B66;
  --text-muted:   #7A827E;

  /* Base oscura del hero y de los bloques a contraluz */
  --tienda-oscuro:   #111814;
  --tienda-oscuro-2: #212924;
  --tienda-sobre-oscuro: #B7C0BB;
  --tienda-claro:    #F2F6F3;
  --tienda-vivo:     #54BF5C;

  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;

  --font-display: 'Familjen Grotesk', 'Plus Jakarta Sans', system-ui, sans-serif;

  --bs-body-bg: var(--bg-app);
  --bs-body-color: var(--text);
  --bs-border-color: var(--border);
}

[data-theme="dark"] .shop-shell {
  /* El diseño de referencia no tiene modo oscuro; se deriva de su misma
     familia verde-neutra para no perder la función que el portal ya ofrece. */
  --bg-app:       #0E1411;
  --bg-surface:   #161D19;
  --bg-surface-2: #1E2621;
  --bg-elevated:  #1E2621;
  --border:       #2A332D;
  --border-strong:#3A443E;
  --text:         #F2F6F3;
  --text-soft:    #B7C0BB;
  --text-muted:   #8C958F;

  --tienda-oscuro:   #0B100D;
  --tienda-oscuro-2: #1A221D;
}

/* Títulos con la tipografía display: el salto de tamaño y el interletrado
   cerrado es lo que más distingue al diseño de referencia. */
.shop-shell h1,
.shop-shell h2,
.shop-shell h3,
.shop-shell .fuente-display {
  font-family: var(--font-display);
  letter-spacing: -0.025em;
}

.shop-shell code,
.shop-shell .mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ------------------------------------------------------------
   Estructura
   ------------------------------------------------------------ */
.shop-shell {
  display: flex;
  flex-direction: column;
  background: var(--bg-app);
  color: var(--text);
  font-family: var(--font-sans);
  --alto-barra: 62px;
}

/* El contenido ocupa al menos una pantalla, así el pie queda siempre por
   debajo del pliegue y aparece recién cuando la persona baja. Antes el
   esquema era el de "pie pegajoso" (min-height en el contenedor + margin-top
   auto en el pie): en una pantalla con poco contenido —el carrito vacío, el
   contacto, el ingreso— el pie quedaba clavado al borde inferior ocupando un
   tercio de la vista, compitiendo con lo que la persona fue a hacer. */
.shop-main {
  flex: 1 0 auto;
  min-height: calc(100vh - var(--alto-barra));
  min-height: calc(100svh - var(--alto-barra));
  padding-block: 1.5rem 2.5rem;
}

/* ------------------------------------------------------------
   Barra de anuncio
   ------------------------------------------------------------ */
.shop-announce {
  background: var(--probar-700);
  color: #fff;
  text-align: center;
  font-size: .82rem;
  font-weight: 500;
  padding: .5rem 1rem;
}

/* ------------------------------------------------------------
   Navegación
   ------------------------------------------------------------ */
.shop-navbar {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-xs);
}

.shop-navbar__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: .7rem 16px;
  display: grid;
  /* Marca | buscador | navegación | acciones. Con grid el buscador ocupa el
     espacio sobrante sin que la marca y las acciones se peleen por un
     margin auto, que era lo que descolocaba la barra. */
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 1rem;
}

.shop-brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  color: var(--text);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.shop-brand img { height: 36px; width: auto; }

.shop-search {
  position: relative;
  min-width: 0;
}

.shop-search i {
  position: absolute;
  left: .85rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
  font-size: .95rem;
}

.shop-search input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg-surface-2);
  color: var(--text);
  padding: .55rem 1rem .55rem 2.4rem;
  font-size: .9rem;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}

.shop-search input::placeholder { color: var(--text-muted); }

.shop-search input:focus {
  outline: none;
  background: var(--bg-surface);
  border-color: var(--primary);
  box-shadow: var(--ring);
}

.shop-nav {
  display: flex;
  gap: 1.35rem;
  white-space: nowrap;
}

.shop-nav a {
  color: var(--text-soft);
  text-decoration: none;
  font-weight: 600;
  font-size: .9rem;
  padding: .3rem 0;
  border-bottom: 2px solid transparent;
  transition: color var(--t-fast), border-color var(--t-fast);
}

.shop-nav a:hover,
.shop-nav a.is-active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

.shop-actions {
  display: flex;
  align-items: center;
  gap: .25rem;
}

.shop-icon-btn {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-soft);
  font-size: 1.15rem;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}

.shop-icon-btn:hover {
  background: var(--bg-surface-2);
  color: var(--primary);
}

.shop-cart { position: relative; }

.shop-cart__badge {
  position: absolute;
  top: 1px;
  right: 1px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: var(--radius-pill);
  background: var(--danger);
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--bg-surface);
}

/* Categorías, con scroll horizontal en teléfonos */
.shop-catnav {
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
}

.shop-catnav::-webkit-scrollbar { display: none; }

.shop-catnav__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: .5rem 16px;
  display: flex;
  gap: .5rem;
  white-space: nowrap;
}

.shop-catnav a {
  flex-shrink: 0;
  padding: .3rem .8rem;
  border-radius: var(--radius-pill);
  background: var(--bg-surface-2);
  color: var(--text-soft);
  text-decoration: none;
  font-size: .85rem;
  font-weight: 500;
  transition: background var(--t-fast), color var(--t-fast);
}

.shop-catnav a:hover,
.shop-catnav a.is-active {
  background: var(--primary);
  color: var(--text-on-primary);
}

/* ------------------------------------------------------------
   Portada
   ------------------------------------------------------------ */
.shop-hero {
  position: relative;
  background: var(--tienda-oscuro);
  color: var(--tienda-claro);
  overflow: hidden;
}

/* Dos columnas: el texto respira a la izquierda y la foto del depósito ocupa
   la derecha. Una foto real del local dice más de lo que puede decir
   cualquier degradado. */
.shop-hero__inner {
  max-width: 1320px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  min-height: min(76vh, 620px);
}

.shop-hero__texto {
  flex: 1 1 460px;
  padding: 3.75rem 1.25rem 3.5rem;
}

.shop-hero__foto {
  flex: 1 1 420px;
  min-width: 300px;
  align-self: stretch;
  display: flex;
  padding: 1.5rem 1.25rem 1.5rem 0;
}

.shop-hero__foto > div {
  flex: 1;
  position: relative;
  border-radius: var(--radius-xl);
  min-height: 380px;
  overflow: hidden;
  background: var(--tienda-oscuro-2);
}

.shop-hero__foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
}

/* Velo de abajo hacia arriba: deja ver la góndola y mantiene legible lo que
   se apoya encima. */
.shop-hero__foto div::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(17, 24, 20, .88) 0%,
    rgba(17, 24, 20, .25) 55%,
    rgba(17, 24, 20, .05) 100%
  );
}

/* Dato en vivo: para una distribuidora cuyo argumento es "los precios salen
   del sistema", decirlo con la hora es la señal de confianza más fuerte. */
.shop-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .375rem .75rem .375rem .625rem;
  border-radius: var(--radius-pill);
  background: var(--tienda-oscuro-2);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tienda-sobre-oscuro);
}

.shop-hero__eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--tienda-vivo);
  flex-shrink: 0;
}

.shop-hero h1 {
  font-size: clamp(2.6rem, 6vw, 5.25rem);
  line-height: .95;
  letter-spacing: -0.042em;
  font-weight: 700;
  margin: 1.6rem 0 0;
  max-width: 15ch;
  text-wrap: balance;
}

.shop-hero h1 span { color: #71B4FF; }

.shop-hero p {
  margin: 1.5rem 0 0;
  font-size: 1.1rem;
  line-height: 1.5;
  color: var(--tienda-sobre-oscuro);
  max-width: 46ch;
}

.shop-hero__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: .625rem;
  margin-top: 1.875rem;
}

.shop-hero__acciones .btn {
  height: 52px;
  padding: 0 1.75rem;
  border-radius: 11px;
  display: inline-grid;
  place-items: center;
  font-weight: 600;
  font-size: .97rem;
}

.shop-hero__acciones .btn-outline-light {
  border-color: rgba(255, 255, 255, .28);
}

.shop-hero__acciones .btn-outline-light:hover {
  background: var(--tienda-oscuro-2);
  border-color: rgba(255, 255, 255, .28);
  color: var(--tienda-claro);
}

/* Franja de datos concretos, pegada al hero */
.shop-datos {
  background: var(--tienda-oscuro-2);
  border-top: 1px solid rgba(255, 255, 255, .07);
}

.shop-datos__inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 1.15rem 1.25rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem 2rem;
}

.shop-datos__item strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--tienda-claro);
}

.shop-datos__item span {
  font-size: .82rem;
  color: var(--tienda-sobre-oscuro);
}

/* Grillas */
.grilla-rubros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: .875rem;
}

.grilla-productos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(226px, 1fr));
  gap: .875rem;
}

@media (max-width: 575.98px) {
  .grilla-productos { grid-template-columns: repeat(2, 1fr); gap: .625rem; }
  .grilla-rubros { grid-template-columns: repeat(2, 1fr); gap: .625rem; }
}

/* Franja de confianza: las tres razones para comprar acá y no por teléfono. */
.trust-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: .75rem;
  margin: 1.75rem 0;
}

.trust-strip__item {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: 1rem 1.15rem;
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  transition: border-color var(--t-base), box-shadow var(--t-base);
}

.trust-strip__item:hover {
  border-color: var(--probar-200);
  box-shadow: var(--shadow-sm);
}

.trust-strip__item i {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 1.25rem;
}

.trust-strip__item strong {
  display: block;
  font-size: .92rem;
  font-weight: 700;
  line-height: 1.2;
}

.trust-strip__item span {
  font-size: .8rem;
  color: var(--text-muted);
}

/* Azulejos de rubro */
.cat-tile {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  padding: 1.25rem;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: var(--text);
  transition: border-color var(--t-base);
}

/* Sin sombra al pasar por encima: el borde que se tiñe es más sobrio y no
   hace saltar la grilla. */
.cat-tile:hover { border-color: var(--primary); }

.cat-tile img,
.cat-tile__fondo {
  height: 72px;
  width: 100%;
  object-fit: cover;
  border-radius: var(--radius-md);
  margin-bottom: .5rem;
}

.cat-tile__fondo {
  display: grid;
  place-items: center;
  background: var(--bg-surface-2);
  color: var(--text-muted);
  font-size: 1.5rem;
}

.cat-tile__nombre {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.18rem;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.cat-tile__resumen {
  font-size: .84rem;
  color: var(--text-soft);
}

/* Encabezado de sección */
.section-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin: 2.5rem 0 1.15rem;
}

.section-title h1,
.section-title h2 {
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
  /* Barrita de color a la izquierda: marca el arranque de cada bloque sin
     necesidad de una línea divisoria a lo ancho. */
  padding-left: .7rem;
  border-left: 3px solid var(--primary);
  line-height: 1.2;
}

.section-title a {
  font-size: .87rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

/* ------------------------------------------------------------
   Contenido institucional
   ------------------------------------------------------------ */
.info-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow-xs);
}

.hours-table {
  width: 100%;
  font-size: .9rem;
}

.hours-table li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .4rem 0;
  border-bottom: 1px dashed var(--border);
  list-style: none;
}

.hours-table li:last-child { border-bottom: none; }

.map-wrap {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  min-height: 320px;
}

/* Las teselas de OpenStreetMap son claras; en modo oscuro se invierten para
   que el mapa no queme la pantalla. */
[data-theme="dark"] .map-wrap .leaflet-tile-pane {
  filter: invert(1) hue-rotate(180deg) brightness(.95) contrast(.9);
}

/* ------------------------------------------------------------
   Cuenta y checkout
   ------------------------------------------------------------ */
.auth-card {
  max-width: 460px;
  margin: 2rem auto;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem;
  box-shadow: var(--shadow-md);
}

.order-summary {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  position: sticky;
  top: 90px;
}

.order-summary__row {
  display: flex;
  justify-content: space-between;
  padding: .35rem 0;
  font-size: .92rem;
}

.order-summary__row--total {
  border-top: 1px solid var(--border);
  margin-top: .5rem;
  padding-top: .75rem;
  font-size: 1.1rem;
  font-weight: 700;
}

.thanks-hero {
  text-align: center;
  padding: 3rem 1rem;
}

.thanks-hero i {
  font-size: 3.5rem;
  color: var(--success);
}

/* ------------------------------------------------------------
   Pie
   ------------------------------------------------------------ */
.shop-footer {
  background: var(--bg-surface);
  border-top: 1px solid var(--border);
  padding: 1.75rem 0 1rem;
  font-size: .85rem;
}

.shop-footer h6 {
  font-weight: 700;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-soft);
  margin-bottom: .6rem;
}

.shop-footer__marca {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-weight: 700;
  font-size: .95rem;
  color: var(--text);
  margin-bottom: .35rem;
}

.shop-footer__marca img { height: 28px; width: auto; }

.shop-footer__links {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: .84rem;
}

.shop-footer__links li {
  padding: .13rem 0;
  color: var(--text-muted);
}

.shop-footer__links a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--t-fast);
}

.shop-footer__links a:hover { color: var(--primary); }

.shop-social {
  display: flex;
  gap: .4rem;
  margin-top: .6rem;
}

.shop-social a {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--bg-surface-2);
  color: var(--text-soft);
  font-size: 1rem;
  text-decoration: none;
  transition: background var(--t-fast), color var(--t-fast);
}

.shop-social a:hover {
  background: var(--primary);
  color: var(--text-on-primary);
}

.shop-footer__bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1.25rem;
  padding-top: .85rem;
  border-top: 1px solid var(--border);
  font-size: .78rem;
  color: var(--text-muted);
}

.shop-footer__bottom a {
  color: var(--text-muted);
  text-decoration: none;
}

.shop-footer__bottom a:hover { color: var(--primary); }

/* ------------------------------------------------------------
   Botón flotante de WhatsApp
   ------------------------------------------------------------ */
.wa-fab {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1040;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  box-shadow: var(--shadow-lg);
  text-decoration: none;
  transition: transform var(--t-base);
}

.wa-fab:hover {
  transform: scale(1.06);
  color: #fff;
}

/* ------------------------------------------------------------
   Teléfonos y tablets

   El tráfico de una distribuidora de bebidas es mayormente móvil, así que
   estos anchos no son un ajuste final sino el caso principal.
   ------------------------------------------------------------ */
@media (max-width: 991.98px) {
  /* La barra pasa a dos filas: marca y acciones arriba, buscador abajo a lo
     ancho. Los enlaces se mudan al menú lateral. */
  .shop-navbar__inner {
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "menu marca acciones"
      "buscador buscador buscador";
    gap: .6rem 0.75rem;
  }

  .shop-menu-btn { grid-area: menu; display: inline-flex; }
  .shop-brand    { grid-area: marca; }
  .shop-actions  { grid-area: acciones; }
  .shop-search   { grid-area: buscador; }
  .shop-nav      { display: none; }
}

@media (max-width: 575.98px) {
  .shop-brand span { display: none; }
  .shop-hero__slide { min-height: 260px; padding: 1.75rem 1.35rem; }
  .shop-hero p { font-size: .95rem; }
  .section-title { margin: 2rem 0 .9rem; }
  .section-title h1,
  .section-title h2 { font-size: 1.2rem; }
  .wa-fab { width: 48px; height: 48px; font-size: 1.45rem; bottom: 14px; right: 14px; }

  /* Dos columnas de producto, no una: con una sola, ver seis productos
     obliga a un scroll larguísimo. */
  .product-card__body { padding: .7rem; gap: .4rem; }
  .product-card__name { font-size: .85rem; }
  .product-card__price { font-size: 1.05rem; }
}

/* El botón de menú solo existe en pantallas chicas. */
.shop-menu-btn { display: none; }


/* ------------------------------------------------------------
   Tarjeta de producto dentro de la tienda

   Sobre la base compartida con el portal, se aplica el tratamiento del
   diseño de referencia: borde en vez de sombra, precio en tipografía display
   y botón de acción a lo ancho.
   ------------------------------------------------------------ */
.shop-shell .product-card {
  box-shadow: none;
  border-radius: var(--radius-lg);
  transition: border-color var(--t-base);
}

.shop-shell .product-card:hover {
  border-color: var(--primary);
  box-shadow: none;
  transform: none;
}

.shop-shell .product-card__code {
  font-size: .7rem;
  color: var(--text-muted);
  text-transform: none;
  letter-spacing: 0;
}

.shop-shell .product-card__name {
  font-family: var(--font-display);
  font-size: .97rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.25;
}

.shop-shell .product-card__name a {
  color: inherit;
  text-decoration: none;
}

.shop-shell .product-card__name a:hover { color: var(--primary); }

.shop-shell .product-card__price {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
}

.shop-shell .product-card__price-block { margin-top: auto; padding-top: .4rem; }

.shop-shell .card-actions .btn {
  height: 42px;
  border-radius: 9px;
  font-weight: 600;
  font-size: .87rem;
}


/* ------------------------------------------------------------
   Catálogo con panel de filtros
   ------------------------------------------------------------ */
.catalogo-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  align-items: start;
}

@media (min-width: 992px) {
  .catalogo-layout { grid-template-columns: 260px minmax(0, 1fr); }

  /* El panel acompaña el scroll: filtrar con veinte productos abajo no
     obliga a volver arriba. */
  .catalogo-filtros {
    position: sticky;
    top: 86px;
    max-height: calc(100vh - 110px);
    overflow-y: auto;
  }
}

.filtros-catalogo {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.15rem;
}

.filtros-catalogo__grupo { margin-bottom: 1rem; }

.filtros-catalogo .form-label {
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-soft);
  margin-bottom: .35rem;
}

.filtros-catalogo__buscador { position: relative; }

.filtros-catalogo__buscador i {
  position: absolute;
  left: .75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
  font-size: .9rem;
}

.filtros-catalogo__buscador .form-control { padding-left: 2.25rem; }

.filtros-catalogo .form-control,
.filtros-catalogo .form-select {
  border-color: var(--border);
  background-color: var(--bg-surface);
  color: var(--text);
  border-radius: var(--radius-md);
  font-size: .9rem;
}

.filtros-catalogo .form-control:focus,
.filtros-catalogo .form-select:focus {
  border-color: var(--primary);
  box-shadow: var(--ring);
}

.filtros-catalogo .form-select:disabled {
  background-color: var(--bg-surface-2);
  color: var(--text-muted);
}

.filtros-catalogo .form-text {
  font-size: .75rem;
  color: var(--text-muted);
  min-height: 1rem;
}

.filtros-catalogo__ayuda {
  margin-top: 1rem;
  padding: 1rem;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--bg-surface-2);
}

.filtros-catalogo__ayuda strong {
  display: block;
  font-family: var(--font-display);
  font-size: .95rem;
  letter-spacing: -0.015em;
}

.filtros-catalogo__ayuda p {
  font-size: .82rem;
  color: var(--text-soft);
  margin: .2rem 0 .7rem;
}

/* Dentro del cajón el panel ya está sobre una superficie: el marco sobraría. */
.offcanvas-body .filtros-catalogo {
  border: 0;
  padding: 0;
  background: transparent;
}


/* ------------------------------------------------------------
   Registro por bloques

   Diez campos seguidos cansan; en tres bloques cortos se entiende qué pide
   cada parte y dónde se está parado.
   ------------------------------------------------------------ */
.auth-card--ancha { max-width: 640px; }

.registro-bloque {
  border: 0;
  padding: 0;
  margin: 0 0 1.5rem;
}

.registro-bloque legend {
  float: none;
  width: auto;
  font-family: var(--font-display);
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-soft);
  padding-bottom: .45rem;
  margin-bottom: .9rem;
  border-bottom: 1px solid var(--border);
  width: 100%;
}

.registro-bloque .form-label {
  font-size: .85rem;
  font-weight: 600;
  margin-bottom: .3rem;
}

.registro-bloque .form-text {
  font-size: .78rem;
  margin-top: .25rem;
}