:root{
      /* Paleta EG */
      --eg-cyan:#00DBD9;
      --eg-blue-300:#0099DB;
      --eg-blue-350:#588ADB;
      --eg-blue-400:#0054DB;
      --eg-blue-500:#000FDB;

      /* Fondo del sitio (no hero) */
      --page-grad: linear-gradient(44deg, rgb(255 255 255) 0%, rgb(148 175 253) 35%, rgba(88,138,219,1) 100%);

      /* Superficies */
      --eg-border: 1px solid rgba(15,23,42,.08);
      --eg-card-bg: rgba(255,255,255,.92);
      --eg-glass-bg: rgba(255,255,255,.78);
      --eg-shadow-soft: 0 10px 30px rgba(13,35,67,.08);
      --eg-shadow-lift: 0 18px 46px rgba(13,35,67,.14);

      --nav-h: 72px;          /* se actualiza por JS */
      --radius-xxl: 22px;
    }

    /* ====== Navbar ====== */
    .navbar-modern{
      padding-block:.5rem;
      background:rgba(255,255,255,.92)!important;
      backdrop-filter:saturate(1.2) blur(8px);
      border-bottom:1px solid rgba(0,0,0,.06);
      z-index:1050;
    }
    .navbar-modern .container{display:flex; align-items:center; justify-content:space-between; flex-wrap:nowrap}
    .navbar-modern .nav-link{padding:.5rem .75rem; border-radius:.6rem; font-weight:500; color:#0f172a!important; white-space:nowrap}
    .navbar-modern .nav-link:hover{background:rgba(0,84,219,.08); color:var(--eg-blue-400)!important}
    .navbar-modern .dropdown-menu{
      border-radius:.8rem; border:1px solid rgba(0,0,0,.06);
      box-shadow:0 18px 40px rgba(0,0,0,.12); background:#fff; color:#0f172a
    }
    .navbar-modern .navbar-nav>.dropdown{position:relative}
    .navbar-modern .navbar-nav>.dropdown .dropdown-menu{
      position:absolute!important; top:calc(100% + .45rem); left:0; margin:0; z-index:1060;
    }
    .navbar-scrolled{padding-block:.35rem; box-shadow:0 8px 22px rgba(0,0,0,.08)}

    /* Buscador pill */
    .search-pill{position:relative; min-width:280px}
    .search-pill input{border-radius:999px; padding-left:2.2rem}
    .search-pill .bi-search{position:absolute; left:10px; top:50%; transform:translateY(-50%); color:#94a3b8}

    /* Logo cuadrado / float sin agrandar barra */
    .logo-slot{
      width:116px; aspect-ratio:1/1; border-radius:1rem; background:#fff;
      border:1px solid rgba(0,0,0,.06); box-shadow:0 8px 18px rgba(0,0,0,.08);
      display:flex; align-items:center; justify-content:center; overflow:hidden
    }
    .logo-slot img{width:84%; height:auto}
    .navbar-modern{overflow:visible}
    @media (min-width:992px){
      .navbar-modern .navbar-brand{position:relative; min-height:64px; padding-left:132px; display:flex; align-items:center}
      .navbar-modern .navbar-brand .logo-slot{width:112px}
      .navbar-modern .navbar-brand .logo-float{position:absolute; left:0; top:4px}
    }
    @media (max-width:575.98px){
      .navbar-modern .navbar-brand{padding-left:96px}
      .navbar-modern .navbar-brand .logo-slot{width:90px}
    }

    /* ====== HERO ====== */
    header.hero-wrap{
      position:relative; overflow:hidden; min-height:calc(100svh - var(--nav-h));
      display:grid; align-items:center;
      background:linear-gradient(140deg, rgba(0,153,219,.10) 0%, rgba(0,84,219,.08) 40%, rgba(0,15,219,.06) 100%);
    }
    .hero-shape{position:absolute; width:70vmin; height:70vmin; right:-10vmin; top:-10vmin;
      background:conic-gradient(from 180deg, rgba(0,219,217,.15), rgba(0,84,219,.25), rgba(0,15,219,.25), rgba(0,153,219,.15));
      filter:blur(40px); border-radius:50%; z-index:0; animation:float 14s ease-in-out infinite alternate}
    @keyframes float{to{transform:translate(-20px,18px) rotate(12deg)}}
    .hero-canvas{position:absolute; inset:0; z-index:0}
    header.hero-wrap>.container{position:relative; z-index:1}
    .hero-logo .logo-slot{width:264px}

    /* ====== Fondo del resto del sitio ====== */
    .site-bg{ background:var(--page-grad); }
    @media (prefers-reduced-motion: no-preference){
      .site-bg{ background-size:160% 160%; animation: siteGrad 24s ease-in-out infinite alternate; }
      @keyframes siteGrad{ 0%{background-position:0% 50%} 100%{background-position:100% 50%} }
    }

    /* ====== Superficies y tarjetas ====== */
    .glass{ backdrop-filter:saturate(1.35) blur(8px); background:var(--eg-glass-bg); border:var(--eg-border)!important; box-shadow:var(--eg-shadow-soft); }
    .card.shadow-soft{ border:var(--eg-border)!important; background:var(--eg-card-bg); box-shadow:var(--eg-shadow-soft); }
    .card.clean{ background:#fff; border:var(--eg-border); box-shadow:none; border-radius:16px}
    .card.clean:hover{ box-shadow:var(--eg-shadow-lift) }
    .course-card:hover{ transform:translateY(-6px); box-shadow:var(--eg-shadow-lift) }
    .tilt{ transition:transform .2s ease, box-shadow .2s ease; will-change:transform }

    /* ====== Shell translúcido por sección ====== */
    #valor>.container, #como>.container, #diferenciales>.container, #empresas>.container, #cursos>.container,
    #integraciones>.container, #impacto>.container, #perfiles>.container, #precios>.container, #faq>.container{
      background: rgba(0,22,73,.78);
      border: var(--eg-border);
      border-radius: var(--radius-xxl);
      box-shadow: var(--eg-shadow-soft);
      backdrop-filter: blur(8px) saturate(1.05);
      padding: clamp(16px,2vw,28px);
      margin-block: clamp(16px,2vw,32px);
    }

    /* Timeline en “Cómo funciona” */
    #como .row.g-4{ position:relative; }
    @media (min-width:992px){
      #como .row.g-4::before{
        content:""; position:absolute; left:calc(var(--bs-gutter-x)); right:calc(var(--bs-gutter-x));
        top:64px; height:2px; background:linear-gradient(90deg, rgba(0,84,219,.18), rgba(0,84,219,.06)); border-radius:999px;
      }
    }
    .step:before{
      content:attr(data-step); display:inline-grid; place-items:center;
      width:34px; height:34px; border-radius:10px; margin-right:.5rem;
      font-weight:700; background:var(--eg-blue-400); color:#fff;
    }

    /* Botón fijo */
    .floating-cta{ position:fixed; right:16px; bottom:16px; z-index:50 }

    /* Utilidades */
    .badge, .btn-outline-primary{ border-color:rgba(0,84,219,.22) }
    .blockquote-footer{ display:none!important } /* evitamos texto suelto */
    
/* ====== Dark mode completo (usa data-bs-theme="dark") ====== */
:root{
  /* si querés ajustar el dark, toca estos tokens */
  --eg-dark-00:#0b1220;   /* fondo navbar */
  --eg-dark-01:#0f172a;   /* superficies */
  --eg-dark-02:#161c2d;   /* superficies elevadas */
}

/* NO amarres colores fijos en light: usa variables de Bootstrap */
.navbar-modern .nav-link{ color: var(--bs-body-color) !important; }

/* Gradiente del sitio en oscuro + superficies / bordes */
[data-bs-theme="dark"]{
  --page-grad: linear-gradient(44deg, rgb(12 18 32) 0%, rgb(32 49 101) 35%, rgb(27 58 120) 100%);
  --eg-border: 1px solid rgba(255,255,255,.09);
  --eg-card-bg: rgba(22,28,45,.92);
  --eg-glass-bg: rgba(20,26,42,.72);
  --eg-shadow-soft: 0 10px 30px rgba(0,0,0,.55);
  --eg-shadow-lift: 0 18px 46px rgba(0,0,0,.65);
}

/* Navbar en oscuro */
[data-bs-theme="dark"] .navbar-modern{
  background: rgba(11,18,32,.92) !important;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
[data-bs-theme="dark"] .navbar-modern .nav-link:hover{
  background: rgba(88,138,219,.18);
  color: #fff !important;
}

/* Dropdowns en oscuro */
[data-bs-theme="dark"] .dropdown-menu{
  background: var(--eg-dark-01);
  color: var(--bs-body-color);
  border-color: rgba(255,255,255,.08);
  box-shadow: 0 18px 40px rgba(0,0,0,.55);
}
[data-bs-theme="dark"] .dropdown-item{ color: var(--bs-body-color); }
[data-bs-theme="dark"] .dropdown-item:hover{ background: rgba(88,138,219,.18); color: #fff; }

/* Buscador pill en oscuro */
[data-bs-theme="dark"] .search-pill input{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.14);
  color: var(--bs-body-color);
}
[data-bs-theme="dark"] .search-pill .bi-search{ color:#94a3b8; }

/* Hero sutil en oscuro (mantiene animación) */
[data-bs-theme="dark"] header.hero-wrap{
  background: linear-gradient(140deg, rgba(0,153,219,.10) 0%, rgba(0,84,219,.07) 40%, rgba(0,15,219,.05) 100%);
}

/* Cards y shells en oscuro */
[data-bs-theme="dark"] .card.clean{ background: var(--eg-card-bg); }
[data-bs-theme="dark"] .card.shadow-soft{ background: var(--eg-card-bg); }
[data-bs-theme="dark"] .glass{
  background: var(--eg-glass-bg);
  border: var(--eg-border) !important;
  box-shadow: var(--eg-shadow-soft);
}

/* Acentos de progreso / badges conservan el branding */
.badge, .btn-outline-primary{ border-color: rgba(88,138,219,.26); }
[data-bs-theme="dark"] .badge, 
[data-bs-theme="dark"] .btn-outline-primary{ border-color: rgba(148,175,253,.35); }

 
.site-bg{ position:relative; background:transparent !important; }
#tiles-bg{
  position:absolute; inset:0;
  width:100%; height:100%;
  z-index:0; pointer-events:none; display:block;
}
 
.site-bg > section, .site-bg > div, .site-bg > article, .site-bg > aside{ position:relative; z-index:1; }

.tile-bg-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
  background: #0f172a; /* Fondo base oscuro */
}