/* ==========================================================================
   Edificio Atlántico 40 — Estilos de producción
   ========================================================================== */

:root {
  /* Paleta */
  --navy-deep: #0B2A52;
  --navy: #113D5B;
  --teal-gradient: linear-gradient(135deg, #10364E 0%, #214D5C 100%);
  --teal-secondary: #2E6068;
  --gold: #B99B76;
  --gold-light: #C9AE85;
  --cream: #F7F5F1;
  --cream-dark: #EFEAE0;
  --icon-stroke: #4C8A92;
  --icon-stroke-light: #7FB3B0;
  --text-body: #6B6357;
  --text-dark: #3A3226;
  --border-cream: #E4DCCB;
  --border-cream-2: #DCD3C2;
  --white: #FFFFFF;

  /* Tipografía */
  --font-serif: 'Newsreader', 'Georgia', serif;
  --font-sans: 'Work Sans', -apple-system, sans-serif;

  /* Layout */
  --container: 1240px;
  --gutter: clamp(20px, 6vw, 100px);

  /* Movimiento */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --t-base: 0.7s;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--text-dark);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 400; }
p { margin: 0; }
button { font-family: inherit; cursor: pointer; }

/* ---- Utilidades tipográficas ---- */
.serif { font-family: var(--font-serif); }
.kicker {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  text-align: center;
}
.kicker--left { text-align: left; }
.section-title {
  font-family: var(--font-serif);
  font-size: clamp(30px, 4.2vw, 50px);
  font-weight: 500;
  color: var(--navy-deep);
  text-align: center;
  margin-top: 16px;
  line-height: 1.18;
  padding: 0 var(--gutter);
}
.section-intro {
  font-family: var(--font-sans);
  font-size: 18px;
  color: var(--text-body);
  text-align: center;
  max-width: 720px;
  margin: 22px auto 0;
  line-height: 1.5;
  padding: 0 var(--gutter);
}
.rule {
  width: 44px;
  height: 2px;
  background: var(--gold);
  margin: 0 auto;
  border: none;
}
.rule--left { margin: 32px 0 0; }

.btn {
  display: inline-block;
  text-decoration: none;
  text-align: center;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.08em;
  border: none;
  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease), transform 0.2s var(--ease);
}
.btn-gold {
  background: var(--gold);
  color: var(--navy-deep);
  padding: 16px 36px;
}
.btn-gold:hover { background: var(--gold-light); }
.btn-ghost {
  border: 1px solid var(--gold);
  color: var(--gold);
  padding: 15px 34px;
  font-size: 12.5px;
}
.btn-ghost:hover { background: rgba(185, 155, 118, 0.1); }

/* ---- Botón flotante "volver arriba" ---- */
.back-to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--navy-deep);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease), background var(--t-base) var(--ease);
  z-index: 60;
  box-shadow: 0 6px 18px rgba(11, 42, 82, 0.22);
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: var(--gold-light); }

/* ---- Layout base ---- */
.section { position: relative; overflow: hidden; }
/* max-width incluye el gutter para que el contenido interior mida siempre
   exactamente var(--container) de ancho, igual que en el diseño (1240px). */
.container {
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ==========================================================================
   Animaciones de entrada (fade-in suave)
   ========================================================================== */
/* --reveal-y aisla SOLO el desplazamiento animado dentro de "transform", para
   que un elemento que además necesite su propio transform de posicionamiento
   (p. ej. el logo centrado con translateX) pueda combinar ambos sin que se
   pisen entre sí (dos reglas con la misma especificidad no se combinan). */
.reveal {
  opacity: 0;
  --reveal-y: 28px;
  transform: translateY(var(--reveal-y));
  transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease);
  transition-delay: calc(var(--i, 0) * 0.08s);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; --reveal-y: 0px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; --reveal-y: 0px; transition: none; }
}

/* ==========================================================================
   1. HERO
   ========================================================================== */
.hero-wrap { position: relative; }
.hero-band { height: 40px; background: var(--cream); }

.hero {
  position: relative;
  min-height: 780px;
  height: 92vh;
  max-height: 900px;
  display: flex;
  align-items: center;
  background: var(--navy-deep);
}
.hero__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  border: 0;
}
/* El ancho/alto reales los calcula JS (fitHeroVideo en main.js) a partir del
   tamaño del contenedor, porque un <iframe> no admite object-fit: cover y el
   escalado interno del reproductor de Vimeo no cubre bien contenedores muy
   anchos y poco altos (pantallas ultra-anchas). */
.hero__video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 0;
  pointer-events: none;
}
/* Capa oscurecida — se mantiene igual si el fondo pasa a ser un vídeo de Vimeo */
.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(9, 20, 41, 0.28) 0%, rgba(8, 18, 38, 0.84) 100%);
}
.hero__content {
  position: relative;
  z-index: 2;
  max-width: 840px;
  padding: 0 var(--gutter);
  /* Empuja el bloque hacia abajo sin que el centrado vertical del hero
     compense parte del desplazamiento (eso pasaba al usar padding-top).
     Se combina con --reveal-y (el desplazamiento del fade-in de .reveal)
     en una sola declaración para que ambas cosas convivan. */
  transform: translateY(calc(110px + var(--reveal-y, 0px)));
}
.hero__eyebrow { text-align: left; color: var(--gold-light); }
.hero__title {
  font-size: clamp(32px, 4.6vw, 54px);
  font-weight: 400;
  color: var(--white);
  margin-top: 22px;
  line-height: 1.19;
  max-width: 840px;
}
.hero__subtitle {
  font-size: 18px;
  color: #D9DEE8;
  margin-top: 26px;
  line-height: 1.5;
  max-width: 560px;
}
.hero__actions {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-top: 36px;
  flex-wrap: wrap;
}
.hero__link {
  text-decoration: none;
  color: #EFE6D8;
  font-size: 15px;
  border-bottom: 1px solid rgba(239, 230, 216, 0.5);
  padding-bottom: 3px;
}

.hero__card {
  position: absolute;
  z-index: 2;
  right: var(--gutter);
  bottom: 60px;
  width: 380px;
  max-width: calc(100vw - 2 * var(--gutter));
  background: rgba(255, 255, 255, 0.97);
  padding: 30px 34px;
}
.hero__card-title {
  font-size: 22px;
  color: var(--navy-deep);
  margin-top: 10px;
  line-height: 1.35;
}
.hero__card-text {
  font-size: 16px;
  color: var(--text-body);
  margin-top: 12px;
  line-height: 1.5;
}

.hero__logo {
  position: absolute;
  left: 50%;
  top: 0;
  /* Combina el centrado horizontal con el desplazamiento de la animación de
     entrada (de arriba a abajo) en una única declaración de transform. */
  --reveal-y: -28px;
  transform: translateX(-50%) translateY(var(--reveal-y));
  z-index: 5;
  /* Escala fluida: tamaño completo (356px) desde ~768px de viewport hacia
     arriba, y se reduce proporcionalmente hasta 250px en móviles pequeños
     en vez de quedar fija y muy justa de márgenes. Alto, padding y logo se
     derivan de --logo-w para mantener siempre las mismas proporciones. */
  --logo-w: clamp(270px, 27vw + 169px, 376px);
  width: var(--logo-w);
  height: calc(var(--logo-w) * 0.6096);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  border-radius: 0 0 6px 6px;
  box-shadow: 0 20px 40px rgba(11, 42, 82, 0.26);
  padding: calc(var(--logo-w) * 0.118) calc(var(--logo-w) * 0.0927) calc(var(--logo-w) * 0.1348);
}
.hero__logo img { width: calc(var(--logo-w) * 0.69); height: auto; }

/* ==========================================================================
   2. PRESENTACIÓN
   ========================================================================== */
.presentation { background: var(--cream); }
.presentation__inner {
  display: flex;
  align-items: center;
}
.presentation__text {
  flex: 1 1 480px;
  padding: 96px var(--gutter);
}
.presentation__title {
  font-size: clamp(24px, 2.4vw, 31px);
  color: var(--navy-deep);
  font-weight: 500;
  line-height: 1.3;
  margin-top: 14px;
}
.presentation__body {
  font-size: 18px;
  line-height: 1.5;
  color: var(--text-body);
  margin-top: 20px;
}
.presentation__media {
  flex: 1 1 420px;
  align-self: stretch;
  overflow: hidden;
}
.presentation__media img { width: 100%; height: 100%; object-fit: cover; min-height: 340px; }

/* ==========================================================================
   3. MODELO DE INVERSIÓN
   ========================================================================== */
.investment { background: var(--cream-dark); padding: 96px 0; }
.investment__steps {
  position: relative;
  max-width: calc(1240px + 2 * var(--gutter));
  margin: 80px auto 0;
  padding: 0 var(--gutter);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px 32px;
}
.investment__line {
  position: absolute;
  top: 19px;
  left: calc(var(--gutter) + 60px);
  right: calc(var(--gutter) + 60px);
  height: 1px;
  background: #D3C6AC;
}
.step {
  flex: 0 0 calc((100% - 64px) / 3);
  text-align: center;
  background: var(--cream-dark);
  position: relative;
  z-index: 1;
}
.step__number {
  font-style: italic;
  font-size: 38px;
  color: var(--gold);
  background: var(--cream-dark);
  display: inline-block;
  padding: 0 10px;
}
.step__title { font-size: 23px; color: var(--navy-deep); margin-top: 18px; }
.step__text { font-size: 14px; color: var(--text-body); margin-top: 10px; line-height: 1.5; }

/* ---- CTA intermedio: repite la llamada a la acción entre secciones ---- */
.mid-cta { text-align: center; margin-top: 72px; }
.mid-cta__text {
  font-family: var(--font-serif);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 500;
  color: var(--navy-deep);
  margin-bottom: 24px;
}

/* ==========================================================================
   4. VENTAJAS + ACTIVO (bloque degradado continuo)
   ========================================================================== */
.dark-block { position: relative; background: var(--teal-gradient); overflow: hidden; }
.dark-block__ring {
  position: absolute;
  opacity: 0.5;
  pointer-events: none;
}

.advantages { padding-top: 100px; padding-bottom: 84px; }
.advantages__title {
  font-size: clamp(28px, 3.6vw, 47px);
  font-weight: 500;
  color: var(--white);
  margin-top: 16px;
  max-width: 720px;
  line-height: 1.18;
}
.advantages__grid {
  margin-top: 60px;
  display: flex;
  flex-wrap: wrap;
}
.advantage-card {
  flex: 1 1 260px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-left: none;
  padding: 36px 34px;
  background: rgba(255, 255, 255, 0.02);
}
.advantage-card:first-child { border-left: 1px solid rgba(255, 255, 255, 0.12); }
.advantage-card__title { font-size: 26px; color: var(--white); margin-top: 24px; }
.advantage-card__text { font-size: 17px; color: #AEC1D6; margin-top: 12px; line-height: 1.5; }

.asset {
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  display: flex;
  min-height: 0;
}
.asset__text { flex: 1 1 460px; padding: 60px 40px 60px 0; max-width: 580px; }
.asset__title { font-size: clamp(26px, 2.6vw, 34px); color: var(--white); line-height: 1.35; }
.asset__body { font-size: 18px; color: #AEC1D6; margin-top: 18px; line-height: 1.5; }
.asset__list { margin-top: 28px; display: flex; flex-direction: column; gap: 16px; }
.asset__item { border-top: 1px solid rgba(255, 255, 255, 0.18); padding-top: 14px; }
.asset__item-title { font-size: 19px; color: var(--white); }
.asset__item-text { font-size: 16px; color: #AEC1D6; margin-top: 6px; line-height: 1.5; }
.asset__spacer { width: 18px; flex-shrink: 0; background: var(--teal-secondary); }
.asset__media { flex: 1 1 420px; position: relative; min-height: 420px; overflow: hidden; }
.asset__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   5. CIFRAS
   ========================================================================== */
.stats { position: relative; background: var(--teal-gradient); padding: 80px 0; overflow: hidden; }
.stats__kicker { color: #CDE6E6; }
.stats__kicker:not(.stat__label) { font-size: 15px; }
.stats__row {
  max-width: calc(1200px + 2 * var(--gutter));
  margin: 56px auto 0;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.stat {
  text-align: center;
  padding: 0 24px;
  border-left: 1px solid rgba(255, 255, 255, 0.22);
}
.stat:first-child { border-left: none; }
.stat__value {
  font-size: clamp(20px, 2vw, 27px);
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--white);
  white-space: nowrap;
}
.stat__value--gold { color: #E7CBA2; }
.stat__label { color: #CDE6E6; font-size: 13px; letter-spacing: 0.16em; margin-top: 14px; }

/* Con 4 columnas, "0 preocupaciones" (el valor más largo) empieza a partirse
   en dos líneas por debajo de ~1255px de viewport: la columna se queda sin
   espacio antes que las demás. Se pasa a 2x2 antes de que eso ocurra. */
@media (max-width: 1255px) {
  .stats__row { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .stat:nth-child(odd) { border-left: none; }
  .stat__value { white-space: normal; }
}

/* ==========================================================================
   6. TIPOLOGÍAS
   ========================================================================== */
.typologies { background: var(--cream-dark); padding: 96px 0; }

.bento {
  max-width: calc(1240px + 2 * var(--gutter));
  margin: 64px auto 0;
  padding: 0 var(--gutter);
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}
.bento__main { position: relative; flex: 2 1 500px; min-height: 420px; overflow: hidden; }
.bento__main img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bento__side { flex: 1 1 320px; display: flex; flex-direction: column; gap: 16px; }
.bento__cell { position: relative; height: 200px; overflow: hidden; flex: 1; }
.bento__cell img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bento__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11, 42, 82, 0.02) 0%, rgba(9, 25, 48, 0.62) 100%);
}
.bento__caption { position: absolute; left: 26px; right: 26px; bottom: 20px; color: var(--white); font-size: clamp(17px, 1.6vw, 22px); }

.apartments {
  max-width: calc(1240px + 2 * var(--gutter));
  margin: 80px auto 0;
  padding: 0 var(--gutter);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 40px;
}
.apartment-card { flex: 1 1 400px; background: var(--white); border: 1px solid var(--border-cream); }
.apartment-card img { width: 100%; height: 300px; object-fit: cover; }
.apartment-card__body { padding: 30px 34px; }
.apartment-card__title { font-size: 24px; color: var(--navy-deep); }
.apartment-card__text { font-size: 18px; color: var(--text-body); margin-top: 10px; line-height: 1.5; }

.availability {
  max-width: 720px;
  margin: 40px auto 0;
  background: var(--navy);
  padding: 24px 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
  flex-wrap: wrap;
}
.availability__badge { display: flex; align-items: center; gap: 11px; }
.availability__dot { position: relative; width: 9px; height: 9px; flex-shrink: 0; }
.availability__dot::before, .availability__dot::after { content: ""; position: absolute; border-radius: 50%; background: #7FD8B0; }
.availability__dot::before { inset: 0; opacity: 0.35; }
.availability__dot::after { top: 2px; left: 2px; width: 5px; height: 5px; }
.availability__label { color: var(--gold-light); white-space: nowrap; }
.availability__meter-wrap { display: flex; align-items: center; gap: 16px; }
.availability__track { width: 140px; height: 6px; background: rgba(255, 255, 255, 0.16); flex-shrink: 0; overflow: hidden; }
.availability__fill {
  width: 0%;
  height: 100%;
  background: var(--gold);
  transition: width 1.6s var(--ease);
}
.availability__count { font-size: 24px; color: var(--white); white-space: nowrap; }
.availability__count span { font-size: 16px; color: #AEC1D6; }

.complex {
  max-width: calc(1240px + 2 * var(--gutter));
  margin: 88px auto 0;
  padding: 0 var(--gutter);
  display: flex;
  align-items: flex-start;
  background: var(--cream-dark);
  flex-wrap: wrap;
}
/* Antes la imagen se estiraba para igualar la altura del texto, recortando
   gran parte de la foto original. Con aspect-ratio conserva una forma más
   rectangular/horizontal fiel a la foto, sea cual sea la altura del texto. */
/* margin-top iguala el padding-top de .complex__body para que la imagen
   quede alineada con el inicio real del texto ("El complejo"), no con el
   borde superior de la fila. */
.complex__media { flex: 1 1 400px; aspect-ratio: 4 / 3; min-height: 0; margin-top: 60px; }

/* Parallax: la imagen es más alta que su marco y se desplaza verticalmente
   según el scroll, contenida siempre dentro de .parallax (overflow:hidden). */
.parallax { position: relative; overflow: hidden; }
.parallax__media {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 145%;
  object-fit: cover;
  transform: translateY(calc(-50% + var(--parallax-y, 0px)));
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .parallax__media { transform: translateY(-50%); }
}
.complex__body { flex: 1 1 400px; padding: 60px clamp(24px, 4vw, 64px) 60px; }
.complex__title { font-size: clamp(24px, 2.4vw, 31px); color: var(--navy-deep); font-weight: 500; }
.complex__text { font-size: 18px; color: var(--text-body); margin-top: 16px; line-height: 1.5; }
.complex__label { text-align: left; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--border-cream-2); }
.complex__features {
  margin-top: 26px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 32px;
}
.feature {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 0;
  border-top: 1px solid var(--border-cream-2);
}
.feature svg { flex-shrink: 0; }
.feature span { font-size: 17px; color: var(--text-dark); }
.feature--wide { grid-column: 1 / 2; }

/* ==========================================================================
   7. UBICACIÓN
   ========================================================================== */
.location { background: var(--cream); padding: 96px 0; }
.location__banner {
  width: 100%;
  max-width: 1240px;
  height: 380px;
  object-fit: cover;
  object-position: 18% center;
  margin: 56px auto 0;
}
.location__cards {
  max-width: calc(1240px + 2 * var(--gutter));
  margin: 24px auto 0;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.location-card { position: relative; height: 340px; overflow: hidden; }
.location-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.location-card__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 42, 82, 0.05) 0%, rgba(9, 25, 48, 0.78) 100%); }
.location-card__body { position: absolute; left: 28px; right: 28px; bottom: 26px; }
.location-card__title { font-size: 21px; color: var(--white); }
.location-card__text { font-size: 16px; color: #E4E9F1; margin-top: 10px; line-height: 1.5; }

/* Dónde estamos */
.find-us {
  max-width: calc(1240px + 2 * var(--gutter));
  margin: 88px auto 0;
  padding: 0 var(--gutter);
}
.find-us__box {
  display: flex;
  flex-wrap: wrap;
  background: var(--white);
  border: 1px solid var(--border-cream);
}
.find-us__info { flex: 1 1 360px; padding: 64px clamp(28px, 4vw, 56px); }
.find-us__title { font-size: clamp(26px, 2.6vw, 34px); color: var(--navy-deep); margin-top: 14px; line-height: 1.25; }
.find-us__list { margin-top: 36px; display: flex; flex-direction: column; gap: 22px; }
.find-us__row { display: flex; align-items: flex-start; gap: 14px; }
.find-us__row svg { flex-shrink: 0; margin-top: 2px; }
.find-us__row span { font-size: 17px; color: var(--text-dark); line-height: 1.6; }
.find-us__map-wrap { flex: 1 1 400px; min-height: 340px; position: relative; background: var(--cream-dark); }
.find-us__map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(12%) contrast(1.02);
}

/* ==========================================================================
   8. SMART RENT
   ========================================================================== */
.smart-rent { background: var(--white); padding: 100px 0; }
.smart-rent__inner {
  max-width: calc(1240px + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  gap: 80px;
  flex-wrap: wrap;
}
.smart-rent__media { position: relative; flex: 1 1 420px; max-width: 520px; }
.smart-rent__media img { width: 100%; height: 480px; object-fit: cover; }
.smart-rent__badge {
  position: absolute;
  right: -20px;
  bottom: -20px;
  width: 210px;
  background: var(--navy);
  padding: 28px 30px;
}
.smart-rent__badge-value { font-size: 38px; color: var(--white); }
.smart-rent__badge-label { font-size: 11px; color: var(--gold-light); margin-top: 6px; }

.smart-rent__content { flex: 1 1 420px; }
.smart-rent__title { font-size: clamp(28px, 3.6vw, 47px); font-weight: 500; color: var(--navy-deep); margin-top: 14px; line-height: 1.15; }
.smart-rent__text { font-size: 18px; color: var(--text-body); margin-top: 20px; line-height: 1.5; max-width: 500px; }
.smart-rent__stats { display: flex; gap: 44px; margin-top: 36px; flex-wrap: wrap; }
.smart-rent__stat { border-left: 2px solid var(--gold); padding-left: 16px; }
.smart-rent__stat-value { font-size: 30px; color: var(--navy-deep); }
.smart-rent__stat-label { font-size: 11px; margin-top: 4px; }
.smart-rent__checks { margin-top: 32px; display: flex; flex-direction: column; gap: 16px; }
.smart-rent__check { display: flex; align-items: center; gap: 14px; }
.smart-rent__check span { font-size: 18px; color: #2A3549; }

/* ==========================================================================
   9. FAQ
   ========================================================================== */
.faq { background: var(--white); padding: 96px 0; }
.faq__list { max-width: calc(900px + 2 * var(--gutter)); margin: 60px auto 0; padding: 0 var(--gutter); display: flex; flex-direction: column; }
.faq-item { padding: 26px 0; border-bottom: 1px solid var(--border-cream); display: flex; gap: 26px; }
.faq-item:last-child { border-bottom: none; }
.faq-item__number { font-style: italic; color: var(--gold); font-size: 24px; flex-shrink: 0; }
.faq-item__question { font-size: 21px; color: var(--navy-deep); }
.faq-item__answer { font-size: 18px; color: var(--text-body); margin-top: 10px; line-height: 1.5; }

/* ==========================================================================
   10. CONTACTO
   ========================================================================== */
.contact { background: var(--cream); padding: 64px 0 80px; }
.contact__card {
  position: relative;
  max-width: 1360px;
  margin: 0 auto;
  border-radius: 28px;
  overflow: hidden;
  background: var(--teal-gradient);
  padding: 64px clamp(24px, 6vw, 80px) 56px;
}
.contact__ring { position: absolute; bottom: -90px; right: -40px; opacity: 0.35; pointer-events: none; }
/* Marca de agua decorativa: el símbolo del edificio del logo, muy translúcido,
   ocupando el hueco vacío a la derecha del formulario en pantallas anchas. */
.contact__mark {
  position: absolute;
  bottom: 60px;
  right: -10px;
  width: clamp(360px, 34vw, 620px);
  height: auto;
  color: var(--white);
  opacity: 0.08;
  pointer-events: none;
}
.contact__inner { position: relative; }
.contact__title { font-size: clamp(28px, 3.6vw, 47px); font-weight: 600; color: var(--white); margin-top: 14px; line-height: 1.18; }
.contact__text { font-size: 18px; color: #C7D0DE; margin-top: 16px; }

.contact-form {
  margin-top: 44px;
  display: flex;
  align-items: flex-end;
  gap: 28px;
  flex-wrap: wrap;
}
.field { flex: 1 1 180px; min-width: 0; }
.field label { display: block; font-size: 12px; color: #9FB2CC; margin-bottom: 6px; letter-spacing: 0.03em; }
.field input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  padding-bottom: 12px;
  font-size: 16px;
  color: var(--white);
  font-family: inherit;
  outline: none;
  transition: border-color 0.3s var(--ease);
}
.field input::placeholder { color: #9FB2CC; }
.field input:focus { border-bottom-color: var(--gold-light); }
.field input:invalid:not(:placeholder-shown) { border-bottom-color: #E39A9A; }
.contact-form__submit { flex-shrink: 0; border: none; }

.consent { margin-top: 22px; display: flex; align-items: flex-start; gap: 10px; }
.consent input {
  width: 16px; height: 16px; margin-top: 2px; flex-shrink: 0;
  accent-color: var(--gold);
}
.consent label { font-size: 13px; color: #C7D0DE; line-height: 1.5; }
.consent a { color: #EFE6D8; text-decoration: underline; text-underline-offset: 2px; }

.form-status { margin-top: 18px; font-size: 14px; min-height: 20px; }
.form-status[data-state="ok"] { color: #9FE3B8; }
.form-status[data-state="error"] { color: #F0A5A5; }

.social { margin-top: 76px; border-top: 1px solid rgba(255, 255, 255, 0.16); padding-top: 48px; }
.social__list { margin-top: 24px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.social__link {
  display: flex; align-items: center; justify-content: center;
  width: 58px; height: 58px; border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.32);
  text-decoration: none;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.social__link:hover { border-color: var(--gold-light); background: rgba(255, 255, 255, 0.06); }

.legal-footer { margin-top: 52px; border-top: 1px solid rgba(255, 255, 255, 0.14); padding-top: 32px; display: flex; gap: 80px; flex-wrap: wrap; }
.legal-footer__heading { font-size: 13px; color: var(--white); font-weight: 600; }
.legal-footer__list { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: #8FA8C4; list-style: none; padding: 0; }
.legal-footer__list a { color: inherit; text-decoration: none; }
.legal-footer__list a:hover { color: var(--gold-light); }

/* ==========================================================================
   Páginas legales
   ========================================================================== */
/* Cabecera: misma composición que el logo del hero de la home (banda clara +
   solapa azul flotante centrada), con el mismo tamaño de logo fluido. */
.legal-hero-wrap { position: relative; }
.legal-page__header { position: relative; background: var(--teal-gradient); height: 260px; overflow: hidden; }
.legal-hero-wrap .hero__logo {
  --reveal-y: 0px; /* estas páginas no cargan main.js: sin animación de entrada */
}
.legal-page__main {
  max-width: 860px;
  margin: 0 auto;
  padding: 72px var(--gutter) 100px;
}
.legal-page__title { font-size: clamp(30px, 4vw, 44px); color: var(--gold); }

@media (max-width: 640px) {
  .legal-page__header { height: 200px; }
}
.legal-page__updated { font-size: 14px; color: var(--text-body); margin-top: 40px; }
.legal-page__body { margin-top: 48px; }
.legal-page__body h2 { font-family: var(--font-serif); font-size: 24px; color: var(--navy-deep); margin-top: 40px; }
.legal-page__body h2:first-child { margin-top: 0; }
.legal-page__body p { font-size: 16px; color: var(--text-body); line-height: 1.5; margin-top: 14px; }
.legal-page__body ul { font-size: 16px; color: var(--text-body); line-height: 1.75; padding-left: 20px; margin-top: 14px; }
.legal-page__body strong { color: var(--text-dark); }
.legal-page__back { display: inline-block; margin-top: 56px; font-size: 14px; color: var(--gold); text-decoration: none; border-bottom: 1px solid var(--gold); }

/* ==========================================================================
   Breakpoint: Tablet (≤1024px)
   ========================================================================== */
@media (max-width: 1024px) {
  .hero {
    min-height: 0;
    height: auto;
    padding: 96px 0 64px;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 40px;
  }
  .hero__card { position: static; margin: 0 var(--gutter); width: auto; max-width: none; }

  /* En estos bloques, flex-basis (pensado para el ancho en fila) pasa a
     interpretarse como alto al cambiar a flex-direction:column, generando
     huecos enormes bajo cada elemento. flex:1 1 auto lo corrige en todos. */
  .presentation__inner { flex-direction: column; }
  .presentation__text { flex: 1 1 auto; padding: 64px var(--gutter) 40px; }
  .presentation__media { flex: 1 1 auto; width: 100%; height: 360px; }
  .presentation__media img { min-height: 360px; }

  .investment__line { display: none; }
  .investment__steps { justify-content: center; gap: 44px; }
  .step { flex: 0 0 calc((100% - 44px) / 2); min-width: 240px; }

  .asset { flex-direction: column; }
  .asset__text { flex: 1 1 auto; max-width: none; padding: 56px 0; }
  .asset__spacer { display: none; }
  .asset__media { flex: 1 1 auto; min-height: 340px; }

  .bento__main { flex-basis: 100%; min-height: 320px; }
  .bento__side { flex-direction: row; flex-basis: 100%; }

  .complex { flex-direction: column; align-items: stretch; }
  /* flex-basis:400px del ancho (fila) se convierte en alto al pasar a
     columna, y con aspect-ratio genera un ancho absurdo (400 * 16/9 = 711px)
     que desborda el viewport. flex-basis:auto + width:100% lo corrige. */
  .complex__media { flex: 1 1 auto; width: 100%; aspect-ratio: 16 / 9; margin-top: 0; }
  .complex__body { padding: 48px clamp(24px, 4vw, 64px); }

  .location__cards { grid-template-columns: 1fr 1fr; }
  .find-us__box { flex-direction: column; }
  .find-us__info { flex: 1 1 auto; }
  .find-us__map-wrap { flex: 1 1 auto; min-height: 300px; }

  .smart-rent__inner { flex-direction: column; }
  .smart-rent__media { flex: 1 1 auto; max-width: 460px; }
  .smart-rent__content { flex: 1 1 auto; }

  /* La marca de agua solo tiene sitio cuando el formulario deja hueco a la
     derecha; en columna ocuparía el mismo espacio que el texto y el form. */
  .contact__mark { display: none; }
}

/* ==========================================================================
   Breakpoint: Móvil (≤640px)
   ========================================================================== */
@media (max-width: 640px) {
  :root { --gutter: 22px; }

  .hero { padding: 72px 0 48px; gap: 32px; }
  .hero__title { font-size: 34px; }
  .hero__subtitle { font-size: 16px; }
  .hero__actions { gap: 18px 24px; }
  .hero__card { padding: 24px 24px; }

  .investment__steps { gap: 36px; }
  .step { flex: 0 0 100%; }

  .advantages__grid { flex-direction: column; }
  .advantage-card { flex: 1 1 auto; border-left: 1px solid rgba(255, 255, 255, 0.12) !important; }

  .stats__row { grid-template-columns: 1fr; row-gap: 28px; }
  .stat { border-left: none; padding: 0; }
  .stat__value { font-size: 30px; }

  /* flex-basis:100% (heredado del breakpoint de tablet) pasa a interpretarse
     como alto al cambiar aquí a flex-direction:column, igual que en otros
     bloques: la foto y las dos miniaturas de al lado se quedaban sin alto
     real y no se veían. flex:1 1 auto + width:100% lo corrige. */
  .bento { flex-direction: column; }
  .bento__main { flex: 1 1 auto; width: 100%; }
  /* gap:24px iguala el de .bento, para que las 3 fotos apiladas (piscina,
     salón, fachada) queden con la misma separación entre todas. */
  .bento__side { flex: 1 1 auto; width: 100%; flex-direction: column; gap: 24px; }
  .bento__cell { flex: 1 1 auto; }
  .bento__caption { font-size: 21px; }

  .apartments { flex-direction: column; gap: 24px; }
  .apartment-card { flex: 1 1 auto; }
  .apartment-card img { height: 220px; }

  .availability { flex-direction: column; align-items: flex-start; gap: 16px; }

  .location__cards { grid-template-columns: 1fr; }
  .location__banner { height: 220px; }

  .complex__features { grid-template-columns: 1fr; }
  .feature--wide { grid-column: auto; }

  .smart-rent__badge { position: static; margin-top: -40px; width: calc(100% - 40px); margin-left: 20px; }
  .smart-rent__stats { gap: 28px; }

  .contact-form { flex-direction: column; align-items: stretch; }
  .field { flex: 1 1 auto; }
  .contact-form__submit { width: 100%; }

  .legal-footer { gap: 40px; }

  /* Aprovechar mejor el alto de pantalla en móvil: los paddings/márgenes de
     sección estaban pensados para desktop (80-100px) y alargaban mucho el
     scroll sin aportar nada. Se reducen aquí solo para ≤640px. */
  .investment { padding: 56px 0; }
  .investment__steps { margin-top: 48px; }
  .advantages { padding-top: 64px; padding-bottom: 56px; }
  .asset__text { padding: 40px 0; }
  .stats { padding: 56px 0; }
  .typologies { padding: 56px 0; }
  .bento { margin-top: 40px; }
  .apartments { margin-top: 24px; }
  .complex { margin-top: 56px; }
  .location { padding: 56px 0; }
  .location__banner { margin-top: 40px; }
  .find-us { margin-top: 56px; }
  .smart-rent { padding: 56px 0; }
  .faq { padding: 56px 0; }
  .contact { padding: 40px 0 56px; }

  .back-to-top { right: 16px; bottom: 16px; width: 42px; height: 42px; }
}