/* ==========================================================================
   El Fracaso del Bolívar — theme.css
   Tokens, base, tipografía, fondos y animaciones.
   ========================================================================== */

:root {
  /* Superficies */
  --bg-base:      #08090c;
  --bg-deep:      #050609;
  --bg-surface:   #111318;
  --bg-surface-2: #16191f;
  --bg-elevated:  #1b1f26;

  /* Bordes */
  --border:        rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);

  /* Texto */
  --text:        #f4f5f7;
  --text-muted:  #9aa3b2;
  --text-dim:    #6b7280;

  /* Acentos */
  --gold:   #e9b949;
  --gold-2: #f5d67a;
  --danger: #e0424a;
  --danger-2: #ff6b6b;
  --stable: #2fbf71;
  --digital: #38bdf8;
  --violet: #8b7cf6;

  /* Sombras y glows */
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 12px 32px -12px rgba(0, 0, 0, 0.75);
  --glow-gold:   0 0 40px -8px rgba(233, 185, 73, 0.35);
  --glow-danger: 0 0 40px -8px rgba(224, 66, 74, 0.35);

  /* Radios */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;

  /* Layout */
  --shell: 1200px;
  --nav-h: 68px;

  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Sora', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
}

/* Modo claro (secundario) -------------------------------------------------- */
.light {
  --bg-base:      #f6f7f9;
  --bg-deep:      #eceef2;
  --bg-surface:   #ffffff;
  --bg-surface-2: #f2f4f7;
  --bg-elevated:  #ffffff;
  --border:        rgba(15, 20, 30, 0.10);
  --border-strong: rgba(15, 20, 30, 0.18);
  --text:        #0d1117;
  --text-muted:  #4b5563;
  --text-dim:    #6b7280;
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 10px 28px -18px rgba(15, 23, 42, 0.35);
}

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

/* NOTA IMPORTANTE DE ESPECIFICIDAD
   Tailwind (Play CDN o compilado) inyecta su preflight con selectores de tipo
   (h1, p, img…) y puede quedar DESPUÉS de estas hojas de estilo. Para que el
   sistema de diseño no dependa del orden de carga, todo selector de tipo de la
   capa base va prefijado con `body` (o `html body`), lo que le da una
   especificidad mayor que la del preflight. */

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 20px);
  -webkit-text-size-adjust: 100%;
}

html body {
  margin: 0;
  background: var(--bg-base);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body img, body svg, body video { display: block; max-width: 100%; }
body a { color: inherit; text-decoration: none; }
body button { font: inherit; color: inherit; }

body h1, body h2, body h3, body h4, body h5, body h6 {
  font-family: var(--font-display);
  line-height: 1.12;
  letter-spacing: -0.022em;
  margin: 0;
  font-weight: 700;
  color: var(--text);
}

body h1 { font-size: clamp(2.3rem, 6vw, 4.2rem); }
body h2 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); }
body h3 { font-size: clamp(1.15rem, 2vw, 1.5rem); }

body p { margin: 0 0 1rem; }
body ul, body ol { margin: 0; padding-left: 1.15em; }

/* Números siempre tabulares: es un sitio de datos. */
.num, .tabular, body time, body table td, body table th {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* Fondos ------------------------------------------------------------------ */
.bg-grid::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 20%, transparent 78%);
}

.bg-noise::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.32;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

.glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  z-index: 0;
}
.glow--gold   { background: rgba(233, 185, 73, 0.16); }
.glow--danger { background: rgba(224, 66, 74, 0.16); }
.glow--digital{ background: rgba(56, 189, 248, 0.14); }

/* Tipografía destacada ---------------------------------------------------- */
.gradient-text {
  background: linear-gradient(100deg, var(--gold-2) 0%, var(--gold) 38%, #c8963a 70%, #a97a2c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.gradient-text--danger {
  background: linear-gradient(100deg, #ffd9db 0%, var(--danger-2) 40%, var(--danger) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.kicker {
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
}
.lead {
  font-size: clamp(1.02rem, 1.5vw, 1.18rem);
  color: var(--text-muted);
  max-width: 68ch;
}
.muted { color: var(--text-muted); }
.dim   { color: var(--text-dim); }

/* Animaciones ------------------------------------------------------------- */
@keyframes reveal-up {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}
@keyframes shimmer {
  100% { transform: translateX(100%); }
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.35; transform: scale(0.72); }
}
@keyframes float-y {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}
@keyframes fall-zero {
  0%   { opacity: 1; transform: translateY(0) rotate(0); }
  100% { opacity: 0; transform: translateY(140px) rotate(28deg); }
}
@keyframes draw {
  to { stroke-dashoffset: 0; }
}

.reveal { opacity: 0; }
.reveal.is-in { animation: reveal-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards; }

.pulse-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--stable);
  animation: pulse-dot 1.8s ease-in-out infinite;
  flex: none;
}
.pulse-dot--warn { background: var(--gold); }
.pulse-dot--danger { background: var(--danger); }

/* Accesibilidad ----------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}
/* El atributo [hidden] siempre gana a cualquier display de componente. */
[hidden] { display: none !important; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--gold); color: #14100a; padding: 10px 16px;
  border-radius: var(--r-sm); font-weight: 600;
  transition: top 0.2s ease;
}
.skip-link:focus { top: 12px; }

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

/* Scrollbar --------------------------------------------------------------- */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--bg-deep); }
::-webkit-scrollbar-thumb {
  background: #2a2f38;
  border-radius: 999px;
  border: 3px solid var(--bg-deep);
}
::-webkit-scrollbar-thumb:hover { background: #3a414d; }

::selection { background: rgba(233, 185, 73, 0.28); color: #fff; }