:root{
  --brand:#1b63ff;         /* azul */
  --accent:#01b783;        /* verde */
  --ink:#0b0f19;
  --line:#e9eef5;
  --bg:#f7f9fc;
  --radius:18px;
  --shadow-sm: 0 10px 24px rgba(9,16,30,.06);
  --shadow-lg: 0 26px 60px rgba(9,16,30,.12);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:Poppins, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial; color:#111; background:var(--bg)}

/* ====== SCROLL GRADIENT BAR (top) ====== */
.scrollbar{
  position:fixed; inset:0 0 auto 0; height:4px;
  background:linear-gradient(90deg, var(--accent), var(--brand));
  transform-origin:0 50%; transform:scaleX(0);
  z-index:1100;
}

/* ====== NAVBAR PRO ====== */
.navbar{--bs-navbar-color:#111; --bs-navbar-hover-color:var(--brand); background:#fff}
.navbar.sticky{position:sticky; top:0; z-index:1090; box-shadow:0 6px 30px rgba(9,16,30,.08)}
.navbar-brand{font-weight:800}
.nav-link{font-weight:600; position:relative}
.nav-link::after{content:""; position:absolute; left:0; bottom:.2rem; height:2px; width:0; background:linear-gradient(90deg,var(--accent),var(--brand)); transition:width .25s ease}
.nav-link:hover::after{width:100%}
.btn-cta{--bs-btn-bg:var(--accent); --bs-btn-border-color:var(--accent); --bs-btn-hover-bg:#019e71; --bs-btn-hover-border-color:#019e71}

/* Dropdowns: open on hover (desktop) */
@media (min-width: 992px){
  .dropdown:hover .dropdown-menu{display:block; margin-top:0}
}
.dropdown-menu{border-radius:14px; border:1px solid var(--line); box-shadow:var(--shadow-sm)}
.dropdown-item{padding:.6rem .9rem; border-radius:10px}
.dropdown-item:hover{background:#f2f7ff}

/* ====== HERO ====== */
.hero{position:relative; overflow:hidden; background:#0f1424; color:#fff}
.hero .bg{
  position:absolute; inset:0;
  background-image: radial-gradient(900px 480px at 85% -10%, rgba(27,99,255,.25), transparent 60%), url('https://images.unsplash.com/photo-1496302662116-35cc4f36df92?q=80&w=1600&auto=format&fit=crop');
  background-size:cover; background-position:center;
  filter:saturate(105%);
}
.hero .veil{position:absolute; inset:0; background:linear-gradient(180deg, rgba(11,15,25,.75), rgba(11,15,25,.55))}
.hero .content{position:relative; z-index:2}
.hero .card{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.2); backdrop-filter:blur(6px); border-radius:22px}
.chip{display:inline-flex; align-items:center; gap:.45rem; padding:.35rem .65rem; border-radius:999px; font-weight:700; font-size:.8rem; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.25)}
.gradient-text{background:linear-gradient(90deg,#a2ffd7,#9ec3ff); -webkit-background-clip:text; background-clip:text; color:transparent}
.btn-sheen{position:relative; overflow:hidden}
.btn-sheen::before{content:""; position:absolute; inset:0; background:linear-gradient(110deg, transparent 0 45%, rgba(255,255,255,.35) 50%, transparent 55%); transform:translateX(-120%); transition:transform .7s ease}
.btn-sheen:hover::before{transform:translateX(120%)}

/* ====== HUB 3 COL ====== */
.section{padding:40px 0}
.kbar{border-radius:14px; border:1px solid var(--line); background:#fff; padding:18px}
.feed-card{border:1px solid var(--line); background:#fff; border-radius:16px; padding:16px; height:100%; transition:transform .3s, box-shadow .3s}
.feed-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-sm)}
.mini{display:flex; gap:10px; align-items:flex-start; padding:10px; border-radius:12px; border:1px solid var(--line); transition:background .25s, transform .25s}
.mini:hover{background:#f6f9ff; transform:translateX(4px)}
.mini .thumb{width:86px; height:64px; border-radius:10px; overflow:hidden; border:1px solid var(--line); flex-shrink:0}
.mini .thumb img{width:100%; height:100%; object-fit:cover}

/* Programs grid */
.prog{border:1px solid var(--line); background:#fff; border-radius:16px; overflow:hidden; transition:transform .35s, box-shadow .35s}
.prog:hover{transform:translateY(-6px); box-shadow:0 24px 56px rgba(12,18,28,.12)}
.prog .img{aspect-ratio: 4/3; overflow:hidden}
.prog .img img{width:100%; height:100%; object-fit:cover; transform:scale(1); transition:transform .6s cubic-bezier(.2,.65,.2,1)}
.prog:hover .img img{transform:scale(1.06)}

/* Reveal on scroll (visible by default) */
[data-animate]{opacity:1; transform:none}
@media (prefers-reduced-motion: no-preference){
  [data-animate]{opacity:.001; transform:translateY(18px); transition:opacity .8s cubic-bezier(.2,.65,.2,1), transform .8s cubic-bezier(.2,.65,.2,1)}
  .in [data-animate]{opacity:1; transform:none}
}

footer{border-top:1px solid var(--line)}