:root { --base-padding: 20px; --pie: 44px; }
@media (max-width: 768px) { :root { --base-padding: 15px; } }

html, body { margin: 0; padding: 0; background: #000; }
body {
  font-family: Arimo, "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  font-size: 11px; line-height: 14px; text-transform: uppercase; letter-spacing: .2px; font-weight: 400;
  color: #fff; background: #000;
  -webkit-user-select: none; -moz-user-select: none; user-select: none;
}
a { text-decoration: none; color: #fff; }
button { font: inherit; letter-spacing: inherit; text-transform: inherit; color: #fff; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: left; }
:focus-visible { outline: 1px solid #fff; outline-offset: 3px; }
.center-outer { display: table; height: 100%; width: 100%; }
.center-outer .center { display: table-cell; vertical-align: middle; }
.v-sp { display: none; }
@media (max-width: 768px) { .v-pc { display: none; } .v-sp { display: inline; } }


@media (max-width: 768px) {
  .app { position: fixed; top: 0; left: 0; right: 0; bottom: 0; overflow-y: scroll; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
}


.top { position: fixed; top: 0; left: 0; width: 100%; display: flex; z-index: 10; background: #000; justify-content: center; }
.top p { color: #fff; font-size: 10px; text-transform: none; margin: 5px 0; }
.logo { position: fixed; top: calc(var(--base-padding) + 24px); left: 51%; z-index: 999; transform: translate3d(-50%, 0, 0); margin: 0; font-size: 14.4px; line-height: 14px; font-weight: 700; letter-spacing: .1px; white-space: nowrap; }
.logo a { display: block; position: relative; }
.logo span + span { margin-left: 30px; }
.logo sup { font-size: 9px; line-height: 0; position: relative; top: -2px; margin-left: 6px; font-weight: 700; }
.logo a { text-transform: uppercase; }


.intro { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, .8); z-index: 998; }
.intro .inner { text-align: center; position: relative; }
.intro .countdown { position: absolute; bottom: var(--base-padding); text-align: center; width: 100%; }
@keyframes parpadeo { 50% { opacity: 0; } }
.intro .blink { animation: parpadeo .1s linear infinite; }
.intro .slide { text-align: left; opacity: 1; }
.intro .slide .inner { width: 100%; height: 100%; position: relative; }
.intro .slide span, .intro .slide button { font-size: 11px; line-height: 14px; text-transform: uppercase; color: #fff; font-weight: 400; letter-spacing: .2px; opacity: 0; }
.intro .slide.slide2, .intro .slide.slide3, .intro .slide.slide4, .intro .slide.slide5, .intro .slide.slide6 { display: none; }
.intro .slide.slide1 { margin: 0 auto; position: relative; }
.intro .slide.slide1 span { position: absolute; }
.intro .slide.slide1 span:nth-child(1) { top: 0; left: 0; }
.intro .slide.slide1 span:nth-child(2) { top: 0; right: 0; }
.intro .slide.slide1 span:nth-child(3) { bottom: 0; left: 0; }
.intro .slide.slide1 span:nth-child(4) { bottom: 0; right: 0; }
.intro .slide.slide2 { width: 70vw; height: 50vh; margin: 0 auto; }
@media (max-width: 768px) { .intro .slide.slide2 { width: 90%; } }
.intro .slide.slide2 .inner { display: flex; justify-content: space-between; flex-direction: column; text-align: left; }
.intro .slide.slide2 .line { display: flex; }
.intro .slide.slide2 .line.line1 { margin-left: 10vw; }
.intro .slide.slide2 .line.line1 span:nth-child(1) { flex: 40% 0 0; }
.intro .slide.slide2 .line.line2 { margin-left: 10vw; justify-content: space-between; }
.intro .slide.slide2 .line.line3 span:nth-child(1) { flex: 45% 0 0; }
.intro .slide.slide3, .intro .slide.slide4, .intro .slide.slide5, .intro .slide.slide6 { text-align: center; margin: 0 auto; }
.intro .slide.slide3 span, .intro .slide.slide4 span, .intro .slide.slide5 span, .intro .slide.slide6 button { opacity: 1; }
.intro .slide.slide4 { width: 30vw; }
.intro .slide.slide4 .inner { display: flex; justify-content: space-evenly; }
.intro .slide.slide5 { width: 40vw; }
.intro .slide.slide5 .inner { display: flex; justify-content: space-evenly; }
.intro .slide.slide3 { max-width: 90vw; }
@media (max-width: 768px) { .intro .slide.slide4 { width: 50vw; } .intro .slide.slide5 { width: 70vw; } }
.intro .entrar { text-align: center; cursor: pointer; padding: 18px 40px; }
.intro .sitem { opacity: 0; }
.intro .sitem.on { opacity: 1; }
.intro .slide2.blink-s2 { animation: parpadeo .1s linear infinite; }
.saltar { position: absolute; right: var(--base-padding); bottom: var(--base-padding); z-index: 2; color: #fff; opacity: .7; cursor: pointer; padding: 4px 0; }
.saltar:hover { opacity: 1; }


#lienzo { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: block; cursor: grab; }
.scroll-wrap { position: relative; z-index: 1; }
.scroll-wrap .scrollH { width: 1px; height: 300vh; }


.item { position: fixed; top: 50%; left: 0; z-index: 10; font-size: 11px; line-height: 14px; will-change: transform; backface-visibility: hidden; pointer-events: none; display: none; }


.arriba-izq { position: fixed; z-index: 901; top: calc(var(--base-padding) + 24px); left: var(--base-padding); margin: 0; padding: 0; }
.menu { position: absolute; z-index: 100; }
.menu .menu-bg { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: #000; }
.menu .expanded { position: relative; top: 0; left: 0; }
.menu .mobile-btn { display: none; width: 20px; position: relative; z-index: 50; margin-bottom: 10px; padding: 0; }
.menu .mobile-btn i { display: block; width: 100%; height: 2px; background: #fff; margin-bottom: 3px; }
.expandable { position: relative; width: 300px; }
.expandable > .exp-t { display: block; margin: 4px 0; cursor: pointer; }
.expandable a { display: block; margin: 4px 0; font-size: 10px; cursor: pointer; }
.expandable .inner { margin-left: 20px; position: relative; display: none; }
.expandable.abierto > .inner { display: block; }
.expandable a.actual { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 768px) {
  .arriba-izq { top: calc(var(--base-padding) * 3 + 24px); }
  .menu .mobile-btn { display: block; }
  .menu .expanded { display: none; position: relative; z-index: 50; }
  .menu.abierto .expanded { display: block; }
  .menu.abierto .menu-bg { display: block; }
}


.notas-btn { position: fixed; z-index: 100; top: calc(var(--base-padding) + 24px); right: var(--base-padding); cursor: pointer; text-align: right; }
@media (max-width: 768px) { .notas-btn { top: calc(var(--base-padding) * 3 + 24px); } }
.silencio { position: fixed; z-index: 500; top: calc(30vh - var(--base-padding) * 2 + var(--base-padding)); right: var(--base-padding); cursor: pointer; text-align: right; }
.guardar { position: fixed; z-index: 100; top: 50%; right: var(--base-padding); cursor: pointer; text-align: right; }
.abajo-izq { position: fixed; z-index: 100; bottom: var(--base-padding); left: var(--base-padding); }
.abajo-izq .aw { display: inline-block; margin-right: 50px; }
@media (max-width: 768px) { .abajo-izq .aw { margin-right: 60px; } }


.fadein { opacity: 0; transition: opacity 1.5s ease 1.5s; }
.fadein.visible { opacity: 1; }


.aviso { position: fixed; z-index: 999; left: 50%; bottom: var(--base-padding); transform: translateX(-50%); margin: 0; font-size: 10px; line-height: 14px; text-transform: none; letter-spacing: .2px; color: rgba(255, 255, 255, .6); white-space: nowrap; -webkit-user-select: text; user-select: text; }
.aviso a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 768px) { .aviso { left: var(--base-padding); transform: none; bottom: calc(var(--base-padding) + 24px); } }

.intro-on .aviso { bottom: calc(var(--base-padding) + 24px); }


.controles { position: fixed; z-index: 5; bottom: var(--base-padding); right: var(--base-padding); -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; touch-action: none; }
@media (max-width: 768px) { .controles { bottom: calc(var(--base-padding) * 2); } }
.controles .control { margin-bottom: 30px; }
@media (max-width: 768px) { .controles .control { margin-bottom: 15px; } }
.controles .control:last-child { margin: 0; }
.control { position: relative; padding: 20px 20px; cursor: pointer; touch-action: none; }
.control .val-disp { position: absolute; right: 0; top: 0; transform: scale3d(1, 1, 1); backface-visibility: hidden; transform-origin: 100% 100%; font-size: 11px; line-height: 14px; }
@media (max-width: 768px) { .control .val-disp { top: initial; bottom: 0; } }
.control.down .val-disp { transform: scale3d(2, 2, 1); transition: none; }
@media (max-width: 768px) { .control.down .c-inner { transform: scale3d(1, 4, 1); } }
.control:hover .c-inner, .control:focus-visible .c-inner { transform: scale3d(1, 4, 1); }
.control:focus-visible { outline: none; }
.control.minus .c-inner .val { width: 50%; left: 50%; }
.control .c-inner { height: 1px; width: 100%; position: relative; transition: transform .2s ease-out; backface-visibility: hidden; }
.control .c-inner > div { width: 100%; height: 100%; background: #fff; }
.control .c-inner .val { position: relative; z-index: 1; transform-origin: 0 50%; will-change: transform; }
.control .c-inner .bg { position: absolute; top: 0; left: 0; opacity: .5; }


.notas { position: fixed; z-index: 1000; inset: 0; background: rgba(0, 0, 0, .88); display: flex; align-items: center; justify-content: center; padding: var(--base-padding); }
.notas[hidden] { display: none; }
.notas-caja { max-width: 440px; width: 100%; text-transform: none; font-size: 13px; line-height: 19px; letter-spacing: .1px; -webkit-user-select: text; user-select: text; }
.notas-caja h2 { font-size: 11px; line-height: 14px; font-weight: 400; text-transform: uppercase; letter-spacing: .2px; margin: 0 0 22px; }
.notas-caja p { margin: 0 0 14px; }
.notas-cerrar { position: absolute; top: calc(var(--base-padding) + 24px); right: var(--base-padding); text-transform: uppercase; font-size: 11px; cursor: pointer; }


.giro { position: fixed; z-index: 995; bottom: var(--base-padding); left: var(--base-padding); right: var(--base-padding); max-width: 400px; color: #fff; padding: 2px; background: rgba(0, 0, 0, .8); }
.giro[hidden] { display: none; }
.giro button { display: block; padding: 10px; }
.giro .giro-x { float: right; }


#respaldo { display: none; padding: 96px var(--base-padding) 90px; max-width: 640px; margin: 0 auto; }
#respaldo figure { margin: 0 0 56px; }
#respaldo img { display: block; width: 100%; height: auto; background: #111; }
#respaldo figcaption { margin-top: 10px; display: flex; gap: 22px; }
#respaldo figcaption span { opacity: .6; }
.sin-gl #respaldo { display: block; }
.sin-gl { background: #000; }
.sin-gl .app { position: static; overflow: visible; display: flex; flex-direction: column; }
.sin-gl .intro, .sin-gl #lienzo, .sin-gl .controles, .sin-gl .scroll-wrap, .sin-gl .item, .sin-gl .arriba-izq,
.sin-gl .silencio, .sin-gl .guardar, .sin-gl .saltar, .sin-gl .giro { display: none !important; }
.sin-gl .abajo-izq, .sin-gl .notas-btn { opacity: 1; }
.sin-gl .aviso { position: static; transform: none; text-align: center; padding: 0 var(--base-padding) 40px; order: 99; }
.sin-gl .top { position: sticky; }

@media (prefers-reduced-motion: reduce) {
  .fadein { transition: none; opacity: 1; }
  .intro .blink, .intro .slide2.blink-s2 { animation: none; }
  .control .c-inner { transition: none; }
}