/* ============================================================
   Blue Foundations — componentes de página
   Empiezan en el Home pero varios se reutilizan en Services,
   Solutions, About y Success Stories: trust bar, approach y el
   banner CTA son componentes compartidos según el handoff.
   ============================================================ */

/* El display global llega a 64px, pensado para un titular a todo
   ancho. En el hero ocupa media columna, así que ahí se limita a
   52px: el handoff pide conservar los saltos de línea que definen
   la composición, y con 64px la primera línea se rompía en tres. */
/* El tamaño del h1 del hero vive en bf-typography.css (--bf-fs-hero),
   común a todas las páginas desde el UAT GLOBAL-04. */

/* ---------- utilidades de sección ----------
   Cabecera de sección: eyebrow + titular + entradilla. Es el
   bloque de "WE UNDERSTAND YOUR CHALLENGES..." y equivalentes, y
   se repite en las seis páginas.

   El selector lleva `.et_pb_text` delante y `!important` por un
   motivo concreto: el módulo Texto de Divi, cuando no se le fija
   una orientación, se marca con la clase `et_pb_text_align_left`,
   y Divi la estiliza con `text-align:left !important`. Con un
   selector de una sola clase el empate lo ganaba Divi y las
   cabeceras salían alineadas a la izquierda aunque la regla se
   estuviera aplicando.

   Medido en el sitio el 2026-09-01: con este selector las tres
   cabeceras del Home quedan centradas y a 873px sobre un
   contenedor de 1164, que es el 75% pedido.

   El tope de 1280 no llega a activarse mientras la fila siga
   limitada a 1280 y el 75% se calcule sobre ella; se deja escrito
   para que la intención quede clara si esa fila cambia.

   Por debajo de 980px pasa al 100%: un 75% sobre una pantalla de
   400px dejaría los titulares en una columna de 300px. */
.et_pb_text.bf-section-head,
.bf-section-head{
  width:75% !important;
  max-width:1280px !important;
  text-align:center !important;
  margin-left:auto !important;
  margin-right:auto !important;
  margin-bottom:48px;
}
.bf-section-head .bf-lead{ margin-left:auto; margin-right:auto; }
@media (max-width:980px){
  .et_pb_text.bf-section-head,
  .bf-section-head{ width:100% !important; }
}

/* ============================================================
   HERO — capability orbit
   El cubo es imagen; las siete etiquetas son HTML, como exige el
   handoff. Los nodos se colocan con porcentajes sobre un
   contenedor cuadrado, así el conjunto escala sin recalcular
   nada.
   ============================================================ */

.bf-orbit{
  position:relative;
  width:100%;
  max-width:660px;
  margin:0 auto;
  aspect-ratio:660 / 470;   /* más ancho que alto: las etiquetas
                               necesitan sitio a los lados del anillo */
}

/* Anillos concéntricos, en CSS y no como imagen. El anillo es un
   círculo centrado cuyo diámetro lo marca la altura, no el ancho;
   así el sobrante horizontal queda libre para las etiquetas. */
.bf-orbit::before{
  content:"";
  position:absolute;
  top:13%; bottom:13%;
  left:50%; transform:translateX(-50%);
  aspect-ratio:1 / 1;
  border-radius:50%;
  /* 2026-09-19, a pedido del cliente: el orbit vuelve al aspecto de la
     versión anterior (anillo exterior y halo idénticos) y solo se quita
     la circunferencia interior (UAT HOME-05). */
  background:
    radial-gradient(circle at 50% 50%, transparent 63%, rgba(30,58,250,.16) 63.4%, transparent 64%),
    radial-gradient(circle at 50% 50%, rgba(220,235,255,.6), rgba(255,255,255,0) 72%);
}

.bf-orbit__cube{
  position:absolute;
  top:50%; left:50%;
  /* Tamaño y posición de la versión anterior, a pedido del cliente
     (2026-09-19): deja sin efecto la ampliación de UAT HOME-01/SERV-01. */
  transform:translate(-50%,-50%);
  width:32%;
  height:auto;
  z-index:2;
}

.bf-orbit__nodes{ list-style:none; margin:0; padding:0; }

.bf-orbit__node{
  position:absolute;
  display:flex;
  align-items:center;
  gap:10px;
  width:max-content;
  max-width:175px;     /* 52 del icono + 10 de hueco + 113 de etiqueta */
  z-index:3;
}
/* Iconos con el aspecto de la versión anterior (a pedido del cliente,
   2026-09-19). Es el mismo componente en Home y Services. */
.bf-orbit__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  width:48px; height:48px;
  border-radius:50%;
  background:#fff;
  border:1px solid var(--bf-blue-100);
  box-shadow:0 4px 14px rgba(2,14,50,.08);
  color:var(--bf-blue);
}
.bf-orbit__label{
  font-size:.8125rem;
  font-weight:600;
  line-height:1.3;
  color:var(--bf-navy);
}

/* Los nodos de la izquierda llevan la etiqueta antes del icono,
   para que el texto siempre quede hacia fuera del círculo. */
.bf-orbit__node--left{ flex-direction:row-reverse; text-align:right; justify-content:flex-end; }
/* El nodo superior lleva la etiqueta ENCIMA del icono, como el
   mockup: debajo chocaba con el cubo al crecer este. */
.bf-orbit__node--top{ flex-direction:column-reverse; width:150px; text-align:center; gap:6px; }
/* El inferior, al revés: etiqueta DEBAJO, hacia fuera del anillo. */
.bf-orbit__node--bottom{ flex-direction:column; width:170px; text-align:center; gap:6px; }

/* Posiciones calculadas sobre el círculo: el icono queda centrado
   sobre el anillo y la etiqueta cae hacia fuera. Los porcentajes
   dejan el borde exterior del nodo dentro del contenedor, que es
   lo que evitaba la barra de desplazamiento horizontal. */
.bf-orbit__node--1{ top:7.4%;  left:50%; transform:translate(-50%, calc(-100% + 48px)); }  /* arriba   */
/* ↑ con la etiqueta encima, el nodo sube exactamente lo que mide la
   etiqueta (alto del nodo − 48px del icono), así el icono sigue
   apoyado en el anillo tenga la etiqueta una línea o dos. */
.bf-orbit__node--2{ top:20.7%; left:66.3%; }                           /* sup. der */
.bf-orbit__node--3{ top:44.5%; left:72.4%; }                           /* derecha  */
.bf-orbit__node--4{ top:68.3%; left:66.3%; }                           /* inf. der */
.bf-orbit__node--5{ top:68.3%; right:66.3%; }                          /* inf. izq */
.bf-orbit__node--6{ top:44.5%; right:72.4%; }                          /* izquierda*/
.bf-orbit__node--7{ top:20.7%; right:66.3%; }                          /* sup. izq */

/* En móvil el orbit no cabe: el cubo se queda y las capacidades
   pasan a una lista en dos columnas debajo. El handoff pide
   apilar sin encoger el cubo hasta hacerlo ilegible. */
@media (max-width:980px){
  .bf-orbit{ aspect-ratio:auto; max-width:420px; }
  .bf-orbit::before{ display:none; }
  .bf-orbit__cube{ position:static; transform:none; width:64%; margin:0 auto 28px; display:block; }
  .bf-orbit__nodes{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:16px 12px;
  }
  .bf-orbit__node,
  .bf-orbit__node--1,.bf-orbit__node--2,.bf-orbit__node--3,.bf-orbit__node--4,
  .bf-orbit__node--5,.bf-orbit__node--6,.bf-orbit__node--7{
    position:static; transform:none; width:auto; max-width:none;
    flex-direction:row; text-align:left; justify-content:flex-start;
  }
  .bf-orbit__icon{ width:42px; height:42px; }
}

/* Seguro contra desbordes horizontales. Con la geometría de arriba
   nada se sale, pero un hero es lo primero que ve el usuario y una
   barra horizontal ahí se nota mucho. Es clip y no hidden para no
   crear un contenedor de scroll. */
.bf-hero{ overflow-x:clip; }

/* ============================================================
   TRUST BAR — 4 proof points. Se repite en Home, Services,
   Solutions y Success Stories.
   ============================================================ */

.bf-trustbar{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  background:#fff;
  border:1px solid var(--bf-blue-100);
  border-radius:14px;
  box-shadow:0 6px 24px rgba(2,14,50,.05);
  overflow:hidden;
}
.bf-trustbar__item{
  display:flex;
  align-items:center;
  gap:14px;
  padding:26px 24px;
  border-left:1px solid rgba(2,14,50,.07);
}
.bf-trustbar__item:first-child{ border-left:none; }
.bf-trustbar__icon{ color:var(--bf-blue); flex:0 0 auto; }
.bf-trustbar__value{
  display:block;
  font-size:1.25rem; font-weight:700; line-height:1.2;
  color:var(--bf-navy);
}
.bf-trustbar__label{
  display:block;
  font-size:.8125rem; line-height:1.35;
  color:var(--bf-text-muted);
  margin-top:2px;
}
@media (max-width:980px){
  .bf-trustbar{ grid-template-columns:repeat(2,1fr); }
  .bf-trustbar__item:nth-child(odd){ border-left:none; }
  .bf-trustbar__item:nth-child(n+3){ border-top:1px solid rgba(2,14,50,.07); }
}
@media (max-width:479px){
  .bf-trustbar{ grid-template-columns:1fr; }
  .bf-trustbar__item{ border-left:none; }
  .bf-trustbar__item + .bf-trustbar__item{ border-top:1px solid rgba(2,14,50,.07); }
}

/* ============================================================
   INDUSTRIES — tira de 8
   ============================================================ */

.bf-industries{
  display:grid;
  grid-template-columns:repeat(8,1fr);
  gap:0;
}
.bf-industries__item{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:22px 10px;
  text-align:center;
  border-left:1px solid rgba(2,14,50,.08);
}
.bf-industries__item:first-child{ border-left:none; }
.bf-industries__icon{ color:var(--bf-blue); }
.bf-industries__label{
  font-size:.75rem; font-weight:600; line-height:1.3;
  color:var(--bf-navy);
  min-height:2.6em;   /* una o dos líneas ocupan lo mismo */
}
@media (max-width:1100px){ .bf-industries{ grid-template-columns:repeat(4,1fr); }
  .bf-industries__item:nth-child(4n+1){ border-left:none; }
  .bf-industries__item:nth-child(n+5){ border-top:1px solid rgba(2,14,50,.08); } }
@media (max-width:600px){ .bf-industries{ grid-template-columns:repeat(2,1fr); }
  .bf-industries__item:nth-child(odd){ border-left:none; }
  .bf-industries__item:nth-child(n+3){ border-top:1px solid rgba(2,14,50,.08); } }

/* ============================================================
   CHALLENGES — tres columnas: reto → solución → resultado
   ============================================================ */

.bf-challenges{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; }
.bf-challenges__heads{
  display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px;
  margin-bottom:14px;
}
.bf-challenges__head{
  font-size:.6875rem; font-weight:700; letter-spacing:.11em;
  text-transform:uppercase; color:var(--bf-text-muted);
  text-align:center;
}
.bf-challenges__cell{
  display:flex; align-items:center; gap:16px;
  background:#fff;
  border:1px solid var(--bf-blue-100);
  border-radius:12px;
  padding:20px 18px;
}
.bf-challenges__cell .bf-icon{ flex:0 0 auto; }
.bf-challenges__title{
  font-size:.9375rem; font-weight:600; line-height:1.35;
  color:var(--bf-navy); margin:0 0 5px;
}
.bf-challenges__text{
  font-size:.8125rem; line-height:1.5; color:var(--bf-text-muted); margin:0;
}
.bf-challenges__arrow{ margin-left:auto; color:var(--bf-blue); align-self:center; }

@media (max-width:980px){
  .bf-challenges,
  .bf-challenges__heads{ grid-template-columns:1fr; }
  .bf-challenges__heads{ display:none; }
  .bf-challenges__arrow{ display:none; }
  /* Cada trío de tarjetas se mantiene junto y en orden. */
  .bf-challenges{ gap:10px; }
  .bf-challenges__cell{ padding:16px 15px; }
}

/* ============================================================
   CAPABILITIES — 8 tarjetas de icono + etiqueta
   ============================================================ */

.bf-capabilities{ display:grid; grid-template-columns:repeat(8,1fr); gap:0; }
.bf-capabilities__item{
  display:flex; flex-direction:column; align-items:center; gap:12px;
  padding:22px 10px; text-align:center;
  border-left:1px solid rgba(2,14,50,.08);
  transition:background-color .2s ease;
}
.bf-capabilities__item:first-child{ border-left:none; }
.bf-capabilities__item:hover{ background:rgba(4,54,234,.04); }
.bf-capabilities__label{
  font-size:.75rem; font-weight:600; line-height:1.32; color:var(--bf-navy);
  min-height:2.65em;
}
@media (max-width:1100px){ .bf-capabilities{ grid-template-columns:repeat(4,1fr); }
  .bf-capabilities__item:nth-child(4n+1){ border-left:none; }
  .bf-capabilities__item:nth-child(n+5){ border-top:1px solid rgba(2,14,50,.08); } }
@media (max-width:600px){ .bf-capabilities{ grid-template-columns:repeat(2,1fr); }
  .bf-capabilities__item:nth-child(odd){ border-left:none; }
  .bf-capabilities__item:nth-child(n+3){ border-top:1px solid rgba(2,14,50,.08); } }

/* ============================================================
   FEATURED SUCCESS STORY — panel navy
   Las métricas son HTML. El gráfico es decorativo: no muestra
   cifras ni ejes, para no presentar como dato algo que es una
   ilustración.
   ============================================================ */

.bf-story{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
  gap:0;
  background:linear-gradient(135deg,#EEF3FD 0%, #E4EDFB 100%);
  border-radius:16px;
  overflow:hidden;
}
.bf-story__copy{ padding:44px 40px; }
.bf-story__metrics{ display:flex; gap:16px; margin:26px 0 24px; flex-wrap:wrap; }
.bf-story__metric{ display:flex; align-items:flex-start; gap:8px; }
.bf-story__metric .bf-metric{ font-size:1.375rem; }
.bf-story__metric .bf-icon{ margin-top:4px; }
/* El panel llevaba un SVG decorativo; ahora contiene la imagen que
   entregó el cliente.

   `contain` y no `cover`: la imagen es 933x512 (1.82:1) y el panel
   ronda 1.25:1, así que `cover` recortaba casi un tercio del ancho
   —justo la tarjeta de "Forecast Accuracy" a la izquierda y el borde
   derecho de las gráficas—. Como el fondo de la imagen es navy y el
   degradado del panel también, el aire que deja `contain` no se ve. */
.bf-story__panel{
  background:linear-gradient(145deg,#071633 0%, #0A2A6B 55%, #061229 100%);
  padding:22px;
  display:flex; align-items:center; justify-content:center;
  min-height:300px;
}
.bf-story__img{
  width:100%; height:100%; max-height:100%;
  object-fit:contain; object-position:center;
  display:block;
}
.bf-story__chart{ width:100%; height:auto; display:block; }
.bf-story__link{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:600; font-size:.9375rem;
  color:var(--bf-blue-cta); text-decoration:none;
}
.bf-story__link:hover{ color:var(--bf-blue-hover); }
@media (max-width:980px){
  .bf-story{ grid-template-columns:1fr; }
  .bf-story__copy{ padding:32px 24px; }
  .bf-story__panel{ min-height:220px; }
}

/* ============================================================
   APPROACH — 4 pasos. Componente compartido.
   ============================================================ */

.bf-approach{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
.bf-approach__step{
  position:relative;
  display:flex; flex-direction:column; align-items:center; gap:16px;
  padding:0 18px; text-align:center;
}
.bf-approach__icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:78px; height:78px;
  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-approach__title{
  font-size:.9375rem; font-weight:700; color:var(--bf-navy); margin:0;
}
.bf-approach__text{
  font-size:.8125rem; line-height:1.5; color:var(--bf-text-muted); margin:0;
}
/* Conector punteado entre pasos, dibujado con un borde y no con
   una imagen. Desaparece en el último y en móvil. */
.bf-approach__step::after{
  content:"";
  position:absolute; top:39px; left:calc(50% + 55px); right:calc(-50% + 55px);
  border-top:2px dotted rgba(30,58,250,.35);
}
.bf-approach__step:last-child::after{ display:none; }
@media (max-width:980px){
  .bf-approach{ grid-template-columns:repeat(2,1fr); gap:34px 0; }
  .bf-approach__step::after{ display:none; }
}
@media (max-width:479px){ .bf-approach{ grid-template-columns:1fr; } }

/* ============================================================
   CTA BANNER — componente compartido, navy
   ============================================================ */

.bf-cta{
  display:grid;
  grid-template-columns:repeat(3,1fr);   /* tres espacios iguales */
  align-items:center;
  gap:28px;
  border-radius:18px;
  padding:38px 44px;
  /* UAT GLOBAL-05: fondo con destellos y reflejo alrededor del cubo
     (bf-cta-sparkle.svg, sobre la pieza PRODUCTION cta_dark_gradient).
     El degradado queda de respaldo por si el SVG no carga. */
  background-color:#06132F;
  background-image:
    url(../img/bf-cta-sparkle.svg),
    linear-gradient(100deg,#06132F 0%, #0A2A6B 52%, #071633 100%);
  background-size:cover, 100% 100%;
  background-position:left center, center;
  background-repeat:no-repeat;
}
/* ------------------------------------------------------------
   WordPress mete un <p></p> vacío detrás del <img> al procesar el
   contenido del módulo Texto (wpautop). Dentro de una rejilla ese
   párrafo ocupa una celda: el cubo caía en la 1, el párrafo vacío
   en la 2 —el hueco del centro—, el texto en la 3 y el botón
   bajaba a la fila siguiente.

   Se resuelve por partida doble: se oculta el párrafo vacío, y
   además cada bloque se ancla a su columna con `nth-of-type`, que
   cuenta solo los <div> y por tanto no se descoloca aunque
   WordPress inserte más elementos sueltos.

   Comprobado en el sitio el 2026-09-02: el <p> queda en
   display:none y los tres bloques en columnas 1, 2 y 3 de la
   fila 1.
   ------------------------------------------------------------ */
.et_pb_text p:empty,
.bf-cta > p:empty,
.bf-story > p:empty{ display:none; }

.bf-cta > img{ grid-column:1; grid-row:1; }
.bf-cta > div:nth-of-type(1){ grid-column:2; grid-row:1; }
.bf-cta > div:nth-of-type(2){ grid-column:3; grid-row:1; }

.bf-cta__cube{
  width:190px; height:auto; display:block; margin:0 auto;   /* 150 → 190: GLOBAL-05 */
  filter:drop-shadow(0 0 26px rgba(11,85,255,.55));
}
/* Eyebrow más brillante que el #7FA6FF genérico de .bf-on-dark */
.bf-cta .bf-eyebrow{ color:#5FD8FF; letter-spacing:.1em; }
/* Botón del pre-footer: fondo blanco y letras azules (GLOBAL-05).
   Se fija sobre .bf-cta para que gane al estilo de contorno blanco
   que .bf-on-dark da a los botones secundarios. */
/* Doble clase (.bf-cta.bf-on-dark): `.bf-on-dark .bf-btn--secondary`
   pone el texto en blanco y se declara más abajo en esta hoja; con la
   misma especificidad ganaba él y el botón salía blanco sobre blanco. */
.bf-cta.bf-on-dark .bf-btn,
.bf-cta.bf-on-dark .bf-btn--secondary,
.bf-cta.bf-on-dark .bf-btn--primary{
  background:#fff; color:var(--bf-blue-cta); border-color:#fff;
  box-shadow:0 8px 22px rgba(0,0,0,.18);
}
.bf-cta.bf-on-dark .bf-btn:hover{
  background:#EAF1FF; color:var(--bf-blue-cta); border-color:#EAF1FF;
}
.bf-cta__title{ margin:.35rem 0 .6rem; }
.bf-cta__text{ margin:0; max-width:60ch; }
.bf-cta > div:last-child{ display:flex; justify-content:center; }
@media (max-width:980px){
  .bf-cta{ grid-template-columns:1fr; text-align:center; gap:20px; padding:32px 24px; }
  .bf-cta > img,
  .bf-cta > div:nth-of-type(1),
  .bf-cta > div:nth-of-type(2){ grid-column:1; grid-row:auto; }
  .bf-cta__cube{ margin:0 auto; width:150px; }
  .bf-cta__text{ margin-left:auto; margin-right:auto; }
}

/* ============================================================
   BOTONES EN HTML
   Los módulos Button de Divi se apilan en bloque, así que cuando
   hacen falta dos CTA en línea —el hero— se escriben como
   anclas. Mismo aspecto que .et_pb_button.bf-btn-primary.
   ============================================================ */

.bf-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:30px; }

.bf-btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:13px 24px;
  border-radius:8px;
  font-size:.9375rem; font-weight:600; line-height:1.2;
  text-decoration:none;
  border:2px solid transparent;
  transition:background-color .2s ease, border-color .2s ease, color .2s ease;
}
.bf-btn--primary{ background:var(--bf-blue-cta); color:#fff; border-color:var(--bf-blue-cta); }
.bf-btn--primary:hover{ background:var(--bf-blue-hover); border-color:var(--bf-blue-hover); color:#fff; }
.bf-btn--secondary{ background:transparent; color:var(--bf-blue-cta); border-color:var(--bf-blue-100); }
.bf-btn--secondary:hover{ border-color:var(--bf-blue-cta); background:rgba(4,54,234,.04); }
.bf-on-dark .bf-btn--secondary{ color:#fff; border-color:rgba(255,255,255,.35); }
/* El icono toma el color del botón; si no, .bf-icon impone el azul
   de marca y la flecha desaparece sobre el fondo azul. */
.bf-btn .bf-icon{ color:inherit; transition:transform .2s ease; }
.bf-btn:hover .bf-icon{ transform:translateX(3px); }
@media (prefers-reduced-motion:reduce){
  .bf-btn .bf-icon, .bf-btn:hover .bf-icon{ transition:none; transform:none; }
}

/* ------------------------------------------------------------
   Compensación en el footer y el header tras normalizar el
   viewBox de los iconos. Antes la tinta ocupaba entre el 26% y el
   98% del lienzo según el icono, así que `size` no significaba lo
   mismo en cada uno. Ahora todos ocupan el 80%, y los que ya
   estaban casi llenos —el sobre del footer, LinkedIn y X— habrían
   cambiado de tamaño respecto a como quedaron aprobados. Se fijan
   aquí en lugar de tocar los módulos del Theme Builder.
   ------------------------------------------------------------ */
.bf-footer__email .bf-icon{ width:22px !important; height:22px !important; }
.bf-footer__social .bf-icon{ width:38px !important; height:38px !important; }