/* ==========================================================================
   Bani — catálogo de productos promocionales
   Composición a pantalla completa (edge-to-edge), sin marco ni tarjeta
   contenedora. Todas las fotografías son placeholders (gradientes neutros);
   listas para sustituirse por imágenes reales sin tocar la estructura.
   ========================================================================== */

:root {
  --font-display: 'Manrope', 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;

  /* Placeholder fotográfico genérico (foto principal) — blanco, sin tinte cake/beige */
  --ph-1: #ffffff;
  --ph-2: #f3f3f3;
  --ph-3: #e6e6e6;

  --ink: #171511;
  --ink-soft: rgba(23, 21, 17, 0.6);
  --paper: #ffffff;
  --line: rgba(23, 21, 17, 0.08);

  --accent: #4D5A8F;
  --accent-soft: #6D7CB0;

  /* ---- Colores corporativos semánticos — una sola fuente de verdad para
     todo lo que no sea azul de marca. Antes había ~9 verdes/rojos/dorados
     distintos regados por el CSS; ahora cada significado tiene un único
     tono (+ una variante oscura para texto/íconos legibles). ---- */
  --success: #18a558;      /* positivo: WhatsApp, en línea, "nuevo", confirmaciones */
  --success-dark: #0f7a40; /* success en texto/íconos sobre fondo claro, hover de success */
  --danger: #c0392b;       /* urgencia/oferta: descuentos, "más buscado", cuenta regresiva, remover */
  --danger-dark: #8a2a20;  /* danger en texto/íconos sobre fondo claro, hover de danger */
  --rating: #c9a227;       /* calificación: estrellas */
  --rating-dark: #8a6a1b;  /* rating en texto (chips, etiquetas) */

  /* ---- Escala tipográfica — un solo lugar para todos los tamaños de texto.
     Reemplaza ~15 valores sueltos (8px, 9.5px, 10.5px, 11.5px, 12.5px...)
     por pasos deliberados. ---- */
  --text-3xs: 9px;    /* badges, hints, conteos micro */
  --text-2xs: 10px;   /* meta secundaria: tiempos, specs, contadores */
  --text-xs: 11px;    /* etiquetas, texto secundario */
  --text-sm: 12px;    /* cuerpo de UI por defecto: chips, items de lista */
  --text-base: 13px;  /* texto de cuerpo más legible: nombres de producto, CTAs */
  --text-md: 14px;    /* copy de marketing (hero) */
  --text-lg: 15px;    /* títulos de panel (h3) */
  --text-xl: 16px;    /* títulos de tarjeta */
  --text-2xl: 17px;   /* inputs grandes, títulos destacados */
  --text-display-sm: 27px;                   /* cifras estadísticas */
  --text-display: clamp(38px, 7.4vw, 96px);  /* titular hero */

  --radius-card: 22px;
  --radius-pill: 999px;

  /* ---- Sistema de vidrio (Liquid Glass) — una sola fuente de verdad ----
     Todas las burbujas, cápsulas y tarjetas flotantes usan estos mismos
     tokens, en dos densidades: "1" (botones/controles pequeños) y
     "2" (superficies con texto, que necesitan más contraste). */
  --glass-tint-1: rgba(255, 255, 255, .42);
  --glass-tint-2: rgba(255, 255, 255, .64);
  --glass-sheen: linear-gradient(162deg, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, 0) 46%);
  --glass-border: rgba(255, 255, 255, .55);
  --glass-border-soft: rgba(255, 255, 255, .32);
  --glass-blur-sm: blur(16px) saturate(160%);
  --glass-blur-md: blur(24px) saturate(160%);

  /* Variante oscura, para los botones de acción primaria (capa 5) */
  --glass-dark-tint: rgba(77, 90, 143, .82);
  --glass-dark-sheen: linear-gradient(160deg, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, 0) 50%);
  --glass-dark-border: rgba(255, 255, 255, .16);

  /* Sombras ambientales suaves — nunca negro puro */
  --shadow-sm: 0 6px 18px -10px rgba(24, 18, 10, .24);
  --shadow-md: 0 14px 34px -16px rgba(24, 18, 10, .28);
  --shadow-lg: 0 26px 54px -22px rgba(24, 18, 10, .34);

  color-scheme: light;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

/* Nada se puede arrastrar de lado. overflow-x: clip (no hidden): recorta lo
   que sobresale SIN convertir al body en un segundo contenedor de scroll.
   Con "hidden" el body hacía su propio scroll vertical además del de la
   página, y en celular (Safari iOS / Chrome Android ignoran ese hidden al
   deslizar con el dedo) quedaban unos píxeles de más que se podían arrastrar
   hacia los lados. "hidden" en html queda solo como respaldo para
   navegadores viejos que no conocen clip. */
html { overflow-x: hidden; overflow-x: clip; }

body {
  font-family: var(--font-body);
  color: var(--ink);
  overflow-x: clip;
  /* Mismo tono que .stage--catalog: así el hueco del footer (ver sección
     Footer) siempre muestra este azul detrás, nunca un blanco que corte la
     continuidad entre el contenido y el footer. */
  background: #E3EAFA;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

/* Textura neutra tipo skeleton, sin usar imágenes reales */
.ph-fill {
  background: linear-gradient(145deg, var(--ph-1) 0%, var(--ph-2) 55%, var(--ph-3) 100%);
}

/* ---------- Escena: la foto ocupa toda la pantalla ---------- */

.stage {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
}

.panel {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  isolation: isolate;
}

.panel-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Slideshow de fondo: 4 capas superpuestas, el estado (autoplay + flecha
   "volver") lo controla orizon.js alternando .is-active. */
.panel-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  background-color: var(--ph-2);
  background-size: cover;
  background-position: center;
  transition: opacity 1s ease;
}
.panel-slide.is-active { opacity: 1; }
/* Degradados de respaldo si una diapositiva no trae foto real (style="background-image:..."). */
.panel-slide--1 {
  background-color: #14200f;
  background-image: url("/images/banners/1072.jpg");
  background-image: image-set(url("/images/banners/1072.webp") type("image/webp"), url("/images/banners/1072.jpg") type("image/jpeg"));
}
/* Velo de legibilidad para la foto (oscura, data-tone="dark"): oscurece un
   poco la esquina del título/copy y se desvanece antes del producto. Va dentro
   del slide para entrar y salir con su fade. */
.panel-slide--1::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 80% at 0% 0%, rgba(8, 14, 6, .55) 0%, rgba(8, 14, 6, .3) 40%, rgba(8, 14, 6, 0) 70%),
    linear-gradient(90deg, rgba(8, 14, 6, .35) 0%, rgba(8, 14, 6, 0) 40%);
}
.panel-slide--2 {
  background-color: #1a120d;
  background-image: url("/images/banners/549.jpg");
  background-image: image-set(url("/images/banners/549.webp") type("image/webp"), url("/images/banners/549.jpg") type("image/jpeg"));
}
/* Las luces de la ciudad (arriba a la izquierda) compiten con el titular:
   velo oscuro suave solo en esa esquina, se desvanece antes del reloj. */
.panel-slide--2::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 85% at 0% 0%, rgba(10, 6, 4, .72) 0%, rgba(10, 6, 4, .45) 40%, rgba(10, 6, 4, 0) 72%),
    linear-gradient(90deg, rgba(10, 6, 4, .4) 0%, rgba(10, 6, 4, 0) 42%);
}
/* La botella está al centro de la foto y quedaba detrás del titular: en
   escritorio se corre la foto a la derecha; el hueco de la izquierda lo cubre
   el mismo negro del borde de la imagen (#040404), sin costura. */
.panel-slide--3 {
  background-color: #040404;
  background-position: 16vw center;
  background-image: url("/images/banners/471.jpg");
  background-image: image-set(url("/images/banners/471.webp") type("image/webp"), url("/images/banners/471.jpg") type("image/jpeg"));
}
/* Funde el borde izquierdo de la foto corrida con el negro de relleno. */
.panel-slide--3::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #040404 0, #040404 16vw, rgba(4, 4, 4, 0) 30vw);
}
.panel-slide--4::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #0f1710 0, #0f1710 24vw, rgba(15, 23, 16, .55) 33vw, rgba(15, 23, 16, 0) 44vw);
}
/* Igual que el slide 3: el morral quedaba detrás del titular, así que en
   escritorio la foto se corre a la derecha y el borde se funde en verde bosque. */
.panel-slide--4 {
  background-color: #0f1710;
  background-position: 24vw center;
  background-image: url("/images/banners/650.jpg");
  background-image: image-set(url("/images/banners/650.webp") type("image/webp"), url("/images/banners/650.jpg") type("image/jpeg"));
}
/* Pantallas angostas: sin corrimiento ni fundido. Va DESPUÉS de la regla
   base de .panel-slide--4 — antes estaba arriba y el 24vw de escritorio le
   ganaba, dejando la foto del slide 4 corrida con una franja de relleno. */
@media (max-width: 991.98px) {
  .panel-slide--3,
  .panel-slide--4 { background-position: center; }
  .panel-slide--3::after,
  .panel-slide--4::after { display: none; }
}

.panel-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(195deg,
    rgba(0, 0, 0, .04) 0%,
    rgba(0, 0, 0, 0) 35%,
    rgba(0, 0, 0, 0) 55%,
    rgba(0, 0, 0, .05) 100%);
}

/* Flecha "volver" + indicador/contador del slideshow de fondo: dos círculos/
   cápsula de vidrio SEPARADOS, no la flecha dentro de la cápsula. */
.slide-controls {
  position: absolute;
  top: clamp(18px, 3vw, 32px);
  right: clamp(22px, 3.6vw, 48px);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
}

.slide-prev-btn {
  background: var(--glass-sheen), var(--glass-tint-1);
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  color: var(--ink);
}

.slide-indicator {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--glass-border-soft);
  border-radius: var(--radius-pill);
  background: var(--glass-sheen), var(--glass-tint-2);
  backdrop-filter: var(--glass-blur-md);
  -webkit-backdrop-filter: var(--glass-blur-md);
  box-shadow: var(--shadow-sm);
  padding: 9px 16px;
}

/* Pie del home (no lleva footer): cápsula con el © + cápsula con los enlaces
   legales (Privacidad / Términos / Cookies), mismo vidrio del indicador del
   slideshow. Abajo a la derecha, bajo la tarjeta del producto y alineado con
   el borde inferior de la tarjeta blanca; en celular va centrado al final. */
.panel-foot {
  position: absolute;
  z-index: 3;
  right: clamp(22px, 3.6vw, 48px);
  bottom: clamp(26px, 4vw, 42px);
  display: flex;
  align-items: center;
  gap: 8px;
}
.panel-foot-copy,
.slide-legal {
  border: 1px solid var(--glass-border-soft);
  border-radius: var(--radius-pill);
  background: var(--glass-sheen), var(--glass-tint-2);
  backdrop-filter: var(--glass-blur-md);
  -webkit-backdrop-filter: var(--glass-blur-md);
  box-shadow: var(--shadow-sm);
}
.panel-foot-copy {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  margin: 0;
  padding: 0 16px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.panel-foot-copy span { color: var(--ink-soft); }
.slide-legal {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
}
.slide-legal-link {
  position: relative;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease;
}
.slide-legal-link svg { width: 15px; height: 15px; }
.slide-legal-link:hover,
.slide-legal-link:focus-visible { background: var(--accent); color: #fff; outline: none; }
/* Etiqueta al pasar el mouse, hacia ARRIBA (la cápsula está al pie). */
.slide-legal-link::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  padding: 4px 9px;
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  translate: -50% 4px;
  pointer-events: none;
  transition: opacity .16s ease, translate .16s ease;
}
.slide-legal-link:hover::after,
.slide-legal-link:focus-visible::after { opacity: 1; translate: -50% 0; }

.slide-indicator-dots {
  display: flex;
  align-items: center;
  gap: 6px;
}

.slide-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink);
  opacity: .28;
  cursor: pointer;
  transition: opacity .35s ease, transform .35s ease, background .35s ease;
}
.slide-dot.is-active {
  opacity: 1;
  background: var(--accent);
  transform: scale(1.35);
}

.slide-indicator-count {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--ink-soft);
  letter-spacing: .02em;
  white-space: nowrap;
}
.slide-indicator-current {
  color: var(--ink);
  font-weight: 700;
  transition: color .2s ease;
}

/* ---------- Rail lateral: dos cápsulas + dúo avatar/campana ---------- */

.rail {
  /* fixed (no absolute dentro de .stage): así queda anclado al viewport y
     se mantiene visible al hacer scroll en páginas más altas que 100vh
     (ej. el listado de productos), igual que .mega-menu/.rail-panel. */
  position: fixed;
  left: clamp(10px, 1.4vw, 22px);
  top: 50%;
  transform: translateY(-50%);
  /* Por encima de TODOS los overlays del nav (rail-panel-scrim 39, rail-panel
     40, mega-menu 42, search-overlay 50): si no, con cualquier panel abierto
     el overlay de pantalla completa tapaba los botones del rail — click en
     "Carrito" caía sobre el scrim/mega-menú/buscador (que cierra el panel
     activo) en vez de abrir el carrito. En desktop los paneles/mega-menú se
     posicionan a la derecha del rail y no se superponen, pero en mobile
     (<=760px) el mega-menú y el buscador pasan a ocupar casi toda la
     pantalla (ver media query) y SÍ tapan el rail — de ahí que el rail deba
     quedar por encima de los 50 del buscador, no solo de los 39-42. */
  z-index: 51;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.rail-btn {
  position: relative;
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 50%;
  background: none;
  box-shadow: none;
  display: grid;
  place-items: center;
  color: var(--ink-soft);
  flex-shrink: 0;
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.rail-btn svg { width: 18px; height: 18px; }
/* Foco por teclado (p. ej. al cerrar un panel el foco vuelve a su botón):
   anillo índigo suave del sitio en vez del negro por defecto del navegador. */
.rail-btn:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 2px; }
.rail-btn:hover { color: #fff; background: var(--glass-dark-sheen), var(--glass-dark-tint); }

/* Badge de conteo (notificaciones/mensajes/carrito sin abrir) */
.rail-btn-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--accent);
  border: 2px solid var(--paper);
  color: #fff;
  font-size: var(--text-3xs);
  font-weight: 800;
  line-height: 1;
  display: grid;
  place-items: center;
  white-space: nowrap;
}

/* Badge publicitario (texto corto en vez de un número): un poco más alto y
   ancho, sale del círculo del ícono a propósito, como un sticker de oferta. */
.rail-btn-badge--promo {
  top: -6px;
  right: -30px;
  min-width: 0;
  height: auto;
  padding: 3px 7px;
  font-size: var(--text-3xs);
  letter-spacing: .03em;
  text-transform: uppercase;
  background: linear-gradient(135deg, var(--accent-soft), var(--accent));
  animation: promo-pulse 1.8s ease-in-out infinite;
}

@keyframes promo-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(77, 90, 143, .45); }
  50% { transform: scale(1.08); box-shadow: 0 0 0 5px rgba(77, 90, 143, 0); }
}
.rail-btn.is-active {
  background: var(--glass-dark-sheen), var(--glass-dark-tint);
  color: #fff;
}
.rail-btn.is-active:hover { background: var(--glass-dark-sheen), var(--glass-dark-tint); }

/* Cápsula: agrupa varios botones en una sola superficie de vidrio */
.rail-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px;
  border: 1px solid var(--glass-border-soft);
  border-radius: var(--radius-pill);
  background: var(--glass-sheen), var(--glass-tint-1);
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  box-shadow: var(--shadow-sm);
}

/* Sin cápsula: cada ícono es su propio círculo de vidrio, un poco separados.
   Sin difuminado: los 4 íconos (incl. notificaciones) se ven igual de nítidos. */
.rail-group--fade {
  gap: 10px;
  padding: 0;
  border: none;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}
.rail-group--fade .rail-btn:not(.is-active) {
  border: 1px solid var(--glass-border-soft);
  background: var(--glass-sheen), var(--glass-tint-1);
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  box-shadow: var(--shadow-sm);
}
/* Mismo hover que el resto de .rail-btn (fondo oscuro + ícono blanco): sin
   esto, el fondo claro de reposo de arriba ganaba por especificidad y el
   hover de buscar/menú/ofertas se quedaba a medias (solo cambiaba el color). */
.rail-group--fade .rail-btn:not(.is-active):hover {
  background: var(--glass-dark-sheen), var(--glass-dark-tint);
  border-color: transparent;
}

/* Avatar + campana: sueltos, sin cápsula, pero pegados entre sí */
.rail-duo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px;
  border: 1px solid var(--glass-border-soft);
  border-radius: var(--radius-pill);
  background: var(--glass-sheen), var(--glass-tint-1);
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  box-shadow: var(--shadow-sm);
}
.rail-duo .rail-btn { background: transparent; border: none; box-shadow: none; }
.rail-duo .rail-btn:hover,
/* Botón activo dentro de la cápsula (p. ej. Mensajes con su panel abierto):
   sin esto el fondo transparente de arriba le ganaba y quedaba un ícono
   blanco sobre vidrio claro, casi invisible. */
.rail-duo .rail-btn.is-active { background: var(--glass-dark-sheen), var(--glass-dark-tint); }

/* Acceso directo a WhatsApp en el índigo de marca (logo blanco), igual que Inicio. */
.rail-duo .rail-btn--whatsapp {
  background: var(--accent);
  border: 2px solid rgba(255, 255, 255, .75);
  box-shadow: 0 4px 14px rgba(77, 90, 143, .35);
  color: #fff;
}
.rail-duo .rail-btn--whatsapp svg { width: 21px; height: 21px; }
.rail-duo .rail-btn--whatsapp:hover {
  background: #424e7e;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(77, 90, 143, .45);
}
.rail-duo .rail-btn--whatsapp:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Titular + copy */

.hero {
  position: relative;
  z-index: 3;
  padding: clamp(20px, 4vw, 38px) clamp(22px, 3.6vw, 48px) 0 clamp(78px, 9vw, 100px);
  color: #fff;
  /* Caja de bloque a todo el ancho: sin esto, aunque el texto está a la
     izquierda, su área invisible tapaba los clics de .slide-controls. */
  pointer-events: none;
}

.hero-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(38px, 7.4vw, 96px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
  max-width: 14ch;
  color: var(--ink);
}

/* Logo de marca encima del titular del hero. */
.hero-logo {
  display: block;
  width: auto;
  height: clamp(26px, 2.7vw, 38px);
  margin: 0 0 clamp(8px, 1.2vw, 16px);
}

/* Segunda línea del titular en el color corporativo (mismo índigo del isotipo). */
.hero-title-accent { color: var(--accent); }

/* Slides con fondo oscuro (data-tone="dark" en .panel-slide): orizon.js pone
   .panel--dark-slide en el panel y el texto del hero pasa a claro. */
.hero-logo,
.hero-title,
.hero-title-accent,
.hero-copy { transition: color .6s ease, filter .6s ease; }
.panel--dark-slide .hero-logo { filter: brightness(0) invert(1); }
.panel--dark-slide .hero-title { color: #fff; }
.panel--dark-slide .hero-title-accent { color: #aeb8e6; }
.panel--dark-slide .hero-copy { color: rgba(255, 255, 255, .88); text-shadow: 0 1px 10px rgba(0, 0, 0, .55), 0 0 2px rgba(0, 0, 0, .35); }
.panel--dark-slide .hero-title { text-shadow: 0 2px 24px rgba(0, 0, 0, .25); }

.hero-copy {
  font-size: var(--text-md);
  line-height: 1.65;
  max-width: 300px;
  color: rgba(23, 21, 17, .8);
  margin: 0;
}

/* ---------- Tarjetas flotantes (con colita tipo globo) ---------- */

.card {
  position: absolute;
  z-index: 4;
  border: 1px solid var(--glass-border-soft);
  border-radius: var(--radius-card);
  background: var(--glass-sheen), var(--glass-tint-2);
  backdrop-filter: var(--glass-blur-md);
  -webkit-backdrop-filter: var(--glass-blur-md);
  box-shadow: var(--shadow-lg);
  padding: 22px 24px 20px;
}

/* Tarjeta normal con borde; la "punta" es el mismo borde de la tarjeta que se
   extiende hacia abajo, empalmado al pixel (sin huecos ni formas sueltas). */
.card::after {
  content: "";
  position: absolute;
  top: 100%;
  margin-top: -1px;
  width: 28px;
  height: 16px;
  background: inherit;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  z-index: -1;
}

.card--highlight {
  left: clamp(78px, 9vw, 100px);
  bottom: clamp(26px, 4vw, 42px);
  width: clamp(340px, 40%, 440px);
  min-height: 260px;
  padding: 36px 36px 34px;
  border-radius: 60px;
  display: flex;
  flex-direction: column;
  /* Única tarjeta flotante sin glass: fondo sólido, el liquid glass queda
     reservado para .card--info (la que lleva el badge). */
  border-color: var(--line);
  background: var(--paper);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.card--highlight .card-highlight-stat { margin-top: auto; }

.card--highlight::after { display: none; }

.card-highlight-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  margin: 0 0 2px;
}

.card-highlight-copy {
  font-size: var(--text-sm);
  line-height: 1.2;
  color: var(--ink-soft);
  margin: 0 0 6px;
}

.card-highlight-stat {
  display: flex;
  align-items: center;
  gap: 10px;
}

.stat-block { line-height: 1.2; }

.stat-number {
  font-family: var(--font-display);
  font-size: var(--text-display-sm);
  font-weight: 800;
  letter-spacing: -0.01em;
}

.stat-label {
  display: block;
  font-size: var(--text-xs);
  color: var(--ink-soft);
}

.avatar-stack {
  display: flex;
  margin-left: auto;
}
.avatar-stack .avatar-thumb {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
  border: 3px solid rgba(255, 255, 255, .85);
  margin-left: -18px;
  box-shadow: var(--shadow-sm);
}
.avatar-stack .avatar-thumb:first-child { margin-left: 0; }
.avatar-stack .avatar-thumb img { width: 72%; height: 72%; object-fit: contain; display: block; }

.icon-btn {
  width: 34px;
  height: 34px;
  border: 1px solid var(--glass-border-soft);
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.icon-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--glass-border); }
.icon-btn svg { width: 15px; height: 15px; }
.icon-btn--primary {
  background: var(--glass-dark-sheen), var(--glass-dark-tint);
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  border-color: var(--glass-dark-border);
  color: #fff;
}
.icon-btn--sm {
  width: 42px;
  height: 42px;
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  margin-left: 8px;
}
.icon-btn--sm:hover { background: var(--accent-soft); border-color: var(--accent-soft); }
.icon-btn--sm svg { width: 17px; height: 17px; }

.card--info {
  right: clamp(22px, 3.6vw, 48px);
  bottom: clamp(100px, 17vw, 156px);
  width: clamp(300px, 32%, 360px);
  padding: 36px 36px 34px;
  /* La silueta completa (3 esquinas normales + la ola orgánica en la
     inferior izquierda) la define el path SVG, no el border-radius. */
  clip-path: url(#card-wave-clip);
  /* Liquid glass, más marcado que el .card base: tinte más diluido (deja ver
     más el fondo con blur detrás), más blur/saturación y un highlight
     interior que sigue la silueta recortada (incluido el hueco del badge). */
  border-color: rgba(255, 255, 255, .55);
  background:
    linear-gradient(162deg, rgba(255, 255, 255, .72) 0%, rgba(255, 255, 255, .04) 40%, rgba(255, 255, 255, .28) 100%),
    rgba(255, 255, 255, .34);
  backdrop-filter: blur(34px) saturate(200%);
  -webkit-backdrop-filter: blur(34px) saturate(200%);
  box-shadow:
    var(--shadow-lg),
    inset 0 1px 1px rgba(255, 255, 255, .8),
    inset 0 0 0 1px rgba(255, 255, 255, .22),
    inset 0 -14px 20px -16px rgba(255, 255, 255, .25);
}
.card--info::after { display: none; }
/* Una tarjeta por producto destacado; orizon.js deja visible solo la de la diapositiva activa. */
.card--info[hidden] { display: none; }

.info-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.info-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  margin: 0 0 6px;
}

.info-location {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  font-size: var(--text-xs);
  line-height: 1.4;
  color: var(--ink-soft);
  margin: 0;
}
.info-location svg { width: 13px; height: 13px; flex-shrink: 0; margin-top: 1px; }
.info-location span {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.info-copy {
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 14px;
}

.info-specs {
  list-style: none;
  margin: 0;
  /* Arranca justo después de la curva interior del hueco, sin mover
     el resto del footer (íconos) que ya estaba bien posicionado. */
  padding: 10px 0 10px 90px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 10px;
}
.info-specs li {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-2xs);
  font-weight: 500;
  color: var(--ink);
}
.info-specs svg { width: 14px; height: 14px; color: var(--accent); flex-shrink: 0; }

.info-actions {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.info-actions-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.action-item--end { margin-left: auto; }

.action-count {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--ink-soft);
}

.icon-btn--action {
  width: 36px;
  height: 36px;
  background: var(--glass-tint-1);
  color: var(--ink);
}
.icon-btn--action svg { width: 15px; height: 15px; }

/* Pastilla "Ver relacionados" de la tarjeta del producto destacado: lleva a
   la sección #relacionados de su ficha. Mismo vidrio claro que .icon-btn--action. */
.info-related-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 14px 0 12px;
  border: 1px solid var(--glass-border-soft);
  border-radius: var(--radius-pill);
  background: var(--glass-tint-1);
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.info-related-btn:hover {
  color: var(--ink);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--glass-border);
  background: var(--glass-tint-2);
}
.info-related-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.info-related-btn svg { width: 14px; height: 14px; color: var(--accent); }

/* Distintivo circular, montado justo sobre la esquina inferior izquierda
   de la tarjeta (mitad adentro, mitad afuera) — sin recortar la tarjeta. */

.action-item--badge-spacer { display: none; }

.brand-badge {
  position: absolute;
  z-index: 5;
  right: clamp(224px, calc(32% - 60px - clamp(38px, 4.25vw, 50px)), 298px);
  bottom: clamp(114px, calc(clamp(100px, 17vw, 156px) + 51.5px - clamp(38px, 4.25vw, 50px)), 158px);
  width: clamp(76px, 8.5vw, 100px);
  height: clamp(76px, 8.5vw, 100px);
  border-radius: 50%;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, .35) 0%, rgba(255, 255, 255, 0) 45%),
    radial-gradient(circle at 32% 28%, var(--accent-soft), var(--accent) 72%);
  display: grid;
  place-items: center;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, .5);
  box-shadow: var(--shadow-lg);
}
.brand-badge img { width: 38%; height: 38%; }

/* ---------- Buscador: overlay tipo command palette, liquid glass ---------- */

.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(90px, 14vw, 150px) 20px 40px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility 0s linear .25s;
}
.search-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity .25s ease;
}

.search-overlay-scrim {
  position: absolute;
  inset: 0;
  background: rgba(23, 21, 17, .32);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.search-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 600px;
  max-height: calc(100vh - clamp(90px, 14vw, 150px) - 60px);
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--glass-border);
  border-radius: 28px;
  background: linear-gradient(162deg, rgba(255, 255, 255, .72) 0%, rgba(255, 255, 255, .04) 40%, rgba(255, 255, 255, .28) 100%), rgba(255, 255, 255, .5);
  backdrop-filter: blur(34px) saturate(200%);
  -webkit-backdrop-filter: blur(34px) saturate(200%);
  box-shadow: var(--shadow-lg), inset 0 1px 1px rgba(255, 255, 255, .75), inset 0 0 0 1px rgba(255, 255, 255, .2);
  padding: 18px;
  transform: translateY(-12px) scale(.97);
  transition: transform .3s cubic-bezier(.16, .8, .3, 1);
}
.search-overlay.is-open .search-panel {
  transform: translateY(0) scale(1);
}

.search-field {
  position: sticky;
  top: -18px;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: -18px -18px 0;
  padding: 18px 12px 10px 20px;
  background: inherit;
  border-radius: 28px 28px 0 0;
}
.search-field > svg { width: 18px; height: 18px; color: var(--ink-soft); flex-shrink: 0; }

.search-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  outline: none;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--ink);
  padding: 10px 0;
}
.search-input::placeholder { color: var(--ink-soft); font-weight: 500; }

.search-close { width: 32px; height: 32px; flex-shrink: 0; }
.search-close svg { width: 14px; height: 14px; }

.search-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 8px 8px;
  border-top: 1px solid var(--line);
  margin-top: 6px;
}

.search-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .45);
  padding: 8px 14px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  transition: border-color .18s ease, background .18s ease;
}
.search-chip:hover { border-color: var(--glass-border); background: rgba(255, 255, 255, .75); }
.search-chip svg { width: 13px; height: 13px; color: var(--accent); flex-shrink: 0; }

/* Estado: mismo chip neutro para las 4 — solo el ícono lleva el color de su
   significado real (oferta/marca/calificación/nuevo), no el chip entero.
   Antes cada uno tenía su propio fondo/borde de color: mucho ruido en una
   sola fila. */
.search-chip--hot svg { color: var(--danger-dark); }
.search-chip--bought svg { color: var(--accent); }
.search-chip--rated svg { color: var(--rating-dark); }
.search-chip--new svg { color: var(--success-dark); }

.search-section { padding: 14px 6px 2px; }
.search-section + .search-section { border-top: 1px solid var(--line); margin-top: 4px; }
.search-section-label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink-soft);
  padding: 4px 10px 10px;
}

/* Categorías: una sola fila tipo lista, scroll horizontal si no caben */
.search-category-grid {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  padding: 2px 4px 6px;
  overflow-x: auto;
  scrollbar-width: none;
}
.search-category-grid::-webkit-scrollbar { display: none; }

/* Tira deslizable con flechas (categorías del buscador). Las flechas son el
   mismo .icon-btn de vidrio del resto, más chico, sobre los bordes; el
   desvanecido del borde aparece solo del lado donde quedan elementos
   (.has-prev / .has-next los pone initScrollStrips). */
.strip-scroller { position: relative; }
.strip-scroller [data-strip-track] { scroll-behavior: smooth; }
.strip-scroller.has-next [data-strip-track] {
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 78%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0, #000 78%, transparent 100%);
}
.strip-scroller.has-prev [data-strip-track] {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 22%, #000 100%);
}
.strip-scroller.has-prev.has-next [data-strip-track] {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18%, #000 82%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 18%, #000 82%, transparent 100%);
}
.strip-arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 30px;
  height: 30px;
  margin-top: -2px; /* compensa el padding inferior de la tira */
  translate: 0 -50%;
  background: var(--glass-sheen), var(--glass-tint-2);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  backdrop-filter: var(--glass-blur-sm);
  color: var(--ink);
  cursor: pointer;
}
.strip-arrow svg { width: 15px; height: 15px; }
.strip-arrow[hidden] { display: none; }
.strip-arrow--prev { left: -4px; }
.strip-arrow--next { right: -4px; }
/* Área táctil de 44 px sin cambiar el tamaño visible. */
.strip-arrow::before { content: ""; position: absolute; inset: -7px; }

.search-category {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: none;
  padding: 6px 14px 6px 6px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease;
}
.search-category:hover { background: rgba(255, 255, 255, .5); border-color: var(--glass-border); }
.search-category-icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--glass-tint-1);
  border: 1px solid var(--glass-border-soft);
  flex-shrink: 0;
}
.search-category-icon svg { width: 13px; height: 13px; color: var(--accent); }

/* Tendencias: lista con ícono de fuego + contador de volumen de búsqueda */
.search-suggestion {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: none;
  background: none;
  border-radius: 14px;
  padding: 9px 10px;
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--ink);
  text-align: left;
  text-decoration: none;
  transition: background .15s ease;
}
.search-suggestion:hover { background: rgba(255, 255, 255, .55); }
.search-suggestion-trend { width: 14px; height: 14px; color: var(--danger); flex-shrink: 0; }
.search-suggestion-label { flex: 1; }
.search-suggestion-count {
  flex: 0 0 auto;
  font-size: var(--text-2xs);
  font-weight: 700;
  color: var(--accent);
  background: rgba(77, 90, 143, .1);
  border-radius: var(--radius-pill);
  padding: 3px 8px;
}

/* Recientes: chips pequeños, una fila que puede envolver */
.search-recent {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 4px;
}
.search-recent-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: none;
  padding: 7px 12px;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--ink-soft);
  transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.search-recent-chip:hover { color: var(--ink); border-color: var(--glass-border); background: rgba(255, 255, 255, .5); }
.search-recent-chip svg { width: 12px; height: 12px; flex-shrink: 0; }

.search-hint {
  margin: 8px 2px 2px;
  font-size: var(--text-2xs);
  color: var(--ink-soft);
  text-align: center;
}
.search-hint kbd {
  font-family: inherit;
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 1px 5px;
  font-size: var(--text-2xs);
}

/* ---------- Confirmación global (reemplaza window.confirm) ----------
   Mismo lenguaje liquid glass que .search-overlay, pero compacto y
   centrado, por encima de TODO (incluido el estudio de marcación) porque
   puede abrirse desde cualquier overlay para confirmar algo destructivo. */
.confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, visibility 0s linear .2s;
}
.confirm-overlay.is-open { opacity: 1; visibility: visible; transition: opacity .2s ease; }
.confirm-scrim { position: absolute; inset: 0; background: rgba(23,21,17,.42); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

.confirm-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 30px 26px 24px;
  border: 1px solid var(--glass-border);
  border-radius: 24px;
  background: linear-gradient(162deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.3) 40%, rgba(255,255,255,.7) 100%), rgba(255,255,255,.78);
  backdrop-filter: blur(34px) saturate(200%);
  -webkit-backdrop-filter: blur(34px) saturate(200%);
  box-shadow: var(--shadow-lg), inset 0 1px 1px rgba(255,255,255,.8), inset 0 0 0 1px rgba(255,255,255,.2);
  transform: translateY(10px) scale(.96);
  transition: transform .28s cubic-bezier(.16,.8,.3,1);
}
.confirm-overlay.is-open .confirm-panel { transform: translateY(0) scale(1); }

.confirm-icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 6px; border-radius: 50%; background: rgba(192,57,43,.12); color: var(--danger-dark); }
.confirm-icon svg { width: 22px; height: 22px; }
.confirm-title { margin: 0; color: var(--ink); font-family: var(--font-display); font-size: var(--text-xl); font-weight: 800; }
.confirm-message { margin: 0; max-width: 32ch; color: var(--ink-soft); font-size: var(--text-sm); line-height: 1.55; }

.confirm-actions { display: flex; gap: 10px; width: 100%; margin-top: 18px; }
.confirm-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: var(--radius-pill); padding: 12px; font-size: var(--text-sm); font-weight: 700; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
.confirm-btn:hover { transform: translateY(-1px); }
.confirm-btn--ghost { background: #fff; color: var(--ink); border: 1px solid var(--line); }
.confirm-btn--ghost:hover { background: rgba(255,255,255,.7); }
.confirm-btn--danger { background: var(--danger); color: #fff; box-shadow: var(--shadow-sm); }
.confirm-btn--danger:hover { background: var(--danger-dark); box-shadow: var(--shadow-md); }

/* ---------- Paneles contextuales del rail (Explorar/Notificaciones/Cuenta/
   Mensajes/Me gusta/Comparar/Carrito): liquid glass anclado al rail, con la
   misma "colita" del sistema de tarjetas apuntando al ícono que lo abrió. */

.rail-panel-scrim {
  position: fixed;
  inset: 0;
  z-index: 39;
  background: transparent;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, background .2s ease;
}
.rail-panel-scrim.is-open { opacity: 1; pointer-events: auto; }

.rail-panel {
  position: fixed;
  z-index: 40;
  width: 346px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--glass-border);
  border-radius: 24px;
  background: linear-gradient(162deg, rgba(255, 255, 255, .72) 0%, rgba(255, 255, 255, .04) 40%, rgba(255, 255, 255, .28) 100%), rgba(255, 255, 255, .5);
  backdrop-filter: blur(30px) saturate(190%);
  -webkit-backdrop-filter: blur(30px) saturate(190%);
  box-shadow: var(--shadow-lg), inset 0 1px 1px rgba(255, 255, 255, .75), inset 0 0 0 1px rgba(255, 255, 255, .2);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-8px) scale(.97);
  transition: opacity .22s ease, transform .22s cubic-bezier(.16, .8, .3, 1), visibility 0s linear .22s;
}
.rail-panel.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0) scale(1);
  transition: opacity .22s ease, transform .22s cubic-bezier(.16, .8, .3, 1);
}

.rail-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 14px 10px 20px;
}
.rail-panel-head h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--ink);
}
.rail-panel-close { width: 30px; height: 30px; }
.rail-panel-close svg { width: 13px; height: 13px; }

.rail-panel-body { padding: 2px 10px 6px; }

.rail-panel-foot { display: grid; gap: 8px; padding: 10px; border-top: 1px solid var(--line); }

.rail-panel-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: #fff;
  font-size: var(--text-base);
  font-weight: 700;
  padding: 11px;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.rail-panel-cta[hidden] { display: none; }
.rail-panel-cta:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.rail-panel-cta svg { width: 14px; height: 14px; }
.rail-panel-cta--ghost { background: none; color: var(--ink); border: 1px solid var(--line); }
.rail-panel-cta--ghost:hover { background: rgba(255, 255, 255, .5); }
.rail-panel-cta--danger { background: none; color: var(--danger-dark); border: 1px solid rgba(138, 42, 32, .25); }
.rail-panel-cta--danger:hover { background: rgba(138, 42, 32, .08); }

.rail-panel-foot--split { display: flex; align-items: stretch; }
.rail-panel-foot--split .rail-panel-cta:first-child { flex: 1; width: auto; }
.rail-panel-cta--icon { flex: 0 0 auto; width: 46px; padding: 0; }
.rail-panel-cta--icon svg { width: 16px; height: 16px; }

/* ---------- Explorar: mega-menú de categorías a toda altura ----------
   Panel propio (no .rail-panel): va acoplado al rail como una sidebar real
   de catálogo, con lista de categorías + panel de subcategorías + banner,
   en vez de la cápsula flotante que usan los demás íconos del rail. */

.mega-menu {
  position: fixed;
  top: 14px;
  bottom: 14px;
  z-index: 42;
  display: flex;
  flex-direction: column;
  width: clamp(620px, 50vw, 800px);
  max-width: calc(100vw - 48px);
  border: 1px solid var(--glass-border);
  border-radius: 26px;
  background: linear-gradient(162deg, rgba(255, 255, 255, .72) 0%, rgba(255, 255, 255, .04) 40%, rgba(255, 255, 255, .28) 100%), rgba(255, 255, 255, .5);
  backdrop-filter: blur(30px) saturate(190%);
  -webkit-backdrop-filter: blur(30px) saturate(190%);
  box-shadow: var(--shadow-lg), inset 0 1px 1px rgba(255, 255, 255, .75), inset 0 0 0 1px rgba(255, 255, 255, .2);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-10px) scale(.98);
  transition: opacity .24s ease, transform .24s cubic-bezier(.16, .8, .3, 1), visibility 0s linear .24s;
}
.mega-menu.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0) scale(1);
  transition: opacity .24s ease, transform .24s cubic-bezier(.16, .8, .3, 1);
}

.mega-menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  padding: 18px 14px 14px 22px;
  border-bottom: 1px solid var(--line);
}
.mega-menu-head h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--ink);
}
.mega-menu-head h3 svg { width: 17px; height: 17px; color: var(--accent); }
.mega-menu-close { width: 32px; height: 32px; }
.mega-menu-close svg { width: 14px; height: 14px; }

.mega-menu-body {
  display: flex;
  flex: 1;
  min-height: 0;
}

/* Columna angosta: lista de categorías */
.mega-menu-cats {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  width: 332px;
  overflow-y: auto;
  padding: 10px;
  border-right: 1px solid var(--line);
}
.mega-cat {
  display: flex;
  align-items: center;
  gap: 10px;
  border: none;
  background: none;
  border-radius: 12px;
  padding: 9px 8px;
  text-align: left;
  color: var(--ink);
  transition: background .15s ease;
}
/* is-active = qué panel se ve ahora mismo (el hover lo reasigna vía JS, es
   solo "vista previa", ver initMegaMenu/selectCat en orizon.js): velo
   neutro, nada de color de marca acá. */
.mega-cat:hover,
.mega-cat.is-active { background: rgba(255, 255, 255, .5); }
.mega-cat.is-active:hover { background: rgba(255, 255, 255, .62); }
.mega-cat-icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
  background: rgba(255, 255, 255, .55);
  color: var(--ink-soft);
  transition: background .15s ease, color .15s ease;
}
.mega-cat-icon svg { width: 13px; height: 13px; }
.mega-cat-name {
  flex: 1;
  min-width: 0;
  font-size: var(--text-xs);
  font-weight: 600;
  white-space: nowrap;
}
.mega-cat-count { font-size: var(--text-2xs); color: var(--ink-soft); flex-shrink: 0; }
.mega-cat-chev { width: 13px; height: 13px; color: var(--ink-soft); flex-shrink: 0; opacity: 0; transition: opacity .15s ease, transform .15s ease; }
.mega-cat.is-active .mega-cat-chev { opacity: 1; transform: translateX(2px); }

/* mega-cat--selected = la categoría que de verdad filtra la página (fija,
   viene del servidor según categoriaId de la URL) — color de marca que NO
   se mueve con el hover, para no confundirla con is-active (la vista
   previa de arriba, que es solo un velo neutro). Si estás previsualizando
   otra categoría, esta sigue marcada con su propio fondo tintado así se
   vea sin el velo blanco de is-active. */
.mega-cat--selected { background: rgba(77, 90, 143, .1); }
.mega-cat--selected:hover { background: rgba(77, 90, 143, .16); }
.mega-cat--selected.is-active { background: rgba(77, 90, 143, .14); }
.mega-cat--selected.is-active:hover { background: rgba(77, 90, 143, .2); }
.mega-cat--selected .mega-cat-icon { background: var(--accent); color: #fff; }
.mega-cat--selected .mega-cat-name { font-weight: 700; color: var(--accent); }

/* Panel derecho: subcategorías de la categoría activa + banner */
.mega-menu-panel {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding: 16px 20px 20px;
  display: flex;
  flex-direction: column;
}

/* "← Categorías" solo existe en celular (ver media query ≤760px). */
.mega-mobile-back { display: none; }

.mega-sub-panel { display: none; }
.mega-sub-panel.is-active { margin-bottom: 16px; }
.mega-sub-panel.is-active { display: block; animation: mega-fade-in .18s ease both; }
@keyframes mega-fade-in {
  from { opacity: 0; translate: 4px 0; }
  to { opacity: 1; translate: 0 0; }
}

.mega-sub-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}
.mega-sub-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, .35);
  padding: 11px 13px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink);
  text-align: left;
  text-decoration: none;
  transition: border-color .15s ease, background .15s ease;
}
.mega-sub-item:hover { border-color: var(--glass-border); background: rgba(255, 255, 255, .65); }
.mega-sub-item.is-active { border-color: var(--accent); background: rgba(77, 90, 143, .1); }
.mega-sub-item.is-active:hover { background: rgba(77, 90, 143, .16); }
.mega-sub-item.is-active .mega-sub-count { color: var(--accent); font-weight: 700; }
.mega-sub-count { font-size: var(--text-2xs); font-weight: 600; color: var(--ink-soft); flex-shrink: 0; }

/* Banner evergreen al fondo del panel */
/* Fijo en la parte inferior del panel (margin-top:auto en la columna flex),
   sin importar cuántas subcategorías tenga la categoría activa. La
   separación mínima con la lista la da el margin-bottom del sub-panel. */
.mega-banner {
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  margin-top: auto;
  border-radius: 18px;
  padding: 18px 20px;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, 0) 55%),
    linear-gradient(135deg, var(--accent) 0%, var(--accent-soft) 100%);
  color: #fff;
}
.mega-banner-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .85);
}
.mega-banner-eyebrow svg { width: 12px; height: 12px; }
.mega-banner h4 {
  margin: 8px 0 4px;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
}
.mega-banner p {
  margin: 0 0 14px;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: rgba(255, 255, 255, .82);
  max-width: 34ch;
}
.mega-banner-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: none;
  border-radius: var(--radius-pill);
  background: #fff;
  color: var(--accent);
  font-size: var(--text-sm);
  font-weight: 700;
  padding: 9px 16px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.mega-banner-cta:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.mega-banner-cta svg { width: 13px; height: 13px; }

/* Footer del mega-menú: siempre visible (no hace scroll con el panel) —
   más buscados + prueba social (rating, envío, pago, volumen). */
.mega-menu-foot {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 20px 14px;
  border-top: 1px solid var(--line);
}

.mega-foot-trending {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.mega-foot-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--ink-soft);
  flex-shrink: 0;
}
.mega-foot-label svg { width: 11px; height: 11px; color: var(--danger); }

.mega-foot-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.mega-foot-tag {
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .4);
  padding: 5px 11px;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  transition: border-color .15s ease, background .15s ease;
}
.mega-foot-tag:hover { border-color: var(--glass-border); background: rgba(255, 255, 255, .7); }

.mega-foot-trust {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.mega-foot-rating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-xs);
  color: var(--ink);
}
.mega-foot-rating svg { width: 13px; height: 13px; color: var(--rating); fill: var(--rating); }
.mega-foot-rating strong { font-weight: 800; }
.mega-foot-rating span { color: var(--ink-soft); }

.mega-foot-perk {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--ink-soft);
}
.mega-foot-perk svg { width: 13px; height: 13px; color: var(--accent); flex-shrink: 0; }

/* Notificaciones */
/* Variante ancha para paneles con más contenido (notificaciones) */
.rail-panel--wide { width: 392px; }

.notif-tabs {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  padding: 0 14px 10px 20px;
  border-bottom: 1px solid var(--line);
}
.notif-tab {
  border: none;
  background: none;
  border-radius: var(--radius-pill);
  padding: 6px 13px;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--ink-soft);
  transition: background .15s ease, color .15s ease;
}
.notif-tab:hover { color: var(--ink); background: rgba(255, 255, 255, .5); }
.notif-tab.is-active { color: #fff; background: var(--accent); }

.notif-group { display: flex; flex-direction: column; margin-top: 4px; }
.notif-group + .notif-group { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.notif-group-label {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px 8px;
  font-size: var(--text-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--ink-soft);
}
.notif-group-label svg { width: 11px; height: 11px; color: var(--danger); }

/* Ofertas relámpago: thumb + badge de descuento + barra de progreso + cuenta
   regresiva en vivo (JS actualiza .flash-deal-timer-text cada segundo). */
.flash-deal {
  display: flex;
  gap: 10px;
  border-radius: 16px;
  padding: 10px;
  margin: 0 2px 8px;
  background: rgba(255, 255, 255, .4);
  border: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  transition: background .15s ease;
}
.flash-deal:hover { background: rgba(255, 255, 255, .65); }
.flash-deal-thumb { width: 50px; height: 50px; border-radius: 12px; background: var(--thumb, var(--glass-tint-1)); object-fit: cover; display: block; flex-shrink: 0; }
.flash-deal-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.flash-deal-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.flash-deal-top strong { font-size: var(--text-sm); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flash-deal-badge {
  flex-shrink: 0;
  font-size: var(--text-2xs);
  font-weight: 800;
  color: #fff;
  background: var(--danger);
  border-radius: var(--radius-pill);
  padding: 2px 8px;
}
.flash-deal-progress { height: 5px; border-radius: 999px; background: rgba(23, 21, 17, .08); overflow: hidden; }
.flash-deal-progress-bar { display: block; height: 100%; width: var(--pct); border-radius: inherit; background: linear-gradient(90deg, var(--accent-soft), var(--accent)); }
.flash-deal-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.flash-deal-claimed { font-size: var(--text-2xs); font-weight: 600; color: var(--ink-soft); }
.flash-deal-timer {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-2xs);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--danger-dark);
}
.flash-deal-timer svg { width: 11px; height: 11px; }

/* Oferta relámpago destacada: la primera oferta real se pinta como tarjeta
   "hero" (gradiente de marca + foto + cuenta regresiva grande en 3
   cápsulas H/MIN/SEG) arriba del resto de .flash-deal compactos. Reutiliza
   el mismo data-countdown/initFlashDeals() de siempre (ver orizon.js). */
.flash-deal-featured {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow: hidden;
  isolation: isolate;
  border-radius: 18px;
  padding: 12px 14px 14px;
  margin: 0 2px 10px;
  color: #fff;
  text-decoration: none;
  background:
    radial-gradient(130% 160% at 88% -15%, rgba(255, 255, 255, .32) 0%, rgba(255, 255, 255, 0) 55%),
    linear-gradient(130deg, var(--danger) 0%, var(--accent) 55%, var(--accent-soft) 100%);
  box-shadow: 0 16px 30px -16px rgba(192, 57, 43, .5), var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease;
}
.flash-deal-featured::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--glass-sheen);
  pointer-events: none;
}
.flash-deal-featured:hover { transform: translateY(-2px); box-shadow: 0 22px 38px -16px rgba(192, 57, 43, .6), var(--shadow-md); }
.flash-deal-featured:active { transform: scale(.98); }

.flash-deal-featured-live {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: fit-content;
  padding: 3px 9px 3px 7px;
  border-radius: var(--radius-pill);
  background: rgba(23, 21, 17, .3);
  font-size: var(--text-3xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.flash-deal-featured-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ee37a;
  animation: flash-deal-live-pulse 1.8s ease-out infinite;
}
@keyframes flash-deal-live-pulse {
  0% { box-shadow: 0 0 0 0 rgba(78, 227, 122, .55); }
  70% { box-shadow: 0 0 0 6px rgba(78, 227, 122, 0); }
  100% { box-shadow: 0 0 0 0 rgba(78, 227, 122, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .flash-deal-featured-dot { animation: none; }
}

.flash-deal-featured-photo {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 70px;
  height: 70px;
  object-fit: contain;
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .35));
  pointer-events: none;
  z-index: 0;
}

.flash-deal-featured-eyebrow {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  font-size: var(--text-2xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: rgba(255, 255, 255, .85);
}
.flash-deal-featured-eyebrow svg { width: 11px; height: 11px; }

.flash-deal-featured-title {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 800;
  max-width: 72%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flash-deal-featured-prices {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: baseline;
  gap: 7px;
  flex-wrap: wrap;
}
.flash-deal-featured-price { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 800; }
.flash-deal-featured-price-old { font-size: var(--text-xs); font-weight: 600; color: rgba(255, 255, 255, .7); text-decoration: line-through; }
.flash-deal-featured-discount {
  font-size: var(--text-2xs);
  font-weight: 800;
  background: #fff;
  color: var(--danger-dark);
  padding: 2px 7px;
  border-radius: var(--radius-pill);
}

.flash-deal-featured-countdown {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 6px;
  padding: 8px 6px;
  border-radius: 14px;
  background: rgba(23, 21, 17, .28);
  border: 1px solid rgba(255, 255, 255, .22);
}
.flash-deal-featured-unit { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 36px; }
.flash-deal-featured-unit span { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
.flash-deal-featured-unit small { font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: rgba(255, 255, 255, .7); }
.flash-deal-featured-sep { position: relative; top: -4px; font-size: var(--text-lg); font-weight: 800; opacity: .6; }

.notif-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  border: none;
  background: none;
  border-radius: 14px;
  padding: 9px 10px;
  text-align: left;
  text-decoration: none;
  color: inherit;
  transition: background .15s ease;
}
.notif-item:hover { background: rgba(255, 255, 255, .5); }
.notif-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 1px;
}
.notif-icon svg { width: 14px; height: 14px; }
.notif-icon--promo { background: rgba(192, 57, 43, .16); color: var(--danger-dark); }
.notif-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.notif-text { font-size: var(--text-sm); font-weight: 600; color: var(--ink); line-height: 1.35; }
.notif-time { font-size: var(--text-2xs); color: var(--ink-soft); }
.notif-item.is-unread .notif-copy { position: relative; }
.notif-item.is-unread .notif-text::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  margin-left: 6px;
  vertical-align: middle;
}

/* Cuenta / perfil */
.profile-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 10px 14px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 8px;
}
.profile-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  flex-shrink: 0;
  background: linear-gradient(145deg, var(--ph-1) 0%, var(--ph-2) 55%, var(--ph-3) 100%);
  border: 2px solid rgba(255, 255, 255, .7);
}
.profile-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.profile-id strong { font-size: var(--text-base); color: var(--ink); }
.profile-id span { font-size: var(--text-xs); color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.profile-menu { display: flex; flex-direction: column; }
.profile-menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  border: none;
  background: none;
  border-radius: 12px;
  padding: 10px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink);
  text-align: left;
  transition: background .15s ease;
}
.profile-menu button:hover { background: rgba(255, 255, 255, .5); }
.profile-menu button svg { width: 15px; height: 15px; color: var(--ink-soft); flex-shrink: 0; }

/* Mensajes: asesoría por WhatsApp (nada de chat simulado en la página —
   cada chip/tarjeta abre una conversación real con texto precargado). */
.advisor-banner {
  border-radius: 16px;
  padding: 14px 16px;
  margin: 2px 2px 14px;
  background: linear-gradient(145deg, rgba(77, 90, 143, .1), rgba(77, 90, 143, .03));
  border: 1px solid rgba(77, 90, 143, .18);
}
.advisor-banner-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--accent);
}
.advisor-banner-eyebrow svg { width: 12px; height: 12px; }
.advisor-banner h4 { margin: 8px 0 4px; font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; color: var(--ink); }
.advisor-banner p { margin: 0; font-size: var(--text-xs); line-height: 1.5; color: var(--ink-soft); }

.advisor-quick { margin: 0 2px 16px; }
.advisor-quick-label { display: block; font-size: var(--text-xs); font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.advisor-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.advisor-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .4);
  padding: 8px 13px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.advisor-chip svg { width: 13px; height: 13px; color: var(--success); }
.advisor-chip:hover { border-color: var(--glass-border); background: rgba(255, 255, 255, .7); transform: translateY(-1px); }

.advisor-list { display: flex; flex-direction: column; gap: 2px; }
.advisor-card {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 14px;
  padding: 9px 10px;
  text-decoration: none;
  color: inherit;
  transition: background .15s ease;
}
.advisor-card:hover { background: rgba(255, 255, 255, .5); }
.advisor-avatar { position: relative; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; }
.advisor-avatar svg { width: 16px; height: 16px; }
.advisor-avatar--support,
.advisor-avatar--a,
.advisor-avatar--b { background: rgba(77, 90, 143, .12); color: var(--accent); }
.advisor-status {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ink-soft);
  border: 2px solid var(--paper);
}
.advisor-status.is-online { background: var(--success); }

.advisor-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.advisor-info strong { font-size: var(--text-sm); color: var(--ink); }
.advisor-specialty { font-size: var(--text-xs); color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.advisor-eta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-2xs);
  font-weight: 700;
  color: var(--success-dark);
}
.advisor-eta svg { width: 11px; height: 11px; }
.advisor-eta--offline { color: var(--ink-soft); font-weight: 600; }

.rail-panel-cta--whatsapp { background: var(--success); }
.rail-panel-cta--whatsapp:hover { background: var(--success-dark); box-shadow: var(--shadow-md); }

/* Encabezado con contador: reutilizado por Me gusta y Carrito */
.rail-panel-head h3 { display: flex; align-items: center; gap: 8px; }
.rail-panel-count {
  font-size: var(--text-2xs);
  font-weight: 800;
  color: #fff;
  background: var(--accent);
  border-radius: 999px;
  padding: 1px 7px;
  line-height: 1.5;
}

/* ---------- Catálogo de productos (listado + búsqueda + filtros) ----------
   Página propia (/page/productos), comparte el nav/rail/overlay con el home
   vía partials/nav.php. */

.stage--catalog {
  /* padding-left despeja el .rail, que ahora es fixed (ver regla .rail) */
  padding: clamp(14px, 1.6vw, 20px) clamp(8px, 1vw, 14px) 60px clamp(84px, 9vw, 110px);
  /* Fondo parejo (no el halo morado/radial de antes) en todo el índice de
     productos, con un tono de la paleta — le da contraste al vidrio claro
     del rail/buscador/tarjetas sin concentrar el color en una sola zona. */
  background: #E3EAFA;
}

/* Esqueleto del banner superior: ESTO ES UN PLACEHOLDER, no diseño final —
   solo reserva el espacio y marca el alto sugerido hasta tener el banner
   real (imagen/contenido de marketing). "Lado a lado" es relativo al
   contenido, no al viewport: respeta el padding de .stage--catalog a los
   dos lados (no se mete debajo del rail a la izquierda, y deja aire antes
   del borde derecho de la pantalla), con esquinas redondas y borde sutil
   como el resto de tarjetas. */
.catalog-banner-placeholder {
  height: clamp(130px, 15vw, 200px);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-card);
  border: 1px solid var(--line);
  overflow: hidden;
  background: var(--ph-3);
}

/* Fila del banner: col-9 con el banner y col-3 con las cifras del catálogo
   (ver productosController) en tiras, a la misma altura del banner. Sin
   max-width/margin:auto a propósito: centrar con un ancho máximo fijo hace
   que el contenido se corra a la derecha cada vez que el padding de
   .stage--catalog cambia (el "sobrante" se reparte mitad y mitad). Así
   queda siempre pegado al mismo punto a la izquierda que .catalog/.catalog-
   grid, a los que no les pusimos tope de ancho por la misma razón.
   --bs-gutter-x:0 quita el padding interno de 12px que trae .row/.col-* de
   Bootstrap por defecto — si no, el contenido (banner, cifras) quedaba
   desfasado 12px hacia adentro respecto a las tarjetas del grid, que no
   tienen ese padding. El espacio entre col-9 y col-3 se agrega a mano. */
.catalog-banner-row { margin-bottom: 28px; --bs-gutter-x: 0; }
.catalog-banner-row .col-9 { padding-right: 12px; }

/* Fila debajo del banner: col-12 con las subcategorías de la categoría activa
   (o las categorías, si se está viendo "todas") como badges navegables —
   reemplaza al antiguo "Recomendados para ti" con datos reales. */
.catalog-intro-row { margin-bottom: 28px; --bs-gutter-x: 0; }
.catalog-related-badges { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }

.catalog-trust-badges-col {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 8px;
}
/* Cada cifra es su propia tira tipo banner: mismo lenguaje visual que
   .catalog-banner-placeholder (esquinas redondas, borde sutil, fondo gris),
   solo que angosta. flex:1 para que las 4 repartan entre ellas todo el alto
   de la columna (igual al banner de al lado) sin dejar espacio suelto. */
.catalog-trust-strip {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  /* Colores de .product-card-add ("Agregar al cotizador") en la forma
     rectangular original: ícono en su círculo ANTES del texto, todo seguido. */
  justify-content: flex-start;
  gap: 10px;
  padding: 6px 14px 6px 6px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-soft) 100%);
  font-size: var(--text-xs);
  font-weight: 700;
  color: #fff;
  box-shadow: 0 8px 16px -8px rgba(77, 90, 143, .6);
}
.catalog-trust-strip-label { min-width: 0; text-align: left; }
.catalog-trust-strip-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .22);
}
.catalog-trust-strip svg { width: 14px; height: 14px; color: #fff; flex-shrink: 0; }
/* Marca de agua del isotipo (misma del banner) casi al final de cada tira,
   girada y cortada por el borde; detrás del texto, sin captar clics. */
.catalog-trust-strip { position: relative; overflow: hidden; }
.catalog-trust-strip > * { position: relative; z-index: 1; }
.catalog-trust-strip::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 50%;
  right: 6%;
  width: 62px;
  height: 62px;
  background: url("/images/svg/bani-isotipo-blanco.svg") center / contain no-repeat;
  opacity: .1;
  transform: translateY(-50%) rotate(-12deg);
  pointer-events: none;
}
/* Cada tira con su propio giro y posición para que no se lean como sello repetido. */
.catalog-trust-strip:nth-child(1)::after { right: 5%;  transform: translateY(-58%) rotate(-18deg); }
.catalog-trust-strip:nth-child(2)::after { right: 11%; width: 54px; height: 54px; transform: translateY(-38%) rotate(24deg); }
.catalog-trust-strip:nth-child(3)::after { right: 3%;  width: 68px; height: 68px; transform: translateY(-50%) rotate(-42deg); }
.catalog-trust-strip:nth-child(4)::after { right: 9%;  transform: translateY(-62%) rotate(58deg); }
/* Banner real del catálogo (1920×640, 3:1) en un contenedor mucho más
   alargado (~6.6:1): se ajusta a lo ALTO y se ancla a la derecha (donde están
   los productos); el lado izquierdo se rellena con el mismo azul del borde de
   la imagen (#2f3e79), sin costura. En pantallas angostas recorta por la
   izquierda (fondo liso) y los productos siguen visibles. */
.catalog-banner--img {
  background-color: #2f3e79;
  background-image: url("/images/banners/banner-catalogo.jpg");
  background-image: image-set(url("/images/banners/banner-catalogo.webp") type("image/webp"), url("/images/banners/banner-catalogo.jpg") type("image/jpeg"));
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: right center;
  justify-content: flex-start;
}

/* Banner propio de categoría (images/banners/categoria-{id}.*): llena el
   contenedor recortando al centro. Medida sugerida 2650×400, contenido
   importante en el centro. */
.catalog-banner--categoria {
  background-color: var(--ph-3);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
/* Fondo genérico de categoría con el nombre encima (texto a la izquierda). */
.catalog-banner--con-texto { justify-content: center; background-color: #46558a; background-position: center; }
/* Texto centrado sobre el brillo del fondo: logo y título en blanco, acento
   en índigo claro (#aeb8e6, mismo del hero) y sombra suave para el contraste. */
.catalog-banner--con-texto .catalog-banner-copy {
  align-items: center;
  text-align: center;
  max-width: 90%;
}
.catalog-banner--con-texto .catalog-banner-logo { filter: drop-shadow(0 1px 6px rgba(20, 28, 70, .45)); }
.catalog-banner--con-texto .catalog-banner-title,
.catalog-banner--con-texto .catalog-banner-sub { text-shadow: 0 1px 14px rgba(20, 28, 70, .55), 0 0 2px rgba(20, 28, 70, .3); }
.catalog-banner--con-texto .catalog-banner-sub { color: #fff; }
.catalog-banner--con-texto .catalog-banner-sub strong { color: #fff; font-weight: 800; }
/* Capas decorativas del banner de categoría: marca de agua del isotipo,
   anillo fino alrededor del brillo y miniaturas reales flotando a los lados. */
.catalog-banner--con-texto { position: relative; }
.catalog-banner--con-texto .catalog-banner-copy { position: relative; z-index: 2; }
.catalog-banner-watermark {
  position: absolute;
  z-index: 0;
  width: auto;
  opacity: .07;
  pointer-events: none;
}
.catalog-banner-watermark--a { height: 170%; left: -4%; bottom: -55%; transform: rotate(-12deg); }
.catalog-banner-watermark--b { height: 120%; right: -2%; top: -45%; transform: rotate(14deg); }
.catalog-banner-ring {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  width: min(62%, 720px);
  aspect-ratio: 3.4 / 1;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.catalog-banner-ring::after {
  content: "";
  position: absolute;
  inset: -16px -40px;
  border: 1px dashed rgba(255, 255, 255, .12);
  border-radius: 50%;
}
.catalog-banner-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 4px;
}
.catalog-banner-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .14);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: 700;
  text-shadow: none;
}
.catalog-banner-chip svg { width: 13px; height: 13px; color: #aeb8e6; }

@media (max-width: 1199.98px) {
  .catalog-banner-chips { display: none; }
}

/* Subcategoría como pastilla en el índigo de marca (lee bien sobre el brillo). */
.catalog-banner-sub-accent {
  display: inline-block;
  padding: 2px 10px;
  margin-right: 2px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  text-shadow: none;
  box-shadow: 0 4px 12px -6px rgba(20, 28, 70, .6);
}

/* Texto de campaña sobre el banner: mismo lenguaje que el hero del index
   (Manrope 800 a dos tonos + logo blanco), en el espacio azul de la izquierda. */
.catalog-banner-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(4px, .6vw, 8px);
  padding: 0 clamp(20px, 3vw, 44px);
  max-width: 62%;
  color: #fff;
}
.catalog-banner-logo { display: block; width: auto; height: clamp(16px, 1.5vw, 24px); margin-bottom: 2px; }
.catalog-banner-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(20px, 2.3vw, 38px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #fff;
}
.catalog-banner-title-accent { color: #aeb8e6; }
.catalog-banner-sub {
  margin: 0;
  font-size: var(--text-md);
  line-height: 1.4;
  color: rgba(255, 255, 255, .85);
}
.catalog-banner-sub strong { color: #fff; font-weight: 800; }
@media (max-width: 991.98px) {
  .catalog-banner-sub { display: none; }
}
@media (max-width: 767.98px) {
  /* En angosto la imagen ocupa casi todo el ancho: velo azul detrás del texto
     que se desvanece hacia los productos. */
  .catalog-banner--ofertas { position: relative; }
  .catalog-banner--ofertas::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #2f3e79 0%, rgba(47, 62, 121, .92) 45%, rgba(47, 62, 121, 0) 78%);
  }
  .catalog-banner-copy { position: relative; z-index: 1; max-width: 70%; }
}

.catalog-banner-placeholder-label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--paper);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--ink-soft);
}
.catalog-banner-placeholder-label svg { width: 15px; height: 15px; }

/* Sin max-width/margin:auto: ver nota en .catalog-banner-row — centrar con
   tope fijo corre el contenido hacia la derecha al tocar el padding de
   .stage--catalog. Usa todo el ancho disponible, pegado a la izquierda. */
.catalog { width: 100%; }

.catalog-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 28px;
}
.catalog-title { margin: 0 0 4px; font-family: var(--font-display); font-size: clamp(22px, 3vw, 32px); font-weight: 800; color: var(--ink); }
.catalog-count { margin: 0; font-size: var(--text-sm); color: var(--ink-soft); font-weight: 600; }

.catalog-search {
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(360px, 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--glass-tint-1);
  padding: 8px 8px 8px 16px;
}
.catalog-search svg { width: 16px; height: 16px; color: var(--ink-soft); flex-shrink: 0; }
.catalog-search-input { flex: 1; min-width: 0; border: none; background: none; outline: none; font: inherit; font-size: var(--text-base); color: var(--ink); }
.catalog-search-btn {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  flex-shrink: 0;
}
.catalog-search-btn svg { width: 15px; height: 15px; }
.catalog-search-btn:hover { background: var(--accent-soft); }

/* Fila de productos: col-9 el grid/lista, col-3 los filtros (categorías y
   subcategorías) — mismo patrón --bs-gutter-x:0 + padding manual que
   .catalog-banner-row, para que quede alineado con el resto de la página. */
.catalog-products-row { --bs-gutter-x: 0; }
.catalog-products-row .col-9 { padding-right: 24px; }

.catalog-results-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.catalog-results-count { font-size: var(--text-sm); font-weight: 600; color: var(--ink-soft); }
/* Botón "Filtros", su X y el fondo oscuro de la hoja: solo existen en
   celular (ver media query ≤760px); en escritorio los filtros están fijos
   en la columna derecha. */
.catalog-filters-open,
.catalog-filters-close,
.catalog-filters-scrim { display: none; }

.catalog-view-toggle {
  display: flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--glass-tint-1);
  flex-shrink: 0;
}
.catalog-view-btn {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--ink-soft);
}
.catalog-view-btn svg { width: 15px; height: 15px; }
.catalog-view-btn:hover { color: var(--ink); }
.catalog-view-btn.is-active { background: var(--accent); color: #fff; }

/* Panel de filtros: ya no una sola cápsula con secciones adentro — cada
   filtro (Ordenar por / Precio / Color) es su propia cápsula de vidrio
   separada (mismo lenguaje que .rail-group/.mega-menu: sheen + tint + blur
   + borde suave + sombra). El encabezado y los chips activos quedan sueltos
   arriba, sin caja, a modo de título de la columna. */
.catalog-filters-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: sticky;
  top: 24px;
}

.catalog-filters-head { display: flex; align-items: center; justify-content: space-between; }
.catalog-filters-head-label { display: flex; align-items: center; gap: 8px; font-size: var(--text-md); font-weight: 800; color: var(--ink); }
.catalog-filters-head-label svg { width: 17px; height: 17px; color: var(--accent); }
.catalog-filters-head-count {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: #fff;
  font-size: var(--text-3xs);
  font-weight: 800;
}
.catalog-filters-clear {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-2xs);
  font-weight: 700;
  color: var(--ink-soft);
  text-decoration: none;
}
.catalog-filters-clear svg { width: 11px; height: 11px; }
.catalog-filters-clear:hover { color: var(--danger-dark); }

.catalog-active-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.catalog-active-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 5px 8px 5px 10px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: #fff;
  font-size: var(--text-2xs);
  font-weight: 700;
  text-decoration: none;
  overflow: hidden;
}
.catalog-active-chip svg { width: 11px; height: 11px; flex-shrink: 0; }
.catalog-active-chip:hover { background: var(--accent-soft); }

/* Cada grupo (Ordenar por / Precio / Color) es su propia cápsula de vidrio
   — mismo molde que tenía el panel entero antes de separarlos. */
.catalog-filter-group {
  padding: 16px;
  border-radius: var(--radius-card);
  border: 1px solid var(--glass-border-soft);
  background: var(--glass-sheen), var(--glass-tint-1);
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  box-shadow: var(--shadow-sm);
}
.catalog-filter-group h3 {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 10px;
  font-size: var(--text-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.catalog-filter-group h3 svg { width: 14px; height: 14px; color: var(--accent); flex-shrink: 0; }

/* Orden: chips (mismo molde que .search-chip del buscador, con estado
   activo propio), en vez de una lista de texto suelta. */
.catalog-sort-chips { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.catalog-sort-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .5);
  color: var(--ink-soft);
  font-size: var(--text-2xs);
  font-weight: 700;
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}
.catalog-sort-chip svg { width: 12px; height: 12px; color: var(--accent); flex-shrink: 0; transition: color .15s ease; }
.catalog-sort-chip:hover { border-color: var(--glass-border); background: rgba(255, 255, 255, .8); transform: translateY(-1px); }
/* 5 opciones en grilla de 2: la última queda sola — que ocupe las dos
   columnas en vez de dejar un hueco al lado. */
.catalog-sort-chip:last-child:nth-child(odd) { grid-column: 1 / -1; }
.catalog-sort-chip.is-active { background: var(--accent); border-color: transparent; color: #fff; }
.catalog-sort-chip.is-active svg { color: #fff; }

/* Precio: slider de doble manija (mín/máx) en vez de dos campos de texto —
   dos <input type="range"> superpuestos en el mismo track (truco estándar:
   cada uno es transparente de punta a punta y solo su "bolita" tiene
   pointer-events, así cada manija se arrastra por separado sin que una le
   tape el área de click a la otra). El fondo entre las dos manijas
   (.catalog-price-range-fill) es un div aparte que JS reposiciona en cada
   input (ver initCatalogPriceRange en orizon.js). Aplica al soltar la
   manija (evento "change"), no en cada pixel arrastrado. */
.catalog-price-range-values {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 14px;
}
.catalog-price-range-dash { width: 10px; height: 1px; background: var(--ink-soft); opacity: .5; }
.catalog-price-range-track {
  position: relative;
  height: 28px;
  margin: 0 2px;
}
.catalog-price-range-fill {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 4px;
  transform: translateY(-50%);
  border-radius: var(--radius-pill);
  background: var(--accent);
}
.catalog-price-range-track::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 4px;
  transform: translateY(-50%);
  border-radius: var(--radius-pill);
  background: var(--line);
}
.catalog-price-range-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  background: none;
  -webkit-appearance: none;
  appearance: none;
  pointer-events: none;
}
.catalog-price-range-input::-webkit-slider-runnable-track { background: none; }
.catalog-price-range-input::-moz-range-track { background: none; }
.catalog-price-range-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  pointer-events: auto;
  width: 18px;
  height: 18px;
  margin-top: 5px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--accent);
  box-shadow: var(--shadow-sm);
  cursor: grab;
  transition: transform .15s ease;
}
.catalog-price-range-input::-webkit-slider-thumb:hover { transform: scale(1.12); }
.catalog-price-range-input::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.05); }
.catalog-price-range-input::-moz-range-thumb {
  pointer-events: auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--accent);
  box-shadow: var(--shadow-sm);
  cursor: grab;
}
.catalog-price-range-input[data-price-thumb="max"] { z-index: 2; }
.catalog-price-range-bounds { display: flex; justify-content: space-between; margin-top: 6px; font-size: var(--text-3xs); font-weight: 600; color: var(--ink-soft); }

/* Color: grilla de swatches reales (nombre + hex de verdad, ver
   getColoresDisponibles()), no decorativos. */
.catalog-color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); gap: 4px; }
.catalog-color-swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 2px;
  border-radius: 10px;
  text-decoration: none;
  transition: background .15s ease;
}
.catalog-color-swatch:hover { background: rgba(255, 255, 255, .6); }
.catalog-color-swatch:hover .catalog-color-dot { transform: scale(1.08); }
.catalog-color-swatch.is-active { background: rgba(255, 255, 255, .7); box-shadow: inset 0 0 0 1.5px var(--accent); }
.catalog-color-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--line);
  box-shadow: inset 0 0 0 2px var(--paper), var(--shadow-sm);
  transition: transform .15s ease;
}
.catalog-color-swatch.is-active .catalog-color-dot { box-shadow: inset 0 0 0 2px var(--paper), 0 0 0 2px var(--accent); }
.catalog-color-label { font-size: var(--text-3xs); font-weight: 600; color: var(--ink-soft); text-align: center; line-height: 1.2; }
.catalog-color-swatch.is-active .catalog-color-label { color: var(--ink); font-weight: 700; }

.catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 18px;
}

/* ---------- Tarjeta de producto del catálogo (.product-card) ----------
   El precio vive en el cuerpo sobre fondo sólido (no superpuesto a la
   foto — con fotos claras el texto blanco se perdía), y "Agregar al
   carrito" es un botón de verdad, siempre visible, no un ícono que solo
   aparece en hover. */
.product-card {
  display: flex;
  flex-direction: column;
  border-radius: 22px;
  overflow: hidden;
  /* Vidrio real (sheen + tint + blur), como .rail-group/.mega-menu/las
     cápsulas de filtros — antes era blanco plano, la única pieza de toda
     la página que no hablaba el mismo idioma "liquid glass". Sombra con
     tinte de marca (no gris neutro) para que tenga presencia propia sobre
     el fondo celeste de la página. */
  background: var(--glass-sheen), var(--glass-tint-2);
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  border: 1px solid var(--glass-border-soft);
  box-shadow: 0 14px 28px -18px rgba(77, 90, 143, .45), var(--shadow-sm);
  transition: transform .22s cubic-bezier(.16, .8, .3, 1), box-shadow .22s ease, border-color .22s ease;
}
.product-card:hover {
  transform: translateY(-5px);
  border-color: var(--accent-soft);
  box-shadow: 0 24px 48px -18px rgba(77, 90, 143, .55), var(--shadow-md);
}

/* La foto queda enmarcada (como una tarjeta anidada) en vez de a sangre
   contra el borde — le da profundidad real a la cápsula de vidrio. */
.product-card-media {
  position: relative;
  margin: 10px 10px 0;
  aspect-ratio: 1;
  border-radius: 15px;
  background: var(--ph-3);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.product-card-media a { display: block; width: 100%; height: 100%; }
.product-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s cubic-bezier(.23, 1, .32, 1); }
@media (hover: hover) and (pointer: fine) {
  .product-card:hover .product-card-media img { transform: scale(1.06); }
}
/* Distintivo "Nueva" de las categorías recién lanzadas (Categoria::
   CATEGORIAS_NUEVAS). Píldora pequeña en el índigo de marca; va en el
   menú Explorar, el buscador y la tira de categorías del catálogo. */
.cat-new-badge { display: inline-flex; align-items: center; flex-shrink: 0; height: 16px; margin-left: 4px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--accent); color: #fff; font-size: 9px; font-weight: 800; letter-spacing: .06em; line-height: 1; text-transform: uppercase; vertical-align: middle; box-shadow: 0 0 0 2px rgba(174, 184, 230, .45); }
.mega-foot-tag .cat-new-badge:first-child { margin-left: 0; margin-right: 2px; }
/* Mismo aviso dentro del banner de la categoría: chip blanco sólido para
   que resalte sobre los chips de vidrio. */
.catalog-banner-chip--new { background: #fff; border-color: #fff; color: var(--accent); font-weight: 800; }
.catalog-banner-chip--new svg { color: var(--accent); }

/* Producto sin fotos (Papelería de Bani se carga sin imagen): ícono suave
   centrado sobre el mismo fondo, en tarjetas y en la galería del detalle. */
.product-media-empty { display: grid; place-items: center; width: 100%; height: 100%; min-height: 160px; color: var(--accent-soft); background: var(--ph-3); }
.product-media-empty svg { width: 32%; max-width: 72px; height: auto; stroke-width: 1.3; opacity: .55; }

.product-card-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  font-size: var(--text-3xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .03em;
  border-radius: 999px;
  padding: 4px 9px;
}
.product-card-badge--sale { color: #fff; background: linear-gradient(135deg, var(--danger), var(--danger-dark)); box-shadow: var(--shadow-sm); }
.product-card-badge--new { color: #fff; background: rgba(23, 21, 17, .5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

.product-card-body { display: flex; flex-direction: column; gap: 8px; padding: 14px; flex: 1; }
.product-card-name {
  margin: 0;
  min-height: 34px;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.product-card-name a { color: inherit; text-decoration: none; }
.product-card-name a:hover { color: var(--accent); }

.product-card-meta-row { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.product-card-meta { display: flex; align-items: center; gap: 4px; font-size: var(--text-3xs); font-weight: 600; color: var(--ink-soft); }
.product-card-meta svg { width: 11px; height: 11px; color: var(--accent); flex-shrink: 0; }
.product-card-meta--urgent,
.product-card-meta--urgent svg { color: var(--danger-dark); }

/* Precio: sobre fondo sólido (--paper), no sobre la foto — la razón del
   rediseño. Grande y con buen peso, es lo primero que debe leerse después
   del nombre. */
.product-card-price-block { display: flex; flex-direction: column; gap: 4px; margin-top: 2px; }
.product-card-price-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.product-card-price { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 800; color: var(--ink); }
.product-card-price-old { font-size: var(--text-xs); font-weight: 600; color: var(--ink-soft); text-decoration: line-through; }
.product-card-savings {
  align-self: flex-start;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: rgba(24, 165, 88, .12);
  color: var(--success-dark);
  font-size: var(--text-3xs);
  font-weight: 800;
}
/* TEMPORAL (MOSTRAR_PRECIO_COSTO): costo del proveedor, en el índigo de marca
   para distinguirlo del precio de venta y del ahorro. */
.product-card-cost {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: rgba(77, 90, 143, .12);
  color: var(--accent);
  font-size: var(--text-3xs);
  font-weight: 800;
}
.product-card-cost svg { width: 11px; height: 11px; }

/* Siempre visible (no aparece solo en hover): en una tienda, "agregar al
   carrito" es la acción principal de la tarjeta, no algo que esconder. Al
   fondo del cuerpo (margin-top: auto) para que quede alineado entre
   tarjetas aunque el nombre ocupe una o dos líneas. */
.product-card-add {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  border: none;
  border-radius: var(--radius-pill);
  padding: 4px 4px 4px 16px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-soft) 100%);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: 700;
  box-shadow: 0 8px 16px -8px rgba(77, 90, 143, .6);
  transition: background-position .25s ease, box-shadow .15s ease, transform .1s ease;
  background-size: 160% 160%;
  background-position: 0% 0%;
}
.product-card-add-label { flex: 1; text-align: left; }
/* Ícono en su propio círculo al final del botón, no inline con el texto. */
.product-card-add-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .22);
}
.product-card-add-icon svg { width: 14px; height: 14px; }
.product-card-add:hover { background-position: 100% 100%; box-shadow: 0 10px 20px -8px rgba(77, 90, 143, .75); }
.product-card-add:active { transform: scale(.97); }
.product-card-add.is-added { background: var(--success-dark); }

/* Vista vertical (lista): una columna, cada tarjeta en fila (miniatura a la
   izquierda, info a la derecha). Alternado por .catalog-view-toggle (ver
   orizon.js). */
.catalog-grid.is-list-view { grid-template-columns: 1fr; gap: 10px; }
.catalog-grid.is-list-view .product-card { flex-direction: row; align-items: stretch; }
.catalog-grid.is-list-view .product-card-media { width: 130px; flex-shrink: 0; aspect-ratio: 1; margin: 10px; }
.catalog-grid.is-list-view .product-card-body { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 16px; }
.catalog-grid.is-list-view .product-card-name { flex: 1 1 200px; min-height: auto; -webkit-line-clamp: 1; }
.catalog-grid.is-list-view .product-card-meta-row { flex: 0 0 auto; flex-direction: column; align-items: flex-start; gap: 4px; }
.catalog-grid.is-list-view .product-card-price-block { flex: 0 0 auto; margin-top: 0; }
.catalog-grid.is-list-view .product-card-add { width: auto; flex: 0 0 auto; margin-top: 0; padding: 4px 4px 4px 18px; }

.catalog-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 80px 20px;
  text-align: center;
  color: var(--ink-soft);
}
.catalog-empty svg { width: 32px; height: 32px; }
.catalog-empty-reset { color: var(--accent); font-weight: 700; text-decoration: none; }
.catalog-empty-reset:hover { text-decoration: underline; }

.catalog-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 36px;
}
.catalog-page-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  transition: border-color .15s ease, background .15s ease;
}
.catalog-page-btn svg { width: 14px; height: 14px; }
.catalog-page-btn:hover { background: rgba(255, 255, 255, .6); border-color: var(--glass-border); }
.catalog-page-btn.is-disabled { opacity: .4; pointer-events: none; }
.catalog-page-info { font-size: var(--text-sm); font-weight: 600; color: var(--ink-soft); }

@media (max-width: 860px) {
  .catalog-products-row { flex-direction: column; }
  .catalog-products-row .col-9,
  .catalog-products-row .col-3 { width: 100%; padding-right: 0; }
  .catalog-filters-card { position: static; }

  .pd-main-row { flex-direction: column; }
  .pd-main-row .col-6,
  .pd-main-row .col-4,
  .pd-main-row .col-2 { width: 100%; padding-right: 0; }
  .pd-buybox-wrap { position: relative; margin-top: 20px; }
  .pd-ad-rail { position: static; flex-direction: row; flex-wrap: wrap; margin-top: 20px; }
  .pd-ad-skeleton { flex: 1 1 160px; aspect-ratio: 4 / 3; }
  .pd-ad { flex: 1 1 100%; max-width: 420px; margin-inline: auto; }

  /* Miniaturas vuelven a tira horizontal debajo de la foto: en columna
     angosta, al lado se comen demasiado ancho de la imagen principal. */
  .pd-gallery { flex-direction: column; }
  .pd-gallery-thumbs-rail { flex-direction: row; flex: 0 0 auto; width: 100%; order: 2; margin-top: 10px; }
  .pd-thumbs-arrow { display: none; }
  .pd-gallery-thumbs { flex-direction: row; width: 100%; max-height: none; overflow-x: auto; overflow-y: hidden; padding-bottom: 2px; }
  .pd-gallery-stage { order: 1; }

  .pd-reviews { padding: 28px 20px; border-radius: 20px; }
  .pd-reviews::before { display: none; }
  .pd-reviews-top { flex-direction: column; align-items: flex-start; }
  .pd-reviews-panel { grid-template-columns: 1fr; }
  .pd-reviews-cards { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  /* En este ancho .rail vuelve a position:static (ver media query de .rail
     más abajo), así que ya no hace falta el padding-left que lo despejaba. */
  .stage--catalog { padding-left: clamp(20px, 3vw, 40px); }
}

/* Cotizador de productos: selecci?n de cantidades y productos. */
.cart-list { display: flex; flex-direction: column; gap: 4px; padding: 4px 4px 0; }
.cart-item {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 14px;
  padding: 8px;
  transition: background .15s ease, opacity .2s ease;
}
.cart-thumb { width: 46px; height: 46px; border-radius: 10px; background: var(--thumb, var(--glass-tint-1)); object-fit: cover; display: block; flex-shrink: 0; }
.cart-copy { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 0; }
.cart-copy strong { font-size: var(--text-sm); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cart-variant { font-size: var(--text-2xs); color: var(--ink-soft); }

.cart-qty {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  width: fit-content;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 2px;
}
.cart-qty-btn {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--ink);
  transition: background .15s ease;
}
.cart-qty-btn:hover { background: rgba(255, 255, 255, .7); }
.cart-qty-btn svg { width: 10px; height: 10px; }
.cart-qty-value { min-width: 18px; text-align: center; font-size: var(--text-xs); font-weight: 700; color: var(--ink); }

.cart-item-end { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex-shrink: 0; }
.cart-remove {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--ink-soft);
  transition: color .15s ease, background .15s ease;
}
.cart-remove svg { width: 12px; height: 12px; }
.cart-remove:hover { color: var(--danger-dark); background: rgba(138, 42, 32, .08); }

.cart-empty {
  display: none;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 30px 10px;
  color: var(--ink-soft);
}
.cart-empty.is-visible { display: flex; }
.cart-empty svg { width: 30px; height: 30px; opacity: .5; }
.cart-empty p { margin: 0; font-size: var(--text-sm); }

/* ---------- Cotizador de productos promocionales ---------- */
.quote-stage { min-height: 100vh; }
.cart-page { width: 100%; margin: 0; padding: 0 0 72px; color: var(--ink); }
.quote-header-wrap, .quote-layout, .quote-empty { animation: quote-enter .48s cubic-bezier(.2,.8,.2,1) both; }
@keyframes quote-enter { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }
.cart-page-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 28px;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color .18s ease, transform .18s ease;
}
.cart-page-back svg { width: 15px; height: 15px; }
.cart-page-back:hover { color: var(--ink); transform: translateX(-3px); }

.quote-header-wrap { position: relative; isolation: isolate; margin: 0 0 34px; --quote-badge-size: clamp(76px, 8.5vw, 100px); }
.quote-header {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 28px;
  min-height: 260px;
  margin: 0;
  padding: 88px clamp(28px, 4vw, 54px) 54px;
  overflow: hidden;
  border: 1px solid rgba(77,90,143,.12);
  border-radius: 28px;
  background: linear-gradient(135deg, #EEF1FC 0%, #E3EAFA 55%, #DCE4F8 100%);
  /* Hueco sobre .quote-header-back (205.25x44px real) con 4px de aire a
     la derecha y abajo. Dos esquinas con la misma curva suave hacia
     afuera, espejada según su sentido: en 0,48 sale del muro horizontal
     (shelf) y se abre hacia abajo por el borde real izquierdo hasta
     0,88; en 209.25,0 sale del muro vertical y se abre hacia la derecha
     por el borde real superior hasta 249.25,0. Tangente en los dos
     extremos de cada una (sin quiebre). evenodd + rectángulo de
     seguridad: mismo truco de siempre para no redefinir el resto de las
     esquinas (las sigue dando border-radius). */
  clip-path: path(evenodd, "M-9999,-9999 L99999,-9999 L99999,99999 L-9999,99999 Z M0,0 L0,88 C0,53 5,48 30,48 L191.25,48 Q209.25,48 209.25,30 C209.25,5 214.25,0 249.25,0 Z");
}
/* Muesca orgánica de .card--info en el home (#card-wave-clip), espejada
   para la esquina inferior derecha. mask-composite de dos capas resultó
   poco fiable en Chrome (o tapaba el agujero, o se comía el texto del
   header entero), así que en vez de recortar .quote-header usamos un
   elemento aparte del tamaño exacto de la muesca, pintado del color de
   fondo de la página, y a ESE le aplicamos clip-path (sin composite,
   mucho más fiable). clipPathUnits objectBoundingBox es seguro aquí
   porque este elemento siempre mantiene el aspecto 162:154 (ambos lados
   atados a --quote-badge-size), a diferencia de .quote-header que es un
   banner ancho y se deformaría con fracciones. */
.quote-header-notch-cover {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  width: calc(var(--quote-badge-size) * 1.62);
  height: calc(var(--quote-badge-size) * 1.54);
  /* Contraste deliberado con el color real de fondo de la página: la
     curva orgánica (no un rectángulo) ya evita que se lea como parche,
     así que el color puede (y debe) notarse — si se iguala al pixel
     con el degradado, la muesca deja de verse por completo. */
  background: #E3EAFA;
  clip-path: url(#quote-notch-clip);
  pointer-events: none;
}
.quote-header-back { position: absolute; z-index: 3; top: 0; left: 0; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 0; padding: 0 18px 0 14px; border: 1px solid rgba(255,255,255,.86); border-radius: var(--radius-pill); background: #fff; color: var(--accent); box-shadow: var(--shadow-sm); font-size: var(--text-xs); font-weight: 800; text-decoration: none; transition: color .18s ease, transform .18s ease, box-shadow .18s ease; }
.quote-header-back:hover { color: var(--ink); transform: none; box-shadow: var(--shadow-md); }
.quote-header-back svg { width: 16px; height: 16px; }
.quote-header-wrap .quote-header-brand-badge { position: absolute; z-index: 3; right: 0; bottom: 0; margin: 0; transform: none; width: var(--quote-badge-size); height: var(--quote-badge-size); animation: none; }
.quote-header-copy { max-width: 700px; }
.quote-header h1 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: clamp(30px, 4.2vw, 48px);
  font-weight: 800;
  color: var(--ink);
  line-height: 1.08;
  letter-spacing: -.035em;
}
.quote-header-copy p { max-width: 62ch; margin: 0; color: var(--ink-soft); font-size: var(--text-base); line-height: 1.65; }

/* Cabecera del carrito con la misma imagen del banner de catálogo (carrito
   con regalos a la derecha, índigo liso a la izquierda): el texto va sobre
   la zona lisa, en blanco con sombra suave. */
.quote-header--img {
  border-color: transparent;
  background-color: #34427c;
  background-image: url("/images/banners/banner-catalogo.jpg");
  background-image: image-set(url("/images/banners/banner-catalogo.webp") type("image/webp"), url("/images/banners/banner-catalogo.jpg") type("image/jpeg"));
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right center;
}
.quote-header--img .quote-header-copy { position: relative; z-index: 1; max-width: 560px; }
.quote-header--img h1 { color: #fff; text-shadow: 0 2px 18px rgba(20, 28, 70, .45); }
.quote-header--img .quote-header-copy p { color: rgba(255, 255, 255, .9); text-shadow: 0 1px 10px rgba(20, 28, 70, .5); }
@media (max-width: 980px) {
  /* Angosto: la imagen queda detrás del texto; un velo índigo lo mantiene legible. */
  .quote-header--img::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(52, 66, 124, .92) 0%, rgba(52, 66, 124, .7) 60%, rgba(52, 66, 124, .25) 100%);
    pointer-events: none;
  }
}

.quote-layout { display: grid; grid-template-columns: minmax(0, 1.62fr) minmax(290px, .78fr); align-items: start; gap: 22px; }
.quote-list-panel { min-width: 0; padding: 24px 28px 18px; border: 1px solid rgba(255,255,255,.82); border-radius: 24px; background: rgba(255,255,255,.78); box-shadow: var(--shadow-sm); }
.quote-list-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.quote-list-head h2 { margin: 0 0 5px; font-family: var(--font-display); font-size: var(--text-xl); font-weight: 800; letter-spacing: -.02em; }
.quote-list-head p { margin: 0; color: var(--ink-soft); font-size: var(--text-xs); line-height: 1.5; }
.quote-continue-link { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; color: var(--accent); font-size: var(--text-xs); font-weight: 800; text-decoration: none; }
.quote-continue-link svg { width: 14px; height: 14px; }
.quote-continue-link:hover { color: var(--ink); }
.quote-product-list { display: flex; flex-direction: column; gap: 0; padding: 0; }
.quote-product { display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: center; gap: 18px; padding: 22px 0; border-bottom: 1px solid var(--line); border-radius: 0; }
.quote-product-image { display: grid; place-items: center; width: 104px; height: 104px; overflow: hidden; border: 1px solid rgba(23,21,17,.06); border-radius: 18px; background: #fff; text-decoration: none; }
.quote-product-image img { transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.quote-product-image:hover img { transform: scale(1.05); }
.quote-product-image .cart-thumb { width: 100%; height: 100%; border-radius: 0; object-fit: contain; }
.quote-product-placeholder { color: var(--accent-soft); }
.quote-product-placeholder svg { width: 25px; height: 25px; opacity: .7; }
.quote-product-content { display: flex; flex-direction: column; gap: 15px; min-width: 0; }
.quote-product-main { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; min-width: 0; }
.quote-product-sku { display: inline-flex; align-items: center; gap: 5px; color: var(--accent); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.quote-product-sku svg { width: 12px; height: 12px; }
.quote-product-name { max-width: 100%; overflow: hidden; color: var(--ink); font-family: var(--font-display); font-size: clamp(15px, 1.45vw, 18px); font-weight: 800; line-height: 1.25; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.quote-product-name:hover { color: var(--accent); }
.quote-product-availability { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-soft); font-size: var(--text-2xs); font-weight: 600; }
.quote-product-availability svg { width: 13px; height: 13px; color: var(--accent-soft); }
.quote-product-controls { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.quote-product-brand-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 30px; padding: 0 12px; border: 1px solid rgba(77,90,143,.18); border-radius: var(--radius-pill); background: rgba(77,90,143,.06); color: var(--accent); font-size: var(--text-2xs); font-weight: 700; transition: background .15s ease, border-color .15s ease, color .15s ease; }
.quote-product-brand-btn svg { width: 13px; height: 13px; }
.quote-product-brand-btn:hover { background: rgba(77,90,143,.14); border-color: rgba(77,90,143,.32); }
.quote-product-brand-btn.is-configured { background: var(--accent); border-color: var(--accent); color: #fff; }
.quote-product-brand-btn.is-configured:hover { background: var(--accent-soft); border-color: var(--accent-soft); }
.quote-quantity-wrap { display: flex; align-items: center; gap: 11px; }
.quote-quantity-label { color: var(--ink-soft); font-size: var(--text-2xs); font-weight: 700; }
.quote-product .cart-qty { border-color: rgba(77,90,143,.18); background: #f5f6fb; }
.quote-product .cart-qty-btn { width: 25px; height: 25px; color: var(--accent); }
.quote-product .cart-qty-btn:hover { background: #e7eafa; }
.quote-product .cart-qty-value { min-width: 27px; font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.quote-product .cart-item-end { display: contents; }
.quote-product .cart-remove { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: auto; height: 30px; padding: 0 10px; border-radius: var(--radius-pill); color: var(--ink-soft); font-size: var(--text-2xs); font-weight: 700; }
.quote-product .cart-remove svg { width: 13px; height: 13px; }
.quote-product .cart-remove:hover { color: var(--danger-dark); background: rgba(138,42,32,.08); }
.quote-list-note { display: flex; align-items: flex-start; gap: 8px; padding-top: 17px; color: var(--ink-soft); font-size: var(--text-2xs); line-height: 1.55; }
.quote-list-note svg { width: 14px; height: 14px; flex: 0 0 auto; margin-top: 1px; color: var(--accent-soft); }

.quote-summary { position: sticky; top: 22px; overflow: hidden; padding: 27px 25px 22px; border: 1px solid rgba(255,255,255,.12); border-radius: 24px; background: #252d50; color: #fff; box-shadow: var(--shadow-md); }
.quote-summary-topline { display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,.72); font-size: var(--text-xs); font-weight: 700; }
.quote-summary-icon { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid rgba(255,255,255,.18); border-radius: 12px; background: rgba(255,255,255,.1); color: #fff; }
.quote-summary-icon svg { width: 17px; height: 17px; }
.quote-summary h2 { margin: 20px 0 9px; color: #fff; font-family: var(--font-display); font-size: 24px; font-weight: 800; letter-spacing: -.03em; line-height: 1.15; }
.quote-summary-copy { margin: 0; color: rgba(255,255,255,.72); font-size: var(--text-xs); line-height: 1.65; }
.quote-summary-stats { display: grid; grid-template-columns: 1fr 1fr; margin: 22px 0; padding: 16px 0; border-top: 1px solid rgba(255,255,255,.14); border-bottom: 1px solid rgba(255,255,255,.14); }
.quote-summary-stats div { display: flex; flex-direction: column; gap: 3px; }
.quote-summary-stats div + div { padding-left: 18px; border-left: 1px solid rgba(255,255,255,.14); }
.quote-summary-stats strong { color: #fff; font-family: var(--font-display); font-size: 25px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; }
.quote-summary-stats span { color: rgba(255,255,255,.66); font-size: var(--text-2xs); }
.quote-summary-includes { display: flex; flex-direction: column; gap: 13px; margin: 0 0 23px; padding: 0; list-style: none; }
.quote-summary-includes li { display: flex; align-items: flex-start; gap: 9px; color: rgba(255,255,255,.86); font-size: var(--text-2xs); line-height: 1.45; }
.quote-summary-includes svg { width: 14px; height: 14px; flex: 0 0 auto; color: #71dda0; }
.quote-whatsapp-cta { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 12px 14px; border: 1px solid rgba(255,255,255,.2); border-radius: 15px; background: #18a558; color: #fff; box-shadow: 0 8px 20px -10px rgba(0,0,0,.5); font-size: var(--text-sm); font-weight: 800; text-decoration: none; transition: transform .18s ease, background .18s ease, box-shadow .18s ease; }
.quote-whatsapp-cta:hover { transform: translateY(-2px); background: #0f7a40; box-shadow: 0 12px 24px -12px rgba(0,0,0,.55); color: #fff; }
.quote-whatsapp-cta > svg:first-child { width: 17px; height: 17px; }
.quote-whatsapp-arrow { width: 14px; height: 14px; margin-left: auto; }
.quote-summary-foot { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 14px 0 0; color: rgba(255,255,255,.6); font-size: 10px; text-align: center; }
.quote-summary-foot svg { width: 12px; height: 12px; }
.quote-summary-legal { display: flex; align-items: flex-start; gap: 7px; margin: 12px 0 0; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.62); font-size: 11px; line-height: 1.5; }
.quote-summary-legal svg { flex-shrink: 0; width: 13px; height: 13px; margin-top: 2px; color: #aeb8e6; }
.quote-summary-legal a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.quote-summary-legal a:hover { color: #aeb8e6; }

.quote-empty { display: grid; grid-template-columns: minmax(210px, .72fr) minmax(0, 1.5fr); overflow: hidden; border: 1px solid rgba(255,255,255,.82); border-radius: 26px; background: rgba(255,255,255,.78); box-shadow: var(--shadow-sm); }
.quote-layout[hidden], .quote-empty[hidden] { display: none !important; }
.quote-empty-art { position: relative; display: grid; place-items: center; min-height: 290px; overflow: hidden; background: #252d50; color: #fff; }
.quote-empty-art::before, .quote-empty-art::after { position: absolute; width: 210px; height: 210px; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; content: ''; }
.quote-empty-art::after { width: 150px; height: 150px; }
.quote-empty-art > svg { z-index: 1; width: 54px; height: 54px; stroke-width: 1.4; color: #fff; }
.quote-empty-copy { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: clamp(26px, 5vw, 54px); }
.quote-empty-copy h2 { max-width: 520px; margin: 0 0 12px; color: var(--ink); font-family: var(--font-display); font-size: clamp(23px, 3vw, 34px); font-weight: 800; letter-spacing: -.035em; line-height: 1.13; }
.quote-empty-copy p { max-width: 58ch; margin: 0 0 23px; color: var(--ink-soft); font-size: var(--text-base); line-height: 1.65; }
.quote-primary-link { display: inline-flex; align-items: center; gap: 10px; padding: 12px 17px; border-radius: var(--radius-pill); background: var(--accent); color: #fff; font-size: var(--text-sm); font-weight: 800; text-decoration: none; transition: transform .18s ease, background .18s ease; }
.quote-primary-link:hover { transform: translateY(-2px); background: #394575; color: #fff; }
.quote-primary-link svg { width: 15px; height: 15px; }
.quote-empty-foot { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: clamp(10px, 2vw, 22px); padding: 17px 22px; border-top: 1px solid var(--line); background: rgba(255,255,255,.56); }
.quote-empty-foot span { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-soft); font-size: var(--text-2xs); font-weight: 700; white-space: nowrap; }
.quote-empty-foot span svg { width: 14px; height: 14px; color: var(--accent); }
.quote-empty-foot > svg { width: 13px; height: 13px; color: rgba(23,21,17,.25); }

#cart-panel-body .quote-product { grid-template-columns: 54px minmax(0, 1fr); gap: 10px; padding: 12px 0; }
#cart-panel-body .quote-product-image { width: 54px; height: 54px; border-radius: 12px; }
#cart-panel-body .quote-product-content { gap: 9px; }
#cart-panel-body .quote-product-name { font-size: var(--text-xs); }
#cart-panel-body .quote-product-controls { gap: 6px; }
#cart-panel-body .quote-quantity-wrap { gap: 6px; }
#cart-panel-body .quote-quantity-label { display: none; }
#cart-panel-body .quote-product .cart-qty-btn { width: 21px; height: 21px; }
#cart-panel-body .quote-product .cart-remove { width: 25px; height: 25px; padding: 0; }
#cart-panel-body .quote-product .cart-remove span { display: none; }
#cart-panel-body .quote-product-brand-btn { width: 25px; height: 25px; padding: 0; }
#cart-panel-body .quote-product-brand-btn span { display: none; }

/* ---------- Estudio de marcación: modal global (cotizador) ----------
   Mismo lenguaje visual que .search-overlay (scrim + panel liquid glass),
   pero de dos columnas: lienzo interactivo a la izquierda, controles a
   la derecha. El logo se posiciona con --x/--y (fracción 0-1 del lienzo)
   y se transforma con --scale/--rot, todo vía custom properties para que
   JS solo tenga que tocar valores, nunca reconstruir strings de CSS. */
.brand-studio-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility 0s linear .25s;
}
.brand-studio-overlay.is-open { opacity: 1; visibility: visible; transition: opacity .25s ease; }
.brand-studio-scrim { position: absolute; inset: 0; background: rgba(23,21,17,.4); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

.brand-studio-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 880px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--glass-border);
  border-radius: 28px;
  background: linear-gradient(162deg, rgba(255,255,255,.88) 0%, rgba(255,255,255,.2) 40%, rgba(255,255,255,.6) 100%), rgba(255,255,255,.72);
  backdrop-filter: blur(34px) saturate(200%);
  -webkit-backdrop-filter: blur(34px) saturate(200%);
  box-shadow: var(--shadow-lg), inset 0 1px 1px rgba(255,255,255,.8), inset 0 0 0 1px rgba(255,255,255,.2);
  transform: translateY(-12px) scale(.97);
  transition: transform .3s cubic-bezier(.16,.8,.3,1);
}
.brand-studio-overlay.is-open .brand-studio-panel { transform: translateY(0) scale(1); }

.brand-studio-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 22px 22px 16px; }
.brand-studio-eyebrow { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 6px; color: var(--accent); font-size: var(--text-2xs); font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.brand-studio-eyebrow svg { width: 13px; height: 13px; }
.brand-studio-head h3 { margin: 0; max-width: 46ch; color: var(--ink); font-family: var(--font-display); font-size: var(--text-xl); font-weight: 800; line-height: 1.3; }

.brand-studio-body { display: grid; grid-template-columns: 1.15fr .85fr; gap: 20px; padding: 0 22px 20px; }

.brand-studio-canvas-wrap { min-width: 0; }
.brand-studio-canvas {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background:
    linear-gradient(135deg, rgba(77,90,143,.05) 0%, transparent 60%),
    repeating-conic-gradient(#f4f4f4 0% 25%, #fbfbfb 0% 50%) 50% / 22px 22px;
  cursor: default;
}
.brand-studio-canvas.is-dragover { outline: 2px dashed var(--accent); outline-offset: -2px; }
.brand-studio-product-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 10%; pointer-events: none; }

.brand-studio-dropzone {
  position: absolute;
  inset: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px;
  border: 1.5px dashed rgba(77,90,143,.35);
  border-radius: 16px;
  background: rgba(255,255,255,.55);
  color: var(--accent);
  text-align: center;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.brand-studio-dropzone:hover { background: rgba(255,255,255,.75); border-color: var(--accent); }
.brand-studio-dropzone svg { width: 26px; height: 26px; }
.brand-studio-dropzone strong { font-size: var(--text-sm); font-weight: 800; color: var(--ink); }
.brand-studio-dropzone span { max-width: 32ch; font-size: var(--text-2xs); color: var(--ink-soft); line-height: 1.5; }

.brand-studio-logo-layer {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 34%;
  touch-action: none;
  cursor: grab;
}
.brand-studio-logo-layer:active { cursor: grabbing; }
.brand-studio-logo-img { display: block; width: 100%; height: auto; filter: drop-shadow(0 2px 6px rgba(23,21,17,.18)); pointer-events: none; user-select: none; }
.brand-studio-logo-handle {
  position: absolute;
  right: -9px;
  bottom: -9px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--accent);
  box-shadow: var(--shadow-sm);
  cursor: nesw-resize;
  touch-action: none;
}
.brand-studio-logo-layer::before {
  content: '';
  position: absolute;
  inset: -4%;
  border: 1.5px dashed rgba(77,90,143,.5);
  border-radius: 6px;
  opacity: 0;
  transition: opacity .12s ease;
  pointer-events: none;
}
.brand-studio-logo-layer:hover::before, .brand-studio-logo-layer.is-active::before { opacity: 1; }

.brand-studio-canvas-toolbar { position: absolute; top: 10px; right: 10px; display: flex; gap: 6px; }
.brand-studio-mini-btn { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 50%; background: rgba(255,255,255,.85); color: var(--ink); box-shadow: var(--shadow-sm); transition: transform .15s ease, color .15s ease, background .15s ease; }
.brand-studio-mini-btn:hover { transform: translateY(-1px); color: var(--accent); background: #fff; }
.brand-studio-mini-btn svg { width: 14px; height: 14px; }
#brand-studio-remove-logo:hover { color: var(--danger-dark); }

.brand-studio-controls { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.brand-studio-field { display: flex; flex-direction: column; gap: 8px; }
.brand-studio-field-row { display: flex; align-items: baseline; justify-content: space-between; }
.brand-studio-field-label { font-size: var(--text-2xs); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); }
.brand-studio-field-value { color: var(--accent); font-size: var(--text-xs); font-weight: 800; font-variant-numeric: tabular-nums; }

.brand-studio-technique-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.brand-studio-technique {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fff;
  color: var(--ink-soft);
  font-size: var(--text-2xs);
  font-weight: 700;
  text-align: left;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.brand-studio-technique svg { width: 14px; height: 14px; flex-shrink: 0; }
.brand-studio-technique:hover { border-color: rgba(77,90,143,.35); color: var(--ink); }
.brand-studio-technique.is-active { border-color: var(--accent); background: rgba(77,90,143,.08); color: var(--accent); }

.brand-studio-field input[type="range"] { width: 100%; accent-color: var(--accent); }

.brand-studio-reset { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: #fff; color: var(--ink); font-size: var(--text-xs); font-weight: 700; transition: border-color .15s ease, background .15s ease; }
.brand-studio-reset svg { width: 14px; height: 14px; }
.brand-studio-reset:hover { border-color: rgba(77,90,143,.35); background: rgba(77,90,143,.05); }

.brand-studio-hint { display: flex; align-items: flex-start; gap: 7px; margin: 0; color: var(--ink-soft); font-size: 10.5px; line-height: 1.5; }
.brand-studio-hint svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 1px; color: var(--accent-soft); }

.brand-studio-foot { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 16px 22px; border-top: 1px solid var(--line); }
.brand-studio-foot .rail-panel-cta { width: auto; padding: 11px 20px; }

@media (max-width: 720px) {
  .brand-studio-body { grid-template-columns: 1fr; }
  .brand-studio-canvas { aspect-ratio: 4 / 3; }
  .brand-studio-foot { flex-direction: column-reverse; }
  .brand-studio-foot .rail-panel-cta { width: 100%; }
}

@media (max-width: 960px) {
  .quote-layout { grid-template-columns: minmax(0, 1.3fr) minmax(270px, .9fr); gap: 15px; }
  .quote-list-panel { padding: 20px; }
  .quote-product { grid-template-columns: 84px minmax(0, 1fr); gap: 14px; }
  .quote-product-image { width: 84px; height: 84px; }
  .quote-summary { padding: 22px 20px 18px; }
}
@media (max-width: 760px) {
  .cart-page { padding-top: 0; }
  .quote-header-wrap { margin: 0 0 30px; }
  .quote-header { align-items: flex-start; flex-direction: column; gap: 16px; min-height: 260px; padding: 82px 24px 52px; }
  /* Mismas curvas suaves hacia afuera que en desktop (el título empieza
     recién a ~79-83px del top aquí, medido en vivo a 390 y 700px — hay
     de sobra, la curva larga NO se lo come). Única diferencia: la
     esquina inferior izquierda se queda corta en 70px en vez de 88px,
     con margen de sobra bajo ambas medidas. */
  .quote-header {
    clip-path: path(evenodd, "M-9999,-9999 L99999,-9999 L99999,99999 L-9999,99999 Z M0,0 L0,70 C0,51 5,48 30,48 L191.25,48 Q209.25,48 209.25,30 C209.25,5 214.25,0 249.25,0 Z");
  }
  .quote-layout { grid-template-columns: 1fr; }
  .quote-summary { position: static; }
}
@media (max-width: 560px) {
  .cart-page { padding-right: 0; padding-left: 0; }
  /* Header compacto: el alto lo da el contenido (sin min-height). Badge y
     muesca bajan juntos vía la variable (misma forma, otra escala). */
  .quote-header-wrap { margin-bottom: 20px; --quote-badge-size: 54px; }
  .quote-header { min-height: 0; gap: 0; padding: 62px 16px 22px; border-radius: 20px; }
  .quote-header h1 { max-width: 13ch; margin-bottom: 6px; font-size: clamp(21px, 5.9vw, 24px); line-height: 1.1; }
  .quote-header-copy p { max-width: 34ch; font-size: 12px; line-height: 1.5; }
  .quote-header-back { min-height: 42px; padding: 0 12px 0 11px; font-size: 11px; }
  .quote-list-panel { padding: 16px 14px 14px; border-radius: 20px; }
  .quote-list-head { align-items: flex-start; flex-direction: column; gap: 10px; padding-bottom: 14px; }
  .quote-list-head h2 { margin-bottom: 4px; font-size: 18px; }
  .quote-list-head p { font-size: 12px; }
  .quote-continue-link { min-height: 32px; padding: 0 12px; border: 1px solid rgba(77,90,143,.18); border-radius: var(--radius-pill); background: rgba(77,90,143,.06); font-size: 12px; }
  .quote-list-note { padding-top: 14px; font-size: 11px; }
  /* Quitar: solo el ícono (el botón ya tiene aria-label) para que la fila
     de controles respire en 390px. */
  #quote-page-list .quote-product .cart-remove { flex: 0 0 auto; width: 34px; height: 34px; margin-left: auto !important; padding: 0; }
  .quote-product .cart-remove span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .quote-product .cart-remove svg { width: 15px; height: 15px; }
  .quote-product-sku { font-size: 9.5px; }
  .quote-product-name { font-size: 15px; }
  .quote-summary { padding: 20px 18px 18px; }
  .quote-summary-icon { width: 32px; height: 32px; border-radius: 10px; }
  .quote-summary h2 { margin: 14px 0 6px; font-size: 20px; }
  .quote-summary-copy { font-size: 12.5px; line-height: 1.55; }
  .quote-summary-stats { margin: 16px 0; padding: 12px 0; }
  .quote-summary-stats strong { font-size: 22px; }
  .quote-summary-includes { gap: 9px; margin-bottom: 18px; }
  .quote-summary-includes li { font-size: 12px; }
  .quote-summary-legal { font-size: 10.5px; }
  .quote-product { grid-template-columns: 68px minmax(0, 1fr); gap: 12px; padding: 17px 0; }
  .quote-product-image { width: 68px; height: 68px; border-radius: 14px; }
  .quote-product-content { gap: 12px; }
  .quote-product-name { white-space: normal; }
  .quote-product-controls { align-items: center; flex-direction: row; justify-content: flex-start; gap: 8px; }
  .quote-quantity-wrap { width: auto; }
  .quote-quantity-label { display: none; }
  .quote-product .cart-remove { align-self: auto; margin: 0; }
  .quote-summary { border-radius: 20px; }
  .quote-empty { grid-template-columns: minmax(0, 1fr); border-radius: 20px; }
  .quote-empty-art { min-height: 118px; }
  .quote-empty-art::before { width: 150px; height: 150px; }
  .quote-empty-art::after { width: 104px; height: 104px; }
  .quote-empty-art > svg { width: 34px; height: 34px; }
  .quote-empty-copy { align-items: stretch; padding: 20px 18px 20px; }
  .quote-empty-copy h2 { margin-bottom: 8px; font-size: 20px; line-height: 1.2; }
  .quote-empty-copy p { margin-bottom: 16px; font-size: 13px; line-height: 1.55; }
  .quote-primary-link { justify-content: center; min-height: 44px; padding: 10px 16px; font-size: 13px; }
  /* Pasos: tres columnas iguales, ícono arriba y texto abajo (en una fila
     no caben y en flex-wrap quedaban desordenados en dos líneas). */
  .quote-empty-foot { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 12px 10px; }
  .quote-empty-foot > svg { display: none; }
  .quote-empty-foot span { flex-direction: column; gap: 5px; font-size: 10.5px; line-height: 1.25; text-align: center; white-space: normal; }
  .quote-empty-foot span svg { width: 15px; height: 15px; }
}
.cart-page-back:focus-visible, .quote-continue-link:focus-visible, .quote-primary-link:focus-visible, .quote-whatsapp-cta:focus-visible, .quote-product-name:focus-visible, .quote-product-image:focus-visible { outline: 3px solid rgba(77,90,143,.42); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .quote-header-wrap, .quote-layout, .quote-empty { animation: none; }
  .quote-product-image img, .quote-product-image:hover img, .cart-page-back, .quote-primary-link, .quote-whatsapp-cta { transition: none; }
}

/* ---------- Animación de entrada ---------- */

.rail-btn, .hero, .card, .brand-badge {
  animation: rise .6s cubic-bezier(.16,.8,.3,1) both;
}
.hero { animation-delay: .1s; }
.card--highlight { animation-delay: .2s; }
.card--info { animation-delay: .26s; }
.brand-badge { animation-delay: .34s; }

@keyframes rise {
  from { opacity: 0; translate: 0 14px; }
  to { opacity: 1; translate: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .rail-btn, .hero, .card, .brand-badge, .icon-btn, .panel-slide, .search-overlay, .search-panel, .rail-panel, .rail-panel-scrim, .mega-menu, .mega-sub-panel.is-active, .rail-btn-badge--promo {
    animation: none !important;
    transition: none !important;
  }
  .panel-slide--1 { opacity: 1; }
}

/* ==========================================================================
   Footer — banda oscura de pie de página (home + catálogo, inyectada desde
   Page_mainController::init() vía el slot $this->_data['footer'] del layout).
   Lleva un sello circular (mismo lenguaje visual que .brand-badge del home:
   gradiente de marca + ícono infinito) montado sobre una mordida cóncava
   real en el borde superior. La mordida es un mask-image radial (no un
   clip-path con un path fijo como el hueco de .card--info): un círculo
   transparente en el centro del borde superior dejando ver el fondo de la
   página detrás, con el sello encima tapando la costura. Al ser % por
   ancho, se adapta solo a cualquier viewport sin recalcular nada.
   ========================================================================== */

/* .footer-seal vive FUERA de .site-footer (hermano, no hijo): el
   mask-image de abajo se compone sobre toda la caja renderizada del
   elemento, hijos desbordados incluidos — si el sello estuviera adentro, la
   misma mordida que lo "recibe" también se lo comería a él. */
.footer-wrap { position: relative; margin-top: 4px; }

.site-footer {
  position: relative;
  padding: 26px clamp(20px, 4vw, 64px) 0;
  color: rgba(255, 255, 255, .78);
  background:
    radial-gradient(120% 160% at 12% -20%, rgba(255, 255, 255, .1) 0%, rgba(255, 255, 255, 0) 55%),
    linear-gradient(165deg, #232a4a 0%, var(--ink) 72%);
  border-radius: 26px 26px 0 0;
  /* El stop "visible" tiene que ser blanco (luminancia Y alfa en 1), no
     negro: -webkit-mask-image interpreta por luminancia y "black" se leería
     como transparente ahí aunque su alfa sea 1 — con blanco funciona igual
     en los dos modos (luminancia y alfa). */
  -webkit-mask-image: radial-gradient(circle 22px at 50% 0, transparent 99%, #fff 100%);
  mask-image: radial-gradient(circle 22px at 50% 0, transparent 99%, #fff 100%);
}

.footer-seal {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, .35) 0%, rgba(255, 255, 255, 0) 45%),
    radial-gradient(circle at 32% 28%, var(--accent-soft), var(--accent) 72%);
  border: 2px solid rgba(255, 255, 255, .5);
  box-shadow: var(--shadow-lg);
}
.footer-seal img { width: 36%; height: 36%; }

.footer-top {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: 16px;
  max-width: 1280px;
  margin: 0 auto;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.footer-brand-logo { display: block; height: 22px; width: auto; margin: 0 0 8px; }
.footer-brand-copy {
  margin: 0 0 10px;
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, .55);
}

.footer-brand-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.footer-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-soft) 100%);
  color: #fff;
  font-size: var(--text-2xs);
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 10px 20px -10px rgba(77, 90, 143, .7);
  transition: transform .15s ease, box-shadow .15s ease;
}
.footer-cta svg { width: 12px; height: 12px; }
.footer-cta:hover { transform: translateY(-1px); box-shadow: 0 14px 26px -10px rgba(77, 90, 143, .85); }
.footer-cta:active { transform: scale(.97); }

.footer-social { display: flex; gap: 6px; }
.footer-social-btn {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .14);
  color: rgba(255, 255, 255, .78);
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.footer-social-btn svg { width: 12px; height: 12px; }
.footer-social-btn:hover { background: var(--accent); color: #fff; transform: translateY(-2px); }

.footer-col { display: flex; flex-direction: column; }
.footer-col h4 {
  margin: 0 0 4px;
  font-size: var(--text-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: rgba(255, 255, 255, .45);
}
.footer-col a {
  padding: 2px 0;
  font-size: var(--text-xs);
  font-weight: 500;
  color: rgba(255, 255, 255, .72);
  text-decoration: none;
  transition: color .15s ease, transform .15s ease;
}
.footer-col a:hover { color: #fff; transform: translateX(2px); }

/* Una sola barra (confianza + copyright + legales), no dos secciones
   separadas con su propio borde/padding — eso era peso visual duplicado
   para lo poco que aporta cada franja por separado. */
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 10px 0;
  font-size: var(--text-2xs);
  color: rgba(255, 255, 255, .45);
}
.footer-trust { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.footer-trust span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-2xs);
  font-weight: 600;
  color: rgba(255, 255, 255, .62);
}
.footer-trust svg { width: 12px; height: 12px; color: var(--accent-soft); }
.footer-copy { margin: 0; }
.footer-bottom-links { display: flex; gap: 14px; }
.footer-bottom-links a { color: rgba(255, 255, 255, .45); text-decoration: none; }
.footer-bottom-links a:hover { color: #fff; }

/* ==========================================================================
   Detalle de producto (/page/productos/detalle) — galería con zoom + cambio
   de color en vivo (ver initProductDetail() en orizon.js), buy box sticky,
   pestañas de contenido real (descripción/especificaciones/personalización)
   y relacionados reutilizando el mismo .product-card del catálogo.
   ========================================================================== */

.pd-detail-navigation {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, max-content) minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}
.pd-product-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 7px;
  min-height: 36px;
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .48);
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.pd-product-nav-btn--next { justify-self: end; }
.pd-product-nav-btn svg { width: 14px; height: 14px; opacity: .75; }
a.pd-product-nav-btn:hover { color: var(--accent); border-color: rgba(77, 90, 143, .3); background: rgba(255, 255, 255, .82); }
.pd-product-nav-btn.is-disabled { opacity: .35; cursor: not-allowed; }

.pd-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  margin-bottom: 0;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--ink-soft);
}
.pd-breadcrumb a { color: var(--ink-soft); text-decoration: none; transition: color .15s ease; }
.pd-breadcrumb a:hover { color: var(--accent); }
.pd-breadcrumb svg { width: 12px; height: 12px; opacity: .5; }
.pd-breadcrumb-current { color: var(--ink); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 32ch; }

@media (max-width: 600px) {
  .pd-detail-navigation { grid-template-columns: 36px minmax(0, 1fr) 36px; gap: 8px; }
  .pd-product-nav-btn { width: 36px; min-height: 36px; justify-content: center; padding: 0; }
  .pd-product-nav-btn span { display: none; }
  /* Ruta en una sola línea, sin cortar con "…": se desliza de lado si no
     cabe (orizon.js la deja al final, mostrando el producto actual). */
  .pd-breadcrumb {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 4px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    font-size: 10px;
    white-space: nowrap;
  }
  .pd-breadcrumb::-webkit-scrollbar { display: none; }
  .pd-breadcrumb > * { flex-shrink: 0; }
  .pd-breadcrumb-current { max-width: none; overflow: visible; text-overflow: clip; }
}

.pd-main-row { --bs-gutter-x: 0; margin-bottom: 36px; }
.pd-main-row .col-6 { padding-right: 24px; min-width: 0; }
.pd-main-row .col-4 { padding-right: 24px; min-width: 0; }
.pd-main-row .col-2 { min-width: 0; }

/* ---------- Galería: miniaturas en columna a la izquierda + foto grande a
   la derecha (lista vertical, no tira horizontal debajo) — en fila flex, el
   stretch por defecto hace que la columna de miniaturas tome la misma
   altura que .pd-gallery-stage sin tener que calcularla a mano. */
.pd-gallery { display: flex; gap: 12px; }
.pd-gallery-stage {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  aspect-ratio: 1;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.pd-gallery-badges { position: absolute; top: 14px; left: 14px; z-index: 2; display: flex; flex-direction: column; gap: 6px; }
.pd-gallery-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: fit-content;
  font-size: var(--text-2xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .03em;
  border-radius: var(--radius-pill);
  padding: 5px 11px;
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.pd-gallery-badge svg { width: 11px; height: 11px; }
.pd-gallery-badge--new { background: rgba(23, 21, 17, .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.pd-gallery-badge--sale { background: linear-gradient(135deg, var(--danger), var(--danger-dark)); }

.pd-gallery-counter {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 2;
  min-width: 48px;
  padding: 6px 10px;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: var(--radius-pill);
  background: rgba(23, 21, 17, .72);
  box-shadow: var(--shadow-sm);
  color: #fff;
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  pointer-events: none;
}

.pd-gallery-zoom { width: 100%; height: 100%; overflow: hidden; cursor: zoom-in; }
.pd-gallery-zoom img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; transform-origin: 50% 50%; }
@media (hover: hover) and (pointer: fine) {
  .pd-gallery-zoom.is-zoomed img { transform: scale(1.9); }
}

/* Tira de miniaturas con límite real de imágenes visibles (6) — más allá
   de eso no crece ni hay que adivinar que se puede hacer scroll: las
   flechas arriba/abajo deslizan el resto, como un slide vertical. */
.pd-gallery-thumbs-rail {
  display: flex;
  flex-direction: column;
  flex: 0 0 72px;
  align-self: flex-start;
  align-items: center;
  gap: 6px;
}
.pd-gallery-thumbs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 72px;
  max-height: calc(72px * 6 + 8px * 5);
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.pd-gallery-thumbs::-webkit-scrollbar { display: none; }
.pd-gallery-thumb {
  flex: 0 0 72px;
  width: 72px;
  height: 72px;
  border-radius: 12px;
  overflow: hidden;
  padding: 0;
  border: 2px solid transparent;
  background: var(--paper);
  box-shadow: var(--shadow-sm);
  transition: border-color .15s ease, transform .15s ease;
}
.pd-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pd-gallery-thumb:hover { transform: translateX(2px); }
.pd-gallery-thumb.is-active { border-color: var(--accent); }

.pd-thumbs-arrow {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 20px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink-soft);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, transform .15s ease, opacity .15s ease;
}
.pd-thumbs-arrow svg { width: 14px; height: 14px; }
.pd-thumbs-arrow:hover { background: rgba(77, 90, 143, .1); color: var(--accent); }
.pd-thumbs-arrow:active { transform: scale(.92); }
.pd-thumbs-arrow:disabled { opacity: .3; cursor: default; pointer-events: none; }
.pd-thumbs-arrow[hidden] { display: none; }

/* ---------- Pestañas (descripción / especificaciones / personalización) ---------- */
.pd-tabs {
  margin-top: 24px;
  border-radius: var(--radius-card);
  background: var(--glass-sheen), var(--glass-tint-1);
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  border: 1px solid var(--glass-border-soft);
  box-shadow: var(--shadow-sm);
  padding: 8px 22px 22px;
}
.pd-tabs-head { display: flex; flex-wrap: wrap; gap: 6px; padding: 14px 0; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.pd-tab {
  border: none;
  background: none;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--ink-soft);
  transition: background .15s ease, color .15s ease;
}
.pd-tab:hover { color: var(--ink); background: rgba(255, 255, 255, .5); }
.pd-tab.is-active { color: #fff; background: var(--accent); }

.pd-tab-panel { display: none; font-size: var(--text-sm); line-height: 1.7; color: var(--ink); }
.pd-tab-panel.is-active { display: block; animation: mega-fade-in .18s ease both; }
.pd-tab-panel p { margin: 0; }

.pd-stars { display: inline-flex; gap: 2px; color: var(--line); }
.pd-stars svg { width: 15px; height: 15px; }
.pd-stars .is-filled { color: var(--rating); fill: var(--rating); }
.pd-stars--sm svg { width: 12px; height: 12px; }
.pd-stars--lg svg { width: 20px; height: 20px; }

/* ---------- Reseñas: sección propia fuera de las pestañas (tabla `resena`
   real — ver Page_Model_DbTable_Resena). Panel con identidad visual
   propia — "la voz del cliente" — no una pestaña más entre otras. ---------- */
.pd-reviews-row { margin: 8px 0 36px; }
.pd-reviews-shell { position: relative; }
.pd-reviews {
  position: relative;
  overflow: hidden;
  clip-path: url(#pd-reviews-clip);
  border-radius: 28px;
  padding: 40px clamp(20px, 4vw, 48px);
  background: linear-gradient(135deg, #EEF1FC 0%, #E3EAFA 55%, #DCE4F8 100%);
  border: 1px solid rgba(77, 90, 143, .12);
}
.pd-reviews::before {
  content: '\201C';
  position: absolute;
  top: -70px;
  right: 24px;
  font-family: var(--font-display);
  font-size: 260px;
  line-height: 1;
  color: rgba(77, 90, 143, .06);
  pointer-events: none;
  user-select: none;
}

.pd-reviews-top { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 28px; }
.pd-reviews-eyebrow { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 8px; padding: 5px 12px; border-radius: var(--radius-pill); background: rgba(77, 90, 143, .1); color: var(--accent); font-size: var(--text-2xs); font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.pd-reviews-shell > .pd-reviews-eyebrow { position: absolute; z-index: 3; top: 0; left: 0; margin: 0; }
.pd-reviews-eyebrow svg { width: 12px; height: 12px; }
.pd-reviews-headline h2 { margin: 0; font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 800; color: var(--ink); max-width: 22ch; }
.pd-reviews-write-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding: 12px 20px;
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: 700;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: transform .15s ease, background .15s ease;
}
.pd-reviews-write-cta svg { width: 14px; height: 14px; }
.pd-reviews-write-cta:hover { background: var(--accent); transform: translateY(-1px); }
.pd-reviews-write-cta:active { transform: scale(.97); }

@media (max-width: 600px) {
  .pd-reviews { padding-top: 52px; }
  .pd-reviews-shell > .pd-reviews-eyebrow { gap: 5px; padding: 4px 8px; font-size: 9px; }
}

.pd-reviews-panel { position: relative; display: grid; grid-template-columns: 240px 1fr; gap: 32px; }

.pd-reviews-score-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  height: fit-content;
  padding: 28px 20px;
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--shadow-md);
}
.pd-reviews-score-number { font-family: var(--font-display); font-size: 48px; font-weight: 800; color: var(--ink); line-height: 1; }
.pd-reviews-score-total { margin: 0; font-size: var(--text-xs); font-weight: 600; color: var(--ink-soft); }
.pd-reviews-score-bars { width: 100%; display: flex; flex-direction: column; gap: 7px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.pd-reviews-score-bar-row { display: flex; align-items: center; gap: 8px; }
.pd-reviews-score-bar-label { display: inline-flex; align-items: center; gap: 3px; width: 26px; flex-shrink: 0; font-size: var(--text-3xs); font-weight: 700; color: var(--ink-soft); }
.pd-reviews-score-bar-label svg { width: 9px; height: 9px; color: var(--rating); fill: var(--rating); }
.pd-reviews-score-bar { flex: 1; height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; }
.pd-reviews-score-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--rating), #e8c04a); }
.pd-reviews-score-bars em { width: 20px; flex-shrink: 0; text-align: right; font-style: normal; font-size: var(--text-3xs); font-weight: 600; color: var(--ink-soft); }

.pd-reviews-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; align-content: start; }
.pd-review-card {
  padding: 18px 20px;
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: transform .15s ease, box-shadow .15s ease;
}
.pd-review-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.pd-review-card-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.pd-review-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-soft));
  color: #fff;
  font-size: var(--text-xs);
  font-weight: 800;
}
.pd-review-card-who { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.pd-review-card-who strong { font-size: var(--text-sm); color: var(--ink); }
.pd-review-card-who time { font-size: var(--text-3xs); color: var(--ink-soft); }
.pd-review-card p { margin: 0; font-size: var(--text-sm); color: var(--ink-soft); line-height: 1.6; }

.pd-reviews-empty-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  max-width: 420px;
  margin: 0 auto;
  padding: 24px 20px 8px;
}
.pd-reviews-empty-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 4px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--shadow-sm);
  color: var(--accent);
}
.pd-reviews-empty-icon svg { width: 24px; height: 24px; }
.pd-reviews-empty-hero h2 { margin: 0; font-family: var(--font-display); font-size: var(--text-xl); font-weight: 800; color: var(--ink); }
.pd-reviews-empty-hero p { margin: 0; font-size: var(--text-sm); color: var(--ink-soft); line-height: 1.6; }
.pd-reviews-empty-hero a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 12px 22px;
  border-radius: var(--radius-pill);
  background: var(--success);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: 700;
  text-decoration: none;
  transition: background .15s ease, transform .15s ease;
}
.pd-reviews-empty-hero a svg { width: 15px; height: 15px; }
.pd-reviews-empty-hero a:hover { background: var(--success-dark); }
.pd-reviews-empty-hero a:active { transform: scale(.97); }

.pd-specs { display: flex; flex-direction: column; gap: 2px; margin: 0; }
.pd-specs-row {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.pd-specs-row:last-child { border-bottom: none; }
.pd-specs-row dt { display: flex; align-items: center; gap: 8px; margin: 0; font-size: var(--text-xs); font-weight: 700; color: var(--ink-soft); }
.pd-specs-row dt svg { width: 14px; height: 14px; color: var(--accent); flex-shrink: 0; }
.pd-specs-row dd { margin: 0; font-size: var(--text-sm); color: var(--ink); }

.pd-brand-callout {
  display: flex;
  gap: 14px;
  padding: 16px;
  border-radius: 16px;
  background: rgba(77, 90, 143, .08);
  border: 1px solid rgba(77, 90, 143, .16);
  margin-bottom: 16px;
}
.pd-brand-callout svg { width: 20px; height: 20px; color: var(--accent); flex-shrink: 0; margin-top: 2px; }
.pd-brand-callout strong { display: block; margin-bottom: 4px; font-size: var(--text-sm); color: var(--ink); }
.pd-brand-callout p { margin: 0; font-size: var(--text-sm); color: var(--ink-soft); }
.pd-brand-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: var(--radius-pill);
  background: var(--success);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: 700;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: background .15s ease, transform .15s ease;
}
.pd-brand-cta svg { width: 14px; height: 14px; }
.pd-brand-cta:hover { background: var(--success-dark); }
.pd-brand-cta:active { transform: scale(.97); }

/* ---------- Buy box ---------- */
/* El sticky vive en el wrapper, no en .pd-buybox: .pd-sku-badge es hermano
   de .pd-buybox (no hijo) y necesita moverse junto con la tarjeta al hacer
   scroll. position: sticky también le sirve de ancla al badge absoluto. */
.pd-buybox-wrap { position: sticky; top: 20px; }

.pd-buybox {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-card);
  padding: 24px;
  background: var(--glass-sheen), var(--glass-tint-2);
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  border: 1px solid var(--glass-border-soft);
  box-shadow: var(--shadow-md);
}
/* Hueco del tamaño del SKU en la esquina superior derecha: solo se aplica
   cuando orizon.js ya dibujó el trazado (si el JS fallara, la tarjeta se ve
   entera en vez de desaparecer). */
.pd-buybox.has-sku-notch { clip-path: url(#buybox-sku-clip); }

/* SKU: la misma pastilla de siempre (forma intacta), ubicada en la esquina
   superior derecha de la tarjeta, dentro del hueco. */
.pd-sku-badge {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 118px;
  height: 34px;
  border-radius: 999px;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, .35) 0%, rgba(255, 255, 255, 0) 45%),
    radial-gradient(circle at 32% 28%, var(--accent-soft), var(--accent) 72%);
  color: #fff;
  border: 2px solid rgba(255, 255, 255, .5);
  box-shadow: var(--shadow-lg);
  font-size: var(--text-2xs);
  font-weight: 800;
  letter-spacing: .01em;
  white-space: nowrap;
}
.pd-sku-badge-label { font-size: 9px; letter-spacing: .08em; opacity: .82; }
.pd-buybox-title { margin: 30px 0 10px; font-family: var(--font-display); font-size: clamp(20px, 2.4vw, 26px); font-weight: 800; color: var(--ink); line-height: 1.25; }

.pd-rating-glance {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 16px;
  padding: 0;
  border: none;
  background: none;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--ink);
}
.pd-rating-glance span { color: var(--ink-soft); font-weight: 600; }
.pd-rating-glance:hover .pd-stars { opacity: .8; }
.pd-rating-glance--empty { color: var(--ink-soft); font-weight: 600; }
.pd-rating-glance--empty svg { width: 14px; height: 14px; }

.pd-buybox-price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pd-price-now { font-family: var(--font-display); font-size: clamp(26px, 3vw, 32px); font-weight: 800; color: var(--ink); }
.pd-price-old { font-size: var(--text-md); font-weight: 600; color: var(--ink-soft); text-decoration: line-through; }
.pd-buybox-savings {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 8px 0 0;
  padding: 6px 10px 6px 8px;
  border: 1px solid rgba(24, 165, 88, .2);
  border-radius: 10px;
  background: rgba(24, 165, 88, .09);
  color: var(--success-dark);
  font-size: var(--text-xs);
  line-height: 1;
}
.pd-buybox-savings > svg { width: 14px; height: 14px; flex: 0 0 auto; }
.pd-buybox-savings-label { font-weight: 600; }
.pd-buybox-savings strong { font-weight: 800; font-variant-numeric: tabular-nums; }
.pd-buybox-savings[hidden] { display: none; }
}

.pd-countdown {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(192, 57, 43, .08);
  border: 1px solid rgba(192, 57, 43, .18);
  color: var(--danger-dark);
  font-size: var(--text-xs);
  font-weight: 700;
}
.pd-countdown svg { width: 14px; height: 14px; flex-shrink: 0; }
.pd-countdown-digits { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.pd-countdown-unit { display: flex; flex-direction: column; align-items: center; min-width: 30px; padding: 3px 4px; border-radius: 8px; background: #fff; box-shadow: var(--shadow-sm); }
.pd-countdown-unit span { font-family: var(--font-display); font-size: var(--text-sm); font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; color: var(--danger-dark); }
.pd-countdown-unit small { font-size: 7px; font-weight: 700; text-transform: uppercase; color: var(--ink-soft); }

.pd-buybox-unit-note { margin: 2px 0 0; font-size: var(--text-xs); color: var(--ink-soft); }

/* Precios por volumen: siempre visible (no colapsable), con la fila de
   mayor cantidad resaltada como la mejor oferta — mismo tinte de marca
   que .pd-brand-callout, nunca un borde lateral de color. */
.pd-volume { margin-top: 16px; border: 1px solid var(--line); border-radius: 16px; background: rgba(77, 90, 143, .035); overflow: hidden; }
.pd-volume-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
}
.pd-volume-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(77, 90, 143, .12);
  color: var(--accent);
}
.pd-volume-icon svg { width: 17px; height: 17px; }
.pd-volume-head-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.pd-volume-head-text strong { font-size: var(--text-base); font-weight: 800; color: var(--ink); }
.pd-volume-head-text span { font-size: var(--text-xs); color: var(--ink-soft); }

.pd-volume-list { list-style: none; margin: 0; padding: 4px 8px 10px; border-top: 1px solid var(--line); }
.pd-volume-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 9px 8px;
  border-radius: 10px;
  font-size: var(--text-sm);
}
.pd-volume-row.is-best { background: rgba(77, 90, 143, .08); }
.pd-volume-qty { color: var(--ink-soft); }
.pd-volume-row.is-best .pd-volume-qty { color: var(--ink); font-weight: 700; }
.pd-volume-price { text-align: right; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.pd-volume-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: var(--text-2xs);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  background: rgba(24, 165, 88, .12);
  color: var(--success-dark);
}
.pd-volume-badge--base { background: transparent; color: var(--ink-soft); font-weight: 700; }
.pd-volume-row.is-best .pd-volume-badge:not(.pd-volume-badge--base) { background: var(--success); color: #fff; }

/* Color: encabezado discreto (título + conteo), círculos y una sola línea
   suave con el color elegido y su stock — sin cajas ni pesos extra. */
.pd-buybox-colors { margin-top: 20px; }
.pd-color-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.pd-color-title { font-size: var(--text-sm); font-weight: 700; color: var(--ink); }
.pd-color-count { font-size: var(--text-xs); font-weight: 500; color: var(--ink-soft); }
.pd-color-count strong { color: var(--ink); font-weight: 700; }
.pd-swatch-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.pd-color-selected { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; font-size: var(--text-xs); font-weight: 500; color: var(--ink-soft); }
.pd-color-selected strong { color: var(--ink); font-weight: 700; }
.pd-color-sep { color: var(--ink-soft); opacity: .6; }
.pd-color-selected .pd-buybox-stock { display: inline-flex; margin: 0; font-size: inherit; font-weight: 500; color: inherit; }
.pd-swatch {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  padding: 2px;
  border: 1px solid var(--line);
  background: var(--paper);
  transition: transform .15s ease, box-shadow .15s ease;
}
.pd-swatch-dot { display: block; width: 100%; height: 100%; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(23, 21, 17, .1); }
.pd-swatch:hover { transform: scale(1.08); }
.pd-swatch.is-active { box-shadow: 0 0 0 1px var(--paper), 0 0 0 3px var(--accent); }
.pd-swatch.is-agotado { opacity: .4; }
.pd-swatch.is-agotado::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 140%;
  height: 1px;
  background: var(--ink-soft);
  transform: rotate(-45deg);
}

.pd-buybox-stock {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 18px 0 0;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--ink);
}
.pd-stock-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.pd-stock-dot--ok { background: var(--success); }
.pd-stock-dot--low { background: var(--rating); }
.pd-stock-dot--out { background: var(--danger); }

.pd-buybox-actions { display: flex; align-items: center; gap: 10px; margin-top: 18px; }
.pd-qty {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  padding: 4px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .5);
  border: 1px solid var(--line);
}
.pd-qty button {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--ink);
  transition: background .15s ease;
}
.pd-qty button:hover { background: rgba(255, 255, 255, .8); }
.pd-qty button svg { width: 13px; height: 13px; }
.pd-qty [data-pd-qty-value] { min-width: 26px; text-align: center; font-size: var(--text-sm); font-weight: 800; color: var(--ink); }

.pd-add-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  border: none;
  border-radius: var(--radius-pill);
  padding: 4px 4px 4px 20px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-soft) 100%);
  color: #fff;
  font-size: var(--text-sm);
  font-weight: 700;
  box-shadow: 0 10px 20px -8px rgba(77, 90, 143, .6);
  transition: background-position .25s ease, box-shadow .15s ease, transform .1s ease;
  background-size: 160% 160%;
  background-position: 0% 0%;
}
.pd-add-btn:hover:not(:disabled) { background-position: 100% 100%; box-shadow: 0 12px 24px -8px rgba(77, 90, 143, .75); }
.pd-add-btn:active:not(:disabled) { transform: scale(.97); }
.pd-add-btn:disabled { background: var(--line); color: var(--ink-soft); box-shadow: none; cursor: not-allowed; }
.pd-add-btn.is-added { background: var(--success-dark); }
.pd-add-icon { display: grid; place-items: center; width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; background: rgba(255, 255, 255, .22); }
.pd-add-icon svg { width: 15px; height: 15px; }
.pd-add-btn:disabled .pd-add-icon { background: rgba(23, 21, 17, .08); }

.pd-share-btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .5);
  color: var(--ink);
  transition: background .15s ease, transform .15s ease;
}
.pd-share-btn svg { width: 16px; height: 16px; }
.pd-share-btn:hover { background: rgba(255, 255, 255, .85); }
.pd-share-btn:active { transform: scale(.92); }

.pd-whatsapp-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
  padding: 12px;
  border-radius: var(--radius-pill);
  background: rgba(24, 165, 88, .1);
  border: 1px solid rgba(24, 165, 88, .25);
  color: var(--success-dark);
  font-size: var(--text-xs);
  font-weight: 700;
  text-decoration: none;
  transition: background .15s ease;
}
.pd-whatsapp-cta svg { width: 15px; height: 15px; }
.pd-whatsapp-cta:hover { background: rgba(24, 165, 88, .18); }


/* ---------- Relacionados ---------- */
.pd-related-row { --bs-gutter-x: 0; }
.pd-section-title { margin: 0 0 18px; font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 800; color: var(--ink); }

/* ---------- Publicidad: tira vertical de esqueletos (mismo lenguaje que
   .catalog-banner-placeholder del catálogo — esto NO es diseño final,
   reserva el espacio hasta que haya banners reales). ---------- */
.pd-ad-rail { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 16px; }
.pd-ad-skeleton {
  width: 100%;
  aspect-ratio: 3 / 4;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-card);
  border: 1px solid var(--line);
  background: var(--ph-3);
}
.pd-ad-skeleton-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
  font-size: var(--text-3xs);
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  color: var(--ink-soft);
}
.pd-ad-skeleton-label svg { width: 15px; height: 15px; }

/* Banners publicitarios reales del riel (imágenes verticales con su propio
   texto): cada una se muestra completa, sin recorte, a su propia proporción
   (la toma de los width/height del <img>), con el mismo radio de tarjeta. */
.pd-ad {
  display: block;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--ph-3);
  box-shadow: 0 14px 30px -18px rgba(23, 29, 66, .55);
}
.pd-ad img { display: block; width: 100%; height: auto; }
.pd-ad--link { transition: transform .2s ease, box-shadow .2s ease; }
.pd-ad--link:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -18px rgba(23, 29, 66, .65); }
.pd-ad--link:focus-visible { outline: 3px solid var(--accent-soft); outline-offset: 3px; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 980px) {
  .hero-title { max-width: 10ch; }
  .card--info { bottom: clamp(150px, 24vw, 196px); }
  .footer-top { grid-template-columns: repeat(2, 1fr); }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  /* Menú fijo en la parte inferior: el MISMO diseño de escritorio (íconos
     sueltos en su círculo de vidrio + cápsula WhatsApp/Mensajes + cápsula
     Cotizador), solo acomodado en fila horizontal y anclado abajo. Sigue en
     z-index 51 (regla base), por encima del buscador/mega-menú/paneles.
     La franja del menú es suya: fondo de la página (#E3EAFA, el mismo del
     body) de lado a lado y sombra suave arriba, así la foto/contenido no
     se ve por detrás — el menú no es parte del fondo.
     --mobile-nav-space = alto total de la franja: lo que el resto de la
     página debe dejar libre abajo. */
  :root { --mobile-nav-space: calc(78px + env(safe-area-inset-bottom)); } /* 12 + cápsula 54 + 12 */
  .rail {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    transform: none;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 12px 0 calc(12px + env(safe-area-inset-bottom));
    background: #E3EAFA;
    box-shadow: 0 -10px 24px -18px rgba(23, 21, 17, .45);
    /* Se esconde al bajar y vuelve al subir (initAutoHideNav). Usa
       "translate" (no transform) para no chocar con otras reglas. */
    transition: translate .3s cubic-bezier(.16, .8, .3, 1), box-shadow .3s ease;
  }
  .nav-hidden .rail { translate: 0 calc(100% + 6px); box-shadow: none; }
  @media (prefers-reduced-motion: reduce) { .rail { transition: none; } }
  .rail-group,
  .rail-duo { flex-direction: row; }
  .rail-btn { width: 40px; height: 40px; }
  /* Indicador del slideshow más pequeño en celular (mismo diseño, a escala). */
  .slide-controls { gap: 6px; }
  .slide-prev-btn { width: 28px; height: 28px; }
  .slide-prev-btn svg { width: 13px; height: 13px; }
  .slide-indicator { gap: 7px; padding: 6px 11px; }
  .slide-indicator-dots { gap: 4px; }
  .slide-dot { width: 5px; height: 5px; }
  .slide-indicator-count { font-size: 10px; }

  /* "Ofertas" en celular: sin texto, un círculo del mismo tamaño y lugar que
     el badge de Mensajes, conservando su pulso (promo-pulse). */
  .rail-btn-badge--promo {
    top: -2px;
    right: -2px;
    width: 16px;
    height: 16px;
    padding: 0;
    border-radius: 50%;
    font-size: 0;
  }

  /* El contenido termina donde empieza la franja del menú (body no es quien
     hace scroll aquí, así que padding en body no sirve): en el home, la
     foto llena exactamente la pantalla menos la franja y el stage reserva
     ese alto debajo; en el resto, el footer oscuro reserva el espacio. */
  .panel { min-height: calc(100dvh - var(--mobile-nav-space)); }
  .stage:not(.stage--catalog) { padding-bottom: var(--mobile-nav-space); }
  .site-footer { padding-bottom: var(--mobile-nav-space); }
}
/* Celulares angostos: misma fila, un poco más compacta para que quepa. */
@media (max-width: 380px) {
  .rail { gap: 6px; }
  .rail-btn { width: 36px; height: 36px; }
  .rail-group--fade { gap: 6px; }
  /* © + legales siguen en una fila con margen a los bordes. */
  .panel-foot .panel-foot-copy { padding: 0 9px; font-size: 9.5px; }
}
@media (max-width: 760px) {

  /* Paneles del menú en celular (Contáctanos, Ofertas, Cotizador): igual que
     Explorar, el título queda FIJO arriba (con su línea divisoria) y el pie
     (botón de WhatsApp / ver cotización) fijo abajo; solo el contenido del
     medio hace scroll si no cabe. */
  .rail-panel { display: flex; flex-direction: column; overflow: hidden; }
  .rail-panel-head { flex-shrink: 0; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
  .rail-panel .notif-tabs { flex-shrink: 0; padding-top: 4px; }
  /* En Ofertas la línea va debajo de las pestañas (que ya la tienen), no
     entre el título y las pestañas. */
  .rail-panel-head:has(+ .notif-tabs) { padding-bottom: 6px; border-bottom: none; }
  .rail-panel-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-top: 10px; }
  .rail-panel-foot { flex-shrink: 0; }

  /* ================ Ficha de producto en celular ================ */

  /* Orden de lectura: foto → compra (precio, colores, agregar) →
     descripción/especificaciones → publicidad. La columna de la foto se
     "disuelve" (display: contents) para poder meter la compra entre la
     foto y las pestañas sin tocar el HTML de escritorio. */
  .pd-main-row .col-6 { display: contents; }
  .pd-main-row .pd-gallery { order: 1; width: 100%; }
  .pd-main-row .col-4 { order: 2; padding-right: 0; } /* sin el margen derecho de escritorio: mismo ancho que la foto */
  .pd-main-row .col-2 { padding-right: 0; }
  .pd-main-row .pd-tabs { order: 3; width: 100%; margin-top: 18px; }
  .pd-main-row .col-2 { order: 4; }
  .pd-buybox-wrap { margin-top: 14px; }

  /* Miniaturas: tira horizontal que se desliza (antes una columna de
     ~520 px debajo de la foto); sin las flechas de arriba/abajo. */
  .pd-gallery { flex-direction: column; gap: 8px; }
  .pd-gallery-thumbs-rail { flex: 0 0 auto; flex-direction: row; width: 100%; order: 2; }
  .pd-thumbs-arrow { display: none !important; }
  .pd-gallery-thumbs {
    flex-direction: row;
    width: 100%;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 8px;
    padding: 2px;
    scroll-snap-type: x proximity;
  }
  .pd-gallery-thumb { flex: 0 0 60px; width: 60px; height: 60px; border-radius: 10px; scroll-snap-align: start; }

  /* Acciones de compra: cantidad y compartir arriba (a los extremos) y
     "Agregar al cotizador" a todo el ancho debajo — antes compartían una
     fila y el texto del botón se partía en dos líneas. */
  .pd-buybox-actions { flex-wrap: wrap; justify-content: space-between; gap: 10px; }
  .pd-add-btn { order: 3; flex: 1 1 100%; }
  .pd-add-btn [data-pd-add-label] { white-space: nowrap; }

  /* Pestañas en una sola fila deslizable (antes "Personalización" bajaba
     a una segunda línea). */
  .pd-tabs-head {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    gap: 4px;
  }
  .pd-tabs-head::-webkit-scrollbar { display: none; }
  .pd-tab { flex-shrink: 0; padding: 8px 12px; font-size: 12px; white-space: nowrap; }

  /* Reseñas al mismo ancho que el resto (la columna traía 12 px de Bootstrap). */
  .pd-reviews-row > .col-12 { padding-left: 0; padding-right: 0; }

  /* ---- Sección de reseñas en celular ----
     (Había reglas de celular en un bloque ANTERIOR a las reglas base, que
     les ganaban: la calificación y las tarjetas seguían en 2 columnas.) */
  .pd-reviews-row { margin: 4px 0 26px; }
  .pd-reviews { padding: 46px 16px 18px; border-radius: 20px; }
  .pd-reviews::before { display: none; }
  .pd-reviews-shell > .pd-reviews-eyebrow { gap: 5px; padding: 4px 9px; font-size: 9.5px; }

  /* Encabezado: título y botón uno debajo del otro, botón a todo el ancho. */
  .pd-reviews-top { flex-direction: column; align-items: stretch; gap: 12px; margin-bottom: 16px; }
  .pd-reviews-headline h2 { max-width: none; font-size: 19px; line-height: 1.25; }
  .pd-reviews-write-cta { justify-content: center; min-height: 44px; }

  /* Calificación arriba y las reseñas debajo, todo en una columna. */
  .pd-reviews-panel { grid-template-columns: 1fr; gap: 14px; }
  /* Tarjeta de calificación compacta: número grande a la izquierda,
     estrellas y total a la derecha, y las barras de 5→1 debajo. */
  .pd-reviews-score-card {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 14px;
    row-gap: 2px;
    text-align: left;
    padding: 16px;
    border-radius: 16px;
  }
  .pd-reviews-score-number { grid-row: 1 / span 2; font-size: 40px; }
  .pd-reviews-score-card .pd-stars { grid-column: 2; justify-self: start; }
  .pd-reviews-score-total { grid-column: 2; }
  .pd-reviews-score-bars { grid-column: 1 / -1; margin-top: 10px; padding-top: 12px; }

  /* Reseñas una debajo de otra. */
  .pd-reviews-cards { grid-template-columns: 1fr; gap: 10px; }
  .pd-review-card { padding: 14px; border-radius: 14px; }
  .pd-review-card:hover { transform: none; }
  .pd-review-card-top { gap: 8px; margin-bottom: 8px; }
  .pd-review-avatar { width: 32px; height: 32px; }
  .pd-review-card p { font-size: 13px; line-height: 1.55; }

  /* Sin reseñas: más compacto y el botón de WhatsApp a todo el ancho. */
  .pd-reviews-empty-hero { gap: 8px; padding: 10px 4px 4px; }
  .pd-reviews-empty-icon { width: 48px; height: 48px; }
  .pd-reviews-empty-icon svg { width: 21px; height: 21px; }
  .pd-reviews-empty-hero h2 { font-size: 17px; line-height: 1.25; }
  .pd-reviews-empty-hero p { font-size: 13px; }
  .pd-reviews-empty-hero a { align-self: stretch; justify-content: center; min-height: 44px; margin-top: 6px; }

  /* Publicidad: carrusel horizontal (uno a la vez, el siguiente asomándose)
     en vez de los 3 banners apilados (~1.260 px). */
  .pd-ad-rail {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 10px;
    margin-top: 18px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .pd-ad-rail::-webkit-scrollbar { display: none; }
  .pd-ad { flex: 0 0 74%; max-width: none; margin: 0; scroll-snap-align: start; }

  /* ===================== Catálogo en celular =====================
     Mismo diseño de escritorio, reorganizado para pantalla vertical. */

  /* Banner a todo el ancho y las 4 cifras debajo en cuadrícula 2×2
     (antes iban lado a lado y el texto de las cifras se cortaba). */
  .catalog-banner-row { flex-direction: column; margin-bottom: 14px; }
  .catalog-banner-row .col-9,
  .catalog-banner-row .col-3 { width: 100%; padding-right: 0; }
  .catalog-banner-row .col-3 { margin-top: 10px; }
  .catalog-trust-badges-col { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; height: auto; }
  .catalog-trust-strip { min-height: 44px; padding: 5px 10px 5px 5px; gap: 8px; font-size: 11px; line-height: 1.25; border-radius: 12px; }
  .catalog-trust-strip-icon { width: 30px; height: 30px; flex-shrink: 0; }

  /* Categorías: una sola fila deslizable con flechas (antes 7 filas). */
  .catalog-intro-row { margin-bottom: 10px; }
  .catalog-cats-strip { margin-bottom: 0; }
  .catalog-cats-strip .catalog-related-badges {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 2px 2px 8px;
  }
  .catalog-cats-strip .catalog-related-badges::-webkit-scrollbar { display: none; }
  .catalog-cats-strip .mega-foot-tag { flex-shrink: 0; white-space: nowrap; }

  /* Fila de resultados: conteo + botón Filtros + vista. */
  .catalog-results-head { gap: 8px; margin-bottom: 12px; }
  .catalog-results-count { flex: 1; min-width: 0; font-size: 12px; }
  .catalog-filters-open {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-pill);
    background: var(--glass-sheen), var(--glass-tint-2);
    color: var(--ink);
    font-size: var(--text-xs);
    font-weight: 800;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
  }
  .catalog-filters-open svg { width: 15px; height: 15px; color: var(--accent); }
  .catalog-filters-open-count {
    display: inline-grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--radius-pill);
    background: var(--accent);
    color: #fff;
    font-size: 10px;
  }

  /* Productos en 2 columnas con tarjetas compactas (mismo diseño a escala). */
  .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .product-card { border-radius: 16px; }
  .product-card:hover { transform: none; }
  .product-card-media { margin: 6px 6px 0; border-radius: 11px; }
  .product-card-badge { top: 6px; left: 6px; padding: 3px 7px; font-size: 9px; }
  .product-card-body { gap: 6px; padding: 9px 9px 10px; }
  .product-card-name { min-height: 31px; font-size: 12px; line-height: 1.3; }
  .product-card-meta-row { gap: 2px 8px; }
  .product-card-meta { font-size: 10px; }
  .product-card-meta svg { width: 10px; height: 10px; }
  .product-card-price { font-size: 16px; }
  .product-card-price-old { font-size: 10px; }
  .product-card-savings,
  .product-card-cost { font-size: 9.5px; padding: 2px 6px; }
  .product-card-cost { margin-top: 2px; }
  .product-card-add { padding: 3px 3px 3px 11px; gap: 4px; font-size: 10.5px; }
  .product-card-add-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .product-card-add-icon { width: 28px; height: 28px; flex-shrink: 0; }
  .product-card-add-icon svg { width: 13px; height: 13px; }

  /* Filtros: hoja que sube desde abajo, por encima del menú inferior. */
  .catalog-filters-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 60;
    background: rgba(23, 21, 17, .32);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility 0s linear .25s;
  }
  .catalog-filters-card {
    position: fixed;
    top: auto; /* la regla de escritorio trae top: 24px (sticky) y le ganaba a bottom */
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 61;
    max-height: 86dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 14px calc(18px + env(safe-area-inset-bottom));
    border: 1px solid var(--glass-border);
    border-bottom: none;
    border-radius: 24px 24px 0 0;
    background: linear-gradient(162deg, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, .7) 100%), #eef1fc;
    box-shadow: 0 -18px 40px -20px rgba(23, 21, 17, .45);
    transform: translateY(100%);
    visibility: hidden;
    transition: transform .34s cubic-bezier(.16, .8, .3, 1), visibility 0s linear .34s;
  }
  .filters-open .catalog-filters-scrim { opacity: 1; visibility: visible; transition: opacity .25s ease; }
  .filters-open .catalog-filters-card { transform: translateY(0); visibility: visible; transition: transform .34s cubic-bezier(.16, .8, .3, 1); }
  .filters-open body { overflow: hidden; }
  /* Cabecera de la hoja: título + Limpiar + X, fija arriba al desplazar. */
  .catalog-filters-card .catalog-filters-head {
    position: sticky;
    top: 0;
    z-index: 1;
    gap: 10px;
    margin: 0 -14px;
    padding: 16px 14px 12px;
    background: #f4f6fd;
    border-bottom: 1px solid var(--line);
  }
  .catalog-filters-card .catalog-filters-head::before {
    /* "agarradera" de la hoja */
    content: "";
    position: absolute;
    top: 6px;
    left: 50%;
    width: 38px;
    height: 4px;
    margin-left: -19px;
    border-radius: 2px;
    background: rgba(23, 21, 17, .18);
  }
  .catalog-filters-card .catalog-filters-head-label { flex: 1; }
  .catalog-filters-close { display: grid; width: 32px; height: 32px; }
  .catalog-filters-close svg { width: 14px; height: 14px; }

  /* Panel de Ofertas en celular: pestañas más altas para el dedo (29 → 36
     px, con área táctil de 44 px) y el nombre del producto de la oferta
     destacada en hasta 2 líneas en vez de cortarse con "…". */
  .notif-tab { position: relative; min-height: 36px; padding: 8px 15px; }
  .notif-tab::before { content: ""; position: absolute; inset: -4px 0; }
  .flash-deal-featured-title {
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
  }

  /* Buscador en celular: el panel sube (más espacio cuando abre el teclado)
     y termina antes del menú inferior; sin el aviso de "ESC" (no hay teclado
     físico); las categorías se desvanecen en el borde derecho para indicar
     que se pueden deslizar. */
  .search-overlay { padding: 16px 12px calc(var(--mobile-nav-space) + 12px); }
  .search-panel { max-height: calc(100dvh - var(--mobile-nav-space) - 40px); }
  .search-hint { display: none; }

  /* Encuadre de las fotos del slideshow en celular: en vertical solo se ve
     ~el 29 % central del ancho de cada foto, así que se corre cada una para
     que su producto quede centrado (medido sobre la captura a 390 px). */
  /* Fotos "alejadas": la imagen ocupa el 84 % del alto (no cover) y una
     segunda capa de degradado funde la franja de arriba/abajo con el color
     de fondo de cada slide, así no se nota el borde de la foto. */
  .panel-slide { background-repeat: no-repeat; background-size: 100% 100%, auto 84%; }
  .panel-slide--1 {
    background-position: center, center;
    background-image: linear-gradient(180deg, #14200f 0, #14200f 8%, rgba(20,32,15,0) 17%, rgba(20,32,15,0) 83%, #14200f 92%), url("/images/banners/1072.jpg");
    background-image: linear-gradient(180deg, #14200f 0, #14200f 8%, rgba(20,32,15,0) 17%, rgba(20,32,15,0) 83%, #14200f 92%), image-set(url("/images/banners/1072.webp") type("image/webp"), url("/images/banners/1072.jpg") type("image/jpeg"));
  }
  .panel-slide--2 { /* reloj */
    background-position: center, 61% center;
    background-image: linear-gradient(180deg, #1a120d 0, #1a120d 8%, rgba(26,18,13,0) 17%, rgba(26,18,13,0) 83%, #1a120d 92%), url("/images/banners/549.jpg");
    background-image: linear-gradient(180deg, #1a120d 0, #1a120d 8%, rgba(26,18,13,0) 17%, rgba(26,18,13,0) 83%, #1a120d 92%), image-set(url("/images/banners/549.webp") type("image/webp"), url("/images/banners/549.jpg") type("image/jpeg"));
  }
  .panel-slide--3 { /* botella */
    background-position: center, 47% center;
    background-image: linear-gradient(180deg, #040404 0, #040404 8%, rgba(4,4,4,0) 17%, rgba(4,4,4,0) 83%, #040404 92%), url("/images/banners/471.jpg");
    background-image: linear-gradient(180deg, #040404 0, #040404 8%, rgba(4,4,4,0) 17%, rgba(4,4,4,0) 83%, #040404 92%), image-set(url("/images/banners/471.webp") type("image/webp"), url("/images/banners/471.jpg") type("image/jpeg"));
  }
  .panel-slide--4 { /* morral */
    background-position: center, 37% center;
    background-image: linear-gradient(180deg, #0f1710 0, #0f1710 8%, rgba(15,23,16,0) 17%, rgba(15,23,16,0) 83%, #0f1710 92%), url("/images/banners/650.jpg");
    background-image: linear-gradient(180deg, #0f1710 0, #0f1710 8%, rgba(15,23,16,0) 17%, rgba(15,23,16,0) 83%, #0f1710 92%), image-set(url("/images/banners/650.webp") type("image/webp"), url("/images/banners/650.jpg") type("image/jpeg"));
  }

  /* Texto del hero en celular (ajustes del audit de Impeccable):
     - padding-top 19px: el centro del logo queda alineado con el de los
       controles del slideshow (antes 4,5 px más abajo).
     - logo → título 12 px (antes 8) y título → párrafo 16 px (antes 20):
       logo y título se leen como un bloque, el párrafo como apoyo.
     - "Dejan Huella" en bloque: el título siempre corta "Productos Que /
       Dejan Huella" (antes "…Que Dejan / Huella", con el índigo partido).
     - interlineado del título 1.06 (antes 1.02, muy justo en 2 líneas).
     - párrafo 13,5 px / 1,6 y blanco al 95 %: menos alto sobre la foto y
       más contraste. */
  .hero { padding: 19px 16px 0; }
  .hero-logo { margin-bottom: 12px; }
  .hero-title { max-width: 100%; font-size: clamp(34px, 11vw, 48px); line-height: 1.06; margin-bottom: 16px; }
  .hero-title-accent { display: block; }
  .hero-copy { max-width: 100%; font-size: 13.5px; line-height: 1.6; }
  .panel--dark-slide .hero-copy { color: rgba(255, 255, 255, .95); }
  /* Velo índigo oscuro solo detrás del texto (arriba), desvanecido antes
     de la mitad para no tapar el producto: en fotos claras (botella blanca
     y cielo, neblina) el párrafo bajaba a ~2,5:1 de contraste. */
  .panel-scrim {
    background: linear-gradient(180deg,
      rgba(20, 24, 52, .55) 0%,
      rgba(20, 24, 52, .42) 30%,
      rgba(20, 24, 52, 0) 50%);
  }
  /* Área táctil más grande para la flecha (28 → 44 px) y los puntos, sin
     cambiar cómo se ven. */
  .slide-prev-btn { position: relative; }
  .slide-prev-btn::before { content: ""; position: absolute; inset: -8px; }
  .slide-dot { position: relative; }
  .slide-dot::before { content: ""; position: absolute; inset: -10px -2px; }

  .card--highlight,
  .card--info {
    position: static;
    width: calc(100% - 32px);
    margin: 14px auto 0;
  }
  .card::after { display: none; }
  /* "Encuentra el producto perfecto" no se muestra en celular. */
  .card--highlight { display: none; }
  /* Tarjeta del producto del slide: sin la descripción en celular, menos
     relleno y espacios internos más juntos. */
  .card--info .info-copy { display: none; }
  .card--info { padding: 20px 20px 16px 24px; }
  .card--info .info-head { margin-bottom: 4px; }
  .card--info .info-title { margin-bottom: 4px; }
  /* Sin los indicadores (material, colores, disponibles) en celular. */
  .card--info .info-specs { display: none; }
  .card--info .info-actions { gap: 8px; }

  .card--info { margin-top: 14px; margin-bottom: 24px; }
  /* Marca dentro del hueco inferior izquierdo de la tarjeta del producto,
     igual que en escritorio. En celular el hueco lo dibuja orizon.js
     (initInfoCardMobileClip) a escala de este círculo (48 px, proporcional
     a la tarjeta compacta de celular), con la misma proporción de
     escritorio: ~5 px de aire a la izquierda y apoyado en el borde
     inferior. Va en flujo justo después de la tarjeta (margin-bottom 24px):
     el margen negativo lo sube esos 24 + su alto. */
  .brand-badge {
    position: relative;
    right: auto;
    bottom: auto;
    width: 48px;
    height: 48px;
    margin: calc(-24px - 49px) 0 14px 21px;
  }

  /* Pie del home en flujo, centrado debajo de las tarjetas; si no cabe en
     una fila, el © y los legales se apilan. */
  /* © + legales: una sola fila, al fondo del panel (justo encima del menú).
     El panel pasa a columna flex para poder empujar el pie con margin-top:
     auto. Mismas cápsulas, solo más compactas para que quepan en una fila. */
  .panel { display: flex; flex-direction: column; }
  /* La tarjeta del producto también baja al fondo (con la marca anclada a
     su hueco), justo encima del © y los legales; el texto del hero queda
     arriba y la foto respira en el medio. */
  .card--info { margin-top: auto; }
  .panel-foot {
    position: static;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 6px;
    margin: 0 12px;
    padding: 0 0 12px;
  }
  .panel-foot-copy { height: 30px; padding: 0 12px; gap: 4px; font-size: 10.5px; }
  .slide-legal { padding: 2px; }
  .slide-legal-link { width: 26px; height: 26px; }
  .slide-legal-link svg { width: 13px; height: 13px; }

  /* Sin rail vertical para anclarse: los paneles se centran como el buscador. */
  .rail-panel {
    left: 50% !important;
    /* Centrado en el alto libre que deja la barra inferior. */
    top: calc((100dvh - var(--mobile-nav-space)) / 2) !important;
    max-height: calc(100dvh - var(--mobile-nav-space) - 32px);
    width: calc(100% - 32px);
    max-width: 380px;
    transform: translate(-50%, calc(-50% + 8px)) scale(.97);
  }
  .rail-panel.is-open { transform: translate(-50%, -50%) scale(1); }
  .rail-panel-scrim.is-open { background: rgba(23, 21, 17, .32); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

  /* Mega-menú en celular: hoja casi de pantalla completa con DOS pantallas
     en vertical, apiladas en la misma celda de grid:
       1) lista de categorías (todo el ancho, una debajo de otra);
       2) subcategorías de la elegida, con "← Categorías" para volver.
     .is-sub (lo pone initMegaMenu al tocar una categoría) hace la
     transición vertical: la lista sube y se desvanece, las subcategorías
     entran desde abajo; volver hace lo inverso. */
  .mega-menu {
    left: 16px !important;
    right: 16px;
    top: 16px;
    bottom: calc(var(--mobile-nav-space) + 8px);
    width: auto;
    max-width: none;
    transform: translateY(-8px) scale(.98);
  }
  .mega-menu.is-open { transform: translateY(0) scale(1); }
  .mega-menu-body { display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); overflow: hidden; }
  .mega-menu-cats,
  .mega-menu-panel {
    grid-area: 1 / 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    transition: transform .34s cubic-bezier(.16, .8, .3, 1), opacity .26s ease, visibility 0s linear 0s;
  }
  .mega-menu-cats {
    width: auto;
    border-right: none;
    padding: 8px 10px 12px;
  }
  .mega-cat { padding: 11px 10px; gap: 12px; }
  .mega-cat-icon { width: 32px; height: 32px; }
  .mega-cat-icon svg { width: 15px; height: 15px; }
  .mega-cat-name { font-size: var(--text-sm); }
  /* En celular no hay "vista previa" por hover: ninguna fila se resalta por
     defecto y todas muestran su flecha (indican que llevan a otra pantalla). */
  .mega-cat:not(.mega-cat--selected),
  .mega-cat.is-active:not(.mega-cat--selected) { background: none; }
  .mega-cat-chev,
  .mega-cat.is-active .mega-cat-chev { opacity: 1; transform: none; }

  .mega-menu-panel {
    padding: 0 14px 16px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(40px);
    transition: transform .34s cubic-bezier(.16, .8, .3, 1), opacity .26s ease, visibility 0s linear .34s;
  }
  .mega-menu.is-sub .mega-menu-cats {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-32px);
    transition: transform .34s cubic-bezier(.16, .8, .3, 1), opacity .2s ease, visibility 0s linear .34s;
  }
  .mega-menu.is-sub .mega-menu-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition: transform .34s cubic-bezier(.16, .8, .3, 1), opacity .26s ease .06s, visibility 0s linear 0s;
  }

  /* Cabecera de la pantalla de subcategorías: volver + nombre. */
  /* Cabecera de la pantalla de subcategorías: [volver] [ícono] nombre +
     "N productos · M subcategorías", con una línea fina debajo. Sin fondo
     propio (un blur anidado dentro del vidrio del menú se ve como franja
     blanca): va en el flujo y se desplaza con las subcategorías. */
  .mega-mobile-back {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 10px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
  }
  /* Volver: mismo círculo de vidrio de los demás botones redondos, flecha
     en índigo; un poco más grande que .icon-btn para el dedo. */
  .mega-back-btn {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--glass-border);
    border-radius: 50%;
    background: var(--glass-sheen), var(--glass-tint-2);
    color: var(--accent);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
  }
  .mega-back-btn svg { width: 15px; height: 15px; }
  .mega-back-btn:active { transform: scale(.94); }
  .mega-back-btn { position: relative; }
  .mega-back-btn::before { content: ""; position: absolute; inset: -6px; }
  .mega-back-btn:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 2px; }
  /* Ícono de la categoría (el mismo de su fila) en el índigo de marca. */
  .mega-mobile-icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-soft) 100%);
    color: #fff;
    box-shadow: 0 8px 16px -8px rgba(77, 90, 143, .6);
  }
  .mega-mobile-icon svg { width: 15px; height: 15px; }
  .mega-mobile-heading { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  /* Nombres largos ("Herramientas, Linternas y Llaveros") pasan a una
     segunda línea en vez de cortarse con "…"; máximo 2 líneas. */
  .mega-mobile-title {
    min-width: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    text-wrap: balance;
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1.2;
    color: var(--ink);
  }
  .mega-mobile-meta { font-size: 10.5px; font-weight: 600; color: var(--ink-soft); }
  /* Subcategorías en lista vertical (una por fila). */
  .mega-sub-grid { grid-template-columns: 1fr; gap: 6px; }
  .mega-sub-item { min-height: 46px; }
  /* El pie (populares + confianza) sobra en celular: la lista ya muestra
     todas las categorías. */
  .mega-menu-foot { display: none; }

  /* Footer en celular: marca centrada arriba (logo incluido, antes quedaba a
     la izquierda) y Tienda / Ayuda / Empresa en TRES columnas lado a lado
     (antes una debajo de otra: ~620 px de footer). */
  /* Menos aire vacío entre el contenido y el footer (antes ~135 px). */
  .stage--catalog { padding-bottom: 36px; }
  /* Margen lateral parejo y corto en todas las vistas internas (antes
     20px izquierda / 8px derecha). */
  .stage--catalog { padding-left: 12px; padding-right: 12px; }

  /* Catálogo en vista de lista: fila compacta (miniatura cuadrada de
     104px con la foto completa + datos al lado). Antes la imagen tomaba
     media tarjeta, recortada, y cada fila medía ~225px. */
  .catalog-grid.is-list-view { gap: 8px; }
  .catalog-grid.is-list-view .product-card { flex-direction: row; align-items: flex-start; }
  .catalog-grid.is-list-view .product-card-media { width: 104px; height: 104px; flex: 0 0 104px; aspect-ratio: 1; margin: 10px 0 10px 10px; }
  .catalog-grid.is-list-view .product-card-media img { object-fit: contain; }
  .catalog-grid.is-list-view .product-card-body { flex: 1 1 auto; min-width: 0; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 6px; padding: 10px 12px 12px 12px; }
  .catalog-grid.is-list-view .product-card-name { flex: 0 0 auto; min-height: 0; font-size: 14px; -webkit-line-clamp: 2; }
  .catalog-grid.is-list-view .product-card-meta-row { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 2px 10px; }
  .catalog-grid.is-list-view .product-card-price-block { margin-top: 0; }
  .catalog-grid.is-list-view .product-card-add { width: 100%; margin-top: 2px; }

  /* Estudio de marcación: hoja inferior. Cabecera y botones fijos, solo
     el cuerpo hace scroll (antes todo el panel scrolleaba y "Guardar"
     quedaba cortado bajo el borde de la pantalla). */
  .brand-studio-overlay { align-items: flex-end; padding: 0; }
  .brand-studio-panel { max-height: calc(100dvh - 16px); overflow: hidden; border-radius: 24px 24px 0 0; transform: translateY(24px); }
  .brand-studio-head { flex-shrink: 0; padding: 16px 16px 10px; }
  .brand-studio-head h3 { font-size: 17px; }
  .brand-studio-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; gap: 14px; padding: 0 16px 14px; }
  .brand-studio-foot { flex-shrink: 0; flex-direction: row; gap: 8px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); }
  .brand-studio-foot .rail-panel-cta { width: auto; min-height: 44px; }
  .brand-studio-foot .rail-panel-cta--ghost { flex: 0 0 auto; padding: 0 16px; }
  .brand-studio-foot #brand-studio-save { flex: 1 1 auto; justify-content: center; }
  .cart-page { padding-bottom: 8px; }
  /* Tienda y Empresa en una fila; Ayuda baja a la fila siguiente. */
  .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; }
  .footer-col[aria-label="Tienda"] { grid-column: 1; grid-row: 2; }
  .footer-col[aria-label="Empresa"] { grid-column: 2; grid-row: 2; }
  .footer-col[aria-label="Ayuda"] { grid-column: 1; grid-row: 3; }
  .footer-brand { grid-column: 1 / -1; text-align: center; }
  .footer-brand-logo { margin: 0 auto 8px; }
  .footer-brand-row { justify-content: center; }
  .footer-col { align-items: flex-start; text-align: left; }
  .footer-col h4 { margin-bottom: 6px; }
  .footer-col a { padding: 4px 0; font-size: 11.5px; line-height: 1.3; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .footer-trust { justify-content: center; }

  .pd-specs-row { grid-template-columns: 1fr; gap: 4px; }
}

@media (max-width: 420px) {
  .hero-title { font-size: 32px; }
}

/* ==========================================================================
   Aviso de cookies — mismo vidrio de las tarjetas del home (.card / .card--info):
   tinte blanco diluido + brillo diagonal + blur/saturación, borde claro.
   Botón principal = colores de "Agregar al cotizador"; ambos botones con
   el mismo tamaño (aceptar y rechazar igual de fáciles).
   ========================================================================== */
/* Arriba al centro (no abajo a la derecha): abajo caía justo encima de la
   tarjeta del producto del home, tapando "Ver relacionados" y los íconos
   legales — los clics los recibía el aviso. Arriba solo cubre el titular. */
.cookie-consent {
  position: fixed;
  z-index: 1080;
  top: clamp(16px, 2.4vw, 28px);
  left: max(16px, calc(50% - 200px));
  width: min(400px, calc(100vw - 32px));
  padding: 22px 22px 20px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-card);
  background:
    linear-gradient(162deg, rgba(255, 255, 255, .78) 0%, rgba(255, 255, 255, .18) 42%, rgba(255, 255, 255, .4) 100%),
    rgba(238, 241, 252, .55);
  backdrop-filter: blur(30px) saturate(190%);
  -webkit-backdrop-filter: blur(30px) saturate(190%);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, .7);
  color: var(--ink);
  opacity: 0;
  translate: 0 -18px; /* entra deslizándose desde arriba */
  transition: opacity .26s ease, translate .26s cubic-bezier(.2, .8, .2, 1);
}
.cookie-consent.is-visible { opacity: 1; translate: 0 0; }
.cookie-consent[hidden] { display: none; }

.cookie-consent-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.cookie-consent-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-soft) 100%);
  color: #fff;
  box-shadow: 0 8px 16px -8px rgba(77, 90, 143, .6);
}
.cookie-consent-icon svg { width: 19px; height: 19px; }
.cookie-consent-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.2;
}
.cookie-consent-text { margin: 0 0 16px; color: var(--ink-soft); font-size: var(--text-sm); line-height: 1.6; }
.cookie-consent-text strong { color: var(--ink); font-weight: 700; }
.cookie-consent-policy { display: inline-block; margin-top: 2px; color: var(--accent); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.cookie-consent-policy:hover { color: var(--ink); }

.cookie-consent-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cookie-consent-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 16px;
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 800;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease;
}
.cookie-consent-btn svg { width: 15px; height: 15px; }
.cookie-consent-btn--ghost {
  border: 1px solid rgba(77, 90, 143, .28);
  background: rgba(255, 255, 255, .55);
  color: var(--accent);
}
.cookie-consent-btn--ghost:hover { background: #fff; color: var(--ink); }
.cookie-consent-btn--primary {
  border: none;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-soft) 100%);
  color: #fff;
  box-shadow: 0 8px 16px -8px rgba(77, 90, 143, .6);
}
.cookie-consent-btn--primary:hover { transform: translateY(-1px); box-shadow: 0 12px 20px -10px rgba(77, 90, 143, .7); }
.cookie-consent-btn:focus-visible,
.cookie-consent-policy:focus-visible { outline: 3px solid var(--accent-soft); outline-offset: 2px; }

/* Enlace "Cookies" del footer: botón con la misma pinta que Privacidad/Términos. */
.footer-cookie-link { padding: 0; border: none; background: none; color: rgba(255, 255, 255, .45); font: inherit; cursor: pointer; }
.footer-cookie-link:hover { color: #fff; }

/* Celular: arriba, de lado a lado y más compacto. */
@media (max-width: 760px) {
  .cookie-consent {
    top: max(12px, env(safe-area-inset-top));
    right: 12px;
    left: 12px;
    width: auto;
    padding: 14px 14px 12px;
  }
  .cookie-consent-head { gap: 10px; margin-bottom: 6px; }
  .cookie-consent-icon { width: 32px; height: 32px; }
  .cookie-consent-icon svg { width: 16px; height: 16px; }
  .cookie-consent-title { font-size: 15px; }
  .cookie-consent-text { margin-bottom: 12px; font-size: 12px; line-height: 1.5; }
  .cookie-consent-btn { min-height: 38px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .cookie-consent { transition: none; translate: none; }
}

/* ==========================================================================
   Página legal (/page/privacidad): cabecera índigo con marcas de agua del
   isotipo (mismo lenguaje del banner del catálogo) + índice glass fijo a la
   izquierda + documento en panel blanco translúcido (como .quote-list-panel).
   ========================================================================== */
.legal-page { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 0 72px; color: var(--ink); }
.legal-back {
  display: inline-flex; align-items: center; gap: 8px; min-height: 42px; margin: 0 0 18px; padding: 0 18px 0 14px;
  border: 1px solid rgba(255, 255, 255, .86); border-radius: var(--radius-pill); background: #fff; color: var(--accent);
  box-shadow: var(--shadow-sm); font-size: var(--text-xs); font-weight: 800; text-decoration: none;
  transition: color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.legal-back svg { width: 16px; height: 16px; }
.legal-back:hover { color: var(--ink); box-shadow: var(--shadow-md); transform: translateX(-2px); }

.legal-hero {
  position: relative; overflow: hidden; isolation: isolate;
  margin: 0 0 24px; padding: clamp(20px, 2.4vw, 30px) clamp(22px, 3.6vw, 44px);
  border-radius: 28px;
  background: radial-gradient(ellipse at 78% 20%, rgba(174, 184, 230, .45) 0%, rgba(174, 184, 230, 0) 55%), linear-gradient(135deg, #3f4d86 0%, var(--accent) 45%, var(--accent-soft) 100%);
  color: #fff; box-shadow: 0 22px 44px -26px rgba(41, 52, 102, .75);
}
.legal-hero-watermark { position: absolute; z-index: -1; width: auto; opacity: .08; pointer-events: none; }
.legal-hero-watermark--a { height: 190%; right: -3%; bottom: -80%; transform: rotate(-14deg); }
.legal-hero-watermark--b { height: 90%; right: 24%; top: -45%; transform: rotate(22deg); }
.legal-hero-eyebrow {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 10px; padding: 4px 11px;
  border: 1px solid rgba(255, 255, 255, .3); border-radius: var(--radius-pill); background: rgba(255, 255, 255, .14);
  font-size: var(--text-xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.legal-hero-eyebrow svg { width: 13px; height: 13px; color: #aeb8e6; }
.legal-hero h1 { max-width: 32ch; margin: 0 0 8px; font-family: var(--font-display); font-size: clamp(24px, 2.7vw, 34px); font-weight: 800; line-height: 1.1; letter-spacing: -.03em; }
.legal-hero p { max-width: 80ch; margin: 0 0 14px; color: rgba(255, 255, 255, .88); font-size: var(--text-base); line-height: 1.55; }
.legal-hero-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.legal-hero-meta span {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, .3); border-radius: var(--radius-pill); background: rgba(255, 255, 255, .12);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font-size: var(--text-xs); font-weight: 700;
}
.legal-hero-meta svg { width: 13px; height: 13px; color: #aeb8e6; }

.legal-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); align-items: start; gap: 22px; }
.legal-toc {
  position: sticky; top: 20px; padding: 20px 18px;
  border: 1px solid var(--glass-border); border-radius: var(--radius-card);
  background: var(--glass-sheen), var(--glass-tint-2);
  -webkit-backdrop-filter: var(--glass-blur-md); backdrop-filter: var(--glass-blur-md);
  box-shadow: var(--shadow-sm);
}
.legal-toc-title { margin: 0 0 10px; color: var(--ink-soft); font-size: var(--text-xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.legal-toc ol { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.legal-toc li { counter-increment: toc; }
.legal-toc a {
  display: flex; align-items: baseline; gap: 8px; padding: 7px 10px; border-radius: 10px;
  color: var(--ink); font-size: var(--text-sm); font-weight: 600; line-height: 1.35; text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}
.legal-toc a::before { content: counter(toc); min-width: 14px; color: var(--accent-soft); font-weight: 800; }
.legal-toc a:hover { background: rgba(77, 90, 143, .1); color: var(--accent); }

.legal-doc {
  min-width: 0; padding: clamp(22px, 3vw, 40px);
  border: 1px solid rgba(255, 255, 255, .82); border-radius: 24px; background: rgba(255, 255, 255, .8); box-shadow: var(--shadow-sm);
}
.legal-section { padding: 6px 0 26px; scroll-margin-top: 20px; }
.legal-section + .legal-section { padding-top: 26px; border-top: 1px solid var(--line); }
.legal-section:last-child { padding-bottom: 4px; }
.legal-section h2 { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; font-family: var(--font-display); font-size: clamp(19px, 2vw, 23px); font-weight: 800; letter-spacing: -.02em; }
.legal-num {
  display: grid; place-items: center; flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-soft) 100%); color: #fff; font-size: 14px;
  box-shadow: 0 8px 16px -8px rgba(77, 90, 143, .6);
}
.legal-section p, .legal-section li { color: rgba(23, 21, 17, .78); font-size: 15px; line-height: 1.7; }
.legal-section p { margin: 0 0 12px; max-width: 75ch; }
.legal-section ul { margin: 0 0 12px; padding-left: 20px; }
.legal-section li { margin-bottom: 6px; }
.legal-section li::marker { color: var(--accent-soft); }
.legal-section strong { color: var(--ink); }
.legal-section a { color: var(--accent); font-weight: 700; text-underline-offset: 2px; }
.legal-section a:hover { color: var(--ink); }

.legal-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin: 4px 0 16px; }
.legal-facts div { padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: #f6f8fe; }
.legal-facts dt { margin-bottom: 4px; color: var(--ink-soft); font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.legal-facts dd { margin: 0; color: var(--ink); font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }
/* Dato del responsable sin confirmar: se ve a propósito, para no publicarlo así. */
.legal-pending { display: inline-block; padding: 1px 8px; border: 1px dashed #c58a00; border-radius: 6px; background: #fff4d6; color: #7a5200; font-size: 13px; font-weight: 700; }

.legal-section .legal-rights { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; padding: 0; list-style: none; }
.legal-rights li { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: #f6f8fe; }
.legal-rights svg { flex-shrink: 0; width: 18px; height: 18px; margin-top: 3px; color: var(--accent); }

.legal-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.legal-step { padding: 18px; border: 1px solid rgba(77, 90, 143, .16); border-radius: 18px; background: linear-gradient(160deg, #f3f5fd 0%, #e9eefb 100%); }
.legal-step h3 { margin: 10px 0 6px; font-family: var(--font-display); font-size: 16px; font-weight: 800; }
.legal-section .legal-step p { margin: 0; font-size: 14px; }
.legal-step-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #fff; color: var(--accent); box-shadow: var(--shadow-sm); }
.legal-step-icon svg { width: 17px; height: 17px; }
.legal-steps--4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin-bottom: 14px; }
.legal-steps--3 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-bottom: 14px; }
/* Tarjeta de tiempo de despacho: la cifra manda, en índigo de marca. */
.legal-section .legal-step p.legal-step-figure { margin: 12px 0 2px; font-family: var(--font-display); font-size: 34px; font-weight: 800; line-height: 1; letter-spacing: -.03em; color: var(--accent); }
.legal-step-figure span { font-size: 14px; font-weight: 700; letter-spacing: 0; color: var(--ink-soft); }
.legal-step--time h3 { margin-top: 6px; }
.legal-section .legal-table td strong { color: var(--ink); }
/* Aviso destacado dentro de una sección (p. ej. sin retracto en personalizados). */
.legal-callout { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border: 1px solid rgba(77, 90, 143, .22); border-left: 4px solid var(--accent); border-radius: 14px; background: #eef1fc; }
.legal-callout svg { flex-shrink: 0; width: 18px; height: 18px; margin-top: 4px; color: var(--accent); }
.legal-section .legal-callout p { margin: 0; }

.legal-table-wrap { margin: 4px 0 14px; overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; }
.legal-table { width: 100%; border-collapse: collapse; font-size: 14px; }
/* Solo las tablas de muchas columnas (cookies) necesitan ancho mínimo + scroll. */
.legal-table--wide { min-width: 560px; }
.legal-table th { padding: 10px 14px; background: #f1f4fd; color: var(--ink-soft); font-size: var(--text-xs); font-weight: 800; letter-spacing: .05em; text-align: left; text-transform: uppercase; }
.legal-table td { padding: 12px 14px; border-top: 1px solid var(--line); color: rgba(23, 21, 17, .78); line-height: 1.5; vertical-align: top; }
.legal-table code { padding: 2px 6px; border-radius: 6px; background: rgba(77, 90, 143, .1); color: var(--accent); font-size: 13px; }
.legal-tag { display: inline-block; padding: 2px 9px; border-radius: var(--radius-pill); background: rgba(34, 160, 90, .12); color: #17733f; font-size: 12px; font-weight: 800; }

.legal-cookie-btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 42px; margin: 2px 0 14px; padding: 0 18px;
  border: none; border-radius: var(--radius-pill); background: linear-gradient(135deg, var(--accent) 0%, var(--accent-soft) 100%);
  color: #fff; font-size: var(--text-sm); font-weight: 800; cursor: pointer; box-shadow: 0 8px 16px -8px rgba(77, 90, 143, .6);
  transition: transform .18s ease, box-shadow .18s ease;
}
.legal-cookie-btn svg { width: 16px; height: 16px; }
.legal-cookie-btn:hover { transform: translateY(-1px); box-shadow: 0 12px 20px -10px rgba(77, 90, 143, .7); }
.legal-section .legal-note { color: var(--ink-soft); font-size: 13px; }

@media (max-width: 991.98px) {
  .legal-layout { grid-template-columns: 1fr; }
  .legal-toc { position: static; }
  .legal-toc ol { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
}
@media (max-width: 560px) {
  .legal-hero { border-radius: 22px; }
  .legal-doc { border-radius: 20px; }
  .legal-section p, .legal-section li { font-size: 14px; }
}