/* ==========================================================================
   PROYECTOS — índice de la home + página de cada caso (generadas por
   tools/proyectos/build.py). Pedido de Ángel del 8/10: un menú de proyectos
   visual que lleve a una plantilla simple y repetible (ref. estructural:
   nbucle). Lo nuestro: rejilla asimétrica con los pies siempre visibles, y la
   imagen que se abre hasta la portada del caso (View Transitions).
   ========================================================================== */

/* Navegación entre páginas con transición: el tile se convierte en la portada.
   Mejora progresiva — sin soporte, es una navegación normal. */
@view-transition { navigation: auto; }
::view-transition-group(*) { animation-duration: .7s; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*) { animation-duration: .01s; } }

/* ------------------------------------------------------------ índice (home) */
.indice { background: var(--negro); padding: clamp(5rem, 12vh, 10rem) var(--margen) clamp(4rem, 10vh, 8rem); }
.indice__cabeza { display: grid; gap: 1.3rem; max-width: 900px; margin-bottom: clamp(2.6rem, 7vh, 5rem); }

/* Filas de dos que alternan ancha|estrecha y estrecha|ancha. Los pies se
   alinean abajo: la fila se lee como una línea de índice aunque las imágenes
   tengan distinta altura. */
.indice__rejilla {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(1rem, 2.4vw, 2.4rem); row-gap: clamp(3.2rem, 9vh, 7rem);
  align-items: end;
}
.proy--ancha    { grid-column: span 8; }
.proy--estrecha { grid-column: span 4; }
.proy__enlace { display: block; color: inherit; text-decoration: none; }
.proy__marco { position: relative; overflow: hidden; background: #111; }
.proy--ancha .proy__marco    { aspect-ratio: 3 / 2; }
.proy--estrecha .proy__marco { aspect-ratio: 4 / 5; }
.proy__marco img, .proy__video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.4s var(--sale);
}
.proy__video { opacity: 0; transition: opacity .6s ease, transform 1.4s var(--sale); }
.proy__video.sonando { opacity: 1; }

/* Una sola línea de índice: nº · nombre · dato … ver. Con el dato debajo, la
   fila con dato quedaba más alta y los pies dejaban de alinearse. */
.proy__pie {
  display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 1rem; row-gap: .2rem;
  margin: 1rem 0 0; padding-top: .9rem; border-top: 1px solid var(--hairline-alt);
  font-size: var(--t-nota); letter-spacing: .02em;
}
.proy__num { color: var(--greige); font-variant-numeric: tabular-nums; }
.proy__pie b { font-family: var(--serif); font-weight: 400; font-size: var(--t-s); letter-spacing: -.01em; line-height: 1.1; }
.proy__dato { color: var(--tinta-tenue); }
.proy__ir {
  margin-left: auto; color: var(--tinta-tenue); text-transform: uppercase;
  font-size: var(--t-label); letter-spacing: .14em; white-space: nowrap;
  transition: color .4s ease, transform .6s var(--sale);
}
.proy__ir::after { content: " →"; }

@media (hover: hover) {
  .proy__enlace:hover .proy__marco img,
  .proy__enlace:hover .proy__video { transform: scale(1.035); }
  .proy__enlace:hover .proy__ir { color: var(--tinta); transform: translateX(.3rem); }
}
.proy__enlace:focus-visible { outline: 1px solid var(--greige); outline-offset: .6rem; }

@media (max-width: 860px) {
  .proy--ancha, .proy--estrecha { grid-column: 1 / -1; }
  .proy--ancha .proy__marco, .proy--estrecha .proy__marco { aspect-ratio: 4 / 3; }
  .proy__ir { display: none; }
}

/* --------------------------------------------------------- página de caso */
.pagina-caso main { display: block; }

.caso-portada { position: relative; height: 100svh; min-height: 520px; overflow: hidden; background: var(--negro); }
.caso-portada__marco { position: absolute; inset: 0; }
.caso-portada__marco img { width: 100%; height: 100%; object-fit: cover; }
.caso-portada__velo {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(8,8,10,.72) 0%, rgba(8,8,10,.18) 38%, rgba(8,8,10,0) 60%),
              linear-gradient(to bottom, rgba(8,8,10,.45) 0%, rgba(8,8,10,0) 22%);
}
.caso-portada__titulo {
  position: absolute; left: var(--margen); right: var(--margen); bottom: clamp(2.2rem, 8vh, 5rem);
  display: grid; gap: .9rem;
}
.caso-portada__titulo h1 { margin: 0; max-width: 14ch; }
.caso-volver {
  position: absolute; right: var(--margen); bottom: clamp(2.2rem, 8vh, 5rem);
  color: var(--tinta); text-decoration: none; text-transform: uppercase;
  font-size: var(--t-label); letter-spacing: .14em;
}
.caso-volver::before { content: "← "; }
@media (max-width: 860px) { .caso-volver { top: calc(var(--barra-h) + 1rem); bottom: auto; left: var(--margen); right: auto; } }

/* La ficha: datos a la izquierda, titular y entradilla a la derecha. */
.caso-intro {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  column-gap: clamp(2rem, 6vw, 7rem); row-gap: 2.6rem;
  padding: clamp(4rem, 12vh, 9rem) var(--margen);
}
.ficha { margin: 0; align-self: start; border-top: 1px solid var(--crema-hair); }
.ficha div { display: grid; grid-template-columns: 8.5rem 1fr; gap: 1rem; padding: .85rem 0; border-bottom: 1px solid var(--crema-hair); }
.ficha dt { font-size: var(--t-label); letter-spacing: .14em; text-transform: uppercase; color: var(--crema-tenue); padding-top: .2rem; }
.ficha dd { margin: 0; font-size: var(--t-nota); line-height: 1.5; }
.caso-intro__copia { display: grid; gap: 1.6rem; align-content: start; }
.caso-intro__titular { margin: 0; font-family: var(--serif); font-weight: 400; }
.caso-intro__texto { margin: 0; max-width: 60ch; color: var(--crema-tenue); }
@media (max-width: 860px) { .caso-intro { grid-template-columns: 1fr; } .caso-intro__copia { order: -1; } }

/* Capítulos: cabeza + bloques de galería. */
.caso-cap { background: var(--negro); padding: clamp(4rem, 12vh, 9rem) 0 0; }
.caso-cap__cabeza { padding: 0 var(--margen); display: grid; gap: 1.1rem; max-width: 760px; margin-bottom: clamp(2rem, 6vh, 4rem); }
.caso-cap__texto { margin: 0; color: var(--tinta-tenue); max-width: 54ch; }

.caso-pieza { margin: 0 0 clamp(2.4rem, 7vh, 5rem); padding: 0 var(--margen); }
.caso-pieza figcaption, .caso-fase figcaption {
  margin-top: .8rem; font-size: var(--t-nota); color: var(--tinta-tenue); letter-spacing: .02em;
}
.caso-pieza__marco { overflow: hidden; }
.caso-pieza img, .caso-fase img { display: block; width: 100%; height: auto; }
.caso-pieza--ancha { padding: 0; }
.caso-pieza--ancha figcaption { padding: 0 var(--margen); }

.caso-par { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2.4vw, 2.4rem); padding: 0 var(--margen); align-items: start; }
.caso-par .caso-pieza { padding: 0; }
.caso-par .caso-pieza:last-child { margin-top: clamp(3rem, 12vh, 9rem); }

.caso-desfasada { display: grid; grid-template-columns: 7fr 4fr; gap: clamp(1.5rem, 4vw, 5rem); padding: 0 var(--margen); align-items: end; }
.caso-desfasada .caso-pieza { padding: 0; }
.caso-desfasada__texto { margin: 0 0 clamp(2.4rem, 7vh, 5rem); font-family: var(--serif); font-size: var(--t-s); line-height: 1.3; max-width: 26ch; }

/* La obra en fases: tira de la MISMA vista, se lee de izquierda a derecha. */
.caso-fases {
  display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: clamp(.5rem, 1vw, 1rem);
  padding: 0 var(--margen); margin-bottom: clamp(2.4rem, 7vh, 5rem);
}
.caso-fase { margin: 0; }
.caso-fase figcaption span { color: var(--greige); font-variant-numeric: tabular-nums; margin-right: .3rem; }

@media (max-width: 860px) {
  .caso-par, .caso-desfasada { grid-template-columns: 1fr; }
  .caso-par .caso-pieza:last-child { margin-top: 0; }
  .caso-desfasada__texto { margin-top: 0; }
  .caso-fases { grid-template-columns: repeat(var(--n), 72vw); overflow-x: auto; scroll-snap-type: x mandatory; }
  .caso-fase { scroll-snap-align: start; }
}

.caso-video { background: var(--negro); padding: clamp(2rem, 6vh, 4rem) var(--margen) clamp(4rem, 12vh, 9rem); display: grid; gap: 1.4rem; }
.caso-video__player { width: 100%; height: auto; display: block; background: #000; }

/* Siguiente proyecto: una sola salida, grande. Sin carrusel que avance solo. */
.caso-siguiente { background: var(--negro); border-top: 1px solid var(--hairline-alt); }
.caso-siguiente a {
  display: grid; grid-template-columns: 1fr minmax(0, 40%); grid-template-rows: auto 1fr;
  column-gap: clamp(2rem, 5vw, 6rem); row-gap: 1rem; align-items: start;
  padding: clamp(3.5rem, 10vh, 7rem) var(--margen); color: inherit; text-decoration: none;
}
.caso-siguiente b { margin: 0; font-weight: 400; font-family: var(--serif); }
.caso-siguiente__img { grid-column: 2; grid-row: 1 / span 2; overflow: hidden; aspect-ratio: 3 / 2; }
.caso-siguiente__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--sale); }
@media (hover: hover) { .caso-siguiente a:hover img { transform: scale(1.04); } }
@media (max-width: 860px) {
  .caso-siguiente a { grid-template-columns: 1fr; }
  .caso-siguiente__img { grid-column: 1; grid-row: auto; }
}

.caso-contacto { padding: clamp(4rem, 12vh, 9rem) var(--margen); display: grid; gap: 2rem; justify-items: start; }
.caso-contacto .display { margin: 0; font-family: var(--serif); font-weight: 400; max-width: 20ch; }

/* En la home la barra entra tras la intro (opacity 0 de base). Aquí no hay
   intro: visible desde el principio, transparente sobre la portada. */
.pagina-caso .barra { opacity: 1; }