/* ============================================
   SU CAPITAL AL INSTANTE — Estilos
   Azul institucional: #0049AF
   ============================================ */
:root {
  --azul: #0049AF;
  --azul-oscuro: #00337d;
  --azul-claro: #eaf1fb;
  --tinta: #14213d;
  --gris: #5b6579;
  --borde: #e3e8f1;
  --fondo: #ffffff;
  --fondo-suave: #f6f9fd;
  --wa: #15823a;            /* 4.90:1 sobre blanco; #178a3c se quedaba en 4.43 y no llegaba a AA */
  --radio: 12px;
  --sombra: 0 6px 24px rgba(20, 33, 61, .08);
  --fuente-titulos: 'Sora', system-ui, sans-serif;
  --fuente-texto: 'Inter', system-ui, sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: var(--fuente-texto); color: var(--tinta); background: var(--fondo); line-height: 1.6; font-size: 16px; display: flex; flex-direction: column; min-height: 100vh; }
img { max-width: 100%; display: block; }
main { flex: 1 0 auto; }
a { color: var(--azul); text-decoration: none; }
h1, h2, h3 { font-family: var(--fuente-titulos); line-height: 1.2; }
.contenedor { max-width: 1160px; margin: 0 auto; padding: 0 20px; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  padding: 13px 26px; border-radius: 10px; font-weight: 600; font-size: 15px;
  border: none; cursor: pointer; transition: .18s; font-family: var(--fuente-texto);
}
.btn-primario { background: var(--azul); color: #fff; }
.btn-primario:hover { background: var(--azul-oscuro); transform: translateY(-1px); }
.btn-borde { background: #fff; color: var(--azul); border: 1.5px solid var(--azul); }
.btn-borde:hover { background: var(--azul-claro); }
.btn-wa { background: var(--wa); color: #fff; }
.btn-wa:hover { filter: brightness(1.06); transform: translateY(-1px); }
.btn-chico { padding: 9px 16px; font-size: 13.5px; border-radius: 8px; }
.btn-grande { padding: 16px 34px; font-size: 16.5px; }

/* ---------- Cabecera ---------- */
.cabecera {
  position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.94);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--borde);
}
.cabecera-fila { display: flex; align-items: center; justify-content: space-between; gap: 18px; height: 70px; }
.cabecera .contenedor { max-width: 1320px; } /* solo la cabecera es más ancha; el resto conserva 1160px */
/* flex-shrink:0 en lo crítico: sin esto, cuando la fila no cabe, flexbox
   aplasta el logo hasta dejarlo como una barrita (bug real detectado) */
.logo { display: flex; align-items: center; flex-shrink: 0; }
.cabecera .logo img { height: 42px; width: auto; display: block; }
.idiomas, .cabecera-acciones .btn-wa { flex-shrink: 0; }
.nav { display: flex; gap: 16px; }
.nav a { color: var(--tinta); font-weight: 500; font-size: 14.5px; padding: 6px 0; border-bottom: 2px solid transparent; white-space: nowrap; }
.nav a:hover, .nav a.activo { color: var(--azul); border-bottom-color: var(--azul); }
.cabecera-acciones { display: flex; align-items: center; gap: 14px; }
.idiomas { display: flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: var(--gris); }
.idiomas a { color: var(--gris); padding: 3px 5px; border-radius: 5px; }
.idiomas a.activo { color: #fff; background: var(--azul); }
/* Hamburguesa animada: tres barras que se vuelven X. Las barras van en
   absolute centradas (la diagonal de una barra de 20px rotada mide ~28px):
   así la X nunca se recorta. Sin overflow:hidden en el botón. */
.menu-btn {
  display: none; width: 44px; height: 44px; background: none; border: none; cursor: pointer;
  padding: 0; flex-shrink: 0; position: relative; overflow: visible;
}
.menu-btn span {
  position: absolute; left: 50%; top: 50%; width: 20px; height: 2px; border-radius: 2px;
  background: var(--tinta); transform: translate(-50%, -50%);
  transition: transform .32s cubic-bezier(.68,-.35,.27,1.35), opacity .32s cubic-bezier(.68,-.35,.27,1.35);
}
.menu-btn span:nth-child(1) { transform: translate(-50%, calc(-50% - 8px)); }
.menu-btn span:nth-child(3) { transform: translate(-50%, calc(-50% + 8px)); }
/* Al cerrar: las externas vuelven primero (delay 0), la media reaparece después */
.menu-btn span:nth-child(2) { transition-delay: .06s; }
/* Al abrir: la media desaparece primero (delay 0), las externas rotan después */
.menu-btn.abierto span:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); transition-delay: .06s; }
.menu-btn.abierto span:nth-child(2) { opacity: 0; transform: translate(-50%, -50%) scaleX(0); transition-delay: 0s; }
.menu-btn.abierto span:nth-child(3) { transform: translate(-50%, -50%) rotate(-45deg); transition-delay: .06s; }
@media (prefers-reduced-motion: reduce) {
  .menu-btn span { transition: none !important; }
  .nav.abierto a { animation: none !important; }
  .nav { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
}
@keyframes nav-item-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}
.nav-publicar svg { display: inline-block; width: 16px; height: 16px; }

/* WhatsApp de cabecera siempre circular solo-ícono: con el nav completo el
   texto no cabe en ningún ancho (el contenedor tope es 1320px) */
.cabecera-acciones .btn-wa { width: 40px; height: 40px; padding: 0; border-radius: 50%; justify-content: center; }
.btn-wa-texto { display: none; }

/* ---------- Nav: submenú "Dónde invertir" ---------- */
.nav-sub { position: relative; display: inline-flex; align-items: center; gap: 2px; }
.nav-sub-flecha {
  background: none; border: none; cursor: pointer; color: var(--gris); padding: 4px;
  display: inline-flex; align-items: center; transition: transform .2s;
}
.nav-sub-menu {
  display: none; position: absolute; top: calc(100% + 8px); left: -10px; min-width: 175px;
  background: #fff; border: 1px solid var(--borde); border-radius: 12px;
  box-shadow: 0 10px 30px rgba(20,33,61,.14); padding: 6px; z-index: 60;
}
/* Puente invisible: cubre los 8px entre el link y el panel (el gap del
   top: calc(100% + 8px)) para que el mouse nunca salga del área al bajar */
.nav-sub-menu::before {
  content: ""; position: absolute; top: -8px; left: 0; right: 0; height: 8px;
  background: transparent;
}
.nav-sub-menu a { display: block; padding: 10px 12px; border-radius: 8px; font-size: 14px; border-bottom: none !important; }
.nav-sub-menu a:hover { background: var(--azul-claro); border-bottom: none; }
.nav-sub.abierto .nav-sub-menu { display: block; }
.nav-sub.abierto .nav-sub-flecha { transform: rotate(180deg); color: var(--azul); }
@media (min-width: 1340px) {
  /* Foco de teclado abre por CSS; el hover lo maneja JS (necesita los
     retrasos de 120ms al abrir y 250ms al cerrar — :hover es instantáneo) */
  .nav-sub:focus-within .nav-sub-menu { display: block; }
  .nav-sub:focus-within .nav-sub-flecha { transform: rotate(180deg); color: var(--azul); }
}
@media (max-width: 1339px) {
  /* En el menú móvil: fila con flecha y las ciudades indentadas al expandir */
  .nav-sub { display: flex; align-items: center; justify-content: space-between; position: static; flex-wrap: wrap; }
  .nav-sub > a { flex: 1; }
  .nav-sub-flecha { width: 44px; height: 44px; justify-content: center; }
  .nav-sub-menu {
    position: static; display: none; box-shadow: none; border: none; border-radius: 0;
    padding: 0 0 0 18px; min-width: 0; flex-basis: 100%;
  }
  .nav-sub.abierto .nav-sub-menu { display: block; }
}

/* ---------- Hero ---------- */
.hero {
  background: linear-gradient(135deg, var(--azul-oscuro) 0%, var(--azul) 60%, #1565d8 100%);
  color: #fff; padding: 84px 0 90px; position: relative; overflow: hidden;
}
.hero::after {
  content: ""; position: absolute; right: -140px; top: -140px; width: 480px; height: 480px;
  border-radius: 50%; background: rgba(255,255,255,.06);
}
.hero::before {
  content: ""; position: absolute; right: 60px; bottom: -180px; width: 380px; height: 380px;
  border-radius: 50%; background: rgba(255,255,255,.05);
}
/* 720px: con el tercer botón, los tres caben en una fila en escritorio */
.hero-inner { max-width: 720px; position: relative; z-index: 1; }
.hero h1 { font-size: clamp(30px, 4.6vw, 48px); font-weight: 800; margin-bottom: 16px; letter-spacing: -.5px; }
.hero p { font-size: 17.5px; color: rgba(255,255,255,.88); margin-bottom: 30px; }
.hero-botones { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-botones .btn-grande { padding: 15px 24px; font-size: 16px; }
.hero .btn-borde { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.5); }
.hero .btn-borde:hover { background: rgba(255,255,255,.22); }
@media (max-width: 640px) {
  .hero-botones { flex-direction: column; align-items: stretch; }
  /* Tres botones + buscador: más compactos para que el conjunto quepa en pantalla */
  .hero-botones .btn-grande { padding: 12px 22px; font-size: 15.5px; }
}

/* ---------- Hero cinematográfico ---------- */
.hero-media {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  z-index: 0;
}
/* El Ken Burns es exclusivo del nivel 2 de la cascada (hay hero.jpg y no hay
   hero.mp4). Con video, el plano ya tiene movimiento propio: sumarle el zoom
   se percibe como vibración. Y como la animación no vive en el elemento
   <video>, su poster tampoco escala: al arrancar la reproducción no hay salto. */
.hero-media--imagen { animation: hero-kenburns 20s ease-in-out infinite alternate; }
/* Explícito a propósito: si algún día vuelve una animación a .hero-media,
   el video sigue quieto. */
.hero-media--video { animation: none; }
.hero-cine::before {
  content: ""; position: absolute; inset: 0; width: auto; height: auto; border-radius: 0;
  z-index: 1;
  background: linear-gradient(100deg, rgba(0,51,125,.90) 0%, rgba(0,73,175,.72) 45%, rgba(0,73,175,.45) 100%);
}
.hero-cine::after { display: none; }
.hero-cine .hero-inner { z-index: 2; }
@keyframes hero-kenburns { from { transform: scale(1); } to { transform: scale(1.08); } }
@keyframes hero-entrada {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
.hero h1      { animation: hero-entrada .7s cubic-bezier(.22,.61,.36,1) .1s both; }
.hero p       { animation: hero-entrada .7s cubic-bezier(.22,.61,.36,1) .28s both; }
.hero-botones { animation: hero-entrada .7s cubic-bezier(.22,.61,.36,1) .46s both; }
.hero-scroll {
  position: absolute; left: 50%; bottom: 18px; z-index: 2; display: inline-flex;
  color: rgba(255,255,255,.65); transform: translateX(-50%);
  animation: hero-flote 2.2s ease-in-out infinite;
}
.hero-scroll:hover { color: #fff; }
@keyframes hero-flote {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 8px); }
}
@media (max-width: 640px) { .hero-scroll { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .hero-media, .hero-media--imagen, .hero h1, .hero p, .hero-botones, .hero-scroll { animation: none; }
  .hero-scroll { display: none; }
}

/* ---------- Value props ---------- */
.props { padding: 64px 0; }
.props-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.prop-card {
  background: var(--fondo-suave); border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 28px 24px;
  /* Ahora son enlaces: sin esto heredarían el azul global de <a> */
  display: block; color: inherit; transition: .18s;
}
.prop-card:hover { border-color: var(--azul); transform: translateY(-2px); box-shadow: 0 8px 22px rgba(20,33,61,.08); }
.prop-card:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }
.prop-card .icono {
  width: 46px; height: 46px; border-radius: 12px; background: var(--azul-claro);
  display: flex; align-items: center; justify-content: center; color: var(--azul); margin-bottom: 16px;
}
.prop-card .icono svg { width: 24px; height: 24px; }
.prop-card h3 { font-size: 17.5px; margin-bottom: 8px; }
.prop-card p { font-size: 14.5px; color: var(--gris); }

/* ---------- Secciones ---------- */
.seccion { padding: 56px 0; }
.seccion-titulo { font-size: clamp(24px, 3vw, 32px); font-weight: 800; margin-bottom: 28px; letter-spacing: -.4px; }
.seccion-alt { background: var(--fondo-suave); }

/* ---------- Cards de propiedades ---------- */
.grid-propiedades { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.tarjeta {
  background: #fff; border: 1px solid var(--borde); border-radius: var(--radio);
  overflow: hidden; transition: .2s; box-shadow: 0 2px 10px rgba(20,33,61,.04);
}
.tarjeta:hover { transform: translateY(-4px); box-shadow: var(--sombra); }
.tarjeta-foto { position: relative; aspect-ratio: 4/3; background: var(--azul-claro); overflow: hidden; }
.tarjeta-foto img { width: 100%; height: 100%; object-fit: cover; }
.tarjeta-tipo {
  position: absolute; top: 12px; left: 12px; background: rgba(0,73,175,.92); color: #fff;
  font-size: 14px; font-weight: 600; padding: 5px 12px; border-radius: 30px; letter-spacing: .3px;
}
.tarjeta-cuerpo { padding: 18px; }
.tarjeta-precio { font-family: var(--fuente-titulos); font-weight: 800; font-size: 20px; color: var(--azul); }
.tarjeta-titulo { font-weight: 600; font-size: 15.5px; margin: 6px 0 3px; color: var(--tinta); }
.tarjeta-sector { font-size: 13.5px; color: var(--gris); display: inline-flex; align-items: center; gap: 5px; }
.tarjeta-datos {
  display: flex; gap: 14px; margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--borde);
  font-size: 13px; color: var(--gris); font-weight: 500;
}
.tarjeta-datos span { display: inline-flex; align-items: center; gap: 5px; }
.tarjeta-sector svg, .tarjeta-datos span svg { width: 15px; height: 15px; color: var(--gris); flex-shrink: 0; }

/* ---------- Filtros ---------- */
.filtros {
  background: #fff; border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 18px; display: grid; grid-template-columns: repeat(4, 1fr) auto; gap: 12px;
  align-items: end; margin-bottom: 30px; box-shadow: 0 2px 10px rgba(20,33,61,.04);
}
.filtro label { display: block; font-size: 12px; font-weight: 600; color: var(--gris); margin-bottom: 5px; text-transform: uppercase; letter-spacing: .5px; }
.filtro select, .filtro input {
  width: 100%; padding: 10px 12px; border: 1.5px solid var(--borde); border-radius: 8px;
  /* 16px es el mínimo: por debajo, iOS hace zoom automático al enfocar el campo */
  font-family: var(--fuente-texto); font-size: 16px; color: var(--tinta); background: #fff;
}
.filtro select:focus, .filtro input:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(0,73,175,.18); }

/* Rango de precio manual */
.filtro-precio { grid-column: span 2; }
.precio-rango { display: flex; gap: 10px; }
.precio-campo { position: relative; flex: 1 1 50%; min-width: 0; }
.precio-campo span { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--gris); font-size: 14px; pointer-events: none; }
.precio-campo input { padding-left: 24px; }
.precio-rango.error input { border-color: #d64545; background: #fdf3f3; }
.precio-atajos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.precio-atajo {
  border: none; cursor: pointer; border-radius: 999px; background: var(--azul-claro);
  color: var(--azul); font-size: 14px; font-weight: 600; font-family: var(--fuente-texto);
  min-height: 44px; padding: 0 16px; display: inline-flex; align-items: center;
}
.precio-atajo:hover { background: rgba(0,73,175,.16); }

/* ---------- Detalle de propiedad ---------- */
.detalle { padding: 40px 0 60px; }
.detalle-grid { display: grid; grid-template-columns: 1.45fr 1fr; gap: 32px; align-items: start; }
.galeria-principal {
  border-radius: var(--radio); overflow: hidden; aspect-ratio: 16/10; background: var(--azul-claro);
}
.galeria-principal img { width: 100%; height: 100%; object-fit: cover; }
.galeria-mini { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 10px; }
.galeria-mini button {
  border: 2px solid transparent; border-radius: 9px; overflow: hidden; padding: 0; cursor: pointer;
  aspect-ratio: 4/3; background: var(--azul-claro);
}
.galeria-mini button.activo { border-color: var(--azul); }
.galeria-mini img { width: 100%; height: 100%; object-fit: cover; }
.ficha {
  background: #fff; border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 24px; box-shadow: 0 2px 10px rgba(20,33,61,.04); position: sticky; top: 90px;
}
.ficha-precio { font-family: var(--fuente-titulos); font-weight: 800; font-size: 28px; color: var(--azul); }
/* Es un <h1> (la ficha es la página que posiciona por inmueble), pero conserva
   el aspecto que tenía como <div>: sin la fuente de títulos ni su interlineado */
.ficha-titulo { font-size: 18px; font-weight: 700; margin: 8px 0 2px; font-family: var(--fuente-texto); line-height: 1.6; }
.ficha-sector { color: var(--gris); font-size: 14px; margin-bottom: 16px; display: flex; align-items: center; gap: 5px; }
.ficha-sector svg { flex-shrink: 0; }
.ficha-tabla { width: 100%; border-collapse: collapse; margin: 8px 0 18px; }
.ficha-tabla td { padding: 9px 0; border-bottom: 1px solid var(--borde); font-size: 14.5px; }
.ficha-tabla td:first-child { color: var(--gris); }
.ficha-tabla td:last-child { text-align: right; font-weight: 600; }
.ficha .btn { width: 100%; }
.nota-ubicacion { font-size: 12.5px; color: var(--gris); margin-top: 12px; display: flex; gap: 7px; align-items: flex-start; }
.nota-ubicacion svg { width: 16px; height: 16px; flex-shrink: 0; }
.detalle-descripcion { margin-top: 34px; }
.detalle-descripcion h2 { font-size: 22px; margin-bottom: 14px; }
.detalle-descripcion p { color: #3a4358; white-space: pre-line; }

/* ---------- Video YouTube (carga diferida) ---------- */
.video-seccion { margin-top: 34px; }
.video-seccion h2 { font-size: 22px; margin-bottom: 14px; }
.yt-facade {
  position: relative; aspect-ratio: 16/9; border-radius: var(--radio); overflow: hidden;
  cursor: pointer; background: #000; border: none; padding: 0; width: 100%;
}
.yt-facade img { width: 100%; height: 100%; object-fit: cover; opacity: .85; }
.yt-facade .play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
}
.yt-facade .play span {
  width: 72px; height: 72px; border-radius: 50%; background: rgba(0,73,175,.92);
  display: flex; align-items: center; justify-content: center; color: #fff; font-size: 26px;
  padding-left: 5px; transition: .18s;
}
.yt-facade:hover .play span { transform: scale(1.08); background: var(--azul); }
.yt-frame { aspect-ratio: 16/9; border-radius: var(--radio); overflow: hidden; }
.yt-frame iframe { width: 100%; height: 100%; border: 0; }

/* ---------- CTA préstamos ---------- */
.cta-banda {
  background: linear-gradient(120deg, var(--azul-oscuro), var(--azul));
  color: #fff; border-radius: 18px; padding: 44px 40px;
  display: flex; align-items: center; justify-content: space-between; gap: 26px; flex-wrap: wrap;
}
.cta-banda h2 { font-size: clamp(21px, 2.6vw, 28px); margin-bottom: 6px; }
.cta-banda p { color: rgba(255,255,255,.85); max-width: 520px; }
.cta-banda .btn { background: #fff; color: var(--azul); flex-shrink: 0; }
.cta-banda .btn:hover { background: var(--azul-claro); }

/* ---------- Sección de préstamos en el inicio ---------- */
.prestamos-inicio {
  background: linear-gradient(135deg, var(--azul-oscuro) 0%, var(--azul) 65%, #1565d8 100%);
  color: #fff; border-radius: 22px; padding: 60px 48px; text-align: center;
  position: relative; overflow: hidden;
}
.prestamos-inicio::after {
  content: ""; position: absolute; right: -120px; top: -120px; width: 340px; height: 340px;
  border-radius: 50%; background: rgba(255,255,255,.06);
}
.prestamos-inicio > * { position: relative; z-index: 1; }
.prestamos-inicio h2 { font-size: clamp(23px, 3vw, 33px); margin-bottom: 12px; letter-spacing: -.3px; }
.prestamos-inicio-sub { color: rgba(255,255,255,.88); font-size: 16.5px; max-width: 580px; margin: 0 auto 34px; }
.prestamos-inicio-puntos { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.prestamo-punto {
  display: flex; align-items: center; gap: 12px; text-align: left;
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.18);
  border-radius: 14px; padding: 15px 18px; font-weight: 600; font-size: 15px;
  flex: 1 1 0; min-width: 230px; max-width: 330px;
}
.prestamo-punto-icono {
  width: 40px; height: 40px; border-radius: 10px; background: rgba(255,255,255,.14);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.prestamos-inicio-nota { font-size: 14px; color: rgba(255,255,255,.72); margin-bottom: 30px; }
.prestamos-inicio-botones { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
.prestamos-inicio .btn-claro { background: #fff; color: var(--azul); }
.prestamos-inicio .btn-claro:hover { background: var(--azul-claro); transform: translateY(-1px); }
.prestamos-inicio .btn-borde-claro { background: rgba(255,255,255,.12); color: #fff; border: 1.5px solid rgba(255,255,255,.5); }
.prestamos-inicio .btn-borde-claro:hover { background: rgba(255,255,255,.22); }
@media (max-width: 767px) {
  .prestamos-inicio { padding: 42px 22px; border-radius: 18px; }
  .prestamo-punto { max-width: none; flex-basis: 100%; }
  .prestamos-inicio-botones .btn { width: 100%; }
}

/* ---------- Préstamos ---------- */
.alerta {
  background: #fff7ed; border: 1px solid #fdd9a8; border-left: 4px solid #ea8a1f;
  border-radius: 10px; padding: 16px 20px; margin: 22px 0; font-size: 15px;
}
.alerta b { color: #b45309; }
.alerta svg { width: 18px; height: 18px; color: #b45309; vertical-align: -3px; margin-right: 2px; }
/* Pasos y requisitos: filas apiladas (móvil y escritorio); tarjetas solo en tablet */
.prestamos-h2 { font-size: 22px; margin-top: 34px; }
.pasos { display: grid; gap: 14px; margin: 22px 0; }
.paso {
  background: var(--fondo-suave); border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 16px 18px; display: flex; align-items: flex-start; gap: 14px;
}
.paso .num {
  width: 34px; height: 34px; border-radius: 50%; background: var(--azul); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700;
  font-family: var(--fuente-titulos); flex-shrink: 0;
}
.paso p { font-size: 14.5px; color: #3a4358; align-self: center; }

/* Requisitos básicos de préstamos (editables en el panel) */
.requisitos-sub { color: #3a4358; font-size: 15.5px; margin-top: 6px; }
.requisitos { display: grid; gap: 14px; margin: 22px 0 14px; }
.req-tarjeta {
  position: relative; background: #fff; border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 16px 18px; display: flex; align-items: flex-start; gap: 14px;
}
.req-tarjeta > svg { color: var(--azul); flex-shrink: 0; margin-top: 2px; }
.req-num {
  position: absolute; top: 10px; right: 14px; font-size: 26px; font-weight: 800; line-height: 1;
  color: var(--azul-claro); font-family: var(--fuente-titulos);
}
.req-tarjeta h3 { font-size: 16.5px; margin: 0 0 4px; }
.req-tarjeta p { font-size: 14.5px; color: #3a4358; }
.requisitos-nota { font-size: 13.5px; color: var(--gris); max-width: 720px; }
.prestamos-grid .form-prestamo { margin-top: 26px; }

/* Costo del crédito: Google Ads lo revisa a la vista, así que nunca se pliega ni se oculta */
.costo-lista { display: grid; gap: 14px; margin: 22px 0 18px; }
.costo-item {
  background: #fff; border: 1px solid var(--borde); border-left: 4px solid var(--azul);
  border-radius: var(--radio); padding: 16px 18px;
}
.costo-item dt {
  font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px;
  color: var(--azul); margin-bottom: 5px;
}
.costo-item dd { font-size: 14.5px; color: #3a4358; margin: 0; }
.costo-ejemplo {
  background: var(--fondo-suave); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 20px 22px;
}
.costo-ejemplo h3 {
  font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px;
  color: var(--azul); margin-bottom: 8px;
}
.costo-ejemplo-intro { font-size: 14.5px; color: #3a4358; }
.costo-cifras { list-style: none; margin: 14px 0; padding: 0; }
.costo-cifras li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 9px 0; border-bottom: 1px dashed var(--borde); font-size: 14.5px; color: #3a4358;
}
.costo-cifras li:last-child { border-bottom: none; }
.costo-cifras b { font-family: var(--fuente-titulos); font-size: 15.5px; color: var(--tinta); white-space: nowrap; }
.costo-ejemplo-nota { font-size: 14px; color: #3a4358; }
.costo-legal { font-size: 12.5px; color: var(--gris); line-height: 1.6; margin-top: 14px; max-width: 720px; }
/* Pantallas muy angostas: la cifra baja bajo su etiqueta en vez de apretarse */
@media (max-width: 400px) {
  .costo-cifras li { flex-direction: column; gap: 2px; }
  .costo-item, .costo-ejemplo { padding-left: 15px; padding-right: 15px; }
}

/* Tablet: pasos y requisitos vuelven a tarjetas en fila de 3 (o 2 si no caben) */
@media (min-width: 768px) and (max-width: 1023px) {
  .pasos, .requisitos { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; }
  .paso, .req-tarjeta { flex-direction: column; gap: 10px; padding: 22px; }
  .paso .num { margin-bottom: 2px; }
  .req-tarjeta h3 { margin-top: 4px; }
}

/* Escritorio: dos columnas y formulario pegajoso como elemento de acción */
@media (min-width: 1024px) {
  /* Tres filas en la columna izquierda (pasos, requisitos, costo) y el formulario
     abarcándolas todas: la fila flexible va al final, así el alto del formulario
     no abre huecos entre los bloques de la izquierda */
  .prestamos-grid { display: grid; grid-template-columns: 3fr 2fr; grid-template-rows: auto auto 1fr; gap: 40px; align-items: start; margin-top: 34px; }
  .prestamos-pasos, .prestamos-requisitos, .prestamos-costo { grid-column: 1; }
  .prestamos-pasos .prestamos-h2 { margin-top: 0; }
  .prestamos-grid .form-prestamo {
    grid-column: 2; grid-row: 1 / -1; align-self: start;
    position: sticky; top: 90px; margin-top: 0; width: 100%; max-width: none;
    background: var(--fondo-suave); box-shadow: 0 10px 28px rgba(20, 33, 61, .10);
  }
}

/* Móvil y tablet vertical: requisitos → formulario → costo → cómo funciona (orden por
   flex, sin duplicar HTML). El formulario sube porque es la acción principal y la página
   recibe tráfico pagado; el bloque de costos queda justo debajo, visible sin ninguna
   interacción. Desde 1024px manda el layout de dos columnas con el formulario pegajoso. */
@media (max-width: 1023px) {
  .prestamos-grid { display: flex; flex-direction: column; }
  .prestamos-requisitos { order: 1; }
  .prestamos-grid .form-prestamo { order: 2; }
  .prestamos-costo { order: 3; }
  .prestamos-pasos { order: 4; }
}
.form-prestamo {
  background: #fff; border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 30px; max-width: 560px; box-shadow: 0 2px 10px rgba(20,33,61,.04);
  /* Al llegar por el ancla, que no quede tapado por la cabecera pegajosa (70px) */
  scroll-margin-top: 86px;
}
/* Atajo al formulario: donde el formulario no está a la vista (una sola columna).
   Se limita a 560px para no quedar estirado de lado a lado en tablet. */
.btn-ir-form { display: none; }
@media (max-width: 1023px) {
  .btn-ir-form {
    display: flex; width: 100%; max-width: 560px; min-height: 50px;
    padding: 0 20px; margin-bottom: 22px; font-size: 16px;
  }
}
/* El scroll suave es global; quien pide menos movimiento va directo, sin animación */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.form-prestamo h2 { font-size: 21px; margin-bottom: 18px; }
.campo { margin-bottom: 15px; }
.campo label { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 5px; }
.campo input, .campo textarea, .campo select {
  width: 100%; padding: 12px 13px; border: 1.5px solid var(--borde); border-radius: 9px;
  /* 16px es el mínimo: por debajo, iOS hace zoom automático al enfocar el campo */
  font-family: var(--fuente-texto); font-size: 16px; color: var(--tinta); background: #fff;
}
.campo input:focus, .campo textarea:focus, .campo select:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(0,73,175,.18); }
.form-nota { font-size: 14px; color: var(--gris); margin-top: 10px; }
.nota-legal-caja {
  background: var(--fondo-suave); border: 1px solid var(--borde); border-radius: 10px;
  padding: 16px 20px; margin-top: 28px; font-size: 13px; color: var(--gris);
}

/* ---------- Quiénes somos ---------- */
.quienes .contenedor > p { max-width: 760px; margin-bottom: 16px; color: #3a4358; font-size: 16.5px; }

/* Perfil del asesor (editable en Panel > Ajustes) */
.perfil { display: grid; grid-template-columns: 380px 1fr; gap: 40px; align-items: start; margin-top: 48px; }
.perfil-sin-foto { grid-template-columns: 1fr; }
.perfil-foto img {
  display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: top;
  border-radius: 16px; box-shadow: 0 12px 32px rgba(20, 33, 61, .14);
}
.perfil-info h3 { font-size: 24px; margin-bottom: 2px; }
.perfil-cargo { font-size: 14px; color: var(--gris); margin-bottom: 14px; }
.perfil-texto { color: #3a4358; font-size: 16.5px; max-width: 640px; }
.perfil-redes { display: flex; gap: 10px; margin-top: 18px; }
.perfil-redes a {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--borde);
  display: flex; align-items: center; justify-content: center; color: var(--azul);
  transition: background .18s, color .18s, border-color .18s;
}
.perfil-redes .red-whatsapp:hover { background: #25D366; color: #fff; border-color: transparent; }
.perfil-redes .red-linkedin:hover { background: #0A66C2; color: #fff; border-color: transparent; }
.perfil-redes .red-facebook:hover { background: #1877F2; color: #fff; border-color: transparent; }
.perfil-redes .red-instagram:hover { background: #E4405F; color: #fff; border-color: transparent; }
@media (max-width: 900px) {
  .perfil { grid-template-columns: 1fr; gap: 24px; }
  .perfil-foto { max-width: 340px; }
}

/* ---------- Footer ---------- */
.pie { background: var(--tinta); color: #c6cede; margin-top: 60px; flex-shrink: 0; }
.pie a { color: #fff; }
.pie-grid { display: grid; grid-template-columns: 1.2fr .7fr .7fr 1.4fr; gap: 30px; padding: 46px 20px 34px; }
.pie-logo img { height: 38px; width: auto; display: block; filter: brightness(0) invert(1); }
.pie-texto { font-size: 14px; margin-top: 8px; }
.pie-titulo { color: #fff; font-size: 14px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px; font-family: var(--fuente-titulos); }
.pie-lista { list-style: none; }
.pie-lista li { margin-bottom: 0; font-size: 14.5px; }
/* 44px de alto real: en el pie los enlaces iban a 17px y quedaban muy juntos */
.pie-lista a, .pie-link-btn { display: inline-flex; align-items: center; min-height: 44px; }
.pie-legal p { font-size: 14px; line-height: 1.6; color: #9aa8c0; }
.pie-final { border-top: 1px solid rgba(255,255,255,.1); padding: 16px 0; font-size: 14px; color: #8fa0bd; }

/* ---------- WhatsApp flotante ---------- */
.wa-flotante {
  position: fixed; right: 22px; bottom: 22px; z-index: 60;
  width: 58px; height: 58px; border-radius: 50%; background: var(--wa); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 22px rgba(34,169,78,.4); transition: opacity .2s, box-shadow .18s;
  /* Entrada con fill backwards: oculto solo durante el delay; el estado base es
     visible, así el hover puede matar las animaciones sin apagar el botón */
  animation: wa-entrada .45s cubic-bezier(.34,1.56,.64,1) 1.2s backwards,
             wa-respira 3.5s ease-in-out 1.65s infinite;
}
.wa-flotante:hover { animation: none; transform: scale(1.08); }
.wa-flotante::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: var(--wa); z-index: -1; pointer-events: none; opacity: 0;
}
.wa-flotante.con-halo::before { animation: wa-halo 2.2s ease-out 3; }
@keyframes wa-entrada {
  0%   { opacity: 0; transform: scale(0); }
  70%  { opacity: 1; transform: scale(1.1); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes wa-respira {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.045); }
}
@keyframes wa-halo {
  0%   { transform: scale(1); opacity: .55; }
  100% { transform: scale(1.9); opacity: 0; }
}

/* Burbuja de invitación (sin badge falso: invita, no simula mensajes) */
.wa-burbuja {
  position: fixed; right: 92px; bottom: 28px; z-index: 60;
  background: #fff; border-radius: 14px 14px 4px 14px;
  box-shadow: 0 6px 24px rgba(20,33,61,.16);
  padding: 12px 16px; max-width: 230px;
  display: flex; gap: 10px; align-items: flex-start;
  opacity: 0; transform: translateX(14px); pointer-events: none;
  transition: opacity .35s, transform .35s;
}
.wa-burbuja[hidden] { display: none; }
.wa-burbuja.visible { opacity: 1; transform: none; pointer-events: auto; }
.wa-burbuja a { font-size: 14px; color: var(--tinta); line-height: 1.45; }
.wa-burbuja-cerrar {
  width: 24px; height: 24px; flex-shrink: 0; border: none; border-radius: 50%;
  background: #f0f2f6; color: var(--gris); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.wa-burbuja-cerrar:hover { background: var(--azul-claro); color: var(--azul); }
@media (max-width: 640px) {
  .wa-burbuja { max-width: 190px; }
  .wa-burbuja a { font-size: 13px; }
}

/* Con el overlay de búsqueda o el panel de filtros abiertos (ambos ponen
   body.sin-scroll), el botón y la burbuja se ocultan */
body.sin-scroll .wa-flotante, body.sin-scroll .wa-burbuja { opacity: 0 !important; pointer-events: none !important; }

@media (prefers-reduced-motion: reduce) {
  .wa-flotante, .wa-flotante::before { animation: none !important; }
  .wa-burbuja { transition: none; }
}

/* ---------- Consentimiento de datos (Ley 1581) ---------- */
.campo-consentimiento { border-radius: 8px; padding: 4px; margin: -4px; }
.campo-consentimiento.error { outline: 1.5px solid #d64545; background: #fdf3f3; }
.consentimiento { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 13.5px; color: var(--gris); line-height: 1.5; }
.consentimiento input { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; accent-color: var(--azul); }
.consentimiento a { color: var(--azul); text-decoration: underline; }
@media (max-width: 640px) { .consentimiento { min-height: 44px; } }
.consentimiento-error { color: #d64545; font-size: 14px; font-weight: 600; margin-top: 6px; }

/* ---------- Propiedades vendidas ---------- */
.tarjeta-vendida .tarjeta-foto img { filter: grayscale(.35); opacity: .72; }
.sello-vendida {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(-12deg);
  background: rgba(20, 33, 61, .82); color: #fff;
  font-family: var(--fuente-titulos); font-weight: 800; font-size: 20px;
  letter-spacing: 4px; padding: 8px 26px; border: 2px solid rgba(255,255,255,.85);
  border-radius: 6px; pointer-events: none;
}
.aviso-vendida { background: var(--fondo-suave); border: 1px solid var(--borde); border-radius: 10px; padding: 18px; margin-top: 8px; }
.aviso-vendida p { font-size: 14.5px; color: var(--gris); margin-bottom: 14px; }
.aviso-vendida-botones { display: flex; flex-direction: column; gap: 10px; }

/* ---------- Página de política de datos ---------- */
.politica h2 { font-size: 19px; margin: 26px 0 8px; }
.politica p { color: #3a4358; margin-bottom: 10px; }
.politica ul { margin: 0 0 10px 22px; color: #3a4358; }
.politica li { margin-bottom: 6px; }
.politica-fecha { font-size: 14px; color: var(--gris); margin-top: 30px; }

/* ---------- Buscador (píldora) ---------- */
.buscador {
  position: relative; display: flex; align-items: center;
  background: #fff; border-radius: 999px; height: 58px;
  box-shadow: 0 4px 20px rgba(20,33,61,.10);
  transition: box-shadow .18s;
}
.buscador:focus-within { box-shadow: 0 6px 24px rgba(20,33,61,.14), 0 0 0 3px rgba(0,73,175,.18); }
.buscador-lupa { display: flex; align-items: center; padding-left: 22px; color: var(--gris); flex-shrink: 0; }
.buscador input {
  flex: 1; min-width: 0; border: none; outline: none; background: transparent;
  font-size: 16px; font-family: var(--fuente-texto); color: var(--tinta);
  padding: 0 10px 0 12px; height: 100%; border-radius: inherit;
}
.buscador input::-webkit-search-cancel-button { display: none; }
.buscador-btn {
  height: 44px; margin: 6px 6px 6px 0; padding: 0 22px; border: none; cursor: pointer;
  background: var(--azul); color: #fff; border-radius: 999px; font-weight: 600;
  font-size: 14.5px; font-family: var(--fuente-texto); flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; transition: background .18s;
}
.buscador-btn:hover { background: var(--azul-oscuro); }
.buscador-btn-lupa { display: none; }

/* Variante hero: sobre el degradado/video, despega más */
.buscador-hero { max-width: 560px; margin-top: 22px; box-shadow: 0 10px 34px rgba(0,20,50,.30); }
.buscador-hero:focus-within { box-shadow: 0 10px 34px rgba(0,20,50,.34), 0 0 0 3px rgba(255,255,255,.35); }
.buscador-fantasma {
  position: absolute; left: 54px; right: 130px; top: 50%; transform: translateY(-50%);
  color: var(--gris); font-size: 16px; pointer-events: none; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; opacity: 0; transition: opacity .4s;
}
.buscador-fantasma.visible { opacity: 1; }
.buscador-hero.con-fantasma input::placeholder { color: transparent; }

/* Variante filtros: borde sutil, sin sombra, alineada con los selects */
.filtros .buscador-filtros { grid-column: 1 / -1; box-shadow: none; border: 1px solid var(--borde); }
.filtros .buscador-filtros:focus-within { box-shadow: 0 0 0 3px rgba(0,73,175,.18); border-color: var(--azul); }

/* Autocompletado */
.buscador-sugerencias {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 40;
  background: #fff; border-radius: 16px; box-shadow: 0 4px 20px rgba(20,33,61,.14);
  padding: 6px; text-align: left;
}
.buscador-sugerencias[hidden] { display: none; }
.sugerencia {
  display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 14px;
  border-radius: 10px; cursor: pointer; font-size: 14.5px; color: var(--tinta);
}
.sugerencia svg { color: var(--gris); flex-shrink: 0; }
.sugerencia:hover, .sugerencia.activa { background: var(--azul-claro); }
.sugerencia .sug-extra { margin-left: auto; font-size: 12.5px; color: var(--gris); }

/* Chips de lo interpretado */
.chips-busqueda { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }
.chip-busqueda {
  display: inline-flex; align-items: center; gap: 6px; border-radius: 999px;
  background: var(--azul-claro); color: var(--azul); font-size: 13px; font-weight: 600;
  padding: 6px 8px 6px 14px;
}
.chip-busqueda span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%; font-size: 14px;
}
.chip-busqueda:hover span { background: rgba(0,73,175,.12); }

/* Estado vacío útil */
.busqueda-vacia { padding: 30px 0; color: var(--gris); }
.busqueda-vacia p { margin-bottom: 14px; }
.busqueda-vacia-sub { font-weight: 600; color: var(--tinta); }
.busqueda-vacia-botones { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }

@media (max-width: 640px) {
  .buscador { height: 52px; }
  .buscador-btn { padding: 0 14px; }
  .buscador-btn-texto { display: none; }
  .buscador-btn-lupa { display: inline-flex; }
  .buscador-fantasma { right: 70px; }
}

/* ---------- Banderas del selector de idioma ---------- */
.idiomas a { display: inline-flex; align-items: center; gap: 5px; min-height: 44px; padding: 0 7px; }
.idiomas .bandera { display: block; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.12); }
.idiomas a:not(.activo) .bandera { opacity: .55; }

/* ---------- Redes sociales del footer ---------- */
.pie-redes { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.pie-redes a {
  width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.10);
  display: inline-flex; align-items: center; justify-content: center; color: #fff;
  transition: background .18s, color .18s;
}
.pie-redes .red-facebook:hover { background: #1877F2; }
.pie-redes .red-instagram:hover { background: #E4405F; }
.pie-redes .red-linkedin:hover { background: #0A66C2; }
.pie-redes .red-youtube:hover { background: #FF0000; }
.pie-redes .red-threads:hover, .pie-redes .red-x:hover, .pie-redes .red-tiktok:hover { background: #fff; color: #14213d; }
@media (max-width: 900px) { .pie-redes { justify-content: center; } }

/* ---------- Buscador compacto (cabecera) ---------- */
/* Retirada: con el nav completo ya no hay espacio físico para la píldora
   inline (contenedor tope 1320px); la lupa + overlay cubre todos los anchos */
.buscador-compacto { display: none !important; }
@media (min-width: 1340px) {
  /* Oculto = ancho 0: si ocupara sus 200px invisibles, el flexbox aplasta el logo */
  .buscador-compacto {
    display: flex; flex: 0 1 auto; width: 0; min-width: 0; height: 38px;
    box-shadow: none; border: 1px solid transparent; padding: 0;
    opacity: 0; pointer-events: none; transform: translateY(-4px); overflow: visible;
    transition: opacity .25s, transform .25s, flex-basis .25s, width .25s, box-shadow .18s, border-color .18s;
  }
  .buscador-compacto.visible {
    opacity: 1; pointer-events: auto; transform: none;
    flex: 0 1 200px; width: auto; border-color: var(--borde);
  }
  .buscador-compacto.visible:focus-within { flex-basis: 360px; box-shadow: 0 0 0 3px rgba(0,73,175,.18); border-color: var(--azul); }
  .buscador-compacto .buscador-lupa { padding-left: 14px; }
  .buscador-compacto input { font-size: 14px; padding: 0 12px 0 8px; }
  .buscador-compacto .buscador-sugerencias { min-width: 320px; right: auto; width: 360px; }
}

/* ---------- Búsqueda móvil: botón y overlay ---------- */
.buscador-movil-btn {
  display: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--borde);
  background: #fff; color: var(--tinta); align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
}
.buscador-movil-btn { display: flex; } /* en todos los anchos: abre el overlay de búsqueda */
.buscador-overlay { position: fixed; inset: 0; z-index: 300; background: #fff; overflow-y: auto; }
.buscador-overlay[hidden] { display: none; }
.buscador-overlay-panel { padding: 14px 16px; }
/* Escritorio: NO a pantalla completa. El panel cuelga bajo la cabecera (70px) y
   detrás queda el sitio, atenuado; tocar el fondo cierra. */
@media (min-width: 900px) {
  .buscador-overlay { top: 70px; background: rgba(20,33,61,.42); overflow: hidden; }
  .buscador-overlay-panel {
    max-width: 1320px; margin: 0 auto; background: #fff;
    padding: 18px 20px 22px; border-radius: 0 0 16px 16px;
    box-shadow: 0 18px 40px rgba(20,33,61,.22);
    max-height: calc(100vh - 70px); overflow-y: auto;
  }
}
.buscador-overlay-top { display: flex; gap: 8px; align-items: center; }
.buscador-overlay-pildora { flex: 1; box-shadow: none; border: 1px solid var(--borde); height: 52px; }
.buscador-overlay-cerrar {
  width: 44px; height: 44px; flex-shrink: 0; border: none; background: none; color: var(--tinta);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.buscador-overlay .buscador-sugerencias { position: static; box-shadow: none; padding: 0; margin-top: 14px; }
body.sin-scroll { overflow: hidden; }

/* ---------- Filtros como panel deslizante (móvil) ---------- */
.btn-filtros, .panel-arrastre, .panel-cerrar, .btn-limpiar, .txt-movil { display: none; }
@media (max-width: 767px) {
  .btn-filtros:not([hidden]) {
    display: flex; align-items: center; justify-content: center; gap: 9px;
    width: 100%; height: 50px; border: 1.5px solid var(--borde); border-radius: 10px;
    background: #fff; font-size: 15px; font-weight: 600; color: var(--tinta);
    cursor: pointer; font-family: var(--fuente-texto); margin-bottom: 4px;
  }
  .filtros.como-panel {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 320; margin: 0;
    border-radius: 18px 18px 0 0; box-shadow: 0 -12px 40px rgba(20,33,61,.25);
    transform: translateY(105%); transition: transform .3s ease;
    max-height: 88vh; overflow-y: auto;
    display: flex; flex-direction: column; gap: 0; padding: 44px 20px 0;
    align-items: stretch; text-align: left;
  }
  body.filtros-abiertos .filtros.como-panel { transform: none; }
  .como-panel .panel-arrastre {
    display: block; position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
    width: 40px; height: 4px; border-radius: 2px; background: var(--borde); margin: 0;
  }
  .como-panel .panel-cerrar {
    display: flex; position: absolute; top: 12px; right: 14px; width: 40px; height: 40px; z-index: 5;
    align-items: center; justify-content: center; background: rgba(255,255,255,.85); border: none;
    border-radius: 50%; color: var(--tinta); cursor: pointer;
  }
  .como-panel .filtro { width: 100%; margin-bottom: 16px; }
  .como-panel .filtro label { display: block; text-align: left; font-size: 12px; font-weight: 600; color: var(--gris); margin-bottom: 6px; }
  .como-panel select, .como-panel input:not([type=checkbox]) { width: 100%; display: block; box-sizing: border-box; }
  .como-panel .filtro select, .como-panel .filtro input { min-height: 48px; font-size: 16px; }
  .como-panel .buscador-filtros { width: 100%; margin-top: 12px; margin-bottom: 16px; }
  .como-panel .buscador-filtros input { display: block; width: auto; flex: 1; }
  .como-panel .panel-botones { display: flex; gap: 10px; position: sticky; bottom: 0; background: #fff; padding: 10px 0 14px; margin-top: auto; }
  .como-panel .btn-limpiar { display: flex; justify-content: center; align-items: center; flex: 0 0 40%; min-height: 50px; }
  .como-panel .btn-aplicar { flex: 1; min-height: 50px; position: static; margin: 0; box-shadow: none; }
  .como-panel .btn-aplicar:disabled { opacity: .55; cursor: default; }
  .como-panel .txt-escritorio { display: none; }
  .como-panel .txt-movil { display: inline; }
  .fondo-filtros { position: fixed; inset: 0; background: rgba(20,33,61,.45); z-index: 310; }
  .fondo-filtros[hidden] { display: none; }
}
@media (min-width: 768px) { .txt-movil { display: none; } .txt-escritorio { display: inline; } .panel-botones { display: contents; } }

/* ---------- Código de propiedad ---------- */
.tarjeta-precio { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.tarjeta-codigo { font-size: 14px; color: var(--gris); font-weight: 600; letter-spacing: .3px; font-family: var(--fuente-texto); }
.ficha-codigo { font-size: 14px; color: var(--gris); margin-bottom: 4px; }

/* ---------- Preguntas frecuentes (acordeón) ---------- */
.seccion-faqs { background: var(--fondo-suave); }
.faq-item { background: #fff; border: 1px solid var(--borde); border-radius: 12px; margin-bottom: 10px; }
.faq-preg {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 16px 18px; background: none; border: none; cursor: pointer; text-align: left;
  font-family: var(--fuente-titulos); font-weight: 600; font-size: 15.5px; color: var(--tinta);
}
.faq-preg svg { flex-shrink: 0; color: var(--gris); transition: transform .25s; }
.faq-preg[aria-expanded="true"] svg { transform: rotate(180deg); }
.faq-resp { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .28s ease; }
.faq-resp > div { overflow: hidden; }
.faq-resp p { padding: 0 18px 16px; color: #3a4358; font-size: 14.5px; }
.acordeon.js .faq-preg[aria-expanded="false"] + .faq-resp { grid-template-rows: 0fr; }
@media (prefers-reduced-motion: reduce) { .faq-resp, .faq-preg svg { transition: none; } }

/* ---------- Nav: link destacado "Publicar mi propiedad" ---------- */
.nav-publicar {
  color: var(--azul) !important; font-weight: 600; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 7px;
  position: relative; padding-left: 17px !important; /* 16px de margen + el divisor de 1px */
}
.nav-publicar::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 18px; background: var(--borde);
}
.nav-publicar:hover, .nav-publicar.activo { text-decoration: underline; border-bottom-color: transparent !important; }

/* ---------- Zonas destacadas ---------- */
.zonas-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.zona-card {
  position: relative; border-radius: var(--radio); overflow: hidden; aspect-ratio: 4/3;
  display: block; background: linear-gradient(135deg, var(--azul-oscuro), var(--azul));
}
.zona-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.zona-overlay {
  position: absolute; inset: 0; transition: opacity .35s ease;
  background: linear-gradient(to top, rgba(10,20,45,.78) 0%, rgba(10,20,45,.25) 55%, rgba(10,20,45,.05) 100%);
}
.zona-card:hover img { transform: scale(1.06); }
.zona-card:hover .zona-overlay { opacity: .75; }
.zona-info { position: absolute; left: 18px; right: 18px; bottom: 16px; color: #fff; z-index: 1; }
.zona-nombre { display: block; font-family: var(--fuente-titulos); font-weight: 800; font-size: 24px; }
.zona-conteo { display: block; font-size: 13.5px; color: rgba(255,255,255,.85); margin-top: 2px; }
.zona-sin-imagen .zona-info { inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
@media (max-width: 900px) { .zonas-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .zonas-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .zona-card img, .zona-overlay { transition: none; }
  .zona-card:hover img { transform: none; }
}

/* ---------- Dónde invertir: índice y páginas de ciudad ---------- */
.ciudades-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.ciudad-card {
  position: relative; border-radius: var(--radio); overflow: hidden; aspect-ratio: 4/5;
  display: block; background: linear-gradient(135deg, var(--azul-oscuro), var(--azul));
}
.ciudad-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.ciudad-card:hover img { transform: scale(1.06); }
.ciudad-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,20,45,.82) 0%, rgba(10,20,45,.25) 55%, rgba(10,20,45,.05) 100%); }
.ciudad-info { position: absolute; left: 20px; right: 20px; bottom: 18px; color: #fff; z-index: 1; }
.ciudad-nombre { display: block; font-family: var(--fuente-titulos); font-weight: 800; font-size: 28px; }
.ciudad-depto { display: block; font-size: 13px; color: rgba(255,255,255,.75); text-transform: uppercase; letter-spacing: 1px; }
.ciudad-gancho { display: block; font-size: 14.5px; color: rgba(255,255,255,.9); margin-top: 8px; }
.ciudad-sin-imagen .ciudad-info { inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
@media (max-width: 900px) { .ciudades-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .ciudades-grid { grid-template-columns: 1fr; } }

.ciudad-portada {
  position: relative; height: 420px; overflow: hidden;
  background: linear-gradient(135deg, var(--azul-oscuro) 0%, var(--azul) 70%, #1565d8 100%);
}
.ciudad-portada img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ciudad-portada-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(0,51,125,.85) 0%, rgba(0,73,175,.55) 50%, rgba(0,51,125,.35) 100%);
}
.ciudad-portada-texto { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 44px; color: #fff; }
.ciudad-portada-texto h1 { font-size: clamp(26px, 3.6vw, 42px); font-weight: 800; max-width: 720px; }
.ciudad-portada-texto p { font-size: clamp(15px, 2vw, 19px); color: rgba(255,255,255,.9); margin-top: 8px; }
@media (max-width: 640px) { .ciudad-portada { height: 280px; } }

.ciudad-intro { max-width: 760px; }
.ciudad-intro p { color: #3a4358; font-size: 16.5px; margin-bottom: 16px; }

.ciudad-datos { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.ciudad-dato {
  background: var(--fondo-suave); border: 1px solid var(--borde); border-radius: 12px;
  padding: 16px 14px; display: flex; flex-direction: column; gap: 4px;
}
.ciudad-dato svg { color: var(--azul); }
.ciudad-dato b { font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: var(--gris); }
.ciudad-dato span { font-size: 13.5px; color: var(--tinta); line-height: 1.45; }
@media (max-width: 900px) { .ciudad-datos { grid-template-columns: repeat(2, 1fr); } }

.ciudad-razones { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.ciudad-razon { background: var(--fondo-suave); border: 1px solid var(--borde); border-radius: var(--radio); padding: 24px; }
.ciudad-razon .icono {
  width: 46px; height: 46px; border-radius: 12px; background: var(--azul-claro); color: var(--azul);
  display: flex; align-items: center; justify-content: center; margin-bottom: 14px;
}
.ciudad-razon h3 { font-size: 17px; margin-bottom: 8px; }
.ciudad-razon p { font-size: 14.5px; color: var(--gris); }
@media (max-width: 767px) { .ciudad-razones { grid-template-columns: 1fr; } } /* 767, no 768: a 768 exactos se solapaba con las reglas min-width:768 */

.ciudad-galeria { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 36px; }
.ciudad-galeria-item {
  border: none; padding: 0; cursor: zoom-in; border-radius: var(--radio); overflow: hidden;
  aspect-ratio: 4/3; background: var(--azul-claro);
}
.ciudad-galeria-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.ciudad-galeria-item:hover img { transform: scale(1.04); }
@media (max-width: 640px) { .ciudad-galeria { grid-template-columns: 1fr; } }

.ciudad-atractivos { list-style: none; margin: 0; padding: 0; max-width: 820px; }
.ciudad-atractivos li { display: flex; gap: 16px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--borde); }
.atractivo-distancia {
  flex: 0 0 104px; text-align: center; background: var(--azul-claro); color: var(--azul);
  font-weight: 700; font-size: 14px; border-radius: 999px; padding: 6px 8px; margin-top: 2px;
}
.ciudad-atractivos b { font-size: 15.5px; }
.ciudad-atractivos p { font-size: 14px; color: var(--gris); margin-top: 2px; }
.ciudad-sin-props { max-width: 640px; }
.ciudad-sin-props p { color: var(--gris); margin-bottom: 16px; }

/* Lightbox de la galería (sin librerías) */
.lightbox {
  position: fixed; inset: 0; z-index: 400; background: rgba(10,16,32,.92);
  display: flex; align-items: center; justify-content: center; padding: 30px;
}
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 100%; max-height: 90vh; border-radius: 10px; }
.lightbox-cerrar {
  position: absolute; top: 16px; right: 16px; width: 44px; height: 44px; border: none;
  background: rgba(255,255,255,.12); color: #fff; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}

/* ---------- Banda "publique su propiedad" ---------- */
.publicar-banda-seccion { padding-top: 0; }
.publicar-banda {
  background: var(--azul-claro); border: 1px solid #d6e4f7; border-radius: 18px; padding: 38px 40px;
  display: flex; align-items: center; justify-content: space-between; gap: 26px; flex-wrap: wrap;
}
.publicar-banda h2 { font-size: clamp(20px, 2.4vw, 26px); margin-bottom: 6px; color: var(--tinta); }
.publicar-banda p { color: #3a4358; max-width: 560px; }
.publicar-banda .btn { flex-shrink: 0; }

/* ---------- Formulario de publicar (3 pasos) ---------- */
.publicar-form fieldset { border: none; padding: 0; margin: 0 0 8px; }
.publicar-form legend { font-family: var(--fuente-titulos); font-weight: 700; font-size: 18px; margin-bottom: 14px; padding-top: 10px; }
.publicar-form.con-pasos fieldset { display: none; }
.publicar-form.con-pasos fieldset.activo { display: block; }
.publicar-progreso { margin-bottom: 18px; }
.publicar-progreso[hidden] { display: none; }
.publicar-paso-num { display: block; font-size: 14px; font-weight: 600; color: var(--gris); margin-bottom: 6px; }
.publicar-barra { height: 6px; border-radius: 4px; background: var(--borde); overflow: hidden; }
.publicar-barra div { height: 100%; width: 33%; background: var(--azul); border-radius: 4px; transition: width .3s; }
.publicar-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 18px; }
.publicar-nav[hidden] { display: none; }
.publicar-ok { text-align: center; padding: 30px 0; }
.publicar-ok p { color: #3a4358; margin-bottom: 12px; }
.publicar-ok-wa { font-weight: 600; margin-top: 18px; }

/* Vista previa de fotos (formulario público, espejo del panel) */
.fotos-preview { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
.foto-prev { position: relative; width: 80px; }
.foto-prev img { width: 80px; height: 80px; object-fit: cover; border-radius: 8px; border: 1px solid var(--borde); display: block; }
.foto-prev button {
  position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; border-radius: 50%;
  border: none; background: #d64545; color: #fff; font-size: 14px; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; justify-content: center; line-height: 1;
}
.foto-prev span { display: block; font-size: 10.5px; color: var(--gris); margin-top: 4px; text-align: center; white-space: nowrap; }

/* ---------- Banner de cookies (fuera del flujo: cero layout shift) ---------- */
.ck-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 250;
  background: #fff; box-shadow: 0 -8px 30px rgba(20,33,61,.18);
  border-top: 1px solid var(--borde); padding: 16px 0;
}
.ck-banner[hidden] { display: none; }
.ck-inner { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.ck-texto { font-size: 14px; color: #3a4358; flex: 1 1 320px; margin: 0; }
.ck-texto a { text-decoration: underline; }
.ck-botones { display: flex; gap: 10px; flex-wrap: wrap; }
.ck-botones .btn { padding: 0 18px; font-size: 14px; min-height: 44px; }
/* Rechazar con el MISMO peso visual que Aceptar: ambos sólidos, mismo tamaño */
.ck-btn-rechazar { background: #3a4358; color: #fff; }
.ck-btn-rechazar:hover { background: var(--tinta); }
.ck-panel { flex-basis: 100%; border-top: 1px solid var(--borde); padding-top: 14px; }
.ck-panel[hidden] { display: none; }
.ck-panel-titulo { display: block; margin-bottom: 10px; font-size: 15px; }
.ck-cat { margin-bottom: 10px; }
.ck-cat label { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.ck-cat input { width: 17px; height: 17px; accent-color: var(--azul); flex-shrink: 0; }
.ck-cat em { color: var(--gris); font-style: normal; font-size: 14px; }
.ck-cat small { display: block; color: var(--gris); font-size: 14px; margin: 2px 0 0 25px; }
.pie-link-btn {
  background: none; border: none; padding: 0; cursor: pointer;
  color: inherit; font: inherit; text-decoration: underline; font-size: 14.5px;
}
@media (max-width: 640px) {
  .ck-botones { width: 100%; }
  .ck-botones .btn { flex: 1; }
}

/* ---------- Aviso de privacidad plegable en formularios ---------- */
.aviso-priv { margin: 4px 0 12px; font-size: 14px; color: var(--gris); }
.aviso-priv summary { cursor: pointer; color: var(--azul); font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.aviso-priv p { margin-top: 8px; line-height: 1.55; }
.aviso-priv a { text-decoration: underline; }

/* ---------- Favoritos ---------- */
.fav-btn {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255,255,255,.92); color: var(--azul);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(20,33,61,.18);
}
.fav-btn svg { pointer-events: none; }
.fav-btn:not(.activo) svg:last-of-type { display: none; } /* lleno solo si está guardado */
.fav-btn.activo svg:first-of-type { display: none; }
.fav-btn.rebote { animation: fav-rebote .35s ease; }
@keyframes fav-rebote { 0% { transform: scale(1); } 50% { transform: scale(1.3); } 100% { transform: scale(1); } }
.ficha-acciones .fav-btn { position: static; flex: 0 0 38px; }
.fav-contador {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--borde);
  background: #fff; color: var(--azul); flex-shrink: 0;
}
.fav-contador[hidden] { display: none; }
.fav-num {
  position: absolute; top: -7px; right: -7px; min-width: 21px; height: 21px; padding: 0 5px;
  border-radius: 11px; background: #d64545; color: #fff; font-size: 14px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.fav-vacio { text-align: center; padding: 36px 0; color: var(--gris); }
.fav-vacio b { color: var(--tinta); font-size: 18px; }
.fav-vacio p { margin-bottom: 10px; }
.fav-vacio .btn { margin-top: 10px; }
.fav-wa-fila { margin-bottom: 26px; }
.tarjeta-no-disponible { position: relative; display: flex; align-items: center; min-height: 180px; }
.tarjeta-no-disponible p { color: var(--gris); }
.tabla-cookies { width: 100%; border-collapse: collapse; font-size: 13.5px; margin-top: 6px; }
.tabla-cookies th, .tabla-cookies td { border: 1px solid var(--borde); padding: 8px 10px; text-align: left; vertical-align: top; }
.tabla-cookies th { background: var(--fondo-suave); }
@media (prefers-reduced-motion: reduce) { .fav-btn.rebote { animation: none; } }

/* ---------- Migas de pan ---------- */
.migas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14px; color: var(--gris); margin-bottom: 14px; }
.migas a { color: var(--gris); }
.migas a:hover { color: var(--azul); }
.migas span { color: var(--gris); }
.migas-actual { max-width: 340px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.migas-volver { display: none; font-size: 14px; font-weight: 600; margin-bottom: 10px; min-height: 44px; align-items: center; }
@media (max-width: 640px) {
  .migas { display: none; }
  .migas-volver { display: inline-flex; }
}

/* ---------- Fecha de publicación ---------- */
.ficha-fecha-pub { font-size: 14px; color: var(--gris); margin-bottom: 6px; }

/* ---------- Características en la ficha ---------- */
.ficha-caracteristicas { margin-top: 34px; }
.ficha-caracteristicas h2 { font-size: 22px; margin-bottom: 8px; }
.ficha-caracteristicas h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .8px; color: var(--gris); margin: 16px 0 8px; }
.carac-lista { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 18px; list-style: none; margin: 0; padding: 0; }
.carac-lista li { display: flex; align-items: center; gap: 9px; font-size: 14.5px; color: #3a4358; }
.carac-lista svg { color: var(--azul); flex-shrink: 0; }
@media (max-width: 640px) { .carac-lista { grid-template-columns: 1fr; } }

/* ---------- Bloques tocables de características (filtros) ---------- */
.carac-item {
  display: flex; align-items: center; gap: 10px; border: 1.5px solid var(--borde);
  border-radius: 10px; padding: 12px; min-height: 48px; cursor: pointer;
  background: #fff; font-size: 14px; color: var(--tinta);
}
.carac-item input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--azul); flex-shrink: 0; margin: 0; }
.carac-item:has(input:checked) { border-color: var(--azul); background: var(--azul-claro); }
@media (max-width: 899px) { .filtros { grid-template-columns: 1fr 1fr; } }

/* Escritorio: filas con un orden fijo, no "donde quepa".
   1) buscador · 2) ciudad, categoría, habitaciones, orden ·
   3) precio (2 col) + vendidas · 4) características · 5) botón Filtrar. */
@media (min-width: 900px) {
  .filtros { grid-template-columns: repeat(4, 1fr); align-items: start; gap: 16px; }
  /* Misma altura exacta en todos los campos: el select suma unos píxeles propios */
  .filtros .filtro select, .filtros .filtro input { min-height: 44px; }
  .filtros .buscador-filtros { grid-column: 1 / -1; grid-row: 1; }
  .filtro-ciudad    { grid-column: 1; grid-row: 2; }
  .filtro-categoria { grid-column: 2; grid-row: 2; }
  .filtro-habs      { grid-column: 3; grid-row: 2; }
  .filtro-orden     { grid-column: 4; grid-row: 2; }
  .filtro-precio    { grid-column: 1 / 3; grid-row: 3; }
  .filtro-vendidas  { grid-column: 3; grid-row: 3; }
  .filtro-carac     { grid-column: 1 / -1; grid-row: 4; }
  .filtros .btn-aplicar { grid-column: 4; grid-row: 5; justify-self: end; }
  /* Los cuatro atajos, en UNA línea bajo los dos campos de precio: antes que
     partirse en dos filas, se achican */
  .filtros .precio-atajos { flex-wrap: nowrap; gap: 6px; }
  .filtros .precio-atajo { min-height: 38px; padding: 0 9px; font-size: 12.5px; white-space: nowrap; }
}
/* Por debajo de ~1150 los cuatro atajos no entran bajo dos columnas. En vez de
   achicarlos hasta volverlos ilegibles, el precio toma tres columnas y
   "Mostrar vendidas" pasa a la cuarta. */
@media (min-width: 900px) and (max-width: 1150px) {
  .filtro-precio   { grid-column: 1 / 4; }
  .filtro-vendidas { grid-column: 4; }
}

.filtro-carac { grid-column: 1 / -1; }
.filtro-carac summary { cursor: pointer; font-size: 12px; font-weight: 600; color: var(--gris); text-transform: uppercase; letter-spacing: .5px; padding: 4px 0; }
.filtro-carac-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 8px; }
@media (max-width: 900px) { .filtro-carac-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .filtro-carac-grid { grid-template-columns: 1fr; } }

/* ---------- Formulario de contacto en la ficha ---------- */
.ficha-contacto { margin-top: 34px; background: var(--fondo-suave); border: 1px solid var(--borde); border-radius: 16px; padding: 26px 24px; }
.ficha-contacto h2 { font-size: 21px; margin-bottom: 4px; }
.ficha-contacto-sub { color: var(--gris); font-size: 14.5px; margin-bottom: 18px; }
.ficha-contacto .campo { margin-bottom: 14px; }
.ficha-contacto label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; }
.ficha-contacto input:not([type=checkbox]), .ficha-contacto textarea {
  width: 100%; padding: 12px; border: 1.5px solid var(--borde); border-radius: 8px;
  font-size: 16px; font-family: inherit; background: #fff;
}
.ficha-contacto input:focus, .ficha-contacto textarea:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(0,73,175,.18); }
.ficha-contacto-wa { text-align: center; margin-top: 12px; font-size: 14px; }
.ficha-contacto-error {
  background: #fdf3f3; border: 1px solid #f3c9c9; border-left: 4px solid #d64545;
  border-radius: 8px; padding: 12px 14px; margin-top: 12px; font-size: 14px; color: #a32f2f;
}
.ficha-contacto-wa a { text-decoration: underline; }
.ficha-contacto-ok { display: flex; align-items: center; gap: 10px; color: var(--wa); font-weight: 600; font-size: 15.5px; padding: 8px 0; }
.ficha-contacto-ok[hidden] { display: none; }

/* ---------- Bloque de confianza (ficha lateral) ---------- */
.ficha-confianza { border-top: 1px solid var(--borde); margin-top: 14px; padding-top: 12px; }
.ficha-confianza span { display: block; }
.confianza-label { font-size: 12px; color: var(--gris); }
.confianza-nombre { font-size: 15px; font-weight: 600; margin-top: 2px; }
.confianza-desc { font-size: 13px; color: var(--gris); margin-top: 2px; }

/* ---------- Ficha: acciones secundarias ---------- */
.ficha-acciones { display: flex; gap: 10px; margin-top: 10px; }
.ficha-acciones .btn-secundario { flex: 1; }
.btn-secundario {
  background: #fff; color: var(--tinta); border: 1.5px solid var(--borde);
  padding: 10px 12px; font-size: 13.5px; border-radius: 8px;
}
.btn-secundario:hover { border-color: var(--azul); color: var(--azul); }
.compartir-ok { display: block; text-align: center; font-size: 14px; color: var(--wa); font-weight: 600; margin-top: 8px; }
.compartir-ok[hidden] { display: none; }

/* ---------- Página de contacto ---------- */
.contacto-grid { display: grid; grid-template-columns: 1.3fr .7fr; gap: 26px; align-items: start; }
.contacto-info { background: var(--fondo-suave); border: 1px solid var(--borde); border-radius: var(--radio); padding: 24px; }
.contacto-info h2 { font-size: 17px; margin-bottom: 14px; }
.contacto-info p { font-size: 14.5px; margin-bottom: 10px; color: #3a4358; }
@media (max-width: 900px) { .contacto-grid { grid-template-columns: 1fr; } }

/* ---------- Conteo y paginación ---------- */
.props-conteo { font-size: 14px; color: var(--gris); margin: 18px 0 14px; }
.paginacion { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 34px; flex-wrap: wrap; }
.pag-btn { padding: 10px 16px; border: 1.5px solid var(--borde); border-radius: 8px; font-size: 14px; font-weight: 600; color: var(--tinta); background: #fff; }
a.pag-btn:hover { border-color: var(--azul); color: var(--azul); }
.pag-off { opacity: .45; pointer-events: none; }
.pag-numeros { display: flex; gap: 4px; }
.pag-num { min-width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; font-size: 14px; font-weight: 600; color: var(--tinta); }
a.pag-num:hover { background: var(--azul-claro); color: var(--azul); }
.pag-num.activo { background: var(--azul); color: #fff; }
.pag-elipsis { display: inline-flex; align-items: center; color: var(--gris); padding: 0 4px; }
.pag-info { display: none; font-size: 14px; color: var(--gris); font-weight: 600; }
@media (max-width: 640px) {
  .pag-numeros { display: none; }
  .pag-info { display: inline; }
}

/* ---------- Ficha imprimible ---------- */
.print-encabezado, .print-pie { display: none; }
@media print {
  @page { margin: 1.5cm; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body { display: block; min-height: 0; }
  main { flex: none; }
  .cabecera, .pie, .wa-flotante, .wa-burbuja, .galeria-mini, .video-seccion, .hero-scroll,
  .ficha-acciones, .ficha .btn, .nota-ubicacion, .compartir-ok, .aviso-vendida-botones,
  .ficha-contacto, .similares, .migas, .migas-volver, .ck-banner { display: none !important; }
  .print-encabezado { display: flex; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 2px solid var(--azul); padding-bottom: 10px; margin-bottom: 16px; }
  .print-encabezado img { height: 34px; width: auto; }
  .print-encabezado span { font-size: 12px; color: var(--gris); }
  .print-pie { display: block; border-top: 1px solid var(--borde); margin-top: 18px; padding-top: 10px; font-size: 10.5px; color: var(--gris); }
  .print-pie p { margin-bottom: 6px; }
  .detalle { padding: 0; }
  .detalle-grid { display: block; }
  .galeria-principal img { width: 100%; max-height: 10cm; object-fit: cover; border-radius: 8px; }
  .ficha { position: static; box-shadow: none; border: 1px solid var(--borde); margin-top: 14px; break-inside: avoid; }
  .ficha-tabla { break-inside: avoid; }
  .detalle-descripcion { margin-top: 14px; }
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .props-grid, .grid-propiedades { grid-template-columns: 1fr 1fr; }
  .detalle-grid { grid-template-columns: 1fr; }
  .ficha { position: static; }
  .pie-grid { grid-template-columns: 1fr; gap: 24px; }
}
/* Breakpoint intermedio: entre ~900 y 1150 no cabe el nav completo */
@media (max-width: 1339px) {
  .nav {
    display: none; position: absolute; top: 70px; left: 0; right: 0;
    background: rgba(255,255,255,.96); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    flex-direction: column; gap: 0; border-bottom: 1px solid var(--borde); padding: 8px 20px 14px;
  }
  .nav.abierto { display: flex; }
  .nav a { padding: 12px 0; border-bottom: 1px solid var(--borde); white-space: normal; }
  .nav.abierto a { animation: nav-item-in .28s ease both; }
  .nav.abierto a:nth-child(1) { animation-delay: .04s; }
  .nav.abierto a:nth-child(2) { animation-delay: .08s; }
  .nav.abierto a:nth-child(3) { animation-delay: .12s; }
  .nav.abierto a:nth-child(4) { animation-delay: .16s; }
  .nav.abierto a:nth-child(5) { animation-delay: .20s; }
  .nav.abierto a:nth-child(6) { animation-delay: .24s; }
  .nav.abierto a:nth-child(7) { animation-delay: .28s; }
  /* "Publicar mi propiedad": un link más de la lista, destacado solo por color */
  .nav .nav-publicar {
    border: none !important; border-radius: 0; padding: 12px 0 !important; background: none !important;
    color: var(--azul) !important; font-weight: 600; margin-top: 14px;
    display: flex; align-items: center; gap: 8px;
  }
  .nav .nav-publicar::before { display: none; } /* el divisor es solo de escritorio */
  .nav .nav-publicar svg { display: inline-block; }
  .menu-btn { display: flex; }
  .cabecera-acciones .btn-wa { width: 40px; height: 40px; padding: 0; border-radius: 50%; justify-content: center; }
  .btn-wa-texto { display: none; }
}

@media (max-width: 640px) {
  .cabecera .logo img { height: 34px; }
  .cabecera-acciones .btn-wa { display: none; }
  .props-grid, .grid-propiedades { grid-template-columns: 1fr; }
  .hero { padding: 56px 0 62px; }
  .cta-banda { padding: 30px 24px; }
  .galeria-mini { grid-template-columns: repeat(4, 1fr); }
}

/* Cabecera en teléfonos angostos: la fila (logo + lupa + banderas + menú) no
   cede porque sus piezas llevan flex-shrink:0; en ~360px de ancho desbordaba
   6px (medido) y empujaba el scroll horizontal del documento */
@media (max-width: 430px) {
  .cabecera .contenedor { padding: 0 14px; }
  .cabecera-fila { gap: 10px; }
  .cabecera-acciones { gap: 8px; }
  .idiomas a { padding: 3px 4px; }
}