/*
 * btn-global.css — Estándar GLOBAL de botones Serenity Spa
 * ──────────────────────────────────────────────────────────
 * USO: <link rel="stylesheet" href="/assets/btn-global.css">
 * Aplica a cualquier botón con clase .btn-primary, .btn-gold, .btn-wa, .btn-wa-on-dark
 * SIN reemplazar el resto del layout de la página (no-invasivo).
 * Si cambias estilos aquí, se replica en TODO el portal automáticamente.
 * ──────────────────────────────────────────────────────────
 */

/* --- BASE ROUNDED FULL --- */
.btn-primary, .btn-gold, .btn-wa, .btn-wa-on-dark, .btn-outline,
.nh-cta-wa, .svc-cta-pay, .svc-cta-wa {
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:1rem 1.8rem;
  border:none; border-radius:50px;
  font-family:'Inter',system-ui,sans-serif; font-size:.78rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  cursor:pointer; text-decoration:none;
  transition:all .35s cubic-bezier(.22,.61,.36,1);
  white-space:nowrap; overflow:hidden;
}
.btn-primary.btn-sm, .btn-gold.btn-sm, .btn-wa.btn-sm {padding:.7rem 1.3rem;font-size:.7rem;letter-spacing:.12em}
.btn-primary.btn-lg, .btn-gold.btn-lg, .btn-wa.btn-lg {padding:1.15rem 2rem;font-size:.78rem;letter-spacing:.14em}

/* --- BURGUNDY (primary, comprar/pagar) --- */
.btn-primary, .nh-cta-wa[href*="comprar-bono"]+.btn-fix /* selector dummy */ {
  background:linear-gradient(135deg,#5b2c3a 0%,#3d1d27 100%); color:#fff !important;
  box-shadow:0 8px 22px -10px rgba(91,44,58,.5);
}
.btn-primary:hover, .nh-cta-wa[href*="maps.google"]:hover {
  background:linear-gradient(135deg,#3d1d27 0%,#2a1320 100%);
  transform:translateY(-2px); box-shadow:0 14px 32px -10px rgba(91,44,58,.55);
}

/* --- GOLD (secondary, planes) --- */
.btn-gold, .nh-cta-wa[href*="comprar-bono"], .svc-cta-pay {
  background:linear-gradient(135deg,#c9a779 0%,#a68753 100%); color:#3d1d27 !important;
  box-shadow:0 8px 22px -10px rgba(201,167,121,.5);
}
.btn-gold:hover, .nh-cta-wa[href*="comprar-bono"]:hover, .svc-cta-pay:hover {
  background:linear-gradient(135deg,#d8bb8c 0%,#c9a779 100%);
  transform:translateY(-2px); box-shadow:0 14px 32px -10px rgba(201,167,121,.6);
}

/* --- WHATSAPP (verde gradient con tinte oro) --- */
.btn-wa, .svc-cta-wa, .nh-cta-wa:not([href*="comprar-bono"]):not([href*="maps.google"]) {
  background:linear-gradient(135deg,#0f7a6e 0%,#0a5d54 100%); color:#fff !important;
  box-shadow:0 8px 22px -10px rgba(15,122,110,.55); position:relative;
}
.btn-wa:hover, .svc-cta-wa:hover, .nh-cta-wa:not([href*="comprar-bono"]):not([href*="maps.google"]):hover {
  background:linear-gradient(135deg,#0a6b5f 0%,#08504a 100%);
  transform:translateY(-2px); box-shadow:0 14px 32px -10px rgba(15,122,110,.65);
}

/* --- MAPS (azul Google, segundo en cerca-hoteles) --- */
.nh-cta-wa[href*="maps.google"] {
  background:linear-gradient(135deg,#5b2c3a 0%,#3d1d27 100%); color:#fff !important;
  box-shadow:0 8px 22px -10px rgba(91,44,58,.55);
}

/* --- OUTLINE burgundy (Ver detalles, etc — DEPRECATED ya no se usa, cards son clickables) --- */
.btn-outline, .nh-link-landing {
  background:transparent; color:#5b2c3a !important; border:1.5px solid #5b2c3a !important;
  box-shadow:none;
}
.btn-outline:hover, .nh-link-landing:hover {
  background:#5b2c3a; color:#fff !important; transform:translateY(-2px);
}

/* --- CARD CLICKABLE PATRÓN --- */
.card-clickable { display:block; cursor:pointer; text-decoration:none; color:inherit; transition:all .3s cubic-bezier(.22,.61,.36,1); }
.card-clickable:hover { transform:translateY(-4px); box-shadow:0 18px 40px -16px rgba(91,44,58,.25); }

/* --- Mobile compact --- */
@media (max-width:600px){
  .btn-primary, .btn-gold, .btn-wa, .btn-wa-on-dark, .nh-cta-wa, .svc-cta-pay, .svc-cta-wa {
    padding:.85rem 1.4rem; font-size:.72rem; letter-spacing:.1em;
  }
}

/* --- Respeta reduced-motion --- */
@media (prefers-reduced-motion:reduce){
  .btn-primary, .btn-gold, .btn-wa, .nh-cta-wa, .card-clickable {transition:none !important;}
}