/* ==========================================================================
   MUNA — recorrido del museo, rediseñado para escritorio.

   Dirección: Swiss Modernism. Rejilla estricta, un solo acento, sin sombras.
   La pieza central es la CARTELA: el bloque de sala con título, procedencia,
   material y periodo. Las fichas de obra ya son pares etiqueta-valor, así que
   se componen como lo que son.

   Reparto tipográfico, copiado de cómo se compone un museo de verdad:
     · Archivo Narrow  → señalética y etiquetas (rótulos, cifras, navegación)
     · Archivo         → titulares
     · Source Serif 4  → texto interpretativo (descripciones, textos de sala)
   ========================================================================== */

.museo {
  /* Blanco de galería: la pared no compite con la pieza. */
  --m-fondo:      #FAFAF9;
  --m-superficie: #FFFFFF;
  --m-tinta:      #101010;
  --m-tinta-2:    #56534E;
  /* Los rótulos son etiquetas funcionales y van en 11 px: este gris está
     elegido para pasar 4.5:1 sobre el fondo (da 5.13:1). */
  --m-tinta-3:    #6F6A63;
  --m-filete:     #DEDBD6;
  --m-filete-2:   #EDEAE5;

  /* Acento único, el de la casa. */
  --m-acento:     #8B2835;
  --m-acento-osc: #6B1F28;

  /* El azul queda reservado a accesibilidad, en todo el producto. */
  --m-a11y:       #2563EB;

  /* Escala de 8 px. */
  --m-1: 0.5rem;  --m-2: 1rem;   --m-3: 1.5rem;
  --m-4: 2rem;    --m-6: 3rem;   --m-8: 4rem;

  --m-sans:   'Archivo', ui-sans-serif, system-ui, sans-serif;
  --m-rotulo: 'Archivo Narrow', 'Archivo', ui-sans-serif, system-ui, sans-serif;
  --m-serif:  'Source Serif 4', Georgia, 'Times New Roman', serif;

  --m-barra: 4.5rem;   /* alto de la barra superior */
  --m-indice: 17rem;   /* ancho del índice lateral */

  min-height: 100vh;
  background-color: var(--m-fondo);
  color: var(--m-tinta);
  font-family: var(--m-sans);
}

/* ---------------------------- Rótulos ---------------------------------- */

/* El tono de señalética: condensada, versalitas, muy espaciada. */
.rotulo {
  font-family: var(--m-rotulo);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--m-tinta-3);
}

/* --------------------------- Barra superior ---------------------------- */

.mbarra {
  position: sticky;
  top: 0;
  z-index: 45;
  height: var(--m-barra);
  display: flex;
  align-items: center;
  gap: var(--m-3);
  padding-inline: var(--m-3);
  background-color: var(--m-superficie);
  border-bottom: 1px solid var(--m-filete);
}

.mbarra__volver {
  display: flex;
  align-items: center;
  gap: var(--m-1);
  flex-shrink: 0;
  padding: 0.5rem 0.75rem 0.5rem 0.5rem;
  margin-left: -0.5rem;
  color: var(--m-tinta-2);
  border-radius: 2px;
  transition: color .15s ease, background-color .15s ease;
}
.mbarra__volver:hover { color: var(--m-tinta); background-color: var(--m-filete-2); }
/* En pantallas estrechas queda solo la flecha; el nombre volvería a
   desbordar la barra. */
.mbarra__volver span {
  display: none;
  font-family: var(--m-rotulo);
  font-size: 0.875rem;
}

.mbarra__marca {
  display: flex;
  align-items: baseline;
  gap: 0.625rem;
  min-width: 0;
}
.mbarra__sigla {
  font-family: var(--m-sans);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--m-acento);
}
/* El nombre completo solo cabe a partir de tablet. */
.mbarra__nombre {
  display: none;
  font-family: var(--m-rotulo);
  font-size: 0.875rem;
  color: var(--m-tinta-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mbarra__hueco { flex: 1; min-width: 0; }

.mbarra__acciones {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
}

.mbtn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 2.5rem;
  padding-inline: 0.875rem;
  font-family: var(--m-rotulo);
  font-size: 0.875rem;
  color: var(--m-tinta-2);
  border: 1px solid transparent;
  border-radius: 2px;
  transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}
.mbtn:hover { color: var(--m-tinta); background-color: var(--m-filete-2); }

/* Accesibilidad: el único elemento azul, y siempre visible. */
.mbtn--a11y {
  color: var(--m-a11y);
  border-color: var(--m-a11y);
}
.mbtn--a11y:hover { color: #fff; background-color: var(--m-a11y); }

.mbtn__txt { display: none; }

/* Abre el índice en pantallas estrechas. */
.mbarra__indice { display: inline-flex; }

/* ------------------------------ Armazón -------------------------------- */

.mcuerpo { display: block; }

/* Índice lateral: el directorio de planta. Siempre a un clic de cualquier sala. */
.mindice {
  display: none;
  padding: var(--m-4) var(--m-3) var(--m-6);
  border-right: 1px solid var(--m-filete);
}

/* Por debajo de 900 px se despliega desde la barra superior. */
.mindice.is-abierto {
  display: block;
  border-right: 0;
  border-bottom: 1px solid var(--m-filete);
  background-color: var(--m-superficie);
  padding-block: var(--m-3);
}

.mindice__grupo + .mindice__grupo { margin-top: var(--m-4); }
.mindice__titulo { display: block; margin-bottom: 0.875rem; }

.mindice__lista { display: flex; flex-direction: column; }

.mindice__enlace {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--m-2);
  padding: 0.625rem 0.5rem 0.625rem 0;
  border-top: 1px solid var(--m-filete-2);
  color: var(--m-tinta-2);
  font-size: 0.9375rem;
  line-height: 1.35;
  transition: color .15s ease, padding-left .15s ease;
}
.mindice__lista .mindice__enlace:last-child { border-bottom: 1px solid var(--m-filete-2); }
.mindice__enlace:hover { color: var(--m-tinta); padding-left: 0.375rem; }

.mindice__enlace.is-activo {
  color: var(--m-acento);
  box-shadow: inset 2px 0 0 var(--m-acento);
  padding-left: 0.625rem;
}

.mindice__dato {
  flex-shrink: 0;
  font-family: var(--m-rotulo);
  font-size: 0.75rem;
  color: var(--m-tinta-3);
  font-variant-numeric: tabular-nums;
}

/* Columna de contenido. */
.mcontenido {
  min-width: 0;
  padding: var(--m-4) var(--m-3) var(--m-8);
}
/* Centrado dentro de su columna: sin esto, al pasar del ancho máximo el
   contenido queda pegado al índice y todo el hueco cae a la derecha. */
.mcontenido__interior { max-width: 68rem; margin-inline: auto; }

/* ------------------------------ Portada -------------------------------- */

.mdestacado { margin-bottom: var(--m-8); }

.mdestacado__marco {
  position: relative;
  aspect-ratio: 21 / 9;
  overflow: hidden;
  background-color: var(--m-filete-2);
}
.mdestacado__marco img { width: 100%; height: 100%; object-fit: cover; }

/* Flechas: filete fino, sin relleno hasta el hover. */
.mflecha {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  width: 2.75rem;
  height: 2.75rem;
  align-items: center;
  justify-content: center;
  color: var(--m-tinta);
  background-color: rgb(255 255 255 / .88);
  transition: background-color .15s ease;
}
.mflecha:hover { background-color: #fff; }
.mflecha--izq { left: 0; }
.mflecha--der { right: 0; }

/* Pie del destacado: filete + rótulo + contador, como una cartela de pared. */
.mdestacado__pie {
  display: grid;
  gap: var(--m-1);
  padding-top: 0.875rem;
  border-top: 2px solid var(--m-tinta);
}

.mdestacado__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--m-2);
}

.mdestacado__contador {
  font-family: var(--m-rotulo);
  font-size: 0.75rem;
  color: var(--m-tinta-3);
  font-variant-numeric: tabular-nums;
}

.mdestacado__title {
  font-size: clamp(1.5rem, 2.6vw, 2.125rem);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -.015em;
  text-wrap: balance;
}

.mdestacado__desc {
  max-width: 46ch;
  font-family: var(--m-serif);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--m-tinta-2);
}

.mpuntos { display: flex; gap: 0.375rem; margin-top: 0.25rem; }
.mpunto {
  width: 1.75rem;
  height: 2px;
  background-color: var(--m-filete);
  transition: background-color .15s ease;
}
.mpunto.is-activo { background-color: var(--m-acento); }

/* --------------------------- Encabezado de bloque ---------------------- */

.mbloque + .mbloque { margin-top: var(--m-8); }

.mbloque__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--m-2);
  padding-bottom: 0.75rem;
  margin-bottom: var(--m-3);
  border-bottom: 1px solid var(--m-tinta);
}

.mbloque__title {
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -.01em;
}

/* ---------------------------- Rejilla de salas ------------------------- */

.msalas { display: grid; gap: var(--m-3); }

.msala {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: var(--m-superficie);
  border: 1px solid var(--m-filete);
  transition: border-color .15s ease;
}
.msala:hover { border-color: var(--m-tinta); }
.msala:focus-within { border-color: var(--m-acento); }

/* Un solo enlace, extendido sobre toda la tarjeta. */
.msala__title a::after { content: ''; position: absolute; inset: 0; }

.msala__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: var(--m-filete-2);
}
.msala__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.msala:hover .msala__media img { transform: scale(1.04); }

.msala__tipo {
  position: absolute;
  top: 0; left: 0;
  padding: 0.375rem 0.625rem;
  background-color: var(--m-acento);
  color: #fff;
  font-family: var(--m-rotulo);
  font-size: 0.6875rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.msala__cuerpo {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 0.875rem var(--m-2) var(--m-2);
}

.msala__sub { display: block; margin-bottom: 0.375rem; min-height: 1rem; }

.msala__title {
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.25;
  margin-bottom: 0.5rem;
  text-wrap: balance;
}

.msala__desc {
  font-family: var(--m-serif);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--m-tinta-2);
  margin-bottom: var(--m-2);
}

.msala__pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--m-1);
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid var(--m-filete-2);
}
.msala__ir {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-family: var(--m-rotulo);
  font-size: 0.8125rem;
  color: var(--m-acento);
}
.msala:hover .msala__ir .icon { transform: translateX(3px); }
.msala__ir .icon { transition: transform .15s ease; }

/* --------------------------- Datos de visita --------------------------- */

.mvisita { display: grid; gap: 0; border-top: 1px solid var(--m-tinta); }

.mvisita__item {
  display: grid;
  gap: 0.25rem;
  padding: var(--m-2) 0;
  border-bottom: 1px solid var(--m-filete-2);
}
.mvisita__valor { font-size: 1.0625rem; }
.mvisita__nota { font-family: var(--m-serif); font-size: 0.9375rem; color: var(--m-tinta-2); }

/* ================================ CARTELA ==============================
   El elemento firma. Una ficha de sala compuesta como se compone en la
   pared: filete grueso arriba, rótulo, título, pares etiqueta-valor.
   ====================================================================== */

.cartela {
  border-top: 3px solid var(--m-tinta);
  padding-top: var(--m-2);
}

.cartela__rotulo { display: block; margin-bottom: 0.625rem; }

.cartela__title {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.02em;
  text-transform: uppercase;
  text-wrap: balance;
  margin-bottom: var(--m-3);
}

.cartela__campos {
  display: grid;
  gap: var(--m-2);
  margin: 0 0 var(--m-3);
}

.cartela__campo { display: grid; gap: 0.25rem; }
.cartela__campo dt { font-family: var(--m-rotulo); font-size: 0.6875rem; letter-spacing: .16em; text-transform: uppercase; color: var(--m-tinta-3); }
.cartela__campo dd {
  margin: 0;
  font-family: var(--m-serif);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--m-tinta);
}

.cartela__prosa {
  padding-top: var(--m-3);
  border-top: 1px solid var(--m-filete);
  font-family: var(--m-serif);
  font-size: 1.0625rem;
  line-height: 1.68;
  color: var(--m-tinta-2);
}

.cartela__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--m-2);
  margin-top: var(--m-3);
  padding-top: var(--m-2);
  border-top: 1px solid var(--m-filete);
}

.cartela__horario { display: grid; gap: 0.125rem; }
.cartela__horario strong { font-weight: 500; font-variant-numeric: tabular-nums; }

/* ----------------------------- Obra y sala ----------------------------- */

/* Imagen a la izquierda, cartela a la derecha y pegada al hacer scroll. */
.mficha { display: grid; gap: var(--m-4); align-items: start; }

.mficha__media {
  background-color: var(--m-filete-2);
  overflow: hidden;
}
.mficha__media img { width: 100%; height: auto; display: block; }
.mficha__media--alta img { aspect-ratio: 3 / 4; object-fit: cover; }
.mficha__media--ancha img { aspect-ratio: 16 / 9; object-fit: cover; }

.mficha__pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--m-2);
  margin-top: var(--m-3);
  padding-top: 0.75rem;
  border-top: 1px solid var(--m-filete);
}

/* Saltar de una obra a la siguiente sin volver a la sala. */
.mpaso {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 15rem;
  font-family: var(--m-rotulo);
  font-size: 0.8125rem;
  color: var(--m-tinta-2);
  transition: color .15s ease;
}
.mpaso:hover { color: var(--m-acento); }
.mpaso span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mpaso--der { margin-left: auto; text-align: right; }

/* ---------------------------- Obras de la sala ------------------------- */

.mobras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--m-2); }

.mobra { display: block; }
.mobra__media {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background-color: var(--m-filete-2);
  margin-bottom: 0.625rem;
}
.mobra__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.mobra:hover .mobra__media img { transform: scale(1.05); }

.mobra__title {
  display: block;
  padding-top: 0.5rem;
  border-top: 1px solid var(--m-filete);
  font-size: 0.9375rem;
  line-height: 1.3;
  transition: border-color .15s ease;
}
.mobra:hover .mobra__title { border-color: var(--m-acento); }

/* --------------------------- Taller (variante) ------------------------- */

.mincluye { display: grid; gap: 0; margin-top: var(--m-2); }
.mincluye li {
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  gap: var(--m-1);
  padding: 0.75rem 0;
  border-top: 1px solid var(--m-filete-2);
  font-family: var(--m-serif);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--m-tinta-2);
}
.mincluye li:last-child { border-bottom: 1px solid var(--m-filete-2); }
.mincluye li::before {
  content: '—';
  color: var(--m-acento);
  font-family: var(--m-sans);
}

.mcta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 3rem;
  padding-inline: var(--m-3);
  margin-top: var(--m-3);
  background-color: var(--m-acento);
  color: #fff;
  font-family: var(--m-rotulo);
  font-size: 0.9375rem;
  letter-spacing: .04em;
  border-radius: 2px;
  transition: background-color .15s ease;
}
.mcta:hover { background-color: var(--m-acento-osc); }

/* -------------------------- Horarios y tarifas -------------------------- */

.mhorarios { display: grid; gap: 0; }

.mhorario {
  display: grid;
  gap: 0.25rem;
  padding: var(--m-2) 0;
  border-top: 1px solid var(--m-filete-2);
}
.mhorarios .mhorario:last-child { border-bottom: 1px solid var(--m-filete-2); }

.mhorario dt {
  font-family: var(--m-rotulo);
  font-size: 0.6875rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--m-tinta-3);
}
.mhorario dt a { color: inherit; transition: color .15s ease; }
.mhorario dt a:hover { color: var(--m-acento); }

.mhorario dd {
  margin: 0;
  font-family: var(--m-serif);
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--m-tinta);
  font-variant-numeric: tabular-nums;
}
.mhorario__extra {
  font-size: 0.9375rem !important;
  color: var(--m-tinta-2) !important;
}

.mtabla-marco { overflow-x: auto; }

.mtabla {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.mtabla caption {
  padding-bottom: 0.75rem;
  font-family: var(--m-rotulo);
  font-size: 0.6875rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--m-tinta-3);
  text-align: left;
}
.mtabla th, .mtabla td { padding: 0.875rem 0.75rem; text-align: left; }
.mtabla th:first-child, .mtabla td:first-child { padding-left: 0; }
.mtabla .c { text-align: right; }
.mtabla thead th {
  font-family: var(--m-rotulo);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--m-tinta-2);
  border-bottom: 2px solid var(--m-tinta);
}
.mtabla tbody th { font-weight: 400; color: var(--m-tinta); }
.mtabla tbody td { color: var(--m-tinta-2); }
.mtabla tbody tr { border-bottom: 1px solid var(--m-filete-2); }
.mtabla__gratis { color: #0F6B44; }

.mnota {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: var(--m-2);
  font-family: var(--m-serif);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--m-tinta-2);
}
.mnota .icon { flex-shrink: 0; margin-top: 3px; color: var(--m-acento); }

/* -------------------------------- Mapa --------------------------------- */

.mmapa { display: grid; gap: var(--m-4); align-items: start; }
.mmapa__plano {
  display: flex;
  justify-content: center;
  padding: var(--m-4);
  background-color: var(--m-superficie);
  border: 1px solid var(--m-filete);
}
.mplano { width: 100%; max-width: 22rem; height: auto; }

.mmapa__dir {
  font-family: var(--m-serif);
  font-size: 1.0625rem;
  line-height: 1.68;
  color: var(--m-tinta-2);
  margin-bottom: var(--m-3);
}

.mdireccion {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: var(--m-2);
  background-color: var(--m-superficie);
  border: 1px solid var(--m-filete);
  border-left: 3px solid var(--m-acento);
}
.mdireccion .icon { color: var(--m-acento); flex-shrink: 0; margin-top: 2px; }

/* ------------------------------ Vacíos --------------------------------- */

.mvacio { padding: var(--m-8) 0; }
.mvacio h2 { font-size: 1.5rem; font-weight: 500; margin-bottom: var(--m-2); }

/* ------------------------------ Foco ----------------------------------- */

.museo a:focus-visible,
.museo button:focus-visible {
  outline: 2px solid var(--m-acento);
  outline-offset: 2px;
  border-radius: 1px;
}

/* ============================ Breakpoints ============================== */

@media (min-width: 600px) {
  .mbarra__volver span { display: inline; }
  .mbarra__nombre { display: block; }
  .mbarra__marca { padding-left: var(--m-3); border-left: 1px solid var(--m-filete); }
  .mbarra__acciones { gap: 0.5rem; }

  .mobras { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .msalas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mvisita { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--m-3); }
  .cartela__campos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  .mbtn__txt { display: inline; }
  .mbarra { padding-inline: var(--m-4); }

  /* A partir de aquí el índice lateral sustituye a la barra inferior. */
  .mbarra__indice { display: none; }
  .mindice { display: block; position: sticky; top: var(--m-barra); align-self: start; max-height: calc(100vh - var(--m-barra)); overflow-y: auto; }
  .mcuerpo { display: grid; grid-template-columns: var(--m-indice) minmax(0, 1fr); }
  .mcontenido { padding: var(--m-6) var(--m-4) var(--m-8); }

  .msalas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mobras { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  /* Imagen y cartela en paralelo; la cartela acompaña al scroll. */
  .mficha { grid-template-columns: minmax(0, 1.15fr) minmax(19rem, 0.85fr); gap: var(--m-6); }
  .mficha__ficha { position: sticky; top: calc(var(--m-barra) + var(--m-6)); }

  .mmapa { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--m-6); }
  .cartela__campos { grid-template-columns: 1fr; }
}

@media (min-width: 1280px) {
  .museo { --m-indice: 19rem; }
  .mcontenido { padding-inline: var(--m-6); }
  .mcontenido__interior { max-width: 74rem; }
  .cartela__campos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .museo * { transition: none !important; }
}