/* Lock In - sitio publico. Paleta tomada de ui/theme/Color.kt */
:root {
  --bg:            #020718;
  --surface:       #08132F;
  --surface-bright:#0D1D43;
  --cyan:          #48E6FF;
  --blue:          #287CFF;
  --purple:        #8E75FF;
  --text:          #F3F7FF;
  --muted:         #98A7CD;

  --line: rgba(72, 230, 255, .16);
  --maxw: 1360px;
  --nav-h: 66px;

  --font: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* ---------- fondo estrellado (texturas repetidas, ver assets/stars-*.png) ---------- */
.sky { position: fixed; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; }
.sky::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(1100px 640px at 50% -10%, rgba(40,124,255,.26), transparent 65%),
    radial-gradient(800px 560px at 85% 15%, rgba(142,117,255,.14), transparent 60%);
}
.stars { position: absolute; inset: 0; background-repeat: repeat; }
.stars.s1 { background-image: url("assets/stars-far.png");  background-size: 420px 420px; opacity: .55; }
.stars.s2 { background-image: url("assets/stars-mid.png");  background-size: 700px 700px; opacity: .8; }
.stars.s3 { background-image: url("assets/stars-near.png"); background-size: 900px 900px; opacity: .9; }

/* ---------- base ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }

h1, h2, h3 { margin: 0; line-height: 1.12; letter-spacing: -.02em; }
/* El unico h1 de la web es la marca del hero, y va como imagen (.wordmark),
   asi que este tamano solo actua de reserva si algun dia lleva texto. */
h1 { font-size: clamp(36px, 4.7vw, 64px); font-weight: 800; }
h2 { font-size: clamp(26px, 3.2vw, 36px); font-weight: 800; }
h3 { font-size: 18px; font-weight: 700; }
p  { margin: 0; line-height: 1.65; color: var(--muted); }

.grad {
  background: linear-gradient(100deg, var(--cyan), var(--blue) 60%, var(--purple));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  height: var(--nav-h);
  background: rgba(2,7,24,.82);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav .wrap { height: 100%; display: flex; align-items: center; gap: 24px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 17px; }
.brand img { width: 32px; height: 32px; border-radius: 9px; }
.nav-links { display: flex; gap: 24px; margin-left: auto; font-size: 14.5px; font-weight: 600; color: var(--muted); }
/* Los enlaces se encienden igual que el badge de Google Play: el mismo
   escalonado de blanco a cian a azul. La diferencia es que aqui va con
   text-shadow y no con drop-shadow, porque lo que brilla es texto y no una
   silueta recortada; con drop-shadow el halo seguiria la caja del enlace.
   El inline-block es para que el :active pueda hundirlo un pixel. */
.nav-links a,
.nav-links .is-here { display: inline-block; }
.nav-links a { transition: color .18s, text-shadow .18s, transform .12s; }
.nav-links a:hover,
.nav-links a:focus-visible {
  color: var(--text);
  text-shadow:
    0 0 8px rgba(200,248,255,.95),
    0 0 20px rgba(72,230,255,.8),
    0 0 46px rgba(40,124,255,.6);
}
.nav-links a:focus-visible { outline: none; }
/* al pulsar, el halo sube y el enlace se hunde */
.nav-links a:active {
  transform: translateY(1px);
  text-shadow:
    0 0 10px rgba(255,255,255,1),
    0 0 26px rgba(72,230,255,1),
    0 0 62px rgba(40,124,255,.85);
}

/* ---------- selector de idioma ---------- */
.lang {
  display: flex; align-items: center; gap: 2px;
  margin-left: auto;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(13,29,67,.5);
}
.nav-links ~ .lang { margin-left: 0; }
.lang-opt {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px; font-weight: 700; letter-spacing: .02em;
  color: var(--muted);
  transition: color .18s, background .18s;
}
a.lang-opt:hover,
a.lang-opt:focus-visible {
  color: var(--text);
  background: rgba(72,230,255,.12);
  text-shadow: 0 0 8px rgba(200,248,255,.85), 0 0 18px rgba(72,230,255,.65);
}
a.lang-opt:focus-visible { outline: none; }
a.lang-opt:active { text-shadow: 0 0 10px #fff, 0 0 24px rgba(72,230,255,.95); }
a.lang-opt:hover .flag,
a.lang-opt:focus-visible .flag { box-shadow: 0 0 0 1px rgba(255,255,255,.35), 0 0 12px rgba(72,230,255,.7); }
.lang-opt.is-active { color: var(--text); background: rgba(72,230,255,.16); cursor: default; }
.flag {
  width: 20px; height: 14px; flex: none;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.18);
}

/* ---------- botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 12px 22px;
  border-radius: 999px;
  font-size: 15px; font-weight: 700;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .18s, box-shadow .18s, border-color .18s;
  white-space: nowrap;
}
.btn-ghost { border-color: var(--line); color: var(--text); background: rgba(13,29,67,.55); }
.btn-ghost:hover { border-color: rgba(72,230,255,.45); transform: translateY(-2px); }

/* ---------- hero ---------- */
.hero { padding: clamp(40px, 6vw, 76px) 0 clamp(44px, 6vw, 80px); }
.hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 56px); align-items: center; }
/* Marca: el icono y la palabra "Lock In" en una sola pieza. La palabra sale
   recortada del banner (build-assets.py), por eso es imagen y no texto. */
.brand-lockup { display: flex; align-items: center; gap: clamp(14px, 1.8vw, 24px); }
.brand-lockup h1 { margin: 0; display: flex; line-height: 0; }
.brand-mark {
  width: clamp(84px, 10vw, 140px); height: auto; flex: none;
  border-radius: 20px;
  box-shadow: 0 14px 36px rgba(0,0,0,.55), 0 0 36px rgba(40,124,255,.26);
}
.wordmark { height: clamp(52px, 7.2vw, 96px); width: auto; }
.hero .lede { font-size: clamp(22px, 2.9vw, 38px); font-weight: 600; color: var(--text); margin-top: clamp(24px, 3vw, 38px); line-height: 1.35; }
.hero-note { font-size: 13.5px; margin-top: 22px; color: var(--muted); }

/* ---------- botones de tienda ---------- */
/* Los dos badges son imagenes normalizadas a la misma altura por
   build-assets.py, asi que basta con fijar la altura y dejar libre el ancho. */
.badges { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px; margin-top: 32px; }
.badge { display: inline-flex; flex-direction: column; align-items: center; gap: 8px; }
/* Las dos imagenes salen del build con el mismo tamano y las mismas esquinas,
   asi que fijando la altura ya quedan simetricas. */
.badge img {
  height: clamp(48px, 5.2vw, 58px);
  width: auto;
  transition: transform .2s, filter .2s;
}
/* El resplandor va con drop-shadow y no con box-shadow: el badge tiene las
   esquinas transparentes, y box-shadow seguiria el rectangulo del elemento
   dejando cuatro picos alrededor. drop-shadow sigue la silueta real. */
a.badge:hover img,
a.badge:focus-visible img {
  transform: translateY(-3px) scale(1.04);
  filter:
    drop-shadow(0 0 9px rgba(200,248,255,1))
    drop-shadow(0 0 28px rgba(72,230,255,.95))
    drop-shadow(0 0 62px rgba(40,124,255,.7))
    brightness(1.1);
}
a.badge:focus-visible { outline: none; }
/* el de Apple todavia no lleva a ningun sitio */
.badge.is-soon { cursor: default; }
.badge.is-soon img { opacity: .42; filter: grayscale(1); }
.badge.is-soon small {
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted);
}

/* ---------- carrusel circular ---------- */
/* La del centro se ve entera; la anterior y la siguiente asoman por los bordes,
   recortadas por el contenedor y oscurecidas. Las flechas van encima. */
.hero-slider { position: relative; user-select: none; }
.slider {
  position: relative;
  height: clamp(460px, 56vw, 620px);
  overflow: hidden;
  touch-action: pan-y;
}
.slide {
  position: absolute; top: 50%; left: 50%;
  margin: 0;
  width: clamp(226px, 28vw, 310px);
  transform: translate(-50%, -50%) scale(.72);
  opacity: 0;
  z-index: 0;
  pointer-events: none;
  transition: transform .45s cubic-bezier(.22,.7,.3,1), opacity .45s ease, filter .45s ease;
  will-change: transform;
}
.slide img {
  width: 100%; height: auto;
  border-radius: 16px;
  border: 1px solid var(--line);
  box-shadow: 0 24px 54px rgba(0,0,0,.55);
}
/* la del centro: entera, nitida y por delante de las otras dos */
.slide.is-current {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1; z-index: 3;
}
.slide.is-current img {
  border-color: rgba(72,230,255,.45);
  box-shadow: 0 28px 64px rgba(0,0,0,.7), 0 0 0 4px rgba(2,7,24,.9);
}
/* la anterior y la siguiente: asoman por el borde y van oscurecidas */
.slide.is-prev, .slide.is-next {
  opacity: 1; z-index: 2;
  filter: brightness(.3) saturate(.6);
  cursor: pointer; pointer-events: auto;
}
.slide.is-prev { transform: translate(calc(-50% - 88%), -50%) scale(.82); }
.slide.is-next { transform: translate(calc(-50% + 88%), -50%) scale(.82); }
.slide.is-prev:hover, .slide.is-next:hover { filter: brightness(.55) saturate(.85); }

.slider-arrow {
  position: absolute; top: 50%; z-index: 4;
  transform: translateY(-50%);
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(2,7,24,.72);
  backdrop-filter: blur(6px);
  color: var(--text);
  cursor: pointer;
  transition: border-color .2s, background .2s;
}
.slider-arrow.prev { left: 2px; }
.slider-arrow.next { right: 2px; }
.slider-arrow:hover { border-color: rgba(72,230,255,.5); background: rgba(13,29,67,.95); }
.slider-arrow svg { width: 18px; height: 18px; }

.dots { display: flex; gap: 8px; justify-content: center; margin-top: 22px; }
.dots button {
  width: 7px; height: 7px; padding: 0;
  border: 0; border-radius: 50%;
  background: rgba(152,167,205,.35);
  cursor: pointer;
  transition: background .2s, width .2s;
}
.dots button[aria-current="true"] { background: var(--cyan); width: 20px; border-radius: 99px; }

/* ---------- footer ---------- */
/* Plano y a la izquierda, al estilo de la ficha tecnica de un pie de pagina. */
footer { border-top: 1px solid var(--line); padding: 44px 0 52px; background: rgba(2,7,24,.75); }
footer p { font-size: 15px; color: var(--muted); }
.foot-contact { margin-bottom: 14px; }
.foot-contact a { color: var(--muted); }
.foot-contact a:hover { color: var(--text); }
.foot-links { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; }
.foot-links a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.foot-links span { color: rgba(152,167,205,.4); }
.foot-org { margin-top: 34px; }
.foot-legal { margin-top: 10px; font-size: 14px; color: rgba(152,167,205,.65); }

/* ---------- documentos legales y soporte ---------- */
.doc { padding: clamp(40px, 6vw, 72px) 0 clamp(30px, 4vw, 56px); }
.doc .wrap { max-width: 820px; }
.doc-head { margin-bottom: clamp(28px, 4vw, 44px); }
.doc-intro { margin-top: 16px; font-size: 17px; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--cyan);
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(72,230,255,.06);
}
.eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }

.doc-body {
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: clamp(24px, 4vw, 48px);
  background: linear-gradient(180deg, rgba(13,29,67,.6), rgba(8,19,47,.42));
}
.doc-body h2 { font-size: clamp(24px, 3.2vw, 32px); margin: 0 0 20px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.doc-body h2 ~ h2 { margin-top: 52px; }
.doc-body h3 { font-size: 19px; margin: 38px 0 12px; color: var(--cyan); }
.doc-body h4 { font-size: 16px; margin: 26px 0 10px; color: var(--text); font-weight: 700; }
.doc-body p { font-size: 15.8px; margin: 0 0 16px; }
.doc-body strong { color: var(--text); font-weight: 700; }
.doc-body a { color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; }
.doc-body a:hover { color: var(--text); }
.doc-body ul, .doc-body ol { margin: 0 0 18px; padding-left: 22px; }
.doc-body li { color: var(--muted); font-size: 15.8px; line-height: 1.65; margin-bottom: 9px; }
.doc-body li::marker { color: var(--blue); }
.doc-body hr { border: 0; border-top: 1px solid rgba(152,167,205,.14); margin: 32px 0; }
.doc-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .9em; padding: 2px 6px; border-radius: 6px;
  background: rgba(72,230,255,.1); color: var(--cyan);
}
.doc-body > h2:first-child { margin-top: 0; }
/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; text-align: center; }
  .hero-text .lede { margin-left: auto; margin-right: auto; }
  .brand-lockup { justify-content: center; }
  .badges { justify-content: center; }
  .nav-links { display: none; }
  .band-grid { flex-direction: column; align-items: flex-start; text-align: left; }
}
@media (max-width: 900px) {
  /* En una sola columna el carrusel puede ocupar todo el ancho. */
  .slider { height: clamp(430px, 118vw, 600px); }
  .slide { width: clamp(200px, 56vw, 300px); }
}
@media (max-width: 560px) {
  .slide.is-prev { transform: translate(calc(-50% - 84%), -50%) scale(.8); }
  .slide.is-next { transform: translate(calc(-50% + 84%), -50%) scale(.8); }
  .slider-arrow { width: 36px; height: 36px; }
}

/* ==================================================================
   PAGINA DE ORIGEN  (origen.html / origin.html)

   Maquetacion editorial a sangre: titular gigante, foto y texto en
   tres columnas separadas por filetes.

   Todo el movimiento va con animaciones ligadas al scroll
   (animation-timeline), que son CSS puro: no hay ni una linea de JS
   detras de esta pagina. La gracia es que si el navegador no las
   soporta, el bloque @supports no entra, ninguna animacion se aplica
   y la pagina se ve entera y quieta. Ese es el fallback correcto, y
   por eso ningun elemento lleva opacity:0 en su estado base.
   ================================================================== */

/* ---------- barra de lectura ---------- */
.progress {
  position: fixed; top: 0; left: 0; z-index: 60;
  width: 100%; height: 2px;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--cyan), var(--blue) 55%, var(--purple));
}
@keyframes grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .progress { animation: grow-x linear both; animation-timeline: scroll(root); }
  }
}

/* La pestana activa. No es un enlace sino un <span>: enlazar una
   pagina a si misma provoca una recarga, y una recarga no lleva
   transicion, con lo que parece que la web se ha quedado colgada. */
.nav-links .is-here { color: var(--cyan); cursor: default; }

/* ---------- el marco de foto ----------
   .frame recorta y .shot es la foto. Mientras no haya fotos, .shot es
   un div vacio con .is-empty: un marco blanco con trama diagonal y la
   etiqueta de data-hint dentro. Cuando llegue la foto de verdad se
   cambia el div por <img class="shot" src="..."> y ya esta: las
   medidas y el recorte son los mismos. */
.frame { overflow: clip; border-radius: 6px; }
.shot {
  display: block;
  width: 100%; height: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
  transition: filter 1.2s cubic-bezier(.22,.61,.36,1);
}
.shot.is-empty {
  display: grid; place-items: center;
  filter: none;
  border: 1px solid rgba(243,247,255,.42);
  background-color: rgba(243,247,255,.05);
  background-image: repeating-linear-gradient(-45deg,
    rgba(243,247,255,.07) 0 1px, transparent 1px 8px);
  transition: border-color .7s cubic-bezier(.22,.61,.36,1);
}
.shot.is-empty::after {
  content: attr(data-hint);
  font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(243,247,255,.55);
  border: 1px solid rgba(243,247,255,.22);
  border-radius: 999px;
  padding: 7px 14px;
  background: rgba(2,7,24,.55);
}

/* ---------- hero ---------- */
.origin-hero__stage { padding-top: clamp(40px, 7vw, 86px); padding-bottom: clamp(30px, 5vw, 64px); }
.origin-title {
  margin-top: clamp(20px, 2.6vw, 32px);
  font-size: clamp(2.6rem, 7.4vw, 6rem);
  font-weight: 800; line-height: .92; letter-spacing: -.04em;
}
.origin-title span { display: block; }
.origin-hero__frame { width: 100%; max-width: 420px; margin: clamp(30px, 5vw, 48px) 0; }
.origin-hero__cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(22px, 3vw, 48px); }
.col-head { font-size: 16px; font-weight: 600; color: var(--muted); margin-bottom: 10px; letter-spacing: 0; }
.origin-hero__cols p { font-size: 15.8px; }
.scrollcue {
  margin-top: clamp(26px, 4vw, 44px);
  font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(152,167,205,.6);
}

/* ---------- capitulos ---------- */
.panel { border-top: 1px solid var(--line); }
.panel-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .8fr) minmax(0, 1fr);
  gap: clamp(24px, 3.4vw, 56px);
  align-items: center;
  padding-top: clamp(40px, 5vw, 76px);
  padding-bottom: clamp(40px, 5vw, 76px);
}
/* Apagados de serie; se encienden al pasar por encima, como en el
   original. El numero de capitulo va dentro del propio titular. */
.panel__title {
  font-size: clamp(2rem, 4.6vw, 4.4rem);
  font-weight: 800; line-height: .95; letter-spacing: -.035em;
  color: rgba(152,167,205,.45);
  transition: color .7s cubic-bezier(.22,.61,.36,1);
}
.panel__num {
  display: block;
  font-size: 13px; font-weight: 700; letter-spacing: .2em;
  color: var(--cyan);
  margin-bottom: 14px;
  opacity: .55;
  transition: opacity .7s;
}
.panel__body p {
  color: var(--muted);
  font-size: 15.8px; margin-bottom: 15px;
  transition: color .7s cubic-bezier(.22,.61,.36,1);
}
.panel__body p:last-child { margin-bottom: 0; }
.panel__body strong { color: var(--text); font-weight: 700; }
.panel__body em { color: var(--muted); font-style: italic; }

.panel:hover .panel__title,
.panel:hover .panel__body p { color: var(--text); }
.panel:hover .panel__num { opacity: 1; }
.panel:hover .shot { filter: grayscale(0) contrast(1.02) saturate(1.05); }
.panel:hover .shot.is-empty { filter: none; border-color: rgba(72,230,255,.55); }

/* Sin raton no hay hover, asi que en tactil la fila va encendida de
   serie: si no, en un movil el titular se quedaria apagado siempre. */
@media (hover: none) {
  .panel__title { color: var(--muted); }
  .panel__num { opacity: 1; }
}

/* ---------- cita a sangre ---------- */
.band {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: clamp(54px, 8vw, 116px) 0;
  background-image: repeating-linear-gradient(-45deg,
    rgba(243,247,255,.045) 0 1px, transparent 1px 7px);
}
.band-quote {
  margin: 0;
  max-width: 22ch;
  font-size: clamp(1.6rem, 3.6vw, 3rem);
  font-weight: 800; line-height: 1.1; letter-spacing: -.03em;
  color: var(--text);
}

/* ---------- cierre ---------- */
.closing { padding: clamp(56px, 8vw, 120px) 0 clamp(40px, 6vw, 80px); text-align: center; }
.closing-quote {
  font-size: clamp(1.8rem, 4.4vw, 3.6rem);
  font-weight: 800; line-height: 1.12; letter-spacing: -.03em;
  color: var(--text);
}
.closing-sign { margin-top: 22px; font-size: 14.5px; color: var(--muted); }
.closing-badges { justify-content: center; margin-top: 38px; }
.closing .hero-note { margin-top: 18px; }

/* ==================================================================
   MOVIMIENTO LIGADO AL SCROLL
   ================================================================== */

@keyframes blur-in {
  from { opacity: 0; filter: blur(18px); transform: translateY(26px) scale(1.012); }
  to   { opacity: 1; filter: blur(0);    transform: none; }
}
/* La foto se desplaza despacio mientras su fila cruza la pantalla. El
   scale(1.08) es para que ese desplazamiento no descubra el borde. */
@keyframes drift {
  from { transform: translateY(-3%) scale(1.08); }
  to   { transform: translateY(3%)  scale(1.08); }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal {
      animation: blur-in linear both;
      animation-timeline: view();
      animation-range: entry 5% entry 70%;
    }
    .panel .shot {
      animation: drift linear both;
      animation-timeline: view();
      animation-range: entry exit;
    }
  }
}

/* ---------- la coreografia del hero, solo en escritorio ----------
   El bloque mide 300svh y el escenario va pegado arriba: durante esos
   tres pantallazos de scroll la foto entra desde fuera hasta el
   centro, las dos columnas se van por la derecha y el titular se
   encoge hacia su esquina. El rango "contain" es exactamente el tramo
   en el que el escenario esta pegado, asi que encaja solo. */
@keyframes hero-photo {
  from { transform: translate(128%, 24%) scale(1.65); }
  to   { transform: none; }
}
@keyframes hero-color {
  from { filter: grayscale(1) contrast(1.05); }
  to   { filter: grayscale(0) contrast(1.02) saturate(1.04); }
}
@keyframes hero-cols {
  from { transform: none;             opacity: 1; }
  to   { transform: translateX(34vw); opacity: 0; }
}
@keyframes hero-title {
  from { transform: none; }
  to   { transform: translateY(-3svh) scale(.54); }
}
@keyframes hero-cue {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(14px); }
}

@media (min-width: 1024px) {
  @media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
      .origin-hero {
        height: 300svh;
        view-timeline-name: --hero;
        view-timeline-axis: block;
      }
      .origin-hero__stage {
        /* El nav es sticky y ocupa sitio en el flujo, asi que el
           escenario se queda justo debajo y descuenta su altura. */
        position: sticky; top: var(--nav-h);
        height: calc(100svh - var(--nav-h));
        overflow: clip;
        padding-top: 0; padding-bottom: 0;
      }
      .origin-hero__text {
        position: absolute;
        top: clamp(5.5rem, 15svh, 9rem);
        left: clamp(22px, 5vw, 76px);
        width: min(56%, 44rem);
        transform-origin: 0 0;
        animation: hero-title linear both;
        animation-timeline: --hero;
        animation-range: contain 42% contain 82%;
      }
      .origin-hero__frame {
        position: absolute; inset: 0; margin: auto;
        width: min(26vw, 25rem); height: 64svh;
        max-width: none;
        animation: hero-photo linear both;
        animation-timeline: --hero;
        animation-range: contain 0% contain 46%;
      }
      .origin-hero__frame .shot {
        height: 100%; aspect-ratio: auto;
        animation: hero-color linear both;
        animation-timeline: --hero;
        animation-range: contain 18% contain 58%;
      }
      .origin-hero__cols {
        position: absolute;
        left: clamp(22px, 5vw, 76px);
        bottom: clamp(3.5rem, 12svh, 7rem);
        width: min(52%, 40rem);
        animation: hero-cols linear both;
        animation-timeline: --hero;
        animation-range: contain 30% contain 60%;
      }
      .scrollcue {
        position: absolute;
        left: clamp(22px, 5vw, 76px);
        bottom: clamp(1.4rem, 4svh, 2.4rem);
        margin: 0;
        animation: hero-cue linear both;
        animation-timeline: --hero;
        animation-range: contain 2% contain 14%;
      }
    }
  }
}

/* ---------- responsive ---------- */
@media (max-width: 1023px) {
  .panel-grid { grid-template-columns: 1fr; gap: clamp(20px, 4vw, 32px); }
  .panel__title { max-width: 14ch; }
  .panel .frame { max-width: 460px; }
  .band-quote { max-width: none; }
}
@media (max-width: 620px) {
  .origin-hero__cols { grid-template-columns: 1fr; }
  .shot.is-empty::after { font-size: 10px; padding: 6px 11px; letter-spacing: .12em; }
}

/* ==================================================================
   TRANSICIONES ENTRE PAGINAS

   Al pasar de una pagina a otra el contenido se cruza con un
   desvanecido corto mientras la cabecera se queda clavada.

   Va con View Transitions entre documentos, que es CSS puro: no hay
   JavaScript, ni precarga, ni router. Las dos paginas tienen que
   pedirlo, y como las ocho comparten esta hoja, lo piden todas.
   Donde no este soportado no pasa nada: la navegacion es la de
   siempre. Mejora progresiva pura.

   DOS COSAS QUE HAY QUE SABER ANTES DE TOCAR ESTO
   -----------------------------------------------
   1. Un elemento con view-transition-name se saca del recorte general
      y su grupo se pinta SIEMPRE POR ENCIMA del grupo root, sin hacer
      ningun caso al z-index que tuviera. Por eso .sky NO lleva nombre:
      esta detras de todo (z-index: -2), y al ponerselo las estrellas
      se pintaban encima del texto durante toda la transicion.
      Aqui solo lleva nombre la cabecera, que es lo unico que de verdad
      va por delante (z-index: 50).

   2. La animacion de root es SOLO opacidad. Root incluye el cielo, que
      es fixed y ocupa la pantalla entera; cualquier desplazamiento o
      escalado haria que el fondo estrellado se moviese en cada
      navegacion, que es justo lo contrario de lo que se busca. Como el
      cielo es identico en las ocho paginas, el cruce de opacidad entre
      dos cielos iguales no se ve: lo unico que se percibe es el
      contenido cambiando.
   ================================================================== */

@view-transition { navigation: auto; }

/* Lo unico que se queda clavado. */
.nav { view-transition-name: cabecera; }
::view-transition-old(cabecera),
::view-transition-new(cabecera) { animation: none; }

/* Cruce corto y solapado: las dos mitades corren a la vez, no una
   detras de otra. Una transicion de pagina que se nota es una
   transicion que molesta a la tercera vez que la ves. */
@keyframes vt-apaga    { to   { opacity: 0; } }
@keyframes vt-enciende { from { opacity: 0; } }

::view-transition-old(root) { animation: vt-apaga .2s ease-out both; }
::view-transition-new(root) { animation: vt-enciende .2s ease-in both; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation-duration: .1s; }
}

/* ---------- pagina 404 ---------- */
.notfound { padding: clamp(64px, 12vw, 140px) 0 clamp(56px, 9vw, 110px); text-align: center; }
.notfound h1 { margin-top: 26px; font-size: clamp(30px, 5vw, 52px); }
.notfound h2 { margin-top: 40px; font-size: clamp(20px, 2.6vw, 26px); color: var(--muted); font-weight: 700; }
.notfound p { margin-top: 12px; }
.notfound-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 40px; }