/* ==========================================================================
   Netxara · Terminal NAS — capa visual sobre la base funcional de Exo
   ========================================================================== */
:root {
  --nas-bg: #04070b;
  --nas-bg-2: #070c12;
  --nas-panel: #0a1118;
  --nas-panel-2: #0d1721;
  --nas-line: #173240;
  --nas-line-2: #21485a;
  --nas-cyan: #22d3ee;
  --nas-cyan-2: #67e8f9;
  --nas-cyan-dim: #0e7490;
  --nas-glow: rgba(34, 211, 238, .18);
  --nas-text: #d6e4ec;
  --nas-muted: #7a93a1;
  --nas-faint: #4a6270;
  --nas-ok: #34d399;
  --nas-warn: #fbbf24;
  --nas-danger: #fb7185;
  --nas-radius: 4px;
  --nas-mono: 'JetBrains Mono', ui-monospace, monospace;
  --nas-head: 'Chakra Petch', sans-serif;
  --nas-body: 'Inter', system-ui, sans-serif;
  --nas-bg-image: none;

  /* Variables que usa shared.css (popups, carrito, formularios de Exo) */
  --color-bg: var(--nas-bg);
  --color-brighter-bg: var(--nas-panel-2);
  --color-text: var(--nas-text);
  --color-text-secondary: var(--nas-muted);
  --color-text-dark: var(--nas-muted);
  --color-text-darker: var(--nas-faint);
  --color-primary: var(--nas-cyan);
  --color-primary-hover: var(--nas-cyan-2);
  --color-primary-text: #021014;
  --color-primary-text-hover: #021014;
  --color-secondary: transparent;
  --color-secondary-hover: var(--nas-glow);
  --color-secondary-text: var(--nas-cyan);
  --color-secondary-text-hover: var(--nas-cyan-2);
  --color-tertiary: transparent;
  --color-tertiary-hover: var(--nas-glow);
  --color-tertiary-text: var(--nas-muted);
  --color-tertiary-text-hover: var(--nas-cyan);
  --color-removed: var(--nas-danger);
  --border-color: var(--nas-line);
  --primary-color: var(--nas-cyan);
  --bg-image: var(--nas-bg-image);
}

/* ---------- base ---------- */
html, body { margin: 0; }
/* main.js oculta/muestra con el atributo hidden (p. ej. "Añadir" ↔ contador): que ningún display lo pise */
body.nas [hidden] { display: none !important; }
body.nas {
  background-color: var(--nas-bg);
  color: var(--nas-text);
  font: 15px/1.6 var(--nas-body);
  min-height: 100vh;
  background-image:
    radial-gradient(1200px 600px at 70% -10%, rgba(34, 211, 238, .08), transparent 60%),
    radial-gradient(800px 500px at -10% 30%, rgba(14, 116, 144, .10), transparent 60%),
    linear-gradient(rgba(34, 211, 238, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 211, 238, .035) 1px, transparent 1px),
    var(--nas-bg-image);
  background-size: auto, auto, 40px 40px, 40px 40px, cover;
  background-attachment: scroll, scroll, scroll, scroll, fixed;
  background-position: center top;
}
body.nas::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .18) 0 1px, transparent 1px 3px); opacity: .3;
}
body.nas .site { position: relative; z-index: 2; background: none; min-height: 100vh; display: block; }
body.nas a { color: var(--nas-cyan); text-decoration: none; }
body.nas a:hover { color: var(--nas-cyan-2); }
body.nas h1, body.nas h2, body.nas h3, body.nas h4 { font-family: var(--nas-head); letter-spacing: .02em; line-height: 1.15; color: var(--nas-text); margin: 0; }
.nas-wrap { max-width: 1240px; margin: 0 auto; padding: 0 20px; }
.nas-h1 { font-size: 34px; margin: 8px 0 14px !important; }
.nas-h2 { font-size: 26px; margin: 6px 0 4px !important; }
.nas-eyebrow { font: 600 11px var(--nas-mono); letter-spacing: .2em; color: var(--nas-cyan); text-transform: uppercase; }
.nas-lead { color: var(--nas-muted); max-width: 70ch; }
.nas-lead p { margin: .4em 0; }
.nas-k { display: block; font: 600 10.5px var(--nas-mono); letter-spacing: .14em; color: var(--nas-muted); text-transform: uppercase; }
.nas-n { font: 500 11px var(--nas-mono); color: var(--nas-faint); letter-spacing: 0; }
.nas-empty { font: 500 12.5px var(--nas-mono); color: var(--nas-faint); margin: 0; }
.nas-prose { color: #b9cbd5; }
.nas-prose p { margin: .6em 0; }
.nas-prose strong, .nas-prose b { color: var(--nas-text); }
.nas-prose h1, .nas-prose h2, .nas-prose h3 { color: var(--nas-cyan); margin: 1em 0 .4em; font-size: 20px; }
.nas-prose ul { padding-left: 0; list-style: none; }
.nas-prose li { padding-left: 20px; position: relative; margin: .35em 0; }
.nas-prose li::before { content: "▸"; position: absolute; left: 0; color: var(--nas-cyan); }
.nas-prose img { max-width: 100%; height: auto; }

/* ---------- botones ---------- */
.nas-btn, body.nas .btn-primary, body.nas .btn-secondary, body.nas .btn-tertiary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 600 12px var(--nas-mono) !important; letter-spacing: .1em; text-transform: uppercase;
  border: 1px solid var(--nas-cyan-dim) !important; color: var(--nas-cyan) !important; background: transparent !important;
  padding: 9px 14px; border-radius: var(--nas-radius) !important; cursor: pointer; transition: .15s; white-space: nowrap; box-shadow: none !important;
}
.nas-btn:hover, body.nas .btn-primary:hover, body.nas .btn-secondary:hover, body.nas .btn-tertiary:hover {
  background: var(--nas-glow) !important; border-color: var(--nas-cyan) !important; color: var(--nas-cyan-2) !important;
}
.nas-btn-solid, body.nas .btn-primary { background: var(--nas-cyan) !important; color: #021014 !important; border-color: var(--nas-cyan) !important; }
.nas-btn-solid:hover, body.nas .btn-primary:hover { background: var(--nas-cyan-2) !important; color: #021014 !important; }
.nas-btn-sm { padding: 6px 10px; font-size: 11px !important; }
.nas-btn-ghost { border-color: var(--nas-line-2) !important; color: var(--nas-muted) !important; }
.nas-btn-wide { width: 100%; padding: 12px; }
body.nas button[disabled] { opacity: .45; pointer-events: none; }
/* botones de icono de Exo (papelera, +/-, regalo): el texto se oculta y se pinta el icono */
body.nas .btn-glyph { font-size: 0 !important; letter-spacing: 0; padding: 0 !important; min-width: 38px; min-height: 38px; }

/* ---------- panel HUD ---------- */
.nas-panel { position: relative; background: linear-gradient(180deg, var(--nas-panel-2), var(--nas-panel)) !important; border: 1px solid var(--nas-line) !important; border-radius: var(--nas-radius) !important; color: var(--nas-text); }
.nas-panel::before, .nas-panel::after { content: ""; position: absolute; width: 12px; height: 12px; border: 2px solid var(--nas-cyan); pointer-events: none; }
.nas-panel::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.nas-panel::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
.nas-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--nas-line); font: 600 11px var(--nas-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--nas-muted); }
.nas-t { color: var(--nas-cyan); }
.nas-t::before { content: "// "; color: var(--nas-faint); }
.nas-panel-body { padding: 16px; }

/* ---------- barra de estado ---------- */
body.nas .site-header.nas-statusbar { position: sticky; top: 0; z-index: 30; background: rgba(4, 7, 11, .88) !important; backdrop-filter: blur(6px); border-bottom: 1px solid var(--nas-line); padding: 0; margin: 0; height: auto; box-shadow: none; }
.nas-statusbar-inner { display: flex; align-items: center; gap: 18px; height: 48px; font: 500 11.5px var(--nas-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--nas-muted); }
.nas-brand { color: var(--nas-text) !important; font-weight: 700; }
.nas-brand b { color: var(--nas-cyan); }
.nas-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--nas-ok); box-shadow: 0 0 8px var(--nas-ok); margin-right: 6px; animation: nas-pulse 2s infinite; }
@keyframes nas-pulse { 50% { opacity: .35; } }
.nas-sp { flex: 1; }
.nas-op { display: flex; align-items: center; gap: 10px; }
.nas-op b { color: var(--nas-text); }
.nas-cart b, .nas-cart strong { color: var(--nas-text); font-weight: 700; }
.nas-cart-amount strong { font-weight: 700; }
.nas-burger { display: none; background: none; border: 1px solid var(--nas-line-2); color: var(--nas-cyan); width: 34px; height: 34px; border-radius: var(--nas-radius); cursor: pointer; padding: 6px; font-size: 0; }
.nas-burger svg { width: 20px; height: 20px; }

/* ---------- cabecera: logo + tarjetas ---------- */
.nas-hero { display: grid; grid-template-columns: 260px 1fr 1fr; gap: 18px; margin: 26px 0 22px; align-items: stretch; }
.nas-logo { display: flex; align-items: center; justify-content: center; padding: 10px; }
.nas-logo img { max-width: 100%; max-height: 120px; filter: drop-shadow(0 0 18px rgba(34, 211, 238, .35)); }
.nas-logo-text { font: 700 28px var(--nas-head); color: var(--nas-cyan); letter-spacing: .08em; }
.nas-link-card { display: flex; align-items: center; gap: 16px; padding: 18px 20px; cursor: pointer; color: var(--nas-text) !important; transition: border-color .15s; }
.nas-link-card:hover { border-color: var(--nas-cyan-dim) !important; }
.nas-ico { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border: 1px solid var(--nas-line-2); border-radius: var(--nas-radius); color: var(--nas-cyan); background: rgba(34, 211, 238, .06); }
.nas-ico svg { width: 22px; height: 22px; }
.nas-v { display: block; font: 700 20px var(--nas-head); letter-spacing: .04em; color: var(--nas-text); text-transform: uppercase; }
.nas-s { display: block; font: 500 12px var(--nas-mono); color: var(--nas-cyan); }

/* ---------- layout ---------- */
.nas-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 18px; align-items: start; padding-bottom: 40px; }
.nas-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
body.nas .store-sidebar.nas-side { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 66px; width: auto; max-width: none; margin: 0; padding: 0; background: none; border: 0; }
body.nas .nas-side .widget { margin: 0; padding: 0; background: none; border: 0; box-shadow: none; }
body.nas .nas-side .widget-title { font: 600 11px var(--nas-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--nas-cyan); padding: 10px 16px; border-bottom: 1px solid var(--nas-line); margin: 0; }
body.nas .nas-side .widget:not(.nas-panel) { position: relative; background: linear-gradient(180deg, var(--nas-panel-2), var(--nas-panel)); border: 1px solid var(--nas-line); border-radius: var(--nas-radius); }
body.nas .nas-side .widget:not(.nas-panel) .widget-content { padding: 14px 16px; }

/* ---------- navegación por sectores ---------- */
body.nas .site-navigation.nas-nav { position: relative; inset: auto; transform: none; width: auto; height: auto; max-height: none; padding: 0; margin: 0; overflow: visible; opacity: 1; visibility: visible; display: block; z-index: auto; }
body.nas .nas-menu { list-style: none; margin: 0; padding: 6px 0; display: block; }
body.nas .nas-menu > li { margin: 0; padding: 0; border: 0; }
body.nas .nas-menu > li > a { display: flex; align-items: center; gap: 10px; padding: 10px 16px; color: var(--nas-text); font: 600 13.5px var(--nas-head); letter-spacing: .06em; text-transform: uppercase; border-left: 2px solid transparent; background: none; }
body.nas .nas-menu > li > a:hover, body.nas .nas-menu > li.active > a { background: rgba(34, 211, 238, .06); border-left-color: var(--nas-cyan); color: var(--nas-cyan-2); }
.nas-sector { border-top: 1px solid var(--nas-line) !important; }
.nas-sector-btn { width: 100%; display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: none !important; border: 0; cursor: pointer; color: var(--nas-text); font: 700 14px var(--nas-head); letter-spacing: .06em; text-transform: uppercase; text-align: left; }
.nas-sector-name { flex: 1; }
.nas-count { font: 500 10.5px var(--nas-mono); color: var(--nas-faint); border: 1px solid var(--nas-line-2); border-radius: 3px; padding: 1px 6px; }
.nas-chev { width: 14px; height: 14px; color: var(--nas-muted); transition: transform .2s; flex: none; }
.nas-sector-btn:hover { color: var(--nas-cyan-2); }
.nas-sector.expanded > .nas-sector-btn { color: var(--nas-cyan); }
.nas-sector.expanded > .nas-sector-btn .nas-chev { transform: rotate(180deg); color: var(--nas-cyan); }
body.nas .nas-sector-list { list-style: none; margin: 0; padding: 0; display: none; position: static; background: none; border: 0; box-shadow: none; }
body.nas .nas-sector.expanded > .nas-sector-list { display: block; padding-bottom: 8px; animation: nas-open .2s ease; }
@keyframes nas-open { from { opacity: 0; transform: translateY(-4px); } }
.nas-sector-list a { display: block; padding: 7px 16px 7px 32px; color: #b9cbd5 !important; font: 500 13.5px var(--nas-body); border-left: 2px solid transparent; position: relative; }
.nas-sector-list a::before { content: ""; position: absolute; left: 18px; top: 50%; width: 7px; height: 1px; background: var(--nas-line-2); }
.nas-sector-list a:hover, .nas-sector-list li.active a { background: rgba(34, 211, 238, .06); border-left-color: var(--nas-cyan); color: var(--nas-cyan-2) !important; }
body.nas .close-navigation, .nas-mobile-only { display: none !important; }

/* ---------- módulos ---------- */
.nas-top { display: flex; gap: 12px; align-items: center; }
.nas-top img { width: 52px; height: 52px; image-rendering: pixelated; border: 1px solid var(--nas-line-2); border-radius: var(--nas-radius); }
.nas-top-name { font: 700 16px var(--nas-head); }
.nas-recent { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.nas-recent img { width: 100%; aspect-ratio: 1; image-rendering: pixelated; border: 1px solid var(--nas-line); border-radius: 3px; background: #000; }
.nas-notice { border-left: 3px solid var(--nas-cyan) !important; }
.nas-notice-ok { border-left-color: var(--nas-ok) !important; }
.nas-notice-ok .nas-t { color: var(--nas-ok); }
.nas-notice-danger { border-left-color: var(--nas-danger) !important; }
.nas-notice-danger .nas-t { color: var(--nas-danger); }
.nas-notice .nas-panel-body { font-size: 13.5px; color: var(--nas-muted); }

/* ---------- portada ---------- */
.nas-welcome { padding: 26px 28px; }
.nas-serial { float: right; font: 500 11px var(--nas-mono); color: var(--nas-faint); letter-spacing: .1em; text-transform: uppercase; }
.nas-sectors { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.nas-sector-card { display: flex; flex-direction: column; gap: 6px; padding: 16px; border: 1px solid var(--nas-line); border-radius: var(--nas-radius); background: var(--nas-bg-2); transition: .15s; }
.nas-sector-card:hover { border-color: var(--nas-cyan-dim); box-shadow: 0 10px 30px -14px var(--nas-glow); transform: translateY(-2px); }
.nas-sector-card-name { font: 700 20px var(--nas-head); letter-spacing: .05em; color: var(--nas-text); text-transform: uppercase; }
.nas-sector-card-sub { font: 500 11.5px var(--nas-mono); color: var(--nas-cyan); text-transform: uppercase; letter-spacing: .08em; }

/* ---------- categoría y tarjetas ---------- */
.nas-cat-head { padding: 22px 24px; }
body.nas .nas-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; margin: 0; padding: 0; }
.nas-cmp-panel:not([hidden]) + .nas-grid { display: none !important; }
body.nas .store-product.nas-card { display: flex; flex-direction: column; overflow: visible; padding: 0; margin: 0; transition: transform .18s, box-shadow .18s, border-color .18s; text-align: left; }
.nas-card:hover { border-color: var(--nas-cyan-dim) !important; transform: translateY(-2px); box-shadow: 0 10px 30px -12px var(--nas-glow); }
.nas-card-media { aspect-ratio: 4/3; display: grid; place-items: center; position: relative; overflow: hidden; background: radial-gradient(circle at 50% 60%, rgba(34, 211, 238, .14), transparent 65%), var(--nas-bg-2); border-bottom: 1px solid var(--nas-line); border-radius: var(--nas-radius) var(--nas-radius) 0 0; }
.nas-card-media .image { max-width: 78%; max-height: 78%; object-fit: contain; }
.nas-tag { position: absolute; top: 10px; left: 10px; font: 600 10px var(--nas-mono); letter-spacing: .12em; color: var(--nas-faint); z-index: 1; }
.nas-card-media .nas-badge { position: absolute; top: 10px; right: 10px; }
.nas-emblem { font: 700 24px var(--nas-head); letter-spacing: .06em; color: var(--nas-cyan); text-shadow: 0 0 22px rgba(34, 211, 238, .5); text-transform: uppercase; text-align: center; padding: 0 12px; }
.nas-emblem-lg { font-size: 42px; }
.nas-card-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
body.nas .nas-card-name { font: 700 18px var(--nas-head); letter-spacing: .04em; margin: 0; padding: 0; }
body.nas .nas-card-name a { color: var(--nas-text); }
.nas-badge { display: inline-block; font: 700 10px var(--nas-mono); letter-spacing: .12em; text-transform: uppercase; padding: 3px 7px; border-radius: 3px; border: 1px solid var(--nas-cyan-dim); color: var(--nas-cyan); background: var(--nas-glow); vertical-align: middle; }
.nas-badge-sale { color: var(--nas-warn); border-color: rgba(251, 191, 36, .4); background: rgba(251, 191, 36, .08); }

/* acciones de producto (marcado de Exo, se conserva para main.js) */
body.nas .product-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: auto; padding: 0; background: none; }
body.nas .product-actions .price { flex: 1 0 100%; margin: 0; font: 700 22px var(--nas-mono); color: var(--nas-text); }
body.nas .product-actions .price strong { font-weight: 700; color: var(--nas-text); }
body.nas .product-actions .price .discount, body.nas .product-actions del { font-size: 13px; color: var(--nas-faint); margin-right: 6px; }
body.nas .product-actions .wide { flex: 1 1 100%; }
body.nas .product-actions .half { flex: 1 1 0; }
body.nas .product-actions .nas-gift { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: auto; height: auto; padding: 9px 12px; background: transparent !important; border: 1px solid var(--nas-line-2) !important; color: var(--nas-muted) !important; font: 600 11.5px var(--nas-mono) !important; letter-spacing: .1em; text-transform: uppercase; line-height: 1.2; cursor: pointer; transition: color .15s, border-color .15s, background .15s; }
body.nas .product-actions .nas-gift svg { width: 15px; height: 15px; flex: none; }
body.nas .product-actions .nas-gift:hover, body.nas .product-actions .nas-gift:focus-visible { color: var(--nas-cyan-2) !important; border-color: var(--nas-cyan-dim) !important; background: var(--nas-glow) !important; }
body.nas .quantity-field { display: flex; align-items: stretch; border: 1px solid var(--nas-line-2); border-radius: var(--nas-radius); overflow: hidden; }
body.nas .quantity-field[hidden] { display: none; }
body.nas .quantity-field button { border: 0 !important; border-radius: 0 !important; padding: 8px 12px; }
body.nas .quantity-field .open-basket { flex: 1; background: var(--nas-glow) !important; color: var(--nas-cyan) !important; border: 0; font: 600 11px var(--nas-mono); text-transform: uppercase; letter-spacing: .1em; }
body.nas .quantity-field input.quantity { width: 46px; text-align: center; background: var(--nas-bg); color: var(--nas-text); border: 0; border-left: 1px solid var(--nas-line-2); border-right: 1px solid var(--nas-line-2); font: 600 13px var(--nas-mono); }

/* cantidad en el carrito bajo el paquete: solo informativa (sin − / +) */
body.nas .product-actions .quantity-field { border-color: rgba(52, 211, 153, .4); background: rgba(52, 211, 153, .06); }
body.nas .product-actions .quantity-field .open-basket { order: 1; flex: 1; justify-content: flex-start; text-align: left; padding: 10px 12px; background: none !important; color: var(--nas-ok) !important; cursor: pointer; }
body.nas .product-actions .quantity-field .open-basket::before { content: "✓ "; }
body.nas .product-actions .quantity-field input.quantity { order: 2; width: 52px; flex: none; pointer-events: none; background: transparent; border: 0; border-left: 1px solid rgba(52, 211, 153, .3); color: var(--nas-text); font: 700 14px var(--nas-mono); -moz-appearance: textfield; appearance: textfield; }
body.nas .product-actions .quantity-field input.quantity::-webkit-inner-spin-button, body.nas .product-actions .quantity-field input.quantity::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* ---------- tabla comparativa ---------- */
.nas-cmp-nav { display: flex; justify-content: flex-end; align-items: center; gap: 10px; padding: 12px 16px 0; font: 600 12px var(--nas-mono); color: var(--nas-muted); }
.nas-cmp-nav .nas-btn { width: 34px; height: 34px; padding: 0; font-size: 16px !important; }
.nas-cmp-wrap { overflow-x: auto; padding: 12px 16px 16px; }
.nas-cmp { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; table-layout: fixed; }
.nas-cmp th, .nas-cmp td { padding: 12px 10px; border-bottom: 1px solid var(--nas-line); text-align: center; vertical-align: middle; }
.nas-cmp th:first-child, .nas-cmp td:first-child { text-align: left; width: 34%; color: var(--nas-muted); font: 500 13.5px var(--nas-body); }
.nas-cmp .nas-col-off { display: none; }
.nas-cmp-corner { vertical-align: bottom !important; font: 600 11px var(--nas-mono) !important; letter-spacing: .14em; text-transform: uppercase; color: var(--nas-faint) !important; }
.nas-cmp thead th { vertical-align: top; border-bottom: 1px solid var(--nas-line-2); padding: 0 6px 14px; }
.nas-cmp-col { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 30px 10px 14px; border: 1px solid var(--nas-line); border-radius: var(--nas-radius); background: radial-gradient(circle at 50% 30%, rgba(34, 211, 238, .12), transparent 70%), var(--nas-bg-2); height: 100%; }
.nas-cmp-ribbon { position: absolute; top: 0; left: 0; right: 0; padding: 3px 0; background: var(--nas-warn); color: #1a1205; font: 700 11px var(--nas-mono); letter-spacing: .1em; border-radius: var(--nas-radius) var(--nas-radius) 0 0; }
.nas-cmp-pic { width: 100%; max-width: 120px; height: 84px; object-fit: contain; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .5)); }
.nas-cmp-emblem { height: 84px; display: grid; place-items: center; font-size: 18px; }
.nas-cmp-rk { font: 700 16px var(--nas-head); letter-spacing: .06em; color: var(--nas-text); text-transform: uppercase; }
.nas-cmp-pr { font: 700 15px var(--nas-mono); color: var(--nas-cyan); }
.nas-cmp-pr strong { color: var(--nas-cyan); }
.nas-cmp-pr s { display: block; font-size: 12px; color: var(--nas-danger); }
.nas-cmp-act { width: 100%; margin-top: auto; }
/* recuadros de rango iguales: la celda fija la altura de la fila y el recuadro la llena */
.nas-cmp thead th[data-col] { height: 1px; }
.nas-cmp-col { box-sizing: border-box; }
.nas-cmp-col .nas-cmp-rk { min-height: 2.4em; display: flex; align-items: center; justify-content: center; line-height: 1.2; }
.nas-cmp-act .product-actions .price { display: none; }
/* regalo dentro de la tabla: enlace compacto bajo "Adquirir" */
body.nas .nas-cmp-act .product-actions .nas-gift { padding: 6px; font-size: 11px !important; border-style: dashed !important; }
body.nas .nas-cmp-act .product-actions .nas-gift svg { width: 13px; height: 13px; }
/* textos cortos dentro de la tabla (las columnas son estrechas) */
body.nas .nas-cmp-act .add, body.nas .nas-cmp-act .subscribe { width: 100%; font-size: 0 !important; padding: 9px 6px; }
.nas-cmp-act .add::after { content: "Adquirir"; font-size: 11.5px; }
.nas-cmp-act .subscribe::after { content: "Suscribirse"; font-size: 11.5px; }
.nas-cmp-act .quantity-field input.quantity { display: none; }
body.nas .nas-cmp-act .quantity-field .open-basket { font-size: 0 !important; justify-content: center; text-align: center; padding: 9px 6px; }
.nas-cmp-act .quantity-field .open-basket::before { font-size: 11.5px; }
.nas-cmp-act .quantity-field .open-basket::after { content: "En carrito"; font-size: 11.5px; letter-spacing: .04em; }
.nas-cmp-act .quantity-field .open-basket::before { letter-spacing: 0; }
.nas-cmp-label code { font: 500 12.5px var(--nas-mono); color: var(--nas-cyan); background: rgba(34, 211, 238, .07); padding: 1px 5px; border-radius: 3px; }
.nas-cmp td { color: var(--nas-text); font: 600 14px var(--nas-mono); }
.nas-ic { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font: 700 12px var(--nas-mono); }
.nas-ic-yes { background: var(--nas-ok); color: #04120c; }
.nas-ic-no { border: 1.5px solid var(--nas-faint); color: var(--nas-faint); font-size: 11px; }
.nas-cmp-div td { background: rgba(34, 211, 238, .06); color: var(--nas-cyan) !important; font: 700 11px var(--nas-mono) !important; letter-spacing: .18em; text-transform: uppercase; text-align: center !important; }
.nas-cmp tbody tr:not(.nas-cmp-div):hover td { background: rgba(255, 255, 255, .02); }
.nas-cmp tfoot td { border-bottom: 0; padding-top: 16px; }
.nas-cmp-buy { width: 100%; }
.nas-cmp-buy.nas-cmp-in { background: rgba(52, 211, 153, .1) !important; border-color: rgba(52, 211, 153, .45) !important; color: var(--nas-ok) !important; }
@media (max-width: 640px) {
  .nas-cmp-wrap { padding: 10px 8px 12px; }
  .nas-cmp th:first-child, .nas-cmp td:first-child { width: 36%; font-size: 12.5px; }
  .nas-cmp th, .nas-cmp td { padding: 10px 4px; }
  .nas-cmp-col { padding: 26px 6px 10px; }
  .nas-cmp-rk { font-size: 12.5px; letter-spacing: .02em; word-break: break-word; }
  .nas-cmp-pic, .nas-cmp-emblem { height: 60px; }
  .nas-cmp-emblem { font-size: 13px; }
  .nas-cmp-act .quantity-field .open-basket::after { content: ""; }
  .nas-cmp-act .quantity-field .open-basket::before { font-size: 15px; }
}

/* ---------- ficha de producto ---------- */
body.nas .nas-pdp { display: grid; grid-template-columns: 1fr 1.1fr; gap: 0; padding: 0; margin: 0; }
.nas-pdp-media { min-height: 320px; display: grid; place-items: center; position: relative; border-right: 1px solid var(--nas-line); background: radial-gradient(circle at 50% 60%, rgba(34, 211, 238, .14), transparent 65%), var(--nas-bg-2); }
.nas-pdp-media .image { max-width: 80%; max-height: 300px; object-fit: contain; }
.nas-pdp-info { padding: 26px 28px; display: flex; flex-direction: column; gap: 14px; }
.nas-pdp-info .product-actions { margin-top: 4px; }
.nas-warn { font: 500 12px var(--nas-mono); color: var(--nas-warn); border: 1px dashed rgba(251, 191, 36, .35); padding: 8px 12px; border-radius: var(--nas-radius); }

/* ---------- login ---------- */
body.nas .nas-login { max-width: 460px; width: 100%; margin: 0 auto; padding: 28px; }
.nas-login-form { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.nas-field-label { font: 600 11px var(--nas-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--nas-muted); }
.nas-input, body.nas .store-form input[type=text], body.nas .store-form input[type=email], body.nas .store-form input[type=number], body.nas .store-form select, body.nas .popup input[type=text], body.nas .basket input[type=text] {
  background: var(--nas-bg) !important; border: 1px solid var(--nas-line-2) !important; border-radius: var(--nas-radius) !important; padding: 12px 14px; color: var(--nas-text) !important; font: 500 15px var(--nas-mono); outline: none;
}
.nas-input:focus, body.nas .store-form input:focus { border-color: var(--nas-cyan) !important; box-shadow: 0 0 0 3px var(--nas-glow); }
.nas-login-form .nas-btn { margin-top: 10px; }
.nas-seg { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--nas-line-2); border-radius: var(--nas-radius); overflow: hidden; margin-bottom: 6px; }
.nas-seg label { position: relative; cursor: pointer; margin: 0; }
.nas-seg input { position: absolute; opacity: 0; pointer-events: none; }
.nas-seg span { display: block; text-align: center; padding: 10px; font: 600 12px var(--nas-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--nas-muted); transition: .15s; }
.nas-seg label + label span { border-left: 1px solid var(--nas-line-2); }
.nas-seg input:checked + span { background: var(--nas-glow); color: var(--nas-cyan); }
.nas-seg input:focus-visible + span { outline: 2px solid var(--nas-cyan); outline-offset: -2px; }
.nas-seg-hint { margin: 0 0 6px; font: 500 11.5px var(--nas-mono); color: var(--nas-warn); }

/* ---------- popups y carrito de Exo ---------- */
/* la X de cerrar debe quedar por encima del contenido (p. ej. la imagen de la ficha) */
body.nas .popup-close { z-index: 10; background: rgba(4, 7, 11, .75) !important; border: 1px solid var(--nas-line-2) !important; border-radius: var(--nas-radius); color: var(--nas-text) !important; }
body.nas .popup-close:hover { border-color: var(--nas-cyan) !important; color: var(--nas-cyan) !important; }
body.nas .popup .popup-content, body.nas .basket-popup .basket-popup-content, body.nas .basket-popup-content {
  background: var(--nas-panel) !important; color: var(--nas-text); border: 1px solid var(--nas-line-2); border-radius: var(--nas-radius);
}
body.nas .basket, body.nas .basket-header, body.nas .basket-second-header, body.nas .basket-checkout { background: transparent; color: var(--nas-text); border-color: var(--nas-line) !important; }
body.nas .basket-title, body.nas .basket-checkout h3 { font: 600 12px var(--nas-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--nas-cyan); }
body.nas .basket-item { border-color: var(--nas-line) !important; }
body.nas .basket-item .title a { color: var(--nas-text); font-family: var(--nas-head); }
body.nas .basket-item .options { color: var(--nas-muted); font: 500 12px var(--nas-mono); }
body.nas .basket-checkout .total { font: 700 24px var(--nas-mono); color: var(--nas-text); }
body.nas .toaster .toast, body.nas .toast { background: var(--nas-panel-2) !important; color: var(--nas-text) !important; border: 1px solid var(--nas-cyan-dim) !important; border-radius: var(--nas-radius) !important; font-family: var(--nas-mono); }

/* ---------- pie ---------- */
body.nas .site-footer.nas-footer { border-top: 1px solid var(--nas-line); background: transparent; margin: 10px 0 0; padding: 0; }
.nas-footer-inner { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; justify-content: space-between; padding: 22px 20px; font: 500 12px var(--nas-mono); color: var(--nas-faint); }
.nas-footer-pages { display: flex; gap: 18px; flex-wrap: wrap; }
.nas-footer-pages a { color: var(--nas-muted) !important; }
.nas-footer-pages a:hover { color: var(--nas-cyan) !important; }
.nas-footer-pages i { display: none; }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .nas-hero { grid-template-columns: 1fr 1fr; }
  .nas-hero .nas-logo { grid-column: 1 / -1; }
  .nas-layout { grid-template-columns: 1fr; }
  body.nas .store-sidebar.nas-side { position: static; order: 2; }
  body.nas .nas-pdp { grid-template-columns: 1fr; }
  .nas-pdp-media { border-right: 0; border-bottom: 1px solid var(--nas-line); }
  .nas-burger { display: inline-grid; place-items: center; }

  /* menú: cajón lateral controlado por main.js (body.show-navigation) */
  body.nas .site-navigation.nas-nav { position: fixed; top: 0; left: 0; bottom: 0; width: min(320px, 86vw); z-index: 50; overflow-y: auto; transform: translateX(-105%); transition: transform .25s ease; border-radius: 0 !important; }
  body.nas.show-navigation .site-navigation.nas-nav { transform: none; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .6); }
  body.nas.show-navigation .close-navigation, body.nas.show-navigation .nas-mobile-only { display: flex !important; }
  body.nas .close-navigation { margin: 10px 16px 16px; width: calc(100% - 32px); }
  /* shared.css de Exo convierte .menu en un panel flotante en móvil: aquí la lista va dentro del cajón */
  body.nas .site-navigation .menu.nas-menu { position: static; inset: auto; translate: none; padding: 6px 0; background: none; display: block; line-height: inherit; }
  body.nas.show-navigation .close-navigation { position: static !important; inset: auto !important; transform: none !important; translate: none !important; }
  body.nas .nas-sector-list a { padding: 7px 16px 7px 32px !important; }
}
@media (max-width: 640px) {
  .nas-wrap { padding: 0 16px; }
  .nas-hero { grid-template-columns: 1fr; }
  .nas-hide-sm { display: none; }
  .nas-statusbar-inner { gap: 8px; }
  .nas-brand, .nas-cart-amount { display: none; }
  .nas-op { gap: 6px; }
  .nas-h1 { font-size: 26px; }
  .nas-welcome { padding: 20px; }
  .nas-serial { float: none; display: block; margin-bottom: 6px; }
}

/* ==========================================================================
   Módulos de la barra lateral: objetivos, tarjeta regalo, estado (2026-10-16)
   ========================================================================== */
.nas-goal-pct { color: var(--nas-cyan); font-weight: 700; }
.nas-goal-img { display: block; width: 100%; max-height: 120px; object-fit: cover; border: 1px solid var(--nas-line); border-radius: var(--nas-radius); margin-bottom: 12px; }
.nas-goal-name { font: 700 15px var(--nas-head); letter-spacing: .05em; text-transform: uppercase; color: var(--nas-text); margin-bottom: 4px; }
.nas-goal-descr { font: 400 13px/1.5 var(--nas-body); color: var(--nas-muted); margin-bottom: 12px; }
.nas-goal-descr p { margin: 0 0 6px; }
.nas-bar { position: relative; height: 10px; background: var(--nas-bg); border: 1px solid var(--nas-line-2); border-radius: 2px; overflow: hidden; }
.nas-bar > span { display: block; height: 100%; min-width: 2px; background: linear-gradient(90deg, var(--nas-cyan-dim), var(--nas-cyan)); box-shadow: 0 0 12px var(--nas-glow); transition: width .6s ease; }
.nas-bar.striped > span { background-image: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .14) 0 6px, transparent 6px 12px), linear-gradient(90deg, var(--nas-cyan-dim), var(--nas-cyan)); background-size: 17px 17px, 100% 100%; }
.nas-bar.animated > span { animation: nas-bar-move 1s linear infinite; }
@keyframes nas-bar-move { to { background-position: 17px 0, 0 0; } }
@media (prefers-reduced-motion: reduce) { .nas-bar.animated > span { animation: none; } }
.nas-goal-meta { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; font: 500 12px var(--nas-mono); color: var(--nas-muted); }
.nas-goal-meta strong { color: var(--nas-text); }
.nas-goal-hint { margin: 10px 0 0; font: 400 12px/1.45 var(--nas-body); color: var(--nas-faint); }

.nas-giftcard-form { display: flex; flex-direction: column; gap: 8px; }
.nas-giftcard-row { display: flex; gap: 6px; }
body.nas .nas-giftcard .gift-card-input { flex: 1; min-width: 0; width: auto; height: auto; margin: 0; padding: 9px 10px; background: var(--nas-bg); border: 1px solid var(--nas-line-2); border-radius: var(--nas-radius); color: var(--nas-text); font: 500 13px var(--nas-mono); }
body.nas .nas-giftcard .gift-card-input:focus { outline: none; border-color: var(--nas-cyan); box-shadow: 0 0 0 3px var(--nas-glow); }
body.nas .nas-giftcard .check { flex: none; padding: 9px 12px; font: 600 11px var(--nas-mono) !important; letter-spacing: .08em; text-transform: uppercase; }
.nas-gc-msg { margin: 0; padding: 8px 10px; border-radius: var(--nas-radius); font: 500 12.5px var(--nas-mono); border: 1px solid; }
.nas-gc-msg.is-ok { color: var(--nas-ok); border-color: rgba(52, 211, 153, .4); background: rgba(52, 211, 153, .06); }
.nas-gc-msg.is-warn { color: var(--nas-warn); border-color: rgba(251, 191, 36, .4); background: rgba(251, 191, 36, .06); }
.nas-gc-msg.is-error { color: var(--nas-danger); border-color: rgba(251, 113, 133, .4); background: rgba(251, 113, 133, .06); }

.nas-status .nas-v { cursor: pointer; font-size: 17px; }
.nas-dot { display: inline-flex; align-items: center; gap: 6px; }
.nas-dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.nas-dot.is-on { color: var(--nas-ok); }
.nas-dot.is-off { color: var(--nas-danger); }

/* popup de regalo (marcado de main.js de Exo) */
body.nas .gift-form-popup .popup-content { border: 1px solid var(--nas-line-2); border-radius: var(--nas-radius); background: linear-gradient(180deg, var(--nas-panel-2), var(--nas-panel)); }
body.nas .gift-form-popup .popup-content h2 { font: 700 18px var(--nas-head); letter-spacing: .06em; text-transform: uppercase; color: var(--nas-text); }
body.nas .gift-form-popup .popup-content h2::after { content: "El paquete se entregará al jugador que indiques. Tú pagas en el checkout."; display: block; margin-top: 6px; font: 400 13px/1.45 var(--nas-body); letter-spacing: 0; text-transform: none; color: var(--nas-muted); }
body.nas .gift-form-popup .popup-content .form-control { background: var(--nas-bg); border: 1px solid var(--nas-line-2); color: var(--nas-text); font: 500 14px var(--nas-mono); }
body.nas .gift-form-popup .popup-content .form-control:focus { border-color: var(--nas-cyan); box-shadow: 0 0 0 3px var(--nas-glow); outline: none; }