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

:root {
  --rojo: #dd2922;
  --rojo-hondo: #c72620;
  --tinta: #484848;
  --gris: #989898;
  --off: #e2e2e2;
  --serif: "Serif", "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans: "Sans", "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --sec: 10px;
  --entra: cubic-bezier(.54, .15, .15, 1);
  --sale: cubic-bezier(.85, 0, .45, .85);
  --base: cubic-bezier(.4, 0, .2, 1);
}
@media (min-width: 1024px) { :root { --sec: 20px; } }
@media (min-width: 1280px) { :root { --sec: 35px; } }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  font-size: 16px; line-height: 1.2; color: var(--tinta); height: 100%;
  -webkit-text-size-adjust: 100%; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility; overscroll-behavior: none; overflow-x: clip;
}
@media (min-width: 1280px) { html { font-size: 1.2vw; } }
@media (min-width: 1536px) { html { font-size: 1.05vw; } }
html.galeria-abierta { overflow: hidden; }
body {
  position: relative; min-height: 100%; font-family: var(--sans); font-weight: 600; background: #fff; color: var(--tinta);
  transition: background-color 1s var(--base), color 1s var(--base);
}
body.page-inicio { background: var(--rojo); }
body.menu-abierto, body.transcripcion-abierta { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; text-align: inherit; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
ul, ol { list-style: none; }
::selection { background: var(--tinta); color: #fff; }
:focus { outline: none; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.menu :focus-visible { outline-color: var(--tinta); }
.saltar { position: fixed; left: 8px; top: -60px; z-index: 100; background: #fff; color: #000; padding: 10px 14px; font-size: 14px; transition: top .2s; }
.saltar:focus { top: 8px; }
#contenido:focus { outline: none; }


html.to-load .menu-slide, html.to-load .menu-gradient, html.to-load .left-text,
html.to-load .transition-all, html.to-load body { transition: none !important; }
html.to-load .hide-on-load, html.to-load .menu { opacity: 0; transition: none; }
.hide-on-load { transition: opacity .7s var(--base); }
.menu { transition: opacity .7s var(--base); }


.display { font-family: var(--serif); font-weight: 390; font-variation-settings: "opsz" 60; font-size: 18vw; }
@media (min-width: 1024px) { .display { font-size: 8.4vw; } }
.l90 { line-height: .9; white-space: pre-line; }
.l90.a-der { align-self: flex-end; }
.pre { white-space: pre-line; }
.parrafo { font-family: var(--sans); font-weight: 600; font-size: 1rem; line-height: 1.2; }
.parrafo p:not(:last-child) { padding-bottom: 1rem; }
.parrafo strong { font-weight: 600; }
.parrafo a, .hover-text { display: inline-block; transition: color .3s var(--base); }
@media (hover: hover) { .parrafo a:hover, .hover-text:hover { color: var(--rojo); } }
.parrafo a:focus-visible, .hover-text:focus-visible { color: var(--rojo); }


.menu { position: fixed; inset: 0; z-index: 20; display: flex; pointer-events: none; }
.menu-izq { position: relative; overflow: hidden; width: 53%; height: 100vh; height: 100svh; color: var(--rojo); }
.menu-slide { position: relative; z-index: 1; display: flex; height: 100%; width: 100%; transform: translateX(-55%); }
.menu-lista { margin: auto; height: 58.3333%; display: flex; flex-direction: column; justify-content: space-between; }
.menu-link { display: block; max-width: 28rem; margin-inline: auto; text-align: center; transition: color .3s var(--base); }
.menu-t { display: block; font-family: var(--serif); font-weight: 400; font-variation-settings: "opsz" 44; font-size: 3rem; line-height: 1; }
.menu-d { display: block; padding-inline: 1rem; font-family: var(--serif); font-weight: 400; font-variation-settings: "opsz" 60; font-size: .875rem; line-height: 1.4286; }
.menu-marca { position: absolute; bottom: 0; left: 0; right: 0; padding: 0 var(--sec) 5vh; text-align: center; font-size: 1.125rem; line-height: 1.5556; }
.menu-marca .menu-link { display: inline-block; max-width: none; font-family: var(--serif); font-weight: 400; font-variation-settings: "opsz" 44; }
.menu-gradient { position: absolute; top: 0; bottom: 0; left: 0; width: 50%; transform: translateX(-20%); background: linear-gradient(90deg, #c72620, #9d9d9d00 95.94%); pointer-events: none; }
.menu-der { position: relative; width: 47%; }
.menu-fantasma { height: 100%; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: space-between; padding: var(--sec); color: var(--off); opacity: 0; transition: opacity .5s var(--base) .3s; }
.menu-link.active { color: var(--off); }
.menu-slide { pointer-events: none; }
body.hovered .menu-slide { pointer-events: auto; }
body.hovered .menu-slide { transform: none; transition: transform .4s var(--base); }
body.hovered .menu-gradient { transform: none; transition: transform .7s var(--base); }
body.hovered-release .menu-slide { transition: transform 1s var(--base); }
body.hovered-release .menu-gradient { transition: transform .7s var(--base); }
@media (hover: hover) { .menu-link:hover { color: var(--off); } }
.menu-link:focus-visible { color: var(--off); outline: none; }
body:not(.page-inicio).hovered .menu-fantasma { opacity: 1; transition-delay: 0s; }
body.galeria-abierta .menu, body.page-galeria .menu { opacity: 0; pointer-events: none; transition: opacity 1s var(--entra); }

.burger-wrap { display: none; }
@media (max-width: 1023px) {
  .menu { display: block; transition: background-color .7s var(--base), opacity .7s var(--base); }
  body.menu-abierto .menu { background: var(--rojo); pointer-events: auto; }
  .menu-izq { width: 100%; color: #fff; }
  .menu-slide { transform: translateX(-100%); transition: transform .7s var(--base); }
  body.menu-abierto .menu-slide { transform: none; pointer-events: auto; }
  .menu-lista { height: 66.6667%; padding-bottom: 3rem; }
  .menu-t { font-size: 2.25rem; line-height: 1.1111; }
  .menu-d { font-size: .875rem; }
  .menu-gradient, .menu-der { display: none; }
  .menu-link.active { color: #000; }
  .burger-wrap { display: block; position: absolute; top: 0; right: 0; z-index: 20; padding: 1rem; pointer-events: auto; color: var(--tinta); transition: opacity .7s var(--base); }
  body.page-inicio .burger-wrap, body.menu-abierto .burger-wrap { color: #fff; }
  body.transcripcion-abierta .burger-wrap { opacity: 0; pointer-events: none; }
  .burger-btn { display: block; cursor: pointer; }
  .burger { display: flex; flex-direction: column; justify-content: space-between; width: 20px; height: 10px; padding: 1px 0; transition: transform .7s var(--base); }
  .burger span { display: block; height: 1.5px; width: 20px; border-radius: 1px; background: currentColor; transition: transform .3s var(--base); }
  body.menu-abierto .burger { transform: translateX(5px); }
  body.menu-abierto .burger span:first-child { transform: translateY(3.25px) rotate(45deg); }
  body.menu-abierto .burger span:nth-child(2) { transform: translateY(-3.25px) rotate(-45deg); }
}
@media (min-width: 768px) and (max-width: 1023px) { .menu-lista { height: 58.3333%; padding-bottom: 0; } }


.vistas { position: relative; }
.vista { display: none; }
.vista.activa, .vista.entrando { display: block; }
.vista.entrando { position: fixed; inset: 0; z-index: 1; }
.fila { display: block; }
@media (min-width: 1024px) {
  .fila { display: flex; }
  .izq { width: 53%; }
  .der { width: 47%; }
}
.izq, .der { position: relative; }
.izq-stick { position: relative; z-index: 2; min-height: 100vh; min-height: 100svh; }
@media (min-width: 1024px) { .izq-stick { position: sticky; top: 0; } }
.bg { position: absolute; inset: 0; z-index: 1; background: var(--gris); overflow: hidden; }
picture { display: contents; }
.fondo-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .7s var(--base); }
.fondo-img.cargada { opacity: 1; }
html:not(.js) .fondo-img { opacity: 1; }
@media (max-width: 1023px) { .bg { height: 100vh; height: 100svh; } }


.fila-inicio .izq-stick .bg { background: var(--gris); }
.fila-inicio .fondo-img { filter: contrast(.86) brightness(1.07); }
@media (max-width: 1023px) { .fila-inicio { display: flex; flex-direction: column-reverse; } }
.right-text-wrap { transition: opacity .5s var(--base) .3s; }
body.hovered:not(.page-inicio) .right-text-wrap { opacity: 0; transition-delay: 0s; }
.bg-rojo { background: var(--rojo); }
.titulo { display: flex; flex-direction: column; justify-content: space-between; height: 100%; min-height: 100vh; min-height: 100svh; padding: 1.5rem var(--sec); color: #000; }
@media (min-width: 768px) { .titulo { padding: var(--sec); } }
.espacio { padding-bottom: 20%; }
.sec2 { min-height: 100vh; min-height: 100svh; padding: var(--sec); display: flex; flex-direction: column; color: #000; }
.sec2-texto { flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; font-family: var(--serif); font-weight: 400; font-variation-settings: "opsz" 42; font-size: 1.5rem; line-height: 1.2; text-wrap: balance; }


.movil-grad { position: absolute; inset: 0; height: 100vh; height: 100svh; z-index: 2; display: flex; justify-content: flex-end; color: #fff; font-size: 1.125rem; line-height: 1.2;
  background: linear-gradient(90deg, #c72620, #9d9d9d00 30%); pointer-events: none; }
@media (min-width: 768px) { .movil-grad { background: linear-gradient(90deg, #c72620, #9d9d9d00 50%); } }
@media (min-width: 1024px) { .movil-grad { display: none; } }
.movil-rotulo { position: absolute; top: 0; left: 0; padding: 1rem var(--sec); transform: translateY(-100%) rotate(90deg); transform-origin: bottom left; transition: opacity .7s var(--base); font-family: var(--sans); }
.movil-desc { margin-top: auto; width: 75%; padding: 0 var(--sec) 3rem; font-family: var(--sans); transition: opacity .7s var(--base); }
body.menu-abierto .movil-rotulo, body.menu-abierto .movil-desc { opacity: 0; }
.bg-int::after { content: ""; position: absolute; inset: 0; z-index: 10; background: #3a3a3a; opacity: .26; pointer-events: none; }
@media (max-width: 1023px) { .bg-int::after { background: var(--gris); opacity: .4; } }
.left-text { position: relative; z-index: 2; height: 100%; display: flex; color: var(--tinta); transition: opacity .7s var(--base); }
.left-text .parrafo { margin-left: auto; width: 75%; padding: 1.5rem 2rem var(--sec) var(--sec); }
@media (min-width: 1024px) {
  .left-text { color: #fff; }
  .left-text .parrafo { width: 42%; padding: var(--sec); }
}
body.hovered .left-text { opacity: 0; transition: opacity .4s var(--base); }
body.hovered-release .left-text { opacity: 1; transition: opacity .4s var(--base); }
.right-text { position: relative; margin-left: auto; width: 75%; padding: 2rem 2rem 2rem var(--sec); }
@media (min-width: 1024px) {
  .right-text { margin-left: 0; width: 50%; padding: var(--sec); z-index: 14; text-shadow: 0 0 .35em #fff, 0 0 .8em #fff; }
}
.pt4 { padding-top: 1rem; }
.solo-mov { display: none; }
@media (max-width: 1023px) { .solo-esc { display: none !important; } .solo-mov { display: inline-block; } }


.vis-texto { transition: opacity 1s var(--base), visibility 0s linear 0s; transition-delay: .3s, 0s; }
.guia { position: absolute; inset: 0; padding: 0; opacity: 0; visibility: hidden; transition: opacity 1s var(--base), visibility 0s linear 1s; pointer-events: none; }
.guia-in { padding: var(--sec); width: 133.333%; }
@media (max-width: 1023px) { .guia { display: none; } }
body.guia-visible .guia { opacity: 1; visibility: visible; transition-delay: .3s, 0s; }
body.guia-visible .vis-texto { opacity: 0; visibility: hidden; transition: opacity 1s var(--base), visibility 0s linear 1s; transition-delay: 0s, 1s; }
.hover-text[aria-expanded="true"] { color: var(--rojo); }


.transcripcion { position: fixed; top: 0; bottom: 0; right: 0; z-index: 16; width: 47%; overflow: auto; background: #fff; opacity: 0; visibility: hidden; transition: opacity 1s var(--base), visibility 0s linear 1s; }
body.transcripcion-abierta .transcripcion { opacity: 1; visibility: visible; transition: opacity 1s var(--base), visibility 0s; }
.transcripcion-fila { display: flex; padding-bottom: 50%; }
.transcripcion-izq { width: 50%; }
.transcripcion-blurb { position: sticky; top: 0; padding: var(--sec); padding-right: 0; font-family: var(--sans); font-weight: 600; font-size: 1rem; line-height: 1.2; color: var(--tinta); }
.transcripcion-der { width: 50%; padding: var(--sec); }
.transcripcion-cerrar { display: none; }
@media (max-width: 1023px) {
  .transcripcion { inset: 0; width: 100%; z-index: 40; }
  .transcripcion-cerrar { display: block; width: 100%; padding: var(--sec); text-align: right; }
  .transcripcion-fila { flex-direction: column-reverse; padding-bottom: 6rem; }
  .transcripcion-izq, .transcripcion-der { width: 100%; }
  .transcripcion-blurb { position: static; padding: var(--sec); }
}
.sonido-textos { }
@media (max-width: 1023px) { .vista-sonido .sonido-textos { padding-top: 100vh; padding-top: 100svh; } }


.canvas-wrap { position: fixed; inset: 0; z-index: 10; overflow: hidden; pointer-events: none; display: none; }
body:not(.page-inicio):not(.page-galeria) .canvas-wrap { display: block; }
body.galeria-abierta .canvas-wrap, body.page-galeria .canvas-wrap { display: block; opacity: 0; transition: opacity 1s var(--entra); }
.canvas-in { position: relative; height: 100%; margin-left: auto; width: 47%; }
.canvas { position: absolute; inset: 0; opacity: .4; transition: opacity 1s var(--base); }
.canvas[hovered], .canvas[moving] { opacity: 1; }
.canvas:not([show-images]), .canvas[images-hidden] { opacity: 0 !important; }
.canvas-parent { position: absolute; inset: 0; overflow: hidden; z-index: 10; }
.canvas-grid { position: absolute; top: 0; left: 0; width: 140vw; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); transform-origin: 0 0; perspective: 2000px; pointer-events: none; }
.celda { aspect-ratio: 3 / 4; display: flex; }
.canvas.listo .celda { position: absolute; left: 0; top: 0; will-change: transform; }
.celda a { display: block; width: 50%; margin: auto; background: #fff; pointer-events: auto; }
.canvas[images-hidden] .celda a { pointer-events: none; }
.mueve { transition: transform 1s var(--base); }
.gris { filter: grayscale(1); opacity: .8; transition: filter .7s var(--base), opacity .7s var(--base); }
@media (hover: hover) { .celda a:hover .gris { filter: grayscale(0); opacity: 1; } }
.celda a:focus-visible .gris { filter: grayscale(0); opacity: 1; }
.celda a:focus-visible { outline-offset: -4px; }
.foto { position: relative; overflow: hidden; }
.foto img { width: 100%; height: auto; }
.pos-1 { transform: translate3d(22%, 34%, 200px); }
.pos-2 { transform: translate(-27%, -20%); }
.pos-3 { transform: translate3d(-23%, 32%, -140px); }
.pos-4 { transform: translate3d(20%, -21%, -200px); }
.pos-5 { transform: translate3d(16%, 18%, 200px); }
.pos-6 { transform: translateY(21%); }
.pos-7 { transform: translate3d(-25%, -20%, 140px); }
.pos-8 { transform: translate3d(15%, 0, -100px); }
.ver-galeria { position: absolute; left: 50%; top: 50%; z-index: 12; display: none; padding: .75rem 1rem; transform: translate(-50%, -50%); color: var(--rojo); font-size: 1.125rem; line-height: 1.5556; pointer-events: auto; }
@media (max-width: 1023px) {
  .canvas-wrap { position: relative; inset: auto; z-index: 3; aspect-ratio: 3 / 5; display: none; }
  body:not(.page-inicio):not(.page-galeria) .canvas-wrap { display: block; }
  .canvas-in { width: 100%; }
  .canvas-grid { width: 210vw; }
  .ver-galeria { display: flex; }
  body.page-galeria .canvas-wrap { display: none; }
}


.controles { position: absolute; top: 0; left: 0; right: 0; height: 100vh; height: 100svh; z-index: 15; pointer-events: none; transition: opacity .5s var(--base) .3s; }
@media (min-width: 1024px) { .controles { position: fixed; inset: 0; height: auto; } }
body.hovered .controles, body.page-inicio .controles, body.menu-abierto .controles, body.page-galeria .controles, body.galeria-abierta .controles { opacity: 0; pointer-events: none; transition-delay: 0s; }
.controles-in { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: var(--sec); color: #fff; }
@media (min-width: 1024px) { .controles-in { width: 47%; margin-left: auto; align-items: flex-end; justify-content: flex-start; color: var(--tinta); } }
.controles button { pointer-events: auto; }
.t-mostrar { display: none; }
body.imagenes-ocultas .t-ocultar { display: none; }
body.imagenes-ocultas .t-mostrar { display: inline; }
body.page-sonido #btn-ocultar { display: none !important; }
.audio { display: none; }
body.page-sonido .audio { display: block; }
.audio-btn { display: block; pointer-events: auto; transition: color .3s var(--base); }
.audio-play, .audio-pausa { display: flex; align-items: center; gap: .75rem; }
.audio-pausa { display: none; }
.audio.sonando .audio-play { display: none; }
.audio.sonando .audio-pausa { display: flex; }
.audio-ico { width: 3rem; }
.audio-ico svg { width: 100%; height: auto; fill: currentColor; }
.audio-txt { font-size: 1.875rem; line-height: 1.2; }
@media (min-width: 1024px) { .audio-ico { width: 1.5rem; } }
@media (hover: hover) { .audio-btn:hover { color: var(--rojo); } }


.galeria { position: fixed; inset: 0; z-index: 50; background: #fff; transform: translateY(100%); visibility: hidden; transition: transform 1s var(--sale), visibility 0s linear 1s; overflow: hidden; }
body.page-galeria .galeria { transform: none; visibility: visible; transition: transform 1s var(--entra), visibility 0s; }
.galeria-in { position: relative; height: 100vh; height: 100svh; padding: 2.25rem 1rem 1rem; overflow: hidden; }
@media (min-width: 1024px) { .galeria-in { padding: 2.25rem; } }
.galeria-barra { position: absolute; top: 0; left: 0; right: 0; height: 2.25rem; padding-right: 1rem; display: flex; justify-content: flex-end; align-items: center; z-index: 10; }
@media (min-width: 1024px) { .galeria-barra { padding-right: 2.25rem; } }
.embla { height: 100%; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; cursor: grab; -webkit-overflow-scrolling: touch; }
.embla::-webkit-scrollbar { display: none; }
.embla.arrastrando { cursor: grabbing; user-select: none; }
.embla-contenedor { display: flex; height: 100%; width: max-content; margin-left: -40px; }
.slide { flex: 0 0 auto; height: 100%; padding-left: 40px; }
.slide-in { height: 100%; }
.slide img { height: 100%; width: auto; max-width: none; opacity: 0; transition: opacity .7s var(--base); user-select: none; -webkit-user-drag: none; }
.slide img.cargada { opacity: 1; filter: saturate(.94) contrast(1.02); }
@media (max-width: 1023px) {
  .galeria { overflow-y: auto; }
  .galeria-in { height: auto; min-height: 100svh; overflow: visible; background: #fff; }
  .galeria-barra { position: fixed; background: #fff; }
  .embla { height: auto; overflow: visible; cursor: auto; }
  .embla-contenedor { display: block; width: auto; margin: 0; height: auto; }
  .slide { height: auto; padding: 0 0 1rem; }
  .slide-in { height: auto; }
  .slide img { width: 100%; height: auto; }
}


.aviso-muestra { position: fixed; z-index: 15; right: calc(47% + var(--sec)); bottom: var(--sec); font-family: var(--sans); font-weight: 600; font-size: .75rem; line-height: 1.2; color: #fff; mix-blend-mode: difference; white-space: nowrap; transition: opacity .5s var(--base); }
.aviso-muestra a { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
body.page-galeria .aviso-muestra { opacity: 0; pointer-events: none; }
body.menu-abierto .aviso-muestra { opacity: 0; }
@media (max-width: 1023px) {
  .aviso-muestra { position: absolute; left: var(--sec); right: auto; bottom: 1rem; font-size: 12px; z-index: 5; }
}
.toast { position: fixed; z-index: 90; left: 50%; bottom: 28px; transform: translate(-50%, 20px); background: #000; color: #fff; padding: 0 16px; height: 34px; display: flex; align-items: center; font-size: 14px; font-family: var(--sans); border-radius: 2px; opacity: 0; pointer-events: none; transition: opacity .3s var(--base), transform .3s var(--base); white-space: nowrap; }
.toast.visible { opacity: 1; transform: translate(-50%, 0); }


body.transition-fade .vista.saliendo { opacity: 0; transition: opacity 1s var(--base); }
body.transition-fade .vista.saliendo .left-text { opacity: 0; transition: none; }
body.transition-fade .vista.saliendo .right-text-wrap { opacity: 0; transition-duration: 0s; transition-delay: 0s; }
body.transition-fade .vista.entrando .right-text-wrap { animation: aparece 1s var(--entra) both; }
@keyframes aparece { from { opacity: 0; } to { opacity: 1; } }
body.page-galeria .vista.activa { opacity: 0; pointer-events: none; transition: opacity 1s var(--entra); }
.vista.activa { transition: opacity 1s var(--sale); }


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

html:not(.js) .menu-slide { transform: none; pointer-events: auto; }