/*
 * Vivir Barcelona Hoy · vivir.css (sección vivir: pisos)
 * Tarjeta de piso · [vbh_pisos] · franja de vendidos ·
 * /vivir/propiedades/ · galería tipo stories · ficha del piso.
 * Va en todas las páginas porque los shortcodes salen en cualquiera: solo lo de vivir.
 * Marca: radios de los tokens (nunca chaflán en fotos), texto sobre foto solo con velo espresso,
 * nada de terracota sobre crema en texto, toques de 48 px.
 */

/* ===== tarjeta de piso (maqueta CSS 276–300) ===== */
.vbh-piso{position:relative;display:grid;gap:14px;align-content:start;padding:12px;border-radius:var(--vbh-r-card);background:var(--vbh-rubor);color:var(--vbh-espresso)}
.vbh-piso[hidden]{display:none}
.vbh-piso__foto{position:relative;aspect-ratio:var(--vbh-ar-vertical);border-radius:var(--vbh-r-img);overflow:hidden;background:var(--vbh-arena)}
/* dos clases en las fotos: dentro de Elementor, «.elementor img» les pondría height:auto y radio 0 */
.vbh-piso .vbh-piso__img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--vbh-curva)}
@media (hover:hover) and (pointer:fine){ .vbh-piso:hover .vbh-piso__img{transform:scale(1.03)} }
.vbh-piso__sellos{position:absolute;z-index:3;top:12px;left:12px;right:12px;display:flex;flex-wrap:wrap;gap:6px;pointer-events:none}
.vbh-piso__txt{display:grid;gap:10px;align-content:start;padding:4px 8px 8px}
.vbh-piso__t{font-size:var(--vbh-h-tarjeta);line-height:var(--vbh-lh-tarjeta);letter-spacing:-.02em}
/* una palabra muy larga en un título no puede abrir scroll horizontal en móvil */
.vbh-piso__t,.vbh-piso__titulo,.vbh-ficha__t{overflow-wrap:break-word;hyphens:auto}
/* sin foto: el símbolo en el hueco, para que la tarjeta no quede vacía */
.vbh-piso .vbh-piso__sin-foto{position:absolute;inset:0;margin:auto;width:64px;height:64px}
.vbh-piso__enlace{color:inherit;text-decoration:none}
.vbh-piso__enlace::after{content:"";position:absolute;inset:0;z-index:4;border-radius:var(--vbh-r-card)}
.vbh-piso:hover .vbh-piso__enlace{text-decoration:underline;text-decoration-color:var(--vbh-terracota);text-decoration-thickness:2px;text-underline-offset:4px}
.vbh-piso__enlace:focus-visible{outline:none}
.vbh-piso__enlace:focus-visible::after{outline:var(--vbh-foco-ancho) solid var(--vbh-espresso);outline-offset:var(--vbh-foco-sep)}
.vbh-piso__precio{font-size:var(--vbh-small);color:var(--vbh-piedra)}
.vbh-piso__precio strong{font-size:1.25rem;color:var(--vbh-espresso)}

/* destacada: el piso solo de [vbh_pisos], como en la maqueta (galería + foto al costado + texto) */
.vbh-piso--destacada{gap:22px;padding:clamp(16px,2vw,24px)}
@media (min-width:768px){ .vbh-piso--destacada:not(.vbh-piso--sin-fotos){grid-template-columns:1.1fr 1fr;align-items:stretch} }
.vbh-piso--sin-fotos .vbh-piso__sellos{position:static}
.vbh-piso__fotos{position:relative;display:grid;grid-template-columns:2fr 1fr;gap:10px}
.vbh-piso__fotos--una{grid-template-columns:minmax(0,1fr)}
.vbh-piso .vbh-piso__lado{align-self:stretch;width:100%;height:auto;min-height:0;object-fit:cover;border-radius:var(--vbh-r-img)}
.vbh-piso--destacada .vbh-piso__txt{gap:14px;padding:6px 4px 4px}
.vbh-piso__titulo{color:inherit;text-decoration:none}
.vbh-piso__titulo:hover{text-decoration:underline;text-decoration-color:var(--vbh-terracota);text-decoration-thickness:2px;text-underline-offset:6px}
.vbh-piso--destacada .vbh-botones{margin-top:4px}

/* vendido: sin fondo, más chica, dentro de la franja */
.vbh-piso--vendido{gap:12px;padding:0;background:none;color:inherit}
.vbh-piso--vendido .vbh-piso__txt{gap:6px;padding:0}
.vbh-piso--vendido .vbh-piso__enlace::after{border-radius:var(--vbh-r-img)}

/* ===== [vbh_pisos]: tarjetas (maqueta CSS 276–277), hasta 3 columnas ===== */
.vbh-pisos{display:grid;gap:20px}
@media (min-width:768px){
  .vbh-pisos:not(.vbh-pisos--uno){grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1025px){
  .vbh-pisos{gap:24px}
  .vbh-pisos:not(.vbh-pisos--uno){grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* [vbh_pisos fila="si"] (6/11, la home): una fila que se desliza, como la de vendidos; asoma la tarjeta siguiente para
   que se note que hay más */
.vbh-pisos.vbh-pisos--fila{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(82%,320px);margin:-6px -6px 0;padding:6px 6px 14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:6px;scrollbar-width:thin;overscroll-behavior-x:contain}
.vbh-pisos--fila > *{scroll-snap-align:start}
@media (min-width:768px){ .vbh-pisos.vbh-pisos--fila{grid-auto-columns:calc((100% - 20px) / 2.2)} }
@media (min-width:1025px){ .vbh-pisos.vbh-pisos--fila{grid-auto-columns:calc((100% - 48px) / 3.2)} }

/* ===== franja de vendidos ([vbh_vendidos] y /vivir/propiedades/) ===== */
.vbh-vendidos{display:grid;gap:24px}
/* después de [vbh_pisos] (o de otro bloque en el mismo contenedor) no queda pegada a lo de arriba */
* + .vbh-vendidos{margin-top:var(--vbh-s8)}
.vbh-vendidos__cab{display:grid;gap:12px}
/* 6 px de aire (con margen negativo) para que la fila con scroll no recorte el anillo de foco */
.vbh-vendidos__fila{display:grid;grid-auto-flow:column;grid-auto-columns:min(68%,260px);gap:16px;margin:-6px -6px 0;padding:6px 6px 12px;list-style:none;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:6px;scrollbar-width:thin;overscroll-behavior-x:contain}
.vbh-vendidos__fila > li{scroll-snap-align:start}
@media (min-width:1025px){ .vbh-vendidos__fila{grid-auto-columns:calc((100% - 3 * 24px) / 4);gap:24px} }

/* ===== /vivir/propiedades/ (archive-propiedad.php) ===== */
.vbh-pisos-pagina__intro{max-width:42ch}
.vbh-pisos-filtro{display:grid;gap:10px;margin-bottom:clamp(24px,3vw,36px)}
.vbh-pisos-filtro__n{font-size:var(--vbh-small);color:var(--vbh-texto-2)}
.vbh-rejilla-pisos{display:grid;gap:20px}
@media (min-width:600px){ .vbh-rejilla-pisos{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1025px){ .vbh-rejilla-pisos{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px} }
.vbh-pisos-pagina__vendidos{margin-top:var(--vbh-bloque);padding-top:clamp(32px,4vw,48px);border-top:1px solid var(--vbh-sep)}

/* ===== galería tipo stories (parts/galeria.php; maqueta CSS 287–298 + botón de pausa) ===== */
.vbh-galeria{position:relative;isolation:isolate;border-radius:var(--vbh-r-img);overflow:hidden;background:var(--vbh-tostado)}
.vbh-galeria__pista{position:relative;display:flex;aspect-ratio:var(--vbh-ar-apaisada);margin:0;padding:0;list-style:none;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.vbh-galeria__pista::-webkit-scrollbar{display:none}
.vbh-galeria__pista:focus-visible{outline:var(--vbh-foco-ancho) solid var(--vbh-crema);outline-offset:-8px;border-radius:var(--vbh-r-img)}
.vbh-galeria__item{flex:0 0 100%;scroll-snap-align:start;scroll-snap-stop:always}
.vbh-galeria .vbh-galeria__img{width:100%;height:100%;object-fit:cover;border-radius:0}
.vbh-galeria--tarjeta .vbh-galeria__pista{aspect-ratio:var(--vbh-ar-vertical)}
@media (min-width:768px){
  /* en el destacado la galería llena el alto de la tarjeta (como en la maqueta) */
  .vbh-galeria--tarjeta{height:100%;min-height:340px}
  .vbh-galeria--tarjeta .vbh-galeria__pista{position:absolute;inset:0;aspect-ratio:auto}
  .vbh-galeria--tarjeta .vbh-galeria__item{position:relative}
  .vbh-galeria--tarjeta .vbh-galeria__img{position:absolute;inset:0}
}
.vbh-galeria__ctrl{position:absolute;z-index:2;left:0;right:0;bottom:0;display:flex;align-items:center;gap:12px;padding:32px 12px 12px;background:linear-gradient(to top,rgb(42 28 22 / .55),transparent);pointer-events:none}
.vbh-galeria__ctrl > *{pointer-events:auto}
.vbh-galeria__barras{flex:1}
.vbh-galeria--muchas .vbh-galeria__barras{gap:3px}
.vbh-galeria__pausa{flex:none}
.vbh-galeria__n{position:absolute;z-index:2;top:12px;right:12px;padding:4px 12px;border-radius:var(--vbh-r-pill);background:var(--vbh-velo);color:var(--vbh-crema);font-size:var(--vbh-min);font-weight:600;font-variant-numeric:tabular-nums}
.vbh-galeria__flecha{position:absolute;z-index:2;top:50%;display:grid;place-items:center;width:var(--vbh-tap);height:var(--vbh-tap);margin-top:calc(var(--vbh-tap) / -2);padding:0;border:0;border-radius:50%;background:var(--vbh-velo);color:var(--vbh-crema);cursor:pointer;opacity:0;transition:opacity var(--vbh-dur-ui) var(--vbh-curva)}
.vbh-galeria__flecha--ant{left:12px}
.vbh-galeria__flecha--sig{right:12px}
.vbh-galeria:hover .vbh-galeria__flecha,.vbh-galeria__flecha:focus-visible{opacity:1}
.vbh-galeria__flecha:focus-visible{outline-color:var(--vbh-crema)}
.vbh-galeria__flecha span{width:10px;height:10px;border:solid currentColor;border-width:2px 2px 0 0;transform:translateX(-2px) rotate(45deg)}
.vbh-galeria__flecha--ant span{transform:translateX(2px) rotate(-135deg)}
.vbh-galeria .vbh-pausa:focus-visible{outline-color:var(--vbh-crema)}
@media (hover:none){ .vbh-galeria__flecha{display:none} }

/* ===== ficha del piso (single-propiedad.php) ===== */
.vbh-ficha{padding-block:clamp(4px,1.5vw,16px) var(--vbh-bloque)}
.vbh-ficha .vbh-migas{margin-bottom:2px} /* las migas son de la base (parts/migas.php): 8 px hasta la galería */

.vbh-ficha{--vbh-ficha-reel:280px;--vbh-ficha-hueco:clamp(48px,6vw,96px)}
.vbh-ficha__hero{display:grid;gap:28px}
@media (min-width:1025px){
  .vbh-ficha__hero{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:56px;align-items:start}
  .vbh-ficha__hero > .vbh-galeria{position:sticky;top:calc(var(--vbh-cab) + 24px)}
  .vbh-ficha__hero--sin-fotos{grid-template-columns:minmax(0,1fr)}
}
.vbh-ficha__info{display:grid;gap:18px;align-content:start}
.vbh-ficha__hero--sin-fotos .vbh-ficha__info{max-width:var(--vbh-lectura)}
.vbh-ficha__t{font-size:clamp(2.25rem,1.6rem + 2vw,3.5rem)}
.vbh-ficha__sellos{display:flex;flex-wrap:wrap;gap:8px}
/* Dos columnas mientras la etiqueta más larga, «HABITACIONES» (8,4 rem en versal espaciada), entra en su tarjeta; si no,
   una. Con la letra de 16 px, dos desde 360 px como antes; con 18 o 20 px en un teléfono, una (antes la etiqueta se salía
   de la tarjeta y abría scroll horizontal). calc(50% - 6px) deja como mucho dos columnas. */
.vbh-ficha__cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,max(calc(50% - 6px),calc(8.4rem + 16px))),1fr));gap:10px;margin:6px 0 0}
.vbh-ficha__cifra{display:grid;gap:4px;align-content:start;padding:12px 16px;border-radius:var(--vbh-r-img);background:var(--vbh-rubor)}
.vbh-ficha__cifra dt{font-size:var(--vbh-label);font-weight:500;line-height:1.3;letter-spacing:var(--vbh-ls-label);text-transform:uppercase}
.vbh-ficha__cifra dd{display:grid;gap:2px;margin:0;font-size:1.25rem;font-weight:700;line-height:1.2;letter-spacing:-.02em}
.vbh-ficha__cifra small{font-size:var(--vbh-small);font-weight:400;letter-spacing:0;color:var(--vbh-piedra)}
.vbh-ficha__cifra--precio{grid-column:1 / -1}
.vbh-ficha__cifra--precio dd{font-size:clamp(1.6rem,1.3rem + 1vw,2.25rem);letter-spacing:-.03em}
.vbh-ficha__cta{margin-top:4px}
.vbh-ficha__cta .vbh-btn{width:100%}
@media (max-width:1024px){
  /* «Pedir visita por WhatsApp» fijo abajo, a la izquierda del WhatsApp flotante (mismo centro vertical) */
  .vbh-ficha__cta--fija{position:fixed;z-index:calc(var(--vbh-z-wa) - 1);left:16px;right:calc(16px + var(--vbh-wa) + 12px);bottom:20px;margin:0}
  .vbh-ficha__cta--fija .vbh-btn{box-shadow:0 0 0 2px var(--vbh-crema)}
  .single-propiedad .vbh-pie{padding-bottom:112px}
  html:has(.vbh-ficha__cta--fija){scroll-padding-bottom:88px} /* con Tab, lo enfocado no queda debajo de la barra fija */
}

.vbh-ficha__cuerpo{display:grid;gap:clamp(48px,6vw,72px);margin-top:clamp(56px,8vw,112px)}
.vbh-ficha__texto{display:grid;gap:clamp(48px,6vw,72px)}
.vbh-ficha__texto,.vbh-ficha__zona,.vbh-ficha__legal{width:100%;max-width:var(--vbh-lectura);margin-inline:auto}
.vbh-ficha__reel{display:grid;gap:12px;width:100%;max-width:var(--vbh-ficha-reel);margin-inline:auto}
@media (min-width:1025px){
  .vbh-ficha__cuerpo--reel{grid-template-columns:minmax(0,var(--vbh-lectura)) var(--vbh-ficha-reel);justify-content:center;align-items:start;gap:0 var(--vbh-ficha-hueco)}
  /* los datos legales, alineados con las dos columnas de arriba */
  .vbh-ficha--con-reel .vbh-ficha__legal{max-width:calc(var(--vbh-lectura) + var(--vbh-ficha-reel) + var(--vbh-ficha-hueco))}
  /* En el orden de su plantilla (ronda 6): la historia y El barrio, el reel y Características (y su «Plano» debajo, 29/10).
     El reel va a la derecha de los textos, fijo al bajar; Características y Plano, debajo de los otros dos, con el mismo
     aire que entre ellos. */
  .vbh-ficha__cuerpo--reel > .vbh-ficha__reel{grid-column:2;grid-row:1 / span 2;position:sticky;top:calc(var(--vbh-cab) + 32px)}
  .vbh-ficha__cuerpo--reel > .vbh-ficha__texto{grid-column:1;margin-inline:0}
  .vbh-ficha__cuerpo--reel > .vbh-ficha__texto ~ .vbh-ficha__texto{margin-top:clamp(48px,6vw,72px)}
}
.vbh-ficha__bloque{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;align-content:start}
.vbh-ficha__lista{display:grid;gap:14px;margin:0;padding:0;list-style:none}
@media (min-width:768px){ .vbh-ficha__lista{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px} }
.vbh-ficha__lista li{display:flex;align-items:center;gap:14px}
.vbh-ficha__lista .vbh-raya{flex:none}
/* su «Plano» (29/10), debajo de Características: entero, al ancho de la columna. Sin «ver el plano en grande» (no volvió):
   la imagen es el enlace al archivo, en una pestaña nueva; el anillo de foco sigue su radio y el cursor dice que se agranda */
.vbh-ficha__plano-enlace{display:block;border-radius:var(--vbh-r-img);cursor:zoom-in}
.vbh-ficha__plano-img{width:100%;border-radius:var(--vbh-r-img)}
.vbh-ficha__zona .vbh-prosa{max-width:var(--vbh-lectura)} /* su texto de «El barrio», al ancho de lectura de «La historia de esta casa» */
.vbh-ficha__legal{display:grid;gap:16px;margin-top:clamp(56px,8vw,96px)}
@media (min-width:768px){
  .vbh-ficha__legal{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vbh-ficha__dato:only-child{grid-column:1 / -1}
}
.vbh-ficha__dato{display:grid;gap:14px;align-content:start;padding:22px 24px;border:1.5px solid var(--vbh-linea-fuerte);border-radius:var(--vbh-r-card)}
.vbh-cert{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.vbh-cert li{display:grid;place-items:center;width:36px;height:36px;border:1.5px solid var(--vbh-linea-fuerte);border-radius:8px;color:var(--vbh-piedra);font-size:var(--vbh-small);font-weight:600}
.vbh-cert .is-actual{border-color:var(--vbh-espresso);background:var(--vbh-espresso);color:var(--vbh-crema)}
.vbh-ficha__cert-txt{font-size:1.25rem;font-weight:700}
.vbh-ficha__registro{margin:0;font-weight:600}
/* su botón «¿Tienes un piso así? Vende con nosotros», solo (sin franja ni texto nuestro), alineado con el bloque legal */
.vbh-ficha__vender{width:100%;max-width:var(--vbh-lectura);margin:clamp(56px,8vw,96px) auto 0}
.vbh-ficha__vender .vbh-btn{max-width:100%;padding-block:10px} /* en el teléfono el texto baja de línea: con aire arriba y abajo */
@media (min-width:1025px){ .vbh-ficha--con-reel .vbh-ficha__vender{max-width:calc(var(--vbh-lectura) + var(--vbh-ficha-reel) + var(--vbh-ficha-hueco))} }