/* ============================================================
   Blue Foundations — familia de iconos
   Los 55 SVG se inyectan inline con fill="currentColor", así que
   todo su color se controla desde aquí.
   ============================================================ */

.bf-icon{
  display:inline-block;
  vertical-align:middle;
  flex:0 0 auto;
  color:var(--bf-blue);
  transition:color .2s ease;
}

/* Sobre superficies navy: footer, banners CTA, tarjetas oscuras. */
.bf-on-dark .bf-icon,
.bf-bg-cta-dark .bf-icon,
.bf-bg-footer .bf-icon{ color:#fff; }

/* Estado de interacción cuando el icono vive dentro de una tarjeta enlazada. */
a:hover .bf-icon,
.et_pb_module:hover .bf-icon{ color:var(--bf-blue-hover); }

/* La flecha de los CTA acompaña al hover en lugar de solo cambiar de color. */
.bf-icon--arrow-right{ transition:transform .2s ease, color .2s ease; }
a:hover .bf-icon--arrow-right{ transform:translateX(3px); }

@media (prefers-reduced-motion:reduce){
  .bf-icon,
  .bf-icon--arrow-right{ transition:none; }
  a:hover .bf-icon--arrow-right{ transform:none; }
}

/* Los cuatro iconos de relleno sólido del paquete original. Se aíslan aquí
   para que sea evidente que la mezcla trazo/relleno es una decisión heredada
   del diseño y no un descuido de implementación. */
.bf-icon--check-filled,
.bf-icon--email-filled,
.bf-icon--location-filled,
.bf-icon--utilities-energy{ /* relleno sólido, sin trazo */ }

/* ---------- Galería de verificación [bf_icon_gallery] ---------- */

.bf-icon-gallery{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:4px;
  margin:0;
  padding:0;
  list-style:none;
}
.bf-icon-gallery li{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  padding:18px 8px;
  border:1px solid var(--bf-blue-100);
  border-radius:10px;
  background:#fff;
  text-align:center;
}
.bf-icon-gallery code{
  font-size:11px;
  line-height:1.3;
  word-break:break-all;
  background:none;
  padding:0;
  color:var(--bf-navy);
}