/* Art Gallery · Casa de México en Bulgaria
   Hoja de estilo de la versión de trabajo (Etapa 1).
   Colores tomados del logotipo. Tipografía: Lora (con alfabeto cirílico para el búlgaro). */

@font-face {
  font-family: "Lora";
  src: url("../fuentes/Lora-Variable.ttf") format("truetype");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lora";
  src: url("../fuentes/Lora-Italic-Variable.ttf") format("truetype");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}

:root {
  --papel: #faf8f5;      /* papel del logotipo */
  --muro: #eeebe6;       /* muro de sala para presentar obra */
  --tinta: #0d253d;      /* azul de la letra del logotipo */
  --tinta-suave: #4a5668;
  --tinta-tenue: #7d8695;
  --oro: #a9823e;        /* filete dorado del logotipo */
  --oro-claro: #d8c6a1;
  --verde: #184533;
  --rojo: #9e1814;
  --linea: rgba(13, 37, 61, 0.14);

  --ancho: 1320px;
  --margen: clamp(20px, 4vw, 56px);
  --texto: 1.125rem;     /* 18px */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: "Lora", Georgia, serif;
  font-size: var(--texto);
  line-height: 1.65;
  font-weight: 400;
  font-feature-settings: "kern", "liga", "onum";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration-color: var(--oro-claro); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: var(--oro); }
:focus-visible { outline: 2px solid var(--oro); outline-offset: 3px; }
p { margin: 0 0 1em; }
h1, h2, h3 { font-weight: 400; margin: 0; line-height: 1.12; letter-spacing: -0.01em; }

.contenedor { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--margen); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- Aviso de versión de trabajo ---------- */
.aviso {
  background: var(--tinta);
  color: #e9e4da;
  font-size: 0.8125rem;
  line-height: 1.45;
  padding: 8px var(--margen);
  text-align: center;
}
.aviso em { color: var(--oro-claro); font-style: italic; }

/* ---------- Cabecera ---------- */
.cabecera { border-bottom: 1px solid var(--linea); background: var(--papel); }
.cabecera .contenedor {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; min-height: 92px;
}
.marca { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.marca img { width: 54px; height: 54px; object-fit: cover; }
.marca-texto { display: flex; flex-direction: column; line-height: 1.1; }
.marca-nombre { font-style: italic; font-size: 1.75rem; letter-spacing: -0.015em; }
.marca-sub { font-size: 0.8125rem; color: var(--tinta-suave); margin-top: 3px; letter-spacing: 0.01em; }

.menu { display: flex; gap: clamp(18px, 2.4vw, 38px); }
.menu a {
  text-decoration: none; font-size: 1rem; padding: 6px 0;
  border-bottom: 1px solid transparent;
}
.menu a:hover { border-bottom-color: var(--oro-claro); }
.menu a[aria-current="page"] { border-bottom-color: var(--oro); }
.boton-menu { display: none; }

/* ---------- Tipografía de página ---------- */
.titulo-pagina { font-size: clamp(2.6rem, 5.5vw, 4.6rem); font-style: italic; }
.titulo-seccion { font-size: clamp(1.9rem, 3.4vw, 2.75rem); }
.entrada { font-size: clamp(1.2rem, 1.8vw, 1.4rem); line-height: 1.55; color: var(--tinta-suave); max-width: 34em; }
.nota { font-size: 0.875rem; color: var(--tinta-tenue); }
.prosa { max-width: 36em; }
.prosa p { font-size: 1.1875rem; line-height: 1.7; }

.enlace-seccion { font-style: italic; font-size: 1.0625rem; }

/* ---------- Cédula (ficha de muro de museo) ---------- */
.cedula { font-size: 0.9375rem; line-height: 1.5; color: var(--tinta-suave); }
.cedula .c-artista { color: var(--tinta); font-size: 1rem; }
.cedula .c-titulo { color: var(--tinta); font-style: italic; }
.cedula .c-ficticio { color: var(--tinta-tenue); font-style: italic; font-size: 0.8125rem; }
.cedula > span { display: block; }

/* ---------- Obra presentada sobre muro ---------- */
.obra-colgada { margin: 0; }
.obra-colgada a { display: block; text-decoration: none; }
.obra-colgada img {
  width: 100%; height: auto;
  box-shadow: 0 1px 1px rgba(13, 37, 61, 0.10), 0 14px 22px -14px rgba(13, 37, 61, 0.38);
  background: var(--muro);
}
.obra-colgada figcaption { margin-top: 18px; }

/* Colgado sobre línea de centro: cada obra ocupa un ancho proporcional
   a su ancho real, de modo que todas quedan a la misma escala. */
.colgado {
  display: flex; align-items: center; justify-content: center; gap: clamp(28px, 5vw, 80px);
}
.colgado .obra-colgada { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.colgado .obra-colgada > a { max-width: 100%; }
.obra-colgada.objeto img { box-shadow: none; }
.colgado-cedulas { display: flex; justify-content: center; gap: clamp(28px, 5vw, 80px); margin-top: 22px; }
.colgado-cedulas > * { min-width: 0; }

.muro { background: var(--muro); }

/* ---------- Portada ---------- */
.portada { padding: clamp(36px, 6vw, 80px) 0 clamp(48px, 6vw, 88px); }
.portada .contenedor {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(32px, 6vw, 96px); align-items: end;
}
.portada h1 { font-size: clamp(2.6rem, 4.9vw, 4.4rem); font-style: italic; line-height: 1.05; letter-spacing: -0.02em; }
.portada .entrada { margin-top: 28px; }
.portada .acciones { margin-top: 36px; display: flex; gap: 28px; flex-wrap: wrap; align-items: baseline; }
.portada-obra { background: var(--muro); padding: clamp(28px, 6vw, 88px) clamp(28px, 7vw, 110px) clamp(24px, 4vw, 48px); }
.portada-obra .obra-colgada { max-width: 420px; margin: 0 auto; }

.boton {
  display: inline-block; text-decoration: none; cursor: pointer;
  font: inherit; font-size: 1rem; line-height: 1;
  padding: 15px 26px; border: 1px solid var(--tinta);
  background: var(--tinta); color: var(--papel);
  transition: background-color .2s ease, color .2s ease;
}
.boton:hover { background: transparent; color: var(--tinta); }
.boton-sec { background: transparent; color: var(--tinta); }
.boton-sec:hover { background: var(--tinta); color: var(--papel); }

/* ---------- Secciones ---------- */
.seccion { padding: clamp(64px, 9vw, 128px) 0; }
.seccion + .seccion { border-top: 1px solid var(--linea); }
.cabeza-seccion { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; margin-bottom: clamp(32px, 5vw, 56px); flex-wrap: wrap; }

.expo-intro { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 96px); margin-bottom: clamp(40px, 6vw, 72px); }
.expo-fechas { color: var(--tinta-suave); margin-top: 14px; }
.expo-sala { padding: clamp(48px, 8vw, 104px) 0; }

/* Índice de artistas (lista, no tarjetas) */
.indice { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linea); }
.indice li { border-bottom: 1px solid var(--linea); }
.indice a {
  display: grid; grid-template-columns: 120px minmax(0, 1fr) auto;
  gap: clamp(20px, 3vw, 48px); align-items: center;
  padding: 22px 0; text-decoration: none;
}
.indice img { width: 120px; height: 120px; object-fit: cover; }
.indice .i-nombre { font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.15; }
.indice .i-datos { color: var(--tinta-suave); font-size: 1rem; margin-top: 4px; }
.indice .i-ficticio { color: var(--tinta-tenue); font-style: italic; font-size: 0.8125rem; }
.indice .i-ir { font-style: italic; color: var(--tinta-suave); font-size: 1rem; white-space: nowrap; }
.indice a:hover .i-nombre { text-decoration: underline; text-decoration-color: var(--oro); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }

/* Bloque de la Fundación */
.fundacion { text-align: center; }
.fundacion .logo {
  width: min(400px, 82vw); margin: 0 auto 36px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%), linear-gradient(180deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%), linear-gradient(180deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-composite: intersect;
}
.fundacion .entrada { margin: 0 auto 28px; text-align: center; }

/* ---------- Pie ---------- */
.pie { background: var(--tinta); color: #d9dde4; font-size: 0.9375rem; line-height: 1.6; }
.pie a { color: #f1ede4; text-decoration-color: rgba(216, 198, 161, .5); }
.pie .lema { border-bottom: 1px solid rgba(216, 198, 161, .35); padding: 44px 0 36px; }
.pie .lema p { font-style: italic; font-size: clamp(1.15rem, 2vw, 1.45rem); color: #f1ede4; margin: 0; max-width: 40em; }
.pie .lema span { display: block; font-size: 0.875rem; color: var(--oro-claro); margin-top: 8px; font-style: normal; }
.pie-columnas { display: grid; grid-template-columns: 2fr 1.2fr 1.6fr; gap: 40px; padding: 44px 0; }
.pie h2 { font-size: 1rem; font-weight: 600; color: #f1ede4; margin-bottom: 10px; letter-spacing: 0; }
.pie ul { list-style: none; margin: 0; padding: 0; }
.boletin { display: flex; gap: 0; margin-top: 8px; }
.boletin input {
  flex: 1; min-width: 0; font: inherit; font-size: 0.9375rem; padding: 11px 12px;
  background: transparent; border: 1px solid rgba(216, 198, 161, .5); border-right: 0; color: #f1ede4;
}
.boletin input::placeholder { color: #9aa3b1; }
.boletin button {
  font: inherit; font-size: 0.9375rem; padding: 11px 16px; cursor: pointer;
  background: var(--oro-claro); color: var(--tinta); border: 1px solid var(--oro-claro);
}
.pie-legal { border-top: 1px solid rgba(216, 198, 161, .2); padding: 18px 0 26px; font-size: 0.8125rem; color: #9aa3b1; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.pie-legal nav { display: flex; gap: 22px; }
.pie .respuesta { font-size: 0.8125rem; color: var(--oro-claro); margin-top: 8px; min-height: 1.3em; }

/* ---------- Página de artista ---------- */
.cab-artista { padding: clamp(48px, 7vw, 96px) 0 clamp(40px, 5vw, 64px); }
.cab-artista .datos { color: var(--tinta-suave); margin-top: 14px; font-size: 1.125rem; }
.cab-artista .ficticio { color: var(--tinta-tenue); font-style: italic; font-size: 0.875rem; margin-top: 6px; }
.artista-cuerpo { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(32px, 6vw, 96px); padding-bottom: clamp(56px, 8vw, 112px); }
.declaracion { margin: 0; padding: 4px 0 0 24px; border-left: 1px solid var(--oro); }
.declaracion p { font-style: italic; font-size: 1.3rem; line-height: 1.55; }
.declaracion footer { font-size: 0.9375rem; color: var(--tinta-suave); }
.trayectoria { list-style: none; margin: 0; padding: 0; max-width: 46em; }
.trayectoria li { display: grid; grid-template-columns: 5em 1fr; gap: 16px; padding: 14px 0; border-top: 1px solid var(--linea); }
.trayectoria li:last-child { border-bottom: 1px solid var(--linea); }
.trayectoria .anio { color: var(--tinta-suave); font-variant-numeric: lining-nums tabular-nums; }

/* ---------- Ficha de obra ---------- */
.ficha { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(32px, 5vw, 80px); padding-top: clamp(32px, 5vw, 64px); padding-bottom: clamp(64px, 9vw, 120px); align-items: start; }
.visor { background: var(--muro); }
.visor-escena { display: flex; align-items: center; justify-content: center; padding: clamp(28px, 6vw, 80px); min-height: min(78vh, 760px); }
.visor-escena img { max-height: min(66vh, 640px); width: auto; max-width: 100%;
  box-shadow: 0 1px 1px rgba(13, 37, 61, 0.10), 0 16px 26px -16px rgba(13, 37, 61, 0.42); }
.visor-escena .detalle { width: min(100%, 640px); aspect-ratio: 1; background-repeat: no-repeat; box-shadow: none; }
.visor-escena svg { width: 100%; max-height: min(66vh, 640px); height: auto; }
.vistas { display: flex; gap: 2px; border-top: 1px solid var(--papel); }
.vistas button {
  flex: 1; font: inherit; font-size: 0.9375rem; color: var(--tinta-suave);
  background: var(--muro); border: 0; padding: 14px 10px; cursor: pointer;
  border-bottom: 2px solid transparent;
}
.vistas button[aria-pressed="true"] { color: var(--tinta); border-bottom-color: var(--oro); background: #e7e3dc; }
.ficha-texto .c-artista { font-size: 1.0625rem; }
.ficha-texto h1 { font-size: clamp(2.2rem, 3.8vw, 3.2rem); font-style: italic; margin: 10px 0 6px; }
.ficha-texto .anio { color: var(--tinta-suave); font-size: 1.125rem; }
.ficha-texto .ficticio { color: var(--tinta-tenue); font-style: italic; font-size: 0.875rem; margin-top: 8px; }
.ficha-texto .descripcion { margin: 28px 0; font-size: 1.0625rem; line-height: 1.7; }
.datos-tecnicos { margin: 0 0 32px; border-top: 1px solid var(--linea); }
.datos-tecnicos div { display: grid; grid-template-columns: 9.5em 1fr; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--linea); font-size: 0.9688rem; }
.datos-tecnicos dt { color: var(--tinta-suave); }
.datos-tecnicos dd { margin: 0; }
.disponibilidad { font-size: 1.0625rem; margin-bottom: 20px; }
.disponibilidad .punto { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--verde); margin-right: 10px; vertical-align: 0.12em; }
.disponibilidad.reservada .punto { background: var(--oro); }
.disponibilidad.no .punto { background: var(--tinta-tenue); }
.ficha-texto .boton { width: 100%; text-align: center; }
.ficha-texto .nota { margin-top: 14px; }

/* Diálogo de consulta */
dialog {
  border: 0; padding: 0; max-width: 560px; width: calc(100% - 32px);
  background: var(--papel); color: var(--tinta);
  box-shadow: 0 30px 80px -20px rgba(13, 37, 61, .45);
}
dialog::backdrop { background: rgba(13, 37, 61, .55); }
.consulta { padding: clamp(24px, 5vw, 44px); }
.consulta h2 { font-size: 1.75rem; font-style: italic; margin-bottom: 6px; }
.consulta .sobre { color: var(--tinta-suave); margin-bottom: 24px; font-size: 1rem; }
.campo { display: block; margin-bottom: 16px; font-size: 0.9375rem; }
.campo span { display: block; margin-bottom: 6px; color: var(--tinta-suave); }
.campo input, .campo textarea {
  width: 100%; font: inherit; font-size: 1rem; padding: 11px 12px;
  border: 1px solid var(--linea); background: #fff; color: var(--tinta);
}
.campo input:focus, .campo textarea:focus { outline: none; border-color: var(--oro); box-shadow: 0 0 0 3px rgba(169, 130, 62, .18); }
.casilla { display: flex; gap: 10px; align-items: flex-start; font-size: 0.875rem; color: var(--tinta-suave); margin: 4px 0 22px; line-height: 1.5; }
.casilla input { margin-top: 3px; accent-color: var(--tinta); }
.consulta-acciones { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.cerrar { font: inherit; background: none; border: 0; color: var(--tinta-suave); cursor: pointer; text-decoration: underline; text-decoration-color: var(--oro-claro); text-underline-offset: .2em; padding: 0; }
.consulta .resultado { margin-top: 18px; font-size: 0.9375rem; color: var(--verde); min-height: 1.4em; }

/* Página en preparación */
.preparacion { padding: clamp(64px, 10vw, 140px) 0; min-height: 50vh; }
.preparacion .entrada { margin-top: 20px; }

/* ---------- Responsivo ---------- */
@media (max-width: 960px) {
  .portada .contenedor, .expo-intro, .artista-cuerpo, .ficha { grid-template-columns: 1fr; }
  .portada-obra { order: -1; }
  .pie-columnas { grid-template-columns: 1fr 1fr; }
  .pie-columnas > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 1180px) {
  .boton-menu {
    display: inline-block; font: inherit; font-size: 1rem; background: none;
    border: 1px solid var(--linea); color: var(--tinta); padding: 8px 14px; cursor: pointer;
  }
  .menu {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; gap: 0; background: var(--papel);
    border-bottom: 1px solid var(--linea); padding: 8px var(--margen) 20px; z-index: 10;
  }
  .menu.abierto { display: flex; }
  .menu a { padding: 12px 0; border-bottom: 1px solid var(--linea); font-size: 1.125rem; }
  .cabecera { position: relative; }
  .marca-nombre { font-size: 1.45rem; }
  .marca img { width: 44px; height: 44px; }
}
@media (max-width: 680px) {
  .colgado { flex-direction: column; align-items: center; gap: 48px; }
  .colgado .obra-colgada { flex: none !important; width: min(100%, var(--movil)); align-items: stretch; }
  .colgado .obra-colgada > a { width: auto !important; }
  .colgado-cedulas { display: none; }
  .colgado .obra-colgada .solo-movil { display: block; margin-top: 14px; }
  .indice a { grid-template-columns: 84px minmax(0, 1fr); }
  .indice img { width: 84px; height: 84px; }
  .indice .i-ir { display: none; }
  .pie-columnas { grid-template-columns: 1fr; }
  .datos-tecnicos div { grid-template-columns: 1fr; gap: 2px; }
  .visor-escena { min-height: 0; }
}
.colgado .solo-movil { display: none; }

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


/* ---------- Visor de ampliación ---------- */
.visor-escena { position: relative; }
.visor-escena .ampliable { cursor: zoom-in; }
.boton-ampliar {
  position: absolute; right: 16px; bottom: 16px;
  font: inherit; font-size: 0.9375rem; cursor: pointer;
  background: var(--papel); color: var(--tinta); border: 1px solid var(--linea);
  padding: 9px 14px; display: inline-flex; align-items: center; gap: 8px;
}
.boton-ampliar:hover { border-color: var(--oro); }
.boton-ampliar svg { width: 16px; height: 16px; }
.visor-amp {
  position: fixed; inset: 0; z-index: 100; background: #0a1a2c; color: #f1ede4;
  touch-action: none; user-select: none; -webkit-user-select: none;
}
.va-lienzo { display: block; cursor: grab; }
.visor-amp.arrastrando .va-lienzo { cursor: grabbing; }
.va-cedula { position: absolute; left: 24px; top: 20px; display: flex; flex-direction: column; font-size: 0.9375rem; line-height: 1.4; pointer-events: none; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
.va-titulo { font-style: italic; color: var(--oro-claro); }
.va-cerrar {
  position: absolute; right: 20px; top: 16px; font: inherit; font-size: 0.9375rem; cursor: pointer;
  background: rgba(10, 26, 44, .7); color: #f1ede4; border: 1px solid rgba(216, 198, 161, .45); padding: 8px 16px;
}
.va-controles {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 2px;
  background: rgba(10, 26, 44, .82); border: 1px solid rgba(216, 198, 161, .35); padding: 4px;
}
.va-controles button {
  font: inherit; font-size: 1.25rem; line-height: 1; min-width: 42px; height: 40px; cursor: pointer;
  background: transparent; color: #f1ede4; border: 0; padding: 0 10px;
}
.va-controles button:hover { background: rgba(216, 198, 161, .14); }
.va-controles .va-texto { font-size: 0.875rem; border-left: 1px solid rgba(216, 198, 161, .25); }
.va-nivel { min-width: 82px; text-align: center; font-size: 0.875rem; color: var(--oro-claro); font-variant-numeric: tabular-nums; }
.va-mapa { position: absolute; right: 20px; bottom: 20px; border: 1px solid rgba(216, 198, 161, .45); background: #0a1a2c; display: none; }
.va-mapa canvas { display: block; }
.va-ayuda { position: absolute; left: 24px; bottom: 26px; margin: 0; font-size: 0.8125rem; color: #9aa3b1; max-width: 22em; pointer-events: none; }
@media (max-width: 760px) {
  .va-ayuda, .va-mapa, .va-controles [data-a="pantalla"] { display: none !important; }
  .va-controles { bottom: 16px; }
  .va-cedula { left: 16px; top: 16px; max-width: 60%; }
  .va-cerrar { right: 12px; top: 12px; }
}

/* ---------- Noticias ---------- */
.noticias { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linea); }
.noticias li { border-bottom: 1px solid var(--linea); }
.noticias a { display: grid; grid-template-columns: 9em minmax(0, 1fr) 220px; gap: clamp(20px, 3vw, 48px); padding: 30px 0; text-decoration: none; align-items: start; }
.noticias time { color: var(--tinta-suave); font-size: 0.9375rem; padding-top: 6px; }
.noticias h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.2; }
.noticias p { color: var(--tinta-suave); margin: 10px 0 0; font-size: 1.0625rem; }
.noticias .n-ficticio { color: var(--tinta-tenue); font-style: italic; font-size: 0.8125rem; margin-top: 8px; }
.noticias img { width: 220px; aspect-ratio: 4/3; object-fit: cover; }
.noticias a:hover h2 { text-decoration: underline; text-decoration-color: var(--oro); text-decoration-thickness: 1px; text-underline-offset: .18em; }
.articulo-cab { padding: clamp(48px, 7vw, 96px) 0 clamp(28px, 4vw, 48px); }
.articulo-cab .titulo-pagina { max-width: 18em; }
.articulo-cab .datos { color: var(--tinta-suave); margin-top: 18px; }
.articulo-imagen { background: var(--muro); padding: clamp(32px, 6vw, 80px) 0; margin-bottom: clamp(40px, 6vw, 72px); }
.articulo-imagen img { max-height: 560px; width: auto; margin: 0 auto; box-shadow: 0 1px 1px rgba(13,37,61,.1), 0 16px 26px -16px rgba(13,37,61,.42); }
.articulo-cuerpo { padding-bottom: clamp(64px, 9vw, 120px); }
.volver { display: inline-block; margin-top: 36px; font-style: italic; }

/* ---------- Acerca de ---------- */
.dos-col { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); }
.principios { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linea); }
.principios li { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(20px, 4vw, 64px); padding: 22px 0; border-bottom: 1px solid var(--linea); }
.principios h3 { font-size: 1.3rem; font-style: italic; }
.principios p { margin: 0; color: var(--tinta-suave); }

/* ---------- Contacto ---------- */
.contacto-rejilla { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 4fr); gap: clamp(32px, 6vw, 96px); padding-bottom: clamp(64px, 9vw, 120px); }
.form-contacto { max-width: 620px; }
.campo select {
  width: 100%; font: inherit; font-size: 1rem; padding: 11px 12px;
  border: 1px solid var(--linea); background: #fff; color: var(--tinta);
}
.form-contacto .resultado { margin-top: 18px; font-size: 0.9375rem; color: var(--verde); min-height: 1.4em; }
.datos-contacto h2 { font-size: 1.3rem; font-style: italic; margin-bottom: 8px; }
.datos-contacto p { color: var(--tinta-suave); }
.datos-contacto > div + div { margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--linea); }

/* ---------- Páginas legales ---------- */
.borrador { border: 1px solid var(--oro-claro); background: #fffdf8; padding: 18px 22px; margin: 28px 0 40px; font-size: 0.9688rem; color: var(--tinta-suave); max-width: 46em; }
.borrador strong { color: var(--tinta); font-weight: 600; }
.indice-legal { counter-reset: s; list-style: none; padding: 0; margin: 0 0 clamp(64px, 9vw, 120px); max-width: 46em; }
.indice-legal li { counter-increment: s; padding: 18px 0; border-top: 1px solid var(--linea); }
.indice-legal li:last-child { border-bottom: 1px solid var(--linea); }
.indice-legal h2 { font-size: 1.25rem; }
.indice-legal h2::before { content: counter(s) ". "; color: var(--tinta-tenue); }
.indice-legal p { margin: 6px 0 0; color: var(--tinta-suave); font-size: 1rem; }

@media (max-width: 960px) {
  .dos-col, .contacto-rejilla, .principios li { grid-template-columns: 1fr; }
  .principios li { gap: 6px; }
  .noticias a { grid-template-columns: minmax(0, 1fr); }
  .noticias img { width: 100%; order: -1; }
  .noticias time { padding-top: 0; }
}

.articulo-cab .ficticio { color: var(--tinta-tenue); font-style: italic; font-size: .875rem; }

/* ---------- Obras: exploración ---------- */
.filtros { display: flex; gap: 16px 28px; align-items: end; flex-wrap: wrap; padding: 20px 0; border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); margin-bottom: clamp(32px, 5vw, 56px); }
.filtros label { display: flex; flex-direction: column; gap: 4px; font-size: .875rem; color: var(--tinta-suave); }
.filtros select { font: inherit; font-size: 1rem; color: var(--tinta); background: transparent; border: 0; border-bottom: 1px solid var(--tinta); padding: 6px 28px 6px 0; min-width: 210px; cursor: pointer; }
.filtros .casilla { flex-direction: row; align-items: center; margin: 0 0 6px; }
.filtros .total { margin-left: auto; font-style: italic; color: var(--tinta-suave); padding-bottom: 6px; }
.rejilla-obras { list-style: none; margin: 0; padding: 0 0 clamp(64px, 9vw, 120px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(36px, 5vw, 64px) clamp(24px, 3vw, 44px); }
.rejilla-obras a { display: block; text-decoration: none; }
.nicho { display: flex; align-items: center; justify-content: center; background: var(--muro); aspect-ratio: 1 / 1; padding: 14%; margin-bottom: 16px; transition: background-color .2s ease; }
.nicho img { max-width: 100%; max-height: 100%; width: auto; height: auto; box-shadow: 0 1px 1px rgba(13,37,61,.10), 0 12px 20px -12px rgba(13,37,61,.38); }
.rejilla-obras a:hover .nicho { background: #e8e4dd; }
.rejilla-obras a:hover .c-titulo { text-decoration: underline; text-decoration-color: var(--oro); text-underline-offset: .18em; }
.sin-resultados { grid-column: 1 / -1; color: var(--tinta-suave); padding: 40px 0; }

/* ---------- Colaborar ---------- */
.colaborar-bloque { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); }
.colaborar-bloque h2 { font-size: clamp(1.9rem, 3.2vw, 2.6rem); font-style: italic; }
.colaborar-bloque .quien { color: var(--tinta-suave); margin-top: 12px; font-size: 1.0625rem; }
.lista-ofrece { list-style: none; margin: 0 0 28px; padding: 0; border-top: 1px solid var(--linea); }
.lista-ofrece li { padding: 14px 0 14px 26px; border-bottom: 1px solid var(--linea); position: relative; }
.lista-ofrece li::before { content: ""; position: absolute; left: 2px; top: 1.45em; width: 12px; height: 1px; background: var(--oro); }
.cita-ejemplo { font-style: italic; border-left: 1px solid var(--oro); padding-left: 20px; margin: 0 0 24px; color: var(--tinta); }
.nota-modelo { font-size: .9375rem; color: var(--tinta-suave); }
.acciones-fila { display: flex; gap: 24px; flex-wrap: wrap; align-items: baseline; }

@media (max-width: 960px) {
  .rejilla-obras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .colaborar-bloque { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .rejilla-obras { grid-template-columns: 1fr; }
  .filtros select { min-width: 0; width: 100%; }
  .filtros label { width: 100%; }
  .filtros .total { margin-left: 0; }
}

/* ---------- Textos legales ---------- */
.texto-legal { max-width: 46em; padding-bottom: clamp(64px, 9vw, 120px); }
.texto-legal section { padding: 26px 0 8px; border-top: 1px solid var(--linea); counter-increment: leg; }
.texto-legal { counter-reset: leg; }
.texto-legal h2 { font-size: 1.35rem; margin-bottom: 12px; }
.texto-legal h2::before { content: counter(leg) ". "; color: var(--tinta-tenue); }
.texto-legal p { font-size: 1.0625rem; }
.pendiente { background: #fff1cf; color: var(--tinta); padding: 1px 5px; font-style: italic; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.datos-legales { margin: 0 0 18px; }
.datos-legales div { display: grid; grid-template-columns: 15em 1fr; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--linea); font-size: 1rem; }
.datos-legales dt { color: var(--tinta-suave); }
.datos-legales dd { margin: 0; }
.tabla-legal { width: 100%; border-collapse: collapse; font-size: 0.9375rem; margin: 0 0 16px; }
.tabla-legal th { text-align: left; font-weight: 600; padding: 10px 10px 10px 0; border-bottom: 1px solid var(--tinta); vertical-align: bottom; }
.tabla-legal td { padding: 10px 10px 10px 0; border-bottom: 1px solid var(--linea); vertical-align: top; }
.pie .aviso-boletin { font-size: 0.75rem; color: #9aa3b1; margin-top: 8px; }
.pie .aviso-boletin a { color: #c9cfd8; }
@media (max-width: 760px) {
  .datos-legales div { grid-template-columns: 1fr; gap: 2px; }
  .tabla-legal thead { display: none; }
  .tabla-legal tr { display: block; padding: 12px 0; border-bottom: 1px solid var(--linea); }
  .tabla-legal td { display: block; border: 0; padding: 2px 0; }
  .tabla-legal td:first-child { font-weight: 600; }
}

/* ---------- Idioma ---------- */
.cab-derecha { display: flex; align-items: center; gap: 0; }
.idioma {
  margin-left: clamp(18px, 2.2vw, 32px); padding: 6px 0 6px clamp(18px, 2.2vw, 28px);
  border-left: 1px solid var(--linea); font-size: 0.9375rem; color: var(--tinta-suave);
  text-decoration: none; font-style: italic;
}
.idioma:hover { color: var(--tinta); }
.idioma-corto { display: none; }
.titulo-traducido { font-style: italic; color: var(--tinta-suave); font-size: 1.1875rem; margin: -2px 0 4px; }
@media (max-width: 1100px) {
  .idioma-largo { display: none; }
  .idioma-corto { display: inline; font-style: normal; letter-spacing: .04em; }
}
@media (max-width: 820px) {
  .idioma { margin-left: 14px; padding-left: 14px; }
}

/* ---------- Museos ---------- */
.salas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px); }
.salas a, .museo-dest { display: block; text-decoration: none; color: inherit; }
.sala-img { display: block; aspect-ratio: 4 / 3; background: #24262a; overflow: hidden; margin-bottom: 16px; }
.sala-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.salas a:hover .sala-img img, .museo-dest:hover .sala-img img { transform: scale(1.03); }
.sala-tipo { display: block; font-size: .875rem; color: var(--tinta-suave); font-style: italic; }
.sala-titulo { display: block; font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.2; margin: 4px 0; }
.sala-datos { display: block; font-size: .9375rem; color: var(--tinta-suave); }
.museo-dest { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.museo-dest .sala-img { margin: 0; }
.museo-dest .c-ficticio { display: block; color: var(--tinta-tenue); font-style: italic; font-size: .8125rem; margin-top: 8px; }
.museo-intro { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 96px); align-items: end; margin-bottom: clamp(32px, 5vw, 56px); }

/* Sala de museo: muro oscuro, como una sala con iluminación dirigida */
.sala-museo { background: #24262a; color: #e9e4da; }
.sala-museo .titulo-seccion { color: #f1ede4; }
.sala-museo .cedula { color: #b9bec7; }
.sala-museo .cedula .c-artista, .sala-museo .cedula .c-titulo { color: #f1ede4; }
.sala-museo .cedula .c-ficticio { color: #8d939d; }
.sala-museo .obra-colgada img { box-shadow: 0 18px 30px -18px rgba(0, 0, 0, .7); }
.sala-museo a:focus-visible { outline-color: var(--oro-claro); }
.autorizacion { max-width: 46em; }
.autorizacion h2 { font-size: 1.3rem; font-style: italic; margin-bottom: 14px; }
.ficha-texto .c-artista + .c-artista { margin-left: 2px; }

@media (max-width: 760px) {
  .salas, .museo-dest, .museo-intro { grid-template-columns: 1fr; }
}

.separa-vitrina { height: clamp(48px, 7vw, 96px); }

/* ---------- Mapa de estados (mosaicos) ---------- */
.mapa-bloque { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 72px); align-items: center; padding: clamp(28px, 4vw, 48px) 0 clamp(32px, 5vw, 56px); }
.mapa-estado { font-size: clamp(1.4rem, 2.4vw, 1.9rem); font-style: italic; margin: 14px 0 6px; min-height: 1.3em; }
.mapa-estados { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 5px; }
.estado {
  aspect-ratio: 1; border: 0; padding: 0; cursor: pointer; font: inherit; position: relative;
  background: var(--muro); color: var(--tinta-tenue); display: flex; flex-direction: column; align-items: center; justify-content: center;
  transition: background-color .15s ease, color .15s ease, transform .15s ease;
}
.estado-cod { font-size: clamp(0.6rem, 1vw, 0.8125rem); letter-spacing: .02em; }
.estado-n { font-size: clamp(0.55rem, .8vw, 0.6875rem); opacity: .8; margin-top: 1px; }
.estado:hover { background: #e3ded5; color: var(--tinta); }
.estado.con-obra { background: var(--tinta); color: #f1ede4; }
.estado.con-obra:hover { background: #1c3a5c; }
.estado[aria-pressed="true"] { background: var(--oro); color: #fff; transform: scale(1.06); z-index: 1; }
.ed-mini { font: inherit; font-size: .9375rem; background: none; border: 0; padding: 0; color: var(--tinta-suave); cursor: pointer; text-decoration: underline; text-decoration-color: var(--oro-claro); text-underline-offset: .2em; }
@media (max-width: 860px) { .mapa-bloque { grid-template-columns: 1fr; } .mapa-estados { gap: 3px; } }
.estado[aria-pressed="true"], .estado.con-obra[aria-pressed="true"]:hover, .estado[aria-pressed="true"]:hover { background: var(--oro); color: #fff; }

/* ---------- Recorridos: edificio, plano, vistas ---------- */
.edificio { margin: 0; }
.edificio img { width: 100%; max-height: 78vh; object-fit: cover; display: block; }
.edificio figcaption { padding-top: 10px; }
.ficticio.fuerte { color: var(--rojo) !important; font-size: 1rem !important; font-style: italic; }
.recorrido-rejilla { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.vista-grande { margin: 0; background: #e9e6e0; }
.vista-grande img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.vista-minis { display: flex; gap: 8px; margin-top: 8px; }
.vista-minis button { padding: 0; border: 2px solid transparent; background: none; cursor: pointer; width: 120px; }
.vista-minis button img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; opacity: .75; }
.vista-minis button[aria-pressed="true"] { border-color: var(--oro); }
.vista-minis button[aria-pressed="true"] img, .vista-minis button:hover img { opacity: 1; }
.vista-nota { margin-top: 10px; }
.plano-bloque h3 { font-size: 1.15rem; font-style: italic; margin-bottom: 10px; }
.plano-bloque.ancho { max-width: 760px; }
.plano { width: 100%; height: auto; display: block; }
.plano-imagen { width: 100%; height: auto; margin-bottom: 12px; }
.pl-piso { fill: #fbfaf7; }
.pl-muro { fill: none; stroke: var(--tinta); stroke-width: 5; stroke-linejoin: miter; }
.pl-obra { stroke: var(--oro); stroke-width: 7; stroke-linecap: butt; }
.pl-num circle { fill: var(--tinta); }
.pl-num text { fill: #fff; font: 600 12px Lora, serif; }
.plano a:hover .pl-num circle, .plano a:focus .pl-num circle { fill: var(--oro); }
.pl-etq { fill: var(--tinta-suave); font: italic 13px Lora, serif; }
.pl-sala rect { fill: #fbfaf7; stroke: var(--tinta); stroke-width: 4; transition: fill .15s ease; }
.pl-sala:hover rect, .pl-sala:focus rect { fill: #f3ead8; }
.pl-sala-n { fill: var(--tinta); font: 600 15px Lora, serif; }
.pl-sala-t { fill: var(--tinta-suave); font: italic 12.5px Lora, serif; }
.pl-vestibulo { fill: #f2efe9; stroke: var(--tinta); stroke-width: 4; }
.pl-hueco { stroke: #fbfaf7; stroke-width: 6; }
.c-num { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--tinta); color: #fff; font-size: .75rem; font-weight: 600; margin-bottom: 6px; }
.sala-museo .c-num { background: var(--oro); }
.paso-salas { display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; padding: clamp(28px, 4vw, 44px) var(--margen); border-bottom: 1px solid var(--linea); }
.paso-salas a { text-decoration: none; font-size: 1.125rem; }
.paso-salas a .nota { display: block; font-style: italic; }
.paso-salas .centro { text-align: center; }
.paso-salas .der { text-align: right; }
.visor-escena.modo-sala { padding: 0; }
.visor-escena .en-sala { width: 100%; max-height: none; box-shadow: none; }
@media (max-width: 900px) {
  .recorrido-rejilla { grid-template-columns: 1fr; }
  .paso-salas { grid-template-columns: 1fr; text-align: left; }
  .paso-salas .centro, .paso-salas .der { text-align: left; }
}

.edificio img { aspect-ratio: 2.1 / 1; max-height: 72vh; object-position: 50% 58%; }
.cedula > .c-num { display: grid; place-items: center; width: 22px; height: 22px; line-height: 1; }

/* ---------- Mapa de México ---------- */
.mapa-estados, #mapa-portada { display: block; }
.mapa-svg { width: 100%; height: auto; display: block; overflow: visible; }
.mapa-svg .estado { fill: #e4dfd6; stroke: var(--papel); stroke-width: 1.3; stroke-linejoin: round; transition: fill .15s ease; }
.mapa-svg .con-obra { fill: var(--tinta); cursor: pointer; }
.mapa-svg .con-obra:hover, .mapa-svg .con-obra:focus { fill: #2b4f76; outline: none; }
.mapa-svg .con-obra:focus-visible { stroke: var(--oro); stroke-width: 3; }
.mapa-svg .con-obra[aria-pressed="true"] { fill: var(--oro); }
.mapa-svg .estado:not(.con-obra):hover { fill: #d9d3c8; }
.mapa-cifras .cifra { cursor: pointer; }
.mapa-cifras text { pointer-events: none; }
.mapa-cifras .cifra:hover circle { fill: var(--oro-claro); }
.mapa-cifras circle { fill: var(--papel); stroke: var(--oro); stroke-width: 1.5; }
.mapa-cifras text { font-family: "Lora", Georgia, serif; font-size: 14px; text-anchor: middle; fill: var(--tinta); }
.mapa-svg .estado, .mapa-svg .estado[aria-pressed="true"] { transform: none; }

/* ---------- Selector de idioma (tres idiomas) ---------- */
.idiomas { display: flex; align-items: center; gap: 2px; margin-left: clamp(18px, 2.2vw, 32px); padding-left: clamp(14px, 2vw, 24px); border-left: 1px solid var(--linea); font-size: .8125rem; letter-spacing: .04em; }
.idiomas .idioma, .idiomas .idioma-actual { margin: 0; padding: 6px 6px; border: 0; font-style: normal; }
.idiomas .idioma { color: var(--tinta-tenue); text-decoration: none; }
.idiomas .idioma:hover { color: var(--tinta); }
.idiomas .idioma-actual { color: var(--tinta); border-bottom: 1px solid var(--oro); }
@media (max-width: 820px) { .idiomas { margin-left: 10px; padding-left: 8px; } .idiomas .idioma, .idiomas .idioma-actual { padding: 6px 4px; } }

.menu a { white-space: nowrap; }
.menu { gap: clamp(14px, 1.7vw, 32px); }
.marca-sub { white-space: nowrap; }
/* Cabecera en teléfonos: marca, menú y selector de idioma en una sola línea */
@media (max-width: 600px) {
  .cabecera .contenedor { gap: 10px; min-height: 76px; }
  .marca { gap: 9px; min-width: 0; }
  .marca img { width: 36px; height: 36px; }
  .marca-nombre { font-size: 1.22rem; }
  .marca-sub { font-size: 0.6875rem; }
  .boton-menu { padding: 6px 10px; font-size: .9375rem; }
  .idiomas { margin-left: 8px; padding-left: 6px; font-size: .75rem; letter-spacing: .02em; }
  .idiomas .idioma, .idiomas .idioma-actual { padding: 6px 3px; }
}
@media (max-width: 370px) {
  .marca-sub { display: none; }
}
@media (max-width: 350px) {
  .cabecera .contenedor { gap: 6px; }
  .marca { gap: 7px; }
  .marca img { width: 30px; height: 30px; }
  .marca-nombre { font-size: 1.08rem; }
  .boton-menu { padding: 5px 7px; font-size: .875rem; }
  .idiomas { margin-left: 5px; padding-left: 3px; }
  .idiomas .idioma, .idiomas .idioma-actual { padding: 6px 2px; }
}
.pie-columnas > * { min-width: 0; } .boletin input { min-width: 0; flex: 1 1 auto; }
@media (max-width: 600px) {
  .vistas { flex-wrap: wrap; }
  .vistas button { flex: 1 1 auto; min-width: 0; padding-left: 8px; padding-right: 8px; }
  .datos-tecnicos dd, .texto-legal, .prosa { overflow-wrap: anywhere; }
  .ficha > *, .ficha-texto, .visor { min-width: 0; }
}
@media (max-width: 600px) {
  main, .pie { overflow-wrap: break-word; hyphens: auto; }
  .tabla-legal td, .tabla-legal th, h1, h2, h3 { overflow-wrap: anywhere; }
}