/* ============================================================
   BLOCKPOINT · Estilos Canónicos · v4.2 · 2026-04-28
   FROZEN — fuente única para dev team (Morfín Lead + Sofía).
   Modificaciones requieren aprobación explícita de Ernesto.
   Origen: BLOCKPOINT-Nucleo-Visual-v4.0.html (verbatim port).
   Espejo navegable: CENTRO-NEURALGICO/MANUAL_MARCA_UNIFICADO_v4.2.html
   ============================================================ */

/* ============================================================
   BLOCKPOINT · Núcleo Visual v4.0 · Cobalto Institucional
   LOCKED post-ratificación Adolfo + Ernesto 2026-04-21
   Supersede Paleta A "Cicatriz y Amanecer" (archivada)
   ============================================================ */

:root {
  /* === Cromática base · Cobalto Institucional === */
  --bp-navy-950: #050C1A;
  --bp-navy-900: #0B1D3A;
  --bp-navy-800: #12294C;
  --bp-navy-700: #1E3A66;
  --bp-navy-600: #2E4F82;

  --bp-ink-950:  #0A0F1A;
  --bp-ink-900:  #1E293B;
  --bp-ink-700:  #334155;
  --bp-ink-500:  #64748B;
  --bp-ink-400:  #94A3B8;
  --bp-ink-300:  #CBD5E1;
  --bp-ink-200:  #D1D9E6;
  --bp-ink-100:  #E2E8F0;
  --bp-ink-50:   #F4F6FA;
  --bp-ink-0:    #FAFAFA;
  --bp-white:    #FFFFFF;

  /* === Signatura viva · Oro Metalizado === */
  --bp-signal:        #D4A14A;
  --bp-signal-ink:    #A67820;
  --bp-signal-light:  #FFE9B8;
  --bp-signal-deep:   #7A4E16;
  --bp-signal-soft:   rgba(212, 161, 74, 0.14);
  --bp-signal-ring:   rgba(212, 161, 74, 0.30);
  --bp-signal-dim:    #A67820;

  /* Gradiente metálico · 5 paradas · luz 135° desde arriba-izquierda.
     IDÉNTICO al site original (rosa-champaña → oro rico → sombra cálida
     → reflejo secundario → base bronce). El "resplandor" NO está aquí;
     vive en .metal-text con background-size: 200% + animación de shine. */
  --bp-signal-metal: linear-gradient(
    135deg,
    #FFF2D0 0%,     /* highlight especular casi blanco con tinte champaña */
    #F4C66B 18%,    /* oro claro brillante */
    #D4A14A 42%,    /* oro rico · core */
    #8A5A1E 62%,    /* sombra cálida bronce */
    #E8B964 82%,    /* reflejo secundario · borde opuesto */
    #7A4E16 100%    /* base ámbar profundo */
  );
  --bp-signal-metal-soft: linear-gradient(
    135deg,
    #FFF2D022 0%,
    #D4A14A33 45%,
    #7A4E1622 100%
  );

  /* === Semánticos === */
  --bp-confirm:       #10B981;
  --bp-confirm-soft:  rgba(16, 185, 129, 0.10);
  --bp-pending:       #F59E0B;
  --bp-alert:         #EF4444;

  /* === Superficies (light mode) === */
  --surface-0: var(--bp-white);
  --surface-1: var(--bp-ink-50);
  --surface-2: #ECF0F6;
  --surface-3: var(--bp-ink-100);
  --border-1:  var(--bp-ink-100);
  --border-2:  var(--bp-ink-200);
  --border-3:  var(--bp-ink-300);

  --text-primary:   var(--bp-navy-900);
  --text-secondary: var(--bp-ink-700);
  --text-tertiary:  var(--bp-ink-500);
  --text-inverse:   var(--bp-white);

  /* === Tipografía LOCKED v4.0 · IDÉNTICA al site original ===
     Fraunces (display · voz editorial con variables opsz/SOFT),
     Geist (body · UI sans moderna), JetBrains Mono (hashes/data).
     EB Garamond se usa EXCLUSIVAMENTE para el wordmark del logo,
     hardcodeada vía .wm-text. NO usar Garamond en otro lugar. */
  --font-display: "Fraunces", "Iowan Old Style", "Charter", Georgia, serif;
  --font-body:    "Geist", "Söhne", "Helvetica Neue", ui-sans-serif, system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-logo:    "EB Garamond", "Iowan Old Style", "Charter", Georgia, serif;

  /* === Escala modular · 8pt grid · ratio ~1.25 === */
  --fs-12: 12px; --fs-13: 13px; --fs-14: 14px; --fs-15: 15px;
  --fs-16: 16px; --fs-18: 18px; --fs-20: 20px; --fs-24: 24px;
  --fs-28: 28px; --fs-32: 32px; --fs-40: 40px; --fs-48: 48px;
  --fs-56: 56px; --fs-64: 64px; --fs-80: 80px; --fs-96: 96px;
  --fs-120: 120px;

  /* === Spacing 8pt === */
  --s-2: 2px; --s-4: 4px; --s-8: 8px; --s-12: 12px;
  --s-16: 16px; --s-24: 24px; --s-32: 32px; --s-40: 40px;
  --s-48: 48px; --s-56: 56px; --s-64: 64px; --s-80: 80px;
  --s-96: 96px; --s-120: 120px; --s-160: 160px;

  /* === Radii === */
  --r-4: 4px; --r-8: 8px; --r-12: 12px; --r-16: 16px; --r-full: 999px;

  /* === Motion · curva única === */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 200ms; --t-base: 400ms; --t-slow: 600ms;
  --t-breath: 2800ms; --t-thinking: 1400ms;

  /* === Elevación === */
  --shadow-1: 0 1px 2px rgba(11, 29, 58, 0.06), 0 0 0 1px rgba(11, 29, 58, 0.04);
  --shadow-2: 0 4px 16px rgba(11, 29, 58, 0.08), 0 0 0 1px rgba(11, 29, 58, 0.04);
  --shadow-3: 0 12px 40px rgba(11, 29, 58, 0.12), 0 0 0 1px rgba(11, 29, 58, 0.04);

  --container: 1280px;
  --gutter: 32px;
}

:root[data-theme="dark"] {
  --surface-0: var(--bp-navy-900);
  --surface-1: var(--bp-navy-800);
  --surface-2: #172F54;
  --surface-3: var(--bp-navy-700);
  --border-1:  rgba(203, 213, 225, 0.08);
  --border-2:  rgba(203, 213, 225, 0.14);
  --border-3:  rgba(203, 213, 225, 0.22);
  --text-primary:   var(--bp-white);
  --text-secondary: var(--bp-ink-200);
  --text-tertiary:  var(--bp-ink-400);
  --text-inverse:   var(--bp-navy-900);
  --shadow-1: 0 1px 2px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.04);
  --shadow-2: 0 4px 16px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.04);
  --shadow-3: 0 12px 40px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.06);
}

/* ============================================================
   BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--surface-0);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease);
}

body { overflow-x: hidden; }

/* Textura de fondo · grid DUAL (128px mayor + 32px menor) · muy sutil
   IDÉNTICO al site original. Cuatro capas: dos verticales, dos horizontales,
   la mayor al 100% de border-1, la menor al 55%. Mask radial que concentra
   el grid en el área de lectura y lo desvanece en los bordes — de ahí la
   sensación "borrosita" en algunas zonas. El color del grid es gris sistema
   (border-1) — se percibe cálido/dorado sobre superficies claras porque
   convive con metal-text y glows dorados en la misma zona visual. */
body::before {
  content: "";
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(to right,  var(--border-1) 1px, transparent 1px),
    linear-gradient(to bottom, var(--border-1) 1px, transparent 1px),
    linear-gradient(to right,  color-mix(in oklch, var(--border-1) 55%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in oklch, var(--border-1) 55%, transparent) 1px, transparent 1px);
  background-size: 128px 128px, 128px 128px, 32px 32px, 32px 32px;
  background-position: 0 0, 0 0, 0 0, 0 0;
  opacity: 0.55;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, black 30%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, black 30%, transparent 85%);
}

:root[data-theme="dark"] body::before { opacity: 0.35; }

body > * { position: relative; z-index: 1; }

::selection { background: var(--bp-signal); color: var(--bp-white); }

a { color: inherit; text-decoration: none; }

/* ============================================================
   TIPOGRAFÍA · idéntica al site (Fraunces variable + Geist + JBM)
   ============================================================ */
html, body { font-feature-settings: "ss01", "cv11"; }

.display {
  font-family: var(--font-display);
  font-weight: 350;
  font-variation-settings: "opsz" 144, "SOFT" 30;
  letter-spacing: -0.02em;
  line-height: 0.98;
  text-wrap: balance;
}

h1.display { font-size: clamp(48px, 6vw, 96px); }
h2.display { font-size: clamp(32px, 4vw, 56px); }
h3.display { font-size: clamp(24px, 3vw, 36px); font-weight: 450; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-tertiary);
}

.mono { font-family: var(--font-mono); font-feature-settings: "zero", "ss01"; }
.numeric { font-variant-numeric: tabular-nums; }
.italic  { font-style: italic; }

/* === Oro metalizado · brillante con SHINE animado ===
   background-size: 200% permite que la posición recorra el gradiente,
   creando el "resplandor" que viaja por las letras. Drop-shadow añade
   glow cálido (18% opacidad) y sombra sutil bronce (35%) para dar peso.
   Este es EL efecto característico de "liquidada en cadena" en el site. */
.metal-text {
  background: var(--bp-signal-metal);
  background-size: 200% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter:
    drop-shadow(0 0 24px rgba(212, 161, 74, 0.18))
    drop-shadow(0 1px 0  rgba(122, 78,  22, 0.35));
  animation: bp-metal-shine 9s var(--ease) infinite;
  font-weight: 400;
}
@keyframes bp-metal-shine {
  0%   { background-position:   0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position:   0% 50%; }
}

/* Borde oro hairline · técnica site-border original */
.metal-border { position: relative; }
.metal-border::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--bp-signal-metal);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

.lede {
  font-size: var(--fs-20);
  color: var(--text-secondary);
  line-height: 1.55;
  max-width: 62ch;
  text-wrap: pretty;
}

/* ============================================================
   LAYOUT
   ============================================================ */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section {
  padding: var(--s-120) 0;
  border-bottom: 1px solid var(--border-1);
}
.section-tight { padding: var(--s-80) 0; border-bottom: 1px solid var(--border-1); }

.section-head { margin-bottom: var(--s-64); max-width: 760px; }
.section-head .eyebrow { margin-bottom: var(--s-16); }
.section-head .lede { margin-top: var(--s-24); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-24); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-24); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-16); }
.grid-6 { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--s-12); }

@media (max-width: 960px) {
  .grid-2, .grid-3, .grid-4, .grid-6 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .grid-2, .grid-3, .grid-4, .grid-6 { grid-template-columns: 1fr; }
}

/* ============================================================
   TOPBAR
   ============================================================ */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--surface-0) 82%, transparent);
  backdrop-filter: saturate(140%) blur(16px);
  -webkit-backdrop-filter: saturate(140%) blur(16px);
  border-bottom: 1px solid var(--border-1);
}
.topbar-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--s-16) var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-24);
}
.topbar-right { display: flex; align-items: center; gap: var(--s-16); }

.badge {
  display: inline-flex; align-items: center; gap: var(--s-4);
  font-family: var(--font-mono); font-size: 10px;
  padding: 3px var(--s-8); border-radius: var(--r-full);
  letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500;
  border: 1px solid currentColor;
}
.badge-confirm { color: var(--bp-confirm); background: var(--bp-confirm-soft); }
.badge-signal  { color: var(--bp-signal-ink); background: var(--bp-signal-soft); border-color: var(--bp-signal); }
.badge-locked  { color: var(--bp-signal-ink); background: var(--bp-signal-soft); border-color: var(--bp-signal); }

.theme-toggle {
  appearance: none; border: 1px solid var(--border-2); background: var(--surface-1);
  color: var(--text-primary);
  padding: var(--s-8) var(--s-12); border-radius: var(--r-8);
  font-family: var(--font-mono); font-size: var(--fs-12); letter-spacing: 0.08em;
  cursor: pointer; transition: all var(--t-fast) var(--ease);
  display: inline-flex; align-items: center; gap: var(--s-8);
}
.theme-toggle:hover { border-color: var(--bp-signal); color: var(--bp-signal-ink); }

/* ============================================================
   LOGO MARK · Punto que respira + wordmark EB Garamond
   ============================================================ */
.logo-lockup {
  display: inline-flex; align-items: center; gap: var(--s-12);
  flex-shrink: 0;
  /* Baseline compartida entre isotipo y wordmark: centro óptico exacto */
  line-height: 1;
}
.logo-svg { width: 32px; height: 32px; position: relative; flex-shrink: 0; }
.logo-svg svg { position: absolute; inset: 0; }

.logo-wordmark {
  display: inline-flex; align-items: center;
  line-height: 1;
}
.logo-wordmark .wm-text {
  /* EB Garamond exclusivo del wordmark — override hard, fuente independiente
     de --font-display (que es Fraunces en resto del sistema). */
  font-family: var(--font-logo);
  font-size: 26px; font-weight: 500;
  letter-spacing: -0.018em;
  color: var(--text-primary);
  font-feature-settings: "liga", "kern";
  line-height: 1;
  font-variation-settings: normal; /* anula opsz/SOFT heredados */
}

/* Animaciones del logo */
/* Animaciones del logo · canon verbatim de blockpoint-site-bundle.html
   Sincronizado 2026-04-29 por instrucción de Ernesto: el bundle (site live)
   es la fuente verbatim ratificada en memoria — supersede los valores
   heredados de Nucleo-Visual-v4.0 / Manual Unificado v4.2.
   Espejo y Nucleo-Visual quedan en cola de sincronización. */
@keyframes bp-breathe {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%      { opacity: 1.0; transform: scale(1.03); }
}
@keyframes bp-halo {
  0%   { transform: scale(1);   opacity: 0.35; }
  100% { transform: scale(2.4); opacity: 0; }
}
@keyframes bp-spin {
  to { transform: rotate(360deg); }
}
.logo-core {
  transform-origin: center;
  animation: bp-breathe var(--t-breath) var(--ease) infinite;
}
.logo-halo {
  transform-origin: center;
  animation: bp-halo var(--t-breath) var(--ease) infinite;
}
.logo-ring-spin {
  transform-origin: center;
  animation: bp-spin var(--t-thinking) linear infinite;
}

/* ============================================================
   PALETA
   ============================================================ */
.swatch {
  display: flex; flex-direction: column; gap: var(--s-8);
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: var(--r-12);
  overflow: hidden;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.swatch:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.swatch-color { height: 120px; position: relative; }
.swatch-meta  {
  padding: var(--s-12) var(--s-16) var(--s-16);
  display: flex; flex-direction: column; gap: 4px;
}
.swatch-name  { font-family: var(--font-display); font-size: var(--fs-16); font-weight: 500; }
.swatch-hex   { font-family: var(--font-mono); font-size: var(--fs-12); color: var(--text-tertiary); }
.swatch-use   { font-size: var(--fs-12); color: var(--text-secondary); line-height: 1.4; }

.swatch-metal .swatch-color {
  background: var(--bp-signal-metal);
}

/* ============================================================
   TIPOGRAFÍA · demo
   ============================================================ */
.type-row {
  padding: var(--s-24) 0;
  border-bottom: 1px dashed var(--border-1);
  display: grid; grid-template-columns: 180px 1fr auto; gap: var(--s-24);
  align-items: baseline;
}
.type-row:last-child { border-bottom: none; }
.type-row .type-label {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--text-tertiary);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.type-row .type-sample { color: var(--text-primary); }
.type-row .type-spec {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--text-tertiary);
  white-space: nowrap;
}

@media (max-width: 720px) {
  .type-row { grid-template-columns: 1fr; gap: var(--s-8); }
  .type-row .type-spec { text-align: left; }
}

/* ============================================================
   TARJETAS DE APLICACIÓN
   ============================================================ */
.card {
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: var(--r-12);
  padding: var(--s-24);
}
.card-signal {
  background: var(--bp-signal-soft);
  border-color: var(--bp-signal);
}

.btn {
  appearance: none; border: none;
  display: inline-flex; align-items: center; gap: var(--s-8);
  padding: var(--s-12) var(--s-24);
  font-family: var(--font-body); font-size: var(--fs-14); font-weight: 500;
  border-radius: var(--r-8); cursor: pointer;
  transition: all var(--t-fast) var(--ease);
  letter-spacing: 0.01em;
}
.btn-primary {
  background: var(--bp-navy-900); color: var(--bp-white);
  border: 1px solid var(--bp-navy-900);
}
.btn-primary:hover { background: var(--bp-navy-800); border-color: var(--bp-signal); box-shadow: 0 0 0 3px var(--bp-signal-soft); }
/* btn-signal · idéntico al site original (sólido Signal, no gradient).
   El metal se reserva para el texto (.metal-text) y swatches de muestra. */
.btn-signal {
  background: var(--bp-signal);
  color: var(--bp-white);
  border: 1px solid var(--bp-signal);
  font-weight: 500;
}
.btn-signal:hover {
  background: var(--bp-signal-dim);
  box-shadow: 0 0 0 3px var(--bp-signal-ring);
  transform: translateY(-1px);
}
.btn-ghost {
  background: transparent; color: var(--text-primary);
  border: 1px solid var(--border-2);
}
.btn-ghost:hover { border-color: var(--bp-signal); color: var(--bp-signal-ink); }

.wallet-chip {
  display: inline-flex; align-items: center; gap: var(--s-8);
  padding: var(--s-8) var(--s-12);
  background: var(--surface-2); border: 1px solid var(--border-2);
  border-radius: var(--r-full);
  font-family: var(--font-mono); font-size: var(--fs-12);
  color: var(--text-secondary);
}
.wallet-chip .dot-confirm { width: 6px; height: 6px; border-radius: 50%; background: var(--bp-confirm); }

.kpi {
  display: flex; flex-direction: column; gap: var(--s-4);
}
.kpi .kpi-value {
  font-family: var(--font-mono);
  font-size: var(--fs-40);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.kpi.signal .kpi-value { color: var(--bp-signal-ink); }
.kpi .kpi-label {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-tertiary);
}

/* ============================================================
   DO · DON'T
   ============================================================ */
.do-dont {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--s-24);
}
@media (max-width: 720px) { .do-dont { grid-template-columns: 1fr; } }
.rule-card {
  padding: var(--s-24);
  border-radius: var(--r-12);
  border: 1px solid var(--border-1);
  background: var(--surface-1);
}
.rule-card.ok    { border-left: 4px solid var(--bp-confirm); }
.rule-card.bad   { border-left: 4px solid var(--bp-alert); }
.rule-card h4 {
  font-family: var(--font-display);
  font-size: var(--fs-20); font-weight: 500;
  margin-bottom: var(--s-8);
}
.rule-card.ok h4  { color: var(--bp-confirm); }
.rule-card.bad h4 { color: var(--bp-alert); }

/* ============================================================
   UTILS
   ============================================================ */
.hr-gold {
  height: 1px; border: none; margin: var(--s-48) 0;
  background: linear-gradient(90deg, transparent 0%, var(--bp-signal) 50%, transparent 100%);
}
.sticky-note {
  padding: var(--s-16) var(--s-20);
  background: var(--bp-signal-soft);
  border: 1px solid var(--bp-signal);
  border-left: 4px solid var(--bp-signal);
  border-radius: var(--r-8);
  font-size: var(--fs-14);
  color: var(--text-primary);
}

.footer {
  padding: var(--s-64) 0;
  text-align: center;
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: 0.08em;
}

/* Motion demo */
.motion-demo {
  padding: var(--s-48);
  display: flex; align-items: center; justify-content: space-around;
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: var(--r-12);
  min-height: 200px;
}
.motion-cell {
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: var(--s-12);
}
.motion-cell .motion-label {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}