/* Inter servida desde la propia web: sin la petición a Google Fonts, que
   bloqueaba el primer pintado y mandaba la IP del visitante a Google. Es la
   variable, así que un archivo por alfabeto cubre del 400 al 600. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url('/assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url('/assets/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url('/assets/fonts/inter-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url('/assets/fonts/inter-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }

/* Sobre Plano — portal de obra nueva en la Costa Blanca.
   Estructura de portal inmobiliario: mapa y lista mandan.
   Paleta: gris claro de fondo, negro de texto, gris medio de apoyo
   y un único azul para todo lo accionable. */

:root {
  --fondo: #f3f3f3;
  --blanco: #fff;
  --tinta: #1f1f1f;
  --gris: #737373;
  --gris-claro: #a3a3a3;
  --linea: #e2e2e2;
  --linea-oscura: rgba(255, 255, 255, .16);
  --azul: #055eb4;
  --azul-oscuro: #04498c;
  --azul-suave: #eaf2fb;

  --fuente: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --ancho: 1360px;
  --gutter: clamp(1rem, 3.5vw, 2.25rem);
  --radio: 10px;
  --radio-chico: 8px;
  --sombra: 0 1px 2px rgba(31, 31, 31, .05), 0 10px 26px -16px rgba(31, 31, 31, .25);
  --sombra-alta: 0 2px 6px rgba(31, 31, 31, .06), 0 20px 40px -22px rgba(31, 31, 31, .3);
  --alto-barra: 62px;
  --alto-filtros: 68px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--fuente);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; border-radius: 4px; }

/* ---------- tipografía ---------- */

h1, h2, h3, h4 { margin: 0; font-weight: 500; letter-spacing: -.024em; line-height: 1.12; color: var(--tinta); text-wrap: balance; }
h1 { font-size: clamp(2.1rem, 4.4vw, 3.4rem); }
h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
h3 { font-size: 1.12rem; letter-spacing: -.02em; line-height: 1.3; }
p { margin: 0 0 1rem; }

.parrafo { color: var(--gris); max-width: 54ch; }
.dato { color: var(--gris); font-size: .875rem; }
.numero { font-variant-numeric: tabular-nums; }

.eyebrow {
  font-size: .76rem;
  font-weight: 500;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--azul);
  margin: 0 0 .8rem;
}
.oscuro .eyebrow { color: #7cb8f2; }

/* ---------- estructura ---------- */

.envoltorio { max-width: var(--ancho); margin-inline: auto; padding-inline: var(--gutter); }
.seccion { padding-block: clamp(3rem, 5.5vw, 5rem); }
.seccion--ajustada { padding-block: clamp(2rem, 3.5vw, 3rem); }
.oscuro { background: var(--tinta); color: rgba(255, 255, 255, .7); }
.oscuro h1, .oscuro h2, .oscuro h3 { color: #fff; }

.cabecera-seccion {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem 2.5rem;
  margin-bottom: 1.9rem;
  flex-wrap: wrap;
}
.cabecera-seccion .parrafo { margin: .5rem 0 0; }

/* ---------- barra ---------- */

.barra {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--blanco);
  border-bottom: 1px solid var(--linea);
}
.barra--sobre-oscuro {
  position: absolute;
  inset: 0 0 auto;
  background: transparent;
  border-bottom-color: var(--linea-oscura);
}
.barra-fila {
  max-width: var(--ancho);
  margin-inline: auto;
  height: var(--alto-barra);
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.marca { display: flex; align-items: center; gap: .6rem; flex: none; }
.marca-nombre { font-weight: 500; font-size: 1.08rem; letter-spacing: -.03em; }
.barra--sobre-oscuro .marca-nombre { color: #fff; }
.nav { margin-left: auto; display: flex; align-items: center; gap: 1.5rem; }
.nav > a:not(.btn) { font-size: .92rem; color: var(--gris); transition: color .18s; }
.nav > a:not(.btn):hover { color: var(--tinta); }
.barra--sobre-oscuro .nav > a:not(.btn) { color: rgba(255, 255, 255, .75); }
.barra--sobre-oscuro .nav > a:not(.btn):hover { color: #fff; }
.barra--sobre-oscuro .nav .btn { color: #fff; }

/* ---------- botones ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  font: inherit;
  font-size: .92rem;
  font-weight: 500;
  line-height: 1;
  padding: .75rem 1.25rem;
  border-radius: var(--radio-chico);
  border: 1px solid transparent;
  background: var(--azul);
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
  transition: background .18s, border-color .18s, color .18s, transform .18s;
}
.btn:hover { background: var(--azul-oscuro); }
.btn:active { transform: translateY(1px); }
.btn--fantasma { background: var(--blanco); border-color: var(--linea); color: var(--tinta); }
.btn--fantasma:hover { border-color: var(--gris-claro); }
.oscuro .btn--fantasma, .barra--sobre-oscuro .btn--fantasma { background: transparent; border-color: rgba(255, 255, 255, .3); color: #fff; }
.oscuro .btn--fantasma:hover, .barra--sobre-oscuro .btn--fantasma:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .5); }
.btn--bloque { width: 100%; }
.btn--texto { background: transparent; border-color: transparent; color: var(--gris); }
.btn--texto:hover { background: transparent; color: var(--tinta); text-decoration: underline; }

.contador-filtros {
  display: inline-grid;
  place-items: center;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  margin-left: .1rem;
  border-radius: 999px;
  background: var(--azul);
  color: #fff;
  font-size: .72rem;
  font-weight: 500;
}
.resumen-movil { color: var(--gris); font-size: .9rem; margin-left: auto; white-space: nowrap; }
.btn--chico { padding: .55rem 1rem; font-size: .87rem; }

/* ---------- portada: texto a la izquierda, mapa a la derecha ---------- */

.portada { position: relative; background: var(--tinta); color: #fff; overflow: hidden; }
.portada-rejilla { display: grid; grid-template-columns: minmax(0, 47fr) minmax(0, 53fr); min-height: min(86vh, 720px); }
.portada-texto {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--alto-barra) + 2.5rem) var(--gutter) 3rem;
  padding-inline-start: max(var(--gutter), calc((100vw - var(--ancho)) / 2 + var(--gutter)));
  position: relative;
  z-index: 2;
}
.portada-texto h1 { color: #fff; max-width: 14ch; }
.portada-entrada { color: rgba(255, 255, 255, .74); font-size: 1.05rem; max-width: 44ch; margin: 1.2rem 0 1.9rem; }

.portada-mapa { position: relative; min-height: 360px; }
.portada-mapa .mapa { position: absolute; inset: 0; }
.portada-mapa::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, var(--tinta) 0%, rgba(31, 31, 31, .5) 20%, rgba(31, 31, 31, 0) 52%);
}

.busca-rapida {
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
  background: var(--blanco);
  border-radius: var(--radio);
  padding: .4rem;
  max-width: 36rem;
  box-shadow: var(--sombra-alta);
}
/* Solo la caja: el aspecto del desplegable lo pone .select, y usar aquí el
   atajo `background` borraría su flecha. */
.busca-rapida .select {
  flex: 1 1 9rem;
  min-width: 0;
  max-width: none;
  padding: .7rem 1.5rem .7rem .7rem;
  background-position: right .45rem center;
}

.portada-tira {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.3rem 2rem;
  max-width: 34rem;
  margin-top: 2.2rem;
  padding-top: 1.7rem;
  border-top: 1px solid var(--linea-oscura);
}
.portada-tira div { color: rgba(255, 255, 255, .62); font-size: .84rem; }
.portada-tira strong { display: block; color: #fff; font-size: 1.6rem; font-weight: 500; letter-spacing: -.03em; line-height: 1.25; }

/* ---------- tarjetas ---------- */

.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(292px, 1fr)); gap: 1.1rem; }

.tarjeta {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow .2s, border-color .2s;
}
.tarjeta:hover { box-shadow: var(--sombra); border-color: var(--gris-claro); }

.tarjeta-foto { position: relative; aspect-ratio: 4 / 3; background: #e6e6e6; overflow: hidden; }

/* Carrusel de fotos: se pasa con el dedo, como en cualquier portal. */
.carrusel {
  display: flex;
  height: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}
.carrusel::-webkit-scrollbar { display: none; }
.carrusel-foto { flex: 0 0 100%; scroll-snap-align: center; height: 100%; display: block; }
.carrusel-foto img { width: 100%; height: 100%; object-fit: cover; }

.carrusel-puntos {
  position: absolute;
  bottom: .6rem;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 5px;
  pointer-events: none;
}
.carrusel-puntos span {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .55);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
  transition: width .2s, background .2s;
}
.carrusel-puntos span.activo { width: 16px; background: #fff; }

.carrusel-flecha {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, .92);
  color: var(--tinta);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  display: none;
  place-items: center;
  box-shadow: 0 2px 8px rgba(31, 31, 31, .25);
}
.carrusel-flecha--antes { left: .5rem; }
.carrusel-flecha--despues { right: .5rem; }
@media (hover: hover) and (pointer: fine) {
  .tarjeta:hover .carrusel-flecha { display: grid; }
}

.chip {
  position: absolute;
  top: .6rem;
  left: .6rem;
  z-index: 2;
  background: rgba(255, 255, 255, .94);
  color: var(--tinta);
  font-size: .75rem;
  font-weight: 500;
  padding: .28rem .6rem;
  border-radius: 6px;
}
.chip--contador { left: auto; right: .6rem; background: rgba(31, 31, 31, .82); color: #fff; }

.tarjeta-cuerpo { padding: .85rem 1rem 1rem; display: flex; flex-direction: column; gap: .18rem; flex: 1; }
.tarjeta-cuerpo h3 { font-size: 1.02rem; }
.tarjeta:hover .tarjeta-cuerpo h3 { color: var(--azul); }
.tarjeta-lugar { color: var(--gris); font-size: .88rem; margin: 0; }

.precio { display: flex; align-items: baseline; gap: .45rem; flex-wrap: wrap; }
.precio-valor { font-size: 1.42rem; font-weight: 500; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.precio-nota { color: var(--gris); font-size: .85rem; }
.precio--grande .precio-valor { font-size: 1.9rem; }

.specs {
  margin: .35rem 0 0;
  color: var(--gris);
  font-size: .88rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- mapa ---------- */

.mapa-marco { position: relative; border-radius: var(--radio); overflow: hidden; background: #e9e9e9; border: 1px solid var(--linea); }

/* Mientras el mapa no ha pintado, el hueco avisa en vez de quedarse en blanco. */
.mapa::before {
  content: 'Cargando el mapa…';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--gris);
  font-size: .9rem;
  pointer-events: none;
}
.mapa.listo::before { content: none; }
.portada-mapa .mapa::before { color: rgba(255, 255, 255, .5); }
.mapa-portada { height: clamp(360px, 50vh, 520px); }
.mapa-marco .mapa, .mapa-ficha .mapa { position: absolute; inset: 0; }
.mapa-ficha { position: relative; height: 360px; border-radius: var(--radio); overflow: hidden; border: 1px solid var(--linea); background: #e9e9e9; }

.marcador {
  font: inherit;
  font-size: .8rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  background: var(--blanco);
  color: var(--tinta);
  border: 1px solid var(--linea);
  border-radius: 6px;
  padding: .3rem .6rem;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(31, 31, 31, .2);
  transition: background .16s, color .16s, transform .16s;
}
.marcador:hover, .marcador.activo { background: var(--azul); border-color: var(--azul); color: #fff; transform: scale(1.07); }
.marcador--punto {
  width: 15px;
  height: 15px;
  padding: 0;
  border-radius: 50%;
  background: var(--azul);
  border: 3px solid #fff;
  box-shadow: 0 0 0 5px rgba(5, 94, 180, .2);
}
/* Los grupos son un círculo con la cifra: una chapa con el nombre del
   municipio medía cien píxeles y con treinta grupos se tapaban entre sí. El
   nombre va en el title y en el aria-label. */
.marcador--cluster {
  width: calc(2rem * var(--peso, 1) * var(--reduccion, 1));
  height: calc(2rem * var(--peso, 1) * var(--reduccion, 1));
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--azul);
  border: 2px solid rgba(255, 255, 255, .9);
  color: #fff;
  font-size: calc(.78rem * min(var(--peso, 1), 1.25) * var(--reduccion, 1));
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 4px rgba(5, 94, 180, .22), 0 3px 10px rgba(31, 31, 31, .25);
  /* Dos celdas vecinas pueden tener el centro casi pegado: manda el grupo
     grande, que es el que hay que poder leer. */
  z-index: var(--orden, 1);
}
.marcador--cluster:hover,
.marcador--cluster:focus-visible {
  transform: scale(calc(var(--peso, 1) * 1.1));
  z-index: 2;
}

/* Pie de la lista: cuántas se ven y cuántas quedan. */
.paginacion {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .55rem;
  padding: 1.6rem 0 2.2rem;
}
.paginacion[hidden] { display: none; }
.paginacion .btn { min-width: 15rem; justify-content: center; }
.paginacion-estado { margin: 0; font-size: .82rem; color: var(--gris); }

/* Los marcadores de la portada aparecen escalonados al cargar el mapa. */
.marcador--entrada { animation: aparece .45s cubic-bezier(.2, .8, .3, 1) backwards; }
@keyframes aparece {
  from { opacity: 0; transform: translateY(6px) scale(.85); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .marcador--entrada { animation: none; } }

/* Los círculos llevan z-index hasta 20 para que mande el grupo grande; el
   globo va en el mismo contenedor y sin esto quedaba por debajo de ellos. */
.maplibregl-popup { z-index: 30; }
/* En la portada el mapa está dentro de un bloque con texto blanco: el nombre
   de la promoción heredaba ese color y desaparecía sobre el fondo blanco. */
.maplibregl-popup-content { color: var(--tinta); padding: 0; border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra-alta); font-family: var(--fuente); width: 246px; }
.popup-foto { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
.popup-cuerpo { padding: .7rem .85rem .9rem; }
.popup-cuerpo strong { display: block; font-weight: 500; font-size: .98rem; letter-spacing: -.02em; margin: .1rem 0; }
.maplibregl-ctrl-attrib { font-size: 10px; }

.mapa-acciones { position: absolute; z-index: 5; top: .9rem; left: 50%; transform: translateX(-50%); display: flex; gap: .45rem; }
.mapa-btn {
  font: inherit;
  font-size: .85rem;
  font-weight: 500;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio-chico);
  padding: .5rem .9rem;
  cursor: pointer;
  box-shadow: var(--sombra);
  color: var(--tinta);
}
.mapa-btn[aria-pressed='true'] { background: var(--azul); border-color: var(--azul); color: #fff; }

/* Botón que aparece al mover el mapa en móvil, en vez de buscar solo. */
.mapa-btn--buscar-aqui {
  position: absolute;
  z-index: 6;
  top: .9rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--azul);
  border-color: var(--azul);
  color: #fff;
  font-weight: 500;
}
.mapa-btn--buscar-aqui[hidden] { display: none; }

/* ---------- desplegables ---------- */

/* Los select nativos son los mejores en móvil (abren el picker del sistema),
   así que se conserva el control y se rehace solo su aspecto. */
.select {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23737373' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .1rem center;
  padding: .55rem 1.35rem .55rem .2rem;
  font: inherit;
  font-size: .92rem;
  color: var(--tinta);
  cursor: pointer;
  max-width: 11rem;
  text-overflow: ellipsis;
}
.select:focus { outline: none; }
.select::-ms-expand { display: none; }

/* ---------- buscador ---------- */

.filtros { position: sticky; top: var(--alto-barra); z-index: 50; background: var(--blanco); border-bottom: 1px solid var(--linea); }

/* Barra de acciones al estilo de los portales: filtrar, ordenar y mapa,
   las tres cosas que se usan, siempre visibles y sin scroll horizontal. */
.filtros-bar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.accion {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 52px;
  padding: .5rem .6rem;
  border: 0;
  border-left: 1px solid var(--linea);
  background: var(--blanco);
  font: inherit;
  font-size: .95rem;
  color: var(--tinta);
  cursor: pointer;
  position: relative;
  transition: background .16s;
}
.accion:first-child { border-left: 0; }
.accion:hover { background: var(--fondo); }
.accion svg { flex: none; color: var(--gris); }
.filtros-bar .accion--orden { padding-right: .3rem; }
.filtros-bar .accion--orden label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.filtros-bar .accion--orden .select { max-width: 100%; min-width: 0; flex: 0 1 auto; padding-block: .5rem; background-position: right .1rem center; }
.accion > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filtros.abierto .accion--filtrar { background: var(--azul-suave); color: var(--azul-oscuro); }

.contador-filtros {
  display: inline-grid;
  place-items: center;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--azul);
  color: #fff;
  font-size: .72rem;
  font-weight: 500;
}

.filtros-fila { display: none; gap: .35rem; align-items: center; padding: .7rem var(--gutter); overflow-x: auto; scrollbar-width: thin; }
.filtros-fila .select { max-width: 8.5rem; }
.filtros-pie { display: none; }

.campo {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  border: 1px solid var(--linea);
  border-radius: var(--radio-chico);
  padding: 0 .4rem 0 .65rem;
  background: var(--blanco);
  flex: none;
  transition: border-color .16s, background .16s, box-shadow .16s;
}
.campo:hover { border-color: var(--gris-claro); }
.campo:focus-within { border-color: var(--azul); box-shadow: 0 0 0 3px rgba(5, 94, 180, .12); }
.campo label { font-size: .74rem; color: var(--gris-claro); white-space: nowrap; }
.campo--activo { border-color: var(--azul); background: var(--azul-suave); }
.campo--activo label { color: var(--azul); }
.campo--activo .select { color: var(--azul-oscuro); font-weight: 500; }
.filtros-bar .campo { border: 0; border-left: 1px solid var(--linea); border-radius: 0; background: var(--blanco); }
.filtros-bar .campo:focus-within { box-shadow: none; }
.filtros-bar .campo:first-child { border-left: 0; }

.interruptor {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  border: 1px solid var(--linea);
  border-radius: var(--radio-chico);
  padding: .6rem .75rem;
  font-size: .9rem;
  cursor: pointer;
  background: var(--blanco);
  flex: none;
  user-select: none;
  transition: border-color .16s, background .16s, color .16s;
}
.interruptor:hover { border-color: var(--gris-claro); }
.interruptor input { accent-color: var(--azul); width: 16px; height: 16px; margin: 0; }
.interruptor:has(input:checked) { border-color: var(--azul); background: var(--azul-suave); color: var(--azul-oscuro); }

.cabecera-busqueda {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  max-width: var(--ancho);
  margin-inline: auto;
  padding: 1.1rem var(--gutter) .9rem;
}
.cabecera-busqueda h1 { font-size: clamp(1.2rem, 2.2vw, 1.7rem); }
.cabecera-busqueda .campo { margin-left: auto; }
.cabecera-busqueda .campo svg { display: none; }

/* Lista y mapa. En pantallas anchas conviven; por debajo, el mapa asoma
   arriba y se abre a pantalla completa cuando se pide. */
.split { display: grid; grid-template-columns: 1fr; }
.split-lista { min-width: 0; padding: 0 var(--gutter) 3rem; }
.split-mapa { position: relative; background: #e9e9e9; }
.split-mapa .mapa { position: absolute; inset: 0; }

.vacio { border: 1px solid var(--linea); border-radius: var(--radio); padding: 3rem 2rem; text-align: center; color: var(--gris); background: var(--blanco); }
.vacio strong { display: block; color: var(--tinta); font-size: 1.1rem; font-weight: 500; margin-bottom: .35rem; }
.cargando { opacity: .4; transition: opacity .2s; pointer-events: none; }

/* Botón que cubre la vista previa del mapa y lo abre entero. */
.mapa-abrir {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  border: 0;
  background: linear-gradient(180deg, rgba(31, 31, 31, 0) 40%, rgba(31, 31, 31, .58) 100%);
  color: #fff;
  font: inherit;
  font-size: .95rem;
  font-weight: 500;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
  cursor: pointer;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: .9rem;
}

/* Ficha flotante al tocar un marcador. */
.tarjeta-mapa {
  position: absolute;
  left: .75rem;
  right: .75rem;
  bottom: .75rem;
  z-index: 10;
  background: var(--blanco);
  border-radius: var(--radio);
  box-shadow: var(--sombra-alta);
  display: none;
  overflow: hidden;
}
.tarjeta-mapa.visible { display: block; }
.tarjeta-mapa a { display: flex; gap: .85rem; align-items: stretch; }
.tarjeta-mapa img { width: 112px; height: 104px; object-fit: cover; flex: none; }
.tarjeta-mapa .cuerpo { padding: .7rem .8rem .7rem 0; display: flex; flex-direction: column; justify-content: center; gap: .1rem; min-width: 0; }
.tarjeta-mapa .cuerpo strong { font-weight: 500; font-size: 1.2rem; letter-spacing: -.03em; }
.tarjeta-mapa .cuerpo span { color: var(--gris); font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tarjeta-mapa .cerrar {
  position: absolute;
  top: .4rem;
  right: .4rem;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, .9);
  box-shadow: var(--sombra);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  color: var(--tinta);
}

/* ---------- ficha ---------- */

/* Alto real en el contenedor y filas que se reparten: con `max-height` y
   aspect-ratio en las celdas la foto grande medía más que la rejilla y se
   comía el título de la promoción. */
.galeria {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  grid-template-rows: 1fr 1fr;
  height: clamp(320px, 54vh, 560px);
  gap: 3px;
  background: var(--linea);
}
.galeria a { display: block; overflow: hidden; }
.galeria img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.7,.3,1); }
.galeria a:hover img { transform: scale(1.03); }
.galeria-principal { grid-row: span 2; min-height: 0; position: relative; }
.chip--fotos { top: auto; left: auto; right: .8rem; bottom: .8rem; background: rgba(31, 31, 31, .82); color: #fff; }
#contacto { scroll-margin-top: calc(var(--alto-barra) + 1rem); }
.galeria-lado { min-height: 0; position: relative; }
.galeria .galeria-extra { display: none; }
.galeria-mas { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(31, 31, 31, .55); color: #fff; font-size: .95rem; font-weight: 500; }

.ficha { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: clamp(2rem, 4vw, 3.25rem); align-items: start; }
.ficha-bloque { padding-block: 2.1rem; border-top: 1px solid var(--linea); }
.ficha-bloque:first-child { border-top: 0; padding-top: 1rem; }
.ficha-bloque h2 { font-size: clamp(1.25rem, 2vw, 1.6rem); margin-bottom: 1.1rem; }
.ficha-texto p { color: var(--gris); max-width: 66ch; }
.ficha-texto h3 { margin: 1.8rem 0 .6rem; }

.migas { font-size: .85rem; color: var(--gris); padding-block: 1.2rem .2rem; display: flex; gap: .45rem; flex-wrap: wrap; }
.migas a:hover { color: var(--azul); }

.hechos { display: grid; grid-template-columns: repeat(auto-fit, minmax(142px, 1fr)); border: 1px solid var(--linea); border-radius: var(--radio); background: var(--blanco); overflow: hidden; }
.hecho { padding: 1rem 1.15rem; border-left: 1px solid var(--linea); }
.hecho:first-child { border-left: 0; }
.hecho dt { font-size: .78rem; color: var(--gris); margin-bottom: .3rem; }
.hecho dd { margin: 0; font-size: 1.28rem; font-weight: 500; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }

.tabla-envoltorio { overflow-x: auto; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--blanco); }
table.unidades { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 640px; }
table.unidades th { font-size: .78rem; color: var(--gris); text-align: right; font-weight: 500; padding: .85rem 1.05rem; border-bottom: 1px solid var(--linea); white-space: nowrap; }
table.unidades th:first-child, table.unidades td:first-child { text-align: left; }
table.unidades td { padding: .85rem 1.05rem; border-bottom: 1px solid var(--linea); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.unidades tbody tr:last-child td { border-bottom: 0; }
table.unidades tbody tr:hover { background: var(--azul-suave); }
.ref { font-size: .8rem; color: var(--gris-claro); }
.precio-celda { font-weight: 500; }
.enlace-plano { color: var(--azul); font-weight: 500; font-size: .87rem; }
.enlace-plano:hover { text-decoration: underline; }

.etiquetas { display: flex; flex-wrap: wrap; gap: .45rem; }
.etiqueta { background: var(--blanco); border: 1px solid var(--linea); border-radius: 6px; padding: .42rem .8rem; font-size: .87rem; }

.panel { position: sticky; top: calc(var(--alto-barra) + 1rem); background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); padding: 1.4rem; box-shadow: var(--sombra); }
.panel h2 { font-size: 1.2rem; margin-bottom: .25rem; }
.formulario { display: grid; gap: .55rem; margin-top: 1.2rem; }
.formulario input, .formulario textarea {
  width: 100%;
  border: 1px solid var(--linea);
  border-radius: var(--radio-chico);
  padding: .72rem .85rem;
  font: inherit;
  font-size: .93rem;
  color: var(--tinta);
  background: var(--fondo);
}
.formulario textarea { min-height: 88px; resize: vertical; }
.formulario input:focus, .formulario textarea:focus { outline: none; border-color: var(--azul); background: var(--blanco); }
.formulario .btn { margin-top: .3rem; }
.legal { font-size: .77rem; color: var(--gris-claro); line-height: 1.5; margin: .25rem 0 0; }
.aviso { border-radius: var(--radio-chico); padding: .85rem 1rem; font-size: .9rem; margin-bottom: 1rem; }
.aviso--ok { background: var(--azul-suave); color: var(--azul-oscuro); }
.aviso--error { background: #fdecea; color: #a4342a; }

/* ---------- zonas ---------- */

.zonas { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.1rem; }
.zona { position: relative; min-height: 270px; border-radius: var(--radio); overflow: hidden; display: flex; align-items: flex-end; padding: 1.3rem; color: #fff; isolation: isolate; }
.zona img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .5s cubic-bezier(.2,.7,.3,1); }
.zona::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(20, 22, 24, .9) 0%, rgba(20, 22, 24, .2) 62%, rgba(20, 22, 24, .06) 100%); }
.zona:hover img { transform: scale(1.05); }
.zona h3 { color: #fff; font-size: 1.3rem; }
.zona .dato { color: rgba(255, 255, 255, .78); }

/* ---------- proceso ---------- */

.proceso { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.6rem; }
.paso { border-top: 1px solid var(--linea-oscura); padding-top: 1.1rem; }
.paso-hito { display: block; font-size: .76rem; font-weight: 500; letter-spacing: .11em; text-transform: uppercase; color: #7cb8f2; margin-bottom: .7rem; }
.paso h3 { font-size: 1.08rem; margin-bottom: .45rem; }
.paso p { margin: 0; color: rgba(255, 255, 255, .66); font-size: .93rem; }

/* ---------- pie ---------- */

.pie { background: var(--tinta); color: rgba(255, 255, 255, .62); padding-block: 3.25rem 2rem; }
.pie-rejilla { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(auto-fit, minmax(140px, 1fr)); gap: 2.5rem; }
.pie h4 { font-size: .76rem; font-weight: 500; letter-spacing: .11em; text-transform: uppercase; color: rgba(255, 255, 255, .42); margin: 0 0 .9rem; }
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; font-size: .92rem; }
.pie a:hover { color: #fff; }
.pie-fondo { margin-top: 2.75rem; padding-top: 1.4rem; border-top: 1px solid var(--linea-oscura); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .82rem; color: rgba(255, 255, 255, .4); }

/* ---------- responsive ---------- */

/* Móvil y tablet: el mapa asoma sobre la lista y se abre entero al pulsarlo. */
@media (max-width: 999px) {
  .split-mapa { height: 210px; margin: 0 var(--gutter) 1.1rem; border-radius: var(--radio); overflow: hidden; border: 1px solid var(--linea); }
  /* En la tira de vista previa cabe poco: los globos van algo más chicos. */
  .split[data-vista='lista'] .split-mapa { --reduccion: .82; }
  .mapa-abrir { display: flex; }
  .mapa-acciones, .mapa-btn--buscar-aqui, .tarjeta-mapa { display: none; }
  .maplibregl-ctrl-top-right, .maplibregl-ctrl-bottom-right { display: none; }

  .split[data-vista='mapa'] .split-mapa {
    position: fixed;
    inset: calc(var(--alto-barra) + var(--alto-filtros)) 0 0;
    height: auto;
    margin: 0;
    border: 0;
    border-radius: 0;
    z-index: 40;
  }
  .split[data-vista='mapa'] .mapa-abrir { display: none; }
  .split[data-vista='mapa'] .mapa-acciones,
  .split[data-vista='mapa'] .maplibregl-ctrl-top-right { display: flex; }
  .split[data-vista='mapa'] .tarjeta-mapa.visible { display: block; }
  .split[data-vista='mapa'] .split-lista { display: none; }
  .split[data-vista='mapa'] ~ * { display: none; }

  body.vista-mapa { overflow: hidden; }
  .solo-escritorio { display: none; }
}

/* Pantalla ancha: lista y mapa a la vez, filtros en fila. */
@media (min-width: 1000px) {
  :root { --alto-filtros: 57px; }
  .filtros-bar { display: none; }
  .filtros-fila { display: flex; }
  .split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: 'lista mapa';
    align-items: start;
  }
  .split-lista { grid-area: lista; }
  .split-mapa {
    grid-area: mapa;
    position: sticky;
    top: calc(var(--alto-barra) + var(--alto-filtros));
    height: calc(100vh - var(--alto-barra) - var(--alto-filtros));
    border-left: 1px solid var(--linea);
  }
  .cabecera-busqueda { padding-inline: var(--gutter); }
  .mapa-abrir { display: none; }
}

/* Tarjeta apaisada: la foto a la izquierda y los datos a la derecha, que es
   como se leen los listados inmobiliarios en cuanto hay ancho. */
@media (min-width: 720px) {
  .rejilla--lista { grid-template-columns: 1fr; gap: 1rem; }
  .rejilla--lista .tarjeta { flex-direction: row; }
  .rejilla--lista .tarjeta-foto { flex: 0 0 42%; aspect-ratio: 4 / 3; }
  .rejilla--lista .tarjeta-cuerpo { justify-content: center; padding: 1.1rem 1.25rem; gap: .25rem; }
  .rejilla--lista .precio-valor { font-size: 1.55rem; }
  .rejilla--lista .specs { padding-top: .55rem; }
}

@media (max-width: 1024px) {
  .ficha { grid-template-columns: minmax(0, 1fr); padding-bottom: 5rem; }
  .panel { position: static; }
  .cta-flotante {
    display: inline-flex;
    position: fixed;
    bottom: 1.1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 45;
    box-shadow: 0 6px 20px rgba(5, 94, 180, .35);
    transition: opacity .25s;
  }

  /* Panel de filtros a pantalla completa */
  .filtros.abierto {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: flex;
    flex-direction: column;
    background: var(--blanco);
    border-bottom: 0;
  }
  .filtros.abierto .filtros-bar { border-bottom: 1px solid var(--linea); }
  .filtros.abierto .filtros-fila {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: 1;
    overflow-y: auto;
    gap: .55rem;
    padding: 1rem var(--gutter) 1.5rem;
  }
  .filtros.abierto .campo { width: 100%; justify-content: space-between; padding: .15rem .85rem; border: 1px solid var(--linea); border-radius: var(--radio-chico); }
  .filtros.abierto .campo label { font-size: .88rem; color: var(--tinta); }
  .filtros.abierto .campo .select { max-width: none; flex: 1; text-align: right; padding: .75rem 1.35rem .75rem .5rem; direction: rtl; }
  .filtros.abierto .campo--activo label { color: var(--azul); }
  .filtros.abierto .interruptor { width: 100%; padding: .8rem .9rem; }
  .filtros.abierto .filtros-pie {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .75rem var(--gutter) 1rem;
    border-top: 1px solid var(--linea);
  }
  .filtros.abierto .filtros-pie .btn:last-child { flex: 1; }
  body.sin-scroll { overflow: hidden; }
}

@media (min-width: 1025px) { .cta-flotante { display: none; } }

@media (max-width: 860px) {
  .portada-rejilla { grid-template-columns: 1fr; min-height: 0; }
  .portada-texto { padding: calc(var(--alto-barra) + 1.6rem) var(--gutter) 1.8rem; }
  .portada-entrada { font-size: .98rem; max-width: 36ch; margin: .9rem 0 1.4rem; }
  .portada-tira { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem 1rem; margin-top: 1.5rem; padding-top: 1.25rem; max-width: none; }
  .portada-tira strong { font-size: 1.28rem; }
  .portada-tira div { font-size: .8rem; }
  .portada-mapa { height: 300px; }
  .portada-mapa::after { background: linear-gradient(180deg, var(--tinta) 0%, rgba(31, 31, 31, 0) 24%); }

  .busca-rapida { padding: .35rem; gap: .35rem; }
  .busca-rapida .select { flex: 1 1 100%; border: 1px solid var(--linea); border-radius: var(--radio-chico); padding: .8rem 2rem .8rem 1rem; max-width: none; background-position: right .75rem center; }
  .busca-rapida .btn { width: 100%; padding-block: .85rem; }

  .galeria {
    display: flex;
    grid-template-columns: none;
    grid-template-rows: none;
    height: auto;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 4px;
    background: var(--fondo);
  }
  .galeria a { flex: 0 0 92%; scroll-snap-align: center; aspect-ratio: 16 / 11; border-radius: 0; min-height: 0; }
  .galeria .galeria-principal { grid-row: auto; }
  .galeria .galeria-extra { display: block; }
  .galeria-mas { display: none; }
}

@media (max-width: 720px) {
  .barra-fila { gap: .75rem; }
  .nav { gap: .75rem; }
  .nav > a:not(.btn):not(.nav-fav) { display: none; }
  .marca-nombre { font-size: 1rem; }

  .rejilla { grid-template-columns: 1fr; gap: 1rem; }
  .zonas { grid-template-columns: 1fr; }
  h1 { font-size: clamp(1.95rem, 8vw, 2.5rem); }

  .tarjeta-foto { aspect-ratio: 16 / 11; }
  .tarjeta-cuerpo { padding: .8rem .95rem .95rem; }
  .precio-valor { font-size: 1.5rem; }

  .hechos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hecho:nth-child(odd) { border-left: 0; }
  .hecho:nth-child(n+3) { border-top: 1px solid var(--linea); }

  .cabecera-busqueda h1 { font-size: 1.22rem; }
  .migas { font-size: .8rem; }
  table.unidades { min-width: 560px; }
  .pie-rejilla { grid-template-columns: 1fr 1fr; gap: 1.8rem; }
  .pie-rejilla > :first-child { grid-column: 1 / -1; }
  .seccion { padding-block: 2.75rem; }
  .cabecera-seccion { margin-bottom: 1.4rem; }
  .accion { font-size: .9rem; gap: .4rem; padding-inline: .35rem; }
  /* En pantallas muy estrechas el icono de orden estorba más que ayuda. */
  .filtros-bar .accion--orden svg { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}


/* ---------- selector de idioma ---------- */

.idiomas { position: relative; }
.idiomas > summary {
  display: inline-flex;
  align-items: center;
  gap: .34rem;
  padding: .34rem .5rem;
  border-radius: 999px;
  cursor: pointer;
  list-style: none;
  font-size: .84rem;
  font-weight: 500;
  color: inherit;
  transition: background .16s;
}
.idiomas > summary::-webkit-details-marker { display: none; }
.idiomas > summary:hover { background: rgba(31, 31, 31, .06); }
.barra--sobre-oscuro .idiomas > summary:hover { background: rgba(255, 255, 255, .12); }
.idiomas > summary:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
.bandera { font-size: 1.05rem; line-height: 1; }
.idiomas-code { letter-spacing: .03em; }

.idiomas-lista {
  position: absolute;
  top: calc(100% + .5rem);
  right: 0;
  z-index: 60;
  margin: 0;
  padding: .35rem;
  list-style: none;
  width: 12.5rem;
  max-height: min(60vh, 26rem);
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra-alta);
}
.barra .idiomas-lista a,
.idiomas-lista a {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .48rem .6rem;
  border-radius: calc(var(--radio) - 4px);
  font-size: .88rem;
  font-weight: 400;
  line-height: 1.3;
  color: var(--tinta);
  text-decoration: none;
  white-space: nowrap;
}
.barra .idiomas-lista a:hover,
.idiomas-lista a:hover { background: var(--azul-suave); color: var(--tinta); }
.barra .idiomas-lista a[aria-current],
.idiomas-lista a[aria-current] { font-weight: 600; color: var(--azul); background: var(--azul-suave); }

/* ---------- visor de fotos ---------- */

.visor {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: 'barra barra barra' 'antes foto despues' 'tiras tiras tiras';
  align-items: center;
  background: #101012;
}
.visor.abierto { display: grid; }

.visor-barra {
  grid-area: barra;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .7rem .9rem;
  color: rgba(255, 255, 255, .78);
  font-size: .84rem;
}
.visor-marco {
  grid-area: foto;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 0;
  padding: 0 .4rem;
}
.visor-marco img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 6px;
}

.visor-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  cursor: pointer;
  transition: background .16s;
}
.visor-btn:hover { background: rgba(255, 255, 255, .24); }
.visor-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.visor-antes   { grid-area: antes;   margin-left: .6rem; }
.visor-despues { grid-area: despues; margin-right: .6rem; }
.visor-nav[hidden] { display: none; }

.visor-tiras {
  grid-area: tiras;
  display: flex;
  gap: .4rem;
  padding: .7rem .9rem 1rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.visor-tiras::-webkit-scrollbar { display: none; }
.visor-tira {
  flex: 0 0 auto;
  width: 76px;
  height: 52px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 6px;
  overflow: hidden;
  background: none;
  cursor: pointer;
  opacity: .5;
  transition: opacity .16s, border-color .16s;
}
.visor-tira img { width: 100%; height: 100%; object-fit: cover; display: block; }
.visor-tira:hover { opacity: .85; }
.visor-tira.activa { opacity: 1; border-color: #fff; }

@media (max-width: 720px) {
  /* En el móvil las flechas tapan la foto: se pasa deslizando y con las tiras. */
  .visor { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'barra' 'foto' 'tiras'; }
  .visor-nav { display: none; }
  .visor-tira { width: 62px; height: 44px; }
}

/* Tarjeta elegida desde el mapa: borde azul y un destello corto al llegar. */
.tarjeta { scroll-margin-top: calc(var(--alto-barra) + var(--alto-filtros, 0px) + 1rem); }
.tarjeta--seleccionada {
  box-shadow: 0 0 0 2px var(--azul), 0 10px 30px rgba(5, 94, 180, .18);
  animation: seleccion .9s ease-out;
}
@keyframes seleccion {
  0% { box-shadow: 0 0 0 10px rgba(5, 94, 180, .35); }
  100% { box-shadow: 0 0 0 2px var(--azul), 0 10px 30px rgba(5, 94, 180, .18); }
}
@media (prefers-reduced-motion: reduce) { .tarjeta--seleccionada { animation: none; } }

/* Lista de un grupo que ya no se separa con zoom (mismo edificio). */
.popup-grupo { padding: .7rem .5rem .5rem; }
.popup-grupo .dato { margin: 0 .35rem .35rem; }
.popup-fila {
  display: flex;
  justify-content: space-between;
  gap: .8rem;
  padding: .5rem .45rem;
  border-radius: 6px;
  font-size: .86rem;
  color: var(--tinta);
  text-decoration: none;
}
.popup-fila:hover { background: var(--azul-suave); }
.popup-fila strong { font-weight: 600; white-space: nowrap; }

/* ---------- páginas legales ---------- */
.legal { padding-bottom: 4rem; }
.legal-cuerpo { max-width: 72ch; }
.legal-cuerpo h1 { margin-bottom: .4rem; }
.legal-cuerpo h2 { font-size: 1.15rem; margin: 2.2rem 0 .7rem; }
.legal-cuerpo p { color: var(--tinta); line-height: 1.7; margin: 0 0 .9rem; }
.legal-indice { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.4rem 0 .6rem; }
.legal-indice a { padding: .4rem .8rem; border: 1px solid var(--linea); border-radius: 999px; font-size: .88rem; color: var(--tinta); text-decoration: none; }
.legal-indice a[aria-current] { border-color: var(--azul); color: var(--azul); background: var(--azul-suave); }
.pie-legal { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; }
.pie-legal a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* ---------- formulario de contacto ---------- */
.formulario .campo-form { display: grid; gap: .32rem; }
.formulario .campo-form > span { font-size: .84rem; font-weight: 500; color: var(--tinta); }
.formulario .campo-form small { font-size: .78rem; font-weight: 400; color: var(--gris); }
/* 16 px: por debajo, el iPhone hace zoom al tocar el campo. */
.formulario input[type='text'], .formulario input[type='email'], .formulario input[type='tel'], .formulario textarea { font-size: 16px; }
.formulario .trampa { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.formulario .casilla { display: flex; gap: .6rem; align-items: flex-start; font-size: .88rem; line-height: 1.45; color: var(--tinta); cursor: pointer; }
.formulario .casilla input { width: 1.15rem; height: 1.15rem; margin: .12rem 0 0; flex: 0 0 auto; accent-color: var(--azul); }
.formulario .casilla a, .formulario .legal a { color: var(--azul); }
.contacto-tel { margin: 1.1rem 0 0; font-size: .92rem; text-align: center; color: var(--gris); }
.contacto-tel a { color: var(--tinta); font-weight: 600; white-space: nowrap; }

/* ---------- alertas por email ---------- */
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.alerta-caja {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 1.2rem 2rem;
  align-items: center;
  margin: 2.2rem 0 1rem;
  padding: 1.5rem 1.6rem;
  background: var(--azul-suave);
  border-radius: var(--radio);
}
.alerta-texto h2 { font-size: 1.15rem; margin: 0 0 .35rem; }
.alerta-texto p { margin: 0; color: var(--gris); font-size: .92rem; line-height: 1.5; }
.alerta-fila { display: flex; gap: .5rem; }
.alerta-fila input[type='email'] {
  flex: 1 1 auto; min-width: 0; font-size: 16px; padding: .75rem .9rem;
  border: 1px solid var(--linea); border-radius: var(--radio-chico); background: #fff; color: var(--tinta);
}
.alerta-fila .btn { flex: 0 0 auto; }
.alerta-form .casilla { display: flex; gap: .55rem; align-items: flex-start; margin-top: .7rem; font-size: .84rem; line-height: 1.45; color: var(--tinta); cursor: pointer; }
.alerta-form .casilla input { width: 1.1rem; height: 1.1rem; margin: .1rem 0 0; flex: 0 0 auto; accent-color: var(--azul); }
.alerta-form .casilla a { color: var(--azul); }
.alerta-pagina { min-height: 50vh; max-width: 60ch; }
.alerta-pagina p { color: var(--gris); margin: 1rem 0 1.8rem; line-height: 1.6; }
@media (max-width: 720px) {
  .alerta-caja { grid-template-columns: minmax(0, 1fr); padding: 1.2rem; }
  .alerta-fila { flex-direction: column; }
  .alerta-fila .btn { width: 100%; justify-content: center; }
}

/* ---------- favoritos y compartir ---------- */
.fav {
  position: absolute; right: .6rem; bottom: .6rem; z-index: 3;
  width: 2.3rem; height: 2.3rem; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: rgba(255, 255, 255, .94); color: var(--tinta);
  cursor: pointer; box-shadow: 0 2px 8px rgba(31, 31, 31, .2); transition: transform .15s, color .15s;
}
.fav:hover { transform: scale(1.08); }
.fav svg, .accion-ficha svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.fav.activo, .accion-ficha.activo { color: #d62d4a; }
.fav.activo svg, .accion-ficha.activo svg[data-corazon] { fill: currentColor; }
.fav:focus-visible, .accion-ficha:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }

.nav-fav { position: relative; display: inline-flex; align-items: center; gap: .3rem; }
.nav-fav svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.8; }
.nav-fav .contador { min-width: 1.15rem; height: 1.15rem; padding: 0 .3rem; border-radius: 999px; background: #d62d4a; color: #fff; font-size: .68rem; font-weight: 600; display: inline-grid; place-items: center; }
.nav-fav .contador[hidden] { display: none; }

.ficha-acciones { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.4rem; }
.accion-ficha {
  display: inline-flex; align-items: center; gap: .45rem; padding: .55rem .95rem;
  border: 1px solid var(--linea); border-radius: 999px; background: #fff;
  font: inherit; font-size: .88rem; color: var(--tinta); text-decoration: none; cursor: pointer;
}
.accion-ficha:hover { border-color: var(--tinta); }
.accion-ficha.activo { border-color: rgba(214, 45, 74, .4); }

.similares { padding-top: 2.4rem; }
.similares h2 { margin-bottom: 1.4rem; }

/* ---------- viviendas de la ficha ---------- */
.enlace-plano {
  display: inline-flex; align-items: center; gap: .35rem; padding: .38rem .75rem;
  border-radius: 999px; background: var(--azul-suave); color: var(--azul);
  font-size: .82rem; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.enlace-plano:hover { background: var(--azul); color: #fff; }
.enlace-plano svg { width: .95rem; height: .95rem; fill: none; stroke: currentColor; stroke-width: 1.8; }

@media (max-width: 720px) {
  /* Una tarjeta por vivienda: ocho columnas en 340 px obligaban a desplazar de lado. */
  .tabla-envoltorio { overflow: visible; }
  .unidades { min-width: 0; border: 0; }
  .unidades thead { display: none; }
  .unidades, .unidades tbody { display: block; width: 100%; }
  .unidades tr {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem .8rem;
    padding: 1rem; margin-bottom: .7rem; border: 1px solid var(--linea); border-radius: var(--radio); background: #fff;
  }
  .unidades td { display: block; padding: 0; border: 0; font-size: .92rem; }
  .unidades td::before { content: attr(data-label); display: block; margin-bottom: .1rem; font-size: .72rem; color: var(--gris); }
  .unidades td:first-child { grid-column: 1 / -1; font-weight: 600; }
  .unidades td:first-child::before { display: none; }
  .unidades td.precio-celda { grid-column: 1 / 3; align-self: end; font-size: 1.05rem; }
  .unidades td.celda-plano { align-self: end; justify-self: end; }
  .unidades td.celda-plano::before { display: none; }
}

/* El botón flotante de la ficha no puede tapar el final de la página. */
@media (max-width: 999px) {
  body:has(#cta-flotante) .pie { padding-bottom: 5.5rem; }
}

/* En el móvil el enlace de favoritos es solo el corazón: con el texto, el
   botón «Ver el mapa» se salía de la barra. */
@media (max-width: 720px) {
  .nav-fav .oculto-movil { display: none; }
}