/* ═══════════════════════════════════════════════════════════════
   SUN ARQUITECTOS — styles.css
   Orden: @font-face → variables → reset → base → nav → hero →
          cat-bar → editorial → img-strip → featured → bio →
          trayectoria → footer → responsive
   ═══════════════════════════════════════════════════════════════ */

/* ─── @font-face ────────────────────────────────────────────── */
@font-face {
  font-family: 'Inter';
  src: url('../assets/Fuentes/FUENTES/Inter_18pt-Thin.woff2?v=1') format('woff2'),
       url('../assets/Fuentes/FUENTES/Inter_18pt-Thin.ttf?v=3') format('truetype');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../assets/Fuentes/FUENTES/Inter_18pt-SemiBold.woff2?v=1') format('woff2'),
       url('../assets/Fuentes/FUENTES/Inter_18pt-SemiBold.ttf?v=3') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../assets/Fuentes/FUENTES/Inter_18pt-Bold.woff2?v=1') format('woff2'),
       url('../assets/Fuentes/FUENTES/Inter_18pt-Bold.ttf?v=3') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'NeueHaas';
  src: url('../assets/Fuentes/FUENTES/NeueHaasGrotDispRound-55Roman-Trial.woff2?v=1') format('woff2'),
       url('../assets/Fuentes/FUENTES/NeueHaasGrotDispRound-55Roman-Trial.otf?v=3') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'ISOCP';
  src: url('../assets/Fuentes/FUENTES/ISOCP___.woff2?v=1') format('woff2'),
       url('../assets/Fuentes/FUENTES/ISOCP___.TTF?v=3') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ─── Variables ─────────────────────────────────────────────── */
:root {
  --c-bg:       #151515;
  --c-surface:  #252525;
  --c-text:     #F5F5F5;
  --c-muted:    #A2A2A2;
  --c-salmon:   #C4826E;
  --c-footer-c: #8c8c8c;
  --c-div:      rgba(255, 255, 255, 0.22);
  --c-white:    #ffffff;

  --f-body:     'Inter', sans-serif;
  --f-display:  'NeueHaas', sans-serif;
  --f-title:    'ISOCP', monospace;

  --fw-thin:    100;
  --fw-reg:     400;
  --fw-semi:    600;
  --fw-bold:    700;

  /* min() evita que en pantallas altas y angostas (tablets en vertical)
     el header se vuelva demasiado grueso: si el ancho no acompaña, manda
     el menor de los dos (10.5vh vs 8vw). En desktop/laptop (más ancho
     que alto) el resultado no cambia. */
  --nav-h:      clamp(88px, min(10.5vh, 8vw), 152px);
  --gutter:     clamp(1.5rem, 4vw, 3.6rem);
  --max-w:      1440px;

  --sp-xs:  0.5rem;
  --sp-sm:  1rem;
  --sp-md:  2rem;
  --sp-lg:  3.5rem;
  --sp-xl:  6rem;
}

/* ─── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-h);
  -webkit-text-size-adjust: 100%;
  background-color: var(--c-bg);
  overflow-x: clip;
  scrollbar-width: none; /* Firefox: removes scrollbar track */
}

html::-webkit-scrollbar {
  display: none; /* Chrome/Safari/Android: removes scrollbar track */
}

body {
  background-color: var(--c-bg);
  color: var(--c-text);
  font-family: var(--f-body);
  font-weight: var(--fw-thin);
  font-size: clamp(0.875rem, 1vw + 0.25rem, 1.0625rem);
  line-height: 1.65;
}

body.menu-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
}

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

/* <picture> es puro wrapper para servir AVIF con WebP de respaldo: no debe
   generar su propia caja ni afectar ningún layout existente. Con
   display:contents en <picture>, <source> deja de heredar el "no se
   renderiza" implícito y pasa a generar su propia caja (display:block) —
   participa como item de grid/flex igual que el <img>, duplicando la
   cantidad de items y rompiendo cualquier grid con varias fotos como
   hijas directas. Se lo oculta explícitamente para que solo el <img>
   cuente como item real. */
picture {
  display: contents;
}

picture > source {
  display: none;
}

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

/* Foco visible solo para navegación por teclado (no al hacer click con mouse). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--c-text);
  outline-offset: 3px;
}

/* Solo visible al recibir foco por teclado: permite saltar el menú de
   navegación e ir directo al contenido de la página. */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--gutter);
  z-index: 300;
  background: var(--c-text);
  color: var(--c-bg);
  padding: 0.75rem 1.25rem;
  font-family: var(--f-body);
  font-weight: var(--fw-reg);
  letter-spacing: 0.02em;
  text-decoration: none;
  border-radius: 2px;
  transition: top 0.15s ease;
}

.skip-link:focus {
  top: 1rem;
}

address {
  font-style: normal;
}

button {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
}

figure {
  margin: 0;
}

ul, ol {
  list-style: none;
}

hr {
  border: none;
}

/* ─── NAV ───────────────────────────────────────────────────── */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--gutter);
  background-color: var(--c-bg);
  transition: box-shadow 0.3s;
}

.nav--solid {
  box-shadow: none;
}

.nav__brand {
  display: flex;
  align-items: center;
  gap: 0.45em;
  text-decoration: none;
  font-family: var(--f-title);
  font-weight: var(--fw-reg);
  font-size: clamp(2rem, 2.6vw, 2.75rem);
  letter-spacing: 0.06em;
  color: var(--c-text);
  line-height: 1;
  text-transform: lowercase;
  transform-origin: left center;
  transition: transform 0.28s ease, opacity 0.28s ease;
}

/* Mismo efecto que el logo de la derecha, con escala más contenida */
.nav__brand:hover {
  transform: scale(1.06);
  opacity: 0.6;
}

.nav__brand-sun {
  color: var(--c-text);
  text-shadow:
    0.9px 0.0px 0 currentColor, 0.78px 0.45px 0 currentColor, 0.45px 0.78px 0 currentColor,
    0.0px 0.9px 0 currentColor, -0.45px 0.78px 0 currentColor, -0.78px 0.45px 0 currentColor,
    -0.9px 0.0px 0 currentColor, -0.78px -0.45px 0 currentColor, -0.45px -0.78px 0 currentColor,
    0.0px -0.9px 0 currentColor, 0.45px -0.78px 0 currentColor, 0.78px -0.45px 0 currentColor;
}

.nav__brand-arch {
  color: var(--c-muted);
}

.nav__right {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.nav__logo-svg {
  width: 68px;
  height: 68px;
  flex-shrink: 0;
  object-fit: contain;
  transition: transform 0.28s ease, opacity 0.28s ease;
}

.nav__logo:hover .nav__logo-svg {
  transform: scale(1.15);
  opacity: 0.6;
}

.nav__tagline {
  font-family: var(--f-body);
  font-weight: var(--fw-thin);
  font-size: 0.825rem; /* +10% respecto a 0.75rem, misma estructura */
  line-height: 1.55;
  color: var(--c-text);
  letter-spacing: 0.04em;
  text-transform: none;
  padding-right: 1rem;
  border-right: 1px solid rgba(245, 245, 245, 0.38);
  margin-right: 2.5rem;
}

/* Separador vertical nav en páginas sin tagline */
.nav__sep {
  display: block;
  height: 3.5rem;
  border-right: 1px solid rgba(245, 245, 245, 0.38);
}

.nav__toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 12px;
  width: 45px;
  height: 30px;
  padding: 0;
  flex-shrink: 0;
}

.nav__toggle-line {
  display: block;
  height: 1px;
  background: var(--c-text);
  transform-origin: center;
  transition: transform 0.35s cubic-bezier(0.76, 0, 0.24, 1),
              opacity  0.25s ease,
              width    0.3s  cubic-bezier(0.76, 0, 0.24, 1);
}

.nav__toggle-line:nth-child(1) { width: 100%; }
.nav__toggle-line:nth-child(2) { width: 70%; }
.nav__toggle-line:nth-child(3) { width: 100%; }

/* Hamburger → X cuando el menú está abierto */
.nav__toggle[aria-expanded="true"] .nav__toggle-line:nth-child(1) {
  transform: translateY(13px) rotate(45deg);
  width: 100%;
}
.nav__toggle[aria-expanded="true"] .nav__toggle-line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.nav__toggle[aria-expanded="true"] .nav__toggle-line:nth-child(3) {
  transform: translateY(-13px) rotate(-45deg);
  width: 100%;
}

.nav__toggle:hover .nav__toggle-line {
  opacity: 0.6;
}

/* ─── HERO ──────────────────────────────────────────────────── */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 500px;
  overflow: hidden;
  background: var(--c-bg);
}

.hero__figure {
  position: absolute;
  inset: 0;
}

.hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 75%;
}

/* Texto superpuesto sobre la imagen del hero, abajo a la izquierda
   (a pedido del cliente). text-shadow para legibilidad sobre la foto. */
.hero-text {
  position: absolute;
  left: var(--gutter);
  /* Un poco más abajo que antes (era hasta 4,5rem): el texto y el botón
     quedan dentro del pasto de la foto, a pedido del cliente. */
  bottom: clamp(1.25rem, 5vh, 2.75rem);
  z-index: 2;
  /* Ancho para que el <br> manual del texto (2 renglones a propósito)
     no se corte antes de tiempo y agregue un 3er renglón. */
  max-width: 27rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}


/* Misma tipografía que .editorial-item__desc (a pedido del cliente). */
.hero__caption {
  font-family: var(--f-display);
  font-weight: var(--fw-reg);
  font-size: clamp(0.8125rem, 1vw, 0.9375rem);
  line-height: 1.68;
  color: #EDEDED;
  text-align: left;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
}

/* Bajada del hero: acompaña a la frase principal, menor jerarquía */
.hero__sub {
  grid-column: 2;
  grid-row: 2;
  justify-self: end;
  max-width: 54ch;
  margin-top: 0.9rem;
  font-family: var(--f-body);
  font-weight: var(--fw-thin);
  font-size: clamp(0.875rem, 1vw, 1rem);
  line-height: 1.7;
  color: var(--c-muted);
  text-align: right;
  letter-spacing: 0.02em;
}

.hero__cta {
  margin-top: 1.25rem;
}

/* Mismo estilo que el botón del formulario de contacto (recuadro con
   borde), a pedido del cliente — pero más chico, para no competir con
   el texto de arriba. */
.hero__cta-link {
  display: inline-block;
  background: rgba(28, 28, 28, 0.7);
  border: 1px solid rgba(245, 245, 245, 0.4);
  color: var(--c-text);
  font-family: var(--f-display);
  font-weight: var(--fw-reg);
  font-size: 0.75rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  padding: 0.7rem 1.4rem;
  transition: background 0.2s, border-color 0.2s;
}

.hero__cta-link:hover {
  background: rgba(42, 42, 42, 0.85);
  border-color: var(--c-text);
}

/* ─── CATEGORÍAS BAR ────────────────────────────────────────── */
.cat-bar {
  position: relative;
  display: flex;
  align-items: center;
  /* Más aire entre la foto de portada y "EXPLORAR" (a pedido del cliente). */
  padding: clamp(3.5rem, 8vh, 5rem) var(--gutter) 0.5625rem;
  background: var(--c-bg);
}

.cat-bar::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 3.25rem;
  right: 1.875rem;
  height: 1px;
  background: repeating-linear-gradient(
    to right,
    rgba(245,245,245,0.32) 0,
    rgba(245,245,245,0.32) 6px,
    transparent 6px,
    transparent 10px
  );
}

/* Con el efecto de scroll activo, la línea puntuada del separador la aporta el
   primer item (editorial-item__rule); la del cat-bar se oculta para no duplicar. */
.cat-bar--flat::after {
  display: none;
}

/* Misma tipografía que .featured__label (a pedido del cliente): sin
   negrita/text-shadow, salmón, igual tamaño que "PROYECTOS DESTACADOS". */
.cat-bar__label {
  font-family: var(--f-display);
  font-weight: var(--fw-thin);
  font-size: clamp(0.8125rem, 1vw, 1rem);
  letter-spacing: 0.18em;
  color: var(--c-salmon);
  text-transform: uppercase;
}

/* ─── EDITORIAL INDEX ───────────────────────────────────────── */
.editorial-index {
  padding: clamp(8rem, 14vh, 12rem) 0;
  background: var(--c-bg);
}

.editorial-item {
  padding: 0;
  background: var(--c-bg);
}

/* ── Scroll-stack collapse ──────────────────────── */
.editorial-item__desc,
.editorial-item__link {
  max-height: 400px;
  overflow: hidden;
  transition: max-height 0.38s ease, opacity 0.3s ease;
}

.editorial-item__figure {
  /* margin-top NO lleva transition: lo actualiza editorial-scroll.js en cada
     frame de scroll (ver updateCoverage) — debe seguir el scroll al pixel,
     no animarse por su cuenta con un delay. */
  transition: max-height 0.38s ease, opacity 0.3s ease;
}

.editorial-item.is-collapsed .editorial-item__desc,
.editorial-item.is-collapsed .editorial-item__link {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
}

.editorial-item.is-collapsed .editorial-item__figure {
  max-height: 0 !important;
  min-height: 0 !important;
  opacity: 0;
  padding-top: 0;
  padding-right: 0;
}

.editorial-item.is-collapsed .editorial-item__title {
  margin-bottom: 0;
}

.editorial-item.is-collapsed .editorial-item__content {
  padding-bottom: 1.75rem;
}

.editorial-item__rule {
  border: none;
  height: 1px;
  background: repeating-linear-gradient(
    to right,
    rgba(245,245,245,0.32) 0,
    rgba(245,245,245,0.32) 6px,
    transparent 6px,
    transparent 10px
  );
  margin: 2.625rem 1.875rem 0 3.25rem;
}

/* Primera categoría: la línea del cat-bar ya actúa de separador */
.editorial-item:first-child .editorial-item__rule {
  display: none;
}

/* Línea de cierre debajo de la última categoría */
.editorial-item:last-child::after {
  content: '';
  display: block;
  height: 1px;
  background: repeating-linear-gradient(
    to right,
    rgba(245,245,245,0.32) 0,
    rgba(245,245,245,0.32) 6px,
    transparent 6px,
    transparent 10px
  );
  margin: 2.625rem 1.875rem 0 3.25rem;
}

.editorial-item__inner {
  display: grid;
  grid-template-columns: 1fr 39.6%;
  column-gap: 0;
  align-items: stretch;
}

/* Columna de texto */
.editorial-item__content {
  display: flex;
  flex-direction: column;
  padding: 2.625rem var(--sp-lg) 3.625rem var(--gutter);
}

/* Número + cuerpo en fila — stretch para que body llene la altura y margin-top:auto del link funcione */
.editorial-item__header {
  display: flex;
  align-items: stretch;
  gap: 0;
  flex: 1;
}

.editorial-item__num {
  font-family: var(--f-body);
  font-weight: 100;
  font-size: clamp(0.75rem, 0.9vw, 0.875rem);
  letter-spacing: 0.04em;
  color: var(--c-text);
  padding-top: 0.2em;
  flex-shrink: 0;
  width: 7rem;
}

/* Body flex column → link al fondo */
.editorial-item__body {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.editorial-item__title {
  font-family: var(--f-title);
  font-weight: var(--fw-reg);
  font-size: clamp(1.15rem, 1.9vw, 1.65rem);
  line-height: 1;
  color: #F5F5F5;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-shadow:
    0.75px 0.0px 0 currentColor, 0.65px 0.37px 0 currentColor, 0.38px 0.65px 0 currentColor,
    0.0px 0.75px 0 currentColor, -0.37px 0.65px 0 currentColor, -0.65px 0.37px 0 currentColor,
    -0.75px 0.0px 0 currentColor, -0.65px -0.38px 0 currentColor, -0.38px -0.65px 0 currentColor,
    0.0px -0.75px 0 currentColor, 0.38px -0.65px 0 currentColor, 0.65px -0.38px 0 currentColor;
  margin-bottom: 1.75rem;
}

.editorial-item__desc {
  font-family: var(--f-display);
  font-weight: var(--fw-reg);
  font-size: clamp(0.9375rem, 1.18vw, 1.0625rem);
  line-height: 1.72;
  color: #A2A2A2;
  /* 46ch iguala el borde derecho de los 4 textos (a 52ch quedaban dispares:
     desarrollos llenaba casi todo y obras/espacios llegaban más corto). */
  max-width: 46ch;
}

.editorial-item__desc.editorial-item__desc--inter {
  font-family: var(--f-display);
  font-weight: var(--fw-reg);
}

/* Enlace pegado al fondo de la columna */
.editorial-item__link {
  display: inline-block;
  margin-top: 0;
  padding-top: 1.5rem;
  font-family: var(--f-body);
  font-weight: var(--fw-thin);
  font-size: clamp(0.8125rem, 0.97vw, 0.9375rem);
  letter-spacing: 0.06em;
  color: #A2A2A2;
  transition: color 0.2s;
}

.editorial-item__link {
  align-self: flex-start;
}

.editorial-item__link:hover {
  color: #F5F5F5;
}

.editorial-item__title a {
  transition: opacity 0.2s;
}

.editorial-item__title a:hover {
  opacity: 0.7;
}

.editorial-item__figure-link {
  display: block;
  height: 100%;
}

/* margin-top: en reposo, la imagen baja alineada con el título (2.625rem).
   editorial-scroll.js reduce este margin a 0 en tiempo real, en sincronía
   con el scroll, a medida que el siguiente ítem (o el img-strip, para el
   último) va tapando la fila — así la porción que asoma agrupada es foto
   real pegada a la línea punteada, sin hueco de fondo antes de la imagen. */
.editorial-item__figure {
  overflow: hidden;
  margin-top: 2.625rem;
  padding-right: 1.875rem;
  min-height: clamp(220px, 25.7vw, 370px);
}

.editorial-item__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.3s;
}

.editorial-item__figure:hover img {
  opacity: 0.88;
}

/* ─── IMAGE STRIP ───────────────────────────────────────────── */
/* Ocupa la pantalla completa: al centrar la fila en el viewport, se ven
   únicamente las 3 fotos (a pedido del cliente). */
.img-strip {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3vw;
  min-height: 100vh;
  background: var(--c-bg);
  padding: var(--sp-lg) var(--sp-sm);
}

/* Tamaño original (foto completa, sin recortar, alto natural) pero
   un 20% más chica, y centrada como fila: así no queda espacio de
   más ni entre las fotos ni en los bordes. Cada foto es un link a la
   ficha del proyecto (a pedido del cliente), con el nombre debajo. */
.img-strip__item {
  flex: 0 0 auto;
  width: calc((100% - 6vw) / 3 * 0.8);
  display: block;
  text-decoration: none;
}

.img-strip__figure {
  display: block;
  overflow: hidden;
}

.img-strip__figure img {
  width: 100%;
  height: auto;
  display: block;
  transition: opacity 0.3s;
}

.img-strip__item:hover .img-strip__figure img {
  opacity: 0.85;
}

.img-strip__name {
  margin-top: 0.75rem;
  font-family: var(--f-body);
  font-weight: var(--fw-thin);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-muted);
  transition: color 0.2s;
}

.img-strip__item:hover .img-strip__name {
  color: var(--c-text);
}

/* ─── FOTOS DE PROCESO (madera, mudadas desde Estudio) ───────── */
.proceso-collage {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.6rem, 1.2vw, 1rem);
  padding: clamp(6rem, 10vh, 8rem) var(--gutter) 0;
  background: var(--c-bg);
}

.proceso-collage__item img {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  display: block;
}

@media (max-width: 768px) {
  .proceso-collage {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 430px) {
  .proceso-collage {
    grid-template-columns: 1fr;
  }
}

/* ─── PROYECTOS DESTACADOS ──────────────────────────────────── */
.featured {
  padding: clamp(11rem, 18vh, 15rem) var(--gutter) clamp(11rem, 18vh, 15rem);
  background: var(--c-surface);
}

.featured__header {
  margin-bottom: 0.625rem;
}

.featured__label {
  font-family: var(--f-display);
  font-weight: var(--fw-thin);
  font-size: clamp(0.8125rem, 1vw, 1rem);
  letter-spacing: 0.18em;
  color: var(--c-salmon);
  text-transform: uppercase;
}

/* Columnas PSD: izq=659px, der=451px, gap=215px (16.2% del contenedor).
   align-items:end alinea cada par de tarjetas (misma fila del grid) por
   abajo, así las fotos de cada fila comparten el mismo borde inferior en
   vez de quedar descalzadas — el escalonado ya lo dan las proporciones
   reales de cada foto (3:2 vs 3:4), no hace falta un padding-top fijo. */
.featured__grid {
  display: grid;
  grid-template-columns: 659fr 451fr;
  column-gap: 16.2%;
  row-gap: var(--sp-xl);
  align-items: end;
}

/* ── Project cards ── */
.proj-card {
  padding-bottom: 0;
}

.proj-card__link {
  display: block;
}

.proj-card__figure {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  margin-bottom: 0;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.proj-card__figure--tall {
  aspect-ratio: 3 / 4;
}

.proj-card__figure--boldo img {
  object-position: 20% center;
}

.proj-card__figure img {
  display: block;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  margin: -1px;
  object-fit: cover;
  transition: opacity 0.3s;
}

.proj-card__link:hover .proj-card__figure img {
  opacity: 0.82;
}

/* Gap img→título: 14px | gap título→año: 13px (PSD) */
.proj-card__info {
  padding-top: 0.875rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.proj-card__name {
  font-family: var(--f-body);
  font-weight: var(--fw-reg);
  font-size: clamp(0.8125rem, 1.05vw, 0.9375rem);
  letter-spacing: 0.06em;
  color: var(--c-text);
  text-transform: uppercase;
}

.proj-card__location {
  font-family: var(--f-body);
  font-weight: var(--fw-thin);
  font-size: 0.6875rem;
  color: var(--c-muted);
  letter-spacing: 0.02em;
}

.proj-card__meta {
  font-family: var(--f-body);
  font-weight: var(--fw-thin);
  font-size: clamp(0.8125rem, 1vw, 0.9375rem);
  color: var(--c-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.featured__footer {
  margin-top: var(--sp-sm);
  padding-top: var(--sp-md);
  text-align: right;
}

/* Botón "Explorar todos los proyectos": cierra la sección de Proyectos
   destacados, centrado y con aire respecto de la grilla (a pedido del
   cliente). */
/* El botón queda exactamente a mitad de camino entre las últimas tarjetas
   y el final de la sección: mismo espacio arriba y abajo (el padding
   inferior de .featured se anula para que no sume). */
.featured {
  padding-bottom: 0;
}

.featured__cta {
  display: flex;
  justify-content: center;
  padding-block: clamp(5rem, 11vh, 8rem);
}

.home-explore__link {
  display: inline-block;
  white-space: nowrap;
  background: #1c1c1c;
  border: 1px solid rgba(245, 245, 245, 0.4);
  color: var(--c-text);
  font-family: var(--f-display);
  font-weight: var(--fw-reg);
  font-size: clamp(0.8125rem, 0.95vw, 1rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 1rem 2rem;
  transition: background 0.2s, border-color 0.2s;
}

.home-explore__link:hover {
  background: #2a2a2a;
  border-color: var(--c-text);
  color: var(--c-text);
}

@media (max-width: 768px) {
  .featured__cta {
    padding-block: clamp(3rem, 7vh, 4.5rem);
  }

  .home-explore__link {
    padding: 0.45rem 0.8rem;
    font-size: 0.625rem;
  }
}

.featured__all-link {
  font-family: var(--f-body);
  font-weight: var(--fw-thin);
  font-size: clamp(0.8125rem, 1vw, 0.9375rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--c-muted);
  transition: color 0.2s ease;
}

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

/* ─── SHARED SECTION HEADER ─────────────────────────────────── */
.section-header {
  margin-bottom: var(--sp-lg);
}

.section-label {
  font-family: var(--f-display);
  font-weight: var(--fw-thin);
  font-size: clamp(0.8125rem, 1vw, 1rem);
  letter-spacing: 0.18em;
  color: var(--c-salmon);
  text-transform: uppercase;
}

/* ─── PROCESO (resumen del estudio, Home) ─────────────────────
   Reemplaza a la antigua sección "Biografía" (foto + bio extensa):
   a pedido del cliente, sin fotografía. Sigue la misma jerarquía
   tipográfica que el resto del sitio (ver .estudio__label +
   .estudio__heading + lead + columnas en pages/estudio.html):
   etiqueta > título > párrafo de entrada a todo el ancho > columnas
   de apoyo > cierre destacado > link. Sin título "SUN Arquitectos"
   (ya está el logotipo del header arriba). */
.studio-blurb {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: clamp(17rem, 28vh, 22rem);
}

.studio-blurb__label {
  font-family: var(--f-display);
  font-weight: var(--fw-thin);
  font-size: clamp(0.8125rem, 1vw, 1rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-salmon);
}

.studio-blurb__heading {
  margin: 0.85rem 0 clamp(1.5rem, 3vw, 2.25rem);
  max-width: 30ch;
  font-family: var(--f-title);
  font-weight: var(--fw-reg);
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  letter-spacing: 0.03em;
  line-height: 1.15;
  color: var(--c-text);
  text-shadow:
    0.3px 0.0px 0 currentColor, 0.26px 0.15px 0 currentColor, 0.15px 0.26px 0 currentColor,
    0.0px 0.3px 0 currentColor, -0.15px 0.26px 0 currentColor, -0.26px 0.15px 0 currentColor,
    -0.3px 0.0px 0 currentColor, -0.26px -0.15px 0 currentColor, -0.15px -0.26px 0 currentColor,
    0.0px -0.3px 0 currentColor, 0.15px -0.26px 0 currentColor, 0.26px -0.15px 0 currentColor;
}

.studio-blurb__lead {
  /* Sin max-width en ch: ocupa todo el ancho de la sección (mismo
     margen a la izquierda y a la derecha), antes quedaba angosto con
     mucho aire suelto del lado derecho. */
  font-family: var(--f-body);
  font-weight: var(--fw-thin);
  font-size: clamp(1.0625rem, 1.25vw, 1.1875rem);
  line-height: 1.8;
  color: var(--c-text);
}

.studio-blurb__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  margin-top: clamp(2rem, 4vw, 3rem);
  font-family: var(--f-display);
  font-weight: var(--fw-reg);
  font-size: clamp(0.9375rem, 1.18vw, 1.0625rem);
  line-height: 1.72;
  color: #A2A2A2;
}

.studio-blurb__col {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* Home: 4 párrafos en 2 columnas justificadas (a pedido del cliente). */
.studio-blurb__cols--proceso {
  max-width: 85%;
  gap: clamp(2rem, 3.7vw, 3.5rem);
  text-align: justify;
}

.studio-blurb__col strong {
  font-weight: var(--fw-semi);
}

.studio-blurb__closing {
  margin-top: clamp(2rem, 4vw, 3rem);
  font-family: var(--f-body);
  font-weight: var(--fw-thin);
  font-size: clamp(1.0625rem, 1.25vw, 1.1875rem);
  line-height: 1.6;
  color: var(--c-text);
}

.studio-blurb__link {
  display: block;
  width: fit-content;
  margin-left: auto;
  margin-right: 0;
  margin-top: 1.25rem;
  font-family: var(--f-body);
  font-weight: var(--fw-thin);
  font-size: clamp(0.8125rem, 0.97vw, 0.9375rem);
  letter-spacing: 0.06em;
  color: var(--c-muted);
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color 0.2s;
}

.studio-blurb__link:hover {
  color: var(--c-text);
}

/* ─── TRAYECTORIA ───────────────────────────────────────────── */
.trayectoria {
  padding: clamp(8rem, 14vh, 12rem) var(--gutter);
  padding-block-start: clamp(11rem, 18vh, 15rem);
  /* Banda gris carbón: corta la monotonía del tramo negro del Home */
  background: var(--c-surface);
}

.trayectoria__list {
  display: flex;
  flex-direction: column;
  margin-top: var(--sp-md);
  border-top: 1px solid var(--c-div);
}

.tray-item {
  display: grid;
  grid-template-columns: 10ch 2fr 1.5fr 1fr;
  gap: var(--sp-md);
  align-items: center;
  padding: 1rem 0;
  border-bottom: 1px solid var(--c-div);
}

/* Trayectoria: solo 5 hitos quedan visibles por defecto, el resto se
   despliega con el botón "Ver más" de abajo, con una animación de
   acordeón (max-height + padding + borde) en vez de un display:none/grid
   instantáneo. Como los hitos ocultos están intercalados entre los
   visibles (no todos al final), el resto de la lista ya se acomoda solo:
   al crecer un ítem oculto en su lugar dentro del flujo normal, los
   siguientes se corren hacia abajo progresivamente sin necesidad de
   animar cada uno por separado. */
.tray-item--extra {
  display: grid;
  overflow: hidden;
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-bottom-width: 0;
  opacity: 0;
  transition: max-height 0.5s ease, opacity 0.35s ease, padding 0.5s ease, border-bottom-width 0.5s ease;
}

.trayectoria__list--expanded .tray-item--extra {
  max-height: 12rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  border-bottom-width: 1px;
  opacity: 1;
  transition: max-height 0.5s ease, opacity 0.5s ease 0.1s, padding 0.5s ease, border-bottom-width 0.5s ease;
}

@media (prefers-reduced-motion: reduce) {
  .tray-item--extra,
  .trayectoria__list--expanded .tray-item--extra {
    transition: none;
  }
}

.trayectoria__more {
  display: flex;
  justify-content: center;
  margin-top: 0.5rem;
  margin-bottom: clamp(2rem, 5vh, 3.5rem);
}

.trayectoria__more-btn {
  font-family: var(--f-body);
  font-weight: var(--fw-thin);
  font-size: clamp(0.8125rem, 1vw, 0.9375rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-muted);
  background: none;
  border: none;
  padding: 1rem 0 0;
  cursor: pointer;
  transition: color 0.2s ease;
}

.trayectoria__more-btn:hover {
  color: var(--c-text);
}

.tray-item__year {
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  color: var(--c-text);
}

.tray-item__award {
  font-family: var(--f-body);
  font-weight: 600;
  font-size: clamp(0.8125rem, 0.95vw, 0.9375rem);
  letter-spacing: 0.02em;
  color: var(--c-text);
}

.tray-item__project {
  font-family: var(--f-body);
  font-weight: var(--fw-thin);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  color: var(--c-muted);
}

.tray-item__location {
  font-family: var(--f-body);
  font-weight: var(--fw-thin);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  color: var(--c-muted);
  text-align: right;
}

.trayectoria__footer {
  display: flex;
  justify-content: flex-end;
  padding: var(--sp-md) 0;
  margin-top: var(--sp-xl);
}

.trayectoria__link {
  font-family: var(--f-display);
  font-weight: var(--fw-reg);
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  color: var(--c-muted);
  text-decoration: none;
  text-transform: uppercase;
}

/* ─── GALLERY STRIP ─────────────────────────────────────────── */
/* Ocupa la pantalla completa: al centrar la fila en el viewport, se ven
   únicamente las 3 fotos (a pedido del cliente). */
.gallery-strip {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3vw;
  min-height: 100vh;
  padding: var(--sp-lg) var(--sp-sm);
  background: var(--c-bg);
}

/* Tamaño original (foto completa, sin recortar, alto natural) pero
   un 20% más chica, y centrada como fila: así no queda espacio de
   más ni entre las fotos ni en los bordes. Cada foto es un link a la
   ficha del proyecto (a pedido del cliente), con el nombre debajo. */
.gallery-strip__item {
  flex: 0 0 auto;
  width: calc((100% - 6vw) / 3 * 0.8);
  display: block;
  text-decoration: none;
}

.gallery-strip__figure {
  display: block;
  overflow: hidden;
}

.gallery-strip__figure img {
  width: 100%;
  height: auto;
  display: block;
  transition: opacity 0.3s;
}

.gallery-strip__item:hover .gallery-strip__figure img {
  opacity: 0.85;
}

.gallery-strip__name {
  margin-top: 0.75rem;
  font-family: var(--f-body);
  font-weight: var(--fw-thin);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-muted);
  transition: color 0.2s;
}

.gallery-strip__item:hover .gallery-strip__name {
  color: var(--c-text);
}

/* ─── CONTACTO ──────────────────────────────────────────────── */
.contact {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--sp-xl);
  align-items: start;
  padding: 8rem var(--gutter) 3.5rem;
  min-height: calc(100svh - 10.5rem);
  background: var(--c-bg);
}

.contact .section-header {
  margin-bottom: 1.5rem;
}

.contact__form {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

/* Home: mismo esquema que la página Contacto — el rótulo "CONTACTO" en la
   columna izquierda y el formulario centrado en la página (columnas 1 y 3
   iguales), sin el párrafo de la izquierda (a pedido del cliente). */
.contact--home {
  grid-template-columns: minmax(11.25rem, 1fr) minmax(0, 40rem) minmax(11.25rem, 1fr);
}

.contact--home .contact__left { grid-column: 1; }
.contact--home .contact__form { grid-column: 2; width: 100%; }

@media (max-width: 1024px) {
  .contact--home { grid-template-columns: 1fr; }
  .contact--home .contact__left,
  .contact--home .contact__form { grid-column: 1; }
}

.contact__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.625rem;
}

.contact__field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.contact__label {
  font-family: var(--f-body);
  font-weight: var(--fw-thin);
  font-size: clamp(0.8125rem, 0.9vw, 0.875rem);
  letter-spacing: 0.08em;
  color: var(--c-muted);
  text-transform: uppercase;
}

.contact__input {
  width: 100%;
  height: 2.75rem;
  padding: 0 0.875rem;
  background: var(--c-surface);
  border: none;
  outline: none;
  color: var(--c-text);
  font-family: var(--f-body);
  font-weight: var(--fw-thin);
  font-size: clamp(0.9375rem, 1.05vw, 1rem);
  letter-spacing: 0.04em;
  transition: background 0.2s;
  -webkit-appearance: none;
}

.contact__input:focus {
  background: #2e2e2e;
}

.contact__input::placeholder {
  color: var(--c-muted);
  font-weight: var(--fw-thin);
}

.contact__textarea {
  height: auto;
  min-height: 8rem;
  padding: 0.75rem 0.875rem;
  resize: vertical;
  line-height: 1.65;
}

/* Validación — errores de campo */
.contact__input--error {
  box-shadow: inset 0 0 0 1px #e07070;
}

.contact__field-error {
  font-family: var(--f-body);
  font-weight: var(--fw-thin);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  color: #e07070;
}

.contact__submit {
  background: #1c1c1c;
  border: 1px solid rgba(245, 245, 245, 0.4);
  color: var(--c-text);
  font-family: var(--f-display);
  font-weight: var(--fw-reg);
  font-size: 0.875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 1.1rem;
  cursor: pointer;
  width: 100%;
  margin-top: var(--sp-sm);
  transition: background 0.2s, border-color 0.2s;
}

.contact__submit:hover {
  background: #2a2a2a;
  border-color: var(--c-text);
}

.contact__submit:disabled {
  opacity: 0.5;
  cursor: default;
}

.contact__msg {
  font-family: var(--f-body);
  font-weight: var(--fw-thin);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  padding: 0.75rem 0;
}

.contact__msg--ok { color: #8db88d; }
.contact__msg--err { color: var(--c-salmon); }

.req-star {
  color: var(--c-salmon);
  margin-left: 0.1em;
}

/* Honeypot antispam: oculto de verdad (fuera de pantalla, fuera del tab
   order y fuera del árbol de accesibilidad), no con display:none que
   algunos bots detectan igual. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Checkbox de consentimiento de datos, compartido por los formularios
   de Contacto y Prácticas. */
.form-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin: 0.25rem 0 0.25rem;
  font-family: var(--f-body);
  font-weight: var(--fw-thin);
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--c-muted);
}

.form-consent input[type="checkbox"] {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  margin-top: 0.15rem;
  accent-color: var(--c-salmon);
}

.form-consent a {
  color: var(--c-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.form-consent a:hover {
  color: var(--c-salmon);
}

/* ─── FOOTER ────────────────────────────────────────────────── */
.footer {
  padding: 1.5rem var(--gutter) 1.125rem;
  background: var(--c-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}

.footer__logo-wrap {
  display: block;
  line-height: 0;
  text-decoration: none;
  color: var(--c-muted);
  align-self: center;
}

.footer__brand-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 560px;
  margin-top: var(--sp-md);
  margin-bottom: calc(-1 * var(--sp-md) + var(--sp-xs));
}

.footer__brand {
  display: flex;
  align-items: baseline;
  gap: 0.25em;
  text-decoration: none;
  font-family: var(--f-title);
  font-weight: var(--fw-reg);
  font-size: clamp(1.15rem, 1.7vw, 1.6rem);
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: lowercase;
}

.footer__brand-sun {
  color: var(--c-text);
  text-shadow:
    0.75px 0.0px 0 currentColor, 0.65px 0.37px 0 currentColor, 0.38px 0.65px 0 currentColor,
    0.0px 0.75px 0 currentColor, -0.37px 0.65px 0 currentColor, -0.65px 0.37px 0 currentColor,
    -0.75px 0.0px 0 currentColor, -0.65px -0.38px 0 currentColor, -0.38px -0.65px 0 currentColor,
    0.0px -0.75px 0 currentColor, 0.38px -0.65px 0 currentColor, 0.65px -0.38px 0 currentColor;
}

.footer__brand-arch {
  color: var(--c-muted);
}

/* Línea separadora footer en páginas sin logo/nav — mismo ancho que home (~964px PSD) */
.footer__rule {
  width: 100%;
  max-width: 964px;
  border: none;
  border-top: 1px solid var(--c-div);
  margin: 0;
}

.footer__logo-svg {
  width: 56px;
  height: 56px;
  display: block;
  object-fit: contain;
}

/* nav-group sizes to nav's natural content width; divider fills that same width */
.footer__nav-group {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  max-width: 100%;
}

.footer__nav {
  display: flex;
  gap: var(--sp-xl);
  justify-content: center;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.footer__nav-link {
  font-family: var(--f-display);
  font-weight: var(--fw-thin);
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  color: var(--c-muted);
  text-decoration: none;
  text-transform: uppercase;
  transition: color 0.2s;
}

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

.footer__divider {
  width: 115%;
  margin-left: -7.5%;
  margin-top: 1.25rem;
  border: none;
  border-top: 1px solid var(--c-div);
}

.footer__bottom {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--sp-md);
  width: 100%;
}

.footer__social {
  display: flex;
  gap: var(--sp-sm);
  align-items: center;
}

.footer__social-link {
  display: flex;
  align-items: center;
  color: var(--c-muted);
  transition: color 0.2s;
  padding: 4px;
  margin: -4px;
}

.footer__social-link svg {
  width: 17px;
  height: 17px;
}

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

.footer__address {
  font-family: var(--f-body);
  font-weight: var(--fw-thin);
  font-size: clamp(0.75rem, 0.85vw, 0.8125rem);
  color: var(--c-muted);
  text-align: center;
  font-style: normal;
  letter-spacing: 0.02em;
  line-height: 1.5;
}

.footer__address a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s;
}

.footer__address a:hover {
  color: var(--c-text);
}

.footer__scroll-up {
  background: none;
  border: 1px solid var(--c-div);
  border-radius: 50%;
  width: 38px;
  height: 38px;
  color: var(--c-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s, border-color 0.2s;
  flex-shrink: 0;
}

.footer__scroll-up svg {
  width: 17px;
  height: 17px;
}

.footer__scroll-up:hover {
  color: var(--c-text);
  border-color: var(--c-text);
}

/* ─── NAV OVERLAY (menú desplegable) ───────────────────────── */
/* Grid 2col × 3 filas: fila-1=nav-h, fila-2=1fr (misma altura en ambas cols), fila-3=auto */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  grid-template-columns: 5fr 7fr;
  grid-template-rows: var(--nav-h) 1fr auto;
  /* Fondo sólido propio: si aparece cualquier costura entre secciones o
     el rebote elástico (rubber-band) de iOS, se ve ESTE fondo y nunca la
     página de atrás. */
  background: var(--c-bg);
  /* Evita que el scroll del menú "encadene" con la página y el rebote
     deje ver el fondo. */
  overscroll-behavior: contain;
  /* Animación: wipe de arriba a abajo */
  visibility: hidden;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.38s cubic-bezier(0.76, 0, 0.24, 1),
              visibility 0s 0.38s;
}

.nav-overlay--open {
  visibility: visible;
  clip-path: inset(0 0 0% 0);
  transition: clip-path 0.38s cubic-bezier(0.76, 0, 0.24, 1),
              visibility 0s 0s;
}

/* ── Fila 1 · Col 1: logotipo ── */
.nav-overlay__brand {
  background: var(--c-bg);
  display: flex;
  align-items: center;
  padding: 0 var(--gutter);
  gap: 0.45em;
  text-decoration: none;
  font-family: var(--f-title);
  font-size: clamp(2rem, 2.6vw, 2.75rem);
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: lowercase;
}

.nav-overlay__brand-sun {
  color: var(--c-text);
  text-shadow:
    0.9px 0.0px 0 currentColor, 0.78px 0.45px 0 currentColor, 0.45px 0.78px 0 currentColor,
    0.0px 0.9px 0 currentColor, -0.45px 0.78px 0 currentColor, -0.78px 0.45px 0 currentColor,
    -0.9px 0.0px 0 currentColor, -0.78px -0.45px 0 currentColor, -0.45px -0.78px 0 currentColor,
    0.0px -0.9px 0 currentColor, 0.45px -0.78px 0 currentColor, 0.78px -0.45px 0 currentColor;
}

.nav-overlay__brand-arch {
  color: var(--c-muted);
}

/* ── Fila 1 · Col 2: logo sun + cerrar ── */
.nav-overlay__right-top {
  background: #1e1e1e;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 0 var(--gutter);
}

.nav__logo {
  display: block;
  line-height: 0;
  text-decoration: none;
}

.nav-overlay__logo {
  display: block;
  line-height: 0;
  text-decoration: none;
  color: var(--c-muted);
}

.nav-overlay__logo-svg {
  width: 68px;
  height: 68px;
  display: block;
  object-fit: contain;
}

.nav-overlay__close {
  position: absolute;
  right: var(--gutter);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 28px;
  height: 28px;
  padding: 0;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
}

.nav-overlay__close-line {
  display: block;
  width: 100%;
  height: 1px;
  background: var(--c-text);
  transform-origin: center;
}

.nav-overlay__close-line:first-child { transform: rotate(45deg) translateY(3px); }
.nav-overlay__close-line:last-child  { transform: rotate(-45deg) translateY(-3px); }

/* ── Fila 2 · Col 1: contacto (misma altura que nav gracias al 1fr) ── */
.nav-overlay__contact {
  background: var(--c-bg);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(2rem, 15vh, 10rem) var(--gutter) clamp(1.5rem, 5vh, 3.5rem);
  overflow: hidden;
}

.nav-overlay__contact-item {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.nav-overlay__contact-label {
  font-family: var(--f-body);
  font-weight: var(--fw-thin);
  font-size: clamp(0.75rem, 0.9vw, 0.85rem);
  color: var(--c-muted);
  letter-spacing: 0.04em;
}

.nav-overlay__contact-value {
  font-family: var(--f-body);
  font-weight: var(--fw-thin);
  font-size: clamp(0.85rem, 1.05vw, 0.95rem);
  color: var(--c-muted);
  text-decoration: none;
  letter-spacing: 0.01em;
  font-style: normal;
  line-height: 1.4;
  transition: color 0.15s;
}

a.nav-overlay__contact-value:hover { color: var(--c-text); }

/* ── Fila 2 · Col 2: nav wrapper (mismo 1fr que contacto) ── */
.nav-overlay__nav {
  background: #1e1e1e;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Lista de links: llena todo el nav wrapper */
.nav-overlay__list {
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: space-between;
  padding: clamp(2rem, 15vh, 10rem) var(--gutter) clamp(1.5rem, 5vh, 3.5rem);
}

.nav-overlay__list li {
  border-top: 1px solid var(--c-div);
}

.nav-overlay__list li:last-child {
  border-bottom: 1px solid var(--c-div);
}

.nav-overlay__link {
  display: block;
  font-family: var(--f-body);
  font-weight: 600;
  font-size: clamp(1.25rem, 2.65vh, 2.125rem);
  letter-spacing: 0.04em;
  color: var(--c-text);
  padding: 0.42em 0;
  transition: color 0.15s;
}

.nav-overlay__link:hover,
.nav-overlay__link--active {
  color: var(--c-salmon);
}

/* ── Fila 3 · Col 1: iconos sociales ── */
.nav-overlay__social {
  background: var(--c-bg);
  display: flex;
  gap: var(--sp-sm);
  align-items: center;
  padding: var(--sp-lg) var(--gutter) var(--sp-xl);
  overflow: hidden;
}

.nav-overlay__social-link {
  display: flex;
  align-items: center;
  color: var(--c-muted);
  transition: color 0.2s;
}

.nav-overlay__social-link svg {
  width: 19px;
  height: 19px;
}

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

/* ── Fila 3 · Col 2: links secundarios ── */
.nav-overlay__secondary {
  background: #1e1e1e;
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: var(--sp-lg) var(--gutter) var(--sp-xl);
  overflow: hidden;
}

.nav-overlay__secondary-list {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.nav-overlay__secondary-link {
  font-family: var(--f-body);
  font-weight: var(--fw-thin);
  font-size: clamp(0.85rem, 1.05vw, 0.95rem);
  color: var(--c-muted);
  text-decoration: none;
  letter-spacing: 0.01em;
  line-height: 1.5;
  transition: color 0.15s;
}

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

/* ─── Responsive — max 768px ────────────────────────────────── */
@media (max-width: 768px) {
  :root {
    --nav-h: 80px;
  }

  .nav__brand {
    font-size: 1.5rem;
    letter-spacing: 0.04em;
  }

  .nav__right {
    gap: 0.4rem;
  }

  .nav__lang-logo-group {
    flex-shrink: 0;
  }

  .nav__logo {
    flex-shrink: 0;
  }

  .nav__logo-svg {
    width: 44px;
    height: 44px;
  }

  .lang-toggle {
    padding-bottom: 8.3px;
  }

  .nav__tagline {
    display: none;
  }

  .nav__toggle {
    gap: 8px;
    width: 40px;
    height: 32px;
  }

  .nav__toggle[aria-expanded="true"] .nav__toggle-line:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
  }

  .nav__toggle[aria-expanded="true"] .nav__toggle-line:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
  }

  .hero {
    height: 60svh;
    min-height: 420px;
  }

  /* Velo oscuro anclado abajo: en desktop el texto cae sobre el pasto y
     los arbustos en sombra de la foto, un fondo naturalmente oscuro. En
     mobile el recorte (mucho más angosto) muestra otra franja de la
     misma foto, con la fachada iluminada detrás del texto — se lee mal
     y da la sensación de que el texto "invade" toda la imagen. Con este
     degradado el texto siempre cae sobre una zona oscura, sin depender
     de qué parte de la foto quede visible en cada pantalla. */
  .hero::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 55%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0));
    pointer-events: none;
  }

  .hero-text {
    left: var(--gutter);
    right: var(--gutter);
    bottom: clamp(1.25rem, 4vh, 2rem);
    max-width: 70%;
  }

  .hero__caption {
    max-width: none;
    font-size: 0.75rem;
    text-align: left;
  }

  /* El corte a 2 renglones es para el ancho de escritorio — en mobile el
     texto ya tiene su propio ancho angosto (70% del hero) y ajusta solo. */
  .hero-br {
    display: none;
  }

  .hero__cta-link {
    padding: 0.55rem 1.1rem;
    font-size: 0.6875rem;
  }

  .hero__sub {
    grid-column: auto;
    grid-row: auto;
    max-width: none;
    text-align: left;
  }

  .hero__cta {
    margin-top: 1.25rem;
  }

  /* El padding-top grande de desktop dejaba un hueco enorme entre la
     línea punteada del cat-bar y la primera categoría (OBRAS); se lo saca
     para que la primera línea quede a la misma distancia que las demás. */
  .editorial-index {
    padding-top: 0;
  }

  /* Celular: número + título arriba, foto debajo y después la bajada y el
     link. El título va primero para que, con el efecto de scroll apilado
     (editorial-scroll.js), cada categoría deje asomando su título — igual
     que en escritorio. Los contenedores intermedios pasan a display:contents
     para poder ordenar sus hijos en esta grilla. */
  .editorial-item__inner {
    grid-template-columns: calc(var(--gutter) + 3rem) minmax(0, 1fr);
    gap: 0;
  }

  .editorial-item__content,
  .editorial-item__header,
  .editorial-item__body {
    display: contents;
  }

  .cat-bar::after {
    left: 0;
    right: 0;
  }

  .editorial-item__rule {
    margin: 1.5rem 0 0 0;
  }

  .editorial-item:last-child::after {
    margin: 1.5rem 0 0 0;
  }

  .editorial-item__num {
    grid-column: 1;
    grid-row: 1;
    width: auto;
    padding: calc(1.25rem + 0.35em) 0 0 var(--gutter);
  }

  .editorial-item__title {
    grid-column: 2;
    grid-row: 1;
    margin: 1.25rem var(--gutter) 1rem 0;
    font-size: clamp(1.375rem, 6.5vw, 1.875rem);
    text-shadow:
      0.4px 0.0px 0 currentColor, 0.35px 0.2px 0 currentColor, 0.2px 0.35px 0 currentColor,
      0.0px 0.4px 0 currentColor, -0.2px 0.35px 0 currentColor, -0.35px 0.2px 0 currentColor,
      -0.4px 0.0px 0 currentColor, -0.35px -0.2px 0 currentColor, -0.2px -0.35px 0 currentColor,
      0.0px -0.4px 0 currentColor, 0.2px -0.35px 0 currentColor, 0.35px -0.2px 0 currentColor;
  }

  .editorial-item__figure {
    grid-column: 1 / -1;
    grid-row: 2;
    min-height: 0;
    padding-top: 0;
    padding-right: 0;
    margin-top: 0;
    aspect-ratio: 16 / 9;
  }

  .editorial-item__desc {
    grid-column: 2;
    grid-row: 3;
    max-width: none;
    padding: 1.25rem var(--gutter) 0 0;
  }

  .editorial-item__link {
    grid-column: 2;
    grid-row: 4;
    text-align: left;
    padding-top: 1.25rem;
    margin-bottom: 2rem;
  }

  /* img-strip: en mobile se apilan en 1 columna, más grandes y con gap real */
  .img-strip {
    flex-direction: column;
    align-items: center;
    gap: var(--sp-md);
    padding: var(--sp-lg) var(--gutter) calc(var(--sp-sm) * 6);
  }

  .img-strip__item {
    width: 80%;
  }

  /* gallery-strip: idem, 1 columna en mobile */
  .gallery-strip {
    flex-direction: column;
    align-items: center;
    gap: var(--sp-md);
    padding-inline: var(--gutter);
  }

  .gallery-strip__item {
    width: 80%;
  }

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

  .proj-card--offset {
    padding-top: 0;
  }

  .proj-card__figure {
    aspect-ratio: 3 / 2;
  }

  /* La variante "tall" usa fotos verticales (retrato) a propósito —
     forzarla al mismo 3:2 que el resto (regla de arriba, misma
     especificidad y después en la cascada: gana) le recortaba mucho
     arriba/abajo (ej. Casa Laguna). En mobile la grilla ya es 1 columna,
     así que no hace falta que combine con nada al lado: se repite acá
     su proporción vertical de escritorio para que la de arriba no la
     pise. */
  .proj-card__figure--tall {
    aspect-ratio: 3 / 4;
  }

  .studio-blurb {
    padding-bottom: clamp(3rem, 7vh, 4.5rem);
    padding-top: calc(clamp(6rem, 10vh, 8rem) + clamp(3rem, 7vh, 4.5rem));
  }

  .studio-blurb__cols {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .studio-blurb__cols--proceso {
    max-width: none;
    gap: 1.25rem;
    text-align: left;
  }

  .tray-item {
    grid-template-columns: 5ch 1fr;
    row-gap: 2px;
  }

  .tray-item__project,
  .tray-item__location {
    display: none;
  }

  /* trayectoria footer */
  .trayectoria__footer {
    padding: var(--sp-sm) 0;
  }

  /* secciones: reducir padding vertical */
  .studio-blurb,
  .trayectoria {
    padding-left: var(--sp-sm);
    padding-right: var(--sp-sm);
  }

  .trayectoria {
    padding-top: var(--sp-lg);
    padding-bottom: var(--sp-lg);
  }

  /* contact */
  .contact {
    grid-template-columns: 1fr;
    gap: var(--sp-lg);
    padding: var(--sp-lg) var(--sp-sm) 1.5rem;
  }

  .contact__row {
    grid-template-columns: 1fr;
    gap: var(--sp-md);
  }

  /* footer */
  .footer {
    padding: 2rem var(--sp-sm) 1.5rem;
    gap: 1.25rem;
  }

  .footer__nav-group {
    display: flex;
    width: 100%;
  }

  .footer__nav {
    gap: var(--sp-md);
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
  }

  .footer__brand-row {
    max-width: 300px;
    margin-top: var(--sp-sm);
  }

  .footer__brand {
    font-size: 1.05rem;
  }

  .footer__logo-svg {
    width: 44px;
    height: 44px;
  }

  .footer__bottom {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: var(--sp-sm);
  }

  .footer__address {
    font-size: 0.6875rem;
    text-align: center;
    order: 2;
  }

  .footer__social {
    order: 1;
    justify-content: center;
  }

  .footer__scroll-up {
    order: 3;
  }

  /* nav overlay: columna única en mobile, reordenado */
  .nav-overlay {
    grid-template-columns: 1fr;
    grid-template-rows: var(--nav-h) auto auto auto auto auto;
    overflow-y: auto;
  }

  /* orden mobile: logo+cerrar → nav → secundarios → [separador] → contacto → social */
  .nav-overlay__brand    { order: 4; display: none; }
  .nav-overlay__right-top { order: 1; }
  .nav-overlay__contact  {
    order: 5;
    border-top: 1px solid var(--c-div);
    padding: var(--sp-md) var(--sp-sm) var(--sp-lg);
    justify-content: flex-start;
    gap: var(--sp-md);
    overflow: visible;
  }
  .nav-overlay__nav      { order: 2; overflow: visible; }
  .nav-overlay__social   { order: 6; padding: var(--sp-sm) var(--sp-sm) var(--sp-lg); overflow: visible; }
  .nav-overlay__secondary { order: 3; padding: var(--sp-sm) var(--sp-sm) var(--sp-md); overflow: visible; }

  .nav-overlay__list {
    flex: none;
    justify-content: flex-start;
    padding: 0 var(--sp-sm) var(--sp-md);
  }

  .nav-overlay__link {
    font-size: clamp(1.25rem, 5.5vw, 1.75rem);
    padding: 0.3em 0;
  }
}


/* ─── Responsive — 769px–1024px ────────────────────────────── */
@media (min-width: 769px) and (max-width: 1024px) {
  .featured__grid {
    column-gap: 8%;
  }

  .proj-card--offset {
    padding-top: clamp(2.5rem, 12vw, 8rem);
  }

  .editorial-item__inner {
    grid-template-columns: 5fr 7fr;
    gap: var(--sp-md);
  }

  .editorial-item__title {
    font-size: clamp(1.5rem, 3vw, 2.25rem);
  }

  .tray-item {
    grid-template-columns: 8ch 2fr 1.5fr 1fr;
    gap: var(--sp-sm);
  }

  /* contact */
  .contact__inner {
    grid-template-columns: 4fr 8fr;
    gap: var(--sp-lg);
  }

  /* footer */
  .footer__nav-group {
    display: flex;
    width: 100%;
  }

  .footer__nav {
    gap: var(--sp-lg);
    width: 100%;
    flex-wrap: wrap;
  }

  /* Con los links en varias filas, el "full bleed" de 115% ya no está
     acotado por el ancho natural del nav y se pasa del borde de la
     página. En este rango queda a 100%, sin el vuelo extra. */
  .footer__divider {
    width: 100%;
    margin-left: 0;
  }

  .footer__address {
    font-size: 0.625rem;
  }
}

/* En teléfono el divisor del footer tampoco lleva el vuelo de 115%:
   se pasaba del borde de la pantalla. */
@media (max-width: 768px) {
  .footer__divider {
    width: 100%;
    margin-left: 0;
  }
}

/* ─── Mobile horizontal overflow fix ───────────────────────── */
/* Recorta cualquier desborde horizontal. `clip` (y no `hidden`) porque
   hidden convierte al body en contenedor de scroll y anula el
   position:sticky del efecto de scroll del Home. `hidden` queda solo
   como respaldo para navegadores que no conocen `clip`. */
@media (max-width: 960px) {
  body {
    overflow-x: hidden;
    overflow-x: clip;
  }
}

/* ─── Lightbox ──────────────────────────────────────────────── */
img.is-lightboxable {
  cursor: zoom-in;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 10, 10, 0.96);
}

.lightbox[hidden] {
  display: none;
}

body.lightbox-open {
  overflow: hidden;
}

.lightbox__img {
  max-width: 90vw;
  max-height: 86vh;
  width: auto;
  height: auto;
  object-fit: contain;
}

.lightbox__close,
.lightbox__nav {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--c-text);
  cursor: pointer;
  padding: 0.5rem;
  min-width: 44px;
  min-height: 44px;
}

.lightbox__close svg,
.lightbox__nav svg {
  width: 1.6rem;
  height: 1.6rem;
}

.lightbox__close:hover,
.lightbox__nav:hover {
  color: var(--c-salmon);
}

.lightbox__close {
  top: clamp(1rem, 3vh, 2rem);
  right: clamp(1rem, 3vw, 2.5rem);
}

.lightbox__nav {
  top: 50%;
  transform: translateY(-50%);
}

.lightbox__nav--prev {
  left: clamp(0.5rem, 2vw, 2rem);
}

.lightbox__nav--next {
  right: clamp(0.5rem, 2vw, 2rem);
}

.lightbox__counter {
  position: absolute;
  bottom: clamp(1rem, 3vh, 2rem);
  left: 50%;
  transform: translateX(-50%);
  color: var(--c-muted);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
}

@media (max-width: 600px) {
  .lightbox__img {
    max-width: 94vw;
    max-height: 80vh;
  }
  .lightbox__nav svg {
    width: 1.35rem;
    height: 1.35rem;
  }
}

/* ─── Selector de idioma ────────────────────────────────────── */
.nav__lang-logo-group {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

/* align-self:flex-end + padding-bottom alinean el texto ES/EN con el borde
   inferior VISIBLE del círculo del logotipo, no con el borde del recuadro
   de la imagen (el PNG tiene ~18.8% de margen transparente debajo del
   círculo: 12.8px de los 68px del logo en desktop). */
.lang-toggle {
  display: flex;
  align-items: center;
  align-self: flex-end;
  gap: 0.35em;
  font-family: var(--f-body);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  flex-shrink: 0;
  padding-bottom: 12.8px;
}

.lang-toggle__btn {
  background: none;
  border: none;
  /* Área táctil >= 44×44px (WCAG 2.5.8) sin agrandar el texto visible:
     el padding expande el hitbox y el margin negativo lo compensa para
     no mover el layout de alrededor. */
  padding: 14px 10px;
  margin: -14px -10px;
  font: inherit;
  letter-spacing: inherit;
  color: var(--c-muted);
  cursor: pointer;
  transition: color 0.15s;
}

.lang-toggle__btn.is-active {
  color: var(--c-text);
}

.lang-toggle__btn:hover {
  color: var(--c-text);
}

.lang-toggle__sep {
  color: var(--c-muted);
}

.lang-toggle--overlay {
  font-size: clamp(0.9375rem, 1.1vw, 1.0625rem);
  margin-left: 0.9rem;
}

@media (max-width: 768px) {
  .lang-toggle {
    font-size: 0.6875rem;
  }

  .nav__lang-logo-group {
    gap: 0.4rem;
  }

  .nav__right .nav__sep {
    margin-right: 0.5rem;
    padding-right: 0.375rem;
  }
}

/* Teléfonos angostos: la marca "sun arquitectos" ya ocupa casi la mitad
   del ancho, así que el resto tiene que achicarse más para dejar aire
   visible antes del selector de idioma. */
@media (max-width: 430px) {
  .nav__right {
    gap: 0.3rem;
  }

  .nav__lang-logo-group {
    gap: 0.3rem;
  }

  .lang-toggle {
    font-size: 0.625rem;
    padding-bottom: 6px;
  }

  .nav__logo-svg {
    width: 32px;
    height: 32px;
  }

  .nav__right .nav__sep {
    display: none;
  }
}