/* =========================================================
   NEW GENERATION - NAV-FOOTER.CSS
   - Navbar pro (mezcla con fondo)
   - Dropdowns tech (normales)
   - Mega menu ancho SOLO para Oferta Académica (desktop)
   - Footer light siempre legible
   ========================================================= */

/* =========================
   Navbar (COMPACTA + PRO)
   ========================= */
.ng-nav{
  position: sticky;
  top: 0;
  z-index: 2000;

  background:
    radial-gradient(900px 220px at 15% 0%, rgba(255,255,255,.08), transparent 60%),
    linear-gradient(90deg, rgba(13,71,161,.80), rgba(10,31,68,.70));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  border-bottom: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 14px 40px rgba(2,6,23,.18);
  padding: .30rem 0;
}

/* Marca */
.ng-nav .navbar-brand img{ height:34px; width:auto; }
.ng-brand-title{ color:#fff; font-weight:900; line-height:1.05; font-size:13.5px; }
.ng-brand-sub{ color:rgba(255,255,255,.85); font-weight:800; font-size:12px; }

/* Links */
.ng-link{
  color: rgba(255,255,255,.95) !important;
  font-weight: 900;
  padding: .50rem .70rem !important;
  border-radius: 14px;
  transition: .18s ease;
  line-height: 1.1;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  white-space: nowrap;
}
.ng-link i{ font-size: 1rem; }

.ng-link:hover{
  background: rgba(255,255,255,.12);
  color:#fff !important;
}

/* Pills */
.ng-pill{
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 14px;
  padding: .46rem .78rem !important;
}

/* Botón login */
.ng-btn-login{
  background: var(--ng-accent);
  color:#fff;
  border:none;
  padding:.56rem .88rem;
  border-radius: 16px;
  font-weight:900;
  box-shadow: 0 10px 24px rgba(255,111,0,.24);
}
.ng-btn-login:hover{ filter: brightness(1.03); color:#fff; }

.ng-nav-toggler{
  border:1px solid rgba(255,255,255,.28) !important;
  border-radius: 12px;
}
.ng-nav .navbar-toggler-icon{ filter: invert(1); }

/* =========================
   Dropdown animation (suave)
   ========================= */
.dropdown-menu{
  animation: ngDropIn .14s ease-out;
  transform-origin: top center;
}
@keyframes ngDropIn{
  from{ opacity:0; transform: translateY(8px) scale(.98); }
  to{ opacity:1; transform: translateY(0) scale(1); }
}

/* =========================
   DROPDOWNS DARK TECH (Instituto / Servicios / Vinculación)
   - Mantienen ancho normal
   ========================= */
.ng-drop{
  width: min(390px, 92vw);
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--ng-dark-border);
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
  background: rgba(6,16,32,.98); /* más oscuro y sólido */
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.ng-drop-head{
  padding: 14px 16px;
  color: #fff !important;
  background:
    radial-gradient(900px 260px at 10% 30%, rgba(255,255,255,.10), transparent 60%),
    linear-gradient(135deg, rgba(11,31,59,.96), rgba(13,71,161,.55));
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.ng-drop-head .small{
  color: rgba(255,255,255,.85) !important;
}
.ng-drop-body{ padding: 10px; }

.ng-drop-item{
  display:flex;
  gap:10px;
  align-items:center;
  padding: 10px 12px;
  border-radius: 12px;
  text-decoration:none;
  color: var(--ng-dark-text);
  font-weight:900;
  transition:.15s ease;
  position: relative;
  overflow: hidden;
}
.ng-drop-item::before{
  content:"";
  position:absolute;
  left:0; top:8px; bottom:8px;
  width: 3px;
  border-radius: 3px;
  background: transparent;
  transition: .18s ease;
}
.ng-drop-item i{
  font-size:18px;
  width: 22px;
  text-align:center;
  color: rgba(255,255,255,.90);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 10px;
  padding: 6px;
}
.ng-drop-item:hover{
  background: var(--ng-dark-hover);
  transform: translateX(2px);
}
.ng-drop-item:hover::before{ background: var(--ng-accent); }

.ng-drop-sep{ height:1px; background: rgba(255,255,255,.10); }
.dropdown-item:active{ background: rgba(255,255,255,.08); color: var(--ng-dark-text); }

/* Subdropdown (hover) */
.ng-subwrap{ position: relative; }
.ng-subwrap .submenu{
  display:none;
  position:absolute;
  top: 0;
  left: 100%;
  margin-left: .55rem;
  z-index: 3000;

  background: rgba(8,20,38,.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  min-width: 220px;
  padding: 8px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
}
.ng-subwrap:hover .submenu{ display:block; }
.ng-subdrop-item{
  display:flex;
  gap:10px;
  align-items:center;
  padding: 9px 10px;
  border-radius: 12px;
  font-weight:900;
  color: var(--ng-dark-text);
  text-decoration:none;
}
.ng-subdrop-item i{
  width: 20px;
  text-align:center;
  color: rgba(255,255,255,.88);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 10px;
  padding: 6px;
}
.ng-subdrop-item:hover{ background: rgba(255,255,255,.06); }
.submenu-toggle{ cursor: default; }

/* =========================
   MEGA MENU (Oferta Académica)
   - Ancho grande SOLO desktop
   ========================= */
.ng-mega{
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--ng-border);
  box-shadow: 0 18px 50px rgba(2,6,23,.18);
  background:#fff;
}

/* desktop: mega ancho y centrado bajo el navbar */
@media (min-width: 992px){
  .ng-mega{
    width: min(1040px, 96vw);
  }
}
/* Evita que Bootstrap lo pegue al borde */
.ng-mega.dropdown-menu-end{
  right: auto !important;
}

/* head */
.ng-mega-head{
  padding: 14px 16px;
  color:#fff;
  background: linear-gradient(135deg, var(--ng-primary), var(--ng-primary-2));
}
.ng-mega-body{ background:#fff; }
.ng-mega-col{ padding: 10px; }

.ng-mega-item{
  display:flex;
  gap:10px;
  align-items:center;
  padding: 10px 12px;
  border-radius: 12px;
  text-decoration:none;
  color:#0b1b3b;
  font-weight:900;
  transition:.15s ease;
}
.ng-mega-item i{ font-size:18px; color: var(--ng-primary); }
.ng-mega-item:hover{ background:#F3F6FF; transform: translateY(-1px); }

.ng-mega-foot{
  padding: 12px 16px;
  background: #fff;
  border-top: 1px solid var(--ng-border);
}
.ng-mega-cta{
  background: var(--ng-accent);
  color:#fff;
  font-weight:900;
  border-radius: 12px;
  border:none;
}
.ng-mega-cta:hover{ filter: brightness(1.03); color:#fff; }

/* En ng-blue NO lavar el mega */
body.ng-blue .ng-mega{ background:#fff !important; }
body.ng-blue .ng-mega .ng-mega-head,
body.ng-blue .ng-mega .ng-mega-head *{ color:#fff !important; }
body.ng-blue .ng-mega .ng-mega-item,
body.ng-blue .ng-mega .ng-mega-item *{
  color:#0b1b3b !important;
  opacity:1 !important;
}

/* =========================
   FOOTER (LIGHT) - siempre legible
   ========================= */
#footer{
  position:relative;
  background:#ffffff;
  border-top:1px solid var(--ng-border);
  color:#0a2d4d;
}
body.ng-blue #footer{
  background:#ffffff;
  color:#0a2d4d;
  border-top:1px solid var(--ng-border);
}
#footer .text-muted{ color: rgba(234,240,255,.75) !important; }
body.ng-blue #footer a{ color:#0a2d4d; }

.site-footer--light{
  background:#fff;
  color:#0a2d4d;
  border-top: 1px solid rgba(10,45,77,.10);
  box-shadow: 0 -18px 40px rgba(2,8,20,.06);
  padding: 3rem 0 0;
}

/* watermark */
#footer .footer-watermark{
  position:absolute;
  right:-40px;
  top:-40px;
  width:220px;
  opacity:.02;
  pointer-events:none;
  z-index:0;
  filter: blur(.1px);
}
#footer > *:not(.footer-watermark){ position:relative; z-index:1; }

/* CTA */
.footer-cta{
  background: linear-gradient(180deg,#ffffff 0%, #f3f7ff 100%);
  border: 1px solid rgba(10,45,77,.14);
  border-radius: 18px;
  padding: 16px 18px;
  box-shadow: 0 18px 40px rgba(2,8,20,.10);
  margin-bottom: 26px;
}

.footer-chip{
  display:inline-flex; align-items:center; gap:8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 153, 51, .14);
  border: 1px solid rgba(255, 153, 51, .25);
  color:#8a3b00;
  font-size:.86rem;
  font-weight:900;
}

.footer-card{
  height:100%;
  background:rgba(255,255,255,.94);
  border:1px solid rgba(10,45,77,.10);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 20px 45px rgba(2,8,20,.25);
  transition: transform .2s ease, box-shadow .2s ease;
  min-height: 255px;
  backdrop-filter: blur(6px);
}
.footer-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(2,8,20,.10);
}
.footer-card h6{
  font-weight:900;
  color:#0a2d4d;
  margin-bottom: 12px;
}

.footer-link{
  display:flex; align-items:center; gap:10px;
  padding: 10px 12px;
  border-radius: 14px;
  background:#f6f9ff;
  border:1px solid rgba(10,45,77,.10);
  text-decoration:none;
  color:#123263;
  transition:.2s;
}
.footer-link:hover{
  background: rgba(62,119,182,.10);
  border-color: rgba(62,119,182,.25);
  
  transform: translateY(-1px);
  box-shadow: 0 14px 26px rgba(2,8,20,.08);
}
#footer .footer-watermark{
  right:-30px;
  top:-30px;
  width:260px;
  opacity:.05;
}

.ng-social a{
  width:40px;height:40px;
  border-radius:14px;
  display:grid;place-items:center;
  border:1px solid rgba(10,45,77,.18);
  color:#0a2d4d;
  text-decoration:none;
  box-shadow: 0 10px 22px rgba(2,8,20,.06);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.ng-social a:hover{
  background: rgba(255,153,51,.14);
  border-color: rgba(255,153,51,.28);
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(2,8,20,.10);
}

.subfooter--light{
  background: rgba(10,31,68,.65);
  color: rgba(234,240,255,.85);
  border-top: 1px solid rgba(255,255,255,.12);
  padding: 14px 0;
  font-size:.9rem;
  margin-top: 18px;
}
.subfooter--light a{
  color:#ffffff;
  text-decoration:none;
  border-bottom: 1px dotted rgba(10,45,77,.35);
}
.subfooter--light a:hover{
  border-bottom-color: rgba(10,45,77,.7);
}
/* =========================================================
   FIX CONTRASTE + CAPAS (dropdowns)
   ========================================================= */

/* Asegura que el dropdown quede por encima del hero */
.ng-nav { z-index: 5000; }
.ng-nav .dropdown-menu { z-index: 6000; }

/* Mejor contraste: evita que el fondo “se mezcle demasiado” */
.ng-drop{
  background: rgba(8,20,38,.96);      /* antes .92 */
  border: 1px solid rgba(255,255,255,.14);
}

/* Los íconos “pastilla” eran muy transparentes */
.ng-drop-item i,
.ng-subdrop-item i{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.14);
}

/* Evita que el texto se vea gris lavado */
.ng-drop-item,
.ng-subdrop-item{
  color: rgba(255,255,255,.96);
}
/* =========================================================
   Submenu: permitir apertura con click (mobile y desktop)
   ========================================================= */

/* Por defecto oculto */
.ng-subwrap .submenu{ display:none; }

/* Se abre con hover (desktop) */
@media (min-width: 992px){
  .ng-subwrap:hover > .submenu{ display:block; }
}

/* Se abre con click (todas) */
.ng-subwrap.is-open > .submenu{ display:block; }

/* En móvil: que no salga hacia la derecha (se corta) */
@media (max-width: 991.98px){
  .ng-subwrap .submenu{
    position: static;
    margin-left: 0;
    margin-top: 6px;
    box-shadow: none;
    border-radius: 14px;
  }
}

/* =========================================================
   DROPDOWNS ANCHOS (solo los que tengan .ng-drop-wide)
   ========================================================= */

/* En móvil: casi pantalla completa */
.ng-drop.ng-drop-wide{
  width: min(560px, 94vw);
}

/* En desktop: ancho grande centrado bajo el navbar */
@media (min-width: 992px){
  /* El li con position-static evita recortes */
  .ng-wide-wrap .dropdown-menu.ng-drop-wide{
    width: min(580px, 96vw) !important;

    /* Centrando REAL */
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
  }
}

/* =========================================================
   UNIFICAR ESTILO: botones dentro del nav como pills
   ========================================================= */

/* Para botones tipo <button class="nav-link ..."> */
.ng-nav-btn{
  background: transparent;
  border: 1px solid rgba(255,255,255,.22);
  line-height: 1.1;
}
.ng-nav-btn:hover{
  background: rgba(255,255,255,.12);
}

/* Login más elegante (menos “chillón”) */
.ng-btn-login{
  background: linear-gradient(135deg, rgba(255,153,51,.95), rgba(255,111,0,.95));
  color:#fff;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 14px;
  padding: .52rem .82rem;
  font-weight: 900;
  box-shadow: 0 10px 20px rgba(255,111,0,.18); /* menos fuerte */
}
.ng-btn-login:hover{
  filter: brightness(1.05);
  transform: translateY(-1px);
  color:#fff;
}
/* =========================================================
   MEGA MENU más PRO (Oferta Académica)
   ========================================================= */
.ng-mega-item{
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(13,71,161,.10);
  background: #ffffff;
}

.ng-mega-item i{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background: rgba(13,71,161,.08);
  border: 1px solid rgba(13,71,161,.12);
  color: var(--ng-primary);
  font-size: 18px;
}

.ng-mega-item:hover{
  background:#F3F6FF;
  border-color: rgba(13,71,161,.22);
  transform: translateY(-1px);
}

/* separador suave entre columnas (desktop) */
@media (min-width: 992px){
  .ng-mega-col + .ng-mega-col{
    border-left: 1px solid rgba(13,71,161,.10);
  }
}
/* =========================================================
   FIX: Hover de dropdown items (evitar texto gris)
   ========================================================= */

/* Items principales */
.ng-drop .dropdown-item.ng-drop-item{
  color: rgba(255,255,255,.96) !important;
}

.ng-drop .dropdown-item.ng-drop-item:hover,
.ng-drop .dropdown-item.ng-drop-item:focus{
  color: #ffffff !important;
  background: rgba(255,255,255,.08) !important; /* mejor contraste */
}

/* Items del subdropdown */
.ng-drop .dropdown-item.ng-subdrop-item{
  color: rgba(255,255,255,.96) !important;
}

.ng-drop .dropdown-item.ng-subdrop-item:hover,
.ng-drop .dropdown-item.ng-subdrop-item:focus{
  color:#ffffff !important;
  background: rgba(255,255,255,.08) !important;
}
/* =========================================================
   FIX: Subdropdown visible y por encima
   ========================================================= */
.ng-subwrap{ position: relative; }

.ng-subwrap > .submenu{
  z-index: 99999 !important;   /* por encima de todo */
}

/* Asegura que el contenedor no recorte submenus */
.ng-drop{
  overflow: visible !important; /* antes hidden, eso te puede cortar el sub */
}
/* =========================================================
   AJUSTE VISUAL – OFERTA ACADÉMICA (mega menú)
   ========================================================= */

/* Marco general del mega */
.ng-mega{
  border-radius: 18px;
  border: 1px solid rgba(13,71,161,.18);
  box-shadow: 0 26px 70px rgba(2,6,23,.30);
  overflow: hidden;
}

/* Cabecera azul más institucional */
.ng-mega-head{
  background:
    radial-gradient(900px 260px at 10% 30%, rgba(255,255,255,.12), transparent 60%),
    linear-gradient(135deg, rgba(11,31,59,.98), rgba(13,71,161,.80));
  color:#fff;
}

/* Cuerpo blanco limpio */
.ng-mega-body{
  background:#ffffff;
}

/* Ítems tipo tarjeta */
.ng-mega-item{
  background:#ffffff;
  border:1px solid rgba(13,71,161,.12);
  border-radius:14px;
  padding:12px 14px;
}

/* Íconos estilo NG */
.ng-mega-item i{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background: rgba(13,71,161,.08);
  border: 1px solid rgba(13,71,161,.12);
  color: var(--ng-primary);
  font-size: 18px;
}

.navbar .nav-link{
  padding: .5rem .85rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  transition: .18s ease;
}

.navbar .nav-link:hover{
  background: rgba(255,255,255,.08);
  border-color: rgba(212,175,55,.35);
  transform: translateY(-1px);
}
.btn-olivo{
  box-shadow: 0 10px 24px rgba(255,122,0,.25);
}
.btn-olivo:hover{
  box-shadow: 0 14px 30px rgba(255,122,0,.32);
}
.navbar.sticky-top{
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
@media (max-width: 576px){
  .navbar-brand span{ display:none; }
  .navbar-brand img{ width:32px; height:32px; }
}
/* =========================
   FOOTER – AJUSTES PRO
   ========================= */
.footer-cta .title{
  font-weight: 900;
  margin: 0;
  color:#0a2d4d;
}
.footer-cta .sub{
  margin: .35rem 0 0;
  color:#52637a;
  font-weight: 600;
}

/* Botones del CTA del footer (no afecta navbar) */
#footer .btn-olivo{
  border-radius: 14px;
  padding: .52rem .86rem;
  font-weight: 900;
  box-shadow: 0 10px 24px rgba(255,122,0,.18);
}
#footer .btn-outline-olivo{
  border-radius: 14px;
  padding: .52rem .86rem;
  font-weight: 900;
}
.footer-cta{
   background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  max-width: 1120px;
  margin: 0 auto 26px auto;
}
.footer-cta .title{ font-size: 1.15rem; }
.footer-cta .sub{ font-size: .95rem; }

#footer .footer-cta .btn{
  padding: .54rem .95rem;
  border-radius: 14px;
  font-weight: 900;
}
#footer .footer-cta .btn-outline-olivo{
  border: 1.5px solid rgba(10,45,77,.22);
  color:#0a2d4d;
  background: rgba(255,255,255,.75);
}
#footer .footer-cta .btn-outline-olivo:hover{
  background: rgba(13,71,161,.06);
  border-color: rgba(13,71,161,.28);
}
/* CTA principal del footer */
#footer .footer-cta .btn-olivo{
  background: linear-gradient(135deg, #bf1e2e 0%, #ff3b30 55%, #ff7a00 120%);
  border: 0;
  color:#fff;
  font-weight: 900;
  box-shadow:
    0 18px 40px rgba(191,30,46,.35),
    0 0 0 6px rgba(191,30,46,.08);
}

#footer .footer-cta .btn-olivo:hover{
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow: 0 18px 40px rgba(191,30,46,.22), 0 10px 22px rgba(255,122,0,.16);
}

#footer .footer-cta .btn-olivo:focus{
  box-shadow: 0 0 0 .22rem rgba(191,30,46,.22), 0 14px 32px rgba(191,30,46,.18);
}
/* Fondo general del footer: light pero con presencia */
/* =========================
   FONDO GENERAL DEL FOOTER – AZUL INSTITUCIONAL
   ========================= */
#footer.site-footer--light{
  background: rgba(10,31,68,.85);
  color: rgba(234,240,255,.9);
}

/* =========================
   FONDO CONTINUO AZUL – FOOTER INTEGRADO
   ========================= */
#footer{
  background:
    linear-gradient(
      180deg,
      #0a1f44 0%,
      #0d47a1 40%,
      #0a1f44 100%
    );
}
/* ====== FONDO GLOBAL (zona inferior) ====== */
body{
  background: #0a1f44; /* azul institucional */
}

/* Si tienes <main> o .page-wrapper, también */
main{
  background: transparent !important;
}
#footer{
  width: 100%;
  padding-top: 3rem;
  padding-bottom: 0;
  margin-top: 0;
}
#footer,
#footer.site-footer--light,
.site-footer,
.site-footer--light{
  background:
    linear-gradient(180deg, #0a1f44 0%, #0d47a1 45%, #0a1f44 100%) !important;
}
#footer{
  background:#ffffff;
}
#footer{ background: red !important; }
/* =========================
   FIX CONTRASTE: links del subfooter
   ========================= */
#footer .subfooter--light{
  background: rgba(10,31,68,.92) !important; /* más sólido */
  color: rgba(234,240,255,.92) !important;
  border-top: 1px solid rgba(255,255,255,.12) !important;
}

/* Links visibles sí o sí */
#footer .subfooter--light a,
#footer .subfooter--light a:visited{
  color: rgba(255,255,255,.95) !important;
  opacity: 1 !important;
  font-weight: 800;
  text-decoration: none !important;
}

/* Hover */
#footer .subfooter--light a:hover{
  color: #ffffff !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
}