/* ============================================================
   Blue Foundations — Fondos del sistema visual, en CSS puro
   ------------------------------------------------------------
   Reemplaza los 7 SVG de 01_Shared_Cube y 02_Backgrounds del
   paquete Developer Assets v1.0. Esos SVG eran degradados y
   patrones triviales; el propio handoff pide resolverlos en CSS
   ("Use CSS for simple gradients, shadows and backgrounds
   whenever possible" / "avoid oversized raster backgrounds when
   CSS gradients can reproduce the effect").

   Uso en Divi: pegar este archivo en el child theme y aplicar la
   clase a la fila o sección desde Advanced > CSS Class.
   ============================================================ */

:root{
  --bf-navy:        #020E32;   /* muestreado del mockup aprobado */
  --bf-navy-2:      #0A1B50;
  --bf-navy-footer: #0A1433;   /* footer_deep_navy.svg */
  --bf-blue:        #1E3AFA;   /* trazo de la familia de iconos */
  --bf-blue-cta:    #0436EA;
  --bf-blue-hover:  #1151EA;
  --bf-cyan:        #00C8FF;
  --bf-blue-100:    #B2CAF2;
  --bf-blue-050:    #DCEBFF;
  --bf-surface:     #F9FAFC;
}

/* hero_network_light.svg — fondo de heros claros */
/* UAT HOME-02 / SERV-01 (2026-09-19): el fondo del hero pierde la
   versión CSS simplificada —degradado y puntos sueltos— y pasa a un
   SVG del tema que parte de la pieza PRODUCTION hero_network_light.svg
   (puntos unidos por líneas, que la versión CSS no reproducía) y le
   añade lo que el mockup tiene: un barrido de luz en diagonal y
   destellos alrededor del cubo. Vive en el tema, con ruta relativa,
   para no depender del dominio en el corte a producción. Aplica a los
   heroes de las seis páginas, que comparten esta clase. */
.bf-bg-hero-network{
  background-color:#fff;
  background-image:url(../img/bf-hero-network.svg?v=184);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

/* dot_field.svg — retícula de puntos */
.bf-bg-dot-field{
  background-image:radial-gradient(circle at 2px 2px, rgba(30,58,250,.18) 1.5px, transparent 1.6px);
  background-size:28px 28px;
}

/* glow_radial.svg — halo luminoso detrás del cubo */
.bf-glow-radial{position:relative;}
.bf-glow-radial::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse 49% 46% at 50% 50%,
    rgba(0,200,255,.8) 0%, rgba(30,58,250,.28) 35%, rgba(30,58,250,0) 100%);
}

/* halo_ring.svg + radial_network.svg — anillos del capability orbit */
.bf-orbit-rings{position:relative;}
.bf-orbit-rings::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 41% 61% at 50% 50%, transparent 99.6%, rgba(30,58,250,.35) 100%),
    radial-gradient(ellipse 34% 50% at 50% 50%, transparent 99.6%, rgba(0,200,255,.22) 100%),
    radial-gradient(ellipse 26% 38% at 50% 50%, transparent 99.6%, rgba(30,58,250,.18) 100%);
}

/* cta_dark_gradient.svg — banda de conversión navy */
.bf-bg-cta-dark{
  border-radius:24px;
  background-image:
    radial-gradient(circle 260px at 17% 50%, rgba(11,85,255,.38) 0%, rgba(11,85,255,0) 100%),
    linear-gradient(90deg, #06132F 0%, #08245A 55%, #071633 100%);
}

/* footer_deep_navy.svg — footer canónico */
.bf-bg-footer{ background-color:var(--bf-navy-footer); }

/* Superficie clara por defecto de las secciones */
.bf-bg-surface{ background-color:var(--bf-surface); }

/* Blanco puro. El mockup alterna las bandas de una página: unas
   secciones sobre --bf-surface y las contiguas sobre blanco. Sin esa
   alternancia la página se lee como una sola losa plana y el gris
   #F9FAFC pasa por blanco. */
.bf-bg-white{ background-color:#fff; }

@media (prefers-reduced-motion:no-preference){
  .bf-orbit-rings::before{ transition:opacity .3s ease; }
}