/* ============================================================
   Levo Real Estate Group — sistema visual del sitio público.
   Tokens y reglas de docs/superpowers/specs/2026-08-20-sitio-publico-levo-design.md.
   Adaptado de la maqueta aprobada (maqueta/assets/estilo.css): mismo sistema,
   más el buscador (S2) y el selector ES/EN del bilingüe (fase A, 21-ago-2026).
   ============================================================ */

:root{
  /* Paleta — navy y celeste salen del main.css real de Levo */
  --tinta:#14181C;
  --metadato:#5F6B7A;
  --papel:#FFFFFF;
  --banda:#F4F4F2;
  --filete:#E7E9EC;
  --acento:#2B405F;
  --foco:#51A0D3;

  --serif:'Fraunces', 'Iowan Old Style', Georgia, serif;
  --sans:'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;

  /* Movimiento: 300ms, no 100. Es lo que separa marca de producto. */
  --t:300ms;

  /* Vuelta completa del hero: seis planos, cinco segundos cada uno. Todos los
     tiempos del pase están en PORCENTAJE del ciclo, así que cambiar este
     número reajusta fundidos y acercamiento solos. */
  --hero-ciclo:30s;
  --curva:cubic-bezier(.16,1,.3,1);

  --max:1440px;
  --gutter:clamp(20px, 5vw, 80px);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--papel); color:var(--tinta);
  font-family:var(--sans); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
button{font:inherit; cursor:pointer}

/* Foco visible — el celeste solo vive aquí y en lo accionable */
:focus-visible{outline:2px solid var(--foco); outline-offset:3px}

h1,h2,h3{
  font-family:var(--serif); font-weight:400;
  font-variation-settings:'SOFT' 0,'WONK' 0,'opsz' 60;
  letter-spacing:-.015em; line-height:1.08; margin:0;
}

.contenedor{max-width:var(--max); margin:0 auto; padding:0 var(--gutter)}

/* Eyebrow: el gesto que más "editorial" añade por menos código */
.eyebrow{
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--metadato); font-weight:500; margin:0 0 10px;
}

/* ---------- Header: píldora con blur, se oculta al bajar ---------- */
.cabecera{
  position:fixed; inset:16px clamp(12px,2vw,24px) auto; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; padding:12px clamp(14px,1.6vw,20px) 12px clamp(16px,3vw,28px);
  border-radius:100px;
  transition:background var(--t) var(--curva), transform var(--t) var(--curva),
             box-shadow var(--t) var(--curva), backdrop-filter var(--t);
}
.cabecera.sobre-foto{color:#fff}
.cabecera.pegada{
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(12px) saturate(140%);
  -webkit-backdrop-filter:blur(12px) saturate(140%);
  box-shadow:0 1px 0 var(--filete), 0 12px 40px -28px rgba(20,24,28,.5);
  color:var(--tinta);
}
.cabecera.oculta{transform:translateY(calc(-100% - 24px))}
.marca{display:flex; align-items:baseline; gap:10px; font-family:var(--serif);
  font-size:21px; letter-spacing:-.02em}
.nav{display:flex; align-items:center; gap:clamp(14px,2vw,30px); font-size:13.5px;
  letter-spacing:.01em; flex:none}
.nav a{position:relative; padding:4px 0; opacity:.9}
.nav a::after{content:''; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:currentColor; transition:right var(--t) var(--curva)}
.nav a:hover::after{right:0}

/* ---------- Bilingüe: nav + selector agrupados a la derecha ---------- */
.cabecera-derecha{display:flex; align-items:center; gap:clamp(14px,2vw,30px)}
.selector-idioma{display:flex; align-items:center; gap:6px; font-size:12px;
  letter-spacing:.04em; font-weight:600; flex:none}
.selector-idioma a{opacity:.55; padding:2px 3px}
.selector-idioma a.activo{opacity:1; text-decoration:underline; text-underline-offset:3px}
.selector-idioma a:hover{opacity:1}

/* ---------- Aviso "verlo en español" — solo en la versión inglesa, para
   quien llega con el navegador en español (nunca se redirige solo). ---------- */
.aviso-idioma{
  background:var(--acento); color:#fff; text-align:center;
  font-size:13px; padding:10px clamp(12px,3vw,24px);
}
.aviso-idioma a{text-decoration:underline; text-underline-offset:2px; font-weight:600}

/* ---------- Logo real de Levo ----------
   Sobre la foto va en blanco sólido; sobre papel, a su color. */
.marca img{height:34px; width:auto; transition:filter var(--t) var(--curva)}
.cabecera.sobre-foto .marca img{filter:brightness(0) invert(1)
  drop-shadow(0 1px 10px rgba(20,24,28,.45))}
.logo-pie{height:40px; width:auto; filter:brightness(0) invert(1); margin-bottom:18px}
@media(max-width:600px){.marca img{height:27px}}
/* --- El menú en el teléfono ------------------------------------------------
   Cuatro enlaces + la marca + EN/ES suman más de 600px de contenido: en un
   teléfono de 360 se salían de la píldora. Por debajo de 760 el menú se
   pliega detrás de un botón y se despliega bajo la cabecera.
   Sin JavaScript (`html` sin `.js`) el botón se esconde y el menú se queda a
   la vista, envuelto en varias líneas: se ve más basto, pero se navega. */
.menu-boton{display:none; width:38px; height:38px; padding:0; border:0;
  background:transparent; color:inherit; cursor:pointer;
  flex-direction:column; justify-content:center; align-items:center; gap:5px}
.menu-boton span{display:block; width:19px; height:1.5px; background:currentColor;
  border-radius:2px; transition:transform var(--t) var(--curva), opacity var(--t) var(--curva)}
.menu-boton:focus-visible{outline:2px solid var(--foco); outline-offset:3px; border-radius:6px}
.menu-boton[aria-expanded="true"] span:first-child{transform:translateY(3.25px) rotate(45deg)}
.menu-boton[aria-expanded="true"] span:last-child{transform:translateY(-3.25px) rotate(-45deg)}

@media(max-width:760px){
  .js .menu-boton{display:flex}
  .cabecera{gap:12px}
  .cabecera-derecha{gap:10px}
  .selector-idioma{font-size:11px; gap:4px}

  /* El menú cuelga de la cabecera, que es fija: por eso se posiciona sobre
     ella y no en el flujo. */
  .js .cabecera .nav{
    position:absolute; top:calc(100% + 8px); left:0; right:0;
    /* `stretch` y no el `center` que hereda: si no, cada enlace se encoge al
       ancho de su texto y el dedo tiene que acertarle a 106px en vez de a la
       fila entera. */
    display:none; flex-direction:column; align-items:stretch; gap:0;
    background:var(--papel); color:var(--tinta);
    border-radius:18px; padding:8px; overflow:hidden;
    box-shadow:0 22px 60px rgba(20,24,28,.22)}
  .js .cabecera .nav.abierto{display:flex}
  .js .cabecera .nav a{padding:13px 16px; opacity:1; border-radius:12px;
    font-size:15px; text-align:left}
  .js .cabecera .nav a:hover{background:var(--banda)}
  /* Dentro del panel blanco los enlaces son tinta, aunque la cabecera esté
     sobre una foto y los pinte de blanco. */
  .js .cabecera.sobre-foto .nav a{color:var(--tinta)}
}

@media(max-width:600px){.marca img{height:26px}}

/* ---------- Hero ---------- */
/* El hero NO ocupa la pantalla entera a propósito: dejar asomar la primera
   rejilla de casas es lo que invita a bajar. Un hero de 100vh se ve
   impresionante en una captura y hace que la mitad de la gente se vaya sin
   descubrir que hay catálogo. */
.hero{position:relative; min-height:540px; height:min(82svh,700px); overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  color:#fff; background:#0d1116; text-align:center;
  /* Hueco reservado para el pie, que va absoluto abajo: sin él, el titular y
     el buscador se centran contando ese espacio y quedan pegados al pie. */
  padding-bottom:clamp(96px,13vh,136px)}
@media(max-width:600px){.hero{padding-bottom:0}}

/* --- Los fotogramas del hero ---------------------------------------------
   Levo no tiene ni un video: cero metraje, cero tours virtuales. Lo que sí
   tiene son seis fotos de 6.000 px que aguantan pantalla completa. Seis
   planos encadenados con acercamiento lento es la misma técnica que usan
   Compass y The Agency cuando no hay metraje — y a esa resolución hay margen
   de sobra para moverse sin que se ablande.

   Todo en CSS, sin una línea de JavaScript: seis capas superpuestas, cada una
   con la MISMA animación desfasada un sexto del ciclo. `--n` es el número de
   fotograma, y de ahí sale su retardo.

   ⚠️ Ese seis está ATADO a `Hero::CUADROS`. Los fotogramas ya no son una lista
   fija: salen de las portadas del catálogo que aguantan pantalla completa, y
   las escritas a mano rellenan lo que falte. Cambiar uno sin el otro hace que
   dos planos se pisen y que el último no se vea nunca.
   El día que haya video de dron entra en esta misma ranura. */
.hero-cine{position:absolute; inset:0}
.hero-cuadro{position:absolute; inset:0; opacity:0;
  animation:hero-pase var(--hero-ciclo) linear infinite;
  animation-delay:calc(var(--n) * var(--hero-ciclo) / 6)}
.hero-cuadro img{width:100%; height:100%; object-fit:cover; display:block;
  transform-origin:center;
  animation:hero-acercar var(--hero-ciclo) linear infinite;
  animation-delay:inherit}

/* Cada plano ocupa un sexto del ciclo (16,6%) y funde en los bordes. El primer
   fotograma arranca visible para que no haya un parpadeo negro al cargar. */
@keyframes hero-pase{
   0%{opacity:1}  14%{opacity:1}  19%{opacity:0}
  95%{opacity:0} 100%{opacity:1}}

/* El acercamiento no vuelve a cero de golpe: crece durante el sexto en que se
   ve y se queda quieto el resto, ya invisible. */
@keyframes hero-acercar{
   0%{transform:scale(1.02)}
  20%{transform:scale(1.11)}
 100%{transform:scale(1.11)}}

/* Con el titular y el buscador centrados el velo tiene que ser parejo: uno
   lateral dejaría el borde derecho del cuadro de búsqueda sobre foto cruda.
   Con seis fotos rotando el fondo puede ser una pared blanca o una piscina al
   sol, así que el centro también se oscurece. */
.hero::after{content:''; position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(120% 90% at 50% 45%, rgba(20,24,28,.62) 0%,
                    rgba(20,24,28,.42) 55%, rgba(20,24,28,.3) 100%),
    linear-gradient(180deg, rgba(20,24,28,.5) 0%, rgba(20,24,28,.12) 26%,
                    rgba(20,24,28,.42) 70%, rgba(20,24,28,.88) 100%)}
/* Sin foto destacada (hoy: nada publicado todavía) el hero cae al navy de la
   marca — nunca a un <img> roto. */
.hero.sin-foto{background:linear-gradient(160deg, var(--acento), #1a2740)}
.hero.sin-foto::after{display:none}
.hero-texto{position:relative; z-index:2; width:100%}
.hero h1{font-size:clamp(36px,5.4vw,70px); max-width:18ch; margin-inline:auto; color:#fff;
  font-variation-settings:'opsz' 144,'SOFT' 0,'WONK' 1}
.hero .eyebrow{color:rgba(255,255,255,.82)}
.hero-pie{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:28px; margin-top:26px}
.hero-specs{display:flex; gap:26px; font-size:13px; letter-spacing:.04em;
  color:rgba(255,255,255,.88)}

/* Precio a 2× la dirección. Los 9 sitios auditados lo hacen al revés. */
.precio{font-size:clamp(30px,3.4vw,44px); font-weight:600; letter-spacing:-.02em;
  line-height:1; font-feature-settings:'tnum' 1}
.precio small{font-size:.42em; font-weight:400; letter-spacing:.02em; opacity:.7}

/* Propiedad destacada dentro del hero. Hay una por fotograma, apiladas: cada
   una aparece y desaparece con su foto, con la misma animación desfasada. Así
   el pie siempre nombra la casa que se está viendo, sin sincronizar nada. */
/* El pie va pegado abajo, alineado a la izquierda y fuera del bloque
   centrado: dice qué casa se está viendo sin competir con el buscador.
   La rejilla de una sola celda apila los seis en el mismo sitio y la caja
   crece hasta el más alto. */
.hero-pies{position:absolute; inset:auto 0 0 0; z-index:2;
  padding-bottom:clamp(20px,3.4vh,34px); text-align:left}
.hero-pies .contenedor{display:grid; align-items:end}
.hero-pies .hero-destacada{grid-area:1 / 1; opacity:0;
  animation:hero-pie-pase var(--hero-ciclo) var(--curva) infinite;
  animation-delay:calc(var(--n) * var(--hero-ciclo) / 6)}

/* El pie NO usa el mismo pase que la foto. Dos fotos fundiéndose se mezclan
   bien; dos textos encima del otro son un borrón ilegible. Así que el pie sale
   antes de que entre el siguiente, con un respiro en medio: se va en el 13% y
   el que sigue no aparece hasta el 14,7%. */
@keyframes hero-pie-pase{
   0%{opacity:1; transform:none}
  10%{opacity:1; transform:none}
  13%{opacity:0; transform:translateY(8px)}
  97%{opacity:0; transform:translateY(8px)}
 100%{opacity:1; transform:none}}
.hero-destacada{display:block; transition:opacity var(--t) var(--curva)}
.hero-destacada:hover{opacity:.85}
.hero-destacada .eyebrow{color:rgba(255,255,255,.75); margin-bottom:4px}
.hero-dir{margin:4px 0 0; font-size:13px; opacity:.85}
/* Más chico que antes: aquí acompaña, no es el protagonista. */
.hero-pies .precio{font-size:clamp(22px,2.1vw,28px)}
@media(max-width:600px){.hero-pies{display:none}}

/* --- El buscador del hero --------------------------------------------------
   Un solo campo y pestañas de intención: es el patrón que usan las nueve
   inmobiliarias auditadas, y funciona sin JavaScript — las pestañas son
   radios de verdad que viajan en el propio formulario. */
.hero-buscar{margin:clamp(22px,3.4vh,34px) auto 0; max-width:640px; width:100%}
.intencion{display:flex; justify-content:center; gap:2px; margin-bottom:0}
.intencion input{position:absolute; opacity:0; pointer-events:none}
.intencion label,.intencion-enlace{
  padding:11px 22px; font-size:13px; font-weight:500; letter-spacing:.02em;
  color:rgba(255,255,255,.9); cursor:pointer; border-radius:6px 6px 0 0;
  background:rgba(20,24,28,.42); backdrop-filter:blur(8px);
  transition:background var(--t) var(--curva), color var(--t) var(--curva)}
.intencion label:hover,.intencion-enlace:hover{background:rgba(20,24,28,.62)}
/* La pestaña activa se funde con el campo de abajo: son una sola pieza. */
.intencion input:checked + label{background:var(--papel); color:var(--tinta)}
.intencion input:focus-visible + label{outline:2px solid var(--foco); outline-offset:2px}

.hero-campo{display:flex; background:var(--papel); border-radius:0 6px 6px 6px;
  overflow:hidden; box-shadow:0 18px 50px rgba(20,24,28,.28)}
.hero-campo input{flex:1; min-width:0; border:0; padding:17px 20px; font:inherit;
  font-size:15px; color:var(--tinta); background:transparent}
.hero-campo input::placeholder{color:var(--metadato)}
.hero-campo input:focus{outline:none}
.hero-campo:focus-within{box-shadow:0 0 0 2px var(--foco), 0 18px 50px rgba(20,24,28,.28)}
.hero-campo button{border:0; background:var(--acento); color:#fff; padding:0 22px;
  cursor:pointer; display:grid; place-items:center;
  transition:background var(--t) var(--curva)}
.hero-campo button:hover{background:#1f2f47}

/* Solo para lectores de pantalla: la etiqueta del campo. El `placeholder` no
   es una etiqueta — desaparece en cuanto se escribe. */
.visualmente-oculto{position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0}

@media(max-width:600px){
  .intencion label,.intencion-enlace{padding:10px 15px; font-size:12.5px}
  .hero-campo input{padding:15px 16px; font-size:14px}
}

/* ---------- Secciones ----------
   Antes: hasta 128px de aire arriba y abajo. Con 19 propiedades eso estiraba
   la portada a seis pantallas de las que media era blanco, y una página vacía
   no se lee como minimalismo sino como página vacía. Compass respira mucho
   menos y por eso se ve llena. */
.seccion{padding:clamp(52px,6.5vw,88px) 0}
.seccion.banda{background:var(--banda)}
.seccion-cab{display:flex; align-items:flex-end; justify-content:space-between;
  gap:30px; margin-bottom:clamp(28px,4vw,52px); flex-wrap:wrap}
.seccion-cab h2{font-size:clamp(27px,3.4vw,46px); max-width:18ch}
.enlace-fino{font-size:12.5px; letter-spacing:.1em; text-transform:uppercase;
  border-bottom:1px solid var(--filete); padding-bottom:5px; color:var(--acento);
  transition:border-color var(--t) var(--curva)}
.enlace-fino:hover{border-color:var(--acento)}

/* Cuando todavía no hay nada publicado en una sección */
.vacio-catalogo{color:var(--metadato); font-size:14.5px; max-width:56ch}

/* ---------- Tarjeta de propiedad ----------
   Anatomía de Compass, tipografía de Levo. Cuatro columnas en pantalla
   grande en vez de tres: con tarjetas de 310px y 44px de hueco cabían tres y
   la rejilla se veía desierta. La tarjeta es ahora una caja de verdad
   —borde, radio, fondo— y no cuatro párrafos sueltos flotando. */
.rejilla{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(272px,100%),1fr));
  gap:clamp(18px,2vw,26px)}
.tarjeta{display:block; position:relative; background:var(--papel);
  border:1px solid var(--filete); border-radius:10px; overflow:hidden;
  transition:box-shadow var(--t) var(--curva), transform var(--t) var(--curva),
             border-color var(--t) var(--curva)}
.tarjeta:hover{transform:translateY(-3px); border-color:#D8DCE2;
  box-shadow:0 18px 44px -28px rgba(20,24,28,.55)}
.tarjeta-foto{position:relative; overflow:hidden; background:var(--banda);
  aspect-ratio:4/3}          /* el de Compass; el 3/2 recortaba más de la cuenta */
.tarjeta-foto img{width:100%; height:100%; object-fit:cover;
  transition:transform 1.2s var(--curva)}
.tarjeta:hover .tarjeta-foto img{transform:scale(1.05)}
.tarjeta-foto.sin-foto{display:flex; align-items:center; justify-content:center;
  color:var(--metadato); font-family:var(--serif); font-size:14px}
.etiqueta{position:absolute; top:12px; left:12px; z-index:2;
  background:rgba(255,255,255,.94); color:var(--tinta);
  font-size:10px; letter-spacing:.13em; text-transform:uppercase; font-weight:600;
  padding:6px 10px; border-radius:4px}
.etiqueta.renta{background:var(--acento); color:#fff}

/* Contador de fotos, abajo a la derecha de la imagen. Sobre una foto clara
   un gris no se ve: va en negro translúcido, que funciona sobre cualquiera. */
.tarjeta-fotos{position:absolute; right:12px; bottom:12px; z-index:2;
  display:inline-flex; align-items:center; gap:5px;
  background:rgba(20,24,28,.62); color:#fff; font-size:11px; font-weight:500;
  letter-spacing:.02em; padding:5px 9px; border-radius:4px;
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px)}

/* ---------- El corazón de guardar ----------
   Nace escondido (`[hidden]` en el HTML) y lo enciende `publico.js`: sin
   JavaScript no hay `localStorage`, y un botón que no hace nada es peor que
   no tener botón. */
.guardar{position:absolute; top:10px; right:10px; z-index:3;
  width:34px; height:34px; padding:0; border:0; border-radius:50%;
  display:none; align-items:center; justify-content:center;
  background:rgba(255,255,255,.92); color:var(--tinta); cursor:pointer;
  box-shadow:0 2px 10px -4px rgba(20,24,28,.5);
  transition:background var(--t) var(--curva), transform var(--t) var(--curva),
             color var(--t) var(--curva)}
.guardar svg{fill:none; stroke:currentColor; stroke-width:1.8;
  transition:fill var(--t) var(--curva)}
.guardar:hover{transform:scale(1.09)}
.guardar.activo{background:#fff; color:#C2384A}
.guardar.activo svg{fill:#C2384A; stroke:#C2384A}
.guardar:focus-visible{outline:2px solid var(--foco); outline-offset:2px}
/* Lo enciende `publico.js`, y SOLO si el navegador de verdad deja guardar
   (en navegación privada de Safari escribir en `localStorage` revienta). El
   `[hidden]` del HTML no basta por sí solo: cualquier regla de clase con
   `display` le gana, así que la visibilidad la manda esta pareja. */
html.guardados-activos .guardar{display:flex}
html.guardados-activos .guardar[hidden]{display:flex}
/* En un teléfono el objetivo son 44px: con 34 el dedo falla y abre la ficha,
   que es justo lo contrario de lo que se quería hacer. En escritorio se deja
   pequeño porque el ratón acierta y ocupa menos foto. */
@media(hover:none){
  .guardar{width:42px; height:42px; top:8px; right:8px}
  .guardar-ficha{width:auto; height:auto}
}

/* La tarjeta es un <article>, no un <a>: un botón no puede vivir dentro de un
   enlace. El enlace de la dirección se estira por encima de toda la tarjeta
   —menos del corazón, que va con z-index por delante—, así que sigue siendo
   clicable entera y hay UN solo enlace que anunciar. */
.tarjeta-enlace{position:static}
.tarjeta-enlace::after{content:''; position:absolute; inset:0; z-index:1}
.tarjeta-enlace:focus-visible{outline:2px solid var(--foco); outline-offset:3px}

.tarjeta-cuerpo{padding:14px 16px 18px}

/* El precio baja de 44px a 21px. A 44px no comunicaba lujo: gritaba, y el
   resto de la tarjeta desaparecía debajo. El hero sigue con el grande. */
.tarjeta .precio{font-size:21px; margin-bottom:7px}
.tarjeta .precio small{font-size:.62em; opacity:.6}

/* Las specs suben por encima de la dirección y dejan de ser gris ratón: es lo
   primero que mira quien decide si abre la ficha. Separador de CSS para poder
   escapar el texto sin que el `|` se cuele en la traducción. */
.tarjeta .specs{margin:0 0 8px; font-size:13px; color:var(--tinta); opacity:.85;
  letter-spacing:0; display:flex; flex-wrap:wrap; align-items:center; gap:0}
.tarjeta .specs span:not(:last-child)::after{content:''; display:inline-block;
  width:1px; height:11px; margin:0 9px -1px; background:var(--filete)}

/* La dirección pasa a sans: en la tarjeta es un dato, no un titular. La
   Fraunces sigue mandando en h1/h2/h3, que es donde vive la marca. */
.direccion{font-family:var(--sans); font-size:14.5px; line-height:1.35;
  font-weight:500; margin:0}
.direccion-ciudad{font-family:var(--sans); font-size:13px; line-height:1.35;
  color:var(--metadato); margin:2px 0 0}

/* Fuera de la tarjeta (ficha, hero) las specs siguen como estaban. */
.specs{margin-top:10px; font-size:12.5px; color:var(--metadato); letter-spacing:.03em;
  display:flex; gap:8px; flex-wrap:wrap}
.specs span:not(:last-child)::after{content:'·'; margin-left:8px; opacity:.5}

/* ---------- Franja de confianza ---------- */
.confianza{background:var(--acento); color:#fff; padding:clamp(40px,5vw,64px) 0}
.confianza .rejilla-4{display:grid; gap:clamp(24px,4vw,60px);
  grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr))}
.confianza h3{font-size:clamp(24px,2.6vw,34px); color:#fff; margin-bottom:8px}
.confianza p{margin:0; font-size:13.5px; line-height:1.6; color:rgba(255,255,255,.78)}
.confianza .eyebrow{color:rgba(255,255,255,.62)}

/* ---------- Equipo ---------- */
.rejilla-equipo{display:grid; gap:clamp(28px,3vw,44px) clamp(20px,2.2vw,32px);
  grid-template-columns:repeat(auto-fill,minmax(min(215px,100%),1fr))}
.agente-foto{aspect-ratio:1/1; overflow:hidden; background:var(--banda);
  border-radius:2px}
.agente-foto img{width:100%; height:100%; object-fit:cover; object-position:center 22%;
  transition:transform 1.2s var(--curva), filter var(--t) var(--curva);
  filter:grayscale(.15)}
.agente:hover .agente-foto img{transform:scale(1.05); filter:grayscale(0)}
.agente-inicial{width:100%; height:100%; display:grid; place-items:center;
  font-family:var(--serif); font-size:52px; color:var(--metadato); background:var(--banda)}
.agente h3{font-size:19px; margin:16px 0 4px; font-variation-settings:'opsz' 24}
.agente .licencia{font-size:11.5px; letter-spacing:.1em; color:var(--metadato);
  text-transform:uppercase}
/* Ninguna de las 9 inmobiliarias de lujo auditadas muestra idiomas. En
   Florida hispana vale dinero. */
.idiomas{display:inline-flex; align-items:center; gap:6px; margin-top:10px;
  font-size:11.5px; letter-spacing:.05em; color:var(--acento);
  border:1px solid var(--filete); border-radius:100px; padding:4px 11px}
.idiomas::before{content:''; width:5px; height:5px; border-radius:50%; background:var(--foco)}

/* ---------- Pie ---------- */
.pie{background:var(--tinta); color:rgba(255,255,255,.72); padding:clamp(56px,7vw,88px) 0 34px;
  font-size:13.5px}
.pie h3{color:#fff; font-size:22px; margin-bottom:16px}
.pie-rejilla{display:grid; gap:40px; grid-template-columns:1.4fr 1fr 1fr}
@media(max-width:820px){.pie-rejilla{grid-template-columns:1fr 1fr}}
.pie ul{list-style:none; margin:0; padding:0; display:grid; gap:9px}
.pie a:hover{color:#fff}
.pie .titulo-col{font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.42); margin-bottom:16px}
.legal{margin-top:48px; padding-top:26px; border-top:1px solid rgba(255,255,255,.12);
  display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap;
  font-size:11.5px; color:rgba(255,255,255,.45); line-height:1.7}
.legal .eho{display:inline-flex; align-items:center; gap:9px}
.legal .eho svg{flex:none}

/* ---------- Reveal escalonado, 80ms ---------- */
.js .revela{opacity:0; transform:translateY(22px)}
.js .revela.visible{opacity:1; transform:none;
  transition:opacity .7s var(--curva), transform .7s var(--curva)}

/* Quien pide menos movimiento ve el primer plano fijo, no un pase acelerado a
   0,01ms que sería un parpadeo epiléptico. */
@media (prefers-reduced-motion:reduce){
  .hero-cuadro,.hero-pies .hero-destacada{animation:none; transform:none}
  .hero-cuadro{opacity:0}
  .hero-cuadro:first-child,.hero-pies .hero-destacada:first-child{opacity:1}
  .hero-cuadro img{animation:none; transform:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important}
  .revela{opacity:1; transform:none}
}

/* ============================================================
   Buscador (/propiedades) — S2b.
   ============================================================ */
.buscador-cab{padding-top:calc(clamp(80px,11vh,120px) + 30px)}
.filtros{display:flex; flex-wrap:wrap; align-items:end; gap:16px 20px;
  margin-top:28px; padding:22px; background:var(--banda); border-radius:3px}

/* ============================================================
   Buscador a dos paneles: mapa fijo + resultados que corren.
   Levo tiene una casa por ciudad entre Flagler Beach y Port Charlotte
   —200 km—, así que la lista sola no dice dónde está nada.
   ============================================================ */
:root{--alto-cabecera:78px}

.buscador{padding-top:var(--alto-cabecera)}

/* La barra de filtros, pegada bajo la cabecera y en una línea. */
.filtros-barra{position:sticky; top:var(--alto-cabecera); z-index:20;
  display:flex; flex-wrap:wrap; align-items:end; gap:12px 16px;
  padding:14px clamp(14px,2vw,22px);
  background:var(--papel); border-bottom:1px solid var(--filete)}
.filtros-barra .boton{margin-right:0; padding:11px 22px}
.filtros-barra .campo-filtro{min-width:120px}
.filtros-barra .campo-filtro input{width:120px}

.buscador-paneles{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  align-items:start}

/* El mapa se queda quieto mientras la lista corre: eso es lo que hace que se
   sienta una sola pantalla. `100dvh` y no `100vh` porque en el móvil la barra
   del navegador se come 60px de `vh` y el mapa quedaba cortado. */
.panel-mapa{position:sticky; top:calc(var(--alto-cabecera) + 61px);
  height:calc(100dvh - var(--alto-cabecera) - 61px); background:var(--banda)}
#mapa-propiedades{width:100%; height:100%}
.mapa-sin-js{padding:26px; color:var(--metadato); font-size:14px; max-width:34ch}

.panel-lista{padding:clamp(20px,2.4vw,32px) clamp(16px,2vw,28px) 64px; min-width:0}
.lista-cab{display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 18px;
  margin-bottom:22px}
.lista-cab h1{font-size:clamp(24px,2.4vw,32px); flex:none}
.lista-cuenta{margin:0; font-size:13px; color:var(--metadato); flex:1}
.orden select{border:1px solid var(--filete); border-radius:4px; padding:8px 10px;
  font:inherit; font-size:13px; background:var(--papel); color:var(--tinta)}

/* Dentro del panel las tarjetas van a dos columnas: el panel mide la mitad
   de la pantalla, así que las de 272px de la portada dejarían una sola. */
.panel-lista .rejilla{grid-template-columns:repeat(auto-fill,minmax(min(230px,100%),1fr));
  gap:16px}
.tarjeta.resaltada{border-color:var(--acento);
  box-shadow:0 18px 44px -26px rgba(43,64,95,.75)}

/* Pines con el precio escrito, como los de Compass: un alfiler genérico
   obliga a hacer clic para saber si te interesa. */
.pin-precio{display:inline-block; transform:translate(-50%,-50%);
  background:var(--papel); color:var(--tinta); border:1px solid rgba(20,24,28,.12);
  border-radius:100px; padding:5px 10px; font-size:12px; font-weight:600;
  font-family:var(--sans); white-space:nowrap;
  box-shadow:0 4px 14px -6px rgba(20,24,28,.5);
  transition:background var(--t) var(--curva), color var(--t) var(--curva),
             transform var(--t) var(--curva)}
.pin-precio.renta{background:var(--acento); color:#fff; border-color:transparent}
.leaflet-marker-icon.activo .pin-precio,
.pin-precio:hover{background:var(--tinta); color:#fff; border-color:transparent;
  transform:translate(-50%,-50%) scale(1.08)}
.leaflet-container{font-family:var(--sans)}

.ver-mapa{display:none; margin-left:auto; background:var(--tinta); color:#fff;
  border:0; border-radius:100px; padding:11px 22px; font-size:13px; font-weight:500}

@media(max-width:980px){
  /* Un solo panel a la vez: el botón alterna cuál. */
  .ver-mapa{display:block}
  .buscador-paneles{grid-template-columns:1fr}
  .panel-mapa{display:none; position:static; height:70dvh}
  body.viendo-mapa .panel-mapa{display:block}
  body.viendo-mapa .panel-lista{display:none}
}
.campo-filtro{display:flex; flex-direction:column; gap:6px; min-width:130px}
.campo-filtro label{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--metadato)}
.campo-filtro select, .campo-filtro input{
  border:1px solid var(--filete); border-radius:2px; padding:10px 12px;
  font:inherit; font-size:14px; background:var(--papel); color:var(--tinta)}
.filtros .boton{align-self:end}

.paginacion{display:flex; align-items:center; justify-content:center; gap:24px;
  margin-top:clamp(36px,5vw,56px); font-size:13.5px}
.paginacion a{color:var(--acento); border-bottom:1px solid var(--filete)}
.paginacion a:hover{border-color:var(--acento)}
.pagina-actual{color:var(--metadato)}

/* ============================================================
   Ficha de propiedad (/propiedades/{id}) — S2b.
   ============================================================ */
.ficha-cab{padding:calc(clamp(80px,11vh,120px) + 30px) 0 clamp(22px,3vw,34px)}
.ficha-cab-fila{display:flex; align-items:flex-end; justify-content:space-between;
  gap:30px; flex-wrap:wrap}
.ficha-cab h1{font-size:clamp(24px,2.8vw,38px); max-width:20ch;
  font-variation-settings:'opsz' 48}

/* Galería 1+4 con AR 1.71 CONSTANTE en las cinco celdas — patrón Serhant.
   Compass mezcla 2.07 y 1.38 y se ve descuadrada: es una de las cuatro
   decisiones donde 7 de 9 sitios auditados fallan. */
.galeria{display:grid; gap:6px; grid-template-columns:2fr 1fr 1fr;
  grid-auto-rows:1fr; aspect-ratio:2.9; margin-top:20px}
.galeria a{position:relative; overflow:hidden; background:var(--banda)}
.galeria a:first-child{grid-row:span 2}
.galeria img{width:100%; height:100%; object-fit:cover;
  transition:transform 1.2s var(--curva)}
.galeria a:hover img{transform:scale(1.04)}
.galeria .mas{position:absolute; right:14px; bottom:14px; background:rgba(255,255,255,.94);
  font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; padding:8px 13px;
  border-radius:2px}
@media(max-width:860px){
  .galeria{grid-template-columns:1fr 1fr; aspect-ratio:1.5}
  .galeria a:first-child{grid-column:span 2; grid-row:span 1}
  .galeria a:nth-child(n+4){display:none}
}

.ficha-cuerpo{display:grid; grid-template-columns:minmax(0,1fr) 356px;
  gap:clamp(36px,5vw,88px); padding:clamp(44px,6vw,80px) 0 clamp(64px,9vw,120px)}
@media(max-width:1000px){.ficha-cuerpo{grid-template-columns:1fr}}
.datos{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(120px,45%),1fr));
  gap:26px; padding:26px 0; border-top:1px solid var(--filete);
  border-bottom:1px solid var(--filete); margin-bottom:34px}
.datos dt{font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--metadato); margin-bottom:7px}
.datos dd{margin:0; font-family:var(--serif); font-size:23px;
  font-variation-settings:'opsz' 24}
.prosa{max-width:64ch; color:#2A3138; line-height:1.75}
.prosa p{margin:0 0 18px}

/* Rail sticky en escritorio: 7 de las 9 fichas auditadas NO tienen ni un
   `position:sticky`. La barra fija abajo (`.barra-movil`) es el mismo gesto
   en móvil, donde no hay espacio para un rail al lado. */
.rail{position:sticky; top:104px; align-self:start}
.rail-caja{border:1px solid var(--filete); border-radius:3px; padding:26px}
.rail-agente{display:flex; gap:14px; align-items:center; margin-bottom:14px}
.rail-agente img{width:62px; height:62px; border-radius:50%; object-fit:cover;
  object-position:center 20%}
.rail-agente h4{margin:0 0 3px; font-family:var(--serif); font-size:18px; font-weight:400}
.rail-agente p{margin:0; font-size:11.5px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--metadato)}
.rail .boton{width:100%; display:block; text-align:center; margin-bottom:9px}
.rail .boton.fantasma{background:transparent; color:var(--acento); border:1px solid var(--filete)}

.form-contacto{display:grid; gap:4px; margin-top:16px}
.form-contacto label{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--metadato); margin-top:8px}
.form-contacto input, .form-contacto textarea, .form-contacto select{
  border:1px solid var(--filete); border-radius:2px; padding:10px 12px;
  font:inherit; font-size:14px; resize:vertical}
.error-form{color:#B3261E; font-size:13px; margin:0 0 10px}
.aviso-enviado{color:var(--acento); font-size:14.5px; font-family:var(--serif)}

/* Barra fija inferior en móvil — el otro lado de la decisión del sticky. */
.barra-movil{position:fixed; inset:auto 0 0; z-index:40; display:none;
  gap:10px; padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.94); backdrop-filter:blur(12px);
  border-top:1px solid var(--filete)}
.barra-movil .precio{font-size:22px; align-self:center; margin-right:auto}
@media(max-width:1000px){.barra-movil{display:flex}}

/* ---------- Pantallas muy estrechas (320-380px) ----------
   Medido en la maqueta: a 320px la portada desbordaba 49px. */
@media(max-width:380px){
  .pie-rejilla{grid-template-columns:1fr}
  .hero h1{font-size:clamp(30px,8.5vw,38px)}
  .eyebrow{font-size:10px; letter-spacing:.12em}
}

/* ---------- S3: Equipo, ficha de agente y comunidades ---------- */

/* `.agente` es la tarjeta del equipo: comunidad y la portada la usan como
   `<a>`, la rejilla de /team la usa como `<article>` (solo la foto y el
   nombre son enlace, para dejar sitio a un botón propio "Ver mi página").
   Fijar el display evita que un enlace en línea rompa la rejilla. */
.agente{display:block}
.agente-zonas{font-size:12.5px; color:var(--metadato); margin-top:8px}
.agente-conteo{font-size:11.5px; color:var(--metadato); margin-top:6px}

/* ---------- Ficha de agente ---------- */
.ficha-agente{display:flex; gap:clamp(24px,4vw,48px); align-items:flex-start; flex-wrap:wrap}
.ficha-agente-foto{width:min(220px,40vw); flex:none}
.ficha-agente h1{font-size:clamp(28px,3.2vw,42px); margin:6px 0 8px}

/* ---------- Landing personal del agente (levorealestategroup.com/{slug}) ----------
   Foto más grande y redondeada que en `.ficha-agente-foto`: aquí es la
   protagonista de la página, no una tarjeta entre nueve del equipo. */
.landing-hero{display:flex; gap:clamp(28px,4vw,56px); align-items:center; flex-wrap:wrap}
.landing-hero-foto{width:min(300px,46vw); flex:none; border-radius:50%;
  box-shadow:0 30px 60px -24px rgba(20,24,28,.35)}
.landing-hero-foto img{filter:none}
.landing-hero h1{font-size:clamp(30px,3.6vw,46px); margin:6px 0 10px}
.landing-eslogan{font-family:var(--serif); font-size:clamp(17px,1.6vw,21px);
  color:var(--metadato); max-width:38ch; margin:0 0 14px}

/* ---------- Comunidades: índice ---------- */
.rejilla-comunidades{display:grid; gap:clamp(16px,2vw,24px);
  grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr)); margin-top:clamp(32px,4vw,52px)}
.comunidad-tarjeta{display:block; padding:22px 24px; border:1px solid var(--filete); border-radius:4px;
  transition:border-color var(--t) var(--curva), transform var(--t) var(--curva)}
.comunidad-tarjeta:hover{border-color:var(--acento); transform:translateY(-2px)}
.comunidad-tarjeta h3{font-size:21px; margin-bottom:8px}
.comunidad-tarjeta .eyebrow{margin:0}

/* La cabecera de comunidad no tiene el mismo peso que la portada: hero más
   bajo, sin Ken Burns, para no prometer una foto que puede ser la del logo. */
.comunidad-hero .hero-texto{padding-bottom:clamp(28px,5vh,48px)}
.comunidad-hero h1{font-size:clamp(32px,4.6vw,58px); color:#fff}
.comunidad-hero.sin-foto{background:linear-gradient(160deg, var(--acento), #1a2740)}

/* ---------- "¿Se puede rentar por noche?" ---------- */
.renta-corta{display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr))}
.renta-corta-item{padding:18px 20px; border-radius:4px; border:1px solid var(--filete); background:var(--papel)}
.renta-corta-item .veredicto{font-size:15px; margin:0 0 8px; font-feature-settings:'tnum' 1}
.renta-corta-item .detalle{font-size:13px; color:var(--metadato); margin:0 0 6px; line-height:1.55}
.renta-corta-item .fuente{font-size:11px; color:var(--metadato); margin:0; opacity:.75}
/* Un color de borde distinto por veredicto: nunca reemplaza el texto, solo lo apoya. */
.veredicto-permitida{border-left:3px solid #2f7a4f}
.veredicto-no-permitida{border-left:3px solid #b3402c}
.veredicto-parcial{border-left:3px solid #b3862c}
.veredicto-sin-dato{border-left:3px solid var(--metadato)}
.advertencia-hoa{margin-top:18px; font-size:12.5px; color:var(--metadato); max-width:64ch; line-height:1.6}

/* ---------- S4: los ganchos de Atiende ---------- */

/* Gancho 1: WhatsApp con la casa ya cargada. Verde de marca de WhatsApp — el
   único botón del sitio que se sale de la paleta navy/celeste a propósito,
   porque el icono ya trae ese color y hay que reconocerlo de un vistazo. */
.boton-whatsapp{background:#25D366}
.boton-whatsapp:hover{background:#1EBE5A}

/* Flotante en móvil, solo en la ficha: el pulgar no sube hasta el formulario
   del rail. Se apoya arriba de la barra fija (`.barra-movil`) para no
   taparla ni que lo tape. */
.whatsapp-flotante{display:none; position:fixed; z-index:41;
  right:16px; bottom:calc(78px + env(safe-area-inset-bottom));
  width:52px; height:52px; border-radius:50%; background:#25D366; color:#fff;
  align-items:center; justify-content:center; box-shadow:0 4px 14px rgba(0,0,0,.22)}
@media(max-width:1000px){.whatsapp-flotante{display:flex}}

/* Gancho 2: "Que me llamen", debajo del formulario de contacto en el mismo rail. */
.caja-llamada{margin-top:20px; padding-top:18px; border-top:1px solid var(--filete)}
.caja-llamada .eyebrow{margin:0 0 4px}

/* Gancho 3: "Avísame si entra algo así", al pie de los resultados del buscador. */
.caja-alerta{margin-top:clamp(32px,5vw,52px); padding:26px clamp(20px,4vw,34px);
  border:1px solid var(--filete); border-radius:4px; background:var(--banda); max-width:520px}
.caja-alerta h3{margin:2px 0 14px; font-size:22px}
.caja-alerta .form-contacto{max-width:360px}
.consentimiento{display:flex; gap:9px; align-items:flex-start; margin-top:14px;
  text-transform:none; letter-spacing:normal; font-size:12.5px; color:var(--metadato); line-height:1.5}
.consentimiento input{margin-top:3px; flex:none}

/* ---------- Visor de fotos de la ficha ----------
   Una casa puede tener 19 fotos y la rejilla enseña 5. El visor da acceso a
   todas sin sacar al visitante del sitio. Lo monta `publico.js`; sin
   JavaScript no existe y los enlaces de la rejilla siguen abriendo el archivo,
   que es el comportamiento de siempre. */
.visor{position:fixed; inset:0; z-index:100; display:grid;
  grid-template-columns:auto 1fr auto; align-items:center; gap:clamp(8px,2vw,24px);
  padding:clamp(12px,3vw,40px); background:rgba(13,17,22,.94);
  backdrop-filter:blur(6px)}
.visor[hidden]{display:none}

.visor-marco{margin:0; display:grid; place-items:center; min-width:0; height:100%}
.visor-marco img{max-width:100%; max-height:100%; width:auto; height:auto;
  object-fit:contain; border-radius:3px}

.visor-ir,.visor-cerrar{background:rgba(255,255,255,.1); color:#fff; border:0;
  cursor:pointer; border-radius:50%; display:grid; place-items:center;
  transition:background var(--t) var(--curva)}
.visor-ir:hover,.visor-cerrar:hover{background:rgba(255,255,255,.24)}
.visor-ir:focus-visible,.visor-cerrar:focus-visible{outline:2px solid var(--foco); outline-offset:3px}
.visor-ir{width:52px; height:52px; font-size:30px; line-height:1}
.visor-ir[hidden]{display:none}

.visor-cerrar{position:absolute; top:clamp(12px,2.4vw,26px); right:clamp(12px,2.4vw,26px);
  width:44px; height:44px; font-size:26px; line-height:1}

.visor-cuenta{position:absolute; left:0; right:0; bottom:clamp(14px,2.6vw,28px);
  margin:0; text-align:center; color:rgba(255,255,255,.85);
  font-size:13px; letter-spacing:.06em; font-feature-settings:'tnum' 1}

/* Con el visor abierto la página de atrás no se mueve. */
body.sin-scroll{overflow:hidden}

/* En el teléfono las flechas estorban más de lo que ayudan: ahí se desliza. */
@media(max-width:640px){
  .visor{grid-template-columns:1fr}
  .visor-ir{display:none}
}

/* La ciudad bajo el titular de la ficha. El `title` es solo la calle desde la
   migración 024, así que "Flagler Beach, FL 32136" necesita su propia línea. */
.ficha-ciudad{margin:8px 0 0; font-size:15px; color:var(--metadato)}

/* ============================================================
   Portada: las secciones que le faltaban a la página (21-ago).
   Compass encadena hero → listados → Concierge → preaprobación →
   ciudades → mercados → pie a cuatro columnas. Levo saltaba de las
   tarjetas a cuatro frases sobre navy, y por eso se veía corta.
   ============================================================ */

/* "Ver las 18 casas en venta": la sección enseñaba ocho y se acababa ahí. */
.ver-todas{margin:clamp(26px,3vw,38px) 0 0; text-align:center}

.boton{display:inline-block; background:var(--acento); color:#fff;
  font-size:13.5px; font-weight:500; letter-spacing:.02em;
  padding:14px 26px; border-radius:4px; margin-right:14px;
  transition:background var(--t) var(--curva), transform var(--t) var(--curva)}
.boton:hover{background:#1D2E46; transform:translateY(-1px)}
.boton-linea{display:inline-block; font-size:13.5px; font-weight:500;
  padding:14px 4px; border-bottom:1px solid var(--filete); color:var(--acento);
  transition:border-color var(--t) var(--curva)}
.boton-linea:hover{border-color:var(--acento)}

/* ---------- Banda de vender: foto a un lado, argumento al otro ---------- */
.banda-vender{padding:clamp(52px,6.5vw,88px) 0; background:var(--banda)}
.banda-vender-caja{display:grid; gap:clamp(28px,4vw,60px);
  grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));
  align-items:center}
.banda-vender-foto{aspect-ratio:4/3; overflow:hidden; border-radius:10px;
  background:var(--filete)}
.banda-vender-foto img{width:100%; height:100%; object-fit:cover}
.banda-vender-texto h2{font-size:clamp(27px,3.2vw,42px); margin-bottom:14px}
.banda-vender-texto p{margin:0 0 22px; font-size:15px; line-height:1.65;
  color:var(--metadato); max-width:46ch}
.banda-vender-texto p:last-child{margin-bottom:0}

/* ---------- Enlaces por ciudad ("Real Estate in Popular Cities") ----------
   Denso a propósito: llena página, y cada enlace es una búsqueda que Google
   puede indexar. Solo salen combinaciones que DAN resultados. */
/* Columnas de CSS y no `grid`: una rejilla rellena de izquierda a derecha, así
   que la lista se leía "en venta en Clermont / en renta en Flagler Beach /
   en renta en Orlando" — saltando de ciudad en cada línea. `columns` la llena
   de arriba abajo, como la de Compass, y cada ciudad queda junta. */
.lista-ciudades{list-style:none; margin:0; padding:0;
  columns:4 250px; column-gap:clamp(20px,3vw,48px)}
.lista-ciudades li{break-inside:avoid}
.lista-ciudades a{display:flex; align-items:baseline; justify-content:space-between;
  gap:12px; padding:11px 0; font-size:14.5px;
  border-bottom:1px solid var(--filete);
  transition:color var(--t) var(--curva)}
.lista-ciudades a:hover{color:var(--acento)}
.lista-ciudades a span{font-size:12px; color:var(--metadato);
  font-feature-settings:'tnum' 1; flex:none}

/* El corazón de la ficha va junto al precio y con la palabra escrita: ahí no
   compite con nada, y una casa sola no se entiende por el icono como se
   entiende en una rejilla de ocho. */
.ficha-precio{display:flex; align-items:center; gap:18px}
.guardar-ficha{position:static; width:auto; height:auto; border-radius:100px;
  gap:8px; padding:10px 16px; font-size:13px; font-weight:500;
  border:1px solid var(--filete); background:var(--papel);
  box-shadow:none}
.guardar-ficha:hover{transform:none; border-color:var(--tinta)}
.guardar-ficha.activo{border-color:#C2384A}
@media(max-width:700px){
  .ficha-precio{flex-wrap:wrap; gap:12px}
}

/* ---------- Página de guardadas ---------- */
.nav-guardados span{font-feature-settings:'tnum' 1; opacity:.7}
.vacio-guardados{max-width:52ch}
.vacio-guardados .boton{margin-top:18px}
/* El aviso de que esto vive en ESTE navegador. Va discreto y al final: es
   importante saberlo, pero no es lo que la persona vino a leer. */
.nota-guardados{margin-top:clamp(30px,4vw,48px); padding-top:18px;
  border-top:1px solid var(--filete);
  font-size:12.5px; line-height:1.6; color:var(--metadato); max-width:64ch}

/* El correo del agente, cuando el bróker lo tildó en su ficha del CRM. */
/* La ficha del agente: botones de contacto (landing, llamar, WhatsApp) en
   fila, y sus redes como enlaces discretos debajo. */
.agente-contacto{display:flex; flex-wrap:wrap; gap:10px; margin-top:18px}
.agente-contacto:empty{display:none}
/* El landing es el botón principal; llamar y WhatsApp, secundarios — el
   mismo terciario que ya usa el rail de la ficha de propiedad. */
.agente-contacto .boton.fantasma{background:transparent; color:var(--acento); border:1px solid var(--filete)}
.agente-redes{margin:12px 0 0; font-size:13.5px; display:flex; gap:16px}
.agente-redes a{border-bottom:1px solid var(--filete); transition:border-color var(--t) var(--curva)}
.agente-redes a:hover{border-color:var(--acento)}
.agente-correo{margin:8px 0 0; font-size:13.5px; word-break:break-all}
.agente-correo a{border-bottom:1px solid var(--filete); transition:border-color var(--t) var(--curva)}
.agente-correo a:hover{border-color:var(--acento)}

/* ---------- Reseñas y nivel del agente (sitio público) ----------
   La línea de resumen: en la ficha (bajo los datos del agente) y en la
   tarjeta del equipo (bajo la licencia). Mismo tamaño que `.agente-zonas`,
   para que no compita con el nombre. */
.agente-resenas-resumen{font-size:12.5px; color:var(--metadato); margin-top:8px}
.agente-resenas-resumen .estrellas-num{color:var(--tinta); font-weight:500}

/* La insignia de nivel: un fondo discreto por nivel, nunca el acento —eso es
   para lo accionable— y "nuevo" no tiene clase porque nunca se pinta (no es
   un logro que enseñarle a un comprador). */
.insignia-nivel{display:inline-block; padding:2px 9px; border-radius:100px;
  font-size:11px; letter-spacing:.04em; font-weight:500}
.nivel-bronce{background:#F1E4D8; color:#8A5A2B}
.nivel-plata{background:#E9EBEE; color:#5B6470}
.nivel-oro{background:#F7ECC9; color:#8A6D1D}
.nivel-elite{background:#E4E9F1; color:var(--acento)}

/* Las reseñas de la ficha del agente: cita editorial, no tarjeta de producto
   —mismo tono que `.prosa`—. Dos columnas cuando hay espacio, una en móvil. */
.rejilla-resenas{display:grid; gap:clamp(18px,2vw,26px);
  grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));
  margin-top:clamp(20px,2.5vw,32px)}
.resena{margin:0; padding:22px 24px; border:1px solid var(--filete); border-radius:4px}
.resena-estrellas{margin:0 0 10px; letter-spacing:.06em; color:var(--acento)}
.resena-estrellas .apagadas{color:var(--filete)}
.resena p{margin:0 0 14px; font-size:14.5px; line-height:1.65; color:#2A3138}
.resena footer{font-size:12px; color:var(--metadato); letter-spacing:.02em}

/* ---------- Equipo: la bróker al frente ---------- */

/* La franja de prueba social, entre el encabezado y la tarjeta de la bróker:
   una sola línea, tono de prosa, nunca una caja — es un dato de fondo, no la
   protagonista de la página. */
.equipo-social{font-size:13.5px; color:var(--metadato); letter-spacing:.01em;
  margin:calc(-1 * clamp(14px,2vw,26px)) 0 clamp(32px,4vw,52px)}

/* La tarjeta destacada de la bróker: foto grande a la izquierda, su ficha a
   la derecha — el mismo gesto de `.landing-hero`, pero dentro de una caja
   propia para que se lea como LA tarjeta que abre la página, no una más de
   la rejilla. Colapsa a una columna en móvil, foto arriba. */
.equipo-broker{display:grid; grid-template-columns:minmax(200px,280px) 1fr;
  gap:clamp(28px,4vw,52px); align-items:center;
  padding:clamp(26px,3.6vw,44px); margin-bottom:clamp(40px,5vw,64px);
  background:var(--banda); border-radius:6px;
  transition:box-shadow var(--t) var(--curva)}
/* `display:block`: es un `<a>`, y sin esto —inline por defecto— el
   `aspect-ratio` de `.agente-foto` no se aplicaría. */
.equipo-broker-foto{display:block; border-radius:4px; box-shadow:0 24px 48px -28px rgba(20,24,28,.28)}
.equipo-broker-foto img{filter:none}
.equipo-broker-nombre{font-size:clamp(28px,3.2vw,42px); margin:4px 0 8px}
.equipo-broker-nombre a:hover{color:var(--acento)}
.equipo-broker-eslogan{font-family:var(--serif); font-size:clamp(16px,1.4vw,20px);
  color:var(--metadato); max-width:46ch; margin:10px 0 2px}
.equipo-broker-acciones{display:flex; flex-wrap:wrap; align-items:center; gap:6px 18px; margin-top:20px}
.equipo-broker-acciones .boton{margin:0}
@media(max-width:720px){
  .equipo-broker{grid-template-columns:1fr; text-align:center}
  .equipo-broker-foto{width:min(200px,56vw); margin:0 auto}
  .equipo-broker-eslogan{max-width:none; margin-inline:auto}
  .equipo-broker-acciones{justify-content:center}
}

/* El botón "Ver mi página" dentro de una tarjeta del equipo: discreto, no
   compite con el nombre ni con el conteo de propiedades. */
.equipo-tarjeta-cta{margin-top:12px; padding:8px 18px; font-size:12px;
  border-radius:100px; background:transparent; color:var(--acento);
  border:1px solid var(--filete)}
.equipo-tarjeta-cta:hover{border-color:var(--acento); background:var(--acento);
  color:#fff; transform:none}