/* ============================================================
   FrandoWeb — Sistema de botones (marca: violeta → azul del logo)
   Sobrescribe las clases Bootstrap con el estilo de marca.
   Cargar SOLO en páginas del negocio (no en demos/, que tienen
   su propia identidad).
   ============================================================ */

:root{
  --fw-violet:#6f42c1;
  --fw-violet-deep:#1e3a8a;
  --fw-violet-hover:#5a34a8;
  --fw-cyan:#00d4ff;          /* acento, no principal */
  --fw-wa:#25d366;
  --fw-wa-deep:#1da851;
}

/* Base común a todos los botones del sistema (aplica sobre .btn de Bootstrap) */
.btn.btn-primary,
.btn.btn-success,
.btn.btn-outline-primary,
.btn.btn-light,
.btn.btn-outline-light{
  position:relative;
  overflow:hidden;
  font-weight:700;
  letter-spacing:.01em;
  border-radius:12px;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.btn.btn-primary:hover,
.btn.btn-success:hover,
.btn.btn-outline-primary:hover,
.btn.btn-light:hover,
.btn.btn-outline-light:hover{
  transform:translateY(-2px);
}

/* Shimmer que barre al hover (solo en los sólidos) */
.btn.btn-primary::before,
.btn.btn-success::before{
  content:'';
  position:absolute;
  top:0; left:-100%;
  width:55%; height:100%;
  background:linear-gradient(to right, transparent, rgba(255,255,255,.4), transparent);
  transition:left .55s ease;
  pointer-events:none;
}
.btn.btn-primary:hover::before,
.btn.btn-success:hover::before{ left:160%; }

/* ---- PRIMARIO: degradé violeta → azul (logo) ---- */
.btn.btn-primary{
  background:linear-gradient(100deg, var(--fw-violet), var(--fw-violet-deep)) !important;
  border:none !important;
  color:#fff !important;
  box-shadow:0 4px 18px rgba(111,66,193,.4);
}
.btn.btn-primary:hover,
.btn.btn-primary:focus{
  background:linear-gradient(100deg, var(--fw-violet-hover), var(--fw-violet-deep)) !important;
  color:#fff !important;
  box-shadow:0 8px 30px rgba(111,66,193,.55);
}

/* ---- WHATSAPP: verde con el mismo tratamiento ---- */
.btn.btn-success{
  background:linear-gradient(135deg, var(--fw-wa), var(--fw-wa-deep)) !important;
  border:none !important;
  color:#fff !important;
  box-shadow:0 4px 18px rgba(37,211,102,.35);
}
.btn.btn-success:hover,
.btn.btn-success:focus{
  color:#fff !important;
  box-shadow:0 8px 30px rgba(37,211,102,.5);
}

/* ---- SECUNDARIO: contorno violeta que se rellena ---- */
.btn.btn-outline-primary{
  background:transparent !important;
  border:1.5px solid var(--fw-violet) !important;
  color:var(--fw-violet) !important;
}
.btn.btn-outline-primary:hover,
.btn.btn-outline-primary:focus{
  background:var(--fw-violet) !important;
  color:#fff !important;
  box-shadow:0 6px 22px rgba(111,66,193,.4);
}

/* ---- VARIANTES PARA FONDO OSCURO (CTA finales) ---- */
/* Primario claro sobre oscuro */
.btn.btn-light{
  background:#fff !important;
  border:none !important;
  color:#1a2433 !important;
  box-shadow:0 4px 18px rgba(0,0,0,.18);
}
.btn.btn-light:hover,
.btn.btn-light:focus{
  color:var(--fw-violet-deep) !important;
  box-shadow:0 8px 28px rgba(0,0,0,.28);
}
/* Secundario fantasma sobre oscuro */
.btn.btn-outline-light{
  background:rgba(255,255,255,.06) !important;
  border:1px solid rgba(255,255,255,.4) !important;
  color:#fff !important;
  backdrop-filter:blur(6px);
}
.btn.btn-outline-light:hover,
.btn.btn-outline-light:focus{
  background:rgba(255,255,255,.14) !important;
  border-color:#fff !important;
  color:#fff !important;
}

/* Accesibilidad: foco visible */
.btn.btn-primary:focus-visible,
.btn.btn-success:focus-visible,
.btn.btn-outline-primary:focus-visible,
.btn.btn-light:focus-visible,
.btn.btn-outline-light:focus-visible{
  outline:2px solid var(--fw-cyan);
  outline-offset:2px;
}

@media (prefers-reduced-motion: reduce){
  .btn.btn-primary,.btn.btn-success,.btn.btn-outline-primary,.btn.btn-light,.btn.btn-outline-light{ transition:none; }
  .btn.btn-primary::before,.btn.btn-success::before{ display:none; }
}

/* ============================================================
   Unificación de clases custom a la marca violeta.
   Estas clases usaban azules propios (#2563eb, #4285f4, etc.);
   se reconvierten al degradé violeta→azul del logo para
   coherencia total. Cargado antes que los CSS de página, por
   eso usa !important para ganar.
   ============================================================ */

/* Primarios sólidos custom -> degradé violeta
   (prefijo body para ganar a los CSS de página que cargan después) */
body .btn-cta,
body .btn-pricing,
body .btn-cta-primary,
body .btn-hero-cta,
body .btn-contact,
body .btn-info-custom,
body .btn-access,
body .btn-submit,
body .btn-thanks{
  background:linear-gradient(100deg, var(--fw-violet), var(--fw-violet-deep)) !important;
  border:none !important;
  color:#fff !important;
  box-shadow:0 4px 18px rgba(111,66,193,.35) !important;
}
body .btn-cta:hover,
body .btn-pricing:hover,
body .btn-cta-primary:hover,
body .btn-hero-cta:hover,
body .btn-contact:hover,
body .btn-info-custom:hover,
body .btn-access:hover,
body .btn-submit:hover,
body .btn-thanks:hover{
  background:linear-gradient(100deg, var(--fw-violet-hover), var(--fw-violet-deep)) !important;
  color:#fff !important;
  box-shadow:0 8px 30px rgba(111,66,193,.5) !important;
  transform:translateY(-2px);
}

/* Outlines custom -> contorno violeta
   (selector con body para ganar especificidad a los CSS de página
   que cargan después y también usan !important) */
body .btn-luxe-outline,
body .btn-cta-secondary,
body .btn-outline-thanks,
body a.btn-luxe-outline,
body a.btn-cta-secondary{
  background:transparent !important;
  border:1.5px solid var(--fw-violet) !important;
  color:var(--fw-violet) !important;
}
body .btn-luxe-outline:hover,
body .btn-cta-secondary:hover,
body .btn-outline-thanks:hover,
body a.btn-luxe-outline:hover,
body a.btn-cta-secondary:hover{
  background:var(--fw-violet) !important;
  color:#fff !important;
  box-shadow:0 6px 22px rgba(111,66,193,.4) !important;
}