:root{--brand:#60a5fa;--brand2:#a78bfa;--accent:#34d399;--ink:#e6edf3;--muted:#b6c2da}
*{box-sizing:border-box} body,html{margin:0}
body{font-family:Inter,system-ui,Arial,sans-serif;background:#0b1020;color:var(--ink);overflow-x:hidden}
a{text-decoration:none;color:inherit} img{max-width:100%;display:block}
.container{max-width:1200px;margin:auto;padding:24px}
.grid{display:grid;gap:24px}
.btn{padding:12px 18px;border-radius:14px;border:1px solid transparent;font-weight:700;display:inline-flex;align-items:center;gap:8px;cursor:pointer}
.btn-primary{background:linear-gradient(135deg,var(--brand),#3b82f6);color:#02122a;box-shadow:0 10px 24px rgba(96,165,250,.35)}
.hdr{position:sticky;top:0;z-index:40;background:rgba(14,24,44,.6);backdrop-filter:blur(10px);border-bottom:1px solid rgba(148,163,184,.18)}
.nav{display:flex;justify-content:space-between;align-items:center;gap:16px}
.logo{display:flex;align-items:center;gap:10px}
.logo-img{width:40px;height:40px;border-radius:10px}
.social{display:flex;align-items:center;gap:12px}
.social-btn{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18)}
.social-btn svg{display:block;width:18px;height:18px;color:#dbeafe}
.hero{padding-top:8px;background:radial-gradient(900px 520px at -10% -200px, rgba(96,165,250,.25), transparent 52%),radial-gradient(1200px 600px at 90% -200px, rgba(52,211,153,.18), transparent 55%)}
.hero-wrap{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:32px}
.hero-media{position:relative;border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);aspect-ratio:16/9}
.hero-media video{display:block;width:100%;height:100%;object-fit:cover}
.mute-toggle{position:absolute;right:12px;bottom:12px;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.35);backdrop-filter:blur(6px);color:#fff;border-radius:12px;padding:8px 10px;font-weight:700;cursor:pointer}
.card{background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.06));border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(10px);border-radius:18px;padding:20px;color:#e5e7eb;box-shadow:0 12px 30px rgba(0,0,0,.25)}
.features{grid-template-columns:repeat(4,1fr)}
.cta{background:linear-gradient(135deg,#0ea5e9,#60a5fa);color:#031423;border-radius:18px;padding:24px;display:flex;justify-content:space-between;align-items:center;gap:12px;box-shadow:0 20px 50px rgba(14,165,233,.3)}
.foot{background:#0b1225;color:#cbd5e1}.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:24px}
/* Swiper sizing */
.galeria-swiper{width:100%;padding:10px}
.galeria-swiper .swiper-slide{display:flex;align-items:center;justify-content:center}
.galeria-swiper img{border-radius:14px;width:100%;height:280px;object-fit:cover;max-width:800px}
/* Responsive */
@media(max-width:980px){.hero-wrap{grid-template-columns:1fr}.features{grid-template-columns:1fr}.foot-grid{grid-template-columns:1fr}.hero-media{aspect-ratio:9/16}}


/* Footer Systemlife */
.footer-dev {
  background: #0d1b2a;
  text-align: center;
  padding: 1rem;
  color: #fff;
  font-size: 0.9rem;
}
.footer-dev a {
  color: #4dabf7;
  text-decoration: none;
  font-weight: 600;
}
.footer-dev a:hover {
  text-decoration: underline;
}


/* --- Footer Systemlife (glow permanente) --- */
.footer{background:#0a0f2c;text-align:center;padding:20px 10px;margin-top:40px;border-top:2px solid rgba(255,255,255,0.1)}
.footer-content{display:inline-flex;align-items:center;gap:10px}
.footer-link{color:#fff;font-size:15px;text-decoration:none;font-weight:500;display:inline-flex;align-items:center;gap:8px;
  text-shadow:0 0 6px rgba(0,170,255,.8),0 0 12px rgba(0,170,255,.6);animation:footerGlow 2.5s infinite alternate}
.footer-link span{font-weight:700;color:#00aaff}
.footer-icon{width:22px;height:22px;filter:drop-shadow(0 0 6px #00aaff)}
@keyframes footerGlow{from{text-shadow:0 0 6px rgba(0,170,255,.8),0 0 12px rgba(0,170,255,.6)}to{ text-shadow:0 0 16px rgba(0,170,255,1),0 0 30px rgba(0,170,255,.8)}}
@media (max-width:640px){.footer-content{gap:8px}.footer-link{font-size:14px}.footer-icon{width:20px;height:20px}}