/* ============================================
   SINTEGRAD · COMPONENTS — BOTONES CTA
   Objetivo: que CTAs se vean como BOTONES reales
   Paleta acentos (SOLO): #00A2FF, #2ECC40, #A56EFF
   Sin !important (prioridad por orden de carga en head.php)
   ============================================ */

/* -----------------------
   Base (aplica a <a> y <button>)
   ----------------------- */
.btn-sg {
  --sg-accent: #00A2FF;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  padding: 12px 22px;
  border-radius: 10px;

  background: var(--sg-accent);
  border: 1px solid var(--sg-accent);
  color: #ffffff;

  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;

  text-decoration: none;
  cursor: pointer;

  transition: transform 180ms ease, filter 180ms ease, box-shadow 180ms ease;
}

.btn-sg:hover {
  transform: translateY(-1px);
  filter: brightness(0.92);
}

.btn-sg:active {
  transform: translateY(0);
  filter: brightness(0.88);
}

.btn-sg:focus-visible {
  outline: 2px solid var(--sg-accent);
  outline-offset: 2px;
}

/* -----------------------
   Tamaños (compatibilidad legacy)
   ----------------------- */
.btn-primary--standard,
.btn-primary--hero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  text-decoration: none;
  cursor: pointer;

  border: 1px solid #00A2FF;
  background: #00A2FF;
  color: #ffffff;

  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;

  transition: transform 180ms ease, filter 180ms ease, box-shadow 180ms ease;
}

.btn-primary--standard {
  padding: 12px 22px;
  border-radius: 10px;
  font-size: 14px;
  box-shadow: 0 10px 28px rgba(0, 162, 255, 0.18);
}

.btn-primary--hero {
  padding: 16px 34px;
  border-radius: 12px;
  font-size: 16px;
  box-shadow: 0 12px 34px rgba(0, 162, 255, 0.22);
}

.btn-primary--standard:hover,
.btn-primary--hero:hover {
  transform: translateY(-1px);
  filter: brightness(0.92);
}

.btn-primary--standard:active,
.btn-primary--hero:active {
  transform: translateY(0);
  filter: brightness(0.88);
}

.btn-primary--standard:focus-visible,
.btn-primary--hero:focus-visible {
  outline: 2px solid #00A2FF;
  outline-offset: 2px;
}

/* -----------------------
   Variantes por color (heredan marco de tarjeta)
   ----------------------- */
.btn-sg--blue,
.btn-sg-blue {
  --sg-accent: #00A2FF;
  box-shadow: 0 10px 28px rgba(0, 162, 255, 0.28);
}

.btn-sg--green,
.btn-sg-green {
  --sg-accent: #2ECC40;
  box-shadow: 0 10px 28px rgba(46, 204, 64, 0.24);
}

.btn-sg--purple,
.btn-sg-purple {
  --sg-accent: #A56EFF;
  box-shadow: 0 10px 28px rgba(165, 110, 255, 0.26);
}

/* Si usan legacy (btn-sg-blue/green/purple) sin .btn-sg, forzamos apariencia de botón */
.btn-sg-blue,
.btn-sg-green,
.btn-sg-purple {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  padding: 12px 22px;
  border-radius: 10px;

  border: 1px solid var(--sg-accent);
  background: var(--sg-accent);
  color: #ffffff;

  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;

  text-decoration: none;
  cursor: pointer;

  transition: transform 180ms ease, filter 180ms ease, box-shadow 180ms ease;
}

.btn-sg-blue:hover,
.btn-sg-green:hover,
.btn-sg-purple:hover {
  transform: translateY(-1px);
  filter: brightness(0.92);
}

/* Convergencia: si viene .btn-primary--standard + .btn-sg-*, el color del tema manda */
.btn-primary--standard.btn-sg-blue,
.btn-primary--hero.btn-sg-blue {
  border-color: #00A2FF;
  background: #00A2FF;
}

.btn-primary--standard.btn-sg-green,
.btn-primary--hero.btn-sg-green {
  border-color: #2ECC40;
  background: #2ECC40;
  box-shadow: 0 10px 28px rgba(46, 204, 64, 0.24);
}

.btn-primary--standard.btn-sg-purple,
.btn-primary--hero.btn-sg-purple {
  border-color: #A56EFF;
  background: #A56EFF;
  box-shadow: 0 10px 28px rgba(165, 110, 255, 0.26);
}

/* =========================================================
   OVERRIDE ESPECÍFICO: CTA RESEÑAS (Google)
   Problema: resenas.css le cambia hover a gris / texto se pierde
   Solución: blindar estado normal/hover/visited del botón
   ========================================================= */
a.reviews-google-link.btn-sg,
a.reviews-google-link.btn-primary--standard,
a.reviews-google-link.btn-primary--hero {
  background: #00A2FF;
  border-color: #00A2FF;
  color: #ffffff;
  text-decoration: none;
}

a.reviews-google-link.btn-sg:hover,
a.reviews-google-link.btn-primary--standard:hover,
a.reviews-google-link.btn-primary--hero:hover,
a.reviews-google-link.btn-sg:visited,
a.reviews-google-link.btn-primary--standard:visited,
a.reviews-google-link.btn-primary--hero:visited,
a.reviews-google-link.btn-sg:visited:hover,
a.reviews-google-link.btn-primary--standard:visited:hover,
a.reviews-google-link.btn-primary--hero:visited:hover {
  background: #00A2FF;
  border-color: #00A2FF;
  color: #ffffff;
  filter: brightness(0.92);
}