/* =========================================================
   site-header-v3.css — header v3 "BUS DE ENERGÍA"
   (preview SOLO en index.html — se activa con .shop-header--v3)

   Idea madre: el header como pieza premium, SOBRIO. La luz está al
   servicio de la función, sin animación ambiental:
     · quilla    → línea fina cyan al borde inferior, fija (idle y
                   trabajo idénticas: el dueño la quiere delgada)
     · wordmark  → el punto cyan destella al cargar y gana glow al
                   pasar el mouse
     · hover     → cada control irradia un glow tenue de su color de
                   rol (carrito magenta, builder ámbar, WA verde…)
     · compra    → add-to-cart: pulso MAGENTA one-shot por el borde
   Paleta disciplinada: cyan = acento/sistema, magenta = SOLO compra,
   verde = SOLO WhatsApp, ámbar = SOLO builder. Chrome siempre azul.

   (Retirados a pedido del dueño: el encendido de la QUILLA al cargar,
   su respiración, el latido viajero en scroll y el trace del buscador
   al focus — no se notaban y sólo sumaban peso. El destello del punto
   del logo SÍ quedó.)

   ABSORBE site-header-v2.css (quilla, cuerpo 26px que no se aplasta,
   decode placeholder, underlines magnéticos). NUNCA cargar v2 y v3
   juntos. Al aprobar v3, borrar v2 para una sola fuente de verdad.

   Cascada/specificity: TODAS las reglas .is-compact usan
   .shop-header.shop-header--v3.is-compact (0,4,0) para vencer a base
   (0,3,0) sin depender del orden de carga.

   JS compañero: scripts/header-v3.js (decode del placeholder, atajo
   "/" y Ctrl+K, presencia WhatsApp, observer del carrito).
   ========================================================= */

/* ═══════════════════════════════════════════════════════════
   0 · BASE ABSORBIDA DEL V2 — fondo opaco, cuerpo, wordmark,
   command-bar 48px, decode placeholder, quilla.
   ═══════════════════════════════════════════════════════════ */

.shop-header--v3 {
  position: sticky;
}
/* ═══ VIDRIO ESMERILADO ═══════════════════════════════════════
   El header deja pasar la página que corre por debajo, desenfocada.

   Dos perillas y nada más — están arriba de todo para que se puedan
   tocar sin leer el resto del archivo:

     --header-vidrio : cuánto tapa el azul (1 = macizo como antes).
     --header-blur   : cuánto se desenfoca lo que pasa por detrás.

   ⚠️ POR QUÉ HAY QUE TOCAR `background-image` Y NO SÓLO EL COLOR:
   acá había un gradiente de un solo color puesto como IMAGEN encima
   del color de fondo. No era decoración: existía para que la
   transición al compactar interpolara gradiente→gradiente y no
   pegara un flash blanco. Pero una imagen opaca tapa cualquier
   transparencia que se le ponga al color: se puede bajar la opacidad
   todo lo que se quiera, que detrás del vidrio no pasa NADA de luz.
   Por eso el gradiente también se transparenta, con los mismos dos
   colores de siempre, y el flash sigue arreglado.

   ⚠️ EL BLUR NO SE ANIMA. Es de lo más caro que hay para el
   navegador; metido en una transición se siente el tirón al
   scrollear. Se anima el color, como antes. */
:root {
  /* 0,86 no se notaba. El culpable principal era la fila de abajo
     apilando un segundo azul (arreglado en chrome.css), pero además
     0,86 es poco: contra una página clara son 20 puntos de diferencia
     de color que el ojo lee como "azul un poco más claro", no como
     vidrio. A 0,78 con más desenfoque se ve pasar el contenido.

     Abajo de 0,78 empiezan a caerse de legibles los textos chicos de
     la barra y hay que subirles el blanco a varios — ahí se te empieza
     a aplanar la jerarquía del header. */
  --header-vidrio: 0.78;
  --header-blur: 22px;
}

.shop-header.shop-header--v3 {
  background-color: color-mix(in srgb, var(--c-blue-900) calc(var(--header-vidrio) * 100%), transparent);
  background-image: linear-gradient(180deg,
    color-mix(in srgb, var(--c-blue-900) calc(var(--header-vidrio) * 100%), transparent),
    color-mix(in srgb, var(--c-blue-900) calc(var(--header-vidrio) * 100%), transparent));
  /* `saturate` es la mitad del efecto: sin él, lo que pasa por debajo
     se ve gris y lavado en vez de un color desenfocado. */
  -webkit-backdrop-filter: blur(var(--header-blur)) saturate(180%);
  backdrop-filter: blur(var(--header-blur)) saturate(180%);
}

/* Si el navegador no sabe desenfocar el fondo, el header vuelve a ser
   macizo. Sin esto quedaría un header semitransparente SIN blur, que
   es la peor de las tres opciones: se lee el texto de abajo entero. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --header-vidrio: 1; }
}

/* QUILLA — remate de luz cyan al borde inferior de TODO el header.
   Vive en ::after de .shop-header → sobrevive al colapso de la
   mega-nav. Reposo tenue (0.7): el cyan fuerte se RESERVA para
   .is-compact. */
.shop-header--v3::after {
  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;
  z-index: 3;
  pointer-events: none;
  transition: height var(--t-base) var(--ease-out),
              opacity var(--t-base) var(--ease-out),
              filter var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out);
}
.shop-header--v3 { border-bottom-color: transparent; }

/* FILA PRINCIPAL — aire y cuerpo (banda ~76px, command-bar 48px). */
.shop-header--v3 .shop-header__top {
  padding-block: 26px;
  column-gap: 28px;
}

/* WORDMARK — techo on-brand + hairline editorial. El dot cyan SIEMPRE
   lleva un glow mínimo asentado (estado "encendido" de la máquina). */
.shop-header--v3 .brand-mark { font-size: 1.55rem; }
.shop-header--v3 .brand {
  padding-right: 28px;
  border-right: 1px solid var(--c-white-10);
}
.shop-header--v3 .brand-dot {
  text-shadow: 0 0 6px rgba(62, 230, 230, 0.3);
  /* Destello de bienvenida (pedido del dueño): el punto cyan del logo
     "prende" al cargar la página y asienta en su glow base. Corre en
     cada carga de la home (sin gate de sesión). */
  animation: hdr3-dot-flash 1100ms var(--ease-out) 200ms 1 backwards;
}
@keyframes hdr3-dot-flash {
  0%   { text-shadow: none; }
  35%  { text-shadow: 0 0 20px var(--c-cyan-400), 0 0 40px rgba(62, 230, 230, 0.75); }
  60%  { text-shadow: 0 0 8px var(--c-cyan-400), 0 0 16px rgba(62, 230, 230, 0.4); }
  100% { text-shadow: 0 0 6px rgba(62, 230, 230, 0.3); }
}
.shop-header--v3 .brand:hover .brand-dot {
  text-shadow: 0 0 8px var(--c-cyan-400);
  transition: text-shadow var(--t-base) var(--ease-out);
}

/* ── MÓDULO 48 (injerto Monolito): dos alturas, no siete.
   48px → search, cats-trigger (stretch), carrito, location.
   40px → utilidades (moneda, usuario, theme). ── */
.shop-header--v3 .search { height: 48px; }
.shop-header--v3 .act-cart { height: 48px; padding: 0 16px; }
.shop-header--v3 .act-loc { height: 48px; }
.shop-header--v3 .act-ccy-toggle,
.shop-header--v3 .act-user { height: 40px; }
.shop-header--v3 .act-icon { width: 40px; height: 40px; }
.shop-header--v3 .search__btn {
  padding: 0 20px;
  /* canon de tracking mono (base usa 0.12em, fuera de escala) */
  letter-spacing: var(--ls-mono-base);
}
/* Dígitos que no bailan: count del carrito y countdown de la promo. */
.shop-header--v3 .act-cart__count,
[data-role="promo-h"],
[data-role="promo-m"] {
  font-variant-numeric: tabular-nums;
}

/* ── COMMAND-BAR: aro de foco cyan estable (accesibilidad). El trace
   de luz al click se retiró a pedido del dueño (no se notaba). ── */
.shop-header--v3 .search { position: relative; }
.shop-header--v3 .search:focus-within {
  box-shadow: inset 0 0 0 2px var(--c-cyan-400);
}

/* cats-trigger: separador derecho a hairline cyan en hover (v2). */
.shop-header--v3 .cats-trigger {
  transition: background var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out),
              border-right-color var(--t-fast) var(--ease-out);
}
.shop-header--v3 .cats-trigger:hover,
.shop-header--v3 .cats-trigger[aria-expanded="true"] {
  border-right-color: var(--c-cyan-400);
}

/* ── PLACEHOLDER DINÁMICO (decode, heredado del v2) — overlay sobre
   la búsqueda. El lead queda FIJO y solo morphea la parte de ejemplos.
   El motor JS vive en scripts/header-v3.js. ── */
.shop-header--v3 .search__inputwrap {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
}
.shop-header--v3 .search__inputwrap .search__input {
  position: relative;
  z-index: 1;
  background: transparent;
}
.shop-header--v3 .search__ph {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  padding: 0 14px;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  font-family: var(--font-display);
  font-size: 16px;            /* matchea el input (16px mobile = sin zoom iOS) */
  font-weight: 400;
  letter-spacing: -0.005em;
  color: rgba(10, 27, 110, 0.45);
}
@media (min-width: 761px) {
  .shop-header--v3 .search__ph { font-size: 0.92rem; }
}
.shop-header--v3 .search__ph[hidden] { display: none; }
/* Respaldo que no depende de JS: mientras el input esté vacío matchea
   `:placeholder-shown` (por eso el placeholder nativo es un espacio, ver
   header-v3.js). Con valor —lo haya escrito el usuario o lo haya puesto el
   código al volver de una búsqueda— el overlay se va solo, sin esperar ningún
   evento. Sin esto los dos textos quedaban pisados. */
.shop-header--v3 .search__inputwrap:has(.search__input:not(:placeholder-shown)) .search__ph {
  display: none;
}
.shop-header--v3 .search__ph-rot { display: inline-block; }
/* Glifo en pleno decode: shimmer cyan que asienta al gris al fijarse. */
.shop-header--v3 .search__ph-x {
  color: var(--c-cyan-500);
  opacity: 0.7;
}

/* (El chip "/" del atajo se quitó: no se entendía y se pisaba con lo tecleado
   al angostar la ventana. El atajo de teclado sigue vivo en header-v3.js, y con
   el chip se fue también el padding-right que le reservaba lugar — ese espacio
   ahora es del texto.) */

/* PANEL DE SUGERENCIAS — vestido command-palette (injerto
   Instrumental): remate superior cyan eco de la quilla + sombra azul
   profunda. Solo el container; las filas las cablea site-chrome. */
.shop-header--v3 .suggest {
  top: calc(100% + 8px);
  border: 1px solid rgba(10, 27, 110, 0.14);
  border-top: 2px solid var(--c-cyan-400);
  box-shadow: 0 24px 56px rgba(6, 15, 71, 0.35), 0 8px 24px rgba(6, 15, 71, 0.22);
}

/* ═══════════════════════════════════════════════════════════
   1 · CARRITO — LED de estado + confirmación que viaja por el bus.
   Único territorio MAGENTA del sistema de luz: magenta = compra.
   ═══════════════════════════════════════════════════════════ */

/* CARRITO DINÁMICO v2 (idea del dueño): el ícono se LLENA según los ítems
   y los paquetes CAEN al agregar. El SVG trae 4 fases .ph[data-phase]:
   0 vacío / 1 / 2 / 3+ (rebalsa). header-v3.js setea data-fill en el botón
   y .is-dropping SOLO al agregar (para la caída). El marco (.fr) es
   currentColor; los paquetes (.pk) toman el color del fondo → se leen como
   huecos. Sin data-fill (páginas sin v3/JS) → fase 0 (canasta vacía). */
.hdr3-cart .ph { display: none; }
.hdr3-cart .ph[data-phase="0"] { display: initial; }
[data-fill="1"] .hdr3-cart .ph[data-phase="0"],
[data-fill="2"] .hdr3-cart .ph[data-phase="0"],
[data-fill="3"] .hdr3-cart .ph[data-phase="0"] { display: none; }
[data-fill="1"] .hdr3-cart .ph[data-phase="1"],
[data-fill="2"] .hdr3-cart .ph[data-phase="2"],
[data-fill="3"] .hdr3-cart .ph[data-phase="3"] { display: initial; }
.hdr3-cart .fr { fill: currentColor; }
.hdr3-cart .pk { fill: var(--c-blue-600); }        /* = fondo DIRECTO del botón carrito (.act-cart #1E47E5) → hueco */
.bottom-nav .hdr3-cart .pk { fill: var(--c-blue-950); }  /* = fondo del bottom-nav */

/* Caída de los paquetes: sutil, escalonada (abajo→arriba), SOLO al agregar
   (.is-dropping lo pone header-v3.js en incremento real). Bajo reduced-motion
   el llenado igual se ve, pero sin caída. */
.hdr3-cart .pk { transform-box: fill-box; }
.hdr3-cart .pk2 { --pkd: .06s; }
.hdr3-cart .pk3 { --pkd: .12s; }
@media (prefers-reduced-motion: no-preference) {
  .is-dropping[data-fill="1"] .hdr3-cart .ph[data-phase="1"] .pk,
  .is-dropping[data-fill="2"] .hdr3-cart .ph[data-phase="2"] .pk,
  .is-dropping[data-fill="3"] .hdr3-cart .ph[data-phase="3"] .pk {
    animation: hdr3-cart-drop .38s cubic-bezier(.3, 1.25, .5, 1) var(--pkd, 0s) both;
  }
}
@keyframes hdr3-cart-drop {
  0%   { transform: translateY(-30px); opacity: 0; }
  55%  { opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}

/* LED: con items, el count (pill blanca) irradia magenta constante —
   "hay un proceso abierto". Vacío no existe (base lo oculta :empty).
   Es estado, no animación → vive también bajo reduced-motion. */
.shop-header--v3 .act-cart__count {
  box-shadow: 0 0 10px -2px rgba(230, 50, 132, 0.55);
  transition: transform var(--t-fast) var(--ease-snap),
              min-width .3s var(--ease-out), opacity .25s var(--ease-out),
              margin-left .3s var(--ease-out), padding .3s var(--ease-out);
}
.shop-header--v3 .act-cart:hover .act-cart__count {
  transform: scale(1.06);
}
/* Zona de intención: hover/teclado encienden un halo magenta tenue
   alrededor del botón. */
.shop-header--v3 .act-cart {
  transition: background var(--t-fast) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out);
}
.shop-header--v3 .act-cart:hover,
.shop-header--v3 .act-cart:focus-visible,
.shop-header--v3 .act-cart:active {
  box-shadow: 0 0 18px -4px rgba(230, 50, 132, 0.45);
}

/* CAPA DE PULSOS — ::before de .shop-header (libre en base): paquete
   de luz de 140px que viaja por la quilla. La usan el heartbeat
   (compact, cyan) y el pulso de confirmación del carrito (magenta). */
.shop-header--v3::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 200px;
  height: 4px;
  background: linear-gradient(90deg, transparent, rgba(122, 244, 244, 0.95) 50%, transparent);
  box-shadow: 0 0 22px 0 rgba(62, 230, 230, 0.85);
  opacity: 0;
  z-index: 4;
  pointer-events: none;
}

/* PULSO DE CONFIRMACIÓN — al agregar al carrito (clase one-shot que
   setea header-v3.js, solo en INCREMENTO real del count): un paquete
   MAGENTA viaja desde el centro hacia el carrito (derecha). El count
   ya hace su bump vía WAAPI en main.js — acá NO se duplica. */
.shop-header--v3.hdr3-cart-pulse::before {
  background: linear-gradient(90deg, transparent, rgba(242, 90, 153, 1) 50%, transparent);
  box-shadow: 0 0 26px 1px rgba(230, 50, 132, 0.9);
  animation: hdr3-pulse-cart 850ms var(--ease-out) 1;
}
/* Viaja desde el centro hacia el carrito (derecha): se ve el recorrido
   completo de la confirmación física por el bus. */
@keyframes hdr3-pulse-cart {
  0%   { transform: translateX(18vw);  opacity: 0; }
  12%  {                               opacity: 1; }
  82%  {                               opacity: 1; }
  100% { transform: translateX(100vw); opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════
   2 · QUILLA ESTÁTICA — sin respiración ni "encendido" (retirados a
   pedido del dueño: animaciones imperceptibles que sólo pesaban). La
   quilla es una línea fina y quieta (2px, opacity 0.7), idéntica en
   idle y en trabajo. Lo único vivo del wordmark es el glow del dot al
   pasar el mouse (definido arriba).
   ═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   3 · ESTADO TRABAJO — .is-compact (scrollY > 80). El header NO se
   aplasta: mantiene cuerpo y gana peso. La respiración se apaga y la
   quilla queda encendida fija (más gruesa + glow). Sin latido
   ambiental: la quietud encendida ya comunica "modo trabajo".
   Specificity (0,4,0): gana SIEMPRE a base (0,3,0).
   ═══════════════════════════════════════════════════════════ */
.shop-header.shop-header--v3.is-compact .shop-header__top {
  padding-block: 26px;
}
/* Scrolleado tapa un poco más. Es cuando de verdad hay contenido
   corriendo por detrás, y el azul de trabajo es más oscuro, así que
   aguanta el mismo vidrio con más margen de lectura. */
/* ⚠️ SCROLLEAR YA NO OSCURECE EL HEADER, Y ES EL CAMBIO QUE MÁS SE VE.
   Al compactar, el header pasaba de azul-900 a azul-950 — un azul
   bastante más oscuro. Sobre fondo macizo eso era el gesto de "modo
   trabajo", pero con vidrio es contraproducente: justo cuando hay
   contenido corriendo por detrás (o sea, cuando el efecto por fin
   tiene algo que mostrar), la barra se ponía MÁS oscura y volvía a
   leerse como una pared.

   Ahora se queda en el mismo azul, apenas más cerrado, y el gesto de
   "modo trabajo" lo dan la sombra y la quilla, que ya estaban. */
.shop-header.shop-header--v3.is-compact {
  background-color: color-mix(in srgb, var(--c-blue-900) calc(var(--header-vidrio) * 100% + 4%), transparent);
  background-image: linear-gradient(180deg,
    color-mix(in srgb, var(--c-blue-900) calc(var(--header-vidrio) * 100% + 4%), transparent),
    color-mix(in srgb, var(--c-blue-900) calc(var(--header-vidrio) * 100% + 4%), transparent));
  box-shadow: 0 8px 24px -12px rgba(6, 15, 71, 0.55);
}
/* Quilla FINA también en trabajo (pedido del dueño): la misma línea
   delgada que cuando el header está desplegado. No se engrosa ni gana
   glow al ocultarse la mega-nav — sólo cambia el fondo del header. */
.shop-header.shop-header--v3.is-compact::after {
  height: 2px;
  opacity: 0.7;
  filter: none;
  box-shadow: none;
}
/* HEARTBEAT — RETIRADO a pedido del dueño: el latido ambiental cada
   9s se leía como "loading" / ruido. La capa ::before queda viva pero
   APAGADA en idle/trabajo; solo se enciende como respuesta a una
   acción real: el pulso magenta de confirmación al agregar al carrito.
   (Luz con causa: sin acción, sin luz.) */
/* El pulso de carrito usa la capa ::before libremente (ya no hay
   (0,5,0 > 0,4,0); al terminar, el heartbeat reinicia desde 0% que
   es opacity 0 — invisible, sin salto. */
.shop-header.shop-header--v3.is-compact.hdr3-cart-pulse::before {
  background: linear-gradient(90deg, transparent, rgba(242, 90, 153, 0.9) 50%, transparent);
  box-shadow: 0 0 16px -2px rgba(230, 50, 132, 0.8);
  animation: hdr3-pulse-cart 600ms var(--ease-out) 1;
}

/* ═══════════════════════════════════════════════════════════
   4 · MEGA-NAV — underline magnético (v2) que pasa de "dibujado" a
   "ENCENDIDO": glow del color de rol en hover. La nav clipea hacia
   abajo (overflow:hidden) → el glow irradia hacia arriba, asimétrico
   a propósito. + injertos: AA fix de info-links, jerarquía de cyans,
   divisores filamento, presencia WhatsApp.
   ═══════════════════════════════════════════════════════════ */

/* El border-bottom por-item de base se apaga: el ÚNICO acento
   inferior es el underline animado. */
.shop-header--v3 .mega-nav__special:hover,
.shop-header--v3 .mega-nav__special:focus-visible,
.shop-header--v3 .mega-nav__reboot[aria-current="page"] {
  border-bottom-color: transparent;
}
.shop-header--v3 .mega-nav__special {
  position: relative;
}
.shop-header--v3 .mega-nav__special::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-base) var(--ease-snap);
}
.shop-header--v3 .mega-nav__special:hover::after,
.shop-header--v3 .mega-nav__special:focus-visible::after {
  transform: scaleX(1);
}
/* Color + glow de rol por item. info sin glow: atenuados a propósito. */
.shop-header--v3 .mega-nav__builder::after { background: var(--builder-amber); }
.shop-header--v3 .mega-nav__deals::after   { background: var(--c-cyan-400); }
.shop-header--v3 .mega-nav__reboot::after  { background: var(--c-mag-500); }
.shop-header--v3 .mega-nav__info::after    { background: rgba(255, 255, 255, 0.25); }
.shop-header--v3 .mega-nav__wa::after      { background: var(--wa-green); }
.shop-header--v3 .mega-nav__builder:hover::after,
.shop-header--v3 .mega-nav__builder:focus-visible::after { box-shadow: 0 0 10px -2px rgba(255, 179, 71, 0.55); }
.shop-header--v3 .mega-nav__deals:hover::after,
.shop-header--v3 .mega-nav__deals:focus-visible::after   { box-shadow: 0 0 10px -2px rgba(62, 230, 230, 0.6); }
.shop-header--v3 .mega-nav__reboot:hover::after,
.shop-header--v3 .mega-nav__reboot:focus-visible::after  { box-shadow: 0 0 10px -2px rgba(230, 50, 132, 0.6); }
.shop-header--v3 .mega-nav__wa:hover::after,
.shop-header--v3 .mega-nav__wa:focus-visible::after      { box-shadow: 0 0 10px -2px rgba(37, 211, 102, 0.5); }

/* Página actual (rollout: reboot.html, etc.): underline fijo que
   respira apenas — el único latido lento permitido fuera del bus. */
.shop-header--v3 .mega-nav__reboot[aria-current="page"] {
  color: var(--c-white);
}
.shop-header--v3 .mega-nav__reboot[aria-current="page"]::after {
  transform: scaleX(1);
  box-shadow: 0 0 10px -2px rgba(230, 50, 132, 0.6);
  animation: hdr3-current-breathe 5s var(--ease-smooth) infinite alternate;
}
@keyframes hdr3-current-breathe {
  from { box-shadow: 0 0 10px -2px rgba(230, 50, 132, 0.4); }
  to   { box-shadow: 0 0 12px -2px rgba(230, 50, 132, 0.65); }
}
.shop-header--v3 .mega-nav__reboot[aria-current="page"] .rb-ico {
  color: var(--c-mag-400);
}

/* AA FIX (injerto Monolito): los info-links de base quedan a
   rgba(255,255,255,0.42) ≈ 2.5:1 sobre blue-800 — fail AA real.
   Bajo v3 suben a white-65 (≥4.5:1) sin perder su rol atenuado. */
/* Igual que el estado de WhatsApp: eran los dos que se caían primero
   al transparentar el fondo. Siguen siendo los links atenuados de la
   barra, sólo que ahora se leen. */
.shop-header--v3 .mega-nav__info { color: rgba(255, 255, 255, 0.74); }

/* Los tres controles de la derecha (zona, moneda, ingresar) estaban en
   blanco al 65%. Con el fondo al 78% sobre una página clara eso da 4,3
   de contraste — abajo del mínimo. A 74% vuelven a pasar sin dejar de
   ser lo secundario de la barra. */
.shop-header--v3 .act-loc,
.shop-header--v3 .act-user,
.shop-header--v3 .act-ccy-toggle { color: rgba(255, 255, 255, 0.74); }
.shop-header--v3 .mega-nav__info > svg { color: rgba(255, 255, 255, 0.45); }

/* JERARQUÍA DE CYANS (injerto Instrumental): en compact conviven
   quilla 3px + scroll-progress. El border-top de la mega-nav baja a
   hairline para que la lectura sea quilla > progress > nav. */
.shop-header--v3 .mega-nav {
  border-top: 1px solid rgba(62, 230, 230, 0.18);
}
/* Divisores → filamento (fade arriba y abajo, no barra plana). */
.shop-header--v3 .mega-nav__special-divider {
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.18), transparent);
}

/* PRESENCIA WHATSAPP (injerto Mostrador Vivo) — honesta: el dot verde
   y el "En línea" SOLO existen en horario real de atención (header-v3.js
   los inyecta según CONFIG.store.schedule). Sin loop, sin teatro: dot
   estático con glow fijo. Fuera de horario, no hay nada que mentir. */
.shop-header--v3 .hdr3-wa-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;
}
.shop-header--v3 .hdr3-wa-state {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  /* 0.55 -> 0.68 al pasar el header a vidrio. Es el texto más tenue de
     toda la barra: con el fondo translúcido quedaba por debajo del
     mínimo legible. El salto no se nota mirándolo, la diferencia se
     nota leyéndolo. */
  color: rgba(255, 255, 255, 0.68);
}
@media (max-width: 1024px) {
  .shop-header--v3 .hdr3-wa-state { display: none; }
}

/* ═══════════════════════════════════════════════════════════
   5 · MICRO — pin de ubicación pulsa UNA vez en hover (v2).
   ═══════════════════════════════════════════════════════════ */
.shop-header--v3 .act-loc:hover svg {
  animation: hdr3-pin-pulse 600ms var(--ease-out) 1;
}
@keyframes hdr3-pin-pulse {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* ═══════════════════════════════════════════════════════════
   6 · RESPONSIVE — réplica del escalado v2 verificado. Las luces v3
   no tocan layout: la degradación es exactamente v2 + luz.
   ═══════════════════════════════════════════════════════════ */

/* <=1100: .act-loc se oculta (regla base). Menos aire en laptops. */
@media (max-width: 1024px) {
  .shop-header--v3 .shop-header__top { padding-block: 22px; column-gap: 20px; }
  .shop-header.shop-header--v3.is-compact .shop-header__top { padding-block: 22px; }
  .shop-header--v3 .brand { padding-right: 20px; }
}

/* <=960: la base reflowa a 2 filas con search full-width. */
@media (max-width: 1024px) {
  .shop-header--v3 .shop-header__top { padding-block: 14px; column-gap: 16px; }
  .shop-header.shop-header--v3.is-compact .shop-header__top { padding-block: 14px; }
  .shop-header--v3 .brand { padding-right: 16px; }
}

/* <=760: brand más chico, sin hairline pesado. */
@media (max-width: 760px) {
  .shop-header--v3 .brand { padding-right: 14px; }
  .shop-header--v3 .brand-mark { font-size: 1.25rem; }
}

/* ═══════════════════════════════════════════════════════════
   7 · PREFERS-REDUCED-MOTION — sin pulso de carrito, sin respiración
   del underline activo, sin pin-pulse. Los ESTADOS quedan (quilla
   fina, aro de foco, LED del carrito, underline visible): son
   información, no decoración.
   ═══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .shop-header--v3,
  .shop-header--v3 .mega-nav__special::after,
  .shop-header--v3 .act-cart__count,
  .shop-header--v3 .act-cart,
  .shop-header--v3 .brand:hover .brand-dot {
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
  .shop-header--v3 .brand-dot,
  .shop-header--v3 .act-loc:hover svg,
  .shop-header--v3 .mega-nav__reboot[aria-current="page"]::after,
  .shop-header--v3.hdr3-cart-pulse::before {
    animation: none !important;
  }
  /* Underline activo/hover sin animar: aparece directo. */
  .shop-header--v3 .mega-nav__special::after { transition: none; }
  .shop-header--v3 .mega-nav__special:hover::after,
  .shop-header--v3 .mega-nav__special:focus-visible::after,
  .shop-header--v3 .mega-nav__reboot[aria-current="page"]::after {
    transform: scaleX(1);
  }
  .shop-header--v3 .act-cart:hover .act-cart__count { transform: none; }
}

/* ═══════════════════════════════════════════════════════════
   8 · FOCUS-VISIBLE — nítido sobre chrome dark, cyan 2px (v2).
   ═══════════════════════════════════════════════════════════ */
.shop-header--v3 a:focus-visible,
.shop-header--v3 button:focus-visible,
.shop-header--v3 input:focus-visible {
  outline: 2px solid var(--c-cyan-400);
  outline-offset: 2px;
}
/* La search ya muestra su ring inset en focus-within. */
.shop-header--v3 .search__input:focus-visible {
  outline: none;
}