/* =====================================================================
   CIFP As Mercedes — botons.css
   ÁMBITO      : GLOBAL (todo o sitio)
   ENCOLADO EN : functions.php → cifp_custom_css()  [lista GLOBAIS]
   QUE FAI     : variantes de cor para os botóns de Elementor. O Kit xa ten
                 configurado o botón PRIMARIO (azul, hover #0069A8) e todo o
                 formato base (tamaño, peso 700, radio 999px, borde 1.5px).
                 Aquí SÓ se cambian as CORES (fondo/texto/borde) + a frecha
                 da variante ligazón. Todo o demais hérdase do Kit.

   USO         : engade a clase ao WIDGET do botón (Elementor → Avanzado →
                 Clases CSS). As cores saen dos tokens do Kit.

     .btn-secundario     → Secundario claro: fondo azul 10% + texto azul escuro.
                           (fondos CLAROS)  · hover: azul 25%.
     .btn-branco         → Fondo branco + texto azul escuro.
                           (fondos ESCUROS/azuis) · hover: fondo azul 10%.
     .btn-outline        → Transparente + borde azul + texto azul.
                           (fondos CLAROS)  · hover: énchese de azul, texto branco.
     .btn-outline-branco → Transparente + borde branco + texto branco ("ghost").
                           (fondos ESCUROS) · hover: énchese de branco, texto azul escuro.
     .btn-ligazon        → Estilo LIGAZÓN (sen fondo/borde) + frecha "→".
                           texto azul · hover: azul escuro. (NON engadas icona
                           en Elementor: a frecha vén deste CSS.)

   MODELO      : styleguide.html / assets/css/styles.css (.btn--light/-ghost, .link-arrow)
   ACTUALIZADO : 2026-08-25
   ===================================================================== */

/* --- SECUNDARIO (azul 10% suave) — fondos claros ------------------------ */
.btn-secundario .elementor-button, .elementor-button.btn-secundario{
  background-color: var(--e-global-color-cmazul10, #E6F2F9) !important;
  color: var(--e-global-color-secondary, #002B4A) !important;
  border-color: var(--e-global-color-cmazul10, #E6F2F9) !important;
}
.btn-secundario .elementor-button:hover, .elementor-button.btn-secundario:hover,
.btn-secundario .elementor-button:focus, .elementor-button.btn-secundario:focus{
  background-color: var(--e-global-color-cmazul25, #BFDEF0) !important;
  border-color: var(--e-global-color-cmazul25, #BFDEF0) !important;
  color: var(--e-global-color-secondary, #002B4A) !important;
}

/* --- BRANCO (fondo branco) — fondos escuros/azuis ---------------------- */
.btn-branco .elementor-button, .elementor-button.btn-branco{
  background-color: var(--e-global-color-cmbranco, #FFFFFF) !important;
  color: var(--e-global-color-secondary, #002B4A) !important;
  border-color: var(--e-global-color-cmbranco, #FFFFFF) !important;
}
.btn-branco .elementor-button:hover, .elementor-button.btn-branco:hover,
.btn-branco .elementor-button:focus, .elementor-button.btn-branco:focus{
  background-color: var(--e-global-color-cmazul10, #E6F2F9) !important;
  border-color: var(--e-global-color-cmazul10, #E6F2F9) !important;
  color: var(--e-global-color-secondary, #002B4A) !important;
}

/* --- OUTLINE AZUL (borde + transparente) — fondos claros --------------- */
.btn-outline .elementor-button, .elementor-button.btn-outline{
  background-color: transparent !important;
  color: var(--e-global-color-primary, #007BC4) !important;
  border-color: var(--e-global-color-primary, #007BC4) !important;
}
.btn-outline .elementor-button:hover, .elementor-button.btn-outline:hover,
.btn-outline .elementor-button:focus, .elementor-button.btn-outline:focus{
  background-color: var(--e-global-color-primary, #007BC4) !important;
  border-color: var(--e-global-color-primary, #007BC4) !important;
  color: #fff !important;
}

/* --- OUTLINE BRANCO ("ghost") — fondos escuros ------------------------- */
.btn-outline-branco .elementor-button, .elementor-button.btn-outline-branco{
  background-color: transparent !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, .7) !important;
}
.btn-outline-branco .elementor-button:hover, .elementor-button.btn-outline-branco:hover,
.btn-outline-branco .elementor-button:focus, .elementor-button.btn-outline-branco:focus{
  background-color: #fff !important;
  border-color: #fff !important;
  color: var(--e-global-color-secondary, #002B4A) !important;
}

/* --- LIGAZÓN CON FRECHA (estilo texto) -------------------------------- */
.btn-ligazon .elementor-button, .elementor-button.btn-ligazon{
  background-color: transparent !important;
  border-color: transparent !important;
  color: var(--e-global-color-primary, #007BC4) !important;
  box-shadow: none !important;
  padding: 0 !important; /* ligazón: sen padding (nin lateral nin superior/inferior) */
}
.btn-ligazon .elementor-button:hover, .elementor-button.btn-ligazon:hover,
.btn-ligazon .elementor-button:focus, .elementor-button.btn-ligazon:focus{
  background-color: transparent !important;
  color: var(--e-global-color-secondary, #002B4A) !important;
  box-shadow: none !important;
}
/* frecha (vén do CSS; non engadas icona no widget) */
.btn-ligazon .elementor-button-text::after{
  content: " →";
  font-weight: 700;
}