/* =========================================================
   chrome.css — estilos del CHROME comun (extraidos de
   base.css en la fase 5): header + mega-nav, search del
   header, modales loc/auth/moneda, cats-drawer, footers,
   bottom-nav, toast, wa-float, scroll-progress, promo-bar.
   El markup canonico vive en scripts/modules/chrome.js.
   ========================================================= */

/* =========================================================
   SURFACE CARDS — molde universal con specificity 0.
   Compu.uy es brutalist (esquinas rectas). El :where() permite que
   cualquier .card-específica con su propia rule sobrescriba sin
   conflicto — no hace falta !important.
   Cards dark intencionales (.test-summary, etc.) declaran su
   `background` propio y se respeta.
   ========================================================= */
:where(
  .p-card,
  .cat-tile-lg,
  .cat-chip,
  .persona-tile,
  .brand-chip,
  .test-card,
  .test-summary,
  .trust__item,
  .fb-together,
  .faq-item,
  .service-card,
  .newsletter__card,
  .builder-banner__card,
  .reboot-module__card,
  .deals-head,
  .banner--reboot-mini,
  .banner--builder
) {
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: 0;
  color: var(--fg);
  text-decoration: none;
  transition:
    transform var(--t-base) var(--ease-out),
    border-color var(--t-base) var(--ease-out),
    box-shadow var(--t-base) var(--ease-out);
}
/* =========================================================
   SCROLL PROGRESS BAR — feedback de posición
   ========================================================= */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: transparent;
  z-index: calc(var(--z-sticky) + 10);
  pointer-events: none;
}
.scroll-progress__bar {
  height: 100%;
  width: 100%;
  background: var(--gradient-progress);
  /* transform:scaleX (acelerado por GPU) en lugar de width (reflow).
     JS setea bar.style.transform = `scaleX(${pct})` con pct ∈ [0,1]. */
  transform: scaleX(0);
  transform-origin: 0 0;
  transition: transform 80ms linear;
  will-change: transform;
}
/* Promo bar oculta por default (decisión: header limpio).
   Toggle desde el font-tester widget agrega data-promo-bar="on" al
   <html> para mostrarla cuando se quiera ver. */
.promo-bar { display: none; }
[data-promo-bar="on"] .promo-bar { display: block; }
.promo-bar {
  background: var(--c-blue-950);
  color: var(--c-white);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0;
  padding: 8px 0;
  position: relative;
  z-index: calc(var(--z-sticky) + 5);
  overflow: hidden;
}
.promo-bar b { font-weight: 700; color: var(--c-white); }
.promo-bar::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    color-mix(in srgb, var(--c-cyan-400) 18%, transparent) 50%,
    transparent 100%);
  pointer-events: none;
  animation: promo-shine 8s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
.promo-bar::before { animation: none; }
}
.promo-bar__inner {
  max-width: var(--max-content);
  margin: 0 auto;
  padding: 0 var(--app-px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}
.promo-bar__msg {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--c-white-80);
}
.promo-bar__msg svg { color: var(--c-cyan-400); flex-shrink: 0; }
.promo-bar__msg b { color: var(--c-white); font-weight: 800; }
.promo-bar__sep {
  color: var(--c-white-45);
  font-size: 0.8rem;
}
@media (max-width: 760px) {
.promo-bar__sep { display: none; }
.promo-bar__inner { gap: var(--sp-2); font-size: 0.6rem; }
}
/* ═══ HEADER CHROME DARK ═══════════════════════════════════════
   Patrón premium tech retail (B&H, Newegg, Apple): chrome oscuro
   contrastando con contenido claro. Da identidad al header sin
   lavarse en blanco, separa visualmente "navegación" de "compra".
   El chrome es SIEMPRE dark blue (en light y dark theme).
   ═══════════════════════════════════════════════════════════════ */
.shop-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--c-blue-900);
  color: var(--c-white);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  /* 220→140ms: bg + shadow son cheap (compositing) pero sincronizar
     con padding 120ms hace que la compactación se sienta unificada. */
  transition: background 140ms var(--ease-out), box-shadow 140ms var(--ease-out);
}
.shop-header.is-compact {
  background: var(--c-blue-950);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}
/* 4 columnas: brand · location · search (1fr — toma todo el resto) · actions
   Resultado: search bar ancha + location accesible al lado. */
.shop-header__top {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 24px;
  row-gap: 0;
  padding-block: 18px;
  padding-inline: var(--app-px);
  /* 220→120ms: animar padding dispara reflow del header + todo el
     contenido debajo. Acortar a 120ms hace que el scroll no se
     "atasque" durante el cambio compact/no-compact. */
  transition: padding 120ms var(--ease-out);
}
@media (max-width: 1024px) {
/* Tablets: location se va al actions group para ahorrar ancho */
.shop-header__top { grid-template-columns: auto minmax(0, 1fr) auto; }
.shop-header__top > .act-loc { display: none; }
}
/* Compactación suave: solo afina el padding; los elementos NO encogen,
   así el header retiene presencia al scrollear (antes se aplastaba). */
.shop-header.is-compact .shop-header__top { padding-block: 14px; }
/* Brand — texto blanco fijo (chrome dark intencional) */
.brand {
  display: inline-flex;
  align-items: baseline;
  gap: var(--sp-2);
  font-family: 'Montserrat', system-ui, sans-serif;
  font-weight: 900;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  color: var(--c-white);
  text-decoration: none;
  flex-shrink: 0;
}
.brand-mark { font-size: 1.4rem; }
.brand-dot { color: var(--c-cyan-400); }
.brand-sep { color: rgba(255, 255, 255, 0.4); font-weight: 400; padding: 0 var(--sp-1); }
.brand-tag {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: rgba(255, 255, 255, 0.75);
  text-transform: uppercase;
}
@media (max-width: 1024px) {
.brand-mark { font-size: 1.15rem; }
}
/* ═══ SEARCH — Protagonista absoluta del header ═══════════════
   60px de alto, fluye full-width entre brand y acciones, scope
   selector compacto a la izquierda, botón "BUSCAR" en azul Compu
   sólido (var(--c-blue-600)) — el color brand puro hace que se sienta
   "la herramienta principal" sin pelearse con el magenta del
   carrito ni el verde de WhatsApp.
   ═══════════════════════════════════════════════════════════ */
.search-wrap {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
}
/* ═══════════════════════════════════════════════════════════
   CATEGORÍAS TRIGGER — pegado al search bar como left segment.
   Estilo Amazon "All ▾" / Linear command bar. Hover (con delay)
   abre el dropdown grande de categorías.
   ═══════════════════════════════════════════════════════════ */
.search-wrap > form.search { flex: 1; min-width: 0; }
.search-wrap {
  flex-direction: row;
  gap: 0;
  align-items: stretch;
}
.search-wrap > .suggest {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
}
.cats-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* align-self:stretch en lugar de height fijo: el trigger siempre
     mide exactamente lo mismo que el search, sin importar si es
     compact o no — elimina la ilusión de alturas distintas. */
  align-self: stretch;
  padding: 0 14px;
  background: var(--c-white);
  color: var(--c-blue-900);
  border: 0;
  border-right: 1px solid rgba(10, 27, 110, 0.12);
  border-radius: var(--rad-sm) 0 0 var(--rad-sm);
  font-family: var(--font-display);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.cats-trigger:hover,
.cats-trigger[aria-expanded="true"] {
  background: var(--accent-tint);
  color: var(--accent-text);
}
.cats-trigger__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.cats-trigger__label { line-height: 1; }
.cats-trigger__chev {
  width: 12px;
  height: 12px;
  opacity: 0.5;
  transition: transform var(--t-fast) var(--ease-out), opacity var(--t-fast) var(--ease-out);
}
.cats-trigger[aria-expanded="true"] .cats-trigger__chev {
  transform: rotate(180deg);
  opacity: 1;
}
/* Search a la derecha del trigger — sin border-radius izquierdo
   para que se sienta UN command bar único. */
.search-wrap > form.search { border-radius: 0 var(--rad-sm) var(--rad-sm) 0; }
@media (max-width: 760px) {
.cats-trigger__label { display: none; }
.cats-trigger__chev { display: none; }
.cats-trigger { padding: 0 10px; }
}
/* Search bar blanca dentro del header dark — alto contraste,
   se siente "esto es donde escribís". */
.search {
  display: flex;
  align-items: stretch;
  height: 42px;
  background: var(--c-white);
  border: 0;
  color: var(--c-blue-900);
  width: 100%;
  border-radius: var(--rad-sm);
  overflow: hidden;
  transition: box-shadow var(--t-fast) var(--ease-out);
}
.search:hover {
  box-shadow: 0 0 0 2px var(--c-cyan-400);
}
.search:focus-within {
  box-shadow: 0 0 0 2px var(--c-cyan-400);
}
/* IMPORTANTE: 16px en mobile evita zoom auto en iOS Safari
   (cualquier input <16px dispara pinch-zoom al focus). */
.search__input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 0 14px;
  color: var(--c-blue-900);
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: 500;
  outline: none;
  letter-spacing: -0.005em;
}
@media (min-width: 761px) {
.search__input { font-size: 0.92rem; }
}
.search__input::placeholder { color: rgba(10, 27, 110, 0.45); font-weight: 400; }
/* Botón "BUSCAR" — azul Compu sólido (var(--c-blue-600)). El magenta queda
   reservado al carrito; el azul aquí dice "herramienta" sin competir. */
.search__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 18px;
  background: var(--c-mag-500);
  color: var(--c-white);
  border: 0;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--t-fast) var(--ease-out);
}
.search__btn:hover { background: var(--c-mag-600); }
.search__btn:active { background: var(--c-mag-700); }
.search__btn-icon { width: 16px; height: 16px; color: currentColor; flex-shrink: 0; }
.search__btn-label { line-height: 1; }
@media (max-width: 760px) {
.search__btn-label { display: none; }
.search__btn { padding: 0 12px; }
.search { height: 40px; }
}
/* ==== Right actions: theme, currency, account, cart ==== */
.shop-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
/* Icon-only buttons sobre chrome dark — compactos */
.act-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, 0.78);
  cursor: pointer;
  border-radius: var(--rad-sm);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out), opacity var(--t-fast) var(--ease-out);
}
.act-icon:hover {
  color: var(--c-cyan-400);
  background: rgba(255, 255, 255, 0.06);
}
.act-icon svg { display: block; width: 18px; height: 18px; }
/* Variant subtle — para el theme toggle: tenue por default,
   full visible en hover. Se quita del foco visual sin esconderlo. */
.act-icon--subtle {
  display: none;
}
/* Location pill — estilo Amazon "Enviar a [zona]". Muestra hint
   cuando no hay zona configurada, o la zona elegida después.
   Click → modal para configurar. */
.act-loc {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  height: 36px;
  position: relative;
  background: transparent;
  color: var(--c-white-65);
  border: 0;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
}
.act-loc:hover {
  color: var(--c-white);
  background: rgba(255,255,255,0.06);
}
.act-loc svg { color: var(--c-cyan-400); flex-shrink: 0; }
/* Ancho fijo: el hint rota entre frases de distinto largo; sin esto el
   selector cambiaba de ancho y movía la barra de búsqueda en cada carga. */
.act-loc__body { display: flex; flex-direction: column; gap: 1px; line-height: 1.1; text-align: left; width: 166px; }
.act-loc__hint, .act-loc__zone { line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.act-loc__zone {
  font-size: 0.74rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--c-white);
  font-weight: 700;
}
.act-loc__hint::before, .act-loc__zone::before {
  content: 'Enviar a';
  display: block;
  font-size: 0.56rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--c-white-45);
  margin-bottom: 2px;
}
@media (max-width: 1024px) {
.act-loc__body { display: none; }
}
/* ═══ MODAL — overlay genérico para location/auth/etc ═══ */
.modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal); /* FIX: antes 200, quedaba bajo el cart-drawer */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
}
.modal[hidden] { display: none; }
.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 27, 110, 0.55);
  backdrop-filter: blur(2px);
  animation: modal-fade-in 180ms var(--ease-out);
}
.modal__panel {
  position: relative;
  width: 100%;
  max-width: 460px;
  background: var(--bg-deep);
  color: var(--fg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-xl);
  padding: var(--sp-6);
  animation: modal-pop-in 220ms var(--ease-out);
}
.modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-2);
}
.modal__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  color: var(--fg);
  margin: 0;
}
.modal__close {
  background: transparent;
  border: 0;
  color: var(--fg-mute);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  transition: color var(--t-fast) var(--ease-out);
}
.modal__close:hover { color: var(--fg); }
.modal__lead {
  color: var(--fg-mute);
  font-size: 0.88rem;
  line-height: 1.4;
  margin: 0 0 var(--sp-4);
}
.modal__form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
/* Radio group horizontal: 2 cards lado a lado, click cambia y muestra
   un check visual con border accent. Brutalist square corners. */
.modal__radio-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2);
  border: 0;
  padding: 0;
  margin: 0;
}
.modal__radio { cursor: pointer; }
.modal__radio input { position: absolute; opacity: 0; pointer-events: none; }
.modal__radio-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 12px;
  border: 1.5px solid var(--line);
  background: var(--bg-subtle);
  transition: border-color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
}
.modal__radio:hover .modal__radio-card { border-color: var(--accent-text); }
.modal__radio input:checked + .modal__radio-card {
  border-color: var(--accent-text);
  background: var(--accent-tint);
}
.modal__radio input:focus-visible + .modal__radio-card {
  outline: 2px solid var(--accent-text);
  outline-offset: 2px;
}
.modal__radio-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  color: var(--fg);
  letter-spacing: -0.01em;
}
.modal__radio-sub {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.modal__label {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* hidden attribute debe ganar sobre display: flex del .modal__label.
   Específico para no usar !important global. */
.modal__label[hidden] { display: none; }
.modal__label > span {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.modal__form input,
.modal__form select {
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--fg);
  font-family: var(--font-display);
  font-size: 0.92rem;
  outline: none;
  transition: border-color var(--t-fast) var(--ease-out);
}
.modal__form input:focus,
.modal__form select:focus { border-color: var(--accent-text); }
.modal__actions {
  display: flex;
  gap: var(--sp-2);
  justify-content: flex-end;
  margin-top: var(--sp-2);
}
/* User dropdown (cuando logueado) — pequeño menu con cerrar sesión */
/* Ancla del desplegable: sin esto el menú se posicionaba contra el header
   entero y salía en la otra punta de la pantalla. */
.act-user-wrap { position: relative; display: inline-flex; }

.act-user__menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 200px;
  background: var(--bg-deep);
  color: var(--fg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  padding: 4px;
  z-index: calc(var(--z-sticky) + 10);
  display: none;
}
.act-user[data-open="true"] + .act-user__menu { display: block; }
.act-user__menu-item {
  display: block;
  width: 100%;
  padding: 9px 12px;
  background: transparent;
  border: 0;
  text-align: left;
  text-decoration: none;
  color: var(--fg);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease-out);
}
.act-user__menu-item:hover { background: var(--accent-tint); }
/* User link: ícono + label "Ingresar" / "Mi cuenta". Ghost style
   (no llamativo como el cart magenta). Mismo height/padding que
   los demás controles del header para alineación visual. */
.act-user {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  height: 36px;
  background: transparent;
  color: var(--c-white-65);
  border: 0;
  text-decoration: none;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
}
.act-user:hover {
  color: var(--c-white);
  background: rgba(255,255,255,0.06);
}
.act-user svg { display: block; width: 18px; height: 18px; flex-shrink: 0; }
.act-user__label { line-height: 1; word-spacing: -0.18em; }
/* .act-link va dentro del header chrome (dark siempre, hasta en light
   theme). Por eso usa colores white-* explícitos, no fg-* tokens
   theme-aware (que serían invisibles sobre dark). */
.act-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  color: var(--c-white-65);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid transparent;
  text-decoration: none;
  transition: border-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.act-link:hover { border-color: rgba(255,255,255,0.2); color: var(--c-white); }
.act-link__icon {
  font-family: var(--font-display);
  font-weight: 900;
  color: var(--c-cyan-400);
  font-size: 1rem;
  letter-spacing: 0;
}
/* Toggle moneda — flat, sin borde, mismo lenguaje que act-icon */
.act-ccy-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  height: 36px;
  background: transparent;
  color: var(--c-white-65);
  border: 0;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  cursor: pointer;
  overflow: hidden;
  transition: color var(--t-fast) var(--ease-out),
              background var(--t-fast) var(--ease-out);
}
.act-ccy-toggle:hover {
  color: var(--c-white);
  background: rgba(255,255,255,0.06);
}
.act-ccy-toggle__label { display: block; line-height: 1; }
.act-ccy-toggle__label.is-flipping {
  animation: ccy-flip 260ms var(--ease-snap);
}
/* Tooltip flotante del toggle moneda */
.ccy-tip {
  position: fixed;
  z-index: var(--z-toast);
  transform: translateX(-50%) translateY(-100%);
  background: var(--bg-nav);
  border: 1px solid var(--border);
  color: var(--fg-mute);
  font-size: 0.65rem;
  letter-spacing: 0.03em;
  padding: 5px 10px;
  pointer-events: none;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 120ms;
}
.ccy-tip.is-visible { opacity: 1; }
.act-wa {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px 0 6px;
  height: 36px;
  background: var(--wa-green);
  color: var(--c-white);
  border: 1px solid var(--wa-green);
  border-radius: var(--rad-sm);
  text-decoration: none;
  flex-shrink: 0;
  transition: background var(--t-fast) var(--ease-out);
}
.act-wa__body { font-size: 0.62rem; }
.act-wa:hover { background: #1ebe58; transform: translateY(-1px); }
.act-wa__icon {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--c-white);
  color: var(--wa-green);
  border-radius: 50%;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 0.78rem;
  letter-spacing: 0;
  flex-shrink: 0;
}
.act-wa__body { display: flex; flex-direction: column; gap: 0; line-height: 1.1; }
.act-wa__label {
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-white);
}
.act-wa__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.82rem;
  letter-spacing: -0.005em;
  color: var(--c-white);
}
@media (max-width: 1024px) {
.act-wa__body { display: none; }
.act-wa { padding: 6px 8px; }
}
/* Wrap del cart para anclar el tooltip de subtotal en hover */
.act-cart-wrap { position: relative; margin-left: var(--sp-2); }
.act-cart {
  position: relative;
  background: var(--c-blue-600);
  color: var(--c-white);
  padding: 0 12px;
  height: 42px;
  border: 0;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  border-radius: var(--rad-sm);
  text-decoration: none;
  flex-shrink: 0;
  transition: background var(--t-fast) var(--ease-out);
}
.act-cart:hover { background: var(--c-blue-700); }
/* Tooltip subtotal del cart: aparece en hover, dark + brutalist arrow */
.act-cart__tip {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: calc(var(--z-sticky) + 10);
  padding: 8px 12px;
  background: var(--c-blue-950);
  color: var(--c-white);
  border: 1px solid var(--c-cyan-400);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out);
  box-shadow: var(--shadow-lg);
}
.act-cart__tip::before {
  content: '';
  position: absolute;
  top: -5px;
  right: 14px;
  width: 8px;
  height: 8px;
  background: var(--c-blue-950);
  border-top: 1px solid var(--c-cyan-400);
  border-left: 1px solid var(--c-cyan-400);
  transform: rotate(45deg);
}
.act-cart-wrap:hover .act-cart__tip,
.act-cart:focus-visible + .act-cart__tip {
  opacity: 1;
  transform: translateY(0);
}
.act-cart__tip-amount { color: var(--c-cyan-400); font-weight: 800; }
.act-cart svg { width: 18px; height: 18px; }
.act-cart svg { flex-shrink: 0; }
.act-cart__label { line-height: 1; }
@media (max-width: 1024px) {
.act-cart__label { display: none; }
.act-cart { padding: 0 12px; }
}
.act-cart__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;      /* slot estable para 1-2 dígitos → 9→10 no ensancha el botón */
  height: 20px;
  padding: 0 5px;
  background: var(--c-white);
  color: var(--c-blue-700);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0;
  overflow: hidden;
  box-sizing: border-box;
}
/* Vacío: en vez de display:none (salto abrupto), COLAPSA suave — ancho y
   padding a 0, invisible, y margin negativo que cancela el gap:8px del flex.
   La transición (en site-header-v3.css) hace que aparezca/desaparezca sin salto. */
.act-cart__count:empty,
.act-cart[data-empty="true"] .act-cart__count {
  min-width: 0;
  padding-left: 0;
  padding-right: 0;
  opacity: 0;
  margin-left: -8px;
}
/* ═══════════════════════════════════════════════════════════
   HEADER LIGHT MODE — toggle desde el font-tester widget.
   Override completo del chrome dark → blanco. Útil para A/B
   visual sin tocar la versión por default. Activado vía
   <html data-header="light">.
   ═══════════════════════════════════════════════════════════ */
[data-header="light"] .shop-header { background: var(--bg-deep); }
[data-header="light"] .shop-header__top { background: var(--bg-deep); border-bottom: 1px solid var(--line); }
[data-header="light"] .brand-mark { color: var(--fg); }
[data-header="light"] .brand-dot { color: var(--c-mag-500); }
[data-header="light"] .act-loc {
  color: var(--fg-mute);
}
[data-header="light"] .act-loc:hover {
  color: var(--fg);
  background: var(--bg-subtle);
}
[data-header="light"] .act-loc svg { color: var(--accent-text); }
[data-header="light"] .act-loc__hint::before,
[data-header="light"] .act-loc__zone::before { color: var(--fg-dim); }
[data-header="light"] .act-loc__zone { color: var(--fg); }
[data-header="light"] .act-ccy-toggle { color: var(--fg-mute); }
[data-header="light"] .act-ccy-toggle:hover { color: var(--fg); background: var(--bg-subtle); }
[data-header="light"] .act-icon { color: var(--fg-mute); }
[data-header="light"] .act-icon--subtle { color: var(--fg-dim); opacity: 0.6; }
[data-header="light"] .act-icon:hover {
  color: var(--fg);
  background: var(--bg-subtle);
}
[data-header="light"] .act-user {
  color: var(--fg-mute);
}
[data-header="light"] .act-user:hover {
  color: var(--fg);
  background: var(--bg-subtle);
}
/* Mega nav (barra horizontal de deptos) en blanco */
[data-header="light"] .mega-nav {
  background: var(--bg-deep);
  border-top: 2px solid rgba(30, 71, 229, 0.18);
  border-bottom: 1px solid var(--line);
}
/* Specials siguen con sus colores de marca pero outline más
   visible sobre fondo claro */
[data-header="light"] .mega-nav__special-divider { background: var(--line); }
/* ==== MEGA NAV — chrome dark, parte del header ==== */
.mega-nav {
  /* ⚠️ ESTA FILA NO REPINTA EL AZUL. Vive DENTRO del header, así que
     su fondo se apila sobre el del header: dos capas al 86% dan 98%
     de opacidad y esta fila —44 de los ~145px de la barra— quedaba
     prácticamente maciza. Era la razón principal de que el vidrio "no
     se notara".

     Ahora es un velo blanco finito sobre el mismo vidrio del header:
     se sigue leyendo como una banda aparte (más los dos bordes que ya
     tenía) sin tapar nada de lo que pasa por detrás. */
  background: rgba(255, 255, 255, 0.06);
  border-top: 2px solid rgba(62, 230, 230, 0.30);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  position: relative;
  overflow: hidden;
  height: 44px;
  /* 260→180ms: durante el scroll, animar `height` causa reflow del
     contenido debajo en cada frame. Cuanto más corta la animación,
     menos frames de reflow → scroll se siente menos "atascado". */
  transition: height 180ms var(--ease-snap), opacity 140ms var(--ease-out);
}
.shop-header .mega-nav.is-hidden {
  height: 0;
  opacity: 0;
  pointer-events: none;
  /* Plegada = 0 de verdad. Con los bordes puestos seguía ocupando 3px, y esos
     3px eran justo lo que hacía saltar la página al asomar el vistazo. */
  border-top-width: 0;
  border-bottom-width: 0;
}
/* Vistazo con el mouse: plegada, pero el puntero está sobre el header. Se
   despliega para poder usarla sin scrollear (lo cablea header-scroll.js).

   Va FUERA DEL FLUJO (absolute) a propósito. Desplegándola con `height` como
   hace el scroll, la página entera se corría hacia abajo y al sacar el mouse
   volvía a subir: pasabas el mouse cerca del header y las cards saltaban.
   Flotando por encima, el vistazo no mueve nada de lo que estás mirando —
   que es justo lo que se espera de un vistazo. El despliegue por scroll sigue
   empujando como siempre: ahí el movimiento lo pediste vos. */
/* El vistazo y su cierre se mantienen FUERA del flujo. Si al sacar el mouse
   volviera enseguida a position:relative, sus 44px empujarían la página
   mientras termina la transición de altura. */
.shop-header .mega-nav.is-hidden:is(.is-peek, .is-peek-closing) {
  background: rgb(34, 49, 125);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 2;
  box-shadow: none;
}
.shop-header .mega-nav.is-hidden.is-peek {
  height: 44px;
  opacity: 1;
  pointer-events: auto;
  border-top: 1px solid rgba(62, 230, 230, 0.18);
  border-bottom-width: 1px;
}

/* La barra dibuja su propio remate durante todo el ciclo. Al cerrarse, la
   quilla sube con su borde; recién al llegar a 0 vuelve la del header. */
.shop-header.shop-header--v3:has(.mega-nav.is-hidden:is(.is-peek, .is-peek-closing))::after {
  opacity: 0;
}
.shop-header .mega-nav.is-hidden:is(.is-peek, .is-peek-closing)::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--c-cyan-400) 25%,
    var(--c-cyan-300) 50%,
    var(--c-cyan-400) 75%,
    transparent 100%
  );
  opacity: 0.7;
  box-shadow: 0 1px 0 rgb(21, 37, 117);
  z-index: 3;
  pointer-events: none;
}
/* Layout: list de deptos centrado en el viewport (position absolute
   con translateX -50%), specials anclados a la derecha en flex flow. */
.mega-nav__inner {
  display: flex;
  position: relative;
  align-items: stretch;
  justify-content: center;
  width: 100%;
  padding: 0 var(--app-px);
  gap: var(--sp-1);
  min-height: 44px;
}
/* Specials — flat nav links. Mismo lenguaje que la nav anterior:
   display font, sentence case, icon coloreado, bottom-border on hover.
   Sin cajas/borders. Los íconos identifican cada acción; el color del
   subrayado en hover refuerza el acento de marca. */
.mega-nav__special-divider {
  width: 1px;
  margin: 10px 6px;
  align-self: stretch;
  background: rgba(255, 255, 255, 0.12);
}
.mega-nav__special {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 14px;
  height: 44px;
  margin: 0;
  border: 0;
  border-bottom: 2px solid transparent;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
  white-space: nowrap;
  text-decoration: none;
  transition: color var(--t-fast) var(--ease-out),
              background var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out);
}
.mega-nav__special > svg {
  width: 14px; height: 14px; flex-shrink: 0;
  transition: color var(--t-fast) var(--ease-out);
}
/* Armá tu PC — amber / CTA principal */
.mega-nav__builder { color: rgba(255, 255, 255, 0.92); font-weight: 700; letter-spacing: -0.02em; }
.mega-nav__builder > svg { color: var(--builder-amber); width: 15px; height: 15px; }
.mega-nav__builder:hover { color: var(--c-white); background: rgba(255, 179, 71, 0.10); border-bottom-color: var(--builder-amber); }
/* Ofertas — cyan / CTA */
.mega-nav__deals { color: rgba(255, 255, 255, 0.92); font-weight: 700; letter-spacing: -0.02em; }
.mega-nav__deals > svg { color: var(--c-cyan-400); width: 15px; height: 15px; }
.mega-nav__deals:hover { color: var(--c-white); background: rgba(62, 230, 230, 0.10); border-bottom-color: var(--c-cyan-400); }
/* Reboot — magenta / CTA */
.mega-nav__reboot { color: rgba(255, 255, 255, 0.92); font-weight: 700; letter-spacing: -0.02em; }
.mega-nav__reboot .rb-ico { color: var(--c-mag-500); width: 21px; height: 12px; }
.mega-nav__reboot:hover { color: var(--c-white); background: rgba(230, 50, 132, 0.10); border-bottom-color: var(--c-mag-500); }
.mega-nav__reboot:hover .rb-ico { color: var(--c-mag-400); }
/* Info/trust links — atenuados, menor peso */
.mega-nav__info { color: rgba(255, 255, 255, 0.42); font-weight: 500; }
.mega-nav__info > svg { color: rgba(255, 255, 255, 0.28); }
.mega-nav__info:hover { color: rgba(255, 255, 255, 0.82); background: rgba(255, 255, 255, 0.04); border-bottom-color: rgba(255, 255, 255, 0.25); }
/* WhatsApp — CTA de contacto */
.mega-nav__wa { color: rgba(255, 255, 255, 0.92); font-weight: 700; letter-spacing: -0.02em; }
.mega-nav__wa > svg { color: var(--wa-green); width: 15px; height: 15px; }
.mega-nav__wa:hover { color: var(--c-white); background: rgba(37, 211, 102, 0.10); border-bottom-color: var(--wa-green); }
/* ⚠️ EL SCROLL DE RESCATE ARRANCA EN 1100, NO EN 760.
   La barra tiene 44px de alto y `overflow:hidden`, y su contenido suma unos
   1000px. El scroll horizontal que salva la situación estaba puesto sólo a
   partir de 760px, así que entre 761 y ~1050 —o sea una tablet apaisada o una
   notebook de 13"— los últimos accesos quedaban CORTADOS y sin ninguna forma de
   llegar a ellos: ni scroll, ni segunda fila, ni menú. Entre los tapados, el de
   WhatsApp.
   (El comentario que estaba acá decía "a partir de 1100px" y no existía ningún
   breakpoint 1100 en todo el archivo.) */
@media (max-width: 1100px) {
/* Scroll horizontal en vez de wrap — wrap choca con height:44px
     + overflow:hidden y los items de la segunda fila quedan clipeados. */
.mega-nav__inner {
    padding: 0 var(--sp-2);
    gap: 0;
    overflow-x: auto;
    scrollbar-width: none;
    justify-content: flex-start;
  }
.mega-nav__inner::-webkit-scrollbar { display: none; }
}

/* De acá para abajo sí es teléfono: además del scroll, se achica todo y se
   esconden "Empresas" y "Ayuda" (siguen en el pie y en el menú). Esto NO sube a
   1100: en una tablet entran, y esconder accesos que entran es peor que
   mostrarlos. */
@media (max-width: 760px) {
.mega-nav__info { display: none; }
/* en mobile solo quedan las 3 acciones + WhatsApp */
.mega-nav__special { padding: 0 var(--sp-3); font-size: 0.76rem; }
.mega-nav__special-divider { margin: 10px var(--sp-2); }
/* Fade a la derecha: señala que el nav scrollea (hay más) en vez de
     parecer cortado al borde. Matchea el fondo de la barra. */
.mega-nav::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 40px;
    /* Acá sí hace falta que termine casi opaco: es el corte que tapa
       los ítems que siguen a la derecha en celular. Va en el azul del
       header (no en el de la barra, que ya no repinta) para que se lea
       como el borde del mismo material. */
    background: linear-gradient(to right, transparent,
      color-mix(in srgb, var(--c-blue-900) 92%, transparent));
    pointer-events: none;
    z-index: 1;
  }
.mega-nav.is-hidden::after { display: none; }
}
/* =========================================================
   CATEGORIES DRAWER — taxonomía completa, mobile + desktop
   ========================================================= */
.cats-drawer {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: 380px;
  max-width: 90vw;
  background: var(--bg-deep);
  border-right: 1px solid var(--line);
  z-index: var(--z-dropdown);
  transform: translateX(-100%);
  transition: transform 320ms cubic-bezier(0.2, 0.85, 0.25, 1);
  display: flex;
  flex-direction: column;
  overscroll-behavior: contain;
  box-shadow: var(--shadow-xl);
}
.cats-drawer.is-open { transform: translateX(0); }
.cats-drawer__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(6, 11, 34, 0.7);
  backdrop-filter: blur(4px);
  z-index: calc(var(--z-dropdown) - 1);
  opacity: 0;
  pointer-events: none;
  transition: opacity 320ms var(--ease-out);
}
.cats-drawer__backdrop.is-open { opacity: 1; pointer-events: auto; }
.cats-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--line);
  background: var(--bg-subtle);
}
.cats-drawer__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  color: var(--fg);
}
.cats-drawer__close {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--fg-mute);
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
.cats-drawer__close:hover { color: var(--accent-text); border-color: var(--accent-text); }
.cats-drawer__search {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  border-bottom: 1px solid var(--line);
  color: var(--fg-dim);
}
.cats-drawer__search input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--fg);
  font-size: 0.92rem;
  padding: 4px 0;
}
.cats-drawer__search input::placeholder { color: var(--fg-dim); }
.cats-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-2) 0 var(--sp-4);
  scrollbar-width: thin;
  scrollbar-color: var(--accent-text) transparent;
}
.cats-drawer__group-head {
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin: var(--sp-4) var(--sp-5) var(--sp-2);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.cats-drawer__item {
  border-bottom: 1px solid var(--line-soft);
}
.cats-drawer__item[open] { background: var(--accent-tint); }
.cats-drawer__sum {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px var(--sp-5);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.94rem;
  color: var(--fg-mute);
  position: relative;
  transition: color var(--t-fast) var(--ease-out);
}
.cats-drawer__sum::-webkit-details-marker { display: none; }
.cats-drawer__sum::after {
  content: '+';
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.3rem;
  color: var(--accent-text);
  margin-left: var(--sp-2);
  line-height: 1;
  transition: transform var(--t-fast) var(--ease-out);
}
.cats-drawer__item[open] .cats-drawer__sum { color: var(--accent-text); }
.cats-drawer__item[open] .cats-drawer__sum::after { transform: rotate(45deg); }
.cats-drawer__count {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--fg-dim);
  padding: 2px 8px;
  border: 1px solid var(--line);
  margin-left: auto;
  margin-right: var(--sp-3);
}
.cats-drawer__sublist {
  display: flex;
  flex-direction: column;
  padding: 0 var(--sp-5) var(--sp-3) var(--sp-7);
  gap: 2px;
  background: var(--bg-subtle);
}
.cats-drawer__sub {
  padding: 8px 0;
  color: var(--fg-mute);
  font-size: 0.85rem;
  text-decoration: none;
  border-left: 2px solid transparent;
  padding-left: var(--sp-3);
  transition: color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
.cats-drawer__sub:hover {
  color: var(--accent-text);
  border-left-color: var(--accent-text);
}
.cats-drawer__see-all {
  margin-top: var(--sp-2);
  padding: 8px 0 8px var(--sp-3);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--price);
  text-decoration: none;
  border-top: 1px solid var(--line-soft);
}
.cats-drawer__foot {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  border-top: 1px solid var(--line-soft);
  background: var(--c-blue-900);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-cyan-400);
  text-decoration: none;
  transition: background var(--t-fast) var(--ease-out);
}
.cats-drawer__foot:hover { background: var(--c-cyan-400); color: var(--c-blue-950); }
@media (max-width: 760px) {
.cats-drawer { width: 320px; }
}
/* =========================================================
   FOOTER
   ========================================================= */
.shop-foot {
  padding: var(--sp-9) var(--app-px) var(--sp-5);
  border-top: 1px solid rgba(255,255,255,0.08);
  margin-top: var(--sp-10);
  background: var(--c-blue-950);
  color: var(--c-white);
}
.shop-foot__inner {
  max-width: var(--max-content);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: var(--sp-7);
}
.shop-foot h4 {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-cyan-400);
  margin-bottom: var(--sp-3);
}
.shop-foot a {
  color: var(--c-white-80);
  font-size: var(--fs-sm);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease-out);
}
/* Cyan al pasar: es el color de acento de la tienda y acá era lo único que
   faltaba para que el footer se sintiera de la misma casa que el header. */
.shop-foot a:hover { color: var(--c-cyan-400); }
.shop-foot a:focus-visible {
  outline: 2px solid var(--c-cyan-400);
  outline-offset: 2px;
}
.shop-foot ul { list-style: none; display: flex; flex-direction: column; gap: var(--sp-2); }
.shop-foot__about { color: var(--c-white-80); font-size: var(--fs-sm); line-height: 1.55; margin-top: var(--sp-3); max-width: 42ch; }
.shop-foot__payments {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}
/* Los medios de pago son un DATO, no un aviso: antes eran seis bloques blancos
   macizos sobre el azul, una banda que gritaba más que los links de al lado y se
   comía la jerarquía del footer. Contorno fino, del mismo peso que el resto de
   la letra chica. */
.shop-foot__pay-chip {
  padding: 4px 9px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: var(--c-white-80);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: border-color var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out);
}
.shop-foot__payments:hover .shop-foot__pay-chip { border-color: rgba(255, 255, 255, 0.14); }
.shop-foot__pay-chip:hover { border-color: var(--c-cyan-400); color: var(--c-white); }
/* Franja de confianza — abre el footer con lo que la tienda realmente
   ofrece (garantía, envíos, retiro, atención) en vez de arrancar directo
   con la lista de links. Esquinas rectas, como el resto de la tienda. */
.shop-foot__trust {
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  margin: calc(var(--sp-9) * -1) calc(var(--app-px) * -1) var(--sp-8);
  padding: var(--sp-5) var(--app-px);
  background: rgba(255, 255, 255, 0.035);
}
.shop-foot__trust-inner {
  max-width: var(--max-content);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4) var(--sp-7);
  justify-content: space-between;
}
.shop-foot__trust-item {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--c-white-80);
  font-size: var(--fs-sm);
  line-height: 1.3;
}
.shop-foot__trust-item b { color: var(--c-white); font-weight: 700; }
.shop-foot__trust-item svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  color: var(--c-cyan-400);
}
@media (max-width: 760px) {
  .shop-foot__trust-inner { flex-direction: column; gap: var(--sp-3); }
}

/* Footer simplificado de las páginas listing/carrito */
.shop-footer {
  padding: var(--sp-7) var(--app-px) var(--sp-5);
  border-top: 1px solid rgba(255,255,255,0.08);
  margin-top: var(--sp-9);
  background: var(--c-blue-950);
  color: var(--c-white-80);
}
.shop-footer__inner {
  max-width: var(--max-content);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-4);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  flex-wrap: wrap;
}
.shop-foot__legal {
  grid-column: 1 / -1;
  max-width: var(--max-content);
  width: 100%;
  margin: 0 auto;
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(255,255,255,0.08);
  /* Era lo más chico y lo más lavado de toda la página: 10,24px al 45% de blanco
     da 4,34 de contraste y el mínimo legible es 4,5 — y con 0.22em de espaciado en
     MAYÚSCULAS, peor todavía. Es la línea que dice quiénes somos; se ve en las 14
     páginas y tiene que poder leerse. Sube a 11,7px y al 65% de blanco. */
  font-size: 0.73rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-white-65, rgba(255, 255, 255, 0.65));
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin-top: var(--sp-7);
}
/* =========================================================
   SEARCH AUTOCOMPLETE DROPDOWN
   ========================================================= */
.search-wrap {
  position: relative;
  width: 100%;
}
.search-wrap .search { max-width: none; }
.suggest {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--c-white);
  color: var(--c-blue-900);
  border: 1px solid var(--c-cyan-400);
  box-shadow: var(--shadow-lg);
  max-height: 420px;
  overflow-y: auto;
  z-index: calc(var(--z-sticky) + 5);
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.suggest.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.suggest__section { padding: var(--sp-3) var(--sp-3) var(--sp-2); }
.suggest__section + .suggest__section { border-top: 1px solid rgba(10,27,110,0.1); }
.suggest__label {
  display: block;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(10,27,110,0.55);
  margin-bottom: var(--sp-2);
}
.suggest__prod {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: var(--sp-3);
  align-items: center;
  padding: 10px 8px;
  color: var(--c-blue-900);
  border-radius: var(--rad-sm);
  transition: background var(--t-fast) var(--ease-out);
}
.suggest__prod:hover { background: var(--accent-tint); }
.suggest__prod-thumb {
  width: 48px;
  height: 48px;
  background: var(--bg-subtle);
  border-radius: var(--rad-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  flex-shrink: 0;
  overflow: hidden;
}
.suggest__prod-thumb svg,
.suggest__prod-thumb img { width: 100%; height: 100%; object-fit: contain; }
.suggest__prod-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.suggest__prod-brand {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-blue-600);
}
.suggest__prod-name {
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.suggest__prod-stock {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(10, 27, 110, 0.55);
  margin-top: 2px;
}
.suggest__prod-stock--low { color: var(--c-mag-600); }
.suggest__prod-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
}
.suggest__prod-discount {
  display: inline-block;
  background: var(--c-mag-500);
  color: var(--c-white);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 2px 5px;
  border-radius: 2px;
}
.suggest__prod-old {
  font-size: 0.7rem;
  font-weight: 600;
  color: rgba(10, 27, 110, 0.45);
  text-decoration: line-through;
}
.suggest__prod-price {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  color: var(--c-blue-900);
  letter-spacing: -0.01em;
}
.suggest__cats { display: flex; flex-wrap: wrap; gap: 6px; }
.suggest__cat {
  padding: 4px 10px;
  background: var(--c-blue-600);
  color: var(--c-white);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: background var(--t-fast) var(--ease-out);
}
.suggest__cat:hover { background: var(--c-blue-900); }
.suggest__empty {
  padding: var(--sp-4);
  text-align: center;
  font-size: var(--fs-sm);
  color: rgba(10,27,110,0.6);
}
/* =========================================================
   BOTTOM NAV — mobile thumb zone
   ========================================================= */
.bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: calc(var(--z-sticky) - 5);
  background: var(--c-blue-950);
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 6px 0 max(6px, env(safe-area-inset-bottom));
  justify-content: space-around;
  align-items: center;
}
.bottom-nav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 14px;
  color: var(--c-white-80);
  position: relative;
  min-width: 60px;
}
.bottom-nav__item.is-active { color: var(--c-cyan-400); }
.bottom-nav__item:active { background: rgba(62, 230, 230, 0.1); }
.bottom-nav__icon {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.35rem;
  line-height: 1;
  letter-spacing: 0;
}
.bottom-nav__label {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.bottom-nav__badge {
  position: absolute;
  top: 2px;
  right: 8px;
  background: var(--c-mag-500);
  color: var(--c-white);
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  font-weight: 800;
}
@media (max-width: 760px) {
.bottom-nav { display: flex; }
/* wa-float trepa para no quedar tapado por bottom-nav (~70px) */
.wa-float { bottom: 80px; right: 16px; }
}
/* =========================================================
   TOAST — feedback de interacción
   ========================================================= */
.toast {
  position: fixed;
  top: 80px;
  right: 20px;
  z-index: var(--z-toast);
  padding: 12px 18px;
  background: var(--c-blue-900);
  color: var(--c-white);
  border-left: 4px solid var(--c-cyan-400);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  max-width: 340px;
  box-shadow: var(--shadow-md);
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 280ms var(--ease-out), transform 280ms var(--ease-out);
  pointer-events: none;
}
.toast.is-visible {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}
.toast--success { border-left-color: var(--c-cyan-400); }
.toast--info    { border-left-color: var(--c-mag-500); }
/* =========================================================
   WHATSAPP FLOTANTE — aparece cuando el mega-nav está oculto.
   Posición: bottom-left. Diseño integrado al chrome de la tienda:
   fondo navy oscuro, rail verde izquierdo, tipografía de la marca.
   ========================================================= */
.wa-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: calc(var(--z-sticky) - 5);
  display: inline-flex;
  align-items: center;
  gap: 13px;
  padding: 14px 20px 14px 16px;
  background: var(--c-blue-950);
  color: var(--c-white);
  text-decoration: none;
  border-left: 3px solid var(--wa-green);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.50), 0 2px 8px rgba(0, 0, 0, 0.30);
  /* Oculto por defecto — el mega-nav está visible al cargar */
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 220ms var(--ease-out),
              transform 240ms var(--ease-snap);
}
.wa-float.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  /* Transición de entrada con delay mínimo para coordinar con barra */
  transition: opacity 260ms 60ms var(--ease-out),
              transform 280ms 60ms var(--ease-snap);
}
.wa-float.is-visible:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55),
              0 0 0 1px rgba(37, 211, 102, 0.25),
              0 4px 20px rgba(37, 211, 102, 0.12);
}
/* Una sola línea, como el de la barra de arriba (la referencia que le gusta
   al dueño): logo + "WhatsApp", y el punto verde con "En línea" sólo si de
   verdad estamos en horario. */
.wa-float svg,
.wa-float__icon {
  color: var(--wa-green);
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}
.wa-float__label {
  font-family: var(--font-display);
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--c-white);
  line-height: 1;
}
/* Mismos valores que .hdr3-wa-dot / .hdr3-wa-state del header: es el mismo
   indicador, no una variante. */
.wa-float__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--rad-pill);
  background: var(--wa-green);
  box-shadow: 0 0 6px rgba(37, 211, 102, 0.6);
  flex-shrink: 0;
  margin-left: 2px;
}
.wa-float__state {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1;
}
/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1024px) {
/* Header mobile: fila 1 = brand + acciones; fila 2 = búsqueda full-width.
     El grid item real es .search-wrap (el .search está adentro), por eso
     el full-width hay que ponerlo en .search-wrap, no en .search. */
.shop-header__top {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--sp-2) var(--sp-3);
    align-items: center;
  }
.search-wrap {
    grid-column: 1 / -1;
    order: 3;
  }
.search { max-width: none; }
.act-link__label, .act-link .act-link__text { display: none; }
.act-ccy button { padding: 6px 8px; }
.act-cart span:not(.act-cart__count) { display: none; }
.shop-foot__inner { grid-template-columns: 1fr 1fr 1fr; }
.shop-foot__about-col { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
.shop-foot__inner { grid-template-columns: 1fr 1fr; }
.shop-foot__about-col { grid-column: 1 / -1; }
.brand-tag, .brand-sep { display: none; }
.wa-float { padding: 12px 14px; }
}

/* Envoltorio del buscador + sus sugerencias. `.suggest` es absoluto con
   left:0/right:0 y necesita un ancestro posicionado que le marque el
   ancho; sin él se anclaba al header y salía angosto. */
.search__caja {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
}
.search__caja .search { flex: 1; min-width: 0; }