:root{
  /* Colores principales */
  --bg:#0b0f1f; 
  --text:#e9ecf1; 
  --muted:#b8c0d0; 
  --bar:#0f1530;
  --border:rgba(255,255,255,.08); 
  --brand:#0b3d91;
  --card:rgba(255,255,255,.03); 
  
  /* Colores de estado */
  --ok:#8bd17c; 
  --warn:#ffcc66; 
  --err:#ff8484; 
  --focus:#7aa2ff;
  
  /* Colores de acento */
  --accent-light:rgba(18,80,198,.1);
  --accent-medium:rgba(18,80,198,.2);
  --accent-strong:rgba(18,80,198,.3);
  --accent-bg:rgba(18,80,198,.05);
  
  /* Layout */
  --container:1200px; 
  --gutter:clamp(22px,6.5vw,40px);
  --radius:16px; 
  --section-pad:clamp(16px,3vw,24px); 
  --grid-gap:12px; 
  --hero-pad:24px;
  
  /* Sombras */
  --shadow:0 10px 22px rgba(0,0,0,.35);
  --shadow-hover:0 14px 28px rgba(0,0,0,.4);
  --shadow-card:0 4px 12px rgba(0,0,0,.15);
  --shadow-focus:0 4px 12px rgba(18,80,198,.1);
  
  /* Transiciones */
  --transition-fast:all .2s cubic-bezier(.25,.46,.45,.94);
  --transition-medium:all .3s cubic-bezier(.25,.46,.45,.94);
  --transition-slow:all .4s cubic-bezier(.25,.46,.45,.94);

  /* Scrollbar theme */
  --scroll-track:#0a1024;
  --scroll-thumb:#15223c;
  --scroll-thumb-hover:#1e4da8;
  --scroll-border:rgba(255,255,255,.10);
}

*{box-sizing:border-box;margin:0;padding:0}

/* Optimized scroll behavior */
html{scroll-behavior:smooth}
*{scrollbar-width:thin;scrollbar-color:var(--scroll-thumb) var(--scroll-track)}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:var(--scroll-track)}
::-webkit-scrollbar-thumb{background:var(--scroll-thumb);border-radius:999px;border:1px solid var(--scroll-border)}
::-webkit-scrollbar-thumb:hover{background:var(--scroll-thumb-hover)}

body{font-family:"Montserrat",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text);line-height:1.55;font-display:swap}

a{color:inherit;text-decoration:none}
.muted{color:var(--muted)}
.visually-hidden{position:absolute !important;clip:rect(1px,1px,1px,1px);padding:0;border:0;height:1px;width:1px;overflow:hidden;white-space:nowrap}

.skip{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip:focus{left:12px;top:12px;width:auto;height:auto;background:#0c132a;color:#fff;padding:10px 12px;border-radius:10px;z-index:1000}

.site-header{position:sticky;top:0;z-index:50;background:var(--bar);border-bottom:1px solid var(--border);transition:var(--transition-medium);will-change:transform}
.site-header.scrolled{box-shadow:var(--shadow)}
.site-header.hide{transform:translateY(-100%)}
.nav-wrap{max-width:var(--container);margin:0 auto;padding:20px var(--gutter);display:flex;align-items:center;gap:12px}
.logo{display:flex;align-items:center;gap:12px}
.logo img{height:40px;width:auto;display:block}
.nav{display:flex;align-items:center;gap:22px;margin-left:auto}
.nav a{font-weight:600;padding:8px 6px;border-radius:8px;outline-offset:3px;transition:var(--transition-fast);color:var(--text)}
.nav a:hover{color:var(--brand);background:var(--accent-bg);transform:translateY(-1px)}
.nav a:focus-visible{outline:2px solid var(--accent-strong);background:var(--accent-light);color:var(--brand)}
.burger{display:none}
@media (max-width:900px){.nav{display:none}}

main{max-width:var(--container);margin:0 auto;padding:22px var(--gutter) 64px}
section{padding:var(--section-pad) 0;border-bottom:1px solid var(--border);scroll-margin-top:96px;content-visibility:auto;contain-intrinsic-size:auto 460px;transition:var(--transition-fast)}
section:last-of-type{border-bottom:none}
h1{font-size:clamp(1.8rem,3.2vw,2.5rem);margin-bottom:8px;transition:var(--transition-fast)}
h2{font-size:clamp(1.25rem,2.1vw,1.65rem);margin-bottom:8px;transition:var(--transition-fast)}
p{color:var(--muted);transition:var(--transition-fast)}

.hero{border:1px solid var(--border);border-radius:var(--radius);padding:var(--hero-pad);position:relative;overflow:hidden;isolation:isolate;transition:var(--transition-fast)}
.hero:hover{box-shadow:var(--shadow-card)}
.hero::after{content:"";position:absolute;inset:-40% -20% auto -20%;height:120%;background:radial-gradient(60% 60% at 30% 30%,var(--accent-strong),transparent 60%);filter:blur(38px);opacity:.8;pointer-events:none;z-index:-1}
.cta{margin-top:12px;display:flex;gap:10px;flex-wrap:wrap}
.btn{appearance:none;border:none;cursor:pointer;padding:12px 18px;border-radius:12px;font-weight:600;font-size:.98rem;transition:var(--transition-fast)}
.btn-primary{background:var(--brand);color:#fff;box-shadow:var(--shadow-card)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:var(--shadow-hover);background:#2a7ce8}
.btn-primary:focus-visible{outline:2px solid var(--focus);outline-offset:2px;background:#2a7ce8;transform:translateY(-1px);box-shadow:var(--shadow-hover)}
.btn-ghost{background:transparent;border:1px solid var(--border);color:var(--text)}
.btn-ghost:hover{background:var(--accent-bg);border-color:var(--accent-medium);color:#fff;transform:translateY(-1px)}
.btn-ghost:focus-visible{outline:2px solid var(--accent-strong);outline-offset:2px;background:var(--accent-light);border-color:var(--accent-strong);color:var(--brand)}

.grid{display:grid;gap:var(--grid-gap)}
.grid.responsive{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:14px;text-align:center;display:flex;flex-direction:column;gap:8px;align-items:center;opacity:0;transform:translateY(14px) scale(.98)}
.card img{width:58px;height:58px;object-fit:contain;display:block;filter:drop-shadow(0 5px 9px rgba(0,0,0,.22))}
.card .pill{display:block;width:100%;padding:7px 10px;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid var(--border);font-weight:600;font-size:.9rem}
.card:hover{transform:translateY(-2px) scale(1);box-shadow:var(--shadow-card)}

.tech-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  transition:var(--transition-fast);
  opacity:1;
  transform:none;
}
.tech-card:hover{
  border-color:var(--accent-medium);
  box-shadow:var(--shadow-focus);
  transform:translateY(-1px);
}
.tech-icon{
  width:64px;
  height:64px;
  background:var(--accent-bg);
  border-radius:var(--radius);
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--accent-medium);
}
.tech-name{
  font-size:.9rem;
  font-weight:600;
  color:var(--text);
  text-align:center;
}
.services{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.service{display:flex;gap:10px;align-items:flex-start;padding:12px;border:1px solid var(--border);border-radius:var(--radius);background:var(--card);opacity:0;transform:translateY(12px) scale(.99);transition:var(--transition-fast)}
.service:hover{transform:translateY(-1px);box-shadow:var(--shadow-card)}
.service i{display:inline-flex;width:38px;height:38px;border-radius:var(--radius);align-items:center;justify-content:center;background:var(--accent-bg);border:1px solid var(--border);font-style:normal;font-weight:700;color:var(--focus)}

.portfolio-cards{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.portfolio-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  transition:var(--transition-fast);
  opacity:0;
  transform:translateY(12px) scale(.99);
  display:flex;
  flex-direction:column;
}
.portfolio-card:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-card);
  border-color:var(--accent-medium);
}
.portfolio-header{
  height:120px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.portfolio-image{
  width:100%;
  height:100%;
  object-fit:cover;
  position:absolute;
  top:0;
  left:0;
  z-index:1;
}
.portfolio-overlay{
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:linear-gradient(135deg, rgba(0,0,0,.3), rgba(0,0,0,.6));
  z-index:1;
}
.portfolio-body{
  padding:16px;
  flex:1;
  display:flex;
  flex-direction:column;
}
.portfolio-body strong{
  font-size:1.1rem;
  margin-bottom:8px;
  color:var(--text);
}
.portfolio-body p{
  flex:1;
  margin-bottom:12px;
}


.pricing{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:20px;
  max-width:100%;
}
@media (max-width:1200px){
  .pricing{
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:16px;
  }
}
@media (max-width:768px){
  .pricing{
    grid-template-columns:1fr;
    gap:16px;
  }
}
@media (max-width:480px){
  .pricing{
    gap:12px;
  }
}
.plan{
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:12px;
  opacity:1;
  transform:none;
  position:relative;
  overflow:hidden;
  min-height:320px;
  transition:var(--transition-fast);
}
.plan:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-card);
}
.plan h3{
  font-size:1.1rem;
  margin-bottom:4px;
}
.plan .price{
  font-weight:700;
  font-size:1.2rem;
  color:#fff;
  margin-bottom:8px;
}
.plan-growth{
  border:2px solid var(--brand) !important;
  background:linear-gradient(180deg, var(--accent-bg), var(--accent-light)) !important;
}
.plan-starter, .plan-pyme{
  border:1px solid var(--border);
}
@media (max-width:768px){
  .plan{
    min-height:auto;
    padding:14px;
  }
  .plan-growth{
    border:2px solid var(--brand) !important;
  }
  #paquetes{
    padding:12px !important;
    margin-top:12px !important;
  }
  #paquetes h3{
    font-size:1.1rem !important;
  }
  #paquetes p{
    font-size:.85rem !important;
  }
}
@media (max-width:480px){
  #paquetes{
    padding:10px !important;
    margin-top:10px !important;
  }
  .plan{
    padding:12px !important;
    min-height:280px;
  }
  .tech-card{
    padding:12px;
  }
  .tech-icon{
    width:56px;
    height:56px;
  }
  .tech-name{
    font-size:.85rem;
  }
}
.kpis{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.kpi{border:1px solid var(--border);border-radius:var(--radius);padding:12px;background:var(--card);opacity:0;transform:translateY(6px) scale(.99);transition:var(--transition-fast)}
.kpi:hover{transform:translateY(-1px);box-shadow:var(--shadow-card)}

.faq-description{
  margin-bottom:20px;
  color:var(--muted);
  font-size:.95rem;
  line-height:1.6;
}

.faq-list{
  display:grid;
  gap:12px;
  max-width:100%;
}

details.faq{
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--card);
  opacity:0;
  transform:translateY(6px) scale(.99);
  overflow:hidden;
  transition:var(--transition-fast);
}

details.faq:hover{
  border-color:var(--accent-medium);
  box-shadow:var(--shadow-card);
}

details.faq summary{
  padding:14px 16px;
  cursor:pointer;
  font-weight:600;
  transition:var(--transition-fast);
  border-radius:var(--radius);
  list-style:none;
  display:flex;
  align-items:center;
  gap:12px;
  user-select:none;
  position:relative;
}

details.faq summary::-webkit-details-marker{
  display:none;
}

details.faq summary::after{
  content:'▼';
  position:absolute;
  right:16px;
  font-size:.7rem;
  transition:var(--transition-fast);
  color:var(--muted);
}

details.faq[open] summary::after{
  transform:rotate(180deg);
  color:var(--brand);
}

.faq-icon{
  font-size:1.3rem;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  background:var(--accent-bg);
  border-radius:8px;
  border:1px solid var(--accent-medium);
}

.faq-question{
  flex:1;
  text-align:left;
  padding-right:24px;
  line-height:1.4;
  word-wrap:break-word;
  overflow-wrap:break-word;
}

details.faq summary:hover{
  background:var(--accent-bg);
  color:#fff;
}

details.faq summary:focus-visible{
  outline:2px solid var(--accent-strong);
  outline-offset:2px;
  background:var(--accent-light);
  color:var(--brand);
}

details.faq .faq-content{
  padding:0 16px 16px;
  color:var(--muted);
  line-height:1.7;
  overflow-wrap:break-word;
  word-wrap:break-word;
  word-break:break-word;
  hyphens:auto;
}

details.faq .faq-content p{
  margin-bottom:12px;
  font-size:.95rem;
}

details.faq .faq-content p:last-child{
  margin-bottom:0;
}

details.faq .faq-content ul{
  margin:8px 0;
  padding-left:20px;
  list-style-type:disc;
}

details.faq .faq-content li{
  margin-bottom:6px;
  color:var(--muted);
  line-height:1.6;
}

@keyframes faqExpand{
  from{
    opacity:0;
    max-height:0;
    padding-top:0;
    padding-bottom:0;
  }
  to{
    opacity:1;
    max-height:800px;
    padding-top:8px;
    padding-bottom:16px;
  }
}

@keyframes faqCollapse{
  from{
    opacity:1;
    max-height:800px;
    padding-top:8px;
    padding-bottom:16px;
  }
  to{
    opacity:0;
    max-height:0;
    padding-top:0;
    padding-bottom:0;
  }
}

/* FAQ Responsive */
@media (max-width:768px){
  .faq-description{
    font-size:.9rem;
    margin-bottom:16px;
  }
  
  .faq-list{
    gap:10px;
  }
  
  details.faq summary{
    padding:12px 14px;
    gap:10px;
  }
  
  .faq-icon{
    font-size:1.1rem;
    width:32px;
    height:32px;
  }
  
  .faq-question{
    font-size:.95rem;
    padding-right:20px;
  }
  
  details.faq summary::after{
    right:14px;
  }
  
  details.faq .faq-content{
    padding:0 14px 14px;
    font-size:.9rem;
  }
  
  details.faq .faq-content p{
    font-size:.9rem;
    margin-bottom:10px;
  }
  
  details.faq .faq-content ul{
    padding-left:18px;
  }
}

@media (max-width:480px){
  .faq-description{
    font-size:.85rem;
  }
  
  .faq-list{
    gap:8px;
  }
  
  details.faq summary{
    padding:10px 12px;
    gap:8px;
    flex-wrap:nowrap;
  }
  
  .faq-icon{
    font-size:1rem;
    width:28px;
    height:28px;
    min-width:28px;
  }
  
  .faq-question{
    font-size:.9rem;
    padding-right:20px;
    line-height:1.3;
  }
  
  details.faq summary::after{
    right:12px;
    font-size:.65rem;
  }
  
  details.faq .faq-content{
    padding:0 12px 12px;
    font-size:.85rem;
    line-height:1.6;
  }
  
  details.faq .faq-content p{
    font-size:.85rem;
    margin-bottom:8px;
  }
  
  details.faq .faq-content ul{
    padding-left:16px;
    margin:6px 0;
  }
  
  details.faq .faq-content li{
    margin-bottom:4px;
    font-size:.85rem;
  }
}

.contact{display:grid;gap:16px}
.contact form{
  width:100%;
  display:grid;
  gap:12px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--card);
  padding:20px;
  position:relative;
  overflow:hidden;
}
.form-grid{display:grid;gap:12px;grid-template-columns:repeat(12,1fr)}
.col-6{grid-column:span 6}.col-12{grid-column:span 12}
@media (max-width:720px){.col-6{grid-column:span 12}}
input,textarea,button{
  width:100%;
  background:#0c132a;
  color:var(--text);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:12px 16px;
  font-family:"Montserrat",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  font-size:.95rem;
  transition:var(--transition-fast);
}
input:hover,textarea:hover{
  border-color:var(--accent-strong);
  background:#0e1630;
}
input::placeholder,textarea::placeholder{
  color:#7f8aa5;
  font-size:.9rem;
}
textarea{
  min-height:140px;
  resize:vertical;
  line-height:1.5;
}
.help{font-size:.86rem;color:var(--muted)}
.error{color:var(--err);font-size:.9rem}
.field-error{
  font-size:.86rem;
  color:var(--err);
  min-height:1.1em;
  margin-top:4px;
  opacity:0;
  transform:translateY(-4px);
  transition:var(--transition-fast);
}
.field-error.show{
  opacity:1;
  transform:translateY(0);
}

#formErrors{
  background:rgba(255,59,48,.1);
  border:1px solid var(--err);
  border-radius:8px;
  padding:12px;
  margin-bottom:12px;
}

#formErrors .error{
  color:var(--err);
  font-size:.9rem;
  margin:0;
  font-weight:500;
}
.counter{
  font-size:.8rem;
  color:#9db6ff;
  text-align:right;
  margin-top:4px;
}
input[aria-invalid="true"], textarea[aria-invalid="true"]{
  border-color:var(--err);
  outline:1px solid rgba(255,132,132,.35);
  background:rgba(255,132,132,.05);
}
input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--focus);
  outline-offset:2px;
  border-color:var(--focus);
  background:#0e1630;
  transform:translateY(-1px);
  box-shadow:var(--shadow-focus);
}
button:disabled{
  opacity:.5;
  cursor:not-allowed;
  transform:none !important;
}
button:not(:disabled):hover{
  transform:translateY(-1px);
  box-shadow:var(--shadow-hover);
}

footer{border-top:1px solid var(--border);background:#0a0f21;color:#9aa3b8;text-align:center;padding:24px var(--gutter);margin-top:4px;opacity:0;transform:translateY(18px)}
footer a{color:#9aa3b8;text-decoration:none;transition:var(--transition-fast);padding:2px 4px;border-radius:4px}
footer a:hover{color:rgba(255,255,255,.8);background:rgba(255,255,255,.05);transform:translateY(-1px)}
footer a:focus-visible{outline:2px solid var(--accent-strong);outline-offset:2px;color:var(--brand);background:var(--accent-light)}

.wa-fab{
  position:fixed;
  right:12px;
  bottom:20px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 16px;
  background:#1eac52;
  color:#fff;
  border-radius:50px;
  box-shadow:var(--shadow-card);
  z-index:60;
  transition:var(--transition-fast);
  text-decoration:none;
  font-family:inherit;
  min-width:200px;
  max-width:200px;
}
.wa-fab:hover{
  transform:translateY(-1px);
  box-shadow:var(--shadow-hover);
  background:#20b858;
}
.wa-fab:focus-visible{
  outline:2px solid var(--focus);
  outline-offset:2px;
  transform:translateY(-1px);
  box-shadow:var(--shadow-hover);
  background:linear-gradient(135deg, #2EE06A 0%, #25D366 100%);
}
.wa-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  background:rgba(255,255,255,.15);
  border-radius:50%;
  flex-shrink:0;
  transition:var(--transition-fast);
}
.wa-content{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
.wa-title{
  font-size:.9rem;
  font-weight:600;
  line-height:1.2;
  white-space:nowrap;
}
.wa-subtitle{
  font-size:.75rem;
  opacity:.9;
  line-height:1.2;
  white-space:nowrap;
}

@keyframes riseFade { 
  from{opacity:0;transform:translateY(8px) scale(.99)} 
  to{opacity:1;transform:translateY(0) scale(1)} 
}
@keyframes softPop { 
  from{opacity:0;transform:translateY(6px) scale(.99)} 
  to{opacity:1;transform:translateY(0) scale(1)} 
}
@keyframes quickFade { 
  from{opacity:0;transform:translateY(4px)} 
  to{opacity:1;transform:translateY(0)} 
}
.reveal{opacity:0;transform:translateY(8px)}
.reveal.in-view{animation:riseFade .4s cubic-bezier(.25,.46,.45,.94) forwards}
.card.in-view{animation:softPop .35s cubic-bezier(.25,.46,.45,.94) forwards}
.service.in-view{animation:softPop .35s cubic-bezier(.25,.46,.45,.94) forwards}
.kpi.in-view{animation:quickFade .3s cubic-bezier(.25,.46,.45,.94) forwards}
.plan.in-view{animation:softPop .35s cubic-bezier(.25,.46,.45,.94) forwards}
.faq.in-view{animation:quickFade .3s cubic-bezier(.25,.46,.45,.94) forwards}
.portfolio-card.in-view{animation:softPop .35s cubic-bezier(.25,.46,.45,.94) forwards}
.stagger>[data-stagger]{animation-delay:var(--d,0ms)}
@media (prefers-reduced-motion:reduce){
  .reveal,.card,.service,.kpi,.plan,.faq,.portfolio-card{animation:none !important;opacity:1 !important;transform:none !important}
}

@media (max-width:768px){
  .wa-fab{
    right:8px;
    bottom:16px;
    padding:12px 16px;
    gap:12px;
    min-width:200px;
    max-width:200px;
  }
  .wa-icon{
    width:28px;
    height:28px;
  }
  .wa-title{
    font-size:.85rem;
  }
  .wa-subtitle{
    font-size:.7rem;
  }
  
  /* Responsive grid adjustments */
  .tech-section-grid{
    grid-template-columns:1fr !important;
    gap:20px !important;
  }
  
  .faq-section-grid{
    grid-template-columns:1fr !important;
    gap:20px !important;
  }
  
  /* Tech cards responsive */
  .grid.responsive[style*="grid-template-columns:repeat(4,1fr)"]{
    grid-template-columns:repeat(2,1fr) !important;
  }
}

@media (max-width:480px){
  .wa-fab{
    right:8px;
    bottom:12px;
    padding:12px 16px;
    gap:12px;
    min-width:200px;
    max-width:200px;
  }
  .wa-icon{
    width:24px;
    height:24px;
  }
  .wa-content{
    display:flex;
  }
  
  /* Tech cards mobile */
  .grid.responsive[style*="grid-template-columns:repeat(4,1fr)"]{
    grid-template-columns:repeat(2,1fr) !important;
  }
  .contact form{
    padding:16px;
  }
  input,textarea,button{
    padding:10px 14px;
    font-size:.9rem;
  }
  textarea{
    min-height:120px;
  }
}