@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&family=Spectral:ital,wght@0,300;0,400;0,500;1,300;1,400&display=swap');.gal-nav {
  position: fixed;
  z-index: 40;
  top: 0; left: 0; right: 0;
  height: var(--gal-nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--gal-margen);
  color: var(--gal-tinta);
  transition: background 260ms ease, box-shadow 260ms ease;
}

/* Al bajar, la barra se apoya sobre el contenido. En fondo claro no
   hace falta oscurecerla: alcanza con velar el fondo y marcar una
   linea de un pixel. */
.gal-nav--abierto,
.gal-nav--posado {
  background: rgba(239, 239, 239, 0.88);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--gal-linea);
}

.gal-nav__marca {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  min-width: 0;
}

.gal-nav__nombre {
  font-family: var(--gal-display);
  font-weight: 600;
  font-size: 0.88rem;
  letter-spacing: 0.01em;
  color: var(--gal-tinta-fuerte);
  white-space: nowrap;
}

.gal-nav__disciplina { color: var(--gal-tinta-suave); }

.gal-nav__links { display: flex; gap: 1.7rem; }

.gal-nav__link {
  position: relative;
  padding: 0.3rem 0;
  color: var(--gal-tinta-media);
  transition: color 180ms ease;
}
.gal-nav__link:hover { color: var(--gal-tinta-fuerte); }

.gal-nav__link--activo { color: var(--gal-tinta-fuerte); }
.gal-nav__link--activo::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: currentColor;
}

.gal-nav__hamburguesa { display: none; }

/* Tres barras que se cruzan en X al abrir. La del medio se desvanece
   y las otras dos rotan sobre el centro. */
.gal-nav__barra {
  display: block;
  width: 22px;
  height: 1.5px;
  background: currentColor;
  transition: transform 280ms cubic-bezier(0.22, 0.61, 0.36, 1),
              opacity 180ms ease;
}

.gal-nav--abierto .gal-nav__barra:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.gal-nav--abierto .gal-nav__barra:nth-child(2) {
  opacity: 0;
  transform: scaleX(0.4);
}
.gal-nav--abierto .gal-nav__barra:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

@media (max-width: 760px) {
  .gal-nav__disciplina { display: none; }
  .gal-nav__nombre { font-size: 0.82rem; }

  .gal-nav__hamburguesa {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    /* area de toque comoda sin agrandar el icono */
    width: 44px;
    height: 44px;
    align-items: flex-end;
    margin-right: -10px;
    color: var(--gal-tinta-fuerte);
  }

  .gal-nav__links {
    position: absolute;
    top: var(--gal-nav-h);
    left: 0; right: 0;
    flex-direction: column;
    gap: 0;
    padding: 0 var(--gal-margen);
    max-height: 0;
    overflow: hidden;
    background: var(--gal-fondo);
    box-shadow: 0 16px 26px -20px rgba(0, 0, 0, 0.5);
    transition: max-height 300ms ease;
  }

  .gal-nav--abierto .gal-nav__links { max-height: 18rem; }

  .gal-nav__link {
    padding: 1.05rem 0;
    border-bottom: var(--gal-borde-suave);
  }
}
/* ============================================================
   PIE — footer del sitio público

   Ocupa el ancho del contenido (mismo tope que la galería) y se
   apoya en la franja alterna para separarse del catálogo. Tres
   columnas en escritorio que se apilan de forma escalonada en
   pantallas chicas: primero a dos columnas (marca ancha arriba),
   después a una sola.
   ============================================================ */
.gal-pie {
  margin-top: clamp(4rem, 10vw, 9rem);
  border-top: var(--gal-borde);
  background: var(--gal-fondo-alt);
  padding: clamp(3rem, 6vw, 5.5rem) var(--gal-margen) 2.2rem;
}

.gal-pie__grilla {
  max-width: var(--gal-ancho-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: clamp(2rem, 5vw, 6rem);
  align-items: start;
}

.gal-pie__col--marca { max-width: 46ch; }

.gal-pie__marca {
  font-family: var(--gal-display);
  font-weight: 600;
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  letter-spacing: -0.015em;
  color: var(--gal-tinta-fuerte);
  margin: 0 0 0.5rem;
}
.gal-pie__lema {
  margin: 0 0 1.3rem;
  color: var(--gal-tinta-suave);
  font-family: var(--gal-display);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.gal-pie__firma {
  color: var(--gal-tinta-media);
  font-size: 1rem;
  line-height: 1.7;
  margin: 0;
}

.gal-pie__col { display: flex; flex-direction: column; }
.gal-pie__titulo {
  color: var(--gal-tinta-suave);
  margin: 0 0 1.1rem;
  font-family: var(--gal-display);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.gal-pie__link {
  color: var(--gal-tinta-media);
  text-decoration: none;
  padding: 0.4rem 0;
  font-size: 1rem;
  width: fit-content;
  border-bottom: 1px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.gal-pie__link:hover { color: var(--gal-tinta-fuerte); border-color: var(--gal-tinta-fuerte); }
.gal-pie__link--muerto { color: var(--gal-tinta-suave); cursor: default; }
.gal-pie__link--muerto:hover { border-color: transparent; color: var(--gal-tinta-suave); }

.gal-pie__base {
  max-width: var(--gal-ancho-max);
  margin: clamp(3rem, 6vw, 4.5rem) auto 0;
  padding-top: 1.8rem;
  border-top: var(--gal-borde-suave);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem 2.5rem;
  flex-wrap: wrap;
}
.gal-pie__legal {
  color: var(--gal-tinta-suave);
  margin: 0;
  max-width: 74ch;
  line-height: 1.65;
  font-size: 0.8rem;
}
.gal-pie__credito { color: var(--gal-tinta-suave); margin: 0; white-space: nowrap; font-size: 0.8rem; }
.gal-pie__enlace { color: var(--gal-tinta-media); text-decoration: none; border-bottom: 1px solid var(--gal-linea); }
.gal-pie__enlace:hover { color: var(--gal-tinta-fuerte); }

/* Escalonado: primero la marca ocupa toda la fila y las dos columnas
   de enlaces quedan al lado; después todo en una columna. */
@media (max-width: 860px) {
  .gal-pie__grilla { grid-template-columns: 1fr 1fr; gap: 2.6rem 3rem; }
  .gal-pie__col--marca { grid-column: 1 / -1; max-width: none; }
}
@media (max-width: 520px) {
  .gal-pie__grilla { grid-template-columns: 1fr; gap: 2.2rem; }
  .gal-pie__base { flex-direction: column; gap: 1rem; }
}
.gal-destacadas {
  padding: clamp(2rem, 4vw, 3.4rem) var(--gal-margen) clamp(2.2rem, 4vw, 3.4rem);
  background: var(--gal-fondo-hondo);
  border-top: var(--gal-borde-suave);
  border-bottom: var(--gal-borde-suave);
  outline: none;
}

.gal-destacadas__caja {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(1.8rem, 4vw, 4rem);
  align-items: center;
}

/* ---------- la obra ---------- */
.gal-destacadas__obra { min-width: 0; }

.gal-destacadas__marco {
  display: grid;
  place-items: center;
  /* Alto fijo para que el bloque no salte de tamano al cambiar de
     obra: una vertical y una apaisada tienen que ocupar el mismo
     lugar, si no la pagina se sacude en cada pase. */
  height: clamp(20rem, 42vw, 32rem);
  padding: clamp(1rem, 2.2vw, 2rem);
  background: var(--gal-blanco);
  box-shadow: var(--gal-sombra);
}

.gal-destacadas__marco picture { display: contents; }

.gal-destacadas__marco img {
  max-width: 100%;
  max-height: 100%;
  min-width: 0;
  min-height: 0;
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 0 2px 10px -3px rgba(0, 0, 0, 0.4);
}

/* ---------- el texto ---------- */
/* La animacion la dispara el cambio de `key` en React: al pasar de
   obra el nodo se reemplaza y el fundido vuelve a correr. */
.gal-destacadas__texto {
  min-width: 0;
  animation: gal-entrar 460ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

@keyframes gal-entrar {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.gal-destacadas__eyebrow {
  margin: 0 0 1rem;
  color: var(--gal-tinta-suave);
}

.gal-destacadas__titulo {
  margin: 0;
  font-family: var(--gal-texto);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  line-height: 1.1;
  color: var(--gal-tinta-fuerte);
}

.gal-destacadas__anio {
  font-style: normal;
  font-weight: 300;
  color: var(--gal-tinta-media);
}

.gal-destacadas__datos {
  margin: 0.7rem 0 0;
  font-family: var(--gal-display);
  font-size: 0.78rem;
  color: var(--gal-tinta-media);
}

.gal-destacadas__descripcion {
  margin: 1.3rem 0 0;
  max-width: 34rem;
  font-size: 1.02rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--gal-tinta);
}

.gal-destacadas__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.4rem;
  margin-top: 1.8rem;
  padding-top: 1.3rem;
  border-top: var(--gal-borde);
}

.gal-destacadas__precio {
  font-family: var(--gal-display);
  font-weight: 600;
  font-size: 1.1rem;
  font-variant-numeric: tabular-nums;
  color: var(--gal-tinta-fuerte);
}

.gal-destacadas__cta {
  padding: 0.85rem 1.5rem;
  color: var(--gal-fondo);
  background: var(--gal-tinta-fuerte);
  transition: background 180ms ease;
}
.gal-destacadas__cta:hover { background: var(--gal-tinta); }

.gal-destacadas__sobre {
  display: inline-block;
  margin-top: 1.4rem;
  font-size: 0.92rem;
  color: var(--gal-tinta-media);
  border-bottom: 1px solid var(--gal-linea);
  padding-bottom: 2px;
  transition: color 180ms ease, border-color 180ms ease;
}
.gal-destacadas__sobre:hover {
  color: var(--gal-tinta-fuerte);
  border-color: var(--gal-tinta-fuerte);
}

/* ---------- controles ---------- */
.gal-destacadas__controles {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: clamp(1.4rem, 3vw, 2.2rem);
}

.gal-destacadas__flecha {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  color: var(--gal-tinta-media);
  border: 1px solid var(--gal-linea);
  transition: color 160ms ease, border-color 160ms ease;
}
.gal-destacadas__flecha:hover {
  color: var(--gal-tinta-fuerte);
  border-color: var(--gal-tinta-fuerte);
}

.gal-destacadas__puntos {
  display: flex;
  gap: 0.5rem;
  margin-right: auto;
}

.gal-destacadas__punto {
  width: 30px;
  height: 12px;
  padding: 5px 0;
  background: none;
}
.gal-destacadas__punto::after {
  content: '';
  display: block;
  height: 2px;
  background: var(--gal-tinta-tenue);
  transition: background 200ms ease;
}
.gal-destacadas__punto--activo::after { background: var(--gal-tinta-fuerte); }
.gal-destacadas__punto:hover::after { background: var(--gal-tinta); }

.gal-destacadas__contador {
  color: var(--gal-tinta-suave);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 900px) {
  .gal-destacadas__caja { grid-template-columns: 1fr; }
  .gal-destacadas__marco { height: clamp(16rem, 62vw, 24rem); }
  .gal-destacadas__contador { display: none; }
}
.gal-cartela {
  text-align: left;
  line-height: 1.35;
  color: var(--gal-tinta);
}

.gal-cartela__autor {
  margin: 0 0 0.6em;
  color: var(--gal-tinta-suave);
  font-size: 0.6rem;
}

.gal-cartela__titulo {
  margin: 0;
  font-family: var(--gal-texto);
  font-weight: 500;
  font-style: italic;
  color: var(--gal-tinta-fuerte);
}

.gal-cartela__anio {
  font-style: normal;
  font-weight: 300;
  color: var(--gal-tinta-media);
}

.gal-cartela__tecnica,
.gal-cartela__medidas {
  margin: 0.15em 0 0;
  font-family: var(--gal-display);
  font-weight: 400;
  color: var(--gal-tinta-media);
}

.gal-cartela__pie {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1em;
  margin-top: 0.9em;
  padding-top: 0.7em;
  border-top: var(--gal-borde-suave);
}

.gal-cartela__precio {
  font-family: var(--gal-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--gal-tinta-fuerte);
}

.gal-cartela__estado {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  white-space: nowrap;
  color: var(--gal-tinta-media);
}

/* El punto: codigo real de galeria. Vacio = disponible, rayado =
   reservada, lleno = vendida. */
.gal-cartela__punto {
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: transparent;
  border: 1px solid currentColor;
  flex: none;
}

.gal-cartela__estado--vendida { color: var(--gal-punto); }
.gal-cartela__estado--vendida .gal-cartela__punto {
  background: var(--gal-punto);
  border-color: var(--gal-punto);
}

.gal-cartela__estado--reservada .gal-cartela__punto {
  background: repeating-linear-gradient(
    45deg, currentColor 0 1px, transparent 1px 3px
  );
}

/* En muestra: punto lleno pero acromatico. La obra no esta vendida,
   pero tampoco esta en el taller lista para entregar. */
.gal-cartela__estado--muestra { color: var(--gal-tinta-fuerte); }
.gal-cartela__estado--muestra .gal-cartela__punto {
  background: currentColor;
}

/* ---------- variante grilla ---------- */
.gal-cartela--grilla {
  padding: 0.85rem 0 0;
}
.gal-cartela--grilla .gal-cartela__titulo { font-size: 1rem; }
.gal-cartela--grilla .gal-cartela__tecnica,
.gal-cartela--grilla .gal-cartela__medidas { font-size: 0.72rem; }
.gal-cartela--grilla .gal-cartela__precio { font-size: 0.88rem; }
.gal-cartela--grilla .gal-cartela__estado { font-size: 0.56rem; }

/* ---------- variante ficha (pagina de obra) ---------- */
.gal-cartela--ficha {
  font-size: 1rem;
}
.gal-cartela--ficha .gal-cartela__titulo { font-size: 1.7rem; line-height: 1.15; }
.gal-cartela--ficha .gal-cartela__tecnica,
.gal-cartela--ficha .gal-cartela__medidas { font-size: 0.8rem; }
.gal-cartela--ficha .gal-cartela__precio { font-size: 1.2rem; }
.gal-cartela--ficha .gal-cartela__pie { border-top-color: var(--gal-linea); }
.gal-galeria {
  padding: 0 var(--gal-margen) 6rem;
}

/* ---------- indice de categorias ---------- */
.gal-galeria__indice {
  position: sticky;
  top: var(--gal-nav-h);
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  padding: 1rem 0;
  margin-bottom: 1rem;
  background: var(--gal-fondo);
  border-bottom: var(--gal-borde-suave);
}

.gal-galeria__salto {
  padding: 0.5rem 0.9rem;
  color: var(--gal-tinta-media);
  border: 1px solid transparent;
  transition: color 160ms ease, border-color 160ms ease;
}
.gal-galeria__salto span { color: var(--gal-tinta-tenue); margin-left: 0.4em; }
.gal-galeria__salto:hover {
  color: var(--gal-tinta-fuerte);
  border-color: var(--gal-linea);
}

/* ---------- categoria ---------- */
.gal-cat {
  padding-top: clamp(2.4rem, 5vw, 4rem);
}

.gal-cat__cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.9rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--gal-tinta-fuerte);
}

.gal-cat__titulo {
  margin: 0;
  font-family: var(--gal-display);
  font-weight: 600;
  font-size: clamp(1.5rem, 3.4vw, 2.3rem);
  letter-spacing: -0.02em;
  color: var(--gal-tinta-fuerte);
}

.gal-cat__cuenta { color: var(--gal-tinta-suave); }

.gal-cat__bajada {
  flex: 1 0 100%;
  margin: 0.2rem 0 0;
  max-width: 40rem;
  font-weight: 300;
  font-size: 0.98rem;
  color: var(--gal-tinta-media);
}

/* ---------- subcategoria ---------- */
.gal-sub { padding-top: clamp(1.8rem, 3.5vw, 2.8rem); }

.gal-sub__titulo {
  margin: 0 0 1.3rem;
  color: var(--gal-tinta-media);
}

/* Las obras sin subcategoria no llevan encabezado, solo una separacion
   un poco mayor para que no parezcan parte del grupo anterior. */
.gal-sub--sueltas { padding-top: clamp(2.2rem, 4vw, 3.2rem); }

/* ---------- grilla de obras ---------- */
/* Columnas parejas, no mamposteria: el cliente pidio que todas las
   obras se vean del mismo tamano. La celda es siempre la misma y la
   obra se acomoda adentro. */
.gal-galeria__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.6rem, 3vw, 3rem) clamp(1.4rem, 3vw, 3.2rem);
}

.gal-obra__link {
  display: block;
  height: 100%;
}

.gal-obra__figura {
  margin: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* El passe-partout. Caja de proporcion fija, fondo blanco, y la obra
   centrada adentro sin recortarse ni estirarse: una apaisada y una
   vertical ocupan el mismo lugar en la pagina y conservan su forma. */
.gal-obra__marco {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 5;
  padding: clamp(0.9rem, 2vw, 1.8rem);
  background: var(--gal-blanco);
  box-shadow: var(--gal-sombra);
  transition: box-shadow 260ms ease;
}

/* display:contents saca al <picture> del layout y deja al <img> como item
   de la grilla. Sin esto, el max-height en porcentaje del img resolveria
   contra un <picture> de altura automatica, es decir contra nada, y una
   obra apaisada se desbordaria de la celda. Los <source> siguen valiendo:
   la eleccion de formato la hace el HTML, no el CSS. */
.gal-obra__marco picture { display: contents; }

/* max-height sobre el alto de la celda + width auto: la imagen nunca
   se recorta, se achica hasta entrar. */
.gal-obra__marco img {
  max-width: 100%;
  max-height: 100%;
  /* Un item de grilla no baja de su tamano intrinseco salvo que se le
     diga: sin esto, en los navegadores que no clampean con el max, una
     foto de 1800 px se sale de la celda. */
  min-width: 0;
  min-height: 0;
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 0 1px 6px -2px rgba(0, 0, 0, 0.35);
  transition: transform 420ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.gal-obra__link:hover .gal-obra__marco,
.gal-obra__link:focus-visible .gal-obra__marco {
  box-shadow: var(--gal-sombra-alta);
}
.gal-obra__link:hover .gal-obra__marco img {
  transform: scale(1.015);
}

.gal-galeria__vacio {
  padding: 4rem var(--gal-margen);
  font-style: italic;
  color: var(--gal-tinta-suave);
}

@media (max-width: 1100px) {
  .gal-galeria__lista { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .gal-galeria__lista { grid-template-columns: 1fr; }
  .gal-obra__marco { aspect-ratio: 1 / 1; }
  .gal-galeria__indice { padding: 0.7rem 0; }
}

/* ============================================================
   FILTROS de categoría / subcategoría
   ============================================================ */
.gal-filtros {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  padding-bottom: 1.4rem;
  margin-bottom: clamp(1.5rem, 4vw, 2.6rem);
  border-bottom: var(--gal-borde-suave);
}
.gal-filtro {
  display: inline-flex; align-items: center; gap: 0.5em;
  padding: 0.5rem 1rem;
  border: 1px solid var(--gal-linea);
  border-radius: 100px;
  color: var(--gal-tinta-media);
  background: transparent;
  transition: all 0.18s;
  cursor: pointer;
}
.gal-filtro:hover { border-color: var(--gal-tinta); color: var(--gal-tinta-fuerte); }
.gal-filtro--activo {
  background: var(--gal-tinta-fuerte);
  border-color: var(--gal-tinta-fuerte);
  color: #fff;
}
.gal-filtro__n {
  font-size: 0.72em;
  opacity: 0.6;
  font-variant-numeric: tabular-nums;
}
.gal-filtro--activo .gal-filtro__n { opacity: 0.75; }

.gal-subfiltros {
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem;
  margin: -0.6rem 0 2rem;
}
.gal-subfiltro {
  padding: 0.3rem 0;
  color: var(--gal-tinta-suave);
  background: transparent;
  border: none;
  border-bottom: 1.5px solid transparent;
  transition: color 0.16s, border-color 0.16s;
  cursor: pointer;
}
.gal-subfiltro:hover { color: var(--gal-tinta-fuerte); }
.gal-subfiltro--activo {
  color: var(--gal-tinta-fuerte);
  border-bottom-color: var(--gal-punto);
}
.gal-cargando {
  min-height: 60svh;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  color: var(--gal-tinta-suave);
}
.gal-cargando__punto {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--gal-tinta-media);
  animation: gal-latir 1.1s ease-in-out infinite;
}
@keyframes gal-latir {
  0%, 100% { opacity: 0.25; transform: scale(0.8); }
  50%      { opacity: 1;    transform: scale(1); }
}
.gal-error {
  min-height: 50svh; display: flex; align-items: center; justify-content: center;
  padding: 2rem; color: var(--gal-tinta-media); text-align: center;
}
/* La portada del catalogo no ocupa la pantalla entera: si lo hiciera,
   quien entra veria un nombre y tendria que scrollear para ver una
   obra. Ocupa lo justo para presentar. */
.gal-portada {
  padding: calc(var(--gal-nav-h) + clamp(2.5rem, 6vw, 4.5rem))
           var(--gal-margen)
           clamp(1.8rem, 3.5vw, 2.8rem);
  background: var(--gal-fondo);
}

.gal-portada__ubicacion {
  margin: 0 0 1.1rem;
  color: var(--gal-tinta-suave);
}

/* El nombre bajo de 8.5rem a un maximo de 3.4rem: a pedido del
   cliente, para que no aplaste al resto de la pantalla. Sigue siendo
   lo mas grande de la pagina, pero ahora convive con la obra en vez
   de taparla. */
.gal-portada__titulo {
  margin: 0;
  font-family: var(--gal-display);
  font-weight: 600;
  font-size: clamp(1.85rem, 4.4vw, 3.4rem);
  line-height: 1.02;
  letter-spacing: -0.028em;
  color: var(--gal-tinta-fuerte);
  text-wrap: balance;
}

.gal-portada__bajada {
  margin: 1.1rem 0 0;
  max-width: 34rem;
  font-size: clamp(0.98rem, 1.4vw, 1.1rem);
  font-weight: 300;
  line-height: 1.65;
  color: var(--gal-tinta-media);
}
.gal-pagina {
  min-height: 70svh;
  padding-top: var(--gal-nav-h);
}

.gal-pagina__cabecera {
  padding: clamp(2.6rem, 6vw, 5rem) var(--gal-margen) 0;
  max-width: 62rem;
}

.gal-pagina__eyebrow { margin: 0 0 1.1rem; color: var(--gal-tinta-suave); }

.gal-pagina__titulo {
  margin: 0;
  font-family: var(--gal-display);
  font-weight: 600;
  font-size: clamp(1.9rem, 4.6vw, 3.5rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: var(--gal-tinta-fuerte);
}

.gal-pagina__intro {
  margin: 1.2rem 0 0;
  max-width: 36rem;
  font-size: 1.05rem;
  font-weight: 300;
  line-height: 1.65;
  color: var(--gal-tinta-media);
}

.gal-pagina__cuerpo {
  padding: clamp(2.2rem, 5vw, 3.6rem) var(--gal-margen) 6rem;
  max-width: 44rem;
  font-size: 1.05rem;
  font-weight: 300;
  line-height: 1.72;
}

.gal-pagina__cuerpo p { margin: 0 0 1.3rem; }

.gal-pagina__cta {
  display: inline-block;
  padding: 1rem 1.8rem;
  color: var(--gal-fondo);
  background: var(--gal-tinta-fuerte);
  transition: background 180ms ease, transform 180ms ease;
}
.gal-pagina__cta:hover {
  background: var(--gal-tinta);
  transform: translateY(-1px);
}

.gal-pagina__datos {
  margin: 3rem 0 0;
  display: grid;
  gap: 0;
}
.gal-pagina__datos div {
  display: grid;
  gap: 0.35rem;
  padding: 1.1rem 0;
  border-top: var(--gal-borde-suave);
}
.gal-pagina__datos dt { color: var(--gal-tinta-suave); }
.gal-pagina__datos dd { margin: 0; }
.gal-obra-pag {
  padding: calc(var(--gal-nav-h) + clamp(1.6rem, 3vw, 2.6rem))
           var(--gal-margen) clamp(4rem, 8vw, 7rem);
}

.gal-obra-pag__ruta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: clamp(1.4rem, 3vw, 2.4rem);
  color: var(--gal-tinta-suave);
}
.gal-obra-pag__ruta a { transition: color 160ms ease; }
.gal-obra-pag__ruta a:hover { color: var(--gal-tinta-fuerte); }

.gal-obra-pag__caja {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}

/* La obra sola sobre un blanco amplio. Es el equivalente claro de
   apagar las luces de la sala: nada compite con la pieza. */
.gal-obra-pag__marco {
  margin: 0;
  display: grid;
  place-items: center;
  min-height: clamp(22rem, 56vh, 40rem);
  padding: clamp(1.4rem, 3.5vw, 3.5rem);
  background: var(--gal-blanco);
  box-shadow: var(--gal-sombra);
}

.gal-obra-pag__marco picture { display: contents; }

.gal-obra-pag__marco img {
  max-width: 100%;
  max-height: clamp(20rem, 72vh, 46rem);
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 0 3px 16px -5px rgba(0, 0, 0, 0.4);
}

/* ---------- ficha ---------- */
.gal-obra-pag__ficha { position: sticky; top: calc(var(--gal-nav-h) + 2rem); }

.gal-obra-pag__autor { margin: 0 0 0.8rem; color: var(--gal-tinta-suave); }

.gal-obra-pag__titulo {
  margin: 0;
  font-family: var(--gal-texto);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  line-height: 1.12;
  color: var(--gal-tinta-fuerte);
}

.gal-obra-pag__anio {
  font-style: normal;
  font-weight: 300;
  color: var(--gal-tinta-media);
}

.gal-obra-pag__datos {
  margin: 1.6rem 0 0;
  display: grid;
  gap: 0.9rem;
  padding-top: 1.3rem;
  border-top: var(--gal-borde-suave);
}
.gal-obra-pag__datos div { display: grid; gap: 0.25rem; }
.gal-obra-pag__datos dt { color: var(--gal-tinta-suave); }
.gal-obra-pag__datos dd { margin: 0; font-size: 0.98rem; }

.gal-obra-pag__descripcion {
  margin: 1.6rem 0 0;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.72;
}

.gal-obra-pag__estado-caja {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.8rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--gal-tinta-fuerte);
}

.gal-obra-pag__precio {
  font-family: var(--gal-display);
  font-weight: 600;
  font-size: 1.35rem;
  font-variant-numeric: tabular-nums;
  color: var(--gal-tinta-fuerte);
}

.gal-obra-pag__estado {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  white-space: nowrap;
  color: var(--gal-tinta-media);
}

.gal-obra-pag__punto {
  width: 0.5em; height: 0.5em;
  border-radius: 50%;
  border: 1px solid currentColor;
  flex: none;
}
.gal-obra-pag__estado--vendida { color: var(--gal-punto); }
.gal-obra-pag__estado--vendida .gal-obra-pag__punto {
  background: var(--gal-punto); border-color: var(--gal-punto);
}
.gal-obra-pag__estado--reservada .gal-obra-pag__punto {
  background: repeating-linear-gradient(45deg, currentColor 0 1px, transparent 1px 3px);
}
.gal-obra-pag__estado--muestra { color: var(--gal-tinta-fuerte); }
.gal-obra-pag__estado--muestra .gal-obra-pag__punto { background: currentColor; }

.gal-obra-pag__cta {
  display: block;
  margin-top: 1.6rem;
  padding: 1.05rem 1.5rem;
  text-align: center;
  color: var(--gal-fondo);
  background: var(--gal-tinta-fuerte);
  transition: background 180ms ease;
}
.gal-obra-pag__cta:hover { background: var(--gal-tinta); }

.gal-obra-pag__nota {
  margin: 1rem 0 0;
  font-size: 0.92rem;
  font-style: italic;
  color: var(--gal-tinta-media);
}

/* ---------- mas de la serie ---------- */
.gal-obra-pag__mas {
  margin-top: clamp(3.5rem, 7vw, 6rem);
  padding-top: 1.6rem;
  border-top: var(--gal-borde-suave);
}

.gal-obra-pag__mas-titulo { margin: 0 0 1.6rem; color: var(--gal-tinta-media); }

.gal-obra-pag__tira {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 2.4vw, 2rem);
}

.gal-obra-pag__hermana-marco {
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  padding: 0.9rem;
  background: var(--gal-blanco);
  box-shadow: var(--gal-sombra);
  transition: box-shadow 240ms ease;
}
.gal-obra-pag__hermana-marco picture { display: contents; }
.gal-obra-pag__hermana-marco img {
  max-width: 100%; max-height: 100%;
  min-width: 0; min-height: 0;
  width: auto; height: auto; object-fit: contain;
}
.gal-obra-pag__hermana:hover .gal-obra-pag__hermana-marco {
  box-shadow: var(--gal-sombra-alta);
}

.gal-obra-pag__hermana-titulo {
  display: block;
  margin-top: 0.6rem;
  font-style: italic;
  font-size: 0.9rem;
  color: var(--gal-tinta-media);
}

@media (max-width: 900px) {
  .gal-obra-pag__caja { grid-template-columns: 1fr; }
  .gal-obra-pag__ficha { position: static; }
  .gal-obra-pag__marco { min-height: 0; }
  .gal-obra-pag__tira { grid-template-columns: repeat(2, 1fr); }
}
.gal-sobre {
  padding: calc(var(--gal-nav-h) + clamp(2.5rem, 6vw, 5rem))
           var(--gal-margen) clamp(4rem, 8vw, 7rem);
}

/* ---------- cabecera ---------- */
.gal-sobre__cabecera {
  max-width: 52rem;
  padding-bottom: clamp(2.2rem, 4vw, 3.4rem);
  border-bottom: 1px solid var(--gal-tinta-fuerte);
}

.gal-sobre__eyebrow { margin: 0 0 1.2rem; color: var(--gal-tinta-suave); }

.gal-sobre__titulo {
  margin: 0;
  font-family: var(--gal-display);
  font-weight: 600;
  font-size: clamp(1.9rem, 4.6vw, 3.5rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: var(--gal-tinta-fuerte);
  text-wrap: balance;
}

.gal-sobre__entrada {
  margin: 1.5rem 0 0;
  max-width: 38rem;
  font-size: clamp(1.1rem, 1.8vw, 1.32rem);
  font-weight: 300;
  line-height: 1.6;
  color: var(--gal-tinta);
}

.gal-sobre__firma { margin: 1.8rem 0 0; color: var(--gal-tinta-suave); }

/* ---------- cuerpo: retrato + texto ---------- */
.gal-sobre__cuerpo {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
  padding-top: clamp(2.5rem, 5vw, 4rem);
}

.gal-sobre__retrato {
  margin: 0;
  /* El retrato acompana la lectura en vez de quedarse arriba. */
  position: sticky;
  top: calc(var(--gal-nav-h) + 2rem);
}

.gal-sobre__retrato img {
  width: 100%;
  height: auto;
  background: var(--gal-fondo-alt);
  box-shadow: var(--gal-sombra);
}

.gal-sobre__epigrafe {
  margin-top: 0.8rem;
  font-family: var(--gal-display);
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--gal-tinta-suave);
}

.gal-sobre__texto {
  max-width: 34rem;
  font-size: 1.06rem;
  font-weight: 300;
  line-height: 1.78;
}

.gal-sobre__texto p { margin: 0 0 1.4rem; }

/* Capitular. Es el gesto que dice "esto es una nota, no una ficha".
   Uno solo, en el primer parrafo. */
.gal-sobre__primero::first-letter {
  float: left;
  font-family: var(--gal-display);
  font-weight: 600;
  font-size: 3.6em;
  line-height: 0.82;
  padding: 0.06em 0.12em 0 0;
  color: var(--gal-tinta-fuerte);
}

.gal-sobre__cita {
  margin: 2.4rem 0;
  padding: 0 0 0 1.4rem;
  border-left: 2px solid var(--gal-tinta-fuerte);
}
.gal-sobre__cita p {
  margin: 0;
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.45;
  color: var(--gal-tinta-fuerte);
}

/* ---------- trayectoria ---------- */
.gal-sobre__trayectoria {
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-top: 1.8rem;
  border-top: var(--gal-borde);
}

.gal-sobre__trayectoria-titulo { margin: 0 0 2rem; color: var(--gal-tinta-media); }

.gal-sobre__columnas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.6rem, 3.5vw, 3rem);
}

.gal-sobre__bloque-titulo {
  margin: 0 0 0.9rem;
  font-family: var(--gal-display);
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--gal-tinta-fuerte);
}

.gal-sobre__lista {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.95rem;
  font-weight: 300;
  line-height: 1.55;
  color: var(--gal-tinta);
}
.gal-sobre__lista li {
  padding: 0.6rem 0;
  border-top: var(--gal-borde-suave);
}

/* ---------- salida ---------- */
.gal-sobre__salida {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.6rem;
  margin-top: clamp(3rem, 6vw, 5rem);
}

.gal-sobre__cta {
  padding: 1rem 1.8rem;
  color: var(--gal-fondo);
  background: var(--gal-tinta-fuerte);
  transition: background 180ms ease;
}
.gal-sobre__cta:hover { background: var(--gal-tinta); }

.gal-sobre__enlace {
  color: var(--gal-tinta-media);
  border-bottom: 1px solid var(--gal-linea);
  padding-bottom: 2px;
  transition: color 180ms ease, border-color 180ms ease;
}
.gal-sobre__enlace:hover {
  color: var(--gal-tinta-fuerte);
  border-color: var(--gal-tinta-fuerte);
}

@media (max-width: 900px) {
  .gal-sobre__cuerpo { grid-template-columns: 1fr; }
  .gal-sobre__retrato { position: static; max-width: 26rem; }
  .gal-sobre__columnas { grid-template-columns: 1fr; }
}
/* El footer ahora vive en componentes/pie.css (componente Pie).
   Este archivo quedó vacío a propósito tras el rediseño: las reglas
   viejas del pie del mockup se eliminaron para no competir con las
   nuevas por el mismo selector .gal-pie. */


/* ============================================================
   TOKENS — versión clara (v2)

   El cliente pidió pasar todo a claro: fondo #efefef y el texto
   que antes era crema, ahora en #4f4f4f. La interfaz queda
   acromática a propósito: el único color de la pantalla lo ponen
   los cuadros.

   Se conserva un solo acento cromático, el punto rojo de obra
   vendida, porque no es color de marca sino código del rubro:
   en una galería real el punto rojo significa una sola cosa.
   ============================================================ */
:root {
  /* --- fondos --- */
  --gal-fondo:        #EFEFEF;  /* fondo general, pedido por el cliente */
  --gal-fondo-alt:    #E7E7E7;  /* franjas alternas, pie */
  --gal-fondo-hondo:  #DFDFDF;  /* fondo del slideshow, un escalón más */
  --gal-blanco:       #FFFFFF;  /* passe-partout de cada obra y cartelas */

  /* --- tinta ---
     #4f4f4f es el texto base (pedido explícito). El negro queda
     reservado para lo que tiene que pesar más que el resto:
     títulos, precio y estados activos. Dos valores, no cinco. */
  --gal-tinta:        #4F4F4F;
  --gal-tinta-fuerte: #1C1C1C;
  --gal-tinta-media:  #7A7A7A;
  --gal-tinta-suave:  #9B9B9B;
  --gal-tinta-tenue:  #BDBDBD;

  --gal-linea:        rgba(79, 79, 79, 0.16);
  --gal-linea-suave:  rgba(79, 79, 79, 0.09);
  --gal-borde:        1px solid var(--gal-linea);
  --gal-borde-suave:  1px solid var(--gal-linea-suave);

  /* --- único acento --- */
  --gal-punto:        #C4342A;

  --gal-display: 'Archivo', system-ui, -apple-system, sans-serif;
  --gal-texto:   'Spectral', Georgia, serif;

  --gal-nav-h: 64px;
  --gal-margen: clamp(1.2rem, 5vw, 4.5rem);
  --gal-ancho-max: 1500px;

  /* Sombra de obra sobre pared clara: casi no existe. En fondo
     oscuro se podía apoyar el cuadro con una sombra fuerte; sobre
     gris claro esa misma sombra se ve sucia. */
  --gal-sombra: 0 2px 14px -6px rgba(0, 0, 0, 0.16);
  --gal-sombra-alta: 0 10px 30px -14px rgba(0, 0, 0, 0.28);
}

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

html, body, #root { min-height: 100%; }

html {
  overscroll-behavior-y: none;
  scroll-behavior: smooth;
  /* Los anclajes de categoría no deben quedar debajo de la nav fija. */
  scroll-padding-top: calc(var(--gal-nav-h) + 1.5rem);
}

body {
  margin: 0;
  font-family: var(--gal-texto);
  font-weight: 400;
  color: var(--gal-tinta);
  background: var(--gal-fondo);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior-x: none;
}

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

button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }

a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--gal-tinta-fuerte);
  outline-offset: 3px;
}

/* Etiqueta institucional de museo. Se usa solo donde hay un dato
   real que etiquetar (estado, sección, contador), no de adorno. */
.gal-label {
  font-family: var(--gal-display);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.gal-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- huecos de imagen (mientras carga o procesa) ---------- */
.gal-img-hueco {
  display: block;
  width: 100%;
  border-radius: inherit;
}
.gal-sobre__retrato-hueco {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 4 / 5;
  background: var(--gal-linea, #e2e2e2);
  color: var(--gal-tinta-suave, #8a8a8a);
  border-radius: 2px;
}
.gal-sobre__retrato-hueco::after {
  content: 'Retrato a cargar';
  font-size: 0.8rem;
  letter-spacing: 0.04em;
}