/* ══════════════════════════════════════════════════════════════════════
   HERITAGE REAL ESTATE — hoja de estilos
   1. Tokens        5. Hero          9. Proyectos
   2. Base          6. Reel         10. Proceso
   3. Utilidades    7. Manifiesto   11. Contacto
   4. Header        8. Panamá       12. Footer / Motion / Responsive
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1. Tokens ──────────────────────────────────────────────────────── */
:root {
  /* Color — paleta oficial del brandbook Heritage */
  --navy:    #161627;   /* principal de marca — fondos oscuros dominantes */
  --forest:  #164732;   /* verde marca — acentos y superficies secundarias */
  --deep:    #032e20;   /* verde más oscuro de la paleta — profundidad, sombras */
  --cream:   #f6f4f1;   /* fondo claro principal */
  --taupe:   #ab987a;   /* acento cálido de la paleta */

  --ink:     var(--navy);                                        /* texto sobre claro */
  --slate:   color-mix(in srgb, var(--navy) 48%, var(--taupe) 52%); /* texto secundario sobre claro */
  --paper:   #fffefc;
  --mist:    color-mix(in srgb, var(--cream) 88%, var(--navy) 12%); /* fondo claro alterno */
  --sand:    color-mix(in srgb, var(--cream) 72%, var(--taupe) 28%); /* texto secundario sobre oscuro */
  --copper:  var(--taupe);   /* alias de compatibilidad — acento */
  --line:    rgba(22, 22, 39, 0.16);
  --line-d:  rgba(255, 255, 255, 0.18);

  /* Tipografía */
  --serif: 'Cinzel', 'Georgia', serif;
  --sans:  'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --t-body:   clamp(16px, 0.93rem + 0.28vw, 18px);
  --t-lead:   clamp(18px, 1rem + 0.55vw, 22px);
  --t-label:  clamp(12px, 0.72rem + 0.1vw, 13px);
  --t-kicker: clamp(13px, 0.78rem + 0.12vw, 14px);
  --t-h3:     clamp(27px, 1.35rem + 1.5vw, 42px);
  --t-h2:     clamp(38px, 1.9rem + 4vw, 88px);
  --t-h1:     clamp(42px, 1.9rem + 5.2vw, 104px);

  /* Ritmo */
  --pad-x:   clamp(22px, 6vw, 108px);
  --topbar-h: 36px;          /* barra de contacto sobre el header */
  --pad-y:   clamp(84px, 11vh, 168px);
  --radius:  2px;
  --radius-pill: 999px;   /* botones — forma de píldora */
  --ease:    cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── 2. Base ────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-body);
  font-weight: 350;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  /* clip y no hidden: hidden convierte al body en contenedor de scroll
     y eso rompe position:sticky más abajo */
  overflow-x: clip;
}

body.is-locked { overflow: hidden; }

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, dl, dd, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 380;
  font-variation-settings: 'opsz' 144, 'SOFT' 0, 'WONK' 0;
  line-height: 0.98;
  letter-spacing: -0.028em;
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); line-height: 0.92; letter-spacing: -0.038em; }
h2 { font-size: var(--t-h2); line-height: 0.95; letter-spacing: -0.032em; }
h3 { font-size: var(--t-h3); }

em {
  font-style: italic;
  font-weight: 330;
  color: var(--copper);
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.skip {
  position: absolute; z-index: 100; top: 8px; left: 8px;
  padding: 12px 18px; background: var(--navy); color: var(--cream);
  font-size: var(--t-label); transform: translateY(-160%);
  transition: transform 0.25s var(--ease);
}
.skip:focus { transform: none; }

:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: 3px;
}

/* ── 3. Utilidades ──────────────────────────────────────────────────── */
.section { padding: var(--pad-y) var(--pad-x); }

.eyebrow,
.kicker {
  display: flex; align-items: center; gap: 14px;
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--slate);
}
.kicker { font-size: var(--t-kicker); color: var(--copper); }
.kicker i {
  font-style: normal;
  font-family: var(--serif);
  font-size: 1.5em;
  letter-spacing: 0;
  opacity: 0.85;
}
.kicker::after,
.eyebrow::after {
  content: ''; flex: 1; max-width: 96px;
  height: 1px; background: currentColor; opacity: 0.4;
}
.eyebrow.on-dark { color: var(--sand); }
.kicker.on-dark { color: var(--copper); }

.lead { font-size: var(--t-lead); line-height: 1.5; color: var(--slate); }

/* Píldora con contorno fino — sobre foto se ve como una ventana esmerilada
   (blur + fondo oscuro translúcido), sobre fondo claro queda sólida. */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 16px 30px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.4s var(--ease), color 0.4s var(--ease),
              border-color 0.4s var(--ease), box-shadow 0.4s var(--ease),
              transform 0.15s var(--ease);
}
.btn span { font-size: 1.2em; transition: transform 0.4s var(--ease); }
.btn:hover span { transform: translate(2px, -2px); }
.btn-solid { background: var(--cream); color: var(--ink); }
.btn-solid:hover {
  background: var(--copper);
  color: var(--ink);
  border-color: var(--copper);
  box-shadow: 0 0 24px 2px rgba(171, 152, 122, 0.45);
}
.btn-solid:active {
  background: color-mix(in srgb, var(--copper) 80%, black 20%);
  box-shadow: 0 0 14px 1px rgba(171, 152, 122, 0.6);
  transform: scale(0.97);
}

/* Ghost / vidrio esmerilado: fondo oscuro translúcido + contorno claro fino,
   pensado para ir sobre foto o video (hero, CTAs de secciones, formulario).
   Al pasar el cursor o al hacer click se llenan de copper (el acento cálido
   de la marca) con un resplandor — mismo lenguaje en todo el sitio. */
.btn-ghost,
.hero-actions .btn-solid,
.form .btn-solid {
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(10, 13, 28, 0.4);
  color: #fff;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.btn-ghost:hover,
.hero-actions .btn-solid:hover,
.form .btn-solid:hover {
  background: var(--copper);
  border-color: var(--copper);
  color: var(--ink);
  box-shadow: 0 0 30px 3px rgba(171, 152, 122, 0.55);
}
.btn-ghost:active,
.hero-actions .btn-solid:active,
.form .btn-solid:active {
  background: color-mix(in srgb, var(--copper) 80%, black 20%);
  border-color: color-mix(in srgb, var(--copper) 80%, black 20%);
  box-shadow: 0 0 16px 1px rgba(171, 152, 122, 0.75);
  transform: scale(0.97);
}

.link-underline {
  display: inline-flex; align-items: center; gap: 12px;
  padding-bottom: 7px;
  border-bottom: 1px solid currentColor;
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  transition: color 0.35s var(--ease), gap 0.35s var(--ease);
}
.link-underline:hover { color: var(--copper); gap: 18px; }

/* Entrada al hacer scroll — la activa el IntersectionObserver */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.85s var(--ease), transform 0.85s var(--ease);
  transition-delay: calc(var(--d, 0) * 110ms);
}
.reveal.is-in { opacity: 1; transform: none; }

/* Entrada solo con fundido, SIN transform — para tarjetas cuyo fondo se
   mueve con el parallax de [data-parallax] (ver .hero-bg): un transform
   temporal encima del scroll de la animación de entrada se notaría como un
   salto en el fondo, así que estas solo cambian opacidad. */
.reveal-fade {
  opacity: 0;
  transition: opacity 0.9s var(--ease);
  transition-delay: calc(var(--d, 0) * 110ms);
}
.reveal-fade.is-in { opacity: 1; }

/* Entrada al hacer scroll, desde un lado — para tarjetas (p.ej. Proyectos) */
.reveal-side {
  opacity: 0;
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
  transition-delay: calc(var(--d, 0) * 130ms);
}
.reveal-side.side-l { transform: translateX(-64px); }
.reveal-side.side-r { transform: translateX(64px); }
.reveal-side.is-in { opacity: 1; transform: none; }

/* Entrada al cargar — para el contenido visible de entrada (hero).
   Es una animación CSS, no depende de JS: nunca se queda en opacity 0.

   fill-mode es `backwards`, NO `both`: con `both` la animación queda fijada
   para siempre y el elemento sigue siendo un backdrop root, lo que vacía el
   fondo de cualquier `backdrop-filter` de sus hijos — los botones del hero se
   quedaban sin difuminado. El estado final de la animación es idéntico al
   estilo base, así que quitar el relleno hacia adelante no cambia nada visual. */
.rise {
  animation: rise 0.9s var(--ease) backwards;
  animation-delay: calc(var(--d, 0) * 110ms);
}
@keyframes rise {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}

/* ── 4. Barra de contacto ───────────────────────────────────────────────
   Franja fina sobre la cabecera con los datos de Heritage siempre a la
   vista. Se recoge al hacer scroll para no robarle alto al contenido. */
.topbar {
  position: fixed; z-index: 51; top: 0; left: 0; right: 0;
  /* Sin el botón de "Hablemos" —lo cubre el asistente flotante— los datos
     se centran; a la izquierda solos quedaban descolgados. */
  display: flex; align-items: center; justify-content: center; gap: 20px;
  height: var(--topbar-h);
  padding: 0 var(--pad-x);
  background: var(--deep);
  color: var(--sand);
  font-size: 12px;
  letter-spacing: 0.06em;
  transition: transform 0.45s var(--ease);
}
.topbar.is-hidden { transform: translateY(-100%); }

.topbar-datos { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 34px); min-width: 0; }
.topbar-datos a {
  display: inline-flex; align-items: center; gap: 8px;
  white-space: nowrap;
  color: var(--sand);
  transition: color 0.3s var(--ease);
}
.topbar-datos a:hover { color: var(--cream); }
.topbar-ico { width: 14px; height: 14px; flex: none; color: var(--taupe); }


/* ── 4b. Header ─────────────────────────────────────────────────────── */
.site-head {
  position: fixed; z-index: 50; top: var(--topbar-h); left: 0; right: 0;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  padding: 22px var(--pad-x) 18px;
  color: #fff;
  background: rgba(22, 22, 39, 0.22);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: padding 0.45s var(--ease), background 0.45s var(--ease), top 0.45s var(--ease),
              color 0.45s var(--ease), box-shadow 0.45s var(--ease), transform 0.45s var(--ease);
}
/* Al hacer scroll la barra de contacto se recoge y la cabecera ocupa su sitio */
.site-head.is-stuck { top: 0; }
.site-head.is-stuck {
  padding: 12px var(--pad-x) 10px;
  gap: 12px;
  background: rgba(246, 244, 241, 0.86);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: var(--ink);
  box-shadow: 0 1px 0 var(--line);
}
.site-head.is-hidden { transform: translateY(-100%); }

/* Fila 1 — logo, centrado. Son los PNG oficiales del cliente
   (assets/heritage-logo*.png), no una reconstrucción tipográfica.
   Van dos versiones superpuestas: la crema se ve sobre el hero oscuro y la
   navy aparece cuando el header se vuelve crema al hacer scroll. */
.logo { position: relative; display: block; line-height: 0; }
.logo-img {
  display: block;
  height: 58px; width: auto;
  transition: height 0.45s var(--ease), opacity 0.45s var(--ease);
}
.logo-img--navy {
  position: absolute; left: 0; top: 0;
  opacity: 0;
}
.site-head.is-stuck .logo-img { height: 44px; }
.site-head.is-stuck .logo-img--cream { opacity: 0; }
.site-head.is-stuck .logo-img--navy { opacity: 1; }

/* Fila 2 — nav centrada, CTA/burger anclados a la derecha */
.head-row {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 100%;
}
.site-nav { display: flex; gap: 34px; }
.site-nav a {
  position: relative;
  font-size: var(--t-label);
  font-weight: 450;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.86;
  transition: opacity 0.3s var(--ease);
}
.site-nav a::after {
  content: ''; position: absolute; left: 0; bottom: -6px;
  width: 100%; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform 0.45s var(--ease);
}
.site-nav a:hover { opacity: 1; }
.site-nav a:hover::after { transform: scaleX(1); transform-origin: left; }


.burger {
  display: none;
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px;
  padding: 0; border: 1px solid currentColor; background: none;
  color: inherit; cursor: pointer;
}
.burger span {
  display: block; width: 20px; height: 1px; margin: 0 auto;
  background: currentColor;
  transition: transform 0.4s var(--ease), opacity 0.3s var(--ease);
}
.burger span:first-child { transform: translateY(-3px); }
.burger span:last-child { transform: translateY(3px); }
.burger[aria-expanded='true'] span:first-child { transform: translateY(0.5px) rotate(45deg); }
.burger[aria-expanded='true'] span:last-child { transform: translateY(-0.5px) rotate(-45deg); }

/* Menú móvil */
.menu-panel {
  position: fixed; z-index: 45; inset: 0;
  display: flex; flex-direction: column; justify-content: center;
  padding: 110px var(--pad-x) 40px;
  background: var(--navy);
  color: var(--cream);
}
.menu-panel[hidden] { display: none; }
.menu-panel nav { display: grid; gap: 4px; }
.menu-panel nav a {
  display: flex; align-items: baseline; gap: 20px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-d);
  font-family: var(--serif);
  font-size: clamp(34px, 10vw, 56px);
  font-weight: 350;
  letter-spacing: -0.03em;
  opacity: 0;
  transform: translateY(18px);
  animation: menu-in 0.6s var(--ease) forwards;
  animation-delay: calc(var(--i, 0) * 60ms + 90ms);
}
.menu-panel nav a i {
  font-family: var(--sans);
  font-style: normal;
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--copper);
}
@keyframes menu-in { to { opacity: 1; transform: none; } }
/* Pie del menú móvil: los datos de contacto van uno debajo del otro — en
   una sola fila (como estaba con 2 elementos) no caben cuatro líneas. */
.menu-foot {
  display: flex; flex-direction: column; gap: 12px;
  margin-top: auto; padding-top: 30px;
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sand);
}
.menu-foot a { color: var(--cream); }

/* ── 5. Hero ────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-content: center;
  justify-items: center;
  /* El relleno se encoge en pantallas bajas (laptops) para que el hero no
     crezca más que la ventana. Si crece, el fondo deja de cubrirlo y se
     ve la foto de respaldo asomando por abajo. */
  padding: clamp(112px, 14vh, 150px) var(--pad-x) clamp(78px, 12vh, 130px);
  color: #fff;
  text-align: center;
  overflow: hidden;
  /* Ver "VENTANA FIJA" abajo: recorta las capas position:fixed del fondo. */
  -webkit-clip-path: inset(0);
  clip-path: inset(0);
}
.hero-bg { position: absolute; inset: 0; z-index: 0; }

/* ═══ VENTANA FIJA ═════════════════════════════════════════════════════
   El fondo queda COMPLETAMENTE quieto y la sección es el marco que lo
   recorta. Se logra con `position: fixed` (la capa se ancla al viewport)
   más `clip-path: inset(0)` en la sección, que sí recorta elementos fijos
   — cosa que `overflow: hidden` no hace.

   Por qué así y no de otras formas que ya se probaron:
   · `background-attachment: fixed` → iOS Safari lo ignora, el efecto
     desaparecía en iPhone. `position: fixed`, en cambio, sí funciona ahí.
   · Reposicionar la capa con transform desde JS → funciona en todos lados
     pero TIEMBLA: el navegador desplaza la página en el hilo del
     compositor y el script corrige un cuadro después. Esto es CSS puro,
     lo resuelve el compositor, y por eso se ve limpio.
   · OJO: no poner transform/filter/will-change en la sección ni en ningún
     ancestro — crean un containing block y degradan el fixed a absolute,
     matando el efecto.
   ══════════════════════════════════════════════════════════════════════ */
.hero-video,
.hero-frame {
  position: fixed; inset: 0;
  width: 100vw; height: 100vh;
}
.hero-video {
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.8s ease;
  z-index: 1;
}
.hero-video.is-active { opacity: 1; }
.hero-frame {
  background-image: var(--img);
  background-size: cover;
  background-position: center 48%;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 2.4s ease;
}
.hero-frame.is-active { opacity: 1; }
/* Degradado azul-navy (sin verde), más liviano, para que la ciudad se
   siga viendo. Un vignette suave centrado da contraste al texto sin
   ensombrecer toda la foto. */
.hero-veil {
  position: absolute; inset: 0; z-index: 2;
  background:
    radial-gradient(ellipse 62% 46% at 50% 62%, rgba(10, 13, 28, 0.55), transparent 72%),
    linear-gradient(to top, rgba(10, 13, 28, 0.62) 0%, rgba(10, 13, 28, 0.14) 32%, rgba(10, 13, 28, 0.22) 60%, rgba(10, 13, 28, 0.5) 100%);
}

/* Marca del hero — el logo real del cliente (el mismo PNG crema que usa el
   header, así que no descarga nada extra) como filigrana arriba a la
   izquierda. Va con `position: fixed` igual que las capas de fondo para que
   quede quieto al hacer scroll; la sección lo recorta con su clip-path.
   Ver "VENTANA FIJA" arriba — por eso aquí NO puede haber transform.
   z-index 3 lo pone sobre el velo (2) para que se lea limpio, pero sigue
   por debajo del texto porque .hero-bg es su propio contexto de apilado. */
.hero-marca {
  position: fixed; z-index: 3;
  /* Arranca por debajo del header. El header mide ~137px y cuelga de la
     barra de contacto, así que el desplazamiento suma --topbar-h: sin eso,
     en pantallas de ~900px de alto la marca quedaba cortada por arriba. */
  top: calc(var(--topbar-h) + clamp(152px, 17vh, 190px));
  left: var(--pad-x);
  width: clamp(110px, 11.5vw, 190px);
  height: auto;
  opacity: 0.62;
  /* El hero rota entre tres fotos y en una de ellas el logo cae sobre el
     skyline claro, donde el crema se perdía. La sombra lo despega del fondo
     sin meterle una caja detrás (el cliente lo pidió sin fondo).
     El filter va sobre la propia marca, que no tiene hijos: no afecta al
     `position: fixed` de las capas de fondo (ver "VENTANA FIJA"). */
  filter: drop-shadow(0 2px 16px rgba(10, 13, 28, 0.6));
  pointer-events: none;
}
/* El titular del hero va centrado con hasta 900px de ancho, así que por debajo
   de ~1400px ya no queda margen libre a la izquierda y la marca se metería
   detrás del texto. Solo se muestra donde entra limpia. */
@media (max-width: 1399px) {
  .hero-marca { display: none; }
}

.hero-inner {
  position: relative; z-index: 3; max-width: min(100%, 900px);
  margin-top: clamp(0px, 6vh, 80px);
}

.hero-kicker {
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--sand);
}

.hero-type {
  margin: 22px 0 28px;
  font-size: clamp(30px, 1.1rem + 3.6vw, 68px);
  line-height: 1.14;
  text-wrap: balance;
}
.hero-type .line { display: block; }
.hero-type-em .hero-type-txt { color: var(--sand); font-style: italic; font-weight: 330; }
.hero-type-caret {
  display: inline-block;
  width: 2px;
  height: 0.86em;
  margin-left: 3px;
  vertical-align: -0.1em;
  background: currentColor;
  animation: caret-blink 0.9s steps(1) infinite;
}
.hero-type-caret.is-done { animation: caret-blink 0.9s steps(1) infinite 3.2s, caret-fade 0.4s ease 4.2s forwards; }
@keyframes caret-blink { 50% { opacity: 0; } }
@keyframes caret-fade { to { opacity: 0; } }

/* Bandera de Panamá junto al titular */
.flag-pa {
  height: 0.4em;
  width: auto;
  margin-left: 0.22em;
  vertical-align: 0.04em;
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}
.hero-lead {
  max-width: 44ch;
  margin: 0 auto;
  font-size: var(--t-body);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.66);
}
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 40px; }

.hero-meta {
  position: absolute; z-index: 3; left: var(--pad-x); right: var(--pad-x); bottom: 34px;
  display: flex; align-items: flex-end; justify-content: space-between;
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}
.scroll-cue { display: grid; justify-items: center; gap: 12px; }
.scroll-cue i {
  display: block; width: 1px; height: 46px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.9), transparent);
  animation: cue 2.4s var(--ease) infinite;
}
@keyframes cue { 0%,100% { transform: scaleY(1); opacity: 1; } 50% { transform: scaleY(0.45); opacity: 0.5; } }

/* ── 7. Manifiesto ──────────────────────────────────────────────────── */
.manifiesto { position: relative; overflow: hidden; }
.manifiesto::before {
  content: 'H';
  position: absolute; top: -0.1em; right: -0.05em;
  font: 500 42vw/0.72 var(--serif);
  color: rgba(22, 22, 39, 0.035);
  pointer-events: none;
}
.manifiesto-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(40px, 8vw, 120px);
  align-items: end;
  margin-top: clamp(44px, 6vw, 76px);
}
.manifiesto-head .eyebrow { margin-bottom: 16px; }
.manifiesto-text { max-width: 46ch; color: var(--slate); }
.manifiesto-text p + p { margin-top: 20px; }
.manifiesto-text .link-underline { margin-top: 30px; color: var(--ink); }

/* Statement "Heritage is more than real estate" */
.dna {
  position: relative;
  margin-top: clamp(56px, 7vw, 90px);
  padding-top: clamp(36px, 5vw, 56px);
  border-top: 1px solid var(--line);
}
.dna-label {
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--taupe);
  margin-bottom: 22px;
}
.dna-lines {
  display: flex;
  flex-wrap: wrap;
  gap: 12px clamp(28px, 4vw, 56px);
}
.dna-lines li {
  font-family: var(--serif);
  font-size: clamp(19px, 0.9rem + 1vw, 29px);
  font-weight: 400;
  letter-spacing: -0.005em;
  color: var(--ink);
}

.pilares {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: clamp(56px, 8vw, 100px);
  border-top: 1px solid var(--line);
  background: var(--line);
}
.pilares li { padding: 34px 0 0; background: var(--cream); }
.pilares li + li { padding-left: clamp(20px, 3vw, 44px); }
.pilares h3 { font-size: clamp(21px, 1.1rem + 0.7vw, 28px); margin-bottom: 12px; }
.pilares p { max-width: 32ch; color: var(--slate); font-size: 0.95em; }

/* ── Banda de foto a todo el ancho, fija tipo ventana ─────────────────
   Misma ventana fija que el hero (ver bloque "VENTANA FIJA"). */
.banda-foto {
  position: relative;
  height: clamp(280px, 42vw, 520px);
  overflow: hidden;
  background: var(--navy);
  -webkit-clip-path: inset(0);
  clip-path: inset(0);
}
.banda-foto-img {
  position: fixed; inset: 0;
  width: 100vw; height: 100vh;
  background-image: var(--img);
  background-size: cover;
  background-position: center 55%;
  background-repeat: no-repeat;
}
.banda-foto-veil {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(10, 13, 28, 0.28), rgba(10, 13, 28, 0.1) 45%, rgba(10, 13, 28, 0.3));
}

/* ── Portafolio en imágenes — collage con parallax ─────────────────────
   Reusa el mismo patrón de fotos superpuestas + data-parallax que antes
   tenía la sección de Panamá, ahora con fotos reales de los proyectos. */
.portafolio-visual {
  display: grid;
  grid-template-columns: 0.95fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
  background: var(--mist);
  overflow: clip;
}
.pv-collage {
  position: relative;
  height: clamp(420px, 46vw, 560px);
}
.pvc { position: absolute; overflow: hidden; will-change: transform; }
.pvc img { width: 100%; height: 100%; object-fit: cover; }
.pvc-a { width: 46%; height: 68%; left: 0;   top: 0;   z-index: 2; box-shadow: 0 30px 60px rgba(3, 46, 32, 0.24); }
.pvc-b { width: 42%; height: 46%; right: 6%; top: 8%;  z-index: 1; box-shadow: 0 24px 50px rgba(3, 46, 32, 0.2); }
.pvc-c { width: 40%; height: 42%; left: 10%; bottom: 0; z-index: 3; box-shadow: 0 24px 50px rgba(3, 46, 32, 0.22); }
.pvc-d { width: 34%; height: 30%; right: 0;  bottom: 4%; z-index: 1; box-shadow: 0 20px 40px rgba(3, 46, 32, 0.18); }
.pvc-frame {
  position: absolute; z-index: 0;
  left: 4%; bottom: 10%; width: 44%; height: 46%;
  border: 1px solid var(--copper);
  opacity: 0.55;
}
.pv-copy .btn { margin-top: 32px; }

/* ── 7b. The Heritage Standard ─────────────────────────────────────────
   Las clases siguen llamándose .valores/.valor (antes era la sección de
   valores); el nombre público de la sección es The Heritage Standard y son
   los 5 pilares de la experiencia del cliente. */
.valores-head { max-width: 58ch; }
.valores-head h2 { margin-top: 24px; }
.valores-head .lead { margin-top: 22px; }
/* Los 5 pilares en una línea, a modo de firma de la sección */
.valores-resumen {
  margin-top: 26px;
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--taupe);
}

/* Sección con el video de la ciudad de fondo */
.valores {
  position: relative;
  overflow: hidden;
  background: var(--navy);
  color: var(--paper);
}
.valores > *:not(.valores-bg) { position: relative; z-index: 1; }

/* Misma ventana fija que el hero (ver bloque "VENTANA FIJA") */
.valores-bg { position: absolute; inset: 0; z-index: 0; -webkit-clip-path: inset(0); clip-path: inset(0); }
.valores-video {
  position: fixed; inset: 0;
  width: 100vw; height: 100vh;
  object-fit: cover;
  display: block;
}
/* Velo: deja ver el video pero mantiene el texto legible */
.valores-veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(10, 13, 28, 0.82), rgba(10, 13, 28, 0.68) 50%, rgba(10, 13, 28, 0.86)),
    linear-gradient(105deg, rgba(22, 71, 50, 0.22), transparent 60%);
}
/* Arco decorativo que cruza la sección de lado a lado */
.valores-forma {
  position: absolute; left: -2%; right: -2%; top: 12%;
  width: 104%; height: 62%;
  color: var(--taupe);
  opacity: 0.5;
  pointer-events: none;
}

.valores .valores-head h2 { color: var(--paper); }
.valores .lead { color: rgba(255, 255, 255, 0.76); }

/* Tarjetas de pilar con foto de fondo fija (efecto ventana).
   Retícula de 6 columnas para repartir los 5 pilares en 3 + 2: los tres
   primeros ocupan 2 columnas y los dos últimos, 3. */
.valores-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(12px, 1.4vw, 20px);
  margin-top: clamp(44px, 6vw, 72px);
}
.valor {
  position: relative;
  display: flex;
  grid-column: span 2;              /* 3 tarjetas en la primera fila */
  min-height: clamp(230px, 26vw, 300px);
  overflow: hidden;
  background: var(--navy);
  isolation: isolate;
  /* recorta la capa fija del fondo — ver bloque "VENTANA FIJA" */
  -webkit-clip-path: inset(0);
  clip-path: inset(0);
}
/* Las dos últimas se reparten la segunda fila */
.valor:nth-child(n + 4) { grid-column: span 3; }

/* Ventana fija (ver bloque "VENTANA FIJA"): la foto se ancla a la ventana del
   navegador y la tarjeta es el marco que la recorta — al hacer scroll la foto
   queda quieta y va apareciendo por partes. El velo NO va como pseudo-elemento
   de esta capa a propósito: si viviera aquí se quedaría quieto con la foto en
   vez de acompañar al texto. Va aparte, en .valor-veil, pegado a la tarjeta. */
.valor-bg {
  position: fixed; inset: 0; z-index: 0;
  width: 100vw; height: 100vh;
  /* Esta capa se pinta a pantalla completa, no al tamaño de la tarjeta: por
     eso las fotos son de 2000 px y no las de 1000 que usan las tarjetas del
     portafolio. En móvil la pantalla es mucho más pequeña y se cambia por
     una versión ligera (ver el bloque de 720px). */
  background-image: var(--img);
  background-size: cover;
  background-position: center;
}
/* Velo suave: solo el degradado inferior necesario para que se lea el
   texto. Arriba queda casi limpio para que la foto se aprecie. */
.valor-veil {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(10, 13, 28, 0.88) 0%, rgba(10, 13, 28, 0.5) 42%, rgba(10, 13, 28, 0.12) 100%);
}
.valor::after {
  content: '';
  position: absolute; z-index: 3; inset: 12px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  pointer-events: none;
}

.valor-body {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; justify-content: flex-end;
  width: 100%;
  padding: clamp(26px, 2.6vw, 36px);
  color: var(--paper);
}
.valor-body i {
  font-family: var(--sans);
  font-style: normal;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.28em;
  color: var(--taupe);
  margin-bottom: 10px;
}
.valor-body h3 {
  font-family: var(--serif);
  font-size: clamp(24px, 1.2rem + 1vw, 34px);
  font-weight: 400;
  letter-spacing: 0.02em;
  margin-bottom: 10px;
  color: var(--paper);
}
.valor-body p {
  max-width: 34ch;
  font-size: 0.92em;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.74);
}

/* ── Banda tipográfica con foto ─────────────────────────────────────── */
.mask-band {
  position: relative;
  padding: clamp(80px, 12vw, 150px) var(--pad-x);
  background: var(--navy);
  text-align: center;
  overflow: hidden;
}
.mask-word {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(44px, 11vw, 180px);
  /* trazo grueso y poco contraste: deja ver mucha más foto dentro de la letra */
  font-weight: 640;
  font-variation-settings: 'opsz' 40, 'SOFT' 0, 'WONK' 0;
  line-height: 0.86;
  letter-spacing: -0.015em;

  background-image: url('material_visual/web/casco-antiguo.jpg');
  background-color: rgba(255, 255, 255, 0.26);
  background-blend-mode: screen;   /* aclara la foto para que contraste con el verde */
  /* Única excepción a la ventana fija por position:fixed: con
     background-clip:text la foto vive dentro del propio texto, no se puede
     sacar a una capa aparte. Aquí sí se usa background-attachment:fixed —
     en iOS degrada a foto normal dentro de las letras, que se ve bien
     igual (es un detalle sutil, no el fondo de una sección). */
  background-size: cover;
  background-position: center 58%;
  background-attachment: fixed;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .mask-word { color: var(--sand); background: none; }
}

/* iOS (Safari y todos los navegadores del iPhone, que usan WebKit) ignora
   background-attachment: fixed, y combinado con background-clip: text hay
   versiones donde la palabra sale directamente en blanco. Se le ancla la
   foto al propio texto: pierde el efecto de ventana, pero la palabra se ve
   con su foto dentro igual que en escritorio y en Android.
   `-webkit-touch-callout` solo existe en WebKit de iOS: es la forma
   estándar de acotar la regla sin tocar al resto. */
@supports (-webkit-touch-callout: none) {
  .mask-word {
    background-attachment: scroll;
    background-size: cover;
    background-position: center 45%;
  }
}

/* ── 9. Proyectos ───────────────────────────────────────────────────── */
/* clip (no hidden): hidden convertiría la sección en contenedor de scroll.
   Hace falta porque las tarjetas entran con translateX(±64px) y ese
   desplazamiento inicial, sin recortar, ensancha la página en móvil. */
.proyectos { background: var(--navy); color: var(--paper); overflow-x: clip; }
/* En proyectos.html no hay hero antes: hace falta despejar el header fijo */
.proyectos--pagina { padding-top: calc(clamp(150px, 20vw, 210px) + var(--topbar-h)); }
.prop-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: clamp(28px, 5vw, 80px);
  padding-bottom: clamp(44px, 6vw, 72px);
}
.prop-head h2 { margin-top: 24px; }
.prop-head > p { max-width: 34ch; color: var(--sand); margin-bottom: 6px; }
.prop-head-side {
  display: grid; gap: 18px; justify-items: start;
  max-width: 34ch; margin-bottom: 6px;
}
.prop-head-side p { color: var(--sand); }

.prop-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line-d);
  border-block: 1px solid var(--line-d);
}
.prop { display: flex; flex-direction: column; background: var(--navy); }

.prop-media { position: relative; aspect-ratio: 4 / 3.4; overflow: hidden; }
.prop-media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.07);
  transition: opacity 1.1s var(--ease), transform 5.5s linear;
}
.prop-media img.is-active { opacity: 1; transform: scale(1); }
.prop-tag {
  position: absolute; z-index: 2; left: 16px; top: 16px;
  padding: 8px 13px;
  background: rgba(22, 22, 39, 0.6);
  border: 1px solid var(--line-d);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--sand);
}
.prop-dots {
  position: absolute; z-index: 2; left: 16px; bottom: 16px;
  display: flex; gap: 7px;
}
.prop-dots button {
  width: 26px; height: 3px; padding: 0;
  border: none; background: rgba(255, 255, 255, 0.32);
  cursor: pointer;
  transition: background 0.4s var(--ease);
}
.prop-dots button[aria-selected='true'] { background: var(--copper); }

.prop-body {
  display: flex; flex-direction: column;
  flex: 1;
  padding: 30px clamp(20px, 2.2vw, 34px) 34px;
}
.prop-zone {
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--sand);
}
.prop h3 { margin: 12px 0 14px; font-size: clamp(28px, 1.5rem + 1vw, 40px); }
.prop-desc { color: rgba(255, 255, 255, 0.72); font-size: 0.95em; line-height: 1.6; }

.prop-specs {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin: 26px 0 28px;
  background: var(--line-d);
  border: 1px solid var(--line-d);
}
.prop-specs > div { padding: 13px 15px; background: var(--navy); }
.prop-specs dt {
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.prop-specs dd {
  margin: 5px 0 0;
  font-family: var(--serif);
  font-size: 19px;
}
.prop-body .link-underline { margin-top: auto; align-self: flex-start; }

.prop-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 26px;
  padding: clamp(40px, 5vw, 64px) var(--pad-x) clamp(70px, 9vw, 110px);
  color: var(--sand);
}

/* Tarjetas de proyecto — foto de fondo completa + panel de info con blur */
/* Palabra gigante de marca detrás del encabezado de sección */
.seccion-marca {
  position: absolute; z-index: 0; top: -0.12em; left: 50%;
  transform: translateX(-50%);
  width: max-content;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(90px, 19vw, 300px);
  font-weight: 400;
  line-height: 0.8;
  letter-spacing: 0.02em;
  color: rgba(246, 244, 241, 0.05);
  pointer-events: none;
  user-select: none;
}
.proyectos { position: relative; }
.proyectos .prop-head { position: relative; z-index: 1; }

/* Carrusel horizontal con scroll-snap. Sin JS sigue siendo deslizable;
   las flechas solo son un atajo. */
/* Grilla normal — la usa proyectos.html para mostrar todo el portafolio */
.proy-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.6vw, 22px);
}

/* Solo dentro del carrusel del home la grilla pasa a fila deslizable */
.carrusel { position: relative; }
.carrusel .proy-grid {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: minmax(280px, 30%);
  padding: 0 var(--pad-x);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--pad-x);
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
}
.carrusel .proy-grid::-webkit-scrollbar { display: none; }
.carrusel .proy-card { scroll-snap-align: start; }

.carrusel-btn {
  position: absolute; z-index: 3; top: 50%;
  transform: translateY(-50%);
  display: grid; place-content: center;
  width: 52px; height: 52px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;
  background: rgba(22, 22, 39, 0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.35s var(--ease), border-color 0.35s var(--ease), opacity 0.35s var(--ease);
}
.carrusel-btn:hover { background: var(--copper); border-color: var(--copper); }
.carrusel-btn[disabled] { opacity: 0.28; cursor: default; }
.carrusel-btn[disabled]:hover { background: rgba(22, 22, 39, 0.45); border-color: rgba(255, 255, 255, 0.45); }
.carrusel-prev { left: calc(var(--pad-x) - 26px); }
.carrusel-next { right: calc(var(--pad-x) - 26px); }
.carrusel-btn span { transform: translateY(-2px); }
.proy-card {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--deep);
  outline: 1px solid var(--line-d);
  outline-offset: -1px;
}
.proy-media { position: absolute; inset: 0; }
/* La tarjeta es 3/4 pero los renders son 16/9, así que al recortar solo se
   ve la franja central (~42% del ancho). --pos permite reencuadrar las
   fotos cuyo edificio no queda centrado, para que en todas se aprecie la
   propiedad completa y la fila se vea pareja. */
.proy-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
  filter: saturate(0.94);
  transform: scale(1.02);
  transition: transform 1.4s var(--ease), filter 0.6s var(--ease);
}
.proy-card:hover .proy-media img { transform: scale(1.09); filter: saturate(1.05); }
.proy-media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(3, 46, 32, 0.92) 0%, rgba(22, 22, 39, 0.35) 46%, rgba(22, 22, 39, 0.12) 100%);
}

/* Tarjeta sin foto todavía. Hoy los 7 proyectos tienen material, así que
   .proy-card--soon queda en reserva por si entra uno nuevo sin fotos.
   .proy-soon-mark espera un <img> del monograma (assets/heritage-mark.png). */
.proy-card--soon .proy-media {
  display: grid; place-content: center;
  background: linear-gradient(155deg, var(--navy), var(--deep));
}
.proy-soon-mark { height: 55px; width: auto; opacity: 0.28; }
.proy-card.no-photo .proy-media img { display: none; }
.proy-card.no-photo .proy-media { display: grid; place-content: center; background: linear-gradient(155deg, var(--navy), var(--deep)); }

.proy-tag {
  position: absolute; z-index: 2; left: 16px; top: 16px;
  padding: 8px 13px;
  background: rgba(22, 22, 39, 0.5);
  border: 1px solid var(--line-d);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--sand);
}

/* Panel de info — vidrio esmerilado sobre la foto */
.proy-panel {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 0;
  padding: 20px clamp(16px, 1.8vw, 24px) 22px;
  background: rgba(22, 22, 39, 0.34);
  backdrop-filter: blur(16px) saturate(1.15);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  transition: background 0.4s var(--ease), padding-bottom 0.4s var(--ease);
}
.proy-card:hover .proy-panel { background: rgba(22, 22, 39, 0.5); padding-bottom: 28px; }

.proy-zone {
  display: flex; align-items: center; gap: 7px;
  font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--sand);
}
.proy-pin { width: 11px; height: 11px; filter: brightness(0) invert(1); opacity: 0.8; }
/* El panel se ancla abajo, así que su altura decide dónde cae la línea que lo
   separa de la foto. Reservando SIEMPRE dos líneas de título, todas las
   tarjetas cortan a la misma altura aunque el nombre ocupe una sola línea. */
.proy-panel h3 {
  margin: 10px 0 8px;
  font-size: clamp(23px, 1.1rem + 0.9vw, 32px);
  line-height: 1.05;
  min-height: 2.1em;   /* = 2 líneas */
  color: var(--paper);
}
.proy-desc {
  max-width: 34ch;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.9em; line-height: 1.55;
}
.proy-cta {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 16px;
  font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--paper);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
.proy-cta span { transition: transform 0.35s var(--ease); }
.proy-card:hover .proy-cta,
.proy-card:focus-visible .proy-cta { opacity: 1; transform: none; }
.proy-card:hover .proy-cta span { transform: translate(2px, -2px); }

/* ── 9b. Vitrina interactiva del proyecto destacado (home) ────────────── */
.showcase { background: var(--navy); color: var(--paper); }

.showcase-viewer {
  display: grid; gap: 14px;
  padding: 0 var(--pad-x) clamp(30px, 4vw, 48px);
}
.showcase-stage {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--deep);
}
.showcase-stage img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 0.9s var(--ease), transform 1.4s var(--ease);
}
.showcase-stage img.is-active { opacity: 1; transform: scale(1); }

.showcase-thumbs {
  display: flex; gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}
.showcase-thumb {
  flex: none;
  width: clamp(84px, 9vw, 128px); aspect-ratio: 4 / 3;
  padding: 0; border: 2px solid transparent;
  background: none; cursor: pointer;
  overflow: hidden;
  opacity: 0.55;
  transition: opacity 0.35s var(--ease), border-color 0.35s var(--ease), transform 0.35s var(--ease);
}
.showcase-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.showcase-thumb:hover { opacity: 0.85; transform: translateY(-2px); }
.showcase-thumb[aria-selected='true'] { opacity: 1; border-color: var(--copper); }

.showcase-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 20px 40px;
  padding: clamp(30px, 4vw, 48px) var(--pad-x) clamp(64px, 8vw, 100px);
  border-top: 1px solid var(--line-d);
}
.showcase-foot p { max-width: 44ch; color: var(--sand); }

/* ── 10. Proceso ────────────────────────────────────────────────────── */
.proceso-head { max-width: 52ch; }
.proceso h2 { margin-top: 24px; }
.pasos {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin-top: clamp(50px, 7vw, 88px);
  background: var(--line);
  border-top: 1px solid var(--line);
}
.pasos li { padding: 32px clamp(16px, 2vw, 32px) 40px 0; background: var(--cream); }
.pasos li + li { padding-left: clamp(20px, 2.4vw, 40px); }
.pasos i {
  display: block;
  font-family: var(--serif);
  font-style: normal;
  font-size: 40px;
  line-height: 1;
  color: var(--copper);
  margin-bottom: 22px;
}
.pasos i.i-icon { display: flex; align-items: flex-end; height: 40px; }
.pasos i.i-icon img { width: 34px; height: 34px; opacity: 0.82; }
.pasos h3 {
  font-family: var(--sans);
  font-size: var(--t-label);
  font-weight: 550;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 11px;
}
.pasos p { color: var(--slate); font-size: 0.95em; line-height: 1.6; }

/* ── 11. Contacto ───────────────────────────────────────────────────── */
.contacto { position: relative; color: #fff; overflow: hidden; -webkit-clip-path: inset(0); clip-path: inset(0); }
/* Misma ventana fija que el hero (ver bloque "VENTANA FIJA"). */
.contacto-bg {
  position: fixed; inset: 0;
  width: 100vw; height: 100vh;
  background: url('material_visual/web/skyline-noche.jpg') center / cover no-repeat;
}
.contacto-veil {
  position: absolute; inset: 0;
  background: linear-gradient(96deg, rgba(22, 22, 39, 0.84) 0%, rgba(22, 71, 50, 0.5) 58%, rgba(22, 22, 39, 0.68) 100%);
}
.contacto-inner {
  position: relative;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
.contacto h2 { margin: 24px 0 22px; }
.contacto h2 em { color: var(--sand); }
.contacto-copy > p { max-width: 40ch; color: rgba(255, 255, 255, 0.82); }

.canales { margin-top: 38px; border-top: 1px solid var(--line-d); }
.canales li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line-d);
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.canales span { color: rgba(255, 255, 255, 0.55); }
.canales a { color: var(--sand); transition: color 0.3s var(--ease); }
.canales a:hover { color: #fff; }

.form {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding: clamp(24px, 3vw, 38px);
  background: rgba(10, 13, 28, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 22px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.field { display: grid; gap: 8px; }
.field-full { grid-column: 1 / -1; }
.field label {
  font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.66);
}
/* Mismo contorno que los botones: borde claro fino + vidrio esmerilado, en
   forma de píldora en los campos de una sola línea (el textarea usa un radio
   más moderado — una píldora en un bloque tan alto se vería exagerada). */
.form input,
.form select,
.form textarea {
  width: 100%;
  padding: 14px 20px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--radius-pill);
  background: rgba(10, 13, 28, 0.4);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: #fff;
  font-family: var(--sans);
  font-size: 15px;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.form textarea { resize: vertical; min-height: 92px; border-radius: 22px; }
.form input::placeholder,
.form textarea::placeholder { color: rgba(255, 255, 255, 0.5); }
.form input:hover,
.form select:hover,
.form textarea:hover { border-color: rgba(255, 255, 255, 0.65); }
.form input:focus,
.form select:focus,
.form textarea:focus {
  border-color: var(--copper);
  background: rgba(10, 13, 28, 0.62);
  box-shadow: 0 0 22px 1px rgba(171, 152, 122, 0.4);
  outline: none;
}
.form select option { color: var(--ink); background: var(--cream); }
.form input[aria-invalid='true'] { border-color: #d98a72; }
/* Dos vías de envío: correo (el que va a la bandeja de Heritage) y
   WhatsApp. En pantallas angostas se apilan. */
/* Campo trampa para bots: fuera de la vista y fuera del recorrido del
   teclado, pero sin display:none — algunos bots ignoran los ocultos. */
.form .trampa {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  opacity: 0;
  pointer-events: none;
}
.form-acciones { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; }
.form-acciones .btn { flex: 1 1 190px; justify-content: center; }
.form .btn { grid-column: 1 / -1; justify-content: center; }
.form-acciones .btn { grid-column: auto; }
.form button[disabled] { opacity: 0.6; cursor: progress; }
.form-note {
  grid-column: 1 / -1;
  min-height: 1em;
  font-size: var(--t-label);
  line-height: 1.5;
  color: var(--sand);
}
.form-note.is-error { color: #f0b3a1; }

/* ── 11b. Banda de contacto (ficha de proyecto) ─────────────────────────
   Cierra proyecto.html con los datos de Heritage: el punto de contacto es
   Heritage y no la desarrolladora del proyecto que se está viendo. */
.banda-contacto { background: var(--mist); }
.banda-contacto-inner {
  display: grid; grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(34px, 5vw, 80px);
  align-items: center;
}
.banda-contacto h2 { margin: 22px 0 20px; }
.banda-contacto .lead { max-width: 44ch; color: var(--slate); }
.banda-contacto .btn { margin-top: 30px; }

/* Lista de datos de contacto sobre fondo claro */
.datos-contacto { border-top: 1px solid var(--line); }
.datos-contacto li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--t-label);
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.datos-contacto span { color: var(--slate); }
.datos-contacto a { color: var(--ink); transition: color 0.3s var(--ease); }
.datos-contacto a:hover { color: var(--copper); }

/* ── 12. Footer ─────────────────────────────────────────────────────── */
.site-foot {
  padding: clamp(50px, 6vw, 78px) var(--pad-x) 34px;
  background: var(--forest);
  color: var(--cream);
}
.foot-top {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 30px;
  padding-bottom: 34px;
  border-bottom: 1px solid var(--line-d);
}
.foot-top nav { display: flex; flex-wrap: wrap; gap: 28px; }
.foot-top nav a {
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.8;
  transition: opacity 0.3s var(--ease);
}
.foot-top nav a:hover { opacity: 1; }

/* Datos de contacto en el pie — presentes en todas las páginas */
.foot-contacto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 8px clamp(24px, 4vw, 64px);
  padding: 26px 0 4px;
}
.foot-contacto li { display: grid; gap: 5px; }
.foot-contacto span {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sand);
  opacity: 0.75;
}
.foot-contacto a {
  font-size: var(--t-label);
  letter-spacing: 0.06em;
  color: var(--cream);
  transition: color 0.3s var(--ease);
}
.foot-contacto a:hover { color: var(--taupe); }

.foot-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px;
  padding-top: 24px;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--sand);
}
.foot-bottom a { border-bottom: 1px solid currentColor; padding-bottom: 3px; }

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  /* Con cuatro opciones el nav casi toca el botón "Hablemos" a 1001px,
     justo antes de que entre el menú de hamburguesa. Menos hueco entre
     enlaces le da margen. */
  .site-nav { gap: 20px; }
  .prop-specs { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 1000px) {
  .site-nav { display: none; }
  /* La direccion es lo primero que sobra en la barra de contacto */
  .topbar-datos a:nth-child(2) { display: none; }
  .burger { display: grid; place-content: center; gap: 6px; }
  .manifiesto-grid,
  .contacto-inner,
  .banda-contacto-inner,
  .portafolio-visual { grid-template-columns: 1fr; }
  /* Los 5 pilares pasan a 2 + 2 + 1 (la última ocupa el ancho) */
  .valores-grid { grid-template-columns: repeat(2, 1fr); }
  .valor,
  .valor:nth-child(n + 4) { grid-column: span 1; }
  .valor:last-child { grid-column: span 2; }
  .manifiesto-grid { gap: 34px; align-items: start; }
  .portafolio-visual { gap: 34px; }
  .pv-collage { order: -1; height: clamp(360px, 78vw, 480px); }
  .pilares, .pasos { grid-template-columns: 1fr 1fr; }
  .pilares li:nth-child(odd) + li,
  .pasos li:nth-child(odd) + li { padding-left: clamp(20px, 3vw, 40px); }
  .proy-grid { grid-template-columns: 1fr 1fr; }
  .carrusel .proy-grid { grid-auto-columns: minmax(260px, 46%); }
  .form { order: 2; }
}

@media (max-width: 720px) {
  .hero { padding-top: 130px; }
  /* Solo telefono + boton: el correo tampoco cabe */
  .topbar { font-size: 11.5px; }
  .topbar-datos a:nth-child(3) { display: none; }
  .hero-inner { max-width: none; }
  /* "Luxury Real Estate" cabe en una línea hasta ~330px de ancho */
  .hero h1 { font-size: clamp(31px, 8.9vw, 50px); }
  /* los saltos de línea fijos arruinan el rag en pantallas angostas */
  h2 br { display: none; }
  .hero-lead { font-size: 16.5px; }
  .hero-actions .btn { flex: 1 1 100%; justify-content: center; }
  .hero-meta { justify-content: center; }
  .scroll-cue, .coords { display: none; }

  .pilares, .pasos { grid-template-columns: 1fr; }
  .pilares li, .pasos li { padding-left: 0 !important; padding-right: 0; }
  /* En móvil la capa del fondo mide como mucho unos 450x950: sobra con la
     versión ligera y se ahorran cerca de 850 KB. */
  .valor-bg { background-image: var(--img-sm, var(--img)); }

  /* Los 5 pilares, uno debajo del otro */
  .valores-grid { grid-template-columns: 1fr; }
  .valor,
  .valor:nth-child(n + 4),
  .valor:last-child { grid-column: span 1; }
  /* En móvil el carrusel se desliza con el dedo: las flechas sobran */
  .proy-grid { grid-template-columns: 1fr; }
  .carrusel .proy-grid { grid-auto-columns: 82%; }
  .carrusel-btn { display: none; }
  .proy-card { aspect-ratio: 4 / 4.4; }
  .showcase-stage { aspect-ratio: 4 / 3.6; }
  .showcase-foot { display: block; }
  .showcase-foot .btn { margin-top: 18px; }
  .prop-head { display: block; }
  .prop-head > p { margin-top: 24px; max-width: none; }
  .form { grid-template-columns: 1fr; }
  .manifiesto::before { font-size: 74vw; }
  .foot-top { display: grid; }
}

@media (max-width: 420px) {
  .logo-img { height: 46px; }
  .site-head.is-stuck .logo-img { height: 38px; }
}

/* ── Pantallas de poca ALTURA (laptops 13"–14", ventana a media pantalla)
   Van al final a propósito: si se declaran antes que las reglas base de
   .hero-type / .hero-meta, esas las pisan por orden de cascada. ───────── */
@media (max-height: 860px) and (min-width: 761px) {
  .hero-type { font-size: clamp(28px, 0.9rem + 2.6vw, 52px); margin: 16px 0 20px; }
  .hero-lead { font-size: 16px; }
  .hero-actions { margin-top: 26px; }
  .hero-inner { margin-top: 0; }
}
@media (max-height: 700px) and (min-width: 761px) {
  /* lo primero que sobra cuando falta alto son los adornos del pie */
  .hero-meta,
  .hero-kicker { display: none; }
  .hero-type { font-size: clamp(26px, 0.8rem + 2.2vw, 42px); }
}
/* Monitores con altura de sobra: el bloque del hero baja para dejar ver más
   ciudad arriba. El tope de 150px evita que el texto llegue a chocar con el
   pie del hero ("Desliza" / coordenadas). */
@media (min-width: 761px) and (min-height: 861px) {
  .hero-inner { margin-top: clamp(60px, 11vh, 150px); }
}

/* ── Preferencias de movimiento ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal, .reveal-side, .reveal-fade { opacity: 1; transform: none; }
  .prop-media img.is-active { transform: none; }
}