/* ============================================================
   Molokai-IC — prototipo visual
   Paleta: crema / tinta / musgo. Sin acentos.
   Tipografía: General Sans (titulares, nav, interfaz) + DM Sans (lectura).
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, textarea { font: inherit; color: inherit; }

:root {
  /* -- Marca (paleta cerrada) -- */
  --cream: #ece8df;
  --ink: #312c28;
  --moss: #827b6b;

  --ink-70: rgba(49, 44, 40, 0.70);
  --ink-76: rgba(49, 44, 40, 0.76);
  --cream-70: rgba(236, 232, 223, 0.70);
  --cream-52: rgba(236, 232, 223, 0.52);
  --line: rgba(49, 44, 40, 0.12);
  --line-cream: rgba(236, 232, 223, 0.16);

  --font-heading: 'General Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* -- Escala tipográfica fluida (reutilizable) --
     Cada paso crece con el ancho disponible; nada se corta ni se desborda. */
  --fs-lema: clamp(0.95rem, 0.55rem + 1.55vw, 2.15rem);
  --fs-xl:   clamp(1.5rem, 1.05rem + 1.95vw, 2.7rem);
  --fs-lg:   clamp(1.18rem, 0.98rem + 0.85vw, 1.72rem);
  --fs-md:   clamp(0.98rem, 0.93rem + 0.24vw, 1.16rem);
  --fs-lede: clamp(0.92rem, 0.88rem + 0.18vw, 1.04rem);
  --fs-body: clamp(0.875rem, 0.86rem + 0.07vw, 0.92rem);
  --fs-meta: clamp(0.75rem, 0.74rem + 0.05vw, 0.79rem);

  --container: 1440px;
  --gutter: clamp(1.25rem, 4vw, 4.5rem);

  /* Separación horizontal imagen ↔ texto en piezas editoriales.
     ≥ 2× la del PDF de referencia (~20px a 1440) y nunca < 48px en escritorio. */
  --editorial-media-copy-gap: clamp(3rem, 5vw, 5rem);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-s: 240ms;
  --dur-m: 480ms;
  --dur-l: 900ms;

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-s: 1ms; --dur-m: 1ms; --dur-l: 1ms; }
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}

html { scroll-behavior: smooth; }

body {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

/* ============================================================
   Tipografía reutilizable
   Tracking en función del tamaño: negativo en display, neutro en texto.
   ============================================================ */
.t-display {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: var(--fs-lema);
  line-height: 1.1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.t-head {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: var(--fs-xl);
  line-height: 1.04;
  letter-spacing: -0.025em;
  text-wrap: balance;
  max-width: 22ch;
}

.t-sub {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: var(--fs-lg);
  line-height: 1.14;
  letter-spacing: -0.018em;
  text-wrap: balance;
  max-width: 30ch;
}

.t-title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: var(--fs-md);
  line-height: 1.24;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* Texto corrido: tinta suavizada sobre crema (el musgo se queda en 3,4:1
   y es insuficiente para lectura). El musgo sigue en etiquetas y metadatos. */
.t-lede {
  font-size: var(--fs-lede);
  line-height: 1.62;
  color: var(--ink-76);
  max-width: 54ch;
  text-wrap: pretty;
}

.t-body {
  font-size: var(--fs-body);
  line-height: 1.68;
  color: var(--ink-76);
  max-width: 60ch;
  text-wrap: pretty;
}

.t-meta {
  font-size: var(--fs-meta);
  line-height: 1.4;
  color: var(--moss);
  letter-spacing: 0.005em;
}

.on-ink .t-lede, .on-ink .t-body { color: var(--cream-70); }
.on-ink .t-meta { color: var(--cream-52); }

/* ---------- Reveal on scroll (fundido corto, sin desplazamiento llamativo) ---------- */
[data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity var(--dur-l) var(--ease), transform var(--dur-l) var(--ease); }
[data-reveal].is-visible { opacity: 1; transform: none; }

/* ============================================================
   Navegación — mínima, superpuesta
   ============================================================ */
/* Tres columnas iguales a los lados: la navegación queda centrada respecto a
   la ventana, no respecto al espacio que sobra tras el logo. */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(1rem, 2vw, 2rem);
  padding: clamp(1.05rem, 2vw, 1.6rem) var(--gutter);
  color: var(--cream);
  transition: background var(--dur-m) var(--ease), color var(--dur-m) var(--ease), padding var(--dur-m) var(--ease), border-color var(--dur-m) var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.is-solid {
  background: rgba(236, 232, 223, 0.86);
  backdrop-filter: blur(14px);
  color: var(--ink);
  padding-block: 1rem;
  border-bottom-color: var(--line);
}
.page-flush .nav {
  position: sticky;
  background: rgba(236, 232, 223, 0.86);
  backdrop-filter: blur(14px);
  color: var(--ink);
  border-bottom-color: var(--line);
  padding-block: 1rem;
}

/* Logotipo oficial: el SVG se usa como máscara para que tome el color del
   contexto (crema sobre el hero, tinta sobre fondo claro). Proporción intacta. */
.nav__logo {
  display: block;
  grid-column: 1;
  justify-self: start;
  height: clamp(17px, 1.5vw, 23px);
  aspect-ratio: 807 / 141.95;
  background-color: currentColor;
  -webkit-mask: url('../public/assets/img/logo-molokai.svg') left center / contain no-repeat;
  mask: url('../public/assets/img/logo-molokai.svg') left center / contain no-repeat;
}

/* Navegación completa visible en escritorio, centrada bajo el logo.
   El botón solo existe en móvil. */
.nav__menu-btn {
  display: none;
  grid-column: 3;
  justify-self: end;
  font-family: var(--font-heading);
  font-size: var(--fs-meta);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding-bottom: 0.2rem;
  border-bottom: 1px solid currentColor;
}

/* Centrada respecto a la ventana, no al espacio libre tras el logo.
   Sin grid-column: así su bloque contenedor es el header completo. */
.nav__links {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: nowrap;
  gap: clamp(1.15rem, 2.6vw, 2.9rem);
}
.nav__links a {
  position: relative;
  font-family: var(--font-heading);
  font-size: clamp(0.75rem, 0.69rem + 0.18vw, 0.82rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  padding-bottom: 0.22rem;
}
.nav__links a::after {
  content: '';
  position: absolute; left: 0; right: 100%; bottom: 0;
  height: 1px; background: currentColor;
  transition: right var(--dur-m) var(--ease);
}
.nav__links a:hover::after,
.nav__links a[aria-current="page"]::after { right: 0; }

/* ============================================================
   Hero — imagen a pantalla completa + franja inferior con el lema
   ============================================================ */
.hero {
  position: relative;
  height: 100svh;
  min-height: 30rem;
  overflow: hidden;
  background: var(--ink);
}

/* Escenario del carrusel: una capa por imagen, fundido lento entre ellas. */
.hero__stage { position: absolute; inset: 0; }
.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1100ms var(--ease);
}
.hero__slide.is-active { opacity: 1; }
.hero__slide img { width: 100%; height: 100%; object-fit: cover; }
.hero__stage::after {
  content: '';
  position: absolute; inset: 0;
  background-image: var(--grain);
  opacity: 0.045;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* Velo muy sutil, solo sobre la imagen: oscurece lo justo arriba (navegación)
   y abajo (lema). Sin caja ni banner detrás del texto. */
/* Velo muy sutil aplicado a la imagen (nunca al texto): oscurece lo justo
   arriba para la navegación y en la franja media-baja donde vive el lema. */
.hero__veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(49,44,40,0.42) 0%, rgba(49,44,40,0.10) 22%, rgba(49,44,40,0) 42%),
    linear-gradient(0deg, rgba(49,44,40,0.30) 0%, rgba(49,44,40,0.26) 34%, rgba(49,44,40,0) 62%);
  pointer-events: none;
}

/* Lema centrado horizontalmente, fijo en la zona media-baja del banner. */
.hero__lema {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  text-align: center;
  color: var(--cream);
  opacity: 0.8;
}

/* Flecha de bajada: entra con un fundido suave tras la carga
   (2,7 s de retraso + 2,2 s de entrada) y se queda quieta. */
.hero__down {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: clamp(3rem, 9vh, 5.5rem);
  z-index: 3;
  font-family: var(--font-heading);
  font-size: 1rem;
  line-height: 1;
  color: #ffffff;
  padding: 0.75rem 1.25rem;
  opacity: 0;
  animation: flecha-entrada 2200ms ease-out 2700ms forwards;
}
.hero__down:focus-visible { outline: 1px solid #ffffff; outline-offset: 2px; }
@keyframes flecha-entrada { to { opacity: 0.8; } }

@media (prefers-reduced-motion: reduce) {
  .hero__down { opacity: 0.8; animation: none; }
}

/* Indicadores del carrusel: líneas finas, sin peso visual. */
.hero__dots {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(1.6rem, 3.5vw, 2.75rem);
  z-index: 3;
  display: flex; align-items: center; gap: 0.5rem;
}
.hero__dots[hidden] { display: none; }
.hero__dot {
  width: 1.5rem; height: 1px;
  background: var(--cream);
  opacity: 0.4;
  padding: 0.6rem 0;
  background-clip: content-box;
  transition: opacity var(--dur-m) var(--ease);
}
.hero__dot[aria-current="true"] { opacity: 1; }
.hero__dot:hover { opacity: 0.8; }

/* ============================================================
   Secciones
   ============================================================ */
section { position: relative; }
.section { padding-block: clamp(4.5rem, 9vw, 9rem); }
.section--tight { padding-block: clamp(3rem, 6vw, 5.5rem); }
/* Momento de contraste: respira más que el resto de secciones. */
.section--ink {
  background: var(--ink);
  color: var(--cream);
  padding-block: clamp(6rem, 13vw, 13rem);
}

/* Bloque institucional de Inicio sobre papel blanco. Uso puntual: solo
   ese <section>, sin alcanzar a los destacados ni al resto de páginas. */
.section--paper {
  background: #ffffff;
  color: var(--ink);
  /* Reproduce el sangrado que antes aportaba .values: la distancia
     entre el titular y las tres imágenes queda igual que antes. */
  padding-bottom: clamp(4.5rem, 10vw, 9rem);
}

/* Los tres valores vuelven al crema de la página. Anulan su sangrado
   superior porque ya lo aporta el borde inferior del bloque blanco:
   la distancia entre el titular y las imágenes no cambia. */
.section--values { background: #ffffff; color: var(--ink); padding-top: 0; }
.section--values .values { margin-top: 0; }

.rule { border: 0; border-top: 1px solid var(--line); }
.section--ink .rule { border-top-color: var(--line-cream); }

/* ---- Declaración de apertura ---- */
.opening { max-width: 34ch; }

/* ---- Proyectos destacados (composición editorial alterna) ----
   Cada pieza: imagen + nombre/ciudad en una columna, texto en la otra,
   alineado con el pie de la imagen. El lado de la imagen lo fija el
   modificador; el orden DOM (imagen, nombre, texto) no cambia.
   Selectores con `.featured` delante para ganar a `.featured__link { display: block }`. */
.featured { display: flex; flex-direction: column; }
.featured__head { grid-column: 1 / 8; margin-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.featured__item { position: relative; }
.featured__item + .featured__item { margin-top: clamp(4.5rem, 8vw, 7.5rem); }

.featured__copy { max-width: 62ch; }
.featured__copy p { margin: 0; }
/* Bloques del PDF «cambios inicio v2»: cada párrafo se lee como bloque propio
   y la frase de entrada va destacada (en el PDF, tinta oscura y mayor cuerpo;
   aquí mismo tamaño que el resto, sólo peso y tinta). */
.featured__copy p + p { margin-top: 0.85em; }
.featured__lead strong { font-weight: 500; color: var(--ink); }
/* Entrada destacada un 22 % mayor que el cuerpo, como en el PDF; misma
   familia y color. El cuerpo conserva su tamaño. */
.featured__lead { font-size: 1.22em; text-wrap: pretty; }
/* Tras la entrada, el cuerpo va en dos columnas iguales, como en el PDF
   (la columna de texto es tan ancha como la imagen para que cada una
   tenga una medida de lectura cómoda):
   cada columna agrupa sus párrafos (Maui y Tremelo 2+1, Calassanç 2+2).
   En móvil vuelve a una sola columna con los párrafos separados. */
.featured__cols { margin-top: 0.85em; }
/* Doble columna de revista: bandera derecha natural, sin guiones ni cortes
   de palabra, y sin viudas gracias a text-wrap: pretty. */
.featured__col p { text-align: left; hyphens: manual; overflow-wrap: normal; word-break: normal; text-wrap: pretty; }
@media (min-width: 600px) {
  .featured__cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(1.75rem, 3.2vw, 3rem);
    margin-top: 1.1em;
  }
  .featured__col p + p { margin-top: 0; }
}
@media (max-width: 599px) {
  .featured__col + .featured__col { margin-top: 0.85em; }
}

.featured .card-meta { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 0.2rem; }

@media (min-width: 901px) {
  .featured .featured__link {
    display: grid;
    column-gap: var(--editorial-media-copy-gap);
    row-gap: 0;
    align-items: end;
  }
  .featured .featured__link .frame { grid-area: media; }
  .featured .featured__link .card-meta { grid-area: meta; align-self: start; }
  .featured .featured__link .featured__copy { grid-area: copy; max-width: none; }

  .featured .featured__item--media-left .featured__link {
    grid-template-columns: minmax(0, 36rem) minmax(0, 36rem);
    grid-template-areas: "media copy" "meta .";
    justify-content: start;
  }
  .featured .featured__item--media-right .featured__link {
    grid-template-columns: minmax(0, 36rem) minmax(0, 36rem);
    grid-template-areas: "copy media" ". meta";
    justify-content: end;
  }
}

@media (max-width: 900px) {
  .featured__item + .featured__item { margin-top: clamp(3.5rem, 12vw, 5rem); }
  .featured__copy { margin-top: 1.25rem; }
}

.frame { position: relative; aspect-ratio: 4/5; overflow: hidden; background: var(--moss); }
/* Composición de revista: cada imagen conserva su relación de aspecto
   original. Sin altura fija y sin recorte. */
.featured__item .frame { aspect-ratio: auto; background: none; }
.featured__item .frame img { height: auto; object-fit: fill; }
.frame img, .frame svg { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-l) var(--ease); }
.frame:hover img, .frame:hover svg { transform: scale(1.02); }

/* <picture> solo aporta las fuentes WebP responsive: display: contents lo
   saca de la maqueta y la <img> se comporta como hija directa de su
   contenedor, igual que antes. */
picture { display: contents; }
img.photo { filter: sepia(10%) saturate(84%) brightness(94%) contrast(106%); }
.frame:has(img.photo)::after {
  content: '';
  position: absolute; inset: 0;
  background-image: var(--grain);
  opacity: 0.045;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.card-meta { display: flex; align-items: baseline; justify-content: space-between; margin-top: 1rem; gap: 1rem; }
.card-meta__name { font-family: var(--font-heading); font-weight: 500; font-size: var(--fs-md); letter-spacing: 0.04em; text-transform: uppercase; }
.card-meta__place { font-size: var(--fs-meta); color: var(--moss); }

/* ---- Enlaces de acción ---- */
.link-action {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-heading);
  font-size: var(--fs-meta);
  letter-spacing: 0.005em;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid currentColor;
  transition: gap var(--dur-s) var(--ease);
}
.link-action:hover { gap: 1rem; }
.link-action__arrow { transition: transform var(--dur-s) var(--ease); }
.link-action:hover .link-action__arrow { transform: translateX(3px); }

.btn-solid {
  display: inline-flex; align-items: center; gap: 0.75rem;
  background: var(--ink); color: var(--cream);
  padding: 0.9rem 1.6rem;
  font-family: var(--font-heading);
  font-size: var(--fs-meta);
  letter-spacing: 0.005em;
  transition: background var(--dur-s) var(--ease);
}
.btn-solid:hover { background: var(--moss); }

/* ============================================================
   Principios — composición editorial asimétrica, sin numerar
   ============================================================ */
.principles {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(2.5rem, 5vw, 4rem) clamp(1rem, 2.5vw, 2rem);
}
.principle__text { margin-top: 0.7rem; max-width: 34ch; }

/* Ritmo asimétrico: cada idea entra en una columna y una altura distinta. */
.principles > * { grid-column: 1 / 13; }
@media (min-width: 900px) {
  .principles > *:nth-child(3n+1) { grid-column: 1 / 5; }
  .principles > *:nth-child(3n+2) { grid-column: 6 / 10; margin-top: clamp(2.5rem, 5vw, 4.5rem); }
  .principles > *:nth-child(3n+3) { grid-column: 9 / 13; margin-top: clamp(5rem, 10vw, 9rem); }
}

/* ============================================================
   Valores con imagen — ritmo editorial, sin retícula de tarjetas
   Cada valor cambia de lado, de ancho y de proporción de imagen.
   ============================================================ */
.values {
  margin-top: clamp(4.5rem, 10vw, 9rem);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(3rem, 7vw, 5rem);
}

.value { display: grid; gap: clamp(1rem, 2vw, 1.4rem); }
.value__media { position: relative; overflow: hidden; aspect-ratio: 1 / 1; background: rgba(49, 44, 40, 0.04); }
.value__media img {
  display: block; width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--dur-l) var(--ease);
}
.value__text .t-body { margin-top: 0.55rem; max-width: 38ch; }

/* Entrada escalonada: solo opacidad y un desplazamiento corto. */
.value[data-reveal] { transition-delay: 0ms; }
.value--b[data-reveal] { transition-delay: 90ms; }
.value--c[data-reveal] { transition-delay: 180ms; }

@media (prefers-reduced-motion: reduce) {
  .value[data-reveal],
  .value--b[data-reveal],
  .value--c[data-reveal] { transition-delay: 0ms !important; }
}

@media (min-width: 900px) {
  /* Los tres en una sola fila, con aire generoso y un leve escalonado
     vertical para que no se lean como una tira de tarjetas iguales. */
  .values {
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: start;
  }
  .value--b { margin-top: clamp(1.5rem, 3vw, 2.75rem); }
  .value--c { margin-top: clamp(3rem, 6vw, 5.5rem); }
}

/* ============================================================
   Página de proyecto — Wouters, Maui
   ============================================================ */

/* Apertura limpia: solo el nombre, centrado en pantalla. */
.project-title {
  min-height: 62svh;
  display: grid;
  place-items: center;
  padding: clamp(9rem, 15vw, 12rem) var(--gutter) clamp(4rem, 8vw, 7rem);
  text-align: center;
}
.project-title__name { text-transform: uppercase; letter-spacing: 0.02em; }

/* Galería: una o dos columnas según la proporción del render.
   La imagen manda; nunca se estira ni se le impone una altura. */
.gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 6vw, 5.5rem) clamp(1.25rem, 2.5vw, 2rem);
  align-items: start;
}
.shot { margin: 0; }
.shot img {
  display: block;
  width: 100%;
  height: auto;
}

@media (min-width: 900px) {
  .gallery { grid-template-columns: repeat(2, 1fr); }
  /* Vertical suelto: se limita su altura para que la fila no quede coja.
     Sigue con height auto, así que no se deforma. */
  .shot--tall img { max-height: 32rem; width: auto; }
  /* Vertical a ancho completo (fachada de Maui): se centra y su altura se
     limita a la pantalla; mantiene height auto, así que no se deforma. */
  .shot--full.shot--tall img { max-height: min(85svh, 50rem); margin-inline: auto; }
  /* Los panorámicos y las aéreas ocupan el ancho completo; el resto,
     media columna, y se emparejan de dos en dos. */
  .shot--full { grid-column: 1 / -1; }
  /* Render cuadrado emparejado con uno 4:3: se encuadra a 4:3 con recorte
     (sin deformar) para que la fila quede alineada y sin hueco. El original
     no se toca; en móvil, a una columna, se ve completo. */
  .shot--crop43 img { aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 55%; }
}

/* Introducción: concepto a un lado, datos esenciales al otro.
   Sin cajas: una sola línea fina abre el bloque de datos. */
.project-intro {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.project-intro__concept .t-meta { margin-top: 0.85rem; }
.project-facts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.35rem clamp(1.5rem, 3vw, 2.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.project-facts dt {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: var(--fs-meta);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--moss);
}
.project-facts dd { margin-top: 0.3rem; font-size: var(--fs-body); line-height: 1.5; color: var(--ink); }
.project-facts__price { font-family: var(--font-heading); font-weight: 500; font-size: var(--fs-md); }
@media (min-width: 560px) {
  .project-facts { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .project-intro { grid-template-columns: 5fr 7fr; }
}

.project-facts__status { text-transform: uppercase; letter-spacing: 0.04em; }

/* Estado de cierre (proyecto vendido): una frase sobre una línea fina,
   en el lugar que ocupa la disponibilidad en las demás fichas. */
.project-state .t-sub { padding-top: clamp(1.5rem, 3vw, 2.25rem); border-top: 1px solid var(--line); max-width: none; }

/* Calidades: título a la izquierda, texto corrido en dos columnas. */
.qualities {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: start;
}
.qualities__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.15rem clamp(1.5rem, 3vw, 2.75rem);
  max-width: none;
}
.qualities__list li { max-width: 46ch; }
@media (min-width: 700px) {
  .qualities__list { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .qualities { grid-template-columns: 5fr 7fr; }
}

/* Pisos disponibles: tabla semántica, sin cajas ni rellenos decorativos. */
/* Cabecera de sección con acción a la derecha: el CTA acompaña al título
   sin repetirse en cada fila de la tabla. */
.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem 2rem;
}
.section-head__cta { align-self: center; }

.flats { margin-top: clamp(2rem, 4vw, 3rem); }
.flats__table { width: 100%; border-collapse: collapse; text-align: left; }
.flats__caption { text-align: left; font-size: var(--fs-meta); color: var(--moss); padding-bottom: 1.25rem; }
.flats__table th,
.flats__table td { padding: 0.95rem 1.5rem 0.95rem 0; vertical-align: baseline; }
.flats__table thead th {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: var(--fs-meta);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--moss);
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--line);
}
.flats__table tbody tr { border-bottom: 1px solid var(--line); }
.flats__table tbody th {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: var(--fs-md);
  white-space: nowrap;
}
.flats__table tbody td { font-size: var(--fs-body); color: var(--ink-76); }
.flats__table tbody td:nth-child(3) { font-family: var(--font-heading); font-weight: 500; color: var(--ink); white-space: nowrap; }
.flats__table td:last-child, .flats__table th:last-child { padding-right: 0; }

/* Mismo ancho de columnas en viviendas, parkings y trasteros: las tres tablas se alinean. */
.flats__table { table-layout: fixed; }
.flats__table thead th:nth-child(1) { width: 22%; }
.flats__table thead th:nth-child(2) { width: 18%; }
.flats__table thead th:nth-child(3) { width: 18%; }
.flats__table--3 thead th:nth-child(3) { width: auto; }

/* Reservadas y permutas: la fila se atenúa y la columna de precio muestra el
   estado comercial tal cual (RESERVADO o PERMUTA). */
.flats__table tbody tr.is-reserved th,
.flats__table tbody tr.is-reserved td,
.flats__table tbody tr.is-permuta th,
.flats__table tbody tr.is-permuta td { color: var(--moss); }
.flats__table tbody td.flats__reserved {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: var(--fs-meta);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--moss);
}

/* Tipo de vivienda (Piso / Dúplex) bajo su referencia, en Tremelo. */
.flats__type {
  display: block;
  margin-top: 0.2rem;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: var(--fs-meta);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--moss);
}

/* Móvil: la misma tabla se lee como lista etiquetada, sin scroll lateral. */
@media (max-width: 768px) {
  .flats__table, .flats__table tbody, .flats__table tr, .flats__table th, .flats__table td { display: block; }
  .flats__caption { display: block; }
  .flats__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .flats__table tbody tr { padding-block: 1.35rem; }
  .flats__table tbody th { padding: 0 0 0.55rem; }
  .flats__table tbody td { padding: 0.2rem 0; display: flex; gap: 0.75rem; }
  .flats__table tbody td::before {
    content: attr(data-col);
    flex: 0 0 6.5rem;
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: var(--fs-meta);
    letter-spacing: 0.005em;
    text-transform: none;
    color: var(--moss);
  }
  .flats__table tbody td:nth-child(3) { white-space: normal; }
}

/* ============================================================
   Declaraciones de Visión + Valores — dos bloques desalineados
   ============================================================ */
.statements { display: grid; gap: clamp(3rem, 7vw, 6rem); }
.statement { display: grid; grid-template-columns: 1fr; gap: clamp(0.75rem, 2vw, 1.25rem); }
.statement__tag { letter-spacing: 0.01em; overflow-wrap: break-word; }
.statement__body { display: grid; gap: 1.1rem; max-width: 62ch; }

@media (min-width: 900px) {
  .statements { grid-template-columns: repeat(12, 1fr); }
  .statement { grid-column: 1 / 9; grid-template-columns: minmax(11.5rem, 3fr) 8fr; gap: clamp(1.5rem, 3vw, 2.5rem); }
  .statement--offset { grid-column: 4 / 13; }
}

/* ============================================================
   Equipo
   ============================================================ */
.team {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
.portrait {
  aspect-ratio: 4/5;
  background: rgba(49, 44, 40, 0.04);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.portrait img { width: 100%; height: 100%; object-fit: cover; }
.portrait__initials { font-family: var(--font-heading); font-weight: 500; font-size: 1.7rem; letter-spacing: 0.02em; color: var(--moss); }
.portrait--pending { border: 1px solid var(--line); }
.team__name { margin-top: 0.9rem; font-family: var(--font-heading); font-weight: 500; font-size: var(--fs-body); }
.team__role { font-size: var(--fs-meta); color: var(--moss); margin-top: 0.1rem; }

.partners { display: flex; flex-wrap: wrap; gap: clamp(1.5rem, 4vw, 3rem); align-items: baseline; }
.partners a {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: var(--fs-md);
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.3rem;
  transition: border-color var(--dur-s) var(--ease);
}
.partners a:hover { border-bottom-color: var(--ink); }

/* ============================================================
   Proyectos — grid editorial
   ============================================================ */
.project-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: clamp(1.5rem, 3vw, 3rem);
  row-gap: clamp(3rem, 6vw, 5rem);
}
.project-card { cursor: pointer; }
.project-card .frame { aspect-ratio: 4/5; }
.project-card__name { font-family: var(--font-heading); font-weight: 500; font-size: var(--fs-lg); letter-spacing: -0.018em; margin-top: 1rem; }
.project-card__meta { display: flex; justify-content: space-between; gap: 1rem; margin-top: 0.3rem; font-size: var(--fs-meta); color: var(--moss); }

/* ---- Panel lateral de proyecto ---- */
.panel-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(49,44,40,0.45);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-m) var(--ease);
}
.panel-overlay.is-open { opacity: 1; pointer-events: auto; }

.panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 201;
  width: min(920px, 92vw);
  background: var(--cream);
  transform: translateX(100%);
  transition: transform var(--dur-l) var(--ease);
  overflow-y: auto;
  padding: clamp(1.5rem, 4vw, 3.5rem);
}
.panel.is-open { transform: translateX(0); }

.panel__close {
  position: sticky; top: 0; float: right;
  font-family: var(--font-heading);
  font-size: var(--fs-meta);
  display: flex; align-items: center; gap: 0.5rem;
  background: var(--cream); padding: 0.5rem 0 1.5rem;
}
/* Una sola zona visual: la portada ocupa todo el ancho del panel. */
.panel__gallery { clear: both; }
.panel__gallery .frame { aspect-ratio: 16/10; }
/* En pantallas bajas la portada cede altura para que los CTA,
   situados bajo el nombre, se vean sin hacer scroll. */
.panel__gallery .frame { max-height: 48svh; }
.panel__name { font-family: var(--font-heading); font-weight: 500; font-size: var(--fs-lg); letter-spacing: 0.02em; text-transform: uppercase; margin-top: 2.25rem; }
.panel__place { color: var(--moss); font-size: var(--fs-meta); margin-top: 0.45rem; }
.panel__text { margin-top: 1.6rem; max-width: 56ch; font-size: var(--fs-body); line-height: 1.7; text-wrap: pretty; }
.panel__text p { margin: 0; }
.panel__text p + p { margin-top: 0.35em; }

/* Escritorio y tableta: el panel es una columna flexible de alto fijo. La
   portada toma su proporción ideal (16:10 del ancho útil) y cede altura en
   ventanas bajas, de modo que nombre, dirección, botones y texto se ven
   completos al abrirlo, sin scroll. En móvil se mantiene el desplazamiento. */
@media (min-width: 721px) {
  .panel {
    --panel-inner: calc(min(920px, 92vw) - 2 * clamp(1.5rem, 4vw, 3.5rem));
    display: flex;
    flex-direction: column;
  }
  .panel > * { flex-shrink: 0; }
  .panel__close { float: none; align-self: flex-end; }
  .panel .panel__gallery {
    flex: 0 1 calc(var(--panel-inner) * 0.625);
    min-height: 8rem;
    display: flex;
  }
  .panel .panel__gallery .frame { flex: 1; aspect-ratio: auto; max-height: none; }
}
@media (min-width: 721px) and (max-height: 760px) {
  .panel { padding-block: 1.25rem; }
  .panel__close { padding-bottom: 0.75rem; }
  .panel__name { margin-top: 1.25rem; }
  .panel .panel__actions { margin-top: 1.1rem; }
  .panel__text { margin-top: 1.1rem; }
}
.panel .btn-solid { margin-top: 2.25rem; }
.panel .btn-solid[hidden] { display: none; }

/* ============================================================
   Nosotros — intro
   ============================================================ */
/* El titular lleva un salto forzado tras "personas,": se ajusta su cuerpo
   para que las dos líneas quepan en la columna sin partirse una tercera vez. */
.intro-grid .t-lede { text-wrap: balance; }
.intro-grid .t-head { font-size: clamp(1.3rem, 0.42rem + 2.1vw, 2.2rem); }

.intro-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

/* ============================================================
   Nosotros — composición editorial (referencia PDF sept 2026)
   Prefijo ab- (about) para no alcanzar a otras páginas. Separación
   texto ↔ imagen con el mismo token que Inicio y Servicios.
   ============================================================ */
.ab-media { margin: 0; }
.ab-media img { display: block; width: 100%; height: auto; }
/* Recorte suave solo donde el PDF lo encuadra distinto (oficinas). */
.ab-media--crop img { height: 100%; object-fit: cover; }

.ab-top__grid { display: grid; gap: clamp(2.5rem, 6vw, 4rem); }
.ab-top__intro .t-head { font-size: clamp(1.3rem, 0.42rem + 2.1vw, 2.2rem); }
.ab-top__lede { margin-top: 1.75rem; max-width: 46ch; }
.ab-top__lede p { margin: 0; }
.ab-top__photo-c { aspect-ratio: 4 / 5; overflow: hidden; max-width: 34rem; }
/* Encuadres de «Nosotros v3» (molokai-home-canva.pptx.pdf), medidos sobre el
   PDF: cada foto conserva su proporción y se recorta, sin deformar, al marco
   que muestra el diseño. El zoom leve reproduce el encuadre del PDF. */
.ab-top__photo-a { aspect-ratio: 4 / 5; overflow: hidden; }
.ab-top__photo-b { aspect-ratio: 1242 / 916; overflow: hidden; }
.ab-top__photo-b img { object-position: 50% 32%; }
.ab-top__photo-c { aspect-ratio: 1000 / 1260; }
.ab-top__photo-c img { transform: scale(1.04); transform-origin: 88% 0%; }
.ab-wide { aspect-ratio: 2555 / 1469; overflow: hidden; }
.ab-quad__media { aspect-ratio: 1035 / 1459; overflow: hidden; }
.ab-quad__media img { object-position: 50% 45%; transform: scale(1.1); transform-origin: 50% 45%; }
.ab-team__photo { aspect-ratio: 1605 / 810; overflow: hidden; }
.ab-team__photo img { object-position: 50% 100%; }

.ab-statements { display: grid; gap: clamp(2.5rem, 6vw, 5rem); margin-top: clamp(2rem, 5vw, 4rem); }
.ab-statement { display: grid; gap: 0.75rem; }
.ab-statement__tag { letter-spacing: 0.01em; overflow-wrap: anywhere; }
.ab-statement__body { display: grid; gap: 1.1rem; }
.ab-statement__body .t-body { max-width: 64ch; }

.ab-why__grid { display: grid; gap: clamp(2.75rem, 6vw, 5rem); margin-top: clamp(3rem, 7vw, 6rem); }
.ab-why__text { margin-top: 0.7rem; max-width: 44ch; }

.ab-value__text { margin-top: 0.7rem; max-width: 46ch; }
.ab-pair { display: grid; gap: 1.5rem; }
.ab-pair__media { aspect-ratio: 1266 / 652; overflow: hidden; }
/* Ritmo vertical medido sobre el PDF a 1440px. */
.ab-values { padding-top: clamp(3rem, 4.3vw, 4rem); padding-bottom: 0; }
.ab-wide { margin-top: clamp(2.5rem, 4.3vw, 4rem); }
.ab-quad { display: grid; gap: 1.75rem; margin-top: clamp(3.5rem, 7.4vw, 6.75rem); }
.ab-quad__media { max-width: 34rem; }

.ab-team__photo { max-width: 48rem; margin-inline: auto; }
.ab-team { padding-top: clamp(4.5rem, 8.5vw, 7.75rem); padding-bottom: 0; }
.ab-team__title { margin-top: clamp(3.5rem, 7.7vw, 7rem); }
.ab-partners { padding-top: clamp(2.5rem, 3.4vw, 3.1rem); }

@media (min-width: 900px) {
  /* Bloque superior según el PDF v3: la foto vertical de la derecha arranca a
     la altura de la introducción y baja junto a la foto del logotipo; Visión
     + Valores termina a la altura del borde inferior de su imagen. */
  .ab-top__grid {
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    grid-template-areas:
      "intro  photoA"
      "photoB photoA"
      "vision photoC";
    column-gap: var(--editorial-media-copy-gap);
    row-gap: clamp(2.5rem, 5vw, 4.5rem);
    align-items: start;
  }
  .ab-top__intro   { grid-area: intro; align-self: start; }
  .ab-top__photo-a { grid-area: photoA; align-self: start; }
  .ab-top__photo-b { grid-area: photoB; width: 85%; }
  .ab-top__vision  { grid-area: vision; align-self: end; }
  .ab-top__photo-c { grid-area: photoC; max-width: none; align-self: end; }

  .ab-why { max-width: 58rem; margin-inline-start: clamp(0rem, 12vw, 15rem); }
  .ab-why__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(3rem, 8vw, 8rem); }

  /* Texto a la izquierda, imagen a la derecha; orden DOM imagen → texto. */
  .ab-pair {
    grid-template-columns: minmax(0, 22rem) minmax(0, 40rem);
    grid-template-areas: "text media";
    column-gap: var(--editorial-media-copy-gap);
    justify-content: center;
    align-items: end;
  }
  .ab-pair__media { grid-area: media; }
  .ab-pair__text  { grid-area: text; }

  /* Imagen central con dos valores a cada lado: arriba alineados con su
     borde superior, abajo con su borde inferior. */
  .ab-quad {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr);
    grid-template-areas:
      "a media b"
      "c media d";
    column-gap: var(--editorial-media-copy-gap);
    row-gap: 2rem;
  }
  .ab-quad__media { grid-area: media; max-width: none; }
  .ab-quad__item--a { grid-area: a; align-self: start; }
  .ab-quad__item--b { grid-area: b; align-self: start; }
  .ab-quad__item--c { grid-area: c; align-self: end; }
  .ab-quad__item--d { grid-area: d; align-self: end; }

  .ab-team__photo { max-width: 60%; }

}

/* Equipo: cuatro retratos. En tableta, dos filas de dos; en escritorio, una
   sola fila de cuatro. Nunca queda una celda vacía.
   Doble clase para ganar a las reglas genéricas de .team en móvil. */
@media (min-width: 600px) {
  .team.team--roster { grid-template-columns: repeat(2, minmax(0, 18rem)); }
}
@media (min-width: 1024px) {
  .team.team--roster { grid-template-columns: repeat(4, minmax(0, 18rem)); }
}

/* Etiqueta y texto de Visión en paralelo solo con ancho suficiente;
   por debajo la etiqueta va encima y el párrafo conserva su medida. */
@media (min-width: 1200px) {
  .ab-statement { grid-template-columns: minmax(9.5rem, 12rem) minmax(0, 1fr); column-gap: clamp(1.25rem, 2.5vw, 2rem); }
}

/* ============================================================
   Contacto
   ============================================================ */
.contact-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}
.contact-list { margin-top: 2.5rem; display: flex; flex-direction: column; gap: 1.35rem; }
.contact-list dt { font-size: var(--fs-meta); color: var(--moss); }
.contact-list dd { font-family: var(--font-heading); font-weight: 500; font-size: var(--fs-md); margin-top: 0.2rem; line-height: 1.35; }
.contact-list a { transition: opacity var(--dur-s) var(--ease); }
.contact-list a:hover { opacity: 0.6; }

.form-row { border-bottom: 1px solid var(--line); padding-block: 0.85rem; }
.form-row label { display: block; font-size: var(--fs-meta); color: var(--moss); margin-bottom: 0.35rem; }
.form-row input, .form-row textarea { width: 100%; background: transparent; border: none; font-family: var(--font-sans); font-size: var(--fs-body); outline: none; resize: none; }
.form-row input::placeholder, .form-row textarea::placeholder { color: rgba(130, 123, 107, 0.75); }
.form-row:focus-within { border-bottom-color: var(--ink); }
/* Botón secundario: mismo peso tipográfico que el sólido, sin relleno. */
.btn-line {
  display: inline-flex; align-items: center; gap: 0.75rem;
  padding: 0.9rem 1.6rem;
  font-family: var(--font-heading);
  font-size: var(--fs-meta);
  letter-spacing: 0.005em;
  border: 1px solid var(--line);
  transition: border-color var(--dur-s) var(--ease), color var(--dur-s) var(--ease);
}
.btn-line:hover { border-color: var(--ink); }
/* Mismo alto que el sólido: el borde se descuenta del relleno. */
.btn-line { padding: calc(0.9rem - 1px) calc(1.6rem - 1px); }
.btn-line:focus-visible, .btn-solid:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }
/* Los CTA del panel van bajo nombre y ubicación, antes del texto,
   y comparten alto porque la fila los estira. */
.panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  align-items: stretch;
  margin-top: 1.5rem;
}
@media (min-width: 768px) {
  .panel__actions { margin-top: 1.75rem; }
}
.panel__actions .btn-solid { margin-top: 0; }
.panel__actions .btn-solid[hidden], .panel__actions .btn-line[hidden] { display: none; }

/* Flecha de bajada en las fichas de proyecto: mismo gesto que la del hero,
   en tinta y entre el título y la primera imagen. */
.project-down {
  display: inline-block;
  margin-top: clamp(2rem, 6vh, 3.5rem);
  font-family: var(--font-heading);
  font-size: 1rem;
  line-height: 1;
  color: var(--ink);
  padding: 0.75rem 1.25rem;
  opacity: 0;
  animation: flecha-entrada 2200ms ease-out 500ms forwards;
}
.project-down:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .project-down { opacity: 0.8; animation: none; }
}

/* Cierre de ficha: la solicitud, con aire, antes de los enlaces de contacto. */
.lead-final { padding-top: clamp(3.5rem, 8vw, 6rem); padding-bottom: clamp(1rem, 2vw, 1.5rem); }

/* ============================================================
   Actualidad — mismas piezas a dos columnas que Proyectos, sin panel
   ============================================================ */
.news { display: grid; gap: clamp(3.5rem, 9vw, 7rem); }
.news__item {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: center;
}
/* Logos de cada medio (fondo tinta propio, 3:1 o cuadrado) en una caja
   común del mismo tono: se muestran enteros, sin recorte ni deformación. */
.news__media { margin: 0; background: var(--ink); aspect-ratio: 3 / 1; overflow: hidden; }
.news__media img { display: block; width: 100%; height: 100%; object-fit: contain; }
.news__date { font-size: var(--fs-meta); color: var(--moss); }
.news__name {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: var(--fs-lg);
  letter-spacing: -0.018em;
  margin-top: 0.4rem;
}
.news__text { margin-top: 0.85rem; }
.news__link { margin-top: 1.5rem; display: inline-flex; }
@media (min-width: 900px) {
  .news__item { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 4.5rem); }
  .news__item:nth-child(even) .news__media { order: -1; }
}

/* ============================================================
   Páginas legales — lectura sobria, medida corta, sin adornos
   ============================================================ */
.legal__doc { max-width: 68ch; }
.legal__title { max-width: 20ch; }
.legal__org { margin-top: 0.75rem; }
.legal__h2 { margin-top: clamp(2.5rem, 5vw, 3.5rem); max-width: 34ch; }
.legal__h3 { margin-top: clamp(1.75rem, 3vw, 2.25rem); }
.legal__p { margin-top: 1rem; max-width: none; }
.legal__list { margin-top: 1rem; display: grid; gap: 0.75rem; }
.legal__list li {
  position: relative;
  padding-left: 1.25rem;
  font-size: var(--fs-body);
  line-height: 1.68;
  color: var(--ink-76);
}
.legal__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.75em;
  width: 0.4rem;
  height: 1px;
  background: var(--moss);
}
.legal a { border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.legal a:hover { border-bottom-color: var(--ink); }

/* ============================================================
   Solicitud de información — diálogo sobre el panel
   Mismo lenguaje que el panel lateral: crema, sin sombras de color.
   ============================================================ */
.modal-overlay {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(49, 44, 40, 0.5);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-m) var(--ease);
}
.modal-overlay.is-open { opacity: 1; pointer-events: auto; }
.modal-overlay[hidden], .modal[hidden] { display: none; }
.modal {
  position: fixed; z-index: 301;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(30rem, calc(100vw - 2 * var(--gutter)));
  max-height: min(44rem, calc(100vh - 3rem));
  overflow-y: auto;
  background: var(--cream);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  opacity: 0;
  transition: opacity var(--dur-m) var(--ease);
}
.modal.is-open { opacity: 1; }
.modal__close {
  float: right;
  font-family: var(--font-heading);
  font-size: var(--fs-meta);
  padding-bottom: 1rem;
}
.modal__subject { margin-top: 0.5rem; }
.lead-form { margin-top: clamp(1.5rem, 3vw, 2rem); }
.lead-form__trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.form-error { font-size: var(--fs-meta); color: var(--ink); margin-top: 0.4rem; }
.form-error:empty { display: none; }
.form-select {
  width: 100%;
  background: transparent;
  border: none;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  color: var(--ink);
  padding: 0;
  outline: none;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--moss) 50%), linear-gradient(135deg, var(--moss) 50%, transparent 50%);
  background-position: calc(100% - 9px) calc(50% + 1px), calc(100% - 4px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 1.5rem;
}
.form-row--check { border-bottom: none; padding-top: 1.25rem; }
.lead-consent { display: flex; gap: 0.75rem; align-items: flex-start; font-size: var(--fs-body); color: var(--ink-76); margin-bottom: 0; }
.lead-consent input { width: auto; flex: none; margin-top: 0.3rem; accent-color: var(--ink); }
.lead-form__legal { margin-top: 0.6rem; }
.lead-form__legal a { border-bottom: 1px solid var(--line); }
.lead-form__legal a:hover { border-bottom-color: var(--ink); }
.lead-form__submit { margin-top: 1.5rem; }
.lead-form__submit[disabled] { opacity: 0.55; cursor: default; }
.lead-form__status { font-size: var(--fs-body); color: var(--ink-76); margin-top: 1rem; max-width: 40ch; }
.lead-form__status:empty { display: none; }
.lead-form--sent .form-row, .lead-form--sent .lead-form__submit { display: none; }
.lead-form--sent .lead-form__status { font-family: var(--font-heading); color: var(--ink); }

/* Pieza de Inicio completa como enlace: sin cambios visuales. */
.featured__link { display: block; color: inherit; }
.featured__link:focus-visible { outline: 1px solid var(--ink); outline-offset: 6px; }

.form-note { font-size: var(--fs-meta); color: var(--moss); margin-top: 1.25rem; max-width: min(58ch, 100%); text-wrap: balance; }

.contact-lede { max-width: 44ch; text-wrap: balance; }
.contact-address { max-width: 34ch; text-wrap: balance; }
.contact-cta { display: flex; gap: clamp(1.25rem, 3vw, 2.25rem); margin-top: 2.25rem; flex-wrap: wrap; }

/* ============================================================
   Simulador de hipoteca
   ============================================================ */
.sim {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: start;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.sim__fields { display: flex; flex-direction: column; gap: 0.25rem; }
.sim__field { border-bottom: 1px solid var(--line); padding-block: 0.9rem; }
.sim__field:focus-within { border-bottom-color: var(--ink); }
.sim__field label { display: block; font-size: var(--fs-meta); color: var(--moss); margin-bottom: 0.35rem; }
.sim__field input {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: var(--fs-md);
  color: var(--ink);
}
.sim__field input::placeholder { color: rgba(130, 123, 107, 0.7); font-weight: 400; }
/* Sin flechas de incremento: la cifra manda, no el control. */
.sim__field input::-webkit-outer-spin-button,
.sim__field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sim__field input[type=number] { -moz-appearance: textfield; }

.sim__error { display: none; font-size: var(--fs-meta); color: var(--ink); margin-top: 0.4rem; }
.sim__error.is-visible { display: block; }
.sim__global { display: none; font-size: var(--fs-meta); color: var(--ink); margin-top: 1.25rem; }
.sim__global.is-visible { display: block; }

.sim__actions { display: flex; align-items: center; gap: clamp(1.25rem, 3vw, 2rem); margin-top: 2rem; flex-wrap: wrap; }

.sim__results { display: flex; flex-direction: column; gap: clamp(1.75rem, 3.5vw, 2.75rem); }
.sim__result-label { font-size: var(--fs-meta); color: var(--moss); }
.sim__result-value {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(1.35rem, 1rem + 1.5vw, 2.1rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-top: 0.35rem;
}
.sim__result-note { font-size: var(--fs-meta); color: var(--moss); margin-top: 0.3rem; }
.sim__legal { font-size: var(--fs-meta); color: var(--moss); margin-top: clamp(2.5rem, 5vw, 4rem); max-width: 60ch; text-wrap: pretty; }

/* ============================================================
   Próximas obras
   ============================================================ */
.upcoming { display: flex; flex-direction: column; gap: clamp(3.5rem, 8vw, 7rem); margin-top: clamp(2.5rem, 5vw, 4rem); }
.upcoming__item { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: baseline; }
.upcoming__name {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: var(--fs-xl);
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-wrap: balance;
}
.upcoming__place { font-size: var(--fs-lede); color: var(--moss); margin-top: 0.6rem; }
.upcoming__specs { display: flex; flex-direction: column; gap: 0.5rem; }
.upcoming__spec { font-family: var(--font-heading); font-weight: 500; font-size: var(--fs-md); }

/* ============================================================
   Servicios — flujo editorial: los textos ocupan medidas cortas y
   las tres fotografías marcan el ritmo, sin tarjetas ni separadores.
   ============================================================ */
.service__name {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: var(--fs-md);
  line-height: 1.2;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
/* Servicios: filas editoriales de dos columnas. La foto cambia de lado en
   cada fila y los servicios se leen al lado, nunca debajo ni encima. */
.svc-rows { display: grid; gap: clamp(3rem, 7vw, 5.5rem); margin-top: clamp(2.5rem, 6vw, 4.5rem); }
.svc-row { display: grid; gap: clamp(1.75rem, 4vw, 2.5rem); align-items: start; }
.svc-group { display: grid; gap: clamp(1.75rem, 3vw, 2.5rem); }
.svc-shot { margin: 0; }
.svc-shot img { display: block; width: 100%; height: auto; }
.svc-title { margin-bottom: 0; }
@media (min-width: 900px) {
  /* Misma separación imagen ↔ texto que las piezas editoriales de Inicio.
     Como en la referencia, el bloque de texto termina a ras del borde
     inferior de su fotografía. */
  .svc-row { grid-template-columns: repeat(2, 1fr); column-gap: var(--editorial-media-copy-gap); align-items: end; }
  /* La foto se coloca a la derecha sin cambiar el orden del documento,
     así en móvil siempre se lee foto y después sus servicios. */
  .svc-row--photo-right .svc-shot { order: 2; }
  /* Como en la referencia: con la foto a la derecha, el texto se alinea hacia ella. */
  .svc-row--photo-right .svc-group { justify-items: end; text-align: right; }
}
.svc { max-width: 46ch; }
.svc-row .svc { max-width: 46ch; }
.svc .t-body { margin-top: 0.65rem; text-wrap: balance; }



/* ============================================================
   Bloque de cierre
   ============================================================ */
.closing {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.closing__text { max-width: 30ch; }
.closing__links { display: flex; gap: clamp(1.25rem, 3vw, 2.25rem); flex-wrap: wrap; }

/* A partir de 1024 px la frase de cierre va en una sola línea: se le da
   todo el ancho que necesita y el tamaño baja de forma fluida. */
@media (min-width: 1024px) {
  .closing__text {
    max-width: none;
    flex: 1 1 auto;
    white-space: nowrap;
    font-size: clamp(1rem, 0.6rem + 0.95vw, 1.55rem);
  }
  .closing__links { flex: none; }
}

/* ============================================================
   Footer
   ============================================================ */
.footer {
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: var(--fs-meta);
  color: var(--moss);
}
.footer__mark {
  display: block;
  height: 18px;
  aspect-ratio: 807 / 141.95;
  background-color: var(--ink);
  -webkit-mask: url('../public/assets/img/logo-molokai.svg') left center / contain no-repeat;
  mask: url('../public/assets/img/logo-molokai.svg') left center / contain no-repeat;
}
.footer__links { display: flex; gap: clamp(1rem, 2.5vw, 1.75rem); flex-wrap: wrap; }
.footer__links a:hover { color: var(--ink); }
.footer__legal { display: flex; gap: clamp(1rem, 2.5vw, 1.75rem); flex-wrap: wrap; }
.footer__legal a {
  font-family: var(--font-heading);
  font-size: var(--fs-meta);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.footer__legal a:hover { color: var(--ink); }
.footer__social { display: flex; gap: clamp(1rem, 2.5vw, 1.75rem); flex-wrap: wrap; }
.footer__social a {
  font-family: var(--font-heading);
  font-size: var(--fs-meta);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.footer__social a:hover { color: var(--ink); }

/* ============================================================
   Portadas de obra — scroll vertical continuo (Proyectos y Próximas obras)
   ============================================================ */
.works { display: flex; flex-direction: column; gap: 0; }
/* Una sola promoción: no hay nada entre lo que alternar el foco, así que la
   obra ocupa la pantalla centrada en lugar de quedar a media altura. */
.works--single .work { min-height: 78svh; }

/* Cada obra ocupa menos que el viewport, así la anterior y la siguiente
   asoman arriba y abajo. El texto se centra respecto a la portada. */
.work {
  display: grid;
  grid-template-columns: minmax(9rem, 2.6fr) 8fr;
  gap: clamp(1.25rem, 3.5vw, 3.5rem);
  align-items: center;
  min-height: 66svh;
}
.work__name {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: var(--fs-lg);
  line-height: 1.06;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-wrap: balance;
}
.work__place { font-size: var(--fs-meta); color: var(--moss); margin-top: 0.5rem; }

.work__cover {
  position: relative;
  height: clamp(17rem, 58svh, 34rem);
  overflow: hidden;
  background: rgba(49, 44, 40, 0.05);
}

/* La obra centrada en el viewport es la activa: su portada crece y las
   vecinas quedan algo menores y atenuadas. Lo calcula el scroll nativo,
   sin bloquearlo ni añadir controles. */
.works--focus .work {
  opacity: var(--work-op, 1);
  transition: opacity 220ms linear;
}
.works--focus .work__cover {
  transform: scale(var(--work-scale, 1));
  transform-origin: center;
  will-change: transform;
}
.works--focus .work__text {
  transform: scale(var(--work-text-scale, 1));
  transform-origin: left center;
}

@media (prefers-reduced-motion: reduce) {
  .works--focus .work,
  .works--focus .work__cover,
  .works--focus .work__text {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
.work__cover img, .work__cover svg {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur-l) var(--ease);
}
/* Obra sin render definitivo: la foto se difumina por CSS —el archivo
   original queda intacto— y el rótulo se mantiene nítido por encima. */
.work__cover--veiled img {
  filter: blur(14px);
  transform: scale(1.08);
}
.work__cover--veiled::after {
  content: '';
  position: absolute; inset: 0;
  background: rgba(49, 44, 40, 0.46);
  pointer-events: none;
}
.work__soon {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  z-index: 2;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(0.82rem, 0.66rem + 0.6vw, 1.15rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cream);
  text-align: center;
  padding-inline: 1rem;
}

/* Obra con dos fachadas del mismo edificio: una junto a otra a la altura
   de la portada, centradas en el edificio. En móvil se apilan completas. */
.work__cover--pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(0.5rem, 1vw, 0.9rem);
  background: none;
}
.work__facade { position: relative; margin: 0; min-width: 0; height: 100%; overflow: hidden; }
.work__facade img { object-position: 50% 50%; }
/* Calle de cada fachada, abajo a la derecha, con la tipografía de la ubicación. */
.work__facade-place {
  position: absolute;
  right: clamp(0.6rem, 1.2vw, 1rem);
  bottom: clamp(0.5rem, 1vw, 0.85rem);
  font-size: var(--fs-meta);
  line-height: 1.4;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}
/* Mismo cuerpo que la ubicación (escala con ella) para que la palabra
   termine justo donde acaba la primera línea de la dirección. */
.work__status {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: calc(var(--fs-meta) * 1.406);
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-top: 0.66rem;
}

.work[id], [id="contenido"], [id="pisosdisponibleswouters"], [id="ubicacionwouters"], [id="expansion"] { scroll-margin-top: clamp(4rem, 7vw, 6rem); }
.work--clickable { cursor: pointer; }
.work--clickable:hover .work__cover img,
.work--clickable:hover .work__cover svg { transform: scale(1.02); }
.work--clickable:focus-visible { outline: 1px solid var(--ink); outline-offset: 6px; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1080px) {
  .featured__head { grid-column: 1 / 10; }
}

@media (max-width: 900px) {
  .featured__head { grid-column: 1 / 13; margin-top: 0; align-self: auto; }
  .team { grid-template-columns: repeat(2, 1fr); }
  .intro-grid { grid-template-columns: 1fr; }
  .intro-grid .frame { aspect-ratio: 4/5; }
  .contact-grid { grid-template-columns: 1fr; }
  .panel__gallery .frame { aspect-ratio: 4/3; }
}

@media (max-width: 900px) {
  .sim { grid-template-columns: 1fr; }
  .upcoming__item { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* Header compacto por debajo de 1300 px (con menos ancho los ocho enlaces
   ya no caben centrados sin pisar el logo). Ninguna página se oculta: el listado completo
   se despliega en un panel bajo el header, con el mismo sistema tipográfico
   que en escritorio. Se posiciona en absoluto respecto al header (no fixed),
   porque el header sólido lleva backdrop-filter y eso encierra a los hijos
   fixed dentro de su caja. */
@media (max-width: 1299px) {
  .nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .nav__menu-btn { display: block; position: relative; z-index: 2; }
  .nav__menu-btn:focus-visible,
  .nav__links a:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }

  /* Con el menú abierto el header pasa a sólido para que logo, botón y
     panel formen una sola pieza clara. */
  .nav.is-menu-open {
    background: var(--cream);
    backdrop-filter: none;
    color: var(--ink);
    border-bottom-color: var(--line);
  }

  .nav__links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    transform: none;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-height: calc(100svh - 100%);
    overflow-y: auto;
    padding: 0.5rem var(--gutter) 1.5rem;
    background: var(--cream);
    color: var(--ink);
    border-bottom: 1px solid var(--line);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--dur-m) var(--ease), visibility 0s linear var(--dur-m);
  }
  .nav__links.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity var(--dur-m) var(--ease), visibility 0s;
  }
  /* Mismo cuerpo, mayúsculas y tracking que en escritorio; alto táctil
     de 44 px y el enlace activo subrayado como arriba. */
  .nav__links a {
    display: block;
    align-self: flex-start;
    padding: 0.85rem 0 0.75rem;
    font-size: clamp(0.8rem, 0.75rem + 0.3vw, 0.9rem);
  }
  .nav__links a::after { bottom: 0.55rem; }
  .nav__links a:hover::after,
  .nav__links a[aria-current="page"]::after { right: 0; }
}

@media (max-width: 900px) {
  /* Símbolo compacto oficial, sin redibujar ni deformar. */
  .nav__logo {
    height: 30px;
    aspect-ratio: 1 / 1;
    -webkit-mask: url('../public/assets/img/logo-mk-circulo.svg') left center / contain no-repeat;
    mask: url('../public/assets/img/logo-mk-circulo.svg') left center / contain no-repeat;
  }

  /* Portadas a una columna: el nombre necesita el ancho completo. */
  .work { grid-template-columns: 1fr; gap: 1rem; min-height: 62svh; }
  .work__cover { height: clamp(13rem, 44svh, 20rem); }
  .work__cover--pair { height: auto; grid-template-columns: 1fr; }
  .work__facade { height: auto; }
  .work__facade img { height: auto; aspect-ratio: 2752 / 1536; }
  .works--focus .work__text { transform: none; }
}

@media (max-width: 720px) {
  .team { grid-template-columns: repeat(2, 1fr); }
  .project-grid { grid-template-columns: 1fr; }
  .panel { width: 100vw; }
  .work { grid-template-columns: 1fr; gap: 1rem; }
}

/* ============================================================
   Botón flotante de WhatsApp (inyectado desde main.js en todas las páginas)
   Burbuja crema con icono tinta, abajo a la izquierda. Queda por debajo de
   la cabecera, el menú, el panel de proyectos y el formulario (z-index 90),
   así nunca tapa sus controles. La etiqueta «¿Hablamos?» solo aparece en
   escritorio al pasar el cursor o con el foco del teclado.
   ============================================================ */
.wa-float {
  position: fixed;
  left: max(30px, env(safe-area-inset-left));
  bottom: max(30px, env(safe-area-inset-bottom));
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #ece8df;
  color: var(--ink);
  box-shadow: 0 6px 18px rgba(49, 44, 40, 0.18), 0 1px 3px rgba(49, 44, 40, 0.12);
  transition: transform var(--dur-m) var(--ease), box-shadow var(--dur-m) var(--ease);
}
.wa-float__icon { display: block; width: 1.6rem; height: 1.6rem; }
.wa-float__label {
  position: absolute;
  left: calc(100% + 0.75rem);
  top: 50%;
  transform: translate(-0.4rem, -50%);
  white-space: nowrap;
  padding: 0.55rem 0.95rem;
  border-radius: 999px;
  background: #ece8df;
  color: var(--ink);
  font-family: var(--font-heading);
  font-size: var(--fs-meta);
  letter-spacing: 0.02em;
  box-shadow: 0 6px 18px rgba(49, 44, 40, 0.14);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-m) var(--ease), transform var(--dur-m) var(--ease);
}
.wa-float:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(49, 44, 40, 0.22), 0 1px 3px rgba(49, 44, 40, 0.12); }
.wa-float:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .wa-float:hover .wa-float__label,
  .wa-float:focus-visible .wa-float__label { opacity: 1; transform: translate(0, -50%); }
}
/* Móvil: solo la burbuja, a 20 px de los bordes. */
@media (max-width: 768px) {
  .wa-float { left: max(20px, env(safe-area-inset-left)); bottom: max(20px, env(safe-area-inset-bottom)); }
  .wa-float__label { display: none; }
}