/*
 * Vivir Barcelona Hoy · vbh.css (base de todas las páginas)
 * Tokens v1.1 (§7.1) · base · superficies · botones, enlaces, píldoras y sellos ·
 * cabecera y pie · formularios · estados vacíos y paginación.
 * Lo de cada sección va en assets/css/secciones/{seccion}.css.
 * Reglas de marca: Poppins sola · titulares en minúscula con una palabra acento ·
 * nunca texto terracota sobre crema · toques de 48 px · foco visible.
 */

@font-face{font-family:"Poppins";src:url(../fonts/poppins-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url(../fonts/poppins-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url(../fonts/poppins-600.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url(../fonts/poppins-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}

/* ===== tokens v1.1 (nombres y valores de la clienta; «(+)» = agregado para portar la maqueta) ===== */
:root{
  --vbh-terracota:#E27D61; --vbh-crema:#EBE4D9; --vbh-espresso:#2A1C16; --vbh-terracota-prof:#C9603F;
  --vbh-rubor:#F3DDD1; --vbh-tostado:#3B2820; --vbh-arcilla:#D9A48F; --vbh-arena:#E0D2C3;
  --vbh-tinta:#9F4529; --vbh-piedra:#6E5D53; --vbh-blanco:#FFFFFF;
  /* (+) transparencias */
  --vbh-linea:rgb(42 28 22 / .12); --vbh-linea-fuerte:rgb(42 28 22 / .22); --vbh-linea-osc:rgb(235 228 217 / .18);
  --vbh-crema-90:rgb(235 228 217 / .9); --vbh-velo:rgb(42 28 22 / .62);
  --vbh-velo-pie:linear-gradient(to top, rgb(42 28 22 / .65), rgb(42 28 22 / .45) 34%, transparent 62%);
  --vbh-velo-ventana:linear-gradient(to bottom, rgb(42 28 22 / .5), transparent 18%, transparent 70%, rgb(42 28 22 / .62));
  --vbh-fondo-modal:rgb(42 28 22 / .88);
  /* (+) solo para el SVG de la historia (aria-hidden), nunca para texto ni UI */
  --vbh-deco-trama:#E6DED2; --vbh-deco-trama-linea:#D3C6B5; --vbh-deco-trama-flor:#D8CBBA;
  --vbh-deco-patio:#E9C3B1; --vbh-deco-vivir:#E9C6B5; --vbh-deco-barcelona:#D46C4F;
  /* tipografía */
  --vbh-font:'Poppins', Helvetica, Arial, sans-serif;
  --vbh-h1:clamp(2.75rem, 1.6rem + 5vw, 5.5rem); --vbh-h2:clamp(2rem, 1.3rem + 3vw, 3.5rem);
  --vbh-h3:clamp(1.5rem, 1.1rem + 1.2vw, 2rem); --vbh-stat:clamp(3rem, 2rem + 4vw, 5.5rem);
  --vbh-sub:1.25rem; --vbh-lead:clamp(1.25rem, 1rem + .8vw, 1.6rem); --vbh-h-tarjeta:1.25rem;
  --vbh-body:1.125rem; --vbh-small:.9375rem; --vbh-label:.8125rem; --vbh-min:.875rem;
  --vbh-lh-titulo:.95; --vbh-lh-tarjeta:1.15; --vbh-lh-texto:1.6;
  --vbh-ls-titulo:-.04em; --vbh-ls-cifra:-.05em; --vbh-ls-label:.28em; --vbh-ls-pildora:.2em;
  /* espacio, forma y maquetación */
  --vbh-s1:8px; --vbh-s2:16px; --vbh-s3:24px; --vbh-s4:32px; --vbh-s6:48px; --vbh-s8:64px; --vbh-s12:96px; --vbh-s16:128px;
  --vbh-r-card:24px; --vbh-r-img:16px; --vbh-r-pill:999px;
  --vbh-ar-reel:9/16; --vbh-ar-vertical:4/5; --vbh-ar-apaisada:4/3; --vbh-ar-portada:16/11;
  --vbh-max:1200px; --vbh-lectura:720px; --vbh-medianil:24px; --vbh-gut:20px; --vbh-bloque:80px;
  --vbh-util:0px; --vbh-cab:64px; --vbh-logo-h:28px;
  --vbh-tap:48px; --vbh-wa:56px; --vbh-foco-ancho:3px; --vbh-foco-sep:2px;
  --vbh-curva:cubic-bezier(.16,1,.3,1); --vbh-dur-ui:.25s; --vbh-dur-hover:.3s; --vbh-dur-panel:.45s;
  --vbh-z-wa:40; --vbh-z-cab:50; --vbh-z-menu:60;
}
@media (min-width:768px){ :root{ --vbh-gut:32px } }
@media (min-width:1025px){ :root{ --vbh-gut:48px; --vbh-bloque:128px; --vbh-util:36px; --vbh-cab:84px; --vbh-logo-h:36px } }
/* superficies: cada bloque declara su fondo y el texto se acomoda solo (contraste del manual, cap. 04) */
:root, .vbh-sup-crema, .vbh-sup-rubor{ --vbh-fondo:var(--vbh-crema); --vbh-texto:var(--vbh-espresso); --vbh-texto-2:var(--vbh-piedra);
  --vbh-enlace:var(--vbh-tinta); --vbh-acc-color:var(--vbh-terracota-prof); --vbh-acc-raya:transparent; --vbh-sep:var(--vbh-linea); --vbh-foco:var(--vbh-espresso); }
.vbh-sup-rubor{ --vbh-fondo:var(--vbh-rubor) }
.vbh-sup-espresso, .vbh-sup-tostado, .vbh-sup-foto{ --vbh-fondo:var(--vbh-espresso); --vbh-texto:var(--vbh-crema); --vbh-texto-2:rgb(235 228 217 / .78);
  --vbh-enlace:var(--vbh-crema); --vbh-acc-color:var(--vbh-terracota); --vbh-acc-raya:transparent; --vbh-sep:var(--vbh-linea-osc); --vbh-foco:var(--vbh-crema); }
.vbh-sup-tostado{ --vbh-fondo:var(--vbh-tostado) }
.vbh-sup-terracota{ --vbh-fondo:var(--vbh-terracota); --vbh-texto:var(--vbh-espresso); --vbh-texto-2:var(--vbh-espresso);
  --vbh-enlace:var(--vbh-espresso); --vbh-acc-color:var(--vbh-espresso); --vbh-acc-raya:var(--vbh-crema); --vbh-sep:var(--vbh-linea-fuerte); --vbh-foco:var(--vbh-espresso); }
/* arcilla: la tarjeta de vivir de la portada. En rubor se perdía con el fondo crema y Alex pidió «otra tonalidad, un poco
   más oscura» (3/11). El manual le da a la arcilla otro uso (datos secundarios en gráficos): es una excepción a su pedido.
   Como la terracota: texto espresso (7,57:1) y la palabra acento con raya crema, más gruesa porque sobre arcilla tiene
   menos contraste; el terracota profundo sobre arcilla no se lee (1,85:1) */
.vbh-sup-arcilla{ --vbh-fondo:var(--vbh-arcilla); --vbh-texto:var(--vbh-espresso); --vbh-texto-2:var(--vbh-espresso);
  --vbh-enlace:var(--vbh-espresso); --vbh-acc-color:var(--vbh-espresso); --vbh-acc-raya:var(--vbh-crema); --vbh-sep:var(--vbh-linea-fuerte); --vbh-foco:var(--vbh-espresso); }
.vbh-sup-arcilla .vbh-acc{ text-decoration-thickness:.14em }
.vbh-sup-crema, .vbh-sup-rubor, .vbh-sup-espresso, .vbh-sup-tostado, .vbh-sup-terracota, .vbh-sup-arcilla{ background:var(--vbh-fondo); color:var(--vbh-texto) }
.vbh-acc{ color:var(--vbh-acc-color); font-style:normal; text-decoration:underline var(--vbh-acc-raya) .09em; text-underline-offset:.1em }

/* ===== base (de la clienta + reset de la maqueta) ===== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--vbh-cab) + 16px)}
body{margin:0;background:var(--vbh-fondo);color:var(--vbh-texto);font-family:var(--vbh-font);font-size:var(--vbh-body);line-height:var(--vbh-lh-texto);-webkit-font-smoothing:antialiased;overflow-x:clip}
[hidden]{display:none !important}
img,video,svg{display:block;max-width:100%}
img{height:auto}
p{margin:0}
h1,h2,h3,h4,h5,h6{margin:0;font-family:var(--vbh-font);font-weight:700;line-height:var(--vbh-lh-titulo)}
h1,h2,h3{text-transform:lowercase;letter-spacing:var(--vbh-ls-titulo);text-wrap:balance;overflow-wrap:anywhere} /* una palabra larga se parte antes de abrir scroll horizontal */
.vbh-romano{text-transform:none} /* «Isabel II», no «isabel ii» (vbh_romanos, 4/11) */
h1{font-size:var(--vbh-h1)} h2{font-size:var(--vbh-h2)} h3{font-size:var(--vbh-h3)}
a{color:var(--vbh-enlace);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{text-decoration-thickness:2px}
a[href^="mailto:"]{overflow-wrap:anywhere} /* un correo no tiene dónde partirse: con la letra del navegador grande en 320 px abría scroll horizontal (el pie lo vuelve a «normal» en escritorio) */
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:var(--vbh-foco-ancho) solid var(--vbh-foco);outline-offset:var(--vbh-foco-sep);border-radius:4px}
.vbh-main:focus{outline:none}

/* ===== utilidades y maquetación ===== */
.vbh-sr{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.vbh-saltar{position:fixed;left:16px;top:-120px;z-index:100;display:inline-flex;align-items:center;min-height:var(--vbh-tap);padding:0 20px;border-radius:var(--vbh-r-pill);background:var(--vbh-espresso);color:var(--vbh-crema);font-weight:600;text-decoration:none}
.vbh-saltar:focus{top:16px;outline-color:var(--vbh-terracota)}
.vbh-contenedor{max-width:calc(var(--vbh-max) + var(--vbh-gut) * 2);margin-inline:auto;padding-inline:var(--vbh-gut)}
.vbh-lectura{max-width:var(--vbh-lectura);margin-inline:auto}
.vbh-contenedor.vbh-lectura{max-width:calc(var(--vbh-lectura) + var(--vbh-gut) * 2)}
.vbh-seccion{padding-block:var(--vbh-bloque)}
.vbh-seccion__cab{display:grid;gap:14px;margin-bottom:clamp(28px,4vw,48px)}
.vbh-seccion__cab--fila{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:20px}
.vbh-pagina__cab{display:grid;gap:16px;margin-bottom:clamp(32px,5vw,56px)}
.vbh-pila{display:grid;gap:24px}
.vbh-pila:not(:last-child){margin-bottom:40px}
.vbh-botones{display:flex;flex-wrap:wrap;gap:12px}

/* tipografía */
.vbh-h1{font-size:var(--vbh-h1)} .vbh-h2{font-size:var(--vbh-h2)} .vbh-h3{font-size:var(--vbh-h3)}
.vbh-label{font-size:var(--vbh-label);font-weight:500;text-transform:uppercase;letter-spacing:var(--vbh-ls-label);line-height:1.4}
.vbh-lead{font-size:var(--vbh-lead);line-height:1.4;font-weight:500;letter-spacing:-.01em}
.vbh-small{font-size:var(--vbh-small)}
.vbh-texto-2{color:var(--vbh-texto-2)}

/* texto largo: the_content() de artículos, fichas y legales, y el Text Editor de Elementor */
.vbh-prosa{font-size:var(--vbh-body)}
.vbh-prosa > * + *{margin-top:1.1em}
.vbh-prosa h2{font-size:var(--vbh-h3);margin-top:1.8em}
.vbh-prosa h3{font-size:1.5rem;margin-top:1.6em}
.vbh-prosa h4{font-size:var(--vbh-sub);margin-top:1.4em}
.vbh-prosa ul,.vbh-prosa ol{padding-left:1.3em}
.vbh-prosa li + li{margin-top:.4em}
.vbh-prosa li::marker{color:var(--vbh-terracota-prof)}
.vbh-prosa blockquote::before{content:"";display:block;width:28px;height:3px;margin-bottom:14px;border-radius:2px;background:var(--vbh-terracota)}
.vbh-prosa blockquote{margin-inline:0;padding:0;color:var(--vbh-acc-color);font-size:clamp(1.5rem,1.2rem + .8vw,1.75rem);font-weight:600;line-height:1.3;letter-spacing:-.02em}
.vbh-prosa blockquote cite{display:block;margin-top:12px;font-size:var(--vbh-small);font-style:normal;font-weight:500;color:var(--vbh-texto-2);letter-spacing:0}
.vbh-prosa img,.vbh-prosa video,.vbh-prosa iframe{border-radius:var(--vbh-r-img)}
.vbh-prosa figure{margin-inline:0}
.vbh-prosa figcaption{margin-top:8px;font-size:var(--vbh-small);color:var(--vbh-texto-2)}
.vbh-prosa hr{border:0;border-top:1px solid var(--vbh-sep);margin-block:2em}
.vbh-prosa table{width:100%;border-collapse:collapse;font-size:var(--vbh-small)}
.vbh-prosa th,.vbh-prosa td{padding:10px 12px;border-bottom:1px solid var(--vbh-sep);text-align:left}
.elementor-widget-text-editor p + p{margin-top:1em}
/* Elementor trae «.elementor a{text-decoration:none}»: adentro de sus páginas, los enlaces de texto vuelven a ir subrayados
   (solo la línea y el grosor: el color al pasar el cursor sigue saliendo de .vbh-enlace:hover) */
.elementor :is(.vbh-enlace,.fluentform a,.vbh-prosa a){text-decoration-line:underline}
.elementor .vbh-enlace{text-decoration-thickness:2px}

/* ===== botones, enlaces y raya ===== */
.vbh-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--vbh-tap);padding:0 24px;border-radius:var(--vbh-r-pill);border:2px solid transparent;font-family:var(--vbh-font);font-size:1rem;font-weight:600;line-height:1.2;text-transform:lowercase;text-decoration:none;text-align:center;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color var(--vbh-dur-ui) var(--vbh-curva),color var(--vbh-dur-ui) var(--vbh-curva),border-color var(--vbh-dur-ui) var(--vbh-curva),transform var(--vbh-dur-ui) var(--vbh-curva)}
.vbh-btn:active{transform:scale(.97)}
.vbh-btn--prim{background:var(--vbh-terracota);color:var(--vbh-espresso)}
.vbh-btn--prim:hover{background:var(--vbh-espresso);color:var(--vbh-crema)}
.vbh-sup-espresso .vbh-btn--prim:hover,.vbh-sup-tostado .vbh-btn--prim:hover,.vbh-sup-foto .vbh-btn--prim:hover{background:var(--vbh-crema);color:var(--vbh-espresso)}
.vbh-btn--cont{background:transparent;color:var(--vbh-texto);border-color:currentColor}
.vbh-btn--cont:hover{background:var(--vbh-texto);color:var(--vbh-fondo);border-color:var(--vbh-texto)}
.vbh-btn--esp{background:var(--vbh-espresso);color:var(--vbh-crema)}
.vbh-btn--esp:hover{background:var(--vbh-tostado)}
.vbh-enlace{display:inline-flex;align-items:center;min-height:var(--vbh-tap);color:inherit;font-weight:600;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.vbh-enlace:hover{text-decoration-color:var(--vbh-terracota)}
.vbh-raya{display:inline-block;width:28px;height:3px;background:var(--vbh-terracota);border-radius:2px;vertical-align:middle}

/* ===== píldoras (filtros y temas) ===== */
.vbh-pildoras{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;padding:6px;margin:-6px} /* 6 px de aire (con margen negativo): la fila con scroll no recorta el anillo de foco */
.vbh-pildoras::-webkit-scrollbar{display:none}
/* con mouse no hay forma cómoda de deslizar la fila: bajan de línea (desde 768 px; en una ventana más angosta se deslizan como en el teléfono) */
@media (min-width:768px) and (hover:hover) and (pointer:fine), (min-width:1025px){ .vbh-pildoras{flex-wrap:wrap;overflow:visible} }
.vbh-pildora{--vbh-pildora-borde:var(--vbh-linea-fuerte);flex:none;display:inline-flex;align-items:center;min-height:var(--vbh-tap);padding:0 18px;border-radius:var(--vbh-r-pill);border:1.5px solid var(--vbh-pildora-borde);background:transparent;color:var(--vbh-texto);font-size:var(--vbh-label);font-weight:500;text-transform:uppercase;letter-spacing:var(--vbh-ls-pildora);text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color .2s,border-color .2s,color .2s}
@media (hover:hover){.vbh-pildora:hover{border-color:var(--vbh-texto)}} /* en el teléfono el hover quedaba pegado después del toque */
.vbh-pildora[aria-current],.vbh-pildora[aria-pressed="true"]{background:var(--vbh-texto);color:var(--vbh-fondo);border-color:var(--vbh-texto)}
.vbh-sup-espresso .vbh-pildora,.vbh-sup-tostado .vbh-pildora{--vbh-pildora-borde:rgb(235 228 217 / .28)}

/* ===== sellos, datos y folio ===== */
.vbh-sello{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:var(--vbh-r-pill);border:1.5px solid transparent;background:var(--vbh-espresso);color:var(--vbh-crema);font-size:var(--vbh-label);font-weight:500;line-height:1.3;letter-spacing:var(--vbh-ls-pildora);text-transform:uppercase;white-space:nowrap}
.vbh-sello--vendido{background:var(--vbh-espresso);color:var(--vbh-crema)}
.vbh-sello--reservado{background:var(--vbh-terracota);color:var(--vbh-espresso)}
.vbh-sello--nuevo{background:var(--vbh-rubor);color:var(--vbh-espresso)}
.vbh-sello--ref{background:transparent;color:var(--vbh-texto);border-color:currentColor}
.vbh-sello--colab{background:var(--vbh-rubor);color:var(--vbh-espresso);border-color:var(--vbh-linea-fuerte)}
.vbh-datos{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.vbh-datos li{padding:6px 12px;border-radius:var(--vbh-r-pill);background:var(--vbh-crema);color:var(--vbh-espresso);font-size:var(--vbh-small)}
.vbh-folio{display:flex;align-items:center;gap:14px;font-size:var(--vbh-label);font-weight:500;letter-spacing:var(--vbh-ls-label);text-transform:uppercase}
.vbh-folio__n{font-variant-numeric:tabular-nums}
.vbh-folio .vbh-raya{background:currentColor}

/* ===== barras tipo stories y botón de pausa (los usan la galería, el carrusel y la ventana) =====
   Marcado: <div class="vbh-barras" style="--vbh-barra-dur:4.5s"><i class="is-activa"><b></b></i><i><b></b></i>…</div>
   El JS de cada sección pasa is-activa / is-vista y escucha animationend en el <b>. */
.vbh-barras{--vbh-barra-dur:4.5s;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px}
.vbh-barras i{display:block;height:3px;border-radius:2px;background:rgb(235 228 217 / .35);overflow:hidden}
.vbh-barras b{display:block;height:100%;background:var(--vbh-crema);transform:scaleX(0);transform-origin:left}
.vbh-barras .is-vista b{transform:scaleX(1)}
.vbh-barras .is-activa b{animation:vbh-llenar var(--vbh-barra-dur) linear forwards}
.is-pausado .vbh-barras .is-activa b{animation-play-state:paused}
@keyframes vbh-llenar{to{transform:scaleX(1)}}
@keyframes vbh-acercar{from{transform:scale(1.07)}to{transform:scale(1)}}
.vbh-pausa{display:inline-grid;place-items:center;width:var(--vbh-tap);height:var(--vbh-tap);padding:0;border:0;border-radius:50%;background:var(--vbh-velo);color:var(--vbh-crema);cursor:pointer}
.vbh-pausa--texto{display:inline-flex;align-items:center;gap:8px;width:auto;padding:0 16px;border-radius:var(--vbh-r-pill);border:1.5px solid currentColor;background:none;color:inherit;font-size:var(--vbh-small);font-weight:600}
.vbh-pausa svg + svg,.vbh-pausa[aria-pressed="true"] svg:first-of-type{display:none}
.vbh-pausa[aria-pressed="true"] svg + svg{display:block}
@media (prefers-reduced-motion:reduce){
  .vbh-barras .is-activa b{animation:none;transform:scaleX(1)}
  .vbh-pausa{display:none}
}

/* ===== cabecera (maqueta CSS 83–113) ===== */
.vbh-cab{position:fixed;inset:0 0 auto 0;z-index:var(--vbh-z-cab);transition:transform .35s var(--vbh-curva)}
.admin-bar .vbh-cab{top:32px}
.vbh-cab-hueco{height:calc(var(--vbh-util) + var(--vbh-cab))}
.vbh-cab__util{height:var(--vbh-util);overflow:hidden;font-size:var(--vbh-small)}
.vbh-cab__util a{color:var(--vbh-crema);text-decoration:none}
.vbh-cab__util a:hover{text-decoration:underline}
.vbh-cab__util-in{height:100%;display:flex;align-items:center;justify-content:space-between;gap:16px}
.vbh-puntos{display:flex;flex-wrap:wrap;align-items:center;margin:0;padding:0;list-style:none}
.vbh-puntos > li:not([hidden]) ~ li::before{content:"·";margin-inline:.5em}
/* La barra de arriba con TikTok y YouTube cargados (27/10, ronda 5). En un renglón siempre (si no, su alto fijo de
   36 px la cortaba). Con la fecha más larga («hoy, miércoles 30 de septiembre») y IG · TT · YT pide unos 50 rem:
   799 px con la letra del navegador en 16 px, pero 995 con 20 px, y entre 1025 y 1090 px de ventana no entraba. Si el
   ancho útil de la barra no llega a 51 rem, la fecha (viene de la maqueta) no se muestra; el resto queda entero. Con
   la letra normal la fecha se ve en todos los anchos. Lo mide revisar.js de 1025 a 1920 px con la letra en 16, 18 y 20. */
.vbh-cab__util .vbh-puntos{flex-wrap:nowrap;white-space:nowrap}
.vbh-cab__util-in{container:vbh-util / inline-size}
@container vbh-util (max-width:50.99rem){
  .vbh-cab__util [data-vbh-fecha]{display:none}
  .vbh-cab__util .vbh-puntos > [data-vbh-fecha] + li::before{content:none} /* sin el «·» de delante de «IG» */
}
.vbh-cab__main{height:var(--vbh-cab);background:var(--vbh-crema);border-bottom:1px solid transparent;transition:border-color .35s}
.vbh-cab__main-in{height:100%;display:flex;align-items:center;gap:28px;transition:transform .35s var(--vbh-curva)}
.vbh-cab__logo{display:block;flex:none;margin-right:auto}
.vbh-cab__logo img{height:var(--vbh-logo-h);width:auto}
.vbh-cab__lista{display:flex;gap:18px;margin:0;padding:0;font-size:1rem;list-style:none} /* 16 px y 18 de hueco desde el 3/11: con «internacional» son 7 entradas (la medida, más abajo) */
.vbh-cab__lista a{display:block;padding-block:6px;border-bottom:2px solid transparent;color:var(--vbh-espresso);font-weight:500;text-decoration:none;text-transform:lowercase;white-space:nowrap} /* «quiénes somos» nunca en dos renglones */
.vbh-cab__lista a:hover,
.vbh-cab__lista .current-menu-item > a,
.vbh-cab__lista .current-menu-ancestor > a,
.vbh-cab__lista .vbh-actual > a{border-bottom-color:var(--vbh-terracota)}
/* Submenú (3/11, «internacional» › «argentina»): se abre con el ratón o con el teclado (focus-within). En una tableta
   sin ratón, el toque lleva a /internacional/, que tiene los países como píldoras. */
.vbh-cab__lista > li{position:relative}
.vbh-cab__lista .menu-item-has-children > a{display:flex;align-items:center;gap:6px}
.vbh-cab__lista .menu-item-has-children > a::after{content:"";width:6px;height:6px;margin-top:-3px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
.vbh-cab__lista .sub-menu{position:absolute;top:100%;left:-18px;z-index:1;min-width:180px;margin:0;padding:8px 0;list-style:none;background:var(--vbh-crema);border:1px solid var(--vbh-linea);border-radius:var(--vbh-r-img);box-shadow:0 12px 32px rgb(42 28 22 / .12);opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity .2s,transform .2s,visibility 0s .2s}
.vbh-cab__lista li:hover > .sub-menu,.vbh-cab__lista li:focus-within > .sub-menu{opacity:1;visibility:visible;transform:none;transition:opacity .2s,transform .2s}
.vbh-cab__lista .sub-menu a{padding:10px 18px;border-bottom:0}
.vbh-cab__lista .sub-menu a:hover,.vbh-cab__lista .sub-menu .current-menu-item > a{color:var(--vbh-tinta)}
@media (prefers-reduced-motion:reduce){ .vbh-cab__lista .sub-menu{transform:none} }
.vbh-menu-movil__lista .sub-menu{margin:0 0 4px;padding:0 0 0 .9em;list-style:none}
.vbh-menu-movil__lista .sub-menu a{font-size:1.5rem;font-weight:500;letter-spacing:-.02em}
.vbh-cab__menu-btn{display:none;align-items:center;gap:10px;min-height:var(--vbh-tap);padding:0 4px;border:0;background:none;color:var(--vbh-espresso);font-weight:600;text-transform:lowercase;cursor:pointer}
.vbh-cab__menu-btn i{display:grid;gap:5px;width:22px}
.vbh-cab__menu-btn i::before,.vbh-cab__menu-btn i::after{content:"";height:2px;border-radius:2px;background:currentColor}
/* compacta: la barra queda en 64 px visibles subiendo la cabecera y bajando la mitad el contenido, sin animar el alto */
.vbh-cab.is-compacta{transform:translateY(calc((var(--vbh-util) + var(--vbh-cab) - 64px) * -1))}
.vbh-cab.is-compacta .vbh-cab__main{border-bottom-color:var(--vbh-linea)}
.vbh-cab.is-compacta .vbh-cab__main-in{transform:translateY(calc((var(--vbh-cab) - 64px) / 2))}
@media (max-width:1024px){ .vbh-cab__util{display:none} }
/* Teléfonos chicos (27/10, ronda 5). El logo (220 px) + el hueco (28) + el botón «menú» (94 px; 107 con la letra del
   navegador en 20 px) + los medianiles (2 × 20) piden 382 px: a 360 el botón terminaba en 361 y a 320 quedaba 41 px
   afuera (la cabecera es fija y no genera scroll, por eso no se veía). Hasta 1024 px (siempre con hamburguesa) el logo
   se achica lo justo, sin deformarse, para que el botón y el medianil entren; por debajo de 390 px el hueco pasa a
   16 px. Con la letra normal, a 375 px o más el logo sigue entero; a 390 y 414 todo queda como antes. Lo mide
   revisar.js («cabecera en teléfonos») a 320, 340, 360, 375, 390 y 414 px, con la letra en 16 y 20 px. */
@media (max-width:1024px){
  .vbh-cab__logo{flex:0 1 auto;min-width:0}
  .vbh-cab__logo img{width:calc(var(--vbh-logo-h) * 1059 / 135);height:auto;max-width:100%} /* 1059 × 135: el viewBox del SVG */
}
@media (max-width:389.98px){ .vbh-cab__main-in{gap:16px} }
/* El menú de escritorio entra entero desde 1280 px. Medido el 26/10 con las 6 etiquetas del hosting (vivir · barcelona ·
   hoy · colaboraciones · quiénes somos · contacto) y el botón «WhatsApp», en Poppins 500 de 18 px: logo 282 + menú 675
   (etiquetas 525 + 5 huecos de 30) + botón 134 + 2 huecos de 28 = 1147 px de ancho útil, o sea una ventana de 1243 px
   (con los medianiles de 48). Con 1025 px el menú se partía en dos renglones y el botón se salía. Hasta 1279 px va la
   hamburguesa: desde 1280 sobran 37 px. Si cambian las etiquetas, se vuelve a medir (revisar.js, «cabecera»).
   3/11: con «internacional» (7 entradas, la flecha del submenú incluida) en 18 px y huecos de 30, el menú pedía 838 px y
   el total 1310, más que los 1200 del contenedor: no entraba en ninguna ventana. En 16 px y con huecos de 18 son unos
   693 px y el total ~1165, así que desde 1280 (1184 de ancho útil) sigue entrando. */
@media (max-width:1279px){
  .vbh-cab__nav,.vbh-cab__cta{display:none}
  .vbh-cab__menu-btn{display:inline-flex}
}
/* Con la letra del navegador más grande que la normal (Chrome «Grande» = 20 px) las etiquetas y el botón crecen, pero
   el logo, los huecos y el ancho máximo del contenedor (1200 px) no: medido el 26/10, el menú pide 1300 px y el botón
   «WhatsApp» se salía 100 px por la derecha en cualquier ventana. Por eso, además, se mira el ancho útil de la propia
   cabecera en rem: hamburguesa si es menor que 74 rem (1184 px con la letra de 16 px, o sea la misma ventana de
   1279 px de arriba). Con 18 o 20 px eso da 1332 o 1480 px, más que los 1200 del contenedor: siempre hamburguesa,
   que es lo que entra. Un navegador sin consultas de contenedor se queda con la regla de arriba. */
.vbh-cab__main-in{container-type:inline-size}
@container (max-width:73.99rem){
  .vbh-cab__nav,.vbh-cab__cta{display:none}
  .vbh-cab__menu-btn{display:inline-flex}
}
@media (max-width:782px){ .admin-bar .vbh-cab{top:46px} }
@media (max-width:600px){ .admin-bar .vbh-cab{top:0} }

/* menú móvil: a pantalla completa, role="dialog" */
.vbh-menu-movil{position:fixed;inset:0;z-index:var(--vbh-z-menu);display:flex;flex-direction:column;gap:28px;padding:24px var(--vbh-gut);overflow-y:auto;background:var(--vbh-crema);transform:translateY(-100%);visibility:hidden;transition:transform var(--vbh-dur-panel) var(--vbh-curva),visibility 0s var(--vbh-dur-panel)}
.vbh-menu-movil.is-abierto{transform:none;visibility:visible;transition:transform var(--vbh-dur-panel) var(--vbh-curva)}
.vbh-menu-movil__top{display:flex;align-items:center;justify-content:space-between}
.vbh-menu-movil__top img{height:28px;width:auto}
.vbh-menu-movil__cerrar{display:grid;place-items:center;min-width:var(--vbh-tap);min-height:var(--vbh-tap);margin-right:-12px;border:0;background:none;color:var(--vbh-espresso);cursor:pointer}
.vbh-menu-movil__lista{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.vbh-menu-movil__lista a{display:inline-block;padding-block:4px;color:var(--vbh-espresso);font-size:2.25rem;font-weight:700;line-height:1.2;letter-spacing:-.04em;text-decoration:none;text-transform:lowercase}
/* La etiqueta más larga, «colaboraciones», mide 7,47 veces el tamaño de la letra: con la letra del navegador en 20 px
   (45 px) pide 336 px y en un teléfono de 320 se cortaba (27/10, ronda 5). Se achica lo justo para entrar en el ancho
   útil; con la letra normal (36 px) entra desde 320 px y queda igual que antes. Si cambian las etiquetas, se vuelve a medir. */
.vbh-menu-movil__lista a{font-size:min(2.25rem, calc((100vw - 2 * var(--vbh-gut)) / 7.6))}
.vbh-menu-movil__lista .current-menu-item > a,
.vbh-menu-movil__lista .current-menu-ancestor > a,
.vbh-menu-movil__lista .vbh-actual > a{text-decoration:underline;text-decoration-color:var(--vbh-terracota);text-decoration-thickness:3px;text-underline-offset:8px;text-decoration-skip-ink:none}
.vbh-menu-movil > .vbh-btn{margin-top:auto}
@media (max-width:782px){ .admin-bar .vbh-menu-movil{top:46px} }

/* ===== pie (maqueta CSS 345–355) ===== */
.vbh-pie{padding-block:72px 32px}
.vbh-pie a:not(.vbh-btn){color:var(--vbh-texto)} /* los .vbh-btn conservan su color: crema sobre terracota no es apto para texto */
.vbh-pie__menu a,.vbh-pie__contacto a{text-decoration:none} /* solo ahí: los enlaces de la línea legal y de los formularios siguen subrayados */
.vbh-pie__menu a:hover,.vbh-pie__contacto a:hover{text-decoration:underline}
.vbh-pie__grid{display:grid;gap:40px}
.vbh-pie__marca{display:grid;gap:20px;align-content:start}
.vbh-pie__logo{width:190px;height:auto}
.vbh-pie__frase{font-size:1.5rem;font-weight:700;line-height:1.1;letter-spacing:-.03em;text-transform:lowercase;text-wrap:balance}
/* Los títulos del pie más grandes que sus enlaces (Alex, 3/11: «los títulos son más pequeños que el texto»): titular en
   minúscula, como el resto de la marca. */
.vbh-pie__titulo,.vbh-pie__menu > li > a{display:flex;align-items:center;min-height:var(--vbh-tap);margin:0;font-size:1.375rem;font-weight:700;line-height:1.2;letter-spacing:-.02em;text-transform:lowercase}
.vbh-redes{display:flex;flex-wrap:wrap;gap:4px 8px;margin-top:4px}
.vbh-pie .vbh-redes a{justify-content:center;min-width:var(--vbh-tap);color:var(--vbh-terracota)} /* gana a «.vbh-pie a:not(.vbh-btn)» */
.vbh-pie .vbh-redes a:first-child{margin-left:-11px} /* el ícono alineado con el texto de arriba, con el área de toque entera */
.vbh-pie .vbh-redes a:hover{color:var(--vbh-crema)}
.vbh-cab__util .vbh-cab__icono{display:inline-flex;align-items:center;color:var(--vbh-terracota)}
.vbh-cab__util .vbh-cab__icono:hover{color:var(--vbh-crema)}
.vbh-cab__util .vbh-puntos > li:has(> .vbh-cab__icono){display:flex;align-items:center} /* el ícono centrado con el texto, no sobre la línea de base */
.vbh-cab__util .vbh-puntos > li:has(> .vbh-cab__icono) ~ li:has(> .vbh-cab__icono){margin-left:12px}
.vbh-cab__util .vbh-puntos > li:has(> .vbh-cab__icono) ~ li:has(> .vbh-cab__icono)::before{content:none} /* las redes, sin «·» entre ícono e ícono */
.vbh-pie__menu{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 24px;margin:0;padding:0;list-style:none}
.vbh-pie__menu .sub-menu,.vbh-pie__contacto ul{margin:0;padding:0;list-style:none}
.vbh-pie__menu .sub-menu a,.vbh-pie__contacto a{display:inline-flex;align-items:center;min-height:var(--vbh-tap);overflow-wrap:anywhere}
.vbh-pie__menu .sub-menu a{line-height:1.3;text-transform:lowercase} /* las etiquetas van como en sus textos («Vender mi piso») y se ven en minúscula, como en la maqueta */
.vbh-pie__legal{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 16px;margin-top:40px;padding-top:20px;border-top:1px solid var(--vbh-sep);color:var(--vbh-texto-2);font-size:var(--vbh-small)}
.vbh-pie__legal a{display:inline-flex;align-items:center;min-height:var(--vbh-tap);color:var(--vbh-texto-2)}
.vbh-pie__legal .vbh-puntos a{text-transform:lowercase} /* «Aviso legal · Política de privacidad · Política de cookies», como en sus textos; se ven en minúscula, como «configurar cookies» */
.vbh-pie__cookies{display:inline-flex;align-items:center;min-height:var(--vbh-tap);padding:0;border:0;background:none;color:var(--vbh-texto-2);font:inherit;text-transform:lowercase;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em;cursor:pointer} /* subrayado como los enlaces legales de su fila */
.vbh-pie__cookies:hover{text-decoration-thickness:2px}
@media (max-width:767px){ .vbh-pie__legal .vbh-puntos{column-gap:20px} .vbh-pie__legal .vbh-puntos > li:not([hidden]) ~ li::before{content:none} }
.vbh-pie__credito{margin:0;color:var(--vbh-texto-2);font-size:.75rem;line-height:1.4} /* «web: BlitzLabs», debajo de la fila legal y más chico */
.vbh-pie__credito a{display:inline-flex;align-items:center;min-height:var(--vbh-tap);color:var(--vbh-texto-2)}
@media (min-width:768px){ .vbh-pie__credito{text-align:right} }
@media (min-width:768px){
  .vbh-pie__grid{grid-template-columns:1fr 1fr}
  .vbh-pie__nav{grid-column:1 / -1;grid-row:2}
}
/* Las columnas del menú van según el ancho del propio menú, en rem (como la cabecera), para no partir palabras. Medido
   el 28/10 en el hosting, con la letra de 16 px: las columnas piden 133 + 117 + 99 + 141 px («vender mi piso»,
   «gastronomía», «actualidad», «colaboraciones») más 3 huecos de 24 = 562 px, y 2 columnas iguales, 2 × 141 + 24 =
   306 px. Antes, con 4 columnas iguales desde 1025 px, «colaboraciones» se partía por la mitad hasta 1365 px de ventana
   (y en 1025, cinco palabras más), y con 2 columnas en 320 y 340 px. Ahora: 1 columna con menos de 19,5 rem de menú
   (312 px con 16), 2 desde ahí y, desde 1025 px de ventana, 4 con 36 rem (576 px, unos 1230 px de ventana), cada una
   del ancho de su palabra más larga. Con la letra del navegador en 18 o 20 px los cortes se corren solos. Un navegador
   sin consultas de contenedor (Safari 15 o anterior: el iPhone SE de 1.ª generación, de 320 px) se queda con las 2
   columnas de arriba en todos los anchos; para que en el teléfono no parta «colaboraciones», la media query de abajo
   le da 1 columna con menos de 22 em de ventana (352 px con la letra de 16, el mismo corte que la consulta de
   contenedor; en em, para que crezca con la letra del navegador). */
@media (max-width:21.99em){ .vbh-pie__menu{grid-template-columns:minmax(0,1fr)} }
.vbh-pie__nav{container-type:inline-size}
@container (max-width:19.49rem){ .vbh-pie__menu{grid-template-columns:minmax(0,1fr)} }
@media (min-width:1025px){
  .vbh-pie__grid{grid-template-columns:200px minmax(0,1fr) max-content}
  .vbh-pie__contacto a{overflow-wrap:normal}
  .vbh-pie__nav{grid-column:auto;grid-row:auto}
  @container (min-width:36rem){ .vbh-pie__menu{grid-template-columns:repeat(4,auto)} }
}

/* ===== WhatsApp flotante (maqueta CSS 383–386) ===== */
.vbh-wa{position:fixed;right:16px;bottom:16px;z-index:var(--vbh-z-wa);display:grid;place-items:center;width:var(--vbh-wa);height:var(--vbh-wa);border-radius:50%;background:var(--vbh-espresso);color:var(--vbh-crema);box-shadow:0 0 0 2px var(--vbh-crema);transition:transform var(--vbh-dur-ui) var(--vbh-curva),background-color var(--vbh-dur-ui)}
.vbh-wa:hover{background:var(--vbh-tostado)}
.vbh-wa:focus-visible{outline:none;border-radius:50%;box-shadow:0 0 0 2px var(--vbh-crema),0 0 0 5px var(--vbh-espresso),0 0 0 7px var(--vbh-crema)}
@media (hover:hover) and (pointer:fine){ .vbh-wa:hover{transform:translateY(-2px)} }

/* ===== formularios: .vbh-form y los de Fluent Forms (etiquetas visibles, campos píldora de 52 px) ===== */
.vbh-form{display:grid;gap:16px}
.vbh-form label{font-size:var(--vbh-small);font-weight:600;color:var(--vbh-texto)}
.vbh-form__fila{display:flex;flex-wrap:wrap;gap:10px}
.vbh-form__fila > input{flex:1 1 240px}
.vbh-form :is(input[type=text],input[type=email],input[type=tel],input[type=search],input[type=number],input[type=url],input[type=date],select,textarea),
.fluentform .vbh-form .ff-el-form-control{width:100%;min-height:52px;padding:0 20px;border:2px solid var(--vbh-espresso);border-radius:var(--vbh-r-pill);background:var(--vbh-crema);color:var(--vbh-espresso);font-family:var(--vbh-font);font-size:1rem;line-height:1.4;box-shadow:none}
.vbh-form textarea,.fluentform .vbh-form textarea.ff-el-form-control{min-height:140px;padding:14px 20px;border-radius:var(--vbh-r-img);resize:vertical}
.vbh-form select,.fluentform .vbh-form select.ff-el-form-control{appearance:none;padding-right:48px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%232A1C16' stroke-width='2'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 20px center}
.vbh-form ::placeholder,.fluentform .vbh-form .ff-el-form-control::placeholder{color:var(--vbh-piedra);opacity:1}
.vbh-form :is(input,select,textarea):focus,.fluentform .vbh-form .ff-el-form-control:focus{outline:var(--vbh-foco-ancho) solid var(--vbh-foco);outline-offset:var(--vbh-foco-sep);border-color:var(--vbh-espresso);box-shadow:none}
.vbh-form :is(input[type=checkbox],input[type=radio]){width:22px;height:22px;margin:2px 0 0;flex:none;accent-color:var(--vbh-espresso)}
.vbh-form :is(button[type=submit],input[type=submit]),.fluentform .vbh-form .ff-btn-submit{display:inline-flex;align-items:center;justify-content:center;min-height:var(--vbh-tap);padding:0 28px;border:2px solid transparent;border-radius:var(--vbh-r-pill);background:var(--vbh-espresso);color:var(--vbh-crema);font-family:var(--vbh-font);font-size:1rem;font-weight:600;text-transform:lowercase;cursor:pointer;box-shadow:none;transition:background-color var(--vbh-dur-ui) var(--vbh-curva)}
.vbh-form :is(button[type=submit],input[type=submit]):hover,.fluentform .vbh-form .ff-btn-submit:hover{background:var(--vbh-tostado);color:var(--vbh-crema);opacity:1}
.fluentform .vbh-form .ff-btn-submit:focus{opacity:1} /* Fluent Forms lo deja a .8 después del clic: parecía apagado */
.fluentform .vbh-form .ff-btn-submit:focus-visible{outline:var(--vbh-foco-ancho) solid var(--vbh-foco);outline-offset:var(--vbh-foco-sep)} /* y le quita el foco (outline:0, con más clases que :focus-visible) */
/* Fluent Forms: estructura */
.fluentform .vbh-form .ff-el-group{margin-bottom:18px}
.fluentform .vbh-form .ff-el-input--label{margin-bottom:6px}
.fluentform .vbh-form .ff-el-input--label label{font-size:var(--vbh-small);font-weight:600;color:var(--vbh-texto)}
/* el asterisco con el color de la superficie: una clase más que la regla de Fluent Forms (que es roja), porque
   su CSS llega al final del body cuando el formulario no está en the_content y a igualdad le ganaría */
.fluentform .vbh-form .ff-el-input--label.ff-el-is-required.asterisk-right label::after{color:var(--vbh-texto);margin-left:2px}
.fluentform .vbh-form .ff-el-input--label.ff-el-is-required.asterisk-left label::before{color:var(--vbh-texto)}
.fluentform .vbh-form .ff-el-form-check{margin-bottom:0}
.fluentform .vbh-form .ff-el-form-check-label{display:flex;align-items:flex-start;gap:10px;min-height:var(--vbh-tap);padding-block:12px;font-size:var(--vbh-small);font-weight:400;line-height:1.6;cursor:pointer} /* filas de 48 px */
.fluentform .vbh-form .ff-el-form-check-input{width:22px;height:22px;margin:2px 0 0;flex:none;accent-color:var(--vbh-espresso)}
.fluentform .vbh-form .ff-el-form-check-label.ff_tc_label{display:flex;align-items:center;gap:10px}
.fluentform .vbh-form .ff_tc_checkbox{flex:none;width:auto;padding:0;display:block;line-height:1}
.fluentform .vbh-form .ff_tc_label .ff_tc_checkbox > input.ff-el-form-check-input{position:static;margin:0;vertical-align:top}
.fluentform .vbh-form .ff_t_c{display:block;padding:0;margin:0;font-size:var(--vbh-small);font-weight:400}
.fluentform .vbh-form :is(.error,.text-danger){margin-top:6px;color:var(--vbh-texto);font-size:var(--vbh-small);font-weight:600}
.fluentform .vbh-form .ff-el-is-error .ff-el-form-control{border-color:var(--vbh-espresso);border-width:3px}
.fluentform .vbh-form .ff-el-is-error .ff-el-form-check-label{color:var(--vbh-texto)} /* sin el rojo de Fluent Forms: sobre terracota desaparecía y sobre crema no va */
.fluentform .vbh-form .ff-el-is-error .ff-el-form-check-label a{color:var(--vbh-enlace)}
.fluentform .vbh-form .ff-custom_html{font-size:var(--vbh-min);color:var(--vbh-texto-2);line-height:1.5}
.fluentform .ff-message-success{margin-top:12px;padding:16px 20px;border:0;border-radius:var(--vbh-r-img);background:var(--vbh-rubor);color:var(--vbh-espresso);box-shadow:none;font-weight:600}
.vbh-sup-terracota .fluentform .ff-message-success{background:var(--vbh-crema)}
/* el error general (la pila de Fluent Forms, p. ej. «No se ha podido completar la suscripción»): en una caja como la del
   éxito, con texto espresso; el rojo de Fluent Forms no se lee sobre terracota */
.fluentform .ff-errors-in-stack .error.text-danger{margin-top:12px;padding:16px 20px;border-radius:var(--vbh-r-img);background:var(--vbh-rubor);color:var(--vbh-espresso);font-size:1rem;font-weight:600;line-height:1.5}
.vbh-sup-terracota .fluentform .ff-errors-in-stack .error.text-danger{background:var(--vbh-crema)}
.fluentform .ff-errors-in-stack .error-clear{color:inherit}
/* sobre superficies oscuras (el pie, espresso, tostado): el botón espresso no se vería, va en terracota; las casillas
   también, y el campo con error se marca con un borde terracota (el espresso se pierde en el fondo) */
:is(.vbh-sup-espresso,.vbh-sup-tostado,.vbh-sup-foto) .vbh-form :is(button[type=submit],input[type=submit]){background:var(--vbh-terracota);color:var(--vbh-espresso)}
:is(.vbh-sup-espresso,.vbh-sup-tostado,.vbh-sup-foto) .vbh-form :is(button[type=submit],input[type=submit]):hover{background:var(--vbh-crema);color:var(--vbh-espresso)}
:is(.vbh-sup-espresso,.vbh-sup-tostado,.vbh-sup-foto) .vbh-form :is(input[type=checkbox],input[type=radio]){accent-color:var(--vbh-terracota)}
:is(.vbh-sup-espresso,.vbh-sup-tostado,.vbh-sup-foto) .fluentform .vbh-form .ff-el-is-error .ff-el-form-control{border-color:var(--vbh-terracota)}

/* ===== migas de pan (parts/migas.php: las de Yoast o las propias), en un renglón y en minúscula =====
   El último paso (el título) se recorta con «…». 6 px de aire con margen negativo para el anillo de foco. */
.vbh-migas{overflow:hidden;max-width:calc(100% + 12px);margin:-6px;padding:6px;color:var(--vbh-texto-2);font-size:var(--vbh-small);text-transform:lowercase}
.vbh-migas > span,.vbh-migas ol{display:flex;align-items:center;gap:.5em;min-width:0;margin:0;padding:0;list-style:none;white-space:nowrap}
.vbh-migas li{flex:none}
.vbh-migas li:not(:last-child)::after{content:"/";margin-left:.5em}
.vbh-migas .breadcrumb_last,.vbh-migas li:last-child{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.vbh-migas a{display:inline-flex;align-items:center;min-height:var(--vbh-tap);color:var(--vbh-texto-2)}
.vbh-migas [aria-current],.vbh-migas .breadcrumb_last{color:var(--vbh-texto)}

/* ===== estados vacíos, paginación y listados simples ===== */
/* .vbh-vacio (hoy solo los marcadores «[…: pendiente]» de Elementor) trae su superficie (rubor): dentro de un bloque
   espresso no hereda el texto crema. Con :where una clase de superficie (vbh-sup-crema) le gana. Alineado a la izquierda. */
:where(.vbh-vacio){--vbh-fondo:var(--vbh-rubor);--vbh-texto:var(--vbh-espresso);--vbh-texto-2:var(--vbh-piedra);--vbh-enlace:var(--vbh-tinta);--vbh-acc-color:var(--vbh-terracota-prof);--vbh-acc-raya:transparent;--vbh-sep:var(--vbh-linea);--vbh-foco:var(--vbh-espresso)}
.vbh-vacio{display:grid;gap:16px;justify-items:start;max-width:var(--vbh-lectura);padding:clamp(28px,4vw,48px);border-radius:var(--vbh-r-card);background:var(--vbh-fondo);color:var(--vbh-texto)}
.vbh-vacio__flor{width:56px;height:56px}
/* el vacío de un listado: una sola línea neutra (parts/vacio.php), con el color del texto de la superficie */
.vbh-vacio-linea{max-width:var(--vbh-lectura);margin:0;color:var(--vbh-texto)}
.vbh-paginacion{margin-top:48px}
.vbh-paginacion ul{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;padding:0;list-style:none}
.vbh-paginacion .page-numbers{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-width:var(--vbh-tap);min-height:var(--vbh-tap);padding:0 16px;border:1.5px solid var(--vbh-linea-fuerte);border-radius:var(--vbh-r-pill);color:var(--vbh-texto);font-weight:600;font-variant-numeric:tabular-nums;text-decoration:none;text-transform:lowercase}
.vbh-paginacion a.page-numbers:hover{border-color:var(--vbh-texto)}
.vbh-paginacion .page-numbers.current{background:var(--vbh-texto);color:var(--vbh-fondo);border-color:var(--vbh-texto)}
.vbh-paginacion .page-numbers.dots{min-width:auto;padding:0 4px;border-color:transparent}
.vbh-paginacion__flecha{width:8px;height:8px;border:solid currentColor;border-width:2px 2px 0 0;transform:rotate(45deg)}
.vbh-paginacion__flecha--atras{transform:rotate(-135deg)}
.vbh-lista-simple{display:grid;margin-block:0;padding:0;list-style:none}
.vbh-lista-simple a{display:grid;gap:6px;padding:20px 0;border-bottom:1px solid var(--vbh-sep);color:inherit;text-decoration:none}
.vbh-lista-simple__t{font-size:var(--vbh-h-tarjeta);line-height:var(--vbh-lh-tarjeta);letter-spacing:-.02em}
.vbh-lista-simple a:hover .vbh-lista-simple__t{text-decoration:underline;text-decoration-color:var(--vbh-terracota);text-decoration-thickness:2px;text-underline-offset:4px}

/* ===== Complianz: aceptar, rechazar y configurar al mismo peso, píldoras de 48 px ===== */
.cmplz-cookiebanner{font-family:var(--vbh-font)}
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn{min-height:var(--vbh-tap);border-radius:var(--vbh-r-pill);font-family:var(--vbh-font);font-size:1rem;font-weight:600;text-transform:lowercase}

/* ===== red de seguridad: con «reducir movimiento», nada se mueve ===== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}