:root {
  --bg: #0a0806;
  --ink: #f1e8d8;
  --dim: rgba(241, 232, 216, .64);
  --faint: rgba(241, 232, 216, .24);
  --gold: #d9b46a;
  --ruby: #c2405a;
  --sans: "Inter Tight", system-ui, sans-serif;
  --serif: "Instrument Serif", Georgia, serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --g: clamp(18px, 3.6vw, 60px);
}
* { box-sizing: border-box; }
html { background: var(--bg); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.55 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: clip; }
em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--gold); }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.kicker { font: 400 11px/1.3 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--dim); margin: 0 0 18px; }
.kicker b { color: var(--gold); font-weight: 400; }

.top { position: fixed; z-index: 30; inset: 0 0 auto; display: flex; align-items: center; gap: 22px; padding: 20px var(--g); background: linear-gradient(rgba(10, 8, 6, .7), transparent); }
.logo { font: 500 17px/1 var(--sans); letter-spacing: .14em; display: flex; align-items: center; gap: 8px; }
.logo i { width: 7px; height: 7px; border-radius: 50%; background: var(--ruby); box-shadow: 0 0 10px var(--ruby); }
.top-sub { margin: 0; font: 400 10px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.top nav { margin-left: auto; display: flex; gap: 22px; font: 400 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.top nav a { color: var(--dim); transition: color .3s; }
.top nav a:hover { color: var(--ink); }

/* ---------- el calibre ---------- */
.calibre { position: relative; height: 900vh; }
.stage { position: sticky; top: 0; height: 100vh; overflow: hidden; background: #000; }
.cam { position: absolute; inset: 0; width: 100%; height: 100%; }
.shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(0, 0, 0, .78), rgba(0, 0, 0, .35) 42%, transparent 62%), radial-gradient(130% 100% at 60% 50%, transparent 55%, rgba(0, 0, 0, .7)); transition: opacity .6s; }
.stage[data-side="r"] .shade { background: linear-gradient(270deg, rgba(0, 0, 0, .78), rgba(0, 0, 0, .35) 42%, transparent 62%), radial-gradient(130% 100% at 40% 50%, transparent 55%, rgba(0, 0, 0, .7)); }
.stage[data-side="c"] .shade { background: radial-gradient(60% 60% at 50% 50%, rgba(0, 0, 0, .55), transparent 80%), radial-gradient(130% 100% at 50% 50%, transparent 55%, rgba(0, 0, 0, .7)); }
.loupe { position: absolute; width: 120px; height: 120px; left: 0; top: 0; margin: -60px 0 0 -60px; fill: none; stroke: rgba(217, 180, 106, .6); stroke-width: .6; pointer-events: none; opacity: 0; transition: opacity .5s; }
.beat { position: absolute; left: var(--g); top: 50%; width: min(520px, 86vw); transform: translateY(calc(-50% + 20px)); opacity: 0; transition: opacity .8s, transform 1s cubic-bezier(.2, .8, .2, 1); pointer-events: none; }
.beat.on { opacity: 1; transform: translateY(-50%); }
.beat.right { left: auto; right: var(--g); }
.b-center { left: 50%; width: min(760px, 86vw); text-align: center; transform: translate(-50%, calc(-50% + 20px)); }
.b-center.on { transform: translate(-50%, -50%); }
h1 { font: 300 clamp(60px, 8.4vw, 144px)/.9 var(--sans); letter-spacing: -.035em; margin: 0 0 26px; }
h2 { font: 300 clamp(40px, 4.6vw, 80px)/.98 var(--sans); letter-spacing: -.03em; margin: 0 0 20px; }
.beat p:not(.kicker) { color: var(--dim); font-size: 17px; max-width: 420px; }
.b-center p { margin: 0 auto; }
.lede { font-size: 19px !important; }
.hint { font: 400 11px/1 var(--mono) !important; letter-spacing: .2em; text-transform: uppercase; display: flex; gap: 12px; align-items: center; margin-top: 40px; color: var(--ink) !important; }
.hint span { width: 34px; height: 1px; background: var(--gold); animation: tick 1.2s steps(2) infinite; transform-origin: left; }
@keyframes tick { 50% { transform: scaleX(.4); } }
.scale { position: absolute; right: var(--g); bottom: 26px; margin: 0; font: 400 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); font-variant-numeric: tabular-nums; }

/* ---------- inspección ---------- */
.logica { position: relative; min-height: 100vh; display: grid; grid-template-columns: 1.6fr 1fr; align-items: center; background: #000; }
.logica-media { position: relative; height: 100vh; overflow: hidden; }
.logica-media video, .logica-media canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transform: scale(1.18); }
.logica-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 88%, #000); pointer-events: none; }
.logica-panel { padding: 0 var(--g) 0 24px; }
.sub { color: var(--dim); margin: 0 0 26px; }
.switches { display: grid; gap: 10px; margin-bottom: 30px; }
.switches button { display: flex; align-items: center; gap: 16px; text-align: left; background: rgba(241, 232, 216, .04); border: 1px solid var(--faint); color: var(--ink); padding: 14px 16px; cursor: pointer; font: 400 15px/1.2 var(--sans); transition: background .3s, border-color .3s, opacity .3s; }
.switches button b { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--gold); display: grid; place-items: center; font: 400 12px/1 var(--mono); color: var(--gold); flex: none; transition: background .3s, color .3s; }
.switches button[aria-pressed="true"] b { background: var(--gold); color: #000; }
.switches button[aria-pressed="false"] { opacity: .55; border-style: dashed; }
.switches small { display: block; font: 400 10px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); margin-top: 4px; }
.switches button:hover { border-color: var(--gold); }
.reading { border-top: 1px solid var(--faint); padding-top: 20px; }
.reading h3 { font: 400 28px/1.1 var(--serif); font-style: italic; color: var(--gold); margin: 0 0 10px; }
.reading p:not(.kicker) { color: var(--dim); margin: 0; max-width: 380px; }

/* ---------- criterio ---------- */
.criterio { padding: 26vh var(--g); text-align: center; background: radial-gradient(70% 60% at 50% 50%, #17110a, var(--bg)); }
.criterio h2 { font-size: clamp(48px, 6.4vw, 112px); }
.criterio p:not(.kicker) { color: var(--dim); max-width: 560px; margin: 0 auto; font-size: 18px; }

/* ---------- archivo ---------- */
.archivo { padding: 16vh var(--g) 18vh; }
.archivo header { max-width: 640px; margin-bottom: 8vh; }
.archivo header p:not(.kicker) { color: var(--dim); }
.objs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 40px); }
.objs figure { margin: 0 0 20px; aspect-ratio: 4 / 5; overflow: hidden; background: #000; }
.objs img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.06); filter: brightness(.82); transition: transform 1.4s cubic-bezier(.2, .8, .2, 1), filter .8s; }
.objs li:hover img { transform: scale(1.14); filter: brightness(1); }
.objs h3 { font: 300 30px/1 var(--sans); letter-spacing: -.02em; margin: 0 0 10px; }
.objs p:not(.kicker) { color: var(--dim); font-size: 15px; }
.objs .kicker { margin-bottom: 8px; color: var(--gold); }
.pie { border-top: 1px solid var(--faint); padding: 50px var(--g) 60px; display: grid; grid-template-columns: auto 1fr auto; gap: 30px; align-items: center; }
.pie p { margin: 0; color: var(--dim); }
.pie .small { font: 400 10px/1.5 var(--mono); letter-spacing: .12em; text-transform: uppercase; }

@media (max-width: 900px) {
  .top-sub, .top nav { display: none; }
  .shade { background: linear-gradient(0deg, rgba(0, 0, 0, .85), rgba(0, 0, 0, .3) 55%, transparent); }
  .beat, .beat.right { left: var(--g); right: var(--g); width: auto; top: auto; bottom: 9vh; transform: translateY(20px); }
  .beat.on, .beat.right.on { transform: none; }
  .b-center { left: var(--g); transform: translateY(20px); text-align: left; }
  .b-center.on { transform: none; }
  .logica { grid-template-columns: 1fr; }
  .logica-media { height: 56vh; }
  .logica-panel { padding: 30px var(--g) 60px; }
  .objs { grid-template-columns: 1fr; }
  .pie { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .beat { transition: opacity .3s; }
  .hint span { animation: none; }
}