/* ORBITAL GRID v4 — fuentes latin self-hosted en /static/fonts/*.woff2 (CSP font-src 'self', sin CDN). Autogen. */
@font-face{font-family:'Archivo';font-style:normal;font-weight:500;font-display:swap;src:url(/static/fonts/archivo.woff2?v=1) format('woff2');}
@font-face{font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap;src:url(/static/fonts/archivo.woff2?v=1) format('woff2');}
@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;src:url(/static/fonts/archivo.woff2?v=1) format('woff2');}
@font-face{font-family:'Archivo';font-style:normal;font-weight:800;font-display:swap;src:url(/static/fonts/archivo.woff2?v=1) format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/inter.woff2?v=1) format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(/static/fonts/inter.woff2?v=1) format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(/static/fonts/inter.woff2?v=1) format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(/static/fonts/inter.woff2?v=1) format('woff2');}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/jetbrainsmono.woff2?v=1) format('woff2');}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/static/fonts/jetbrainsmono.woff2?v=1) format('woff2');}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:600;font-display:swap;src:url(/static/fonts/jetbrainsmono.woff2?v=1) format('woff2');}
/* ============================================================================
   ORBITAL GRID — DESIGN TOKENS v4.0 · "DESCENT" (radical)
   Evolución del sistema --og-. Dark-first · aeroespacial cinematográfico.
   Prefijo: --og-  ·  Autor: GROWX NOVA  ·  Fecha: 2026-07-11
   ----------------------------------------------------------------------------
   QUÉ CAMBIA vs v3 (que el dueño llamó "flojo"):
   - El GOLD/BEACON pasa de acento tímido a PROTAGONISTA. Momentos de contraste
     dramático cyan↔gold (F1, CTA final, nodos, número de "la respuesta").
   - La página DESCIENDE: arriba es cielo frío (cyan), abajo es tierra cálida
     (gold). El fondo cambia de temperatura al hacer scroll. Nuevos tokens
     --og-ground* rompen el "dark-cyan uniforme".
   - Escala tipográfica VALIENTE: números gigantes (--og-fs-giant hasta ~11rem),
     hero mega, tratamiento "expanded" de Archivo vía scaleX (--og-expand).
   - Franjas de color, línea de descenso como espina vertical, composición por
     sección (no grilla uniforme de cards).
   Reglas de oro (se mantienen y se INTENSIFICAN):
   - Gradiente de marca (cyan→teal→blue) SOLO en keywords/métricas/bordes.
   - DESCENT (cyan→gold) es la firma: momentos héroe (hero, pasos, CTA final).
   - Gold = "la respuesta / confianza / nodo activo". Ahora con presencia real.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* ==== 1. SUPERFICIES — CIELO (dark base frío, mitad superior) ============ */
  --og-abyss:        #03050B;   /* fondo más profundo, footer, viñeta */
  --og-void:         #070B14;   /* fondo base de página (cielo) */
  --og-deep:         #0A1120;   /* franja / sección elevada */
  --og-surface:      #0E1626;   /* card / panel base */
  --og-surface-2:    #16223A;   /* card elevada / hover / dropdown (v5: +elevación) */
  --og-surface-3:    #20304E;   /* input / fila activa / pressed (v5: +elevación) */

  /* ==== 1b. SUPERFICIES — TIERRA (dark base CÁLIDO, mitad inferior) ======== */
  /* NUEVO v4 — el fondo se entibia al descender. Rompe el dark-cyan uniforme. */
  --og-ground:       #0C0A10;   /* base tierra: near-black con tinte cálido */
  --og-ground-2:     #14100C;   /* franja tierra elevada (ámbar muy apagado) */
  --og-ground-surface: #191309; /* card sobre tierra */
  --og-ground-line:  rgba(245, 184, 65, .14);  /* hairline cálido de tierra */

  /* Glass (overlays sobre mapa/hero) */
  --og-glass:        rgba(14, 22, 38, .62);
  --og-glass-2:      rgba(19, 30, 50, .80);
  --og-glass-blur:   16px;

  /* ==== 2. BORDES / LÍNEAS ================================================= */
  --og-line:         rgba(132, 162, 192, .16);   /* v5: hairlines con más presencia */
  --og-line-2:       rgba(132, 162, 192, .26);
  --og-line-strong:  rgba(132, 162, 192, .42);
  --og-hairline-cy:  rgba(62, 230, 255, .22);
  --og-hairline-gd:  rgba(245, 184, 65, .28);   /* NUEVO — hairline cálido */

  /* ==== 3. TEXTO ========================================================== */
  /* v5 tema: se sube el contraste del texto secundario/terciario para que el
     dark deje de leerse plano. text-2 9.6→11.4, muted 6.0→7.5, dim 3.3→4.7
     (dim ahora pasa AA 4.5 para texto normal sobre --og-void). */
  --og-text:         #EAF1F7;
  --og-text-2:       #B8C7D6;
  --og-muted:        #90A2B4;
  --og-dim:          #6B7E92;
  --og-text-invert:  #04121B;   /* sobre botones cyan/gold */
  --og-text-warm:    #F3E6CF;   /* NUEVO — texto sobre zona tierra (marfil) */

  /* ==== 4. CIELO / SEÑAL (orbital — ADN GROWX) ============================ */
  --og-signal:       #3EE6FF;
  --og-signal-2:     #37B6C7;
  --og-orbit:        #2D82A9;
  --og-signal-soft:  rgba(62, 230, 255, .12);
  --og-signal-line:  rgba(62, 230, 255, .40);

  /* ==== 5. TIERRA / BEACON (la respuesta · protagonista v4) =============== */
  --og-beacon:       #F5B841;   /* gold-ámbar — la respuesta, CTA, nodo */
  --og-beacon-2:     #FFCB6B;   /* highlight cálido */
  --og-beacon-hot:   #FFD98A;   /* pico luminoso del glow */
  --og-beacon-deep:  #C8922A;   /* sombra del gold */
  --og-beacon-soft:  rgba(245, 184, 65, .16);
  --og-beacon-line:  rgba(245, 184, 65, .45);

  /* ==== 6. CONFIANZA DEL DATO (semáforo) ================================== */
  --og-conf-high:    #4ADE80;
  --og-conf-mid:     #F5B841;
  --og-conf-low:     #FF7A6B;
  --og-conf-high-soft: rgba(74, 222, 128, .14);
  --og-conf-mid-soft:  rgba(245, 184, 65, .14);
  --og-conf-low-soft:  rgba(255, 122, 107, .14);

  /* ==== 7. ESTADOS ======================================================== */
  --og-live:         #4ADE80;
  --og-warn:         #F5B841;
  --og-danger:       #FF6B6B;
  --og-info:         #3EE6FF;
  --og-live-soft:    rgba(74, 222, 128, .12);
  --og-danger-soft:  rgba(255, 107, 107, .12);

  /* ==== 8. VERTICALES ===================================================== */
  --og-v-agro:       #5FD98A;
  --og-v-agua:       #4FA8FF;
  --og-v-fuego:      #FF7A3C;
  --og-v-urbano:     #B98CFF;
  --og-v-mineria:    #E0A15E;
  --og-v-agro-soft:    rgba(95, 217, 138, .16);
  --og-v-agua-soft:    rgba(79, 168, 255, .16);
  --og-v-fuego-soft:   rgba(255, 122, 60, .16);
  --og-v-urbano-soft:  rgba(185, 140, 255, .16);
  --og-v-mineria-soft: rgba(224, 161, 94, .16);

  /* ==== 9. GRADIENTES ===================================================== */
  --og-grad-brand:   linear-gradient(96deg, #3EE6FF 0%, #37B6C7 52%, #2D82A9 100%);
  --og-grad-hot:     linear-gradient(96deg, #8FF4FF 0%, #3EE6FF 46%, #37B6C7 100%);
  --og-grad-soft:    linear-gradient(120deg, rgba(62,230,255,.14), rgba(45,130,169,.14));
  --og-grad-beacon:  linear-gradient(96deg, #FFD98A 0%, #F5B841 55%, #C8922A 100%);
  /* DESCENT — sky→ground. FIRMA. Ahora más dramático (3 estaciones). */
  --og-grad-descent: linear-gradient(180deg, #3EE6FF 0%, #37B6C7 34%, #F5B841 82%, #FFD98A 100%);
  /* DESCENT horizontal — para keywords "de la señal a la respuesta" */
  --og-grad-descent-x: linear-gradient(92deg, #3EE6FF 0%, #37B6C7 40%, #F5B841 100%);
  /* CONTRAST — el choque cyan↔gold para paneles héroe (F1, CTA) */
  --og-grad-contrast: linear-gradient(115deg, #071A24 0%, #0A2230 42%, #1A1206 72%, #241703 100%);

  /* Auroras ambientales — CIELO (frío, arriba) */
  --og-sky-glow:     radial-gradient(1100px 620px at 74% -12%, rgba(45,130,169,.28), transparent 62%);
  --og-sky-glow-2:   radial-gradient(760px 420px at 8% 4%, rgba(62,230,255,.12), transparent 60%);
  /* Auroras ambientales — TIERRA (cálido, abajo). NUEVO: entibia el fondo. */
  --og-ground-glow:  radial-gradient(1200px 700px at 50% 118%, rgba(245,184,65,.20), transparent 60%);
  --og-ground-glow-2: radial-gradient(680px 420px at 88% 92%, rgba(245,184,65,.12), transparent 62%);

  /* Línea de horizonte — divisor firma (cyan) */
  --og-horizon:      linear-gradient(90deg, transparent 0%, rgba(62,230,255,.55) 50%, transparent 100%);
  /* Línea de horizonte cálida — separa hacia la tierra */
  --og-horizon-gd:   linear-gradient(90deg, transparent 0%, rgba(245,184,65,.55) 50%, transparent 100%);
  /* Haz de descenso vertical — la espina de la página */
  --og-beam:         linear-gradient(180deg, rgba(62,230,255,.55), rgba(55,182,199,.30) 45%, rgba(245,184,65,.55));

  /* Textura de grilla orbital */
  --og-grid-size:    76px;
  --og-grid-color:   rgba(132, 162, 192, .05);
  --og-grid-color-gd: rgba(245, 184, 65, .045);  /* grilla en zona tierra */

  /* ==== 10. TIPOGRAFÍA ==================================================== */
  --og-font-display: 'Archivo', 'Arial Narrow', system-ui, sans-serif;
  --og-font-ui:      'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --og-font-mono:    'JetBrains Mono', 'SF Mono', ui-monospace, 'Cascadia Code', monospace;

  /* Escala tipográfica VALIENTE (v4) */
  --og-fs-giant:  clamp(4.5rem, 13vw, 11rem);    /* NÚMEROS GIGANTES — franjas de dato */
  --og-fs-mega:   clamp(3.2rem, 8vw, 6.5rem);     /* hero display (más grande que v3) */
  --og-fs-h1:     clamp(2.3rem, 4.6vw, 3.6rem);
  --og-fs-h2:     clamp(1.75rem, 3vw, 2.6rem);
  --og-fs-h3:     1.4rem;
  --og-fs-lg:     1.1875rem;
  --og-fs-base:   1rem;
  --og-fs-sm:     0.875rem;
  --og-fs-xs:     0.75rem;
  --og-fs-kicker: 0.6875rem;

  /* Line-heights */
  --og-lh-tight:  0.98;   /* display gigante — casi sin interlínea */
  --og-lh-snug:   1.06;   /* headings mega */
  --og-lh-head:   1.2;
  --og-lh-body:   1.62;

  /* Tracking */
  --og-track-mega:    -0.035em; /* headlines mega — tracking negativo valiente */
  --og-track-tight:   -0.02em;
  --og-track-kicker:   0.32em;  /* kickers mono (más aire) */
  --og-track-wordmark: 0.18em;
  --og-track-mono:     0.04em;

  /* Tratamiento "EXPANDED" — Archivo estirado horizontalmente = carácter
     aeroespacial de señalética, sin necesidad de otra fuente. Aplicar a
     titulares mega con transform: scaleX(var(--og-expand)); transform-origin:left. */
  --og-expand:        1.08;

  /* Pesos */
  --og-w-reg: 400; --og-w-med: 500; --og-w-sb: 600; --og-w-bold: 700; --og-w-black: 800;

  /* ==== 11. ESPACIADO ==================================================== */
  --og-s-1:  4px;  --og-s-2:  8px;  --og-s-3:  12px; --og-s-4:  16px;
  --og-s-5:  24px; --og-s-6:  32px; --og-s-7:  48px; --og-s-8:  64px;
  --og-s-9:  96px; --og-s-10: 128px; --og-s-11: 176px;
  --og-section-y: clamp(80px, 11vw, 176px);   /* secciones más generosas (aire) */
  --og-gutter:    clamp(20px, 4vw, 40px);

  /* ==== 12. RADIOS ======================================================= */
  --og-r-xs:   4px;   --og-r-sm:  8px;   --og-r:    12px;
  --og-r-lg:   16px;  --og-r-xl:  22px;  --og-r-card: 16px;
  --og-r-pill: 999px;

  /* ==== 13. SOMBRAS / GLOWS ============================================== */
  --og-shadow-sm:   0 2px 8px -2px rgba(0,0,0,.5);
  --og-shadow:      0 8px 30px -12px rgba(0,0,0,.6);
  --og-shadow-lg:   0 24px 60px -20px rgba(0,0,0,.7);
  --og-shadow-hud:  inset 0 1px 0 rgba(255,255,255,.04), 0 1px 0 rgba(0,0,0,.4);
  --og-glow-signal: 0 0 28px rgba(62,230,255,.38);
  --og-glow-beacon: 0 0 40px rgba(245,184,65,.55);    /* v4 — más intenso */
  --og-glow-beacon-xl: 0 0 90px rgba(245,184,65,.42); /* halo cinematográfico */
  --og-glow-live:   0 0 12px rgba(74,222,128,.55);
  --og-ring-focus:  0 0 0 3px rgba(62,230,255,.35);

  /* ==== 14. MOVIMIENTO =================================================== */
  --og-ease:        cubic-bezier(.22,.61,.36,1);
  --og-ease-inout:  cubic-bezier(.65,.05,.36,1);
  --og-ease-spring: cubic-bezier(.34,1.35,.5,1);
  --og-dur-fast:    .16s;  --og-dur: .28s;  --og-dur-slow: .5s;
  --og-reveal-y:    28px;

  /* ==== 15. LAYOUT ======================================================= */
  --og-maxw:      1200px;   --og-maxw-wide: 1400px;   --og-maxw-prose: 66ch;
  --og-nav-h:     66px;
  --og-z-nav:     100;  --og-z-overlay: 400;  --og-z-modal: 600;  --og-z-toast: 800;
}

/* ============================================================================
   MODO CLARO (opt-in: <html data-theme="light">) — docs, propuestas, admin day.
   ========================================================================== */
:root[data-theme="light"] {
  color-scheme: light;
  --og-abyss:   #E7EDF3; --og-void: #F4F7FA; --og-deep: #FFFFFF;
  --og-surface: #FFFFFF; --og-surface-2: #F1F5F9; --og-surface-3: #E7EEF4;
  --og-ground: #FBF6EC; --og-ground-2: #F6EEDD; --og-ground-surface: #FFFFFF;
  --og-glass: rgba(255,255,255,.72); --og-glass-2: rgba(255,255,255,.86);
  --og-line: rgba(11,58,74,.12); --og-line-2: rgba(11,58,74,.18);
  --og-line-strong: rgba(11,58,74,.30); --og-hairline-cy: rgba(45,130,169,.28);
  /* v5 tema: pedido del dueño — LETRAS EN NEGRO. text pasa de navy #0B2233
     (15-16:1) a negro real con leve sesgo navy #0A0F1A (19:1 AAA). Secundario,
     muted y dim se oscurecen para leerse negro/gris oscuro nítido sobre blanco:
     text-2 12.9, muted 7.3, dim 4.7 (todos AA+; body AAA). Cero texto lavado. */
  --og-text: #0A0F1A; --og-text-2: #26333D; --og-muted: #46596A;
  --og-dim: #647686; --og-text-invert: #04121B; --og-text-warm: #4A3A1E;
  --og-signal: #1AA6C7; --og-signal-2: #2D82A9; --og-orbit: #0B3A4A;
  --og-beacon: #B9821F; --og-beacon-2: #C8922A;
  --og-signal-soft: rgba(45,130,169,.10); --og-beacon-soft: rgba(200,146,42,.12);
  --og-grid-color: rgba(11,58,74,.05); --og-shadow: 0 8px 30px -14px rgba(11,34,51,.20);
  --og-shadow-lg: 0 24px 60px -22px rgba(11,34,51,.24);
}

/* ============================================================================
   PRIMITIVAS — clases utilitarias que FORGE puede usar tal cual.
   ========================================================================== */
.og-grad-text {
  background: var(--og-grad-brand);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.og-descent-text {   /* keyword firma cyan→gold */
  background: var(--og-grad-descent-x);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.og-beacon-text {    /* keyword "la respuesta" en gold */
  background: var(--og-grad-beacon);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.og-expand {         /* tratamiento aeroespacial de Archivo */
  display: inline-block; transform: scaleX(var(--og-expand));
  transform-origin: left center; letter-spacing: var(--og-track-mega);
}
.og-mono   { font-family: var(--og-font-mono); letter-spacing: var(--og-track-mono); }
.og-kicker {
  font-family: var(--og-font-mono); font-size: var(--og-fs-kicker);
  letter-spacing: var(--og-track-kicker); text-transform: uppercase;
  color: var(--og-signal-2);
}
.og-horizon-rule    { height: 1px; border: 0; background: var(--og-horizon); }
.og-horizon-rule-gd { height: 1px; border: 0; background: var(--og-horizon-gd); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}