/* ═══════════════════════════════════════════════════════════════
   AI-VIDEO · LANDING v7 "PROMETHEUS"
   Cinematografía web: obturador, luz volumétrica, grano de película.
   Diseño: dark-cinema con acento magenta. Todo CSS/SVG/Canvas.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --ink:        #0a0710;
  --ink-2:      #140d1c;
  --surface:    #170f21;
  --surface-2:  #1e1429;
  --line:       rgba(255,255,255,.09);
  --line-2:     rgba(255,255,255,.16);
  --fg:         #f6eef5;
  --fg-2:       #c7b3c4;
  --fg-3:       #8e7a8c;
  --accent:     #ff2d78;
  --accent-2:   #ff6ba8;
  --accent-deep:#b8004f;
  --cyan:       #34e0d0;
  --gold:       #ffb84d;
  --violet:     #9d6bff;
  --grad-brand: linear-gradient(115deg, #ff2d78 0%, #ff6ba8 45%, #9d6bff 100%);
  --grad-cyan:  linear-gradient(115deg, #34e0d0, #3b82f6);
  /* N-31 · Reserva explícita de símbolos. Sora y Spline Sans Mono no
     contienen los bloques de flechas (U+2190–21FF) ni de símbolos
     misceláneos (U+2700–27BF), y la landing usa → y ✓ en texto visible.
     Sin esta declaración, cada sistema operativo elegiría por su cuenta una
     fuente distinta para esos glifos, con alturas y pesos dispares. Estas
     familias son del SISTEMA: no se descarga nada. Detalle completo en el
     bloque equivalente de motif.css. */
  --font-symbols: 'Segoe UI Symbol', 'Apple Symbols', 'Noto Sans Symbols 2';
  --font:       'Sora', 'Nunito', var(--font-symbols), system-ui, -apple-system, sans-serif;
  --font-mono:  'Spline Sans Mono', var(--font-symbols), ui-monospace, monospace;
  --ease-out:   cubic-bezier(.16,1,.3,1);
  --ease-io:    cubic-bezier(.7,0,.3,1);
  --maxw:       1200px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font);
  background: var(--ink);
  color: var(--fg);
  line-height: 1.6;
  overflow-x: hidden;
  font-feature-settings: 'ss01','cv01';
  -webkit-font-smoothing: antialiased;
}
body.intro-locked { overflow: hidden; height: 100vh; }

img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }

/* Accesibilidad: foco visible siempre, nunca eliminado */
:focus-visible {
  outline: 2.5px solid var(--accent-2);
  outline-offset: 3px;
  border-radius: 4px;
}
.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 1000;
  background: var(--accent); color: #fff; padding: 12px 22px;
  border-radius: 0 0 12px 12px; font-weight: 700; font-size: 14px;
  transition: top .18s var(--ease-out);
}
.skip-link:focus { top: 0; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ═══════════════════════════════════════════════
   1 · INTRO CINEMATOGRÁFICA (obturador + trazo)
   ═══════════════════════════════════════════════ */
#intro {
  position: fixed; inset: 0; z-index: 900;
  background: radial-gradient(ellipse 120% 80% at 50% 45%, #241531 0%, #0a0710 62%);
  display: grid; place-items: center;
  overflow: hidden;
}
#intro[hidden] { display: none; }

/* haces de luz volumétrica que barren la escena */
.intro-beams { position: absolute; inset: -20%; pointer-events: none; opacity: 0; }
.intro-beams span {
  position: absolute; top: -10%; left: 50%; width: 2px; height: 130%;
  background: linear-gradient(to bottom, transparent, var(--accent-2), transparent);
  transform-origin: top center; filter: blur(2px);
}
.intro-beams span:nth-child(1) { transform: rotate(-24deg) translateX(-280px); opacity: .5; }
.intro-beams span:nth-child(2) { transform: rotate(-8deg)  translateX(-90px);  opacity: .3; width: 3px; }
.intro-beams span:nth-child(3) { transform: rotate(9deg)   translateX(110px);  opacity: .42; }
.intro-beams span:nth-child(4) { transform: rotate(26deg)  translateX(300px);  opacity: .28; width: 4px; }

/* núcleo: marca que se dibuja sola */
.intro-core { position: relative; display: grid; place-items: center; z-index: 3; }
.intro-mark { width: clamp(120px, 22vw, 190px); height: auto; overflow: visible; }
.intro-mark .ring {
  fill: none; stroke: url(#introGrad); stroke-width: 2.4; stroke-linecap: round;
  stroke-dasharray: 302; stroke-dashoffset: 302;
}
.intro-mark .blade {
  fill: none; stroke: rgba(255,255,255,.5); stroke-width: 1.1;
  stroke-dasharray: 120; stroke-dashoffset: 120;
}
.intro-mark .tri { fill: #fff; opacity: 0; transform-origin: 50px 50px; transform: scale(.4); }
.intro-mark .pulse { fill: none; stroke: var(--accent); stroke-width: 1.5; opacity: 0; }

/* wordmark con máscara de revelado por letra */
.intro-word {
  margin-top: 26px; display: flex; gap: .02em; overflow: hidden;
  font-size: clamp(30px, 8vw, 68px); font-weight: 800; letter-spacing: -.045em;
}
.intro-word span {
  display: inline-block; transform: translateY(115%) rotate(6deg);
  background: linear-gradient(180deg, #fff 30%, #d8c2d6);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.intro-word span.dot {
  background: var(--grad-brand); -webkit-background-clip: text; background-clip: text;
}
.intro-tag {
  margin-top: 12px; font-family: var(--font-mono); font-size: clamp(9px, 1.8vw, 11.5px);
  letter-spacing: .42em; text-transform: uppercase; color: var(--fg-3);
  opacity: 0; text-align: center;
}

/* barra de carga como claqueta */
.intro-load {
  position: absolute; bottom: 12%; left: 50%; transform: translateX(-50%);
  width: min(220px, 50vw); height: 2px; background: rgba(255,255,255,.12);
  border-radius: 2px; overflow: hidden; opacity: 0;
}
.intro-load i { display: block; height: 100%; width: 0; background: var(--grad-brand); }

/* obturador de 6 hojas que se abre al final */
.shutter { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.shutter b {
  position: absolute; left: 50%; top: 50%; width: 160vmax; height: 160vmax;
  background: var(--ink); transform-origin: 0 0;
}
.intro-skip {
  position: absolute; right: 22px; bottom: 22px; z-index: 8;
  font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--fg-3); padding: 9px 16px; border: 1px solid var(--line-2);
  border-radius: 999px; opacity: 0; transition: color .2s, border-color .2s, opacity .4s;
}
.intro-skip:hover { color: var(--fg); border-color: var(--accent); }

/* ═══════════════════════════════════════════════
   2 · NAV
   ═══════════════════════════════════════════════ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 300;
  display: flex; align-items: center; gap: 28px;
  padding: 16px clamp(16px, 4vw, 44px);
  transition: background .3s, backdrop-filter .3s, border-color .3s, padding .3s;
  border-bottom: 1px solid transparent;
}
.nav.solid {
  background: rgba(10,7,16,.78); backdrop-filter: blur(20px) saturate(1.4);
  border-bottom-color: var(--line); padding-top: 11px; padding-bottom: 11px;
}
.nav-logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 17px; letter-spacing: -.02em; }
.nav-logo .m {
  width: 30px; height: 30px; border-radius: 9px; background: var(--grad-brand);
  display: grid; place-items: center; font-size: 12px; color: #fff;
  box-shadow: 0 4px 16px rgba(255,45,120,.42);
}
.nav-links { display: flex; gap: 4px; margin-left: auto; }
.nav-links a {
  font-size: 13.5px; font-weight: 600; color: var(--fg-2); padding: 8px 14px;
  border-radius: 9px; transition: color .18s, background .18s;
}
.nav-links a:hover { color: var(--fg); background: rgba(255,255,255,.06); }
.nav-cta {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--grad-brand); color: #fff; font-weight: 700; font-size: 13.5px;
  padding: 10px 20px; border-radius: 999px;
  box-shadow: 0 6px 22px rgba(255,45,120,.34);
  transition: transform .18s var(--ease-out), box-shadow .18s;
}
.nav-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(255,45,120,.5); }
.nav-burger { display: none; font-size: 19px; color: var(--fg); padding: 8px; }

/* ═══════════════════════════════════════════════
   3 · HERO
   ═══════════════════════════════════════════════ */
.hero {
  position: relative; min-height: 100svh; display: grid; place-items: center;
  padding: 120px clamp(16px,4vw,44px) 80px; overflow: hidden; isolation: isolate;
}
#nebula { position: absolute; inset: 0; z-index: -2; opacity: .85; }
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%,  rgba(255,45,120,.17), transparent 70%),
    radial-gradient(ellipse 60% 45% at 12% 78%, rgba(157,107,255,.15), transparent 70%),
    radial-gradient(ellipse 50% 40% at 88% 62%, rgba(52,224,208,.10), transparent 70%);
}
.hero-inner { max-width: 940px; text-align: center; position: relative; }

.eyebrow-pill {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 16px 7px 9px; border-radius: 999px;
  background: rgba(255,45,120,.11); border: 1px solid rgba(255,45,120,.3);
  font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent-2); margin-bottom: 26px;
}
.eyebrow-pill .v {
  background: var(--accent); color: #fff; border-radius: 999px;
  padding: 2px 9px; font-size: 10px; letter-spacing: .06em;
}

h1.hero-title {
  font-size: clamp(38px, 8.2vw, 92px); line-height: .98; font-weight: 800;
  letter-spacing: -.045em; margin-bottom: 24px;
}
h1.hero-title .grad {
  background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent;
  /* respaldo si background-clip falla */
  display: inline-block;
}
h1.hero-title .line { display: block; overflow: hidden; }
h1.hero-title .line > i { display: inline-block; font-style: normal; }

.hero-sub {
  font-size: clamp(15px, 2.3vw, 20px); color: var(--fg-2); max-width: 660px;
  margin: 0 auto 36px; font-weight: 450; line-height: 1.62;
}
.hero-sub b { color: var(--fg); font-weight: 700; }

.hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 46px; }
.btn-hero {
  display: inline-flex; align-items: center; gap: 10px; font-weight: 700;
  padding: 15px 30px; border-radius: 999px; font-size: 15px;
  transition: transform .2s var(--ease-out), box-shadow .2s, background .2s, border-color .2s;
}
.btn-hero.primary {
  background: var(--grad-brand); color: #fff; box-shadow: 0 10px 34px rgba(255,45,120,.38);
  position: relative; overflow: hidden;
}
.btn-hero.primary::before {
  content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35), transparent 70%);
  transform: translateX(-120%);
}
.btn-hero.primary:hover { transform: translateY(-3px); box-shadow: 0 18px 46px rgba(255,45,120,.5); }
.btn-hero.primary:hover::before { animation: sheen .8s var(--ease-out); }
@keyframes sheen { to { transform: translateX(120%); } }
.btn-hero.ghost { border: 1.5px solid var(--line-2); color: var(--fg); background: rgba(255,255,255,.03); }
.btn-hero.ghost:hover { border-color: var(--accent-2); background: rgba(255,45,120,.1); transform: translateY(-3px); }

.hero-proof { display: flex; gap: clamp(18px,4vw,48px); justify-content: center; flex-wrap: wrap; }
.hero-proof div { text-align: center; }
.hero-proof .n {
  font-size: clamp(22px,4vw,32px); font-weight: 800; letter-spacing: -.03em;
  background: linear-gradient(180deg,#fff,#c9aec6); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-proof .l { font-size: 11px; color: var(--fg-3); letter-spacing: .11em; text-transform: uppercase; font-weight: 700; margin-top: 2px; }

/* tira de frames vectoriales flotando */
.hero-strip {
  margin-top: 60px; display: flex; gap: 14px; justify-content: center;
  perspective: 1200px; pointer-events: none;
}
.hero-strip .f {
  width: clamp(74px, 11vw, 116px); aspect-ratio: 9/16; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--line-2); box-shadow: 0 18px 44px rgba(0,0,0,.55);
  animation: floatY 6s var(--ease-io) infinite;
}
.hero-strip .f:nth-child(1) { transform: rotateY(17deg) translateZ(-40px); animation-delay: 0s; }
.hero-strip .f:nth-child(2) { transform: rotateY(9deg)  translateZ(-14px); animation-delay: .5s; }
.hero-strip .f:nth-child(3) { transform: none; animation-delay: 1s; }
.hero-strip .f:nth-child(4) { transform: rotateY(-9deg) translateZ(-14px); animation-delay: 1.5s; }
.hero-strip .f:nth-child(5) { transform: rotateY(-17deg) translateZ(-40px); animation-delay: 2s; }
@keyframes floatY { 0%,100% { translate: 0 0 } 50% { translate: 0 -12px } }

.scroll-cue {
  position: absolute; bottom: 26px; left: 50%; translate: -50% 0;
  font-size: 10px; letter-spacing: .28em; text-transform: uppercase; color: var(--fg-3);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.scroll-cue i { width: 1px; height: 34px; background: linear-gradient(var(--accent), transparent); animation: cue 2s infinite; }
@keyframes cue { 0%,100% { opacity: .3; scale: 1 .5 } 50% { opacity: 1; scale: 1 1 } }

/* ═══════════════════════════════════════════════
   4 · SECCIONES
   ═══════════════════════════════════════════════ */
section { position: relative; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: clamp(72px,10vw,132px) clamp(16px,4vw,44px); }
.sec-head { max-width: 720px; margin-bottom: 52px; }
.sec-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.sec-eyebrow {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--accent-2); margin-bottom: 14px; display: block;
}
h2.sec-title {
  font-size: clamp(28px,5vw,52px); line-height: 1.06; font-weight: 800; letter-spacing: -.038em;
  margin-bottom: 16px;
}
h2.sec-title .grad { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sec-sub { font-size: clamp(14.5px,1.9vw,17.5px); color: var(--fg-2); line-height: 1.65; }
.sec-sub b { color: var(--fg); font-weight: 700; }

.rule { height: 1px; background: linear-gradient(90deg, transparent, var(--line-2), transparent); }

/* marquesina de proveedores */
.marquee { overflow: hidden; padding: 26px 0; border-block: 1px solid var(--line); background: rgba(255,255,255,.015); }
.marquee-track { display: flex; gap: 56px; width: max-content; animation: slide 32s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }
.marquee-item {
  display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700;
  color: var(--fg-3); white-space: nowrap; letter-spacing: -.01em;
}
.marquee-item i { color: var(--accent); font-size: 13px; }

/* rejilla de capacidades */
.cap-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: 18px; }
.cap {
  position: relative; padding: 28px 26px 30px; border-radius: 18px;
  background: linear-gradient(160deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line); overflow: hidden;
  transition: transform .3s var(--ease-out), border-color .3s, box-shadow .3s;
}
.cap::before {
  content: ''; position: absolute; inset: 0; opacity: 0; transition: opacity .3s;
  background: radial-gradient(400px circle at var(--mx,50%) var(--my,0%), rgba(255,45,120,.13), transparent 65%);
}
.cap:hover { transform: translateY(-5px); border-color: var(--line-2); box-shadow: 0 24px 60px rgba(0,0,0,.5); }
.cap:hover::before { opacity: 1; }
.cap .ico {
  width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center;
  font-size: 18px; margin-bottom: 18px; position: relative;
}
.cap .ico.pink   { background: rgba(255,45,120,.14);  color: var(--accent-2); }
.cap .ico.cyan   { background: rgba(52,224,208,.13);  color: var(--cyan); }
.cap .ico.gold   { background: rgba(255,184,77,.13);  color: var(--gold); }
.cap .ico.violet { background: rgba(157,107,255,.15); color: var(--violet); }
.cap h3 { font-size: 18.5px; font-weight: 750; letter-spacing: -.02em; margin-bottom: 9px; position: relative; }
.cap p { font-size: 14px; color: var(--fg-2); line-height: 1.65; position: relative; }
.cap .tagline {
  margin-top: 14px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--fg-3); position: relative;
}
.cap.wide { grid-column: span 2; }
@media (max-width: 720px) { .cap.wide { grid-column: span 1; } }

/* pipeline visual */
.pipeline { display: grid; gap: 14px; }
.pl-step {
  display: grid; grid-template-columns: 62px 1fr auto; gap: 20px; align-items: center;
  padding: 20px 24px; border-radius: 16px; border: 1px solid var(--line);
  background: rgba(255,255,255,.022); transition: border-color .25s, background .25s, transform .25s var(--ease-out);
}
.pl-step:hover { border-color: rgba(255,45,120,.34); background: rgba(255,45,120,.045); transform: translateX(5px); }
.pl-step .n {
  width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 15px; font-weight: 700;
  background: rgba(255,255,255,.05); border: 1px solid var(--line-2); color: var(--accent-2);
}
.pl-step h4 { font-size: 16px; font-weight: 700; letter-spacing: -.015em; }
.pl-step p { font-size: 13.5px; color: var(--fg-3); margin-top: 3px; }
.pl-step .chip-model {
  font-family: var(--font-mono); font-size: 10.5px; padding: 5px 11px; border-radius: 999px;
  background: rgba(52,224,208,.1); color: var(--cyan); border: 1px solid rgba(52,224,208,.22);
  white-space: nowrap;
}
@media (max-width: 640px) {
  .pl-step { grid-template-columns: 46px 1fr; }
  .pl-step .chip-model { grid-column: 2; justify-self: start; }
}

/* laboratorio de frames en vivo */
.lab {
  border-radius: 22px; border: 1px solid var(--line); overflow: hidden;
  background: linear-gradient(160deg, var(--surface-2), var(--surface));
}
.lab-bar {
  display: flex; align-items: center; gap: 10px; padding: 14px 20px;
  border-bottom: 1px solid var(--line); background: rgba(0,0,0,.24);
}
.lab-bar .dots { display: flex; gap: 6px; }
.lab-bar .dots b { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.16); }
.lab-bar .dots b:first-child { background: rgba(255,45,120,.6); }
.lab-bar .t { font-family: var(--font-mono); font-size: 11.5px; color: var(--fg-3); }
.lab-body { padding: 22px; }
.lab-input { display: flex; gap: 10px; flex-wrap: wrap; }
.lab-input input {
  flex: 1; min-width: 220px; padding: 13px 18px; border-radius: 12px;
  background: rgba(0,0,0,.34); border: 1px solid var(--line-2); color: var(--fg);
  font-size: 14.5px; font-family: inherit; font-weight: 500;
}
.lab-input input::placeholder { color: var(--fg-3); }
.lab-input input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(255,45,120,.14); }
.lab-input button {
  padding: 13px 24px; border-radius: 12px; background: var(--grad-brand); color: #fff;
  font-weight: 700; font-size: 14.5px; display: inline-flex; align-items: center; gap: 8px;
  transition: transform .18s var(--ease-out), filter .18s;
}
.lab-input button:hover { transform: translateY(-2px); filter: brightness(1.08); }
.lab-input button:disabled { opacity: .5; transform: none; cursor: wait; }
.lab-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.lab-chip {
  font-size: 12.5px; padding: 7px 14px; border-radius: 999px; font-weight: 600;
  background: rgba(255,255,255,.045); border: 1px solid var(--line); color: var(--fg-2);
  transition: border-color .18s, color .18s, background .18s;
}
.lab-chip:hover { border-color: var(--accent-2); color: var(--fg); background: rgba(255,45,120,.1); }
.lab-out { display: grid; grid-template-columns: minmax(0,190px) 1fr; gap: 24px; margin-top: 22px; align-items: start; }
@media (max-width: 620px) { .lab-out { grid-template-columns: 1fr; } }
.lab-canvas {
  aspect-ratio: 9/16; border-radius: 14px; overflow: hidden; border: 1px solid var(--line-2);
  background: #0d0912; position: relative;
}
.lab-canvas img { width: 100%; height: 100%; object-fit: cover; }
.lab-canvas .ph { position: absolute; inset: 0; display: grid; place-items: center; color: var(--fg-3); font-size: 12px; }
.dna-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.dna {
  font-family: var(--font-mono); font-size: 11px; padding: 6px 13px; border-radius: 999px;
  border: 1px solid var(--line-2); color: var(--fg-2); background: rgba(255,255,255,.035);
}
.dna b { color: var(--accent-2); }
.lab-note { font-size: 13.5px; color: var(--fg-2); line-height: 1.68; }
.lab-note code {
  font-family: var(--font-mono); font-size: 12px; background: rgba(255,45,120,.11);
  color: var(--accent-2); padding: 2px 7px; border-radius: 5px;
}

/* consejo editorial */
.council-row { display: grid; grid-template-columns: repeat(auto-fit,minmax(230px,1fr)); gap: 16px; }
.cm {
  padding: 24px 22px; border-radius: 17px; border: 1px solid var(--line);
  background: rgba(255,255,255,.022); transition: transform .28s var(--ease-out), border-color .28s;
}
.cm:hover { transform: translateY(-6px) rotate(-.6deg); border-color: var(--line-2); }
.cm .av {
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  font-size: 16px; margin-bottom: 15px; background: var(--grad-brand); color: #fff;
}
.cm:nth-child(2) .av { background: var(--grad-cyan); }
.cm:nth-child(3) .av { background: linear-gradient(115deg,#ffb84d,#ff7b3d); }
.cm:nth-child(4) .av { background: linear-gradient(115deg,#9d6bff,#5b7cff); }
.cm h4 { font-size: 16.5px; font-weight: 750; letter-spacing: -.02em; }
.cm p { font-size: 13.5px; color: var(--fg-2); margin-top: 7px; line-height: 1.6; }
.cm .ch { font-family: var(--font-mono); font-size: 10px; color: var(--fg-3); margin-top: 13px; letter-spacing: .05em; }

/* comparativa */
.vs { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 720px) { .vs { grid-template-columns: 1fr; } }
.vs-col { padding: 26px 24px; border-radius: 18px; border: 1px solid var(--line); }
.vs-col.bad { background: rgba(255,255,255,.02); }
.vs-col.good { background: linear-gradient(160deg, rgba(255,45,120,.09), rgba(157,107,255,.05)); border-color: rgba(255,45,120,.3); }
.vs-col h4 { font-size: 15px; font-weight: 750; margin-bottom: 16px; display: flex; align-items: center; gap: 9px; }
.vs-col.bad h4 { color: var(--fg-3); }
.vs-col.good h4 { color: var(--accent-2); }
.vs-col ul { list-style: none; display: grid; gap: 11px; }
.vs-col li { font-size: 14px; color: var(--fg-2); display: flex; gap: 10px; line-height: 1.55; }
.vs-col li i { margin-top: 3px; flex-shrink: 0; font-size: 13px; }
.vs-col.bad li i { color: #7a5f72; }
.vs-col.good li i { color: var(--accent); }

/* métricas */
.metrics { display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: 1px; background: var(--line); border-radius: 18px; overflow: hidden; border: 1px solid var(--line); }
.metric { padding: 30px 24px; background: var(--surface); text-align: center; }
.metric .n { font-size: clamp(28px,4.4vw,42px); font-weight: 800; letter-spacing: -.04em; background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.metric .l { font-size: 11.5px; color: var(--fg-3); letter-spacing: .1em; text-transform: uppercase; font-weight: 700; margin-top: 6px; }
.metric .d { font-size: 12.5px; color: var(--fg-2); margin-top: 9px; line-height: 1.5; }

/* FAQ */
.faq { display: grid; gap: 10px; max-width: 820px; margin: 0 auto; }
.faq details {
  border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.022);
  overflow: hidden; transition: border-color .22s;
}
.faq details[open] { border-color: rgba(255,45,120,.32); background: rgba(255,45,120,.045); }
.faq summary {
  padding: 18px 22px; cursor: pointer; font-weight: 700; font-size: 15.5px;
  display: flex; align-items: center; gap: 14px; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .pm { margin-left: auto; color: var(--accent-2); transition: transform .25s var(--ease-out); font-size: 13px; }
.faq details[open] summary .pm { transform: rotate(45deg); }
.faq .a { padding: 0 22px 20px 56px; font-size: 14.5px; color: var(--fg-2); line-height: 1.7; }
@media (max-width: 560px) { .faq .a { padding-left: 22px; } }

/* CTA final */
.cta-final {
  position: relative; text-align: center; border-radius: 26px; overflow: hidden;
  padding: clamp(48px,8vw,84px) clamp(22px,5vw,60px);
  background: linear-gradient(150deg, #22102c, #140c1d 60%, #1c0f26);
  border: 1px solid rgba(255,45,120,.24);
}
.cta-final::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 55% at 50% 0%, rgba(255,45,120,.24), transparent 70%);
}
.cta-final > * { position: relative; }
.cta-final h2 { font-size: clamp(28px,5.4vw,50px); font-weight: 800; letter-spacing: -.04em; line-height: 1.05; margin-bottom: 16px; }
.cta-final p { color: var(--fg-2); font-size: clamp(14.5px,2vw,17.5px); max-width: 540px; margin: 0 auto 32px; }

/* FOOTER */
footer.site { border-top: 1px solid var(--line); background: rgba(0,0,0,.35); }
.foot-grid { display: grid; grid-template-columns: 1.6fr repeat(3,1fr); gap: 40px; }
@media (max-width: 760px) { .foot-grid { grid-template-columns: 1fr 1fr; gap: 28px; } }
.foot-col h5 { font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 14px; font-weight: 700; }
.foot-col a, .foot-col span { display: block; font-size: 13.5px; color: var(--fg-2); padding: 4px 0; transition: color .16s; }
.foot-col a:hover { color: var(--accent-2); }
.foot-bottom {
  border-top: 1px solid var(--line); padding: 20px clamp(16px,4vw,44px);
  display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
  font-size: 12.5px; color: var(--fg-3); max-width: var(--maxw); margin: 0 auto;
}

/* ═══════════════════════════════════════════════
   5 · ANIMACIÓN AL SCROLL
   ═══════════════════════════════════════════════ */
[data-rise] { opacity: 0; transform: translateY(30px); transition: opacity .72s var(--ease-out), transform .72s var(--ease-out); }
[data-rise].in { opacity: 1; transform: none; }
[data-rise][data-d="1"] { transition-delay: .08s }
[data-rise][data-d="2"] { transition-delay: .16s }
[data-rise][data-d="3"] { transition-delay: .24s }
[data-rise][data-d="4"] { transition-delay: .32s }
[data-rise][data-d="5"] { transition-delay: .4s }

/* grano de película global — la firma cinematográfica */
.grain {
  position: fixed; inset: 0; z-index: 400; pointer-events: none; opacity: .038;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grainShift 1.1s steps(4) infinite;
}
@keyframes grainShift {
  0%   { transform: translate(0,0) }
  25%  { transform: translate(-2%,1%) }
  50%  { transform: translate(1%,-2%) }
  75%  { transform: translate(-1%,-1%) }
  100% { transform: translate(0,0) }
}

/* barra de progreso de lectura */
.progress { position: fixed; top: 0; left: 0; height: 2.5px; z-index: 500; background: var(--grad-brand); width: 0; }

/* ═══════════════════════════════════════════════
   6 · RESPONSIVE + MOVIMIENTO REDUCIDO
   ═══════════════════════════════════════════════ */
@media (max-width: 860px) {
  .nav-links { display: none; }
  .nav-burger { display: block; margin-left: auto; }
  .nav-links.open {
    display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0;
    background: rgba(10,7,16,.97); backdrop-filter: blur(20px); padding: 12px;
    border-bottom: 1px solid var(--line); gap: 2px; margin-left: 0;
  }
  .nav-links.open a { padding: 13px 16px; font-size: 15px; }
  .hero-strip .f:nth-child(1), .hero-strip .f:nth-child(5) { display: none; }
}
@media (max-width: 520px) {
  .hero-strip .f:nth-child(2), .hero-strip .f:nth-child(4) { display: none; }
  .hero-strip .f:nth-child(3) { width: 160px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  [data-rise] { opacity: 1 !important; transform: none !important; }
  .grain, #nebula, .intro-beams { display: none !important; }
  .hero-strip .f { animation: none !important; }
}

@media (prefers-contrast: more) {
  :root { --fg-2: #e8dae6; --fg-3: #c0adbe; --line: rgba(255,255,255,.22); --line-2: rgba(255,255,255,.4); }
}

/* impresión limpia */
@media print {
  #intro, .grain, .nav, #nebula, .progress, .scroll-cue { display: none !important; }
  body { background: #fff; color: #000; }
}