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

*, *::before, *::after { box-sizing: border-box; }
html { background: #000; scrollbar-width: none; -webkit-text-size-adjust: 100%; }
html::-webkit-scrollbar, body::-webkit-scrollbar, .pg::-webkit-scrollbar, .ov-in::-webkit-scrollbar { display: none; }
html.bloqueado { overflow: hidden; }
body {
  margin: 0; background: #000; color: #fff; min-height: 100vh;
  font: 700 13px/1 'Arimo', 'Helvetica Neue', Arial, sans-serif; letter-spacing: .01em; text-transform: none;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scrollbar-width: none;
}
p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; letter-spacing: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: left; }
img, video { display: block; max-width: 100%; }
:focus { outline: none; }
:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }
.saltar { position: fixed; left: 14px; top: -60px; z-index: 200; background: #fff; color: #000; padding: 8px 10px; }
.saltar:focus { top: 12px; }


.cab { display: contents; }
.c-1, .c-2, .c-3, .c-m, .c-4 { position: fixed; z-index: 20; top: 12px; color: #fff; mix-blend-mode: difference; line-height: 1; }
.c-1 { left: 14px; }
.c-2 { left: calc(50% - 94px); opacity: .7; }
.c-3 { right: 14px; display: flex; gap: 16px; align-items: center; }
.b-info { display: block; width: 13px; height: 13px; }
.b-info svg { display: block; }
.c-m, .c-4 { display: none; }
.c-4 { top: auto; bottom: 12px; left: 41%; }
.cab a:hover, .cab button:hover, .pie a:hover, .pie button:hover, .legal a:hover, .in-c a:hover, .ov-x:hover, .tx-texto:hover { opacity: .7; }
html.en-archivo .b-arc { opacity: .7; }


main { padding-bottom: 12px; }
.fila {
  position: relative; display: grid; grid-template-rows: minmax(0, 1fr);
  grid-template-columns: 14px repeat(29, minmax(0, 1fr) 16px) minmax(0, 1fr) 14px;
}
.fila > * { grid-row: 1; grid-column: var(--d); }
.f-100 { height: 100vh; }
.f-peq { height: calc(82vh + 100px); padding: 50px 0; }
.f-b { background: #fff; }
.f-n { background: #000; }

.tx, .bio { align-self: start; padding: 12px 0 10px; }
.tx { position: sticky; top: 0; z-index: 5; color: #fff; mix-blend-mode: difference; }
.tx-r p { font-weight: 400; font-size: 9px; line-height: 1.2; }
.bio { z-index: 14; color: #949598; }


.car { position: relative; align-self: start; overflow: hidden; z-index: 1; touch-action: pan-y; -webkit-user-select: none; user-select: none; --cur: auto; cursor: var(--cur); }
.car-hero, .car-ancha { height: 97vh; }
.car-centro { height: 100vh; }
.car-peq-i, .car-peq-d { height: 82vh; }
.car.izq { --cur: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpolygon fill='%23fff' points='1,9 6.999,15.001 7,11 14,11 14,7.004 7,7.002 7,3'/%3E%3Cpolygon points='13,10 6,10 6,12.587 2.414,9 6,5.414 6,8 13,8'/%3E%3C/svg%3E") 6 6, w-resize; }
.car.der { --cur: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpolygon fill='%23fff' points='11,15 17,9 11,3 11,7 4,7 4,11 11,11'/%3E%3Cpolygon points='5,8 12,8 12,5.414 15.586,9 12,12.586 12,10 5,10'/%3E%3C/svg%3E") 6 6, e-resize; }
.car:focus-visible { outline: none; }
.car:focus-visible::after { content: ''; position: absolute; inset: 6px; z-index: 6; pointer-events: none; border: 2px solid #fff; box-shadow: 0 0 0 2px #000, inset 0 0 0 2px #000; }
.sl { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity 400ms ease-out; transform: translateZ(0); }
.sl.on { opacity: 1; pointer-events: auto; }
.sl img, .sl video { width: 100%; height: 100%; object-fit: cover; }
.js .sl img { opacity: 0; transition: opacity 300ms ease-out; }
.js .sl img.ok { opacity: 1; }
.car-v { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.car-b {
  position: absolute; bottom: 14px; z-index: 4; width: 40px; height: 40px; display: grid; place-items: center;
  background: #fff; color: #000; font: 700 22px/1 'Arimo', Arial, sans-serif; opacity: 0; pointer-events: none;
}
.car-b:focus-visible { opacity: 1; outline: 2px solid #000; outline-offset: -4px; pointer-events: auto; }
.car-ant { left: 14px; }
.car-sig { right: 14px; }


.f-pie { min-height: 60vh; }
.f-pie > *, .pie > * { align-self: end; }
.legal { color: #949598; }
.legal p, .in-legal { font-weight: 400; font-size: 9px; line-height: 1.2; }
.legal a, .in-legal a { color: #fff; }
.pie-c, .pie-a, .pie-m, .pie-i { line-height: 1; }
.pie-a, .pie-m, .pie-i { justify-self: start; }
.pie-c { grid-column: var(--d); }


.aviso {
  position: fixed; left: 50%; bottom: 12px; z-index: 140; transform: translateX(-50%); max-width: calc(100vw - 28px);
  background: #fff; color: #000; padding: 8px 11px; opacity: 0; pointer-events: none; transition: opacity .3s ease;
}
.aviso.on { opacity: 1; }


.pg { position: fixed; inset: 0; z-index: 15; background: #fff; color: #000; overflow-y: auto; opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s linear .35s; }
.pg.abierto { opacity: 1; visibility: visible; transition: opacity .35s ease, visibility 0s; }
.pg-in { min-height: 100%; padding: 112px 14px 12px; }
.rejilla { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, 148px); max-width: 1254px; gap: 14px 10px; justify-content: start; }
.rejilla li { height: 305px; }
.mini { display: block; width: 148px; height: 305px; background: #ececec; overflow: hidden; }
.mini img { width: 148px; height: 305px; object-fit: cover; transition: opacity .3s ease-out; }
.mini:focus-visible { outline: 2px solid #000; outline-offset: 2px; }
.tx-texto { position: fixed; z-index: 3; top: 12px; left: calc(14px + 25 * (100vw - 492px) / 30 + 400px); padding-bottom: 80px; color: #fff; mix-blend-mode: difference; }
.pie-pg { display: grid; margin: 140px -14px 0; min-height: 40vh; padding-bottom: 0;
  grid-template-columns: 14px repeat(29, minmax(0, 1fr) 16px) minmax(0, 1fr) 14px; }
.pie-pg > * { grid-row: 1; grid-column: var(--d); }


.ov { position: fixed; inset: 0; z-index: 99; opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s linear .35s; }
.ov.abierto { opacity: 1; visibility: visible; transition: opacity .35s ease, visibility 0s; }
.ov-bg { position: absolute; inset: 0; background: rgba(0, 0, 0, .65); -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px); }
.ov-in { position: absolute; inset: 0; overflow-y: auto; background: rgba(0, 0, 0, .1); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); color: #fff; }
.ov-pag { position: relative; min-height: 100%; height: 100vh; }
.ov-x { position: fixed; z-index: 3; top: 12px; left: 43.8%; color: #fff; mix-blend-mode: difference; }
.ov-x2 { left: 83%; }
.in-hora { position: absolute; left: 43.9%; top: 31px; }
.in-bio { position: absolute; left: 14px; top: 28px; width: 555px; }
.in-c { position: absolute; top: 114px; }
.in-c0 { left: 14px; } .in-c1 { left: 204px; } .in-c2 { left: 395px; }
.in-s { position: absolute; left: 204px; top: 186px; }
.in-cl { position: absolute; left: 395px; top: 186px; }
.in-co { position: absolute; left: 395px; top: 365px; }
.in-legal { position: absolute; left: 14px; bottom: 13px; width: 460px; color: #949598; }
.in-circ { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: calc(16 * (100vw - 492px) / 30 + 240px); height: auto; pointer-events: none; }
.ix { position: absolute; left: calc(14px + 26 * (100vw - 492px) / 30 + 416px); width: calc(4 * (100vw - 492px) / 30 + 48px); }
.ov-texto .ov-pag { height: auto; padding: 53px 0 40px; }
.ov-texto .ix { position: static; margin: 0 0 26px calc(14px + 26 * (100vw - 492px) / 30 + 416px); width: calc(4 * (100vw - 492px) / 30 + 48px); }

.ov-luz .ov-bg { background: rgba(0, 0, 0, .75); }
.lz { position: absolute; inset: 0; display: grid; place-items: center; padding: 54px 60px 84px; }
.lz img { max-width: 100%; max-height: calc(100vh - 138px); width: auto; height: auto; object-fit: contain; cursor: pointer; }
.lz-p { position: absolute; left: 60px; bottom: 28px; right: 60px; }
.lz-x { position: fixed; top: 0; right: 0; padding: 14px 22px; z-index: 3; font: 400 30px/1 'Arimo', Arial, sans-serif; color: #fff; }


@media (max-width: 880px) {
  .c-1, .c-2, .b-info { display: none; }
  .c-m, .c-4 { display: block; }
  .c-3 { right: 14px; }
  main { padding-top: 12px; }
  .fila { grid-template-columns: 14px repeat(8, minmax(0, 1fr) 16px) minmax(0, 1fr) 14px; }
  .fila > * { grid-column: 2 / -2; }
  .f-n.f-100 { height: 102vh; }
  .f-b.f-100 { height: 100vh; }
  .f-peq { height: calc(57vh + 110px); padding: 55px 0; }
  .car-hero, .car-ancha { height: 97vh; grid-column: 1 / -1; }
  .car-centro { height: 80vh; margin-top: 10vh; grid-column: 2 / -2; }
  .car-peq-i, .car-peq-d { height: 57vh; grid-column: 2 / -2; }
  .tx { padding-top: 37px; padding-bottom: 10px; }
  .tx-c { grid-column: 2 / 8; }
  .tx-t { grid-column: 8 / -2; }
  .f-peq .tx-c { grid-column: 4 / 10; }
  .f-peq .tx-t { grid-column: 10 / -2; }
  .tx-r { grid-column: 1 / -1; justify-self: end; width: max-content; max-width: 66%; padding-top: 57px; padding-right: 0; margin-top: 380px; }
  .f-peq .tx-r { margin-top: 250px; }
  #p0 { height: auto; grid-template-rows: 74px 50vh 102vh; }
  #p0 .car, #p0 .tx { grid-row: 3; }
  #p0 .car { grid-column: 1 / -1; }
  #p0 .bio { grid-row: 1; grid-column: 2 / -2; padding: 35px 0 0; }
  .f-pie { min-height: 0; height: auto; grid-template-rows: auto auto; row-gap: 0; }
  .legal { grid-column: 2 / -2; grid-row: 1; padding-bottom: 25px; padding-top: 0; }
  .f-pie > .pie-c { display: none; }
  .f-pie > .pie-a { grid-row: 2; grid-column: 2 / 6; }
  .f-pie > .pie-m { grid-row: 2; grid-column: 13 / 16; }
  .f-pie > .pie-i { grid-row: 2; grid-column: 16 / -2; }
  .f-pie { min-height: 422px; align-content: end; }

  .pg-in { padding-top: 112px; }
  .rejilla { grid-template-columns: repeat(3, 1fr); max-width: none; gap: 14px 10px; }
  .rejilla li, .mini, .mini img { width: 100%; height: 252px; }
  .tx-texto { left: auto; right: 92px; padding-bottom: 0; }
  .pie-pg { grid-template-columns: 14px repeat(8, minmax(0, 1fr) 16px) minmax(0, 1fr) 14px; margin-top: 90px; min-height: 120px; }
  .pie-pg .pie-c { display: none; }
  .pie-pg .pie-a { grid-column: 2 / 6 !important; }
  .pie-pg .pie-m { grid-column: 13 / 16 !important; }
  .pie-pg .pie-i { grid-column: 16 / -2 !important; }

  .ov-x, .ov-x2 { left: 41%; }
  .ov-pag, .ov-texto .ov-pag { height: auto; min-height: 100%; padding: 52px 14px 28px; display: flex; flex-direction: column; }
  .in-bio, .in-c, .in-s, .in-cl, .in-co, .in-legal, .in-hora, .in-circ, .ix { position: static; width: auto; left: auto; top: auto; bottom: auto; margin: 0 0 35px; transform: none; }
  .in-bio { order: 1; } .in-c0 { order: 2; } .in-c1 { order: 3; } .in-c2 { order: 4; } .in-s { order: 5; } .in-cl { order: 6; } .in-co { order: 7; }
  .in-hora { order: 8; text-align: center; margin: 20px 0 20px; }
  .in-legal { order: 9; margin-bottom: 40px; }
  .in-circ { order: 10; width: 100%; margin: 0 0 10px; }
  .ov-texto .ix { margin: 0 0 26px 0; width: auto; }
  .lz { padding: 54px 14px 84px; }
  .lz-p { left: 14px; right: 14px; }
}

@media (max-width: 880px) and (min-width: 481px) { .rejilla { grid-template-columns: repeat(4, 1fr); } }


@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}