/*
  Página web pública de Domus (/sitio) · Revisión 7.3
  Idea de diseño: el DOBLE MARCO azul de las fichas y los contratos de Domus sigue siendo la marca; encima se
  le suma PROFUNDIDAD y respuesta al cursor:
    · sombras azules (no grises) que se estiran hacia el lado contrario al cursor, para que las tarjetas
      parezcan pegadas sobre papel y se despeguen al tocarlas;
    · un aro propio como cursor que cambia según lo que se toca (dice «Ver» en un inmueble, «Ampliar» en una foto);
    · al pasar el cursor sobre una tarjeta cambian sus fotos y la tarjeta se inclina un poco;
    · una luz dorada que sigue al cursor en la portada.
  Todo el movimiento es opcional: solo existe si sitio.js agrega la clase .anima (no lo hace si la persona
  pidió «reducir movimiento») y el aro solo aparece con ratón (.con-cursor), nunca en celulares.
  Sin fuentes externas ni estilos «en línea»: la política de seguridad solo deja cargar este archivo.
*/
:root {
  --azul: #355f82;
  --azul-noche: #1d3850;
  --crema: #fbf7ee;
  --arena: #f2ead7;
  --linea: #d4c8ab;
  --tinta: #243342;
  --gris: #5b6b78;
  --laton: #86631f;
  --laton-claro: #c9a24d;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --suave: cubic-bezier(0.2, 0.7, 0.2, 1);
  --alto-barra: 72px;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--alto-barra) + 12px);
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--crema);
  color: var(--tinta);
  font: 17px/1.6 var(--sans);
}
[hidden] {
  display: none !important;
}
img {
  max-width: 100%;
  display: block;
}
a {
  color: var(--azul);
}
h1,
h2,
h3 {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--azul-noche);
  margin: 0;
}
h1 {
  font-size: clamp(2.4rem, 5vw + 0.4rem, 4.4rem);
  line-height: 1.04;
  letter-spacing: -0.015em;
}
h2 {
  font-size: clamp(1.8rem, 2.6vw + 0.8rem, 2.8rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
}
h3 {
  font-size: 1.3rem;
  line-height: 1.25;
}
:focus-visible {
  outline: 3px solid var(--laton-claro);
  outline-offset: 3px;
}
.saltar {
  position: absolute;
  left: -999px;
  top: 8px;
  background: var(--azul-noche);
  color: var(--crema);
  padding: 0.6rem 1rem;
  z-index: 80;
}
.saltar:focus {
  left: 8px;
}

/* ---------- Barra de arriba y progreso de lectura ---------- */
#progreso {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--laton-claro);
  transform: scaleX(0);
  transform-origin: left;
  z-index: 70;
}
.barra {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: var(--alto-barra);
  padding: 0.5rem clamp(1rem, 4vw, 3rem);
  background: rgb(251 247 238 / 0.9);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid transparent;
  transition:
    border-color 0.3s,
    box-shadow 0.3s;
}
.barra.solida {
  border-bottom-color: var(--linea);
  box-shadow: 0 6px 24px rgb(36 51 66 / 0.07);
}
.marca {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--azul-noche);
  font-family: var(--serif);
  font-size: 1.15rem;
  margin-right: auto;
}
.marca img {
  width: 44px;
  height: 44px;
  object-fit: contain;
}
.marca strong {
  letter-spacing: 0.08em;
}
.menu {
  display: flex;
  gap: 1.6rem;
}
.menu a {
  color: var(--tinta);
  text-decoration: none;
  font-size: 0.97rem;
  padding: 0.3rem 0;
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s;
}
.menu a:hover {
  border-bottom-color: var(--laton-claro);
}

/* ---------- Botones: esquinas rectas, como los marcos ---------- */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0.55rem 1.3rem;
  border: 2px solid var(--azul);
  background: transparent;
  color: var(--azul);
  font: 600 0.98rem/1.2 var(--sans);
  text-decoration: none;
  cursor: pointer;
  transition:
    background 0.2s,
    color 0.2s,
    border-color 0.2s;
}
.boton:hover {
  background: var(--azul);
  color: var(--crema);
}
.boton-solido {
  background: var(--azul);
  color: var(--crema);
}
.boton-solido:hover {
  background: var(--azul-noche);
  border-color: var(--azul-noche);
}
.boton-wa {
  min-height: 42px;
  padding: 0.4rem 1rem;
}
.boton-claro {
  background: var(--crema);
  border-color: var(--crema);
  color: var(--azul-noche);
}
.boton-claro:hover {
  background: var(--laton-claro);
  border-color: var(--laton-claro);
  color: var(--azul-noche);
}
.boton-borde {
  border-color: var(--crema);
  color: var(--crema);
}
.boton-borde:hover {
  background: var(--crema);
  color: var(--azul-noche);
}
.acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin: 1.6rem 0 0;
}
.enlace-boton {
  border: 0;
  background: none;
  color: var(--azul);
  font: 600 0.95rem var(--sans);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  padding: 0.5rem 0;
}

/* ---------- El doble marco (marca de la casa) ---------- */
.marco {
  position: relative;
  padding: 14px;
  background: var(--crema);
}
.marco::before,
.marco::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.marco::before {
  inset: 0;
  border: 3px solid var(--azul);
}
.marco::after {
  inset: 7px;
  border: 1px solid var(--azul);
}
.seccion {
  padding: clamp(3.5rem, 8vw, 6.5rem) clamp(1rem, 4vw, 3rem);
}
.seccion > * {
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
}
.seccion-arena {
  background: var(--arena);
}
.seccion-cabeza {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  margin-bottom: 2rem;
}
.conteo {
  margin: 0;
  color: var(--gris);
}

/* ---------- Servicios: filas con regla, no tarjetas ---------- */
.servicios {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(2rem, 6vw, 5rem);
}
.servicio {
  position: relative;
  padding: 1.7rem 0 2rem;
}
.servicio::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: var(--azul);
  transform-origin: left;
}
.servicio h3 {
  font-size: clamp(1.5rem, 2vw + 0.6rem, 2rem);
}
.servicio p {
  max-width: 34rem;
  margin: 0.6rem 0 0;
  color: var(--gris);
}

/* ---------- Cómo trabajamos: una secuencia real, por eso lleva números ---------- */
.pasos {
  --avance: 1;
  position: relative;
  margin-top: 0;
  margin-bottom: 0;
  padding: 0 0 0 4.6rem;
  list-style: none;
}
.pasos::before,
.pasos::after {
  content: "";
  position: absolute;
  left: 1.3rem;
  top: 1.3rem;
  bottom: 2.6rem;
  width: 3px;
  background: var(--linea);
}
.pasos::after {
  background: var(--azul);
  transform-origin: top;
  transform: scaleY(var(--avance));
}
.paso {
  position: relative;
  padding-bottom: 2.6rem;
}
.paso:last-child {
  padding-bottom: 0;
}
.paso-n {
  position: absolute;
  left: -4.6rem;
  top: 0;
  display: grid;
  place-items: center;
  width: 2.8rem;
  height: 2.8rem;
  border: 3px double var(--azul);
  background: var(--crema);
  color: var(--azul);
  font: 1.25rem var(--serif);
  transition:
    background 0.4s,
    color 0.4s;
  z-index: 1;
}
.paso h3 {
  font-size: 1.5rem;
}
.paso p {
  margin: 0.3rem 0 0;
  max-width: 34rem;
  color: var(--gris);
}

/* ---------- Contacto ---------- */
.contacto {
  padding: clamp(3rem, 8vw, 6rem) clamp(1rem, 4vw, 3rem);
  background: var(--azul-noche);
  color: var(--crema);
}
.contacto-marco {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  padding: clamp(1.6rem, 5vw, 3.4rem);
}
.contacto-marco::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 3px double rgb(251 247 238 / 0.75);
  pointer-events: none;
}
.contacto h2 {
  color: var(--crema);
}
.contacto p {
  max-width: 36rem;
  margin: 1rem 0 0;
  color: rgb(251 247 238 / 0.86);
}
.contacto .acciones {
  max-width: none;
}
.contacto a {
  color: var(--crema);
}
.contacto .boton-claro {
  color: var(--azul-noche);
}
.contacto-datos {
  margin-top: 2rem !important;
  font-size: 0.97rem;
}

/* ---------- Pie ---------- */
.pie {
  background: var(--azul-noche);
  color: rgb(251 247 238 / 0.8);
  padding: 0 clamp(1rem, 4vw, 3rem) 2.5rem;
}
.pie-interior {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem 3rem;
  max-width: 1180px;
  margin: 0 auto;
  padding-top: 2rem;
  border-top: 1px solid rgb(251 247 238 / 0.2);
  font-size: 0.93rem;
}
.pie p {
  margin: 0;
}
.pie a {
  color: var(--crema);
}
.pie-nombre strong {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.2rem;
  color: var(--crema);
}

/* ---------- Avisos (página apagada / inmueble que ya no está) ---------- */
.vacio-pagina {
  max-width: 640px;
  margin: 0 auto;
  padding: clamp(4rem, 12vw, 8rem) 1.2rem;
}
.vacio-pagina p {
  color: var(--gris);
  font-size: 1.1rem;
}
.vacio-pagina h1 {
  font-size: clamp(2rem, 4vw + 0.5rem, 3rem);
  margin-bottom: 1rem;
}

/* ---------- Ficha de un inmueble ---------- */
.detalle {
  max-width: 1180px;
  margin: 0 auto;
  padding: 1.4rem clamp(1rem, 4vw, 3rem) 4.5rem;
}
.migas {
  margin: 0 0 1.4rem;
  font-size: 0.95rem;
}
.detalle-rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(1.8rem, 5vw, 3.5rem);
  align-items: start;
}
.galeria-principal .galeria-abrir {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  padding: 0;
  border: 0;
  background: var(--arena);
  overflow: hidden;
  cursor: zoom-in;
}
.galeria-principal img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.25s;
}
.galeria-principal img.cambiando {
  opacity: 0.25;
}
.sin-foto-grande {
  aspect-ratio: 4 / 3;
}
.miniaturas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 0.6rem;
  margin: 1.1rem 0 0;
  padding: 0;
  list-style: none;
}
.mini {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  padding: 0;
  border: 3px solid transparent;
  background: var(--arena);
  overflow: hidden;
  cursor: pointer;
  opacity: 0.75;
  transition:
    opacity 0.2s,
    border-color 0.2s;
}
.mini:hover,
.mini.activa {
  opacity: 1;
}
.mini.activa {
  border-color: var(--azul);
}
.mini img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.detalle-info {
  position: sticky;
  top: calc(var(--alto-barra) + 16px);
}
.detalle-info h1 {
  font-size: clamp(2rem, 3vw + 0.6rem, 3rem);
}
.detalle-precio {
  margin: 0.9rem 0 0;
  font-family: var(--serif);
  font-size: 1.7rem;
  color: var(--laton);
}
.detalle-precio + .detalle-precio {
  margin-top: 0.1rem;
  font-size: 1.3rem;
}
.hechos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 1.5rem;
  margin: 1.6rem 0 0;
}
.hechos div {
  padding: 0.7rem 0;
  border-top: 1px solid var(--linea);
}
.hechos dt {
  font-size: 0.85rem;
  color: var(--gris);
}
.hechos dd {
  margin: 0;
  font: 1.15rem var(--serif);
  color: var(--azul-noche);
}
.acciones-ficha .boton {
  flex: 1 1 180px;
}
.detalle-folio {
  margin: 1.2rem 0 0;
  font-size: 0.88rem;
  color: var(--gris);
}
.detalle-cuerpo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2.6rem 3rem;
  margin-top: 3.5rem;
  padding-top: 2.5rem;
  border-top: 3px double var(--azul);
}
.bloque h2 {
  font-size: 1.6rem;
  margin-bottom: 0.9rem;
}
.bloque-desc {
  grid-column: 1 / -1;
}
.bloque-desc p {
  max-width: 68ch;
  margin: 0 0 0.9rem;
  line-height: 1.7;
}
.lista {
  margin: 0;
  padding: 0;
  list-style: none;
}
.lista li {
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--linea);
}

/* ---------- Foto ampliada ---------- */
.lupa {
  width: 100%;
  height: 100%;
  max-width: 100vw;
  max-height: 100vh;
  padding: 0;
  border: 0;
  background: transparent;
}
.lupa::backdrop {
  background: rgb(20 32 44 / 0.94);
}
.lupa[open] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
.lupa img {
  max-width: 94vw;
  max-height: 80vh;
  object-fit: contain;
}
.lupa-barra {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  color: var(--crema);
}
.lupa-barra button {
  min-height: 44px;
  padding: 0.4rem 1.1rem;
  border: 2px solid var(--crema);
  background: transparent;
  color: var(--crema);
  font: 600 0.95rem var(--sans);
  cursor: pointer;
}
.lupa-barra button:hover {
  background: var(--crema);
  color: var(--azul-noche);
}

/* =====================================================================
   Movimiento: solo cuando sitio.js agregó la clase .anima al <html>
   (no la agrega si la persona pidió "reducir movimiento").
   ===================================================================== */

/* =====================================================================
   Revisión 7.3: profundidad, iconos, portada, buscador, tarjetas, cursor
   ===================================================================== */
:root {
  /* Sombras con el azul de la marca: una capa cercana (contacto) y otra lejana (altura). */
  --sombra-1: 0 1px 2px rgb(29 56 80 / 0.12), 0 10px 26px -10px rgb(29 56 80 / 0.28);
  --sombra-2: 0 2px 4px rgb(29 56 80 / 0.12), 0 30px 54px -18px rgb(29 56 80 / 0.5);
  --ladrillo: #b5483a;
}
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.sprite {
  position: absolute;
}
.ico {
  flex: none;
  width: 1.2em;
  height: 1.2em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.boton {
  gap: 0.5rem;
  box-shadow: 0 1px 0 rgb(29 56 80 / 0.1);
  transition:
    background 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.25s,
    transform 0.25s var(--suave);
}
.boton:hover {
  box-shadow: 0 12px 22px -10px rgb(29 56 80 / 0.55);
  transform: translateY(-2px);
}
.boton-solido {
  box-shadow: 0 8px 18px -8px rgb(29 56 80 / 0.55);
}
.boton-wa {
  background: #1f7a4d;
  border-color: #1f7a4d;
  color: #fff;
}
.boton-wa:hover {
  background: #17603c;
  border-color: #17603c;
}
.barra-acciones {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.favoritos-boton {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 42px;
  padding: 0.4rem 0.9rem;
  border: 2px solid var(--linea);
  background: var(--crema);
  color: var(--azul-noche);
  font: 600 0.92rem var(--sans);
  cursor: pointer;
  transition:
    border-color 0.2s,
    box-shadow 0.25s;
}
.favoritos-boton:hover {
  border-color: var(--azul);
  box-shadow: var(--sombra-1);
}
.favoritos-boton b {
  min-width: 1.4rem;
  padding: 0 0.35rem;
  border-radius: 1rem;
  background: var(--ladrillo);
  color: #fff;
  font-size: 0.8rem;
  line-height: 1.4rem;
  text-align: center;
}

/* ---------- Portada: una foto real a todo lo ancho, con el doble marco ---------- */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: clamp(500px, 72svh, 680px);
  display: flex;
  align-items: flex-end;
  background: var(--azul-noche);
  color: var(--crema);
}
.hero-fondo {
  position: absolute;
  inset: 0;
  z-index: -3;
}
.hero-fondo img {
  position: absolute;
  left: 0;
  top: -8%;
  width: 100%;
  height: 116%;
  object-fit: cover;
}
.casa-trazo {
  position: absolute;
  right: 8%;
  bottom: 18%;
  width: min(46vw, 520px);
  fill: none;
  stroke: var(--laton-claro);
  stroke-width: 2;
  opacity: 0.8;
}
.hero-velo {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(520px circle at var(--mx, 72%) var(--my, 30%), rgb(201 162 77 / 0.22), transparent 70%),
    linear-gradient(90deg, rgb(29 56 80 / 0.92), rgb(29 56 80 / 0.55) 55%, rgb(29 56 80 / 0.25)),
    linear-gradient(0deg, rgb(20 36 52 / 0.85), transparent 45%);
}
.hero-marco {
  position: absolute;
  inset: 18px;
  z-index: -1;
  border: 4px double rgb(251 247 238 / 0.55);
  pointer-events: none;
}
.hero-contenido {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 6rem clamp(2rem, 5vw, 4rem) 8rem;
}
.hero-texto {
  max-width: 40rem;
}
.hero h1 {
  color: var(--crema);
  text-shadow: 0 2px 30px rgb(10 20 30 / 0.5);
}
.hero-sub {
  max-width: 32rem;
  margin: 1.2rem 0 0;
  font-size: 1.15rem;
  color: rgb(251 247 238 / 0.9);
}
.hero-cifras {
  margin: 1.6rem 0 0;
  color: rgb(251 247 238 / 0.85);
}
.hero-cifras strong {
  font: 400 2rem/1 var(--serif);
  color: var(--laton-claro);
}
/* Tarjeta de «cristal»: flota sobre la foto y se mueve un poco con el cursor. */
.hero-cristal {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  width: min(300px, 100%);
  padding: 1.2rem 1.3rem;
  border: 1px solid rgb(251 247 238 / 0.45);
  background: rgb(251 247 238 / 0.16);
  backdrop-filter: blur(14px) saturate(1.2);
  color: var(--crema);
  text-decoration: none;
  box-shadow: 0 26px 50px -20px rgb(0 0 0 / 0.55);
  transform: translate3d(var(--dx, 0px), var(--dy, 0px), 0);
  transition: box-shadow 0.3s;
}
.hero-cristal:hover {
  box-shadow: 0 34px 60px -18px rgb(0 0 0 / 0.65);
}
.hero-cristal strong {
  font: 400 1.35rem/1.2 var(--serif);
}
.hero-cristal em {
  font: normal 1.5rem/1.1 var(--serif);
  color: var(--laton-claro);
}
.hero-cristal-etiqueta {
  align-self: flex-start;
  padding: 0.15rem 0.6rem;
  background: var(--crema);
  color: var(--azul-noche);
  font-size: 0.8rem;
  font-weight: 600;
}
.hero-cristal-ver {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.5rem;
  font-weight: 600;
  font-size: 0.95rem;
}

/* ---------- Buscador: flota sobre el borde de la portada ---------- */
.buscador {
  position: relative;
  z-index: 5;
  max-width: 1240px;
  margin: -4.6rem auto 0;
  padding: 0 clamp(1rem, 4vw, 3rem);
}
.buscador-caja {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem 1.4rem;
  align-items: end;
  padding: 1.5rem 1.6rem 1.6rem;
  background: var(--crema);
  box-shadow: var(--sombra-2);
}
.buscador-caja::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid var(--linea);
  pointer-events: none;
}
.intencion {
  grid-column: 1 / -1;
  display: inline-flex;
  justify-self: start;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--arena);
  box-shadow: inset 0 1px 3px rgb(29 56 80 / 0.18);
}
.intencion label {
  position: relative;
}
.intencion input {
  position: absolute;
  opacity: 0;
}
.intencion span {
  display: block;
  padding: 0.55rem 1.4rem;
  font-weight: 600;
  color: var(--gris);
  cursor: pointer;
  transition:
    background 0.2s,
    color 0.2s,
    box-shadow 0.2s;
}
.intencion input:checked + span {
  background: var(--azul);
  color: var(--crema);
  box-shadow: 0 6px 14px -6px rgb(29 56 80 / 0.7);
}
.intencion input:focus-visible + span {
  outline: 3px solid var(--laton-claro);
  outline-offset: 2px;
}
.campos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(126px, 1fr));
  gap: 0.9rem 1.2rem;
}
.campos label,
.f-orden {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--gris);
}
.campos input,
.campos select,
.f-orden select {
  min-height: 44px;
  padding: 0.4rem 0.2rem;
  border: 0;
  border-bottom: 2px solid var(--linea);
  background: transparent;
  color: var(--tinta);
  font: 1.02rem var(--sans);
  border-radius: 0;
  transition: border-color 0.2s;
}
.campos input:hover,
.campos select:hover,
.f-orden select:hover,
.campos input:focus,
.campos select:focus {
  border-bottom-color: var(--azul);
  outline: none;
}
.campos input:focus-visible,
.campos select:focus-visible {
  outline: 3px solid var(--laton-claro);
  outline-offset: 2px;
}
.f-buscar {
  grid-column: span 2;
}
.boton-ver {
  min-height: 52px;
  min-width: 13rem;
}

/* ---------- Deslizables de metros cuadrados (Revisión 7.8) ---------- */
.metros {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem 3rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--linea);
}
@media (max-width: 700px) {
  .metros {
    grid-template-columns: minmax(0, 1fr);
  }
}
.metros-bloque {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}
.metros-titulo {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--gris);
}
.metros-titulo small {
  font-weight: 400;
}
.metros-texto {
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--azul-noche);
}
.metros-nota {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 0.82rem;
  color: var(--gris);
}
.metros-nota[hidden] {
  display: none;
}
.metros-control {
  position: relative;
  height: 34px;
}
.metros-pista {
  position: absolute;
  left: 0;
  right: 0;
  top: 14px;
  height: 6px;
  background: var(--linea);
}
.metros-relleno {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--azul);
}
/* Las dos barras van una encima de la otra y NO reciben clics: solo sus perillas. */
.metros-control input[type="range"] {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 34px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}
.metros-control input[type="range"]::-webkit-slider-runnable-track {
  height: 34px;
  background: transparent;
  border: 0;
}
.metros-control input[type="range"]::-moz-range-track {
  height: 34px;
  background: transparent;
  border: 0;
}
.metros-control input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  pointer-events: auto;
  width: 22px;
  height: 22px;
  margin-top: 6px;
  border: 3px solid var(--azul);
  border-radius: 0;
  background: var(--crema);
  box-shadow: 0 2px 6px rgb(29 56 80 / 0.35);
  cursor: grab;
}
.metros-control input[type="range"]::-moz-range-thumb {
  pointer-events: auto;
  width: 16px;
  height: 16px;
  border: 3px solid var(--azul);
  border-radius: 0;
  background: var(--crema);
  box-shadow: 0 2px 6px rgb(29 56 80 / 0.35);
  cursor: grab;
}
.metros-control input[type="range"]:focus-visible::-webkit-slider-thumb {
  outline: 3px solid var(--laton-claro);
  outline-offset: 2px;
}
.metros-control input[type="range"]:focus-visible::-moz-range-thumb {
  outline: 3px solid var(--laton-claro);
  outline-offset: 2px;
}

/* ---------- Catálogo ---------- */
.orden {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.6rem 1.6rem;
}
.f-orden select {
  min-width: 11rem;
}
.rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2.4rem 2rem;
  perspective: 1200px;
}
.sin-resultados {
  margin-top: 2rem;
  color: var(--gris);
  font-size: 1.05rem;
}

/* Tarjeta: papel con sombra azul; al tocarla se despega, se inclina y la sombra se aleja del cursor. */
.inm {
  position: relative;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--sube, 0px));
  transform-style: preserve-3d;
  transition: transform 0.35s var(--suave);
  --sx: 0;
  --sy: 0;
}
.inm.moviendo {
  transition: transform 0.08s linear;
}
.inm-enlace {
  position: relative;
  isolation: isolate;
  display: block;
  padding: 14px 14px 1rem;
  background: #fffdf8;
  color: inherit;
  text-decoration: none;
  box-shadow:
    calc(var(--sx) * -18px) calc(14px + var(--sy) * -8px) 34px -14px rgb(29 56 80 / 0.38),
    0 1px 3px rgb(29 56 80 / 0.14);
  transition: box-shadow 0.35s var(--suave);
}
.inm:hover,
.inm:focus-within {
  --sube: -8px;
}
.inm:hover .inm-enlace,
.inm:focus-within .inm-enlace {
  box-shadow:
    calc(var(--sx) * -30px) calc(30px + var(--sy) * -14px) 50px -16px rgb(29 56 80 / 0.5),
    0 2px 5px rgb(29 56 80 / 0.14);
}
.inm-foto {
  position: relative;
  border: 3px double var(--azul);
  padding: 5px;
  background: #fffdf8;
}
.inm-foto::after {
  content: "";
  position: absolute;
  inset: -3px;
  z-index: -1;
  border: 1px solid var(--laton-claro);
  transition: transform 0.4s var(--suave);
}
.inm:hover .inm-foto::after,
.inm:focus-within .inm-foto::after {
  transform: translate(9px, 9px);
}
.inm-foto img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--arena);
  transition: transform 0.7s var(--suave);
}
.inm-foto {
  overflow: visible;
}
.inm-foto img {
  display: block;
}
.sin-foto {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  background: var(--arena);
  color: var(--gris);
  text-align: center;
  padding: 1rem;
}
.inm-etiqueta {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 0.2rem 0.7rem;
  background: var(--crema);
  color: var(--azul-noche);
  font-size: 0.82rem;
  font-weight: 600;
  box-shadow: 0 4px 10px -4px rgb(0 0 0 / 0.4);
}
.inm-etiqueta.fija {
  position: static;
  display: inline-block;
  background: var(--azul);
  color: var(--crema);
}
/* Etiqueta de precio sobre la foto, colgando del marco como una etiqueta de inmobiliaria. */
.inm-precios {
  position: absolute;
  left: -12px;
  bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: flex-start;
}
.inm-precio {
  padding: 0.4rem 0.9rem 0.4rem 0.8rem;
  background: linear-gradient(180deg, #96702a, var(--laton));
  color: #fffaf0;
  font: 1.25rem/1.15 var(--serif);
  box-shadow: 0 8px 14px -6px rgb(40 25 0 / 0.6);
}
.inm-precio small {
  margin-right: 0.35rem;
  font: 600 0.72rem var(--sans);
  opacity: 0.88;
}
.inm-tramos {
  position: absolute;
  left: 14px;
  right: 14px;
  top: 14px;
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.25s;
}
.inm-tramos i {
  flex: 1;
  height: 3px;
  background: rgb(251 247 238 / 0.5);
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.4);
}
.inm-tramos i.on {
  background: var(--crema);
}
.inm:hover .inm-tramos {
  opacity: 1;
}
.inm-texto {
  padding: 1.1rem 0.4rem 0;
}
.inm-texto h3 {
  font-size: 1.35rem;
  transition: color 0.2s;
}
.inm-enlace:hover h3 {
  color: var(--azul);
}
.inm-lugar {
  margin: 0.2rem 0 0;
  color: var(--gris);
  font-size: 0.95rem;
}
/* Franja de datos: icono, número y una palabra (como las tarjetas de las inmobiliarias de referencia). */
.inm-datos {
  display: flex;
  flex-wrap: wrap;
  margin: 0.9rem 0 0;
  padding: 0.7rem 0 0;
  border-top: 1px solid var(--linea);
  list-style: none;
}
.inm-datos li {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  column-gap: 0.4rem;
  padding: 0 0.6rem;
  border-left: 1px solid var(--linea);
  color: var(--azul);
}
.inm-datos li:first-child {
  padding-left: 0;
  border-left: 0;
}
.inm-datos strong {
  color: var(--azul-noche);
  font-size: 1.05rem;
}
.inm-datos small {
  grid-column: 1 / -1;
  color: var(--gris);
  font-size: 0.75rem;
}
.corazon {
  position: absolute;
  top: 24px;
  right: 24px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fffdf8;
  color: var(--azul-noche);
  box-shadow: 0 6px 14px -4px rgb(0 0 0 / 0.45);
  cursor: pointer;
  transition:
    transform 0.25s var(--suave),
    color 0.2s;
}
.corazon:hover {
  transform: scale(1.12);
}
.corazon .ico {
  width: 1.3rem;
  height: 1.3rem;
  transition: fill 0.2s;
}
[data-fav][aria-pressed="true"] {
  color: var(--ladrillo);
}
[data-fav][aria-pressed="true"] .ico {
  fill: var(--ladrillo);
}
.pop {
  animation: pop 0.45s var(--suave);
}
@keyframes pop {
  40% {
    transform: scale(1.35);
  }
}
/* Servicios con relieve */
.servicio {
  padding: 1.7rem 1.4rem 2rem;
  transition:
    box-shadow 0.35s var(--suave),
    transform 0.35s var(--suave),
    background 0.3s;
}
.servicio:hover {
  background: #fffdf8;
  box-shadow: var(--sombra-2);
  transform: translateY(-5px);
}

/* ---------- Ficha ---------- */
.detalle-herramientas {
  display: flex;
  gap: 0.6rem;
  margin: 0.8rem 0 0.6rem;
}
.herramienta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 40px;
  padding: 0.3rem 0.9rem;
  border: 1px solid var(--linea);
  background: #fffdf8;
  color: var(--azul-noche);
  font: 600 0.9rem var(--sans);
  cursor: pointer;
  transition: box-shadow 0.25s;
}
.herramienta:hover {
  box-shadow: var(--sombra-1);
}
.herramienta[aria-pressed="true"] {
  border-color: var(--ladrillo);
  color: var(--ladrillo);
}
.detalle-info {
  padding: 1.4rem 1.5rem 1.6rem;
  background: #fffdf8;
  box-shadow: var(--sombra-1);
}
.galeria-principal {
  box-shadow: var(--sombra-2);
}
.detalle-precio small {
  margin-right: 0.3rem;
  font: 600 0.8rem var(--sans);
  color: var(--gris);
}
.inm-datos-ficha {
  margin-top: 1.1rem;
}
.mini {
  box-shadow: 0 6px 12px -8px rgb(29 56 80 / 0.5);
}

/* ---------- Favoritos (panel que entra por la derecha) ---------- */
.favoritos {
  margin: 0 0 0 auto;
  width: min(420px, 100%);
  height: 100%;
  max-height: 100%;
  padding: 1.4rem 1.4rem 1.6rem;
  border: 0;
  background: var(--crema);
  color: var(--tinta);
  box-shadow: -24px 0 60px -20px rgb(29 56 80 / 0.55);
}
.favoritos::backdrop {
  background: rgb(20 32 44 / 0.55);
}
.favoritos-cabeza {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cerrar {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--linea);
  background: transparent;
  color: var(--azul-noche);
  cursor: pointer;
}
.favoritos-vacio {
  color: var(--gris);
}
.favoritos-lista {
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}
.favoritos-lista li {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) auto;
  gap: 0.8rem;
  align-items: center;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--linea);
}
.favoritos-lista img,
.favoritos-lista .sin-foto {
  width: 84px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  padding: 0;
  font-size: 0.7rem;
}
.favoritos-lista a {
  color: var(--azul-noche);
  font: 1.05rem/1.25 var(--serif);
  text-decoration: none;
}
.favoritos-lista small {
  display: block;
  color: var(--laton);
  font-weight: 600;
}
.favoritos-lista button {
  border: 0;
  background: none;
  color: var(--gris);
  cursor: pointer;
  padding: 0.5rem;
}
.favoritos-pie {
  align-items: center;
}

/* ---------- Barra fija de contacto en el celular ---------- */
.barra-movil {
  display: none;
}

/* ---------- Cursor propio (solo con ratón) ---------- */
#cursor {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 200;
  width: 0;
  height: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
}
#cursor.visible {
  opacity: 1;
}
.cursor-aro {
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  transform: translate(-50%, -50%);
  border: 1.5px solid var(--laton-claro);
  border-radius: 50%;
  background: rgb(201 162 77 / 0.1);
  box-shadow: 0 4px 14px rgb(29 56 80 / 0.25);
  color: var(--crema);
  font: 600 0.82rem var(--sans);
  transition:
    width 0.3s var(--suave),
    height 0.3s var(--suave),
    background 0.25s,
    border-color 0.25s;
}
.cursor-aro span {
  opacity: 0;
  transition: opacity 0.2s;
}
#cursor.con-texto .cursor-aro {
  width: 86px;
  height: 86px;
  border-color: transparent;
  background: rgb(29 56 80 / 0.9);
}
#cursor.con-texto .cursor-aro span {
  opacity: 1;
}
#cursor.sobre-boton .cursor-aro {
  width: 58px;
  height: 58px;
  background: rgb(201 162 77 / 0.22);
}
#cursor.presionado .cursor-aro {
  width: 24px;
  height: 24px;
}
/* En las zonas oscuras el aro se ve igual de claro. */
.con-cursor .hero,
.con-cursor .contacto {
  cursor: default;
}

/* =====================================================================
   Movimiento nuevo (solo con .anima)
   ===================================================================== */
.anima .hero-marco {
  animation: cerrar 1.4s var(--suave) both;
}
.anima .hero-texto > * {
  animation: subir 0.9s var(--suave) both;
}
.anima .hero-texto > :nth-child(1) {
  animation-delay: 0.25s;
}
.anima .hero-texto > :nth-child(2) {
  animation-delay: 0.45s;
}
.anima .hero-texto > :nth-child(3) {
  animation-delay: 0.65s;
}
.anima .hero-cristal {
  animation: subir 1s 0.8s var(--suave) both;
}
.anima .buscador-caja {
  animation: subir 0.9s 0.95s var(--suave) both;
}
.anima .casa-trazo path {
  stroke-dasharray: 700;
  stroke-dashoffset: 700;
  animation: dibujar 1.6s 0.5s var(--suave) forwards;
}
.anima .casa-trazo path:nth-child(2) {
  animation-delay: 0.8s;
}
.anima .casa-trazo path:nth-child(n + 3) {
  animation-delay: 1.2s;
}
@keyframes cerrar {
  from {
    inset: 70px;
    opacity: 0;
  }
  to {
    inset: 18px;
    opacity: 1;
  }
}
@keyframes subir {
  from {
    opacity: 0;
    transform: translateY(26px);
  }
}
@keyframes dibujar {
  to {
    stroke-dashoffset: 0;
  }
}
/* Tarjetas: la foto se descubre al entrar en pantalla y el precio «cae» después. */
.anima .inm[data-reveal] .inm-foto img {
  clip-path: inset(0 0 100% 0);
  transform: scale(1.1);
  transition:
    clip-path 0.95s var(--suave) var(--retraso, 0ms),
    transform 1.3s var(--suave) var(--retraso, 0ms);
}
.anima .inm[data-reveal].visto .inm-foto img {
  clip-path: inset(0 0 0 0);
  transform: scale(1);
}
.anima .inm[data-reveal].visto:hover .inm-foto img {
  transform: scale(1.05);
  transition-duration: 0.6s;
  transition-delay: 0ms;
}
.anima .inm[data-reveal] .inm-texto,
.anima .inm[data-reveal] .inm-etiqueta,
.anima .inm[data-reveal] .corazon {
  opacity: 0;
  transition: opacity 0.6s calc(0.35s + var(--retraso, 0ms));
}
.anima .inm[data-reveal] .inm-precios {
  opacity: 0;
  transform: translateX(-22px);
  transition:
    opacity 0.5s calc(0.7s + var(--retraso, 0ms)),
    transform 0.7s calc(0.7s + var(--retraso, 0ms)) var(--suave);
}
.anima .inm[data-reveal].visto .inm-texto,
.anima .inm[data-reveal].visto .inm-etiqueta,
.anima .inm[data-reveal].visto .corazon,
.anima .inm[data-reveal].visto .inm-precios {
  opacity: 1;
  transform: none;
}
.anima .inm[data-reveal].visto .corazon:hover {
  transform: scale(1.12);
}
/* Servicios: la regla de arriba se dibuja y después aparece el texto. */
.anima .servicio[data-reveal]::before {
  transform: scaleX(0);
  transition: transform 1s var(--suave) var(--retraso, 0ms);
}
.anima .servicio[data-reveal].visto::before {
  transform: scaleX(1);
}
.anima .servicio[data-reveal] > * {
  opacity: 0;
  transition: opacity 0.7s calc(0.4s + var(--retraso, 0ms));
}
.anima .servicio[data-reveal].visto > * {
  opacity: 1;
}

/* Contacto: el marco se traza al llegar. */
.anima .contacto-marco[data-reveal]::before {
  clip-path: inset(0 100% 100% 0);
  transition: clip-path 1.2s var(--suave);
}
.anima .contacto-marco[data-reveal].visto::before {
  clip-path: inset(0 0 0 0);
}

/* Pasos: la línea crece con el scroll y cada paso se enciende al llegar. */
.anima .paso:not(.activo) .paso-n {
  background: var(--crema);
  color: var(--gris);
  border-color: var(--linea);
}
.anima .paso.activo .paso-n {
  background: var(--azul);
  color: var(--crema);
}
.anima .paso h3,
.anima .paso p {
  transition: opacity 0.5s;
}
.anima .paso:not(.activo) h3,
.anima .paso:not(.activo) p {
  opacity: 0.55;
}


/* ---------- Pantallas chicas ---------- */
@media (max-width: 900px) {
  .menu {
    display: none;
  }
  .hero {
    min-height: 0;
  }
  .hero-contenido {
    flex-direction: column;
    align-items: flex-start;
    padding: 5rem 1.6rem 7rem;
  }
  .hero-cristal {
    width: 100%;
  }
  .buscador-caja {
    grid-template-columns: minmax(0, 1fr);
  }
  .boton-ver {
    width: 100%;
  }
  .detalle-rejilla {
    grid-template-columns: minmax(0, 1fr);
  }
  .detalle-info {
    position: static;
  }
  .servicios {
    grid-template-columns: minmax(0, 1fr);
  }
  .pie-interior {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 700px) {
  body {
    padding-bottom: 76px;
  }
  .barra-movil {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 65;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
    padding: 0.6rem 0.8rem calc(0.6rem + env(safe-area-inset-bottom));
    background: rgb(251 247 238 / 0.96);
    box-shadow: 0 -10px 30px -12px rgb(29 56 80 / 0.45);
  }
  .barra-movil .boton {
    min-height: 48px;
  }
  .barra-acciones .boton-wa {
    display: none;
  }
  .favoritos-boton span {
    display: none;
  }
}
@media (max-width: 520px) {
  body {
    font-size: 16px;
  }
  .marca span {
    font-size: 1rem;
  }
  .hero-marco {
    inset: 10px;
  }
  .rejilla {
    grid-template-columns: minmax(0, 1fr);
  }
  .f-buscar {
    grid-column: auto;
  }
  .buscador-caja {
    padding: 1.2rem 1rem 1.3rem;
  }
  .intencion {
    width: 100%;
  }
  .intencion label {
    flex: 1;
  }
  .intencion span {
    text-align: center;
    padding: 0.55rem 0.4rem;
  }
  .pasos {
    padding-left: 3.8rem;
  }
  .paso-n {
    left: -3.8rem;
    width: 2.5rem;
    height: 2.5rem;
  }
  .pasos::before,
  .pasos::after {
    left: 1.15rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    animation: none !important;
    transition: none !important;
  }
}
@media print {
  .barra,
  #progreso,
  .buscador,
  .barra-movil,
  .favoritos,
  .contacto,
  #cursor {
    display: none;
  }
}

/* ---- Revisión 7.5: vista previa para el equipo (la página está apagada) ---- */
.vista-previa {
  margin: 0;
  padding: 0.55rem 1rem;
  background: #fff3d6;
  border-bottom: 1px solid #e3c780;
  color: #5a4410;
  font-size: 0.88rem;
  line-height: 1.4;
  text-align: center;
}

/* ---------- Páginas numeradas del catálogo (Revisión 8.1) ---------- */
.paginas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 2.6rem;
}
.paginas[hidden] {
  display: none;
}
.pagina {
  min-width: 44px;
  min-height: 44px;
  padding: 0.3rem 0.8rem;
  border: 1px solid var(--linea);
  border-radius: 999px;
  background: transparent;
  color: var(--tinta);
  font: 600 1rem var(--sans);
  cursor: pointer;
  transition:
    background-color 0.2s,
    border-color 0.2s,
    color 0.2s;
}
.pagina:hover:not(:disabled) {
  border-color: var(--azul);
  color: var(--azul);
}
.pagina:focus-visible {
  outline: 3px solid var(--laton-claro);
  outline-offset: 2px;
}
.pagina[aria-current="page"] {
  border-color: var(--azul);
  background: var(--azul);
  color: #fff;
  cursor: default;
}
.pagina:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.pagina-flecha {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.pagina-hueco {
  min-width: 1.4rem;
  text-align: center;
  color: var(--gris);
}
@media (max-width: 640px) {
  .pagina-texto {
    display: none; /* En el celular solo las flechas: así caben los números. */
  }
  .pagina {
    padding: 0.3rem 0.5rem;
  }
}