/* ============================================================================
   Grupo INSAAT · Monografía de arquitectura
   Page-local styles. scrollcraft.css is the mechanism and is never edited;
   everything here is composition, themed from the brand's two colours:
   arena #AB9B80 and verde carbón #262C2A.
   ========================================================================== */

:root {
  /* INSAAT brand, measured on grupoinsaat.com (2026-10-17):
     headings Trebuchet MS, body system sans, white ground, charcoal green
     #262C2A, sand #AB9B80, slate #3A4F66 for body and menu, light grey #E4E4E4. */
  --sc-canvas:     #FFFFFF;
  --sc-surface:    #F2F2F2;
  --sc-ink:        #262C2A;
  --sc-ink-soft:   #3A4F66;
  --sc-accent:     #AB9B80;
  --sc-accent-ink: #262C2A;
  --sc-font-display: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Segoe UI", sans-serif;
  --sc-font-text:    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --sc-shadow-color: 210 20% 20%;

  --arena:        #E4E4E4;    /* the site's light grey ground */
  --arena-soft:   #3A4F66;    /* slate on grey, 6.7:1 */
  --arena-texto:  #8C7B5F;    /* sand for large type on white (the brand sand is 2.6:1 there) */
  --carbon:       #262C2A;
  --hueso:        #FFFFFF;
  --hueso-soft:   #C3C8CC;    /* secondary ink on charcoal, 8:1 */
  --arena-claro:  #AB9B80;    /* brand sand on charcoal, 5:1 */

  --r: 4px;
  --cornisa-h: 3.5rem;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
}

html { background: var(--sc-canvas); }
body { font-weight: 400; font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem); letter-spacing: 0.005em; }
.sc-grain { opacity: 0.035; mix-blend-mode: multiply; z-index: 70; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; left: var(--sc-4); top: var(--sc-4); z-index: 100; padding: var(--sc-2) var(--sc-4); background: var(--carbon); color: var(--hueso); transform: translateY(-200%); }
.skip:focus-visible { transform: none; }

/* ------------------------------------------------------------------ type -- */
h1, h2, h3 { font-family: var(--sc-font-display); font-weight: 700; margin: 0; text-wrap: balance; font-optical-sizing: auto; }
p { margin: 0; }
.etiqueta {
  font-family: var(--sc-font-text); font-size: 0.75rem; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--sc-ink-soft);
}
.titulo-capitulo { font-size: clamp(2.4rem, 1.6rem + 3.2vw, 4.6rem); line-height: 1; letter-spacing: -0.02em; }
.cuerpo { color: var(--sc-ink-soft); max-width: 42ch; text-wrap: pretty; line-height: 1.6; }

.logo { display: inline-block; background: currentColor; -webkit-mask: var(--m) no-repeat center / contain; mask: var(--m) no-repeat center / contain; }
.logo--insaat  { --m: url("assets/logo-insaat.png");  aspect-ratio: 1600 / 266; }
.logo--somundy { --m: url("assets/logo-somundy.png"); aspect-ratio: 1600 / 426; }
.logo--obraa   { --m: url("assets/logo-obraa.png");   aspect-ratio: 1600 / 391; }
.logo--stelkor { --m: url("assets/logo-stelkor.png"); aspect-ratio: 1600 / 230; }

/* The one action, as a line of type with a drawn rule (Aman's link, not a button island). */
.enlace-visita {
  display: inline-flex; align-items: center; gap: 0.6em; min-height: 44px;
  font-family: var(--sc-font-text); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--sc-ink); text-decoration: none; white-space: nowrap;
}
.enlace-visita::after {
  content: ""; width: 2.4em; height: 1px; background: currentColor;
  transform-origin: 0 50%; transition: transform 180ms var(--ease);
}
.enlace-visita:active { transform: translateY(1px); }
@media (hover: hover) and (pointer: fine) { .enlace-visita:hover::after { transform: scaleX(1.6); } }
.enlace-visita--chico { font-size: 0.75rem; min-height: 40px; }

/* --------------------------------------------------------------- cornisa -- */
.cornisa {
  position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome);
  height: var(--cornisa-h); padding-inline: var(--sc-gutter);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  color: var(--sc-ink); background: transparent;
  transition: background-color 220ms var(--ease), color 220ms var(--ease), box-shadow 220ms var(--ease);
}
.cornisa[data-solid="true"] { background: color-mix(in oklab, var(--cornisa-bg, var(--sc-canvas)) 96%, transparent); box-shadow: 0 1px 0 color-mix(in oklab, currentColor 14%, transparent); }
.cornisa[data-theme="sand"] { --cornisa-bg: var(--arena); }
.cornisa[data-theme="light"] { --cornisa-bg: #FFFFFF; }
.cornisa[data-theme="dark"] { --cornisa-bg: var(--carbon); color: var(--hueso); }
.cornisa__marca { display: inline-flex; align-items: center; min-height: 44px; color: inherit; justify-self: start; }
.cornisa__marca .logo { width: 7.25rem; }
.cornisa__capitulo { font-size: 0.75rem; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 400; }
.cornisa__capitulo span { display: inline-block; transition: opacity 160ms var(--ease), transform 160ms var(--ease); }
.cornisa__capitulo span.is-cambiando { opacity: 0; transform: translateY(-4px); }
.cornisa__acciones { justify-self: end; display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.25rem); }
.cornisa__grupo, .cornisa__visita {
  font: 500 0.75rem/1 var(--sc-font-text); letter-spacing: 0.16em; text-transform: uppercase;
  color: inherit; background: none; border: 0; padding: 0; min-height: 44px; cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center;
}
.cornisa__visita { padding-bottom: 2px; border-bottom: 1px solid currentColor; min-height: 0; padding-block: 0.6rem 0.35rem; }
@media (hover: hover) and (pointer: fine) {
  .cornisa__grupo:hover, .cornisa__visita:hover { opacity: 0.7; }
}
@media (max-width: 860px) {
  .cornisa { grid-template-columns: auto 1fr; }
  .cornisa__capitulo { display: none; }
  .cornisa__marca .logo { width: 5.75rem; }
  .cornisa__acciones { gap: 1.1rem; }
  .cornisa__grupo, .cornisa__visita { font-size: 0.6875rem; letter-spacing: 0.12em; }
}

/* ---------------------------------------------------------------- portada --
   Planes, back to front: sky plate, masthead, building with its palms, a
   bone band where the copy sits. --k is the cover-to-plate transition. */
.portada { --k: clamp(0, calc((var(--sp, 0) - 0.36) / 0.64), 1); }
.portada__stage { background: var(--sc-canvas); }
.portada__marco {
  position: absolute; inset: 0; overflow: hidden;
  clip-path: inset(calc(var(--k) * 8.5svh) calc(var(--k) * 5vw) calc(var(--k) * 17svh) calc(var(--k) * 5vw) round calc(var(--k) * 3px));
  will-change: clip-path;
}
.portada__cielo, .portada__edificio {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: 50% 62%;
  will-change: transform;
}
.portada__cielo {
  transform-origin: 50% 100%;
  transform: translate3d(0, calc(var(--sp, 0) * 4svh), 0) scale(calc(1.05 + var(--sp, 0) * 0.025));
}
.portada__cabecera {
  position: absolute; left: 50%; top: 10.5svh; width: min(78vw, 72rem);
  color: var(--sc-ink);
  transform-origin: 50% 100%;
  transform: translate3d(-50%, calc(var(--sp, 0) * 9svh), 0) scale(calc(1 + var(--sp, 0) * 0.06));
  opacity: calc(1 - var(--k) * 1.25);
  will-change: transform, opacity;
}
.portada__edificio {
  transform-origin: 50% 94%;
  transform: scale(calc(1 + var(--sp, 0) * 0.15));
}
.portada__velo {
  position: absolute; inset: auto 0 0 0; height: 74%;
  background: linear-gradient(to top, rgb(255 255 255 / 0.96) 0%, rgb(255 255 255 / 0.90) 34%, rgb(255 255 255 / 0.55) 56%, rgb(255 255 255 / 0) 100%);
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 34%, rgb(0 0 0 / 0.35) 62%, transparent 82%);
  mask-image: linear-gradient(to right, #000 0%, #000 34%, rgb(0 0 0 / 0.35) 62%, transparent 82%);
  opacity: calc(1 - var(--k) * 1.4);
}
.portada__copy {
  position: absolute; left: var(--sc-gutter); bottom: clamp(2.5rem, 8svh, 6rem); z-index: 2;
  max-width: min(40rem, 86vw);
  display: grid; gap: var(--sc-4); justify-items: start;
  opacity: calc(1 - var(--k) * 3.2);
  transform: translate3d(0, calc(var(--k) * -3svh), 0);
}
.portada__titulo { font-size: clamp(2.6rem, 1.4rem + 4.6vw, 6.2rem); line-height: 0.98; letter-spacing: -0.025em; }
.portada__sub { max-width: 34ch; color: var(--sc-ink); font-size: clamp(1rem, 0.95rem + 0.3vw, 1.1875rem); line-height: 1.5; }
.portada__pie {
  position: absolute; left: 5vw; right: 5vw; bottom: calc(17svh - 2.7rem);
  font-size: 0.875rem; color: var(--sc-ink-soft); max-width: 60rem;
  opacity: clamp(0, calc((var(--k) - 0.66) * 3.2), 1);
}
.pie__nombre { font-family: var(--sc-font-display); font-size: 1.15em; color: var(--sc-ink); margin-right: 0.4em; }
.pie__estatus { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sc-ink); margin-left: 0.4em; }

@media (max-aspect-ratio: 1/1) {
  /* Portrait art direction: the photograph takes the top two thirds, the cover
     lines sit on paper below it. Nothing is shrunk from the desktop frame. */
  .portada { --papel: 36svh; }
  .portada__marco {
    inset: 0 0 var(--papel) 0;
    clip-path: inset(calc(var(--k) * 9svh) calc(var(--k) * 4vw) calc(var(--k) * 3svh) calc(var(--k) * 4vw) round calc(var(--k) * 3px));
  }
  .portada__cielo, .portada__edificio { object-position: 57% 50%; }
  .portada__cabecera { top: calc(var(--cornisa-h) + 2.2svh); width: 88vw; }
  .portada__velo { display: none; }
  .portada__copy { bottom: 3.5svh; gap: 0.75rem; }
  .portada__pie { bottom: calc(var(--papel) - 4.4rem); font-size: 0.8125rem; opacity: clamp(0, calc((var(--k) - 0.38) * 3), 1); }
}
@media (max-aspect-ratio: 1/1) and (max-height: 700px) {
  .portada { --papel: 42svh; }
  .portada__sub { font-size: 0.9375rem; }
}
@media (max-width: 700px) {
  .portada__titulo { font-size: clamp(2.3rem, 9.6vw, 3rem); }
}


/* --------------------------------------------------------------- antesala -- */
.antesala {
  background: var(--sc-canvas); color: var(--sc-ink);
  min-height: 74svh; display: grid; align-items: center;
  padding: clamp(5rem, 12vh, 9rem) var(--sc-gutter);
}
.antesala__inner { display: grid; gap: var(--sc-5); max-width: 60rem; margin-left: 8vw; }
.antesala .etiqueta { color: var(--arena-soft); }
.antesala__linea { font-size: clamp(3rem, 1.8rem + 6vw, 7.5rem); line-height: 0.96; letter-spacing: -0.03em; }
.antesala__eco { font-family: var(--sc-font-display); font-style: italic; font-weight: 300; font-size: clamp(1.4rem, 1rem + 1.6vw, 2.4rem); color: var(--arena-soft); padding-left: 0.12em; }
@media (max-width: 860px) { .antesala__inner { margin-left: 0; } }

/* ------------------------------------------------------------------ ficha -- */
.ficha__stage { background: var(--sc-canvas); }
.ficha__grid {
  height: 100%; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 6rem); align-items: center;
  padding: calc(var(--cornisa-h) + 2svh) var(--sc-gutter) 3svh;
  max-width: 96rem; margin-inline: auto;
}
.ficha__laminas { margin: 0; justify-self: end; display: grid; gap: var(--sc-3); }
.ficha__marco {
  position: relative; overflow: hidden; border-radius: var(--r);
  height: min(76svh, 54vw); aspect-ratio: 4 / 5;
  box-shadow: var(--sc-e2);
}
.lamina { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ficha__pies { position: relative; height: 1.4rem; font-size: 0.8125rem; color: var(--sc-ink-soft); letter-spacing: 0.02em; }
.ficha__pies span { position: absolute; left: 0; top: 0; }

.ficha__hoja { display: grid; gap: clamp(1rem, 2.6svh, 1.75rem); max-width: 31rem; }
.ficha__encabezado { display: grid; gap: var(--sc-2); }
.etiqueta--estatus { color: var(--sc-ink); display: inline-flex; align-items: center; gap: 0.6em; }
.etiqueta--estatus::before { content: ""; width: 7px; height: 7px; background: var(--sc-accent); border-radius: 50%; }
.ficha__nombre { font-size: clamp(2.6rem, 1.6rem + 3.6vw, 5.4rem); line-height: 0.95; letter-spacing: -0.03em; }
.ficha__lugar { color: var(--sc-ink-soft); }
.ficha__datos { margin: 0; display: grid; }
.ficha__datos > div {
  display: grid; grid-template-columns: 9.5rem 1fr; gap: var(--sc-4); align-items: baseline;
  padding-block: 0.7rem; border-top: 1px solid var(--sc-hairline-strong);
}
.ficha__datos > div:last-child { border-bottom: 1px solid var(--sc-hairline-strong); }
.ficha__datos dt { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sc-ink-soft); }
.ficha__datos dd { margin: 0; font-family: var(--sc-font-display); font-size: 1.25rem; }

/* La regla: an architect's scale. A real range input underneath, so keyboard and
   assistive tech get the same control. */
.regla { display: grid; gap: var(--sc-2); opacity: var(--regla-o, 0); transform: translate3d(0, calc((1 - var(--regla-o, 0)) * 10px), 0); }
.regla__pregunta { font-family: var(--sc-font-display); font-style: italic; font-size: 1.3rem; }
.regla__escala { position: relative; padding-top: 0.25rem; }
.regla__input {
  -webkit-appearance: none; appearance: none; width: 100%; height: 44px; margin: 0; background: transparent; cursor: grab;
  --pos: 50%;
}
.regla__input:active { cursor: grabbing; }
.regla__input::-webkit-slider-runnable-track {
  height: 34px; border-radius: var(--r);
  background:
    linear-gradient(to right, var(--sc-ink) 0 1px, transparent 1px) 0 0 / 25% 100% repeat-x,
    linear-gradient(to right, color-mix(in oklab, var(--sc-ink) 55%, transparent) 0 1px, transparent 1px) 0 100% / 6.25% 45% repeat-x,
    linear-gradient(to right, color-mix(in oklab, var(--sc-ink) 35%, transparent) 0 1px, transparent 1px) 0 100% / 3.125% 25% repeat-x,
    linear-gradient(to right, color-mix(in oklab, var(--sc-accent) 55%, transparent) 0 var(--pos), transparent var(--pos)),
    var(--sc-surface);
  box-shadow: inset 0 0 0 1px var(--sc-hairline-strong);
}
.regla__input::-moz-range-track {
  height: 34px; border-radius: var(--r);
  background:
    linear-gradient(to right, var(--sc-ink) 0 1px, transparent 1px) 0 0 / 25% 100% repeat-x,
    linear-gradient(to right, color-mix(in oklab, var(--sc-ink) 55%, transparent) 0 1px, transparent 1px) 0 100% / 6.25% 45% repeat-x,
    linear-gradient(to right, color-mix(in oklab, var(--sc-accent) 55%, transparent) 0 var(--pos), transparent var(--pos)),
    var(--sc-surface);
}
.regla__input::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 4px; height: 46px; margin-top: -6px; border-radius: 1px;
  background: var(--sc-ink); box-shadow: 0 0 0 4px color-mix(in oklab, var(--sc-canvas) 80%, transparent);
}
.regla__input::-moz-range-thumb { width: 4px; height: 46px; border: 0; border-radius: 1px; background: var(--sc-ink); }
.regla__input:focus-visible { outline: 2px solid var(--sc-ink); outline-offset: 4px; }
.regla__real {
  position: absolute; top: 0.25rem; height: 34px; left: var(--real, 18.8%); width: 0; pointer-events: none;
  border-left: 2px solid var(--sc-accent); opacity: var(--real-o, 0);
}
.regla__real span {
  position: absolute; top: 3px; left: 4px;
  font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; color: var(--sc-ink);
  background: var(--sc-accent); padding: 0.2em 0.5em;
}
.regla__marcas { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--sc-ink-soft); font-variant-numeric: tabular-nums; margin-top: 0.15rem; }
.regla__marcas span:first-child { transform: translateX(-2px); }
.regla__lectura { font-size: 0.9375rem; color: var(--sc-ink-soft); min-height: 1.5em; font-variant-numeric: tabular-nums; }

.precio { display: grid; gap: var(--sc-2); justify-items: start; }
.precio__desde { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sc-ink-soft); }
.precio__cifra {
  position: relative; display: inline-flex; align-items: baseline; gap: 0.35em;
  font-family: var(--sc-font-display); font-weight: 300; font-size: clamp(2.6rem, 1.6rem + 3.4vw, 4.8rem);
  line-height: 1.05; letter-spacing: -0.02em; font-variant-numeric: lining-nums tabular-nums;
  padding: 0.04em 0.1em 0.08em 0; margin-left: -0.02em;
}
.precio__mxn { font-family: var(--sc-font-text); font-size: 0.8125rem; letter-spacing: 0.16em; font-weight: 500; color: var(--sc-ink-soft); }
/* The veil: a sand block over the figure, hatched like a redaction, wiped off at the reveal. */
.precio__velo {
  position: absolute; inset: 0.1em 0 0.06em 0; border-radius: var(--r);
  background:
    repeating-linear-gradient(135deg, color-mix(in oklab, var(--sc-ink) 10%, transparent) 0 1px, transparent 1px 9px),
    var(--sc-accent);
  clip-path: inset(0 0 0 calc(var(--rev, 0) * 100%));
}
.precio__veredicto { min-height: 1.5em; font-family: var(--sc-font-display); font-style: italic; font-size: 1.2rem; }
.precio .enlace-visita { opacity: var(--cta-o, 0); }

@media (max-width: 860px) {
  .ficha__grid { grid-template-columns: 1fr; align-content: start; gap: 1.1rem; padding-top: calc(var(--cornisa-h) + 0.5rem); }
  .ficha__laminas { justify-self: stretch; grid-template-columns: 1fr; }
  .ficha__marco { height: 34svh; width: 100%; aspect-ratio: auto; }
  .ficha__pies { height: 1.1rem; font-size: 0.75rem; }
  .ficha__hoja { gap: 0.85rem; max-width: none; }
  .ficha__nombre { font-size: 2.6rem; }
  .ficha__datos > div { grid-template-columns: 7.5rem 1fr; padding-block: 0.4rem; }
  .ficha__datos dd { font-size: 1.05rem; }
  /* On a phone the ruler and the price share one slot: the guess, then the answer. */
  .ficha__final { display: grid; }
  .regla, .precio { grid-area: 1 / 1; }
  .regla__pregunta { font-size: 1.1rem; }
  .regla__real { display: none; }
  .precio__cifra { font-size: 2.7rem; }
}
@media (max-width: 860px) and (max-height: 700px) {
  .ficha__grid { gap: 0.6rem; }
  .ficha__marco { height: 21svh; }
  .ficha__lugar, .ficha__datos > div:nth-child(3) { display: none; }
  .ficha__hoja { gap: 0.55rem; }
  .ficha__nombre { font-size: 2.1rem; }
  .ficha__datos > div { padding-block: 0.3rem; }
  .ficha__datos dd { font-size: 0.95rem; }
  .regla__pregunta { font-size: 1rem; }
  .regla__lectura { font-size: 0.8125rem; }
  .precio__cifra { font-size: 2.3rem; }
  .precio__veredicto { font-size: 1rem; }
}

/* --------------------------------------------------------------- catálogo -- */
.catalogo { background: var(--arena); --sc-ink-soft: var(--arena-soft); --sc-hairline-strong: color-mix(in oklab, var(--sc-ink) 26%, transparent); }
.catalogo__stage { background: var(--arena); display: flex; align-items: center; }
.catalogo__riel {
  align-items: center; gap: clamp(2rem, 4vw, 4.5rem);
  padding: calc(var(--cornisa-h) + 2rem) var(--sc-gutter) 2rem;
}
.catalogo__cabeza { flex: 0 0 min(30rem, 80vw); display: grid; gap: var(--sc-5); align-content: center; }
.filtros { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; }
.filtros button {
  font: 500 0.75rem/1 var(--sc-font-text); letter-spacing: 0.14em; text-transform: uppercase;
  background: none; border: 0; padding: 0.9rem 0 0.7rem; min-height: 44px; color: var(--arena-soft); cursor: pointer;
  border-bottom: 1px solid transparent; transition: color 160ms var(--ease), border-color 160ms var(--ease);
}
.filtros button[aria-pressed="true"] { color: var(--sc-ink); border-bottom-color: var(--sc-ink); }
@media (hover: hover) and (pointer: fine) { .filtros button:hover { color: var(--sc-ink); } }
.filtros button:active { transform: translateY(1px); }

.obra { flex: 0 0 clamp(15.5rem, 22vw, 21rem); display: grid; gap: 0.65rem; transition: opacity 220ms var(--ease); }
.obra img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--r); box-shadow: var(--sc-e2); }
.obra h3 { font-size: 1.75rem; line-height: 1.05; letter-spacing: -0.01em; margin-top: 0.4rem; }
.obra dl { margin: 0; display: grid; grid-template-columns: 6.4rem 1fr; row-gap: 0.25rem; font-size: 0.9rem; }
.obra dt { font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--arena-soft); padding-top: 0.2rem; }
.obra dd { margin: 0; }
.obra__precio { font-family: var(--sc-font-display); font-size: 1.3rem; line-height: 1.1; }
.obra__nota { font-size: 0.75rem; color: var(--arena-soft); font-style: italic; }
.obra.is-tenue { opacity: 0.32; }
.catalogo__cierre { flex: 0 0 min(22rem, 76vw); display: grid; gap: var(--sc-4); align-content: center; }
.catalogo__cierre-linea { font-family: var(--sc-font-display); font-size: clamp(2rem, 1.4rem + 2vw, 3rem); line-height: 1; }
@media (prefers-reduced-motion: no-preference) {
  .obra img { transform: translate3d(0, calc((0.5 - var(--sc-p, 0.5)) * 18px), 0); }
}

/* -------------------------------------------------------------- entregado -- */
.entregado { padding: var(--sc-section) var(--sc-gutter) clamp(3rem, 6vw, 6rem); }
.entregado__intro { max-width: 84rem; margin-inline: auto; display: grid; gap: var(--sc-5); }
.entregado__intro .cuerpo { max-width: 46ch; font-size: 1.125rem; }
.cifras { display: flex; flex-wrap: wrap; gap: var(--sc-5) clamp(2rem, 5vw, 4.5rem); margin-top: var(--sc-4); color: var(--sc-ink-soft); }
.cifras > span { display: inline-flex; align-items: baseline; gap: 0.45em; }
.cifra { font-family: var(--sc-font-display); font-size: clamp(2.6rem, 2rem + 2.2vw, 3.8rem); color: var(--sc-ink); line-height: 1; letter-spacing: -0.02em; }

.placa { margin: 0; display: grid; gap: var(--sc-3); }
.placa__marco { overflow: hidden; border-radius: var(--r); box-shadow: var(--sc-e2); }
.placa__marco img { width: 100%; height: 116%; margin-top: -8%; object-fit: cover; display: block; }
.placa figcaption { font-size: 0.875rem; color: var(--sc-ink-soft); max-width: 46ch; }

.lamina-doble {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--sc-6) clamp(1rem, 2.4vw, 2.5rem);
  padding: clamp(2rem, 4vw, 4rem) var(--sc-gutter); max-width: 96rem; margin-inline: auto; align-items: start;
}
.placa--alta { grid-column: 1 / span 6; }
.placa--alta .placa__marco { aspect-ratio: 2 / 3; max-height: 118svh; }
.placa--media { grid-column: 8 / span 4; margin-top: 24svh; }
.placa--media .placa__marco { aspect-ratio: 2 / 3; }

.lamina-ancha {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(2.5rem, 6vw, 6rem) clamp(1rem, 2.4vw, 2.5rem);
  padding: clamp(2rem, 4vw, 4rem) var(--sc-gutter) var(--sc-section); max-width: 96rem; margin-inline: auto;
}
.placa--ancha { grid-column: 4 / -1; }
.placa--ancha .placa__marco { aspect-ratio: 5 / 4; }
.interiores { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 2.5rem); align-items: end; }
.interiores__titulo { grid-column: 1 / span 3; align-self: start; font-family: var(--sc-font-display); font-size: clamp(2rem, 1.4rem + 2vw, 3.2rem); line-height: 1; }
.interiores img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r); box-shadow: var(--sc-e1); }
.interiores img:nth-of-type(1) { grid-column: 4 / span 5; }
.interiores img:nth-of-type(2) { grid-column: 9 / span 4; }
.interiores img:nth-of-type(3) { grid-column: 1 / span 3; aspect-ratio: 4 / 5; align-self: start; }
.interiores img:nth-of-type(4) { grid-column: 4 / span 5; }
.interiores__pie { grid-column: 9 / span 4; align-self: start; font-size: 0.875rem; color: var(--sc-ink-soft); max-width: 40ch; }
@media (max-width: 860px) {
  .lamina-doble, .lamina-ancha, .interiores { grid-template-columns: 1fr; }
  .placa--alta, .placa--media, .placa--ancha, .interiores > * { grid-column: 1 / -1 !important; }
  .placa--media { margin-top: 0; width: 78%; justify-self: end; }
  .interiores img:nth-of-type(2) { aspect-ratio: 3 / 2; }
}

/* ------------------------------------------------------------- compromiso -- */
.compromiso {
  --sc-ink: var(--hueso); --sc-ink-soft: var(--hueso-soft); --sc-accent: var(--arena-claro);
  --sc-hairline-strong: color-mix(in oklab, var(--hueso) 22%, transparent);
  --sc-shadow-color: 150 10% 4%;
  color: var(--sc-ink); background: var(--carbon);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(3rem, 6vw, 6rem) clamp(1rem, 2.4vw, 2.5rem);
  padding: var(--sc-section) var(--sc-gutter); align-items: center;
}
.compromiso ::selection { background: var(--hueso); color: var(--carbon); }
.compromiso :focus-visible { outline-color: var(--hueso); }
.compromiso__texto { grid-column: 1 / span 6; display: grid; gap: var(--sc-6); }
.compromiso__titulo { font-size: clamp(3rem, 1.8rem + 5vw, 6.6rem); line-height: 0.95; letter-spacing: -0.03em; }
.compromiso__promesa { font-family: var(--sc-font-display); font-weight: 300; font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); line-height: 1.3; max-width: 30ch; letter-spacing: 0.002em; }
.libro { list-style: none; margin: 0; padding: 0; display: grid; }
.libro li { padding-block: 1rem; border-top: 1px solid var(--sc-hairline-strong); color: var(--hueso-soft); line-height: 1.55; letter-spacing: 0.01em; }
.libro li:last-child { border-bottom: 1px solid var(--sc-hairline-strong); }
.libro__clave { color: var(--hueso); font-weight: 500; }
.acero { grid-column: 8 / -1; margin: 0; display: grid; gap: var(--sc-5); }
.acero__marco { overflow: hidden; border-radius: var(--r); aspect-ratio: 4 / 5; box-shadow: var(--sc-e3); }
.acero__marco img { width: 100%; height: 120%; margin-top: -10%; object-fit: cover; filter: grayscale(0.55) sepia(0.18) contrast(1.04); }
.acero figcaption { display: grid; gap: var(--sc-3); color: var(--hueso-soft); max-width: 42ch; line-height: 1.6; letter-spacing: 0.01em; }
.acero__titulo { font-family: var(--sc-font-display); font-size: 1.75rem; color: var(--hueso); line-height: 1.1; }
.enlace-grupo {
  justify-self: start; font: 500 0.8125rem/1 var(--sc-font-text); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--hueso); background: none; border: 0; padding: 0.9rem 0 0.6rem; min-height: 44px; cursor: pointer;
  border-bottom: 1px solid currentColor;
}
.enlace-grupo:active { transform: translateY(1px); }
@media (hover: hover) and (pointer: fine) { .enlace-grupo:hover { opacity: 0.75; } }
@media (max-width: 860px) {
  .compromiso { grid-template-columns: 1fr; }
  .compromiso__texto, .acero { grid-column: 1 / -1; }
  .acero__marco { aspect-ratio: 4 / 3; }
}

/* ---------------------------------------------------------------- colofón -- */
.colofon { padding: var(--sc-section) var(--sc-gutter) var(--sc-6); display: grid; gap: clamp(4rem, 10vw, 9rem); }
.colofon__hoja { display: grid; gap: var(--sc-5); max-width: 46rem; margin-left: clamp(0rem, 16vw, 18rem); }
.colofon__titulo { font-size: clamp(2.8rem, 1.8rem + 4.4vw, 6rem); line-height: 0.96; letter-spacing: -0.03em; }
.eleccion { border: 0; margin: var(--sc-3) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 0.6rem; }
.eleccion legend { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sc-ink-soft); margin-bottom: var(--sc-3); padding: 0; }
.eleccion label {
  display: inline-flex; align-items: center; gap: 0.55rem; min-height: 44px; padding: 0 0.95rem;
  border: 1px solid var(--sc-hairline-strong); border-radius: var(--r); cursor: pointer;
  font-size: 0.9375rem; transition: background-color 150ms var(--ease), border-color 150ms var(--ease);
}
.eleccion input { appearance: none; -webkit-appearance: none; width: 9px; height: 9px; margin: 0; border: 1px solid var(--sc-ink); border-radius: 50%; }
.eleccion input:checked { background: var(--sc-ink); }
.eleccion label:has(input:checked) { border-color: var(--sc-ink); background: var(--sc-surface); }
.eleccion label:has(input:focus-visible) { outline: 2px solid var(--sc-ink); outline-offset: 3px; }
.eleccion input:focus-visible { outline: none; }
@media (hover: hover) and (pointer: fine) { .eleccion label:hover { border-color: var(--sc-ink); } }
.boton-visita {
  justify-self: start; margin-top: var(--sc-3);
  display: inline-flex; align-items: center; gap: 0.9em; min-height: 52px; padding: 0 1.6rem;
  background: var(--carbon); color: var(--hueso); border-radius: var(--r); text-decoration: none;
  font: 500 0.8125rem/1 var(--sc-font-text); letter-spacing: 0.16em; text-transform: uppercase;
  box-shadow: var(--sc-e2), inset 0 1px 0 rgb(255 255 255 / 0.08);
  transition: transform 140ms var(--ease), box-shadow 140ms var(--ease), background-color 140ms var(--ease);
}
.boton-visita::after { content: ""; width: 1.8em; height: 1px; background: currentColor; }
.boton-visita:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) { .boton-visita:hover { background: #1C2120; box-shadow: var(--sc-e3); } }
.colofon__otros { color: var(--sc-ink-soft); }
.colofon__otros a { color: var(--sc-ink); }

.colofon__pie {
  border-top: 1px solid var(--sc-hairline-strong); padding-top: var(--sc-6);
  display: grid; grid-template-columns: auto 1fr; gap: var(--sc-3) var(--sc-7); align-items: baseline;
  font-size: 0.8125rem; color: var(--sc-ink-soft);
}
.colofon__logo { width: 6rem; color: var(--sc-ink); grid-row: span 2; align-self: start; margin-top: 0.3rem; }
.colofon__eco { font-family: var(--sc-font-display); font-style: italic; font-size: 1.15rem; color: var(--sc-ink); }
.colofon__pie address { font-style: normal; }
.colofon__legal { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 1.4rem; grid-column: 2; }
.colofon__legal a { display: inline-flex; min-height: 40px; align-items: center; color: var(--sc-ink-soft); }
.colofon__credito { grid-column: 2; font-size: 0.75rem; }
@media (max-width: 860px) {
  .colofon__hoja { margin-left: 0; }
  .colofon__pie { grid-template-columns: 1fr; }
  .colofon__logo { grid-row: auto; }
  .colofon__legal, .colofon__credito { grid-column: 1; }
}

/* ------------------------------------------------------------------ grupo -- */
.grupo {
  --sc-ink: var(--hueso); --sc-ink-soft: var(--hueso-soft);
  margin: 0 0 0 auto; height: 100dvh; max-height: none; width: min(34rem, 100vw); max-width: 100vw;
  padding: 0; border: 0; background: var(--carbon); color: var(--hueso);
  box-shadow: -18px 0 60px -20px rgb(10 12 11 / 0.5);
}
.grupo::backdrop { background: rgb(38 44 42 / 0.42); }
.grupo[open] { animation: grupo-entra 260ms var(--sc-ease-drawer); }
@keyframes grupo-entra { from { transform: translateX(6%); opacity: 0; } to { transform: none; opacity: 1; } }
.grupo__hoja { padding: clamp(1.5rem, 4vw, 3rem); display: grid; gap: var(--sc-5); }
.grupo__cerrar {
  justify-self: end; font: 500 0.75rem/1 var(--sc-font-text); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--hueso); background: none; border: 0; border-bottom: 1px solid currentColor; padding: 0.9rem 0 0.5rem; min-height: 44px; cursor: pointer;
}
.grupo :focus-visible { outline-color: var(--hueso); }
.grupo__titulo { font-size: clamp(2rem, 1.6rem + 1.6vw, 2.8rem); line-height: 1; letter-spacing: -0.02em; }
.grupo__intro { color: var(--hueso-soft); }
.cadena { list-style: none; margin: var(--sc-3) 0 0; padding: 0; display: grid; position: relative; }
.cadena::before { content: ""; position: absolute; left: 4px; top: 0.6rem; bottom: 2.4rem; width: 1px; background: color-mix(in oklab, var(--hueso) 26%, transparent); }
.cadena li { position: relative; padding: 0 0 var(--sc-6) 2rem; display: grid; gap: var(--sc-2); color: var(--hueso-soft); line-height: 1.55; }
.cadena li::before { content: ""; position: absolute; left: 0; top: 0.45rem; width: 9px; height: 9px; border-radius: 50%; background: var(--carbon); border: 1px solid var(--arena-claro); }
.cadena__marca { height: 1.6rem; width: auto; justify-self: start; color: var(--hueso); }
.cadena__marca--texto { font: 500 1.25rem/1.3 var(--sc-font-text); letter-spacing: 0.08em; height: auto; }
.cadena a { color: var(--hueso); justify-self: start; font-size: 0.875rem; min-height: 40px; display: inline-flex; align-items: center; }
.pronto { font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--carbon); background: var(--arena-claro); padding: 0.25em 0.6em; border-radius: var(--r); margin-left: 0.4em; white-space: nowrap; }
.cadena__pronto .cadena__marca { opacity: 0.7; }
.ficha__final { display: grid; gap: clamp(1rem, 2.6svh, 1.75rem); }
.grupo__hoja { min-height: 100%; align-content: start; }
.regla__distancia {
  position: absolute; top: 0.25rem; height: 34px; left: var(--d-left, 0); width: var(--d-width, 0);
  pointer-events: none; opacity: var(--d-o, 0); border-radius: var(--r);
  background: repeating-linear-gradient(135deg, color-mix(in oklab, var(--sc-ink) 30%, transparent) 0 1px, transparent 1px 6px);
  transform-origin: 100% 50%; transform: scaleX(var(--d-o, 0));
}
/* The Orinoco plate shows the whole building: less overscan, so the parallax never crops the roof. */
.placa--ancha .placa__marco img { height: 108%; margin-top: -4%; object-position: 50% 30%; }

/* Two more delivered buildings, offset like a magazine spread. */
.lamina-doble--obras { padding-top: 0; padding-bottom: var(--sc-section); }
.placa--obra-a { grid-column: 1 / span 7; }
.placa--obra-a .placa__marco { aspect-ratio: 3 / 2; }
.placa--obra-b { grid-column: 9 / span 4; margin-top: 18svh; }
.placa--obra-b .placa__marco { aspect-ratio: 4 / 3; }
@media (max-width: 860px) {
  .placa--obra-a, .placa--obra-b { grid-column: 1 / -1 !important; }
  .placa--obra-b { margin-top: 0; width: 82%; justify-self: end; }
  .interiores img:nth-of-type(3) { aspect-ratio: 4 / 5; }
}


/* ------------------------------------------------------- INSAAT voice --
   The brand's own type: Trebuchet MS, bold headings, the tagline set in sand
   at regular weight, uppercase bold labels without wide tracking, no italics. */
.sc-grain { display: none; }
:where(h1, h2, h3, .titulo-capitulo, .ficha__nombre, .compromiso__titulo, .colofon__titulo, .grupo__titulo) { letter-spacing: -0.01em; }
.portada__titulo, .antesala__linea { font-weight: 400; color: var(--arena-texto); letter-spacing: -0.01em; }
.portada__titulo { font-size: clamp(2.4rem, 1.3rem + 4vw, 5.2rem); line-height: 1.02; }
.antesala__eco, .regla__pregunta, .precio__veredicto, .colofon__eco, .obra__nota { font-style: normal; }
.antesala__eco { font-weight: 400; color: var(--sc-ink-soft); }
.etiqueta, .enlace-visita, .cornisa__grupo, .cornisa__visita, .cornisa__capitulo, .pie__estatus, .ficha__datos dt,
.precio__desde, .precio__mxn, .filtros button, .obra dt, .eleccion legend, .boton-visita, .enlace-grupo, .grupo__cerrar,
.pronto, .regla__real span { letter-spacing: 0.04em; font-weight: 700; }
.cornisa__capitulo { font-weight: 400; letter-spacing: 0.08em; }
.cornisa__grupo, .cornisa__visita { color: var(--sc-ink-soft); }
.cornisa[data-theme="dark"] .cornisa__grupo, .cornisa[data-theme="dark"] .cornisa__visita { color: var(--hueso); }
.ficha__datos dd, .obra__precio, .pie__nombre, .cifra, .interiores__titulo, .catalogo__cierre-linea, .acero__titulo { font-weight: 700; }
.precio__cifra { font-weight: 700; letter-spacing: -0.01em; }
.compromiso__promesa { font-weight: 400; }
.compromiso__titulo { color: var(--arena-claro); }
/* The site's button: sand fill. Charcoal text keeps it legible (white on sand is 2.6:1). */
.boton-visita { background: var(--sc-accent); color: var(--carbon); box-shadow: var(--sc-e1); }
@media (hover: hover) and (pointer: fine) { .boton-visita:hover { background: #9C8B6F; box-shadow: var(--sc-e2); } }
.etiqueta--estatus::before { background: var(--sc-accent); }
/* The tagline sits in two lines on the white wash, clear of the palms. */
.portada__copy { max-width: min(48rem, 88vw); }
.portada__titulo { font-size: clamp(2.2rem, 1.1rem + 3.1vw, 4.4rem); line-height: 1.05; }
.portada__titulo { text-shadow: 0 1px 0 rgb(255 255 255 / 0.5); }
@media (max-width: 700px) { .portada__titulo { font-size: clamp(2.1rem, 8.6vw, 2.7rem); } }

/* ------------------------------------------------ laptop heights ---------
   The peak has to fit on a 1280x580 / 1366x657 screen, not only on 900px.
   Everything vertical in the sheet scales with the viewport height, and on
   screens shorter than 820px the ruler and the price share one slot: the
   guess first, then the answer in its place. */
.ficha__hoja { gap: clamp(0.6rem, 2.2svh, 1.75rem); }
.ficha__nombre { font-size: clamp(2.2rem, min(1.6rem + 3.6vw, 8.5svh), 5.4rem); }
.ficha__datos > div { padding-block: clamp(0.35rem, 1.3svh, 0.7rem); }
.ficha__datos dd { font-size: clamp(1rem, 2.4svh, 1.25rem); }
.precio__cifra { font-size: clamp(2.2rem, min(1.6rem + 3.4vw, 8svh), 4.8rem); }
.ficha__final { gap: clamp(0.6rem, 2.2svh, 1.75rem); }
@media (max-height: 820px) {
  .ficha__final { display: grid; }
  .ficha__final > .regla, .ficha__final > .precio { grid-area: 1 / 1; }
  .ficha__lugar { font-size: 0.9375rem; }
  .regla__real { display: none; }
}
.ficha__marco { height: min(76svh, 54vw, calc(100svh - var(--cornisa-h) - 4.5rem)); }

/* Catalogue cards size from the height too, so their labels never fall off the bottom. */
.obra { flex-basis: min(clamp(15.5rem, 22vw, 21rem), calc((100svh - 22rem) * 0.75)); }
.catalogo__riel { padding-block: calc(var(--cornisa-h) + 1rem) 1rem; }
@media (max-height: 700px) { .obra h3 { font-size: 1.4rem; margin-top: 0.2rem; } .obra dl { row-gap: 0.1rem; font-size: 0.85rem; } .obra { gap: 0.4rem; } }
/* Short, wide screens: the masthead and tagline scale with the height so the
   building stays the subject. */
@media (min-aspect-ratio: 16/10) {
  .portada__cabecera { width: min(78vw, 118svh); top: 9svh; }
  .portada__titulo { font-size: clamp(2rem, 7.4svh, 4.4rem); }
  .portada__sub { font-size: clamp(0.95rem, 2.4svh, 1.1875rem); }
  .portada__copy { gap: clamp(0.5rem, 1.6svh, 1rem); bottom: clamp(1.5rem, 6svh, 6rem); }
}

/* ------------------------------------------------------------- lista ------
   One line lit at a time; the work it names floats in beside it. */
.lista__stage { background: var(--sc-canvas); display: grid; place-items: center; }
.lista__lineas {
  list-style: none; margin: 0; padding: 0; text-align: center; position: relative; z-index: 2;
  font-family: var(--sc-font-display); font-size: clamp(1.35rem, 0.9rem + 1.9vw, 2.6rem); line-height: 1.32; letter-spacing: -0.01em;
  transition: opacity 320ms var(--ease);
}
.lista__lineas li { color: #C5CBD1; transition: color 260ms var(--ease); }
.lista__lineas li.is-on { color: var(--sc-ink); }
.lista__remate {
  position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 0.5rem; z-index: 2;
  font-family: var(--sc-font-display); font-size: clamp(2.6rem, 1.6rem + 4.4vw, 6.4rem); line-height: 1; color: var(--arena-texto);
  letter-spacing: -0.015em; opacity: 0; transform: translate3d(0, 14px, 0);
  transition: opacity 420ms var(--ease), transform 420ms var(--ease);
}
.lista__remate span { font-family: var(--sc-font-text); font-size: clamp(1rem, 0.9rem + 0.5vw, 1.35rem); color: var(--sc-ink-soft); letter-spacing: 0; }
.lista[data-paso="5"] .lista__lineas { opacity: 0; }
.lista[data-paso="5"] .lista__remate { opacity: 1; transform: none; }
.flota {
  position: absolute; margin: 0; z-index: 1; display: grid; gap: 0.4rem;
  opacity: 0; transform: translate3d(0, 26px, 0) scale(0.96);
  transition: opacity 480ms var(--ease), transform 620ms var(--ease);
}
.flota.is-on { opacity: 1; transform: translate3d(0, calc((0.5 - var(--sp, 0.5)) * 50px), 0) scale(1); }
.flota img { width: 100%; height: auto; border-radius: var(--r); box-shadow: var(--sc-e2); }
.flota figcaption {
  justify-self: start; font: 700 0.6875rem/1 var(--sc-font-text); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--sc-ink); background: #fff; border: 1px solid var(--sc-hairline-strong); padding: 0.35em 0.6em; border-radius: 2px;
}
.flota--a { left: 5vw; top: 54%; width: clamp(12rem, 21vw, 22rem); }
.flota--b { right: 6vw; top: calc(var(--cornisa-h) + 4svh); width: clamp(9rem, 14vw, 15rem); }
.flota--c { left: 9vw; top: calc(var(--cornisa-h) + 3svh); width: clamp(10rem, 15vw, 16rem); }
.flota--d { right: 5vw; top: 52%; width: clamp(11rem, 18vw, 19rem); }
.flota--b img, .flota--c img { max-height: 38svh; width: auto; }
.flota--a img, .flota--d img { max-height: 34svh; width: auto; }
@media (max-width: 860px) {
  .lista__lineas { font-size: clamp(1.15rem, 5.2vw, 1.5rem); padding-inline: var(--sc-gutter); }
  .flota { width: 40vw !important; }
  .flota img { max-height: 24svh !important; width: auto; max-width: 100%; }
  .flota--a, .flota--c { left: 4vw; } .flota--b, .flota--d { right: 4vw; left: auto; }
  .flota--b, .flota--c { top: calc(var(--cornisa-h) + 1.5svh); }
  .flota--a, .flota--d { top: auto; bottom: 4svh; }
  .flota figcaption { font-size: 0.625rem; }
}

/* ------------------------------------------------- tríada (Seasats) ------ */
.triada-intro { padding: clamp(6rem, 18vh, 12rem) var(--sc-gutter); display: grid; place-items: center; text-align: center; }
.triada-intro__lineas { font-family: var(--sc-font-display); font-weight: 700; font-size: clamp(2.4rem, 1.4rem + 4.6vw, 6.2rem); line-height: 1.04; letter-spacing: -0.02em; display: grid; }
.triada-intro__lineas span:nth-child(3) { color: var(--arena-texto); }

.capitulo__stage { background: var(--carbon); color: #fff; }
.capitulo__foto {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover;
  transform: scale(calc(1.12 - var(--sp, 0) * 0.12)); transform-origin: 50% 60%; will-change: transform;
}
.capitulo__velo {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, rgb(20 24 23 / 0.62) 0%, rgb(20 24 23 / 0) 34%),
    linear-gradient(to top, rgb(20 24 23 / 0.92) 0%, rgb(20 24 23 / 0.72) 22%, rgb(20 24 23 / 0) 50%);
}
.capitulo__titulo {
  position: absolute; left: var(--sc-gutter); top: calc(var(--cornisa-h) + 4svh); margin: 0;
  font-size: clamp(2.6rem, 1.4rem + 5vw, 6rem); line-height: 1; color: #fff; letter-spacing: -0.02em;
}
.capitulo__datos {
  position: absolute; left: var(--sc-gutter); right: var(--sc-gutter); bottom: clamp(1.5rem, 6svh, 4rem);
  list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 2.5rem);
}
.capitulo__datos li { border-top: 1px solid rgb(255 255 255 / 0.4); padding-top: 0.9rem; font-size: 0.9375rem; line-height: 1.5; color: #E2E6E9; }
.capitulo__datos strong { display: block; font: 700 0.8125rem/1.3 var(--sc-font-text); letter-spacing: 0.04em; text-transform: uppercase; color: #fff; margin-bottom: 0.45rem; }
@media (max-width: 860px) {
  .capitulo__datos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.1rem; }
  .capitulo__datos li { font-size: 0.8125rem; padding-top: 0.6rem; }
  .capitulo__velo { background: linear-gradient(to bottom, rgb(20 24 23 / 0.6) 0%, rgb(20 24 23 / 0) 30%), linear-gradient(to top, rgb(20 24 23 / 0.94) 0%, rgb(20 24 23 / 0.8) 38%, rgb(20 24 23 / 0) 66%); }
}
@media (max-height: 700px) and (min-width: 861px) { .capitulo__datos li { font-size: 0.8125rem; } }

/* compromiso is now a short statement after the chapters */
.compromiso { padding-block: clamp(5rem, 14vh, 9rem); }
.compromiso__texto { grid-column: 1 / span 8; }
/* Density only where the chapter title sits (a corner, not the whole frame). */
.capitulo__esquina {
  position: absolute; left: 0; top: 0; width: min(70vw, 62rem); height: min(46svh, 26rem); pointer-events: none;
  background: radial-gradient(ellipse 100% 100% at 0% 0%, rgb(20 24 23 / 0.9) 0%, rgb(20 24 23 / 0.8) 42%, rgb(20 24 23 / 0) 100%);
}
@media (max-width: 860px) { .capitulo__esquina { width: 100vw; height: 34svh; } }
/* Bigger floating plates so the list owns the screen; chapters move more under the hand. */
.flota--a { width: clamp(15rem, 25vw, 28rem); left: 4vw; }
.flota--d { width: clamp(14rem, 23vw, 26rem); right: 4vw; }
.flota--b { width: clamp(11rem, 17vw, 19rem); }
.flota--c { width: clamp(12rem, 18vw, 20rem); }
.flota--a img, .flota--d img { max-height: 40svh; }
.flota--b img, .flota--c img { max-height: 44svh; }
.flota--a img, .flota--b img, .flota--c img, .flota--d img { width: 100%; height: auto; object-fit: cover; }
.capitulo__foto { transform: translate3d(calc((0.5 - var(--sp, 0)) * 3vw), 0, 0) scale(calc(1.2 - var(--sp, 0) * 0.2)); }
@media (max-width: 860px) { .flota { width: 42vw !important; } .flota img { max-height: 26svh !important; } }
.lista__lineas { font-size: clamp(1.3rem, 0.8rem + 1.5vw, 2.3rem); max-width: 36vw; }
@media (max-width: 860px) { .lista__lineas { max-width: none; } }


/* ------------------------------------------------ reduced motion --------
   The client's own Windows has "Efectos de animación" turned off, and many
   visitors will too. Reduced motion here means gentler, not frozen: the cover
   still becomes a plate, the list still lights, chapters still breathe, and
   the catalogue rail still travels with the scroll (it is the navigation).
   Only the drifts and zooms are halved and the parallax beds stay still. */
@media (prefers-reduced-motion: reduce) {
  .catalogo__stage { overflow: clip !important; scroll-snap-type: none !important; }
  .catalogo__riel[data-sc-pan] { transform: translate3d(var(--pan-x, 0px), 0, 0) !important; }
  .catalogo__riel > * { scroll-snap-align: none; }
  .portada__edificio { transform: scale(calc(1 + var(--sp, 0) * 0.07)); }
  .portada__cielo { transform: translate3d(0, calc(var(--sp, 0) * 2svh), 0) scale(1.05); }
  .portada__cabecera { transform: translate3d(-50%, calc(var(--sp, 0) * 4svh), 0); }
  .capitulo__foto { transform: scale(calc(1.08 - var(--sp, 0) * 0.08)); }
  .flota.is-on { transform: none; }
  [data-sc-reveal] { transition: opacity 400ms var(--ease); }
}

/* Wordmark size and place are measured by insaat.js so it sits in the sky. */
.portada__cabecera { width: var(--mast-w, min(70vw, 100svh)) !important; top: var(--mast-top, 9svh) !important; }
/* Wide, short screens crop the photo hardest: frame higher so there is sky for the wordmark. */
@media (min-aspect-ratio: 17/10) { .portada__cielo, .portada__edificio { object-position: 50% 30%; } }
@media (min-aspect-ratio: 19/10) { .portada__cielo, .portada__edificio { object-position: 50% 18%; } }
.portada__titulo { max-width: 15ch; }
/* The tagline must never sit on the palm trunks: a stronger wash in the copy corner only. */
.portada__velo {
  height: 82%;
  background: linear-gradient(to top, rgb(255 255 255 / 0.97) 0%, rgb(255 255 255 / 0.93) 45%, rgb(255 255 255 / 0.7) 66%, rgb(255 255 255 / 0) 100%);
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 38%, rgb(0 0 0 / 0.4) 58%, transparent 74%);
  mask-image: linear-gradient(to right, #000 0%, #000 38%, rgb(0 0 0 / 0.4) 58%, transparent 74%);
}
@media (max-aspect-ratio: 1/1) { .portada__velo { -webkit-mask-image: none; mask-image: none; display: none; } }

/* ============================================================ recorrido ====
   "Entra al departamento": façade → window → sala → cocina → terraza.
   Layer transforms and clips are written by insaat.js every frame. */
.rec__stage { background: #141716; color: #fff; }
.rec__capa { position: absolute; inset: 0; overflow: hidden; will-change: clip-path; }
.rec__capa img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; will-change: transform; transform-origin: 50% 50%; }
.rec__sala, .rec__cocina, .rec__terraza { clip-path: inset(50% 50% 50% 50%); }
.rec__marco { position: absolute; z-index: 2; border: 2px solid rgb(255 255 255 / 0.9); border-radius: 3px; pointer-events: none; opacity: 0; }
.rec__velo { position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(to top, rgb(20 24 23 / 0.78) 0%, rgb(20 24 23 / 0.35) 32%, rgb(20 24 23 / 0) 55%),
              linear-gradient(to bottom, rgb(20 24 23 / 0.5) 0%, rgb(20 24 23 / 0) 22%); }
.rec__texto { position: absolute; z-index: 6; left: var(--sc-gutter); bottom: clamp(2rem, 8svh, 5rem); max-width: min(44rem, 86vw); margin: 0; }
.rec__titulo { font: 700 clamp(2.2rem, 1.2rem + 3.6vw, 5rem)/1.02 var(--sc-font-display); letter-spacing: -0.015em; color: #fff; margin: 0; max-width: 15ch; text-shadow: 0 2px 24px rgb(0 0 0 / 0.25); }
.rec__sub { margin: 0.8rem 0 0; font-size: clamp(1rem, 0.95rem + 0.3vw, 1.2rem); color: #EEF0F1; max-width: 38ch; }
.rec__texto--sala, .rec__texto--cocina { font: 700 clamp(1.8rem, 1.2rem + 2vw, 3.2rem)/1.05 var(--sc-font-display); color: #fff; }
.rec__cierre { margin: 0; font: 700 clamp(1.9rem, 1.2rem + 2.4vw, 3.6rem)/1.05 var(--sc-font-display); color: #fff; }
.rec__texto--terraza { display: grid; justify-items: start; gap: 0.2rem; }
.rec__texto--terraza .boton-visita { margin-top: 1.1rem; }
.rec__chip { position: absolute; z-index: 6; right: var(--sc-gutter); bottom: clamp(2.2rem, 8.5svh, 5.3rem);
  font: 700 0.6875rem/1 var(--sc-font-text); letter-spacing: 0.08em; text-transform: uppercase; color: #fff;
  background: rgb(20 24 23 / 0.7); border: 1px solid rgb(255 255 255 / 0.35); padding: 0.55em 0.75em; border-radius: 2px; }
.rec__pasa { position: absolute; z-index: 6; left: 0; right: 0; bottom: 12svh; margin: 0; text-align: center;
  font: 700 clamp(2.2rem, 1.4rem + 3vw, 4.4rem)/1 var(--sc-font-display); color: #fff; text-shadow: 0 2px 30px rgb(0 0 0 / 0.45); }
.rec__punto { position: absolute; z-index: 5; left: 0; top: 0; opacity: 0; pointer-events: none;
  font: 700 0.6875rem/1 var(--sc-font-text); letter-spacing: 0.07em; text-transform: uppercase; color: var(--carbon);
  background: #fff; padding: 0.55em 0.7em 0.55em 1.55em; border-radius: 2px; box-shadow: 0 6px 18px -6px rgb(0 0 0 / 0.45); white-space: nowrap;
  transition: opacity 260ms var(--ease); }
.rec__punto::before { content: ""; position: absolute; left: 0.6em; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--sc-accent); box-shadow: 0 0 0 4px rgb(171 155 128 / 0.3); }
.rec__riel { position: absolute; z-index: 6; left: var(--sc-gutter); right: var(--sc-gutter); top: calc(var(--cornisa-h) + 1rem);
  list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; opacity: var(--riel-o, 0); }
.rec__riel li { font: 700 0.625rem/1 var(--sc-font-text); letter-spacing: 0.1em; text-transform: uppercase; color: rgb(255 255 255 / 0.65); padding-top: 0.65rem; position: relative; }
.rec__riel li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: rgb(255 255 255 / 0.3); }
.rec__riel li::after { content: ""; position: absolute; left: 0; top: 0; height: 2px; width: calc(var(--lleno, 0) * 100%); background: #fff; }
.rec__riel li.is-on { color: #fff; }
.rec__nota { position: absolute; z-index: 6; right: var(--sc-gutter); bottom: 1.1rem; margin: 0; font-size: 0.75rem; color: rgb(255 255 255 / 0.7); opacity: var(--riel-o, 0); }
.recorrido .boton-visita { background: var(--sc-accent); color: var(--carbon); }
@media (max-width: 860px) {
  .rec__chip { left: var(--sc-gutter); right: auto; bottom: auto; top: calc(var(--cornisa-h) + 0.8rem); }
  .rec__riel li { font-size: 0.5625rem; letter-spacing: 0.06em; }
  .rec__punto { font-size: 0.625rem; }
  .rec__nota { left: var(--sc-gutter); right: auto; bottom: 0.6rem; }
}
.cornisa[data-theme="dark"][data-solid="false"] { background: transparent; box-shadow: none; }
/* Density only under the copy corner, so the cover title reads on bright stone. */
.rec__velo {
  background:
    radial-gradient(ellipse 70% 75% at 0% 100%, rgb(20 24 23 / 0.82) 0%, rgb(20 24 23 / 0.62) 45%, rgb(20 24 23 / 0) 100%),
    linear-gradient(to top, rgb(20 24 23 / 0.6) 0%, rgb(20 24 23 / 0) 40%),
    linear-gradient(to bottom, rgb(20 24 23 / 0.5) 0%, rgb(20 24 23 / 0) 22%);
}
@media (max-width: 860px) { .rec__velo { background: linear-gradient(to top, rgb(20 24 23 / 0.85) 0%, rgb(20 24 23 / 0.55) 38%, rgb(20 24 23 / 0) 62%), linear-gradient(to bottom, rgb(20 24 23 / 0.5) 0%, rgb(20 24 23 / 0) 22%); } }
.rec__velo {
  background:
    radial-gradient(ellipse 78% 85% at 0% 100%, rgb(20 24 23 / 0.9) 0%, rgb(20 24 23 / 0.78) 48%, rgb(20 24 23 / 0) 100%),
    linear-gradient(to top, rgb(20 24 23 / 0.6) 0%, rgb(20 24 23 / 0) 40%),
    linear-gradient(to bottom, rgb(20 24 23 / 0.5) 0%, rgb(20 24 23 / 0) 22%);
}

/* 3D layers: the canvas sits exactly over its photo; the photo stays as the fallback. */
.rec__gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; will-change: transform; transform-origin: 50% 50%; }
.recorrido.es-3d .rec__capa img { visibility: hidden; }

/* ===================================================== ficha: four developments */
.ficha__marco { aspect-ratio: 1 / 1; height: min(70svh, 46vw, calc(100svh - var(--cornisa-h) - 4.5rem)); }
.ficha__tabs { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: clamp(0.4rem, 1.4svh, 1rem); }
.ficha__tabs button {
  font: 700 0.75rem/1 var(--sc-font-text); letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer;
  color: var(--sc-ink-soft); background: transparent; border: 1px solid var(--sc-hairline-strong); border-radius: var(--r);
  padding: 0.7rem 0.9rem; min-height: 40px; transition: background-color 150ms var(--ease), color 150ms var(--ease), border-color 150ms var(--ease);
}
.ficha__tabs button[aria-selected="true"] { background: var(--carbon); border-color: var(--carbon); color: #fff; }
@media (hover: hover) and (pointer: fine) { .ficha__tabs button:hover { border-color: var(--carbon); color: var(--carbon); } .ficha__tabs button[aria-selected="true"]:hover { color: #fff; } }
.ficha__tabs button:focus-visible { outline: 2px solid var(--carbon); outline-offset: 2px; }
.ficha__nombre { font-size: clamp(2rem, min(1.4rem + 3vw, 7.5svh), 4.4rem); }
@media (max-width: 860px) {
  .ficha__marco { aspect-ratio: auto; height: 30svh; width: 100%; }
  .ficha__tabs button { padding: 0.55rem 0.6rem; font-size: 0.6875rem; min-height: 36px; }
  .ficha__nombre { font-size: 2.1rem; }
}
@media (max-width: 860px) and (max-height: 700px) { .ficha__marco { height: 19svh; } }

/* catalogue: two actions per card */
.obra__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 1.2rem; }
.ver-ficha {
  font: 700 0.75rem/1 var(--sc-font-text); letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer;
  color: var(--carbon); background: none; border: 0; border-bottom: 1px solid currentColor; padding: 0.8rem 0 0.35rem; min-height: 40px;
}
.ver-ficha:active { transform: translateY(1px); }

/* ============================================================ somundy ===== */
.somundy {
  --sc-ink: #fff; --sc-ink-soft: var(--hueso-soft);
  color: #fff; background: var(--carbon);
  padding: var(--sc-section) var(--sc-gutter);
}
.somundy__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(2rem, 5vw, 5rem) clamp(1rem, 2.4vw, 2.5rem); align-items: center; max-width: 96rem; margin-inline: auto; }
.somundy__foto { grid-column: 1 / span 6; margin: 0; }
.somundy__marco { overflow: hidden; border-radius: var(--r); aspect-ratio: 4 / 5; max-height: 88svh; box-shadow: var(--sc-e3); }
.somundy__marco img { width: 100%; height: 116%; margin-top: -8%; object-fit: cover; display: block; }
.somundy__texto { grid-column: 8 / -1; display: grid; gap: var(--sc-5); justify-items: start; }
.somundy__logo { width: min(15rem, 60vw); color: #fff; }
.somundy__titulo { font-size: clamp(2.4rem, 1.4rem + 3.4vw, 4.6rem); line-height: 1; letter-spacing: -0.02em; color: var(--arena-claro); }
.somundy__intro { color: #DDE1E4; font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.25rem); line-height: 1.5; max-width: 40ch; }
.somundy__lista { list-style: none; margin: 0; padding: 0; display: grid; width: 100%; }
.somundy__lista li { padding: 0.85rem 0; border-top: 1px solid rgb(255 255 255 / 0.18); color: var(--hueso-soft); line-height: 1.5; }
.somundy__lista li:last-child { border-bottom: 1px solid rgb(255 255 255 / 0.18); }
.somundy__lista strong { color: #fff; }
.somundy__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; margin-top: var(--sc-3); }
.boton-visita--somundy { margin-top: 0; }
.somundy__sitio { color: #fff; font-size: 0.9375rem; min-height: 44px; display: inline-flex; align-items: center; }
.somundy__pasos { list-style: none; margin: clamp(4rem, 9vw, 7rem) auto 0; padding: 0; max-width: 96rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 2.5rem); }
.somundy__pasos li { display: grid; gap: 0.5rem; align-content: start; }
.somundy__pasos img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); margin-bottom: 0.6rem; }
.somundy__n { font: 700 0.75rem/1 var(--sc-font-text); letter-spacing: 0.1em; color: var(--arena-claro); }
.somundy__pasos strong { font: 700 1.5rem/1.15 var(--sc-font-display); color: #fff; }
.somundy__pasos p { margin: 0; color: var(--hueso-soft); line-height: 1.5; max-width: 34ch; }
@media (max-width: 860px) {
  .somundy__grid, .somundy__pasos { grid-template-columns: 1fr; }
  .somundy__foto, .somundy__texto { grid-column: 1 / -1; }
  .somundy__marco { aspect-ratio: 4 / 3; }
}
.cornisa[data-theme="dark"] { --cornisa-bg: var(--carbon); }
@media (max-width: 860px) {
  .ficha__tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--sc-gutter)); padding-inline: var(--sc-gutter); margin-bottom: 0.3rem; }
  .ficha__tabs::-webkit-scrollbar { display: none; }
  .ficha__tabs button { flex: 0 0 auto; }
  .ficha__marco { height: 25svh; }
  .ficha__grid { gap: 0.7rem; }
  .ficha__hoja { gap: 0.5rem; }
  .ficha__lugar { display: none; }
  .ficha__nombre { font-size: 1.85rem; }
  .ficha__datos > div { padding-block: 0.28rem; grid-template-columns: 6.6rem 1fr; }
  .ficha__datos dd { font-size: 0.95rem; line-height: 1.3; }
  .precio__cifra { font-size: 2.4rem; }
}
@media (max-width: 860px) and (max-height: 700px) { .ficha__marco { height: 17svh; } .ficha__datos > div:nth-child(3) { display: none; } }
/* The guess and the answer share one slot on every screen (the tabs took the room). */
.ficha__final { display: grid; }
.ficha__final > .regla, .ficha__final > .precio { grid-area: 1 / 1; }
.regla__real { display: none; }
@media (min-width: 861px) and (max-height: 640px) {
  .ficha__grid { padding-top: calc(var(--cornisa-h) + 0.6rem); padding-bottom: 0.6rem; }
  .ficha__tabs { margin-bottom: 0.2rem; }
  .ficha__tabs button { min-height: 32px; padding: 0.5rem 0.7rem; font-size: 0.6875rem; }
  .ficha__lugar { display: none; }
  .ficha__nombre { font-size: clamp(1.8rem, 6.5svh, 2.6rem); }
  .ficha__datos > div { padding-block: 0.3rem; }
  .ficha__datos dd { font-size: 0.95rem; line-height: 1.3; }
  .ficha__hoja { gap: 0.5rem; }
  .precio__cifra { font-size: clamp(2rem, 7svh, 2.8rem); }
  .precio__veredicto { font-size: 0.95rem; }
}
@media (max-width: 860px) { .rec__velo { background: linear-gradient(to top, rgb(20 24 23 / 0.92) 0%, rgb(20 24 23 / 0.72) 40%, rgb(20 24 23 / 0) 66%), linear-gradient(to bottom, rgb(20 24 23 / 0.5) 0%, rgb(20 24 23 / 0) 22%); } }

/* ======================================================= proyecto tras proyecto ==== */
.mapa__stage { background: #1b1f1e; color: #fff; }
.mapa__lienzo { position: absolute; inset: 0; background: #1b1f1e; z-index: 0; }
.mapa__lienzo .leaflet-tile-pane { filter: brightness(1.15) contrast(1.05); }
.mapa .leaflet-control-attribution { background: rgb(20 24 23 / 0.6); color: #9aa3a8; font-size: 10px; }
.mapa .leaflet-control-attribution a { color: #c3c8cc; }
.mapa__titulo { position: absolute; z-index: 5; left: var(--sc-gutter); top: calc(var(--cornisa-h) + 1.2rem); margin: 0;
  font-size: clamp(2.2rem, 1.2rem + 3.4vw, 4.6rem); line-height: 1; color: #fff; letter-spacing: -0.02em; text-shadow: 0 2px 24px rgb(0 0 0 / 0.5); pointer-events: none; }
.mapa__tarjeta { position: absolute; z-index: 6; left: var(--sc-gutter); bottom: clamp(5rem, 13svh, 7.5rem); width: min(23rem, 86vw);
  background: #fff; color: var(--carbon); border-radius: var(--r); overflow: hidden; box-shadow: 0 24px 50px -16px rgb(0 0 0 / 0.7);
  opacity: 0; transform: translate3d(0, 14px, 0); }
.mapa__tarjeta.is-dentro { opacity: 1; transform: none; transition: opacity 420ms var(--ease), transform 520ms var(--ease); }
.mapa__tarjeta img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.mapa__cuerpo { padding: 1rem 1.15rem 1.15rem; display: grid; gap: 0.25rem; }
.mapa__estatus { margin: 0; font: 700 0.6875rem/1 var(--sc-font-text); letter-spacing: 0.08em; text-transform: uppercase; color: var(--sc-ink-soft); display: inline-flex; align-items: center; gap: 0.5em; }
.mapa__estatus::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--carbon); }
.mapa__estatus--venta::before { background: var(--sc-accent); }
.mapa__nombre { margin: 0.2rem 0 0; font-size: 1.6rem; line-height: 1.05; }
.mapa__lugar { margin: 0; color: var(--sc-ink-soft); font-size: 0.9375rem; }
.mapa__dato { margin: 0.35rem 0 0; font-weight: 700; font-size: 0.9375rem; }
.mapa__cifras { display: flex; gap: 1.4rem; margin: 0.6rem 0 0; color: var(--sc-ink-soft); font-size: 0.875rem; }
.mapa__cifras b { font: 700 2.2rem/1 var(--sc-font-display); color: var(--carbon); margin-right: 0.3rem; }
.mapa__riel { position: absolute; z-index: 6; left: var(--sc-gutter); right: var(--sc-gutter); bottom: 1.2rem; list-style: none; margin: 0; padding: 0;
  display: flex; gap: 0.5rem; overflow-x: auto; scrollbar-width: none; }
.mapa__riel::-webkit-scrollbar { display: none; }
.mapa__riel li { flex: 0 0 auto; font: 700 1rem/1 var(--sc-font-text); letter-spacing: 0.06em; text-transform: uppercase; color: rgb(255 255 255 / 0.6);
  padding: 0.55em 0.7em; border: 1px solid rgb(255 255 255 / 0.22); border-radius: 2px; transition: background-color 200ms var(--ease), color 200ms var(--ease); }
.mapa__riel li.is-on { background: #fff; color: var(--carbon); border-color: #fff; }
.mapa__leyenda { position: absolute; z-index: 6; right: var(--sc-gutter); top: calc(var(--cornisa-h) + 1.4rem); margin: 0; font-size: 0.75rem; color: #c3c8cc; display: flex; align-items: center; gap: 0.45rem; pointer-events: none; }
.mapa__l { width: 9px; height: 9px; border-radius: 50%; display: inline-block; margin-left: 0.6rem; }
.mapa__l--entregado { background: #fff; } .mapa__l--venta { background: var(--sc-accent); }
.mapa__pin { position: relative; }
.mapa__pin span { position: absolute; inset: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 5px rgb(255 255 255 / 0.18); transition: transform 300ms var(--ease); }
.mapa__pin--venta span { background: var(--sc-accent); box-shadow: 0 0 0 5px rgb(171 155 128 / 0.28); }
.mapa__pin b { position: absolute; left: 20px; top: -3px; white-space: nowrap; font: 700 11px/1 var(--sc-font-text); letter-spacing: 0.05em; text-transform: uppercase; color: #fff; opacity: 0; transition: opacity 300ms var(--ease); text-shadow: 0 1px 6px #000; }
.mapa__pin.is-on span { transform: scale(1.6); box-shadow: 0 0 0 8px rgb(255 255 255 / 0.22), 0 0 30px 6px rgb(255 255 255 / 0.35); }
.mapa__pin--venta.is-on span { box-shadow: 0 0 0 8px rgb(171 155 128 / 0.3), 0 0 30px 6px rgb(171 155 128 / 0.5); }
.mapa__pin.is-on b { opacity: 1; }
.mapa.ver-pais .mapa__pin--obra b { opacity: 1; }
.mapa__estatus--obra::before { background: #3A4F66; }
@media (max-width: 860px) {
  .mapa__tarjeta { left: 50%; transform: translate3d(-50%, 14px, 0); bottom: 4.6rem; width: min(21rem, 88vw); }
  .mapa__tarjeta.is-dentro { transform: translate3d(-50%, 0, 0); }
  .mapa__tarjeta img { aspect-ratio: 16 / 9; }
  .mapa__nombre { font-size: 1.35rem; }
  .mapa__leyenda { top: auto; bottom: 3.6rem; right: auto; left: var(--sc-gutter); display: none; }
  .mapa__titulo { font-size: 2rem; }
}
@media (max-height: 640px) { .mapa__tarjeta img { aspect-ratio: 21 / 9; } }
.lamina-ancha--interiores { padding-top: var(--sc-section); }

/* ============================================================ menu (round 9) ===
   The section menu people expect, in the site's own bold uppercase. The part of
   the page in view carries aria-current. Below 1060px it folds into "Menú". */
.cornisa { grid-template-columns: auto 1fr auto; gap: clamp(1rem, 2vw, 2rem); }
.cornisa__menu { justify-self: center; }
.cornisa__menu ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: clamp(0.9rem, 1.7vw, 1.9rem); }
.cornisa__menu a, .cornisa__menu .cornisa__grupo {
  display: inline-flex; align-items: center; min-height: 44px; position: relative;
  font: 700 0.75rem/1 var(--sc-font-text); letter-spacing: 0.1em; text-transform: uppercase;
  color: inherit; text-decoration: none; opacity: 0.78; transition: opacity 160ms var(--ease);
}
.cornisa__menu a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 9px; height: 2px; background: var(--sc-accent); transform: scaleX(0); transform-origin: 0 50%; transition: transform 240ms var(--ease); }
.cornisa__menu a[aria-current] { opacity: 1; }
.cornisa__menu a[aria-current]::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) { .cornisa__menu a:hover, .cornisa__menu .cornisa__grupo:hover { opacity: 1; } }
.cornisa .cornisa__menu .cornisa__grupo { color: inherit; }
.cornisa__acciones { gap: 1rem; }
.cornisa__visita { font-weight: 700; }
.cornisa__abrir { display: none; font: 700 0.75rem/1 var(--sc-font-text); letter-spacing: 0.12em; text-transform: uppercase; color: inherit;
  background: none; border: 1px solid currentColor; border-radius: var(--r); min-height: 40px; padding: 0 0.9rem; cursor: pointer; }
@media (max-width: 1059px) {
  .cornisa { grid-template-columns: auto 1fr auto; }
  .cornisa__menu { display: none; }
  .cornisa__abrir { display: inline-flex; align-items: center; }
}
@media (max-width: 520px) { .cornisa__visita { display: none; } }

.menu {
  margin: 0; width: 100vw; max-width: 100vw; height: 100dvh; max-height: none; padding: 0; border: 0;
  background: var(--carbon); color: var(--hueso);
}
.menu::backdrop { background: rgb(38 44 42 / 0.5); }
.menu[open] { animation: grupo-entra 240ms var(--sc-ease-drawer); }
.menu__hoja { min-height: 100%; display: grid; align-content: start; gap: var(--sc-5); padding: 1rem var(--sc-gutter) 2rem; }
.menu__cerrar { justify-self: end; font: 700 0.75rem/1 var(--sc-font-text); letter-spacing: 0.14em; text-transform: uppercase; color: var(--hueso);
  background: none; border: 0; border-bottom: 1px solid currentColor; padding: 0.9rem 0 0.5rem; min-height: 44px; cursor: pointer; }
.menu :focus-visible { outline-color: var(--hueso); }
.menu__lista { list-style: none; margin: 0; padding: 0; display: grid; }
.menu__lista a { display: flex; align-items: baseline; gap: 1rem; padding: 0.85rem 0; border-top: 1px solid rgb(255 255 255 / 0.16);
  color: var(--hueso); text-decoration: none; font: 700 clamp(1.9rem, 8vw, 2.6rem)/1.05 var(--sc-font-display); letter-spacing: -0.01em; }
.menu__lista li:last-child a { border-bottom: 1px solid rgb(255 255 255 / 0.16); }
.menu__lista span { font: 500 0.75rem/1 var(--sc-font-text); letter-spacing: 0.14em; color: var(--arena-claro); min-width: 1.6rem; }
.menu__grupo { justify-self: start; font: 700 0.8125rem/1 var(--sc-font-text); letter-spacing: 0.12em; text-transform: uppercase; color: var(--hueso);
  background: none; border: 0; border-bottom: 1px solid currentColor; padding: 0.9rem 0 0.5rem; min-height: 44px; cursor: pointer; }
.menu .boton-visita { background: var(--hueso); color: var(--carbon); }

/* ================================================================ inversion ===== */
.inversion { padding: var(--sc-section) var(--sc-gutter); display: grid; gap: clamp(3rem, 7vw, 5.5rem); background: #fff; }
.inversion__cabeza { display: grid; gap: var(--sc-4); max-width: 52rem; }
.inversion__cabeza .cuerpo { max-width: 50ch; font-size: 1.125rem; }
.vias { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 3rem); }
.via { display: grid; align-content: start; gap: 0.75rem; padding-top: 1.25rem; border-top: 2px solid var(--carbon); }
.via__n { font: 700 0.8125rem/1 var(--sc-font-text); letter-spacing: 0.14em; color: var(--arena-texto); }
.via h3 { font-size: clamp(1.45rem, 1.1rem + 1vw, 1.9rem); line-height: 1.1; }
.via p { color: var(--sc-ink-soft); line-height: 1.6; max-width: 36ch; }
.via strong { color: var(--sc-ink); }

.plan { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start;
  background: var(--arena); border-radius: var(--r); padding: clamp(1.5rem, 4vw, 3.5rem); }
.plan__control { display: grid; gap: 1rem; }
.plan__titulo { font: 700 clamp(1.9rem, 1.3rem + 2vw, 3rem)/1 var(--sc-font-display); letter-spacing: -0.02em; }
.plan__devs { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.plan__devs button { font: 700 0.75rem/1 var(--sc-font-text); letter-spacing: 0.1em; text-transform: uppercase; color: var(--sc-ink);
  background: transparent; border: 1px solid color-mix(in oklab, var(--sc-ink) 30%, transparent); border-radius: var(--r); min-height: 44px; padding: 0 1rem; cursor: pointer; }
.plan__devs button[aria-checked="true"] { background: var(--carbon); color: #fff; border-color: var(--carbon); }
.plan__pregunta { margin-top: 0.75rem; font: italic 1.25rem/1.3 var(--sc-font-display); }
.plan__input { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; margin: 0; background: transparent; cursor: pointer; --pos: 0%; }
.plan__input::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(to right, var(--carbon) 0 var(--pos), rgb(38 44 42 / 0.18) var(--pos)); }
.plan__input::-moz-range-track { height: 6px; border-radius: 3px; background: linear-gradient(to right, var(--carbon) 0 var(--pos), rgb(38 44 42 / 0.18) var(--pos)); }
.plan__input::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -10px; border-radius: 50%; background: #fff; border: 2px solid var(--carbon); box-shadow: 0 4px 12px -4px rgb(0 0 0 / 0.35); }
.plan__input::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 2px solid var(--carbon); }
.plan__input:focus-visible { outline: 2px solid var(--carbon); outline-offset: 4px; }
.plan__marcas { position: relative; height: 1rem; margin: -0.4rem 13px 0; font: 500 0.75rem/1 var(--sc-font-text); color: var(--sc-ink-soft); }
.plan__marcas span { position: absolute; top: 0; transform: translateX(-50%); }
.plan__cuenta { margin: 0; display: grid; background: #fff; border-radius: var(--r); padding: 0.5rem 1.25rem; box-shadow: var(--sc-e2); }
.plan__cuenta > div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.85rem 0; border-bottom: 1px solid var(--arena); }
.plan__cuenta > div:last-child { border-bottom: 0; }
.plan__cuenta dt { font: 500 0.75rem/1.2 var(--sc-font-text); letter-spacing: 0.12em; text-transform: uppercase; color: var(--sc-ink-soft); }
.plan__cuenta dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.plan__total dd { font: 700 clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem)/1 var(--sc-font-display); }
.plan__ahorro dd { color: #4F6B41; }
.plan__nota { grid-column: 1 / -1; font-size: 0.8125rem; color: var(--sc-ink-soft); }
.inversion__cierre { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; }
.inversion__cierre .boton-visita { margin-top: 0; }
.inversion__cierre .cuerpo { max-width: 40ch; }
@media (max-width: 860px) {
  .vias { grid-template-columns: 1fr; }
  .plan { grid-template-columns: 1fr; padding: 1.25rem; }
}

/* ============================================================== experiencia ===== */
.experiencia { padding: var(--sc-section) var(--sc-gutter); display: grid; gap: clamp(3rem, 7vw, 5.5rem); background: #fff; }
.experiencia__cabeza { display: grid; gap: var(--sc-4); max-width: 54rem; }
.experiencia__cabeza .cuerpo { max-width: 52ch; font-size: 1.125rem; }
.cifras { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 2px solid var(--carbon); }
.cifras li { display: grid; align-content: start; gap: 0.5rem; padding: 1.4rem 1rem 1.4rem 0; }
.cifras li + li { padding-left: clamp(0.75rem, 1.6vw, 1.5rem); border-left: 1px solid var(--arena); }
.cifras b { font: 700 clamp(2.8rem, 1.6rem + 3.6vw, 5rem)/0.9 var(--sc-font-display); letter-spacing: -0.03em; color: var(--carbon); }
.cifras span { color: var(--sc-ink-soft); font-size: 0.9375rem; line-height: 1.4; max-width: 18ch; }
.capacidades { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 2fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.capacidades__titulo { font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.6rem); line-height: 1; letter-spacing: -0.02em; }
.capacidades__lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1.5rem, 3vw, 3rem); }
.capacidades__lista li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.95rem 0; border-top: 1px solid var(--arena); }
.capacidades__lista strong { font-weight: 600; line-height: 1.35; }
.capacidades__lista span { flex: 0 0 auto; font: 700 0.6875rem/1 var(--sc-font-text); letter-spacing: 0.12em; text-transform: uppercase; color: var(--arena-texto); }
.capacidades__norma { grid-column: 2; font-size: 0.875rem; color: var(--sc-ink-soft); padding-top: 0.5rem; }
.socios { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1.5rem 3rem;
  background: var(--carbon); color: #fff; border-radius: var(--r); padding: clamp(1.5rem, 4vw, 3.5rem); --sc-ink-soft: var(--hueso-soft); }
.socios > div { display: grid; gap: 0.75rem; max-width: 46rem; }
.socios__titulo { font-size: clamp(1.8rem, 1.3rem + 1.8vw, 2.8rem); line-height: 1.05; letter-spacing: -0.02em; color: #fff; }
.socios .boton-visita { margin-top: 0; background: #fff; color: var(--carbon); }
.socios :focus-visible { outline-color: #fff; }
@media (max-width: 1100px) { .cifras { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cifras li:nth-child(4) { border-left: 0; padding-left: 0; } }
@media (max-width: 860px) {
  .cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cifras li:nth-child(n) { border-left: 0; padding-left: 0; }
  .cifras li:nth-child(2n) { padding-left: 1rem; border-left: 1px solid var(--arena); }
  .capacidades { grid-template-columns: 1fr; }
  .capacidades__lista { grid-template-columns: 1fr; }
  .capacidades__norma { grid-column: 1; }
}
/* a solid head: copy never shows through the menu */
.cornisa[data-solid="true"] { background: var(--cornisa-bg, var(--sc-canvas)); }
/* Leaflet places markers absolutely; .mapa__pin must not turn them into a flowing stack */
.leaflet-marker-icon.mapa__pin { position: absolute; }
/* Esri grey is lighter and busier than the old dark style: darken it and seat the chips on a dark plate */
.mapa__lienzo .leaflet-tile-pane { filter: brightness(0.62) contrast(1.1) saturate(0.6); }
.mapa__riel li { background: rgb(20 24 23 / 0.82); color: rgb(255 255 255 / 0.78); }
.mapa__riel li.is-on { background: #fff; color: var(--carbon); }
.rec__punto.is-izq { padding: 0.55em 1.55em 0.55em 0.7em; }
.rec__punto.is-izq::before { left: auto; right: 0.6em; }

/* ============================================= quedan + entra con (round 10) ===
   Replaces la regla. Both stay on the sheet: availability first, then the money. */
.ficha__final > .precio { grid-area: auto; }
.ficha__final { gap: clamp(0.9rem, 2.4svh, 1.5rem); }
.quedan { display: grid; gap: 0.5rem; opacity: var(--regla-o, 0); transform: translate3d(0, calc((1 - var(--regla-o, 0)) * 10px), 0); }
.quedan[hidden], .entra[hidden] { display: none; }
.quedan__linea { color: var(--sc-ink-soft); font-size: 1rem; line-height: 1.2; }
.quedan__linea b { font: 700 clamp(1.5rem, 1.1rem + 1.2vw, 2rem)/1 var(--sc-font-display); color: var(--sc-ink); margin-right: 0.1em; }
.quedan__linea span { font-weight: 700; color: var(--sc-ink); }
.quedan__unidades { display: flex; gap: 3px; height: 10px; max-width: 26rem; }
.quedan__unidades i { flex: 1 1 0; border-radius: 1px; background: color-mix(in oklab, var(--carbon) 22%, transparent); }
.quedan__unidades i.libre { background: var(--sc-accent); }
.entra { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 8.5rem)); gap: 0.6rem;
  opacity: var(--rev, 0); }
.entra li { display: grid; gap: 0.15rem; padding-top: 0.5rem; border-top: 3px solid var(--carbon); font-size: 0.8125rem; line-height: 1.3; color: var(--sc-ink-soft); }
.entra li:last-child { border-top-color: color-mix(in oklab, var(--carbon) 22%, transparent); }
.entra b { font: 700 1.05rem/1.1 var(--sc-font-display); color: var(--sc-ink); }
@media (max-height: 640px), (max-width: 860px) {
  .entra li { font-size: 0.75rem; padding-top: 0.35rem; }
  .entra b { font-size: 0.95rem; }
  .quedan__linea b { font-size: 1.4rem; }
}

/* round 10b: Quedan rides on the caption row, so the money column only holds the money */
.ficha__laminas { position: relative; }
.ficha__pies { height: 2.6rem; }
.ficha__laminas > .quedan { position: absolute; right: 0; bottom: 0; height: 2.6rem; align-content: start; justify-items: end; gap: 0.35rem; width: min(62%, 20rem); }
.quedan__linea { font-size: 0.875rem; }
.quedan__linea b { font-size: 1.35rem; }
.quedan__unidades { height: 7px; width: 100%; gap: 2px; }
.entra { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 34rem; }
.precio__cifra { font-size: clamp(2rem, min(1.4rem + 2.6vw, 7svh), 3.8rem); }
@media (max-width: 860px) {
  .ficha__pies { height: 2.3rem; }
  .ficha__laminas > .quedan { height: 2.3rem; gap: 0.25rem; }
  .quedan__linea { font-size: 0.75rem; }
  .quedan__linea b { font-size: 1.1rem; }
  .entra { gap: 0.4rem; }
  .entra li { font-size: 0.6875rem; }
  .entra b { font-size: 0.8125rem; }
}

/* ================================================== Juneau patterns (round 11) ===
   Two-weight titles, a small pre-title, mega menu with image, at-a-glance sheets,
   market cards, service columns and a process strip. */
.pretitulo { font: 700 0.75rem/1.3 var(--sc-font-text); letter-spacing: 0.14em; text-transform: uppercase; color: var(--arena-texto); }
.titulo-dos { font-weight: 400; }
.titulo-dos b { font-weight: 700; }

/* mega menu */
.cornisa__menu .con-mega { position: static; }
.mega { position: fixed; left: 0; right: 0; top: var(--cornisa-h); z-index: -1;
  display: grid; grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 3rem); align-items: center;
  padding: 1.75rem var(--sc-gutter) 2rem; background: #fff; color: var(--carbon);
  box-shadow: 0 1px 0 rgb(38 44 42 / 0.12), 0 24px 40px -24px rgb(38 44 42 / 0.35);
  visibility: hidden; opacity: 0; transform: translateY(-6px); transition: opacity 180ms var(--ease), transform 220ms var(--ease), visibility 0s linear 220ms; }
.con-mega:hover > .mega, .con-mega:focus-within > .mega { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.con-mega.is-cerrado > .mega { visibility: hidden; opacity: 0; }
.mega img { width: 100%; height: 13rem; object-fit: cover; border-radius: var(--r); }
.mega__texto { display: grid; gap: 0.6rem; align-content: center; }
.mega__titulo { font: 400 clamp(1.8rem, 1.2rem + 1.6vw, 2.6rem)/1.05 var(--sc-font-display); letter-spacing: -0.02em; }
.mega__titulo b { font-weight: 700; }
.mega__frase { color: var(--sc-ink-soft); max-width: 44ch; }
.mega__links { list-style: none; margin: 0.4rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 0.1rem 2.5rem; }
.cornisa .mega__links a, .cornisa .mega__links button {
  display: inline-flex; align-items: center; gap: 0.6rem; min-height: 40px; padding: 0; border: 0; background: none; cursor: pointer;
  font: 700 0.8125rem/1.2 var(--sc-font-text); letter-spacing: 0.06em; text-transform: none; color: var(--carbon); opacity: 1; text-decoration: none; }
.cornisa .mega__links a::after, .cornisa .mega__links button::after { content: "→"; position: static; height: auto; background: none; transform: none; color: var(--arena-texto); transition: transform 160ms var(--ease); }
@media (hover: hover) and (pointer: fine) { .cornisa .mega__links a:hover::after, .cornisa .mega__links button:hover::after { transform: translateX(4px); } }
.cornisa[data-theme="dark"] .mega { color: var(--carbon); }

/* portafolio */
.portafolio { padding: var(--sc-section) var(--sc-gutter); display: grid; gap: clamp(2rem, 5vw, 3.5rem); background: #fff; }
.portafolio__cabeza { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1.5rem; }
.portafolio__cabeza > div:first-child { display: grid; gap: 0.75rem; }
.portafolio__rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: clamp(1.25rem, 2.4vw, 2rem); }
.vistazo { display: grid; align-content: start; gap: 0.75rem; }
.vistazo[hidden] { display: none; }
.vistazo__foto { position: relative; border-radius: var(--r); overflow: hidden; aspect-ratio: 4 / 3; background: var(--arena); }
.vistazo__foto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 600ms var(--ease); }
.vistazo__foto::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(to top, rgb(20 24 23 / 0.82), rgb(20 24 23 / 0)); }
@media (hover: hover) and (pointer: fine) { .vistazo:hover .vistazo__foto img { transform: scale(1.04); } }
.vistazo__nombre { position: absolute; z-index: 1; left: 1rem; right: 1rem; bottom: 0.9rem; display: grid; gap: 0.2rem; color: #fff;
  font: 700 1.35rem/1.1 var(--sc-font-display); }
.vistazo__nombre small { font: 400 0.875rem/1.3 var(--sc-font-text); color: rgb(255 255 255 / 0.85); }
.vistazo__etq { justify-self: start; margin-bottom: 0.3rem; font: 700 0.625rem/1 var(--sc-font-text); letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.45em 0.6em; border-radius: 2px; background: #fff; color: var(--carbon); }
.vistazo__etq--venta { background: var(--sc-accent); }
.vistazo__etq--privada { background: #3A4F66; color: #fff; }
.vistazo__glance { font: 700 0.6875rem/1 var(--sc-font-text); letter-spacing: 0.14em; text-transform: uppercase; color: var(--arena-texto); padding-top: 0.25rem; }
.vistazo dl { margin: 0; display: grid; grid-template-columns: 1fr 1fr; border-top: 2px solid var(--carbon); }
.vistazo dl > div { display: grid; gap: 0.15rem; padding: 0.6rem 0.75rem 0.6rem 0; border-bottom: 1px solid var(--arena); }
.vistazo dt { font: 500 0.6875rem/1.2 var(--sc-font-text); letter-spacing: 0.1em; text-transform: uppercase; color: var(--sc-ink-soft); }
.vistazo dd { margin: 0; font-weight: 600; font-size: 0.9375rem; line-height: 1.3; }
.portafolio__cierre { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; border-top: 1px solid var(--arena); padding-top: 1.5rem; }

/* mercados */
.mercados { display: grid; gap: clamp(1.25rem, 3vw, 2rem); }
.mercados__cabeza { display: grid; gap: 0.6rem; }
.mercados__titulo, .servicios__titulo { font-size: clamp(1.9rem, 1.3rem + 1.8vw, 2.8rem); line-height: 1; letter-spacing: -0.02em; }
.mercados__lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.75rem, 1.6vw, 1.25rem); }
.mercados__lista a { position: relative; display: grid; align-content: end; gap: 0.3rem; min-height: clamp(14rem, 24vw, 19rem); padding: 1.25rem; border-radius: var(--r); overflow: hidden;
  color: #fff; text-decoration: none; isolation: isolate; }
.mercados__lista img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); }
.mercados__lista a::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgb(20 24 23 / 0.88) 0%, rgb(20 24 23 / 0.35) 55%, rgb(20 24 23 / 0.1) 100%); }
@media (hover: hover) and (pointer: fine) { .mercados__lista a:hover img { transform: scale(1.05); } }
.mercados__lema { font: 700 clamp(1.3rem, 1rem + 1vw, 1.75rem)/1.1 var(--sc-font-display); }
.mercados__lista strong { font: 700 0.75rem/1.2 var(--sc-font-text); letter-spacing: 0.12em; text-transform: uppercase; color: var(--arena-claro); }
.mercados__lista a:focus-visible { outline: 3px solid var(--carbon); outline-offset: 3px; }

/* servicios */
.servicios, .proceso { display: grid; gap: clamp(1.25rem, 3vw, 2rem); }
.servicios__cabeza { display: grid; gap: 0.6rem; }
.servicios__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 2.25rem); }
.servicio { display: grid; align-content: start; gap: 0.5rem; padding-top: 1rem; border-top: 2px solid var(--carbon); }
.servicio__marca { font: 700 0.6875rem/1 var(--sc-font-text); letter-spacing: 0.14em; color: var(--arena-texto); }
.servicio h4 { margin: 0; font: 700 1.3rem/1.15 var(--sc-font-display); }
.servicio ul { list-style: none; margin: 0.25rem 0 0; padding: 0; display: grid; }
.servicio li { padding: 0.55rem 0; border-bottom: 1px solid var(--arena); font-size: 0.9375rem; line-height: 1.35; }
.servicios .capacidades__norma { grid-column: auto; padding-top: 0; }

/* proceso */
.proceso__pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; counter-reset: none; }
.proceso__pasos li { position: relative; display: grid; align-content: start; gap: 0.4rem; padding: 1.4rem 1rem 0 0; border-top: 2px solid var(--carbon); }
.proceso__pasos li::before { content: ""; position: absolute; left: 0; top: -7px; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid var(--carbon); }
.proceso__pasos li:last-child::before { background: var(--sc-accent); border-color: var(--sc-accent); }
.proceso__pasos span { font: 700 0.75rem/1 var(--sc-font-text); letter-spacing: 0.14em; color: var(--arena-texto); }
.proceso__pasos strong { font: 700 1.1rem/1.2 var(--sc-font-display); }
.proceso__pasos p { color: var(--sc-ink-soft); font-size: 0.875rem; line-height: 1.45; }

@media (max-width: 1100px) {
  .servicios__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proceso__pasos { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 2rem; }
}
@media (max-width: 860px) {
  .mercados__lista { grid-template-columns: 1fr 1fr; }
  .mercados__lista a { min-height: 12rem; padding: 0.9rem; }
  .mercados__lema { font-size: 1.1rem; }
  .mercados__lista strong { font-size: 0.625rem; }
  .servicios__cols { grid-template-columns: 1fr; }
  .proceso__pasos { grid-template-columns: 1fr; row-gap: 0; }
  .proceso__pasos li { padding: 0 0 1.25rem 1.6rem; border-top: 0; border-left: 2px solid var(--carbon); }
  .proceso__pasos li::before { left: -7px; top: 0; }
  .proceso__pasos li:last-child { border-left-color: transparent; }
}
.cornisa__menu .mega__links { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 0.1rem 2.5rem; }
/* six developments: one row of tabs that scrolls sideways instead of wrapping */
.ficha__tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 2px; margin-inline: -2px; }
.ficha__tabs::-webkit-scrollbar { display: none; }
.ficha__tabs button { flex: 0 0 auto; }
.ficha__tabs { gap: 0.25rem; }
.ficha__tabs button { padding-inline: 0.6rem; font-size: 0.7rem; letter-spacing: 0.02em; }

/* ============================================ framing: buildings stay whole (round 13) ===
   A facade is never cut at the base or the sides: frames take the photo's own 4:3 shape,
   and where a frame cannot (the square plates in a short phone strip), the photo is shown
   whole on the page's grey. */
.lamina.es-edificio { object-fit: contain; background: var(--sc-surface); }
.mega img { height: auto; aspect-ratio: 4 / 3; }
.mercados__lista a { min-height: 0; aspect-ratio: 4 / 3; }
@media (max-width: 860px) { .mercados__lista a { min-height: 0; } }
@media (max-width: 520px) { .mercados__lista { grid-template-columns: 1fr; } .mercados__lema { font-size: 1.3rem; } .mercados__lista strong { font-size: 0.6875rem; } }
@media (max-width: 860px) {
  /* phone map card: the photo becomes a 4:3 thumbnail beside the text, whole building in view */
  .mapa__tarjeta:has(img) { display: grid; grid-template-columns: 38% 1fr; align-items: start; }
  .mapa__tarjeta img { aspect-ratio: 4 / 3; height: auto; margin: 0.75rem 0 0.75rem 0.75rem; width: calc(100% - 0.75rem); border-radius: 2px; }
  .mapa__tarjeta:has(img) .mapa__cuerpo { padding: 0.75rem 0.9rem 0.85rem; }
}
@media (max-height: 640px) { .mapa__tarjeta img { aspect-ratio: 4 / 3; } }
/* obras and Somundy facades: lighter parallax overscan so the building keeps its base and sides */
.placa--obra-a .placa__marco img, .placa--obra-b .placa__marco img { height: 106%; margin-top: -3%; }
.somundy__marco img { height: 106%; margin-top: -3%; }
@media (max-width: 860px) { .somundy__marco { aspect-ratio: 4 / 5; max-height: 70svh; } }

/* ficha: construction progress and the link to the development's own page */
.ficha__avance { display: inline-flex; align-items: center; gap: 0.45rem; margin-left: 0.7rem; }
.ficha__avance[hidden] { display: none; }
.ficha__barra { flex: 0 0 3.5rem; width: 3.5rem; height: 4px; border-radius: 2px; background: color-mix(in oklab, var(--carbon) 15%, transparent); overflow: hidden; }
.ficha__barra i { display: block; height: 100%; background: var(--sc-accent); }
.ficha__avance b { color: var(--sc-ink); font-weight: 600; }
.precio__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1.5rem; opacity: var(--cta-o, 0); }
.precio__acciones .enlace-visita { opacity: 1; }
.ficha__pagina { display: inline-flex; margin-top: 0; font: 700 0.75rem/1 var(--sc-font-text); letter-spacing: 0.1em; text-transform: uppercase; color: var(--sc-ink); text-decoration: none; border-bottom: 1px solid currentColor; padding: 0.5rem 0 0.3rem; }
.ficha__encabezado .etiqueta--estatus { flex-wrap: wrap; row-gap: 0.3rem; }
.ficha__avance { white-space: nowrap; }

/* ================================================= inner pages (round 13) =====
   Development pages, legal pages, suppliers and jobs: same header, menu, group panel
   and footer as the home page, on white, with the Juneau sheet patterns. */
.interior { background: #fff; }
.interior__main { padding: calc(var(--cornisa-h) + clamp(1.5rem, 4vw, 3rem)) var(--sc-gutter) var(--sc-section); display: grid; gap: clamp(3rem, 7vw, 5.5rem); max-width: 1320px; margin: 0 auto; }
.interior__pie { padding: 0 var(--sc-gutter) var(--sc-6); max-width: 1320px; margin: 0 auto; }
.interior__pie .colofon__pie { border-top: 1px solid var(--arena); padding-top: var(--sc-6); }
.interior .cornisa[data-solid="true"] { background: #fff; }

/* development page */
.dev__hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.dev__texto { display: grid; gap: 0.8rem; align-content: start; }
.dev__migas { font-size: 0.8125rem; color: var(--sc-ink-soft); }
.dev__migas a { color: inherit; }
.dev__nombre { font-size: clamp(2.4rem, 1.6rem + 3vw, 4.4rem); line-height: 0.98; letter-spacing: -0.025em; }
.dev__lugar { color: var(--sc-ink-soft); font-size: 1.0625rem; }
.dev__resumen { font-size: 1.125rem; line-height: 1.5; max-width: 40ch; }
.dev__precio { display: grid; gap: 0.4rem; padding-top: 0.6rem; }
.dev__cifra { font: 700 clamp(2.2rem, 1.6rem + 2vw, 3.4rem)/1 var(--sc-font-display); letter-spacing: -0.02em; display: flex; align-items: baseline; gap: 0.5rem; }
.dev__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1.6rem; margin-top: 0.6rem; }
.dev__acciones .boton-visita { margin-top: 0; }
.dev__portada { margin: 0; display: grid; gap: 0.5rem; }
.dev__portada img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; background: var(--sc-surface); border-radius: var(--r); box-shadow: var(--sc-e2); }
.dev__portada figcaption, .dev__foto figcaption { font-size: 0.8125rem; color: var(--sc-ink-soft); }
.dev__bloque { display: grid; gap: clamp(1rem, 2.4vw, 1.75rem); }
.dev__h2 { font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.6rem); line-height: 1.02; letter-spacing: -0.02em; margin: 0; }
.dev__datos-fila { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.dev__datos { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 2px solid var(--carbon); }
.dev__datos > div { display: grid; gap: 0.2rem; padding: 0.85rem 1rem 0.85rem 0; border-bottom: 1px solid var(--arena); }
.dev__datos dt { font: 500 0.6875rem/1.2 var(--sc-font-text); letter-spacing: 0.1em; text-transform: uppercase; color: var(--sc-ink-soft); }
.dev__datos dd { margin: 0; font-weight: 600; line-height: 1.35; }
.dev__quedan { padding-top: 0.6rem; }
.dev__quedan .quedan__unidades { height: 10px; }
.dev__galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: clamp(0.75rem, 1.6vw, 1.25rem); }
.dev__foto { margin: 0; display: grid; gap: 0.4rem; }
.dev__foto img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--r); }
.dev__avance-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1.4rem; }
.dev__avance-num { font: 700 clamp(2.6rem, 1.8rem + 2.4vw, 4rem)/1 var(--sc-font-display); }
.dev__avance-barra { flex: 1 1 14rem; height: 8px; border-radius: 4px; background: color-mix(in oklab, var(--carbon) 12%, transparent); overflow: hidden; }
.dev__avance-barra i { display: block; height: 100%; background: var(--sc-accent); }
.dev__avance-etapa { font-weight: 600; }
.dev__mapa { height: clamp(16rem, 40vw, 26rem); border-radius: var(--r); overflow: hidden; background: var(--arena); }
.dev__nota { font-size: 0.875rem; color: var(--sc-ink-soft); max-width: 70ch; }
.dev__asesor { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 3rem; background: var(--arena); border-radius: var(--r); padding: clamp(1.5rem, 4vw, 3rem); }
.dev__asesor > div { display: grid; gap: 0.6rem; max-width: 44rem; }
.dev__asesor .boton-visita { margin-top: 0; }
.dev__otros { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: clamp(0.75rem, 1.6vw, 1.25rem); }
.dev__otros a { display: grid; gap: 0.3rem; color: inherit; text-decoration: none; }
.dev__otros img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); transition: transform 500ms var(--ease); }
@media (hover: hover) and (pointer: fine) { .dev__otros a:hover img { transform: scale(1.02); } }
.dev__otros strong { font: 700 1.1rem/1.15 var(--sc-font-display); }
.dev__otros span { font-size: 0.875rem; color: var(--sc-ink-soft); }
@media (max-width: 860px) {
  .dev__hero { grid-template-columns: 1fr; }
  .dev__portada { order: -1; }
  .dev__datos-fila { grid-template-columns: 1fr; }
  .dev__datos { grid-template-columns: 1fr; }
}

/* legal pages */
.legal { max-width: 52rem; display: grid; gap: 1rem; }
.legal__titulo { font-size: clamp(2.4rem, 1.6rem + 3vw, 4rem); line-height: 1; letter-spacing: -0.025em; }
.legal__fecha { color: var(--sc-ink-soft); font-size: 0.875rem; }
.legal__borrador { background: #F4EFE6; border-left: 3px solid var(--sc-accent); padding: 0.75rem 1rem; font-size: 0.9375rem; }
.legal__lead { font-size: 1.125rem; line-height: 1.55; }
.legal h2 { font-size: 1.45rem; margin-top: 1.5rem; }
.legal p, .legal li { line-height: 1.65; color: var(--sc-ink); }
.legal ol { margin: 0; padding-left: 1.3rem; display: grid; gap: 0.35rem; }
.legal__tabla { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.legal__tabla th, .legal__tabla td { text-align: left; vertical-align: top; padding: 0.6rem 0.75rem 0.6rem 0; border-bottom: 1px solid var(--arena); }
.legal__tabla th { font: 700 0.6875rem/1.2 var(--sc-font-text); letter-spacing: 0.1em; text-transform: uppercase; color: var(--sc-ink-soft); border-bottom: 2px solid var(--carbon); }
@media (max-width: 640px) { .legal__tabla { font-size: 0.875rem; } .legal__tabla th, .legal__tabla td { padding-right: 0.5rem; } }

/* suppliers and jobs */
.interior__cabeza { display: grid; gap: 0.9rem; max-width: 52rem; }
.interior__cabeza .cuerpo { max-width: 56ch; font-size: 1.125rem; }
.interior__dos { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.interior__dos > div { display: grid; gap: 1.25rem; align-content: start; }
.interior__lista { list-style: none; margin: 0 0 0.75rem; padding: 0; display: grid; border-top: 2px solid var(--carbon); }
.interior__lista li { padding: 0.6rem 0; border-bottom: 1px solid var(--arena); }
.interior__areas { margin: 0; display: grid; gap: 0; border-top: 2px solid var(--carbon); }
.interior__areas > div { padding: 0.8rem 0; border-bottom: 1px solid var(--arena); display: grid; gap: 0.2rem; }
.interior__areas dt { font-weight: 700; }
.interior__areas dd { margin: 0; color: var(--sc-ink-soft); line-height: 1.5; }
.forma { display: grid; gap: 0.9rem; background: var(--arena); border-radius: var(--r); padding: clamp(1.25rem, 3vw, 2.25rem); position: sticky; top: calc(var(--cornisa-h) + 1.5rem); }
.forma label { display: grid; gap: 0.35rem; font: 700 0.75rem/1.2 var(--sc-font-text); letter-spacing: 0.08em; text-transform: uppercase; color: var(--sc-ink-soft); }
.forma input, .forma select, .forma textarea { font: 400 1rem/1.4 var(--sc-font-text); letter-spacing: 0; text-transform: none; color: var(--sc-ink); background: #fff; border: 1px solid color-mix(in oklab, var(--carbon) 22%, transparent); border-radius: var(--r); padding: 0.7rem 0.8rem; min-height: 44px; }
.forma input:focus-visible, .forma select:focus-visible, .forma textarea:focus-visible { outline: 2px solid var(--carbon); outline-offset: 1px; }
.forma__casilla { display: flex !important; grid-template-columns: none; align-items: flex-start; gap: 0.6rem !important; font: 400 0.875rem/1.45 var(--sc-font-text) !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--sc-ink) !important; }
.forma__casilla input { min-height: 0; width: 18px; height: 18px; margin-top: 2px; flex: 0 0 auto; accent-color: var(--carbon); }
.forma .boton-visita { margin-top: 0.3rem; border: 0; cursor: pointer; justify-self: start; }
.forma__nota { font-size: 0.8125rem; color: var(--sc-ink-soft); }
@media (max-width: 860px) { .interior__dos { grid-template-columns: 1fr; } .forma { position: static; } }

.dev__pin span { box-shadow: 0 0 0 10px rgb(171 155 128 / 0.35), 0 0 0 26px rgb(171 155 128 / 0.18) !important; }

/* carpeta corporativa: the code dialog */
.carpeta { margin: auto; width: min(32rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); padding: 0; border: 0; border-radius: var(--r); background: #fff; color: var(--sc-ink); box-shadow: 0 30px 80px -20px rgb(0 0 0 / 0.45); }
.carpeta::backdrop { background: rgb(38 44 42 / 0.55); }
.carpeta__hoja { padding: clamp(1.25rem, 4vw, 2.25rem); display: grid; gap: 0.9rem; }
.carpeta__cerrar { color: var(--sc-ink); }
.carpeta__titulo { font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.6rem); line-height: 1; }
.carpeta .forma { position: static; background: var(--sc-surface); }
.carpeta__paso[hidden] { display: none; }
.carpeta__otro { justify-self: start; background: none; border: 0; padding: 0.4rem 0; font: 500 0.8125rem/1.2 var(--sc-font-text); color: var(--sc-ink-soft); text-decoration: underline; cursor: pointer; }
.carpeta__aviso { font-size: 0.875rem; color: var(--arena-texto); min-height: 1.2em; }
.socios__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1.6rem; }
.socios__carpeta { color: #fff; }

/* language switcher (ES · EN · 中文) and Chinese type */
.idiomas { display: inline-flex; align-items: center; gap: 0.15rem; font: 700 0.6875rem/1 var(--sc-font-text); letter-spacing: 0.08em; }
.idiomas a, .idiomas span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 0.35rem; color: inherit; text-decoration: none; opacity: 0.6; }
.idiomas span[aria-current] { opacity: 1; border-bottom: 2px solid var(--sc-accent); min-height: 0; padding-bottom: 0.2rem; }
@media (hover: hover) and (pointer: fine) { .idiomas a:hover { opacity: 1; } }
@media (max-width: 520px) { .idiomas { gap: 0; } .idiomas a, .idiomas span { padding: 0 0.25rem; } }
:lang(zh-Hans) { --sc-font-display: "Microsoft YaHei", "PingFang SC", "Noto Sans SC", "Trebuchet MS", sans-serif; --sc-font-text: "Microsoft YaHei", "PingFang SC", "Noto Sans SC", "Segoe UI", sans-serif; }
:lang(zh-Hans) .titulo-capitulo, :lang(zh-Hans) .dev__nombre, :lang(zh-Hans) .rec__titulo { letter-spacing: 0; }
:lang(zh-Hans) .etiqueta, :lang(zh-Hans) .pretitulo, :lang(zh-Hans) .cornisa__menu a { letter-spacing: 0.04em; }

/* blog: cards, article page and the home strip */
.blog__rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: clamp(1.25rem, 2.6vw, 2.25rem); }
.post[hidden] { display: none; }
.post a { display: grid; gap: 0.55rem; color: inherit; text-decoration: none; }
.post img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); transition: transform 500ms var(--ease); }
@media (hover: hover) and (pointer: fine) { .post a:hover img { transform: scale(1.02); } .post a:hover h3 { text-decoration: underline; text-underline-offset: 3px; } }
.post__meta { font-size: 0.8125rem; color: var(--sc-ink-soft); }
.post__meta span { font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.6875rem; color: var(--arena-texto); }
.post h3 { font: 700 1.35rem/1.2 var(--sc-font-display); }
.post__resumen { color: var(--sc-ink-soft); line-height: 1.55; font-size: 0.9375rem; }
.interior__cabeza .filtros { margin-top: 0.5rem; }
.nota { max-width: 46rem; display: grid; gap: 1rem; }
.nota__titulo { font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.6rem); line-height: 1.04; letter-spacing: -0.02em; }
.nota__lead { font-size: 1.1875rem; line-height: 1.55; color: var(--sc-ink-soft); }
.nota__foto { margin: 0.5rem 0; }
.nota__foto img { width: 100%; height: auto; border-radius: var(--r); }
.nota__cuerpo { display: grid; gap: 0.9rem; font-size: 1.0625rem; }
.nota__cuerpo h2 { font-size: 1.45rem; margin-top: 1rem; }
.nota__cuerpo p, .nota__cuerpo li { line-height: 1.7; }
.nota__cuerpo ul, .nota__cuerpo ol { margin: 0; padding-left: 1.3rem; display: grid; gap: 0.4rem; }
.nota__cuerpo a { color: var(--sc-ink); text-underline-offset: 3px; }
.nota__asesor { margin-top: 1.5rem; }
.blog-inicio { padding: var(--sc-section) var(--sc-gutter) 0; display: grid; gap: clamp(1.5rem, 4vw, 2.5rem); background: #fff; }
.blog-inicio__cabeza { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1rem 2rem; }
.blog-inicio__cabeza > div { display: grid; gap: 0.7rem; }

/* "Desarrollamos" on a tall phone: keep the lit terrace and the skyline, not the plain wall */
@media (max-width: 860px) { .capitulo__foto[src*="cap-ubicacion"] { object-position: 78% 50%; } }

.somundy__nota { margin-top: 0.7rem; font-size: 0.8rem; color: var(--hueso-soft); }

/* ===================================================== desarrollos en venta (2026-10-21)
   One development at a time, all of it visible: gallery (big photo, arrows, thumbnails,
   swipe) on the left, its sheet on the right. Replaces the pinned ficha. */
.antesala { min-height: 0; padding-block: clamp(4rem, 9vh, 7rem) clamp(1.5rem, 3vh, 2.5rem); }
.antesala__linea { font-size: clamp(2.6rem, 1.6rem + 4vw, 5.5rem); }
.ventas { background: var(--sc-canvas); color: var(--sc-ink); padding: 0 var(--sc-gutter) var(--sc-section); }
.ventas__tabs { max-width: 96rem; margin: 0 auto clamp(1.5rem, 3vw, 2.5rem); display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ventas__tabs button { padding: 0.8rem 1.15rem; font-size: 0.8125rem; min-height: 44px; }
.ventas__grid { max-width: 96rem; margin-inline: auto; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(1.5rem, 4vw, 4.5rem); align-items: start; }
.ventas__galeria { margin: 0; display: grid; gap: 0.75rem; }
.ventas__foto { position: relative; aspect-ratio: 1 / 1; border-radius: var(--r); overflow: hidden; background: color-mix(in oklab, var(--carbon) 6%, var(--sc-canvas)); touch-action: pan-y; }
.ventas__foto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity 0.25s ease; }
.ventas__foto img.es-edificio { object-fit: contain; }
.ventas__foto img.cargando { opacity: 0.35; }
.ventas__flecha { position: absolute; top: 50%; width: 3rem; height: 3rem; margin-top: -1.5rem; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, 0.92); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18); display: grid; place-items: center; }
.ventas__flecha::before { content: ""; width: 0.7rem; height: 0.7rem; border: solid var(--carbon); border-width: 0 2px 2px 0; }
.ventas__flecha--ant { left: 0.9rem; } .ventas__flecha--ant::before { transform: translateX(2px) rotate(135deg); }
.ventas__flecha--sig { right: 0.9rem; } .ventas__flecha--sig::before { transform: translateX(-2px) rotate(-45deg); }
.ventas__flecha:focus-visible { outline: 2px solid var(--carbon); outline-offset: 2px; }
.ventas__contador { position: absolute; right: 0.9rem; bottom: 0.9rem; margin: 0; padding: 0.3rem 0.65rem; border-radius: 999px;
  background: rgba(38, 44, 42, 0.78); color: #fff; font: 600 0.8125rem/1 var(--sc-font-text); letter-spacing: 0.04em; }
.ventas__pie { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.875rem; color: var(--sc-ink-soft); }
.ventas__pie [data-galeria-pie] { color: var(--sc-ink); font-weight: 600; }
.ventas__miniaturas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; }
.ventas__miniaturas button { padding: 0; border: 2px solid transparent; border-radius: calc(var(--r) * 0.6); overflow: hidden; cursor: pointer; aspect-ratio: 1 / 1; background: none; opacity: 0.6; transition: opacity 0.2s, border-color 0.2s; }
.ventas__miniaturas button[aria-current="true"] { border-color: var(--carbon); opacity: 1; }
@media (hover: hover) and (pointer: fine) { .ventas__miniaturas button:hover { opacity: 1; } }
.ventas__miniaturas img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ventas__hoja { display: grid; gap: 1.4rem; }
.ventas__encabezado { display: grid; gap: 0.5rem; }
.ventas__nombre { font-size: clamp(2.2rem, 1.4rem + 2.6vw, 4rem); line-height: 1; letter-spacing: -0.02em; font-weight: 700; }
.ventas__lugar { color: var(--sc-ink-soft); }
.ventas__datos { margin: 0; display: grid; }
.ventas__datos > div { display: grid; grid-template-columns: 9rem 1fr; gap: 1rem; padding-block: 0.7rem; border-top: 1px solid var(--sc-hairline-strong); }
.ventas__datos > div:last-child { border-bottom: 1px solid var(--sc-hairline-strong); }
.ventas__datos dt { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sc-ink-soft); padding-top: 0.2rem; }
.ventas__datos dd { margin: 0; font: 600 1.125rem/1.35 var(--sc-font-display); }
.ventas .quedan { opacity: 1; transform: none; gap: 0.45rem; }
.ventas .quedan__linea { font-size: 1rem; }
.ventas .quedan__linea b { font-size: 1.6rem; }
.ventas .quedan__unidades { height: 9px; max-width: none; }
.ventas .precio { gap: 0.6rem; opacity: 1 !important; }
.ventas .precio__cifra { font-size: clamp(2.2rem, 1.6rem + 2vw, 3.6rem); }
.ventas .entra { opacity: 1; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: none; gap: 0.6rem; margin-top: 0.3rem; }
.ventas .entra li { font-size: 0.8125rem; }
.ventas .precio__acciones { opacity: 1; margin-top: 0.8rem; gap: 1rem 1.5rem; }
@media (max-width: 860px) {
  .ventas__tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--sc-gutter)); padding-inline: var(--sc-gutter); }
  .ventas__tabs::-webkit-scrollbar { display: none; }
  .ventas__tabs button { flex: 0 0 auto; padding: 0.7rem 0.95rem; font-size: 0.75rem; }
  .ventas__grid { grid-template-columns: 1fr; gap: 1.6rem; }
  .ventas__flecha { width: 2.6rem; height: 2.6rem; margin-top: -1.3rem; }
  .ventas__datos > div { grid-template-columns: 7rem 1fr; }
  .ventas__datos dd { font-size: 1rem; }
  .ventas .entra { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ventas__nombre { font-size: 2.3rem; }
}
.ventas .precio, .ventas .quedan { grid-area: auto !important; }
[data-campo-sitios] { display: contents; }