/* =====================================================================
   MIS FINANZAS PERSONALES · Gabriel Botero Vásquez
   Recoloreado de marca sobre el tema Finoza (Bootstrap 4)
   ---------------------------------------------------------------------
   Paleta extraída del logo y del modelo (PPTX):
     - Azul navy  -> color principal de marca (logo, casa, "MIS FINANZAS")
     - Dorado     -> acento (círculos metálicos, escudo/llave, ".com.co")
     - Grises      -> textos y fondos suaves
   Para cambiar TODA la paleta, edita solo las variables de :root de abajo.
   ===================================================================== */

:root {
	/* --- Marca --- */
	--mfp-navy:       #143C6E;  /* Azul principal (botones, títulos, header) */
	--mfp-navy-600:   #1B5490;  /* Azul más claro para hover/enlaces */
	--mfp-navy-900:   #0E2C54;  /* Azul más oscuro (footer, fondos densos) */
	--mfp-gold:       #C2A24E;  /* Dorado de acento */
	--mfp-gold-600:   #A9883C;  /* Dorado hover (más oscuro) */

	/* --- Neutros --- */
	--mfp-ink:        #1E2833;  /* Texto de títulos y texto fuerte */
	--mfp-grey:       #5B6670;  /* Texto de cuerpo / secundario */
	--mfp-bg:         #FFFFFF;  /* Fondo base */
	--mfp-bg-soft:    #F4F6F8;  /* Fondo de secciones alternas */
	--mfp-border:     #E3E8EE;  /* Bordes suaves */

	/* --- Tipografía --- */
	--mfp-font-head:  "Poppins", "Segoe UI", system-ui, sans-serif;
	--mfp-font-body:  "Inter", "Segoe UI", system-ui, sans-serif;

	/* ---------------------------------------------------------------
	   Puente con variables globales que usan Bootstrap/Elementor/temas.
	   Si el sitio usa Elementor, estas remapean los "Global Colors".
	   --------------------------------------------------------------- */
	--e-global-color-primary:    var(--mfp-navy);
	--e-global-color-secondary:  var(--mfp-navy-900);
	--e-global-color-accent:     var(--mfp-gold);
	--e-global-color-text:       var(--mfp-grey);
	--bs-primary:                var(--mfp-navy);
	--bs-link-color:             var(--mfp-navy);
	--bs-link-hover-color:       var(--mfp-gold-600);
}

/* =====================================================================
   1) TIPOGRAFÍA
   Finoza ya carga sus fuentes propias (Plus Jakarta e Inter), así que
   NO imponemos otra fuente para no desajustar tamaños ni maquetación.
   Solo ajustamos el COLOR del texto a la paleta de marca.
   Si algún día quieres forzar Poppins, descomenta las líneas font-family
   y reactiva el enqueue de Google Fonts en functions.php.
   ===================================================================== */
body {
	/* font-family: var(--mfp-font-body); */
	color: var(--mfp-grey);
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	/* font-family: var(--mfp-font-head); */
	color: var(--mfp-ink);
}

/* =====================================================================
   2) ENLACES
   ===================================================================== */
a {
	color: var(--mfp-navy);
}
a:hover,
a:focus {
	color: var(--mfp-gold-600);
}
::selection {
	background: var(--mfp-navy);
	color: #fff;
}

/* =====================================================================
   3) UTILIDADES BOOTSTRAP (Finoza está sobre Bootstrap 4)
   Recolorea cualquier elemento que use estas clases utilitarias.
   ===================================================================== */
.bg-primary { background-color: var(--mfp-navy) !important; }
.bg-dark    { background-color: var(--mfp-navy-900) !important; }
.text-primary { color: var(--mfp-navy) !important; }
.border-primary { border-color: var(--mfp-navy) !important; }

/* =====================================================================
   4) BOTONES
   Cubrimos botones de Bootstrap, de bloques Gutenberg y genéricos.
   ===================================================================== */
.btn-primary,
.wp-block-button__link,
button.btn-primary,
input[type="submit"],
input[type="button"],
.wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background-color: var(--mfp-navy) !important;
	border-color: var(--mfp-navy) !important;
	color: #fff !important;
}
.btn-primary:hover,
.btn-primary:focus,
.wp-block-button__link:hover,
input[type="submit"]:hover {
	background-color: var(--mfp-navy-600) !important;
	border-color: var(--mfp-navy-600) !important;
	color: #fff !important;
}

/* Botón secundario / de acento (dorado) — úsalo con clase .btn-secondary
   o .btn-accent en tus llamados a la acción destacados (ej. "Agenda tu asesoría"). */
.btn-secondary,
.btn-accent,
.wp-block-button.is-style-accent .wp-block-button__link {
	background-color: var(--mfp-gold) !important;
	border-color: var(--mfp-gold) !important;
	color: var(--mfp-ink) !important;   /* texto oscuro para contraste sobre dorado */
}
.btn-secondary:hover,
.btn-accent:hover {
	background-color: var(--mfp-gold-600) !important;
	border-color: var(--mfp-gold-600) !important;
	color: #fff !important;
}

/* Botón "outline" (contorno) */
.btn-outline-primary {
	color: var(--mfp-navy) !important;
	border-color: var(--mfp-navy) !important;
	background: transparent !important;
}
.btn-outline-primary:hover {
	background-color: var(--mfp-navy) !important;
	color: #fff !important;
}

/* =====================================================================
   5) CABECERA Y MENÚ
   Los nombres exactos de clase varían en Finoza; estas reglas cubren
   los patrones más comunes. Ajusta el selector del contenedor del
   header si tu versión usa otro (ver nota al final del archivo).
   ===================================================================== */
.site-header .current-menu-item > a,
.main-navigation .current-menu-item > a,
.navbar-nav .nav-link:hover,
.navbar-nav .active > .nav-link,
.menu-item a:hover {
	color: var(--mfp-gold) !important;
}

/* =====================================================================
   6) TÍTULOS DE SECCIÓN / DETALLES DE ACENTO
   Muchos temas de finanzas ponen una palabra o línea en color de acento.
   ===================================================================== */
.section-title span,
.heading-accent,
.text-accent {
	color: var(--mfp-gold) !important;
}

/* Íconos y viñetas destacadas */
.icon-primary,
.fa-check::before,
ul.list-check li::marker {
	color: var(--mfp-navy);
}

/* =====================================================================
   7) TARJETAS DE PRECIOS / PLANES (slide 4 del modelo)
   ===================================================================== */
.price-box .price,
.pricing .amount,
.pricing-table .price {
	color: var(--mfp-navy) !important;
}
.pricing-table.featured,
.price-box.featured {
	border-color: var(--mfp-gold) !important;
}

/* =====================================================================
   8) PIE DE PÁGINA
   ===================================================================== */
.site-footer,
footer.footer,
.footer-widgets {
	background-color: var(--mfp-navy-900) !important;
	color: #C7D2E0;
}
.site-footer a,
footer.footer a {
	color: #E6ECF4;
}
.site-footer a:hover,
footer.footer a:hover {
	color: var(--mfp-gold) !important;
}

/* =====================================================================
   9) FORMULARIOS (contacto / empresa — slide 5)
   ===================================================================== */
input:focus,
textarea:focus,
select:focus {
	border-color: var(--mfp-navy) !important;
	box-shadow: 0 0 0 2px rgba(20, 60, 110, .15) !important;
	outline: none !important;
}

/* =====================================================================
   10) FONDOS SUAVES ALTERNOS
   ===================================================================== */
.bg-light,
.section-alt {
	background-color: var(--mfp-bg-soft) !important;
}

/* =====================================================================
   11) ELEMENTOR (red de seguridad)
   El sitio usa Elementor, así que el MÉTODO PRINCIPAL para recolorear es
   editar los "Colores Globales" en Elementor ? Configuración del sitio.
   Estas reglas cubren los widgets que quedaron con color FIJO tras
   importar el Template Kit (esos no cambian con los Colores Globales).
   Si algún widget queda con color viejo, es candidato a estas reglas.
   ===================================================================== */

/* Botones de Elementor */
.elementor-button,
.elementor-button-link {
	background-color: var(--mfp-navy) !important;
	color: #fff !important;
	border-color: var(--mfp-navy) !important;
}
.elementor-button:hover,
.elementor-button:focus {
	background-color: var(--mfp-navy-600) !important;
	border-color: var(--mfp-navy-600) !important;
	color: #fff !important;
}

/* Marca una columna/botón con la clase CSS "acento-dorado" (en Avanzado ?
   CSS Classes del widget) para que use el dorado en vez del navy. */
.acento-dorado .elementor-button,
.elementor-button.acento-dorado {
	background-color: var(--mfp-gold) !important;
	border-color: var(--mfp-gold) !important;
	color: var(--mfp-ink) !important;
}
.acento-dorado .elementor-button:hover,
.elementor-button.acento-dorado:hover {
	background-color: var(--mfp-gold-600) !important;
	border-color: var(--mfp-gold-600) !important;
	color: #fff !important;
}

/* Íconos y cajas de ícono de Elementor */
.elementor-icon,
.elementor-icon-box-icon .elementor-icon,
.elementor-icon-list-icon i,
.elementor-icon-list-icon svg {
	color: var(--mfp-navy) !important;
	fill: var(--mfp-navy) !important;
}
.elementor-view-stacked .elementor-icon {
	background-color: var(--mfp-navy) !important;
	color: #fff !important;
}
.elementor-view-framed .elementor-icon {
	border-color: var(--mfp-navy) !important;
	color: var(--mfp-navy) !important;
}

/* Títulos de encabezado (Heading widget) */
.elementor-heading-title {
	color: var(--mfp-ink) !important;
}

/* Divisores / separadores decorativos */
.elementor-divider-separator {
	border-color: var(--mfp-gold) !important;
}

/* Cajas de precio (Price Table widget) */
.elementor-price-table__header {
	background-color: var(--mfp-navy) !important;
}
.elementor-price-table__price,
.elementor-price-table__integer-part {
	color: var(--mfp-navy) !important;
}
.elementor-price-table__button {
	background-color: var(--mfp-gold) !important;
	color: var(--mfp-ink) !important;
}

/* Barra de progreso / contadores */
.elementor-progress-bar {
	background-color: var(--mfp-navy) !important;
}
.elementor-counter-number-wrapper {
	color: var(--mfp-navy) !important;
}