/* ============================================================
   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;
}


/* el puntero nativo se oculta: lo sustituye .cursor-raton (JS) */
html.has-raton,
html.has-raton a, html.has-raton button, html.has-raton [role="button"],
html.has-raton summary, html.has-raton label, html.has-raton input,
html.has-raton select, html.has-raton textarea {
  cursor: none;
}
.cursor-raton {
  position: fixed; left: 0; top: 0;
  z-index: 400;
  width: 15px; height: 15px;
  margin: -2px 0 0 -2px;
  pointer-events: none;
  opacity: 0;
  /* la posición se mueve con "translate" (JS, cada mousemove, sin
     transición) y el giro con "rotate" — al ser propiedades CSS
     independientes (no el shorthand "transform"), la transición de
     abajo solo afecta al giro; la posición sigue al cursor sin ningún
     retraso */
  rotate: 0deg;
  transform-origin: 45% 45%;
  transition: rotate .35s var(--ease-soft), opacity .25s ease;
  will-change: translate;
}
.cursor-raton.is-visible { opacity: 1; }
.cursor-raton.is-link { rotate: 90deg; }

html { -webkit-text-size-adjust: 100%; }
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). */
.site-logo {
  position: fixed; left: 50%; 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;
  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);
}

/* 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; }

/* ---------- 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; }

/* ============================================================
   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;
}
.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;
    /* la casilla base mide ya lo mismo que la foto "pequeña": así el
       gap real controla la separación entre miniaturas en reposo (antes
       la casilla se quedaba grande y la foto encogía DENTRO por transform,
       dejando un margen vacío que el gap no podía tocar). La central
       crece más allá de su casilla con el mismo mecanismo de desplazamiento
       de vecinas que en escritorio. */
    --tile: 25.3vw;
    --gap: 1.5vw;
    --tile-scale: 2.333;
    --track-bottom: 15vh;
  }
  .pro__hint { display: none; }
  /* el cambio de tamaño (pequeña <-> completa) ya no es instantáneo:
     anima con una transición rápida, así la foto que llega al centro
     crece deprisa mientras la anterior encoge a la vez. */
  .pro-item { transition: transform .3s ease; }
  .pro-cap {
    transition: transform .3s ease, opacity .3s ease;
    /* mitad de distancia respecto al valor base (clamp 10-18px) */
    top: calc(100% + clamp(5px, .85vh, 9px));
  }
  /* texto bajo cada foto un 15% más pequeño */
  .pro-cap p { font-size: clamp(9.35px, .68vw, 12.75px); }
  .pro-cap__year { font-size: clamp(6.8px, .45vw, 8.5px); }
  /* 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 {
    left: 50%; top: calc(var(--logo-y) + var(--logo-h) + 18.4px);
    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; }
  .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); font-weight: 700; }
  .service-hero figure { margin-top: 16px; }
  .service-blocks { grid-template-columns: 1fr; }
  .service-back { top: calc(var(--logo-y) + var(--logo-h) + 26px); }
}