/* ═══════════════════════════════════════════════════════════════
 *  navbar.css — Navbar compartido entre index.ejs y explorar.ejs
 * ═══════════════════════════════════════════════════════════════ */

/* ═══ NAVBAR ═══
 * Altura de la navbar expuesta como --nav-h (mismo criterio que --bn-h del
 * bottom nav). Las páginas que deben dejar hueco por debajo —el hero de la
 * portada— la leen como var(--nav-h) en vez de repetir «64px» a mano, para
 * que navbar y contenido no se desincronicen. */
:root { --nav-h: 64px; }
/* En el celular la barra superior se aprieta: los controles miden 34px, así
   que 54px deja 10px de aire arriba y abajo (antes 64px, con 15px de sobra que
   solo le quitaban pantalla al catálogo). La barra sigue sumando el
   safe-area-inset-top, así que en un celular con notch o en la PWA instalada
   no se mete debajo de la barra de estado: solo se recorta el aire de más. */
/* 46px en el celular: los controles miden 34px, así que quedan 6px de aire
   arriba y abajo (el mismo alto que la barra de navegación de iOS). Es lo
   mínimo que se puede apretar sin que los iconos ni la pastilla de avisos
   toquen los bordes; con esto todo el contenido de las páginas sube 4px más
   y la zona de arriba deja de comerse la pantalla. */
/* ═══ CELULAR: VERTICAL **Y** HORIZONTAL ═══
   La barra del celular no es solo «pantalla angosta»: un teléfono girado mide
   ~840px de ancho y antes caía en el diseño de escritorio, así que al girar
   aparecía el menú de arriba (con «Explorar») y desaparecía la barra de abajo
   que el dueño ya tiene ordenada. Ahora manda el TIPO de dispositivo: si es
   táctil y la pantalla es baja (un teléfono acostado), se usa el mismo diseño
   de celular en las dos orientaciones. */
@media (max-width: 1023px), (orientation: landscape) and (pointer: coarse) and (max-height: 620px) {
  /* 40px: el alto de la fila del celular (logo + controles). Es el valor que
     queda cuando la franja de promoción está APAGADA; con la franja encendida,
     el propio aviso declara `--nav-h: calc(40px + 30px)` desde _navbar.ejs. */
  :root { --nav-h: 40px; }
}

/* ═══ ANCLAS DEL MENÚ (#productos, #categorias, #promociones…) ═══
 *
 * Al tocar una opción del menú, el navegador salta a la sección y su título
 * quedaba ESCONDIDO debajo de la barra fija (a 21px de arriba, con una barra de
 * 64). Resultado: se veía la misma pantalla que ya estaba delante, sin
 * encabezado, y el cliente creía que el botón no había hecho nada — justo la
 * confusión de «Inicio» contra «Destacados». `scroll-margin-top` reserva el alto
 * de la barra (más el borde del celular con notch) y un poco de aire. */
:root { --ancla-offset: calc(var(--nav-h, 64px) + var(--sat, env(safe-area-inset-top, 0px)) + 14px); }
#productos,
#tiendas-por-tienda,
#categorias,
#promociones,
#reco-para-ti,
#reco-tendencias { scroll-margin-top: var(--ancla-offset); }
.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  /* La altura suma el safe-area del notch: en PWA/TWA y en pantallas con
     barra de estado superpuesta la navbar crece y su contenido baja, en vez
     de quedar tapado. Donde no hay notch, env() es 0 y no cambia nada. */
  height: calc(var(--nav-h) + var(--sat, env(safe-area-inset-top, 0px)));
  /* Insets laterales también: en móviles apaisados (o con isla/notch lateral)
     el contenido no debe quedar bajo las esquinas redondeadas de la pantalla. */
  /* El relleno de arriba NO suma el aviso: el logo y los controles se quedan
     exactamente donde estaban. La franja de promoción va abajo del todo (ver
     .nav-anuncio), sobre la línea blanca que separa el menú del contenido. */
  padding: var(--sat, env(safe-area-inset-top, 0px)) calc(32px + env(safe-area-inset-right, 0px)) 0 calc(32px + env(safe-area-inset-left, 0px));
  box-sizing: border-box;
  /* Fondo OPACO. Antes era rgba(10,10,10,0.8) + blur: el efecto «cristal»
     dejaba ver los productos por detrás de la barra al hacer scroll, y eso no
     debe pasar. El color es el mismo del fondo del sitio (--bg), sin
     transparencia; con el fondo ya opaco, el blur no aportaba nada y se quita
     (además ahorra GPU en el celular). */
  background: var(--bg, #0a0a0a);
  border-bottom: 1px solid var(--border);
  transition: all 0.3s ease;
}
.navbar.scrolled {
  background: var(--bg, #0a0a0a);
  box-shadow: 0 4px 30px rgba(0,0,0,0.3);
}

/* ═══ AVISO DE LA BARRA DE ARRIBA (campanita de promoción) ═══
   Antes salía SOLO en computadora (acá nacía apagado y lo encendía
   escritorio.css). El dueño pidió que también se vea en el celular, para poder
   anunciar una oferta ahí: ahora el aviso se dibuja en todos los tamaños, más
   apretado en el celular (una línea + el botón). El alto lo pone --nav-aviso,
   que `_navbar.ejs` declara solo cuando el aviso está encendido. */
.nav-anuncio {
  /* DÓNDE VA LA PROMOCIÓN (pedido del dueño): NO arriba de todo —ahí empujaba el
     logo— sino ABAJO del menú, pegada a la línea blanca que separa la barra del
     contenido, o sea entre el logo y el título de la página.
     `--nav-h` es el alto TOTAL de la barra (logo/menú + esta franja) y
     `--nav-aviso` el alto de la franja: restando uno menos el otro queda justo el
     borde de abajo del menú, donde va la línea. El relleno de arriba del navbar
     ya no la suma, así que el logo NO se mueve ni un píxel. */
  position: fixed;
  top: calc(var(--sat, env(safe-area-inset-top, 0px)) + var(--nav-h, 64px) - var(--nav-aviso, 30px));
  left: 0; right: 0; height: var(--nav-aviso, 30px);
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 0 12px;
  /* Fondo del aviso: antes era un gris PLOMO opaco (#26262c → #1a1a1f). El dueño
     pidió que se viera «un poco más transparente», así que ahora es el mismo
     degradado pero con alfa y un desenfoque detrás: se apoya en la barra en vez
     de verse como un parche pegado. */
    background: linear-gradient(90deg, rgba(38,38,44,0.86), rgba(26,26,31,0.86));
  border-bottom: 1px solid rgba(255,255,255,0.08);
  color: #f4f4f5; font-size: 11.5px; font-weight: 600;
  /* z-index 1 y NO 101: la franja vive DENTRO de la barra, así que con 1 ya
     queda por encima del fondo y del contenido de la barra, pero deja pasar los
     desplegables (menú de la cuenta z 210, campana z 3000). Con 101 los tapaba:
     el menú de la cuenta se abría DETRÁS de la franja de promoción.
     También se quitó el `backdrop-filter`: en Safari ese desenfoque obliga a la
     franja a pintarse en su propia capa y terminaba saliendo por encima de todo
     lo demás, ignorando el z-index. El degradado ahora es un poco más opaco
     para que se siga viendo igual de sólido. */
  z-index: 1;
}
/* El texto del aviso: entero si cabe; si NO cabe, el JS del navbar le pone la
   clase «con-movimiento» y el texto pasa en bucle de derecha a izquierda (antes
   se cortaba con «…»). La velocidad sale del largo del texto, así se lee igual
   de rápido aunque el mensaje sea más largo. */
.nav-anuncio-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
/* ── LA LÍNEA NO SE MUEVE POR EL EMOJI (2 de octubre) ──
   El mensaje de la promoción lleva un ⚡ que NO está en la letra de la tienda
   (Inter): el navegador lo dibuja con la letra de emojis del teléfono, y esa
   letra tiene métricas enormes (la misma que obligó a fijar la caja de los
   emojis de la barra del celular). Sin un `line-height` fijo, el alto del
   renglón dependía de esa letra y el texto «subía y bajaba» al cambiar de menú
   (el dueño: «la letra de promoción como que sube y baja»). Con la línea fija el
   emoji se sigue viendo, pero ya no empuja el renglón. */
.nav-anuncio-txt { line-height: 1.35; }
.nav-anuncio-mov { display: inline-block; white-space: nowrap; will-change: transform; line-height: 1.35; }
/* ── EL MENSAJE CORRE CON UNA ANIMACIÓN DEL NAVEGADOR (2 de octubre) ──
   Antes la posición se escribía cuadro por cuadro desde JavaScript. En Músicos la
   página mueve SU PROPIA cinta de créditos con otro bucle, así que los dos se
   peleaban por el mismo hilo de trabajo y en el celular las letras de la
   promoción «vibraban». Con una animación de CSS la mueve la placa de video: va
   pareja aunque la página esté ocupada.
   El paso (`--nav-anuncio-paso`), la duración y el retardo NEGATIVO los calcula
   el script con el reloj de siempre (ver _navbar.ejs): así, al cambiar de menú
   —cuando el navegador vuelve a arrancar la animación— el mensaje sigue
   exactamente donde iba, y el texto no salta si cambia el ancho de la franja. */
@keyframes nav-anuncio-corre {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-1 * var(--nav-anuncio-paso, 320px))); }
}
.nav-anuncio-txt.con-movimiento .nav-anuncio-mov {
  animation: nav-anuncio-corre var(--nav-anuncio-dur, 10s) linear infinite;
  animation-delay: var(--nav-anuncio-delay, 0s);
  animation-play-state: var(--nav-anuncio-pausa, running);
}
/* Quien pidió menos movimiento: sin animación (queda quieto y legible). */
@media (prefers-reduced-motion: reduce) {
  .nav-anuncio-txt.con-movimiento .nav-anuncio-mov { animation: none; }
}
.nav-anuncio-txt.con-movimiento { text-overflow: clip; }
/* DOS COPIAS del mensaje, una detrás de la otra: en cuanto la primera termina de
   salir por la izquierda, la segunda ya está entrando por la derecha (el dueño
   pidió que no quede la barra vacía ni un momento). La segunda copia solo se
   muestra cuando el bucle está encendido; si el mensaje entra, queda una sola. */
.nav-anuncio-mov .nav-anuncio-copia + .nav-anuncio-copia { display: none; }
.nav-anuncio-txt.con-movimiento .nav-anuncio-mov .nav-anuncio-copia + .nav-anuncio-copia { display: inline-block; }
.nav-anuncio-copia { white-space: nowrap; margin-right: 64px; }
/* EL MOVIMIENTO NO ES UNA ANIMACIÓN DE CSS: lo mueve un reloj en JavaScript
   (ver _navbar.ejs). Una animación de CSS se REINICIA cada vez que el elemento
   se saca y se vuelve a poner en el documento, y eso es justo lo que pasa al
   cambiar de menú (la franja sobrevive apartándose): el mensaje se veía «irse
   un poco a la derecha» y volver. Con la posición calculada por reloj, sigue
   exactamente donde iba, sin salto ni parpadeo. */
.nav-anuncio-cta {
  display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0;
  padding: 3px 9px; border-radius: 999px;
  background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.38);
  color: #fff; text-decoration: none; font-size: 11px; font-weight: 700;
}
/* La flecha del botón es un DIBUJO (ya no el carácter «→»): esa flecha NO está
   en la letra de la tienda, así que el navegador la sacaba de otra y salía
   distinta en cada equipo —más fina o más gorda— y movía la línea (el dueño:
   «la flechita del derecho se adelgaza»). Con el SVG se ve igual en todos lados. */
.nav-anuncio-cta .nav-anuncio-flecha { width: 12px; height: 12px; flex-shrink: 0; margin-top: 1px; }
/* ── EL AVISO AL PASAR EL MOUSE, SOLO DONDE HAY MOUSE (2 de octubre) ──
   En el celular, el toque deja el estado «hover» PEGADO: el botón quedaba
   blanco (y subido 1px) hasta tocar otra cosa, y el dueño lo vio como «el botón
   como que crece» al entrar a un menú. Es el mismo criterio que ya usan los
   enlaces del menú de arriba y la barra de abajo. */
@media (hover: hover) and (pointer: fine) {
  .nav-anuncio-cta:hover { background: #fff; color: #1a1a1a; transform: translateY(-1px); }
}

/* ═══ LOS ENLACES Y LAS REDES, EN LA MISMA FRANJA (2 de octubre) ═══
   El dueño los pidió «en la misma franja, en la misma ubicación que Intelec»:
   los enlaces de interés a la izquierda, los iconos de las redes a la derecha y
   el mensaje de la promoción en el medio, todo en el mismo renglón fino.
   Van con `position:absolute` a propósito: así el mensaje y su botón siguen
   centrados exactamente donde estaban y no se corren según cuántos enlaces haya.
   Los carga desde Administración → Textos y descripciones → «Enlaces y redes». */
.nav-anuncio .nav-franja-lado {
  position: absolute; top: 0; bottom: 0;
  display: flex; align-items: center; z-index: 1;
}
.nav-franja-izq { left: 16px; gap: 14px; }
.nav-franja-der { right: 14px; gap: 3px; }
.nav-anuncio .nav-franja-izq a {
  color: #d8d8df; font-size: 11.5px; font-weight: 600; text-decoration: none;
  white-space: nowrap; opacity: .82;
  transition: opacity .18s ease, color .18s ease;
}
.nav-anuncio .nav-franja-izq a:hover { opacity: 1; color: #fff; }
.nav-anuncio .nav-franja-der a {
  width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #d8d8df; opacity: .82; text-decoration: none;
  transition: background .18s ease, color .18s ease, opacity .18s ease;
}
.nav-anuncio .nav-franja-der a:hover { background: rgba(255,255,255,.14); color: #fff; opacity: 1; }
.nav-anuncio .nav-franja-der svg { width: 15px; height: 15px; }
/* En el celular la franja mide 30px y ya lleva el mensaje y su botón: los dos
   grupos se sacan para no apretar el mensaje (el dueño puede pedirlos ahí si
   algún día los quiere: irían en el menú ☰, no en esta franja). */
@media (max-width: 1023px) {
  .nav-anuncio .nav-franja-lado { display: none; }
}

/* ═══ EL BRILLO QUE PASA (como en Intelec) y la línea láser de abajo ═══
   El dueño vio en intelec.co.cr una cinta con un brillo tipo espejo que la cruza
   cada pocos segundos, y una línea fina (láser) por debajo. Es solo CSS: no baja
   nada, no gasta datos y se ve igual en celular y computadora.
   El color del brillo es cálido (rojizo/ámbar), como el de esa página; el borde
   de abajo queda como una LÍNEA LÁSER que va del rojo al ámbar. */
.nav-anuncio::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg,
    rgba(255,255,255,0) 38%,
    rgba(255,255,255,.10) 46%,
    rgba(255,170,150,.22) 50%,
    rgba(255,255,255,.10) 54%,
    rgba(255,255,255,0) 62%);
  transform: translateX(-120%);
  animation: nav-anuncio-brillo 7s linear infinite;
}
@keyframes nav-anuncio-brillo {
  0%   { transform: translateX(-120%); }
  55%  { transform: translateX(120%); }
  100% { transform: translateX(120%); }   /* descansa un momento y vuelve */
}
/* La línea fina (láser) pegada al borde de abajo de la franja. */
.nav-anuncio {
  border-bottom: 1px solid transparent;
  background-image:
    linear-gradient(90deg, rgba(38,38,44,0.55), rgba(26,26,31,0.55)),
    linear-gradient(90deg, #7f1d1d, #ef4444, #f59e0b, #ef4444, #7f1d1d);
  background-size: 100% 100%, 100% 2px;
  background-position: 0 0, 0 100%;
  background-repeat: no-repeat;
}
/* Quien pidió menos movimiento: sin brillo. */
@media (prefers-reduced-motion: reduce) {
  .nav-anuncio::after { animation: none; display: none; }
}
.navbar-brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 16px;
}
.navbar-brand svg { width: 24px; height: 24px; color: var(--purple); }
/* Logo de imagen del brand (personalizado por el super admin).
 *
 * Se mide por ALTO y el ancho queda libre: el logo puede ser cuadrado (un
 * icono) o ancho (el nombre completo, como el de Worship Sound Lab). Antes era
 * una caja cuadrada fija de 1.5em con fondo claro: al subir un logo ancho se
 * encogía a 24px y quedaba ilegible, además de que el fondo claro se veía como
 * un recuadro pegado sobre la barra oscura. */
.navbar-brand img.navbar-brand-img {
  height: 26px; width: auto; max-width: 260px;
  border-radius: 0; object-fit: contain; flex-shrink: 0; background: none;
}
#navbar .navbar-brand img.navbar-brand-img {
  /* CELULAR (y valor de fábrica): el logo queda como estaba siempre.
     El tamaño GRANDE es solo para la computadora: ver escritorio.css. */
  height: 1.28em; max-width: 220px;
}
/* Con logo, el nombre de al lado sobra: el recuadro ya lo trae escrito. */
#navbar .navbar-brand.con-logo span { display: none; }
.navbar-brand span {
  background: linear-gradient(135deg, var(--purple-light), var(--pink));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ═══ AUTO-ESCALE DEL LOGO EN EL NAVBAR (solo header nav) ═══
 * El logo del header se encoge suavemente en móviles angostos para
 * no colapsar el navbar. Acotado a #navbar para no afectar el footer,
 * que reutiliza .navbar-brand. */
#navbar .navbar-brand {
  /* clamp: 16px en desktop, se encoge por debajo de ~410px, floor 13px */
  font-size: clamp(13px, 3.9vw, 16px);
  white-space: nowrap;
  min-width: 0;
  flex-shrink: 1;
  line-height: 1.2;
  overflow: hidden;
}
#navbar .navbar-brand svg,
#navbar .navbar-brand img.navbar-brand-img {
  /* Escala junto al font-size (24px a 16px de fuente) */
  color: var(--purple); flex-shrink: 0;
}
#navbar .navbar-brand svg { width: 1.5em; height: 1.5em; }
/* El LOGO de imagen no lleva alto y ancho iguales: se fija el alto y el ancho
   se ajusta solo, para que quepa un logo ancho (el logotipo «STYLO SAMPLE»)
   sin quedar aplastado en un cuadro de 24px. `object-fit: contain` hace que,
   si el ancho no alcanza, el dibujo se encoja COMPLETO (nunca se deforma).
   El alto manda (así un logo cuadrado no se agiganta); en el celular el tope
   de ancho es en vw para que nunca pise los botones de la derecha.
   ALTO 1.28em (antes 1.5em) y una pizca de transparencia: el logotipo dorado
   se lee igual, pero deja de ser lo primero que salta a la vista en cada
   pantalla (la barra está para navegar, no para lucir el logo). */
#navbar .navbar-brand img.navbar-brand-img {
  height: 1.28em; width: auto; max-width: 220px;
  opacity: 0.88;
}
/* ── EL LOGO COMPLETO ES SOLO DE LA COMPUTADORA (2 de octubre) ──
   El dueño pidió que en la computadora esté su logo COMPLETO (el rombo, «STYLO
   SAMPLE», el teclado y «RITMOS Y SONIDOS») y que en el CELULAR se quede el de
   siempre. Acá se esconde el completo; quien lo enciende es escritorio.css,
   dentro de su media de computadora. */
#navbar .navbar-brand img.solo-pc { display: none; }

/* ═══ LOS DOS NOMBRES DEL MENÚ (nombre corto en la computadora) ═══
   Cada opción del menú de arriba viaja con su nombre completo y su versión
   corta, y acá se decide cuál se ve: la corta en la computadora (donde el menú
   entra al lado del logo) y la completa en el resto, donde ese menú está oculto.
   Se hace con CSS y NO con JavaScript a propósito: el script corría después del
   primer pintado, así que en una página que llega por partes (o al cambiar de
   menú sin recargar) el navegador alcanzaba a pintar los nombres largos y
   después se acortaban: se veía como que «todo el menú salta a la derecha y se
   acomoda». El nombre completo sigue apareciendo al pasar el mouse (title). */
#navbar-links .menu-nm-corto { display: none; }
@media (min-width: 1024px) {
  #navbar-links .menu-nm-largo { display: none; }
  #navbar-links .menu-nm-corto { display: inline; }
}
/* ═══ CANDADITO DE «EDITAR EL SITIO» (solo computadora, solo dueño/admin) ═══
 *
 * Su estilo TIENE que estar acá —y no solo en el JavaScript que lo enciende
 * (assets/admin/editar-en-sitio.js)—: ese archivo se baja con `defer`, así que
 * en cada cambio de página el botón alcanzaba a pintarse SIN ESTILO, con sus
 * dos iconos adentro y en tamaño original: se veían dos manchas blancas
 * parpadeando al lado del logo (y de paso el logo se corría al medio). Con el
 * estilo en esta hoja —que el navegador espera antes de pintar— nace ya
 * chiquito y en su lugar.
 *
 * Apagado en celular/tablet (ahí la edición no existe) y encendido desde 1024. */
.ee-lock { display: none; }
@media (min-width: 1024px) {
  .ee-lock {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px;
    /* `order: 2` lo deja pegado al logo (la barra ordena logo 1 · controles 2 ·
       menú 3) y `margin-right: auto` se lleva el aire sobrante a su derecha. */
    order: 2; margin-left: 10px; margin-right: auto; flex: none;
    border-radius: 9px; cursor: pointer;
    background: rgba(255,255,255,.05); border: 1px solid var(--border); color: var(--text-muted);
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
  }
  .ee-lock svg { width: 15px; height: 15px; }
  .ee-lock:hover { color: var(--text); border-color: #4b4b58; background: rgba(255,255,255,.09); }
  .ee-lock .ee-lock-abierto { display: none; }
  .ee-lock.abierto { background: rgba(139,92,246,.18); border-color: rgba(139,92,246,.55); color: #c4b5fd; }
  .ee-lock.abierto .ee-lock-abierto { display: block; }
  .ee-lock.abierto .ee-lock-cerrado { display: none; }
}
#navbar .navbar-brand span {
  /* min-width:0 permite que el span se encoja (ellipsis real como fallback) */
  min-width: 0;
  overflow: hidden; text-overflow: ellipsis;
}
/* Los links del header pueden ENCOGERSE y, si aun así no caben, se deslizan en
   horizontal (sin barra visible). Antes no podían: en pantallas de 769 a
   ~1100px —donde el menú de escritorio todavía se muestra— empujaban al logo
   (que quedaba en 0px de ancho, invisible) y sacaban la cuenta fuera de la
   barra. Ahora el logo y los controles de la derecha conservan su sitio. */
.navbar-links {
  display: flex; align-items: center; gap: 4px;
  flex: 0 1 auto; min-width: 0;
  /* ── EL AIRE DE ARRIBA Y ABAJO (2 de octubre) ──
     Esta fila se desplaza en horizontal, y con `overflow-x:auto` el navegador
     RECORTA lo que se salga por arriba o por abajo. La pastilla del menú lleva un
     anillo de 1px (box-shadow) que quedaba cortado, y al pasar el mouse el enlace
     se levantaba 1px: el dueño lo vio como «se sube un pelín y el borde de arriba
     se pierde». Este relleno le da ese aire para que ni el anillo ni el levante
     queden fuera de la caja. */
  padding: 3px 0;
  overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
}
.navbar-links::-webkit-scrollbar { display: none; }
.navbar-links a {
  /* ── Opción de menú tipo PASTILLA ──
     Antes era un bloque con esquinas suaves (8px) y el icono era un emoji
     pegado al texto. Ahora cada opción es una pastilla con su icono de línea
     (el mismo dibujo en la computadora y en el celular) y el elegido se marca
     con el acento y un halo suave: se lee moderno sin llenar la barra de color. */
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; border-radius: 999px; font-size: 13px;
  font-weight: 500; color: var(--text-muted);
  border: 1px solid transparent;
  /* Sin esto, el subrayado que el navegador les pone a TODOS los enlaces salía
     también acá: en la portada no se notaba (esa página lo apaga por su lado)
     pero en el resto del sitio el menú entero se veía subrayado. El menú del
     celular (.bottom-nav-item) ya lo apagaba; faltaba el de la barra de arriba. */
  text-decoration: none;
  /* Igual que en la barra del celular: el toque entra al primer intento. */
  touch-action: manipulation;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease,
              box-shadow 0.2s ease, transform 0.2s ease;
}
/* El «pasar el mouse» SOLO donde hay mouse (computadora). En el celular, el
   primer toque aplicaba este fondo y NO abría el menú: había que tocar dos
   veces. Sin hover, el primer toque entra. */
@media (hover: hover) and (pointer: fine) {
  .navbar-links a:hover {
    color: var(--text); background: var(--white-5);
    border-color: var(--white-8);
    /* Sin `translateY(-1px)`: el levante hacía que el borde de arriba de la
       pastilla se cortara contra la fila (que recorta por ser desplazable). El
       aviso al pasar el mouse ya lo dan el fondo, el borde y el color. */
  }
}
.navbar-links a.active {
  color: var(--purple-light); background: rgba(var(--purple-rgb), 0.14);
  border-color: rgba(var(--purple-rgb), 0.38);
  box-shadow: 0 0 0 1px rgba(var(--purple-rgb), 0.10), 0 8px 20px rgba(var(--purple-rgb), 0.14);
}
/* Icono de la opción del menú de escritorio (el emoji de cada línea y el de
   Videos). Va en su propio <span> para poder esconderlo en ventanas angostas y
   dejar solo el nombre. */
.navbar-links a .navbar-link-ico { display: inline-flex; align-items: center; font-size: 15px; line-height: 1; }
.navbar-links a .navbar-link-ico svg { width: 16px; height: 16px; }
/* Si una línea del catálogo NO tiene dibujo propio (una categoría nueva del
   dueño), el include deja su emoji: se le da el tamaño de antes para que no
   desentone con los iconos de trazo. */
.navbar-link-ico .ico-nav-emoji { font-size: 15px; line-height: 1; }
.bottom-nav-item .ico-bnav-emoji { font-size: 18px; line-height: 1; }
.navbar-links a .navbar-link-svg { width: 16px; height: 16px; vertical-align: -2px; }
.navbar-links a { white-space: nowrap; }
/* ═══ ACCIONES DEL NAVBAR (carrito · moneda · panel · campana · cuenta) ═══
 *
 * TODA la fila comparte alto (--na-h) y radio (--na-r). Antes cada control
 * llevaba su propia medida —carrito 36px, moneda 29, Dashboard 27, campana 36
 * (y redonda) y el chip de cuenta 40— así que la fila se veía desalineada: el
 * carrito "más grande" que el resto. Aquí los tokens se declaran una vez y los
 * usan todos, incluida la campana (que los hereda desde su propio include).
 *
 * Criterio de jerarquía: los controles de tienda (carrito, moneda) y la cuenta
 * son superficies neutras; el botón del Panel es el único con color de marca,
 * para que se lea como la acción principal. El chip de cuenta sigue siendo una
 * pastilla (tiene avatar), pero con el MISMO alto que los demás. */
.navbar-actions {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
  --na-h: 38px;
  --na-r: 10px;
}
/* Los <style>/<script> que viajan dentro del bloque de la campana no son cajas:
   no llevan alto ni cuentan para la separación. */
.navbar-actions > button,
.navbar-actions > a,
.navbar-actions > div { height: var(--na-h); }

/* Los botones cuadrados no heredan el relleno interno que el navegador le da
   a <button> por defecto. En algunas páginas ese relleno (1px 6px) dejaba el
   icono con solo 12px de ancho, aunque la caja midiera lo mismo: el carrito y
   la campana parecían encogerse al entrar a Soporte o Comunidad. */
.navbar-actions .btn-cart,
.navbar-actions .btn-panel,
.navbar-actions .notif-bell {
  padding: 0;
  box-sizing: border-box;
}
.navbar-actions .btn-cart svg,
.navbar-actions .btn-panel svg,
.navbar-actions .notif-bell svg {
  flex-shrink: 0;
}

/* Rayita que separa los dos grupos de la barra: lo de COMPRAR (moneda +
   carrito) y lo de TU CUENTA (avisos + menú). Agrupa sin tener que ponerle un
   borde a cada botón. Es solo un adorno: no se anuncia a los lectores. */
.navbar-sep {
  width: 1px; height: 18px; flex-shrink: 0;
  background: var(--border); margin: 0 -2px;
}

/* ═══ CASA → PANEL DE ADMINISTRACIÓN ═══
   Mismo cuadro neutro que el carrito y la campana (los tokens --na-h/--na-r
   los declara .navbar-actions). Antes era un botón relleno con el color de
   marca en medio de la fila y competía con el carrito; ahora es un icono más,
   pero sigue a un solo toque. */
.btn-panel {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--na-h, 38px); height: var(--na-h, 38px);
  border-radius: var(--na-r, 10px);
  background: var(--white-5); border: 1px solid var(--border);
  color: var(--text-secondary); flex-shrink: 0;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.btn-panel:hover { background: var(--white-10); color: var(--text); border-color: var(--border-light); transform: translateY(-1px); }
.btn-panel:active { transform: scale(.96); }
.btn-panel:focus-visible { outline: none; border-color: var(--purple); box-shadow: 0 0 0 3px var(--purple-20); }
.btn-panel svg { width: 17px; height: 17px; }

/* Feedback común: se levanta al pasar el dedo/ratón y se hunde al pulsar. */
.navbar-actions > button,
.navbar-actions > a,
.navbar-actions > div > button {
  transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1),
              background 0.18s ease, border-color 0.18s ease,
              color 0.18s ease, box-shadow 0.18s ease;
}
.navbar-actions > button:active,
.navbar-actions > a:active,
.navbar-actions > div > button:active { transform: scale(0.96); }
/* Anillo de foco visible (teclado): antes no había ninguno. */
.navbar-actions > button:focus-visible,
.navbar-actions > a:focus-visible,
.navbar-actions > div > button:focus-visible {
  outline: none;
  border-color: var(--purple);
  box-shadow: 0 0 0 3px var(--purple-20);
}

/* ═══ CURRENCY SELECTOR ═══ */
.btn-currency {
  display: inline-flex; align-items: center; gap: 5px;
  height: var(--na-h, 38px); padding: 0 13px; border-radius: var(--na-r, 10px);
  background: var(--white-5); border: 1px solid var(--border);
  color: var(--text-muted); cursor: pointer;
  font-size: 12px; font-weight: 600; font-family: inherit; letter-spacing: 0.2px;
}
.btn-currency:hover {
  background: var(--white-10); color: var(--text);
  border-color: var(--border-light); transform: translateY(-1px);
}
.btn-currency .curr-code { font-weight: 700; color: var(--text-secondary); }
.btn-currency .curr-symbol { font-size: 12px; opacity: 0.9; }

/* ═══════════════════════════════════════════════════════════════
   COLOR PREMIUM DE LOS ICONOS DE LA BARRA (3 de octubre)

   El carrito, el panel de administración, la campana de avisos, la flechita de
   la cuenta y los iconos del menú desplegable llevan un DEGRADADO DORADO (el
   mismo tono del logo) en vez del gris de antes, que se perdía contra el fondo
   oscuro. El dorado no depende del acento de la tienda a propósito: el acento
   puede ser gris azulado («Pizarra») y ahí el icono quedaba apagado.

   OJO con el orden: va `url(#marcaGrad)` Y ADEMÁS un color de respaldo. Si el
   degradado no se pudiera resolver (navegador viejo, página sin el <svg> de los
   degradados), el trazo queda igual con el dorado de respaldo: el icono NUNCA
   desaparece.

   DE DÓNDE SALE EL COLOR: del TEMA. Cada tema de `_helpers/temas.js` trae su
   pareja `--prem-1` (claro) / `--prem-2` (oscuro) y el servidor la inyecta en
   todas las páginas, así cambiar de tema cambia también este color. Acá quedan
   los valores de respaldo (el ORO del tema de fábrica) por si el tema no los
   trae: así nunca queda sin color.
   ═══════════════════════════════════════════════════════════════ */
#marcaGrad .mg-a { stop-color: var(--prem-1, #fbeab4); }
#marcaGrad .mg-b { stop-color: var(--prem-2, #d9a72e); }

.navbar-actions .btn-cart svg,
.navbar-actions .btn-cart svg *,
.navbar-actions .btn-panel svg,
.navbar-actions .btn-panel svg *,
.navbar-actions .notif-bell svg,
.navbar-actions .notif-bell svg *,
.navbar-actions .navbar-user-chevron,
.navbar-actions .navbar-user-chevron *,
.navbar-actions .navbar-user-menu-item svg,
.navbar-actions .navbar-user-menu-item svg * {
  stroke: url(#marcaGrad) var(--prem-2, #d9a72e);
}

/* El símbolo de la moneda («S/»), con el mismo dorado. */
.navbar-actions .curr-symbol {
  background: linear-gradient(135deg, var(--prem-1, #fbeab4), var(--prem-2, #d9a72e));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--prem-2, #d9a72e);
  opacity: 1; font-weight: 800; text-shadow: none;
}

/* El avatar de la cuenta, con el degradado dorado (antes era índigo→índigo
   oscuro: se veía casi plano). */
.navbar-actions .navbar-user-avatar {
  background: linear-gradient(135deg, var(--prem-1, #fbeab4), var(--prem-2, #d9a72e));
  color: #2a1f05;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}
/* La rayita que separa comprar de tu cuenta, con el mismo color apagado. */
.navbar-actions .navbar-sep {
  background: linear-gradient(180deg, transparent, var(--prem-2, #d9a72e), transparent);
  opacity: .55;
}

/* ═══ BUTTONS (compartidos navbar) ═══ */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: 10px; font-size: 13px;
  font-weight: 500; font-family: inherit;
  border: none; cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
  white-space: nowrap;
}
.btn-ghost {
  background: transparent; color: var(--text-muted);
  border: 1px solid var(--border);
}
.btn-ghost:hover { background: var(--white-5); color: var(--text); border-color: var(--border-light); }
.btn-primary {
  background: linear-gradient(135deg, var(--purple), var(--purple-dark));
  /* El halo usa los tintes del acento: si el dueño cambia el color de marca,
     la sombra del botón lo acompaña (antes quedaba morada siempre). */
  color: #fff; box-shadow: 0 2px 10px var(--purple-20);
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 20px var(--purple-30);
}
.btn-sm { padding: 6px 12px; font-size: 12px; border-radius: 8px; }

/* Botón del Panel dentro de la barra: misma caja que el resto de la fila.
   Es el único con color de marca, así que no necesita más tamaño para
   destacar. Antes medía 27px de alto contra los 36 del carrito. */
.btn-dashboard {
  height: var(--na-h, 38px);
  padding: 0 15px;
  border-radius: var(--na-r, 10px);
  font-size: 12px;
}

/* ═══ AUTH BUTTONS (Iniciar Sesión / Crear Cuenta) ═══
 * En escritorio muestran icono + texto. En móvil el label se oculta
 * y quedan como botones icono-only compactos (mismo patrón que
 * .btn-dashboard) para no ocupar espacio en el navbar. */
.nav-auth-btn { white-space: nowrap; }
.nav-auth-btn .nav-auth-icon { flex-shrink: 0; }
.btn-outline-light {
  background: transparent; color: var(--text);
  border: 1px solid rgba(255,255,255,0.2);
}
.btn-outline-light:hover { background: var(--white-10); border-color: rgba(255,255,255,0.3); }
.btn-lg { padding: 12px 28px; font-size: 15px; border-radius: 12px; }

/* ═══ USER CHIP (logueado) ═══ */
.navbar-user-wrap { position: relative; }
.navbar-user {
  display: inline-flex; align-items: center; gap: 8px;
  /* Alto de la fila (--na-h) y relleno simétrico alrededor del avatar, que mide
     30px: 4 + 30 + 4 = 38. Así la pastilla queda a la misma altura que el
     carrito, la moneda y el botón del Panel. */
  height: var(--na-h, 38px);
  padding: 4px 12px 4px 4px; border-radius: 100px;
  border: 1px solid var(--border);
  background: var(--white-5);
  color: var(--text);
  font-family: inherit; font-size: 13px; cursor: pointer;
}
.navbar-user:hover { background: var(--white-10); border-color: var(--purple); transform: translateY(-1px); }
.navbar-user:active { transform: scale(0.97); }
.navbar-user-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--purple), var(--purple-dark));
  box-shadow: 0 2px 8px var(--purple-30);
}
.navbar-user-email {
  font-size: 12px; font-weight: 500; color: var(--text-secondary);
  max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.navbar-user-chevron {
  flex-shrink: 0; color: var(--text-dim);
  transition: transform 0.2s ease;
}
.navbar-user-wrap.open .navbar-user-chevron { transform: rotate(180deg); }

/* ═══ MENÚ DESPLEGABLE DEL USUARIO ═══ */
.navbar-user-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 210;
  min-width: 244px; padding: 6px; border-radius: 12px;
  background: var(--card, #18181b);
  border: 1px solid var(--border);
  box-shadow: 0 12px 40px rgba(0,0,0,0.45);
  display: none; flex-direction: column; gap: 2px;
  animation: navbarFadeIn 0.15s ease;
}
.navbar-user-wrap.open .navbar-user-menu { display: flex; }
/* ── CABECERA DEL MENÚ: quién eres ──
   Como en las webs grandes: primero tu avatar y tu correo, después las
   opciones. Antes el menú arrancaba con «Mi Perfil» y tu cuenta aparecía al
   final, debajo de un título «Cambiar de cuenta» que no aplicaba. */
.navbar-cuenta-cabecera { display: flex; align-items: center; gap: 10px; padding: 8px 10px 6px; }
.navbar-cuenta-avatar {
  width: 32px; height: 32px; border-radius: 50%; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800;
  background: var(--purple-10); color: var(--purple-light); border: 1px solid var(--purple-20);
}
.navbar-cuenta-datos { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.navbar-cuenta-correo {
  font-size: 12.5px; font-weight: 600; color: var(--text);
  max-width: 178px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.navbar-cuenta-estado { font-size: 10.5px; font-weight: 600; color: #6ee7b7; }
/* Rótulos de grupo («Mi cuenta», «Mis productos»): separan las opciones por
   tema, en vez de una lista larga sin orden. */
.navbar-menu-rotulo {
  padding: 7px 12px 4px; font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim);
}
.navbar-menu-sep { height: 1px; background: var(--border); margin: 6px 4px; }
.navbar-menu-sep[hidden] { display: none; }
/* Un ítem marcado como oculto (el de «Distribuidor», que solo le toca a quien
   es distribuidor) tiene que quedar oculto de verdad: el `display: flex` de
   abajo le gana al [hidden] del navegador. */
.navbar-user-menu-item[hidden] { display: none; }
.navbar-user-menu-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: 8px;
  font-size: 13px; font-weight: 500; color: var(--text-secondary);
  text-decoration: none; background: none; border: none;
  font-family: inherit; cursor: pointer; width: 100%; text-align: left;
  transition: all 0.15s ease;
}
.navbar-user-menu-item:hover { background: var(--white-5); color: var(--text); }
.navbar-user-menu-item svg { width: 15px; height: 15px; flex-shrink: 0; }
.navbar-user-menu-item.navbar-user-logout { color: var(--red); }
.navbar-user-menu-item.navbar-user-logout:hover { background: rgba(239,68,68,0.12); color: var(--red); }

@keyframes navbarFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .navbar-user-menu { animation: none; }
}

/* ═══ AJUSTES POR ANCHO ═══
 * El correo del chip de cuenta es lo más ancho de la barra (≈150px). Se oculta
 * antes que el resto para que quepan el logo, los links y todos los controles;
 * el correo sigue estando en «Mi Perfil» y en el menú de la cuenta. */
@media (max-width: 1100px) {
  #navbar .navbar-user-email { display: none; }
}
/* ═══ ANCHOS MEDIOS (tabletas y ventanas angostas, 769-1150px) ═══
   Con siete opciones la fila se cortaba y las últimas («Cursos de Video»,
   «Explorar») quedaban fuera de la vista, escondidas en un desplazamiento
   horizontal sin barra visible. Acá se muestra EXACTAMENTE el mismo menú que
   en el celular —las cuatro líneas + Videos— y se afina el espaciado: así
   entran todas y el orden coincide con el de la barra del celular.
   «Explorar» (todo el catálogo) sigue estando en la portada, en su botón
   «Explorar todos los productos», y en el pie («Todo el catálogo»). */
@media (max-width: 1150px) {
  #navbar .navbar-links a { padding: 8px 9px; font-size: 12.5px; }
  /* Sin los emojis entra un nombre más en la misma fila (en el celular los
     iconos sí están: son SVG en la barra de abajo). */
  #navbar .navbar-links .navbar-link-ico,
  #navbar .navbar-links .navbar-link-svg { display: none; }
}
/* Con espacio de sobra (escritorio) el logo nunca se encoge. */
@media (min-width: 769px) {
  #navbar .navbar-brand { flex-shrink: 0; }
}

/* ═══ MOBILE NAVBAR ═══ */
@media (max-width: 480px) {
  /* El padding superior del safe-area se conserva: si se pone a 0, en un
     dispositivo con notch la navbar volvería a taparse a sí misma. */
  .navbar { padding: var(--sat, env(safe-area-inset-top, 0px)) calc(12px + env(safe-area-inset-right, 0px)) 0 calc(12px + env(safe-area-inset-left, 0px)); }
  #navbar .navbar-brand { gap: 7px; }
  /* En pantallas angostas se recorta lo accesorio para que el logo y los
     controles entren sin pisarse: queda «$» (el símbolo, cortito) en vez de
     «$ USD». Antes se escondía el símbolo y se veía el código, que ocupa el
     doble y le robaba ese espacio al logotipo. */
  .btn-currency .curr-code { display: none; }
  .navbar-actions { gap: 5px; }
}
@media (max-width: 1023px), (orientation: landscape) and (pointer: coarse) and (max-height: 620px) {
  .navbar { padding: var(--sat, env(safe-area-inset-top, 0px)) calc(16px + env(safe-area-inset-right, 0px)) 0 calc(16px + env(safe-area-inset-left, 0px)); }
  /* ── EL AIRE DE ARRIBA, EL JUSTO (2026-10-02) ──
     El dueño vio en el celular una franja negra grande entre el reloj del
     teléfono y el logo. La causa: el logo y los controles se centraban en TODO
     el alto de la barra (la fila + la franja de promoción), así que les tocaba
     como aire de arriba la mitad de la franja.
     Con este relleno de abajo igual al alto de la franja, lo que se centra es
     SOLO la fila: los iconos quedan a ~6px de la barra de estado y la
     promoción pegada justo debajo. Si el aviso está apagado, `--nav-aviso` no
     existe y el relleno vale 0 (no queda una banda vacía arriba).
     Va DESPUÉS del `padding` de arriba para que este shorthand no lo borre. */
  .navbar { padding-bottom: var(--nav-aviso, 0px); }
  .navbar-links { display: none; }
  /* En el celular la fila baja a 34px y se junta un poco: entra todo sin
     apretarse y sigue alineada (el chip de cuenta también mide 34). */
  .navbar-actions { --na-h: 34px; --na-r: 10px; gap: 5px; }
  /* El logo se mide por ALTO (1.28em ≈ 20px) y su ancho nunca pasa del hueco
     real que queda entre el relleno de la barra y los botones de la derecha
     (`max-width: 100%` sobre la caja del brand, que es la que se encoge).
     Con `object-fit: contain` el logotipo se dibuja completo: en un teléfono
     de 435px mide 140×15 — se lee perfecto y ya no compite con el contenido.
     Antes de todo esto medía 20×20 con el dibujo de 16×10 y no se leía nada. */
  #navbar .navbar-brand img.navbar-brand-img { height: 1.28em; max-width: min(100%, 140px); }
  .nav-auth-btn { padding: 0 10px; justify-content: center; gap: 0; }
  .nav-auth-btn .nav-auth-label { display: none; }
  .btn-dashboard { padding: 0 11px !important; justify-content: center; }
  .btn-dashboard .dashboard-label { display: none; }
  /* 3 + 28 + 3 = 34 */
  .navbar-user { padding: 3px 10px 3px 3px; }
  .navbar-user-email { display: none; }
  .navbar-user-avatar { width: 28px; height: 28px; font-size: 12px; }
  /* En el celular el menú ocupa el ancho cómodo: los rótulos de grupo y el
     correo necesitan algo más que los 180px de antes. */
  .navbar-user-menu {
    min-width: 236px; max-width: calc(100vw - 24px); right: -8px;
    /* Compacto en el celular: no debe sentirse como una pantalla completa. */
    padding: 4px; gap: 0;
    max-height: calc(var(--vh-real, 100dvh) - var(--nav-h, 90px) - var(--bn-h, 70px) - 12px);
    overflow-y: auto; overscroll-behavior: contain;
  }
  .navbar-cuenta-cabecera { padding: 5px 8px 4px; gap: 8px; }
  .navbar-cuenta-avatar { width: 28px; height: 28px; font-size: 12px; }
  .navbar-cuenta-datos { gap: 1px; }
  .navbar-cuenta-correo { max-width: 168px; font-size: 11.5px; }
  .navbar-cuenta-estado { font-size: 9.5px; }
  .navbar-menu-rotulo {
    padding: 4px 8px 2px; font-size: 9.3px; line-height: 1.2;
  }
  .navbar-menu-sep { margin: 3px 2px; }
  .navbar-user-menu-item {
    min-height: 34px; padding: 5px 8px; gap: 7px;
    font-size: 11.5px; line-height: 1.25;
  }
  .navbar-user-menu-item svg { width: 14px; height: 14px; }
  /* Aprovecha el ancho: las opciones cortas van en dos columnas. El bloque de
     cuentas sigue en una sola porque necesita mostrar correos completos. */
  .navbar-menu-grupo:not(#navbar-user-cuentas) {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px 3px;
  }
  .navbar-menu-grupo:not(#navbar-user-cuentas) > .navbar-menu-rotulo {
    grid-column: 1 / -1;
  }
  .navbar-menu-grupo:not(#navbar-user-cuentas) .navbar-user-menu-item {
    min-width: 0;
  }
}

/* ═══ EL LOGO SEGÚN EL ANCHO ═══
 * Van de mayor a menor para que el más angosto gane (misma especificidad: el
 * último que coincide manda). El logo es ancho (4,5:1), así que el alto decide
 * el ancho: 1.4em ≈ 100px, 1.3em ≈ 95, 1.05em ≈ 76. En la barra del celular
 * quedan ~100px libres a 390px y ~76px a 360px, después de los controles. */
/* El alto del logo ya NO baja según el ancho (llegaba a 0.95em y el logotipo
   era ilegible): el alto es 1.5em en todos los tamaños y solo se recorta el
   ANCHO con `min(40vw, 160px)`. */
/* ═══ TELÉFONOS DE 320-340px (iPhone SE 1ª gen y similares) ═══
   Con cinco controles de 34px no queda hueco para el logo: medía 59px y su
   caja 35px, así que se montaba sobre el carrito. Aquí se achican los
   controles (28px) y los huecos, y así el logo entra sin pisar nada. */
@media (max-width: 340px) {
  .navbar { padding-left: 8px; padding-right: 8px; }
  .navbar-actions { --na-h: 30px; gap: 4px; }
  .navbar-user { padding: 2px 7px 2px 2px; }
  .navbar-user-avatar { width: 26px; height: 26px; font-size: 11px; }
  /* El atajo «Panel» se saca de la barra: en un teléfono de 320px el logo se
     montaba encima del carrito y este botón es el único que está DUPLICADO (el
     menú de la cuenta tiene «Panel Admin»). Así el logo entra completo. */
  /* `!important` a propósito: la clase .btn de la hoja compartida también fija
     display y, según el orden de carga, volvía a mostrarlo. */
  .navbar .btn-dashboard { display: none !important; }
  /* En 320px el hueco es mínimo: se deja el ancho del todo al brand (que ya
     se encoge solo) y el atajo «Panel» se esconde para liberar 34px. */
  #navbar .navbar-brand img.navbar-brand-img { max-width: min(100%, 42vw); }
}

/* ═══ BOTTOM NAV (móvil ≤768px) ═══
 * Replica las opciones del header nav (oculto en móvil). Fijo al fondo,
 * debajo del reproductor floating, del buybar del producto y de los
 * modales. La altura se expone como --bn-h (0 en desktop, 60px en móvil)
 * para que el reproductor, el buybar y el botón scroll-top se eleven
 * correctamente sobre esta barra. */
:root { --bn-h: 0px; }
.bottom-nav {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 160;
  /* 70px (antes 60) para que quepan las letras a 11px en dos líneas sin que el
     dedo las tape. El relleno inferior reserva el safe-area del celular (barra
     de gestos del iPhone o del Android): ese era el hueco por el que se perdía
     el final de los nombres. Los lados también reservan el notch en horizontal
     (celular acostado), donde antes la primera y la última opción se cortaban. */
  height: calc(70px + env(safe-area-inset-bottom, 0px));
  /* 7px arriba y 7px abajo (antes 8 y 10) dejan 56px útiles: ahí entran el
     icono (20), el hueco (3) y las DOS líneas del nombre (29,7) = 52,7px. Con
     los valores viejos el nombre se aplastaba a 21px y se comía la última
     línea (era lo que se veía «escondido hacia abajo»). */
  padding: 7px calc(8px + env(safe-area-inset-right, 0px))
           calc(7px + env(safe-area-inset-bottom, 0px))
           calc(8px + env(safe-area-inset-left, 0px));
  box-sizing: border-box;
  /* Opaco por el mismo motivo que la navbar: con rgba(…,0.9) se veían los
     productos por detrás de la barra inferior. */
  background: var(--bg, #0a0a0a);
  border-top: 1px solid var(--border);
  box-shadow: 0 -8px 24px rgba(0,0,0,0.25);
  justify-content: space-around;
  align-items: stretch;
}
.bottom-nav-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  /* flex 1 1 0: las opciones se reparten el ancho a partes iguales. Antes cada
     una pedía el ancho de su texto y, con 5-6 opciones, la última quedaba
     aplastada y su nombre salía cortado. */
  flex: 1 1 0; gap: 3px; min-width: 0; padding: 1px 3px;
  /* 11px (antes 9): a 9px las opciones apenas se leían en el celular. En un
     teléfono de 390px cada opción tiene ~74px de ancho, así que «Ritmos
     Yamaha» o «Cursos de Video» caben en dos líneas sin recortarse. */
  font-size: 11px; font-weight: 600; letter-spacing: 0;
  color: var(--text-dim); text-decoration: none;
  /* `touch-action: manipulation`: el navegador no espera a ver si el toque es
     un doble toque para hacer zoom. Sin esto, en algunos celulares el primer
     toque se queda «en veremos» y hace falta tocar de nuevo. */
  touch-action: manipulation;
  border-radius: 10px;
  transition: color 0.2s ease, background 0.2s ease, transform 0.15s ease;
}
.bottom-nav-item svg { width: 20px; height: 20px; flex-shrink: 0; }
/* Icono de las líneas del catálogo (emoji): mismo tamaño que los SVG para que
   la fila quede alineada, sea cual sea el icono que use cada línea. */
.bottom-nav-item .bottom-nav-emoji {
  /* ── LA CAJA DEL EMOJI MIDE LO MISMO QUE UN ICONO SVG (20 × 20) ──
     Sin esto el `<span>` del emoji medía 50 px de alto: la fuente de emojis
     tiene métricas enormes, así que el dibujo se salía por ARRIBA de la barra
     (se veía cortado) y empujaba el nombre 14 px hacia abajo. Por eso «SF2» y
     «NKI» —las dos líneas que usan emoji en vez de icono— quedaban
     desalineadas del resto. Con la caja fija y el emoji centrado, las nueve
     opciones quedan a la misma altura. */
  width: 20px; height: 20px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; line-height: 1;
  /* El emoji NO es el nombre de la opción: hay que soltarle las reglas del
     texto (`min-height` de dos renglones, relleno y recorte de líneas), porque
     con la letra a 18px ese `min-height` daba 49,6px. */
  min-height: 0; padding: 0; overflow: visible;
  -webkit-line-clamp: none; -webkit-box-orient: horizontal;
}
.bottom-nav-item span {
  /* Dos líneas: con el menú por líneas del catálogo («Utilidades Yamaha»,
     «Cursos de Video») los nombres no caben en una sola en un teléfono con 5
     opciones, y recortados con puntos suspensivos no se entendía qué decían. */
  /* 1.35 (antes 1.2): con la línea apretada, la cola de la «g» de «Korg» y de
     «Cursos» quedaba cortada por el recorte de dos líneas.
     min-height 2 líneas + flex-shrink:0 → TODAS las opciones miden lo mismo
     («Inicio» y «Videos», que van en una línea, también reservan dos), así los
     seis iconos quedan exactamente a la misma altura. Antes el nombre se
     aplastaba (scrollHeight 27 vs clientHeight 21) y los iconos bailaban 3,4px
     entre la primera opción y las demás. */
  max-width: 100%; overflow: hidden; text-align: center; line-height: 1.35;
  /* 2 líneas + el relleno de abajo: la MISMA altura en las seis opciones
     (si no, «Inicio» y «Videos» miden 1px menos y su icono sube 0,5px). */
  min-height: calc(2 * 1.35em + 1px); flex-shrink: 0;
  padding-bottom: 1px;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  /* El nombre corto («Inicio», «Videos», «SF2», «NKI») ocupa UNA línea, pero su
     caja reserva dos para que todas las opciones midan lo mismo. Con
     `-webkit-box-pack: center` ese nombre queda centrado en su caja: antes se
     pegaba arriba y parecía que su icono estaba más alto que los demás. */
  -webkit-box-pack: center;
  word-break: break-word;
}
/* Igual que arriba: en el celular no hay «hover». Ese era el culpable de que el
   primer toque iluminara el botón en blanco sin abrir nada y hubiera que tocar
   dos veces (el navegador interpreta el primer toque como «pasar el mouse»). */
@media (hover: hover) and (pointer: fine) {
  .bottom-nav-item:hover { color: var(--text); background: var(--white-5); }
}
/* ═══ EL TOQUE NO ENCOGE LA CAJA DEL ENLACE ═══
   Antes el `:active` encogía el enlace entero (scale 0.94). En el celular eso
   trae un problema real: si el dedo cae cerca del borde, la caja se achica
   mientras está apretada y el toque TERMINA FUERA del enlace, así que el
   navegador no dispara el clic → había que tocar DOS veces el mismo menú
   (pasaba a veces, según dónde cayera el dedo). Ahora se encoge solo lo que se
   ve (icono y nombre) y la caja del toque queda siempre del mismo tamaño. */
.bottom-nav-item:active { transform: none; background: var(--white-5); }
.bottom-nav-item:active svg,
.bottom-nav-item:active .bottom-nav-emoji,
.bottom-nav-item:active span {
  transform: scale(0.92);
  transition: transform 0.08s ease;
}
.bottom-nav-item.active { color: var(--purple-light); background: var(--purple-10); }
.bottom-nav-item.active svg { color: var(--purple); }
/* ═══ CUANDO LA BARRA LLEVA MÁS OPCIONES (las que agrega el dueño) ═══
   El ancho se reparte entre todas: con 7 u 8 el nombre de 11px ya no entra en
   dos renglones, así que se achica un punto el texto y el icono. Se marca la
   cantidad desde la plantilla con data-n, así el ajuste es exacto. */
.bottom-nav[data-n="7"] .bottom-nav-item span,
.bottom-nav[data-n="8"] .bottom-nav-item span,
/* Con 9 opciones (las 6 líneas + Inicio + Videos + Artistas) el ancho por
   opción queda en ~47 px: el nombre se achica otro punto para que entre en dos
   renglones sin recortarse. */
.bottom-nav[data-n="9"] .bottom-nav-item span,
.bottom-nav[data-n="10"] .bottom-nav-item span { font-size: 10px; }
.bottom-nav[data-n="7"] .bottom-nav-item svg,
.bottom-nav[data-n="8"] .bottom-nav-item svg { width: 19px; height: 19px; }
.bottom-nav[data-n="8"] .bottom-nav-item span,
.bottom-nav[data-n="9"] .bottom-nav-item span,
.bottom-nav[data-n="10"] .bottom-nav-item span { font-size: 9.5px; }
.bottom-nav[data-n="9"] .bottom-nav-item svg,
.bottom-nav[data-n="10"] .bottom-nav-item svg { width: 18px; height: 18px; }
.bottom-nav[data-n="9"] .bottom-nav-item .bottom-nav-emoji,
.bottom-nav[data-n="10"] .bottom-nav-item .bottom-nav-emoji { font-size: 16px; }
/* OJO: ese achique es para la barra REPARTIDA (la que entra entera apretando el
   texto). En la deslizable no hace falta: ahí cada opción conserva su tamaño y
   el nombre se lee cómodo. */
.bottom-nav.deslizable[data-n="7"] .bottom-nav-item span,
.bottom-nav.deslizable[data-n="8"] .bottom-nav-item span,
.bottom-nav.deslizable[data-n="9"] .bottom-nav-item span,
.bottom-nav.deslizable[data-n="10"] .bottom-nav-item span { font-size: 11px; }
.bottom-nav.deslizable[data-n="7"] .bottom-nav-item svg,
.bottom-nav.deslizable[data-n="8"] .bottom-nav-item svg,
.bottom-nav.deslizable[data-n="9"] .bottom-nav-item svg,
.bottom-nav.deslizable[data-n="10"] .bottom-nav-item svg { width: 20px; height: 20px; }
.bottom-nav.deslizable[data-n="9"] .bottom-nav-item .bottom-nav-emoji,
.bottom-nav.deslizable[data-n="10"] .bottom-nav-item .bottom-nav-emoji { font-size: 18px; }
/* ═══ BARRA DESLIZABLE (opción del dueño, /admin/menus) ═══
   Cuando hay más menús de los que entran, la fila se recorre deslizando el
   dedo —igual que la fila de categorías del catálogo—: cada opción conserva su
   tamaño (no se aprieta el nombre) y la barra no cambia de alto. Se ven las que
   entran y el resto se alcanza con el dedo; al abrir una página, la opción
   activa queda centrada sola. La barra de desplazamiento no se muestra. */
.bottom-nav.deslizable {
  /* `safe center`: cuando TODAS las opciones entran, la fila queda centrada (si
     no, quedaban apiladas a la izquierda y con un hueco vacío a la derecha, que
     es lo que se veía «descolgado» en pantallas anchas). Cuando NO entran, el
     `safe` hace que se alineen al principio, así la primera opción nunca queda
     cortada fuera de la vista. Los navegadores que no entienden `safe` se
     quedan con el `flex-start` de la línea de arriba. */
  justify-content: flex-start;
  justify-content: safe center;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-snap-type: x proximity;
  /* Un poco de aire a los costados para que la primera y la última opción no
     queden pegadas al borde de la pantalla. */
  padding-left: calc(10px + env(safe-area-inset-left, 0px));
  padding-right: calc(10px + env(safe-area-inset-right, 0px));
}
.bottom-nav.deslizable::-webkit-scrollbar { display: none; }
.bottom-nav.deslizable .bottom-nav-item {
  /* TODAS del mismo ancho: antes cada una medía lo suyo (74 a 95) y la fila se
     veía despareja, con las opciones «corridas» entre sí. Con un ancho fijo el
     nombre se acomoda en dos líneas iguales en todas y la fila queda pareja. */
  /* 62 px (antes 84 → 78 → 70): el dueño volvió a pedir apretarlas —«se ven
     algo separados, los iconos no están bien medidos en los espacios»—. Con
     62 px el nombre más largo («Utilerías») sigue entrando en dos renglones
     (56 px útiles de ancho) y a la vista entran seis opciones y media en vez de
     cinco y media. */
  flex: 0 0 62px;
  width: 62px;
  min-width: 62px;
  scroll-snap-align: center;
}

/* «Comunidad» es la etiqueta más larga de la barra. En algunos teléfonos la
   última letra caía a un tercer renglón («Comunida / d»). Se mantiene en una
   sola línea y se ajusta solo esa etiqueta: las demás siguen en dos líneas. */
.bottom-nav-item[data-bnav="comunidad"] {
  padding-left: 1px;
  padding-right: 1px;
}
.bottom-nav .bottom-nav-item[data-bnav="comunidad"] span,
.bottom-nav.deslizable .bottom-nav-item[data-bnav="comunidad"] span {
  font-size: 9.4px;
  letter-spacing: -.16px;
  white-space: nowrap;
  word-break: normal;
  -webkit-line-clamp: 1;
  min-height: 31px;
}
.bottom-nav:not(.deslizable)[data-n="7"] .bottom-nav-item {
  padding-left: 1px;
  padding-right: 1px;
}
.bottom-nav:not(.deslizable)[data-n="7"] .bottom-nav-item span {
  font-size: 9.8px;
}
.bottom-nav:not(.deslizable)[data-n="7"] .bottom-nav-item[data-bnav="comunidad"] span {
  font-size: 9.1px;
  letter-spacing: -.18px;
}
@media (max-width: 360px) {
  .bottom-nav:not(.deslizable)[data-n="7"] .bottom-nav-item span {
    font-size: 9px;
  }
  .bottom-nav:not(.deslizable)[data-n="7"] .bottom-nav-item[data-bnav="comunidad"] span {
    font-size: 8.35px;
  }
}
/* Los menús agregados por el dueño llevan un puntito de color para
   distinguirlos de las líneas del catálogo. */
@media (max-width: 1023px), (orientation: landscape) and (pointer: coarse) and (max-height: 620px) {
  /* --bn-h incluye el safe-area del notch para que el player, el buybar y
     el scroll-top se eleven la altura REAL del bottom nav en todo dispositivo */
  :root { --bn-h: calc(70px + env(safe-area-inset-bottom, 0px)); }
  .bottom-nav { display: flex; }
  /* Compensa el contenido para que el footer no quede oculto tras la barra */
  body { padding-bottom: var(--bn-h, 0px); }
  /* …pero SOLO en las páginas que de verdad traen esa barra. El panel
     (/admin/*) carga esta hoja y no tiene bottom nav, así que reservaba 70px
     de vacío al final de cada pantalla del celular y el contenido terminaba
     flotando en la mitad. Con :has se anula; donde el navegador no soporte
     :has, la regla se ignora y queda el comportamiento de antes (vacío, pero
     nunca tapado). */
  body:not(:has(.bottom-nav)) { padding-bottom: 0; }
}