/* ==========================================================================
   Edificio Playa Barbate — 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;
}
.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.7;
}
.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); }

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

.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(250px, 27vw + 149px, 356px);
  width: var(--logo-w);
  height: calc(var(--logo-w) * 0.6096);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #10364E;
  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.75); 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;
}
.presentation__body {
  font-size: 18px;
  line-height: 1.7;
  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 {
  width: 220px;
  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.6; }

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

.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.7; }
.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.55; }
.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 { background: var(--teal-secondary); padding: 80px 0; }
.stats__kicker { color: #CDE6E6; }
.stats__row {
  max-width: calc(1200px + 2 * var(--gutter));
  margin: 56px auto 0;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: repeat(4, 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(22px, 2.4vw, 32px);
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--white);
}
.stat__value--gold { color: #E7CBA2; }
.stat__label { color: #CDE6E6; font-size: 11px; letter-spacing: 0.18em; margin-top: 14px; }

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

.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.7; }
.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.7; 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(--cream); 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.6; }

/* ==========================================================================
   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; }
.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
   ========================================================================== */
.legal-page__header {
  background: var(--navy-deep);
  padding: 40px var(--gutter);
}
.legal-page__header img { height: 44px; }
.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(--navy-deep); }
.legal-page__updated { font-size: 14px; color: var(--text-body); margin-top: 12px; }
.legal-page__notice {
  margin-top: 32px;
  padding: 18px 22px;
  background: var(--cream-dark);
  border-left: 3px solid var(--gold);
  font-size: 15px;
  color: var(--text-body);
  line-height: 1.6;
}
.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.75; 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; }

  .presentation__inner { flex-direction: column; }
  .presentation__text { padding: 64px var(--gutter) 40px; }
  .presentation__media { width: 100%; height: 360px; }
  .presentation__media img { min-height: 360px; }

  .investment__line { display: none; }
  .investment__steps { justify-content: center; gap: 44px; }
  .step { width: 45%; min-width: 240px; }

  .asset { flex-direction: column; }
  .asset__text { max-width: none; padding: 56px 0; }
  .asset__spacer { display: none; }
  .asset__media { 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__map-wrap { min-height: 300px; }

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

/* ==========================================================================
   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 { width: 100%; }

  .advantages__grid { flex-direction: column; }
  .advantage-card { 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; }

  .bento { flex-direction: column; }
  .bento__side { flex-direction: column; }

  .apartments { flex-direction: column; }
  .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; }
  .contact-form__submit { width: 100%; }

  .legal-footer { gap: 40px; }
}