/* ════════════════════════════════════════════════════════════════
   nc-shell.css — encabezado, pie y tokens compartidos por todo el sitio
   ════════════════════════════════════════════════════════════════

   Esta hoja es la fuente única del "shell": la franja superior, el
   encabezado, la navegación y el pie que ve el visitante en cualquier
   ruta pública. El markup correspondiente vive en server/src/shell.js
   y se inyecta desde el servidor.

   Antes de esto convivían tres encabezados distintos (uno en el inicio
   y el catálogo, otro en producto/gaming/armador/licencias/anydesk y un
   tercero en las landings), cada uno con su copia del CSS dentro del
   <style> de la página. Cambiar el teléfono del encabezado obligaba a
   tocar siete archivos, y al navegar entre secciones parecían sitios
   distintos.

   DOS REGLAS AL EDITAR:

   1. Esta hoja se enlaza como ÚLTIMA del <head>, después del <style>
      inline de cada página y después de nc-experience.css. Gana la
      cascada a propósito: así el shell se ve igual en todas partes sin
      depender de !important.

   2. Todo lo de acá usa el prefijo nc- (.nc-hdr, .nc-wrap, .nc-footer).
      El sitio tiene clases genéricas repetidas con estilos distintos en
      cada página (.btn, .wrap, .card, .ft-col). El prefijo es lo que
      permite que esta hoja mande sin romper el interior de ninguna.
      Excepción: .nc-cart-btn y .nc-cart-badge, cuyos nombres los fija
      cart.js.

   Al cambiar este archivo hay que subir su ?v= en todas las páginas y
   en CSS_V de landings-render.js, o el visitante se queda un año con la
   versión vieja (los assets versionados van con immutable).
   ════════════════════════════════════════════════════════════════ */

/* ═══ TOKENS ══════════════════════════════════════════════════════
   El juego canónico de variables del sitio. Incluye los tokens que
   cada página definía por su cuenta, para que ninguna var() quede sin
   resolver cuando se borren los :root locales.                      */
:root{
  /* superficies */
  --bg:#181D23;
  --bg2:#1F242B;
  --surface:#1F242B;
  --card:#22252E;
  --card2:#2A2E37;
  --border:rgba(255,255,255,.07);
  --border2:rgba(255,255,255,.14);

  /* acento: azul → púrpura */
  --cyan:#0C95F3;
  --cyan-press:#0A7CCB;
  --purple:#6947E6;
  --grad:linear-gradient(90deg,#0C95F3,#6947E6);
  --ink:#FFFFFF;

  /* texto */
  --text:#F5F9FA;
  --text2:#B6C0CB;
  --text3:#8C97A3;
  --muted:#939EAA;

  /* semánticos */
  --price:#3FA9F5;
  --offer:#E6C661;
  --ok:#4ADE80;
  --warn:#E9B949;
  --green:#22C55E;
  --orange:#F59E0B;
  --pink:#EF4444;
  --wa:#25D366;
  --wa-ink:#04120A;

  /* radios */
  --r:12px;
  --r-sm:8px;
  --r-md:10px;
  --r-pill:999px;

  /* tipografías: las tres familias que existen en /fonts/fuentes.css.
     gaming declaraba "Exo 2"/"Manrope" y armador "Oxanium"/"Onest";
     ninguna de las cuatro estaba cargada, así que caían al sistema. */
  --fd:"Schibsted Grotesk",system-ui,sans-serif;
  --fb:"Hanken Grotesk",system-ui,sans-serif;
  --fm:"JetBrains Mono",ui-monospace,monospace;

  /* brillos heredados de las páginas de experiencia */
  --glow-c:0 0 20px rgba(12,149,243,.35),0 0 40px rgba(12,149,243,.12);
  --glow-p:0 0 20px rgba(105,71,230,.35),0 0 40px rgba(105,71,230,.12);

  /* Alto del encabezado pegajoso. Sólo .nc-hdr queda fijo; la franja
     superior se va con el scroll, así que NO entra en la cuenta. El
     catálogo lo usa para separar su barra de filtros y lo recalcula por
     JavaScript al cargar: este valor es el de arranque. */
  --hdr-h:59px;

  /* capas */
  --z-header:200;
  --z-float:300;
  --z-overlay:400;
  --z-drawer:401;
}

/* ═══ UTILIDADES DEL SHELL ════════════════════════════════════════ */

/* Contenedor propio: las páginas tienen .wrap con anchos distintos
   (1280px en el inicio, 1120px en las landings, var(--max) en
   licencias). El shell no se mete en esa discusión y usa el suyo. */
.nc-wrap{max-width:1280px;margin:0 auto;padding:0 1rem}

.nc-shell i,
.nc-shell svg.lucide{width:1em;height:1em;vertical-align:-.125em;stroke-width:2;flex-shrink:0}

/* ═══ FRANJA SUPERIOR ═════════════════════════════════════════════ */
.nc-topstrip{background:var(--surface);border-bottom:1px solid var(--border);font-size:.78rem;color:var(--text3)}
.nc-topstrip .nc-wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:34px}
.nc-topstrip span{display:inline-flex;align-items:center;gap:.4em;white-space:nowrap}
.nc-ts-addr{min-width:0;overflow:hidden}
.nc-ts-addr b{font-weight:400;overflow:hidden;text-overflow:ellipsis}
.nc-topstrip a{color:var(--text2);text-decoration:none}
.nc-topstrip a:hover{color:var(--cyan)}
.nc-ts-r{display:flex;gap:1.25rem}
@media(max-width:639px){.nc-topstrip .nc-ts-hours{display:none}}

/* ═══ ENCABEZADO ══════════════════════════════════════════════════ */
.nc-hdr{position:sticky;top:0;z-index:var(--z-header);background:var(--bg);border-bottom:1px solid var(--border);box-shadow:0 2px 10px rgba(0,0,0,.35)}
.nc-hdr-inner{display:flex;align-items:center;flex-wrap:wrap;gap:.6rem .9rem;padding:.6rem 0}
.nc-hdr-logo{display:flex;align-items:center;flex-shrink:0}
.nc-hdr-logo img{height:34px;width:auto;display:block}

/* El buscador baja a su propia fila en móvil (order:3) y vuelve al
   centro a partir de 900px. */
.nc-hdr-search{flex:1 1 100%;order:3;display:flex;align-items:center;background:#2D313A;border:1px solid var(--border);border-radius:var(--r-pill);overflow:hidden;min-width:0}
.nc-hdr-search:focus-within{border-color:var(--cyan)}
.nc-hdr-search input{flex:1;min-width:0;background:none;border:none;outline:none;padding:.6rem .85rem;font-family:var(--fb);font-size:.9rem;color:var(--text)}
.nc-hdr-search input::placeholder{color:var(--text3)}
.nc-hdr-search input::-webkit-search-cancel-button{display:none}
.nc-hdr-search button[type=submit]{display:flex;align-items:center;gap:.4rem;padding:.6rem 1rem;background:var(--grad);border:none;color:#fff;font-family:var(--fd);font-size:.85rem;font-weight:600;cursor:pointer}
.nc-hdr-search button[type=submit]:hover{opacity:.9}

/* Botón de limpiar: lo usa el catálogo, que filtra mientras se
   escribe. En el resto del sitio queda oculto hasta que hay texto. */
.nc-hs-clear{display:none;align-items:center;justify-content:center;background:none;border:none;color:var(--text3);cursor:pointer;padding:0 .5rem;font-size:1rem}
.nc-hs-clear:hover{color:var(--text)}
.nc-hdr-search.has-text .nc-hs-clear{display:flex}

.nc-hdr-right{display:flex;align-items:center;gap:.5rem;margin-left:auto}

.nc-currency{display:flex;align-items:center;background:var(--card);border:1px solid var(--border2);border-radius:var(--r-pill);overflow:hidden;font-family:var(--fd);font-size:.78rem;font-weight:600;flex-shrink:0}
.nc-cur-opt{padding:.4rem .6rem;cursor:pointer;color:var(--text3);transition:background .15s,color .15s;user-select:none}
.nc-cur-opt.active{background:var(--grad);color:#fff}

.nc-hdr-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.45rem;height:38px;min-width:38px;padding:0 .6rem;background:var(--card);border:1px solid var(--border2);border-radius:var(--r-pill);color:var(--text2);font-size:1.05rem;cursor:pointer;transition:border-color .15s,color .15s}
.nc-hdr-btn:hover{border-color:var(--cyan);color:var(--cyan)}

/* Píldora del contador del carrito.
   cart.js trae su propio estilo para esta clase, pero lo inyecta recién la
   primera vez que se abre el cajón: hasta entonces el badge no tenía ninguna
   regla y se veía como un 0 suelto al lado del ícono en cada página. Se
   define acá para que nazca oculto y bien posicionado.
   El !important es porque la hoja de cart.js se agrega al <head> DESPUÉS de
   ésta y, a igualdad de especificidad, ganaría su cian neón. Sólo pisa los
   dos colores; el resto lo comparten. */
.nc-cart-btn{position:relative}
.nc-cart-badge{position:absolute;top:-7px;right:-9px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:var(--grad)!important;color:#fff!important;font-family:var(--fd);font-size:.62rem;font-weight:700;display:none;align-items:center;justify-content:center;pointer-events:none}

.nc-hdr-wa{display:none;align-items:center;gap:.45rem;height:38px;padding:0 .9rem;background:var(--wa);border:none;border-radius:var(--r-pill);color:var(--wa-ink);font-family:var(--fd);font-size:.84rem;font-weight:600;white-space:nowrap;text-decoration:none}
.nc-hdr-wa:hover{filter:brightness(1.07)}

@media(min-width:900px){
  .nc-hdr-search{flex:1 1 auto;order:0;max-width:620px;margin:0 auto}
  .nc-hdr-wa{display:inline-flex}
}

/* ═══ NAVEGACIÓN ══════════════════════════════════════════════════ */
.nc-mainnav{background:var(--surface);border-bottom:1px solid var(--border);position:relative}
/* El nav se desliza en pantallas angostas; estos degradados avisan que
   hay más opciones fuera de la vista. Los activa nc-shell.js. */
.nc-mainnav::before,.nc-mainnav::after{content:'';position:absolute;top:0;bottom:0;width:34px;pointer-events:none;opacity:0;transition:opacity .18s;z-index:2}
.nc-mainnav::before{left:0;background:linear-gradient(90deg,var(--surface),rgba(31,36,43,0))}
.nc-mainnav::after{right:0;background:linear-gradient(270deg,var(--surface),rgba(31,36,43,0))}
.nc-mainnav.nav-l::before{opacity:1}
.nc-mainnav.nav-r::after{opacity:1}
.nc-mainnav ul{list-style:none;display:flex;gap:.25rem;overflow-x:auto;scrollbar-width:none;margin:0;padding:0}
.nc-mainnav ul::-webkit-scrollbar{display:none}
.nc-mainnav a{display:flex;align-items:center;gap:.4rem;padding:.65rem .8rem;font-family:var(--fd);font-size:.86rem;font-weight:500;color:var(--text2);white-space:nowrap;border-bottom:2px solid transparent;transition:color .15s;text-decoration:none}
.nc-mainnav a:hover{color:var(--text)}
.nc-mainnav a.active{color:var(--cyan);border-bottom-color:var(--cyan)}
.nc-mainnav a.nav-offer{color:var(--offer)}
.nc-mainnav a.nav-licencias{background:var(--grad);color:#fff;padding:.4rem .8rem;border-radius:var(--r-pill);font-weight:700}
.nc-mainnav a.nav-licencias:hover{color:#fff;opacity:.88}

/* ═══ PIE ═════════════════════════════════════════════════════════ */
.nc-footer{background:var(--bg);margin-top:3rem}
.nc-ft-inner{display:grid;gap:1.8rem;padding:2.25rem 0 1.5rem}
@media(min-width:640px){.nc-ft-inner{grid-template-columns:1fr 1fr}}
@media(min-width:960px){.nc-ft-inner{grid-template-columns:1.4fr 1fr 1fr 1fr 1fr}}
.nc-ft-brand img{height:30px;width:auto;display:block}
.nc-ft-logo{display:inline-flex;margin-bottom:.7rem}
.nc-ft-brand p{font-size:.82rem;color:var(--text3);line-height:1.6;max-width:16rem;margin:0}
.nc-ft-col h3{font-family:var(--fd);font-size:.85rem;font-weight:700;color:var(--text);margin:0 0 .8rem}
.nc-ft-col ul{list-style:none;display:flex;flex-direction:column;gap:.45rem;margin:0;padding:0}
.nc-ft-col ul a{font-size:.84rem;color:var(--text3);transition:color .15s;text-decoration:none}
.nc-ft-col ul a:hover{color:var(--cyan)}
.nc-ft-sched{font-size:.84rem;color:var(--text3);line-height:1.9;margin:0}
.nc-ft-sched strong{color:var(--text2);font-weight:500}
.nc-ft-nap{font-size:.82rem;color:var(--text3);line-height:1.7;margin:.9rem 0 0}
.nc-ft-nap a{color:var(--text2);text-decoration:none}
.nc-ft-nap a:hover{color:var(--cyan)}
.nc-ft-bottom{border-top:1px solid var(--border);padding:1rem 0;display:flex;flex-wrap:wrap;gap:.5rem;justify-content:space-between;font-size:.76rem;color:var(--muted)}

/* ═══ FLOTANTES ═══════════════════════════════════════════════════ */
.nc-wa-float{position:fixed;bottom:1.25rem;right:1.25rem;z-index:var(--z-float)}
.nc-wa-btn{width:54px;height:54px;background:var(--wa);border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(0,0,0,.45);transition:transform .15s;color:var(--wa-ink)}
.nc-wa-btn:hover{transform:scale(1.06)}
.nc-top-btn{position:fixed;bottom:5.25rem;right:1.45rem;z-index:var(--z-float);width:40px;height:40px;background:var(--card);border:1px solid var(--border2);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1rem;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .2s;color:var(--text2)}
.nc-top-btn.vis{opacity:1;pointer-events:auto}
.nc-top-btn:hover{color:var(--cyan);border-color:var(--cyan)}

/* ═══ BLANCOS TÁCTILES EN PANTALLA CHICA ══════════════════════════
   Apple y Google piden 44px como mínimo para algo que se toca con el
   pulgar. Medido a 390px, el shell estaba por debajo en todo: los
   enlaces del pie en 17px, el teléfono de la franja en 19, el toggle de
   moneda en 32, el botón del carrito en 38 y los ítems del nav en 36.
   Se leían bien —el espaciado ayudaba— pero el área donde hay que
   acertar era la línea de texto y nada más.

   Va sólo bajo 900px a propósito: con un puntero la precisión sobra, y
   estirar todo a 44px en escritorio dejaría el pie y la franja
   desparramados sin ganar nada.                                        */
@media(max-width:899px){
  /* El teléfono de la franja es un control suelto en una fila flex: va a
     44px completos. La franja crece un poco pero no es pegajosa, así que no
     le cuesta pantalla a nadie. */
  .nc-topstrip a{min-height:44px;display:inline-flex;align-items:center}

  .nc-hdr-logo{min-height:44px}
  .nc-hdr-btn{height:44px;min-width:44px}
  .nc-hdr-search input{padding-block:.75rem}
  .nc-hdr-search button[type=submit]{min-height:44px}
  .nc-hs-clear{min-width:44px}
  .nc-cur-opt{min-height:44px;display:flex;align-items:center}

  .nc-mainnav a{min-height:44px}

  /* La píldora del contador vuela 9px fuera del botón. Con el botón de
     WhatsApp oculto, el carrito queda pegado al borde y esos 9px se salían
     del viewport: 2px de scroll horizontal en toda la página. Se mete para
     adentro; a 44px de botón sigue leyéndose igual. */
  .nc-cart-badge{top:-4px;right:-4px}

  /* El min-height ya separa un enlace del siguiente; sin anular el gap
     el pie crecería el doble sin que se gane legibilidad. */
  .nc-ft-col ul{gap:0}
  .nc-ft-col ul a{min-height:44px;display:flex;align-items:center}
  /* El teléfono y "Cómo llegar" del pie van dentro de un párrafo, entre
     líneas de texto. WCAG 2.5.8 exceptúa justamente a los enlaces en línea
     dentro de una oración, y forzarlos a 44px desparejaría el interlineado
     del bloque de dirección. 40px: bien por encima del mínimo AA (24px). */
  .nc-ft-nap a{min-height:40px;display:inline-flex;align-items:center}
  .nc-ft-bottom{padding-block:1.25rem}
}

/* ═══ ENCABEZADO COMPRIMIDO AL HACER SCROLL ═══════════════════════
   En un teléfono el encabezado pegajoso son dos filas —logo y
   controles arriba, buscador abajo— y se come 107px: el 14% de la
   pantalla, siempre, mientras el visitante lee el catálogo.

   Al bajar, el buscador se pliega y quedan 59px. El botón con la lupa
   lo devuelve de un toque, y al volver arriba reaparece solo.

   El botón existe siempre en el marcado: así, si el JavaScript no
   carga, el buscador se queda a la vista (que es el estado útil) y lo
   único que se pierde es el plegado.                                 */
.nc-search-toggle{display:none}

@media(max-width:899px){
  .nc-hdr-search{overflow:hidden;transition:max-height .22s ease,opacity .16s ease}

  .nc-hdr.compacto .nc-hdr-inner{row-gap:0}
  .nc-hdr.compacto .nc-hdr-search{max-height:0;opacity:0;border-width:0;pointer-events:none}
  .nc-hdr.compacto .nc-search-toggle{display:inline-flex}
}

@media(prefers-reduced-motion:reduce){
  .nc-hdr-search{transition:none}
}

/* ═══ IMPRESIÓN ═══════════════════════════════════════════════════ */
@media print{
  .nc-topstrip,.nc-mainnav,.nc-wa-float,.nc-top-btn,.nc-hdr-right,.nc-hdr-search{display:none}
  .nc-hdr{position:static;box-shadow:none}
}