/* Masterclass — Jonathan × La Segunda Mordida
   Lenguaje visual: papel cálido #f2eee7, tinta #121213, verde solo para estados activos. */

:root {
  --paper: #f2eee7;
  --ink: #121213;
  --ink-soft: #4a463f;
  --ink-mute: #6d675d;
  --line: #d5cdbf;
  --line-soft: #e0d9cc;
  --tag: #8b857a;
  --night: #0d0e0e;
  --night-line: #2c2d2d;
  --night-mute: #97918a;
  --night-tag: #7e7871;
  --live: oklch(0.55 0.13 152);
  --live-bright: oklch(0.78 0.16 152);
  --build: oklch(0.72 0.15 70);
  --serif: 'Instrument Serif', Georgia, serif;
  --sans: 'Archivo', Helvetica, Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --nav-band: 60px;
  --hud-band: 52px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--ink); text-decoration: none; border-bottom: 1px solid currentColor; }
a:hover { color: var(--live); }
::selection { background: var(--ink); color: var(--paper); }
em { font-family: var(--serif); font-style: italic; }

/* ---------- Contenedor de escenas ---------- */
.deck {
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  position: relative;
}
.scene {
  position: relative;
  min-height: 100vh;
  scroll-snap-align: start;
  padding: calc(4vh + var(--hud-band)) 5vw calc(6vh + var(--nav-band));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 4vh;
  overflow: hidden;
}
.scene--night { background: var(--night); color: var(--paper); }
.scene--black { background: var(--ink); color: var(--paper); }
.scene--center { justify-content: center; }
.scene--split { display: grid; grid-template-columns: 1fr 1.15fr; gap: 5vw; align-items: center; }

/* ---------- Tipografía ---------- */
.kicker { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; color: var(--tag); margin: 0; }
.scene--night .kicker, .scene--black .kicker { color: var(--night-tag); }
.display { font-family: var(--serif); font-weight: 400; line-height: .92; letter-spacing: -.02em; margin: 0; }
.display--xl { font-size: clamp(40px, 7vw, 132px); }
.display--l { font-size: clamp(34px, 5.4vw, 100px); }
.display--m { font-size: clamp(30px, 4.4vw, 80px); }
.display--s { font-size: clamp(24px, 3vw, 56px); line-height: 1.02; }
.dim { color: #b0a99c; }
.scene--night .dim, .scene--black .dim { color: #6a655e; }
.lede { font-size: clamp(16px, 1.5vw, 26px); color: var(--ink-soft); margin: 3vh 0 0; }
.scene--night .lede { color: var(--night-mute); }
.note { font-size: clamp(12px, 1vw, 17px); line-height: 1.45; color: var(--ink-mute); }
.measure-s { max-width: 17em; }
.measure-m { max-width: 22em; }
.measure-l { max-width: 26em; }

/* ---------- Firma y logo ---------- */
.signature { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; position: relative; }
.signature__mark { font-family: var(--mono); font-size: clamp(11px, .85vw, 15px); letter-spacing: .2em; }
.logo-slot {
  width: 132px; height: 32px; flex: none;
  border: 1px dashed #b6afa3;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 9px; letter-spacing: .12em; color: #8f8878;
}
.scene--night .logo-slot, .scene--black .logo-slot { border-color: #3b3c3b; color: #6d6a64; }

/* ---------- Mordidas (formas) ---------- */
.bite { position: absolute; border-radius: 50%; pointer-events: none; }
.bite--solid { background: var(--ink); }
.bite--paper { background: var(--paper); }
.bite--outline { border: 1.5px solid #ddd6c8; }
.bite--outline-night { border: 1px solid #1e2020; }

.loop { position: relative; width: clamp(140px, 15vw, 240px); height: clamp(140px, 15vw, 240px); flex: none; }
.loop__ring { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--ink); }
.loop__dash { position: absolute; inset: 15%; border-radius: 50%; border: 1px dashed #c2bbae; animation: biteSpin 40s linear infinite; }
.loop__bite { position: absolute; left: -11%; top: 34%; width: 34%; height: 34%; border-radius: 50%; background: var(--paper); }
.loop__label {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 3px; text-align: center;
  font-family: var(--mono); font-size: 10px; letter-spacing: .18em; color: var(--ink-soft);
}

/* ---------- Rejillas editoriales ---------- */
.rule { border-top: 1px solid var(--line); }
.scene--night .rule, .scene--black .rule { border-color: var(--night-line); }
.cols { display: grid; }
.cols--4 { grid-template-columns: repeat(4, 1fr); }
.cols--5 { grid-template-columns: repeat(5, 1fr); }
.cols--9 { grid-template-columns: repeat(9, minmax(0, 1fr)); }
.cols--3-gap { grid-template-columns: repeat(3, 1fr); gap: 2vw; }
.cols--5-gap { grid-template-columns: repeat(5, 1fr); gap: 1.6vw; }
.cell { padding: 3vh 1.6vw; border-right: 1px solid var(--line-soft); }
.cell:first-child { padding-left: 0; }
.cell:last-child { border-right: 0; padding-right: 0; }
.cell__num { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; color: #a29b8e; }
.cell__title { font-size: clamp(15px, 1.4vw, 26px); font-weight: 600; margin: 8px 0 5px; }
.cell--active { background: #ebe5db; }
.cell--now { border-top: 2px solid var(--live); margin-top: -2px; }
.cell--now .cell__num { color: var(--live); }
.cell--live .cell__num { color: var(--live); }
.cell--live .cell__title { color: oklch(0.42 0.11 152); }

/* barra de telemetría (solo donde aporta narrativa) */
.telemetry { position: relative; height: 1px; background: var(--line); overflow: hidden; }
.telemetry__sweep { position: absolute; inset: 0; width: 9%; background: var(--live); animation: lineSweep 9s linear infinite; }
.status { display: flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: 11px; letter-spacing: .16em; color: var(--tag); }
.scene--night .status { color: var(--night-tag); }
.status__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--build); animation: dotPulse 1.5s ease-in-out infinite; }

/* ---------- Media placeholders ---------- */
.media {
  position: relative;
  background-image: repeating-linear-gradient(122deg, #e4ded2 0 10px, #efeae0 10px 20px);
  border: 1px solid #ded7c9;
}
.media--night { background-image: repeating-linear-gradient(122deg, #16181a 0 10px, #101213 10px 20px); border: 0; }
.media--empty { background: none; border: 1px dashed #c8c1b4; }
.media__caption {
  position: absolute; left: 1.4vw; bottom: 3vh;
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: #7f7869;
}
.media--night .media__caption { color: var(--night-tag); }
.media__play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 72px; height: 72px; border-radius: 50%; border: 1px solid #b6afa3;
  display: flex; align-items: center; justify-content: center; font-size: 16px; color: var(--ink-soft);
}
.media--night .media__play { border-color: #4b4d4d; color: #cfcac2; }
.media__rec { position: absolute; left: 2vw; top: 4vh; font-family: var(--mono); font-size: 11px; letter-spacing: .18em; color: var(--build); }
.filmstrip { display: grid; grid-template-columns: 1.6fr 1fr; grid-template-rows: 1fr 1fr; gap: 1px; background: #1c1d1d; }
.filmstrip > :first-child { grid-row: span 2; }
.scene--film { display: grid; grid-template-rows: 1fr auto; padding: 0; gap: 0; }
.scene--film .scene__foot { padding: 5vh 5vw calc(5vh + var(--nav-band)); display: grid; grid-template-columns: 1.45fr 1fr; gap: 4vw; align-items: end; }

.project__name { font-size: clamp(18px, 1.8vw, 30px); font-weight: 600; margin: 16px 0 6px; }
.project--soon { opacity: .5; }

/* ---------- Retos / votación ---------- */
.challenge { border-top: 2px solid var(--ink); padding-top: 2.6vh; display: flex; flex-direction: column; gap: 2vh; }
.challenge__name { font-size: clamp(20px, 2.1vw, 36px); font-weight: 600; line-height: 1.05; }
.challenge p { font-size: clamp(13px, 1.05vw, 18px); line-height: 1.5; color: var(--ink-mute); margin: 0; flex: 1; }
.btn {
  appearance: none; background: none; border: 1px solid var(--ink); color: var(--ink);
  padding: 14px 18px; cursor: pointer; font-family: var(--mono); font-size: 12px; letter-spacing: .16em;
  display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 48px;
}
.btn:hover { background: var(--ink); color: var(--paper); }
.btn--link {
  border: 0; border-bottom: 2px solid var(--ink); padding: 0 0 9px;
  font-size: clamp(13px, 1.05vw, 18px); letter-spacing: .14em; gap: 14px; transition: gap .3s ease;
}
.btn--link:hover { background: none; color: var(--live); border-bottom-color: var(--live); gap: 22px; }

.flow { display: flex; flex-direction: column; gap: 1.6vh; font-family: var(--mono); font-size: clamp(12px, 1.05vw, 18px); letter-spacing: .14em; }
.flow span:nth-child(even) { color: #b0a99c; }
.flow__end { color: oklch(0.45 0.12 152); }

.years { display: flex; align-items: baseline; gap: 3vw; font-family: var(--serif); font-size: clamp(48px, 9vw, 170px); line-height: .85; }

/* ---------- QR ---------- */
.qr {
  width: clamp(120px, 13vw, 210px); height: clamp(120px, 13vw, 210px);
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em; color: #8f8878;
  background: var(--paper); border: 1px dashed #b6afa3;
}
.qr img { width: 100%; height: 100%; display: block; }
.qr-block { display: flex; flex-direction: column; align-items: center; gap: 14px; }

/* ---------- HUD + navegación ---------- */
.hud {
  position: fixed; top: 3vh; right: 3vw; z-index: 40;
  display: flex; align-items: center; gap: 11px; padding: 10px 14px;
  border: 1px solid #cdc6b9; background: rgba(242, 238, 231, .66);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; color: #3d3a34;
  backdrop-filter: blur(6px);
}
.hud__dot { width: 8px; height: 8px; border-radius: 50%; background: #a29b8e; animation: dotPulse 1.8s ease-in-out infinite; }
.hud__label { opacity: .6; }
.hud[data-tone="warm"] { border-color: oklch(0.72 0.15 70 / .55); }
.hud[data-tone="warm"] .hud__dot { background: var(--build); }
.hud[data-tone="live"] { border-color: oklch(0.55 0.13 152 / .6); background: oklch(0.78 0.16 152 / .13); color: oklch(0.42 0.11 152); }
.hud[data-tone="live"] .hud__dot { background: var(--live-bright); }
.hud[data-scheme="dark"] { border-color: #33352f; background: rgba(13, 14, 14, .6); color: #cfcac2; }
.hud[data-scheme="dark"][data-tone="live"] { background: oklch(0.55 0.13 152 / .12); color: oklch(0.9 0.1 152); }

.nav { position: fixed; bottom: 3vh; right: 3vw; z-index: 40; display: flex; align-items: center; gap: 10px; }
.nav__count { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; color: var(--ink-soft); }
.nav__btn {
  appearance: none; width: 40px; height: 40px; cursor: pointer;
  border: 1px solid #b6afa3; background: rgba(242, 238, 231, .7); color: var(--ink-soft);
  font-family: var(--mono); font-size: 13px; backdrop-filter: blur(6px);
}
.nav__btn:hover { border-color: var(--ink); color: var(--ink); }
.nav[data-scheme="dark"] .nav__count { color: #cfcac2; }
.nav[data-scheme="dark"] .nav__btn { border-color: #3b3c3b; background: rgba(13, 14, 14, .65); color: #cfcac2; }
body.is-presenting .nav { opacity: 0; pointer-events: none; }

/* ---------- Animaciones ---------- */
@keyframes dotPulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@keyframes lineSweep { 0% { transform: translateX(-100%); } 100% { transform: translateX(1000%); } }
@keyframes biteSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; }
  .deck { scroll-behavior: auto; }
}

/* ---------- Móvil ---------- */
@media (max-width: 860px) {
  .scene { padding: calc(3vh + var(--hud-band)) 7vw calc(5vh + var(--nav-band)); gap: 3vh; }
  .scene--split, .scene--film .scene__foot { grid-template-columns: 1fr; }
  .cols--4, .cols--5, .cols--9, .cols--3-gap, .cols--5-gap { grid-template-columns: 1fr; }
  .cell { padding: 2.2vh 0; border-right: 0; border-bottom: 1px solid var(--line-soft); }
  .cell:last-child { border-bottom: 0; }
  .filmstrip { grid-template-columns: 1fr; grid-template-rows: 2fr 1fr 1fr; }
  .filmstrip > :first-child { grid-row: auto; }
  .years { font-size: clamp(40px, 16vw, 90px); gap: 5vw; }
  .loop { display: none; }
  .hud { top: 2vh; right: 2vw; font-size: 9px; padding: 8px 10px; }
  .nav { bottom: 2vh; right: 2vw; }
}