/* ============ OFBA S.A.S — Sistema de diseño v2 (azul & blanco) ============ */
:root{
  --navy:#0B1D42;
  --blue:#1B3E86;
  --blue-soft:#3B63B8;
  --ink:#0B1D42;
  --gray:#6B7280;
  --gray-soft:#98A2B3;
  --paper:#FFFFFF;
  --mist:#F5F7FB;
  --line:rgba(11,29,66,0.08);
  --line-strong:rgba(11,29,66,0.14);
  --maxw: 1180px;
  --radius: 22px;
  --radius-sm: 14px;
  --radius-pill: 999px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Montserrat', sans-serif;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{
  font-family:'Montserrat', sans-serif;
  font-weight:700;
  letter-spacing:-0.02em;
  line-height:1.08;
  color:var(--navy);
}
em, .italic{
  font-style:italic;
  font-weight:400;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px;}

.eyebrow{
  font-family:'Montserrat', sans-serif;
  font-style:italic;
  font-weight:500;
  font-size:14px;
  letter-spacing:0.01em;
  color:var(--blue-soft);
  display:flex; align-items:center; gap:10px;
  margin-bottom:16px;
}
.eyebrow::before{
  content:"";
  width:20px; height:1.5px;
  background:var(--blue-soft);
  display:inline-block;
}
.eyebrow.on-dark{color:#AFC2EC;}
.eyebrow.on-dark::before{background:#AFC2EC;}

/* ---------- NAV ---------- */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,0.82);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 32px;
  max-width:var(--maxw); margin:0 auto;
}
.brand{display:flex; align-items:center; gap:12px;}
.brand img{height:40px; width:auto;}
nav.links{display:flex; gap:6px; align-items:center;}
.nav-btn{
  font-family:'Montserrat'; font-weight:500; font-size:14px;
  color:var(--navy); padding:9px 16px; border-radius:var(--radius-pill);
  transition:all .18s;
}
.nav-btn:hover{background:var(--mist);}
.nav-btn.active{background:var(--navy); color:#fff;}
.nav-cta{
  background:var(--navy); color:#fff; font-family:'Montserrat'; font-weight:600; font-size:14px;
  padding:11px 22px; border-radius:var(--radius-pill); white-space:nowrap;
  transition:background .18s;
}
.nav-cta:hover{background:var(--blue);}
.menu-btn{display:none; background:none; border:none; color:var(--navy); font-size:24px; cursor:pointer;}

/* ---------- BOTONES ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px; font-family:'Montserrat'; font-size:15px; font-weight:600;
  padding:16px 30px; border-radius:var(--radius-pill); border:1.5px solid transparent; cursor:pointer;
  transition:all .18s;
}
.btn-primary{background:var(--navy); color:#fff;}
.btn-primary:hover{background:var(--blue); transform:translateY(-1px);}
.btn-ghost{border-color:rgba(255,255,255,0.4); color:#fff;}
.btn-ghost:hover{border-color:#fff; background:rgba(255,255,255,0.08);}
.btn-outline{border-color:var(--line-strong); color:var(--navy);}
.btn-outline:hover{border-color:var(--navy); background:var(--mist);}
.btn-white{background:#fff; color:var(--navy);}
.btn-white:hover{transform:translateY(-1px); box-shadow:0 8px 20px rgba(11,29,66,0.18);}

section{padding:100px 0;}
.section-head{display:grid; grid-template-columns:1fr 1fr; gap:48px; margin-bottom:60px; align-items:end;}
.section-head h2{font-size:clamp(32px,4vw,46px);}
.section-head p{color:var(--gray); font-size:16px; line-height:1.65;}

/* ---------- Page hero (páginas secundarias) ---------- */
.page-hero{background:var(--navy); color:#fff; padding:80px 0 64px; position:relative; overflow:hidden;}
.page-hero::after{
  content:""; position:absolute; right:-140px; top:-140px; width:480px; height:480px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 70%);
}
.page-hero .wrap{position:relative; z-index:2;}
.page-hero h1{color:#fff; font-size:clamp(36px,5.5vw,56px);}
.page-hero p{color:#C3D0EE; font-size:17px; max-width:560px; margin-top:16px; line-height:1.6; font-style:italic; font-weight:400;}
.back-link{
  display:inline-flex; align-items:center; gap:8px; font-family:'Montserrat'; font-size:13px; font-weight:500;
  color:#AFC2EC; margin-bottom:26px;
}
.back-link:hover{color:#fff;}

footer{
  background:var(--mist); color:var(--gray); padding:36px 0; text-align:center;
  font-family:'Montserrat'; font-size:13px; border-top:1px solid var(--line);
}
footer img{height:26px; margin:0 auto 12px; opacity:0.7;}

.card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius);
  transition:box-shadow .2s, transform .2s;
}
.card:hover{box-shadow:0 20px 40px rgba(11,29,66,0.08); transform:translateY(-2px);}

@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }
@media (max-width: 860px){
  nav.links, .nav-cta{display:none;}
  .menu-btn{display:block;}
  .section-head{grid-template-columns:1fr;}
  section{padding:64px 0;}
}