/* ============================================================
   Corvera Hills — Landing
   Layout fluido: grid con fracciones, tipografía con clamp() y
   container queries para las pelotas. Las variables de color se
   inyectan desde el panel (functions.php → chg_css_vars()).
   ============================================================ */
/* Helvetica auto-alojada (Cormorant se carga desde Google Fonts) */
@font-face {
  font-family: "Helvetica";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/helvetica-300.woff) format("woff"), url(../fonts/helvetica-300.ttf) format("truetype");
}
@font-face {
  font-family: "Helvetica";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/helvetica-400.woff) format("woff"), url(../fonts/helvetica-400.ttf) format("truetype");
}
@font-face {
  font-family: "Helvetica";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/helvetica-500.woff) format("woff"), url(../fonts/helvetica-500.ttf) format("truetype");
}
@font-face {
  font-family: "Helvetica";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/helvetica-700.woff) format("woff"), url(../fonts/helvetica-700.ttf) format("truetype");
}

:root {
  --color-white: #ffffff;

  /* Diseño: solo Cormorant (serif) + Helvetica (sans) */
  --font-body: "Helvetica", Arial, sans-serif;     /* textos generales, formulario y botones */
  --font-serif: "Cormorant", Georgia, serif;       /* títulos display y textos de las pelotas */
  --font-footer: "Helvetica", Arial, sans-serif;   /* footer */
  --font-links: "Helvetica", Arial, sans-serif;    /* enlaces del footer */

  --container-max: 1210px;
  --footer-width: 96%;
}

/* ---------- Base ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { overflow-y: scroll; }
/* Desplazamiento suave al pulsar el ancla (se desactiva si el usuario
   prefiere menos movimiento). El ajuste fino del destino está en #form. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  background: var(--color-white);
  color: var(--color-text);
  font-family: var(--font-body);
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* Contenedor fluido: nunca supera el máximo y se ajusta al viewport. */
.container {
  width: min(88%, var(--container-max));
  margin-inline: auto;
}

/* ============================================================
   LOADER (precarga GSAP)
   ============================================================ */
.loader {
  position: fixed;
  inset: 0;
  z-index: 100;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  display: none;
}
.loader__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: var(--loader-bg, #9d6f08);
}
.loader__bg-bar {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 1;
  width: 100%;
  height: 0.5em;
  background: #fff;
  transform-origin: 0%;
  transform-style: preserve-3d;
  transform: scale3d(0, 1, 1);
}
.loader__container {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.loader__logo-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(70vw, 420px);
  height: auto;
}
.loader__logo-base { position: absolute; width: 100%; }
.loader__logo-base svg { display: block; width: 100%; fill: rgba(241, 230, 178, 0.5); }
.loader__logo-top { position: absolute; width: 100%; clip-path: inset(0% 100% 0% 0%); }
.loader__logo-top svg { display: block; width: 100%; fill: #f1e6b2; }

/* ============================================================
   HERO — vídeo a pantalla completa + capa de color + textos
   ============================================================ */
.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  background: var(--color-text);
  overflow: hidden;
}
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: var(--color-hero-overlay);
  opacity: var(--hero-overlay-opacity);
  pointer-events: none;
}
.hero-inner { position: relative; height: 100%; }
.hero-text {
  position: absolute;
  top: clamp(56px, 8vh, 96px);
  left: 0;
  width: clamp(240px, 44vw, 600px);
  height: auto;
}
/* Columna derecha del hero (texto blanco sobre el vídeo) */
.hero-right {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-42%);
  width: min(44%, 470px);
  color: var(--color-white);
}
.hero-exp {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;            /* serif delicada, como en el diseño */
  font-size: clamp(38px, 5.7vw, 82px);  /* 82px a 1440px de ancho, como el diseño */
  line-height: 1.05;
  padding-bottom: 0.6em;       /* ≈50px a 82px; en em para que escale con el título */
}
.hero-founding {
  font-weight: 400;            /* más fina que el bold anterior */
  font-size: clamp(21px, 2.8vw, 42px);
  line-height: 1.2;
}
.hero-intro {
  margin-top: clamp(18px, 2.5vh, 28px);
  max-width: 40ch;
  font-weight: 300;
  font-size: clamp(15px, 1.5vw, 20px);
  line-height: 1.5;
}

/* Hero en pantallas pequeñas: apilar lockup + textos y crecer en alto */
@media (max-width: 820px) {
  .hero { height: auto; min-height: 100svh; }
  .hero-inner {
    position: static;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(28px, 5vh, 48px);
    min-height: 100svh;
    padding: clamp(96px, 16vh, 140px) 0 clamp(48px, 8vh, 70px);
  }
  .hero-text { position: static; width: min(80vw, 380px); }
  .hero-right { position: static; transform: none; width: 100%; max-width: 560px; }
}

/* ============================================================
   Utilidad: rejilla de dos columnas que colapsa a una
   ============================================================ */
.two-col,
.form-grid,
.mid-grid,
.preview-grid {
  display: grid;
  gap: clamp(28px, 4vw, 60px);
  align-items: start;
}

/* ============================================================
   FORMULARIO
   ============================================================ */
.form-sec { background: var(--color-white); padding: clamp(56px, 8vw, 90px) 0; scroll-margin-top: 20px; }
.form-grid { grid-template-columns: minmax(0, 44fr) minmax(0, 59fr); }
.form-title { font-weight: 500; font-size: clamp(26px, 2.5vw, 36px); line-height: 1.12; }
.form-sub { margin-top: 18px; max-width: 480px; font-weight: 300; font-size: clamp(17px, 1.7vw, 20px); line-height: 1.45; }
.form-right { display: flex; flex-direction: column; gap: clamp(16px, 2vw, 24px); }
.field {
  height: 54px;
  border: 1px solid var(--color-text);
  border-radius: 27px;
  background: var(--color-white);
  display: flex;
  align-items: center;
  padding: 0 clamp(18px, 3vw, 30px);
}
.field input,
.field select {
  border: 0;
  outline: 0;
  background: transparent;
  width: 100%;
  height: 100%;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;            /* Medium, como el diseño */
  letter-spacing: 0.6px;
  color: var(--color-text);
  text-transform: uppercase;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.field input { cursor: text; }
.field input::placeholder { color: var(--color-text); opacity: 1; font-weight: 500; }
.field.select { position: relative; justify-content: space-between; cursor: pointer; }
.field.select .tri {
  position: absolute;
  right: clamp(18px, 3vw, 30px);
  pointer-events: none;
  width: 0; height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 9px solid var(--color-text);
}
.form-last { display: flex; gap: 20px; }
.form-last .field.select { flex: 1 1 auto; }
.submit {
  flex: 0 0 195px;
  height: 54px;
  background: var(--color-text);
  border-radius: 27px;
  border: 0;
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .2s ease;
}
.submit:hover { opacity: .88; }
.submit[disabled] { opacity: .5; cursor: default; }

/* Mensajes de feedback del formulario */
.form-msg { font-size: 16px; font-weight: 500; line-height: 1.4; min-height: 1px; }
.form-msg.is-ok { color: var(--color-text); }
.form-msg.is-error { color: #b4361c; }
.field.has-error { border-color: #b4361c; }

/* ============================================================
   SECCIÓN MEDIA — título + párrafo + foto
   ============================================================ */
.mid-sec { background: var(--color-mid-bg); padding-top: clamp(48px, 6vw, 70px); }
.mid-grid { grid-template-columns: minmax(0, 63fr) minmax(0, 37fr); padding-bottom: clamp(40px, 6vw, 60px); }
.mid-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;                       /* Medium italic */
  font-size: clamp(34px, 5.7vw, 82px);    /* 82px a 1440px de ancho */
  line-height: 1.06;
  letter-spacing: 0.2px;
}
.mid-para { font-weight: 300; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.5; }  /* 21px Light */
.mid-para p + p { margin-top: 22px; }
.golfers { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background-color: var(--color-mid-bg); }  /* zonas transparentes de la imagen → color crema de la sección */

/* ============================================================
   SECCIÓN PREVIEW — pelotas + contador + botón
   ============================================================ */
.preview-sec { background: var(--color-preview-bg); padding: clamp(48px, 6vw, 70px) 0 clamp(60px, 8vw, 90px); }

/* Pelotas: rejilla que refluye 3 → 2 → 1 y escala su tipografía
   con el tamaño real de cada pelota (container queries). */
.balls {
  --ball-size: clamp(280px, 19.7vw, 440px);   /* diámetro de las bolas */
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(24px, 5vw, 90px);
}
/* En escritorio las pelotas se superponen y quedan SIEMPRE centradas en el
   borde de la foto: translateY(-50%) las sube justo media bola (a cualquier
   tamaño), y el margen negativo del mismo valor compensa el hueco que deja. */
@media (min-width: 1000px) {
  .preview-sec { padding-top: 0; }
  .balls {
    justify-content: space-between;
    transform: translateY(-50%);
    margin-bottom: calc(var(--ball-size) / -2);
  }
}
.ball {
  position: relative;
  width: var(--ball-size);
  height: var(--ball-size);
  max-width: 100%;
  container-type: inline-size;
}
.ball-back, .ball-front { position: absolute; inset: 0; width: 100%; height: 100%; }
.ball-back {
  background-color: var(--color-ball-mask);
  -webkit-mask: url(../svg/pelota-golf.svg) center / contain no-repeat;
  mask: url(../svg/pelota-golf.svg) center / contain no-repeat;
  opacity: var(--ball-mask-opacity);
}
.ball-txt {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--color-text);
  padding: 0 12%;
}
/* Tamaños por línea (cqw sobre bola de 240). La jerarquía la decide cada bola. */
.ball-txt .lg  { font-size: 13.93cqw; line-height: 1.2; font-weight: 500; }  /* 39px @280 (medium italic) */
.ball-txt .sm  { font-size: 8.57cqw;  line-height: 1.2; font-weight: 600; }  /* 24px @280 (semibold italic) */
.ball-txt .num { font-size: 28.71cqw; line-height: 1; font-weight: 700; margin-top: -0.2em; }  /* número (bold italic); mismo tamaño de dígito para 12 y 108 */
.ball-txt .md  { font-size: 17.86cqw; line-height: 0.9; font-weight: 700; }  /* "new golf course" — interlineado ajustado por el <br> */

.preview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: clamp(48px, 6vw, 70px); }
.preview-right { display: flex; flex-direction: column; align-items: center; gap: clamp(32px, 5vw, 50px); }
.epe {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(34px, 5.7vw, 82px);   /* 82px Medium italic, igual que "Be Among…" */
  line-height: 1.04;
}
.limited { margin-top: 44px; font-weight: 400; font-size: clamp(17px, 1.7vw, 20px); opacity: 0.85; }
.reserve-today { margin-top: 12px; max-width: 440px; font-weight: 500; font-size: clamp(26px, 2.5vw, 36px); line-height: 1.12; }  /* como "Request your exclusive invitation" */
.iso { width: 52px; margin-top: 44px; }
.whn { margin-top: 20px; font-weight: 500; font-size: clamp(26px, 2.5vw, 36px); line-height: 1.12; }  /* como "Request your exclusive invitation" */
.whn-para { margin-top: 12px; max-width: 405px; font-weight: 400; font-size: clamp(17px, 1.7vw, 20px); line-height: 1.5; }

/* Contador "Only 96" (dinámico, editable por campo personalizado) */
.spots {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--color-text);
  line-height: 1;
}
.spots-word   { font-size: clamp(34px, 5.7vw, 82px); font-weight: 500; line-height: 1; margin-bottom: -0.06em; }  /* 82px Medium italic */
.spots-num    { font-size: clamp(150px, 32.6vw, 470px); font-weight: 700; line-height: 1.18; white-space: nowrap; margin-top: -0.38em; margin-bottom: 0.1em; }  /* 470px Bold italic; márgenes en em → escalan con el número */
.spots-places { font-size: clamp(34px, 5.7vw, 82px); font-weight: 500; line-height: 1; white-space: nowrap; margin-top: -0.12em; }  /* 82px Medium italic */

.reserve-btn {
  width: 100%;
  max-width: 421px;
  height: clamp(58px, 6vw, 74px);
  background: var(--color-text);
  border-radius: 37px;
  border: 0;
  color: var(--color-white);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(18px, 2vw, 26px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 16px;
  cursor: pointer;
  transition: opacity .2s ease;
}
.reserve-btn:hover { opacity: .88; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background: var(--color-footer-bg); color: var(--color-footer-text); }
.foot-inner {
  width: var(--footer-width);
  max-width: var(--container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(30px, 4vw, 40px);
  padding: clamp(48px, 7vw, 80px) 0;
}
.foot-left { display: flex; gap: clamp(20px, 3vw, 40px); align-items: flex-start; }
.foot-logo { width: 65px; flex: none; padding-top: 10px; }
.foot-logo path { fill: var(--color-footer-logo); }
.foot-addr { font-family: var(--font-footer); font-size: clamp(20px, 2.4vw, 27px); font-weight: 400; line-height: 1.33; }
.foot-contact { margin-top: 22px; display: flex; flex-direction: column; gap: 6px; }
.foot-contact a { font-family: var(--font-footer); font-size: clamp(16px, 1.7vw, 20px); font-weight: 300; line-height: 1.4; color: var(--color-footer-text); }
.foot-right { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; }
.foot-links { display: flex; gap: clamp(40px, 7vw, 90px); flex-wrap: wrap; }
.foot-col { display: flex; flex-direction: column; gap: 4px; }
.foot-col a { font-family: var(--font-links); font-weight: 300; color: var(--color-footer-text); }
.foot-col a:hover { text-decoration: underline; }
.foot-col.foot-main a { font-size: clamp(18px, 2vw, 22px); line-height: 1.45; }
.foot-col.foot-legal a { font-size: clamp(15px, 1.6vw, 18px); line-height: 1.33; }
.foot-copy { font-family: var(--font-footer); font-size: 14px; font-weight: 400; line-height: 1.4; }

/* ============================================================
   RESPONSIVE — puntos de colapso (el resto ya es fluido)
   ============================================================ */
@media (max-width: 820px) {
  .form-grid, .mid-grid, .preview-grid, .foot-inner { grid-template-columns: 1fr; }
  .preview-right { align-items: flex-start; }
}
@media (max-width: 520px) {
  .form-last { flex-direction: column; }
  .submit { flex-basis: auto; width: 100%; }
  .hero-text { width: min(78vw, 360px); }
  .reserve-btn, .spots { max-width: 100%; }
}

/* Respaldo si el navegador no soporta container queries:
   fija el tamaño de las pelotas para que el texto no se descuadre. */
@supports not (container-type: inline-size) {
  .ball-txt .lg  { font-size: 39px; }
  .ball-txt .sm  { font-size: 24px; }
  .ball-txt .num { font-size: 86px; }
  .ball-txt .md  { font-size: 50px; }
}