/* =========================================================
   Rullo Díaz — book de montaje
   Concepto: una mesa de montaje a oscuras. En la portada, los
   trabajos pasan en un carrusel vertical con un índice que
   avanza como un cabezal de reproducción. El logo y los
   títulos en serif de alto contraste son la única nota
   fuerte; el resto es rotulación discreta, como créditos.
   Tema único oscuro, elegido a propósito.
   ========================================================= */

:root {
  --bg: #0b0b0b;
  --surface: #161616;
  --fg: #ecebe7;
  --muted: #8f8e89;
  --line: #2a2a2a;
  --scrim: rgb(0 0 0 / .78);

  --display: "Gloock", "Didot", "Bodoni 72", Georgia, serif;
  --sans: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;

  --gutter: clamp(16px, 3vw, 44px);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

/* Transición entre páginas: la imagen del trabajo pasa de la portada a
   la página del trabajo (Chrome, Edge, Safari 18.2+) */
@view-transition { navigation: auto; }
::view-transition-group(work-media) { animation-duration: .7s; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .45s; }
::view-transition-image-pair(work-media) { isolation: auto; }
::view-transition-old(work-media), ::view-transition-new(work-media) { animation: none; mix-blend-mode: normal; height: 100%; object-fit: cover; overflow: hidden; }

/* Cabecera, de la portada a un trabajo:
   - la R crece hasta su tamaño en el logo completo (nunca desaparece) y
     después el resto de letras aparece de izquierda a derecha;
   - "Info" se va con un fundido y alejándose; el + gira hasta ser una X
     y después se ajusta suavemente a su tamaño. */
.logo-r-only img, .logo-stack .logo-r { view-transition-name: site-logo-r; }
.logo-stack .logo-rest { view-transition-name: site-logo-rest; }
.info-word { view-transition-name: site-info-word; }
.plus, .bar-work .close svg { view-transition-name: site-mark; }

::view-transition-group(site-logo-r) { animation-duration: .45s; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
::view-transition-old(site-logo-r) { animation: none; opacity: 0; }
::view-transition-new(site-logo-r) { animation: none; }

/* Las letras se escriben (y se recogen) con un barrido de borde suave */
::view-transition-old(site-logo-rest),
::view-transition-new(site-logo-rest) {
  -webkit-mask-image: linear-gradient(90deg, #000 40%, transparent 47%);
  mask-image: linear-gradient(90deg, #000 40%, transparent 47%);
  -webkit-mask-size: 300% 100%;
  mask-size: 300% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: 10% 0;
  mask-position: 10% 0;
}
::view-transition-new(site-logo-rest) { animation: logo-reveal .5s cubic-bezier(.3, 0, .2, 1) .22s both; }
::view-transition-old(site-logo-rest) { animation: logo-hide .3s cubic-bezier(.45, 0, .3, 1) both; }
/* 48.5% = letras ocultas tras la R; 10% = logo entero */
@keyframes logo-reveal {
  from { -webkit-mask-position: 48.5% 0; mask-position: 48.5% 0; }
  to { -webkit-mask-position: 10% 0; mask-position: 10% 0; }
}
@keyframes logo-hide {
  from { -webkit-mask-position: 10% 0; mask-position: 10% 0; }
  to { -webkit-mask-position: 48.5% 0; mask-position: 48.5% 0; }
}

::view-transition-old(site-info-word) { animation: word-out .35s ease both; transform-origin: right center; }
::view-transition-new(site-info-word) { animation: word-in .45s ease .35s both; transform-origin: right center; }
@keyframes word-out { to { opacity: 0; transform: scale(.7); } }
@keyframes word-in { from { opacity: 0; transform: scale(.7); } }

::view-transition-group(site-mark) { animation-duration: .5s; animation-delay: .35s; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
::view-transition-old(site-mark) { animation: none; opacity: 0; }
::view-transition-new(site-mark) { animation: mark-turn .4s cubic-bezier(.4, 0, .2, 1) both; }
@keyframes mark-turn { from { transform: rotate(-45deg); } }

/* De vuelta a la portada, rápido y en orden: las letras se recogen hacia
   la R y la R encoge hasta su sitio; la X gira un poco hasta ser un +
   (.16s), el + recupera su tamaño (.2s) y aparece "Info" */
html.vt-back::view-transition-group(site-logo-r) { animation-delay: .12s; animation-duration: .45s; }
html.vt-back::view-transition-group(site-mark) { animation-delay: .14s; animation-duration: .2s; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
html.vt-back::view-transition-new(site-mark) { animation: mark-back .16s cubic-bezier(.4, 0, .2, 1) both; }
html.vt-back::view-transition-old(site-info-word) { animation: none; opacity: 0; }
html.vt-back::view-transition-new(site-info-word) { animation: fade-in-quick .2s ease .3s both; }
@keyframes mark-back { from { transform: rotate(45deg); } }

/* Halo de la tarjeta activa: se apaga al entrar en un trabajo y se
   enciende al volver, a la vez que la imagen llega a su sitio */
::view-transition-old(work-glow) { animation: vt-fade-out .25s ease both; }
::view-transition-new(work-glow) { animation: vt-fade-in .5s ease .2s both; }

/* De un trabajo a otro: el logo y la X se quedan quietos y el resto
   cambia con un fundido corto */
html.vt-work::view-transition-group(*) { animation-duration: .28s; animation-delay: 0s; }
html.vt-work::view-transition-group(site-logo-r),
html.vt-work::view-transition-group(site-logo-rest),
html.vt-work::view-transition-group(site-mark) { animation: none; }
html.vt-work::view-transition-old(site-logo-r),
html.vt-work::view-transition-old(site-logo-rest),
html.vt-work::view-transition-old(site-mark) { animation: none; opacity: 0; }
html.vt-work::view-transition-new(site-logo-r),
html.vt-work::view-transition-new(site-logo-rest),
html.vt-work::view-transition-new(site-mark) { animation: none; }
html.vt-work::view-transition-old(root),
html.vt-work::view-transition-old(work-media) { animation: vt-fade-out .28s ease both; }
html.vt-work::view-transition-new(root),
html.vt-work::view-transition-new(work-media) { animation: vt-fade-in .28s ease both; }
@keyframes vt-fade-out { to { opacity: 0; } }
@keyframes vt-fade-in { from { opacity: 0; } }
@keyframes fade-in-quick { from { opacity: 0; } }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 400 1rem/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }
[hidden] { display: none !important; }
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
::selection { background: var(--fg); color: var(--bg); }

/* Grano de película muy sutil */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  /* Grano gris medio en "overlay": da textura a imágenes y vídeos sin
     aclarar el negro del fondo (si lo aclara, las barras de Safari, que
     toman el color del fondo, se ven de otro tono que la página) */
  opacity: .12;
  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' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='.33 .33 .33 0 0 .33 .33 .33 0 0 .33 .33 .33 0 0 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.caps, .nav a, .work-kicker, .credits dt {
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* ---------- Barra superior ---------- */
.bar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: calc(14px + env(safe-area-inset-top, 0px)) var(--gutter) 14px;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.logo { display: block; flex: none; }
.logo img { height: clamp(40px, 4.6vw, 60px); width: auto; }
.nav { display: flex; gap: clamp(16px, 3vw, 40px); }
.nav a {
  text-decoration: none;
  color: rgb(236 235 231 / .8);
  padding-block: 8px;
  transition: color .2s;
}
.nav a:hover { color: var(--fg); }

/* =========================================================
   PORTADA: una sola pantalla, sin cabecera. La tira de trabajos
   llega hasta arriba; la R y "Info" flotan encima, y abajo solo
   el título del trabajo activo.
   ========================================================= */
/* Altura de la pantalla visible siempre, aunque Safari o Chrome muestren
   sus barras (svh = pantalla con las barras desplegadas) */
/* Fondo a sangre: la portada mide la pantalla ENTERA (100lvh, también lo
   que queda detrás de la barra de Safari), para que la luz de colores, el
   degradado y la viñeta no se corten en una franja negra. Lo importante
   (tarjetas, R, "Info +" y título) se coloca dentro de la parte que la
   barra nunca tapa (100svh): --home-oculto es lo que puede tapar la barra.
   En ordenador lvh = svh y no cambia nada. */
html:has(body.page-home) { height: 100%; overflow: hidden; }
body.page-home {
  --home-oculto: calc(100lvh - 100svh);
  height: 100%;
  height: 100lvh;
  overflow: hidden;
}

/* Cabecera flotante */
.bar-float {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 30;
  padding-bottom: 48px;
  background: linear-gradient(rgb(11 11 11 / .9), rgb(11 11 11 / 0));
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  pointer-events: none;
}
.bar-float > * { pointer-events: auto; }

/* Logo: la R sola; con Info abierto desaparece (el logo completo
   aparece centrado dentro del panel) */
.logo-r-only img {
  height: clamp(34px, 3.8vw, 48px);
  width: auto;
  transition: opacity .4s, transform .5s cubic-bezier(.2, .7, .1, 1);
}
body.panel-open .logo-r-only img { opacity: 0; transform: scale(.92); pointer-events: none; }

.info-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border: 0;
  background: none;
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
}
.plus { position: relative; width: 13px; height: 13px; transition: transform .4s cubic-bezier(.2, .7, .1, 1); }
.plus::before, .plus::after {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 100%; height: 1.5px;
  background: currentColor;
}
.plus::after { transform: rotate(90deg); }
.info-toggle[aria-expanded="true"] .plus { transform: rotate(45deg); }

/* Escena */
.home {
  position: relative;
  height: 100%;
  overflow: hidden;
  background:
    radial-gradient(120% 70% at 50% 46%, transparent 40%, rgb(0 0 0 / .55) 100%),
    linear-gradient(180deg, #0d0d0e 0%, #0a0a0a 55%, #070707 100%);
}
/* Luz ambiente: el color del trabajo activo se derrama, muy difuminado,
   sobre el negro del fondo, como la luz de una pantalla en una sala */
.ambient { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.ambient img {
  position: absolute;
  left: 50%;
  top: var(--home-cy, 46%);
  width: 120%;
  max-width: none;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transform: translate(-50%, -50%) scale(1.2);
  filter: blur(70px) saturate(1.4);
  opacity: 0;
  transition: opacity 1.4s ease;
}
@media (min-width: 900px) { .ambient img { width: 100%; } }
.ambient img.on { opacity: .3; }
/* En vertical (móvil), la luz de colores llena toda la altura, también
   arriba y detrás de la barra de Safari, en vez de una franja central; y el
   oscurecido de abajo es más suave para que no quede una franja negra */
@media (orientation: portrait) {
  .ambient img { top: 50%; width: 100%; height: 100%; aspect-ratio: auto; transform: translate(-50%, -50%) scale(1.3); }
  .home::after { background: linear-gradient(rgb(11 11 11 / 0), rgb(11 11 11 / .55) 75%); }
  .home {
    background:
      radial-gradient(130% 80% at 50% 46%, transparent 45%, rgb(0 0 0 / .35) 100%),
      linear-gradient(180deg, #0d0d0e 0%, #0a0a0a 55%, #080808 100%);
  }
}
/* Reflejo suave bajo la tira, como un suelo pulido */
.home::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(60% 18% at 50% 92%, rgb(255 255 255 / .035), transparent 70%),
    linear-gradient(115deg, transparent 30%, rgb(255 255 255 / .025) 45%, transparent 60%);
}
.home::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 34%;
  z-index: 20;
  pointer-events: none;
  background: linear-gradient(rgb(11 11 11 / 0), rgb(11 11 11 / .92) 70%);
}
.stage {
  z-index: 2;
  --sw: var(--home-card-w);
  --cy: var(--home-cy);
  position: absolute;
  inset: 0;
  overflow: hidden;
  container-type: size;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.slot {
  position: absolute;
  left: 50%;
  top: var(--cy);
  width: var(--sw);
  aspect-ratio: 16 / 9;
  transform: translate(-50%, -50%);
  transition: transform .95s cubic-bezier(.22, 1, .36, 1), opacity .95s cubic-bezier(.22, 1, .36, 1), box-shadow .95s ease;
  will-change: transform, opacity;
  backface-visibility: hidden;
  cursor: pointer;
}
.stage.dragging .slot { transition: none; }
.stage.no-anim .slot, .stage.no-anim .slot-media::after { transition: none !important; }
.slot-media { position: absolute; inset: 0; overflow: hidden; background: var(--surface); }
/* Los fotogramas que no están en primer plano, algo más apagados */
.slot-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bg);
  opacity: .25;
  transition: opacity .95s cubic-bezier(.22, 1, .36, 1);
  pointer-events: none;
}
.slot.is-active .slot-media::after { opacity: 0; }
/* Brillo suave sobre las tarjetas, como el reflejo de una luz en un cristal */
.slot-media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(118deg, rgb(255 255 255 / .09) 0%, rgb(255 255 255 / .02) 28%, transparent 46%);
  mix-blend-mode: screen;
}
/* Halo: luz blanca difuminada que sale de detrás de cada tarjeta,
   más intensa en la activa */
.slot { box-shadow: 0 0 40px 2px rgb(255 255 255 / .05); }
.slot.is-active { box-shadow: 0 0 70px 8px rgb(255 255 255 / .13), 0 0 22px rgb(255 255 255 / .08); }

/* Salida hacia la página del trabajo (navegadores sin View Transitions) */
body.leaving .slot { transition: transform .55s cubic-bezier(.65, 0, .35, 1), opacity .45s ease; }
body.leaving .slot:not(.is-active) { opacity: 0 !important; }
body.leaving .slot.is-active { transform: translate3d(-50%, -50%, 0) scale(1.06) !important; opacity: 0 !important; transition-delay: .1s; }
body.leaving .caption, body.leaving .bar-float, body.leaving .stepper { opacity: 0; transition: opacity .3s; }
.slot-img, .slot-clip { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.slot-clip { opacity: 0; transition: opacity .6s ease; }
.slot-clip.playing { opacity: 1; }
.slot-embed { position: absolute; inset: 0; opacity: 0; transition: opacity 1s; pointer-events: none; }
.slot-embed.playing { opacity: 1; }
.slot-embed iframe { width: 100%; height: 100%; border: 0; transform: scale(1.02); }

/* Título del trabajo activo: discreto, completo, uno solo */
.caption {
  position: absolute;
  z-index: 25;
  left: var(--gutter);
  right: var(--gutter);
  bottom: calc(max(var(--gutter), env(safe-area-inset-bottom, 0px)) + 14px + var(--home-oculto, 0px));
  display: grid;
  justify-items: center;
  gap: 8px;
  text-align: center;
  pointer-events: none;
}
.caption > * { pointer-events: auto; }
.cap-kicker {
  margin: 0;
  color: var(--muted);
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.cap-title {
  margin: 0;
  max-width: 28ch;
  font: 400 clamp(1.2rem, 2.2vw, 1.6rem)/1.2 var(--display);
  text-wrap: balance;
}
.cap-title a { text-decoration: none; }
/* Cambio de título: el anterior se va hacia donde va la tira (--cap-dir: 1
   hacia arriba, -1 hacia abajo), desenfocándose; la categoría entra
   cerrando el espaciado y el título palabra a palabra, enfocándose */
.cap-w { display: inline-block; }
.caption.show .cap-kicker { animation: cap-kicker-in .7s cubic-bezier(.2, .7, .1, 1) .08s both; }
.caption.show .cap-w {
  animation: cap-word-in .75s cubic-bezier(.2, .75, .1, 1) both;
  animation-delay: calc(.14s + var(--i, 0) * .055s);
}
@keyframes cap-kicker-in { from { opacity: 0; letter-spacing: .42em; filter: blur(3px); } }
@keyframes cap-word-in {
  from { opacity: 0; transform: translateY(calc(var(--cap-dir, 1) * .55em)); filter: blur(7px); }
  60% { filter: blur(0); }
}
.cap-ghost { pointer-events: none; z-index: 24; }
.cap-ghost > * { pointer-events: none; }
.cap-ghost .cap-progress { visibility: hidden; }
.cap-ghost .cap-kicker, .cap-ghost .cap-title { animation: cap-out .4s cubic-bezier(.4, 0, .9, .5) both; }
.cap-ghost .cap-title { animation-delay: .03s; }
@keyframes cap-out { to { opacity: 0; transform: translateY(calc(var(--cap-dir, 1) * -.5em)); filter: blur(6px); } }

/* Línea de progreso del avance automático */
.cap-progress {
  position: relative;
  display: block;
  width: 56px;
  height: 1px;
  margin-top: 4px;
  justify-self: center;
  background: var(--line);
  overflow: hidden;
}
.cap-progress::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--fg);
  transform: scaleX(0);
  transform-origin: center;
}
.caption.running .cap-progress::after { animation: progress var(--dur, 9s) linear forwards; }
.caption.held .cap-progress::after { animation-play-state: paused; }
@keyframes progress { to { transform: scaleX(1); } }

/* ---------- Botones subir / bajar (escritorio) ---------- */
.stepper {
  position: fixed;
  right: var(--gutter);
  top: 50%;
  z-index: 26;
  display: grid;
  justify-items: center;
  gap: 12px;
  transform: translateY(-50%);
}
.stepper button {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgb(236 235 231 / .3);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s;
}
.stepper button:hover { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.stepper svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; }
/* Al estrechar la ventana, las flechas se desvanecen deslizándose hacia
   fuera en vez de desaparecer de golpe; en pantallas táctiles no existen */
.stepper { transition: opacity .45s ease, transform .55s cubic-bezier(.22, 1, .36, 1), visibility 0s; }
@media (max-width: 959px) {
  .stepper {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-50%) translateX(14px) scale(.92);
    transition: opacity .45s ease, transform .55s cubic-bezier(.22, 1, .36, 1), visibility 0s .55s;
  }
}
@media (hover: none) {
  .stepper { display: none; }
}
body.panel-open .stepper { display: none; }

/* ---------- Info ---------- */
.panel {
  position: fixed;
  inset: 0;
  z-index: 28;
  display: grid;
  place-items: center;
  overflow-y: auto;
  background: var(--bg);
  animation: panel-down .55s cubic-bezier(.22, 1, .36, 1) both;
}
.panel.closing { animation: panel-up .42s cubic-bezier(.55, 0, .7, .2) both; }
.panel[hidden] { display: none; }
@keyframes panel-down { from { transform: translateY(-100%); } }
@keyframes panel-up { to { transform: translateY(-100%); } }
.info-logo { display: block; width: min(52vw, 260px); height: auto; }
.info {
  display: grid;
  justify-items: center;
  gap: clamp(40px, 7vh, 72px);
  padding: 96px var(--gutter) calc(48px + env(safe-area-inset-bottom, 0px));
  text-align: center;
}
.social { display: flex; align-items: center; gap: 36px; margin: 0; padding: 0; list-style: none; }
.social a { display: block; color: var(--fg); transition: opacity .2s; }
.social a:hover { opacity: .6; }
.social svg { display: block; width: 30px; height: 30px; }
.rep { display: grid; justify-items: center; gap: 16px; }
.info-title {
  margin: 0;
  color: var(--muted);
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.rep-logo { display: block; color: var(--fg); text-decoration: none; font-size: 1.5rem; font-weight: 600; letter-spacing: .02em; }
.rep-logo img { display: block; height: 52px; width: auto; transition: opacity .2s; }
.rep-logo:hover img { opacity: .7; }
.rep-mail {
  color: var(--muted);
  font-size: .82rem;
  letter-spacing: .04em;
  text-decoration: none;
  transition: color .2s;
}
.rep-mail:hover { color: var(--fg); }

/* ---------- Intro (solo la primera vez) ----------
   1. El logo entero aparece desenfocado y se enfoca, con un halo de luz
      detrás.
   2. Las letras se recogen hacia la R, la R vuela a su sitio arriba a la
      izquierda (inicio.js) y la portada aparece por debajo. */
.intro { display: none; }
html.intro-on .intro {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  cursor: pointer;
}
html.intro-out .intro { pointer-events: none; }
.intro::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bg);
  transition: opacity .7s cubic-bezier(.4, 0, .2, 1) .2s;
}
html.intro-out .intro::before { opacity: 0; }
.intro::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(130vw, 900px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgb(255 255 255 / .075), rgb(255 255 255 / .02) 45%, transparent 100%);
  pointer-events: none;
}
html.intro-go .intro::after { animation: intro-bloom 1.4s cubic-bezier(.2, .7, .1, 1) .05s both; }
html.intro-out .intro::after { animation: intro-fade-out .45s ease both; }
.intro-logo { position: relative; z-index: 1; width: min(56vw, 340px); aspect-ratio: 746 / 380; }
html.intro-on:not(.intro-go) .intro-logo { visibility: hidden; }
.intro-logo img { position: absolute; left: 0; top: 0; height: 100%; width: auto; }
.intro-rest {
  -webkit-mask-image: linear-gradient(90deg, #000 40%, transparent 47%);
  mask-image: linear-gradient(90deg, #000 40%, transparent 47%);
  -webkit-mask-size: 300% 100%;
  mask-size: 300% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: 10% 0;
  mask-position: 10% 0;
}
html.intro-go .intro-logo { animation: intro-focus .9s cubic-bezier(.2, .7, .1, 1) .1s both; }
html.intro-out .intro-rest { animation: logo-hide .32s cubic-bezier(.45, 0, .3, 1) both; }
@keyframes intro-focus {
  from { opacity: 0; filter: blur(12px); transform: scale(1.08); }
  55% { opacity: 1; }
  to { opacity: 1; filter: none; transform: none; }
}
@keyframes intro-bloom { from { opacity: 0; transform: translate(-50%, -50%) scale(.7); } }
@keyframes intro-fade-out { to { opacity: 0; } }
@keyframes intro-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes intro-stage { from { opacity: 0; transform: translateY(4%) scale(.97); } }

/* Mientras tanto, la portada espera escondida y luego entra por partes */
html.intro-on .logo-r-only img { opacity: 0; transition: none; }
html.intro-on .info-toggle,
html.intro-on .stepper,
html.intro-on .caption { opacity: 0; }
html.intro-out .stage { animation: intro-stage 1s cubic-bezier(.22, 1, .36, 1) .15s both; }
html.intro-out .info-toggle,
html.intro-out .stepper { animation: intro-fade-in .5s ease .5s both; }
html.intro-out .caption { animation: intro-fade-in .5s ease .55s both; }

/* =========================================================
   PÁGINA DE TRABAJO
   ========================================================= */
.work { padding-bottom: clamp(48px, 8vw, 110px); }

/* Cabecera de la página de trabajo: logo (R + resto) y una X para volver */
.logo-stack { position: relative; display: block; height: clamp(40px, 4.6vw, 60px); aspect-ratio: 746 / 380; }
.logo-stack img { position: absolute; left: 0; top: 0; height: 100%; width: auto; }
/* No es fija: se queda arriba de la página y se va al hacer scroll */
.bar-work { position: relative; background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
.close {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-right: -8px;
  color: var(--fg);
  transition: opacity .2s;
}
.close:hover { opacity: .6; }
.close svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }

@supports not (view-transition-name: a) {
  .bar-work { animation: fade-in .6s ease both; }
  .work-player { animation: work-in .7s cubic-bezier(.22, 1, .36, 1) both; }
  .work-body, .gallery, .pager { animation: work-in .7s cubic-bezier(.22, 1, .36, 1) .12s both; }
}
@keyframes work-in { from { opacity: 0; transform: translateY(14px); } }
@keyframes fade-in { from { opacity: 0; } }
.work-player {
  width: 100%;
  max-width: 1600px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.poster { view-transition-name: work-media; }
.poster, .work-player iframe, .vp {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-width: 100%;
  max-height: calc(100svh - 110px);
  margin-inline: auto;
  padding: 0;
  border: 0;
  background: var(--surface);
  overflow: hidden;
}
.poster img { width: 100%; height: 100%; object-fit: cover; }
button.poster { cursor: pointer; }
.poster-play {
  position: absolute;
  left: 50%; top: 50%;
  width: clamp(64px, 8vw, 96px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgb(255 255 255 / .7);
  background: rgb(0 0 0 / .35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transform: translate(-50%, -50%);
  transition: transform .3s, background .3s;
}
.poster-play::after {
  content: "";
  position: absolute;
  left: 54%; top: 50%;
  border-left: 18px solid #fff;
  border-block: 11px solid transparent;
  transform: translate(-50%, -50%);
}
button.poster:hover .poster-play { transform: translate(-50%, -50%) scale(1.08); background: rgb(0 0 0 / .55); }

/* ---------- Reproductor propio (MP4) ----------
   Controles finos, con la tipografía de la web, que se esconden solos
   mientras se ve el vídeo. */
.vp {
  view-transition-name: work-media;
  background: #000;
  color: #fff;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}
.vp.hide-cursor { cursor: none; }
.vp-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; display: block; }
.vp::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 40%;
  background: linear-gradient(rgb(0 0 0 / 0), rgb(0 0 0 / .6));
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
}
.vp.show-ui::after { opacity: 1; }
.vp-ui {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.2vw, 14px);
  padding: 0 clamp(10px, 1.8vw, 22px) clamp(6px, 1.2vw, 14px);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .4s ease, transform .4s cubic-bezier(.22, 1, .36, 1);
  pointer-events: none;
}
.vp.show-ui .vp-ui { opacity: 1; transform: none; pointer-events: auto; }
.vp-btn {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  opacity: .85;
  cursor: pointer;
  transition: opacity .2s, transform .2s;
}
.vp-btn:hover { opacity: 1; }
.vp-btn:active { transform: scale(.92); }
.vp-btn svg { width: 20px; height: 20px; }
.vp-time {
  flex: none;
  min-width: 3.2em;
  font: 500 .66rem/1 var(--sans);
  letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
  opacity: .85;
}
.vp-dur { text-align: right; opacity: .55; }
/* Línea de progreso: fina; crece un poco y enseña el punto al pasar */
.vp-bar { position: relative; flex: 1; min-width: 0; height: 28px; cursor: pointer; touch-action: none; outline: none; }
.vp-bar::before, .vp-buf, .vp-fill {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 2px;
  margin-top: -1px;
  border-radius: 2px;
  transform-origin: left center;
  transition: height .2s ease, margin .2s ease;
}
.vp-bar::before { background: rgb(255 255 255 / .18); }
.vp-buf { background: rgb(255 255 255 / .28); transform: scaleX(0); }
.vp-fill { background: #fff; transform: scaleX(0); }
.vp-bar:hover::before, .vp-bar:hover .vp-buf, .vp-bar:hover .vp-fill,
.vp-bar.dragging::before, .vp-bar.dragging .vp-buf, .vp-bar.dragging .vp-fill,
.vp-bar:focus-visible::before, .vp-bar:focus-visible .vp-buf, .vp-bar:focus-visible .vp-fill { height: 4px; margin-top: -2px; }
.vp-knob {
  position: absolute;
  top: 50%; left: 0;
  width: 12px; height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 10px rgb(0 0 0 / .4);
  transform: scale(0);
  transition: transform .2s cubic-bezier(.22, 1, .36, 1);
}
.vp-bar:hover .vp-knob, .vp-bar.dragging .vp-knob, .vp-bar:focus-visible .vp-knob { transform: scale(1); }
.vp-tip {
  position: absolute;
  bottom: 100%;
  left: 0;
  margin-bottom: 4px;
  padding: 5px 7px;
  border-radius: 3px;
  background: rgb(0 0 0 / .72);
  font: 500 .62rem/1 var(--sans);
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity .15s;
  pointer-events: none;
}
.vp-bar:hover .vp-tip { opacity: 1; }
/* Volumen: una línea como la de progreso */
.vp-vol {
  flex: none;
  width: 72px;
  height: 28px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.vp-vol::-webkit-slider-runnable-track { height: 2px; border-radius: 2px; background: linear-gradient(90deg, #fff var(--v, 100%), rgb(255 255 255 / .22) var(--v, 100%)); }
.vp-vol::-moz-range-track { height: 2px; border-radius: 2px; background: linear-gradient(90deg, #fff var(--v, 100%), rgb(255 255 255 / .22) var(--v, 100%)); }
.vp-vol::-webkit-slider-thumb { -webkit-appearance: none; width: 10px; height: 10px; margin-top: -4px; border-radius: 50%; background: #fff; border: 0; }
.vp-vol::-moz-range-thumb { width: 10px; height: 10px; border-radius: 50%; background: #fff; border: 0; }
/* En el móvil el volumen va con los botones del teléfono */
@media (pointer: coarse) { .vp-vol, .vp-tip { display: none; } }
/* Botón grande del centro (en pausa o al terminar) */
.vp-big {
  position: absolute;
  left: 50%; top: 50%;
  z-index: 1;
  display: grid;
  place-items: center;
  width: clamp(64px, 8vw, 96px);
  aspect-ratio: 1;
  padding: 0;
  border: 1px solid rgb(255 255 255 / .7);
  border-radius: 50%;
  background: rgb(0 0 0 / .35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.9);
  transition: opacity .3s ease, transform .4s cubic-bezier(.22, 1, .36, 1), background .2s;
  pointer-events: none;
}
.vp-big svg { width: 36%; height: 36%; }
.vp.is-paused .vp-big { opacity: 1; transform: translate(-50%, -50%); pointer-events: auto; }
.vp-big:hover { background: rgb(0 0 0 / .55); }
.vp-spin {
  position: absolute;
  left: 50%; top: 50%;
  width: 38px; height: 38px;
  margin: -19px 0 0 -19px;
  border: 1.5px solid rgb(255 255 255 / .2);
  border-top-color: #fff;
  border-radius: 50%;
  opacity: 0;
  animation: vp-spin .9s linear infinite;
  transition: opacity .2s;
  pointer-events: none;
}
.vp.is-waiting:not(.is-paused) .vp-spin { opacity: 1; transition-delay: .4s; }
@keyframes vp-spin { to { transform: rotate(360deg); } }
.vp:fullscreen { width: 100%; height: 100%; max-width: none; max-height: none; aspect-ratio: auto; }
.vp:-webkit-full-screen { width: 100%; height: 100%; max-width: none; max-height: none; aspect-ratio: auto; }

/* Todo lo de debajo del vídeo, centrado */
.work-body {
  display: grid;
  justify-items: center;
  gap: 24px;
  max-width: 1600px;
  margin-inline: auto;
  padding: clamp(20px, 3vw, 40px) var(--gutter) 0;
  text-align: center;
}
.work-head {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.work-head-text { display: grid; justify-items: center; gap: 8px; min-width: 0; }
.work-kicker { margin: 0; color: var(--muted); font-size: .62rem; }
.work-title { margin: 0; font: 400 clamp(1.4rem, 2.7vw, 2.2rem)/1.1 var(--display); text-wrap: balance; }

/* Flechas anterior / siguiente: en los bordes, a la altura del título */
.nav-arrow {
  display: grid;
  place-items: center;
  width: 44px;
  height: 64px;
  color: var(--fg);
  opacity: .7;
  transition: opacity .25s, transform .35s cubic-bezier(.22, 1, .36, 1);
}
.nav-arrow svg { width: 19px; height: 38px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.nav-prev { justify-self: start; margin-left: -12px; }
.nav-next { justify-self: end; margin-right: -12px; }
.nav-arrow:hover { opacity: 1; }
.nav-prev:hover { transform: translateX(-4px); }
.nav-next:hover { transform: translateX(4px); }

/* Separación entre bloques con margen (no con gap) para que los bloques
   plegados no dejen hueco */
.work-detail { display: grid; justify-items: center; min-width: 0; width: 100%; }
.work-detail > * + * { margin-top: 28px; }
.work-detail > .work-more { margin-top: 0; }

/* Créditos: el cargo a la izquierda y el nombre a la derecha, alineados
   con los bordes del vídeo */
/* Ancho máximo: en pantallas anchas, cargo y nombre no se separan hasta
   los bordes (en el móvil no cambia nada) */
.credits { margin: 0; display: grid; gap: 8px; width: 100%; max-width: 34rem; }
.credits div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.credits dt { color: var(--muted); font-size: .6rem; line-height: 1.6; text-align: left; flex: none; }
.credits dd { margin: 0; font-size: .95rem; line-height: 1.35; text-align: right; min-width: 0; }
/* Nombres con enlace: idénticos al resto, sin ninguna marca visual */
.credits dd a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.credits dd a:focus { outline: none; }
.credits dd a:focus-visible { outline: 1px solid var(--muted); outline-offset: 2px; }

.work-text { display: grid; gap: 14px; max-width: 60ch; color: color-mix(in srgb, var(--fg) 82%, var(--bg)); }
.work-text p { margin: 0; }

/* Premios y selecciones: un icono centrado y debajo los títulos */
.honors { display: grid; justify-items: center; gap: 26px; width: 100%; }
.honor-group { display: grid; justify-items: center; gap: 10px; text-align: center; }
.honor-group svg { display: block; width: auto; color: var(--fg); margin-bottom: 2px; }
.honor-group .cup { height: 1.15rem; }
.honor-group .laurel { height: 1.35rem; }
.honor-item { display: grid; gap: 1px; margin: 0; font-size: .95rem; line-height: 1.35; text-wrap: balance; }
.honor-sub { color: var(--muted); font-size: .8rem; }

/* ---------- Más información (flecha de abajo) ----------
   Sin desplegar: créditos principales y 3 premios/selecciones como mucho.
   Al desplegar: el resto de premios y selecciones, el texto y más
   créditos. Todo está en el HTML desde el principio (lo lee Google). */
.honor-group.is-extra, .honor-item.is-extra { display: none; }
.work-detail.is-open .honor-group.is-extra { display: grid; animation: more-in .6s cubic-bezier(.22, 1, .36, 1) both; }
.work-detail.is-open .honor-item.is-extra { display: grid; animation: more-in .6s cubic-bezier(.22, 1, .36, 1) .05s both; }
@keyframes more-in { from { opacity: 0; transform: translateY(-6px); } }
.work-more {
  display: grid;
  grid-template-rows: 0fr;
  width: 100%;
  align-self: start;
  scroll-margin-top: 110px; /* que no quede debajo de la cabecera */
  transition: grid-template-rows .6s cubic-bezier(.22, 1, .36, 1);
}
/* El hueco de encima lo pone el propio bloque (con el gap, sobre un
   elemento vacío), así que plegado no ocupa nada */
.work-more-inner::before { content: ""; }
.work-more[hidden] { display: none; }
/* Nombres y cargos largos (sobre todo en el móvil): siempre al menos 28 px
   entre cargo y nombre; el cargo ocupa como mucho la mitad y, si no cabe,
   va en renglones equilibrados; el nombre usa el resto, también en
   renglones equilibrados; con dos personas el corte va antes de la "y"
   ("Nacho Medina / y Manu Martino": la "y" va unida al nombre siguiente
   con un espacio duro, ver RD.creditoTexto) */
.credits div { column-gap: 28px; }
.credits dt { flex: 0 0 auto; max-width: 50%; text-wrap: balance; }
.credits dd { flex: 1 1 0; min-width: 0; text-wrap: balance; }
/* Solo en el móvil: una línea muy sutil entre crédito y crédito */
@media (max-width: 700px) {
  .credits { gap: 0; }
  .credits div { padding-block: 9px; }
  .credits div + div { border-top: 1px solid rgb(236 235 231 / .07); }
}
.more-title {
  margin: 0;
  color: var(--muted);
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.work-more-inner {
  display: grid;
  justify-items: center;
  gap: 28px;
  min-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity .35s ease;
}
.work-detail.is-open .work-more { grid-template-rows: 1fr; }
.work-detail.is-open .work-more-inner { opacity: 1; transition: opacity .5s ease .15s; }
.work-text { text-align: center; text-wrap: pretty; }
/* La flecha: misma estética que las de los lados, girada hacia abajo */
.more-toggle {
  display: grid;
  place-items: center;
  width: 64px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--fg);
  opacity: .7;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity .25s, transform .35s cubic-bezier(.22, 1, .36, 1);
}
.more-toggle[hidden] { display: none; }
.more-toggle svg { width: 38px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; transition: transform .6s cubic-bezier(.22, 1, .36, 1); }
.more-toggle:hover { opacity: 1; transform: translateY(3px); }
.work-detail > .more-toggle { margin-top: 22px; }
/* Plegada, la flecha se balancea muy poco para invitar a pulsarla;
   desplegada (hacia arriba) se queda quieta */
/* Plegada, la flecha se ilumina y se apaga despacio, como una luz que
   respira; con el cursor encima se queda encendida. Desplegada (hacia
   arriba) está quieta, sin brillo */
.more-toggle { opacity: 1; }
.more-toggle svg { opacity: .7; animation: more-glow 3.2s ease-in-out infinite; }
@keyframes more-glow {
  0%, 100% { opacity: .35; filter: drop-shadow(0 0 0 rgb(255 255 255 / 0)); }
  50% { opacity: 1; filter: drop-shadow(0 0 6px rgb(255 255 255 / .55)); }
}
.more-toggle:hover svg { animation: none; opacity: 1; filter: drop-shadow(0 0 6px rgb(255 255 255 / .55)); }
.more-toggle svg { transition: transform .6s cubic-bezier(.22, 1, .36, 1), opacity .4s ease, filter .4s ease; }
.work-detail.is-open .more-toggle svg { transform: rotate(180deg); animation: none; opacity: .7; filter: none; }
.work-detail.is-open .more-toggle:hover svg { opacity: 1; }
.work-detail.is-open .more-toggle:hover { transform: translateY(-3px); }

.gallery {
  display: grid;
  gap: 8px;
  max-width: 1600px;
  margin: clamp(32px, 5vw, 64px) auto 0;
  padding-inline: var(--gutter);
}
@media (min-width: 700px) { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gallery-item { margin: 0; aspect-ratio: 16 / 9; max-width: 100%; overflow: hidden; background: var(--surface); }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Móvil ---------- */
@media (max-width: 520px) {
  .nav { gap: 16px; }
  .nav a { font-size: .64rem; letter-spacing: .1em; }
}

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

/* ============ SOLO VERTICAL EN MÓVIL ============
   Una web no puede bloquear el giro de pantalla, así que en un móvil en
   horizontal se tapa todo con un aviso para volver a ponerlo en vertical.
   No afecta a los vídeos a pantalla completa ni a tablets ni ordenadores. */
@media (orientation: landscape) and (max-height: 520px) and (pointer: coarse) {
  html, body { overflow: hidden; }
  html::after {
    content: "Gira el móvil";
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding-top: 64px;
    background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23ecebe7' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='16' y='6' width='16' height='28' rx='3'/%3E%3Cpath d='M22 30h4'/%3E%3Cpath d='M10 38a16 16 0 0 0 28 0'/%3E%3Cpath d='M34 34l4 4 1-5'/%3E%3C/svg%3E") center calc(50% - 22px) / 48px no-repeat;
    color: var(--muted, #8a8984);
    font: 500 .72rem/1 "Schibsted Grotesk", system-ui, sans-serif;
    letter-spacing: .18em;
    text-transform: uppercase;
  }
  /* Con un vídeo en marcha, girar el móvil no muestra el aviso: el vídeo
     ocupa toda la pantalla (sin tener que pulsar "pantalla completa") */
  html.video-on::after { content: none; }
  html.video-on .work-player {
    position: fixed;
    inset: 0;
    z-index: 9998;
    max-width: none;
    padding: 0;
    background: #000;
  }
  html.video-on .work-player .vp,
  html.video-on .work-player iframe {
    width: 100%;
    height: 100%;
    max-height: none;
    aspect-ratio: auto;
    object-fit: contain;
  }
}
/* Y nunca tapa un vídeo a pantalla completa */
html:has(:fullscreen)::after { content: none; }
html:has(:-webkit-full-screen)::after { content: none; }

/* ============ CABECERAS ALINEADAS CON EL VÍDEO ============
   En pantallas anchas, el logo, la X, "Info +" y las flechas no se van a
   los bordes de la pantalla: se alinean con los bordes del vídeo (página
   de trabajo) o de la tarjeta activa (portada). Todo cambia de forma
   continua con el ancho; en el móvil queda igual que antes. */
/* Portada: tamaño y posición de la tarjeta activa. Pasan poco a poco del
   móvil (≤ 700 px de ancho: idéntico a como estaba) al escritorio, sin
   saltos al estrechar la ventana. La R, "Info +" y las flechas se alinean
   con la tarjeta usando estas mismas variables. */
body.page-home {
  --home-side: clamp(0px, (100vw - 700px) * .6, 2 * var(--gutter) + 220px);
  --home-hf: clamp(44svh, 44svh + (100vw - 700px) * .4, 60svh);
  --home-card-w: min(100vw - 20px - var(--home-side), var(--home-hf) * 16 / 9);
  --home-cy: calc(46svh + clamp(0px, (100vw - 700px) * .025, 1svh));
  --home-card-top: calc(var(--home-cy) - var(--home-card-w) * 9 / 32);
  /* Cuánto bajan la R e "Info +" desde arriba (0 en el móvil) */
  --home-head-drop: min(max(0px, (100vw - 700px) * .3), max(0px, (var(--home-card-top) - 76px) / 2));
}
/* R e "Info +": en el borde de la tarjeta y, en pantallas grandes, bajan
   hasta quedar a medio camino entre el borde de arriba y la tarjeta */
.bar-float {
  padding-left: max(var(--gutter), calc((100vw - var(--home-card-w)) / 2));
  padding-right: max(var(--gutter), calc((100vw - var(--home-card-w)) / 2));
  padding-top: calc(14px + env(safe-area-inset-top, 0px) + var(--home-head-drop));
}
/* La R mantiene su tamaño grande mientras está bajada y solo encoge hasta
   el del móvil (34 px) a medida que sube */
.logo-r-only img { height: clamp(34px, 34px + var(--home-head-drop) * .6, 48px); }
.stepper { right: max(var(--gutter), calc((100vw - var(--home-card-w)) / 2 - 44px - 36px)); }

/* Página de trabajo: logo y X en los bordes del vídeo (mismo ancho que
   .poster/.vp). En el móvil el vídeo ocupa todo el ancho y no cambia nada. */
.bar-work {
  --video-w: min(min(100%, 1600px) - 2 * var(--gutter), (100svh - 110px) * 16 / 9);
  padding-left: max(var(--gutter), calc((100% - var(--video-w)) / 2));
  padding-right: max(var(--gutter), calc((100% - var(--video-w)) / 2));
}