/* ============================================================
   tutrend — landing page
   Tokens · Themes · Components · Animations
   ============================================================ */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { min-height: 100%; }
img, svg { display: block; max-width: 100%; }
button, input { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--accent); color: #fff; }

/* ============================================================
   TOKENS / THEMES
   ============================================================ */
:root {
  --accent:        #2E7DF6;
  --accent-soft:   #6BA8FF;
  --accent-deep:   #1B5FD0;
  --accent-glow:   rgba(46,125,246,0.55);

  --font-display: "Helvetica Neue", Helvetica, "Arimo", Arial, sans-serif;
  --font-body:    "Helvetica Neue", Helvetica, "Arimo", Arial, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", "Menlo", "Cascadia Mono", monospace;

  --maxw: 1240px;
  --pad: clamp(20px, 5vw, 64px);

  --ease-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft:  cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
}

/* DARK (default base — also applied when system prefers dark) */
:root,
:root[data-theme="dark"] {
  --bg:        #0A0A0B;
  --bg-grad-1: #0c0d12;
  --bg-grad-2: #08080a;
  --surface:   rgba(255,255,255,0.045);
  --surface-2: rgba(255,255,255,0.07);
  --glass:     rgba(16,17,21,0.55);
  --glass-brd: rgba(255,255,255,0.10);
  --border:    rgba(255,255,255,0.09);
  --text:      #F4F5F7;
  /* Textos secundarios MÁS claros en dark (antes 0.72/0.45 se leían apagados sobre
     el casi-negro). Sube el contraste de párrafos de cards, leads y labels. */
  --text-mid:  rgba(244,245,247,0.86);
  --text-dim:  rgba(244,245,247,0.62);
  --shadow:    0 30px 80px -30px rgba(0,0,0,0.8);
  --noise-op:  0.045;
  --mesh-op:   0.9;
  color-scheme: dark;
}

/* LIGHT */
:root[data-theme="light"] {
  --bg:        #FAFAFA;
  --bg-grad-1: #ffffff;
  --bg-grad-2: #f1f2f6;
  --surface:   rgba(10,10,11,0.025);
  --surface-2: rgba(10,10,11,0.045);
  --glass:     rgba(255,255,255,0.62);
  --glass-brd: rgba(10,10,11,0.08);
  --border:    rgba(10,10,11,0.09);
  --text:      #0A0A0B;
  --text-mid:  rgba(10,10,11,0.66);
  --text-dim:  rgba(10,10,11,0.42);
  --shadow:    0 30px 80px -32px rgba(20,30,60,0.22);
  --noise-op:  0.03;
  --mesh-op:   0.55;
  color-scheme: light;
}

/* respect system when no explicit choice */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --bg: #FAFAFA; --bg-grad-1:#ffffff; --bg-grad-2:#f1f2f6;
    --surface: rgba(10,10,11,0.025); --surface-2: rgba(10,10,11,0.045);
    --glass: rgba(255,255,255,0.62); --glass-brd: rgba(10,10,11,0.08);
    --border: rgba(10,10,11,0.09);
    --text:#0A0A0B; --text-mid: rgba(10,10,11,0.66); --text-dim: rgba(10,10,11,0.42);
    --shadow: 0 30px 80px -32px rgba(20,30,60,0.22);
    --noise-op:0.03; --mesh-op:0.55; color-scheme: light;
  }
}

/* ============================================================
   BASE
   ============================================================ */
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color .5s var(--ease-soft), color .5s var(--ease-soft);
}

/* mesh + noise sit behind everything */
.bg-field { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.bg-field .orb {
  position: absolute; border-radius: 50%;
  filter: blur(80px); opacity: var(--mesh-op);
  will-change: transform;
}
.orb.o1 { width: 52vw; height: 52vw; left: -12vw; top: -8vw;
  background: radial-gradient(circle at 30% 30%, var(--accent), transparent 68%); }
.orb.o2 { width: 46vw; height: 46vw; right: -10vw; top: 12vh;
  background: radial-gradient(circle at 50% 50%, #7b5cff, transparent 66%); opacity: calc(var(--mesh-op) * .75); }
.orb.o3 { width: 60vw; height: 60vw; left: 18vw; top: 58vh;
  background: radial-gradient(circle at 50% 50%, #15b8c0, transparent 64%); opacity: calc(var(--mesh-op) * .55); }

.noise {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  opacity: var(--noise-op); mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

main { position: relative; z-index: 2; }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }

/* ============================================================
   TYPOGRAPHY HELPERS
   ============================================================ */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--accent); font-weight: 500;
  display: inline-flex; align-items: center; gap: 10px;
}
.eyebrow::before { content:""; width: 22px; height: 1px; background: var(--accent); opacity:.6; }

.display {
  font-family: var(--font-display);
  font-weight: 700; line-height: 0.98;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.section-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.1rem, 5.2vw, 4.1rem);
  line-height: 1.02; letter-spacing: -0.035em; text-wrap: balance;
}
.lead { font-size: clamp(1.05rem, 2vw, 1.32rem); color: var(--text-mid); font-weight: 300; line-height: 1.55; max-width: 56ch; }
.muted { color: var(--text-dim); }
.accent-text { color: var(--accent); }

/* gradient text */
.grad-text {
  background: linear-gradient(100deg, var(--text) 30%, var(--accent) 75%, var(--accent-soft));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  --bh: 52px;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: var(--bh); padding: 0 26px; border: none; border-radius: 100px;
  font-weight: 500; font-size: 15px; letter-spacing: -0.01em; cursor: pointer;
  transition: transform .35s var(--ease-spring), box-shadow .4s var(--ease-soft), background-color .3s;
  will-change: transform; white-space: nowrap; isolation: isolate;
}
.btn svg { width: 17px; height: 17px; }
.btn-primary {
  color: #fff;
  background: linear-gradient(120deg, var(--accent-deep), var(--accent) 45%, var(--accent-soft));
  background-size: 200% 200%;
  box-shadow: 0 8px 30px -8px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,.25);
  animation: btnGrad 6s ease infinite;
}
@keyframes btnGrad { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
.btn-primary:hover { box-shadow: 0 14px 44px -10px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,.3); }
.btn-ghost {
  color: var(--text); background: var(--surface); border: 1px solid var(--border);
  backdrop-filter: blur(12px);
}
.btn-ghost:hover { background: var(--surface-2); }
.btn-lg { --bh: 62px; padding: 0 38px; font-size: 17px; }
.btn:active { transform: scale(.97); }
@media (prefers-reduced-motion: reduce){ .btn-primary{animation:none} }

.btn .mag-inner { display:inline-flex; align-items:center; gap:10px; will-change: transform; }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed; top: 14px; left: 50%; transform: translateX(-50%);
  width: calc(100% - 28px); max-width: var(--maxw);
  z-index: 60;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px 12px 22px;
  border-radius: 100px;
  border: 1px solid transparent;
  transition: padding .4s var(--ease-soft), background-color .4s var(--ease-soft),
              border-color .4s, box-shadow .4s, backdrop-filter .4s, top .4s var(--ease-soft);
}
.nav.scrolled {
  top: 10px;
  padding: 8px 10px 8px 18px;
  background: var(--glass);
  border-color: var(--glass-brd);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow: 0 18px 50px -22px rgba(0,0,0,.5);
}
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links a {
  font-size: 14px; color: var(--text-mid); padding: 8px 14px; border-radius: 100px;
  transition: color .25s, background-color .25s;
}
.nav-links a:hover { color: var(--text); background: var(--surface); }
.nav-right { display: flex; align-items: center; gap: 10px; }

/* logo / wordmark */
.brand { display: flex; align-items: center; gap: 11px; font-family: var(--font-display); }
.brand-mark { width: 30px; height: 30px; position: relative; flex: none; }
.wordmark { font-weight: 700; font-size: 21px; letter-spacing: -0.04em; }
.wordmark .dot { color: var(--accent); }

/* theme toggle */
.toggle {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--border); cursor: pointer;
  color: var(--text-mid); transition: background-color .25s, color .25s, transform .4s var(--ease-spring);
}
.toggle:hover { color: var(--text); transform: rotate(18deg); }
.toggle svg { width: 18px; height: 18px; }
.toggle .ico-sun { display: none; }
:root[data-theme="light"] .toggle .ico-sun { display: block; }
:root[data-theme="light"] .toggle .ico-moon { display: none; }
@media (prefers-color-scheme: light){
  :root:not([data-theme]) .toggle .ico-sun { display:block; }
  :root:not([data-theme]) .toggle .ico-moon { display:none; }
}

.nav-burger { display: none; width:46px; height:46px; border-radius:50%; background:var(--surface); border:1px solid var(--border); cursor:pointer; }

/* ============================================================
   LOADER
   ============================================================ */
.loader {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  background: var(--bg);
  transition: opacity .6s var(--ease-soft), visibility .6s;
}
.loader.done { opacity: 0; visibility: hidden; pointer-events: none; }
.loader-mark { display: flex; align-items: center; gap: 14px; }
.loader .brand-mark { width: 44px; height: 44px; opacity: 0; transform: scale(.6) rotate(-30deg); }
.loader .lw { font-family: var(--font-display); font-weight: 700; font-size: 38px; letter-spacing: -0.04em; display: flex; }
.loader .lw span { opacity: 0; transform: translateY(110%); display: inline-block; }
.loader .lw .dot { color: var(--accent); }
.loader-bar { position: absolute; bottom: 0; left: 0; height: 2px; width: 0; background: var(--accent); }

/* ============================================================
   SECTION SHELL
   ============================================================ */
section { position: relative; }
.section-pad { padding-block: clamp(90px, 13vh, 170px); }
.section-head { max-width: 760px; margin-bottom: clamp(40px, 6vw, 72px); display: grid; gap: 20px; }

/* ============================================================
   HERO
   ============================================================ */
.hero { padding-top: clamp(140px, 22vh, 230px); padding-bottom: clamp(60px, 9vh, 120px); }
.hero-eyebrow { margin-bottom: 30px; }
.hero h1 {
  font-size: clamp(2.9rem, 8.2vw, 7rem);
  margin-bottom: 30px;
}
.hero h1 .word {
  display: inline-block; overflow: hidden; vertical-align: top;
  /* Espacio para los descendentes (g, p, j…) que el `overflow:hidden` recortaba
     con el `line-height:0.98`. El margin negativo cancela el efecto en el layout
     (no separa las líneas). */
  padding-bottom: 0.16em; margin-bottom: -0.16em;
}
/* El reveal empuja la palabra desde abajo. Con el padding extra hay que empujar un
   poco más (125% en vez de 110%) para que NO asome un borde antes de animar. */
.hero h1 .word > span { display: inline-block; transform: translateY(125%); }
/* Sin animación (reduced-motion): el JS no corre el reveal → mostrar la palabra fija
   (sin esto quedaría empujada fuera del `.word` e invisible). */
@media (prefers-reduced-motion: reduce) { .hero h1 .word > span { transform: none; } }
.hero-sub { margin-bottom: 40px; }
.hero-pill {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 34px;
  padding: 7px 16px 7px 7px; border-radius: 100px; white-space: nowrap; max-width: 100%;
  background: var(--surface); border: 1px solid var(--border); font-size: 13px; color: var(--text-mid);
}
.hero-pill b { color: var(--text); font-weight: 500; }
.hero-pill .tag { background: var(--accent); color:#fff; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 100px; letter-spacing: .02em; }

/* waitlist capture */
.waitlist { display: flex; gap: 10px; max-width: 470px; flex-wrap: wrap; }
.waitlist .field {
  flex: 1 1 230px; display: flex; align-items: center; height: 56px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 100px; padding: 0 6px 0 20px;
  transition: border-color .3s, background-color .3s;
}
.waitlist .field:focus-within { border-color: var(--accent); background: var(--surface-2); }
.waitlist input { flex: 1; height: 100%; background: none; border: none; outline: none; font-size: 15px; }
.waitlist input::placeholder { color: var(--text-dim); }
.waitlist .btn { height: 44px; }
.waitlist .field .btn { margin-left: 8px; }
.hero-note { margin-top: 16px; font-size: 13px; color: var(--text-dim); display: flex; align-items: center; gap: 8px; }
.hero-note .dotg { width: 7px; height: 7px; border-radius: 50%; background: #2bd27b; box-shadow: 0 0 0 4px rgba(43,210,123,.16); }

.waitlist.sent .field { border-color: #2bd27b; }
.form-ok { display:none; align-items:center; gap:10px; color:#2bd27b; font-size:14px; margin-top:14px; }
/* El partial de éxito (`_waitlist_box.html`) reemplaza el form por un `.form-ok`
   con la clase `is-visible` (el form-ok es HIJO de `.waitlist`, no hermano). */
.form-ok.is-visible { display:flex; }
/* Mensaje de error del servidor (correo inválido / rate limit) bajo el campo. */
.form-err { color: #ff6b6b; font-size: 13.5px; margin-top: 12px; line-height: 1.4; }

/* hero visual (floating dashboard preview) */
.hero-visual { margin-top: clamp(56px, 8vw, 110px); perspective: 1600px; }
.hero-visual .frame { transform: rotateX(14deg); transform-origin: center top; will-change: transform; }

/* ============================================================
   FAKE DASHBOARD UI  (showcase + scrollytelling)
   ============================================================ */
.dash {
  border-radius: var(--r-xl); overflow: hidden;
  background: var(--glass);
  border: 1px solid var(--glass-brd);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  box-shadow: var(--shadow);
}
.dash-top { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.dots { display: flex; gap: 7px; }
.dots i { width: 11px; height: 11px; border-radius: 50%; background: var(--surface-2); display:block; }
.dots i:nth-child(1){ background:#ff5f57; } .dots i:nth-child(2){ background:#febc2e; } .dots i:nth-child(3){ background:#28c840; }
.dash-url { flex: 1; height: 30px; border-radius: 8px; background: var(--surface); display:flex; align-items:center; gap:8px; padding: 0 12px; font-family: var(--font-mono); font-size: 12px; color: var(--text-dim); }
.dash-body { display: grid; grid-template-columns: 210px 1fr; min-height: 420px; }
.dash-side { border-right: 1px solid var(--border); padding: 18px 14px; display: flex; flex-direction: column; gap: 6px; }
.dash-side .si { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 10px; font-size: 13.5px; color: var(--text-mid); }
.dash-side .si .gi { width: 17px; height: 17px; opacity:.8; }
.dash-side .si.on { background: var(--accent); color:#fff; }
.dash-side .si.on .gi { opacity: 1; }
.dash-side .sep { height: 1px; background: var(--border); margin: 10px 4px; }
.dash-side .lbl { font-family: var(--font-mono); font-size: 10px; letter-spacing:.14em; text-transform: uppercase; color: var(--text-dim); padding: 4px 12px; }
.dash-main { padding: 22px; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.dash-h { display:flex; align-items:center; justify-content: space-between; gap: 12px; }
.dash-h h4 { font-family: var(--font-display); font-size: 19px; font-weight: 700; letter-spacing: -0.02em; }
.dash-chip { font-family: var(--font-mono); font-size: 11px; padding: 6px 11px; border-radius: 100px; background: var(--surface); border:1px solid var(--border); color: var(--text-mid); }
.dash-chip.live { color:#2bd27b; } .dash-chip.live::before{ content:""; display:inline-block; width:6px;height:6px;border-radius:50%;background:#2bd27b;margin-right:6px;vertical-align:middle; }

/* product cards inside dashboard */
.prod-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.pcard { border: 1px solid var(--border); border-radius: 14px; padding: 12px; background: var(--surface); display:flex; flex-direction:column; gap:10px; }
.pcard .pimg { aspect-ratio: 16/11; border-radius: 9px; position: relative; overflow:hidden;
  background: repeating-linear-gradient(135deg, var(--surface-2) 0 10px, transparent 10px 20px); }
.pcard .pimg::after { content: attr(data-ph); position:absolute; inset:0; display:grid; place-items:center; font-family:var(--font-mono); font-size:10px; color: var(--text-dim); }
.pcard .pscore { position:absolute; top:8px; right:8px; background: var(--accent); color:#fff; font-family: var(--font-mono); font-size:11px; font-weight:600; padding:3px 8px; border-radius:7px; }
.pcard h5 { font-size: 13.5px; font-weight: 500; letter-spacing:-.01em; }
.pcard .pmeta { display:flex; justify-content: space-between; font-size: 11.5px; color: var(--text-dim); font-family: var(--font-mono); }
.pcard .pbar { height: 5px; border-radius: 100px; background: var(--surface-2); overflow: hidden; }
.pcard .pbar i { display:block; height:100%; background: linear-gradient(90deg, var(--accent), var(--accent-soft)); border-radius:100px; }

/* trend chart */
.chartbox { border:1px solid var(--border); border-radius:14px; padding:16px; background: var(--surface); }
.chartbox .ct { display:flex; justify-content: space-between; align-items:center; margin-bottom: 12px; }
.chartbox .ct b { font-size: 13px; font-weight: 500; }
.chartbox .ct span { font-family: var(--font-mono); font-size:12px; color:#2bd27b; }
.spark { width: 100%; height: 90px; }
.spark path.line { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; }
.spark path.area { fill: url(#sparkfill); opacity:.5; }

/* builder mock */
.builder { display:grid; grid-template-columns: 1fr 168px; gap: 14px; }
.builder .canvas { border:1px solid var(--border); border-radius:12px; background: var(--surface); padding: 16px; display:flex; flex-direction:column; gap:12px; }
.builder .block { border-radius: 8px; background: var(--surface-2); }
.builder .b-hero { height: 78px; display:flex; align-items:center; gap:12px; padding: 12px; }
.builder .b-hero .ph { width:64px;height:54px;border-radius:7px; background: repeating-linear-gradient(135deg, rgba(46,125,246,.25) 0 8px, transparent 8px 16px); }
.builder .b-line { height: 9px; border-radius:100px; background: var(--surface-2); }
.builder .b-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:8px; }
.builder .b-grid div { height:46px; border-radius:7px; background: var(--surface-2); }
.builder .panel { border:1px solid var(--border); border-radius:12px; background: var(--surface); padding: 12px; display:flex; flex-direction:column; gap:9px; }
.builder .panel .ph-row{ height:30px; border-radius:7px; background: var(--surface-2); }
.builder .panel .ph-row.acc{ background: linear-gradient(90deg,var(--accent),var(--accent-soft)); }

/* ============================================================
   MARQUEE (social proof)
   ============================================================ */
.proof { padding-block: clamp(40px,6vh,72px); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.proof-label { text-align:center; font-family: var(--font-mono); font-size: 12px; letter-spacing:.18em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 30px; }
.marquee { display: flex; overflow: hidden; -webkit-mask-image: linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); mask-image: linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); }
.marquee .track { display: flex; gap: clamp(40px,6vw,84px); padding-right: clamp(40px,6vw,84px); animation: marq 32s linear infinite; will-change: transform; }
.marquee:hover .track { animation-play-state: paused; }
@keyframes marq { to { transform: translateX(-50%); } }
.logo-item { display:flex; align-items:center; gap:11px; color: var(--text-mid); font-family: var(--font-display); font-weight: 700; font-size: clamp(18px,2.4vw,25px); letter-spacing:-.03em; opacity:.62; transition: opacity .3s, color .3s; white-space: nowrap; }
.logo-item:hover { opacity: 1; color: var(--text); }
.logo-item .lm { width: 22px; height: 22px; flex:none; }
@media (prefers-reduced-motion: reduce){ .marquee .track{ animation:none; flex-wrap:wrap; justify-content:center; } }

/* ============================================================
   REVEAL
   ============================================================ */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity .9s var(--ease-expo), transform .9s var(--ease-expo); }
.reveal.in { opacity: 1; transform: none; }
[data-stagger] > * { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease-expo), transform .8s var(--ease-expo); }
[data-stagger].in > * { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){
  .reveal,[data-stagger]>*{ opacity:1 !important; transform:none !important; transition:none; }
}

/* ============================================================
   BENEFITS / FEATURE CARDS
   ============================================================ */
.feat-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.fcard {
  position: relative; padding: 30px; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--border);
  transform-style: preserve-3d; will-change: transform;
  transition: border-color .4s, background-color .4s, box-shadow .4s, transform .12s var(--ease-soft);
  overflow: hidden;
}
.fcard::before { content:""; position:absolute; inset:0; opacity:0; transition:opacity .5s;
  background: radial-gradient(420px circle at var(--mx,50%) var(--my,0%), rgba(46,125,246,.16), transparent 60%); }
.fcard:hover { border-color: var(--glass-brd); box-shadow: var(--shadow); }
.fcard:hover::before { opacity: 1; }
.fcard .fc-in { transform: translateZ(40px); }
.ficon { width: 54px; height: 54px; border-radius: 14px; display:grid; place-items:center; margin-bottom: 22px;
  background: linear-gradient(140deg, var(--surface-2), transparent); border:1px solid var(--border); color: var(--accent); }
.ficon svg { width: 26px; height: 26px; }
.fcard h3 { font-family: var(--font-display); font-size: 20px; font-weight: 600; letter-spacing:-.02em; margin-bottom: 10px; }
.fcard p { color: var(--text-mid); font-size: 14.5px; font-weight: 300; line-height: 1.6; }
.fcard.wide { grid-column: span 2; }

/* ============================================================
   SCROLLYTELLING (pinned)
   ============================================================ */
.story { position: relative; }
/* Header del scrollytelling: menos separación con el contenido (antes el
   section-head global metía margin-bottom hasta 72px → demasiado aire bajo el título). */
.story-head .section-head { margin-bottom: clamp(20px, 3vw, 34px); }
.story-track { } /* height set inline via steps */
.story-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; grid-template-columns: 0.92fr 1.08fr; gap: clamp(28px,4vw,60px); align-items: center; align-content: center; }
.story-steps { display: flex; flex-direction: column; gap: 12px; position: relative; }
.story-step { padding: 18px 22px; border-radius: var(--r-md); border: 1px solid var(--border);
  transition: opacity .5s var(--ease-soft), background-color .5s, border-color .5s, transform .5s var(--ease-soft); opacity: .4; }
.story-step.active { opacity: 1; background: var(--surface); border-color: var(--glass-brd); box-shadow: var(--shadow); }
.story-step .num { font-family: var(--font-mono); font-size: 11.5px; color: var(--accent); letter-spacing:.1em; margin-bottom: 8px; display:flex; align-items:center; gap:10px; }
.story-step .num .ring { width:24px;height:24px;border-radius:50%;border:1.5px solid var(--accent); display:grid; place-items:center; font-size:11px; }
.story-step h3 { font-family: var(--font-display); font-size: clamp(1.2rem,2vw,1.6rem); font-weight: 700; letter-spacing:-.025em; margin-bottom: 6px; }
.story-step p { color: var(--text-mid); font-weight: 300; font-size: 14px; line-height: 1.5; }
.story-step.active p, .story-step p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.story-vis { position: relative; max-width: 560px; margin-left: auto; width: 100%; }
.story-vis .stage { position: relative; }
.story-vis .dash { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--bg-grad-1); }
.story-vis .dash-main { padding: 16px; gap: 12px; }
.story-vis .dash-body { min-height: 0; }
.story-vis .scene { position: absolute; inset: 0; opacity: 0; transform: scale(.96) translateY(14px); transition: opacity .6s var(--ease-soft), transform .6s var(--ease-soft); }
.story-vis .scene.active { opacity: 1; transform: none; position: relative; }
.story-progress { position:absolute; left: -1px; top:0; width: 2px; background: var(--border); border-radius: 100px; }

/* Indicador de pasos (puntos) — solo se usa en móvil (display:flex en el media
   query); en escritorio queda oculto (un grid item con display:none no ocupa celda). */
.story-dots { display: none; align-items: center; justify-content: center; gap: 10px; }
.story-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--border);
  transition: background-color .4s var(--ease-soft), transform .4s var(--ease-spring); }
.story-dots i.active { background: var(--accent); transform: scale(1.35); }

/* ============================================================
   SHOWCASE
   ============================================================ */
.showcase { text-align:center; }
.showcase .section-head { margin-inline:auto; }
.showcase-stage { perspective: 2000px; margin-top: 60px; }
.showcase-stage .dash { transform: rotateX(var(--rx,18deg)) scale(var(--sc,.92)); transform-origin: center top; will-change: transform; transition: transform .1s linear; }
.showcase-tags { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top: 40px; }
.showcase-tags .t { font-family: var(--font-mono); font-size: 12px; padding: 9px 15px; border-radius: 100px; background: var(--surface); border:1px solid var(--border); color: var(--text-mid); }
.showcase-tags .t b { color: var(--accent); font-weight: 500; }

/* ============================================================
   METRICS
   ============================================================ */
.metrics-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; }
.metric { padding: 34px 28px; border-radius: var(--r-lg); border:1px solid var(--border); background: var(--surface); }
.metric .mnum { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.4rem,5vw,3.6rem); letter-spacing:-.04em; line-height:1; }
.metric .mnum .suf { color: var(--accent); }
.metric .mlbl { margin-top: 14px; color: var(--text-mid); font-size: 14px; font-weight: 300; }
.metric .mtag { margin-top: 6px; font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); }
.illus-note { margin-top: 26px; font-family: var(--font-mono); font-size: 11.5px; color: var(--text-dim); display:flex; align-items:center; gap:8px; }
.illus-note::before { content:"✳"; color: var(--accent); }

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.tgrid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.tcard { padding: 28px; border-radius: var(--r-lg); background: var(--glass); border:1px solid var(--glass-brd);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); display:flex; flex-direction:column; gap: 20px; }
.tcard .quote { font-size: 16px; line-height: 1.55; font-weight: 300; }
.tcard .who { display:flex; align-items:center; gap: 13px; margin-top:auto; }
.tcard .av { width: 42px; height: 42px; border-radius: 50%; flex:none;
  background: linear-gradient(140deg, var(--accent), #7b5cff); display:grid; place-items:center; color:#fff; font-weight:600; font-family:var(--font-display); }
.tcard .who b { font-size: 14px; font-weight: 600; display:block; }
.tcard .who span { font-size: 12.5px; color: var(--text-dim); }
.tcard .stars { color: var(--accent); font-size: 14px; letter-spacing: 2px; }

/* ============================================================
   FINAL CTA
   ============================================================ */
.final { position: relative; overflow: hidden; border-radius: var(--r-xl); padding: clamp(56px,9vw,110px) var(--pad); text-align: center; isolation:isolate; }
.final .cta-mesh { position:absolute; inset:-30%; z-index:-1; background:
  radial-gradient(40% 50% at 20% 30%, var(--accent), transparent 70%),
  radial-gradient(45% 55% at 80% 40%, #7b5cff, transparent 70%),
  radial-gradient(50% 60% at 50% 90%, #15b8c0, transparent 70%);
  filter: blur(30px); opacity:.9; animation: meshmove 16s ease-in-out infinite alternate; }
@keyframes meshmove { 0%{transform:translate3d(0,0,0) scale(1)} 100%{transform:translate3d(3%,-4%,0) scale(1.12)} }
.final::after { content:""; position:absolute; inset:0; z-index:-1; background: var(--bg); opacity:.72; }
:root[data-theme="light"] .final::after { opacity:.55; }
.final h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.4rem,6.5vw,5rem); letter-spacing:-.04em; line-height: 1; margin-bottom: 22px; text-wrap: balance; }
.final p { color: var(--text-mid); font-size: clamp(1.05rem,2vw,1.3rem); font-weight: 300; max-width: 52ch; margin: 0 auto 38px; }
.final .waitlist { margin-inline: auto; }
@media (prefers-reduced-motion: reduce){ .final .cta-mesh{ animation:none; } }

/* ============================================================
   FOOTER
   ============================================================ */
footer { border-top: 1px solid var(--border); padding-block: 64px 40px; margin-top: clamp(80px,12vh,150px); }
.foot-top { display:grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 40px; margin-bottom: 56px; }
.foot-brand p { color: var(--text-mid); font-weight: 300; font-size: 14px; max-width: 34ch; margin-top: 18px; }
.foot-col h5 { font-family: var(--font-mono); font-size: 11px; letter-spacing:.16em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 18px; }
.foot-col a { display:block; color: var(--text-mid); font-size: 14px; padding: 6px 0; transition: color .25s; }
.foot-col a:hover { color: var(--text); }
.foot-bottom { display:flex; align-items:center; justify-content: space-between; gap: 20px; padding-top: 28px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.foot-bottom .copy { font-size: 13px; color: var(--text-dim); }
.socials { display:flex; gap: 8px; }
.socials a { width: 40px; height: 40px; border-radius: 50%; display:grid; place-items:center; background: var(--surface); border:1px solid var(--border); color: var(--text-mid); transition: color .25s, background-color .25s, transform .35s var(--ease-spring); }
.socials a:hover { color: var(--text); background: var(--surface-2); transform: translateY(-3px); }
.socials svg { width: 17px; height: 17px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 980px) {
  .feat-grid, .metrics-grid, .tgrid, .prod-grid { grid-template-columns: repeat(2,1fr); }
  .fcard.wide { grid-column: span 2; }
  /* Scrollytelling DINÁMICO en móvil: se mantiene fijado (como en escritorio) pero
     muestra UN paso a la vez + su visual, y avanza con el scroll. El bug previo era
     apilar los 4 pasos + el dashboard en el sticky de 100vh → no cabían y se encimaban.
     Ahora solo el paso activo se muestra (los demás `position:absolute; opacity:0`),
     así cabe holgado. Layout 1 columna: puntos de progreso → texto del paso → visual.
     `overflow:hidden` es red de seguridad (clipa dentro del sticky, nunca encima de
     las secciones vecinas). El JS sigue toggleando paso/escena/punto por scroll. */
  .story-sticky {
    grid-template-columns: 1fr;
    gap: clamp(16px, 4vw, 24px);
    position: sticky; top: 0;
    height: 100vh; height: 100svh; min-height: 0;
    align-content: center; justify-items: stretch;
    padding-block: clamp(76px, 13vh, 104px) 24px;  /* clearance del nav flotante */
    overflow: hidden;
  }
  .story-dots { display: flex; order: -1; }
  .story-progress { display: none; }
  /* Pasos: solo el activo visible, con crossfade (igual patrón que las escenas). */
  .story-steps { position: relative; min-height: 150px; gap: 0; }
  .story-step { position: absolute; inset: 0; opacity: 0; pointer-events: none;
    padding: 0; border: none; background: none; box-shadow: none; }
  .story-step.active { position: relative; opacity: 1; pointer-events: auto;
    background: none; border: none; box-shadow: none; }
  .story-vis { max-width: 440px; margin-inline: auto; }
  /* La 1ª escena (descubrir) trae 6 cards; en móvil mostramos 4 (2 filas) para que
     el dashboard no infle la altura del sticky. */
  .story-vis .scene:first-child .prod-grid .pcard:nth-child(n+5) { display: none; }
  .foot-top { grid-template-columns: 1fr 1fr; }
  .dash-body { grid-template-columns: 1fr; }
  .dash-side { flex-direction: row; flex-wrap: wrap; border-right: none; border-bottom: 1px solid var(--border); }
  .dash-side .sep, .dash-side .lbl { display:none; }
}
@media (max-width: 760px) {
  .nav-links { display: none; }
  .nav-burger { display: grid; place-items:center; }
  .hero h1 { font-size: clamp(2.6rem, 12vw, 4rem); }
  .feat-grid, .metrics-grid, .tgrid, .prod-grid { grid-template-columns: 1fr; }
  .fcard.wide { grid-column: span 1; }
  .builder { grid-template-columns: 1fr; }
  .builder .panel { display:none; }
  .foot-top { grid-template-columns: 1fr; gap: 30px; }
  .hero-visual .frame { transform: none; }
  /* Menos separación entre secciones en móvil: el padding-block de escritorio
     (~110px = 13vh) deja las secciones demasiado separadas en pantallas chicas.
     Lo recortamos ~a la mitad. */
  .section-pad { padding-block: clamp(40px, 7vh, 60px); }
  .section-head { margin-bottom: clamp(24px, 5vw, 36px); }
  footer { margin-top: clamp(48px, 8vh, 76px); }
  .hero { padding-bottom: clamp(40px, 7vh, 64px); }
  /* Tags del showcase: en móvil las pastillas finas (12px, una por línea) se ven
     muy chicas para ser propuestas de valor. Las pasamos a una grilla 2×2 de
     mini-cards: el dato en grande (acento) arriba y la etiqueta debajo. El `<b>`
     y el texto suelto del `.t` se vuelven dos flex-items apilados. */
  .showcase-tags { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 28px; }
  .showcase-tags .t {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
    text-align: center; line-height: 1.35;
    font-size: 13px; padding: 18px 12px; border-radius: var(--r-md);
    /* más definición que la pastilla (el --surface en dark es casi invisible sobre
       el fondo oscuro del showcase). */
    background: var(--surface-2); border-color: var(--glass-brd);
  }
  .showcase-tags .t b { font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
  /* Nota con punto verde (CTA "Beta privada por invitación…"): al hacer wrap en
     móvil, `align-items:center` centraba el punto contra TODAS las líneas → quedaba
     flotando a media altura. Lo alineamos a la 1ª línea (flex-start) + un nudge para
     centrarlo verticalmente en esa línea; `flex:none` evita que se deforme/encoja. */
  .hero-note { align-items: flex-start; }
  .hero-note .dotg { flex: none; margin-top: 6px; }
}

/* mobile menu sheet */
.msheet { position: fixed; inset: 0; z-index: 80; background: var(--glass); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: var(--pad); opacity:0; visibility:hidden; transition: opacity .4s, visibility .4s; }
.msheet.open { opacity:1; visibility:visible; }
.msheet a { font-family: var(--font-display); font-size: 30px; font-weight: 700; letter-spacing:-.03em; padding: 12px 0; border-bottom:1px solid var(--border); }
.msheet .close { position:absolute; top: 22px; right: var(--pad); width:46px;height:46px;border-radius:50%; background:var(--surface); border:1px solid var(--border); cursor:pointer; color:var(--text); }

/* ============================================================
   HERO CONVEYOR — cintas de tarjetas de producto (fondo del hero)
   Integrado al rediseño: vive detrás del contenido del hero (z-index 0),
   el contenido del hero va por encima. Lo arma landing.js.
   ============================================================ */
.hero { position: relative; }
/* El hero va a ancho COMPLETO del viewport para que el fondo (conveyor + glass)
   cubra todo. El contenido vive en `.hero-inner` (que ya lleva `.wrap` = max-width
   1240 + padding), un ÚNICO contenedor → todos los hijos (badge, h1, lead, waitlist,
   dashboard) comparten el mismo eje izquierdo. Antes el padding-inline por-hijo
   rompía el badge (inline-flex: el padding lo expandía por dentro, no lo alineaba). */
.hero-inner { position: relative; z-index: 2; }
.hero-conveyor {
  position: absolute; inset: 0 -6%; z-index: 0; pointer-events: none;
  display: flex; flex-direction: column; justify-content: center; gap: clamp(10px, 1.6vw, 22px);
  transform: rotate(-6deg) scale(1.12) translate(var(--px, 0px), var(--py, 0px));
  transform-origin: center; opacity: .62;
  -webkit-mask-image: radial-gradient(125% 108% at 50% 40%, #000 56%, transparent 92%);
          mask-image: radial-gradient(125% 108% at 50% 40%, #000 56%, transparent 92%);
  transition: transform .25s var(--ease-soft);
}
.hc-lane { display: flex; }
.hc-track { display: flex; flex: none; animation: hc-marquee var(--dur, 40s) linear infinite; }
.hc-lane--rev .hc-track { animation-direction: reverse; }
@keyframes hc-marquee { to { transform: translateX(-50%); } }
.hc-prod {
  flex: none; display: flex; align-items: center; gap: 10px; margin-right: 14px;
  width: clamp(150px, 15vw, 192px); padding: 9px 11px; border-radius: 12px;
  background: var(--surface-2); border: 1px solid var(--border);
}
.hc-thumb { flex: none; width: 42px; height: 42px; border-radius: 10px; display: grid; place-items: center; font-size: 20px; }
.hc-info { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.hc-line { height: 6px; border-radius: 99px; background: var(--text); opacity: .14; }
.hc-pill {
  align-self: flex-start; font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  color: var(--accent); padding: 2px 7px; border-radius: 99px;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}
@media (prefers-reduced-motion: reduce) { .hc-track { animation: none !important; } }
@media (max-width: 760px) { .hero-conveyor { opacity: .38; } }


/* ============================================================
   FIXES post-rediseño (2026-06-01): overflow-x, conveyor, glass, mobile
   ============================================================ */
/* #2 overflow-x global: el conveyor (marquee ancho) + orbs no deben generar scroll. */
html, body { overflow-x: clip; }
/* el hero contiene el conveyor (que es más ancho por el scale/rotate). */
.hero { overflow: clip; }

/* #3 glassmorphism: capa de vidrio esmerilado sobre el conveyor (z-index 1, entre
   el conveyor en 0 y el contenido en 2). Da protagonismo al texto del hero. */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  -webkit-backdrop-filter: blur(7px) saturate(116%);
          backdrop-filter: blur(7px) saturate(116%);
  background: radial-gradient(78% 70% at 34% 46%,
    color-mix(in srgb, var(--bg) 70%, transparent) 0%,
    color-mix(in srgb, var(--bg) 24%, transparent) 56%,
    transparent 82%);
}

/* #4 mobile: en <=760px sólo el burger en la nav-right (login + waitlist se ocultan;
   viven en el sheet). Antes los tres se mostraban y desbordaban la barra. */
@media (max-width: 760px) {
  .nav-right .lp-login-link,
  .nav-right .btn-primary { display: none; }
  .nav-right { gap: 8px; }
}

/* #4b mobile (cont.): overflows que faltaban (audit Playwright 2026-06-01) */
@media (max-width: 760px) {
  /* waitlist: el botón vive DENTRO del `.field` (pill con input+botón en fila). En
     móvil esa fila no cabe → el botón (sobre todo el grande "Unirme a la waitlist")
     se sale a lo ancho del viewport. Fix: apilar dentro del `.field` (input arriba,
     botón abajo), ambos full-width. El pill visual pasa del `.field` al input. */
  .waitlist { flex-direction: column; max-width: 100%; gap: 12px; }
  .waitlist form { width: 100%; }
  .waitlist .field {
    flex-direction: column; align-items: stretch;
    height: auto; padding: 0; gap: 12px;
    background: none; border: none; border-radius: 0;
  }
  .waitlist .field:focus-within { background: none; border-color: transparent; }
  .waitlist .field input {
    /* `flex:none` resetea el `flex:1` (basis 0%) de la regla base: en el `.field`
       columna con `height:auto`, ese basis 0% ignoraba el `height` y colapsaba el
       input a ~19px. Con `flex:none` el `height` manda. */
    flex: none; width: 100%; height: 56px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 100px; padding: 0 20px;
    transition: border-color .3s, background-color .3s;
  }
  .waitlist .field input:focus { border-color: var(--accent); background: var(--surface-2); }
  .waitlist .field .btn { margin-left: 0; }
  .waitlist .btn, .waitlist .btn-primary, .waitlist .btn-lg { width: 100%; height: 56px; }
  /* dashboard ficticio (hero + showcase): el grid sidebar+main no cabe → 1 columna,
     sidebar oculta, y el .dash nunca desborda. */
  .dash { max-width: 100%; overflow: hidden; }
  .dash-body { grid-template-columns: 1fr; }
  .dash-side { display: none; }
  .prod-grid { grid-template-columns: 1fr 1fr; }  /* 2 cols dentro del dash mock */
}

/* ──────────────────────────────────────────────────────────────────────────
   Páginas legales (Privacidad / Términos / Cookies) — shell propio, simple y
   legible. Reusa los tokens y las clases .brand/.toggle del nav de la landing.
   ────────────────────────────────────────────────────────────────────────── */
.legal-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; max-width: 920px; margin-inline: auto;
  padding: 22px clamp(20px, 5vw, 40px);
}
.legal-main { max-width: 760px; padding-block: clamp(28px, 5vh, 56px) clamp(56px, 9vh, 96px); }
.legal-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.9rem, 4.5vw, 2.7rem); letter-spacing: -0.02em;
  line-height: 1.1; margin: 0 0 8px; color: var(--text);
}

/* Prosa del markdown renderizado */
.legal-prose { color: var(--text-mid); font-size: 1rem; line-height: 1.72; font-weight: 300; }
.legal-prose > *:first-child { margin-top: 0; }
.legal-prose h2 {
  font-family: var(--font-display); font-weight: 700; color: var(--text);
  font-size: clamp(1.2rem, 2.6vw, 1.45rem); letter-spacing: -0.01em;
  line-height: 1.25; margin: 2.2em 0 0.7em; padding-top: 0.6em;
  border-top: 1px solid var(--border);
}
.legal-prose h3 {
  font-weight: 600; color: var(--text); font-size: 1.05rem;
  margin: 1.6em 0 0.5em;
}
.legal-prose p { margin: 0 0 1.05em; }
.legal-prose ul, .legal-prose ol { margin: 0 0 1.15em; padding-left: 1.35em; }
.legal-prose li { margin: 0.4em 0; }
.legal-prose li::marker { color: var(--accent); }
.legal-prose strong { color: var(--text); font-weight: 600; }
.legal-prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.legal-prose a:hover { text-decoration: none; }
.legal-prose code {
  font-family: var(--font-mono); font-size: 0.88em;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 6px; padding: 1px 6px;
}
.legal-prose table {
  width: 100%; border-collapse: collapse; margin: 0 0 1.4em; font-size: 0.92rem;
}
.legal-prose th, .legal-prose td {
  text-align: left; padding: 10px 12px; border: 1px solid var(--border);
  vertical-align: top;
}
.legal-prose th { color: var(--text); font-weight: 600; background: var(--surface); }
.legal-prose hr { border: none; border-top: 1px solid var(--border); margin: 2em 0; }

.legal-footer { border-top: 1px solid var(--border); padding-block: 28px; }
.legal-footer-inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 14px; max-width: 760px;
}
.legal-footer-links { display: flex; flex-wrap: wrap; gap: 18px; }
.legal-footer-links a { color: var(--text-mid); text-decoration: none; font-size: 14px; }
.legal-footer-links a:hover { color: var(--accent); }
.legal-copy { color: var(--text-dim); font-size: 13px; }

@media (max-width: 760px) {
  .legal-footer-inner { flex-direction: column; align-items: flex-start; }
}

/* Aviso de consentimiento (habeas data) bajo el formulario del waitlist. */
.waitlist-consent {
  margin-top: 12px; font-size: 12.5px; line-height: 1.5; color: var(--text-dim); max-width: 470px;
}
.waitlist-consent a { color: var(--text-mid); text-decoration: underline; text-underline-offset: 2px; }
.waitlist-consent a:hover { color: var(--accent); }