/* Tokens */
:root{
  --bg:#0b1220;
  --bg-alt:#0e1629;
  --card:#0f1b33cc;
  --text:#e8eefc;
  --muted:#9db0d6;
  --accent:#8ae8ff;
  --brand1:#4f7cff;
  --brand2:#8a5bff;
  --ring: 0 0 0 3px #8ae8ff33;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background: radial-gradient(1200px 600px at 20% -10%, #132247 0%, transparent 60%),
              radial-gradient(800px 500px at 90% 10%, #1a2a54 0%, transparent 60%),
              var(--bg);
  color:var(--text);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  line-height:1.6;
}

.container{width:min(1100px, 92%); margin-inline:auto}

/* Header */
.site-header{
  position:sticky; top:0; z-index:50;
  backdrop-filter: saturate(130%) blur(8px);
  background: linear-gradient(180deg, #0b1220cc 0%, #0b122000 100%);
  border-bottom: 1px solid #ffffff0f;
}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.brand{display:flex; align-items:center; gap:.75rem; color:var(--text); text-decoration:none; font-weight:700}
.logo{height:36px; width:auto; object-fit:contain}
.nav{display:flex; gap:1.25rem; align-items:center}
.nav a{color:var(--muted); text-decoration:none; font-weight:600}
.nav a:hover{color:var(--text)}
.nav-toggle{display:none; background:none; border:0; width:36px; height:36px; position:relative}
.nav-toggle span{position:absolute; left:8px; right:8px; height:2px; background:var(--text)}
.nav-toggle span:nth-child(1){top:10px}
.nav-toggle span:nth-child(2){top:17px}
.nav-toggle span:nth-child(3){top:24px}

/* Buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:12px 18px; border-radius:12px; text-decoration:none; font-weight:700; border:1px solid #ffffff1a; color:var(--text)}
.btn--small{padding:8px 12px; font-weight:700}
.btn--primary{background: linear-gradient(90deg, var(--brand1), var(--brand2)); border-color:transparent; box-shadow:0 10px 30px #4f7cff33}
.btn--primary:hover{filter:brightness(1.05)}
.btn--ghost{background: transparent}
.btn:focus-visible{outline:none; box-shadow: var(--ring)}

/* Hero */
.hero{position:relative; padding:clamp(88px, 18vh, 160px) 0 72px}
.hero-bg{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(600px 300px at 30% 0%, #4f7cff22 0%, transparent 60%),
    radial-gradient(500px 250px at 75% 5%, #8a5bff22 0%, transparent 60%);
  mask-image: linear-gradient(#000, transparent 80%);
}
.hero-inner{position:relative; z-index:1}
.hero-title{font-size:clamp(32px, 6vw, 56px); line-height:1.1; letter-spacing:-0.02em; margin:0}
.accent{background: linear-gradient(90deg, var(--brand1), var(--brand2)); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero-subtitle{color:var(--muted); font-size:clamp(16px, 2.2vw, 20px); margin-top:12px; max-width:760px}
.hero-ctas{display:flex; gap:12px; margin-top:22px}
.hero-stats{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:34px}
.stat-card{background:#ffffff08; border:1px solid #ffffff12; padding:14px 16px; border-radius:14px; text-align:center}
.stat{display:block; font-size:clamp(22px,4vw,28px); font-weight:800}
.stat + .label{color:var(--muted); font-weight:600}

/* Sections */
.section{padding:80px 0}
.section.alt{background: linear-gradient(180deg, #0b122000, #0e1629 60%, #0b122000)}
.section h2{font-size:clamp(24px, 3.6vw, 36px); margin:0 0 10px}
.section-lead{color:var(--muted); margin-bottom:24px}

.grid-2{display:grid; gap:24px; grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{display:grid; gap:18px; grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{display:grid; gap:18px; grid-template-columns:repeat(4,minmax(0,1fr))}

/* Cards */
.card{background: var(--card); border:1px solid #ffffff12; border-radius:16px; padding:20px}
.card h3{margin:0 0 8px}
.glass{backdrop-filter: blur(8px) saturate(120%)}

.checklist{margin:0; padding:0; list-style:none}
.checklist li{position:relative; padding-left:28px; margin:12px 0; color:var(--text)}
.checklist li:before{content:"✓"; position:absolute; left:8px; top:0; color:var(--accent); font-weight:800}

.cards .card{transition: transform .25s ease, box-shadow .25s ease}
.cards .card:hover{transform: translateY(-4px); box-shadow: 0 18px 40px #00000040}

/* Highlights */
.highlights .highlight{background:#ffffff08; border:1px solid #ffffff12; border-radius:16px; padding:18px}
.pill{display:inline-block; padding:6px 10px; border-radius:999px; background:#ffffff12; border:1px solid #ffffff1a; font-weight:700; margin-bottom:8px}

/* Clientes */
.logos{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; align-items:center}
.logo-skeleton{height:48px; border-radius:10px; background:linear-gradient(90deg,#ffffff10,#ffffff05,#ffffff10); animation:sheen 1.5s infinite; border:1px solid #ffffff14}
@keyframes sheen{
  0%{background-position:-40% 0}
  100%{background-position:140% 0}
}

/* Contacto */
.contact-list{margin:0; padding-left:18px}
.form-card label{display:flex; flex-direction:column; gap:8px; font-weight:600}
.form-card input, .form-card textarea{
  background:#0b1220; color:var(--text);
  border:1px solid #ffffff22; border-radius:12px; padding:12px 14px; font:inherit;
}
.form-card input:focus, .form-card textarea:focus{outline:none; box-shadow: var(--ring); border-color:#8ae8ff66}

/* Footer */
.site-footer{border-top:1px solid #ffffff14; padding:18px 0; background: #0b1220aa; backdrop-filter: blur(6px)}
.footer-inner{display:flex; align-items:center; justify-content:space-between; color:var(--muted)}
.to-top{color:var(--text); text-decoration:none; font-weight:800; border:1px solid #ffffff1a; border-radius:10px; padding:6px 10px}

/* Responsive */
@media (max-width: 960px){
  .grid-3{grid-template-columns:1fr 1fr}
  .grid-4{grid-template-columns:1fr 1fr}
  .hero-stats{grid-template-columns:1fr 1fr 1fr}
}
@media (max-width: 720px){
  .grid-2{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  .grid-4{grid-template-columns:1fr}
  .nav{display:none}
  .nav.open{display:flex; position:absolute; top:64px; right:4%; flex-direction:column; gap:10px; background:#0b1220; border:1px solid #ffffff1a; padding:12px; border-radius:12px}
  .nav-toggle{display:inline-block}
  .logo{height:30px}
}