/*
 * fbaraut-extra.css — trozos que en el diseño FBaraut iban inyectados por JS/React
 * (BIBLIA.md §4.15): animaciones de aparición, subrayado del navbar, grid del
 * contacto y detalles que el CSS compilado (fbaraut.css) no trae.
 * Los tokens de color/v fuentes viven en :root dentro de fbaraut.css (§3.1).
 */

/* ── Animación de aparición al hacer scroll (IntersectionObserver en fbaraut.js) ── */
.fb-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.fb-reveal.fb-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Página interior: margen superior garantizado bajo el navbar fijo.
   TRAMPA pagada: las utilities pt-24/pt-32/pt-40 NO existen en fbaraut.css
   (el CSS compilado solo trae las que usaba el React original), así que el
   padding "pt-24 md:pt-32" de las páginas no hacía nada y el contenido
   quedaba pegado a la barra azul. Espacio superior siempre con .fb-pagina. ── */
.fb-pagina { padding-top: 7rem; padding-bottom: 4rem; }
@media (min-width: 768px) {
  .fb-pagina { padding-top: 10rem; }
}

/* ── Subrayado terracotta de los enlaces del navbar (Navbar.tsx) ── */
.fb-navlink::after {
  content: "";
  position: absolute;
  bottom: 4px;
  left: 14px;
  right: 14px;
  height: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
  border-radius: 9999px;
  background-color: oklch(0.65 0.15 37);
}
.fb-navlink:hover::after { transform: scaleX(1); }

/* ── EFECTO ELÉCTRICO del botón Cercador (§3.3, 2026-09-30): código calcado
   del demo del cliente — rayos en canvas (fbaraut.js) + anillo cónico
   giratorio con punto orbitando + destello. PAUSADO: al poner el ratón
   encima del botón, si la página actual es /Buscador (arranca .paused) o
   con prefers-reduced-motion. ── */
.searchStage {
  position: relative; width: 155px; height: 62px;
  display: grid; place-items: center; isolation: isolate;
}
/* En el panel móvil: botón a ANCHO COMPLETO y más alto (petición original
   2026-10-01 «el botón de abajo no se ve mucho»; una reducción posterior
   fue malentendido y se revirtió) — el rayo adapta su elipse en JS */
#fb-mobile-panel .searchStage { width: 100%; height: 74px; margin: 10px 0 12px; --ray-orbit: 37px; }
#fb-mobile-panel .searchButton { width: 100%; height: 46px; font-size: 15px; }
#fb-mobile-panel .electricRing { width: calc(100% - 12px); height: 56px; }

/* ── «CERCA ARA» del hero (§3.4, 2026-10-01): la señal de scroll centrada
   bajo la foto es EL botón buscar del cliente (petición tras aclarar los
   malentendidos: «está más arriba en el centro»). Lleva el MISMO efecto
   eléctrico pero SOLO en pantalla pequeña (fx-solo-movil): a partir de lg
   las capas desaparecen y el efecto lo lleva el Cercador del navbar. La
   señal se viste de píldora glass para que el anillo se apoye y el texto
   se lea sobre la foto. El botón «Cercar propietats» de la banda queda
   ORIGINAL (sin efecto) para no duplicar. ── */
#inici .searchStage {
  /* BUG pagado: la clase Tailwind `absolute` del markup la PISABA el
     position:relative del .searchStage base (fbaraut-extra carga después) →
     el escenario quedaba en flujo, se estiraba a ~340px y el anillo giraba
     en una órbita gigante («lo que gira da vueltas muy largo»). Ahora se
     fija aquí absolute+centrado. OJO: SIN transform propio — el centrado
     lo hace el `-translate-x-1/2` del markup (si añadiéramos otro
     translateX(-50%) se ACUMULAN y se va al doble de lado, bug pagado). */
  position: absolute; bottom: 2rem; left: 50%;
  width: max-content; height: auto;
  padding: 10px 12px;
}
#inici .searchStage > a { position: relative; z-index: 3; overflow: hidden; }
#inici .searchStage > a:hover { color: white; }
/* El anillo ya puede ABRAZAR la píldora compacta (antes orbitaba a ~340px) */
#inici .electricRing { width: calc(100% - 10px); height: calc(100% - 8px); }
/* Chispa que orbita (ajustes 2026-10-01: órbita ≤1 cm y píldora compacta
   en una línea): gira en un círculo de 34px centrado en el CENTRO de la
   píldora (antes: elipse ancha del anillo; luego chevron, pero la píldora
   pasó a una línea y el centro es más estable). */
#inici .electricRing::after {
  left: 50%; top: calc(50% - 17px); bottom: auto;
  width: 5px; height: 5px;
  transform-origin: 0 17px;
}
@media (min-width: 1024px) {
  #inici .fxCanvas, #inici .electricRing, #inici .shine { display: none; }
  /* escritorio: ni píldora ni efecto — la señal queda como el diseño original
     (columna: texto encima del chevron de 18px). !important para ganar a los
     estilos inline/utilities de la versión compacta móvil. */
  #inici .searchStage > a {
    background: none !important; border: none !important;
    backdrop-filter: none !important; padding: 0 !important;
    color: rgba(255, 255, 255, .6) !important;
    flex-direction: column !important; gap: 0.25rem !important;
  }
  #inici .searchStage > a > span:not(.shine) {
    font-size: 0.6rem !important; letter-spacing: 0.15em !important;
  }
  #inici .searchStage > a > svg {
    width: 18px !important; height: 18px !important;
  }
}
.fxCanvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 1; pointer-events: none;
}
.searchButton {
  position: relative; z-index: 3; width: 118px; height: 40px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 999px; color: #ffffff; font-weight: 800; font-size: 14px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer; background: rgba(255, 255, 255, .03);
  backdrop-filter: blur(4px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .08),
    0 0 0 1px rgba(255, 255, 255, .03);
  overflow: hidden; text-decoration: none; white-space: nowrap;
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.searchButton:hover {
  background: rgba(255, 255, 255, .06);
  transform: translateY(-1px); color: white;
}
.searchButton svg {
  width: 15px; height: 15px;
  fill: none; stroke: white; stroke-width: 2; stroke-linecap: round;
}
.electricRing {
  position: absolute; z-index: 2;
  width: calc(100% - 25px); height: calc(100% - 10px);   /* stage 155×62 → 130×52 del demo */
  border-radius: 999px; pointer-events: none;
}
.electricRing::before {
  content: "";
  position: absolute; inset: -2px; border-radius: inherit; padding: 2px;
  background:
    conic-gradient(
      from 0deg,
      transparent 0deg,
      transparent 220deg,
      #6ec8ff 246deg,
      #ffffff 266deg,
      #6ec8ff 286deg,
      transparent 315deg
    );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: ringRotate 1.15s linear infinite;
  filter:
    drop-shadow(0 0 4px #7bd2ff)
    drop-shadow(0 0 10px rgba(65, 180, 255, .9));
}
.electricRing::after {
  content: "";
  position: absolute; width: 7px; height: 7px;
  border-radius: 50%; background: #ffffff;
  left: 50%; top: -5px;
  box-shadow:
    0 0 5px #fff,
    0 0 10px #9dddff,
    0 0 18px #4bbcff;
  transform-origin: 0 var(--ray-orbit, 31px);
  animation: ringDot 1.15s linear infinite;
}
.searchStage .shine {
  position: absolute; top: -20px; left: -45px;
  width: 24px; height: 80px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: rotate(25deg); opacity: .7;
  animation: shineSweep 1.8s linear infinite;
  pointer-events: none;
}
.searchStage > a > *:not(.shine),
.searchStage > button > *:not(.shine) { position: relative; z-index: 2; }
.paused .electricRing::before,
.paused .electricRing::after,
.paused .shine { animation-play-state: paused !important; }
@keyframes ringRotate { to { transform: rotate(360deg); } }
@keyframes ringDot {
  from { transform: rotate(0deg) translateY(0); }
  to   { transform: rotate(360deg) translateY(0); }
}
@keyframes shineSweep {
  0%   { left: -45px; opacity: 0; }
  15%  { opacity: .75; }
  60%  { opacity: .75; }
  85%, 100% { left: 145px; opacity: 0; }
}

/* ── Grid 2fr/3fr del contacto (Contact.tsx <style> inyectado) ── */
@media (min-width: 1024px) {
  .lg-grid-contact { grid-template-columns: 2fr 3fr !important; }
}
@media (max-width: 640px) {
  .fb-contact-row2 { grid-template-columns: 1fr !important; }
}

/* ── Inputs del formulario de contacto (mismos estilos que Contact.tsx) ── */
.fb-input {
  border: 1.5px solid oklch(0.88 0.01 80);
  color: oklch(0.22 0.04 264);
  background: white;
  border-radius: 0.5rem;
  padding: 0.625rem 0.875rem;
  font-size: 0.9rem;
  outline: none;
  width: 100%;
  transition: border-color 0.2s;
  font-family: var(--font-body);
}
.fb-input:focus { border-color: oklch(0.55 0.17 37); }

/* ── Píldoras de motivo del contacto ── */
.fb-pill {
  padding: 0.4rem 1rem;
  border-radius: 9999px;
  font-size: 0.8rem;
  font-weight: 500;
  border: 1.5px solid oklch(0.88 0.01 80);
  background: white;
  color: oklch(0.45 0.04 264);
  cursor: pointer;
  transition: all 0.2s;
  font-family: var(--font-body);
}
.fb-pill.activo { border: none; background: oklch(0.28 0.09 264); color: white; }

/* ── Ficha: etiquetas de datos ── */
.fb-ficha-dato { color: oklch(0.5 0.03 264); }
/* Filas de datos con icono lucide (§4.9 revisión 2026-09-30): icono navy
   15px al inicio, texto en <span> para que etiqueta y valor envuelvan juntos */
.fb-ficha-dato > div { display: flex; align-items: center; gap: 8px; }
.fb-ficha-dato > div > i, .fb-ficha-dato > div > svg {
  width: 15px; height: 15px; flex: 0 0 auto;
  color: oklch(0.28 0.09 264); opacity: 0.85;
}

/* ── Etiqueta de calificación energética (§4.18) — widget del cliente:
   UNA escalera A→G con dos columnas de valores, barras con punta de flecha
   (clip-path en ::after), tamaños crecientes y efecto táctil al clic. ── */
.energy-widget {
  width: 100%;
  background: #ffffff;
  border: 1px solid #dce3ea;
  border-radius: 12px;
  padding: 10px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
  font-family: var(--font-body);
}
.energy-header {
  display: grid;
  grid-template-columns: 1fr 86px 86px;
  gap: 6px;
  align-items: end;
  margin-bottom: 7px;
  padding: 0 4px;
}
.energy-title { font-size: 12px; font-weight: 600; color: #5c6670; }
.energy-unit { font-size: 9px; color: #a06a47; text-align: center; line-height: 1.1; }
.energy-row {
  display: grid;
  grid-template-columns: 1fr 86px 86px;
  gap: 6px;
  align-items: center;
  min-height: 24px;
  margin-bottom: 3px;
}
.energy-bar-container { height: 23px; display: flex; align-items: center; }
.energy-bar {
  position: relative;
  height: 23px;
  border: none;
  border-radius: 5px 0 0 5px;
  padding-left: 7px;
  color: white;
  font-size: 14px;
  font-weight: bold;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-body);
  transition: transform 0.18s ease, filter 0.18s ease, box-shadow 0.18s ease;
}
.energy-bar::after {
  content: "";
  position: absolute;
  top: 0;
  right: -11px;
  width: 12px;
  height: 23px;
  background: inherit;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.energy-bar:hover { transform: translateX(3px); filter: brightness(1.05); }
.energy-bar.active {
  transform: translateX(5px);
  filter: brightness(1.05) saturate(1.1);
  box-shadow: 0 3px 7px rgba(0,0,0,.15);
}
.energy-value {
  height: 23px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f3f5f7;
  border-radius: 5px;
  color: #53606e;
  font-size: 11px;
  font-weight: 700;
  transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.energy-value.active {
  background: #111827;
  color: #fff;
  transform: scale(1.04);
  box-shadow: 0 3px 6px rgba(0,0,0,.12);
}
/* COLORES */
.grade-a { background: #149c59; }
.grade-b { background: #30b94c; }
.grade-c { background: #8bc53f; }
.grade-d { background: #e7e51b; }
.grade-e { background: #efb31c; }
.grade-f { background: #df752f; }
.grade-g { background: #df3e38; }
/* TAMAÑO DE CADA BARRA */
.size-a { width: 38%; }
.size-b { width: 46%; }
.size-c { width: 55%; }
.size-d { width: 64%; }
.size-e { width: 72%; }
.size-f { width: 80%; }
.size-g { width: 88%; }
/* RESPONSIVE */
@media (max-width: 390px) {
  .energy-header, .energy-row { grid-template-columns: 1fr 68px 68px; }
  .energy-unit { font-size: 8px; }
  .energy-value { font-size: 10px; }
}

/* ── Visor principal de la galería (§4.19): el vídeo va de primero como si
   fuera la foto (autoplay como el antiguo). La foto del visor va con COVER
   (sin bandas) y al hacer clic se abre el LIGHTBOX a pantalla completa con
   zoom real (rueda / doble clic / arrastrar) y navegación con flechas. ── */
.fb-viewer {
  position: relative; overflow: hidden; border-radius: 16px;
  background: oklch(0.93 0.012 80);
  border: 1px solid oklch(0.88 0.01 80);
  box-shadow: 0 1px 3px oklch(0.28 0.09 264 / 0.08);
}
.fb-viewer-video, .fb-viewer-img {
  display: block; width: 100%; height: 460px; object-fit: cover;
}
.fb-viewer-img { cursor: zoom-in; user-select: none; -webkit-user-drag: none; }
.fb-viewer-oculto { display: none !important; }
.fb-thumb-video {
  width: 120px; height: 90px; border-radius: 8px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: oklch(0.18 0.08 264); color: white; border: 2px solid transparent;
  transition: border-color .2s, background .2s;
}
.fb-thumb-video:hover, .fb-thumb-video.sel { border-color: oklch(0.55 0.17 37); background: oklch(0.28 0.09 264); }
.fb-viewer-hint {
  position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
  background: oklch(0 0 0 / 0.55); color: white; font-size: 0.68rem;
  padding: 4px 12px; border-radius: 9999px; pointer-events: none;
  font-family: var(--font-body); letter-spacing: 0.03em; white-space: nowrap;
}
@media (max-width: 640px) {
  .fb-viewer-video, .fb-viewer-img { height: 260px; }
}
/* §4.33 (Jaume, 9-11): flechas ‹ › sobre la foto grande de la ficha, a los lados y a media altura. La tira de
   miniaturas de abajo conserva las suyas. Van por encima de la foto, pero por debajo de «RESERVAT» (z-index 3). */
.fb-viewer-flecha {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer;
  background: oklch(1 0 0 / 0.92); color: oklch(0.28 0.09 264);
  font-size: 28px; line-height: 1; padding-bottom: 3px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 10px oklch(0 0 0 / 0.25);
  transition: background .15s ease, color .15s ease;
}
.fb-viewer-flecha:hover { background: oklch(0.55 0.17 37); color: white; }
.fb-viewer-flecha.izq { left: 12px; }
.fb-viewer-flecha.der { right: 12px; }
@media (max-width: 640px) {
  .fb-viewer-flecha { width: 36px; height: 36px; font-size: 22px; }
  .fb-viewer-flecha.izq { left: 8px; }
  .fb-viewer-flecha.der { right: 8px; }
}

/* ── Tira de miniaturas horizontal tipo carrusel (§4.20): con muchas fotos
   ya NO se apilan en filas que empujan la descripción abajo — UNA sola fila
   desplazable hasta el final, con flechas ‹ › a los lados que se ocultan
   en los extremos. Miniaturas uniformes 120×90 cover (como el chip de
   vídeo); la activa lleva borde terracota. ── */
.fb-tira { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.fb-thumbs {
  display: flex; flex: 1 1 auto; align-items: center; gap: 8px;
  min-width: 0; overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;             /* Firefox */
  -ms-overflow-style: none;          /* IE/Edge clásico */
  padding: 2px;                      /* para que el borde .sel no se corte */
}
.fb-thumbs::-webkit-scrollbar { display: none; }
.fb-thumbs img.fb-thumb {
  flex: 0 0 auto; width: 120px; height: 90px; object-fit: cover;
  display: block; border-radius: 8px; cursor: pointer;
  border: 2px solid transparent;
  background: oklch(0.93 0.012 80);
  transition: border-color .15s ease;
}
.fb-thumbs img.fb-thumb:hover { border-color: oklch(0.75 0.04 37); }
.fb-thumbs img.fb-thumb.sel { border-color: oklch(0.55 0.17 37); }
.fb-tira-flecha {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
  border: none; cursor: pointer; background: white;
  color: oklch(0.28 0.09 264); font-size: 22px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px oklch(0.28 0.09 264 / 0.15);
  transition: background .15s ease, color .15s ease, opacity .15s ease, visibility .15s ease;
}
.fb-tira-flecha:hover { background: oklch(0.55 0.17 37); color: white; }
.fb-tira-flecha.oculta { opacity: 0; visibility: hidden; pointer-events: none; }
@media (max-width: 640px) {
  .fb-tira-flecha { width: 30px; height: 30px; font-size: 18px; }
}

/* ── LIGHTBOX de la galería (§4.19, revisión cliente): SIN oscurecer
   el fondo — la capa es transparente y la zona alrededor queda intacta.
   La imagen va dentro de un MARCO con reborde semitransparente blanquecino
   pegado a ella (padding + rgba blanco + blur suave). Zoom con rueda y doble
   clic, arrastre con topes, flechas / ← → / swipe cambian de foto. ── */
.fb-lightbox {
  position: fixed; inset: 0; z-index: 90;
  background: transparent;               /* ni azul ni negro: intacta */
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .18s ease;
  font-family: var(--font-body);
}
.fb-lightbox.abierto { opacity: 1; pointer-events: all; }
.fb-lightbox-stage { position: relative; width: 100%; height: 100%; overflow: hidden; }
.fb-lightbox-marco {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  padding: 10px;                          /* el reborde pegado a la imagen */
  background: rgba(255, 255, 255, 0.55);  /* semitransparente blanquecino */
  backdrop-filter: blur(6px);
  border-radius: 14px;
  box-shadow: 0 14px 44px rgba(15, 23, 42, 0.22);
  cursor: zoom-in; transition: transform .18s ease;
}
.fb-lightbox-marco.zoom { cursor: move; transition: none; }
.fb-lightbox-img {
  display: block;
  max-width: calc(88vw - 20px);
  max-height: calc(84vh - 20px);
  object-fit: contain; user-select: none; -webkit-user-drag: none;
  border-radius: 6px;
}
.fb-lightbox-cerrar, .fb-lightbox-flecha {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px; border-radius: 12px; border: none; cursor: pointer;
  background: rgba(255, 255, 255, 0.8); color: oklch(0.28 0.09 264);
  font-size: 26px; line-height: 1; display: flex; align-items: center; justify-content: center;
  transition: background .15s ease, color .15s ease; z-index: 3;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.12);
}
.fb-lightbox-cerrar:hover, .fb-lightbox-flecha:hover { background: oklch(0.55 0.17 37); color: white; }
.fb-lightbox-cerrar { top: 18px; right: 18px; transform: none; font-size: 18px; }
.fb-lightbox-flecha.izq { left: 16px; }
.fb-lightbox-flecha.der { right: 16px; }
.fb-lightbox-pie {
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
  color: oklch(0.28 0.09 264); font-size: 0.75rem; letter-spacing: 0.05em;
  background: rgba(255, 255, 255, 0.8); padding: 5px 14px; border-radius: 9999px;
  pointer-events: none; z-index: 3;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.12);
}
.fb-lightbox-pie strong { color: oklch(0.55 0.17 37); }

/* ── Placeholder de imagen de propiedad ── */
.img-prop { background: oklch(0.93 0.012 80); }

/* ══════════════════════════════════════════════════════════════════════════
 * MODIFICACIONES SOLICITADAS POR FINQUES BARAUT (Jaume · 2026-10-14)
 * Tipografía corporativa Montserrat, desplegables del navbar, chips de
 * equipamiento de inmuebles, carrusel de fotos reales en Qui som, carrusel
 * horizontal de 3 tarjetas en Destacados y Google Reviews, sección AICAT
 * Empordà, Instagram @finquesbaraut y logos oficiales clicables en el pie.
 * ══════════════════════════════════════════════════════════════════════════ */

:root {
  --font-display: 'Montserrat', sans-serif !important;
  --font-body: 'Montserrat', sans-serif !important;
  --font-sans: 'Montserrat', sans-serif !important;
}
body, h1, h2, h3, h4, h5, h6, .font-display {
  font-family: 'Montserrat', sans-serif;
}

/* ── Desplegables del Navbar (Empresa, Serveis, Zones) ── */
.fb-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.fb-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 215px;
  background: oklch(0.18 0.08 264 / 0.98);
  backdrop-filter: blur(12px);
  border: 1px solid oklch(1 0 0 / 0.12);
  border-radius: 0.75rem;
  padding: 0.5rem;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  z-index: 60;
}
.fb-dropdown:hover .fb-dropdown-menu,
.fb-dropdown:focus-within .fb-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.fb-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.85rem;
  font-size: 0.84rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.88);
  border-radius: 0.5rem;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.fb-dropdown-item:hover {
  background: oklch(0.55 0.17 37);
  color: #ffffff;
}

/* ── Chips de equipamiento en tarjetas (_TarjetaPropiedad.cshtml) y Ficha ── */
.fb-amenities-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.55rem;
}
.fb-amenity-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.18rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.68rem;
  font-weight: 600;
  background: oklch(0.95 0.012 80);
  color: oklch(0.28 0.09 264);
  border: 1px solid oklch(0.88 0.015 80);
}
.fb-amenity-chip i, .fb-amenity-chip svg {
  width: 11px;
  height: 11px;
  color: oklch(0.28 0.09 264);   /* §4.35.3: iconos en azul (antes naranja) */
}
.fb-ficha-amenities {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
  gap: 0.65rem;
}
.fb-ficha-amenity {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.6rem 0.85rem;
  border-radius: 0.65rem;
  background: oklch(0.97 0.006 80);
  border: 1px solid oklch(0.88 0.01 80);
  font-size: 0.82rem;
  font-weight: 600;
  color: oklch(0.22 0.04 264);
}
.fb-ficha-amenity i, .fb-ficha-amenity svg {
  width: 16px;
  height: 16px;
  color: oklch(0.28 0.09 264);   /* §4.35.3 */
  flex-shrink: 0;
}

/* ── Carrusel de fotos reales en Qui som (_About.cshtml) y valores con icono ── */
.fb-about-carousel {
  position: relative;
  height: 440px;
  background: oklch(0.18 0.08 264);
}
@media (max-width: 640px) {
  .fb-about-carousel { height: 300px; }
}
.fb-about-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
.fb-about-slide.activo,
.fb-about-slide.active {
  opacity: 1;
  pointer-events: auto;
}
.fb-about-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 2.2rem 1.25rem 1rem;
  background: linear-gradient(to top, rgba(15, 23, 42, 0.88), transparent);
  color: white;
  font-size: 0.82rem;
  font-weight: 500;
}
.fb-about-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border-radius: 9999px;
  border: none;
  background: rgba(255, 255, 255, 0.88);
  color: oklch(0.22 0.04 264);
  font-size: 22px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  transition: background 0.2s, color 0.2s;
  z-index: 5;
}
.fb-about-nav:hover {
  background: oklch(0.55 0.17 37);
  color: white;
}
.fb-about-nav.prev { left: 12px; }
.fb-about-nav.next { right: 12px; }
.fb-about-dots {
  position: absolute;
  bottom: 12px;
  right: 14px;
  display: flex;
  gap: 6px;
  z-index: 5;
}
.fb-about-dot {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  border: none;
  background: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  padding: 0;
  transition: all 0.2s;
}
.fb-about-dot.activo,
.fb-about-dot.active {
  width: 22px;
  background: oklch(0.55 0.17 37);
}
.fb-values-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.15rem;
}
.fb-value-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: oklch(0.22 0.04 264);
}
.fb-value-icon {
  width: 36px;
  height: 36px;
  border-radius: 0.6rem;
  background: oklch(0.28 0.09 264 / 0.1);   /* §4.35.3: azul por defecto, como Professionalitat */
  color: oklch(0.28 0.09 264);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ── Carrusel horizontal de 3 tarjetas (Destacados y Reseñas Google) ── */
.fb-prop-carousel-wrap {
  position: relative;
  width: 100%;
}
.fb-prop-track {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 0.25rem 0.15rem 0.75rem;
}
.fb-prop-track::-webkit-scrollbar {
  display: none;
}
.fb-prop-slide {
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: start;
}
@media (min-width: 640px) {
  .fb-prop-slide {
    flex: 0 0 calc((100% - 1.5rem) / 2);
  }
}
@media (min-width: 1024px) {
  .fb-prop-slide {
    flex: 0 0 calc((100% - 3rem) / 3);
  }
}
.fb-prop-arrow {
  width: 42px;
  height: 42px;
  border-radius: 9999px;
  border: 1.5px solid oklch(0.84 0.015 80);
  background: white;
  color: oklch(0.28 0.09 264);
  font-size: 24px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
  transition: all 0.2s ease;
  z-index: 10;
}
.fb-prop-arrow:hover {
  background: oklch(0.55 0.17 37);
  border-color: oklch(0.55 0.17 37);
  color: white;
}
.fb-prop-carousel-wrap > .fb-prop-arrow.prev,
.fb-prop-carousel-wrap > .fb-prop-arrow.next {
  position: absolute;
  top: 44%;
  transform: translateY(-50%);
}
.fb-prop-carousel-wrap > .fb-prop-arrow.prev { left: -14px; }
.fb-prop-carousel-wrap > .fb-prop-arrow.next { right: -14px; }
@media (max-width: 640px) {
  .fb-prop-carousel-wrap > .fb-prop-arrow.prev { left: 4px; }
  .fb-prop-carousel-wrap > .fb-prop-arrow.next { right: 4px; }
}

/* ── Tarjetas de Instagram (@finquesbaraut) y logos oficiales del Footer ── */
.fb-ig-card {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 0.75rem;
  overflow: hidden;
  display: block;
  border: 1px solid oklch(0.88 0.01 80);
}
.fb-ig-overlay {
  position: absolute;
  inset: 0;
  background: oklch(0.18 0.08 264 / 0.74);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.25s ease;
  padding: 0.75rem;
}
.fb-ig-card:hover .fb-ig-overlay {
  opacity: 1;
}
/* §4.25 (WhatsApp del cliente, 3-11-2026): «els logos de sota han de ser més grans amb millor visualització».
   Fila propia y centrada con el título encima; los logos pasan de 32 px de alto a 68 px (52 px en móvil). */
.fb-footer-membres {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
}
.fb-footer-membres-titol {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: oklch(0.62 0.02 264);
}
.fb-footer-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}
.fb-footer-logo-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  padding: 0.65rem 1.1rem;
  border-radius: 0.75rem;
  height: 88px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.fb-footer-logo-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}
.fb-footer-logo-link img {
  max-height: 68px;
  width: auto;
  object-fit: contain;
  display: block;
}
@media (max-width: 639px) {
  .fb-footer-logos { gap: 0.65rem; }
  .fb-footer-logo-link { height: 68px; padding: 0.45rem 0.75rem; border-radius: 0.6rem; }
  .fb-footer-logo-link img { max-height: 52px; }
}

/* ── Utilidades de rejilla, espaciado y contenedor para secciones nuevas (no incluidas en el CSS compilado) ── */
.max-w-5xl { max-width: 64rem; }
.max-w-3xl { max-width: 48rem; }
.max-w-md { max-width: 28rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.gap-3\.5 { gap: 0.875rem; }
.mt-16 { margin-top: 4rem; }
.mt-5 { margin-top: 1.25rem; }
.mt-3 { margin-top: 0.75rem; }
.mb-7 { margin-bottom: 1.75rem; }
.mb-2\.5 { margin-bottom: 0.625rem; }
.mb-1\.5 { margin-bottom: 0.375rem; }
.pt-14 { padding-top: 3.5rem; }
.pb-12 { padding-bottom: 3rem; }
.p-7 { padding: 1.75rem; }
.pl-7 { padding-left: 1.75rem; }
.h-48 { height: 12rem; }
.whitespace-pre-line { white-space: pre-line; }
.text-white\/75 { color: rgba(255, 255, 255, 0.75); }
.text-white\/85 { color: rgba(255, 255, 255, 0.85); }
.text-white\/90 { color: rgba(255, 255, 255, 0.90); }
.hover\:scale-105:hover { transform: scale(1.05); }
.hover\:shadow-md:hover { box-shadow: 0 4px 12px rgba(15, 23, 42, 0.10); }
@media (min-width: 640px) {
  .sm\:items-center { align-items: center; }
  .sm\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
}
@media (min-width: 768px) {
  .md\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .md\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .md\:col-span-2 { grid-column: span 2 / span 2; }
  .md\:col-span-3 { grid-column: span 3 / span 3; }
  .md\:col-span-4 { grid-column: span 4 / span 4; }
  .md\:col-span-5 { grid-column: span 5 / span 5; }
  .md\:col-span-7 { grid-column: span 7 / span 7; }
  .md\:col-span-8 { grid-column: span 8 / span 8; }
  .md\:gap-14 { gap: 3.5rem; }
  .md\:h-full { height: 100%; }
  .md\:p-8 { padding: 2rem; }
  .md\:p-9 { padding: 2.25rem; }
  .md\:py-20 { padding-top: 5rem; padding-bottom: 5rem; }
  .md\:py-3\.5 { padding-top: 0.875rem; padding-bottom: 0.875rem; }
  .md\:text-2xl { font-size: 1.5rem; line-height: 2rem; }
}
@media (min-width: 1024px) {
  .lg\:flex-row { flex-direction: row; }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .lg\:col-span-1 { grid-column: span 1 / span 1; }
  .lg\:col-span-2 { grid-column: span 2 / span 2; }
  .lg\:col-span-5 { grid-column: span 5 / span 5; }
  .lg\:col-span-7 { grid-column: span 7 / span 7; }
}

/* ══════════════════════════════════════════════════════════════════════════
   §4.22 — Correos del cliente del 26 y 27-10-2026 (MODIFICACIONS 2 y 3)
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 4.22.1 Portada OPCIÓN 1: fondo BLANCO sin foto, «IDEAL» en naranja y el resto en azul.
   (La opción 2 reutiliza el hero con foto de siempre.) ── */
.fb-hero-blanc {
  position: relative;
  /* Crece con el contenido (nunca recorta): con altura fija 88vh, en un portátil 1366×768
     (ventana ≈657 px) el distintivo quedaba debajo del navbar y «Cerca ara» tapaba las cifras */
  min-height: max(560px, 88vh);
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* hueco del navbar fijo y sólido: 68 px en móvil, 101 px con la barra de contacto (md+) */
  padding: calc(68px + 2rem) 1rem 2.5rem;
}
@media (min-width: 768px) {
  .fb-hero-blanc { padding-top: calc(101px + 2rem); }
}
.fb-hero-blanc-titol {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 5.2vw, 3.6rem);   /* a 3.6rem cabe en 2 líneas en escritorio */
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: oklch(0.28 0.09 264);
  max-width: 1000px;
  margin: 0 0 1.25rem;
}
.fb-hero-blanc-titol .fb-hero-ideal { color: oklch(0.55 0.17 37); }
.fb-hero-blanc-linia {
  width: 3.5rem;
  height: 3px;
  border-radius: 2px;
  background: oklch(0.55 0.17 37);
  margin: 0 auto 1.5rem;
}
.fb-hero-blanc-sub {
  font-family: var(--font-body);
  font-size: clamp(1rem, 2vw, 1.15rem);
  line-height: 1.6;
  max-width: 580px;
  color: oklch(0.42 0.04 264);
  margin: 0 auto 2.5rem;
}
.fb-hero-blanc-cifras { display: flex; align-items: center; justify-content: center; gap: 2rem; }
@media (min-width: 768px) { .fb-hero-blanc-cifras { gap: 3.5rem; } }
.fb-hero-blanc-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.7rem, 4vw, 2.4rem);
  color: oklch(0.28 0.09 264);
}
.fb-hero-blanc-txt {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: oklch(0.5 0.03 264);
  margin-top: 0.25rem;
}
.fb-hero-blanc-cerca {
  /* en el flujo normal, debajo de las cifras (absoluta se montaba encima en pantallas bajas) */
  margin-top: 2.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  border: 1px solid oklch(0.28 0.09 264 / 0.25);
  color: oklch(0.28 0.09 264);
  background: #fff;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}
.fb-hero-blanc-cerca span { font-size: 0.65rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; }
.fb-hero-blanc-cerca:hover { background: oklch(0.28 0.09 264); color: #fff; }

/* ── 4.22.2 Botón directo a la valoración dentro de cada servicio ── */
.fb-serveis-valoracio {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid oklch(0.88 0.01 80);
}
.fb-boto-valoracio {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.2rem;
  border-radius: 0.6rem;
  background: #e05a2b;
  color: #fff;
  font-weight: 600;
  font-size: 0.85rem;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(224, 90, 43, 0.25);
  transition: opacity 0.2s ease;
}
.fb-boto-valoracio:hover { opacity: 0.9; }
.fb-enllac-correu {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: oklch(0.28 0.09 264);
  text-decoration: none;
}
.fb-enllac-correu:hover { text-decoration: underline; }

/* ── 4.22.3 Ressenyes de Google (texto acotado para tarjetas parejas, avatar de Google y pie) ── */
.fb-resenya-text {
  display: -webkit-box;
  -webkit-line-clamp: 7;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.fb-resenya-avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  object-fit: cover;
  flex-shrink: 0;
}
.fb-resenyes-peu { margin-top: 1.25rem; text-align: right; }
.fb-resenyes-peu a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: oklch(0.28 0.09 264);
  text-decoration: none;
}
.fb-resenyes-peu a:hover { text-decoration: underline; }

/* ── 4.22.4 Flechas a media altura de la FOTO de la tarjeta (200px), no de la tarjeta entera:
   «les fletxes als costats de la foto» (Cercador de la home y Destacados) ── */
.fb-prop-carousel-wrap.fb-fletxes-foto > .fb-prop-arrow.prev,
.fb-prop-carousel-wrap.fb-fletxes-foto > .fb-prop-arrow.next {
  top: calc(0.25rem + 100px);
}

/* ── 4.22.5 Cabecera de ZONA con foto en el buscador (?zona=) y chips de zonas ── */
.fb-zona-hero {
  position: relative;
  min-height: 380px;
  background-color: oklch(0.18 0.08 264);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
  padding: 8.5rem 0 2.5rem;
}
@media (min-width: 768px) {
  .fb-zona-hero { min-height: 460px; padding-top: 11rem; }
}
.fb-zona-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, oklch(0.14 0.06 264 / 0.60) 0%, oklch(0.14 0.06 264 / 0.30) 45%, oklch(0.14 0.06 264 / 0.85) 100%);
}
.fb-zona-hero > .container { position: relative; }
/* §4.35.4: crédito de la foto de la zona cuando la licencia lo pide (CC BY / CC BY-SA), abajo a la derecha */
.fb-foto-credito {
  position: absolute;
  right: 0.75rem;
  bottom: 0.45rem;
  z-index: 1;
  margin: 0;
  font-size: 0.65rem;
  line-height: 1.3;
  color: oklch(1 0 0 / 0.78);
  text-shadow: 0 1px 2px oklch(0 0 0 / 0.6);
}
.fb-foto-credito a { color: inherit; text-decoration: underline; }
.fb-zona-hero-pre {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.8rem;
  border-radius: 9999px;
  background: oklch(0.55 0.17 37 / 0.92);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 0.9rem;
}
.fb-zona-hero-titol {
  font-family: var(--font-display);
  font-weight: 700;
  color: #fff;
  font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: 1.1;
  margin: 0 0 0.6rem;
}
.fb-zona-hero-sub {
  color: rgba(255, 255, 255, 0.88);
  font-size: clamp(0.95rem, 1.8vw, 1.1rem);
  margin: 0 0 1.5rem;
}
.fb-zones-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.fb-zona-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.9rem;
  border-radius: 9999px;
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(6px);
  transition: all 0.2s ease;
}
.fb-zona-chip:hover,
.fb-zona-chip.activa { background: #fff; color: oklch(0.28 0.09 264); border-color: #fff; }
/* Variante clara: cabecera genérica del buscador (sin zona) */
.fb-zones-chips.clars { justify-content: center; margin-top: 1.25rem; }
.fb-zones-chips.clars .fb-zona-chip {
  border-color: oklch(0.85 0.015 80);
  color: oklch(0.35 0.05 264);
  background: #fff;
  backdrop-filter: none;
}
.fb-zones-chips.clars .fb-zona-chip:hover { background: oklch(0.28 0.09 264); color: #fff; border-color: oklch(0.28 0.09 264); }
.fb-zones-chips-label {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: oklch(0.5 0.03 264);
  margin-right: 0.25rem;
}
/* Tras la cabecera de zona el buscador no necesita el hueco del navbar (.fb-pagina) */
.fb-pagina.fb-tras-zona { padding-top: 0; }

/* ── 4.22.6 Banda «Voleu vendre o llogar…» en la home, justo antes de «Contacta amb nosaltres» ── */
.fb-cta-vendre-home { background: oklch(0.97 0.006 80); padding: 4.5rem 1rem 0; }

/* Con «reducir movimiento» del sistema los carruseles cambian de tarjeta sin animación (fbaraut.js) */
@media (prefers-reduced-motion: reduce) {
  .fb-prop-track { scroll-behavior: auto; }
}

/* ── §4.25 Marca «Reservat» (WhatsApp del cliente, 3-11-2026: «quan es posa reservat un pis surt malament»).
   UNA sola marca, en HTML y traducida: antes la foto traía otra estampada (girada 30°) y se cruzaba con la de la
   tarjeta (girada -8°). En la tarjeta: velo suave sobre la foto y la etiqueta centrada, sin girar. ── */
.fb-reservat {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: oklch(0.18 0.08 264 / 0.32);
  pointer-events: none;
}
/* §4.35.2 (correo del cliente, 10-11-2026: «fons blau, lletres blanques i amb majúscules»): fondo azul de la web y
   letras blancas; el borde blanco la separa de la foto. Antes, fondo blanco con letras y borde azules. */
.fb-reservat span,
.fb-reservat-ficha span {
  display: inline-block;
  background: oklch(0.28 0.09 264);
  color: #ffffff;
  border: 2px solid #ffffff;
  border-radius: 0.4rem;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 0.78rem;
  line-height: 1;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  /* el letter-spacing deja aire tras la última letra: se compensa a la izquierda */
  padding: 0.55rem 0.95rem 0.55rem 1.17rem;
  box-shadow: 0 6px 18px oklch(0 0 0 / 0.28);
}
/* En la ficha: en la esquina del visor, sin velo, para no tapar la foto ni el zoom */
.fb-reservat-ficha {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 3;
  pointer-events: none;
}
.fb-reservat-ficha span { font-size: 0.85rem; padding: 0.65rem 1.05rem 0.65rem 1.3rem; }
/* Y junto a Venda/Lloguer en la columna de datos de la ficha */
.fb-reservat-chip {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: 9999px;
  border: 1.5px solid oklch(0.28 0.09 264);
  color: #ffffff;
  background: oklch(0.28 0.09 264);   /* §4.35.2: azul con letras blancas, como la etiqueta de la foto */
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ── §4.25 Menú móvil. Con poca altura de pantalla el panel encogía sus bloques (flex sin flex-shrink:0) y el
   teléfono y el correo se pintaban encima de Blog y del botón Cercador («està enganxat telf i mail amb cercador»).
   Ahora nada encoge: si no cabe, el panel se desplaza (ya tenía overflow-y:auto). ── */
#fb-mobile-panel > *,
#fb-mobile-panel nav > * { flex-shrink: 0; }
.fb-mobil-contacte {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid oklch(1 0 0 / 0.1);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.fb-mobil-contacte a {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.875rem;
  line-height: 1.3;
  color: oklch(1 0 0 / 0.78);
  text-decoration: none;
}
.fb-mobil-contacte a:hover { color: #ffffff; }
/* §4.35.3: azul claro, que sobre el fondo azul oscuro del panel se ve (el azul de la web no) */
.fb-mobil-contacte i, .fb-mobil-contacte svg { color: oklch(0.78 0.08 264); flex-shrink: 0; }

/* ── §4.25 Menú de escritorio entre 1024 y 1279 px (portátil pequeño, iPad en horizontal). No cabía en ningún
   idioma: «Contacta'ns» quedaba cortado (unos 125 px en catalán, más en castellano y francés). En ese tramo los
   enlaces van sin icono y con menos aire; desde 1280 px, como siempre. ── */
@media (min-width: 1024px) and (max-width: 1279px) {
  #fb-navbar nav { gap: 0; }
  #fb-navbar nav .fb-navlink { padding-left: 0.5rem; padding-right: 0.5rem; gap: 0.25rem; white-space: nowrap; }
  #fb-navbar nav .fb-navlink > svg:not(.fb-dropdown-caret) { display: none; }
  #fb-navbar .fb-nav-boton { padding-left: 0.75rem; padding-right: 0.75rem; white-space: nowrap; }
}

/* §4.25: con el menú móvil abierto (body.fb-menu-abierto, fbaraut.js) el botón flotante de WhatsApp no tapa el panel */
body.fb-menu-abierto .fb-whatsapp-flotant { display: none; }

/* §4.30.2: textos legales (/Privacidad). El CSS de base quita márgenes y viñetas: aquí vuelven para leerse bien */
.fb-texto-legal { color: oklch(0.42 0.03 264); font-size: 0.92rem; line-height: 1.8; }
.fb-texto-legal p { margin: 0 0 1em; }
.fb-texto-legal p:last-child { margin-bottom: 0; }
.fb-texto-legal strong { color: oklch(0.22 0.04 264); }
.fb-texto-legal ul { list-style: disc; padding-left: 1.4em; margin: 0 0 1em; }
.fb-texto-legal li { margin-bottom: 0.4em; }
.fb-texto-legal a { color: oklch(0.55 0.17 37); text-decoration: underline; word-break: break-word; }

/* §4.36: textos legales de Jaume (/AvisoLegal, /Privacidad y /Cookies): títulos de apartado, fecha y tablas.
   En el móvil, la tabla de cookies (4 columnas) se desplaza dentro de su caja; la página no */
.fb-texto-legal > :first-child { margin-top: 0; }
.fb-texto-legal h2 {
  font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; line-height: 1.35;
  color: oklch(0.22 0.04 264); margin: 1.8em 0 0.6em;
}
.fb-texto-legal h3 { font-size: 1rem; font-weight: 600; line-height: 1.4; color: oklch(0.22 0.04 264); margin: 1.4em 0 0.5em; }
.fb-texto-legal em { font-style: italic; }
.fb-texto-legal .fb-legal-fecha { font-size: 0.8rem; color: oklch(0.55 0.03 264); }
.fb-tabla-legal { overflow-x: auto; margin: 0 0 1.4em; }
.fb-texto-legal table { width: 100%; border-collapse: collapse; font-size: 0.84rem; line-height: 1.55; }
.fb-texto-legal th, .fb-texto-legal td {
  border: 1px solid oklch(0.88 0.01 80); padding: 0.55rem 0.7rem; text-align: left; vertical-align: top; overflow-wrap: anywhere;
}
.fb-texto-legal thead th { background: oklch(0.28 0.09 264 / 0.06); color: oklch(0.22 0.04 264); font-weight: 600; }
/* §4.36 (revisión): los títulos de fila no se parten a media palabra («Respons|able» en el móvil) */
.fb-texto-legal tbody th { width: 30%; color: oklch(0.22 0.04 264); font-weight: 600; overflow-wrap: normal; }
/* Tabla de cookies del Word (4 columnas). En el móvil se desplaza dentro de su caja. §4.36 (revisión): nada se parte a
   media palabra. La dirección solo se parte tras «https://» (lleva un <wbr>, TextosLegales.cs), el nombre de la cookie
   y la duración van en una línea, y la finalidad se queda el resto */
.fb-texto-legal table.fb-tabla-cookies { min-width: 38rem; font-size: 0.8rem; }
.fb-texto-legal .fb-tabla-cookies th, .fb-texto-legal .fb-tabla-cookies td { padding: 0.5rem 0.6rem; }
.fb-tabla-cookies th:nth-child(1), .fb-tabla-cookies td:nth-child(1), .fb-tabla-cookies td:nth-child(1) a { overflow-wrap: normal; word-break: normal; }
.fb-tabla-cookies th:nth-child(2), .fb-tabla-cookies td:nth-child(2) { white-space: nowrap; }
.fb-tabla-cookies th:nth-child(4), .fb-tabla-cookies td:nth-child(4) { white-space: nowrap; }

/* §4.36: texto legal del formulario de contacto (OPCIÓN A del Word de Jaume) y aviso si falta la casilla obligatoria */
.fb-form-legal { display: flex; flex-direction: column; gap: 0.75rem; font-size: 0.75rem; line-height: 1.55; color: oklch(0.45 0.03 264); }
.fb-form-legal p { margin: 0; }
.fb-form-casella { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.8rem; color: oklch(0.35 0.03 264); cursor: pointer; }
.fb-form-casella input {
  width: 1.05rem; height: 1.05rem; margin: 0.15rem 0 0; flex-shrink: 0; cursor: pointer; accent-color: oklch(0.28 0.09 264);
}
.fb-form-info { display: flex; flex-direction: column; gap: 0.2rem; background: oklch(0.97 0.006 80); border-radius: 0.6rem; padding: 0.75rem 0.9rem; }
.fb-form-info-titol { color: oklch(0.3 0.04 264); margin-bottom: 0.15rem !important; }
.fb-form-etiqueta { font-weight: 600; color: oklch(0.3 0.04 264); }
.fb-form-legal a, .fb-form-obligatori a { color: oklch(0.55 0.17 37); text-decoration: underline; overflow-wrap: anywhere; }
.fb-form-aviso {
  margin: 0; padding: 0.6rem 0.8rem; border-radius: 0.5rem; border-left: 3px solid oklch(0.55 0.17 37);
  background: oklch(0.96 0.03 37); color: oklch(0.38 0.12 37); font-size: 0.8rem; font-weight: 600;
}
.fb-form-obligatori { margin: 0; font-size: 0.72rem; text-align: center; color: oklch(0.5 0.03 264); }

/* §4.36: banner de cookies (Guía de la AEPD, 2023). Abajo y sin bloquear la web (fuera de la caja se puede pulsar).
   Los botones de cada capa son iguales en tamaño, color y peso: ninguno destaca. Por encima del WhatsApp (z 50) y de
   los menús (60); por debajo del visor de fotos (90) */
.fb-cookies {
  position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 80;
  display: flex; justify-content: center; pointer-events: none;
}
.fb-cookies[hidden], .fb-cookies-capa[hidden] { display: none !important; }
.fb-cookies-capa {
  pointer-events: auto; width: 100%; max-width: 60rem; max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem); overflow-y: auto;
  background: #ffffff; color: oklch(0.22 0.04 264); border: 1px solid oklch(0.88 0.01 80); border-radius: 1rem;
  box-shadow: 0 12px 40px oklch(0.18 0.08 264 / 0.28); padding: 1.25rem 1.5rem; font-family: var(--font-body);
}
.fb-cookies-titol { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; color: oklch(0.28 0.09 264); margin: 0 0 0.4rem; }
.fb-cookies-titol:focus { outline: none; }
.fb-cookies-text { margin: 0; font-size: 0.85rem; line-height: 1.6; color: oklch(0.42 0.03 264); }
.fb-cookies-text a, .fb-cookies-enllac { color: oklch(0.28 0.09 264); font-weight: 600; text-decoration: underline; }
.fb-cookies-enllac { display: inline-block; margin-top: 0.4rem; font-size: 0.8rem; }
.fb-cookies-botons { display: flex; gap: 0.75rem; margin-top: 1rem; }
.fb-cookies-boto {
  flex: 1 1 0; min-width: 0; padding: 0.75rem 1rem; border: 0; border-radius: 0.75rem;
  background: oklch(0.28 0.09 264); color: #ffffff; font-family: inherit; font-size: 0.875rem; font-weight: 600; line-height: 1.25;
  cursor: pointer; transition: background 0.2s;
}
.fb-cookies-boto:hover { background: oklch(0.36 0.09 264); }
.fb-cookies-cat { margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid oklch(0.92 0.01 80); }
.fb-cookies-cat-cap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.35rem; }
.fb-cookies-cat-titol { margin: 0; font-size: 0.95rem; font-weight: 700; color: oklch(0.22 0.04 264); }
.fb-cookies-sempre {
  font-size: 0.72rem; font-weight: 600; white-space: nowrap; color: oklch(0.28 0.09 264);
  background: oklch(0.28 0.09 264 / 0.1); border-radius: 999px; padding: 0.2rem 0.6rem;
}
.fb-cookies-llista { list-style: none; margin: 0.5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.8rem; color: oklch(0.42 0.03 264); }
.fb-cookies-llista li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.6rem; }
.fb-cookies-llista code {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 0.78rem; color: oklch(0.22 0.04 264);
  background: oklch(0.96 0.008 80); border-radius: 0.3rem; padding: 0.05rem 0.35rem; overflow-wrap: anywhere;
}
/* Interruptor de «Mapes de Google»: la casilla de verdad (role="switch") va encima, invisible; la pista es el dibujo */
.fb-interruptor { position: relative; display: inline-flex; flex-shrink: 0; width: 2.75rem; height: 1.5rem; }
.fb-interruptor input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.fb-interruptor-pista { position: absolute; inset: 0; border-radius: 999px; background: oklch(0.6 0.02 264); transition: background 0.2s; }
.fb-interruptor-pista::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: calc(1.5rem - 6px); height: calc(1.5rem - 6px);
  border-radius: 50%; background: #ffffff; box-shadow: 0 1px 3px oklch(0 0 0 / 0.3); transition: transform 0.2s;
}
.fb-interruptor input:checked + .fb-interruptor-pista { background: oklch(0.28 0.09 264); }
.fb-interruptor input:checked + .fb-interruptor-pista::after { transform: translateX(1.25rem); }
/* «Configurar cookies» del pie: un botón con aspecto de enlace, como los de al lado */
.fb-pie-cookies { margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
/* §4.36 (revisión): en el móvil la fila de enlaces legales se parte; los «·» quedaban colgando, así que se esconden y
   los separa el hueco de la fila */
@media (max-width: 640px) { .fb-pie-sep { display: none; } }
/* §4.36 (revisión): con el menú del móvil abierto, el banner se esconde, como el WhatsApp: tapaba medio menú y el
   selector de idioma, que en el móvil solo está ahí. Vuelve al cerrarlo. Y mientras se ve el banner
   (body.fb-cookies-visible, la pone fbaraut-cookies.js), el WhatsApp se esconde: asomaba cortado por su borde */
body.fb-menu-abierto .fb-cookies { display: none; }
body.fb-cookies-visible .fb-whatsapp-flotant { display: none; }
/* Foco visible en todo lo que se usa con el teclado (banner, panel, recuadros del mapa y pie) */
.fb-cookies-boto:focus-visible, .fb-cookies a:focus-visible, .fb-interruptor input:focus-visible + .fb-interruptor-pista,
.fb-mapa-bloquejat button:focus-visible, .fb-mapa-bloquejat a:focus-visible, .fb-pie-cookies:focus-visible {
  outline: 3px solid oklch(0.55 0.17 37); outline-offset: 2px;
}
@media (max-width: 640px) {
  .fb-cookies { left: 0.75rem; right: 0.75rem; bottom: 0.75rem; }
  .fb-cookies-capa { padding: 1rem; max-height: calc(100vh - 1.5rem); max-height: calc(100dvh - 1.5rem); }
  .fb-cookies-botons { flex-direction: column; gap: 0.5rem; }
  .fb-cookies-boto { flex: none; width: 100%; }
}

/* §4.36: recuadro en lugar de un mapa de Google mientras no se acepten los «Mapes de Google» (Contacte y /Mapa) */
.fb-mapa-bloquejat {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; text-align: center;
  padding: 1.25rem; overflow-y: auto; background: oklch(0.96 0.008 80); color: oklch(0.42 0.03 264); font-size: 0.85rem; line-height: 1.55;
}
.fb-mapa-bloquejat p { margin: 0; max-width: 34rem; }
.fb-mapa-bloquejat-icona {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2.75rem; height: 2.75rem;
  border-radius: 50%; background: oklch(0.28 0.09 264 / 0.1); color: oklch(0.28 0.09 264);
}
.fb-mapa-bloquejat-accions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.6rem 1.25rem; }
.fb-mapa-boto {
  padding: 0.6rem 1.2rem; border: 0; border-radius: 0.6rem; background: oklch(0.28 0.09 264); color: #ffffff;
  font-family: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer;
}
.fb-mapa-boto:hover { background: oklch(0.36 0.09 264); }
.fb-mapa-bloquejat a { color: oklch(0.28 0.09 264); font-weight: 600; text-decoration: underline; }
.fb-mapa-nota { font-size: 0.75rem; color: oklch(0.5 0.03 264); }
.fb-mapa-nota button {
  margin: 0; padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: oklch(0.28 0.09 264);
  text-decoration: underline; cursor: pointer;
}
@media (max-width: 480px) {
  .fb-mapa-bloquejat { gap: 0.5rem; padding: 0.9rem; font-size: 0.8rem; }
  .fb-mapa-bloquejat-icona { display: none; }
}