@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);
  }
}

/* En las paginas que abren sobre una obra la barra flota encima de la
   imagen: se pinta en claro hasta que el scroll la posa sobre su fondo
   solido. Las dos aperturas comparten el mismo tratamiento. */
body:has(.gal-sobre__apertura) .gal-nav:not(.gal-nav--posado),
body:has(.gal-contacto__apertura) .gal-nav:not(.gal-nav--posado) {
  color: var(--gal-crema, #F4F1EB);
}
body:has(.gal-sobre__apertura) .gal-nav:not(.gal-nav--posado) .gal-nav__nombre,
body:has(.gal-contacto__apertura) .gal-nav:not(.gal-nav--posado) .gal-nav__nombre {
  color: var(--gal-crema, #F4F1EB);
}
body:has(.gal-sobre__apertura) .gal-nav:not(.gal-nav--posado) .gal-nav__disciplina,
body:has(.gal-sobre__apertura) .gal-nav:not(.gal-nav--posado) .gal-nav__link,
body:has(.gal-contacto__apertura) .gal-nav:not(.gal-nav--posado) .gal-nav__disciplina,
body:has(.gal-contacto__apertura) .gal-nav:not(.gal-nav--posado) .gal-nav__link {
  color: rgba(244, 241, 235, 0.78);
}
body:has(.gal-sobre__apertura) .gal-nav:not(.gal-nav--posado) .gal-nav__link--activo,
body:has(.gal-contacto__apertura) .gal-nav:not(.gal-nav--posado) .gal-nav__link--activo {
  color: var(--gal-crema, #F4F1EB);
}
/* ============================================================
   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; }
}

/* ============================================================
   PIE — tratamiento oscuro

   Antes usaba el mismo gris que el resto de la pagina, asi que no se
   percibia como cierre: se leia como mas contenido. En tinta la pagina
   termina de verdad, y el nombre en crema se lee mucho mejor que en
   gris sobre gris. Es el mismo oscuro que ya usa la trayectoria, no un
   color nuevo.
   ============================================================ */
.gal-pie {
  background: var(--gal-tinta, #14120F);
  border-top: 0;
  color: rgba(244, 241, 235, 0.62);
}

/* Nombre: lo unico a plena crema. */
.gal-pie__marca,
.gal-pie__nombre,
.gal-pie h2 { color: #F4F1EB; }

/* Rotulos de columna en ambar tenue: el mismo acento de la sala y de
   la trayectoria, usado con cuentagotas. */
.gal-pie__rotulo,
.gal-pie .gal-label { color: rgba(232, 184, 114, 0.72); }

.gal-pie__dato,
.gal-pie__texto,
.gal-pie p { color: rgba(244, 241, 235, 0.62); }

.gal-pie__link {
  color: rgba(244, 241, 235, 0.78);
  border-bottom-color: transparent;
}
.gal-pie__link:hover {
  color: #F4F1EB;
  border-bottom-color: #F4F1EB;
}
.gal-pie__link--muerto { color: rgba(244, 241, 235, 0.34); }
.gal-pie__link--muerto:hover { color: rgba(244, 241, 235, 0.34); border-bottom-color: transparent; }

/* Barra inferior: presente pero al fondo del orden de lectura. */
.gal-pie__barra,
.gal-pie__legal { border-top-color: rgba(244, 241, 235, 0.12); }
.gal-pie__legal,
.gal-pie__copyright { color: rgba(244, 241, 235, 0.38); }

.gal-pie__credito { color: rgba(244, 241, 235, 0.45); }
.gal-pie__enlace {
  color: rgba(244, 241, 235, 0.72);
  border-bottom-color: rgba(244, 241, 235, 0.24);
}
.gal-pie__enlace:hover { color: var(--gal-luz, #E8B872); border-bottom-color: var(--gal-luz, #E8B872); }
.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; }
}

/* ---------- navegacion del slideshow (rediseño) ----------
   Contador y flechas juntos al pie de la columna de texto, alineados
   con el contenido en vez de flotando de borde a borde. */
.gal-destacadas__nav {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  margin-top: 2.2rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--gal-borde-noche, rgba(244,241,235,0.14));
}

.gal-destacadas__contador {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  font-family: var(--gal-display, 'Archivo', sans-serif);
  font-variant-numeric: tabular-nums;
}
/* Numero grande y total chico: la posicion importa, el total es contexto. */
.gal-destacadas__actual {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--gal-crema, #F4F1EB);
  line-height: 1;
}
.gal-destacadas__total {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--gal-crema-tenue, rgba(244,241,235,0.34));
}

.gal-destacadas__flechas { display: flex; gap: 0.5rem; margin-left: auto; }

.gal-destacadas__flecha {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  cursor: pointer;
  border: 1px solid var(--gal-borde-noche, rgba(244,241,235,0.14));
  background: transparent;
  color: var(--gal-crema-media, rgba(244,241,235,0.62));
  transition: color 180ms ease, border-color 180ms ease, background 180ms ease;
}
.gal-destacadas__flecha:hover {
  color: var(--gal-fondo, #100E0C);
  background: var(--gal-crema, #F4F1EB);
  border-color: var(--gal-crema, #F4F1EB);
}

/* Barra de avance bajo la imagen. */
.gal-destacadas__barra {
  display: block;
  height: 2px;
  margin-top: 1rem;
  background: var(--gal-borde-noche, rgba(244,241,235,0.14));
}
.gal-destacadas__barra-relleno {
  display: block;
  height: 100%;
  background: var(--gal-luz, #E8B872);
  transition: width 520ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Los controles viejos ya no se usan. */
.gal-destacadas__controles,
.gal-destacadas__puntos { display: none; }

@media (max-width: 720px) {
  .gal-destacadas__nav { margin-top: 1.6rem; padding-top: 1.1rem; }
  .gal-destacadas__flecha { width: 40px; height: 40px; }
}


/* El hero va sobre fondo claro: los controles se pintan con la tinta
   del sitio, no con la crema del tema nocturno. */
.gal-destacadas__nav { border-top-color: var(--gal-borde, rgba(20,18,15,0.16)); }
.gal-destacadas__actual { color: var(--gal-tinta, #14120F); }
.gal-destacadas__total { color: var(--gal-tinta-suave, #6B655D); }

.gal-destacadas__flecha {
  border-color: rgba(20,18,15,0.22);
  color: var(--gal-tinta, #14120F);
}
.gal-destacadas__flecha:hover {
  background: var(--gal-tinta, #14120F);
  border-color: var(--gal-tinta, #14120F);
  color: #FFFFFF;
}

.gal-destacadas__barra { background: rgba(20,18,15,0.12); }
.gal-destacadas__barra-relleno { background: var(--gal-tinta, #14120F); }
.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); }

/* ---------- estados por color ----------
   El punto rojo de "vendida" es codigo real de galeria y ya se leia
   solo. Los otros dos estados quedaban acromaticos, asi que habia que
   leer la palabra para distinguirlos. Con color los tres se reconocen
   de un vistazo, sin cambiar de lenguaje: verde ingles apagado y el
   mismo ambar que el sitio usa de acento, no un semaforo de ecommerce. */
.gal-cartela__estado--disponible { color: var(--gal-verde, #2F7D4F); }
.gal-cartela__estado--disponible .gal-cartela__punto {
  background: var(--gal-verde, #2F7D4F);
  border-color: var(--gal-verde, #2F7D4F);
}

.gal-cartela__estado--reservada { color: var(--gal-ambar, #9A6A12); }
.gal-cartela__estado--reservada .gal-cartela__punto {
  border-color: var(--gal-ambar, #9A6A12);
  /* Rayado: la obra tiene reserva pero la operacion no esta cerrada. */
  background: repeating-linear-gradient(
    45deg,
    var(--gal-ambar, #9A6A12) 0 1.5px,
    transparent 1.5px 3px
  );
}
.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);
}

/* ============================================================
   PASO DEL HERO A LA GALERIA (rediseño)

   El problema: hero, filtros y galeria tenian cada uno su franja de
   fondo, asi que se leian como tres bloques apilados sin relacion. Y
   los controles del slideshow quedaban flotando en la franja del medio,
   lejos de la imagen a la que pertenecen.

   Ahora los filtros dejan de ser una banda propia y pasan a ser la
   cabecera de la galeria: el mismo fondo, alineados con las obras.
   ============================================================ */
.gal-filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 1.6rem;
  padding: clamp(2.6rem, 5vw, 4rem) 0 1.2rem;
  margin: 0;
  background: transparent;
  border-bottom: 1px solid var(--gal-borde, rgba(20,18,15,0.14));
}

/* Sin capsulas: los años se leen como una linea de indice, que es lo
   que son. Las pildoras son el patron de cualquier tienda y no dicen
   nada del subjeto. */
.gal-filtro {
  padding: 0.35rem 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-family: var(--gal-display, 'Archivo', sans-serif);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gal-tinta-suave, #6B655D);
  cursor: pointer;
  position: relative;
  transition: color 180ms ease;
}
.gal-filtro:hover { color: var(--gal-tinta, #14120F); }

/* La activa se marca con una linea debajo, no con un relleno. */
.gal-filtro--activo { color: var(--gal-tinta, #14120F); }
.gal-filtro--activo::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1.2rem;
  height: 2px;
  background: var(--gal-tinta, #14120F);
}

/* El contador de cada filtro, chico y en superindice. */
.gal-filtro span,
.gal-filtro__cuenta {
  margin-left: 0.4em;
  font-size: 0.72em;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--gal-tinta-tenue, #9A958D);
  vertical-align: super;
}

/* El conteo se conserva en la vista "Todas", donde hay varias secciones
   apiladas y orienta. En la vista filtrada se oculta desde el JSX,
   porque ahi el filtro de arriba ya lo dice. */

/* El slideshow cierra con su propio fondo, sin franja intermedia. */
.gal-destacadas { padding-bottom: clamp(2rem, 4vw, 3rem); }

/* La figura es una columna flex de alto 100%: cuando la tarjeta se
   estira a la altura de la fila, el marco —que tiene aspect-ratio y no
   alto propio— se deforma y la obra queda corrida hacia abajo. Fijando
   el marco y dejando que sobre el aire debajo de la cartela, todas las
   obras quedan centradas en su passe-partout. */
.gal-obra__marco { flex: 0 0 auto; }

/* El aire sobrante se va al pie, no al medio de la tarjeta. */
.gal-obra__figura { justify-content: flex-start; }

/* Un item de grilla no se achica por debajo de su contenido salvo que se
   le diga. Sin esto, la imagen apaisada empujaba el marco 13 px por
   encima del aspect-ratio y esa obra quedaba con otra altura que el
   resto de la fila. */
.gal-obra__marco {
  overflow: hidden;
  min-height: 0;
}
.gal-obra__marco img { max-height: 100%; }

/* La imagen quedaba empujada hacia abajo dentro del passe-partout: con
   `place-items: center` sobre un grid, un item cuya altura se resuelve
   por max-height no siempre reparte el sobrante en partes iguales.
   Con una sola fila y columna explicitas, y alineacion en ambos ejes,
   el centrado es exacto. */
.gal-obra__marco {
  grid-template-rows: 1fr;
  grid-template-columns: 1fr;
  align-content: center;
  justify-content: center;
}
.gal-obra__marco img {
  align-self: center;
  justify-self: center;
  margin: auto;
}

/* Vuelta a flex: con grid, el item cuya altura se resuelve por
   max-height no reparte el sobrante de forma predecible, y las reglas
   apiladas para forzarlo empujaron todas las obras hacia abajo.
   Un centro flex en los dos ejes no tiene esa ambiguedad. */
.gal-obra__marco {
  display: flex;
  align-items: center;
  justify-content: center;
  grid-template-rows: none;
  grid-template-columns: none;
}
.gal-obra__marco img {
  margin: 0;
  align-self: center;
  flex: 0 1 auto;
}
.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; }
}

/* ============================================================
   SOBRE MI — rediseño por secciones

   Antes cada seccion era la misma caja: titulo, linea, contenido en
   columnas. Ahora cada una tiene su propia logica y su propio fondo,
   porque hacen cosas distintas: una presenta, otra se lee, otra
   muestra una foto y la ultima ordena hechos en el tiempo.
   ============================================================ */
.gal-sobre { padding: 0; }

/* ---------- apertura ---------- */
.gal-sobre__apertura {
  position: relative;
  min-height: min(78svh, 720px);
  display: flex;
  align-items: flex-end;
  padding: calc(var(--gal-nav-h, 68px) + 3rem) var(--gal-margen) clamp(2.5rem, 6vw, 5rem);
  overflow: hidden;
  background: var(--gal-tinta, #14120F);
}
.gal-sobre__fondo { position: absolute; inset: 0; }
.gal-sobre__fondo img { width: 100%; height: 100%; object-fit: cover; }
/* La obra se atenua para que el texto se lea sin recortarla ni taparla. */
.gal-sobre__velo {
  position: absolute; inset: 0;
  background: linear-gradient(
    100deg,
    rgba(20,18,15,0.93) 0%,
    rgba(20,18,15,0.82) 42%,
    rgba(20,18,15,0.45) 100%
  );
}
.gal-sobre__intro { position: relative; max-width: 46rem; }
.gal-sobre__apertura .gal-sobre__eyebrow { color: rgba(244,241,235,0.6); }
.gal-sobre__apertura .gal-sobre__titulo { color: #F4F1EB; }
.gal-sobre__apertura .gal-sobre__entrada { color: rgba(244,241,235,0.82); }
.gal-sobre__apertura .gal-sobre__firma { color: rgba(244,241,235,0.5); }

/* ---------- ensayo ---------- */
.gal-sobre__ensayo {
  background: #FFFFFF;
  padding: clamp(3.5rem, 8vw, 7rem) var(--gal-margen);
}
/* Medida de lectura: pasada de ~70 caracteres el ojo pierde el renglon. */
.gal-sobre__texto {
  max-width: 34rem;
  margin: 0 auto;
  font-size: clamp(1.02rem, 1.3vw, 1.15rem);
  line-height: 1.75;
}
.gal-sobre__cita {
  max-width: 52rem;
  margin: clamp(2.5rem, 5vw, 4rem) auto 0;
  padding: 0;
  border: 0;
  border-top: 1px solid var(--gal-borde, rgba(20,18,15,0.14));
  padding-top: clamp(2rem, 4vw, 3rem);
  text-align: center;
}
.gal-sobre__cita p {
  margin: 0;
  font-family: var(--gal-texto, 'Spectral', Georgia, serif);
  font-style: italic;
  font-size: clamp(1.4rem, 3vw, 2.1rem);
  line-height: 1.35;
  color: var(--gal-tinta, #14120F);
}

/* ---------- retrato ---------- */
.gal-sobre__franja-retrato {
  background: var(--gal-fondo, #ECECEC);
  padding: clamp(3rem, 7vw, 6rem) var(--gal-margen);
}
.gal-sobre__retrato {
  max-width: 58rem;
  margin: 0 auto;
}
.gal-sobre__retrato img {
  width: 100%;
  height: auto;
  display: block;
  box-shadow: 0 24px 60px -30px rgba(0,0,0,0.5);
}
.gal-sobre__epigrafe {
  margin-top: 1rem;
  font-size: 0.82rem;
  color: var(--gal-tinta-suave, #6B655D);
}

/* ---------- trayectoria ---------- */
.gal-sobre__trayectoria {
  background: var(--gal-tinta, #14120F);
  color: #F4F1EB;
  padding: clamp(3.5rem, 8vw, 7rem) var(--gal-margen);
}
.gal-sobre__tray-caja { max-width: 62rem; margin: 0 auto; }
.gal-sobre__trayectoria-titulo { color: rgba(244,241,235,0.5); margin: 0 0 2.5rem; }
.gal-sobre__tray-bloque { margin-bottom: clamp(2.2rem, 4vw, 3.4rem); }
.gal-sobre__tray-bloque:last-child { margin-bottom: 0; }
.gal-sobre__bloque-titulo {
  font-family: var(--gal-display, 'Archivo', sans-serif);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #F4F1EB;
  margin: 0 0 1.2rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid rgba(244,241,235,0.14);
}
.gal-sobre__linea { list-style: none; margin: 0; padding: 0; }
/* El año ancla a la izquierda: la lista pasa a leerse como cronologia. */
.gal-sobre__hito {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: 1.4rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid rgba(244,241,235,0.08);
}
.gal-sobre__hito:last-child { border-bottom: 0; }
.gal-sobre__anio {
  font-family: var(--gal-display, 'Archivo', sans-serif);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--gal-luz, #E8B872);
  font-variant-numeric: tabular-nums;
}
.gal-sobre__hecho {
  font-size: 0.98rem;
  line-height: 1.55;
  color: rgba(244,241,235,0.82);
}

/* ---------- salida ---------- */
.gal-sobre__salida {
  background: #FFFFFF;
  padding: clamp(3rem, 6vw, 5rem) var(--gal-margen);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  border: 0;
}
.gal-sobre__salida-texto {
  margin: 0;
  max-width: 28rem;
  font-size: 1.02rem;
  color: var(--gal-tinta-suave, #6B655D);
}
.gal-sobre__salida-acciones { display: flex; align-items: center; gap: 1.5rem; }

/* Las columnas viejas ya no se usan. */
.gal-sobre__cuerpo, .gal-sobre__columnas, .gal-sobre__cabecera { display: block; }
.gal-sobre__lista { display: none; }

@media (max-width: 720px) {
  .gal-sobre__apertura { min-height: 62svh; }
  .gal-sobre__hito { grid-template-columns: 3.5rem minmax(0, 1fr); gap: 1rem; }
}

/* ---------- ensayo con retrato fijo ----------
   Dos columnas: la foto se queda pegada mientras el texto pasa. Si la
   biografia es mas larga que la imagen —que es lo normal— la cara
   acompaña toda la lectura en lugar de perderse al primer scroll. */
.gal-sobre__dos {
  max-width: 74rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}

@media (min-width: 900px) {
  .gal-sobre__dos { grid-template-columns: 38% minmax(0, 1fr); }
  .gal-sobre__retrato {
    position: sticky;
    /* Debajo de la barra, con aire: si se pega al borde se siente
       atrapada contra el techo. */
    top: calc(var(--gal-nav-h, 68px) + 2rem);
  }
}

.gal-sobre__retrato { margin: 0; max-width: none; }
.gal-sobre__retrato img {
  width: 100%;
  height: auto;
  display: block;
  box-shadow: 0 18px 44px -26px rgba(0,0,0,0.45);
}

/* El texto ya no va centrado: comparte fila con la foto y arranca
   donde termina la columna de la izquierda. */
.gal-sobre__ensayo .gal-sobre__texto { max-width: 38rem; margin: 0; }
.gal-sobre__ensayo .gal-sobre__cita { margin-left: 0; margin-right: 0; text-align: left; }

/* La franja suelta del retrato ya no existe. */
.gal-sobre__franja-retrato { display: none; }

/* La barra queda sobre la obra y el texto se pierde contra los claros
   de la pintura. Un degradado desde arriba le da piso sin tapar la
   imagen: se oscurece donde hay texto y se disuelve enseguida. */
.gal-sobre__apertura::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: calc(var(--gal-nav-h, 68px) + 5rem);
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(20,18,15,0.78) 0%,
    rgba(20,18,15,0.42) 45%,
    rgba(20,18,15,0) 100%
  );
}
.gal-sobre__intro { z-index: 2; }
/* ============================================================
   CONTACTO
   Mismo lenguaje que "Sobre mí": apertura sobre una obra y después el
   contenido en dos columnas. Antes la pagina usaba el 40% izquierdo y
   dejaba media pantalla vacia.
   ============================================================ */
.gal-contacto { padding: 0; }

/* ---------- apertura ---------- */
.gal-contacto__apertura {
  position: relative;
  min-height: min(52svh, 460px);
  display: flex;
  align-items: flex-end;
  padding: calc(var(--gal-nav-h, 68px) + 3rem) var(--gal-margen) clamp(2.2rem, 5vw, 3.5rem);
  overflow: hidden;
  background: var(--gal-tinta, #14120F);
}
.gal-contacto__apertura::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: calc(var(--gal-nav-h, 68px) + 5rem);
  z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(20,18,15,0.78) 0%, rgba(20,18,15,0.42) 45%, rgba(20,18,15,0) 100%);
}
.gal-contacto__fondo { position: absolute; inset: 0; }
.gal-contacto__fondo img { width: 100%; height: 100%; object-fit: cover; }
.gal-contacto__velo {
  position: absolute; inset: 0;
  background: linear-gradient(100deg,
    rgba(20,18,15,0.93) 0%, rgba(20,18,15,0.8) 45%, rgba(20,18,15,0.45) 100%);
}
.gal-contacto__intro { position: relative; z-index: 2; max-width: 44rem; }
.gal-contacto__eyebrow { margin: 0 0 1rem; color: rgba(244,241,235,0.6); }
.gal-contacto__titulo {
  margin: 0 0 1.2rem;
  font-family: var(--gal-display, 'Archivo', sans-serif);
  font-size: clamp(2.4rem, 7vw, 4.6rem);
  font-weight: 600; line-height: 0.98; letter-spacing: -0.035em;
  color: #F4F1EB;
}
.gal-contacto__bajada {
  margin: 0; max-width: 34rem;
  font-size: clamp(1rem, 1.5vw, 1.15rem); line-height: 1.6;
  color: rgba(244,241,235,0.82);
}

/* ---------- cuerpo ---------- */
.gal-contacto__cuerpo {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  max-width: 74rem;
  margin: 0 auto;
  padding: clamp(3rem, 7vw, 5.5rem) var(--gal-margen);
}
@media (min-width: 900px) {
  .gal-contacto__cuerpo { grid-template-columns: 1fr 1fr; }
}

/* ---------- canales ----------
   Cada uno es un enlace real: antes el email y el Instagram eran texto
   suelto y dependian de que la persona los copiara a mano. */
.gal-contacto__canales { display: flex; flex-direction: column; gap: 1rem; }

.gal-canal {
  display: block;
  padding: 1.3rem 1.4rem;
  border: 1px solid var(--gal-borde, rgba(20,18,15,0.14));
  background: #FFFFFF;
  text-decoration: none;
  color: inherit;
  transition: border-color 180ms ease, transform 180ms ease;
}
.gal-canal:hover { border-color: var(--gal-tinta, #14120F); transform: translateY(-1px); }

.gal-canal__rotulo { display: block; margin-bottom: 0.5rem; color: var(--gal-tinta-suave, #6B655D); }
.gal-canal__valor {
  display: block;
  font-family: var(--gal-texto, 'Spectral', Georgia, serif);
  font-size: 1.18rem;
  color: var(--gal-tinta, #14120F);
}
.gal-canal__nota {
  display: block; margin-top: 0.35rem;
  font-size: 0.85rem; color: var(--gal-tinta-suave, #6B655D);
}

/* El canal principal se distingue: es el que conviene usar. */
.gal-canal--principal { background: var(--gal-tinta, #14120F); border-color: var(--gal-tinta, #14120F); }
.gal-canal--principal:hover { transform: translateY(-2px); }
.gal-canal--principal .gal-canal__rotulo { color: var(--gal-luz, #E8B872); }
.gal-canal--principal .gal-canal__valor { color: #F4F1EB; }
.gal-canal--principal .gal-canal__nota { color: rgba(244,241,235,0.62); }

.gal-contacto__lugar {
  margin: 0.6rem 0 0;
  font-size: 0.92rem; line-height: 1.6;
  color: var(--gal-tinta-suave, #6B655D);
}
.gal-contacto__lugar .gal-label { display: block; margin-bottom: 0.3rem; }

/* ---------- lo que se pregunta antes ---------- */
.gal-contacto__saber-titulo { margin: 0 0 1.6rem; color: var(--gal-tinta-suave, #6B655D); }
.gal-faq { margin: 0; }
.gal-faq__item {
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--gal-borde, rgba(20,18,15,0.14));
}
.gal-faq__item:first-child { padding-top: 0; }
.gal-faq__item:last-child { border-bottom: 0; }
.gal-faq dt {
  font-family: var(--gal-display, 'Archivo', sans-serif);
  font-size: 0.95rem; font-weight: 600;
  color: var(--gal-tinta, #14120F);
  margin-bottom: 0.45rem;
}
.gal-faq dd {
  margin: 0;
  font-size: 0.95rem; line-height: 1.65;
  color: var(--gal-tinta-suave, #6B655D);
}
/* 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;
  /* Estados de obra. Apagados a proposito: conviven con la pintura sin
     competirle, que es lo que pasaria con un verde o un naranja plenos. */
  --gal-verde:        #2F7D4F;
  --gal-ambar:        #9A6A12;

  --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;
}