/* ============================================================
   BUILDING THE FUTURE — estilos de página (scoped .bf).
   Sobre el design system (app.css + tokens --ws-*). Vibrancia del home.
   ============================================================ */
.bf .eyebrow{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:var(--fs-200);
  letter-spacing:.16em;text-transform:uppercase;color:var(--ws-cyan);margin-bottom:var(--space-2)}
.bf h1{font-size:var(--fs-800)} .bf h2{font-size:var(--fs-700)} .bf h3{font-size:var(--fs-500)}
.bf .lead{font-size:var(--fs-500);color:var(--ws-muted);max-width:60ch}
.bf .muted{color:var(--ws-muted)}
.bf .center{text-align:center;margin-inline:auto}
.bf .s-head{max-width:780px;margin-inline:auto;text-align:center;margin-bottom:var(--space-5)}
.bf .s-head p{font-size:var(--fs-400)}
.bf .ic{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;margin-bottom:var(--space-3);
  background:linear-gradient(135deg,rgba(3,143,143,.22),rgba(0,229,255,.16))}
.bf .ic svg{width:24px;height:24px;color:var(--ws-cyan)}
.bf .card h3{margin:0 0 var(--space-2);font-size:var(--fs-400);font-weight:700}
.bf .card p{margin:0;color:var(--ws-muted);font-size:var(--fs-300)}
.bf .card.center h3{margin-bottom:0}

/* hero */
.bf-hero{text-align:center;position:relative;overflow:hidden}
.bf-hero .inner{position:relative;z-index:1;max-width:920px;margin-inline:auto}
.bf-hero .cta-row{display:flex;gap:var(--space-2);justify-content:center;flex-wrap:wrap;margin-top:var(--space-4)}

/* problem statement */
.bf-problem{text-align:center;max-width:820px;margin-inline:auto}

/* grids */
.bf-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);align-items:center}
.bf-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3)}
.bf-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-3)}

/* journey / ecosystem */
.bf-journey{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-3)}
.bf-step{position:relative}
.bf-step .num{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:999px;
  background:var(--ws-grad-cta);color:#02201d;font-weight:800;font-size:var(--fs-300);margin-bottom:var(--space-2)}

/* coverage */
.bf-cov-countries{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3);margin-top:var(--space-4)}
.bf-cov-countries .c{display:flex;gap:.7em;align-items:center}
.bf-cov-countries img{width:30px;height:auto;border-radius:4px;flex:none;box-shadow:0 4px 12px -4px rgba(0,0,0,.6)}
.bf-cov-countries .n{font-weight:700;color:var(--ws-text);font-size:var(--fs-300)}

/* cta band */
.bf-cta{background:linear-gradient(120deg,var(--ws-surface-2) 0%,var(--ws-green-deep) 130%);
  border-radius:var(--radius);text-align:center;padding:var(--space-6) var(--space-4);position:relative;overflow:hidden}
.bf-cta::before{content:"";position:absolute;right:-80px;top:-80px;width:360px;height:360px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,229,255,.22),transparent 65%);filter:blur(30px)}
.bf-cta .inner{position:relative;z-index:1;max-width:720px;margin-inline:auto}

.bf .reveal{opacity:0;transform:translateY(22px);transition:.7s cubic-bezier(.22,.61,.36,1)}
.bf .reveal.in{opacity:1;transform:none}

@media(max-width:880px){
  .bf-grid-3,.bf-grid-4,.bf-journey{grid-template-columns:1fr 1fr}
  .bf-grid-2,.bf-cov-countries{grid-template-columns:1fr}
}
@media(max-width:540px){ .bf-grid-3,.bf-grid-4,.bf-journey{grid-template-columns:1fr} }
@media(prefers-reduced-motion:reduce){ .bf .reveal{opacity:1;transform:none;transition:none} .bf .ws-particles{display:none} }