/* ============ 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 ============ */


.lead-form {
    margin-top: 40px;
    max-width: 520px;
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    text-align: left;
}


.lead-form {
    margin-top: 40px;
    max-width: 520px;
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    text-align: left;
}





/* Modern Dialog Modal Styles */
.modern-dialog {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  width: 100%;
  max-width: 600px;
  padding: 32px;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5);
  color: var(--text);
  margin: auto;
}

.modern-dialog::backdrop {
  background-color: rgba(15, 23, 42, 0.8);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* =========================================
   2026 VISUAL MODERNIZATION OVERRIDES 
   ========================================= */

/* Typography 2026 Overrides */
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}
p {
  text-wrap: pretty;
}

/* Scroll-Driven Animations */
@media (prefers-reduced-motion: no-preference) {
  @supports ((animation-timeline: view()) and (animation-range: entry)) {
    @keyframes scroll-fade-up {
      from {
        opacity: 0;
        transform: translateY(40px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    .scroll-reveal {
      animation: scroll-fade-up auto ease-out both;
      animation-timeline: view(block);
      animation-range: entry 5% cover 30%;
    }
  }
}

/* Fallback state for browsers lacking view() but caught by JS */
.scroll-reveal.no-scroll-animation {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.scroll-reveal.no-scroll-animation.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Content Visibility for heavy rendering sections */
#modulos {
  content-visibility: auto;
  contain-intrinsic-block-size: auto 1200px;
}
#seguridad {
  content-visibility: auto;
  contain-intrinsic-block-size: auto 800px;
}
#cta-final {
  content-visibility: auto;
  contain-intrinsic-block-size: auto 600px;
}

/* Modern Squircle Border Radius (Progressive Enhancement) */
.modern-dialog, .module-card {
  corner-shape: squircle;
}



/* Unified Dark Section styling for Footers & FAQs */
.dark-section {
  --bg: #08080A;
  --surface: #121214;
  --text: #FFFFFF;
  --text-2: rgba(255,255,255,0.7);
  --text-3: rgba(255,255,255,0.5);
  --muted: rgba(255,255,255,0.7);
  --muted-3: rgba(255,255,255,0.5);
  --line: rgba(255,255,255,0.1);
  --hero-bg: #08080A;
  --hero-text: #FFFFFF;
  --hero-text-2: rgba(255,255,255,0.7);
  
  background: var(--bg) !important;
  color: var(--text-2) !important;
}

.dark-section h1, .dark-section h2, .dark-section h3, .dark-section strong {
  color: var(--text) !important;
}

.dark-section a {
  color: var(--text-2) !important;
}
.dark-section a:hover {
  color: var(--text) !important;
}

.dark-section img[src*="logo.png"] {
  filter: brightness(0) invert(1);
}

.dark-section footer, .dark-section section {
  background: transparent !important;
  border-top-color: var(--line) !important;
}

.dark-section .faq-item summary, .dark-section .faq-summary {
  color: var(--text) !important;
}



/* =========================================
   ROBUST MOBILE FIXES (2026)
   ========================================= */



/* =========================================
   NEW TYPOGRAPHY & LAYOUT CLASSES (2026)
   ========================================= */
/* Hero Section */
.hero-title {
  font-size: 64px;
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -1px;
  margin-bottom: 24px;
}
.hero-subtitle {
  background: linear-gradient(135deg, #A8A3FF, #8B85FF);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-desc {
  font-size: 20px;
  line-height: 1.6;
  color: var(--hero-text-2);
  max-width: 700px;
  margin-bottom: 40px;
}
.hero-buttons {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: center;
}
.section-title {
  font-size: 42px;
  margin-top: 16px;
}

/* =========================================
   ROBUST MOBILE FIXES (REVISED)
   ========================================= */








/* Accesibilidad: Tamaños táctiles */
button, .btn, input, select, textarea {
  min-height: 48px;
}
.lead-form input, .lead-form select {
  padding: 12px 16px;
  font-size: 16px;
}


/* =========================================
   NEW MOBILE NAVBAR (HAMBURGER)
   ========================================= */
.nav-links-container {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 14px;
  font-weight: 500;
}
.nav-desktop-cta { display: block; }
.nav-mobile-cta { display: none; }
.mobile-menu-toggle {
  display: none;
  background: transparent;
  border: none;
  color: var(--text);
  cursor: pointer;
  padding: 8px;
}



/* =========================================
   UNIFIED MOBILE FIXES
   ========================================= */
@media (max-width: 768px) {

  /* Auto-collapse all inline grids on mobile */
  div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  
  /* Fix flex rows that shouldn't be rows on mobile */
  .footer-links, footer .wrap[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  /* 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;
  }
  



    .lead-form {
        grid-template-columns: 1fr;
    }


    .lead-form {
        grid-template-columns: 1fr;
    }


    .lead-form > * {
        grid-column: 1 / -1 !important;
    }


  .grid {
    grid-template-columns: 1fr !important;
  }
  
  /* Make sure grids don't overflow */
  .wrap {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  
  h1 { font-size: 40px !important; line-height: 1.1 !important; }
  h2 { font-size: 32px !important; }
  
  /* Fix video showcase in hero */
  #top video {
    border-radius: 12px;
  }


  /* Prevent horizontal scroll globally */
  body, html {
    overflow-x: hidden !important;
  }
  
  /* Fix container padding */
  .wrap {
    padding-left: 24px !important;
    padding-right: 24px !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }

  /* Force all images to be responsive and never overflow */
  

  /* Fix Hero Typography */
  #top h1, h1 {
    font-size: 38px !important;
    line-height: 1.1 !important;
    letter-spacing: -0.03em !important;
  }
  #top h1 span {
    font-size: 34px !important;
    display: block !important; /* Make it stack nicely */
    margin-top: 8px !important;
  }
  #top p {
    font-size: 16px !important;
    padding: 0 10px !important;
  }

  /* Fix Mac Window / Showcase */
  .mac-window {
    width: 100% !important;
    margin: 0 auto !important;
  }
  #showcase-container {
    padding: 0 !important;
    margin: 20px 0 !important;
  }
  
  /* Todo en uno section */
  h2 {
    font-size: 32px !important;
    line-height: 1.15 !important;
  }

  /* Fix Bento Carousel Images */
  .bento-card {
    min-width: 85vw !important;
    max-width: 85vw !important;
    padding: 24px !important; /* Reduce padding slightly */
    display: flex !important;
    flex-direction: column !important;
  }
  .bento-card h3 {
    font-size: 24px !important;
  }
  .bento-card p {
    font-size: 15px !important;
  }
  /* Force inner containers to respect width */
  .bento-img-wrapper {
    width: 100% !important;
    padding: 0 !important;
    margin-top: auto !important;
    overflow: hidden !important;
    display: flex !important;
    justify-content: center !important;
    align-items: flex-end !important;
  }
  .bento-img-wrapper img {
    width: 100% !important;
    object-fit: contain !important;
    object-position: bottom center !important;
    transform: none !important; /* Remove any hardcoded translates that cause clipping */
  }

  /* Navbar fixes */
  #navbar .wrap {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }


  body, html {
    overflow-x: hidden !important;
  }
  
  .wrap {
    padding-left: 20px !important;
    padding-right: 20px !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }
  
  /* Hero Overrides */
  .hero-title {
    font-size: 38px !important;
    line-height: 1.1 !important;
    letter-spacing: -0.03em !important;
  }
  .hero-title br {
    display: none; /* Let it wrap naturally on mobile */
  }
  .hero-subtitle {
    font-size: 32px !important;
    display: block !important;
    margin-top: 8px !important;
  }
  .hero-desc {
    font-size: 16px !important;
    padding: 0 10px !important;
    text-align: center;
  }
  
  /* Stack Buttons on Mobile */
  .hero-buttons {
    flex-direction: column !important;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
  }
  .hero-buttons .btn {
    width: 100% !important;
    justify-content: center !important;
  }

  /* Section Titles */
  .section-title {
    font-size: 32px !important;
    line-height: 1.2 !important;
  }
  
  /* Bento Images Fix (using the CORRECT class wrapper) */
  .bento-img-wrapper .bento-img,
  .bento-img-wrapper img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: bottom center !important;
    transform: none !important;
  }
  
  /* Mac Window Video inside Showcase */
  #showcase-container video, 
  #showcase-container img {
    max-width: 100% !important;
    height: auto !important;
    width: 100% !important;
  }


  #navbar img {
    height: 32px !important; /* Make it smaller on mobile */
    width: auto !important;
  }
  #navbar {
    background: var(--surface) !important; /* Force solid background on mobile so it doesn't overlap text awkwardly */
    border-bottom: 1px solid var(--line);
  }
  #top {
    padding-top: 160px !important; /* Push hero down more to account for taller mobile nav */
  }


  .mobile-menu-toggle { display: flex; align-items: center; justify-content: center; z-index: 52; position: relative; }
  .nav-desktop-cta { display: none !important; }
  .nav-mobile-cta { display: block !important; margin-top: 24px; width: 100%; }
  
  .nav-links-container {
    position: fixed !important;
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    background: var(--surface) !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 32px !important;
    font-size: 18px !important;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 50;
    padding: 20px;
    height: 100vh;
  }
  
  .nav-links-container.nav-active {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
  }
  
  /* Show close icon when active */
  .mobile-menu-toggle[aria-expanded="true"] .menu-icon { display: none; }
  .mobile-menu-toggle[aria-expanded="true"] .close-icon { display: block !important; }


}