/*
 * Home · lo que puede salir en cualquier página: [vbh_ultimo], [vbh_cifras], [vbh_newsletter] (el bloque de la home y
 * del final de cada post, y el formulario de /newsletter/), [vbh_propietarios], la presentación de «inicio» y la franja
 * de la vista previa de Elementor.
 * La historia del panot NO va acá: vbh-historia.css, inline y solo en la portada.
 */

.vbh-inicio:focus{outline:none}

/* vista previa de Elementor: franja quieta en lugar de la historia (§5.8) */
.vbh-franja-historia{padding-block:32px}
.vbh-franja-historia__in{display:flex;align-items:center;gap:20px}
.vbh-franja-historia__in > div{display:grid;gap:8px;max-width:640px}
.vbh-franja-historia img{flex:none}

/* presentación · quiénes somos (en «inicio», maqueta CSS 197–207; en Elementor, contenedor con .vbh-seccion .vbh-presenta) */
.vbh-presenta__in{display:grid;gap:32px;align-items:center}
@media (min-width:1025px){ .vbh-presenta__in{grid-template-columns:5fr 7fr;gap:72px} }
.vbh-presenta__retrato{margin:0}
.vbh-presenta img{max-width:100%;height:auto;border-radius:var(--vbh-r-img)}
.vbh-presenta__retrato img{width:100%;aspect-ratio:4/5;object-fit:cover}
.vbh-presenta__pendiente{display:grid;place-items:center;align-content:center;gap:18px;aspect-ratio:4/5;padding:24px;border-radius:var(--vbh-r-img);background:var(--vbh-rubor);color:var(--vbh-piedra);text-align:center}
.vbh-presenta__pendiente img{width:88px;height:88px;border-radius:0}
.vbh-presenta__txt{display:grid;gap:18px;max-width:640px}
/* su «Texto:» de «Sobre mí» en un solo párrafo: la primera frase como entradilla y el resto debajo */
.vbh-presenta__p > span{display:block}
.vbh-presenta__p > span + span{margin-top:18px}

/* ===== lo último (maqueta CSS 209–253) ===== */
.vbh-ultimo__grid{display:grid;gap:28px}
@media (min-width:1025px){
  .vbh-ultimo__grid{grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:40px}
  .vbh-ultimo__grid--solo{grid-template-columns:minmax(0,760px)}
}
.vbh-ultimo__carrusel{position:relative;overflow:hidden;aspect-ratio:4/5;border-radius:var(--vbh-r-card);background:var(--vbh-tostado);color:var(--vbh-crema)}
@media (min-width:768px){ .vbh-ultimo__carrusel{aspect-ratio:16/11} }
.vbh-ultimo__slide{position:absolute;inset:0;opacity:0;visibility:hidden;color:var(--vbh-crema);text-decoration:none;transition:opacity .7s var(--vbh-curva),visibility 0s .7s}
.vbh-ultimo__slide.is-activa{opacity:1;visibility:visible;transition:opacity .7s var(--vbh-curva)}
.vbh-ultimo__slide:focus-visible{outline-offset:-6px;border-radius:var(--vbh-r-card)}
/* Con dos clases: en la portada (Elementor) el `.elementor img{height:auto;border-radius:0}` de Elementor (0,1,1) le ganaba
   a una sola clase (27/10, ronda 6). Igual en la lista de abajo y en las teselas (barcelona.css). */
.vbh-ultimo__slide .vbh-ultimo__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vbh-ultimo__slide.is-activa .vbh-ultimo__img{animation:vbh-acercar 7s ease-out both}
.vbh-ultimo__carrusel.is-pausado .vbh-ultimo__img{animation-play-state:paused}
/* texto sobre foto: siempre con velo espresso (40–65 % donde va el texto) */
.vbh-ultimo__velo{position:absolute;inset:0;background:linear-gradient(to top,rgb(42 28 22 / .68),rgb(42 28 22 / .6) 45%,rgb(42 28 22 / .15) 75%,transparent)}
.vbh-ultimo__txt{position:absolute;left:0;right:0;bottom:0;display:grid;gap:12px;padding:clamp(22px,3.4vw,40px);padding-right:84px}
.vbh-ultimo__t{max-width:20ch;font-size:clamp(1.6rem,1.1rem + 2vw,2.6rem);line-height:1}
.vbh-ultimo__slide:hover .vbh-ultimo__t{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
.vbh-ultimo__meta{font-size:var(--vbh-small);color:var(--vbh-texto-2)}
.vbh-ultimo__barras{position:absolute;z-index:2;top:0;left:16px;right:16px}
.vbh-ultimo__seg{display:flex;align-items:center;min-height:var(--vbh-tap);padding:0;border:0;background:none;cursor:pointer}
.vbh-ultimo__seg i{flex:1}
/* se frena con el mouse encima o con el foco del teclado adentro (un clic no lo deja frenado). El :hover solo con mouse:
   en el teléfono queda pegado después de un toque y el carrusel no seguía (6/11, revisión de la ronda 22) */
.vbh-ultimo__carrusel:has(:focus-visible) .vbh-barras .is-activa b{animation-play-state:paused}
@media (hover:hover){.vbh-ultimo__carrusel:hover .vbh-barras .is-activa b{animation-play-state:paused}}
.vbh-ultimo__pausa{position:absolute;z-index:2;right:16px;bottom:16px}
@media (prefers-reduced-motion:reduce){ .vbh-ultimo__slide.is-activa .vbh-ultimo__img{animation:none} }

.vbh-ultimo__lista{display:grid;align-content:start;margin:0;padding:0;list-style:none}
/* La foto mide 96 px; solo se achica (hasta 56) si el texto no tiene lugar para el sello «colaboración», que no se parte
   (8,4 rem + 28 px): pasa con la letra del navegador en 18 o 20 px en un teléfono de 320. */
.vbh-ultimo__item{display:grid;grid-template-columns:clamp(56px,calc(100% - 8.4rem - 44px),96px) minmax(0,1fr);gap:16px;align-items:center;padding:14px 0;border-bottom:1px solid var(--vbh-sep);color:inherit;text-decoration:none}
.vbh-ultimo__lista li:first-child .vbh-ultimo__item{padding-top:0}
.vbh-ultimo__item .vbh-ultimo__mini{width:100%;height:120px;object-fit:cover;border-radius:var(--vbh-r-img)} /* 96 × 120 como la maqueta: el ancho de su columna (96 px, salvo con la letra grande en 320), el alto y el radio siempre */
.vbh-ultimo__mini--vacia{display:block;background:var(--vbh-rubor) url(../../img/vivir-barcelona-hoy-simbolo-terracota.svg) 50% 50% / 40px 40px no-repeat} /* sin foto: la flor, como en las otras secciones */
.vbh-ultimo__item-txt{display:grid;gap:6px}
.vbh-ultimo__sello{justify-self:start}
.vbh-ultimo__item-txt .vbh-label{color:var(--vbh-texto-2)}
.vbh-ultimo__item-t{font-size:var(--vbh-h-tarjeta);line-height:1.2;letter-spacing:-.02em}
.vbh-ultimo__item:hover .vbh-ultimo__item-t{text-decoration:underline;text-decoration-color:var(--vbh-terracota);text-decoration-thickness:2px;text-underline-offset:4px}
.vbh-ultimo__item-meta{font-size:var(--vbh-small);color:var(--vbh-texto-2)}

/* ===== cifras (maqueta CSS 319–330) ===== */
.vbh-cifras__grid{display:grid;gap:36px;margin-top:8px}
@media (min-width:768px){ .vbh-cifras__grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))} }
.vbh-cifras__item{display:grid;gap:6px;align-content:start;padding-top:22px;border-top:1px solid var(--vbh-sep)}
.vbh-cifras__n{font-size:var(--vbh-stat);font-weight:700;line-height:1;letter-spacing:var(--vbh-ls-cifra);font-variant-numeric:tabular-nums;white-space:nowrap}
.vbh-cifras__n em{font-style:normal;color:var(--vbh-terracota)}
.vbh-cifras__nota{margin-top:36px;max-width:40ch}

/* ===== newsletter (maqueta CSS 332–343), con sus textos =====
   Bloque terracota (home y final de cada post): su H2 y su texto a un lado; «Tu email» y «Quiero recibirla» en una fila
   (cuando la columna da) y, debajo del botón, su letra pequeña y la primera capa. Se acomoda al ancho que le toca
   (container queries): a lo ancho en la home y, dentro de una columna de lectura, como tarjeta en una columna. */
.vbh-news--bloque{container-type:inline-size}
/* En la home va dentro de un widget Shortcode de Elementor, en una columna flexible que en el teléfono (hasta 767 px) pasa
   a flex-wrap:wrap. Con el container-type de arriba, Chrome calculaba el alto del widget como si el bloque no tuviera
   ancho: a 390 px medía 1942 en vez de 718 y dejaba 1224 px vacíos antes del pie (medido el 28/10 en el hosting). Con
   el ancho fijado al 100 % mide lo que mide el bloque; desde 768 px no cambia nada. */
.elementor-widget:has(.vbh-news--bloque){width:100%}
.vbh-news__in{display:grid;gap:28px}
@container (min-width:900px){ .vbh-news__in{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:end;gap:64px} }
.vbh-news__txt{display:grid;gap:14px;align-content:start}
.vbh-news__txt > p:last-child{max-width:40ch}
.vbh-news .vbh-news__txt h2{margin:0}
.vbh-lectura .vbh-news--bloque{padding-block:clamp(28px,5vw,48px);border-radius:var(--vbh-r-card)}
.vbh-lectura .vbh-news--bloque .vbh-contenedor{padding-inline:clamp(20px,4vw,40px)}
.vbh-lectura .vbh-news .vbh-h2{font-size:var(--vbh-h3)}
.vbh-news__form{container-type:inline-size}
.vbh-news .fluentform .ff-el-group:last-child{margin-bottom:0}
.vbh-news--bloque .fluentform .ff-el-group{margin-bottom:12px}
.vbh-news--bloque .fluentform .ff-btn-submit{min-height:52px} /* el mismo alto que el campo */
@container (min-width:440px){
  .vbh-news--bloque .frm-fluent-form fieldset{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;align-items:end}
  .vbh-news--bloque .frm-fluent-form fieldset > *{grid-column:1 / -1}
  .vbh-news--bloque .frm-fluent-form fieldset > .ff-el-group:has(input[type=email]){grid-column:1;grid-row:1;margin-bottom:0}
  .vbh-news--bloque .frm-fluent-form fieldset > .ff_submit_btn_wrapper{grid-column:2;grid-row:1;margin-bottom:0}
}
.vbh-news__letra{margin-top:14px;font-size:var(--vbh-small)}
.vbh-news__capa{margin-top:8px;font-size:var(--vbh-min);line-height:1.5;color:var(--vbh-texto-2)}
.elementor :is(.vbh-news__letra,.vbh-news__capa) a{text-decoration-line:underline} /* Elementor les quita el subrayado (.elementor a) */
/* /newsletter/: su formulario (Nombre · Email · Casilla · Botón) en una tarjeta rubor, nombre y email en una fila si da */
.vbh-news--pagina{container-type:inline-size;padding:clamp(20px,4vw,36px);border-radius:var(--vbh-r-card)}
.vbh-prosa .vbh-news--pagina{margin-top:clamp(32px,5vw,48px)}
.vbh-news--pagina .frm-fluent-form fieldset > *{grid-column:1 / -1}
/* sobre la tarjeta rubor, el «Revisa tu correo» y el error en una caja crema (la de vbh.css es rubor y no se vería) */
.vbh-news--pagina .fluentform :is(.ff-message-success,.ff-errors-in-stack .error.text-danger){background:var(--vbh-crema)}
@container (min-width:440px){
  .vbh-news--pagina .frm-fluent-form fieldset{display:grid;grid-template-columns:1fr 1fr;column-gap:12px}
  .vbh-news--pagina .frm-fluent-form fieldset > .ff-el-group:has(> .ff-el-input--content > input.ff-el-form-control){grid-column:auto}
}

/* ===== recuadro de propietarios ([vbh_propietarios], maqueta CSS 301–303), 29/10 =====
   Volvió a la home a pedido de Alex, con sus tres textos. Va debajo de los pisos y a lo ancho (en la maqueta iba al
   lado de un piso destacado); sin pisos publicados queda solo en su sección. En el teléfono, una columna; desde 768 px,
   el texto a la izquierda y «quiero vender» abajo a la derecha. Espresso (vbh-sup-espresso): la palabra acento sale en
   terracota y el botón pasa a crema al pasar el cursor (vbh.css). Sin animaciones ni container-type. */
.vbh-vender{display:grid;gap:24px;padding:clamp(24px,3vw,36px);border-radius:var(--vbh-r-card)}
.vbh-vender__txt{display:grid;gap:14px}
.vbh-vender .vbh-btn{justify-self:start}
@media (min-width:768px){ .vbh-vender{grid-template-columns:minmax(0,1fr) auto;align-items:end;column-gap:clamp(32px,5vw,72px)} }
/* en Elementor, el widget Shortcode a todo el ancho de su columna, como el de la newsletter */
.elementor-widget:has(.vbh-vender){width:100%}
/* fuera de Elementor (la semilla local), después de [vbh_pisos]; en Elementor el aire lo da el contenedor */
* + .vbh-vender{margin-top:clamp(28px,4vw,48px)}