/* Selector de plan de la demo (Origin Web). Aislado del diseño de la barbería. */
.plan-switch {
  position: fixed; right: 16px; bottom: 16px; z-index: 140;
  font-family: "Helvetica Neue", Arial, sans-serif; font-size: 11px; letter-spacing: 0.08em; color: #f2efe9;
}
.plan-switch summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 12px; background: rgba(36, 36, 36, 0.92); border: 1px solid rgba(242, 239, 233, 0.22);
  border-radius: 999px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  text-transform: uppercase; user-select: none; transition: border-color 0.2s;
}
.plan-switch summary::-webkit-details-marker { display: none; }
.plan-switch summary:hover { border-color: rgba(242, 239, 233, 0.5); }
.plan-switch summary:focus-visible { outline: 2px solid #b5a38f; outline-offset: 2px; }
.ps-kicker { color: #b5a38f; }
.ps-current { font-weight: 700; }
.ps-caret { width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-135deg) translate(-1px, -1px); transition: transform 0.2s; }
.plan-switch[open] .ps-caret { transform: rotate(45deg) translate(-2px, -2px); }
.ps-panel {
  position: absolute; right: 0; bottom: 42px; width: 230px; padding: 10px;
  background: #171717; border: 1px solid rgba(242, 239, 233, 0.22); border-radius: 12px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}
.ps-title { margin: 2px 6px 8px; color: rgba(242, 239, 233, 0.6); font-size: 10px; text-transform: uppercase; }
.ps-panel a { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 10px; border-radius: 8px; color: #f2efe9; text-decoration: none; }
.ps-panel a span { font-weight: 700; font-size: 13px; letter-spacing: 0.02em; }
.ps-panel a small { color: rgba(242, 239, 233, 0.6); font-size: 10px; letter-spacing: 0.04em; }
.ps-panel a:hover { background: rgba(242, 239, 233, 0.08); }
.ps-panel a[aria-current="page"] { background: #f2efe9; color: #0b0b0b; }
.ps-panel a[aria-current="page"] small { color: #80674f; }
@media (max-width: 760px) {
  /* En móvil: pestaña compacta al borde derecho, sin tapar los CTA inferiores */
  .plan-switch { right: 0; bottom: auto; top: 58%; }
  .plan-switch summary { height: 30px; padding: 0 10px; border-radius: 8px 0 0 8px; border-right: 0; font-size: 10px; gap: 6px; }
  .ps-kicker { display: none; }
  .ps-panel { bottom: auto; top: 38px; right: 8px; }
}
@media print { .plan-switch { display: none; } }
