/* =========================
   HEADER BASE + LAYOUT
   ========================= */
.site-header#masthead {
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 50;
  overflow: visible;
  isolation: isolate;
}

/* Contenedor interior: logo a la izq, menú a la dcha */
.inside-header.grid-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1800px;
  height: 50px;
  background: transparent;
  position: relative;
  overflow: hidden;
  z-index: 20;
}

/* Elementos del header por encima del glow */
.site-header .site-logo,
.site-header #mobile-menu-control-wrapper,
.site-header #site-navigation {
  position: relative;
  z-index: 30;
}

/* =========================
   MENÚ
   ========================= */

#site-navigation .inside-navigation {
  display: flex;
  align-items: center;
}

#site-navigation .main-nav>ul {
  display: flex;
  align-items: center;
  justify-content: flex-end;

}

#site-navigation .main-nav>ul>li>a {
  padding-right: 0;
  font-size: 11pt;
  font-weight: 600;
  color: #78909c;
  text-decoration: none;
  transition: color .3s ease-in-out;
}


#site-navigation .main-nav>ul>li>a:hover {
  color: #fc514e;
}

/* =========================
   CTA TELÉFONO (píldora) y Aula Virtual
   ========================= */
.main-navigation .menu>li#menu-item-1138>a,
.main-navigation .menu>li#menu-item-1142>a {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  padding: 10px 16px;
  border-radius: 9999px;
  background-color: #fc824e;
  background-image: linear-gradient(to right, #fc824e, #fc4e4e);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr="#FC824E", endColorStr="#FC4E4E", gradientType="1");
  color: #fff !important;
  font-weight: 700;
  line-height: 1;
  -ms-box-shadow: 0 5px 5px rgba(252, 78, 78, 0.3);
  -o-box-shadow: 0 5px 5px rgba(252, 78, 78, 0.3);
  box-shadow: 0 5px 5px rgba(252, 78, 78, 0.3);
  transition: filter .2s ease, box-shadow .2s ease, transform .2s ease;
}

.main-navigation .menu>li#menu-item-1142>a {
  display: none;
  background-color: #8bc34a;
  background-image: linear-gradient(to right, #8bc34a, #4caf50);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr="#8BC34A", endColorStr="#4CAF50", gradientType="1");
  -ms-box-shadow: 0 5px 5px rgba(76, 175, 80, 0.3);
  -o-box-shadow: 0 5px 5px rgba(76, 175, 80, 0.3);
  box-shadow: 0 5px 5px rgba(76, 175, 80, 0.3);
}

/* Icono de teléfono */
.main-navigation .menu>li#menu-item-1138>a::before {
  content: "\f095";
  /* phone */
  font-family: "Font Awesome 6 Free";
  transform: scaleX(-1);
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

/* Icono de usuario */
.main-navigation .menu>li#menu-item-1142>a::before {
  content: "\f007";
  /* usuario */
  font-family: "Font Awesome 6 Free";
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

/* Hover/active suaves */
.main-navigation .menu>li#menu-item-1138>a:hover {
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr="#FC824E", endColorStr="#FC4E4E", gradientType="1");
  -ms-box-shadow: 0 5px 10px rgba(252, 78, 78, 0.8);
  -o-box-shadow: 0 5px 10px rgba(252, 78, 78, 0.8);
  box-shadow: 0 5px 10px rgba(252, 78, 78, 0.8);
}

.main-navigation .menu>li#menu-item-1142>a:hover {
  border: unset;
  background-color: #8bc34a;
  background-image: linear-gradient(to right, #8bc34a, #4caf50);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr="#8BC34A", endColorStr="#4CAF50", gradientType="1");
  -ms-box-shadow: 0 5px 10px rgba(76, 175, 80, 0.8);
  -o-box-shadow: 0 5px 10px rgba(76, 175, 80, 0.8);
  box-shadow: 0 5px 10px rgba(76, 175, 80, 0.8);
}

.main-navigation .menu>li#menu-item-1138>a:active {
  transform: translateY(1px);
}

/* separador respecto al resto del menú */
#menu-item-1138,
#menu-item-1142 {
  margin-left: 14px;

}


/* =========================
   GLOW (línea + halo debajo)
   ========================= */

/* Línea nítida en el borde inferior del header (full width) */
.site-header#masthead::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0;
  background: linear-gradient(90deg, #f8b34c 0, #e94763 33%, #4656a1 66%, #a44894 100%) bottom/100% 1px no-repeat,
    #fff;
  opacity: .95;
  z-index: 20;
  pointer-events: none;
}

/* HALO 1: banda base suave al ancho del contenedor */
.site-header#masthead::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -20px;
  transform: translateX(-50%) scaleY(1.25);
  width: min(100%, 1800px);
  height: 26px;
  background: linear-gradient(90deg, #f8b34c 0, #e94763 33%, #4656a1 66%, #a44894 100%);
  filter: blur(22px);
  opacity: .26;
  z-index: 10;
  pointer-events: none;
  /* desvanecer bordes y caída vertical suave */
  -webkit-mask-image:
    radial-gradient(120% 100% at 50% 0, #000 55%, rgba(0, 0, 0, .65) 72%, transparent 100%),
    linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%);
  mask-image:
    radial-gradient(120% 100% at 50% 0, #000 55%, rgba(0, 0, 0, .65) 72%, transparent 100%),
    linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%);
  mask-composite: intersect;
  -webkit-mask-composite: source-in;
}

/* HALO 2: “panza” central muy sutil para simular luz bajo monitor */
.inside-header.grid-container::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  z-index: 12;
  /* > halo (5) y < contenido (30) */
}

/* El primer bloque de contenido pasa por encima del glow */
.site-content,
main,
#content,
.site-main {
  position: relative;
  z-index: 40;
}


/* =========================
   OPCIONALES (afinado visual)
   ========================= */
/* Limita la altura del logo si se ve grande */
.site-logo img.header-image {
  max-height: 40px;
  height: auto;
}