@font-face { font-family: 'Arimo'; src: url(texto-700.woff2) format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --pad: 12px; --gap: 12px; --lh: 12px;
  --c-bg: #fff; --c-cl: #000; --c-sub: rgba(0, 0, 0, .37);
  --t-1: .123s; --t-2: .234s; --t-3: .345s; --t-4: .456s; --t-5: .567s;
  --e: cubic-bezier(.86, 0, .14, 1);
  --h-header: 36px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; width: 100%; height: 100%; background: var(--c-bg); color: var(--c-cl); }
body {
  font: 700 10px/12px Arimo, Arial, 'Helvetica Neue', sans-serif; letter-spacing: .02em; font-feature-settings: 'tnum' 1;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-text-size-adjust: 100%;
  min-width: 320px; overflow: hidden; overscroll-behavior: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
}
a { color: inherit; text-decoration: none; cursor: pointer; }
button { font: inherit; letter-spacing: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; text-align: left; cursor: pointer; }
ul { list-style: none; margin: 0; padding: 0; }
p, h1 { margin: 0; font: inherit; }
p + p { margin-top: 12px; }
img, video { display: block; }
:focus { outline: none; }
:focus-visible { outline: 2px solid #000; outline-offset: -2px; box-shadow: inset 0 0 0 4px #fff; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.saltar { position: fixed; left: 0; top: -40px; z-index: 20000; padding: var(--pad); background: #fff; color: #000; }
.saltar:focus { top: 0; }


body:active::before {
  content: ''; position: fixed; inset: 0; z-index: 11111; pointer-events: none; isolation: isolate; contain: strict;
  -webkit-backdrop-filter: invert(1) hue-rotate(180deg) saturate(5); backdrop-filter: invert(1) hue-rotate(180deg) saturate(5);
  -webkit-mask-image: linear-gradient(#000 40%, #0000 60%); mask-image: linear-gradient(#000 40%, #0000 60%);
  -webkit-mask-size: 100% 400%; mask-size: 100% 400%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  animation: mascara 1.1725s linear infinite;
}
@keyframes mascara { 0%, to { -webkit-mask-position: 0 0; mask-position: 0 0; } 50% { -webkit-mask-position: 0 100%; mask-position: 0 100%; } }
@keyframes aparece { from { opacity: 0; } to { opacity: 1; } }


.app { position: fixed; inset: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); }

.cab {
  --n: 4; --h-thumb: 5vh; --h-about: 0px; --h-descr: 0px;
  position: relative; z-index: 10; display: grid; grid-template-rows: auto auto; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); align-content: start;
  height: calc(var(--h-header) + max(var(--h-descr), var(--h-about)) + var(--h-thumb));
  transition: height var(--t-3) var(--e);
  animation: aparece var(--t-3) ease-in .678s backwards;
}
.cab[data-ficha='true'] { --h-descr: var(--h2, 0px); }
.cab[data-taller='true'] { --h-about: calc(var(--h, 0px) + 30px + var(--filas, 3) * 12px); }
.cab :is(a, button):not(:hover) { color: var(--c-sub); transition: color var(--t-2); }
.cab :is(a, button):hover { transition: color 0s; color: var(--c-cl); }
.cab :is(a, button) :is(.serie__titulo, .serie__titulo + span) { color: var(--c-cl); }
.cab .serie__boton:not(:hover) .rotulo { color: var(--c-sub); }


.colecciones { grid-area: 1 / 1 / auto / -1; width: 100vw; height: var(--h-thumb); transition: height var(--t-3) var(--e); will-change: height; }
.tira__ventana { height: 100%; overflow: hidden; }
.tira__carril {
  display: flex; height: 100%; width: 200vw; margin: 0; padding: 0; transform-origin: 0 0; scale: .5; will-change: scale, transform;
  transition: scale var(--t-3) var(--e), transform .6s cubic-bezier(.22, 1, .36, 1); touch-action: pan-y; cursor: grab;
}
.tira__carril.arrastra { transition: scale var(--t-3) var(--e); cursor: grabbing; }
.tira__pieza { flex: none; min-width: 0; display: flex; }
.tira__pieza button { display: block; padding: 0; }
.mini { display: block; height: 10vh; aspect-ratio: 1.3129629629629629; background: rgba(128, 128, 128, .1); opacity: .4; transition: opacity .3s; position: relative; overflow: hidden; }
.mini img { width: 100%; height: 100%; object-fit: cover; }
.tira__pieza[data-activa='true'] .mini { opacity: 1; }
.tira__pieza:not([data-activa='true']) button:hover .mini { opacity: .75; }
.tira__pieza:not([data-activa='true']) button:not(:hover) .mini { transition: opacity var(--t-3) ease-in; }
@media (hover: hover) {
  .cab:has(.colecciones:hover) { --h-thumb: 10vh; }
  .cab:has(.colecciones:hover) .tira__carril { scale: 1; }
}
.cab[data-overlay='true'] { --h-thumb: 0vh !important; }


.serie {
  grid-area: 2 / 1; align-self: start; overflow: clip; height: calc(36px + var(--h-descr)); transition: height var(--t-3) var(--e); will-change: height;
  -webkit-mask-image: linear-gradient(to top, transparent, #000 var(--pad)); mask-image: linear-gradient(to top, transparent, #000 var(--pad));
}
.serie > * { width: 100%; padding: var(--pad); }
.serie__boton { display: grid; grid-template-columns: minmax(0, 1fr) 8ch auto; gap: var(--pad); }
.serie__titulo { display: block; white-space: nowrap; text-overflow: ellipsis; overflow: clip; width: 100%; }
.tiempo { width: 8ch; }
.rotulo { text-transform: uppercase; display: flex; }
.descripcion {
  display: grid; gap: 12px; max-height: 50vh; overflow: auto; opacity: 0; scrollbar-width: none; transition: opacity 0s var(--t-1) var(--e);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 var(--pad)); mask-image: linear-gradient(to bottom, transparent, #000 var(--pad));
}
.descripcion::-webkit-scrollbar { display: none; }
.cab[data-ficha='true'] .descripcion { opacity: 1; transition: opacity var(--t-3) var(--t-1) var(--e); }
.descripcion p { max-width: 80ch; }
.ficha { display: grid; grid-template-columns: auto 1fr; gap: 0 var(--gap); }
.ficha li { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; }
.ficha li > :first-child { max-width: 20ch; }


.info {
  grid-area: 2 / 4 / 3; display: grid; grid-template-rows: auto auto auto; grid-template-columns: 1fr auto auto auto; padding: calc(var(--pad) / 2);
  height: calc(36px + var(--h-about)); transition: height var(--t-3) var(--e); will-change: height; overflow: clip;
  -webkit-mask-image: linear-gradient(to top, transparent, #000 var(--pad)); mask-image: linear-gradient(to top, transparent, #000 var(--pad));
}
.info > :not(.taller):not(.sello) { padding: calc(var(--pad) / 2); padding-bottom: calc(var(--pad) * 1.5); height: calc(var(--pad) * 2 + 12px); text-transform: uppercase; grid-row: 1; }
.info > :nth-child(1) { grid-column: 1; }
.info > :nth-child(2) { grid-column: 2; }
.info > :nth-child(3) { grid-column: 3; }
.nav { display: flex; flex-wrap: nowrap; white-space: nowrap; gap: var(--pad); }
.nav a[aria-current='page'] { color: var(--c-cl) !important; }
.info h1 { color: var(--c-cl); }
.taller { grid-area: 2 / 1 / auto / -1; padding: calc(var(--pad) / 2); padding-bottom: var(--pad); margin-bottom: calc(var(--pad) / 2); opacity: 0; transition: opacity 0s var(--t-1) var(--e); }
.cab[data-taller='true'] .taller { opacity: 1; transition: opacity var(--t-3) var(--t-1) var(--e); }
.taller p { max-width: 80ch; }
.taller__enlaces { display: grid; margin-top: 12px; text-transform: uppercase; justify-items: start; }
.taller__aviso { display: block; min-height: 12px; margin-top: 12px; color: var(--c-sub); }
.sello { grid-column: 1 / -1; grid-row: 3; padding: 0 calc(var(--pad) / 2); display: grid; grid-template-columns: auto 1fr; gap: 0 var(--gap); text-transform: uppercase; }
.sello li { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; }
.sello li > :first-child { max-width: 20ch; }
.sello li > :last-child { color: var(--c-sub); }


.principal { position: relative; min-height: 0; animation: aparece var(--t-2) ease-in .456s backwards; transition: opacity var(--t-2) ease-in; }
.principal.sale { opacity: 0; }
.escena { --n: 4; position: relative; display: grid; width: 100%; height: 100%; cursor: grab; touch-action: pan-y; }
.escena:active { cursor: grabbing; }
.escena > * { grid-area: 1 / 1; width: 100%; height: 100%; }
.envoltorio { pointer-events: none; z-index: 0; }
.celdas, .rotulos { display: grid; grid-template-columns: repeat(var(--n), 1fr); grid-template-rows: repeat(var(--n), 1fr); }
.celdas { width: 100vw; height: 100%; }
.fig { position: relative; overflow: hidden; width: 100%; height: 100%; margin: 0; transform-origin: bottom; }
.fig:not([data-phase]) { opacity: 0; pointer-events: none; }
@keyframes entra { 0% { opacity: 0; } to { opacity: 1; } }
@keyframes sale { 0% { opacity: 1; } to { opacity: 0; } }
.fig[data-phase='exit'] { opacity: 1; background: #000; animation: sale .234s ease-out forwards; animation-delay: var(--retraso-inv, 0s); }
.fig[data-phase='placeholder'] { opacity: 0; background: #000; animation: entra .234s ease-in forwards; animation-delay: var(--retraso-inv, 0s); }
.fig[data-phase='loaded'] { opacity: 1; background: #000; }
.fig[data-phase='loaded'] > * { opacity: 0; animation: entra .456s ease-out forwards; }
.medio { position: relative; width: 100%; height: 100%; background: rgba(128, 128, 128, .1); }
.medio video, .medio img { object-fit: cover; width: 100%; height: 100%; }
.medio video { position: absolute; inset: 0; opacity: 0; transition: opacity var(--t-4) ease-in; }
.medio[data-loaded='true'] video { opacity: 1; }
.velo { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: rgba(128, 128, 128, .1); transition: opacity var(--t-4) ease-out; }
.velo[data-visible='false'] { opacity: 0; transition-delay: .15s; }
.velo img { position: absolute; inset: 0; }

.rotulos { z-index: 1; pointer-events: none; }
.rotulos > * { pointer-events: none; position: relative; overflow: clip; }
.rotulos[data-idle] > [data-has-content] { pointer-events: auto; cursor: pointer; }
.chip {
  position: absolute; bottom: -.5px; left: 0; display: flex; gap: 1ch; align-items: center; height: calc(1em + 2 * var(--pad)); padding: var(--pad);
  background: var(--c-bg); line-height: 1; pointer-events: none; overflow: hidden; transition: transform 1s var(--e);
}
.chip--n { aspect-ratio: 1; text-align: center; padding: var(--pad) 0; justify-content: center; }
.rotulos:not([data-idle]) .chip--n { transition: transform 0s; transform: translateY(100%); }
.chip--off { background: transparent; color: var(--c-sub); transition: opacity .3s; text-transform: uppercase; }
.chip--off svg { width: auto; height: 1em; scale: 1.2; position: relative; top: -.03em; flex: none; }
.chip--off span { margin-left: 0; }


.indicador { position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: 0; will-change: transform, opacity; background: linear-gradient(270deg, #0000, #fff, #000, #0000); }


.visor { position: fixed; inset: 0; z-index: 999; visibility: hidden; pointer-events: none; transition: visibility 0s .45s; }
.visor[data-abierto='true'] { visibility: visible; pointer-events: auto; transition: visibility 0s 0s; }
.visor__fondo { position: absolute; inset: 0; background: #000; opacity: 0; transition: opacity .45s cubic-bezier(.32, .72, 0, 1); }
.visor[data-abierto='true'] .visor__fondo { opacity: .2; }
.visor__hoja {
  position: absolute; inset: 0; background: #000; color: #fff; transform: translateY(100%); transition: transform .45s cubic-bezier(.32, .72, 0, 1);
  box-shadow: 0 -4px 24px rgba(0, 0, 0, .08); will-change: transform; overflow: hidden; touch-action: none; cursor: grab;
}
.visor[data-abierto='true'] .visor__hoja { transform: translateY(var(--arrastre, 0px)); }
.visor__hoja.arrastra { transition: none; cursor: grabbing; }
.visor__pelicula { position: absolute; inset: 0; background: #000; }
.visor__pelicula video, .visor__pelicula img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.visor__pelicula video { opacity: 0; transition: opacity var(--t-4) ease-in; }
.visor__pelicula[data-lista='true'] video { opacity: 1; }
.visor__pelicula img { transition: opacity var(--t-4) ease-out .15s; }
.visor__pelicula[data-lista='true'] img { opacity: 0; }
.mando { position: absolute; z-index: 2; left: 0; bottom: 0; width: 25vw; display: flex; flex-wrap: wrap; gap: var(--pad); padding: 0 var(--pad); background: #fff; color: #000; text-transform: uppercase; line-height: 1; }
.mando :is(a, button, span) { padding: var(--pad) 0; }
.mando button { color: #000; transition: opacity var(--t-1) ease-out; }
.mando button:hover { opacity: .4; }
.mando__cerrar { margin-left: auto; }
.mando .tiempo { width: 8ch; }
.mando[data-estado='cargando'] > :not(.mando__texto) { display: none; }
.mando:not([data-estado='cargando']) .mando__texto { display: none; }

.cab--clon {
  position: fixed; top: 0; left: 0; width: 100%; z-index: 10000; pointer-events: none; isolation: isolate; contain: strict; animation: none; opacity: 0; transition: height var(--t-3) var(--e);
}
.cab--clon > * { color: var(--c-cl); background: var(--c-bg); pointer-events: auto; -webkit-mask-image: none; mask-image: none; }
.cab--clon .colecciones { display: none; }

.aviso { position: fixed; right: 0; bottom: -.5px; z-index: 10001; height: calc(1em + 2 * var(--pad)); padding: var(--pad); background: var(--c-bg); line-height: 1; white-space: nowrap; color: var(--c-sub); animation: aparece var(--t-3) ease-in .678s backwards; }
.aviso a { color: var(--c-cl); text-decoration: underline; text-decoration-thickness: .5px; text-underline-offset: .2em; }


@media (max-width: 1279px) {
  .cab { --n: 2; }
  .serie { width: 50vw; }
  .info { width: 50vw; grid-area: 2 / 2; }
  .mando { width: 50vw; }
}

@media (max-width: 767px) {
  .cab { --n: 1; --h-header: 72px; grid-template-rows: auto auto auto; }
  .serie { grid-row: 3; width: 100vw; grid-area: 3 / 1; }
  .serie__boton { padding-top: calc(var(--pad) / 2); grid-template-columns: auto 1fr auto; }
  .info { grid-area: 2 / 1; width: 100vw; }
  .info > :not(.taller):not(.sello) { padding-bottom: calc(var(--pad) / 2); }
  .escena { --n: 3; }
  .mando { width: 100vw; }
}
@media (max-width: 639px) {
  .app { grid-template-rows: minmax(0, 1fr) auto; }
  .principal { grid-row: 1; }
  .cab { grid-row: 2; }
  .colecciones { grid-row: 2; }
  .serie { grid-area: 1 / 1; }
  .serie__boton { padding-top: var(--pad); }
  .info { grid-area: 3 / 1; }
  .info > :not(.taller):not(.sello) { padding-bottom: var(--pad); }
  .cab--clon { display: none; }
  .aviso { bottom: auto; top: -.5px; }
}
@media (max-width: 392px) {
  .serie__boton { grid-template-columns: minmax(0, 1fr) 8ch auto; }
}


@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0s !important; animation-delay: 0s !important; transition-duration: 0s !important; transition-delay: 0s !important; }
  body:active::before { display: none; }
  .tira__carril { scale: .5; }
}