/* ============================================================
   Blue Foundations — sistema tipográfico
   Inter, confirmada por el cliente el 2026-09-01.

   La escala es fluida con clamp(): interpola entre el tamaño
   móvil y el de escritorio sin saltos en los breakpoints. Esto
   cumple la instrucción del handoff de "keep display headlines
   visually dominant" sin forzar la geometría del mockup de
   escritorio en pantallas pequeñas.
   ============================================================ */

:root{
  --bf-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
             Roboto, Helvetica, Arial, sans-serif;

  /* Escala fluida: mínimo móvil → máximo escritorio.

     UAT GLOBAL-04 (2026-09-19): un solo tamaño por nivel jerárquico
     en las seis páginas. Antes cada hero llevaba el suyo —52px en
     Home, Services, About y Contact; 42px en Success Stories; 38px
     en Solutions— y los titulares de sección iban de 26 a 40px según
     la página. El UAT toma Solutions como referencia del hero, así
     que el h1 se fija en 38px y todo lo demás baja en proporción:
     un h2 de sección no puede quedar por encima del h1 de la página.

       hero h1 ........ 38px   --bf-fs-hero
       h2 de sección .. 32px   --bf-fs-h2
       título de panel  22px   --bf-fs-h3   (tarjetas y paneles)
       entradilla ..... 17px   --bf-fs-lead (intro de sección)
       cuerpo del hero  16px   --bf-fs-hero-body
       cuerpo ......... 16px   --bf-fs-body

     Para cambiar el tamaño de TODOS los heroes basta con tocar
     --bf-fs-hero: nada más en el tema lo sobrescribe. */
  --bf-fs-hero:      clamp(1.875rem, 1.20rem + 1.90vw, 2.375rem);  /* 30 → 38 */
  --bf-fs-hero-body: 1rem;
  --bf-fs-display:   var(--bf-fs-hero);
  --bf-fs-h2:        clamp(1.5rem,  1.15rem + 1.00vw, 2rem);       /* 24 → 32 */
  --bf-fs-h3:        clamp(1.2rem,  1.10rem + 0.30vw, 1.375rem);   /* 19 → 22 */
  --bf-fs-h4:        clamp(1.05rem, 1.00rem + 0.25vw, 1.1875rem);  /* 17 → 19 */
  --bf-fs-lead:      1.0625rem;                                    /* 17 */
  --bf-fs-body:      1rem;
  --bf-fs-small:   0.875rem;
  --bf-fs-eyebrow: 0.8125rem;
  --bf-fs-metric:  clamp(2rem, 1.50rem + 1.80vw, 3rem);         /* 32 → 48 */

  --bf-lh-display: 1.08;
  --bf-lh-heading: 1.18;
  --bf-lh-body:    1.65;

  --bf-text:       var(--bf-navy);
  --bf-text-muted: #4A5578;
}

body,
.et_pb_module,
.et_pb_section{ font-family:var(--bf-font); }

body{
  font-size:var(--bf-fs-body);
  line-height:var(--bf-lh-body);
  color:var(--bf-text-muted);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

h1,h2,h3,h4,h5,h6{
  font-family:var(--bf-font);
  color:var(--bf-text);
  font-weight:700;
  line-height:var(--bf-lh-heading);
  letter-spacing:-.015em;
}

h1, .bf-display{
  font-size:var(--bf-fs-display);
  line-height:var(--bf-lh-display);
  letter-spacing:-.022em;
}
h2{ font-size:var(--bf-fs-h2); }
h3{ font-size:var(--bf-fs-h3); font-weight:600; letter-spacing:-.008em; }
h4{ font-size:var(--bf-fs-h4); font-weight:600; letter-spacing:0; }

/* El handoff pinta la segunda mitad del titular del hero en azul.
   Se aplica envolviendo esa parte en <span class="bf-accent">. */
.bf-accent{ color:var(--bf-blue-cta); }

/* EYEBROW: etiqueta azul en mayúsculas sobre cada sección. */
.bf-eyebrow{
  display:block;
  font-size:var(--bf-fs-eyebrow);
  font-weight:600;
  line-height:1.4;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--bf-blue-cta);
  margin-bottom:.75rem;
}

/* BODY del hero y de las introducciones de sección. */
.bf-lead{
  font-size:var(--bf-fs-lead);
  line-height:1.6;
  color:var(--bf-text-muted);
  max-width:56ch;   /* medida de lectura, no ancho de columna */
}

/* Cifras de las tarjetas de métrica. */
.bf-metric{
  display:block;
  font-size:var(--bf-fs-metric);
  font-weight:700;
  line-height:1;
  letter-spacing:-.03em;
  color:var(--bf-navy);
  font-variant-numeric:tabular-nums;
}
.bf-metric-label{
  display:block;
  font-size:var(--bf-fs-small);
  line-height:1.35;
  color:var(--bf-text-muted);
  margin-top:.5rem;
}

/* WHAT YOU GET, labels y pies de tarjeta. */
.bf-small{ font-size:var(--bf-fs-small); line-height:1.5; }

/* Sobre superficies navy. */
.bf-on-dark,
.bf-on-dark p,
.bf-on-dark li{ color:rgba(255,255,255,.82); }
.bf-on-dark h1,
.bf-on-dark h2,
.bf-on-dark h3,
.bf-on-dark h4,
.bf-on-dark .bf-metric{ color:#fff; }
.bf-on-dark .bf-eyebrow{ color:#7FA6FF; }

/* ---------- Normalización GLOBAL-04 ----------
   Todos los titulares y cuerpos equivalentes, en todas las páginas,
   apuntan a la misma variable. Las reglas por componente que había
   repartidas en bf-home.css y bf-pages.css se retiraron: si un
   titular necesitara otro tamaño, tendría que ser otro nivel. */

/* h1 de todos los heroes, sea cual sea el modificador del hero */
.bf-hero h1,
.bf-hero--split h1,
.bf-hero--sm h1{
  font-size:var(--bf-fs-hero);
  line-height:1.1;
  letter-spacing:-.02em;
}

/* Cuerpo de todos los heroes: mismo tamaño en las seis páginas */
.bf-hero .bf-lead,
.bf-hero p.bf-hero__lead,
.bf-hero p.bf-hero__text{
  font-size:var(--bf-fs-hero-body);
  line-height:1.65;
  color:var(--bf-text-muted);
}
/* About lleva el cuerpo del hero en dos párrafos (UAT ABOUT-02): el
   primero es la frase de posicionamiento, en el mismo tamaño pero en
   navy y seminegrita; el segundo, cuerpo normal. */
.bf-hero p.bf-hero__lead{
  color:var(--bf-navy); font-weight:600; margin-bottom:12px; max-width:56ch;
}
.bf-hero p.bf-hero__text{ max-width:56ch; }

/* h2 de sección, esté donde esté la cabecera: centrada sobre la
   sección, dentro de una columna, en un panel o en la banda CTA */
.bf-section-head h2,
.bf-story-2col h2,
.bf-global h2,
.bf-colhead__title,
.bf-form__title,
.bf-featured__panel h2,
.bf-cta__title{
  font-size:var(--bf-fs-h2) !important;   /* el CTA traía un style inline */
  line-height:1.2;
}

/* Titular del Featured Success Story del Home: es un h2 de sección */
.bf-story__copy h2{ font-size:var(--bf-fs-h2); line-height:1.2; }

/* Títulos de panel y tarjeta grande */
.bf-closing__body h2,
.bf-diffcard h3,
.bf-mv h3,
.bf-expect__head{ font-size:var(--bf-fs-h3); line-height:1.25; }

/* Entradillas de sección: una sola medida, estén donde estén */
.bf-section-head .bf-lead,
.bf-colhead__lead,
.bf-global__lead,
.bf-form__lead,
.bf-featured__lead{
  font-size:var(--bf-fs-lead);
  line-height:1.6;
}

/* Cuerpo corrido dentro de las bandas de dos columnas (Our Story):
   todos los párrafos al mismo tamaño — UAT ABOUT-04 */
.bf-story-2col p{ font-size:var(--bf-fs-body); line-height:1.65; }

/* ---------- Estados de foco ----------
   El checklist del handoff exige "keyboard-visible focus states".
   :focus-visible solo se dispara con teclado, así que el ratón no
   arrastra el anillo por toda la interfaz. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.et_pb_button:focus-visible{
  outline:3px solid var(--bf-blue-cta);
  outline-offset:2px;
  border-radius:4px;
}
.bf-on-dark a:focus-visible,
.bf-on-dark .et_pb_button:focus-visible{ outline-color:#fff; }

/* ---------- Botones ----------
   El módulo Button de Divi arrastra dos capas de estilo propias:

     .et_pb_button      { font-size:20px; padding:.3em 1em; }
     body .et_pb_button { font-size:25px; text-transform:uppercase;
                          font-weight:normal; background:#0B3C5D; }

   La segunda viene de Divi > Theme Options > Buttons, que en esta
   instalación tiene estilos globales activados. Es la razón de que
   el botón del footer saliera enorme y en mayúsculas: 25px de
   fuente y un padding en `em` que crece con ella.

   Aquí se neutraliza con `html body` + la clase, que gana con
   holgura a `body .et_pb_button`. Aun así, la solución de fondo es
   desactivar esos estilos globales en Theme Options: mientras
   sigan puestos, cualquier botón de Divi que no lleve una de estas
   clases seguirá saliendo a 25px, en mayúsculas y en azul petróleo.
   ------------------------------------------------------------ */

html body .et_pb_button.bf-btn-primary,
html body .et_pb_button.bf-btn-secondary{
  display:inline-flex !important;
  align-items:center !important;
  font-family:var(--bf-font) !important;
  font-size:15px !important;
  line-height:1.35 !important;
  font-weight:600 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  padding:12px 22px !important;
  border-width:2px !important;
  border-radius:8px !important;
  white-space:nowrap !important;
}

/* Divi añade su propia flecha con ::after. Nuestros CTA ya llevan
   la flecha en el propio texto, así que tener las dos duplica la
   señal visual. */
html body .et_pb_button.bf-btn-primary::after,
html body .et_pb_button.bf-btn-secondary::after,
html body .et_pb_button.bf-btn-primary::before,
html body .et_pb_button.bf-btn-secondary::before{
  display:none !important;
  content:none !important;
}

html body .et_pb_button.bf-btn-primary{
  background-color:var(--bf-blue-cta) !important;
  color:#fff !important;
  border-color:var(--bf-blue-cta) !important;
  transition:background-color .2s ease, border-color .2s ease;
}
html body .et_pb_button.bf-btn-primary:hover{
  background-color:var(--bf-blue-hover) !important;
  border-color:var(--bf-blue-hover) !important;
  color:#fff !important;
}
html body .et_pb_button.bf-btn-secondary{
  background-color:transparent !important;
  color:var(--bf-blue-cta) !important;
  border-color:var(--bf-blue-100) !important;
  transition:border-color .2s ease, background-color .2s ease;
}
html body .et_pb_button.bf-btn-secondary:hover{
  border-color:var(--bf-blue-cta) !important;
  background-color:rgba(4,54,234,.04) !important;
}
html body .bf-on-dark .et_pb_button.bf-btn-secondary{
  color:#fff !important;
  border-color:rgba(255,255,255,.35) !important;
}

/* UAT HOME-04 / SUCCESS-02: la barra de highlights queda a la misma
   altura que en Services porque los heroes comparten un alto mínimo
   igual al alto natural del hero de Services.

   Medido en el sitio el 2026-09-19 a 1425px: Home y Services 663px,
   Success Stories 610 y Solutions 603 —la barra de Stories quedaba 53px
   más arriba—. El hero de Services mide 234px fijos (paddings de la
   sección y de la fila de Divi) más el orbit, que escala con el ancho
   hasta que la fila topa en 1280px: de ahí la fórmula. Con ella las
   barras coinciden al píxel en Home, Services y Success Stories a 1425
   y 1280px. Solutions tiene un hero distinto (1/3 + 2/3) y por debajo
   de ~1300px su texto ya es más alto que este mínimo. */
@media (min-width:981px){
  .bf-hero{ min-height:min(664px, calc(234px + 31vw)); }
}