/* Tienda de pedidos — mobile-first, liviano, sin dependencias. Sin estilos inline (CSP style-src 'self').
   Estructura de tienda tipo WooCommerce (2026-10-24): franja de beneficios, encabezado con buscador, menú lateral de categorías en acordeón, tarjetas,
   ficha de producto con barra fija de compra y pie con columnas. El color del comercio llega por /tema.css (--acc, --acc-txt = texto legible sobre --acc, --acc-h = hover, --acc-d = enlaces AA, --acc-soft)
   y la tipografía en --font (1.4.0). */
:root {
  color-scheme: light;
  --acc: #c2410c; --acc-d: #9a3412; --acc-soft: #fbe9df; --acc-txt: #fff; --acc-h: #9a3412; --acc-b: var(--acc);
  --bg: #ffffff; --bg-2: #f6f6f4; --card: #fff; --surface: #fff; --txt: #1f2328; --mut: #5b6270; --bd: #e2e2dc; --bd-2: #8b8f98;
  --ok: #237a35; --ok-bg: #e8f4ea; --warn: #fff4e0; --warn-bd: #d99a2b; --err: #fdecec; --err-bd: #d05a5a; --danger: #b42318; --danger-bg: #fff3f1;
  --sale: #b42318; --off-bg: #e6dcd5; --off-txt: #5a4034; --oscuro: #1f2328;
  --r: 12px; --tap: 44px; --bar-h: 76px; --sombra: 0 6px 24px rgba(31, 35, 40, .10);
  --link: var(--acc-d); --top-bg: #fff; --foto-bg: #f4f4f1; --txt-2: #3b4048; --sale-bg: #b42318; --bajo-txt: #7a4600; --bajo-bg: #fff1d6;
  --wa: #0b6b4a; --wa-txt: #0b6b4a; --fade: rgba(255, 255, 255, 0);
  --pie-bg: #15181c; --pie-txt: #e8eaed; --pie-mut: #a6adb7; --pie-bd: #2c3139;
}
/* Tema oscuro (botón del encabezado; temprano.js pone data-tema antes de pintar). html[…] le gana a :root de /tema.css, así el color del comercio
   sigue siendo el de los botones pero los textos usan una versión clara que se lee sobre el fondo oscuro. Las fotos quedan sobre un recuadro claro. */
html[data-tema="oscuro"] {
  color-scheme: dark;
  --bg: #121417; --bg-2: #1b1e23; --card: #1a1d22; --surface: #1d2026; --txt: #eceef1; --mut: #a3a9b3; --bd: #2e333b; --bd-2: #5d6470;
  --ok: #5fd07b; --ok-bg: #173022; --warn: #3a2c12; --warn-bd: #a77a1f; --err: #3a1b1b; --err-bd: #b85454; --danger: #ff8a80; --danger-bg: #3a1d1b;
  --sale: #ff8a7f; --off-bg: #2a2d33; --off-txt: #b7aca5; --oscuro: #050607; --sombra: 0 6px 24px rgba(0, 0, 0, .45);
  --acc-soft: color-mix(in srgb, var(--acc) 24%, transparent); --link: color-mix(in srgb, var(--acc) 45%, #fff);
  --top-bg: #16191d; --foto-bg: #eceae6; --txt-2: #c9ced6; --bajo-txt: #f5c46b; --bajo-bg: #3a2c12; --wa-txt: #4fd39b; --fade: rgba(18, 20, 23, 0);
  --pie-bg: #0b0c0e; --pie-bd: #23272e;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; scroll-padding-bottom: 96px; }
/* Superficies del navegador con los colores de la tienda */
::selection { background: var(--acc); color: var(--acc-txt); }
html { scrollbar-color: var(--bd-2) var(--bg); }
input, select, textarea { caret-color: var(--acc); }
a { text-underline-offset: .18em; }
body { margin: 0; font: 16px/1.5 var(--font, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif); color: var(--txt); background: var(--bg); }
button, input, select { font-family: inherit; }
a { color: var(--link); }
img { max-width: 100%; }
[hidden] { display: none !important; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 12px 16px; }
main.wrap { padding-top: 14px; padding-bottom: 32px; }
main.angosto { max-width: 760px; }
.center { text-align: center; }
.muted { color: var(--mut); }
.h { margin: 4px 0 12px; font-size: 1.5rem; line-height: 1.2; letter-spacing: -.01em; }
h2, .h2 { font-size: 1.15rem; margin: 22px 0 10px; line-height: 1.25; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.saltar { position: absolute; left: 8px; top: -60px; z-index: 50; padding: 10px 14px; background: var(--oscuro); color: #fff; border-radius: 8px; font-weight: 700; }
.saltar:focus { top: 8px; }

:focus-visible { outline: 3px solid var(--txt); outline-offset: 2px; box-shadow: 0 0 0 5px var(--bg); }
.btn-primary:focus-visible, .franja :focus-visible { outline-color: #fff; box-shadow: 0 0 0 5px var(--acc-d); }
input[type=radio], input[type=checkbox] { accent-color: var(--acc); }

/* ---------- franja de beneficios ---------- */
.franja { background: var(--oscuro); color: #fff; font-size: .85rem; }
/* En el celular no se desliza (parecía que había que arrastrarla): sin JS, los avisos se acomodan en renglones centrados; con JS (tienda.js, clase
   .rota) se muestra uno por vez y cambia cada 4 s. Con «reducir movimiento» quedan los renglones. En la PC van todos en una línea. */
.franja ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 16px; margin: 0 auto; padding-top: 7px; padding-bottom: 7px; text-align: center; }
.franja li { flex: 0 1 auto; }
@media (min-width: 900px) {
  .franja ul { flex-wrap: nowrap; gap: 8px 22px; white-space: nowrap; }
  .franja li + li::before { content: "•"; margin-right: 22px; opacity: .55; }
}
@media (max-width: 899px) and (prefers-reduced-motion: no-preference) {
  html.js .franja:not(.rota) li + li { display: none; }   /* hasta que arranca tienda.js: sin el salto de varios renglones a uno */
}
@media (max-width: 899px) {
  .franja.rota ul { display: grid; min-height: 1.5em; }
  .franja.rota li { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility 0s linear .45s; }
  .franja.rota li.ver { opacity: 1; visibility: visible; transition: opacity .45s ease; }
}

/* ---------- encabezado ---------- */
.top { position: sticky; top: 0; z-index: 30; background: var(--top-bg); border-bottom: 1px solid var(--bd); }
/* Logo (o nombre) y eslogan centrados (2026-10-29): las dos columnas de los costados miden lo mismo (1fr), así el centro queda centrado de verdad;
   el ancho de la marca se limita para que no pise los botones de la derecha. */
.top-in { display: grid; grid-template-columns: 1fr auto 1fr; grid-template-areas: ". marca carrito" "buscar buscar buscar"; align-items: center; gap: 8px 8px; padding-top: 8px; padding-bottom: 10px; }
.marca { grid-area: marca; justify-self: center; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; max-width: max(140px, calc(100vw - 240px)); text-align: center; }
.marca .eslogan { display: block; height: 22px; width: auto; max-width: 100%; object-fit: contain; }
.top .brand { color: var(--txt); text-decoration: none; font-weight: 800; font-size: 1.2rem; line-height: 1.2; min-height: var(--tap); display: inline-flex; align-items: center; overflow-wrap: anywhere; letter-spacing: -.01em; }
.top .brand { justify-content: center; max-width: 100%; }
.top .brand-logo img { display: block; height: 40px; width: auto; max-width: min(180px, 100%); object-fit: contain; }
/* Tamaño del nombre del comercio cuando no hay logo (POS, migración 025); «normal» = 1.2rem de arriba */
.top .brand.tam-chico { font-size: 1rem; }
.top .brand.tam-grande { font-size: 1.35rem; }
.top .brand.tam-muy_grande { font-size: 1.6rem; }
@media (min-width: 900px) { .top .brand.tam-grande { font-size: 1.5rem; } .top .brand.tam-muy_grande { font-size: 2rem; } }
@media (min-width: 900px) { .top .brand-logo img { height: 52px; max-width: 240px; } .marca { max-width: 420px; } .marca .eslogan { height: 28px; } }
.buscador { grid-area: buscar; display: flex; align-items: stretch; background: var(--surface); border: 2px solid var(--acc-b); border-radius: 999px; position: relative;
  box-shadow: 0 2px 8px rgba(31, 35, 40, .08); }
/* Sugerencias del buscador (tienda.js): debajo del campo, encima del resto. */
.sug { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60; margin: 0; padding: 6px; list-style: none; background: var(--surface);
  border: 1px solid var(--bd); border-radius: var(--r); box-shadow: var(--sombra); max-height: min(70vh, 460px); overflow-y: auto; }
.sug[hidden] { display: none; }
.sug a { display: flex; align-items: center; gap: 10px; min-height: var(--tap); padding: 6px 8px; border-radius: 8px; color: var(--txt); text-decoration: none; }
.sug a:hover, .sug li[aria-selected="true"] a { background: var(--acc-soft); }
.sug img, .sug-sin { flex: none; width: 40px; height: 40px; border-radius: 6px; object-fit: contain; background: var(--bg-2); }
.sug-n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sug-p { flex: none; font-weight: 700; }
.buscador:focus-within { box-shadow: 0 0 0 4px var(--acc-soft), 0 2px 8px rgba(31, 35, 40, .08); }
.buscador input { flex: 1; min-width: 0; min-height: 50px; padding: 10px 8px 10px 20px; border: 0; background: transparent; color: var(--txt); font-size: 1.05rem; }
.buscador input:focus-visible { outline: none; box-shadow: none; }
.buscador input::placeholder { color: var(--mut); opacity: 1; }
.buscador button { width: 58px; margin: 4px; border: 0; border-radius: 999px; background: var(--acc); color: var(--acc-txt); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.buscador button:hover { background: var(--acc-h); }
.buscador button:focus-visible { outline-color: var(--txt); }
.buscador svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.top-acc { grid-area: carrito; justify-self: end; display: flex; align-items: center; gap: 4px; }
.tema-btn { display: inline-flex; align-items: center; justify-content: center; width: var(--tap); height: var(--tap); border: 1px solid var(--bd); border-radius: 999px; background: var(--surface); color: var(--txt); cursor: pointer; }
.tema-btn:hover { border-color: var(--txt); }
.tema-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tema-btn .ico-sol, html[data-tema="oscuro"] .tema-btn .ico-luna { display: none; }
html[data-tema="oscuro"] .tema-btn .ico-sol { display: block; }
.cart-link { position: relative; display: inline-flex; align-items: center; gap: 8px; min-width: var(--tap); min-height: var(--tap); padding: 0 6px; color: var(--txt); text-decoration: none; border-radius: 10px; }
.cart-link:hover { background: var(--bg-2); }
.cart-icon { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cart-total { display: none; margin-left: 6px; font-weight: 800; }
.cart-count { position: absolute; top: -2px; left: 18px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px; background: var(--acc); color: var(--acc-txt); font-size: .8rem; font-weight: 700; line-height: 22px; text-align: center; }
@media (min-width: 900px) {
  .top-in { grid-template-columns: 1fr minmax(280px, 620px) 1fr; grid-template-areas: ". marca carrito" ". buscar ."; gap: 10px 24px; padding-top: 10px; padding-bottom: 12px; }
  .cart-total:not([hidden]) { display: inline; }
}

/* ---------- avisos ---------- */
.banner { padding: 12px 14px; border-radius: 10px; margin: 10px 0; font-size: 1rem; }
.banner-warn { background: var(--warn); border: 1px solid var(--warn-bd); }
.banner-err { background: var(--err); border: 1px solid var(--err-bd); }
.banner-ok { background: var(--ok-bg); border: 1px solid var(--ok); }
.banner strong { display: block; }
.banner-cerrado { position: sticky; top: 112px; z-index: 9; }
@media (min-width: 900px) { .banner-cerrado { top: 72px; } }

/* ---------- migas ---------- */
.migas ol { list-style: none; display: flex; flex-wrap: wrap; gap: 2px 0; margin: 0 0 12px; padding: 0; font-size: .9rem; color: var(--mut); }
.migas li { display: inline-flex; align-items: center; min-width: 0; }
.migas li + li::before { content: ""; width: 14px; height: 14px; margin: 0 6px; background: var(--bd-2); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; }
.migas a { color: var(--mut); text-decoration: none; padding: 6px 0; }
.migas a:hover { color: var(--txt); text-decoration: underline; }
.migas [aria-current] { color: var(--txt); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60vw; }

/* ---------- columnas: menú lateral + listado ---------- */
.tienda-cols { display: grid; gap: 16px; }
@media (min-width: 900px) { .tienda-cols { grid-template-columns: 250px minmax(0, 1fr); gap: 32px; align-items: start; } }

.lat-caja { border: 1px solid var(--bd); border-radius: var(--r); background: var(--surface); }
.lat-t { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 10px; min-height: 50px; padding: 12px 16px; border: 0; background: none; color: var(--txt);
  font: inherit; font-size: .82rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; text-align: left; cursor: pointer; border-radius: var(--r); }
.chev { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; }
.lat-t[aria-expanded="true"] .chev { transform: rotate(180deg); }
.lat-menu { padding: 0 8px 10px; }
.js .lat-caja:not(.abierta) .lat-menu { display: none; }
@media (min-width: 900px) {
  .lateral { position: sticky; top: 92px; max-height: calc(100vh - 110px); overflow-y: auto; }
  .lat-t { cursor: default; border-bottom: 1px solid var(--bd); border-radius: var(--r) var(--r) 0 0; margin-bottom: 6px; }
  .lat-t .chev { display: none; }
  .js .lat-caja:not(.abierta) .lat-menu { display: block; }   /* en escritorio siempre desplegado */
}
.acc, .acc ul { list-style: none; margin: 0; padding: 0; }
.acc ul { padding: 2px 0 6px 12px; margin-left: 8px; border-left: 2px solid var(--bd); }
.acc-a, .acc-s { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 40px; padding: 7px 10px; border-radius: 8px; color: var(--txt); text-decoration: none; font-size: .97rem; line-height: 1.3; cursor: pointer; }
.acc-a:hover, .acc-s:hover { background: var(--bg-2); }
.acc-a.sub { font-size: .93rem; min-height: 44px; color: var(--txt-2); }
@media (min-width: 900px) { .acc-a.sub { min-height: 36px; } }   /* con mouse alcanza; en el celular, 44 px para el dedo */
.acc-a.actual { color: var(--link); font-weight: 700; background: var(--acc-soft); }
.acc-s.actual { color: var(--link); font-weight: 700; }
.acc-s { list-style: none; }
.acc-s::-webkit-details-marker { display: none; }
.acc-s span:first-child, .acc-a span:first-child { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.acc-d[open] > .acc-s .chev { transform: rotate(180deg); }
.n { flex: 0 0 auto; min-width: 26px; padding: 1px 7px; border-radius: 999px; background: var(--bg-2); color: var(--mut); font-size: .78rem; font-weight: 600; text-align: center; }
.actual .n { background: var(--surface); }

/* ---------- listado ---------- */
.listado-cab { margin-bottom: 14px; }
.listado-cab .h { margin-bottom: 6px; }
.listado-barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding-bottom: 12px; border-bottom: 1px solid var(--bd); }
.cuenta { margin: 0; font-size: .95rem; }
.orden { display: flex; align-items: center; gap: 8px; font-size: .95rem; }
.orden label { color: var(--mut); }
.orden select { min-height: 42px; padding: 8px 34px 8px 12px; border: 1px solid var(--bd-2); border-radius: 10px; background: var(--surface); color: var(--txt); font-size: .95rem; }

.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
@media (min-width: 620px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 18px; } }
@media (min-width: 1180px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 900px) { .grid-rel { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.prod { position: relative; display: flex; flex-direction: column; min-width: 0; }
.prod .ph { display: block; position: relative; text-decoration: none; aspect-ratio: 1 / 1; border-radius: var(--r); overflow: hidden; background: var(--foto-bg); }
.prod .ph img { width: 100%; height: 100%; object-fit: contain; display: block; mix-blend-mode: multiply; }
@media (prefers-reduced-motion: no-preference) {
  .prod .ph img { transition: transform .35s ease; }
  .prod:hover .ph img { transform: scale(1.04); }
}
.sin-foto { display: flex; text-decoration: none; width: 100%; height: 100%; align-items: center; justify-content: center; font-size: 2.4rem; font-weight: 800; letter-spacing: .02em; color: #5a4034; background: #ece4dc; }
.sin-foto.t1 { background: #dfe6dc; color: #33452f; } .sin-foto.t2 { background: #dce4ea; color: #2f4254; }
.sin-foto.t3 { background: #eadfd0; color: #5a4325; } .sin-foto.t4 { background: #e6dde8; color: #47304f; } .sin-foto.t5 { background: #e2e2dc; color: #44443c; }
.etq { position: absolute; top: 10px; left: 10px; z-index: 2; padding: 3px 9px; border-radius: 999px; font-size: .8rem; font-weight: 800; line-height: 1.4; }
.etq-oferta { background: var(--sale-bg); color: #fff; }
.etq-agotado { background: var(--surface); color: var(--txt); border: 1px solid var(--bd); }
.prod .info { padding: 10px 2px 0; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.prod .nm { margin: 0; font-size: .98rem; font-weight: 600; line-height: 1.3; flex: 1; }
.prod .nm a { color: var(--txt); text-decoration: none; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.prod .nm a:hover { text-decoration: underline; }
.prod .nm a::after { content: ""; position: absolute; inset: 0 0 56px 0; z-index: 1; }   /* toda la tarjeta (menos el botón) lleva al producto */
.pr { margin: 4px 0 0; font-weight: 800; font-size: clamp(1.3rem, 1rem + 1.4vw, 1.6rem); line-height: 1.15; letter-spacing: -.015em; font-variant-numeric: tabular-nums; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.pr del { color: var(--mut); font-weight: 500; font-size: .68em; letter-spacing: 0; }
.pr ins { text-decoration: none; color: var(--sale); }
.stock-l { margin: 0; min-height: 1.3em; font-size: .85rem; font-weight: 600; line-height: 1.3; color: var(--ok); }
.stock-l.s-bajo { color: var(--bajo-txt); }
.accion { position: relative; z-index: 2; margin-top: 6px; }
.accion .btn { width: 100%; }
.prod.agotado .ph { opacity: .55; }
.tag-agotado { display: inline-block; min-height: var(--tap); padding: 11px 0; color: var(--mut); font-size: .95rem; font-weight: 600; }

/* paginación */
.paginas ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 30px 0 4px; padding: 0; }
.pg { display: inline-flex; align-items: center; justify-content: center; min-width: var(--tap); height: var(--tap); padding: 0 10px; border: 1px solid var(--bd); border-radius: 10px; color: var(--txt); text-decoration: none; font-weight: 600; }
a.pg:hover { border-color: var(--txt); }
.pg-actual { background: var(--txt); border-color: var(--txt); color: var(--bg); }
.pg-salto { border-color: transparent; min-width: 24px; }
.pg-flecha svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- ficha del producto ---------- */
.ficha { display: grid; gap: 20px; margin-bottom: 8px; }
@media (min-width: 900px) { .ficha { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 48px; align-items: start; } }
.ficha-foto { position: relative; aspect-ratio: 1 / 1; border-radius: 16px; overflow: hidden; background: var(--foto-bg); }
.ficha-foto img { width: 100%; height: 100%; object-fit: contain; display: block; mix-blend-mode: multiply; }
.ficha-zoom { display: block; height: 100%; cursor: zoom-in; }
.etq-g { top: 16px; left: 16px; font-size: .95rem; padding: 5px 12px; }
.ficha-t { margin: 0 0 10px; font-size: 1.55rem; line-height: 1.2; letter-spacing: -.01em; overflow-wrap: anywhere; }
@media (min-width: 900px) { .ficha-t { font-size: 1.9rem; } }
.ficha-pr { font-size: clamp(2.2rem, 1.5rem + 2.6vw, 3rem); margin: 4px 0 4px; letter-spacing: -.02em; }
.ahorro { margin: 0 0 6px; color: var(--sale); font-weight: 700; font-size: .95rem; }
.stock { display: inline-block; margin: 10px 0 4px; padding: 4px 12px; border-radius: 999px; font-size: .9rem; font-weight: 700; }
.stock-ok { background: var(--ok-bg); color: var(--ok); }
.stock-bajo { background: var(--bajo-bg); color: var(--bajo-txt); }
.stock-no { background: var(--bg-2); color: var(--mut); }
.comprar { margin: 16px 0 6px; }
.comprar-linea { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; }
.qty-g { flex: 0 0 auto; }
.qty-g button { width: 48px; height: 52px; }
.qty-g span { min-width: 40px; }
.btn-agregar { flex: 1 1 200px; min-height: 52px; font-size: 1.05rem; }
.en-carrito { margin: 10px 0 0; font-size: .95rem; color: var(--mut); }
.en-carrito:empty { display: none; }
.beneficios { list-style: none; margin: 18px 0; padding: 14px 16px; border: 1px solid var(--bd); border-radius: var(--r); display: grid; gap: 8px; font-size: .95rem; }
.beneficios li { display: flex; gap: 10px; align-items: baseline; }
.beneficios li { align-items: center; }
.beneficios li::before { content: ""; flex: 0 0 18px; width: 18px; height: 18px; background: var(--ok); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; }
.ficha-datos { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--bd); font-size: .92rem; display: grid; gap: 4px; }
.ficha-datos div { display: flex; gap: 8px; }
.ficha-datos dt { color: var(--mut); min-width: 84px; }
.ficha-datos dd { margin: 0; overflow-wrap: anywhere; }
.relacionados { margin-top: 36px; padding-top: 8px; border-top: 1px solid var(--bd); }

/* barra fija de compra (ficha) */
.pegajosa { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; background: var(--top-bg); border-top: 1px solid var(--bd); box-shadow: 0 -6px 20px rgba(31, 35, 40, .08); }
.pegajosa-in { display: flex; align-items: center; gap: 12px; padding-top: 10px; padding-bottom: 10px; }
.peg-foto { flex: 0 0 48px; width: 48px; height: 48px; border-radius: 8px; overflow: hidden; background: var(--foto-bg); }
.peg-foto img, .peg-foto .sin-foto { width: 48px; height: 48px; object-fit: contain; font-size: 1rem; }
.peg-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.peg-nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: .95rem; }
.peg-pr { font-weight: 800; font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.peg-accion .btn { min-width: 120px; }

/* aviso «Agregaste…» */
.toast { position: fixed; left: 50%; bottom: calc(var(--bar-h) + 12px); z-index: 40; transform: translateX(-50%); display: flex; gap: 14px; align-items: center; max-width: calc(100% - 32px);
  margin: 0; padding: 12px 18px; border-radius: 12px; background: var(--oscuro); color: #fff; box-shadow: var(--sombra); font-size: .95rem; }
.toast span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toast a { color: #fff; font-weight: 700; white-space: nowrap; }

/* ---------- botones y cantidad ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--tap); padding: 10px 18px; border: 1px solid var(--acc-b); border-radius: 10px; background: var(--surface); color: var(--link); font: inherit; font-size: 1rem; font-weight: 700; text-decoration: none; cursor: pointer; text-align: center; }
.btn-primary { background: var(--acc); border-color: var(--acc); color: var(--acc-txt); }
.btn-primary:hover { background: var(--acc-h); border-color: var(--acc-h); }
.btn-primary:active { background: var(--acc-h); }
.btn-ghost { border-color: var(--bd-2); color: var(--txt); }
.btn-ghost:hover { border-color: var(--txt); }
.btn-block { display: flex; width: 100%; min-height: 52px; font-size: 1.05rem; }
.cartbar .btn-block { justify-content: space-between; }
.btn[disabled], .btn[aria-disabled=true] { background: var(--off-bg); border-color: var(--off-bg); color: var(--off-txt); cursor: not-allowed; }
.btn-sm { min-height: var(--tap); padding: 10px 12px; font-size: 1rem; }

.qty { display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--acc-b); border-radius: 10px; overflow: hidden; background: var(--surface); }
.qty button { display: inline-flex; align-items: center; justify-content: center; width: var(--tap); height: var(--tap); border: 0; background: var(--surface); color: var(--link); font: inherit; line-height: 1; cursor: pointer; }
.qty button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.qty button:hover:not([disabled]) { background: var(--acc-soft); }
.qty button[disabled] { color: var(--bd-2); cursor: not-allowed; }
.qty span { min-width: 34px; flex: 1; text-align: center; font-weight: 700; }
.linea .qty { display: inline-flex; }

.cartbar { position: fixed; left: 0; right: 0; bottom: 0; padding: 10px 16px; background: linear-gradient(var(--fade), var(--bg) 35%); z-index: 20; }
.cartbar .btn { max-width: 960px; margin: 0 auto; }
.cartbar .falta { max-width: 960px; margin: 0 auto 6px; text-align: center; font-size: .92rem; font-weight: 600; color: var(--txt); }

/* ---------- carrito, checkout y estado del pedido ---------- */
.card { background: var(--card); border: 1px solid var(--bd); border-radius: var(--r); padding: 16px; margin-bottom: 12px; }
.card.msg { text-align: center; margin-top: 30px; }
.texto { max-width: 760px; }
.texto li { margin-bottom: 6px; }
.texto .acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.pasos-compra { padding-left: 22px; }
.vacio-box { text-align: center; padding: 36px 8px; }
.vacio-box p { margin: 0 0 6px; }
.vacio-box .t { font-size: 1.15rem; font-weight: 700; }
.vacio-box .btn { margin-top: 14px; }

.linea { display: grid; grid-template-columns: 64px 1fr auto; gap: 4px 12px; padding: 12px 0; border-bottom: 1px solid var(--bd); }
.linea:last-child { border-bottom: 0; }
.linea .mini { grid-column: 1; grid-row: 1 / span 2; align-self: start; width: 64px; height: 64px; border-radius: 10px; overflow: hidden; background: var(--foto-bg); display: block; }
.linea .mini img { display: block; width: 100%; height: 100%; object-fit: contain; }
.linea .mini .sin-foto { font-size: 1.1rem; }
.linea .nm { grid-column: 2 / 3; overflow-wrap: anywhere; }
.linea .sub { grid-column: 3 / 4; text-align: right; font-weight: 800; font-size: 1.15rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.linea .ctl { grid-column: 2 / 4; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; }
.linea .quitar { min-height: var(--tap); padding: 0 12px; margin-left: auto; border: 0; background: none; color: var(--danger); font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }
.linea .err { grid-column: 2 / 4; color: var(--danger); font-size: .95rem; font-weight: 600; }
.linea .ajustar { grid-column: 2 / 4; justify-self: start; }
.linea.problema { background: var(--danger-bg); margin: 0 -16px; padding-left: 16px; padding-right: 16px; }

.form label { display: block; margin: 14px 0 4px; font-weight: 600; font-size: 1rem; }
.form .ayuda { margin: 2px 0 0; font-size: .92rem; color: var(--mut); }
.form input[type=text], .form input[type=tel] { width: 100%; min-height: 48px; padding: 12px; border: 1px solid var(--bd-2); border-radius: 10px; font-size: 1rem; background: var(--surface); color: var(--txt); }
.form input[aria-invalid=true] { border-color: var(--danger); border-width: 2px; }
.form .campo-err { margin: 4px 0 0; color: var(--danger); font-size: .95rem; font-weight: 600; }
.form fieldset { border: 0; margin: 22px 0 0; padding: 0; min-inline-size: 0; }
.form legend { padding: 0; font-size: 1.1rem; font-weight: 700; margin: 0 0 8px; }
.radios { display: grid; gap: 8px; }
.radios label { display: flex; gap: 12px; align-items: center; margin: 0; padding: 12px; min-height: 52px; border: 1px solid var(--bd-2); border-radius: 10px; font-weight: 500; cursor: pointer; }
.radios label:has(input:checked) { border-color: var(--acc-b); background: var(--acc-soft); }
.radios input { width: 22px; height: 22px; flex: 0 0 auto; }
.radios .sub-op { display: block; font-size: .9rem; color: var(--mut); }
/* QR de pago en la página del pedido: fondo blanco siempre (en modo oscuro también, para que se escanee) */
.qr-box { text-align: center; margin: 12px 0; }
.qr-box img { display: block; margin: 8px auto; width: min(260px, 80vw); height: auto; padding: 12px; background: #fff; border-radius: 12px; border: 1px solid var(--bd); }
.qr-box .qr-cel { display: none; }
/* en el celular no se puede escanear la propia pantalla: se ofrece el botón de pago (mismo link) */
@media (max-width: 699px) { .qr-box img, .qr-box .qr-pc, .qr-box #qr-vence { display: none; } .qr-box .qr-cel { display: block; } }
/* «Quiero factura» del checkout */
.form .check { display: flex; gap: 12px; align-items: center; margin: 14px 0 4px; padding: 12px; min-height: 52px; border: 1px solid var(--bd-2); border-radius: 10px; font-weight: 500; cursor: pointer; }
.form .check:has(input:checked) { border-color: var(--acc-b); background: var(--acc-soft); }
.form .check input { width: 22px; height: 22px; flex: 0 0 auto; margin: 0; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.totales { margin: 16px 0 8px; }
.totales div { display: flex; justify-content: space-between; gap: 16px; padding: 4px 0; }
.totales dt, .totales dd { margin: 0; }
.totales dd { text-align: right; overflow-wrap: anywhere; }
.totales .total { font-size: 1.5rem; font-weight: 800; border-top: 1px solid var(--bd); margin-top: 6px; padding-top: 8px; }
.totales .entrega { flex-direction: column; gap: 2px; }
.totales .entrega dd { text-align: left; }
.totales .entrega dt { color: var(--mut); font-size: .92rem; }

.estado-pill { display: inline-block; padding: 8px 16px; border-radius: 999px; background: var(--acc); color: var(--acc-txt); font-weight: 700; margin: 0 0 6px; }
.estado-pill.ok { background: var(--ok); }
.estado-pill.neutro { background: #4b5160; }
.estado-pill.mal { background: var(--danger); }
.pasos { list-style: none; display: flex; padding: 0; margin: 14px 0; gap: 4px; }
.pasos li { flex: 1; min-width: 0; overflow-wrap: anywhere; text-align: center; font-size: .88rem; padding: 8px 2px; border-top: 5px solid var(--bd); color: var(--mut); }
.pasos li.hecho { border-top-color: var(--acc); color: var(--txt); }
.pasos li.actual { border-top-color: var(--acc-d); color: var(--txt); font-weight: 800; }
.det-linea { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--bd); }
.det-linea span:first-child { overflow-wrap: anywhere; }
.guardar { margin-top: 16px; padding: 12px; border-radius: 10px; background: var(--acc-soft); font-size: .95rem; }
.guardar p { margin: 0 0 8px; }
.guardar .btn { min-height: var(--tap); }
.actualizado { margin: 8px 0 0; font-size: .88rem; color: var(--mut); }
.lista-ajuste { margin: 8px 0; padding-left: 20px; }

/* ---------- contacto, WhatsApp y pie ---------- */
.local .local-t { margin: 0 0 6px; }
.local .local-n { margin: 0 0 4px; font-weight: 700; }
.local p { margin: 0 0 4px; overflow-wrap: anywhere; }
.local-b { margin-top: 10px !important; }
.local a:not(.btn) { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 4px; }
.btn-wa { background: var(--wa); border-color: var(--wa); color: #fff; }
.btn-wa:hover, .btn-wa:active { background: #07503a; border-color: #07503a; }
.btn-wa-ghost { border-color: var(--wa-txt); color: var(--wa-txt); }
/* Botón flotante de WhatsApp (todas las páginas menos la del pedido): arriba de la barra del carrito donde la hay. */
.wa-flota { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 22; width: 56px; height: 56px; border-radius: 50%; background: var(--wa); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(0, 0, 0, .22); }
.wa-flota:hover { background: #07503a; }
.wa-flota:focus-visible { outline: 3px solid var(--txt); outline-offset: 3px; }
.wa-flota svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.wa-flota .wa-tel { fill: currentColor; stroke: none; }
.v-catalogo .wa-flota, .v-producto .wa-flota { bottom: calc(var(--bar-h) + 16px + env(safe-area-inset-bottom)); }
@media (min-width: 900px) { .wa-flota { right: 24px; } }

.pie { margin-top: 56px; background: var(--pie-bg); color: var(--pie-txt); text-align: center; }
.pie-in { display: flex; flex-direction: column; align-items: center; gap: 26px; padding-top: 56px; padding-bottom: 28px; }
.pie-marca { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.pie-nombre { margin: 0; font-size: clamp(1.6rem, 4vw, 2.3rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; color: #fff; }
.pie-logo img { display: block; height: 56px; width: auto; max-width: 240px; object-fit: contain; background: #fff; border-radius: 12px; padding: 6px 14px; }
.pie-dir { margin: 0; color: var(--pie-mut); font-size: 1rem; max-width: 46ch; }
.pie-contacto { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.pie-btn { min-height: 50px; padding: 12px 22px; border-radius: 999px; font-size: 1rem; }
.pie-btn-tel { background: transparent; border-color: var(--pie-bd); color: var(--pie-txt); }
.pie-btn-tel:hover { border-color: var(--pie-txt); }
.pie .btn-wa { background: #0b6b4a; border-color: #0b6b4a; }
.pie-chips { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; }
.pie-chips li { padding: 7px 14px; border: 1px solid var(--pie-bd); border-radius: 999px; color: var(--pie-txt); font-size: .9rem; background: rgba(255, 255, 255, .03); }
.pie-nav ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 22px; margin: 0; padding: 0; }
.pie-nav li { display: inline-flex; align-items: center; }
.pie-nav a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 2px; color: var(--pie-txt); text-decoration: none; font-weight: 600; }
.pie-nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.pie-ayuda a { color: var(--pie-mut); font-weight: 500; }
.pie :focus-visible { outline-color: #fff; box-shadow: 0 0 0 5px var(--pie-bg); }
.pie-hecho { width: 100%; margin: 0; font-size: .8rem; color: var(--pie-mut); }   /* publicidad de BMind (config promo_bmind) */
.pie-hecho a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.pie-legal { width: 100%; margin: 6px 0 0; padding-top: 20px; border-top: 1px solid var(--pie-bd); font-size: .85rem; color: var(--pie-mut); }
.v-catalogo .pie-in { padding-bottom: calc(28px + var(--bar-h)); }   /* lugar para la barra del carrito (fija abajo) */
.con-pegajosa .pie-in { padding-bottom: calc(28px + 76px); }

/* El único momento animado: al agregar al carrito, el carrito da un salto y el aviso sube. Curva exponencial de salida; nada si el sistema pide menos movimiento. */
@media (prefers-reduced-motion: no-preference) {
  .cart-link.salto .cart-icon { animation: salto .5s cubic-bezier(.16, 1, .3, 1); }
  .toast:not([hidden]) { animation: sube .35s cubic-bezier(.16, 1, .3, 1); }
}
@keyframes salto { 0% { transform: translateY(0) scale(1); } 35% { transform: translateY(-5px) scale(1.12); } 100% { transform: none; } }
@keyframes sube { from { opacity: 0; transform: translate(-50%, 14px); } to { opacity: 1; transform: translate(-50%, 0); } }

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }
html[data-tema="oscuro"] .top .brand-logo img, html[data-tema="oscuro"] .marca .eslogan { background: #fff; border-radius: 10px; padding: 4px 10px; }   /* muchos logos tienen texto oscuro sobre fondo transparente */
html[data-tema="oscuro"] .marca .eslogan { padding: 2px 8px; border-radius: 6px; }

/* miniaturas del carrito: en pantallas muy angostas, un poco más chicas */
@media (max-width: 360px) { .linea { grid-template-columns: 52px 1fr auto; } .linea .mini { width: 52px; height: 52px; } }

/* ---------- foto de la ficha: lupa y visor (1.4.0) ---------- */
.ficha-zoom { display: block; width: 100%; height: 100%; cursor: zoom-in; }
.ficha-foto img { transition: transform .2s ease; transform-origin: var(--zx, 50%) var(--zy, 50%); }
.ficha-foto.lupa-on img { transform: scale(2.2); }
.ficha-foto .lupa { position: absolute; right: 12px; bottom: 12px; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .92);
  box-shadow: 0 2px 10px rgba(31, 35, 40, .22); display: flex; align-items: center; justify-content: center; pointer-events: none; transition: opacity .2s ease; }
.ficha-foto .lupa svg { width: 24px; height: 24px; fill: none; stroke: #1f2328; stroke-width: 2; stroke-linecap: round; }
.ficha-foto.lupa-on .lupa { opacity: 0; }
html.visor-abierto { overflow: hidden; }
.visor { position: fixed; inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #0a0b0d; color: #fff; }
.visor::backdrop { background: rgba(10, 11, 13, .6); }
.visor-lienzo { width: 100%; height: 100%; overflow: auto; overscroll-behavior: contain; display: grid; place-items: center; -webkit-overflow-scrolling: touch; }
.visor-lienzo img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; background: #fff; cursor: zoom-in; user-select: none; -webkit-user-drag: none; }
.visor.ampliada .visor-lienzo { display: block; place-items: start; justify-items: start; }   /* centrado + desborde corre la foto a una zona sin desplazamiento */
.visor.ampliada .visor-lienzo img { max-width: none; max-height: none; width: min(250vw, 2400px); cursor: grab; }
.visor.arrastrando .visor-lienzo img { cursor: grabbing; }
.visor-cerrar { position: fixed; top: max(12px, env(safe-area-inset-top)); right: 12px; width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .95);
  display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 12px rgba(0, 0, 0, .35); }
.visor-cerrar svg { width: 24px; height: 24px; fill: none; stroke: #1f2328; stroke-width: 2.4; stroke-linecap: round; }
.visor-cerrar:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.visor-ayuda { position: fixed; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); transform: translateX(-50%); margin: 0; padding: 8px 14px; border-radius: 999px;
  background: rgba(0, 0, 0, .65); color: #fff; font-size: .9rem; white-space: nowrap; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .ficha-foto img { transition: none; } }

/* ---------- pago con tarjeta en la página del pedido (1.5.0, Card Payment Brick de Mercado Pago) ---------- */
.tarjeta-box { margin: 18px 0 8px; padding: 16px; border: 1px solid var(--bd); border-radius: var(--r); background: var(--surface); }
.tarjeta-t { margin: 0 0 4px; font-size: 1.15rem; }
.tarjeta-seg { margin: 0 0 10px; font-size: .9rem; }
#tarjeta-form { min-height: 120px; }
.tarjeta-o { margin: 12px 0 0; }

/* ---- Precio por cantidad y mayorista (POS: PrecioCantidadFunctions) ---- */
.promo-may { margin: 14px 0 18px; padding: 14px 16px; border: 2px solid var(--acc); border-radius: var(--r); background: var(--acc-soft); color: var(--txt); }
.promo-may-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.promo-may-t { margin: 0; font-size: 1.15rem; line-height: 1.25; }
.promo-may-sin { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--acc); color: var(--acc-txt); font-size: .8rem; font-weight: 700; }
.promo-may-l { margin: 8px 0 0; padding-left: 1.2em; }
.promo-may-l li { margin: 2px 0; }
.promo-may-l strong { color: var(--txt); }
.promo-may-nota { margin: 6px 0 0; color: var(--mut); font-size: .85rem; }
.promo-falta { margin-top: 10px; }
.promo-falta p { margin: 0 0 6px; font-weight: 600; }
.promo-falta.ok p { color: var(--ok); }
.promo-barra { height: 10px; border-radius: 999px; background: var(--bg); border: 1px solid var(--bd); overflow: hidden; }
.promo-barra span { display: block; height: 100%; width: 0; background: var(--acc); transition: width .3s ease; }
.promo-falta.ok .promo-barra span { background: var(--ok); }
@media (prefers-reduced-motion: reduce) { .promo-barra span { transition: none; } }

.escala { margin: 12px 0; padding: 12px 14px; border: 1px solid var(--bd); border-radius: var(--r); background: var(--bg-2); }
.escala-t { margin: 0 0 8px; font-size: 1rem; }
.escala-tabla { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.escala-tabla th { text-align: left; font-weight: 600; color: var(--mut); font-size: .85rem; padding: 4px 6px; border-bottom: 1px solid var(--bd); }
.escala-tabla td { padding: 6px; border-bottom: 1px solid var(--bd); }
.escala-tabla tr:last-child td { border-bottom: 0; }
.escala-off { color: var(--sale); font-weight: 700; text-align: right; }
.escala-may { margin: 8px 0 0; }

.cu-promo s { color: var(--mut); }
.etq-promo { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--bajo-bg); color: var(--bajo-txt); font-size: .78rem; font-weight: 700; white-space: nowrap; }
.etq-promo.may { background: var(--ok-bg); color: var(--ok); }

/* reCAPTCHA v3 (017): el distintivo se oculta y en su lugar va el texto legal de Google, como permite Google */
.grecaptcha-badge { visibility: hidden; }
.rc-legal { max-width: 720px; margin: 16px auto; padding: 0 16px; font-size: 12px; color: var(--suave, #666); text-align: center; }