/* ============================================================
   whatsventa — renderer del catálogo
   Las variables --c-* las inyecta el tema de cada tienda
   (ver includes/render_catalogo.php). El mismo CSS sirve para
   el lienzo del editor y para el catálogo publicado.
   ============================================================ */

.wv-cat {
  --c-bg:      #F8FAFC;
  --c-surface: #FFFFFF;
  --c-ink:     #0F172A;
  --c-muted:   #64748B;
  --c-accent:  #4F46E5;
  --c-accent2: #7C3AED;
  --c-radius:  14px;
  --c-shadow:  0 4px 16px -6px rgba(15, 23, 42, .18);
  --c-gap:     16px;
  --c-pad:     16px;
  --c-line:    rgba(15, 23, 42, .07);
  --c-font:    'Plus Jakarta Sans', sans-serif;
  --c-head-w:  800;

  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--c-font);
  isolation: isolate;
}

.wv-cat--dark {
  --c-line: rgba(255, 255, 255, .08);
}

/* ── Fondos con patrón ─────────────────────────────────────── */
.wv-cat[data-pattern="dots"] {
  background-image: radial-gradient(var(--c-line) 1px, transparent 1px);
  background-size: 16px 16px;
}
.wv-cat[data-pattern="stripes"] {
  background-image: repeating-linear-gradient(135deg, var(--c-line) 0 1px, transparent 1px 12px);
}
.wv-cat[data-pattern="grid"] {
  background-image:
    linear-gradient(var(--c-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--c-line) 1px, transparent 1px);
  background-size: 22px 22px;
}

/* ── Cabecera sticky ───────────────────────────────────────── */
.wv-cat__head {
  position: sticky;
  top: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px var(--c-pad);
  background: color-mix(in srgb, var(--c-surface) 94%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--c-line);
}
.wv-cat__logo {
  width: 38px; height: 38px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: calc(var(--c-radius) * .75);
  background: linear-gradient(135deg, var(--c-accent), var(--c-accent2));
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  overflow: hidden;
}
.wv-cat__logo img { width: 100%; height: 100%; object-fit: cover; }
.wv-cat__ident { min-width: 0; margin-right: auto; }
.wv-cat__nombre {
  font-family: var(--c-font);
  font-weight: var(--c-head-w);
  font-size: 15.5px;
  letter-spacing: -.02em;
  color: var(--c-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wv-cat__sub { font-size: 11px; color: var(--c-muted); }
.wv-cat__pedido {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  flex: none;
  border: 0;
  border-radius: calc(var(--c-radius) * .7);
  background: var(--c-accent);
  color: #fff;
  transition: transform .15s;
}
.wv-cat__pedido:hover { transform: scale(1.05); }
.wv-cat__badge {
  position: absolute;
  top: -5px; right: -5px;
  min-width: 19px; height: 19px;
  padding: 0 5px;
  display: grid;
  place-items: center;
  border-radius: var(--wv-r-pill, 999px);
  background: #EF4444;
  color: #fff;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 10.5px;
  font-weight: 800;
  border: 2px solid var(--c-surface);
}

/* ── Cuerpo desplazable ────────────────────────────────────── */
.wv-cat__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 76px;
  scrollbar-width: thin;
}
.wv-cat__body::-webkit-scrollbar { width: 5px; }
.wv-cat__body::-webkit-scrollbar-thumb { background: var(--c-line); border-radius: 99px; }

/* ── Bloque genérico ───────────────────────────────────────── */
.wv-blk {
  position: relative;
  padding: var(--c-gap) var(--c-pad) 0;
}
.wv-blk:last-child { padding-bottom: var(--c-gap); }
.wv-blk__titulo {
  font-family: var(--c-font);
  font-weight: var(--c-head-w);
  font-size: 17px;
  letter-spacing: -.02em;
  color: var(--c-ink);
  margin-bottom: 11px;
}

/* Selección en el editor */
.wv-cat--editable .wv-blk { cursor: pointer; }
.wv-cat--editable .wv-blk::after {
  content: '';
  position: absolute;
  inset: 4px var(--c-pad) 0;
  border-radius: calc(var(--c-radius) * .8);
  outline: 2px dashed transparent;
  outline-offset: 2px;
  pointer-events: none;
  transition: outline-color .15s;
}
.wv-cat--editable .wv-blk:hover::after { outline-color: color-mix(in srgb, var(--c-accent) 40%, transparent); }
.wv-cat--editable .wv-blk.sel::after { outline: 2px solid var(--c-accent); }
.wv-blk__etiqueta {
  position: absolute;
  top: -9px; left: calc(var(--c-pad) + 6px);
  z-index: 3;
  display: none;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 99px;
  background: var(--c-accent);
  color: #fff;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  white-space: nowrap;
  box-shadow: 0 4px 12px -4px rgba(15, 23, 42, .5);
}
.wv-cat--editable .wv-blk.sel .wv-blk__etiqueta { display: inline-flex; }

/* ── Slider ────────────────────────────────────────────────── */
.wv-slider {
  position: relative;
  height: 186px;
  border-radius: var(--c-radius);
  overflow: hidden;
  background: linear-gradient(135deg, var(--c-accent), var(--c-accent2));
  box-shadow: var(--c-shadow);
}
.wv-slider__slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 18px;
  opacity: 0;
  transition: opacity .5s ease-out;
  background-size: cover;
  background-position: center;
}
.wv-slider__slide.on { opacity: 1; }
.wv-slider__slide::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(15, 23, 42, .5));
}
.wv-slider__slide > * { position: relative; }
.wv-slider__tag {
  align-self: flex-start;
  padding: 4px 11px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .22);
  backdrop-filter: blur(4px);
  color: #fff;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  margin-bottom: 8px;
}
.wv-slider__titulo {
  font-family: var(--c-font);
  font-weight: var(--c-head-w);
  font-size: 23px;
  line-height: 1.12;
  letter-spacing: -.02em;
  color: #fff;
  text-shadow: 0 2px 12px rgba(15, 23, 42, .35);
}
.wv-slider__dots {
  position: absolute;
  bottom: 12px; right: 14px;
  z-index: 2;
  display: flex;
  gap: 6px;
}
.wv-slider__dots button {
  width: 7px; height: 7px;
  padding: 0;
  border: 0;
  border-radius: 99px;
  background: rgba(255, 255, 255, .45);
  transition: all .2s;
}
.wv-slider__dots button.on { width: 18px; background: #fff; }

/* ── Categorías ────────────────────────────────────────────── */
.wv-cats--tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.wv-cat-tile {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 14px;
  border-radius: calc(var(--c-radius) * .9);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  box-shadow: var(--c-shadow);
  text-align: left;
  transition: all .18s ease-out;
}
.wv-cat-tile:hover { transform: translateY(-3px); border-color: var(--c-accent); }
.wv-cat-tile.on { border-color: var(--c-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-accent) 30%, transparent); }
.wv-cat-tile__ico {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: calc(var(--c-radius) * .7);
  background: color-mix(in srgb, var(--c-accent) 12%, transparent);
  color: var(--c-accent);
}
.wv-cat-tile__nom { font-size: 13.5px; font-weight: 700; color: var(--c-ink); }
.wv-cat-tile__meta { font-size: 11px; color: var(--c-muted); }

.wv-cats--chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.wv-cats--chips::-webkit-scrollbar { display: none; }
.wv-cat-chip {
  flex: none;
  scroll-snap-align: start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 99px;
  border: 1px solid var(--c-line);
  background: var(--c-surface);
  color: var(--c-muted);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  transition: all .18s;
}
.wv-cat-chip.on { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }

/* ── Grid de productos ─────────────────────────────────────── */
.wv-prods { display: grid; gap: var(--c-gap); }
.wv-prods[data-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wv-prods[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.wv-prod {
  display: flex;
  flex-direction: column;
  border-radius: var(--c-radius);
  overflow: hidden;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  box-shadow: var(--c-shadow);
  transition: all .18s ease-out;
}
.wv-prod:hover { transform: translateY(-3px); box-shadow: 0 12px 26px -12px rgba(15, 23, 42, .3); }
.wv-prod--agotado { opacity: .72; }
.wv-prod__img {
  position: relative;
  aspect-ratio: 3 / 4;
  background: var(--wv-ph, repeating-linear-gradient(135deg, rgba(15, 23, 42, .07) 0 8px, transparent 8px 16px));
  background-size: cover;
  background-position: center;
}
.wv-cat--dark .wv-prod__img { --wv-ph: repeating-linear-gradient(135deg, rgba(255, 255, 255, .1) 0 8px, transparent 8px 16px); }
.wv-prod__badge {
  position: absolute;
  top: 8px; left: 8px;
  padding: 3px 9px;
  border-radius: 99px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 10px;
  font-weight: 800;
  color: #fff;
}
.wv-prod__badge--oferta  { background: #10B981; }
.wv-prod__badge--agotado { background: #0F172A; }
.wv-prod__cuerpo { display: flex; flex-direction: column; gap: 5px; padding: 10px 11px 12px; flex: 1; }
.wv-prod__nom {
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--c-ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.wv-prod__precios { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.wv-prod__precio { font-size: 13.5px; font-weight: 800; color: var(--c-ink); }
.wv-prod__viejo { font-size: 11px; color: var(--c-muted); text-decoration: line-through; }
.wv-prod__add {
  margin-top: auto;
  padding: 8px;
  border: 0;
  border-radius: calc(var(--c-radius) * .6);
  background: var(--c-accent);
  color: #fff;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12px;
  font-weight: 700;
  transition: filter .15s;
}
.wv-prod__add:hover { filter: brightness(1.08); }
.wv-prod__add[disabled] { background: var(--c-line); color: var(--c-muted); cursor: not-allowed; }

/* ── Banner ────────────────────────────────────────────────── */
.wv-banner {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 20px;
  border-radius: var(--c-radius);
  background: linear-gradient(135deg, var(--c-accent), var(--c-accent2));
  background-size: cover;
  background-position: center;
  color: #fff;
  box-shadow: var(--c-shadow);
}
.wv-banner__t { font-family: var(--c-font); font-weight: var(--c-head-w); font-size: 20px; line-height: 1.15; letter-spacing: -.02em; }
.wv-banner__s { font-size: 13px; opacity: .92; line-height: 1.5; }
.wv-banner__cta {
  align-self: flex-start;
  margin-top: 4px;
  padding: 9px 18px;
  border: 0;
  border-radius: 99px;
  background: #fff;
  color: var(--c-accent);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12.5px;
  font-weight: 800;
  transition: transform .15s;
}
.wv-banner__cta:hover { transform: translateY(-2px); }

/* ── Producto destacado ────────────────────────────────────── */
.wv-feat {
  border-radius: var(--c-radius);
  overflow: hidden;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  box-shadow: var(--c-shadow);
}
.wv-feat__img {
  height: 190px;
  background: var(--wv-ph, repeating-linear-gradient(135deg, rgba(15, 23, 42, .07) 0 8px, transparent 8px 16px));
  background-size: cover;
  background-position: center;
}
.wv-feat__cuerpo { display: flex; flex-direction: column; gap: 7px; padding: 15px; }
.wv-feat__nom { font-family: var(--c-font); font-weight: var(--c-head-w); font-size: 18px; letter-spacing: -.02em; color: var(--c-ink); }
.wv-feat__precio { font-size: 17px; font-weight: 800; color: var(--c-accent); }

/* ── Video ─────────────────────────────────────────────────── */
.wv-video {
  position: relative;
  border-radius: var(--c-radius);
  overflow: hidden;
  background: #0F172A;
  aspect-ratio: 16 / 9;
  box-shadow: var(--c-shadow);
}
/* `contain` para no recortar: la caja adopta la proporción del video en
   cuanto se conoce (ver `ajustarProporcion` en catalogo.js), así que no
   quedan bandas negras ni se pierde parte de la imagen. El 16:9 de
   arriba es sólo el tamaño de partida mientras carga. */
.wv-video iframe, .wv-video video { width: 100%; height: 100%; border: 0; display: block; object-fit: contain; }
.wv-video__ph {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: rgba(255, 255, 255, .8);
}
.wv-video__ph .mi { font-size: 44px; }
.wv-video__ph span { font-family: var(--wv-mono, monospace); font-size: 10.5px; letter-spacing: .06em; }

/* ── Páginas internas (categorías / buscar) ────────────────── */
.wv-cat__pagina { display: flex; flex-direction: column; gap: 8px; padding: 14px var(--c-pad) 20px; animation: wvIn .22s ease-out; }
.wv-cat__pagina h2 { font-family: var(--c-font); font-weight: var(--c-head-w); font-size: 21px; letter-spacing: -.02em; color: var(--c-ink); }
.wv-cat__pagina .sub { font-size: 12.5px; color: var(--c-muted); margin-bottom: 8px; }

.wv-buscar {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 13px;
  border-radius: calc(var(--c-radius) * .8);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  box-shadow: var(--c-shadow);
  margin-bottom: 4px;
}
.wv-buscar .mi { color: var(--c-muted); }
.wv-buscar input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font-family: var(--c-font);
  font-size: 14px;
  color: var(--c-ink);
}
.wv-res {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px;
  border-radius: calc(var(--c-radius) * .8);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
}
.wv-res__thumb {
  width: 46px; height: 46px;
  flex: none;
  border-radius: calc(var(--c-radius) * .6);
  background: var(--wv-ph, repeating-linear-gradient(135deg, rgba(15, 23, 42, .07) 0 6px, transparent 6px 12px));
  background-size: cover;
  background-position: center;
}
.wv-res__txt { min-width: 0; margin-right: auto; }
.wv-res__nom { font-size: 13.5px; font-weight: 700; color: var(--c-ink); }
.wv-res__meta { font-size: 11.5px; color: var(--c-muted); }
.wv-res__add {
  width: 34px; height: 34px;
  flex: none;
  display: grid; place-items: center;
  border: 0;
  border-radius: calc(var(--c-radius) * .6);
  background: var(--c-accent);
  color: #fff;
}
.wv-res__add[disabled] { background: var(--c-line); color: var(--c-muted); }

/* ── Barra inferior tipo app ───────────────────────────────── */
.wv-cat__tabs {
  position: absolute;
  z-index: 8;
  bottom: 0; left: 0; right: 0;
  display: flex;
  padding: 9px 6px 12px;
  background: color-mix(in srgb, var(--c-surface) 96%, transparent);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--c-line);
}
.wv-cat__tab {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--c-muted);
  transition: color .15s;
  min-height: 44px;
}
.wv-cat__tab-lbl {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1.2;
}
.wv-cat__tab.on { color: var(--c-accent); }
.wv-cat__tab .wv-cat__badge { top: -2px; right: 22%; border-width: 0; }

/* ── FAB de WhatsApp ───────────────────────────────────────── */
.wv-fab {
  position: absolute;
  z-index: 9;
  bottom: 84px; right: 14px;
  width: 54px; height: 54px;
  display: grid; place-items: center;
  border: 0;
  border-radius: 50%;
  background: #10B981;
  color: #fff;
  box-shadow: 0 10px 26px -8px rgba(16, 185, 129, .7);
  animation: wvFloat 5.5s ease-in-out infinite;
}
.wv-fab:hover { filter: brightness(1.07); }

/* ── Carrito (bottom sheet) ────────────────────────────────── */
.wv-sheet-fondo {
  position: absolute;
  inset: 0;
  z-index: 19;
  background: rgba(15, 23, 42, .45);
  backdrop-filter: blur(2px);
  animation: wvIn .2s ease-out;
}
.wv-sheet {
  position: absolute;
  z-index: 20;
  bottom: 0; left: 0; right: 0;
  max-height: 86%;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  border-radius: var(--c-radius) var(--c-radius) 0 0;
  background: var(--c-surface);
  box-shadow: 0 -18px 50px -18px rgba(15, 23, 42, .5);
  animation: wvIn .24s ease-out;
}
.wv-sheet__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--c-line);
}
.wv-sheet__head h3 {
  font-family: var(--c-font);
  font-weight: var(--c-head-w);
  font-size: 18px;
  letter-spacing: -.02em;
  color: var(--c-ink);
  margin-right: auto;
}
.wv-sheet__x {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border: 0; border-radius: 9px;
  background: var(--c-line);
  color: var(--c-muted);
}
/* El pie crece con la entrega y los datos del cliente: en un celular bajo
   se comía la lista hasta dejarla en una rendija. La lista guarda un alto
   mínimo y, si no cabe todo, es la hoja entera la que se desplaza. */
.wv-sheet__body { flex: 1 1 auto; min-height: min(118px, 20vh); overflow-y: auto; padding: 12px 16px; display: flex; flex-direction: column; gap: 10px; }
.wv-sheet__foot { padding: 12px 16px 18px; border-top: 1px solid var(--c-line); display: flex; flex-direction: column; gap: 10px; }

.wv-linea { display: flex; align-items: center; gap: 11px; }
.wv-linea__thumb {
  width: 50px; height: 50px;
  flex: none;
  border-radius: calc(var(--c-radius) * .6);
  background: var(--wv-ph, repeating-linear-gradient(135deg, rgba(15, 23, 42, .07) 0 6px, transparent 6px 12px));
  background-size: cover;
  background-position: center;
}
.wv-linea__txt { min-width: 0; margin-right: auto; }
.wv-linea__nom { font-size: 13px; font-weight: 700; color: var(--c-ink); }
.wv-linea__meta { font-size: 11.5px; color: var(--c-muted); }
.wv-stepper { display: flex; align-items: center; gap: 4px; flex: none; }
.wv-stepper button {
  width: 27px; height: 27px;
  display: grid; place-items: center;
  border: 1px solid var(--c-line);
  border-radius: 8px;
  background: var(--c-surface);
  color: var(--c-ink);
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
}
.wv-stepper button:hover { border-color: var(--c-accent); color: var(--c-accent); }
.wv-stepper span { min-width: 22px; text-align: center; font-size: 13px; font-weight: 800; color: var(--c-ink); }
.wv-linea__sub { min-width: 62px; text-align: right; font-size: 12.5px; font-weight: 800; color: var(--c-ink); }

.wv-sheet__total { display: flex; align-items: baseline; justify-content: space-between; }
.wv-sheet__total span { font-size: 13px; color: var(--c-muted); font-weight: 600; }
.wv-sheet__total strong { font-size: 22px; font-weight: 800; color: var(--c-ink); }
.wv-sheet__nota {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--c-line);
  border-radius: calc(var(--c-radius) * .7);
  background: var(--c-bg);
  font-family: var(--c-font);
  font-size: 13.5px;
  color: var(--c-ink);
}
.wv-sheet__nota:focus { outline: none; border-color: var(--c-accent); }
.wv-sheet__enviar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px;
  border: 0;
  border-radius: calc(var(--c-radius) * .8);
  background: #10B981;
  color: #fff;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 15px;
  font-weight: 800;
  box-shadow: 0 8px 22px -8px rgba(16, 185, 129, .7);
  transition: transform .15s;
  min-height: 48px;
}
.wv-sheet__enviar:hover { transform: translateY(-2px); }
.wv-sheet__enviar[disabled] { background: var(--c-line); color: var(--c-muted); box-shadow: none; transform: none; }

/* Selector de variante dentro del carrito */
.wv-variantes { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 5px; }
.wv-variantes button {
  padding: 3px 9px;
  border: 1px solid var(--c-line);
  border-radius: 99px;
  background: transparent;
  color: var(--c-muted);
  font-size: 10.5px;
  font-weight: 700;
  transition: all .15s;
}
.wv-variantes button.on { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }

/* ── Handoff a WhatsApp (pantalla de chat) ─────────────────── */
.wv-chat {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  background: #0B141A;
  animation: wvIn .25s ease-out;
}
.wv-chat__head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 15px;
  background: #1F2C33;
  color: #E9EDEF;
}
.wv-chat__av {
  width: 36px; height: 36px;
  flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #10B981;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}
.wv-chat__nom { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 14.5px; font-weight: 700; }
.wv-chat__est { font-size: 11px; color: #8696A0; }
.wv-chat__body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  background-image: radial-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px);
  background-size: 18px 18px;
}
.wv-burbuja {
  align-self: flex-end;
  max-width: 88%;
  padding: 9px 12px 7px;
  border-radius: 10px 2px 10px 10px;
  background: #075E54;
  color: #E9EDEF;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
}
.wv-burbuja__pie {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  margin-top: 4px;
  font-size: 10.5px;
  color: #8FD3C4;
}
.wv-chat__foot { padding: 14px; background: #1F2C33; display: flex; flex-direction: column; gap: 9px; }
.wv-chat__abrir {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px;
  border: 0;
  border-radius: 12px;
  background: #10B981;
  color: #fff;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14.5px;
  font-weight: 800;
  min-height: 46px;
}
.wv-chat__volver {
  padding: 11px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 12px;
  background: transparent;
  color: #E9EDEF;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  min-height: 44px;
}

/* ── Marcos de dispositivo ─────────────────────────────────── */
.wv-telefono {
  width: 392px;
  max-width: 100%;
  height: 712px;
  max-height: calc(100vh - 150px);
  flex: none;
  border: 11px solid #0F172A;
  border-radius: 38px;
  overflow: hidden;
  background: #fff;
  box-shadow: var(--wv-sh-phone);
  position: relative;
}
.wv-escritorio {
  width: min(980px, 100%);
  height: 640px;
  max-height: calc(100vh - 150px);
  border: 1px solid var(--wv-border);
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 30px 60px -24px rgba(49, 46, 129, .4);
  position: relative;
}
.wv-escritorio .wv-prods[data-cols="2"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wv-escritorio .wv-prods[data-cols="3"] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.wv-escritorio .wv-cats--tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wv-escritorio .wv-slider { height: 280px; }
.wv-escritorio .wv-cat__body { padding-bottom: 20px; }
.wv-escritorio .wv-cat__tabs { display: none; }
.wv-escritorio .wv-fab { bottom: 20px; }

@media (max-width: 880px) {
  .wv-telefono { width: 100%; height: 640px; border-width: 9px; border-radius: 32px; }
}

/* ── El atributo hidden debe ganarle a los display: flex/grid ─ */
.wv-cat [hidden],
.wv-cat[hidden] { display: none !important; }

/* ══════════════════════════════════════════════════════════════
   CRÉDITO AL PIE DEL CATÁLOGO

   Va dentro del scroll, después del último bloque, y usa los
   colores del tema de cada tienda para no romper su identidad.
   No aparece en el editor: allí el crédito es la marca de agua.
   ══════════════════════════════════════════════════════════════ */
.wv-cat__credito {
  margin: 26px 0 0;
  padding: 18px 16px calc(22px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--c-border, rgba(15, 23, 42, .08));
  text-align: center;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--c-muted, #94A3B8);
}
.wv-cat__credito a {
  color: var(--c-muted, #94A3B8);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.wv-cat__credito a:hover { color: var(--c-accent, #4F46E5); }

/* ══════════════════════════════════════════════════════════════
   DÓNDE QUEDA LA TIENDA

   Al final del catálogo, después de los productos: quien llegó
   hasta abajo ya sabe qué vende; ahora puede querer saber dónde
   está. Usa los colores del tema de cada tienda.
   ══════════════════════════════════════════════════════════════ */
.wv-cat__ubic {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 22px 14px 0;
  padding: 14px;
  border-radius: var(--r-md, 12px);
  background: var(--c-soft, rgba(15, 23, 42, .04));
}

.wv-cat__ubic__txt {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  flex: 1 1 160px;
  min-width: 0;
}
.wv-cat__ubic__txt .mi {
  font-size: 20px;
  color: var(--c-accent, #4F46E5);
  flex: none;
  margin-top: 1px;
}
.wv-cat__ubic__txt strong {
  display: block;
  font-size: 13px;
  line-height: 1.4;
  color: var(--c-ink, #0F172A);
}
.wv-cat__ubic__txt span {
  font-size: 12px;
  color: var(--c-muted, #64748B);
}

.wv-cat__ubic__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border-radius: var(--r-pill, 999px);
  background: var(--c-accent, #4F46E5);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.wv-cat__ubic__btn .mi { font-size: 18px; color: #fff; }
.wv-cat__ubic__btn:hover { filter: brightness(1.08); }

/* Video de portada en bucle: sin controles y sin poder pausarlo,
   así que tampoco debe capturar toques ni el cursor. */
.wv-video--bucle {
  pointer-events: none;
  object-fit: cover;
}

/* ── Ficha de producto ─────────────────────────────────────────
   Una pantalla más del catálogo, no un modal: así el botón Atrás
   del teléfono hace lo que la gente espera. */
.wv-ficha { display: flex; flex-direction: column; }
/* El pie pegajoso tiene que quedar por encima del padding de la página. */
.wv-ficha.wv-cat__pagina { padding-bottom: 8px; }

.wv-ficha__volver {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 12px;
  padding: 7px 13px 7px 9px;
  border: 0;
  border-radius: 99px;
  background: color-mix(in srgb, var(--c-ink) 7%, transparent);
  color: var(--c-ink);
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
}
.wv-ficha__volver:hover { background: color-mix(in srgb, var(--c-ink) 12%, transparent); }

.wv-ficha__galeria {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  border-radius: var(--c-radius);
  margin-bottom: 16px;
}
.wv-ficha__galeria::-webkit-scrollbar { display: none; }
.wv-ficha__foto {
  flex: 0 0 100%;
  aspect-ratio: 1 / 1;
  scroll-snap-align: center;
  border-radius: var(--c-radius);
  background: color-mix(in srgb, var(--c-ink) 6%, transparent);
  background-size: cover;
  background-position: center;
}
/* Con varias, se asoma la siguiente para que se note que hay más. */
.wv-ficha__galeria--varias .wv-ficha__foto { flex-basis: 88%; }
.wv-ficha__foto--vacia {
  display: grid;
  place-items: center;
  color: var(--c-muted);
}
.wv-ficha__foto--vacia .mi { font-size: 46px; }

.wv-ficha__nom {
  margin: 0 0 8px;
  font-family: var(--c-font);
  font-weight: var(--c-head-w);
  font-size: 21px;
  line-height: 1.2;
  color: var(--c-ink);
}
.wv-ficha__precios {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 18px;
}
.wv-ficha__precio { font-size: 25px; font-weight: 800; color: var(--c-ink); }
.wv-ficha__viejo {
  font-size: 15px;
  color: var(--c-muted);
  text-decoration: line-through;
}
.wv-ficha__off {
  padding: 3px 8px;
  border-radius: 99px;
  background: var(--c-accent);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}

.wv-ficha__variantes { margin-bottom: 18px; }
.wv-ficha__etiqueta {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.wv-ficha__variantes .wv-variantes { gap: 7px; }
.wv-ficha__variantes .wv-variantes button {
  padding: 9px 14px;
  font-size: 13.5px;
}

.wv-ficha__desc {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--c-muted);
  white-space: pre-line;
}
.wv-ficha__stock {
  margin-bottom: 16px;
  font-size: 13px;
  font-weight: 700;
  color: var(--c-accent);
}
.wv-ficha__desc[hidden], .wv-ficha__stock[hidden],
.wv-ficha__viejo[hidden], .wv-ficha__off[hidden],
.wv-ficha__variantes[hidden] { display: none; }

.wv-ficha__pie { position: sticky; bottom: 0; padding: 10px 0 2px; }
.wv-ficha__add {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  padding: 15px;
  border: 0;
  border-radius: var(--c-radius);
  background: var(--c-accent);
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: var(--c-shadow);
}
.wv-ficha__add:disabled { opacity: .45; cursor: not-allowed; }

/* «desde $X» en la cuadrícula, cuando las variantes valen distinto.
   Pegado al precio y sin permitir que se parta: «desde» solo en una
   línea no dice nada. */
.wv-prod__desde {
  font-size: 11px;
  font-weight: 700;
  color: var(--c-muted);
  margin-right: -2px;
}
.wv-prod__precios:has(.wv-prod__desde) { flex-wrap: nowrap; }

/* Una variante agotada se ve, pero no se puede elegir. */
.wv-variantes button:disabled {
  opacity: .4;
  cursor: not-allowed;
  text-decoration: line-through;
}

/* El destacado abre su ficha: su descripción va recortada y lo que se
   corta puede ser justo la advertencia que el cliente necesita leer. */
.wv-feat__img, .wv-feat__nom, .wv-feat__desc { cursor: pointer; }
.wv-feat__desc {
  font-size: 12.5px;
  color: var(--c-muted);
  line-height: 1.5;
  margin: 0;
}
.wv-feat__desc b { color: var(--c-accent); font-weight: 700; }

/* ── Pantalla de una categoría ─────────────────────────────── */
.wv-cat__titulo {
  margin: 6px 0 2px;
  font-family: var(--c-font);
  font-weight: var(--c-head-w);
  font-size: 21px;
  color: var(--c-ink);
}
[data-pagina="categoria"] .sub { margin: 0 0 16px; }

/* ── Video de portada: arranca solo, con botón de sonido ───── */
.wv-video__auto { position: relative; width: 100%; height: 100%; }
.wv-video__auto video {
  width: 100%;
  height: 100%;
  /* `contain` y no `cover`: la caja ya se ajusta a la proporción real del
     video, así que no hay nada que recortar ni bandas que rellenar. */
  object-fit: contain;
  pointer-events: none;   /* sin controles: el único mando es el altavoz */
}
.wv-video__son {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: rgba(15, 23, 42, .62);
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background .15s, transform .15s;
}
.wv-video__son:hover { background: rgba(15, 23, 42, .8); transform: scale(1.06); }
.wv-video__son.on { background: var(--c-accent); }
.wv-video__son .mi { color: #fff; }

/* ── Video de producto ─────────────────────────────────────────
   Un producto puede no tener ni una foto: hay quien graba y sube el
   video, y nada más. Entonces lo que se ve en la cuadrícula es el
   video quieto, con el triángulo encima para que se sepa qué es. */
.wv-prod__vid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.wv-prod__play {
  position: absolute;
  right: 8px;
  bottom: 8px;
  font-size: 26px;
  color: #fff;
  /* El video puede ser claro: sin sombra el icono desaparece. */
  text-shadow: 0 1px 6px rgba(15, 23, 42, .55);
  pointer-events: none;
}
.wv-res__thumb--video {
  display: grid;
  place-items: center;
  color: var(--c-muted);
}

/* En la galería de la ficha el video ocupa el mismo cuadro que una
   foto, y recortado igual: `contain` le dejaría bandas negras, que es
   justo de lo que se quejaron. */
.wv-ficha__foto--video { overflow: hidden; }
.wv-ficha__foto--video .wv-video__auto video,
.wv-ficha__foto--video iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  object-fit: cover;
  border-radius: var(--c-radius);
}

/* ── Restaurante: abierto/cerrado en el encabezado ─────────── */
.wv-cat__estado { display: flex; align-items: center; gap: 5px; }
.wv-cat__punto { width: 7px; height: 7px; border-radius: 50%; background: #DC2626; flex: none; }
.wv-cat__estado.on .wv-cat__punto { background: #16A34A; }

/* ── Adiciones en la ficha ─────────────────────────────────── */
.wv-grupos { display: flex; flex-direction: column; gap: 14px; margin-bottom: 18px; }
.wv-grupos[hidden] { display: none; }
.wv-grupo {
  margin: 0;
  padding: 12px 12px 6px;
  border: 1px solid var(--c-line);
  border-radius: calc(var(--c-radius) * .8);
  background: var(--c-surface);
  min-width: 0;
}
.wv-grupo__cab {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 0;
  margin-bottom: 4px;
  float: left;            /* que la legend se comporte como bloque normal */
}
.wv-grupo__cab + * { clear: both; }
.wv-grupo__nom { font-size: 14.5px; font-weight: 800; color: var(--c-ink); }
.wv-grupo__regla {
  flex: none;
  padding: 3px 9px;
  border-radius: 99px;
  background: var(--c-bg);
  font-size: 11px;
  font-weight: 700;
  color: var(--c-muted);
}
.wv-grupo__regla.falta { background: var(--c-accent); color: #fff; }
.wv-op {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 2px;
  border-top: 1px solid var(--c-line);
  cursor: pointer;
  font-size: 14px;
  color: var(--c-ink);
}
.wv-grupo__cab + .wv-op { border-top: 0; }
.wv-op input { width: 18px; height: 18px; accent-color: var(--c-accent); flex: none; margin: 0; }
.wv-op__nom { flex: 1; min-width: 0; }
.wv-op__precio { font-size: 13px; font-weight: 700; color: var(--c-muted); }
.wv-op--no { opacity: .45; cursor: not-allowed; }
.wv-op:has(input:disabled:not(:checked)) { cursor: not-allowed; }
.wv-grupo--sacude { animation: wvSacude .45s; border-color: var(--c-accent); }
@keyframes wvSacude {
  20%, 60% { transform: translateX(-5px); }
  40%, 80% { transform: translateX(5px); }
}
@media (prefers-reduced-motion: reduce) { .wv-grupo--sacude { animation: none; } }

.wv-ficha__nota { display: block; margin-bottom: 16px; }
.wv-ficha__nota textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--c-line);
  border-radius: calc(var(--c-radius) * .7);
  background: var(--c-surface);
  font-family: var(--c-font);
  font-size: 13.5px;
  color: var(--c-ink);
  resize: vertical;
}
.wv-ficha__nota textarea:focus { outline: none; border-color: var(--c-accent); }
.wv-ficha__add--falta { opacity: .75; }

/* ── Carrito: adiciones, entrega y totales ─────────────────── */
.wv-linea__ops { font-size: 11.5px; color: var(--c-muted); line-height: 1.35; margin-top: 2px; }
.wv-linea__nota { font-style: italic; }

.wv-entrega { display: flex; gap: 6px; }
.wv-entrega[hidden] { display: none; }
.wv-entrega__op {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 9px 6px;
  border: 1px solid var(--c-line);
  border-radius: calc(var(--c-radius) * .7);
  background: var(--c-surface);
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--c-ink);
  cursor: pointer;
}
.wv-entrega__op.on { border-color: var(--c-accent); background: var(--c-accent); color: #fff; }

.wv-sheet__lineas-total { display: flex; flex-direction: column; gap: 3px; }
.wv-sheet__fila { display: flex; justify-content: space-between; font-size: 13px; color: var(--c-muted); }
.wv-sheet__fila[hidden] { display: none; }
.wv-sheet__aviso {
  margin: 0;
  padding: 8px 11px;
  border-radius: calc(var(--c-radius) * .6);
  background: var(--c-bg);
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--c-ink);
}
.wv-sheet__aviso[hidden] { display: none; }
.wv-sheet__aviso--bloqueo { background: #FEF2F2; color: #B91C1C; font-weight: 600; }
.wv-sheet__nota[hidden] { display: none; }

/* WhatsApp del cliente: el país pegado al número. */
.wv-tel { display: flex; gap: 6px; }
.wv-tel__pais { flex: none; width: auto; padding-right: 6px; }
.wv-tel input { flex: 1; min-width: 0; }