:root {
    --orange: #f5b335;
	--blue: #282081;
	--azulClaro: #f5f5f5;
	--white: #ffffff;
	--gray: #f5f5f5;
    --black: #000;
	--transition: all 1s ease;
}

/* 1. Boddy */
body {
  font-family:Helvetica, Arial,'PT Sans' , sans-serif;	/**Arial, Calibri, sans-serif; **/
  color: #313131;
  font-size: 16px;
  line-height: 20px;
  text-transform:none;
}
a
{
	text-decoration: none;
}



/* 🚫 Evita desbordamiento lateral en todo el sitio */
html, body {
  width: 100%;
  overflow-x: hidden !important;
  box-sizing: border-box;
}

/* 🔧 Asegura que todo calcule bien su ancho */
*, *::before, *::after {
  box-sizing: inherit;
}

/* 🔹 Asegura que el navbar y su contenido nunca se pasen del viewport */
/* .navbar,
.main-nav,
.nav-menu,
.header-wrapper {
  max-width: 100vw;
  overflow-x: hidden;
}
*/





/* 🔶 Cinta superior institucional */
.top-nav {
  background-color: var(--orange);
  text-align: center;
  padding: 6px 10px;
  min-height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease;
}

.top-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 30px;
}

.top-nav li, a {
  color: white;
  font-weight: 400;
  font-size: 0.70rem;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.3s ease;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
}

.top-nav li:hover {
  background-color: var(--orange-dark);
  transform: translateY(-3px);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
  color: #fffef3;
}

.top-nav i 
{
  margin-right: 8px;
  font-size: 1rem;
  transition: transform 0.3s ease, color 0.3s ease;
}

.top-nav li:hover i {
  transform: scale(1.1);
  color: #fff9dc;
}
/* ✨ Efecto de resplandor animado para opciones destacadas */
.glow {
  position: relative;
  animation: glowPulse 3s infinite ease-in-out;
}

/* 🔁 Animación del resplandor */
@keyframes glowPulse {
  0%, 100% {
    box-shadow: 0 0 0 rgba(245, 179, 53, 0);
    background-color: transparent;
  }
  50% {
    box-shadow: 0 0 15px rgba(245, 179, 53, 0.8);
    background-color: rgba(245, 179, 53, 0.2);
  }
}


/* 🏛️ Encabezado institucional */
.institution-header {
  background-color: var(--white);
  text-align: center;
  padding: 15px;
}
.institution-header img.inst-logo {
  width: 80px;
  vertical-align: middle;
  margin-right: 10px;
}
.institution-header h1 {
  display: inline-block;
  color: var(--blue);
  font-size: 1.4rem;
  font-weight: 700;
  vertical-align: middle;
}



/* 🔵 NAVBAR INSTITUCIONAL (logo a la izquierda, opciones separadas) */
.navbar {
  background: var(--white);
  width: 100%;
  padding: 15px 20px; /* más espacio lateral */
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 999;
  box-shadow:  0 2px 5px rgba(0,0,0,0.1);
  transition: var(--transition);
  border-bottom: 1px solid #eee;
  box-sizing: border-box;

}
/*
.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: auto;
  padding: 10px 20px;
}
*/
.nav-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0 10px;
}
/* Logo UNTELS */
.nav-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 50px;
}
.nav-logo img {
  height: 50px;
  transition: height 0.4s ease;
}
.nav-title {
  color: var(--blue);
  font-weight: bold;
}


/* === NAV CONTENEDOR === */
.main-nav {
  width: 100%;
}

/* Contenedor de las opciones del menú */
.nav-menu {
  display: flex;
  flex-wrap: wrap;	/* 🔹 Hace que el nav-menu se mantenga dentro del ancho disponible */
  justify-content: space-between; /* reparte el espacio */
  align-items: center;
  gap: 20px; /* separación entre ítems */
  list-style: none;
  margin: 0 auto;
  padding: 0;
  width: 100%; /* ocupa todo el contenedor */
}

.nav-menu li {
  position: relative;
  text-align: center;
  flex: 1; /* 🔹 cada <li> ocupa el mismo ancho */
}

.nav-menu a {
  color: var(--black);
  text-decoration: none;
  padding: 8px;
  display: block;
  letter-spacing: 0.5px;
  text-decoration: none;
  font-size: 1.05rem;
    font-weight: 500;
  transition: background 0.3s ease, color 0.3s ease;
  transform-style: preserve-3d;
}
.nav-menu li:hover > a {
  color: var(--blue);
}



/* Subrayado animado */
.nav-menu li a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0%;
  height: 2px;
  background-color: var(--blue);
  transition: width 0.3s ease;
}

.nav-menu li a:hover::after {
  width: 100%;
}

.nav-menu li a:hover {
  color: var(--blue);
  transform: translateY(-2px);
  
}

@media (max-width: 768px) {
  .nav-menu {
    flex-direction: column;
    gap: 0;
  }

  .nav-menu li {
    width: 100%;
  }
}



/* Aplica solo al último elemento o uno con clase específica */
.nav-menu li.dropdown:last-child .submenu,
.nav-menu li.dropdown.derecha .submenu {
  left: auto;
  right: 0; /* se alinea a la derecha del botón */
}



/* 🌫️ Efecto de sombra del navbar al hacer scroll */
.navbar.scrolled {
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
  transition: box-shadow 0.4s ease, padding 0.4s ease;
  padding: 10px 60px; /* leve encogimiento elegante */
}
.navbar.scrolled .nav-logo img {
  height: 50px;
  transition: height 0.4s ease;
}

/* 🔽 Submenús */
.submenu {
  position: absolute;
  top: 100%; /* debajo del botón */
  left: 0;
  background: white;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  list-style: none;
  padding: 10px 0;
  margin: 0;
  min-width: 200px;
  opacity: 0;
  visibility: hidden;
  opacity: 0;
  transform: translateY(15px);
  transition: all 0.4s ease;
  z-index: 999;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
}
.submenu li {
  padding: 10px 20px;
  white-space: nowrap;
}
.submenu li a {
  color: #000;
  display: block;
}

.submenu.open {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

/* Para que se mantenga visible */
.nav-menu.active {
  display: flex !important;
  flex-direction: column;
  animation: fadeSlideDown 0.5s ease;
}

@keyframes fadeSlideDown {
  from { opacity: 0; transform: translateY(-15px); }
  to { opacity: 1; transform: translateY(0); }
}



.dropdown:hover > .submenu,
.dropdown-sub:hover > .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: all 1s ease; /* duración más suave */
}

.submenu li a 
{
	padding: 8px 20px;
	text-align: left;
}
.submenu li a:hover {
  background:  var(--azulClaro);
}
.submenu dropdown
{
	text-align :left ;
}

/* 🧭 Submenú anidado */
.dropdown-sub .submenu {
  top: 0;
  left: 100%;
  transform: translateY(10px);
}




/* 🔸 Mega menú */
.mega-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 25px; /* espacio entre columnas */
  padding: 20px 25px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(15px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  transition: all 0.4s ease;
  text-align: left;
  z-index: 1000;

  /* 🔹 ajuste automático pero con límite */
  width: auto;
  max-width: 1000px;
  white-space: nowrap;
  overflow-x: auto; /* si hay demasiadas columnas, se desplaza horizontalmente */
}

/* 🔹 Evita que algún li o mega-menu se desborde */
.mega-menu {
  max-width: 100%;
  overflow: hidden;
}

/* 🟩 Corrige el mega menú en pantallas grandes y evita corte */
.mega-menu {
  width: auto;
  max-width: calc(100vw - 40px); /* deja espacio a los lados */
  overflow-x: auto;
  box-sizing: border-box;
}

/* 📱 En móviles */
@media (max-width: 900px) {
  .nav-menu {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
  }
}

/* Mostrar el menú al hacer hover */
.dropdown:hover > .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* 🔹 Columnas iguales */
.mega-menu .column {
  flex: 1 1 auto;       /* 🔹 se adapta automáticamente */
  min-width: 200px;     /* ancho mínimo razonable */
  padding-right: 25px;
  border-right: 1px solid #e0e0e0;

}

/* quitar borde a la última columna */
.mega-menu .column:last-child {
  border-right: none;
  padding-right: 0;
}

/* 🔸 Línea divisoria vertical con color naranja institucional */
/*.mega-menu .column:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 10px;
  right: 5;
  width: 1.5px;
  height: calc(100% - 20px);
  background-color: var(--orange);  
  opacity: 0.7;
}
*/

/* 🔹 Títulos de sección */
.mega-menu .column h4 {
  color: #003366;
  font-size: 1rem;
  margin-bottom: 8px;
  font-weight: 600;
  border-bottom: 2px solid var(--azulClaro);
  padding-bottom: 5px;
}

/* 🔹 Enlaces */
.mega-menu .column a {
  display: block;
  color: #333;
  text-decoration: none;
  padding: 4px 0;
  font-size: 0.9rem;
  border-radius: 4px;
  transition: all 0.25s ease;
}

/* Hover elegante */
.mega-menu .column a:hover
{
	background: var(--azulClaro);
	color: #000000;
	border-radius: 4px;
  padding-left: 5px;
	padding-left: 8px;
	font-weight: 600;
}

/* === 📱 Responsividad === */

/* Tablets (≤992px): ancho ajustado y columnas en 2 filas */
@media (max-width: 992px) {
  .mega-menu {
    width: 100%;
    padding: 15px;
  }

  .mega-menu .column {
    flex: 1 1 45%; /* dos columnas por fila */
    margin-bottom: 15px;
  }

  /* ❌ Quitar línea divisoria en pantallas medianas */
  .mega-menu .column::after {
    display: none;
  }
}

@media (max-width: 768px) {
  .mega-menu {
    position: static;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    white-space: normal;
    box-shadow: none;
    border: none;
    overflow: visible;
  }

  .mega-menu .column {
    border-right: none;
    border-bottom: 1px solid #ddd;
    padding-right: 0;
    padding-bottom: 10px;
  }

  .mega-menu .column:last-child {
    border-bottom: none;
  }
}


/* Celulares (≤600px): columnas apiladas */
@media (max-width: 600px) {
  .mega-menu {
    position: static;
    box-shadow: none;
    border-radius: 0;
    transform: none;
    opacity: 1;
    visibility: visible;
    flex-direction: column;
    width: 100%;
    padding: 10px 15px;
  }

  .mega-menu .column {
    flex: 1 1 100%;
    min-width: 100%;
    padding: 5px 0;
    border-bottom: 1px solid #eee;
  }

  .mega-menu .column:last-child {
    border-bottom: none;
  }

  .mega-menu .column a {
    padding: 6px 0;
  }
}






/* 📱 Responsivo */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.8rem;
  cursor: pointer;
}
@media (max-width: 900px) {
  .menu-toggle {
    display: block;
    color: var(--blue);
  }
  .nav-menu {
    display: none;
    flex-direction: column;
    background: var(--white);
    width: 100%;
    position: absolute;
    top: 70px;
    right: 0;
    width: 250px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  }
  .nav-menu.active {
    display: flex;
    animation: slideDown 0.8s ease;
  }
}



/* Animaciones */
@keyframes fadeSlideDown {
  from {
    opacity: 0;
    transform: translateY(-15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeSlideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 🌫️ Efecto de sombra institucional (top-nav + navbar) */
.header-wrapper {
  position: sticky;
  top: 0;
  z-index: 1000;
  transition: box-shadow 0.4s ease, background-color 0.4s ease;
  width :100%;
}

/* 🌫️ Sombra institucional al hacer scroll */
.header-wrapper.scrolled {
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}




/* Mantener el menú activo cuando se hace clic */
.has-submenu.open > .submenu {
  display: block !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Evitar que desaparezca en móviles */
.nav-menu.active {
  display: flex !important;
  animation: fadeDown 0.6s ease;
}

/* Control visual de jerarquía */
.navbar, .nav-menu, .submenu {
  z-index: 9999;
}




/* ⚫ Footer */
.footer {
  background: var(--blue);
  color: white;
  padding: 25px 10px;
  text-align: center;
  margin-top: 60px;
}
.footer-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.footer .social-links a {
  color: white;
  margin: 0 10px;
  font-size: 1.4rem;
  transition: color 0.3s ease;
}
.footer .social-links a:hover {
  color: var(--orange);
}