/* ============================================================
   SITIO PÚBLICO — componentes
   Depende de base.css (tokens). Ver ahí la dirección de diseño.
   ============================================================ */

/* ---------------- Cabecera ---------------- */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: var(--e5);
  height: var(--cabecera);
  padding: 0 clamp(var(--e4), 3vw, var(--e6));
  background: var(--cabecera-fondo);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linea);
}
.marca {
  display: inline-flex;
  align-items: baseline;
  gap: var(--e2);
  font-family: var(--display);
  font-weight: 600;
  font-variation-settings: 'SOFT' 20, 'WONK' 1;
  font-size: 1.1rem;
  color: var(--tinta);
  text-decoration: none;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.marca-sello { color: var(--monte); font-size: 1.2em; }

.navegacion {
  display: flex;
  align-items: center;
  gap: var(--e1);
  margin-left: auto;
  flex-wrap: wrap;
}
.navegacion a {
  padding: 0.45rem 0.75rem;
  border-radius: var(--radio-s);
  color: var(--tinta-2);
  text-decoration: none;
  font-size: 0.93rem;
  font-weight: 500;
  white-space: nowrap;
}
.navegacion a:hover { background: var(--hueso-2); color: var(--tinta); }
.navegacion a[aria-current="page"] { color: var(--monte); background: var(--monte-3); }
.nav-publicar {
  background: var(--monte) !important;
  color: var(--papel) !important;
  font-weight: 600 !important;
}
.nav-publicar:hover { background: var(--monte-2) !important; }
.nav-fav-conteo {
  display: inline-block;
  background: var(--maiz);
  color: var(--tinta);
  border-radius: 999px;
  min-width: 1.15rem;
  padding: 0 0.3rem;
  font-family: var(--dato);
  font-size: 0.7rem;
  text-align: center;
  margin-left: var(--e1);
}

.franja-aviso {
  background: var(--tinta);
  color: rgba(247, 246, 241, .82);
  font-size: 0.82rem;
  padding: var(--e2) clamp(var(--e4), 3vw, var(--e6));
  text-align: center;
}
.franja-aviso a { color: var(--maiz); }

/* ---------------- Pie ---------------- */
.pie {
  background: var(--tinta);
  color: rgba(247, 246, 241, .7);
  padding: var(--e6) clamp(var(--e4), 3vw, var(--e6));
  font-size: 0.88rem;
}
.pie strong { color: var(--hueso); font-family: var(--display); font-size: 1.05rem; }
.pie a { color: var(--maiz); }
.pie-legal { max-width: var(--ancho-texto); }

/* ---------------- Portada ---------------- */
.hero {
  background:
    linear-gradient(160deg, var(--monte) 0%, #1b3d2c 100%);
  color: var(--hueso);
  border-radius: var(--radio-l);
  padding: clamp(var(--e6), 5vw, var(--e8)) clamp(var(--e5), 4vw, var(--e7));
  margin-bottom: var(--e7);
  position: relative;
  overflow: hidden;
}
/* Retícula de plano catastral sobre el hero: la firma de la marca */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(247,246,241,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(247,246,241,.07) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at 75% 40%, #000 10%, transparent 72%);
  pointer-events: none;
}
.hero > * { position: relative; z-index: 1; }
.hero h1 {
  color: var(--hueso);
  font-size: clamp(2rem, 1.3rem + 3.4vw, 3.6rem);
  max-width: 20ch;
  margin-bottom: var(--e4);
}
.hero p { color: rgba(247, 246, 241, .82); max-width: 54ch; font-size: 1.05rem; }
.hero-acciones { display: flex; flex-wrap: wrap; gap: var(--e3); margin-top: var(--e5); }
.hero-acciones .boton { background: var(--hueso); border-color: var(--hueso); }
.hero-acciones .boton:hover { background: var(--papel); border-color: var(--papel); }
.hero-acciones .boton--primario { background: var(--maiz); border-color: var(--maiz); color: var(--tinta); }
.hero-acciones .boton--primario:hover { background: #dda034; border-color: #dda034; color: var(--tinta); }

/* ---------------- Rejilla de tarjetas ---------------- */
.rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--e4);
  margin-bottom: var(--e6);
}

/* ---------------- Tarjeta de terreno ---------------- */
.tarjeta {
  display: flex;
  flex-direction: column;
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.tarjeta:hover {
  border-color: var(--linea-2);
  box-shadow: var(--sombra-2);
  transform: translateY(-2px);
}
.tarjeta-foto {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--hueso-2);
  overflow: hidden;
}
.tarjeta-foto img { width: 100%; height: 100%; object-fit: cover; }
.tarjeta-foto--vacia {
  display: grid;
  place-items: center;
  color: var(--linea-2);
  font-size: 2rem;
  background:
    repeating-linear-gradient(45deg, var(--hueso-2) 0 10px, var(--hueso) 10px 20px);
}
.tarjeta-marcas {
  position: absolute;
  inset: var(--e2) var(--e2) auto;
  display: flex;
  justify-content: space-between;
  gap: var(--e2);
  pointer-events: none;
}
.tarjeta-cuerpo {
  display: flex;
  flex-direction: column;
  gap: var(--e2);
  padding: var(--e4);
  flex: 1;
}
.tarjeta-titulo {
  font-family: var(--display);
  font-size: 1.08rem;
  font-weight: 600;
  line-height: 1.25;
  margin: 0;
}
.tarjeta-titulo a { color: var(--tinta); text-decoration: none; }
.tarjeta-titulo a:hover { color: var(--monte); }
.tarjeta-lugar { font-size: 0.86rem; color: var(--tinta-3); margin: 0; }

/* Cinta de folio: la firma visual del sistema */
.tarjeta-folio {
  font-family: var(--dato);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: var(--tinta-3);
  border-top: 1px dashed var(--linea);
  padding-top: var(--e2);
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--e2);
}

.tarjeta-datos {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--e1) var(--e3);
  align-items: end;
  padding-top: var(--e2);
}
.tarjeta-precio {
  font-family: var(--dato);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--monte);
  letter-spacing: -0.03em;
}
.tarjeta-precio small { font-size: 0.62em; color: var(--tinta-3); font-weight: 400; }
.tarjeta-superficie { font-family: var(--dato); font-size: 0.85rem; color: var(--tinta-2); text-align: right; }
.tarjeta-razon {
  background: var(--monte-3);
  border-radius: var(--radio-s);
  padding: var(--e2) var(--e3);
  font-size: 0.85rem;
  color: var(--monte);
}
.tarjeta-compat {
  font-family: var(--dato);
  font-size: 0.72rem;
  background: var(--monte);
  color: var(--papel);
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
}
.fav {
  background: none;
  border: 0;
  padding: var(--e1) 0;
  font-size: 0.86rem;
  color: var(--tinta-3);
  cursor: pointer;
  text-align: left;
  font-family: var(--texto);
}
.fav[aria-pressed="true"] { color: var(--maiz); font-weight: 600; }

/* ---------------- Catálogo ---------------- */
.catalogo-marco {
  display: grid;
  grid-template-columns: 272px minmax(0, 1fr);
  gap: var(--e5);
  align-items: start;
}
.catalogo-filtros {
  position: sticky;
  top: calc(var(--cabecera) + var(--e3));
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  overflow: hidden;
}
.catalogo-filtros-toggle { display: none; width: 100%; border-radius: 0; border: 0; border-bottom: 1px solid var(--linea); }
.catalogo-filtros-cuerpo { padding: var(--e4); display: grid; gap: var(--e3); max-height: calc(100vh - var(--cabecera) - var(--e6)); overflow-y: auto; }
.filtro-bloque { font-size: 0.9rem; font-weight: 600; margin-bottom: 0; }
.filtro-rango {
  border: 1px solid var(--linea);
  border-radius: var(--radio-s);
  padding: var(--e3);
  margin: 0;
}
.filtro-rango legend { font-size: 0.82rem; font-family: var(--texto); font-weight: 600; padding: 0 var(--e1); margin-bottom: var(--e2); }
.filtro-rango .fila { gap: var(--e2); }
.filtro-rango .fila label { font-size: 0.78rem; font-weight: 400; color: var(--tinta-2); margin-bottom: 0; }
.filtro-check { display: flex; align-items: center; gap: var(--e2); font-size: 0.9rem; font-weight: 400; margin-bottom: var(--e2); }
.filtro-check input { width: auto; margin: 0; }
.catalogo-limpiar { text-align: center; font-size: 0.86rem; display: block; }

.catalogo-encabezado { margin-bottom: var(--e4); }
.resultado-cuenta { font-size: 0.92rem; color: var(--tinta-2); margin: 0; }
.resultado-cuenta strong { font-family: var(--dato); font-size: 1.25rem; color: var(--tinta); }

.chips-filtros { list-style: none; display: flex; flex-wrap: wrap; gap: var(--e2); margin: var(--e3) 0 0; padding: 0; }
.chip-filtro {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  background: var(--monte-3);
  color: var(--monte);
  border-radius: 999px;
  padding: 0.22rem 0.4rem 0.22rem 0.7rem;
  font-size: 0.83rem;
}
.chip-filtro-quitar {
  display: grid;
  place-items: center;
  width: 1.15rem; height: 1.15rem;
  border-radius: 50%;
  background: rgba(36, 80, 58, .15);
  color: var(--monte);
  text-decoration: none;
  font-size: 0.68rem;
}
.chip-filtro-quitar:hover { background: var(--monte); color: var(--papel); }

.paginacion { display: flex; flex-wrap: wrap; gap: var(--e2); justify-content: center; align-items: center; margin: var(--e6) 0 var(--e4); }
.paginacion a, .paginacion-actual {
  min-width: 2.4rem;
  padding: 0.42rem 0.65rem;
  border: 1px solid var(--linea);
  border-radius: var(--radio-s);
  background: var(--papel);
  text-align: center;
  text-decoration: none;
  font-family: var(--dato);
  font-size: 0.88rem;
  color: var(--tinta-2);
}
.paginacion a:hover { border-color: var(--monte); color: var(--monte); }
.paginacion-actual { background: var(--monte); border-color: var(--monte); color: var(--papel); }
.paginacion-flecha { font-family: var(--texto) !important; }
.paginacion-puntos { color: var(--tinta-3); }

/* Recomendador */
.recomendador {
  background: var(--papel);
  border: 1px solid var(--linea);
  border-left: 3px solid var(--maiz);
  border-radius: var(--radio);
  margin-bottom: var(--e5);
}
.recomendador-resumen {
  cursor: pointer;
  padding: var(--e3) var(--e4);
  list-style: none;
  font-size: 0.92rem;
  color: var(--tinta-2);
  display: flex;
  align-items: center;
  gap: var(--e2);
}
.recomendador-resumen::after { content: "Responder"; margin-left: auto; color: var(--monte); font-weight: 600; white-space: nowrap; }
.recomendador[open] .recomendador-resumen::after { content: "Cerrar"; }
.recomendador-resumen::-webkit-details-marker { display: none; }
.recomendador-resumen strong { font-family: var(--texto); font-weight: 600; color: var(--tinta); }
.recomendador-quitar { font-size: 0.86rem; margin-left: var(--e2); }
.formulario--recomendador { border: 0; box-shadow: none; background: none; padding: 0 var(--e4) var(--e4); }
.recomendador-preguntas { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: var(--e3); margin-bottom: var(--e4); }
.recomendador-preguntas fieldset { background: var(--hueso); border: 1px solid var(--linea); border-radius: var(--radio-s); padding: var(--e3); margin: 0; }
.recomendador-preguntas legend { font-family: var(--texto); font-size: 0.86rem; font-weight: 600; }
.opcion { display: flex; align-items: center; gap: var(--e2); font-weight: 400; font-size: 0.9rem; margin-bottom: var(--e1); }
.opcion input { width: auto; margin: 0; }
.opcion-presupuesto { display: flex; align-items: center; gap: var(--e2); font-weight: 400; }

/* Alertas guardadas */
.alerta-caja {
  background: var(--monte);
  color: var(--hueso);
  border-radius: var(--radio);
  padding: var(--e5);
  margin-top: var(--e6);
}
.alerta-caja h2 { color: var(--hueso); }
.alerta-caja p { color: rgba(247, 246, 241, .8); max-width: 60ch; }
.alerta-form { display: flex; flex-wrap: wrap; gap: var(--e3); align-items: flex-end; }
.alerta-correo { flex: 1; min-width: 230px; margin: 0; color: var(--hueso); font-size: 0.9rem; }
.alerta-respuesta { margin-top: var(--e3); font-size: 0.92rem; padding: var(--e2) var(--e3); border-radius: var(--radio-s); }
.alerta-respuesta--ok { background: rgba(247,246,241,.15); }
.alerta-respuesta--error { background: var(--alerta-2); color: #712415; }

/* ---------------- Ficha ---------------- */
.ficha { max-width: 1280px; margin: 0 auto; }
/* El precio va en su propia caja, alineado con el título pero sin
   competir con él: la jerarquía manda que primero se lea qué es. */
.ficha-precio-caja {
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: var(--e3) var(--e4);
  text-align: right;
}
.ficha-precio-caja .eyebrow { margin-bottom: 0; }
.ficha-cabecera {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--e5);
  align-items: start;
  padding-bottom: var(--e4);
  border-bottom: 1px solid var(--linea);
  margin-bottom: var(--e5);
}
.miga { font-size: 0.85rem; color: var(--tinta-3); margin-bottom: var(--e2); }
.ficha-lugar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); color: var(--tinta-2); margin-bottom: var(--e3); }
.ficha-folio {
  font-family: var(--dato);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--tinta-3);
  background: var(--hueso-2);
  border: 1px solid var(--linea);
  border-radius: var(--radio-s);
  padding: 0.15rem 0.5rem;
}
.ficha-precio {
  font-family: var(--dato);
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.95rem);
  font-weight: 700;
  color: var(--monte);
  letter-spacing: -0.04em;
  text-align: right;
  margin: 0;
  white-space: nowrap;
}
.ficha-precio span { font-size: 0.4em; color: var(--tinta-3); font-weight: 400; }
.ficha-chips { list-style: none; display: flex; flex-wrap: wrap; gap: var(--e2); margin: 0; padding: 0; }
.chip-dato {
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
  font-size: 0.84rem;
  color: var(--tinta-2);
}
.chip-dato--3d { border-color: var(--monte); color: var(--monte); font-weight: 600; }

.ficha-columnas { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--e6); align-items: start; }
.ficha-datos h2 { margin-top: var(--e6); }
.ficha-datos h2:first-child { margin-top: 0; }

/* Galería */
.galeria-carrusel { margin-bottom: var(--e5); }
.galeria-principal { position: relative; border-radius: var(--radio); overflow: hidden; background: var(--tinta); }
.galeria-vista { aspect-ratio: 16 / 9; }
.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%);
  z-index: 2;
  width: 2.5rem; height: 2.5rem;
  border: 0;
  border-radius: 50%;
  background: rgba(247, 246, 241, .9);
  color: var(--tinta);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}
.galeria-flecha:hover { background: var(--papel); }
.galeria-flecha--prev { left: var(--e3); }
.galeria-flecha--next { right: var(--e3); }
.galeria-contador {
  position: absolute;
  right: var(--e3); bottom: var(--e3);
  background: rgba(26, 33, 24, .8);
  color: var(--hueso);
  border-radius: var(--radio-s);
  padding: 0.15rem 0.5rem;
  font-size: 0.78rem;
}
.galeria-miniaturas { display: flex; gap: var(--e2); margin-top: var(--e2); overflow-x: auto; padding-bottom: var(--e1); }
.galeria-mini {
  flex: 0 0 auto;
  width: 84px; height: 58px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--radio-s);
  overflow: hidden;
  background: none;
  cursor: pointer;
  opacity: .68;
}
.galeria-mini img { width: 100%; height: 100%; object-fit: cover; }
.galeria-mini--activa { border-color: var(--monte); opacity: 1; }

/* Bloques plegables */
.ficha-plegable {
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--papel);
  margin-bottom: var(--e3);
}
.ficha-plegable > summary {
  cursor: pointer;
  padding: var(--e3) var(--e4);
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.02rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--e3);
}
.ficha-plegable > summary::-webkit-details-marker { display: none; }
.ficha-plegable > summary::after { content: "+"; font-family: var(--dato); color: var(--tinta-3); font-size: 1.1rem; }
.ficha-plegable[open] > summary::after { content: "–"; }
.ficha-plegable > *:not(summary) { padding: 0 var(--e4) var(--e4); }

/* Datos en dos columnas */
.datos { display: grid; gap: var(--e2); margin: 0; }
.datos > div { display: grid; grid-template-columns: 42% 1fr; gap: var(--e3); padding: var(--e2) 0; border-bottom: 1px solid var(--linea); }
.datos > div:last-child { border-bottom: 0; }
.datos dt { color: var(--tinta-3); font-size: 0.88rem; }
.datos dd { margin: 0; font-family: var(--dato); font-size: 0.9rem; }

/* Columna de contacto */
.ficha-contacto {
  position: sticky;
  top: calc(var(--cabecera) + var(--e3));
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: var(--e4);
  box-shadow: var(--sombra);
  display: grid;
  gap: var(--e3);
}
.ficha-contacto h2 { margin: 0; font-size: 1.15rem; }
.contacto-dueno { margin: 0; font-size: 0.94rem; }
.nivel-respuesta { margin: 0; font-size: 0.86rem; color: var(--monte); }
.contacto-aviso { font-size: 0.8rem; color: var(--tinta-3); line-height: 1.5; margin: 0; }
.dejar-telefono summary, .resena-form-caja summary { cursor: pointer; font-size: 0.9rem; color: var(--monte); }
.dejar-telefono-form, .resena-form { display: grid; gap: var(--e2); margin-top: var(--e3); }
.dejar-telefono-nota, .zona-fuente, .resenas-vacio { font-size: 0.8rem; color: var(--tinta-3); }

/* Ubicación y servicios */
.ficha-minimapa { height: 300px; border-radius: var(--radio); overflow: hidden; border: 1px solid var(--linea); }
.ficha-minimapa-pie { font-size: 0.84rem; color: var(--tinta-3); margin-top: var(--e2); }
.servicios-intro { color: var(--tinta-2); font-size: 0.92rem; margin-bottom: var(--e3); }
.servicios-lista { list-style: none; display: grid; gap: var(--e2); margin: 0 0 var(--e5); padding: 0; }
.servicio-item {
  display: flex;
  align-items: center;
  gap: var(--e3);
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--radio-s);
  padding: var(--e3);
  cursor: pointer;
  transition: border-color .15s ease, transform .15s ease;
}
.servicio-item:hover, .servicio-item:focus-visible { border-color: var(--monte); transform: translateX(3px); }
.servicio-icono { font-size: 1.3rem; }
.servicio-texto { flex: 1; min-width: 0; }
.servicio-texto strong { display: block; font-size: 0.94rem; font-weight: 600; }
.servicio-texto small { color: var(--tinta-3); font-size: 0.84rem; }
.servicio-distancia { font-family: var(--dato); font-size: 0.85rem; color: var(--monte); white-space: nowrap; }
.servicio-marcador {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  background: var(--papel);
  border: 2px solid var(--monte);
  border-radius: 50%;
  font-size: 15px;
  cursor: pointer;
  box-shadow: var(--sombra);
}

/* Medios inmersivos */
.medios { margin-bottom: var(--e6); }
.medios-titulo { margin-bottom: var(--e4); }
.medios-grupo { margin-bottom: var(--e5); }
.medios-grupo h3 { margin-bottom: var(--e2); }
.medios-nota { color: var(--tinta-3); font-size: 0.9rem; margin-bottom: var(--e3); }
.panorama-visor { width: 100%; height: min(58vh, 460px); border-radius: var(--radio); overflow: hidden; background: var(--tinta); position: relative; }
.panorama-error { color: var(--hueso); padding: var(--e5); text-align: center; }
.panorama-pestanas { display: flex; flex-wrap: wrap; gap: var(--e2); margin-top: var(--e2); }
.panorama-pestana {
  border: 1px solid var(--linea);
  background: var(--papel);
  border-radius: 999px;
  padding: 0.3rem 0.8rem;
  font-size: 0.85rem;
  cursor: pointer;
  color: var(--tinta-2);
}
.panorama-pestana--activa { background: var(--monte); border-color: var(--monte); color: var(--papel); }
.medio-modelo { margin-bottom: var(--e4); position: relative; }
.medio-pie { font-size: 0.88rem; color: var(--tinta-3); margin-top: var(--e2); }
.medio-ar-boton { position: absolute; bottom: var(--e4); left: 50%; transform: translateX(-50%); }
.visor { margin-bottom: var(--e6); }
#visor3d { position: relative; height: min(62vh, 520px); border-radius: var(--radio); overflow: hidden; background: var(--tinta); }
.visor-ayuda { font-size: 0.85rem; color: var(--tinta-3); margin-top: var(--e2); }
.visor-boton {
  position: absolute;
  top: var(--e3); right: var(--e3);
  z-index: 10;
  border: 0;
  border-radius: var(--radio-s);
  padding: 0.5rem 0.9rem;
  font: 600 0.88rem var(--texto);
  cursor: pointer;
  background: rgba(26, 33, 24, .82);
  color: var(--hueso);
}
.visor-boton:hover { background: var(--tinta); }
.visor-boton--cerrar { background: rgba(168, 51, 31, .9); }
#visor3d:fullscreen { height: 100vh; border-radius: 0; }

/* Reseñas, zona, historial */
.resenas-promedio { font-family: var(--dato); font-size: 1.1rem; color: var(--maiz); margin-bottom: var(--e2); }
.resena-item { font-size: 0.9rem; padding: var(--e2) 0; border-bottom: 1px solid var(--linea); }
.zona-contexto p { font-size: 0.94rem; }
.plusvalia { background: var(--monte-3); border-radius: var(--radio-s); padding: var(--e3); font-size: 0.92rem; }
.historial { list-style: none; padding: 0; margin: 0; }
.historial li { display: flex; justify-content: space-between; padding: var(--e2) 0; border-bottom: 1px solid var(--linea); font-family: var(--dato); font-size: 0.88rem; }
.favoritos-nota { color: var(--tinta-3); font-size: 0.88rem; }

/* ---------------- Mapa a pantalla completa ---------------- */
.mapa-pantalla {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-top: calc(-1 * var(--e6));
  margin-bottom: calc(-1 * var(--e8));
  height: calc(100vh - var(--cabecera) - 34px);
  min-height: 460px;
  background: var(--tinta);
}
.mapa-pantalla #mapa3d { position: absolute; inset: 0; }
.mapa-panel {
  position: absolute;
  top: var(--e4); left: var(--e4);
  z-index: 30;
  width: min(322px, calc(100vw - var(--e6)));
  max-height: calc(100% - var(--e6));
  display: flex;
  flex-direction: column;
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra-2);
  overflow: hidden;
}
.mapa-panel-toggle { display: none; width: 100%; border-radius: 0; border: 0; border-bottom: 1px solid var(--linea); }
.mapa-panel-cuerpo { padding: var(--e4); display: grid; gap: var(--e3); overflow-y: auto; overscroll-behavior: contain; }
.mapa-panel-h1 { font-size: 1.15rem; margin: 0; }
.mapa-leyenda { display: flex; flex-wrap: wrap; gap: var(--e1); margin: 0; }
.mapa-panel-titulo { font-family: var(--dato); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--tinta-3); margin: var(--e2) 0 0; }
.mapa-capa { display: flex; gap: var(--e2); align-items: flex-start; cursor: pointer; font-weight: 400; margin: 0; }
.mapa-capa input { width: auto; margin-top: 0.3rem; }
.mapa-capa-texto strong { display: block; font-size: 0.9rem; }
.mapa-capa-texto small { color: var(--tinta-3); font-size: 0.8rem; line-height: 1.4; display: block; }
.mapa-slider { font-size: 0.9rem; font-weight: 600; margin: 0; }
.mapa-slider input[type="range"] { width: 100%; margin-top: var(--e1); accent-color: var(--monte); }
.mapa-slider output { float: right; font-family: var(--dato); font-weight: 400; color: var(--monte); }
.mapa-slider small { font-weight: 400; color: var(--tinta-3); font-size: 0.8rem; }
.mapa-buscador { display: flex; gap: var(--e2); }
.mapa-buscador input { flex: 1; min-width: 0; }
.mapa-resultados { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e1); }
.mapa-resultado {
  width: 100%;
  text-align: left;
  background: var(--hueso);
  border: 1px solid var(--linea);
  border-radius: var(--radio-s);
  padding: var(--e2);
  font: inherit;
  font-size: 0.84rem;
  cursor: pointer;
  color: var(--tinta);
}
.mapa-resultado:hover { border-color: var(--monte); }
.mapa-resultado-cargando { color: var(--tinta-3); font-size: 0.84rem; }
.mapa-panel-nota { font-size: 0.82rem; color: var(--tinta-3); line-height: 1.45; margin: 0; }
.mapa-estado { font-size: 0.82rem; color: var(--monte); margin: 0; }
.mapa-previa-chip { background: var(--maiz-2); border: 1px solid var(--maiz); border-radius: var(--radio-s); padding: var(--e2); font-size: 0.82rem; margin: 0; }
.mapa-previa-quitar { border: 0; background: none; color: var(--monte); cursor: pointer; text-decoration: underline; font: inherit; }
.mapa-panel-pie { font-size: 0.74rem; color: var(--tinta-3); line-height: 1.5; border-top: 1px solid var(--linea); padding-top: var(--e3); }
.mapa-detalle {
  position: absolute;
  top: var(--e4); right: calc(var(--e4) + 44px);
  z-index: 30;
  width: min(300px, calc(100vw - var(--e6)));
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: var(--e4);
  box-shadow: var(--sombra-2);
}
.mapa-detalle h2 { font-size: 1.1rem; margin-bottom: var(--e1); padding-right: var(--e5); }
.mapa-detalle-cerrar { position: absolute; top: var(--e2); right: var(--e2); border: 0; background: none; font-size: 1.1rem; cursor: pointer; color: var(--tinta-3); }
.mapa-detalle-folio { font-size: 0.76rem; color: var(--tinta-3); margin-bottom: var(--e3); }
.minimapa { position: absolute; bottom: var(--e5); right: var(--e4); width: 168px; height: 118px; border-radius: var(--radio-s); overflow: hidden; border: 2px solid var(--papel); box-shadow: var(--sombra-2); z-index: 20; }
#mapa3d.mapa3d--arrastrando { outline: 3px dashed var(--maiz); outline-offset: -3px; }

/* ---------------- Wizard de publicación ---------------- */
.wizard { max-width: 860px; margin: 0 auto; }
.wizard-progreso {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--e1);
  margin: 0 0 var(--e5);
  padding: 0;
}
.wizard-paso-marca { text-align: center; padding: var(--e2) var(--e1) var(--e3); border-bottom: 3px solid var(--linea); color: var(--tinta-3); font-size: 0.8rem; }
.wizard-paso-numero {
  display: inline-grid;
  place-items: center;
  width: 1.7rem; height: 1.7rem;
  border-radius: 50%;
  background: var(--hueso-2);
  color: var(--tinta-2);
  font-family: var(--dato);
  font-size: 0.85rem;
  margin-bottom: var(--e1);
}
.wizard-paso-marca--actual { border-bottom-color: var(--monte); color: var(--tinta); font-weight: 600; }
.wizard-paso-marca--actual .wizard-paso-numero { background: var(--monte); color: var(--papel); }
.wizard-paso-marca--hecho { border-bottom-color: var(--monte-2); }
.wizard-paso-marca--hecho .wizard-paso-numero { background: var(--monte-3); color: var(--monte); }
.wizard-nav { display: flex; justify-content: space-between; gap: var(--e3); margin-top: var(--e5); }
.wizard-nav [data-wizard-siguiente], .wizard-nav [data-wizard-publicar] { margin-left: auto; }
.wizard-nota { font-size: 0.9rem; color: var(--tinta-3); }
.wizard-error { background: var(--alerta-2); border-left: 3px solid var(--alerta); color: #712415; border-radius: var(--radio-s); padding: var(--e3); font-size: 0.92rem; }
.wizard-pestanas { display: flex; gap: var(--e2); margin: var(--e3) 0; }
.wizard-pestana { flex: 1; padding: var(--e3); border: 1px solid var(--linea); border-radius: var(--radio-s); background: var(--papel); cursor: pointer; font: inherit; font-size: 0.92rem; }
.wizard-pestana--activa { background: var(--monte); border-color: var(--monte); color: var(--papel); font-weight: 600; }
.wizard-pestana-panel { display: grid; gap: var(--e3); }
/* Sin esto, `display: grid` gana sobre el display:none implícito del
   atributo `hidden` y se veían los dos formularios (entrar y crear
   cuenta) al mismo tiempo. */
.wizard-pestana-panel[hidden] { display: none; }
.wizard-mapa { height: 320px; border-radius: var(--radio); overflow: hidden; border: 1px solid var(--linea); margin: var(--e3) 0; }
.wizard-fotos-previa { display: flex; flex-wrap: wrap; gap: var(--e2); margin-top: var(--e3); }
.wizard-foto { position: relative; margin: 0; }
.wizard-foto img { width: 126px; height: 88px; object-fit: cover; border-radius: var(--radio-s); border: 1px solid var(--linea); }
.wizard-foto figcaption { position: absolute; left: var(--e1); bottom: var(--e1); background: var(--monte); color: var(--papel); font-size: 0.68rem; border-radius: 4px; padding: 0.1rem 0.4rem; }
.wizard-resumen { background: var(--hueso); border-radius: var(--radio); padding: var(--e4); }
.wizard-duplicado label { margin-top: var(--e2); }
.formulario-legal { font-size: 0.84rem; color: var(--tinta-3); }

/* ---------------- Panel del dueño ---------------- */
.panel-entrar { max-width: 420px; margin: var(--e7) auto; }
.panel-nota { font-size: 0.86rem; color: var(--tinta-3); }

/* ---------------- Responsivo ---------------- */
@media (max-width: 1080px) {
  .ficha-columnas { grid-template-columns: 1fr; }
  .ficha-contacto { position: static; }
}
@media (max-width: 880px) {
  .catalogo-marco { grid-template-columns: 1fr; }
  .catalogo-filtros { position: static; }
  .catalogo-filtros-toggle { display: block; }
  .catalogo-filtros-cuerpo { display: none; max-height: none; }
  .catalogo-filtros--abierto .catalogo-filtros-cuerpo { display: grid; }
  .mapa-panel { width: min(300px, calc(100vw - var(--e5))); }
  .mapa-panel-toggle { display: block; }
  /* En móvil el panel arranca cerrado (lo hace mapa3d.js). Esta regla
     —que faltaba— es la que realmente oculta el contenido: el JS añadía
     la clase pero ningún CSS la aplicaba, así que el panel seguía tapando
     el mapa. Con el toggle, el cuerpo se colapsa y solo queda la barra. */
  .mapa-panel-cuerpo--cerrado { display: none; }
  /* Cuando está abierto, que no ocupe toda la pantalla: deja ver el mapa. */
  .mapa-panel { max-height: calc(100% - var(--e5)); }
  .mapa-panel-cuerpo { max-height: 60vh; }
  .mapa-detalle { right: var(--e4); top: auto; bottom: var(--e4); }
  .minimapa { display: none; }
}
@media (max-width: 680px) {
  .cabecera { height: auto; flex-wrap: wrap; padding-top: var(--e2); padding-bottom: var(--e2); gap: var(--e2); }
  .navegacion { width: 100%; margin-left: 0; overflow-x: auto; }
  .ficha-cabecera { grid-template-columns: 1fr; }
  .ficha-precio { text-align: left; }
  .fila { grid-template-columns: 1fr; }
  .wizard-paso-nombre { display: none; }
  .rejilla { grid-template-columns: 1fr; }
}

/* Cierre de la portada: llamado a los dueños */
.cierre-publicar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--e5);
  align-items: center;
  background: var(--papel);
  border: 1px solid var(--linea);
  border-left: 3px solid var(--maiz);
  border-radius: var(--radio);
  padding: var(--e5);
  margin-top: var(--e6);
}
.cierre-publicar h2 { margin-bottom: var(--e2); }
.cierre-publicar p { color: var(--tinta-2); margin: 0; max-width: 60ch; }
.cierre-publicar .boton { white-space: nowrap; }
@media (max-width: 680px) {
  .cierre-publicar { grid-template-columns: 1fr; }
  .cierre-publicar .boton { width: 100%; }
}

/* ---------------- Panel del dueño ---------------- */
.panel-cabecera {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--e5);
  align-items: start;
  padding-bottom: var(--e4);
  border-bottom: 1px solid var(--linea);
  margin-bottom: var(--e5);
}
.panel-cabecera h1 { margin-bottom: var(--e2); }
.panel-cabecera-acciones { display: flex; flex-wrap: wrap; gap: var(--e2); }

.panel-resumen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--e3);
  margin-bottom: var(--e5);
}
.panel-dato {
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: var(--e4);
}
.panel-dato--destacado { border-color: var(--maiz); background: var(--maiz-2); }
.panel-dato-numero {
  display: block;
  font-family: var(--dato);
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--monte);
  line-height: 1.05;
  letter-spacing: -0.03em;
}
.panel-dato--destacado .panel-dato-numero { color: #7d5610; }
.panel-dato-nombre { display: block; font-size: 0.84rem; color: var(--tinta-3); margin-top: var(--e1); }

.panel-lista { display: grid; gap: var(--e3); }
.panel-fila {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr) auto;
  gap: var(--e4);
  align-items: center;
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: var(--e3);
  transition: border-color .15s ease;
}
.panel-fila:hover { border-color: var(--linea-2); }
.panel-fila--oculta { background: var(--hueso); }
.panel-fila--oculta .panel-fila-media { opacity: .55; }
.panel-fila-media {
  width: 116px; height: 84px;
  border-radius: var(--radio-s);
  overflow: hidden;
  background: var(--hueso-2);
  display: grid;
  place-items: center;
  color: var(--linea-2);
  font-size: 1.5rem;
}
.panel-fila-media img { width: 100%; height: 100%; object-fit: cover; }
.panel-fila-info { min-width: 0; }
.panel-fila-titulo { font-family: var(--display); font-size: 1.05rem; margin: 0 0 var(--e1); }
.panel-fila-titulo a { color: var(--tinta); text-decoration: none; }
.panel-fila-titulo a:hover { color: var(--monte); }
.panel-fila-lugar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); font-size: 0.88rem; color: var(--tinta-3); margin: 0 0 var(--e1); }
.panel-fila-datos { font-size: 0.88rem; color: var(--tinta-2); margin: 0; display: flex; flex-wrap: wrap; gap: var(--e2); }
.panel-sep { color: var(--linea-2); }
.panel-fila-folio { font-size: 0.72rem; color: var(--tinta-3); margin: var(--e1) 0 0; letter-spacing: 0.06em; }
.panel-fila-acciones { display: flex; align-items: flex-end; gap: var(--e3); }
.panel-estado { margin: 0; }
.panel-estado-etiqueta { font-size: 0.78rem; color: var(--tinta-3); font-weight: 400; margin: 0; }
.panel-estado select { min-width: 132px; margin-top: var(--e1); }
.panel-bienvenida { color: var(--tinta-3); font-size: 0.92rem; }

@media (max-width: 820px) {
  .panel-cabecera { grid-template-columns: 1fr; }
  .panel-fila { grid-template-columns: 84px minmax(0, 1fr); }
  .panel-fila-media { width: 84px; height: 64px; }
  .panel-fila-acciones { grid-column: 1 / -1; align-items: center; }
  .panel-estado { flex: 1; }
  .panel-estado select { width: 100%; }
}

/* Editor del dueño */
.panel-editar-cabecera {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--e4);
  align-items: start;
  padding-bottom: var(--e4);
  border-bottom: 1px solid var(--linea);
  margin-bottom: var(--e5);
}
.panel-editar-cabecera h1 { margin-bottom: var(--e2); }
.panel-editar-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); font-size: 0.86rem; color: var(--tinta-3); margin: 0; }
.panel-fotos { display: flex; flex-wrap: wrap; gap: var(--e3); margin-bottom: var(--e3); }
.panel-foto { position: relative; margin: 0; }
.panel-foto img { width: 132px; height: 92px; object-fit: cover; border-radius: var(--radio-s); border: 1px solid var(--linea); }
.panel-foto-borrar {
  position: absolute; top: var(--e1); right: var(--e1);
  border: 0; border-radius: 50%;
  width: 24px; height: 24px;
  background: rgba(26, 33, 24, .8);
  color: var(--hueso);
  cursor: pointer;
  font-size: 0.78rem;
  line-height: 1;
}
.panel-foto-borrar:hover { background: var(--alerta); }
@media (max-width: 680px) {
  .panel-editar-cabecera { grid-template-columns: 1fr; }
}

/* ---------------- Aviso legal y páginas de texto ---------------- */
.legal {
  max-width: var(--ancho-texto);
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: var(--e5);
}
.legal p { color: var(--tinta-2); }
.legal p strong { color: var(--tinta); font-family: var(--display); font-weight: 600; }

/* Página no encontrada */
.vacio--404 { max-width: 520px; margin: var(--e8) auto; padding: var(--e7) var(--e5); }
.vacio--404 h1 { margin-bottom: var(--e3); }
.vacio--404 p { color: var(--tinta-3); margin-bottom: var(--e4); }

/* Estados de la caja de alertas guardadas */
.alerta-caja .boton--primario { background: var(--maiz); border-color: var(--maiz); color: var(--tinta); }
.alerta-caja .boton--primario:hover { background: #dda034; border-color: #dda034; }
.alerta-correo input { background: var(--papel); }

/* ============================================================
   v3.1 — Visor unificado de medios, ficha con más presencia
   y aprovechamiento del ancho completo.
   ============================================================ */

/* ---------------- Visor unificado (360° / 3D / AR) ---------------- */
.visor-medios {
  background: var(--tinta);
  border-radius: var(--radio);
  overflow: hidden;
  margin-bottom: var(--e5);
}
.visor-medios-barra {
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: var(--e2) var(--e3);
  background: rgba(255, 255, 255, .06);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.visor-medios-pestanas { display: flex; gap: var(--e1); flex: 1; overflow-x: auto; }
.visor-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  padding: 0.45rem 0.9rem;
  border: 0;
  border-radius: var(--radio-s);
  background: transparent;
  color: rgba(255, 255, 255, .68);
  font: 500 0.9rem var(--texto);
  cursor: pointer;
  white-space: nowrap;
}
.visor-tab:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.visor-tab--activa { background: var(--papel); color: var(--tinta); font-weight: 600; }
.visor-expandir {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: var(--radio-s);
  background: transparent;
  color: rgba(255, 255, 255, .8);
  padding: 0.4rem 0.75rem;
  font: 500 0.85rem var(--texto);
  cursor: pointer;
  white-space: nowrap;
}
.visor-expandir:hover { background: rgba(255, 255, 255, .12); color: #fff; }

.visor-medios-panel { display: none; }
.visor-medios-panel--activo { display: block; }
.visor-lienzo, .panorama-visor {
  width: 100%;
  height: clamp(340px, 52vh, 560px);
  background: var(--tinta);
  position: relative;
}
.visor-lienzo model-viewer { width: 100%; height: 100%; background: #16283d; }
.visor-vistas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  padding: var(--e2) var(--e3);
  background: rgba(255, 255, 255, .05);
}
.visor-vista {
  border: 1px solid rgba(255, 255, 255, .22);
  background: transparent;
  color: rgba(255, 255, 255, .75);
  border-radius: 999px;
  padding: 0.25rem 0.75rem;
  font-size: 0.84rem;
  cursor: pointer;
}
.visor-vista--activa { background: var(--papel); border-color: var(--papel); color: var(--tinta); font-weight: 600; }
.visor-pie {
  margin: 0;
  padding: var(--e2) var(--e3);
  font-size: 0.84rem;
  color: rgba(255, 255, 255, .6);
  background: rgba(0, 0, 0, .18);
}
.visor-pie strong { color: rgba(255, 255, 255, .85); }
.visor-ar-boton { position: absolute; bottom: var(--e4); left: 50%; transform: translateX(-50%); }
.panorama-error { color: rgba(255,255,255,.75); padding: var(--e6); text-align: center; }

/* Pantalla completa */
.visor-medios--completa { display: flex; flex-direction: column; height: 100vh; border-radius: 0; }
.visor-medios--completa .visor-medios-panel--activo { flex: 1; display: flex; flex-direction: column; }
.visor-medios--completa .visor-lienzo,
.visor-medios--completa .panorama-visor { flex: 1; height: auto; }

/* ---------------- Ficha con más presencia ---------------- */
.ficha { max-width: 1420px; }
.ficha-cabecera {
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: var(--e5);
  box-shadow: var(--sombra);
  border-bottom: 1px solid var(--linea);
  margin-bottom: var(--e5);
}
.ficha-precio-caja {
  background: var(--monte);
  border: 0;
  color: var(--papel);
  padding: var(--e4) var(--e5);
  min-width: 220px;
}
.ficha-precio-caja .eyebrow { color: rgba(255, 255, 255, .6); }
.ficha-precio { color: var(--papel); }
.ficha-precio span { color: rgba(255, 255, 255, .6); }

/* Bloques de contenido de la ficha: cada sección es una tarjeta */
.ficha-bloque {
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: var(--e5);
  margin-bottom: var(--e4);
}
.ficha-bloque > h2:first-child { margin-top: 0; }
.ficha-datos h2 { margin-top: 0; }

/* Datos clave en rejilla, no en lista larga */
.ficha-resumen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--linea);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  overflow: hidden;
  margin-bottom: var(--e4);
}
.ficha-resumen-dato { background: var(--papel); padding: var(--e4); }
.ficha-resumen-dato .eyebrow { margin-bottom: var(--e1); }
.ficha-resumen-valor {
  font-family: var(--dato);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--tinta);
  letter-spacing: -0.02em;
  display: block;
}
.ficha-resumen-valor small { font-size: 0.65em; color: var(--tinta-3); font-weight: 400; }

/* ---------------- Ancho completo ---------------- */
.catalogo-marco { grid-template-columns: 292px minmax(0, 1fr); gap: var(--e5); }
.rejilla { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
@media (min-width: 1500px) {
  .rejilla { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
}

/* Estado pendiente de guardar en el panel del dueño */
.panel-estado--pendiente { border-color: var(--maiz) !important; background: var(--maiz-2); }
.panel-estado-guardar { margin-top: var(--e2); width: 100%; background: var(--maiz); border-color: var(--maiz); color: var(--papel); font-weight: 600; }
.panel-estado-guardar:hover { background: #96622f; border-color: #96622f; color: var(--papel); }


/* El encabezado de sección: título a la izquierda y su nota debajo,
   no separados a los extremos de la pantalla (se veía roto en anchos
   grandes cuando solo había dos elementos). */
.seccion-titulo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e1);
  margin-bottom: var(--e4);
}
.seccion-titulo--fila {
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--e4);
}
.seccion-titulo + .rejilla { margin-top: var(--e2); }
.seccion-intro { color: var(--tinta-3); margin: var(--e1) 0 0; max-width: 46ch; }

/* ---------------- Pie rediseñado ---------------- */
.pie { padding: var(--e7) clamp(var(--e4), 3vw, var(--e6)) var(--e6); }
.pie-marco {
  max-width: var(--ancho);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 1fr 1.6fr;
  gap: var(--e6);
}
.pie-bloque { display: flex; flex-direction: column; gap: var(--e2); align-items: flex-start; }
.pie-marca { font-family: var(--display); font-size: 1.15rem; margin: 0; color: var(--hueso); }
.pie-marca span { color: var(--maiz); }
.pie-region { color: rgba(246, 247, 249, .55); font-size: 0.88rem; margin: 0; }
.pie-titulo {
  font-family: var(--dato);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(246, 247, 249, .45);
  margin: 0 0 var(--e1);
}
.pie-bloque a { color: rgba(246, 247, 249, .78); text-decoration: none; font-size: 0.9rem; }
.pie-bloque a:hover { color: var(--maiz); }
.pie-bloque--legal .pie-legal { color: rgba(246, 247, 249, .6); font-size: 0.86rem; line-height: 1.6; margin: 0 0 var(--e2); max-width: 52ch; }
.pie-bloque--legal .pie-legal strong { color: rgba(246, 247, 249, .9); }
@media (max-width: 860px) {
  .pie-marco { grid-template-columns: 1fr; gap: var(--e5); }
}

/* Créditos del mapa, plegados */
.mapa-creditos { margin-top: var(--e2); }
.mapa-creditos summary { cursor: pointer; color: var(--monte); font-size: 0.76rem; }
.mapa-creditos summary::marker { color: var(--tinta-3); }

/* ============================================================
   PORTADA v4 — apertura de impacto
   Estructura: promesa + buscador + prueba visual → cifras →
   ventajas → catálogo → tendencia → cierre para dueños.
   ============================================================ */
.portada {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(var(--e5), 3vw, var(--e7));
  align-items: center;
  background:
    radial-gradient(1100px 420px at 85% 8%, rgba(168, 112, 58, .2), transparent 60%),
    linear-gradient(150deg, #16375a 0%, #0f2440 58%, #0b1a30 100%);
  border-radius: var(--radio-l);
  padding: clamp(var(--e5), 4vw, var(--e8));
  margin-bottom: var(--e6);
  position: relative;
  overflow: hidden;
  box-shadow: var(--elev-3);
}
/* Retícula catastral: la firma visual de la marca */
.portada::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: radial-gradient(ellipse at 20% 30%, #000 5%, transparent 70%);
  pointer-events: none;
}
.portada > * { position: relative; z-index: 1; }

.portada-sello {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  background: rgba(255, 255, 255, .09);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  padding: 0.32rem 0.85rem;
  font-size: 0.84rem;
  color: rgba(255, 255, 255, .8);
  margin: 0 0 var(--e4);
  backdrop-filter: blur(6px);
}
.portada-sello-punto {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 3px rgba(74, 222, 128, .2);
  animation: pulso 2.4s ease-in-out infinite;
}
@keyframes pulso {
  0%, 100% { box-shadow: 0 0 0 3px rgba(74, 222, 128, .2); }
  50%      { box-shadow: 0 0 0 7px rgba(74, 222, 128, .05); }
}

.portada h1 {
  color: #fff;
  font-size: clamp(2.1rem, 1.3rem + 3.2vw, 3.7rem);
  line-height: 1.06;
  margin-bottom: var(--e4);
  text-shadow: 0 2px 30px rgba(0, 0, 0, .3);
}
.portada h1 em {
  font-style: normal;
  color: #e9b877;
  display: block;
}
.portada-entrada {
  color: rgba(255, 255, 255, .78);
  font-size: 1.05rem;
  max-width: 52ch;
  margin-bottom: var(--e5);
}

/* Buscador: la acción principal de la portada */
.portada-buscador {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) auto;
  gap: var(--e2);
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--radio);
  padding: var(--e2);
  backdrop-filter: blur(10px);
  box-shadow: var(--elev-2);
}
.portada-campo { margin: 0; min-width: 0; }
.portada-campo input, .portada-campo select {
  background: rgba(255, 255, 255, .96);
  border-color: transparent;
  height: 100%;
}
.portada-buscador .boton--primario {
  background: var(--maiz);
  border-color: var(--maiz);
  color: #fff;
  padding-inline: 1.5rem;
}
.portada-buscador .boton--primario:hover { background: #b87c40; border-color: #b87c40; }

.portada-atajos { display: flex; flex-wrap: wrap; gap: var(--e4); margin: var(--e4) 0 0; }
.portada-atajos a {
  color: rgba(255, 255, 255, .72);
  font-size: 0.9rem;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, .25);
  padding-bottom: 2px;
  transition: color .2s var(--curva-fina), border-color .2s var(--curva-fina);
}
.portada-atajos a:hover { color: #e9b877; border-color: #e9b877; }

/* Propiedad destacada dentro de la portada */
.portada-destacado {
  position: relative;
  display: block;
  border-radius: var(--radio);
  overflow: hidden;
  aspect-ratio: 4 / 3.2;
  background: rgba(255, 255, 255, .06);
  text-decoration: none;
  box-shadow: var(--elev-4);
  transition: transform .35s var(--curva);
}
.portada-destacado:hover { transform: translateY(-4px) scale(1.008); }
.portada-destacado img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--curva); }
.portada-destacado:hover img { transform: scale(1.06); }
.portada-destacado-vacio {
  display: grid; place-items: center; height: 100%;
  font-size: 3rem; color: rgba(255, 255, 255, .22);
}
.portada-destacado-info {
  position: absolute;
  inset: auto 0 0;
  padding: var(--e5) var(--e4) var(--e4);
  background: linear-gradient(transparent, rgba(9, 20, 36, .93) 55%);
  color: #fff;
}
.portada-destacado-info .eyebrow { color: #e9b877; }
.portada-destacado-info h2 {
  color: #fff;
  font-size: 1.2rem;
  margin: 0 0 var(--e2);
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.portada-destacado-datos {
  display: flex; flex-wrap: wrap; gap: var(--e3);
  margin: 0; font-size: 0.9rem; color: rgba(255, 255, 255, .72);
  align-items: baseline;
}
.portada-destacado-precio { font-size: 1.25rem; font-weight: 700; color: #fff; }

/* ---------------- Cifras ---------------- */
.cifras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--e3);
  margin-bottom: var(--e7);
}
.cifra {
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: var(--e4);
  text-align: center;
  box-shadow: var(--elev-1);
  transition: transform .2s var(--curva), box-shadow .2s var(--curva);
}
.cifra:hover { transform: translateY(-3px); box-shadow: var(--elev-2); }
.cifra-icono { display: block; font-size: 1.5rem; margin-bottom: var(--e2); }
.cifra-numero {
  display: block;
  font-family: var(--dato);
  font-size: 1.85rem;
  font-weight: 700;
  color: var(--monte);
  line-height: 1;
  letter-spacing: -0.035em;
}
.cifra-nombre { display: block; font-size: 0.84rem; color: var(--tinta-3); margin-top: var(--e1); }

/* ---------------- Ventajas ---------------- */
.ventajas { margin-bottom: var(--e7); }
.ventajas-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: var(--e4);
}
.ventaja {
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: var(--e5) var(--e4);
  box-shadow: var(--elev-1);
  transition: transform .22s var(--curva), box-shadow .22s var(--curva), border-color .22s var(--curva-fina);
}
.ventaja:hover { transform: translateY(-4px); box-shadow: var(--elev-2); border-color: var(--monte); }
.ventaja-icono {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 12px;
  background: var(--monte-3);
  font-size: 1.35rem;
  margin-bottom: var(--e3);
}
.ventaja h3 { font-size: 1.05rem; margin-bottom: var(--e2); }
.ventaja p { font-size: 0.92rem; color: var(--tinta-2); margin-bottom: var(--e3); line-height: 1.55; }
.ventaja a { font-size: 0.9rem; font-weight: 500; text-decoration: none; }
.ventaja a:hover { text-decoration: underline; }

/* ---------------- Cierre para dueños ---------------- */
.cierre-publicar {
  background: linear-gradient(140deg, var(--monte), #0d2038);
  border: 0;
  border-radius: var(--radio-l);
  padding: clamp(var(--e5), 3vw, var(--e7));
  color: #fff;
  align-items: center;
  box-shadow: var(--elev-3);
}
.cierre-publicar h2 { color: #fff; }
.cierre-publicar .eyebrow { color: #e9b877; }
.cierre-publicar p { color: rgba(255, 255, 255, .78); }
.cierre-lista { list-style: none; padding: 0; margin: var(--e4) 0 0; display: grid; gap: var(--e2); }
.cierre-lista li {
  color: rgba(255, 255, 255, .82);
  font-size: 0.94rem;
  padding-left: 1.6rem;
  position: relative;
}
.cierre-lista li::before {
  content: "✓";
  position: absolute; left: 0;
  color: #4ade80;
  font-weight: 700;
}
.cierre-publicar .boton--primario {
  background: var(--maiz);
  border-color: var(--maiz);
  color: #fff;
  width: auto;
}
.cierre-publicar .boton--primario:hover { background: #b87c40; border-color: #b87c40; }

.rejilla--tres { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

@media (max-width: 960px) {
  .portada { grid-template-columns: 1fr; }
  .portada-destacado { aspect-ratio: 16 / 10; }
  .portada-buscador { grid-template-columns: 1fr; }
}

/* ---------------- Tarjetas más compactas ---------------- */
.rejilla { grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: var(--e3); }
.tarjeta-foto { aspect-ratio: 3 / 2; }
.tarjeta-cuerpo { padding: var(--e3); gap: var(--e1); }
.tarjeta-titulo {
  font-size: 0.98rem;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tarjeta-lugar { font-size: 0.82rem; display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); }
.tarjeta-datos { padding-top: var(--e1); }
.tarjeta-precio { font-size: 1.05rem; }
.tarjeta-superficie { font-size: 0.8rem; }
.tarjeta-folio { padding-top: var(--e1); font-size: 0.66rem; }
.estado, .tarjeta-compat { font-size: 0.66rem; padding: 0.15rem 0.5rem; }
.sello { font-size: 0.7rem; padding: 0.1rem 0.45rem; }

/* ---------------- Datos de la propiedad con iconos ---------------- */
.datos-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
  gap: var(--e2);
  margin: 0;
}
.dato-tarjeta {
  display: flex;
  align-items: center;
  gap: var(--e3);
  background: var(--hueso);
  border: 1px solid var(--linea);
  border-radius: var(--radio-s);
  padding: var(--e2) var(--e3);
  transition: border-color .18s var(--curva-fina), background-color .18s var(--curva-fina);
}
.dato-tarjeta:hover { border-color: var(--linea-2); background: var(--papel); }
.dato-tarjeta-icono {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  flex: 0 0 34px;
  border-radius: 9px;
  background: var(--monte-3);
  font-size: 1rem;
}
.dato-tarjeta-texto { min-width: 0; }
.dato-tarjeta dt {
  font-family: var(--dato);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--tinta-3);
  margin-bottom: 1px;
}
.dato-tarjeta dd {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--tinta);
  overflow-wrap: anywhere;
}
.dato-tarjeta dd small { font-weight: 400; color: var(--tinta-3); font-size: 0.78rem; display: block; }
.dato-tarjeta--si .dato-tarjeta-icono { background: #e7f2ed; }
.dato-tarjeta--no { opacity: .62; }
.dato-tarjeta--no .dato-tarjeta-icono { background: var(--hueso-2); }

/* ============================================================
   CORRECCIONES MÓVIL (auditoría)
   El catálogo desbordaba 240px: las reglas de rejilla añadidas
   después de los media queries los anulaban por orden de cascada.
   ============================================================ */
@media (max-width: 700px) {
  .rejilla, .rejilla--tres { grid-template-columns: 1fr; }
  .catalogo-marco { grid-template-columns: 1fr; }
  .cifras { grid-template-columns: repeat(2, 1fr); }
  .ventajas-rejilla { grid-template-columns: 1fr; }
  .datos-rejilla { grid-template-columns: 1fr; }
  .ficha-resumen { grid-template-columns: repeat(2, 1fr); }
  .portada-buscador { grid-template-columns: 1fr; }
  .portada-destacado { aspect-ratio: 16 / 11; }
}

/* Objetivos táctiles: mínimo 44px de alto en móvil (guía de Apple
   y Android). Antes había controles de 28-32px, difíciles de tocar
   con el pulgar, que es como se usa esto en el campo. */
@media (max-width: 900px) {
  .boton, .admin-boton, .tabla-pag, .paginacion a, .paginacion-actual,
  .visor-tab, .visor-vista, .panorama-pestana, .wizard-pestana {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
  input[type="number"], input[type="password"], input[type="search"], select {
    min-height: 44px;
    /* 16px evita que iOS haga zoom automático al enfocar el campo */
    font-size: 16px;
  }
  .navegacion a { min-height: 44px; display: inline-flex; align-items: center; }
  .filtro-check { min-height: 40px; align-items: center; }
  .filtro-check input[type="checkbox"] { width: 20px; height: 20px; }
  .fav { min-height: 44px; }
  .servicio-item { min-height: 56px; }
  .chip-filtro-quitar { width: 28px; height: 28px; }
}

/* ---------------- Contactos recibidos (panel del dueño) ---------------- */
.panel-leads { margin-bottom: var(--e6); }
.panel-leads-lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--e3); }
.lead {
  display: flex;
  align-items: center;
  gap: var(--e3);
  background: var(--papel);
  border: 1px solid var(--linea);
  border-left: 3px solid var(--whatsapp);
  border-radius: var(--radio);
  padding: var(--e3);
  box-shadow: var(--elev-1);
  transition: transform .2s var(--curva), box-shadow .2s var(--curva);
}
.lead:hover { transform: translateY(-2px); box-shadow: var(--elev-2); }
.lead-info { flex: 1; min-width: 0; }
.lead-nombre { font-weight: 600; margin: 0 0 2px; }
.lead-terreno { font-size: 0.82rem; color: var(--tinta-3); margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lead-fecha { font-size: 0.74rem; color: var(--tinta-3); margin: 2px 0 0; }
.lead-boton { width: auto; flex: 0 0 auto; padding: 0.5rem 0.9rem; font-size: 0.86rem; }

/* --- Respaldo: mostrar el botón correcto según el paso, sin depender del JS ---
   El wizard marca [data-paso-actual] en cada cambio. En el paso 5 se muestra
   "Publicar"; en los demás, "Siguiente". Si el JS no cargara, el atributo
   arranca en su valor inicial y el botón "Publicar" permanece oculto salvo en
   el paso 5, evitando el error de ver los tres botones a la vez. */
.wizard[data-paso-actual="5"] [data-wizard-siguiente] { display: none; }
.wizard:not([data-paso-actual="5"]) [data-wizard-publicar] { display: none; }

/* ============================================================
   Columnas animadas (scroll infinito vertical)
   Efecto tipo "muro de tarjetas" para portada. CSS puro, sin JS.
   Las tarjetas suben en loop; un degradado desvanece arriba/abajo.
   ============================================================ */
.muro {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(var(--e4), 2.5vw, var(--e6));
  margin-top: var(--e6);
  max-height: 640px;
  overflow: hidden;
  /* Desvanece los bordes superior e inferior */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
}
.muro-columna {
  display: flex;
  flex-direction: column;
  gap: clamp(var(--e4), 2vw, var(--e5));
  flex: 1 1 0;
  min-width: 0;
  max-width: 340px;
  /* La animación desplaza la columna media pantalla hacia arriba.
     Como el contenido está duplicado, el salto es invisible: loop perfecto. */
  animation: muro-subir var(--muro-duracion, 22s) linear infinite;
  will-change: transform;
}
.muro:hover .muro-columna { animation-play-state: paused; }

@keyframes muro-subir {
  to { transform: translateY(-50%); }
}

/* Columnas visibles según el ancho de pantalla: se van sumando columnas
   conforme hay más espacio, para llenar el ancho sin amontonar en móvil.
   Por defecto (móvil) solo la 1ª; se añaden 2ª, 3ª, 4ª y 5ª al crecer. */
.muro-columna { display: none; }
.muro-columna--1 { display: flex; }
@media (min-width: 620px)  { .muro-columna--2 { display: flex; } }
@media (min-width: 900px)  { .muro-columna--3 { display: flex; } }
@media (min-width: 1200px) { .muro-columna--4 { display: flex; } }
@media (min-width: 1500px) { .muro-columna--5 { display: flex; } }

/* Tarjeta de testimonio */
.testimonio {
  padding: var(--e5);
  border: 1px solid var(--linea);
  border-radius: var(--radio-l);
  box-shadow: var(--sombra);
  background: var(--papel);
  width: 100%;
}
.testimonio-texto { margin: 0; color: var(--tinta-2); line-height: 1.55; }
.testimonio-autor { display: flex; align-items: center; gap: var(--e3); margin-top: var(--e4); }
.testimonio-avatar {
  width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: 0 0 auto;
  background: var(--monte-3);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--dato); font-weight: 700; color: var(--monte); font-size: 1rem;
}
.testimonio-nombre { font-weight: 600; line-height: 1.2; color: var(--tinta); }
.testimonio-rol { font-size: 0.85rem; color: var(--tinta-3); line-height: 1.3; }

/* En el muro, las tarjetas llenan el ancho de su columna y NO se encogen:
   dentro de un flex-column, los hijos con aspect-ratio (la foto) se
   colapsan si no se fija flex-shrink:0, y solo quedaba visible el título. */
.muro-columna .tarjeta,
.muro-columna .testimonio {
  width: 100%;
  max-width: 100%;
  flex: 0 0 auto;
}

/* Respeto a quien prefiere menos movimiento: sin animación, con scroll normal */
@media (prefers-reduced-motion: reduce) {
  .muro { max-height: none; -webkit-mask-image: none; mask-image: none; }
  .muro-columna { animation: none; }
}

/* ============================================================
   Animación "palabras que suben" para el título del hero.
   Cada palabra entra desde abajo con un pequeño retraso escalonado.
   Inspirado en el efecto WordsPullUp. CSS puro, sin JS.
   ============================================================ */
.portada-titulo-anim .palabra-sube {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.5em);
  animation: palabra-sube 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: calc(var(--i, 0) * 0.08s);
}
@keyframes palabra-sube {
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .portada-titulo-anim .palabra-sube {
    opacity: 1; transform: none; animation: none;
  }
}

/* ============================================================
   Sección a todo el ancho (full-bleed): rompe el max-width del
   contenedor central para que el muro ocupe el ancho completo
   de la ventana, sin barra de scroll horizontal.
   ============================================================ */

/* ============================================================
   Rejilla de testimonios (estática, sin animación).
   Bloque sobrio de reseñas: comunica más confianza que el
   scroll infinito para un sitio inmobiliario.
   ============================================================ */

/* Las tarjetas de testimonio dentro del realce: vidrio sobre oscuro */

/* Insignia de "Más vista" en la tarjeta (sustituye a la sección repetida) */
.estado--tendencia {
  background: var(--maiz-solido);
  color: #3a2f0a;
  font-weight: 700;
}