/* ═══════════════════════════════════════════════════════════
   IPS DATAX — MENÚ SUPERIOR COMPARTIDO
   Un único menú para las 21 páginas: index, páginas raíz y
   fichas de curso. Si hay que cambiar el menú, se cambia aquí.

   Usa variables propias con prefijo --nav- para no depender de
   ipsdatax.css ni del <style> de cada ficha, que definen
   nombres distintos. Así el menú se ve idéntico en todas.
   ═══════════════════════════════════════════════════════════ */

:root{
  --nav-navy:#0a1628;
  --nav-orange:#f97316;
  --nav-cream:#f7f6f2;
  --nav-muted:#8a96a8;
  --nav-line:rgba(10,22,40,.08);
  --nav-line-2:rgba(10,22,40,.14);
  --nav-ease:cubic-bezier(.22,1,.36,1);
  --nav-pad:clamp(20px,5vw,40px);
  --nav-h:70px;
  --nav-h-min:62px;
  --nav-display:'Sora',sans-serif;
  --nav-body:'Inter',sans-serif;
  --nav-mono:'DM Mono',monospace;
}

/* ── barra ─────────────────────────────────────────────── */
nav{
  position:fixed;top:0;left:0;right:0;z-index:400;height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--nav-pad);
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--nav-line);
  transition:height .35s var(--nav-ease),box-shadow .35s,transform .4s var(--nav-ease);
}
nav.solid{height:var(--nav-h-min);box-shadow:0 1px 20px rgba(10,22,40,.06)}
nav.hidden{transform:translateY(-100%)}

.nav-logo{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0}
.nav-logo img{display:block;height:28px;width:auto;transition:opacity .25s}
.nav-logo:hover img{opacity:.82}
.nav-logo .dot{
  width:6px;height:6px;border-radius:50%;background:var(--nav-orange);
  box-shadow:0 0 10px var(--nav-orange);animation:navpulse 2.4s infinite;
}
@keyframes navpulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}}

/* ── enlaces ───────────────────────────────────────────── */
.nav-links{display:flex;align-items:center;gap:30px}
/* El '>' es imprescindible: los ítems del desplegable también son <a> dentro
   de .nav-links, y sin él heredarían este padding y el subrayado. */
.nav-links > a,.nav-dd-btn{
  font-family:var(--nav-body);font-size:14px;font-weight:600;color:var(--nav-navy);
  text-decoration:none;background:none;border:none;cursor:pointer;
  display:flex;align-items:center;gap:5px;position:relative;padding:6px 0;
  transition:color .22s;
}
.nav-links > a::after{
  content:'';position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--nav-orange);transform:scaleX(0);transform-origin:100% 50%;
  transition:transform .35s var(--nav-ease);
}
.nav-links > a:hover::after,
.nav-links > a[aria-current="page"]::after{transform:scaleX(1);transform-origin:0 50%}
.nav-links > a:hover,.nav-dd-btn:hover{color:var(--nav-orange)}

/* ── desplegable "Planes" ──────────────────────────────── */
.nav-dd{position:relative}
.nav-dd-btn svg{transition:transform .3s var(--nav-ease)}
.nav-dd.open .nav-dd-btn svg{transform:rotate(180deg)}
/* Se ancla a la ventana, no al botón: centrado sobre "Planes" se salía por
   la izquierda, porque ese botón queda escorado a la izquierda del menú.
   Con position:fixed el panel siempre queda centrado en pantalla y el
   max-width garantiza que nunca desborde. */
.nav-dd-menu{
  position:fixed;top:calc(var(--nav-h) + 8px);left:50%;translate:-50% 0;
  width:max-content;min-width:min(620px,calc(100vw - 32px));max-width:calc(100vw - 32px);
  background:#fff;border:1px solid var(--nav-line);border-radius:12px;overflow:hidden;
  box-shadow:0 12px 36px rgba(10,22,40,.12);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .25s var(--nav-ease),transform .25s var(--nav-ease),visibility .25s;
}
.nav-dd.open .nav-dd-menu{opacity:1;visibility:visible;transform:translateY(0)}
/* al compactarse la barra, el panel sube con ella */
nav.solid .nav-dd-menu{top:calc(var(--nav-h-min) + 8px)}
.nav-dd-item{
  display:flex;align-items:center;justify-content:space-between;gap:36px;
  padding:15px 26px;text-decoration:none;border-bottom:1px solid var(--nav-line);
  transition:background .2s;white-space:nowrap;
}
.nav-dd-item:last-child{border-bottom:none}
.nav-dd-item:hover{background:var(--nav-cream)}
.nav-dd-item b{font-size:14px;font-weight:700;color:var(--nav-navy);flex-shrink:0;transition:color .2s}
.nav-dd-item span{font-family:var(--nav-mono);font-size:12px;color:var(--nav-muted);text-align:right;flex-shrink:0;transition:color .2s}
.nav-dd-item:hover b{color:var(--nav-orange)}
.nav-dd-item:hover span{color:var(--nav-orange)}

/* ── botón de acceso y hamburguesa ─────────────────────── */
.nav-cta{
  font-family:var(--nav-display);font-size:12.5px;font-weight:700;letter-spacing:.01em;
  color:#fff;background:var(--nav-navy);padding:10px 18px;border-radius:8px;
  border:none;cursor:pointer;white-space:nowrap;text-decoration:none;
  transition:background .25s;
}
.nav-cta:hover{background:var(--nav-orange)}
.nav-burger{display:none;background:none;border:none;cursor:pointer;flex-direction:column;gap:5px;padding:6px}
.nav-burger span{display:block;width:22px;height:1.5px;background:var(--nav-navy);border-radius:2px;transition:transform .3s var(--nav-ease),opacity .2s}
.nav-burger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav-burger.open span:nth-child(2){opacity:0}
.nav-burger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* ── menú móvil ────────────────────────────────────────── */
.mmenu{
  position:fixed;inset:var(--nav-h-min) 0 0;z-index:390;background:#fff;
  padding:28px var(--nav-pad) 40px;display:flex;flex-direction:column;
  opacity:0;visibility:hidden;transform:translateY(-12px);
  transition:opacity .3s var(--nav-ease),transform .3s var(--nav-ease),visibility .3s;
  overflow-y:auto;
}
.mmenu.open{opacity:1;visibility:visible;transform:translateY(0)}
.mmenu-label{font-family:var(--nav-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--nav-muted);padding:16px 0 6px}
.mmenu a{display:block;text-decoration:none;font-size:18px;padding:14px 0;border-bottom:1px solid var(--nav-line);color:var(--nav-navy)}
.mmenu a small{display:block;font-family:var(--nav-mono);font-size:11px;color:var(--nav-muted);margin-top:3px}
.mmenu .mcta{
  margin-top:26px;background:var(--nav-navy);color:#fff;text-align:center;
  border-radius:11px;font-weight:700;font-family:var(--nav-display);font-size:15px;
  border-bottom:none;padding:16px;
}

/* ── popup "Acceso alumnos" ────────────────────────────── */
.ov{position:fixed;inset:0;background:rgba(10,22,40,.45);backdrop-filter:blur(4px);z-index:500;opacity:0;visibility:hidden;transition:.28s}
.ov.open{opacity:1;visibility:visible}
.access{
  position:fixed;top:78px;right:var(--nav-pad);z-index:501;width:min(330px,calc(100vw - 32px));
  background:#fff;border:1px solid var(--nav-line);border-radius:14px;overflow:hidden;
  box-shadow:0 8px 40px rgba(10,22,40,.18);
  opacity:0;visibility:hidden;transform:translateY(-10px) scale(.97);
  transition:opacity .28s var(--nav-ease),transform .28s var(--nav-ease),visibility .28s;
}
.access.open{opacity:1;visibility:visible;transform:none}
.access-h{padding:18px 20px 14px;border-bottom:1px solid var(--nav-line)}
.access-h b{display:block;font-size:13.5px;font-weight:600;color:var(--nav-navy)}
.access-h span{font-size:12px;color:var(--nav-muted)}
.access-b{padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.abtn{display:flex;align-items:center;gap:13px;padding:13px 15px;border-radius:12px;text-decoration:none;border:1px solid var(--nav-line-2);transition:border-color .22s,background .22s,transform .22s var(--nav-ease)}
.abtn:hover{border-color:var(--nav-navy);background:var(--nav-cream);transform:translateX(3px)}
.abtn.hot{background:rgba(249,115,22,.12);border-color:rgba(249,115,22,.3)}
.aico{width:38px;height:38px;border-radius:10px;background:rgba(10,22,40,.05);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.abtn b{display:block;font-size:13px;font-weight:600;color:var(--nav-navy)}
.abtn span{display:block;font-size:11px;color:var(--nav-muted)}
.access-f{padding:12px 16px 16px;border-top:1px solid var(--nav-line)}
.access-f p{font-family:var(--nav-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--nav-muted);margin-bottom:8px}
.access-f a{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-radius:9px;background:rgba(10,22,40,.03);text-decoration:none;font-size:12px;color:#4a5568;transition:background .2s}
.access-f a:hover{background:rgba(10,22,40,.06)}

/* ── móvil ─────────────────────────────────────────────── */
@media(max-width:768px){
  .nav-links,.nav-cta{display:none}
  .nav-burger{display:flex}
  nav{height:var(--nav-h-min)}
}