/* ================================================================
   THEME.CSS — Rediseño sobrio / técnico (carga DESPUÉS del resto)
   Negro casi puro + azules claros de contraste. Sin líneas entre
   header / hero / cuerpo / footer: la página se lee como una sola pieza.
================================================================ */
:root {
  /* Negro casi puro (no #000 en todo) + azul de marca #418FFB (el mismo azul del logotipo).
     Blanco para títulos; el azul se reserva para enlaces, estados activos y detalles interactivos. */
  --bg: #050507; --bg2: #08080b; --bg3: #0e0e13; --card: #0a0a0e; --card2: #111117;
  --border: #1b1b24; --border2: #2a2a36;
  --text: #f5f6f8; --muted: #a4a6b1; --muted2: #80828e;
  --accent: #418ffb; --accent-b: #7db1ff; --accent-d: rgba(65, 143, 251, 0.12); --accent-r: 65, 143, 251;
  /* «ember» era el naranja de «esto se abre»: ahora es el mismo azul de marca (los usos antiguos heredan el cambio). */
  --ember: #418ffb; --ember-r: 65, 143, 251;
  --blue-deep: #1f5fc4;
  --r: 12px; --r-sm: 8px; --max-w: 1240px; --nav-h: 76px;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --display: "Bricolage Grotesque", "Inter", system-ui, sans-serif;
}
html { background: var(--bg); }
body { font-family: "Inter", system-ui, -apple-system, sans-serif; font-size: 16px; letter-spacing: -0.005em; background: transparent; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(900px 520px at 85% -8%, rgba(var(--accent-r), 0.06), transparent 65%),
              radial-gradient(700px 480px at -5% 55%, rgba(31, 95, 196, 0.05), transparent 70%); }
h1, h2, h3 { font-family: var(--display); }
h4, .btn, .chip, .tag { font-family: "Inter", system-ui, sans-serif; }
h1, h2, h3 { letter-spacing: -0.03em; line-height: 1.12; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
::selection { background: rgba(var(--accent-r), 0.3); }

/* Header: transparente, se funde con la página. Se oculta al bajar y reaparece al subir (js/main.js). */
#navbar { background: none; border-bottom: 0; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1); will-change: transform; }
#navbar.nav-hidden { transform: translateY(-100%); }
#navbar::before { content: ""; position: absolute; inset: 0 0 -28px 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(5, 5, 7, 0.9), rgba(5, 5, 7, 0)); transition: background 0.25s; }
#navbar.scrolled { background: none; box-shadow: none; }
#navbar.scrolled::before { background: rgba(5, 5, 7, 0.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  -webkit-mask-image: linear-gradient(#000 62%, transparent); mask-image: linear-gradient(#000 62%, transparent); }
.nav-inner { justify-content: flex-start; width: 100%; padding-inline: clamp(1rem, 3vw, 2.75rem); }
.nav-logo img { height: 54px; }
.nav-links { margin-left: 2.6rem; gap: 0.4rem; }
.nav-links a { font-family: "Inter", system-ui, sans-serif !important; font-size: 0.98rem !important; font-weight: 500 !important; letter-spacing: 0; padding: 0.5rem 1rem; }
.nav-links a.active { color: var(--accent) !important; background: transparent !important; box-shadow: inset 0 -2px 0 var(--accent); border-radius: 0 !important; }
.nav-links a:hover { color: var(--text); }
.nav-links a.active:hover { color: var(--accent-b) !important; }
.nav-meta { margin-left: auto; display: flex; align-items: center; gap: 0.55rem; font-family: var(--mono); font-size: 0.74rem; color: var(--muted); white-space: nowrap; letter-spacing: 0.01em; }
.nav-meta b { color: var(--text); font-weight: 500; font-variant-numeric: tabular-nums; }
.nav-meta small { font: inherit; color: var(--muted2); }
.nav-meta .sep { width: 3px; height: 3px; border-radius: 50%; background: var(--muted2); opacity: 0.7; }
.nav-toggle { width: 44px; height: 44px; }
@media (max-width: 768px) {
  :root { --nav-h: 68px; }
  .nav-logo img { height: 46px; }
  .nav-meta { order: 2; font-size: 0.7rem; } .nav-toggle { order: 3; margin-left: 0.8rem; } .nav-meta .city, .nav-meta .sep { display: none; }
  .nav-links { background: rgba(5, 5, 7, 0.98); border-top: 0; margin-left: 0; }
  .nav-links a.active { box-shadow: inset 3px 0 0 var(--accent); }
}

.btn { font-weight: 600; font-size: 0.88rem; padding: 0.68rem 1.25rem; border-radius: 8px; letter-spacing: 0; }
.btn-primary { background: var(--text); color: #050507; }
.btn-primary:hover { background: var(--accent); color: #fff; box-shadow: 0 6px 24px rgba(var(--accent-r), 0.3); transform: translateY(-1px); }
.btn-ghost { border: 1px solid var(--border2); color: var(--text); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); }
.tag { font-family: var(--mono); font-weight: 500; font-size: 0.68rem; border-radius: 6px; padding: 0.2rem 0.55rem; }
.chip { font-family: var(--mono); font-weight: 500; font-size: 0.74rem; border-radius: 8px; }
.chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }

.page-header { padding: calc(var(--nav-h) + 3.5rem) 0 2.2rem; background: none; border-bottom: 0; }
.page-header::before, .page-header::after { display: none; }
.page-header .wrap { max-width: var(--max-w); }
.ph-label { font-family: var(--mono) !important; font-size: 0.72rem !important; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent) !important; }
.page-header h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 700; margin: 0.5rem 0; }
.page-header p { color: var(--muted); max-width: 640px; }

.pg-col, .tele, .npg, .dg-net, .exp, .serving, .drift, .ab, .pipe, .explain { border-radius: var(--r); }
.lab-tabs button { border-radius: var(--r); }
.lab-tabs button.on { border-color: var(--accent); background: var(--card2); }
.lab-tabs button.on i { color: var(--accent); }
.lab-cta { border-color: var(--border2); background: var(--card); }
.lab-cta:hover { border-color: var(--accent); }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }
[hidden] { display: none !important; }
footer#footer { visibility: hidden; } body.ready footer#footer { visibility: visible; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }