/* ==========================================================================
   Aktual Design — página de Obras
   Se carga después de estilos.css y usa sus colores, letras y texturas.
   ========================================================================== */

.pagina-obras { background: var(--cal); }
html.ficha-abierta { overflow: hidden; }

/* Recuadro donde irá una foto que aún no llega: visible a propósito */
.marcador {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  width: 100%;
  padding: 1rem;
  text-align: center;
  background: var(--travertino);
  outline: 1px dashed rgb(138 90 34 / .5);
  outline-offset: -10px;
}
.marcador code {
  max-width: 100%;
  font-family: var(--f-texto);
  font-size: .72rem;
  line-height: 1.4;
  color: var(--taupe-texto);
  overflow-wrap: anywhere;
}

/* ==========================================================================
   Cabeza y filtros
   ========================================================================== */

.obras { padding: clamp(130px, 22vh, 220px) var(--margen) clamp(100px, 16vh, 180px); }

.obras__cabeza, .filtros, .rejilla, .rejilla__vacia { max-width: 1400px; margin-inline: auto; }

.obras__cabeza h1 {
  font-family: var(--f-titulo);
  font-weight: 400;
  font-size: clamp(2.8rem, 6.4vw, 5.6rem);
  line-height: 1;
  letter-spacing: var(--t-track);
}
.obras__cabeza p { margin-top: 1.4rem; max-width: 44ch; color: var(--taupe-texto); }

.filtros { margin-top: clamp(56px, 9vh, 96px); }

.filtros__espacios {
  display: flex;
  gap: clamp(1.4rem, 3vw, 2.8rem);
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid rgb(107 95 83 / .3);
}
.filtros__espacios::-webkit-scrollbar { display: none; }
/* Cuando no caben todos los espacios, el borde se funde para avisar que la fila sigue */
.filtros__espacios.hay-mas { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 64px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 64px), transparent); }
.filtros__espacios.hay-antes { -webkit-mask-image: linear-gradient(90deg, transparent, #000 64px); mask-image: linear-gradient(90deg, transparent, #000 64px); }
.filtros__espacios.hay-antes.hay-mas { -webkit-mask-image: linear-gradient(90deg, transparent, #000 64px, #000 calc(100% - 64px), transparent); mask-image: linear-gradient(90deg, transparent, #000 64px, #000 calc(100% - 64px), transparent); }

.filtro {
  position: relative;
  flex: none;
  padding: .9rem 0 1rem;
  font-family: var(--f-titulo);
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  letter-spacing: var(--t-track);
  color: var(--taupe-texto);
  white-space: nowrap;
  transition: color .4s var(--facil);
}
/* La categoría activa se marca con una línea de luz, como un perfil LED */
.filtro::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--bronce);
  box-shadow: 0 0 14px 1px rgb(var(--luz-rgb) / .95);
  transform: scaleX(0);
  transition: transform .6s var(--lento);
}
.filtro:hover { color: var(--sombra); }
.filtro[aria-pressed="true"] { color: var(--sombra); }
.filtro[aria-pressed="true"]::after { transform: scaleX(1); }
.filtro:focus-visible { outline-color: var(--bronce); outline-offset: 2px; }

.filtros__tecnicas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .55rem;
  margin-top: 1.5rem;
}
.filtros__rotulo { margin-right: .7rem; font-size: .82rem; letter-spacing: .03em; color: var(--taupe-texto); }

.chip {
  padding: .5rem .95rem;
  border: 1px solid rgb(107 95 83 / .42);
  font-size: .82rem;
  letter-spacing: .02em;
  color: var(--sombra);
  transition: background-color .45s var(--facil), border-color .45s var(--facil), color .45s var(--facil), box-shadow .6s var(--facil);
}
.chip:hover { border-color: var(--sombra); }
.chip[aria-pressed="true"] {
  background: var(--sombra);
  border-color: var(--sombra);
  color: var(--cal);
  box-shadow: 0 12px 30px -14px rgb(var(--luz-rgb) / .95);
}
.chip:focus-visible { outline-color: var(--bronce); }

.filtros__pie {
  display: flex;
  align-items: baseline;
  gap: 1.6rem;
  margin-top: 2.4rem;
  font-size: .82rem;
  letter-spacing: .03em;
  color: var(--taupe-texto);
}
.filtros__limpiar {
  padding-bottom: 2px;
  font-size: .82rem;
  color: var(--sombra);
  background: linear-gradient(var(--bronce), var(--bronce)) 0 100% / 100% 1px no-repeat;
}
.filtros__limpiar[hidden] { display: none; }

/* ==========================================================================
   Galería: cada obra conserva su proporción; las filas se acomodan
   a la misma altura, como cuadros colgados en un muro
   ========================================================================== */

.rejilla {
  --fila: 440px;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(44px, 5vw, 72px) clamp(16px, 2.4vw, 36px);
  margin-top: clamp(40px, 6vh, 64px);
  padding: 0;
  list-style: none;
}
.rejilla::after { content: ''; flex: 999 1 0; }

.tarjeta {
  position: relative;
  flex: var(--r) 1 calc(var(--r) * var(--fila));
  min-width: 0;
}
.tarjeta[hidden] { display: none; }

/* Luminaria sobre cada obra: se enciende al llegar */
.tarjeta::before {
  content: '';
  position: absolute;
  top: -16px;
  left: 28%;
  right: 28%;
  height: 1px;
  background: var(--bronce);
  box-shadow: 0 0 14px 1px rgb(var(--luz-rgb) / .95);
  opacity: 0;
  transition: opacity 1.4s var(--facil) .2s;
}
.tarjeta.encendida::before { opacity: .85; }

.tarjeta__enlace { display: block; color: inherit; text-decoration: none; }
.tarjeta__enlace:focus-visible { outline-color: var(--bronce); outline-offset: 6px; }

.tarjeta__marco {
  position: relative;
  aspect-ratio: var(--r);
  overflow: hidden;
  background: var(--travertino);
}
.tarjeta__lente { width: 100%; height: 100%; transition: transform 1.4s var(--lento); }
.tarjeta__marco img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tarjeta__marco .marcador { height: 100%; }

/* La obra espera en penumbra; al encenderse, la penumbra se retira (solo opacidad) */
.tarjeta__marco::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgb(22 18 15 / .62);
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.8s var(--facil) .25s;
}
html.mov .tarjeta:not(.encendida) .tarjeta__marco::before { opacity: 1; transition: none; }

/* Al pasar el cursor, un baño de luz cálida desde arriba */
.tarjeta__marco::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 90% 55% at 50% 0%, rgb(var(--luz-rgb) / .5), transparent 75%);
  mix-blend-mode: soft-light;
  opacity: 0;
  transition: opacity .9s var(--facil);
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .tarjeta__enlace:hover .tarjeta__marco::after { opacity: 1; }
  .tarjeta__enlace:hover .tarjeta__lente { transform: scale(1.035); }
  .tarjeta__enlace:hover .tarjeta__nombre { background-size: 100% 1px; }
}
.tarjeta__enlace:focus-visible .tarjeta__nombre { background-size: 100% 1px; }

.tarjeta__nombre {
  display: table;
  margin-top: 1.1rem;
  padding-bottom: 2px;
  background: linear-gradient(var(--bronce), var(--bronce)) 0 100% / 0 1px no-repeat;
  transition: background-size .8s var(--lento);
  font-family: var(--f-titulo);
  font-size: 1.25rem;
  line-height: 1.2;
  letter-spacing: var(--t-track);
}
.tarjeta__dato {
  display: block;
  margin-top: .3rem;
  font-size: .82rem;
  letter-spacing: .02em;
  color: var(--taupe-texto);
}

.rejilla__vacia { padding: 10vh 0 4vh; text-align: center; }
.rejilla__vacia[hidden] { display: none; }
.rejilla__vacia p { font-family: var(--f-titulo); font-size: clamp(1.3rem, 2vw, 1.7rem); }
.rejilla__vacia .filtros__limpiar { margin-top: 1.4rem; font-size: .92rem; }
.rejilla__sin-js { margin-top: 3rem; color: var(--taupe-texto); }

/* ==========================================================================
   Bloque destacado: interiorismo integral
   ========================================================================== */

.integral {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 8vw;
  padding: var(--estancia) var(--margen);
  background: var(--noche);
  color: var(--claro-sobre-noche);
}
.integral__texto { position: relative; max-width: 560px; justify-self: end; }

/* Luz rasante: una línea vertical que lava el texto desde la izquierda */
.integral__luz {
  position: absolute;
  top: -8%;
  bottom: -8%;
  left: calc(-1 * clamp(24px, 4vw, 64px));
  width: 1px;
  background: linear-gradient(rgb(var(--luz-rgb) / 0), var(--luz) 20%, var(--luz) 80%, rgb(var(--luz-rgb) / 0));
  box-shadow: 0 0 16px 1px rgb(var(--luz-rgb) / .7);
}
.integral__luz::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 70vw;
  max-width: 640px;
  background: radial-gradient(ellipse 60% 50% at 0 50%, rgb(var(--luz-rgb) / .12), rgb(var(--luz-rgb) / 0) 75%);
  pointer-events: none;
}
html.js .integral__luz { transform: scaleY(0); transition: transform 2.2s var(--lento); }
html.js .integral__luz::after { opacity: 0; transition: opacity 2.4s var(--facil) .6s; }
html.js .integral.encendida .integral__luz { transform: scaleY(1); }
html.js .integral.encendida .integral__luz::after { opacity: 1; }

.integral h2 {
  position: relative;
  font-family: var(--f-titulo);
  font-weight: 400;
  font-size: clamp(2.3rem, 4.4vw, 4.2rem);
  line-height: 1.04;
  letter-spacing: var(--t-track);
}
.integral__intro { position: relative; margin-top: 1.5rem; max-width: 38ch; color: var(--tenue-sobre-noche); }

.integral__incluye { position: relative; margin-top: 2.6rem; padding: 0; list-style: none; }
.integral__incluye li {
  padding: .95rem 0;
  border-top: 1px solid rgb(168 154 137 / .25);
  font-size: .98rem;
}
.integral__incluye li:last-child { border-bottom: 1px solid rgb(168 154 137 / .25); }

.boton--claro { position: relative; background: var(--cal); color: var(--sombra); }
.boton--claro:hover { background: #F2EBE1; }

.integral__imagen { display: grid; gap: 16px; max-width: 560px; }
.integral__foto { overflow: hidden; }
.integral__imagen img { width: 100%; height: auto; }
.integral__imagen figcaption { margin-top: .4rem; font-size: .82rem; letter-spacing: .03em; color: var(--tenue-sobre-noche); }
.integral__imagen .marcador { background: #221C18; outline-color: rgb(217 165 94 / .5); }
.integral__imagen .marcador code { color: var(--tenue-sobre-noche); }

/* ==========================================================================
   Ficha de obra
   ========================================================================== */

.ficha {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--noche);
  color: var(--claro-sobre-noche);
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  transition: opacity .42s var(--facil);
}
.ficha.visible { opacity: 1; }
.ficha::backdrop { background: rgb(22 18 15 / .7); }

/* Transición de obra: mientras la foto vuela, la ficha es transparente y su fondo llega después */
.ficha.en-vuelo { opacity: 1; transition: none; }
.ficha.en-vuelo::backdrop { background: transparent; }
.vuelo {
  position: fixed;
  z-index: 5;
  margin: 0;
  object-fit: cover;
  transform-origin: 0 0;
  pointer-events: none;
}

.ficha { --barra: 64px; }
.ficha__barra {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--barra);
  padding: 0 var(--margen);
  background: rgb(22 18 15 / .9);
}
.ficha__marca { font-family: var(--f-titulo); font-size: 1.1rem; }
.ficha__cerrar {
  position: relative;
  padding: .4rem 0 .4rem 1.8rem;
  font-size: .85rem;
  letter-spacing: .04em;
}
/* Una cruz de dos trazos finos */
.ficha__cerrar::before, .ficha__cerrar::after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 16px;
  height: 1px;
  background: currentColor;
  transition: background-color .3s;
}
.ficha__cerrar::before { transform: rotate(45deg); }
.ficha__cerrar::after { transform: rotate(-45deg); }
.ficha__cerrar:hover { color: var(--luz); }

.ficha__cabeza { max-width: calc(1400px + 2 * var(--margen)); margin: 0 auto; padding: clamp(56px, 12vh, 140px) var(--margen) clamp(48px, 9vh, 100px); }
.ficha__cabeza h2 {
  font-family: var(--f-titulo);
  font-weight: 400;
  font-size: clamp(2.8rem, 7vw, 6rem);
  line-height: 1;
  letter-spacing: var(--t-track);
}
.ficha__cabeza p { margin-top: 1.1rem; font-size: .92rem; letter-spacing: .03em; color: var(--tenue-sobre-noche); }

/* Visor: cada foto a pantalla completa, entera, sin recortar */
.visor {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--barra));
  height: calc(100svh - var(--barra));
}
.visor__escena {
  position: relative;
  flex: 1;
  min-height: 0;
  touch-action: pan-y;
}
.visor__foto {
  position: absolute;
  inset: 0 72px;
  display: none;
  margin: 0;
  opacity: 0;
  transition: opacity .6s var(--facil);
}
.visor__foto.cerca { display: block; }
.visor__foto.actual { display: block; opacity: 1; }
.visor__foto img, .visor__foto video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.visor__foto .marcador { height: 100%; background: #221C18; outline-color: rgb(217 165 94 / .5); }
.visor__foto .marcador code { color: var(--tenue-sobre-noche); }

/* Flechas de trazo fino */
.visor__flecha {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 56px;
  height: 56px;
  transform: translateY(-50%);
  color: var(--claro-sobre-noche);
  transition: color .3s;
}
.visor__flecha::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  border-top: 1px solid currentColor;
  border-left: 1px solid currentColor;
}
.visor__flecha--ant { left: 8px; }
.visor__flecha--ant::before { transform: translate(-30%, -50%) rotate(-45deg); }
.visor__flecha--sig { right: 8px; }
.visor__flecha--sig::before { transform: translate(-70%, -50%) rotate(135deg); }
.visor__flecha:hover { color: var(--luz); }

.visor__pie {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  height: 60px;
  padding: 0 var(--margen);
  font-size: .82rem;
  letter-spacing: .03em;
  color: var(--tenue-sobre-noche);
}
.visor__titulo { font-family: var(--f-titulo); font-size: 1.05rem; letter-spacing: var(--t-track); color: var(--claro-sobre-noche); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.visor__bajar { justify-self: end; padding-bottom: 2px; background: linear-gradient(var(--luz), var(--luz)) 0 100% / 100% 1px no-repeat; color: var(--claro-sobre-noche); }
.visor__bajar:hover { color: var(--luz); }
.visor--una .visor__flecha, .visor--una .visor__cuenta { display: none; }

.ficha__cabeza .ficha__descripcion { max-width: 46ch; margin-top: 2rem; font-size: 1.05rem; letter-spacing: 0; color: var(--claro-sobre-noche); }
.ficha__comparar { padding: 0 var(--margen); }

/* Antes y después con deslizador */
.comparador {
  --pos: 50%;
  position: relative;
  width: min(100%, calc(86vh * var(--r)));
  margin-inline: auto;
  aspect-ratio: var(--r);
  overflow: hidden;
  background: #0E0B09;
}
.comparador img, .comparador__despues { position: absolute; inset: 0; width: 100%; height: 100%; }
.comparador img { object-fit: cover; }
.comparador__despues { clip-path: inset(0 0 0 var(--pos)); }
.comparador input {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
}
.comparador__linea {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  z-index: 1;
  width: 2px;
  margin-left: -1px;
  background: var(--luz);
  box-shadow: 0 0 20px 3px rgb(var(--luz-rgb) / .6);
  pointer-events: none;
}
.comparador__linea::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 42px;
  height: 42px;
  border: 1px solid var(--luz);
  border-radius: 50%;
  background: rgb(22 18 15 / .55);
  transform: translate(-50%, -50%);
}
.comparador input:focus-visible ~ .comparador__linea::after { outline: 2px solid var(--luz); outline-offset: 4px; }
.comparador__rotulo {
  position: absolute;
  bottom: 14px;
  z-index: 1;
  padding: .3rem .65rem;
  font-size: .75rem;
  letter-spacing: .04em;
  background: rgb(22 18 15 / .6);
  pointer-events: none;
}
.comparador__rotulo--antes { left: 14px; }
.comparador__rotulo--despues { right: 14px; }

.ficha__par { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; width: min(100%, 900px); margin-inline: auto; }
.ficha__par figcaption { margin-bottom: .6rem; font-size: .82rem; color: var(--tenue-sobre-noche); }
.ficha__par .marcador { background: #221C18; outline-color: rgb(217 165 94 / .5); }

/* Ficha técnica */
.ficha__datos {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 2.5rem 6vw;
  max-width: calc(1400px + 2 * var(--margen));
  margin: clamp(90px, 16vh, 180px) auto 0;
  padding: 0 var(--margen);
}
.ficha__datos h3 {
  font-family: var(--f-titulo);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  letter-spacing: var(--t-track);
}
.ficha__datos dl { margin: 0; }
.ficha__fila {
  display: grid;
  grid-template-columns: minmax(8.5rem, 1fr) 3fr;
  gap: 1rem 2rem;
  padding: 1.05rem 0;
  border-top: 1px solid rgb(168 154 137 / .22);
}
.ficha__fila:last-child { border-bottom: 1px solid rgb(168 154 137 / .22); }
.ficha__fila dt { font-size: .82rem; letter-spacing: .03em; color: var(--tenue-sobre-noche); }
.ficha__fila dd { margin: 0; font-size: .98rem; }

.ficha__siguiente {
  margin-top: clamp(90px, 16vh, 180px);
  padding: clamp(64px, 12vh, 120px) var(--margen) clamp(80px, 14vh, 140px);
  border-top: 1px solid rgb(168 154 137 / .18);
  text-align: center;
}
.ficha__siguiente a { display: inline-flex; flex-direction: column; gap: .6rem; color: inherit; text-decoration: none; }
.ficha__siguiente span { font-size: .82rem; letter-spacing: .04em; color: var(--tenue-sobre-noche); }
.ficha__siguiente strong {
  font-family: var(--f-titulo);
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1.05;
  transition: color .5s var(--facil), text-shadow .7s var(--facil);
}
.ficha__siguiente a:hover strong, .ficha__siguiente a:focus-visible strong { color: var(--luz); text-shadow: 0 0 28px rgb(var(--luz-rgb) / .45); }

/* ==========================================================================
   Tableta y teléfono
   ========================================================================== */

@media (max-width: 1099px) {
  .rejilla { --fila: 340px; }
}

@media (max-width: 899px) {
  .integral { grid-template-columns: 1fr; gap: 4.5rem; }
  .integral__texto { justify-self: start; padding-left: clamp(20px, 5vw, 40px); }
  .integral__luz { left: 0; }
  .integral__imagen { max-width: none; width: 100%; }

  .ficha__datos { grid-template-columns: 1fr; }
}

@media (max-width: 599px) {
  .rejilla { --fila: 230px; column-gap: 12px; row-gap: 40px; }
  .tarjeta::before { top: -12px; }
  .tarjeta__nombre { margin-top: .8rem; font-size: 1.02rem; }
  .tarjeta__dato { font-size: .74rem; }
  .marcador code { font-size: .64rem; }

  .filtros__pie { margin-top: 1.8rem; }

  .ficha__fila { grid-template-columns: 1fr; gap: .25rem; }
  .comparador { width: 100%; }

  /* En el teléfono la foto usa todo el ancho; las flechas flotan sobre ella */
  .visor__foto { inset: 0; }
  .visor__flecha { width: 44px; height: 44px; border-radius: 50%; background: rgb(22 18 15 / .45); }
  .visor__flecha--ant { left: 8px; }
  .visor__flecha--sig { right: 8px; }
  .visor__pie { grid-template-columns: 1fr auto; }
  .visor__titulo { display: none; }
}

/* Menos movimiento: todo encendido y quieto */
@media (prefers-reduced-motion: reduce) {
  .tarjeta::before, .tarjeta__lente, .tarjeta__marco::before, .tarjeta__marco::after, .tarjeta__nombre, .filtro::after, .chip, .ficha,
  .visor__foto, html.js .integral__luz, html.js .integral__luz::after {
    transition: none;
  }
  .tarjeta::before { opacity: .85; }
  .tarjeta__marco::before { opacity: 0; }
  html.js .integral__luz { transform: none; }
  html.js .integral__luz::after { opacity: 1; }
}

/* ==========================================================================
   Voz tipográfica del sitio (Instrument Sans), aplicada a Obras
   ========================================================================== */

.obras__cabeza h1, .integral h2, .ficha__cabeza h2, .ficha__siguiente strong, .ficha__datos h3 {
  font-family: var(--f-display);
  font-weight: 600;
  font-stretch: 100%;
  letter-spacing: -.025em;
}
.obras__cabeza h1 { font-size: clamp(3rem, 8vw, 8.6rem); line-height: .9; }
.filtro, .tarjeta__nombre, .visor__titulo, .ficha__marca, .rejilla__vacia p { font-weight: 600; letter-spacing: -.015em; }
.tarjeta__nombre { font-size: 1.3rem; }
.ficha__cabeza .etiqueta { display: block; margin-top: 1rem; }
.ficha__consulta { margin-top: 2rem; }
.ficha__marca { font-size: 1.1rem; }
.tarjeta__dato, .filtros__rotulo, .filtros__cuenta, .filtros__limpiar, .ficha__fila dt, .integral__imagen figcaption {
  font-weight: 600;
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.chip { font-weight: 600; font-size: .76rem; letter-spacing: .04em; }
.visor__titulo { font-size: 1.1rem; }

/* ==========================================================================
   Obras en el carbón: el fondo y las fotos se funden
   ========================================================================== */

.pagina-obras { background: var(--carbon); }
.obras {
  color: var(--texto-claro);
  background:
    radial-gradient(ellipse 60% 40% at 80% 0%, rgb(var(--ambar-rgb) / .1), rgb(var(--ambar-rgb) / 0) 70%),
    linear-gradient(180deg, var(--carbon) 0%, var(--carbon-claro) 40%, var(--carbon) 100%);
}
.obras__cabeza p, .filtros__rotulo, .filtros__pie, .tarjeta__dato, .rejilla__sin-js { color: var(--tenue); }
.filtros__espacios { border-bottom-color: var(--linea-oscura); }
.filtro { color: var(--tenue); }
.filtro:hover, .filtro[aria-pressed="true"] { color: var(--texto-claro); }
.filtro::after { background: var(--ambar); }
.filtro:focus-visible, .chip:focus-visible, .tarjeta__enlace:focus-visible { outline-color: var(--ambar); }
.chip { border-color: var(--linea-oscura); color: var(--texto-claro); }
.chip:hover { border-color: var(--ambar); }
.chip[aria-pressed="true"] { background: var(--ambar); border-color: var(--ambar); color: var(--carbon-hondo); }
.filtros__limpiar { color: var(--texto-claro); background-image: linear-gradient(var(--ambar), var(--ambar)); }
.tarjeta::before { background: var(--ambar); }
.tarjeta__marco { background: transparent; -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 86%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 86%, transparent 100%); }
.tarjeta__nombre { background-image: linear-gradient(var(--ambar), var(--ambar)); }
.tarjeta__marco::before { background: rgb(28 23 18 / .7); }
.integral { background: linear-gradient(180deg, var(--carbon) 0%, var(--carbon-hondo) 50%, var(--carbon) 100%); }
.integral__imagen .integral__foto { -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 86%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 86%, transparent 100%); }
.marcador { background: var(--carbon-claro); }

/* ==========================================================================
   Sistema de composición común (estilos.css): mismo ancho, márgenes,
   escala tipográfica, bordes suaves y botones que la página de inicio
   ========================================================================== */

.obras { padding: calc(var(--cabecera-alto) + var(--seccion) * .6) var(--margen) var(--seccion); }
.obras__cabeza, .filtros, .rejilla, .rejilla__vacia { max-width: var(--ancho); }
.obras__cabeza h1 { font-size: clamp(2.375rem, 1.2rem + 4.4vw, 4.5rem); line-height: 1; }
.obras__cabeza p { max-width: 46ch; margin-top: var(--e3); font-size: var(--t-entradilla); }
.filtros { margin-top: var(--e6); }
.filtros__espacios { gap: var(--e4); }
.filtros__tecnicas { gap: 8px; margin-top: var(--e3); }
.filtros__pie { margin-top: var(--e4); }

/* Filtros: el ámbar queda para la acción principal; aquí, definición y brillo */
.chip { min-height: 40px; padding: 8px 16px; border-radius: 12px; background: var(--vidrio-claro); border-color: var(--borde); -webkit-tap-highlight-color: transparent; }
.chip:hover { border-color: var(--borde-fuerte); background: rgb(243 235 223 / .08); }
.chip[aria-pressed="true"] { background: rgb(243 235 223 / .16); border-color: rgb(243 235 223 / .62); color: #FFF6EA; box-shadow: none; }
/* Zona de toque de al menos 44 px sin cambiar el aspecto: «All» crece hacia la derecha (a su izquierda está el borde
   de la fila) y las técnicas 4 px hacia arriba (hacia abajo, el botón no recibe el toque en Edge) */
.filtro::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: max(100%, 44px); }
.chip { position: relative; }
.chip::before { content: ''; position: absolute; inset: -4px 0 0; }

/* Tarjetas: bordes suaves en lugar del fundido */
.tarjeta__marco { border-radius: var(--r-imagen); -webkit-mask-image: none; mask-image: none; background: var(--carbon-claro); }
.tarjeta__nombre { font-family: var(--f-titulo); font-weight: 500; font-size: 1.125rem; letter-spacing: -.01em; margin-top: var(--e2); }

.integral { gap: var(--hueco-comp); padding: var(--seccion) max(var(--margen), calc((100% - var(--ancho)) / 2)); }
.integral h2 { font-size: var(--t-seccion); }
.integral__intro { margin-top: var(--e3); font-size: var(--t-entradilla); }
.integral__incluye { margin-top: var(--e5); }
.integral__incluye li { padding: 12px 0; }
.integral .boton { margin-top: var(--e4); }
.integral__imagen .integral__foto { border-radius: var(--r-imagen); -webkit-mask-image: none; mask-image: none; }

/* Ficha de obra */
.ficha__barra { padding: 0 max(var(--margen), calc((100% - var(--ancho)) / 2)); background: rgb(22 18 15 / .78); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.ficha__cerrar { min-height: 44px; padding: 8px 16px 8px 40px; border: 1px solid var(--borde); border-radius: 12px; }
.ficha__cerrar::before, .ficha__cerrar::after { left: 16px; }
.ficha__cerrar:hover, .ficha__cerrar:focus-visible { border-color: var(--borde-fuerte); color: var(--texto-claro); background: rgb(243 235 223 / .06); }
.ficha__cabeza, .ficha__datos { max-width: calc(var(--ancho) + 2 * var(--margen)); }
.ficha__cabeza h2 { font-size: clamp(2.375rem, 1.2rem + 4.4vw, 4.5rem); }
.ficha__datos h3 { font-size: var(--t-sub); }
.ficha__siguiente strong { font-size: var(--t-seccion); }
.visor__flecha { border-radius: 50%; }
.visor__flecha:hover, .visor__flecha:focus-visible { background: rgb(243 235 223 / .08); }
.comparador { border-radius: var(--r-imagen); }
.comparador__rotulo { border-radius: 8px; }

@media (max-width: 899px) {
  .integral { padding-inline: var(--margen); }
}

/* Mientras el JavaScript arma la galería: la rejilla ya ocupa su lugar y los filtros esperan invisibles,
   así nada aparece y luego salta (CLS). Aparecen en el mismo instante en que llegan las obras. */
.js .rejilla:empty { min-height: 200svh; visibility: hidden; }
.js .obras:not(:has(.rejilla > li)) .filtros { visibility: hidden; }

/* ==========================================================================
   Propuestas de diseño: renders 3D, aparte de las obras construidas (Adrian, 2026-10-17).
   Mismo lenguaje que la galería: cada imagen conserva su proporción y js/obras.js
   reparte las filas para que llenen el ancho (filas parejas).
   ========================================================================== */
.propuestas {
  padding: 0 max(var(--margen), calc((100% - var(--ancho)) / 2)) var(--seccion);
  background: var(--carbon);
  color: var(--texto-claro);
}
.propuestas__cabeza { padding-top: var(--e6); border-top: 1px solid var(--linea-oscura); }
.propuestas__rotulo { font-weight: 600; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ambar); }
.propuestas h2 {
  margin-top: var(--e2);
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--t-seccion);
  line-height: 1.05;
  letter-spacing: -.025em;
}
.propuestas__intro { max-width: 46ch; margin-top: var(--e3); font-size: var(--t-entradilla); color: var(--tenue); }
.propuestas__grupo { margin-top: var(--e7); }
.propuestas__grupo h3 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e3);
  padding-top: var(--e2);
  border-top: 1px solid var(--linea-oscura);
  font-family: var(--f-titulo);
  font-weight: 500;
  font-size: var(--t-sub);
  letter-spacing: -.01em;
}
.propuestas__cuantas { font-size: var(--t-meta); color: var(--tenue); font-variant-numeric: tabular-nums; }
.propuestas__rejilla {
  --fila: 330px;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(32px, 4vw, 56px) clamp(16px, 2.4vw, 36px);
  margin: var(--e5) 0 0;
  padding: 0;
  list-style: none;
}
.propuestas__rejilla::after { content: ''; flex: 999 1 0; }
.propuestas__rejilla.acomodada::after { display: none; }   /* con las filas ya calculadas (obras.js) */
.propuesta { flex: var(--r) 1 calc(var(--r) * var(--fila)); min-width: 0; }
.propuesta__abrir {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: zoom-in;
}
.propuesta__marco { display: block; aspect-ratio: var(--r); overflow: hidden; border-radius: var(--r-imagen); background: var(--carbon-claro); }
.propuesta__marco img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--lento); }
.propuesta__nombre {
  display: table;
  margin-top: var(--e2);
  padding-bottom: 2px;
  background: linear-gradient(var(--ambar), var(--ambar)) 0 100% / 0 1px no-repeat;
  transition: background-size .8s var(--lento);
  font-family: var(--f-titulo);
  font-weight: 500;
  font-size: 1.05rem;
  line-height: 1.3;
  letter-spacing: -.01em;
}
.propuesta__dato { display: block; margin-top: .3rem; font-weight: 600; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tenue); }
@media (hover: hover) and (pointer: fine) {
  .propuesta__abrir:hover img { transform: scale(1.03); }
  .propuesta__abrir:hover .propuesta__nombre { background-size: 100% 1px; }
}
.propuesta__abrir:focus-visible { outline: 2px solid var(--ambar); outline-offset: 6px; border-radius: var(--r-imagen); }
.propuesta__abrir:focus-visible .propuesta__nombre { background-size: 100% 1px; }
@media (max-width: 899px) {
  .propuestas { padding-inline: var(--margen); }
  .propuestas__rejilla { --fila: 250px; }
}
@media (max-width: 599px) {
  .propuestas__grupo { margin-top: var(--e6); }
  .propuestas__rejilla { --fila: 150px; column-gap: 12px; row-gap: 32px; }
  .propuesta__nombre { font-size: .95rem; }
}
@media (prefers-reduced-motion: reduce) {
  .propuesta__marco img, .propuesta__nombre { transition: none; }
}