/* GEC Arquitectos */

:root {
  /* Paleta cálida sobre hueso. La jerarquía la da --tinta: los títulos eran
     gris medio y por eso nada tenía peso. Los grises también son cálidos —
     un gris neutro sobre fondo hueso se ensucia. */
  --hueso: #f4f0e8;          /* fondo de todo el sitio */
  --hueso-alto: #faf8f3;     /* superficies que flotan sobre la página: menú, lightbox, barra móvil */
  --tinta: #23201c;          /* títulos: casi negro cálido */
  --gris: #6b655d;           /* texto corrido */
  --gris-claro: #928b81;     /* secundario */
  --gris-tenue: #b3aa9c;     /* etiquetas y detalles */
  --linea: #e2dbcf;          /* filetes */
  --blanco: #fff;
  --gutter: 30px;
  --max: 1440px;
  --seccion: 120px;
  /* 35 de 40 portadas son horizontales (mediana 1.41), no verticales como en
     la referencia. Llenar la altura dejaría 1.5 proyectos a la vista y mataría
     el flujo, así que se limita también por ancho: así siempre se ven ~2 y
     asoma el siguiente. */
  --rio-alto: min(calc(100svh - 230px), 36vw);
  --rio-gap: 26px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--hueso);
  color: var(--gris);
  font-family: "Helvetica Neue", Inter, Helvetica, Arial, sans-serif;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; border: 0; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 300;
  line-height: 1.1;
  color: var(--tinta);
}

p { margin: 0 0 24px; max-width: 66ch; }
p:last-child { margin-bottom: 0; }

.container {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0 var(--gutter);
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- Header ---------- */

.site-header {
  position: absolute;
  top: 0; left: 0; width: 100%;
  z-index: 100;
  padding: 34px 0;
  transition: background .3s ease;
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gutter);
}

.brand {
  display: flex;
  align-items: center;
  gap: 15px;
  font-size: 17px;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--tinta);
  white-space: nowrap;
  transition: color .3s ease;
}

/* isotipo: alto atado al bloque de texto para que la marca respire igual */
.brand-marca {
  flex: 0 0 auto;
  width: 34px;
  height: auto;
  display: block;
  overflow: visible;
}


.nav-main {
  display: flex;
  gap: 46px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-main a {
  display: inline-block;
  font-size: 18px;
  color: var(--gris);
  padding-bottom: 5px;
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, color .3s ease;
}

.nav-main a:hover,
.nav-main a[aria-current="page"] { border-bottom-color: currentColor; }

/* encabezado pegado al hacer scroll */
.site-header.pegado {
  position: fixed;
  background: var(--hueso);
  padding: 18px 0;
  box-shadow: 0 1px 0 var(--linea);
  transform: translateY(-100%);
  transition: transform .4s ease, background .3s ease, padding .3s ease;
}
.site-header.pegado.visible { transform: translateY(0); }
/* la marca mantiene la tinta también con la barra fija: antes se aclaraba a
   gris y quedaba de un color distinto al resto del sitio */
.site-header.pegado .nav-main a { color: var(--gris); }

.btn-menu {
  display: none;
  width: 34px; height: 24px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  position: relative;
}
.btn-menu span {
  position: absolute;
  left: 0; width: 100%; height: 2px;
  background: currentColor;
  color: var(--gris);
  transition: transform .3s ease, opacity .2s ease;
}
.btn-menu span:nth-child(1) { top: 5px; }
.btn-menu span:nth-child(2) { top: 15px; }
.site-header.pegado .btn-menu span { color: var(--gris); }
body.menu-abierto .site-header .btn-menu span,
body.menu-abierto .site-header.pegado .btn-menu span { color: var(--gris); }
body.menu-abierto .btn-menu span:nth-child(1) { top: 10px; transform: rotate(45deg); }
body.menu-abierto .btn-menu span:nth-child(2) { top: 10px; transform: rotate(-45deg); }

/* ---------- Bloque lead de proyecto ---------- */

.lead { padding: 110px 0 0; }

.lead h1 {
  font-size: clamp(30px, 4.2vw, 52px);
  letter-spacing: -.005em;
}

.lead .meta {
  margin-top: 34px;
  font-size: 15px;
  color: var(--gris-claro);
  letter-spacing: .05em;
  text-transform: uppercase;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
}

.col-texto { grid-column: 2 / 9; }

section.texto { padding: 60px 0 0; }
section.texto p { font-size: 18px; }

/* ---------- Galería de proyecto ---------- */

.galeria { padding: 90px 0 0; }

.bloque { margin-bottom: var(--seccion); }

.bloque figure { margin: 0; }

.bloque .par { align-items: center; }
.bloque .par.arriba { align-items: start; }

.b-full   .a { grid-column: 1 / 13; }
.b-izq    .a { grid-column: 1 / 11; }
.b-der    .a { grid-column: 3 / 13; }
.b-par-75 .a { grid-column: 1 / 8; }
.b-par-75 .b { grid-column: 8 / 13; }
.b-par-47 .a { grid-column: 1 / 5; }
.b-par-47 .b { grid-column: 6 / 13; }
.b-par-54 .a { grid-column: 2 / 7; }
.b-par-54 .b { grid-column: 8 / 12; }
.b-par-57 .a { grid-column: 1 / 6; }
.b-par-57 .b { grid-column: 6 / 13; }

.zoom { display: block; cursor: crosshair; }
.zoom img { transition: opacity .4s ease; }
.zoom:hover img { opacity: .88; }

/* ---------- Índice de proyectos ---------- */

.pagina-interior { padding-top: 190px; }

.titulo-pagina {
  font-size: clamp(28px, 3.6vw, 44px);
  margin-bottom: 40px;
}

.filtros {
  display: flex;
  gap: 30px;
  list-style: none;
  margin: 0 0 80px;
  padding: 0;
  flex-wrap: wrap;
}

.filtros button {
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
  padding: 0 0 5px;
  font: inherit;
  font-size: 18px;
  color: var(--gris-claro);
  cursor: pointer;
  transition: color .25s ease, border-color .25s ease;
}

.filtros button:hover { color: var(--gris); }
.filtros button[aria-pressed="true"] {
  color: var(--gris);
  border-bottom-color: var(--gris);
}

.rejilla {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 70px var(--gutter);
  padding-bottom: 140px;
}

.tarjeta { display: block; }

.tarjeta .foto {
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  object-position: center center;
  background-color: #e8e2d7;
}

.tarjeta .raya {
  display: block;
  font-size: 30px;
  line-height: 1;
  color: var(--gris-claro);
  margin: 18px 0 6px -2px;
}

.tarjeta h2 {
  font-size: 18px;
  line-height: 1.4;
  color: var(--tinta);
  transition: color .35s ease;
}

.tarjeta .lugar {
  font-size: 14px;
  color: var(--gris-tenue);
  margin-top: 4px;
  transition: color .35s ease;
}

.tarjeta:hover h2 { color: var(--tinta); }
.tarjeta:hover .lugar { color: var(--gris-claro); }

/* ---------- Home ---------- */

.intro { padding: 150px 0 130px; }

.intro p {
  font-size: clamp(20px, 2.3vw, 30px);
  line-height: 1.45;
  max-width: 22ch;
  margin-bottom: 0;
}

.intro .pie {
  margin-top: 50px;
  font-size: 18px;
  max-width: 60ch;
}

.enlace-linea {
  display: inline-block;
  border-bottom: 1px solid var(--gris-tenue);
  padding-bottom: 4px;
  transition: border-color .25s ease;
}
.enlace-linea:hover { border-bottom-color: var(--gris); }

.destacados { padding-bottom: 40px; }

.destacados .rejilla { padding-bottom: 60px; }

.ver-todo { padding-bottom: 150px; }

/* ---------- Nosotros ---------- */

.retrato { grid-column: 1 / 5; }
.bio { grid-column: 6 / 12; }

.bio h2 {
  font-size: clamp(22px, 2.4vw, 30px);
  margin-bottom: 34px;
}

.cifras {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gutter);
  padding: 120px 0;
  border-top: 1px solid var(--linea);
  margin-top: 120px;
}

.cifra .n {
  font-size: clamp(38px, 4.5vw, 62px);
  line-height: 1;
  color: var(--tinta);
}

.cifra .t {
  margin-top: 14px;
  font-size: 14px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gris-claro);
}

/* ---------- Contacto ---------- */


.dato { margin-bottom: 44px; }

.dato .et {
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gris-tenue);
  margin-bottom: 10px;
}

.dato a, .dato p { font-size: 20px; color: var(--tinta); margin: 0; }

/* ---------- Siguiente proyecto ---------- */

.siguiente {
  border-top: 1px solid var(--linea);
  padding: 90px 0 120px;
  text-align: center;
}

.siguiente .et {
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gris-tenue);
  margin-bottom: 18px;
}

.siguiente a {
  font-size: clamp(24px, 3vw, 40px);
  color: var(--tinta);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease;
}
.siguiente a:hover { border-bottom-color: var(--gris-claro); }

/* ---------- Footer ---------- */

.site-footer {
  border-top: 1px solid var(--linea);
  padding: 60px 0 70px;
  font-size: 14px;
  color: var(--gris-claro);
}

.site-footer .container {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}

.site-footer a:hover { color: var(--gris); }

.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
}

/* ---------- Lightbox ---------- */

.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(250, 248, 243, .985);
  z-index: 500;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 70px;
}

.lightbox.abierto { display: flex; }

.lightbox img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.lightbox button {
  position: absolute;
  background: none;
  border: 0;
  color: var(--gris);
  font-size: 34px;
  font-weight: 200;
  line-height: 1;
  cursor: pointer;
  padding: 16px 22px;
  transition: color .2s ease;
}

.lightbox button:hover { color: #000; }
.lb-cerrar { top: 18px; right: 22px; }
.lb-ant { left: 10px; top: 50%; transform: translateY(-50%); }
.lb-sig { right: 10px; top: 50%; transform: translateY(-50%); }

.lb-cuenta {
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 13px;
  letter-spacing: .1em;
  color: var(--gris-claro);
}

/* ---------- Aparición al hacer scroll ---------- */

/* solo se oculta si hay JS para volver a mostrarlo */
.js .aparece {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .9s ease, transform .9s ease;
}
.js .aparece.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .aparece { opacity: 1; transform: none; transition: none; }
  .hero-home .hero-bg { animation: none; }
}

/* ---------- Responsive ---------- */

@media (max-width: 1024px) {
  :root { --seccion: 80px; }
  .rejilla { grid-template-columns: repeat(2, 1fr); gap: 54px var(--gutter); }
  .col-texto { grid-column: 1 / 11; }
  .retrato { grid-column: 1 / 6; }
  .bio { grid-column: 7 / 13; }
  .datos { grid-column: 1 / 7; }
  }

@media (max-width: 768px) {
  :root { --gutter: 20px; --seccion: 50px; }

  body { font-size: 17px; }

  .btn-menu { display: block; z-index: 210; }

  .site-header { padding: 22px 0; }

  .nav-main {
    position: fixed;
    inset: 0;
    background: var(--hueso-alto);
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 0;
    padding: 0 var(--gutter);
    transform: translateX(100%);
    transition: transform .4s ease;
    z-index: 200;
  }

  body.menu-abierto .nav-main { transform: translateX(0); }

  .nav-main li { width: 100%; }

  .nav-main a {
    display: block;
    width: 100%;
    color: var(--gris);
    font-size: 24px;
    padding: 26px 0;
    border-bottom: 1px solid var(--linea);
  }

  .hero { height: 78vh; min-height: 440px; }
  .hero-titulo { bottom: 34px; }

  .lead { padding-top: 90px; }
  .pagina-interior { padding-top: 130px; }

  .rejilla { grid-template-columns: 1fr; gap: 46px; padding-bottom: 90px; }

  .grid > * { grid-column: 1 / 13 !important; }

  .bloque { margin-bottom: 34px; }
  .bloque .grid { gap: 34px var(--gutter); }

  .intro { padding: 90px 0 70px; }
  .intro p { max-width: none; }

  .cifras { grid-template-columns: 1fr; gap: 46px; padding: 70px 0; margin-top: 70px; }

  .retrato { margin-bottom: 50px; max-width: 420px; }
  .datos { margin-bottom: 50px; }

  .lightbox { padding: 56px 14px; }
  .lb-ant { left: -4px; }
  .lb-sig { right: -4px; }

  .site-footer .container { flex-direction: column; gap: 24px; }
}

/* ============================================================
   HOME: río de proyectos
   Una sola pantalla, sin scroll. Las fotos comparten altura y su
   ancho lo da la proporción, que es lo que crea el ritmo irregular.
   ============================================================ */

body.es-home {
  overflow: hidden;
  background: var(--hueso);
  height: 100vh;
  height: 100svh;
}

body.es-home .site-header { position: fixed; background: none; }

.rio {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
}

.rio.arrastrando { cursor: grabbing; }

.rio-pista {
  display: flex;
  align-items: flex-end;
  gap: var(--rio-gap);
  will-change: transform;
  padding-top: 40px;
}

.pieza {
  flex: 0 0 auto;
  text-decoration: none;
  color: var(--gris);
  -webkit-user-drag: none;
}

.pieza-img {
  height: var(--rio-alto);
  width: auto;
  overflow: hidden;
  background: #e8e2d7;
}

.pieza-img img {
  height: 100%;
  width: auto;
  max-width: none;
  object-fit: cover;
  /* desaturado en reposo, color al acercarse */
  filter: grayscale(100%) contrast(0.96) brightness(1.03);
  transition: filter 700ms ease;
  pointer-events: none;
}

.pieza:hover .pieza-img img { filter: none; }

.pieza-nombre {
  margin-top: 14px;
  font-size: 15px;
  letter-spacing: 0.02em;
  color: var(--gris-claro);
  transition: color 400ms ease;
  white-space: nowrap;
}

.pieza:hover .pieza-nombre { color: var(--tinta); }

@media (max-width: 768px) {
  .rio-pista { padding-top: 30px; }
  .pieza-nombre { font-size: 13px; margin-top: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .pieza-img img { transition: none; }
}

/* Página de proyecto sin foto de entrada: arranca en el título, así que
   necesita el mismo aire superior que el resto de páginas interiores. */
.pagina-proyecto .lead { padding-top: 190px; }

@media (max-width: 768px) {
  .pagina-proyecto .lead { padding-top: 130px; }
}

/* ============================================================
   SEO: migas, entradilla, CTA, clusters, ficha, FAQ, pie ampliado
   ============================================================ */

.migas {
  padding: 150px 0 0;
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--gris-tenue);
}
.migas .sep { margin: 0 10px; opacity: .6; }
.migas a { color: var(--gris-claro); border-bottom: 1px solid transparent; }
.migas a:hover { border-bottom-color: currentColor; }
.migas + .pagina-interior { padding-top: 40px; }
.migas + .pagina-proyecto .lead { padding-top: 40px; }

.entradilla p { font-size: 21px; line-height: 1.45; color: var(--gris); }
.entradilla strong { color: var(--tinta); font-weight: 400; }

/* ---------- CTA ---------- */

.cta {
  margin: 34px 0 0;
  padding: 26px 0 0;
  border-top: 1px solid var(--linea);
}
.cta p { font-size: 17px; margin: 0 0 16px; color: var(--gris); }

.cta-boton {
  display: inline-block;
  padding: 13px 26px;
  background: var(--tinta);
  color: var(--hueso);
  font-size: 15px;
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: opacity .25s ease;
}
.cta-boton:hover { opacity: .82; }


/* ---------- Subtítulos de sección ---------- */

.subtitulo {
  font-size: 14px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gris-tenue);
  font-weight: 400;
  margin: 90px 0 30px;
}

/* ---------- Botón de compartir en el pie ---------- */

.compartir {
  font: inherit;
  font-size: 14px;
  color: var(--gris-claro);
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
  padding: 0;
  cursor: pointer;
  transition: color .25s ease, border-color .25s ease;
}
.compartir:hover { color: var(--gris); border-bottom-color: currentColor; }

/* ---------- Barra fija de contacto en móvil ---------- */

.barra-movil { display: none; }

@media (max-width: 768px) {
  .migas { padding-top: 110px; font-size: 12px; }

  .barra-movil {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 150;
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 1px solid var(--linea);
    background: var(--hueso-alto);
  }
  .barra-movil a {
    padding: 16px 0;
    text-align: center;
    font-size: 15px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--tinta);
  }
  .barra-movil .bm-mail { background: var(--tinta); color: var(--hueso); }

  /* que la barra no tape el final de la página */
  body:not(.es-home) { padding-bottom: 56px; }
}

/* ---------- Contacto: invitación y datos, lado a lado ---------- */

.contacto-doble { align-items: start; }
.contacto-doble .col-invitacion { grid-column: 1 / 7; }
.contacto-doble .col-datos { grid-column: 8 / 13; }

/* el subtítulo abre la columna, sin el margen que lo separa de una sección */
.contacto-doble .col-datos .subtitulo { margin-top: 0; margin-bottom: 26px; }

@media (max-width: 900px) {
  .contacto-doble .col-invitacion,
  .contacto-doble .col-datos { grid-column: 1 / 13; }
  .contacto-doble .col-datos { margin-top: 60px; }
}

/* ============================================================
   Rendimiento
   ============================================================ */

/* El navegador puede saltarse el dibujado de los bloques de galería que están
   fuera de pantalla. `contain-intrinsic-size` reserva el alto aproximado para
   que la barra de scroll no dé saltos. */
.bloque {
  content-visibility: auto;
  contain-intrinsic-size: auto 640px;
}

/* La pista del río se mueve con transform; aislarla evita que el navegador
   recalcule el resto de la página en cada fotograma. */
.rio-pista { contain: layout paint; }

/* Reserva el espacio de cada foto antes de que cargue: sin esto las imágenes
   diferidas provocan reajustes de ancho al aparecer. */
.pieza-img { background: #e8e2d7; }

/* ---------- Iconos de contacto y WhatsApp ---------- */

.site-footer .icono {
  display: inline-flex;
  align-items: center;
  color: var(--gris-claro);
  transition: color .25s ease;
}
.site-footer .icono svg { width: 19px; height: 19px; display: block; }
.site-footer .icono:hover { color: var(--tinta); }

/* la barra móvil gana un tercer botón */
@media (max-width: 768px) {
  .barra-movil { grid-template-columns: 1fr 1fr; }
  .barra-movil a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }
  .barra-movil svg { width: 18px; height: 18px; }
  .barra-movil .bm-wa { color: var(--tinta); }
}

/* WhatsApp junto al botón principal del CTA */
.cta-wa {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 16px;
  padding: 12px 20px;
  border: 1px solid var(--linea);
  font-size: 15px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gris);
  transition: border-color .25s ease, color .25s ease;
}
.cta-wa svg { width: 17px; height: 17px; }
.cta-wa:hover { border-color: var(--gris-tenue); color: var(--tinta); }

@media (max-width: 768px) {
  .cta-wa { margin: 12px 0 0; display: flex; justify-content: center; }
}