/* ============ TOKENS: variables CSS por tema ============ */
:root {
  --bg:#ffffff; --bg-soft:#F7F8FA; --bg-mute:#EEF0F4;
  --surface:#ffffff; --surface-2:#F7F8FA;
  --text:#10131A; --text-2:#5B6478; --text-3:#8A93AC;
  --line:#E4E7EC; --line-2:#D9DDE6;
  --indigo:#4338CE; --indigo-soft:#5B52F6;
  --verify:#0EA872; --verify-bg:rgba(14,168,114,0.12);
  --alert:#E8A317; --alert-bg:rgba(232,163,23,0.12);
  --hero-bg:#F8FAFC; --hero-card:#FFFFFF; --hero-line:#E2E8F0;
  --hero-text:#0F172A; --hero-text-2:#475569;
  --glow:rgba(67,56,206,.35);
  --shadow-card:0 1px 2px rgba(16,24,40,.04), 0 14px 34px -16px rgba(16,24,40,.14);
  --shadow-float:0 30px 80px -30px rgba(8,13,24,.55);
}

[data-theme="dark"] {
  --bg:#0B0E1A; --bg-soft:#0F1420; --bg-mute:#151B2B;
  --surface:#0F1420; --surface-2:#151B2B;
  --text:#E7E9F0; --text-2:#9AA3B8; --text-3:#7C87A3;
  --line:#232B3D; --line-2:#2B3348;
  --shadow-card:0 1px 2px rgba(0,0,0,.3), 0 14px 34px -16px rgba(0,0,0,.5);
  --shadow-float:0 30px 80px -30px rgba(0,0,0,.7);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { background: var(--bg); color: var(--text); }
body {
  font-family: 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
  margin: 0;
  transition: background-color .25s ease, color .25s ease;
}
h1, h2, h3 { font-family: 'Instrument Sans', sans-serif; letter-spacing: -.02em; margin: 0; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--indigo); color: var(--hero-text); }
.mono { font-family: 'JetBrains Mono', monospace; }
.wrap { max-width: 1200px; margin-inline: auto; padding-inline: 24px; }

.eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--indigo); font-weight: 600; }
.muted { color: var(--text-2); }
.muted-3 { color: var(--text-3); }

.surf { background: var(--surface); border: 1px solid var(--line); }
.surf-soft { background: var(--surface-2); border-block: 1px solid var(--line); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-card); }

.btn { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; border-radius: 10px; transition: .18s ease; white-space: nowrap; cursor: pointer; border: none; font-size: 14px; }
.btn-primary { background: var(--indigo); color: #ffffff; }
.btn-primary:hover { background: var(--indigo-soft); }
.btn-light { background: #fff; color: #0B0E1A; }
.btn-light:hover { background: #EDEFF5; }
.btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--line-2); }
.btn-ghost:hover { background: var(--bg-mute); }

.chip { display: inline-flex; align-items: center; gap: .4rem; font-size: 12px; font-weight: 600; border-radius: 999px; padding: .3rem .7rem; border: 1px solid var(--line); background: var(--surface); color: var(--text-2); }
.stamp { display: inline-flex; align-items: center; gap: .4rem; font-family: 'JetBrains Mono', monospace; font-size: 11.5px; font-weight: 600; color: var(--verify); }
.stamp::before { content: "✓"; display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 5px; background: var(--verify-bg); color: var(--verify); font-size: 11px; }

.grain { position: absolute; inset: 0; opacity: .35; pointer-events: none; background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px); background-size: 3px 3px; }
.ledger-row { animation: rowin .5s both; }
@keyframes rowin { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.marquee-track { display: flex; gap: 56px; width: max-content; animation: slide 32s linear infinite; }
@keyframes slide { to { transform: translateX(-50%); } }

input[type=range] { -webkit-appearance: none; height: 6px; border-radius: 999px; background: var(--line); width: 100%; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 999px; background: var(--indigo-soft); cursor: pointer; border: 3px solid var(--surface); box-shadow: 0 1px 4px rgba(0,0,0,.3); }

.faq-body { max-height: 0; overflow: hidden; transition: max-height .32s ease; }
.lang-btn { font-size: 11px; font-weight: 700; padding: 4px 8px; border-radius: 6px; border: 1px solid transparent; color: var(--text-2); cursor: pointer; background: transparent; }
.lang-active { background: var(--indigo); color: #fff!important; }
.bento-card { transition: transform .2s ease; }
.bento-card:hover { transform: translateY(-3px); }
.tab-btn { font-size: 14px; font-weight: 500; padding: 8px 16px; border-radius: 8px; color: var(--text-2); background: transparent; border: none; cursor: pointer; }
.tab-active { background: var(--indigo)!important; color: #fff!important; }
:focus-visible { outline: 2.5px solid var(--indigo); outline-offset: 2px; border-radius: 6px; }

@media (prefers-reduced-motion: reduce) {
  .ledger-row, .marquee-track { animation: none!important; }
}

/* Navbar */
#navbar { --nav-ink: #0F172A; --nav-muted: #475569; --nav-border: rgba(0,0,0,.10); --nav-hover: rgba(0,0,0,.04); }
#navbar.scrolled { --nav-ink: var(--text); --nav-muted: var(--text-2); --nav-border: var(--line); --nav-hover: var(--bg-mute); }
#navbar .brand-text { color: var(--nav-ink); }
#navbar .nav-link { color: var(--nav-muted); }
#navbar .nav-link:hover, #navbar .nav-link.active { color: var(--nav-ink); }
#navbar .nav-toggle-btn { border-color: var(--nav-border); color: var(--nav-ink); }
#navbar .nav-toggle-btn:hover { background: var(--nav-hover); }
#navbar.scrolled { background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }

.mig-dot { border-color: var(--line-2); color: var(--text-3); }
.mig-step.done .mig-dot, .mig-step.active .mig-dot { border-color: var(--indigo); background: var(--indigo); color: var(--hero-text); }
.mig-step.active .mig-label, .mig-step.done .mig-label { color: var(--indigo); }
.mig-label { color: var(--text-3); }

.badge-pro { background: rgba(99,102,241,0.15); color: #6366f1; font-size: 11px; padding: 2px 6px; border-radius: 4px; font-weight: 700; border: 1px solid rgba(99,102,241,0.3); text-transform: uppercase; letter-spacing: 0.05em; }
.badge-enterprise { background: rgba(236,72,153,0.15); color: #ec4899; font-size: 11px; padding: 2px 6px; border-radius: 4px; font-weight: 700; border: 1px solid rgba(236,72,153,0.3); text-transform: uppercase; letter-spacing: 0.05em; }
.badge-addon { background: rgba(16, 185, 129, 0.15); color: #10b981; font-size: 11px; padding: 2px 6px; border-radius: 4px; font-weight: 700; border: 1px solid rgba(16, 185, 129, 0.3); text-transform: uppercase; letter-spacing: 0.05em; }

/* View Transitions (Cross-document) */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
}

/* Custom view transitions to ensure cross-fade or slide is smooth */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.3s;
}

@keyframes float-dash {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-12px); }
  100% { transform: translateY(0px); }
}
.hero-dashboard-wrapper {
  animation: float-dash 6s ease-in-out infinite;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease;
  transform-style: preserve-3d;
}
.hero-dashboard-wrapper:hover {
  transform: perspective(1200px) rotateY(-4deg) rotateX(2deg) scale(1.02) translateY(-5px);
  box-shadow: -20px 40px 60px -12px rgba(79,70,229,0.25), 0 25px 50px -12px rgba(0,0,0,0.3);
}

/* ============ MOBILE RESPONSIVENESS ============ */
@media (max-width: 768px) {
  /* Ocultar elementos de escritorio */
  /* Menú de navegación móvil con scroll horizontal */
  #navbar .wrap {
    flex-wrap: wrap;
    height: auto !important;
    padding-bottom: 12px;
    padding-top: 12px;
  }
  .hidden-mobile {
    display: flex !important;
    width: 100%;
    order: 3;
    overflow-x: auto;
    padding-top: 12px;
    gap: 16px !important;
    border-top: 1px solid var(--line);
    margin-top: 12px;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  .hidden-mobile::-webkit-scrollbar { display: none; }
  
  /* Forzar todas las cuadrículas inline a 1 sola columna */
  div[style*="display:grid"], 
  div[style*="display: grid"],
  form[style*="display:grid"],
  form[style*="display: grid"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  
  /* Ajustar Hero */
  #top .wrap {
    text-align: center;
  }
  #top .wrap > div:nth-child(1) {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #top .wrap > div:nth-child(1) p,
  #top .wrap > div:nth-child(1) div {
    text-align: left;
  }
  #top .wrap > div:nth-child(2) {
    width: 100% !important;
    margin-top: 32px !important;
  }
  
  /* Ajustar textos grandes */
  h1 { font-size: 36px !important; line-height: 1.2 !important; }
  h2 { font-size: 28px !important; }
  
  /* Ajustar Hero Image */
  .hero-dashboard-wrapper {
    transform: none !important;
    animation: none !important;
  }
}