/* assets/css/colors-bd.css */
/* Solo colores desde variables, NO layout */

:root{
  /* Si el PHP no carga, estos valores quedan como fallback */
  --accent: #0b4a8a;
  --menu:   #083a73;
  --footer: #062846;

  --blue:  var(--menu);
  --blue2: var(--accent);

  --nav-bg:     var(--menu);
  --nav-dark:   var(--footer);
  --section-a:  var(--accent);
  --section-b:  var(--menu);
  --footer-bg:  var(--footer);
}

/* Header / topbar / nav */
.topbar,
.hero-header{
  background: var(--blue) !important;
}

.nav{
  background: var(--nav-bg) !important;
}

/* Slider / Quick */
.slider{
  background: var(--nav-dark) !important;
}
.quick{
  background: var(--nav-bg) !important;
}

/* Secciones con gradiente */
.section--gradient{
  background: linear-gradient(180deg, var(--section-a), var(--section-b)) !important;
}

/* Aliados / Interés / Map / Footer-pro (si existen en tu HTML) */
#aliados,
#interes.section,
.map-wrap,
.footer-pro{
  background: linear-gradient(180deg, var(--section-b), var(--footer-bg)) !important;
}

/* Footer */
.footer{
  background: var(--footer-bg) !important;
  color:#fff !important;
}

/* Links o acentos (opcional) */
a.accent, .text-accent, .news__more{
  color: var(--blue2) !important;
}


/* =============================
   FIX FONDOS: PROGRAMAS + FOOTER
   (no cambia layout, solo color)
============================= */

/* PROGRAMAS (cubre varios posibles ids/clases) */
#programas,
section#programas,
.section-programas,
.programas,
.programas-wrap,
.programas-section,
.programs,
.programs-section,
.prog,
.prog-section{
  background: linear-gradient(180deg, var(--section-a), var(--section-b)) !important;
  color: #fff !important;
}

/* si tu título grande está dentro de un contenedor blanco, fuerza el fondo del contenedor */
#programas .container,
section#programas .container,
.programas .container,
.programs .container{
  background: transparent !important;
}



/* ===========================
   FOOTER-PRO desde BD (TU HTML)
=========================== */

/* Fondo principal del footer:
   - respeta tu imagen inline: style="--footer-bg:url(...)"
   - aplica color BD debajo (si no hay imagen, igual se ve bonito)
*/
.footer-pro{
  background:
    radial-gradient(900px 420px at 50% 0%, rgba(255,255,255,.08), transparent 60%),
    var(--footer-bg, none),
    linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.18)),
    var(--footer-bg-color) !important;

  color:#fff !important;
}

/* Importante: tu franja inferior estaba quedando con otro color */
.footer-pro .footer-bottom{
  background: rgba(0,0,0,.18) !important; /* o usa var(--footer) si lo quieres sólido */
  border-top: 1px solid rgba(255,255,255,.14) !important;
}

/* Evita que el container de Bootstrap meta blanco/gris */
.footer-pro .container,
.footer-pro .row,
.footer-pro [class*="col-"]{
  background: transparent !important;
}

/* Links */
.footer-pro a,
.footer-pro .footer-link{
  color: rgba(255,255,255,.92) !important;
  text-decoration: none;
}
.footer-pro a:hover,
.footer-pro .footer-link:hover{
  color:#fff !important;
  text-decoration: underline;
}

/* Botones de redes (si ya los tienes) */
.footer-pro .social-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;height:40px;
  border-radius:12px;
  background: rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);
  color:#fff !important;
}
.footer-pro .social-btn:hover{
  background: rgba(255,255,255,.16);
}

/* ===========================
   DEGRADADO EN ZONA DEL LOGO
=========================== */

/* la franja superior donde está el logo/título */
.hero-header,
.topbar{
  background: linear-gradient(180deg, var(--menu-grad-a), var(--menu-grad-b)) !important;
}

/* si tu nav (barra de enlaces) está separada, déjala sólida o suave */
.nav{
  background: color-mix(in srgb, var(--menu) 85%, #fff) !important;
}

.hero-header{
  color: var(--accent-text, #ffffff) !important;
}

.news__body h3 a{ color:#fff !important; }
.news__more{ color:#fff !important; }