:root{
  --bg:#0f1724;
  --text:#e6f7fb;
  --muted:#cfeffb; /* texto secundario claro */
  --accent:#06b6d4;
  --accent-2:#8b5cf6;
  --surface:#0b1020;
  --card:#0f1728;
  --radius:14px;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color-scheme: dark;
}

/* reset & base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-size:16px;
  color:var(--text);
  background:radial-gradient(1200px 400px at 10% 10%, rgba(11,16,32,0.18), transparent 10%),
             radial-gradient(1000px 360px at 90% 90%, rgba(139,92,246,0.06), transparent 12%),
             linear-gradient(180deg,#061223 0%, #081426 60%, #071025 100%);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  -webkit-tap-highlight-color:transparent;
  min-height:100vh;
}

/* header */
.site-header{position:sticky;top:0;z-index:50;background:linear-gradient(180deg,rgba(2,6,23,0.65), rgba(2,6,23,0.45));backdrop-filter:blur(8px);border-bottom:1px solid rgba(255,255,255,0.03)}
.logo span{font-weight:700;color:transparent;background:linear-gradient(90deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text}

/* hero */
.hero{
  padding-top:3.5rem;
  padding-bottom:3.5rem;
  background:linear-gradient(90deg, rgba(6,182,212,0.06), rgba(14,165,164,0) 35%), linear-gradient(180deg, rgba(11,16,32,0.0), rgba(2,6,23,0.08));
  min-height:100vh; /* fullscreen hero */
  display:flex;
  align-items:center;
  color:var(--text);
  justify-content:center;
  text-align:center;
  padding-left:1rem;
  padding-right:1rem;
  position:relative;
}

/* hero particle canvas */
#heroCanvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  z-index:1;
  pointer-events:none; /* allow interactions to pass through */
  opacity:0.40;
  mix-blend-mode:screen;
}

/* gradient text utility */
.gradient-text{
      background: linear-gradient(90deg, #05c887, #22d3ee 40%, #0026e0);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  font-weight:700;
  display:inline-block;
  letter-spacing:-0.5px;
}

/* hero micro */
.hero-features{color:rgba(230,247,251,0.85)}
.hero-features li+li::before{content:"·";opacity:.45;margin:0 .6rem;color:rgba(255,255,255,0.15)}

h1,h2,h3{color:#e6f7fb}
.display-5{line-height:1.02}
.lead{font-weight:400;color:rgba(230,247,251,0.85)}

/* cards */
.card{border-radius:var(--radius);border:0;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));box-shadow:0 10px 30px rgba(2,6,23,0.6)}
.service-card .card-body{transition:transform .28s cubic-bezier(.2,.9,.2,1), box-shadow .28s, background .28s}
.service-card:hover .card-body{transform:translateY(-8px);box-shadow:0 24px 60px rgba(2,6,23,0.6);background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.03))}
.diff-card{border-radius:10px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));box-shadow:0 8px 30px rgba(2,6,23,0.5)}

/* pricing cards */
.pricing-card{border-radius:12px;display:flex;flex-direction:column;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.015));border:1px solid rgba(255,255,255,0.03);box-shadow:0 14px 40px rgba(2,6,23,0.55)}
.pricing-card .price{color:var(--text)}
.pricing-card .badge{border-radius:10px;padding:.25rem .5rem}
.pricing-card .popular{transform:scale(1.02);box-shadow:0 28px 60px rgba(11,16,32,0.6);border:1px solid rgba(34,211,238,0.08)}
.pricing-card ul li{margin:6px 0}

/* responsive tweaks for pricing */
@media(min-width:768px){
  .pricing-card .price{font-size:1.6rem}
}

/* process */
.process-list{list-style:none;padding:0;margin:0;display:grid;gap:1rem}
.process-list li{display:block;padding:1rem;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));box-shadow:0 8px 28px rgba(2,6,23,0.45);border:1px solid rgba(255,255,255,0.02)}
.process-list li strong{display:block;color:#e6f7fb;font-weight:700;margin-bottom:.25rem}
.process-list li + li{margin-top:.6rem}



/* stats */
.bg-light{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));}
.diff-card .h3{color:#e6f7fb}

/* footer */
.site-footer{background:linear-gradient(180deg,#04060b 0%, #071025 100%);border-top:1px solid rgba(255,255,255,0.03)}
.site-footer a{opacity:.9;color:rgba(230,247,251,0.9)}
.site-footer a:hover{opacity:1}

/* responsive menu */
#navMenu.show-mobile{display:block;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));position:absolute;inset:auto 12px auto auto;top:64px;padding:12px;border-radius:10px;box-shadow:0 14px 40px rgba(2,6,23,0.6)}
@media(min-width:768px){
  #navToggle{display:none}
  .hero{min-height:56vh}
  .process-list{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:992px){
  .process-list{grid-template-columns:repeat(4,1fr)}
  .hero{min-height:64vh}
}

/* accessibility focus */
a:focus, button:focus, input:focus, textarea:focus{outline:3px solid rgba(34,211,238,0.12);outline-offset:2px}

/* performant animations only on transform & opacity */

/* logo image sizing (ensures responsive scaling) */
.logo img{width:250px;max-width:100%;height:auto;display:block}


/* form */
form .form-control{background:transparent;color:var(--muted);border:1px solid rgba(255,255,255,0.06)}
form .form-control::placeholder{color:rgba(230,247,251,0.45)}
form .form-control:focus{box-shadow:0 0 0 0.18rem rgba(6,182,212,0.08);border-color:var(--accent)}
#submitBtn{transition:transform .12s ease, box-shadow .12s ease}
#submitBtn:active{transform:translateY(1px)}

/* Botones */
.btn {
  background: #06e1ff;
  color: black;
}


/*
 *  STYLE scroll
 */

 * body::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #ccc;
}

body::-webkit-scrollbar {
  width: 10px;
  background-color: #ccc;
}

body::-webkit-scrollbar-thumb {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #113fa6;
}
label {margin: .2rem 0 !important;}

/*
 *  STYLE scroll
 */