:root {
  --ink: #16251f;
  --ink-soft: #314239;
  --paper: #f4f0e6;
  --mist: #e7eadf;
  --forest: #1e3a28;
  --leaf: #2d5a3f;
  --moss: #6f8e55;
  --sun: #c3a05d;
  --sun-bright: #e0b24a;
  --stone: #9c8b73;
  --white: #fffdf7;
  --shadow: 0 24px 80px rgb(18 30 24 / 24%);
  --max: 1180px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

.site-header {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px clamp(18px, 4vw, 54px);
  color: var(--white);
  transition:
    background 240ms ease,
    color 240ms ease,
    box-shadow 240ms ease;
}

.site-header.is-solid {
  color: var(--ink);
  background: rgb(244 240 230 / 80%);
  box-shadow: 0 8px 34px rgb(22 37 31 / 10%);
  backdrop-filter: blur(18px);
}

.brand {
  display: inline-flex;
  align-items: center;
  width: clamp(172px, 17vw, 248px);
  height: clamp(56px, 5.8vw, 76px);
  border: 1px solid rgb(255 253 247 / 28%);
  border-radius: 999px;
  padding: 7px 14px;
  background: rgb(18 30 24 / 30%);
  box-shadow: 0 14px 42px rgb(0 0 0 / 18%);
  backdrop-filter: blur(16px);
}

.site-header.is-solid .brand {
  background: rgb(255 253 247 / 72%);
  border-color: rgb(22 37 31 / 10%);
}

.brand img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.nav-links {
  display: flex;
  gap: clamp(16px, 3vw, 34px);
  align-items: center;
  font-size: 0.88rem;
  font-weight: 650;
}

.nav-links a {
  opacity: 0.86;
}

.nav-links a:hover {
  opacity: 1;
}

.header-cta,
.primary-action,
.secondary-action,
.whatsapp-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0 20px;
  font-weight: 800;
}

.header-cta,
.primary-action,
.whatsapp-action {
  color: var(--ink);
  background: var(--sun-bright);
}

.secondary-action {
  color: var(--white);
  border-color: rgb(255 253 247 / 52%);
  background: rgb(255 253 247 / 10%);
  backdrop-filter: blur(12px);
}

.story {
  position: relative;
  min-height: 620vh;
  color: var(--white);
  background: var(--forest);
}

.media-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 620px;
  overflow: hidden;
  background: var(--forest);
}

.scroll-video,
.poster-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* `cover` en todos los tamanos: el video llena la pantalla y ya no hace
     falta la copia desenfocada del poster para tapar las franjas. */
  object-fit: cover;
  object-position: center center;
  transform: scale(var(--media-scale, 1.01));
}

.scroll-video {
  z-index: 1;
  opacity: 0;
  filter: saturate(1.1) contrast(1.03) brightness(1.04);
  transition: opacity 420ms ease;
}

.scroll-video.is-ready {
  opacity: 1;
}

.poster-fallback {
  z-index: 0;
  opacity: 1;
  transition:
    transform 160ms linear,
    opacity 420ms ease;
}

.scroll-video.is-ready + .poster-fallback {
  opacity: 0;
}

/* Sin la copia desenfocada del poster el video entra mucho mas claro, asi que
   el velo carga un poco mas para que el texto blanco siga siendo legible
   sobre las tomas de pasto y cielo abierto. */
.shade {
  position: absolute;
  z-index: 2;
  inset: 0;
  background:
    linear-gradient(90deg, rgb(5 13 10 / 62%) 0%, rgb(5 13 10 / 24%) 52%, rgb(5 13 10 / 38%) 100%),
    linear-gradient(180deg, rgb(5 13 10 / 34%) 0%, rgb(5 13 10 / 6%) 42%, rgb(5 13 10 / 46%) 100%);
}

/* El hero vive en la banda libre entre el header fijo y la barra de progreso.
   Centrarlo con top:50% hacia que en pantallas bajas el eyebrow y el logo se
   metieran debajo del header. Los tamanos de abajo tambien miran la altura de
   la ventana (vh) para que el bloque quepa en la banda sin desbordarse. */
.story-overlay {
  position: fixed;
  z-index: 4;
  display: flex;
  flex-direction: column;
  justify-content: center;
  left: clamp(20px, 7vw, 96px);
  top: clamp(92px, 12vh, 132px);
  bottom: clamp(54px, 9vh, 96px);
  width: min(760px, calc(100vw - 40px));
  transition:
    opacity 260ms ease,
    transform 260ms ease;
  text-shadow: 0 2px 24px rgb(0 0 0 / 42%);
}

.hero-logo {
  display: block;
  width: min(300px, 64vw, 17vh);
  margin: 0 0 clamp(12px, 2.4vh, 24px);
  filter: drop-shadow(0 16px 34px rgb(0 0 0 / 32%));
}

.story-overlay.is-past {
  pointer-events: none;
  opacity: 0;
  transform: translateY(-22px);
}

.eyebrow {
  margin: 0 0 18px;
  color: var(--sun);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.eyebrow.dark {
  color: var(--leaf);
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  max-width: 11ch;
  margin-bottom: clamp(12px, 2.2vh, 22px);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.6rem, min(8.4vw, 8.6vh), 8rem);
  font-weight: 500;
  line-height: 0.88;
}

.intro {
  width: min(620px, 100%);
  margin-bottom: clamp(14px, 2.6vh, 28px);
  color: rgb(255 253 247 / 92%);
  font-size: clamp(0.94rem, min(1.7vw, 2.1vh), 1.2rem);
  line-height: 1.6;
}

.hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 clamp(14px, 2.6vh, 28px);
}

.hero-facts span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  border: 1px solid rgb(255 253 247 / 28%);
  border-radius: 999px;
  padding: 0 13px;
  color: rgb(255 253 247 / 94%);
  background: rgb(255 253 247 / 9%);
  box-shadow: 0 12px 28px rgb(0 0 0 / 12%);
  backdrop-filter: blur(14px);
  font-size: 0.82rem;
  font-weight: 850;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.scene-panel {
  position: fixed;
  z-index: 5;
  right: clamp(18px, 5vw, 70px);
  bottom: clamp(70px, 10vh, 110px);
  width: min(470px, calc(100vw - 36px));
  padding-left: 28px;
  border-left: 2px solid var(--sun);
  color: var(--white);
  text-shadow: 0 2px 22px rgb(0 0 0 / 40%);
  transition:
    opacity 260ms ease,
    transform 260ms ease;
}

.scene-panel.is-hidden {
  pointer-events: none;
  opacity: 0;
  transform: translateY(20px);
}

.scene-panel span {
  display: block;
  margin-bottom: 12px;
  color: var(--sun);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.scene-panel h2 {
  margin-bottom: 12px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.9rem, 4vw, 3.5rem);
  font-weight: 500;
  line-height: 0.98;
}

.scene-panel p {
  margin-bottom: 0;
  color: rgb(255 253 247 / 92%);
  font-size: 1rem;
  line-height: 1.65;
}

.scroll-progress {
  position: fixed;
  z-index: 8;
  left: clamp(18px, 4vw, 54px);
  right: clamp(18px, 4vw, 54px);
  bottom: 28px;
  height: 3px;
  overflow: hidden;
  background: rgb(255 253 247 / 24%);
}

.scroll-progress span {
  display: block;
  width: calc(var(--story-progress, 0) * 100%);
  height: 100%;
  background: var(--sun);
}

.story-spacer {
  position: relative;
  z-index: 3;
}

.story:not(.is-active) .story-overlay,
.story:not(.is-active) .scene-panel,
.story:not(.is-active) .scroll-progress {
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}

.scene-marker {
  height: 112vh;
}

.lots-section,
.contact-section,
.location-section,
.seo-section {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(320px, 1.1fr);
  gap: clamp(34px, 7vw, 94px);
  align-items: start;
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(82px, 13vw, 150px) clamp(20px, 5vw, 40px);
}

.section-copy,
.contact-copy {
  position: sticky;
  top: 120px;
}

.section-copy h2,
.contact-copy h2 {
  margin-bottom: 20px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.3rem, 5.4vw, 5.1rem);
  font-weight: 500;
  line-height: 0.96;
}

.section-copy p,
.contact-copy p {
  color: var(--ink-soft);
  font-size: 1.04rem;
  line-height: 1.75;
}

.lot-grid {
  display: grid;
  gap: 14px;
}

.lot-item {
  min-height: 210px;
  border: 1px solid rgb(22 37 31 / 16%);
  border-radius: 8px;
  padding: clamp(24px, 4vw, 38px);
  background: var(--white);
  box-shadow: 0 18px 56px rgb(22 37 31 / 8%);
}

.lot-item span {
  display: block;
  margin-bottom: 42px;
  color: var(--moss);
  font-weight: 900;
}

.lot-item h3 {
  margin-bottom: 12px;
  font-size: clamp(1.35rem, 2vw, 1.75rem);
}

.lot-item p {
  margin-bottom: 0;
  color: var(--ink-soft);
  line-height: 1.65;
}

.location-section {
  max-width: none;
  margin: 0;
  padding: clamp(84px, 12vw, 150px) clamp(20px, 5vw, 64px);
  background:
    linear-gradient(135deg, rgb(30 58 40 / 96%), rgb(18 37 29 / 96%)),
    var(--forest);
  color: var(--white);
}

.location-copy {
  max-width: 640px;
}

.location-copy h2 {
  margin-bottom: 22px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.4rem, 5.8vw, 6rem);
  font-weight: 500;
  line-height: 0.94;
}

.location-copy p {
  color: rgb(255 253 247 / 78%);
  font-size: 1.06rem;
  line-height: 1.75;
}

.location-panel {
  display: grid;
  gap: 12px;
  align-self: stretch;
}

.location-panel div {
  display: grid;
  align-content: end;
  min-height: 150px;
  border: 1px solid rgb(255 253 247 / 16%);
  border-radius: 8px;
  padding: clamp(22px, 4vw, 34px);
  background:
    linear-gradient(135deg, rgb(255 253 247 / 12%), rgb(255 253 247 / 4%));
}

.location-panel span,
.location-panel strong {
  display: block;
}

.location-panel span {
  margin-bottom: 6px;
  color: var(--sun-bright);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.2rem, 5vw, 5.6rem);
  font-weight: 500;
  line-height: 0.94;
}

.location-panel strong {
  color: rgb(255 253 247 / 78%);
  text-transform: uppercase;
}

.amenities-section {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid rgb(22 37 31 / 12%);
  border-bottom: 1px solid rgb(22 37 31 / 12%);
  background: var(--white);
}

.amenities-section article {
  min-height: 190px;
  border-right: 1px solid rgb(22 37 31 / 12%);
  padding: clamp(24px, 4vw, 42px);
}

.amenities-section article:last-child {
  border-right: 0;
}

.amenities-section span {
  display: block;
  margin-bottom: 42px;
  color: var(--sun);
  font-weight: 900;
}

.amenities-section h3 {
  margin-bottom: 0;
  font-size: clamp(1.2rem, 2vw, 1.8rem);
}

.details-section {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background:
    linear-gradient(90deg, rgb(22 37 31 / 4%), rgb(22 37 31 / 0%)),
    var(--forest);
  color: var(--white);
}

.metric {
  min-height: 210px;
  padding: clamp(28px, 6vw, 64px);
  border-right: 1px solid rgb(255 253 247 / 18%);
}

.metric:last-child {
  border-right: 0;
}

.metric strong,
.metric span {
  display: block;
}

.metric strong {
  margin-bottom: 8px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.5rem, 6vw, 6.5rem);
  font-weight: 500;
  line-height: 0.92;
}

.metric span {
  color: rgb(255 253 247 / 72%);
  font-weight: 800;
  text-transform: uppercase;
}

.contact-section {
  align-items: center;
}

.seo-section {
  align-items: start;
  background:
    linear-gradient(180deg, rgb(244 240 230 / 100%), rgb(231 234 223 / 100%));
}

.faq-list {
  display: grid;
  gap: 12px;
}

.faq-list details {
  border: 1px solid rgb(22 37 31 / 14%);
  border-radius: 8px;
  background: var(--white);
  box-shadow: 0 12px 36px rgb(22 37 31 / 6%);
}

.faq-list summary {
  cursor: pointer;
  padding: 20px 22px;
  color: var(--ink);
  font-weight: 900;
}

.faq-list p {
  margin: 0;
  padding: 0 22px 22px;
  color: var(--ink-soft);
  line-height: 1.65;
}

.contact-card {
  display: grid;
  gap: 16px;
  border: 1px solid rgb(22 37 31 / 14%);
  border-radius: 8px;
  padding: clamp(26px, 5vw, 46px);
  background: var(--white);
  box-shadow: var(--shadow);
}

.contact-label {
  color: var(--sun);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.contact-card h3 {
  margin-bottom: 2px;
  font-size: clamp(1.65rem, 3vw, 2.65rem);
  line-height: 1.05;
}

.contact-card p,
.contact-card small {
  color: var(--ink-soft);
  line-height: 1.65;
}

.contact-card small {
  display: block;
  font-weight: 750;
}

.instagram-link {
  display: inline-flex;
  margin-top: 6px;
  color: var(--leaf);
  font-weight: 900;
}

.whatsapp-action {
  min-height: 50px;
  font-weight: 900;
}

@media (max-width: 820px) {
  .site-header {
    padding: 14px 16px;
  }

  .brand {
    width: 150px;
    height: 48px;
    padding: 6px 10px;
  }

  .nav-links {
    display: none;
  }

  .header-cta {
    min-height: 40px;
    padding: 0 14px;
    font-size: 0.85rem;
  }

  .story {
    min-height: 610vh;
  }

  .media-stage {
    height: 100dvh;
    min-height: 0;
  }

  /* En telefono el header es mas bajo y el bloque se apoya abajo, sobre las
     acciones, en vez de centrarse. */
  .story-overlay {
    justify-content: flex-end;
    top: 84px;
    bottom: clamp(52px, 8vh, 88px);
    left: 18px;
    width: calc(100vw - 36px);
  }

  .story-overlay.is-past {
    transform: translateY(16px);
  }

  .eyebrow {
    margin-bottom: clamp(8px, 1.6vh, 14px);
    font-size: 0.72rem;
  }

  .hero-logo {
    width: min(150px, 13vh);
    margin-bottom: clamp(8px, 1.6vh, 14px);
  }

  h1 {
    max-width: 12ch;
    margin-bottom: clamp(8px, 1.6vh, 14px);
    font-size: clamp(2rem, min(11.5vw, 7.4vh), 3.6rem);
  }

  .intro {
    margin-bottom: clamp(10px, 1.8vh, 16px);
    font-size: clamp(0.84rem, min(3.6vw, 2vh), 0.98rem);
    line-height: 1.5;
  }

  .hero-facts {
    gap: 6px;
    margin-bottom: clamp(10px, 1.8vh, 16px);
  }

  .hero-facts span {
    min-height: 30px;
    padding: 0 10px;
    font-size: 0.72rem;
  }

  .hero-actions {
    gap: 10px;
  }

  .primary-action,
  .secondary-action {
    min-height: 44px;
  }

  .hero-actions a {
    flex: 1 1 180px;
  }

  .scene-panel {
    right: 18px;
    bottom: 74px;
    padding-left: 18px;
  }

  .scene-panel h2 {
    font-size: clamp(1.85rem, 9vw, 2.8rem);
  }

  .scene-panel p {
    font-size: 0.95rem;
    line-height: 1.55;
  }

  .lots-section,
  .contact-section,
  .location-section,
  .seo-section,
  .details-section,
  .amenities-section {
    grid-template-columns: 1fr;
  }

  .section-copy,
  .contact-copy {
    position: static;
  }

  .location-section {
    padding-inline: 20px;
  }

  .amenities-section article {
    min-height: auto;
    border-right: 0;
    border-bottom: 1px solid rgb(22 37 31 / 12%);
  }

  .amenities-section article:last-child {
    border-bottom: 0;
  }

  .metric {
    min-height: auto;
    border-right: 0;
    border-bottom: 1px solid rgb(255 253 247 / 18%);
  }

  .metric:last-child {
    border-bottom: 0;
  }
}

/* Telefonos de pantalla corta (SE, minis, o Safari con la barra desplegada):
   el logo del hero repite el del header y es lo primero que sobra cuando el
   bloque no alcanza a caber sin invadir la franja del header. */
@media (max-width: 820px) and (max-height: 720px) {
  h1 {
    font-size: clamp(2rem, min(10vw, 7vh), 2.9rem);
  }

  .intro {
    font-size: 0.86rem;
    line-height: 1.45;
  }

  .hero-facts span {
    min-height: 28px;
    font-size: 0.68rem;
  }
}

/* Pantallas muy bajas: el logo del hero repite el del header y las chips
   repiten datos de la seccion de lotes. Se ceden los dos antes que dejar el
   titular metido debajo del header. */
@media (max-width: 820px) and (max-height: 620px) {
  .hero-logo,
  .hero-facts {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}