/* ============================================================
   Blue Foundations — componentes de Services, Solutions,
   About, Contact y Success Stories.
   Los compartidos (trust bar, approach, banner CTA, orbit)
   viven en bf-home.css y aquí solo se extienden.
   ============================================================ */

/* Orbit de 8 nodos: Services lista ocho capacidades, no siete.
   Mismo círculo, ángulos cada 45°. */
.bf-orbit--8 .bf-orbit__node--1{ top:7.9%;  left:50%; transform:translate(-50%, calc(-100% + 48px)); }
.bf-orbit--8 .bf-orbit__node--2{ top:18.7%; left:65%;   right:auto; }
.bf-orbit--8 .bf-orbit__node--3{ top:44.9%; left:72.7%; right:auto; }
.bf-orbit--8 .bf-orbit__node--4{ top:71.1%; left:65%;   right:auto; }
.bf-orbit--8 .bf-orbit__node--5{ top:81.9%; left:50%; transform:translateX(-50%); }
.bf-orbit--8 .bf-orbit__node--6{ top:71.1%; right:65%;  left:auto; }
.bf-orbit--8 .bf-orbit__node--7{ top:44.9%; right:72.7%;left:auto; }
.bf-orbit--8 .bf-orbit__node--8{ top:18.7%; right:65%;  left:auto; }
@media (max-width:980px){
  .bf-orbit--8 .bf-orbit__node--1,.bf-orbit--8 .bf-orbit__node--2,
  .bf-orbit--8 .bf-orbit__node--3,.bf-orbit--8 .bf-orbit__node--4,
  .bf-orbit--8 .bf-orbit__node--5,.bf-orbit--8 .bf-orbit__node--6,
  .bf-orbit--8 .bf-orbit__node--7,.bf-orbit--8 .bf-orbit__node--8{
    position:static; transform:none; left:auto; right:auto; }
}

/* ============================================================
   HERO DE SOLUTIONS — cubo con seis proof points alrededor

   El mockup reparte los seis proof points a los lados del cubo,
   tres y tres, cada uno unido a él por una línea fina rematada en
   un punto. Es una rejilla de tres columnas y no el orbit circular
   de las demás páginas: aquí las tarjetas llevan texto y no
   caberían en un círculo.
   ============================================================ */

/* La columna de copy de este hero es un tercio de la fila, no la
   mitad: la escala de display del sistema (hasta 64px) rompería
   "Solutions Built for" en tres líneas en lugar de las dos que
   marca el mockup. Se baja solo aquí, junto con los botones, que
   en el mockup van uno al lado del otro dentro de esa columna. */
/* h1 y cuerpo: ver bf-typography.css (--bf-fs-hero), común a todos los heroes. */
.bf-hero--split .bf-actions{ gap:10px; margin-top:26px; }
.bf-hero--split .bf-btn{ padding:11px 12px; font-size:.8125rem; gap:8px; }
/* Los dos botones caben uno al lado del otro mientras la columna
   ronda los 380px —el ancho que tienen en el mockup—. Por debajo
   de eso pasan a dos filas, y entonces ya no hay motivo para
   mantenerlos apretados. */
@media (max-width:1400px){
  .bf-hero--split .bf-btn{ padding:12px 18px; }
}

.bf-solorbit{
  display:grid;
  grid-template-columns:1fr minmax(180px,270px) 1fr;
  align-items:center;
  gap:0 34px;
}
.bf-solorbit__cube{
  width:100%; height:auto; display:block;
  filter:drop-shadow(0 22px 44px rgba(11,85,255,.28));
}
.bf-solorbit__col{ display:flex; flex-direction:column; gap:18px; }
.bf-solorbit__card{
  position:relative;
  display:flex; align-items:flex-start; gap:10px;
  background:#fff;
  border:1px solid var(--bf-blue-100);
  border-radius:12px;
  box-shadow:0 10px 26px rgba(2,14,50,.08);
  padding:13px 15px;
}
.bf-solorbit__icon{ color:var(--bf-blue); flex:0 0 auto; line-height:0; }
.bf-solorbit__body b{
  display:block; font-size:.8125rem; font-weight:700; line-height:1.3;
  color:var(--bf-navy); margin-bottom:3px;
}
.bf-solorbit__body span{
  display:block; font-size:.75rem; line-height:1.45; color:var(--bf-text-muted);
}

/* Conector hacia el cubo: la línea sale del borde interior de la
   tarjeta y el punto la remata del lado del cubo. */
.bf-solorbit__card::before,
.bf-solorbit__card::after{ content:""; position:absolute; top:50%; }
.bf-solorbit__card::before{
  width:26px; height:1px; background:var(--bf-blue-100);
}
.bf-solorbit__card::after{
  width:6px; height:6px; border-radius:50%;
  background:var(--bf-blue); transform:translateY(-50%);
}
.bf-solorbit__col--left .bf-solorbit__card::before{ right:-27px; }
.bf-solorbit__col--left .bf-solorbit__card::after{ right:-30px; }
.bf-solorbit__col--right .bf-solorbit__card::before{ left:-27px; }
.bf-solorbit__col--right .bf-solorbit__card::after{ left:-30px; }

@media (max-width:1100px){
  .bf-solorbit{ grid-template-columns:1fr minmax(140px,200px) 1fr; gap:0 24px; }
  .bf-solorbit__card::before,
  .bf-solorbit__card::after{ display:none; }
}
/* En móvil el cubo encabeza el bloque y los seis puntos caen debajo
   en dos columnas: las líneas ya no unirían nada. */
@media (max-width:780px){
  .bf-solorbit{ grid-template-columns:repeat(2,1fr); gap:14px; }
  .bf-solorbit__cube{ order:-1; grid-column:1 / -1; max-width:230px; margin:0 auto 6px; }
  .bf-solorbit__col{ display:contents; }
}
@media (max-width:520px){
  .bf-solorbit{ grid-template-columns:1fr; }
}

/* ============================================================
   TARJETAS — servicios y soluciones
   ============================================================ */

.bf-cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.bf-cards--3{ grid-template-columns:repeat(3,1fr); }
.bf-cards--2{ grid-template-columns:repeat(2,1fr); }

.bf-card{
  display:flex; flex-direction:column;
  background:#fff;
  border:1px solid var(--bf-blue-100);
  border-radius:14px;
  padding:26px 22px;
  scroll-margin-top:96px;   /* el header fijo no tapa el ancla */
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.bf-card:hover{
  border-color:var(--bf-blue-cta);
  box-shadow:0 10px 30px rgba(2,14,50,.08);
  transform:translateY(-2px);
}
.bf-card__icon{ color:var(--bf-blue); margin-bottom:16px; }
.bf-card__title{
  font-size:1.0625rem; font-weight:700; line-height:1.3;
  color:var(--bf-navy); margin:0 0 10px;
}
.bf-card__text{
  font-size:.875rem; line-height:1.55;
  color:var(--bf-text-muted); margin:0 0 14px;
}
.bf-card__list{ list-style:none; margin:0 0 18px; padding:0; }
.bf-card__list li{
  display:flex; gap:8px; align-items:flex-start;
  font-size:.8125rem; line-height:1.5;
  color:var(--bf-text-muted);
  margin-bottom:7px;
}
/* UAT SERV-02: check en círculo en lugar del punto */
.bf-card__list li .bf-icon{ flex:0 0 auto; margin-top:1px; color:var(--bf-blue-cta); }
.bf-card__link{
  margin-top:auto;
  display:inline-flex; align-items:center; gap:7px;
  font-size:.875rem; font-weight:600;
  color:var(--bf-blue-cta); text-decoration:none;
}
.bf-card__link .bf-icon{ color:inherit; transition:transform .2s ease; }
.bf-card:hover .bf-card__link .bf-icon{ transform:translateX(3px); }

@media (max-width:1100px){ .bf-cards{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:700px){
  .bf-cards, .bf-cards--3, .bf-cards--2{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce){
  .bf-card:hover{ transform:none; }
  .bf-card:hover .bf-card__link .bf-icon{ transform:none; }
}

/* ============================================================
   CAPABILITY FLOW — nueve etapas encadenadas (Services 16)
   ============================================================ */

/* El mockup dispone las nueve etapas como una sola fila de columnas
   sin tarjeta: círculo del icono, título y una descripción corta
   debajo. Las flechas van entre los círculos, no entre bloques de
   texto que casi se tocan.

   De ahí que el separador se declare con ancho cero: sigue siendo
   un elemento real de la fila —lleva el SVG de marca— pero no
   consume espacio horizontal, y su contenido desborda centrado
   sobre el aire entre columnas. Así las nueve etapas caben en una
   fila y cada descripción conserva su ancho de lectura. */
.bf-flow{
  display:flex; flex-wrap:wrap; align-items:flex-start;
  justify-content:center; gap:0;
}
.bf-flow__step{
  flex:1 1 0; min-width:0;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:0 12px;
  text-align:center;
}
.bf-flow__icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:68px; height:68px;
  border-radius:50%;
  background:#fff;
  border:1px solid var(--bf-blue-100);
  box-shadow:0 6px 18px rgba(2,14,50,.07);
  color:var(--bf-blue);
}
.bf-flow__label{
  font-size:.8125rem; font-weight:600; line-height:1.3; color:var(--bf-navy);
  margin:0;
}
.bf-flow__text{
  font-size:.75rem; line-height:1.5; color:var(--bf-text-muted); margin:0;
}
.bf-flow__sep{
  flex:0 0 0; width:0;
  display:flex; justify-content:center;
  margin-top:26px;
  color:var(--bf-blue-100);
}
.bf-flow__sep > *{ flex:0 0 auto; }

/* Por debajo de ~1100px las nueve columnas quedan en 100px y la
   descripción se parte en demasiadas líneas: a partir de ahí se
   deja envolver y se retiran las flechas, que ya no encadenan
   nada. */
@media (max-width:1100px){
  .bf-flow__sep{ display:none; }
  .bf-flow__step{ flex:1 1 150px; max-width:210px; padding:0 12px 22px; }
}

/* ============================================================
   BENEFICIOS — Why capabilities matter (Services 17)
   y proof points de Solutions (05)
   ============================================================ */

.bf-benefits{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.bf-benefits--3{ grid-template-columns:repeat(3,1fr); }
.bf-benefit{
  display:flex; gap:14px; align-items:flex-start;
  padding:20px 18px;
  background:#fff;
  border:1px solid var(--bf-blue-100);
  border-radius:12px;
}
.bf-benefit .bf-icon{ flex:0 0 auto; margin-top:2px; }
.bf-benefit__title{
  font-size:.9375rem; font-weight:700; line-height:1.3;
  color:var(--bf-navy); margin:0 0 5px;
}
.bf-benefit__text{
  font-size:.8125rem; line-height:1.5; color:var(--bf-text-muted); margin:0;
}
@media (max-width:1100px){ .bf-benefits, .bf-benefits--3{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .bf-benefits, .bf-benefits--3{ grid-template-columns:1fr; } }

/* ============================================================
   FEATURED SOLUTIONS — cuatro bloques (Solutions 17)

   El mockup arma la sección como una banda clara con cuatro
   columnas: el panel de texto y las tres tarjetas oscuras. Por eso
   la cabecera no usa .bf-section-head —no va centrada sobre el
   ancho de la sección— sino que vive dentro de la rejilla.
   ============================================================ */

.bf-featured{
  display:grid; grid-template-columns:1fr repeat(3,1.06fr); gap:18px;
  align-items:stretch;
  background:var(--bf-surface);
  border-radius:18px;
  padding:34px;
}
.bf-featured__panel{
  display:flex; flex-direction:column; gap:12px;
  padding-right:14px;
}
.bf-featured__panel h2{ margin:0; }
.bf-featured__lead{
  line-height:1.6; color:var(--bf-text-muted); margin:0;
}
/* El enlace del panel se apoya en el borde inferior, como en el
   mockup, en lugar de quedar pegado al párrafo. */
.bf-featured__panel > .bf-card__link{ margin-top:auto; }

.bf-featured__card{
  border-radius:14px; overflow:hidden;
  background:linear-gradient(150deg,#08214F 0%, #0A2A6B 55%, #061229 100%);
  padding:0 24px 24px;
  display:flex; flex-direction:column; gap:12px;
}
/* Banda superior de la tarjeta. El mockup pone ahí una imagen de
   datos; hasta que diseño entregue esa pieza se resuelve en CSS con
   un patrón de barras, del mismo modo que el resto de fondos del
   sistema visual. */
.bf-featured__band{
  position:relative; display:block; height:96px;
  margin:0 -24px 6px;
  background-color:#071B45;
  background-image:
    linear-gradient(to top, rgba(6,18,41,.95) 0%, rgba(6,18,41,0) 58%),
    repeating-linear-gradient(90deg, rgba(120,180,255,.50) 0 5px, transparent 5px 34px),
    repeating-linear-gradient(90deg, rgba(90,150,255,.40) 0 4px, transparent 4px 21px),
    repeating-linear-gradient(90deg, rgba(60,120,235,.32) 0 6px, transparent 6px 49px);
  background-size:100% 100%, 100% 44%, 100% 66%, 100% 84%;
  background-position:0 0, 0 100%, 8px 100%, 19px 100%;
  background-repeat:no-repeat, repeat-x, repeat-x, repeat-x;
  border-bottom:1px solid rgba(120,170,255,.18);
}
.bf-featured__chip{
  position:absolute; top:14px; left:24px;
  font-size:.625rem; font-weight:700; letter-spacing:.06em;
  color:#fff; background:var(--bf-blue);
  padding:4px 10px; border-radius:5px;
}
.bf-featured__icon{
  position:absolute; right:16px; bottom:10px;
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:8px;
  color:#BBD3FF;
  background:rgba(10,42,107,.75);
  border:1px solid rgba(140,185,255,.35);
}
.bf-featured__title{
  font-size:1.0625rem; font-weight:700; line-height:1.3; color:#fff; margin:0;
}
.bf-featured__text{
  font-size:.875rem; line-height:1.55; color:rgba(255,255,255,.78); margin:0;
}
.bf-featured__link{
  margin-top:auto;
  display:inline-flex; align-items:center; gap:8px;
  font-size:.8125rem; font-weight:600; color:#6FA3FF; text-decoration:none;
}
.bf-featured__link:hover{ color:#fff; }

@media (max-width:1100px){
  .bf-featured{ grid-template-columns:repeat(2,1fr); padding:26px; }
  .bf-featured__panel{ grid-column:1 / -1; padding-right:0; }
  .bf-featured__panel > .bf-card__link{ margin-top:6px; }
}
@media (max-width:700px){ .bf-featured{ grid-template-columns:1fr; } }

/* ============================================================
   ABOUT
   ============================================================ */

/* Approach sobre tarjeta (About 07).

   El mockup de About dibuja cada uno de los cuatro pasos sobre una
   tarjeta clara y mete la flecha en el hueco entre tarjetas, a la
   altura del icono. El de Solutions los deja sueltos sobre el fondo,
   así que la tarjeta es un modificador y no el comportamiento por
   defecto de .bf-approach. */
.bf-approach--cards{ grid-template-columns:repeat(4,1fr); gap:0 46px; }
.bf-approach--cards .bf-approach__step{
  padding:30px 22px;
  background:#fff;
  border:1px solid var(--bf-blue-050);
  border-radius:14px;
  box-shadow:0 6px 20px rgba(2,14,50,.05);
}
/* Cola punteada y punta de flecha, las dos dentro del hueco de 46px:
   la cola ocupa de +9px a +31px y la punta de +31px a +41px. */
.bf-approach--cards .bf-approach__step::after{
  top:68px; left:calc(100% + 9px); right:auto; width:22px;
  border-top:2px dotted rgba(30,58,250,.45);
}
.bf-approach--cards .bf-approach__step:not(:last-child)::before{
  content:""; position:absolute;
  top:63px; left:calc(100% + 31px);
  border:5px solid transparent; border-left-color:var(--bf-blue);
}
@media (max-width:980px){
  .bf-approach--cards{ grid-template-columns:repeat(2,1fr); gap:18px; }
  .bf-approach--cards .bf-approach__step::before{ display:none; }
}
@media (max-width:600px){ .bf-approach--cards{ grid-template-columns:1fr; } }

/* Credenciales del hero (About 01-04). El mockup las pone bajo el
   párrafo, en cuatro columnas separadas por filetes verticales, no
   en una franja aparte debajo del hero. */
.bf-rule{
  display:block; width:46px; height:2px;
  background:var(--bf-blue); margin:26px 0 22px;
}
.bf-cred{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
.bf-cred__item{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  text-align:center; padding:0 14px;
  border-right:1px solid var(--bf-blue-100);
}
.bf-cred__item:last-child{ border-right:none; }
.bf-cred__icon{ color:var(--bf-blue); line-height:0; }
.bf-cred__value{ font-size:1.375rem; font-weight:700; color:var(--bf-navy); line-height:1.1; }
.bf-cred__label{
  font-size:.8125rem; font-weight:700; line-height:1.35; color:var(--bf-navy);
}
@media (max-width:600px){
  .bf-cred{ grid-template-columns:repeat(2,1fr); gap:22px 0; }
  .bf-cred__item:nth-child(2n){ border-right:none; }
}

.bf-story-2col{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; }
@media (max-width:980px){ .bf-story-2col{ grid-template-columns:1fr; gap:32px; } }

/* What Makes Us Different (About 06) va sobre tarjeta oscura, a la
   derecha del relato, no en una sección propia. */
.bf-diffcard{
  padding:34px 32px; border-radius:16px;
  background:linear-gradient(150deg,#08214F 0%, #0A2A6B 60%, #061229 100%);
}
.bf-diffcard h3{ color:#fff; margin:0 0 8px; }
.bf-diff{ list-style:none; margin:0; padding:0; }
.bf-diff li{
  display:flex; gap:14px; align-items:flex-start;
  padding:14px 0;
  font-size:.9375rem; line-height:1.5; color:rgba(255,255,255,.88);
}
.bf-diff .bf-icon{ flex:0 0 auto; margin-top:1px; color:var(--bf-blue); }

/* Valores (About 08): lista vertical con filete entre ítems, no
   cuatro tarjetas en fila. */
/* La tarjeta de misión y visión iguala la altura de la lista de
   valores: con align-items:stretch la columna derecha crece hasta el
   alto de la fila. El aire extra queda entre el texto de la visión y
   el degradado del horizonte, que sigue anclado al pie. */
.bf-story-2col--values{ align-items:stretch; }
.bf-values{ display:block; margin-top:8px; }
.bf-value{
  display:flex; gap:16px; align-items:flex-start;
  padding:18px 0;
  border-bottom:1px solid rgba(2,14,50,.09);
}
.bf-value:last-child{ border-bottom:none; }
.bf-value__icon{ color:var(--bf-blue); flex:0 0 auto; line-height:0; margin-top:2px; }
.bf-value__title{ font-size:1rem; font-weight:700; color:var(--bf-navy); margin:0 0 4px; }
.bf-value__text{ font-size:.875rem; line-height:1.55; color:var(--bf-text-muted); margin:0; }

/* Misión y visión (About 09-10): una sola tarjeta alta, no dos.
   El mockup remata el pie con una fotografía de amanecer; el
   archivo de referencia que hay en 08_About es un recorte de
   270×275 del propio mockup con el texto quemado, así que el
   degradado del horizonte se resuelve en CSS hasta que diseño
   entregue la pieza. */
/* La fotografía del amanecer que entregó el cliente («Our Mission.png»)
   va de fondo de toda la tarjeta, con un velo navy encima que la tapa
   arriba —donde vive el texto— y la deja verse abajo, como en el
   mockup. Sustituye al degradado que simulaba el horizonte.

   El archivo vive en el propio tema y NO en Medios a propósito: desde
   el CSS habría que referenciarlo con una URL absoluta del dominio de
   desarrollo, y esa URL se rompería en el corte a producción. Con la
   ruta relativa el tema se mueve de dominio sin tocar nada. */
.bf-mv{
  position:relative; overflow:hidden;
  padding:34px 32px 150px; border-radius:16px;
  background-color:#061229;
  background-image:
    linear-gradient(180deg,
      #061229 0%, rgba(6,18,41,.96) 32%, rgba(10,31,78,.86) 54%,
      rgba(20,52,111,.38) 72%, rgba(20,52,111,0) 90%),
    url(../img/bf-mission-vision.webp);
  background-size:100% 100%, cover;
  background-position:center top, center bottom;
  background-repeat:no-repeat, no-repeat;
}
.bf-mv h3{ color:#fff; margin:0 0 12px; }
.bf-mv p{ color:rgba(255,255,255,.84); margin:0; font-size:.9375rem; line-height:1.6; }
.bf-mv hr{
  border:0; border-top:1px solid rgba(255,255,255,.22); margin:26px 0 24px;
}
/* El marcador del horizonte ya no pinta nada: la foto lo sustituye.
   Se deja neutralizado para no romper layouts ya importados que aún
   traigan el <span> en el HTML. */
.bf-mv__horizon{ display:none; }
/* Apilada, la tarjeta es ancha y baja: la foto, que es cuadrada, se
   ampliaba tanto con `cover` que el horizonte subía hasta el texto.
   Con una altura mínima recupera la proporción del mockup. */
@media (max-width:980px){ .bf-mv{ min-height:520px; } }

/* Mapa global — About 11 y Contact 11.
   En About la cabecera vive dentro de la columna izquierda, así que
   las dos columnas van casi a la par y alineadas arriba. */
.bf-global{ display:grid; grid-template-columns:1fr 1.05fr; gap:44px; align-items:center; }
.bf-global h2{ margin:0 0 12px; }
.bf-global__lead{
  line-height:1.6; color:var(--bf-text-muted); margin:0 0 26px;
}
/* El PNG del mapa viene con fondo blanco; multiplicarlo lo funde con
   el gris de la sección en lugar de dejar un recuadro. Se retira
   cuando diseño entregue la versión con transparencia. */
.bf-global__map{ width:100%; height:auto; display:block; mix-blend-mode:multiply; }
.bf-global__item{ display:flex; gap:14px; align-items:flex-start; margin-bottom:22px; }
.bf-global__item .bf-icon{ flex:0 0 auto; margin-top:2px; color:var(--bf-blue); }
.bf-global__title{ font-size:.9375rem; font-weight:700; color:var(--bf-navy); margin:0 0 4px; }
.bf-global__text{ font-size:.875rem; line-height:1.55; color:var(--bf-text-muted); margin:0; }
@media (max-width:900px){ .bf-global{ grid-template-columns:1fr; gap:24px; } }

.bf-countries{
  display:flex; flex-wrap:wrap; gap:10px 0;
  justify-content:center; margin-top:26px;
}
.bf-countries span{
  font-size:.875rem; font-weight:600; color:var(--bf-navy);
  padding:0 18px; border-right:1px solid var(--bf-blue-100);
}
.bf-countries span:last-child{ border-right:none; }

/* ============================================================
   CONTACT
   ============================================================ */

.bf-contact-2col{ display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:start; }
@media (max-width:980px){ .bf-contact-2col{ grid-template-columns:1fr; gap:32px; } }

/* Bloque de email del hero (Contact 04).
   El mockup no lo encierra en una tarjeta: filete azul, el rótulo
   "Prefer email?" en su propia línea, y debajo el icono en círculo
   azul macizo junto a la dirección. */
.bf-mailblock{ margin-top:4px; }
.bf-mailblock__head{
  font-size:1.0625rem; font-weight:700; color:var(--bf-navy); margin:0 0 14px;
}
.bf-mailblock__row{ display:flex; align-items:center; gap:16px; }
.bf-mailblock__icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:48px; height:48px; border-radius:50%;
  background:var(--bf-blue-cta); color:#fff; flex:0 0 auto;
}
/* .bf-icon fija color:var(--bf-blue) y gana a la herencia: sin esto
   el sobre desaparece sobre el círculo azul. Mismo caso que las
   flechas dentro de .bf-btn. */
.bf-mailblock__icon .bf-icon{ color:inherit; }
.bf-mailblock__row strong{ font-size:.9375rem; color:var(--bf-navy); }
.bf-mailblock a{ color:var(--bf-blue-cta); text-decoration:none; font-weight:600; }
.bf-mailblock a:hover{ text-decoration:underline; }
.bf-mailblock__note{
  font-size:.875rem; color:var(--bf-text-muted); margin:16px 0 0;
}

/* Panel del formulario (Contact 05-09).
   El mockup mete el formulario y "What to Expect" dentro de una sola
   tarjeta blanca, y dentro de ella "What to Expect" en un panel gris
   anidado. El fondo blanco va sobre la FILA de Divi, que es quien
   contiene las dos columnas reales del módulo de formulario. */
.et_pb_row.bf-formpanel{
  background:#fff;
  border:1px solid var(--bf-blue-050);
  border-radius:18px;
  box-shadow:0 10px 34px rgba(2,14,50,.06);
  padding:38px !important;
}
.bf-formpanel__aside{
  background:var(--bf-surface);
  border-radius:14px;
  padding:28px 26px;
}
.bf-form__title{ margin:0 0 10px; }
.bf-form__lead{
  line-height:1.6; color:var(--bf-text-muted); margin:0 0 24px;
}

.bf-expect__head{ margin:0 0 6px; }
.bf-expect{ list-style:none; margin:0; padding:0; }
.bf-expect li{
  display:flex; gap:16px; align-items:flex-start;
  padding:20px 0;
  border-bottom:1px solid rgba(2,14,50,.08);
}
.bf-expect li:last-child{ border-bottom:none; padding-bottom:0; }
.bf-expect__icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:52px; height:52px; border-radius:50%;
  background:var(--bf-blue-050); color:var(--bf-blue); flex:0 0 auto;
}
.bf-expect__title{ font-size:.9375rem; font-weight:700; color:var(--bf-navy); margin:0 0 4px; }
.bf-expect__text{ font-size:.8125rem; line-height:1.5; color:var(--bf-text-muted); margin:0; }

/* Banda de datos de contacto (Contact 12): una sola caja gris con
   filetes verticales, no cuatro tarjetas sueltas. */
/* Los filetes y el borde van en gris neutro, no en --bf-blue-100:
   ese azul se leía claramente azulado a este tamaño.

   El relleno es un paso más oscuro que el #F6F7FC muestreado del
   mockup. Allí la banda se apoya sobre sección blanca; aquí la
   sección se queda en el gris del sistema (#F9FAFC), y con el valor
   del mockup los dos grises quedaban casi idénticos y la banda
   desaparecía. El contraste lo pone la banda. */
.bf-infobar{
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  background:#ECEEF7;
  border:1px solid #DCDFEC;
  border-radius:16px;
  padding:26px 8px;
}
.bf-infobar__item{
  display:flex; gap:14px; align-items:flex-start;
  padding:4px 22px;
  border-right:1px solid #D3D7E6;
}
.bf-infobar__item:last-child{ border-right:none; }
.bf-infobar__icon{ color:var(--bf-blue); flex:0 0 auto; line-height:0; margin-top:1px; }
.bf-infobar__title{ font-size:.9375rem; font-weight:700; color:var(--bf-navy); margin:0 0 4px; }
.bf-infobar__text{ font-size:.875rem; line-height:1.55; color:var(--bf-text-muted); margin:0; }
@media (max-width:1000px){
  .bf-infobar{ grid-template-columns:repeat(2,1fr); gap:22px 0; }
  .bf-infobar__item:nth-child(2n){ border-right:none; }
}
@media (max-width:560px){
  .bf-infobar{ grid-template-columns:1fr; }
  .bf-infobar__item{ border-right:none; }
}

/* Banda partida: Approach y Global Engagement lado a lado
   (Contact 10-11), separados por un filete vertical. */
.bf-splitband{ display:grid; grid-template-columns:1fr 1fr; gap:0 52px; }
.bf-splitband > div:first-child{
  border-right:1px solid var(--bf-blue-100); padding-right:52px;
}
.bf-colhead__title{ margin:0 0 12px; }
.bf-colhead__lead{
  line-height:1.6; color:var(--bf-text-muted); margin:0 0 30px;
}
/* Cuatro pasos dentro de media columna: círculos e iconos más
   pequeños y conector más corto que en la versión a ancho completo. */
.bf-approach--compact .bf-approach__step{ padding:0 4px; gap:12px; }
.bf-approach--compact .bf-approach__icon{ width:60px; height:60px; }
/* Reserva de dos líneas en el título: "2. Strategize & Architect" no
   cabe en una a este ancho, y sin la reserva su descripción arrancaba
   un renglón más abajo que las de los otros tres pasos. */
.bf-approach--compact .bf-approach__title{
  font-size:.75rem; min-height:3.4em;
  display:flex; align-items:center; justify-content:center;
}
.bf-approach--compact .bf-approach__text{ font-size:.75rem; }
.bf-approach--compact .bf-approach__step::after{
  top:30px; left:calc(50% + 40px); right:calc(-50% + 40px);
}
@media (max-width:980px){
  .bf-splitband{ grid-template-columns:1fr; gap:44px; }
  .bf-splitband > div:first-child{ border-right:none; padding-right:0; }
}

/* Formulario de Divi con la piel del sitio.

   UAT CONTACT-02 (2026-09-19). Medido en el sitio: los campos de media
   anchura quedaban pegados en horizontal —Full Name terminaba en x=387
   y Work Email empezaba en x=387— porque el `padding` que se forzaba
   aquí anulaba el 3% de margen que Divi da a los campos derechos. Y el
   rótulo iba encima de cada caja, cuando en el mockup el texto va
   DENTRO del campo.

   Ahora el <form> es una rejilla de dos columnas con el mismo hueco
   en ambos sentidos, los campos no flotan, y el rótulo vuelve a ser
   solo para lectores de pantalla: el texto visible es el placeholder
   que Divi ya pone con el mismo título. */
.bf-form form.et_pb_contact_form{
  display:grid !important;
  grid-template-columns:1fr 1fr;
  gap:18px 18px;
}
.bf-form form.et_pb_contact_form::before,
.bf-form form.et_pb_contact_form::after{ display:none !important; }   /* clearfix */
.bf-form form.et_pb_contact_form > *{ grid-column:1 / -1; }
.bf-form form.et_pb_contact_form > .et_pb_contact_field_half{ grid-column:auto; }
.bf-form .et_pb_contact_field{
  float:none !important;
  width:auto !important;
  margin:0 !important;
  padding:0 !important;
  clear:none !important;
}
/* rótulo accesible, no visible */
.bf-form .et_pb_contact_form_label{
  position:absolute !important;
  width:1px !important; height:1px !important;
  overflow:hidden !important; clip:rect(0 0 0 0) !important;
  white-space:nowrap !important; margin:0 !important; padding:0 !important;
  display:block !important;
}
.bf-form input[type=text],
.bf-form input[type=email],
.bf-form textarea{
  background:#fff !important;
  border:1px solid #D6DDEE !important;
  border-radius:8px !important;
  padding:15px 16px !important;
  font-family:var(--bf-font) !important;
  font-size:.9375rem !important;
  line-height:1.4 !important;
  color:var(--bf-navy) !important;
  width:100% !important;
  box-shadow:0 1px 2px rgba(2,14,50,.03);
}
.bf-form input::placeholder,
.bf-form textarea::placeholder{ color:#4A5578; opacity:1; }
.bf-form input:focus, .bf-form textarea:focus{
  border-color:var(--bf-blue-cta) !important;
  outline:none;
  box-shadow:0 0 0 3px rgba(4,54,234,.12);
}
.bf-form .et_pb_contact_field textarea{ min-height:150px; display:block; }
.bf-form .et_contact_bottom_container{
  float:none !important; margin:4px 0 0 !important; display:flex; justify-content:flex-start;
}
.bf-form .et_pb_contact_submit{ margin:0 !important; }
@media (max-width:640px){
  .bf-form form.et_pb_contact_form{ grid-template-columns:1fr; }
  .bf-form form.et_pb_contact_form > .et_pb_contact_field_half{ grid-column:1 / -1; }
}

/* UAT CONTACT-03: el panel "What to Expect" termina a la misma altura
   que el formulario. La fila de Divi pasa a flex para que las dos
   columnas se estiren al alto de la mayor (sin esto medía 427px frente
   a 706px del formulario). */
@media (min-width:981px){
  .et_pb_row.bf-formpanel{ display:flex !important; align-items:stretch !important; }
  .et_pb_row.bf-formpanel > .et_pb_column{ float:none !important; }
  /* La cadena columna → módulo → .et_pb_text_inner → lista se hace
     flex entera para que los tres pasos se repartan el alto ganado en
     vez de dejar un hueco gris al pie del panel. */
  .bf-formpanel__aside{ display:flex !important; flex-direction:column; }
  .bf-formpanel__aside > .et_pb_module{ flex:1 1 auto; display:flex; flex-direction:column; margin-bottom:0 !important; }
  .bf-formpanel__aside .et_pb_text_inner{ flex:1 1 auto; display:flex; flex-direction:column; }
  .bf-formpanel__aside .bf-expect{ flex:1 1 auto; display:flex; flex-direction:column; justify-content:space-evenly; }
}
.bf-form-note{
  display:flex; gap:9px; align-items:flex-start;
  font-size:.8125rem; line-height:1.5; color:var(--bf-text-muted); margin:14px 0 0;
}
.bf-form-note .bf-icon{ flex:0 0 auto; margin-top:1px; color:var(--bf-navy); }
.bf-form-note--plain{ display:block; margin-top:10px; }
.bf-form-note a{ color:var(--bf-blue-cta); }

/* ============================================================
   SUCCESS STORIES
   ============================================================ */

/* Titular del hero de Success Stories: cuatro líneas dentro de media
   columna, así que baja de la escala de display (hasta 52px) a ~36px,
   que es lo que mide en el mockup. */
/* h1 y cuerpo: ver bf-typography.css (--bf-fs-hero). */

/* Siete tarjetas verticales. Flex y no grid de cuatro columnas fijas
   porque en el mockup la última fila —de tres— se estira hasta ocupar
   el ancho completo. */
.bf-cases{ display:flex; flex-wrap:wrap; gap:20px; }
/* calc(25% - 15px) con gap 20 da exactamente cuatro por fila; la
   última, de tres, crece y ocupa el ancho completo. Con un basis en
   píxeles entraban cinco. */
.bf-case{
  flex:1 1 calc(25% - 15px);
  display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--bf-blue-050);
  border-radius:16px; overflow:hidden;
  box-shadow:0 8px 26px rgba(2,14,50,.05);
  scroll-margin-top:96px;
}
/* 2:1, que es la proporción de la banda de imagen en el mockup y la
   de las fotos entregadas (2.5:1 a 2.84:1): con 16/10 el `cover`
   recortaba casi un tercio del ancho y se comía el gráfico que
   varias llevan a la derecha. */
.bf-case__media{ position:relative; aspect-ratio:2/1; background:#061229; }
.bf-case__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.bf-case__num{
  position:absolute; top:14px; left:14px;
  display:inline-flex; align-items:center; justify-content:center;
  min-width:38px; height:38px; padding:0 8px;
  border-radius:9px;
  background:var(--bf-blue-cta); color:#fff;
  font-size:.9375rem; font-weight:700; letter-spacing:.02em;
}
.bf-case__body{ padding:22px 20px 24px; }
.bf-case__sector{
  font-size:.625rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--bf-blue-cta); margin:0 0 8px;
}
.bf-case__title{
  font-size:1.0625rem; font-weight:700; color:var(--bf-navy);
  margin:0 0 18px; line-height:1.3;
}
.bf-case__block{ margin-bottom:16px; }
.bf-case__block:last-child{ margin-bottom:0; }
/* Las etiquetas van en azul, no en navy: es lo que las separa del
   cuerpo dentro de una tarjeta tan densa. */
.bf-case__label{
  font-size:.625rem; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--bf-blue-cta); margin:0 0 6px;
}
.bf-case__text{ font-size:.8125rem; line-height:1.55; color:var(--bf-text-muted); margin:0; }
.bf-case__outcomes{ list-style:none; margin:0; padding:0; }
.bf-case__outcomes li{
  display:flex; gap:8px; align-items:flex-start;
  font-size:.8125rem; line-height:1.45; color:var(--bf-text-muted);
  margin-bottom:6px;
}
.bf-case__outcomes .bf-icon{ flex:0 0 auto; margin-top:2px; color:var(--bf-blue-cta); }
@media (max-width:1100px){ .bf-case{ flex:1 1 calc(33.333% - 14px); } }
@media (max-width:820px){ .bf-case{ flex:1 1 calc(50% - 10px); } }
@media (max-width:560px){ .bf-case{ flex:1 1 100%; } }

/* Banda de cierre: icono, texto y enlace en una fila, sobre azul muy
   claro. En el mockup no es un bloque centrado con botón macizo. */
.bf-closing{
  display:flex; align-items:center; gap:22px;
  padding:26px 30px;
  background:var(--bf-blue-050); border-radius:14px;
}
.bf-closing__icon{ color:var(--bf-blue-cta); flex:0 0 auto; line-height:0; }
.bf-closing__body{ flex:1 1 auto; }
.bf-closing__body h2{ margin:0 0 4px; }
.bf-closing__body p{
  font-size:.875rem; line-height:1.55; color:var(--bf-text-muted); margin:0; max-width:62ch;
}
.bf-closing__link{
  flex:0 0 auto;
  display:inline-flex; align-items:center; gap:9px;
  font-size:.9375rem; font-weight:700;
  color:var(--bf-blue-cta); text-decoration:none;
}
.bf-closing__link .bf-icon{ color:inherit; }
.bf-closing__link:hover{ text-decoration:underline; }
@media (max-width:820px){
  .bf-closing{ flex-wrap:wrap; gap:16px; }
  .bf-closing__body{ flex:1 1 100%; }
}

/* ============================================================
   ESCENA DEL CUBO EN EL HERO — About, Contact y Success Stories
   UAT ABOUT-01, CONTACT-04 y SUCCESS-01 (2026-09-19).

   Cada una de esas páginas tiene en su mockup una composición propia
   del cubo —escalones de piedra, base con red, anillos de datos— y no
   el cubo suelto dentro de los anillos que llevaban. Las imágenes
   salen de los recortes REFERENCE-DERIVED de BF_Image_Assets/
   01_Shared_Cube: se les rellenó el logo BF, que el recorte original
   había dejado transparente, y se fundió el fondo claro del recorte
   para que no se vea un rectángulo contra el hero. Son la mejor pieza
   disponible, no el render nativo: si diseño entrega los originales
   en alta, basta con reemplazar los tres .webp de assets/img/.
   ============================================================ */
.bf-hero-scene{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  min-height:360px;
}
.bf-hero-scene::before{   /* halo detrás del cubo, como en el mockup */
  content:""; position:absolute; inset:8% 12%;
  background:radial-gradient(ellipse at 50% 50%, rgba(120,170,255,.30), rgba(220,235,255,.20) 45%, rgba(255,255,255,0) 72%);
  z-index:0;
}
.bf-hero-scene__img{
  position:relative; z-index:1;
  width:100%; max-width:560px; height:auto; display:block;
}
@media (max-width:980px){
  .bf-hero-scene{ min-height:0; margin-top:10px; }
  .bf-hero-scene__img{ max-width:440px; margin:0 auto; }
}

/* ============================================================
   PÁGINAS LEGALES — Privacy Policy y Terms of Service
   Texto definitivo del abogado (2026-09-19). Documento largo: la
   prioridad es la lectura. Columna de ~72 caracteres, índice fijo a
   la izquierda en escritorio, y los apartados con el mismo sistema
   tipográfico del resto del sitio.
   ============================================================ */
.bf-legal-hero h1{ font-size:var(--bf-fs-hero); line-height:1.1; margin:0 0 14px; }
.bf-legal-hero{ min-height:0 !important; }
.bf-legal__meta{
  display:flex; flex-wrap:wrap; gap:6px 22px; margin:0;
  font-size:.875rem; font-weight:600; color:var(--bf-text-muted);
}
.bf-legal{
  display:grid; grid-template-columns:240px minmax(0, 720px);
  gap:0 64px; justify-content:start; align-items:start;
}
.bf-legal__toc{
  position:sticky; top:110px;
  padding:20px 22px; border-radius:14px;
  background:var(--bf-surface); border:1px solid #E3E8F4;
}
.bf-legal__toc-title{
  font-size:.75rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--bf-blue-cta); margin:0 0 10px;
}
.bf-legal__toc ol{ margin:0; padding:0 0 0 18px; }
.bf-legal__toc li{ font-size:.8125rem; line-height:1.4; margin:0 0 7px; color:var(--bf-text-muted); }
.bf-legal__toc a{ color:var(--bf-navy); text-decoration:none; }
.bf-legal__toc a:hover{ color:var(--bf-blue-cta); text-decoration:underline; }

.bf-legal__body{ font-size:1rem; line-height:1.7; color:#3B4668; }
.bf-legal__body > :first-child{ margin-top:0; }
.bf-legal__body h2{
  font-size:1.375rem; line-height:1.3; margin:44px 0 12px;
  scroll-margin-top:110px;
}
.bf-legal__body h3{ font-size:1.0625rem; font-weight:700; margin:24px 0 8px; color:var(--bf-navy); }
.bf-legal__body p{ margin:0 0 14px; }
.bf-legal__body ul{ margin:0 0 16px; padding:0 0 0 22px; }
.bf-legal__body li{ margin:0 0 6px; padding-left:4px; }
.bf-legal__body li::marker{ color:var(--bf-blue-cta); }
.bf-legal__body strong{ color:var(--bf-navy); font-weight:600; }
.bf-legal__caps{ font-size:.9375rem; line-height:1.75; letter-spacing:.01em; }
.bf-legal__address{
  padding:16px 20px; border-left:3px solid var(--bf-blue-cta);
  background:var(--bf-surface); border-radius:0 10px 10px 0;
}
@media (max-width:980px){
  .bf-legal{ grid-template-columns:1fr; gap:28px; }
  .bf-legal__toc{ position:static; }
}