/* =========================================================
   Jonatan Correa — one-page
   Estilo: iOS 26 "Liquid Glass" · mobile-first
   ========================================================= */

:root {
  --bg: #0B0518;
  --bg-brand: #0F071E;
  --text: #F7F7F7;
  --muted: rgba(247, 247, 247, 0.70);
  --faint: rgba(247, 247, 247, 0.55);

  --accent: #7C3AED;   /* morado */
  --accent-2: #2563EB; /* azul   */
  --accent-3: #22D3EE; /* cian   */

  --line: rgba(255, 255, 255, 0.14);
  --line-strong: rgba(255, 255, 255, 0.22);

  --font-h: 'Poppins', system-ui, sans-serif;
  --font-b: 'Literata', Georgia, serif;
  --font-d: 'Fraunces', Georgia, serif;

  --r-card: 24px;
  --r-lg: 30px;
  --maxw: 1080px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Sprite de iconos SVG: fuera del flujo, sin afectar al layout */
.svg-sprite { position: absolute; }

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 90px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-b);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, .nav__logo { font-family: var(--font-h); letter-spacing: -0.015em; }

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.icon {
  width: 1.1em; height: 1.1em;
  stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  vertical-align: -0.18em; flex-shrink: 0;
}

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* ---------- Glows de fondo ---------- */
.bg-glows { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.glow { position: absolute; border-radius: 50%; filter: blur(70px); will-change: transform; }
.glow--purple { width: 50vw; height: 50vw; max-width: 480px; max-height: 480px; background: var(--accent); opacity: 0.30; top: -8%; right: -10%; animation: drift1 16s var(--ease) infinite; }
.glow--blue   { width: 55vw; height: 55vw; max-width: 520px; max-height: 520px; background: var(--accent-2); opacity: 0.26; top: 40%; left: -18%; animation: drift2 20s var(--ease) infinite; }
.glow--cyan   { width: 40vw; height: 40vw; max-width: 360px; max-height: 360px; background: var(--accent-3); opacity: 0.20; bottom: -6%; right: 8%; animation: drift3 18s var(--ease) infinite; }

/* ---------- Grano / textura ---------- */
.grain {
  position: fixed; inset: 0; z-index: 40; pointer-events: none;
  opacity: 0.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@keyframes drift1 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(34px,-28px); } }
@keyframes drift2 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-40px,24px); } }
@keyframes drift3 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(20px,34px); } }

/* ---------- Cristal base ---------- */
.glass {
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  backdrop-filter: blur(28px) saturate(180%);
  background: linear-gradient(160deg, rgba(247,247,247,0.12), rgba(247,247,247,0.035));
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.45), 0 16px 44px rgba(0,0,0,0.32);
}
.glass--accent { border-color: rgba(124,58,237,0.42); }

/* =========================================================
   NAV
   ========================================================= */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; padding: 14px 16px; transition: padding .3s var(--ease); }
.nav.is-scrolled { padding-top: 8px; padding-bottom: 8px; }
.nav.is-scrolled .nav__inner { box-shadow: inset 0 1px 1px rgba(255,255,255,0.45), 0 10px 30px rgba(0,0,0,0.45); }
.nav__inner {
  max-width: var(--maxw); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 9px 9px 16px; border-radius: 999px; gap: 8px;
}
.nav__logo { font-weight: 600; font-size: 15px; color: #fff; white-space: nowrap; flex-shrink: 0; }
/* Menú móvil = panel desplegable animado (estilo iOS 26).
   Siempre presente; se muestra/oculta con opacidad + escala + visibilidad. */
.nav__menu {
  display: flex; flex-direction: column; gap: 4px;
  position: absolute; top: 72px; left: 16px; right: 16px;
  padding: 14px; border-radius: var(--r-card);
  font-family: var(--font-h); font-size: 16px; color: var(--text);
  -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%);
  background: linear-gradient(160deg, rgba(20,12,40,0.92), rgba(11,5,24,0.92));
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.22), 0 18px 46px rgba(0,0,0,0.5);
  transform-origin: top right;
  /* estado cerrado */
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(-12px) scale(0.96);
  transition: opacity .36s var(--ease), transform .42s var(--ease), visibility .42s var(--ease);
}
.nav__menu a { padding: 12px 14px; border-radius: 14px; color: var(--text); transition: color .2s, background .2s; }
.nav__menu a:hover { background: rgba(247,247,247,0.06); color: #fff; }
.nav .nav__cta { display: none; }
/* Micro-animación sutil del CTA "Hablemos": resplandor que respira lento */
@keyframes navCtaBreathe {
  0%, 100% { box-shadow: inset 0 1px 0.5px rgba(255,255,255,0.55), 0 4px 14px rgba(0,0,0,0.22), 0 0 0 0 rgba(124,58,237,0); }
  50%      { box-shadow: inset 0 1px 0.5px rgba(255,255,255,0.55), 0 4px 14px rgba(0,0,0,0.22), 0 0 18px 1px rgba(124,58,237,0.40); }
}
.nav__idea {
  /* Oculto en móvil: el logo + hamburguesa respiran, sin desbordes en pantallas pequeñas.
     La conversión en móvil queda cubierta por el botón flotante de WhatsApp. */
  display: none; align-items: center; gap: 5px;
  margin: 0 auto; padding: 6px 2px;
  font-family: var(--font-h); font-size: 11px; font-weight: 500;
  letter-spacing: -0.005em;
  color: rgba(247, 247, 247, 0.85); white-space: nowrap;
  transition: color .2s var(--ease);
}
.nav__idea strong { font-weight: 600; color: #C4B5FD; }
.nav__idea:hover { color: #fff; }
.nav__idea:hover strong { color: #DCE7FF; }
.nav__toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(247,247,247,0.07); border: 1px solid var(--line-strong);
  color: #fff; cursor: pointer;
}
.nav__toggle .icon { width: 21px; height: 21px; vertical-align: middle; }
.nav__menu.is-open {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateY(0) scale(1);
}
/* Aparición escalonada de los enlaces (suave, tipo iOS) */
.nav__menu a { opacity: 0; transform: translateY(-6px); transition: color .2s, background .2s, opacity .3s var(--ease), transform .3s var(--ease); }
.nav__menu.is-open a { opacity: 1; transform: none; }
.nav__menu.is-open a:nth-child(1) { transition-delay: .06s; }
.nav__menu.is-open a:nth-child(2) { transition-delay: .12s; }
.nav__menu.is-open a:nth-child(3) { transition-delay: .18s; }
.nav__menu.is-open a:nth-child(4) { transition-delay: .24s; }

/* =========================================================
   BOTONES (todos translúcidos, degradado + cristal)
   ========================================================= */
.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-family: var(--font-h); font-weight: 500; font-size: 13px; color: #fff;
  padding: 9px 16px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line-strong);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn--lg { font-size: 14px; padding: 11px 22px; }

.btn--primary {
  border-color: rgba(180,205,255,0.5);
  -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.38), rgba(255,255,255,0.03) 45%, rgba(255,255,255,0) 62%),
    linear-gradient(120deg, rgba(124,58,237,0.34), rgba(37,99,235,0.24), rgba(34,211,238,0.20));
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.65), 0 8px 24px rgba(80,70,200,0.32);
}
.btn--glass, .btn--ghost {
  color: rgba(247,247,247,0.95);
  -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
  background: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.03));
  border: 1px solid rgba(255,255,255,0.28);
  box-shadow: inset 0 1px 0.5px rgba(255,255,255,0.55), 0 4px 14px rgba(0,0,0,0.22);
}

/* Brillo especular que recorre el botón (leve, fluido, con pausa larga) */
.btn__shine {
  position: absolute; top: 0; left: -75%; width: 60%; height: 100%;
  background: linear-gradient(105deg, rgba(255,255,255,0), rgba(255,255,255,0.24) 50%, rgba(255,255,255,0));
  transform: skewX(-18deg);
  animation: shine 8s cubic-bezier(0.45, 0, 0.2, 1) infinite;
}
@keyframes shine {
  0%, 38% { left: -75%; }      /* pausa larga antes de aparecer */
  66%, 100% { left: 175%; }    /* barrido suave y descanso */
}

/* =========================================================
   HERO
   ========================================================= */
.hero { position: relative; z-index: 1; padding: 112px 0 32px; }
.hero__inner { display: grid; grid-template-columns: 1fr; gap: 40px; }
.hero__copy { max-width: 640px; }

/* Retrato editorial del hero */
.hero__visual { position: relative; justify-self: center; width: 100%; max-width: 300px; }
.hero__visual::before {
  content: ""; position: absolute; inset: -14% -8% -8%; z-index: -1;
  background: radial-gradient(58% 55% at 58% 40%, rgba(124,58,237,0.55), rgba(37,99,235,0.20) 55%, transparent 76%);
  filter: blur(28px);
}
.hero__photo {
  position: relative; width: 100%; aspect-ratio: 4 / 5;
  border-radius: 26px; overflow: hidden;
  border: 1px solid var(--line-strong);
  box-shadow: 0 30px 70px rgba(0,0,0,0.5), inset 0 1px 1px rgba(255,255,255,0.25);
}
.hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.hero__photo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(11,5,24,0) 46%, rgba(11,5,24,0.62) 100%),
    linear-gradient(150deg, rgba(124,58,237,0.20), rgba(34,211,238,0.10));
}
.hero__status {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 14px;
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  font-family: var(--font-h); font-size: 12px; font-weight: 500; color: #fff;
  padding: 8px 14px; border-radius: 999px;
  -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%);
  background: linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.04));
  border: 1px solid rgba(255,255,255,0.28);
  box-shadow: inset 0 1px 0.5px rgba(255,255,255,0.5), 0 6px 18px rgba(0,0,0,0.3);
}
.hero__status-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--accent-3);
  box-shadow: 0 0 0 0 rgba(34,211,238,0.55);
  animation: statusPulse 2.4s var(--ease) infinite;
}
@keyframes statusPulse {
  0% { box-shadow: 0 0 0 0 rgba(34,211,238,0.55); }
  70% { box-shadow: 0 0 0 9px rgba(34,211,238,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,211,238,0); }
}
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-h); font-size: 12px; font-weight: 500; color: #DCE7FF;
  padding: 7px 15px; border-radius: 999px; margin-bottom: 22px;
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  background: linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.03));
  border: 1px solid var(--line-strong);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
}
.hero__title { font-weight: 600; font-size: 32px; line-height: 1.14; color: #fff; margin: 0 0 18px; }
.br-mobile { display: inline; }
.nowrap { white-space: nowrap; }
.accent-name {
  font-family: var(--font-d);
  font-style: italic; font-weight: 600;
  /* Fraunces itálica tiene menor altura visual que Poppins al mismo tamaño:
     la subimos un punto para que "Jonatan" iguale ópticamente al resto del título. */
  font-size: 1.07em;
  letter-spacing: 0;
  /* evita que la cursiva se recorte por el clip del degradado (J a la izq, n a la der) */
  padding: 0 0.06em 0 0.14em; margin-left: -0.12em;
  background: linear-gradient(120deg, #ffffff 0%, #C4B5FD 48%, #67E8F9 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.hero__sub { font-size: 16px; line-height: 1.72; color: var(--muted); margin: 0 0 16px; max-width: 480px; }
.hero__sub:last-of-type { margin-bottom: 30px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }

/* =========================================================
   STATS
   ========================================================= */
.stats { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr; gap: 12px; margin: 4px auto 16px; }
/* Móvil: 2 columnas (número a la izq, texto a la der) */
.stat {
  border-radius: var(--r-card); padding: 20px 20px;
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 14px;
}
.stat__num { font-family: var(--font-h); font-weight: 600; font-size: 38px; line-height: 1; color: #fff; }
.stat__label { font-size: 13.5px; line-height: 1.3; color: var(--muted); }

/* +1M como cifra estrella: mismo tamaño que el resto, solo cambia el degradado */
.stat--hero {
  border-color: rgba(124,58,237,0.45);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.45), 0 16px 44px rgba(0,0,0,0.32), 0 0 52px rgba(124,58,237,0.20);
}
.stat--hero .stat__num {
  background: linear-gradient(120deg, #ffffff 0%, #C4B5FD 45%, #67E8F9 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* =========================================================
   SECCIONES
   ========================================================= */
.section { position: relative; z-index: 1; padding: 36px 24px; }
.eyebrow {
  font-family: var(--font-h); font-size: 14px; font-weight: 500; letter-spacing: 0.05em;
  color: #B9A3FF; margin: 0 0 16px; display: inline-flex; align-items: center; gap: 7px;
}

/* ---------- Encabezado editorial de sección ---------- */
.sec-head { display: flex; align-items: center; gap: 16px; margin: 0 0 30px; }
.sec-head__index {
  font-family: var(--font-h); font-weight: 700; font-size: 18px; line-height: 1;
  letter-spacing: 0;
  background: linear-gradient(135deg, #C4B5FD, #67E8F9);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.sec-head__label {
  font-family: var(--font-h); font-weight: 600; font-size: 18px;
  letter-spacing: 0; color: #fff;
  white-space: nowrap;
}
.sec-head__line { flex: 1; height: 1px; background: linear-gradient(90deg, var(--line-strong), transparent); }
/* Icono de sección (guiño vibe coder): badge tipo "code" que sustituye al número. */
.sec-head__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex-shrink: 0; box-sizing: border-box;
  border-radius: 11px; color: #1E40AF;
  background: rgba(30,64,175,0.09);
  border: 1px solid rgba(30,64,175,0.20);
}
.sec-head__icon .icon { width: 22px; height: 22px; }
.section__title { font-weight: 600; font-size: 26px; color: #fff; margin: 0 0 10px; }
.section__lead { font-size: 16px; line-height: 1.72; color: var(--muted); max-width: 560px; margin: 0 0 26px; }

/* ---------- Sobre mí ---------- */
.about { max-width: 660px; }
.about__text p { margin: 0 0 16px; font-size: 16px; line-height: 1.72; color: rgba(247, 247, 247, 0.82); }
.about__text p:last-child { margin-bottom: 0; }

/* ---------- LYTH (spotlight editorial, sin card) ---------- */
.lyth { position: relative; max-width: 620px; }
.lyth::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: -12%; top: -40px; width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(124,58,237,0.55), rgba(37,99,235,0.18) 55%, transparent 72%);
  filter: blur(50px);
}
.lyth__eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-h); font-size: 12px; font-weight: 500; letter-spacing: 0.04em;
  color: #C4B5FD; padding: 6px 13px; border-radius: 999px;
  background: rgba(124,58,237,0.18); border: 1px solid rgba(124,58,237,0.34);
}
.lyth__title {
  display: flex; align-items: center; gap: 0.12em;
  font-family: var(--font-h); font-weight: 700; font-size: 58px; line-height: 1;
  letter-spacing: -0.02em; margin: 18px 0 16px;
}
.lyth__word {
  background: linear-gradient(120deg, #ffffff 0%, #C4B5FD 46%, #67E8F9 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.lyth__bolt {
  width: auto; height: 0.86em; flex-shrink: 0;
  filter: drop-shadow(0 2px 12px rgba(124,58,237,0.35));
}
/* Logo oficial de LYTH (imágenes reales). Escalan con el font-size del título. */
.lyth__word-img { height: 0.72em; width: auto; display: block; }
.lyth__bolt-img {
  height: 0.94em; width: auto; display: block; flex-shrink: 0;
  filter: drop-shadow(0 4px 14px rgba(6,182,212,0.30));
}
/* Logotipo completo de LYTH (ícono + wordmark) — identidad real.
   Centrado, con un halo blur degradado integrado al fondo (cian/verde LYTH). */
.lyth__title--logo { position: relative; display: flex; justify-content: center; margin: 6px 0 22px; }
.lyth__title--logo::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 50%;
  width: 260px; height: 260px; transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(circle, rgba(34,211,238,0.22), rgba(45,212,191,0.10) 50%, transparent 70%);
  filter: blur(38px);
}
.lyth__logo-img { width: 250px; max-width: 100%; height: auto; display: block; margin: 0 auto; filter: drop-shadow(0 12px 30px rgba(6,182,212,0.26)); }
/* Halo del logo LYTH que late (solo se anima en desktop, ver @media) */
@keyframes lythHalo {
  0%, 100% { opacity: .6; transform: translate(-50%, -50%) scale(0.94); }
  50%      { opacity: 1; transform: translate(-50%, -50%) scale(1.07); }
}
.lyth__text { color: var(--muted); margin: 0 0 18px; max-width: 540px; }
.lyth__text:last-of-type { margin-bottom: 26px; }
.lyth__form { display: flex; flex-direction: column; gap: 10px; max-width: 440px; }
.lyth__form input {
  flex: 1; font-family: var(--font-h); font-size: 14px; color: #fff;
  padding: 13px 18px; border-radius: 999px;
  background: rgba(11,5,24,0.5); border: 1px solid var(--line-strong);
}
.lyth__form input::placeholder { color: var(--faint); }
.lyth__form input:focus { outline: none; border-color: rgba(124,58,237,0.6); }

.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-h); font-size: 11px; font-weight: 500; letter-spacing: 0.04em;
  color: #C4B5FD; padding: 5px 12px; border-radius: 999px;
  background: rgba(124,58,237,0.18); border: 1px solid rgba(124,58,237,0.3);
}
.badge--free { color: #9FE1CB; background: rgba(93,202,165,0.16); border-color: rgba(93,202,165,0.3); }
.badge--soon { color: #C4B5FD; background: rgba(124,58,237,0.18); border-color: rgba(124,58,237,0.3); }

/* ---------- Cards (servicios / modo futuro) ---------- */
.cards { display: grid; grid-template-columns: 1fr; gap: 14px; }
.card {
  --card-accent: 167,139,250;
  border-radius: var(--r-card); padding: 24px;
  border-color: rgba(var(--card-accent), 0.30);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.32), 0 16px 40px rgba(0,0,0,0.40), 0 0 26px rgba(var(--card-accent),0.10);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.card:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--card-accent),0.5);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.45), 0 22px 50px rgba(0,0,0,0.40), 0 0 34px rgba(var(--card-accent),0.30);
}
.card--violet { --card-accent: 139,92,246; }
.card--blue   { --card-accent: 59,130,246; }
.card--cyan   { --card-accent: 34,211,238; }

.card__icon-wrap {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 14px;
  background: rgba(var(--card-accent),0.14);
  border: 1px solid rgba(var(--card-accent),0.32);
  color: rgb(var(--card-accent));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18);
}
.card__icon { width: 24px; height: 24px; }
.card__title { font-weight: 600; font-size: 17px; color: #fff; margin: 14px 0 8px; }
.card__text { font-size: 14px; line-height: 1.7; color: var(--muted); margin: 0 0 18px; }
.card__text:last-child { margin-bottom: 0; }
.card__link { font-family: var(--font-h); font-size: 13px; font-weight: 500; color: #A78BFA; display: inline-flex; align-items: center; gap: 6px; transition: gap .2s; }
.card__link:hover { gap: 10px; }

/* ---------- MODO FUTURO · CTA del club ---------- */
.mf-cta { margin: 0 0 32px; }
/* Los 2 párrafos de intro: juntos y compactos; el último mantiene aire antes del botón */
.mf__copy .section__lead { margin-bottom: 14px; }
.mf__copy .section__lead:last-of-type { margin-bottom: 26px; }

/* ---------- Newsletter (Substack, sin card) ---------- */
.news { display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.news__title { font-family: var(--font-h); font-weight: 600; font-size: 19px; line-height: 1.4; color: #fff; margin: 0; }
.news__form { display: flex; flex-direction: column; gap: 10px; }
.news__input {
  font-family: var(--font-h); font-size: 14px; color: #fff;
  padding: 13px 18px; border-radius: 999px;
  background: rgba(11,5,24,0.5); border: 1px solid var(--line-strong);
}
.news__input::placeholder { color: var(--faint); }
.news__input:focus { outline: none; border-color: rgba(124,58,237,0.6); }
.news__ok { margin: 0; font-family: var(--font-h); font-size: 13.5px; color: #9FE1CB; }

/* ---------- Bóveda ---------- */
.vault { display: grid; grid-template-columns: 1fr; gap: 12px; }
.vault__item { display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: var(--r-card); transition: transform .25s var(--ease); }
.vault__item:hover { transform: translateY(-2px); }
.vault__icon { width: 22px; height: 22px; color: #A78BFA; }
.vault__name { flex: 1; font-family: var(--font-h); font-weight: 500; font-size: 14px; color: #fff; }
.is-placeholder { opacity: 0.6; border-style: dashed; }

/* ---------- Cierre ---------- */
.cta-final { text-align: center; padding-top: 14px; padding-bottom: 34px; }
/* CTA final: pregunta y tagline SIEMPRE en una sola línea (escala con el ancho). */
.cta-final__title { font-weight: 600; font-size: clamp(17px, 5.3vw, 26px); line-height: 1.15; color: #fff; margin: 0 0 8px; white-space: nowrap; }
.cta-final .section__lead { margin: 0 auto 22px; font-size: clamp(11.5px, 3.6vw, 16px); white-space: nowrap; }

/* ---------- Footer ---------- */
.footer {
  position: relative; z-index: 1; margin-top: 22px;
  border-top: 1px solid var(--line); padding: 24px 0;
  font-family: var(--font-h);
  background: linear-gradient(180deg, rgba(124,58,237,0.05), rgba(11,5,24,0) 70%);
}
.footer__inner { display: flex; flex-direction: column; gap: 12px; align-items: center; text-align: center; }
.footer__copy { font-size: 13px; color: var(--faint); }
.footer__legal { display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: center; }
.footer__legal a { font-size: 13px; color: var(--muted); transition: color .2s; }
.footer__legal a:hover { color: #fff; }

/* ---------- Botón flotante WhatsApp ---------- */
.wa-fab {
  position: fixed; right: 18px; bottom: 18px; z-index: 60;
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; color: #fff;
  -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.30), rgba(255,255,255,0.02) 55%),
    linear-gradient(160deg, var(--accent), var(--accent-2));
  border: 1px solid rgba(180,205,255,0.45);
  box-shadow: 0 8px 24px rgba(80,70,200,0.42), inset 0 1px 0.5px rgba(255,255,255,0.55);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.wa-fab__icon { width: 30px; height: 30px; }
.wa-fab:hover { transform: scale(1.08) translateY(-2px); box-shadow: 0 14px 32px rgba(80,70,200,0.6), inset 0 1px 0.5px rgba(255,255,255,0.6); }
.wa-fab__tip {
  position: absolute; right: 66px; white-space: nowrap;
  font-family: var(--font-h); font-size: 12.5px; color: #fff;
  padding: 8px 13px; border-radius: 999px;
  background: rgba(11,5,24,0.92); border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  opacity: 0; transform: translateX(8px); pointer-events: none;
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.wa-fab:hover .wa-fab__tip { opacity: 1; transform: translateX(0); }

/* =========================================================
   REVEAL (microanimación al hacer scroll)
   ========================================================= */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .glow, .btn__shine, .hero__status-dot, .nav__cta, .lyth__caret, .lyth__prompt-text,
  .lyth__title--logo::before,
  .mf__live-dot, .mf__typing, .mf__typing span, .mf__chat > * { animation: none !important; }
  .lyth__prompt-text { width: auto; }
  html { scroll-behavior: auto; }
}

/* =========================================================
   VISUALES EDITORIALES
   La línea de tiempo de "Sobre mí" sigue siendo solo desktop (es un duplicado
   decorativo del texto). Los visuales de LYTH y MODO FUTURO ahora también
   aparecen en móvil (ver bloque @media max-width:959px más abajo).
   ========================================================= */
.about__timeline { display: none; }
.lyth__visual, .mf__visual { display: none; }

/* ---- Línea de tiempo (Sobre mí) ---- */
.about__timeline { position: relative; }
.about__timeline::before {
  content: ""; position: absolute; left: 5px; top: 7px; bottom: 16px; width: 2px;
  background: linear-gradient(180deg, rgba(124,58,237,0.65), rgba(34,211,238,0.5));
}
.tl-item { position: relative; padding: 0 0 26px 28px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: ""; position: absolute; left: 0; top: 6px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--bg); border: 2px solid #A78BFA;
  box-shadow: 0 0 0 3px rgba(124,58,237,0.16);
}
.tl-item--now::before {
  background: linear-gradient(135deg, #C4B5FD, #67E8F9); border-color: transparent;
  box-shadow: 0 0 14px rgba(124,58,237,0.6);
}
.tl-year { display: block; font-family: var(--font-h); font-weight: 600; font-size: 15px; color: #fff; margin-bottom: 4px; }
.tl-item--now .tl-year {
  background: linear-gradient(120deg, #C4B5FD, #67E8F9);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.tl-desc { font-size: 14px; line-height: 1.55; color: var(--muted); }

/* ---- Mockup de ventana (LYTH) ---- */
.lyth__window { border-radius: var(--r-lg); padding: 0; overflow: hidden; }
.lyth__bar { display: flex; align-items: center; gap: 7px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.lyth__dot { width: 11px; height: 11px; border-radius: 50%; background: rgba(255,255,255,0.2); }
.lyth__dot:nth-child(1) { background: rgba(255,107,107,0.65); }
.lyth__dot:nth-child(2) { background: rgba(255,200,90,0.65); }
.lyth__dot:nth-child(3) { background: rgba(93,202,165,0.65); }
.lyth__bar-label { margin-left: auto; font-family: var(--font-h); font-size: 12px; font-weight: 600; color: var(--faint); }
.lyth__screen { padding: 38px 28px 32px; display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; }
.lyth__screen-bolt { width: auto; height: 62px; }
.lyth__prompt {
  display: flex; align-items: center; gap: 3px; width: 100%;
  padding: 13px 16px; border-radius: 14px;
  background: rgba(11,5,24,0.55); border: 1px solid var(--line-strong);
}
/* Una sola línea, recortada dentro de la caja: el typewriter no cambia el alto
   ni el ancho del recuadro → la ventana LYTH queda estática (sin scroll). */
.lyth__prompt-text { font-family: var(--font-h); font-size: 13.5px; color: var(--muted); flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; }
.lyth__caret { width: 2px; height: 16px; background: #A78BFA; animation: blink 1.1s steps(1) infinite; flex-shrink: 0; }
@keyframes blink { 50% { opacity: 0; } }
.lyth__chips { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.lyth__chip {
  font-family: var(--font-h); font-size: 11.5px; font-weight: 500; color: #C4B5FD;
  padding: 5px 12px; border-radius: 999px;
  background: rgba(124,58,237,0.16); border: 1px solid rgba(124,58,237,0.3);
}

/* ---- Tarjeta de comunidad (MODO FUTURO) = ventana de CHAT real ----
   Códigos de app de mensajería (cabecera, hora, doble check, barra de escribir)
   pero en la paleta azul de marca (no es un calco de WhatsApp). */
.mf__visual { border-radius: var(--r-lg); padding: 0; overflow: hidden; flex-direction: column; gap: 0; }
/* Cabecera de conversación: avatar + nombre + "en línea" */
.mf__app-head { display: flex; align-items: center; gap: 10px; padding: 12px 15px; border-bottom: 1px solid rgba(15,7,30,0.08); }
.mf__avatar { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; background: var(--grad-brand); color: #fff; }
.mf__avatar .icon { width: 20px; height: 20px; }
.mf__app-meta { display: flex; flex-direction: column; gap: 1px; line-height: 1.2; }
.mf__app-name { font-family: var(--font-h); font-weight: 600; font-size: 14px; color: #0F071E; }
.mf__app-status { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-h); font-size: 11.5px; color: #15803D; }
.mf__live-dot { width: 7px; height: 7px; border-radius: 50%; background: #16A34A; animation: statusPulse 2.4s var(--ease) infinite; }
/* Burbujas: gris entrante (izq) · azul de marca saliente (der) */
.mf__bubble {
  position: relative; align-self: flex-start; max-width: 86%;
  font-family: var(--font-h); font-size: 13px; line-height: 1.45; color: #2A2435;
  padding: 8px 12px 6px; border-radius: 14px 14px 14px 4px;
  background: #F1F2F5; border: 1px solid rgba(15,7,30,0.05);
  box-shadow: 0 1px 1px rgba(15,7,30,0.05);
}
.mf__bubble--ask { align-self: flex-start; }
.mf__bubble--ans { align-self: flex-end; color: #fff; border-radius: 14px 14px 4px 14px; background: var(--grad-brand); border-color: transparent; }
.mf__meta { display: block; margin-top: 3px; text-align: right; font-size: 10px; color: rgba(15,7,30,0.40); white-space: nowrap; }
.mf__bubble--ans .mf__meta { display: flex; align-items: center; justify-content: flex-end; gap: 3px; color: rgba(255,255,255,0.72); }
.mf__check { width: 16px; height: 13px; color: #8FE3FF; stroke-width: 2.4; flex-shrink: 0; }
/* Barra de "escribir un mensaje" (decorativa) */
.mf__inputbar { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-top: 1px solid rgba(15,7,30,0.08); }
.mf__input { flex: 1; font-family: var(--font-h); font-size: 12.5px; color: rgba(15,7,30,0.42); padding: 9px 14px; border-radius: 999px; background: #F1F2F5; border: 1px solid rgba(15,7,30,0.06); }
.mf__send { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; background: var(--grad-brand); color: #fff; }
.mf__send .icon { width: 16px; height: 16px; }

/* Chat en vivo (MODO FUTURO): indicador "escribiendo" + secuencia */
.mf__chat { display: flex; flex-direction: column; justify-content: flex-end; gap: 9px; padding: 14px 13px; }
.mf__typing {
  display: inline-flex; align-items: center; gap: 5px; width: fit-content; overflow: hidden;
  padding: 12px 15px; border-radius: 16px 16px 16px 5px;
  background: rgba(247,247,247,0.06); border: 1px solid var(--line);
}
.mf__typing--ask { align-self: flex-start; }
.mf__typing--ans { align-self: flex-end; border-radius: 16px 16px 5px 16px; background: linear-gradient(160deg, rgba(124,58,237,0.26), rgba(37,99,235,0.18)); border-color: rgba(124,58,237,0.36); }
.mf__typing span { width: 7px; height: 7px; border-radius: 50%; background: rgba(247,247,247,0.65); animation: mfDot 1.2s var(--ease) infinite; }
.mf__typing span:nth-child(2) { animation-delay: .15s; }
.mf__typing span:nth-child(3) { animation-delay: .30s; }
@keyframes mfDot { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
@keyframes mfAskType { 0%, 3% { opacity: 0; max-height: 0; } 6% { opacity: 1; max-height: 46px; } 16% { opacity: 1; max-height: 46px; } 19% { opacity: 0; max-height: 0; } 100% { opacity: 0; max-height: 0; } }
@keyframes mfAskBubble { 0%, 17% { opacity: 0; transform: translateY(8px) scale(.96); } 21% { opacity: 1; transform: none; } 88% { opacity: 1; transform: none; } 100% { opacity: 0; transform: scale(.98); } }
@keyframes mfAnsType { 0%, 25% { opacity: 0; max-height: 0; } 28% { opacity: 1; max-height: 46px; } 37% { opacity: 1; max-height: 46px; } 40% { opacity: 0; max-height: 0; } 100% { opacity: 0; max-height: 0; } }
@keyframes mfAnsBubble { 0%, 39% { opacity: 0; transform: translateY(8px) scale(.96); } 43% { opacity: 1; transform: none; } 88% { opacity: 1; transform: none; } 100% { opacity: 0; transform: scale(.98); } }
@keyframes mfAns2Bubble { 0%, 48% { opacity: 0; transform: translateY(8px) scale(.96); } 52% { opacity: 1; transform: none; } 88% { opacity: 1; transform: none; } 100% { opacity: 0; transform: scale(.98); } }

/* Botón "Más info" (WhatsApp) de las cards — visible también en móvil */
.card__more {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 4px;
  padding: 9px 16px; border-radius: 999px;
  font-family: var(--font-h); font-size: 13px; font-weight: 500;
  transition: background-color .2s var(--ease), border-color .2s var(--ease);
}
.card__more .icon { width: 14px; height: 14px; }

/* =========================================================
   BÓVEDA — banda clara (guiño GitHub), buscador + filtros
   ========================================================= */
.boveda {
  position: relative; z-index: 1;
  background: #F5F6F8; color: #2A2435;
  padding: 52px 0;
  border-top: 1px solid rgba(15,7,30,0.08);
  border-bottom: 1px solid rgba(15,7,30,0.08);
}
/* Encabezado en versión clara */
.sec-head--light .sec-head__index {
  background: linear-gradient(135deg, #7C3AED, #2563EB);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.sec-head--light .sec-head__label { color: #0F071E; }
.sec-head--light .sec-head__line { background: linear-gradient(90deg, rgba(15,7,30,0.18), transparent); }

.boveda__lead { font-family: var(--font-b); font-size: 15.5px; line-height: 1.7; color: rgba(15,7,30,0.66); max-width: 620px; margin: 0 0 26px; }

/* Buscador + filtros */
.boveda__tools { display: flex; flex-direction: column; gap: 16px; margin-bottom: 26px; }
.boveda__search-wrap { position: relative; width: 100%; max-width: 460px; }
.boveda__search-icon { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: rgba(15,7,30,0.4); pointer-events: none; }
.boveda__search {
  width: 100%; font-family: var(--font-h); font-size: 15px; color: #0F071E;
  padding: 13px 16px 13px 44px; border-radius: 12px;
  background: #FFFFFF; border: 1px solid rgba(15,7,30,0.14);
  box-shadow: 0 1px 2px rgba(15,7,30,0.04);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.boveda__search::placeholder { color: rgba(15,7,30,0.42); }
.boveda__search:focus { outline: none; border-color: #7C3AED; box-shadow: 0 0 0 3px rgba(124,58,237,0.14); }
.boveda__filters { display: flex; flex-wrap: wrap; gap: 8px; }
.boveda__chip {
  font-family: var(--font-h); font-size: 13px; font-weight: 500; color: rgba(15,7,30,0.7);
  padding: 8px 15px; border-radius: 999px; cursor: pointer;
  background: #FFFFFF; border: 1px solid rgba(15,7,30,0.14);
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.boveda__chip:hover { border-color: rgba(124,58,237,0.5); color: #0F071E; }
.boveda__chip.is-active { color: #fff; border-color: transparent; background: var(--grad-brand); }

/* Cuadrícula de tarjetas (estilo repo) */
.boveda__grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.vault-card {
  display: flex; flex-direction: column; gap: 10px;
  padding: 22px; border-radius: 16px;
  background: #FFFFFF; border: 1px solid rgba(15,7,30,0.12);
  box-shadow: 0 1px 2px rgba(15,7,30,0.04);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease), opacity .4s var(--ease);
}
.vault-card:hover { transform: translateY(-4px); border-color: rgba(124,58,237,0.45); box-shadow: 0 16px 36px rgba(15,7,30,0.12); }
.vault-card.is-hidden { display: none; }
.vault-card--featured { border-color: rgba(124,58,237,0.30); background: linear-gradient(180deg, #FFFFFF, #FBFAFF); box-shadow: 0 6px 22px rgba(124,58,237,0.10); }
.vault-card__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.vault-card__type {
  font-family: var(--font-h); font-size: 11.5px; font-weight: 600; letter-spacing: 0.01em;
  color: #6D28D9; padding: 4px 11px; border-radius: 999px;
  background: rgba(124,58,237,0.10); border: 1px solid rgba(124,58,237,0.18);
}
.vault-card__star { font-family: var(--font-h); font-size: 11.5px; font-weight: 600; color: #C2410C; white-space: nowrap; }
.vault-card__title { font-family: var(--font-h); font-weight: 600; font-size: 18px; color: #0F071E; margin: 2px 0 0; }
.vault-card__desc { font-family: var(--font-b); font-size: 14.5px; line-height: 1.6; color: rgba(15,7,30,0.66); margin: 0; }
.vault-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 8px; }
.boveda .badge--free { color: #15803D; background: rgba(34,197,94,0.12); border-color: rgba(34,197,94,0.30); }
.vault-card__go { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-h); font-size: 13.5px; font-weight: 600; color: #7C3AED; }
.vault-card__go .icon { width: 15px; height: 15px; transition: transform .2s var(--ease); }
.vault-card:hover .vault-card__go .icon { transform: translateX(3px); }
.boveda__empty { font-family: var(--font-h); font-size: 15px; color: rgba(15,7,30,0.55); text-align: center; padding: 26px 0; margin: 0; }

/* =========================================================
   RESPONSIVE — tablet / desktop
   ========================================================= */
@media (min-width: 720px) {
  .stats { grid-template-columns: 1.5fr 1fr; }
  .stat { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 24px 20px; }
  .stat__num { font-size: 38px; }
  .stat__label { font-size: 14.5px; }
  .stat--hero { grid-row: span 2; }
  .stat--hero .stat__num { font-size: 56px; }
  .stat--hero .stat__label { font-size: 15px; max-width: 260px; }
  .cards { grid-template-columns: repeat(3, 1fr); }
  .cards--two { grid-template-columns: repeat(2, 1fr); }
  .vault { grid-template-columns: repeat(2, 1fr); }
  .boveda__grid { grid-template-columns: repeat(2, 1fr); }
  .br-mobile { display: none; }
  .hero__title { font-size: 44px; }
  .hero__sub { font-size: 17px; }
  .lyth__title { font-size: 76px; }
  .lyth__form { flex-direction: row; align-items: center; }
  .news__form { flex-direction: row; align-items: center; }
  .news__input { flex: 1; }
  .section { padding: 52px 22px; }
}

@media (min-width: 960px) {
  /* ----- Lienzo más ancho: menos espacio muerto a los lados ----- */
  .container { max-width: 1240px; padding: 0 40px; }

  /* ----- NAV: más presencia, menú centrado que llena la barra ----- */
  .nav { padding: 18px 24px; }
  .nav__inner { max-width: 1240px; padding: 11px 12px 11px 24px; }
  .nav__logo { font-size: 17px; }
  .nav__menu {
    flex: 1; flex-direction: row; justify-content: center; gap: 26px; position: static;
    padding: 0; border: 0; background: none; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    font-size: 16px; letter-spacing: -0.005em; color: var(--muted); white-space: nowrap;
    opacity: 1; visibility: visible; pointer-events: auto; transform: none;
  }
  .nav__menu a { padding: 6px 4px; color: var(--muted); opacity: 1; transform: none; transition: color .2s; }
  .nav__menu a:hover { background: none; color: #fff; }
  .nav .nav__cta { display: inline-flex; font-size: 14px; padding: 11px 20px; animation: navCtaBreathe 3.6s var(--ease) infinite; }
  .nav .nav__cta:hover { animation-play-state: paused; }
  .nav__idea { display: none; }
  .nav__toggle { display: none; }

  /* ----- HERO ----- */
  .hero { padding: 160px 0 44px; }
  .hero__inner { grid-template-columns: 1.15fr 0.85fr; align-items: center; gap: 60px; }
  .hero__copy { max-width: none; }
  .chip { font-size: 13px; padding: 8px 17px; margin-bottom: 26px; }
  /* Tamaño fluido: mantiene el título en 4 líneas en todo el desktop (el texto
     "¡Hola! Soy Jonatan…" se rompía a 5 líneas con un tamaño fijo). */
  .hero__title { font-size: clamp(48px, calc(6.25vw - 14px), 66px); line-height: 1.08; margin-bottom: 24px; text-wrap: balance; }
  .hero__sub { font-size: 19px; line-height: 1.7; max-width: 520px; }
  .hero__sub:last-of-type { margin-bottom: 36px; }
  .hero__visual { max-width: 440px; justify-self: end; }
  .hero__status { left: 16px; transform: none; font-size: 13px; padding: 9px 16px; }

  /* Stats: solo en móvil/tablet — fuera en desktop para dar protagonismo a LYTH */
  .stats { display: none; }

  /* ----- Ritmo y jerarquía (compacto premium) ----- */
  .section { padding: 46px 40px; }
  .section__lead { font-size: 19px; line-height: 1.7; max-width: 620px; }

  /* Encabezados de sección: números 01/02/03 GRANDES, editoriales */
  .sec-head { gap: 24px; margin-bottom: 30px; align-items: center; }
  .sec-head__index { font-size: 64px; font-weight: 700; line-height: 0.9; }
  .sec-head__icon { width: 54px; height: 54px; border-radius: 15px; }
  .sec-head__icon .icon { width: 30px; height: 30px; }
  .sec-head__label { font-size: 30px; }
  .sec-head__line { height: 2px; }

  /* ----- Sobre mí: 2 columnas + línea de tiempo ----- */
  .about { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 72px; align-items: start; max-width: none; }
  .about__text p { font-size: 18.5px; line-height: 1.75; }
  .about__timeline { display: block; padding-top: 4px; }
  .tl-item { padding: 0 0 30px 32px; }
  .tl-year { font-size: 17px; }
  .tl-desc { font-size: 15px; }

  /* ----- LYTH: protagonista, mockup grande, recto, con typewriter ----- */
  #lyth { padding-top: 56px; padding-bottom: 56px; }
  .lyth { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 72px; align-items: center; max-width: none; }
  .lyth__copy { max-width: 540px; }
  .lyth__eyebrow { font-size: 13px; padding: 7px 15px; }
  .lyth__title { font-size: 100px; margin: 22px 0 22px; }
  /* Logo LYTH protagonista en desktop: más grande, centrado, con halo que late */
  .lyth__title--logo { margin: 10px 0 30px; }
  .lyth__logo-img { width: 340px; filter: drop-shadow(0 16px 40px rgba(6,182,212,0.30)); }
  .lyth__title--logo::before {
    width: 400px; height: 400px; filter: blur(48px);
    background: radial-gradient(circle, rgba(34,211,238,0.32), rgba(45,212,191,0.15) 50%, transparent 70%);
    animation: lythHalo 4.5s var(--ease) infinite;
  }
  .lyth__text { font-size: 18.5px; line-height: 1.7; max-width: none; }
  .lyth__visual { display: block; justify-self: end; width: 100%; max-width: 560px; }
  .lyth__window {
    transform: none;
    transition: transform .35s var(--ease), box-shadow .35s var(--ease);
    box-shadow: inset 0 1px 1px rgba(255,255,255,0.45), 0 38px 84px rgba(0,0,0,0.48), 0 0 70px rgba(124,58,237,0.16);
  }
  .lyth__window:hover {
    transform: translateY(-7px);
    box-shadow: inset 0 1px 1px rgba(255,255,255,0.5), 0 48px 96px rgba(0,0,0,0.52), 0 0 96px rgba(124,58,237,0.28);
  }
  .lyth__bar { padding: 17px 24px; }
  .lyth__screen { padding: 58px 40px 48px; gap: 28px; }
  .lyth__screen-bolt { width: auto; height: 90px; }
  .lyth__prompt { padding: 17px 20px; }
  .lyth__prompt-text { font-size: 15.5px; }
  .lyth__chip { font-size: 12.5px; padding: 6px 14px; }

  /* ----- Servicios: cards más grandes + botón "Más info" ----- */
  .cards { gap: 22px; }
  .card { padding: 32px; display: flex; flex-direction: column; }
  .card__icon-wrap { width: 58px; height: 58px; border-radius: 16px; }
  .card__icon { width: 28px; height: 28px; }
  .card__title { font-size: 22px; margin: 20px 0 10px; }
  .card__text { font-size: 16px; line-height: 1.65; margin-bottom: 22px; }
  .card__more {
    display: inline-flex; align-items: center; gap: 6px;
    align-self: flex-end; margin-top: auto;
    padding: 9px 17px; border-radius: 999px;
    font-family: var(--font-h); font-size: 13.5px; font-weight: 500; color: #fff;
    background: rgba(var(--card-accent), 0.20); border: 1px solid rgba(var(--card-accent), 0.45);
    transition: background-color .2s var(--ease), border-color .2s var(--ease);
  }
  .card__more:hover { background: rgba(var(--card-accent), 0.34); border-color: rgba(var(--card-accent), 0.6); }
  .card__more .icon { width: 15px; height: 15px; }

  /* ----- MODO FUTURO: 2 columnas + chat en vivo más grande ----- */
  .mf { display: grid; grid-template-columns: 1fr 0.92fr; gap: 72px; align-items: center; }
  .mf__copy { max-width: 540px; }
  .mf__copy .section__lead { margin-bottom: 16px; }
  .mf__copy .section__lead:last-of-type { margin-bottom: 30px; }
  .mf__visual { display: flex; max-width: 500px; justify-self: end; width: 100%; padding: 0; gap: 0; }
  .mf__badge { font-size: 15px; }
  .mf__chat { height: 332px; overflow: hidden; }
  .mf__bubble { font-size: 14.5px; padding: 12px 16px; max-width: 90%; line-height: 1.45; }
  .mf__topic { font-size: 12px; padding: 6px 13px; }
  .mf__typing--ask { animation: mfAskType 13s var(--ease) infinite; }
  .mf__bubble--ask { animation: mfAskBubble 13s var(--ease) infinite; }
  .mf__typing--ans { animation: mfAnsType 13s var(--ease) infinite; }
  .mf__bubble--ans { animation: mfAnsBubble 13s var(--ease) infinite; }
  .mf__bubble--ans2 { animation: mfAns2Bubble 13s var(--ease) infinite; }

  /* ----- Bóveda (banda clara) en desktop ----- */
  .boveda { padding: 64px 0; }
  .boveda__lead { font-size: 18px; }
  .boveda__tools { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; }
  .boveda__search-wrap { max-width: 400px; flex-shrink: 0; }
  .boveda__filters { justify-content: flex-end; }
  .boveda__grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .vault-card { padding: 24px; }
  .vault-card__title { font-size: 19px; }

  /* ----- Cierre: CTA final compacto y proporcionado ----- */
  .cta-final { padding-top: 48px; padding-bottom: 48px; }
  .cta-final__title { font-size: 46px; line-height: 1.08; margin-bottom: 12px; }
  .cta-final .section__lead { font-size: 22px; margin-bottom: 22px; }
  .cta-final .btn { font-size: 16px; padding: 15px 34px; }

  /* ----- Footer compacto (copyright + legales) ----- */
  .footer { margin-top: 14px; padding: 24px 0; }
  .footer__inner { flex-direction: row; justify-content: space-between; text-align: left; gap: 24px; }
  .footer__legal { gap: 28px; }
}

/* Pantallas grandes: un punto más de escala */
@media (min-width: 1280px) {
  .lyth__title { font-size: 112px; }
  .sec-head__index { font-size: 72px; }
  .sec-head__label { font-size: 33px; }
  .cta-final__title { font-size: 54px; }
}

/* =========================================================
   TEMA CLARO GLOBAL — toda la web en claro
   Marca personal: degradado AZUL→MORADO (--grad-brand, NO Canva)
   LYTH: identidad CIAN→VERDE (--grad-lyth)
   Va al final: sus variables y reglas anulan al tema oscuro previo.
   ========================================================= */
:root {
  --bg: #F4F5F8;
  --text: #0F071E;
  --muted: rgba(15,7,30,0.66);
  --faint: rgba(15,7,30,0.50);
  --line: rgba(15,7,30,0.10);
  --line-strong: rgba(15,7,30,0.16);
  --grad-brand: linear-gradient(130deg, #0F2A63 0%, #1E40AF 50%, #2E2A6E 100%);
  --grad-lyth: linear-gradient(120deg, #06B6D4 0%, #22D3EE 45%, #34D399 100%);
}
body { background: #F4F5F8; color: var(--text); }
.bg-glows, .grain { display: none; }

/* Cristal → superficie clara */
.glass {
  -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
  background: #FFFFFF;
  border: 1px solid rgba(15,7,30,0.10);
  box-shadow: 0 1px 2px rgba(15,7,30,0.04), 0 14px 34px rgba(15,7,30,0.07);
}
.glass--accent { border-color: rgba(124,58,237,0.30); }

/* Títulos a oscuro */
.hero__title, .section__title, .card__title, .cta-final__title,
.sec-head__label, .stat__num, .news__title, .mf__badge { color: #0F071E; }

/* Acentos de MARCA PERSONAL: azul oscuro → morado claro (sin cian, no-Canva) */
.accent-name, .sec-head__index, .sec-head--light .sec-head__index, .stat--hero .stat__num {
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.sec-head__line, .sec-head--light .sec-head__line { background: linear-gradient(90deg, rgba(15,7,30,0.16), transparent); }
.sec-head--light .sec-head__label { color: #0F071E; }

/* Botones */
.btn { color: #fff; }
.btn--primary {
  color: #fff; border-color: transparent;
  background: var(--grad-brand);
  box-shadow: 0 10px 26px rgba(18,34,100,0.32);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.btn--primary:hover { box-shadow: 0 14px 32px rgba(18,34,100,0.44); }
.btn--glass, .btn--ghost {
  color: #0F071E; background: rgba(15,7,30,0.045); border-color: rgba(15,7,30,0.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 2px 8px rgba(15,7,30,0.05);
}
.chip {
  color: #4338CA; background: #FFFFFF; border-color: rgba(15,7,30,0.10);
  box-shadow: 0 1px 2px rgba(15,7,30,0.06), inset 0 1px 0 rgba(255,255,255,0.6);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}

/* ---------- HERO ---------- */
.hero {
  background:
    radial-gradient(56% 48% at 84% 6%, rgba(109,40,217,0.12), transparent 60%),
    radial-gradient(46% 48% at 2% 94%, rgba(30,64,175,0.10), transparent 60%),
    linear-gradient(180deg, #FFFFFF 0%, #F4F5F8 100%);
}
.hero__sub { color: var(--muted); }
.hero__status { color: #0F071E; background: rgba(255,255,255,0.92); border-color: rgba(15,7,30,0.10); box-shadow: 0 6px 18px rgba(15,7,30,0.14), inset 0 1px 0 rgba(255,255,255,0.7); }
.hero__photo { box-shadow: 0 28px 60px rgba(15,7,30,0.20), inset 0 1px 1px rgba(255,255,255,0.3); }
.hero__photo::after {
  background:
    linear-gradient(180deg, rgba(11,5,24,0) 62%, rgba(11,5,24,0.30) 100%),
    linear-gradient(150deg, rgba(109,40,217,0.10), rgba(30,64,175,0.06));
}

/* ---------- NAV ---------- */
.nav__inner { background: linear-gradient(180deg, rgba(255,255,255,0.88), rgba(255,255,255,0.70)); border-color: rgba(15,7,30,0.10); box-shadow: inset 0 1px 1px rgba(255,255,255,0.8), 0 8px 30px rgba(15,7,30,0.10); }
.nav.is-scrolled .nav__inner { box-shadow: inset 0 1px 1px rgba(255,255,255,0.8), 0 10px 30px rgba(15,7,30,0.16); }
.nav__logo { color: #0F071E; }
.nav .nav__menu a { color: rgba(15,7,30,0.62); }
.nav .nav__menu a:hover { color: #0F071E; }
.nav .nav__cta { color: #0F071E; background: rgba(15,7,30,0.045); border-color: rgba(15,7,30,0.14); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.nav__toggle { color: #0F071E; background: rgba(15,7,30,0.05); border-color: rgba(15,7,30,0.16); }
.nav__idea { color: rgba(15,7,30,0.7); }
.nav__idea strong { color: #6D28D9; }
@media (max-width: 959px) {
  .nav__menu { background: linear-gradient(160deg, rgba(255,255,255,0.97), rgba(244,245,248,0.97)); border-color: rgba(15,7,30,0.10); box-shadow: inset 0 1px 1px rgba(255,255,255,0.85), 0 18px 46px rgba(15,7,30,0.18); }
  .nav__menu a { color: #0F071E; }
  .nav__menu a:hover { background: rgba(15,7,30,0.04); color: #0F071E; }
}

/* ---------- Visuales LYTH + MODO FUTURO también en móvil ----------
   Antes eran exclusivos de desktop. Ahora se muestran apilados bajo el copy,
   centrados, dimensionados al ancho disponible (sin desbordes) y CON sus
   animaciones (typewriter de LYTH vía JS; chat en vivo de MF vía keyframes). */
@media (max-width: 959px) {
  .lyth__visual { display: block; width: 100%; max-width: 440px; margin: 26px auto 0; }
  .mf__visual { display: flex; width: 100%; max-width: 440px; margin: 24px auto 0; }
  .mf__chat { height: 300px; overflow: hidden; }
  .mf__typing--ask  { animation: mfAskType  13s var(--ease) infinite; }
  .mf__bubble--ask  { animation: mfAskBubble 13s var(--ease) infinite; }
  .mf__typing--ans  { animation: mfAnsType  13s var(--ease) infinite; }
  .mf__bubble--ans  { animation: mfAnsBubble 13s var(--ease) infinite; }
  .mf__bubble--ans2 { animation: mfAns2Bubble 13s var(--ease) infinite; }
}

/* ---------- Pantallas muy estrechas (≤360px, iPhone SE y similares) ----------
   Las etiquetas de sección no caben en una línea a este ancho: las reducimos
   un punto para que respiren sin desbordar. No afecta a 375px+. */
@media (max-width: 360px) {
  .sec-head { gap: 10px; }
  .sec-head__index { font-size: 16px; }
  .sec-head__label { font-size: 15px; }
}

/* En pantallas <360px las burbujas del chat envuelven una línea más: el cajón
   de altura fija necesita ser más alto para que la primera burbuja no se corte. */
@media (max-width: 359px) {
  .mf__chat { height: 360px; }
}

/* ---------- STATS (móvil/tablet) ---------- */
.stat__label { color: var(--muted); }
.stat--hero { border-color: rgba(109,40,217,0.30); box-shadow: 0 1px 2px rgba(15,7,30,0.04), 0 14px 34px rgba(15,7,30,0.08), 0 0 40px rgba(109,40,217,0.10); }

/* ---------- SOBRE MÍ ---------- */
.about__text p { color: rgba(15,7,30,0.74); }
.tl-desc { color: var(--muted); }
.tl-year { color: #1E40AF; }
.tl-item--now .tl-year { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.tl-item::before { background: #F4F5F8; }
.about__timeline::before { background: var(--grad-brand); }

/* ---------- SERVICIOS ---------- */
.card { box-shadow: 0 1px 2px rgba(15,7,30,0.04), 0 12px 30px rgba(15,7,30,0.07); }
.card:hover { box-shadow: 0 1px 2px rgba(15,7,30,0.05), 0 20px 44px rgba(var(--card-accent),0.20); }
.card__text { color: var(--muted); }
.card__icon-wrap { background: rgba(var(--card-accent),0.12); border-color: rgba(var(--card-accent),0.28); box-shadow: inset 0 1px 0 rgba(255,255,255,0.6); }
.card__more { color: #0F071E; background: rgba(var(--card-accent),0.12); border-color: rgba(var(--card-accent),0.34); }
.card__more:hover { background: rgba(var(--card-accent),0.22); border-color: rgba(var(--card-accent),0.5); }

/* ---------- LYTH (identidad cian/verde) ---------- */
.lyth__word { background: var(--grad-lyth); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; font-weight: 600; letter-spacing: 0.07em; }
.lyth__text { color: var(--muted); }
.lyth__eyebrow { color: #0E7490; background: rgba(34,211,238,0.12); border-color: rgba(34,211,238,0.30); }
.lyth::before { background: radial-gradient(circle, rgba(34,211,238,0.20), rgba(45,212,191,0.10) 55%, transparent 72%); }
.lyth__window { box-shadow: 0 1px 2px rgba(15,7,30,0.05), 0 30px 70px rgba(15,7,30,0.16); }
.lyth__window:hover { box-shadow: 0 1px 2px rgba(15,7,30,0.05), 0 42px 88px rgba(15,7,30,0.20); }
.lyth__bar { border-bottom-color: rgba(15,7,30,0.08); }
.lyth__bar-label { color: var(--faint); }
.lyth__prompt { background: #F4F5F8; border-color: rgba(15,7,30,0.12); }
.lyth__prompt-text { color: var(--muted); }
.lyth__caret { background: #06B6D4; }
.lyth__chip { color: #0E7490; background: rgba(34,211,238,0.12); border-color: rgba(34,211,238,0.28); }
.lyth__screen-bolt { filter: drop-shadow(0 8px 24px rgba(6,182,212,0.32)); }
.lyth__bolt { filter: drop-shadow(0 2px 12px rgba(6,182,212,0.28)); }

/* ---------- MODO FUTURO chat ---------- */
.mf__bubble { background: #F1F2F5; border-color: rgba(15,7,30,0.08); color: #2A2435; }
.mf__bubble--ans, .mf__bubble--ans2 { background: var(--grad-brand); border-color: transparent; color: #fff; }
.mf__typing { background: #F1F2F5; border-color: rgba(15,7,30,0.08); }
.mf__typing span { background: rgba(15,7,30,0.40); }
.mf__typing--ans { background: var(--grad-brand); border-color: transparent; }
.mf__typing--ans span { background: rgba(255,255,255,0.9); }
.mf__live { color: #15803D; }
.mf__live-dot { background: #16A34A; }
.mf__topic { color: var(--faint); border-color: var(--line); }

/* ---------- Footer ---------- */
.footer { background: linear-gradient(180deg, rgba(109,40,217,0.05), rgba(244,245,248,0) 70%); border-top-color: rgba(15,7,30,0.10); }
.footer__copy { color: var(--faint); }
.footer__legal a { color: var(--muted); }
.footer__legal a:hover { color: #0F071E; }

/* ---------- WhatsApp FAB ---------- */
.wa-fab { background: linear-gradient(180deg, rgba(255,255,255,0.26), rgba(255,255,255,0.02) 55%), var(--grad-brand); box-shadow: 0 10px 26px rgba(18,34,100,0.34), inset 0 1px 0.5px rgba(255,255,255,0.5); }

/* ---------- BÓVEDA: mismo fondo que el resto de la web (sin banda) ---------- */
.boveda { background: transparent; border-top: 0; border-bottom: 0; }

/* =========================================================
   SPOTLIGHT "Acceso completo a la Bóveda" (home)
   Panel oscuro de alto contraste sobre la banda clara — guiño GitHub.
   ========================================================= */
.boveda__spotlight {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 18px;
  margin-top: 22px; padding: 26px 24px;
  border-radius: 20px;
  background: linear-gradient(135deg, #160E2E 0%, #1E163C 55%, #221A44 100%);
  border: 1px solid rgba(124,58,237,0.35);
  box-shadow: 0 18px 44px rgba(15,7,30,0.22);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.boveda__spotlight:hover { transform: translateY(-3px); box-shadow: 0 26px 60px rgba(15,7,30,0.30); border-color: rgba(124,58,237,0.55); }
.boveda__spotlight-bg {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(42% 130% at 100% 0%, rgba(124,58,237,0.40), transparent 60%),
    radial-gradient(42% 130% at 0% 100%, rgba(37,99,235,0.30), transparent 60%);
}
.boveda__spotlight-main { position: relative; display: flex; flex-direction: column; gap: 6px; }
.boveda__spotlight-kicker {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-h); font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase; color: #C4B5FD;
}
.boveda__spotlight-kicker .icon { width: 16px; height: 16px; }
.boveda__spotlight-title { font-family: var(--font-h); font-weight: 600; font-size: 22px; line-height: 1.15; letter-spacing: -0.01em; color: #fff; }
.boveda__spotlight-sub { font-family: var(--font-b); font-size: 14.5px; line-height: 1.6; color: rgba(247,247,247,0.72); max-width: 460px; }
.boveda__spotlight-go {
  position: relative; align-self: flex-start;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-h); font-weight: 600; font-size: 14px; color: #1A1130;
  padding: 12px 20px; border-radius: 999px;
  background: linear-gradient(180deg, #FFFFFF, #ECE9FB);
  box-shadow: 0 8px 22px rgba(0,0,0,0.26);
  transition: transform .2s var(--ease);
}
.boveda__spotlight-go .icon { width: 17px; height: 17px; transition: transform .2s var(--ease); }
.boveda__spotlight:hover .boveda__spotlight-go .icon { transform: translateX(3px); }

/* =========================================================
   SUBPÁGINA /boveda — biblioteca completa
   ========================================================= */
.vault-main { position: relative; z-index: 1; }

.vault-hero { padding: 104px 0 32px; }
.vault-back {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-h); font-size: 13.5px; font-weight: 500; color: rgba(15,7,30,0.58);
  margin-bottom: 22px; transition: color .2s var(--ease), gap .2s var(--ease);
}
.vault-back:hover { color: #6D28D9; gap: 11px; }
.vault-back .icon { width: 16px; height: 16px; }

.vault-hero__grid { display: flex; flex-direction: column; gap: 30px; }
.vault-hero__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-h); font-size: 12px; font-weight: 600; letter-spacing: 0.02em;
  color: #6D28D9; padding: 7px 14px; border-radius: 999px;
  background: rgba(124,58,237,0.10); border: 1px solid rgba(124,58,237,0.20);
}
.vault-hero__eyebrow .icon { width: 16px; height: 16px; }
.vault-hero__title {
  font-family: var(--font-h); font-weight: 700; font-size: 44px; line-height: 1.02;
  letter-spacing: -0.02em; margin: 16px 0 14px;
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.vault-hero__lead { font-family: var(--font-b); font-size: 16px; line-height: 1.7; color: rgba(15,7,30,0.7); max-width: 560px; margin: 0 0 22px; }
.vault-hero__meta { display: flex; flex-wrap: wrap; gap: 10px; }
.vault-stat {
  font-family: var(--font-h); font-size: 13px; color: rgba(15,7,30,0.66);
  padding: 8px 14px; border-radius: 12px;
  background: #FFFFFF; border: 1px solid rgba(15,7,30,0.10);
  box-shadow: 0 1px 2px rgba(15,7,30,0.04);
}
.vault-stat strong { color: #6D28D9; font-weight: 700; }

/* Ventana tipo editor/terminal — guiño al vibe coding */
.vault-term {
  border-radius: 16px; overflow: hidden;
  background: #0F0A1E;
  border: 1px solid rgba(124,58,237,0.30);
  box-shadow: 0 22px 50px rgba(15,7,30,0.22);
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}
.vault-term__bar {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; background: #161029;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.vault-term__dots { display: inline-flex; gap: 6px; flex-shrink: 0; }
.vault-term__dots i { width: 11px; height: 11px; border-radius: 50%; background: #3A2F55; }
.vault-term__dots i:nth-child(1) { background: #FF5F57; }
.vault-term__dots i:nth-child(2) { background: #FEBC2E; }
.vault-term__dots i:nth-child(3) { background: #28C840; }
.vault-term__path { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: rgba(247,247,247,0.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vault-term__path .icon { width: 14px; height: 14px; flex-shrink: 0; }
.vault-term__star { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: #C4B5FD; flex-shrink: 0; }
.vault-term__star .icon { width: 13px; height: 13px; }
.vault-term__body { padding: 18px 16px; display: flex; flex-direction: column; gap: 9px; }
.vault-term__line { margin: 0; font-size: 13px; line-height: 1.5; color: rgba(247,247,247,0.9); display: flex; align-items: center; gap: 7px; }
.vault-term__prompt { color: #22D3EE; font-weight: 600; }
.vault-term__line--muted { color: rgba(247,247,247,0.5); }
.vault-term__line--ok { color: #34D399; }
.vault-term__line--ok .icon { width: 15px; height: 15px; }
.vault-term__caret { display: inline-block; width: 8px; height: 15px; background: #22D3EE; margin-left: 2px; vertical-align: -2px; animation: vaultBlink 1.1s steps(1) infinite; }
@keyframes vaultBlink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
.vault-term__chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 6px; }
.vault-term__chip { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: rgba(247,247,247,0.8); padding: 5px 11px; border-radius: 999px; background: rgba(124,58,237,0.16); border: 1px solid rgba(124,58,237,0.28); }
.vault-term__chip .icon { width: 13px; height: 13px; }

/* La banda de la biblioteca se funde con el hero en la subpágina */
.boveda--page { background: transparent; border-top: 0; border-bottom: 0; padding-top: 6px; }

/* Tarjetas "Próximamente" */
.vault-card--soon {
  background: linear-gradient(180deg, #FAFAFD, #F3F3F8);
  border-style: dashed; border-color: rgba(15,7,30,0.18);
  box-shadow: none;
}
.vault-card--soon:hover { transform: translateY(-2px); border-color: rgba(124,58,237,0.42); box-shadow: 0 12px 28px rgba(15,7,30,0.08); }
.vault-card--soon .vault-card__type { color: rgba(15,7,30,0.55); background: rgba(15,7,30,0.05); border-color: rgba(15,7,30,0.12); }
.vault-card--soon .vault-card__title { color: rgba(15,7,30,0.82); }
.vault-card__soon { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-h); font-size: 11.5px; font-weight: 600; color: #7C3AED; white-space: nowrap; }
.vault-card__soon .icon { width: 13px; height: 13px; }
.boveda .badge--soon { color: #6D28D9; background: rgba(124,58,237,0.10); border-color: rgba(124,58,237,0.24); }
.vault-card__go--soon { color: rgba(15,7,30,0.45); }

/* Cierre de la subpágina */
.vault-cta { margin-top: 40px; padding: 30px 20px 4px; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.vault-cta__text { font-family: var(--font-h); font-size: 17px; font-weight: 500; line-height: 1.5; color: #0F071E; margin: 0; max-width: 460px; }

@media (min-width: 960px) {
  .boveda__spotlight { flex-direction: row; align-items: center; justify-content: space-between; gap: 32px; padding: 30px 36px; }
  .boveda__spotlight-go { align-self: center; flex-shrink: 0; }
  .boveda__spotlight-title { font-size: 25px; }

  .vault-hero { padding: 132px 0 40px; }
  .vault-hero__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; align-items: center; gap: 50px; }
  .vault-hero__title { font-size: 60px; }
  .vault-hero__lead { font-size: 17px; }

  /* Cierre de la Bóveda: más presencia, todo en 1 línea (hay espacio de sobra) */
  .vault-cta { margin-top: 52px; gap: 22px; padding-top: 38px; }
  .vault-cta__text { font-size: 22px; max-width: none; white-space: nowrap; }
  .vault-cta .btn { font-size: 17px; padding: 16px 38px; }
}

@media (prefers-reduced-motion: reduce) {
  .vault-term__caret { animation: none; }
}

/* =========================================================
   PÁGINAS LEGALES (privacidad · cookies · aviso legal)
   CSS aquí (no inline) para cumplir la CSP estricta del sitio.
   ========================================================= */
.legal-prose {
  max-width: 760px;
  font-family: var(--font-b); color: rgba(15, 7, 30, 0.78);
  line-height: 1.75; font-size: 16px;
  margin-top: 32px; padding-bottom: 72px;
}
.legal-prose h2 {
  font-family: var(--font-h); color: #0F071E;
  font-size: 19px; font-weight: 600; letter-spacing: -0.01em;
  margin: 36px 0 8px;
}
.legal-prose p { margin: 0 0 14px; }
.legal-prose ul { margin: 8px 0 16px 20px; padding: 0; }
.legal-prose li { margin-bottom: 6px; }
.legal-prose a { color: #6D28D9; text-decoration: underline; text-underline-offset: 2px; transition: color .2s var(--ease); }
.legal-prose a:hover { color: #4C1D95; }
.legal-prose table { width: 100%; border-collapse: collapse; font-size: 14.5px; margin: 14px 0 22px; }
.legal-prose th {
  font-family: var(--font-h); font-weight: 600; font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.04em; color: rgba(15, 7, 30, 0.5);
  padding: 8px 12px; border-bottom: 2px solid rgba(15, 7, 30, 0.1); text-align: left;
}
.legal-prose td { padding: 10px 12px; border-bottom: 1px solid rgba(15, 7, 30, 0.07); vertical-align: top; }
.legal-updated {
  margin-top: 36px; font-size: 14px;
  color: rgba(15, 7, 30, 0.45); font-family: var(--font-h);
}