:root {
  --primary: #0b0a0a;
  --secondary: #fbfafa;
  --background: #fff;
  --foreground: #0b0a0a;
  --surface: #fbfafa;
  --u: 16.66vw;
  --fuente: "Geist", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "Fragment Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --cb: 219px;
}
html[data-theme="dark"] {
  --primary: #fbfafa;
  --secondary: #0b0a0a;
  --background: #0b0a0a;
  --foreground: #fbfafa;
  --surface: #000;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; line-height: 1.5; font-family: var(--fuente); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }

body {
  background: var(--background);
  color: var(--foreground);
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100svh;
  font-size: 16px;
  font-feature-settings: "kern";
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; text-transform: inherit; letter-spacing: inherit; line-height: inherit; }
button:disabled { cursor: default; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
h1, h2, h3 { font: inherit; }
img, video { display: block; max-width: 100%; }
address { font-style: normal; }
:focus-visible { outline: 1px solid var(--foreground); outline-offset: 2px; }

.saltar { position: fixed; left: 8px; top: -60px; z-index: 100; background: var(--surface); padding: 6px 10px; font-size: 12px; transition: top .15s; }
.saltar:focus { top: 8px; }
.vivo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }


.t14 { font-size: 12px; line-height: .65; letter-spacing: -.025em; }
.fondo { background: var(--surface); }
.hover-op:hover, .cab-nav button:hover, .enlace:hover, .cerrar-b:hover .x { opacity: .5; }
@media (hover: none) { .cab-nav button:hover, .enlace:hover, .cerrar-b:hover .x { opacity: 1; } }



.cab-marca h1, .cab-nav > *, .cab-contacto .linea > a, .cab-copy > * { position: relative; top: -1px; }
.cab-marca, .cab-tema, .cab-nav, .cab-contacto, .cab-copy { position: fixed; z-index: 40; }
.cab-marca { top: 0; left: 0; display: flex; align-items: flex-end; height: 16px; width: calc(var(--u) * 4); min-width: fit-content; padding: 0 10px; }
.cab-tema { top: 0; right: 0; display: flex; align-items: flex-end; justify-content: center; gap: 10px; height: 16px; width: var(--u); min-width: fit-content; }
.cuadro { width: 10px; height: 10px; border: 1px solid; cursor: pointer; }
.cuadro-claro { border-color: var(--primary); background: var(--secondary); }
.cuadro-oscuro { border-color: var(--secondary); background: var(--primary); }
.cab-nav { top: 48px; left: 0; display: flex; align-items: flex-end; height: 16px; width: calc(var(--u) * 2); min-width: fit-content; padding: 0 10px 0 10px; }
.cab-nav > * + * { margin-left: 4px; }
.cab-contacto { top: 48px; right: 0; width: calc(var(--u) * 3); }
.cab-contacto address { position: relative; display: flex; flex-direction: column; gap: 4px; min-width: fit-content; }
.cab-contacto .linea { display: flex; align-items: flex-end; }
.cab-contacto .linea:first-child { height: 16px; }
.cerrar { position: absolute; top: 0; right: 0; z-index: 10; display: flex; height: 16px; align-items: flex-end; justify-content: flex-start; padding: 0 10px; }
.cerrar-b { display: flex; gap: 8px; }
.cerrar-b .x { transform: translateY(1px); visibility: hidden; }
.cerrar-b.activo .x { visibility: visible; }
.cab-copy { left: 0; top: var(--copy-top, 238.8px); height: 20px; width: calc(var(--u) * 2); min-width: fit-content; transform: translateY(-100%); display: flex; align-items: flex-end; gap: 4px; padding: 0 10px; font-size: 12px; line-height: .65; letter-spacing: -.025em; }

.pie { position: fixed; right: 0; bottom: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; width: 50%; min-width: fit-content; height: 24px; padding: 4px 8px; background: var(--surface); }
.pie .sello { height: 100%; aspect-ratio: 1; flex: none; }
.aviso { font: 10px/15px var(--mono); text-transform: none; white-space: nowrap; margin-right: 8px; }
.aviso a { text-decoration: underline; text-underline-offset: 2px; }

@media (min-width: 768px) {
  .t14, .cab-copy { font-size: 14px; line-height: .725; }
  .cab-copy { line-height: .7; }
  .cab-marca { height: 24px; width: var(--u); }
  .cab-tema { right: auto; left: var(--u); height: 24px; }
  .cab-nav { top: 0; left: 50%; height: 24px; width: calc(var(--u) / 2); padding-left: 0; }
  .cab-contacto { top: 0; width: calc(var(--u) * 2); }
  .cab-contacto .linea:first-child { height: 24px; }
  .cerrar { height: 16px; }
  .cab-copy { left: 50%; top: var(--copy-top, 203px); height: 24px; width: calc(var(--u) / 2); padding: 0 10px 0 0; }
  .pie { right: calc(var(--u) / 2); width: var(--u); height: 32px; }
}


.estudio { visibility: hidden; position: fixed; }
.estudio.abierto { visibility: visible; }
.est-desc, .est-lista { position: fixed; background: var(--surface); font-size: 12px; line-height: .65; letter-spacing: -.025em; }
.est-desc { z-index: 50; left: 0; width: 100vw; padding: 16px 10px 0; }
.est-desc p { line-height: 1; white-space: pre-line; margin-bottom: -2px; text-wrap: wrap; }
.est-lista { z-index: 40; right: 0; width: calc(var(--u) * 3); min-width: fit-content; height: fit-content; padding-right: 10px; overflow: hidden; }
.est-lista .sec { padding: 16px 0 1px; margin-bottom: -3px; line-height: 1; white-space: nowrap; }
@media (min-width: 768px) {
  .est-desc, .est-lista { font-size: 14px; line-height: .725; }
  .est-desc { left: auto; right: 0; width: 50vw; padding-top: 20px; }
  .est-lista { right: calc(var(--u) / 2); width: 16.6vw; }
  .est-lista .sec { padding-top: 20px; }
}


.intro { position: fixed; inset: 0; z-index: 50; background: var(--background); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); display: none; }
.js .intro { display: block; }
.intro.sale { opacity: 0; transition: opacity 1s cubic-bezier(0, 0, .58, 1); pointer-events: none; }
.intro.fuera { display: none; }
.intro-marca { position: fixed; top: 0; left: 0; z-index: 40; display: flex; align-items: flex-end; height: 16px; padding: 0 10px; opacity: 0; transition: opacity .3s; }
.intro-cuenta { position: fixed; top: 0; left: 0; z-index: 40; display: flex; align-items: flex-end; justify-content: center; width: 100%; height: 16px; padding: 0 10px; font-family: var(--mono); opacity: 0; transition: opacity .5s; }
.intro.on .intro-marca, .intro.on .intro-cuenta { opacity: 1; }
@media (min-width: 768px) { .intro-marca, .intro-cuenta { height: 24px; } }


main { width: 100%; padding: 48px 0; }
.rejilla { display: flex; }
.col { flex: 1 1 0%; }
.item { margin: 0 auto 50px; width: 83.3333%; }
.item a { display: block; width: 100%; }
figure { position: relative; width: 100%; }
figcaption { margin-top: 8px; font: 10px/15px var(--mono); white-space: break-spaces; }
.op { opacity: .25; }
html[data-theme="dark"] .op { opacity: .35; }
.marco { position: relative; display: block; width: 100%; overflow: hidden; }
.marco img, .marco video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; filter: saturate(.94) contrast(1.02); }
.marco .oscuro { opacity: 0; }
html[data-theme="dark"] .marco .oscuro { opacity: 1; }
html[data-theme="dark"] .marco.con-oscuro .claro { opacity: 0; }
.ph { position: absolute; inset: 0; background: color-mix(in srgb, var(--foreground) 10%, transparent); animation: pulso 2s cubic-bezier(.4, 0, .6, 1) infinite; }
.marco.listo .ph { display: none; }
@keyframes pulso { 50% { opacity: .5; } }

@media (max-width: 767px) {
  .rejilla { flex-direction: column; }
  .col { display: contents; }
  .item { order: var(--o); }
}
@media (min-width: 768px) {
  main { padding: 64px 0; }
  .item { margin-bottom: 98px; }
}


.vista-obra[hidden], .obra[hidden] { display: none; }
.obra { position: relative; }
.galeria { display: none; }
.ficha { width: 100vw; }
.ficha-in { display: flex; flex-direction: column; gap: 16px; padding-bottom: 16px; margin-top: var(--cb); width: 100%; }
.tira { max-width: 100vw; }
.tira-in { display: flex; gap: 12px; overflow-x: auto; overflow-y: hidden; padding: 0 8px; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; }
.tira-in::-webkit-scrollbar { display: none; }
.mini-caja { height: 100px; min-width: 80px; scroll-snap-align: center; scroll-snap-stop: always; flex: none; }
.mini { position: relative; display: block; height: 100%; aspect-ratio: var(--ar); min-width: 80px; max-width: 160px; overflow: hidden; cursor: pointer; }
.mini .marco { height: 100%; }
.mini .marco img { object-fit: contain; filter: none; }
.texto { font: 12px/14.4px var(--mono); display: flex; flex-direction: column; gap: 4px; padding: 0 8px; }
.texto h2 { font: inherit; display: inline-flex; flex-wrap: wrap; column-gap: 8px; }
.texto .barra { display: block; width: 8px; height: 12px; background: var(--foreground); }
.texto .art { display: flex; flex-direction: column; gap: 14.4px; white-space: pre-line; }
.texto h3 { font: inherit; }
.texto p { max-width: 36rem; }

@media (min-width: 768px) {
  .galeria { display: flex; flex-direction: column; gap: 96px; width: 720px; padding: 48px 0; }
  .lamina { position: relative; }
  .lamina figure { width: 83.3333%; margin: 0 auto; }
  .lamina .num { position: absolute; top: 0; right: 12px; font: 10px var(--mono); white-space: nowrap; text-align: right; }
  .ficha { position: fixed; top: 0; left: 0; height: 100%; max-height: 100vh; display: flex; flex-direction: column; align-items: flex-end; overflow-x: hidden; overflow-y: auto; pointer-events: none; z-index: 5; scrollbar-width: none; }
  .ficha::-webkit-scrollbar { display: none; }
  .ficha-in { max-width: 50vw; pointer-events: auto; height: fit-content; }
  .tira { max-width: 100vw; }
  .tira-in { margin-left: -50vw; width: 100vw; padding: 0 0 0 50vw; scroll-snap-type: none; }
  .texto { padding: 0 16px 0 0; }
}


.visor { position: fixed; inset: 0; z-index: 60; overflow: hidden; }
.visor[hidden] { display: none; }
.visor-vela { position: absolute; inset: 0; background: #000; opacity: 0; transition: opacity .25s; }
.visor.on .visor-vela { opacity: .5; }
.visor-pista { position: absolute; inset: 0; display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; opacity: 0; transform: scale(.92); transition: opacity .46s cubic-bezier(.46, .72, 0, 1), transform .46s cubic-bezier(.46, .72, 0, 1); }
.visor-pista::-webkit-scrollbar { display: none; }
.visor.on .visor-pista { opacity: 1; transform: none; }
.visor-pag { flex: none; width: 100vw; height: 100%; scroll-snap-align: center; scroll-snap-stop: always; display: flex; align-items: center; justify-content: center; }
.visor-pag > div { position: relative; width: 100%; height: 100%; max-width: 64rem; max-height: 100vh; }
.visor-pag img, .visor-pag video { width: 100%; height: 100%; object-fit: contain; }


@media (prefers-reduced-motion: reduce) {
  .ph { animation: none; }
  .intro, .intro-marca, .intro-cuenta { transition: none; }
  .visor-pista, .visor-vela { transition: none; }
}