/* ============================================================
   Casa de los Leones - demo taste
   Dirección: "galería con doble luz". Marca fija del manual,
   composición asimétrica, esquinas rectas, tema claro y oscuro.

   Paleta (manual de marca, sin colores fuera de esta lista):
     crema     #FAEFE6
     cafe      #3D2312
     olivo     #6E5F40
     arena     #F8DEA0
     terracota #C54027

   Reglas de color aplicadas:
   - Un solo acento (terracota) en toda la página, en ambos temas.
     Se usa como relleno, filete y marca de sección, nunca como
     texto pequeño sobre crema (no alcanza 4.5:1).
   - El botón primario usa cafe sobre crema (12.9:1) en tema claro y
     arena sobre cafe (12.6:1) en tema oscuro.
   ============================================================ */

/* ---------- Tipografía de marca ----------
   Manual de identidad (2026-09-11, p. 13):
     Cinzel Decorative  logo y textos cortos muy relevantes (el logo ya es
                        imagen: no se carga la fuente sin texto vivo que la use)
     Times New Roman    títulos y subtítulos importantes
     Montserrat         texto
   Times New Roman se toma del dispositivo: el TTF recibido no acredita
   licencia de distribución web. Montserrat se autoaloja desde la
   distribución oficial (OFL), instancia 400-600, subconjunto latín. */
@font-face {
  font-family: "Montserrat";
  src: url("assets/fonts/montserrat-latin-wght400-600.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --crema: #FAEFE6;
  --cafe: #3D2312;
  --olivo: #6E5F40;
  --arena: #F8DEA0;
  --terracota: #C54027;

  /* Tema claro (por defecto) */
  --bg: var(--crema);
  --bg-alt: #F4E5D9;              /* crema con un velo de cafe */
  --surface: rgba(61, 35, 18, 0.04);
  --ink: var(--cafe);
  --ink-soft: var(--olivo);
  --line: rgba(61, 35, 18, 0.16);
  --line-strong: rgba(61, 35, 18, 0.32);
  --accent: var(--terracota);
  /* Mismo terracota, un punto más oscuro, solo para el relleno del botón al
     pasar el cursor: crema sobre terracota da 4.485:1 y el mínimo es 4.5:1.
     Es ajuste de tono dentro de la paleta aprobada, no un color nuevo. */
  --accent-strong: #B93A22;
  /* Acento cuando es TEXTO pequeño (enlaces al pasar el cursor). La terracota
     de marca no llega a 4.5:1 sobre crema, y en tema oscuro sobre café se
     queda en 2.9:1. Los filetes, puntos y rellenos siguen usando --accent. */
  --accent-text: var(--accent-strong);
  --btn-bg: var(--cafe);
  --btn-ink: var(--crema);
  --shadow: 0 18px 48px rgba(61, 35, 18, 0.10);

  --font-display: "Times New Roman", Times, "Liberation Serif", "Nimbus Roman", Tinos, Georgia, serif;
  --font-ui: "Montserrat", "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
  /* Acento de marca (Cinzel Decorative en el manual): hoy lo resuelve el
     logotipo en imagen; si algún texto vivo lo necesita, se carga entonces. */
  --font-accent: var(--font-display);

  --shell: 1320px;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  /* Alto de la fila del encabezado y alto total con la barra de horarios.
     --header-h es un valor de partida: el JavaScript lo sustituye por la
     medida real, que cambia con el ancho y con el largo del texto. */
  --header-row-h: 72px;
  --header-h: 100px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* Una sola escala de esquinas en toda la página: recta. */
  --radius: 0px;

  /* Ritmo vertical. Una escala corta, fluida, en lugar de un clamp distinto
     por seccion. Los valores son puntos de partida: cada componente puede
     apartarse cuando lo necesita, como el mapa en pantallas bajas. */
  --pad-seccion: clamp(3rem, 6vw, 6rem);          /* 48 - 96 px */
  --pad-presentacion: clamp(2.5rem, 4vw, 3.5rem); /* 40 - 56 px */
  --gap-titulo: clamp(1rem, 2vw, 1.5rem);         /* 16 - 24 px */
  --gap-accion: clamp(1.5rem, 2.5vw, 2rem);       /* 24 - 32 px */

  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: var(--cafe);
  --bg-alt: #341E0F;              /* cafe con un velo mas profundo */
  --surface: rgba(250, 239, 230, 0.06);
  --ink: var(--crema);
  --ink-soft: rgba(250, 239, 230, 0.72);
  --line: rgba(250, 239, 230, 0.18);
  --line-strong: rgba(250, 239, 230, 0.38);
  --accent: var(--terracota);
  --accent-text: var(--arena);
  --btn-bg: var(--arena);
  --btn-ink: var(--cafe);
  --shadow: 0 18px 48px rgba(0, 0, 0, 0.32);

  color-scheme: dark;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.65;
  overflow-x: hidden;
  transition: background-color 0.4s var(--ease), color 0.4s var(--ease);
}

img { max-width: 100%; height: auto; display: block; }

figure { margin: 0; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
/* Terracota sobre café queda en 2.9:1, por debajo del 3:1 que necesita un
   indicador de foco. En tema oscuro el foco usa arena (11:1). */
:root[data-theme="dark"] :focus-visible { outline-color: var(--arena); }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--btn-bg); color: var(--btn-ink);
  padding: 0.75rem 1.25rem; font-size: 0.875rem; text-decoration: none;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 1rem; }

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- Tipografía ---------- */
.h-display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.1rem, 4.4vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0 0 0.75rem;
  text-wrap: balance;
}

.lead {
  font-size: clamp(1.02rem, 1.5vw, 1.15rem);
  color: var(--ink-soft);
  max-width: 60ch;
  margin: 0 0 1.5rem;
}

.note {
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 62ch;
  margin: 0.75rem 0 0;
}

/* Etiqueta pequeña de sección. Se usa 3 veces en toda la página. */
.eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-soft);
  margin: 0 0 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.eyebrow::before {
  content: "";
  width: 2.25rem; height: 2px;
  background: var(--accent);
  flex: none;
}

/* ---------- Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  padding: 0.9rem 1.6rem;
  font-family: var(--font-ui);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  /* 180 ms: respuesta inmediata al pulsar, sin esperar a que nada termine. */
  transition: transform 180ms var(--ease), background-color 180ms var(--ease),
              color 180ms var(--ease), border-color 180ms var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn--solid { background: var(--btn-bg); color: var(--btn-ink); }
.btn--solid:hover { background: var(--accent-strong); color: var(--crema); }

.btn--line {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn--line:hover { border-color: var(--accent); }

/* Variante para el bloque de cierre, que siempre va sobre cafe. */
.btn--line-light {
  background: transparent;
  color: var(--crema);
  border-color: rgba(250, 239, 230, 0.45);
}
.btn--line-light:hover { border-color: var(--arena); color: var(--arena); }

.btn--sm { padding: 0.62rem 1.05rem; font-size: 0.82rem; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 2px;
  transition: border-color 0.25s var(--ease);
}
.link-arrow::after { content: "\2192"; transition: transform 0.25s var(--ease); }
.link-arrow:hover { border-color: var(--accent); }
.link-arrow:hover::after { transform: translateX(3px); }

/* ---------- Header ---------- */
.header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease);
}
.header.is-stuck { border-bottom-color: var(--line); }

@supports not (backdrop-filter: blur(10px)) {
  .header { background: var(--bg); }
}

/* Barra de horarios: una franja fina dentro del encabezado fijo, no una
   sección más. El estado de apertura vivía duplicado en la banda de datos;
   ahora está solo aquí. */
.header__hours {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.header__hours-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  padding-block: 0.4rem;
  font-size: 0.82rem;
  line-height: 1.3;
  color: var(--ink-soft);
}
.header__hours-row [data-status-text] { color: var(--ink); font-weight: 500; }

.header__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  /* Altura propia de la fila. No usa --header-h porque el JavaScript mide con
     ella el encabezado completo, franja incluida: si la fila dependiera de ese
     valor, el encabezado crecería en cada medición. */
  min-height: var(--header-row-h);
}

/* El CTA de visita es ahora un hijo de la fila, no del menu. Para que en
   escritorio siga leyendose como parte del grupo de la derecha, la fila deja
   de repartir con space-between y es el menu quien se empuja con margin. */
.header__row { justify-content: flex-start; }
.nav { margin-left: auto; }
.header__cta { flex: 0 0 auto; }

.brand { display: inline-flex; align-items: center; text-decoration: none; }
/* Logotipo oficial (identidad 2026-09-11), recortado al dibujo por
   scripts/build-brand-assets.py. Variante naranja sobre crema y beige sobre
   café: se alternan dos imágenes reales, sin filtros ni fusiones. */
.brand__logo {
  width: auto;
  height: clamp(42px, 3.9vw, 52px);
  object-fit: contain;
}
.brand-variant--dark { display: none; }
:root[data-theme="dark"] .brand-variant--light { display: none; }
:root[data-theme="dark"] .brand-variant--dark { display: block; }

.nav { display: flex; align-items: center; gap: 2rem; }

.nav__list {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__list a {
  position: relative;
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--ink-soft);
  padding-block: 0.35rem;
  transition: color 0.25s var(--ease);
}
.nav__list a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}
.nav__list a:hover { color: var(--ink); }
.nav__list a:hover::after,
.nav__list a.is-current::after { transform: scaleX(1); }
.nav__list a.is-current { color: var(--ink); }

.nav__tools { display: flex; align-items: center; gap: 0.9rem; }

.lang { display: inline-flex; align-items: center; gap: 0.25rem; }
.lang__btn {
  background: none;
  border: 0;
  padding: 0.3rem 0.35rem;
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}
/* El selector son enlaces a la otra versión del sitio, no botones que
   traducen en el navegador: conservan el mismo aspecto. */
.lang__btn { text-decoration: none; display: inline-block; }
.lang__btn:hover { color: var(--ink); }
.lang__btn.is-active { color: var(--ink); border-bottom-color: var(--accent); }

.theme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  background: none;
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 1.05rem;
  cursor: pointer;
  transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease);
}
.theme:hover { border-color: var(--accent); background: var(--surface); }

.burger {
  display: none;
  width: 44px; height: 44px;
  background: none;
  border: 1px solid var(--line);
  cursor: pointer;
  position: relative;
}
.burger__lines,
.burger__lines::before,
.burger__lines::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 20px; height: 1.5px;
  background: var(--ink);
  transform: translateX(-50%);
  transition: transform 0.3s var(--ease), opacity 0.2s var(--ease);
}
.burger__lines { top: 50%; transform: translate(-50%, -50%); }
.burger__lines::before { top: -6px; left: 0; transform: none; }
.burger__lines::after { top: 6px; left: 0; transform: none; }
.burger[aria-expanded="true"] .burger__lines { background: transparent; }
.burger[aria-expanded="true"] .burger__lines::before { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__lines::after { transform: translateY(-6px) rotate(-45deg); }

/* ---------- 1. Hero ---------- */
.hero {
  display: grid;
  grid-template-columns: 1.12fr 1fr;
  align-items: stretch;
  min-height: calc(100dvh - var(--header-h));
  border-bottom: 1px solid var(--line);
}

.hero__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2.5rem, 5vw, 5rem) clamp(1.25rem, 4vw, 4rem) clamp(2.5rem, 5vw, 5rem);
  padding-left: max(var(--gutter), calc((100vw - var(--shell)) / 2 + var(--gutter)));
}

.hero__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.4rem, 4.4vw, 3.9rem);
  line-height: 1.04;
  letter-spacing: -0.01em;
  margin: 0 0 1.4rem;
  max-width: 21ch;
}
.hero__title em {
  display: block;
  font-style: italic;
  font-weight: 400;
  line-height: 1.12;
  padding-bottom: 0.12em;
  color: var(--accent);
}
:root[data-theme="dark"] .hero__title em { color: var(--arena); }

.hero__lead {
  font-size: clamp(1.05rem, 1.6vw, 1.22rem);
  color: var(--ink-soft);
  max-width: 40ch;
  margin: 0 0 2rem;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 0.9rem; }

/* Composición original: fotografía a toda la altura de la columna derecha.
   El recorte es centrado; la proporción original no limita la altura del hero. */
.hero__media {
  position: relative;
  overflow: hidden;
  align-self: stretch;
  min-width: 0;
}
/* Clases propias, no `.hero__media img`: la capa de entrada mete su propio
   isotipo dentro del panel y no debe heredar el recorte `cover` de la foto. */
.hero__photo,
.hero__door-photo {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ---------- Hero: la puerta espera al visitante ----------
   Sin reloj: la fotografía se revela cuando el visitante lo pide. La puerta
   se arma desde el script en línea de la portada, antes del primer pintado,
   para que la fachada no llegue a verse nítida y taparse después. El resto
   de la página nunca se bloquea: texto, menú y los dos CTA están vivos.

   El revelado dura 2,2 s y está escalonado, no es un fundido plano. Se anima
   solo opacidad y `transform`, que el compositor resuelve sin repintar: el
   desenfoque sigue siendo fijo y lo que produce el enfoque progresivo es la
   copia borrosa disolviéndose sobre la foto nítida que ya está debajo. */
.hero__door { display: none; }

:root.hero-door-armed .hero__door {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  width: 100%; height: 100%;
  padding: 0; border: 0; border-radius: 0;
  background: transparent;
  color: var(--crema);
  font: inherit;
  cursor: pointer;
  opacity: 1;
  transition: opacity var(--puerta-dur, 2600ms) cubic-bezier(0.5, 0, 0.5, 1), visibility 0s;
  /* Cierre de entrada: más breve que el revelado. Abrir es el gesto que
     el visitante pidió y merece tiempo; cerrar solo presenta la casa. */
  --puerta-cierre: 1600ms;
}

/* Un recurso que falló retira la puerta sin discusión, por encima del armado. */
:root .hero__door[hidden] { display: none; }

/* Entrada al cargar: la portada abre con la fachada NÍTIDA y la puerta se
   cierra encima. Se hace con animaciones, no retirando una clase en el
   cuadro siguiente: aquello dependía de que el navegador hubiera pintado
   antes un fotograma con el estado inicial, y en una recarga con caché
   caliente puede no haberlo hecho — entonces no había transición y la
   portada aparecía difusa de golpe. Una animación se reproduce siempre.

   `backwards` mantiene el primer fotograma durante el retardo, así que la
   fachada se ve limpia hasta que a cada capa le toca entrar. Sin `forwards`
   a propósito: al terminar, los valores vuelven a salir de las reglas de
   arriba, que ya son el estado cerrado, y así no bloquean las transiciones
   del revelado. Una animación con `forwards` gana a cualquier transición
   posterior sobre la misma propiedad, y la puerta no se abriría. */
:root.hero-door-armed .hero__door-photo {
  animation: hero-cierre-foto calc(var(--puerta-cierre, 1600ms) * 0.5) cubic-bezier(0.5, 0, 0.5, 1)
             calc(var(--puerta-cierre, 1600ms) * 0.25) backwards;
}
:root.hero-door-armed .hero__door-veil {
  animation: hero-cierre-velo calc(var(--puerta-cierre, 1600ms) * 0.5) cubic-bezier(0.5, 0, 0.5, 1)
             calc(var(--puerta-cierre, 1600ms) * 0.44) backwards;
}
:root.hero-door-armed .hero__door-mark {
  animation: hero-cierre-iso calc(var(--puerta-cierre, 1600ms) * 0.38) cubic-bezier(0.5, 0, 0.5, 1)
             calc(var(--puerta-cierre, 1600ms) * 0.62) backwards;
}
:root.hero-door-armed .hero__door-hint {
  animation: hero-cierre-pista 300ms linear calc(var(--puerta-cierre, 1600ms) * 0.81) backwards;
}

@keyframes hero-cierre-foto {
  from { filter: blur(0); transform: scale(1); }
}
@keyframes hero-cierre-velo { from { opacity: 0; } }
@keyframes hero-cierre-iso  { from { opacity: 0; } }
@keyframes hero-cierre-pista {
  from { opacity: 0; transform: translateX(-50%) translateY(6px); }
}

/* Al revelar, la entrada deja de competir. `script.js` fija antes los valores
   en línea para que el revelado arranque desde donde esté la puerta y no dé
   un salto; sin él, el salto ocurre pero la puerta abre igual. */
.hero__media.is-revealed .hero__door-photo,
.hero__media.is-revealed .hero__door-veil,
.hero__media.is-revealed .hero__door-mark,
.hero__media.is-revealed .hero__door-hint { animation: none; }

.hero__door:focus-visible,
.hero__photo:focus-visible {
  outline: 3px solid var(--arena);
  outline-offset: -8px;
}

.hero__media.is-revealed .hero__door {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--puerta-dur, 2600ms) cubic-bezier(0.5, 0, 0.5, 1),
              visibility 0s var(--puerta-dur, 2600ms);
}

/* El desenfoque es fijo, no animado: se rasteriza una vez y lo único que
   cambia es la opacidad de la capa, que el compositor resuelve sin repintar
   la fotografía. La ampliación esconde el borde translúcido que deja el
   desenfoque y afecta solo a esta copia transitoria: la foto final no cambia
   de tamaño ni de recorte. */
.hero__door-photo {
  /* Aquí sí se anima el desenfoque, y es deliberado. Con un radio fijo, la
     capa solo podía disolverse: a media opacidad, un desenfoque sobre la
     misma fotografía se lee como un velo, no como fuera de foco, y la
     segunda mitad del revelado no se percibía. Subirlo hasta que sí se
     notara borraba la fachada en reposo, que el plan pedía conservar
     reconocible. Animarlo resuelve las dos cosas: 9 px deja ver la
     arquitectura y el enfoque progresivo es real, no simulado.

     El coste que el plan avisaba —animar `blur` sobre una superficie
     grande— se acota: ocurre una sola vez, sobre un elemento, y solo
     cuando el visitante lo pide. No hay desenfoque animado en la carga.
     La escala acompaña como gesto de cámara y tapa el borde translúcido.
     Todo afecta solo a esta copia transitoria: la foto final no cambia. */
  filter: blur(9px);
  transform: scale(1.1);
  /* Dirección de cierre. La de apertura la fija `.is-revealed`, que trae su
     propia `transition`: cada sentido tiene su ritmo. */
  transition: transform calc(var(--puerta-cierre, 1600ms) * 0.5) cubic-bezier(0.5, 0, 0.5, 1)
              calc(var(--puerta-cierre, 1600ms) * 0.25),
              filter calc(var(--puerta-cierre, 1600ms) * 0.5) cubic-bezier(0.5, 0, 0.5, 1)
              calc(var(--puerta-cierre, 1600ms) * 0.25);
  will-change: filter, transform;
}
.hero__media.is-revealed .hero__door-photo {
  transform: scale(1);
  filter: blur(0);
  /* Tiempos propios del revelado: sin ellos heredaría los retardos del
     cierre y un clic temprano seguiría desenfocando antes de resolver. */
  transition: transform var(--puerta-dur, 2600ms) cubic-bezier(0.5, 0, 0.5, 1),
              filter var(--puerta-dur, 2600ms) cubic-bezier(0.5, 0, 0.5, 1);
}

/* El velo se va después que el isotipo y antes que la capa: entre los dos
   deja el tramo en que solo queda la fachada resolviéndose. */
.hero__media.is-revealed .hero__door-veil {
  opacity: 0;
  transition: opacity calc(var(--puerta-dur, 2600ms) * 0.84) cubic-bezier(0.5, 0, 0.5, 1)
              calc(var(--puerta-dur, 2600ms) * 0.12);
}

/* La puerta se retira primero: es lo que el visitante acaba de abrir. */
.hero__media.is-revealed .hero__door-mark {
  opacity: 0;
  transition: opacity calc(var(--puerta-dur, 2600ms) * 0.58) cubic-bezier(0.5, 0, 0.5, 1)
              calc(var(--puerta-dur, 2600ms) * 0.06);
}

/* La indicación se va enseguida, ya cumplió. */
.hero__media.is-revealed .hero__door-hint {
  opacity: 0;
  transform: translateX(-50%) translateY(6px);
  transition: opacity 260ms linear, transform 360ms cubic-bezier(0.5, 0, 0.5, 1);
}

.hero__door-veil {
  position: absolute;
  inset: 0;
  background: var(--cafe);
  opacity: 0.24;
  transition: opacity calc(var(--puerta-cierre, 1600ms) * 0.5) cubic-bezier(0.5, 0, 0.5, 1)
              calc(var(--puerta-cierre, 1600ms) * 0.44);
}

/* Isotipo centrado en el panel fotográfico, no en la pantalla. Tope de 280 px
   y márgenes siempre visibles. Estático mientras se ve: sin rebote, giro ni
   zoom. El derivado de 840 px conserva nitidez hasta el tope CSS a 3x. */
.hero__door-mark {
  position: absolute;
  top: 50%; left: 50%;
  translate: -50% -50%;
  height: min(35%, 280px);
  width: auto;
  max-width: 62%;
  aspect-ratio: 443 / 840;
  object-fit: contain;
  pointer-events: none;
  transition: opacity calc(var(--puerta-cierre, 1600ms) * 0.38) cubic-bezier(0.5, 0, 0.5, 1)
              calc(var(--puerta-cierre, 1600ms) * 0.62);
}
.hero__door-hint {
  position: absolute;
  bottom: clamp(1rem, 3vw, 2rem);
  left: 50%;
  transform: translateX(-50%);
  padding: 0.5rem 0.9rem;
  border: 1px solid rgba(250, 239, 230, 0.55);
  background: rgba(61, 35, 18, 0.85);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity 300ms linear calc(var(--puerta-cierre, 1600ms) * 0.81),
              transform 300ms cubic-bezier(0.5, 0, 0.5, 1) calc(var(--puerta-cierre, 1600ms) * 0.81);
}

/* ---------- 2. Banda de datos ---------- */
.facts {
  background: var(--bg-alt);
  border-bottom: 1px solid var(--line);
}
/* Tres datos desde que el horario vive en el encabezado. */
.facts__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.fact {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  padding: 1.15rem 1.5rem 1.15rem 0;
  font-size: 0.88rem;
  color: var(--ink-soft);
  border-left: 1px solid var(--line);
  padding-left: 1.5rem;
}
.fact:first-child { border-left: 0; padding-left: 0; }
.fact i { font-size: 1.15rem; color: var(--ink); flex: none; }
.fact__value { color: var(--ink); font-weight: 500; }

/* Único indicador de estado de la página: informa apertura real. */
.status__dot {
  width: 8px; height: 8px;
  background: var(--accent);
  flex: none;
  border-radius: 50%;
}
.fact--status.is-closed .status__dot { background: var(--ink-soft); }

/* ---------- 3. Declaración ---------- */
.statement {
  padding: var(--pad-presentacion) 0;
  border-bottom: 1px solid var(--line);
}
.statement__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2.5rem, 7vw, 7rem);
  align-items: start;
}
.statement__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 3.35rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0;
  max-width: 18ch;
  text-wrap: balance;
}
.statement__body {
  color: var(--ink-soft);
  max-width: 62ch;
  padding-left: clamp(1.5rem, 3vw, 2.75rem);
  border-left: 1px solid var(--line-strong);
}
.statement__body p { margin: 0; max-width: 62ch; }
.statement__body p + p { margin-top: 1.1rem; }

/* ---------- 4. Explora la casa (mapa interactivo) ---------- */
.explora {
  padding: var(--pad-seccion) 0;
  border-bottom: 1px solid var(--line);
}

.explora__modes {
  display: flex;
  gap: 0.4rem;
  width: 100%;
  margin: 0.5rem 0 1rem;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--line);
}
.explora__mode {
  flex: 1;
  padding: 0.6rem 1.2rem;
  font-family: var(--font-ui);
  font-size: 0.86rem;
  font-weight: 600;
  background: none;
  border: 0;
  color: var(--ink-soft);
  cursor: pointer;
  min-height: 44px;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.explora__mode:hover { color: var(--ink); }
.explora__mode.is-active { background: var(--btn-bg); color: var(--btn-ink); }

.explora__map {
  display: grid;
  grid-template-columns: 1fr 340px;
  grid-template-areas: "frame controls";
  gap: clamp(1.25rem, 3vw, 2rem);
  align-items: start;
  width: 100%;
  max-width: min(100%, var(--explora-map-max-width, 100%));
  margin-inline: auto;
}

.explora__frame {
  grid-area: frame;
  position: relative;
  width: 100%;
  aspect-ratio: 2772 / 2004;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  /* Sin overflow:hidden: la fotografía llena el marco exactamente (misma
     proporción), y así el punto 6 (anclado al 95.78% del ancho) no se
     recorta al mostrar su círculo y su foco. */
}
.explora__photo { width: 100%; height: 100%; object-fit: contain; }

.explora__controls {
  grid-area: controls;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-self: stretch;
}
.explora__intro .h-display {
  font-size: clamp(2rem, 3vw, 2.8rem);
}
.explora__intro .lead {
  font-size: 0.95rem;
  line-height: 1.55;
  margin-bottom: 0;
}

.explora__overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.explora__murales-line {
  fill: none;
  stroke: var(--terracota);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 24 18;
  opacity: 0.82;
}
.explora__murales-point {
  fill: var(--terracota);
  stroke: var(--bg-alt);
  stroke-width: 10;
}

.explora__hotspots { position: absolute; inset: 0; }
.explora__map[data-mode="visita"] .explora__hotspots { display: none; }

.explora__pin {
  position: absolute;
  /* Los siete puntos se reparten sobre la ilustración; la separación menor
     entre dos vecinos (IV y V) es el 8.56% del ancho del marco. El punto se
     limita a algo menos que eso, de modo que nunca se solapen, y crece hasta
     los 44 px de área táctil en cuanto el marco lo permite. Por debajo de ese
     ancho, la navegación Anterior/Siguiente y los indicadores conservan
     objetivos táctiles completos. */
  width: min(44px, 8.2%);
  aspect-ratio: 1;
  height: auto;
  min-width: 0;
  min-height: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
  background: var(--paper, var(--crema));
  color: var(--cafe);
  border: 2px solid var(--terracota);
  border-radius: 50%;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: clamp(0.5rem, 1.7vw, 0.85rem);
  letter-spacing: 0.01em;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(61, 35, 18, 0.14);
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.explora__pin:hover { transform: translate(-50%, -50%) scale(1.08); }
.explora__pin.is-selected {
  /* `--accent-strong`, no `--terracota`: crema sobre terracota daba 4,485:1
     con el numero a 13,6 px, por debajo del 4,5:1 exigible. Con el tono un
     punto mas oscuro sube a 5,03:1 sin salir de la paleta. */
  background: var(--accent-strong);
  color: var(--crema);
  box-shadow: 0 6px 18px rgba(61, 35, 18, 0.3);
}

/* Fundido breve del contenido nuevo de la ficha: se anima el texto, no el
   plano entero. La animacion se reinicia en cada cambio, asi que pulsar
   rapido entre espacios no superpone fundidos. */
.explora__panel.ficha-entra .explora__panel-title,
.explora__panel.ficha-entra .explora__panel-body,
.explora__panel.ficha-entra .explora__panel-actions,
.explora__map.ficha-entra .explora__spacelabel {
  animation: ficha-entra 200ms var(--ease);
}
@keyframes ficha-entra { from { opacity: 0; } }

/* El axonometrico deja libre la esquina superior izquierda: el edificio
   arranca abajo a la izquierda y sube hacia la derecha. Ahi va el nombre del
   espacio elegido, para saber que se esta leyendo sin depender del panel.
   En movil importa mas, porque el dibujo queda fijo mientras se lee. */
.explora__spacelabel {
  position: absolute;
  top: 5%;
  left: 5%;
  max-width: 46%;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1rem, 2.2vw, 1.5rem);
  line-height: 1.25;
  color: var(--ink);
  pointer-events: none;
}
/* Con el nombre sobre el dibujo, el titulo del panel lo repetiria: en movil
   el dibujo queda fijo y los dos se ven a la vez. Se oculta a la vista pero
   se conserva para lectores de pantalla, que es quien lo anuncia por el
   aria-live del panel. Solo mientras hay espacio elegido: en la intro y en
   modo Visita no hay etiqueta en el dibujo y el panel recupera su titulo. */
.explora__map.tiene-etiqueta .explora__panel-title {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.explora__spacelabel span {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.72em;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 0.15rem;
}

.explora__murales-hotspot {
  position: absolute;
  right: 6%;
  bottom: 25%;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.4rem 0.85rem 0.4rem 0.55rem;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  border: 1px solid var(--line-strong);
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 3px 10px rgba(61, 35, 18, 0.12);
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.explora__murales-hotspot:hover { border-color: var(--accent); }
.explora__murales-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--terracota);
  flex: none;
}

.explora__panel {
  grid-area: panel;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  padding: 1.25rem;
  min-height: 170px;
}
.explora__panel-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.explora__pill {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 0.3rem 0.6rem;
}
.explora__progress { font-size: 0.78rem; color: var(--ink-soft); }
.explora__panel-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.5rem;
  margin: 0 0 0.5rem;
}
.explora__panel-body { margin: 0; color: var(--ink-soft); }
.explora__panel-actions:empty { display: none; }
.explora__panel-actions { margin-top: 1.1rem; }

.explora__spacenav {
  grid-area: spacenav;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
}
.explora__spacenav[hidden] { display: none; }
.explora__navbtn {
  grid-row: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  padding: 0.6rem 1rem;
  background: none;
  border: 1px solid var(--line-strong);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  justify-content: center;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.explora__navbtn:hover { border-color: var(--accent); }
.explora__navbtn:disabled { opacity: 0.35; cursor: default; }
.explora__navbtn:disabled:hover { border-color: var(--line-strong); }

.explora__dots {
  grid-column: 1 / -1;
  grid-row: 1;
  display: flex;
  justify-content: center;
  gap: 0.15rem;
}
.explora__dot {
  width: 44px; height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
}
.explora__dot::before {
  content: "";
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: none;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.explora__dot.is-active::before { background: var(--terracota); border-color: var(--terracota); }

.explora__mobile-link { grid-area: mobile; display: none; margin: 1rem 0 0; }

.explora__noscript {
  margin-top: 1.5rem;
  padding: 1.25rem;
  border: 1px solid var(--line);
  background: var(--bg-alt);
}
.explora__noscript ol { margin: 0.75rem 0; padding-left: 1.25rem; }

/* ---------- 5. Eventos privados (panorámica) ---------- */
.event-showcase {
  position: relative;
  min-height: clamp(520px, 68dvh, 680px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
  color: var(--crema);
  background: var(--cafe);
}
.event-showcase__image,
.event-showcase__shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.event-showcase__image {
  z-index: -2;
  object-fit: cover;
  object-position: center;
}
.event-showcase__shade {
  z-index: -1;
  /* Sombra concentrada detrás del texto (izquierda); el patio recupera
     luz antes, hacia el centro y la derecha de la fotografía. */
  background:
    linear-gradient(90deg, rgba(42, 22, 11, 0.90) 0%, rgba(42, 22, 11, 0.6) 26%, rgba(42, 22, 11, 0.08) 54%, rgba(42, 22, 11, 0.02) 100%),
    linear-gradient(0deg, rgba(32, 16, 8, 0.68) 0%, rgba(32, 16, 8, 0) 42%);
}
.event-showcase__inner {
  width: 100%;
  padding-block: clamp(3rem, 7vw, 5rem);
}
.event-showcase__copy { max-width: 610px; }

/* Anchos medios y pantallas bajas: la caja se vuelve mas alta que la foto y
   `cover` recorta el patio por los lados —a 1024x600 solo se veia el 79% del
   ancho, y el patio es justamente lo que hay que apreciar. Se baja la altura
   minima y el relleno para que el encuadre se acerque a la proporcion real de
   la imagen. No se toca el archivo ni su object-position. */
@media (max-width: 1100px), (max-height: 720px) {
  .event-showcase { min-height: clamp(420px, 56dvh, 560px); }
  .event-showcase__inner { padding-block: clamp(2rem, 4vw, 3rem); }
}
.event-showcase__eyebrow {
  margin: 0 0 1rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: rgba(250, 239, 230, 0.82);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.event-showcase__eyebrow::before {
  content: "";
  width: 2.25rem;
  height: 2px;
  flex: none;
  background: var(--terracota);
}
.event-showcase__copy h2 {
  margin: 0 0 1rem;
  max-width: 15ch;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 4.4rem);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.event-showcase__copy > p:not(.event-showcase__eyebrow) {
  max-width: 50ch;
  margin: 0;
  color: rgba(250, 239, 230, 0.88);
  font-size: clamp(1rem, 1.5vw, 1.15rem);
}
.event-showcase__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: 1.75rem;
}
.event-showcase__capacity {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  color: rgba(250, 239, 230, 0.78);
  font-size: 0.8rem;
}
/* Sin aforo acreditado no se publica una cifra: se invita a consultarla.
   Al no haber número grande, el texto necesita su propio tamaño. */
/* Sin la cifra grande de aforo desaparece el escalón visual que separaba
   este dato del apunte siguiente, y ambos se leían como un solo párrafo.
   Se le da ancho para que quepa en una línea y un filete que marca que es
   un dato aparte, no la continuación del texto. */
.event-showcase__capacity--ask {
  font-size: 0.95rem;
  line-height: 1.5;
  color: rgba(250, 239, 230, 0.9);
  max-width: 48ch;
  padding-left: 0.85rem;
  border-left: 2px solid var(--arena);
  /* En pantalla estrecha el texto ocupa dos líneas y el apunte siguiente se
     le pegaba: el margen inferior es lo que separa ambos datos. */
  margin-bottom: 0.5rem;
}

.event-showcase__capacity strong {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 400;
  line-height: 1;
  color: var(--arena);
}
.event-showcase__hint {
  margin: 1.35rem 0 0;
  font-size: 0.82rem;
  color: rgba(250, 239, 230, 0.7);
  max-width: 46ch;
}
.event-showcase .btn--solid {
  background: var(--arena);
  color: var(--cafe);
}
.event-showcase .btn--solid:hover { background: var(--crema); }

/* ---------- 6. Descubre ---------- */
.group-head {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(280px, 0.7fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: end;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.group-head .h-display { margin-bottom: 0; }
.group-head .lead { margin: 0; justify-self: end; }

.discover {
  padding: var(--pad-seccion) 0;
  border-bottom: 1px solid var(--line);
}
.discover__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.discover__card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}
.discover__media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--surface);
}
.discover__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}
.discover__card:hover .discover__media img { transform: scale(1.025); }

/* Controles del carril. En escritorio no existen: hay tres columnas a la
   vista y no hay nada que recorrer. */
.rail-nav { display: none; }
.rail-nav__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  background: none;
  border: 1px solid var(--line-strong);
  color: var(--ink);
  cursor: pointer;
  transition: border-color 180ms var(--ease), color 180ms var(--ease);
}
.rail-nav__btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent-text); }
.rail-nav__btn:disabled { opacity: 0.35; cursor: default; }
.rail-nav__count {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--muted, var(--ink));
  font-variant-numeric: tabular-nums;
}
.discover__copy {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(1.35rem, 2.5vw, 2rem);
}
.discover__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.25rem;
  /* `margin-top: auto`, igual que el enlace suelto de las otras tarjetas: sin
     el, esta —que lleva dos enlaces— quedaba 85 px sobre el borde inferior
     frente a los 32 px de las demas. La de Historia sigue sin enlace: no se
     inventa uno para cuadrar la retícula. */
  margin: 0;
}
/* Mas especifico que `.discover__copy > p`, que es quien le imponia
   `margin: 0 0 1.25rem` —este envoltorio es un <p>— y dejaba sus enlaces
   20 px por encima del pie mientras los de las otras tarjetas quedaban a
   ras del relleno. La de Historia sigue sin enlace: no se inventa uno. */
.discover__copy > .discover__links { margin: auto 0 0; }
.discover__num {
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  color: var(--ink-soft);
  margin-bottom: 0.75rem;
}
.discover__copy h3 {
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 2.4vw, 1.85rem);
  font-weight: 500;
  line-height: 1.12;
  margin: 0 0 0.65rem;
}
.discover__copy > p {
  margin: 0 0 1.25rem;
  color: var(--ink-soft);
  font-size: 0.94rem;
}
.discover__copy > .link-arrow { margin-top: auto; }
.discover__years {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  list-style: none;
  margin: auto 0 0;
  padding: 0;
  background: var(--line);
  border-top: 1px solid var(--line);
}
.discover__years li {
  background: var(--bg);
  padding: 0.8rem 0.55rem 0 0;
}
.discover__years strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
}
.discover__years span {
  display: block;
  color: var(--ink-soft);
  font-size: 0.68rem;
  line-height: 1.35;
}

/* ---------- 6. Qué pasa en la casa ---------- */
.activity {
  position: relative;
  padding: var(--pad-seccion) 0;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--line);
}
.activity__anchor {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  scroll-margin-top: calc(var(--header-h) + 0.75rem);
  pointer-events: none;
}
.activity__tabs {
  display: flex;
  width: max-content;
  max-width: 100%;
  margin-bottom: -1px;
  border: 1px solid var(--line);
  background: var(--bg);
}
.activity__tab {
  min-width: clamp(120px, 14vw, 180px);
  min-height: 50px;
  padding: 0.7rem 1.2rem;
  border: 0;
  border-right: 1px solid var(--line);
  background: transparent;
  color: var(--ink-soft);
  font: 600 0.8rem/1 var(--font-ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
}
.activity__tab:last-child { border-right: 0; }
.activity__tab:hover { color: var(--ink); }
.activity__tab.is-active {
  background: var(--cafe);
  color: var(--crema);
}
.activity__panels { border: 1px solid var(--line); }
.activity__panel {
  min-height: 390px;
  background: var(--bg);
}
.activity__panel[hidden] { display: none; }
/* Estado vacio compacto. La condicion sale del contenido realmente
   renderizado —el build inserta `.activity__empty` cuando no hay nada
   publicado— y no del texto literal de ningun aviso. Con actividades
   reales el panel vuelve a su altura minima y crece con naturalidad. */
.activity__panel:has(> .activity__empty) { min-height: 0; }

/* Fundido breve del contenido al cambiar de pestana. No se reserva la altura
   del panel mas largo ni se anima el cambio de altura. */
.activity__panel:not([hidden]) { animation: ficha-entra 200ms var(--ease); }
.activity__panel--agenda,
.activity__panel--workshops,
.activity__panel--events {
  display: grid;
  grid-template-columns: minmax(260px, 0.82fr) minmax(0, 1.18fr);
}
.activity__intro {
  padding: clamp(1.75rem, 4vw, 3.25rem);
  align-self: center;
}
.activity__kicker {
  margin: 0 0 0.8rem;
  color: var(--ink-soft);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.activity__intro h3 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.4vw, 2.65rem);
  font-weight: 400;
  line-height: 1.08;
  margin: 0 0 1rem;
}
.activity__intro > p:not(.activity__kicker):not(.badge-demo) {
  color: var(--ink-soft);
  margin: 0 0 1.35rem;
}
.activity__list {
  list-style: none;
  margin: 0;
  padding: clamp(1.25rem, 3vw, 2.5rem);
  border-left: 1px solid var(--line);
}
.activity__list li { padding: 1rem 0; border-bottom: 1px solid var(--line); }
.activity__list li:last-child { border-bottom: 0; }
.activity__list h4 {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  font-weight: 500;
  margin: 0 0 0.2rem;
}
.activity__list p { margin: 0; color: var(--ink-soft); font-size: 0.88rem; }
.activity__panel--workshops .accordion {
  align-self: center;
  margin: clamp(1.25rem, 3vw, 2.5rem);
}
/* Estado vacío: cuando el recinto no tiene nada publicado, la sección lo dice
   y ofrece contacto, en lugar de mostrar actividades de ejemplo. */
.activity__empty {
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border-left: 1px solid var(--line);
  align-self: center;
}
.activity__empty p {
  margin: 0 0 1rem;
  color: var(--ink-soft);
  max-width: 46ch;
}

/* Imagen opcional de un taller, subida desde el panel. */
.activity__image {
  width: 100%;
  max-width: 420px;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  margin: 0 0 1rem;
  border: 1px solid var(--line);
}

.activity__event-image {
  position: relative;
  min-height: 390px;
  overflow: hidden;
}
.activity__event-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.activity__event-image figcaption {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  padding: 3.5rem 1.5rem 1.25rem;
  color: var(--crema);
  background: linear-gradient(to top, rgba(61, 35, 18, 0.92), rgba(61, 35, 18, 0));
}
.activity__event-image strong {
  font-family: var(--font-display);
  font-size: 2.75rem;
  font-weight: 400;
  line-height: 1;
  color: var(--arena);
}
.activity__event-image span { font-size: 0.8rem; }
.activity__event-spaces {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
}
.activity__event-spaces li {
  padding: 0.4rem 0.65rem;
  border: 1px solid var(--line-strong);
  color: var(--ink-soft);
  font-size: 0.76rem;
}

/* ---------- 4b. Colección ---------- */
.rooms {
  background: var(--bg-alt);
  border-block: 1px solid var(--line);
  padding: var(--pad-seccion) 0;
}
.rooms__grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
.rooms__sticky { position: sticky; top: calc(var(--header-h) + 2rem); }
.rooms__figure { margin: 2rem 0 0; }
.rooms__figure img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.rooms__list { list-style: none; margin: 0; padding: 0; }
.rooms__list li {
  padding: 1.6rem 0;
  border-bottom: 1px solid var(--line);
}
.rooms__list li:first-child { padding-top: 0; }
.rooms__list h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  line-height: 1.2;
  margin: 0 0 0.35rem;
}
.rooms__list p { margin: 0; color: var(--ink-soft); max-width: 48ch; }
.rooms__list li.is-accent {
  border-bottom: 0;
  border-left: 2px solid var(--accent);
  padding-left: 1.25rem;
}

/* ---------- 5. Carril de piezas ---------- */
.rail { padding: var(--pad-seccion) 0; }
.rail__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 2rem;
}
.rail__head .h-display { margin: 0; }
.rail__controls { display: flex; gap: 0.5rem; }
.rail__btn {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none;
  border: 1px solid var(--line-strong);
  color: var(--ink);
  font-size: 1.1rem;
  cursor: pointer;
  transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease),
              color 0.25s var(--ease);
}
.rail__btn:hover { background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-ink); }
.rail__btn[disabled] { opacity: 0.35; cursor: default; }
.rail__btn[disabled]:hover { background: none; border-color: var(--line-strong); color: var(--ink); }

.rail__track {
  display: flex;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: flex-end;
  list-style: none;
  margin: 0;
  padding: 0 var(--gutter) 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  overscroll-behavior-x: contain;
}
.rail__item { flex: none; scroll-snap-align: center; }
.rail__item img {
  border: 1px solid var(--line);
  background: var(--surface);
}
.rail__item p {
  margin: 0.75rem 0 0;
  font-size: 0.82rem;
  color: var(--ink-soft);
}

/* ---------- 6. Eventos (bento) ---------- */
.events {
  background: var(--bg-alt);
  border-block: 1px solid var(--line);
  padding: var(--pad-seccion) 0;
}
.events__head { max-width: 56ch; margin-bottom: 2.5rem; }

.bento {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.bento__cell {
  background: var(--bg);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 190px;
}
.bento__cell h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.3rem, 2.2vw, 1.6rem);
  margin: 0 0 0.4rem;
}
.bento__cell p { margin: 0; color: var(--ink-soft); font-size: 0.94rem; }

.bento__cell--photo {
  grid-column: 1;
  grid-row: 1 / 3;
  position: relative;
  padding: 0;
  overflow: hidden;
  min-height: 380px;
}
.bento__cell--photo img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.bento__cell--photo figcaption {
  position: relative;
  z-index: 1;
  margin: auto 0 0;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  color: var(--crema);
  font-size: 0.95rem;
  background: linear-gradient(to top, rgba(61, 35, 18, 0.88), rgba(61, 35, 18, 0));
}
.bento__figure-num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 5vw, 3.6rem);
  line-height: 1;
  color: var(--arena);
}
.bento__cell--tint { background: var(--surface); }
/* La tercera sala ocupa el ancho restante: la rejilla tiene exactamente
   tantas celdas como contenido, sin huecos vacíos. */
.bento__cell--wide { grid-column: 2 / 4; }

.events__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem;
  margin-top: 2rem;
}
.events__foot .note { margin: 0; flex-basis: 100%; }

/* ---------- 7. Talleres ---------- */
.workshops { padding: var(--pad-seccion) 0; }
.workshops__grid {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
.workshops__head .btn { margin-top: 0.5rem; }

.accordion { border-top: 1px solid var(--line); }
.accordion__item { border-bottom: 1px solid var(--line); }
.accordion__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.35rem 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  font-weight: 500;
  transition: color 0.25s var(--ease);
}
.accordion__item summary::-webkit-details-marker { display: none; }
.accordion__item summary:hover { color: var(--accent-text); }
:root[data-theme="dark"] .accordion__item summary:hover { color: var(--arena); }
.accordion__item summary i {
  font-size: 1.1rem;
  color: var(--ink-soft);
  transition: transform 0.3s var(--ease);
}
.accordion__item[open] summary i { transform: rotate(45deg); }
.accordion__item p {
  margin: 0 0 1.4rem;
  color: var(--ink-soft);
  max-width: 56ch;
}

/* ---------- 8. Agenda ---------- */
.agenda {
  background: var(--bg-alt);
  border-block: 1px solid var(--line);
  padding: var(--pad-seccion) 0;
}
.agenda__grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(2rem, 6vw, 4.5rem);
  align-items: start;
}
.agenda__head .h-display { margin-bottom: 1rem; }

/* Aviso en la versión en inglés cuando el texto largo solo existe en
   español: se dice antes de leerlo, no después. */
.lang-note {
  display: block;
  margin: 0 0 1.4rem;
  padding: 0.7rem 0.95rem;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--ink);
  background: var(--surface);
  border-left: 2px solid var(--accent);
  max-width: 56ch;
}
.lang-note a { font-weight: 600; }

.badge-demo {
  display: inline-block;
  margin: 0;
  padding: 0.6rem 0.9rem;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--ink);
  background: var(--surface);
  border-left: 2px solid var(--accent);
  max-width: 40ch;
}

.agenda__list { list-style: none; margin: 0; padding: 0; }
.agenda__list li {
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--line);
}
.agenda__list li:first-child { padding-top: 0; }
.agenda__date {
  display: block;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 0.5rem;
}
.agenda__list h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.25rem, 2.1vw, 1.55rem);
  margin: 0 0 0.25rem;
}
.agenda__list p { margin: 0; color: var(--ink-soft); font-size: 0.92rem; }
.agenda__grid > .note { grid-column: 2; }

/* ---------- 9. Historia ---------- */
.history { padding: var(--pad-seccion) 0; }
.history__intro { max-width: 62ch; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.history__intro p { color: var(--ink-soft); margin: 0 0 1.1rem; }

.timeline {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border-top: 2px solid var(--accent);
  list-style: none;
  margin: 0;
  padding: 0;
}
.timeline li {
  background: var(--bg);
  padding: 1.75rem clamp(1rem, 2vw, 1.75rem) 2rem;
}
.timeline__year {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  line-height: 1;
  margin-bottom: 0.5rem;
}
.timeline__label { color: var(--ink-soft); font-size: 0.94rem; }

/* ---------- 10. Video ---------- */
.video {
  background: var(--cafe);
  color: var(--crema);
  padding: var(--pad-seccion) 0;
}
.video__inner {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.video__text .lead { color: rgba(250, 239, 230, 0.75); }
.video__facade {
  position: relative;
  aspect-ratio: 16 / 9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  text-align: center;
  padding: 1.5rem;
  border: 1px solid rgba(250, 239, 230, 0.28);
  background: rgba(250, 239, 230, 0.05);
}
.video__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.4rem;
  background: var(--arena);
  color: var(--cafe);
  border: 0;
  font-family: var(--font-ui);
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
}
.video__btn[disabled] {
  background: transparent;
  color: rgba(250, 239, 230, 0.82);
  border: 1px solid rgba(250, 239, 230, 0.4);
  cursor: default;
}
.video__hint { margin: 0; font-size: 0.86rem; color: rgba(250, 239, 230, 0.7); max-width: 40ch; }
.video__facade iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- 11. Visita ---------- */
.visit { padding: var(--pad-seccion) 0; }
/* Dos columnas: lo que se consulta antes de venir, y el lugar. En movil cae
   a una sola, en flujo continuo: tarifas y accesibilidad quedan a la vista,
   nunca dentro de un acordeon. Los bloques se separan con un filete en lugar
   de encerrar cada dato en su propia caja. */
.visit__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin: var(--gap-titulo) 0 0;
  align-items: start;
}
.visit__col { display: flex; flex-direction: column; min-width: 0; }
.visit__col .info-block { padding-inline: 0; }
/* Al pasar Visita a dos columnas la izquierda se ensancho y sus parrafos
   llegaban a unos 79 caracteres por linea. Se acotan a la medida comoda. */
.visit__col .info-block p,
.visit__col .info-block .note { max-width: 60ch; }
.visit__col .info-block + .info-block {
  border-top: 1px solid var(--line);
  margin-top: 0.25rem;
}
.visit__col .map { margin-top: var(--gap-accion); }

@media (max-width: 900px) {
  .visit__layout { grid-template-columns: 1fr; }
}
.info-block { background: var(--bg); padding: clamp(1.35rem, 2.5vw, 1.9rem); }
.info-block h3 {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-soft);
  margin: 0 0 0.85rem;
}
.info-block h3 i { font-size: 1.1rem; color: var(--accent); }
:root[data-theme="dark"] .info-block h3 i { color: var(--arena); }
.info-block p { margin: 0 0 0.7rem; font-size: 0.95rem; }
.info-block .note { margin-top: 0.5rem; }

.prices__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
  margin: 0 0 1.25rem;
}
.prices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  list-style: none;
  margin: 0;
  padding: 0;
}
.prices li {
  background: var(--bg);
  padding: 1.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.prices__value {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.4vw, 2.5rem);
  line-height: 1;
}
.prices__label { font-size: 0.88rem; color: var(--ink-soft); }

.map { margin: 3rem 0 0; }
.map iframe {
  width: 100%;
  height: clamp(280px, 42vw, 420px);
  border: 1px solid var(--line);
  display: block;
  filter: saturate(0.85);
}
.map figcaption {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: space-between;
  margin-top: 0.75rem;
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.map figcaption a { font-weight: 600; }

/* ---------- 12. Cierre ---------- */
.final {
  background: var(--cafe);
  color: var(--crema);
  padding: clamp(4rem, 9vw, 7rem) 0;
  border-top: 2px solid var(--accent);
}
.final__inner { max-width: var(--shell); }
.final__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.1rem, 4.6vw, 3.4rem);
  line-height: 1.1;
  margin: 0 0 1rem;
  max-width: 18ch;
}
.final__lead { color: rgba(250, 239, 230, 0.78); margin: 0 0 2rem; max-width: 52ch; }
.final__actions { display: flex; flex-wrap: wrap; gap: 0.9rem; }
.final .btn--solid { background: var(--arena); color: var(--cafe); }
.final .btn--solid:hover { background: var(--crema); color: var(--cafe); }

/* ---------- Páginas de murales (/murales/) ---------- */
.breadcrumbs { padding: 1.5rem var(--gutter) 0; }
.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.82rem;
  color: var(--ink-soft);
}
.breadcrumbs li:not(:last-child)::after { content: "/"; margin-left: 0.4rem; color: var(--line-strong); }
.breadcrumbs a { color: var(--ink-soft); text-decoration: none; }
.breadcrumbs a:hover { color: var(--accent-text); }
.breadcrumbs li[aria-current="page"] { color: var(--ink); }

.murales-hero { padding: 1.5rem 0 clamp(2.5rem, 6vw, 4rem); }
.murales-hero .lead { margin-bottom: 1.25rem; }

.murales-index { padding-bottom: var(--pad-seccion); }
.murales-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.murales-card a {
  display: block;
  text-decoration: none;
  color: inherit;
}
.murales-card figure {
  position: relative;
  margin: 0 0 0.9rem;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
}
.murales-card img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.4s var(--ease);
}
.murales-card a:hover img { transform: scale(1.04); }
.murales-card__num {
  position: absolute;
  left: 0.6rem; bottom: 0.6rem;
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--crema);
  background: var(--cafe);
  padding: 0.15rem 0.55rem;
}
.murales-card h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.2rem;
  margin: 0 0 0.3rem;
  line-height: 1.25;
}
.murales-card p { margin: 0; font-size: 0.85rem; color: var(--ink-soft); }

/* ---------- Índice de salas ---------- */
.salas-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.25rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.salas-card a {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  background: var(--surface);
  border: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.salas-card a:hover { border-color: var(--accent); transform: translateY(-2px); }
.salas-card figure {
  position: relative;
  margin: 0 0 0.9rem;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--bg-alt);
  border: 1px solid var(--line);
}
.salas-card figure img { width: 100%; height: 100%; object-fit: cover; }
.salas-card .salas-card__num {
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  color: var(--crema);
  background: var(--cafe);
  padding: 0.15rem 0.55rem;
}
.salas-card figure .salas-card__num { position: absolute; left: 0.6rem; bottom: 0.6rem; }
.salas-card p.salas-card__num--plain {
  align-self: flex-start;
  margin: 0 0 0.75rem;
}
.salas-card h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.35rem;
  margin: 0 0 0.45rem;
  line-height: 1.2;
}
.salas-card p { margin: 0; font-size: 0.88rem; line-height: 1.6; color: var(--ink-soft); }
.salas-card__more {
  margin-top: auto;
  padding-top: 1rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink);
}
.salas-card a:hover .salas-card__more { color: var(--accent-text); }

/* ---------- Ficha de sala ---------- */
.sala { padding: clamp(1.5rem, 4vw, 2.5rem) 0 clamp(3rem, 7vw, 5rem); }
.sala__grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.sala__head { position: sticky; top: calc(var(--header-h) + 1.5rem); }
.sala__head h1 { max-width: 14ch; }
.sala__summary {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0 0 1.1rem;
  max-width: 44ch;
}
.sala__map-note { margin: 0; font-size: 0.88rem; }
.sala__figure { margin: 0 0 1.5rem; border: 1px solid var(--line); }
.sala__figure img { display: block; width: 100%; height: auto; }
/* Montserrat es más ancha que la sans anterior: 60ch ≈ 65-70 caracteres
   reales por línea, dentro del rango de lectura cómoda. */
.sala__body p { color: var(--ink-soft); margin: 0 0 1.2rem; max-width: 60ch; line-height: 1.75; }

.mural { padding: clamp(1.5rem, 4vw, 2.5rem) 0 clamp(3rem, 7vw, 5rem); }
.mural__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.mural__figure { position: sticky; top: calc(var(--header-h) + 1.5rem); }
.mural__zoom { position: relative; display: block; }
.mural__zoom img {
  width: 100%;
  border: 1px solid var(--line);
  background: var(--surface);
}
.mural__zoom-label {
  position: absolute;
  right: 0.75rem; bottom: 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.75rem;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  border: 1px solid var(--line-strong);
  font-size: 0.78rem;
  font-weight: 600;
  transition: border-color 0.2s var(--ease);
}
.mural__zoom:hover .mural__zoom-label { border-color: var(--accent); }

.mural__count {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 0.5rem;
}
.mural__body h1 { max-width: none; }
.mural__body p { color: var(--ink-soft); margin: 0 0 1.1rem; max-width: 58ch; line-height: 1.7; }
.mural__credits, .mural__sources { font-size: 0.82rem; color: var(--ink-soft); }
.mural__all { margin-top: 0.5rem; }
.mural__visit-prompt {
  margin: 1.75rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-size: 0.92rem;
  color: var(--ink-soft);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.75rem;
}
.mural__visit-prompt .link-arrow { color: var(--ink); }

.mural__pager {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
}
.mural__pager-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 600;
  max-width: 26ch;
}
.mural__pager-link--next { justify-content: flex-end; text-align: right; margin-left: auto; }
.mural__pager-link:hover { color: var(--accent-text); }
.mural__pager-plano {
  justify-self: center;
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 2px;
  white-space: nowrap;
}
.mural__pager-plano:hover { color: var(--ink); border-color: var(--accent); }

/* ---------- Visor de ampliación de murales ---------- */
.mural-lightbox {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  max-height: 100vh;
  margin: 0;
  padding: 0;
  border: 0;
  background: #14100c;
  color: #FAEFE6;
  display: none;
  flex-direction: column;
}
.mural-lightbox[open] { display: flex; }
.mural-lightbox::backdrop { background: rgba(10, 7, 5, 0.92); }

.mural-lightbox__bar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem clamp(1rem, 3vw, 1.75rem);
  border-bottom: 1px solid rgba(250, 239, 230, 0.16);
}
.mural-lightbox__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1rem, 2vw, 1.25rem);
  color: #FAEFE6;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mural-lightbox__tools {
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.mural-lightbox__btn {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.9rem;
  background: transparent;
  border: 1px solid rgba(250, 239, 230, 0.32);
  color: #FAEFE6;
  font-family: var(--font-ui);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease), opacity 0.2s var(--ease);
}
.mural-lightbox__btn:hover { border-color: var(--terracota); }
.mural-lightbox__btn:disabled { opacity: 0.35; cursor: default; }
.mural-lightbox__btn:disabled:hover { border-color: rgba(250, 239, 230, 0.32); }
.mural-lightbox__close { padding-inline: 1.1rem; }

.mural-lightbox__stage {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  touch-action: none;
}
.mural-lightbox__img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  transform-origin: center center;
  user-select: none;
  -webkit-user-drag: none;
}
.mural-lightbox__status {
  position: absolute;
  inset: auto 1rem 1rem auto;
  max-width: min(90vw, 40ch);
  margin: 0;
  padding: 0.6rem 0.9rem;
  background: rgba(20, 16, 12, 0.85);
  border: 1px solid rgba(250, 239, 230, 0.24);
  font-size: 0.82rem;
  color: rgba(250, 239, 230, 0.9);
}
.mural-lightbox__error-link { color: var(--arena); font-weight: 600; }

@media (max-width: 640px) {
  .mural-lightbox__bar { flex-wrap: wrap; row-gap: 0.6rem; }
  .mural-lightbox__title { width: 100%; order: -1; white-space: normal; }
  .mural-lightbox__status { inset: auto 0.75rem 0.75rem 0.75rem; max-width: none; }
}

@media (max-width: 900px) {
  .murales-grid { grid-template-columns: repeat(2, 1fr); }
  .salas-grid { grid-template-columns: repeat(2, 1fr); }
  .sala__grid { grid-template-columns: 1fr; }
  .sala__head { position: static; }
  .sala__head h1 { max-width: none; }
  .mural__grid { grid-template-columns: 1fr; }
  .mural__figure { position: static; }
  .mural__pager { grid-template-columns: 1fr; text-align: center; }
  .mural__pager-link--next { justify-content: center; margin-left: 0; }
}
@media (max-width: 520px) {
  .murales-grid { grid-template-columns: 1fr 1fr; gap: 1rem; }
  .salas-grid { grid-template-columns: 1fr; gap: 1rem; }
}

/* ---------- Footer ---------- */
.footer {
  background: var(--bg-alt);
  border-top: 1px solid var(--line);
  padding: clamp(3rem, 6vw, 4.5rem) 0 8rem;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: clamp(1.75rem, 4vw, 3rem);
}
.footer__logo { width: auto; height: 72px; object-fit: contain; }
.footer__complement {
  width: auto;
  height: 12px;
  margin-top: 1.1rem;
  object-fit: contain;
}
.footer__tagline { margin: 1rem 0 0; font-size: 0.88rem; color: var(--ink-soft); max-width: 28ch; }
.footer__col h2 {
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-soft);
  margin: 0 0 0.9rem;
}
.footer__col p { margin: 0 0 0.6rem; font-size: 0.92rem; }
.footer__col ul { list-style: none; margin: 0; padding: 0; }
.footer__col li { margin-bottom: 0.5rem; font-size: 0.92rem; }
.footer__col a { text-decoration: none; border-bottom: 1px solid var(--line); }
.footer__col a:hover { border-color: var(--accent); }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-size: 0.84rem;
  color: var(--ink-soft);
}
.footer__bottom p { margin: 0; }
.footer__credit a { font-weight: 600; }
.footer__disclaimer {
  /* Va dentro de un .shell propio: así se alinea con la columna del pie y
     su max-width solo limita la línea de texto. */
  margin: 1.5rem 0 0;
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 70ch;
}

/* ---------- Dock ---------- */
.dock {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 35;
  background: var(--cafe);
  color: var(--crema);
  border-top: 1px solid rgba(250, 239, 230, 0.16);
  /* La barra no debe quedar bajo el gesto del sistema en telefonos. */
  padding-bottom: env(safe-area-inset-bottom, 0px);
  transform: translateY(110%);
  /* `visibility` saca sus controles del tabulador mientras esta fuera de
     pantalla: con solo `transform` seguian siendo enfocables, y el foco
     saltaba a un boton invisible. Se retrasa para que la salida se vea. */
  visibility: hidden;
  transition: transform 300ms var(--ease), visibility 0s 300ms;
}
.dock.is-visible {
  transform: translateY(0);
  visibility: visible;
  transition: transform 300ms var(--ease), visibility 0s;
}
.dock__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.7rem;
}
.dock__text { margin: 0; font-size: 0.85rem; color: rgba(250, 239, 230, 0.8); }
.dock__actions { display: flex; align-items: center; gap: 1rem; }
.dock__tel {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--crema);
}
.dock .btn--solid { background: var(--arena); color: var(--cafe); }
.dock .btn--solid:hover { background: var(--crema); }

/* ---------- Revelados ---------- */
/* El contenido es visible por defecto. La clase `revelados-armados` la pone
   el propio script justo antes de instalar el observador: si script.js no
   llega a cargar, o falla antes, no queda ninguna seccion transparente. */
.reveal {
  transition: opacity 520ms var(--ease), transform 520ms var(--ease);
}
:root.revelados-armados .reveal:not(.is-in) {
  opacity: 0;
  transform: translateY(10px);
}

/* Tarjetas de Descubre: entran escalonadas, 70 ms entre una y otra. */
:root.revelados-armados .discover:not(.is-in) .discover__card {
  opacity: 0;
  transform: translateY(10px);
}
.discover__card {
  transition: opacity 440ms var(--ease), transform 440ms var(--ease);
}
.discover.is-in .discover__card:nth-child(2) { transition-delay: 70ms; }
.discover.is-in .discover__card:nth-child(3) { transition-delay: 140ms; }

/* ---------- Responsive ---------- */
@media (min-width: 1081px) and (max-height: 850px) {
  .explora { padding: 1rem 0; }
  .explora__map { gap: 1.25rem; }
  .explora__controls { max-height: var(--explora-frame-max-height, none); }
  .explora__intro .eyebrow { margin-bottom: 0.45rem; }
  .explora__intro .h-display {
    font-size: clamp(1.8rem, 2.4vw, 2.3rem);
    line-height: 1.04;
    margin-bottom: 0.4rem;
  }
  .explora__intro .lead {
    font-size: 0.82rem;
    line-height: 1.42;
  }
  .explora__modes {
    margin: 0.65rem 0;
    padding: 3px;
  }
  .explora__mode {
    min-height: 40px;
    padding: 0.4rem 0.55rem;
    font-size: 0.78rem;
  }
  .explora__panel {
    min-height: 0;
    padding: 0.9rem;
  }
  .explora__panel-head { margin-bottom: 0.45rem; }
  .explora__panel-title {
    font-size: 1.2rem;
    margin-bottom: 0.3rem;
  }
  .explora__panel-body {
    font-size: 0.82rem;
    line-height: 1.42;
  }
  .explora__panel-actions { margin-top: 0.65rem; }
  .explora__spacenav {
    margin-top: auto;
    padding-top: 0.6rem;
  }
  .explora__navbtn {
    min-height: 40px;
    padding: 0.4rem 0.55rem;
    font-size: 0.78rem;
  }
}

@media (max-width: 1080px) {
  .group-head { grid-template-columns: 1fr; gap: 1rem; }
  .group-head .lead { justify-self: start; }
  .activity__panel--agenda,
  .activity__panel--workshops,
  .activity__panel--events { grid-template-columns: 1fr; }
  .activity__list { border-left: 0; border-top: 1px solid var(--line); }
  .activity__event-image { min-height: 340px; }
  .rooms__grid,
  .workshops__grid,
  .agenda__grid,
  .video__inner { grid-template-columns: 1fr; }
  .rooms__sticky { position: static; }
  .explora__map {
    grid-template-columns: 1fr;
    grid-template-areas:
      "intro"
      "modes"
      "frame"
      "panel"
      "spacenav"
      "mobile";
    row-gap: 1rem;
    max-width: 100%;
  }
  .explora__controls { display: contents; }
  /* El dibujo se queda fijo bajo el encabezado mientras se lee la ficha. Antes
     el panel nacia fuera de pantalla —y=716 con la ventana en 727— y bajar a
     leerlo sacaba la casa de la vista, que es justo lo que hay que mirar. */
  .explora__frame {
    position: sticky;
    top: calc(var(--header-h) + 0.5rem);
    z-index: 2;
  }
  /* Sin sitio para leer bajo el dibujo, deja de ser fijo: mejor desplazar que
     aplastar la ficha contra el dock. Lo decide el JavaScript midiendo. */
  .explora__map.sin-sticky .explora__frame { position: static; }
  .explora__intro { grid-area: intro; }
  .explora__modes { grid-area: modes; margin: 0; }
  .explora__spacenav { margin-top: 0; }
  .agenda__grid > .note { grid-column: 1; }
  .bento { grid-template-columns: 1fr 1fr; }
  .bento__cell--photo { grid-row: 1; grid-column: 1 / 3; min-height: 300px; }
  .bento__cell--wide { grid-column: 1 / 3; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 960px) {
  /* El burger solo existe si puede abrir algo. */
  :root.js .burger { display: inline-flex; align-items: center; justify-content: center; }

  /* Sin JavaScript la navegacion no se esconde: baja a una lista en el flujo
     del encabezado, alcanzable y utilizable. El panel deslizante es la
     version con script, no la unica. */
  .header__row { flex-wrap: wrap; }
  .nav { flex: 1 0 100%; margin-left: 0; }
  .nav__list { flex-direction: column; align-items: stretch; }

  /* Altura explícita, no `inset: ... 0`. El encabezado lleva `backdrop-filter`
     y eso lo convierte en el bloque contenedor de sus descendientes fijos:
     `bottom: 0` se medía contra los 101 px del encabezado, no contra la
     ventana, y el panel colapsaba a la altura de sus propios rellenos —
     65 px, sitio para un enlace y medio. El encabezado es `sticky; top: 0`,
     así que `top: var(--header-h)` sí cae donde debe. */
  :root.js .nav {
    flex: 0 1 auto;
    position: fixed;
    top: var(--header-h);
    right: 0;
    left: 0;
    bottom: auto;
    height: calc(100svh - var(--header-h));
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 1.5rem var(--gutter) 2.5rem;
    background: var(--bg);
    border-top: 1px solid var(--line);
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    overflow-y: auto;
    transition: transform 0.35s var(--ease), opacity 0.25s var(--ease), visibility 0.35s;
  }
  /* Al abrir, `visibility` cambia sin transicion: si entra en la interpolacion,
     en el primer cuadro sigue oculto y el foco no prende sobre sus enlaces.
     Al cerrar conserva el retardo de la regla base para que la salida se vea. */
  :root.js .nav.is-open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    transition: transform 0.35s var(--ease), opacity 0.25s var(--ease), visibility 0s;
  }

  /* Con el menu abierto el fondo no se desplaza. Se fija el cuerpo con un
     desplazamiento negativo en lugar de `overflow: hidden`: asi la posicion
     se conserva exactamente y al cerrar se devuelve tal cual. Con overflow
     el navegador recortaba el destino y la pagina volvia a otro punto. */
  :root.menu-abierto body {
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
  }

  /* Con el menu fuera del flujo, la fila es marca + CTA + burger. */
  .header__cta { margin-left: auto; }

  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__list li { border-bottom: 1px solid var(--line); }
  .nav__list a {
    display: block;
    padding: 1rem 0;
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--ink);
  }
  .nav__list a::after { display: none; }

  .nav__tools { margin-top: 1.75rem; justify-content: space-between; }

  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero__text {
    order: 2;
    padding: clamp(2rem, 6vw, 3rem) var(--gutter) clamp(2.5rem, 6vw, 3.5rem);
  }
  .hero__media {
    order: 1;
    /* `align-self: start`, no el `stretch` heredado de escritorio. Todo lo que
       hay dentro del panel esta posicionado absoluto, asi que no aporta altura
       en flujo: con `stretch`, WebKit estira el item a la altura de la fila,
       que es cero, y `aspect-ratio` no llega a aplicarse. En iOS eso dejaba el
       hero sin fachada y sin puerta. Chromium resolvia con la proporcion y por
       eso en Android si se veia.

       La altura explicita va detras como red: si una version no resuelve la
       proporcion, la caja sigue teniendo alto. `aspect-ratio` la gobierna
       donde funciona. */
    align-self: start;
    aspect-ratio: 3 / 2;
    height: min(66.6667vw, 60svh);
    max-height: 60svh;
  }
  /* Reservar aire para la indicación inferior, sin superponerla a la puerta. */
  .hero__door-mark { top: 46%; height: min(50%, 180px); max-width: 44%; }
  /* El panel móvil es más pequeño: el mismo radio taparía la fachada. */
  .hero__door-photo { filter: blur(6px); }
  .hero__title { max-width: 18ch; }

  /* La barra de horarios se aprieta: el texto del estado es largo y aquí
     compite con el logotipo y el menú. */
  .header__hours-row { font-size: 0.76rem; padding-block: 0.35rem; }
  .facts__row { grid-template-columns: 1fr 1fr; }
  .fact { border-left: 0; padding-left: 0; padding-block: 0.9rem; }
  .fact:nth-child(even) { padding-left: 1.25rem; border-left: 1px solid var(--line); }
  .fact:nth-child(n + 3) { border-top: 1px solid var(--line); }

  /* A estos anchos el boton no cabe en una linea junto al logo y el burger.
     Se le permite partir en dos, y el logotipo cede altura sin deformarse
     (width:auto y object-fit:contain conservan la proporcion). */
  .header__cta {
    white-space: normal;
    text-align: center;
    line-height: 1.2;
    padding: 0.55rem 0.8rem;
    max-width: 46vw;
  }
  .brand__logo { height: clamp(34px, 9vw, 46px); }

  .explora__modes { display: flex; }
  .explora__mode { flex: 1; }
  /* El tamaño del punto ya es fluido (min(44px, 8.2%)): aquí solo se
     refuerza el contraste del borde en pantallas pequeñas. */
  .explora__pin { border-width: 2px; }
  /* El punto de murales vuelve sobre el axonometrico, que es donde significa
     algo: senala el tramo del recorrido. Estaba oculto y sustituido por un
     enlace suelto al final de la seccion, despues del navegador de espacios,
     sin relacion visible con el dibujo. Cabe: a 390 px ocupa unos 170 px de
     ancho sobre un marco de 390, y conserva sus 44 px de alto de toque. */
  .explora__murales-hotspot {
    right: 4%;
    /* Mas abajo que en escritorio: a 320 px la etiqueta rozaba el pin VII,
       que cae al 54% de la altura. Aqui queda por debajo de todos. */
    bottom: 8%;
    font-size: 0.74rem;
    padding: 0.35rem 0.7rem 0.35rem 0.5rem;
  }
  .explora__mobile-link { display: none; }
  .explora__spacenav { flex-wrap: wrap; }
}

@media (max-width: 720px) {
  .statement__grid { grid-template-columns: 1fr; gap: 1.75rem; }
  .statement__body { padding-left: 0; border-left: 0; }
  .event-showcase {
    min-height: 0;
    display: block;
  }
  .event-showcase__image {
    position: relative;
    z-index: auto;
    height: auto;
    aspect-ratio: 1600 / 721;
    object-fit: contain;
  }
  .event-showcase__shade { display: none; }
  .event-showcase__inner { padding-block: 2.25rem 2.75rem; }
  .event-showcase__copy h2 { font-size: clamp(2.25rem, 12vw, 3.25rem); }
  .event-showcase__copy > p:not(.event-showcase__eyebrow) { font-size: 0.96rem; }
  .event-showcase__actions { align-items: flex-start; }
  /* El bloque de aforo se alinea con el resto del texto de la sección: en
     móvil su filete quedaba pegado al borde izquierdo. */
  .event-showcase__capacity--ask { margin-bottom: 0.9rem; }
  .discover__grid {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    background: transparent;
    border: 0;
    padding: 1px var(--gutter) 1rem;
    margin-inline: calc(var(--gutter) * -1);
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }
  .discover__grid::-webkit-scrollbar { display: none; }
  /* `[hidden]` por encima de esta regla: sin el, `display: flex` ganaba a la
     del navegador y sin JavaScript los botones se veian sin poder hacer nada.
     El desplazamiento nativo del carril nunca dependio de ellos. */
  .rail-nav[hidden] { display: none; }
  .rail-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    margin-top: 0.25rem;
  }
  .discover__card {
    flex: 0 0 min(84vw, 340px);
    scroll-snap-align: start;
    border: 1px solid var(--line);
  }
  .activity__tabs { width: 100%; overflow-x: auto; }
  .activity__tab { flex: 1; min-width: 105px; padding-inline: 0.75rem; }
  .activity__panel { min-height: 0; }
  .activity__intro { padding: 1.5rem; }
  .activity__list { padding: 0.5rem 1.5rem 1.5rem; }
  .activity__panel--workshops .accordion { margin: 0 1.5rem 1.5rem; }
  .activity__event-image { min-height: 280px; }
  .rail__track { padding-inline: var(--gutter); }
  .bento { grid-template-columns: 1fr; }
  .bento__cell--photo { grid-column: 1; min-height: 280px; }
  .bento__cell--wide { grid-column: 1; }
  .timeline { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .dock__text { display: none; }
  .dock__row { justify-content: space-between; }
  .rail__head { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 420px) {
  .hero__actions .btn,
  .final__actions .btn,
  .activity__intro .btn { width: 100%; }
  .dock__tel { display: none; }
  .dock__actions { width: 100%; }
  .dock .btn--sm { width: 100%; }
}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal,
  :root.revelados-armados .reveal:not(.is-in),
  :root.revelados-armados .discover:not(.is-in) .discover__card { opacity: 1; transform: none; }
  /* Sin animacion de entrada, pero no se fuerza visible sobre el hero: la
     barra sigue apareciendo cuando el observador lo indica. */
  .dock { transition: none !important; }
  /* La puerta sigue siendo utilizable, pero el clic revela sin transición. */
  :root.hero-door-armed .hero__door-photo,
  :root.hero-door-armed .hero__door-veil,
  :root.hero-door-armed .hero__door-mark,
  :root.hero-door-armed .hero__door-hint { animation: none !important; }
  :root.hero-door-armed .hero__door,
  .hero__media.is-revealed .hero__door,
  .hero__door-photo, .hero__media.is-revealed .hero__door-photo,
  .hero__door-veil, .hero__media.is-revealed .hero__door-veil,
  .hero__door-mark, .hero__media.is-revealed .hero__door-mark,
  .hero__door-hint, .hero__media.is-revealed .hero__door-hint { transition: none !important; }
}

/* ---------- Impresión ---------- */
@media print {
  .header, .dock, .rail__controls, .map iframe, .hero__door, .rail-nav { display: none; }
  body { background: #fff; color: #000; }
  /* Nada queda transparente en papel, aunque no se haya revelado en pantalla. */
  .reveal,
  :root.revelados-armados .reveal:not(.is-in),
  :root.revelados-armados .discover:not(.is-in) .discover__card,
  .activity__panel[hidden] { opacity: 1 !important; transform: none !important; }
  .activity__panel[hidden] { display: block !important; }
}