:root{
  --accent:#0B1F33;        /* Azul París (sobrio) */
  --accent2:#1B3553;       /* Acento visible */
  --ink:#111418;
  --muted:#444c54;
  --soft:#f6f7f8;
  --border:#e7eaee;
  --radius:16px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* NO CAMBIAR */
  color:var(--ink);
  background:#fff;
  line-height:1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a{color:var(--accent2); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:980px;margin:0 auto;padding:44px 20px}
header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:28px}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.brand strong{font-size:14px;letter-spacing:0.01em;white-space:nowrap}
.logo{color:var(--accent2);flex:0 0 auto}
nav a{color:var(--muted);margin-left:16px;font-size:14px;position:relative;padding-bottom:6px;white-space:nowrap}
nav a:hover{color:var(--accent2);text-decoration:none}
nav a:hover::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;border-radius:2px;background:var(--accent2)}
.hero{
  padding:44px;border-radius:var(--radius);
  background:linear-gradient(180deg,var(--soft),#fff);
  border:1px solid var(--border);
  border-top:6px solid var(--accent2);
}
.kicker{margin:0 0 10px;font-size:14px;color:var(--muted)}
h1{margin:0 0 10px;font-size:40px;letter-spacing:-0.02em}
h1::after{content:"";display:block;width:56px;height:4px;margin-top:12px;background:var(--accent2);border-radius:2px}
.claim{margin:0 0 22px;max-width:70ch;color:var(--muted);font-size:18px}
.cta{
  display:inline-block;padding:12px 16px;border-radius:12px;
  background:var(--accent);color:#fff;font-weight:600;font-size:14px;
  border:1px solid rgba(27,53,83,.35);
  box-shadow:0 1px 0 rgba(11,31,51,.10);
}
.cta:hover{text-decoration:none;filter:brightness(0.97)}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px;margin-top:22px}
.card{grid-column:span 4;padding:18px;border:1px solid var(--border);border-radius:var(--radius);background:#fff}
.card h3{margin:0 0 6px;font-size:16px;letter-spacing:-0.01em}
.card p{margin:0;color:var(--muted);font-size:14px}
.section{margin-top:34px}
.section h2{margin:0 0 10px;font-size:22px;letter-spacing:-0.01em}
.bullets{margin:0;padding-left:18px;color:var(--muted)}
.contact{
  margin-top:34px;padding:22px;border-radius:var(--radius);
  border:1px solid var(--border);background:#fff;
  display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;
}
.contact .left{min-width:240px}
.contact strong{display:block}
.contact .hint{color:var(--muted);font-size:14px}
.footer{
  margin-top:32px;padding-top:16px;border-top:3px solid var(--accent2);
  color:var(--muted);font-size:12px;display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:space-between;
}
.small{font-size:14px;color:var(--muted);max-width:78ch}
@media(max-width:860px){
  .wrap{padding:32px 16px}
  .hero{padding:28px}
  h1{font-size:32px}
  .claim{font-size:16px}
  .card{grid-column:span 12}
  nav{display:none}
}