/* =====================================================================
   LA MAYORISTA — style.css  (CSS global, compartido por todas las páginas)
   Valores exactos tomados de los prototipos design_handoff/prototipos_codigo/*.dc.html
   (ver CLAUDE.md §0.5 — el diseño es el contrato).
   Estructura:
     1. Tokens (:root)            §3.1
     2. Reset / base              §2.5
     3. @keyframes                §3.4
     4. Layout / page-wrap
     5. Header + logo lockup
     6. Navegación (top + bottom) responsive
     7. Botones
     8. Grid de productos + card
     9. Badges (carrito, estado, stock, nacional)
    10. Bottom-sheet de presentaciones
    11. Carrito (items, resumen, pago)
    12. Catálogo (tabs, búsqueda, sort, cart-bar)
    13. Formularios / inputs
    14. Steppers de cantidad
    15. Modales base + toggle
    16. WhatsApp float
    17. Estado vacío
    18. Utilidades / accesibilidad
   NOTA: los estilos específicos del panel Admin se agregan al portar esa
   pantalla en la Fase 3 (bloque "ADMIN").
   ===================================================================== */

/* ---------- 1. TOKENS ---------- */
:root {
  --azul:        #03178F;
  --azul-900:    #021254;
  --azul-bg:     #EAEDF8;   /* chips/badges azul claro sobre blanco */
  --azul-soft:   #9DB0FF;   /* texto azul claro sobre fondos oscuros */
  --rojo:        #FF0006;
  --rojo-ink:    #C0334A;   /* texto rojo (descuentos, danger) */
  --wa:          #25D366;
  --wa-dark:     #1FBE5A;
  --tinta:       #15161A;
  --texto:       #34363F;
  --texto-2:     #5A5C68;
  --muted:       #9A9CA8;
  --gris-bg:     #F4F5FA;
  --gris-2:      #F3F4F8;
  --linea:       #ECEDF2;
  --linea-2:     #E2E4EC;
  --blanco:      #FFFFFF;

  /* Badges de estado de pedido */
  --st-pend-bg:  #FFF3D6;  --st-pend-tx: #B8860B;
  --st-apro-bg:  #DCF6E6;  --st-apro-tx: #1B8A4D;
  --st-rech-bg:  #FCE2E5;  --st-rech-tx: #C0334A;

  /* Alto del header sticky. Lo mide y actualiza catalogo.js: cualquier cosa
     que se pegue debajo (la barra de categorías) depende de este valor y si
     queda desfasado se ve cortada por el header. */
  --hdr-h: 69px;

  /* Ancho máximo del contenido. El fondo de las secciones llega igual hasta el
     borde de la pantalla; esto solo evita que una línea de texto se estire
     tanto que cueste leerla. Subir o bajar este número mueve todo el sitio.
     El catálogo lo pisa con uno más grande: ahí, más ancho = más columnas de
     producto, que es ganancia pura. */
  --ancho-contenido: 1440px;

  /* El catálogo va más ancho a propósito: la grilla se rellena sola, así que
     cada píxel de más es otra columna de productos. En un monitor de 2560 se
     pasa de 4 columnas a 7 sin achicar la tarjeta. */
  --ancho-catalogo: 1680px;

  --r-card:   18px;        /* radio de tarjetas */
  --r-btn:    13px;        /* radio de botones */
  --r-pill:   100px;
  --font-display: 'Archivo', system-ui, sans-serif;
  --font-body:    'Hanken Grotesk', system-ui, sans-serif;
}

/* ---------- 2. RESET / BASE ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  color: var(--tinta);
  background: var(--gris-bg);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
input, select, button, textarea { font-family: inherit; }
h1, h2, h3 { letter-spacing: -.02em; }

/* Doble toque = zoom, en todo lo que se toca.
   En móvil el navegador espera ~300ms tras cada toque por si viene un segundo
   (que significaría "acercar"). Al tocar dos veces seguido un botón —agregar
   varias unidades, subir cantidad, pasar de categoría— la pantalla se acercaba
   sola. `manipulation` le dice al navegador que en estos elementos el doble
   toque no es zoom: responden al instante y la página no salta. El pellizco
   para acercar se conserva en el resto de la página. */
a, button, input, select, textarea, label, summary,
[role="button"], [role="tab"], [role="option"], [onclick] {
  touch-action: manipulation;
}

/* ---------- 3. @KEYFRAMES (§3.4 — timings/curvas verbatim de los prototipos) ---------- */
@keyframes antBob        { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
@keyframes antTilt       { 0%,100%{transform:rotate(-2.5deg)} 50%{transform:rotate(2.5deg)} }
/* TURBO empujando el carro. Va hacia la IZQUIERDA porque es el lado al que
   mira: el carro está a su izquierda y el cuerpo se inclina hacia allá.
   Dos pasos por ciclo, con distinta altura para que no se vea mecánico.
   En escritorio camina en el sitio: ahí comparte fila con el título, y si se
   fuera de verdad dejaría un hueco raro al lado del texto. */
@keyframes turboReparto {
  0%   { transform: translate(0, 0)        rotate(-2deg); }
  25%  { transform: translate(-3px, -7px)  rotate(1deg); }
  50%  { transform: translate(-6px, 0)     rotate(-2deg); }
  75%  { transform: translate(-3px, -4px)  rotate(.5deg); }
  100% { transform: translate(0, 0)        rotate(-2deg); }
}
/* Entra empujando desde la derecha cuando la sección asoma. */
@keyframes turboLlega {
  from { opacity: 0; transform: translateX(60px) rotate(-7deg); }
  to   { opacity: 1; transform: translate(0, 0)  rotate(-2deg); }
}
/* En móvil la hormiga tiene la fila entera para ella sola (el título va arriba),
   así que sí puede irse de verdad. La secuencia imita a alguien que empuja un
   carro pesado: primero camina en el sitio como en escritorio, toma impulso y
   de golpe arranca hacia la izquierda y se pierde de vista. Vuelve a su lugar
   mientras está invisible, así el regreso nunca se ve como caminar de espaldas.
   Traslado y pasos van en un solo bloque de fotogramas a propósito: son dos
   animaciones sobre la misma propiedad `transform` y una anularía a la otra. */
/* Cada tramo lleva su propia curva. Antes la curva se aplicaba al ciclo entero
   de 6s, así que los pasos del principio salían lentos y los del final
   apurados: el andar se veía irregular. Con `linear` de base y la curva puesta
   tramo por tramo, los pasos quedan parejos y solo el arranque acelera. */
@keyframes turboSeVa {
  /* --- camina en el sitio: cuatro pasos parejos --- */
  0%   { opacity: 1; transform: translate(0, 0)      rotate(-2deg);  animation-timing-function: ease-in-out; }
  8%   { transform: translate(-3px, -7px)            rotate(1.5deg); animation-timing-function: ease-in-out; }
  16%  { transform: translate(-6px, 0)               rotate(-2deg);  animation-timing-function: ease-in-out; }
  24%  { transform: translate(-3px, -7px)            rotate(1.5deg); animation-timing-function: ease-in-out; }
  32%  { transform: translate(0, 0)                  rotate(-2deg);  animation-timing-function: ease-in-out; }
  40%  { transform: translate(-3px, -7px)            rotate(1.5deg); animation-timing-function: ease-in-out; }
  46%  { transform: translate(-6px, 0)               rotate(-2deg);  animation-timing-function: ease-out; }
  /* --- toma impulso: se agacha y se echa atrás --- */
  54%  { opacity: 1; transform: translate(5px, 3px)  rotate(-6deg);
         animation-timing-function: cubic-bezier(.5, 0, .8, .1); }
  /* --- arranca y se pierde de vista, ya a velocidad pareja --- */
  65%  { opacity: 1; transform: translate(-80%, -8px) rotate(-10deg); animation-timing-function: linear; }
  74%  { opacity: 0; transform: translate(-215%, -2px) rotate(-10deg); }
  /* Vuelve a su sitio apenas desaparece, en vez de arrastrar el recorrido de
     regreso invisible durante medio ciclo. */
  75%  { opacity: 0; transform: translate(0, 0)      rotate(-2deg); }
  90%  { opacity: 0; transform: translate(0, 0)      rotate(-2deg);  animation-timing-function: ease-out; }
  100% { opacity: 1; transform: translate(0, 0)      rotate(-2deg); }
}
@keyframes antBreathe    { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-10px) scale(1.012)} }
@keyframes celebrateBounce { 0%{transform:translateY(0) rotate(0)} 25%{transform:translateY(-12px) rotate(-7deg)} 55%{transform:translateY(-4px) rotate(6deg)} 100%{transform:translateY(0) rotate(0)} }
@keyframes pulseRing     { 0%{transform:scale(.85);opacity:.55} 70%{opacity:0} 100%{transform:scale(1.35);opacity:0} }
@keyframes ringOut       { 0%{transform:scale(.7);opacity:.6} 100%{transform:scale(1.6);opacity:0} }
@keyframes cardPulse     { 0%{transform:scale(1)} 40%{transform:scale(1.04)} 100%{transform:scale(1)} }
@keyframes sheetUp       { from{transform:translateY(100%)} to{transform:translateY(0)} }
@keyframes fadeIn        { from{opacity:0} to{opacity:1} }
@keyframes scaleIn       { from{opacity:0;transform:translateY(12px) scale(.96)} to{opacity:1;transform:translateY(0) scale(1)} }
/* Franja de marcas. El riel lleva 4 copias idénticas y se desplaza -25%, o sea
   exactamente una copia: al terminar, lo que se ve es igual que al empezar y el
   bucle no tiene costura.
   Antes eran 2 copias con -50%. La cuenta fallaba: para que no aparezca un
   vacío, lo que queda de riel al final del ciclo (N-1 copias) tiene que tapar
   la ventana visible, y con 2 copias eso era una sola copia de 624px contra una
   ventana de 1440px. Con 4 quedan 1.872px de sobra. */
@keyframes marquee       { 0%{transform:translateX(0)} 100%{transform:translateX(-25%)} }
@keyframes shakeX        { 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-5px)} 40%,80%{transform:translateX(5px)} }
@keyframes dotFloat      { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-16px)} }
@keyframes popIn         { 0%{opacity:0;transform:scale(.92) translateY(14px)} 100%{opacity:1;transform:scale(1) translateY(0)} }
@keyframes checkPop      { 0%{transform:scale(0)} 60%{transform:scale(1.15)} 100%{transform:scale(1)} }
@keyframes stampIn       { 0%{opacity:0;transform:rotate(-18deg) scale(1.6)} 100%{opacity:1;transform:rotate(-9deg) scale(1)} }
@keyframes barFill       { 0%{width:6%} 100%{width:100%} }
@keyframes dotPulse      { 0%,80%,100%{opacity:.25} 40%{opacity:1} }
@keyframes tagIn         { 0%{transform:translateY(22px);opacity:0} 100%{transform:translateY(0);opacity:1} }
@keyframes fadeOutSplash { 0%{opacity:1;transform:scale(1)} 100%{opacity:0;transform:scale(1.06)} }
@keyframes loaderShadow  { 0%,100%{transform:scaleX(1);opacity:.35} 50%{transform:scaleX(.66);opacity:.18} }
/* Splash: MAX entra corriendo desde abajo (1) → gesto de bienvenida (2) → respira (3) */
@keyframes maxArrive {
  0%   { transform: translateY(130px) translateX(-46px) rotate(-9deg) scale(.78); opacity: 0; }
  18%  { opacity: 1; }
  38%  { transform: translateY(-14px) translateX(0) rotate(3deg) scale(1.06); opacity: 1; } /* llega con overshoot */
  52%  { transform: translateY(0) rotate(-7deg) scale(1); }      /* saludo: inclina a la izquierda */
  64%  { transform: translateY(-5px) rotate(8deg) scale(1.02); } /* saludo: vuelve a la derecha */
  76%  { transform: translateY(0) rotate(-4deg) scale(1); }
  88%  { transform: translateY(-2px) rotate(3deg); }
  100% { transform: translateY(0) rotate(0) scale(1); opacity: 1; }
}
@keyframes maxBreathe    { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-7px) scale(1.015)} }

/* ---------- 4. LAYOUT ---------- */
.page-wrap { max-width: var(--ancho-contenido); margin: 0 auto; }
main { display: block; }

/* ===== Ancho del sitio =====
   Antes la portada entera vivía dentro de un div de 1280px, así que en un
   monitor ancho los bloques de color quedaban flotando en el centro con
   franjas blancas a los lados: el sitio se veía "a la mitad".

   Ahora la cáscara ocupa todo el ancho y son las SECCIONES las que centran su
   contenido, con relleno lateral que crece solo. Así el fondo de cada bloque
   (el azul, la foto del local, la franja de marcas) llega de borde a borde,
   pero el texto no se estira hasta volverse ilegible.

   El `!important` es a propósito: los rellenos de las secciones de la portada
   están escritos en el atributo `style` de cada una, y sin esto una hoja de
   estilos no puede ganarles. Solo toca izquierda y derecha; el relleno de
   arriba y abajo de cada sección queda como estaba. */
.lm-shell { background: #fff; overflow-x: hidden; }
.lm-shell > header,
.lm-shell > .promo-bar,
.lm-shell > footer,
.lm-shell > section,          /* el bloque de preguntas va fuera de <main> */
.lm-shell > main > section {
  padding-inline: max(clamp(16px, 4vw, 40px), (100% - var(--ancho-contenido)) / 2) !important;
}

/* ---------- 5. HEADER + LOGO LOCKUP ---------- */
.site-header {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 13px clamp(14px, 4vw, 28px);
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linea);
}
.header-logo { height: 40px; width: auto; }
.header-actions { display: flex; align-items: center; gap: 14px; }

/* icon-btn (carrito en header) */
.icon-btn {
  position: relative; display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 11px;
  background: var(--gris-2); color: var(--azul);
  transition: background .15s;
}
.icon-btn:hover { background: #E7E9F5; }
.icon-btn svg { width: 20px; height: 20px; }

/* ---------- 6. NAVEGACIÓN ---------- */
.site-nav { display: flex; align-items: center; gap: 22px; }
.snav-link { font-weight: 600; font-size: 15px; color: var(--texto); transition: color .15s; }
.snav-link:hover { color: var(--azul); }
.snav-link.active { font-weight: 700; color: var(--azul); }

.bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; background: #fff; border-top: 1px solid var(--linea);
  padding: 6px 4px; padding-bottom: max(6px, env(safe-area-inset-bottom));
}
.bottom-nav .ni {
  flex: 1; position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 7px 0; font-size: 11px; font-weight: 700; color: #7B7D89;
}
.bottom-nav .ni svg { width: 22px; height: 22px; }
.bottom-nav .ni.active { font-weight: 800; color: var(--azul); }
.ni-badge {
  position: absolute; top: 2px; left: calc(50% + 6px);
  min-width: 16px; height: 16px; padding: 0 3px; border-radius: 8px;
  background: var(--rojo); color: #fff; font-family: var(--font-display);
  font-weight: 800; font-size: 10px; display: grid; place-items: center;
}

/* Solo una nav visible a la vez (§2.5) */
@media (max-width: 760px) { .site-nav { display: none; } }
@media (min-width: 761px) { .bottom-nav { display: none; } }

/* ---------- 7. BOTONES ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 15px 26px; border-radius: var(--r-btn);
  font-family: var(--font-display); font-weight: 800; font-size: 16px;
  border: none; cursor: pointer; line-height: 1; text-align: center;
  transition: background .18s, transform .18s, border-color .18s, color .18s;
}
.btn svg { width: 18px; height: 18px; }
.btn-primary { background: var(--azul); color: #fff; box-shadow: 0 12px 26px rgba(3,23,143,.28); }
.btn-primary:hover { background: var(--azul-900); }
.btn-ghost { background: #fff; border: 1.5px solid var(--linea-2); color: var(--tinta); }
.btn-ghost:hover { border-color: var(--azul); color: var(--azul); }
.btn-wa { background: var(--wa); color: #fff; box-shadow: 0 14px 32px rgba(37,211,102,.4); }
.btn-wa:hover { background: var(--wa-dark); }
.btn-dark { background: var(--tinta); color: #fff; }
.btn-danger { background: #fff; border: 1.5px solid var(--rojo); color: var(--rojo-ink); }
.btn-danger:hover { background: #FFF0F0; }
.btn-block { width: 100%; }
.btn-lg { padding: 17px; font-size: 17px; }
.btn-sm { padding: 8px 13px; font-size: 13px; border-radius: 11px; gap: 6px; }
.btn-sm svg { width: 14px; height: 14px; }

/* ---------- 8. GRID DE PRODUCTOS + CARD ---------- */
.products-grid, .lm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  gap: 12px;
}
/* En pantalla grande la grilla tiene mucho más ancho disponible, y con el
   mínimo de móvil (158px) metía 8 columnas de tarjetas apretadas. Subiendo el
   mínimo entran menos columnas pero del tamaño que se diseñó la tarjeta. */
@media (min-width: 1100px) {
  .products-grid, .lm-grid { grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); }
}
.prod-card {
  background: #fff; border: 1.5px solid var(--linea); border-radius: var(--r-card);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform .18s, box-shadow .18s;
}
.prod-card:hover { transform: translateY(-4px); box-shadow: 0 16px 30px rgba(2,10,40,.10); }

/* ---------- Skeleton loaders (catálogo, primera visita mientras baja de Supabase) ---------- */
.sk-card {
  border: 1.5px solid var(--linea); border-radius: 18px; overflow: hidden; background: #fff;
}
.sk-card .sk-img { aspect-ratio: 1.25; }
.sk-card .sk-line { height: 12px; border-radius: 7px; margin: 10px 12px 0; }
.sk-card .sk-line.corta { width: 55%; }
.sk-card .sk-line.precio { height: 16px; width: 40%; margin-bottom: 14px; }
.sk-card .sk-img, .sk-card .sk-line {
  background: linear-gradient(100deg, #EEF0F7 40%, #F7F8FC 50%, #EEF0F7 60%);
  background-size: 200% 100%;
  animation: skShimmer 1.3s ease-in-out infinite;
}
@keyframes skShimmer { from { background-position: 120% 0; } to { background-position: -80% 0; } }
@media (prefers-reduced-motion: reduce) { .sk-card .sk-img, .sk-card .sk-line { animation: none; } }

/* ---------- Microinteracciones (P2) ---------- */
/* Presión táctil en todos los botones: se hunden un pelito */
.btn:active, .btn-add:active, .qty-btn:active, .pago-btn:active, .cat-tab:active,
.icon-btn:active, .btn-approve:active, .btn-reject:active, .btn-ghost:active,
.btn-clear-cart:active, .pw-eye:active { transform: scale(.96); }

/* Botón "Agregar" celebra al añadir (verde aprobado + pop) */
.btn-add.added {
  background: #1B8A4D !important; border-color: #1B8A4D !important; color: #fff !important;
  animation: addPop .38s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes addPop { 0% { transform: scale(1); } 45% { transform: scale(1.07); } 100% { transform: scale(1); } }

/* Badge / total del carrito saltan cuando entra un producto */
.bump { animation: badgeBump .4s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes badgeBump { 0% { transform: scale(1); } 35% { transform: scale(1.35); } 100% { transform: scale(1); } }

/* Cascada de entrada de las tarjetas del catálogo.
   Antes sólo escalonaba las 8 primeras y sólo en el render inicial: al bajar,
   los cientos de productos restantes aparecían de golpe. Ahora cada tarjeta
   entra cuando asoma en pantalla, escalonada por columna para que cada fila
   se dibuje de izquierda a derecha.
   La clase .anim la pone catalogo.js: si no hay JS o IntersectionObserver, las
   tarjetas se ven normales en vez de quedarse invisibles. */
@media (prefers-reduced-motion: no-preference) {
  .products-grid.anim .prod-card { opacity: 0; transform: translateY(34px) scale(.97); }
  .products-grid.anim .prod-card.vista {
    opacity: 1; transform: none;
    transition: opacity .5s ease, transform .62s cubic-bezier(.16, 1, .3, 1);
  }
  .nov-card { animation: cardIn .34s cubic-bezier(.22, 1, .36, 1) backwards; }
}
@keyframes cardIn { from { opacity: 0; transform: translateY(10px); } }
/* Refrescos automáticos en segundo plano (promos, catálogo fresco de Supabase)
   no deben repetir la animación de entrada — se veía como el catálogo recargando. */
#productsGrid.no-entrance .prod-card { opacity: 1; transform: none; transition: none; }

/* ---------- FAQ + badges de confianza (landing, P4) ---------- */
.faq-badges { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 20px 0 26px; }
@media (max-width: 760px) { .faq-badges { grid-template-columns: repeat(2, 1fr); } }
.faq-badge {
  display: flex; align-items: center; gap: 11px; padding: 13px 14px;
  border: 1.5px solid #ECEDF2; border-radius: 14px; background: #fff;
}
.faq-badge svg { width: 27px; height: 27px; color: #03178F; flex: none; }
.faq-badge span { font-size: 12.8px; font-weight: 700; color: #15161A; line-height: 1.3; }
.prod-card-img {
  position: relative; aspect-ratio: 1.25;
  background: var(--azul-bg);
  display: grid; place-items: center;
  overflow: hidden;
}
/* La foto ocupa EXACTAMENTE la misma caja que el placeholder, venga vertical,
   horizontal o cuadrada. Va posicionada absoluta a propósito: con el flujo
   normal, una foto más alta que la caja se salía por abajo y empujaba el
   nombre y el precio fuera de la tarjeta. */
.prod-card-img img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
/* Placeholder sin foto: ícono de marca (carrito) suave sobre el fondo azul
   claro — reemplaza el emoji de categoría, que se veía genérico. */
.prod-card-img .ph { width: 42%; max-width: 60px; aspect-ratio: 1; }
/* .lm-ph: "sin foto" — el glifo real de la marca (carro + M de LOGO/ICONO_
   LAMAYORISTA, recortado a brand/LOGO/icono-mask.png) pintado por máscara
   CSS, no un emoji ni un ícono genérico. Compartido por todas las vistas que
   muestran productos (catálogo, carrito, admin, factura, promos): un solo
   <span class="lm-ph"> vacío, el ícono lo pone el CSS. */
.lm-ph {
  display: inline-block; background-color: var(--azul); opacity: .28;
  -webkit-mask-image: url('data:image/png;base64,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');
  mask-image: url('data:image/png;base64,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');
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
}
.prod-card-off {
  position: absolute; top: 9px; left: 9px; background: var(--rojo); color: #fff;
  font-family: var(--font-display); font-weight: 900; font-size: 12px;
  padding: 3px 8px; border-radius: 7px;
}
.prod-card-body { padding: 13px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
.prod-card-cat {
  font-family: var(--font-display); font-weight: 800; font-size: 10px;
  letter-spacing: .08em; color: var(--muted); text-transform: uppercase;
}
.prod-card-name { font-size: 14.5px; color: var(--tinta); line-height: 1.25; font-weight: 700; }
.prod-card-desc { font-size: 12px; color: var(--texto-2); line-height: 1.3; }
.prod-card-stock {
  display: inline-flex; align-items: center; gap: 5px; align-self: flex-start;
  font-size: 11.5px; font-weight: 600; color: var(--st-apro-tx);
}
.prod-card-stock::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor;
}
.prod-card-stock.bajo { color: var(--st-pend-tx); }
.prod-card-stock.agotado { color: var(--muted); }
.prod-card-unit { font-size: 12px; color: var(--muted); }
.prod-card-price { display: flex; align-items: baseline; gap: 7px; margin-top: 2px; }

/* ===== Renglones fijos, para que la fila entera se lea pareja =====
   El cuerpo de la tarjeta era una columna suelta: un nombre de dos líneas
   empujaba el precio hacia abajo, y una tarjeta sin stock lo subía. Resultado:
   dentro de una misma fila el precio aparecía a alturas distintas (18px de
   diferencia, medido) y el catálogo se leía desordenado.

   Ahora cada renglón ocupa su alto pase lo que pase, así el ojo puede
   comparar precios en horizontal. Las piezas opcionales las pinta siempre
   catalogo.js, vacías si no hay dato, para que el hueco no se cierre. */
.prod-card-name {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
  min-height: calc(2 * 1.25em);        /* dos renglones exactos */
}
.prod-card-desc,
.prod-card-unit {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1;
  overflow: hidden;
  line-height: 1.3; min-height: 1.3em; /* un renglón, aunque venga vacío */
}
.prod-card-stock { min-height: 1.3em; line-height: 1.3; }
/* El precio y el botón se van al fondo: son el punto de comparación entre
   tarjetas y tienen que quedar a la misma altura en toda la fila. */
/* Alto fijo también para el precio: "Precio a consultar" va en 14px y el precio
   normal en 18px, así que sin esto la tarjeta que consulta subía el botón. */
.prod-card-price { margin-top: auto; min-height: 27px; }
.prod-card-price .now { font-family: var(--font-display); font-weight: 900; font-size: 18px; color: var(--azul); }
.prod-card-price .old { font-size: 12.5px; color: var(--muted); text-decoration: line-through; }
.prod-card .btn-add {
  /* El `margin-top:auto` que empuja al fondo ahora lo lleva .prod-card-price:
     si lo tuvieran los dos, el sobrante se repartiría entre ambos y el precio
     quedaría flotando lejos del botón. */
  margin-top: 9px; display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 11px; border-radius: 11px; background: var(--azul); color: #fff; border: none;
  cursor: pointer; font-family: var(--font-display); font-weight: 800; font-size: 14px;
  transition: background .18s;
}
.prod-card .btn-add:hover { background: var(--azul-900); }
.prod-card .btn-add svg { width: 16px; height: 16px; }

/* ---------- 9. BADGES ---------- */
.cart-badge {
  position: absolute; top: -5px; right: -5px;
  min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px;
  background: var(--rojo); color: #fff; font-family: var(--font-display);
  font-weight: 800; font-size: 11px; display: grid; place-items: center;
  border: 2px solid #fff;
}
.status-badge {
  display: inline-block; padding: 3px 9px; border-radius: var(--r-pill);
  font-size: 11.5px; font-weight: 800;
}
.status-badge.pend     { background: var(--st-pend-bg); color: var(--st-pend-tx); }
.status-badge.aprobado { background: var(--st-apro-bg); color: var(--st-apro-tx); }
.status-badge.rechazado{ background: var(--st-rech-bg); color: var(--st-rech-tx); }
.status-badge.ok       { background: var(--st-apro-bg); color: var(--st-apro-tx); }
.status-badge.off      { background: var(--linea); color: var(--texto-2); }

.stock-pill {
  display: inline-block; padding: 3px 9px; border-radius: var(--r-pill);
  font-size: 11.5px; font-weight: 800; background: var(--azul-bg); color: var(--azul);
}
.stock-pill.low { background: var(--st-pend-bg); color: var(--st-pend-tx); }
.stock-pill.out { background: var(--st-rech-bg); color: var(--st-rech-tx); }

.badge-nac {
  display: inline-flex; align-items: center; padding: 2px 7px; border-radius: 6px;
  background: var(--st-pend-bg); color: var(--st-pend-tx);
  font-family: var(--font-display); font-weight: 900; font-size: 10px; letter-spacing: .04em;
}

/* ---------- 10. BOTTOM-SHEET DE PRESENTACIONES ---------- */
.sheet-bg {
  display: none; position: fixed; inset: 0; z-index: 50;
  background: rgba(2,8,30,.5); backdrop-filter: blur(3px);
  align-items: flex-end; justify-content: center; animation: fadeIn .2s ease;
}
.sheet-bg.open { display: flex; }
.sheet {
  width: min(560px, 100%); background: #fff; border-radius: 24px 24px 0 0;
  padding: 10px 18px max(20px, env(safe-area-inset-bottom));
  box-shadow: 0 -16px 40px rgba(2,8,30,.3);
  animation: sheetUp .3s cubic-bezier(.34, 1.3, .6, 1);
}
.sheet-handle { width: 42px; height: 5px; border-radius: 3px; background: var(--linea-2); margin: 6px auto 14px; }
.sheet-head { display: flex; align-items: center; gap: 12px; }
.sheet-head-info { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.sheet-thumb { flex: none; width: 54px; height: 54px; border-radius: 13px; background: var(--azul-bg); overflow: hidden; display: grid; place-items: center; }
.sheet-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sheet-thumb .lm-ph { width: 46%; aspect-ratio: 1; }
.sheet-title { font-family: var(--font-display); font-weight: 900; font-size: 17px; margin: 0; color: var(--tinta); line-height: 1.2; }
.sheet-sub { font-size: 13px; color: var(--muted); }
.sheet-close { flex: none; width: 32px; height: 32px; border-radius: 50%; border: none; background: var(--gris-2); color: var(--tinta); font-size: 16px; cursor: pointer; }
.sheet-hint { font-size: 13.5px; color: var(--texto-2); margin: 14px 0 10px; }
.sheet-body { display: flex; flex-direction: column; gap: 8px; }
.pres-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 15px; border: 1.5px solid var(--linea); border-radius: 14px;
  transition: border-color .15s;
}
.pres-row:hover { border-color: var(--azul); }
.pres-row .pr-label { font-size: 14.5px; color: var(--tinta); font-weight: 700; }
/* Cuantas unidades trae la presentacion: sin esto el cliente ve "CAJA $42.500"
   y no sabe si son 6 o 24, que es lo que necesita para decidir. */
.pres-row .pr-contiene { font-size: 12px; color: var(--muted); display: block; }
.pres-row .pr-price { font-family: var(--font-display); font-weight: 900; font-size: 16px; color: var(--azul); }
.pres-row .pr-add {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 16px; border-radius: 11px; background: var(--azul); color: #fff;
  border: none; cursor: pointer; font-family: var(--font-display); font-weight: 800; font-size: 14px;
  transition: background .18s;
}
.pres-row .pr-add:hover { background: var(--azul-900); }
.pres-row .pr-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }

/* Selector de cantidad dentro del sheet de presentaciones. El input va en 16px
   a propósito: por debajo de eso iOS hace zoom al enfocarlo. */
.qty-box {
  flex: none; display: inline-flex; align-items: center;
  border: 1.5px solid var(--linea-2); border-radius: 12px; overflow: hidden;
  background: #fff;
}
.qty-box .qty-b {
  width: 40px; height: 44px; flex: none; border: none; background: none;
  color: var(--azul); font-size: 20px; font-weight: 700; line-height: 1;
  cursor: pointer; touch-action: manipulation; /* evita el zoom por doble toque en iOS */
  transition: background .15s;
}
.qty-box .qty-b:hover { background: var(--azul-bg); }
.qty-box .qty-b:active { background: var(--linea); }
.qty-box .qty-i {
  width: 52px; height: 44px; flex: none; border: none; outline: none;
  border-left: 1.5px solid var(--linea-2); border-right: 1.5px solid var(--linea-2);
  text-align: center; font-family: var(--font-display); font-weight: 800;
  font-size: 16px; color: var(--tinta); background: #fff;
  -moz-appearance: textfield; appearance: textfield;
}
.qty-box .qty-i::-webkit-outer-spin-button,
.qty-box .qty-i::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty-box .qty-i:focus-visible { background: var(--azul-bg); }

/* En pantallas angostas la fila se acomoda en dos renglones: nombre y precio
   arriba, cantidad y "Agregar" abajo, sin apretar los objetivos táctiles. */
@media (max-width: 520px) {
  .pres-row { flex-wrap: wrap; row-gap: 11px; }
  .pres-row .pr-info { flex: 1 0 100%; }
  .pres-row .pr-add { flex: 1; justify-content: center; }
}
.sheet-foot { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.sheet-foot .btn { flex: 1; }

/* ---------- 11. CARRITO ---------- */
.cart-items-wrap { display: flex; flex-direction: column; gap: 10px; }
.cart-item { display: flex; align-items: center; gap: 13px; padding: 13px; background: #fff; border: 1.5px solid var(--linea); border-radius: 16px; }
.ci-img { flex: none; width: 64px; height: 64px; border-radius: 12px; background: var(--azul-bg); display: grid; place-items: center; overflow: hidden; }
.ci-img img { width: 100%; height: 100%; object-fit: cover; }
.ci-img .lm-ph { width: 46%; aspect-ratio: 1; }
.ci-info { flex: 1; min-width: 0; }
.ci-name { font-size: 14.5px; color: var(--tinta); font-weight: 700; line-height: 1.25; }
.ci-unidad { font-size: 12.5px; color: var(--muted); }
.ci-unit { font-size: 12.5px; color: var(--texto-2); margin-top: 2px; }
.ci-bottom { display: flex; align-items: center; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
.ci-subtotal { font-family: var(--font-display); font-weight: 900; font-size: 15px; color: var(--azul); margin-left: auto; }
.ci-del { background: none; border: none; color: var(--rojo-ink); cursor: pointer; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; }
.ci-del:hover { color: var(--rojo); background: #FFF0F0; }
.ci-del svg { width: 16px; height: 16px; }

.cart-summary-wrap { margin-top: 14px; }
.cart-summary { background: #fff; border: 1.5px solid var(--linea); border-radius: var(--r-card); padding: 20px; }
.sum-row { display: flex; justify-content: space-between; font-size: 14.5px; color: var(--texto-2); margin-bottom: 8px; }
.sum-discount { color: var(--rojo); }
.sum-row.total { align-items: baseline; margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--linea); }
.sum-total-lbl { font-family: var(--font-display); font-weight: 800; font-size: 16px; color: var(--tinta); }
.sum-total-amt { font-family: var(--font-display); font-weight: 900; font-size: 24px; color: var(--azul); }

.cart-actions-wrap { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.pago-selector { background: #fff; border: 1.5px solid var(--linea); border-radius: var(--r-card); padding: 18px 20px; }
.pago-lbl { font-family: var(--font-display); font-weight: 900; font-size: 15px; color: var(--tinta); margin-bottom: 13px; }
.pago-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pago-btn {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 15px 10px; border-radius: 14px; border: 2px solid var(--linea-2);
  background: #fff; color: var(--texto); cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.pago-btn .pb-text { font-family: var(--font-display); font-weight: 800; font-size: 14px; }
.pago-btn.selected { border-color: var(--azul); background: var(--azul-bg); color: var(--azul); }
.pago-selector.shake { animation: shakeX .4s ease; }
.pago-selector.shake .pago-btn:not(.selected) { border-color: #FFB3B6; }
.btn-clear-cart { background: none; border: none; color: #7B7D89; font-size: 13.5px; font-weight: 700; cursor: pointer; padding: 6px 8px; align-self: flex-end; }
.btn-clear-cart:hover { color: var(--rojo); }

/* ---------- 12. CATÁLOGO ---------- */
/* ===== NAVEGACIÓN DE CATEGORÍAS =====
   Con 18 categorías, una fila horizontal de chips obligaba a arrastrar de lado
   para descubrir la mitad del árbol. En PC pasa a barra lateral fija (se ve
   todo de una); en móvil, a un panel que sube desde abajo. El mismo árbol
   (.cat-tree) se pinta en los dos lados. */
.cat-layout {
  display: grid; grid-template-columns: 244px minmax(0, 1fr);
  gap: clamp(16px, 2.4vw, 30px);
  padding: 6px clamp(14px, 4vw, 28px) 0;
  align-items: start;
}
.cat-main { min-width: 0; }
.cat-main .search-bar, .cat-main .catalog-bar, .cat-main #main-content { padding-left: 0; padding-right: 0; }

/* El header es sticky (69px de alto), así que la barra tiene que quedar por
   debajo de él: si se pega en top:14px, al bajar se le mete encima y se ve
   cortada, como si no estuviera sincronizada con el listado. */
.cat-side {
  position: sticky; top: calc(var(--hdr-h) + 14px);
  background: #fff; border: 1.5px solid var(--linea); border-radius: var(--r-card);
  padding: 16px 12px;
  max-height: calc(100vh - var(--hdr-h) - 28px); overflow-y: auto;
  overscroll-behavior: contain;   /* al terminar la lista no arrastra la página */
}
.cat-side-title {
  display: block; padding: 0 10px 10px;
  font-family: var(--font-display); font-weight: 800; font-size: 11.5px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}

/* --- Árbol de categorías (compartido PC / móvil) --- */
.cat-tree { display: flex; flex-direction: column; gap: 1px; }
.cat-node { border-radius: 11px; }
.cat-row {
  width: 100%; display: flex; align-items: center; gap: 9px;
  padding: 10px 11px; border: none; background: none; cursor: pointer;
  border-radius: 11px; text-align: left;
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
  color: var(--texto); transition: background .15s, color .15s;
}
.cat-row:hover { background: var(--gris-2); }
.cat-row .cat-nombre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-row .cat-n {
  flex: none; font-family: var(--font-body); font-weight: 600; font-size: 12px;
  color: var(--muted); font-variant-numeric: tabular-nums;
}
/* Flecha: gira al desplegar, no aparece si la categoría no tiene subcategorías */
.cat-row .cat-arrow {
  flex: none; width: 15px; height: 15px; color: var(--muted);
  transition: transform .22s cubic-bezier(.22, 1, .36, 1);
}
.cat-node.abierto > .cat-row .cat-arrow { transform: rotate(90deg); }
.cat-node.activo > .cat-row { background: var(--azul); color: #fff; }
.cat-node.activo > .cat-row .cat-n,
.cat-node.activo > .cat-row .cat-arrow { color: rgba(255, 255, 255, .75); }

/* Subcategorías: se despliegan con una transición de altura real (grid 0fr→1fr),
   así la animación funciona sin saber de antemano cuánto miden. */
.cat-subs {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .26s cubic-bezier(.22, 1, .36, 1);
}
.cat-node.abierto > .cat-subs { grid-template-rows: 1fr; }
.cat-subs > div { overflow: hidden; }
.cat-sub {
  width: 100%; display: flex; align-items: center; gap: 8px;
  padding: 8px 11px 8px 30px; border: none; background: none; cursor: pointer;
  border-radius: 9px; text-align: left;
  font-weight: 600; font-size: 13.5px; color: var(--texto-2);
  transition: background .15s, color .15s;
}
.cat-sub:hover { background: var(--gris-2); color: var(--azul); }
.cat-sub.activo { background: var(--azul-bg); color: var(--azul); font-weight: 700; }
/* Escalonado de entrada: cada subcategoría entra apenas después de la anterior */
.cat-node.abierto > .cat-subs .cat-sub { animation: subIn .3s cubic-bezier(.22, 1, .36, 1) backwards; }
@keyframes subIn { from { opacity: 0; transform: translateX(-7px); } to { opacity: 1; transform: none; } }

/* Botón que abre el panel (sólo móvil) */
.cat-open-btn { display: none; }

/* --- Sugerencias del buscador --- */
.search-wrap { position: relative; }
.search-suggest {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40;
  background: #fff; border: 1.5px solid var(--linea); border-radius: 15px;
  box-shadow: 0 18px 38px rgba(2, 10, 40, .13);
  padding: 6px; overflow: hidden;
  animation: sugIn .16s cubic-bezier(.22, 1, .36, 1);
}
@keyframes sugIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.sug-row {
  width: 100%; display: flex; align-items: center; gap: 11px;
  padding: 8px; border: none; background: none; cursor: pointer;
  border-radius: 11px; text-align: left; transition: background .13s;
}
.sug-row:hover { background: var(--gris-2); }
.sug-img {
  flex: none; width: 42px; height: 42px; border-radius: 9px; overflow: hidden;
  background: var(--azul-bg); display: grid; place-items: center;
}
.sug-img img { width: 100%; height: 100%; object-fit: cover; }
.sug-img .lm-ph { width: 20px; height: 20px; }
.sug-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sug-txt strong {
  font-size: 14px; font-weight: 700; color: var(--tinta);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sug-desc { font-size: 12px; color: var(--texto-2); }
.sug-precio {
  flex: none; font-family: var(--font-display); font-weight: 900; font-size: 14.5px;
  color: var(--azul);
}
.sug-mas {
  display: block; padding: 8px 10px 4px; font-size: 12px; color: var(--muted);
  border-top: 1px solid var(--linea); margin-top: 4px;
}
@media (prefers-reduced-motion: reduce) { .search-suggest { animation: none; } }

/* --- Panel de categorías en móvil --- */
.cat-sheet { position: fixed; inset: 0; z-index: 90; display: flex; align-items: flex-end; }
/* Sin esto el panel no se cierra nunca: el display:flex de arriba le gana al
   [hidden] del navegador, que sólo aplica un display:none de baja prioridad. */
.cat-sheet[hidden] { display: none; }
.cat-sheet::before {
  content: ''; position: absolute; inset: 0; background: rgba(6, 10, 30, .5);
  animation: fadeIn .2s ease;
}
.cat-sheet-panel {
  position: relative; width: 100%; max-height: 82vh; display: flex; flex-direction: column;
  background: #fff; border-radius: 22px 22px 0 0; padding: 0 14px 14px;
  animation: sheetUp .3s cubic-bezier(.22, 1, .36, 1);
}
.cat-sheet-head {
  position: relative; display: flex; align-items: center; gap: 10px;
  padding: 16px 4px 12px; border-bottom: 1px solid var(--linea);
}
.cat-sheet-head strong { font-family: var(--font-display); font-weight: 900; font-size: 17px; color: var(--tinta); }
.cat-sheet-grip {
  position: absolute; top: 7px; left: 50%; transform: translateX(-50%);
  width: 40px; height: 4px; border-radius: 2px; background: var(--linea-2);
}
.cat-sheet-x {
  margin-left: auto; width: 34px; height: 34px; flex: none;
  border: none; border-radius: 50%; background: var(--gris-2);
  color: var(--texto-2); font-size: 15px; cursor: pointer;
}
.cat-sheet .cat-tree { overflow-y: auto; padding-top: 6px; }

@media (max-width: 900px) {
  /* Móvil/tablet: se esconde la barra lateral y manda el panel. */
  .cat-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .cat-side { display: none; }
  .cat-main .search-bar { display: flex; align-items: center; gap: 9px; }
  .cat-main .search-bar .search-wrap { flex: 1; min-width: 0; }
  .cat-open-btn {
    display: inline-flex; align-items: center; gap: 7px; flex: none;
    height: 48px; max-width: 44vw; padding: 0 14px;
    border: 1.5px solid var(--linea-2); border-radius: 13px; background: #fff;
    font-family: var(--font-display); font-weight: 800; font-size: 13.5px;
    color: var(--azul); cursor: pointer;
  }
  .cat-open-btn svg { width: 17px; height: 17px; flex: none; }
  .cat-open-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* Objetivos táctiles más generosos que en PC */
  .cat-row { padding: 13px 12px; font-size: 15px; }
  .cat-sub { padding: 11px 12px 11px 32px; font-size: 14.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .cat-subs, .cat-row .cat-arrow { transition: none; }
  .cat-node.abierto > .cat-subs .cat-sub { animation: none; }
  .cat-sheet::before, .cat-sheet-panel { animation: none; }
}

/* Producto sin precio (lo define el inventario por API) */
.prod-card-price .consultar { font-family: var(--font-display); font-weight: 800; font-size: 14px; color: var(--texto-2); }
.prod-card .btn-consult {
  /* Igual que .btn-add: el empuje al fondo lo hace .prod-card-price. */
  margin-top: 9px; display: flex; align-items: center; justify-content: center; gap: 7px;
  /* 9.5 + borde 1.5 = 11: mismo alto total que .btn-add, que no tiene borde.
     Si no, el botón de consultar es 3px más alto y rompe la línea de la fila. */
  padding: 9.5px; border-radius: 11px; background: #fff; color: var(--azul); border: 1.5px solid var(--linea-2);
  cursor: pointer; text-decoration: none; font-family: var(--font-display); font-weight: 800; font-size: 14px;
  /* .btn-add es un <button> y trae el interlineado compacto del navegador;
     este es un <a> y heredaba el del cuerpo, 3,6px más alto. */
  line-height: 1.15;
  transition: border-color .18s, background .18s;
}
.prod-card .btn-consult:hover { border-color: var(--azul); background: var(--azul-bg); }
.prod-card .btn-consult svg { width: 16px; height: 16px; }

/* Cargar más (catálogo grande) */
.load-more-wrap { text-align: center; padding: 20px 0 4px; }

.search-bar { padding: 0 clamp(14px, 4vw, 28px); }
.search-wrap { position: relative; display: flex; align-items: center; }
.search-icon { position: absolute; left: 14px; width: 18px; height: 18px; pointer-events: none; color: var(--muted); }
.search-input {
  width: 100%; padding: 13px 16px 13px 42px; border-radius: var(--r-btn);
  border: 1.5px solid var(--linea-2); background: #fff; font-size: 15px; color: var(--tinta); outline: none;
}
.search-input:focus { border-color: var(--azul); }
.search-clear { position: absolute; right: 12px; width: 26px; height: 26px; border: none; border-radius: 50%; background: var(--gris-2); color: var(--tinta); cursor: pointer; }

.catalog-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px clamp(14px, 4vw, 28px) 6px; }
.catalog-count { font-weight: 700; font-size: 14px; color: var(--texto-2); }
.sort-select { padding: 9px 12px; border-radius: 10px; border: 1.5px solid var(--linea-2); background: #fff; font-size: 14px; font-weight: 600; color: var(--tinta); outline: none; cursor: pointer; }

/* Barra de carrito flotante (MAX celebra) */
.cart-bar {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 78px; z-index: 35;
  width: min(1092px, calc(100% - 24px));
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 10px 12px 10px 16px; background: var(--tinta); border-radius: 16px;
  box-shadow: 0 18px 40px rgba(2,8,30,.34); animation: fadeIn .25s ease;
}
.cart-bar.hidden { display: none; }
.cart-bar-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cart-bar-ic { position: relative; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: var(--azul); overflow: hidden; flex: none; color: #fff; }
.cart-bar-ic img { height: 64px; width: auto; position: absolute; top: 6px; }
.cart-bar-meta { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.cart-bar-qty { font-family: var(--font-display); font-weight: 800; font-size: 12.5px; color: var(--azul-soft); }
.cart-bar-total { font-family: var(--font-display); font-weight: 900; font-size: 19px; color: #fff; }
.cart-bar-btn { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 13px 18px; border-radius: 12px; background: var(--wa); color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 15px; }
@media (min-width: 761px) { .cart-bar { bottom: 18px; } }

/* ---------- 13. FORMULARIOS ---------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field-lbl { font-weight: 700; font-size: 13.5px; color: var(--texto); }
.form-control, .input {
  width: 100%; padding: 13px 15px; border-radius: 12px;
  /* 16px mínimo: iOS Safari hace zoom automático al enfocar inputs menores (PRODUCT.md) */
  border: 1.5px solid var(--linea-2); background: #fff; font-size: 16px; color: var(--tinta); outline: none;
}
.form-control:focus, .input:focus { border-color: var(--azul); }
.input.error { border-color: var(--rojo); }

/* Red de seguridad para el zoom al enfocar: iOS acerca la pantalla en CUALQUIER
   campo de menos de 16px, y al salir no vuelve solo — la persona queda con el
   sitio agrandado. Se fuerza el mínimo en móvil sobre todos los campos, así no
   depende de recordarlo en cada componente nuevo. */
@media (max-width: 760px) {
  input, select, textarea, .input, .form-control, .search-input, .sort-select {
    font-size: 16px;
  }
}

/* ---------- Ver/ocultar contraseña (ojito) ---------- */
.pw-wrap { position: relative; }
.pw-wrap .form-control, .pw-wrap .input { padding-right: 50px; }
.pw-eye {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; display: grid; place-items: center;
  background: none; border: 0; border-radius: 10px;
  color: var(--muted); cursor: pointer; padding: 0;
}
.pw-eye:hover { color: var(--azul); }
.pw-eye svg { width: 21px; height: 21px; }

/* ---------- Foco visible para navegación con teclado (accesibilidad) ---------- */
:focus-visible { outline: 3px solid rgba(3, 23, 143, .5); outline-offset: 2px; }
.form-control:focus-visible, .input:focus-visible { outline: none; } /* ya marcan foco con borde azul */
.lm-final :focus-visible, .lm-footer :focus-visible, footer :focus-visible { outline-color: rgba(255, 255, 255, .8); }
.field-err { font-size: 12px; color: var(--rojo-ink); font-weight: 600; }

/* ---------- 14. STEPPERS DE CANTIDAD ---------- */
.qty-controls { display: flex; align-items: center; border: 1.5px solid var(--linea-2); border-radius: 11px; overflow: hidden; }
.qty-btn { width: 34px; height: 34px; border: none; background: #fff; color: var(--azul); font-size: 18px; cursor: pointer; display: grid; place-items: center; }
.qty-btn:hover { background: var(--gris-2); }
.qty-input {
  width: 46px; text-align: center; font-family: var(--font-display); font-weight: 800; font-size: 15px;
  color: var(--tinta); border: none; outline: none; background: #fff; -moz-appearance: textfield;
}
.qty-input::-webkit-outer-spin-button, .qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ---------- 15. MODALES BASE + TOGGLE ---------- */
.modal-bg {
  display: none; position: fixed; inset: 0; z-index: 60;
  background: rgba(2,8,30,.5); backdrop-filter: blur(4px);
  place-items: center; padding: 18px; animation: fadeIn .2s ease;
}
.modal-bg.open { display: grid; }
.modal-box {
  width: min(560px, 100%); background: #fff; border-radius: 22px; overflow: hidden;
  box-shadow: 0 30px 70px rgba(2,8,30,.4); max-height: 92vh; display: flex; flex-direction: column;
  animation: scaleIn .28s cubic-bezier(.34, 1.4, .6, 1);
}
.modal-box-wide { width: min(760px, 100%); }
.modal-hd { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--linea); }
.modal-title { font-family: var(--font-display); font-weight: 900; font-size: 18px; color: var(--tinta); margin: 0; }
.modal-close { width: 32px; height: 32px; border-radius: 50%; border: none; background: var(--gris-2); color: var(--tinta); font-size: 17px; cursor: pointer; }
.modal-bd { flex: 1; overflow-y: auto; padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; }
.modal-ft { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 22px; border-top: 1px solid var(--linea); flex-wrap: wrap; }

.toggle { position: relative; display: inline-block; width: 44px; height: 26px; }
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle-slider { position: absolute; cursor: pointer; inset: 0; background: #CBD0DE; border-radius: var(--r-pill); transition: background .2s; }
.toggle-slider::before { content: ''; position: absolute; height: 20px; width: 20px; left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: transform .2s; }
.toggle input:checked + .toggle-slider { background: var(--azul); }
.toggle input:checked + .toggle-slider::before { transform: translateX(18px); }

/* ---------- 16. WHATSAPP FLOAT ---------- */
.wa-float {
  position: fixed; right: 16px; bottom: 150px; z-index: 34;
  display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%;
  background: var(--wa); color: #fff; box-shadow: 0 10px 26px rgba(37,211,102,.45);
}
.wa-float svg { width: 26px; height: 26px; position: relative; z-index: 2; }
.wa-float::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--wa); animation: pulseRing 2.4s ease-out infinite; }

/* En móvil, dentro del sistema (catálogo, carrito, novedades, cuenta) el botón
   flotante estorba: tapa tarjetas, la barra del carrito y los botones de abajo.
   Ahí queda sólo en escritorio. El landing conserva el suyo (.lm-wa-float) en
   los dos tamaños, porque es la única vía de contacto de esa página. */
@media (max-width: 760px) { .wa-float { display: none; } }

/* Globo de servicio del botón de WhatsApp (escritorio) */
.wa-bubble {
  position: fixed; right: 84px; bottom: 148px; z-index: 34;
  width: max-content; max-width: 340px; padding: 16px 19px;
  background: #fff; color: var(--texto); border: 1.5px solid var(--linea);
  border-radius: 18px 18px 4px 18px;
  box-shadow: 0 18px 40px rgba(2, 10, 40, .17);
  font-size: 15.5px; font-weight: 600; line-height: 1.4;
  opacity: 0; transform: translateY(8px) scale(.95); transform-origin: bottom right;
  transition: opacity .3s ease, transform .3s cubic-bezier(.22, 1, .36, 1);
  pointer-events: none;
}
/* Título del globo: "Hola 👋" arriba, el mensaje debajo */
.wa-bubble b {
  display: block; margin-bottom: 3px;
  font-family: var(--font-display); font-weight: 900; font-size: 14px;
  color: var(--wa-dark);
}
.wa-bubble.visible { opacity: 1; transform: none; }
/* En el catálogo el botón no existe en móvil, así que su globo tampoco. */
@media (max-width: 760px) { .wa-bubble:not(.lm-wa-bubble) { display: none; } }

/* Globo del landing: ahí el botón SÍ está en móvil, y es la única vía de
   contacto de la página, así que el globo se muestra en los dos tamaños,
   anclado al botón del landing (que va abajo a la derecha, no a media altura). */
.lm-wa-bubble { right: 88px; bottom: 26px; }
@media (max-width: 760px) {
  /* Antes se estiraba de borde a borde (92% de la pantalla): un cartel enorme
     para un mensaje de dos renglones. Ahora se queda pegado al botón, ocupa lo
     que necesita y no pasa de dos tercios del ancho. */
  .lm-wa-bubble {
    right: 16px; left: auto;
    width: max-content; max-width: min(68vw, 260px);
    padding: 11px 14px;
    font-size: 13.5px; line-height: 1.35;
    bottom: calc(146px + env(safe-area-inset-bottom));
    border-radius: 16px 16px 4px 16px;
  }
  .lm-wa-bubble b { font-size: 12.5px; margin-bottom: 2px; }
}
@media (prefers-reduced-motion: reduce) { .wa-bubble { transition: none; } }

/* ---------- 17. ESTADO VACÍO ---------- */
.empty-state { text-align: center; padding: 56px 24px; animation: fadeIn .3s ease; }
.empty-icon { font-size: 56px; margin-bottom: 14px; }
.empty-title { font-family: var(--font-display); font-weight: 900; font-size: 22px; color: var(--tinta); margin-bottom: 6px; }
.empty-desc { color: var(--texto-2); font-size: 15px; max-width: 30em; margin: 0 auto 22px; }

/* ---------- 18. UTILIDADES / ACCESIBILIDAD ---------- */
.hidden { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--azul); color: #fff; padding: 10px 16px; border-radius: 0 0 12px 0; font-weight: 700;
}
.skip-link:focus { left: 0; }

/* Personajes (las hormigas) — flotación idle */
.ant-bob { animation: antBob 4.4s ease-in-out infinite; }

/* ===================================================
   COACH MARKS (onboarding sobre la UI real) — js/coach.js
   =================================================== */
.coach-root {
  position: fixed; inset: 0; z-index: 9998;
  animation: fadeIn .25s ease;
}
/* Modo interactivo: la capa no intercepta el puntero, así se puede escribir en
   el campo que la hormiga señala mientras el tutorial sigue abierto. Sólo la
   tarjeta (y sus botones) vuelven a recibir clics. */
.coach-libre { pointer-events: none; }
.coach-libre .coach-card { pointer-events: auto; }
/* El campo señalado se levanta por encima del oscurecido para que se vea
   nítido mientras se escribe. */
.coach-destacado { position: relative; z-index: 9999; }
.coach-spotlight {
  position: fixed; left: 0; top: 0; width: 0; height: 0;
  border-radius: 14px;
  box-shadow: 0 0 0 9999px rgba(2, 8, 30, .62), 0 0 0 2px rgba(255, 255, 255, .9) inset;
  outline: 2px solid var(--azul);
  pointer-events: none;
  transition: left .3s cubic-bezier(.4,0,.2,1), top .3s cubic-bezier(.4,0,.2,1),
              width .3s cubic-bezier(.4,0,.2,1), height .3s cubic-bezier(.4,0,.2,1), opacity .2s ease;
}
.coach-card {
  position: fixed; width: min(320px, calc(100vw - 24px));
  background: #fff; border-radius: 16px; padding: 18px 18px 16px;
  box-shadow: 0 24px 60px rgba(2, 8, 30, .45);
  transition: left .3s cubic-bezier(.4,0,.2,1), top .3s cubic-bezier(.4,0,.2,1);
  animation: scaleIn .26s cubic-bezier(.34,1.4,.6,1);
}
.coach-skip {
  position: absolute; top: 10px; right: 10px; width: 28px; height: 28px;
  border: none; border-radius: 50%; background: #F3F4F8; color: #5A5C68;
  font-size: 18px; line-height: 1; cursor: pointer;
}
.coach-skip:hover { background: #E7E9F5; color: var(--azul); }
.coach-dots { display: flex; gap: 6px; margin-bottom: 10px; }
.coach-dots span { width: 7px; height: 7px; border-radius: 100px; background: #E2E4EC; transition: all .3s ease; }
.coach-dots span.on { width: 22px; background: var(--azul); }
.coach-title {
  font-family: var(--font-display); font-weight: 900; font-size: 16px;
  letter-spacing: -.01em; color: var(--tinta); margin: 0 22px 5px 0; line-height: 1.2;
}
.coach-text { margin: 0; font-size: 14px; color: var(--texto-2); line-height: 1.5; }
.coach-actions { display: flex; gap: 10px; margin-top: 16px; }
.coach-back {
  flex: none; padding: 10px 16px; border-radius: 11px; cursor: pointer;
  border: 1.5px solid #E2E4EC; background: #fff; color: var(--tinta);
  font-family: var(--font-display); font-weight: 800; font-size: 14px;
}
.coach-back:hover { border-color: var(--azul); }
.coach-next {
  flex: 1; padding: 10px 16px; border-radius: 11px; cursor: pointer; border: none;
  background: var(--azul); color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 14px;
  transition: background .15s;
}
.coach-next:hover { background: var(--azul-900); }
/* Hormiga que señala el elemento (puntero guiado) */
.coach-ant {
  position: fixed; left: 0; top: 0; width: clamp(50px, 7vw, 66px); opacity: 0;
  pointer-events: none; z-index: 1;
  transition: left .3s cubic-bezier(.4,0,.2,1), top .3s cubic-bezier(.4,0,.2,1), opacity .2s ease;
}
.coach-ant img {
  display: block; width: 100%; height: auto;
  filter: drop-shadow(0 8px 13px rgba(2, 8, 30, .45));
  animation: antBob 2.4s ease-in-out infinite;
}
.coach-noanim .coach-spotlight, .coach-noanim .coach-card, .coach-noanim .coach-ant { transition: none; }
.coach-noanim .coach-ant img, .coach-noanim .coach-card { animation: none; }

/* Producto enfocado al llegar desde una promo (catalogo.html?focus=SKU) */
.prod-focus { animation: prodFocus 2.6s ease both; }
@keyframes prodFocus {
  0%   { box-shadow: 0 0 0 0 rgba(3,23,143,0); }
  12%  { box-shadow: 0 0 0 4px rgba(3,23,143,.55); transform: translateY(-3px); }
  100% { box-shadow: 0 0 0 0 rgba(3,23,143,0); }
}

/* ===================================================
   CHECKOUT PROGRESS (Catálogo → Carrito → Confirmación)
   =================================================== */
.checkout-progress {
  display: flex; align-items: flex-start; justify-content: center; gap: 6px;
  padding: 14px clamp(14px, 4vw, 28px) 6px; max-width: 520px; margin: 0 auto; width: 100%;
}
.cp-step {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  flex: none; text-decoration: none; width: 88px; text-align: center;
}
.cp-dot {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 800; font-size: 13px;
  background: #ECEDF2; color: var(--muted); transition: all .2s;
}
.cp-label { font-size: 11.5px; font-weight: 700; color: var(--muted); line-height: 1.1; }
.cp-step.done .cp-dot { background: var(--azul-bg); color: var(--azul); }
.cp-step.done .cp-label { color: var(--texto-2); }
.cp-step.active .cp-dot { background: var(--azul); color: #fff; box-shadow: 0 6px 16px rgba(3,23,143,.3); }
.cp-step.active .cp-label { color: var(--azul); }
a.cp-step:hover .cp-dot { background: #DDE2F4; }
.cp-line { flex: 1; max-width: 70px; height: 2px; background: #ECEDF2; border-radius: 2px; margin-top: 14px; }
.cp-line.done { background: var(--azul); }

/* ---------- 19. RESPONSIVE MOBILE ---------- */
/* Categorías: 5 columnas en desktop → 3 en móvil → 2 en xs */
@media (max-width: 540px) {
  .cats-grid { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 360px) {
  .cats-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* Pasos de "Cómo funciona": horizontal → apilado en móvil */
@media (max-width: 680px) {
  .steps-row { flex-direction: column !important; gap: 10px !important; align-items: stretch !important; }
  .steps-connector { display: none !important; }
}

/* Landing: hovers (equivalencia de style-hover del prototipo, CLAUDE.md §0.5).
   Vivían sueltos en un <style> dentro de index.html; se centralizan acá. */
.lk:hover { color: var(--azul); }
.cartlink:hover { background: #E7E9F5; }
.hov-cta:hover { transform: translateY(-2px); box-shadow: 0 18px 34px rgba(3,23,143,.38); }
.hov-bord:hover { border-color: var(--azul); }
.hov-arrow:hover { background: var(--azul-900); }
.hov-link { display: inline-flex; align-items: center; gap: 6px; transition: gap .18s; }
.hov-link:hover { gap: 10px; }
.promo-card { transition: transform .2s, box-shadow .2s; }
.promo-card:hover { transform: translateY(-5px); box-shadow: 0 18px 34px rgba(2,10,40,.12); }

/* ---- Barra de promociones (arriba, bajo el header) ---- */
.promo-bar {
  background: linear-gradient(96deg, #021254 0%, #03178F 55%, #0B2BB8 100%);
  color: #fff;
}
.promo-bar[hidden] { display: none; }
.promo-bar-in {
  display: flex; align-items: center; gap: 14px;
  max-width: 1240px; margin: 0 auto;
  padding: 14px clamp(16px, 4vw, 40px);
}
.promo-bar-link {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px;
  color: inherit; text-decoration: none;
}
.promo-bar-thumb {
  flex: none; width: 52px; height: 52px; border-radius: 12px; overflow: hidden;
  background: rgba(255, 255, 255, .12); display: grid; place-items: center;
}
.promo-bar-thumb img { width: 100%; height: 100%; object-fit: cover; }
.promo-bar-thumb .lm-ph { width: 24px; height: 24px; background-color: #fff; opacity: .5; }
/* En escritorio la franja tiene alto de sobra y la foto del producto se veía
   como una estampilla. Crece solo de 900px para arriba: en móvil la barra es
   angosta y agrandarla empujaría el precio fuera de la pantalla. */
@media (min-width: 900px) {
  .promo-bar-thumb { width: 76px; height: 76px; border-radius: 14px; }
  .promo-bar-thumb .lm-ph { width: 34px; height: 34px; }
}
.promo-bar-off {
  flex: none; background: var(--rojo); color: #fff;
  font-family: var(--font-display); font-weight: 900; font-size: 15px;
  padding: 5px 11px; border-radius: 9px; letter-spacing: -.01em;
}
.promo-bar-txt { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 10px; }
.promo-bar-txt strong {
  font-weight: 700; font-size: 17px; color: #fff;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.promo-bar-precios { flex: none; display: flex; align-items: baseline; gap: 7px; }
.promo-bar-now { font-family: var(--font-display); font-weight: 900; font-size: 22px; color: #fff; }
.promo-bar-old { font-size: 14px; color: var(--azul-soft); text-decoration: line-through; }
.promo-bar-cta {
  flex: none; font-family: var(--font-display); font-weight: 800; font-size: 14px;
  padding: 9px 18px; border-radius: 100px;
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .22);
  transition: background .18s;
}
.promo-bar-link:hover .promo-bar-cta { background: rgba(255, 255, 255, .26); }
.promo-bar .promo-dots { margin: 0; flex: none; }
.promo-bar .promo-dot { background: rgba(255, 255, 255, .35); }
.promo-bar .promo-dot.on { background: #fff; }
.promo-bar .promo-dot:hover { background: rgba(255, 255, 255, .6); }

/* Móvil: la barra es angosta, así que se prioriza qué producto y a cuánto.
   El "Ver ofertas" se cae (toda la barra ya es un enlace) y el precio anterior
   también, que es lo menos decisivo para tocar. */
@media (max-width: 760px) {
  .promo-bar-in { gap: 11px; padding: 11px 14px; }
  .promo-bar-cta, .promo-bar-old { display: none; }
  .promo-bar-txt { gap: 8px; }
  .promo-bar-txt strong { font-size: 15px; }
  .promo-bar-now { font-size: 19px; }
}

/* ---- Carrusel de ofertas del hero ---- */
/* El contenido cambia con un fundido corto en vez de saltar de golpe. */
.promo-fade { transition: opacity .18s ease, transform .18s ease; }
.promo-fade.saliendo { opacity: 0; transform: translateY(-4px); }
.promo-dots { display: flex; gap: 7px; margin: 11px 0 0 4px; }
.promo-dots:empty { display: none; }   /* con una sola oferta no hay puntos */
.promo-dot {
  width: 8px; height: 8px; padding: 0; border: none; border-radius: 50%;
  background: var(--linea-2); cursor: pointer;
  transition: background .2s, width .2s;
}
.promo-dot.on { width: 22px; border-radius: 4px; background: var(--rojo); }
.promo-dot:hover { background: var(--azul-soft); }
.promo-dot.on:hover { background: var(--rojo); }

/* Móvil: se toca con el dedo, no se apunta con un mouse — los puntos crecen
   hasta un objetivo táctil cómodo. */
@media (max-width: 760px) {
  .promo-dots { gap: 9px; }
  .promo-dot { width: 9px; height: 9px; }
  .promo-dot.on { width: 24px; }
  /* El área táctil real es mayor que el punto visible. */
  .promo-dot::after { content: ''; position: absolute; inset: -14px; }
  .promo-dot { position: relative; }
}
@media (prefers-reduced-motion: reduce) {
  .promo-fade, .promo-dot { transition: none; }
}
.add-btn { transition: background .18s; }
.add-btn:hover { background: var(--azul-900); }
.bene-card { transition: border-color .2s, transform .2s; }
.bene-card:hover { border-color: var(--azul); transform: translateY(-3px); }
.cat-tile { transition: background .2s, transform .2s; }
.cat-tile:hover { background: var(--azul) !important; color: #fff !important; transform: translateY(-4px); }
.tut-btn { transition: border-color .15s, background .15s; }
.tut-btn:hover { border-color: var(--azul); background: var(--azul-bg); }
.hov-y:hover { transform: translateY(-2px); }
.launcher { transition: border-color .18s, opacity .4s ease, transform .4s cubic-bezier(.22,1,.36,1); }
.launcher:hover { border-color: var(--azul); }
.launcher.hide { opacity: 0; transform: translateY(22px) scale(.92); pointer-events: none; }
.chooser-card { transition: transform .18s, border-color .18s; }
.chooser-card:hover { transform: translateY(-3px); border-color: var(--azul); }
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
@media (prefers-reduced-motion: reduce) {
  .launcher { transition: opacity .2s ease; }
  .launcher.hide { transform: none; }
}

/* Respeta prefers-reduced-motion (requisito de accesibilidad §3.4) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================
   FICHA DE PRODUCTO (producto.html)
   Dos columnas en escritorio (foto | datos) y una sola en móvil.
   Reutiliza los tokens y el marcador "sin foto" (.lm-ph) del catálogo.
   ========================================================= */
.pd-migas {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 14px clamp(14px, 4vw, 28px) 0;
  font-size: 13px; color: var(--texto-2);
}
.pd-migas a { color: var(--texto-2); }
.pd-migas a:hover { color: var(--azul); text-decoration: underline; }
.pd-migas [aria-current] { color: var(--tinta); font-weight: 600; }
.pd-sep { color: var(--muted); }

.pd-root { padding: clamp(14px, 3vw, 24px) clamp(14px, 4vw, 28px) 0; }
.pd-grid { display: grid; grid-template-columns: 1fr; gap: clamp(18px, 3vw, 34px); }
@media (min-width: 820px) {
  .pd-grid { grid-template-columns: minmax(0, 460px) minmax(0, 1fr); align-items: start; }
  /* La foto acompaña al scroll mientras se comparan tamaños. */
  .pd-foto { position: sticky; top: calc(var(--hdr-h) + 16px); }
}

/* Mismo marco cuadrado que la tarjeta del catálogo: la foto se recorta dentro
   de la caja en vez de estirar el alto de la columna. */
.pd-foto {
  position: relative; aspect-ratio: 1; overflow: hidden;
  background: var(--azul-bg); border: 1.5px solid var(--linea);
  border-radius: var(--r-card); display: grid; place-items: center;
}
.pd-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pd-ph { width: 38%; max-width: 150px; aspect-ratio: 1; }

.pd-info { display: flex; flex-direction: column; gap: 10px; }
.pd-cat {
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted);
}
.pd-nombre {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(1.5rem, 3.4vw, 2.15rem); line-height: 1.12; letter-spacing: -.02em;
  color: var(--tinta); margin: 0; text-wrap: balance;
}
.pd-marca { font-size: 13.5px; font-weight: 700; color: var(--azul); }
.pd-desc { font-size: 15px; color: var(--texto-2); margin: 0; line-height: 1.5; }

.pd-stock {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  font-size: 13px; font-weight: 600; color: var(--st-apro-tx);
}
.pd-stock::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pd-stock.bajo { color: var(--st-pend-tx); }
.pd-stock.agotado { color: var(--rojo-ink); }
.pd-stock.sin { color: var(--muted); }

.pd-campo { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.pd-label {
  font-family: var(--font-display); font-weight: 800; font-size: 13px;
  letter-spacing: -.01em; color: var(--tinta);
}
.pd-label-n { font-family: var(--font-body); font-weight: 500; color: var(--muted); margin-left: 6px; }

/* Opciones de tamaño y de presentación: misma ficha visual para las dos, así
   se entiende que son dos preguntas del mismo tipo. */
.pd-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.pd-opt {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  min-width: 96px; min-height: 44px; padding: 8px 14px;
  background: #fff; border: 1.5px solid var(--linea-2); border-radius: 12px;
  cursor: pointer; text-align: left; transition: border-color .16s, background .16s, box-shadow .16s;
}
.pd-opt:hover { border-color: var(--azul); }
.pd-opt.activo {
  border-color: var(--azul); background: var(--azul-bg);
  box-shadow: inset 0 0 0 1px var(--azul);
}
.pd-opt-lbl { font-family: var(--font-display); font-weight: 800; font-size: 13.5px; color: var(--tinta); }
.pd-opt-contiene { font-size: 11.5px; color: var(--muted); }
.pd-opt.activo .pd-opt-contiene { color: var(--azul); }
.pd-opt-precio { font-size: 12.5px; font-weight: 600; color: var(--texto-2); }
.pd-opt.activo .pd-opt-precio { color: var(--azul); }
/* Agotado se marca, no se esconde: saber que existe pero no hay es información. */
.pd-opt.agotado .pd-opt-lbl { color: var(--muted); text-decoration: line-through; }

.pd-precio { display: flex; align-items: baseline; gap: 9px; margin-top: 10px; }
.pd-now {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(1.7rem, 4vw, 2.3rem); color: var(--azul); line-height: 1;
}
.pd-por { font-size: 13.5px; color: var(--texto-2); }
.pd-consultar { font-family: var(--font-display); font-weight: 800; font-size: 20px; color: var(--texto-2); }

.pd-qty { display: inline-flex; align-items: center; gap: 0; align-self: flex-start; }
.pd-qty-b {
  width: 44px; height: 44px; display: grid; place-items: center;
  background: #fff; border: 1.5px solid var(--linea-2); color: var(--tinta);
  font-family: var(--font-display); font-weight: 800; font-size: 19px; cursor: pointer;
}
.pd-qty-b:first-child { border-radius: 12px 0 0 12px; }
.pd-qty-b:last-child { border-radius: 0 12px 12px 0; }
.pd-qty-b:hover { background: var(--azul-bg); border-color: var(--azul); color: var(--azul); }
.pd-qty-i {
  width: 68px; height: 44px; text-align: center;
  border: 1.5px solid var(--linea-2); border-left: none; border-right: none;
  font-family: var(--font-display); font-weight: 800; font-size: 16px; color: var(--tinta);
  background: #fff; -moz-appearance: textfield;
}
.pd-qty-i::-webkit-outer-spin-button,
.pd-qty-i::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pd-subtotal { font-size: 13.5px; color: var(--texto-2); }
.pd-subtotal strong { color: var(--tinta); font-family: var(--font-display); font-weight: 800; }

.pd-cta { margin-top: 12px; width: 100%; max-width: 340px; padding: 15px; font-size: 16px; }
.pd-cta.ok { background: var(--st-apro-tx); }
.pd-nota { font-size: 12.5px; color: var(--muted); margin: 8px 0 0; line-height: 1.45; max-width: 42em; }
.pd-sku { font-size: 12px; color: var(--muted); margin-top: 12px; }

.pd-vacio { text-align: center; padding: clamp(40px, 9vw, 90px) 20px; }
.pd-vacio img { width: 120px; height: auto; margin-bottom: 14px; }
.pd-vacio h1 {
  font-family: var(--font-display); font-weight: 900; font-size: 1.5rem;
  color: var(--tinta); margin: 0 0 8px;
}
.pd-vacio p { color: var(--texto-2); margin: 0 0 20px; }

/* Aviso en el carrito cuando un producto salio del catalogo mientras el
   cliente armaba el pedido. Antes desaparecia del carrito en silencio y el
   pedido se enviaba sin el, sin que nadie lo notara. */
.cart-aviso {
  display: flex; flex-direction: column; gap: 3px;
  padding: 13px 15px; margin-bottom: 14px;
  border-radius: 14px;
  background: var(--st-pend-bg); border: 1px solid #F0DFB0;
}
.cart-aviso strong {
  font-family: var(--font-display); font-weight: 800; font-size: 14px;
  color: var(--st-pend-tx);
}
.cart-aviso span { font-size: 13px; color: #7A5E13; line-height: 1.45; }

/* ---------- Producto destacado dentro de una novedad ----------
   La publicacion puede promocionar un producto del catalogo: aca sale su
   ficha, con precio, y al tocarla se va a comprarlo. Si el producto salio del
   catalogo, novedades.js no pinta este bloque y la publicacion sigue igual. */
.nov-prod {
  display: flex; align-items: center; gap: 12px; margin-top: 14px;
  padding: 11px 13px; border: 1.5px solid var(--linea-2); border-radius: 13px;
  background: var(--gris-bg); color: var(--tinta);
  transition: border-color .16s, background .16s, transform .16s;
}
.nov-prod:hover { border-color: var(--azul); background: var(--azul-bg); transform: translateX(2px); }
.nov-prod-img {
  flex: none; width: 52px; height: 52px; border-radius: 10px; overflow: hidden;
  background: var(--azul-bg); display: grid; place-items: center;
}
.nov-prod-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.nov-prod-txt strong {
  font-family: var(--font-display); font-weight: 800; font-size: 14px;
  color: var(--tinta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nov-prod-desc {
  font-size: 12px; color: var(--texto-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nov-prod-precio {
  font-family: var(--font-display); font-weight: 900; font-size: 15px;
  color: var(--azul); margin-top: 2px;
}
.nov-prod svg { flex: none; width: 18px; height: 18px; color: var(--azul); }

/* ---------- Punto de "novedades sin leer" ----------
   En la barra de abajo va con numero, encima del icono. En el menu de
   escritorio el enlace es texto, asi que va como punto al lado, sin numero:
   una cifra encima de una palabra se lee mal. */
.bottom-nav .ni .nav-punto {
  position: absolute; top: 2px; left: 50%; margin-left: 6px;
  min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
  background: var(--rojo); color: #fff;
  font-family: var(--font-display); font-weight: 800; font-size: 10.5px;
  display: grid; place-items: center; border: 2px solid #fff;
  animation: popIn .28s cubic-bezier(.34, 1.56, .64, 1);
}
.site-nav .snav-link .nav-punto {
  display: inline-block; width: 7px; height: 7px; margin-left: 5px;
  border-radius: 50%; background: var(--rojo); vertical-align: 3px;
  animation: popIn .28s cubic-bezier(.34, 1.56, .64, 1);
}

/* "el gramo" / "el ml" al lado del precio. El cliente vende granos y especias
   a granel, asi que su lista trae el precio por gramo junto al de la libra y
   el del bulto. Sin la aclaracion, "$2" en el maiz se lee como un error de
   importacion, cuando es correcto: son $2 el gramo, $1.200 la libra. */
.prod-card-price .por-unidad { font-size: 11.5px; color: var(--texto-2); font-weight: 600; }
.pd-precio .por-unidad { font-size: 13.5px; color: var(--texto-2); }

/* ---------- Aparecer al hacer scroll (js/revelar.js) ----------
   Opacidad + 10px hacia arriba + desenfoque que se va. El desenfoque es lo que
   hace que el bloque se sienta entrando en foco y no simplemente encendiendose.
   Misma curva que el resto del sitio para que no se note un sistema aparte.

   El estado de reposo lo pone el JS con la clase .por-revelar, nunca el CSS
   solo: si el script no llegara a correr, el contenido quedaria invisible
   para siempre. Asi, sin JS, todo se ve normal. */
.por-revelar {
  opacity: 0;
  transform: translateY(10px);
  filter: blur(4px);
  transition:
    opacity .5s cubic-bezier(.22, 1, .36, 1) var(--revelar-espera, 0ms),
    transform .5s cubic-bezier(.22, 1, .36, 1) var(--revelar-espera, 0ms),
    filter .5s cubic-bezier(.22, 1, .36, 1) var(--revelar-espera, 0ms);
}
.por-revelar.revelado {
  opacity: 1;
  transform: none;
  filter: blur(0);
}
@media (prefers-reduced-motion: reduce) {
  /* Cinturon y tirantes: el JS ya no anima con esta preferencia, pero si algo
     alcanzara a poner la clase, aca queda visible igual. */
  .por-revelar { opacity: 1; transform: none; filter: none; transition: none; }
}

/* Aviso de "solo ofertas" en el catálogo. Se enciende cuando se entra por el
   botón del banner de promociones de la portada (catalogo.html?promo=1). */
.filtro-ofertas {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 6px 5px 11px; border-radius: 999px;
  background: #FFF3D6; border: 1px solid #F0D9A0; color: #8A6100;
  font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 12.5px;
  letter-spacing: -.01em; white-space: nowrap;
}
.filtro-ofertas[hidden] { display: none; }
.filtro-ofertas svg { flex: none; }
.filtro-ofertas button {
  border: 0; cursor: pointer; padding: 4px 10px; border-radius: 999px;
  background: #8A6100; color: #fff; font-family: inherit; font-weight: 700;
  font-size: 11.5px; letter-spacing: .01em;
}
.filtro-ofertas button:hover { background: #6E4D00; }