:root{
      --brand:#535ea7;
      --accent:#c9a2cb;
      --dark:#121425;
      --muted:#6c757d;
      --soft:#f6f7fb;
      --card:#ffffff;
      --shadow: 0 12px 30px rgba(18,20,37,.10);
      --shadow2: 0 8px 22px rgba(18,20,37,.10);
      --radius: 18px;
       --navH: 72px;  /* ajusta si tu navbar mide distinto */
    }

  html { scroll-behavior: auto; } /* importante: lo manejamos por JS */

  /* opcional: para que al hacer focus/target no quede debajo del nav */
  section[id] { scroll-margin-top: calc(var(--navH) + 10px); }

    

    /* html { scroll-behavior: smooth; } */
    body{
      color:#1d2033;
      background:#fff;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
    }
    a{ color:var(--brand); }
    a:hover{ color:#3e4890; text-decoration:none; }
    .text-accent{ color:var(--accent) !important; }
    .bg-soft{ background:var(--soft); }
    .bg-brand{ background:var(--brand); }
    .bg-darkish{ background:var(--dark); }
    .section-pad{ padding:90px 0; }
    .section-title{
      font-weight:800;
      letter-spacing:-.02em;
      line-height:1.1;
      margin:0 0 12px;
    }
    .section-lead{ color:var(--muted); font-size:1.05rem; margin:0; }
    .badge-pill-soft{
      background:rgba(83,94,167,.12);
      color:var(--brand);
      border:1px solid rgba(83,94,167,.18);
      padding:.45rem .8rem;
      border-radius:999px;
      font-weight:600;
      font-size:.85rem;
    }

    /* NAV */
    .navbar{
      transition: all .25s ease;
      padding: 18px 0;
      background: rgba(255,255,255,.86);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid rgba(0,0,0,.06);
    }
    .navbar.scrolled{
      padding: 10px 0;
      box-shadow: 0 10px 30px rgba(0,0,0,.06);
    }
    .navbar-brand{
      font-weight:900;
      letter-spacing:-.02em;
      color:var(--dark)!important;
    }
    .brand-mark{
      width:34px;height:34px;border-radius:10px;
      background: linear-gradient(135deg, var(--brand), var(--accent));
      display:inline-block; vertical-align:middle; margin-right:10px;
      box-shadow: 0 10px 18px rgba(83,94,167,.25);
    }
    .nav-link{
      font-weight:700;
      color:#1d2033 !important;
      opacity:.88;
    }
    .nav-link:hover{ opacity:1; }
    .btn-brand{
      background: linear-gradient(135deg, var(--brand), #6a74cc);
      border:none;
      color:#fff!important;
      font-weight:800;
      padding:.8rem 1.1rem;
      border-radius:12px;
      box-shadow: 0 16px 30px rgba(83,94,167,.22);
      transition: transform .15s ease, box-shadow .15s ease;
    }
    .btn-brand:hover{ transform: translateY(-1px); box-shadow: 0 18px 34px rgba(83,94,167,.28); }
    .btn-outline-accent{
      border:2px solid rgba(201,162,203,.85);
      color:#3b2b3f!important;
      background:#fff;
      font-weight:800;
      border-radius:12px;
      padding:.75rem 1.05rem;
      transition: transform .15s ease, background .15s ease;
    }
    .btn-outline-accent:hover{ transform: translateY(-1px); background: rgba(201,162,203,.16); }

    /* HERO */
    .hero{
      padding: 130px 0 80px;
      background:
        radial-gradient(900px 300px at 10% 15%, rgba(201,162,203,.25), transparent 60%),
        radial-gradient(900px 320px at 90% 10%, rgba(83,94,167,.25), transparent 60%),
        linear-gradient(180deg, #ffffff 0%, #fbfbff 100%);
      position:relative;
      overflow:hidden;
    }
    .hero:before{
      content:"";
      position:absolute; inset:-80px -120px auto auto;
      width:420px; height:420px;
      background: radial-gradient(circle at 30% 30%, rgba(201,162,203,.40), rgba(83,94,167,.20), transparent 65%);
      filter: blur(2px);
      transform: rotate(18deg);
      border-radius: 60px;
      opacity:.85;
    }
    .hero-kicker{
      display:inline-flex;
      align-items:center;
      gap:.5rem;
      margin-bottom:14px;
    }
    .hero h1{
      font-weight:900;
      letter-spacing:-.03em;
      line-height:1.03;
      margin:0 0 14px;
      color:#101327;
    }
    .hero p{
      color: var(--muted);
      font-size:1.12rem;
      margin:0 0 22px;
    }
    .hero-card{
      background: rgba(255,255,255,.82);
      border: 1px solid rgba(0,0,0,.06);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      overflow:hidden;
    }
    .hero-card .hero-img{
      min-height: 340px;
      background:
        linear-gradient(135deg, rgba(83,94,167,.25), rgba(201,162,203,.18)),
        url("https://images.unsplash.com/photo-1553877522-43269d4ea984?auto=format&fit=crop&w=1200&q=70") center/cover no-repeat;
    }
    .hero-stats{
      display:flex; gap:14px; flex-wrap:wrap;
      padding:18px 18px 22px;
    }
    .stat{
      flex:1 1 140px;
      padding:12px 14px;
      border-radius: 14px;
      background: rgba(246,247,251,.85);
      border: 1px solid rgba(0,0,0,.04);
    }
    .stat b{ display:block; font-size:1.1rem; }
    .stat small{ color:var(--muted); font-weight:700; }

    /* WRAPPER STICKY (desde sección 2) */
    /* IMPORTANTE: no uses overflow:hidden en padres del sticky */
.sticky-stack { position: relative; }

/* cada sección “panel” se pega arriba */
.sticky-panel{
  position: sticky;
  top: 0;                 /* si tienes navbar fija, usa top: 74px y ajusta height */
  height: 100vh;
  width: 100%;
  display: block;
  z-index: 1;
}

/* si tienes navbar fixed-top, mejor así: */
@media (min-width: 0px){
  .sticky-panel{
    top: 72px;            /* altura navbar aprox */
    height: calc(100vh - 72px);
  }
}

/* para que se apilen bien (la siguiente sección pasa por encima) */
#s1{ z-index: 1; }
#s2{ z-index: 2; }
#s3{ z-index: 3; }
#s4{ z-index: 4; }
#s5{ z-index: 5; }
#s6{ z-index: 6; }
#s7{ z-index: 7; }

/* fondos por sección (ejemplo) */
.sticky-hero{ background: #fff; }
.sticky-services{ background: #fff; }
.sticky-portfolio{ background: #fff; }
.sticky-contact{ background: #fff; }

/* usa tu bg-soft para alternar */
.bg-soft{ background: #f6f7fb; }
    .sticky-wrap{
      position:relative;
      background: #fff;
    }
    .sticky-nav{
      position: sticky;
      top: 92px; /* altura navbar */
      z-index: 10;
      border-radius: var(--radius);
      background: var(--card);
      border: 1px solid rgba(0,0,0,.06);
      box-shadow: var(--shadow2);
      overflow:hidden;
    }
    .sticky-nav .head{
      padding:16px 16px 12px;
      background: linear-gradient(135deg, rgba(83,94,167,.12), rgba(201,162,203,.12));
      border-bottom: 1px solid rgba(0,0,0,.06);
    }
    .sticky-nav .head b{ font-weight:900; }
    .sticky-nav .nav{
      padding: 10px;
      display:flex;
      flex-direction:column;
      gap:6px;
    }
    .sticky-nav .nav a{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      padding:10px 12px;
      border-radius: 12px;
      font-weight:800;
      color:#1d2033;
      background: transparent;
      border: 1px solid transparent;
      transition: background .15s ease, border .15s ease;
    }
    .sticky-nav .nav a:hover{
      background: rgba(83,94,167,.08);
      border-color: rgba(83,94,167,.14);
    }
    .sticky-nav .nav a.active{
      background: rgba(83,94,167,.12);
      border-color: rgba(83,94,167,.22);
      color: var(--brand);
    }
    .sticky-nav .nav a .dot{
      width:10px;height:10px;border-radius:99px;
      background: rgba(83,94,167,.35);
    }
    .sticky-nav .nav a.active .dot{
      background: linear-gradient(135deg, var(--brand), var(--accent));
    }

    /* CARDS */
    .cardx{
      background: var(--card);
      border: 1px solid rgba(0,0,0,.06);
      border-radius: var(--radius);
      box-shadow: var(--shadow2);
      padding: 20px;
      height:100%;
    }
    .icon-bubble{
      width:46px;height:46px;border-radius:14px;
      display:flex;align-items:center;justify-content:center;
      background: rgba(83,94,167,.12);
      color: var(--brand);
      border: 1px solid rgba(83,94,167,.16);
      margin-bottom:12px;
    }
    .cardx h5{ font-weight:900; margin:0 0 8px; }
    .cardx p{ color:var(--muted); margin:0; }

    /* LISTS */
    .checklist{ margin:14px 0 0; padding-left:0; list-style:none; }
    .checklist li{
      padding:8px 0 8px 28px;
      position:relative;
      color:#2b2f4a;
      font-weight:650;
    }
    .checklist li:before{
      content:"\f00c";
      font-family:"Font Awesome 6 Free";
      font-weight:900;
      position:absolute; left:0; top:10px;
      color: var(--brand);
      background: rgba(83,94,167,.10);
      border: 1px solid rgba(83,94,167,.16);
      width:20px;height:20px;border-radius:7px;
      display:flex;align-items:center;justify-content:center;
      font-size:12px;
    }

    /* GALLERY */
    .gallery-filter{
      display:flex; flex-wrap:wrap; gap:10px;
      margin: 14px 0 22px;
    }
    .filter-btn{
      border: 1px solid rgba(0,0,0,.08);
      background:#fff;
      font-weight:900;
      border-radius: 999px;
      padding: .55rem .9rem;
      transition: background .15s ease, transform .15s ease, border .15s ease;
    }
    .filter-btn:hover{ transform: translateY(-1px); }
    .filter-btn.active{
      background: rgba(83,94,167,.12);
      border-color: rgba(83,94,167,.22);
      color: var(--brand);
    }
    .gallery-grid .g-item{ display:block; }
    .gallery-card{
      border-radius: 18px;
      overflow:hidden;
      background:#fff;
      border: 1px solid rgba(0,0,0,.06);
      box-shadow: var(--shadow2);
      position:relative;
    }
    .gallery-card img{
      width:100%;
      height: 210px;
      object-fit: cover;
      display:block;
      transition: transform .35s ease;
    }
    .gallery-card:hover img{ transform: scale(1.03); }
    .gallery-cap{
      padding: 12px 14px;
    }
    .gallery-cap b{ font-weight:900; display:block; }
    .gallery-cap small{ color:var(--muted); font-weight:700; }

    /* CLIENTS carousel */
    .client-logo{
      background:#fff;
      border: 1px dashed rgba(83,94,167,.25);
      border-radius: 16px;
      height: 92px;
      display:flex;align-items:center;justify-content:center;
      font-weight:900;
      color:#2a2f4f;
      box-shadow: var(--shadow2);
    }
    .carousel-indicators li{
      background: rgba(83,94,167,.35);
    }
    .carousel-indicators .active{
      background: var(--brand);
    }

    /* CTA */
    .cta{
      background:
        radial-gradient(900px 420px at 10% 50%, rgba(83,94,167,.30), transparent 60%),
        radial-gradient(900px 420px at 90% 50%, rgba(201,162,203,.30), transparent 60%),
        linear-gradient(135deg, #11152b, #151a34);
      color:#fff;
      border-radius: 26px;
      overflow:hidden;
      position:relative;
      padding: 34px;
      box-shadow: 0 22px 60px rgba(18,20,37,.35);
    }
    .cta h3{ font-weight:950; letter-spacing:-.02em; margin:0 0 10px; }
    .cta p{ margin:0; color: rgba(255,255,255,.78); }

    /* FOOTER */
    footer{
      background: #0f1226;
      color: rgba(255,255,255,.80);
      padding: 42px 0;
    }
    .footer-links a{ color: rgba(255,255,255,.80); font-weight:800; }
    .footer-links a:hover{ color:#fff; }

    /* Utilities */
    .divider{
      height:1px;
      background: rgba(0,0,0,.08);
      margin: 18px 0 0;
    }
    .shadow-soft{ box-shadow: var(--shadow2); }

    /* Responsive sticky nav */
    @media (max-width: 991.98px){
      .sticky-nav{ position: relative; top: auto; }
      .sticky-nav .nav{ flex-direction: row; flex-wrap:wrap; }
      .sticky-nav .nav a{ flex: 1 1 calc(50% - 6px); }
      .hero{ padding-top: 110px; }
    }
    @media (max-width: 575.98px){
      .sticky-nav .nav a{ flex: 1 1 100%; }
      .hero h1{ font-size: 2.05rem; }
    }

    /* Accessibility focus */
    a:focus, button:focus{
      outline: 3px solid rgba(201,162,203,.45);
      outline-offset: 2px;
    }


    /* IMPORTANTE: no uses overflow:hidden en padres del sticky */
.sticky-stack { position: relative; }

/* cada sección “panel” se pega arriba */
.sticky-panel{
  position: sticky;
  top: 0;                 /* si tienes navbar fija, usa top: 74px y ajusta height */
  height: 100vh;
  width: 100%;
  display: block;
  z-index: 1;
}

/* si tienes navbar fixed-top, mejor así: */
@media (min-width: 0px){
  .sticky-panel{
    top: 72px;            /* altura navbar aprox */
    height: calc(100vh - 72px);
  }
}

/* para que se apilen bien (la siguiente sección pasa por encima) */
#s1{ z-index: 1; border-radius: 90px 90px 0px;}
#s2{ z-index: 2; border-radius: 90px 90px 0px;}
#s3{ z-index: 3; border-radius: 90px 90px 0px;}
#s4{ z-index: 4; border-radius: 90px 90px 0px;}
#s5{ z-index: 5; border-radius: 90px 90px 0px;}
#s6{ z-index: 6; border-radius: 90px 90px 0px;}
#s7{ z-index: 7; border-radius: 90px 90px 0px;}

/* fondos por sección (ejemplo) */
.sticky-hero{ background: #fff; }
.sticky-services{ background: #fff; }
.sticky-portfolio{ background: #fff; }
.sticky-contact{ background: #fff; }

/* usa tu bg-soft para alternar */
.bg-soft{ background: #f6f7fb; }