/* ============================================================
   BRUTO — Arquitectura y Urbanismo
   Diseño según "Esquema Web" (Portada 2/3, Proyectos 1/2/3)
   ============================================================ */

:root {
  --ink: #111;
  --bg: #ffffff;
  --grey: #f0f0ee;
  --font: "Geist Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  --font-sans: "Geist Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  --nav-x: clamp(20px, 3.1vw, 62px);
  --nav-y: clamp(19px, 7.14vh, 78px);
  --logo-h: clamp(25.2px, 3.7485vh, 40.95px);
  --logo-y: clamp(17px, 6.7vh, 73px);

  --ease-soft: cubic-bezier(.22, .61, .36, 1);
  --ease-page: cubic-bezier(.77, 0, .18, 1);

  /* carrusel proyectos: casillas pequeñas, solo centro ampliado */
  --tile: 13vw;
  --gap: 0.68vw;
  --tile-scale: 1.8;
  --track-bottom: 15vh;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* tipografía del sitio: Geist Mono (variable, un único archivo cubre
   todo el eje de peso 100–900) */
@font-face {
  font-family: "Geist Mono";
  src: url("assets/fonts/geist-mono.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}


html {
  -webkit-text-size-adjust: 100%;
  /* fondo explícito en la raíz: en las páginas que sí se desplazan de
     verdad (estudio, contacto), al llegar arriba/abajo del todo el
     navegador rebota un instante y descubre la franja que hay fuera
     del documento; ahí el logo, que va fijo y se pinta con
     mix-blend-mode:difference, necesita algo pintado detrás con lo
     que mezclar o se ve el PNG tal cual (blanco). Basta con este
     fondo — NO se toca overscroll-behavior: desactivar el rebote del
     todo (probado en un commit anterior) hacía que el scroll con
     rueda/trackpad se notara a tirones al frenar cerca del final, en
     vez de decelerar limpio; el fondo por sí solo ya evita el destello
     sin ese efecto secundario. */
  background: var(--bg);
}
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; left: 8px; top: -48px; z-index: 200;
  background: var(--ink); color: #fff; padding: 8px 14px;
  font-size: 13px; text-decoration: none; transition: top .3s;
}
.skip-link:focus { top: 8px; }

/* ============================================================
   Cabecera: menú arriba-izquierda; logo centrado SIEMPRE encima
   ============================================================ */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 90;
  pointer-events: none;
}
/* El logo va fuera del header en el DOM: pinta en negativo lo que
   tenga debajo (mix-blend difference con la marca en blanco). */
/* centrado con 50vw y NO con 50%: el porcentaje se mide sobre el área
   de contenido, que excluye la barra de desplazamiento, así que el logo
   caía 7,5 px a la izquierda en las páginas que sí se desplazan
   (estudio, contacto, servicios) y saltaba al cambiar de pestaña. Los
   vw sí cuentan la barra, así que queda en el centro exacto de la
   ventana en todas las páginas por igual. */
.site-logo {
  position: fixed; left: 50vw; top: var(--logo-y);
  transform: translateX(-50%);
  z-index: 300;
  pointer-events: auto;
  mix-blend-mode: difference;
}
.site-logo a { display: block; }
.site-logo img {
  height: var(--logo-h); width: auto;
  filter: brightness(0) invert(1);
}
/* en la portada (sección 0) el logo es blanco puro, sin mezcla */
body.theme-hero .site-logo { mix-blend-mode: normal; }

.site-nav {
  position: absolute; left: var(--nav-x); top: var(--nav-y);
  display: flex; flex-direction: column;
  pointer-events: auto;
}
.site-nav a {
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: clamp(13.7px, .8513vw, 16.63px);
  line-height: 1.665;
  text-decoration: none;
  position: relative;
  width: max-content;
  transition: color .6s ease, opacity .25s ease;
}
.site-nav a:hover { opacity: .55; }
.site-nav a[aria-current="page"] { font-weight: 700; }
.site-nav a[aria-current="page"]::before {
  content: "·";
  position: absolute; left: -.62em; font-weight: 700;
}
body.theme-hero .site-nav a { color: #fff; }

/* ============================================================
   Inicio: pager de secciones a pantalla completa
   ============================================================ */
.pages { height: 100vh; height: 100dvh; overflow: hidden; }
.pages__track {
  height: 100vh; height: 100dvh;
  transition: transform 1.05s var(--ease-page);
  will-change: transform;
}
.page-section {
  height: 100vh; height: 100dvh;
  position: relative;
  overflow: hidden;
  background: var(--bg);
}

/* ---------- Sección 1: portada con imágenes rotando ---------- */
.hero { background: #0d0d0d; transition: background-color 1.4s ease; }
.hero__slides img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.4s ease;
}
.hero__slides img.is-on { opacity: 1; }
/* primera foto (la que se ve al abrir la web): cubre la pantalla
   entera igual que el resto (object-fit:cover, heredado de la regla
   base), pero centrada y anclada al límite inferior — si sobra
   imagen, el recorte se lo come por arriba y por los lados, nunca
   por abajo */
.hero__slides img:first-child { object-position: center bottom; }

/* ---------- Sección 2: collage (esquema "Portada 2") ---------- */
.collage { position: absolute; inset: 0; }
.cItem {
  position: absolute;
  left: var(--l); top: var(--t);
  width: var(--w); height: var(--h);
  opacity: 0;
  cursor: pointer;
  transform: translate(var(--fx), var(--fy));
  transition:
    transform 1.9s var(--ease-soft) var(--d),
    opacity 1.4s ease var(--d);
}
.page-section.is-active .cItem { opacity: 1; transform: translate(0, 0); }
.cItem__media {
  position: absolute; inset: 0; overflow: hidden; background: var(--grey);
  transition: transform .55s var(--ease-soft);
}
.cItem__media img { width: 100%; height: 100%; object-fit: cover; }
.cItem:hover .cItem__media { transform: translateY(-9px) scale(1.045); }
.cItem__cap {
  position: absolute; top: 100%; left: 0;
  padding-top: 10px;
  font-size: clamp(11px, .68vw, 13px);
  letter-spacing: .02em;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(-5px);
  transition: opacity .45s var(--ease-soft), transform .45s var(--ease-soft);
}
.cItem:hover .cItem__cap { opacity: 1; transform: translateY(0); }

/* estado dimmed: al abrir detalle del collage, el resto de imágenes y el
   texto se empequeñecen, pierden intensidad y se difuminan. La imagen
   clicada (.is-selected) permanece exactamente igual, sin tocar. */
.collage.has-detail .cItem:not(.is-selected) .cItem__media {
  transition: opacity .35s ease, filter .35s ease, transform .35s var(--ease-soft);
  opacity: 0.06;
  filter: blur(9px) saturate(.15);
  transform: scale(0.86);
  pointer-events: none;
}
.collage.has-detail .cItem:not(.is-selected) .cItem__cap { opacity: 0 !important; }
/* el z-index elevado de la seleccionada se aplica inline vía JS (persiste
   más allá de quitar estas clases, para taparlas también al cerrar) */
/* anula el hover (translateY+scale) mientras está abierto: la imagen
   clicada debe permanecer exactamente en su sitio, sin moverse */
.collage.has-detail .cItem.is-selected .cItem__media { transform: none !important; }
.collage.has-detail .cItem.is-selected .cItem__cap { opacity: 0 !important; }

/* al cerrar: las fotos de la galería salen de plano primero y, solo
   entonces (JS retrasa el quitar "has-detail"), las imágenes difuminadas
   empiezan a volver a la normalidad — con una transición más larga que la
   de apertura para que el regreso se note bien */
.collage.is-closing .cItem:not(.is-selected) .cItem__media {
  transition: opacity .2s ease, filter .2s ease, transform .2s var(--ease-soft);
}

/* móvil: al abandonar la sección con una foto abierta (initCollageDetail
   → resetInstant), el collage se reinicia de golpe, sin transición
   alguna — la sección ya se está deslizando fuera de pantalla en ese
   mismo instante, así que las imágenes no deben "desdifuminarse"
   visiblemente por el camino */
.collage.is-resetting,
.collage.is-resetting * {
  transition: none !important;
}

/* galería del proyecto: 4 imágenes ya colocadas en su hueco final (--l/--t/
   --w/--h fijos) que entran desde fuera de la pantalla (--fx/--fy) y, al
   cerrar, salen de vuelta por el mismo camino en sentido contrario */
.collage__gallery {
  position: absolute; inset: 0;
  pointer-events: none;
}
.collage-gitem {
  position: absolute;
  left: var(--l); top: var(--t);
  width: var(--w); height: var(--h);
  z-index: 30;
  overflow: hidden;
  background: var(--grey);
  opacity: 0;
  pointer-events: auto;
  transform: translate(var(--fx), var(--fy));
  transition:
    transform .5s var(--ease-page) var(--gd, 0s),
    opacity .3s ease var(--gd, 0s);
}
.collage__gallery[data-open] .collage-gitem { opacity: 1; transform: translate(0, 0); }
.collage-gitem img { width: 100%; height: 100%; object-fit: cover; }

/* texto del proyecto seleccionado: un párrafo estrecho (del ancho de
   una foto) colocado en el hueco en blanco que le corresponde a cada
   proyecto — posición fijada desde JS (initCollageDetail) vía las
   variables --tl/--tt/--tw, distinta para cada uno de los 6. Llega
   desde fuera de la pantalla igual que las fotos de la galería
   (--tfx/--tfy, también puestas desde JS). */
.collage-detail-text {
  position: absolute;
  left: var(--tl, 50%); top: var(--tt, 20%);
  width: var(--tw, 24%);
  z-index: 26;
  text-align: left;
  font-size: clamp(11px, .72vw, 13px);
  font-weight: 400;
  line-height: 1.6;
  opacity: 0;
  pointer-events: none;
  transform: translate(var(--tfx, 0vw), var(--tfy, -20vh));
  transition: opacity .3s ease, transform .5s var(--ease-page);
}
.collage-detail-text.is-on { opacity: 1; transform: translate(0, 0); }

/* ---------- Sección 3: Servicios (listado editorial + foto) ---------- */
.services { display: grid; place-items: center; }
.services__inner {
  width: min(86vw, 1560px);
  opacity: 0; transform: translateY(24px);
  transition: opacity 1s ease .1s, transform 1.2s var(--ease-soft) .1s;
}
.page-section.is-active .services__inner { opacity: 1; transform: none; }
.services__body {
  display: grid;
  grid-template-columns: 40% 1fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: center;
}
.services__list { list-style: none; }
.service { border-top: 1px solid rgba(17, 17, 17, .14); }
.service:last-child { border-bottom: 1px solid rgba(17, 17, 17, .14); }
.service__head {
  all: unset; box-sizing: border-box;
  cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: clamp(14px, 2vw, 24px);
  width: 100%;
  padding: clamp(12px, 2vh, 20px) 0;
}
.service__name {
  font-size: clamp(23.1px, 2.08vw, 39.9px);
  font-weight: 400;
  line-height: 1.2;
  transition: opacity .3s ease;
}
.service:hover .service__name { opacity: .55; }
.service__plus {
  position: relative; flex: 0 0 auto;
  width: 15px; height: 15px;
  transition: transform .4s var(--ease-soft);
}
.service__plus::before, .service__plus::after {
  content: ""; position: absolute; background: var(--ink);
}
.service__plus::before { left: 0; top: 50%; width: 100%; height: 1px; transform: translateY(-50%); }
.service__plus::after { top: 0; left: 50%; width: 1px; height: 100%; transform: translateX(-50%); transition: opacity .3s ease; }
.service.is-open .service__plus { transform: rotate(45deg); }
.service__panel {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .5s var(--ease-soft);
  padding: 0;
}
.service.is-open .service__panel { grid-template-rows: 1fr; padding: 0 0 clamp(18px, 3vh, 30px); }
.service__panel-inner { overflow: hidden; min-height: 0; }
.service__desc {
  font-size: clamp(13px, .84vw, 15px);
  line-height: 1.55;
  max-width: 30em;
  margin-bottom: 12px;
}
.service__link {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-sans);
  font-size: clamp(12px, .76vw, 14px);
  font-weight: 700;
  text-decoration: none;
  opacity: .8;
  transition: gap .3s var(--ease-soft), opacity .3s;
}
.service__link:hover { gap: 13px; opacity: 1; }
.service__link svg { width: 12px; height: 10px; }
.service__thumb { display: none; }

.services__media { position: relative; height: 56vh; overflow: hidden; background: var(--grey); }
.services__media-imgs { position: absolute; inset: 0; }
.services__media-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0;
  transition: opacity .6s var(--ease-soft);
}
.services__media-img.is-on { opacity: 1; }
.services__media::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 30%;
  background: linear-gradient(to top, rgba(0, 0, 0, .55), transparent);
  pointer-events: none;
}
.services__media-cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; align-items: center; gap: 20px;
  padding: clamp(16px, 2.4vh, 26px) clamp(18px, 2vw, 30px);
  color: #fff;
}
.services__media-link {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: clamp(16px, 1.15vw, 22px);
  color: #fff;
  text-decoration: none;
  transition: opacity .3s;
}
.services__media-link:hover { opacity: .68; }
.services__media-link svg { width: 13px; height: 11px; }

/* ---------- Sección 5: estudio ---------- */
.home-estudio { display: grid; place-items: center; }
.home-estudio__inner {
  width: min(86vw, 1560px);
  display: grid;
  grid-template-columns: 40% 1fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: center;
  margin-top: 7vh;
}
.home-estudio__text {
  opacity: 0; transform: translateY(30px);
  transition: opacity 1s ease .25s, transform 1.2s var(--ease-soft) .25s;
}
.page-section.is-active .home-estudio__text { opacity: 1; transform: none; }
.kicker {
  display: block;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(11px, .68vw, 13px);
  letter-spacing: .22em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.home-estudio__text h2 {
  font-size: clamp(24px, 2.1vw, 40px);
  font-weight: 700; line-height: 1.15;
  margin-bottom: 20px;
}
.home-estudio__text p {
  font-size: clamp(14px, .85vw, 16px);
  line-height: 1.55;
  max-width: 360px;
  margin-bottom: 14px;
}
.link-arrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-sans);
  font-size: clamp(13px, .8vw, 15px);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 4px;
  transition: gap .3s var(--ease-soft), opacity .3s;
}
.link-arrow:hover { gap: 16px; opacity: .65; }

.home-estudio__imgs {
  position: relative;
  height: 56vh;
}
.home-estudio__imgs figure { position: absolute; overflow: hidden; background: var(--grey); }
.home-estudio__imgs img { width: 100%; height: 100%; object-fit: cover; }
.he-img1 {
  inset: 0;
  width: 100%; height: 100%;
  opacity: 0; transform: translateX(9vw);
  transition: opacity 1.1s ease .35s, transform 1.5s var(--ease-soft) .35s;
}
.page-section.is-active .he-img1 { opacity: 1; transform: none; }

/* ---------- Sección 6: contacto ---------- */
.home-contacto { display: grid; place-items: center; }
.home-contacto__inner {
  text-align: center;
  opacity: 0; transform: translateY(30px);
  transition: opacity 1s ease .2s, transform 1.2s var(--ease-soft) .2s;
}
.page-section.is-active .home-contacto__inner { opacity: 1; transform: none; }
.home-contacto__inner h2 {
  font-size: clamp(30px, 3vw, 58px);
  font-weight: 700;
  margin-bottom: 4vh;
}
.contact-lines { list-style: none; margin-bottom: 5vh; }
.contact-lines li { margin: 10px 0; }
.contact-lines a {
  font-size: clamp(18px, 1.6vw, 30px);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .3s;
}
.contact-lines a:hover { border-color: var(--ink); }
.contact-lines .contact-lines__dir {
  font-size: clamp(13px, .8vw, 15px);
  margin-top: 18px;
}
.btn-ig {
  display: inline-flex; align-items: center; justify-content: center;
  width: clamp(42px, 3.2vw, 50px);
  height: clamp(42px, 3.2vw, 50px);
  border: 1px solid var(--ink);
  border-radius: 50%;
  text-decoration: none;
  transition: background .35s, color .35s;
}
.btn-ig:hover { background: var(--ink); color: #fff; }
.btn-ig svg { width: 20px; height: 20px; }

.home-footer {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 var(--nav-x) 3.2vh;
  font-family: var(--font-sans);
  font-size: 12px;
}
/* el glifo ® de Geist Mono es más bajo que las mayúsculas y flota por
   encima de la línea base; se escala y desplaza (medido en píxel real
   sobre canvas) para igualar altura y línea base con "BRUTO" */
.home-footer .reg-mark,
.site-footer .reg-mark {
  display: inline-block;
  font-size: 1.28em;
  line-height: 1;
  transform: translateY(.225em);
}
.home-footer__links { display: flex; gap: 22px; }
.home-footer a { text-decoration: none; }
.home-footer a:hover { opacity: .6; }

/* pies que solo llevan la marca (portada y contacto): sin la segunda
   columna, "space-between" los dejaría pegados a la izquierda, así que
   se centran. En móvil el pie ya es una columna centrada por
   align-items, de modo que esto solo cambia el escritorio. */
.home-footer:not(:has(.home-footer__links)),
.site-footer:not(:has(.site-footer__links)) { justify-content: center; }

/* ============================================================
   PROYECTOS: carrusel (esquema "Proyectos 1")
   ============================================================ */
body.page-proyectos { overflow: hidden; height: 100vh; height: 100dvh; }

.pro { position: fixed; inset: 0; }
.pro__viewport {
  position: absolute; inset: 0;
  overflow: hidden;
  transition: opacity .5s ease;
}
.pro__viewport.is-hidden { opacity: 0; pointer-events: none; }
.pro__track {
  position: absolute; left: 0; bottom: var(--track-bottom);
  display: flex;
  gap: var(--gap);
  align-items: flex-end;
  will-change: transform;
}
/* cada proyecto = imagen + su texto; el JS escala el conjunto de forma
   continua según la distancia al centro. Todas las casillas comparten
   la misma línea de base: crecen hacia arriba desde ahí, nunca hacia
   abajo, así el conjunto queda siempre alineado por abajo */
.pro-item {
  position: relative;
  width: var(--tile);
  flex: 0 0 auto;
  will-change: transform;
  transform-origin: center bottom;
  /* solo "translate"/"opacity" aquí (entrada al cargar la página, JS
     fija duración/retraso reales — esto es solo el valor de respaldo).
     La transición de "transform" (cambio de tamaño al pasar por el
     centro) va aparte, solo dentro de la media query móvil: en
     escritorio ese cambio de tamaño sigue siendo instantáneo, como
     siempre */
  transition: translate .7s var(--ease-soft), opacity .7s ease;
}
/* estado inicial, antes de entrar: invisible y desplazada hacia abajo.
   Usa "translate", no "transform" (ese lo controla frame() sin parar
   para el tamaño/posición del carrusel) */
.pro-item.is-entering { opacity: 0; translate: 0 36px; }
.pro-tile {
  display: block;
  width: 100%; height: var(--tile);
  border: 0; padding: 0;
  background: var(--grey);
  overflow: hidden;
}
.pro-tile:focus { outline: none; }
.pro-tile:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.pro-tile img {
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.pro-cap {
  position: absolute;
  /* espacio a la imagen reducido un 30% (era clamp(10px, 1.7vh, 18px)) */
  top: calc(100% + clamp(7px, 1.19vh, 12.6px));
  left: 0; width: 100%;
  transform-origin: 0 0;
  opacity: 0;
  pointer-events: none;
}
.pro-detail__meta h2 {
  font-size: clamp(16px, 1.15vw, 22px);
  font-weight: 700;
  margin-bottom: 7px;
}
.pro-cap p {
  margin: 0;
  font-size: clamp(11px, .8vw, 15px);
  font-weight: 700;
}
.pro-cap__year {
  display: inline-block;
  /* espacio al título reducido otro 30% (era 2px) */
  margin-top: 1.4px;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(8px, .53vw, 10px);
  line-height: 1.45;
  opacity: .6;
}
.meta-lines { list-style: none; font-family: var(--font-sans); }
.meta-lines li {
  font-size: clamp(12px, .76vw, 14.5px);
  line-height: 1.55;
  padding-left: 1em;
  position: relative;
}
.meta-lines li::before { content: "·"; position: absolute; left: .2em; }

/* hint táctil */
.pro__hint {
  display: none;
  position: absolute; bottom: 3.4vh; left: 50%; transform: translateX(-50%);
  font-family: var(--font-sans);
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  opacity: .45;
  white-space: nowrap;
}
@media (hover: none) {
  .pro__hint { display: block; }
}

/* modo estático para capturas (?static=1) */
html.no-anim *, html.no-anim *::before, html.no-anim *::after {
  transition: none !important;
  animation: none !important;
}

/* ---------- detalle de proyecto (esquemas "Proyectos 2/3") ---------- */
.pro-detail {
  position: fixed; inset: 0;
  overflow-y: auto;
  background: var(--bg);
  opacity: 0;
  transition: opacity .45s ease;
  z-index: 30;
}
.pro-detail.is-open { opacity: 1; }
.pro-detail__col {
  width: 42.8vw;
  margin: 16.9vh auto 0;
  display: grid;
  gap: 8px;
  opacity: 0;
  transition: opacity .4s ease, transform .7s var(--ease-page);
}
.pro-detail.show-col .pro-detail__col { opacity: 1; }
.pro-detail__col img {
  width: 100%; height: auto;
  background: var(--grey);
}
.pro-detail__col img.is-in {
  animation: imgIn .9s var(--ease-soft) both;
}
@keyframes imgIn {
  from { opacity: 0; transform: translateY(36px); }
  to   { opacity: 1; transform: none; }
}
.pro-detail__meta {
  position: fixed;
  left: 72.8vw; top: 72.2vh;
  width: 18vw;
  z-index: 31;
  opacity: 0;
  transition: opacity .5s ease, transform .8s var(--ease-page);
}
.pro-detail__meta.is-on { opacity: 1; }

/* clon animado tile → detalle */
.pro-zoom {
  position: fixed; z-index: 40;
  overflow: hidden;
  background: var(--grey);
  transition:
    top .8s var(--ease-page), left .8s var(--ease-page),
    width .8s var(--ease-page), height .8s var(--ease-page);
}
.pro-zoom img { width: 100%; height: 100%; object-fit: cover; }

/* ============================================================
   Páginas ESTUDIO y CONTACTO
   ============================================================ */
.page-static { padding: 24vh var(--nav-x) 0; min-height: 100vh; min-height: 100dvh; }
.page-static .container { max-width: 1560px; margin: 0 auto; }

[data-reveal] {
  opacity: 0; transform: translateY(34px);
  transition: opacity .9s ease, transform 1.1s var(--ease-soft);
}
[data-reveal].is-visible { opacity: 1; transform: none; }

/* --- estudio --- */
.estudio-hero { margin-bottom: clamp(40px, 7vh, 90px); }
.estudio-hero h1 {
  font-size: clamp(28px, 2.6vw, 50px);
  font-weight: 700; line-height: 1.12;
  max-width: 18em;
  margin-bottom: clamp(28px, 5vh, 60px);
}
.estudio-hero figure {
  height: min(62vh, 700px);
  overflow: hidden;
  background: var(--grey);
}
.estudio-hero img { width: 100%; height: 100%; object-fit: cover; }

.estudio-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(30px, 4vw, 80px);
  padding-bottom: clamp(50px, 9vh, 110px);
}
.estudio-grid p {
  font-size: clamp(14px, .9vw, 17px);
  line-height: 1.6;
  max-width: 520px;
  margin-bottom: 18px;
}
.estudio-dir h3, .estudio-serv h3 {
  font-family: var(--font-sans);
  font-size: clamp(14px, .9vw, 17px);
  font-weight: 700;
  margin-bottom: 10px;
}
.estudio-dir p, .estudio-serv li {
  font-size: clamp(13px, .82vw, 15px);
  line-height: 1.6;
}
.estudio-serv { margin-top: 34px; }
.estudio-serv ul { list-style: none; }
.estudio-serv li { padding-left: 1em; position: relative; }
.estudio-serv li::before { content: "·"; position: absolute; left: .2em; }

/* --- contacto --- */
.contacto-page { padding-bottom: clamp(60px, 9vh, 110px); }
.contacto-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(30px, 5vw, 90px);
  align-items: center;
}
.contacto-info {
  position: relative;
  padding: clamp(46px, 6.4vw, 92px) clamp(50px, 7vw, 100px);
}
.contacto-info__frame {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  overflow: visible;
  pointer-events: none;
}
.contacto-info__frame--mobile { display: none; }
.contacto-info__frame path {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.contacto-info__body { position: relative; }
.contacto-info h1 {
  font-size: clamp(30px, 2.8vw, 52px);
  font-weight: 700; line-height: 1.15;
  max-width: 12em;
  margin-bottom: clamp(28px, 5vh, 50px);
}
.contacto-map {
  height: min(58vh, 620px);
  overflow: hidden;
  background: var(--grey);
}
.contacto-map iframe { width: 100%; height: 100%; border: 0; }

.site-footer {
  display: flex; justify-content: space-between; align-items: center;
  padding: 26px var(--nav-x);
  font-family: var(--font-sans);
  font-size: 12px;
}
.site-footer .site-footer__links { display: flex; gap: 22px; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { opacity: .6; }

/* ============================================================
   Páginas de SERVICIO (/servicios/*)
   ============================================================ */
.service-back {
  position: fixed; left: var(--nav-x); top: var(--nav-y);
  z-index: 90;
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-sans);
  font-size: clamp(13px, .85vw, 15px);
  text-decoration: none;
  transition: opacity .3s, gap .3s var(--ease-soft);
}
.service-back:hover { opacity: .6; gap: 13px; }
.service-back svg { width: 12px; height: 10px; }

.service-hero { text-align: center; margin-bottom: clamp(40px, 7vh, 90px); }
.service-hero h1 {
  /* tamaño -15% y sin negrita (solo escritorio: el móvil recupera su
     propio font-weight:700 explícitamente en la media query) */
  font-weight: 400; line-height: 1.12;
  font-size: clamp(25.5px, 2.55vw, 47.6px);
  max-width: 16em;
  margin: 0 auto;
}
.service-hero figure {
  height: min(52vh, 620px);
  overflow: hidden;
  background: var(--grey);
  margin-top: clamp(28px, 5vh, 60px);
  text-align: left;
}
.service-hero img { width: 100%; height: 100%; object-fit: cover; }

.service-blocks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(30px, 4vw, 80px);
  padding-bottom: clamp(50px, 9vh, 110px);
}
.service-block h2 {
  font-family: var(--font-sans);
  font-size: clamp(14px, .9vw, 17px);
  font-weight: 700;
  margin-bottom: 12px;
}
.service-block p {
  font-size: clamp(13.5px, .88vw, 16px);
  line-height: 1.6;
  max-width: 480px;
  margin-bottom: 14px;
}
.service-block ul { list-style: none; }
.service-block li {
  font-size: clamp(13.5px, .88vw, 16px);
  line-height: 1.65;
  padding-left: 1em;
  position: relative;
}
.service-block li::before { content: "·"; position: absolute; left: .2em; }
.service-block + .service-block { margin-top: clamp(30px, 5vh, 60px); }

.service-cta {
  border-top: 1px solid rgba(17, 17, 17, .14);
  padding: clamp(40px, 7vh, 80px) 0 clamp(70px, 11vh, 120px);
}
.service-cta h2 {
  font-size: clamp(22px, 1.9vw, 34px);
  font-weight: 700;
  margin-bottom: clamp(18px, 3vh, 28px);
  max-width: 16em;
}

/* ============================================================
   Móvil / pantallas estrechas
   ============================================================ */
@media (max-width: 900px) {

  :root {
    --nav-y: 20px;
    --nav-x: 20px;
    --logo-y: 49.2px;
    --logo-h: 28.7px;
    /* el carrusel de Proyectos usa --gap/--track-bottom del :root de
       escritorio tal cual (en vw/vh, escalan solos con el ancho de
       pantalla) — mismas transiciones (ninguna en el cambio de tamaño).
       --tile al doble y luego un 10% más (28.6vw en vez de 13vw):
       imágenes más grandes en reposo, sin tocar el tamaño de los
       títulos, que van en su propia escala más abajo. --tile-scale un
       25% mayor (2.25 en vez de 1.8): la central, al pasar por el
       centro, crece todavía más que el resto. */
    --tile: 28.6vw;
    --tile-scale: 2.25;
  }
  .pro__hint { display: none; }
  /* título de cada miniatura: -15% de tamaño y más pegado a la imagen
     (era clamp(7px,1.19vh,12.6px), el mismo valor que escritorio) */
  .pro-cap { top: calc(100% + clamp(3px, .5vh, 5px)); }
  .pro-cap p { font-size: clamp(9.35px, .68vw, 12.75px); }
  /* menos espacio entre el nombre y el año (era 1.4px) */
  .pro-cap__year { margin-top: .8px; }
  /* menú debajo del logo, en fila: "Estudio" queda exactamente
     centrado (alineado con el logo) gracias al grid 1fr/auto/1fr —
     las dos columnas 1fr miden siempre lo mismo entre sí (el ancho
     del enlace más largo, "Proyectos"), así que la columna central
     queda centrada pase lo que pese "Proyectos" y "Contacto" a los
     lados. "Contacto", al quedar en una columna más ancha que su
     propio texto, se centra en ella (justify-self:center) para
     repartir esa holgura mitad hacia el hueco con "Estudio" y mitad
     hacia el margen derecho, en vez de cargarla entera en un solo
     lado — así ninguno de los dos (gap o margen) se desvía mucho
     del valor base que sí tiene "Proyectos", que ocupa su columna
     entera y no tiene holgura que repartir. */
  .site-nav {
    /* misma referencia que .site-logo (50vw, no 50%): el menú va justo
       debajo del logo y debe compartir su eje. En un móvil real la
       barra de scroll no ocupa ancho y da igual, pero si se estrecha
       la ventana en un ordenador por debajo de 900px sí lo ocupa, y
       con 50% los dos dejarían de estar alineados entre sí. */
    left: 50vw; top: calc(var(--logo-y) + var(--logo-h) + 23px);
    transform: translateX(-50%);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: 36.2px;
    padding: 0 36.2px;
    width: max-content;
  }
  .site-nav a { font-size: 12.72px; line-height: 1.53; }
  .site-nav a:last-child { justify-self: center; }
  .site-nav a[aria-current="page"]::before { display: none; }

  /* portada: fotos muy altas, pensadas para ajustar al ancho y que el
     sobrante desaparezca por arriba (recorte object-fit:cover con
     ancla inferior). Si alguna vez una foto no fuese lo bastante alta
     para cubrir la pantalla entera así, object-fit:cover cambia solo
     de eje: pasa a ajustar al alto completo, centrada, dejando que
     sobresalgan los laterales — no hace falta ningún caso especial,
     es el comportamiento propio de "cover" según qué eje le falte.
     El color de cielo de cada foto (JS) sigue sirviendo de colchón
     durante el fundido cruzado entre imágenes. */
  .hero__slides img { object-position: center bottom; }

  /* collage: mosaico propio para pantalla estrecha (mismo mecanismo
     absoluto que en escritorio). Casa Volada y Oficina Azzurro en
     formato vertical, Edificio Roma en cuadrado. */
  .cItem__cap { opacity: 1; transform: none; font-size: 10px; padding-top: 4px; }
  .cItem__cap-year { display: none; }
  .collage-detail-text { font-size: clamp(10px, 2.9vw, 12px); line-height: 1.5; }
  .cItem[data-slug="casa-acequia"] {
    --l: 7% !important; --t: 31% !important; --w: 36% !important; --h: 13% !important;
  }
  .cItem[data-slug="casa-volada"] {
    --l: 54% !important; --t: 23% !important; --w: 35% !important; --h: 24% !important;
  }
  .cItem[data-slug="oficina-azzurro"] {
    --l: 16% !important; --t: 51% !important; --w: 32% !important; --h: 20% !important;
  }
  .cItem[data-slug="casa-en-jumilla"] {
    --l: 55% !important; --t: 56% !important; --w: 40% !important; --h: 15% !important;
  }
  .cItem[data-slug="edificio-89-viviendas"] {
    --l: 5% !important; --t: 77% !important; --w: 38% !important; --h: 12% !important;
  }
  .cItem[data-slug="edificio-roma"] {
    --l: 56% !important; --t: 77% !important; --w: 36% !important; --h: 17% !important;
  }

  /* anclado a la parte baja de la pantalla en vez de arriba: al abrir
     un servicio el bloque crece hacia arriba (el borde inferior se
     mantiene fijo), así el desplegable "sube" en vez de "bajar" */
  .services { place-items: end center; }
  .services__inner {
    width: 86vw; margin: 0 0 40px;
    /* combina la transición base (aparición al cambiar de sección) con
       la de margin-top (desplazamiento al abrir un servicio): declarar
       "transition" aquí sustituye por completo la de la regla base, así
       que hay que repetirla entera o la sección deja de animarse al
       entrar/salir con el pager */
    transition: opacity 1s ease .1s, transform 1.2s var(--ease-soft) .1s, margin-top .5s var(--ease-soft);
  }
  .services__body { grid-template-columns: 1fr; gap: 0; }
  .services__media { display: none; }
  .service__head { padding: 12px 0; }
  .service__thumb { display: block; height: 52vw; margin-top: 10px; overflow: hidden; background: var(--grey); }
  .service__thumb img { width: 100%; height: 100%; object-fit: cover; }

  /* anclado abajo (como Servicios): separa el texto del menú, ya que
     al ir la imagen debajo, el conjunto entero baja en bloque */
  .home-estudio { place-items: end center; }
  .home-estudio__inner {
    grid-template-columns: 1fr;
    width: 86vw;
    gap: 22px;
    margin-bottom: 40px;
  }
  .home-estudio__text h2 { display: none; }
  .home-estudio__imgs { height: 68vw; }

  /* .home-footer vuelve a heredar position:absolute (base) en vez de
     static: al ser "static" compartía el grid de .home-contacto con
     .home-contacto__inner y lo descentraba verticalmente. Ahora el
     bloque de info se centra puro en la pantalla y el pie, al ir
     aparte y fijo abajo, baja un poco (menos padding inferior). */
  .home-contacto { min-height: 100svh; }
  .home-contacto__inner { padding: 0 24px; }
  .home-footer { flex-direction: column-reverse; gap: 10px; padding: 0 20px 14px; }

  /* la información del proyecto pasa a ir ARRIBA (justo debajo del
     menú, con el mismo hueco que antes tenía la 1ª imagen) y las fotos
     debajo de ella: se invierte el orden visual con flex + order, sin
     tocar el HTML, así que en escritorio (que no usa flex aquí) no
     cambia nada. Al hacer scroll las imágenes sí pasan por detrás
     del menú con normalidad. */
  /* :not([hidden]) es imprescindible: .pro-detail tiene el mismo
     "peso" (especificidad) que la regla [hidden]{display:none} del
     propio navegador, y al ser una regla de autor gana ella siempre;
     sin este matiz, el panel quedaba SIEMPRE en pantalla (con
     opacity:0 pero interceptando el toque/scroll) y bloqueaba todo
     Proyectos, aunque tuviese el atributo hidden puesto */
  /* flex-shrink:0 en los hijos es imprescindible: por defecto flexbox
     encoge los elementos para que quepan en el alto fijo del
     contenedor, aunque tenga overflow-y:auto — eso aplastaba el
     spacer final (y el resto) a 0 e impedía hacer scroll de verdad */
  .pro-detail:not([hidden]) { display: flex; flex-direction: column; }
  .pro-detail:not([hidden]) > * { flex-shrink: 0; }
  .pro-detail__meta {
    order: -1;
    position: static;
    width: 86vw;
    margin: calc((var(--logo-y) * 3) + var(--logo-h) + 37.9px) auto 0;
  }
  /* sin padding-bottom fijo: el espacio final lo calcula recalcClamp()
     en JS para que la última foto quede centrada al llegar al final */
  .pro-detail__col { width: 86vw; margin: 24px auto 0; }

  .page-static { padding-top: 21vh; }
  .estudio-hero figure { height: auto; aspect-ratio: 3 / 2; }
  .estudio-grid { grid-template-columns: 1fr; }
  .estudio-extra { display: none; }
  .contacto-grid { grid-template-columns: 1fr; }
  .contacto-info { padding: 34px 26px 70px; }
  .contacto-info__frame--desktop { display: none; }
  .contacto-info__frame--mobile { display: block; }
  .contacto-map { height: 66vw; margin-top: 10px; }
  .site-footer { flex-direction: column-reverse; gap: 10px; }

  .service-hero h1 { max-width: none; font-size: clamp(20px, 6.2vw, 25px); }
  .service-hero figure { margin-top: 16px; }
  .service-blocks { grid-template-columns: 1fr; }
  .service-back { top: calc(var(--logo-y) + var(--logo-h) + 26px); }
}