/* ════════════════════════════════════════════════════════════
   SHINY CTA · texto brillante animado (shimmer dorado) en botones
   Se aplica a .btn-premium y CTAs clave. Sutil, luxury, no estridente.
   ════════════════════════════════════════════════════════════ */
@keyframes cbdShinySweep {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* El texto del botón recibe un barrido de brillo dorado periódico */
.btn-premium, .reservar-quick-btn, .diag-submit {
  position: relative;
  overflow: hidden;
}
/* Capa de brillo que recorre el botón (sobre el fondo, bajo el texto) */
.btn-premium::after {
  content: "";
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(
    115deg,
    transparent 30%,
    rgba(255, 245, 220, 0.45) 48%,
    rgba(255, 255, 255, 0.6) 50%,
    rgba(255, 245, 220, 0.45) 52%,
    transparent 70%
  );
  background-size: 220% 100%;
  background-position: 200% 0;
  animation: cbdShinySweep 4.5s ease-in-out infinite;
  mix-blend-mode: screen;
}
.btn-premium > * { position: relative; z-index: 2; }

/* Variante para texto con shimmer dorado (titulares/realces opcionales) */
.cbd-shiny-text {
  background: linear-gradient(
    90deg,
    var(--gold-dark, #9A7B36) 0%,
    var(--gold, #C9A24E) 35%,
    #FFF6DC 50%,
    var(--gold, #C9A24E) 65%,
    var(--gold-dark, #9A7B36) 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: cbdShinySweep 6s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .btn-premium::after, .cbd-shiny-text { animation: none; }
  .btn-premium::after { display: none; }
}

/* ════════════════════════════════════════════════════════════
   FIX · BOTONES PILL: forma redondeada + texto SIEMPRE visible al tocar
   Causa: el texto va como nodo suelto (sin <span>), bajo el brillo/ripple,
   y el ripple universal añadía un overlay cuadrado. Solución: contexto de
   apilado propio, contenido siempre por encima, ripple circular y detrás.
   ════════════════════════════════════════════════════════════ */
.btn-premium, .magnetic, .reserve-link, .reservar-quick-btn,
.diag-submit, .svc3-diag-btn, .lashrail-btn, .net-cta-btn, .cbd-glass{
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  position: relative;
}
.btn-premium > *, .magnetic > *, .reserve-link > *,
.reservar-quick-btn > *, .diag-submit > *, .svc3-diag-btn > *,
.lashrail-btn > *, .net-cta-btn > *{
  position: relative; z-index: 3 !important;
}
.btn-premium::after, .btn-premium::before,
.magnetic::after, .magnetic::before{ z-index: 1 !important; }
.cbd-ripple{ border-radius: 50% !important; z-index: 0 !important; }
.btn-premium:active, .magnetic:active, .reserve-link:active,
.reservar-quick-btn:active, .diag-submit:active, .svc3-diag-btn:active,
.net-cta-btn:active, .cbd-glass:active{ border-radius: 999px; color: var(--cream, #FCFBF9); }
.lashrail-btn:active{ border-radius: inherit; }