@font-face { font-family: "Public Sans"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("texto.woff2") format("woff2"); }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; border: 0; border-radius: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-synthesis: none; }
html { background: #000; }
body {
  background: #000; color: #fff; font-family: "Public Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.2857; font-weight: 500; letter-spacing: -.005em;
  height: 100vh; height: 100dvh; overflow: hidden; -webkit-text-size-adjust: 100%;
}
::selection { background: #fff; color: #000; }
a { color: inherit; text-decoration: none; cursor: pointer; }
button { appearance: none; -webkit-appearance: none; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; display: block; line-height: inherit; }
img, picture, video, svg { display: block; max-width: 100%; }
a:focus, button:focus { outline: none; }
a:focus-visible, button:focus-visible { outline: 1px solid #fff; outline-offset: 2px; }
.titulo:focus-visible { outline-offset: 1px; }

.mayus { text-transform: uppercase; }
.op-50 { opacity: .5; }
.col { display: flex; flex-direction: column; }
.fila { display: flex; }
.gap-2 { gap: 2px; } .gap-5 { gap: 5px; } .gap-10 { gap: 10px; } .gap-20 { gap: 20px; }
.p10 { padding: 10px; } .p20 { padding: 20px; }
.boton { display: block; background-color: rgba(0, 0, 0, .2); padding: 2px 5px; user-select: none; -webkit-user-select: none; cursor: pointer; }
.oculto-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }


.pagina { opacity: 0; will-change: opacity; }
.pagina.entra { animation: aparece .4s ease forwards; }
.pagina.sale { animation: desaparece .45s ease forwards; }
@keyframes aparece { from { opacity: 0; } to { opacity: 1; } }
@keyframes desaparece { from { opacity: 1; } to { opacity: 0; } }
body::before {
  content: "Cargando"; position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); background-color: rgba(0, 0, 0, .2); padding: 2px 5px;
  font-size: 14px; opacity: 0; pointer-events: none; transition: opacity .4s ease; user-select: none; -webkit-user-select: none; z-index: 10;
}
body.cargando::before { opacity: 1; }
body.cargando { cursor: progress; }
body.cargando main { pointer-events: none; }


.cabecera { position: fixed; left: 0; top: 0; width: 100%; z-index: 12; }
.cabecera .fila { justify-content: space-between; align-items: flex-start; padding: 20px; }


.vista { height: 100vh; height: 100dvh; overflow: hidden; display: flex; position: relative; }
.cuerpo-lista { padding: 20px; margin-top: auto; margin-bottom: auto; display: flex; align-items: center; position: relative; z-index: 2; justify-content: space-between; width: 100%; }
.ventana-lista { height: 220px; overflow: hidden; overflow: clip; padding: 0 6px; margin: 0 -6px; transition: opacity .45s ease; }
.pista { display: flex; flex-direction: column; font-size: 16px; transition: transform .45s cubic-bezier(.215, .61, .355, 1); will-change: transform; }
.pista.sin-t, .pista.sin-t .titulo { transition: none !important; }
.titulo, .ficha-activa { text-shadow: 0 0 14px rgba(0, 0, 0, .28); }
.titulo { display: block; height: 20px; line-height: 20px; opacity: .5; cursor: pointer; white-space: nowrap; transition: opacity .35s ease; }
.titulo.activo { opacity: 1; }
.ventana-lista:hover .titulo { opacity: .5 !important; }
.ventana-lista:hover .titulo.activo { opacity: 1 !important; }
.ficha-activa { display: flex; flex-direction: column; gap: 2px; transition: opacity .45s ease; }
.ficha-activa p { display: flex; gap: 10px; }
.previas { transition: opacity .45s ease; }
.previa { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .4s ease; overflow: hidden; }
.previa.activa { opacity: 1; }

.previa::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, .12) 26%, rgba(0, 0, 0, 0) 48%, rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, .14) 100%); }
.fondo { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.fondo.contener { object-fit: contain; background-color: #000; }
.previa img.fondo, .film img.fondo { opacity: 0; transition: opacity .25s linear; }
.previa img.fondo.lista, .film img.fondo.lista { opacity: 1; }
.vista.cambiando .ficha-activa, .vista.cambiando .previas, .vista.cambiando .ventana-lista { opacity: 0; }

.categorias { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 2; display: flex; gap: 10px; white-space: nowrap; }
.categorias button { opacity: .5; }
.categorias button[aria-pressed="true"] { opacity: 1; }
main.info-abierto .categorias { opacity: 0; pointer-events: none; }


.aviso { position: fixed; right: 20px; bottom: 20px; z-index: 6; font-size: 12px; color: rgba(255, 255, 255, .72); }
.aviso a { color: #fff; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }


.info, .proyecto-info {
  position: fixed; top: 60px; height: 0; overflow: hidden; overflow-y: scroll; scrollbar-width: none; -ms-overflow-style: none; width: 100%; z-index: 3;
  background-color: rgba(0, 0, 0, .2); -webkit-backdrop-filter: blur(100px); backdrop-filter: blur(100px);
}
.info::-webkit-scrollbar, .proyecto-info::-webkit-scrollbar { display: none; }
.info { left: 50%; max-width: 690px; max-height: calc(100% - 50px); transform: translateX(-50%); transition: height .65s ease; }
.proyecto-info { left: 20px; max-width: 450px; transition: height .45s ease; }
.info .dentro, .proyecto-info .dentro { opacity: 0; transition: opacity .4s ease; }
.info.activo .dentro { opacity: 1; transition: opacity .4s ease .5s; }
.proyecto-info.activo .dentro { opacity: 1; transition: opacity .4s ease .3s; }
.dentro .enlace { display: inline; cursor: pointer; }
.dentro .grilla-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.dentro button.enlace { display: inline; }


.film { position: relative; height: 100vh; height: 100dvh; overflow: hidden; }
.film::before, .film::after { content: ""; position: absolute; left: 0; width: 100%; height: calc(50% - 1px); background: #000; z-index: 2; transition: height 1s ease; }
.film::before { top: 0; }
.film::after { bottom: 0; }
.film.abierto::before, .film.abierto::after { height: 0; }
.cabecera .controles { display: flex; gap: 5px; position: absolute; left: 50%; top: 20px; transform: translateX(-50%); }
.cabecera .celda-info { display: flex; min-width: 35px; }
.scrub { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 5px; width: calc(100% - 80px); max-width: 350px; z-index: 2; cursor: pointer; }
.scrub .progreso { flex: 1 1; height: 16px; overflow: hidden; background: rgba(0, 0, 0, .25); touch-action: none; }
.scrub .relleno { height: 100%; background: #fff; width: 0; }
.scrub p { line-height: 12px; }
.vista-pieza[hidden], .vista[hidden] { display: none; }


@media (max-width: 768px) {
  .p20, .cuerpo-lista { padding: 10px; }
  .m-12, .cabecera, .categorias, .info, .proyecto-info, .scrub { font-size: 12px; }
  .cabecera .fila { padding: 10px; }
  .cabecera .controles { top: 10px; }
  .ficha-activa { display: none; }
  .info { top: 40px; max-width: calc(100% - 20px); }
  .proyecto-info { left: 10px; top: 40px; max-width: calc(100% - 20px); }
  .categorias { bottom: 10px; }
  .scrub { bottom: 10px; max-width: calc(100% - 20px); width: 100%; }
  .aviso { right: 10px; bottom: 40px; font-size: 11px; }
  body::before { font-size: 12px; }
}


@media (prefers-reduced-motion: reduce) {
  .pagina, .pagina.entra, .pagina.sale { animation: none; opacity: 1; }
  .pista, .titulo, .previa, .ventana-lista, .ficha-activa, .previas, .info, .proyecto-info, .dentro, .info .dentro, .film::before, .film::after, body::before { transition: none !important; }
  .previa img.fondo, .film img.fondo { transition: none; }
  .film::before, .film::after { height: 0; }
}