/* ═══════════════════════════════════════════════════════════════════════════
   Beach House by Turnberry · Area Group Florida

   Portado del tema WordPress original (`beach-house`). Se conservan sus
   valores tal cual —incluidos los clamp() y los breakpoints raros— porque el
   encargo es un clon fiel. Lo que cambia está marcado con «CAMBIO:».

   Los tres breakpoints del original son 767, 768 y 1420. No son un error de
   copia: el tema los usa así, y mezclarlos rompe el diseño en 767px exactos.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────── Tipografías ───────────────────────────
   CAMBIO: las dos fuentes del original son de pago y no son nuestras.
   `arbotek-rounded` sale del kit de Adobe Fonts del promotor y `Jadeite` se
   vende por licencia; republicarlas desde este Worker sería redistribuirlas.

   Sustitutos y sus correcciones, medidas con fontTools sobre las fuentes
   reales (no a ojo): se iguala la altura de mayúscula con un factor de
   escala y se recupera el ancho perdido con tracking.

     arbotek-rounded 300  cap .6640em  →  Quicksand 300   cap .7000em
     Jadeite 400          cap .6590em  →  Montserrat 500  cap .7000em

   Jadeite es UNICASE: su 'a' y su 'A' son el mismo dibujo, misma caja y
   mismo avance (xHeight == capHeight == 659). Por eso «First Name» ahí se
   lee «FIRST NAME». El `text-transform:uppercase` de --fuente-marca no es
   un adorno: es lo que hace falta para que el sustituto se vea igual.        */

@font-face {
  font-family: "Quicksand";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(fuentes/quicksand-300.woff2) format("woff2");
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fuentes/montserrat-500.woff2) format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(fuentes/inter-300.woff2) format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fuentes/inter-400.woff2) format("woff2");
}

:root {
  /* Paleta, muestreada del CSS del original */
  --ecru:      #fbf7ed;   /* fondo dominante */
  --agua:      #bcd8d2;   /* preloader, botón de envío, franjas */
  --terracota: #9c6355;   /* todo el texto del formulario */
  --noche:     #1e2543;   /* botón, disclaimer, página de gracias */
  --tinta:     #2b2926;   /* cuerpo de texto en gracias y legales */

  /* Tipografías y sus correcciones medidas */
  --fuente-titular: "Quicksand", sans-serif;
  --fuente-marca:   "Montserrat", sans-serif;
  --fuente-texto:   "Inter", sans-serif;
  --escala-titular: .9486;   /* iguala la altura de mayúscula de arbotek  */
  --escala-marca:   .9414;   /* iguala la altura de mayúscula de Jadeite  */
  /* El tracking se calibró midiendo el ancho real del texto en el sitio
     original y barriendo valores hasta minimizar la diferencia. No sale uno
     solo porque depende de cuántos espacios tenga la cadena: el espacio de
     Montserrat es más ancho que el de Jadeite, así que un titular con cuatro
     espacios necesita menos tracking añadido que una etiqueta con dos.       */
  /* El tracking del titular cambia con el ancho porque el del original va en
     PÍXELES (1,5px en móvil, 3px en escritorio) y el mío en em: al reducirse
     el tamaño, mi corrección relativa se vuelve proporcionalmente mayor y
     «ALWAYS IMAGINED» se caía a una cuarta línea. Con .10em vuelve a tres,
     con el mismo margen que el original (97 % del ancho disponible).         */
  --track-titular:  .100em;  /* móvil                                        */
  --track-titular-mixto: .088em; /* «Register Your Interest» (error 0,3 px)  */
  --track-marca:    .132em;  /* etiquetas y botones      (error medio 3,1 px)*/
  --track-marca-suelto: .096em;  /* eyebrows, más espacios (error 0,15 px)   */
}

/* Dos utilidades para no repetir la corrección en cada regla. El font-size
   se multiplica donde se declara; aquí van familia, caja y tracking. */
.tipo-titular {
  font-family: var(--fuente-titular);
  letter-spacing: var(--track-titular);
}
.tipo-marca {
  font-family: var(--fuente-marca);
  font-weight: 500;
  letter-spacing: var(--track-marca);
  text-transform: uppercase;
}

@media (min-width: 768px) {
  :root { --track-titular: .126em }   /* escritorio (error 2,5 %) */
}

/* ─────────────────────────── Base ───────────────────────────
   OJO: el `rem` de este tema NO es 16px. `1rem = ancho_viewport / 1920`, o
   sea que a 1920px `1rem = 1px` y cada valor en rem del original es
   «píxeles a 1920». Quitar esta línea descuadra el sitio entero.            */

html {
  font-size: .0520833333vw;
  /* El original hereda esto del reset de Tailwind, no del tema. Sin la línea,
     todas las etiquetas, inputs y botones quedan unos píxeles más bajos y el
     formulario entero se descuadra ~30px respecto al original. */
  line-height: 1.5;
}

/* Las franjas verticales del fondo. 13 hasta 1419px y 17 desde 1420px.
   Empiezan en AGUA; la banda .base__grid es su negativo exacto.            */
body {
  background-image: linear-gradient(90deg,
    var(--agua) 0 7.6923%, var(--ecru) 7.6923% 15.3846%, var(--agua) 15.3846% 23.0769%,
    var(--ecru) 23.0769% 30.7692%, var(--agua) 30.7692% 38.4615%, var(--ecru) 38.4615% 46.1538%,
    var(--agua) 46.1538% 53.8462%, var(--ecru) 53.8462% 61.5385%, var(--agua) 61.5385% 69.2308%,
    var(--ecru) 69.2308% 76.9231%, var(--agua) 76.9231% 84.6154%, var(--ecru) 84.6154% 92.3077%,
    var(--agua) 92.3077% 100%);
  margin: 0;
  overflow-x: hidden;
}
@media (min-width: 1420px) {
  body {
    background-image: linear-gradient(90deg,
      var(--agua) 0 5.8824%, var(--ecru) 5.8824% 11.7647%, var(--agua) 11.7647% 17.6471%,
      var(--ecru) 17.6471% 23.5294%, var(--agua) 23.5294% 29.4118%, var(--ecru) 29.4118% 35.2941%,
      var(--agua) 35.2941% 41.1765%, var(--ecru) 41.1765% 47.0588%, var(--agua) 47.0588% 52.9412%,
      var(--ecru) 52.9412% 58.8235%, var(--agua) 58.8235% 64.7059%, var(--ecru) 64.7059% 70.5882%,
      var(--agua) 70.5882% 76.4706%, var(--ecru) 76.4706% 82.3529%, var(--agua) 82.3529% 88.2353%,
      var(--ecru) 88.2353% 94.1176%, var(--agua) 94.1176% 100%);
  }
}

.base__grid {
  background-image: linear-gradient(90deg,
    var(--ecru) 0 7.6923%, var(--agua) 7.6923% 15.3846%, var(--ecru) 15.3846% 23.0769%,
    var(--agua) 23.0769% 30.7692%, var(--ecru) 30.7692% 38.4615%, var(--agua) 38.4615% 46.1538%,
    var(--ecru) 46.1538% 53.8462%, var(--agua) 53.8462% 61.5385%, var(--ecru) 61.5385% 69.2308%,
    var(--agua) 69.2308% 76.9231%, var(--ecru) 76.9231% 84.6154%, var(--agua) 84.6154% 92.3077%,
    var(--ecru) 92.3077% 100%);
  height: 10px;
  width: 100%;
}
@media (min-width: 767px) { .base__grid { height: 47px } }
@media (min-width: 1420px) {
  .base__grid {
    background-image: linear-gradient(90deg,
      var(--ecru) 0 5.8824%, var(--agua) 5.8824% 11.7647%, var(--ecru) 11.7647% 17.6471%,
      var(--agua) 17.6471% 23.5294%, var(--ecru) 23.5294% 29.4118%, var(--agua) 29.4118% 35.2941%,
      var(--ecru) 35.2941% 41.1765%, var(--agua) 41.1765% 47.0588%, var(--ecru) 47.0588% 52.9412%,
      var(--agua) 52.9412% 58.8235%, var(--ecru) 58.8235% 64.7059%, var(--agua) 64.7059% 70.5882%,
      var(--ecru) 70.5882% 76.4706%, var(--agua) 76.4706% 82.3529%, var(--ecru) 82.3529% 88.2353%,
      var(--agua) 88.2353% 94.1176%, var(--ecru) 94.1176% 100%);
  }
}

* { font-family: var(--fuente-texto); margin: 0; padding: 0; box-sizing: border-box }

/* Un `display` de autor gana al `[hidden]` de la hoja del navegador, así que
   `.inquireForm__row{display:flex}` hacía visible la fila de Brokerage que
   debía estar oculta. Sale barato blindarlo de una vez. */
[hidden] { display: none !important }

:focus:not(:focus-visible) { outline: none }
:focus-visible { outline: 3px solid #005fcc; outline-offset: 2px }

.sr-only {
  height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute;
  width: 1px; clip: rect(0,0,0,0); border: 0; white-space: nowrap;
}

::-webkit-scrollbar-track { background-color: #f5f5f5; border-radius: 10px; box-shadow: inset 0 0 6px #0000004d }
::-webkit-scrollbar       { background-color: #f5f5f5; width: 6px }
::-webkit-scrollbar-thumb { background-color: #000; border-radius: 10px; box-shadow: inset 0 0 6px #0000004d }

/* ─────────────────────────── Portada ─────────────────────────── */

.heroLanding { height: 100svh; overflow: hidden; position: relative; width: 100% }
/* CAMBIO: 100svh en vez de 100vh. Con 100vh, la barra de Safari en iOS
   recorta el botón por abajo; svh es la altura visible de verdad.          */

.heroLanding__video {
  height: 100%; inset: 0; object-fit: cover; position: absolute; width: 100%;
}

.heroLanding__preloader {
  align-items: center; background-color: var(--agua); display: flex; inset: 0;
  justify-content: center; opacity: 1; position: absolute;
  transition: opacity .6s ease-in-out; z-index: 2;
}
.heroLanding__preloader.is-hidden { opacity: 0; pointer-events: none }

/* CAMBIO: el original deja el preloader en el DOM para siempre. Al acabar la
   transición lo retiramos, para que no se coma un compositing layer ni tape
   el botón si el navegador se salta la transición.                          */
.heroLanding__preloader.is-gone { display: none }

.heroLanding__preloaderVideo {
  aspect-ratio: 215/121; max-width: 100%; object-fit: cover; width: 876px;
}
@media (max-width: 768px) { .heroLanding__preloaderVideo { width: 90% } }

.heroLanding__overlay {
  align-items: center; display: flex; flex-direction: column;
  gap: clamp(16px, 1.25vw, 24px); height: 100%; justify-content: center;
  padding: 0 clamp(20px, 2.0833333333vw, 40px); position: relative;
  text-align: center; width: 100%; z-index: 1;
}

.heroLanding__logo { height: auto; width: clamp(220px, 80.2325581395vw, 345px) }
@media (min-width: 768px) {
  .heroLanding__logo { width: clamp(220px, 47.5520833333vw, 913px) }
}

.heroLanding__cta {
  border: 1px solid var(--ecru); border-radius: 999px; color: var(--ecru);
  font-family: var(--fuente-marca); font-weight: 500;
  letter-spacing: var(--track-marca); text-transform: uppercase;
  font-size: calc(clamp(13px, 3.488372093vw, 15px) * var(--escala-marca));
  line-height: 1;
  padding: clamp(8px, 2.3255813953vw, 10px) clamp(14px, 6.976744186vw, 30px);
  text-decoration: none; transition: all .3s ease-in-out;
}
.heroLanding__cta:hover { background-color: var(--ecru); color: var(--noche) }
@media (min-width: 768px) {
  .heroLanding__cta {
    font-size: calc(clamp(15px, 1.0416666667vw, 20px) * var(--escala-marca));
    padding: clamp(10px, .7291666667vw, 14px) clamp(24px, 2.6041666667vw, 50px);
  }
}

/* ─────────────────────────── Cabecera ───────────────────────────
   No lleva fondo propio a propósito: lo que se ve detrás son las franjas del
   <body>. Los cuatro .siteHeader__vector son divs vacíos que empujan el logo
   al centro. En móvil su `width:10%` anula el clamp de la misma regla —el
   clamp es código muerto en el original y aquí se deja fuera.               */

.siteHeader { width: 100%; overflow: hidden }
.siteHeader__band {
  display: flex; width: 100%; position: relative;
  justify-content: space-between; align-items: flex-end;
}
.siteHeader__vector { flex: 0 0 auto; width: 10%; height: clamp(80px, 23.2558139535vw, 100px) }
.siteHeader__logoWrap {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  aspect-ratio: 251/146; width: clamp(110px, 32.5581395349vw, 140px);
}
.siteHeader__logoWrap a { width: 100% }
.siteHeader__logo { width: 100%; height: auto; object-fit: contain }
@media (min-width: 768px) {
  .siteHeader__band { gap: clamp(60px, 9.375vw, 180px) }
  .siteHeader__vector { width: clamp(80px, 9.8958333333vw, 190px); height: clamp(100px, 15.625vw, 200px) }
  .siteHeader__logoWrap { width: clamp(240px, 21.875vw, 280px) }
}

/* ─────────────────────────── Formulario ─────────────────────────── */

.inquireForm { background-color: var(--ecru); margin: 0 auto; overflow: hidden; width: 100% }
@media (min-width: 767px) { .inquireForm { padding-bottom: 50px } }

.inquireForm__hero {
  align-items: center; display: flex; flex-direction: column;
  padding: clamp(32px, 13.9534883721vw, 60px) clamp(20px, 9.3023255814vw, 40px) 0;
  text-align: center;
}
@media (min-width: 768px) {
  .inquireForm__hero { padding: clamp(32px, 5.2083333333vw, 100px) clamp(20px, 9.3023255814vw, 40px) 0 }
}

.inquireForm__eyebrow {
  color: var(--terracota);
  font-family: var(--fuente-marca); font-weight: 500;
  letter-spacing: var(--track-marca-suelto); text-transform: uppercase;
  font-size: calc(clamp(12px, 3.2558139535vw, 14px) * var(--escala-marca));
  line-height: 1.5934;   /* = el 1.5 del original, en em de mi tamaño escalado */
  margin-bottom: clamp(12px, 5.5813953488vw, 24px);
}
@media (min-width: 768px) {
  .inquireForm__eyebrow {
    font-size: calc(clamp(16px, 1.0416666667vw, 20px) * var(--escala-marca));
    margin-bottom: clamp(12px, 1.71875vw, 33px);
  }
}

.inquireForm__heading {
  color: var(--terracota);
  text-transform: uppercase;
  font-family: var(--fuente-titular); font-weight: 300;
  font-size: calc(clamp(20px, 8.1395348837vw, 35px) * var(--escala-titular));
  letter-spacing: var(--track-titular);
  line-height: 1.2;   /* = el `normal` de arbotek, reescalado */
  margin-bottom: clamp(20px, 6.976744186vw, 30px);
  width: 100%;
}
@media (min-width: 768px) {
  .inquireForm__heading {
    font-size: calc(clamp(65px, 3.90625vw, 75px) * var(--escala-titular));
    margin: 0 auto clamp(20px, 1.71875vw, 33px);
    max-width: clamp(900px, 52.7604166667vw, 1013px);
    width: 100%;
  }
}

.inquireForm__body {
  color: var(--terracota); font-family: var(--fuente-texto); font-weight: 300;
  font-size: clamp(13px, 3.488372093vw, 15px); line-height: 2;
  margin-bottom: clamp(40px, 16.2790697674vw, 70px); width: 100%;
}
@media (min-width: 768px) {
  .inquireForm__body {
    font-size: clamp(16px, .9375vw, 18px);
    line-height: clamp(26px, 1.875vw, 36px);
    margin: 0 auto clamp(40px, 16.2790697674vw, 70px);
    max-width: 884px; width: 100%;
  }
}

.inquireForm__card {
  align-items: center; display: flex; flex-direction: column;
  padding: 0 clamp(20px, 9.3023255814vw, 40px);
}
.inquireForm__title {
  color: var(--terracota);
  font-family: var(--fuente-titular); font-weight: 300;
  font-size: calc(clamp(24px, 1.8229166667vw, 35px) * var(--escala-titular));
  letter-spacing: var(--track-titular-mixto);
  margin-bottom: 8px;
}

.inquireForm__form {
  margin-top: clamp(24px, 2.96875vw, 57px);
  max-width: 100%; width: 100%;
}
@media (min-width: 768px) {
  .inquireForm__form { margin-top: clamp(24px, 9.3023255814vw, 40px); max-width: 884px }
}

.inquireForm__row {
  display: flex; flex-direction: column; gap: 20px;
  margin-bottom: clamp(16px, 5.5813953488vw, 24px);
}
@media (min-width: 768px) { .inquireForm__row { flex-direction: row; gap: 2.3958333333vw } }

.inquireForm__row--full { align-items: stretch }
@media (min-width: 768px) { .inquireForm__row--full { align-items: flex-end } }

.inquireForm__field { display: flex; flex: 1 1 0; flex-direction: column; min-width: 0 }

.inquireForm label,
.inquireForm__label {
  color: var(--terracota);
  font-family: var(--fuente-marca); font-weight: 500;
  letter-spacing: var(--track-marca); text-transform: uppercase;
  font-size: calc(12px * var(--escala-marca));
  line-height: 18px;   /* el del original. Los controles no heredan line-height */
}

.inquireForm input,
.inquireForm select,
.inquireForm__input,
.inquireForm__select {
  background: transparent;
  border: none; border-bottom: 1px solid var(--terracota);
  border-radius: 0;
  color: var(--terracota);
  font-family: var(--fuente-texto); font-size: 12px; font-weight: 400;
  line-height: 18px;
  outline: none; padding: 8px 0; width: 100%;
}
.inquireForm input::placeholder,
.inquireForm select::placeholder {
  color: var(--terracota); font-family: var(--fuente-texto);
  font-size: 12px; text-transform: uppercase; opacity: 1;
}
.inquireForm select,
.inquireForm__select {
  appearance: none; background-image: none;
  border: 1px solid var(--terracota); border-radius: 999px;
  margin-top: 8px; padding: 10px 16px;
}
.inquireForm .inquireForm__input--comments {
  border: 1px solid var(--terracota); border-radius: 999px;
  margin-top: 8px; padding: 10px 16px;
}

/* CAMBIO: el original pone `outline:none` en los campos con más
   especificidad que su propio :focus-visible global, así que NO hay anillo de
   foco en ningún campo y el formulario se navega a ciegas con teclado. El
   #1e2543 sobre el ecru da 14,01:1, muy por encima del 3:1 que pide la norma.
   Solo aparece con teclado: con ratón el aspecto es idéntico al original.   */
.inquireForm :is(input, select, button, a):focus-visible {
  outline: 2px solid var(--noche);
  outline-offset: 2px;
  border-radius: 2px;
}

/* CAMBIO: mensajes de error propios. El original solo tiene los globos
   nativos del navegador, que se cierran solos y no se anuncian bien. Esto
   solo se ve en error: el estado normal queda exactamente igual.            */
.inquireForm__error {
  color: #8a3324;              /* 6,29:1 sobre el ecru */
  font-family: var(--fuente-texto); font-size: 11px; font-weight: 400;
  margin-top: 6px; min-height: 0;
}
.inquireForm__error:empty { display: none }
.inquireForm [aria-invalid="true"] { border-color: #8a3324 }

.inquireForm__aviso {
  border-radius: 12px; font-family: var(--fuente-texto); font-size: 13px;
  margin-bottom: 16px; padding: 12px 16px; text-align: center;
}
.inquireForm__aviso:empty { display: none }
.inquireForm__aviso--error { background: #8a33241a; color: #8a3324 }

/* El honeypot. En el original lo esconde el JS con style.display, así que
   sin JS se ve y puede rechazar a una persona real. Aquí se esconde por CSS,
   que no depende de nada.                                                    */
.inquireForm__trampa {
  position: absolute !important; left: -9999px !important;
  width: 1px !important; height: 1px !important;
  opacity: 0 !important; pointer-events: none !important;
}

.inquireForm__submit {
  align-self: flex-end;
  background-color: var(--agua); border: none; border-radius: 999px;
  color: var(--noche); cursor: pointer;
  font-family: var(--fuente-marca); font-weight: 500;
  letter-spacing: var(--track-marca); text-transform: uppercase;
  font-size: calc(14px * var(--escala-marca));
  line-height: 21px;
  margin: 21rem 0 0;   /* 21rem = 21px a 1920px. Ver la nota del `rem` arriba */
  padding: 14px 32px; width: 100%;
  transition: opacity .2s ease;
}
.inquireForm__submit[disabled] { cursor: progress; opacity: .55 }

.inquireForm__disclaimer {
  color: var(--noche); font-family: var(--fuente-texto);
  font-size: 11px; font-weight: 300; line-height: 1.5;
  margin-top: clamp(24px, 9.3023255814vw, 40px);
  margin-bottom: clamp(24px, 11.6279069767vw, 50px);
  max-width: 100%; text-align: center; width: 100%;
}
@media (min-width: 768px) {
  .inquireForm__disclaimer {
    font-size: 12px; line-height: normal;
    margin-bottom: clamp(24px, 2.6041666667vw, 50px);
    max-width: 46.0416666667vw;
  }
}

/* ─────────────────────────── Gracias ─────────────────────────── */

.thankYou {
  background-color: var(--agua); justify-content: space-between;
  min-height: 80vh; overflow: hidden; width: 100%;
}
.thankYou, .thankYou__content { display: flex; flex-direction: column }
.thankYou__content {
  align-items: center; flex: 1; justify-content: center;
  padding: clamp(32px, 13.9534883721vw, 60px) clamp(20px, 9.3023255814vw, 40px);
  text-align: center;
}
.thankYou__eyebrow {
  color: var(--noche);
  font-family: var(--fuente-marca); font-weight: 500;
  letter-spacing: var(--track-marca-suelto); text-transform: uppercase;
  font-size: calc(clamp(12px, 3.2558139535vw, 14px) * var(--escala-marca));
  line-height: 1.5934;   /* = el 1.5 del original, en em de mi tamaño escalado */
  margin-bottom: clamp(12px, 5.5813953488vw, 24px);
}
@media (min-width: 768px) {
  .thankYou__eyebrow {
    font-size: calc(clamp(16px, 1.0416666667vw, 20px) * var(--escala-marca));
    margin-bottom: clamp(12px, 1.71875vw, 33px);
  }
}
.thankYou__heading {
  color: var(--noche);
  text-transform: uppercase;
  font-family: var(--fuente-titular); font-weight: 300;
  font-size: calc(clamp(20px, 8.1395348837vw, 35px) * var(--escala-titular));
  letter-spacing: var(--track-titular); line-height: 1.2;   /* = el `normal` de arbotek, reescalado */
  margin-bottom: clamp(20px, 6.976744186vw, 30px); width: 100%;
}
@media (min-width: 768px) {
  .thankYou__heading {
    font-size: calc(clamp(30px, 3.90625vw, 75px) * var(--escala-titular));
    margin: 0 auto clamp(20px, 1.71875vw, 33px);
    max-width: 1013px; width: 52.7604166667vw;
  }
}
.thankYou__body {
  color: var(--tinta); font-family: var(--fuente-texto); font-weight: 300;
  font-size: clamp(13px, 3.488372093vw, 15px); line-height: 2;
  margin-bottom: clamp(16px, 5.5813953488vw, 24px); width: 100%;
}
.thankYou__body a { text-decoration: underline }
@media (min-width: 768px) {
  .thankYou__body {
    font-size: clamp(16px, .9375vw, 18px);
    line-height: clamp(26px, 1.875vw, 36px);
    margin-left: auto; margin-right: auto;
    max-width: 777px; width: 40.46875vw;
  }
}
.thankYou__body:last-of-type { margin-bottom: clamp(24px, 9.3023255814vw, 40px) }
.thankYou__cta {
  background-color: var(--ecru); border: 1px solid var(--ecru); border-radius: 999px;
  color: var(--noche);
  font-family: var(--fuente-marca); font-weight: 500;
  letter-spacing: var(--track-marca); text-transform: uppercase;
  font-size: calc(clamp(13px, 3.488372093vw, 15px) * var(--escala-marca));
  line-height: 1;
  padding: clamp(8px, 2.3255813953vw, 10px) clamp(14px, 6.976744186vw, 30px);
  text-decoration: none; transition: all .3s ease-in-out;
}
.thankYou__cta:hover { background-color: var(--agua); color: var(--ecru) }
@media (min-width: 768px) {
  .thankYou__cta {
    font-size: calc(clamp(15px, 1.0416666667vw, 20px) * var(--escala-marca));
    min-width: 400px;
    padding: clamp(10px, .7291666667vw, 14px) clamp(24px, 2.6041666667vw, 50px);
  }
}
.thankYou__social { align-items: center; display: flex; flex-direction: column; margin-top: 80px }
.thankYou__social p {
  font-family: var(--fuente-marca); font-weight: 500;
  letter-spacing: var(--track-marca); text-transform: uppercase;
  margin-top: 16px;
}
.thankYou__social a, .thankYou__social p {
  color: var(--noche); font-size: 12px; line-height: normal; text-align: center;
}
.thankYou__social a { font-weight: 300; margin-top: 8px }
.thankYou__social svg { display: block }

/* ─────────────────────────── Pie ───────────────────────────
   Portado literal del bloque del original. Los dos logos NO llevan la misma
   medida: Turnberry va a 112px de ancho y Fortune a 63px, por el segundo hijo.
   El texto va centrado y en #1e2543, no en la tinta del cuerpo.             */

.siteFooter {
  background-color: var(--ecru); width: 100%;
  padding: clamp(24px, 9.3023255814vw, 40px) 0;
}
@media (min-width: 768px) {
  .siteFooter { padding: clamp(24px, 2.6041666667vw, 50px) 0 }
}
.siteFooter__container {
  width: 100%; margin: 0 auto;
  padding: 0 clamp(16px, 8.1395348837vw, 35px);
}
@media (min-width: 768px) {
  .siteFooter__container { max-width: 75vw }
}
.siteFooter__container p {
  font-family: var(--fuente-texto); font-weight: 400;
  color: var(--noche); text-align: center; line-height: 1.7; font-size: 8px;
  margin: 0 0 clamp(20px, 1.6666666667vw, 32px);
}
.siteFooter__logos {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(20px, 2.0833333333vw, 40px);
  margin-bottom: clamp(20px, 1.6666666667vw, 32px);
}
.siteFooter__logo {
  display: flex; align-items: center; justify-content: center;
  width: 112px; height: auto;
}
.siteFooter__logo:nth-child(2) { width: 63px }
.siteFooter__logo img { width: 100%; height: auto; object-fit: contain }

.siteFooter__privacy ul {
  list-style: none; display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; margin: 0; padding: 0;
}
.siteFooter__privacy li {
  display: flex; align-items: center;
  margin-right: 10px; padding-right: 10px;
  border-right: 1px solid rgba(30, 37, 67, .4);
}
.siteFooter__privacy li:last-child { border-right: none }
/* El sello de igualdad de vivienda, como en el original (allí va como SVG
   incrustado; aquí es un archivo, que se cachea una vez para las 5 páginas). */
.siteFooter__igualdad { width: 13px; height: auto; margin-left: 5px; display: block }

.siteFooter__privacy a {
  display: flex; align-items: center; gap: 6px; text-decoration: none;
  color: var(--noche); font-family: var(--fuente-texto); font-weight: 400;
  font-size: clamp(8px, .5208333333vw, 10px);
  letter-spacing: .02em; text-transform: uppercase;
}

/* ─────────────────────────── Páginas legales ─────────────────────────── */

.is-legal {
  background: var(--ecru);
  padding: clamp(100px, 23.2558139535vw, 200px) clamp(10px, 4.6511627907vw, 40px) clamp(60px, 27.9069767442vw, 160px);
}
@media (min-width: 768px) {
  .is-legal { padding: clamp(100px, 8.0729166667vw, 300px) clamp(150px, 16.6666666667vw, 350px) clamp(100px, 10.4166666667vw, 240px) }
}
.is-legal h1 {
  color: var(--noche);
  font-family: var(--fuente-titular); font-weight: 300;
  font-size: calc(clamp(15px, 6.976744186vw, 35px) * var(--escala-titular));
  letter-spacing: var(--track-titular);
  line-height: normal; margin: 0; text-align: center; text-transform: uppercase;
}
@media (min-width: 768px) {
  .is-legal h1 { font-size: calc(clamp(30px, 1.8229166667vw, 45px) * var(--escala-titular)) }
}
.is-legal h2 {
  color: var(--noche);
  font-family: var(--fuente-marca); font-weight: 500;
  letter-spacing: var(--track-marca); text-transform: uppercase;
  font-size: calc(clamp(8px, 2.7906976744vw, 15px) * var(--escala-marca));
  line-height: normal; text-align: center;
  margin-top: clamp(12px, 4.6511627907vw, 24px);
  margin-bottom: clamp(50px, 18.8372093023vw, 81px);
}
@media (min-width: 768px) {
  .is-legal h2 {
    font-size: calc(clamp(8px, .7291666667vw, 16px) * var(--escala-marca));
    margin-top: clamp(16px, 1.25vw, 28px);
    margin-bottom: clamp(50px, 4.21875vw, 81px);
  }
}
.is-legal ol.legal-list {
  color: var(--tinta);
  font-family: var(--fuente-marca); font-weight: 500;
  letter-spacing: var(--track-marca); text-transform: uppercase;
  font-size: calc(clamp(8px, 3.2558139535vw, 15px) * var(--escala-marca));
  line-height: 1.6; list-style: none; margin: 0; padding-left: 0; text-align: left;
  counter-reset: legal-section;
}
@media (min-width: 768px) {
  .is-legal ol.legal-list { font-size: calc(clamp(10px, .8854166667vw, 17px) * var(--escala-marca)) }
}
.is-legal > ol.legal-list > li {
  counter-increment: legal-section;
  margin-bottom: clamp(50px, 18.8372093023vw, 81px);
}
@media (min-width: 768px) {
  .is-legal > ol.legal-list > li { margin-bottom: clamp(50px, 4.21875vw, 81px) }
}
.is-legal > ol.legal-list > li:last-child { margin-bottom: 0 }
.is-legal > ol.legal-list > li > strong {
  color: var(--noche); display: block;
  font-family: var(--fuente-marca); font-weight: 500;
  letter-spacing: var(--track-marca); text-transform: uppercase;
  font-size: calc(clamp(8px, 3.488372093vw, 16px) * var(--escala-marca));
  line-height: normal; margin-bottom: clamp(10px, 3.7209302326vw, 18px);
}
@media (min-width: 768px) {
  .is-legal > ol.legal-list > li > strong {
    font-size: calc(clamp(10px, .9375vw, 18px) * var(--escala-marca));
    margin-bottom: clamp(12px, .8333333333vw, 18px);
  }
}
.is-legal > ol.legal-list > li > strong::before { content: counter(legal-section) "."; margin-right: .4em }
.is-legal ol.legal-list ol.legal-list { margin-top: clamp(14px, 4.6511627907vw, 24px) }
@media (min-width: 768px) {
  .is-legal ol.legal-list ol.legal-list { margin-top: clamp(16px, 1.25vw, 28px) }
}
.is-legal ol.legal-list ol.legal-list > li {
  list-style: disc outside;
  margin-bottom: clamp(14px, 4.6511627907vw, 24px);
  margin-left: clamp(16px, 5.1162790698vw, 26px);
  position: relative;
}
@media (min-width: 768px) {
  .is-legal ol.legal-list ol.legal-list > li {
    margin-bottom: clamp(16px, 1.1458333333vw, 26px);
    margin-left: clamp(20px, 1.3541666667vw, 30px);
  }
}
.is-legal ol.legal-list ol.legal-list > li:last-child { margin-bottom: 0 }
.is-legal ol.legal-list ol.legal-list > li::marker { color: var(--noche) }
.is-legal li strong { color: var(--noche); font-weight: 500 }
.is-legal a {
  color: var(--noche); text-decoration: underline; text-underline-offset: .2em;
  transition: opacity .2s ease; word-break: break-word;
}
.is-legal :is(a:focus-visible, a:hover) { opacity: .65 }
.is-legal > p {
  color: var(--tinta);
  font-family: var(--fuente-marca); font-weight: 500;
  letter-spacing: var(--track-marca); text-transform: uppercase;
  font-size: calc(clamp(8px, 3.2558139535vw, 15px) * var(--escala-marca));
  line-height: 1.6; margin: 0 0 clamp(14px, 4.6511627907vw, 24px); text-align: left;
}
@media (min-width: 768px) {
  .is-legal > p {
    font-size: calc(clamp(10px, .8854166667vw, 17px) * var(--escala-marca));
    margin-bottom: clamp(16px, 1.25vw, 28px);
  }
}

/* ─────────── Quien prefiere menos movimiento, menos movimiento ─────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  /* Sin preloader y sin video en bucle, pero conservando la imagen: el póster
     del propio video es el mismo fotograma, así que el hero se ve igual,
     quieto. Dejarlo en verde plano habría sido perder la portada.           */
  .heroLanding__preloader { display: none }
  .heroLanding__video { display: none }
  .heroLanding {
    background: var(--agua) url(media/poster-hero-home-beach-house.jpg) center/cover no-repeat;
  }
}