/* ============================================================
   Componentes compartidos: botones, mini-botón Pedir, FAB, divisor
   ============================================================ */

/* Botón pill */
.btn{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-family:var(--bo-display);
  font-weight:500;
  font-size:12.5px;
  letter-spacing:.13em;
  text-transform:uppercase;
  padding:12px 22px;
  border:1px solid var(--accent);
  border-radius:var(--bo-radius-pill);
  white-space:nowrap;
  cursor:pointer;
  transition:.18s ease;
}
.btn svg{ width:16px; height:16px; flex:none; }
.btn.solid{ background:var(--accent); color:var(--accent-ink); }
.btn.solid:hover{ filter:brightness(.93); }
.btn.ghost{ background:transparent; color:var(--accent); }
.btn.ghost:hover{ background:color-mix(in srgb, var(--accent) 8%, transparent); }

/* Mini-botón "Pedir" de las cards */
.pedir{
  font-family:var(--bo-display);
  font-weight:500;
  font-size:11.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--accent);
  border:1px solid var(--accent);
  border-radius:var(--bo-radius-pill);
  padding:9px 16px;
  white-space:nowrap;
  transition:.18s ease;
}
.pedir:hover{ background:var(--accent); color:var(--accent-ink); }

/* Divisor de espigas (línea — isotipo — línea) */
.rule{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  padding:4px 22px;
}
.rule::before,.rule::after{
  content:"";
  width:46px;
  height:1px;
  background:var(--bo-salmon);
  opacity:.6;
}
.rule img{ width:18px; opacity:.55; }

/* FAB de WhatsApp (solo móvil) */
.fab{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:50;
  width:56px;
  height:56px;
  border-radius:50%;
  background:var(--wa-green);
  display:none;
  place-items:center;
  box-shadow:0 12px 28px -8px rgba(0,0,0,.4);
}
.fab svg{ width:30px; height:30px; fill:#fff; }

@media (max-width:640px){
  .fab{ display:grid; }
}