/* ============================================================
   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,
   sin el buscador ni el selector ES/EN — ninguno de los dos está construido
   todavía (S2 y S1/S3 respectivamente), y un botón que no hace nada es
   exactamente el error que el sitio viejo ya cometía ("promete lo que no tiene").
   ============================================================ */

: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}

/* ---------- 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}}

/* ---------- 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.
   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 ---------- */
.seccion{padding:clamp(64px,9vw,128px) 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 ---------- */
.rejilla{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(310px,100%),1fr));
  gap:clamp(24px,3vw,44px) clamp(20px,2.4vw,32px)}
.tarjeta{display:block; position:relative}
.tarjeta-foto{position:relative; overflow:hidden; background:var(--banda);
  aspect-ratio:3/2}          /* 1.5 — lo que clavan Compass, Sotheby's y Corcoran */
.tarjeta-foto img{width:100%; height:100%; object-fit:cover;
  transition:transform 1.2s var(--curva)}
.tarjeta:hover .tarjeta-foto img{transform:scale(1.06)}
.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:14px; left:14px; z-index:2;
  background:rgba(255,255,255,.94); color:var(--tinta);
  font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:500;
  padding:7px 12px; border-radius:2px}
.etiqueta.renta{background:var(--acento); color:#fff}
.tarjeta-cuerpo{padding:18px 2px 0}
.tarjeta .precio{margin-bottom:6px}
.direccion{font-family:var(--serif); font-size:17px; line-height:1.3;
  font-variation-settings:'opsz' 24}
.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}
.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` ahora también es enlace (equipo y comunidad la usan como <a>,
   la portada la sigue usando como <div>): 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}

/* ---------- 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}