/* =================================================================
   OBRAS — trayectoria, ficha de obra y avance de obra
   -----------------------------------------------------------------
   El componente más importante del sitio: es donde el inversor
   verifica los 12 años. Todo sale de data/obras.json.
   ================================================================= */

.obras {
  padding: var(--space-xl) 0;
  background-color: var(--color-bg-alt);
  background-image: var(--pattern-diagonal);
}

/* =================================================================
   1. GRILLA DE OBRAS
   -----------------------------------------------------------------
   El boceto tenía repeat(6,1fr) porque había exactamente 6 obras
   inventadas. Son 16 reales y van a seguir apareciendo. auto-fill
   con un mínimo: la grilla se acomoda sola y no hay que tocar CSS
   cuando el cliente sume la obra 17.
   ================================================================= */

.obra-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.obra-card {
  position: relative;  /* el año va absoluto sobre la tarjeta: sin esto se
                          ancla al viewport y se va al borde de la página */
  /* Columna y no bloque: la misma tarjeta se monta sobre un <div>, un <a>
     o un <button> (el selector del home), y el <button> mete una caja
     anónima propia que empujaba la foto 32px hacia abajo — el año
     quedaba flotando sobre una franja vacía. En columna las tres piezas
     se apilan igual en los tres elementos. */
  display: flex;
  flex-direction: column;
  width: 100%;
  text-align: left;
  background: var(--color-surface);
  border: var(--border-hair) solid var(--color-line-soft);
  border-bottom: var(--border-mark) solid transparent;
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.obra-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.obra-card:hover .figure img { transform: scale(1.06); filter: none; }

.obra-card .figure { --ratio: var(--ratio-obra); }

.obra-card-body { display: block; padding: 0.85rem 0.9rem 1rem; }
.obra-card-name {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-nombre);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  letter-spacing: var(--track-snug);
  color: var(--color-primary);
}
.obra-card-loc {
  display: block;
  margin: 0.2rem 0 0.55rem;
  font-size: var(--label-md);
  color: var(--color-text-muted);
}

/* ---------- La grilla como selector (home) ----------
   En la trayectoria del home las tarjetas SÍ son controles: cada una
   abre el panel de su obra (role="tablist" / role="tab", ver script.js
   §5). Por eso acá el hover que levanta la tarjeta no promete de más, y
   por eso la cantidad de columnas se fija en vez de dejarla en auto-fill:
   son seis obras elegidas, no una lista que crece, y la fila de seis en
   desktop es la que hace legible el recorrido 2014 → 2026 de un vistazo.

   La grilla de /desarrollos/ NO lleva role="tablist": ahí las tarjetas
   son fichas o links, la lista crece con el JSON y manda el auto-fill de
   más arriba. */
.obra-grid[role="tablist"] { grid-template-columns: repeat(2, 1fr); }

/* Estado activo: la tarjeta cuyo panel está abierto. */
.obra-card.is-active {
  border-bottom-color: var(--color-accent);
  box-shadow: var(--shadow-md);
}
.obra-card.is-active .tag { background: var(--color-accent); color: var(--color-white); }

/* Obra destacada: Funky, Mixto, Novo 3, Gran Martina */
.obra-card.destacada { border-left: var(--border-mark) solid var(--color-accent); }

/* ---------- Eje de años ----------
   La línea histórica 2014 → 2026 es el argumento de venta, así que
   el año tiene peso propio y no es un dato más de la tarjeta. */
.obra-anio {
  position: absolute;
  top: var(--space-sm); left: var(--space-sm);
  z-index: var(--z-base);
  padding: 0.45rem 0.8rem;
  background: var(--color-primary);
  color: var(--color-text-inverse);
  font-size: var(--label-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
}
.obra-card .figure { position: relative; }

/* =================================================================
   1b. FILTROS DE TRAYECTORIA (/desarrollos/)
   -----------------------------------------------------------------
   Todos / desarrollos residenciales / viviendas / obras comerciales.
   "Obras comerciales" agrupa dos valores de tipo (comercial y mixto):
   es una etiqueta de interfaz, igual que TIPO_OBRA en script.js, no
   un valor nuevo del JSON.
   ================================================================= */

.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
}
.filtro-btn {
  min-height: var(--tap-sm);
  padding: 0.55rem 1rem;
  font-family: var(--font-body);
  font-size: var(--label-md);
  font-weight: var(--weight-bold);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--color-primary);
  background: var(--color-surface);
  border: var(--border-hair) solid var(--color-line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.filtro-btn:hover { border-color: var(--color-accent); color: var(--color-accent-ink); }
.filtro-btn.is-active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-white);
}
.filtro-status {
  margin-bottom: var(--space-md);
  font-size: var(--label-sm);
  font-weight: var(--weight-semi);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* =================================================================
   1c. LÍNEA HISTÓRICA (/desarrollos/)
   -----------------------------------------------------------------
   El año como estructura, no como dato suelto: cada grupo de obras
   del mismo año abre con esta franja antes de su .obra-grid, para que
   el recorrido 2014 → 2025 se perciba al scrollear, no sólo al leer
   el badge de cada tarjeta.

   Las tarjetas de esta grilla no son un selector (no hay panel que
   abrir): sólo las que tengan "ruta" en el JSON son un link real a su
   ficha (hoy, ninguna en esta página — ver obraCard en script.js), así
   que el resto no debe insinuar con un hover que hay algo para tocar.
   ================================================================= */

.timeline-year {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  margin: var(--space-lg) 0 var(--space-sm);
}
.timeline-year:first-child { margin-top: 0; }
.timeline-year-num {
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-black);
  line-height: 1;
  letter-spacing: var(--track-tight);
  color: var(--color-primary);
}
.timeline-year-rule {
  flex: 1 1 auto;
  height: var(--border-hair);
  background: var(--color-line);
}
.timeline-year-count {
  flex: 0 0 auto;
  font-size: var(--label-sm);
  font-weight: var(--weight-semi);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.timeline .obra-card:not(.is-link) { cursor: default; }
.timeline .obra-card:not(.is-link):hover {
  transform: none;
  box-shadow: none;
}
.timeline .obra-card:not(.is-link):hover .figure img {
  transform: none;
  filter: var(--img-grade);
}

/* =================================================================
   2. FICHA DE OBRA
   -----------------------------------------------------------------
   Sirve como cuerpo de la ficha de una obra o como panel de un
   selector. Hoy está en uso el primer caso; el segundo queda
   disponible y no cuesta nada.
   ================================================================= */

.obra-panel {
  display: grid;
  background: var(--color-surface);
  border: var(--border-hair) solid var(--color-line-soft);
  overflow: hidden;
  animation: panelIn var(--dur-slow) var(--ease-out) both;
}
.obra-panel[hidden] { display: none; }
@keyframes panelIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

.obra-media { position: relative; }
.obra-media .figure { --ratio: var(--ratio-panel); height: 100%; }
/* Mientras no llegue el render, el hueco lo ocupa el placeholder con la
   misma proporción; en dos columnas se estira a la altura del texto. */
.obra-media .ph { height: 100%; }

/* ---------- Ficha sobre banda oscura ----------
   El mismo panel de la ficha de obra, cuando cae dentro de una franja
   oscura (el destacado de Gran Martina, en el home y en /desarrollos/). No es
   otro componente: es la misma pieza sin su fondo claro, para que la
   franja se lea entera y el panel no aparezca como un recorte de papel
   pegado encima. */
.obra-panel.on-dark {
  background: var(--wash-inv);
  border-color: var(--line-inv-1);
  color: var(--color-text-inverse);
}
.obra-panel.on-dark .obra-info h3 { color: var(--color-text-inverse); }
.obra-panel.on-dark .obra-info > p { color: var(--ink-inv-2); }
/* El ladrillo de .obra-loc está calibrado para fondo claro
   (--color-accent-ink); sobre el panel oscuro pierde contraste, igual
   que .page-head .eyebrow. */
.obra-panel.on-dark .obra-loc { color: var(--color-accent-light); }

.obra-info { padding: 1.6rem 1.4rem 2rem; }
.obra-info h3 {
  margin-bottom: 0.35rem;
  font-size: var(--text-2xl);
  font-weight: var(--weight-black);
  text-transform: uppercase;
}
.obra-loc {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: var(--space-sm);
  font-size: var(--label-lg);
  font-weight: var(--weight-semi);
  color: var(--color-accent-ink);
}
.obra-info > p { margin-bottom: 1.4rem; font-size: var(--text-sm); }
.obra-info .ficha { margin-bottom: var(--space-md); }
/* El hueco del texto de obra: hoy las 16 tienen "descripcion" vacío, así
   que en su lugar va el placeholder con la misma separación que tendría
   el párrafo. */
.obra-info .ph { margin-bottom: 1.4rem; }

.obra-detalle { margin-bottom: var(--space-lg); }

/* ---------- Pie de la sección ----------
   Caja de borde punteado: la misma del boceto. El punteado la separa de
   las tarjetas —que son piezas cerradas, de borde lleno— y la marca como
   lo que es: una salida, no una obra más de la grilla. */
.obras-cta {
  display: grid;
  gap: var(--space-sm);
  align-items: center;
  padding: 1.6rem;
  background: rgb(var(--rgb-surface) / .55);
  border: var(--border-medium) dashed var(--color-line);
}
.obras-cta p { font-size: var(--text-base); color: var(--color-primary-light); }

/* =================================================================
   3. MAPA DE OBRA — OPCIONAL
   -----------------------------------------------------------------
   No tenemos coordenadas por obra: guidelines.md da zona de barrio
   (Zona IUPA, Barrio La Martina, 25 de Mayo y las vías), no
   direcciones. El componente tiene que poder NO renderizarse sin
   dejar un hueco. Vuelve si el cliente pasa ubicaciones.
   ================================================================= */

.obra-map { margin-bottom: var(--space-lg); }
.obra-map-head {
  padding: var(--space-sm) 1.4rem;
  background: var(--color-primary);
  color: var(--color-text-inverse);
}
.obra-map-head .eyebrow { margin-bottom: 0.3rem; }
.obra-map-head p {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  letter-spacing: var(--track-snug);
  color: var(--color-text-inverse);
  max-width: none;
}
.obra-map-frame { background: var(--color-bg-alt); }
.obra-map-frame iframe {
  width: 100%;
  aspect-ratio: var(--ratio-panel);
  border: 0;
  filter: var(--map-filter);
}

/* =================================================================
   4. AVANCE DE OBRA (Gran Martina)
   -----------------------------------------------------------------
   El slideshow de etapas del boceto, ahora alimentado por datos.
   El porcentaje sale del JSON como --avance, no de un style inline.
   ================================================================= */

.en-obra {
  position: relative;
  padding: var(--space-xl) 0;
  background: var(--color-primary);
  color: var(--color-text-inverse);
  overflow: hidden;
}
.en-obra .wrap { position: relative; z-index: var(--z-base); }

/* Un escalón más de carbón. En el home el destacado de Gran Martina cae
   justo encima de la franja de números, que también es oscura: con el
   mismo fondo las dos se leerían como un solo bloque largo. Con el paso
   a --color-primary-dark quedan como dos plantas del mismo edificio, que
   es exactamente el gesto del sistema. */
.en-obra.deep { background: var(--color-primary-dark); }

.slider { position: relative; }
.slider-viewport {
  overflow: hidden;
  background: var(--wash-inv);
  border: var(--border-hair) solid var(--line-inv-1);
}
.slider-track {
  display: flex;
  transition: transform var(--slide-speed) var(--ease-out);
  will-change: transform;
}
.slide { flex: 0 0 100%; display: grid; }
.slide .figure { --ratio: var(--ratio-etapa); }

.slide-info { padding: var(--space-md) 1.4rem 1.9rem; }
.slide-stage {
  display: inline-block;
  margin-bottom: 0.85rem;
  padding: 0.3rem 0.7rem;
  background: var(--color-accent);
  color: var(--color-white);
  font-size: var(--label-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
}
.slide-info h3 {
  margin-bottom: 0.35rem;
  font-weight: var(--weight-black);
  text-transform: uppercase;
  color: var(--color-text-inverse);
}
.slide-obra {
  margin-bottom: 0.9rem;
  font-size: var(--label-md);
  font-weight: var(--weight-bold);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink-inv-3);
}
.slide-desc {
  margin-bottom: 1.3rem;
  font-size: var(--text-sm);
  color: var(--ink-inv-2);
}

.slide-progress {
  height: 5px;
  margin-bottom: 0.55rem;
  background: var(--line-inv-1);
  overflow: hidden;
}
/* El ancho sale del dato: style="--avance: 72%" */
.slide-progress span {
  display: block;
  height: 100%;
  width: var(--avance, 0%);
  background: linear-gradient(90deg, var(--color-accent), var(--color-accent-light));
  transition: width var(--dur-slower) var(--ease-out);
}
.slide-meta {
  font-size: var(--label-md);
  font-weight: var(--weight-semi);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink-inv-3);
}

/* ---------- Controles ----------
   CAMBIO: en el boceto las flechas iban en position:absolute con
   top:125px, que era la mitad de la altura fija de 250px de la
   imagen. Al pasar a aspect-ratio esa altura ya no existe y las
   flechas quedaban flotando en cualquier lado.
   En mobile van en una barra debajo, junto a los puntos: además de
   no romperse, no tapan una foto que puede ser oscura.
   Desde 768px vuelven a los costados, como en el boceto. */

.slider-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  margin-top: 1.4rem;
}

.slider-btn {
  display: grid;
  place-items: center;
  width: var(--tap-sm);
  height: var(--tap-sm);
  background: rgb(var(--rgb-carbon-dark) / .75);
  color: var(--color-text-inverse);
  border: var(--border-hair) solid var(--line-inv-1);
  transition: background var(--transition), border-color var(--transition);
}
.slider-btn:hover { background: var(--color-accent); border-color: var(--color-accent); }

.slider-dots { display: flex; justify-content: center; gap: var(--space-xs); }
.slider-dots .dot {
  width: 32px; height: 4px;
  background: var(--line-inv-1);
  transition: background var(--transition), width var(--transition);
}
.slider-dots .dot.is-active { background: var(--color-accent); width: 52px; }

/* =================================================================
   5. GALERÍA DE OBRA (/desarrollos/[slug]/)
   -----------------------------------------------------------------
   El cliente no manda "las fotos de la obra": manda exteriores,
   interiores, detalles de terminaciones, renders, planos y proceso
   constructivo (guidelines.md, "Material fotográfico"). Son grupos
   distintos y el visitante los mira buscando cosas distintas —el
   inversor quiere ver la fachada y la terminación, no un carrusel
   indistinto—, así que la galería se separa por grupo y cada grupo
   abre con su etiqueta.

   La ficha es sobria a propósito: la foto manda y el texto acompaña.
   Por eso el título de grupo es una etiqueta chica y tracked (la
   firma del sistema) y no un h2 más: no compite con la imagen.

   Un grupo sin fotos NO se renderiza vacío: se renderiza con
   placeholders de la proporción final, así cargar el material real no
   mueve nada del layout. Ver renderGaleria() en script.js.
   ================================================================= */

.galeria { display: grid; gap: var(--space-lg); }

.galeria-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}
.galeria-head h3 {
  flex: 0 0 auto;
  font-family: var(--font-body);
  font-size: var(--label-sm);
  font-weight: var(--weight-bold);
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
  color: var(--color-accent-ink);
}
.galeria-rule {
  flex: 1 1 auto;
  height: var(--border-hair);
  background: var(--color-line);
}
.galeria-count {
  flex: 0 0 auto;
  font-size: var(--label-xs);
  font-weight: var(--weight-semi);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.galeria-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--col-galeria), 1fr));
  gap: var(--space-xs);
}
/* La foto y el hueco reservado tienen que ocupar EXACTAMENTE lo mismo,
   o cargar el material real correría el resto de la página. Por eso la
   proporción se declara para los dos, no sólo para la imagen. */
.galeria-grid .figure,
.galeria-grid .ph { aspect-ratio: var(--ratio-obra); }

/* Grupo de piezas apaisadas (renders, planos): misma grilla, otra
   proporción y columnas más anchas. Un render es una pieza para mirar,
   no una miniatura de índice: con el mínimo de la galería entrarían
   seis por fila en desktop y no se vería ninguno. */
.galeria-grid.r-panel {
  grid-template-columns: repeat(auto-fill, minmax(var(--col-render), 1fr));
}
.galeria-grid.r-panel .figure,
.galeria-grid.r-panel .ph { aspect-ratio: var(--ratio-panel); }

/* =================================================================
   6. NAVEGACIÓN ENTRE FICHAS
   -----------------------------------------------------------------
   Obra anterior y siguiente, en orden de año. Es el recorrido de la
   trayectoria: el que llega a una ficha desde la línea histórica
   sigue caminando 2014 → 2026 sin volver al índice.

   Cuando una de las dos puntas no existe (la primera y la última de
   la serie), el hueco NO se rellena con un link muerto: se renderiza
   sólo la punta que hay. Ver renderFichaNav() en script.js.
   ================================================================= */

.ficha-nav {
  display: grid;
  gap: var(--border-hair);
  margin-top: var(--space-xl);
  background: var(--color-line-soft);
  border-top: var(--border-mark) solid var(--color-accent);
}
.ficha-nav a {
  display: grid;
  gap: var(--space-2xs);
  align-content: center;
  min-height: var(--tap);
  padding: var(--space-md) var(--space-sm);
  background: var(--color-surface);
  transition: background var(--transition);
}
.ficha-nav a:hover { background: var(--color-bg); }
.ficha-nav .dir {
  font-size: var(--label-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.ficha-nav .nombre {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  letter-spacing: var(--track-snug);
  color: var(--color-primary);
}
.ficha-nav a:hover .nombre { color: var(--color-accent-ink); }
/* La salida hacia adelante se alinea a la derecha sólo cuando hay dos:
   sola en la fila, alineada a la derecha, se leería como un error. */
.ficha-nav .siguiente:not(:only-child) { text-align: right; }

/* =================================================================
   BREAKPOINTS
   ================================================================= */

@media (min-width: 768px) {
  .obra-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
  .obra-grid[role="tablist"] { grid-template-columns: repeat(3, 1fr); }

  .obra-panel { grid-template-columns: 1fr 1fr; }
  .obra-info { padding: 2rem 2rem 2.2rem; }
  .obras-cta { grid-template-columns: 1fr auto; padding: 1.9rem 2rem; }

  .slide { grid-template-columns: 1.15fr 0.85fr; }
  .slide .figure { --ratio: auto; height: 100%; }
  .slide-info { padding: 2.2rem 2rem; align-self: center; }

  /* La navegación entre fichas sólo se parte en dos columnas cuando hay
     lugar de verdad: con una sola punta cargada, auto-fit la deja
     ocupando el ancho entero en vez de dejar media fila muerta. */
  .ficha-nav { grid-template-columns: repeat(auto-fit, minmax(var(--col-ficha-nav), 1fr)); }
  .ficha-nav a { padding: var(--space-lg) var(--space-md); }

  /* Flechas de vuelta a los costados */
  .slider-controls { position: static; }
  .slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: var(--z-raised);
    backdrop-filter: blur(6px);
  }
  .slider-btn.prev { left: -1rem; }
  .slider-btn.next { right: -1rem; }
}

@media (min-width: 1100px) {
  .obras, .en-obra { padding: var(--space-2xl) 0; }
  .obra-grid[role="tablist"] { grid-template-columns: repeat(6, 1fr); }
}