/* ─────────────────────────────────────────────────────────────────────────
   marz-core-1.css — base compartida de prompts.html y paquetes.html.

   Tipografía, tokens, botones con texto que sube, barra superior, cinta,
   cifras, caja lima de cierre y pie con "Marz" en contorno. Lo propio de
   cada página sigue en su <style>, que carga DESPUÉS y gana en empates.

   La versión va en el nombre (como /lib/*): el archivo se cachea un año
   immutable. Si cambia algo acá, se copia a marz-core-2.css y se actualiza
   el <link> de las páginas — nunca se edita en el sitio un archivo ya
   publicado bajo el mismo nombre.
   ───────────────────────────────────────────────────────────────────────── */

/* Unbounded: display geométrico redondeado. Un solo peso (400) por
   disciplina de marca: 600 se ve demasiado "blob" para la estética. */
@font-face {
  font-family: 'Unbounded';
  src: url('/fonts/Unbounded-Regular-latin.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Syne';
  src: url('/fonts/Syne-Regular-latin.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Syne';
  src: url('/fonts/Syne-SemiBold-latin.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
/* JetBrains Mono: etiquetas, códigos, semanas y botones. Subset latino. */
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/fonts/JetBrainsMono-Regular-latin.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
/* Fallbacks métricos: Arial ajustada al ancho y alto reales de cada fuente
   (canvas measureText a 100px, oct 2026). Sin ellos el titular del hero se
   pintaba en system-ui y al llegar Unbounded (1.29× más ancha) re-partía las
   líneas: CLS 0.48. size-adjust = ancho marca / ancho Arial; los override =
   métrica de la marca / size-adjust. */
@font-face {
  font-family: 'Unbounded Fallback';
  src: local('Arial'), local('ArialMT'), local('Helvetica');
  size-adjust: 129.2%; ascent-override: 76.6%; descent-override: 18.6%; line-gap-override: 0%;
}
@font-face {
  font-family: 'Syne Fallback';
  src: local('Arial'), local('ArialMT'), local('Helvetica');
  font-weight: 400;
  size-adjust: 98.5%; ascent-override: 94.4%; descent-override: 27.4%; line-gap-override: 0%;
}
@font-face {
  font-family: 'Syne Fallback';
  src: local('Arial Bold'), local('Arial-BoldMT'), local('Helvetica Bold');
  font-weight: 600;
  size-adjust: 106.3%; ascent-override: 87.5%; descent-override: 25.4%; line-gap-override: 0%;
}

/* ─── TOKENS ────────────────────────────────────────────────
   Un solo acento (lima), también en el resplandor ambiental del fondo.
   marz-core-2 (oct 2026): el orbe y la aurora violeta pasan a lima. */
:root {
  --font-display: 'Unbounded', 'Unbounded Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Syne', 'Syne Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --bg:          #06060d;
  --surface:     #0c0c15;
  --surface-2:   #12121d;
  --line:        rgba(255,255,255,.1);
  --line-strong: rgba(255,255,255,.2);
  --text:        #f2f1f7;
  --muted:       rgba(242,241,247,.6);
  --faint:       rgba(242,241,247,.4);
  --accent:      #c8f04d;
  --accent-soft: rgba(200,240,77,.12);
  --accent-line: rgba(200,240,77,.45);
  --on-accent:   #06060d;
  --on-light-muted: rgba(6,6,13,.66);
  --on-light-line:  rgba(6,6,13,.14);
  --glow-lime:   rgba(200,240,77,.5);
  --glow-soft:   rgba(200,240,77,.26);
  --danger:      #ff7a7a;

  --r-xs: 6px; --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-pill: 999px;

  --wrap:      1180px;
  --gutter:    clamp(16px, 4vw, 40px);
  --section-y: clamp(72px, 10vw, 136px);
  --stack:     clamp(28px, 4vw, 48px);
  --topbar-h:  76px;

  --ease:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(.7, 0, .2, 1);

  /* Vidrio: solo para formularios (gate de prompts). */
  --glass-bg:     linear-gradient(150deg, rgba(255,255,255,.09), rgba(255,255,255,.022) 60%);
  --glass-border: rgba(255,255,255,.12);
  --glass-shadow: 0 24px 70px -20px rgba(0,0,0,.65);
  --glass-inset:  inset 0 1px 0 rgba(255,255,255,.18), inset 0 0 0 1px rgba(255,255,255,.03);
  --blur:         blur(22px) saturate(155%);

  /* ─── Escala de cuerpo ───
     Copia literal de la de index.html: allá está la fuente de verdad. */
  --body-lede: clamp(.906rem, .2vw + .867rem, 1.044rem); /* 14.5 → 16.7px */
  --body:      clamp(1rem, .18vw + .964rem, 1.125rem);   /* 16 → 18px */
  --body-sm:   clamp(.875rem, .16vw + .843rem, .988rem); /* 14 → 15.8px */
  /* Etiquetas en mono (JetBrains Mono ≈ 0.6em por carácter). */
  --label:     clamp(.66rem, .12vw + .63rem, .74rem);
}

/* Los h1..h6 heredarían del body: necesitan una regla explícita para quedar
   en display (peso 400, el único que usamos para Unbounded). */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -.01em;
  text-wrap: balance;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* `overflow-x` NO va en el root: `hidden` hace de <html> un contenedor de
   scroll y rompe el traspaso de la barra de URL en móvil. El recorte
   horizontal va en <body> con `clip`. */
html { background: var(--bg); scroll-behavior: smooth; }
/* Lenis maneja el scroll suave: el smooth nativo se pelearía con él. */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto; }
.lenis.lenis-stopped { overflow: hidden; }
html, body { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { width: 0; height: 0; display: none; }
body {
  background: transparent;
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  position: relative;
  overflow-x: clip;
}
::selection { background: var(--accent); color: var(--on-accent); }
a { color: inherit; }
img, video { max-width: 100%; }
section[id] { scroll-margin-top: var(--topbar-h); }

/* ─── FONDO AMBIENTAL ───────────────────────────────────── */
.backdrop { position: fixed; inset: 0; z-index: -3; overflow: hidden; pointer-events: none; background: var(--bg); }
.orb {
  position: absolute; border-radius: 50%;
  filter: blur(80px);
  opacity: .5; will-change: transform;
  transform: translate3d(calc(var(--mx,0)*var(--pf,10px)), calc(var(--my,0)*var(--pf,10px)), 0);
}
.orb-wrap { position: absolute; inset: -10% 0; will-change: transform; }
.orb--1 { width: 55vw; height: 55vw; left: -12vw; top: -14vw;
  background: radial-gradient(circle at 30% 30%, rgba(200,240,77,.38), transparent 62%);
  animation: float1 22s var(--ease) infinite; --pf: -16px; }
.orb--2 { width: 52vw; height: 52vw; right: -16vw; top: 30vh;
  background: radial-gradient(circle at 60% 40%, var(--glow-soft), transparent 60%);
  animation: float2 28s var(--ease) infinite; --pf: 22px; }
.orb--3 { width: 50vw; height: 50vw; left: 18vw; bottom: -20vw;
  background: radial-gradient(circle at 50% 50%, rgba(200,240,77,.18), transparent 62%);
  animation: float3 25s var(--ease) infinite; --pf: -10px; }
/* Solo translate: con scale el blur(80px) se volvía a rasterizar en cada
   frame; desplazándose, la capa ya desenfocada solo se compone. */
@keyframes float1 { 0%,100%{ transform: translate3d(0,0,0) } 50%{ transform: translate3d(6vw,4vh,0) } }
@keyframes float2 { 0%,100%{ transform: translate3d(0,0,0) } 50%{ transform: translate3d(-5vw,6vh,0) } }
@keyframes float3 { 0%,100%{ transform: translate3d(0,0,0) } 50%{ transform: translate3d(4vw,-5vh,0) } }

.aurora {
  position: fixed; inset: -30%; z-index: -2; pointer-events: none;
  background: conic-gradient(from 210deg at 60% 40%, transparent 0deg, rgba(200,240,77,.05) 60deg, transparent 140deg, rgba(200,240,77,.06) 250deg, transparent 340deg);
  filter: blur(40px); opacity: .5; animation: spin 60s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg) } }

.grain {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .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='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.backdrop::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 50% 0%, transparent 40%, rgba(6,6,13,.78) 100%);
}

/* ─── UTILIDADES ────────────────────────────────────────── */
.glass {
  position: relative;
  background: var(--glass-bg);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow), var(--glass-inset);
  border-radius: var(--r-lg);
}
.glass::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.14), transparent 22%);
  -webkit-mask: linear-gradient(#000, transparent 40%);
          mask: linear-gradient(#000, transparent 40%);
  opacity: .8;
}
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.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;
}
/* Etiqueta mono: "01 · Qué obtienes", "M/01", "Semana 1"… */
.eyebrow, .label {
  font-family: var(--font-mono); font-weight: 400;
  font-size: var(--label); letter-spacing: .08em; text-transform: uppercase;
}
.eyebrow { color: var(--accent); display: flex; align-items: center; gap: 10px; }
.eyebrow::before {
  content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 10px var(--glow-lime);
}
.mono-accent { font-family: var(--font-mono); color: var(--accent); font-size: .92em; }

/* ─── BOTONES (texto que sube al pasar el ratón) ─────────────
   .roll lo arma el JS con dos copias del texto; sin JS el botón muestra
   su texto normal. */
.cta, .cta-ghost {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-mono); font-weight: 400;
  font-size: var(--label); letter-spacing: .08em; text-transform: uppercase; line-height: 1.3;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  border-radius: var(--r-pill);
  transition: transform .4s var(--ease), background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), box-shadow .4s var(--ease);
}
button.cta, button.cta-ghost { -webkit-appearance: none; appearance: none; }
.cta {
  background: var(--accent); color: var(--on-accent); border: 1px solid var(--accent);
  padding: 15px 26px;
  box-shadow: 0 10px 30px -10px var(--glow-lime);
}
.cta:hover { transform: translateY(-2px); box-shadow: 0 18px 44px -12px var(--glow-lime); }
.cta-ghost {
  background: transparent; color: var(--text); border: 1px solid var(--line-strong);
  padding: 15px 26px;
}
.cta-ghost:hover { border-color: var(--accent); color: var(--accent); }
.roll { position: relative; display: block; overflow: hidden; height: 1.3em; }
.roll > span { display: block; transition: transform .45s var(--ease-io); }
.cta:hover .roll > span, .cta-ghost:hover .roll > span,
.cta:focus-visible .roll > span, .cta-ghost:focus-visible .roll > span { transform: translateY(-100%); }
.cta:focus-visible, .cta-ghost:focus-visible, .lang-btn:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px;
}

/* ─── BARRA SUPERIOR ────────────────────────────────────── */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 80; pointer-events: none; }
.progress i { display: block; height: 100%; background: var(--accent); transform-origin: 0 50%; transform: scaleX(0); }
.topbar {
  position: fixed; top: 14px; left: 50%; transform: translate(-50%, 0);
  width: min(var(--wrap), calc(100% - 2 * var(--gutter)));
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 12px 10px 20px;
  z-index: 60; border-radius: var(--r-pill);
  border: 1px solid transparent;
  transition: transform .5s var(--ease-io), background-color .35s var(--ease), border-color .35s var(--ease);
}
.topbar.is-solid {
  background: rgba(6,6,13,.62);
  backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%);
  border-color: var(--line);
}
.topbar.is-hidden { transform: translate(-50%, calc(-100% - 24px)); }
.brand img { height: 19px; width: auto; display: block; }
.topbar-right { display: flex; align-items: center; gap: 8px; }
.lang-btn {
  background: transparent; border: 1px solid var(--line-strong);
  color: var(--text);
  padding: 8px 13px; border-radius: var(--r-pill);
  font-family: var(--font-mono); font-size: var(--label); letter-spacing: .06em;
  cursor: pointer; transition: color .25s var(--ease), background-color .25s var(--ease), border-color .25s var(--ease);
  display: inline-flex; align-items: center; gap: 4px; line-height: 1; white-space: nowrap;
}
.lang-btn:hover { color: var(--accent); background: var(--accent-soft); border-color: var(--accent-line); }
.lang-active { color: var(--accent); }

/* ─── TITULAR CON MÁSCARA LÍNEA A LÍNEA ─────────────────────
   Las líneas las arma un script inline antes del primer pintado; la entrada
   es CSS puro y solo existe con .js-motion (sin prefers-reduced-motion). */
.line { display: block; overflow: hidden; padding: .04em 0 .06em; margin: -.04em 0 -.06em; }
.line__in { display: inline-block; will-change: transform; }
@keyframes line-up { from { transform: translateY(110%); } }
@keyframes fade-up { from { opacity: 0; transform: translateY(24px); } }

/* ─── CIFRAS ────────────────────────────────────────────── */
.chip { font-family: var(--font-mono); font-size: var(--label); letter-spacing: .04em; color: var(--muted); }
.chip strong { color: var(--accent); font-weight: 400; }
.stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: clamp(28px, 4vw, 48px); border-top: 1px solid var(--line);
}
.stat { padding: 22px 20px 0; border-left: 1px solid var(--line); }
.stat:first-child { border-left: 0; padding-left: 0; }
.stat-num {
  display: block; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2.4rem, 5vw, 4.6rem); line-height: 1.08; letter-spacing: -.01em;
  text-transform: uppercase; font-variant-numeric: tabular-nums;
}
.stat-lbl { display: block; margin-top: 8px; color: var(--muted); }

/* ─── CINTA ─────────────────────────────────────────────── */
.marquee {
  margin: clamp(48px, 7vw, 96px) calc(50% - 50vw) 0;
  overflow: hidden; white-space: nowrap;
  border-block: 1px solid var(--line);
  padding: clamp(16px, 2.2vw, 26px) 0;
}
.marquee__track { display: inline-flex; animation: marquee 34s linear infinite; will-change: transform; }
.marquee__track span {
  display: inline-flex; align-items: center;
  gap: clamp(22px, 3.6vw, 52px); padding-right: clamp(22px, 3.6vw, 52px);
  font-family: var(--font-display); font-size: clamp(1.75rem, 4.2vw, 3.6rem); line-height: 1.1; letter-spacing: -.01em;
}
.marquee__track span::after { content: '✦'; color: var(--accent); font-size: .42em; }
@keyframes marquee { to { transform: translateX(-50%) } }

/* ─── ENCABEZADO DE SECCIÓN ─────────────────────────────── */
section.block { padding-top: var(--section-y); }
.section-head {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 18px clamp(28px, 5vw, 72px); align-items: end;
  margin-bottom: var(--stack);
}
.section-head .eyebrow { grid-column: 1 / -1; }
/* H2 en tipo frase: la frase clave (<em>) va en lima. */
.section-head h2 {
  font-size: clamp(1.75rem, 2.8vw + .5rem, 3.1rem);
  line-height: 1.12; letter-spacing: -.01em;
}
h2 em, h3 em { font-style: normal; color: var(--accent); }
.section-head p { color: var(--muted); max-width: 28.5em; font-size: var(--body-lede); }

/* ─── CIERRE: caja lima ─────────────────────────────────── */
.outro {
  margin-top: var(--section-y);
  background: var(--accent); color: var(--on-accent);
  border-radius: var(--r-lg); text-align: center;
  padding: clamp(44px, 7vw, 104px) clamp(22px, 5vw, 72px);
}
.outro h2 { font-size: clamp(1.75rem, 3.6vw + .4rem, 3.8rem); line-height: 1.12; letter-spacing: -.01em; margin-bottom: 26px; }
.outro h2 em { color: var(--accent); background: var(--on-accent); padding: 0 .14em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
/* ~62 caracteres por línea en Syne: 62 × .46 ≈ 28.5em. */
.outro p { font-size: clamp(1.1rem, 1vw + .85rem, 1.6rem); line-height: 1.55; max-width: 28.5em; margin: 0 auto 36px; }
.outro .cta { background: var(--on-accent); color: var(--text); border-color: var(--on-accent); box-shadow: none; }

/* ─── PIE ───────────────────────────────────────────────── */
.foot-big {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(5rem, 25vw, 22rem); line-height: 1.08; letter-spacing: -.02em;
  text-align: center;
  /* Contorno sin las líneas internas: Unbounded tiene contornos que se
     solapan (a, r, z). paint-order dibuja el relleno (color del fondo)
     encima del trazo y tapa esos solapes; queda solo el borde exterior. */
  color: var(--bg); paint-order: stroke fill;
  -webkit-text-stroke: 3px var(--line-strong);
  padding-top: var(--section-y); user-select: none;
  transition: color .6s var(--ease), -webkit-text-stroke-color .6s var(--ease);
}
.foot-big:hover { color: var(--accent); -webkit-text-stroke-color: var(--accent); }
.foot { padding-bottom: 44px; }
.foot-row {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  padding-top: 26px; border-top: 1px solid var(--line);
  font-family: var(--font-mono); font-size: var(--label); letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
.foot a { text-decoration: none; }
.foot a:hover { color: var(--accent); }

/* Teléfono: el fondo ambiental queda quieto y sin grano, y la barra usa un
   fondo sólido. Tres capas de 50vw con blur(80px) animadas, un overlay a
   pantalla completa con mix-blend y un backdrop-filter recalculado en cada
   frame de scroll son lo que más GPU pedía en móvil; a este tamaño la
   diferencia visual no se percibe. */
@media (max-width: 768px) {
  .orb { animation: none; will-change: auto; }
  .orb-wrap { will-change: auto; }
  .grain { display: none; }
  .topbar.is-solid { background: rgba(6,6,13,.92); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}