/* =========================================================
   ALTUS VISION® — Portafolio (muro infinito + sala)
   ========================================================= */
:root {
  --bg: #0B0B0D;
  --panel: #141416;
  --line: rgba(241,238,232,.14);
  --bone: #F1EEE8;
  --muted: rgba(241,238,232,.55);
  --accent: #ff2a2a;
  --disp: "Saira", system-ui, sans-serif;
  --body: "Archivo", system-ui, sans-serif;
  --serif: "Instrument Serif", Georgia, serif;
  --ease: cubic-bezier(.19, 1, .22, 1);
  --pad: clamp(16px, 3.2vw, 44px);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; background: var(--bg); }
body {
  color: var(--bone); font-family: var(--body); font-weight: 300;
  -webkit-font-smoothing: antialiased; overflow: hidden; overscroll-behavior: none;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
em { font-family: var(--serif); font-style: italic; font-weight: 400; }
img { display: block; }
.solo-tactil { display: none; }
@media (pointer: coarse) { .solo-fino { display: none; } .solo-tactil { display: inline; } }

/* ---------- barra superior ---------- */
.tope {
  position: fixed; inset: 0 0 auto; z-index: 30; display: flex; align-items: center; gap: 24px;
  padding: calc(env(safe-area-inset-top) + 18px) var(--pad) 18px;
  background: linear-gradient(to bottom, rgba(11,11,13,.85), rgba(11,11,13,0));
  pointer-events: none;
}
.tope > * { pointer-events: auto; }
.tope__marca { font-family: var(--disp); font-stretch: 125%; font-weight: 600; letter-spacing: .14em; font-size: 15px; }
.tope__marca sup { font-size: .5em; vertical-align: super; }
.tope__lugar { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.tope__lugar i { font-style: normal; margin-left: 8px; color: rgba(241,238,232,.38); }
.tope__cta {
  margin-left: auto; font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  padding: 12px 18px; border: 1px solid var(--line); transition: background .3s, color .3s;
}
.tope__cta:hover { background: var(--bone); color: var(--bg); }
@media (max-width: 820px) {
  .tope { gap: 12px; padding-top: calc(env(safe-area-inset-top) + 14px); }
  .tope__lugar { display: none; }
  .tope__cta { padding: 10px 12px; letter-spacing: .14em; }
}

/* ---------- muro ---------- */
.muro { position: fixed; inset: 0; overflow: hidden; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.muro.is-arrastrando { cursor: grabbing; }
@media (pointer: fine) { .muro, .muro.is-arrastrando { cursor: none; } }
.muro__capa { position: absolute; inset: 0; transform-origin: 50% 50%; will-change: transform; }
.tesela {
  position: absolute; top: 0; left: 0; display: block; overflow: hidden; border-radius: 3px;
  background: var(--panel); contain: layout paint; visibility: hidden;
  -webkit-touch-callout: none; -webkit-user-drag: none;
}
.tesela.is-vis { visibility: visible; }
.tesela img, .tesela video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none;
  -webkit-user-drag: none;
}
.tesela img { opacity: 0; transition: opacity .6s ease; }
.tesela img.ok { opacity: 1; }
.tesela video { opacity: 0; transition: opacity .45s ease; }
.tesela video.ok { opacity: 1; }
.tesela::after {   /* velo para atenuar las demás al pasar el cursor (más barato que un filtro) */
  content: ""; position: absolute; inset: 0; background: #0B0B0D; opacity: 0; transition: opacity .35s ease; pointer-events: none;
}
.muro.is-sobre .tesela:not(.is-sobre)::after { opacity: .3; }
.tesela__dur {
  position: absolute; top: 8px; right: 8px; z-index: 2; font: 500 10px/1 var(--body); letter-spacing: .08em;
  padding: 4px 6px; background: rgba(11,11,13,.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-radius: 2px;
}
.tesela__mundo {
  position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 2; font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  opacity: 0; transform: translateY(6px); transition: opacity .35s var(--ease), transform .35s var(--ease);
  text-shadow: 0 1px 12px rgba(0,0,0,.6);
}
.tesela.is-sobre .tesela__mundo { opacity: 1; transform: none; }
@media (max-width: 820px) { .tesela__dur { top: 6px; right: 6px; font-size: 9px; } }

/* ---------- portada sobre el muro ---------- */
.portada {
  position: fixed; inset: 0; z-index: 20; display: grid; place-content: center; text-align: center; gap: 14px;
  pointer-events: none; background: radial-gradient(ellipse at center, rgba(11,11,13,.82) 0%, rgba(11,11,13,.35) 60%, rgba(11,11,13,0) 100%);
  transition: opacity 1s var(--ease), transform 1.2s var(--ease);
}
.portada.is-fuera { opacity: 0; transform: scale(1.04); }
.portada__titulo { font-family: var(--disp); font-stretch: 125%; font-weight: 600; font-size: clamp(56px, 11vw, 190px); line-height: .9; letter-spacing: -.02em; }
.portada__titulo em { font-weight: 400; letter-spacing: 0; }
.portada__dato { font-size: 12px; letter-spacing: .28em; text-transform: uppercase; color: var(--muted); }
.portada__pista { margin-top: 18px; font-size: 12px; letter-spacing: .14em; color: var(--bone); }
.portada__pista span::before { content: ""; display: inline-block; width: 26px; height: 1px; background: var(--bone); vertical-align: middle; margin-right: 12px; animation: pista 2.4s var(--ease) infinite; }
@keyframes pista { 0% { transform: scaleX(.2); transform-origin: left; } 50% { transform: scaleX(1); transform-origin: left; } 100% { transform: scaleX(.2); transform-origin: right; } }

/* ---------- mundos (abajo) ---------- */
.mundos {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; display: flex; gap: 8px; overflow-x: auto;
  padding: 18px var(--pad) calc(env(safe-area-inset-bottom) + 18px);
  background: linear-gradient(to top, rgba(11,11,13,.9), rgba(11,11,13,0)); scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--pad), #000 calc(100% - var(--pad)), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 var(--pad), #000 calc(100% - var(--pad)), transparent 100%);
}
.mundos::-webkit-scrollbar { display: none; }
.mundo {
  flex: none; display: inline-flex; align-items: baseline; gap: 8px; white-space: nowrap;
  padding: 11px 16px; border: 1px solid var(--line); border-radius: 999px; background: rgba(11,11,13,.55);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-size: 12px; letter-spacing: .06em; transition: background .3s, color .3s, border-color .3s;
}
.mundo i { font-style: normal; font-size: 10px; color: var(--muted); letter-spacing: .1em; }
.mundo:hover, .mundo:focus-visible { background: var(--bone); color: var(--bg); border-color: var(--bone); outline: none; }
.mundo:hover i, .mundo:focus-visible i { color: rgba(11,11,13,.6); }

/* ---------- cursor (solo con mouse) ---------- */
.cursor {
  position: fixed; top: 0; left: 0; z-index: 60; width: 86px; height: 86px; margin: -43px 0 0 -43px; border-radius: 50%;
  display: grid; place-items: center; pointer-events: none; border: 1px solid rgba(241,238,232,.6);
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--bone);
  transition: width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease), background .35s, opacity .3s, color .35s;
  will-change: transform; opacity: 0;
}
.cursor.is-on { opacity: 1; }
.cursor.is-ver { background: var(--bone); color: var(--bg); border-color: var(--bone); }
.cursor.is-mini { width: 10px; height: 10px; margin: -5px 0 0 -5px; background: var(--bone); }
.cursor.is-mini span { opacity: 0; }
@media (pointer: coarse) { .cursor { display: none; } }

/* ---------- sala ---------- */
.sala { position: fixed; inset: 0; z-index: 40; background: #050506; }
.sala[hidden] { display: none; }
.sala.is-entrando { animation: salaIn .6s var(--ease) both; }
@keyframes salaIn { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; transform: none; } }
.sala__feed {
  position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; scroll-snap-type: y mandatory;
  overscroll-behavior: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.sala__feed::-webkit-scrollbar { display: none; }
.diapo {
  position: relative; height: 100vh; height: 100dvh; scroll-snap-align: start; scroll-snap-stop: always; overflow: hidden;
  content-visibility: auto; contain-intrinsic-size: 100vw 100vh;
}
.diapo__fondo {
  position: absolute; inset: -8%; width: 116%; height: 116%; object-fit: cover;
  filter: blur(34px) saturate(1.25) brightness(.42); transform: translateZ(0);
}
.diapo__media { position: absolute; inset: 0; }
.diapo__media > img, .diapo__media > video {
  position: absolute; left: 96px; top: 72px; width: calc(100% - 192px); height: calc(100% - 128px); object-fit: contain;
}
.diapo.tiene-video .diapo__poster { opacity: 0; transition: opacity .25s; }
.diapo__pausa {
  position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%;
  background: rgba(11,11,13,.5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display: grid; place-items: center; opacity: 0; transition: opacity .3s; pointer-events: none;
}
.diapo.is-pausa .diapo__pausa { opacity: 1; }
.diapo__pausa::before { content: ""; border-left: 18px solid var(--bone); border-top: 11px solid transparent; border-bottom: 11px solid transparent; margin-left: 5px; }
.diapo__pie {
  position: absolute; left: var(--pad); bottom: calc(env(safe-area-inset-bottom) + 22px); z-index: 2;
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted);
}
.diapo--fin { display: grid; place-content: center; gap: 22px; text-align: center; padding: 0 var(--pad); background: radial-gradient(ellipse at center, #17171a, #050506 70%); }
.diapo--fin h2 { font-family: var(--disp); font-stretch: 125%; font-weight: 500; font-size: clamp(30px, 5.4vw, 76px); line-height: 1; }
.diapo--fin p { color: var(--muted); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }
.fin__acciones { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 8px; }
.fin__btn { padding: 15px 22px; border: 1px solid var(--line); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; transition: background .3s, color .3s; }
.fin__btn:hover, .fin__btn--fuerte { background: var(--bone); color: var(--bg); }
.fin__btn--fuerte:hover { background: transparent; color: var(--bone); }

.sala__bar {
  position: absolute; inset: 0 0 auto; z-index: 3; display: flex; align-items: center; gap: 18px;
  padding: calc(env(safe-area-inset-top) + 16px) var(--pad) 16px;
  background: linear-gradient(to bottom, rgba(5,5,6,.8), rgba(5,5,6,0)); pointer-events: none;
}
.sala__bar > * { pointer-events: auto; }
.sala__volver, .sala__sonido {
  display: inline-flex; align-items: center; gap: 10px; padding: 11px 16px; border: 1px solid var(--line); border-radius: 999px;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase; background: rgba(5,5,6,.45);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: background .3s, color .3s;
}
.sala__volver:hover, .sala__sonido:hover { background: var(--bone); color: var(--bg); }
.sala__titulo { flex: 1; min-width: 0; text-align: center; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sala__titulo b { color: var(--bone); font-weight: 500; }
.sala__sonido i { width: 14px; height: 12px; position: relative; display: inline-block; }
.sala__sonido i::before, .sala__sonido i::after { content: ""; position: absolute; bottom: 0; width: 2px; background: currentColor; }
.sala__sonido i::before { left: 2px; height: 100%; box-shadow: 4px 3px 0 currentColor, 8px 1px 0 currentColor; animation: barras 1s ease-in-out infinite alternate; }
.sala__sonido[aria-pressed="false"] i::before { height: 2px; box-shadow: 4px 0 0 currentColor, 8px 0 0 currentColor; animation: none; }
@keyframes barras { from { height: 40%; } to { height: 100%; } }
.sala__activar {
  position: absolute; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 64px); z-index: 4; transform: translateX(-50%);
  padding: 13px 20px; border-radius: 999px; background: var(--bone); color: var(--bg); font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  box-shadow: 0 10px 40px rgba(0,0,0,.4);
}
.sala__activar[hidden] { display: none; }
.sala__prog { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; height: 2px; background: rgba(241,238,232,.12); }
.sala__prog i { display: block; height: 100%; width: 100%; background: var(--bone); transform: scaleX(0); transform-origin: left; }
.sala__indice {
  position: absolute; right: calc(var(--pad) - 6px); top: 50%; z-index: 3; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 6px; max-height: 70vh; overflow-y: auto; padding: 6px; scrollbar-width: none;
}
.sala__indice::-webkit-scrollbar { display: none; }
.sala__indice button { flex: none; width: 46px; height: 46px; border-radius: 3px; overflow: hidden; opacity: .4; transition: opacity .3s, transform .3s var(--ease); outline-offset: 2px; }
.sala__indice button img { width: 100%; height: 100%; object-fit: cover; }
.sala__indice button:hover { opacity: .85; }
.sala__indice button.is-on { opacity: 1; transform: scale(1.12); outline: 1px solid var(--bone); }
@media (max-width: 820px), (pointer: coarse) {
  .sala__indice { display: none; }
  .sala__bar { gap: 10px; }
  .sala__volver, .sala__sonido { padding: 10px 13px; letter-spacing: .12em; }
  .sala__sonido span { display: none; }
  .diapo__media > img, .diapo__media > video { left: 0; top: 0; width: 100%; height: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .sala.is-entrando { animation: none; }
  .portada__pista span::before { animation: none; }
}
.sin-js { position: fixed; inset: 0; display: grid; place-content: center; text-align: center; gap: 10px; }

/* ---------- botón ES / EN ---------- */
.idioma { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: rgba(11,11,13,.4); color: var(--bone); cursor: pointer; font: 600 10px/1 var(--disp); letter-spacing: .16em; }
.idioma span { padding: 7px 9px; border-radius: 999px; opacity: .55; transition: opacity .25s ease, background .25s ease, color .25s ease; }
.idioma span.is-on { opacity: 1; background: var(--bone); color: var(--bg); }
.tope__idioma { margin-left: auto; }
.tope__idioma + .tope__cta { margin-left: 10px; }
.tope__marca { white-space: nowrap; }
@media (max-width: 420px) {
  .tope { gap: 8px; }
  .tope__marca { font-size: 13px; letter-spacing: .1em; }
  .tope__cta { padding: 9px 10px; font-size: 10px; letter-spacing: .1em; }
  .tope__idioma span { padding: 6px 7px; }
}