/* Reset y Variables */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#0A0D14;
  --surface:#141821;
  --surface-light:#1C212D;
  --text:#F1F3F5;
  --text-muted:#A0A9B8;
  --accent:#6C5CE7;
  --accent-hover:#5947C2;
  --accent-light:#9B93F7;
  --border:rgba(255,255,255,.08);
  --shadow-deep:0 10px 30px rgba(0,0,0,.4);
  --header-height:72px;
  --transition:all .3s ease-in-out
}

/* Estilos Base */
body{
  font-family:'Inter',sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  opacity:0;
  overflow-x:hidden;
  transition:opacity .5s ease-out
}
body.loaded{opacity:1}
body.menu-open{overflow:hidden}
a{color:inherit;text-decoration:none}
a:hover,a:focus{text-decoration:none;outline:2px solid var(--accent);outline-offset:2px}
.container{max-width:2400px;margin:0 auto;padding:0 1.5rem}

/* Loader */
#loader{
  position:fixed;width:100%;height:100%;
  background:var(--bg);
  display:flex;justify-content:center;align-items:center;
  z-index:9999;transition:opacity .5s ease-out
}
.spinner{
  width:50px;height:50px;
  border:4px solid rgba(255,255,255,.15);
  border-top-color:var(--accent);
  border-radius:50%;
  animation:spin 1s linear infinite
}
@keyframes spin{to{transform:rotate(360deg)}}

/* Navbar */
.navbar{
  position:sticky;top:0;width:100%;
  background:rgba(10,13,20,.571);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
  box-shadow:var(--shadow-deep);
  z-index:1000
}
.nav-container{
  display:flex;justify-content:space-between;align-items:center;
  height:var(--header-height)
}
.logo{
  display:flex;align-items:center;
  font-size:1.7rem;font-weight:800;
  color:var(--accent-light);
  letter-spacing:4px
}
.logo-image{
  height:54px;width:auto;border-radius:50%;
  margin-right:8px;
  box-shadow:0 1px 13px rgba(203,22,203,.593)
}
.logo span{
  color:var(--text-muted);
  text-shadow:0 1px 15px rgba(213,14,224,.769)
}
.nav-links{
  display:flex;list-style:none;
  gap:2rem;align-items:center
}
.nav-links a{
  color:var(--text-muted);
  font-size:1.2rem;font-weight:500;
  padding-bottom:.25rem;
  position:relative;
  transition:var(--transition)
}
.nav-links a:hover,.nav-links a:focus{color:var(--text)}
.nav-links a::after{
  content:'';
  position:absolute;bottom:0;left:0;
  width:0;height:2px;background:var(--accent);
  transition:width .3s ease-in-out
}
.nav-links a:hover::after,.nav-links a:focus::after{width:100%}

.menu-btn{
  display:none;width:24px;height:20px;
  position:relative;cursor:pointer;z-index:1001;
  background:none;border:none;transition:var(--transition)
}
.menu-btn span{
  display:block;position:absolute;width:100%;height:2px;
  background:var(--text);
  transition:all .3s ease-in-out;left:0
}
.menu-btn span:nth-child(1){top:0}
.menu-btn span:nth-child(2){top:9px}
.menu-btn span:nth-child(3){top:18px}
.menu-btn.active span:nth-child(1){transform:rotate(45deg);top:9px}
.menu-btn.active span:nth-child(2){opacity:0}
.menu-btn.active span:nth-child(3){transform:rotate(-45deg);top:9px}

/* Video sections */
.video-section{position:relative;overflow:hidden;isolation:isolate}
.video-bg{
  position:absolute;top:50%;left:50%;
  min-width:100%;min-height:100%;
  width:auto;height:auto;
  transform:translate(-50%,-50%);
  z-index:-2;
  object-fit:cover;
  filter:brightness(.4);
  transition:transform .1s ease-out
}
.video-overlay{position:absolute;inset:0;z-index:-1}
.overlay-hero{background:linear-gradient(135deg,rgba(10,13,20,.85) 0%,rgba(108,92,231,.3) 100%)}
.overlay-services{background:linear-gradient(to bottom,rgba(20,24,33,.92) 0%,rgba(108,92,231,.25) 50%,rgba(20,24,33,.92) 100%)}
.overlay-benefits{background:linear-gradient(135deg,rgba(28,33,45,.9) 0%,rgba(155,147,247,.2) 100%)}
.overlay-process{background:linear-gradient(to right,rgba(10,13,20,.88) 0%,rgba(108,92,231,.3) 50%,rgba(10,13,20,.88) 100%)}
.overlay-cta{
  background:linear-gradient(45deg,rgba(108,92,231,.4) 0%,rgba(155,147,247,.3) 100%),
             radial-gradient(circle at center,rgba(10,13,20,.7) 0%,rgba(10,13,20,.9) 100%)
}

/* Hero */
.hero-video-container{
  position:relative;min-height:90vh;
  display:flex;align-items:center;justify-content:center;
  text-align:center
}
.hero-content-wrapper{
  position:relative;z-index:2;
  padding:2.5rem 2rem;
  max-width:900px;margin:0 auto;
  background:rgba(20,24,33,.3);
  border-radius:1.5rem;
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:var(--shadow-deep),0 0 60px rgba(108,92,231,.2)
}
.tagline{
  color:var(--accent-light);
  font-size:1rem;margin-bottom:1rem;
  font-weight:600;text-transform:uppercase;
  letter-spacing:1.5px;
  text-shadow:0 2px 10px rgba(108,92,231,.5)
}
.hero-content h1{
  font-size:clamp(2.5rem,7vw,4.5rem);
  font-weight:900;line-height:1.1;
  letter-spacing:-.1rem;
  margin-bottom:1.5rem;
  text-shadow:0 4px 20px rgba(0,0,0,.8)
}
.hero-content h1 span{
  background:linear-gradient(90deg,var(--accent),var(--accent-light));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;color:transparent;
  display:inline-block;
  animation:glow 3s ease-in-out infinite
}
@keyframes glow{0%,100%{filter:brightness(1)}50%{filter:brightness(1.3)}}
.subtitle{
  font-size:1.3rem;color:var(--text);
  max-width:650px;margin:0 auto 2.5rem;
  font-weight:300;
  text-shadow:0 2px 10px rgba(0,0,0,.8)
}
.hero-buttons{display:flex;gap:1.25rem;flex-wrap:wrap;justify-content:center}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:.9rem 1.8rem;
  font-size:1rem;font-weight:600;
  border-radius:2rem;
  text-transform:uppercase;letter-spacing:.5px;
  cursor:pointer;
  box-shadow:0 6px 15px rgba(0,0,0,.3);
  transition:var(--transition);
  position:relative;overflow:hidden;border:none;text-decoration:none
}
.btn:focus{outline:2px solid var(--accent);outline-offset:2px}
.btn::before{
  content:'';
  position:absolute;top:50%;left:50%;
  width:0;height:0;border-radius:50%;
  background:rgba(255,255,255,.2);
  transform:translate(-50%,-50%);
  transition:width .6s,height .6s
}
.btn:hover::before,.btn:focus::before{width:300px;height:300px}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover,.btn-wa:hover{transform:translateY(-3px);box-shadow:0 10px 25px rgba(0,0,0,.5)}
.btn-wa{background:#25D366;color:#fff}
.btn-outline{
  background:rgba(20,24,33,.6);
  border:1px solid var(--accent);
  color:var(--accent-light);
  backdrop-filter:blur(5px)
}
.btn-outline:hover,.btn-outline:focus{
  background:var(--accent-hover);color:#fff;
  border-color:var(--accent-hover);
  transform:translateY(-3px)
}

/* Floating buttons */
.float-buttons{
  position:fixed;right:24px;bottom:24px;
  display:flex;flex-direction:column;gap:12px;z-index:999
}
.float-buttons a{
  width:56px;height:56px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:20px;cursor:pointer;
  box-shadow:0 8px 20px rgba(0,0,0,.6);
  border:1px solid rgba(255,255,255,.1);
  animation:float 3s ease-in-out infinite;
  transition:var(--transition);position:relative
}
.float-buttons a:focus{outline:2px solid var(--accent);outline-offset:2px}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.float-btn-store{background:linear-gradient(135deg,#667EEA 0%,#764BA2 100%);animation-delay:0s}
.float-btn-web{background:var(--accent);animation-delay:.2s}
.float-btn-info{background:linear-gradient(135deg,#F093FB 0%,#F5576C 100%);animation-delay:.4s}
.float-buttons a:hover{transform:scale(1.15) translateY(-5px);animation:none}
.float-text{
  position:absolute;right:68px;
  background:var(--surface-light);
  padding:8px 16px;border-radius:8px;
  white-space:nowrap;opacity:0;pointer-events:none;
  transition:opacity .2s;font-size:14px;
  border:1px solid var(--accent-light);color:var(--text)
}
.float-buttons a:hover .float-text{opacity:1}

/* Sections */
.section{padding:6rem 0;position:relative}
.section-title{
  font-size:clamp(2rem,4vw,3.5rem);
  font-weight:800;letter-spacing:-.05rem;
  margin-bottom:5rem;text-align:center;
  display:block;
  text-shadow:0 4px 20px rgba(0,0,0,.6)
}
.section-title::after{
  content:'';
  display:block;width:80px;height:5px;
  background:var(--accent);
  margin:10px auto 0;border-radius:2px;
  box-shadow:0 0 20px var(--accent)
}
.grid{display:grid;gap:2rem;list-style:none}
.services-grid{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.three-cols{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.card{
  background:rgba(20,24,33,.6);
  border:1px solid rgba(255,255,255,.12);
  border-radius:1rem;padding:2.5rem;
  box-shadow:0 4px 15px rgba(0,0,0,.3);
  backdrop-filter:blur(10px);
  transition:var(--transition)
}
.card:hover{
  border-color:var(--accent);
  transform:translateY(-8px) scale(1.02);
  box-shadow:0 20px 40px rgba(108,92,231,.3);
  background:rgba(28,33,45,.7)
}
.card h3{font-size:1.5rem;margin-bottom:1rem;font-weight:700}
.card-icon{
  display:flex;align-items:center;justify-content:center;
  width:50px;height:50px;border-radius:50%;
  font-size:22px;margin-bottom:1rem;color:#fff;
  background:var(--accent);
  box-shadow:0 4px 15px rgba(108,92,231,.5)
}
.card-icon-small{
  display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:50%;
  font-size:18px;margin-bottom:1rem;
  color:var(--accent-light);
  background:rgba(28,33,45,.8);
  border:1px solid var(--accent);
  box-shadow:0 0 15px rgba(108,92,231,.3)
}
.process-card{text-align:center}
.process-card h3{margin-top:1rem}
.step-number{
  font-size:3rem;font-weight:900;color:var(--accent);
  line-height:1;display:block;margin-bottom:.5rem;
  text-shadow:0 0 20px rgba(108,92,231,.6)
}

/* CTA */
.cta{
  background:rgba(28,33,45,.4);
  border-radius:1.5rem;
  padding:4rem 1.5rem;
  text-align:center;
  backdrop-filter:blur(15px);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 10px 40px rgba(0,0,0,.4)
}
.cta h2{
  font-size:clamp(2rem,5vw,3rem);
  margin-bottom:1rem;
  text-shadow:0 4px 20px rgba(0,0,0,.6)
}

/* Footer */
.footer{
  padding:2rem 0;
  border-top:1px solid var(--border);
  background:var(--surface);
  text-align:center;
  font-size:.9rem;color:var(--text-muted)
}
.footer .container{display:flex;flex-direction:column;align-items:center}
.footer-links a{color:var(--text-muted);margin:0 10px;transition:color .2s}
.footer-links a:hover,.footer-links a:focus{color:var(--accent-light)}

/* Responsive */
@media (max-width:992px){
  .menu-btn{display:block}
  .nav-links{
    position:fixed;top:var(--header-height);left:0;
    width:100%;height:calc(100vh - var(--header-height));
    background:rgba(10,13,20,.98);
    backdrop-filter:blur(10px);
    flex-direction:column;justify-content:center;
    gap:3rem;
    transform:translateX(-100%);
    transition:transform .4s ease-in-out
  }
  .nav-links.active{transform:translateX(0)}
  .hero-content-wrapper{padding:1.5rem 1rem}
  .hero-buttons{flex-direction:column}
  .btn{width:100%;justify-content:center}
  .section{padding:4rem 0}
  .services-grid,.three-cols{grid-template-columns:1fr}
  .card-icon,.card-icon-small{margin:0 auto 1rem}
  .card h3{text-align:center}
  .float-buttons{right:15px;bottom:15px}
  .float-text{display:none}
  .float-buttons a{width:48px;height:48px;font-size:18px}
  .video-bg{width:auto;height:120%}
}

/* Reduce motion */
@media (prefers-reduced-motion:reduce){
  .video-bg{display:none}
  .video-section{background:var(--surface)}
  .float-buttons a{animation:none}
  .hero-content h1 span{animation:none}
}