:root {
  --cobalto: #1c25c9;
  --crema: #fff3dc;
  --tinta: #14123a;
  --tinta-suave: #4a4770;
  --cempasuchil: #ffb61f;
  --noche: #100e2e;
  --cartela: #fffaef;
  --margen: clamp(1rem, 5vw, 3.5rem);
  --ancho-pared: 72rem;
  color-scheme: light;
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  line-height: 1.45;
  background: var(--noche);
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--crema);
  background: var(--cobalto);
  overflow-wrap: break-word;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--acento, var(--cempasuchil));
  outline-offset: 3px;
}

/* Entrada */

.entrada {
  --acento: var(--cempasuchil);
  background: var(--cobalto);
  padding: calc(env(safe-area-inset-top, 0px) + 0.75rem) var(--margen) clamp(3rem, 9vh, 6rem);
}

.entrada-interior {
  display: grid;
  gap: clamp(1.75rem, 5vh, 3rem);
  max-width: var(--ancho-pared);
  margin-inline: auto;
}

.volver {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  justify-self: start;
  min-height: 44px;
  font-weight: 600;
  text-decoration: none;
}

.volver:hover { text-decoration: underline; text-underline-offset: 0.2em; }

.antetitulo {
  margin: 0 0 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  font-size: clamp(3.25rem, min(16vw, 24vh), 8.5rem);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.03em;
}

h1 span { color: var(--cempasuchil); }

.texto-pared {
  max-width: 36rem;
  font-size: clamp(1.0625rem, 2.2vw, 1.25rem);
}

.texto-pared p { margin: 0 0 1em; }
.texto-pared p:last-child { margin-bottom: 0; }

.plano h2 {
  margin: 0 0 0.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.plano ol {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgb(255 243 220 / 0.4);
}

.plano li { border-bottom: 1px solid rgb(255 243 220 / 0.4); }

.plano a {
  display: flex;
  align-items: baseline;
  gap: 0.875rem;
  min-height: 48px;
  padding-block: 0.7rem;
  font-size: 1.125rem;
  font-weight: 600;
  text-decoration: none;
}

.plano a:hover { color: var(--cempasuchil); }

.plano-numero { flex: 0 0 2.25rem; font-weight: 400; }
.plano-obras { margin-left: auto; font-size: 0.875rem; font-weight: 400; white-space: nowrap; }

@media (min-width: 44rem) {
  .entrada-interior {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    column-gap: clamp(2rem, 6vw, 5rem);
  }
  .volver, .entrada-rotulo { grid-column: 1 / -1; }
  .plano ol { align-self: start; }
}

/* Salas: cada una con su pintura de pared */

.sala {
  --pared: #efe3c8;
  --texto: var(--tinta);
  --texto-suave: var(--tinta-suave);
  --acento: var(--cobalto);
  --marco: #2b2345;
  --suelo: #c8b78f;
  --luz: rgb(255 255 255 / 0.5);
  background: var(--pared);
  color: var(--texto);
  scroll-margin-top: 0;
}

.sala--altura { --pared: #dde5ec; --suelo: #aebccb; --luz: rgb(255 255 255 / 0.65); }

.sala--la-fosa {
  --pared: #0d1a2b;
  --texto: var(--crema);
  --texto-suave: #c0c9d6;
  --acento: var(--cempasuchil);
  --marco: #050b13;
  --suelo: #060d17;
  --luz: rgb(120 170 220 / 0.14);
}

.sala--la-isla { --pared: #d8ceb0; --suelo: #a6946b; --marco: #3b2c1c; --luz: rgb(255 250 230 / 0.55); }

.sala--ceniza {
  --pared: #17110d;
  --texto: var(--crema);
  --texto-suave: #cfc2ad;
  --acento: var(--cempasuchil);
  --marco: #6e5228;
  --suelo: #0c0806;
  --luz: rgb(255 190 110 / 0.09);
}

.sala--gabinete {
  --pared: var(--cobalto);
  --texto: var(--crema);
  --texto-suave: #dcdcf5;
  --acento: var(--cempasuchil);
  --marco: #0b0e5e;
  --suelo: #12189a;
  --luz: rgb(255 255 255 / 0.1);
}

.sala::after {
  content: "";
  display: block;
  height: clamp(2rem, 6vh, 3.5rem);
  background: linear-gradient(var(--suelo), color-mix(in srgb, var(--suelo) 70%, black));
  border-top: 2px solid rgb(0 0 0 / 0.18);
}

.muro {
  max-width: calc(var(--ancho-pared) + 2 * var(--margen));
  margin-inline: auto;
  padding: clamp(3rem, 9vh, 6rem) var(--margen) clamp(2rem, 5vh, 3rem);
}

.sala-cabecera { max-width: 38rem; }

.sala-numero {
  margin: 0 0 0.25rem;
  color: var(--texto-suave);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.sala h2 {
  margin: 0 0 0.75rem;
  font-size: clamp(2.5rem, min(10vw, 16vh), 5rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.025em;
}

.sala-texto { margin: 0; font-size: 1.0625rem; }

/* Obras */

.obra {
  --disponible: 100%;
  --alto-obra: 74svh;
  --relleno-mate: clamp(0.75rem, 3vw, 2rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  margin: clamp(3.5rem, 11vh, 7rem) 0 0;
  background: radial-gradient(ellipse 65% 55% at 38% 42%, var(--luz), transparent 72%);
}

.marco {
  --mate-usado: var(--mate, #f6efe0);
  display: block;
  flex: 0 0 auto;
  width: min(var(--disponible), var(--tope), calc(var(--alto-obra) * var(--r)));
  padding: var(--relleno-mate);
  border: clamp(0.3rem, 1vw, 0.5rem) solid var(--marco);
  background: var(--mate-usado);
  box-shadow:
    0 1.5rem 2.25rem -1.1rem rgb(0 0 0 / 0.55),
    0 0.2rem 0.5rem rgb(0 0 0 / 0.28);
  cursor: zoom-in;
  font: inherit;
  color: inherit;
  transition: transform 0.25s ease;
}

.marco img {
  display: block;
  width: 100%;
  height: auto;
}

.recortada {
  object-fit: cover;
  object-position: bottom;
}

.marco--sin-mate { padding: 0; }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .marco:hover { transform: translateY(-3px); }
}

@media (prefers-reduced-motion: reduce) {
  .marco { transition: none; }
}

.oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.cartela {
  flex: 0 0 auto;
  width: 100%;
  max-width: 21rem;
  padding: 0.85rem 1rem 0.5rem;
  background: var(--cartela);
  color: var(--tinta);
  box-shadow: 0 0.15rem 0.4rem rgb(0 0 0 / 0.22);
  font-size: 0.9375rem;
}

.cartela-numero {
  margin: 0;
  color: var(--tinta-suave);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.cartela h3, #visor-titulo {
  margin: 0.15rem 0 0.35rem;
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.cartela-nota {
  margin: 0 0 0.35rem;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  line-height: 1.35;
}

.cartela-tecnica {
  margin: 0;
  color: var(--tinta-suave);
  font-size: 0.8125rem;
}

.cartela-juego {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--cobalto);
  font-weight: 700;
  text-underline-offset: 0.2em;
}

.cartela :focus-visible, .visor-cartela :focus-visible { outline-color: var(--cobalto); }

@media (min-width: 44rem) {
  .obra:not(.obra--panoramica) {
    --disponible: calc(100% - 17.5rem);
    flex-direction: row;
    align-items: flex-end;
    gap: 2.5rem;
  }
  .obra:not(.obra--panoramica):nth-of-type(even) {
    flex-direction: row-reverse;
    background: radial-gradient(ellipse 65% 55% at 62% 42%, var(--luz), transparent 72%);
  }
  .cartela { width: 15rem; }
  .obra--panoramica .cartela { width: 100%; max-width: 26rem; }
}

@media (min-width: 60rem) {
  .obras--poliptico {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(3rem, 8vh, 5rem) clamp(2rem, 4vw, 3.5rem);
    margin-top: clamp(3.5rem, 11vh, 7rem);
  }
  .obras--poliptico .obra { margin: 0; }
}

.paso {
  display: flex;
  justify-content: flex-end;
  margin-top: clamp(3rem, 9vh, 5rem);
}

.paso a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 48px;
  font-weight: 700;
  color: inherit;
  text-underline-offset: 0.2em;
}

/* Salida */

.salida {
  --acento: var(--cempasuchil);
  padding: clamp(3.5rem, 11vh, 6rem) var(--margen) calc(env(safe-area-inset-bottom, 0px) + clamp(3rem, 9vh, 5rem));
  background: var(--noche);
  color: var(--crema);
  text-align: center;
}

.salida-rotulo {
  margin: 0 0 1.5rem;
  font-size: clamp(3rem, min(14vw, 20vh), 6.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
}

.boton-salida {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.6rem 1.25rem;
  border-radius: 0.3rem;
  background: var(--crema);
  color: var(--tinta);
  font-weight: 700;
  text-decoration: none;
}

.boton-salida:hover { background: var(--cempasuchil); }

.sin-js {
  margin: 0;
  padding: 2rem var(--margen);
  background: var(--crema);
  color: var(--tinta);
}

/* Visor */

#visor {
  --mate: #14123a;
  --alto-visor: calc(100svh - 19rem);
  width: min(100vw - 1.5rem, 70rem);
  max-width: none;
  max-height: calc(100dvh - 1.5rem);
  margin: auto;
  padding: 0;
  overflow: auto;
  overscroll-behavior: contain;
  border: 0;
  background: var(--cartela);
  color: var(--tinta);
  box-shadow: 0 1.5rem 4rem rgb(0 0 0 / 0.6);
}

#visor[open] {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

#visor::backdrop {
  overflow: hidden;
  overscroll-behavior: contain;
  background: rgb(10 8 30 / 0.88);
}

.visor-lienzo {
  display: grid;
  place-items: center;
  padding: 0.75rem;
  background: var(--mate);
}

#visor-img {
  display: block;
  width: min(100%, calc(var(--alto-visor) * var(--r, 1)));
  height: auto;
}

.visor-cartela { padding: 0.9rem 1rem 0.25rem; }

.visor-cartela .cartela-numero { margin-top: 0; }

.visor-cartela p:empty { display: none; }

#visor-titulo { font-size: 1.375rem; }

.visor-mandos {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem 0.75rem;
}

.visor-boton {
  min-width: 48px;
  min-height: 48px;
  padding: 0 0.75rem;
  border: 1px solid var(--tinta);
  border-radius: 0.3rem;
  background: transparent;
  color: var(--tinta);
  font: inherit;
  font-size: 1.0625rem;
  font-weight: 700;
  cursor: pointer;
}

.visor-boton:hover { background: var(--crema); }
.visor-boton:focus-visible { outline-color: var(--cobalto); }

.visor-posicion {
  margin: 0;
  min-width: 3.5rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.visor-cerrar { margin-left: auto; }

@media (orientation: landscape) and (min-width: 44rem) {
  #visor {
    --alto-visor: calc(100svh - 3rem);
  }
  #visor[open] {
    grid-template-columns: minmax(0, 1fr) 19rem;
    grid-template-rows: minmax(0, 1fr) auto;
    width: min(100vw - 1.5rem, 76rem);
  }
  .visor-lienzo { grid-row: 1 / span 2; }
  .visor-cartela { align-self: end; }
  .visor-mandos { padding-inline: 0.75rem; }
}

@media (prefers-reduced-motion: no-preference) {
  #visor[open] { animation: visor-entra 0.2s ease-out; }
  @keyframes visor-entra {
    from { opacity: 0; transform: translateY(0.5rem); }
    to { opacity: 1; transform: none; }
  }
}