/*innovador_3*/
/* ============================
   🌟 NAVBAR BASE CON VARIABLES DINÁMICAS
   ============================ */
:root {
  --navbar-bg: rgba(255, 255, 255, 0.35);
  --navbar-border: rgba(255, 255, 255, 0.25);
  --navbar-shadow: rgba(0, 0, 0, 0.15);
  --navbar-text: #1e293b;
  --navbar-hover: #cccf14;
  --navbar-hover-bg: rgba(37, 99, 235, 0.1);
  --dropdown-bg: rgba(255, 255, 255, 0.9);
  --dropdown-border: rgba(200, 200, 200, 0.3);
  --dropdown-item-color: #1e293b;
  --dropdown-item-hover-color: #2563eb;
  --dropdown-item-hover-bg: rgba(228, 174, 25, 0.1);
  --btn-bg: #2563eb;
  --btn-hover-bg: #1d4ed8;
  --btn-text: #fff;
  --toggler-bar: #1e293b;
  --mobile-bg: rgba(255, 255, 255, 0.95);
  --mobile-dropdown-bg: rgba(255, 255, 255, 0.95);
  --innovador3-mobile-bg: rgba(255, 255, 255, 0.95);
}

/* ===== NAVBAR BASE ===== */
.glass-navbar {
  position: fixed;
  top: 15px;
  left: 50%;
  transform: translateX(-50%);
  width: 92%;
  max-width: 1200px;
  padding: 0.8rem 1.5rem;
  border-radius: 16px;
  background: var(--navbar-bg);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid var(--navbar-border);
  box-shadow: 0 8px 32px var(--navbar-shadow);
  z-index: 1000;
  transition: background 0.3s ease, color 0.3s ease;
}

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ===== LOGO ===== */
.nav-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--navbar-text);
  text-decoration: none;
}

.nav-logo img {
  height: 36px;
}

/* ===== LINKS ===== */
.nav-links {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

.nav-links li {
  position: relative;
}

.nav-links a {
  display: flex;
  align-items: center;
  color: var(--navbar-text);
  text-decoration: none;
  font-weight: 500;
  padding: 8px 12px;
  transition: all 0.3s ease;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--navbar-hover);
  background: var(--navbar-hover-bg);
  border-radius: 8px;
}

/* ===== DROPDOWN ===== */
.dropdown-menu,
.dropdown-menu-1 {
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--dropdown-bg);
  backdrop-filter: blur(14px);
  border: 1px solid var(--dropdown-border);
  border-radius: 12px;
  padding: 0.5rem 0;
  display: none;
  flex-direction: column;
  min-width: 200px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.15);
  z-index: 1001;
}

.dropdown:hover .dropdown-menu,
.dropdown:hover .dropdown-menu-1 {
  display: flex;
}

.dropdown-menu a,
.dropdown-menu-1 a {
  padding: 8px 14px;
  color: var(--dropdown-item-color);
  transition: all 0.3s ease;
}

.dropdown-menu a:hover,
.dropdown-menu-1 a:hover {
  color: var(--dropdown-item-hover-color);
  background: var(--dropdown-item-hover-bg);
  border-radius: 8px;
}

/* ===== BOTÓN INGRESAR ===== */


.btn-primary {
  background: var(--btn-bg);
  color: var(--btn-text) !important;
  padding: 6px 16px;
  border-radius: 20px;
  font-weight: 600;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--btn-bg) 50%, transparent);
  transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

.btn-primary:hover {

  color: #fff !important;
  /* 🔹 Mantiene visible el texto al hacer hover */
  box-shadow: 0 6px 18px color-mix(in srgb, var(--btn-hover-bg) 60%, transparent);
}

/* ===== TOGGLE (MOBILE) ===== */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 26px;
  height: 20px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 1100;
  transition: transform 0.3s ease;
}

.nav-toggle span {
  display: block;
  height: 3px;
  background: var(--toggler-bar);
  border-radius: 2px;
  transition: all 0.3s ease;
}

/* Animación de X */
.nav-toggle.open span:nth-child(1) {
  transform: rotate(45deg) translateY(8px);
}

.nav-toggle.open span:nth-child(2) {
  opacity: 0;
}

.nav-toggle.open span:nth-child(3) {
  transform: rotate(-45deg) translateY(-8px);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 992px) {
  .nav-links {
    position: fixed;
    top: 0;
    right: -100%;
    width: 80%;
    height: 100vh;
    background: var(--innovador3-mobile-bg);
    backdrop-filter: blur(20px);
    flex-direction: column;
    align-items: flex-start;
    padding: 4rem 2rem;
    gap: 1rem;
    transition: right 0.4s ease;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(100, 100, 100, 0.3) transparent;
  }

  .nav-links::-webkit-scrollbar {
    width: 6px;
  }

  .nav-links::-webkit-scrollbar-thumb {
    background-color: rgba(120, 120, 120, 0.3);
    border-radius: 10px;
  }

  .nav-links.show {
    right: 0;
  }

  .nav-toggle {
    display: flex;
  }

  /* Submenús móviles */
  .dropdown-menu,
  .dropdown-menu-1 {
    position: static;
    display: none;
    background: var(--mobile-dropdown-bg);
    box-shadow: none;
    padding-left: 1rem;
  }

  .dropdown.open .dropdown-menu,
  .dropdown.open .dropdown-menu-1 {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
  }

  .dropdown-toggle::after {
    content: "▸";
    margin-left: 6px;
    transition: transform 0.3s ease;
  }

  .dropdown.open .dropdown-toggle::after {
    transform: rotate(90deg);
  }
}

/* 🌐 NAVBAR Innovador_3 */
.glass-navbar {
  background: var(rgba(255, 255, 255, 0.2));
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--innovador3-border, transparent);
}

/* 🔗 Enlaces principales */
.glass-navbar .nav-links a {
  color: var(--innovador3-link-color, #fff);
  transition: all 0.3s ease;
}

.glass-navbar .nav-links a:hover {
  color: var(--innovador3-link-hover, #000);
  background-color: var(--innovador3-link-hover-bg, rgba(255, 255, 255, 0.1));
}

/* 📋 Submenús */
.dropdown-menu {
  position: absolute;
  display: none;
  list-style: none;
  padding: 10px;
  border-radius: 8px;
  z-index: 100;
  background: var(--innovador3-submenu-bg, rgba(255, 255, 255, 0.9));
  border: 1px solid var(--innovador3-border, transparent);
  backdrop-filter: blur(14px);
}

.dropdown:hover .dropdown-menu {
  display: block;
}

/* 🔗 Enlaces del submenú */
.dropdown-menu a {
  display: block;
  padding: 8px 12px;
  color: var(--innovador3-link-color, #000);
  border-radius: 6px;
  transition: all 0.3s ease;
}

.dropdown-menu a:hover {
  background: var(--innovador3-submenu-hover, rgba(0, 0, 0, 0.1));
  color: var(--innovador3-link-hover, #fff);
}

#Innovador_3 {
  transition: background 0.4s ease, box-shadow 0.4s ease, backdrop-filter 0.4s ease;
}

/* 🎯 Efecto Scroll Innovador_3 */
#Innovador_3 {
  --innovador3-bg-navbar: rgba(255, 255, 255, 0.35);
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
  backdrop-filter: blur(18px) saturate(180%);
  transition: all 0.3s ease;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}



/* ✨ Efecto scroll Innovador_3 corregido */
.glass-navbar.scrolled {
  background: rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
  border: 1px solid var(--innovador3-border, rgba(0, 0, 0, 0.1));
  transition: all 0.3s ease;
}

/*innovador_1*/
/* Navbar component personalizado basado en Code_Jungle */
/* ============================
   🎨 VARIABLES DINÁMICAS Innovador_1
   ============================ */
/* ======== NAVBAR BASE ======== */
.glass-navbar_1 {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  background: var(--innovador1-bg-navbar, rgba(255, 255, 255, 0.5));
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--innovador1-border, transparent);
  transition: background 0.3s ease, border-color 0.3s ease;
}

/* ======== CONTENEDOR ======== */
.nav-container_1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 28px;
  max-width: 1200px;
  margin: 0 auto;
}

/* ======== LOGO ======== */
.nav-logo_1 img {
  height: 42px;
  margin-right: 8px;
  transition: transform 0.3s ease;
}

.nav-logo_1:hover img {
  transform: scale(1.05);
}

/* ======== LINKS PRINCIPALES ======== */
.nav-links_1 {
  display: flex;
  list-style: none;
  gap: 18px;
}

.nav-links_1 a {
  text-decoration: none;
  color: var(--innovador1-link-color, #1e293b);
  padding: 8px 12px;
  font-weight: 500;
  transition: color 0.3s, background 0.3s;
  border-radius: 8px;
}

.nav-links_1 a:hover {
  color: var(--innovador1-link-hover, #2563eb);
  background: var(--innovador1-link-hover-bg, rgba(37, 99, 235, 0.1));
}

/* ======== BOTÓN HAMBURGUESA ======== */
.nav-toggle_1 {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 24px;
  height: 18px;
  cursor: pointer;
  background: transparent;
  border: none;
}

.nav-toggle_1 span {
  width: 100%;
  height: 3px;
  background: var(--innovador1-link-color, #1e293b);
  border-radius: 2px;
  transition: all 0.3s ease;
}

.nav-toggle_1.open span:nth-child(1) {
  transform: rotate(45deg) translateY(7px);
}

.nav-toggle_1.open span:nth-child(2) {
  opacity: 0;
}

.nav-toggle_1.open span:nth-child(3) {
  transform: rotate(-45deg) translateY(-7px);
}

/* ======== SUBMENÚS ======== */
.dropdown-menu_1 {
  display: none;
  position: absolute;
  flex-direction: column;
  background: var(--innovador1-submenu-bg, rgba(255, 255, 255, 0.9));
  backdrop-filter: blur(14px);
  border: 1px solid var(--innovador1-border, transparent);
  padding: 8px;
  margin-top: 4px;
  border-radius: 12px;
  transition: all 0.25s ease-in-out;
}

.dropdown_1:hover>.dropdown-menu_1 {
  display: flex;
  opacity: 1;
  transform: translateY(0);
}

.dropdown-menu_1 a {
  padding: 8px 14px;
  border-radius: 8px;
  transition: all 0.25s;
}

.dropdown-menu_1 a:hover {
  background: var(--innovador1-link-hover-bg, rgba(37, 99, 235, 0.1));
  color: var(--innovador1-link-hover, #2563eb);
}

/* ======== MÓVIL ======== */
@media (max-width: 992px) {
  .nav-toggle_1 {
    display: flex;
  }

  .nav-links_1 {
    display: none;
    flex-direction: column;
    background: var(--innovador1-mobile-bg, rgba(255, 255, 255, 0.95));
    position: absolute;
    top: 64px;
    left: 0;
    width: 100%;
    padding: 16px;
    border-radius: 0 0 16px 16px;
  }

  .nav-links_1.show {
    display: flex;
  }

  .dropdown-menu_1 {
    position: relative;
    margin-left: 16px;
    border: none;
  }
}

/* ---------- INNOVADOR 1 ---------- */
.glass-navbar_1 {
  background: var(--innovador1-bg-navbar, rgba(255, 255, 255, 0.8));
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--innovador1-border, rgba(0, 0, 0, 0.1));
  transition: background 0.3s ease, border 0.3s ease;
}

.nav-links_1 a {
  color: var(--innovador1-link-color, #1e293b);
  transition: color 0.3s ease, background 0.3s ease;
}

.nav-links_1 a:hover {
  color: var(--innovador1-link-hover, #2563eb);
  background: var(--innovador1-link-hover-bg, rgba(37, 99, 235, 0.1));
}

.dropdown-menu_1 {
  background: var(--innovador1-submenu-bg, rgba(255, 255, 255, 0.95));
  border: 1px solid var(--innovador1-border, transparent);
  backdrop-filter: blur(14px);
  transition: all 0.3s ease;
}

/* 🌙 NAVBAR MINIMALISTA 1 */

/* Por defecto: transparente sobre el hero */
.mini-navbar {
  background-color: transparent !important;
  transition: background-color 0.4s ease, padding 0.3s ease;
  padding: 1rem 2rem;
  position: fixed;
  width: 100%;
  z-index: 1000;
}

/* Cuando se hace scroll: fondo sólido */
.mini-navbar.scrolled {
  background-color: #0a0a0a !important;
  /* 🔹 negro sólido (puedes usar color primario si prefieres) */
  padding: 0.6rem 2rem;
  backdrop-filter: none;
}

.mini-navbar.scrolled {
  background-color: #0a0a0a;
  padding: 0.6rem 2rem;
  backdrop-filter: none;
}

/* Contenedor interno del navbar */
.mini-navbar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Logo */
.mini-navbar-logo img {
  display: block;
  height: 40px;
  transition: transform 0.3s ease;
}

/* Al hacer scroll, el logo se reduce ligeramente */
.mini-navbar.scrolled .mini-navbar-logo img {
  transform: scale(0.95);
}

/* Menú a la derecha */
.mini-navbar .navbar-nav {
  display: flex;
  gap: 2rem;
  align-items: center;
}

/* Links del menú */
.mini-link-nav {
  color: #ffffff !important;
  font-weight: 500;
  text-transform: uppercase;
  transition: color 0.25s ease;
}

.mini-link-nav:hover {
  color: #f0c040 !important;
}

/* Dropdown */
.nav-item.dropdown .dropdown-menu {
  background-color: rgba(0, 0, 0, 0.9);
  border: none;
  border-radius: 6px;
}

.dropdown-menu a {
  color: #ffffff;
  font-size: 0.95rem;
}

.dropdown-menu a:hover {
  color: #f0c040;
}

/* Botón hamburguesa (móvil) */
.navbar-toggler {
  border: none;
  color: white;
  transition: transform 0.3s ease;
}

.navbar-toggler:focus {
  outline: none;
  box-shadow: none;
}

.navbar-toggler:hover {
  transform: scale(1.1);
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba%28255, 255, 255, 1%29' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* ======== 🌐 MENÚ MÓVIL ======== */
@media (max-width: 991px) {

  /* Fondo del panel desplegable */
  .navbar-collapse.show {
    background: rgba(0, 0, 0, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    position: fixed;
    top: 60px;
    left: 0;
    width: 100%;
    height: calc(100vh - 60px);
    padding: 2rem 1rem;
    z-index: 9999;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.35) transparent;
  }

  /* Scroll estético en navegadores WebKit */
  .navbar-collapse.show::-webkit-scrollbar {
    width: 6px;
  }

  .navbar-collapse.show::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.35);
    border-radius: 10px;
  }

  /* Links dentro del menú móvil */
  .navbar-collapse.show .nav-link {
    color: #ffffff !important;
    font-size: 1.2rem;
    display: block;
    margin: 1rem 0;
    text-align: center;
    transition: color 0.3s ease, transform 0.3s ease;
  }

  .navbar-collapse.show .nav-link:hover {
    color: #f0c040 !important;
    transform: translateY(-2px);
  }

  /* Submenús dentro del panel móvil */
  .navbar-collapse.show .dropdown-menu {
    position: static;
    float: none;
    background: rgba(0, 0, 0, 0.8);
    border-radius: 6px;
    margin-top: 0.5rem;
    padding: 0.5rem 0;
  }

  .navbar-collapse.show .dropdown-menu a {
    color: #fff;
    text-align: center;
    padding: 0.5rem 0;
  }

  .navbar-collapse.show .dropdown-menu a:hover {
    color: #f0c040;
  }
}


/* ============================================================
   🌿 Minimalista_2 — Navbar responsive con botones en móvil
   ============================================================ */
/* =========================================================
   ✨ Minimalista_2 — versión refinada con transparencia y glass
   ========================================================= */
/* =========================================================
   🌿 Minimalista_2 — Transparente + color dinámico al hacer scroll
   ========================================================= */
/* =========================================================
   🌈 NAVBAR BASE — para temas tipo Minimalista
   ========================================================= */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  padding: 0.8rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.4s ease;
  backdrop-filter: blur(12px);
  background: rgba(255, 255, 255, 0.15);
  /* Transparente inicial */
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

/* 🔸 Cambia al hacer scroll */
.navbar.scrolled {
  backdrop-filter: none;
  background: var(--color_primario_solido_o_gradiente_1, #0a0a0a);
  /* Color dinámico o negro por defecto */
  border-bottom: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* 📱 Ajustes responsive */
.navbar .logo {
  height: 40px;
}

.navbar .menu {
  display: flex;
  gap: 1.5rem;
}

.navbar .menu a {
  color: var(--color_texto_navbar, #fff);
  font-weight: 500;
  text-decoration: none;
  transition: color 0.3s ease;
}

.navbar .menu a:hover {
  color: var(--color_navbar_hover, #ffd700);
}

/* 🍔 Menú hamburguesa */
.hamburger {
  display: none;
  cursor: pointer;
  flex-direction: column;
  gap: 4px;
}

.hamburger span {
  height: 3px;
  width: 25px;
  background: var(--color_texto_navbar, #fff);
  border-radius: 2px;
  transition: all 0.3s ease;
}

/* 📱 Mostrar hamburguesa en móviles */
@media (max-width: 768px) {
  .hamburger {
    display: flex;
  }

  .menu {
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--color_primario_solido_o_gradiente_1, #0a0a0a);
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    display: none;
    border-radius: 0 0 1rem 1rem;
  }

  .menu.active {
    display: flex;
  }
}

/* =========================================================
   🌿 Minimalista_2 — Navbar translúcido que se solidifica al hacer scroll
   ========================================================= */
#Minimalista_2 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  padding: 0.8rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.5s ease;
  background: rgba(255, 255, 255, 0.08);
  /* Transparente inicial */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

/* 🔸 Al hacer scroll */


/* 📸 Logo */
#Minimalista_2 .navbar-brand img {
  height: 38px;
  transition: transform 0.3s ease, filter 0.3s ease;
}

#Minimalista_2.scrolled .navbar-brand img {
  transform: scale(0.95);
  filter: brightness(0.9);
}

/* 🔠 Links */
#Minimalista_2 .nav-link {
  color: var(--color_texto_navbar, #ffffff);
  transition: color 0.3s ease;
}

#Minimalista_2 .nav-link:hover {
  color: var(--color_navbar_hover, #ffd700);
}

/* 🍔 Hamburguesa */
#Minimalista_2 .navbar-toggler {
  border: none;
  background: transparent;
}

#Minimalista_2 .navbar-toggler:focus {
  outline: none;
  box-shadow: none;
}

#Minimalista_2 .navbar-toggler-icon {
  background-size: contain;
  background-repeat: no-repeat;
}

/* 📱 Responsive */
@media (max-width: 768px) {
  #Minimalista_2 .collapse {
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 0 0 12px 12px;
    transition: all 0.4s ease;
  }

  #Minimalista_2.scrolled .collapse {
    background: var(--color_primario_solido_o_gradiente_1, #0a0a0a);
  }
}

/* ============================
   🌿 MINIMALISTA_3 - ESTILO BASE
   ============================ */

:root {
  --color-primario: #0d47a1;
  --color-secundario: #1565c0;
  --color-terciario: #e3f2fd;
  --color-hover: #e3f2fd;
  --color-texto: #ffffff;
}

/* Variables base específicas para el navbar */
#Minimalista_3 {
  --minimalista3-bg: transparent;
  --minimalista3-menu-bg: rgba(238, 217, 217, 0.35);
  --minimalista3-blur: 18px;
  --minimalista3-saturate: 180%;
  --minimalista3-menu-border: rgba(255, 255, 255, 0.25);
  --minimalista3-menu-border-top: rgba(0, 0, 0, 0.05);
  --minimalista3-shadow: rgba(0, 0, 0, 0.15);
  --minimalista3-logo-max-height: 40px;
  --minimalista3-link-font-size: 1rem;
  --minimalista3-link-color: var(--color_texto_navbar, #293c3d);
  --minimalista3-link-hover: var(--color_navbar_hover, #3786e7);
}

/* ============================
   🔹 NAVBAR PRINCIPAL
   ============================ */
#Minimalista_3 {
  background: var(--minimalista3-bg) !important;
  padding: 0.5rem 1rem;
  transition: background 0.3s ease-in-out, backdrop-filter 0.3s ease-in-out;
  z-index: 9999;
  position: relative;
}

/* ============================
   🔹 LOGO
   ============================ */
.ultra-navbar-logo img {
  max-height: var(--minimalista3-logo-max-height);
  transition: transform 0.3s ease;
}

.ultra-navbar-logo img:hover {
  transform: scale(1.05);
}

/* ============================
   🔹 LINKS DE NAVEGACIÓN
   ============================ */
.ultra-link-nav {
  font-size: var(--minimalista3-link-font-size);
  color: var(--minimalista3-link-color) !important;
  transition: color 0.3s ease-in-out, background 0.3s ease-in-out;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
}

.ultra-link-nav:hover {
  color: var(--minimalista3-link-hover) !important;
}

/* ============================
   🔹 ESTADO SCROLLED
   ============================ */
#Minimalista_3.scrolled {
  background: rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
}

/* ============================
   🔹 MODO ESCRITORIO
   ============================ */
@media (min-width: 992px) {
  #Minimalista_3 .navbar-toggler {
    display: block !important;
  }

  #Minimalista_3 .navbar-collapse {
    display: none !important;
  }

  #Minimalista_3 .navbar-collapse.show {
    display: block !important;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--minimalista3-menu-bg);
    backdrop-filter: blur(var(--minimalista3-blur)) saturate(var(--minimalista3-saturate));
    border: 1px solid var(--minimalista3-menu-border);
    box-shadow: 0 8px 32px var(--minimalista3-shadow);
    z-index: 1000;
    border-top: 1px solid var(--minimalista3-menu-border-top);
    padding: 1rem 0;
    text-align: center;
  }

  #Minimalista_3 .navbar-nav {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
  }
}

/* ============================
   🔹 MODO MÓVIL
   ============================ */
@media (max-width: 991.98px) {
  #Minimalista_3 .navbar-collapse {
    background: var(--minimalista3-menu-bg);
    backdrop-filter: blur(var(--minimalista3-blur)) saturate(var(--minimalista3-saturate));
    border-top: 1px solid var(--minimalista3-menu-border-top);
    box-shadow: 0 4px 24px var(--minimalista3-shadow);
    padding: 1rem 0.5rem;
    border-radius: 0 0 1rem 1rem;
    transition: all 0.35s ease-in-out;
  }

  #Minimalista_3 .navbar-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
  }

  #Minimalista_3 .navbar-nav .nav-link {
    width: 90%;
    text-align: center;
    font-size: 1rem;
    padding: 0.4rem 0;
    color: var(--minimalista3-link-color) !important;
    border-radius: 0.5rem;
    transition: all 0.25s ease-in-out;
  }

  #Minimalista_3 .navbar-nav .nav-link:hover {
    color: var(--minimalista3-link-hover) !important;
    background: rgba(255, 255, 255, 0.15);
  }

  #Minimalista_3 .dropdown-menu {
    position: static;
    float: none;
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: none;
    box-shadow: none;
    margin-top: 0.3rem;
  }

  #Minimalista_3 .dropdown-menu a {
    padding: 0.3rem 1rem;
    text-align: center;
    color: var(--minimalista3-link-color);
  }

  #Minimalista_3 .dropdown-menu a:hover {
    color: var(--minimalista3-link-hover);
    background: rgba(255, 255, 255, 0.1);
  }
}

/*Creativa_1*/


/* ===== Reset ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Segoe UI", Roboto, sans-serif;
  background: #f3f4f6;
  color: #1f2937;
}

/* ===== Navbar ===== */
.creativa-navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #ffffff;
  box-shadow: inset 6px 6px 12px #d1d5db,
    inset -6px -6px 12px #ffffff;
  padding: 20px 32px;
  z-index: 1000;
}

.creativa-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ===== Logo ===== */
.creativa-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: bold;
  font-size: 20px;
  color: #1e3a8a;
  text-decoration: none;
}

.creativa-logo img {
  height: 48px;
  border-radius: 8px;
  box-shadow: 4px 4px 8px #d1d5db,
    -4px -4px 8px #ffffff;
}

/* ===== Links ===== */
.creativa-links {
  list-style: none;
  display: flex;
  gap: 28px;
  align-items: center;
}

.creativa-links li {
  position: relative;
}

.creativa-links a {
  text-decoration: none;
  font-weight: 500;
  font-size: 1rem;
  color: #1f2937;
  padding: 14px 22px;
  border-radius: 12px;
  box-shadow: 5px 5px 10px #d1d5db,
    -5px -5px 10px #ffffff;
  transition: all 0.3s ease;
}

.creativa-links a:hover,
.creativa-links a.active {
  color: #1e3a8a;
  background: #f3f4f6;
  box-shadow: inset 5px 5px 10px #d1d5db,
    inset -5px -5px 10px #ffffff;
}

/* ===== Dropdown ===== */
.creativa-dropdown-menu {
  position: absolute;
  top: 120%;
  left: 0;
  background: #ffffff;
  border-radius: 12px;
  padding: 0.8rem 0;
  display: none;
  flex-direction: column;
  min-width: 240px;
  box-shadow: 8px 8px 16px #d1d5db,
    -8px -8px 16px #ffffff;
}

.creativa-dropdown:hover .creativa-dropdown-menu {
  display: flex;
}

.creativa-dropdown-menu a {
  box-shadow: none;
  padding: 12px 20px;
  border-radius: 8px;
}

.creativa-dropdown-menu a:hover {
  background: #e5e7eb;
  color: #1e3a8a;
}

/* ===== Botón Ingresar ===== */

.creativa-btn-ingresar {
  background: #1e3a8a;
  color: #FFD700 !important;
  box-shadow: 4px 4px 8px #d1d5db,
    -4px -4px 8px #ffffff;
  border-radius: 24px;
  font-weight: 600;
  transition: all 0.3s ease;
}


.creativa-btn-ingresar:hover {
  background: #3b82f6;
  /* azul más claro al hover */
  color: #000;
  /* texto negro en hover */
  box-shadow: inset 4px 4px 8px #d1d5db, inset -4px -4px 8px #ffffff;
}

/* ===== Toggle móvil ===== */
.creativa-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 28px;
  height: 20px;
  background: none;
  border: none;
  cursor: pointer;
}

.creativa-toggle span {
  display: block;
  height: 3px;
  background: #1e3a8a;
  border-radius: 2px;
  transition: all 0.3s ease;
  box-shadow: 2px 2px 4px #d1d5db,
    -2px -2px 4px #ffffff;
}

/* Animación de X */
.creativa-toggle.open span:nth-child(1) {
  transform: rotate(45deg) translateY(7px);
}

.creativa-toggle.open span:nth-child(2) {
  opacity: 0;
}

.creativa-toggle.open span:nth-child(3) {
  transform: rotate(-45deg) translateY(-7px);
}

/* ===== Responsive ===== */
@media (max-width: 992px) {
  .creativa-links {
    position: fixed;
    top: 0;
    right: -100%;
    width: 70%;
    height: 100vh;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    flex-direction: column;
    align-items: flex-start;
    padding: 8rem 2rem 4rem;
    gap: 1.8rem;
    transition: right 0.4s ease;
  }

  .creativa-links.show {
    right: 0;
  }

  .creativa-toggle {
    display: flex;
  }

  .creativa-dropdown-menu {
    position: static;
    display: none;
    background: none;
    box-shadow: none;
    padding-left: 1rem;
  }

  .creativa-dropdown.open .creativa-dropdown-menu {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
  }
}

/* Mostrar nombre solo en móviles */
#nombre_institucion_5 {
  display: block;
  /* por defecto oculto */
  font-size: 16px;
  font-weight: bold;
  color: #1e3a8a;
  margin-left: 10px;
}

/* Responsive */
@media (max-width: 992px) {
  .creativa-container {
    display: flex;
    justify-content: space-between;
    /* logo a la izquierda, toggle a la derecha */
    align-items: center;
    gap: 10px;
    /* opcional, espacio entre elementos */
  }

  #nombre_institucion_5 {
    display: inline-block;
    flex: 1;
    /* ocupa todo el espacio disponible */
    text-align: center;
    /* opcional, centra el texto */
    margin: 0 2rem;
    /* margen izquierdo/derecho */
  }

  /* Menú móvil tradicional */
  .creativa-links {
    top: 0;
    right: -100%;
    width: 250px;
    /* más tradicional, tipo sidebar */
    height: 100vh;
    background: #fff;
    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.2);
    flex-direction: column;
    padding: 4rem 1rem;
    gap: 1rem;
    transition: right 0.4s ease;
  }

  .creativa-links li {
    width: 100%;
  }

  .creativa-links a {
    display: block;
    width: 100%;
    padding: 12px 16px;
    border-radius: 6px;
    box-shadow: none;
    /* más simple */
  }

  .creativa-links a:hover {
    background: #e5e7eb;
    color: #1e3a8a;
  }

  /* Dropdown en móvil */
  .creativa-dropdown-menu {
    display: none;
    flex-direction: column;
    padding-left: 1rem;
  }

  .creativa-dropdown.open .creativa-dropdown-menu {
    display: flex;
  }

  /* Cambiar hamburguesa a X al abrir */
  .creativa-toggle.open span:nth-child(1) {
    transform: rotate(45deg) translateY(7px);
  }

  .creativa-toggle.open span:nth-child(2) {
    opacity: 0;
  }

  .creativa-toggle.open span:nth-child(3) {
    transform: rotate(-45deg) translateY(-7px);
  }



}

/* Overlay detrás del menú */
#overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  z-index: 900;
}

/* Mostrar overlay cuando el menú está abierto */
#overlay.show {
  display: block;
}

/* Botón cerrar sidebar */
.sidebar-close-btn {
  display: none;
  /* solo en móvil */
  width: 100%;
  text-align: right;
  margin-bottom: 1rem;
}

#sidebar-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  font-weight: bold;
  cursor: pointer;
  color: #1e3a8a;
}

/* Solo mostrar en móviles */
@media (max-width: 992px) {
  .sidebar-close-btn {
    display: block;
  }
}

@media (max-width: 992px) {
  .creativa-links {
    overflow-y: auto;
    /* Permite desplazamiento vertical */
    max-height: 100vh;
    /* Limita la altura al tamaño de la pantalla */
    scrollbar-width: thin;
    /* Estilo del scroll en navegadores compatibles */
    scrollbar-color: #1e3a8a #e5e7eb;
    /* Colores del scroll */
  }

  /* Opcional: mejora visual del scroll en navegadores basados en WebKit */
  .creativa-links::-webkit-scrollbar {
    width: 8px;
  }

  .creativa-links::-webkit-scrollbar-track {
    background: #e5e7eb;
    border-radius: 10px;
  }

  .creativa-links::-webkit-scrollbar-thumb {
    background-color: #1e3a8a;
    border-radius: 10px;
  }
}

/* ========== ELEGANTE_1 (COLORES DINÁMICOS) ========== */
:root {
  --elegante1-color-primario: #0d47a1;
  --elegante1-color-secundario: #1565c0;
  --elegante1-color-terciario: #e3f2fd;
  --elegante1-color-hover: #e3f2fd;
  --elegante1-link-color: #ffffff;
  --elegante1-link-hover: #e3f2fd;
  --elegante1-submenu-bg: var(--elegante1-color-terciario);
  --elegante1-submenu-hover: var(--elegante1-color-primario);
  --elegante1-btn-bg: var(--elegante1-color-primario);
  --elegante1-btn-bg-hover: var(--elegante1-color-secundario);
  --elegante1-banner-bg: var(--elegante1-color-secundario);
  --elegante1-banner-text: #ffffff;
}

/* ======== Reset ======== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ======== Banner Superior ======== */
.banner-superior {
  background-color: var(--elegante1-banner-bg);
  color: var(--elegante1-banner-text);
  font-family: 'Merriweather', serif;
  font-size: 0.9rem;
  padding: 0.5rem 0;
  transition: background 0.3s ease, color 0.3s ease;
}

.banner-contenedor {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.banner-contacto {
  display: flex;
  gap: 1.5rem;
  font-weight: 500;
}

/* ======== Navbar ======== */
.navbar-institucional {
  background-color: var(--elegante1-color-primario);
  border-bottom: 3px solid var(--elegante1-color-secundario);
  font-family: 'Poppins', sans-serif;
  transition: background 0.4s ease, box-shadow 0.4s ease;
  position: relative;
  z-index: 100;
}

.navbar-institucional.scrolled {
  background-color: var(--elegante1-color-secundario);
}

.navbar-contenedor {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0.7rem 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Logo */
.navbar-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: var(--elegante1-link-color);
  font-weight: 700;
  font-size: 1.1rem;
  gap: 10px;
}

/* Links */
.navbar-links {
  list-style: none;
  display: flex;
  gap: 1rem;
}

.navbar-links li {
  position: relative;
}

.navbar-links a {
  text-decoration: none;
  color: var(--elegante1-link-color);
  font-weight: 600;
  padding: 0.5rem 0.8rem;
  display: block;
  transition: background 0.3s, color 0.3s, transform 0.18s;
}

.navbar-links a:hover,
.navbar-links a.active {
  background-color: var(--elegante1-color-hover);
  color: var(--elegante1-link-hover);
  border-radius: 4px;
}

/* Dropdown / Submenu */
.submenu {
  display: none;
  position: absolute;
  background: var(--elegante1-submenu-bg);
  border: 1px solid rgba(0, 0, 0, 0.06);
  top: 100%;
  left: 0;
  min-width: 220px;
  list-style: none;
  z-index: 1200;
  padding: 0.35rem 0;
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(16, 24, 40, 0.08);
  backdrop-filter: blur(6px);
}

.navbar-dropdown:hover .submenu {
  display: block;
}

.submenu li a {
  padding: 0.55rem 1rem;
  display: block;
  color: var(--elegante1-link-color);
  background: transparent;
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
  border-radius: 6px;
}

.submenu li a:hover {
  color: var(--elegante1-link-hover);
  background-color: var(--elegante1-submenu-hover);
  transform: translateY(-1px);
}

/* Botón ingresar */
.btn-ingresar {
  background: var(--elegante1-btn-bg);
  color: var(--elegante1-link-color) !important;
  border-radius: 4px;
  padding: 0.5rem 1rem;
  transition: background 0.3s;
}

.btn-ingresar:hover {
  background: var(--elegante1-btn-bg-hover);
}

/* ======== Móvil ======== */
.navbar-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.8rem;
  color: var(--elegante1-link-color);
  cursor: pointer;
}

@media (max-width: 992px) {
  .banner-contenedor {
    flex-direction: column;
    text-align: center;
    gap: 0.4rem;
  }

  .navbar-toggle {
    display: block;
  }

  .navbar-links {
    position: absolute;
    top: 100%;
    left: 0;
    background: linear-gradient(135deg,
        var(--elegante1-color-primario),
        var(--elegante1-color-secundario));
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    padding: 1rem;
    border-top: 2px solid var(--elegante1-color-secundario);
    display: none;
  }

  .navbar-links.show {
    display: flex;
  }

  .navbar-links a {
    width: 100%;
    padding: 0.7rem;
    color: var(--elegante1-link-color);
  }

  .navbar-links a:hover {
    background: var(--elegante1-color-hover);
    color: var(--elegante1-link-hover);
  }

  .submenu {
    position: static;
    border: none;
    background: var(--elegante1-color-terciario);
    padding-left: 1rem;
  }
}

/* Ocultar contacto en pantallas pequeñas */
#telefono_banner_6,
#email_banner_6 {
  display: none;
}

/* Mostrar contacto en pantallas grandes */
@media (min-width: 1440px) {

  #telefono_banner_6,
  #email_banner_6 {
    display: inline;
  }
}

/* ======== GENERAL ======== */
/* ========== FORMAL_1 ========== */
/* ======== RESET ======== */
/* ========== FORMAL_1 (COLORES DINÁMICOS) ========== */
/* ========== FORMAL_1 (COLORES DINÁMICOS IGUAL A ELEGANTE_1) ========== */
:root {
  --formal1-color-primario: #0d47a1;
  --formal1-color-secundario: #1565c0;
  --formal1-color-terciario: #e3f2fd;
  --formal1-color-hover: #e3f2fd;
  --formal1-link-color: #ffffff;
  --formal1-link-hover: #e3f2fd;
  --formal1-submenu-bg: var(--formal1-color-terciario);
  --formal1-submenu-hover: var(--formal1-color-primario);
  --formal1-btn-bg: var(--formal1-color-primario);
  --formal1-btn-bg-hover: var(--formal1-color-secundario);
  --formal1-banner-bg: var(--formal1-color-secundario);
  --formal1-banner-text: #ffffff;
}

/* ======== Reset ======== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ======== Banner Superior ======== */
.formal_1-banner-superior {
  background-color: var(--formal1-banner-bg);
  color: var(--formal1-banner-text);
  font-family: 'Merriweather', serif;
  font-size: 0.9rem;
  padding: 0.5rem 0;
  transition: background 0.3s ease, color 0.3s ease;
}

.formal_1-banner-contenedor {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.formal_1-banner-contacto {
  display: flex;
  gap: 1.5rem;
  font-weight: 500;
}

/* ======== Navbar ======== */
.formal_1-navbar {
  background-color: var(--formal1-color-primario);
  border-bottom: 3px solid var(--formal1-color-secundario);
  font-family: 'Poppins', sans-serif;
  transition: background 0.4s ease, box-shadow 0.4s ease;
  position: relative;
  z-index: 100;
}

.formal_1-navbar.scrolled {
  background-color: var(--formal1-color-secundario);
}

.formal_1-navbar-contenedor {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0.7rem 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Logo */
.formal_1-navbar-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: var(--formal1-link-color);
  font-weight: 700;
  font-size: 1.1rem;
  gap: 10px;
}

/* Links */
.formal_1-navbar-links {
  list-style: none;
  display: flex;
  gap: 1rem;
}

.formal_1-navbar-links li {
  position: relative;
}

.formal_1-navbar-links a {
  text-decoration: none;
  color: var(--formal1-link-color);
  font-weight: 600;
  padding: 0.5rem 0.8rem;
  display: block;
  transition: background 0.3s, color 0.3s, transform 0.18s;
}

.formal_1-navbar-links a:hover,
.formal_1-navbar-links a.active {
  background-color: var(--formal1-color-hover);
  color: var(--formal1-link-hover);
  border-radius: 4px;
}

/* Dropdown / Submenu */
.formal_1-submenu {
  display: none;
  position: absolute;
  background: var(--formal1-submenu-bg);
  border: 1px solid rgba(0, 0, 0, 0.06);
  top: 100%;
  left: 0;
  min-width: 220px;
  list-style: none;
  z-index: 1200;
  padding: 0.35rem 0;
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(16, 24, 40, 0.08);
  backdrop-filter: blur(6px);
}

.formal_1-navbar-dropdown:hover .formal_1-submenu {
  display: block;
}

.formal_1-submenu li a {
  padding: 0.55rem 1rem;
  display: block;
  color: var(--formal1-link-color);
  background: transparent;
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
  border-radius: 6px;
}

.formal_1-submenu li a:hover {
  color: var(--formal1-link-hover);
  background-color: var(--formal1-submenu-hover);
  transform: translateY(-1px);
}

/* Botón ingresar */
.formal_1-btn-ingresar {
  background: var(--formal1-btn-bg);
  color: var(--formal1-link-color) !important;
  border-radius: 4px;
  padding: 0.5rem 1rem;
  transition: background 0.3s;
}

.formal_1-btn-ingresar:hover {
  background: var(--formal1-btn-bg-hover);
}

/* ======== Móvil ======== */
.formal_1-navbar-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.8rem;
  color: var(--formal1-link-color);
  cursor: pointer;
}

@media (max-width: 992px) {
  .formal_1-banner-contenedor {
    flex-direction: column;
    text-align: center;
    gap: 0.4rem;
  }

  .formal_1-navbar-toggle {
    display: block;
  }

  .formal_1-navbar-links {
    position: absolute;
    top: 100%;
    left: 0;
    background: linear-gradient(135deg,
        var(--formal1-color-primario),
        var(--formal1-color-secundario));
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    padding: 1rem;
    border-top: 2px solid var(--formal1-color-secundario);
    display: none;
  }

  .formal_1-navbar-links.show {
    display: flex;
  }

  .formal_1-navbar-links a {
    width: 100%;
    padding: 0.7rem;
    color: var(--formal1-link-color);
  }

  .formal_1-navbar-links a:hover {
    background: var(--formal1-color-hover);
    color: var(--formal1-link-hover);
  }

  .formal_1-submenu {
    position: static;
    border: none;
    background: var(--formal1-color-terciario);
    padding-left: 1rem;
  }
}

/* Ocultar contacto en pantallas pequeñas */
#telefono_banner_7,
#email_banner_7 {
  display: none;
}

/* Mostrar contacto en pantallas grandes */
@media (min-width: 1440px) {

  #telefono_banner_7,
  #email_banner_7 {
    display: inline;
  }
}

/* ======== Formal_2======== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

/* ======== VARIABLES DINÁMICAS ======== */
:root {
  --formal2-banner-gradient: linear-gradient(90deg, #0f172a, #2563eb);
  --formal2-banner-text: #f8fafc;
  --formal2-banner-border: #fde047;
  /* amarillo escolar */

  --formal2-navbar-bg: #1e293b;
  --formal2-navbar-text: #f1f5f9;
  --formal2-navbar-link-hover-bg: #2563eb;
  --formal2-navbar-link-hover-text: #fff;

  --formal2-submenu-bg: #2563eb;
  --formal2-submenu-hover-bg: #fde047;
  --formal2-submenu-hover-text: #0f172a;

  --formal2-btn-bg: #fde047;
  --formal2-btn-text: #0f172a;
  --formal2-btn-hover-bg: #fff;

  --formal2-logo-text: #fde047;

  --formal2-toggle-span: #fde047;

  --formal2-scroll-track: #0f172a;
  --formal2-scroll-thumb: #fde047;
}

/* ======== BANNER SUPERIOR ======== */
.banner-superior-formal_2 {
  background: var(--formal2-banner-gradient);
  color: var(--formal2-banner-text);
  padding: 1rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 4px solid var(--formal2-banner-border);
}

.banner-contenedor-formal_2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: 20px;
}

.navbar-logo-formal_2 {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--formal2-logo-text);
}

.navbar-logo-formal_2 img {
  height: 60px;
  border-radius: 12px;
  transition: all 0.3s ease;
}

.navbar-logo-formal_2 img:hover {
  transform: scale(1.1);
}

#nombre_institucion_8 {
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--formal2-banner-text);
  /* ✅ Usa el color del texto del banner */
  text-transform: uppercase;
  letter-spacing: 1px;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
}

/* ======== NAVBAR PRINCIPAL ======== */
.navbar-formal_2 {
  background: var(--formal2-navbar-bg);
  padding: 0.8rem 2rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 1200;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

/* Menú principal */
.navbar-links-formal_2 {
  list-style: none;
  display: flex;
  gap: 2rem;
  align-items: center;
}

.navbar-links-formal_2 li {
  position: relative;
}

.navbar-links-formal_2 a {
  color: var(--formal2-navbar-text);
  text-decoration: none;
  font-weight: 600;
  padding: 0.5rem 1rem;
  border-radius: 10px;
  transition: all 0.3s ease;
}

.navbar-links-formal_2 a:hover,
.navbar-links-formal_2 a.active {
  background: var(--formal2-navbar-link-hover-bg);
  color: var(--formal2-navbar-link-hover-text);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  transform: translateY(-2px);
}

/* ======== DROPDOWN ======== */
.navbar-dropdown-formal_2 {
  position: relative;
}

.submenu-formal_2 {
  position: absolute;
  top: 120%;
  left: 0;
  background: var(--formal2-submenu-bg);
  border-radius: 15px;
  padding: 0.8rem 0;
  display: none;
  flex-direction: column;
  min-width: 220px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
  z-index: 1000;
  transition: all 0.3s ease;
}

.submenu-formal_2 a {
  padding: 10px 18px;
  color: var(--formal2-banner-text);
  transition: all 0.3s ease;
}

.submenu-formal_2 a:hover {
  background: var(--formal2-submenu-hover-bg);
  color: var(--formal2-submenu-hover-text);
  border-radius: 10px;
}

.navbar-dropdown-formal_2:hover .submenu-formal_2,
.submenu-formal_2:hover {
  display: flex;
}

/* ======== BOTÓN INGRESAR ======== */
.btn-ingresar-formal_2 {
  background: var(--formal2-btn-bg);
  color: var(--formal2-btn-text) !important;
  padding: 8px 22px;
  border-radius: 30px;
  font-weight: 700;
  text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
}

.btn-ingresar-formal_2:hover {
  background: var(--formal2-btn-hover-bg);
  transform: scale(1.05);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);
}

/* ======== HAMBURGUESA ======== */
.navbar-toggle-formal_2 {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 38px;
  height: 30px;
  background: none;
  border: none;
  cursor: pointer;
  position: absolute;
  right: 2rem;
  z-index: 1300;
}

.navbar-toggle-formal_2 span {
  display: block;
  height: 4px;
  background: var(--formal2-toggle-span);
  border-radius: 3px;
  transition: all 0.3s ease;
}

.navbar-toggle-formal_2.open span:nth-child(1) {
  transform: rotate(45deg) translateY(7px);
}

.navbar-toggle-formal_2.open span:nth-child(2) {
  opacity: 0;
}

.navbar-toggle-formal_2.open span:nth-child(3) {
  transform: rotate(-45deg) translateY(-7px);
}

/* ======== RESPONSIVE ======== */
@media (max-width: 992px) {
  .navbar-links-formal_2 {
    position: fixed;
    top: 0;
    right: -100%;
    width: 75%;
    height: 100vh;
    background: var(--formal2-navbar-bg);
    flex-direction: column;
    align-items: flex-start;
    padding: 6rem 2rem;
    gap: 2rem;
    transition: right 0.5s ease;
    overflow-y: auto;
    max-height: 100vh;
    scrollbar-width: thin;
    scrollbar-color: var(--formal2-scroll-thumb) var(--formal2-scroll-track);
    z-index: 999;
  }

  .navbar-links-formal_2::-webkit-scrollbar {
    width: 8px;
  }

  .navbar-links-formal_2::-webkit-scrollbar-track {
    background: var(--formal2-scroll-track);
  }

  .navbar-links-formal_2::-webkit-scrollbar-thumb {
    background-color: var(--formal2-scroll-thumb);
    border-radius: 8px;
  }

  .navbar-links-formal_2.show {
    right: 0;
  }

  .navbar-toggle-formal_2 {
    display: flex;
  }

  .submenu-formal_2 {
    position: static;
    display: none;
    padding-left: 1rem;
  }

  .navbar-dropdown-formal_2.open .submenu-formal_2 {
    display: flex;
  }
}

/* ======== ESTRUCTURA GENERAL ======== */
#Formal_2 {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.banner-superior-formal_2,
.navbar-formal_2 {
  width: 100%;
}

/* =========================================================
   🌌 FUTURISTA_2 — versión idéntica en comportamiento a FUTURISTA_1
   ========================================================= */

/* =========================================================
   🌌 FUTURISTA_2 — Estilo completo actualizado
   ========================================================= */

:root {
  --futu2-navbar-bg: linear-gradient(135deg,
      rgba(0, 30, 70, 0.85),
      rgba(0, 70, 130, 0.85),
      rgba(0, 120, 180, 0.85),
      rgba(180, 200, 255, 0.85));
  --futu2-navbar-bg-scrolled: linear-gradient(135deg,
      rgba(0, 15, 50, 0.95),
      rgba(0, 60, 110, 0.95));
  --futu2-link-color: #ffffff;
  --futu2-link-hover-color: #ffd700;
  --futu2-dropdown-bg: rgba(0, 40, 90, 0.95);
  --futu2-dropdown-hover-color: #ffd700;
  --futu2-toggle-color: #ffffff;
  --futu2-logo-text: #ffffff;
  --futu2-nombre-text: #ffffff;
  --futu2-nombre-glow1: rgba(255, 255, 255, 0.7);
  --futu2-nombre-glow2: rgba(255, 215, 0, 0.5);
  --futu2-nombre-glow3: rgba(0, 180, 220, 0.8);
  --futu2-nombre-glow4: rgba(0, 180, 220, 0.6);
}

/* =========================================================
   🔹 NAVBAR PRINCIPAL
   ========================================================= */
#Futurista_2 {
  background: var(--futu2-navbar-bg);
  background-size: 600% 600%;
  animation: gradientMoveFutu2 12s ease infinite;
  transition: background-color 0.3s ease, padding 0.3s ease;
  padding: 1.4rem 2rem;
  /* 🔹 Más grueso */
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1050;
}

/* 🔸 Efecto al hacer scroll */
#Futurista_2.scrolled {
  background: var(--futu2-navbar-bg-scrolled);
  padding: 1rem 2rem;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

/* =========================================================
   🔹 LOGO
   ========================================================= */
#Futurista_2 .navbar-brand img {
  height: 48px;
  transition: transform 0.3s ease;
}

#Futurista_2.scrolled .navbar-brand img {
  transform: scale(0.95);
}

/* =========================================================
   🔹 NOMBRE DE LA INSTITUCIÓN
   ========================================================= */
#Futurista_2 .nombre-institucion_10 {
  color: var(--futu2-nombre-text);
  font-weight: 800;
  white-space: nowrap;
  text-shadow: 0 0 12px var(--futu2-nombre-glow1),
    0 0 20px var(--futu2-nombre-glow2);
  animation: glowFutu2 2.5s ease-in-out infinite alternate;
  margin-left: 1rem;
  font-size: 1.2rem;
  pointer-events: none;
}

/* =========================================================
   🔹 LINKS DEL NAVBAR
   ========================================================= */
#Futurista_2 .nav-link {
  color: var(--futu2-link-color);
  font-weight: 500;
  transition: color 0.3s ease, transform 0.2s ease;
  position: relative;
  padding: 0.5rem 1rem;
}

#Futurista_2 .nav-link:hover {
  color: var(--futu2-link-hover-color);
  transform: scale(1.05);
}

/* 🔸 Flechita de submenú */
#Futurista_2 .dropdown-toggle::after {
  content: " ▾";
  font-size: 0.75rem;
  color: var(--futu2-link-color);
  transition: transform 0.3s ease, color 0.3s ease;
}

#Futurista_2 .dropdown.show .dropdown-toggle::after {
  transform: rotate(180deg);
  color: var(--futu2-link-hover-color);
}

/* =========================================================
   🔹 SUBMENÚ
   ========================================================= */
#Futurista_2 .dropdown-menu {
  background: var(--futu2-dropdown-bg);
  border: none;
  border-radius: 10px;
  padding: 0.7rem 0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  transition: all 0.4s ease;
}

#Futurista_2 .dropdown-item {
  color: var(--futu2-link-color);
  padding: 0.6rem 1.2rem;
  transition: background 0.3s ease, color 0.3s ease;
}

#Futurista_2 .dropdown-item:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--futu2-dropdown-hover-color);
}

/* =========================================================
   🔹 BOTÓN HAMBURGUESA
   ========================================================= */
#Futurista_2 .navbar-toggler {
  border: none;
  outline: none;
}

#Futurista_2 .navbar-toggler-icon {
  filter: invert(1);
}

/* =========================================================
   🔹 SIDEBAR MÓVIL (pantallas pequeñas)
   ========================================================= */
@media (max-width: 991px) {
  #Futurista_2 .navbar-collapse.show {
    background: var(--futu2-dropdown-bg) !important;
    backdrop-filter: blur(8px) !important;
    position: fixed;
    top: 70px;
    /* Ajustado por navbar más grueso */
    left: 0;
    width: 100%;
    height: calc(100vh - 70px);
    padding: 2rem 1rem;
    z-index: 999;
    overflow-y: auto;
  }

  #Futurista_2 .nav-link {
    display: block;
    padding: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  #Futurista_2 .dropdown-menu {
    position: relative;
    box-shadow: none;
    background: rgba(0, 0, 0, 0.25);
  }
}

/* =========================================================
   ✨ ANIMACIONES
   ========================================================= */
@keyframes gradientMoveFutu2 {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

@keyframes glowFutu2 {
  from {
    text-shadow: 0 0 12px var(--futu2-nombre-glow3),
      0 0 20px var(--futu2-nombre-glow4);
  }

  to {
    text-shadow: 0 0 18px var(--futu2-nombre-glow2),
      0 0 30px var(--futu2-nombre-glow1);
  }
}

/* ---------- VARIABLES DE COLOR ---------- */
:root {
  --futurista3-bg-color: rgba(255, 255, 255, 0.05);
  --futurista3-border-color: rgba(255, 255, 255, 0.2);
  --futurista3-shadow-color: rgba(0, 0, 0, 0.2);
  --futurista3-scroll-bg: rgba(0, 0, 0, 0.3);
  --futurista3-link-color: #ffffff;
  --futurista3-link-hover: #ffd166;
  --futurista3-dropdown-bg: rgba(50, 50, 50, 0.95);
  --futurista3-dropdown-shadow: rgba(0, 0, 0, 0.25);
  --futurista3-mobile-bg: rgba(30, 30, 30, 0.95);
  --futurista3-text-shadow: rgba(255, 255, 255, 0.7);
  --futurista3-text-glow: rgba(255, 215, 150, 0.6);
}

/* ===========================
   🎇 NAVBAR PRINCIPAL
=========================== */
.futura-navbar {
  background: var(--futurista3-bg-color) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--futurista3-border-color);
  transition: background 0.3s ease, padding 0.3s ease;
  padding: 1rem 2rem;
  box-shadow: 0 2px 12px var(--futurista3-shadow-color);
  position: relative;
  z-index: 1000;
}

/* ---------- FLEX LOGO + MENÚ ---------- */
.futura-navbar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ---------- LOGO ---------- */
.futura-navbar-logo img {
  display: block;
  height: 42px;
  transition: transform 0.3s ease, filter 0.3s ease;
}

.futura-navbar-logo img:hover {
  transform: scale(1.05) rotate(-1deg);
  filter: brightness(1.2);
}

/* ---------- LINKS DEL MENÚ ---------- */
.futura-navbar .navbar-nav {
  display: flex;
  gap: 2rem;
  align-items: center;
}

.futura-link-nav {
  color: var(--futurista3-link-color) !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  transition: color 0.3s, transform 0.3s, text-shadow 0.3s;
}

.futura-link-nav:hover,
.futura-link-nav:focus,
.futura-link-nav:active,
.nav-link.show,
.nav-link.active {
  color: var(--futurista3-link-hover) !important;
  text-shadow: 0 0 6px var(--futurista3-link-hover),
    0 0 12px rgba(255, 255, 255, 0.4);
  transform: translateY(-2px);
  background: transparent !important;
}

/* ---------- EFECTO SCROLL ---------- */
.futura-navbar.scrolled {
  background: var(--futurista3-scroll-bg) !important;
  padding: 0.6rem 2rem;
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.3);
}

/* ---------- DROPDOWN ---------- */
.nav-item.dropdown .dropdown-menu {
  background-color: var(--futurista3-dropdown-bg) !important;
  border: none;
  backdrop-filter: blur(8px);
  box-shadow: 0 5px 20px var(--futurista3-dropdown-shadow);
  z-index: 1200;
}

.dropdown-menu a {
  color: var(--futurista3-link-color) !important;
  transition: color 0.2s, text-shadow 0.2s;
}

.dropdown-menu a:hover,
.dropdown-menu a:focus {
  color: var(--futurista3-link-hover) !important;
  text-shadow: 0 0 6px var(--futurista3-link-hover),
    0 0 12px rgba(255, 255, 255, 0.3);
  background: transparent !important;
}

/* ---------- BOTÓN HAMBURGUESA ---------- */
.navbar-toggler {
  border: none !important;
  color: var(--futurista3-link-color) !important;
  z-index: 1100;
}

.navbar-toggler:focus {
  box-shadow: none !important;
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba%28255,255,255,1%29' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
}

/* ===========================
   📱 MODO MÓVIL
=========================== */
@media (max-width: 991px) {
  .navbar-collapse.show {
    background: var(--futurista3-mobile-bg) !important;
    backdrop-filter: blur(8px);
    position: fixed;
    top: 60px;
    left: 0;
    width: 100%;
    height: calc(100vh - 60px);
    padding: 2rem 1rem;
    z-index: 999;
    box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.5);
  }

  .navbar-collapse.show .nav-link {
    color: var(--futurista3-link-color) !important;
    font-size: 1.3rem;
    display: block;
    margin: 1rem 0;
    text-align: center;
  }

  .navbar-collapse.show .nav-link:hover,
  .navbar-collapse.show .nav-link:focus,
  .navbar-collapse.show .nav-link.active {
    color: var(--futurista3-link-hover) !important;
    background: transparent !important;
    text-shadow: 0 0 8px var(--futurista3-link-hover),
      0 0 16px rgba(255, 255, 255, 0.3);
  }
}

/* ---------- NOMBRE DE INSTITUCIÓN ---------- */
.nombre-institucion_11 {
  transform: translate(-50%, -50%);
  color: var(--futurista3-link-color);
  font-size: 1.6rem;
  font-weight: 900;
  text-shadow: 0 0 6px var(--futurista3-text-shadow),
    0 0 12px rgba(255, 255, 255, 0.5);
  font-family: 'Poppins', sans-serif;
  pointer-events: none;
  z-index: 1050;
  white-space: nowrap;
  animation: glowInstitutionFuturista3 3s ease-in-out infinite alternate;
}

/* ---------- EFECTO DE BRILLO ---------- */
@keyframes glowInstitutionFuturista3 {
  0% {
    text-shadow: 0 0 6px var(--futurista3-text-shadow),
      0 0 12px rgba(255, 255, 255, 0.5);
  }

  50% {
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.9),
      0 0 18px var(--futurista3-text-glow);
  }

  100% {
    text-shadow: 0 0 6px var(--futurista3-text-shadow),
      0 0 12px rgba(255, 255, 255, 0.5);
  }
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 991px) {
  .nombre-institucion_11 {
    display: none;
  }
}

@media (max-width: 576px) {
  .nombre-institucion_11 {
    display: none;
  }
}

/* ===========================
   📱 CORRECCIÓN COLOR SIDEBAR DINÁMICO
=========================== */
@media (max-width: 991px) {
  #Futurista_3.navbar .navbar-collapse.show {
    background: var(--futurista3-mobile-bg) !important;
    backdrop-filter: blur(10px) !important;
    position: fixed !important;
    top: 60px !important;
    left: 0;
    width: 100%;
    height: calc(100vh - 60px);
    padding: 2rem 1rem;
    z-index: 9999;
    box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.5);
    transition: background 0.4s ease-in-out;
  }

  #Futurista_3.navbar .navbar-collapse.show .nav-link {
    color: var(--futurista3-link-color) !important;
  }

  #Futurista_3.navbar .navbar-collapse.show .nav-link:hover {
    color: var(--futurista3-link-hover) !important;
  }
}

/* ===========================
   🎇 NAVBAR PRINCIPAL (FIJO EN LA PARTE SUPERIOR)
=========================== */
.futura-navbar {
  background: var(--futurista3-bg-color) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--futurista3-border-color);
  transition: background 0.3s ease, padding 0.3s ease;
  padding: 1rem 2rem;
  box-shadow: 0 2px 12px var(--futurista3-shadow-color);

  /* 👇 NUEVO: Mantener el navbar siempre visible */
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1100;
  /* más alto que dropdown y sidebar */
}

/* Evita que el contenido quede debajo del navbar */
body {
  padding-top: 80px;
  /* Ajusta según la altura real del navbar */
}

/* ---------- EFECTO SCROLL (SUAVE, SIN OCULTAR EL NAVBAR) ---------- */
.futura-navbar.scrolled {
  background: var(--futurista3-scroll-bg) !important;
  padding: 0.6rem 2rem;
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(12px);
}

/* 🔧 Ajuste: cuando el sidebar se abre en móvil, no cubre el navbar */
@media (max-width: 991px) {
  .navbar-collapse.show {
    margin-top: 60px;
    /* separa el menú desplegado del navbar fijo */
  }
}

/* ================= Futurista_4 ================= */
/* ================= Futurista_4 ================= */
/* Variables globales */
:root {
  --futurista4-navbar-bg: rgba(20, 25, 35, 0.7);
  --futurista4-border-color: rgba(255, 215, 0, 0.3);
  --futurista4-link-color: #ffffff;
  --futurista4-link-hover: #ffd700;
  --futurista4-dropdown-bg: rgba(25, 25, 35, 0.95);
  --futurista4-navbar-scrolled-bg: rgba(10, 15, 25, 0.85);
  --futurista4-mobile-bg: rgba(30, 30, 40, 0.95);
  --futurista4-institucion-color: #ffd700;
}

/* Navbar elegante, moderna y sofisticada */
.futurista4-navbar {
  background: var(--futurista4-navbar-bg);
  backdrop-filter: blur(12px);
  border-bottom: 2px solid var(--futurista4-border-color);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
  padding: 1rem 2rem;
  transition: background 0.3s ease, padding 0.3s ease, box-shadow 0.3s ease;
}

/* Contenedor flex */
.futurista4-navbar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Logo elegante con hover */
.futurista4-navbar-logo img {
  height: 45px;
  transition: transform 0.3s ease, filter 0.3s ease;
}

.futurista4-navbar-logo img:hover {
  transform: scale(1.1) rotate(-2deg);
  filter: brightness(1.3);
}

/* Menú principal */
.futurista4-navbar .navbar-nav {
  display: flex;
  gap: 2.5rem;
  align-items: center;
}

/* Links sofisticados */
.futurista4-link-nav {
  color: var(--futurista4-link-color);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: color 0.3s, transform 0.3s, text-shadow 0.3s;
}

.futurista4-link-nav:hover {
  color: var(--futurista4-link-hover);
  text-shadow: 0 0 8px var(--futurista4-link-hover), 0 0 16px rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
}

/* Navbar scrolled */
.futurista4-navbar.scrolled {
  background: var(--futurista4-navbar-scrolled-bg);
  padding: 0.7rem 2rem;
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.4);
}

/* ===================
   🎨 SUBMENÚS
=================== */
.nav-item.dropdown .dropdown-menu {
  background-color: var(--futurista4-dropdown-bg);
  border: none;
  backdrop-filter: blur(10px);
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.35);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

/* Texto de submenús dinámico */
.nav-item.dropdown .dropdown-menu a {
  color: var(--futurista4-link-color);
  font-weight: 500;
  transition: color 0.25s ease, text-shadow 0.25s ease;
}

.nav-item.dropdown .dropdown-menu a:hover {
  color: var(--futurista4-link-hover);
  text-shadow: 0 0 10px var(--futurista4-link-hover), 0 0 18px rgba(255, 255, 255, 0.3);
}

/* Botón hamburguesa */
.navbar-toggler {
  border: none;
  color: var(--futurista4-link-color);
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba%28255, 255, 255, 1%29' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* ===================
   📱 MODO MÓVIL
=================== */
@media (max-width: 991px) {
  .navbar-collapse.show {
    background: var(--futurista4-mobile-bg);
    backdrop-filter: blur(10px);
    position: fixed;
    top: 60px;
    left: 0;
    width: 100%;
    height: calc(100vh - 60px);
    padding: 2rem 1rem;
    z-index: 999;
  }

  .navbar-collapse.show .nav-link {
    color: var(--futurista4-link-color);
    font-size: 1.3rem;
    display: block;
    margin: 1rem 0;
    text-align: center;
    transition: color 0.25s ease, text-shadow 0.25s ease;
  }

  .navbar-collapse.show .nav-link:hover {
    color: var(--futurista4-link-hover);
    text-shadow: 0 0 12px var(--futurista4-link-hover),
      0 0 25px rgba(255, 255, 255, 0.3);
  }
}

/* ===================
   🌟 NOMBRE INSTITUCIÓN
=================== */
.nombre-institucion_12 {
  position: absolute;
  top: 50%;
  left: 25%;
  transform: translate(-50%, -50%);
  color: var(--futurista4-institucion-color);
  font-size: 1.7rem;
  font-weight: 900;
  text-shadow: 0 0 8px var(--futurista4-institucion-color),
    0 0 16px rgba(255, 255, 255, 0.3);
  font-family: 'Poppins', sans-serif;
  pointer-events: none;
  z-index: 1050;
  white-space: nowrap;
  animation: glowInstitutionFuturista4 3s ease-in-out infinite alternate;
}

/* Glow animado */
@keyframes glowInstitutionFuturista4 {
  0% {
    text-shadow: 0 0 8px var(--futurista4-institucion-color),
      0 0 16px rgba(255, 255, 255, 0.3);
  }

  50% {
    text-shadow: 0 0 16px var(--futurista4-institucion-color),
      0 0 28px rgba(255, 255, 255, 0.4);
  }

  100% {
    text-shadow: 0 0 8px var(--futurista4-institucion-color),
      0 0 16px rgba(255, 255, 255, 0.3);
  }
}

/* Ocultar en pantallas pequeñas */
@media (max-width: 991px) {
  .nombre-institucion_12 {
    display: none;
  }
}

/* ===========================
   📱 CORRECCIÓN COLOR SIDEBAR DINÁMICO (FUTURISTA_4)
=========================== */
@media (max-width: 991px) {
  #Futurista_4.navbar .navbar-collapse.show {
    background: var(--futurista4-mobile-bg) !important;
    backdrop-filter: blur(10px) !important;
    position: fixed !important;
    top: 60px !important;
    left: 0;
    width: 100%;
    height: calc(100vh - 60px);
    padding: 2rem 1rem;
    z-index: 9999;
    box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.5);
    transition: background 0.4s ease-in-out;
  }

  #Futurista_4.navbar .navbar-collapse.show .nav-link {
    color: var(--futurista4-link-color) !important;
    font-size: 1.3rem;
    display: block;
    margin: 1rem 0;
    text-align: center;
  }

  #Futurista_4.navbar .navbar-collapse.show .nav-link:hover {
    color: var(--futurista4-link-hover) !important;
    text-shadow: 0 0 8px var(--futurista4-link-hover),
      0 0 16px rgba(255, 255, 255, 0.3);
  }
}

/* ===========================
   🎨 Submenús dinámicos (texto y hover)
=========================== */
#Futurista_4 .dropdown-menu {
  --submenu-text-color: var(--futurista4-link-color);
  --submenu-hover-color: var(--futurista4-link-hover);
}

#Futurista_4 .dropdown-menu a {
  color: var(--submenu-text-color);
  transition: color 0.25s ease, text-shadow 0.25s ease;
}

#Futurista_4 .dropdown-menu a:hover {
  color: var(--submenu-hover-color);
  text-shadow: 0 0 10px var(--submenu-hover-color), 0 0 18px rgba(255, 255, 255, 0.3);
}

/* ====================== FUTURISTA_5 ====================== */
/* Elegante - tonos grises con reflejo metálico dinámico */
:root {
  /* 🎨 Variables de color dinámicas */
  --futurista5-bg-1: rgba(30, 30, 30, 0.9);
  --futurista5-bg-2: rgba(60, 60, 60, 0.8);
  --futurista5-scroll-bg: rgba(25, 25, 25, 0.95);
  --futurista5-link-color: #e6e6e6;
  --futurista5-link-hover: #ffffff;
  --futurista5-link-underline: linear-gradient(90deg, #aaa, #fff, #aaa);
  --futurista5-dropdown-bg: rgba(40, 40, 40, 0.95);
  --futurista5-dropdown-link: #dcdcdc;
  --futurista5-dropdown-hover-bg: rgba(255, 255, 255, 0.05);
  --futurista5-dropdown-hover-color: #ffffff;
  --futurista5-border-color: rgba(255, 255, 255, 0.1);
  --futurista5-mobile-bg: rgba(20, 20, 20, 0.95);
  --futurista5-institucion-color: #f0f0f0;
  --futurista5-institucion-glow-1: rgba(255, 255, 255, 0.4);
  --futurista5-institucion-glow-2: rgba(200, 200, 255, 0.8);
}

/* 🌈 Navbar principal */
.futurista5-navbar {
  background: linear-gradient(120deg, var(--futurista5-bg-1), var(--futurista5-bg-2));
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--futurista5-border-color);
  animation: sutilMetal 10s ease-in-out infinite alternate;
  padding: 1rem 2rem;
  transition: all 0.4s ease;
}

@keyframes sutilMetal {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

/* Flex contenido */
.futurista5-navbar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Logo */
.futurista5-navbar-logo img {
  height: 45px;
  transition: transform 0.3s ease;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.2));
}

.futurista5-navbar-logo img:hover {
  transform: scale(1.05);
}

/* Enlaces */
.futurista5-link-nav {
  color: var(--futurista5-link-color);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  transition: all 0.3s ease;
  position: relative;
}

.futurista5-link-nav::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 0%;
  height: 2px;
  background: var(--futurista5-link-underline);
  transition: all 0.3s ease;
  transform: translateX(-50%);
}

.futurista5-link-nav:hover {
  color: var(--futurista5-link-hover);
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.8);
}

.futurista5-link-nav:hover::after {
  width: 80%;
}

/* Fondo más opaco al hacer scroll */
.futurista5-navbar.scrolled {
  background: var(--futurista5-scroll-bg);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  padding: 0.7rem 2rem;
}

/* ============================= */
/* 🎯 Submenús dinámicos */
/* ============================= */
.dropdown-menu {
  background: var(--futurista5-dropdown-bg);
  border: none;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
  border-radius: 8px;
}

.dropdown-menu a {
  color: var(--futurista5-link-color);
  /* ✅ Texto dinámico */
  font-weight: 500;
  transition: all 0.3s ease;
}

.dropdown-menu a:hover {
  background: var(--futurista5-dropdown-hover-bg);
  color: var(--futurista5-link-hover);
  /* ✅ Hover dinámico */
}

/* ============================= */
/* 📱 Móvil y sidebar */
/* ============================= */
.navbar-toggler {
  border: none;
  background: transparent;
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba%28255,255,255,0.9%29' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

@media (max-width: 991px) {
  .navbar-collapse.show {
    background: var(--futurista5-mobile-bg);
    backdrop-filter: blur(8px);
    position: fixed;
    top: 65px;
    left: 0;
    width: 100%;
    height: calc(100vh - 65px);
    text-align: center;
    padding-top: 2rem;
  }

  .futurista5-link-nav,
  .dropdown-menu a {
    color: var(--futurista5-link-color);
    /* ✅ Color dinámico en móvil */
  }

  .futurista5-link-nav:hover,
  .dropdown-menu a:hover {
    color: var(--futurista5-link-hover);
    /* ✅ Hover dinámico en móvil */
  }

  .futurista5-link-nav {
    display: block;
    margin: 1.2rem 0;
    font-size: 1.2rem;
  }
}

/* 🏛️ Nombre Institución */
/* 🏛️ Nombre Institución (Futurista 6) */
.nombre-institucion_13 {
  color: var(--futurista6-institucion-color, #fff);
  font-weight: 800;
  font-size: 1.6rem;
  letter-spacing: 1px;
  text-shadow: 0 0 10px var(--futurista6-institucion-glow, rgba(255, 255, 255, 0.6));
  animation: sutilGlow 3s ease-in-out infinite alternate;
}

/* ✨ Efecto de brillo suave */
@keyframes sutilGlow {
  from {
    text-shadow: 0 0 6px var(--futurista6-institucion-glow, rgba(255, 255, 255, 0.4));
  }

  to {
    text-shadow: 0 0 14px var(--futurista6-institucion-glow, rgba(255, 255, 255, 0.9));
  }
}


/* Ocultar en pantallas pequeñas */
@media (max-width: 768px) {
  .nombre-institucion_13 {
    display: none;
  }
}

/* Sidebar mobile background + texto dinámico */
#Futurista_5.navbar .navbar-collapse.show {
  background: var(--futurista5-mobile-bg, var(--futurista5-navbar-bg)) !important;
}

#Futurista_5.navbar .navbar-collapse.show a.nav-link,
#Futurista_5.navbar .navbar-collapse.show .dropdown-menu a {
  color: var(--futurista5-submenu-text, var(--futurista5-link-color)) !important;
  transition: color 0.25s ease, text-shadow 0.25s ease;
}

#Futurista_5.navbar .navbar-collapse.show a.nav-link:hover,
#Futurista_5.navbar .navbar-collapse.show .dropdown-menu a:hover {
  color: var(--futurista5-submenu-hover, var(--futurista5-link-hover)) !important;
  text-shadow: 0 0 10px var(--futurista5-submenu-hover, var(--futurista5-link-hover));
}

/* ---------- Enlaces de Navegación Futurista 6 (Dinámicos) ---------- */
.futurista6-link-nav {
  color: var(--futurista6-link-color, #333) !important;
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  position: relative;
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

/* Línea metálica inferior animada */
.futurista6-link-nav::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0%;
  height: 2px;
  background: var(--futurista6-link-underline, linear-gradient(90deg, #999, #ccc, #999));
  transition: width 0.4s ease, background 0.4s ease;
}

/* Hover dinámico */
.futurista6-link-nav:hover {
  color: var(--futurista6-link-hover, #000) !important;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
}

.futurista6-link-nav:hover::after {
  width: 100%;
}

/* ---------- Dropdown (submenús) ---------- */
#Futurista_6 .dropdown-menu {
  background: var(--futurista6-dropdown-bg, rgba(250, 250, 250, 0.95));
  border: none;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  z-index: 9999;
}

#Futurista_6 .dropdown-item {
  color: var(--futurista6-dropdown-text, #444);
  transition: all 0.3s ease;
}

#Futurista_6 .dropdown-item:hover {
  background: var(--futurista6-dropdown-hover-bg, linear-gradient(90deg, #eee, #ddd));
  color: var(--futurista6-dropdown-hover-text, #000);
}

/* ---------- Hamburguesa ---------- */
#Futurista_6 .navbar-toggler {
  border: none;
  background: none;
  z-index: 2000;
  position: relative;
}

#Futurista_6 .navbar-toggler-icon {
  width: 25px;
  height: 2px;
  background: var(--futurista6-hamburguer-line, linear-gradient(to right, #777, #ccc, #777));
  display: block;
  position: relative;
  transition: all 0.3s ease;
}

#Futurista_6 .navbar-toggler-icon::before,
#Futurista_6 .navbar-toggler-icon::after {
  content: "";
  position: absolute;
  width: 25px;
  height: 2px;
  background: var(--futurista6-hamburguer-line, linear-gradient(to right, #777, #ccc, #777));
  left: 0;
  transition: 0.3s;
}

#Futurista_6 .navbar-toggler-icon::before {
  top: -7px;
}

#Futurista_6 .navbar-toggler-icon::after {
  top: 7px;
}

/* ---------- Responsive ---------- */
@media (max-width: 992px) {
  .nombre-institucion_14 {
    font-size: 1.2rem;
  }

  .futurista6-link-nav {
    font-size: 1rem;
    text-align: center;
    color: var(--futurista6-link-color, #333) !important;
    transition: color 0.3s ease;
  }

  .futurista6-link-nav:hover {
    color: var(--futurista6-link-hover, #000) !important;
  }

  #Futurista_6 .navbar-collapse {
    background: var(--futurista6-sidebar-bg, linear-gradient(135deg, #f5f5f5 0%, #e0e0e0 40%, #fafafa 100%));
    border-radius: 12px;
    margin-top: 10px;
    padding: 1rem;
    z-index: 1500;
    position: relative;
  }
}


/* ================================================================
   🌌 FUTURISTA_7 — Estilo Profesional con Flecha Visible y Diferencia Clara
================================================================== */
/* ================================================================
   🌌 FUTURISTA_7 — Estilo Profesional con Flecha Visible y Diferencia Clara
================================================================== */

/* 🔧 Variables (inyectadas dinámicamente desde JS) */
:root {
  --futurista7-bg-color: #0b0f1a;
  --futurista7-link-color: #a3b9ff;
  --futurista7-link-hover: #5ae0ff;
  --futurista7-border-glow: rgba(90, 224, 255, 0.8);
  --futurista7-shadow: 0 0 25px rgba(90, 224, 255, 0.2);
  --futurista7-submenu-bg: rgba(15, 23, 42, 0.95);
}

/* ===== NAVBAR PRINCIPAL ===== */
#Futurista_7.navbar {
  background: var(--futurista7-bg-color);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--futurista7-border-glow);
  box-shadow: var(--futurista7-shadow);
  padding: 1.2rem 2.5rem;
  position: relative;
  z-index: 100;
  transition: all 0.35s ease;
}

/* ===== LOGO ===== */
#Futurista_7 .navbar-brand {
  display: flex;
  align-items: center;
  font-weight: 700;
  color: var(--futurista7-link-color);
  letter-spacing: 0.05em;
  transition: color 0.3s ease;
}

#Futurista_7 .navbar-brand:hover {
  color: var(--futurista7-link-hover);
}

/* ===== ENLACES ===== */
.futurista7-link-nav {
  color: var(--futurista7-link-color);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.8rem 1.3rem;
  margin: 0 0.5rem;
  position: relative;
  display: inline-flex;
  align-items: center;
  border-radius: 10px;
  transition: color 0.3s ease, transform 0.25s ease, background 0.3s ease;
}

/* ===== EFECTO LUMINOSO ===== */
.futurista7-link-nav::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 10px;
  background: linear-gradient(120deg,
      transparent 20%, var(--futurista7-border-glow) 50%, transparent 80%);
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: -1;
}

.futurista7-link-nav:hover {
  color: var(--futurista7-link-hover);
  transform: translateY(-2px);
  text-shadow: 0 0 10px var(--futurista7-link-hover);
}

.futurista7-link-nav:hover::after {
  opacity: 0.2;
}

/* ===== FLECHA DE SUBMENÚ (modo escritorio) ===== */
#Futurista_7 .dropdown-toggle::after {
  content: "▾";
  font-size: 0.8rem;
  margin-left: 0.4rem;
  color: var(--futurista7-link-color);
  transition: transform 0.3s ease, color 0.3s ease;
}

#Futurista_7 .dropdown-toggle:hover::after {
  color: var(--futurista7-link-hover);
  transform: rotate(180deg);
}

/* ===== SUBMENÚS ===== */
#Futurista_7 .dropdown-menu {
  background: var(--futurista7-submenu-bg);
  border: 1px solid var(--futurista7-border-glow);
  border-radius: 12px;
  padding: 0.8rem;
  box-shadow: 0 0 25px rgba(90, 224, 255, 0.15);
  backdrop-filter: blur(10px);
  transform: translateY(8px);
  opacity: 0;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

#Futurista_7 .dropdown:hover .dropdown-menu {
  opacity: 1;
  transform: translateY(0);
}

#Futurista_7 .dropdown-item {
  color: var(--futurista7-link-color);
  padding: 0.6rem 1rem;
  border-radius: 6px;
  transition: all 0.3s ease;
}

#Futurista_7 .dropdown-item:hover {
  color: var(--futurista7-link-hover);
  background: rgba(90, 224, 255, 0.12);
  transform: translateX(4px);
}

/* ===== MODO MÓVIL ===== */
@media (max-width: 992px) {
  #Futurista_7.navbar {
    padding: 1rem;
  }

  #Futurista_7 .navbar-collapse {
    background: var(--futurista7-bg-color);
    border-top: 1px solid var(--futurista7-border-glow);
    padding: 1rem 0;
  }

  .futurista7-link-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    margin: 0.4rem 0;
    font-size: 1rem;
    padding: 0.9rem 1.2rem;
    border-bottom: 1px solid rgba(90, 224, 255, 0.1);
    transition: background 0.3s ease;
  }

  /* 🔹 Diferencia clara para los que tienen submenú */
  #Futurista_7 .dropdown-toggle {
    background: rgba(90, 224, 255, 0.08);
    border-left: 3px solid var(--futurista7-border-glow);
    border-radius: 8px;
    font-weight: 700;
    position: relative;
  }

  /* 🔸 Flecha visible a la derecha */
  #Futurista_7 .dropdown-toggle::after {
    content: "▸";
    font-size: 1.1rem;
    color: var(--futurista7-link-hover);
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%) rotate(0);
    transition: transform 0.3s ease;
  }

  #Futurista_7 .dropdown.show .dropdown-toggle::after {
    transform: translateY(-50%) rotate(90deg);
  }

  /* Submenús */
  #Futurista_7 .dropdown-menu {
    position: static;
    opacity: 1;
    transform: none;
    background: var(--futurista7-bg-color);
    border: none;
    box-shadow: none;
    padding: 0.4rem 0 0.5rem 1.4rem;
    border-left: 2px solid rgba(90, 224, 255, 0.25);
  }

  #Futurista_7 .dropdown-item {
    font-size: 0.95rem;
    opacity: 0.9;
  }
}

/* ============================================================
   🎩 SOBRIO_1 (Versión con variables para personalización dinámica)
   ============================================================ */
#Sobrio_1.sobrio1-navbar {
  position: fixed;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 1200px;
  background: var(--sobrio1-navbar-bg, rgba(28, 45, 55, 0.85));
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--sobrio1-border-color, rgba(230, 220, 180, 0.4));
  border-bottom: 1px solid var(--sobrio1-border-color, rgba(230, 220, 180, 0.4));
  border-radius: 18px;
  padding: 1rem 2rem;
  box-shadow: var(--sobrio1-shadow, 0 4px 25px rgba(0, 0, 0, 0.35));
  transition: all 0.4s ease;
  z-index: 1050;
}

/* ---------- Efecto al hacer scroll ---------- */
#Sobrio_1.sobrio1-navbar.scrolled {
  background: var(--sobrio1-navbar-scrolled-bg, rgba(22, 35, 44, 0.95));
  border-top: 1px solid var(--sobrio1-border-scrolled, rgba(240, 230, 200, 0.5));
  border-bottom: 1px solid var(--sobrio1-border-scrolled, rgba(240, 230, 200, 0.5));
  padding: 0.7rem 1.5rem;
  box-shadow: var(--sobrio1-shadow-scrolled, 0 6px 30px rgba(0, 0, 0, 0.5));
}

/* ---------- Layout interno ---------- */
#Sobrio_1 .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ---------- Logo ---------- */
#Sobrio_1 .sobrio1-navbar-logo img {
  height: 42px;
  display: block;
  filter: brightness(1.1) contrast(1.1);
  transition: transform 0.3s ease, filter 0.3s ease;
}

#Sobrio_1 .sobrio1-navbar-logo:hover img {
  transform: scale(1.06);
  filter: brightness(1.3);
}

/* ---------- Menú ---------- */
#Sobrio_1 .navbar-nav {
  display: flex;
  gap: 2rem;
  align-items: center;
}

/* ---------- Links ---------- */
#Sobrio_1 .sobrio1-link-nav {
  color: var(--sobrio1-link-color, rgba(240, 240, 240, 0.9));
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  position: relative;
  transition: color 0.3s ease, transform 0.2s ease;
}

#Sobrio_1 .sobrio1-link-nav::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0%;
  height: 2px;
  background: var(--sobrio1-link-underline, linear-gradient(90deg, rgba(198, 173, 114, 0.7), rgba(240, 240, 240, 0.8)));
  transition: width 0.4s ease;
}

#Sobrio_1 .sobrio1-link-nav:hover {
  color: var(--sobrio1-link-hover, #e7d9a7);
  transform: translateY(-2px);
}

#Sobrio_1 .sobrio1-link-nav:hover::after {
  width: 100%;
  background: var(--sobrio1-link-hover-underline, linear-gradient(90deg, rgba(240, 230, 180, 0.8), rgba(255, 255, 255, 0.9)));
}

/* ---------- Dropdown ---------- */
#Sobrio_1 .nav-item.dropdown {
  position: relative;
}

#Sobrio_1 .dropdown-menu {
  background: var(--sobrio1-dropdown-bg, rgba(33, 50, 61, 0.97));
  border: 1px solid var(--sobrio1-dropdown-border, rgba(198, 173, 114, 0.2));
  border-radius: 12px;
  box-shadow: var(--sobrio1-dropdown-shadow, 0 8px 20px rgba(0, 0, 0, 0.5));
  margin-top: 12px;
  transition: all 0.3s ease;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 999;
  display: block;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
}

#Sobrio_1 .nav-item.dropdown:hover>.dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* ---------- Ítems del Dropdown ---------- */
#Sobrio_1 .dropdown-menu a {
  color: var(--sobrio1-dropdown-link, rgba(245, 245, 245, 0.9));
  text-transform: uppercase;
  font-size: 0.9rem;
  padding: 10px 20px;
  display: block;
  transition: background 0.3s ease, color 0.3s ease, transform 0.2s ease;
}

#Sobrio_1 .dropdown-menu a:hover {
  background: var(--sobrio1-dropdown-hover-bg, rgba(198, 173, 114, 0.1));
  color: var(--sobrio1-dropdown-hover-text, #f4e7b2);
  transform: translateX(4px);
}

/* ---------- Hamburguesa ---------- */
#Sobrio_1 .sobrio1-navbar-toggler {
  border: none;
  color: var(--sobrio1-toggler-color, white);
}

#Sobrio_1 .sobrio1-navbar-toggler:focus {
  box-shadow: none;
}

#Sobrio_1 .navbar-toggler-icon {
  width: 25px;
  height: 2px;
  background: var(--sobrio1-toggler-line, linear-gradient(to right, #d4cba8, #ffffff, #d4cba8));
  display: block;
  position: relative;
  transition: all 0.3s ease;
}

#Sobrio_1 .navbar-toggler-icon::before,
#Sobrio_1 .navbar-toggler-icon::after {
  content: "";
  position: absolute;
  width: 25px;
  height: 2px;
  background: var(--sobrio1-toggler-line, linear-gradient(to right, #d4cba8, #ffffff, #d4cba8));
  left: 0;
  transition: 0.3s;
}

#Sobrio_1 .navbar-toggler-icon::before {
  top: -7px;
}

#Sobrio_1 .navbar-toggler-icon::after {
  top: 7px;
}

/* ---------- Responsive ---------- */
@media (max-width: 992px) {
  #Sobrio_1.sobrio1-navbar {
    width: 95%;
    padding: 0.8rem 1.5rem;
    top: 20px;
  }

  #Sobrio_1 .navbar-collapse {
    background: var(--sobrio1-mobile-bg, rgba(25, 40, 50, 0.95));
    border-radius: 12px;
    margin-top: 10px;
    padding: 1rem;
  }

  #Sobrio_1 .sobrio1-link-nav {
    text-align: center;
    display: block;
  }

  #Sobrio_1 .dropdown-menu {
    position: static;
    box-shadow: none;
    border: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
}

/* ---------- Versión clara opcional ---------- */
body.light-mode #Sobrio_1.sobrio1-navbar {
  background: var(--sobrio1-light-bg, rgba(255, 255, 255, 0.9));
  border-top: 1px solid var(--sobrio1-light-border, rgba(190, 190, 190, 0.4));
  border-bottom: 1px solid var(--sobrio1-light-border, rgba(190, 190, 190, 0.4));
}

body.light-mode #Sobrio_1 .sobrio1-link-nav {
  color: var(--sobrio1-light-link, #2f3b44);
}

body.light-mode #Sobrio_1 .sobrio1-link-nav:hover {
  color: var(--sobrio1-light-hover, #a18b4c);
}

#Sobrio_1 .dropdown-toggle::after {
  display: none !important;
}

/* ========== SOBRIO_2 (Serenidad Azul — Tranquilidad y Fe) ========== */
/* /* ====================== SOBRIO_2 ====================== */
/* Serenidad Azul — Tranquilidad y Fe */
/* ====================== SOBRIO_2 ====================== */
/* Serenidad Azul — Tranquilidad y Fe */

:root {
  /* 🎨 Fondo navbar principal */
  --sobrio2-bg-navbar: rgba(230, 240, 255, 0.9);
  --sobrio2-bg-scroll: rgba(215, 230, 250, 0.95);

  /* 🎨 Bordes */
  --sobrio2-border-color: rgba(138, 166, 209, 0.4);
  --sobrio2-border-scroll: rgba(100, 130, 180, 0.5);

  /* 🎨 Links */
  --sobrio2-link-color: #1a2b4c;
  --sobrio2-link-hover: #4a6fbf;
  --sobrio2-link-underline: linear-gradient(90deg, rgba(100, 130, 200, 0.7), rgba(180, 210, 255, 0.8));

  /* 🎨 Dropdown */
  --sobrio2-dropdown-bg: rgba(225, 235, 255, 0.97);
  --sobrio2-dropdown-link: #1a2b4c;
  --sobrio2-dropdown-hover-bg: rgba(180, 210, 255, 0.3);
  --sobrio2-dropdown-hover-color: #305fbf;

  /* 🎨 Mobile sidebar */
  --sobrio2-mobile-bg: rgba(225, 235, 255, 0.98);

  /* 🎨 Navbar toggler (hamburguesa) */
  --sobrio2-toggler-color: #1a2b4c;
  --sobrio2-toggler-gradient: linear-gradient(to right, #6f8fc7, #a7bfe8, #6f8fc7);

  /* 🎨 Scrollbar móvil */
  --sobrio2-scrollbar-thumb: rgba(130, 160, 210, 0.7);

  /* 🎨 Dark mode */
  --sobrio2-dark-bg: rgba(30, 40, 70, 0.95);
  --sobrio2-dark-border: rgba(180, 200, 250, 0.3);
  --sobrio2-dark-link: rgba(255, 255, 255, 0.85);
  --sobrio2-dark-link-hover: #a7bfe8;
}

/* ---------- Navbar ---------- */
#Sobrio_2.sobrio2-navbar {
  position: fixed;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 1200px;
  background: var(--sobrio2-bg-navbar);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--sobrio2-border-color);
  border-bottom: 1px solid var(--sobrio2-border-color);
  border-radius: 16px;
  padding: 1rem 2rem;
  box-shadow: 0 4px 25px rgba(0, 40, 100, 0.2);
  transition: all 0.4s ease;
  z-index: 1050;
}

/* ---------- Efecto scroll ---------- */
#Sobrio_2.sobrio2-navbar.scrolled {
  background: var(--sobrio2-bg-scroll);
  border-color: var(--sobrio2-border-scroll);
  padding: 0.7rem 1.5rem;
  box-shadow: 0 6px 30px rgba(0, 50, 120, 0.25);
}

/* ---------- Layout interno ---------- */
#Sobrio_2 .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ---------- Logo ---------- */
#Sobrio_2 .sobrio2-navbar-logo img {
  height: 42px;
  display: block;
  filter: brightness(1.1) contrast(1.05);
  transition: transform 0.3s ease, filter 0.3s ease;
}

#Sobrio_2 .sobrio2-navbar-logo:hover img {
  transform: scale(1.06);
  filter: brightness(1.3);
}

/* ---------- Menú ---------- */
#Sobrio_2 .navbar-nav {
  display: flex;
  gap: 2rem;
  align-items: center;
}

/* ---------- Links ---------- */
#Sobrio_2 .sobrio2-link-nav {
  color: var(--sobrio2-link-color);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  position: relative;
  transition: color 0.3s ease, transform 0.2s ease;
}

#Sobrio_2 .sobrio2-link-nav::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0%;
  height: 2px;
  background: var(--sobrio2-link-underline);
  transition: width 0.4s ease;
}

#Sobrio_2 .sobrio2-link-nav:hover {
  color: var(--sobrio2-link-hover);
  transform: translateY(-2px);
}

#Sobrio_2 .sobrio2-link-nav:hover::after {
  width: 100%;
}

/* ---------- Dropdown ---------- */
#Sobrio_2 .nav-item.dropdown {
  position: relative;
}

#Sobrio_2 .dropdown-menu {
  background: var(--sobrio2-dropdown-bg);
  border: 1px solid var(--sobrio2-border-color);
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(0, 40, 100, 0.2);
  margin-top: 12px;
  transition: all 0.3s ease;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 999;
  display: block;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
}

#Sobrio_2 .nav-item.dropdown:hover>.dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

#Sobrio_2 .dropdown-menu a {
  color: var(--sobrio2-dropdown-link);
  text-transform: uppercase;
  font-size: 0.9rem;
  padding: 10px 20px;
  display: block;
  transition: background 0.3s ease, color 0.3s ease, transform 0.2s ease;
}

#Sobrio_2 .dropdown-menu a:hover {
  background: var(--sobrio2-dropdown-hover-bg);
  color: var(--sobrio2-dropdown-hover-color);
  transform: translateX(4px);
}

/* ---------- Hamburguesa ---------- */
#Sobrio_2 .sobrio2-navbar-toggler {
  border: none;
  color: var(--sobrio2-toggler-color);
}

#Sobrio_2 .sobrio2-navbar-toggler:focus {
  box-shadow: none;
}

#Sobrio_2 .navbar-toggler-icon,
#Sobrio_2 .navbar-toggler-icon::before,
#Sobrio_2 .navbar-toggler-icon::after {
  width: 25px;
  height: 2px;
  background: var(--sobrio2-toggler-gradient);
  display: block;
  position: relative;
  transition: all 0.3s ease;
}

#Sobrio_2 .navbar-toggler-icon::before {
  content: "";
  position: absolute;
  width: 25px;
  height: 2px;
  background: var(--sobrio2-toggler-gradient);
  left: 0;
  top: -7px;
  transition: 0.3s;
}

#Sobrio_2 .navbar-toggler-icon::after {
  content: "";
  position: absolute;
  width: 25px;
  height: 2px;
  background: var(--sobrio2-toggler-gradient);
  left: 0;
  top: 7px;
  transition: 0.3s;
}

/* ---------- Responsive ---------- */
@media (max-width: 992px) {
  #Sobrio_2.sobrio2-navbar {
    width: 95%;
    padding: 0.6rem 1rem;
    top: 10px;
  }

  #Sobrio_2 .navbar-collapse {
    background: var(--sobrio2-mobile-bg);
    border-radius: 10px;
    margin-top: 8px;
    padding: 0.6rem 0.8rem;
    max-height: 75vh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--sobrio2-scrollbar-thumb) transparent;
  }

  #Sobrio_2 .navbar-collapse::-webkit-scrollbar {
    width: 6px;
  }

  #Sobrio_2 .navbar-collapse::-webkit-scrollbar-thumb {
    background: var(--sobrio2-scrollbar-thumb);
    border-radius: 4px;
  }

  #Sobrio_2 .navbar-nav {
    flex-direction: column;
    gap: 0.5rem;
  }

  #Sobrio_2 .sobrio2-link-nav {
    font-size: 0.95rem;
    text-align: left;
    width: 100%;
    padding: 0.4rem 0.6rem;
  }

  #Sobrio_2 .dropdown-menu {
    position: static;
    box-shadow: none;
    border: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    background: var(--sobrio2-bg-navbar);
    padding-left: 1rem;
  }

  #Sobrio_2 .dropdown-menu a {
    padding: 6px 0;
    font-size: 0.9rem;
  }
}

/* ---------- Dark mode ---------- */
body.dark-mode #Sobrio_2.sobrio2-navbar {
  background: var(--sobrio2-dark-bg);
  border-color: var(--sobrio2-dark-border);
}

body.dark-mode #Sobrio_2 .sobrio2-link-nav {
  color: var(--sobrio2-dark-link);
}

body.dark-mode #Sobrio_2 .sobrio2-link-nav:hover {
  color: var(--sobrio2-dark-link-hover);
}

#Sobrio_2 .dropdown-toggle::after {
  display: none !important;
}

/* ========== SOBRIO_3 (Panel Institucional Izquierdo — Estructura y Elegancia) ========== */
/* =========================
   SOBRIO_3 – Navbar Institucional Profesional
   ========================= */
/* =========================
   SOBRIO_3 – Navbar Institucional Profesional Mejorado (Responsive)
   ========================= */

/* ---------- VARIABLES CSS DINÁMICAS ---------- */
:root {
  /* 🎨 Navbar */
  --sobrio3-bg-navbar: #ffffff;
  --sobrio3-border-navbar: #e5e5e5;
  --sobrio3-boxshadow-navbar: rgba(0, 0, 0, 0.06);

  /* 🎨 Logo */
  --sobrio3-logo-hover-transform: scale(1.05);

  /* 🎨 Links */
  --sobrio3-link-color: #2b2b2b;
  --sobrio3-link-hover-color: #b69336;
  --sobrio3-link-hover-bg: rgba(182, 147, 54, 0.1);

  /* 🎨 Dropdown */
  --sobrio3-dropdown-bg: #ffffff;
  --sobrio3-dropdown-border: #eee;
  --sobrio3-dropdown-shadow: rgba(0, 0, 0, 0.08);
  --sobrio3-dropdown-item-color: #333;
  --sobrio3-dropdown-item-hover-color: #b69336;
  --sobrio3-dropdown-item-hover-bg: #f4f4f4;

  /* 🎨 Hamburger */
  --sobrio3-toggler-bg: transparent;
  --sobrio3-toggler-bar-color: #2b2b2b;

  /* 🎨 Mobile */
  --sobrio3-mobile-bg: #ffffff;
  --sobrio3-mobile-border: #e5d9a7;
  --sobrio3-mobile-dropdown-bg: #fefcf5;
  --sobrio3-mobile-dropdown-border: #e5d9a7;
  --sobrio3-mobile-dropdown-item-hover-bg: rgba(182, 147, 54, 0.15);
}

/* =========================
   CSS BASE CON VARIABLES
========================= */

#Sobrio_3 {
  font-family: 'Poppins', sans-serif;
}

/* --- NAVBAR GENERAL --- */
#Sobrio_3.sobrio3-navbar {
  background-color: var(--sobrio3-bg-navbar) !important;
  border-bottom: 2px solid var(--sobrio3-border-navbar);
  box-shadow: 0 2px 8px var(--sobrio3-boxshadow-navbar);
  transition: all 0.3s ease-in-out;
}

/* --- LOGO --- */
#Sobrio_3 .sobrio3-navbar-logo img {
  height: 45px;
  transition: transform 0.3s ease;
}

#Sobrio_3 .sobrio3-navbar-logo img:hover {
  transform: var(--sobrio3-logo-hover-transform);
}

/* --- LINKS DE NAVEGACIÓN --- */
#Sobrio_3 .sobrio3-link-nav {
  color: var(--sobrio3-link-color) !important;
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.3px;
  padding: 0.5rem 1rem !important;
  transition: color 0.3s ease, background 0.3s ease;
}

#Sobrio_3 .sobrio3-link-nav:hover,
#Sobrio_3 .sobrio3-link-nav:focus {
  color: var(--sobrio3-link-hover-color) !important;
  background-color: var(--sobrio3-link-hover-bg);
  border-radius: 6px;
}

/* --- DROPDOWN MENÚS --- */
#Sobrio_3 .dropdown-menu {
  border-radius: 8px;
  border: 1px solid var(--sobrio3-dropdown-border);
  box-shadow: 0 5px 15px var(--sobrio3-dropdown-shadow);
  background-color: var(--sobrio3-dropdown-bg);
}

#Sobrio_3 .dropdown-item {
  color: var(--sobrio3-dropdown-item-color);
  font-size: 0.9rem;
  transition: background 0.3s ease, color 0.3s ease;
}

#Sobrio_3 .dropdown-item:hover {
  background-color: var(--sobrio3-dropdown-item-hover-bg);
  color: var(--sobrio3-dropdown-item-hover-color);
}

/* --- BOTÓN HAMBURGUESA --- */
#Sobrio_3 .sobrio3-navbar-toggler {
  border: none;
  background: var(--sobrio3-toggler-bg) !important;
}

#Sobrio_3 .navbar-toggler-icon {
  background-image: none !important;
  position: relative;
  width: 1.5rem;
  height: 1.5rem;
}

#Sobrio_3 .navbar-toggler-icon::before,
#Sobrio_3 .navbar-toggler-icon::after,
#Sobrio_3 .navbar-toggler-icon div {
  content: "";
  display: block;
  background-color: var(--sobrio3-toggler-bar-color);
  height: 2px;
  margin: 6px 0;
  border-radius: 2px;
  transition: all 0.3s;
}

#Sobrio_3 .sobrio3-navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before {
  transform: rotate(45deg) translateY(7px);
}

#Sobrio_3 .sobrio3-navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after {
  transform: rotate(-45deg) translateY(-7px);
}

#Sobrio_3 .sobrio3-navbar-toggler[aria-expanded="true"] .navbar-toggler-icon div {
  opacity: 0;
}

/* --- RESPONSIVE AJUSTES --- */
@media (max-width: 991px) {

  /* Menu colapsado con fondo y borde dinámicos */
  #Sobrio_3 .collapse.navbar-collapse {
    background-color: var(--sobrio3-mobile-bg);
    border: 1px solid var(--sobrio3-mobile-border);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    padding: 1rem;
  }

  /* Links visibles y legibles en móvil */
  #Sobrio_3 .sobrio3-link-nav {
    color: var(--sobrio3-link-color) !important;
    padding: 0.75rem 0 !important;
    text-align: center;
    font-weight: 500;
  }

  /* Dropdown menú móvil */
  #Sobrio_3 .dropdown-menu {
    background-color: var(--sobrio3-mobile-dropdown-bg);
    border: 1px solid var(--sobrio3-mobile-dropdown-border);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-radius: 6px;
    margin-top: 0.5rem;
  }

  #Sobrio_3 .dropdown-item {
    color: var(--sobrio3-dropdown-item-color);
    text-align: center;
  }

  #Sobrio_3 .dropdown-item:hover {
    color: var(--sobrio3-dropdown-item-hover-color);
    background-color: var(--sobrio3-mobile-dropdown-item-hover-bg);
  }

}

#Sobrio_3 .dropdown-toggle::after {
  display: none !important;
}

/* ========== SOBRIO_4 – Navbar Institucional Profesional (Variables Dinámicas) ========== */

:root {
  /* 🎨 Navbar general */
  --sobrio4-bg-navbar: #eef1f5;
  --sobrio4-border-navbar: #d0d4d9;

  /* 💫 Links */
  --sobrio4-link-color: #34495e;
  --sobrio4-link-hover-color: #7a8450;
  --sobrio4-link-hover-bg: rgba(122, 132, 80, 0.1);

  /* 🔽 Dropdown */
  --sobrio4-dropdown-bg: #ffffff;
  --sobrio4-dropdown-border: #d0d4d9;

  /* 🔹 Dropdown items */
  --sobrio4-dropdown-item-color: #34495e;
  --sobrio4-dropdown-item-hover-color: #7a8450;
  --sobrio4-dropdown-item-hover-bg: #e3e7ed;

  /* 📱 Mobile menu */
  --sobrio4-mobile-bg: rgba(238, 241, 245, 0.95);
  --sobrio4-mobile-border: #d0d4d9;
  --sobrio4-mobile-dropdown-bg: rgba(238, 241, 245, 0.95);
  --sobrio4-mobile-dropdown-border: #d0d4d9;

  /* 🔧 Hamburger bars */
  --sobrio4-toggler-bar-color: #7a8450;
}

#Sobrio_4 {
  font-family: 'Poppins', sans-serif;
}

/* --- NAVBAR GENERAL --- */
#Sobrio_4.sobrio4-navbar {
  background-color: var(--sobrio4-bg-navbar);
  border-bottom: 2px solid var(--sobrio4-border-navbar);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: all 0.3s ease-in-out;
  padding: 0.65rem 1rem;
  z-index: 1050;
  position: fixed;
  top: 30px;
  width: 100%;
}

/* --- CONTENEDOR --- */
#Sobrio_4 .container {
  max-width: 1200px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* --- LOGO --- */
#Sobrio_4 .sobrio4-navbar-logo img {
  height: 50px;
  transition: transform 0.3s ease;
}

#Sobrio_4 .sobrio4-navbar-logo img:hover {
  transform: scale(1.05);
}

/* --- LINKS DE NAVEGACIÓN --- */
#Sobrio_4 .sobrio4-link-nav {
  color: var(--sobrio4-link-color) !important;
  font-weight: 500;
  font-size: 0.95rem;
  padding: 0.5rem 1rem !important;
  border-radius: 8px;
  transition: all 0.3s ease;
}

#Sobrio_4 .sobrio4-link-nav:hover,
#Sobrio_4 .sobrio4-link-nav:focus {
  color: var(--sobrio4-link-hover-color) !important;
  background-color: var(--sobrio4-link-hover-bg);
}

/* --- DROPDOWN MENÚS --- */
#Sobrio_4 .dropdown-menu {
  border-radius: 12px;
  border: 1px solid var(--sobrio4-dropdown-border);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
  background-color: var(--sobrio4-dropdown-bg);
  padding: 0.4rem 0;
}

#Sobrio_4 .dropdown-item {
  color: var(--sobrio4-dropdown-item-color);
  font-size: 0.92rem;
  padding: 0.6rem 1.2rem;
  transition: background 0.3s ease, color 0.3s ease;
}

#Sobrio_4 .dropdown-item:hover {
  background-color: var(--sobrio4-dropdown-item-hover-bg);
  color: var(--sobrio4-dropdown-item-hover-color);
}

/* --- BOTÓN HAMBURGUESA --- */
#Sobrio_4 .sobrio4-navbar-toggler {
  border: none;
  background: transparent !important;
}

#Sobrio_4 .navbar-toggler-icon {
  background-image: none !important;
  position: relative;
  width: 1.5rem;
  height: 1.5rem;
}

#Sobrio_4 .navbar-toggler-icon::before,
#Sobrio_4 .navbar-toggler-icon::after,
#Sobrio_4 .navbar-toggler-icon div {
  content: "";
  display: block;
  background-color: var(--sobrio4-toggler-bar-color);
  height: 2px;
  margin: 5px 0;
  border-radius: 2px;
  transition: all 0.3s;
}

#Sobrio_4 .sobrio4-navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before {
  transform: rotate(45deg) translateY(6px);
}

#Sobrio_4 .sobrio4-navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after {
  transform: rotate(-45deg) translateY(-6px);
}

#Sobrio_4 .sobrio4-navbar-toggler[aria-expanded="true"] .navbar-toggler-icon div {
  opacity: 0;
}

/* --- RESPONSIVE AJUSTES --- */
@media (max-width: 991px) {
  #Sobrio_4.sobrio4-navbar {
    top: 0;
  }

  #Sobrio_4 .sobrio4-link-nav {
    text-align: center;
    padding: 0.75rem 1rem !important;
    color: var(--sobrio4-link-color);
  }

  #Sobrio_4 .dropdown-menu {
    text-align: center;
    border: none;
    box-shadow: none;
    background-color: var(--sobrio4-mobile-dropdown-bg);
    border-radius: 0;
    margin-top: 0.5rem;
  }

  #Sobrio_4 .dropdown-item:hover {
    background-color: var(--sobrio4-dropdown-item-hover-bg);
    color: var(--sobrio4-dropdown-item-hover-color);
  }

  #Sobrio_4 .navbar-collapse {
    background-color: var(--sobrio4-mobile-bg);
    padding: 1rem 0;
    border-top: 1px solid var(--sobrio4-mobile-border);
    max-height: 80vh;
    overflow-y: auto;
  }
}

#Sobrio_4 .dropdown-toggle::after {
  display: none !important;
}

/* ========== SOBRIO_5 – Navbar Profesional Transparente Adaptable Mejorado ========== */

:root {
  /* Navbar */
  --sobrio5-bg-navbar: rgba(255, 255, 255, 0.0);
  --sobrio5-border-navbar: rgba(200, 200, 200, 0.3);
  --sobrio5-box-shadow-navbar: rgba(0, 0, 0, 0.03);

  /* Links principales */
  --sobrio5-link-color: #6eb1f3;
  --sobrio5-link-hover-color: #a6b583;
  --sobrio5-link-hover-bg: rgba(122, 132, 80, 0.15);

  /* Icono hamburguesa */
  --sobrio5-toggler-bar-color: #3b4b5c;

  /* Dropdown */
  --sobrio5-dropdown-bg: rgba(255, 255, 255, 0.95);
  --sobrio5-dropdown-border: rgba(200, 200, 200, 0.3);
  --sobrio5-dropdown-box-shadow: rgba(0, 0, 0, 0.05);
  --sobrio5-dropdown-item-color: #3b4b5c;
  --sobrio5-dropdown-item-hover-color: #a6b583;
  --sobrio5-dropdown-item-hover-bg: rgba(122, 132, 80, 0.15);

  /* Mobile menu */
  --sobrio5-mobile-bg: rgba(255, 255, 255, 0.95);
  --sobrio5-mobile-border: rgba(200, 200, 200, 0.3);
}

/* ================= NAVBAR ================= */
#Sobrio_5.sobrio5-navbar {
  background-color: var(--sobrio5-bg-navbar);
  border-bottom: 2px solid var(--sobrio5-border-navbar);
  box-shadow: 0 2px 8px var(--sobrio5-box-shadow-navbar);
  transition: all 0.3s ease-in-out;
  padding: 0.65rem 1rem;
  z-index: 1050;
  position: fixed;
  top: 30px;
  width: 100%;
}

/* Responsive pequeñas pantallas */
@media (max-width: 991px) {
  #Sobrio_5.sobrio5-navbar {
    top: 0;
  }

  #Sobrio_5 .navbar-collapse {
    background-color: var(--sobrio5-mobile-bg);
    padding: 1rem 0;
    border-top: 1px solid var(--sobrio5-mobile-border);
    max-height: 80vh;
    overflow-y: auto;
  }
}

/* Contenedor */
#Sobrio_5 .container {
  max-width: 1200px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Logo */
#Sobrio_5 .sobrio5-navbar-logo img {
  height: 50px;
  transition: transform 0.3s ease, filter 0.3s ease;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15));
}

#Sobrio_5 .sobrio5-navbar-logo img:hover {
  transform: scale(1.05);
}

/* Links principales */
#Sobrio_5 .sobrio5-link-nav {
  color: var(--sobrio5-link-color);
  font-weight: 500;
  font-size: 0.95rem;
  padding: 0.5rem 1rem !important;
  border-radius: 8px;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.25), 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: all 0.3s ease;
}

#Sobrio_5 .sobrio5-link-nav:hover,
#Sobrio_5 .sobrio5-link-nav:focus {
  color: var(--sobrio5-link-hover-color) !important;
  background-color: var(--sobrio5-link-hover-bg);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

/* Icono hamburguesa */
#Sobrio_5 .navbar-toggler-icon::before,
#Sobrio_5 .navbar-toggler-icon::after,
#Sobrio_5 .navbar-toggler-icon div {
  background-color: var(--sobrio5-toggler-bar-color);
  height: 2px;
  margin: 5px 0;
  border-radius: 2px;
  transition: all 0.3s;
}

/* Dropdown */
#Sobrio_5 .dropdown-menu {
  border-radius: 12px;
  border: 1px solid var(--sobrio5-dropdown-border);
  box-shadow: 0 6px 18px var(--sobrio5-dropdown-box-shadow);
  background-color: var(--sobrio5-dropdown-bg);
  padding: 0.4rem 0;
}

#Sobrio_5 .dropdown-item {
  color: var(--sobrio5-dropdown-item-color);
  font-size: 0.92rem;
  padding: 0.6rem 1.2rem;
  transition: all 0.3s ease;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.2);
}

#Sobrio_5 .dropdown-item:hover {
  background-color: var(--sobrio5-dropdown-item-hover-bg);
  color: var(--sobrio5-dropdown-item-hover-color);
}

/* Responsive */
@media (max-width: 991px) {
  #Sobrio_5 .sobrio5-link-nav {
    text-align: center;
    padding: 0.75rem 1rem !important;
  }

  #Sobrio_5 .dropdown-menu {
    text-align: center;
    border: none;
    box-shadow: none;
    background-color: var(--sobrio5-mobile-bg);
    border-radius: 0;
    margin-top: 0.5rem;
  }

  #Sobrio_5 .dropdown-item:hover {
    background-color: rgba(122, 132, 80, 0.2);
    color: var(--sobrio5-dropdown-item-hover-color);
  }

  #Sobrio_5 .navbar-collapse {
    background-color: var(--sobrio5-mobile-bg);
    padding: 1rem 0;
    border-top: 1px solid var(--sobrio5-mobile-border);
  }
}

/* ================= NAVBAR BASE ================= */
#Sobrio_5.sobrio5-navbar {
  background-color: var(--sobrio5-bg-navbar);
  border-bottom: 2px solid var(--sobrio5-border-navbar);
  box-shadow: 0 2px 8px var(--sobrio5-box-shadow-navbar);
  transition: all 0.4s ease-in-out;
  padding: 0.65rem 1rem;
  z-index: 1050;
  position: fixed;
  top: 30px;
  width: 100%;
}

/* ================= SCROLLED STATE ================= */
#Sobrio_5.sobrio5-navbar.scrolled {
  background-color: var(--sobrio5-bg-navbar);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
  top: 0;
}

/* ================= LINKS ================= */
#Sobrio_5 .sobrio5-link-nav {
  color: var(--sobrio5-link-color);
  font-weight: 500;
  font-size: 0.95rem;
  padding: 0.5rem 1rem !important;
  border-radius: 8px;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.25),
    0 1px 2px rgba(0, 0, 0, 0.25);
  transition: all 0.3s ease;
}

#Sobrio_5 .sobrio5-link-nav:hover {
  color: var(--sobrio5-link-hover-color) !important;
  background-color: var(--sobrio5-link-hover-bg);
}

/* ================= RESPONSIVE ================= */
@media (max-width: 991px) {
  #Sobrio_5.sobrio5-navbar {
    top: 0;
  }

  #Sobrio_5 .navbar-collapse {
    background-color: var(--sobrio5-mobile-bg);
    border-top: 1px solid var(--sobrio5-mobile-border);
    border-radius: 0 0 12px 12px;
  }
}

#Sobrio_5 .dropdown-toggle::after {
  display: none !important;
}

/* ========== SOBRIO_6 – Navbar Escolar/Universidad Elegante ========== */
/* ========== SOBRIO_6 – Navbar Escolar/Universidad Elegante ========== */

#Sobrio_6.sobrio6-navbar {
  background: var(--sobrio6-bg-navbar, linear-gradient(to bottom, rgba(10, 32, 63, 0.9), rgba(10, 32, 63, 0.8)));
  border-bottom: 2px solid var(--sobrio6-border-navbar, rgba(255, 215, 0, 0.3));
  box-shadow: var(--sobrio6-box-shadow-navbar, 0 4px 15px rgba(0, 0, 0, 0.15));
  transition: all 0.4s ease-in-out;
  padding: 0.75rem 1.5rem;
  z-index: 1050;
  position: fixed;
  top: 30px;
  width: 100%;
  font-family: 'Poppins', sans-serif;
}

/* Navbar en móvil pegado arriba */
@media (max-width: 991px) {
  #Sobrio_6.sobrio6-navbar {
    top: 0;
  }

  #Sobrio_6 .navbar-collapse {
    background-color: var(--sobrio6-mobile-bg, rgba(10, 32, 63, 0.95));
    max-height: 80vh;
    overflow-y: auto;
    padding: 1rem 0;
    border-top: 1px solid var(--sobrio6-border-navbar, rgba(255, 215, 0, 0.3));
  }
}

/* Contenedor */
#Sobrio_6 .container {
  max-width: 1200px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Logo */
#Sobrio_6 .sobrio6-navbar-logo img {
  height: 55px;
  transition: transform 0.3s ease, filter 0.3s ease;
}

#Sobrio_6 .sobrio6-navbar-logo img:hover {
  transform: scale(1.1) rotate(-3deg);
}

/* Links principales */
#Sobrio_6 .sobrio6-link-nav {
  color: var(--sobrio6-link-color, #ffd700);
  font-weight: 600;
  font-size: 1rem;
  text-transform: uppercase;
  padding: 0.6rem 1.2rem !important;
  border-radius: 6px;
  transition: all 0.3s ease;
  letter-spacing: 0.5px;
}

#Sobrio_6 .sobrio6-link-nav:hover,
#Sobrio_6 .sobrio6-link-nav:focus {
  color: var(--sobrio6-link-hover-color, #ffffff) !important;
  background-color: var(--sobrio6-link-hover-bg, rgba(255, 215, 0, 0.2));
  box-shadow: var(--sobrio6-link-hover-shadow, 0 0 12px rgba(255, 215, 0, 0.5));
  transform: translateY(-2px);
}

/* Icono hamburguesa moderno */
#Sobrio_6 .navbar-toggler-icon::before,
#Sobrio_6 .navbar-toggler-icon::after,
#Sobrio_6 .navbar-toggler-icon div {
  background-color: var(--sobrio6-toggler-color, #ffd700);
  height: 3px;
  margin: 6px 0;
  border-radius: 2px;
  transition: all 0.4s ease;
}

#Sobrio_6 .sobrio6-navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before {
  transform: rotate(45deg) translate(5px, 5px);
}

#Sobrio_6 .sobrio6-navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after {
  transform: rotate(-45deg) translate(5px, -5px);
}

#Sobrio_6 .sobrio6-navbar-toggler[aria-expanded="true"] .navbar-toggler-icon div {
  opacity: 0;
}

/* Dropdown menú */
#Sobrio_6 .dropdown-menu {
  border-radius: 12px;
  border: none;
  box-shadow: var(--sobrio6-dropdown-shadow, 0 8px 20px rgba(0, 0, 0, 0.25));
  background: var(--sobrio6-dropdown-bg, linear-gradient(145deg, rgba(10, 32, 63, 0.95), rgba(15, 42, 80, 0.95)));
  padding: 0.5rem 0;
}

#Sobrio_6 .dropdown-item {
  color: var(--sobrio6-dropdown-item-color, #ffd700);
  font-size: 0.95rem;
  padding: 0.7rem 1.5rem;
  transition: all 0.3s ease;
}

#Sobrio_6 .dropdown-item:hover {
  color: var(--sobrio6-dropdown-item-hover-color, #ffffff);
  background-color: var(--sobrio6-dropdown-item-hover-bg, rgba(255, 215, 0, 0.25));
  transform: translateX(5px);
}

/* Responsive */
@media (max-width: 991px) {
  #Sobrio_6 .sobrio6-link-nav {
    text-align: center;
    padding: 0.8rem 1.5rem !important;
  }

  #Sobrio_6 .dropdown-menu {
    text-align: center;
    border-radius: 0;
    margin-top: 0.5rem;
    box-shadow: none;
    background: var(--sobrio6-mobile-bg, rgba(10, 32, 63, 0.95));
  }

  #Sobrio_6 .dropdown-item:hover {
    background-color: var(--sobrio6-dropdown-item-hover-bg, rgba(255, 215, 0, 0.25));
    color: var(--sobrio6-dropdown-item-hover-color, #ffffff);
  }

  #Sobrio_6 .navbar-toggler-icon::before,
  #Sobrio_6 .navbar-toggler-icon::after,
  #Sobrio_6 .navbar-toggler-icon div {
    background-color: var(--sobrio6-toggler-color, #ffd700);
  }
}

#Sobrio_6 .dropdown-toggle::after {
  display: none !important;
}

/* ==========================================================
   🔷 SOBRIO_7 – Navbar profesional sin bugs visuales
   ========================================================== */

/* Variables base */
:root {
  --sobrio7-bg-navbar: #2c2c2c;
  --sobrio7-link-color: #e0e0e0;
  --sobrio7-link-hover: #ffffff;
  --sobrio7-dropdown-bg: #3a3a3a;
  --sobrio7-dropdown-item-color: #e0e0e0;
  --sobrio7-dropdown-item-hover-bg: #505050;
  --sobrio7-dropdown-item-hover-color: #ffffff;
  --sobrio7-bg-mobile: #2c2c2c;
}

/* === Navbar principal === */
#Sobrio_7.sobrio7-navbar {
  position: fixed;
  top: 0;
  width: 100%;
  padding: 0.75rem 1.5rem;
  z-index: 1050;
  background: var(--sobrio7-bg-navbar);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* === Logo === */
#Sobrio_7 .sobrio7-navbar-logo img {
  height: 45px;
  transition: transform 0.3s ease;
}

#Sobrio_7 .sobrio7-navbar-logo img:hover {
  transform: scale(1.05);
}

/* === Links === */
#Sobrio_7 .sobrio7-link-nav {
  color: var(--sobrio7-link-color) !important;
  font-weight: 500;
  padding: 0.6rem 1rem !important;
  transition: all 0.3s ease;
  text-transform: uppercase;
  font-size: 0.9rem;
}

#Sobrio_7 .sobrio7-link-nav:hover,
#Sobrio_7 .sobrio7-link-nav:focus {
  color: var(--sobrio7-link-hover) !important;
  transform: translateY(-1px);
}

/* === Dropdown === */
#Sobrio_7 .dropdown-menu {
  background: var(--sobrio7-dropdown-bg);
  border: none;
  border-radius: 10px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.3);
  padding: 0.5rem 0;
  animation: fadeDown 0.2s ease;
}

@keyframes fadeDown {
  from {
    opacity: 0;
    transform: translateY(5px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#Sobrio_7 .dropdown-item {
  color: var(--sobrio7-dropdown-item-color);
  padding: 0.7rem 1.5rem;
  transition: all 0.3s ease;
}

#Sobrio_7 .dropdown-item:hover {
  background: var(--sobrio7-dropdown-item-hover-bg);
  color: var(--sobrio7-dropdown-item-hover-color);
}

/* === Responsive === */
@media (max-width: 991px) {
  #Sobrio_7 .navbar-collapse {
    background: var(--sobrio7-bg-mobile);
    padding: 1rem;
    border-radius: 0 0 10px 10px;
  }
}

/* Fix para evitar azul o parpadeo */
#Sobrio_7 .nav-link:focus,
#Sobrio_7 .dropdown-toggle:focus,
#Sobrio_7 .dropdown-item:focus {
  outline: none !important;
  box-shadow: none !important;
  background: none !important;
}

/* Elimina la flecha por defecto de Bootstrap */
#Sobrio_7 .dropdown-toggle::after {
  display: none !important;
}

/* ========== ICON_1 – Navbar Profesional Gris Azulado + Letras Cristalinas + Redes Sociales ========== */
/* ========== ICON_1 – Navbar Profesional Gris Azulado + Letras Cristalinas + Redes Sociales ========== */
/* ========== ICON_1 – Navbar Profesional Gris Azulado con Letras Cristalinas + Redes Sociales ========== */

/* Variables dinámicas (para JS) */
:root {
  --icon1-bg-navbar: linear-gradient(270deg, #2c3e50, #34495e, #3d5a73, #34495e);
  --icon1-link-color: #a2c4d1;
  --icon1-link-hover-color: #ffffff;
  --icon1-link-hover-shadow: rgba(160, 200, 220, 0.4);
  --icon1-toggler-color: #c3d8e0;
}

/* Navbar principal */
#Icon_1.icon1-navbar {
  position: fixed;
  top: 20px;
  width: 100%;
  padding: 0.75rem 1.5rem;
  z-index: 1050;
  font-family: 'Poppins', sans-serif;
  border-radius: 12px;
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.25);
  background: var(--icon1-bg-navbar);
  background-size: 1000% 1000%;
  animation: icon1-gradientFlow 15s ease infinite;
}

/* Animación de gradiente */
@keyframes icon1-gradientFlow {
  0% {
    background-position: 0% 50%;
  }

  25% {
    background-position: 50% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  75% {
    background-position: 50% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

/* Contenedor interno */
#Icon_1 .icon1-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Logo */
#Icon_1 .icon1-navbar-logo img {
  height: 50px;
  transition: transform 0.3s ease, filter 0.3s ease;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.4));
}

#Icon_1 .icon1-navbar-logo img:hover {
  transform: scale(1.1) rotate(-2deg);
}

/* Links principales y redes sociales con efecto cristalino */
#Icon_1 .icon1-link {
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.5rem 1rem !important;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: linear-gradient(270deg, var(--icon1-link-color), #c3d8e0, #91b5c7, var(--icon1-link-color));
  background-size: 400% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: icon1-shineText 3s linear infinite;
  transition: all 0.3s ease;
}

@keyframes icon1-shineText {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

#Icon_1 .icon1-link:hover,
#Icon_1 .icon1-link:focus {
  transform: translateY(-2px);
  text-shadow: 0 0 8px rgba(195, 220, 230, 0.6),
    0 0 15px var(--icon1-link-hover-shadow);
}

/* Dropdown menú igual al navbar */
#Icon_1 .icon1-dropdown-menu {
  border-radius: 12px;
  border: none;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.35);
  background: var(--icon1-bg-navbar);
  padding: 0.5rem 0;
  max-height: 300px;
  overflow-y: auto;
}

/* Scroll interno del dropdown */
#Icon_1 .icon1-dropdown-menu::-webkit-scrollbar {
  width: 6px;
}

#Icon_1 .icon1-dropdown-menu::-webkit-scrollbar-thumb {
  background-color: rgba(195, 220, 230, 0.3);
  border-radius: 3px;
}

/* Items dropdown */
#Icon_1 .icon1-dropdown-item {
  color: var(--icon1-link-color);
  font-size: 0.95rem;
  padding: 0.7rem 1.5rem;
  transition: all 0.3s ease;
}

#Icon_1 .icon1-dropdown-item:hover {
  color: var(--icon1-link-hover-color);
  background-color: rgba(160, 200, 220, 0.15);
  transform: translateX(5px);
}

/* Icono hamburguesa */
#Icon_1 .icon1-toggler-icon::before,
#Icon_1 .icon1-toggler-icon::after,
#Icon_1 .icon1-toggler-icon div {
  background-color: var(--icon1-toggler-color);
  height: 3px;
  margin: 5px 0;
  border-radius: 2px;
  transition: all 0.4s ease;
}

#Icon_1 .icon1-navbar-toggler[aria-expanded="true"] .icon1-toggler-icon::before {
  transform: rotate(45deg) translate(5px, 5px);
}

#Icon_1 .icon1-navbar-toggler[aria-expanded="true"] .icon1-toggler-icon::after {
  transform: rotate(-45deg) translate(5px, -5px);
}

#Icon_1 .icon1-navbar-toggler[aria-expanded="true"] .icon1-toggler-icon div {
  opacity: 0;
}

/* Hover para iconos de redes sociales */
#Icon_1 .icon1-link i {
  transition: all 0.3s ease;
}

#Icon_1 .icon1-link:hover i {
  color: var(--icon1-link-hover-color) !important;
  transform: translateY(-2px);
  text-shadow: 0 0 6px rgba(160, 200, 220, 0.5),
    0 0 12px rgba(120, 180, 200, 0.3);
}

/* Responsive */
@media (max-width: 991px) {
  #Icon_1.icon1-navbar {
    top: 0;
    border-radius: 0;
  }

  #Icon_1 .icon1-navbar-collapse {
    background-color: var(--icon1-bg-navbar);
    max-height: 70vh;
    overflow-y: auto;
    padding: 1rem 0;
  }

  #Icon_1 .icon1-link,
  #Icon_1 .icon1-link i {
    text-align: center;
    padding: 0.8rem 1.5rem !important;
    display: block;
    margin: 0.3rem 0;
  }

  #Icon_1 .icon1-dropdown-menu {
    text-align: center;
    border-radius: 0;
    margin-top: 0.5rem;
    box-shadow: none;
    background: var(--icon1-bg-navbar);
    max-height: 60vh;
    overflow-y: auto;
  }

  #Icon_1 .icon1-dropdown-item:hover {
    background-color: rgba(160, 200, 220, 0.15);
    color: var(--icon1-link-hover-color);
  }
}

/* Hamburguesa personalizada */
#Icon_1 .icon1-toggler-icon {
  display: inline-block;
  width: 30px;
  height: 3px;
  background-color: var(--icon1-toggler-color);
  border-radius: 2px;
  position: relative;
  transition: all 0.4s ease;
}

#Icon_1 .icon1-toggler-icon::before,
#Icon_1 .icon1-toggler-icon::after {
  content: '';
  position: absolute;
  width: 30px;
  height: 3px;
  background-color: var(--icon1-toggler-color);
  border-radius: 2px;
  transition: all 0.4s ease;
}

#Icon_1 .icon1-toggler-icon::before {
  top: -10px;
}

#Icon_1 .icon1-toggler-icon::after {
  bottom: -10px;
}

#Icon_1 .icon1-navbar-toggler[aria-expanded="true"] .icon1-toggler-icon {
  background-color: transparent;
}

#Icon_1 .icon1-navbar-toggler[aria-expanded="true"] .icon1-toggler-icon::before {
  transform: rotate(45deg) translate(5px, 5px);
}

#Icon_1 .icon1-navbar-toggler[aria-expanded="true"] .icon1-toggler-icon::after {
  transform: rotate(-45deg) translate(5px, -5px);
}





/* Icon2 - Navbar clásico */
/* ================= ICON_2 – Navbar Profesional Claro con Colores Variables ================= */

/* Variables CSS */
:root {
  --icon2-bg-navbar: rgba(255, 255, 255, 0.95);
  --icon2-text-color: #333;
  --icon2-hover-color: #d4a017;
  --icon2-dropdown-bg: #f9f9f9;
  --icon2-dropdown-border: #ccc;
  --icon2-toggler-color: #333;
}

/* Navbar principal */
.icon2-navbar {
  background-color: var(--icon2-bg-navbar);
  transition: background-color 0.3s ease, padding 0.3s ease;
  padding: 1rem 2rem;
  font-family: 'Poppins', sans-serif;
  z-index: 1050;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* Flex: logo izquierda, menú derecha */
.icon2-navbar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Logo */
.icon2-navbar-logo img {
  display: block;
  height: 40px;
  transition: none;
}

/* Menú a la derecha */
.icon2-navbar .navbar-nav {
  display: flex;
  gap: 1.5rem;
  align-items: center;
}

/* Links */
.icon2-link-nav {
  color: var(--icon2-text-color);
  font-weight: 500;
  text-transform: none;
  transition: color 0.2s ease;
}

.icon2-link-nav:hover {
  color: var(--icon2-hover-color);
  transform: none;
}

/* Redes sociales */
.icon2-link {
  color: var(--icon2-text-color);
  transition: color 0.2s ease;
}

.icon2-link:hover {
  color: var(--icon2-hover-color);
  transform: none;
}

/* Fondo al hacer scroll */
.icon2-navbar.scrolled {
  background-color: var(--icon2-bg-navbar);
  padding: 0.6rem 2rem;
}

/* Dropdown */
.icon2-navbar .nav-item.dropdown .dropdown-menu {
  background-color: var(--icon2-dropdown-bg);
  border: 1px solid var(--icon2-dropdown-border);
  border-radius: 4px;
}

.icon2-navbar .dropdown-menu a {
  color: var(--icon2-text-color);
}

.icon2-navbar .dropdown-menu a:hover {
  color: var(--icon2-hover-color);
  background-color: transparent;
}

/* Botón hamburguesa */
.icon2-navbar-toggler {
  border: none;
  color: var(--icon2-toggler-color);
}

.icon2-navbar-toggler .navbar-toggler-icon {
  display: inline-block;
  width: 30px;
  height: 3px;
  background-color: transparent;
  position: relative;
}

.icon2-navbar-toggler .navbar-toggler-icon::before,
.icon2-navbar-toggler .navbar-toggler-icon::after,
.icon2-navbar-toggler .navbar-toggler-icon div {
  content: '';
  position: absolute;
  width: 30px;
  height: 3px;
  background-color: var(--icon2-toggler-color);
  border-radius: 2px;
  transition: all 0.4s ease;
}

.icon2-navbar-toggler .navbar-toggler-icon::before {
  top: -10px;
}

.icon2-navbar-toggler .navbar-toggler-icon::after {
  bottom: -10px;
}

.icon2-navbar-toggler[aria-expanded="true"] .navbar-toggler-icon div {
  opacity: 0;
}

.icon2-navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before {
  transform: rotate(45deg) translate(5px, 5px);
}

.icon2-navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* Móviles */
@media (max-width: 991px) {
  .icon2-navbar .navbar-collapse.show {
    background: var(--icon2-bg-navbar);
    position: fixed;
    top: 60px;
    left: 0;
    width: 100%;
    height: calc(100vh - 60px);
    padding: 2rem 1rem;
    z-index: 999;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .icon2-navbar .navbar-collapse.show .nav-link,
  .icon2-navbar .navbar-collapse.show .icon2-link {
    color: var(--icon2-text-color);
    font-size: 1.2rem;
    display: block;
    margin: 1rem 0;
    text-align: center;
  }

  .icon2-navbar .navbar-collapse.show .nav-link:hover,
  .icon2-navbar .navbar-collapse.show .icon2-link:hover {
    color: var(--icon2-hover-color);
  }

  /* Redes sociales dentro del menú */
  .navbar-redes {
    flex-direction: column;
    gap: 1rem;
    margin-top: 1rem;
  }

  .icon2-redes-link {
    font-size: 1.4rem;
    padding: 0.3rem;
  }
}

/* ======= SUBMENÚS VISIBLES EN MÓVILES ======= */
@media (max-width: 991px) {
  .icon2-navbar .dropdown-menu {
    position: static;
    /* evita que se salga del contenedor */
    display: none;
    background: rgba(33, 33, 33, 0.95);
    /* fondo oscuro translúcido */
    border: none;
    border-radius: 8px;
    padding: 0.5rem 0;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
  }

  /* Cuando se abre un dropdown */
  .icon2-navbar .nav-item.dropdown.open .dropdown-menu {
    display: block;
  }

  /* Enlaces dentro del submenú */
  .icon2-navbar .dropdown-menu a {
    color: #ffffff !important;
    /* letras blancas para contraste */
    padding: 0.8rem 1rem;
    text-align: center;
    font-size: 1rem;
  }

  .icon2-navbar .dropdown-menu a:hover {
    color: #d4a017 !important;
    /* dorado al pasar el mouse */
    background-color: rgba(255, 255, 255, 0.1);
  }
}

/* ======= SUBMENÚS VISIBLES Y LEGIBLES EN MÓVILES ======= */
@media (max-width: 991px) {
  .icon2-navbar .dropdown-menu {
    position: static !important;
    display: none;
    background: rgba(255, 255, 255, 0.95);
    /* fondo blanco translúcido */
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 0.5rem 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }

  /* Mostrar el submenú cuando se activa */
  .icon2-navbar .nav-item.show .dropdown-menu {
    display: block !important;
  }

  /* Enlaces dentro del submenú */
  .icon2-navbar .dropdown-menu a {
    color: #333 !important;
    /* texto oscuro, legible sobre fondo blanco */
    padding: 0.8rem 1rem;
    text-align: center;
    font-size: 1rem;
    transition: all 0.3s ease;
  }

  .icon2-navbar .dropdown-menu a:hover {
    color: #d4a017 !important;
    /* dorado clásico */
    background-color: rgba(0, 0, 0, 0.05);
  }

  /* Asegura buen contraste dentro del menú colapsado */
  .icon2-navbar .navbar-collapse.show {
    background: #ffffff;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

#Icon_2 .icon2-navbar-toggler .navbar-toggler-icon::before,
#Icon_2 .icon2-navbar-toggler .navbar-toggler-icon::after,
#Icon_2 .icon2-navbar-toggler .navbar-toggler-icon div {
  background-color: var(--icon2-toggler-color) !important;
}

#Icon_2 .icon2-navbar-toggler {
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.3));
}

/* ===========================
   Icon3 - Navbar clara y elegante
=========================== */
.icon3-navbar {
  background-color: transparent;
  /* Navbar principal siempre transparente */
  transition: background-color 0.3s ease, padding 0.3s ease;
  padding: 1rem 2rem;
  font-family: 'Poppins', sans-serif;
  z-index: 1050;
}

/* Flex: logo izquierda, menú derecha */
.icon3-navbar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Logo */
.icon3-navbar-logo img {
  display: block;
  height: 40px;
  transition: transform 0.3s ease;
}

.icon3-navbar-logo img:hover {
  transform: scale(1.05);
}

/* Menú a la derecha */
.icon3-navbar .navbar-nav {
  display: flex;
  gap: 2rem;
  align-items: center;
}

/* Links principales */
.icon3-link-nav {
  color: var(--icon3-link-color, #c9a227);
  font-weight: 500;
  text-transform: uppercase;
  transition: color 0.2s, transform 0.2s;
}

.icon3-link-nav:hover {
  color: var(--icon3-link-hover-color, #d4a017);
  transform: translateY(-2px);
}

/* Íconos de redes sociales */
.icon3-link {
  color: var(--icon3-link-color, #c9a227);
  transition: color 0.3s, transform 0.3s;
}

.icon3-link:hover {
  color: var(--icon3-link-hover-color, #d4a017);
  transform: translateY(-2px);
}

/* Navbar al hacer scroll */
.icon3-navbar.scrolled {
  background-color: var(--icon3-bg-navbar-scrolled, rgba(255, 255, 255, 0.9));
  backdrop-filter: blur(10px);
  padding: 0.6rem 2rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

/* Dropdown - escritorio */
.icon3-navbar .nav-item.dropdown .dropdown-menu {
  background-color: var(--icon3-bg-dropdown, rgba(255, 255, 255, 0.95));
  border: none;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.icon3-navbar .dropdown-menu a {
  color: var(--icon3-dropdown-link-color, #2b2b2b);
  font-weight: 500;
  transition: all 0.3s ease;
}

.icon3-navbar .dropdown-menu a:hover {
  color: var(--icon3-dropdown-link-hover-color, #3B5998);
}

/* Botón hamburguesa - escritorio */
.icon3-navbar-toggler {
  border: none;
  color: var(--icon3-toggler-color, #2b2b2b);
}

.icon3-navbar-toggler .navbar-toggler-icon {
  display: block;
  width: 30px;
  height: 22px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* ===========================
   📱 Móviles
=========================== */
@media (max-width: 991px) {

  /* Sidebar móvil */
  .icon3-navbar .navbar-collapse.show {
    background: var(--icon3-bg-sidebar, rgba(40, 40, 40, 0.95));
    backdrop-filter: blur(10px);
    position: fixed;
    top: 60px;
    left: 0;
    width: 100%;
    height: calc(100vh - 60px);
    padding: 2rem 1rem;
    z-index: 999;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Links centrados y blancos */
  .icon3-navbar .navbar-collapse.show .nav-link,
  .icon3-navbar .navbar-collapse.show .icon3-link {
    color: var(--icon3-sidebar-link-color, #ffffff);
    font-size: 1.2rem;
    display: block;
    margin: 1rem 0;
    text-align: center;
  }

  .icon3-navbar .navbar-collapse.show .nav-link:hover,
  .icon3-navbar .navbar-collapse.show .icon3-link:hover {
    color: var(--icon3-sidebar-link-hover-color, #c9a227);
  }

  /* Submenús móviles */
  .icon3-navbar .dropdown-menu {
    background: var(--icon3-bg-dropdown, rgba(255, 255, 255, 0.95));
    border-radius: 8px;
    padding: 0.5rem 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    display: none;
    position: static !important;
  }

  .icon3-navbar .nav-item.show .dropdown-menu {
    display: block !important;
  }

  .icon3-navbar .dropdown-menu a {
    color: var(--icon3-dropdown-link-color, #333) !important;
    padding: 0.8rem 1rem;
    text-align: center;
    font-size: 1rem;
    transition: all 0.3s ease;
  }

  .icon3-navbar .dropdown-menu a:hover {
    color: var(--icon3-dropdown-link-hover-color, #d4a017) !important;
    background-color: rgba(0, 0, 0, 0.05);
  }
}


/* =========================================
   ICON4 - NAVBAR ELEGANTE AZUL PLATA
   Sofisticado y moderno para iglesia/colegio
   ========================================= */
.icon4-navbar {
  background-color: var(--icon4-bg-navbar, #ffffffcc);
  /* Blanco perla con transparencia por defecto */
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
  padding: 1rem 2rem;
  font-family: 'Poppins', sans-serif;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
  border-bottom: 1px solid rgba(200, 200, 200, 0.25);
  z-index: 1050;
}

/* Flex principal */
.icon4-navbar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Logo */
.icon4-navbar-logo img {
  display: block;
  height: 44px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

/* Menú principal */
.icon4-navbar .navbar-nav {
  display: flex;
  gap: 1.8rem;
  align-items: center;
}

/* Links - textos fijos */
.icon4-link-nav {
  color: #1f2e52;
  font-weight: 500;
  text-transform: none;
  font-size: 1rem;
  letter-spacing: 0.3px;
  transition: color 0.3s ease, transform 0.2s ease;
}

.icon4-link-nav:hover {
  color: #2a4d8f;
  transform: translateY(-1px);
}

/* Redes sociales */
.icon4-link {
  color: #1f2e52;
  transition: color 0.3s ease, transform 0.3s ease;
}

.icon4-link:hover {
  color: #2a4d8f;
  transform: scale(1.1);
}

/* Navbar al hacer scroll */
.icon4-navbar.scrolled {
  background-color: var(--icon4-bg-navbar, #ffffffee);
  backdrop-filter: blur(14px);
  padding: 0.7rem 2rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* Dropdown - escritorio */
.icon4-navbar .nav-item.dropdown .dropdown-menu {
  background-color: #ffffff;
  border: 1px solid rgba(42, 77, 143, 0.2);
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.icon4-navbar .dropdown-menu a {
  color: #1f2e52;
  font-weight: 500;
  transition: color 0.3s ease;
}

.icon4-navbar .dropdown-menu a:hover {
  color: #2a4d8f;
  background-color: rgba(42, 77, 143, 0.08);
}

/* Botón hamburguesa */
.icon4-navbar-toggler {
  border: none;
  outline: none;
}

.icon4-navbar-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(31,46,82,1)' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* Redes sociales */
.navbar-redes {
  display: flex;
  gap: 1rem;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
}

.icon4-redes-link {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1f2e52;
  font-size: 1.25rem;
  padding: 0.3rem;
  border-radius: 8px;
  background-color: rgba(42, 77, 143, 0.05);
  transition: all 0.3s ease;
}

.icon4-redes-link:hover {
  color: #d4af37;
  background-color: rgba(42, 77, 143, 0.15);
  transform: translateY(-2px);
}

/* ===========================
   📱 Móviles
=========================== */
@media (max-width: 991px) {
  .icon4-navbar .navbar-collapse.show {
    background: var(--icon4-bg-sidebar, #ffffffee);
    backdrop-filter: blur(12px);
    position: fixed;
    top: 60px;
    left: 0;
    width: 100%;
    height: calc(100vh - 60px);
    padding: 2rem 1rem;
    z-index: 999;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.1);
  }

  .icon4-navbar .navbar-collapse.show .nav-link,
  .icon4-navbar .navbar-collapse.show .icon4-link {
    color: #1f2e52;
    font-size: 1.2rem;
    font-weight: 500;
    display: block;
    margin: 1rem 0;
    text-align: center;
  }

  .icon4-navbar .navbar-collapse.show .nav-link:hover {
    color: #2a4d8f;
  }

  /* Submenus móviles con color dinámico */
  .icon4-navbar .navbar-collapse.show .dropdown-menu {
    background-color: var(--icon4-bg-submenu-mobile, #ffffff);
    border-radius: 8px;
    padding: 0.5rem 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }

  .icon4-navbar .navbar-collapse.show .dropdown-menu a {
    font-size: 1rem;
    color: #1f2e52;
    padding: 0.8rem 1rem;
    text-align: center;
  }

  .icon4-navbar .navbar-collapse.show .dropdown-menu a:hover {
    color: #2a4d8f;
    background-color: rgba(42, 77, 143, 0.08);
  }

  .navbar-redes {
    flex-direction: column;
    gap: 1rem;
    margin-top: 2rem;
  }

  .icon4-redes-link {
    font-size: 1.4rem;
    padding: 0.5rem;
  }
}


/* =========================================
   ICON5 - NAVBAR FUTURISTA NEÓN EDUCATIVO (DINÁMICO)
   ========================================= */

.icon5-navbar {
  background: linear-gradient(90deg,
      var(--icon5-bg1, rgba(10, 20, 40, 0.85)),
      var(--icon5-bg2, rgba(20, 40, 80, 0.85)));
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--icon5-border, rgba(0, 255, 255, 0.2));
  box-shadow: 0 0 15px var(--icon5-shadow, rgba(0, 255, 255, 0.05));
  transition: all 0.4s ease;
  padding: 1rem 2rem;
  font-family: 'Poppins', sans-serif;
  z-index: 1050;
}

.icon5-navbar.scrolled {
  background: var(--icon5-scroll-bg, rgba(10, 20, 40, 0.95));
  box-shadow: 0 0 25px var(--icon5-shadow-scrolled, rgba(0, 255, 255, 0.1));
  padding: 0.7rem 2rem;
}

/* ================= LOGO ================= */
.icon5-navbar-logo img {
  height: 46px;
  filter: drop-shadow(0 0 5px var(--icon5-accent, rgba(0, 255, 255, 0.4)));
  transition: transform 0.4s ease;
}

.icon5-navbar-logo img:hover {
  transform: rotate(-5deg) scale(1.05);
}

/* ================= MENÚ ================= */
.icon5-navbar .navbar-nav {
  display: flex;
  gap: 2rem;
  align-items: center;
}

.icon5-link-nav {
  position: relative;
  color: var(--icon5-text, #d7e9ff);
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-size: 0.95rem;
  transition: all 0.3s ease;
}

.icon5-link-nav::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0%;
  height: 2px;
  background: linear-gradient(90deg,
      var(--icon5-primary, #00eaff),
      var(--icon5-secondary, #a16bff));
  transition: width 0.3s ease;
}

.icon5-link-nav:hover {
  color: var(--icon5-primary, #00eaff);
  text-shadow: 0 0 10px var(--icon5-primary-glow, rgba(0, 234, 255, 0.8));
}

.icon5-link-nav:hover::after {
  width: 100%;
}

/* ================= DROPDOWN ================= */
.icon5-navbar .dropdown-menu {
  background: var(--icon5-dropdown-bg, rgba(15, 25, 45, 0.95));
  border: 1px solid var(--icon5-border, rgba(0, 255, 255, 0.2));
  border-radius: 10px;
  box-shadow: 0 0 15px var(--icon5-shadow, rgba(0, 255, 255, 0.1));
}

.icon5-navbar .dropdown-menu a {
  color: var(--icon5-dropdown-text, #b6d8ff);
  font-weight: 500;
  transition: all 0.3s ease;
}

.icon5-navbar .dropdown-menu a:hover {
  color: var(--icon5-primary, #00eaff);
  background-color: var(--icon5-hover-bg, rgba(0, 255, 255, 0.1));
}

/* ================= BOTÓN HAMBURGUESA ================= */
.icon5-navbar-toggler {
  border: none;
  outline: none;
}

.icon5-navbar-toggler .navbar-toggler-icon {
  width: 30px;
  height: 24px;
  background-image: none;
  mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='white' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='white' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
  background-color: var(--icon5-primary, #00eaff);
  filter: drop-shadow(0 0 3px var(--icon5-primary-glow, rgba(0, 234, 255, 0.8)));
}

/* ================= REDES SOCIALES ================= */
.icon5-navbar-redes {
  display: flex;
  gap: 1rem;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
}

.icon5-redes-link {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--icon5-primary, #00eaff);
  font-size: 1.3rem;
  padding: 0.4rem;
  border-radius: 50%;
  border: 1px solid var(--icon5-border, rgba(0, 234, 255, 0.4));
  background: var(--icon5-bg-light, rgba(0, 234, 255, 0.08));
  transition: all 0.35s ease;
  box-shadow: 0 0 8px var(--icon5-shadow, rgba(0, 234, 255, 0.2));
}

.icon5-redes-link:hover {
  background: linear-gradient(135deg,
      var(--icon5-primary, #00eaff),
      var(--icon5-secondary, #a16bff));
  color: #fff;
  box-shadow: 0 0 18px var(--icon5-primary-glow, rgba(0, 234, 255, 0.7));
  transform: scale(1.15) rotate(5deg);
}

/* ================= EFECTOS ================= */
@keyframes pulseGlow {

  0%,
  100% {
    box-shadow: 0 0 10px var(--icon5-primary-glow, rgba(0, 234, 255, 0.4));
  }

  50% {
    box-shadow: 0 0 20px var(--icon5-secondary-glow, rgba(161, 107, 255, 0.6));
  }
}

.icon5-redes-link:hover i {
  animation: pulseGlow 1.2s infinite;
}

/* ================= RESPONSIVE ================= */
@media (max-width: 991px) {
  .icon5-navbar .navbar-collapse.show {
    background: var(--icon5-bg-mobile, rgba(10, 20, 40, 0.98));
    backdrop-filter: blur(10px);
    position: fixed;
    top: 60px;
    left: 0;
    width: 100%;
    height: calc(100vh - 60px);
    padding: 2rem 1rem;
    z-index: 999;
    overflow-y: auto;
    box-shadow: inset 0 2px 10px var(--icon5-shadow, rgba(0, 255, 255, 0.15));
  }

  .icon5-navbar .navbar-collapse.show .nav-link {
    color: var(--icon5-dropdown-text, #b6d8ff);
    font-size: 1.2rem;
    margin: 1rem 0;
    text-align: center;
  }

  .icon5-navbar-redes {
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-top: 2rem;
  }

  .icon5-redes-link {
    font-size: 1.5rem;
    padding: 0.6rem;
  }
}

/* =========================================
   ICON6 - NAVBAR AZUL PROFUNDO INSTITUCIONAL
   (colores dinámicos desde JS)
========================================= */
.icon6-navbar {
  background: var(--icon6-bg-navbar, rgba(8, 35, 90, 0.75));
  backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid var(--icon6-border-navbar, rgba(180, 220, 255, 0.25));
  box-shadow: 0 4px 25px rgba(10, 20, 60, 0.25);
  transition: all 0.4s ease-in-out;
  padding: 1rem 2rem;
  font-family: 'Poppins', sans-serif;
  position: relative;
  z-index: 1050;
}

/* Logo */
.icon6-navbar-logo img {
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.4));
}

/* Links principales */
.icon6-link-nav {
  color: var(--icon6-link-color, #e9f1ff);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  transition: all 0.3s ease;
  position: relative;
  padding: 0.5rem 0.8rem;
}

.icon6-link-nav:hover {
  color: var(--icon6-link-hover-color, #81b4ff);
}

.icon6-link-nav::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0%;
  height: 2px;
  background: var(--icon6-link-hover-color, #81b4ff);
  border-radius: 2px;
  transition: width 0.3s ease, left 0.3s ease;
}

.icon6-link-nav:hover::after {
  width: 100%;
  left: 0;
}

/* Dropdown */
.icon6-navbar .dropdown-menu {
  background: var(--icon6-bg-submenu, rgba(15, 30, 70, 0.98));
  border: 1px solid var(--icon6-border-submenu, rgba(120, 180, 255, 0.3));
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(30, 60, 120, 0.4);
  padding: 0.7rem 0;
  z-index: 9999;
}

.icon6-navbar .dropdown-menu .dropdown-item {
  color: var(--icon6-submenu-text, #d9e6ff);
  transition: all 0.3s ease;
}

.icon6-navbar .dropdown-menu .dropdown-item:hover {
  background: var(--icon6-submenu-hover-bg, rgba(8, 35, 90, 0.92));
  color: var(--icon6-submenu-hover-text, #fff);
}

/* Menú desplegable correcto */
.icon6-navbar .dropdown:hover>.dropdown-menu,
.icon6-navbar .dropdown-menu.show {
  display: block;
}

/* Botón hamburguesa */
.icon6-navbar-toggler {
  border: none;
  outline: none;
  z-index: 1500;
}

.icon6-navbar-toggler .navbar-toggler-icon {
  background-image: var(--icon6-toggler-icon, url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(130,180,255,1)' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"));
  filter: drop-shadow(0 0 5px rgba(130, 180, 255, 0.7));
}

/* Redes sociales */
.icon6-navbar-redes {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-left: 1rem;
}

.icon6-redes-link {
  color: var(--icon6-link-color, #a0c4ff);
  transition: all 0.3s ease;
}

.icon6-redes-link:hover {
  color: var(--icon6-link-hover-color, #ffffff);
  text-shadow: 0 0 6px rgba(120, 180, 255, 0.7);
  transform: translateY(-2px);
}

/* =========================================
   RESPONSIVO
========================================= */
@media (max-width: 991px) {
  .icon6-navbar {
    padding: 1rem;
    background: var(--icon6-bg-navbar-mobile, rgba(8, 35, 90, 0.92));
  }

  .icon6-navbar-redes {
    justify-content: center;
    margin-top: 0.5rem;
  }

  /* Fondo del menú móvil */
  .icon6-navbar .navbar-collapse.show {
    background: var(--icon6-bg-sidebar, rgba(8, 35, 90, 0.92));
    backdrop-filter: blur(15px);
    position: fixed;
    top: 60px;
    left: 0;
    width: 100%;
    height: calc(100vh - 60px);
    padding: 2rem 1rem;
    z-index: 12000;
    overflow-y: auto;
  }

  /* Submenú móvil */
  .icon6-navbar .dropdown-menu {
    position: static;
    display: none;
    background: var(--icon6-bg-submenu-mobile, rgba(15, 25, 55, 0.95));
    box-shadow: none;
    border: none;
  }

  .icon6-navbar .dropdown.show .dropdown-menu {
    display: block;
    margin-top: 0.5rem;
  }

  /* 🔽 Indicadores en los menús con submenú */
  .icon6-navbar .dropdown-toggle::after {
    content: "▼";
    font-size: 0.7rem;
    margin-left: 8px;
    transition: transform 0.3s ease;
    display: inline-block;
  }

  /* 🔼 Flecha rota al abrir */
  .icon6-navbar .dropdown.show .dropdown-toggle::after {
    transform: rotate(180deg);
  }

  /* Legibilidad del submenú móvil */
  .icon6-navbar .dropdown-menu .dropdown-item {
    color: var(--icon6-submenu-text, #e8f0ff) !important;
    font-weight: 500;
    padding: 0.6rem 1rem;
  }

  .icon6-navbar .dropdown-menu .dropdown-item:hover {
    color: var(--icon6-submenu-hover-text, #ffffff) !important;
    background: var(--icon6-submenu-hover-bg, rgba(30, 70, 140, 0.9)) !important;
  }

  .icon6-navbar .dropdown-menu {
    background: var(--icon6-bg-submenu-mobile, rgba(10, 30, 70, 0.95)) !important;
    border: 1px solid rgba(120, 180, 255, 0.25);
  }
}

/* =========================================
   ICON7 - NAVBAR FUTURISTA HOLOGRÁFICO EDUCATIVO (DINÁMICO)
   ========================================= */
.icon7-navbar {
  background: var(--icon7-bg, rgba(15, 15, 35, 0.6));
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--icon7-border, rgba(120, 200, 255, 0.15));
  box-shadow: 0 0 25px var(--icon7-border, rgba(0, 150, 255, 0.15)),
    inset 0 0 10px var(--icon7-border, rgba(100, 200, 255, 0.1));
  transition: all 0.4s ease-in-out;
  padding: 1rem 2rem;
  font-family: 'Poppins', sans-serif;
  z-index: 1050;
  position: relative;
  overflow: visible;
}

/* Luz animada lateral */
.icon7-navbar::before {
  content: "";
  position: absolute;
  top: 0;
  left: -50%;
  width: 200%;
  height: 100%;
  background: linear-gradient(120deg,
      var(--icon7-accent, rgba(0, 255, 200, 0.15)),
      var(--icon7-hover, rgba(120, 60, 255, 0.1)),
      var(--icon7-border, rgba(0, 255, 255, 0.15)));
  animation: icon7MoveLight 8s infinite linear;
  z-index: 1;
  pointer-events: none;
}

@keyframes icon7MoveLight {
  from {
    transform: translateX(-25%);
  }

  to {
    transform: translateX(25%);
  }
}

/* Contenedor principal */
.icon7-navbar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 2;
  position: relative;
}

/* Menú principal */
.icon7-navbar .navbar-nav {
  display: flex;
  gap: 1.8rem;
  align-items: center;
}

/* Links */
.icon7-link-nav {
  color: var(--icon7-text, #d5e8ff);
  font-weight: 500;
  text-transform: uppercase;
  position: relative;
  transition: all 0.3s ease-in-out;
}

.icon7-link-nav::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 0%;
  height: 2px;
  background: linear-gradient(90deg, var(--icon7-accent, #0ff), var(--icon7-hover, #9f7fff));
  border-radius: 2px;
  transform: translateX(-50%);
  transition: width 0.3s ease;
}

.icon7-link-nav:hover {
  color: var(--icon7-hover, #7df9ff);
  text-shadow: 0 0 8px var(--icon7-hover, rgba(0, 255, 255, 0.7));
}

.icon7-link-nav:hover::before {
  width: 100%;
}

/* Dropdown corregido */
.icon7-navbar .dropdown-menu {
  background: var(--icon7-bg-dropdown, rgba(20, 25, 55, 0.95));
  backdrop-filter: blur(15px);
  border: 1px solid var(--icon7-border, rgba(0, 255, 255, 0.25));
  border-radius: 12px;
  box-shadow: 0 0 25px var(--icon7-border, rgba(0, 255, 255, 0.1));
  padding: 0.6rem 0;
  z-index: 9999;
  position: absolute;
  top: 100%;
}

/* Hover y móviles */
.icon7-navbar .dropdown:hover>.dropdown-menu,
.icon7-navbar .dropdown-menu.show {
  display: block;
}

/* Botón hamburguesa */
.icon7-navbar-toggler {
  border: none;
  outline: none;
  z-index: 15000;
}

.icon7-navbar-toggler .navbar-toggler-icon {
  background-image: var(--icon7-toggler, url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0,255,255,1)' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"));
  filter: drop-shadow(0 0 5px var(--icon7-hover, rgba(0, 255, 255, 0.8)));
}

/* Redes sociales */
.icon7-navbar-redes {
  display: flex;
  gap: 1rem;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
}

.icon7-redes-link {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--icon7-accent, #00eaff);
  font-size: 1.3rem;
  padding: 0.4rem;
  border-radius: 50%;
  border: 1px solid var(--icon7-border, rgba(0, 234, 255, 0.4));
  background: rgba(0, 234, 255, 0.08);
  transition: all 0.35s ease;
  box-shadow: 0 0 8px var(--icon7-border, rgba(0, 234, 255, 0.2));
}

.icon7-redes-link:hover {
  background: linear-gradient(135deg, var(--icon7-accent, #00eaff), var(--icon7-hover, #a16bff));
  color: #fff;
  box-shadow: 0 0 18px var(--icon7-border, rgba(0, 234, 255, 0.7));
  transform: scale(1.15) rotate(5deg);
}

/* =========================================
   MÓVILES
   ========================================= */
@media (max-width: 991px) {
  .icon7-navbar .navbar-collapse.show {
    background: var(--icon7-bg-mobile, rgba(10, 15, 30, 0.98));
    backdrop-filter: blur(15px);
    position: fixed;
    top: 60px;
    left: 0;
    width: 100%;
    height: calc(100vh - 60px);
    padding: 2rem 1rem;
    z-index: 12000;
    overflow-y: auto;
  }

  .icon7-navbar .dropdown-menu {
    position: static;
    display: none;
    background: var(--icon7-bg-dropdown, rgba(15, 25, 55, 0.95));
    box-shadow: none;
    border: none;
  }

  .icon7-navbar .dropdown.show .dropdown-menu {
    display: block;
    margin-top: 0.5rem;
  }
}