/* X-Perience — The dark room. Tokens primero; todo lo demás los referencia. */
:root {
  --bg: #080b13;
  --surface: #0f1420;
  --ink: #ecedf0;
  --muted: #a3a9b5;
  --accent: #c9a45a;
  --accent-ink: #080b13;
  --scrim: rgba(8, 11, 19, 0.78);

  --step-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --step-head: clamp(2rem, 1.3rem + 3.2vw, 4rem);

  --m: 32px;
  --gap: clamp(140px, 16vw, 220px);
  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
  color-scheme: dark;
}
@media (max-width: 800px) { :root { --m: 20px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; }
@media (pointer: fine) { html { overscroll-behavior: none; } }
a, button, select { touch-action: manipulation; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
[id] { scroll-margin-top: 24px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Switzer", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: var(--step-body);
  line-height: 1.5;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right);
}
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
h1, h2, h3, p { margin: 0; font-weight: 400; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--accent); color: var(--accent-ink); }

.sr {
  position: absolute; width: 1px; height: 1px; /* taste-skill-ignore: texto oculto, no es una línea */ padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip { position: absolute; left: var(--m); top: -100px; z-index: 20; background: var(--accent); color: var(--accent-ink); padding: 10px 16px; }
.skip:focus { top: 12px; }

/* Sello: el PNG oficial como máscara, para pintarlo en la tinta de la página */
.seal { display: block; aspect-ratio: 1; height: auto; }
.seal--hero { width: 88px; margin-bottom: 32px; }

/* Botón único: rectángulo dorado, sin radio */
.button {
  display: inline-block;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 500;
  font-size: var(--step-small);
  line-height: 1;
  padding: 14px 20px;
  text-decoration: none;
  transition: transform 160ms var(--ease), background-color 160ms var(--ease);
}
.button:hover { background: #d8b673; }
.button:active { transform: translateY(1px) scale(0.98); }
.textlink { text-decoration: underline; transition: color 160ms var(--ease); }
.textlink:hover { color: var(--accent); }

/* ---------- Navegación ---------- */
.nav { position: absolute; top: 0; right: 0; z-index: 10; padding: var(--m); }
.nav nav { display: flex; align-items: center; gap: 28px; font-size: var(--step-small); }
.nav__toggle { all: unset; cursor: pointer; padding: 10px 4px; font-size: var(--step-body); color: var(--ink); }
.nav__brand, .nav__toggle { display: none; }
.nav__toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.nav nav a:not(.button) { text-decoration: none; transition: color 160ms var(--ease); }
.nav nav a:not(.button):hover { color: var(--accent); }
@media (max-width: 800px) {
  .nav { padding: 12px var(--m); left: 0; display: flex; align-items: center; justify-content: space-between; background: var(--bg); position: sticky; }
  .nav__brand { display: block; }
  .nav__brand img { width: 40px; height: 40px; }
  .nav__toggle { display: block; }
  .nav nav {
    position: fixed; inset: 64px 0 0 0; z-index: 9; background: var(--bg);
    flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 4px;
    padding: 24px var(--m); font-size: var(--step-head); font-weight: 300; letter-spacing: -0.03em;
    opacity: 0; visibility: hidden; transition: opacity 250ms var(--ease), visibility 0s linear 250ms;
  }
  .nav nav a:not(.button) { display: block; padding: 6px 0; }
  .nav nav .button { margin-top: 24px; font-size: var(--step-body); letter-spacing: 0; }
  .menu-open .nav nav { opacity: 1; visibility: visible; transition: opacity 250ms var(--ease), visibility 0s; }
  .menu-open body { overflow: hidden; }
}

/* ---------- Hero ---------- */
.hero { position: relative; height: 100svh; min-height: 640px; overflow: clip; }
.hero__photo { position: absolute; top: 20px; left: 20px; bottom: 20px; width: calc(47vw - 20px); overflow: clip; }
.hero__photo img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.62) contrast(1.06) saturate(0.85); }
.hero__text {
  position: absolute; top: max(96px, 26%); left: calc(50vw + max(0px, (50vw - 440px) / 2)); width: min(440px, 40vw);
}
.lead { font-size: var(--step-lead); line-height: 1.3; letter-spacing: -0.015em; }

.hero__note { margin-top: 32px; font-size: var(--step-small); color: var(--muted); }
.wordmark {
  position: absolute; right: var(--m); bottom: 4.2vw; z-index: 2;
  font-size: min(12.4vw, 21svh); font-weight: 300; line-height: 0.8; letter-spacing: -0.045em;
  white-space: nowrap;
}
.wordmark-scale { display: inline-block; transform-origin: right bottom; }
@media (max-width: 800px) {
  .hero { height: auto; min-height: 100svh; padding-bottom: 40px; display: flex; flex-direction: column; }
  .hero .wordmark { order: 1; }
  .hero__text { order: 2; }
  .hero__photo { position: relative; inset: auto; margin: 12px; width: auto; height: 58svh; }
  .wordmark { position: relative; right: auto; bottom: auto; display: block; margin: -4.5vw var(--m) 0; font-size: 17.5vw; line-height: 1; }
  .hero__text { position: static; width: auto; display: block; padding: 28px var(--m) 0; }
  .hero__text > * { width: auto; }
  .hero .lead { font-size: 19px; }
  .seal--hero { display: none; }
}

/* ---------- La firma ---------- */
.firma {
  position: relative;
  display: grid; grid-template-columns: 1fr 20vw; column-gap: 4vw;
  align-content: center;
  padding: var(--gap) var(--m) 0;
}
.small-head { grid-column: 1 / -1; font-size: var(--step-lead); color: var(--muted); margin-bottom: 56px; padding-left: calc(4vw - var(--m)); }
.stairs { grid-column: 1; font-size: clamp(1.5rem, 0.9rem + 1.5vw, 2.25rem); line-height: 1.12; letter-spacing: -0.025em; font-weight: 500; padding-left: calc(4vw - var(--m)); }
.stairs span { display: block; }
.stairs span:nth-child(2) { padding-left: 6vw; color: var(--muted); }
.stairs span:nth-child(3) { padding-left: 12vw; }
.stairs span:nth-child(4) { padding-left: 18vw; color: var(--muted); }
.stairs span:nth-child(5) { padding-left: 24vw; color: var(--accent); }
.firma__photos { grid-column: 2; grid-row: 2 / span 2; display: grid; gap: 16px; align-self: start; }
.firma__photos img, .firma__photos video { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; filter: brightness(0.75) saturate(0.7); }
.firma__photos video { filter: grayscale(1) brightness(0.7) contrast(1.1); }
.firma__note { grid-column: 1; margin-top: 64px; max-width: 46ch; font-size: var(--step-small); color: var(--muted); padding-left: calc(4vw - var(--m)); }
@media (max-width: 800px) {
  .firma { display: block; min-height: 0; padding: 120px var(--m) 0; }
  .small-head, .stairs, .firma__note { padding-left: 0; }
  .stairs { font-size: 22px; }
  .stairs span:nth-child(2) { padding-left: 5vw; }
  .stairs span:nth-child(3) { padding-left: 10vw; }
  .stairs span:nth-child(4) { padding-left: 15vw; }
  .stairs span:nth-child(5) { padding-left: 20vw; }
  .firma__photos { grid-template-columns: 1fr 1fr; margin-top: 48px; gap: 10px; }
  .firma__note { margin-top: 40px; }
}

/* ---------- Socios ---------- */
.socios {
  padding: var(--gap) var(--m);
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: start;
}
.socios__pin { grid-column: 1 / -1; margin-bottom: 72px; }
.socios__title { font-size: 12.4vw; font-weight: 300; line-height: 0.85; letter-spacing: -0.045em; white-space: nowrap; }
.socio--a { grid-column: 2 / span 4; }
.socio--b { grid-column: 8 / span 4; margin-top: 22vh; }
.socio__photo { aspect-ratio: 4 / 5; overflow: clip; }
.socio__photo img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; }
.socio__photo--pending { background: var(--surface); display: grid; place-items: center; align-content: center; gap: 20px; }
.socio__photo--pending .seal { width: 46%; }
.pending { font-size: var(--step-small); color: var(--muted); }
.socio__name { margin-top: 24px; font-size: var(--step-lead); font-weight: 500; letter-spacing: -0.02em; }
.socio__role { font-size: var(--step-small); color: var(--muted); margin-top: 2px; }
.socio__bio { margin-top: 14px; max-width: 40ch; }
.socio__link { display: inline-block; margin-top: 14px; font-size: var(--step-small); transition: color 160ms var(--ease); }
.socio__link:hover { color: var(--accent); }
@media (max-width: 800px) {
  .socios { grid-template-columns: 1fr 1fr; column-gap: 16px; padding: 120px var(--m); }
  .socio--a, .socio--b { grid-column: auto; }
  .socio--b { margin-top: 64px; }
}
@media (max-width: 560px) {
  .socios { display: block; }
  .socios__pin { margin-bottom: 40px; }
  .socios__title { font-size: 17vw; }
  .socio { width: 78%; }
  .socio--b { margin: 64px 0 0 auto; }
}

/* ---------- Portafolio: carrusel ---------- */
.pf { display: grid; grid-template-columns: 38fr 62fr; height: max(100svh, 620px); }
.pf__text {
  display: grid; grid-template-rows: auto 1fr auto auto; row-gap: 32px;
  padding: 96px var(--m) 40px;
}
.pf__title { font-size: var(--step-head); line-height: 0.95; letter-spacing: -0.04em; font-weight: 300; max-width: 9ch; }
.pf__captions { display: grid; align-self: center; }
.pf__cap { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity 160ms ease, visibility 0s linear 160ms; }
.pf__cap.is-current { opacity: 1; visibility: visible; transition: opacity 450ms var(--ease) 100ms, visibility 0s; }
.pf__kind { font-size: var(--step-small); color: var(--accent); }
.pf__name { margin-top: 6px; font-size: var(--step-lead); font-weight: 500; letter-spacing: -0.02em; }
.pf__desc { margin-top: 12px; max-width: 46ch; }
.pf__count { font-size: var(--step-small); color: var(--muted); }
.pf__index { list-style: none; margin: 0; padding: 0; }
.pf__index button {
  all: unset; box-sizing: border-box; cursor: pointer; display: block; width: 100%;
  padding: 7px 0; font-size: var(--step-body); color: var(--muted);
  transition: color 200ms var(--ease), transform 300ms var(--ease);
}
.pf__index button:hover { color: var(--ink); }
.pf__index button[aria-current="true"] { color: var(--ink); transform: translateX(10px); }
.pf__index button:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

.pf__stage { position: relative; overflow: clip; background: var(--surface); touch-action: pan-y; user-select: none; }
/* La saliente queda entera debajo hasta que la nueva la cubre: el fundido nunca deja ver el fondo. */
.pf__slide { position: absolute; inset: 0; margin: 0; opacity: 0; visibility: hidden; transition: opacity 0s linear 600ms, visibility 0s linear 600ms; }
.pf__slide.is-current { opacity: 1; visibility: visible; z-index: 1; transition: opacity 600ms var(--ease), visibility 0s; }
.pf__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 600ms var(--ease); will-change: transform; }
.pf__slide.is-current .pf__photo { transform: scale(1); transition: transform 9.6s linear; }
/* Logos: todos en la misma esquina y con la misma área visual (ancho = k · √proporción) */
.pf__slide::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 42%; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, rgba(8, 11, 19, 0.82), rgba(8, 11, 19, 0)); /* taste-skill-ignore: scrim neutro bajo el logo */
}
.pf__logo {
  position: absolute; left: clamp(24px, 3vw, 48px); bottom: clamp(24px, 3vw, 48px); z-index: 2;
  width: calc(var(--s, 1) * clamp(80px, 7vw, 116px)); height: auto;
  opacity: 0; translate: 0 8px; transition: opacity 500ms var(--ease), translate 500ms var(--ease);
}
.pf__slide.is-current .pf__logo { opacity: 1; translate: 0 0; transition: opacity 700ms var(--ease) 250ms, translate 700ms var(--ease) 250ms; }
.pf__arrows { position: absolute; right: 0; top: 0; z-index: 3; display: flex; }
.pf__arrow {
  all: unset; box-sizing: border-box; cursor: pointer; width: 64px; height: 64px;
  display: grid; place-items: center; font-size: var(--step-lead);
  background: var(--bg); color: var(--ink); transition: background-color 160ms var(--ease), color 160ms var(--ease);
}
.pf__arrow:hover { background: var(--accent); color: var(--accent-ink); }
.pf__arrow:active { scale: 0.96; }
.pf__arrow:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }

/* Sin JavaScript: todos los proyectos uno bajo otro */
html:not(.js) .pf { display: block; }
html:not(.js) .pf__stage { display: grid; gap: 16px; background: none; }
html:not(.js) .pf__slide { position: relative; opacity: 1; visibility: visible; aspect-ratio: 16 / 10; }
html:not(.js) .pf__cap { opacity: 1; visibility: visible; grid-area: auto; margin-bottom: 24px; }
html:not(.js) .pf__arrows, html:not(.js) .pf__count, html:not(.js) .pf__index { display: none; }

@media (prefers-reduced-motion: reduce) {
  .pf__slide, .pf__cap, .pf__logo, .pf__slide.is-current .pf__logo { transition: none; }
  .pf__photo, .pf__slide.is-current .pf__photo { transform: none; transition: none; }
}
@media (max-height: 860px) and (min-width: 1025px) {
  .pf__text { padding-top: 48px; padding-bottom: 24px; row-gap: 16px; }
  .pf__title { font-size: clamp(2rem, 1rem + 2.2vw, 3rem); }
  .pf__desc { margin-top: 8px; }
  .pf__index button { padding: 2px 0; font-size: var(--step-small); }
}
@media (max-width: 1024px) {
  .pf { display: flex; flex-direction: column; height: auto; padding-top: 96px; }
  .pf__text { display: contents; }
  .pf__title { order: 1; padding: 0 var(--m) 28px; font-size: min(13vw, 72px); max-width: none; }
  .pf__stage { order: 2; aspect-ratio: 4 / 5; max-height: 78svh; width: 100%; }
  .pf__captions { order: 3; padding: 24px var(--m) 0; align-self: stretch; }
  .pf__count { order: 4; padding: 20px var(--m) 0; }
  .pf__index { order: 5; padding: 8px var(--m) 0; }
  .pf__index button[aria-current="true"] { transform: none; }
  .pf__arrow { width: 52px; height: 52px; }
  .pf__logo { width: calc(var(--s, 1) * 17vw); left: 20px; bottom: 20px; }
}

/* ---------- Verbos ---------- */
.verbo { position: relative; height: 160svh; overflow: clip; }
.verbo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.55) saturate(0.8); }
.verbo__word { position: sticky; top: 0; height: 100svh; display: grid; place-items: center; z-index: 1; pointer-events: none; }
.verbo__word span { font-size: 12.4vw; font-weight: 500; letter-spacing: -0.05em; line-height: 0.9; }
.verbo__line {
  position: absolute; left: var(--m); bottom: var(--m); z-index: 2; max-width: 40ch;
  background: var(--scrim); padding: 18px 22px; font-size: var(--step-body);
}
@media (max-width: 800px) {
  .verbo { height: 140svh; }
  .verbo__word span { font-size: 19vw; }
  .verbo__line { left: 0; right: 0; bottom: 0; max-width: none; padding: 16px var(--m) 24px; font-size: var(--step-body); }
}

/* ---------- Perspectivas ---------- */
.perspectivas { background: var(--surface); padding: var(--gap) var(--m) clamp(96px, 10vw, 150px); }
.perspectivas__top { display: flex; justify-content: space-between; align-items: baseline; gap: 32px; margin-bottom: 56px; }
.perspectivas__head { font-size: var(--step-head); font-weight: 300; color: var(--accent); letter-spacing: -0.03em; }
.perspectivas__intro { max-width: 40ch; color: var(--muted); }
.lineup { width: 100%; border-collapse: collapse; font-size: clamp(18px, 1.9vw, 28px); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.lineup td { padding: 0.25em 0; vertical-align: baseline; }
.lineup td:nth-child(1) { width: 54%; padding-right: 2em; }
.lineup td:nth-child(2) { width: 20%; }
.lineup td:nth-child(3) { width: 18%; color: var(--muted); }
.lineup td:nth-child(4) { text-align: right; color: var(--muted); }
.lineup tr { transition: color 200ms var(--ease); }
@media (max-width: 800px) {
  .perspectivas { padding: 120px var(--m); }
  .perspectivas__top { display: block; margin-bottom: 40px; }
  .perspectivas__intro { margin-top: 12px; }
  .lineup, .lineup tbody, .lineup tr, .lineup td { display: block; width: auto !important; }
  .lineup tr { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; margin-bottom: 18px; }
  .lineup td { padding: 0; font-size: var(--step-small); color: var(--muted); }
  .lineup td:nth-child(1) { grid-column: 1 / -1; font-size: 22px; color: var(--ink); padding: 0; }
  .lineup td:nth-child(3) { display: none; }
}

/* ---------- Contacto ---------- */
.contacto {
  padding: clamp(96px, 10vw, 150px) var(--m) var(--m);
  display: grid; row-gap: clamp(72px, 8vw, 120px);
}
.pitch { display: flex; justify-content: space-between; align-items: end; gap: 32px; flex-wrap: wrap; }
.pitch__line { font-size: clamp(1.5rem, 0.9rem + 1.5vw, 2.25rem); line-height: 1.35; letter-spacing: -0.02em; max-width: 34ch; }
.pick { position: relative; display: inline-block; }
.pick select {
  appearance: none; -webkit-appearance: none;
  font: inherit; letter-spacing: inherit; color: var(--accent);
  background-color: var(--bg); border: 0; border-bottom: 1px solid var(--accent); border-radius: 0;
  padding: 0 0.85em 0 0; cursor: pointer; field-sizing: content;
}
.pick select option { color: var(--ink); background-color: var(--surface); }
.pick::after { content: "▾"; position: absolute; right: 0.1em; top: 0.1em; font-size: 0.6em; color: var(--accent); pointer-events: none; }
.pick select:hover { color: #e0c287; }
.pitch__actions { display: flex; align-items: center; gap: 24px; }
.email {
  align-self: center;
  font-size: calc((100vw - 2 * var(--m)) / 13.9); font-weight: 300; letter-spacing: -0.045em; line-height: 1;
  text-decoration: none; white-space: nowrap; transition: color 240ms var(--ease);
}
.email:hover { color: var(--accent); }
.contacto__foot { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 24px; font-size: var(--step-small); color: var(--muted); }
.contacto__foot .pitch__actions { justify-self: center; }
.contacto__foot p:last-child { text-align: right; }
.contacto__foot a:hover { color: var(--accent); }
@media (max-width: 800px) {
  .contacto { padding-top: 96px; grid-template-columns: minmax(0, 1fr); }
  .pitch__line { font-size: 22px; }
  .email { white-space: normal; font-size: 11.5vw; overflow-wrap: anywhere; }
  .contacto__foot { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .contacto__foot .pitch__actions { justify-self: start; order: -1; }
  .contacto__foot p:last-child { text-align: left; }
}

/* ---------- Footer ---------- */
.footer {
  position: relative; min-height: 122svh; overflow: clip; padding-bottom: max(var(--m), env(safe-area-inset-bottom));
  display: grid; grid-template-rows: auto 1fr auto auto; grid-template-columns: minmax(0, 1fr);
  padding: var(--m);
}
.footer__photo { position: absolute; left: 0; top: 0; width: 100%; height: 100svh; object-fit: cover; object-position: 50% 60%; filter: brightness(0.72); z-index: 0; }
.footer > :not(.footer__photo) { position: relative; z-index: 1; }
.footer__top { display: flex; justify-content: space-between; align-items: start; }
.footer__top ul { list-style: none; margin: 0; padding: 0; font-size: var(--step-body); display: grid; gap: 6px; }
.footer__top a { text-decoration: none; }
.footer__top a:hover { color: var(--accent); }
.seal--footer { width: clamp(120px, 13vw, 210px); }
.footer__name {
  grid-row: 3; font-size: 22.2vw; font-weight: 300; line-height: 0.8; letter-spacing: -0.05em;
  white-space: nowrap; margin-left: -0.04em; transform-origin: left bottom;
}
.footer__legal { grid-row: 4; margin-top: 5.5vw; display: grid; gap: 8px; font-size: 13px; }
.credits { max-width: 75ch; }
.credits a { text-decoration: underline; }
@media (max-width: 800px) {
  .footer { min-height: 0; padding-top: calc(100vw * 1116 / 2000 + 24px); }
  .footer__photo { height: auto; aspect-ratio: 2000 / 1116; object-fit: contain; }
  .footer__top { margin-bottom: 40px; }
  .footer__name { font-size: 18.5vw; }
}

/* ---------- Movimiento ---------- */
@media (prefers-reduced-motion: no-preference) {
  html.js [data-load] { opacity: 0; transform: translateY(20px); animation: rise 900ms var(--ease) var(--d, 0ms) forwards; }
  html.js .hero__photo[data-load] { transform: scale(1.04); animation: settle 1400ms var(--ease) forwards; }
  html.js .wordmark { opacity: 0; animation: rise 1100ms var(--ease) 180ms forwards; }
  html.js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 800ms var(--ease), transform 800ms var(--ease); }
  html.js [data-reveal].is-in { opacity: 1; transform: none; }
  html.js .firma__photos img:nth-child(2) { transition-delay: 90ms; }
  html.js .stairs { transition-delay: 70ms; }
  html.js .firma__note { transition-delay: 140ms; }
  html.js .socio { opacity: 0; transform: translateY(32px); transition: opacity 900ms var(--ease), transform 900ms var(--ease); }
  html.js .socio.is-in { opacity: 1; transform: none; }
  html.js .lineup tr { transform: translateY(16px); transition: transform 700ms var(--ease), color 200ms var(--ease); }
  html.js .lineup.is-in tr { opacity: 1; transform: none; }
  html.js .lineup.is-in tr:nth-child(2) { transition-delay: 70ms; }
  html.js .lineup.is-in tr:nth-child(3) { transition-delay: 140ms; }
  html.js .lineup.is-in tr:nth-child(4) { transition-delay: 210ms; }
  .lineup tr:hover { color: var(--accent); }

  @supports (animation-timeline: scroll()) {
    .wordmark-scale { animation: shrink linear both; animation-timeline: scroll(root); animation-range: 0 100svh; }
    .footer__photo { animation: drift linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
    .footer__name { animation: grow linear both; animation-timeline: view(); animation-range: entry 0% cover 60%; }
    .verbo > img { animation: drift linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
  }
}
@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes settle { to { opacity: 1; transform: none; } }
@keyframes shrink { from { scale: 1; } to { scale: 0.94; } }
@keyframes grow { from { scale: 0.94; } to { scale: 1; } }
@keyframes drift { from { transform: scale(1.08) translateY(-2%); } to { transform: scale(1) translateY(2%); } }

/* ---------- Perspectivas: fila con artículo ---------- */
.lineup tr.is-link a { text-decoration: none; }
.lineup tr.is-link td:last-child a { color: var(--accent); text-decoration: underline; }
.lineup tr.is-link:hover a { color: var(--accent); }

/* ---------- Artículo ---------- */
.nav--article { position: relative; display: flex; justify-content: space-between; align-items: center; left: 0; }
.nav__home { display: inline-flex; align-items: center; gap: 12px; font-size: var(--step-lead); font-weight: 300; letter-spacing: -0.03em; text-decoration: none; }
.nav__home img { width: 40px; height: 40px; }
.article { padding: 72px var(--m) 0; }
.article__draft { max-width: 68ch; margin: 0 0 48px; padding: 14px 18px; background: var(--surface); color: var(--accent); font-size: var(--step-small); }
.article__opening { display: grid; grid-template-columns: 1fr 1fr; gap: 4vw; align-items: center; }
.article__head { padding-bottom: 8px; }
.article__title { font-size: clamp(36px, 4.6vw, 76px); font-weight: 300; letter-spacing: -0.045em; line-height: 0.95; }
.article__lead { margin-top: 32px; }
.article__meta { margin-top: 24px; font-size: var(--step-small); color: var(--muted); }
.article__figure { margin: 0; }
.article__figure img { width: 100%; height: 72svh; object-fit: cover; filter: brightness(0.75) saturate(0.85); }
.article__figure figcaption, .article__inline figcaption { padding-top: 10px; font-size: var(--step-small); color: var(--muted); }
.article__inline { margin: 2.4em -8ch 0; }
.article__inline img, .article__inline video { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; filter: brightness(0.75) saturate(0.85); }
.article__inline video { filter: grayscale(1) brightness(0.7) contrast(1.1); }
.article__body { max-width: 68ch; margin: 96px auto 0; }
.article__body p + p { margin-top: 1.1em; }
.article__body h2 { margin: 2.4em 0 0.8em; font-size: var(--step-lead); font-weight: 500; letter-spacing: -0.02em; }
.article__list { margin: 1em 0; padding-left: 1.2em; display: grid; gap: 0.9em; }
.article__list strong { font-weight: 500; }
.article__close { margin-top: 2.4em !important; font-size: var(--step-lead); line-height: 1.35; }
.article__footer { margin-top: var(--gap); padding: 0 var(--m) var(--m); }
.article__footer p:first-child { font-size: 22.2vw; font-weight: 300; letter-spacing: -0.05em; line-height: 0.8; margin-left: -0.04em; white-space: nowrap; }
.article__footer p:last-child { margin-top: 5vw; font-size: var(--step-small); color: var(--muted); }
.article__footer a { text-decoration: underline; }
@media (max-width: 800px) {
  .nav--article nav a:not(.button) { display: inline; }
  .article { padding-top: 40px; }
  .article__opening { display: block; }
  .article__figure { margin-top: 40px; }
  .article__figure img { height: 56svh; }
  .article__inline { margin: 2em 0 0; }
  .article__body { margin-top: 56px; }
}