/* ════════════════════════════════════════════════════════════════════════════
   Asesorar Inmobiliaria del Caribe
   Rediseño sobre el mockup: azul marino + rojo, acentos en script,
   curvas de onda, y los datos del inmueble en cajitas con icono.

   El azul #193282 no es inventado: es el que traen los iconos originales
   del sitio (locationazul.png, telazul.png, mailazul.png).
   ════════════════════════════════════════════════════════════════════════════ */

:root{
  /* Marca */
  /* Medidos del mockup: el marino es #0b4893 y el rojo #e31029.
     Antes se usaba #193282, que venía de los iconos del sitio viejo. */
  --marino:#0b4893; --marino-osc:#0a2f63; --marino-cl:#2a6ac2;
  --rojo:#e31029; --rojo-osc:#b30c20; --rojo-cl:#fdeaec;

  /* Neutros con sesgo azulado, para que acompañen al marino */
  --texto:#243046; --texto-2:#5a6478;
  /* #8c94a6 daba 3.04:1 sobre blanco y este color SOLO se usa en textos de
     10–15 px (.aviso, .eyebrow, .det-cod, la tabla de PQR…), donde la WCAG AA
     pide 4.5:1. Mismo tono, solo más oscuro: ahora 4.68:1. El tema oscuro ya
     cumplía (4.95 y 4.57), por eso no se toca. */
  --texto-3:#6b748a;
  --fondo:#ffffff; --superficie:#ffffff;
  --tinte:#eef3fb;          /* azul muy claro: fondo de secciones */
  --neutro:#f6f7f9;
  --linea:#dde3ee; --linea-2:#eaeef6;

  /* Sombras en capas: una corta para el borde y una larga para la elevación.
     Una sola sombra grande se ve sucia; dos se ven pulidas. */
  --sombra:0 1px 2px rgba(25,50,130,.05), 0 4px 14px rgba(25,50,130,.06);
  --sombra-2:0 2px 6px rgba(25,50,130,.07), 0 18px 44px rgba(25,50,130,.13);
  --sombra-3:0 4px 12px rgba(18,36,86,.10), 0 30px 70px rgba(18,36,86,.22);

  --wrap:1200px; --r:14px; --r-s:10px; --r-xl:20px; --r-pill:40px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --marino:#7fa0ee; --marino-osc:#0e1424; --marino-cl:#a8bff6;
    --rojo:#ff6b70; --rojo-osc:#ff8c90; --rojo-cl:#2b1719;
    --texto:#e4e8f2; --texto-2:#a7b0c4; --texto-3:#7d859a;
    --fondo:#12151d; --superficie:#191d27;
    --tinte:#161b26; --neutro:#161a23;
    --linea:#2b3342; --linea-2:#232a37;
    --sombra:0 2px 10px rgba(0,0,0,.45);
    --sombra-2:0 14px 40px rgba(0,0,0,.55);
    --sombra-3:0 24px 60px rgba(0,0,0,.65);
  }
}
:root[data-theme="dark"]{
  --marino:#7fa0ee; --marino-osc:#0e1424; --marino-cl:#a8bff6;
  --rojo:#ff6b70; --rojo-osc:#ff8c90; --rojo-cl:#2b1719;
  --texto:#e4e8f2; --texto-2:#a7b0c4; --texto-3:#7d859a;
  --fondo:#12151d; --superficie:#191d27;
  --tinte:#161b26; --neutro:#161a23;
  --linea:#2b3342; --linea-2:#232a37;
  --sombra:0 2px 10px rgba(0,0,0,.45);
  --sombra-2:0 14px 40px rgba(0,0,0,.55);
  --sombra-3:0 24px 60px rgba(0,0,0,.65);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--fondo);color:var(--texto);
  font-family:Poppins,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:15px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
/* Red de seguridad: una imagen suelta, sin contenedor con proporción, nunca
   debe poder pasar de la altura de la pantalla. */
img:not([class]){max-height:100vh}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0 0 .5em;line-height:1.14;font-weight:800;letter-spacing:-.02em;
  color:var(--marino);text-wrap:balance}
h1{font-size:clamp(2.1rem,5vw,3.6rem);letter-spacing:-.035em}
h2{font-size:clamp(1.6rem,3.2vw,2.5rem);letter-spacing:-.028em}
h3{font-size:1.1rem;letter-spacing:-.01em}
p{margin:0 0 1em}
:focus-visible{outline:2px solid var(--rojo);outline-offset:2px;border-radius:4px}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px}
.ico-svg{flex:0 0 auto}

/* Frase en script rojo, el acento del mockup */
.script{font-family:"Kaushan Script","Segoe Script",cursive;color:var(--rojo);
  font-weight:400;letter-spacing:0;display:block;line-height:1.25;
  font-size:1.04em;padding-bottom:.06em}

/* Antetítulo con guion rojo */
.eyebrow{display:flex;align-items:center;gap:11px;font-size:.72rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--texto-3);margin:0 0 10px}
.eyebrow::before{content:"";width:30px;height:3px;background:var(--rojo);border-radius:2px}
.eyebrow.centro{justify-content:center}

/* ─────────────── Header ─────────────── */
/* Escala de apilamiento del sitio, para no volver a chocar:
     1-20   contenido normal
     70     cabecera fija        <- tiene que ganarle a todo lo del contenido
     75     barra de la ficha en móvil
     80     botón de WhatsApp
   Cualquier componente que traiga z-index propios altos (un mapa, un visor)
   va DENTRO de una caja con `isolation:isolate`, no compitiendo acá. */
.hdr{position:sticky;top:0;z-index:70;background:var(--fondo);
  border-bottom:1px solid var(--linea-2)}
.hdr-in{display:flex;align-items:center;gap:26px;min-height:84px}
.logo{display:inline-flex;align-items:center}
.nav{display:flex;gap:22px;align-items:center;margin:0 auto}
.nav a:not(.btn){font-size:.85rem;font-weight:600;color:var(--texto);padding:5px 0;
  border-bottom:2px solid transparent;transition:.16s;white-space:nowrap}
.nav a:hover{color:var(--rojo)}
.nav a.on{color:var(--rojo);border-bottom-color:var(--rojo)}
.wa-pill{display:inline-flex;align-items:center;gap:8px;background:var(--rojo);color:#fff;
  padding:11px 20px;border-radius:var(--r-pill);font-size:.85rem;font-weight:700;
  transition:.18s;white-space:nowrap;box-shadow:0 4px 14px rgba(225,27,34,.28)}
.wa-pill:hover{background:var(--rojo-osc);transform:translateY(-1px)}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.burger span{width:26px;height:2px;background:var(--marino);border-radius:2px;transition:.2s}

/* ─────────────── Botones ─────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  background:var(--rojo);color:#fff;padding:14px 28px;border:0;border-radius:var(--r-pill);
  font:inherit;font-weight:700;font-size:.88rem;cursor:pointer;transition:.18s;
  text-align:center;box-shadow:0 6px 18px rgba(225,27,34,.24)}
.btn:hover{background:var(--rojo-osc);transform:translateY(-2px);box-shadow:0 10px 24px rgba(225,27,34,.32)}
.btn-marino{background:var(--marino);box-shadow:0 6px 18px rgba(25,50,130,.24)}
.btn-marino:hover{background:var(--marino-osc);box-shadow:0 10px 24px rgba(25,50,130,.32)}
.btn-o{background:transparent;color:var(--marino);border:2px solid var(--marino);
  padding:12px 26px;box-shadow:none}
.btn-o:hover{background:var(--marino);color:var(--fondo);box-shadow:none}
.btn-w{background:#fff;color:var(--marino);box-shadow:0 6px 18px rgba(0,0,0,.16)}
.btn-w:hover{background:#eef3fb;color:var(--marino-osc)}
.btn-fantasma{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.75);
  padding:12px 26px;box-shadow:none}
.btn-fantasma:hover{background:#fff;color:var(--marino);border-color:#fff}
.enlace-mas{display:inline-flex;align-items:center;gap:8px;font-size:.85rem;font-weight:700;
  color:var(--marino);transition:.16s}
.enlace-mas:hover{color:var(--rojo);gap:12px}

/* ─────────────── Hero ─────────────── */
.hero{position:relative;background:
   radial-gradient(1200px 500px at 85% 15%, rgba(42,74,168,.55), transparent 60%),
   linear-gradient(150deg, #1b3688 0%, #17307a 45%, #0f1f52 100%);
  color:#fff;overflow:hidden;padding:74px 0 130px}
.hero::before{content:"";position:absolute;inset:0;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.13) 1px, transparent 1px);
  background-size:26px 26px;mask-image:linear-gradient(160deg,#000,transparent 65%);
  -webkit-mask-image:linear-gradient(160deg,#000,transparent 65%)}
.hero-in{position:relative;z-index:2;display:grid;grid-template-columns:1.08fr .92fr;
  gap:52px;align-items:center}
.hero .eyebrow{color:rgba(255,255,255,.72)}
.hero h1{color:#fff;margin-bottom:18px}
.hero h1 .lig{font-weight:300;display:block}
.hero .lead{font-size:1.06rem;color:rgba(255,255,255,.9);max-width:44ch;margin-bottom:28px}
.hero-acc{display:flex;gap:12px;flex-wrap:wrap}

/* ── Banner con fotos de la ciudad ──
   La foto va de FONDO y el texto encima, como en el rediseño. Antes la foto
   iba en un panel al costado; el mockup la quiere a todo el ancho.

   Lo delicado de poner texto sobre una foto es que la foto cambia: hay una
   nocturna casi negra y otra de mediodía con cielo blanco. Un texto blanco
   se pierde en la segunda. Por eso el velo no es una transparencia plana
   sino un degradado desde el azul de la marca, más opaco donde va el texto y
   más limpio del lado derecho, que es donde se ve la ciudad. Así el contraste
   se sostiene con cualquiera de las quince. */
.hero-con-foto{padding:96px 0 118px}
.hero-fondo{position:absolute;inset:0;z-index:0;overflow:hidden;background:#0f1f52}
/* Sin `will-change:opacity`, y no es un descuido.
   `will-change` promueve el elemento a su PROPIA capa de composición y lo
   mantiene ahí para siempre. Con dieciséis imágenes a pantalla completa eso
   son dieciséis capas de 1920x1080 vivas todo el tiempo: unos 127 MB de
   bitmaps decodificados. En una máquina sin aceleración por GPU —y más aún
   vista por escritorio remoto, donde cada píxel repintado se recodifica y se
   manda por la red— eso traba el navegador. El navegador ya promueve solo
   durante la transición; no hay que pedírselo de antemano.

   `visibility` es el otro ahorro: una imagen con opacity:0 sigue siendo parte
   del árbol de composición. Con `visibility:hidden` el compositor la saltea
   entera. El retraso de 1.1s hace que se oculte DESPUÉS del fundido, para no
   cortarlo. */
.hero-fondo .hf{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;visibility:hidden;
  transition:opacity 1.1s ease-in-out, visibility 0s linear 1.1s}
.hero-fondo .hf.es-activa{opacity:1;visibility:visible;transition-delay:0s, 0s}
/* Estos números salieron de MEDIR, no de tantear: se compuso cada una de las
   quince fotos con el velo y se buscó el píxel de peor contraste contra el
   texto blanco en la franja donde va el titular.

   Con el velo original el peor caso daba 3,17:1 —el Teatro Amira, que tiene
   el cielo blanco detrás—. Alcanza para un titular grande pero NO para el
   párrafo, que necesita 4,5:1 según WCAG AA. Con estos valores el peor caso
   de las quince queda en 5,06:1, y del 66% hacia la derecha el velo baja a
   la mitad para que la ciudad siga viéndose. */
/* Estos valores salieron de MEDIR y de MIRAR el resultado, en ese orden.
   Se compuso cada una de las quince fotos con el velo y se buscó el píxel de
   peor contraste contra el texto blanco.
   
   El primer intento fue un error instructivo: para salvar el contraste
   oscurecí el velo entero hasta 0,96 de opacidad, y al ver el resultado las
   fotos habían desaparecido —la Ventana al Mundo perdía los colores, el
   estadio quedaba una mancha azul—. Contraste perfecto sobre fotos que ya no
   se veían: justo lo contrario de para qué están.
   
   La solución no era oscurecer más sino oscurecer MENOS ÁREA: el velo cae a
   fondo en el 34% izquierdo, donde va el texto, y se abre rápido después.
   La columna de texto se angostó al 42% para vivir dentro de esa zona. Así
   el peor caso de las quince da 5,06:1 —por encima del 4,5:1 que pide WCAG
   AA para párrafo— con apenas un 21% de velo sobre la parte de la foto que
   se quiere mostrar. */
.hero-velo{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(96deg, rgba(5,17,46,.90) 0%, rgba(8,29,74,.83) 34%,
                            rgba(11,45,110,.28) 58%, rgba(11,45,110,.14) 100%),
    linear-gradient(to top, rgba(7,22,58,.70) 0%, transparent 34%)}
/* Con foto de fondo, la trama de puntos estorba */
.hero-con-foto::before{display:none}
/* La columna de texto se queda en el 42% del ancho: es la zona donde el velo
   garantiza el contraste medido. Más allá, el párrafo se metería en la parte
   clara, que es la que deja ver la ciudad. */
.hero-con-foto .hero-in{grid-template-columns:minmax(0,.72fr) minmax(0,1fr)}
.hero-con-foto .lead{max-width:32ch}
.hero-con-foto h1{max-width:16ch}
/* Un realce mínimo, para los bordes de letra sobre las zonas más claras.
   No sustituye al velo —una sombra no cuenta para WCAG— pero ayuda a que el
   texto no se sienta pegado a la foto. */
.hero-con-foto h1,.hero-con-foto .lead,.hero-con-foto .eyebrow{
  text-shadow:0 1px 12px rgba(4,14,38,.45)}

/* Pie del banner: contador, crédito y los puntitos de la rotación */
.hero-pie{position:relative;z-index:2;display:flex;align-items:center;gap:18px;
  flex-wrap:wrap;margin-top:38px}
/* El contador tiene su PROPIA clase, no reutiliza `.hero-chip`.
   El intento anterior fue ponerle `.hero-chip hero-chip-linea` y sobreescribir
   `position` — y el contador seguía flotando encima del pie de foto, tapándolo.
   Pelear la cascada era el error de fondo: la identidad de `.hero-chip` ES
   estar posicionada en absoluto sobre la foto, así que reutilizarla para algo
   que va EN FLUJO obliga a desarmar justo lo que la define. Sale más limpio y
   más robusto declarar las cuatro propiedades propias. */
.hero-dato{display:inline-flex;align-items:center;gap:11px;flex:0 0 auto;
  background:rgba(255,255,255,.95);color:var(--texto);border-radius:12px;
  padding:11px 17px;box-shadow:var(--sombra-2)}
.hero-dato b{font-size:1.42rem;font-weight:800;color:var(--marino);line-height:1;
  font-variant-numeric:tabular-nums}
.hero-dato > span{font-size:.72rem;font-weight:600;color:var(--texto-2);line-height:1.3}
.hero-pie .hero-credito{display:flex;flex-direction:column;gap:2px;font-size:.72rem;
  color:rgba(255,255,255,.74);min-width:0;flex:1 1 240px}
.hero-pie .hero-credito b{font-size:.8rem;font-weight:700;color:#fff;letter-spacing:.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hero-pie .hero-credito .cred-b{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.hero-pie .hero-credito a{color:rgba(255,255,255,.66);text-decoration:underline;
  text-underline-offset:2px;font-size:.68rem;flex:0 0 auto}
.hero-pie .hero-credito a:hover{color:#fff}
.hero-puntos{display:flex;gap:7px;flex-wrap:wrap;flex:0 0 auto;align-items:center}
.hero-puntos .hp{width:8px;height:8px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.34);transition:.2s}
.hero-puntos .hp:hover{background:rgba(255,255,255,.7)}
.hero-puntos .hp.es-activa{background:#fff;width:22px;border-radius:4px}
.hero-puntos .hp:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* Quien pidió menos movimiento no debería ver un carrusel cambiando solo */
@media (prefers-reduced-motion: reduce){
  .hero-fondo .hf{transition:none}
  .hero-fondo .hf:not(.es-activa){visibility:hidden}
}
@media (max-width:900px){
  .hero-con-foto{padding:64px 0 104px}
  .hero-con-foto .hero-in{grid-template-columns:1fr}
  .hero-velo{background:
    linear-gradient(180deg, rgba(9,28,74,.9) 0%, rgba(11,45,110,.8) 45%, rgba(7,22,58,.92) 100%)}
  .hero-credito{order:3;flex:1 1 100%}
}

/* Panel de foto del hero (respaldo: solo si no hay fotos que rotar) */
.hero-foto{position:relative}
.hero-foto img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-xl);
  box-shadow:var(--sombra-3)}
.hero-foto::after{content:"";position:absolute;inset:auto -14px -14px auto;width:58%;height:58%;
  border:3px solid rgba(255,255,255,.22);border-radius:16px;z-index:-1}
.hero-chip{position:absolute;left:-16px;bottom:22px;background:var(--fondo);color:var(--texto);
  border-radius:12px;padding:13px 18px;box-shadow:var(--sombra-2);display:flex;
  align-items:center;gap:12px}
.hero-chip .n{font-size:1.5rem;font-weight:800;color:var(--marino);line-height:1;
  font-variant-numeric:tabular-nums}
.hero-chip .t{font-size:.72rem;font-weight:600;color:var(--texto-2);line-height:1.3}

/* Curva de onda al pie del hero */
.onda{position:absolute;left:0;right:0;bottom:-1px;z-index:1;line-height:0;pointer-events:none}
.onda svg{width:100%;height:82px;display:block}
.onda path{fill:var(--fondo)}

/* ─────────────── Buscador ─────────────── */
.buscador{background:var(--superficie);border:1px solid var(--linea-2);border-radius:var(--r-xl);
  box-shadow:var(--sombra-2);padding:24px 26px;margin:-74px auto 14px;position:relative;z-index:20}
/* Ese `30px` de abajo no es decorativo: sin él, el borde superior de la franja
   de valores caía justo sobre las esquinas redondeadas de la tarjeta y las
   dejaba cortadas a ras, como si la tarjeta se hundiera en la franja. */
.buscador h2{font-size:1.22rem;margin:0 0 16px}
.b-fila{display:grid;grid-template-columns:auto repeat(3,1fr) auto;gap:16px;align-items:end}
/* ── Selector Comprar / Arrendar ──
   `position:relative` en el contenedor para que los radios ocultos, que van
   en `absolute`, se posicionen contra ESTA caja. Sin esto se anclaban al
   ancestro posicionado más cercano, que puede estar muy lejos.

   Y se les quita el estilo que hereda del `select,input,textarea` general
   (width:100%, padding, borde): son invisibles, pero no tiene sentido que
   arrastren una caja del ancho del contenedor. */
.toggle{position:relative;display:inline-flex;background:var(--neutro);
  border-radius:var(--r-pill);padding:4px;gap:2px}
.toggle input{position:absolute;opacity:0;pointer-events:none;
  width:1px;height:1px;padding:0;border:0;margin:0}

/* La transición va SOLO en `color`, NO en el fondo.
   Antes era `transition:.16s`, que sin nombre de propiedad aplica a TODAS
   —incluido `background`—. Al cambiar de opción, la píldora que salía seguía
   roja mientras la que entraba ya se pintaba, y durante esos 160 ms las dos
   se veían seleccionadas. En un selector de dos opciones eso se lee como un
   error, no como una animación: el cambio tiene que ser instantáneo.

   Se comprobó midiendo: el selector `:checked + label` coincidía bien
   (`matches()` daba true en la correcta) pero el fondo calculado seguía
   siendo el anterior, porque getComputedStyle devuelve el valor en curso de
   la transición. */
.toggle label{padding:10px 22px;border-radius:var(--r-pill);font-size:.85rem;font-weight:700;
  color:var(--texto-2);cursor:pointer;transition:color .16s;white-space:nowrap}
.toggle input:checked + label{background:var(--rojo);color:#fff;box-shadow:0 3px 10px rgba(225,27,34,.3)}
.toggle input:focus-visible + label{outline:2px solid var(--rojo);outline-offset:2px}

.campo{display:flex;align-items:flex-end;gap:11px;min-width:0}
.campo > .ico-svg{color:var(--marino);margin-bottom:11px}
.campo .cuerpo{flex:1;min-width:0}
.campo label{display:block;font-size:.71rem;font-weight:700;color:var(--texto-3);
  letter-spacing:.05em;margin-bottom:4px}
select,input,textarea{width:100%;padding:12px 14px;border:1px solid var(--linea);
  border-radius:var(--r-s);font:inherit;font-size:.9rem;color:var(--texto);background:var(--fondo);
  transition:border-color .16s, box-shadow .16s}
select:focus,input:focus,textarea:focus{border-color:var(--marino);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--marino) 16%, transparent);outline:none}
textarea{min-height:112px;resize:vertical}
select:hover,input:hover{border-color:var(--marino-cl)}

/* ─────────────── Propuestas de valor ─────────────── */
/* Esta fila ya NO es una banda gris de borde a borde. La banda obligaba a dos
   cortes horizontales seguidos —blanco→gris y gris→azul— justo debajo del
   buscador, y eso era lo que hacía ver la zona como cajas apiladas. Ahora los
   puntos van sobre el fondo de la página, como cualquier otra sección. */
/* Medido en la captura: entre la tarjeta y los puntos sobraban 74 px y abajo
   58, así que la zona blanca pesaba casi lo mismo que la franja azul y la de
   arriba era la que más cantaba. Con 14 px de la tarjeta + 22 aquí quedan 36
   arriba y 34 abajo: aire parejo y la banda blanca deja de competir. */
.valores{padding:22px 0 34px}
.valores-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px 38px}

/* Las divisiones entre puntos vuelven, que es lo que se quería. La diferencia
   con el `border-left` original: esta línea va centrada y mide el 78% del
   alto, así que no toca el borde de arriba ni el de abajo. Una línea que
   llega a las dos puntas cierra la celda y dibuja una tabla; esta solo
   separa. */
/* La división va en el MEDIO del espacio entre columnas (`left:-19px`, la
   mitad del gap), no pegada al borde del texto. Cuando se hacía con relleno
   lateral, ese relleno le quitaba ~50 px de ancho útil a cada columna y los
   títulos largos partían en dos líneas sin necesidad. */
.valor{position:relative;display:flex;gap:14px;align-items:flex-start;padding:2px 0}
.valor::before{content:"";position:absolute;left:-19px;top:50%;transform:translateY(-50%);
  width:1px;height:78%;background:var(--linea)}
.valor:first-child::before{display:none}
.valor > .ico-svg{color:var(--marino);margin-top:3px}
.valor h3{font-size:.94rem;margin:0 0 3px}
.valor p{font-size:.82rem;color:var(--texto-2);margin:0;line-height:1.5}

/* ─────────────── Secciones ─────────────── */
.sec{padding:92px 0}
/* Destacados iba a 92 px de la franja azul y quedaba un vacío blanco enorme
   justo donde la curva pide continuidad. Pegado al arco se lee como una sola
   composición. */
.cifras + .sec{padding-top:22px}
.sec-tinte{background:var(--tinte)}
.sec-neutro{background:var(--neutro)}
.sec-cab{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;
  margin-bottom:40px;flex-wrap:wrap}
.sec-cab h2{margin:0;max-width:22ch}
.sec-cab.centro{flex-direction:column;align-items:center;text-align:center}
.sec-cab.centro h2{max-width:26ch}
.sec-cab .sub{color:var(--texto-2);max-width:58ch;margin:10px 0 0}

/* ─────────────── Tarjetas de inmueble ─────────────── */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:26px}
.card{background:var(--superficie);border:1px solid var(--linea-2);border-radius:var(--r-xl);
  overflow:hidden;display:flex;flex-direction:column;text-align:left;box-shadow:var(--sombra);
  transition:transform .26s cubic-bezier(.2,.7,.3,1), box-shadow .26s, border-color .26s}
.card:hover{box-shadow:var(--sombra-2);transform:translateY(-6px);border-color:var(--marino-cl)}
/* Velo en la parte alta de la foto: sin esto el badge blanco se pierde
   sobre fachadas claras, que en Barranquilla son la mayoría. */
.card-img::after{content:"";position:absolute;inset:0 0 auto;height:64px;pointer-events:none;
  background:linear-gradient(rgba(10,20,50,.28),transparent)}
.card-img{position:relative;aspect-ratio:16/11;background:var(--neutro);overflow:hidden}
.card-img img{width:100%;height:100%;object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.card:hover .card-img img{transform:scale(1.06)}
.badge{position:absolute;top:13px;left:13px;background:var(--marino);color:#fff;
  font-size:.68rem;font-weight:700;padding:6px 13px;border-radius:var(--r-pill);
  letter-spacing:.02em;box-shadow:0 3px 10px rgba(0,0,0,.22)}
.badge-venta{background:var(--rojo)}
/* Antes esto era un degradado con corte duro al 50%. Como "Arriendo" tiene
   más letras que "venta", el corte caía en mitad de la palabra y quedaba
   media sobre azul y media sobre rojo: parecía un error de render. En la
   tarjeta esta ficha muestra el TIPO de inmueble, no la gestión, así que el
   color acá es decoración y un solo tono es lo correcto. Donde sí importa
   nombrar las dos gestiones —la barra lateral de la ficha— van dos fichas
   separadas, cada una del color de su palabra (ver gestion_fichas()). */
.badge-mixto{background:var(--marino)}
.card-b{padding:17px 18px 19px;display:flex;flex-direction:column;flex:1;gap:9px}
.card-b h3{margin:0;font-size:1.02rem}
.loc{display:flex;align-items:center;gap:6px;font-size:.83rem;color:var(--texto-2);margin:0}
.loc .ico-svg{color:var(--rojo);flex:0 0 auto}

/* Datos en cajitas: la pieza del mockup */
.datos{display:flex;flex-wrap:wrap;gap:7px;margin:2px 0 0;padding:0;list-style:none}
.dato{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--linea);
  border-radius:var(--r-s);padding:5px 10px;font-size:.79rem;color:var(--texto-2);
  background:var(--fondo)}
.dato .ico-svg{color:var(--marino)}
.dato b{color:var(--texto);font-weight:700;font-variant-numeric:tabular-nums}
.dato i{font-style:normal;color:var(--texto-3);font-size:.94em}

.precio{font-size:1.22rem;font-weight:800;color:var(--marino);margin:auto 0 0;
  padding-top:9px;border-top:1px solid var(--linea-2);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.precio small{display:block;font-size:.7rem;font-weight:600;color:var(--texto-3);
  letter-spacing:0;margin-top:1px}

/* ── Precio con etiqueta ──
   Domus da arriendo y venta como dos números y antes se pegaban con una
   barra: "$ 2.500.000 / $ 300.700.000", sin decir cuál era cuál. Ahora cada
   cifra lleva su rótulo encima. */
.precio-lista{display:flex;flex-wrap:wrap;gap:4px 20px;align-items:flex-end}
.precio-item{display:flex;flex-direction:column;gap:1px;min-width:0}
.precio-item i{font-style:normal;font-size:.62rem;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--texto-3);line-height:1.2}
.precio-item b{font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;color:inherit}
/* "Consultar" no debe competir visualmente con una cifra real */
.precio-consultar b{font-weight:700;font-size:.82em;color:var(--texto-2)}
.precio-doble{gap:4px 16px}
.precio-doble .precio-item b{font-size:.86em}

.precio-barra{gap:2px 14px}
.precio-barra .precio-item i{font-size:.56rem}
.precio-barra .precio-item b{font-size:.92rem}
@media (max-width:420px){
  .precio-doble{flex-direction:column;align-items:flex-start;gap:3px}
  .precio-doble .precio-item b{font-size:.95em}
}

/* ─────────────── Franja de captación ─────────────── */
.cta{position:relative;background:linear-gradient(150deg,#1b3688,#0f1f52);
  color:rgba(255,255,255,.9);padding:76px 0;overflow:hidden}
.cta::before{content:"";position:absolute;right:-90px;top:-90px;width:340px;height:340px;
  border:40px solid rgba(255,255,255,.05);border-radius:50%}
.cta-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.02fr .98fr;
  gap:48px;align-items:center}
.cta h2{color:#fff}
.cta .eyebrow{color:rgba(255,255,255,.7)}
.form-card{background:var(--superficie);color:var(--texto);border-radius:var(--r-xl);padding:30px;
  box-shadow:var(--sombra-3);display:flex;flex-direction:column;gap:14px}
.form-card h3{margin:0}
.f-fila{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fld{display:flex;flex-direction:column}
.fld label{font-size:.75rem;font-weight:700;color:var(--texto-2);margin-bottom:5px}
.aviso{font-size:.72rem;color:var(--texto-3);margin:0}
.msg{margin:0;font-size:.86rem;font-weight:600;padding:12px 15px;border-radius:var(--r-s);
  background:var(--rojo-cl);color:var(--rojo-osc);border-left:3px solid var(--rojo)}

/* ─────────────── Servicios ─────────────── */
.servicios{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:22px}
.servicio{background:var(--superficie);border:1px solid var(--linea-2);border-radius:14px;
  padding:30px 24px;transition:.2s;box-shadow:var(--sombra)}
.servicio:hover{transform:translateY(-5px);box-shadow:var(--sombra-2);border-color:var(--marino-cl)}
.servicio .aro{width:50px;height:50px;border-radius:14px;background:var(--tinte);
  color:var(--marino);display:grid;place-items:center;margin-bottom:15px}
.servicio h3{font-size:1rem;margin:0 0 5px}
.servicio p{font-size:.85rem;color:var(--texto-2);margin:0}

/* ─────────────── Cabecera de página interior ─────────────── */
.ph{position:relative;background:linear-gradient(150deg,#1b3688,#0f1f52);color:#fff;
  padding:62px 0 78px;overflow:hidden}
.ph::before{content:"";position:absolute;inset:0;opacity:.45;
  background-image:radial-gradient(rgba(255,255,255,.13) 1px,transparent 1px);
  background-size:26px 26px;mask-image:linear-gradient(160deg,#000,transparent 70%);
  -webkit-mask-image:linear-gradient(160deg,#000,transparent 70%)}
.ph .wrap{position:relative;z-index:2}
.ph h1{color:#fff;margin:0;font-size:clamp(1.75rem,3.6vw,2.7rem)}
.ph .crumb{font-size:.8rem;color:rgba(255,255,255,.7);margin:8px 0 0}
.ph .crumb a:hover{color:#fff}

/* ─────────────── Misión / visión ─────────────── */
.dos{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start}
.mv{background:var(--superficie);border:1px solid var(--linea-2);border-radius:14px;
  padding:30px;box-shadow:var(--sombra);position:relative;overflow:hidden}
.mv::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--rojo)}
.mv h3{color:var(--rojo);font-size:1.1rem}
.mv p{margin:0;color:var(--texto-2)}
.chips{display:flex;flex-wrap:wrap;gap:11px;list-style:none;padding:0;margin:0;justify-content:center}
.chips li{background:var(--superficie);border:1px solid var(--linea);border-radius:var(--r-pill);
  padding:10px 22px;font-size:.86rem;font-weight:600;color:var(--marino);box-shadow:var(--sombra)}

/* ─────────────── Bancos ─────────────── */
.bancos{display:grid;grid-template-columns:repeat(auto-fit,minmax(252px,1fr));gap:22px}
.banco{background:var(--superficie);border:1px solid var(--linea-2);border-radius:14px;
  padding:26px;box-shadow:var(--sombra);border-top:4px solid var(--marino)}
.banco .tipo{font-size:.7rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--texto-3);margin:0}
.banco .nom{font-size:1.26rem;font-weight:800;margin:2px 0 10px;color:var(--marino)}
.banco .num{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:1.06rem;
  font-weight:700;color:var(--rojo);margin:0 0 8px;word-break:break-all;font-variant-numeric:tabular-nums}
.banco .sm{font-size:.8rem;color:var(--texto-2);margin:0 0 6px}
.banco hr{border:0;border-top:1px solid var(--linea-2);margin:14px 0}
.nota{background:var(--rojo-cl);border-left:4px solid var(--rojo);border-radius:var(--r-s);
  padding:18px 22px;margin-top:26px}
.nota p{margin:0;font-size:.89rem}
/* `:not(.btn)` no es un detalle: sin eso, este selector (una clase + un tipo)
   le gana en especificidad a `.btn` (una clase) y le pinta el texto ROJO
   SOBRE FONDO ROJO. El botón queda ilegible y el CSS se ve correcto leyéndolo
   por separado — el choque solo aparece cuando un botón cae dentro de una
   nota, que es justo lo que pasa en favoritos. La intención de la regla es
   «los enlaces sueltos de una nota van en rojo»; un botón no es un enlace
   suelto. */
.nota a:not(.btn){color:var(--rojo);font-weight:700}

/* ─────────────── Portales ─────────────── */
.portal{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:22px}
.pcard{background:var(--superficie);border:1px solid var(--linea-2);border-radius:14px;
  padding:28px;display:flex;flex-direction:column;gap:11px;box-shadow:var(--sombra);transition:.2s}
.pcard:hover{transform:translateY(-5px);box-shadow:var(--sombra-2)}
.pcard .aro{width:50px;height:50px;border-radius:14px;background:var(--tinte);color:var(--marino);
  display:grid;place-items:center;margin-bottom:3px}
.pcard h3{font-size:1rem;margin:0}
.pcard p{font-size:.86rem;color:var(--texto-2);flex:1;margin:0}

/* ─────────────── Contacto ─────────────── */
.cinfo{display:grid;gap:18px;margin-bottom:26px}
.cinfo-i{display:flex;gap:15px;align-items:flex-start}
.cinfo-i .aro{flex:0 0 44px;height:44px;border-radius:13px;background:var(--tinte);
  color:var(--marino);display:grid;place-items:center}
.cinfo-i h4{margin:0 0 2px;font-size:.94rem;color:var(--marino)}
.cinfo-i p{margin:0;font-size:.88rem;color:var(--texto-2)}
.cinfo-i a:hover{color:var(--rojo)}
.mapa{border:0;width:100%;height:330px;border-radius:14px;filter:grayscale(.2)}
.tramite{display:grid;grid-template-columns:.9fr 1.1fr;gap:44px;align-items:start}

/* ─────────────── Filtros y resultados ─────────────── */
.filtros{background:var(--superficie);border:1px solid var(--linea-2);border-radius:var(--r-xl);
  padding:22px;box-shadow:var(--sombra);margin-bottom:28px;
  /* Los filtros NO son pegajosos. Lo eran (position:sticky;top:96px) y al
     bajar quedaban flotando encima de las fotos de las tarjetas, tapando
     justo lo que uno está mirando. Un panel de filtros que persigue al
     lector estorba más de lo que ayuda: se llena una vez y se deja quieto. */
  position:static}
.f-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(162px,1fr));gap:14px;align-items:end}
.f-grid .btn{width:100%}
.res-n{font-size:.88rem;color:var(--texto-2);margin:0 0 20px}
.res-n b{color:var(--marino);font-variant-numeric:tabular-nums;font-size:1.06rem}
.aviso-fuente{display:inline-block;margin-left:8px;background:var(--rojo-cl);color:var(--rojo-osc);
  border-left:3px solid var(--rojo);padding:3px 10px;border-radius:3px;font-size:.78rem;font-weight:600}
.vacio{text-align:center;padding:64px 20px;color:var(--texto-3)}
.vacio h3{color:var(--marino);font-size:1.3rem}

.paginacion{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;align-items:center;margin:46px 0 0}
/* `:not(.btn)` acá y en `.vistas a` es preventivo: hoy no hay botones dentro,
   pero estas reglas son del mismo tipo que la de `.nota a`, que sí dejó un
   botón con texto rojo sobre fondo rojo. Cuesta seis caracteres y cierra la
   trampa antes de que alguien meta un botón. */
.paginacion a:not(.btn){min-width:42px;padding:10px 14px;border:1px solid var(--linea);border-radius:var(--r-s);
  font-size:.86rem;font-weight:700;text-align:center;transition:.16s;background:var(--superficie);
  color:var(--marino)}
.paginacion a:hover{border-color:var(--rojo);color:var(--rojo)}
.paginacion a.on{background:var(--marino);border-color:var(--marino);color:#fff}
.pag-gap{padding:0 4px;color:var(--texto-3)}

/* ─────────────── Ficha del inmueble ─────────────── */
.det{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(300px,.9fr);
  gap:44px;align-items:start}
/* La proporción y el TOPE DE ALTURA viven en el contenedor, no en la imagen.
   En el catálogo hay fotos verticales (576x1024) mezcladas con horizontales;
   si la altura la decide la imagen, una vertical empuja el precio y los datos
   fuera de la pantalla y hay que desplazarse para verlos. Con el contenedor
   manda, cualquier foto se recorta y la página no se mueve. */
.det-img{position:relative;border-radius:var(--r-xl);overflow:hidden;
  box-shadow:var(--sombra-2);background:var(--neutro);
  aspect-ratio:16/10}
.det-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gal-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border:0;
  border-radius:50%;background:rgba(15,31,82,.6);color:#fff;font-size:1.5rem;line-height:1;
  cursor:pointer;transition:.18s;display:grid;place-items:center}
.gal-nav:hover{background:var(--rojo)}
.gal-prev{left:13px} .gal-next{right:13px}
.gal-cont{position:absolute;bottom:13px;right:13px;background:rgba(15,31,82,.7);color:#fff;
  font-size:.75rem;font-weight:700;padding:5px 12px;border-radius:var(--r-pill);
  font-variant-numeric:tabular-nums}
.miniaturas{display:grid;grid-auto-flow:column;grid-auto-columns:92px;gap:9px;margin-top:11px;
  overflow-x:auto;padding-bottom:6px;scrollbar-width:thin}
.mini{border:2px solid transparent;border-radius:8px;padding:0;background:none;cursor:pointer;
  overflow:hidden;line-height:0;transition:.16s}
.mini img{width:92px;height:64px;object-fit:cover}
.mini:hover{border-color:var(--marino-cl)}
.mini.on{border-color:var(--rojo)}

.det-side{background:var(--superficie);border:1px solid var(--linea-2);border-radius:var(--r-xl);
  padding:30px;box-shadow:var(--sombra-2);display:flex;flex-direction:column;gap:16px;
  position:sticky;top:104px}

/* ── Cuadro de precios de la ficha ──
   Tabulado, no en una línea: "Arriendo $ 5.500.000 Venta $ 850.000.000"
   corrido se lee como un borrón. Rótulo a la izquierda, cifra a la derecha,
   y las cifras alineadas por columna con ancho de dígito fijo para que los
   millones queden uno debajo del otro. */
.precio-caja{border:1px solid var(--linea-2);border-radius:var(--r-s);
  background:var(--tinte);overflow:hidden}
.pc-fila{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:11px 14px}
.pc-fila + .pc-fila{border-top:1px solid var(--linea-2)}
.pc-etq{font-size:.7rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--texto-3);flex:0 0 auto}
.pc-val{font-family:Poppins,sans-serif;font-size:1.32rem;font-weight:800;color:var(--marino);
  font-variant-numeric:tabular-nums;letter-spacing:-.025em;text-align:right;
  line-height:1.15;min-width:0;overflow-wrap:anywhere}
/* Arriendo en azul y venta en rojo, igual que sus fichas. Por CLASE y no
   por posición: la fila única de un inmueble de solo venta es a la vez la
   primera y la última, y con :first-child quedaba azul contra su ficha roja. */
.pc-arriendo .pc-val{color:var(--marino)}
.pc-venta .pc-val{color:var(--rojo-osc)}
/* "Consultar" no debe competir con una cifra real */
.pc-consultar .pc-val{font-size:.95rem;font-weight:700;color:var(--texto-2);font-family:inherit}

/* ── Fichas de gestión ── */
.fichas-g{display:flex;flex-wrap:wrap;gap:7px;align-self:flex-start}
.ficha-g{font-size:.68rem;font-weight:700;letter-spacing:.04em;padding:5px 12px;
  border-radius:var(--r-pill);color:#fff;line-height:1.3}
.ficha-arriendo{background:var(--marino)}
.ficha-venta{background:var(--rojo)}
.det-cod{font-size:.79rem;color:var(--texto-3);margin:0}
.det-tbl{width:100%;border-collapse:collapse;margin:6px 0 2px}
.det-tbl th,.det-tbl td{text-align:left;padding:11px 0;border-bottom:1px solid var(--linea-2);
  font-size:.88rem;vertical-align:middle}
.det-tbl tr:last-child th,.det-tbl tr:last-child td{border-bottom:0}
.det-tbl th{font-weight:500;color:var(--texto-2);width:58%}
/* El icono va dentro de la etiqueta: ayuda a escanear sin romper la tabla */
.det-tbl th{white-space:nowrap}
.det-tbl th .ico-svg{color:var(--marino);vertical-align:-3px;margin-right:9px;opacity:.75}
.det-tbl th span{display:inline}
.det-tbl td{font-weight:700;text-align:right;color:var(--texto);font-variant-numeric:tabular-nums}
.det-tbl tr:hover th,.det-tbl tr:hover td{background:var(--tinte)}
.det-desc{white-space:pre-line;color:var(--texto-2)}
.ficha-lnk{display:block;margin-top:2px;font-size:.79rem;font-weight:600;color:var(--texto-2);
  text-align:center;text-decoration:underline}
.ficha-lnk:hover{color:var(--rojo)}
.compartir{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px;
  padding-top:14px;border-top:1px solid var(--linea-2)}
.compartir-t{font-size:.7rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--texto-3);margin-right:2px}
.comp{width:36px;height:36px;border:1px solid var(--linea);border-radius:50%;background:var(--superficie);
  color:var(--texto-2);display:grid;place-items:center;cursor:pointer;transition:.16s;padding:0}
.comp:hover{border-color:var(--rojo);color:var(--rojo);transform:translateY(-2px)}
.comp.ok{border-color:#1a7f37;color:#1a7f37}

/* ─────────────── Footer ─────────────── */
.ftr{background:var(--marino-osc);color:rgba(255,255,255,.76);padding:60px 0 0;font-size:.9rem}
.ftr-grid{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:44px;padding-bottom:42px}
.ftr h4{color:#fff;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:16px}
.ftr p{margin:0 0 9px}
.ftr a:hover{color:#fff}
.ftr-sm{font-size:.79rem;opacity:.62;margin-top:15px}
.ftr-btm{border-top:1px solid rgba(255,255,255,.12);padding:19px 0;font-size:.77rem;opacity:.6}
.ftr-redes{display:flex;gap:10px;margin-top:14px}
.ftr-redes a{width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.22);
  display:grid;place-items:center;transition:.16s}
.ftr-redes a:hover{background:var(--rojo);border-color:var(--rojo);color:#fff}

/* WhatsApp flotante */
.wa{position:fixed;right:22px;bottom:22px;z-index:80;width:54px;height:54px;border-radius:50%;
  background:#25d366;color:#fff;display:grid;place-items:center;
  box-shadow:0 8px 24px rgba(0,0,0,.3);transition:.2s}
.wa:hover{transform:scale(1.08)}

/* ─────────────── Responsive ─────────────── */
@media (max-width:1080px){
  .b-fila{grid-template-columns:1fr 1fr;gap:15px}
  .b-fila .toggle,.b-fila .btn{grid-column:1/-1}
  .b-fila .btn{width:100%}
  .valores-grid{grid-template-columns:1fr 1fr;gap:26px 38px}
  .valor:nth-child(3)::before{display:none}
}
@media (max-width:960px){
  /* Una sola columna: acá sí conviene acortarla, para que el precio
     no quede tan abajo. */
  .det-img{max-height:46vh}
  .miniaturas{grid-auto-columns:76px}
  .mini img{width:76px;height:54px}
  .hero{padding:56px 0 118px}
  .hero-in,.cta-grid,.dos,.det,.tramite{grid-template-columns:1fr}
  .hero-foto{order:-1}
  .hero-chip{left:14px}
  .det-side{position:static}
  .ftr-grid{grid-template-columns:1fr;gap:30px}
}
@media (max-width:860px){
  .burger{display:flex;margin-left:auto}
  .nav{position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;
    background:var(--fondo);border-bottom:1px solid var(--linea);padding:6px 24px 20px;
    box-shadow:var(--sombra-2);display:none;margin:0}
  .nav.open{display:flex}
  .nav a{width:100%;padding:14px 0;border-bottom:1px solid var(--linea-2)}
  .hdr-in{position:relative;gap:14px}
  .wa-pill{display:none}
  .buscador{margin-top:-64px}
  .sec{padding:56px 0}
  .valores-grid{grid-template-columns:1fr;gap:20px}
  .valor::before{display:none}
}
@media (max-width:560px){
  .b-fila,.f-fila{grid-template-columns:1fr}
  .logo img{width:158px}
  .toggle{width:100%}
  .toggle label{flex:1;text-align:center;padding:10px 12px}
  .hero-chip{position:static;margin-top:14px;display:inline-flex}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* ─────────────── Favoritos ─────────────── */
.fav{position:absolute;top:11px;right:11px;width:34px;height:34px;border:0;border-radius:50%;
  background:rgba(255,255,255,.92);color:var(--texto-2);display:grid;place-items:center;
  cursor:pointer;transition:.16s;padding:0;box-shadow:0 2px 8px rgba(0,0,0,.16)}
.fav:hover{background:#fff;color:var(--rojo);transform:scale(1.08)}
.fav[aria-pressed="true"]{color:var(--rojo)}
.fav[aria-pressed="true"] svg{fill:var(--rojo)}
.fav-link{position:relative;display:grid;place-items:center;width:40px;height:40px;
  border-radius:50%;color:var(--marino);transition:.16s}
.fav-link:hover{background:var(--tinte);color:var(--rojo)}
.fav-n{position:absolute;top:-2px;right:-2px;min-width:18px;height:18px;border-radius:9px;
  background:var(--rojo);color:#fff;font-family:Poppins,sans-serif;font-size:.66rem;
  font-weight:700;display:grid;place-items:center;padding:0 5px;line-height:1}

/* ─────────────── Simulador de crédito ─────────────── */
.simulador{background:var(--tinte);border-radius:14px;padding:22px;margin-top:14px}
.simulador h4{font-family:Poppins,sans-serif;font-size:.98rem;margin:0 0 4px;color:var(--marino)}
.simulador .pie{font-size:.74rem;color:var(--texto-3);margin:12px 0 0;line-height:1.5}
.sim-campos{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0 0}
.sim-campos .fld label{font-size:.72rem}
/* El resultado era una línea al ras: la cifra grande y el texto colgando al
   lado, sin caja propia, con el borde superior como único límite. Quedaba
   desalineado del resto del recuadro. Ahora es una caja como las demás,
   con la cifra y su explicación apiladas y centradas en su propio bloque. */
.sim-res{margin:16px 0 0;padding:14px;border-radius:var(--r-s);
  background:var(--superficie);border:1px solid var(--linea-2);
  display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center}
.sim-res .n{font-family:Poppins,sans-serif;font-size:1.62rem;font-weight:800;color:var(--rojo);
  font-variant-numeric:tabular-nums;letter-spacing:-.025em;line-height:1.1;
  overflow-wrap:anywhere}
.sim-res .t{font-size:.78rem;color:var(--texto-2);line-height:1.45}
.sim-res .t span{font-weight:700;color:var(--texto)}
.rango{width:100%;accent-color:var(--rojo)}

/* ─────────────── Similares ─────────────── */
.similares{margin-top:52px}

/* ─────────────── Tour 3D / video ─────────────── */
.medios{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.medio{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--linea);
  border-radius:var(--r-pill);padding:9px 18px;font-size:.83rem;font-weight:600;
  color:var(--marino);background:var(--superficie);transition:.16s}
.medio:hover{border-color:var(--rojo);color:var(--rojo)}

@media (max-width:560px){ .sim-campos{grid-template-columns:1fr} .fav-link{display:none} }

/* ─────────────── Mapa ─────────────── */
.vistas{display:inline-flex;background:var(--neutro);border-radius:var(--r-pill);padding:4px;gap:2px}
.vistas a:not(.btn){padding:9px 20px;border-radius:var(--r-pill);font-size:.83rem;font-weight:700;
  color:var(--texto-2);transition:.16s;display:inline-flex;align-items:center;gap:7px}
.vistas a.on{background:var(--marino);color:#fff;box-shadow:0 3px 10px rgba(25,50,130,.28)}
.vistas a:not(.on):hover{color:var(--marino)}

/* ── El mapa NO debe taparle la cabecera ──
   Leaflet reparte z-index propios que llegan hasta 1000 (sus paneles arrancan
   en 400 y los controles están en 1000), mientras la cabecera del sitio está
   en 70. Antes esto tenía `position:relative` SIN z-index, y position:relative
   solo no crea contexto de apilamiento: los 1000 de Leaflet competían de igual
   a igual con los 70 de la cabecera en el contexto raíz y le pasaban por
   encima al bajar la página.

   `isolation:isolate` crea el contexto de apilamiento. Con eso, todos los
   z-index internos de Leaflet quedan CONFINADOS a esta caja, y la caja entera
   participa afuera con un solo valor —el z-index:0 de acá—, muy por debajo de
   la cabecera. Es la solución correcta: no hay que ir subiéndole el z-index a
   la cabecera cada vez que una librería traiga números más altos.

   Funciona porque Leaflet posiciona todo en `absolute`; un `position:fixed`
   adentro sí escaparía (verificado: leaflet.css no usa fixed). */
.mapa-caja{position:relative;z-index:0;isolation:isolate;
  border:1px solid var(--linea);border-radius:14px;overflow:hidden;
  box-shadow:var(--sombra);background:var(--neutro)}
#mapa{height:min(74vh,720px);width:100%}
.mapa-cargando{position:absolute;inset:0;display:grid;place-items:center;z-index:500;
  background:var(--neutro);color:var(--texto-3);font-size:.9rem;font-weight:600}

/* Pin con el precio: se lee de un vistazo sin abrir nada */
.pin{background:var(--marino);color:#fff;border-radius:var(--r-pill);padding:5px 11px;
  font-family:Poppins,sans-serif;font-size:.74rem;font-weight:700;white-space:nowrap;
  box-shadow:0 3px 10px rgba(0,0,0,.3);border:2px solid #fff;
  font-variant-numeric:tabular-nums;transition:.14s}
.pin-venta{background:var(--rojo)}
.pin:hover{transform:scale(1.09);z-index:1000!important}
.pin-activo{outline:3px solid rgba(225,27,34,.35);outline-offset:2px}

/* Globo de Leaflet, con nuestra piel */
.leaflet-popup-content-wrapper{border-radius:12px;padding:0;overflow:hidden;
  box-shadow:var(--sombra-2);background:var(--superficie)}
.leaflet-popup-content{margin:0;width:238px!important;line-height:1.5}
.leaflet-popup-tip{background:var(--superficie)}
.leaflet-container a.leaflet-popup-close-button{color:#fff;top:7px;right:8px;
  text-shadow:0 1px 3px rgba(0,0,0,.5);font-size:20px;width:22px;height:22px}
.globo img{width:100%;height:132px;object-fit:cover;display:block;background:var(--neutro)}
.globo-b{padding:12px 14px;color:var(--texto)}
.globo-b .g-p{font-family:Poppins,sans-serif;font-size:1rem;font-weight:800;color:var(--marino);
  margin:0 0 1px;font-variant-numeric:tabular-nums}
.globo-b .g-t{font-family:Poppins,sans-serif;font-size:.82rem;font-weight:600;margin:0 0 2px}
.globo-b .g-d{font-size:.75rem;color:var(--texto-2);margin:0 0 9px}
.globo-b .g-v{display:block;text-align:center;background:var(--rojo);color:#fff;
  font-family:Poppins,sans-serif;font-size:.76rem;font-weight:700;padding:8px;
  border-radius:var(--r-s);transition:.16s}
.globo-b .g-v:hover{background:var(--rojo-osc)}

/* Grupo de pines cuando hay muchos juntos */
.grupo{background:var(--marino);color:#fff;border:3px solid #fff;border-radius:50%;
  display:grid;place-items:center;font-family:Poppins,sans-serif;font-weight:800;
  font-size:.82rem;box-shadow:0 3px 12px rgba(0,0,0,.32)}

.mapa-nota{font-size:.78rem;color:var(--texto-3);margin:12px 0 0}

/* ─────────────── Tabla de precios por barrio ─────────────── */
.tabla-caja{overflow-x:auto;border:1px solid var(--linea);border-radius:14px;
  box-shadow:var(--sombra);background:var(--superficie)}
.tabla-mercado{border-collapse:collapse;width:100%;min-width:760px;font-size:.9rem}
.tabla-mercado th,.tabla-mercado td{padding:12px 16px;border-bottom:1px solid var(--linea-2);
  text-align:left;vertical-align:top}
.tabla-mercado thead th{background:var(--tinte);font-size:.72rem;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;color:var(--texto-2);white-space:nowrap;
  position:sticky;top:0;z-index:2}
.tabla-mercado tbody tr:last-child td{border-bottom:0}
.tabla-mercado tbody tr:hover{background:var(--tinte)}
.tabla-mercado .der{text-align:right;font-variant-numeric:tabular-nums}
.tabla-mercado b{color:var(--marino);font-weight:700}
.tabla-mercado .sm{font-size:.76rem;color:var(--texto-3)}

/* ─────────────── Comparación con el barrio, en la ficha ─────────────── */
.comparativa{background:var(--tinte);border-radius:14px;padding:20px 22px;margin-top:14px}
.comparativa h4{font-family:Poppins,sans-serif;font-size:.98rem;margin:0 0 10px;color:var(--marino)}
.comparativa .barra{height:8px;border-radius:5px;background:var(--linea);position:relative;
  margin:16px 0 8px;overflow:visible}
.comparativa .medio{position:absolute;top:-5px;bottom:-5px;width:2px;background:var(--texto-3);
  left:50%;border-radius:2px}
.comparativa .punto{position:absolute;top:-4px;width:16px;height:16px;border-radius:50%;
  background:var(--rojo);border:3px solid var(--fondo);box-shadow:0 2px 6px rgba(0,0,0,.22);
  transform:translateX(-50%)}
.comparativa .ejes{display:flex;justify-content:space-between;font-size:.7rem;
  color:var(--texto-3);font-family:Poppins,sans-serif;font-weight:600}
.comparativa p{margin:10px 0 0;font-size:.86rem;color:var(--texto-2)}
.comparativa .dif{font-family:Poppins,sans-serif;font-weight:700;color:var(--marino)}

/* ─────────────── Logo ─────────────── */
/* El símbolo es SVG embebido, así que toma sus dos colores de estas
   variables y se adapta al tema sin duplicar archivos. */
:root{ --marca-a:#0b4893; --marca-b:#e31029; --logo-tinta:#0b4893 }
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){ --marca-a:#e9eefa; --marca-b:#ff6b70; --logo-tinta:#e9eefa }
}
:root[data-theme="dark"]{ --marca-a:#e9eefa; --marca-b:#ff6b70; --logo-tinta:#e9eefa }

.logo-marca{display:block;flex:0 0 auto;height:auto}

.logo-full{display:inline-flex;align-items:center;gap:11px;line-height:1}
.logo-svg{flex:0 0 auto;display:block}
.logo-txt{display:flex;flex-direction:column;justify-content:center;gap:2px}
.logo-txt b{font-family:Poppins,sans-serif;font-weight:800;letter-spacing:-.015em;
  color:var(--logo-tinta);line-height:.92;
  font-size:calc(var(--logo-alto, 46px) * .5)}
/* `white-space:nowrap` para que el subtítulo no se parta.
   Al añadirle «SAS» ya no cabía en una línea y el navegador lo cortaba en dos,
   que es lo que hacía ver el logo apretado. En una sola línea el bloque de
   texto queda de dos renglones —como el nombre del logo original— en vez de
   tres. El tamaño baja de .19 a .165 para compensar el ancho extra. */
.logo-txt i{font-family:Poppins,sans-serif;font-style:normal;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--logo-tinta);
  opacity:.82;line-height:1;white-space:nowrap;
  font-size:calc(var(--logo-alto, 46px) * .165)}

/* El pie siempre es oscuro, así que ahí la marca va clara sin importar el tema */
.ftr .logo-full{--marca-a:#eef2fb;--marca-b:#ff7a7e;--logo-tinta:#eef2fb}

/* ─────────────── Franja de cifras ─────────────── */
/* La sección ya no pinta nada: el color vive en una TARJETA, con las mismas
   esquinas redondeadas y la misma sombra que el buscador y las fichas de
   inmueble. Así el azul deja de ser una franja que parte la página en dos y
   pasa a ser un elemento más del mismo juego. */
/* Nada de rectángulo. La franja va de lado a lado y sus dos bordes son un
   arco muy abierto —el mismo gesto que la onda al pie del hero—, así que
   decora la página en vez de plantarle un bloque encima.

   El radio es elíptico: 50% en horizontal (media franja) contra 58 px en
   vertical. Esa desproporción es la que da la curva de media luna; con un
   radio normal saldrían esquinas redondeadas y volvería a ser una caja.
   Donde empieza el texto la curva ya solo bajó ~14 px, así que ninguna
   columna se sale del arco. */
.cifras{padding:0;margin-top:-6px}
.cifras-caja{position:relative;overflow:hidden;
  background:linear-gradient(150deg,#124085,var(--marino-osc));
  color:rgba(255,255,255,.82);padding:104px 0 100px}
/* La ola de arriba es la misma del hero, volteada. Al repetir el gesto en los
   dos bordes la franja deja de ser un rectángulo y pasa a leerse como una
   forma, sin tener que recortarla en media luna —que la volvía una pastilla
   flotando y se comía la página en vez de decorarla. */
/* 82 px, EXACTAMENTE lo que mide la del hero. El alto del recuadro es lo que
   escala la amplitud de la curva: con 62 px la ola de la franja era la misma
   forma pero más plana, así que las orillas no quedaban paralelas y la banda
   blanca seguía saliendo en cuña (27 px de desnivel medidos). Igualadas, la
   cuña baja a un par de píxeles. */
.cifras .onda,.cifras .onda svg{height:82px}
/* Sin `transform`: el volteo era justo lo que torcía la banda. El trazo de
   arriba ya viene con el relleno invertido desde `onda()`, con la misma curva
   que el hero, así que las tres orillas de la zona —pie del hero, techo y piso
   de la franja azul— corren paralelas. */
.cifras .onda-arriba{top:-1px;bottom:auto}
.cifras-caja::before{content:"";position:absolute;inset:0;opacity:.4;
  background-image:radial-gradient(rgba(255,255,255,.12) 1px,transparent 1px);
  background-size:26px 26px;
  mask-image:linear-gradient(120deg,#000,transparent 70%);
  -webkit-mask-image:linear-gradient(120deg,#000,transparent 70%)}
/* Las columnas salen de `--cifras`, que index.php calcula con count(): así la
   franja se reparte bien con 3 cifras o con 4, sin dejar un hueco a la derecha
   ni tener que tocar el CSS cada vez que se agrega o se quita una. */
.cifras-grid{position:relative;z-index:2;display:grid;
  grid-template-columns:repeat(var(--cifras,4),1fr);gap:30px 56px}
.cifra{position:relative}
.cifra::before{content:"";position:absolute;left:-28px;top:50%;transform:translateY(-50%);
  width:1px;height:78%;background:rgba(255,255,255,.18)}
.cifra:first-child::before{display:none}
.c-n{font-family:Poppins,sans-serif;font-size:clamp(1.9rem,3.4vw,2.7rem);font-weight:800;
  color:#fff;line-height:1;letter-spacing:-.035em;margin:0 0 8px;
  font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.c-n span{font-size:.86rem;font-weight:600;letter-spacing:.03em;color:var(--rojo);
  text-transform:uppercase}
.c-t{font-size:.85rem;line-height:1.5;margin:0;color:rgba(255,255,255,.72)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .cifras-caja{background:linear-gradient(150deg,#1d2534,#141922)}}
:root[data-theme="dark"] .cifras-caja{background:linear-gradient(150deg,#1d2534,#141922)}
@media (max-width:960px){
  .cifras-grid{grid-template-columns:1fr 1fr;gap:30px 44px}
  .cifra::before{left:-22px}
  .cifra:nth-child(3)::before{display:none}
}
/* Con tres cifras, dos columnas dejan la última sola en una fila a medio ancho.
   Entre 761 y 960 px caben tres columnas de sobra y la franja queda pareja; por
   debajo de eso serían demasiado angostas y vuelven a ser dos. */
@media (max-width:960px) and (min-width:761px){
  .cifras-n3 .cifras-grid{grid-template-columns:repeat(3,1fr);gap:30px 40px}
  .cifras-n3 .cifra::before{left:-20px}
  .cifras-n3 .cifra:nth-child(3)::before{display:block}
}
@media (max-width:560px){
  .cifras-grid{grid-template-columns:1fr}
  /* En una sola columna la división se acuesta: separa igual, sin cerrar caja. */
  .cifras-caja{padding:70px 0 66px}
  /* En móvil la del hero no se achica, así que esta tampoco puede. */
  .cifras .onda,.cifras .onda svg{height:82px}
  .cifras-grid{gap:26px}
  .cifra{padding:22px 0 0}
  .cifra::before{left:50%;top:0;transform:translateX(-50%);width:78%;height:1px}
  .cifra:first-child{padding-top:0}
  /* La regla de arriba (<=960) esconde la división de la tercera porque en dos
     columnas esa abre fila. Aquí hay UNA sola columna, así que sí lleva. */
  .cifra:nth-child(3)::before{display:block}
}

/* ─────────────── Barra fija de la ficha, en móvil ───────────────
   En una columna, el precio y el botón de contacto quedaban debajo de la foto
   y de las 20 miniaturas: había que desplazarse para verlos. Esta barra los
   mantiene siempre a la vista, que es lo que hacen los portales grandes. */
.barra-ficha{display:none}
@media (max-width:960px){
  .barra-ficha{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:75;
    align-items:center;gap:14px;padding:11px 16px;
    background:var(--superficie);border-top:1px solid var(--linea);
    box-shadow:0 -6px 24px rgba(18,36,86,.14)}
  .barra-ficha .bp{flex:1;min-width:0}
  .barra-ficha .bp b{display:block;font-size:1.06rem;font-weight:800;color:var(--marino);
    font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:1.15;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .barra-ficha .bp span{display:block;font-size:.72rem;color:var(--texto-3)}
  .barra-ficha .btn{padding:11px 18px;font-size:.82rem;flex:0 0 auto}
  /* Que el WhatsApp flotante y el pie no queden tapados por la barra */
  body.con-barra .wa{bottom:82px}
  body.con-barra .ftr-btm{padding-bottom:78px}
}

/* ─────────────── Ficha reestructurada ───────────────
   La columna ancha lleva lo que se LEE; la lateral, lo que se DECIDE. */
.det-main{min-width:0}
.det-h{font-size:1.3rem;margin:44px 0 14px}
.det-main > .det-h:first-of-type{margin-top:38px}

/* Banda de datos gruesos bajo la galería: es lo primero que alguien busca,
   y acá tiene el ancho completo en vez de apretarse en la columna angosta. */
.banda-datos{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));
  gap:1px;list-style:none;padding:0;margin:26px 0 0;
  background:var(--linea);border:1px solid var(--linea);border-radius:var(--r-xl);
  overflow:hidden}
.banda-datos li{background:var(--superficie);padding:20px 16px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:5px}
.banda-datos .ico-svg{color:var(--marino);opacity:.7}
.banda-datos b{font-family:Poppins,sans-serif;font-size:1.24rem;font-weight:800;
  color:var(--texto);letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
.banda-datos span{font-size:.75rem;color:var(--texto-3);line-height:1.2}

/* La tabla de detalles, a dos columnas cuando hay ancho: así no queda una
   lista larguísima y estrecha. */
.det-tbl{width:100%;border-collapse:collapse;margin:0}
@media (min-width:760px){
  .det-tbl tbody{display:grid;grid-template-columns:1fr 1fr;column-gap:38px}
  .det-tbl tr{display:grid;grid-template-columns:1fr auto;align-items:center}
}
.comparativa{margin-top:0}
.det-desc{font-size:.97rem;line-height:1.75;max-width:68ch}

@media (max-width:960px){
  .det-h{margin:34px 0 12px}
  .banda-datos{grid-template-columns:repeat(auto-fit,minmax(104px,1fr))}
  .banda-datos li{padding:16px 10px}
  .banda-datos b{font-size:1.1rem}
}


/* ─────────────── PQR ─────────────── */
/* Va con fondo distinto del formulario de contacto a propósito: son dos cosas
   distintas y conviene que se vea. Una consulta comercial y el ejercicio de un
   derecho fundamental con plazo legal no deberían parecer el mismo trámite. */
.sec-alt{background:var(--tinte)}
.pqr-cols{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  gap:34px;align-items:start;margin-top:26px}
.pqr-form{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fld-par{display:grid;grid-template-columns:auto 1fr;gap:8px}
.ayuda-campo{font-size:.78rem;color:var(--texto-3);margin:5px 0 0;line-height:1.45}
.check-linea{display:flex;gap:10px;align-items:flex-start;font-size:.86rem;
  color:var(--texto-2);line-height:1.5;cursor:pointer}
.check-linea input{margin-top:3px;flex:0 0 auto;width:17px;height:17px;accent-color:var(--marino)}

.pqr-lado{background:var(--superficie);border:1px solid var(--linea-2);
  border-radius:var(--r-xl);padding:24px;box-shadow:var(--sombra)}
.pqr-lado h3{font-size:1.02rem;margin:0 0 4px;color:var(--marino)}
.pqr-nota{font-size:.82rem;color:var(--texto-2);line-height:1.55;margin:8px 0 0}
.pqr-tabla{width:100%;border-collapse:collapse;margin:14px 0 4px}
.pqr-tabla th{text-align:center;vertical-align:middle;white-space:nowrap;
  font-size:1.16rem;font-weight:800;color:var(--rojo);padding:10px 12px 10px 0;
  border-bottom:1px solid var(--linea-2);font-variant-numeric:tabular-nums}
.pqr-tabla th small{display:block;font-size:.62rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--texto-3)}
.pqr-tabla td{font-size:.82rem;color:var(--texto);padding:10px 0;line-height:1.5;
  border-bottom:1px solid var(--linea-2)}
.pqr-tabla tr:last-child th,.pqr-tabla tr:last-child td{border-bottom:0}

.pqr-caja{background:var(--superficie);border:1px solid var(--linea-2);
  border-left:3px solid var(--marino);border-radius:var(--r-s);
  padding:20px 24px;margin:26px 0}
.pqr-caja h3{font-size:1rem;margin:0 0 10px;color:var(--marino)}
.pqr-caja p{margin:0 0 10px;font-size:.92rem;line-height:1.62}
.pqr-caja p:last-child{margin-bottom:0}
.pqr-caja-ok{border-left-color:var(--verde,#0d7a4f)}

.pqr-canales{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  margin-top:18px}
.pqr-canales > div{background:var(--superficie);border:1px solid var(--linea-2);
  border-radius:var(--r-s);padding:16px 18px}
.pqr-canales h4{margin:0 0 6px;font-size:.82rem;text-transform:uppercase;
  letter-spacing:.05em;color:var(--texto-3)}
.pqr-canales p{margin:0;font-size:.9rem;line-height:1.6}

.lista-ok{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:9px}
.lista-ok li{position:relative;padding-left:26px;font-size:.94rem;line-height:1.6}
.lista-ok li::before{content:"";position:absolute;left:2px;top:.5em;width:9px;height:9px;
  border-radius:50%;background:var(--marino)}

/* La constancia de radicación que arma el JavaScript al enviar */
.pqr-constancia{grid-column:1/-1;background:var(--verde-cl,#e6f6ee);
  border:1px solid #bfe6d2;border-radius:var(--r-s);padding:20px 22px;margin-top:6px}
.pqr-constancia h4{margin:0 0 12px;font-size:1rem;color:#0a5c3c}
.pqr-constancia dl{display:grid;grid-template-columns:auto 1fr;gap:7px 16px;margin:0}
.pqr-constancia dt{font-size:.72rem;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:#4a7a63;align-self:center}
.pqr-constancia dd{margin:0;font-size:.95rem;font-weight:700;color:#0a5c3c;
  overflow-wrap:anywhere}
.pqr-constancia .rad{font-size:1.3rem;font-variant-numeric:tabular-nums;letter-spacing:.01em}
.pqr-constancia .pie{margin:14px 0 0;font-size:.82rem;font-weight:400;color:#2f5f4a;
  line-height:1.55}

@media (max-width:980px){
  .pqr-cols{grid-template-columns:1fr}
  .pqr-lado{order:-1}
}
@media (max-width:560px){
  .pqr-form{grid-template-columns:1fr}
  .pqr-form .fld[style*="1/-1"]{grid-column:auto}
}


/* ─────────────── Aviso «tienes inmuebles guardados» ─────────────── */
/* Aparece al tocar un botón de WhatsApp teniendo favoritos. Se diseña como
   una nota amable, no como una alerta: fondo claro, sin iconos de peligro y
   con la lista a la vista para que se entienda exactamente qué se va a
   mandar antes de mandarlo. */
.fav-aviso{position:fixed;inset:0;z-index:200;display:grid;place-items:center;
  padding:20px;background:rgba(9,25,60,.55);backdrop-filter:blur(3px);
  animation:favEntra .18s ease-out}
.fav-aviso-caja{position:relative;background:var(--superficie);color:var(--texto);
  border-radius:var(--r-xl);padding:30px 32px 26px;max-width:520px;width:100%;
  box-shadow:0 24px 60px rgba(9,25,60,.32);animation:favSube .22s cubic-bezier(.2,.7,.3,1)}
.fav-aviso-caja h3{margin:0 0 10px;font-size:1.2rem;color:var(--marino);padding-right:28px}
.fav-aviso-caja > p{margin:0 0 16px;font-size:.94rem;line-height:1.62;color:var(--texto-2)}
.fav-aviso-lista{margin:0 0 22px;padding:14px 16px;background:var(--tinte);
  border-radius:var(--r-s);border:1px solid var(--linea-2);
  font:inherit;font-size:.85rem;line-height:1.7;color:var(--texto);
  white-space:pre-wrap;max-height:180px;overflow:auto}
.fav-aviso-acciones{display:flex;gap:11px;flex-wrap:wrap}
.fav-aviso-acciones .btn{flex:1 1 auto;justify-content:center}
.fav-aviso-x{position:absolute;top:14px;right:15px;width:32px;height:32px;padding:0;
  border:0;border-radius:50%;background:transparent;color:var(--texto-3);
  font-size:1.45rem;line-height:1;cursor:pointer;transition:background .16s,color .16s}
.fav-aviso-x:hover{background:var(--neutro);color:var(--texto)}
.fav-aviso-x:focus-visible{outline:2px solid var(--marino);outline-offset:2px}
@keyframes favEntra{from{opacity:0}to{opacity:1}}
@keyframes favSube{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .fav-aviso,.fav-aviso-caja{animation:none}
}
@media (max-width:480px){
  .fav-aviso-caja{padding:24px 20px 20px}
  .fav-aviso-acciones{flex-direction:column}
}