/* =================================================================
   LUMNIA · BRAND BOOK · shared stylesheet
   ================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&family=Instrument+Serif:ital@0;1&family=Space+Grotesk:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* core */
  --bg: #0b0a0d;
  --bg-2: #131116;
  --bg-3: #1a181e;
  --ink: #f5f1ea;
  --ink-dim: #93908a;
  --ink-faint: #3a3740;
  --line: #211f25;
  --line-strong: #2d2a32;

  /* accents (sin tocar) */
  --acc-a: oklch(0.88 0.17 35);    /* peach */
  --acc-b: oklch(0.78 0.22 340);   /* magenta */
  --acc-c: oklch(0.85 0.15 220);   /* cyan */

  /* support tokens (extension) */
  --acc-success: oklch(0.78 0.16 155);   /* lima/verde */
  --acc-warning: oklch(0.83 0.15 75);    /* ámbar */
  --acc-danger:  oklch(0.65 0.22 25);    /* rojo cálido */

  /* type */
  --display: 'Archivo', sans-serif;
  --body: 'Space Grotesk', sans-serif;
  --serif: 'Instrument Serif', serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;

  /* gradient utility */
  --grad-halo: conic-gradient(from 0deg, var(--acc-a), var(--acc-b), var(--acc-c), var(--acc-a));
  --grad-text: linear-gradient(120deg, var(--acc-a) 0%, var(--acc-b) 50%, var(--acc-c) 100%);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--bg); color: var(--ink); min-height: 100vh; }
body {
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* Backgrounds */
.halo-bg {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(circle at 20% 10%, oklch(0.78 0.22 340 / 0.12) 0%, transparent 40%),
    radial-gradient(circle at 85% 40%, oklch(0.88 0.17 35 / 0.10) 0%, transparent 45%),
    radial-gradient(circle at 50% 90%, oklch(0.85 0.15 220 / 0.08) 0%, transparent 50%);
  filter: blur(20px);
}
.grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 1;
  opacity: 0.06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.container { max-width: 1320px; margin: 0 auto; padding: 0 48px; position: relative; z-index: 2; }
@media (max-width: 768px) { .container { padding: 0 24px; } }

/* ---- Top bar (brand book chrome) ---- */
.bb-nav {
  position: sticky; top: 0; z-index: 50;
  padding: 18px 0;
  background: rgba(11,10,13,0.7); backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line);
}
.bb-nav-inner {
  display: flex; justify-content: space-between; align-items: center;
}
.bb-brand {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--display); font-weight: 700; font-size: 17px; letter-spacing: -0.02em;
}
.bb-brand-halo {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--grad-halo);
  filter: blur(0.6px) saturate(1.3);
  animation: bbRotate 14s linear infinite;
  box-shadow: 0 0 16px oklch(0.78 0.22 340 / 0.5);
}
@keyframes bbRotate { to { transform: rotate(360deg); } }

.bb-section-tag {
  font-family: var(--mono); font-size: 11px; color: var(--ink-dim);
  text-transform: uppercase; letter-spacing: 0.18em;
  display: inline-flex; align-items: center; gap: 12px;
}
.bb-section-tag::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--grad-halo);
}

.bb-section-links {
  display: flex; gap: 6px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase;
}
.bb-section-links a {
  padding: 8px 14px; border-radius: 999px;
  color: var(--ink-dim);
  border: 1px solid transparent;
  transition: all .3s;
}
.bb-section-links a:hover { color: var(--ink); border-color: var(--line-strong); }
.bb-section-links a.active {
  color: var(--ink); border-color: var(--line-strong); background: var(--bg-2);
}

/* ---- Page head ---- */
.bb-head {
  padding: 80px 0 60px;
  border-bottom: 1px solid var(--line);
}
.bb-eyebrow {
  font-family: var(--mono); font-size: 12px; color: var(--ink-dim);
  text-transform: uppercase; letter-spacing: 0.2em;
  display: inline-flex; align-items: center; gap: 12px;
  margin-bottom: 28px;
}
.bb-eyebrow::before {
  content: ''; width: 24px; height: 1px; background: var(--ink-dim);
}
.bb-h1 {
  font-family: var(--display);
  font-size: clamp(56px, 8vw, 100px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.92;
  text-wrap: balance;
}
.bb-h1 em {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  background: var(--grad-text);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.bb-lead {
  margin-top: 32px;
  max-width: 640px;
  font-size: 19px; line-height: 1.55; color: var(--ink-dim);
}

/* ---- Sections ---- */
.bb-section { padding: 80px 0; border-bottom: 1px solid var(--line); }
.bb-section:last-child { border-bottom: 0; }
.bb-section-head { margin-bottom: 48px; max-width: 720px; }
.bb-section-h2 {
  font-family: var(--display);
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 700; letter-spacing: -0.03em; line-height: 1.05;
  margin-top: 16px;
}
.bb-section-h2 em {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  background: var(--grad-text);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.bb-section-desc {
  margin-top: 20px;
  font-size: 16px; line-height: 1.6; color: var(--ink-dim); max-width: 60ch;
}

/* ---- Cards / panels ---- */
.bb-card {
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.015);
  border-radius: 18px;
  padding: 32px;
  position: relative;
}
.bb-card-tag {
  font-family: var(--mono); font-size: 10px;
  color: var(--ink-dim); letter-spacing: 0.18em; text-transform: uppercase;
}
.bb-card-h {
  font-family: var(--display); font-weight: 700;
  font-size: 22px; letter-spacing: -0.02em;
  margin-top: 12px;
}
.bb-card-p {
  font-size: 14px; line-height: 1.55; color: var(--ink-dim);
  margin-top: 12px;
}

/* ---- Footer ---- */
.bb-foot {
  padding: 48px 0;
  border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 11px; color: var(--ink-dim);
  text-transform: uppercase; letter-spacing: 0.15em;
  display: flex; justify-content: space-between; align-items: center;
}
.bb-foot a { color: var(--ink-dim); transition: color .3s; }
.bb-foot a:hover { color: var(--ink); }

/* ---- Reveal (light) ---- */
[data-reveal] {
  opacity: 0; transform: translateY(28px);
  transition: opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1);
}
[data-reveal].in { opacity: 1; transform: translateY(0); }

/* ---- Mobile ---- */
@media (max-width: 768px) {
  .bb-nav { padding: 14px 0; }
  .bb-section-links { display: none; }
  .bb-head { padding: 56px 0 40px; }
  .bb-section { padding: 56px 0; }
  .bb-foot { flex-direction: column; gap: 14px; align-items: flex-start; }
}