/* =========================================================================
   sections.css : hero, datos, proyecto, atributos, modelos, master plan,
   ubicación, sala de ventas, agendamiento. El master plan vive en página interior.
   Cada sección usa una familia de layout distinta a la anterior.
   ========================================================================= */

/* ------------------------------------------------------------------- hero */

.hero {
  position: relative;
  min-height: 100dvh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
/* El elemento picture es inline por defecto y no llenaría el contenedor: quien
   lleva el recorte es la imagen, pero el envoltorio debe darle la caja entera. */
.hero__media picture { display: block; width: 100%; height: 100%; }
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 58%;
  animation: heroIn 2.4s var(--ease) both;
}
@keyframes heroIn {
  from { transform: scale(1.09); opacity: 0.4; }
  to   { transform: scale(1); opacity: 1; }
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--scrim);
}

.hero__inner {
  width: var(--shell);
  margin-inline: auto;
  padding-block: clamp(3rem, 8vh, 6rem);
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  align-items: end;
  gap: clamp(2rem, 5vw, 5rem);
  color: #fff;
}
.hero h1 { max-width: 20ch; color: #fff; }
.hero h1 em {
  font-style: normal;
  font-weight: 500;
  color: var(--gold);
}
.hero__sub {
  margin-top: 1.6rem;
  max-width: 46ch;
  font-size: var(--step-1u);
  font-weight: 300;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.86);
}
.hero__actions { display: flex; gap: 0.9rem; margin-top: 2.4rem; flex-wrap: wrap; }

.hero__price { border-left: 1px solid rgba(255, 255, 255, 0.28); padding-left: 1.6rem; margin-bottom: 0.4rem; }
.hero__price .figure__label { color: rgba(255, 255, 255, 0.62); }
.hero__price .figure__value {
  font-size: clamp(2.6rem, 4.2vw, 3.6rem);
  color: var(--gold);          /* el hero conserva el dorado aunque el tema cambie */
}
.hero__price .figure__note { color: rgba(255, 255, 255, 0.72); }

@media (max-width: 900px) {
  .hero__inner { grid-template-columns: 1fr; align-items: start; }
  .hero__actions .btn { flex: 1 1 auto; justify-content: center; }

  /* El titular manda: va primero y el valor queda debajo, apoyado en su propio
     fondo oscuro. Sobre la fotografía a este tamaño el dorado se lee mal, y el
     filete vertical del escritorio se pierde. */
  .hero__price {
    margin-top: 2.25rem;
    margin-bottom: 0;
    padding: 1.25rem 1.4rem;
    border-left: 0;
    background: rgba(8, 8, 7, 0.5);
    backdrop-filter: blur(6px);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  }
  .hero__price .figure__value { font-size: clamp(2.2rem, 9vw, 2.9rem); }
}

/* A 393px "Sitios desde 440 m²." pedía exactamente el ancho disponible y caía
   una tercera línea con el "m²." suelto. El titular baja de cuerpo lo justo
   para que cada frase ocupe su línea. */
@media (max-width: 640px) {
  .hero h1 { font-size: clamp(2rem, 9.2vw, 2.6rem); }

  /* Primera pantalla en móvil: titular, valor y las dos acciones. El párrafo
     descriptivo se retira —lo dice la sección siguiente— porque a este ancho
     ocupaba cuatro líneas y empujaba los botones fuera de vista.
     El primer bloque desaparece como caja (display:contents) para que sus
     hijos entren en la misma rejilla que el precio y puedan ordenarse. */
  /* Con los botones al pie de un hero de alto completo, el WhatsApp flotante
     caía sobre la esquina de "Agendar visita". El hero reserva esa franja.
     Los 20px que se descuentan bajan el conjunto: la fotografía nueva sitúa el
     acceso más arriba y deja ese aire libre bajo el portal. */
  .hero__inner { padding-bottom: calc(58px + clamp(1rem, 3vw, 2rem) + 1rem - 20px); }

  /* La toma vertical ya viene encuadrada para esta proporción: se centra y
     apenas se recorta por los costados, sin el desplazamiento que necesitaba
     la horizontal. */
  .hero__media img { object-position: center; }

  /* Con el acceso situado más arriba, el texto descansa sobre el pasto —que
     ya es oscuro— en vez de sobre el cielo. Eso permite un velo mucho más
     liviano que el que pedía el encuadre anterior: medido sobre esta imagen,
     el titular queda en 8,5:1 y el bloque del valor en 15,9:1, de sobra por
     encima del mínimo, y el portal se ve casi limpio. */
  .hero::after {
    background: linear-gradient(
      180deg,
      rgba(13, 13, 12, 0.50) 0%,
      rgba(13, 13, 12, 0.08) 28%,
      rgba(13, 13, 12, 0.24) 48%,
      rgba(13, 13, 12, 0.68) 74%,
      rgba(13, 13, 12, 0.85) 100%
    );
  }

  .hero__inner > div:first-child { display: contents; }
  /* El conjunto está anclado al pie del hero, así que para bajar el titular
     hay que restar espacio por debajo: el margen negativo lo desplaza 30px
     sin mover el valor ni los botones. */
  .hero h1 { order: 1; margin-bottom: -30px; }
  .hero__sub { display: none; }
  .hero__price { order: 2; margin-top: 1.75rem; }
  .hero__actions { order: 3; margin-top: 1.5rem; }

  /* los dos botones comparten la fila en partes iguales */
  .hero__actions { flex-wrap: nowrap; gap: 0.6rem; }
  .hero__actions .btn {
    flex: 1 1 0;
    min-width: 0;
    --btn-pad: 0.95rem 0.5rem;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
  }
}

/* ------------------------------------------------------------ franja datos */

.facts {
  border-block: 1px solid var(--line);
  background: var(--surface);
}
.facts__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }

.facts__item {
  position: relative;
  padding: clamp(2.5rem, 4.5vw, 4rem) clamp(1.25rem, 2.5vw, 2.5rem);
  border-left: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  transition: background 0.6s var(--ease);
}
.facts__item:first-child { border-left: 0; }

/* el icono abre la celda: dorado, fino, del tamaño de un dato */
.facts__item i {
  font-size: 1.75rem;
  line-height: 1;
  color: var(--accent-text);
}

/* hairline dorado que entra por arriba, igual que en las tarjetas */
.facts__item::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: var(--accent-text);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.7s var(--ease);
}
@media (hover: hover) {
  .facts__item:hover { background: var(--surface-2); }
  .facts__item:hover::after { transform: scaleX(1); }
}

.facts__item .figure__value { font-size: clamp(2.2rem, 3.4vw, 3.1rem); }
.facts__item .figure__note { margin-top: 0.55rem; }

/* Las cuatro cifras se leen como conjunto, así que en móvil mantienen la
   cuadrícula de 2x2 en lugar de convertirse en una lista vertical de cuatro
   pantallas de alto. El dato baja de cuerpo para que "1.280 m²" quepa. */
@media (max-width: 780px) {
  .facts__grid { grid-template-columns: repeat(2, 1fr); }
  .facts__item:nth-child(3) { border-left: 0; }
  .facts__item:nth-child(n + 3) { border-top: 1px solid var(--line); }
}
@media (max-width: 560px) {
  .facts__item {
    padding: 1.75rem 1.1rem;
    gap: 0.9rem;
  }
  .facts__item i { font-size: 1.35rem; }
  .facts__item .figure__value { font-size: clamp(1.5rem, 6.4vw, 2rem); }
  .facts__item .figure__note { margin-top: 0.35rem; font-size: 0.78rem; line-height: 1.4; }
}

/* ------------------------------------------- el proyecto (split asimétrico) */

.project__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}
.project__copy p + p { margin-top: 1.5rem; }
.project__copy h2 { margin-bottom: 1.8rem; max-width: 14ch; }
.project__media { position: relative; }
.project__media .frame { aspect-ratio: 4 / 3; }
.project__media img { width: 100%; height: 100%; object-fit: cover; }
.project__media figcaption { margin-top: 1rem; font-size: 0.84rem; color: var(--muted); }
.project__note {
  margin-top: 2.5rem;
  display: flex;
  gap: 3rem;
  flex-wrap: wrap;
}
.project__note > div { flex: 0 1 auto; min-width: 150px; }
.project__note .figure__value { font-size: clamp(1.5rem, 2vw, 1.9rem); }

@media (max-width: 900px) {
  .project__grid { grid-template-columns: 1fr; }
}
/* Los dos datos son un par y se leen comparándolos: en móvil se mantienen lado
   a lado en dos columnas iguales. Con flex y 3rem de separación no cabían y
   uno caía debajo del otro. */
@media (max-width: 560px) {
  .project__note {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
    margin-top: 2rem;
  }
  .project__note > div { min-width: 0; }
  .project__note .figure__value { font-size: clamp(1.25rem, 5.4vw, 1.6rem); }
  .project__note .figure__note { font-size: 0.76rem; line-height: 1.4; }
}

/* ------------------------------------------------------- atributos (bento) */

.attrs { background: var(--surface); }
.attrs__head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
/* el titular cabe en una línea a partir de tablet; en móvil puede quebrar */
@media (min-width: 700px) {
  .attrs__head h2 { white-space: nowrap; }
}
.attrs__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.cell {
  background: var(--surface);
  padding: clamp(1.75rem, 3vw, 2.75rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 250px;
  position: relative;
  overflow: hidden;
}
.cell i { font-size: 1.6rem; color: var(--accent-text); margin-bottom: auto; }
.cell h3 { margin-bottom: 0.6rem; }
.cell p { font-size: 0.92rem; color: var(--muted); }

.cell--a { grid-column: span 3; min-height: 340px; }
.cell--b { grid-column: span 3; min-height: 340px; }
.cell--c { grid-column: span 2; }
.cell--d { grid-column: span 2; }
.cell--e { grid-column: span 2; }
.cell--f { grid-column: span 6; min-height: 200px; }

/* celdas con fondo real, no todas tipográficas */
.cell--media { padding: 0; justify-content: flex-end; }
.cell--media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease);
}
/* borde interior de 1px, el mismo de las tarjetas de modelo */
.cell--media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09);
}
@media (hover: hover) {
  .cell--media:hover img { transform: scale(1.07); }
}
.cell--media > div {
  position: relative;
  z-index: 1;
  padding: clamp(1.75rem, 3vw, 2.75rem);
  background: linear-gradient(0deg, rgba(8, 8, 7, 0.92) 12%, rgba(8, 8, 7, 0) 100%);
  color: #fff;
  width: 100%;
}
.cell--media p { color: rgba(255, 255, 255, 0.82); }

/* celdas tipográficas: el icono se pinta de dorado y aparece el hairline */
.cell:not(.cell--media) { transition: background 0.6s var(--ease); }
.cell:not(.cell--media)::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: var(--accent-text);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.7s var(--ease);
}
@media (hover: hover) {
  .cell:not(.cell--media):hover::after { transform: scaleX(1); }
}

/* sólido, sin degradado: el relleno plano se lee más limpio */
.cell--tint { background: var(--surface-2); }
.cell--f { flex-direction: row; align-items: flex-end; gap: 2rem; flex-wrap: wrap; }
.cell--f i { margin-bottom: 0; }
.cell--f div { flex: 1 1 340px; }

@media (max-width: 900px) {
  .attrs__grid { grid-template-columns: 1fr; }
  .cell { grid-column: span 1 !important; min-height: 230px; }
  .cell--a, .cell--b { min-height: 300px; }

  /* En una columna el texto de esta celda ya no cabe junto al icono y la fila
     envuelve. Como .cell alinea al final, esa envoltura empujaba el icono al
     borde derecho, desalineado con el de las demás celdas. En móvil vuelve a
     comportarse como el resto: icono arriba a la izquierda. */
  .cell--f { flex-direction: column; align-items: stretch; gap: 0; }
  .cell--f i { margin-bottom: auto; }
  .cell--f div { flex: 0 1 auto; }
}

/* ----------------------------------------------- modelos (scroll-snap rail) */

.models__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
  flex-wrap: wrap;
}
.models__nav { display: flex; gap: 0.5rem; }
.models__nav button {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid var(--line-strong);
  cursor: pointer;
  font-size: 1.15rem;
  transition: background 0.3s var(--ease), color 0.3s var(--ease), opacity 0.3s var(--ease);
}
.models__nav button:hover:not(:disabled) { background: var(--paper); color: var(--ink); }
.models__nav button:disabled { opacity: 0.3; cursor: default; }

.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(268px, 25%);
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 0;
  /* barra oculta a propósito: la navegación queda en las flechas, el arrastre
     y las teclas de dirección (el rail es focusable) */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.rail::-webkit-scrollbar { display: none; }

.model { scroll-snap-align: start; }
.model a { display: block; }

.model__img {
  position: relative;
  overflow: hidden;
  aspect-ratio: 2 / 3;                 /* retrato: el render vertical manda */
  background: var(--surface-2);
  transition: transform 0.7s var(--ease), box-shadow 0.7s var(--ease);
}
.model__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease);
}
/* borde interior de 1px: separa el render nocturno del fondo sin marco duro */
.model__img::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09);
}
/* apoyo en la base para que la casa iluminada no se funda con el fondo */
.model__img::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 38%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(0deg, rgba(8, 8, 7, 0.55), transparent);
}

.model__go {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  background: rgba(13, 13, 12, 0.45);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
  color: #fff;
  font-size: 1.05rem;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
}

.model__body { padding-top: 1.4rem; position: relative; }
/* hairline que se pinta de dorado al pasar el cursor */
.model__body::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: var(--line);
}
.model__body::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: var(--accent-text);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.7s var(--ease);
}

.model__name {
  font-family: var(--font-display);
  font-size: 1.18rem;
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--paper);
  margin: 0;
}
.model__area {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 2.4vw, 2.4rem);
  font-weight: 200;
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--accent-text);
}

@media (hover: hover) {
  .model:hover .model__img { transform: translateY(-8px); box-shadow: var(--shadow); }
  .model:hover .model__img img { transform: scale(1.07); }
  .model:hover .model__go { opacity: 1; transform: none; }
  .model:hover .model__body::after { transform: scaleX(1); }
}
/* sin hover disponible, la flecha se muestra siempre */
@media (hover: none) {
  .model__go { opacity: 1; transform: none; }
}
.model a:focus-visible .model__go { opacity: 1; transform: none; }

@media (max-width: 780px) {
  .rail { grid-auto-columns: 74%; }
}

/* --------------------------------------------------- ubicación (mapa + lista) */

.place__grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.place__list { list-style: none; margin: 2.25rem 0 0; padding: 0; display: grid; gap: 0; }
.place__list li {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding-block: 1.05rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.98rem;
  transition: transform 0.5s var(--ease), color 0.5s var(--ease);
}
@media (hover: hover) {
  .place__list li:hover { transform: translateX(0.6rem); }
}
.place__list li:first-child { border-top: 1px solid var(--line); }
.place__list i { color: var(--accent-text); font-size: 1.3rem; opacity: 0.85; }
.place__map {
  position: relative;
  aspect-ratio: 4 / 3;
  filter: grayscale(1) contrast(1.05);
  transition: filter 0.6s var(--ease);
}
.place__map:hover { filter: grayscale(0); }
.place__map iframe { width: 100%; height: 100%; border: 0; display: block; }
.place__map::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09);
}
:root[data-theme="light"] .place__map::before { box-shadow: inset 0 0 0 1px rgba(23, 21, 15, 0.12); }
:root[data-theme="dark"] .place__map { filter: grayscale(1) invert(0.9) hue-rotate(180deg) contrast(0.9); }
:root[data-theme="dark"] .place__map:hover { filter: grayscale(0.3) invert(0.9) hue-rotate(180deg); }

/* El quiebre del titular está escrito, no librado al ancho disponible: en
   escritorio son dos líneas y en móvil tres, una por sintagma. Con un solo <br>
   fijo, en móvil la primera línea se partía por donde cayera. */
.place__title span:last-child { display: block; }
@media (max-width: 640px) {
  .place__title span { display: block; }
}

@media (max-width: 900px) {
  .place__grid { grid-template-columns: 1fr; }
}

/* ------------------------------------------------- sala de ventas + formulario */

/* La banda de sala de ventas lleva su propia fotografía de fondo: es el
   lugar físico al que se invita al visitante, y verlo antes de ir ayuda. */
.visit {
  position: relative;
  isolation: isolate;
  border-top: 1px solid var(--line);
  overflow: hidden;
}
.visit__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.visit__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
.visit::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(8, 8, 7, 0.95) 0%, rgba(8, 8, 7, 0.88) 55%, rgba(8, 8, 7, 0.76) 100%);
}
.visit__grid, .visit__item p, .visit__item a { color: #fff; }
.visit__item h4 { color: rgba(255, 255, 255, 0.78); }
.visit__item::before { background: rgba(255, 255, 255, 0.22); }
.visit__item .gold { color: var(--gold); }
.visit__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 3.5rem);
  padding-block: clamp(3rem, 5vw, 4.5rem);
}
.visit__item { position: relative; padding-top: 1.4rem; }
.visit__item::before,
.visit__item::after { content: ""; position: absolute; inset: 0 0 auto; height: 1px; }
.visit__item::before { background: var(--line); }
.visit__item::after {
  background: var(--accent-text);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.7s var(--ease);
}
@media (hover: hover) { .visit__item:hover::after { transform: scaleX(1); } }
.visit__item h4 {
  font-family: var(--font-text);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  margin: 0 0 0.9rem;
}
.visit__item p { font-size: 1.02rem; line-height: 1.55; }
@media (max-width: 780px) { .visit__grid { grid-template-columns: 1fr; } }

/* Los dos enlaces de esta banda son los de acción directa —el teléfono y la
   descarga del brochure— y en móvil quedaban en 20 y 25px de alto. Se les da
   cuerpo táctil sin separarlos del párrafo al que pertenecen. */
@media (max-width: 640px) {
  .visit__item a { display: inline-block; padding-block: 0.6rem; }
  .visit__item p:has(> a) { margin-top: 0.4rem; }
}

/* Bloque claro deliberado dentro de una página oscura: el calendario de
   GoHighLevel llega en blanco y no se puede tematizar desde su plataforma,
   así que la sección entera adopta el claro en vez de pelear con el iframe. */
.contact {
  background: var(--ink);
  /* el color heredado llega ya resuelto desde <body>, así que la sección debe
     volver a leer el token para que el subárbol tome la paleta clara */
  color: var(--paper);
  border-block: 1px solid var(--line);
}
.contact .lede { color: var(--muted); }
.contact__panel {
  max-width: 980px;
  margin-inline: auto;
  text-align: center;
}
.contact__panel h2 { margin-bottom: 1.25rem; }
.contact__panel > p { margin-inline: auto; }

/* Sin fondo ni marco propios: el widget de GoHighLevel usa el mismo hueso
   que esta sección (#f4f2ed en ambos lados), así que el calendario se funde
   con la página en vez de leerse como una tarjeta pegada encima. */
.booking {
  position: relative;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  background: transparent;
}
/* form_embed.js mide el contenido real y escribe la altura en el style del
   iframe. El min-height es sólo la reserva mientras eso ocurre, y por eso va
   por debajo de lo que el widget pide: si lo supera, gana el min-height y deja
   un bloque en blanco bajo el calendario. En móvil GoHighLevel pide 486px. */
.booking iframe {
  display: block;
  width: 100%;
  border: 0;
  min-height: 620px;
}
@media (max-width: 640px) {
  .booking iframe { min-height: 460px; }
}