/* ═══════════════════════════════════════════════════════════════════════════
   Encabezado de una sola barra (2-oct-2026, rama mejoras-v2)
   ─────────────────────────────────────────────────────────────────────────
   Antes eran tres franjas (contacto · logo con buscador · familias): 191 px en
   escritorio antes de ver un solo producto. Ahora es una barra —logo,
   familias, buscar, catálogo, cuenta y «Mi lista»— que se esconde al bajar y
   regresa al subir (como mariaprohibida.com y kodra.mx).

   · El menú de familias lo mete al encabezado un script en línea que va justo
     después del menú en cada página (scripts/cabecera-build.py): corre antes
     del primer pintado, así que no hay brinco. Si no corre, el menú se queda
     en su franja como siempre.
   · Esconder y regresar: /js/cabecera.js (clase html.cab-oculta).
   · Teléfono y correo siguen en el pie y en /conocenos; «Hasta 3 MSI con
     Banamex» pasa al pie (no cabe en la barra con las siete familias).
   ═══════════════════════════════════════════════════════════════════════════ */

.topbar { display: none !important; }

.header { transition: transform .38s cubic-bezier(.22, .8, .2, 1), box-shadow .3s ease; }
html.cab-oculta .header { transform: translateY(-100%); box-shadow: none !important; }
/* Con el teclado adentro nunca se esconde. */
html.cab-oculta .header:focus-within { transform: none; }

.cab-nav { display: none; }

@media (min-width: 1281px) {
  html.cab-una nav.nav { display: none !important; }
  html.cab-una .header { padding: 10px 0 !important; }
  html.cab-una .header .logo img,
  html.cab-una .header .logo-img { height: 38px !important; }
  html.cab-una .header-content { gap: 16px !important; }

  /* Las familias, en medio de la barra. Sin íconos ni «Compra/Cotiza»: con
     siete familias en una línea, la palabra basta. */
  .cab-nav { display: block; flex: 1 1 auto; min-width: 0; }
  .cab-nav .nav-list { display: flex; justify-content: center; align-items: center; gap: 2px; margin: 0; padding: 0; }
  .cab-nav .nav-list > .nav-item > .nav-link {
    padding: 10px 11px !important; font-size: 14px; font-weight: 600; border-radius: 10px; gap: 0;
    transition: background var(--mov-rapido, .15s) var(--curva, ease), color var(--mov-rapido, .15s) var(--curva, ease);
  }
  .cab-nav .nav-list > .nav-item > .nav-link > i,
  .cab-nav .nav-badge { display: none !important; }
  .cab-nav .nav-list > .nav-item:hover > .nav-link,
  .cab-nav .nav-list > .nav-item:focus-within > .nav-link { background: #EEF4F8; }
  /* El mega menú baja de la barra, CENTRADO bajo ella: con las familias en
     medio de la barra, colgado de cada sección se salía de la pantalla por
     la derecha (y aunque estuviera escondido, le daba a la página scroll
     lateral). !important porque nav-component.js le escribe `left` en línea. */
  html.cab-una .header-content { position: relative; }
  .cab-nav .nav-list > .nav-item { position: static; }
  .cab-nav .mega-menu { top: calc(100% + 2px); left: 50% !important; right: auto !important; translate: -50% 0; max-height: calc(100vh - 100px); }

  /* Buscar: una lupa. Al darle clic (o al tabular hacia ella) el campo se
     abre HACIA LA IZQUIERDA como capa encima de las familias; la barra no se
     reacomoda. (global-search.js sólo escucha Enter: no hay lista que mover.) */
  html.cab-una .header .search-box { flex: 0 0 46px; width: 46px; height: 44px; max-width: none !important; position: relative; z-index: 3; }
  html.cab-una .header .search-box input {
    position: absolute; right: 0; top: 0; width: 46px; height: 44px; background: #fff;
    padding: 0 44px 0 16px !important; border-radius: 12px; font-size: 14px; cursor: pointer;
    transition: width .32s cubic-bezier(.22, .8, .2, 1), box-shadow .32s ease;
  }
  html.cab-una .header .search-box:focus-within input { width: min(380px, 34vw); cursor: text; box-shadow: 0 12px 30px rgba(15, 41, 64, .14); }
  html.cab-una .header .search-box input::placeholder { color: transparent; }
  html.cab-una .header .search-box:focus-within input::placeholder { color: #94A3B8; }
  html.cab-una .header .search-box > i { left: auto !important; right: 15px; z-index: 1; pointer-events: none; }

  html.cab-una .header-btn:not(.cart-btn) span { display: none; }
  html.cab-una .header-actions, html.cab-una .cart-btn, html.cab-una .header-catalogo { white-space: nowrap; flex-wrap: nowrap; }
  html.cab-una .header-catalogo,
  html.cab-una .header-btn { padding: 10px 14px !important; }

}
@media (min-width: 1281px) and (max-width: 1439px) {
  html.cab-una .header-catalogo span { display: none; }
  .cab-nav .nav-list > .nav-item > .nav-link { padding: 10px 8px !important; font-size: 13.5px; }
}

/* «Hasta 3 MSI con Banamex» ya no cabe en la barra (siete familias, buscar,
   catálogo y «Mi lista»): cabecera.js lo pone en el pie, en todas las páginas. */
.cab-msi {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px;
  background: rgba(94, 234, 212, .14); color: #CFFAF0; font-size: 12.5px; font-weight: 700; white-space: nowrap;
}
.cab-msi svg { width: 15px; height: 15px; flex: none; }

/* La pasarela de la portada y la pieza del NX600 se pegan bajo la barra: al
   esconderse, suben con ella en vez de dejar una franja vacía. */
.eq__fijo, .nxp--vivo .nxp__fijo { transition: top .38s cubic-bezier(.22, .8, .2, 1), height .38s cubic-bezier(.22, .8, .2, 1), padding-top .38s cubic-bezier(.22, .8, .2, 1); }

@media (prefers-reduced-motion: reduce) {
  .header, .eq__fijo, .nxp--vivo .nxp__fijo { transition: none !important; }
}