/* =========================================================
   BLISS HOMES — Capa UX compartida
   Añadido 25-ago-2026. Se carga en todas las páginas.
   Contiene: microinteracciones al pulsar (:active), foco de
   teclado coherente y botón "volver arriba".
   Colores tomados de las vars de cada tema (site oscuro /
   blog claro) con fallback propio.
   ========================================================= */

/* ---------- 1. Microinteracciones: feedback al pulsar ----------
   El sitio ya tenía :hover, pero en móvil no existe hover: sin
   :active el usuario no recibe confirmación de que ha pulsado. */
.btn, .btn-primary, .btn-ghost, .btn-green, .btn-outline, .btn-next, .btn-back,
.cta-inline, .cta-study, .cta-band-btn, .cta-call, .cta-external, .cta-primary,
.cta-ghost, .cta-pill, .nav-cta, .tdh-btn-primary, .td-btn-primary,
.option-btn, .lib-filter, .calc-model-btn, .nav-burger, .nav-dd-btn, .lt-card {
  -webkit-tap-highlight-color: transparent;
}

.btn:active, .btn-primary:active, .btn-ghost:active, .btn-green:active,
.btn-outline:active, .btn-next:active, .btn-back:active,
.cta-inline:active, .cta-study:active, .cta-band-btn:active, .cta-call:active,
.cta-external:active, .cta-primary:active, .cta-ghost:active, .cta-pill:active,
.nav-cta:active, .tdh-btn-primary:active, .td-btn-primary:active,
.option-btn:active, .lib-filter:active, .calc-model-btn:active {
  transform: translateY(1px) scale(.985);
  transition-duration: .07s;
  filter: brightness(.94);
}

.nav-burger:active, .nav-dd-btn:active { transform: scale(.92); transition-duration: .07s; }
.lt-card:active { transform: scale(1.015) translateY(-2px); transition-duration: .07s; }

/* ---------- 2. Foco de teclado coherente (a11y) ---------- */
:where(a, button, [role="button"], input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--blue, #40A9FF);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- 3. Botón volver arriba ----------
   Lo inyecta assets/ux.js. Oculto hasta pasar el umbral. */
#bh-top {
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 900;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1.5px solid rgba(255,255,255,.28);
  border-radius: 50%;
  background: #1A2E52;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 6px 22px rgba(0,0,0,.28);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px) scale(.9);
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
#bh-top.is-visible { opacity: 1; visibility: visible; transform: none; }
#bh-top:hover { background: #24406F; transform: translateY(-2px); }
#bh-top:active { transform: translateY(1px) scale(.94); transition-duration: .07s; }
#bh-top svg { width: 19px; height: 19px; display: block; }

/* Si la página lleva la burbuja de WhatsApp (.wa-float: 60x60 en 18/22,
   54x54 en 14/82 en móvil), el botón se apila justo encima. */
.bh-has-wa #bh-top { right: 25px; bottom: 96px; }

@media (max-width: 720px) {
  #bh-top { width: 42px; height: 42px; bottom: max(20px, env(safe-area-inset-bottom)); }
  .bh-has-wa #bh-top { right: 20px; bottom: calc(148px + env(safe-area-inset-bottom)); }
}

/* ---------- 4. Iconos sociales del footer ---------- */
.bh-social { display: flex; gap: 12px; align-items: center; justify-content: center; margin: 0 0 28px; }
.bh-social a {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--rule, rgba(255,255,255,.12));
  color: var(--ink-2, rgba(255,255,255,.72));
  transition: transform .2s ease, color .2s ease, border-color .2s ease, background .2s ease;
}
.bh-social a:hover {
  color: var(--blue, #40A9FF);
  border-color: var(--blue, #40A9FF);
  transform: translateY(-2px);
}
.bh-social a:active { transform: translateY(1px) scale(.94); transition-duration: .07s; }
.bh-social svg { width: 18px; height: 18px; display: block; }

/* ---------- 5. Respetar preferencia de movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  #bh-top, .bh-social a { transition: opacity .01ms, visibility .01ms; }
  #bh-top.is-visible { transform: none; }
  #bh-top:hover, .bh-social a:hover { transform: none; }
}