/* 
  Creado para el proyecto "web ESPOL 2025-2026". 
  Uso: Este archivo define los estilos visuales y de interacción para el Header, nav y aside de la web de la ESPOL
  Autor: Amhed Flores
  Actualización: 17-octubre-2025
*/
:root {
  /* variables para el menu ESPOL*/
  --transparencia-nav: 0.6;
  --navicons: 35px;
  --navmargin: 5px;
  --navspace: 2px;
  --navinfo-opc: 0.6;
  --nav-dashboard-radius: 50px;
  --nav-blur: 5px;
  --menu-escritorio: 60px;
  --menu-icons: 45px;
  --menu-mobile: 35px;
  --menu-margin: 15px;
  --menu-scrolled-margin: 10px;
  --menu-width: 25em;
  --menu-width-submenu: min(40vw, 500px);
  --menu-safe-area: -2em;
  --menu-bg: hsla(0, 0%, 0%, 0.7);
  --menu-nav-color: var(--bs-c-4);
  --es-menu-padding: 10px;
  --es-menu-logo: 65px;
  --margin-header: calc(var(--menu-escritorio) + var(--navicons) + var(--navmargin) * 2); /* Variable para el espacio del toolbar y el menu */

  --es-header-bg: var(--bs-c-4-opc);
  --es-logo-fill: var(--bs-espol);
  --es-nav-btn-shadow: 5px 5px 10px rgba(0, 0, 0, 0.06),
                      -3px -3px 9px rgba(255, 255, 255, 0.9);
}
.dark {
  --menu-bg: var(--espol-opc);

  --es-header-bg: var(--bs-c-8-opc);
  --es-logo-fill: var(--bs-c-4);
  --es-nav-btn-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2),
                      -3px -3px 9px rgba(255, 255, 255, 0.1);
}
header section {
  position: relative;
  z-index: auto;
  background: inherit;
  will-change: transform, opacity, backdrop-filter, box-shadow;
  contain: layout style;
  transform: translateZ(0);
}
/* === HEADER === */
header#site_header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 11;
  display: flex;
  width: 100%;
  height: calc(var(--navicons) + var(--navmargin) * 2);
  justify-content: end;
  overflow-x: clip;
  overscroll-behavior-x: contain;
  background-color: var(--bs-espol);
  color: var(--bs-nav-color);
  font-family: 'Open Sans', sans-serif;
  touch-action: pan-y;
  -ms-touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-touch-callout: none;
  -webkit-font-smoothing: antialiased;
}
/* === BOTONES DE ACCESOS DIRECTOS === */
#acsd ul {
    flex-direction: row-reverse;
}
#acsd li:hover {
  box-shadow: none !important;
}
#acsd a {
  width: max-content !important;
  float: right;
  margin-right: 5px;
  padding: 10px;
  border: 2px solid var(--bs-nav-color);
  border-radius: var(--radiusxs);
  font-size: 14px;
}
#acsd a:is(:hover, :active, :focus) {
  background-color: var(--bs-nav-color);
  color: var(--bs-espol-nav) !important;
}
.facebook, .instagram, .x_twitter, .youtube, .linkedin, .tiktok, .flick, .behance, .soundcloud  {
	font-family: var(--font-icons-brands);
	font-size: 20px;
}
.flick::after, .tiktok::after, .facebook::after, .instagram::after, .x_twitter::after, .youtube::after, .linkedin::after,.behance::after, .soundcloud::after {
	position: absolute;
  top: 0;
  width: var(--navicons);
  height: var(--navicons);
  display: flex;
  justify-content: center;
  align-items: center;
}
/* === TOOLTIPS ACCESIBLES CON DATA-TOOLTIP === */
/* Tooltip mejorado para accesibilidad */
[data-tooltip]:hover::before,
[data-tooltip]:focus::before {
  content: attr(data-tooltip);
  position: absolute;
  top: 100%;
  margin-top: 8px;
  z-index: 9;
  display: flex;
  width: max-content;
  padding: 5px 15px;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  background: var(--bs-espol-nav);
  border-radius: 0 var(--radiussm) var(--radiussm);
  box-shadow: 2px 5px 6px 0px rgba(0, 0, 0, 0.2);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}
[data-tooltip]:hover::before {
  opacity: 0;
}
[data-tooltip]:hover::before,
[data-tooltip]:focus::before {
  opacity: 1;
  transform: translateY(0);
}
[data-tooltip] {
  position: relative;
  cursor: help;
}
[data-tooltip]:focus {
  outline: 2px solid var(--bs-espol-nav);
  outline-offset: 2px;
}
/* === ICONOS DE REDES SOCIALES === */
.facebook::after {
	content: '\f39e';
}
.flick::after {
	content: '\f16e';
}
.instagram::after {
	content: '\f16d';
}
.linkedin::after {
	content: '\f08c';
}
.tiktok::after {
	content: '\e07b';
}
.youtube::after {
	content: '\f167';
}
.x_twitter::after {
	content: '\e61b';
}
.behance::after {
	content: '\f1b4';
}
.soundcloud::after{
	content: '\f1be';
}
/* === FIN BOTONES DE REDES SOCIALES === */
/* === BOTONES DE ENLACES RÁPIDOS === */
#ads, #av, #outlook, #sidweb, #buscador_ODS {
  background-repeat: no-repeat;
  background-size: 20px;
  background-position: center;
}
#ads {background-image: url("https://cdn.espol.edu.ec/images/icons/ads.svg");}
#av {background-image: url("https://cdn.espol.edu.ec/images/icons/av.svg");}
#outlook {background-image: url("https://cdn.espol.edu.ec/images/icons/outlook.svg");}
/* #sidweb {background-image: url(../images/icons/sidweb.svg);}  se dejo de usar sidweb*/
#acs button {
  background: transparent;
  border: none;
  font-size: 16px;
  font-style: oblique;
  cursor: pointer;
  -webkit-font-smoothing: antialiased;
}
#ads:hover::before {
  content: 'ESPOL Ads';
}
#av:hover::before {
  content: 'Aula Virtual';
}
#outlook:hover::before {
  content: 'Correo de la ESPOL';
}
#sidweb:hover::before {
  content: 'Sidweb Espol';
}
#acc_incrementa {
  font-weight: bolder;
  font-stretch: expanded;
}
#acc_reduce {
  font-weight: 100;
  font-stretch: condensed;
}
/* === FIN BOTONES DE ACCESIBILIDAD Y LECTURA === */
/* === MODO OSCURO === */ 
#dm ul {
  align-items: normal !important;
  width: fit-content !important;
}
:is(#dm) * {
  animation: none;
}
.switch-container {
  position: relative;
  display: flex;
  width: 62px;
}
.switch-container input {
  position: relative;
  top: 1px;
  width: 100%;
  height: calc(var(--navicons) - 2px);
  appearance: none;
  -webkit-appearance: none;
}
.switch-container .cross {
  position: absolute;
  inset: 0;
  height: var(--navicons);
  background: var(--nightmode);
  border-radius: 30px;
  cursor: pointer;
}
.switch-container .cross:before {
  content: "";
  position: absolute;
  top: 0.3em;
  left: 10%;
  bottom: 15%;
  width: calc(var(--navicons) - 10px);
  height: calc(var(--navicons) - 10px);
  background: var(--nightmode);
  border-radius: 50%;
  box-shadow: inset 15px -4px 0px 15px var(--bs-espol-1);
}
.switch-container input:checked + .cross {
  background-color: hsla(0, 0%, 0%, 0.5);
}
.switch-container input:checked + .cross:before {
  box-shadow: inset 8px -4px 0px 0px var(--bs-c-4);
  transform: translateX(100%);
}
/* === FIN MODO OSCURO === */
/* === IDIOMAS Y BUSCADOR === */

#bs #idioma a {
  font-size: 16px;
  color: var(--bs-nav-color);
  text-decoration: none;
}
#bs #idioma a:active {
  font-weight: bold;
}
#idioma ul {
  margin: 0;
  padding: 0;
	display: flex;
	flex-wrap: nowrap;
	--bs-nav-link-padding-x: 0px;
  --bs-nav-link-padding-y: 0px;
}
li:is(.es, .en).nav-link.is-active {
    z-index: 2 !important;
    border-radius: var(--radiusxs);
    opacity: 1 !important;
    font-weight: bolder;
    background: var(--bs-espol-2);
    pointer-events: none;
}
li:is(.es, .en).nav-link.is-active a {
    position: relative;
    top: -1px;
}
#buscar a {
  color: transparent;
}
#buscador_ODS {
  background-image: url("https://cdn.espol.edu.ec/images/icons/ODS/ODS_vector.svg");
}
#buscador_web {
  height: calc(var(--navicons) + var(--navmargin) * 2);
  border-radius: var(--radiusxs) 0 0 var(--radiusxs);
  background-color: var(--bs-c-4);
}
#buscador_web:hover {
  border-radius: var(--radiusxs) 0 0 var(--radiusxs) !important;
  box-shadow: none !important;
}
#buscador_web svg {
  display: block;
  width: 15px;
  height: 15px;
  aspect-ratio: 1 / 1;
  fill: var(--bs-espol);
}
#idioma li { /*forzar el padding del .nav-link a 0*/
  padding: 0 !important;
}
/* === FIN IDIOMAS Y BUSCADOR === */
/* === COMBINADORES === */
header#site_header>:not(#menuESPOL) li {
	opacity: var(--transparencia-nav);
}
header#site_header>:not(#header_barra, #menuESPOL) li:hover {
	opacity: 1;
	border-radius: var(--radiusxs);
	box-shadow: var(--neumorphism-nav);
	animation: navanimation 1s ease 0s 1 normal forwards;
}
header#site_header>:not(#header_barra, #dm, #menuESPOL) li:active {
	box-shadow: var(--neumorphism-nav-active);
}
header#site_header #dm li:hover {
  box-shadow: none;
}
:is(#acs, .scl, #enls, #acsd, #dm, #buscar) ul, #bs {
	display: flex;
  justify-content: flex-start;
	margin: var(--navmargin) 0;
  padding: 0;
}
:is(.scl, #enls, #acs, #bs, #buscar)::after {
  content: "";
  position: absolute;
  top: 5px;
  height: var(--navicons);
  border-left: var(--navspace) solid var(--bs-nav-color);
  border-radius: 2pt;
}
:is(.scl, #enls, #acs, #idioma, #buscar) li:first-child, #buscador_web {
  margin-left: calc(var(--navspace) * 4);
}
:is(.scl, #enls, #acs, #idioma) li:last-child, #dm {
  margin-right: calc(var(--navspace) * 3);
}
#dm li,
#buscador_web,
#buscador_ODS {
  opacity: 1 !important;
}
:is(.scl a, #enls a, #acs  button, #acsd a, #dm ul, #idioma li, #buscar li) {
  position: relative;
  z-index: 1;
  display: flex;
  width: var(--navicons);
  height: var(--navicons);
  align-items: center;
  justify-content: center;
  flex-direction: row;
  flex-wrap: nowrap;
  color: var(--bs-nav-color);
  text-decoration: none;
}
/* === FIN COMBINADORES === */
/* === TRANSICIONES === */
header#site_header,
#header_barra,
#header_barra ul,
header#site_header li,
#acsd a,
#acsd, .scl {
  list-style: none;
}
/* === FIN TRANSICIONES === */
/* === LOGO Y BOTÓN DE MENÚ === */
#header_barra {
  position: fixed;
  top: calc(var(--navicons) + var(--navmargin) * 2);
  left: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: fit-content;
  height: auto;
  padding-inline: calc(var(--padding) * 2);
  padding-block: var(--es-menu-padding);
  color: var(--bs-c-4);
}
#logo svg {
  position: relative;
  top: 0.25em;
  display: block;
  width: auto;
	height: var(--es-menu-logo);
  fill: var(--es-logo-fill);
}
#menu_ESPOL {
  display: none;
}
#label-menu-ESPOL,
#close-label-menu-ESPOL {
  position: fixed;
  top: calc(var(--navicons) + var(--navmargin) * 2 + var(--es-menu-logo) / 2 - 15px);
  right: var(--padding);
  z-index: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px;
  color: var(--bs-espol);
  background: var(--bs-c-5);
  border: 1px solid var(--bs-c-4);
  border-radius: 50px;
  backdrop-filter: blur(var(--nav-blur));
  -webkit-backdrop-filter: blur(var(--nav-blur));
  cursor: pointer;
  user-select: none;
}
:is(#label-menu-ESPOL, #close-label-menu-ESPOL) svg {
  display: block;
  width: 20px;
  height: 20px;
  aspect-ratio: 1 / 1;
  fill: currentColor;
}
#buscar,
#label-menu-ESPOL,
#menuESPOL,
.bg-menu {
  z-index: -1;
}
#close-label-menu-ESPOL {
  background: var(--bs-espol-opc);
  opacity: 0;
}
#menuESPOL {
  position: absolute;
  top: calc(var(--navicons) + var(--navmargin) * 2);
  left: 0;
  width: 100%;
  height: 100dvh;
  overflow: hidden;
  background-color: var(--menu-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  isolation: isolate;
  transform: translateX(100%);
}
#menu_ESPOL:checked + #label-menu-ESPOL ~ #menuESPOL {
  opacity: 1;
  transform: translateX(0%);
}
#menu_ESPOL:checked + #label-menu-ESPOL {
  opacity: 0;
  transform: rotateZ(-45deg);
}
#menu_ESPOL:checked ~ #close-label-menu-ESPOL {
  opacity: 1;
  transform: rotateZ(-90deg);
}
/* FIN logo y botón de menú*/
/* Fondo del menú */
.bg-menu {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}
/* Extensión para imágenes de fondo */
.bg-ESPOL {
  background-repeat: no-repeat;
  background-position: right top;
  background-size: cover;
}
/* Extensión para máscara de fondo */
.bg-mask-menu-ESPOL {
  background: linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(34, 50, 101, 0.7) 100%);
  backdrop-filter: blur(var(--nav-blur));
  -webkit-backdrop-filter: blur(var(--nav-blur));
  will-change: opacity, backdrop-filter;
  contain: layout style paint;
  isolation: isolate;
}
#menuESPOL:has(nav#navESPOL li:nth-child(n):is(:hover, :focus, :focus-visible)) .bg-ESPOL {
  contain-intrinsic-size: 100vh 100vw;
}
#menuESPOL:has(nav#navESPOL li:nth-child(n):is(:hover, :focus, :focus-visible)) :is(.bg-ESPOL, .bg-mask-menu-ESPOL) {
  opacity: 1;
  will-change: opacity, backdrop-filter;
  content-visibility: auto;
  contain: layout style paint;
}
nav#navESPOL{
  position: fixed;
  top: 0;
  z-index: 3;
  width: 100%;
  height: calc(100dvh - var(--navicons) - var(--navmargin));
  overflow: auto;
}
/* Menú Navegación nivel 1*/ 
nav#navESPOL > ul {
  position: absolute;
  bottom: 0;
  display: flex;
  width: 100%;
  max-width: 400px;
  height: calc(100dvh - var(--padding)* 2 - var(--navicons) - var(--navmargin) * 6 - var(--es-menu-logo));
  margin: 0;
  padding: 0;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
}
nav#navESPOL > ul > li {
  position: relative;
  display: flex;
  width: clamp(240px, 100%, var(--menu-width));
  height: 100%;
  align-content: stretch;
  flex-direction: column;
  flex-wrap: wrap;
  cursor: pointer;
}
nav#navESPOL > ul > li::after {
  content: '\f061';
  font-family: var(--font-icons);
  font-size: 1.3em;
  opacity: 0;
}
nav#navESPOL > ul > li:has(.menu-n2):hover::after {
  content: '\f178';
  color: var(--bs-c-4);
  transform: translateX(0px);
  opacity: 1;
}
nav#navESPOL > ul > li > .menu-n1::after {
  content: "";
  width: 0;
  height: 2px;
  background-color: var(--bs-c-4);
  opacity: 0;
}
nav#navESPOL > ul > li:hover .menu-n1::after {
  width: 100%;
  opacity: 1;
}
nav#navESPOL > ul > li:hover::after {
  transform: translateX(10px);
}
nav#navESPOL > ul > li:is(:hover, :focus, :focus-visible) > .menu-n1,
nav#navESPOL .menu-n2 *,
nav#navESPOL :has(li:is(:hover, :focus, :focus-visible)) .menu-n2 :is(a, span, .menu-n3) { 
  color: var(--bs-c-4);
}
nav#navESPOL li:active .menu-n1 {
  scale: 0.95;
}
nav#navESPOL li .menu-n1{
  display: flex;
  width: fit-content;
  height: 100%;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  padding-inline: calc(var(--padding) * 2);
  color: var(--menu-nav-color);
  font-family: 'SF-Pro-Medium' !important;
  font-size: clamp(0.8rem, 0.3943rem + 3.4783vw, calc(14px + 1.2vh + 0.2vw));
  text-decoration: none;
}
/* MENU nivel 2*/
nav#navESPOL .menu-n2 {
  position: fixed;
  top: 0;
  inset-inline-start: calc(var(--menu-safe-area) + var(--menu-width));
  z-index: 5;
  display: none;
  width: var(--menu-width-submenu);
  block-size: calc(100dvh - var(--navicons) - var(--navmargin));
  overflow: auto;
  padding-inline: calc(var(--padding) * 2);
  padding-block: calc(var(--padding) * 4) calc(var(--padding) * 2);
  color: var(--bs-c-4);
  opacity: 0;
  gap: 1em;
  scroll-snap-type: y mandatory;
  scrollbar-gutter: auto;
  -webkit-overflow-scrolling: touch;
  isolation: isolate;
}
nav#navESPOL .menu-n2::before,
nav#navESPOL .menu-n2::after {
  content: "";
  position: fixed;
  z-index: 6;
  width: 100%;
  height: 40px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  mask-image: linear-gradient(var(--menu-mask-direction), white 40%, transparent 100%);
  -webkit-mask-image: linear-gradient(var(--menu-mask-direction), white 40%, transparent 100%);
  pointer-events: none;
  mask-composite: intersect;
  -webkit-mask-composite: source-in;
}
nav#navESPOL .menu-n2::before {
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.45) 0%, transparent 100%);
  --menu-mask-direction: 180deg;
}
nav#navESPOL .menu-n2::after {
  bottom: 45px;
  left: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.45) 0%, transparent 100%);
  --menu-mask-direction: 0deg;
}
/* nav#navESPOL li:is(:hover, :active, :focus, .wacg-hover) .menu-n2 {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
} */
nav#navESPOL li:is(:hover, :active,.wacg-hover) .menu-n2 {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}
nav#navESPOL .menu-n2 li {
  border-bottom: 1px solid hsla(0, 0%, 100%, 0.2);
  scroll-snap-align: center;
}
nav#navESPOL .menu-n2 li:is(:last-child, :hover:last-child) {
  border-bottom: none
}
nav#navESPOL .menu-n2 .navinfo {
  flex-direction: row;
  align-items: center;
  gap: 1em;
}
nav#navESPOL .menu-n2 * {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
/* Menu nivel 3*/
nav#navESPOL .menu-n2 :is(a, .menu-n3) {
  position: relative;
  text-decoration: none;
  font-family: inherit;
  font-weight: 700;
  font-size: clamp(0.85rem, 0.7rem + 1.5vw, 1.125rem);
}
nav#navESPOL .menu-n2 :is(a, .menu-n3)::after {
  position: absolute;
  top: 2px;
  right: -2em;
  width: auto;
  height: 100%;
  font-family: var(--font-icons);
  font-size: 0.74em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0;
}
nav#navESPOL .menu-n2 a::after {
  content: '\f178';
}
nav#navESPOL .menu-n2 .menu-n3::after {
  content: '\f054';
  opacity: var(--navinfo-opc);
}
nav#navESPOL .menu-n2 img {
  height: 80px;
  width: auto;
  object-fit: cover;
  object-position: center;
  border-radius: var(--radiusxs);
  margin-block: 10px;
  opacity: var(--navinfo-opc);
}
nav#navESPOL .menu-n2 span:last-child {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20px;
  width: fit-content;
  height: 100%;
  flex-wrap: nowrap;
  font-size: 0.8em;
  opacity: var(--navinfo-opc);
  text-wrap: balance;
  margin-block-end: 10px;
}
/* estados hover menu nivel 2 */
nav#navESPOL .menu-n2 li:hover {
  border-bottom: 1px solid hsla(0, 0%, 100%, 1);
}
nav#navESPOL :is(
  li:is(:hover, :active, :focus, .wacg-hover) .menu-n2,
  .menu-n2 li:hover :is(*, > a::after, > .menu-n3::after)) {
  opacity: 1;
}
nav#navESPOL .menu-n2 li:is(:hover, :active, :focus, .wacg-hover)> a::after {
  animation: menuESPOLfadeInLeft 500ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal forwards;
}
/* MENU nivel 3*/
nav#navESPOL ul.menu-n2 li:is(:hover, :active, :focus, .wacg-hover) .menu-n3 ~ ul,
nav#navESPOL .menu-n3[aria-expanded="true"] ~ ul {
  display: flex;
  align-items: flex-start;
}
nav#navESPOL .menu-n3 ~ ul {
  display: none;
  position: fixed;
  top: 0;
  inset-inline-start: calc(var(--menu-safe-area) * 3 + var(--menu-width) + var(--menu-width-submenu));
  block-size: 100%;
  padding: calc(var(--padding) * 4);
  gap: 1em;
  overflow: auto;
  flex-direction: column;
  justify-content: center;
}
nav#navESPOL .menu-n3 ~ ul li a {
  font-size: clamp(0.875rem, 0.75rem + 0.5vw, 1.125rem) !important;
}
/* Estilos para el menú de navegación hover :not hover */
nav#navESPOL:has(li:hover ul.menu-n2),
nav#navESPOL > ul:hover > :not(:hover) .menu-n1 {
  width: 100%;
}
nav#navESPOL > ul:hover > :not(:hover) .menu-n1 {
  opacity: var(--transparencia-nav);
  /* color: var(--bs-c-4) !important; */
}
/* FIN menú Navegación*/ 
/* Cursor personalizado para el menú */
.espol-cursor {
  display: none;
  position: fixed;
  z-index: 9999;
  display: flex;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  /* border: 1px solid var(--bs-c-4); */
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: difference;
  filter: contrast(2) brightness(1.5);
  -webkit-filter: contrast(2) brightness(1.5);
  transform: translate(-50%, -50%);
}
.espol-cursor .cursor-icon { /*revisar en el nav.js*/
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.espol-cursor.active {
  opacity: 0.3;
  animation: cursorPulseESPOL 2s ease-in-out infinite;
}
.espol-cursor.hover {
  border-color: var(--bs-c-4);
  transform: translate(-50%, -50%) scale(1.5);
}
.espol-cursor.click {
  transform: translate(-50%, -50%) scale(0.8);
}
/* Estilos para el scroll */
header#site_header.scrolldown {
  top: -60px
}
header#site_header.scrolldown #logo {
  position: relative;
  left: var(--padding);
  /* width: calc(var(--es-menu-logo) * 0.89); */
  width: 0;
  overflow: hidden;
  scale: 1.3;
}
header#site_header.scrolldown #logo svg *{
  fill: var(--bs-espol) !important;
}
header#site_header.scrolldown #header_barra {
  top: calc(var(--menu-scrolled-margin) * -1);
}
header#site_header.scrolldown #label-menu-ESPOL {
  top: var(--menu-scrolled-margin);
}
#close-label-menu-ESPOL svg,
header#site_header:has(#navESPOL > ul > li:is(:hover, :focus, :focus-visible)) #logo svg * {
  fill: var(--bs-c-4) !important;
}
/* Cuando el menú está abierto, desactivar efectos de scroll */
header#site_header:has(#menu_ESPOL:checked),
header#site_header:has(#menu_ESPOL:checked):where(.scrolldown, .scrollup) {
  top: 0 !important;
}
/* Modificador de la barra de scroll general del la web*/
*::-webkit-scrollbar {
  width: 10px;
  background-color: transparent;
}
*::-webkit-scrollbar-thumb {
  background-color: var(--bs-espol-1);
  border-radius: 20px;
  border: 2px solid var(--bs-espol-1);
}
body::-webkit-scrollbar {
  background-color: hsl(0, 0%, 0%);
}
/* Scrollbar personalizado para el menú de navegación nivel 2 */
nav#navESPOL :is(.menu-n1, .menu-n2)::-webkit-scrollbar {
  width: 12px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 50px;
}
nav#navESPOL :is(.menu-n1, .menu-n2)::-webkit-scrollbar-track {
  background: linear-gradient(180deg, 
            rgba(34, 50, 101, 0.2) 0%, 
            rgba(255, 255, 255, 0.05) 50%, 
            rgba(34, 50, 101, 0.2) 100%);
  border-radius: 50px;
}
nav#navESPOL :is(.menu-n1, .menu-n2)::-webkit-scrollbar-thumb {
  background: var(--bs-c-7-opc);
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4),
              inset 0 1px 0 rgba(255, 255, 255, 0.4),
              0 0 10px rgba(var(--bs-espol-rgb), 0.3);
}
nav#navESPOL :is(.menu-n1, .menu-n2)::-webkit-scrollbar-thumb:hover {
  background: var(--bs-c-4-opc);
  border: 1px solid rgba(255, 255, 255, 0.6);
  transform: scale(1.15);
}
nav#navESPOL :is(.menu-n1, .menu-n2)::-webkit-scrollbar-thumb:active {
  background: var(--bs-c-4);
}
/* Fin Scrollbar personalizado */
@media (max-width: 968px) {
  /* estilos de botones para el #header barra y # buscar */
    #label-menu-ESPOL {
      z-index: 1;
    }
    #label-menu-ESPOL,
    #buscar li {
      border: none;
      background-color: var(--bs-c-4);
      border-radius: 50%;
      box-shadow: var(--es-nav-btn-shadow);
    }
    :is(#label-menu-ESPOL, #close-label-menu-ESPOL, #buscar li):is(:hover, :active, :focus)  {
      background-color: var(--bs-c-5);
      border-radius: 50px !important;
      box-shadow: inset 3px 3px 9px rgba(0, 0, 0, 0.15),
                  inset -5px -5px 10px rgba(255, 255, 255, 0.9) !important;
      transform: scale(0.95) !important;
    }
    #label-menu-ESPOL, #close-label-menu-ESPOL, #buscar li {
      width: var(--menu-icons);
      height: var(--menu-icons);
    }
    #close-label-menu-ESPOL:is(:hover, :active, :focus) svg {
      fill: var(--bs-espol);
    }
    header#site_header.scrolldown :is(#label-menu-ESPOL, #close-label-menu-ESPOL, #buscar li) {
      background-color: var(--bs-espol);
      box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2),
                  -5px -5px 10px rgba(0, 0, 0, 0.2);
    }
    header#site_header.scrolldown :is(#label-menu-ESPOL, #close-label-menu-ESPOL, #buscar li):is(:hover, :active, :focus) {
      border: 1px solid var(--bs-c-4) !important;
      box-shadow: none !important;
    }
    header#site_header:has(#menu_ESPOL:checked) #logo svg,
    header#site_header.scrolldown :is(#label-menu-ESPOL, #close-label-menu-ESPOL, #buscar li) svg {
      fill: var(--bs-c-4);
    }
  /* Fin estilos de botones para el #header barra y #buscar */
	.iPad {
		padding-bottom: 15px;
	}
	.iPad .scl {
		bottom: 60px;
	}
	.iPad #acsd {
		bottom: 105px;
	}
	.iPhone {
		bottom: -35px !important;
		padding-bottom: 35px;
	}
  #menuESPOL,
  .liquidglass-effect {
    z-index: -2;
  }
  #logo svg {
    width: 14em;
  }
  header#site_header section:has(#acsd) {
    position: absolute;
    height: calc(var(--menu-mobile) + var(--es-menu-padding) * 3);
    width: 100%;
    background-color: transparent;
  }
  header#site_header .liquidglass-effect {
    display: none;
  }
  header#site_header:has(#menu_ESPOL:checked) section:has(#acsd) {
    display: flex;
    bottom: calc(var(--menu-mobile) * 2 + var(--es-menu-padding) * 2);
  }
	header#site_header {
		bottom: 0lvh;
		top: auto;
		display: flex;
		justify-content: space-evenly;
	}
	header section:has(.scl) {
		display: contents;
	}
	:is(.scl, #enls, #acs, #bs, #buscar)::after {
		display: none;
	}
	.scl {
		position: fixed;
		bottom: 45px;
		left: 0px;
		background: var(--bs-c-4);
		color: var(--bs-espol-nav);
		width: 100%;
		display: flex;
		justify-content: space-evenly;
	}
  .scl ul li:active {
    border-radius: var(--radiusxs);
    box-shadow: inset 3px 3px 5px hsl(0, 0%, 81%),
                inset -3px -3px 5px hsl(0, 0%, 100%) !important;
  }
  .scl li:hover {
    box-shadow: 3px 3px 5px hsl(0, 0%, 81%),
                -3px -3px 5px hsl(0, 0%, 100%) !important;
  }
  .scl li {
    opacity: 1 !important;
  }
	#acs, .scl, #enls, #acsd {
		z-index: 2;
	}
	#acsd, .scl {
		transform: translateY(500%);
	}
	header#site_header section.row.region.region-top-header-accesos {
		position: absolute;
	}
	.flick:hover::before, .tiktok:hover::before, .facebook:hover::before, .instagram:hover::before, .x_twitter:hover::before, .youtube:hover::before, .linkedin:hover::before, .behance:hover::before, .soundcloud:hover::before,
	#ads:hover::before, #av:hover::before, #outlook:hover::before, #sidweb:hover::before {
		border-left: none;
		display: none;
		opacity: 0;
	}
	.flick::after, .tiktok::after, .facebook::after, .instagram::after, .x_twitter::after, .youtube::after, .linkedin::after,.behance::after, .soundcloud::after {
		color: var(--bs-espol);
	}
	nav#menu_principal .links-container :where(a, span) {
		height: var(--menu-mobile);
	}
	nav#menu_principal .menu-n1 li:last-child {
		border-radius: 0;
	}
	#acsd {
		position: fixed;
		width: 100%;
		z-index: 0;
		padding-inline: var(--padding);
	}
  #acsd ul::before {
		content: "";
		position: absolute;
		top: 0;
		left: 10%;
		width: 80%;
		height: 2px;
		background-color: var(--bs-c-2-opc);
	}
	#acsd ul {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 1rem;
	}
	#acsd a {
		position: relative;
    height: calc(var(--menu-mobile) + var(--menu-margin));
		border: none;
    font-size: 1rem;
    font-weight: bolder;
	}
	#acsd a:hover {
		background-color: transparent;
		color: var(--bs-c-4) !important;
	}
	#buscar {
    position: fixed;
    top: 0;
    right: 0;
    display: flex;
    width: 100%;
    height: calc(var(--menu-escritorio) + var(--menu-scrolled-margin));
    align-items: center;
    justify-content: flex-end;
    padding-right: calc(var(--padding) + var(--menu-icons) + var(--menu-scrolled-margin) / 2);
    background-color: var(--es-header-bg);
    backdrop-filter: blur(var(--nav-blur));
    -webkit-backdrop-filter: blur(var(--nav-blur));
	}
  #buscar ul {
    position: relative;
    width: fit-content;
    height: var(--menu-icons);
    margin: 0;
    gap: 5px;
  }
  #buscador_ODS {
    background-size: 60%;
    background-color: var(--bs-c-4-opc);
  }
  :is(.scl, #enls, #acs, #idioma, #buscar) li:first-child, #buscador_web {
    margin-left: 0;
  }
  #buscador_web svg {
    width: 20px;
    height: 20px;
    aspect-ratio: 1 / 1;
  }
  #label-menu-ESPOL, #close-label-menu-ESPOL {
    top: 0;
    margin-block: calc(var(--menu-icons) - 32px);
    padding: 12px;
  }
  header#site_header.scrolldown #buscar,
  .liquidglass-effect {
    width: calc(100% - 20px);
    height: calc(var(--menu-mobile) + var(--menu-margin) + var(--navmargin) * 2);
    margin-inline: var(--menu-scrolled-margin);
    margin-block-start: var(--menu-scrolled-margin);
    padding-right: calc(var(--padding) + var(--menu-icons) - var(--menu-scrolled-margin) / 2);
  }
  header#site_header:has(#menu_ESPOL:checked) #buscar li {
    border: 1px solid var(--bs-c-4);
    box-shadow: none;
  }
  header#site_header:has(#menu_ESPOL:checked) #buscar {
    mask-image: linear-gradient(180deg, white 92%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, white 92%, transparent 100%);
  }
  header#site_header:has(#menu_ESPOL:checked) #buscar,
  header#site_header.scrolldown #buscar {
    background: transparent;
  }
  header#site_header.scrolldown {
    top: unset;
    bottom: -60px;
  }
  header#site_header.scrolldown .liquidglass-effect {
    display: block;
  }
  header#site_header.scrolldown #buscar {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    background: transparent;
    border-radius: var(--nav-dashboard-radius);
    box-shadow: inset 2px 2px 1px 0 rgba(255, 255, 255, 0.5),
                inset -1px -1px 1px 1px rgba(255, 255, 255, 0.5);
  }
  header#site_header.scrolldown #label-menu-ESPOL {
    top: calc(var(--menu-scrolled-margin) / 2);
  }
  header#site_header.scrolldown #header_barra {
    top: var(--menu-scrolled-margin);
    height: calc(var(--menu-icons) + var(--menu-margin));
  }
  header#site_header:has(#menu_ESPOL:checked) .liquidglass-effect {
    display: none;
  }
	/* MENU MOVIL */
	:is(.scl, #enls, #acs, #idioma) li:is(:first-child, :last-child) {
		margin: 0;
	}	
	header#site_header:has(nav#menu_principal li.menu-n1:hover) #acsd {
		opacity: 0;
		transform: translateY(300px);
	}
	.menu-n1::after {
		position: relative;
    inset: 0;
	}
  #header_barra {
    height: calc(var(--menu-icons) + var(--menu-margin) * 2);
    top: 0;
    padding-inline: var(--padding);
  }
  #menuESPOL {
    position: fixed;
    top: 0;
    height: calc(100dvh - var(--menu-mobile) - var(--navmargin) * 2);
    background-color: var(--bs-espol-opc);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    transform: translateY(100%);
  }
  #menu_ESPOL:checked + #label-menu-ESPOL ~ #menuESPOL {
    transform: translateY(0%);
  }
  header#site_header:has(#menu_ESPOL:checked),
  header#site_header:has(#menu_ESPOL:checked):where(.scrolldown, .scrollup) {
    top: unset !important;
  }
  header#site_header.scrolldown #logo {
    display: flex;
    align-items: center;
    width: calc(var(--es-menu-logo) * 0.65);
    height: 100%;
    left: calc(var(--padding) * 4);
    filter: none;
    -webkit-filter: none;
  }
  header#site_header:has(#menu_ESPOL:checked) :is(#acsd, .scl){
    z-index: 3;
    transform: translateY(0%);
  }
  nav#navESPOL {
    height: calc(100dvh - var(--navicons) * 2 - var(--navmargin) * 4 - calc(var(--menu-mobile) + var(--es-menu-padding) * 3));
  }
  nav#navESPOL > ul {
    position: relative;
    top: calc(var(--menu-icons) * 2);
    max-width: 100%;
    height: auto;
    padding-bottom: calc((var(--navicons) + var(--navmargin) * 2) * var(--acsd-li));
    padding-block-start: var(--padding);
    gap: 2rem;
  }
  nav#navESPOL > ul > li {
    width: 100%;
    flex-wrap: nowrap;
  }
  nav#navESPOL li .menu-n1 {
    width: 100%;
    height: fit-content;
    color: var(--bs-c-4);
  }
  nav#navESPOL .menu-n2 {
    position: relative;
    inset-inline-start: 0;
    width: 100%;
    height: 100%;
    block-size: 100%;
    padding-block: var(--padding);
    padding-inline-start: calc(var(--padding) * 3);
    background-color: hsla(0, 0%, 0%, 0.5);
  }

  nav#navESPOL > ul > li::after {
    content: '\f061';
    position: absolute;
    top: 0.2em;
    right: var(--padding);
    width: auto;
    height: auto;
    font-family: var(--font-icons);
    font-size: 1.2em;
    opacity: 1;
    animation: none !important;
  }
  nav#navESPOL li:is(:hover, :active, :focus, .wacg-hover) .menu-n2 {
    height: 100%;
    display: flex-start;
  }
  nav#navESPOL > ul > li:has(.menu-n2):hover::after {
    transform: translate(0) rotateZ(-180deg);
  }
  nav#navESPOL > ul > li:has(.menu-n2)::after {
    content: '\f078' !important;
    font-size: 1em;
  }
  nav#navESPOL .menu-n2::after {
    bottom: 0;
  }
  nav#navESPOL .menu-n2::before {
    height: 100px;
  }
  nav#navESPOL .menu-n3 ~ ul {
    position: relative;
    inset: 0;
    width: 100%;
    overflow: clip;
    padding: var(--padding);
    background-color: transparent;
  }
}
@media (max-width: 768px) {
  :root {
    --menu-icons: 40px;
  }
  .espol-cursor,
  .espol-cursor .cursor-icon,
  .espol-cursor.active {
    display: none;
  }
  .menu-n2 {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }
  #label-menu-ESPOL, #close-label-menu-ESPOL {
    margin-block: calc(var(--menu-icons) - 25px);
  }
  header#site_header.scrolldown #header_barra {
    height: calc(var(--menu-icons) + var(--menu-margin) + var(--menu-scrolled-margin) / 2);
  }
  #menuESPOL:has(nav#navESPOL li:nth-child(n):hover) .bg-ESPOL {
    animation: none !important;
    background-size: cover;
  }
  nav#navESPOL li .menu-n1 {
    padding-inline: var(--padding);
  }
  nav#navESPOL .menu-n2 {
    padding-inline-start: calc(var(--padding) * 2);
  }
  .bg-mask-menu-ESPOL {
    background: var(--bs-espol);
  }
  .bg-ESPOL {
    display: none;
  }
}
@media (max-width: 460px) {
  #logo svg {
    width: 45vw;
  }
  header#site_header.scrolldown #logo {
    width: 8.9vw;
  }
}
/* FIN MENU MOVIL */
/* Accesibilidad */
@media (prefers-reduced-motion: no-preference) {
  #logo svg {
    transition: fill 700ms cubic-bezier(0, 0.8, 0.58, 1);
  }
  .espol-cursor {
    transition: all 100ms ease;
  }
  header#site_header,
  #logo {
    transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  #header_barra,
  #header_barra ul,
  header#site_header li,
  #acsd a,
  #acsd, .scl {
    transition: all 500ms ease-in-out;
  }
  .switch-container .cross:before {
    transition: transform 500ms, box-shadow 500ms;
  }
  nav#navESPOL {
    transition: all 500ms cubic-bezier(0.8, 0, 0.25, 1);
  }
  nav#navESPOL > ul {
    transition: background 300ms ease-in-out;
  }
  #menuESPOL {
    transition: all 700ms cubic-bezier(0.8, 0, 0.25, 1);
  }
  .switch-container .cross {
    transition: background-color 500ms;
  }
  [data-tooltip]:hover::before {
    transition: opacity 200ms ease, transform 200ms ease;
  }
  [data-tooltip]:hover,
  [data-tooltip]:focus {
    transition: transform 100ms ease;
  }
  nav#navESPOL :is(.menu-n1, .menu-n2)::-webkit-scrollbar-thumb {
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  nav#navESPOL .menu-n2 li:hover img,
  nav#navESPOL .menu-n2 .menu-n3::after {
    transition: opacity 500ms cubic-bezier(0.33, 1, 0.68, 1);
  }
  nav#navESPOL li:is(:hover, :active, :focus, .wacg-hover) .menu-n2,
  nav#navESPOL ul.menu-n2 li:is(:hover, :active, :focus, .wacg-hover) .menu-n3 ~ ul,
  nav#navESPOL .menu-n3[aria-expanded="true"] ~ ul {
    animation: SubmenuESPOLfadeInLeft 500ms cubic-bezier(0.87, 0, 0.13, 1) 125ms 1 normal both;
  }
  #label-menu-ESPOL, #close-label-menu-ESPOL, #buscar, #buscar li,
  header#site_header {
    transition: all 666ms cubic-bezier(0.83, 0.02, 0.22, 1) !important;
  }
  header#site_header.scrolldown :is(#label-menu-ESPOL, #close-label-menu-ESPOL, #buscar li):is(:hover, :active, :focus) {
    transition: all 230ms cubic-bezier(0.83, 0.02, 0.22, 1) !important;
  }
  header#site_header:has(#menu_ESPOL:checked) #logo svg {
    transition: fill 1s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  }
  #buscar {
    transition: all 500ms cubic-bezier(0, 0.8, 0.58, 1);
	}
  nav#navESPOL li .menu-n1{
    transition: all 250ms ease-in-out;
  }
  header#site_header:has(nav#menu_principal li.menu-n1:hover) #acsd {
		transition: all 1s cubic-bezier(0, 1.27, 1, 1.09), opacity 150ms ease;
	}
  nav#navESPOL > ul > li::after {
    transition: all 500ms cubic-bezier(0.33, 1, 0.68, 1) !important;
  }
  nav#navESPOL > ul > li:hover .menu-n1::after {
    transition: width 300ms ease-in-out, opacity 150ms ease-in-out;
  }
  nav#navESPOL > ul > li:has(.menu-n2):hover::after {
    animation: menuESPOLfadeInLeft 1s cubic-bezier(0.85, 0, 0.15, 1) 0s 1 normal forwards;
  }
  nav#navESPOL > ul > li:hover::after {
    animation: menuESPOLfadeInLeftNotmenu-n2 1s cubic-bezier(0.85, 0, 0.15, 1) 0s 1 normal forwards;
  }
  .bg-menu {
    transition: all 500ms cubic-bezier(0.8, 0, 0.25, 1);
  }
  #label-menu-ESPOL,
  #close-label-menu-ESPOL {
    transition: all 500ms cubic-bezier(0, 0.8, 0.58, 1);
  }
  #menuESPOL:has(nav#navESPOL li:nth-child(n):hover) .bg-ESPOL {
    animation: menuESPOLbganimado 80s linear infinite alternate;
  }
  @media (max-width: 968px) {
    nav#navESPOL li:is(:hover, :active, :focus, .wacg-hover) .menu-n2 {
      animation: SubmenuESPOLfadeInTop 300ms cubic-bezier(0.55, 0.09, 0.68, 0.53) forwards;
    }
    #label-menu-ESPOL,
    #buscar li {
      transition: all 665ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
  }
}
@media (forced-colors: active) {
    body {
    background: Window;
    color: WindowText;
  }
}
/* Fin Accesibilidad */
/* Liquid Glass Prototipo */
.liquidglass-effect {
    position: fixed;
    top: 0;
    border-radius: var(--nav-dashboard-radius);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    box-shadow: inset 2px 2px 1px 0 rgba(255, 255, 255, 0.5),
                inset -1px -1px 1px 1px rgba(255, 255, 255, 0.5);
    filter: url(/sites/default/files/imagen_menu/glass-filter.svg#glass-distortion);
    -webkit-filter: url(/sites/default/files/imagen_menu/glass-filter.svg#glass-distortion);
    isolation: isolate;
    clip-path: inset(0 round var(--nav-dashboard-radius));
    -webkit-clip-path: inset(0 round var(--nav-dashboard-radius));
}
/* Safari*/
@supports ((-webkit-backdrop-filter: blur(1px)) and (not (backdrop-filter: blur(1px)))) or 
          (-webkit-touch-callout: none) or 
          (-webkit-hyphens: auto) {
    .liquidglass-effect {
        -webkit-clip-path: polygon(
            var(--nav-dashboard-radius) 0%, 
            calc(100% - var(--nav-dashboard-radius)) 0%, 
            100% var(--nav-dashboard-radius), 
            100% calc(100% - var(--nav-dashboard-radius)), 
            calc(100% - var(--nav-dashboard-radius)) 100%, 
            var(--nav-dashboard-radius) 100%, 
            0% calc(100% - var(--nav-dashboard-radius)), 
            0% var(--nav-dashboard-radius)
        );
    }
          header#site_header.scrolldown #buscar {
            background: linear-gradient(0deg,rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.3) 100%);
      }
}
/*iOS*/
@supports (-webkit-touch-callout: none) {
    @media screen and (max-device-width: 1024px) {
        .liquidglass-effect {
            -webkit-clip-path: polygon(
                var(--nav-dashboard-radius) 0%, 
                calc(100% - var(--nav-dashboard-radius)) 0%, 
                100% var(--nav-dashboard-radius), 
                100% calc(100% - var(--nav-dashboard-radius)), 
                calc(100% - var(--nav-dashboard-radius)) 100%, 
                var(--nav-dashboard-radius) 100%, 
                0% calc(100% - var(--nav-dashboard-radius)), 
                0% var(--nav-dashboard-radius)
            );
        }
    }
            header#site_header.scrolldown #buscar {
              background: linear-gradient(0deg,rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.3) 100%);
      }
}
/*FIN Liquid Glass Prototipo*/
/*Animación menú ESPOL*/
@keyframes menuESPOLbganimado {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes menuESPOLfadeInLeft {
	0% {
		opacity: 0;
		transform: translateX(-50px);
	}
	100% {
		opacity: 1;
		transform: translateX(0px);
	}
}
@keyframes menuESPOLfadeInLeftNotmenu-n2 {
	0% {
		opacity: 0;
		transform: translateX(-50px) rotate(-25deg);
	}
	100% {
		opacity: 1;
		transform: translateX(0px) rotate(-25deg);
	}
}
@keyframes SubmenuESPOLfadeInLeft {
	0% {
		opacity: 0;
    /* left: 0; */
	}
	100% {
		opacity: 1;
	}
}
@keyframes SubmenuESPOLfadeInTop {
	0% {
		opacity: 0;
    top: -40px;
	}
	100% {
		opacity: 1;
    top: 0;
	}
}
@keyframes menuESPOLBounceRight {
	0% {
		animation-timing-function: ease-in;
		opacity: 1;
		transform: translateX(48px);
	}
	24% {
		opacity: 1;
	}
	40% {
		animation-timing-function: ease-in;
		transform: translateX(26px);
	}
	65% {
		animation-timing-function: ease-in;
		transform: translateX(13px);
	}
	82% {
		animation-timing-function: ease-in;
		transform: translateX(6.5px);
	}
	93% {
		animation-timing-function: ease-in;
		transform: translateX(4px);
	}
	25%,
	55%,
	75%,
	87%,
	98% {
		animation-timing-function: ease-out;
		transform: translateX(0px);
	}

	100% {
		animation-timing-function: ease-out;
		opacity: 1;
		transform: translateX(0px);
	}
}
@keyframes cursorPulseESPOL {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
  }
}
/*FIN Animación menú ESPOL*/
/* Login Drupal */
body.user-logged-in header#site_header {
  position: relative;
}
body.user-logged-in :is(#label-menu-ESPOL, #close-label-menu-ESPOL, #header_barra) {
  position: absolute;
}
@media (max-width: 968px) {
  body.user-logged-in header#site_header {
    top: auto;
  }
  body.user-logged-in :is(header#site_header, #label-menu-ESPOL, #close-label-menu-ESPOL, #header_barra) {
    position: fixed;
  }
  body.user-logged-in :is(#buscar, #label-menu-ESPOL, #close-label-menu-ESPOL, #header_barra, .liquidglass-effect) {
    top: 45px;
  }
  body.user-logged-in header#site_header.scrolldown #label-menu-ESPOL {
    top: 48px;
  }
  body.user-logged-in header#site_header.scrolldown #header_barra {
    top: 55px;
  }
}
@media (max-width: 768px) {
  body.user-logged-in :is(#buscar, #label-menu-ESPOL, #close-label-menu-ESPOL, #header_barra, .liquidglass-effect) {
    top: 38px;
  }
  body.user-logged-in header#site_header.scrolldown #label-menu-ESPOL {
    top: 42px;
  }
    body.user-logged-in header#site_header.scrolldown #header_barra {
    top: 48px;
  }
}
/* Fin Login Drupal */