/* ───────── Fuentes (Archivo, variable: peso 300–800, anchura 62–125%) ───────── */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 300 800;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("assets/fonts/archivo-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 300 800;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("assets/fonts/archivo-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 300 800;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("assets/fonts/archivo-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ───────── Tokens ───────── */
:root {
  --olive: #63645A;       /* fondo cabecera / intro / acento botón */
  --olive-deep: #4A4B42;
  --olive-dark: #3E3F36;  /* texto sobre salvia */
  --sage: #CFD1A0;        /* titular, botones */
  --sage-mid: #C6C89A;    /* fondos de sección */
  --cream: #E4E5C4;       /* texto sobre oliva */
  --heading: #5E5F54;
  --text: #33342C;
  --text-strong: #2B2B28;
  --text-soft: #3F4036;
  --muted: #4A4B42;
  --rust: #9A4E33;
  --paper: #FFFFFF;
  --plan-bg: #EFE7DE;
  --field-border: #8C8D7A;

  --font: 'Archivo', 'Helvetica Neue', Helvetica, sans-serif;
  --maxw: 1312px;
  --gutter: clamp(20px, 4.5vw, 64px);
  --pad-x: max(var(--gutter), calc((100% - var(--maxw)) / 2));
  --section-y: clamp(72px, 9vw, 128px);
  --header-h: 88px;
  --ease: cubic-bezier(.19, 1, .22, 1);
  --pill: 999px;
}

/* ───────── Base ───────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); -webkit-text-size-adjust: 100%; }
html.js-still { scroll-behavior: auto; }
body {
  margin: 0;
  font-family: var(--font);
  background: var(--paper);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
a:hover { color: var(--rust); }
h1, h2, h3, p, figure, dl, dd { margin: 0; }
:focus-visible { outline: 2px solid var(--rust); outline-offset: 3px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 200;
  background: var(--sage); color: var(--olive-dark); padding: 10px 16px; font-weight: 600; border-radius: var(--pill);
}
.skip-link:focus { top: 12px; }

/* ───────── Tipografía ───────── */
.h2 {
  font-size: clamp(32px, 4vw + 8px, 60px);
  line-height: 1.02;
  font-weight: 700;
  font-stretch: 108%;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--heading);
}
.h2--sm { font-size: clamp(26px, 2vw + 12px, 38px); line-height: 1.08; }
.h2--light { color: var(--sage); }
.h3 {
  font-size: clamp(32px, 2.4vw + 14px, 48px);
  line-height: 1.02;
  font-weight: 700;
  font-stretch: 110%;
  letter-spacing: -0.02em;
  color: var(--heading);
}
.h4 { font-size: 22px; font-weight: 700; font-stretch: 108%; color: var(--heading); }
.body-lg { font-size: clamp(17px, 0.3vw + 16px, 19px); line-height: 1.6; color: var(--text); }
.body { font-size: clamp(16px, 0.3vw + 15px, 18px); line-height: 1.6; color: var(--text); }
.eyebrow { display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 600; color: var(--rust); }
.eyebrow__num {
  display: inline-grid; place-items: center; width: 34px; height: 34px;
  border: 1.5px solid currentColor; border-radius: 50%; font-size: 13px;
}

/* ───────── Botones (redondeados) ───────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 44px; padding: 0 24px;
  font: inherit; font-size: 16px; font-weight: 600;
  text-decoration: none; border-radius: var(--pill); cursor: pointer;
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.btn:active { transform: scale(.97); }
.btn--lg { min-height: 54px; padding: 0 30px; }
.btn__arrow { transition: transform .4s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(5px); }
.btn--solid { background: var(--sage); color: var(--olive-dark); border: 2px solid var(--sage); }
.btn--solid:hover { background: var(--cream); border-color: var(--cream); color: var(--olive-dark); }
.btn--outline { border: 2px solid var(--sage); color: var(--cream); background: transparent; }
.btn--outline:hover { background: var(--sage); color: var(--olive-dark); }
.btn--outline-dark { border: 2px solid var(--text); color: var(--text); background: transparent; align-self: flex-start; }
.btn--outline-dark:hover { background: var(--text); color: var(--paper); }
.btn--submit { min-height: 58px; padding: 0 34px; font-size: 17px; background: var(--olive); color: #fff; border: none; }
.btn--submit:hover { background: var(--olive-dark); color: #fff; }
.btn--submit[disabled] { opacity: .6; cursor: progress; }

.link-download {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font-size: 16px; font-weight: 600; color: var(--cream);
}

/* ───────── Pantalla de carga ───────── */
.loader { display: none; }
.js .loader {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center;
  background: var(--olive); color: var(--sage);
  transition: transform 1.1s var(--ease) .1s;
}
.loader__word {
  font-size: clamp(28px, 4vw, 56px); font-weight: 750; font-stretch: 118%; letter-spacing: -0.03em;
  animation: loader-in 1s var(--ease) both;
}
@keyframes loader-in { from { opacity: 0; transform: translateY(30px); letter-spacing: .1em; } }
.js.is-loaded .loader { transform: translateY(-100%); pointer-events: none; }
.js.is-loaded .loader__word { opacity: 0; transition: opacity .3s; }

/* ───────── Cabecera ───────── */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--header-h);
  padding: 0 var(--pad-x);
  display: flex; align-items: center; justify-content: space-between;
  color: var(--cream);
  background: transparent;
  transition: background-color .5s var(--ease), height .5s var(--ease), transform .5s var(--ease), box-shadow .5s;
}
.site-header.is-solid { background: var(--olive); --header-h: 72px; box-shadow: 0 1px 0 rgba(228, 229, 196, .12); }
.site-header.is-hidden { transform: translateY(-100%); }
.brand {
  text-decoration: none; font-size: 22px; font-weight: 700; font-stretch: 112%;
  letter-spacing: -0.01em; color: var(--cream);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.site-header:not(.is-solid) .brand { opacity: 0; transform: translateY(8px); }
.site-nav { display: flex; align-items: center; gap: 36px; font-size: 16px; }
.site-nav a:not(.btn) {
  position: relative; text-decoration: none; color: var(--cream); padding: 6px 0;
}
.site-nav a:not(.btn)::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform .5s var(--ease);
}
.site-nav a:not(.btn):hover { color: var(--sage); }
.site-nav a:not(.btn):hover::after, .site-nav a.is-current::after { transform: scaleX(1); transform-origin: left; }
.nav-toggle { display: none; }
.site-header { gap: 24px; }
.brand { margin-right: auto; }

/* Selector de idioma ES | EN */
.lang-switch {
  display: flex; gap: 2px; padding: 3px; flex-shrink: 0;
  border: 1.5px solid rgba(228, 229, 196, .45); border-radius: var(--pill);
}
.lang-switch button {
  min-width: 44px; height: 40px; padding: 0 10px; border: 0; border-radius: var(--pill);
  background: transparent; color: var(--cream); cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 700; letter-spacing: .08em;
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.lang-switch button:hover { background: rgba(228, 229, 196, .15); }
.lang-switch button[aria-pressed="true"] { background: var(--sage); color: var(--olive-dark); }

/* ───────── Hero a pantalla completa ───────── */
.hero {
  position: relative; height: 100vh; height: 100svh; min-height: 560px;
  overflow: hidden; background: var(--olive-dark); color: var(--cream);
}
.hero__media { position: absolute; inset: 0; will-change: transform; }
.hero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.8s ease; }
.hero__slide.is-active { opacity: 1; }
.hero__slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); }
.hero__slide.is-active img { animation: kenburns 10s ease-out forwards; }
@keyframes kenburns { from { transform: scale(1.14); } to { transform: scale(1.02); } }
.hero__shade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(40, 41, 35, .55) 0%, rgba(40, 41, 35, 0) 22%),
    linear-gradient(to top, rgba(40, 41, 35, .78) 0%, rgba(40, 41, 35, .25) 38%, rgba(40, 41, 35, 0) 60%);
}
.hero__content {
  position: absolute; left: var(--pad-x); right: var(--pad-x); bottom: clamp(96px, 12vh, 140px);
  display: flex; flex-direction: column; gap: 12px;
  will-change: transform, opacity;
}
.hero__kicker { font-size: 15px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--cream); }
.hero__title {
  font-size: clamp(56px, 9.6vw, 164px);
  line-height: .9; font-weight: 750; font-stretch: 118%;
  letter-spacing: -0.035em; color: var(--sage);
}
.hero__controls {
  position: absolute; left: var(--pad-x); right: var(--pad-x); bottom: 36px;
  display: flex; justify-content: space-between; align-items: center;
}
.hero__dots { display: flex; gap: 10px; }
.hero__dots button {
  width: 44px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; position: relative;
}
.hero__dots button::before {
  content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px;
  border-radius: var(--pill); background: rgba(228, 229, 196, .35);
}
.hero__dots button::after {
  content: ''; position: absolute; left: 0; top: 50%; height: 3px; margin-top: -1.5px; width: 0;
  border-radius: var(--pill); background: var(--cream);
}
.hero__dots button.is-active::after { animation: dot-fill var(--slide-ms, 6000ms) linear forwards; }
.js-still .hero__dots button.is-active::after { animation: none; width: 100%; }
@keyframes dot-fill { to { width: 100%; } }
.hero__scroll {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 20px;
  border: 1.5px solid rgba(228, 229, 196, .6); border-radius: var(--pill);
  font-size: 14px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; color: var(--cream);
  transition: background-color .3s, color .3s;
}
.hero__scroll:hover { background: var(--cream); color: var(--olive-dark); }
.hero__scroll svg { animation: nudge 2s var(--ease) infinite; }
.js-still .hero__scroll svg { animation: none; }
@keyframes nudge { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }

/* ───────── Intro + cifras ───────── */
.intro { background: var(--olive); color: var(--cream); padding: var(--section-y) var(--pad-x) calc(var(--section-y) * .8); }
.intro__main { display: flex; justify-content: space-between; align-items: flex-end; gap: 64px; }
.intro__lead {
  font-size: clamp(24px, 1.8vw + 12px, 38px); line-height: 1.25; font-weight: 500; letter-spacing: -0.01em;
  color: var(--cream); max-width: 860px;
}
.intro__aside { display: flex; flex-direction: column; align-items: flex-end; gap: 18px; flex-shrink: 0; }
.intro__address { font-size: 16px; line-height: 1.5; text-align: right; }
.intro__ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px;
  margin-top: clamp(56px, 7vw, 96px); padding-top: 32px; border-top: 1px solid rgba(228, 229, 196, .3);
}
.stat { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 8px; }
.stat__num {
  font-size: clamp(44px, 5vw, 80px); line-height: 1; font-weight: 700; font-stretch: 112%;
  letter-spacing: -0.03em; color: var(--sage); font-variant-numeric: tabular-nums;
}
.stat__label { font-size: 15px; color: var(--cream); }

/* ───────── Secciones ───────── */
.section { position: relative; padding: var(--section-y) var(--pad-x); background: var(--paper); }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 64px; }
.section-head .h2 { max-width: 720px; }
.section-head .body-lg { max-width: 460px; }

.figure { display: flex; flex-direction: column; gap: 12px; }
.figure figcaption { font-size: 14px; color: var(--heading); }

/* Marcos de imagen: recortan el zoom y el parallax */
.frame { position: relative; overflow: hidden; background: var(--plan-bg); }
.frame > img { width: 100%; height: 100%; object-fit: cover; transform: scale(var(--s, 1.001)); will-change: transform; }
.frame[data-parallax] > img { --s: 1.16; }
.frame--portrait { aspect-ratio: 3 / 4; }
.frame--ref { width: 280px; aspect-ratio: 4 / 5; }
.frame:not([data-parallax]) > img { transition: transform 1.2s var(--ease); }
.frame:not([data-parallax]):hover > img { transform: scale(1.05); }

/* El edificio */
.edificio { display: flex; gap: clamp(48px, 6.7vw, 96px); align-items: center; }
.edificio__text { flex: 0 0 min(520px, 40%); display: flex; flex-direction: column; gap: 28px; }
.edificio__alzado { margin-top: 12px; gap: 10px; }
.edificio__alzado img { width: 100%; aspect-ratio: 520 / 247; object-fit: cover; filter: sepia(0.15); }
.edificio__photos { flex: 1; display: flex; gap: 24px; align-items: flex-end; }
.edificio__photos .figure { flex: 1; max-width: 360px; }
.edificio__offset { padding-bottom: 96px; }

/* Viviendas */
.viviendas { display: flex; flex-direction: column; gap: clamp(72px, 9vw, 120px); }
.tipologia { display: flex; gap: clamp(40px, 5vw, 80px); align-items: stretch; }
.tipologia--reverse { flex-direction: row-reverse; }
.tipologia__img { flex: 0 0 42%; width: 42%; aspect-ratio: 506 / 620; }
.tipologia__body { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.tipologia__text { display: flex; flex-direction: column; gap: 20px; }
.tipologia__text .body { max-width: 560px; }

/* Terrazas y piscina */
.exteriores { background: var(--sage-mid); }
.terraza { position: relative; }
.terraza__frame { height: 100vh; height: 100svh; min-height: 480px; max-height: 1000px; }
.terraza__card {
  position: absolute; left: var(--pad-x); bottom: clamp(24px, 4.4vw, 64px);
  width: 480px; max-width: calc(100% - 2 * var(--gutter));
  padding: 40px 44px; background: var(--olive); border-radius: 28px;
  display: flex; flex-direction: column; gap: 14px;
}
.terraza__card p { font-size: 17px; line-height: 1.6; color: var(--cream); }
.piscina { padding: 72px var(--pad-x) var(--section-y); display: flex; flex-direction: column; gap: 36px; }
.piscina__frame { height: clamp(240px, 34vw, 520px); }
.piscina__text { display: flex; justify-content: space-between; align-items: baseline; gap: 64px; }
.piscina__text .body { font-size: 17px; color: var(--text-strong); max-width: 620px; }

/* Calidades */
.calidades { display: flex; flex-direction: column; gap: 72px; }
.calidades__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 64px; }
.calidades__intro { display: flex; flex-direction: column; gap: 24px; max-width: 560px; flex: 1 1 0; min-width: 0; }
.calidades__refs { display: flex; gap: 20px; flex-shrink: 0; }

.grid { display: grid; gap: 48px; }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px; }
.grid--ruled { position: relative; padding-top: 36px; }
.grid--ruled::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--text);
  transform-origin: left; transition: transform 1.4s var(--ease);
}
.js .grid--ruled:not(.is-in)::before { transform: scaleX(0); }
.item { display: flex; flex-direction: column; gap: 14px; }
.item p { font-size: 16px; line-height: 1.6; color: var(--text-soft); }
.item--dark .h4 { color: var(--text-strong); }
.item--dark p { font-size: 17px; color: var(--text-strong); }

/* Entorno */
.entorno { display: flex; flex-direction: column; gap: 64px; }
.entorno__title { max-width: 900px; }
.entorno__note {
  font-size: 17px; line-height: 1.6; color: var(--text-strong);
  max-width: 880px; border-top: 1px solid var(--sage-mid); padding-top: 28px;
}

/* Contacto */
.contacto { background: var(--sage-mid); display: flex; gap: clamp(48px, 6.7vw, 96px); }
.contacto__info { flex: 0 0 min(480px, 38%); display: flex; flex-direction: column; gap: 28px; }
.contacto__datos { display: flex; flex-direction: column; gap: 8px; font-size: 17px; line-height: 1.5; color: var(--text); }

.form {
  flex: 1;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 28px; align-content: start;
}
.field { display: flex; flex-direction: column; gap: 8px; font-size: 15px; font-weight: 600; color: var(--text); }
.field--full { grid-column: 1 / -1; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 54px; padding: 0 20px;
  font: inherit; font-weight: 400; font-size: 17px;
  background: var(--paper); color: var(--text);
  border: 1px solid var(--field-border); border-radius: 14px;
  transition: border-color .2s, box-shadow .2s;
}
.field select {
  padding: 0 48px 0 18px; appearance: none; -webkit-appearance: none;
  background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2333342C' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 20px center;
}
.field textarea { padding: 16px 20px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--olive); box-shadow: 0 0 0 3px rgba(99, 100, 90, .25); }
.field [aria-invalid="true"] { border-color: var(--rust); box-shadow: 0 0 0 3px rgba(154, 78, 51, .18); }
.check { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--text); }
.check input { width: 22px; height: 22px; margin: 0; flex-shrink: 0; accent-color: var(--olive); }
.check.is-invalid span { color: var(--rust); }
.form__actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.form__status { font-size: 16px; font-weight: 600; }
.form__status.is-error { color: var(--rust); }
.form__status.is-ok { color: var(--olive-dark); }

/* Pie */
.site-footer { padding: 96px var(--pad-x) 56px; background: var(--paper); display: flex; flex-direction: column; gap: 48px; }
.site-footer__top {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 64px;
  border-bottom: 3px solid var(--olive);
}
.site-footer__top img { width: min(560px, 50%); aspect-ratio: 560 / 230; object-fit: contain; object-position: left bottom; }
.site-footer__id {
  display: flex; flex-direction: column; gap: 10px; align-items: flex-end;
  padding-bottom: 20px; text-align: right; font-size: 16px; line-height: 1.5; color: var(--heading);
}
.site-footer__brand { font-size: 32px; font-weight: 750; font-stretch: 118%; letter-spacing: -0.02em; line-height: 1.1; }
.site-footer__id .small { font-size: 15px; }
.site-footer__bottom { display: flex; justify-content: space-between; align-items: flex-start; gap: 64px; }
.legal { font-size: 13px; line-height: 1.6; color: var(--heading); max-width: 860px; }
.site-footer__nav { display: flex; gap: 28px; font-size: 14px; flex-shrink: 0; color: var(--heading); }

/* Recuadro de confirmación tras enviar el formulario */
.form-thanks {
  flex: 1; align-self: start;
  display: flex; flex-direction: column; align-items: flex-start; gap: 18px;
  padding: clamp(32px, 4vw, 56px);
  background: var(--paper); border-radius: 28px;
  box-shadow: 0 20px 50px rgba(40, 41, 35, .12);
  animation: thanks-in .8s var(--ease);
}
.form-thanks[hidden], .form[hidden] { display: none; }
.form-thanks:focus { outline: none; }
@keyframes thanks-in { from { opacity: 0; transform: translateY(24px) scale(.98); } }
.js-still .form-thanks { animation: none; }
.form-thanks__icon {
  display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%;
  background: var(--olive); color: var(--cream);
}
.form-thanks__title {
  font-size: clamp(28px, 2vw + 14px, 40px); line-height: 1.08; font-weight: 700; font-stretch: 108%;
  letter-spacing: -0.01em; color: var(--heading);
}
.form-thanks__text { font-size: 18px; line-height: 1.6; color: var(--text); max-width: 520px; }
.form-thanks__text a { color: var(--olive-dark); font-weight: 600; white-space: nowrap; }
.form-thanks .btn { margin-top: 8px; }

/* Casilla trampa para robots: invisible para las personas */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* Primera capa de información de protección de datos */
.form__rgpd { font-size: 13px; line-height: 1.55; color: var(--text-soft); }

/* Páginas legales (panel lateral) */
.legal-page {
  position: fixed; inset: 0 0 0 auto; margin: 0;
  width: min(820px, 100%); max-width: 100%; height: 100%; max-height: 100%;
  padding: 0; border: 0; background: var(--paper); color: var(--text);
  overflow-y: auto; overscroll-behavior: contain;
}
.legal-page[open] { animation: panel-in .6s var(--ease); }
@keyframes panel-in { from { transform: translateX(100%); } }
.js-still .legal-page[open] { animation: none; }
.legal-page::backdrop { background: rgba(40, 41, 35, .55); backdrop-filter: blur(3px); }
.legal-page__inner { position: relative; padding: clamp(56px, 7vw, 88px) clamp(24px, 6vw, 72px) 80px; }
.legal-page__close {
  position: sticky; top: 0; float: right; margin: -24px -16px 0 16px; z-index: 1;
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  border: 0; background: var(--olive); color: var(--cream); cursor: pointer;
  transition: background-color .3s, transform .5s var(--ease);
}
.legal-page__close:hover { background: var(--olive-dark); transform: rotate(90deg); }
.legal-page__kicker { font-size: 14px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--rust); margin-bottom: 14px; }
.legal-page__date { font-size: 14px; color: var(--heading); margin: 16px 0 8px; }
.legal-page .legal-page__note { font-size: 14px; font-style: italic; color: var(--heading); }
.legal-page h3 { font-size: 20px; font-weight: 700; font-stretch: 108%; color: var(--heading); margin: 40px 0 12px; }
.legal-page p, .legal-page li { font-size: 16px; line-height: 1.7; color: var(--text-soft); }
.legal-page p + p, .legal-page ul + p, .legal-page p + ul { margin-top: 12px; }
.legal-page ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.legal-page a { color: var(--olive-dark); }
body.has-panel { overflow: hidden; }

/* Botón flotante de contacto */
.fab {
  position: fixed; right: 24px; bottom: 24px; z-index: 90;
  display: inline-flex; align-items: center; gap: 12px;
  height: 56px; padding: 0 24px 0 28px; border-radius: var(--pill);
  background: var(--rust); color: #fff; text-decoration: none;
  font-size: 15px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  box-shadow: 0 10px 30px rgba(40, 41, 35, .28);
  transform: translateY(140%); opacity: 0;
  transition: transform .6s var(--ease), opacity .4s, background-color .3s;
}
.fab.is-visible { transform: none; opacity: 1; }
.fab:hover { background: var(--olive-dark); color: #fff; }
.fab svg { transition: transform .5s var(--ease); }
.fab:hover svg { transform: rotate(90deg); }

/* ───────── Animaciones de entrada ───────── */
.js [data-reveal]:not([data-reveal="split"]):not([data-reveal="img"]) {
  opacity: 0; transform: translateY(48px);
  transition: opacity 1s var(--ease), transform 1.2s var(--ease);
  transition-delay: var(--d, 0s);
}
.js [data-reveal].is-in:not([data-reveal="split"]):not([data-reveal="img"]) { opacity: 1; transform: none; }

/* El recorte va en la imagen, no en el marco: un marco recortado al 100% no cuenta como visible para el observador */
.js [data-reveal="img"] { background: transparent; }
.js [data-reveal="img"] > img {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1.4s var(--ease) var(--d, 0s);
}
.js [data-reveal="img"].is-in > img { clip-path: inset(0 0 0 0); }
.js [data-reveal="img"]:not([data-parallax]) > img { transform: scale(1.2); }
.js [data-reveal="img"].is-in:not([data-parallax]) > img { transform: scale(1.001); transition: clip-path 1.4s var(--ease) var(--d, 0s), transform 1.8s var(--ease) var(--d, 0s); }
.js [data-reveal="img"].is-in:not([data-parallax]):hover > img { transform: scale(1.05); }

/* Texto palabra a palabra */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.w > span { display: inline-block; }
.js .w > span {
  transform: translateY(110%);
  transition: transform 1.1s var(--ease);
  transition-delay: calc(var(--d, 0s) + var(--i) * 45ms);
}
.js .is-in .w > span { transform: none; }

/* ───────── Responsive ───────── */
@media (max-width: 1180px) {
  .site-nav { gap: 26px; }
  /* iPad en horizontal: sin el botón de la cabecera para que quepan menú e idioma (queda el botón flotante) */
  .site-nav .btn { display: none; }
  .intro__main { flex-direction: column; align-items: flex-start; gap: 40px; }
  .intro__aside { align-items: flex-start; }
  .intro__address { text-align: left; }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .frame--ref { width: 220px; }
}

@media (max-width: 960px) {
  :root { --header-h: 68px; }
  .site-header.is-solid { --header-h: 64px; }
  .brand { font-size: 20px; }
  .nav-toggle {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 6px;
    width: 48px; height: 48px; padding: 13px; margin-right: -8px;
    background: rgba(228, 229, 196, .12); border: 0; border-radius: 50%; cursor: pointer; color: var(--cream);
  }
  .nav-toggle__bar { display: block; height: 2px; border-radius: 2px; background: currentColor; transition: transform .3s var(--ease), opacity .2s; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
  .site-header.menu-open { background: var(--olive); }
  .site-header.menu-open .brand { opacity: 1; transform: none; }
  .site-nav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px var(--gutter) 28px; background: var(--olive);
    border-top: 1px solid rgba(228, 229, 196, .2);
    display: none;
  }
  .site-nav.is-open { display: flex; animation: menu-in .5s var(--ease); }
  @keyframes menu-in { from { opacity: 0; transform: translateY(-12px); } }
  .site-nav a:not(.btn) { padding: 16px 0; font-size: 20px; border-bottom: 1px solid rgba(228, 229, 196, .15); }
  .site-nav a:not(.btn)::after { display: none; }
  .site-nav .btn { display: inline-flex; margin-top: 24px; min-height: 54px; }
  .site-header { gap: 12px; }

  .edificio, .contacto { flex-direction: column; align-items: stretch; }
  .edificio__text, .contacto__info { flex-basis: auto; }
  .edificio__photos .figure { max-width: none; }

  /* Tablet: foto y texto siguen lado a lado */
  .tipologia { gap: 36px; align-items: center; }
  .tipologia__img { flex-basis: 46%; width: 46%; aspect-ratio: 4 / 5; }

  .section-head, .calidades__head, .piscina__text { flex-direction: column; align-items: flex-start; gap: 24px; }
  .calidades__refs { width: 100%; }
  .frame--ref { flex: 1; width: auto; min-width: 0; }
  .grid--3 { gap: 28px; }
  .item--dark p { font-size: 16px; }

  /* Menú desplegable con scroll si no cabe (móvil en horizontal) */
  .site-nav { max-height: calc(100vh - var(--header-h)); max-height: calc(100svh - var(--header-h)); overflow-y: auto; }

  .site-footer__top, .site-footer__bottom { flex-direction: column; align-items: flex-start; gap: 32px; }
  .site-footer__top img { width: 100%; max-width: 560px; }
  .site-footer__id { align-items: flex-start; text-align: left; }
  .site-footer__nav { flex-wrap: wrap; gap: 12px 24px; }
}

@media (max-width: 640px) {
  .site-header { gap: 8px; }
  .lang-switch button { min-width: 40px; padding: 0 8px; font-size: 12px; }
  .hero__content { bottom: 104px; }
  .hero__kicker { font-size: 13px; }
  .hero__scroll span { display: none; }
  .hero__scroll { width: 44px; padding: 0; justify-content: center; }
  .tipologia, .tipologia--reverse { flex-direction: column; align-items: stretch; gap: 32px; }
  .tipologia__img { width: 100%; flex-basis: auto; aspect-ratio: 4 / 3; }
  .grid--3 { grid-template-columns: 1fr; gap: 36px; }
  .item--dark p { font-size: 17px; }
  .edificio__photos { gap: 12px; }
  .edificio__offset { padding-bottom: 40px; }
  .terraza__frame { height: 70svh; min-height: 420px; }
  .terraza__card { position: relative; left: auto; bottom: auto; width: auto; max-width: none; margin: -48px var(--gutter) 0; padding: 30px 28px; border-radius: 22px; }
  .piscina { padding-top: 48px; }
  .grid--4 { grid-template-columns: 1fr; gap: 32px; }
  .stats { gap: 28px 20px; }
  .calidades, .entorno { gap: 44px; }
  .form { grid-template-columns: 1fr; gap: 20px; }
  .intro__ctas { width: 100%; }
  .intro__ctas .btn { flex: 1 1 auto; }
  .btn--submit { width: 100%; }
  .site-footer { padding-top: 64px; padding-bottom: 96px; }
  .fab { right: 16px; bottom: 16px; height: 52px; padding: 0 20px 0 22px; font-size: 14px; }
}

/* Móvil en horizontal y pantallas bajas: la portada se ajusta a la altura real */
@media (max-height: 520px) and (orientation: landscape) {
  :root { --header-h: 60px; }
  .site-header.is-solid { --header-h: 56px; }
  .hero { min-height: 0; }
  .hero__content { bottom: 72px; gap: 6px; }
  .hero__title { font-size: min(9.6vw, 17vh); }
  .hero__kicker { font-size: 12px; }
  .hero__controls { bottom: 14px; }
  .terraza__frame { height: 100svh; min-height: 0; }
  .terraza__card { padding: 24px 28px; }
  .fab { height: 46px; bottom: 12px; }
}

/* ───────── Zonas táctiles de al menos 44 px ───────── */
.brand, .contacto__datos a, .site-footer__nav a { display: inline-flex; align-items: center; min-height: 44px; }
.contacto__datos { gap: 0; }
.contacto__datos span { padding: 10px 0; }
.check { min-height: 44px; }
.check input { width: 24px; height: 24px; }
.hero__dots button { height: 44px; }
.site-footer__nav { gap: 4px 28px; flex-wrap: wrap; }
@media (min-width: 961px) {
  .site-nav a:not(.btn) { display: inline-flex; align-items: center; min-height: 44px; padding: 0; }
  .site-nav a:not(.btn)::after { bottom: 8px; }
}

/* Los efectos de "pasar el ratón" solo en dispositivos con ratón: en táctil se quedan pegados */
@media (hover: none) {
  .frame:not([data-parallax]):hover > img,
  .js [data-reveal="img"].is-in:not([data-parallax]):hover > img { transform: scale(1.001); }
  .btn:hover .btn__arrow, .fab:hover svg { transform: none; }
}