/* ==========================================================================
   BAAN PHO — barra.css  ·  barra flotante inferior + FAB WhatsApp desktop
   (componente 3). Valores de "Baan Pho - Home v4.dc.html", líneas 714–740.
   Estado: .visible la pone js al pasar 480px de scroll (línea 805: y > 480).
   ========================================================================== */

/* Mismo centrado por márgenes que el header, y por el mismo motivo: con
   left:50% + translateX(-50%) el borde izquierdo caía en media fracción de
   píxel y se colaba una raya del fondo. Ver la nota de header.css. */
.bp-mobilebar {
  position: fixed;
  left: 0;
  right: 0;
  margin: 0 auto;
  transform: translateY(150%);
  bottom: 0;
  width: 100%;
  z-index: var(--z-barra);
  opacity: 0;
  transition: transform .45s var(--ease-panel), opacity .45s ease;
  pointer-events: none;
}

.bp-mobilebar.visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.bp-mobilebar-inner { position: relative; }

/* halo semitransparente uniforme que toca el encaje de la barra */
.bp-barra-halo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -38px;
  z-index: 2;
  width: 104px;
  height: 104px;
  border-radius: var(--r-circulo);
  background: rgba(var(--verde-bosque-rgb), 0.22);
  backdrop-filter: blur(2px);
}

/* CTA circular dorado con el logo, sobresale de la barra */
.bp-barra-cta {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -28px;
  z-index: 3;
  width: 84px;
  height: 84px;
  border-radius: var(--r-circulo);
  background: var(--degradado-oro);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  box-shadow: var(--sombra-fab-movil);
}
.bp-barra-cta:hover { color: var(--sobre-oro); }

.bp-barra-cta-aro {
  position: absolute;
  inset: 4px;
  border-radius: var(--r-circulo);
  border: 1px solid rgba(var(--sobre-oro-rgb), 0.35);
}

.bp-barra-cta img {
  width: 32px;
  height: 28px;
  filter: brightness(0.22);
}

.bp-barra-cta span:last-child {
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-boton);
  color: var(--sobre-oro);
  font-weight: var(--fw-fuerte);
}

/* franja de la barra, con el encaje circular recortado por máscara */
.bp-barra-franja {
  position: relative;
  padding: 20px 26px calc(14px + env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1.5px solid var(--oro-500);
  background-image: linear-gradient(rgba(var(--verde-header), 0.86), rgba(var(--verde-barra-2), 0.92)), var(--trama-masaje);
  background-size: auto, 430px;
  -webkit-mask: radial-gradient(circle 52px at 50% 14px, transparent 50px, var(--opaco) 51px);
  mask: radial-gradient(circle 52px at 50% 14px, transparent 50px, var(--opaco) 51px);
}

.bp-barra-accion {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 70px;
  color: var(--oro-200);
}
.bp-barra-accion:hover { color: var(--oro-200); }

.bp-barra-accion span {
  font-size: var(--fs-3xs);
  letter-spacing: var(--ls-boton);
  font-weight: var(--fw-fuerte);
}

.bp-barra-hueco { width: 100px; }

/* ---- FAB WhatsApp (solo desktop) ---- */
.bp-deskwa {
  display: none;
  position: fixed;
  right: 32px;
  bottom: 32px;
  z-index: var(--z-barra);
  width: 62px;
  height: 62px;
  border-radius: var(--r-circulo);
  background: var(--degradado-oro);
  align-items: center;
  justify-content: center;
  box-shadow: var(--sombra-fab-desktop);
}

@media (min-width: 900px) {
  .bp-mobilebar { display: none; }
  .bp-deskwa { display: flex; }
}