/* Secciones con datos y cierre: disponibilidad, huecos pendientes, vista y día/noche, calidades, zonas comunes,
   cifras, ubicación, avance de obra, contacto y pie. Cada una con su composición y su fondo. */

/* ---------- Disponibilidad: estilo Sirotov, editorial y sin color ---------- */
/* Textos pequeños en las esquinas, el título a todo el ancho, debajo dos columnas y los filtros como texto */
.disponibilidad { padding-block: var(--e-seccion-xl); }
.disponibilidad__esquinas { display: flex; justify-content: space-between; gap: 1rem; margin: 0 0 clamp(2rem, 1.4rem + 2vw, 3.4rem); font-size: var(--t-etiqueta); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-tinta-2); }
/* «Disponibilidad» mide unas 7,7 veces su tamaño de letra: así llega casi de lado a lado sin salirse */
.disponibilidad__titulo { font-size: min(13rem, calc((100vw - 2 * var(--margen)) / 8.1)); line-height: 0.9; white-space: nowrap; }
.disponibilidad__cabeza { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); align-items: end; gap: 2rem 4rem; margin: clamp(2.4rem, 1.6rem + 2.4vw, 4rem) 0 clamp(3rem, 2rem + 3vw, 5rem); }
.marcador { display: flex; flex-wrap: wrap; gap: 1.6rem clamp(1.6rem, 1rem + 2.4vw, 3.6rem); margin: 0; padding: 0; list-style: none; }
.marcador li { display: grid; gap: 0.6rem; }
.marcador__num { font-family: var(--f-estetica); font-size: clamp(3.4rem, 2rem + 4.2vw, 6.6rem); font-weight: 500; line-height: 0.86; }
.marcador__txt { font-size: var(--t-etiqueta); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; color: var(--c-tinta-2); }
@media (max-width: 760px) {
  .disponibilidad__cabeza { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  /* Móvil: los tres estados en una sola fila */
  .marcador { flex-wrap: nowrap; gap: 1.2rem; }
  .marcador__txt { font-size: 0.62rem; letter-spacing: 0.06em; }
}

.filtros { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6rem 2rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--c-tinta); }
.filtros__chips { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6rem 1.8rem; }
.filtro { padding: 0.3rem 0; border: 0; background: none; font-size: var(--t-s); color: var(--c-tinta-3); text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 0.4em; cursor: pointer; transition: color var(--d-rapida), text-decoration-color var(--d-rapida); }
.filtro:hover { color: var(--c-tinta); }
.filtro[aria-pressed="true"] { color: var(--c-tinta); text-decoration-color: currentColor; }
.filtro:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
.filtros__separador { align-self: center; width: 1px; height: 1.1em; background: var(--c-linea-fuerte); }
.filtros__cuenta { margin-left: auto; font-size: var(--t-etiqueta); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-tinta-2); }
.tabla-marco { margin-top: 0.6rem; overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; font-size: var(--t-s); }
.tabla th {
  padding: 0.9rem 0.8rem;
  border-bottom: 1px solid var(--c-linea-fuerte);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-align: left;
  text-transform: uppercase;
  color: var(--c-tinta-3);
  white-space: nowrap;
}
.tabla td { padding: 1.5rem 0.8rem; border-bottom: 1px solid var(--c-linea); vertical-align: middle; }
.tabla th:first-child, .tabla td:first-child { padding-left: 0; }
.tabla th:last-child, .tabla td:last-child { padding-right: 0; text-align: right; }
/* Al pasar por una fila no cambia el fondo: se subraya la vivienda (y flota su foto) */
.tabla tbody tr:hover .tabla__vivienda { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em; }
/* Planta, dormitorios, superficies, precio y ficha no se parten en dos líneas */
.tabla td:nth-child(-n+5),
.tabla td:nth-child(n+7) { white-space: nowrap; }
@media (min-width: 861px) and (max-width: 1180px) {
  /* Tableta apaisada: sin la orientación, que está en la ficha, cabe todo en una línea */
  .tabla th:nth-child(6),
  .tabla td:nth-child(6) { display: none; }
}
.tabla__vivienda { font-family: var(--f-titulo); font-size: 1.7rem; line-height: 1; white-space: nowrap; }
.tabla__precio { font-family: var(--f-estetica); font-size: 1.7rem; line-height: 1; white-space: nowrap; }
/* Las vendidas, enteras en gris claro */
.tabla tr.es-vendida td { color: var(--c-tinta-3); }
.tabla td.tabla__vacia { padding: 2rem 0; white-space: normal; color: var(--c-tinta-2); }
/* Foto que flota junto al cursor al pasar por una fila (la crea movimiento.js) */
.vista-previa { position: fixed; left: 0; top: 0; z-index: 40; width: clamp(170px, 14vw, 230px); aspect-ratio: 4 / 5; overflow: hidden; border-radius: 999px 999px var(--r-m) var(--r-m); box-shadow: 0 24px 60px rgba(20, 17, 15, 0.25); pointer-events: none; opacity: 0; }
.vista-previa img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) {
  /* Móvil: los filtros en una sola fila que se desliza hasta el borde de la pantalla */
  .filtros__chips { flex: 1 1 100%; flex-wrap: nowrap; margin-right: calc(-1 * var(--margen)); padding: 2px var(--margen) 2px 0; overflow-x: auto; scrollbar-width: none; }
  .filtros__chips::-webkit-scrollbar { display: none; }
  .filtros__chips > * { flex: none; }
  .filtros__cuenta { margin-left: 0; width: 100%; }
  .tabla thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabla, .tabla tbody, .tabla tr, .tabla td { display: block; }
  .tabla tr { padding: 1rem 0; border-bottom: 1px solid var(--c-linea); }
  .tabla td { display: flex; justify-content: space-between; gap: 1rem; padding: 0.3rem 0; border: 0; text-align: right; }
  .tabla td::before { content: attr(data-etiqueta); font-size: 0.64rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-tinta-3); text-align: left; }
  .tabla td:first-child::before, .tabla td:last-child::before { content: none; }
  .tabla td:last-child { justify-content: flex-start; padding-top: 0.8rem; }
}

/* ---------- Huecos pendientes de material: el apartado existe, la imagen aún no ---------- */
.pendiente {
  position: relative;
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 0.9rem;
  min-height: 320px;
  padding: clamp(1.6rem, 1rem + 2vw, 2.8rem);
  border: 1px dashed var(--c-linea-fuerte);
  border-radius: var(--r-l);
  background: repeating-linear-gradient(135deg, transparent 0 16px, rgba(20, 17, 15, 0.03) 16px 17px), rgba(255, 255, 255, 0.55);
  color: var(--c-tinta);
}
.pendiente--oscuro { border-color: rgba(255, 255, 255, 0.35); background: repeating-linear-gradient(135deg, transparent 0 16px, rgba(255, 255, 255, 0.04) 16px 17px), rgba(8, 14, 18, 0.72); color: var(--c-blanco); }
.pendiente__marca { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.45rem 0.85rem; border: 1px solid currentColor; border-radius: var(--r-pildora); font-size: 0.62rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; }
.pendiente__titulo { font-family: var(--f-titulo); font-size: clamp(1.3rem, 1rem + 1vw, 2rem); line-height: 1.1; }
.pendiente__texto { max-width: 52ch; font-size: var(--t-s); color: inherit; opacity: 0.75; }
.pendientes-doble { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
@media (max-width: 760px) { .pendientes-doble { grid-template-columns: 1fr; } }
/* Los tres vídeos de Visítala sin venir en fila (Dani, 30/10/2026): cada tarjeta con el vídeo arriba, recortado a 4:5 como
   en el móvil para que no se vaya de alto, y el texto debajo. Por debajo de 1024px no caben tres sin apretar el texto:
   uno por fila, con el vídeo al lado como antes, y en el móvil el vídeo arriba */
.recorridos { display: grid; gap: 1.2rem; }
@media (min-width: 1024px) {
  .recorridos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .recorridos .recorrido { grid-template-columns: minmax(0, 1fr); align-items: start; align-content: start; }
  .recorridos .recorrido__marco { width: 100%; aspect-ratio: 4 / 5; }
}

/* ---------- Visítala sin venir: el recorrido en vídeo y el vídeo con agente, en vertical como en un móvil. Corren solos en silencio
   (video[data-auto]) y al pulsar se abre la película en el visor ([data-pelicula]) ---------- */
.recorrido { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(1.2rem, 0.6rem + 2vw, 2.4rem); padding: clamp(1rem, 0.6rem + 1vw, 1.6rem); border: 1px solid var(--c-linea-fuerte); border-radius: var(--r-l); background: rgba(255, 255, 255, 0.55); color: var(--c-tinta); font: inherit; text-align: left; cursor: pointer; transition: border-color 0.4s var(--curva); }
.recorrido__marco { display: block; width: clamp(150px, 16vw, 260px); aspect-ratio: 9 / 16; overflow: hidden; border-radius: var(--r-m); background: var(--c-tinta); }
.recorrido__marco video { display: block; width: 100%; height: 100%; object-fit: cover; }
.recorrido__texto { display: grid; justify-items: start; gap: 0.9rem; }
.recorrido__titulo { font-family: var(--f-titulo); font-size: clamp(1.3rem, 1rem + 1vw, 2rem); line-height: 1.1; }
.recorrido__desc { max-width: 34ch; font-size: var(--t-s); color: var(--c-tinta-2); }
.recorrido__ver { display: inline-flex; align-items: center; gap: 0.8rem; margin-top: 0.4rem; font-size: var(--t-etiqueta); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; }
/* El botón de reproducir es el de la portada, pero en tinta sobre claro */
.recorrido .portada__play { border-color: var(--c-tinta); }
.recorrido:hover { border-color: var(--c-tinta); }
.recorrido:hover .portada__play { background: var(--c-tinta); }
.recorrido:hover .portada__play::before { border-left-color: var(--c-blanco); }
.recorrido:focus-visible { outline: 2px solid var(--c-tinta); outline-offset: 4px; }
@media (max-width: 760px) {
  .recorrido { grid-template-columns: minmax(0, 1fr); }
  .recorrido__marco { width: 100%; aspect-ratio: 4 / 5; }
}
html.sin-pendientes [data-pendiente] { display: none !important; }

/* ---------- La vista desde tu planta, estilo Sirotov: esquinas pequeñas y la planta y su altura en grande.
   Debajo, la foto entera (sin recortar, para que se note la diferencia entre alturas) y a su lado las plantas,
   de ático a planta 1. Todo cabe en una pantalla: la sección mide lo que queda bajo la cabecera ---------- */
.vista {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: calc(100svh - var(--alto-cabecera) - var(--flotar));
  min-height: 360px;
  margin-block: var(--e-seccion);
  padding-top: clamp(0.4rem, 1.6svh, 1.2rem);
}
.vista__esquinas { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: clamp(0.8rem, 2.6svh, 2.4rem); font-size: var(--t-etiqueta); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-tinta-2); }
.vista__titulo { font: inherit; letter-spacing: inherit; color: var(--c-tinta); }
.vista__cabeza { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.4rem 2rem; margin-bottom: clamp(0.8rem, 2.6svh, 2.4rem); }
/* El tamaño depende también del alto de la ventana, para que en pantallas bajas quede sitio para la foto */
.vista__nombre,
.vista__altura { font-size: clamp(2.2rem, min(0.8rem + 6vw, 11svh), 7.6rem); line-height: 0.92; }
.vista__nombre { font-family: var(--f-titulo); }
.vista__altura { font-family: var(--f-estetica); }
/* A todo el ancho (sin el máximo del resto de la página): en pantallas grandes la foto crece en vez de dejar hueco */
.vista > .contenedor { width: calc(100% - 2 * var(--margen)); }
.vista__medio { display: grid; grid-template-columns: minmax(0, 1fr) clamp(220px, 22vw, 340px); gap: clamp(1.4rem, 0.6rem + 2.4vw, 3.6rem); min-height: 0; padding-bottom: clamp(0.4rem, 1.6svh, 1.2rem); }
/* La foto, tan grande como quepa en su hueco y siempre con la proporción de la imagen: nunca se recorta */
.vista__hueco { container-type: size; display: flex; align-items: flex-end; min-height: 0; }
.vista__foto { position: relative; width: min(100cqw, 100cqh * 2752 / 1536); aspect-ratio: 2752 / 1536; margin: 0; overflow: hidden; background: var(--c-arena); }
.vista__img { width: 100%; height: 100%; object-fit: cover; }
.vista__foto.es-cambio .vista__img { animation: vista-cambio 1.1s var(--curva); }
@keyframes vista-cambio { from { transform: scale(1.05); opacity: 0.55; } }
/* Las plantas en vertical, del ático (arriba) a la planta 1; la elegida en tinta y subrayada, como en «Elige tu planta» */
.vista__plantas { display: flex; flex-direction: column-reverse; align-self: end; }
.vista__planta { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: clamp(0.55rem, 1.6svh, 1rem) 0; border: 0; border-top: 1px solid var(--c-linea); background: none; color: var(--c-tinta-3); text-align: left; cursor: pointer; transition: color var(--d-rapida); }
.vista__planta:hover,
.vista__planta[aria-pressed="true"] { color: var(--c-tinta); }
.vista__planta:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
.vista__planta span:first-child { font-family: var(--f-titulo); font-size: clamp(1.1rem, min(0.8rem + 0.9vw, 3.4svh), 1.7rem); line-height: 1.05; text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 0.3em; transition: text-decoration-color var(--d-rapida); }
.vista__planta[aria-pressed="true"] span:first-child { text-decoration-color: currentColor; }
.vista__planta span:last-child { font-size: var(--t-etiqueta); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; }
@media (max-width: 900px) {
  /* Móvil y tableta de pie: la sección vuelve a su altura natural, la foto a todo el ancho y las plantas en fila debajo */
  .vista { display: block; height: auto; min-height: 0; margin-block: 0; padding-block: var(--e-seccion); }
  .vista__medio { display: block; padding-bottom: 0; }
  .vista__hueco { container-type: normal; display: block; }
  .vista__foto { width: 100%; }
  .vista__plantas { flex-direction: row; gap: 1.4rem; margin: clamp(1.2rem, 1rem + 1vw, 1.8rem) calc(-1 * var(--margen)) 0 0; padding-right: var(--margen); overflow-x: auto; scrollbar-width: none; }
  .vista__plantas::-webkit-scrollbar { display: none; }
  .vista__planta { flex: none; flex-direction: column; align-items: flex-start; gap: 0.4rem; min-width: 96px; padding: 0.9rem 0 0; }
}
@media (max-width: 760px) {
  /* Cada esquina en su línea, sin partirse por la mitad */
  .vista__esquinas { flex-wrap: wrap; gap: 0.5rem 1rem; }
  .vista__esquinas > * { white-space: nowrap; }
}

/* ---------- Día y noche: la foto de borde a borde con «Día» y «Noche» enormes, como el cartel,
   y la línea que se arrastra, como en el comparador del solar ---------- */
.dianoche__marco { --pos: 50%; position: relative; height: min(100svh, 64vw); min-height: 560px; overflow: hidden; background: var(--c-tinta); color: var(--c-blanco); }
.dianoche__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* La noche va encima y se recorta desde la línea */
.dianoche__foto--noche { clip-path: inset(0 0 0 var(--pos)); }
.dianoche__marco::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(8, 12, 14, 0.5) 0%, rgba(8, 12, 14, 0) 36%, rgba(8, 12, 14, 0) 58%, rgba(8, 12, 14, 0.4) 100%); }
.dianoche__palabra { position: absolute; bottom: clamp(0.8rem, 0.2rem + 2vw, 2.4rem); z-index: 2; font-family: var(--f-titulo); font-size: clamp(3.4rem, 0.4rem + 12.5vw, 16rem); line-height: 0.8; pointer-events: none; }
.dianoche__palabra--dia { left: var(--margen); }
.dianoche__palabra--noche { right: var(--margen); }
.dianoche__texto { position: absolute; top: clamp(1.6rem, 1rem + 2vw, 3rem); left: var(--margen); z-index: 2; max-width: 34ch; text-shadow: 0 1px 20px rgba(8, 12, 14, 0.45); pointer-events: none; }
.dianoche__titulo { font-family: var(--f-titulo); font-size: clamp(1.6rem, 1.1rem + 1.4vw, 2.6rem); line-height: 1; }
.dianoche__texto p { margin-top: 0.8rem; color: rgba(255, 255, 255, 0.86); line-height: 1.55; }
.dianoche__rango { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; }
.dianoche__linea { position: absolute; top: 0; bottom: 0; left: var(--pos); z-index: 2; width: 1px; background: var(--c-blanco); pointer-events: none; }
.dianoche__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%); pointer-events: none; }
.dianoche__mando svg { width: 22px; height: 22px; }
.dianoche__marco:has(.dianoche__rango:focus-visible) .dianoche__mando { outline: 2px solid var(--c-blanco); outline-offset: 4px; }
/* Con el scroll, la foto se queda fija arriba del todo mientras anochece (movimiento.js): el texto baja lo justo
   para que no lo tape la cabecera */
@media (orientation: landscape) and (min-width: 761px) {
  .con-mov .dianoche__texto { top: calc(var(--alto-cabecera) + clamp(0.6rem, 0.2rem + 1vw, 1.4rem)); }
}
@media (max-width: 760px) {
  .dianoche__marco { height: auto; min-height: 0; aspect-ratio: 4 / 5; }
  .dianoche__texto { right: var(--margen); }
  .dianoche__texto p { font-size: var(--t-s); }
}

/* ---------- Calidades: la foto de la calidad elegida de fondo y la lista en una tarjeta de cristal gris,
   como las notificaciones de Apple. Cada calidad se puede pulsar (calidades.js). ---------- */
.calidades__marco {
  position: relative;
  isolation: isolate;
  height: calc(100svh - 2 * var(--flotar));
  min-height: 640px;
  max-height: 1000px;
  /* Ancho explícito (y no solo margen): al anclarla, ScrollTrigger mide el ancho sin el margen */
  width: calc(100% - 2 * var(--margen));
  margin-inline: auto;
  overflow: hidden;
  border-radius: var(--r-xl);
  background: var(--c-arena-2);
}
.calidades__fotos { position: absolute; inset: 0; z-index: -1; }
.calidades__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.9s var(--curva); }
.calidades__foto.es-activa { opacity: 1; }
.calidades__cristal {
  position: absolute;
  top: clamp(1rem, 2.6vw, 2.2rem);
  bottom: clamp(1rem, 2.6vw, 2.2rem);
  left: clamp(1rem, 2.6vw, 2.2rem);
  display: flex;
  flex-direction: column;
  width: min(440px, 42%);
  padding: clamp(1.4rem, 1rem + 1.2vw, 2.2rem);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 28px;
  background: rgba(236, 236, 234, 0.58);
  color: var(--c-tinta);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.16);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  backdrop-filter: blur(30px) saturate(180%);
}
.calidades__cristal .titulo { font-size: clamp(1.9rem, 1.2rem + 1.8vw, 3rem); }
.calidades__cristal .entradilla { margin-top: 0.8rem; font-size: var(--t-m); }
.calidades__lista { margin: 1.4rem 0 0; padding: 0; list-style: none; border-top: 1px solid rgba(20, 17, 15, 0.14); }
.calidades__lista li { border-bottom: 1px solid rgba(20, 17, 15, 0.14); }
.calidades__boton { display: flex; align-items: baseline; gap: 1rem; width: 100%; min-height: 44px; padding: 0.7rem 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; }
.calidades__num { flex: none; width: 1.8rem; font-family: var(--f-estetica); font-size: 1.05rem; color: var(--c-tinta-3); transition: color 0.4s var(--curva); }
.calidades__nombre { font-family: var(--f-titulo); font-size: 1.02rem; }
.calidades__boton:hover .calidades__num,
.calidades__lista li.es-activa .calidades__num { color: var(--c-tinta); }
/* El texto solo se ve en la calidad elegida */
.calidades__texto { max-height: 0; padding-left: 2.8rem; overflow: hidden; visibility: hidden; opacity: 0; font-size: var(--t-s); line-height: 1.5; color: var(--c-tinta-2); transition: max-height 0.5s var(--curva), opacity 0.4s var(--curva), padding 0.5s var(--curva), visibility 0s 0.5s; }
.calidades__lista li.es-activa .calidades__texto { max-height: 7em; padding-bottom: 0.9rem; visibility: visible; opacity: 1; transition: max-height 0.5s var(--curva), opacity 0.4s var(--curva) 0.1s, padding 0.5s var(--curva), visibility 0s; }
@media (max-height: 760px) and (min-width: 901px) {
  .calidades__boton { min-height: 38px; padding: 0.45rem 0; }
  .calidades__cristal .entradilla { display: none; }
}
@media (max-width: 900px) {
  /* Móvil y tableta: la foto arriba y la tarjeta de cristal montada sobre su parte de abajo */
  .calidades__marco { width: auto; margin-inline: var(--margen); height: auto; min-height: 0; max-height: none; overflow: visible; border-radius: 0; background: none; }
  .calidades__fotos { position: relative; z-index: 0; aspect-ratio: 4 / 4.4; overflow: hidden; border-radius: var(--r-l); }
  .calidades__cristal { position: relative; z-index: 1; inset: auto; width: auto; margin: -28% 12px 0; }
}

/* ---------- Elige tus acabados, como la referencia de Awwwards: fondo oscuro, título grande a la izquierda
   con las tres líneas y dos fotos superpuestas a la derecha que cambian en franjas (acabados.js) ---------- */
.acabados { padding-block: var(--e-seccion-xl); background: var(--c-tinta); color: var(--c-blanco); }
.acabados__in { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: center; gap: clamp(2.4rem, 1rem + 4vw, 6rem); width: calc(100% - 2 * var(--margen)); margin-inline: auto; }
.acabados__titulo { font-family: var(--f-titulo); font-size: clamp(2.8rem, 1rem + 5vw, 6.6rem); line-height: 0.92; }
.acabados__entradilla { max-width: 32ch; margin-top: 1.4rem; color: rgba(255, 255, 255, 0.7); line-height: 1.55; }
.acabados__lineas { margin: clamp(2.2rem, 1.6rem + 2vw, 3.6rem) 0 0; padding: 0; list-style: none; border-top: 1px solid rgba(255, 255, 255, 0.18); }
.acabados__linea { display: flex; align-items: baseline; gap: 1.4rem; width: 100%; padding: 1.1rem 0; border: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.18); background: none; color: rgba(255, 255, 255, 0.38); text-align: left; cursor: pointer; transition: color var(--d-media) var(--curva); }
.acabados__linea:hover { color: rgba(255, 255, 255, 0.72); }
.acabados__linea[aria-pressed="true"] { color: var(--c-blanco); }
.acabados__linea:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
.acabados__num { font-size: var(--t-etiqueta); font-weight: 500; letter-spacing: 0.14em; }
.acabados__nombre { font-family: var(--f-titulo); font-size: clamp(1.8rem, 1.2rem + 1.8vw, 3rem); line-height: 1; }
/* La grande arriba a la derecha y la pequeña montada encima, abajo a la izquierda. Las dos en horizontal,
   con la proporción de las fotos (16:9), para que no se recorte nada */
.acabados__fotos { position: relative; aspect-ratio: 1 / 0.66; }
.acabados__foto { position: absolute; margin: 0; overflow: hidden; border-radius: var(--r-m); background: #22201D; }
.acabados__foto--grande { top: 0; right: 0; width: 86%; aspect-ratio: 16 / 9; }
.acabados__foto--pequena { bottom: 0; left: 0; z-index: 2; width: 48%; aspect-ratio: 16 / 9; box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45); }
.acabados__capa { position: absolute; inset: 0; }
.acabados__capa > img { width: 100%; height: 100%; object-fit: cover; }
/* La foto nueva entra en franjas verticales, de abajo arriba y una detrás de otra. --ancho lo pone acabados.js. */
.acabados__franja { position: absolute; top: 0; bottom: 0; left: calc(var(--ancho) / var(--n) * var(--i)); width: calc(var(--ancho) / var(--n) + 1px); overflow: hidden; clip-path: inset(100% 0 0 0); transition: clip-path 0.9s var(--curva) calc(var(--i) * 70ms); }
.acabados__franja img { position: absolute; top: 0; left: calc(var(--ancho) / var(--n) * var(--i) * -1); width: var(--ancho); max-width: none; height: 100%; object-fit: cover; }
.acabados__capa.es-visible .acabados__franja { clip-path: inset(0); }
@media (max-width: 900px) {
  .acabados__in { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Zonas comunes: el jardín de borde a borde ---------- */
.zonas { padding-top: var(--e-seccion); }
.panorama { position: relative; isolation: isolate; height: min(94svh, 64vw); min-height: 520px; overflow: hidden; color: var(--c-blanco); background: var(--c-mar); }
.panorama__img { position: absolute; left: 0; top: -6%; z-index: -2; width: 100%; height: 112%; object-fit: cover; }
.panorama::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(20deg, rgba(10, 12, 14, 0.66) 0%, rgba(10, 12, 14, 0.25) 40%, rgba(10, 12, 14, 0) 65%); }
.panorama__texto { position: absolute; left: var(--margen); right: var(--margen); bottom: clamp(2rem, 7vh, 5rem); display: grid; gap: 1.4rem; max-width: 40rem; }
.panorama__texto p { max-width: 40ch; font-size: var(--t-l); line-height: 1.5; color: rgba(255, 255, 255, 0.88); }
/* Con aire entre zonas (Dani, 20/10/2026: «lo veo muy pegado»): más entre filas que entre columnas, para que cada
   foto con su nombre y su texto se lea como un bloque */
.zonas__resto { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(3rem, 1.8rem + 4vw, 6rem) clamp(1.5rem, 0.8rem + 2.4vw, 3.5rem); padding-top: clamp(3rem, 1.6rem + 4vw, 6rem); }
.zona { display: grid; align-content: start; gap: 0.9rem; }
.zona .pendiente { min-height: 240px; }
.zona__foto { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-l); background: var(--c-arena-2); }
/* Si quedan impares, el último ocupa las dos columnas para que no quede un hueco */
.zonas__resto > .zona:last-child:nth-child(odd) { grid-column: 1 / -1; }
/* …y su foto, más apaisada: a todo el ancho y en 16:9 sería un bloque demasiado alto */
.zonas__resto > .zona:last-child:nth-child(odd) .zona__foto { aspect-ratio: 21 / 9; }
@media (max-width: 760px) { .zonas__resto > .zona:last-child:nth-child(odd) .zona__foto { aspect-ratio: 16 / 9; } }
.zona__nombre { font-size: 1.4rem; }
.zona__texto { font-size: var(--t-s); color: var(--c-tinta-2); }
@media (max-width: 760px) { .zonas__resto { grid-template-columns: 1fr; } }

/* ---------- Cifras: números grandes sobre blanco, con líneas finas ---------- */
.cifras { padding-block: var(--e-seccion) clamp(2rem, 4vw, 4rem); }
.cifras__lista { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-block: 0; padding: 0; list-style: none; border-top: 1px solid var(--c-linea-fuerte); }
.cifras__lista li { padding: 1.8rem 1.4rem 0; border-left: 1px solid var(--c-linea); }
.cifras__lista li:first-child { padding-left: 0; border-left: 0; }
.cifras__num { display: flex; align-items: baseline; gap: 0.08em; font-family: var(--f-estetica); font-size: clamp(3.4rem, 1.5rem + 5.4vw, 6.4rem); font-weight: 500; line-height: 0.9; font-variant-numeric: lining-nums; }
.cifras__num small { font-size: 0.4em; }
.cifras__txt { display: block; max-width: 20ch; margin-top: 1.1rem; font-size: var(--t-etiqueta); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-tinta-2); }
.cifras__barra { display: block; height: 1px; margin-top: 1rem; overflow: hidden; background: var(--c-linea); }
.cifras__barra i { display: block; height: 100%; background: var(--c-tinta); transform: scaleX(0); transform-origin: left; transition: transform 1.6s var(--curva); }
@media (max-width: 900px) {
  .cifras__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2.6rem; }
  .cifras__lista li:nth-child(odd) { padding-left: 0; border-left: 0; }
  .cifras__lista li:last-child { grid-column: span 2; }
}

/* ---------- Ubicación: el mapa a la izquierda y las distancias en grande ---------- */
.ubicacion__in { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(2.5rem, 1rem + 5vw, 6.5rem); align-items: center; }
.distancias { margin: 2.6rem 0 0; padding: 0; list-style: none; border-bottom: 1px solid var(--c-linea); }
.distancias li { display: grid; grid-template-columns: 6.4rem 1fr; align-items: baseline; gap: 1rem; padding: 1rem 0; border-top: 1px solid var(--c-linea); }
.distancias b { display: flex; align-items: baseline; gap: 0.3rem; font-family: var(--f-estetica); font-size: 2.4rem; font-weight: 500; line-height: 1; }
.distancias b small { font-family: var(--f-texto); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-tinta-2); }
.distancias span { font-size: var(--t-s); color: var(--c-tinta-2); }
.mapa { margin: 0; }
.mapa svg { width: 100%; height: auto; border-radius: var(--r-xl); }
.mapa figcaption { margin-top: 0.8rem; }
.mapa__tierra { fill: #F1ECE4; }
.mapa__monte { fill: #E6DED2; }
.mapa__calle { fill: none; stroke: #DED5C8; stroke-width: 1.5; }
.mapa__carretera { fill: none; stroke: #FFFFFF; stroke-width: 7; }
.mapa__via { fill: none; stroke: var(--c-tinta); stroke-width: 2; stroke-dasharray: 10 6; }
.mapa__playa { fill: none; stroke: #E9DCC4; stroke-width: 16; }
.mapa__mar { fill: #C9DADE; }
.mapa__ola { fill: none; stroke: rgba(30, 77, 92, 0.35); stroke-width: 1.2; stroke-linecap: round; }
.mapa__texto { font: 500 11px var(--f-texto); letter-spacing: 0.08em; text-transform: uppercase; fill: var(--c-tinta-2); }
.mapa__texto--mar { font: 500 22px var(--f-estetica); letter-spacing: 0; text-transform: none; fill: var(--c-mar-2); }
.mapa__estacion { fill: var(--c-blanco); stroke: var(--c-tinta); stroke-width: 1.6; }
.mapa__pin { fill: var(--c-tinta); }
.mapa__onda { fill: none; stroke: var(--c-tinta); stroke-width: 1.2; transform-box: fill-box; transform-origin: center; animation: onda 2.6s var(--curva) infinite; }
.mapa__nombre { font: 400 26px var(--f-titulo); letter-spacing: -0.02em; fill: var(--c-tinta); }
@keyframes onda {
  0% { opacity: 0.7; transform: scale(0.6); }
  100% { opacity: 0; transform: scale(2.4); }
}
@media (max-width: 860px) {
  .ubicacion__in { grid-template-columns: 1fr; }
  .ubicacion__texto { order: -1; }
}

/* ---------- Avance de obra: el solar hoy, en movimiento, dentro de un arco ---------- */
.obra__in { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2.5rem, 1rem + 5vw, 7rem); align-items: center; }
.obra__foto { margin: 0; aspect-ratio: 3 / 4.3; overflow: hidden; border-radius: var(--r-arco); background: var(--c-arena-2); }
.obra__foto video { width: 100%; height: 100%; object-fit: cover; }
.hitos { position: relative; margin: 2.6rem 0 0; padding: 0; list-style: none; }
/* Línea que se llena al bajar (la crea movimiento.js) */
.hitos__progreso { position: absolute; left: 4px; top: 1.85rem; bottom: 1.85rem; width: 1px; background: var(--c-linea-fuerte); }
.hitos__progreso i { display: block; height: 100%; background: var(--c-tinta); transform: scaleY(0); transform-origin: top; }
.hitos li { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 1rem; padding: 1.1rem 0 1.1rem 1.8rem; border-top: 1px solid var(--c-linea); }
.hitos li::before { content: ""; position: absolute; left: 0; top: 1.5rem; width: 9px; height: 9px; border: 1px solid var(--c-tinta); border-radius: 50%; background: var(--c-arena); }
.hitos li.es-hecho::before { background: var(--c-tinta); }
.hitos li.es-actual::before { background: var(--c-libre); border-color: var(--c-libre); box-shadow: 0 0 0 5px rgba(44, 115, 84, 0.16); }
.hitos b { font-family: var(--f-titulo); font-size: 1.05rem; font-weight: 400; }
.hitos span { font-size: 0.66rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-tinta-2); align-self: center; }
@media (max-width: 860px) {
  .obra__in { grid-template-columns: 1fr; }
  .obra__foto { width: min(100%, 420px); }
}

/* ---------- Contacto: sobre la foto del dormitorio, con el formulario en una tarjeta blanca ---------- */
.contacto { position: relative; isolation: isolate; z-index: 1; overflow: hidden; margin-top: var(--e-seccion); border-radius: var(--r-xl) var(--r-xl) 0 0; background: var(--c-mar); color: var(--c-blanco); }
.contacto__fondo { position: absolute; inset: 0; z-index: -1; }
.contacto__fondo img { position: absolute; left: 0; top: -5%; width: 100%; height: 110%; object-fit: cover; }
.contacto__fondo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 14, 16, 0.84) 0%, rgba(10, 14, 16, 0.62) 46%, rgba(10, 14, 16, 0.3) 100%); }
.contacto .entradilla { color: rgba(255, 255, 255, 0.78); }
.contacto__in { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(2.5rem, 1rem + 5vw, 6rem); align-items: start; padding-bottom: var(--r-xl); }
.contacto__vias { margin: 2.6rem 0 0; padding: 0; list-style: none; border-bottom: 1px solid var(--c-linea-clara); }
.contacto__vias li { display: grid; gap: 0.3rem; padding: 1.05rem 0; border-top: 1px solid var(--c-linea-clara); }
.contacto__vias b { font-size: 0.68rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; }
.contacto__vias span { font-size: var(--t-s); color: rgba(255, 255, 255, 0.76); }
.contacto__dosier { display: grid; gap: 0.6rem; justify-items: start; margin-top: 2rem; }
.contacto__dosier .nota { color: rgba(255, 255, 255, 0.66); }
.contacto__forma { padding: clamp(1.8rem, 1rem + 2.4vw, 3.2rem); border-radius: var(--r-l); background: var(--c-blanco); color: var(--c-tinta); box-shadow: 0 40px 90px rgba(0, 0, 0, 0.3); }
.formulario { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.campo { display: grid; gap: 0.45rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.campo--ancho { grid-column: 1 / -1; }
.campo label,
.campo legend { font-size: 0.68rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; }
.campo__opcional { color: var(--c-tinta-3); }
.campo input[type="text"],
.campo input[type="email"],
.campo input[type="tel"],
.campo select,
.campo textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.7rem 0;
  border: 0;
  border-bottom: 1px solid var(--c-linea-fuerte);
  border-radius: 0;
  background: transparent;
  font-size: var(--t-m);
  transition: border-color var(--d-rapida);
}
.campo select { padding-right: 1.5rem; }
.campo textarea { resize: vertical; }
.campo input:not([type="checkbox"]):not([type="radio"]):focus,
.campo select:focus,
.campo textarea:focus { border-bottom-color: var(--c-tinta); outline: none; box-shadow: 0 1px 0 0 var(--c-tinta); }
.campo [aria-invalid="true"] { border-bottom-color: #9E3328; }
.campo__error { font-size: var(--t-xs); font-weight: 500; color: #9E3328; }
.campo__error:empty { display: none; }
.campo__ayuda { font-size: var(--t-xs); color: var(--c-reserva); }
.campo__ayuda:empty { display: none; }
.canales { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.3rem; }
.canal { position: relative; }
.canal input { position: absolute; opacity: 0; }
.canal span {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0.5rem 1.2rem;
  border: 1px solid var(--c-linea-fuerte);
  border-radius: var(--r-pildora);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--d-rapida), color var(--d-rapida), border-color var(--d-rapida);
}
.canal input:checked + span { border-color: var(--c-tinta); background: var(--c-tinta); color: var(--c-blanco); }
.canal input:focus-visible + span { outline: 2px solid var(--c-mar-2); outline-offset: 2px; }
.casilla { display: flex; align-items: flex-start; gap: 0.7rem; font-size: var(--t-s) !important; font-weight: 400 !important; letter-spacing: 0 !important; text-transform: none !important; cursor: pointer; }
.casilla input { width: 18px; height: 18px; margin-top: 0.15rem; accent-color: var(--c-tinta); }
.campo--trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formulario__pie { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.4rem; }
/* Formulario en tres pasos: la barra de progreso arriba y un paso visible cada vez */
.formulario__progreso { display: grid; gap: 0.6rem; }
.formulario__paso { font-size: 0.68rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-tinta-2); }
.formulario__barra { display: block; height: 2px; overflow: hidden; background: var(--c-linea); }
.formulario__barra span { display: block; height: 100%; background: var(--c-tinta); transform: scaleX(0.33); transform-origin: left; transition: transform 400ms ease; }
.paso { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.paso[hidden] { display: none; }
.paso__intro { font-size: var(--t-s); color: var(--c-tinta-2); }
.preguntas { display: grid; gap: 1.3rem; }
.pregunta[hidden] { display: none; }
.pregunta .canal span { text-transform: none; letter-spacing: 0; font-size: var(--t-s); font-weight: 400; padding: 0.45rem 1rem; min-height: 38px; }
.gracias__demo { display: grid; gap: 0.3rem; margin-top: 0.8rem; padding-top: 1.4rem; border-top: 1px dashed var(--c-linea-fuerte); }
.gracias__demo-cabeza { font-size: 0.68rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; }
.gracias__demo-texto { font-size: var(--t-s); color: var(--c-tinta-2); }
.aviso-comercial__temperatura dd { justify-self: start; padding: 0.15rem 0.7rem; border-radius: var(--r-pildora); }
.aviso-comercial__temperatura--caliente dd { background: var(--c-tinta); color: var(--c-blanco); }
.aviso-comercial__temperatura--templado dd { background: var(--c-blanco); }
.aviso-comercial__temperatura--frio dd { border: 1px solid var(--c-linea-fuerte); }

.gracias { display: grid; gap: 1.2rem; outline: none; }
.gracias__titulo { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); }
.gracias__texto { font-size: var(--t-l); color: var(--c-tinta-2); }
.gracias .boton { justify-self: start; }
.aviso-comercial { padding: 1.3rem 1.4rem; border: 1px solid var(--c-linea); border-radius: var(--r-m); background: var(--c-arena); }
.aviso-comercial__cabeza { font-size: 0.66rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-tinta); }
.aviso-comercial dl { display: grid; gap: 0.5rem; margin: 1rem 0 0; }
.aviso-comercial dl div { display: grid; grid-template-columns: 9rem 1fr; gap: 0.8rem; font-size: var(--t-s); }
.aviso-comercial dt { color: var(--c-tinta-2); }
.aviso-comercial dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
@media (max-width: 860px) { .contacto__in { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .formulario, .paso { grid-template-columns: 1fr; }
  .aviso-comercial dl div { grid-template-columns: 1fr; gap: 0; }
}

/* ---------- Pie: columnas y el nombre gigante cortado por el borde ---------- */
.pie { position: relative; z-index: 2; margin-top: calc(-1 * var(--r-xl)); padding-top: calc(4.5rem + 1rem); overflow: hidden; border-radius: var(--r-xl) var(--r-xl) 0 0; background: var(--c-tinta); color: rgba(255, 255, 255, 0.72); }
.pie__in { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 2.5rem; }
.pie__marca { font-family: var(--f-titulo); font-size: 2.4rem; line-height: 1; letter-spacing: -0.02em; color: var(--c-blanco); }
.pie__col { display: grid; align-content: start; gap: 0.5rem; font-size: var(--t-s); }
.pie__col b { margin-bottom: 0.4rem; font-size: 0.66rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-blanco); }
.pie__legal { grid-column: 1 / -1; display: grid; gap: 0.5rem; padding-top: 2rem; border-top: 1px solid rgba(255, 255, 255, 0.14); font-size: var(--t-xs); color: rgba(255, 255, 255, 0.55); }
.pie__gigante {
  margin: clamp(2.5rem, 2rem + 3vw, 5rem) 0 0;
  padding-inline: var(--margen);
  font-family: var(--f-titulo);
  font-size: calc((100vw - 2 * var(--margen)) / 2.16);
  line-height: 0.8;
  padding-bottom: 0.03em;
  letter-spacing: -0.03em;
  color: var(--c-blanco);
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
}
@media (max-width: 860px) { .pie__in { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pie__in { grid-template-columns: 1fr; } }