@import url('https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');
	.blizz {
	  width: 100vw;
	  height: var(--bar-height);
	  background: linear-gradient(180deg, #11141b, #0b0d12);
	  box-shadow: 0 1px 0 #252c37, 0 5px 5px -2px #00000044;
	}

	.warcraft {
	  --header-top: 75px;
	  --header-height: 4.475em;
	  --fixed-height: 50px;
	  --logo-offset: 3em;
	  font-size: 1.125rem;
	  font-weight: 600;
	  text-transform: uppercase;
	  position: absolute;
	  top: 0;
	  left: 20px;
	  right: 20px;
	  margin: auto;
	  z-index: 99799;
	}
	.warcraft * {
	  font-size: inherit;
	}
	.warcraft, .warcraft * {
	  will-change: font, transform, height, width, margin, padding, color, background;
	  transition: all 0.33s ease, font 0s ease;
	}

	.warcraft.small {
	  font-size: 0.75rem;
	  font-weight: 500;
	}

	.nav {
	  position: absolute;
	  transform: translate(-50%, var(--header-top));
	  left: 50%;
	  width: 1440px;
	  max-width: 100%;
	}
	.nav__burger, .nav__close {
	  display: none;
	}
	.nav__bg {
	  margin-left: calc( var(--logo-offset) + 1em );
	  position: relative;
	}
	.nav__bg, .nav__drawer {
	  background-color: var(--bg);
	  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.025), rgba(0, 0, 0, 0.075));
	  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25), 0 4px 12px -5px rgba(0, 0, 0, 0.65);
	}
	.nav__bg:before, .nav__drawer:before {
	  content: "";
	  position: absolute;
	  inset: 0;
	  background-image: var(--grunge);
	  background-position: center;
	  mix-blend-mode: overlay;
	  opacity: 0.22;
	}
	.nav__icon, .nav__blizz {
	  width: 2.8em;
	  height: 2.8em;
	  position: absolute;
	  left: 50%;
	  top: 50%;
	  transform: translate(-50%, -300%);
	  z-index: 1;
	  filter: brightness(0.9) contrast(0.9) saturate(0.9);
	  opacity: 0;
	  color: #00aeff;
	  cursor: url("./graficos/cursor.cur"),url("./graficos/cursor.png") 16 16, auto;
	}
	.nav__icon img, .nav__blizz img {
	  max-width: 100%;
	}
	.nav__icon:hover, .nav__icon:active, .nav__icon:focus, .nav__blizz:hover, .nav__blizz:active, .nav__blizz:focus {
	  filter: brightness(1.1) contrast(1.1) saturate(1);
	}
	.nav__blizz {
	  right: 0.5em;
	  left: auto;
	  transform: translate(0, -200px);
	  display: grid;
	  place-items: center;
	  place-content: center;
	/*  overflow: hidden; */
	}
	.nav__blizz svg {
	  width: 3.8em;
	}
	.nav__list {
	  height: var(--header-height);
	  display: flex;
	  list-style: none;
	  margin: 0;
	  padding: 0;
	}
	.nav__item {
	  position: relative;
	  display: flex;
	  justify-content: center;
	  align-items: stretch;
	}
	.nav__item--search {
	  margin-left: auto;
	}
	.nav__item--try, .nav__item--sub {
	  background-image: var(--grunge), linear-gradient(180deg, #ffffffb8, #676767);
	  background-color: #999;
	  background-blend-mode: overlay;
	  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2), inset 0 0 3px rgba(0, 0, 0, 0.2);
	  background-position: 28%, center;
	}
	.nav__item--try:before, .nav__item--sub:before {
	  background: var(--sub-bg);
	  box-shadow: inset 0 0 0 1px var(--sub-shadow);
	}
	.nav__item--sub:before {
	  background: var(--sub-bg);
	}
	.nav__item--try:before {
	  background: var(--try-bg);
	}
	.nav__item > a, .nav__item > button {
	  padding: 0 0.5rem;
	  margin: 0.075rem 0;
	  display: flex;
	  align-items: center;
	  border-right: 1px solid rgba(0, 0, 0, 0.5);
	  box-shadow: 2px 0 0 -1px rgba(255, 255, 255, 0.05);
cursor: url("./graficos/cursor.cur"),url("./graficos/cursor.png") 16 16, auto;
	}
	.nav__item > button {
	  justify-content: center;
	  width: 4em;
	}
	.nav__item svg {
	  position: absolute;
	  top: 50%;
	  left: 50%;
	  transform: translate(-50%, -50%);
	  height: 1.3em;
	  display: block;
	  padding: 0 0.25em;
	}
	.nav__item svg.close {
	  height: 1.5em;
	}
	.nav__item--alt > a,
	.nav__item--alt > button {
	  border-right: none;
	  border-left: 1px solid rgba(255, 255, 255, 0.05);
	  box-shadow: -2px 0 0 -1px rgba(0, 0, 0, 0.5);
	}
	.nav__item--alt:before {
	  content: "";
	  position: absolute;
	  inset: 0;
	  mix-blend-mode: hard-light;
	  border-left: none;
	}
	.nav__item:nth-child(2) > a, .nav__item:nth-last-child(2) > a, .nav__item:nth-child(2) > button, .nav__item:nth-last-child(2) > button {
	  border-left: 1px solid rgba(0, 0, 0, 0.5);
	  box-shadow: 2px 0 0 -1px rgba(255, 255, 255, 0.05), -2px 0 0 -1px rgba(255, 255, 255, 0.05);
	}
	.nav__item--sub > a, .nav__item--try > a {
	  border: none !important;
	}
	.nav__item--try > a {
	  box-shadow: none;
	}
	.nav__text {
	  position: relative;
	  padding: 0 2px;
	  background-image: linear-gradient(to bottom, var(--g-1-1) 0%, var(--g-1-2) 19%, var(--g-1-3) 30%, var(--g-1-4) 43%, var(--g-1-5) 50%, var(--g-1-5) 51%, white 100%);
	  background-size: 1em 2em;
	  color: var(--g-1-2);
	  -webkit-text-fill-color: transparent;
	  -webkit-background-clip: text;
	  filter: drop-shadow(0 0 0.1em transparent) drop-shadow(0 0.05em 0.05em black);
	  transition-timing-function: var(--ease);
	  transition-property: background, all, font-weight;
	  transition-duration: var(--time), 0.5s, 0s;
	  transition-delay: 0.2s, 0s, 0s;
	}
	.nav__item:hover .nav__text, .nav__item:focus .nav__text, .nav__item:active .nav__text {
	  filter: var(--hover-shadow);
	  background-position: center 100%;
	  background-size: 1em 6em;
	  transition-duration: var(--time), 0.5s;
	  transition-delay: 0s;
	}
	.nav__item:hover svg, .nav__item:focus svg, .nav__item:active svg {
	  color: white;
	}
	.nav__title {
	  position: relative;
	  width: 12em;
	  margin: 0;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  transform: translate(0, 0);
	}
	.nav__title:hover {
	  filter: brightness(1.3);
	}
	.nav__title a {
	  width: 100%;
	  display: flex;
	  justify-content: center;
	}
	.nav__logo {
	  position: absolute;
	  top: 50%;
	  height: var(--logo-height);
	  transform-origin: center;
	  transform: translateY(-50%) translateX(0) scale(1);
	  background-size: contain;
	  background-position: center;
	  background-repeat: no-repeat;
	}
	.nav__logo.small {
	  height: 2.5em;
	  opacity: 0;
	  position: relative;
	  top: -2px;
	  transform: translateX(0) scale(2);
	}
	.nav__logo.large {
	  aspect-ratio: var(--logo-aspect);
	  background-image: var(--logo-large);
	  transform: translateY(-50%) translateX(calc( var(--logo-offset) * -0.7 )) scale(1);
	}
	.nav__alt {
	  position: absolute;
	  clip: rect(0 0 0 0);
	 /* overflow: hidden; */
	  visibility: hidden;
	}
	.nav__search {
	  position: absolute;
	  left: calc( 0em - var(--logo-offset) );
	  right: 0;
	  top: calc( var(--header-height) );
	/*  overflow: hidden; */
	  padding: 3em 2em;
	  background-color: var(--bg);
	  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.25), transparent);
	  box-shadow: inset 0 30px 30px -25px black, 0 5px 10px -5px black;
	  height: 10em;
	  border: 1px solid var(--bg-border);
	  transform: translateY(-5em) scaleY(0);
	  opacity: 0;
	  z-index: -1;
	}
	.nav__search__input {
	  border: 1px solid var(--bg-border);
	  background: rgba(0, 0, 0, 0.75);
	  width: 100%;
	  padding: 1.15em 1em 1.15em 2em;
	  color: white;
	  font-family: "Open Sans", sans-serif;
	  font-size: 12.5px;
	  text-rendering: optimizelegibility;
	  font-feature-settings: "kern" 1, "kern";
	  -webkit-font-kerning: normal;
			  font-kerning: normal;
	  text-indent: 2em;
	}
	.nav__search__input::-moz-placeholder {
	  color: var(--g-1-2);
	  font-style: italic;
	}
	.nav__search__input:-ms-input-placeholder {
	  color: var(--g-1-2);
	  font-style: italic;
	}
	.nav__search__input::placeholder {
	  color: var(--g-1-2);
	  font-style: italic;
	}
	.nav__search__input:focus {
	  outline: none;
	  border: 1px solid var(--bg-border-active);
	  box-shadow: 0 0 10px 0px var(--bg-border-active);
	}
	.nav__search__label {
	  display: block;
	  position: relative;
	}
	.nav__search__label svg {
	  color: var(--g-1-3);
	  position: absolute;
	  left: 1em;
	  top: 50%;
	  transform: translateY(-50%);
	  height: 1.8em;
	  z-index: 1;
	}

	.warcraft .nav__list .find {
	  opacity: 1;
	  transform: translateY(-50%) translateX(-50%);
	}
	.warcraft .nav__list .close {
	  opacity: 0;
	  transform: translateY(50%) translateX(-50%);
	}

	.warcraft.searching .nav__search {
	  transform: translateY(0) scaleY(1);
	  opacity: 0.9;
	}
	.warcraft.searching .nav__list .find {
	  opacity: 0;
	  transform: translateY(-150%) translateX(-50%);
	}
	.warcraft.searching .nav__list .close {
	  opacity: 1;
	  transform: translateY(-50%) translateX(-50%);
	}

	.warcraft.fixed {
	  position: fixed;
	  left: 0;
	  right: 0;
	}
	.warcraft.fixed .nav {
	  transform: translate(-50%, 0);
	  -webkit-animation: fixHeader 0s linear 0s forwards;
			  animation: fixHeader 0s linear 0s forwards;
	  width: 100%;
	}
	.warcraft.fixed .nav__bg {
	  margin-left: 0;
	}
	.warcraft.fixed .nav__list {
	  height: var(--fixed-height);
	}
	.warcraft.fixed .nav__title {
	  width: 4em;
	}
	.warcraft.fixed .nav__logo.small {
	  opacity: 1;
	  transform: scale(1);
	}
	.warcraft.fixed .nav__logo.large {
	  opacity: 0;
	  transform: translateY(-50%) translateX(50%) scale(0);
	}
	.warcraft.fixed .nav__search {
	  top: calc( var(--fixed-height) );
	  left: 0;
	}

	@media screen and (max-width: 1300px) {
	  .warcraft {
		font-size: 0.9em;
	  }

	  .nav__list {
		font-weight: 500;
	  }
	}
	@media screen and (max-width: 1100px) {
	  .warcraft .nav__list {
		height: var(--fixed-height);
	  }

	  .nav__search {
		left: 0;
		top: calc( var(--header-height) - 1em );
	  }
	}
	@media screen and (max-width: 1000px) {
		.resize {
	  margin-top: 15% !important;

			}
		
	  .warcraft {
		font-size: 0.75em;
	  }

	  .nav__bg {
		margin-left: 0;
	  }

	  .nav__title {
		width: 4em;
	  }

	  .nav__logo.small {
		opacity: 1;
		transform: scale(1);
	  }

	  .nav__logo.large {
		opacity: 0;
		transform: translateY(-50%) translateX(50%) scale(0);
	  }

	  .nav__search {
		top: calc( var(--header-height) - 0.35em );
	  }
	}
	@media screen and (max-width: 800px) {

	.resize {
	  margin-top: 20% !important;
			}

	  .blizz {
		position: fixed;
		top: 0;
	  }

	  .warcraft {
		position: fixed;
		left: 0;
		right: 0;
		top: calc( var(--bar-height) + 1px );
	  }
	  .warcraft .nav {
		transform: translate(-50%, 0);
		-webkit-animation: fixHeader 0s linear 0s forwards;
				animation: fixHeader 0s linear 0s forwards;
		width: 100%;
	  }
	}
	@media screen and (max-width: 660px) {
	  .blizz {
		display: none;
	  }

	  .warcraft {
		font-size: 1em;
		top: 0;
	  }
	  .warcraft .nav__bg {
		height: var(--fixed-height);
	  }
	  .warcraft .nav__icon,
	.warcraft .nav__blizz {
		opacity: 1;
		transform: translate(-50%, -50%);
	  }
	  .warcraft .nav__blizz {
		transform: translate(0%, -50%);
	  }
	  .warcraft.open .nav__icon, .warcraft.open .nav__blizz {
		opacity: 0.5;
	  }
	  .warcraft .nav__drawer {
		position: fixed;
		left: 0;
		width: 320px;
		max-width: calc( 100vw - 60px);
		height: 100vh;
		/*overflow-y: auto; */
		background-image: none;
		box-shadow: inset 0 0 0 1px var(--bg-border), 20px 0 30px -20px #0009;
		transition: all 0.33s ease, font 0s ease, height 0s ease;
		transform: translateX(-120%);
		z-index: 2;
	  }
	  .warcraft .nav__drawer:after {
		content: "";
		background-image: url(graficos/logo.png);
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
		width: 28vw;
		height: auto;
		aspect-ratio: 3;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		top: max(690px, 90%);
		opacity: 0.2;
	  }
	  .warcraft.open .nav__drawer {
		transform: translateX(0%);
	  }
	  .warcraft .nav__burger,
	.warcraft .nav__close {
		position: absolute;
		left: 0;
		top: 1.5em;
		transform: translateY(-50%);
		height: 3.6em;
		width: auto;
		aspect-ratio: 1;
		color: var(--g-1-2);
		display: block;
		cursor: url("./graficos/cursor.cur"),url("./graficos/cursor.png") 16 16, auto;
		padding: 1em;
		z-index: 1;
	  }
	  .warcraft .nav__title, .warcraft.fixed .nav__title {
		width: 100%;
	  }
	  .warcraft .nav__logo.small {
		display: none;
	  }
	  .warcraft .nav__logo.large, .warcraft.fixed .nav__logo.large {
		opacity: 1;
		transform: none;
		position: relative;
		margin: 1.5em 0 0;
		width: 80%;
		aspect-ratio: 2.55;
	  }
	  .warcraft .nav__list {
		flex-direction: column;
		text-align: left;
		justify-content: stretch;
		align-items: stretch;
	  }
	  .warcraft .nav__item {
		margin: 0;
	  }
	  .warcraft .nav__item:not(.nav__item--logo) {
		flex-direction: column;
		justify-content: stretch;
	  }
	  .warcraft .nav__item > a,
	.warcraft .nav__item > button {
		padding: 0.8em 1em;
		border: none;
		box-shadow: none;
	  }
	  .warcraft .nav__item--logo {
		margin-bottom: 90px;
	  }
	  .warcraft .nav__item--sub,
	.warcraft .nav__item--try {
		margin-top: 1em;
	  }
	  .warcraft .nav__item--sub > a,
	.warcraft .nav__item--try > a {
		justify-content: center;
		padding: 1.35em;
	  }
	  .warcraft .nav__item--search {
		display: none;
	  }
	  .warcraft .nav__search {
		position: absolute;
		left: 0;
		right: 0;
		top: var(--nav-search-top) !important;
		/* overflow: hidden; */
		padding: 1em 0;
		height: auto;
		background: transparent;
		box-shadow: none;
		border: 1px solid transparent;
		z-index: 1;
		transform: translateY(0) scaleY(1);
		opacity: 0.9;
	  }
	  .warcraft .nav__search__input {
		padding: 1.15em 1em 1.15em 1.8em;
	  }
	  .warcraft .nav__search__label svg {
		height: 1.2em;
		z-index: 1;
	  }
	.resize {
	  margin-top: 20% !important;
			}
	}
	.overlay {
	  background: #000000a6;
	  position: fixed;
	  inset: 0;
	  opacity: 0;
	  display: none;
	}

	.warcraft.open ~ .overlay {
	  display: block;
	  -webkit-animation: overfade 0.3s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
			  animation: overfade 0.3s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
	}

	@-webkit-keyframes fixHeader {
	  0%, 100% {
		transform: translate(-50%, 0);
	  }
	}

	@keyframes fixHeader {
	  0%, 100% {
		transform: translate(-50%, 0);
	  }
	}
	@-webkit-keyframes overfade {
	  100% {
		opacity: 1;
	  }
	}
	@keyframes overfade {
	  100% {
		opacity: 1;
	  }
	}
	:root {
	  --body: #000000;
	  --bg: #20130f;
	  --bg-border: #352011;
	  --bg-border-active: #5c3b24;
	  --grunge: url(https://live.staticflickr.com/4081/4902962864_c71114e208_b.jpg);
	  --logo-large: url(graficos/wow-logo-large.png);
	  --logo-small: url(graficos/wow-logo-small.png);
	  --logo-height: 6em;
	  --logo-aspect: 2.55;
	  --g-1-1: #efd100;
	  --g-1-2: #e2a233;
	  --g-1-3: #f0c328;
	  --g-1-4: #fff1a3;
	  --g-1-5: #ffe13e;
	  --sub-bg: #5c1105;
	  --try-bg: #350d0b;
	  --sub-shadow: #cb361d3d;
	  --shadow: #ffdba3c7;
	  --hover-shadow: drop-shadow(0 0 0.22em var(--shadow)) drop-shadow(0 0 .66em var(--shadow)) drop-shadow(0 0.05em 0.05em black);
	  --time: .25s;
	  --ease: cubic-bezier(.23,1,.32,1);
	  --nav-search-top: clamp( 10px, 130px, 36vw );
	  --bar-height: 36px;
	}

	main.tbc {
	  --body: #a3fd00;
	  --bg: #1e2317;
	  --bg-border: #2c3518;
	  --bg-border-active: #526b34;
	  --g-1-1: #efd100;
	  --g-1-2: #e2a233;
	  --g-1-3: #f0c328;
	  --g-1-4: #deffa3;
	  --g-1-5: #a3ff34;
	  --sub-bg: #354401;
	  --try-bg: #31300f;
	  --sub-shadow: #7180295e;
	  --shadow: #74ff00;
	  --hover-shadow: drop-shadow(0 0 3px white) drop-shadow(0 -0.1em 0.5em var(--shadow)) drop-shadow(0 0.05em 0.05em black);
	  --logo-large: url(graficos/wow-logo-large-tbc.webp);
	  --logo-height: 7.9em;
	  --logo-aspect: 2.1;
	  --nav-search-top: clamp( 10px, 155px, 45vw );
	}
	main.wolk {
	  --body: #2b1a2f;
	  --bg: #181c22;
	  --bg-border: #303740;
	  --bg-border-active: #475c6b;
	  --g-1-1: #dbe0e8;
	  --g-1-2: #d6dee2;
	  --g-1-3: #b3bfcb;
	  --g-1-4: #c9d1d8;
	  --g-1-5: #73e5ff;
	  --sub-bg: #023553;
	  --try-bg: #142732;
	  --sub-shadow: #7dc0f13d;
	  --shadow: #61e9ffde;
	  --hover-shadow: drop-shadow(0 0 0.1em black) drop-shadow(0 0 0.22em var(--shadow)) drop-shadow(0 0 .66em var(--shadow)) drop-shadow(0 0.05em 0.05em black);
	  --logo-large: url(graficos/wow-logo-large-wolk.webp);
	  --logo-height: 7.5em;
	  --logo-aspect: 2.1;
	  --nav-search-top: clamp( 10px, 155px, 48vw );
	}
	main.mop {
	  --body: #2b1a2f;
	  --bg: #473529;
	  --bg-border: #6f5843;
	  --bg-border-active: #8b7664;
	  --g-1-5: #29eca3;
	  --sub-bg: #26402d;
	  --try-bg: #0d3120;
	  --sub-shadow: #90dea73d;
	  --shadow: #65ffd48f;
	  --hover-shadow: drop-shadow(0 0.05em 0.05em black) drop-shadow(0 0 0.05em var(--shadow)) drop-shadow(0 0 0.1em var(--shadow)) drop-shadow(0 0 0.4em var(--shadow)) drop-shadow(0 0.05em 0.05em black);
	  --logo-large: url(graficos/wow-logo-large-mop.webp);
	  --logo-height: 7.5em;
	  --logo-aspect: 2.1;
	  --nav-search-top: clamp( 10px, 155px, 48vw );
	}
	main.mop .nav__text {
	  background-image: linear-gradient(to bottom, var(--g-1-1) 0%, var(--g-1-2) 19%, var(--g-1-3) 30%, var(--g-1-4) 43%, var(--g-1-5) 50%, #fff 51%, #89ffb2 100%);
	}

	main {
	  display: flex;
	  justify-content: center;
	  padding: 0 20px;
	}

	body {

	  font-family: semplicitapro, sans-serif;
	  font-weight: 400;
	  color: white;
	  background-color: var(--body);
	  background-image: url(graficos/bg_masthead.webp);
	  background-position: top center;
	  background-size: cover;
	  background-repeat: no-repeat, repeat-y;
	  background-blend-mode: screen;
	  position: relative;
	}
	body:before {
	  content: "";
	  position: absolute;
	  inset: 0;
	  background-image: url(https://cdn.pixabay.com/photo/2015/12/03/08/50/paper-1074131_1280.jpg);
	  background-size: cover;
	  background-position: center;
	  mix-blend-mode: multiply;
	  opacity: 0.75;
	}

	body, html {
			/* cursor */
	cursor: url("./graficos/cursor.cur"),url("./graficos/cursor.png") 16 16, auto !important;
	  height: 100%;
	}

	body {

	 /* min-height: 3000px; 
	  overflow-x: hidden;*/
	}

	a {
	  text-decoration: none;
	}

	button {
	cursor: url("./graficos/cursor.cur"),url("./graficos/cursor.png") 16 16, auto;
	  -webkit-appearance: none;
		 -moz-appearance: none;
			  appearance: none;
	  background: none;
	  border: none;
	}

	svg {
	  fill: currentColor;
	}

	* {
	  box-sizing: border-box;
	}

	.switch {
	  position: fixed;
	  bottom: 20px;
	  left: 20px;
	  right: 20px;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  font-size: 1em;
	}
	.switch input {
	  accent-color: var(--g-1-5);
	  font-size: 1.2em;
	  margin: 0 0.5em;
	}
	.switch label {
	  margin: 0 1em;
	}

	.resize {
	  position: relative;
	/*  left: 50%; */
	  margin-top: 5%;
	/*  transform: translate(-50%, -50%); */
	/*  opacity: 0.5; */
	  font-size: 1.3em;
	  text-align: center;
	  width: 100%;
		z-index:200;
	}
	.resize small {
	  display: block;
	 margin-top: 5%;
	}

	/* ------------ */
	.maztek-panel{

		width:90%;
		max-width:1100px;

		margin:8vh auto;

		padding:6px;

		border:2px solid #c8a24a;

		background:linear-gradient(145deg,#0a0a0a,#1b1b1b);

		box-shadow:
		0 0 30px rgba(0,0,0,0.9),
		inset 0 0 25px rgba(0,0,0,0.9),
		0 0 10px rgba(200,162,74,0.3);
	}


.maztek-panel-inner {

    padding: clamp(20px, 4vw, 50px);
    border: 1px solid rgba(200,162,74,0.6);

    background:
    radial-gradient(circle at 30% 20%, #2a2a2a 0%, #111 70%),
    repeating-linear-gradient(
        45deg,
        rgba(255,255,255,0.02) 0px,
        rgba(255,255,255,0.02) 2px,
        transparent 2px,
        transparent 6px
    );

    color: #eaeaea;
    font-family: 'Segoe UI', Tahoma, sans-serif;
    line-height: 1.7;
}

/* TITULO */
.maztek-title {
    font-size: clamp(24px, 3vw, 36px);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 20px;
    border-left: 4px solid #c8a24a;
    padding-left: 15px;
}

.maztek-title span {
    color: #c8a24a;
}

/* INTRO */
.maztek-intro {
    font-size: 1.05rem;
    margin-bottom: 30px;
    color: #cfcfcf;
}

/* BLOQUES */
.maztek-block {
    margin-bottom: 30px;
    padding-left: 10px;
    border-left: 2px solid rgba(200,162,74,0.3);
}

.maztek-block h3 {
    color: #c8a24a;
    margin-bottom: 10px;
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.maztek-block ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}	

.maztek-block li {
    margin-bottom: 6px;
    padding-left: 18px;
	font-size: 1.2rem;
    position: relative;
	 list-style: none; /* refuerzo extra */
}

.maztek-block li::before {
    content: "\25B8"; /* ? */
    position: absolute;
    left: 0;
    color: #c8a24a;
}

/* FOOTER */
.maztek-footer {
  /*  margin-top: 40px; */
    padding-top: 20px;
    border-top: 1px solid rgba(200,162,74,0.3);
}

.maztek-footer .highlight {
    color: #c8a24a;
    font-weight: bold;
    margin-top: 10px;
}

.maztek-footer .cta {
    margin-top: 15px;
    font-size: 0.95rem;
    color: #aaa;
    opacity: 0.9;
}

/* HOVER SUTIL (detalle pro) */
.maztek-panel-inner:hover {
    box-shadow: 0 0 25px rgba(200,162,74,0.15);
    transition: 0.3s ease;
}


	/* TITULO */

	.maztek-panel h2{
background-image: linear-gradient(to bottom, var(--g-1-1) 0%, var(--g-1-2) 19%, var(--g-1-3) 30%, var(--g-1-4) 43%, var(--g-1-5) 50%, var(--g-1-5) 51%, white 100%);
    background-size: 1em 2em;
    color: var(--g-1-2);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
		color:#d4b15a;

		font-family: noto-sans, sans-serif;

		letter-spacing:2px;

		margin-bottom:20px;

		font-size:clamp(20px,3vw,32px);
	}


	/* TEXTO */

	.maztek-panel p{

		color:#d6d6d6;

		line-height:1.6;

		font-size:clamp(14px,1.5vw,18px);
	}

	#maztek-sparks{
	will-change: transform;
	position:fixed;
	left:0;
	top:0;
	width:100%;
	height:100%;
	pointer-events:none;
	z-index:1;
	}





/* FOOTER */

.maztek-footer{
	
	font-family: noto-sans, sans-serif;
	

/* margin-top:120px; */

padding:40px 20px;

background:linear-gradient(145deg,#0b0b0b,#1a1a1a);

border-top:2px solid #c8a24a;

box-shadow:
0 -10px 30px rgba(0,0,0,0.9),
inset 0 0 20px rgba(0,0,0,0.9);

}

.maztek-footer-inner{

max-width:1200px;

margin:auto;

padding:30px;

border:1px solid rgba(200,162,74,0.5);

background:
radial-gradient(circle at top,#222 0%,#111 70%);

}

/* GRID */

.footer-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(200px,1fr));

gap:40px;

margin-bottom:40px;

}

/* TITULOS */

.footer-col h4{

color:#d4b15a;

letter-spacing:0px;

margin-bottom:15px;

font-size:18px;
	background-image: linear-gradient(to bottom, var(--g-1-1) 0%, var(--g-1-2) 19%, var(--g-1-3) 30%, var(--g-1-4) 43%, var(--g-1-5) 50%, var(--g-1-5) 51%, white 100%);
    background-size: 1em 2em;
    color: var(--g-1-2);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    filter: drop-shadow(0 0 0.1em transparent) drop-shadow(0 0.05em 0.05em black);

}

/* LISTAS */

.footer-col ul{

list-style:none;

padding:0;

margin:0;

}

.footer-col ul li{

margin:6px 0;

color:#d0d0d0;

font-size:14px;

}

/* LINKS */

.footer-col a{

color:#d0d0d0;

text-decoration:none;

transition:.3s;

}

.footer-col a:hover{

color:#ffd700;

text-shadow:0 0 10px gold;

}

/* REDES */

.footer-socials{

display:flex;

flex-direction:column;

gap:6px;

}

/* BOTTOM */

.footer-bottom{

border-top:1px solid rgba(200,162,74,0.4);

padding-top:20px;

text-align:center;

font-size:14px;

color:#aaa;

letter-spacing:1px;

}

/*  banderin */

.banderin{
  display:inline-block;
  perspective:1000px;
top: 15px;
	padding: 30px;
}

.banderin img{
  width:220px;
  height:auto;
  transform-origin: top center;
  animation: ondear 4s ease-in-out infinite;
}

@keyframes ondear{
  0%{
    transform: rotateZ(0deg) rotateY(0deg);
  }
  25%{
    transform: rotateZ(1deg) rotateY(4deg);
  }
  50%{
    transform: rotateZ(0deg) rotateY(0deg);
  }
  75%{
    transform: rotateZ(-1deg) rotateY(-4deg);
  }
  100%{
    transform: rotateZ(0deg) rotateY(0deg);
  }
}



.imgmods {

padding: 30px;
	
}
/* LOADER */
#maztek-loader{
  position: fixed;
  inset: 0;
  background: radial-gradient(circle,#1a1a1a 0%, #000 80%);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99988;
}

/* CONTENEDOR */
.loader-wrapper{
  position: relative;
  width: 120px;
  height: 120px;
}

/* SPINNER */
.maztek-spinner{
  width: 100%;
  height: 100%;
  animation: maztekRotate 2s linear infinite;
  filter: drop-shadow(0 0 10px rgba(255,215,120,.8));
  position: relative;
  z-index: 1;
}

/* ICONO CENTRADO */
.loader-icon{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  pointer-events: none;
}

/* IMAGEN */
.loader-icon img{
  width: 55px;
  height: auto;
  display: block;
  filter: drop-shadow(0 0 8px rgba(255,215,120,0.6));
}

/* ANIMACIÓN */
@keyframes maztekRotate{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}

/* TEXTO */
.loader-text{
  color: #e6c26a;
  text-shadow:
    0 0 8px rgba(255,215,120,.7),
    0 0 20px rgba(255,215,120,.5);
}

/* ANIMACIONES */
@keyframes maztekRotate{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}

@keyframes pulse{
  0%,100%{ transform: scale(1); }
  50%{ transform: scale(1.08); }
}


/* CONTENEDOR RESPONSIVO */
.video-frame {
   width: 100%;
  max-width: 500px;
  margin: auto;
}

/* BORDE ESTILO DORADO */
.frame-border {
	display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
	
	will-change: transform;
  width: 100%;
  height: 100%;
  position: relative;
  border: 2px solid #d4af37;
  box-shadow: 
    0 0 10px rgba(212,175,55,0.6),
    inset 0 0 10px rgba(212,175,55,0.4);
}
.frame-borderr {
	will-change: transform;
  width: 100%;
  height: 100%;
  padding: 10px;
  position: relative;
  border: 2px solid #d4af37;
  box-shadow: 
    0 0 10px rgba(212,175,55,0.6),
    inset 0 0 10px rgba(212,175,55,0.4);
}
/* BORDE INTERNO */
.frame-border::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 6px;
  right: 6px;
  bottom: 6px;
  border: 1px solid rgba(212,175,55,0.5);
  pointer-events: none;
}

/* VIDEO */

video {
	width: 100%;
  height: auto; /* 🔥 clave */
  object-fit: contain;
  object-position: center; /* centrado */
  display: block;
  background: black; /* relleno si sobran espacios */
}

/* EFECTO DE DESTELLOS */

.frame-borderr::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid transparent;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255, 215, 0, 0.6),
    transparent
  );
  -webkit-mask: 
    linear-gradient(#000 0 0) content-box, 
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;

  animation: shine 4s infinite;
}

.frame-border::after {
  content: "";
  position: absolute;
  top: 0;
  left: -50%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255, 215, 0, 0.3),
    transparent
  );
  animation: shine 4s infinite;

	

@keyframes shine {
  0% {
    left: -50%;
  }
  100% {
    left: 150%;
  }
}
	
}
/* WRAPPER CENTRADO */
.maztek-bracket-wrapper {
    display: flex;
    justify-content: center;
    padding: clamp(20px, 4vw, 50px);
}

/* PANEL ESTILO MAZTEK */
.maztek-bracket {
    display: flex;
    gap: clamp(20px, 4vw, 50px);
    overflow-x: auto;

    padding: clamp(20px, 3vw, 40px);
    border: 1px solid rgba(200,162,74,0.6);

    background:
    radial-gradient(circle at 30% 20%, #2a2a2a 0%, #111 70%),
    repeating-linear-gradient(
        45deg,
        rgba(255,255,255,0.02) 0px,
        rgba(255,255,255,0.02) 2px,
        transparent 2px,
        transparent 6px
    );

    max-width: 1200px;
    width: 100%;
}

/* COLUMNAS */
.round {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 50px;
    min-width: 180px;
}

/* TITULOS */
.round h3 {
    text-align: center;
    color: #c8a24a;
    letter-spacing: 1px;
    font-size: 13px;
    border-bottom: 1px solid rgba(200,162,74,0.3);
    padding-bottom: 5px;
}

/* MATCH */
.match {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* INPUTS */
.match input {
    background: #1a1a1a;
    border: 1px solid rgba(200,162,74,0.4);
    padding: 8px;
    color: #eee;
    font-size: 13px;
    outline: none;
    transition: 0.25s;
    border-radius: 4px;
}

.match input::placeholder {
    color: #777;
}

/* HOVER PRO */
.match input:focus {
    border-color: #c8a24a;
    box-shadow: 0 0 12px rgba(200,162,74,0.25);
}

/* FINAL */
.final .champion input {
    text-align: center;
    font-weight: bold;
    color: #c8a24a;
    border: 2px solid #c8a24a;
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .maztek-bracket {
        gap: 20px;
    }

    .round {
        min-width: 140px;
        gap: 30px;
    }

    .match input {
        font-size: 12px;
        padding: 6px;
    }
}

/* EXTRA: SCROLL SUAVE */
.maztek-bracket::-webkit-scrollbar {
    height: 6px;
}

.maztek-bracket::-webkit-scrollbar-thumb {
    background: rgba(200,162,74,0.4);
}



/* boton descarga  */


.maztek-btn-download {
    position: relative;
    display: inline-block;
    padding: 14px 40px;
    text-align: center;

    color: #c8a24a;
    font-weight: bold;
    font-size: 14px;
    letter-spacing: 1px;
    text-decoration: none;

    border: 2px solid #c8a24a;
    border-radius: 6px;

    background: linear-gradient(145deg, #111, #1a1a1a);

    overflow: hidden;
    transition: 0.3s ease;
}

/* HOVER BASE */
.maztek-btn-download:hover {
    color: #fff;
    box-shadow:
        0 0 10px rgba(200,162,74,0.4),
        0 0 25px rgba(200,162,74,0.3),
        0 0 50px rgba(200,162,74,0.2);
}

/* BRILLO INTERNO (GLOW ORO) */
.maztek-btn-download::before {
    content: "";
    position: absolute;
    inset: 0;

    background: linear-gradient(
        120deg,
        transparent 20%,
        rgba(255, 215, 120, 0.2),
        rgba(255, 215, 120, 0.4),
        rgba(255, 215, 120, 0.2),
        transparent 80%
    );

    opacity: 0;
    transition: 0.4s;
}

/* ACTIVA EL GLOW */
.maztek-btn-download:hover::before {
    opacity: 1;
}

/* EFECTO LUZ QUE PASA (SHINE) */
.maztek-btn-download::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -75%;
    width: 50%;
    height: 200%;

    background: linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,0.6),
        transparent
    );

    transform: rotate(25deg);
    transition: 0.6s;
}

/* ANIMACIÓN AL HOVER */
.maztek-btn-download:hover::after {
    left: 130%;
}

/* EFECTO CLICK */
.maztek-btn-download:active {
    transform: scale(0.97);
    box-shadow: 0 0 10px rgba(200,162,74,0.3);
}

@keyframes maztekGlow {
    0% { box-shadow: 0 0 5px rgba(200,162,74,0.2); }
    50% { box-shadow: 0 0 20px rgba(200,162,74,0.5); }
    100% { box-shadow: 0 0 5px rgba(200,162,74,0.2); }
}

.maztek-btn-download {
    animation: maztekGlow 3s infinite;
}



.maztek-mictlan-bg {
    width: 100%;
    height: 500px; /* ajusta según lo alto que lo quieras */
    
    background-image: url('/graficos/footer_.jpg');
    background-size: cover;
    background-position: center top; /* importante para el efecto de descenso */
    background-repeat: no-repeat;
background-attachment: fixed;
    position: relative;
    overflow: hidden;
}
.maztek-mictlan-bg::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background: linear-gradient(
        to bottom,
        #000 0%,
        rgba(0,0,0,0.9) 4%,
        rgba(0,0,0,0.4) 7%,
        rgba(0,0,0,0) 15%
    );

    pointer-events: none;
}


/* CONTENEDOR FLOTANTE */
.maztek-ranking {
  position: fixed;
  top: 180px;
  right: 20px;
  width: 260px;
  z-index: 999;
}
	
/* AJUSTE SOBRE TU PANEL BASE */
.maztek-ranking.maztek-panel-inner {
  padding: 15px;
  border: 2px solid rgb(200 162 74);
 box-shadow: 
        0 10px 25px rgba(0, 0, 0, 0.8),
        0 0 12px rgba(255, 215, 0, 0.5);
}

/* TITULO (usa tu sistema pero refinado) */
.maztek-ranking .maztek-title {
  text-align: center;
  margin-bottom: 12px;
  font-size: 14px;
}

.maztek-ranking .maztek-title span {
  color: #e6c76b;
  letter-spacing: 1px;
}

/* LISTA */
.maztek-ranking-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* ITEM */
.maztek-ranking-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 8px 10px;
  margin-bottom: 6px;

  background: rgba(255,255,255,0.03);
  border-left: 3px solid #caa84a;
  border-radius: 4px;

  position: relative;
  overflow: hidden;

  transition: all 0.25s ease;
}

/* EFECTO DORADO SUTIL */
.maztek-ranking-list li::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(202,168,74,0.2), transparent);
  transition: left 0.4s ease;
}

/* HOVER */
.maztek-ranking-list li:hover {
  background: rgba(202,168,74,0.12);
  transform: translateX(-4px);
}

.maztek-ranking-list li:hover::before {
  left: 100%;
}

/* TEXTO */
.maztek-ranking .nick {
  color: #fff;
  font-size: 13px;
}

.maztek-ranking .elo {
  color: #e6c76b;
  font-weight: bold;
  font-size: 13px;
}

/* TOP 1 DESTACADO */
.maztek-ranking-list li:nth-child(1) {
  border-left: 3px solid #ffd700;
  background: rgba(255,215,0,0.08);
}


/* CONTENEDOR  tlatuanis */
.tlatoanis {
    position: relative;
    width: 100%;
    height: 550px;
    z-index: 203;
}

/* ANGEL (CENTRO) */
.angel {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    z-index: 200; /* encima */
}

.angel img {
    width: 400px;
  /*  filter: drop-shadow(0 0 8px rgba(255,215,120,0.6));  */
}

/* SPARROW (DERECHA) */
.sparrow {
    position: absolute;
    right: 30px;
    top: 50px;
    z-index: 199;
}

.sparrow img {
    width: 820px;
    opacity: 0.85;
}
html {
  scroll-behavior: smooth;
}
/* Viking (izqierda) */
.Viking {
    position: absolute;
	left: 280px;
    top: 50px;
    z-index: 199;
}

.Viking img {
    width: 360px;
    opacity: 0.85;
}
html {
  scroll-behavior: smooth;
}