/* ═══════════════════════════════════════════════════════
   DISPERSO · Design System & Component Styles
   ═══════════════════════════════════════════════════════ */

/* ── 1. Design Tokens ─────────────────────────────────── */
:root {
  /* Brand - Official Disperso palette */
  --brand-primary:   #3578FA;
  --brand-dark:      #2F46F2;
  --brand-light:     #4A8CFF;
  --brand-navy:      #0B1220;
  --blue:            #3578FA;
  --blue-dark:       #2F46F2;
  --blue-deep:       #2466dc;
  --blue-light:      rgba(53, 120, 250, 0.12);
  --blue-mid:        #4A8CFF;
  --blue-glow:       rgba(53, 120, 250, 0.2);
  --glow-blue:       0 0 60px rgba(53, 120, 250, 0.15), 0 0 120px rgba(53, 120, 250, 0.08);
  --glow-border:     rgba(53, 120, 250, 0.5);

  /* Ink / Text */
  --ink-1:  #FFFFFF;
  --ink-2:  rgba(255,255,255,.85);
  --ink-3:  rgba(255,255,255,.55);
  --ink-4:  rgba(255,255,255,.32);
  --ink-5:  rgba(255,255,255,.15);

  /* Legacy aliases */
  --graphite:    #080E1E;
  --graphite-2:  #0D1628;
  --text:        #FFFFFF;
  --text-2:      rgba(255,255,255,.85);
  --text-3:      rgba(255,255,255,.55);
  --text-4:      rgba(255,255,255,.32);

  /* Surfaces */
  --white:       #FFFFFF;
  --gray-50:     rgba(255,255,255,.04);
  --gray-100:    rgba(255,255,255,.07);
  --gray-200:    rgba(255,255,255,.1);
  --gray-300:    rgba(255,255,255,.16);

  /* Black Theme (Alviere Style) */
  --black-base:   #080E1E;
  --black-alt:    #030303;
  --black-light:  #080808;
  --black-card:   #111111;
  --black-surface: #161616;
  --black-border: rgba(255, 255, 255, 0.12);

  /* Typography */
  --font-display: 'Manrope', -apple-system, sans-serif;
  --font: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Layout */
  --nav-h:        72px;
  --sec-pad:      clamp(80px, 10vw, 128px);
  --cont-max:     1200px;
  --cont-px:      clamp(20px, 5vw, 60px);

  /* Radius */
  --r-sm:  6px;
  --r-md:  12px;
  --r-lg:  18px;
  --r-xl:  28px;
  --r-ful: 9999px;

  /* Depth shadows */
  --sh-sm:   0 1px 3px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.24);
  --sh-md:   0 4px 20px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.3);
  --sh-lg:   0 20px 60px rgba(0,0,0,.6), 0 8px 20px rgba(0,0,0,.4);
  --sh-blue: 0 8px 40px rgba(47,77,240,.35), 0 2px 8px rgba(47,77,240,.2);
  --sh-card: 0 2px 0 rgba(255,255,255,.04) inset, 0 8px 32px rgba(0,0,0,.4);

  /* Motion — premium cubic */
  --ease:         cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out:     cubic-bezier(0.0,  0.0,  0.2,  1.0);
  --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
  --dur:          0.3s;
  --dur-slow:     0.7s;
}

/* ── 2. Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── LIQUID GLASS — Sistema de tokens y utilidades ────────── */
:root {
  /* Liquid glass core — cada surface puede ajustar estos */
  --glass-blur:       20px;
  --glass-sat:        160%;
  --glass-bg:         rgba(255, 255, 255, 0.055);
  --glass-bg-hover:   rgba(255, 255, 255, 0.095);
  --glass-border-top: rgba(255, 255, 255, 0.20);
  --glass-border:     rgba(255, 255, 255, 0.08);
  --glass-shadow:     0 4px 24px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.3);
  --glass-inner-glow: inset 0 1px 0 rgba(255,255,255,.14),
                      inset 0 -1px 0 rgba(0,0,0,.2);
  /* Refraction tint — dark smoke */
  --glass-tint:       rgba(255, 255, 255, 0.02);
}

/* Clase utilitaria base de liquid glass */
.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) brightness(1.04);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) brightness(1.04);
  /* Borde especular: parte superior más brillante (simula luz cénit) */
  border: 1px solid var(--glass-border);
  border-top-color: var(--glass-border-top);
  /* Glow interior que refuerza el efecto de profundidad */
  box-shadow: var(--glass-shadow), var(--glass-inner-glow);
  transition:
    background .4s cubic-bezier(0.16,1,0.3,1),
    box-shadow .4s cubic-bezier(0.16,1,0.3,1),
    border-color .3s ease;
}
.glass:hover {
  background: var(--glass-bg-hover);
}

/* Shimmer edge: pseudo-elemento que recorre el borde superior */
.glass-shimmer {
  position: relative;
  isolation: isolate;
}
.glass-shimmer::before {
  content: '';
  position: absolute;
  top: 0; left: -60%; right: -60%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0) 20%,
    rgba(255,255,255,0.5) 50%,
    rgba(255,255,255,0) 80%,
    transparent 100%
  );
  animation: shimmer-pass 6s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
  border-radius: inherit;
}

@keyframes shimmer-pass {
  0%   { transform: translateX(-40%); opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateX(40%); opacity: 0; }
}

/* Variante con tinte azul para contextos muy oscuros */
.glass--tinted {
  --glass-bg:       rgba(255, 255, 255, 0.04);
  --glass-bg-hover: rgba(255, 255, 255, 0.08);
  --glass-border-top: rgba(255, 255, 255, 0.25);
  --glass-border: rgba(255, 255, 255, 0.12);
}

/* Variante strong para elementos sobre backgrounds más luminosos */
.glass--strong {
  --glass-blur: 32px;
  --glass-sat: 200%;
  --glass-bg: rgba(255,255,255,.09);
  --glass-bg-hover: rgba(255,255,255,.14);
  --glass-border-top: rgba(255,255,255,.3);
}

/* Variante minimal: sin sombra, solo blur + borde */
.glass--flat {
  box-shadow: none;
  --glass-shadow: none;
  --glass-inner-glow: none;
}

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

body {
  font-family: var(--font);
  color: var(--text);
  background: var(--black-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font-family: inherit; border: none; background: none; }
button { cursor: pointer; }
ul, ol { list-style: none; }
h1,h2,h3,h4 {
  font-family: var(--font-display);
  line-height: 1.1;
  letter-spacing: -.03em;
  font-weight: 800;
}

/* ── 3. Typography Scale ──────────────────────────────── */
h1 { font-size: clamp(28px, 3.8vw, 52px); }
h2 { font-size: clamp(28px, 3.5vw, 52px); }
h3 { font-size: clamp(15px, 1.6vw, 19px); font-weight: 700; }
p  { line-height: 1.7; font-family: var(--font); }

/* ── 4. Layout Utilities ──────────────────────────────── */
.container {
  max-width: var(--cont-max);
  margin-inline: auto;
  padding-inline: var(--cont-px);
}

/* ── 5. Buttons ───────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: var(--r-ful);
  font-weight: 600;
  font-size: 15px;
  font-family: var(--font);
  letter-spacing: -.01em;
  transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              background var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
  white-space: nowrap;
  cursor: pointer;
}

.btn--primary {
  background: var(--white);
  color: #000000;
  box-shadow: 0 4px 14px rgba(255,255,255,.1);
  border: 1px solid transparent;
}
.btn--primary:hover {
  background: #EAEAEA;
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(255,255,255,.2);
}

.btn--ghost {
  /* Liquid glass ghost button: blur del fondo + borde especular */
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  color: var(--ink-2);
  border: 1px solid rgba(255,255,255,.12);
  border-top-color: rgba(255,255,255,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 2px 12px rgba(0,0,0,.3);
}
.btn--ghost:hover {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.18);
  border-top-color: rgba(255,255,255,.32);
  color: var(--ink-1);
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 4px 20px rgba(0,0,0,.35);
}

.btn--white {
  background: var(--black-card);
  color: var(--blue);
  box-shadow: var(--sh-md);
}
.btn--white:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-lg);
}

.btn--lg { padding: 15px 32px; font-size: 16px; }
.btn--full { width: 100%; justify-content: center; }

.btn-arrow {
  width: 16px; height: 16px; flex-shrink: 0;
  transition: transform var(--dur) var(--ease);
}
.btn:hover .btn-arrow { transform: translateX(4px); }

/* ── 6. Scroll Reveal — differentiated per element type ── */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .8s var(--ease-premium), transform .8s var(--ease-premium);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* Dramatic upward for section headers */
.reveal--up {
  transform: translateY(44px);
  transition: opacity .9s var(--ease-premium), transform .9s var(--ease-premium);
}
.reveal--up.is-visible { opacity: 1; transform: none; }

/* Lateral — from left */
.reveal--left {
  transform: translateX(-28px);
  transition: opacity .8s var(--ease-premium), transform .8s var(--ease-premium);
}
.reveal--left.is-visible { opacity: 1; transform: none; }

/* Lateral — from right */
.reveal--right {
  transform: translateX(28px);
  transition: opacity .8s var(--ease-premium), transform .8s var(--ease-premium);
}
.reveal--right.is-visible { opacity: 1; transform: none; }

/* Scale entrance for cards */
.reveal--scale {
  transform: scale(0.94) translateY(16px);
  transition: opacity .75s var(--ease-premium), transform .75s var(--ease-premium);
}
.reveal--scale.is-visible { opacity: 1; transform: none; }

/* Blur entrance for hero subtitle */
.reveal--blur {
  filter: blur(6px);
  transform: scale(0.98);
  transition: opacity .9s var(--ease-premium), transform .9s var(--ease-premium), filter .9s var(--ease-premium);
}
.reveal--blur.is-visible { opacity: 1; transform: none; filter: none; }

/* Stagger delays */
.reveal--d1 { transition-delay: .08s; }
.reveal--d2 { transition-delay: .16s; }
.reveal--d3 { transition-delay: .24s; }
.reveal--d4 { transition-delay: .32s; }

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal--up,
  .reveal--left,
  .reveal--right,
  .reveal--scale,
  .reveal--blur { opacity: 1; transform: none; filter: none; transition: none; }
}

/* ── 7. Section System ────────────────────────────────── */
.section { padding-block: var(--sec-pad); background: var(--black-base); position: relative; }
.section--alt { background: var(--black-alt); }
.section--dark { background: var(--black-light); color: var(--white); }
.section--contact { background: var(--black-surface); color: var(--white); }

/* Subtle divider between sections */
.section + .section::before,
.section--alt + .section::before,
.section + .section--alt::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--black-border), transparent);
  pointer-events: none;
}

.section__header {
  text-align: center;
  max-width: 680px;
  margin-inline: auto;
  margin-bottom: clamp(48px, 6vw, 80px);
}
.section__header--left { text-align: left; margin-inline: 0; }

.section__label {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--blue-mid);
  margin-bottom: 16px;
  font-family: var(--font);
}
.section__label--dim { color: var(--ink-4); }

.section__title {
  color: var(--text);
  margin-bottom: 18px;
  text-wrap: balance;
  font-family: var(--font-display);
}
.section__title--light { color: var(--white); }

.section__desc {
  font-size: 16px;
  color: var(--ink-3);
  max-width: 520px;
  margin-inline: auto;
  line-height: 1.75;
  font-family: var(--font);
}


/* ═══════════════════════════════════════════════════════
   NAV — Glassmorphism refinado
   ═══════════════════════════════════════════════════════ */
.nav {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 100;
  height: 100px; /* adjusted for 78px logo */
  background: #ffffff;
  transition: background var(--dur-slow) var(--ease),
              height var(--dur-slow) var(--ease),
              border-color var(--dur-slow) var(--ease);
  border-bottom: 1px solid transparent;
}

.nav::after {
  content: '';
  position: absolute;
  bottom: 0; left: 5%; right: 5%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--black-border), transparent);
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease);
}

.nav.is-scrolled {
  /* Liquid glass nav: desenfoca el contenido detrás con tinte navy */
  height: 88px;
  background: rgba(8, 14, 30, 0.85);
  backdrop-filter: blur(24px) saturate(180%) brightness(1.02);
  -webkit-backdrop-filter: blur(24px) saturate(180%) brightness(1.02);
  border-color: transparent;
  box-shadow:
    0 1px 0 rgba(255,255,255,.07),
    0 4px 24px rgba(0,0,0,.4);
}
.nav.is-scrolled::after { opacity: 1; }

.nav__inner {
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: 40px;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

/* Logo — first grid column */
.nav__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  transition: opacity var(--dur);
  line-height: 1;
  position: relative; /* for scrolled logo absolute overlay */
  grid-column: 1;
}
.nav__logo:hover { opacity: .75; }

.logo__img-light {
  /* Large only in light nav — proportional height of the bar */
  height: 78px;
  width: auto;
  transition: opacity var(--dur-slow) var(--ease), height var(--dur-slow) var(--ease);
  display: block;
}

/* Scrolled logo: white version */
.logo__img-scrolled {
  height: 64px;
  width: auto;
  transition: opacity var(--dur-slow) var(--ease);
  display: none;
}

.nav.is-scrolled .logo__img-light {
  display: none;
}
.nav.is-scrolled .logo__img-scrolled {
  display: block;
}

.logo__text {
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -.035em;
  color: currentColor;
}

.logo__target {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  color: currentColor;
  margin-top: 1px;
}
.logo__target svg { width: 26px; height: 26px; }

/* White logo (footer) */
.footer__logo { color: var(--white); }

/* Nav links — second grid column, centered */
.nav__links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  grid-column: 2;
  overflow: hidden; /* prevent bleed into adjacent columns */
  padding-inline: 16px; /* soft buffer */
}

.nav__link {
  font-size: 14px; /* slightly smaller to fit all 8 links */
  font-weight: 500;
  color: #111111;
  padding: 6px 10px;
  border-radius: var(--r-md);
  white-space: nowrap;
  transition: color var(--dur) var(--ease),
              background var(--dur) var(--ease);
}
.nav.is-scrolled .nav__link {
  color: var(--ink-2); /* Revert to white/gray when scrolled */
}
.nav__link:hover { color: var(--white); background: var(--black-light); }

/* Nav actions — third grid column */
.nav__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-shrink: 0;
  grid-column: 3;
}


/* Nav button specific colors based on scroll state */
.nav:not(.is-scrolled) .nav__actions .btn--primary {
  background: #2466dc;
  color: #ffffff;
}
.nav:not(.is-scrolled) .nav__actions .btn--primary:hover {
  background: #1a4aa0;
}

/* Desktop: reduce link font on mid-size screens */
@media screen and (max-width: 1200px) {
  .nav__link { font-size: 13px; padding: 6px 8px; }
}
/* Hide some nav links on smaller desktop if needed */
@media screen and (max-width: 992px) {

  .nav__links { display: none; }
  .nav__burger { display: flex; }
  #nav-demo-btn { display: none; }
}

/* Hamburger */
.nav__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  padding: 6px;
  border-radius: var(--r-sm);
  transition: background var(--dur);
}
.nav__burger:hover { background: var(--gray-100); }

.burger__bar {
  width: 100%;
  height: 2px;
  background: #000000; /* Dark for light nav */
  border-radius: 2px;
  display: block;
  transition: transform var(--dur) var(--ease), opacity var(--dur), background var(--dur);
}
.nav.is-scrolled .burger__bar {
  background: var(--text); /* White for dark nav */
}

.nav__burger[aria-expanded="true"] .burger__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__burger[aria-expanded="true"] .burger__bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav__burger[aria-expanded="true"] .burger__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile nav */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--black-card);
  display: flex;
  flex-direction: column;
  padding: calc(var(--nav-h) + 20px) 28px 32px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-12px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.mobile-nav.is-open { opacity: 1; pointer-events: all; transform: translateY(0); }

.mobile-nav__inner { display: flex; flex-direction: column; gap: 2px; }

.mobile-nav__link {
  display: block;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.02em;
  padding: 14px 0;
  border-bottom: 1px solid var(--gray-100);
  color: var(--text);
  transition: color var(--dur);
}
.mobile-nav__link:hover { color: var(--blue); }

.mobile-nav__cta { margin-top: 28px; text-align: center; justify-content: center; }


/* ═══════════════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════════════ */
.hero {
  min-height: 100svh;
  padding-top: var(--nav-h);
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: clip; /* clip instead of hidden — allows the circle to bleed outside without scroll */
  /* Radial glow centrado — navy base con luminosidad sutil al centro */
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(47,77,240,.12) 0%, transparent 70%),
    var(--black-base);
}

/* Background elements */
.hero__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.hero__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
}

.hero__blob--1 {
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(47,77,240,.13) 0%, transparent 70%);
  top: -180px; right: -100px;
  animation: blob-drift 10s ease-in-out infinite;
}

.hero__blob--2 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(47,77,240,.07) 0%, transparent 70%);
  bottom: -100px; left: -80px;
  animation: blob-drift 13s ease-in-out infinite reverse;
}

@keyframes blob-drift {
  0%,100% { transform: translate(0,0) scale(1); }
  33%      { transform: translate(40px,-30px) scale(1.06); }
  66%      { transform: translate(-25px,20px) scale(0.96); }
}

.hero__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(47,77,240,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(47,77,240,.04) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 90% 90% at 50% 50%, black 20%, transparent 100%);
}

/* Hero layout */
.hero__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 1;
  padding-block: clamp(80px, 10vw, 140px);
}

.hero__text {
  max-width: 800px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto;
}

/* Headline */
.hero__headline {
  font-size: clamp(40px, 5vw, 70px);
  font-family: var(--font-display);
  color: var(--ink-1);
  margin-bottom: 24px;
  line-height: 1.06;
  letter-spacing: -.04em;
  text-wrap: balance;
  animation: blur-reveal 1.8s 2s cubic-bezier(0.16, 1, 0.3, 1) both; /* Premium reveal matching Pulse 1 */
}

@keyframes blur-reveal {
  0% {
    opacity: 0;
    filter: blur(20px);
    transform: translateY(40px) scale(0.95);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) scale(1);
  }
}

.hero__em {
  font-style: normal;
  display: block;
}

.hero-shimmer {
  display: inline-block;
  padding-bottom: 0.15em; /* prevents descenders like 'g' from being clipped */
  background: linear-gradient(
    to right,
    #2466dc 0%,
    #2466dc 45%,
    #4d88ff 50%,
    #ffffff 55%,
    #ffffff 100%
  );
  background-size: 300% auto;
  background-position: 100% center;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  /* El efecto dura 3s, con un retraso de 4s para coincidir con el Pulse 2 */
  animation: hero-shimmer-anim 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 4s forwards;
}

@keyframes hero-shimmer-anim {
  0% { background-position: 100% center; }
  100% { background-position: 0% center; }
}

/* CTAs */
.hero__ctas {
  display: inline-flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 48px;
  animation: blur-reveal 1.8s 2.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Trust bar — text only, no icons */
.hero__trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0;
  animation: blur-reveal 1.8s 3.2s cubic-bezier(0.16, 1, 0.3, 1) both;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-4);
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 14px;
  position: relative;
}
.trust-item + .trust-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 12px;
  background: var(--ink-5);
}

.trust-icon { display: none; }
.trust-sep  { display: none; }

/* Canvas wrapper */
.hero__visual {
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fade-up .9s .2s var(--ease-out) both;
}

#hero-canvas {
  width: 100%;
  max-width: 540px;
  height: 460px;
  border-radius: var(--r-xl);
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
}

/* ── Brand Circles (hero + cards) ──────────────────────── */
.hero__circles {
  position: absolute;
  /* Mover a esquina inferior izquierda */
  left: -260px;
  bottom: -260px;
  width: 720px;
  height: 720px;
  pointer-events: none;
  opacity: 0;
  z-index: 0;
  /* Anim inicial de 8s para contener los dos primeros pulsos, luego loop */
  animation: circle-pulse-hero-initial 8s forwards, circle-pulse-hero-loop 6s 8s infinite;
}
.hero__circles-svg {
  width: 100%;
  height: 100%;
}

@keyframes circle-pulse-hero-initial {
  0%   { transform: scale(0.6); opacity: 0; filter: none; }
  /* At 2.0s (25% of 8s): Pulse 1 */
  22%  { transform: scale(0.6); opacity: 0; filter: none; }
  25%  { transform: scale(2); opacity: 1; filter: drop-shadow(0 0 50px rgba(53,120,250,0.8)); }
  32%  { transform: scale(1); opacity: 0.6; filter: none; }
  /* At 4.0s (50% of 8s): Pulse 2 */
  48%  { transform: scale(1); opacity: 0.6; filter: none; }
  50%  { transform: scale(2); opacity: 1; filter: drop-shadow(0 0 50px rgba(53,120,250,0.8)); }
  57%  { transform: scale(1); opacity: 0.6; filter: none; }
  80%  { transform: scale(1.4); opacity: 0.8; filter: drop-shadow(0 0 15px rgba(53,120,250,0.4)); }
  100% { transform: scale(1); opacity: 0.6; filter: none; }
}

@keyframes circle-pulse-hero-loop {
  0%   { transform: scale(1); opacity: 0.6; filter: none; }
  15%  { transform: scale(1.4); opacity: 0.8; filter: drop-shadow(0 0 15px rgba(53,120,250,0.4)); }
  30%  { transform: scale(1); opacity: 0.6; filter: none; }
  65%  { transform: scale(1.4); opacity: 0.8; filter: drop-shadow(0 0 15px rgba(53,120,250,0.4)); }
  80%  { transform: scale(1); opacity: 0.6; filter: none; }
  100% { transform: scale(1); opacity: 0.6; filter: none; }
}

@keyframes circles-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Card circles – same SVG pattern as hero (origin at corner, rings expand outward) */
.card__circles {
  position: absolute;
  right: -300px;
  top: -300px;
  width: 600px;
  height: 600px;
  pointer-events: none;
  overflow: visible;
  /* Pulsos lentos y sutiles */
  animation: circle-pulse-card 6s infinite ease-in-out;
}

@keyframes circle-pulse-card {
  0%   { transform: scale(1); opacity: 0.15; filter: none; }
  50%  { transform: scale(1.6); opacity: 0.25; filter: drop-shadow(0 0 25px rgba(255,255,255,0.05)); }
  100% { transform: scale(1); opacity: 0.15; filter: none; }
}

/* Retrasos aleatorios para que no pulsen todos juntos */
.service-card:nth-child(1) .card__circles { animation-delay: 0s; }
.service-card:nth-child(2) .card__circles { animation-delay: -2s; }
.service-card:nth-child(3) .card__circles { animation-delay: -4.5s; }
.service-card:nth-child(4) .card__circles { animation-delay: -1.5s; }
.service-card:nth-child(5) .card__circles { animation-delay: -3.5s; }
.service-card:nth-child(6) .card__circles { animation-delay: -5s; }

.service-card:hover .card__circles { opacity: 0.4; }
.card__circles svg {
  width: 100%;
  height: 100%;
}

/* Scroll hint */
.hero__scroll-hint {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--text-4);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  animation: fade-up .8s 1.2s var(--ease-out) both;
  pointer-events: none;
}

.scroll-line {
  width: 1px; height: 36px;
  background: linear-gradient(to bottom, transparent, var(--gray-300));
  animation: scroll-drip 2.2s ease-in-out infinite;
}

@keyframes scroll-drip {
  0%   { transform: scaleY(0); transform-origin: top; opacity: 0; }
  50%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ═══════════════════════════════════════════════════════
   SERVICES — Profundidad sin bordes
   ═══════════════════════════════════════════════════════ */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(220px, auto);
  gap: 20px;
}

.service-card {
  background: var(--black-card);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 24px;
  padding: 36px 32px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  transition: transform 0.4s var(--ease-premium), box-shadow 0.4s var(--ease-premium);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Bento Spans */
.span-2-col { grid-column: span 2; }
.span-2-row { grid-row: span 2; }

/* Brand Palette Backgrounds (Official Disperso Colors) */
.card--brand     { background: linear-gradient(135deg, #3578FA 0%, #2F46F2 100%); } /* Primary Blue */
.card--aubergine { background: linear-gradient(135deg, #0B1220 0%, #1A2540 100%); } /* Navy Deep */
.card--forest    { background: linear-gradient(135deg, #1A2540 0%, #2F46F2 100%); } /* Navy → Blue */
.card--rust      { background: linear-gradient(135deg, #2F46F2 0%, #4A8CFF 100%); } /* Blue Dark → Light */
.card--slate     { background: linear-gradient(135deg, #111827 0%, #1e3a6e 100%); } /* Dark Navy */
.card--teal      { background: linear-gradient(135deg, #4A8CFF 0%, #3578FA 100%); } /* Blue Light → Primary */

/* Número de orden como elemento decorativo */
.service-card__num {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .15em;
  font-family: var(--font);
  color: var(--ink-4);
  margin-bottom: 20px;
}

/* Eliminar el fondo de icono cuadrado — solo el SVG con color */
.service-card__icon {
  width: 24px; height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  color: var(--ic, var(--blue-mid));
  background: none;
  border-radius: 0;
}
.service-card__icon svg { width: 24px; height: 24px; }

.service-card h3 { font-size: 19px; margin-bottom: 10px; color: var(--ink-1); }
.service-card p  { font-size: 13.5px; color: var(--ink-3); line-height: 1.7; font-family: var(--font); }


/* ═══════════════════════════════════════════════════════
   TABS COMPONENT (Sobre Disperso)
   ═══════════════════════════════════════════════════════ */
.tabs-container {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-top: 40px;
}
@media (min-width: 900px) {
  .tabs-container {
    flex-direction: row;
    align-items: flex-start;
    gap: 48px;
  }
}

.tabs__nav {
  display: flex;
  overflow-x: auto;
  gap: 12px;
  padding-bottom: 16px;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;  /* IE and Edge */
}
.tabs__nav::-webkit-scrollbar {
  display: none; /* Chrome, Safari and Opera */
}
@media (min-width: 900px) {
  .tabs__nav {
    flex-direction: column;
    width: 300px;
    flex-shrink: 0;
    overflow-x: visible;
    padding-bottom: 0;
  }
}

.tab-btn {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  color: var(--ink-3);
  padding: 16px 24px;
  border-radius: var(--r-md);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}
@media (min-width: 900px) {
  .tab-btn {
    white-space: normal;
  }
}

.tab-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--ink-1);
  transform: translateX(4px);
}

.tab-btn.is-active {
  background: var(--blue-light);
  border-color: var(--brand-primary);
  color: var(--ink-1);
  box-shadow: 0 0 20px rgba(53, 120, 250, 0.3), inset 0 0 10px rgba(53, 120, 250, 0.2);
  transform: translateX(8px);
}

.tabs__content {
  flex-grow: 1;
  background: var(--black-card);
  border: 1px solid var(--black-border);
  border-radius: var(--r-lg);
  padding: 32px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.4);
  position: relative;
  overflow: hidden;
}

.tab-pane {
  display: none;
  opacity: 0;
  transform: translateY(20px) scale(0.98);
  filter: blur(4px);
  animation: tabFadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.tab-pane.is-active {
  display: block;
}

@keyframes tabFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.98);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

.tab-pane h3 {
  font-size: 24px;
  font-weight: 700;
  color: var(--ink-1);
  margin-bottom: 24px;
  font-family: var(--font-display);
}

.tab-pane h4 {
  font-size: 16px;
  color: var(--brand-primary);
  margin-bottom: 12px;
  margin-top: 24px;
}

.tab-pane p {
  color: var(--ink-2);
  line-height: 1.6;
  margin-bottom: 16px;
  font-size: 15px;
}

.styled-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.styled-list li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 12px;
  color: var(--ink-3);
  font-size: 14.5px;
  line-height: 1.5;
}
.styled-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-primary);
}

.tab-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 600px) {
  .tab-grid { grid-template-columns: 1fr 1fr; }
}
.tab-card, .tab-subsection {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--r-md);
  padding: 24px;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.tab-card:hover, .tab-subsection:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(53, 120, 250, 0.4);
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4), 0 0 20px rgba(53, 120, 250, 0.15);
}

.tab-card h4, .tab-subsection h4 { margin-top: 0; }
.tab-card p, .tab-subsection p { margin-bottom: 0; font-size: 14.5px; }
.tab-subsection p { margin-bottom: 16px; }

.grid-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px 24px;
}
@media (min-width: 700px) {
  .grid-list { grid-template-columns: 1fr 1fr; }
}

.tab-subsections {
  display: flex;
  flex-direction: column;
  gap: 24px;
}


/* ═══════════════════════════════════════════════════════
   SUB-TABS COMPONENT (Funcionalidades Principales)
   ═══════════════════════════════════════════════════════ */
.sub-tabs-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.sub-tabs-nav {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 8px;
  scrollbar-width: none;
}
.sub-tabs-nav::-webkit-scrollbar { display: none; }
.sub-tab-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--ink-3);
  padding: 10px 16px;
  border-radius: var(--r-ful);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.3s var(--ease-premium);
}
.sub-tab-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--ink-2);
}
.sub-tab-btn.is-active {
  background: var(--blue-mid);
  color: var(--white);
  border-color: var(--brand-primary);
  box-shadow: 0 4px 12px rgba(53, 120, 250, 0.4);
}

.sub-tabs-content {
  position: relative;
  perspective: 1000px;
}
.sub-tab-pane {
  display: none;
  transform-style: preserve-3d;
}
.sub-tab-pane.is-active {
  display: block;
  animation: spinIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes spinIn {
  0% {
    opacity: 0;
    transform: rotateY(30deg) scale(0.9);
  }
  100% {
    opacity: 1;
    transform: rotateY(0deg) scale(1);
  }
}

/* ═══════════════════════════════════════════════════════
   BENEFITS — Stats monumentales sin cajas
   ═══════════════════════════════════════════════════════ */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-bottom: 80px;
  /* Liquid glass container: parece flotar sobre el fondo oscuro */
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(255,255,255,.08);
  border-top-color: rgba(255,255,255,.16);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.1),
    0 8px 40px rgba(0,0,0,.5);
}

.stat-card {
  padding: 44px 32px;
  text-align: center;
  position: relative;
  background: transparent;
  border: none;
  border-radius: 0;
}
/* Separador vertical entre stats */
.stat-card + .stat-card {
  border-left: 1px solid var(--black-border);
}

.counter, .stat-card__text-val {
  display: block;
  font-size: clamp(52px, 6.5vw, 88px);
  font-weight: 900;
  font-family: var(--font-display);
  letter-spacing: -.05em;
  color: var(--ink-1);
  line-height: 1;
  margin-bottom: 10px;
  font-variant-numeric: tabular-nums;
}

.stat-card__label {
  font-size: 12px;
  font-family: var(--font);
  color: var(--ink-2);
  line-height: 1.5;
  letter-spacing: .04em;
}

/* Benefits list — sin iconos cuadrados */
.benefits-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

.benefit-row { display: flex; gap: 20px; align-items: flex-start; }

/* Reemplazar icono cuadrado por número de orden tipográfico */
.benefit-row__icon {
  flex-shrink: 0;
  width: 28px;
  font-size: 11px;
  font-weight: 800;
  font-family: var(--font);
  letter-spacing: .1em;
  color: var(--blue-mid);
  padding-top: 4px;
  /* Ocultar el SVG dentro, mostrar solo el número vía CSS content */
  background: none;
  border-radius: 0;
  display: block;
  height: auto;
  justify-content: flex-start;
  align-items: unset;
}
.benefit-row__icon svg { display: none; }

.benefit-row h3 {
  font-size: 15px;
  font-weight: 700;
  font-family: var(--font-display);
  color: var(--ink-1);
  margin-bottom: 8px;
  letter-spacing: -.01em;
}
.benefit-row p  {
  font-size: 13.5px;
  color: var(--ink-3);
  line-height: 1.7;
  font-family: var(--font);
}


/* ═══════════════════════════════════════════════════════
   SECURITY — Cards sin borde explícito
   ═══════════════════════════════════════════════════════ */
.security-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 48px;
}

.security-card {
  background: var(--black-card);
  border: 1px solid transparent;
  border-radius: var(--r-lg);
  padding: 36px 24px;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: var(--sh-card);
  transition: box-shadow .5s var(--ease-premium), border-color .4s var(--ease-premium);
}
.security-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--r-lg);
  border: 1px solid var(--glow-border);
  opacity: 0;
  transition: opacity .4s var(--ease-premium);
  pointer-events: none;
}
.security-card:hover {
  box-shadow: var(--sh-card), var(--glow-blue);
}
.security-card:hover::after { opacity: 1; }

/* Eliminar icono SVG genérico — solo label de protocolo */
.security-card__icon { display: none; }

/* Número de protocolo decorativo */
.security-card__proto {
  display: block;
  font-size: 10px;
  font-weight: 700;
  font-family: var(--font);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--blue-mid);
  margin-bottom: 16px;
}

.security-card h3 {
  font-size: 14px;
  margin-bottom: 10px;
  font-family: var(--font-display);
  color: var(--ink-1);
}
.security-card p  {
  font-size: 12.5px;
  color: var(--ink-3);
  line-height: 1.65;
  font-family: var(--font);
}

/* Banner — texto editorial sin icono */
.security-banner {
  /* Liquid glass tinted: azul frío semi-transparente */
  background: rgba(47, 77, 240, 0.08);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(165, 180, 252, 0.15);
  border-top-color: rgba(165, 180, 252, 0.28);
  border-radius: var(--r-xl);
  padding: 40px 48px;
  display: flex;
  align-items: center;
  gap: 48px;
  box-shadow:
    inset 0 1px 0 rgba(165,180,252,.12),
    inset 0 -1px 0 rgba(0,0,0,.2),
    0 8px 32px rgba(0,0,0,.4);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
/* Shimmer especular sobre el banner de seguridad */
.security-banner::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(165,180,252,0) 15%,
    rgba(165,180,252,0.6) 50%,
    rgba(165,180,252,0) 85%,
    transparent 100%
  );
  animation: shimmer-pass 8s ease-in-out infinite 2s;
  pointer-events: none;
}

.security-banner__body { flex: 1; }
.security-banner__body h3 {
  font-size: 16px;
  font-family: var(--font-display);
  color: var(--ink-1);
  margin-bottom: 10px;
  letter-spacing: -.02em;
}
.security-banner__body p  {
  font-size: 13.5px;
  color: var(--ink-3);
  line-height: 1.7;
  font-family: var(--font);
}

.security-banner__certs { display: flex; gap: 24px; flex-shrink: 0; }

/* Cert badges — solo texto, sin SVG genérico */
.cert-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  text-align: center;
  border: 1px solid var(--black-border);
  border-radius: var(--r-md);
  padding: 14px 18px;
}
.cert-badge svg { display: none; }
.cert-badge span {
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font);
  color: var(--ink-2);
  line-height: 1.5;
  letter-spacing: .06em;
}


/* ═══════════════════════════════════════════════════════
   INTEGRATIONS
   ═══════════════════════════════════════════════════════ */
.integrations-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}

.api-features {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-bottom: 32px;
  margin-top: 4px;
}

.api-feature { display: flex; gap: 16px; align-items: flex-start; }

.api-feature__dot {
  flex-shrink: 0;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--blue);
  margin-top: 8px;
}

.api-feature strong {
  display: block; font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 4px;
}
.api-feature p { font-size: 14px; color: var(--text-3); line-height: 1.6; }

/* Integration canvas */
.integrations-diagram {
  display: flex;
  align-items: center;
  justify-content: center;
}

#int-canvas {
  width: 100%;
  max-width: 420px;
  height: 380px;
  border-radius: var(--r-xl);
  background: var(--black-card);
  border: 1.5px solid var(--gray-200);
  box-shadow: var(--sh-md);
}


/* ═══════════════════════════════════════════════════════
   USE CASES
   ═══════════════════════════════════════════════════════ */
.use-cases-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.uc-card {
  background: var(--black-card);
  border: 1px solid transparent;
  border-radius: var(--r-lg);
  padding: 32px 26px;
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  overflow: hidden;
  box-shadow: var(--sh-card);
  transition: box-shadow .5s var(--ease-premium);
}
.uc-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--r-lg);
  border: 1px solid var(--glow-border);
  opacity: 0;
  transition: opacity .4s var(--ease-premium);
  pointer-events: none;
}
.uc-card:hover { box-shadow: var(--sh-card), var(--glow-blue); }
.uc-card:hover::after { opacity: 1; }

.uc-card__tag {
  display: inline-block;
  font-size: 14px; font-weight: 700;
  font-family: var(--font);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--blue-mid);
  margin-bottom: 14px;
  width: fit-content;
}

.uc-card__title {
  font-size: 20px;
  font-weight: 700;
  font-family: var(--font-display);
  margin-bottom: 20px;
  color: var(--ink-1);
  letter-spacing: -.02em;
}

.uc-card__problem {
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--black-border);
}

.uc-label {
  display: block;
  font-size: 14px; font-weight: 700;
  font-family: var(--font);
  letter-spacing: .14em; text-transform: uppercase;
  margin-bottom: 8px;
}
.uc-label--gray { color: var(--ink-4); }
.uc-label--blue { color: var(--blue-mid); }

.uc-card__problem p,
.uc-card__solution p {
  font-size: 17px;
  font-family: var(--font);
  color: var(--ink-3);
  line-height: 1.7;
}


/* ═══════════════════════════════════════════════════════
   ABOUT / NOSOTROS
   ═══════════════════════════════════════════════════════ */
.about-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}

.about-lead { font-size: 17px; color: var(--text); margin-bottom: 16px; line-height: 1.65; }

.about-body p { font-size: 15px; color: var(--text-3); margin-bottom: 12px; line-height: 1.7; }

/* Timeline */
.milestones {
  margin-top: 32px;
  border-left: 2px solid var(--blue);
  padding-left: 24px;
  display: flex;
  flex-direction: column;
}

.milestone {
  padding-block: 14px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  position: relative;
}
.milestone::before {
  content: '';
  position: absolute;
  left: -30px;
  top: 20px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--blue);
  border: 2px solid var(--white);
  box-shadow: 0 0 0 2px var(--blue);
}

.milestone__year { font-size: 12px; font-weight: 800; color: var(--blue); min-width: 44px; letter-spacing: -.01em; padding-top: 2px; }
.milestone__text { font-size: 14px; color: var(--text-3); line-height: 1.55; }

/* Visual block */
.about-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

.years-badge {
  display: flex;
  align-items: center;
  gap: 24px;
  background: rgba(47, 77, 240, 0.06);
  border: 1px solid var(--black-border);
  border-radius: var(--r-xl);
  padding: 40px 44px;
  width: 100%;
  box-shadow: var(--sh-card);
}

.years-badge__num {
  font-size: clamp(64px, 8vw, 86px);
  font-weight: 900;
  font-family: var(--font-display);
  letter-spacing: -.06em;
  color: var(--ink-1);
  line-height: 1;
}
.years-badge__num sup { font-size: .45em; vertical-align: super; }

.years-badge__label {
  font-size: 16px;
  font-weight: 500;
  font-family: var(--font);
  color: var(--ink-3);
  line-height: 1.5;
}

/* Value pills → lista tipográfica limpia */
.value-pills {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
}

.value-pill {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  font-size: 13px;
  font-weight: 500;
  font-family: var(--font);
  color: var(--ink-3);
  display: flex;
  align-items: center;
  gap: 10px;
  border-top: 1px solid var(--black-border);
  padding-top: 14px;
}
.value-pill::before {
  content: '';
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--blue-mid);
  flex-shrink: 0;
}


/* ═══════════════════════════════════════════════════════
   FAQ — Líneas editorial, sin cajas
   ═══════════════════════════════════════════════════════ */
.faq-list {
  max-width: 780px;
  margin-inline: auto;
}

.faq-item {
  border-top: 1px solid var(--black-border);
}
.faq-list .faq-item:last-child {
  border-bottom: 1px solid var(--black-border);
}

.faq-q {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  text-align: left;
  padding: 24px 0;
  font-size: 15.5px;
  font-weight: 600;
  font-family: var(--font-display);
  color: var(--ink-2);
  letter-spacing: -.01em;
  transition: color .25s var(--ease);
}
.faq-q:hover { color: var(--ink-1); }
.faq-q[aria-expanded="true"] { color: var(--ink-1); }

.faq-chevron {
  width: 18px; height: 18px;
  flex-shrink: 0;
  color: var(--ink-4);
  transition: transform .35s var(--ease-premium), color .25s var(--ease);
}
.faq-q[aria-expanded="true"] .faq-chevron {
  transform: rotate(180deg);
  color: var(--blue-mid);
}

.faq-a { padding-bottom: 24px; }
.faq-a p {
  font-size: 14.5px;
  font-family: var(--font);
  color: var(--ink-3);
  line-height: 1.75;
}


/* ═══════════════════════════════════════════════════════
   CONTACT
   ═══════════════════════════════════════════════════════ */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: start;
}

.contact-subtitle { font-size: 17px; color: rgba(255,255,255,.72); margin-bottom: 36px; line-height: 1.65; }

.contact-info { display: flex; flex-direction: column; gap: 16px; }

.contact-info li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  color: rgba(255,255,255,.7);
}
.contact-info svg { width: 18px; height: 18px; opacity: .65; flex-shrink: 0; }

/* Form */
.contact-form {
  /* Liquid glass fuerte: superficie que flota sobre el fondo de contacto */
  background: rgba(255,255,255,.07);
  backdrop-filter: blur(32px) saturate(200%) brightness(1.05);
  -webkit-backdrop-filter: blur(32px) saturate(200%) brightness(1.05);
  border: 1px solid rgba(255,255,255,.12);
  border-top-color: rgba(255,255,255,.25);
  border-radius: var(--r-xl);
  padding: 36px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -1px 0 rgba(0,0,0,.15),
    0 24px 60px rgba(0,0,0,.5),
    0 4px 12px rgba(0,0,0,.3);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
/* Shimmer en el form de contacto */
.contact-form::before {
  content: '';
  position: absolute;
  top: 0; left: -100%; right: -100%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0) 30%,
    rgba(255,255,255,0.4) 50%,
    rgba(255,255,255,0) 70%,
    transparent 100%
  );
  animation: shimmer-pass 7s ease-in-out infinite 1s;
  pointer-events: none;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }

.form-label { font-size: 13px; font-weight: 600; color: rgba(255,255,255,.82); }

.form-input {
  background: rgba(255,255,255,.07);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.14);
  border-top-color: rgba(255,255,255,.08);
  border-bottom-color: rgba(0,0,0,.15);
  border-radius: var(--r-md);
  padding: 12px 16px;
  font-size: 15px;
  font-family: var(--font);
  color: var(--white);
  transition: border-color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
  outline: none;
  width: 100%;
}
.form-input::placeholder { color: rgba(255,255,255,.28); }
.form-input:focus {
  border-color: rgba(165,180,252,.4);
  border-top-color: rgba(165,180,252,.2);
  background: rgba(255,255,255,.1);
  box-shadow: 0 0 0 3px rgba(47,77,240,.15), inset 0 1px 0 rgba(255,255,255,.08);
}

.form-input.is-error { border-color: #FCA5A5; }

.form-select { cursor: pointer; -webkit-appearance: none; }
.form-select option { background: var(--graphite); color: var(--white); }

.form-textarea { resize: vertical; min-height: 100px; }

.form-note {
  margin-top: 12px;
  text-align: center;
  font-size: 12px;
  color: rgba(255,255,255,.38);
}


/* ═══════════════════════════════════════════════════════
   FOOTER — Editorial dark, coherente con navy
   ═══════════════════════════════════════════════════════ */
.footer {
  background: var(--black-base);
  color: var(--ink-2);
  padding-top: 64px;
  border-top: 1px solid var(--black-border);
}

.footer__inner {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 64px;
  padding-bottom: 52px;
}

.footer__logo { margin-bottom: 14px; }
.footer__tagline {
  font-size: 13px;
  font-family: var(--font);
  color: var(--ink-4);
  line-height: 1.65;
  margin-bottom: 24px;
}

.footer__social { display: flex; gap: 8px; }
.social-btn {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--ink-5);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-3);
  transition: border-color .25s var(--ease), color .25s var(--ease);
}
.social-btn:hover { border-color: var(--ink-3); color: var(--ink-1); }
.social-btn svg { width: 15px; height: 15px; }

.footer__nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  padding-top: 8px;
}

.footer__col { display: flex; flex-direction: column; gap: 12px; }
.footer__col h4 {
  font-size: 10px;
  font-weight: 700;
  font-family: var(--font);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: 6px;
}
.footer__col a {
  font-size: 13.5px;
  font-family: var(--font);
  color: var(--ink-3);
  transition: color .22s var(--ease);
}
.footer__col a:hover { color: var(--ink-1); }

.footer__bottom {
  border-top: 1px solid var(--black-border);
  padding: 20px 0;
}
.footer__bottom-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}
.footer__bottom p {
  font-size: 12.5px;
  font-family: var(--font);
  color: var(--ink-4);
}
.footer__bottom a { color: var(--ink-3); transition: color .22s var(--ease); }
.footer__bottom a:hover { color: var(--ink-1); }
.footer__legal { display: flex; gap: 20px; }
.footer__legal a {
  font-size: 12.5px;
  font-family: var(--font);
  color: var(--ink-4);
  transition: color .22s var(--ease);
}
.footer__legal a:hover { color: var(--ink-1); }


/* ═══════════════════════════════════════════════════════
   NOISE TEXTURE — rompe la planitud del fondo
   ═══════════════════════════════════════════════════════ */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 200px 200px;
  opacity: 0.02;
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: overlay;
}

/* ═══════════════════════════════════════════════════════
   SCROLL-DRIVEN ANIMATIONS (Progressive Enhancement)
   ═══════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {
  @supports ((animation-timeline: view()) and (animation-range: entry)) {

    @keyframes reveal-up-native {
      from { opacity: 0; transform: translateY(28px); }
    }
    @keyframes reveal-scale-native {
      from { opacity: 0; transform: scale(0.93) translateY(14px); }
    }
    @keyframes reveal-left-native {
      from { opacity: 0; transform: translateX(-24px); }
    }
    @keyframes reveal-right-native {
      from { opacity: 0; transform: translateX(24px); }
    }

    /* Native scroll-driven — only for supporting browsers (Chrome/Edge 115+, Safari 26+) */
    /* JS IntersectionObserver fallback handles Firefox and older browsers */
    .service-card {
      animation: reveal-scale-native auto linear both;
      animation-timeline: view();
      animation-range: entry 5% entry 45%;
    }
    .uc-card {
      animation: reveal-scale-native auto linear both;
      animation-timeline: view();
      animation-range: entry 5% entry 45%;
    }
    .stat-card {
      animation: reveal-up-native auto linear both;
      animation-timeline: view();
      animation-range: entry 10% entry 55%;
    }
    .security-card {
      animation: reveal-scale-native auto linear both;
      animation-timeline: view();
      animation-range: entry 5% entry 45%;
    }
  }
}


/* ═══════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .steps { grid-template-columns: repeat(2, 1fr); gap: 40px; }
  .steps__connector { display: none; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .security-grid { grid-template-columns: repeat(2, 1fr); }
  .security-banner { flex-direction: column; gap: 24px; }
  .security-banner__certs { justify-content: center; }
}

@media (max-width: 900px) {
  .hero__container { grid-template-columns: 1fr; }
  .hero__visual { display: none; }
  .hero__text { max-width: 100%; }
  .hero__subtitle { max-width: 100%; }

  .services-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: auto; }
  .span-2-col, .span-2-row { grid-column: span 1; grid-row: span 1; } /* Reset on tablet */
}

@media screen and (max-width: 768px) {
  .section__header   { text-align: left; }
  .section__desc     { margin: 0; }
  .services-grid    { grid-template-columns: 1fr; }
  .span-2-col, .span-2-row { grid-column: span 1; grid-row: span 1; }
  .integrations-layout { grid-template-columns: 1fr; }
  .integrations-diagram { display: none; }
  .use-cases-grid { grid-template-columns: repeat(2, 1fr); }
  .about-layout { grid-template-columns: 1fr; }
  .contact-layout { grid-template-columns: 1fr; }
  .footer__inner { grid-template-columns: 1fr; gap: 32px; }


}

@media (max-width: 640px) {
  :root { --sec-pad: 64px; }

  .services-grid    { grid-template-columns: 1fr; }
  .steps            { grid-template-columns: 1fr; }
  .stats-grid       { grid-template-columns: repeat(2, 1fr); }
  .benefits-list    { grid-template-columns: 1fr; gap: 28px; }
  .security-grid    { grid-template-columns: 1fr; }
  .use-cases-grid   { grid-template-columns: 1fr; }
  .form-row         { grid-template-columns: 1fr; }
  .footer__nav      { grid-template-columns: repeat(2, 1fr); }

  .hero__ctas         { flex-direction: column; }
  .hero__trust        { flex-direction: column; gap: 10px; }
  .trust-sep          { display: none; }
  .years-badge        { flex-direction: column; text-align: center; padding: 28px 24px; }
  .security-banner    { padding: 28px 24px; }
  .contact-form       { padding: 24px 20px; }
  .footer__bottom-inner { flex-direction: column; text-align: center; gap: 12px; }
}

/* ═══════════════════════════════════════════════════════
   KEYWORD HIGHLIGHT — Shinkansen-style on-scroll emphasis
   ═══════════════════════════════════════════════════════ */

/* Wrap key words with <mark class="kw"> in your HTML to use */
.kw {
  background: linear-gradient(to right, #2466dc 0%, #4D88FF 50%, var(--text) 50%, var(--text) 100%);
  background-size: 200% auto;
  background-position: 100% center;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  position: relative;
  display: inline;
  font-weight: inherit;
  transition: background-position 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Light variant for darker blue pop */
.kw--light {
  background: linear-gradient(to right, #2466dc 0%, #4D88FF 50%, var(--text) 50%, var(--text) 100%);
  background-size: 200% auto;
  background-position: 100% center;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  position: relative;
  display: inline;
  font-weight: inherit;
  transition: background-position 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}


/* ═══════════════════════════════════════════════════════
   SECTION DIVIDER GRADIENT (subtle between sections)
   ═══════════════════════════════════════════════════════ */
.section + .section--dark,
.section--dark + .section {
  position: relative;
}

/* Number highlight in benefits section */
.section--dark .section__title em {
  font-style: normal;
  color: var(--blue-mid);
}

/* About section desc left-aligned */
.about-body .section__desc {
  margin-inline: 0;
  text-align: left;
}

/* Form success state */
.contact-form .btn--success {
  background: rgba(16,185,129,.9) !important;
}

/* Stat card — sin pseudo-borde superior, el estilo es monumental */
.stat-card {
  position: relative;
}

/* Service card — profundidad sin borde (ya definido arriba) */
.service-card { position: relative; overflow: hidden; }

/* Step: large ghost number background */
.step {
  position: relative;
}
.step__num-bg {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 96px;
  font-weight: 900;
  color: var(--blue);
  opacity: 0.035;
  letter-spacing: -.05em;
  pointer-events: none;
  line-height: 1;
  z-index: 0;
  user-select: none;
}

/* UC card solution highlight */
.uc-card__solution {
  background: rgba(47, 77, 240, 0.07);
  border: 1px solid var(--black-border);
  border-radius: var(--r-md);
  padding: 14px;
  margin-top: auto;
}

/* Integrations text: code-style API pill */
.api-code-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(0,0,0,.4);
  color: #a5b4fc;
  font-size: 12px;
  font-family: 'SF Mono', 'Fira Code', monospace;
  padding: 6px 14px;
  border-radius: var(--r-sm);
  margin-top: 16px;
  letter-spacing: .01em;
  border: 1px solid var(--black-border);
}
.api-code-pill .api-method {
  color: #86EFAC;
  font-weight: 700;
}

/* Focus styles for accessibility */
:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Site siempre en dark — forzar color-scheme */
html { color-scheme: dark; }

/* Steps — connector con fondo navy */
.steps__connector { background: var(--black-border); }

/* About milestone dot — fondo navy */
.milestone::before {
  border-color: var(--black-base);
}

/* Canvas del integrations — coherente */
#int-canvas {
  background: var(--black-card);
  border-color: var(--black-border);
}

/* Scroll line en hero */
.scroll-line {
  background: linear-gradient(to bottom, transparent, var(--ink-4));
}