/*
 * Sección barcelona (§5.5): teselas 9:16, [vbh_reels], portada con filtros, ficha de lugar,
 * fachada del reel y mapa. Se carga en todas las páginas (los shortcodes salen en cualquiera).
 * Marca: texto sobre foto siempre con velo espresso · nunca terracota sobre crema · radios de los tokens.
 */

/* ===== tesela 9:16 (maqueta CSS 255–274; contador del manual: ojo + cifra en blanco al pie) ===== */
.vbh-tesela{position:relative;display:block;aspect-ratio:var(--vbh-ar-reel);border-radius:var(--vbh-r-img);overflow:hidden;isolation:isolate;background:var(--vbh-tostado);color:var(--vbh-crema);text-decoration:none}
.vbh-tesela:focus-visible{border-radius:var(--vbh-r-img)}
.vbh-tesela .vbh-tesela__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform var(--vbh-dur-hover) var(--vbh-curva)} /* dos clases: en la portada de Elementor, `.elementor img{height:auto}` (0,1,1) le ganaba a una (ronda 6) */
@media (hover:hover) and (pointer:fine){ .vbh-tesela:hover .vbh-tesela__img{transform:scale(1.03)} }
.vbh-tesela__sin-foto{position:absolute;inset:0;display:grid;place-items:center;padding-bottom:30%}
.vbh-tesela__sin-foto img{width:56px;height:56px;opacity:.45}
.vbh-tesela__velo{position:absolute;inset:0;background:linear-gradient(to top,rgb(42 28 22 / .65),rgb(42 28 22 / .6) 45%,transparent 80%)} /* velo al máximo del manual donde va el texto: sobre fotos claras, la etiqueta de 13 px llega a 4,5:1 */
.vbh-tesela__sello{position:absolute;top:10px;left:10px;z-index:1;letter-spacing:.12em}
.vbh-tesela__txt{position:absolute;inset:auto 12px 12px;z-index:1;display:grid;justify-items:start;gap:6px}
.vbh-tesela__etq{font-size:var(--vbh-label);font-weight:500;line-height:1.3;letter-spacing:.14em;text-transform:uppercase}
.vbh-tesela__t{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;font-size:1rem;font-weight:700;line-height:1.2;letter-spacing:-.02em;text-transform:lowercase}
.vbh-tesela__vistas,.vbh-fachada__vistas{display:inline-flex;align-items:center;gap:6px;color:var(--vbh-blanco);font-size:var(--vbh-min);font-weight:600;font-variant-numeric:tabular-nums}
.vbh-ojo{flex:none}

/* rejilla de la portada: 2 · 3 · 4 columnas */
.vbh-rejilla-reels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}
@media (min-width:768px){ .vbh-rejilla-reels{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px} }
@media (min-width:1025px){ .vbh-rejilla-reels{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px} }

/* fila de teselas (el lugar relacionado del cierre de la ficha): deslizable en móvil, rejilla desde 768 px */
.vbh-trio{display:flex;gap:12px;margin:0 calc(var(--vbh-gut) * -1);padding:6px var(--vbh-gut);list-style:none;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x mandatory;scroll-padding-inline:var(--vbh-gut)}
.vbh-trio::-webkit-scrollbar{display:none}
.vbh-trio > li{flex:0 0 min(60vw,260px);scroll-snap-align:start}
@media (min-width:768px){ .vbh-trio{display:grid;grid-template-columns:repeat(3,minmax(0,280px));gap:20px;margin-inline:0;padding-inline:0;overflow:visible} }

/* ===== [vbh_reels]: fila con filtro y pausa (maqueta HTML 658–686, JS 931–990) ===== */
.vbh-reels{display:grid;grid-template-columns:minmax(0,1fr);gap:20px}
.vbh-reels .vbh-reels__cab{margin-bottom:clamp(4px,2vw,24px)}
.vbh-reels__titulo{display:grid;gap:14px}
.vbh-reels .vbh-reels__filtros{max-width:100%}
.vbh-reels .vbh-reels__fila{position:relative;display:flex;gap:14px;margin:0 calc(var(--vbh-gut) * -1);padding:6px var(--vbh-gut);list-style:none;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain}
.vbh-reels .vbh-reels__fila::-webkit-scrollbar{display:none}
.vbh-reels .vbh-reels__item{flex:0 0 min(46vw,240px);margin:0}
.vbh-reels__pie{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px}
.vbh-reels__pie .vbh-enlace{text-transform:lowercase} /* «Ver todos los reels» va como lo escribió ella; se ve en minúscula, como los demás enlaces */
@media (min-width:1025px){
  .vbh-reels .vbh-reels__fila{margin-inline:-6px;padding-inline:6px}
  .vbh-reels .vbh-reels__item{flex-basis:218px}
  .vbh-reels.is-cinta .vbh-reels__fila{-webkit-mask-image:linear-gradient(to right,transparent,var(--vbh-espresso) 4%,var(--vbh-espresso) 96%,transparent);mask-image:linear-gradient(to right,transparent,var(--vbh-espresso) 4%,var(--vbh-espresso) 96%,transparent)}
  .vbh-reels.is-cinta .vbh-reels__fila:focus-within{-webkit-mask-image:none;mask-image:none} /* que el foco se vea entero */
}

/* ===== portada /barcelona/ (parts/listado-lugares.php) ===== */
.vbh-bcn__cab{padding-top:var(--vbh-bloque)} /* el mismo arranque que /vivir/propiedades/, /hoy/ y las páginas de la base */
.vbh-bcn__titulo{max-width:920px}
.vbh-bcn__intro{max-width:40ch}
.vbh-bcn__filtros{display:grid;gap:10px}
/* las categorías son pocas: en el teléfono bajan de línea en vez de deslizarse, así se ven todas (4/11, Pablo) */
.vbh-bcn__filtros > .vbh-pildoras{flex-wrap:wrap;overflow:visible}
.vbh-bcn__barrios{position:relative;display:flex;align-items:flex-start;gap:14px;min-width:0}
.vbh-bcn__barrios .vbh-pildoras{flex:1;min-width:0}
/* los barrios siguen deslizándose: un degradado en cada borde con más barrios y la flecha dicen que hay más (barcelona.js).
   Con foco de teclado adentro, sin degradado, como la fila de reels: que el foco se vea entero */
.vbh-bcn__barrios.is-desborda.is-inicio:not(.is-final) .vbh-pildoras:not(:has(:focus-visible)){-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 72px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 72px),transparent)}
.vbh-bcn__barrios.is-desborda:not(.is-inicio):not(.is-final) .vbh-pildoras:not(:has(:focus-visible)){-webkit-mask-image:linear-gradient(to right,transparent,#000 12px,#000 calc(100% - 72px),transparent);mask-image:linear-gradient(to right,transparent,#000 12px,#000 calc(100% - 72px),transparent)}
.vbh-bcn__barrios.is-desborda.is-final:not(.is-inicio) .vbh-pildoras:not(:has(:focus-visible)){-webkit-mask-image:linear-gradient(to right,transparent,#000 12px);mask-image:linear-gradient(to right,transparent,#000 12px)}
.vbh-bcn__mas{position:absolute;right:0;top:0;display:grid;place-items:center;width:var(--vbh-tap);height:var(--vbh-tap);padding:0;border:1.5px solid var(--vbh-linea-fuerte);border-radius:50%;background:var(--vbh-crema);color:var(--vbh-espresso);box-shadow:0 0 0 6px var(--vbh-fondo);cursor:pointer;transition:border-color .2s} /* la sombra tapa lo que asoma de la fila a su derecha */
@media (hover:hover){.vbh-bcn__mas:hover{border-color:var(--vbh-espresso)}} /* en el teléfono el hover quedaba pegado después del toque */
.vbh-bcn__mas[hidden]{display:none}
.vbh-bcn__mas[aria-disabled]{color:rgb(42 28 22 / .35);border-color:var(--vbh-linea);cursor:default} /* al final de la fila, con el foco del teclado: fondo opaco, solo se apaga la flecha */
/* con foco de teclado (sin degradado), los 6 px de la fila que asoman a la derecha de la flecha no se ven */
.vbh-bcn__barrios.is-desborda:not(.is-final) .vbh-pildoras:has(:focus-visible){-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 6px),transparent 0);mask-image:linear-gradient(to right,#000 calc(100% - 6px),transparent 0)}
/* el WhatsApp flotante se aparta mientras se cruza con la fila de barrios (barcelona.js) */
.vbh-wa.is-apartado{opacity:0;visibility:hidden;transition:opacity .2s,visibility 0s .2s}
.vbh-bcn__barrios-t{flex:none;display:flex;align-items:center;min-height:var(--vbh-tap);color:var(--vbh-texto-2);font-size:var(--vbh-label);font-weight:500;letter-spacing:var(--vbh-ls-label);text-transform:uppercase}
.vbh-pildora--barrio{--vbh-pildora-borde:transparent;background:var(--vbh-arena)}
.vbh-bcn__bloque{padding-block:clamp(28px,4vw,48px)}
.vbh-bcn__bloque:last-of-type{padding-bottom:var(--vbh-bloque)}
.vbh-bcn__cuenta{margin-bottom:20px;color:var(--vbh-texto-2)}

/* destacado editorial: el lugar más reciente */
.vbh-dest{display:grid;border-radius:var(--vbh-r-card);overflow:hidden}
.vbh-dest__foto{display:block;aspect-ratio:var(--vbh-ar-vertical);overflow:hidden;background:var(--vbh-tostado)}
.vbh-dest__foto img{width:100%;height:100%;object-fit:cover;transition:transform var(--vbh-dur-hover) var(--vbh-curva)}
@media (hover:hover) and (pointer:fine){ .vbh-dest:hover .vbh-dest__foto img{transform:scale(1.03)} }
.vbh-dest__txt{display:grid;gap:16px;align-content:center;justify-items:start;padding:clamp(24px,4vw,56px)}
.vbh-dest__t{font-size:clamp(1.75rem,1.2rem + 2.4vw,3.25rem);line-height:1}
.vbh-dest__t a{color:inherit;text-decoration:none}
.vbh-dest__t a:hover{text-decoration:underline;text-decoration-color:var(--vbh-terracota);text-decoration-thickness:3px;text-underline-offset:6px}
.vbh-dest__entradilla{max-width:46ch}
.vbh-dest__meta{display:flex;flex-wrap:wrap;gap:4px 16px;color:var(--vbh-texto-2);font-size:var(--vbh-small)}
.vbh-dest__vistas{display:inline-flex;align-items:center;gap:6px;color:var(--vbh-texto);font-weight:600}
.vbh-dest .vbh-botones{margin-top:8px}
@media (min-width:768px){
  .vbh-dest{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .vbh-dest--sin-foto{grid-template-columns:minmax(0,1fr)}
}

/* ===== ficha de lugar (single-lugar.php) ===== */
.vbh-lugar__colab{padding-block:12px}
.vbh-lugar__colab .vbh-sello{white-space:normal}
.vbh-lugar__top{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;padding-block:clamp(16px,3vw,40px) clamp(32px,5vw,64px)}
.vbh-lugar__cab{display:grid;min-width:0;gap:14px;align-content:center;justify-items:start}
.vbh-lugar__cab .vbh-migas{margin-bottom:-8px}
.vbh-lugar__h1{font-size:clamp(2.25rem,1.4rem + 3.4vw,4.25rem);line-height:var(--vbh-lh-titulo)}
.vbh-lugar__cab .vbh-lead{max-width:36ch}
.vbh-lugar__media{--vbh-fachada-ar:var(--vbh-ar-vertical);width:100%}
@media (min-width:768px){ .vbh-lugar__top--media{grid-template-columns:minmax(0,1fr) minmax(0,320px);align-items:center;gap:40px} }
@media (min-width:1025px){ .vbh-lugar__top--media{grid-template-columns:minmax(0,1fr) 400px;gap:72px} }

.vbh-lugar__cuerpo{display:grid;gap:40px;padding-bottom:clamp(48px,7vw,96px)}
.vbh-lugar__texto{display:grid;gap:clamp(32px,5vw,56px);max-width:var(--vbh-lectura);align-content:start}
.vbh-lugar__bloque{display:grid;gap:16px}
.vbh-lugar__datos{display:grid;gap:20px;align-self:start;max-width:480px;padding:clamp(24px,3vw,32px);border-radius:var(--vbh-r-card)}
@media (min-width:1025px){
  .vbh-lugar__cuerpo--datos{grid-template-columns:minmax(0,var(--vbh-lectura)) 360px;justify-content:space-between;align-items:start;gap:64px}
  .vbh-lugar__datos{position:sticky;top:calc(64px + 24px)}
}
.vbh-lugar__dl{display:grid;gap:16px;margin:0}
.vbh-lugar__dl > div{display:grid;gap:2px}
.vbh-lugar__dl dt{color:var(--vbh-texto-2);font-size:var(--vbh-label);font-weight:500;letter-spacing:var(--vbh-ls-label);text-transform:uppercase}
.vbh-lugar__dl dd{margin:0;font-size:1rem;line-height:1.5}
.vbh-lugar__dl dd a{display:inline-flex;align-items:center;min-height:var(--vbh-tap);margin-block:-12px} /* el barrio: 48 px para tocarlo sin abrir el renglón */
.vbh-lugar__codigo{display:inline-block;max-width:100%;vertical-align:bottom;font-weight:600;white-space:nowrap;overflow-x:auto;-webkit-user-select:all;user-select:all} /* el código de descuento (29/10): un texto, no un enlace; se selecciona entero de un toque para copiarlo. Nunca se parte (partido, «…HOY1 / 0» se copia mal a mano): si no entra, como con la letra grande en 320 px, se desliza dentro de la ficha */
.vbh-lugar__bloque .vbh-mapa{margin-top:8px}
/* cierre: un lugar relacionado, después de la newsletter */
.vbh-lugar__rel{padding-block:clamp(48px,7vw,96px)}
/* su cierre lleva un solo lugar relacionado: la tesela va centrada, no sola contra el borde izquierdo */
.vbh-lugar__rel .vbh-trio{justify-content:center}
@media (min-width:768px){ .vbh-lugar__rel .vbh-trio{grid-template-columns:minmax(0,280px)} }

/* ===== fachada del reel (parts/fachada-reel.php): enlace a instagram.com, sin embed ===== */
.vbh-fachada__enlace,.vbh-fachada--foto{position:relative;display:block;aspect-ratio:var(--vbh-fachada-ar,9/16);border-radius:var(--vbh-r-card);overflow:hidden;isolation:isolate;background:var(--vbh-tostado);color:var(--vbh-crema);text-decoration:none}
.vbh-fachada__enlace:focus-visible{border-radius:var(--vbh-r-card)}
.vbh-fachada__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform var(--vbh-dur-hover) var(--vbh-curva)}
@media (hover:hover) and (pointer:fine){
  .vbh-fachada__enlace:hover .vbh-fachada__img{transform:scale(1.03)}
  .vbh-fachada__enlace:hover .vbh-fachada__btn{background:var(--vbh-crema);color:var(--vbh-espresso)}
}
.vbh-fachada__sin-foto{position:absolute;inset:0;display:grid;place-items:center;padding-bottom:20%}
.vbh-fachada__sin-foto img{width:72px;height:72px;opacity:.45}
.vbh-fachada__velo{position:absolute;inset:0;background:linear-gradient(to top,rgb(42 28 22 / .62),rgb(42 28 22 / .42) 26%,transparent 46%)}
.vbh-fachada__pie{position:absolute;inset:auto 16px 16px;z-index:1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}

/* ===== mapa con fachada (parts/mapa.php): OpenStreetMap recién al pulsar ===== */
.vbh-mapa{display:grid;gap:16px}
.vbh-mapa__lienzo{position:relative;width:100%;aspect-ratio:1;border-radius:var(--vbh-r-card);overflow:hidden;background:var(--vbh-arena)}
@media (min-width:768px){ .vbh-mapa__lienzo{aspect-ratio:16/7} }
.vbh-mapa__fachada{position:absolute;inset:0;isolation:isolate;display:grid;place-content:center;justify-items:center;gap:12px;padding:24px;color:var(--vbh-espresso);text-align:center}
.vbh-mapa__fachada::before{content:"";position:absolute;inset:0;z-index:-1;background:url(../../img/vivir-barcelona-hoy-simbolo-espresso.svg) 50% 50% / 44px 44px repeat;opacity:.06}
.vbh-mapa__pin{color:var(--vbh-terracota-prof)}
.vbh-mapa__aviso{max-width:36ch;font-size:var(--vbh-min);line-height:1.5}
.vbh-mapa__iframe{position:absolute;inset:0;width:100%;height:100%;border:0}