/* =====================================================================
   Centro Educativo Marie Curie — Header / navegación superior
   Diseño original. NO editar colores aquí: usa las variables en 01-tokens.css
   ===================================================================== */

/* ==================== NAV ==================== */
  .nav-wrap{position:sticky; top:0; z-index:50; padding:14px 0; transition:all .25s ease}
  .nav-wrap.scrolled{backdrop-filter:blur(18px); background:rgba(250,246,236,.78); border-bottom:1px solid var(--line)}
  .nav{display:flex; align-items:center; justify-content:space-between; gap:24px}
  .brand{display:flex; align-items:center; gap:12px}
  .brand-mark{width:42px; height:42px; flex-shrink:0}
  .brand-text{line-height:1.05}
  .brand-text .top{font-family:var(--f-display); font-weight:700; font-size:17px; letter-spacing:-.01em; color:var(--navy)}
  .brand-text .bot{font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-top:2px}
  .nav-links{display:flex; gap:6px; align-items:center}
  .nav-links a{padding:9px 14px; border-radius:var(--r-pill); font-size:14px; font-weight:500; color:var(--ink-soft); transition:all .18s ease}
  .nav-links a:hover{background:rgba(15,42,77,.06); color:var(--navy)}
  .nav-cta{display:flex; align-items:center; gap:10px}
  .btn{display:inline-flex; align-items:center; gap:8px; padding:11px 18px; border-radius:var(--r-pill); font-weight:600; font-size:14px; transition:all .2s ease; white-space:nowrap}
  .btn-primary{background:var(--navy); color:var(--cream)}
  .btn-primary:hover{background:var(--navy-deep); transform:translateY(-1px)}
  .btn-lime{background:var(--lime); color:var(--navy-deep)}
  .btn-lime:hover{background:var(--lime-2); transform:translateY(-1px)}
  .btn-ghost{background:transparent; color:var(--navy); border:1.5px solid var(--line-strong)}
  .btn-ghost:hover{border-color:var(--navy); background:rgba(15,42,77,.04)}
  .btn .arr{transition:transform .25s ease}
  .btn:hover .arr{transform:translateX(3px)}

  @media (max-width: 880px){
    .nav-links{display:none}
  }