/* ==========================================================
   OUTLAND — réplica local
   Paleta y tipografía tomadas de outlandcreator.com
   ========================================================== */

@font-face {
  font-family: 'Anton';
  src: url('../fonts/anton.woff2') format('woff2'),
       url('../fonts/anton.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --alto-header: 104px;
  --azul: #2F60F6;
  /* El mismo azul aclarado, para cuando va pequeño y sobre imagen: el del
     logo se queda en 3,6 de contraste y a 11 px no aguanta. */
  --azul-claro: #4C77FF;
  --negro: #000000;
  --blanco: #ffffff;
  --gris: #8a8a8a;
  --display: 'Anton', 'Haettenschweiler', 'Arial Narrow Bold', Impact, sans-serif;
  --texto: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --alto-fila: clamp(200px, 14.5vw, 430px);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--negro);
  color: var(--blanco);
  font-family: var(--texto);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

/* ---------- HEADER ---------- */

.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--alto-header);
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 100;
  pointer-events: none;
}

.header a { pointer-events: auto; }

/* El logo va centrado y fijo: se queda ahí mientras se hace scroll. Al ir en
   absoluto no le quita sitio al nav, que sigue a la derecha. */
.logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: block;
  line-height: 0;
}

.logo img {
  display: block;
  height: clamp(34px, 4.4vw, 66px);
  width: auto;
  filter: drop-shadow(0 2px 14px rgba(0,0,0,.55));
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.2vw, 40px);
}

/* Uno a cada lado del logo: en espejo. */
.nav-izq { padding-left: 4.2vw; margin-right: auto; }
.nav-der { padding-right: 4.2vw; margin-left: auto; text-align: right; }

.nav a {
  font-family: var(--display);
  font-size: clamp(15px, 1.7vw, 30px);
  line-height: 1;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--blanco);
  text-shadow: 0 1px 12px rgba(0,0,0,.55);
  transition: color .18s ease;
}

.nav a:hover { color: var(--azul); }

/* ---------- MOSAICO DE VÍDEOS ---------- */

.mosaico { display: block; }

.fila {
  position: relative;
  display: flex;
  width: 100%;
  height: var(--alto-fila);
  gap: 0;
  font-size: 0;
  line-height: 0;
}

/* nada de negro entre bloques: se solapan un píxel */
.mosaico > * + * { margin-top: -1px; }

.tile {
  position: relative;
  overflow: hidden;
  background: #050505;
  cursor: pointer;
  flex: 1 1 0;
  min-width: 0;
}

.tile[data-peso="2"] { flex-grow: 2; }
.tile[data-peso="3"] { flex-grow: 3; }
.tile[data-peso="4"] { flex-grow: 4; }

.tile video,
.tile .poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* el 1.012 sobra un pelo por cada lado: mata las líneas negras de
     redondeo entre piezas, en horizontal y en vertical. Todo a sangre.

     --rec-s / --rec-x / --rec-y los pone site.js en las piezas que traen
     bandas negras incrustadas: amplían y recolocan el fotograma para dejar
     las bandas fuera del hueco. Sin recorte valen 1 y 0, y no hacen nada. */
  transform: translate(var(--rec-x, 0px), var(--rec-y, 0px))
             scale(calc(1.012 * var(--rec-s, 1)));
  backface-visibility: hidden;
  transition: transform .9s cubic-bezier(.2,.7,.2,1), filter .4s ease;
}

/* Solo con ratón: en una pantalla táctil el :hover se queda pegado
   después de tocar y la pieza se queda oscurecida y ampliada. */
@media (hover: hover) {
  .tile:hover video,
  .tile:hover .poster {
    transform: translate(var(--rec-x, 0px), var(--rec-y, 0px))
               scale(calc(1.05 * var(--rec-s, 1)));
    filter: brightness(.72);
  }
}

.tile .titulo {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 26px 28px;
  font-family: var(--display);
  font-size: clamp(20px, 2.1vw, 44px);
  line-height: 1;
  letter-spacing: .01em;
  text-transform: uppercase;
  background: linear-gradient(to top, rgba(0,0,0,.75), rgba(0,0,0,0));
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .3s ease, transform .3s ease;
  pointer-events: none;
}

@media (hover: hover) {
  .tile:hover .titulo { opacity: 1; transform: translateY(0); }
}

/* «Marca by Talento»: la marca manda, el crédito acompaña. */
.tile .titulo .marca { display: block; }

.tile .titulo .credito {
  display: block;
  margin-top: .42em;
  font-family: var(--texto);
  font-size: .34em;
  line-height: 1.15;
  letter-spacing: .18em;
  color: #cfcfcf;
}

/* Qué es la pieza y en qué punto está: «Short film», «Feature film · In
   development». Va en el azul de la casa —el único acento que tiene la web,
   el del logo y los enlaces—, no en gris: es la información que separa un
   trabajo terminado de uno que aún se está haciendo, y en gris pasaba
   desapercibida.
   El azul del logo, #2F60F6, sobre el degradado de los rótulos se queda en
   3,6 de contraste y a 11 px no se sostiene; aclarado a #4C77FF sube a 4,7. */
.tile .titulo .categoria {
  display: block;
  margin-top: .5em;
  font-family: var(--texto);
  font-size: .3em;
  line-height: 1.2;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--azul-claro, #4C77FF);
}

/* Las que no son trabajos cerrados: se miran, no se abren. El rótulo NO se
   muestra nunca — ni con ratón ni en móvil. Antes estaba dentro de
   @media (hover: hover), y como en una pantalla táctil no hay hover, la regla
   no llegaba a aplicarse y los títulos salían igual. */
.tile.no-clicable { cursor: default; }
.tile.no-clicable .titulo { display: none; }

@media (hover: hover) {
  .tile.no-clicable:hover video,
  .tile.no-clicable:hover .poster { filter: none; }
}

.tile .sin-video {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-size: 18px;
  color: #3a3a3a;
  text-transform: uppercase;
}

/* ---------- FRASES ENTRE SECCIONES ---------- */

/* Las frases flotan encima del vídeo, sin fondo propio. */
.frase {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6vw;
  text-align: center;
  pointer-events: none;
  /* Red de seguridad: site.js estira la fila para que la frase quepa, pero si
     una tipografía llega tarde y la medida cambia, antes se recorta que se
     derrame encima del bloque de abajo. */
  overflow: hidden;
}

.frase p {
  margin: 0;
  max-width: 22ch;
  transform: translateZ(0);
  font-family: var(--display);
  font-size: clamp(26px, 4.6vw, 104px);
  line-height: .96;
  letter-spacing: .005em;
  text-transform: uppercase;
  color: var(--blanco);
  text-shadow: 0 2px 24px rgba(0,0,0,.65), 0 0 80px rgba(0,0,0,.55);
}

.frase.sutil p {
  font-size: clamp(22px, 3.6vw, 78px);
  max-width: 26ch;
  opacity: .92;
}

/* ---------- FOOTER ---------- */

.footer {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  align-items: center;
  justify-content: space-between;
  padding: 42px 26px;
  font-size: 12px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #6a6a6a;
}

.footer a:hover { color: var(--blanco); }

/* ---------- EWHE — pieza tipográfica ---------- */

@font-face {
  font-family: 'Bodoni Moda';
  src: url('../fonts/bodoni.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Bodoni Moda';
  src: url('../fonts/bodoni-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

.ewhe-stage {
  --negro-sala:  #0B0A08;
  --marfil:      #F2EDE3;
  --marfil-bajo: #C6BFB1;
  --halo:        rgba(242,237,227,.045);

  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  isolation: isolate;
  background: var(--negro-sala);
  color: var(--marfil);
  font-family: "Bodoni Moda", "Bodoni MT", Didot, "Playfair Display", serif;
  overflow: hidden;
}

/* luz de proyector */
.ewhe-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 46% at 50% 46%, var(--halo), transparent 72%);
  pointer-events: none;
}

/* grano de película */
.ewhe-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='280' height='280'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23g)'/></svg>");
  opacity: .032;
  mix-blend-mode: screen;
  pointer-events: none;
}

/* La cartela usa la pantalla, no una columna en el medio: con el texto dentro
   necesita ancho o se lee como una caja encajonada. */
.ewhe {
  text-align: center;
  padding: clamp(60px, 12vh, 150px) 5vw;
  width: min(1560px, 100%);
  position: relative;
  z-index: 1;
}

.ewhe h2 {
  margin: 0;
  font-weight: 500;
  font-size: clamp(74px, 21vw, 300px);
  line-height: .9;
  letter-spacing: .045em;
  text-indent: .045em;      /* compensa el tracking para centrado óptico */
  text-transform: none;
  opacity: 0;
}

.ewhe p {
  margin: clamp(20px, 3.4vw, 44px) 0 0;
  font-weight: 400;
  font-size: clamp(10px, 1.5vw, 15px);
  color: var(--marfil-bajo);
  letter-spacing: clamp(.24em, 1.5vw, .44em);
  text-indent: clamp(.24em, 1.5vw, .44em);
  text-transform: uppercase;
  opacity: 0;
}

/* La entradilla. Va antes que el cuerpo y por encima de él en tamaño porque no
   es el discurso, es la señal de tráfico: dice que lo de arriba y lo de abajo
   son la misma casa antes de que la sigla haga pensar lo contrario. Centrada y
   de medida corta, como el título; el cuerpo, en cambio, va escalonado a la
   izquierda. Hereda versalitas y tracking del antetítulo: hay que reseteárselo. */
.ewhe .entrada {
  margin: clamp(34px, 5vw, 76px) 0 0;
  width: 100%;
}

.ewhe .entrada p {
  margin: 0 auto;
  max-width: 30ch;
  font-family: "Bodoni Moda", "Bodoni MT", Didot, serif;
  font-weight: 400;
  font-size: clamp(19px, 2.15vw, 36px);
  line-height: 1.38;
  letter-spacing: 0;
  text-indent: 0;
  text-transform: none;
  color: var(--marfil);
  opacity: 0;
}

/* La segunda línea es la que nombra la sigla, así que respira aparte: dos
   golpes, no un párrafo de dos frases. */
.ewhe .entrada p + p { margin-top: clamp(14px, 1.8vw, 28px); }

/* El texto del EWHE: el mismo que abre «What are we?». La cartela dejó de ser
   solo un monumento tipográfico el día que pasó a explicar la sección de cine
   y series que viene justo detrás. Hay que resetear lo que hereda del
   antetítulo de arriba —versalitas y tracking enorme—, que ahí es un rótulo y
   aquí sería ilegible. */
/* Los párrafos NO van en un bloque centrado ni en dos columnas: así quedaba
   una caja de texto encajonada en mitad de la pantalla. Van escalonados y
   ocupando el ancho, cada uno con su medida corta y su sangría, que es el
   mismo recurso que usan las páginas interiores. */
.ewhe .texto {
  margin: clamp(40px, 6vw, 96px) 0 0;
  width: 100%;
  text-align: left;
}

.ewhe .texto p {
  margin: 0 0 clamp(26px, 3.4vw, 62px);
  max-width: 42ch;
  font-family: "Bodoni Moda", "Bodoni MT", Didot, serif;
  font-weight: 400;
  font-size: clamp(18px, 1.95vw, 33px);
  line-height: 1.5;
  letter-spacing: 0;
  text-indent: 0;
  text-transform: none;
  color: var(--marfil-bajo);
  opacity: 0;
}

.ewhe .texto p:last-child { margin-bottom: 0; }

/* El escalonado: el primero a la izquierda, el segundo empujado a la derecha,
   el tercero descolgado hacia el centro. Nunca alineados. */
@media (min-width: 900px) {
  .ewhe .texto p:nth-child(1) { margin-right: auto; }
  .ewhe .texto p:nth-child(2) { margin-left: auto; margin-right: 0; text-align: right; }
  .ewhe .texto p:nth-child(3) { margin-left: clamp(40px, 14vw, 300px); margin-right: auto; }
  /* El primero, un punto más claro: es la definición del EWHE. */
  .ewhe .texto p:nth-child(1) { color: var(--marfil); }
}

@media (max-width: 899px) {
  .ewhe .texto p { max-width: none; }
}

/* La sigla de cierre: JFDI grande y su desarrollo debajo, en la de palo. */
.ewhe .remate {
  margin: clamp(48px, 7vw, 110px) 0 0;
  font-family: "Bodoni Moda", "Bodoni MT", Didot, serif;
  font-weight: 500;
  font-size: clamp(38px, 6.2vw, 120px);
  line-height: 1;
  letter-spacing: .01em;
  text-indent: 0;
  text-transform: none;
  color: var(--marfil);
  opacity: 0;
}

/* La flecha de la cartela. Va en marfil apagado y respira despacio: baja seis
   píxeles y vuelve, cinco segundos por ciclo. Nada de rebotes ni de iconos de
   interfaz — es un signo tipográfico más, y lo único que se mueve solo en toda
   la pieza. */
.ewhe .flecha {
  margin: clamp(46px, 7vw, 104px) auto 0;
  width: clamp(28px, 3.1vw, 52px);
  color: var(--marfil-bajo);
  opacity: 0;
}

.ewhe .flecha svg {
  display: block;
  width: 100%;
  height: auto;
}

@keyframes ewhe-respira {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}

.ewhe .remate .expande {
  display: block;
  margin-top: 1.4em;
  font-family: "Jost", Futura, "Century Gothic", "Avenir Next", sans-serif;
  font-weight: 400;
  font-size: .13em;
  line-height: 1.2;
  letter-spacing: .34em;
  text-indent: .34em;
  text-transform: uppercase;
  color: var(--marfil-bajo);
}

/* el único punto de la pieza: el happy ending llega al final */
.ewhe p .fin {
  display: inline-block;
  color: var(--marfil);
  opacity: 0;
}

/* la compañía firma desde la puerta: señalética, no liturgia */
.ewhe-stage .firma {
  position: absolute;
  left: 0; right: 0;
  bottom: clamp(28px, 5.5vh, 52px);
  margin: 0;
  text-align: center;
  font-family: "Jost", Futura, "Century Gothic", "Avenir Next", sans-serif;
  font-weight: 400;
  font-size: clamp(10px, .95vw, 12px);
  letter-spacing: clamp(.5em, 1vw, .72em);
  text-indent: clamp(.5em, 1vw, .72em);
  text-transform: uppercase;
  color: rgba(198,191,177,.6);
  z-index: 1;
  opacity: 0;
}

/* Las animaciones arrancan cuando la pieza entra en pantalla.
   La coreografía va comprimida a propósito: antes el último elemento no
   aparecía hasta los 3,6 s y quien pasaba de largo con el scroll no llegaba a
   leer nada. Con el texto dentro eso ya no vale — el texto es el motivo de la
   cartela, no su remate. Ahora está todo puesto en 2,3 s, y el punto del
   «happy ending» sigue llegando casi al final, que era su gracia. */
/* Toda la coreografía cabe ahora en un segundo escaso. Antes se estiraba
   hasta los 2,4 s y con el scroll normal te la perdías entera: entrabas, la
   cartela aún estaba montándose y ya la habías pasado. */
.ewhe-stage.visible .ewhe h2 { animation: ewhe-focus .62s cubic-bezier(.22,.61,.36,1) both; }
.ewhe-stage.visible .ewhe p { animation: ewhe-rise .48s .2s cubic-bezier(.22,.61,.36,1) both; }
.ewhe-stage.visible .ewhe .entrada p { animation: ewhe-rise .48s .30s cubic-bezier(.22,.61,.36,1) both; }
.ewhe-stage.visible .ewhe .entrada p + p { animation-delay: .40s; }
.ewhe-stage.visible .ewhe .texto p { animation: ewhe-rise .48s .54s cubic-bezier(.22,.61,.36,1) both; }
.ewhe-stage.visible .ewhe .texto p + p { animation-delay: .62s; }
.ewhe-stage.visible .ewhe .texto p + p + p { animation-delay: .70s; }
.ewhe-stage.visible .ewhe p .fin { animation: ewhe-punto .34s .46s cubic-bezier(.34,1.4,.64,1) both; }
.ewhe-stage.visible .ewhe .remate { animation: ewhe-rise .48s .86s cubic-bezier(.22,.61,.36,1) both; }
.ewhe-stage.visible .firma { animation: ewhe-rise .48s 1.02s cubic-bezier(.22,.61,.36,1) both; }
/* La flecha es lo último en llegar y lo único que no se queda quieto: entra y
   se pone a respirar, cinco segundos por ciclo. */
.ewhe-stage.visible .ewhe .flecha {
  animation:
    ewhe-rise .5s .96s cubic-bezier(.22,.61,.36,1) both,
    ewhe-respira 5s 1.5s cubic-bezier(.45,0,.55,1) infinite;
}

@keyframes ewhe-focus {
  from { opacity: 0; filter: blur(12px); transform: scale(.985); }
  to   { opacity: 1; filter: blur(0);    transform: scale(1); }
}

@keyframes ewhe-rise {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes ewhe-punto {
  from { opacity: 0; transform: scale(.2); }
  to   { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .ewhe-stage .ewhe h2,
  .ewhe-stage .ewhe p,
  .ewhe-stage .ewhe p .fin,
  .ewhe-stage .ewhe .entrada p,
  .ewhe-stage .ewhe .texto p,
  .ewhe-stage .ewhe .remate,
  .ewhe-stage .firma { animation: none; opacity: 1; }
}

/* ---------- CARRUSEL DE PÁGINAS ---------- */

.carrusel-seccion {
  position: relative;
  padding: 0;
  --alto-slide: clamp(340px, 54vh, 680px);
}

/* el rótulo flota sobre las páginas, sin banda negra */
.carrusel-cab {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 6;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 18px;
  padding: 20px 26px;
  pointer-events: none;
  text-shadow: 0 2px 18px rgba(0,0,0,.75), 0 0 60px rgba(0,0,0,.6);
}

.carrusel-cab h2 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(26px, 3.4vw, 68px);
  line-height: 1;
  letter-spacing: .005em;
  text-transform: uppercase;
}

/* Qué es la película: en caja baja y algo más grande, para que se lea como
   una frase y no como una etiqueta. */
.carrusel-cab .desc {
  font-family: var(--texto);
  font-size: 14px;
  letter-spacing: .04em;
  text-transform: none;
  color: #e0e0e0;
}

/* Y en qué punto está: la ficha, en el azul de la casa. Mismo registro que la
   categoría bajo los rótulos del mosaico. */
.carrusel-cab .estado {
  font-family: var(--texto);
  font-size: 12px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--azul-claro);
}

/* Cualquier otro span del encabezado, por si queda alguno de antes. */
.carrusel-cab span {
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #d6d6d6;
}

.carrusel { position: relative; }

.carrusel-pista {
  display: flex;
  gap: 0;
  padding: 0;
  font-size: 0;
  line-height: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.carrusel-pista::-webkit-scrollbar { display: none; }
.carrusel-pista.arrastrando { cursor: grabbing; scroll-snap-type: none; }
/* Mientras la flecha desliza hay que soltar el imán del snap o el scroll se
   reengancha a la página más cercana y el salto se queda a medias. */
.carrusel-pista.saltando { scroll-snap-type: none; }

.carrusel-pista img {
  flex: 0 0 auto;
  height: var(--alto-slide);
  width: auto;
  display: block;
  margin-right: -1px;   /* sin hueco entre páginas */
  background: #0b0b0b;
  scroll-snap-align: center;
  cursor: pointer;
  user-select: none;
  -webkit-user-drag: none;
  transition: filter .3s ease;
}

.carrusel-pista img:hover { filter: brightness(1.12); }

/* Por encima de la tira pase lo que pase: el :hover de las páginas mete un
   filter, y un filter crea contexto de apilado. Sin z-index el botón podía
   quedarse debajo justo cuando el puntero está encima, que es siempre. */
.carrusel .flecha {
  position: absolute;
  z-index: 3;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 50%;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  color: var(--blanco);
  font-family: var(--display);
  font-size: 30px;
  line-height: 0;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}

.carrusel .flecha:hover { background: var(--azul); }
.carrusel .flecha.izq { left: 14px; }
.carrusel .flecha.der { right: 14px; }

/* ---------- LIGHTBOX ---------- */

.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.96);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 200;
}

.lightbox.abierto { display: flex; }

.lightbox video {
  width: 92vw;
  height: auto;
  max-width: 92vw;
  max-height: 84vh;
  outline: none;
  background: #000;
}

.lightbox .cerrar {
  position: absolute;
  top: 18px; right: 26px;
  font-family: var(--display);
  font-size: 30px;
  color: var(--blanco);
  cursor: pointer;
  line-height: 1;
  background: none;
  border: 0;
  padding: 8px 12px;
}

.lightbox .cerrar:hover { color: var(--azul); }

.lightbox img {
  max-width: 92vw;
  max-height: 88vh;
  width: auto;
  height: auto;
  display: block;
}

/* ---------- el cartel de una película ----------
   Una película que aún no tiene imágenes que enseñar: se ve el cartel y, al
   abrirlo, solo el logline. El fondo es el marfil del propio cartel, para que
   el papel se coma la pantalla y no parezca una imagen pegada sobre negro. */

/* A SANGRE, como todo lo demás. Un cartel es vertical y la pantalla es
   apaisada, así que llenarla con la imagen obligaría a recortarle el título y
   los créditos. La solución es al revés: el que va a sangre es EL PAPEL. El
   bloque se pinta del crema exacto del cartel (#F4EEE3, medido del archivo),
   ocupa el ancho entero y el cartel se apoya encima. Ni un marco negro. */
/* LA FILA DE CARTELES: las películas que aún no tienen imágenes que enseñar,
   una al lado de otra. Cada una se pinta del color de su propio papel, así que
   la fila son paneles de colores distintos pegados a hueso — sin negro entre
   medias, como el resto de la web. Va a ir creciendo: el ancho se reparte
   solo entre los que haya. */
.cartel-seccion {
  width: 100%;
  padding: 0;
  display: flex;
  align-items: stretch;
}

.cartel {
  --papel: #F4EEE3;
  --tinta: #474039;
  position: relative;
  cursor: pointer;
  flex: 1 1 0;
  min-width: 0;
  margin-right: -1px;          /* sin línea entre panel y panel */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 0;
  background: var(--papel);
  padding: clamp(30px, 6vh, 84px) 3vw clamp(26px, 5vh, 64px);
  transition: transform .5s cubic-bezier(.22,.61,.36,1);
}

.cartel:last-child { margin-right: 0; }

.cartel img {
  display: block;
  height: var(--alto-cartel, clamp(320px, 74vh, 900px));
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

/* Con uno solo, el cartel se queda centrado y no se estira a media pantalla. */
.cartel-seccion[data-cuantos="1"] { justify-content: center; }
.cartel-seccion[data-cuantos="1"] .cartel { flex: 0 1 auto; padding-inline: 4.2vw; }

/* Qué es la película, en caja baja: se lee como una frase. */
.cartel-desc {
  display: block;
  margin-top: 26px;
  text-align: center;
  font-family: var(--texto);
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: .04em;
  color: var(--tinta);
  opacity: .88;
}

/* Y en qué punto está: la ficha. El azul cambia con el papel: sobre el crema
   va el del logo —da 4,4 de contraste y el aclarado bajaría a 3,4—, y sobre
   un papel oscuro, al revés. Lo decide cada cartel en config.js. */
.cartel-pie {
  display: block;
  margin-top: 9px;
  text-align: center;
  font-family: var(--texto);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--ficha, var(--azul));
  transition: opacity .4s ease;
}

@media (hover: hover) {
  .cartel:hover img { transform: translateY(-6px); }
  .cartel:hover .cartel-pie { opacity: .7; }
}

.cartel img { transition: transform .5s cubic-bezier(.22,.61,.36,1); }

/* En vertical los paneles se apilan: dos carteles al 50 % en un móvil no se
   ven, y en un cartel lo único que importa es que se lea el título. */
@media (max-width: 900px) {
  .cartel-seccion { flex-direction: column; }
  .cartel { margin: 0 0 -1px; padding: clamp(26px, 5vh, 60px) 8vw; }
  .cartel:last-child { margin-bottom: 0; }
  .cartel img { height: auto; width: 100%; max-height: 78vh; }
}

/* Abierto: el cartel a la izquierda y el logline al lado. En vertical se
   apilan. El logline va en Bodoni, como los titulares de las interiores. */
.lightbox.modo-cartel {
  gap: clamp(24px, 4.5vw, 84px);
  padding: 5vh 5vw;
  flex-wrap: wrap;
}

.lightbox.modo-cartel img {
  max-height: 84vh;
  max-width: 44vw;
}

.lightbox .lb-texto {
  display: none;
  margin: 0;
  max-width: 34ch;
  font-family: "Bodoni Moda", "Bodoni MT", Didot, serif;
  font-weight: 400;
  font-size: clamp(17px, 1.5vw, 27px);
  line-height: 1.55;
  color: #e6e1d7;
}

.lightbox.modo-cartel .lb-texto { display: block; }

/* El logline puede venir en varios párrafos. */
.lightbox .lb-texto p { margin: 0 0 1.1em; }
.lightbox .lb-texto p:last-child { margin-bottom: 0; }

/* Y la línea de cierre —«Two actors. One location.»— va aparte: pequeña,
   tracada y en el azul de la casa. Es un sello, no una frase más. */
.lightbox .lb-texto .lb-nota {
  margin-top: clamp(20px, 2.4vw, 40px);
  font-family: var(--texto);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--azul-claro);
}

/* ---------- la ficha de un cartel con galería ----------
   El visor cambia de contenido —cartel, episodio, mood board, teaser— y el
   logline no se mueve: es lo que hay que leer, no puede irse al pasar página.
   Las miniaturas van agrupadas debajo, con su rótulo. */

.lightbox .lb-ficha {
  display: none;
  max-width: 40ch;
  max-height: 86vh;
  overflow-y: auto;
  scrollbar-width: none;
}
.lightbox .lb-ficha::-webkit-scrollbar { display: none; }
.lightbox.modo-cartel .lb-ficha { display: block; }

.lightbox .lb-tiras { margin-top: clamp(24px, 3vw, 46px); }

.lightbox .lb-grupo { margin-bottom: clamp(18px, 2vw, 32px); }

.lightbox .lb-grupo-titulo {
  display: block;
  margin-bottom: 10px;
  font-family: var(--texto);
  font-size: 10px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(255,255,255,.42);
}

.lightbox .lb-miniaturas {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.lightbox .lb-mini {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  line-height: 0;
  opacity: .5;
  position: relative;
  transition: opacity .25s ease;
}

.lightbox .lb-mini img {
  display: block;
  height: 62px;
  width: auto;
  max-width: 120px;
  object-fit: cover;
}

.lightbox .lb-mini:hover,
.lightbox .lb-mini.activa { opacity: 1; }

.lightbox .lb-mini.activa::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -5px;
  height: 2px;
  background: var(--azul-claro);
}

/* La del teaser lleva su marca, para que se sepa que es vídeo. */
.lightbox .lb-mini.es-video::before {
  content: "▶";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: #fff;
  text-shadow: 0 1px 10px rgba(0,0,0,.9);
  pointer-events: none;
}

/* Con galería, el visor manda: la ficha se queda estrecha al lado. */
.lightbox.modo-cartel video {
  max-width: 52vw;
  max-height: 82vh;
  width: auto;
  display: block;
}

@media (max-width: 900px) {
  .lightbox .lb-ficha { max-width: none; max-height: none; }
  .lightbox .lb-mini img { height: 48px; }
  .lightbox.modo-cartel video { max-width: 84vw; }
}

/* Con el cartel, el rótulo de abajo es el antetítulo de la película, no un
   contador de páginas: se coloca encima del logline y no flotando al pie. */
.lightbox.modo-cartel .lb-titulo {
  position: static;
  transform: none;
  max-width: 34ch;
  margin: 0 0 clamp(14px, 1.6vw, 26px);
  text-align: left;
}

@media (max-width: 900px) {
  .lightbox.modo-cartel { flex-direction: column; padding: 4vh 6vw; }
  .lightbox.modo-cartel img { max-width: 84vw; max-height: 56vh; }
  .lightbox .lb-texto { max-width: none; }
  .lightbox.modo-cartel .lb-titulo { text-align: center; }
  .lightbox.modo-cartel .lb-texto { text-align: center; }
}

.lightbox .lb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  color: var(--blanco);
  font-family: var(--display);
  font-size: 34px;
  line-height: 0;
  cursor: pointer;
  transition: background .2s ease;
}

.lightbox .lb-nav:hover { background: var(--azul); }
.lightbox .lb-anterior { left: 22px; }
.lightbox .lb-siguiente { right: 22px; }

.lightbox .lb-titulo {
  position: absolute;
  left: 26px; bottom: 22px;
  font-family: var(--display);
  font-size: clamp(18px, 2vw, 34px);
  text-transform: uppercase;
  color: var(--blanco);
}

/* ---------- AVISO CARPETA VACÍA ---------- */

.aviso {
  padding: calc(var(--alto-header) + 16vh) 6vw 16vh;
  max-width: 900px;
}

.aviso h1 {
  font-family: var(--display);
  font-size: clamp(34px, 5vw, 86px);
  line-height: .95;
  text-transform: uppercase;
  margin: 0 0 .6em;
}

.aviso p { color: #cfcfcf; line-height: 1.7; max-width: 60ch; }
.aviso code {
  font-family: ui-monospace, Menlo, monospace;
  background: #121212;
  color: #9ec1ff;
  padding: 2px 7px;
  border-radius: 3px;
}

/* ==========================================================
   PÁGINAS INTERIORES — contact.html y wtf.html
   Cada una es un archivo suelto que reusa esta hoja. El mosaico no
   existe ahí, así que sus reglas simplemente no se aplican.
   ========================================================== */

.pagina {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  position: relative;
  isolation: isolate;
}

/* El fondo: un fotograma fijo, o el bucle tipográfico. Siempre detrás. */
.fondo {
  position: fixed;
  inset: 0;
  z-index: -2;
  background: #050505 center/cover no-repeat;
  overflow: hidden;
}

/* Velo para que el texto se lea sin apagar la imagen. */
.fondo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.34) 34%, rgba(0,0,0,.88) 100%),
    linear-gradient(90deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,0) 62%);
}

/* Grano, el mismo lenguaje que la pieza EWHE. */
.fondo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='280' height='280'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23g)'/></svg>");
  opacity: .05;
  mix-blend-mode: screen;
  pointer-events: none;
}

.pagina main {
  flex: 1;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

.pagina h1 {
  margin: 0;
  font-family: "Bodoni Moda", "Bodoni MT", Didot, serif;
  font-weight: 500;
  font-size: clamp(46px, 8.4vw, 240px);
  line-height: .86;
  letter-spacing: -.012em;
  text-transform: uppercase;
}

.pagina .entradilla {
  margin: 26px 0 0;
  max-width: 30ch;
  font-family: var(--display);
  font-size: clamp(17px, 2.1vw, 27px);
  line-height: 1.16;
  text-transform: uppercase;
  color: #d8d8d8;
}

/* Dos columnas: el texto a la izquierda, los datos a la derecha. */
.pagina .cuerpo {
  margin-top: clamp(38px, 7vh, 86px);
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 76px);
  align-items: start;
}

.pagina .cuerpo p {
  margin: 0 0 1.15em;
  max-width: 62ch;
  font-size: 16px;
  line-height: 1.72;
  color: #cfcfcf;
}

.pagina .cuerpo p:last-child { margin-bottom: 0; }

.pagina .rotulo {
  margin: 0 0 14px;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #7a7a7a;
}

/* ---------- fondo de vídeo movido por el scroll ----------
   El vídeo no se reproduce: el scroll es su línea de tiempo. Cada acto ocupa
   una pantalla, así que hay recorrido de sobra para verlo entero. */

.fondo video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pagina-scrub main {
  max-width: none;
  padding: 0;
}

/* ==========================================================
   «WHAT ARE WE?» — las piezas maquetadas con el texto

   Las 19 que no se abren no van de fondo: se intercalan entre los actos como
   en una revista. Bandas a sangre, pares desnivelados, cuadrados echados a un
   lado, tríos irregulares y escenas que se quedan pegadas mientras el scroll
   las recorre. El ritmo lo manda config.js -> wtf.ritmo, para poder
   recomponer la página sin tocar una línea de código.
   ========================================================== */

/* CERO NEGRO, igual que el mosaico del home: sin huecos entre piezas, sin
   márgenes entre bloques y a sangre de lado a lado. Las piezas se solapan un
   píxel para que no asome una línea de fondo entre dos vídeos.
   La variedad no la dan los espacios en blanco —eso dejaba la página llena de
   agujeros negros—, la dan las alturas y las proporciones, como en el home. */
/* Sin margen negativo: los bloques son hermanos de los actos y cuelgan de
   <main>, que no tiene padding, así que ya van de borde a borde. Sacarlos
   4,2vw a cada lado —el padding lo lleva .acto, no main— provocaba scroll
   horizontal. */
.tira {
  position: relative;
  /* Explícito y por debajo del texto. El acto va a z-index 6 y las tiras
     muerden su caja con márgenes negativos: si el orden de pintado queda al
     azar, la imagen se dibuja encima y se come las letras del borde. Y como
     el texto además flota al scrollear, antes o después acaba metiéndose en
     la imagen — tiene que hacerlo POR DELANTE, no por detrás. */
  z-index: 1;
  display: flex;
  align-items: stretch;
  gap: 0;
  margin: 0;
}

.tira .pieza {
  position: relative;
  overflow: hidden;
  background: #060607;
  flex: 1 1 0;
  min-width: 0;
  margin-right: -1px;
}

.tira .pieza:last-child { margin-right: 0; }

.tira .pieza video {
  position: absolute;
  inset: auto;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Cada pieza con su propia densidad, repartida por paginas.js en --sombra.
   Con todas al mismo velo, diecinueve piezas distintas se leían como un solo
   gris plano; así unas se hunden y otras asoman. */
.tira .pieza::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(3, 3, 4, var(--sombra, .18));
  pointer-events: none;
}

/* Quedan de cuando los bloques llevaban aire alrededor. Ya no hacen nada:
   todo va a sangre y las piezas llenan el ancho. Se dejan para que un config
   antiguo no rompa nada. */
.tira.sangra, .tira.izquierda, .tira.derecha { }
.tira .pieza.baja { margin-top: 0; }

/* ---------- el bloque que aloja un acto ----------
   Se acabaron las páginas negras: el texto va escrito encima del vídeo. El
   bloque crece con el texto —el alto es un mínimo, no una medida— y la pieza
   se estira detrás para llenarlo, así que nunca se desborda.

   El velo NO es plano: claro arriba, donde flota el folio sobre imagen viva,
   y muy oscuro de la mitad para abajo, donde hay 240 palabras que hay que
   poder leer. Es el trato: los titulares flotan, el cuerpo se lee. */

.tira.aloja {
  display: block;
  position: relative;
  min-height: var(--alto-aloja, 150vh);
}

.tira.aloja .pieza {
  position: absolute;
  inset: 0;
  height: auto;
  margin: 0;
}

/* EL NEGRO NO ENCAPSULA. La tentación es meter un panel oscuro detrás del
   texto, y entonces vuelve la caja. Aquí el negro es un campo sin bordes:
   entra desvanecido por arriba —de modo que el folio flota sobre imagen
   viva—, se cierra casi del todo donde hay que leer, y sale desvanecido por
   abajo hacia la tira siguiente. En ningún punto se ve un canto.

   Encima, una mancha ovalada muy difuminada justo detrás de la columna de
   texto: da el contraste que faltaba y no tiene contorno que delate. */
.tira.aloja .pieza::after {
  background:
    radial-gradient(88% 44% at 28% 56%, rgba(2,2,3,.68) 0%, rgba(2,2,3,0) 74%),
    linear-gradient(180deg,
      rgba(2,2,3,0)    0%,
      rgba(2,2,3,.52) 13%,
      rgba(2,2,3,.87) 30%,
      rgba(2,2,3,.90) 76%,
      rgba(2,2,3,.44) 100%);
}

/* El acto va en el flujo dentro del bloque: es lo que le da la altura. */
.tira.aloja > .acto {
  position: relative;
  z-index: 4;
  margin: 0;
  min-height: var(--alto-aloja, 150vh);
}

/* Sin la penumbra de borde de las tiras normales: aquí el degradado ya hace
   ese trabajo, y sumar las dos dejaba el centro apagado. */
.tira.aloja::after { display: none; }

/* Y el texto, un punto más claro que en las páginas negras: sobre imagen, el
   mismo gris se hunde. Nada de sombras en la tipografía grande —a ese cuerpo
   el halo se lee como una copia desplazada—; el contraste lo pone el velo. */
.tira.aloja .columnas p { color: #eceae6; }
.tira.aloja .folio { -webkit-text-stroke-color: rgba(255,255,255,.62); }

/* ---------- mensajes sueltos ----------
   Frases grandes que flotan sobre la imagen sin pertenecer a ningún acto.
   Antes eran los cierres de 01 y 02 y él los quiso libres, repartidos por el
   scroll. Van en Bodoni, como los titulares de las interiores, y su tira
   lleva un velo más cerrado para que se lean. */

.tira.con-mensaje .pieza::after {
  background:
    radial-gradient(78% 62% at 50% 50%, rgba(2,2,3,.62) 0%, rgba(2,2,3,0) 76%),
    rgba(2, 2, 3, .34);
}

.tira .mensaje {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6vw;
  text-align: center;
  pointer-events: none;
  overflow: hidden;
}

/* «Casi parada»: la frase se clava en pantalla y deja que la imagen le pase
   por detrás. Es lo más lento que puede ir — con parallax no se llega ahí,
   por mucho que se baje el factor, porque el parallax solo frena, no detiene.
   La tira tiene que ser más alta que la ventana para que haya recorrido. */
.tira.quieto .mensaje {
  align-items: flex-start;
}

.tira.quieto .mensaje .clavado {
  position: sticky;
  top: 34vh;
}

/* La salida viaja dentro del mensaje, debajo de la frase: la frase afirma y
   el botón es la prueba. Hay que devolverle el clic, porque la caja del
   mensaje lo tiene desactivado para no estorbar al vídeo de debajo. */
.tira .mensaje .salida {
  position: static;
  width: auto;
  padding: 0;
  margin-top: clamp(26px, 4vh, 62px);
  pointer-events: auto;
}

.tira .mensaje .salida .volver {
  font-size: 13px;
  letter-spacing: .3em;
}

.tira .mensaje p {
  margin: 0;
  max-width: 18ch;
  font-family: "Bodoni Moda", "Bodoni MT", Didot, serif;
  font-weight: 500;
  font-size: clamp(34px, 6.4vw, 168px);
  line-height: .9;
  letter-spacing: -.012em;
  text-transform: uppercase;
  color: #fff;
}

/* ---------- el texto muerde la imagen ----------
   Los actos se meten un poco en la tira de arriba y dejan que la de abajo
   suba sobre ellos. Eso, con la flotación del scroll, es lo que hace que la
   página se lea como una revista y no como bloques apilados. */
/* Por encima de las tiras, siempre. Las tiras muerden el acto con márgenes
   negativos, y el velo de cada pieza va a z-index 3: con el acto en 2, la
   imagen se pintaba ENCIMA del texto y se comía las letras de los bordes.
   Parecía falta de sitio y era orden de pintado. */
.revista .acto {
  position: relative;
  z-index: 6;
}

.revista .tira + .acto { margin-top: -16vh; }
.revista .acto + .tira { margin-top: -12vh; }

/* Y para que el texto no caiga sobre un fotograma claro justo en el borde,
   cada tira lleva su penumbra arriba y abajo. No es una banda negra: el
   centro de la imagen se queda limpio. */
.tira:not(.escena)::after,
.tira.escena .pegado::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(4,4,5,.66) 0%, rgba(4,4,5,0) 20%),
    linear-gradient(0deg,   rgba(4,4,5,.66) 0%, rgba(4,4,5,0) 20%);
}

/* ---------- la escena: se queda pegada y el scroll la recorre ----------
   El tramo mide más que la ventana; dentro, la pieza se pega arriba y su
   línea de tiempo es el recorrido de ese tramo, no el de la página. Cuando se
   agota, la escena se despega y sigues bajando a lo que hay debajo. */

.tira.escena {
  display: block;
  height: var(--recorrido, 230vh);
}

.tira.escena .pegado {
  position: sticky;
  top: 0;
  height: 100vh;
  height: var(--alto-escena, 100dvh);
  overflow: hidden;
}

/* El título vive DENTRO de la escena y sube por encima del plano mientras
   éste avanza: el mismo scroll mueve las dos cosas.
   Empieza justo donde acaba el vídeo anclado, sea cual sea su altura, y desde
   ahí trepa sobre él. Al no estar en el flujo, nada de lo que viene después se
   mueve de su sitio, que era el fallo de la versión con margen negativo:
   arrastraba la página entera y los bloques siguientes acababan tapando el
   plano mientras seguía anclado. */
.tira.escena > .acto.sobre-escena {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--alto-escena, 100dvh);
  z-index: 4;
  padding-top: 0;
  padding-bottom: 0;
  min-height: auto;
}

.tira.escena .pieza {
  position: absolute;
  inset: 0;
  height: 100%;
}

@media (max-width: 900px) {
  /* En vertical los pares y los tríos se apilan, pero siguen sin dejar negro:
     cada pieza a todo el ancho y pegada a la de arriba. */
  .tira { flex-direction: column; margin: 0; }
  .tira .pieza { width: 100% !important; flex: none; margin: 0 0 -1px; }
  .tira .pieza:last-child { margin-bottom: 0; }
  .tira.escena { height: var(--recorrido-movil, 170vh); }
}

/* Cada acto es un tramo de scroll, no una pantalla completa: a 100vh con el
   contenido centrado quedaba media pantalla vacía entre el final de un bloque
   y el principio del siguiente. A 82vh y con menos aire arriba y abajo, el
   hueco se reduce a la mitad y sigue habiendo recorrido de sobra para el
   vídeo del fondo. */
/* El aire de arriba y de abajo no es decorativo: las tiras de imagen muerden
   16vh por arriba y 12vh por abajo, y si el relleno no da para tanto, lo que
   se come la imagen son las letras — el cierre aparecía cortado por la mitad
   con el vídeo pasando por encima. El relleno tiene que ser mayor que el
   mordisco. */
/* CADA ACTO CRECE CON SU TEXTO. Los tres tienen longitudes muy distintas
   —151, 100 y 126 palabras—, así que un alto mínimo grande e igual para todos
   no ensancha el largo y deja a los cortos flotando en un campo negro vacío.
   El mínimo se queda bajo y el aire lo da el relleno, que sí es proporcional
   a lo que hay dentro. */
.acto {
  min-height: 70vh;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: none;
  padding: calc(var(--alto-header) + 11vh) 7vw 17vh;
}

/* La portada la mide su contenido, no la pantalla: forzarla a 100vh dejaba
   medio visor vacío entre el final del sumario y el folio siguiente.
   Va por :first-of-type y no por :first-child porque delante puede haber una
   tira de imagen —la escena del pasillo abre la página— y entonces la portada
   dejaba de ser el primer hijo y perdía este trato. */
.acto:first-of-type {
  min-height: auto;
  align-items: flex-start;
  padding-top: calc(var(--alto-header) + 7vh);
  padding-bottom: 4vh;
}

.acto .dentro { width: 100%; }

/* ---------- velo de cabecera ----------
   Un oscurecido muy suave arriba, para que el logo azul y los botones blancos
   tengan siempre contra qué leerse. El desvanecimiento del texto no se hace
   aquí: lo hace paginas.js con una máscara, que sí llega al 0 % y no toca la
   imagen del fondo. */
.velo-alto {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: calc(var(--alto-header) + 6vh);
  z-index: 90;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(4,4,4,.62) 0%, rgba(4,4,4,.24) 48%, rgba(4,4,4,0) 100%);
}

/* La salida: el último respiro de la página, sobre negro y a todo lo ancho,
   después de la última imagen. */
.salida {
  position: relative;
  z-index: 6;
  width: 100%;
  padding: clamp(64px, 14vh, 190px) 4.2vw clamp(40px, 8vh, 110px);
}

.salida .volver { margin-top: 0; }

/* La vuelta al mosaico. No dice «home»: la home es el trabajo, y el trabajo
   es la prueba de que alguien estuvo buscando. */
.volver {
  display: inline-block;
  margin-top: clamp(46px, 9vh, 130px);
  font-family: var(--texto);
  font-size: clamp(13px, 1.05vw, 19px);
  line-height: 1.1;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #fff;
  transition: color .2s ease, padding-left .3s cubic-bezier(.2,.7,.2,1);
}

.volver::before {
  content: "← ";
  color: var(--azul);
}

.volver:hover { color: var(--azul); padding-left: .18em; }

.pista {
  position: absolute;
  left: 26px;
  bottom: 5vh;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: #8f8f8f;
}

.pista::after {
  content: "";
  width: 46px;
  height: 1px;
  background: currentColor;
  transform-origin: left center;
  animation: pista-tira 2.4s ease-in-out infinite;
}

@keyframes pista-tira {
  0%, 100% { transform: scaleX(.35); opacity: .45; }
  50%      { transform: scaleX(1);   opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .pista::after { animation: none; }
}

/* ---------- maquetación de revista ----------
   Tres tipografías, cada una con su papel: Anton para los titulares, Bodoni
   para los destacados y la Helvetica del sitio para leer. El cuerpo va grande
   a propósito: esto es una página de lectura, no un pie de foto. */

/* Cuando el main es de revista, la caja la ponen los actos: si no, se suman
   dos anchos máximos y dos paddings y el texto acaba en una columna estrecha. */
.pagina main.revista { max-width: none; padding: 0; }

/* Sin ancho máximo: la página ocupa el navegador entero y los márgenes van en
   vw, así que se ensancha y se encoge con la ventana. Antes había un tope de
   1320 px centrado y en un monitor grande el texto se quedaba en la mitad
   izquierda con medio navegador vacío al lado. */
.revista .acto {
  max-width: none;
  padding: calc(var(--alto-header) + 7vh) 4.2vw 8vh;
}

.revista .pista { left: 4.2vw; }

/* Retícula principal: lectura a la izquierda, datos en el margen. En cuanto
   hay sitio las dos crecen a la vez, sin tope. */
.reticula {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: clamp(28px, 4.5vw, 96px);
  align-items: start;
}

/* ---------- los datos, en tipografía ----------
   Nada de recuadros con borde: eso es una ficha técnica. Aquí el contacto se
   compone como la última página de una revista de moda — cuerpos muy distintos,
   sangrías desiguales y las dos familias mezcladas. Se lee de lejos. */

.contactos {
  margin-top: clamp(42px, 9vh, 130px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}

.contactos .linea {
  display: block;
  margin-left: var(--sangria, 0);
  line-height: .88;
  color: #fff;
  transition: color .2s ease;
}

.contactos .linea:hover { color: var(--azul); }

.contactos .correo {
  font-family: "Bodoni Moda", "Bodoni MT", Didot, serif;
  font-weight: 500;
  font-size: clamp(28px, 6.4vw, 210px);
  letter-spacing: -.014em;
  word-break: break-word;
}

.contactos .telefono {
  font-family: "Bodoni Moda", "Bodoni MT", Didot, serif;
  font-weight: 500;
  font-size: clamp(24px, 4vw, 130px);
  margin-top: .18em;
}

.contactos .sede {
  margin-top: clamp(24px, 4vh, 62px);
  margin-left: var(--sangria, 0);
  max-width: 100%;
}

.contactos .ciudad {
  display: block;
  font-family: "Bodoni Moda", "Bodoni MT", Didot, serif;
  font-weight: 500;
  font-size: clamp(40px, 9vw, 310px);
  line-height: .82;
  letter-spacing: -.016em;
  color: #fff;
}

.contactos .calle {
  display: block;
  margin-top: .9em;
  font-size: 12px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: #a5a5a5;
}

/* La segunda sede se va al otro lado: es lo que rompe la simetría. */
.contactos .a-la-derecha {
  align-self: flex-end;
  text-align: right;
  margin-left: 0;
  margin-right: var(--sangria, 0);
}

@media (max-width: 860px) {
  .contactos .a-la-derecha { align-self: flex-start; text-align: left; margin-right: 0; }
  .contactos .linea, .contactos .sede { margin-left: 0; }
}

/* Texto corto puesto grande: es como una revista llena el ancho cuando hay
   pocas palabras — con escala, no con relleno. */
.revista .lead p {
  font-size: clamp(22px, 2.2vw, 58px);
  line-height: 1.2;
  color: #f0f0f0;
  margin-bottom: .62em;
}

.revista .lead .capitular::first-letter { font-size: 3.4em; }

@media (max-width: 900px) {
  .reticula { grid-template-columns: 1fr; }
}

.revista .folio {
  display: block;
  font-family: "Bodoni Moda", "Bodoni MT", Didot, serif;
  font-weight: 500;
  font-size: clamp(58px, 8.6vw, 215px);
  line-height: .8;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,.42);
  margin-bottom: .22em;
}

/* Las siglas al lado del folio, mismo cuerpo y mismo trazo: se leen como una
   sola unidad gráfica, «01 EWHE», y el rótulo de debajo las desarrolla. */
.revista .folio .siglas { margin-left: .3em; }

.revista .rotulo {
  font-size: 12px;
  letter-spacing: .3em;
  color: #9a9a9a;
  margin-bottom: clamp(38px, 5.5vh, 84px);
}

/* El sumario. Tres registros distintos, no tres tamaños de lo mismo: el
   antetítulo en la de palo, el sumario en Bodoni y el titular arriba en Anton.
   Cuando todo iba en Anton parecía la misma frase impresa dos veces. */
.revista .plomo {
  margin: clamp(18px, 3vh, 46px) 0 clamp(34px, 6vh, 92px);
  max-width: 30ch;
  font-family: "Bodoni Moda", "Bodoni MT", Didot, serif;
  font-weight: 500;
  font-size: clamp(24px, 3.1vw, 92px);
  line-height: 1.06;
  letter-spacing: -.004em;
  text-transform: none;
  color: #fff;
}

/* Antetítulo: de palo, pequeño y muy espaciado. Hace de etiqueta. */
.revista .plomo .menor {
  display: block;
  font-family: var(--texto);
  font-weight: 400;
  font-size: clamp(11px, .82vw, 15px);
  line-height: 1.1;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: #a8a8a8;
  margin-bottom: 1.5em;
  margin-left: .25em;
}

/* Desplazada respecto a la línea de arriba: el escalón es lo que la desmadra.
   Cada línea puede llevar su propia sangría con --sangria. */
.revista .plomo .mayor {
  display: block;
  margin-left: var(--sangria, clamp(0px, 7vw, 190px));
}

/* La segunda frase entra más pequeña y más metida: hace de réplica, no de
   titular repetido. */
.revista .plomo .seguida {
  font-size: .58em;
  margin-top: .42em;
  color: #d4d4d4;
}

.revista p {
  font-size: clamp(18px, 1.3vw, 30px);
  line-height: 1.58;
  color: #dcdcdc;
  margin: 0 0 1.05em;
}

.revista p:last-child { margin-bottom: 0; }

/* Los grises del cuerpo no son todos el mismo. Con un único #dcdcdc de arriba
   abajo, la página entera se leía como una sola mancha; así cada acto tiene su
   temperatura y el manifiesto del final es el más claro de todos, que es donde
   hay que llegar. Va por nth-of-type de SECTION, para que no afecte a contact,
   donde los actos son div. */
/* OJO CON EL ÍNDICE: la portada ya no es hermana de los actos —vive dentro de
   la escena del pasillo—, así que los <section> que cuelgan de <main> son el
   01, el 02 y el 03. Cuando estas reglas apuntaban a 2, 3 y 4 iban todas
   corridas un puesto y el manifiesto se quedaba sin su gris.
   El «>» es para no alcanzar a la portada, que sigue siendo un .acto dentro
   de la escena. */
.revista > section.acto:nth-of-type(1) p { color: #f0f0f0; }   /* 01 el manifiesto */
.revista > section.acto:nth-of-type(2) p { color: #c7c7c7; }   /* 02 House rules */
.revista > section.acto:nth-of-type(3) p { color: #dcdcdc; }   /* 03 Plural */

/* Y el manifiesto, que es el que más pesa y el más largo, se lleva más campo
   negro alrededor. Los otros dos ya iban sobrados: con el mismo alto mínimo
   para todos, 02 y 03 quedaban nadando en negro. */
.revista > section.acto:nth-of-type(1) {
  padding-top: calc(var(--alto-header) + 20vh);
  padding-bottom: 30vh;
}

/* Dos columnas de lectura, como una doble página.
   El aire de arriba no es decorativo: el folio va a 215 px y pegado al cuerpo
   parecía que el titular era la primera línea del párrafo. Los márgenes
   adyacentes colapsan, así que esto no se suma al del rótulo. */
.revista .columnas {
  margin-top: clamp(46px, 7vh, 112px);
  column-count: 1;
  column-gap: clamp(26px, 3vw, 80px);
}

@media (min-width: 1000px) { .revista .columnas { column-count: 2; } }
@media (min-width: 2000px) { .revista .columnas { column-count: 3; } }

.revista .columnas p { break-inside: avoid-column; }

/* Texto corto: en dos columnas quedaría desequilibrado, así que va a una sola
   con medida de lectura. */
.revista .una-columna { max-width: 52ch; }

/* Capitular: la primera letra en Anton, encajada en tres líneas. */
.revista .capitular::first-letter {
  float: left;
  font-family: "Bodoni Moda", "Bodoni MT", Didot, serif;
  font-weight: 500;
  font-size: 4.2em;
  line-height: .78;
  padding: .06em .14em 0 0;
  color: #fff;
}

/* El destacado rompe la columna y se lee de lejos. */
.revista .destacado {
  margin: clamp(34px, 5vh, 62px) 0;
  max-width: 20ch;
  font-family: "Bodoni Moda", "Bodoni MT", Didot, serif;
  font-weight: 500;
  font-size: clamp(30px, 5.4vw, 158px);
  line-height: 1.0;
  letter-spacing: -.008em;
  color: #fff;
}

.revista .destacado.a-la-derecha { margin-left: auto; text-align: right; }

/* Una sigla como destacado: el desarrollo va debajo, en la de palo y pequeño,
   igual que el rótulo desarrolla el folio. */
.revista .destacado .expande {
  display: block;
  margin-top: 1.5em;
  font-family: var(--texto);
  font-weight: 400;
  font-size: .115em;
  line-height: 1.2;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: #a8a8a8;
}

/* El cierre, a tamaño de portada. Con el mismo aire por arriba que separa el
   folio del cuerpo: si no, remata el último párrafo en vez de cerrar el acto. */
.revista .cierre {
  margin: clamp(48px, 7vh, 116px) 0 0;
  font-family: "Bodoni Moda", "Bodoni MT", Didot, serif;
  font-weight: 500;
  font-size: clamp(40px, 7.4vw, 200px);
  line-height: .88;
  letter-spacing: -.012em;
  text-transform: uppercase;
  color: #fff;
}

@media (max-width: 860px) {
  .revista .columnas { column-count: 1; }
  .revista .destacado.a-la-derecha { text-align: left; margin-left: 0; }
  .revista p { font-size: 17px; }
}

/* ---------- el bucle: OUTLAND cayendo ---------- */

.cae {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.cae .col {
  position: absolute;
  top: 0;
  left: var(--x);
  display: flex;
  flex-direction: column;
  font-family: var(--display);
  font-size: var(--s);
  line-height: .92;
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #fff;
  opacity: var(--o);
  /* La lista va duplicada, así que bajar justo la mitad encadena sin costura. */
  animation: outland-cae var(--v) linear infinite;
  will-change: transform;
}

@keyframes outland-cae {
  from { transform: translateY(-50%); }
  to   { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .cae .col { animation: none; transform: translateY(-25%); }
}

@media (max-width: 860px) {
  .pagina .cuerpo { grid-template-columns: 1fr; }
  .pagina main { padding-top: calc(var(--alto-header) + 6vh); }
}

/* ---------- RESPONSIVE ---------- */

@media (max-width: 900px) {
  :root { --alto-fila: 34vw; --alto-header: 84px; }
  .logo img { height: 30px; }
  .nav { gap: 14px; padding-right: 16px; }
  .nav a { font-size: 15px; }
}

@media (max-width: 900px) {
  .carrusel-pista img { height: 62vh; }
  .carrusel .flecha { display: none; }
}

@media (max-width: 640px) {
  :root { --alto-fila: 64vw; }
  .carrusel-pista img { height: 58vh; }

  /* «What the f**k are we?» es largo: en un teléfono no cabe al lado del
     logo, así que encoge y se le deja partir en dos líneas. */
  :root { --alto-header: 76px; }
  .nav-izq { padding-left: 4.2vw; }
  .nav-der { padding-right: 4.2vw; }
  .nav a { font-size: 11px; line-height: 1.05; max-width: 7.5em; text-align: right; white-space: normal; }
  .logo img { height: 30px; }

  /* Las piezas pasan a columna, una debajo de otra. */
  .fila { flex-wrap: wrap; }
  .tile { flex: 1 1 100% !important; height: var(--alto-fila); }

  /* IMPRESCINDIBLE el !important: site.js le pone a cada fila un height
     en línea (calc(var(--alto-fila) * alto)), y un estilo en línea gana a
     la hoja de estilos. Sin esto la fila conserva la altura de escritorio
     mientras las piezas se apilan dentro, y se salen unas sobre otras. */
  .fila { height: auto !important; }

  /* La frase va en absoluto sobre la fila. Apilada, una fila puede medir
     tres pantallas y la frase quedaba flotando en mitad de la nada.
     Se la ata a la primera pieza, que es sobre la que debe leerse. */
  .frase {
    inset: 0 0 auto 0;
    height: var(--alto-fila);
  }

  .tile .titulo { opacity: 1; transform: none; font-size: 20px; padding: 18px; }
}