/* ============================================================================
   InmoGest Pro — SISTEMA DE DISEÑO
   ----------------------------------------------------------------------------
   Estructura:
     01. Tokens          06. Navegación      11. Demo
     02. Reset y base    07. Hero            12. Testimonios
     03. Temas           08. Marquee         13. Precios
     04. Utilidades      09. Problema        14. Contacto
     05. Chrome (UI fija) 10. Módulos        15. Footer
     16. Responsive      17. Movimiento reducido

   El sitio alterna zonas oscuras y claras. En vez de duplicar reglas, cada
   sección declara .theme-dark o .theme-light y redefine las mismas variables
   semánticas: los componentes se escriben una sola vez.
   ============================================================================ */


/* ══ 01. TOKENS ══════════════════════════════════════════════════════════ */
:root {
  /* Marca */
  --ink-950: #04070F;
  --ink-900: #070D1C;
  --ink-850: #0A1229;
  --ink-800: #0D1B3E;
  --ink-700: #16264F;

  --gold-300: #F0DFA0;
  --gold-400: #E8C96A;
  --gold-500: #C8A84B;
  --gold-600: #A8883B;
  --gold-ink: #7A6429;

  --ivory-50:  #FAF9F6;
  --ivory-100: #F5F3EE;
  --ivory-200: #EDE9E0;
  --ivory-300: #E2DCD0;

  --cyan-400: #5EEAD4;
  --violet-400: #A78BFA;

  --ok:   #48BB78;
  --warn: #F6AD55;
  --bad:  #FC8181;

  /* Tipografía */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'DM Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'Space Grotesk', ui-monospace, monospace;

  /* Ritmo vertical */
  --section-y: clamp(80px, 10vw, 160px);
  --gutter: clamp(20px, 5vw, 80px);
  --max-w: 1280px;

  /* Curvas */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* Radios */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 32px;
}


/* ══ 02. RESET Y BASE ════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  background: var(--ink-950);
  color: var(--ivory-100);
  line-height: 1.6;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video, canvas { display: block; max-width: 100%; }

/* El [hidden] del navegador es `display:none` sin más, así que cualquier clase
   con `display` lo anula y el elemento sigue visible. Con !important el
   atributo vuelve a significar lo que dice. */
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--gold-500); color: var(--ink-900); }

:focus-visible {
  outline: 2px solid var(--gold-400);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Salto de navegación para teclado y lectores de pantalla */
.skip-link {
  position: absolute;
  top: -100px; left: 16px;
  z-index: 10001;
  background: var(--gold-500);
  color: var(--ink-900);
  padding: 12px 20px;
  border-radius: var(--r-sm);
  font-weight: 700;
  transition: top 0.2s ease;
}
.skip-link:focus { top: 16px; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}


/* ══ 03. TEMAS ═══════════════════════════════════════════════════════════ */
.theme-dark {
  --bg: var(--ink-900);
  --bg-2: var(--ink-850);
  --surface: rgba(255, 255, 255, 0.045);
  --surface-hover: rgba(255, 255, 255, 0.075);
  --border: rgba(255, 255, 255, 0.10);
  --border-strong: rgba(200, 168, 75, 0.32);
  --text: var(--ivory-100);
  --text-muted: rgba(245, 243, 238, 0.60);
  --text-dim: rgba(245, 243, 238, 0.34);
  --accent: var(--gold-400);
  --accent-solid: var(--gold-500);
  --on-accent: var(--ink-900);
  --shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  --glow: 0 0 80px rgba(200, 168, 75, 0.18);
  color: var(--text);
  background: var(--bg);
}

.theme-light {
  --bg: var(--ivory-100);
  --bg-2: var(--ivory-200);
  --surface: rgba(255, 255, 255, 0.70);
  --surface-hover: rgba(255, 255, 255, 0.92);
  --border: rgba(13, 27, 62, 0.10);
  --border-strong: rgba(200, 168, 75, 0.45);
  --text: var(--ink-800);
  --text-muted: rgba(13, 27, 62, 0.62);
  --text-dim: rgba(13, 27, 62, 0.40);
  --accent: var(--gold-ink);
  --accent-solid: var(--gold-500);
  --on-accent: var(--ink-900);
  --shadow: 0 24px 60px rgba(13, 27, 62, 0.10);
  --glow: 0 0 80px rgba(200, 168, 75, 0.14);
  color: var(--text);
  background: var(--bg);
}


/* ══ 04. UTILIDADES ══════════════════════════════════════════════════════ */
.section {
  position: relative;
  padding: var(--section-y) var(--gutter);
  isolation: isolate;
}

.container {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
}

/* Empalme entre zonas: cada sección hereda por arriba el color de la anterior
   y lo desvanece. Sin esto el salto oscuro↔claro se lee como un corte seco en
   lugar de como una transición.
   Las secciones son `isolation: isolate`, así que el z-index negativo queda
   por detrás del contenido pero por delante del fondo de la propia sección. */
.theme-dark + .theme-light::before,
.theme-light + .theme-dark::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  /* Más corto que el padding superior de la sección: si el degradado llegara
     hasta el encabezado, el texto claro quedaría sobre fondo oscuro. */
  height: clamp(70px, 8vw, 128px);
  z-index: -1;
  pointer-events: none;
}
.theme-dark + .theme-light::before {
  background: linear-gradient(180deg, var(--ink-900) 0%, rgba(7, 13, 28, 0) 100%);
}
.theme-light + .theme-dark::before {
  background: linear-gradient(180deg, var(--ivory-100) 0%, rgba(245, 243, 238, 0) 100%);
}

/* --- Cristal --- */
.glass {
  background: var(--surface);
  border: 1px solid var(--border);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-radius: var(--r-lg);
}

/* Borde degradado sin pseudo-hack: doble fondo + mask */
.glass--edge {
  position: relative;
}
.glass--edge::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(140deg,
    rgba(232, 201, 106, 0.55),
    rgba(232, 201, 106, 0.05) 38%,
    rgba(94, 234, 212, 0.18) 70%,
    rgba(232, 201, 106, 0.30));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

/* --- Encabezados de sección --- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 22px;
}
.eyebrow::before {
  content: '';
  width: 30px; height: 1px;
  background: currentColor;
  opacity: 0.6;
}

.h1 {
  font-family: var(--font-display);
  font-size: clamp(38px, 5.8vw, 82px);
  font-weight: 900;
  line-height: 0.98;
  letter-spacing: -0.02em;
}

.h2 {
  font-family: var(--font-display);
  font-size: clamp(32px, 5.2vw, 68px);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -0.015em;
  margin-bottom: 20px;
}

.h3 {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 700;
  line-height: 1.2;
}

.lead {
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.75;
  color: var(--text-muted);
  max-width: 58ch;
}

.text-accent { color: var(--accent); }

.text-italic {
  font-style: italic;
  color: var(--text-muted);
}

/* Degradado sobre texto — el acento "futurista" del titular */
.text-shine {
  background: linear-gradient(100deg,
    var(--gold-300) 0%, var(--gold-500) 32%,
    var(--gold-300) 50%, var(--gold-500) 68%, var(--gold-400) 100%);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shine 7s linear infinite;
}
@keyframes shine { to { background-position: 220% center; } }

.header-center { text-align: center; }
.header-center .eyebrow { justify-content: center; }
.header-center .eyebrow::before { display: none; }
.header-center .lead { margin-inline: auto; }

/* --- Botones --- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 30px;
  border: 1px solid transparent;
  border-radius: 100px;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  transition: transform 0.4s var(--ease-out-expo),
              box-shadow 0.4s var(--ease-out-expo),
              background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.btn__label { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 10px; }

.btn--primary {
  background: linear-gradient(135deg, var(--gold-400), var(--gold-600));
  color: var(--ink-900);
  box-shadow: 0 10px 30px rgba(200, 168, 75, 0.28);
}
/* Barrido de luz al pasar el cursor */
.btn--primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.55) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.7s var(--ease-out-expo);
}
.btn--primary:hover::after { transform: translateX(120%); }
.btn--primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 44px rgba(200, 168, 75, 0.42);
}

.btn--ghost {
  background: transparent;
  border-color: var(--border);
  color: var(--text);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.btn--ghost:hover {
  border-color: var(--border-strong);
  color: var(--accent);
  transform: translateY(-3px);
}

.btn--block { width: 100%; }
.btn--sm { padding: 12px 22px; font-size: 13px; }

/* --- Revelado al hacer scroll --- */
.reveal {
  opacity: 0;
  transform: translateY(38px);
  transition: opacity 0.9s var(--ease-out-expo), transform 0.9s var(--ease-out-expo);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }

.reveal--left  { transform: translateX(-40px); }
.reveal--right { transform: translateX(40px); }
.reveal--scale { transform: scale(0.94); }
.reveal--blur  { filter: blur(10px); transition: opacity 0.9s var(--ease-out-expo), transform 0.9s var(--ease-out-expo), filter 0.9s var(--ease-out-expo); }
.reveal--blur.is-visible { filter: blur(0); }

.reveal[data-delay="1"] { transition-delay: 0.08s; }
.reveal[data-delay="2"] { transition-delay: 0.16s; }
.reveal[data-delay="3"] { transition-delay: 0.24s; }
.reveal[data-delay="4"] { transition-delay: 0.32s; }
.reveal[data-delay="5"] { transition-delay: 0.40s; }

/* Revelado por líneas del titular: cada línea sube desde su máscara.
   El padding compensa el overflow:hidden, que si no recorta las colas de
   las letras en la cursiva de Playfair. */
.split-line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.09em;
  margin-bottom: -0.09em;
}
.split-line > span {
  display: block;
  transform: translateY(105%);
  transition: transform 1.1s var(--ease-out-expo);
}
.is-visible .split-line > span { transform: none; }
.split-line:nth-child(2) > span { transition-delay: 0.09s; }
.split-line:nth-child(3) > span { transition-delay: 0.18s; }
.split-line:nth-child(4) > span { transition-delay: 0.27s; }

/* --- Inclinación 3D --- */
.tilt {
  transform-style: preserve-3d;
  transition: transform 0.5s var(--ease-out-expo);
  will-change: transform;
}
.tilt__inner { transform: translateZ(38px); transform-style: preserve-3d; }

/* Brillo que sigue al cursor dentro de la tarjeta */
.tilt__sheen {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%),
              rgba(232, 201, 106, 0.16), transparent 62%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.tilt:hover .tilt__sheen { opacity: 1; }


/* ══ 05. CHROME (UI FIJA) ════════════════════════════════════════════════ */

/* Grano: rompe las bandas de los degradados grandes */
.noise {
  position: fixed;
  inset: 0;
  z-index: 9997;
  pointer-events: none;
  opacity: 0.22;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 100%;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--gold-600), var(--gold-300), var(--cyan-400));
  z-index: 9998;
  will-change: transform;
}
/* Donde exista, el navegador lo anima sin JS */
@supports (animation-timeline: scroll()) {
  .scroll-progress {
    animation: progressGrow linear;
    animation-timeline: scroll(root block);
  }
  @keyframes progressGrow { to { transform: scaleX(1); } }
}

/* --- Cursor: sólo con ratón real --- */
.cursor, .cursor-ring { display: none; }

@media (hover: hover) and (pointer: fine) {
  .cursor, .cursor-ring {
    display: block;
    position: fixed;
    top: 0; left: 0;
    border-radius: 50%;
    pointer-events: none;
    z-index: 10000;
    transform: translate3d(-50%, -50%, 0);
  }
  .cursor {
    width: 7px; height: 7px;
    background: var(--gold-300);
    mix-blend-mode: difference;
  }
  .cursor-ring {
    width: 38px; height: 38px;
    border: 1px solid rgba(200, 168, 75, 0.55);
    transition: width 0.35s var(--ease-out-expo), height 0.35s var(--ease-out-expo),
                border-color 0.3s ease, background 0.3s ease;
  }
  .cursor-ring.is-hover {
    width: 66px; height: 66px;
    border-color: rgba(232, 201, 106, 0.9);
    background: rgba(232, 201, 106, 0.08);
  }
  body.has-cursor { cursor: none; }
  /* Formularios y demo mantienen el cursor del sistema */
  body.has-cursor input, body.has-cursor textarea, body.has-cursor select,
  body.has-cursor #demoApp, body.has-cursor #demoApp *,
  body.has-cursor .modal, body.has-cursor .modal * { cursor: auto; }
  body.has-cursor #demoApp button, body.has-cursor .modal button { cursor: pointer; }
}

/* --- Cortina de entrada --- */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 10002;
  display: grid;
  place-items: center;
  background: var(--ink-950);
  transition: opacity 0.7s var(--ease-out-expo), visibility 0.7s;
}
.preloader.is-done { opacity: 0; visibility: hidden; }
/* Selector doble: .brand-mark fija 34px más abajo en la hoja y ganaría por orden */
.preloader .preloader__mark {
  width: 64px;
  height: 64px;
  animation: markPulse 1.6s var(--ease-in-out) infinite;
}
.preloader__bar {
  position: absolute;
  bottom: 34%;
  width: min(220px, 40vw);
  height: 1px;
  background: rgba(255, 255, 255, 0.10);
  overflow: hidden;
}
.preloader__bar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, var(--gold-400), transparent);
  animation: barSweep 1.3s var(--ease-in-out) infinite;
}
@keyframes markPulse { 0%, 100% { opacity: 0.45; transform: scale(0.97); } 50% { opacity: 1; transform: scale(1); } }
@keyframes barSweep { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* --- Volver arriba --- */
.to-top {
  position: fixed;
  right: 26px; bottom: 26px;
  width: 50px; height: 50px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(200, 168, 75, 0.35);
  border-radius: 50%;
  background: rgba(13, 27, 62, 0.7);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--gold-400);
  cursor: pointer;
  z-index: 900;
  opacity: 0;
  transform: translateY(14px) scale(0.9);
  transition: opacity 0.4s var(--ease-out-expo), transform 0.4s var(--ease-out-expo),
              box-shadow 0.3s ease;
}
.to-top.is-visible { opacity: 1; transform: none; }
.to-top:hover { box-shadow: 0 0 28px rgba(200, 168, 75, 0.4); }
body.is-locked .to-top { display: none; }


/* ══ 06. NAVEGACIÓN ══════════════════════════════════════════════════════ */
.nav {
  position: fixed;
  top: 14px; left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 2 * var(--gutter));
  max-width: var(--max-w);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 10px 12px 10px 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 100px;
  background: rgba(7, 13, 28, 0.55);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  transition: background 0.5s ease, border-color 0.5s ease,
              box-shadow 0.5s ease, transform 0.5s var(--ease-out-expo);
}
.nav.is-scrolled {
  background: rgba(7, 13, 28, 0.82);
  border-color: rgba(200, 168, 75, 0.18);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35);
}
/* Sobre las zonas claras el cristal se invierte */
.nav.is-on-light {
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(13, 27, 62, 0.10);
  box-shadow: 0 14px 40px rgba(13, 27, 62, 0.10);
}
.nav.is-on-light .nav__name { color: var(--ink-800); }
.nav.is-on-light .nav__link { color: rgba(13, 27, 62, 0.62); }
.nav.is-on-light .nav__link:hover,
.nav.is-on-light .nav__link.is-active { color: var(--ink-800); }
.nav.is-on-light .nav__burger span { background: var(--ink-800); }
.nav.is-hidden { transform: translateX(-50%) translateY(-140%); }

.nav__brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

/* --- Isotipo ---------------------------------------------------------------
   El logo tiene dos versiones que no son un simple cambio de color: sobre claro
   los edificios son azules con ventanas marfil y la flecha dorada; sobre oscuro
   se invierten. En vez de duplicar 30 rectángulos por cada sitio donde aparece,
   el SVG se define una vez (<symbol> en index.html) y aquí solo se declaran los
   tres colores. Basta con redefinirlos para recolorear la marca entera.

   Se registran como @property para que el cambio se interpole en vez de saltar:
   una custom property sin tipo declarado no es animable. */
@property --mark-bar   { syntax: '<color>'; inherits: true; initial-value: #C8A84B; }
@property --mark-win   { syntax: '<color>'; inherits: true; initial-value: #0D1B3E; }
@property --mark-arrow { syntax: '<color>'; inherits: true; initial-value: #F5F3EE; }

.brand-mark {
  --mark-bar: var(--gold-500);
  --mark-win: var(--ink-800);
  --mark-arrow: var(--ivory-100);
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  overflow: visible;
  transition: --mark-bar 0.45s ease, --mark-win 0.45s ease, --mark-arrow 0.45s ease;
}

.theme-light .brand-mark,
.nav.is-on-light .brand-mark {
  --mark-bar: var(--ink-800);
  --mark-win: var(--ivory-100);
  --mark-arrow: var(--gold-500);
}

/* Dentro del demo la ventana de la app siempre es oscura, no sigue al tema */
.brand-mark--fixed-dark {
  --mark-bar: var(--gold-500) !important;
  --mark-win: var(--ink-800) !important;
  --mark-arrow: var(--ivory-100) !important;
  width: 26px;
  height: 26px;
}
.nav__name {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 900;
  letter-spacing: 0.01em;
  color: var(--ivory-100);
  line-height: 1;
  transition: color 0.4s ease;
}
.nav__name em { font-style: normal; color: var(--gold-400); }
.nav__tag {
  display: block;
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(200, 168, 75, 0.62);
  margin-top: 3px;
}

.nav__links { display: flex; align-items: center; gap: 6px; }
.nav__link {
  position: relative;
  padding: 9px 15px;
  border-radius: 100px;
  font-size: 13.5px;
  font-weight: 500;
  color: rgba(245, 243, 238, 0.62);
  transition: color 0.25s ease, background 0.25s ease;
}
.nav__link:hover { color: var(--ivory-100); background: rgba(255, 255, 255, 0.06); }
.nav__link.is-active { color: var(--gold-400); }
.nav__link.is-active::after {
  content: '';
  position: absolute;
  left: 50%; bottom: 3px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--gold-400);
  transform: translateX(-50%);
}

.nav__actions { display: flex; align-items: center; gap: 8px; }

.nav__burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 12px 10px;
  background: none;
  border: none;
  cursor: pointer;
}
.nav__burger span {
  display: block;
  width: 22px; height: 1.5px;
  background: var(--ivory-100);
  transition: transform 0.35s var(--ease-out-expo), opacity 0.2s ease;
}
body.is-menu-open .nav__burger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
body.is-menu-open .nav__burger span:nth-child(2) { opacity: 0; }
body.is-menu-open .nav__burger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* --- Menú móvil --- */
.menu {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 100px var(--gutter) 40px;
  background: rgba(4, 7, 15, 0.94);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s var(--ease-out-expo), visibility 0.5s;
}
.menu.is-open { opacity: 1; visibility: visible; }
.menu__link {
  font-family: var(--font-display);
  font-size: clamp(30px, 9vw, 46px);
  font-weight: 700;
  color: var(--ivory-100);
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s var(--ease-out-expo), transform 0.6s var(--ease-out-expo), color 0.25s ease;
}
.menu.is-open .menu__link { opacity: 1; transform: none; }
.menu.is-open .menu__link:nth-child(1) { transition-delay: 0.06s; }
.menu.is-open .menu__link:nth-child(2) { transition-delay: 0.12s; }
.menu.is-open .menu__link:nth-child(3) { transition-delay: 0.18s; }
.menu.is-open .menu__link:nth-child(4) { transition-delay: 0.24s; }
.menu.is-open .menu__link:nth-child(5) { transition-delay: 0.30s; }
.menu__link:hover { color: var(--gold-400); }
.menu__cta { margin-top: 28px; }


/* ══ 07. HERO ════════════════════════════════════════════════════════════ */
.hero {
  position: relative;
  /* Sin contexto de apilamiento propio, las capas de fondo (shader, malla,
     partículas) llevan z-index negativo y se pintan DETRÁS del fondo opaco
     de la sección: se dibujan en el canvas pero no se ven en pantalla. */
  isolation: isolate;
  min-height: 100svh;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: clamp(32px, 5vw, 80px);
  padding: clamp(112px, 13vh, 148px) var(--gutter) clamp(56px, 8vh, 88px);
  overflow: hidden;
}

/* Gradiente de malla animado: tres focos que respiran a ritmos distintos */
.hero__mesh {
  position: absolute;
  inset: -20%;
  z-index: -3;
  background:
    radial-gradient(40% 44% at 20% 24%, rgba(200, 168, 75, 0.30), transparent 64%),
    radial-gradient(36% 40% at 84% 18%, rgba(94, 234, 212, 0.16), transparent 62%),
    radial-gradient(50% 54% at 70% 84%, rgba(118, 76, 232, 0.22), transparent 66%),
    radial-gradient(64% 64% at 46% 52%, rgba(22, 38, 79, 0.95), transparent 72%);
  filter: blur(34px);
  animation: meshDrift 26s var(--ease-in-out) infinite alternate;
}
@keyframes meshDrift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-3%, 2%, 0) scale(1.06); }
  100% { transform: translate3d(2%, -3%, 0) scale(1.02); }
}

/* Lienzo de partículas 3D (lo dibuja motion.js).
   width/height explícitos: <canvas> es un elemento reemplazado, así que
   `inset:0` lo posiciona pero no lo estira — se quedaría en 300×150. */
.hero__canvas {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  opacity: 0.75;
}

/* Rejilla en perspectiva: el "suelo" futurista */
.hero__grid {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(rgba(200, 168, 75, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200, 168, 75, 0.055) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(75% 65% at 50% 42%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(75% 65% at 50% 42%, #000 20%, transparent 78%);
  animation: gridDrift 32s linear infinite;
}
@keyframes gridDrift { to { background-position: 68px 68px; } }

.hero__vignette {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(125% 95% at 50% 0%, transparent 46%, rgba(4, 7, 15, 0.42) 100%),
    linear-gradient(180deg, transparent 72%, var(--ink-950) 100%);
}

.hero__content { position: relative; z-index: 2; max-width: 660px; }

/* Entrada escalonada: se dispara al retirarse la cortina (motion.js) */
.hero__badge, .hero__desc, .hero__actions, .hero__stats {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s var(--ease-out-expo), transform 0.9s var(--ease-out-expo);
}
.hero__content.is-visible .hero__badge,
.hero__content.is-visible .hero__desc,
.hero__content.is-visible .hero__actions,
.hero__content.is-visible .hero__stats { opacity: 1; transform: none; }

.hero__content.is-visible .hero__desc    { transition-delay: 0.42s; }
.hero__content.is-visible .hero__actions { transition-delay: 0.52s; }
.hero__content.is-visible .hero__stats   { transition-delay: 0.62s; }

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 16px 7px 10px;
  margin-bottom: 26px;
  border: 1px solid rgba(200, 168, 75, 0.25);
  border-radius: 100px;
  background: rgba(200, 168, 75, 0.07);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-300);
}
.hero__pulse {
  position: relative;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ok);
  flex-shrink: 0;
}
.hero__pulse::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--ok);
  animation: pulseRing 2.2s var(--ease-out-expo) infinite;
}
@keyframes pulseRing {
  0%   { transform: scale(0.6); opacity: 1; }
  100% { transform: scale(1.9); opacity: 0; }
}

.hero__title { margin-bottom: 26px; }
.hero__desc { margin-bottom: 38px; font-size: clamp(16px, 1.35vw, 19px); }

.hero__actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.hero__stats {
  display: flex;
  gap: clamp(24px, 4vw, 52px);
  flex-wrap: wrap;
  padding-top: 26px;
  border-top: 1px solid var(--border);
}
.hero__stat-num {
  font-family: var(--font-mono);
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 700;
  line-height: 1;
  color: var(--gold-400);
  letter-spacing: -0.02em;
}
.hero__stat-label {
  font-size: 12.5px;
  color: var(--text-dim);
  margin-top: 8px;
  letter-spacing: 0.02em;
}

/* --- Panel flotante del hero --- */
.hero__visual {
  position: relative;
  z-index: 2;
  perspective: 1400px;
}

.panel {
  position: relative;
  padding: 24px;
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(26px) saturate(150%);
  -webkit-backdrop-filter: blur(26px) saturate(150%);
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  animation: floatY 7s var(--ease-in-out) infinite;
}
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}

.panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.panel__title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-400);
}
.panel__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border: 1px solid rgba(72, 187, 120, 0.3);
  border-radius: 100px;
  background: rgba(72, 187, 120, 0.10);
  font-size: 10px;
  font-weight: 700;
  color: var(--ok);
}
.panel__badge i {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
  animation: blink 1.8s ease-in-out infinite;
}
@keyframes blink { 50% { opacity: 0.25; } }

.panel__kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; }
.panel__kpi {
  padding: 15px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.panel__kpi-val {
  font-family: var(--font-mono);
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}
.panel__kpi-label { font-size: 11px; color: var(--text-dim); margin-top: 6px; }
.panel__kpi-trend { font-size: 11px; font-weight: 600; color: var(--ok); margin-top: 6px; }

.panel__chart {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 78px;
  margin-bottom: 18px;
}
.panel__bar {
  flex: 1;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, rgba(200, 168, 75, 0.42), rgba(200, 168, 75, 0.10));
  transform-origin: bottom;
  animation: barRise 1s var(--ease-out-expo) both;
}
.panel__bar.is-peak {
  background: linear-gradient(180deg, var(--gold-300), var(--gold-600));
  box-shadow: 0 0 22px rgba(232, 201, 106, 0.5);
}
@keyframes barRise { from { transform: scaleY(0); } to { transform: scaleY(1); } }

.panel__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 0;
  font-size: 12.5px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.panel__row:last-child { border-bottom: none; }
.panel__row span:first-child { display: flex; align-items: center; gap: 9px; color: var(--text-muted); }
.panel__row b { font-weight: 600; }
.dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.dot--ok   { background: var(--ok); }
.dot--warn { background: var(--gold-400); }
.dot--bad  { background: var(--bad); }

/* Tarjetas satélite */
.chip {
  position: absolute;
  padding: 13px 17px;
  border-radius: var(--r-md);
  background: rgba(13, 27, 62, 0.72);
  border: 1px solid rgba(200, 168, 75, 0.22);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.45);
  z-index: 3;
}
.chip--a { left: -8%; bottom: -6%; animation: floatY 6s var(--ease-in-out) infinite 0.4s; }
.chip--b { right: -6%; top: -5%; animation: floatY 8s var(--ease-in-out) infinite 1.1s; }
.chip__label {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-400);
  margin-bottom: 5px;
}
.chip__val { font-family: var(--font-mono); font-size: 18px; font-weight: 700; }
.chip__sub { font-size: 10.5px; color: var(--ok); margin-top: 3px; }

/* Indicador de scroll */
.hero__scroll {
  position: absolute;
  left: 50%; bottom: 26px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--text-dim);
  z-index: 2;
}
.hero__scroll i {
  width: 1px; height: 42px;
  background: linear-gradient(180deg, var(--gold-400), transparent);
  animation: scrollHint 2.2s var(--ease-in-out) infinite;
}
@keyframes scrollHint {
  0%, 100% { transform: scaleY(0.3); transform-origin: top; opacity: 0.4; }
  50%      { transform: scaleY(1);   transform-origin: top; opacity: 1; }
}


/* ══ 08. MARQUEE ═════════════════════════════════════════════════════════ */
.marquee {
  position: relative;
  overflow: hidden;
  padding: 15px 0;
  background: linear-gradient(90deg, var(--gold-600), var(--gold-400), var(--gold-600));
  color: var(--ink-900);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 34s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding: 0 26px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}
.marquee__item::after {
  content: '';
  width: 4px; height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.45;
}


/* ══ 09. PROBLEMA / SOLUCIÓN ═════════════════════════════════════════════ */
.why__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
  margin-top: 68px;
}

.pains { padding: 34px; }
.pains__label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--bad);
  margin-bottom: 22px;
}
.pains__label::before { content: ''; width: 22px; height: 1px; background: currentColor; }

.pain {
  display: flex;
  gap: 15px;
  padding: 17px 0;
  border-bottom: 1px solid var(--border);
}
.pain:last-child { border-bottom: none; }
.pain__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 34px; height: 34px;
  border-radius: 10px;
  background: rgba(252, 129, 129, 0.08);
  border: 1px solid rgba(252, 129, 129, 0.16);
  font-size: 15px;
}
.pain__text { font-size: 14.5px; line-height: 1.62; color: var(--text-muted); }
.pain__text strong { color: var(--text); font-weight: 600; }

.solutions { display: flex; flex-direction: column; gap: 30px; }
.solution { display: flex; gap: 22px; align-items: flex-start; }
.solution__num {
  font-family: var(--font-mono);
  font-size: 34px;
  font-weight: 700;
  line-height: 0.9;
  color: var(--accent);
  opacity: 0.42;
  flex-shrink: 0;
  min-width: 48px;
}
.solution__title { font-family: var(--font-display); font-size: 21px; font-weight: 700; margin-bottom: 7px; }
.solution__desc { font-size: 14.5px; line-height: 1.68; color: var(--text-muted); }


/* ══ 10. CAPACIDADES Y MÓDULOS ═══════════════════════════════════════════ */
.capabilities {
  background:
    radial-gradient(70% 60% at 50% 0%, rgba(200, 168, 75, 0.10), transparent 70%),
    var(--ink-900);
}

.cap-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 62px;
}

.cap {
  position: relative;
  padding: 30px 26px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  overflow: hidden;
  transition: transform 0.5s var(--ease-out-expo), border-color 0.4s ease, background 0.4s ease;
}
.cap:hover {
  transform: translateY(-6px);
  border-color: var(--border-strong);
  background: var(--surface-hover);
}
.cap__icon {
  display: grid;
  place-items: center;
  width: 50px; height: 50px;
  margin-bottom: 18px;
  border-radius: 14px;
  background: rgba(200, 168, 75, 0.10);
  border: 1px solid rgba(200, 168, 75, 0.22);
  color: var(--gold-400);
}
.cap__num {
  font-family: var(--font-mono);
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 9px;
}
.cap__label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-400);
  margin-bottom: 9px;
}
.cap__desc { font-size: 13.5px; line-height: 1.62; color: var(--text-muted); }

/* --- Módulos --- */
.modules-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 62px;
  perspective: 1600px;
}

.module {
  position: relative;
  padding: 34px 30px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow: hidden;
  box-shadow: 0 2px 20px rgba(13, 27, 62, 0.04);
}
.module::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--gold-500), var(--gold-300), transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s var(--ease-out-expo);
}
.module:hover::before { transform: scaleX(1); }

.module__icon {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  margin-bottom: 20px;
  border-radius: 15px;
  background: linear-gradient(140deg, rgba(200, 168, 75, 0.16), rgba(200, 168, 75, 0.04));
  border: 1px solid rgba(200, 168, 75, 0.24);
  color: var(--accent);
  transition: transform 0.5s var(--ease-out-back), box-shadow 0.4s ease;
}
.module:hover .module__icon {
  transform: translateZ(30px) scale(1.06) rotate(-4deg);
  box-shadow: 0 12px 30px rgba(200, 168, 75, 0.24);
}
.module__title { font-family: var(--font-display); font-size: 21px; font-weight: 700; margin-bottom: 10px; }
.module__desc { font-size: 14px; line-height: 1.66; color: var(--text-muted); margin-bottom: 20px; }
.module__list { display: flex; flex-direction: column; gap: 9px; }
.module__list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  color: var(--text-muted);
}
.module__list li::before {
  content: '';
  flex-shrink: 0;
  width: 14px; height: 1px;
  margin-top: 10px;
  background: var(--accent-solid);
}

/* --- Aviso de prueba gratuita ---
   Panel flotante, no modal: no lleva capa que oscurezca ni bloquea el scroll.
   Aparece dentro de la escena del proceso, donde lo que se busca es justo que
   el visitante siga bajando hasta el demo. */
.trial-pop {
  position: fixed;
  right: 26px;
  bottom: 26px;
  z-index: 940;
  width: min(342px, calc(100vw - 32px));
  padding: 24px 22px 20px;
  border-radius: var(--r-lg);
  background: rgba(10, 18, 41, 0.86);
  border: 1px solid rgba(200, 168, 75, 0.30);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  color: var(--ivory-100);
  opacity: 0;
  visibility: hidden;
  transform: translateY(22px) scale(0.96);
  transition: opacity 0.6s var(--ease-out-expo),
              transform 0.6s var(--ease-out-expo),
              visibility 0.6s;
}
.trial-pop.is-open { opacity: 1; visibility: visible; transform: none; }

/* Halo dorado detrás para que despegue del fondo oscuro */
.trial-pop::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: radial-gradient(120% 90% at 80% 0%, rgba(200, 168, 75, 0.16), transparent 62%);
  pointer-events: none;
}

.trial-pop__close {
  position: absolute;
  top: 12px; right: 12px;
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(245, 243, 238, 0.55);
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
}
.trial-pop__close:hover { background: rgba(255, 255, 255, 0.14); color: var(--ivory-100); }

.trial-pop__badge {
  display: inline-block;
  margin-bottom: 12px;
  padding: 4px 12px;
  border-radius: 100px;
  background: rgba(200, 168, 75, 0.14);
  border: 1px solid rgba(200, 168, 75, 0.26);
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-300);
}
.trial-pop__title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 900;
  line-height: 1.15;
  margin-bottom: 10px;
}
.trial-pop__title span { color: var(--gold-400); }
.trial-pop__text {
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(245, 243, 238, 0.62);
  margin-bottom: 18px;
}
.trial-pop__actions { display: grid; gap: 12px; }
.trial-pop__link {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--gold-400);
  text-align: center;
  transition: color 0.25s ease;
}
.trial-pop__link:hover { color: var(--gold-300); }

/* Con el aviso abierto, el botón de volver arriba estorbaría */
body.has-trial .to-top { opacity: 0; pointer-events: none; }

@media (max-width: 680px) {
  .trial-pop {
    right: 12px;
    left: 12px;
    bottom: 12px;
    width: auto;
    padding: 20px 18px 18px;
  }
  .trial-pop__title { font-size: 20px; }
}


/* ══ 11. DEMO ════════════════════════════════════════════════════════════ */
.demo-section {
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(94, 234, 212, 0.07), transparent 70%),
    var(--ink-950);
}

/* Tarjeta flotante: el demo se lee como una ventana de la aplicación real
   suspendida sobre la página, no como un bloque incrustado. */
.demo-shell {
  max-width: 1180px;
  margin: 56px auto 0;
  border: 1px solid rgba(200, 168, 75, 0.20);
  border-radius: var(--r-xl);
  overflow: hidden;
  background: rgba(7, 13, 28, 0.72);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  isolation: isolate;
}

.demo-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 54px;
  padding: 0 20px;
  background: rgba(10, 18, 41, 0.9);
  border-bottom: 1px solid rgba(200, 168, 75, 0.12);
}
.demo-bar__brand { display: flex; align-items: center; gap: 11px; min-width: 0; }
.demo-bar__name { font-family: var(--font-display); font-size: 15px; font-weight: 900; }
.demo-bar__name em { font-style: normal; color: var(--gold-400); }
.demo-bar__pill {
  padding: 3px 10px;
  border: 1px solid rgba(200, 168, 75, 0.28);
  border-radius: 100px;
  background: rgba(200, 168, 75, 0.10);
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--gold-400);
}
.demo-bar__right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.demo-bar__user { font-size: 12px; color: var(--text-dim); white-space: nowrap; }
.demo-reset {
  padding: 6px 13px;
  border: 1px solid rgba(252, 129, 129, 0.24);
  border-radius: 8px;
  background: rgba(252, 129, 129, 0.09);
  color: var(--bad);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.25s ease;
}
.demo-reset:hover { background: rgba(252, 129, 129, 0.18); }

.demo-body { display: flex; height: 620px; }

.demo-side {
  flex-shrink: 0;
  width: 208px;
  padding: 18px 0;
  background: rgba(4, 7, 15, 0.66);
  border-right: 1px solid rgba(255, 255, 255, 0.05);
  overflow: hidden;
}
.demo-side__label {
  padding: 0 18px;
  margin-bottom: 12px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(200, 168, 75, 0.55);
}
#demoNav { display: flex; flex-direction: column; gap: 2px; padding: 0 10px; }

.demo-nav-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 11px 14px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: rgba(245, 243, 238, 0.55);
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.25s ease, background 0.25s ease;
}
.demo-nav-btn:hover { color: var(--ivory-100); background: rgba(255, 255, 255, 0.045); }
.demo-nav-btn.is-active {
  color: var(--gold-400);
  background: rgba(200, 168, 75, 0.10);
  font-weight: 700;
}
.demo-nav-btn.is-active::before {
  content: '';
  position: absolute;
  left: 0; top: 22%; bottom: 22%;
  width: 2px;
  border-radius: 2px;
  background: var(--gold-400);
}
.demo-nav-btn i { font-style: normal; font-size: 15px; flex-shrink: 0; }

.demo-main {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  overflow-x: hidden;
  background: rgba(10, 18, 41, 0.5);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(200, 168, 75, 0.3) transparent;
}
.demo-main::-webkit-scrollbar { width: 8px; }
.demo-main::-webkit-scrollbar-thumb { background: rgba(200, 168, 75, 0.26); border-radius: 8px; }

.demo-tab { padding: 26px; }
.demo-tab[hidden] { display: none; }

.demo-tab__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.demo-tab__title { font-family: var(--font-display); font-size: 21px; font-weight: 700; }
.demo-tab__sub { font-size: 12px; color: var(--text-dim); margin-top: 3px; }

.demo-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 22px; }
.demo-kpis--3 { grid-template-columns: repeat(3, 1fr); }
.demo-kpi {
  padding: 18px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.07);
  text-align: center;
  transition: border-color 0.3s ease, transform 0.4s var(--ease-out-expo);
}
.demo-kpi:hover { border-color: rgba(200, 168, 75, 0.28); transform: translateY(-3px); }
.demo-kpi--alert { border-color: rgba(252, 129, 129, 0.24); }
.demo-kpi__icon { font-size: 19px; margin-bottom: 8px; }
.demo-kpi__val {
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}
.demo-kpi__label { font-size: 11px; color: var(--text-dim); margin-top: 7px; }

.demo-card {
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
.demo-card + .demo-card { margin-top: 14px; }
.demo-card__head {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(200, 168, 75, 0.045);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-400);
}

.demo-empty { padding: 52px 20px; text-align: center; color: var(--text-dim); font-size: 13.5px; }
.demo-empty__icon { font-size: 34px; margin-bottom: 12px; }

.demo-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; }
.demo-list { display: flex; flex-direction: column; gap: 11px; }

.demo-row {
  padding: 15px 18px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: border-color 0.3s ease, background 0.3s ease;
}
.demo-row:hover { border-color: rgba(200, 168, 75, 0.22); background: rgba(255, 255, 255, 0.05); }

.demo-row__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.demo-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--gold-400);
}
.demo-badge {
  padding: 3px 11px;
  border-radius: 100px;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}
.badge-Disponible { background: rgba(72,187,120,0.14);  color: var(--ok);   border: 1px solid rgba(72,187,120,0.24); }
.badge-Reservado  { background: rgba(246,173,85,0.14);  color: var(--warn); border: 1px solid rgba(246,173,85,0.24); }
.badge-Prometido  { background: rgba(99,179,237,0.14);  color: #63B3ED;     border: 1px solid rgba(99,179,237,0.24); }
.badge-Escriturado{ background: rgba(167,139,250,0.14); color: var(--violet-400); border: 1px solid rgba(167,139,250,0.24); }

.demo-name { font-size: 15px; font-weight: 700; }
.demo-meta { font-size: 12px; color: var(--text-dim); margin-top: 3px; }
.demo-amount { font-family: var(--font-mono); font-size: 17px; font-weight: 700; color: var(--gold-400); margin-top: 9px; }

.demo-avatar {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--ink-700), rgba(200, 168, 75, 0.22));
  border: 1px solid rgba(200, 168, 75, 0.24);
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 700;
  color: var(--gold-400);
}

.score {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.score__ring {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 2px solid;
  font-family: var(--font-mono);
  font-size: 17px;
  font-weight: 700;
}
.score__label { font-size: 9px; font-weight: 700; letter-spacing: 0.04em; text-align: center; }

.progress-wrap { flex: 1; max-width: 170px; }
.progress-track { height: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.progress-bar {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--gold-600), var(--gold-300));
  transition: width 0.8s var(--ease-out-expo);
}
.progress-txt { font-size: 10px; color: var(--text-dim); margin-top: 5px; text-align: right; }

.demo-btn {
  padding: 10px 18px;
  border: none;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--gold-400), var(--gold-600));
  color: var(--ink-900);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.3s var(--ease-out-expo), box-shadow 0.3s ease;
}
.demo-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(200, 168, 75, 0.3); }
.demo-btn--ghost {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--text-muted);
}
.demo-btn--ghost:hover { border-color: rgba(255, 255, 255, 0.3); color: var(--ivory-100); box-shadow: none; }

/* Filas compuestas */
.demo-row--flex { display: flex; align-items: center; gap: 15px; }
.demo-row--ok { border-color: rgba(72, 187, 120, 0.18); }
.demo-row__body { flex: 1; min-width: 0; }
.demo-row__body .demo-name,
.demo-row__body .demo-meta { overflow-wrap: anywhere; }
.demo-row__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.demo-row__foot b { color: var(--ivory-100); font-weight: 600; }

/* Actividad reciente */
.demo-activity {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  font-size: 13px;
  color: var(--text-muted);
  border-bottom: 1px solid rgba(255, 255, 255, 0.045);
}
.demo-activity:last-child { border-bottom: none; }
.demo-activity span { flex: 1; min-width: 0; }
.demo-activity time { flex-shrink: 0; font-size: 11px; color: var(--text-dim); }

/* Inventario */
.demo-vac { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 18px; }
.demo-vac__cell { text-align: center; }
.demo-vac__cell b { font-family: var(--font-mono); font-size: 26px; font-weight: 700; display: block; line-height: 1; }
.demo-vac__cell span { display: block; font-size: 11px; color: var(--text-dim); margin-top: 6px; }
.demo-vac__cell i { display: block; height: 3px; border-radius: 3px; margin-top: 9px; }
.demo-vac__foot { padding: 0 18px 16px; font-size: 12px; color: var(--text-dim); }


/* ══ MODALES (demo y legales) ════════════════════════════════════════════ */
.modal {
  position: fixed;
  inset: 0;
  z-index: 9500;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(2, 4, 10, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.modal.is-open { display: flex; }
.modal__box {
  width: 100%;
  max-width: 540px;
  max-height: 90svh;
  overflow-y: auto;
  border-radius: var(--r-lg);
  background: rgba(13, 22, 48, 0.97);
  border: 1px solid rgba(200, 168, 75, 0.22);
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.6);
  animation: modalIn 0.45s var(--ease-out-expo);
}
.modal__box--wide { max-width: 760px; }
@keyframes modalIn {
  from { opacity: 0; transform: translateY(28px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}
.modal__head {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  background: inherit;
  border-bottom: 1px solid rgba(200, 168, 75, 0.12);
  font-size: 15px;
  font-weight: 700;
}
.modal__close {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 32px; height: 32px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
}
.modal__close:hover { background: rgba(252, 129, 129, 0.18); color: var(--bad); }
.modal__body { padding: 20px; }
.modal__foot {
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 20px;
  background: inherit;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* Formularios del demo */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field__label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.field__input {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid rgba(200, 168, 75, 0.16);
  border-radius: 9px;
  background: rgba(4, 7, 15, 0.6);
  color: var(--ivory-100);
  font-size: 13.5px;
  outline: none;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.field__input:focus {
  border-color: var(--gold-500);
  box-shadow: 0 0 0 3px rgba(200, 168, 75, 0.14);
}
.field__input option { background: #0D1630; }
textarea.field__input { resize: vertical; min-height: 76px; }

.demo-note {
  padding: 12px 14px;
  margin-bottom: 14px;
  border: 1px solid rgba(200, 168, 75, 0.16);
  border-radius: 10px;
  background: rgba(200, 168, 75, 0.05);
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
}

/* Aviso flotante */
.toast {
  position: fixed;
  left: 50%; bottom: 34px;
  transform: translateX(-50%) translateY(20px);
  z-index: 9999;
  padding: 13px 24px;
  border-radius: 100px;
  background: linear-gradient(135deg, var(--gold-400), var(--gold-600));
  color: var(--ink-900);
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 16px 40px rgba(200, 168, 75, 0.3);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s var(--ease-out-expo), transform 0.45s var(--ease-out-expo);
  max-width: min(88vw, 460px);
  text-align: center;
}
.toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Contenido legal */
.legal h4 { color: var(--gold-400); font-size: 15px; margin: 22px 0 8px; }
.legal h4:first-of-type { margin-top: 0; }
.legal p { font-size: 13.5px; line-height: 1.75; color: var(--text-muted); margin-bottom: 10px; }
.legal strong { color: var(--ivory-100); }
.legal a { color: var(--gold-400); text-decoration: underline; }


/* ══ 12. TESTIMONIOS ═════════════════════════════════════════════════════ */
.proof__rail {
  margin-top: 54px;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.proof__track {
  display: flex;
  gap: 20px;
  width: max-content;
  animation: marquee 46s linear infinite;
}
.proof__rail:hover .proof__track { animation-play-state: paused; }

.quote {
  width: min(384px, 82vw);
  flex-shrink: 0;
  padding: 28px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.quote__stars { color: var(--accent-solid); font-size: 13px; letter-spacing: 0.2em; margin-bottom: 14px; }
.quote__text { font-size: 15px; line-height: 1.7; font-style: italic; color: var(--text); margin-bottom: 22px; }
.quote__author { display: flex; align-items: center; gap: 13px; }
.quote__avatar {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--bg-2), rgba(200, 168, 75, 0.2));
  border: 1px solid var(--border-strong);
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
}
.quote__name { font-size: 14px; font-weight: 600; }
.quote__role { font-size: 12px; color: var(--text-dim); margin-top: 2px; }


/* ══ 13. PRECIOS ═════════════════════════════════════════════════════════ */
.currency-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 34px;
}
.currency-bar__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.currency-select {
  padding: 9px 16px;
  border: 1px solid var(--border-strong);
  border-radius: 100px;
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  outline: none;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.currency-select:focus { box-shadow: 0 0 0 3px rgba(200, 168, 75, 0.16); }

.currency-note {
  margin: 12px auto 0;
  max-width: 52ch;
  text-align: center;
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.6;
}

.plan-toggle {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin: 30px auto 44px;
  padding: 5px;
  width: fit-content;
  max-width: 100%;
  border: 1px solid var(--border);
  border-radius: 100px;
  background: var(--surface);
  flex-wrap: wrap;
}
.plan-toggle__btn {
  padding: 11px 24px;
  border: none;
  border-radius: 100px;
  background: transparent;
  color: var(--text-muted);
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.35s var(--ease-out-expo), color 0.3s ease, box-shadow 0.3s ease;
}
.plan-toggle__btn.is-active {
  background: linear-gradient(135deg, var(--gold-400), var(--gold-600));
  color: var(--ink-900);
  box-shadow: 0 8px 22px rgba(200, 168, 75, 0.26);
}

.plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: start;
  perspective: 1600px;
}

.plan {
  position: relative;
  padding: 38px 30px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  overflow: hidden;
}
.plan--featured {
  border-color: var(--border-strong);
  background: var(--surface-hover);
  box-shadow: 0 24px 60px rgba(200, 168, 75, 0.14);
}
.plan__flag {
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  padding: 5px 18px;
  border-radius: 0 0 12px 12px;
  background: linear-gradient(135deg, var(--gold-400), var(--gold-600));
  color: var(--ink-900);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}
.plan__name {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
}
.plan__price { display: flex; align-items: flex-start; gap: 5px; }
.plan__currency { font-size: 19px; font-weight: 600; color: var(--text-dim); margin-top: 9px; }
.plan__amount {
  font-family: var(--font-mono);
  font-size: clamp(40px, 4.4vw, 52px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
}
.plan__period { font-size: 13px; color: var(--text-dim); align-self: flex-end; padding-bottom: 8px; }
.plan__local {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  margin-top: 8px;
  min-height: 18px;
}
.plan__desc { font-size: 14px; line-height: 1.62; color: var(--text-muted); margin: 18px 0 26px; }
.plan__sep { height: 1px; background: var(--border); margin-bottom: 26px; }
.plan__features { display: flex; flex-direction: column; gap: 13px; margin-bottom: 34px; }
.plan__features li { display: flex; gap: 11px; font-size: 14px; color: var(--text-muted); }
.plan__features svg { flex-shrink: 0; margin-top: 3px; color: var(--accent-solid); }

/* Licencia perpetua */
.license {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: start;
  max-width: 940px;
  margin-inline: auto;
}
.license__card {
  padding: 40px 32px;
  border-radius: var(--r-lg);
  background: var(--surface-hover);
  border: 1px solid var(--border-strong);
  box-shadow: 0 30px 70px rgba(200, 168, 75, 0.14);
}
.license__flag {
  display: inline-block;
  padding: 5px 15px;
  margin-bottom: 18px;
  border-radius: 100px;
  background: rgba(200, 168, 75, 0.14);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
}
.license__amount {
  font-family: var(--font-mono);
  font-size: clamp(42px, 5vw, 58px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
}
.license__meta { font-size: 15px; color: var(--text-dim); margin-top: 8px; }
.license__local { font-family: var(--font-mono); font-size: 14px; font-weight: 600; color: var(--accent); margin-top: 6px; }
.license__list { display: flex; flex-direction: column; gap: 12px; margin: 28px 0 30px; }
.license__list li { display: flex; gap: 11px; font-size: 14px; color: var(--text-muted); }
.license__list svg { flex-shrink: 0; margin-top: 3px; color: var(--ok); }
.license__list li.is-extra {
  padding-top: 12px;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
}

.tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface);
  margin-bottom: 18px;
}
.tier { padding: 22px 12px; text-align: center; border-right: 1px solid var(--border); }
.tier:last-child { border-right: none; }
.tier--best { background: rgba(72, 187, 120, 0.05); }
.tier__label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 9px;
}
.tier__val { font-family: var(--font-mono); font-size: 23px; font-weight: 700; letter-spacing: -0.02em; }
.tier__save { font-size: 11px; font-weight: 600; color: var(--ok); margin-top: 6px; }

.callout {
  padding: 17px 19px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: rgba(200, 168, 75, 0.055);
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--text-muted);
}
.callout strong { color: var(--text); }


/* ══ 14. CONTACTO ════════════════════════════════════════════════════════ */
.contact {
  position: relative;
  background:
    radial-gradient(60% 55% at 50% 40%, rgba(200, 168, 75, 0.10), transparent 70%),
    var(--ink-950);
  overflow: hidden;
}
.contact__grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(36px, 5vw, 70px);
  align-items: start;
}

.contact__ways { display: flex; flex-direction: column; gap: 12px; margin-top: 34px; }
.way {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 16px 18px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--border);
  transition: border-color 0.35s ease, transform 0.4s var(--ease-out-expo), background 0.35s ease;
}
.way:hover {
  border-color: var(--border-strong);
  background: var(--surface-hover);
  transform: translateX(5px);
}
.way__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 42px; height: 42px;
  border-radius: 12px;
  background: rgba(200, 168, 75, 0.10);
  border: 1px solid rgba(200, 168, 75, 0.2);
  color: var(--gold-400);
}
.way > span:last-child { min-width: 0; }
.way__label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.way__value {
  display: block;
  font-size: 15px;
  font-weight: 600;
  margin-top: 3px;
  overflow-wrap: anywhere;
}

.form {
  padding: clamp(26px, 3vw, 38px);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  box-shadow: 0 36px 80px rgba(0, 0, 0, 0.4);
}
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form__group { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.form__label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.form__label span { color: var(--gold-400); }
.form__control {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 11px;
  background: rgba(4, 7, 15, 0.5);
  color: var(--ivory-100);
  font-size: 14.5px;
  outline: none;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.form__control::placeholder { color: rgba(245, 243, 238, 0.26); }
.form__control:focus {
  border-color: var(--gold-500);
  background: rgba(4, 7, 15, 0.75);
  box-shadow: 0 0 0 3px rgba(200, 168, 75, 0.14);
}
.form__control[aria-invalid="true"] { border-color: var(--bad); }
textarea.form__control { resize: vertical; min-height: 104px; }

.form__error { font-size: 12px; color: var(--bad); min-height: 15px; }

/* Trampa antispam: invisible para personas, tentadora para bots */
.form__honey {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  opacity: 0;
}

.form__consent {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin: 6px 0 20px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-dim);
}
.form__consent input { margin-top: 3px; flex-shrink: 0; accent-color: var(--gold-500); width: 16px; height: 16px; }
.form__consent a { color: var(--gold-400); text-decoration: underline; }

.form__status {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 11px;
  font-size: 13.5px;
  line-height: 1.6;
  display: none;
}
.form__status.is-ok  { display: block; background: rgba(72,187,120,0.10);  border: 1px solid rgba(72,187,120,0.3);  color: #7DD3A0; }
.form__status.is-err { display: block; background: rgba(252,129,129,0.10); border: 1px solid rgba(252,129,129,0.3); color: #FCA5A5; }
.form__status a { color: inherit; text-decoration: underline; font-weight: 700; }

.btn.is-loading { pointer-events: none; opacity: 0.7; }
.btn.is-loading .btn__label { visibility: hidden; }
.btn.is-loading::before {
  content: '';
  position: absolute;
  width: 18px; height: 18px;
  border: 2px solid rgba(13, 27, 62, 0.25);
  border-top-color: var(--ink-900);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  z-index: 3;
}
@keyframes spin { to { transform: rotate(360deg); } }


/* ══ 15. FOOTER ══════════════════════════════════════════════════════════ */
.footer {
  padding: 72px var(--gutter) 32px;
  background: var(--ink-950);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.footer__top {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 48px;
  max-width: var(--max-w);
  margin: 0 auto 54px;
}
.footer__desc { font-size: 14px; line-height: 1.8; color: var(--text-dim); margin-top: 18px; max-width: 30ch; }
/* --- Redes sociales ---
   Los cuatro iconos existen siempre en el HTML; el script solo revela los que
   tienen URL en config.js. Así se activa una red pegando su enlace, sin tocar
   marcado ni estilos. */
.socials { display: flex; gap: 10px; margin-top: 22px; }

.social {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-dim);
  transition: color 0.3s ease, border-color 0.3s ease,
              background 0.3s ease, transform 0.45s var(--ease-out-expo);
}
.social:hover {
  color: var(--gold-400);
  border-color: var(--border-strong);
  background: rgba(200, 168, 75, 0.08);
  transform: translateY(-3px);
}

/* Nombres del equipo enlazados a sus perfiles.
   Llevan subrayado tenue de serie: sin él parecen texto en negrita y nadie
   descubre que van a un enlace. */
.footer__author {
  color: var(--text-muted);
  font-weight: 600;
  border-bottom: 1px solid rgba(200, 168, 75, 0.35);
  padding-bottom: 1px;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.footer__author:hover { color: var(--gold-400); border-bottom-color: var(--gold-400); }

.footer__col-title {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-500);
  margin-bottom: 18px;
}
.footer__links { display: flex; flex-direction: column; gap: 11px; }
/* Los <button> del pie deben leerse como enlaces, no como controles del sistema */
.footer__links a, .footer__links button,
.footer__legal a, .footer__legal button {
  font-size: 14px;
  color: var(--text-dim);
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: color 0.25s ease;
}
.footer__links a:hover, .footer__links button:hover,
.footer__legal a:hover, .footer__legal button:hover { color: var(--gold-400); }
.footer__legal a, .footer__legal button { font-size: 12.5px; }
.footer__contact { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text-dim); margin-bottom: 11px; }
.footer__contact svg { flex-shrink: 0; color: var(--gold-500); }

.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  max-width: var(--max-w);
  margin: 0 auto;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 12.5px;
  color: var(--text-dim);
}
.footer__bottom strong { color: var(--text-muted); font-weight: 600; }
.footer__legal { display: flex; gap: 22px; flex-wrap: wrap; }


/* ══ 15b. CAPA DE MOVIMIENTO ═════════════════════════════════════════════ */

/* --- Fondo WebGL del hero --- */
.hero__shader {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  z-index: -4;
  opacity: 0;
  transition: opacity 1.4s var(--ease-out-expo);
}
.has-shader .hero__shader { opacity: 1; }
/* El degradado CSS es el respaldo: sobra en cuanto el shader arranca */
.has-shader .hero__mesh { opacity: 0.4; }
.hero__mesh { transition: opacity 1.4s var(--ease-out-expo); }

/* --- Revelado de titulares palabra a palabra ---
   Cada palabra gira desde debajo de su propia máscara. El giro en X necesita
   perspectiva en el contenedor; sin ella el rotateX se aplana y no se ve. */
[data-split] { perspective: 900px; }
[data-split] .w {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
}
[data-split] .w > i {
  display: inline-block;
  font-style: inherit;
  transform-origin: 50% 0;
  transform: translateY(102%) rotateX(-62deg);
  opacity: 0;
  transition: transform 1.05s var(--ease-out-expo), opacity 0.7s ease;
}
[data-split].is-visible .w > i { transform: none; opacity: 1; }

/* --- Entrada en perspectiva para tarjetas ---
   Sustituye al desplazamiento plano: las tarjetas llegan inclinadas y se
   asientan, que es lo que da sensación de volumen. */
.cap-grid, .modules-grid, .plans, .proof__track, .contact__grid { perspective: 1400px; }

.reveal--3d {
  opacity: 0;
  transform: translate3d(0, 64px, -90px) rotateX(14deg) scale(0.96);
  transform-origin: 50% 100%;
  transition: opacity 0.8s var(--ease-out-expo), transform 1s var(--ease-out-expo);
}
.reveal--3d.is-visible { opacity: 1; transform: none; }

/* --- Foco que sigue al cursor --- */
[data-spotlight] { position: relative; }
[data-spotlight]::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(460px circle at var(--sx, 50%) var(--sy, 50%),
              rgba(200, 168, 75, 0.10), transparent 68%);
  opacity: 0;
  transition: opacity 0.6s ease;
}
[data-spotlight]:hover::after { opacity: 1; }
.theme-light[data-spotlight]::after {
  background: radial-gradient(460px circle at var(--sx, 50%) var(--sy, 50%),
              rgba(200, 168, 75, 0.16), transparent 68%);
}

/* ══ 15c. ESCENA FIJADA — PROCESO ════════════════════════════════════════
   La sección mide varias pantallas de alto pero su contenido queda fijado:
   el scroll deja de desplazar la página y pasa a avanzar la escena. Es la
   diferencia entre "aparece una tarjeta" y "yo controlo lo que ocurre".
   ══════════════════════════════════════════════════════════════════════ */
/* isolation crea contexto de apilamiento: sin él, el ::after del foco con
   z-index negativo se colaría por detrás del fondo de la sección */
.steps-scene { position: relative; background: var(--bg); isolation: isolate; }
.steps-scene__track { height: 360vh; }

.steps-scene__pin {
  position: sticky;
  top: 0;
  height: 100svh;
  display: grid;
  align-content: center;
  gap: clamp(28px, 4vh, 52px);
  padding: clamp(96px, 12vh, 140px) var(--gutter) clamp(48px, 7vh, 80px);
  overflow: hidden;
}
.steps-scene__pin > .container { display: grid; gap: clamp(24px, 3.5vh, 44px); }

/* Riel de progreso */
.steps-rail { position: relative; }
.steps-rail__line {
  position: absolute;
  top: 15px; left: 6%; right: 6%;
  height: 1px;
  background: var(--border);
}
.steps-rail__fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--gold-600), var(--gold-300));
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.15s linear;
}
.steps-rail ol {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.steps-rail__item { display: grid; justify-items: center; gap: 10px; text-align: center; }
.steps-rail__item b {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-dim);
  transition: transform 0.5s var(--ease-out-back), background 0.4s ease,
              border-color 0.4s ease, color 0.4s ease, box-shadow 0.4s ease;
}
.steps-rail__item span {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  transition: color 0.4s ease;
}
.steps-rail__item.is-done b { border-color: var(--border-strong); color: var(--accent); }
.steps-rail__item.is-active b {
  transform: scale(1.35);
  background: var(--accent-solid);
  border-color: var(--accent-solid);
  color: var(--ink-900);
  box-shadow: 0 0 0 6px rgba(200, 168, 75, 0.16), 0 10px 26px rgba(200, 168, 75, 0.3);
}
.steps-rail__item.is-active span { color: var(--accent); }

/* Escenario: los cuatro paneles ocupan el mismo hueco y se relevan */
.steps-stage { position: relative; min-height: clamp(230px, 30vh, 300px); perspective: 1300px; }
.step-panel {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: start;
  gap: 14px;
  opacity: 0;
  transform: translate3d(0, 44px, -120px) rotateX(-14deg);
  transform-origin: 50% 100%;
  transition: opacity 0.55s ease, transform 0.85s var(--ease-out-expo);
  pointer-events: none;
}
.step-panel.is-active { opacity: 1; transform: none; pointer-events: auto; }
/* Los ya vistos salen por arriba, no vuelven por donde entraron */
.step-panel.is-past { transform: translate3d(0, -44px, -120px) rotateX(14deg); }

.step-panel__num {
  font-family: var(--font-mono);
  font-size: clamp(52px, 7vw, 88px);
  font-weight: 700;
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: var(--accent);
  opacity: 0.22;
}
.step-panel__title {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.4vw, 42px);
  font-weight: 900;
  line-height: 1.05;
}
.step-panel__desc { font-size: clamp(15px, 1.3vw, 18px); line-height: 1.7; color: var(--text-muted); max-width: 54ch; }
.step-panel__list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.step-panel__list li {
  padding: 7px 15px;
  border: 1px solid var(--border);
  border-radius: 100px;
  background: var(--surface);
  font-size: 12.5px;
  color: var(--text-muted);
}

@media (max-width: 900px) {
  /* Sin fijado en móvil: una escena de 360vh sin ratón es una cárcel */
  .steps-scene__track { height: auto; }
  .steps-scene__pin {
    position: static;
    height: auto;
    padding: var(--section-y) var(--gutter);
  }
  .steps-rail { display: none; }
  .steps-stage {
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 44px;
    perspective: none;
  }
  .step-panel {
    position: static;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
}

/* ══ 16. RESPONSIVE ══════════════════════════════════════════════════════ */

@media (max-width: 1180px) {
  .cap-grid, .modules-grid { grid-template-columns: repeat(2, 1fr); }
  .plans { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
  .demo-kpis { grid-template-columns: repeat(2, 1fr); }
  .demo-grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1024px) {
  .hero {
    grid-template-columns: 1fr;
    min-height: auto;
    padding-top: clamp(120px, 15vh, 160px);
  }
  .hero__content { max-width: 100%; }
  .hero__visual { max-width: 480px; margin-top: 20px; }
  .hero__scroll { display: none; }
  .chip { position: static; display: inline-block; margin: 12px 12px 0 0; animation: none; }

  .why__grid, .contact__grid, .license { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: repeat(2, 1fr); gap: 36px; }
  .demo-side { width: 178px; }
}

@media (max-width: 880px) {
  .nav__links { display: none; }
  .nav__actions .btn { display: none; }
  .nav__burger { display: flex; }
  .nav { padding: 8px 8px 8px 18px; }

  /* El demo pasa de barra lateral a pestañas horizontales deslizables */
  .demo-body { flex-direction: column; height: auto; }
  .demo-side {
    width: 100%;
    padding: 0;
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }
  .demo-side::-webkit-scrollbar { display: none; }
  .demo-side__label { display: none; }
  #demoNav {
    flex-direction: row;
    gap: 4px;
    padding: 8px 12px;
    width: max-content;
    min-width: 100%;
  }
  .demo-nav-btn { width: auto; min-height: 44px; border-radius: 10px 10px 0 0; }
  .demo-nav-btn.is-active::before { left: 12%; right: 12%; top: auto; bottom: 0; width: auto; height: 2px; }
  .demo-main { max-height: 76svh; }
}

@media (max-width: 680px) {
  .form__row, .field-row { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr; gap: 32px; }
  .footer__desc { max-width: none; }
  .footer__bottom { flex-direction: column; text-align: center; }
  .footer__legal { justify-content: center; }

  .cap-grid, .modules-grid { grid-template-columns: 1fr; }
  .tiers { grid-template-columns: 1fr; }
  .tier { border-right: none; border-bottom: 1px solid var(--border); }
  .tier:last-child { border-bottom: none; }

  .hero__actions .btn { width: 100%; }
  .hero__stats { gap: 22px; }
  .hero__stat { flex: 1 1 42%; }

  .demo-shell { border-radius: var(--r-md); margin-top: 36px; }
  .demo-tab { padding: 18px 15px; }
  .demo-kpis, .demo-kpis--3, .demo-grid-3 { grid-template-columns: 1fr; gap: 12px; }
  .demo-vac { grid-template-columns: repeat(2, 1fr); }
  .demo-row__foot { flex-direction: column; align-items: stretch; }
  .progress-wrap { max-width: none; }
  .demo-row--flex { flex-wrap: wrap; }
  .demo-bar { padding: 10px 14px; }
  .demo-bar__user { display: none; }
  .demo-tab__head .demo-btn { width: 100%; }

  .modal { padding: 0; align-items: flex-end; }
  .modal__box { max-width: none; border-radius: var(--r-lg) var(--r-lg) 0 0; max-height: 92svh; }
  .modal__foot .demo-btn { flex: 1; }
  /* Por debajo de 16px iOS hace zoom automático al enfocar un campo */
  .field__input, .form__control { font-size: 16px; }

  .pains { padding: 24px 20px; }
  .module, .cap { padding: 26px 22px; }
  .plan { padding: 32px 24px; }
  .license__card { padding: 30px 22px; }
  .form { padding: 24px 20px; }

  .to-top { right: 16px; bottom: 16px; width: 44px; height: 44px; }
  .plan-toggle { width: 100%; }
  .plan-toggle__btn { flex: 1; padding: 11px 12px; }
}

@media (max-width: 400px) {
  html { font-size: 15px; }
  .hero__stat { flex: 1 1 100%; }
}


/* ══ 17. MOVIMIENTO REDUCIDO ═════════════════════════════════════════════
   Respetamos la preferencia del sistema: nada de movimiento decorativo.
   ══════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .reveal, .split-line > span, .reveal--3d,
  [data-split] .w > i, .step-panel,
  .hero__badge, .hero__desc, .hero__actions, .hero__stats {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  .hero__canvas, .hero__shader, .noise { display: none; }
  [data-spotlight]::after { display: none; }

  /* Sin fijado: la escena del proceso pasa a lista vertical */
  .steps-scene__track { height: auto !important; }
  .steps-scene__pin { position: static !important; height: auto !important; }
  .steps-rail { display: none; }
  .steps-stage { min-height: 0; display: flex; flex-direction: column; gap: 44px; }
  .step-panel { position: static; pointer-events: auto; }
  .marquee__track, .proof__track { animation: none !important; }
  .proof__rail { overflow-x: auto; }
}