/* ═══════════════════════════════════════════════════════════════
   SUN ARQUITECTOS — proyecto.css
   Plantilla compartida por las fichas de proyecto (proyectos/*.html).
   Reproduce la maqueta del PSD: cabecera (volver + título + metadatos),
   cuerpo de texto a dos columnas, imagen destacada, galería, planos y
   vista aérea. Depende de styles.css (variables, fuentes, nav, footer).
   ═══════════════════════════════════════════════════════════════ */

.proyecto {
  /* Todo el cuerpo bajo el hero comparte el gris del hero (--c-surface). */
  background: var(--c-surface);
  /* Ancho de contenido apenas menor que el global (1440): achica muy
     levemente TODAS las piezas de la ficha (hero, galería, planos, imagen
     destacada) manteniéndolas centradas → sin cambiar simetría ni posición. */
  --max-w: 1280px;
}

/* ─── Hero / cabecera a pantalla completa ────────────────────── */
.proyecto__head {
  /* Techo: en tablets altas (iPad Pro vertical, etc.) 100svh es excesivo
     y el space-between de más abajo estira demasiado el aire entre
     título/metadatos/texto. Nunca crece más de 950px por esta razón
     (si el contenido necesita más espacio, igual crece: es un mínimo). */
  min-height: min(100svh, 950px);
  position: relative;
  display: flex;
  flex-direction: column;
  order: 2;
  /* Sin var(--nav-h): el hero (order:1) ya despeja el nav fijo arriba de
     todo; sumarlo acá de nuevo empujaba el título fuera del primer
     pantallazo. Sin gutter horizontal: volver/título/metadatos/texto ya
     traen su propio padding-inline:var(--gutter) cada uno (para quedar
     alineados con la galería, que solo tiene una capa de gutter) —
     ponerlo también acá los angostaba el doble. */
  padding: clamp(0.75rem, 2vh, 1.25rem) 0 clamp(2.5rem, 7vh, 5rem);
  background-color: var(--c-surface);
}

.proyecto__head-inner {
  /* Sin max-width/margin-inline acá: cada hijo (volver, título,
     metadatos, texto) ya trae su propio padding-inline:var(--gutter)
     desde las reglas de orden más abajo — ese es el que lo alinea con
     la galería. Ponerle además un max-width acá los angostaba doble,
     dejando el párrafo más angosto que la galería. */
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  /* Sin space-between: "volver" + título quedan pegados al hero, con
     aire fijo y chico, así siempre están en el primer pantallazo sin
     importar cuánto contenido tenga la ficha. El aire sobrante para
     llegar a la pantalla completa (min-height del head) queda como
     espacio en blanco al final, antes de la galería. */
}

/* ─── Cuerpo de la ficha (bajo el hero) ──────────────────────── */
.proyecto__content {
  padding-inline: var(--gutter);
  padding-bottom: clamp(3rem, 8vh, 6rem);
}

.proyecto__inner {
  max-width: var(--max-w);
  margin-inline: auto;
}

/* ─── Volver ─────────────────────────────────────────────────── */
.proyecto__back {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--f-body);
  font-weight: var(--fw-thin);
  font-size: clamp(0.72rem, 0.9vw, 0.8125rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-muted);
  text-decoration: none;
  transition: color 0.2s ease;
}

.proyecto__back:hover { color: var(--c-text); }
.proyecto__back::before { content: "‹"; font-size: 1.1em; line-height: 1; }

/* ─── Título ─────────────────────────────────────────────────── */
.proyecto__title {
  /* Antes vh-grandes (pensados para cuando el space-between de abajo
     estaba inerte); ahora ese space-between ya reparte el aire sobrante,
     así que acá alcanza con un margen chico — si no, el título quedaba
     empujado fuera del primer pantallazo, tapando el "volver". Un poco
     más que el mínimo para separarlo del "volver", sin salir del
     primer pantallazo. */
  margin: clamp(1.5rem, 3vh, 2.25rem) 0 clamp(1.5rem, 3vh, 2rem);
  font-family: var(--f-title);
  font-weight: var(--fw-semi);
  font-size: clamp(1.35rem, 2.3vw, 2.1rem);
  line-height: 1.05;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-text);
  text-shadow:
    0.35px 0.0px 0 currentColor, 0.3px 0.17px 0 currentColor, 0.18px 0.3px 0 currentColor,
    0.0px 0.35px 0 currentColor, -0.17px 0.3px 0 currentColor, -0.3px 0.17px 0 currentColor,
    -0.35px 0.0px 0 currentColor, -0.3px -0.18px 0 currentColor, -0.18px -0.3px 0 currentColor,
    0.0px -0.35px 0 currentColor, 0.18px -0.3px 0 currentColor, 0.3px -0.18px 0 currentColor;
  overflow-wrap: break-word;
}

/* ─── Metadatos (3 columnas × 2 filas) ───────────────────────── */
.proyecto__meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(3.5rem, 14vh, 11rem) clamp(1.5rem, 3vw, 2.5rem);
}

/* Todos los metadatos alineados a la izquierda dentro de su celda; el título
   también queda a la izquierda. La grilla de 3 columnas no cambia de posición. */
.proyecto__meta-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 0.55rem;
  min-width: 0;
}

.proyecto__meta-label {
  font-family: var(--f-body);
  font-weight: var(--fw-thin);
  font-size: clamp(0.8125rem, 0.95vw, 0.9375rem); /* algo mayor, pero < 18px de los datos */
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-muted);
  overflow-wrap: break-word;
}

.proyecto__meta-value {
  font-family: var(--f-body);
  font-weight: var(--fw-thin);
  font-size: 1.125rem; /* Inter Thin 18px */
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--c-text);
  overflow-wrap: break-word;
}

/* Nota discreta para vincular fichas de un mismo conjunto (p. ej. Hotel
   Vallenar Habitaciones/Recepción): va después de la ficha técnica, chica
   y en itálica, sin competir con el resto de los metadatos. */
.proyecto__conjunto-note {
  font-family: var(--f-body);
  font-weight: var(--fw-thin);
  font-size: clamp(0.8125rem, 0.95vw, 0.9375rem);
  font-style: italic;
  color: var(--c-muted);
  margin-top: clamp(1.5rem, 3vh, 2rem);
}

/* ─── Cuerpo de texto (2 columnas) ───────────────────────────── */
.proyecto__body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 4.5rem);
  padding-top: clamp(3rem, 8vh, 6rem);
  padding-bottom: clamp(2.5rem, 6vh, 4.5rem);
}

/* Un solo bloque de texto a todo el ancho (mismo ancho que hero/galería),
   en vez de dividirlo en 2 columnas. */
.proyecto__body--single {
  grid-template-columns: 1fr;
}

.proyecto__col {
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 3vh, 2.25rem);
}

/* 3er párrafo (cuando hay 3): en vez de que una de las 2 columnas quede
   más corta que la otra dejando aire debajo, ocupa todo el ancho en una
   fila propia debajo de las 2 columnas. */
.proyecto__col--full {
  grid-column: 1 / -1;
}

.proyecto__lead {
  font-family: var(--f-body);
  font-weight: var(--fw-reg);
  font-size: clamp(0.875rem, 1.08vw, 1rem);
  line-height: 1.85;
  color: var(--c-text);
}

.proyecto__section-title {
  font-family: var(--f-body);
  font-weight: var(--fw-semi);
  font-size: clamp(0.8rem, 1vw, 0.9375rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-text);
  margin-bottom: clamp(1.35rem, 3vh, 2rem);
}

.proyecto__text {
  font-family: var(--f-body);
  font-weight: var(--fw-thin);
  font-size: clamp(0.85rem, 1.03vw, 1rem);
  line-height: 1.85;
  color: var(--c-text);
}

/* Línea de reconocimiento (ArchDaily Top 100) */
.proyecto__award {
  /* Gap simétrico respecto del texto: arriba = margen + padding (línea),
     abajo = margen equivalente antes de la imagen destacada. */
  margin: clamp(3rem, 6vh, 4.5rem) 0 clamp(4.25rem, 8.5vh, 6.5rem);
  padding-top: clamp(1.25rem, 2.5vh, 2rem);
  border-top: 1px solid rgba(245, 245, 245, 0.16);
  font-family: var(--f-body);
  font-weight: var(--fw-thin);
  font-size: clamp(0.75rem, 0.85vw, 0.8125rem);
  letter-spacing: 0.02em;
  color: var(--c-text);
}

.proyecto__award span {
  display: inline-block;
  margin-right: 0.7em;
  font-weight: var(--fw-reg);
  font-size: 0.8em;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-salmon);
}

/* ─── Imagen destacada (full-width del contenedor, 2:1) ──────── */
.proyecto__hero {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 2 / 1;
  background: var(--c-bg);
}

.proyecto__hero img,
.proyecto__aerial img,
.proyecto__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.proyecto__hero-badge {
  position: absolute;
  left: clamp(1rem, 2.5vw, 2rem);
  bottom: clamp(1rem, 2.5vw, 2rem);
  display: flex;
  align-items: center;
  gap: 0.85rem;
  max-width: min(80%, 420px);
}

.proyecto__badge-mark {
  flex: none;
  display: inline-flex;
  align-items: baseline;
  gap: 0.1em;
  font-family: var(--f-title);
  font-weight: var(--fw-reg);
  color: var(--c-white);
  letter-spacing: 0.02em;
  line-height: 1;
}

.proyecto__badge-mark span:first-child {
  font-size: 1.35rem;
}
.proyecto__badge-mark span:last-child {
  font-size: 2.1rem;
}

.proyecto__badge-text {
  font-family: var(--f-body);
  font-weight: var(--fw-thin);
  font-size: clamp(0.7rem, 0.85vw, 0.8125rem);
  line-height: 1.35;
  color: var(--c-white);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}

/* ─── Galería (izq. 2 apiladas + der. 1 vertical simétrica) ──── */
.proyecto__gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.6rem);
  margin-top: clamp(1rem, 2vw, 1.6rem);
}

.proyecto__figure {
  display: block;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: var(--c-bg);
}

/* Las dos horizontales ocupan la columna izquierda (una por fila). */
.proyecto__figure--a { grid-column: 1; grid-row: 1; }
.proyecto__figure--b { grid-column: 1; grid-row: 2; }

/* La vertical ocupa la columna derecha abarcando ambas filas. Su <img> va
   en posición absoluta para que NO imponga su altura intrínseca a las filas
   del grid: así la altura la fijan las dos horizontales de la izquierda y el
   borde inferior queda perfectamente alineado (simétrico) con ellas. */
.proyecto__figure--tall {
  position: relative;
  grid-column: 2;
  grid-row: 1 / 3;
  aspect-ratio: auto;
  overflow: hidden;
}

.proyecto__figure--tall img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Variante espejo: la vertical a la izquierda y las 2 apaisadas a la
   derecha (para alternar cuando una ficha tiene dos bloques seguidos). */
.proyecto__gallery--mirror .proyecto__figure--a { grid-column: 2; }
.proyecto__gallery--mirror .proyecto__figure--b { grid-column: 2; }
.proyecto__gallery--mirror .proyecto__figure--tall { grid-column: 1; }

/* ─── Planos / cortes (2 × 2) ────────────────────────────────── */
.proyecto__drawings {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.6rem);
  margin-top: clamp(1rem, 2vw, 1.6rem);
}

.proyecto__drawing {
  display: block;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: var(--c-bg);
}

.proyecto__drawing img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Los planos son líneas blancas finas reducidas a ~la mitad: al scrollear
     el navegador re-rasteriza con filtro rápido y esos detalles titilan.
     Con capa propia (translateZ) se rasterizan una sola vez → sin parpadeo. */
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Cuando el grupo de planos queda impar, el sobrante ocupa las dos
   columnas, grande y centrado, y se ve completo sin recortar. */
.proyecto__drawing--solo {
  grid-column: 1 / -1;
  aspect-ratio: auto;
  max-width: 70%;
  margin: 0 auto;
}

.proyecto__drawing--solo img {
  height: auto;
  object-fit: contain;
}

/* Plano con proporción propia (ej. un recorte que ya no es 3:2): se
   muestra completo, sin el aspect-ratio fijo de la grilla que fuerza
   object-fit:cover y termina agrandando/recortando los costados. */
.proyecto__drawing--natural {
  aspect-ratio: auto;
}

.proyecto__drawing--natural img {
  height: auto;
  object-fit: contain;
}

/* ─── Vista aérea (full-width del contenedor, 2:1) ───────────── */
/* A diferencia de hero/figure/drawing (que están DENTRO de un contenedor
   con padding y su fondo nunca se ve), esta sección tiene el padding
   lateral en sí misma: si la imagen no llega justo al ancho exacto, ese
   margen deja ver el fondo — por eso va --c-surface (el fondo real de
   toda la ficha) y no --c-bg (más oscuro, quedaba como una franja negra
   distinta al resto de la página). */
.proyecto__aerial {
  display: block;
  overflow: hidden;
  aspect-ratio: 2 / 1;
  background: var(--c-surface);
  margin-top: clamp(1rem, 2vw, 1.6rem);
}

/* ─── Ver galería completa ───────────────────────────────────── */
.proyecto__more {
  display: flex;
  justify-content: flex-end;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

.proyecto__more-link {
  font-family: var(--f-body);
  font-weight: var(--fw-thin);
  font-size: clamp(0.75rem, 0.95vw, 0.875rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-muted);
  text-decoration: none;
  transition: color 0.2s ease;
}

.proyecto__more-link:hover { color: var(--c-text); }

/* ─── "Ver más" — galería desplegable (reemplaza a los carruseles) ─ */
/* Galería ampliada: siempre visible, a continuación del resto (ya no se
   despliega con un botón). Masonry de 2 columnas; las imágenes se
   muestran a su proporción natural, sin recorte. */
.proyecto-more__gallery {
  width: 100%;
  /* Antes había más aire arriba para el botón "Ver más" que ya no existe;
     mismo margen que el resto de los bloques de galería, para que se lea
     como una sola tanda de imágenes destacadas. */
  margin-top: clamp(1rem, 2vw, 1.6rem);
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2vw, 1.6rem);
}

/* Fila "justificada": cada foto pesa (flex-grow) según SU PROPIA
   proporción real (--r, por ítem, generado en el CSS de cada ficha), así
   comparten exactamente la misma altura sin que ninguna quede recortada
   ni con aire de sobra alrededor — a diferencia de una grilla de columnas
   iguales, acá el ancho de cada foto es libre y lo define su forma real. */
.proyecto-more__row {
  display: flex;
  gap: clamp(1rem, 2vw, 1.6rem);
  align-items: flex-start;
}

.proyecto-more__item {
  margin: 0;
  line-height: 0;
  overflow: hidden;
  flex: var(--r, 1) 1 0;
  min-width: 0;
}

.proyecto-more__item img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--r, 1.5);
}

/* Fila "vertical + 2 horizontales apiladas" (mismo recurso que la galería
   destacada de la ficha): la vertical va a la izquierda y ocupa las 2 filas,
   las apaisadas se apilan a su derecha. La altura la fijan las apaisadas.
   Es la única fila que sigue en grid (columna+fila fijas) y a proporción
   fija (--rh se aplica igual a las 2, así quedan a la misma altura). */
.proyecto-more__row--tall {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.6rem);
  align-items: stretch;
}

.proyecto-more__row--tall .proyecto-more__item {
  flex: initial;
}

.proyecto-more__row--tall .proyecto-more__item--tall {
  position: relative;
  grid-column: 1;
  grid-row: 1 / 3;
  aspect-ratio: auto;
}

.proyecto-more__row--tall .proyecto-more__item--tall img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
}

.proyecto-more__row--tall .proyecto-more__item--a { grid-column: 2; grid-row: 1; }
.proyecto-more__row--tall .proyecto-more__item--b { grid-column: 2; grid-row: 2; }
.proyecto-more__row--tall .proyecto-more__item--a img,
.proyecto-more__row--tall .proyecto-more__item--b img { aspect-ratio: var(--rh, 1.5); }

/* Cuando el total es impar, la que sobra ocupa el ancho completo en vez de
   quedar como media columna suelta, a su proporción real (la del propio
   archivo: no hace falta configurar nada por ficha). */
.proyecto-more__row--full {
  display: block;
}

.proyecto-more__row--full .proyecto-more__item {
  width: 100%;
  max-width: var(--w, 100%);
  margin-inline: auto;
}

.proyecto-more__row--full .proyecto-more__item img {
  aspect-ratio: auto;
}

/* ═══ RESPONSIVE ════════════════════════════════════════════ */

/* Orden con imagen de portada primero, en todas las fichas y anchos:
   la portada es lo primero que se ve al entrar, sin llenar la pantalla
   completa (deja asomar el título debajo, invitando a seguir bajando).
   Título, ficha técnica y memoria vienen después. Se logra con
   display:contents en los envoltorios de cabecera y cuerpo, así título/
   hero/metadatos/texto quedan como hijos directos del mismo flex
   container y se reordenan con `order` — sin duplicar HTML ni alterar el
   orden de lectura para lectores de pantalla o buscadores (el DOM no
   cambia, solo el orden visual). */
.proyecto {
  display: flex;
  flex-direction: column;
}

.proyecto__content,
.proyecto__inner {
  display: contents;
}

/* Portada: ocupa la mayor parte de la pantalla pero no toda — se asoma
   el inicio del título justo debajo, como pista de que sigue contenido. */
.proyecto__hero {
  order: 1;
  width: 100%;
  height: 82vh;
  aspect-ratio: auto;
}

/* Portadas partidas en 2 fotos (--split): cada mitad sigue el alto del
   contenedor en vez de su propio aspect-ratio (que antes definía el
   alto libremente); si no, no calzarían con los 82vh de arriba. */
.proyecto__hero--split .proyecto__hero-half {
  aspect-ratio: auto;
  height: 100%;
}

.proyecto__back {
  order: 2;
  padding: clamp(0.75rem, 2vh, 1.25rem) var(--gutter) 0;
}

.proyecto__title {
  order: 3;
  padding-inline: var(--gutter);
}

.proyecto__meta {
  order: 4;
  padding-inline: var(--gutter);
  /* Aire suficiente para que los metadatos queden fuera del primer
     pantallazo (el título ya se ve ahí; los metadatos, recién al
     bajar), a pedido del cliente. */
  margin-top: clamp(3rem, 6vh, 4.5rem);
}

/* La nota de conjunto (Hotel Vallenar) va justo después de la ficha
   técnica. Sin order propio caía al frente (order 0), arriba de la
   portada y escondida bajo la barra de navegación. */
.proyecto__conjunto-note {
  order: 4;
  padding-inline: var(--gutter);
}

.proyecto__body {
  order: 5;
  padding-inline: var(--gutter);
}

/* Galería, planos, imagen de cierre, premio/reconocimiento y galería
   ampliada mantienen su orden relativo entre sí (el spec de flexbox
   conserva el orden de origen entre ítems con el mismo `order`),
   agrupados después del texto. */
.proyecto__gallery,
.proyecto__drawings,
.proyecto__aerial,
.proyecto__award,
.proyecto-more__gallery {
  order: 6;
}

.proyecto__gallery,
.proyecto__drawings,
.proyecto__aerial,
.proyecto__award,
.proyecto-more__gallery {
  padding-inline: var(--gutter);
}

/* Fichas sin .proyecto__hero propio (la portada ES la primera galería,
   ej. Sala Pausa / Casa FOA): esa primera galería hace de portada en su
   lugar, con el mismo alto de pantalla acotado. */
.proyecto__inner:not(:has(.proyecto__hero)) > .proyecto__gallery:first-of-type {
  order: 1;
  height: 82vh;
}
.proyecto__inner:not(:has(.proyecto__hero)) > .proyecto__gallery:first-of-type > * {
  height: 100%;
}

/* Navegación entre proyectos: siempre al final, pese a ser hermano
   directo de .proyecto__head y .proyecto__content dentro del mismo
   flex container (sin order explícito caería al frente, en order 0). */
.proyecto-nav {
  order: 7;
}

@media (max-width: 1099px) {
  .proyecto__hero,
  .proyecto__inner:not(:has(.proyecto__hero)) > .proyecto__gallery:first-of-type {
    height: 68vh;
  }
}

@media (max-width: 600px) {
  .proyecto__hero,
  .proyecto__inner:not(:has(.proyecto__hero)) > .proyecto__gallery:first-of-type {
    height: 58vh;
  }
}

@media (max-width: 900px) {
  .proyecto__body { grid-template-columns: 1fr; gap: clamp(1.75rem, 5vw, 2.5rem); }

  /* En 1 columna, los 3 bloques (lead + 2 secciones) quedan uno abajo del
     otro y el line-height amplio de escritorio (1.85, pensado para 2
     columnas angostas) hace que el texto se vea largo y sin mucha
     jerarquía. Interlineado más compacto y el título de sección un poco
     más grande/separado del texto, para que se lea más organizado. */
  .proyecto__lead,
  .proyecto__text {
    line-height: 1.6;
  }

  .proyecto__section-title {
    font-size: clamp(0.8125rem, 3.2vw, 0.9375rem);
    margin-bottom: clamp(0.85rem, 2.5vw, 1.1rem);
  }

  .proyecto__col {
    gap: clamp(1rem, 3vw, 1.4rem);
  }
}

@media (max-width: 768px) {

  /* En pantallas chicas el hero deja de ser tan alto: el gran row-gap del
     desktop se reduce a una separación normal. */
  .proyecto__meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(2rem, 6vh, 3.5rem) clamp(1.5rem, 3vw, 2.5rem);
  }

  /* Galería en una sola columna: cada figura ocupa su propia fila. */
  .proyecto__gallery { grid-template-columns: 1fr; }
  .proyecto__figure--a,
  .proyecto__figure--b,
  .proyecto__figure--tall,
  .proyecto__gallery--mirror .proyecto__figure--a,
  .proyecto__gallery--mirror .proyecto__figure--b,
  .proyecto__gallery--mirror .proyecto__figure--tall {
    grid-column: 1;
    grid-row: auto;
  }
  /* En mobile no hay columna hermana con la que alinear el borde inferior
     (razón del recorte 3:2 en desktop) → se muestra vertical, sin recortar. */
  .proyecto__figure--tall {
    aspect-ratio: auto;
  }
  .proyecto__figure--tall img {
    position: static;
    height: auto;
  }

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

  .proyecto__hero,
  .proyecto__aerial { aspect-ratio: 3 / 2; }
}

@media (max-width: 600px) {
  .proyecto__meta {
    grid-template-columns: 1fr;
    gap: clamp(1.75rem, 5vw, 2.5rem);
  }

  /* En teléfono las imágenes del "Ver más" se apilan una debajo de la
     otra (a todo el ancho), igual que el resto de las imágenes de la
     ficha, en vez de la mampostería de 2 columnas de desktop/tablet.
     Mismo gap que la galería principal (.proyecto__gallery). */
  /* OJO: .proyecto-more__row es flex (no grid), así que grid-template-columns
     no hacía nada y en teléfono seguían saliendo 2 por fila. Se apilan con
     flex-direction:column. La variante --tall sí es grid. */
  .proyecto-more__row {
    flex-direction: column;
  }

  .proyecto-more__row--tall {
    grid-template-columns: 1fr;
  }

  /* En 1 columna la vertical deja de compartir fila con las apaisadas */
  .proyecto-more__row--tall .proyecto-more__item--tall {
    position: static;
    grid-column: 1;
    grid-row: auto;
    aspect-ratio: var(--rv, 0.75);
  }
  .proyecto-more__row--tall .proyecto-more__item--tall img { position: static; }
  .proyecto-more__row--tall .proyecto-more__item--a,
  .proyecto-more__row--tall .proyecto-more__item--b { grid-column: 1; grid-row: auto; }
}

/* El footer es más oscuro (--c-bg) por defecto; en las fichas el cuerpo
   es gris (--c-surface), así que el footer debe usar el mismo gris para
   no crear un salto de color al pie de la página. */
.footer {
  background: var(--c-surface);
}

/* ─── Variante: el texto de la ficha va DENTRO del hero ───────────
   (`.proyecto--hero-text` en el <article>). Los metadatos se agrupan
   —menos aire entre filas y tipografía algo menor— para dejar sitio
   al texto sin perder la grilla de 3 columnas. */
.proyecto--hero-text .proyecto__title {
  margin: clamp(1.5rem, 3vh, 2.25rem) 0 clamp(1.5rem, 3vh, 2rem);
}

.proyecto--hero-text .proyecto__meta {
  gap: clamp(1.5rem, 4vh, 2.75rem) clamp(1.5rem, 3vw, 2.5rem);
}

.proyecto--hero-text .proyecto__meta-label {
  font-size: clamp(0.68rem, 0.78vw, 0.78rem);
}

.proyecto--hero-text .proyecto__meta-value {
  font-size: clamp(0.85rem, 1vw, 0.95rem);
}

.proyecto--hero-text .proyecto__body {
  /* El espacio entre metadatos y texto normalmente lo reparte el
     justify-content:space-between del header, pero en fichas con mucho
     texto ese reparto se achica casi a 0 y el texto queda pegado a los
     metadatos. margin-top fija un piso mínimo (el fondo punteado del
     header se sigue viendo detrás, ~1 renglón) sin importar cuánto
     texto haya; space-between solo agrega más aire por encima de esto
     cuando sobra espacio (fichas con poco texto). */
  margin-top: clamp(0.75rem, 1.3vh, 1.125rem);
  position: relative;
  z-index: 0;
  /* Aire sólido (sin puntear) entre metadatos y texto: un poco más que
     antes para que ambos sectores se lean como partes distintas, sin
     mover dónde corta el punteado (eso lo controla el margin-top). */
  padding-top: clamp(2.5rem, 5.5vh, 3.75rem);
  /* No 0: deja aire entre el último párrafo y el borde inferior del hero,
     para que no quede pegado a la pantalla (se suma al padding del
     .proyecto__head, que ya reserva su propio margen). */
  padding-bottom: clamp(1.25rem, 3.5vh, 2.25rem);
}

/* Capa sólida detrás del texto: a diferencia de un background-color en
   .proyecto__body (que solo tapa el ancho de la columna de texto), esta
   capa se extiende de borde a borde del viewport. Por abajo no alcanza
   con inset:0 (el propio borde de .proyecto__body): el header tiene su
   propio padding-bottom por fuera de ese borde y ahí seguía asomando el
   punteado. Se extiende ese mismo padding-bottom hacia abajo para llegar
   siempre al borde real del header. */
.proyecto--hero-text .proyecto__body::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: calc(-1 * clamp(2.5rem, 7vh, 5rem));
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: var(--c-surface);
  z-index: -1;
}

/* Esa capa baja hasta 5rem por debajo del texto, pero con el reordenado
   (order) la galería queda a solo ~1.6rem: la capa se pintaba ENCIMA del
   borde superior de las imágenes no posicionadas (las --a/--b, planos),
   mientras la vertical --tall (position:relative) quedaba por arriba →
   parecía que la imagen de la izquierda empezaba más abajo que la de la
   derecha. Los bloques de imágenes van en una capa superior. */
.proyecto--hero-text .proyecto__gallery,
.proyecto--hero-text .proyecto__drawings,
.proyecto--hero-text .proyecto__aerial,
.proyecto--hero-text .proyecto-more__gallery {
  position: relative;
  z-index: 1;
}

.proyecto--hero-text .proyecto__award {
  margin: clamp(3rem, 8vh, 6rem) 0 clamp(2rem, 5vh, 3.5rem);
}

/* ─── Navegación entre proyectos + CTA de cierre ──────────────── */
.proyecto-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  max-width: var(--max-w);
  margin: clamp(3rem, 8vh, 5.5rem) auto 0;
  padding: clamp(1.5rem, 4vh, 2.5rem) var(--gutter) 0;
  border-top: 1px solid rgba(245, 245, 245, 0.16);
}

.proyecto-nav__side {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  text-decoration: none;
  min-width: 0;
}

.proyecto-nav__side--next { text-align: right; }

.proyecto-nav__label {
  font-family: var(--f-body);
  font-weight: var(--fw-thin);
  font-size: clamp(0.68rem, 0.8vw, 0.78rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-muted);
  transition: color 0.2s ease;
}

.proyecto-nav__name {
  font-family: var(--f-body);
  font-weight: var(--fw-thin);
  font-size: clamp(0.85rem, 1vw, 0.95rem);
  color: var(--c-text);
  overflow-wrap: break-word;
}

.proyecto-nav__side:hover .proyecto-nav__label { color: var(--c-text); }

.proyecto-nav__cat {
  font-family: var(--f-body);
  font-weight: var(--fw-thin);
  font-size: clamp(0.68rem, 0.8vw, 0.78rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.proyecto-nav__cat:hover { color: var(--c-text); }

@media (max-width: 768px) {
  .proyecto-nav {
    grid-template-columns: 1fr 1fr;
    row-gap: clamp(1.25rem, 3vh, 2rem);
  }
  .proyecto-nav__cat {
    grid-column: 1 / -1;
    grid-row: 2;
    text-align: center;
  }
}

/* ─── Planos: filas parejas ──────────────────────────────────
   .proyecto__drawings es una grilla de 2 columnas y las filas toman el
   alto del ítem más alto. Si en una fila conviven un plano apaisado y uno
   vertical, el apaisado deja un hueco enorme debajo. Los planos marcados
   --natural conservan su proporción real, así que se agrupan por forma:
   los apaisados entre sí y el vertical va solo al final, centrado. */
.proyecto__drawing--solo-centered {
  grid-column: 1 / -1;
  width: calc(50% - clamp(1rem, 2vw, 1.6rem) / 2);
  margin-inline: auto;
}
@media (max-width: 768px) {
  .proyecto__drawing--solo-centered { width: 100%; }
}

/* Plano grande: va último entre los planos, a las dos columnas y completo
   (su proporción real, sin recorte). */
.proyecto__drawing--wide {
  grid-column: 1 / -1;
  aspect-ratio: auto;
}
.proyecto__drawing--wide img {
  height: auto;
  object-fit: contain;
}

/* ═══ RESPONSIVE — imágenes completas en tablet y teléfono ══════════
   En desktop la portada mide 82vh (asoma el título debajo). En pantallas
   angostas ese alto fijo convertía una foto 2:1 en un retrato recortado
   (en un teléfono se veía ~40 % del ancho de la foto). Desde 1099px hacia
   abajo la portada, la vista de cierre, las figuras de galería y los
   planos toman la proporción REAL de su archivo: se ven completos.
   Los selectores llevan un nivel extra (.proyecto__inner >, etc.) para
   ganarle a los `aspect-ratio` puntuales de cada <ficha>.css, que se
   carga después de este archivo. */
@media (max-width: 1099px) {
  .proyecto__inner > .proyecto__hero {
    height: auto;
    aspect-ratio: auto;
    /* La barra de navegación es fija y opaca: con la portada a su
       proporción real, quedaba tapado el primer ~40 % de la foto. */
    margin-top: var(--nav-h);
  }
  .proyecto__inner > .proyecto__hero img {
    height: auto;
    max-height: 80vh;
  }

  /* Portada partida en 2 fotos: siguen lado a lado (no apiladas, que
     duplicaban el alto de la portada) y a su proporción real. */
  .proyecto__inner > .proyecto__hero--split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .proyecto__hero--split .proyecto__hero-half {
    height: auto;
    aspect-ratio: auto;
  }
  .proyecto__hero--split .proyecto__hero-half img {
    height: auto;
    max-height: none;
  }
}

@media (max-width: 900px) {
  .proyecto__inner > .proyecto__aerial {
    aspect-ratio: auto;
  }
  .proyecto__inner > .proyecto__aerial img {
    height: auto;
  }
}

@media (max-width: 768px) {
  .proyecto__inner > .proyecto__gallery > .proyecto__figure {
    aspect-ratio: auto;
  }
  .proyecto__inner > .proyecto__gallery > .proyecto__figure img {
    height: auto;
  }
  .proyecto__inner > .proyecto__drawings > .proyecto__drawing {
    aspect-ratio: auto;
  }
  .proyecto__inner > .proyecto__drawings > .proyecto__drawing img {
    height: auto;
    object-fit: contain;
  }
}

/* Teléfono: las filas del "Ver más" se apilan en columna (regla de más
   arriba). Con `flex: var(--r) 1 0` la base de cada figura es 0 y, al ser
   overflow:hidden, su alto mínimo también es 0 → en una columna la figura
   medía 0px y la foto quedaba recortada entera: se veía un hueco vacío.
   En columna cada figura vuelve a su tamaño natural. */
@media (max-width: 600px) {
  .proyecto-more__row > .proyecto-more__item {
    flex: none;
    width: 100%;
  }
}