/* =====================================================================
   RISE · Inicio
   Coordenadas tomadas de la mesa de trabajo 1 del PDF (ver DESIGN.md).
   ===================================================================== */

/* ---------------------------------------------------------------- hero */
.home-hero { position: relative; height: calc(1243 * var(--u)); overflow: hidden; background: var(--c-ink); }
.home-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Video de fondo: debajo está su primer cuadro como imagen, así que mientras carga no se nota ningún cambio. */
.home-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
@media (min-width: 1200px) and (prefers-reduced-motion: no-preference) {
  /* Con el video de fondo, el hero toma su proporción (1918 × 944): se ve completo, sin recorte ni ampliación
     (a 1920 px de ancho queda a su tamaño real). Con movimiento reducido sigue la foto a 1243 de alto. */
  .home-hero { height: auto; aspect-ratio: 1918 / 944; }
  .home-hero__play { display: none; } /* con el video de fondo no hay botón de play */
}
.home-hero__play {
  position: absolute; left: 50%; top: calc(588 * var(--u)); transform: translateX(-50%);
  width: calc(211 * var(--u)); padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--c-sand); opacity: .6; transition: opacity .3s var(--ease);
}
.home-hero__play:hover { opacity: .8; }
.home-hero__play svg { width: 100%; height: auto; }

/* Modal de video */
.video-modal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 5vw; background: rgb(35 30 31 / .92); }
.video-modal[hidden] { display: none; }
.video-modal__frame { width: min(90vw, 160vh); aspect-ratio: 16 / 9; background: #000; }
.video-modal__frame iframe, .video-modal__frame video { width: 100%; height: 100%; border: 0; display: block; }
.video-modal__close {
  position: absolute; top: 24px; right: 24px; width: 48px; height: 48px; border: 0; border-radius: 50%;
  background: var(--c-paper); color: var(--c-ink); font-size: 28px; line-height: 1; cursor: pointer;
}

/* ---------------------------------------------------------------- banda de socios */
/* Franja "Una visión de:": más baja y con los logos escalados para que el texto mida 22 px. */
.home-band { height: calc(100 * var(--u)); background: var(--c-ink); color: var(--c-paper); }
.home-band__mobile { display: none; } /* solo en móvil (movil.css) */
/* Socios en un renglón centrado: el dibujo original (UNA VISIÓN DE, nest y ANCORE) y luego Alora, con la misma
   separación que hay entre nest y "OFFICES BY:" (49 de 1065.78 del SVG = 41.5) y su rótulo con la letra del SVG. */
.home-band__fila { display: flex; align-items: center; justify-content: center; gap: calc(41.5 * var(--u)); }
.home-band svg.home-band__desktop { flex: none; width: calc(902 * var(--u)); height: auto; }
.home-band__alora { display: flex; align-items: center; gap: calc(18 * var(--u)); flex: none; }
.home-band__alora span { font-size: calc(20.56 * var(--u)); line-height: 1.2; letter-spacing: .03em; white-space: nowrap; }
.home-band__alora img { width: auto; height: calc(20.56 * 1.87 * var(--u)); } /* alto del rótulo de dos renglones: interlineado + mayúscula (0.67 em) */

/* ---------------------------------------------------------------- la torre */
.home-tower { position: relative; height: calc(1088 * var(--u)); background: var(--c-paper); overflow: hidden; }
.home-tower__diagram { position: absolute; left: 0; top: 0; width: calc(1920 * var(--u)); height: auto; pointer-events: none; }
.home-tower__plan { position: absolute; left: calc(1259 * var(--u)); top: calc(156 * var(--u)); width: calc(507 * var(--u)); height: auto; }

.home-tower__levels {
  position: absolute; left: calc(126 * var(--u)); top: calc(138 * var(--u));
  padding-left: calc(23 * var(--u)); border-left: calc(5 * var(--u)) solid var(--c-gold);
  height: calc(179.4 * var(--u)); /* termina con el último renglón (tres niveles), igual que antes con cuatro */
}
.home-tower__levels h2 {
  margin-top: calc(-0.85 * var(--u));
  font-size: var(--fs-lg); line-height: var(--fs-lg); font-weight: 700; letter-spacing: var(--track);
}
.home-tower__levels ul {
  margin-top: calc(43.3 * var(--u));
  font-size: var(--fs-lg); line-height: calc(38.64 * var(--u)); letter-spacing: var(--track);
}
.home-tower__text {
  position: absolute; left: calc(125.6 * var(--u)); top: calc(554.4 * var(--u)); width: calc(634.9 * var(--u));
  font-size: var(--fs-sm); line-height: calc(30 * var(--u)); letter-spacing: var(--track);
}
.home-tower__text .gold { color: var(--c-gold); }

/* ---------------------------------------------------------------- carrusel de amenidades */
.home-carousel { position: relative; height: calc(661 * var(--u)); background: var(--c-ink); color: var(--c-paper); overflow: hidden; }
.carousel__viewport {
  position: absolute; left: 0; right: 0; top: calc(122.3 * var(--u)); outline: none;
  overflow: hidden; /* sin desplazamiento a mano: solo lo mueve el script */
}
.carousel__track { display: flex; gap: calc(37.1 * var(--u)); width: max-content; padding-left: calc(50.8 * var(--u)); }
.carousel__slide { flex: none; width: calc(484.4 * var(--u)); user-select: none; }
.carousel__slide img {
  width: 100%; height: calc(386.7 * var(--u)); object-fit: cover; pointer-events: none;
}
.carousel__slide figcaption {
  margin-top: calc(27.35 * var(--u)); padding-left: calc(4.1 * var(--u));
  font-size: var(--fs-lg); line-height: var(--fs-lg); letter-spacing: var(--track);
}

/* ---------------------------------------------------------------- residencias y oficinas */
.home-partners { position: relative; height: calc(1080 * var(--u)); background: var(--c-ink); overflow: hidden; }
.home-partners__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.home-partners::before, .home-partners::after { content: ""; position: absolute; left: 0; right: 0; pointer-events: none; }
.home-partners::before {
  top: 0; height: calc(220 * var(--u));
  background: linear-gradient(to bottom,
    rgb(35 30 31 / .6) 0%, rgb(35 30 31 / .45) 7%, rgb(35 30 31 / .38) 14%,
    rgb(35 30 31 / .27) 34%, rgb(35 30 31 / .18) 55%, rgb(35 30 31 / .08) 82%, rgb(35 30 31 / 0) 100%);
}
.home-partners::after {
  bottom: 0; height: calc(465 * var(--u));
  background: linear-gradient(to bottom, rgb(35 30 31 / 0) 0%, rgb(35 30 31 / .5) 100%);
}

/* Tres tarjetas (nest, ANCORE y Alora) en fila, centradas e iguales de alto; la de la derecha libra la barra social. */
.home-partners .frame {
  display: flex; justify-content: center; align-items: stretch; gap: calc(50 * var(--u));
  height: auto; padding-top: calc(249 * var(--u));
}
.partner-card {
  position: relative; z-index: 1; flex: none;
  width: calc(530 * var(--u)); min-height: calc(496 * var(--u));
  padding: calc(121.15 * var(--u)) calc(48 * var(--u)) calc(48 * var(--u));
  border-radius: calc(22.5 * var(--u));
  background: var(--c-paper);
  box-shadow: 0 calc(14 * var(--u)) calc(44 * var(--u)) rgb(0 0 0 / .35);
}
.partner-card__tab {
  position: absolute; top: calc(-57 * var(--u)); left: 50%; transform: translateX(-50%);
  width: calc(405 * var(--u)); height: calc(114 * var(--u));
  border-radius: calc(20 * var(--u)); background: var(--c-paper);
  box-shadow: 0 calc(8 * var(--u)) calc(26 * var(--u)) rgb(0 0 0 / .22);
}
/* Pestaña de Alora: rótulo en dos renglones y logo cuadrado a la derecha, como "RESIDENCES BY: nest". */
.partner-card__tab--alora {
  display: flex; align-items: center; justify-content: center; gap: calc(24 * var(--u));
  color: var(--c-ink); white-space: nowrap;
}
.partner-card__by { font-size: calc(17 * var(--u)); line-height: 1.3; letter-spacing: .02em; }
.partner-card__logo { width: auto; height: calc(17 * 1.97 * 1.2 * var(--u)); transform: translateY(calc(-0.7 * var(--u))); } /* 1.2 veces el alto del rótulo de dos renglones; centrado con él (flex) */
.partner-card h3 br { display: none; } /* con el ancho nuevo el título se acomoda solo */
.partner-card__tab svg { position: absolute; height: auto; color: var(--c-ink); }
.partner-card--nest .partner-card__tab svg { left: calc(59 * var(--u)); top: calc(40 * var(--u)); width: calc(287 * var(--u)); }
.partner-card--ancore .partner-card__tab svg { left: calc(37 * var(--u)); top: calc(48 * var(--u)); width: calc(330 * var(--u)); }
.partner-card h3 {
  font-size: var(--fs-lg); line-height: calc(33.6 * var(--u)); font-weight: 700; letter-spacing: var(--track);
}
.partner-card__body {
  margin-top: calc(29.4 * var(--u));
  font-size: var(--fs-sm); line-height: calc(27.5 * var(--u)); letter-spacing: var(--track);
}
.partner-card__body p + p { margin-top: calc(29.5 * var(--u)); }
/* Escritorio: textos de las tarjetas un poco más chicos (título 26 y párrafos 20 en vez de 28 y 22). Va en media
   query porque móvil toma de aquí el tamaño y ahí se quedan como estaban. */
@media (min-width: 1200px) {
  .partner-card h3 { font-size: calc(26 * var(--u)); line-height: calc(31 * var(--u)); }
  .partner-card__body { font-size: calc(20 * var(--u)); line-height: calc(25.5 * var(--u)); }
  .partner-card__body p + p { margin-top: calc(26 * var(--u)); }
}

/* Solo el botón enlaza a Desarrolladores (las pestañas llevan al sitio de cada desarrollador). */
.home-partners__cta {
  position: absolute; z-index: 2; left: calc(648.2 * var(--u)); top: calc(855.2 * var(--u));
  color: var(--c-paper); font-size: var(--fs-lg); line-height: var(--fs-lg); font-weight: 700; letter-spacing: 0;
  text-shadow: 0 calc(2 * var(--u)) calc(14 * var(--u)) rgb(0 0 0 / .55);
}
.home-partners__cta svg { translate: 0 calc(5.6 * var(--u)); } /* centro de la flecha al centro de las minúsculas (translate no choca con el transform del hover) */
.home-partners__cta:hover svg { transform: translateX(calc(6 * var(--u))); }

/* ---------------------------------------------------------------- skyline */
.home-skyline { position: relative; height: calc(1108 * var(--u)); background: var(--c-paper); overflow: hidden; }
/* Todo el dibujo baja 48: así el sol del video y los textos de abajo dejan el mismo aire (56) con los bordes de la sección. */
.home-skyline svg { position: absolute; left: 0; top: calc(48 * var(--u)); width: calc(1920 * var(--u)); height: auto; }
/* Videos que dibujan: escala y posición medidas para calzar con el dibujo fijo que reemplazan.
   Torres: fondo blanco + multiply = el gris exacto de la sección; se recorta a los bordes del frame.
   Montaña: fondo negro + screen = el negro exacto de la sección. */
.home-skyline__video {
  position: absolute; left: calc(-45 * var(--u)); top: calc((-109 + 48) * var(--u)); width: calc(2012.16 * var(--u)); height: auto;
  clip-path: inset(0 2.344% 0 2.236%); mix-blend-mode: multiply; pointer-events: none;
}
.home-certs__video {
  position: absolute; left: 0; top: calc(294 * var(--u)); width: calc(1048.9 * var(--u)); height: auto;
  mix-blend-mode: screen; pointer-events: none;
}

/* ---------------------------------------------------------------- certificaciones */
.home-certs { position: relative; height: calc(376 * var(--u)); background: var(--c-ink); color: var(--c-paper); overflow: hidden; }
.home-certs__text { position: absolute; left: calc(113.9 * var(--u)); top: calc(88.15 * var(--u)); letter-spacing: var(--track); }
.home-certs__text h2 { font-size: var(--fs-lg); line-height: var(--fs-lg); font-weight: 700; }
.home-certs__text p { margin-top: calc(23.5 * var(--u)); font-size: var(--fs-sm); line-height: calc(27.5 * var(--u)); }
.home-certs__nmx {
  position: relative; margin-top: calc(26.4 * var(--u)); padding-left: calc(18 * var(--u));
  font-size: var(--fs-lg); line-height: var(--fs-lg); font-weight: 700;
}
.home-certs__nmx::before { /* línea desde el borde izquierdo */
  content: ""; position: absolute; top: 50%; right: 100%; width: calc(114 * var(--u));
  height: calc(2 * var(--u)); margin-top: calc(-1 * var(--u)); background: var(--c-sand);
}
.home-certs__nmx::after { /* punto amarillo */
  content: ""; position: absolute; top: 50%; left: calc(-32 * var(--u));
  width: calc(32 * var(--u)); height: calc(32 * var(--u)); margin-top: calc(-16 * var(--u));
  border-radius: 50%; background: var(--c-yellow);
}
.home-certs__logos li { position: absolute; }
.home-certs__logos img { width: 100%; height: auto; }
.cert--leed { left: calc(895 * var(--u)); top: calc(88 * var(--u)); width: calc(235 * var(--u)); }
.cert--well { left: calc(1103 * var(--u)); top: calc(108 * var(--u)); width: calc(218 * var(--u)); }
.cert--green-globes { left: calc(1345 * var(--u)); top: calc(143 * var(--u)); width: calc(214 * var(--u)); }
.cert--building-eq { left: calc(1625 * var(--u)); top: calc(114 * var(--u)); width: calc(187 * var(--u)); }
.home-certs__line { position: absolute; left: 0; top: calc(292 * var(--u)); width: calc(1060 * var(--u)); height: auto; }

/* ---------------------------------------------------------------- foto de sala */
.home-living { position: relative; height: calc(676.5 * var(--u)); overflow: hidden; background: var(--c-ink); }
.home-living img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }