:root{
  --bg:#0b1020; --bg-2:#0d1426; --card:#121a2e;
  --text:#e6eaf2; --muted:#9bb1cb; --primary:#22d3ee;
  --border:#1e2a44; --on-primary:#08111e; --surface:#0f172a;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--text);
  background:radial-gradient(1000px 500px at 50% -120px, rgba(34,211,238,.08), transparent 60%),
             linear-gradient(180deg, var(--bg), var(--bg-2));
  font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  line-height:1.65; letter-spacing:.2px;
}
h1,h2,h3{font-family:Sora, Inter, system-ui, sans-serif; color:#fff; letter-spacing:-.02em; margin:0 0 .6rem}
p{margin:.5rem 0 1rem}
a{color:var(--primary); text-decoration:none}
a:hover{text-decoration:underline}

.container{max-width:1100px; margin:0 auto; padding:0 20px}
.section{padding:56px 0}
.card{
  background:var(--card); border:1px solid var(--border);
  border-radius:16px; padding:22px; box-shadow:0 10px 30px rgba(0,0,0,.25)
}

/* Header / Nav */
.site-header{position:sticky; top:0; z-index:50; backdrop-filter:saturate(140%) blur(6px)}
/* Clases que usa tu HTML (.header-inner / .main-nav) */
.header-inner{ display:flex; align-items:center; gap:14px; padding:12px 0 }
.brand{display:flex; align-items:center; gap:10px; font-weight:800}
.brand img{width:28px; height:28px}
.main-nav{ margin-left:auto; display:flex; gap:10px; flex-wrap:wrap }
.main-nav a{
  padding:.55rem .9rem; border:1px solid transparent; border-radius:12px; color:#e6eaf2;
}
.main-nav a.active, .main-nav a:hover{
  background:rgba(34,211,238,.15); border-color:rgba(34,211,238,.35)
}

/* Hero */
.hero{padding:64px 0 40px}
.hero__inner{display:grid; grid-template-columns:1fr; gap:16px; align-items:center}
.hero h1{font-size: clamp(32px, 5vw, 54px)}
.hero p{color:var(--muted); font-size: clamp(16px, 2.5vw, 18px)}
.btn{
  display:inline-block; background:var(--primary); color:var(--on-primary);
  padding:.8rem 1.15rem; border-radius:12px; border:1px solid transparent;
  font-weight:700; transition:transform .12s ease, filter .12s ease
}
.btn:hover{filter:brightness(1.08); transform:translateY(-1px)}
.btn-secondary{background:transparent; color:var(--text); border-color:rgba(34,211,238,.35)}
.btn-secondary:hover{background:rgba(34,211,238,.12)}

/* Feature grid */
.grid{display:grid; gap:18px}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.feature p{color:var(--muted)}

/* CTA */
.muted{background:rgba(255,255,255,.02); border:1px solid var(--border); border-radius:16px}
.cta{display:flex; align-items:center; justify-content:space-between; gap:16px}

/* Forms */
input,textarea{
  width:100%; padding:.85rem 1rem; border-radius:12px; border:1px solid var(--border);
  background:#0e1527; color:#e6eaf2; outline:none
}
textarea{min-height:140px; resize:vertical}
input:focus,textarea:focus{border-color:var(--primary); box-shadow:0 0 0 3px rgba(34,211,238,.18)}

/* Contact list */
.contact-list{ list-style:none; padding:0; margin:12px 0 0; display:grid; gap:6px; color:var(--muted) }
.emoji-icon{ margin-right:.4rem }

/* SV Flag banner (Nosotros) */
.flag-sv{
  position:relative; overflow:hidden; border-radius:18px; margin-bottom:24px;
  border:1px solid var(--border); box-shadow:0 10px 30px rgba(0,0,0,.25)
}
.flag-sv::before{
  content:""; display:block; height:120px;
  background:
    linear-gradient(#0047ab,#0047ab) top/100% 33% no-repeat,
    linear-gradient(#ffffff,#ffffff) center/100% 34% no-repeat,
    linear-gradient(#0047ab,#0047ab) bottom/100% 33% no-repeat;
}

/* Carrusel (pills de texto) */
.icons-marquee .marquee{
  overflow:hidden; border:1px solid var(--border);
  border-radius:16px; background:rgba(255,255,255,.02);
}
.marquee__inner{
  display:flex; align-items:center; gap:18px; padding:18px 12px;
  width:max-content; animation:marquee 36s linear infinite;
}
.marquee:hover .marquee__inner{ animation-play-state:paused; }
.pill{
  display:inline-block; white-space:nowrap;
  padding:.5rem .9rem; border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid var(--border); font-weight:600; color:var(--text);
}
@keyframes marquee{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* Footer */
.site-footer{padding:36px 0; color:var(--muted)}

/* Responsive */
@media (max-width: 900px){
  .grid.cols-3{grid-template-columns:1fr 1fr}
}
@media (max-width: 640px){
  .main-nav{ width:100%; flex-wrap:wrap }
  .grid.cols-3{grid-template-columns:1fr}
  .hero{padding:40px 0 24px}
  .btn, .contact-form button[type="submit"]{ width:100% }
}