/* ============================================================
   SISTEMA CLARO UNIFICADO
   Un solo lenguaje visual para todo el sitio: superficies
   blancas sobre lienzo gris muy claro, elevación por capas de
   sombra, esquinas suaves, mucho aire y micro-interacciones.
   Reemplaza a portada-oscura.css y panel-dashboard.css.
   ============================================================ */

:root {
  --lienzo:      #f7f8fa;   /* fondo de página */
  --superficie:  #ffffff;   /* tarjetas y paneles */
  --superficie-2:#f2f4f7;   /* campos y zonas hundidas */
  --hairline:    rgba(18,53,91,.09);
  --hairline-2:  rgba(18,53,91,.16);

  --tinta-1:     #1f2937;   /* texto principal */
  --tinta-2:     #4b5565;   /* secundario */
  --tinta-3:     #6b7280;   /* metadatos */

  --marca:       #12355b;   /* azul marino */
  --marca-2:     #2f80ed;   /* azul medio, enlaces y hover */
  --marca-suave: #eaf0f8;
  --oro:         #d4af37;
  --oro-texto:   #a8862a;   /* dorado legible sobre blanco */

  --ok:          #1d6b52;
  --aviso:       #a8862a;
  --neutro:      #616e80;

  /* Elevación en dos capas: contacto cercano + difusión amplia */
  --elev-1: 0 1px 2px rgba(18,53,91,.05), 0 6px 16px rgba(18,53,91,.06);
  --elev-2: 0 2px 4px rgba(18,53,91,.06), 0 16px 32px rgba(18,53,91,.13);
  --elev-3: 0 4px 8px rgba(18,53,91,.08), 0 28px 56px rgba(18,53,91,.16);

  --curva: cubic-bezier(.16, 1, .3, 1);
  --r-s: 10px;
  --r-m: 14px;
  --r-l: 20px;
  --r-xl: 28px;
  --r-pill: 999px;
}

body { background: var(--lienzo); color: var(--tinta-1); }

/* ---------- Superficies ---------- */
.sup {
  background: var(--superficie);
  border: 1px solid var(--hairline);
  border-radius: var(--r-m);
  box-shadow: var(--elev-1);
}
.sup-flota {
  transition: transform .35s var(--curva), box-shadow .35s var(--curva);
}
.sup-flota:hover {
  transform: translateY(-5px);
  box-shadow: var(--elev-2);
}

/* ---------- Encabezado de sección ---------- */
.cab {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
}
.cab-eyebrow {
  font-family: var(--dato);
  font-size: .74rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--marca);
  margin: 0 0 .45rem;
}
.cab-titulo {
  font-family: var(--display);
  font-size: clamp(1.6rem, 1.1rem + 2vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -.025em;
  font-weight: 500;
  color: var(--tinta-1);
  margin: 0;
}
.cab-intro {
  color: var(--tinta-2);
  margin: .6rem 0 0;
  max-width: 56ch;
  line-height: 1.6;
}

/* ---------- Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  padding: .68rem 1.4rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--hairline-2);
  background: var(--superficie);
  color: var(--tinta-2);
  font-size: .92rem;
  font-family: var(--texto);
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(18,53,91,.05);
  transition: transform .3s var(--curva), box-shadow .3s var(--curva),
              border-color .2s ease, background .2s ease, color .2s ease;
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--elev-1);
  border-color: var(--marca-2);
  color: var(--marca);
}
.btn--primario {
  background: var(--marca);
  border-color: var(--marca);
  color: #fff;
  font-weight: 600;
}
.btn--primario:hover { background: #1a4a7a; border-color: #1a4a7a; color: #fff; }
.btn--grande { padding: .85rem 1.9rem; font-size: 1rem; }

/* ---------- Chips / filtros ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .82rem;
  padding: .42rem .95rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--hairline-2);
  background: var(--superficie);
  color: var(--tinta-2);
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.chip:hover { border-color: var(--marca-2); color: var(--marca); }
.chip--activo {
  background: var(--marca);
  border-color: var(--marca);
  color: #fff;
}

/* ---------- Insignias de estado ---------- */
.insignia {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-family: var(--dato);
  font-size: .68rem;
  letter-spacing: .05em;
  padding: .22rem .62rem;
  border-radius: var(--r-pill);
  font-weight: 600;
}
.insignia--disponible { background: rgba(0,149,179,.14);  color: #006b80; }
.insignia--apartado   { background: rgba(184,125,21,.17); color: #7a5310; }
.insignia--vendido    { background: rgba(143,52,201,.14); color: #6b1f9c; }
.insignia--oro        { background: var(--oro);           color: #3a2f0a; }
.insignia--neutra     { background: var(--marca-suave);   color: var(--marca); }

/* ---------- HERO ---------- */
.hero-c {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: clamp(1.75rem, 4vw, 4rem);
  padding: clamp(2rem, 5vw, 4.5rem);
  background: var(--superficie);
  border: 1px solid var(--hairline);
  border-radius: var(--r-xl);
  box-shadow: var(--elev-2);
  margin-bottom: clamp(2.5rem, 7vw, 5.5rem);
  position: relative;
  overflow: hidden;
}
/* Velo de color muy tenue detrás del texto, para dar profundidad */
.hero-c::before {
  content: "";
  position: absolute;
  top: -35%; right: -10%;
  width: 60%; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(47,128,237,.09), transparent 62%);
  pointer-events: none;
}
.hero-c-etiqueta {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem 1rem;
  border-radius: var(--r-pill);
  background: var(--marca-suave);
  color: var(--marca);
  font-family: var(--dato);
  font-size: .76rem;
  margin-bottom: 1.4rem;
}
.hero-c-punto {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 3px rgba(29,107,82,.16);
}
.hero-c-titulo {
  font-family: var(--display);
  font-size: clamp(2.2rem, 1.2rem + 4vw, 4rem);
  line-height: 1.03;
  letter-spacing: -.032em;
  font-weight: 500;
  color: var(--tinta-1);
  margin: 0 0 1.2rem;
  text-wrap: balance;
}
.hero-c-titulo em { font-style: normal; color: var(--marca); }
.hero-c-bajada {
  color: var(--tinta-2);
  font-size: clamp(1rem, .95rem + .2vw, 1.1rem);
  line-height: 1.62;
  max-width: 48ch;
  margin: 0 0 2rem;
}
.hero-c-buscador {
  display: flex;
  gap: .4rem;
  padding: .4rem;
  background: var(--superficie-2);
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  max-width: 560px;
  flex-wrap: wrap;
}
.hero-c-buscador input,
.hero-c-buscador select {
  flex: 1 1 150px;
  min-width: 0;
  background: transparent;
  border: 0;
  color: var(--tinta-1);
  font-size: .95rem;
  padding: .66rem 1rem;
  font-family: var(--texto);
}
.hero-c-buscador input::placeholder { color: var(--tinta-3); }
.hero-c-atajos { display: flex; gap: 1.25rem; margin-top: 1.2rem; flex-wrap: wrap; }
.hero-c-atajos a {
  color: var(--tinta-2);
  font-size: .88rem;
  text-decoration: none;
  border-bottom: 1px solid var(--hairline-2);
  padding-bottom: 2px;
  transition: color .2s, border-color .2s;
}
.hero-c-atajos a:hover { color: var(--marca-2); border-color: var(--marca-2); }

.hero-c-cifras {
  display: flex;
  gap: clamp(1.25rem, 3vw, 2.75rem);
  margin-top: 2.25rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--hairline);
  flex-wrap: wrap;
}
.hero-c-cifra-n {
  font-family: var(--dato);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--marca);
  line-height: 1;
  display: block;
}
.hero-c-cifra-t {
  color: var(--tinta-3);
  font-size: .78rem;
  margin-top: .3rem;
  display: block;
}

/* Destacado del hero */
.hero-c-destacado {
  position: relative;
  display: block;
  border-radius: var(--r-l);
  overflow: hidden;
  border: 1px solid var(--hairline);
  background: var(--superficie-2);
  text-decoration: none;
  box-shadow: var(--elev-2);
  transition: transform .45s var(--curva), box-shadow .45s var(--curva);
}
.hero-c-destacado:hover { transform: translateY(-6px); box-shadow: var(--elev-3); }
.hero-c-destacado img {
  width: 100%;
  aspect-ratio: 4 / 3.2;
  object-fit: cover;
  display: block;
  transition: transform .7s var(--curva);
}
.hero-c-destacado:hover img { transform: scale(1.05); }
.hero-c-destacado-vacio {
  aspect-ratio: 4 / 3.2;
  display: grid; place-items: center;
  font-size: 2.6rem; color: var(--tinta-3);
}
.hero-c-info {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.4rem;
  background: linear-gradient(to top, rgba(15,23,35,.92) 15%, rgba(15,23,35,.6) 55%, transparent);
}
.hero-c-info-tag {
  font-family: var(--dato);
  font-size: .66rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--oro);
  display: block;
  margin-bottom: .3rem;
}
.hero-c-info h3 {
  font-family: var(--display);
  color: #fff;
  font-size: 1.15rem;
  font-weight: 500;
  margin: 0 0 .45rem;
  line-height: 1.25;
}
.hero-c-info-datos { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; }
.hero-c-precio { font-family: var(--dato); color: #fff; font-size: 1.25rem; font-weight: 700; }
.hero-c-meta { color: rgba(255,255,255,.78); font-size: .84rem; font-family: var(--dato); }

@media (max-width: 900px) {
  .hero-c { grid-template-columns: 1fr; }
  .hero-c-visual { order: -1; }
}

/* ---------- TARJETA DE PROPIEDAD ---------- */
.prop {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--superficie);
  border: 1px solid var(--hairline);
  border-radius: var(--r-m);
  overflow: hidden;
  box-shadow: var(--elev-1);
  transition: transform .35s var(--curva), box-shadow .35s var(--curva);
}
.prop:hover { transform: translateY(-5px); box-shadow: var(--elev-2); }
.prop-foto {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--superficie-2);
}
.prop-foto img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .7s var(--curva);
}
.prop:hover .prop-foto img { transform: scale(1.06); }
.prop-foto--vacia { display: grid; place-items: center; font-size: 1.9rem; color: var(--tinta-3); }
.prop-marcas {
  position: absolute;
  top: .7rem; left: .7rem; right: .7rem;
  display: flex; gap: .35rem; flex-wrap: wrap;
  z-index: 2;
}
.prop-cuerpo {
  padding: .95rem 1.1rem 1.15rem;
  display: flex; flex-direction: column; gap: .35rem;
  flex: 1;
}
.prop-titulo {
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.32;
  margin: 0;
}
.prop-titulo a { color: var(--tinta-1); text-decoration: none; }
/* El enlace cubre toda la tarjeta: se puede tocar en cualquier punto */
.prop-titulo a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.prop:hover .prop-titulo a { color: var(--marca); }
.prop-lugar { color: var(--tinta-3); font-size: .84rem; margin: 0; }
.prop-pie {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .7rem;
  margin-top: auto;
  padding-top: .8rem;
  border-top: 1px solid var(--hairline);
}
.prop-precio { font-family: var(--dato); font-size: 1.05rem; font-weight: 700; color: var(--marca); }
.prop-precio span { font-size: .66rem; color: var(--tinta-3); font-weight: 400; margin-left: .15rem; }
.prop-sup { font-family: var(--dato); font-size: .82rem; color: var(--tinta-3); }

.rejilla-prop {
  display: grid;
  /* auto-fit (no auto-fill): las tarjetas se estiran para llenar el
     ancho en vez de dejar columnas vacías a la derecha cuando hay
     pocas publicaciones. */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}

/* ---------- SECCIÓN ---------- */
.bloque {
  margin-bottom: clamp(2.5rem, 7vw, 5.5rem);
}
.bloque--panel {
  background: var(--superficie);
  border: 1px solid var(--hairline);
  border-radius: var(--r-xl);
  box-shadow: var(--elev-1);
  padding: clamp(1.5rem, 4vw, 3.25rem);
}

/* ---------- MÉTRICAS (panel del dueño) ---------- */
.metricas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: clamp(.85rem, 1.6vw, 1.15rem);
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.metrica {
  background: var(--superficie);
  border: 1px solid var(--hairline);
  border-radius: var(--r-l);
  box-shadow: var(--elev-1);
  padding: 1.35rem;
  transition: transform .35s var(--curva), box-shadow .35s var(--curva);
}
.metrica:hover { transform: translateY(-3px); box-shadow: var(--elev-2); }
.metrica-etiqueta {
  display: flex; align-items: center; gap: .4rem;
  font-size: .8rem; color: var(--tinta-3); margin: 0 0 .75rem;
}
.metrica-punto { width: 7px; height: 7px; border-radius: 50%; background: var(--marca-2); }
.metrica--ok    .metrica-punto { background: var(--ok); }
.metrica--aviso .metrica-punto { background: var(--aviso); }
.metrica--oro   .metrica-punto { background: var(--oro); }
.metrica-n {
  font-family: var(--dato);
  font-size: clamp(1.7rem, 1.2rem + 1.4vw, 2.4rem);
  font-weight: 700; line-height: 1;
  letter-spacing: -.03em; color: var(--marca);
  display: block;
}
.metrica-pie { color: var(--tinta-3); font-size: .82rem; margin: .55rem 0 0; line-height: 1.45; }
.metrica-barra {
  height: 6px; border-radius: var(--r-pill);
  background: var(--superficie-2);
  overflow: hidden; margin-top: .9rem;
  border: 1px solid var(--hairline);
}
.metrica-barra-relleno {
  height: 100%;
  background: var(--marca-2);
  border-radius: var(--r-pill);
  transition: width .9s var(--curva);
}

/* ---------- LISTAS (contactos, publicaciones) ---------- */
.lista { display: grid; gap: .6rem; }
.lista-item {
  display: flex; align-items: center; gap: .9rem;
  padding: .85rem 1rem;
  border-radius: var(--r-s);
  background: var(--superficie-2);
  border: 1px solid transparent;
  transition: background .2s, border-color .2s, transform .3s var(--curva);
}
.lista-item:hover {
  background: var(--superficie);
  border-color: var(--hairline-2);
  transform: translateX(3px);
}
.avatar {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  border-radius: 11px;
  display: grid; place-items: center;
  font-family: var(--dato); font-weight: 700;
  color: var(--marca);
  background: var(--marca-suave);
}
.lista-cuerpo { min-width: 0; flex: 1; }
.lista-nombre { color: var(--tinta-1); font-weight: 600; font-size: .94rem; }
.lista-meta {
  color: var(--tinta-3); font-size: .8rem; margin-top: .1rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---------- TESTIMONIOS ---------- */
.testi {
  background: var(--superficie);
  border: 1px solid var(--hairline);
  border-radius: var(--r-l);
  box-shadow: var(--elev-1);
  padding: 1.5rem;
}
.testi-texto { color: var(--tinta-2); line-height: 1.6; margin: 0 0 1.1rem; }
.testi-autor { display: flex; align-items: center; gap: .75rem; }
.testi-nombre { color: var(--tinta-1); font-weight: 600; font-size: .92rem; }
.testi-rol { color: var(--oro-texto); font-size: .78rem; }

/* ---------- VACÍO ---------- */
.vacio-c {
  text-align: center;
  padding: clamp(2rem, 5vw, 3.5rem) 1.5rem;
  color: var(--tinta-2);
  border: 1px dashed var(--hairline-2);
  border-radius: var(--r-l);
  background: var(--superficie);
}

/* ---------- FOCO ACCESIBLE ---------- */
a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--marca-2);
  outline-offset: 3px;
  border-radius: var(--r-s);
}

@media (prefers-reduced-motion: reduce) {
  .sup-flota, .prop, .metrica, .btn, .hero-c-destacado,
  .lista-item, .prop-foto img, .hero-c-destacado img { transition: none; }
  .sup-flota:hover, .prop:hover, .metrica:hover, .btn:hover,
  .hero-c-destacado:hover, .lista-item:hover { transform: none; }
  .prop:hover .prop-foto img, .hero-c-destacado:hover img { transform: none; }
}

/* ---------- PANEL DEL DUEÑO ---------- */
.panel-c { padding-block: clamp(1rem, 2vw, 2rem); }
.panel-acciones { display: flex; gap: .6rem; flex-wrap: wrap; }
.panel-titulo {
  font-family: var(--display);
  font-size: 1.15rem; font-weight: 500;
  margin: 0 0 .2rem; color: var(--tinta-1);
}
.panel-sub { color: var(--tinta-3); font-size: .85rem; margin: 0 0 1.1rem; }

/* Fila de publicación en el panel */
.pub {
  display: grid;
  grid-template-columns: 84px 1fr auto;
  gap: 1rem;
  align-items: center;
  padding: .85rem;
  border-radius: var(--r-s);
  background: var(--superficie-2);
  border: 1px solid transparent;
  transition: background .2s, border-color .2s;
}
.pub:hover { background: var(--superficie); border-color: var(--hairline-2); }
.pub-foto {
  width: 84px; height: 64px;
  border-radius: var(--r-s);
  overflow: hidden;
  background: var(--superficie);
  border: 1px solid var(--hairline);
  display: grid; place-items: center;
  color: var(--tinta-3);
}
.pub-foto img { width: 100%; height: 100%; object-fit: cover; }
.pub-titulo {
  margin: 0 0 .15rem;
  font-size: 1rem; font-weight: 500;
  font-family: var(--display);
}
.pub-titulo a { color: var(--tinta-1); text-decoration: none; }
.pub-titulo a:hover { color: var(--marca-2); }
.pub-meta { color: var(--tinta-3); font-size: .82rem; margin: 0; }
.pub-datos {
  font-family: var(--dato);
  font-size: .82rem; color: var(--tinta-2);
  margin: .3rem 0 0;
  display: flex; gap: .7rem; flex-wrap: wrap;
}
.pub-acciones { display: flex; gap: .45rem; align-items: center; flex-wrap: wrap; }

.panel-c select, .panel-c input[type="text"], .panel-c input[type="search"] {
  background: var(--superficie);
  border: 1px solid var(--hairline-2);
  color: var(--tinta-1);
  border-radius: var(--r-s);
  padding: .5rem .75rem;
  font-size: .88rem;
  font-family: var(--texto);
}

@media (max-width: 560px) {
  .pub { grid-template-columns: 64px 1fr; }
  .pub-acciones { grid-column: 1 / -1; }
  .pub-foto { width: 64px; height: 50px; }
}

/* ---------- Detalles de la tarjeta de propiedad ---------- */
.prop-verificado { color: var(--oro-texto); font-weight: 500; }
.prop-razon {
  color: var(--tinta-2);
  font-size: .85rem;
  line-height: 1.5;
  margin: .15rem 0 0;
  padding-left: .6rem;
  border-left: 2px solid var(--marca-suave);
}
.prop-folio {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-top: .65rem;
  font-family: var(--dato);
  font-size: .72rem;
  color: var(--tinta-3);
}
.prop-folio .fav {
  position: relative;
  z-index: 2;            /* por encima del enlace que cubre la tarjeta */
  background: transparent;
  border: 1px solid var(--hairline-2);
  border-radius: var(--r-pill);
  color: var(--tinta-2);
  padding: .28rem .7rem;
  font-size: .75rem;
  cursor: pointer;
  transition: color .2s, border-color .2s, background .2s;
}
.prop-folio .fav:hover { color: var(--oro-texto); border-color: var(--oro); background: rgba(212,175,55,.09); }
.prop-folio .fav[aria-pressed="true"] { color: var(--oro-texto); border-color: var(--oro); background: rgba(212,175,55,.14); }

/* ---------- CATÁLOGO ---------- */
.catalogo-marco {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  align-items: start;
}
.catalogo-filtros {
  background: var(--superficie);
  border: 1px solid var(--hairline);
  border-radius: var(--r-l);
  box-shadow: var(--elev-1);
  padding: 1.25rem;
  position: sticky;
  top: calc(var(--cabecera, 72px) + 1rem);
}
.catalogo-filtros label { font-size: .8rem; color: var(--tinta-3); }
.catalogo-filtros input,
.catalogo-filtros select {
  width: 100%;
  background: var(--superficie-2);
  border: 1px solid var(--hairline-2);
  border-radius: var(--r-s);
  padding: .55rem .75rem;
  font-size: .88rem;
  color: var(--tinta-1);
  font-family: var(--texto);
}
.catalogo-limpiar {
  display: block;
  text-align: center;
  font-size: .84rem;
  color: var(--tinta-3);
  text-decoration: none;
  margin-top: .5rem;
}
.catalogo-limpiar:hover { color: var(--marca-2); }
.catalogo-encabezado {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

@media (max-width: 880px) {
  .catalogo-marco { grid-template-columns: 1fr; }
  .catalogo-filtros { position: static; }
}

/* ---------- Regla de seguridad para [hidden] ----------
   Cualquier regla con `display` explícito anula el display:none
   implícito del atributo `hidden`. Esta declaración garantiza que
   un elemento marcado como hidden se oculte siempre. */
[hidden] { display: none !important; }

/* ---------- Cola de subida de fotos ---------- */
.cola {
  list-style: none;
  margin: var(--e4, 1rem) 0 0;
  padding: 0;
  display: grid;
  gap: .4rem;
}
.cola-item {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .6rem .85rem;
  border-radius: var(--r-s);
  background: var(--superficie-2);
  border: 1px solid var(--hairline);
  font-size: .86rem;
  color: var(--tinta-2);
  transition: background .25s, border-color .25s, color .25s;
}
.cola-estado {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: .78rem;
  background: var(--superficie);
  border: 1px solid var(--hairline-2);
  color: var(--tinta-3);
}
.cola-nombre {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cola-peso { flex: 0 0 auto; font-family: var(--dato); font-size: .78rem; color: var(--tinta-3); }

.cola-item--activo {
  border-color: var(--marca-2);
  background: var(--marca-suave);
  color: var(--marca);
}
.cola-item--activo .cola-estado {
  border-color: var(--marca-2);
  color: var(--marca-2);
  animation: cola-latido 1s ease-in-out infinite;
}
.cola-item--listo { color: var(--tinta-2); }
.cola-item--listo .cola-estado {
  background: var(--ok);
  border-color: var(--ok);
  color: #fff;
}
.cola-item--error {
  border-color: rgba(163,43,40,.4);
  background: rgba(163,43,40,.06);
  color: #8a2422;
}
.cola-item--error .cola-estado {
  background: #a32b28;
  border-color: #a32b28;
  color: #fff;
  font-weight: 700;
}
@keyframes cola-latido {
  50% { transform: translateY(-2px); opacity: .65; }
}

/* ---------- Barra de progreso ---------- */
.progreso { margin-top: var(--e4, 1rem); }
.progreso-pista {
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--superficie-2);
  border: 1px solid var(--hairline);
  overflow: hidden;
}
.progreso-barra {
  height: 100%;
  width: 0;
  border-radius: var(--r-pill);
  background: var(--marca-2);
  transition: width .3s ease-out;
}
.progreso-texto {
  margin: .5rem 0 0;
  font-family: var(--dato);
  font-size: .82rem;
  color: var(--tinta-2);
  text-align: center;
}

/* ---------- Aviso de error de envío ---------- */
.envio-error {
  margin-top: var(--e4, 1rem);
  padding: .9rem 1.1rem;
  border-radius: var(--r-s);
  background: rgba(163,43,40,.07);
  border: 1px solid rgba(163,43,40,.3);
  border-left: 3px solid #a32b28;
  color: #8a2422;
  font-size: .9rem;
  line-height: 1.5;
}

@media (prefers-reduced-motion: reduce) {
  .cola-item--activo .cola-estado { animation: none; }
  .progreso-barra { transition: none; }
  .cola-item { transition: none; }
}

/* ---------- Selector Entrar / Crear cuenta ----------
   Control segmentado: las dos opciones viven dentro de una misma
   pista, así se lee que son excluyentes (antes parecían dos botones
   sueltos y se prestaba a confusión). */
.wizard-pestanas {
  display: flex;
  gap: .25rem;
  padding: .25rem;
  margin: 1rem 0 1.25rem;
  background: var(--superficie-2);
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
}
.wizard-pestana {
  flex: 1;
  padding: .6rem 1rem;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--tinta-2);
  font: inherit;
  font-size: .92rem;
  cursor: pointer;
  transition: background .25s, color .25s, box-shadow .25s;
}
.wizard-pestana:hover { color: var(--marca); }
.wizard-pestana--activa {
  background: var(--superficie);
  color: var(--marca);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(18,53,91,.12);
}

/* Panel de cuenta con más aire y jerarquía */
.wizard-cuenta > .wizard-nota {
  color: var(--tinta-2);
  line-height: 1.55;
  margin: 0;
}
.wizard-pestana-panel { gap: 1rem; }
.wizard-pestana-panel label {
  display: block;
  font-size: .88rem;
  color: var(--tinta-2);
  font-weight: 500;
}
.wizard-pestana-panel input {
  width: 100%;
  margin-top: .35rem;
  padding: .7rem .9rem;
  border: 1px solid var(--hairline-2);
  border-radius: var(--r-s);
  background: var(--superficie);
  font-size: .95rem;
  color: var(--tinta-1);
  font-family: var(--texto);
}
.wizard-pestana-panel input:focus {
  border-color: var(--marca-2);
  outline: none;
  box-shadow: 0 0 0 3px rgba(47,128,237,.14);
}
.wizard-pestana-panel small {
  display: block;
  margin-top: .3rem;
  font-size: .8rem;
  color: var(--tinta-3);
  font-weight: 400;
}
.wizard-pestana-panel .boton--primario,
.wizard-pestana-panel .btn--primario {
  margin-top: .4rem;
  width: 100%;
  padding: .8rem;
  border-radius: var(--r-pill);
}

/* ---------- FILTROS DEL CATÁLOGO ----------
   Antes se veían amontonados porque estas clases no tenían estilo
   en el sistema claro: los checkboxes quedaban encimados y las
   etiquetas se rompían en varias líneas. */
.catalogo-filtros-cuerpo { display: grid; gap: 1.1rem; }

/* Bloque simple: etiqueta arriba, campo abajo */
.filtro-bloque {
  display: block;
  font-size: .82rem;
  font-weight: 500;
  color: var(--tinta-2);
}
.filtro-bloque > input,
.filtro-bloque > select {
  display: block;
  width: 100%;
  margin-top: .35rem;
  padding: .55rem .7rem;
  font-size: .9rem;
  font-weight: 400;
  border: 1px solid var(--hairline-2);
  border-radius: var(--r-s);
  background: var(--superficie);
  color: var(--tinta-1);
  font-family: var(--texto);
}
.filtro-bloque > input:focus,
.filtro-bloque > select:focus {
  border-color: var(--marca-2);
  outline: none;
  box-shadow: 0 0 0 3px rgba(47,128,237,.13);
}

/* Grupo con recuadro: rangos y características */
.filtro-rango {
  border: 1px solid var(--hairline);
  border-radius: var(--r-s);
  padding: .85rem .9rem 1rem;
  margin: 0;
  background: var(--superficie-2);
}
.filtro-rango legend {
  font-size: .78rem;
  font-weight: 600;
  color: var(--tinta-2);
  padding: 0 .35rem;
  margin-left: -.35rem;
}

/* Dos campos lado a lado (mínimo / máximo) */
.filtro-rango .fila {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .55rem;
  margin-top: .3rem;
}
.filtro-rango .fila > label {
  display: block;
  font-size: .74rem;
  color: var(--tinta-3);
  font-weight: 400;
  min-width: 0;
}
.filtro-rango .fila input {
  display: block;
  width: 100%;
  margin-top: .25rem;
  padding: .45rem .55rem;
  font-size: .86rem;
  border: 1px solid var(--hairline-2);
  border-radius: var(--r-s);
  background: var(--superficie);
  color: var(--tinta-1);
  font-family: var(--dato);
}

/* Casillas: checkbox a la izquierda, texto en una sola línea */
.filtro-check {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: .86rem;
  font-weight: 400;
  color: var(--tinta-2);
  padding: .3rem 0;
  cursor: pointer;
  line-height: 1.3;
}
.filtro-check input[type="checkbox"] {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: var(--marca);
  cursor: pointer;
}
.filtro-check:hover { color: var(--marca); }

.catalogo-filtros-cuerpo .boton--primario,
.catalogo-filtros-cuerpo .btn--primario {
  width: 100%;
  margin-top: .25rem;
}

/* ---------- GALERÍA DE FOTOS (ficha) ----------
   Se integra como una tarjeta más del sistema, con altura acotada:
   antes ocupaba todo el ancho sin límite y se veía desproporcionada. */
.galeria-carrusel {
  background: var(--superficie);
  border: 1px solid var(--hairline);
  border-radius: var(--r-l);
  box-shadow: var(--elev-1);
  padding: .85rem;
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
}
.galeria-principal {
  position: relative;
  border-radius: var(--r-m);
  overflow: hidden;
  background: var(--superficie-2);
  aspect-ratio: 16 / 10;
  max-height: 460px;
}
/* Solo se ve la foto activa: sin el display:none, esta regla anulaba
   la de sitio.css y todas las fotos aparecían apiladas. */
.galeria-foto { display: none; width: 100%; height: 100%; object-fit: cover; }
.galeria-foto--activa { display: block; }

.galeria-flecha {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  color: var(--tinta-1);
  font-size: 1.15rem;
  cursor: pointer;
  box-shadow: var(--elev-1);
  transition: background .2s, transform .25s var(--curva);
}
.galeria-flecha:hover { background: #fff; transform: translateY(-50%) scale(1.06); }
.galeria-flecha--prev { left: .7rem; }
.galeria-flecha--next { right: .7rem; }

.galeria-contador {
  position: absolute;
  bottom: .7rem; right: .7rem;
  font-family: var(--dato);
  font-size: .74rem;
  padding: .25rem .7rem;
  border-radius: var(--r-pill);
  background: rgba(15,23,35,.72);
  color: #fff;
  backdrop-filter: blur(6px);
}

.galeria-miniaturas {
  display: flex;
  gap: .5rem;
  margin-top: .7rem;
  overflow-x: auto;
  padding-bottom: .2rem;
  scrollbar-width: thin;
}
.galeria-mini {
  flex: 0 0 auto;
  width: 78px; height: 58px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--r-s);
  overflow: hidden;
  background: var(--superficie-2);
  cursor: pointer;
  opacity: .62;
  transition: opacity .2s, border-color .2s, transform .25s var(--curva);
}
.galeria-mini:hover { opacity: 1; transform: translateY(-2px); }
.galeria-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.galeria-mini--activa { border-color: var(--marca); opacity: 1; }

@media (max-width: 560px) {
  .galeria-principal { aspect-ratio: 4 / 3; }
  .galeria-mini { width: 62px; height: 46px; }
}
@media (prefers-reduced-motion: reduce) {
  .galeria-flecha, .galeria-mini { transition: none; }
  .galeria-flecha:hover { transform: translateY(-50%); }
  .galeria-mini:hover { transform: none; }
}

/* ---------- Galería integrada en el visor de medios ----------
   Dentro del visor ya hay marco, borde y sombra: la galería no debe
   repetirlos. Así fotos, 360°, modelo 3D y AR comparten un mismo
   contenedor en vez de quedar en bloques sueltos con huecos. */
.galeria-carrusel--integrada {
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  margin: 0;
}
.galeria-carrusel--integrada .galeria-principal {
  border-radius: 0;
  aspect-ratio: auto;
  /* Misma altura que el panorama y el visor 3D, para que al cambiar
     de pestaña el marco no salte de tamaño. */
  height: min(58vh, 460px);
  max-height: none;
  background: #0f1723;
  /* Centra la foto: con imágenes verticales el "contain" deja franjas
     a los lados, y así quedan simétricas en vez de descuadradas. */
  display: flex;
  align-items: center;
  justify-content: center;
}
.galeria-carrusel--integrada .galeria-foto {
  object-fit: contain;   /* foto completa, sin recortar */
  background: #0f1723;
}
/* Las miniaturas flotan sobre la foto, dentro del mismo marco */
.galeria-carrusel--integrada .galeria-miniaturas {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  margin: 0;
  padding: .6rem .7rem;
  background: linear-gradient(to top, rgba(15,23,35,.88), rgba(15,23,35,0));
  gap: .45rem;
}
.galeria-carrusel--integrada .galeria-mini { border-color: rgba(255,255,255,.25); }
.galeria-carrusel--integrada .galeria-mini--activa { border-color: #fff; }
.galeria-carrusel--integrada .galeria-contador { bottom: 4.6rem; }

/* El panel de fotos hereda la altura del visor */
.visor-medios-panel[data-panel="fotos"] { position: relative; }
.visor-medios-panel[data-panel="fotos"] .galeria-carrusel--integrada { height: 100%; }

@media (max-width: 560px) {
  .galeria-carrusel--integrada .galeria-mini { width: 52px; height: 40px; }
  .galeria-carrusel--integrada .galeria-contador { bottom: 4rem; }
}

/* ---------- Galería en pantalla completa ----------
   El visor ya estiraba el panorama y el modelo 3D al entrar en
   pantalla completa, pero la galería es nueva y no estaba incluida:
   la foto se quedaba con su altura normal y abajo quedaba un gran
   espacio vacío. Estas reglas la hacen crecer con la pantalla. */
.visor-medios--completa .visor-medios-panel--activo[data-panel="fotos"] {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.visor-medios--completa .visor-medios-panel--activo .galeria-carrusel--integrada {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.visor-medios--completa .visor-medios-panel--activo .galeria-carrusel--integrada .galeria-principal {
  flex: 1;
  height: auto;          /* deja de mandar el min(58vh, 460px) */
  min-height: 0;
}
/* En pantalla completa la foto sigue siendo un ítem flex centrado:
   crece hasta llenar el espacio disponible sin deformarse ni recortarse. */
.visor-medios--completa .visor-medios-panel--activo .galeria-carrusel--integrada .galeria-foto--activa {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
/* Miniaturas ancladas abajo del todo, dentro del flujo */
.visor-medios--completa .visor-medios-panel--activo .galeria-carrusel--integrada .galeria-miniaturas {
  position: static;
  flex: 0 0 auto;
  background: rgba(15,23,35,.9);
  padding: .7rem 1rem;
}
/* Flechas y contador centrados respecto al área real de la foto */
.visor-medios--completa .visor-medios-panel--activo .galeria-carrusel--integrada .galeria-flecha { top: 50%; }
.visor-medios--completa .visor-medios-panel--activo .galeria-carrusel--integrada .galeria-contador { bottom: 1rem; }

/* Dentro del contenedor flex, la foto activa se comporta como ítem
   flexible y respeta el centrado sin desbordar. */
.galeria-carrusel--integrada .galeria-foto--activa {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  flex: 0 1 auto;
}


/* ---------- Seguridad: paneles no activos siempre ocultos ----------
   Cualquier regla con `display` explícito sobre un panel puede anular
   el `display:none` de .visor-medios-panel. Esto garantiza que al
   cambiar de pestaña solo se vea el panel elegido. */
.visor-medios-panel:not(.visor-medios-panel--activo) { display: none !important; }

/* ---------- Rejilla de ventajas ("Por qué aquí") ----------
   Son tarjetas de solo texto, más angostas que las de propiedad.
   Con un mínimo menor caben las 5 en una fila en pantallas grandes
   y bajan a 3, 2 y 1 de forma pareja al reducirse, sin dejar una
   tarjeta suelta al final. */
.rejilla-ventajas {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(.85rem, 1.6vw, 1.25rem);
}
@media (max-width: 1180px) { .rejilla-ventajas { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px)  { .rejilla-ventajas { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .rejilla-ventajas { grid-template-columns: 1fr; } }

/* ---------- Vista previa de fotos con opción de quitar ---------- */
.wizard-fotos-previa {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin-top: .9rem;
}
.wizard-foto {
  position: relative;
  margin: 0;
  border-radius: var(--r-s);
  overflow: hidden;
  border: 1px solid var(--hairline);
  background: var(--superficie-2);
  box-shadow: var(--elev-1);
}
.wizard-foto img {
  display: block;
  width: 132px;
  height: 96px;
  object-fit: cover;
}
.wizard-foto figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: .3rem .5rem;
  font-family: var(--dato);
  font-size: .66rem;
  color: #fff;
  background: linear-gradient(to top, rgba(15,23,35,.88), transparent);
}
/* Botón × para quitar una foto */
.wizard-foto-quitar {
  position: absolute;
  top: .3rem; right: .3rem;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(15,23,35,.72);
  color: #fff;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: background .2s, transform .25s var(--curva);
}
.wizard-foto-quitar:hover {
  background: #a32b28;
  transform: scale(1.1);
}
.wizard-fotos-total {
  flex: 1 0 100%;
  margin: .2rem 0 0;
  font-size: .82rem;
  color: var(--tinta-3);
}

/* Botón de acción dentro del aviso de error */
.envio-error { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.envio-error-accion {
  flex: 0 0 auto;
  border: 1px solid #a32b28;
  background: transparent;
  color: #8a2422;
  border-radius: var(--r-pill);
  padding: .4rem 1rem;
  font-size: .85rem;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.envio-error-accion:hover { background: #a32b28; color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .wizard-foto-quitar { transition: none; }
  .wizard-foto-quitar:hover { transform: none; }
}

/* ---------- Filtros plegables en móvil ----------
   El botón "☰ Filtros" y su JS ya existían, pero la regla de arriba
   (.catalogo-filtros-cuerpo { display: grid }) anulaba el ocultamiento:
   el panel quedaba desplegado y había que hacer scroll eterno antes de
   ver la primera propiedad. */
@media (max-width: 880px) {
  .catalogo-filtros-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    padding: .8rem 1rem;
    border: 1px solid var(--hairline-2);
    border-radius: var(--r-pill);
    background: var(--superficie);
    color: var(--tinta-1);
    font-size: .95rem;
    font-weight: 500;
    cursor: pointer;
    box-shadow: var(--elev-1);
  }
  .catalogo-filtros { padding: .75rem; position: static; }
  /* Plegado por defecto; se abre con el botón */
  .catalogo-filtros-cuerpo { display: none; }
  .catalogo-filtros--abierto .catalogo-filtros-cuerpo {
    display: grid;
    margin-top: .9rem;
  }
}
@media (min-width: 881px) {
  .catalogo-filtros-toggle { display: none; }
}

/* ---------- Buscador del hero en móvil ----------
   En pantalla angosta los tres controles no caben en una línea: con
   forma de píldora y wrap, el botón se salía del marco. En móvil pasa
   a columna con esquinas normales, que sí encaja. */
@media (max-width: 720px) {
  .hero-c-buscador {
    flex-direction: column;
    align-items: stretch;
    border-radius: var(--r-m);
    gap: .5rem;
    padding: .5rem;
    max-width: none;
  }
  .hero-c-buscador input,
  .hero-c-buscador select {
    flex: 1 1 auto;
    width: 100%;
    background: var(--superficie);
    border: 1px solid var(--hairline-2);
    border-radius: var(--r-s);
    padding: .7rem .85rem;
  }
  .hero-c-buscador .btn,
  .hero-c-buscador button[type="submit"] {
    width: 100%;
    justify-content: center;
  }
}

/* ============================================================
   AJUSTES GENERALES PARA MÓVIL
   Reglas de seguridad para que ninguna vista se desborde
   horizontalmente ni obligue a hacer zoom.
   ============================================================ */

/* Nada puede empujar la página a lo ancho */
/* Solo en el body y solo en móvil: `overflow-x: hidden` en <html> crea
   un contexto de desplazamiento que confina los elementos con
   position:fixed — por eso el intro se recortaba a media pantalla en
   escritorio. En móvil sí hace falta para evitar desbordes laterales. */
html, body { max-width: 100%; }
@media (max-width: 720px) {
  body { overflow-x: hidden; }
}

/* Las imágenes y medios nunca superan su contenedor */
img, video, canvas, svg, iframe { max-width: 100%; height: auto; }

/* Las tablas largas se desplazan solas en vez de romper el ancho */
table { display: block; overflow-x: auto; max-width: 100%; }

@media (max-width: 720px) {
  /* Títulos largos: partir palabras antes que desbordar */
  h1, h2, h3, .cab-titulo, .hero-c-titulo, .prop-titulo {
    overflow-wrap: break-word;
    hyphens: auto;
  }

  /* Los campos de formulario llenan el ancho disponible */
  input, select, textarea { max-width: 100%; }

  /* Objetivos táctiles cómodos (mínimo 44px de alto) */
  .btn, .chip, .boton, button, .nav-publicar { min-height: 44px; }

  /* Barra superior: los enlaces se desplazan en vez de amontonarse */
  .navegacion { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .navegacion::-webkit-scrollbar { display: none; }

  /* Secciones con menos aire lateral para ganar espacio útil */
  .bloque--panel { padding: 1.25rem 1rem; border-radius: var(--r-l); }
  .hero-c { padding: 1.5rem 1.15rem; border-radius: var(--r-l); }

  /* Cifras del hero: dos por fila en vez de cuatro apretadas */
  .hero-c-cifras { gap: 1.1rem 1.75rem; }

  /* Encabezados de sección: el botón baja debajo del título */
  .cab { flex-direction: column; align-items: flex-start; gap: .9rem; }
  .cab .btn { width: 100%; justify-content: center; }
}

@media (max-width: 480px) {
  /* Vista previa de fotos: dos por fila */
  .wizard-foto img { width: calc(50vw - 2.2rem); height: 84px; }
  /* Panel del dueño: acciones a lo ancho */
  .panel-acciones .btn { flex: 1; justify-content: center; }
}

/* ============================================================
   ETIQUETAS FLOTANTES DEL MAPA
   En reposo solo se ve la insignia de estado: con muchas
   propiedades juntas, mostrar nombre y precio en todas dejaba el
   mapa ilegible. Al tocar, la tarjeta se despliega con los datos.
   ============================================================ */
.mapa-etiqueta {
  --acento-etiqueta: var(--ok);
  position: relative;
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: var(--r-pill);
  box-shadow: none;
  cursor: pointer;
  max-width: none;
  transition: box-shadow .3s var(--curva), background .3s var(--curva),
              padding .35s var(--curva), gap .35s var(--curva);
}

/* --- Insignia de estado: lo único visible en reposo --- */
.mapa-etiqueta-estado {
  position: static;
  flex: 0 0 auto;
  order: -1;                       /* siempre a la izquierda */
  font-family: var(--dato);
  font-size: .64rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  font-weight: 700;
  padding: .3rem .7rem;
  border-radius: var(--r-pill);
  background: var(--acento-etiqueta);
  color: #fff;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(15,23,35,.3);
  transition: transform .25s var(--curva), box-shadow .25s var(--curva);
}
.mapa-etiqueta:hover .mapa-etiqueta-estado {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(15,23,35,.4);
}

/* --- Contenido plegado: foto y datos ocultos --- */
.mapa-etiqueta-foto,
.mapa-etiqueta-datos {
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateX(-8px);
  transition: max-width .38s var(--curva),
              opacity .28s ease,
              transform .38s var(--curva),
              margin .38s var(--curva);
  margin: 0;
  pointer-events: none;
}

/* --- Desplegada --- */
.mapa-etiqueta--abierta {
  background: rgba(255,255,255,.97);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--acento-etiqueta);
  padding: .35rem .65rem .35rem .35rem;
  gap: .5rem;
  box-shadow: 0 3px 8px rgba(15,23,35,.24), 0 12px 28px rgba(15,23,35,.2);
  backdrop-filter: blur(6px);
  z-index: 6;
}
.mapa-etiqueta--abierta .mapa-etiqueta-foto {
  max-width: 46px;
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}
.mapa-etiqueta--abierta .mapa-etiqueta-datos {
  max-width: 190px;
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}
/* Al desplegarse, la insignia se hace pequeña y se va arriba */
.mapa-etiqueta--abierta .mapa-etiqueta-estado {
  position: absolute;
  top: -9px;
  right: -6px;
  order: 0;
  font-size: .56rem;
  padding: .14rem .5rem;
}
.mapa-etiqueta--abierta .mapa-etiqueta-estado,
.mapa-etiqueta--abierta:hover .mapa-etiqueta-estado { transform: none; }

/* Puntita inferior, solo cuando está abierta */
.mapa-etiqueta--abierta::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -7px;
  width: 12px; height: 12px;
  transform: translateX(-50%) rotate(45deg);
  background: rgba(255,255,255,.97);
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

/* Los mismos colores que las parcelas del mapa: así se relaciona de
   un vistazo cada etiqueta con su terreno dibujado. */
/* Versión un punto más oscura que la parcela: la etiqueta lleva
   texto blanco encima y necesita contraste para leerse. */
.mapa-etiqueta--disponible { --acento-etiqueta: var(--disponible); }
.mapa-etiqueta--apartado   { --acento-etiqueta: var(--apartado); }
.mapa-etiqueta--vendido    { --acento-etiqueta: var(--vendido); }
.mapa-etiqueta--apartado .mapa-etiqueta-estado { color: #fff; }

.mapa-etiqueta-foto {
  flex: 0 0 auto;
  width: 46px; height: 46px;
  border-radius: 7px;
  background: var(--superficie-2);
}
.mapa-etiqueta-foto img {
  width: 46px; height: 46px;
  object-fit: cover;
  display: block;
  border-radius: 7px;
}

.mapa-etiqueta-datos {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.mapa-etiqueta-titulo {
  font-size: .74rem;
  color: var(--tinta-2);
  line-height: 1.2;
  max-width: 175px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mapa-etiqueta-precio {
  font-family: var(--dato);
  font-size: .9rem;
  font-weight: 700;
  color: var(--marca);
  line-height: 1.15;
  white-space: nowrap;
}
.mapa-etiqueta-meta {
  font-family: var(--dato);
  font-size: .68rem;
  color: var(--tinta-3);
  line-height: 1.15;
  white-space: nowrap;
}
.mapa-etiqueta-ok { color: var(--oro-texto); font-weight: 700; }

/* Pista de que hay más información al tocar */
.mapa-etiqueta:not(.mapa-etiqueta--abierta) .mapa-etiqueta-estado::after {
  content: " ›";
  opacity: .75;
}

@media (max-width: 720px) {
  .mapa-etiqueta--abierta .mapa-etiqueta-datos { max-width: 140px; }
  .mapa-etiqueta-titulo { display: none; }   /* en móvil basta precio y medida */
  .mapa-etiqueta-estado { font-size: .6rem; padding: .26rem .6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .mapa-etiqueta,
  .mapa-etiqueta-foto,
  .mapa-etiqueta-datos,
  .mapa-etiqueta-estado { transition: none; }
  .mapa-etiqueta:hover .mapa-etiqueta-estado { transform: none; }
}

/* ============================================================
   TARJETA COMPACTA EN MÓVIL
   En vertical, una tarjeta con foto grande ocupa media pantalla:
   con 300 publicaciones el catálogo sería interminable. En móvil
   pasa a formato horizontal (foto pequeña + datos al lado), que
   permite ver 5 o 6 propiedades de un vistazo sin perder nada.
   ============================================================ */
@media (max-width: 720px) {
  .rejilla-prop { gap: .65rem; grid-template-columns: 1fr; }

  .prop {
    display: grid;
    grid-template-columns: 116px 1fr;
    align-items: stretch;
    border-radius: var(--r-m);
  }
  .prop-foto {
    aspect-ratio: auto;
    height: 100%;
    min-height: 108px;
    border-radius: 0;
  }
  .prop-foto--vacia { font-size: 1.4rem; }

  /* Las marcas caben sobre una foto chica: solo el estado, arriba */
  .prop-marcas {
    top: .35rem; left: .35rem; right: auto;
    flex-direction: column;
    gap: .25rem;
  }
  .prop-marcas .insignia {
    font-size: .58rem;
    padding: .15rem .45rem;
  }
  /* Con poco espacio, la insignia de 3D estorba más de lo que aporta */
  .prop-marcas .insignia--neutra { display: none; }

  .prop-cuerpo {
    padding: .6rem .75rem .6rem .85rem;
    gap: .2rem;
    justify-content: center;
  }
  .prop-titulo {
    font-size: .92rem;
    line-height: 1.25;
    /* Máximo dos líneas: los títulos largos no descuadran la lista */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .prop-lugar {
    font-size: .76rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .prop-pie {
    padding-top: .45rem;
    margin-top: .35rem;
  }
  .prop-precio { font-size: .95rem; }
  .prop-sup { font-size: .74rem; }

  /* Folio y guardar en la misma línea, compactos */
  .prop-folio {
    margin-top: .35rem;
    font-size: .66rem;
  }
  .prop-folio .fav { padding: .2rem .55rem; font-size: .7rem; }

  /* La explicación del recomendador se oculta: ocupa demasiado */
  .prop-razon { display: none; }
}

/* Pantallas muy angostas: aún más compacto */
@media (max-width: 400px) {
  .prop { grid-template-columns: 96px 1fr; }
  .prop-foto { min-height: 96px; }
  .prop-titulo { font-size: .87rem; }
}

/* ============================================================
   TARJETA COMPACTA EN MÓVIL
   En vertical, una tarjeta con foto grande ocupa media pantalla:
   con 300 publicaciones el catálogo sería interminable. En móvil
   pasa a formato horizontal (foto pequeña + datos al lado), que
   permite ver 5 o 6 propiedades de un vistazo sin perder nada.
   ============================================================ */
@media (max-width: 720px) {
  .rejilla-prop { gap: .65rem; grid-template-columns: 1fr; }

  .prop {
    display: grid;
    grid-template-columns: 116px 1fr;
    align-items: stretch;
    border-radius: var(--r-m);
  }
  .prop-foto {
    aspect-ratio: auto;
    height: 100%;
    min-height: 108px;
    border-radius: 0;
  }
  .prop-foto--vacia { font-size: 1.4rem; }

  /* Las marcas caben sobre una foto chica: solo el estado, arriba */
  .prop-marcas {
    top: .35rem; left: .35rem; right: auto;
    flex-direction: column;
    gap: .25rem;
  }
  .prop-marcas .insignia {
    font-size: .58rem;
    padding: .15rem .45rem;
  }
  /* Con poco espacio, la insignia de 3D estorba más de lo que aporta */
  .prop-marcas .insignia--neutra { display: none; }

  .prop-cuerpo {
    padding: .6rem .75rem .6rem .85rem;
    gap: .2rem;
    justify-content: center;
  }
  .prop-titulo {
    font-size: .92rem;
    line-height: 1.25;
    /* Máximo dos líneas: los títulos largos no descuadran la lista */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .prop-lugar {
    font-size: .76rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .prop-pie {
    padding-top: .45rem;
    margin-top: .35rem;
  }
  .prop-precio { font-size: .95rem; }
  .prop-sup { font-size: .74rem; }

  /* Folio y guardar en la misma línea, compactos */
  .prop-folio {
    margin-top: .35rem;
    font-size: .66rem;
  }
  .prop-folio .fav { padding: .2rem .55rem; font-size: .7rem; }

  /* La explicación del recomendador se oculta: ocupa demasiado */
  .prop-razon { display: none; }
}

/* Pantallas muy angostas: aún más compacto */
@media (max-width: 400px) {
  .prop { grid-template-columns: 96px 1fr; }
  .prop-foto { min-height: 96px; }
  .prop-titulo { font-size: .87rem; }
}

/* ============================================================
   PANTALLA DE BIENVENIDA
   Portada a pantalla completa con video (o cielo animado) de
   fondo y dos accesos. Se muestra una vez por sesión.
   ============================================================ */
.bienvenida {
  /* fixed respecto a la ventana: el intro vive fuera del contenedor
     central del layout para que ningún max-width lo recorte. */
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;   /* en móvil descuenta la barra del navegador */
  z-index: 200;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #0a1420;
  animation: bienvenida-entra .6s ease-out;
}
.bienvenida[hidden] { display: none; }
.bienvenida--saliendo {
  animation: bienvenida-sale .55s cubic-bezier(.6,0,.8,.2) forwards;
  pointer-events: none;
}
@keyframes bienvenida-entra { from { opacity: 0; } to { opacity: 1; } }
@keyframes bienvenida-sale {
  to { opacity: 0; transform: scale(1.08); }
}

.bienvenida-fondo { position: absolute; inset: 0; }
.bienvenida-video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* Velo para que el texto se lea sobre cualquier imagen */
/* Imagen satelital de fondo */
.bienvenida-imagen {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  /* Ligero acercamiento y desenfoque: la foto queda como textura de
     fondo y el texto de encima se lee sin competir con el detalle. */
  transform: scale(1.04);
  /* Sin apagar el color: la foto satelital se muestra tal cual, solo
     con un punto más de contraste para que el detalle se aprecie. */
  filter: contrast(1.06) saturate(1.04);
  animation: bienvenida-acerca 26s ease-out forwards;
}
@keyframes bienvenida-acerca {
  from { transform: scale(1.04); }
  to   { transform: scale(1.11); }
}

/* Tratamiento sobre la foto: viñeta + oscurecido central donde va el
   texto, con un tinte verde-azulado que amarra con la marca. Los
   bordes quedan más claros para que la imagen siga reconociéndose. */
.bienvenida-velo {
  position: absolute;
  inset: 0;
  /* Velo ligero: la foto satelital debe verse, no quedar tapada.
     Solo se oscurece lo justo detrás del texto y en los bordes; el
     resto de la imagen queda a la vista con su color real. */
  background:
    /* sombra suave detrás del bloque de texto, para que se lea */
    radial-gradient(58% 42% at 50% 47%, rgba(4,10,8,.62) 0%, rgba(4,10,8,.34) 55%, transparent 78%),
    /* viñeta discreta en las esquinas */
    radial-gradient(150% 120% at 50% 50%, transparent 48%, rgba(4,10,8,.45) 100%),
    /* refuerzo arriba (barra de navegación) y abajo, sin tapar el centro */
    linear-gradient(to bottom, rgba(4,10,8,.45) 0%, transparent 26%, transparent 70%, rgba(4,10,8,.55) 100%);
}

/* --- Cielo animado (sin video) --- */
.bienvenida-cielo {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    #16385f 0%, #2d6591 32%, #7fa9c4 58%, #d9a870 78%, #e8c99a 100%);
}
.bienvenida-nube {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.5);
  filter: blur(38px);
  will-change: transform;
}
.bienvenida-nube--1 {
  width: 62%; height: 26%;
  left: -22%; top: 34%;
  animation: bienvenida-deriva 46s linear infinite;
}
.bienvenida-nube--2 {
  width: 48%; height: 20%;
  left: -30%; top: 52%;
  background: rgba(255,240,220,.42);
  animation: bienvenida-deriva 62s linear infinite 6s;
}
.bienvenida-nube--3 {
  width: 74%; height: 18%;
  left: -40%; top: 22%;
  background: rgba(255,255,255,.3);
  animation: bienvenida-deriva 78s linear infinite 14s;
}
@keyframes bienvenida-deriva {
  to { transform: translateX(180vw); }
}
/* Curvatura del horizonte, como visto desde arriba */
.bienvenida-tierra {
  position: absolute;
  left: 50%; bottom: -58%;
  width: 190%; aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, #6f9560 0%, #4a6b46 45%, #2c4430 75%);
  box-shadow: 0 -18px 90px rgba(255,220,170,.4);
}

/* --- Contenido --- */
.bienvenida-contenido {
  position: relative;
  text-align: center;
  padding: 2rem 1.5rem;
  max-width: 640px;
}
.bienvenida-region {
  font-family: var(--dato);
  font-size: .76rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
  margin: 0 0 1rem;
}
.bienvenida-titulo {
  font-family: var(--display);
  font-size: clamp(2.6rem, 1.4rem + 6vw, 5.2rem);
  line-height: .96;
  letter-spacing: -.035em;
  font-weight: 500;
  color: #fff;
  margin: 0 0 1.1rem;
  text-shadow: 0 4px 30px rgba(0,0,0,.4);
}
.bienvenida-bajada {
  color: rgba(255,255,255,.82);
  font-size: clamp(.95rem, .9rem + .3vw, 1.1rem);
  line-height: 1.55;
  margin: 0 auto 2.2rem;
  max-width: 42ch;
  text-shadow: 0 2px 14px rgba(0,0,0,.45);
}
.bienvenida-acciones {
  display: flex;
  gap: .7rem;
  justify-content: center;
  flex-wrap: wrap;
}
.bienvenida-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: .8rem 1.9rem;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255,255,255,.4);
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(10px);
  color: #fff;
  text-decoration: none;
  font-size: .96rem;
  transition: background .25s, transform .3s var(--curva), border-color .25s;
}
.bienvenida-btn:hover {
  background: rgba(255,255,255,.2);
  border-color: rgba(255,255,255,.7);
  transform: translateY(-2px);
}
.bienvenida-btn--principal {
  background: #fff;
  border-color: #fff;
  color: var(--marca);
  font-weight: 600;
}
.bienvenida-btn--principal:hover { background: #fff; color: var(--marca); }

.bienvenida-saltar {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: 2.4rem;
  background: transparent;
  border: 0;
  color: rgba(255,255,255,.7);
  font-size: .88rem;
  cursor: pointer;
  padding: .5rem 1rem;
  transition: color .2s;
}
.bienvenida-saltar:hover { color: #fff; }
.bienvenida-saltar span { animation: bienvenida-flecha 1.8s ease-in-out infinite; }
@keyframes bienvenida-flecha {
  50% { transform: translateY(4px); }
}

/* Mientras el intro está visible, el fondo no se desplaza */
body.bienvenida-activo { overflow: hidden; }

@media (max-width: 560px) {
  .bienvenida-acciones { flex-direction: column; }
  .bienvenida-btn { width: 100%; }
  .bienvenida-saltar { margin-top: 1.8rem; }
}

@media (prefers-reduced-motion: reduce) {
  .bienvenida, .bienvenida--saliendo { animation: none; }
  .bienvenida-nube, .bienvenida-saltar span { animation: none; }
  .bienvenida-btn { transition: none; }
  .bienvenida-btn:hover { transform: none; }
}

/* ---------- Legibilidad del texto sobre la foto satelital ---------- */
.bienvenida-titulo {
  /* Sombra en dos capas: una cercana que define el borde de la letra y
     otra difusa que separa el bloque del fondo. Se lee sobre cualquier
     zona de la imagen, clara u oscura. */
  text-shadow:
    0 1px 2px rgba(0,0,0,.5),
    0 6px 40px rgba(0,0,0,.55);
}
.bienvenida-bajada {
  text-shadow: 0 1px 3px rgba(0,0,0,.55), 0 3px 18px rgba(0,0,0,.4);
}
.bienvenida-region {
  text-shadow: 0 1px 4px rgba(0,0,0,.6);
  color: rgba(255,255,255,.85);
}
/* Línea fina bajo el epígrafe: detalle editorial que ancla el bloque */
.bienvenida-region::after {
  content: "";
  display: block;
  width: 44px;
  height: 1px;
  margin: .85rem auto 0;
  background: rgba(255,255,255,.45);
}
.bienvenida-btn {
  box-shadow: 0 4px 24px rgba(0,0,0,.28);
}
.bienvenida-saltar { text-shadow: 0 1px 6px rgba(0,0,0,.5); }

/* ---------- Ajustes por tamaño de pantalla ---------- */

/* Tabletas y móviles apaisados */
@media (max-width: 900px) {
  .bienvenida-velo {
    background:
      radial-gradient(75% 48% at 50% 47%, rgba(4,10,8,.66) 0%, rgba(4,10,8,.38) 55%, transparent 80%),
      linear-gradient(to bottom, rgba(4,10,8,.5) 0%, transparent 28%, transparent 68%, rgba(4,10,8,.6) 100%);
  }
}

/* Móvil vertical: la foto se recorta mucho, así que se refuerza el
   velo y se reduce el texto para que quepa sin apretarse. */
@media (max-width: 560px) {
  .bienvenida-contenido { padding: 1.5rem 1.25rem; }
  .bienvenida-imagen {
    /* En vertical conviene mostrar el centro de la imagen */
    object-position: 50% 45%;
    animation: none;      /* sin zoom: consume batería y aporta poco */
    transform: scale(1.02);
  }
  .bienvenida-velo {
    background:
      radial-gradient(95% 45% at 50% 45%, rgba(4,10,8,.72) 0%, rgba(4,10,8,.45) 55%, rgba(4,10,8,.15) 85%),
      linear-gradient(to bottom, rgba(4,10,8,.55) 0%, transparent 30%, transparent 64%, rgba(4,10,8,.68) 100%);
  }
  .bienvenida-titulo { font-size: clamp(2.2rem, 1.2rem + 7vw, 3.2rem); }
  .bienvenida-bajada { font-size: .95rem; margin-bottom: 1.8rem; }
  .bienvenida-region { font-size: .68rem; letter-spacing: .16em; }
}

/* Pantallas muy bajas (celular apaisado): compactar todo */
@media (max-height: 480px) {
  .bienvenida-titulo { font-size: 2rem; margin-bottom: .6rem; }
  .bienvenida-bajada { font-size: .88rem; margin-bottom: 1.2rem; }
  .bienvenida-region { margin-bottom: .5rem; }
  .bienvenida-region::after { margin-top: .5rem; }
  .bienvenida-saltar { margin-top: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .bienvenida-imagen { animation: none; transform: scale(1.02); }
}

/* El <picture> es un contenedor en línea por defecto: sin esto la
   imagen no llena la pantalla y quedaría un margen visible. */
.bienvenida-fondo picture {
  display: block;
  width: 100%;
  height: 100%;
}
/* Color de respaldo mientras la foto carga (evita un destello blanco) */
.bienvenida-fondo { background: #0d1a14; }

/* Aviso de que las distancias a servicios son estimadas */
.servicios-nota {
  margin: .9rem 0 0;
  padding: .6rem .8rem;
  border-left: 2px solid var(--hairline-2);
  font-size: .8rem;
  line-height: 1.5;
  color: var(--tinta-3);
  background: var(--superficie-2);
  border-radius: 0 var(--r-s) var(--r-s) 0;
}

/* ============================================================
   LUGARES DEL CATÁLOGO EN EL MAPA GENERAL
   Servicios capturados en el panel. Deliberadamente más discretos
   que las etiquetas de terrenos: son contexto, no el producto.
   ============================================================ */
.mapa-lugar {
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: .2rem .5rem .2rem .25rem;
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(18,53,91,.14);
  border-radius: var(--r-pill);
  box-shadow: 0 1px 4px rgba(15,23,35,.18);
  cursor: default;
  max-width: 190px;
  backdrop-filter: blur(4px);
  transition: transform .2s var(--curva), box-shadow .2s;
}
.mapa-lugar:hover {
  transform: translateY(-2px);
  box-shadow: 0 3px 10px rgba(15,23,35,.26);
  z-index: 4;
}
.mapa-lugar-icono {
  flex: 0 0 auto;
  width: 20px; height: 20px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--marca-suave);
  font-size: .72rem;
  line-height: 1;
}
.mapa-lugar-nombre {
  font-size: .68rem;
  color: var(--tinta-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}
/* A media distancia solo el icono: los nombres se encimarían */
.mapa-lugar--compacto {
  padding: .18rem;
  max-width: none;
}
.mapa-lugar--compacto .mapa-lugar-nombre { display: none; }

@media (max-width: 720px) {
  .mapa-lugar { max-width: 130px; }
  .mapa-lugar-nombre { font-size: .64rem; max-width: 92px; }
}
@media (prefers-reduced-motion: reduce) {
  .mapa-lugar { transition: none; }
  .mapa-lugar:hover { transform: none; }
}

/* ============================================================
   BOTÓN DE REALIDAD AUMENTADA
   Sobre el fondo oscuro del visor, un botón azul de marca se
   perdía. Va en blanco sólido con sombra: es la acción principal
   de esa pestaña y tiene que verse a la primera.
   ============================================================ */
.visor-ar-boton {
  position: absolute;
  bottom: var(--e5, 1.5rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;

  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .85rem 1.7rem;
  border: 0;
  border-radius: var(--r-pill);
  background: #ffffff;
  color: var(--marca);
  font-size: 1rem;
  font-weight: 600;
  font-family: var(--texto);
  cursor: pointer;
  white-space: nowrap;
  box-shadow:
    0 2px 6px rgba(0,0,0,.28),
    0 10px 30px rgba(0,0,0,.32);
  transition: transform .3s var(--curva), box-shadow .3s var(--curva), background .2s;
}
.visor-ar-boton::before {
  content: "◫";
  font-size: 1.05rem;
  line-height: 1;
}
.visor-ar-boton:hover {
  background: #ffffff;
  color: var(--marca);
  transform: translateX(-50%) translateY(-3px);
  box-shadow: 0 4px 10px rgba(0,0,0,.32), 0 16px 40px rgba(0,0,0,.38);
}
.visor-ar-boton:active { transform: translateX(-50%) translateY(-1px); }

/* Halo suave que lo despega del modelo, sin taparlo */
.visor-ar-boton::after {
  content: "";
  position: absolute;
  inset: -14px -20px;
  z-index: -1;
  border-radius: var(--r-pill);
  background: radial-gradient(ellipse, rgba(0,0,0,.34), transparent 72%);
  pointer-events: none;
}

@media (max-width: 560px) {
  .visor-ar-boton {
    bottom: var(--e4, 1rem);
    padding: .8rem 1.4rem;
    font-size: .95rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .visor-ar-boton { transition: none; }
  .visor-ar-boton:hover { transform: translateX(-50%); }
}

/* Repuesto si el código QR no se puede generar */
.ar-qr-fallo p { margin: 0 0 .4rem; font-size: .82rem; color: var(--tinta-3); }
.ar-qr-fallo input {
  width: 100%;
  max-width: 260px;
  padding: .4rem .6rem;
  font-size: .78rem;
  font-family: var(--dato);
  border: 1px solid var(--hairline-2);
  border-radius: var(--r-s);
  background: var(--superficie-2);
  color: var(--tinta-2);
}

/* ============================================================
   CARGA DEL MODELO 3D
   Estos archivos pesan varios MB: sin señal visible, la pantalla
   se queda oscura y parece que la página se colgó.
   ============================================================ */
.modelo-carga {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .85rem;
  padding: 1.5rem;
  text-align: center;
  background: rgba(15, 23, 35, .92);
  backdrop-filter: blur(3px);
  z-index: 4;
  transition: opacity .4s ease, visibility .4s ease;
}
/* model-viewer marca el contenedor cuando termina de cargar */
.modelo-carga[hidden],
model-viewer:not([poster-dismissed]) .modelo-carga { }
.modelo-carga.modelo-carga--listo {
  opacity: 0;
  visibility: hidden;
}

.modelo-carga-anillo {
  width: 46px;
  height: 46px;
  border: 3px solid rgba(255,255,255,.22);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: modelo-girar .9s linear infinite;
}
@keyframes modelo-girar { to { transform: rotate(360deg); } }

.modelo-carga-texto {
  margin: 0;
  color: #fff;
  font-size: .98rem;
  font-weight: 500;
}
.modelo-carga-pista {
  width: min(240px, 70%);
  height: 5px;
  border-radius: 999px;
  background: rgba(255,255,255,.16);
  overflow: hidden;
}
.modelo-carga-barra {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: #fff;
  transition: width .25s ease-out;
}
.modelo-carga-nota {
  margin: 0;
  color: rgba(255,255,255,.62);
  font-size: .8rem;
  line-height: 1.45;
  max-width: 34ch;
}

@media (prefers-reduced-motion: reduce) {
  .modelo-carga-anillo { animation-duration: 2.4s; }
  .modelo-carga-barra, .modelo-carga { transition: none; }
}

/* Indicador mientras se consultan los servicios cercanos */
.servicios-cargando {
  display: flex;
  align-items: center;
  gap: .6rem;
  color: var(--tinta-3);
}
.servicios-anillo {
  flex: 0 0 auto;
  width: 16px; height: 16px;
  border: 2px solid var(--hairline-2);
  border-top-color: var(--marca-2);
  border-radius: 50%;
  animation: servicios-girar .8s linear infinite;
}
@keyframes servicios-girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .servicios-anillo { animation-duration: 2.5s; }
}

/* ---------- Carga del recorrido 360° ---------- */
.pano-cargando {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  background: rgba(15, 23, 35, .94);
  color: #fff;
  z-index: 3;
}
.pano-cargando p { margin: 0; font-size: .95rem; }
.pano-anillo {
  width: 42px; height: 42px;
  border: 3px solid rgba(255,255,255,.22);
  border-top-color: #fff;
  border-radius: 50%;
  animation: pano-girar .9s linear infinite;
}
@keyframes pano-girar { to { transform: rotate(360deg); } }

/* El visor necesita posición relativa para el indicador y el lienzo */
.panorama-visor { position: relative; overflow: hidden; }
.panorama-visor canvas { display: block; width: 100%; height: 100%; }
.panorama-visor:focus-visible { outline: 2px solid var(--marca-2); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .pano-anillo { animation-duration: 2.4s; }
}

/* Aviso cuando se limpian favoritos de publicaciones retiradas */
.favoritos-depurados {
  padding: .75rem 1rem;
  margin-bottom: var(--e4, 1rem);
  border-radius: var(--r-s);
  background: var(--marca-suave);
  border-left: 3px solid var(--marca-2);
  color: var(--tinta-2);
  font-size: .88rem;
  line-height: 1.5;
}

/* ============================================================
   SELECTOR DE VISTA DEL MAPA
   Calles / Satélite / Híbrido. La vista aérea ayuda a ubicar un
   terreno mucho mejor que un plano de calles: se ven las casas,
   los sembradíos y los caminos reales.
   ============================================================ */
.mapa-vistas {
  display: flex;
  gap: .25rem;
  padding: .25rem;
  margin-bottom: .6rem;
  background: var(--superficie-2);
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
}
.mapa-vista {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  padding: .45rem .5rem;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--tinta-2);
  font-family: var(--texto);
  font-size: .8rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background .22s ease, color .22s ease, box-shadow .22s ease;
}
.mapa-vista:hover { color: var(--marca); }
.mapa-vista--activa {
  background: var(--superficie);
  color: var(--marca);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(18,53,91,.14);
}
.mapa-vista span { font-size: .9em; line-height: 1; }
.mapa-vista-nota { margin-bottom: 1rem; }

@media (max-width: 560px) {
  .mapa-vista { font-size: .74rem; padding: .42rem .3rem; }
}
@media (prefers-reduced-motion: reduce) {
  .mapa-vista { transition: none; }
}

/* Aviso cuando el acercamiento supera el detalle del satélite */
.mapa-vista-nota--aviso {
  padding: .5rem .65rem;
  border-radius: var(--r-s);
  background: rgba(168,134,42,.12);
  border-left: 2px solid var(--oro);
  color: var(--tinta-2);
}

/* ---------- Leyenda del mapa: color real de las parcelas ----------
   Las parcelas se dibujan en tonos de alto contraste para que se
   distingan sobre la foto satelital. La leyenda lleva un punto con
   ese color exacto, para que se entienda la correspondencia. */
.mapa-leyenda .leyenda::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: .35rem;
  vertical-align: middle;
  border: 1px solid rgba(255,255,255,.6);
}
.mapa-leyenda .leyenda--disponible::before { background: var(--disponible-vivo); }
.mapa-leyenda .leyenda--apartado::before   { background: var(--apartado-vivo); }
.mapa-leyenda .leyenda--vendido::before    { background: var(--vendido-vivo); }

/* Pastillas sobrias: fondo neutro con el color solo en el punto.
   Antes cada una iba pintada del color completo y el panel parecía
   un semáforo; así la información se lee igual y no compite con el
   mapa, que es lo que el usuario debe mirar. */
.mapa-leyenda .leyenda {
  background: var(--superficie-2) !important;
  color: var(--tinta-2) !important;
  border: 1px solid var(--hairline);
  font-weight: 500;
}
.mapa-leyenda .leyenda--proyecto {
  background: var(--superficie-2) !important;
  color: var(--tinta-2) !important;
  border: 1px solid var(--hairline);
}
.mapa-leyenda .leyenda--proyecto::before {
  background: var(--oro);
}





.admin-otro {
  margin: .25rem 0 1rem;
  padding: 1rem;
  border: 1px dashed var(--borde, #cbd3dd);
  border-radius: 12px;
  background: var(--fondo-suave, #f6f8fa);
  display: grid;
  gap: 1rem;
}

.admin-iconos { border: 0; margin: 0; padding: 0; }
.admin-iconos > legend {
  padding: 0;
  margin-bottom: .35rem;
  font-weight: 600;
  font-size: .95rem;
}

/* Rejilla de emojis: botones más grandes y cómodos (antes se veían chicos).
   minmax mayor + emoji a 2rem para que se distingan bien. */
.admin-iconos-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
  gap: .5rem;
  margin-top: .5rem;
}

.admin-icono-op {
  aspect-ratio: 1 / 1;
  min-height: 60px;
  font-size: 2rem;          /* antes ~1.5rem: ahora bien visibles */
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--borde, #cbd3dd);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  transition: border-color .12s, box-shadow .12s, transform .05s;
}
.admin-icono-op:hover { border-color: var(--acento, #0095b3); }
.admin-icono-op:active { transform: scale(.96); }
.admin-icono-op.es-activo {
  border-color: var(--acento, #0095b3);
  box-shadow: 0 0 0 2px var(--acento, #0095b3) inset;
  background: var(--fondo-suave, #eef6f9);
}
.admin-icono-op:focus-visible {
  outline: 2px solid var(--acento, #0095b3);
  outline-offset: 2px;
}

/* Subir imagen propia como ícono */
.admin-icono-subir {
  margin-top: .75rem;
  display: grid;
  gap: .6rem;
}
.admin-icono-previa {
  display: flex;
  align-items: center;
  gap: .75rem;
}
.admin-icono-previa img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  border: 1px solid var(--borde, #cbd3dd);
  border-radius: 10px;
  background: #fff;
  padding: 4px;
}

/* Imagen usada como ícono en la tabla del panel */
.admin-tabla .icono-img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  vertical-align: middle;
}

/* Imagen usada como ícono en el mapa principal (marcador MapLibre).
   .mapa-lugar-icono ya existe; aquí solo se dimensiona la <img> dentro. */
.mapa-lugar-img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  display: block;
}