/* ── Scroll suave ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ── Dark hero: carbon negro para que el header transparente
   no deje ver el fondo blanco detrás de él ────────────────────────────── */
body.dark-hero {
  background-color: #0D0D12;
}

/* ── Scroll progress bar (ámbar = señal de alerta / investigación activa) */
#scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, #F59E0B, #FCD34D);
  z-index: 9999;
  transition: width 0.05s linear;
}

/* ── Navbar: transición suave en links ────────────────────────────────── */
header a, header button {
  transition: color 0.35s ease, background-color 0.2s ease;
}

/* ── Navbar: blur al hacer scroll ─────────────────────────────────────── */
.navbar-scrolled {
  background-color: rgba(13, 13, 18, 0.97) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 20px rgba(0, 0, 0, 0.6);
  border-color: rgba(245, 158, 11, 0.15) !important;
}
.navbar-scrolled a,
.navbar-scrolled button { color: #E2E8F0 !important; }
.navbar-scrolled a:hover:not(.cta-primary) {
  background: rgba(245, 158, 11, 0.08) !important;
  color: white !important;
}
.navbar-scrolled .logo-text { color: white !important; }
.navbar-scrolled .cta-primary {
  background: #F59E0B !important;
  color: #0D0D12 !important;
}

/* ── Navbar transparente en páginas dark-hero (CSS puro, sin esperar JS) ─ */
body.dark-hero header:not(.navbar-scrolled) {
  background: transparent;
  border-color: transparent;
}
body.dark-hero header:not(.navbar-scrolled) a:not(.cta-primary),
body.dark-hero header:not(.navbar-scrolled) button {
  color: rgba(255,255,255,0.85);
}
body.dark-hero header:not(.navbar-scrolled) a:hover:not(.cta-primary) {
  background: rgba(255,255,255,0.07) !important;
  color: white !important;
}
body.dark-hero header:not(.navbar-scrolled) .logo-text { color: white; }
body.dark-hero header:not(.navbar-scrolled) .cta-primary {
  background: #F59E0B !important;
  color: #0D0D12 !important;
}
body.dark-hero header:not(.navbar-scrolled) #mobile-menu {
  background: rgba(13, 13, 18, 0.98) !important;
  border-color: rgba(245, 158, 11, 0.18) !important;
}
body.dark-hero header:not(.navbar-scrolled) #mobile-menu a {
  color: rgba(255,255,255,0.80) !important;
}
body.dark-hero header:not(.navbar-scrolled) #mobile-menu a:hover {
  background: rgba(245,158,11,0.08) !important;
  color: white !important;
}

/* ── Gradientes de texto ──────────────────────────────────────────────── */
.text-gradient-gold {
  background: linear-gradient(135deg, #FCD34D 0%, #F59E0B 55%, #D97706 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.text-gradient-dollar {
  background: linear-gradient(135deg, #a8d484 0%, #85BB65 50%, #6b9c4e 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Textura de billete — 4 capas: guilloche + intaglio + papel + hilo ── */
/*    La animación desplaza cada capa a distinta velocidad (parallax)      */

/* Capa guilloche compartida (wavy lines como en la impresión de billetes) */
.hero-pattern,
.terminal-grid {
  background-image:
    /* 1. Líneas onduladas guilloche — efecto papel moneda */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='100'%3E%3Cpath d='M0,12 Q50,4 100,12 T200,12' stroke='rgba(133,187,101,.07)' fill='none' stroke-width='.7'/%3E%3Cpath d='M0,24 Q50,16 100,24 T200,24' stroke='rgba(133,187,101,.04)' fill='none' stroke-width='.5'/%3E%3Cpath d='M0,36 Q50,28 100,36 T200,36' stroke='rgba(133,187,101,.07)' fill='none' stroke-width='.7'/%3E%3Cpath d='M0,48 Q50,40 100,48 T200,48' stroke='rgba(133,187,101,.04)' fill='none' stroke-width='.5'/%3E%3Cpath d='M0,60 Q50,52 100,60 T200,60' stroke='rgba(133,187,101,.07)' fill='none' stroke-width='.7'/%3E%3Cpath d='M0,72 Q50,64 100,72 T200,72' stroke='rgba(133,187,101,.04)' fill='none' stroke-width='.5'/%3E%3Cpath d='M0,84 Q50,76 100,84 T200,84' stroke='rgba(133,187,101,.07)' fill='none' stroke-width='.7'/%3E%3Cpath d='M0,96 Q50,88 100,96 T200,96' stroke='rgba(133,187,101,.04)' fill='none' stroke-width='.5'/%3E%3C/svg%3E"),
    /* 2. Grabado intaglio 30° — líneas finísimas diagonal */
    repeating-linear-gradient(
      30deg,
      transparent 0, transparent 5px,
      rgba(133,187,101,0.028) 5px, rgba(133,187,101,0.028) 5.6px
    ),
    /* 3. Grabado intaglio -30° — forma el cruce (crosshatch) */
    repeating-linear-gradient(
      -30deg,
      transparent 0, transparent 5px,
      rgba(133,187,101,0.02) 5px, rgba(133,187,101,0.02) 5.6px
    ),
    /* 4. Micro-puntos de fibra de papel */
    radial-gradient(circle, rgba(133,187,101,0.04) 0.7px, transparent 0.7px);
  background-size:
    200px 100px,   /* guilloche tile */
    100% 100%,     /* intaglio 30° */
    100% 100%,     /* intaglio -30° */
    10px 10px;     /* micro-puntos */
  animation: billDrift 45s linear infinite;
}

/* Terminal-grid agrega además un hilo de seguridad ámbar horizontal */
.terminal-grid {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='100'%3E%3Cpath d='M0,12 Q50,4 100,12 T200,12' stroke='rgba(133,187,101,.07)' fill='none' stroke-width='.7'/%3E%3Cpath d='M0,24 Q50,16 100,24 T200,24' stroke='rgba(133,187,101,.04)' fill='none' stroke-width='.5'/%3E%3Cpath d='M0,36 Q50,28 100,36 T200,36' stroke='rgba(133,187,101,.07)' fill='none' stroke-width='.7'/%3E%3Cpath d='M0,48 Q50,40 100,48 T200,48' stroke='rgba(133,187,101,.04)' fill='none' stroke-width='.5'/%3E%3Cpath d='M0,60 Q50,52 100,60 T200,60' stroke='rgba(133,187,101,.07)' fill='none' stroke-width='.7'/%3E%3Cpath d='M0,72 Q50,64 100,72 T200,72' stroke='rgba(133,187,101,.04)' fill='none' stroke-width='.5'/%3E%3Cpath d='M0,84 Q50,76 100,84 T200,84' stroke='rgba(133,187,101,.07)' fill='none' stroke-width='.7'/%3E%3Cpath d='M0,96 Q50,88 100,96 T200,96' stroke='rgba(133,187,101,.04)' fill='none' stroke-width='.5'/%3E%3C/svg%3E"),
    repeating-linear-gradient(30deg, transparent 0, transparent 5px, rgba(133,187,101,0.028) 5px, rgba(133,187,101,0.028) 5.6px),
    repeating-linear-gradient(-30deg, transparent 0, transparent 5px, rgba(133,187,101,0.02) 5px, rgba(133,187,101,0.02) 5.6px),
    radial-gradient(circle, rgba(133,187,101,0.04) 0.7px, transparent 0.7px),
    /* Hilo de seguridad ámbar — vertical cada ~220px */
    repeating-linear-gradient(
      90deg,
      transparent 0, transparent 218px,
      rgba(245,158,11,0.06) 218px, rgba(245,158,11,0.06) 220px
    );
  background-size:
    200px 100px,
    100% 100%,
    100% 100%,
    10px 10px,
    220px 100%;
}

/* Animación: cada capa se mueve a velocidad diferente → profundidad */
@keyframes billDrift {
  from { background-position: 0 0, 0 0, 0 0, 0 0; }
  to   { background-position: 200px 100px, 100px 120px, -100px 120px, 10px 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-pattern, .terminal-grid { animation: none; }
}

/* ── Mouse-follow glow (ámbar investigación) ──────────────────────────── */
.hero-section {
  --mouse-x: 50%;
  --mouse-y: 40%;
}
.hero-section::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    700px circle at var(--mouse-x) var(--mouse-y),
    rgba(245, 158, 11, 0.06),
    transparent 45%
  );
  pointer-events: none;
  z-index: 1;
  transition: background 0.1s ease;
}

/* ── Animated hero chart ──────────────────────────────────────────────── */
.chart-line {
  stroke-dasharray: 2400;
  stroke-dashoffset: 2400;
  animation: drawLine 3s cubic-bezier(0.4, 0, 0.2, 1) 0.4s forwards;
}
.chart-area {
  opacity: 0;
  animation: fadeInArea 1.2s ease-out 2.8s forwards;
}
.chart-dot {
  opacity: 0;
  transform-origin: center;
}
@keyframes drawLine  { to { stroke-dashoffset: 0; } }
@keyframes fadeInArea { to { opacity: 1; } }
@keyframes dotPop {
  0%   { opacity: 0; transform: scale(0); }
  60%  { opacity: 1; transform: scale(1.4); }
  100% { opacity: 1; transform: scale(1); }
}

/* ── Floating particles (señales de alerta ámbar) ─────────────────────── */
.float-particle {
  position: absolute;
  border-radius: 50%;
  background: #F59E0B;
  pointer-events: none;
  animation: floatUp linear infinite;
  bottom: -10px;
}
@keyframes floatUp {
  0%   { transform: translateY(0) translateX(0); opacity: 0.5; }
  50%  { opacity: 0.25; }
  100% { transform: translateY(-280px) translateX(20px); opacity: 0; }
}

/* ── Ticker tape ──────────────────────────────────────────────────────── */
.ticker-wrap {
  overflow: hidden;
  white-space: nowrap;
  mask-image: linear-gradient(90deg, transparent, black 5%, black 95%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 5%, black 95%, transparent);
}
.ticker-content {
  display: inline-block;
  animation: ticker 28s linear infinite;
}
.ticker-content:hover { animation-play-state: paused; }
@keyframes ticker {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ── Pulsing live dot (verde = caso activo / recuperación en curso) ────── */
.pulse-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #85BB65;
  animation: pulseLive 1.8s ease-in-out infinite;
}
@keyframes pulseLive {
  0%, 100% { box-shadow: 0 0 0 0 rgba(133,187,101,0.5); }
  50%       { box-shadow: 0 0 0 7px rgba(133,187,101,0); }
}

/* ── Terminal card (borde ámbar = interfaz de investigación) ──────────── */
.terminal-card {
  background: rgba(245, 158, 11, 0.03);
  border: 1px solid rgba(245, 158, 11, 0.12);
  transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}
.terminal-card:hover {
  border-color: rgba(245, 158, 11, 0.32);
  background: rgba(245, 158, 11, 0.05);
  box-shadow: 0 0 28px rgba(245,158,11,0.08);
}

/* ── Tilt card ────────────────────────────────────────────────────────── */
.tilt-card {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  transform-style: preserve-3d;
}
.tilt-card:hover {
  box-shadow: 0 8px 32px rgba(245,158,11,0.10);
}

/* ── Card hover (borde izquierdo verde = proceso completado) ──────────── */
.card-hover {
  border-left: 3px solid transparent;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.card-hover:hover {
  border-left-color: #85BB65;
  box-shadow: 0 4px 24px rgba(13,13,18,0.12);
}

/* ── Data row ─────────────────────────────────────────────────────────── */
.data-row {
  border-bottom: 1px solid rgba(245, 158, 11, 0.08);
  transition: background 0.15s ease;
}
.data-row:hover {
  background: rgba(245, 158, 11, 0.05);
}

/* ── Progress bar (verde = capital recuperado) ────────────────────────── */
.progress-bar {
  height: 2px;
  background: rgba(255,255,255,0.06);
  border-radius: 2px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #85BB65, #a8d484);
  border-radius: 2px;
  width: 0%;
  transition: width 1.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Amber underline decorativa ───────────────────────────────────────── */
.gold-underline {
  text-decoration: none;
  background-image: linear-gradient(to right, #F59E0B, #FCD34D);
  background-repeat: no-repeat;
  background-size: 100% 2px;
  background-position: 0 100%;
}

/* ── Focus visible ────────────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid #F59E0B;
  outline-offset: 2px;
}

/* ── Scrollbar oscura ─────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: #0D0D12; }
::-webkit-scrollbar-thumb { background: #1E2030; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #F59E0B; }

/* ── Blinking cursor ──────────────────────────────────────────────────── */
.cursor-blink::after {
  content: '|';
  color: #F59E0B;
  animation: blink 1s step-end infinite;
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ── Animate words individually ───────────────────────────────────────── */
.hero-word {
  display: inline-block;
}