/* ═══════════════════════════════════════════════════════════════
   horizontal.css — B2 (franja horizontal: 10 paneles)
   Geometría desktop-first. Todas las medidas vienen de RESEARCH/r4
   convertidas px→rem (÷15, 1rem = 15px @1440 ⇒ 1rem = 1.0416667vw,
   por lo que 96rem == 100vw exactamente).
   Los overrides ≤950px los escribe B4 en mobile.css.
   ═══════════════════════════════════════════════════════════════ */

/* ═══ 0 · PISTA ═══════════════════════════════════════════════ */

.hscroll {
  position: relative;
  width: 100%;
  height: 100svh;
  overflow: hidden;
}

.strip {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  height: 100svh;
}

.panel {
  position: relative;
  flex: 0 0 auto;
  height: 100svh;
}

/* ═══ 1 · flipMedia (componente reutilizable: 2 capas + barrido) ═══
   Variantes --updown / --leftright / --rightleft (r1 §7.2).       */

.flip-media {
  position: relative;
  overflow: hidden;
}
.flip-media__layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
.flip-media .is-up   { z-index: 2; }
.flip-media .is-down { z-index: 1; }

/* ═══ 2 · P1 · INTRO — 1152px = 76.8rem, blanco (r4 §4.2) ═══════ */

.panel--intro { width: 76.8rem; }

/* the divided LOGO on the story panel (client spec): crown-and-key art with
   FIRM beneath it top-left, LUXURY REALTY bottom-right — the logo's own
   engraved lettering (Cinzel = brand artwork) and gold gradients. The key
   sits fully CLEAR of the letters (overlap was flagged). */
.intro__logo {
  position: absolute;
  inset: var(--inset);
  pointer-events: none;
}
.intro__logo-main {
  position: absolute;
  top: 2.9rem; left: 0;              /* below the Property Search pill zone */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-family: "Cinzel", "Fraunces", serif;
  font-weight: 600;
  font-size: 3.1rem;
  line-height: 1;
  letter-spacing: .14em;
  white-space: nowrap;
  background: linear-gradient(180deg, #EAC96E 0%, #C6A24B 48%, #8E6B23 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.intro__logo-key {
  width: 10.6rem;
  height: auto;
  margin-bottom: .5rem;              /* clean air between key and FIRM */
}
.intro__logo-lockup {
  position: absolute;
  right: 0; bottom: 0;
  display: flex;
  align-items: center;
  font-family: "Cinzel", "Fraunces", serif;
  font-weight: 400;
  font-size: 1.9rem;
  line-height: 1.2;
  letter-spacing: .42em;
  text-transform: uppercase;
  white-space: nowrap;
  background: linear-gradient(180deg, #E2BE62 0%, #A8853B 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.intro__logo-lockup::before {
  content: "";
  width: 4.2rem;
  height: 1px;
  flex: none;
  margin-right: 1rem;
  background: linear-gradient(90deg, transparent, #C6A24B);
}

/* 3 title blocks: auto/auto grid (2 on row 1, 1 on row 2), measured at
   x 296.7 / 603.9 and y 255.5 / 404.8 (step 141.8 + 7.5).
   Col 1 stays 20.48rem so block 2 keeps its designed x-anchor; col 2 is
   widened 16.75 → 18.9rem for the English lines ("TO THOSE"/"WHO HOLD"
   ≈ 18.8rem at 3.5rem Archivo) — last column, nothing sits to its right. */
.intro__titles {
  position: absolute;
  left: 19.78rem;
  top: 17.03rem;
  display: grid;
  grid-template-columns: 20.48rem 18.9rem;
  column-gap: 0;
  row-gap: .5rem;
  font-weight: 400;
}
.intro__t {
  display: block;
  font-family: var(--f-izmir);
  font-size: var(--t-titulo-xxl);
  line-height: var(--t-titulo-xxl-lh-less);   /* lh-less .9 → 47.25px */
  text-transform: uppercase;
  letter-spacing: var(--ls-display);
  white-space: nowrap;                        /* los <br> marcan las líneas;
                                                 los .char no deben partir palabras */
}
.intro__t--3 { grid-column: 1; }
.intro__t em {
  font-family: var(--f-medium);
  font-weight: 500;
  font-style: italic;
}

.intro__text {
  position: absolute;
  left: 41.85rem;
  top: 32rem;   /* lifted from 34.92 — clears the wider English corner lockup */
  width: 14.17rem;
  font-size: var(--t-parrafo);
  line-height: var(--t-parrafo-lh);
}

/* rail vertical: fila flex rotada −90° sobre su esquina inferior derecha */
.intro__menu {
  position: absolute;
  top: calc(var(--inset) - 1.15rem);
  right: var(--inset);
  display: flex;
  gap: 1.2rem;
  transform: rotate(-90deg);
  transform-origin: bottom right;
  font-size: var(--t-parrafo);
  line-height: var(--t-parrafo-lh);
  text-transform: uppercase;
  white-space: nowrap;
}

.intro__copyright {
  position: absolute;
  left: var(--inset);
  bottom: var(--inset);
  font-size: var(--t-subtitulo);
  line-height: var(--t-subtitulo-lh);
  text-transform: uppercase;
}

/* ═══ 3 · P2/P6 · IMÁGENES — 1317 / 1280 (r4 §4.3) ══════════════ */

.panel--images { overflow: clip; }
.panel--images.is-principal  { width: 87.8rem; padding-right: 7.84rem; }  /* 117.63px */
.panel--images.is-secundario { width: 85.3rem; padding-right: 17.18rem; } /* 257.76px */
.panel--images .flip-media { width: 100%; height: 100%; }

/* ═══ 4 · P3 · DECLARACIÓN — 1203px = 80.2rem (r4 §4.4) ═════════ */

.panel--statement { width: 80.2rem; }

.statement__title {
  position: absolute;
  left: 7.99rem;              /* col(1) + inset */
  top: 22rem;                 /* y 330 */
  width: 68.93rem;            /* 1033.9 */
  font-weight: 400;
}
.statement__line {
  display: block;
  overflow: clip;
  overflow-clip-margin: .14em;
  font-family: var(--f-regular);
  font-weight: 300;
  font-size: var(--t-supertitulo);
  line-height: var(--t-supertitulo-lh-less);  /* 87.75px */
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
}
.statement__shift { display: inline-block; }

.statement__text {
  position: absolute;
  left: 7.99rem;
  top: 50.3rem;               /* y 754.5 */
  width: 21.24rem;            /* 318.6 */
  font-size: var(--t-parrafo);
  line-height: var(--t-parrafo-lh);
}

/* ═══ 5 · P4 · PANEL NEGRO — 2333px = 155.5rem (r4 §4.5) ════════ */

.panel--dark {
  width: 155.5rem;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  padding-left: calc(var(--inset) - 2px);   /* costura deliberada */
  padding-right: var(--inset);
}
.dark__media-a {
  flex: 0 0 auto;
  width: 53.39rem;                 /* col(7)+gap*6 = 800.9 */
  aspect-ratio: 944 / 756;
  margin-left: calc(var(--grid-gap) * -1);
  margin-right: var(--grid-gap);
}
.dark__text {
  flex: 0 0 auto;
  width: 61.24rem;                 /* col(8)+gap*7 = 918.5 */
  padding: 0 var(--inset);
  align-self: center;
  font-family: var(--f-regular);
  font-weight: 300;
  font-size: var(--t-titulo-xl);   /* 45px */
  line-height: var(--t-titulo-xl-lh);
}
.dark__media-b {
  flex: 0 0 auto;
  width: 29.87rem;                 /* col(4)+gap*3 = 448 */
  aspect-ratio: 441 / 451;
  margin-right: 7.84rem;           /* col(1)+gap */
  align-self: flex-end;
  margin-bottom: 9rem;
}

/* ═══ 6 · P5 · BANDA VALORES — 214px = 14.27rem (r4 §4.6) ═══════
   Marquesina horizontal de 1.5em de alto, empujada un viewport hacia
   abajo y rotada −90° sobre su esquina superior izquierda.          */

.panel--band {
  width: 14.27rem;
  overflow: hidden;
  z-index: 10;
}
.band__content {
  position: absolute;
  top: 100svh;
  left: 0;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 2.5rem;
  height: 1.5em;
  padding: 0 2.5rem;
  background: var(--beige);
  font-size: var(--t-supertitulo-l);      /* 142.5px ⇒ 1.5em = 213.75px */
  transform: rotate(-90deg);
  transform-origin: top left;
}
.band__group {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 2.5rem;
}
.band__word {
  font-family: var(--f-regular);
  font-weight: 300;
  font-size: var(--t-supertitulo);        /* 97.5px */
  line-height: var(--t-supertitulo-lh);
  text-transform: uppercase;
  white-space: nowrap;
}
.band__star {
  display: block;
  flex: 0 0 auto;
  width: .75em;                           /* 106.9px */
  aspect-ratio: 1;
}
.band__star svg { display: block; width: 100%; height: 100%; }

/* ═══ 7 · P7 · VALORES / TERMS — 1630px = 108.7rem (r4 §4.7) ════ */

.panel--terms {
  width: 108.7rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  padding: var(--inset);
  overflow: visible;               /* la imagen-cursor debe poder salir */
}

/* sin z-index propio: los hijos deben competir en el contexto del panel
   para que el blend `difference` del título vea la foto por debajo */
.term {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  width: 100%;
}
.term--1 { padding-left: 9.04rem; }    /* 135.6 */
.term--2 { padding-right: 2.26rem; }   /*  33.9 */
.term--3 { padding-left: 15.07rem; }   /* 226.0 */

.term__single {
  order: -1;
  width: 15.92rem;                 /* 238.8 */
  min-width: 15.92rem;
  margin-left: 7.84rem;            /* col(1)+gap */
  margin-right: 10.38rem;          /* col(1.4)+gap*.4+gap */
  font-size: var(--t-parrafo);
  line-height: var(--t-parrafo-lh);
  opacity: 0;
}

.term__num {
  align-self: flex-start;
  margin-right: .8rem;
  font-family: var(--f-edit);
  font-size: var(--t-parrafo);
  line-height: var(--t-parrafo-lh);
}

/* difference + capa invert(1): las letras se invierten sobre la foto */
.term__title {
  position: relative;
  display: inline-block;
  z-index: 20;
  mix-blend-mode: difference;
  font-size: var(--t-supertitulo-l);            /* 142.5px */
  line-height: var(--t-supertitulo-l-lh);       /* lh-less2 .85 → 121.1px; var so the 1024 re-base tracks */
  text-transform: uppercase;
  white-space: nowrap;
}
.term__filter {
  position: absolute;
  inset: 0;
  filter: invert(1);
  pointer-events: none;
}
.term__color { position: relative; color: var(--black); }

/* "DISCRETION" (10 wide Bodoni caps) runs ≈4rem wider than the Spanish
   "SERENIDAD" the 108.7rem panel was measured for — at max drift (+6vw,
   horizontal.js) it would poke past the panel edge over the next panel
   (overflow:visible). Scaled to width parity; other two titles fit. */
.term--1 .term__title {
  font-size: calc(var(--t-supertitulo-l) * .932);     /* 8.85rem @ desktop */
  line-height: calc(var(--t-supertitulo-l-lh) * .932);/* token-relative so the ≤1024 halved tokens keep the ratio */
}

/* cursor sustituto: 270×270 con 3 capas apiladas */
.follow-mouse {
  position: absolute;
  top: 0; left: 0;
  z-index: 10;
  width: 18rem;                    /* 270px */
  aspect-ratio: 1;
  overflow: clip;
  opacity: 0;
  pointer-events: none;
}
.follow-mouse img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
.follow-mouse img.prev { z-index: 2; }
.follow-mouse img.on   { z-index: 3; }

/* ═══ 8 · P8 · PROYECTOS (r4 §4.8) ══════════════════════════════ */

.panel--projects {
  display: flex;
  flex-wrap: nowrap;
  z-index: 10;
  /* ancho FIJO al estado final (wrap-text 25.03 + 5 tarjetas × 57.6):
     como el sizeProjects=220vw del original — la franja nunca cambia de
     largo y los triggers posteriores (cierre) calculan bien su posición */
  width: 313.03rem;
}

.projects__wrap-text {
  position: relative;
  flex: 0 0 auto;
  width: 25.03rem;                 /* 375.4 */
  height: 100svh;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  padding: var(--grid-gap);
}
.projects__intro {
  width: 17.5rem;                  /* 262.5 */
  font-size: var(--t-parrafo);
  line-height: var(--t-parrafo-lh);
}

.proj {
  position: relative;
  flex: 0 0 auto;
  width: 14.4rem;                  /* 216 → JS lo lleva a 57.6rem */
  height: 100svh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: none;                /* anula el sellador de costura */
}
.proj.bg-beige { --card: var(--beige); }
.proj.bg-grey  { --card: var(--grey); }
.proj.bg-blue  { --card: var(--blue); }

.proj__media {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 87svh;                   /* JS → 66.6svh al desplegarse */
  flex: 0 0 auto;
  overflow: hidden;
}
.proj__media img { width: 100%; height: 100%; object-fit: cover; }

.proj__data {
  position: relative;
  flex: 1;
  width: 100%;
  display: grid;
  place-items: center;
  --margin: var(--inset-card);     /* 18.75px */
  z-index: 1;
}
.proj__name {
  font-size: var(--t-titulo-xxl);
  line-height: var(--t-titulo-xxl-lh);
  font-weight: 400;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  padding: var(--margin);
}
.proj__year,
.proj__place,
.proj__num,
.proj__btn { position: absolute; }
.proj__year,
.proj__place { overflow: hidden; }
.proj__year > span,
.proj__place > span { display: block; }

.proj__year {
  top: var(--margin); left: var(--margin);
  font-family: var(--f-edit);
  font-size: var(--t-parrafo-l);
  line-height: var(--t-parrafo-l-lh);
}
.proj__place {
  top: var(--margin); right: var(--margin);
  text-align: right;
  font-size: var(--t-parrafo-l);
  line-height: var(--t-parrafo-l-lh);
}
.proj__num {
  bottom: var(--margin); left: var(--margin);
  font-size: var(--t-parrafo);
  line-height: var(--t-parrafo-lh);
}
.proj__btn {
  bottom: var(--margin); right: var(--margin);
  background: var(--card, var(--beige));
  color: var(--black);
  white-space: nowrap;
}

/* tarjeta 5 · columna apilada + baldosa "Ver todas" (216×225) */
.proj__mini {
  position: absolute;
  top: 0; right: 0;
  z-index: 3;
  width: 14.4rem;
  transform: translateY(100svh);
}
.proj__mini figure {
  position: relative;
  width: 100%;
  height: 33.33svh;
  overflow: hidden;
}
.proj__seeall {
  display: grid;
  place-items: center;
  width: 100%;
  height: 15rem;                   /* 225 */
  font-family: var(--f-edit);
  font-size: var(--t-parrafo-l);
  line-height: var(--t-parrafo-l-lh);
  color: var(--black);
}
.proj--last .proj__place,
.proj--last .proj__btn { right: calc(14.4rem + var(--margin)); }

/* ═══ 9 · P9 · SPACER (r4 §4.9) ═════════════════════════════════
   The original fills this stretch with the last card travelling in X;
   we collapse it and give its travel to the cierre (near-black ink on
   screen ~2 viewports while the content counter-scrolls). ═══ */

.panel--pin {
  width: 0;
  z-index: 1;
  pointer-events: none;
}

/* ═══ 10 · P10 · CIERRE — 2160+2880px = 336rem (r4 §4.9) ════════
   Ground is near-black ink via .bg-ink (core.css utility, seam shadow
   included) — gold is never a large surface. No color rules needed
   here: the media frame is borderless and the panel holds no text. ═ */

.panel--cierre { width: 336rem; z-index: 15; }
.cierre__content {
  position: relative;
  width: 96rem;                    /* exactamente 1 viewport */
  height: 100svh;
  display: grid;
  place-items: center;
  overflow: clip;
}
.cierre__media {
  width: 61.2rem;                  /* col(8)+gap*7 = 918.5 */
  height: 34.4rem;                 /* 516.2 */
}