:root{
  --bg:#F5F7FB;
  --text:#1F2937;
  --muted:#6B7280;
  --brand:#0A4FA3;
  --accent:#00A6C8;
  --border: rgba(15,23,42,.12);
  --shadow: 0 10px 30px rgba(15,23,42,.08);
  --radius: 18px;
  --max: 1140px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
h1, h2, h3, h4 {
  color: #0A4FA3;
  letter-spacing: -0.02em;
}

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, "Helvetica Neue", sans-serif;
  background:
    radial-gradient(900px 500px at 90% -10%, rgba(0,166,200,.12), transparent 40%),
    radial-gradient(800px 400px at 10% 0%, rgba(10,79,163,.10), transparent 45%),
    var(--bg);
  color:var(--text);
}
a{color:inherit; text-decoration:none}
.container{width:min(var(--max), calc(100% - 40px)); margin:0 auto}
.nav{position:sticky; top:0; z-index:50; backdrop-filter: blur(14px);
  background: rgba(255,255,255,.85); border-bottom: 1px solid var(--border);}
.nav-inner{display:flex; align-items:center; justify-content:space-between; padding:14px 0; gap:16px}
.brand{display:flex; align-items:center; gap:12px; min-width:220px}
.brand img{width:42px; height:42px; object-fit:contain}
.brand .name{font-weight:700; letter-spacing:.2px}
.menu{display:flex; gap:18px; align-items:center; flex-wrap:wrap; justify-content:center}
.menu a{color:var(--muted); font-weight:600; font-size:14px}
.menu a:hover{color:var(--text)}
.actions{display:flex; align-items:center; gap:10px}
.lang{display:inline-flex; border:1px solid var(--border); border-radius:999px; overflow:hidden;}
.lang button{appearance:none; border:0; background:transparent; color:var(--muted);
  padding:8px 10px; font-weight:700; cursor:pointer; font-size:12px;}
.lang button.active{background:rgba(255,255,255,.08); color:var(--text)}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 16px; border-radius:12px; border:1px solid var(--border);
  font-weight:700; font-size:14px; cursor:pointer;
  transition: transform .08s ease, background .2s ease, border-color .2s ease;}
.btn:hover{transform: translateY(-1px); border-color: rgba(255,255,255,.22)}
.btn-primary {
  background: linear-gradient(135deg, #0A4FA3, #00A6C8);
  color: #FFFFFF !important;
  border-radius: 12px;
  padding: 14px 22px;
  font-weight: 600;
}

.btn-ghost{background: rgba(10,79,163,.06)}
.hero{padding:74px 0 30px}
.hero-grid{display:grid; grid-template-columns: 1.25fr .75fr; gap:26px; align-items:center}
@media (max-width: 900px){.hero-grid{grid-template-columns:1fr;} .brand{min-width:auto}}
.kicker{display:inline-flex; gap:10px; align-items:center; color:var(--muted);
  font-weight:800; font-size:12px; letter-spacing:.16em; text-transform:uppercase;}
.kicker .dot{width:8px; height:8px; border-radius:999px; background: var(--accent);
  box-shadow:0 0 0 4px rgba(0,166,200,.15)}
h1{margin:14px 0 10px; font-size: clamp(34px, 4vw, 54px); line-height:1.05; letter-spacing:-.02em;}
.lead{color:rgba(31,41,55,.86); font-size: clamp(16px, 1.3vw, 18px); line-height:1.65; max-width: 60ch}
.hero-ctas{display:flex; gap:12px; flex-wrap:wrap; margin-top:18px}
.card{background: #FFFFFF;
  border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);}
.hero-card{padding:18px}
.stat{display:flex; gap:12px; padding:12px; border-radius:14px; background: rgba(245,247,251,.9);
  border:1px solid rgba(15,23,42,.10)}
.stat strong{display:block; font-size:14px}
.stat span{display:block; color:var(--muted); font-size:13px; line-height:1.35}
.pulse{width:10px; height:10px; border-radius:999px; background: var(--brand);
  box-shadow:0 0 0 0 rgba(10,79,163,.7); animation: pulse 2s infinite;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(10,79,163,.55)}70%{box-shadow:0 0 0 12px rgba(10,79,163,0)}100%{box-shadow:0 0 0 0 rgba(10,79,163,0)}}
.section{padding:54px 0}
.section h2{margin:0 0 10px; font-size: clamp(22px, 2.2vw, 32px); letter-spacing:-.01em;}
.sub{color:var(--muted); line-height:1.7; max-width: 78ch}
.grid-3{display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; margin-top:18px}
@media (max-width: 900px){.grid-3{grid-template-columns:1fr}}
.feature{padding:18px}
.icon{width:42px; height:42px; border-radius:14px; background: rgba(0,166,200,.12);
  display:grid; place-items:center; border:1px solid rgba(0,166,200,.25); margin-bottom:12px;}
.icon svg{width:22px; height:22px; fill: var(--accent)}
.feature h3{margin:8px 0 6px; font-size:18px}
.feature p{margin:0; color:rgba(31,41,55,.84); line-height:1.65; font-size:14.5px}
.split{display:grid; grid-template-columns: 1fr 1fr; gap:16px; margin-top:18px}
@media (max-width: 900px){.split{grid-template-columns:1fr}}
.panel{padding:22px}
.panel h3{margin:0 0 8px; font-size:18px}
.panel p{margin:0; color:rgba(31,41,55,.84); line-height:1.7}
.list{margin:14px 0 0; padding:0; list-style:none}
.list li{margin:10px 0; padding-left:28px; position:relative; color:rgba(31,41,55,.86); line-height:1.5}
.list li:before{content:""; position:absolute; left:0; top:6px; width:16px; height:16px; border-radius:6px;
  background: rgba(0,166,200,.12); border:1px solid rgba(0,166,200,.35); box-shadow: 0 0 0 4px rgba(0,166,200,.08);}
.contact{display:grid; grid-template-columns: 1.1fr .9fr; gap:16px; margin-top:18px;}
@media (max-width: 900px){.contact{grid-template-columns:1fr}}
form{display:grid; gap:10px}
label{font-size:13px; color:var(--muted); font-weight:700}
input, textarea, select{width:100%; padding:12px 12px; border-radius:12px;
  border:1px solid rgba(15,23,42,.14); background: rgba(255,255,255,.90); color:var(--text); outline:none;}
input:focus, textarea:focus, select:focus{border-color: rgba(0,166,200,.55); box-shadow:0 0 0 4px rgba(0,166,200,.12)}
textarea{min-height:120px; resize:vertical}
.helper{color:var(--muted); font-size:13px; line-height:1.5}
.footer{padding:26px 0; border-top:1px solid var(--border); color:var(--muted); font-size:13px}
.badge{display:inline-flex; gap:10px; align-items:center; padding:10px 12px; border-radius:999px;
  border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); color: rgba(31,41,55,.92);
  font-weight:700; font-size:13px;}
  /* === OVERRIDE A ESTILO CLARO CORPORATIVO === */

/* Fondo global */
body {
  background: #F5F7FB !important;
  color: #1F2937 !important;
}

/* Secciones */
section,
.hero,
.features,
.contact,
footer {
  background: transparent !important;
}

/* Tarjetas */
.card,
.panel,
.box {
  background: #FFFFFF !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08) !important;
}

/* Formularios */
input,
textarea,
select {
  background: #FFFFFF !important;
  color: #1F2937 !important;
  border: 1px solid rgba(15, 23, 42, 0.15) !important;
}

/* Labels */
label {
  color: #374151 !important;
}

/* Textos secundarios */
.muted,
small {
  color: #6B7280 !important;
}

/* Barra superior */