/* DSolutions Lab 2 — portada guiada por el scroll (maqueta en miniatura). Página de prueba, sin enlaces desde el sitio. */
/* Letras servidas desde el propio sitio (antes Google Fonts: otra conexión que bloqueaba la primera pintura).
   Las «Fallback» son Arial / Georgia / Courier ajustadas a las medidas de cada letra (calculadas con fontTools):
   mientras llega la letra buena el texto ya ocupa lo mismo, y al cambiar no salta. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('../fonts/inter-latin-var.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/instrument-serif-italic-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/jetbrains-mono-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter Fallback'; font-weight: 400; src: local('Arial'), local('ArialMT'); size-adjust: 106.54%; ascent-override: 90.93%; descent-override: 22.64%; line-gap-override: 0%; }
@font-face { font-family: 'Inter Fallback'; font-weight: 600; src: local('Arial Bold'), local('Arial-BoldMT'); size-adjust: 101.33%; ascent-override: 95.61%; descent-override: 23.81%; line-gap-override: 0%; }
@font-face { font-family: 'Instrument Serif Fallback'; font-style: italic; src: local('Georgia Italic'), local('Georgia-Italic'); size-adjust: 79.04%; ascent-override: 125.26%; descent-override: 39.22%; line-gap-override: 0%; }
@font-face { font-family: 'JetBrains Mono Fallback'; src: local('Courier New'), local('CourierNewPSMT'); size-adjust: 99.98%; ascent-override: 102.02%; descent-override: 30%; line-gap-override: 0%; }

:root {
  --ink: #0F1B2D;
  --night: #0B1422;
  --signal: #4A8AD8;
  --signal-2: #7FB0E6;
  --bone: #F1ECE0;
  --gold: #E3B45C;
  --muted: rgba(241, 236, 224, 0.66);
  --serif: 'Instrument Serif', 'Instrument Serif Fallback', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', 'Inter Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --mono: 'JetBrains Mono', 'JetBrains Mono Fallback', ui-monospace, Menlo, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--night); color: var(--bone); }
body { font-family: var(--sans); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

/* ---------- nav ---------- */
.l2-nav {
  position: fixed; inset: 0 0 auto 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px clamp(16px, 4vw, 48px);
  background: linear-gradient(180deg, rgba(11, 20, 34, 0.72), rgba(11, 20, 34, 0));
}
.l2-brand { display: flex; align-items: center; gap: 10px; font-weight: 600; letter-spacing: -0.01em; }
.l2-brand img { filter: brightness(0) invert(0.94) sepia(0.12); }
.l2-tag {
  font: 500 11px/1 var(--mono); font-style: normal; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 5px 8px; border: 1px solid rgba(241, 236, 224, 0.28); border-radius: 999px; color: var(--muted);
}
.l2-right { display: flex; align-items: center; gap: 12px; }
.l2-lang { display: flex; border: 1px solid rgba(241, 236, 224, 0.22); border-radius: 999px; padding: 3px; }
.l2-lang button {
  font: 500 12px/1 var(--mono); color: var(--muted); background: none; border: 0; cursor: pointer;
  padding: 7px 10px; border-radius: 999px; min-width: 40px; min-height: 30px;
}
.l2-lang button.is-on { background: var(--bone); color: var(--ink); }
.l2-cta {
  font-weight: 600; font-size: 14px; padding: 10px 16px; border-radius: 999px;
  background: var(--bone); color: var(--ink); white-space: nowrap;
}

/* ---------- escenario ---------- */
.l2-story { position: relative; height: 720vh; }
.l2-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
#scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 0.6s ease; }
#scene.is-ready { opacity: 1; } /* la maqueta entra con un fundido cuando llega su primer cuadro */
/* grano de película muy suave: disimula el banding de la compresión y da textura de cine */
.l2-grain {
  position: absolute; inset: -50%; pointer-events: none; opacity: 0.07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.l2-shade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(11, 20, 34, 0.86) 0%, rgba(11, 20, 34, 0.5) 34%, rgba(11, 20, 34, 0) 58%),
    linear-gradient(270deg, rgba(11, 20, 34, 0.62) 0%, rgba(11, 20, 34, 0) 15%),
    linear-gradient(0deg, rgba(11, 20, 34, 0.7) 0%, rgba(11, 20, 34, 0) 32%),
    radial-gradient(ellipse 80% 75% at 62% 48%, rgba(6, 11, 20, 0) 60%, rgba(6, 11, 20, 0.42) 100%);
}

.l2-beats { position: absolute; inset: 0; pointer-events: none; }
.l2-beat {
  position: absolute; left: clamp(20px, 6vw, 96px); bottom: clamp(56px, 13vh, 150px);
  width: min(680px, 47vw); opacity: 0; visibility: hidden;
}
.l2-beat.is-live { pointer-events: auto; }
/* El primer paso se ve desde la primera pintura (no espera al JavaScript) y entra con CSS. */
.l2-beat[data-beat="0"] { opacity: 1; visibility: visible; }
.l2-beat--intro .l2-kick, .l2-beat--intro .l2-h, .l2-beat--intro .l2-sub, .l2-beat--intro .l2-hint { animation: l2in 0.95s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.l2-beat--intro .l2-h { animation-delay: 0.06s; }
.l2-beat--intro .l2-sub { animation-delay: 0.2s; }
.l2-beat--intro .l2-hint { animation-delay: 0.34s; }
@keyframes l2in { from { opacity: 0.01; transform: translate3d(0, 18px, 0); } to { opacity: 1; transform: none; } }
.l2-kick { margin: 0 0 18px; font: 500 12px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--signal-2); }
.l2-kick span { display: inline-block; padding: 5px 8px; margin-right: 6px; border: 1px solid currentColor; border-radius: 999px; }
.l2-kick b { font-weight: 500; }
.l2-kick--gold { color: var(--gold); }
.l2-h {
  margin: 0; font-weight: 600; letter-spacing: -0.025em; line-height: 1.04;
  font-size: clamp(34px, 3.9vw, 60px); text-wrap: balance;
}
.l2-h i { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; font-size: 1.12em; color: var(--signal-2); }
.l2-beat[data-beat="3"] .l2-h i { color: var(--gold); }
.l2-h .w { display: inline-block; will-change: transform, opacity; }
.l2-sub { margin: 18px 0 0; font-size: clamp(16px, 1.3vw, 19px); color: var(--muted); max-width: 44ch; }

.l2-hint { display: flex; align-items: center; gap: 10px; margin: 34px 0 0; font: 500 11px/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.l2-hint span { width: 1px; height: 38px; background: linear-gradient(180deg, var(--bone), transparent); animation: l2drop 1.8s ease-in-out infinite; transform-origin: top; }
.l2-hint b { font-weight: 500; }
@keyframes l2drop { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

.l2-count { margin: 20px 0 0; font: 500 14px/1 var(--mono); color: var(--muted); }
.l2-count b { font-size: 28px; color: var(--signal-2); font-weight: 500; }

.l2-money { margin-top: 22px; padding: 18px 20px; border: 1px solid rgba(227, 180, 92, 0.45); border-radius: 18px; background: rgba(11, 20, 34, 0.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); max-width: 420px; }
.l2-money-n { margin: 0; font: 500 clamp(34px, 3.4vw, 48px)/1 var(--mono); color: var(--gold); letter-spacing: -0.02em; }
.l2-money-n small { font-size: 0.42em; margin-left: 6px; color: var(--muted); letter-spacing: 0; }
.l2-money-t { margin: 10px 0 0; font-weight: 600; }
.l2-money-note { margin: 6px 0 0; font-size: 13px; color: var(--muted); }

.l2-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.l2-btn { display: inline-flex; align-items: center; min-height: 50px; padding: 14px 22px; border-radius: 999px; font-weight: 600; font-size: 16px; transition: transform 160ms ease, background 160ms ease; }
.l2-btn:hover { transform: translateY(-2px); }
.l2-btn--gold { background: var(--gold); color: var(--ink); }
.l2-btn--ghost { border: 1px solid rgba(241, 236, 224, 0.4); color: var(--bone); }
.l2-btn--ghost:hover { background: rgba(241, 236, 224, 0.1); }

/* riel de pasos (a la derecha) */
.l2-rail { position: absolute; right: clamp(16px, 3vw, 44px); top: 50%; transform: translateY(-50%); margin: 0; padding: 16px 14px; list-style: none; display: grid; gap: 16px; background: rgba(11, 20, 34, 0.58); border: 1px solid rgba(241, 236, 224, 0.1); border-radius: 16px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.l2-rail li { display: flex; align-items: center; justify-content: flex-end; gap: 10px; font: 500 11px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(241, 236, 224, 0.38); transition: color 240ms ease; }
.l2-rail li::after { content: ""; width: 8px; height: 8px; border-radius: 50%; border: 1px solid currentColor; transition: background 240ms ease, transform 240ms ease; }
.l2-rail li.is-done { color: rgba(241, 236, 224, 0.62); }
.l2-rail li.is-done::after { background: currentColor; }
.l2-rail li.is-on { color: var(--bone); }
.l2-rail li.is-on::after { background: var(--signal-2); border-color: var(--signal-2); transform: scale(1.4); }
.l2-rail li.is-on.is-gold::after { background: var(--gold); border-color: var(--gold); }

.l2-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(241, 236, 224, 0.12); }
.l2-progress i { display: block; height: 100%; width: 100%; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, var(--signal), var(--gold)); }

/* ---------- después ---------- */
.l2-after { background: var(--bone); color: var(--ink); padding: clamp(72px, 12vh, 140px) clamp(16px, 6vw, 96px); }
.l2-after-in { max-width: 760px; }
.l2-after .l2-kick { color: #1B4E85; }
.l2-after h2 { margin: 0 0 16px; font-size: clamp(28px, 3vw, 42px); line-height: 1.1; letter-spacing: -0.02em; }
.l2-after p { color: #3B4556; font-size: 18px; }
.l2-back { display: inline-block; margin-top: 18px; font-weight: 600; border-bottom: 2px solid var(--ink); }

/* recuadro del laboratorio (solo en esta página de prueba) */
.l2-labinfo { margin: 28px 0 8px; padding: 18px 20px; border: 1px solid rgba(15, 27, 45, 0.16); border-radius: 16px; background: #fff; }
.l2-labinfo-h { margin: 0 0 12px !important; font: 500 12px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: #1B4E85 !important; }
.l2-labinfo dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; }
.l2-labinfo dt { font-size: 13px; color: #5B6472; }
.l2-labinfo dd { margin: 2px 0 0; font: 500 18px/1.3 var(--mono); color: var(--ink); }
.l2-labinfo-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0 !important; }
.l2-labinfo-links a { font-size: 14px; font-weight: 600; padding: 9px 14px; border-radius: 999px; border: 1px solid rgba(15, 27, 45, 0.25); }
.l2-labinfo-links a:hover { background: var(--ink); color: var(--bone); }
.l2-labinfo-note { margin: 12px 0 0 !important; font-size: 14px !important; color: #5B6472 !important; }

/* ---------- celular: imagen arriba, texto abajo ---------- */
@media (max-width: 699px), (orientation: portrait) and (max-width: 900px) {
  .l2-story { height: 640vh; }
  .l2-shade { background: none; } /* en celular el fondo del texto lo dibuja el canvas, a la altura del paso activo */
  .l2-beat { left: 16px; right: 16px; width: auto; bottom: max(28px, env(safe-area-inset-bottom)); }
  .l2-h { font-size: clamp(30px, 8.4vw, 40px); }
  .l2-kick { margin-bottom: 12px; }
  .l2-sub { font-size: 16px; }
  .l2-hint { margin-top: 20px; }
  .l2-money { margin-top: 14px; padding: 14px 16px; }
  .l2-actions { flex-direction: column; }
  .l2-btn { justify-content: center; }
  .l2-rail { top: 76px; right: 16px; left: 16px; transform: none; padding: 0; background: none; border: 0; border-radius: 0; backdrop-filter: none; -webkit-backdrop-filter: none; display: flex; justify-content: space-between; gap: 4px; }
  .l2-rail li { font-size: 0; gap: 0; flex: 1; justify-content: center; height: 10px; }
  .l2-rail li::after { width: 100%; height: 3px; border-radius: 2px; border: 0; background: rgba(241, 236, 224, 0.2); }
  .l2-rail li.is-done::after { background: rgba(241, 236, 224, 0.62); }
  .l2-rail li.is-on::after { transform: none; }
  .l2-cta { display: none; }
  .l2-tag { display: none; }
}

/* celulares bajos (iPhone SE y similares): menos alto el recuadro de la plata para que la imagen respire */
@media (max-width: 699px) and (max-height: 720px) {
  .l2-money-note { display: none; }
  .l2-money { margin-top: 12px; padding: 12px 14px; }
  .l2-money-n { font-size: 30px; }
  .l2-h { font-size: clamp(28px, 7.6vw, 34px); }
  .l2-labinfo dl { grid-template-columns: 1fr; }
}
@media (max-width: 420px) { .l2-labinfo dl { grid-template-columns: 1fr 1fr; } }

@media (prefers-reduced-motion: reduce) {
  .l2-hint span { animation: none; }
  .l2-beat--intro .l2-kick, .l2-beat--intro .l2-h, .l2-beat--intro .l2-sub, .l2-beat--intro .l2-hint { animation: none; }
  #scene { transition: none; }
  .l2-btn { transition: none; }
}