/* Design tokens extraídos del prototipo "Ponte Lar" de Claude Design.
   Cambiar aquí cambia toda la web del plugin. */
:root{
  --hs-ink:#1c2327;        /* texto principal */
  --hs-ink-soft:#44515b;
  --hs-muted:#8b9096;
  --hs-line:#eef1f2;
  --hs-bg-soft:#f6f8f9;
  --hs-brand:#237e8d;      /* turquesa Ponte Lar */
  --hs-brand-dark:#176574;
  --hs-brand-light:#7ec6d1;
  --hs-dark:#12181b;
  --hs-wa:#25d366;
  --hs-star:#f4b740;
  --hs-radius:16px;
  --hs-font:'Manrope',system-ui,sans-serif;
  --hs-display:'Bricolage Grotesque',sans-serif;
  --hs-serif:'Newsreader',serif;
}
.hs-wrap{max-width:1400px;margin:0 auto;padding:0 40px}
.hs-narrow{max-width:920px;margin:0 auto}

/* --- Hero de listado / zona --- */
.hs-hero{background:radial-gradient(120% 90% at 84% 0%,#e7f1f2 0%,#fbfbfa 60%);padding:58px 48px 34px}
.hs-hero__crumbs{display:flex;align-items:center;gap:12px;margin-bottom:16px;font-size:12.5px;font-weight:600;color:var(--hs-muted)}
.hs-hero__crumbs a{color:var(--hs-brand-dark);font-weight:700;letter-spacing:.18em;text-transform:uppercase;text-decoration:none}

/* Las migas enlazan ahora todos los niveles de la zona, así que pueden
   llegar a cuatro tramos ("Inicio › A Coruña › Oleiros › Santa Cruz").
   Sin flex-wrap eso desborda a lo ancho en móvil. */
.hs-hero__crumbs{flex-wrap:wrap;row-gap:6px}

/* Si se puede pulsar, tiene que notarse. El subrayado al pasar por
   encima es lo único que distingue un tramo enlazado del actual, que va
   en el mismo renglón y con el mismo tamaño. */
.hs-hero__crumbs a:hover,.hs-hero__crumbs a:focus-visible{text-decoration:underline}
.hs-crumbs__sep{opacity:.5}

/* Migas de la ficha: mismo componente, aspecto discreto. Reproduce lo
   que antes iba en estilos en línea dentro de la plantilla. */
.hs-crumbs{display:flex;align-items:center;flex-wrap:wrap;gap:8px;row-gap:6px;
  font-size:13px;font-weight:600;color:var(--hs-muted);margin-bottom:16px}
.hs-crumbs a{color:inherit;text-decoration:none}
.hs-crumbs a:hover,.hs-crumbs a:focus-visible{text-decoration:underline}
.hs-crumbs [aria-current="page"]{color:var(--hs-ink)}
.hs-hero h1{font-family:var(--hs-display);font-weight:800;font-size:clamp(40px,6vw,84px);line-height:.96;letter-spacing:-.03em;color:var(--hs-ink);margin:0;text-wrap:balance}
.hs-hero h1 em{font-family:var(--hs-serif);font-weight:400;font-style:italic;color:var(--hs-brand)}
.hs-hero p{font-size:clamp(16px,1.3vw,19px);line-height:1.6;color:var(--hs-ink-soft);margin:22px 0 0;max-width:640px}

/* --- Filtros --- */
/* La barra se queda pegada BAJO la cabecera, no en lo alto de la ventana:
   la cabecera del tema también es sticky y tiene más z-index, así que con
   top:0 los filtros se metían debajo y desaparecían al hacer scroll.
   La variable la define el tema; el 80px es para cualquier otro. */
.hs-filters{padding:20px 40px;position:sticky;top:var(--im-header-h,80px);z-index:40;
	background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--hs-line)}
.hs-filters__inner{max-width:1200px;margin:0 auto;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.hs-filters select,.hs-filters input{background:#f0f3f4;border:0;border-radius:10px;padding:10px 15px;font-size:14px;font-weight:600;font-family:inherit;color:var(--hs-ink)}
.hs-filters__count{margin-left:auto;font-size:14px;color:var(--hs-muted);font-weight:600}

/* --- Grid de tarjetas --- */
.hs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.hs-card{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.hs-card:hover{transform:translateY(-8px)}
.hs-card a{text-decoration:none;color:inherit;display:block}
/* Marcador cuando el inmueble aún no tiene fotos: misma trama que usa el
   diseño en la maqueta, para que la ficha no aparezca vacía. */
.hs-gallery__ph{display:block;border-radius:16px;
  background:repeating-linear-gradient(45deg,#dbe6e9,#dbe6e9 16px,#e6eef0 16px,#e6eef0 32px)}
.hs-gallery--vacia .hs-gallery__side .hs-gallery__ph{min-height:100px}

.hs-card__media{position:relative;aspect-ratio:4/3.2;border-radius:16px;overflow:hidden;
  background:repeating-linear-gradient(45deg,#dbe6e9,#dbe6e9 14px,#e6eef0 14px,#e6eef0 28px)}
.hs-card__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hs-card__op{position:absolute;top:14px;left:14px;font-size:11.5px;font-weight:800;color:#fff;
  background:var(--hs-brand);padding:6px 12px;border-radius:999px;text-transform:uppercase;letter-spacing:.04em}
.hs-card__op--alquiler{background:#c47b1f}
.hs-card__tag{position:absolute;top:14px;right:14px;font-size:11px;font-weight:700;color:var(--hs-ink);
  background:rgba(255,255,255,.94);padding:6px 11px;border-radius:999px}
.hs-card__head{display:flex;align-items:baseline;justify-content:space-between;margin-top:16px;gap:12px}
.hs-card__title{font-size:17px;font-weight:700;margin:0}
.hs-card__price{font-family:var(--hs-display);font-size:22px;font-weight:800;color:var(--hs-ink);flex:none;margin:0}
.hs-card__price span{font-size:13px;font-weight:600;color:var(--hs-muted)}
.hs-card__zone{font-size:14px;color:var(--hs-muted);margin:3px 0 0}
.hs-card__specs{display:flex;gap:16px;margin:12px 0 0;font-size:13.5px;color:#55606a;font-weight:600;
  list-style:none;padding:0}
.hs-card__specs li{margin:0}
.hs-card__specs li+li::before{content:"·";margin-right:16px;color:#c9d0d2}

/* --- Bloques SEO de la zona --- */
.hs-seo{padding:60px 40px 20px}
.hs-seo h2{font-family:var(--hs-serif);font-weight:400;font-size:34px;margin:0 0 16px}
.hs-seo p{font-size:17px;line-height:1.75;color:var(--hs-ink-soft);margin:0}
.hs-seo__blocks{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:36px}
.hs-seo__block{background:var(--hs-bg-soft);border-radius:14px;padding:24px}
.hs-seo__block h3{font-size:17px;font-weight:700;margin:0 0 8px}
.hs-seo__block p{font-size:14.5px;line-height:1.6;color:#55606a}
.hs-prices{background:var(--hs-bg-soft);padding:64px 40px}
.hs-prices__row{display:grid;grid-template-columns:1.1fr .8fr 1.6fr;gap:16px;align-items:center;padding:16px 22px;border-bottom:1px solid #f0f3f4}
.hs-prices__val{font-family:var(--hs-display);font-size:19px;font-weight:800;color:var(--hs-brand)}
.hs-faq{padding:56px 40px 76px}
.hs-faq__item{border-bottom:1px solid var(--hs-line);padding:20px 4px}
.hs-faq__q{font-size:16px;font-weight:700}
.hs-faq__a{font-size:15px;line-height:1.6;color:#55606a;margin-top:6px}

/* --- CTA --- */
.hs-cta{max-width:1200px;margin:0 auto;background:var(--hs-brand);border-radius:20px;padding:40px 48px;display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;color:#fff}
.hs-cta h2{font-family:var(--hs-serif);font-weight:400;font-size:30px;margin:0 0 6px}
.hs-cta p{margin:0;max-width:560px;color:rgba(255,255,255,.9);font-size:16px}
.hs-btn{display:inline-block;font-weight:800;font-size:15px;padding:15px 26px;border-radius:12px;text-decoration:none}
.hs-btn--white{background:#fff;color:var(--hs-brand)}
.hs-btn--wa{background:var(--hs-wa);color:#fff}
.hs-btn--brand{background:var(--hs-brand);color:#fff}

/* --- Ficha --- */
.hs-single{max-width:1200px;margin:0 auto;padding:36px 40px 70px}
/* overflow:clip es la red de seguridad: pase lo que pase con la imagen
   —una regla del tema, un alto natural mayor— no puede derramarse fuera de
   la galería y taparle el título a la ficha. Es barato y cierra toda una
   familia de fallos de maquetación. */
.hs-gallery{display:grid;grid-template-columns:3fr 1fr;gap:12px;height:480px;margin-bottom:14px;overflow:clip}

/* Enlaces a vídeo y tour. Envuelven a propósito: el inmueble real trae seis
   vídeos y en una sola línea se salían de la caja. */
.hs-medialinks{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:20px;position:relative;z-index:1}
.hs-btn--media{background:var(--hs-bg-soft);color:var(--hs-ink)}

/* ---------- Galería: la foto ES el botón ---------------------------------
   Antes había 64 fotos y solo se veían tres, con un "+59 fotos" que no hacía
   nada. El usuario no tenía forma de ver el inmueble, que es exactamente a lo
   que viene. */
.hs-gallery [data-hs-abrir]{cursor:zoom-in;border:0;padding:0;background:none;display:block;
	width:100%;height:100%;position:relative;border-radius:20px;overflow:clip}
.hs-gallery [data-hs-abrir]:focus-visible{outline:3px solid var(--hs-brand);outline-offset:3px}
.hs-gallery [data-hs-abrir] img{transition:transform .45s ease}
.hs-gallery [data-hs-abrir]:hover img{transform:scale(1.03)}

/* El contador deja de ser un adorno y pasa a ser la llamada a la acción. */
.hs-gallery__more{position:absolute;bottom:12px;right:12px;font-size:12.5px;font-weight:700;
	background:rgba(28,35,39,.82);color:#fff;padding:8px 14px;border-radius:999px;
	backdrop-filter:blur(4px);pointer-events:none}

.hs-gallery__vidbadge{position:absolute;top:12px;left:12px;display:inline-flex;align-items:center;
	gap:6px;font-size:12.5px;font-weight:700;background:rgba(28,35,39,.82);color:#fff;
	padding:8px 13px;border-radius:999px;backdrop-filter:blur(4px);pointer-events:none}

/* ---------- Visor ------------------------------------------------------- */
.hs-visor{position:fixed;inset:0;z-index:99999;background:rgba(12,18,21,.96);
	display:none;grid-template-rows:auto 1fr auto;gap:10px;padding:14px}
.hs-visor.is-abierto{display:grid}
.hs-visor__barra{display:flex;align-items:center;justify-content:space-between;color:#fff}
.hs-visor__cuenta{font-size:13.5px;font-weight:600;opacity:.85;letter-spacing:.02em}
.hs-visor__x{background:none;border:0;color:#fff;font-size:34px;line-height:1;cursor:pointer;
	padding:0 10px;opacity:.85}
.hs-visor__x:hover{opacity:1}

.hs-visor__escena{grid-column:1/-1;display:flex;align-items:center;justify-content:center;
	min-height:0;overflow:hidden}
.hs-visor__escena img{max-width:100%;max-height:100%;object-fit:contain;border-radius:10px}
.hs-visor__escena iframe{width:min(100%,1100px);aspect-ratio:16/9;border:0;border-radius:10px}

.hs-visor__nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;
	background:rgba(255,255,255,.14);border:0;color:#fff;font-size:30px;line-height:1;
	width:52px;height:52px;border-radius:999px;cursor:pointer;display:grid;place-items:center}
.hs-visor__nav:hover{background:rgba(255,255,255,.26)}
.hs-visor__nav--ant{left:16px}
.hs-visor__nav--sig{right:16px}

.hs-visor__tiras{display:flex;gap:8px;overflow-x:auto;padding:4px 2px;scrollbar-width:thin}
.hs-visor__tira{flex:0 0 auto;width:86px;height:58px;border:2px solid transparent;border-radius:8px;
	overflow:clip;padding:0;background:rgba(255,255,255,.1);cursor:pointer;opacity:.55}
.hs-visor__tira img{width:100%;height:100%;object-fit:cover;display:block}
.hs-visor__tira.is-activa{border-color:#fff;opacity:1}
.hs-visor__tira:hover{opacity:1}
.hs-visor__tira-video{display:grid;place-items:center;width:100%;height:100%;color:#fff;font-size:19px}

@media (max-width:860px){
	.hs-visor__nav{width:42px;height:42px;font-size:24px}
	.hs-visor__tira{width:64px;height:44px}
}
.hs-gallery__main,.hs-gallery__side img{border-radius:20px;width:100%;height:100%;object-fit:cover;display:block}
.hs-gallery__side{display:grid;grid-template-rows:1fr 1fr;gap:12px;position:relative}
.hs-single__cols{display:grid;grid-template-columns:1.6fr 1fr;gap:40px;margin-top:24px}
.hs-single h1{font-family:var(--hs-serif);font-weight:400;font-size:38px;margin:16px 0 4px}
.hs-keyfacts{display:flex;gap:30px;margin:26px 0;padding:22px 0;border-top:1px solid var(--hs-line);border-bottom:1px solid var(--hs-line)}
.hs-keyfacts strong{font-family:var(--hs-display);font-size:26px;font-weight:800;display:block}
.hs-keyfacts span{font-size:13px;color:var(--hs-muted);font-weight:600}
.hs-features h3{font-size:20px;font-weight:700;margin:26px 0 12px}
.hs-features__group{display:grid;grid-template-columns:1fr 1fr;gap:8px 24px;font-size:15px;color:var(--hs-ink-soft)}
.hs-aside{position:sticky;top:100px;border:1px solid var(--hs-line);border-radius:18px;padding:24px;box-shadow:0 20px 44px -30px rgba(28,35,39,.4)}
.hs-aside__price{font-family:var(--hs-display);font-size:34px;font-weight:800}
.hs-aside .hs-btn{display:block;text-align:center;margin-bottom:10px}
.hs-energy{display:inline-flex;align-items:center;gap:8px;font-weight:800;color:#fff;padding:4px 12px;border-radius:6px;font-size:14px}

@media(max-width:980px){
  .hs-grid{grid-template-columns:repeat(2,1fr)}
  .hs-single__cols,.hs-gallery{grid-template-columns:1fr}
  .hs-gallery{height:auto}
  .hs-seo__blocks{grid-template-columns:1fr}
}
@media(max-width:620px){
  .hs-grid{grid-template-columns:1fr}
  .hs-wrap,.hs-hero,.hs-filters,.hs-seo,.hs-faq,.hs-single{padding-left:18px;padding-right:18px}
  .hs-prices__row{grid-template-columns:1fr}
}

/* ==========================================================================
   BLOQUES DE GUTENBERG
   ========================================================================== */
.hs-block-inmuebles,.hs-block-zonas,.hs-block-buscador{margin-block:40px}
.hs-block__head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
  border-top:1px solid var(--hs-line);padding-top:26px;margin-bottom:30px;flex-wrap:wrap}
.hs-block__head h2{font-family:var(--hs-display);font-weight:700;font-size:clamp(28px,4vw,52px);
  letter-spacing:-.02em;margin:0;line-height:1}
.hs-block__all{font-weight:700;font-size:14.5px;color:var(--hs-brand-dark);
  border-bottom:2px solid var(--hs-brand-dark);padding-bottom:2px;text-decoration:none}
.hs-block__eyebrow{text-align:center;font-size:12.5px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--hs-brand-dark);margin:0 0 22px}
.hs-block__title{font-family:var(--hs-display);font-weight:700;font-size:clamp(26px,3.4vw,42px);
  letter-spacing:-.02em;margin:0 0 22px}

/* Zonas — etiquetas */
.hs-zonas{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.hs-zona{background:var(--hs-bg-soft);border-radius:999px;padding:11px 20px;font-size:15px;
  font-weight:700;color:var(--hs-ink);text-decoration:none;transition:background .2s,color .2s}
.hs-zona:hover{background:var(--hs-brand);color:#fff}
.hs-zona span{color:var(--hs-muted);font-weight:600;margin-left:4px}
.hs-zona:hover span{color:rgba(255,255,255,.75)}

/* Zonas — marquesina */
.hs-marquee{overflow:hidden}
.hs-marquee__track{display:flex;align-items:center;gap:40px;width:max-content;
  animation:hs-marq 28s linear infinite;font-family:var(--hs-display);
  font-size:clamp(26px,4vw,52px);font-weight:700;letter-spacing:-.02em}
.hs-marquee__track a{color:var(--hs-ink);text-decoration:none}
.hs-marquee__track a:hover{color:var(--hs-brand)}
.hs-marquee__track span{color:var(--hs-brand-light)}
@keyframes hs-marq{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){
  .hs-marquee__track{animation:none;flex-wrap:wrap;width:auto;justify-content:center;font-size:24px}
}

/* Buscador */
.hs-searchbox{display:flex;gap:10px;flex-wrap:wrap;background:#fff;border:1px solid var(--hs-line);
  border-radius:var(--hs-radius);padding:14px;box-shadow:0 20px 44px -34px rgba(28,35,39,.5)}
.hs-searchbox select,.hs-searchbox input{flex:1;min-width:150px;background:var(--hs-bg-soft);
  border:1.5px solid transparent;border-radius:10px;padding:13px 15px;font-size:15px;
  font-family:inherit;color:var(--hs-ink)}
.hs-searchbox select:focus,.hs-searchbox input:focus{outline:0;background:#fff;border-color:var(--hs-brand)}
.hs-searchbox button{background:var(--hs-brand);color:#fff;border:0;border-radius:10px;
  padding:13px 30px;font-size:15px;font-weight:700;font-family:inherit;cursor:pointer;transition:transform .2s}
.hs-searchbox button:hover{transform:translateY(-2px)}
@media(max-width:620px){
  .hs-searchbox{flex-direction:column}
  .hs-searchbox select,.hs-searchbox input,.hs-searchbox button{width:100%}
}


/* ---------- Modal de solicitud de visita ---------------------------------
   El formulario se abre ENCIMA de la ficha. Que el visitante no pierda de
   vista el inmueble mientras escribe es la diferencia entre que envíe y que
   abandone. */
.hs-btn--ghost{background:#fff;color:var(--hs-ink);border:1.5px solid #dce3e6}
.hs-modal{position:fixed;inset:0;z-index:99998;background:rgba(12,18,21,.62);
	display:none;align-items:center;justify-content:center;padding:18px;overflow-y:auto}
.hs-modal.is-abierto{display:flex}
.hs-modal__caja{background:#fff;border-radius:20px;width:min(560px,100%);max-height:92vh;
	overflow-y:auto;box-shadow:0 30px 70px -20px rgba(12,18,21,.5)}
.hs-modal__cab{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
	padding:24px 26px 0}
.hs-modal__cab h2{font-family:var(--hs-display);font-size:23px;font-weight:800;margin:0}
.hs-modal__cab p{margin:4px 0 0;font-size:13.5px;color:var(--hs-muted)}
.hs-modal__x{background:none;border:0;font-size:32px;line-height:1;cursor:pointer;
	color:var(--hs-muted);padding:0 4px}
.hs-modal__x:hover{color:var(--hs-ink)}
.hs-modal__cuerpo{padding:18px 26px 26px}
.hs-modal__cuerpo input[type=text],.hs-modal__cuerpo input[type=email],
.hs-modal__cuerpo input[type=tel],.hs-modal__cuerpo textarea{
	width:100%;padding:12px 14px;border:1.5px solid #dce3e6;border-radius:11px;
	font:inherit;font-size:15px}
/* Alto FIJO, no min-height. El alto real de un textarea lo manda su
   atributo `rows`, que lo escribe quien configura el formulario en Contact
   Form 7: con el valor por defecto salía una caja de media pantalla que
   empujaba el botón de enviar fuera del modal. La plantilla no puede
   depender de lo que el cliente teclee en otro plugin. */
.hs-modal__cuerpo textarea{height:104px;min-height:104px;resize:vertical}
.hs-modal__cuerpo label{display:block;font-size:13.5px;font-weight:600;margin-bottom:5px}
.hs-modal__cuerpo p{margin:0 0 14px}
.hs-modal__cuerpo input[type=submit]{width:100%;background:var(--hs-brand);color:#fff;border:0;
	padding:14px;border-radius:999px;font-weight:700;font-size:15.5px;cursor:pointer}
.hs-modal__cuerpo input[type=submit]:hover{background:var(--hs-brand-dark,#176574)}

/* Pie del mapa: el aviso de precisión a la izquierda y el enlace a Google
   a la derecha. Se usa un enlace y no el mapa de Google a propósito: su JS
   pesa el triple y castiga las Core Web Vitals, que es justo lo que esta
   web no se puede permitir. */
.hs-mapa__pie{display:flex;align-items:center;justify-content:flex-end;gap:14px;
	flex-wrap:wrap;margin-top:8px}
.hs-mapa__pie p:not(:empty){margin-right:auto}
.hs-mapa__pie p{font-size:13px;color:var(--hs-muted);margin:0}
.hs-mapa__ir{font-size:13.5px;font-weight:700;color:var(--hs-brand);white-space:nowrap}
.hs-mapa__ir:hover{text-decoration:underline}

/* ==========================================================================
   FICHA — entrega de diseño de octubre de 2026
   ========================================================================== */

/* La cabecera sale de la caja de contenido y pasa a banda a sangre. El
   precio va arriba a la derecha porque es la primera pregunta de todo el
   mundo, y en la columna lateral quedaba por debajo de la galería en
   móvil: había que hacer scroll para saber cuánto cuesta. */
.hs-ficha__head{background:radial-gradient(120% 90% at 84% 0%,#e7f1f2 0%,#fbfbfa 60%);
	padding:40px 40px 30px}
.hs-ficha__headinner{max-width:1200px;margin:0 auto}
.hs-ficha__headrow{display:flex;align-items:flex-end;justify-content:space-between;
	gap:24px;flex-wrap:wrap;margin-top:18px}
.hs-ficha__headmain{min-width:0}

.hs-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.hs-chip{font-size:11.5px;font-weight:700;color:var(--hs-ink);background:#fff;
	border:1px solid #e3e8e9;padding:6px 12px;border-radius:999px}
.hs-chip--op{font-weight:800;color:#fff;background:var(--hs-brand);border-color:transparent;
	text-transform:uppercase;letter-spacing:.04em}
.hs-chip--alquiler{background:#c47b1f}

.hs-ficha h1{font-family:var(--hs-display);font-weight:800;
	font-size:clamp(32px,4.6vw,64px);line-height:.98;letter-spacing:-.03em;
	color:var(--hs-ink);margin:0;text-wrap:balance}
.hs-ficha h1 em{font-family:var(--hs-serif);font-weight:400;font-style:italic;
	letter-spacing:-.01em;color:var(--hs-brand)}
.hs-ficha__meta{font-size:15px;color:#55606a;font-weight:600;margin-top:10px}

.hs-ficha__pricebox{text-align:right;flex:none}
.hs-ficha__price{font-family:var(--hs-display);font-size:clamp(30px,3.6vw,46px);
	font-weight:800;letter-spacing:-.02em;line-height:1;color:var(--hs-ink)}
.hs-ficha__price span{font-size:.4em;font-weight:700;color:var(--hs-muted)}
.hs-ficha__ppm{font-size:13.5px;color:var(--hs-muted);font-weight:600;margin-top:4px}

.hs-ficha .hs-single{padding-top:26px}
.hs-ficha__h2{font-family:var(--hs-display);font-weight:700;font-size:clamp(22px,2.4vw,28px);
	letter-spacing:-.01em;margin:44px 0 12px}
.hs-ficha__texto{font-size:16.5px;line-height:1.75;color:var(--hs-ink-soft)}
.hs-ficha__texto p{margin:0 0 14px}
.hs-ficha__nota{font-size:15px;color:#55606a;margin:0 0 16px}
.hs-ficha__pie{font-size:12.5px;color:var(--hs-muted);margin:12px 0 0}

/* Las cifras pasan de una fila con separadores a cuatro fichas. Se leen de
   un golpe de vista, que es para lo que están, y en móvil caen a dos
   columnas en vez de amontonarse. */
.hs-keyfacts{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;
	margin:0 0 8px;padding:0;border:0}
.hs-keyfacts>div{background:var(--hs-bg-soft);border-radius:16px;padding:18px}
.hs-keyfacts strong{font-family:var(--hs-display);font-size:26px;font-weight:800;
	display:block;line-height:1.1}
.hs-keyfacts span{font-size:13px;color:#55606a;font-weight:600}

/* Mapa: el sello flotante dice que la ubicación es aproximada ANTES de que
   nadie se moleste en buscar el portal exacto. */
.hs-mapa{position:relative}
.hs-mapa #hs-map{height:380px;border-radius:20px;border:1px solid #e3e8e9;
	background:#eef3f4;overflow:hidden}
.hs-mapa__sello{position:absolute;left:16px;top:16px;z-index:2;background:#fff;
	border-radius:12px;padding:10px 14px;box-shadow:0 12px 30px -16px rgba(28,35,39,.5);
	pointer-events:none}
.hs-mapa__sello span{display:block;font-size:11px;font-weight:700;color:var(--hs-brand-dark);
	text-transform:uppercase;letter-spacing:.08em}
.hs-mapa__sello strong{font-size:14px;font-weight:700;color:var(--hs-ink)}

/* Qué hay cerca. Lo escribe la agencia por zona, no el CRM. */
.hs-entorno{display:grid;grid-template-columns:1fr 1fr;gap:0 28px;
	font-size:15px;color:#33404a;margin-top:4px}
.hs-entorno>div{display:flex;justify-content:space-between;gap:12px;
	padding:12px 0;border-bottom:1px solid var(--hs-line)}
.hs-entorno strong{font-weight:700;color:var(--hs-brand-dark);white-space:nowrap}

/* Gastos: comunidad e hipoteca estimada. El IBI no lo trae la fuente, así
   que no se enseña: un dato inventado en la web de una inmobiliaria no es
   un detalle, es una reclamación. */
.hs-gastos{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.hs-gastos>div{border:1px solid var(--hs-line);border-radius:16px;padding:18px}
.hs-gastos span{display:block;font-size:12px;font-weight:700;color:var(--hs-muted);
	text-transform:uppercase;letter-spacing:.06em}
.hs-gastos strong{font-family:var(--hs-display);font-size:24px;font-weight:800;margin-top:4px;display:block}

/* Escala energética. La letra del inmueble destaca y el resto se atenúa:
   así se entiende de un vistazo si es buena o mala, que es la gracia de
   la escala y lo que no dice un simple "D". */
.hs-escala{display:flex;gap:4px;margin-top:12px;align-items:flex-end}
.hs-escala__l{flex:1;text-align:center;font-size:12px;font-weight:800;color:#fff;
	padding:6px 0;border-radius:6px;opacity:.4}
.hs-escala__l.is-esta{flex:1.5;font-size:15px;padding:11px 2px;border-radius:8px;
	opacity:1;box-shadow:0 0 0 2px var(--hs-ink)}
.hs-escala__l--a{background:#1a9c4e}
.hs-escala__l--b{background:#5cb85c}
.hs-escala__l--c{background:#c7dc4a;color:var(--hs-ink)}
.hs-escala__l--d{background:#f4d03f;color:var(--hs-ink)}
.hs-escala__l--e{background:#f5a623;color:var(--hs-ink)}
.hs-escala__l--f{background:#e8702a}
.hs-escala__l--g{background:#c0392b}

/* Nota del asesor: experiencia de primera mano, firmada. */
.hs-notaexp{margin:44px 0 0;background:var(--hs-bg-soft);border-radius:20px;padding:30px 32px}
.hs-notaexp blockquote{font-family:var(--hs-serif);font-style:italic;font-size:22px;
	line-height:1.5;color:var(--hs-ink);margin:0;quotes:"«" "»"}
.hs-notaexp blockquote::before{content:open-quote}
.hs-notaexp blockquote::after{content:close-quote}
.hs-notaexp figcaption{display:flex;align-items:center;gap:12px;margin-top:18px}
.hs-notaexp__av,.hs-aside__av{display:grid;place-items:center;width:44px;height:44px;
	border-radius:50%;background:var(--hs-brand);color:#fff;font-weight:800;flex:none}
.hs-notaexp figcaption strong{display:block;font-size:15px;font-weight:700}
.hs-notaexp figcaption em{font-style:normal;font-size:13px;color:var(--hs-muted)}

/* Columna lateral */
.hs-aside__ref{font-size:13px;color:var(--hs-muted);margin-top:2px}
.hs-aside__agente{display:flex;align-items:center;gap:12px;margin:20px 0 18px;
	padding:14px 0;border-top:1px solid var(--hs-line);border-bottom:1px solid var(--hs-line)}
.hs-aside__av{position:relative;width:48px;height:48px;background:#eef3f4;color:var(--hs-brand)}
/* El punto verde dice "hay alguien al otro lado". Es un detalle de dos
   líneas de CSS que sube la tasa de contacto más que cualquier texto. */
.hs-aside__av::after{content:"";position:absolute;right:0;bottom:0;width:12px;height:12px;
	border-radius:50%;background:var(--hs-wa);border:2px solid #fff}
.hs-aside__agente strong{display:block;font-size:15px;font-weight:700}
.hs-aside__agente em{font-style:normal;font-size:13px;color:var(--hs-muted)}
.hs-btn--dark{background:var(--hs-ink);color:#fff;border:0;font-family:inherit;
	font-size:16px;padding:16px;border-radius:14px;cursor:pointer;width:100%}
.hs-aside .hs-btn{border-radius:14px;padding:14px}
.hs-aside__legal{font-size:12.5px;color:var(--hs-muted);text-align:center;margin:14px 0 0}

.hs-tambien{margin-top:70px}
.hs-modal__ey{display:block;font-size:12px;font-weight:700;letter-spacing:.16em;
	text-transform:uppercase;color:var(--hs-brand-dark);margin-bottom:8px}

/* Panel final. En una ficha de pantalla y media, quien llega hasta abajo es
   el visitante más interesado del día: hasta ahora se encontraba con el pie
   del sitio. */
.hs-panel{margin-top:70px;display:grid;grid-template-columns:1fr 1.1fr;
	border-radius:26px;overflow:hidden;border:1px solid var(--hs-line);
	box-shadow:0 40px 90px -50px rgba(28,35,39,.55)}
.hs-panel__izq{background:radial-gradient(120% 90% at 0% 0%,#e7f1f2 0%,#f6f8f9 70%);padding:44px}
.hs-panel__ey{font-size:12.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
	color:var(--hs-brand-dark)}
.hs-panel__izq h2{font-family:var(--hs-display);font-weight:800;font-size:clamp(26px,3.4vw,46px);
	line-height:1;letter-spacing:-.02em;margin:14px 0}
.hs-panel__izq h2 em{font-family:var(--hs-serif);font-weight:400;font-style:italic;color:var(--hs-brand)}
.hs-panel__izq p{font-size:16px;line-height:1.65;color:var(--hs-ink-soft);margin:0 0 24px;max-width:420px}
.hs-panel__lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;
	font-size:15px;color:#33404a;font-weight:600}
.hs-panel__lista li{display:flex;gap:10px;align-items:center}
.hs-panel__lista li::before{content:"✓";display:grid;place-items:center;flex:none;
	width:24px;height:24px;border-radius:50%;background:var(--hs-brand);color:#fff;font-size:12px}
.hs-panel__der{background:#fff;padding:44px}
.hs-panel__der input[type=text],.hs-panel__der input[type=email],
.hs-panel__der input[type=tel],.hs-panel__der textarea,.hs-panel__der select{
	width:100%;padding:14px 15px;border:1.5px solid #dce3e6;border-radius:12px;font:inherit;font-size:15px}
.hs-panel__der textarea{height:104px;min-height:104px;resize:vertical}
.hs-panel__der label{display:block;font-size:13.5px;font-weight:600;margin-bottom:5px}
.hs-panel__der p{margin:0 0 12px}
.hs-panel__der input[type=submit]{width:100%;background:var(--hs-brand);color:#fff;border:0;
	padding:16px;border-radius:14px;font-weight:800;font-size:16px;cursor:pointer}
.hs-panel__der input[type=submit]:hover{background:var(--hs-brand-dark)}

@media(max-width:980px){
	/* En una sola columna la tarjeta lateral deja de tener al lado contra
	   qué quedarse pegada: sticky ahí la hace flotar sobre el contenido
	   mientras se lee. Vuelve a ser un bloque normal. */
	.hs-aside{position:static}
	.hs-panel{grid-template-columns:1fr}
	.hs-entorno{grid-template-columns:1fr}
	.hs-keyfacts{grid-template-columns:repeat(2,1fr)}
	.hs-ficha__headrow{align-items:flex-start}
	.hs-ficha__pricebox{text-align:left}
}
@media(max-width:620px){
	.hs-ficha__head{padding-left:18px;padding-right:18px}
	.hs-panel__izq,.hs-panel__der{padding:26px 22px}
	.hs-notaexp{padding:24px 22px}
	.hs-notaexp blockquote{font-size:19px}
	.hs-mapa #hs-map{height:300px}
}

/* ==========================================================================
   FICHA — calculadora, certificado y mosaico (octubre 2026, 2.ª vuelta)
   ========================================================================== */

/* Contact Form 7 se pinta a sí mismo una caja blanca con borde y 32px de
   relleno. Dentro del modal y del panel, que YA son una caja, eso deja una
   caja dentro de otra con doble margen. Aquí el formulario es el contenido,
   no una tarjeta. */
.hs-modal__cuerpo .wpcf7,
.hs-panel__der .wpcf7{background:none;border:0;border-radius:0;padding:0}

/* El icono de rejilla del botón "Ver las N fotos": cuatro cuadraditos
   dibujados con sombras, sin ninguna petición extra. */
.hs-btn__rej{display:inline-block;width:17px;height:17px;margin-right:9px;
	vertical-align:-3px;
	background-image:linear-gradient(currentColor,currentColor),linear-gradient(currentColor,currentColor),
		linear-gradient(currentColor,currentColor),linear-gradient(currentColor,currentColor);
	background-size:7px 7px;background-repeat:no-repeat;
	background-position:0 0,10px 0,0 10px,10px 10px}

/* ---------- Calculadora de cuota -----------------------------------------
   La pregunta de quien compra no es el precio, es cuánto paga al mes. Si no
   se responde aquí, se va a un simulador de un banco y no vuelve. */
.hs-calc{border:1px solid var(--hs-line);border-radius:20px;padding:26px 28px;margin-top:18px}
.hs-calc__cab h3{font-family:var(--hs-display);font-size:20px;font-weight:700;margin:0 0 4px}
.hs-calc__cab p{font-size:14px;color:var(--hs-muted);margin:0 0 20px}
.hs-calc__campo{margin-bottom:18px}
.hs-calc__campo label{display:flex;align-items:baseline;gap:8px;font-size:14px;
	font-weight:700;color:var(--hs-ink);margin-bottom:8px}
.hs-calc__pct{font-size:13px;font-weight:700;color:var(--hs-brand);margin-left:auto}
.hs-calc__caja{display:flex;align-items:center;gap:8px;background:var(--hs-bg-soft);
	border:1.5px solid transparent;border-radius:10px;padding:0 14px;transition:border-color .2s,background .2s}
.hs-calc__caja:focus-within{background:#fff;border-color:var(--hs-brand)}
.hs-calc__caja input{flex:1;min-width:0;border:0;background:none;padding:12px 0;
	font:inherit;font-size:16px;font-weight:700;color:var(--hs-ink);
	/* El tipo numérico es para que el móvil saque el teclado de números; las
	   flechitas de escritorio solo estorban en una caja de 279.500. */
	-moz-appearance:textfield;appearance:textfield}
.hs-calc__caja input::-webkit-outer-spin-button,
.hs-calc__caja input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.hs-calc__caja input:focus{outline:0}
.hs-calc__u{font-size:14px;font-weight:700;color:var(--hs-muted);flex:none}
.hs-calc__dos{display:grid;grid-template-columns:1fr 1fr;gap:18px}

/* El deslizador. Se le quita el aspecto del sistema para que no cante entre
   dos navegadores, pero se mantiene el alto táctil. */
.hs-calc input[type=range]{-webkit-appearance:none;appearance:none;width:100%;
	height:22px;margin:8px 0 0;background:none;cursor:pointer}
.hs-calc input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:999px;background:#e2e9ea}
.hs-calc input[type=range]::-moz-range-track{height:6px;border-radius:999px;background:#e2e9ea}
.hs-calc input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
	width:22px;height:22px;margin-top:-8px;border-radius:50%;background:var(--hs-brand);
	border:3px solid #fff;box-shadow:0 2px 8px -2px rgba(28,35,39,.5)}
.hs-calc input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;
	background:var(--hs-brand);border:3px solid #fff;box-shadow:0 2px 8px -2px rgba(28,35,39,.5)}
.hs-calc input[type=range]:focus-visible{outline:3px solid var(--hs-brand);outline-offset:4px}

.hs-calc__res{border-top:1px solid var(--hs-line);margin-top:6px;padding-top:16px}
.hs-calc__linea{display:flex;align-items:baseline;justify-content:space-between;
	gap:14px;font-size:15px;color:var(--hs-ink-soft);padding:6px 0}
.hs-calc__linea strong{font-weight:700;color:var(--hs-ink)}
.hs-calc__linea--cuota{font-size:17px;font-weight:700;color:var(--hs-ink)}
.hs-calc__linea--cuota strong{font-family:var(--hs-display);font-size:30px;
	font-weight:800;letter-spacing:-.02em;color:var(--hs-brand)}
.hs-calc__pie{font-size:12.5px;line-height:1.55;color:var(--hs-muted);margin:14px 0 0}

/* ---------- Certificado energético ---------------------------------------
   Dos escalas, no una: consumo y emisiones son datos distintos y la ley pide
   los dos. Antes solo se pintaba el consumo. */
.hs-ficha__h3{font-family:var(--hs-display);font-weight:700;font-size:19px;
	letter-spacing:-.01em;margin:30px 0 10px}
.hs-cert{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.hs-cert__b{border:1px solid var(--hs-line);border-radius:16px;padding:18px 20px}
.hs-cert__cab{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.hs-cert__cab span{font-size:12px;font-weight:700;color:var(--hs-muted);
	text-transform:uppercase;letter-spacing:.06em}
.hs-cert__cab strong{font-size:14px;font-weight:700;color:var(--hs-ink);text-align:right}

/* ---------- Mosaico del visor --------------------------------------------
   Con 62 fotos, pasarlas de una en una es un trabajo que nadie hace. */
.hs-visor__acciones{display:flex;align-items:center;gap:10px}
.hs-visor__modo{background:rgba(255,255,255,.14);border:0;color:#fff;cursor:pointer;
	font:inherit;font-size:13.5px;font-weight:700;padding:9px 16px;border-radius:999px;
	min-height:40px}
.hs-visor__modo:hover{background:rgba(255,255,255,.26)}
.hs-visor__mosaico{display:none}
.hs-visor.is-mosaico .hs-visor__mosaico{grid-column:1/-1;display:grid;
	grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;
	overflow-y:auto;align-content:start;padding:2px}
/* En mosaico sobran las flechas, la escena y la tira de miniaturas. */
.hs-visor.is-mosaico .hs-visor__escena,
.hs-visor.is-mosaico .hs-visor__tiras,
.hs-visor.is-mosaico .hs-visor__nav{display:none}
.hs-visor__cel{position:relative;aspect-ratio:4/3;border:0;padding:0;overflow:clip;
	border-radius:10px;background:rgba(255,255,255,.08);cursor:zoom-in}
.hs-visor__cel img{width:100%;height:100%;object-fit:cover;display:block;
	transition:transform .4s ease}
.hs-visor__cel:hover img{transform:scale(1.04)}
.hs-visor__cel:focus-visible{outline:3px solid #fff;outline-offset:2px}
.hs-visor__cel-video{display:grid;place-items:center;width:100%;height:100%;
	color:#fff;font-size:34px;background:rgba(255,255,255,.06)}

@media(max-width:860px){
	.hs-visor.is-mosaico .hs-visor__mosaico{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
}
@media(max-width:620px){
	.hs-cert{grid-template-columns:1fr}
	.hs-calc{padding:22px 20px}
	.hs-calc__dos{grid-template-columns:1fr;gap:0}
	.hs-calc__linea--cuota strong{font-size:26px}
	/* Las siete letras no caben a 390px; se parten en dos filas antes que
	   desbordar la página. */
	.hs-escala{flex-wrap:wrap}
	.hs-escala__l{flex:1 0 20%}
}

/* ==========================================================================
   LISTADO — maquetación sin estilos en línea
   Antes el padding, el ancho de los campos de precio y el botón iban en
   `style=""` dentro de las plantillas. Un estilo en línea gana a cualquier
   media query, así que en móvil seguían los 40 px de margen lateral y los
   130 px fijos del precio: de ahí la barra descolocada y las tarjetas más
   estrechas que el resto de la página.
   ========================================================================== */
.hs-listado{padding-top:40px;padding-bottom:60px}
.hs-paginacion{display:flex;justify-content:center;gap:8px;margin-top:44px}
.hs-cta-wrap{padding:0 40px 20px}
.hs-cta__btns{display:flex;gap:12px;flex-wrap:wrap}
.hs-filters__precio{display:flex;gap:6px}
.hs-filters__precio input:first-child{width:130px}
.hs-filters__precio input:last-child{width:110px}
.hs-filters__btn{padding:10px 20px;border:0;cursor:pointer;font-size:14px}

/* En tableta y móvil la barra deja de ir pegada bajo la cabecera: con dos o
   tres filas de campos se comía un tercio de la pantalla durante todo el
   scroll, justo encima de las tarjetas que se quieren ver. */
@media(max-width:860px){
	.hs-filters{position:static;backdrop-filter:none;background:#fff}
}

@media(max-width:620px){
	.hs-filters{padding:16px 18px}
	.hs-filters__inner{display:grid;grid-template-columns:1fr 1fr;gap:8px}
	/* 16 px y no 14: por debajo de 16, Safari en iPhone hace zoom al tocar el
	   campo y la página se queda ampliada después. */
	.hs-filters select,.hs-filters input{width:100%;min-height:46px;font-size:16px;padding:10px 12px}
	/* Los cuatro desplegables primero, de dos en dos; el precio, que ocupa la
	   fila entera, después. En el orden del HTML, Tipo y Habitaciones se
	   quedaban solos en su fila con medio hueco al lado. */
	.hs-filters__precio{grid-column:1/-1;order:1}
	.hs-filters__btn{order:2}
	.hs-filters__count{order:3}
	.hs-filters__precio input:first-child,.hs-filters__precio input:last-child{width:auto;flex:1;min-width:0}
	.hs-filters__btn{grid-column:1/-1;min-height:48px;font-size:16px}
	.hs-filters__count{grid-column:1/-1;margin:2px 0 0;text-align:center}

	.hs-listado{padding-top:24px;padding-bottom:36px}
	.hs-grid{gap:30px}
	/* Título y precio en columna: lado a lado, el título se partía en tres
	   líneas en 200 px para dejar sitio al precio. */
	.hs-card__head{flex-direction:column;align-items:flex-start;gap:4px}

	.hs-cta-wrap{padding:0 18px 20px}
	.hs-cta{padding:28px 22px;gap:20px}
	.hs-cta h2{font-size:26px}
	.hs-cta__btns{width:100%}
	.hs-cta__btns .hs-btn{flex:1;text-align:center;min-height:48px;display:flex;align-items:center;justify-content:center}
}

/* Áreas táctiles de la ficha en móvil. Los deslizadores de la calculadora
   medían 22 px de alto: el dedo fallaba la bolita y movía la página. */
@media(max-width:820px){
	.hs-calc input[type="range"]{height:44px}
	.hs-mapa__ir{display:inline-flex;align-items:center;min-height:44px}
}