:root {
  /* Color — negro de tinta, no gris. El dorado es acento, nunca baño de superficie. */
  --color-bg: #050505;
  --color-bg-deep: #000;
  --color-surface: #0E0E0E;
  --color-surface-raised: #141414;
  --color-surface-elevated: #191919;
  --color-surface-sunken: #090909;
  --color-border: rgba(201, 168, 76, .14);
  --color-border-soft: rgba(255, 255, 255, .06);
  --color-border-strong: rgba(201, 168, 76, .34);
  --color-gold: #C9A84C;
  --color-gold-bright: #E8C96D;
  --color-gold-deep: #8B6914;
  --color-text: #F0EDE8;
  --color-text-muted: #A29B93;
  --color-text-faint: #8A837B;
  --color-success: #7FB58C;
  --color-error: #D9756F;
  --color-warning: #E0A05C;

  /* Tintes reutilizables — evita repetir rgba() dorados a mano */
  --tint-gold-1: rgba(201, 168, 76, .06);
  --tint-gold-2: rgba(201, 168, 76, .12);
  --tint-gold-3: rgba(232, 201, 109, .20);

  /* Typography */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --text-2xs: .6875rem;
  --text-xs: .75rem;
  --text-sm: .875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;
  --text-4xl: 3rem;
  --tracking-wide: .14em;
  --tracking-wider: .22em;

  /* Spacing (4px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* Shape */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 999px;
  --control-h: 44px;
  --control-h-lg: 54px;
  --container: 1180px;

  /* Focus */
  --focus-ring: 0 0 0 3px rgba(201, 168, 76, .28);

  /* Depth — sombra negra profunda + un solo filo dorado, nunca halo difuso */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .6), 0 2px 8px rgba(0, 0, 0, .35);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, .5), 0 12px 32px rgba(0, 0, 0, .45);
  --shadow-lg: 0 4px 10px rgba(0, 0, 0, .5), 0 28px 70px rgba(0, 0, 0, .6);
  --edge-top: inset 0 1px 0 rgba(232, 201, 109, .16);
  --edge-inset: inset 0 1px 2px rgba(0, 0, 0, .7);

  /* Glow — luz dorada real, reservada a foco/activo/marca */
  --glow-gold-sm: 0 0 10px rgba(232, 201, 109, .22);
  --glow-gold-md: 0 0 26px rgba(232, 201, 109, .3);
  --glow-gold-lg: 0 0 70px rgba(232, 201, 109, .26);

  /* Textura de grano — SVG feTurbulence inline, visible sobre superficies oscuras */
  --texture-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* Sheen de superficie — solo el filo superior atrapa luz, el resto queda negro */
  --sheen-surface: linear-gradient(180deg, rgba(232, 201, 109, .05) 0%, rgba(232, 201, 109, .01) 80px, transparent 200px);
  --sheen-diagonal: linear-gradient(135deg, rgba(232, 201, 109, .035) 0%, transparent 30%);

  /* Hairline dorada — la firma gráfica: regla fina bajo títulos, tipo rótulo de estudio */
  --rule-gold: linear-gradient(90deg, var(--color-gold) 0%, rgba(232, 201, 109, .55) 45%, transparent 100%);

  /* Motion */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .64, 1);
  --duration-fast: 140ms;
  --duration-base: 240ms;
  --duration-slow: 460ms;
  /* Entradas por scroll: largas a propósito. Con 460ms el movimiento terminaba antes de
     que el bloque estuviera bien a la vista y se leía como "apareció", no como entrada. */
  --duration-reveal: 950ms;
  --duration-reveal-lento: 1250ms;
}

/* Recorrido amplio a propósito: con 12px el movimiento no se alcanzaba a percibir y los
   bloques "solo aparecían". El escalado sutil le da profundidad sin marear. */
@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(26px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fade-out {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(-14px) scale(.99); }
}

/* Entrada lateral — para listas donde el orden de lectura es vertical (menú, filas) */
@keyframes fade-in-left {
  from { opacity: 0; transform: translateX(-14px); }
  to { opacity: 1; transform: translateX(0); }
}

/* Filas de tabla: entran desde abajo, muy corto, para que un listado largo no tarde */
@keyframes row-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes glow-pulse {
  0%, 100% { opacity: .45; }
  50% { opacity: 1; }
}

@keyframes shine-sweep {
  from { transform: translateX(-150%) skewX(-20deg); }
  to { transform: translateX(250%) skewX(-20deg); }
}

@keyframes rule-draw {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* ============================================================
   Parallax dirigido por scroll — corre en el compositor.
   Antes lo movía un listener de scroll en JS: el scroll se compone en otro hilo, así
   que la capa se pintaba un fotograma TARDE y el fondo se leía como un tirón aunque
   el contador marcara 60fps. Con `animation-timeline: view()` el desplazamiento va
   atado al scroll en el mismo hilo que lo compone — sin desfase y sin JS.

   El recorrido es ±--parallax-rango. La capa DEBE sobresalir por los cuatro lados al
   menos ese rango (ver .parallax-capa), o al desplazarse descubre un borde. */
@keyframes parallax-deriva {
  from { translate: 0 calc(var(--parallax-rango) * -1); }
  to   { translate: 0 var(--parallax-rango); }
}

/* La capa de foto: sobresale exactamente lo que se va a mover, más un colchón.
   Usa `translate` (no `transform`) para no pisar el `scale` de quien haga zoom. */
[data-parallax] {
  --parallax-rango: 56px;
  position: absolute;
  inset: calc((var(--parallax-rango) + 12px) * -1) 0;
  background-size: cover;
  background-position: center;
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    [data-parallax] {
      animation: parallax-deriva linear both;
      animation-timeline: view();
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}