/* El relato de la promoción, cada zona con su propia composición: manifiesto, cartel «Frente al mar»,
   tipologías en arcos, los espacios al estilo de Alfa y «del solar a tu casa» con su comparador. */

/* ---------- Manifiesto: una frase grande con mucho aire alrededor ---------- */
.manifiesto { padding-block: var(--e-seccion-xl) var(--e-seccion); }
.manifiesto__frase {
  max-width: 15em;
  margin-inline: 0;
  font-family: var(--f-estetica);
  font-size: clamp(2.5rem, 1rem + 6vw, 8.2rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.005em;
  text-align: left;
  text-wrap: balance;
}

/* ---------- Cartel: palabras enormes repartidas sobre la foto ---------- */
.cartel { padding-inline: var(--margen); }
.cartel__marco {
  position: relative;
  isolation: isolate;
  container-type: inline-size;
  height: min(100svh - 2 * var(--flotar), 66vw);
  min-height: 540px;
  overflow: hidden;
  border-radius: var(--r-xl);
  background: var(--c-mar);
  color: var(--c-blanco);
}
.cartel__foto { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 40% 60%; }
.cartel__marco::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(10, 12, 14, 0.34) 0%, rgba(10, 12, 14, 0) 34%, rgba(10, 12, 14, 0) 62%, rgba(10, 12, 14, 0.38) 100%);
}
.cartel__palabra {
  position: absolute;
  font-family: var(--f-titulo);
  font-size: 17.5cqw;
  line-height: 0.8;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  white-space: nowrap;
}
.cartel__palabra--1 { top: 3.5cqw; left: 2.6cqw; }
.cartel__palabra--2 { top: 50%; right: 3.4cqw; }
.cartel__palabra--3 { bottom: 2.6cqw; left: 2.6cqw; }
.cartel__texto { position: absolute; max-width: 27ch; font-size: clamp(0.8rem, 0.7rem + 0.32vw, 1rem); line-height: 1.45; text-shadow: 0 1px 14px rgba(0, 0, 0, 0.35); }
.cartel__texto--1 { top: calc(3.5cqw + 14cqw + 3cqw); right: 4cqw; }
.cartel__texto--2 { top: calc(50% + 2cqw); left: 3.2cqw; }

@media (max-width: 760px) {
  /* Vertical: cada texto en su hueco, sin pisar «al» ni «mar» */
  .cartel__marco { height: auto; min-height: 0; aspect-ratio: 3 / 4.6; }
  .cartel__foto { object-position: 24% 50%; }
  .cartel__palabra--1 { font-size: 19cqw; top: 4cqw; left: 3cqw; }
  .cartel__palabra--2 { font-size: 28cqw; top: 52%; right: 4cqw; }
  .cartel__palabra--3 { font-size: 30cqw; bottom: 3cqw; left: 3cqw; }
  .cartel__texto { max-width: 20ch; font-size: clamp(0.74rem, 0.62rem + 0.5vw, 0.86rem); }
  .cartel__texto--1 { top: 25cqw; right: 4cqw; }
  .cartel__texto--2 { top: 41%; left: 4cqw; max-width: 16ch; }
}

/* ---------- Tipologías: arcos que se abren al pasar por encima ---------- */
.tipologias__cabeza { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: 1.5rem 4rem; margin-bottom: clamp(3rem, 2rem + 3vw, 5.5rem); }
.tipologias__cabeza .entradilla { justify-self: end; margin-top: 0; }
.arcos { display: flex; gap: clamp(0.6rem, 0.3rem + 0.8vw, 1.2rem); height: clamp(540px, 76svh, 780px); }
.arco {
  position: relative;
  isolation: isolate;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  border-radius: 999px 999px var(--r-l) var(--r-l);
  background: var(--c-arena);
  color: var(--c-blanco);
  cursor: pointer;
  transition: flex-grow 0.9s var(--curva);
}
.arco.es-activa { flex-grow: 2.5; cursor: default; }
.arco__foto { position: absolute; inset: 0; z-index: -2; margin: 0; }
.arco__foto img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 1.4s var(--curva); }
.arco.es-activa .arco__foto img { transform: none; }
.arco::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(10, 12, 14, 0.72) 0%, rgba(10, 12, 14, 0.2) 45%, rgba(10, 12, 14, 0.05) 70%); transition: opacity 0.9s var(--curva); }
.arco__num { position: absolute; top: 2.2rem; left: 50%; font-family: var(--f-estetica); font-size: clamp(1.6rem, 1.2rem + 1vw, 2.4rem); line-height: 1; transform: translateX(-50%); }
.arco__cuerpo { position: absolute; left: clamp(1.1rem, 0.6rem + 1vw, 1.8rem); right: clamp(1.1rem, 0.6rem + 1vw, 1.8rem); bottom: clamp(1.1rem, 0.6rem + 1vw, 1.8rem); display: grid; justify-items: start; }
.arco__nombre { font-size: clamp(1.15rem, 0.8rem + 0.9vw, 1.9rem); line-height: 1.08; }
.arco__detalle { display: grid; justify-items: start; width: 100%; max-width: 30rem; opacity: 0; transform: translateY(14px); transition: opacity 0.5s var(--curva), transform 0.8s var(--curva); }
.arco.es-activa .arco__detalle { opacity: 1; transform: none; transition-delay: 0.25s; }
.arco__meta { margin-top: 0.8rem; font-size: var(--t-s); line-height: 1.5; color: rgba(255, 255, 255, 0.84); }
.arco__fila { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; width: 100%; margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, 0.3); }
.arco__precio { font-family: var(--f-estetica); font-size: clamp(1.6rem, 1.2rem + 0.8vw, 2.2rem); line-height: 1; }
.arco__libres { font-size: var(--t-etiqueta); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.8); white-space: nowrap; }
.arco .enlace-boton { margin-top: 1.1rem; }
/* Sin espacio para los datos, el arco cerrado solo enseña el número y el nombre */
.arco:not(.es-activa) .arco__detalle { position: absolute; left: 0; right: 0; bottom: 0; pointer-events: none; }
.arco:not(.es-activa) .arco__detalle:focus-within { pointer-events: auto; }

@media (max-width: 1000px) {
  .tipologias__cabeza { grid-template-columns: 1fr; }
  .tipologias__cabeza .entradilla { justify-self: start; }
  /* Tableta y móvil: los arcos se deslizan en fila y enseñan todo */
  .arcos {
    height: auto;
    margin-inline: calc(-1 * var(--margen));
    padding: 0 var(--margen) 0.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--margen);
    scrollbar-width: none;
  }
  .arcos::-webkit-scrollbar { display: none; }
  .arco { flex: 0 0 min(80vw, 360px); aspect-ratio: 4 / 5.8; scroll-snap-align: start; cursor: default; }
  .arco.es-activa { flex-grow: 0; }
  .arco__foto img { transform: none; }
  .arco__detalle,
  .arco:not(.es-activa) .arco__detalle { position: static; opacity: 1; transform: none; pointer-events: auto; }
}

/* ---------- Los espacios: foto grande, la lista sobre la misma foto desenfocada y un clip ---------- */
.espacios {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  height: calc(100svh - 2 * var(--flotar));
  min-height: 640px;
  max-height: 1040px;
  margin: var(--e-seccion) var(--margen);
  overflow: hidden;
  border-radius: var(--r-xl);
  background: var(--c-mar);
  color: var(--c-blanco);
}
.espacios__foto { position: relative; overflow: hidden; }
.espacios__capas { position: absolute; inset: 0; }
.espacios__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.9s var(--curva), transform 1.6s var(--curva); }
/* Foto nueva (la pone espacios.js): entra con un fundido y se asienta */
.espacios__img.es-entrando { opacity: 0; transform: scale(1.06); }
.espacios__clip { position: absolute; right: clamp(1rem, 2vw, 2.2rem); bottom: clamp(1rem, 2vw, 2.2rem); z-index: 2; width: clamp(120px, 11vw, 186px); margin: 0; }
.espacios__clip-marco { aspect-ratio: 9 / 16; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.75); border-radius: 999px 999px var(--r-m) var(--r-m); background: #2A2520; box-shadow: 0 22px 50px rgba(0, 0, 0, 0.35); }
.espacios__clip video { width: 100%; height: 100%; object-fit: cover; }
.espacios__clip figcaption { margin-top: 0.7rem; font-size: 0.64rem; font-weight: 500; letter-spacing: 0.14em; text-align: center; text-transform: uppercase; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5); }

.espacios__lado { position: relative; isolation: isolate; display: grid; place-items: center; overflow: hidden; padding: clamp(2.5rem, 5vh, 4rem) clamp(1.5rem, 3vw, 3rem); text-align: center; }
.espacios__fondo { position: absolute; inset: -12%; z-index: -1; }
.espacios__fondo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(44px) saturate(1.15) brightness(0.8); transition: opacity 0.9s var(--curva); }
.espacios__fondo img.es-entrando { opacity: 0; }
.espacios__fondo::after { content: ""; position: absolute; inset: 0; background: rgba(30, 24, 18, 0.26); }
.espacios__in { display: grid; justify-items: center; width: min(100%, 26rem); }
.espacios__marca { font-family: var(--f-titulo); font-size: clamp(2rem, 1.6rem + 1vw, 2.8rem); line-height: 1; letter-spacing: -0.02em; }
.espacios__marca span { display: block; margin-top: 0.5rem; font-family: var(--f-texto); font-size: var(--t-etiqueta); font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; }
.espacios__titulo { margin-top: clamp(2rem, 5vh, 3.4rem); font-size: clamp(1.35rem, 1rem + 1vw, 2.1rem); line-height: 1.12; text-wrap: balance; }
.espacios__titulo em { font-family: var(--f-estetica); font-size: 1.24em; font-style: normal; font-weight: 500; letter-spacing: 0; }
.espacios__lista { display: grid; justify-items: center; gap: 0.1rem; margin: clamp(1.4rem, 3vh, 2.2rem) 0; padding: clamp(1rem, 2.4vh, 1.6rem) 0; list-style: none; position: relative; }
.espacios__lista::before,
.espacios__lista::after { content: ""; position: absolute; left: 50%; width: 92px; height: 1px; background: rgba(255, 255, 255, 0.55); transform: translateX(-50%); }
.espacios__lista::before { top: 0; }
.espacios__lista::after { bottom: 0; }
.espacios__lista li { display: grid; place-items: center; min-height: 50px; }
.espacios__boton {
  min-height: 42px;
  padding: 0.5rem 1.4rem;
  border: 1px solid transparent;
  border-radius: var(--r-pildora);
  background: none;
  color: var(--c-blanco);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.78;
  cursor: pointer;
  transition: opacity 0.4s var(--curva), border-color 0.5s var(--curva), padding 0.5s var(--curva), font-size 0.5s var(--curva), background 0.4s var(--curva);
}
.espacios__boton:hover { opacity: 1; }
.espacios__boton[aria-pressed="true"] { padding: 0.6rem 1.9rem; border-color: rgba(255, 255, 255, 0.9); font-size: 0.92rem; opacity: 1; }
.espacios__acciones { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.6rem 1.2rem; }
.espacios__pausa { display: inline-flex; align-items: center; gap: 0.55rem; min-height: 44px; padding: 0; border: 0; border-radius: var(--r-pildora); background: none; color: var(--c-blanco); font-size: var(--t-etiqueta); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; opacity: 0.85; }
.espacios__pausa-icono { position: relative; width: 9px; height: 10px; }
.espacios__pausa-icono::before,
.espacios__pausa-icono::after { content: ""; position: absolute; top: 0; width: 2px; height: 10px; background: currentColor; }
.espacios__pausa-icono::before { left: 1px; }
.espacios__pausa-icono::after { right: 1px; }
.espacios__pausa[data-parado="si"] .espacios__pausa-icono::before { width: 0; height: 0; background: none; border-left: 8px solid currentColor; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.espacios__pausa[data-parado="si"] .espacios__pausa-icono::after { display: none; }

@media (max-width: 900px) {
  /* Móvil: título y espacios arriba, la foto con su clip debajo y todo sobre la foto desenfocada */
  .espacios { display: flex; flex-direction: column; height: auto; min-height: 0; max-height: none; padding: 3.4rem 0 1.4rem; text-align: center; }
  .espacios__lado,
  .espacios__in { display: contents; }
  .espacios__fondo { inset: -8%; }
  .espacios__marca { order: 1; align-self: center; }
  .espacios__titulo { order: 2; padding-inline: var(--margen); }
  .espacios__lista {
    order: 3;
    display: flex;
    justify-content: flex-start;
    gap: 0.2rem;
    max-width: 100%;
    margin: 1.8rem 0 1.2rem;
    padding: 0.4rem var(--margen);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .espacios__lista::-webkit-scrollbar { display: none; }
  .espacios__lista::before,
  .espacios__lista::after { display: none; }
  .espacios__lista li { flex: none; min-height: 48px; }
  .espacios__boton[aria-pressed="true"] { font-size: var(--t-xs); padding: 0.5rem 1.4rem; }
  .espacios__foto { order: 4; aspect-ratio: 4 / 4.7; margin-inline: var(--margen); border-radius: var(--r-l); }
  .espacios__clip { width: clamp(96px, 26vw, 140px); }
  .espacios__clip figcaption { display: none; }
  .espacios__acciones { order: 5; margin-top: 1.4rem; padding-inline: var(--margen); }
}
@media (min-width: 561px) and (max-width: 900px) {
  .espacios__foto { aspect-ratio: 4 / 3.3; }
}

/* ---------- Del solar a tu casa ---------- */
/* Las dos partes del título entran desde los lados: sin barra de scroll horizontal mientras llegan */
.solar { overflow-x: clip; }
.solar__titulo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1rem, 3vw, 3rem);
  font-size: clamp(2.3rem, 0.9rem + 6.2vw, 7.6rem);
  line-height: 0.92;
  letter-spacing: -0.035em;
}
.solar__parte { white-space: nowrap; }
.solar__clip { flex: none; width: clamp(96px, 12.5vw, 210px); aspect-ratio: 9 / 16; overflow: hidden; border-radius: 999px 999px var(--r-m) var(--r-m); background: var(--c-arena); }
.solar__clip video { width: 100%; height: 100%; object-fit: cover; }
.solar__entradilla { margin: clamp(2rem, 1.4rem + 1.6vw, 3rem) 0 clamp(1.4rem, 1rem + 1vw, 2.2rem); text-align: left; }
@media (max-width: 760px) {
  .solar__titulo { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "uno clip" "dos clip"; gap: 1rem 0.8rem; font-size: clamp(2.1rem, 1rem + 6.4vw, 3.4rem); }
  .solar__parte--1 { grid-area: uno; align-self: end; }
  .solar__parte--2 { grid-area: dos; align-self: start; justify-self: end; }
  .solar__clip { grid-area: clip; width: clamp(90px, 27vw, 130px); }
  .solar__entradilla { text-align: left; margin-inline: 0; }
}

.comparador {
  --pos: 50%;
  position: relative;
  /* Formato película: más bajo que la foto y a lo ancho */
  aspect-ratio: 21 / 9;
  overflow: hidden;
  border-radius: var(--r-xl);
  background: var(--c-arena);
  -webkit-user-select: none;
  user-select: none;
}
.comparador img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.comparador__despues { clip-path: inset(0 0 0 var(--pos)); }
.comparador__rango { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; }
.comparador__linea { position: absolute; top: 0; bottom: 0; left: var(--pos); z-index: 2; width: 1px; background: var(--c-blanco); pointer-events: none; }
.comparador__mando {
  position: absolute;
  top: 50%;
  left: var(--pos);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  background: rgba(8, 12, 14, 0.35);
  color: var(--c-blanco);
  transform: translate(-50%, -50%);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  pointer-events: none;
}
.comparador__mando svg { width: 22px; height: 22px; }
.comparador:has(.comparador__rango:focus-visible) .comparador__mando { outline: 2px solid var(--c-blanco); outline-offset: 4px; }
.comparador__etiqueta {
  position: absolute;
  top: 1.2rem;
  z-index: 2;
  padding: 0.55rem 1rem;
  border-radius: var(--r-pildora);
  background: rgba(8, 12, 14, 0.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--c-blanco);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  pointer-events: none;
}
.comparador__etiqueta--antes { left: 1.2rem; }
.comparador__etiqueta--despues { right: 1.2rem; }
@media (max-width: 700px) { .comparador { aspect-ratio: 4 / 3; border-radius: var(--r-l); } }