*{box-sizing:border-box}
:root{
  --bg:#0a1636;
  --bg2:#13295f;
  --text:#f3f6ff;
  --muted:#cfd8ee;
  --line:rgba(255,255,255,.12);
  --card:rgba(255,255,255,.06);
  --red:#c92b2b;
  --shadow:0 18px 45px rgba(0,0,0,.22);
}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at top left, rgba(37,99,235,.25), transparent 35%),
    linear-gradient(180deg,#071228 0%,#0a1636 48%,#0d1b3d 100%);
}
a{text-decoration:none;color:inherit}
.site-header{
  position:sticky; top:0; z-index:5;
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 26px;
  background:rgba(7,18,40,.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex; align-items:center; gap:14px; min-width:0}
.brand-logo{
  width:56px; height:56px; object-fit:cover; border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:var(--shadow);
  background:#fff;
}
.brand-name{font-weight:700; letter-spacing:.06em; font-size:1rem}
.brand-sub{font-size:.84rem; color:var(--muted)}
.nav{display:flex; gap:16px; align-items:center; flex-wrap:wrap}
.nav a{color:#e8eefc}
.nav .cotizar{
  background:var(--red); color:#fff; padding:10px 16px; border-radius:999px; font-weight:700;
}
.hero{padding:56px 24px 28px}
.hero-inner{
  max-width:1180px; margin:0 auto; display:grid; grid-template-columns:1.15fr .85fr; gap:24px; align-items:center;
}
.hero-copy, .card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:22px;
  box-shadow:var(--shadow);
}
.hero-copy{padding:34px}
.eyebrow{
  display:inline-block; margin-bottom:10px; font-size:.82rem; text-transform:uppercase; letter-spacing:.12em; color:#dbe6ff;
}
h1{margin:0 0 12px; font-size:clamp(2rem, 4vw, 3.9rem); line-height:1.04}
h2{margin:0 0 14px; font-size:clamp(1.45rem, 2vw, 2rem)}
h3{margin:0 0 8px; font-size:1.06rem}
p{margin:0 0 16px; color:var(--muted); line-height:1.55}
.hero-ctas, .contact-actions{display:flex; gap:12px; flex-wrap:wrap; margin:18px 0 20px}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:13px 18px; border-radius:999px; font-weight:700; border:1px solid transparent;
}
.btn.primary{background:var(--red); color:#fff}
.btn.secondary{background:transparent; border-color:rgba(255,255,255,.24); color:#fff}
.quick-points{
  margin:0; padding-left:18px; color:#eef3ff;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 18px;
}
.quick-points li{margin:0}
.hero-visual{
  display:flex; align-items:center; justify-content:center;
  min-height:420px;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border:1px solid var(--line); border-radius:22px; padding:24px; box-shadow:var(--shadow);
}
.hero-visual img{max-width:100%; width:100%; height:auto}
.section{max-width:1180px; margin:0 auto 18px; padding:0 24px}
.card{padding:28px}
.service-grid{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px;
}
.service-item{
  background:rgba(255,255,255,.05); border:1px solid var(--line); border-radius:16px; padding:18px;
}
.split{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.pill-row{display:flex; gap:10px; flex-wrap:wrap}
.pill{
  display:inline-block; padding:8px 12px; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid var(--line);
}
.category-list{margin:0; padding-left:18px; color:#eef3ff; line-height:1.8}
.contact-card{display:grid; gap:12px}
.contact-meta{color:#eef3ff}
.site-footer{
  text-align:center; padding:26px 18px 40px; color:#b8c4dd; font-size:.93rem;
}
@media (max-width: 980px){
  .hero-inner, .split, .service-grid{grid-template-columns:1fr}
}
@media (max-width: 760px){
  .site-header{padding:12px 16px; align-items:flex-start; flex-direction:column; gap:12px}
  .nav{gap:12px}
  .hero{padding-top:34px}
  .hero-copy, .card{padding:22px}
  .quick-points{grid-template-columns:1fr}
  .btn{width:100%}
  .hero-ctas, .contact-actions{flex-direction:column}
}