@import url(fontawesome-all.min.css);

/* cyrillic-ext */
@font-face {
	font-family: 'Source Sans Pro';
	font-style: italic;
	font-weight: 300;
	src: url(https://fonts.gstatic.com/s/sourcesanspro/v22/6xKwdSBYKcSV-LCoeQqfX1RYOo3qPZZMkidh18Smxg.woff2) format('woff2');
	unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
  }
  /* cyrillic */
  @font-face {
	font-family: 'Source Sans Pro';
	font-style: italic;
	font-weight: 300;
	src: url(https://fonts.gstatic.com/s/sourcesanspro/v22/6xKwdSBYKcSV-LCoeQqfX1RYOo3qPZZMkido18Smxg.woff2) format('woff2');
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  }
  /* latin-ext */
  @font-face {
	font-family: 'Source Sans Pro';
	font-style: italic;
	font-weight: 300;
	src: url(https://fonts.gstatic.com/s/sourcesanspro/v22/6xKwdSBYKcSV-LCoeQqfX1RYOo3qPZZMkidi18Smxg.woff2) format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  /* latin */
  @font-face {
	font-family: 'Source Sans Pro';
	font-style: italic;
	font-weight: 300;
	src: url(https://fonts.gstatic.com/s/sourcesanspro/v22/6xKwdSBYKcSV-LCoeQqfX1RYOo3qPZZMkids18Q.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  /* cyrillic-ext */
  @font-face {
	font-family: 'Source Sans Pro';
	font-style: italic;
	font-weight: 400;
	src: url(https://fonts.gstatic.com/s/sourcesanspro/v22/6xK1dSBYKcSV-LCoeQqfX1RYOo3qPZ7qsDJT9g.woff2) format('woff2');
	unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
  }
  /* cyrillic */
  @font-face {
	font-family: 'Source Sans Pro';
	font-style: italic;
	font-weight: 400;
	src: url(https://fonts.gstatic.com/s/sourcesanspro/v22/6xK1dSBYKcSV-LCoeQqfX1RYOo3qPZ7jsDJT9g.woff2) format('woff2');
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  }
  /* latin-ext */
  @font-face {
	font-family: 'Source Sans Pro';
	font-style: italic;
	font-weight: 400;
	src: url(https://fonts.gstatic.com/s/sourcesanspro/v22/6xK1dSBYKcSV-LCoeQqfX1RYOo3qPZ7psDJT9g.woff2) format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  /* latin */
  @font-face {
	font-family: 'Source Sans Pro';
	font-style: italic;
	font-weight: 400;
	src: url(https://fonts.gstatic.com/s/sourcesanspro/v22/6xK1dSBYKcSV-LCoeQqfX1RYOo3qPZ7nsDI.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  /* cyrillic-ext */
  @font-face {
	font-family: 'Source Sans Pro';
	font-style: normal;
	font-weight: 300;
	src: url(https://fonts.gstatic.com/s/sourcesanspro/v22/6xKydSBYKcSV-LCoeQqfX1RYOo3ik4zwmhduz8A.woff2) format('woff2');
	unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
  }
  /* cyrillic */
  @font-face {
	font-family: 'Source Sans Pro';
	font-style: normal;
	font-weight: 300;
	src: url(https://fonts.gstatic.com/s/sourcesanspro/v22/6xKydSBYKcSV-LCoeQqfX1RYOo3ik4zwkxduz8A.woff2) format('woff2');
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  }
  /* latin-ext */
  @font-face {
	font-family: 'Source Sans Pro';
	font-style: normal;
	font-weight: 300;
	src: url(https://fonts.gstatic.com/s/sourcesanspro/v22/6xKydSBYKcSV-LCoeQqfX1RYOo3ik4zwmRduz8A.woff2) format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  /* latin */
  @font-face {
	font-family: 'Source Sans Pro';
	font-style: normal;
	font-weight: 300;
	src: url(https://fonts.gstatic.com/s/sourcesanspro/v22/6xKydSBYKcSV-LCoeQqfX1RYOo3ik4zwlxdu.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  /* cyrillic-ext */
  @font-face {
	font-family: 'Source Sans Pro';
	font-style: normal;
	font-weight: 400;
	src: url(https://fonts.gstatic.com/s/sourcesanspro/v22/6xK3dSBYKcSV-LCoeQqfX1RYOo3qNa7lqDY.woff2) format('woff2');
	unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
  }
  /* cyrillic */
  @font-face {
	font-family: 'Source Sans Pro';
	font-style: normal;
	font-weight: 400;
	src: url(https://fonts.gstatic.com/s/sourcesanspro/v22/6xK3dSBYKcSV-LCoeQqfX1RYOo3qPK7lqDY.woff2) format('woff2');
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  }
  /* latin-ext */
  @font-face {
	font-family: 'Source Sans Pro';
	font-style: normal;
	font-weight: 400;
	src: url(https://fonts.gstatic.com/s/sourcesanspro/v22/6xK3dSBYKcSV-LCoeQqfX1RYOo3qNq7lqDY.woff2) format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  /* latin */
  @font-face {
	font-family: 'Source Sans Pro';
	font-style: normal;
	font-weight: 400;
	src: url(https://fonts.gstatic.com/s/sourcesanspro/v22/6xK3dSBYKcSV-LCoeQqfX1RYOo3qOK7l.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }

@font-face {
    font-family: 'Atomic Marker';
    src: url('../../fonts/AtomicMarker.woff2') format('woff2'),
        url('../../fonts/AtomicMarker.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@-moz-keyframes spinner {
	0% {
		-moz-transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		transform: rotate(0deg);
	}

	100% {
		-moz-transform: rotate(359deg);
		-webkit-transform: rotate(359deg);
		-ms-transform: rotate(359deg);
		transform: rotate(359deg);
	}
}

@-webkit-keyframes spinner {
	0% {
		-moz-transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		transform: rotate(0deg);
	}

	100% {
		-moz-transform: rotate(359deg);
		-webkit-transform: rotate(359deg);
		-ms-transform: rotate(359deg);
		transform: rotate(359deg);
	}
}

@-ms-keyframes spinner {
	0% {
		-moz-transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		transform: rotate(0deg);
	}

	100% {
		-moz-transform: rotate(359deg);
		-webkit-transform: rotate(359deg);
		-ms-transform: rotate(359deg);
		transform: rotate(359deg);
	}
}

@keyframes spinner {
	0% {
		-moz-transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		transform: rotate(0deg);
	}

	100% {
		-moz-transform: rotate(359deg);
		-webkit-transform: rotate(359deg);
		-ms-transform: rotate(359deg);
		transform: rotate(359deg);
	}
}

html, body, div, span, applet, object,
iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, acronym, address, big, cite,
code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b,
u, i, center, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output, ruby,
section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;}

body {
	line-height: 1;
	min-height: 100vh;
	overflow-y: scroll;
}

ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

	blockquote:before, blockquote:after, q:before, q:after {
		content: '';
		content: none;
	}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

body {
	-webkit-text-size-adjust: none;
}

mark {
	background-color: transparent;
	color: inherit;
}

input::-moz-focus-inner {
	border: 0;
	padding: 0;
}

input, select, textarea {
	-moz-appearance: none;
	-webkit-appearance: none;
	-ms-appearance: none;
	appearance: none;
}

/* Basic */

	@-ms-viewport {
		width: device-width;
	}

	body {
		-ms-overflow-style: scrollbar;
	}

	@media screen and (max-width: 480px) {

		html, body {
			min-width: 320px;
		}

	}

	html {
		box-sizing: border-box;
	}

	*, *:before, *:after {
		box-sizing: inherit;
	}

	body {
		background: #0a0a0a;
		position: relative;

	}
	
	body::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-image: url('images/noise.png'); /* Ruta de la imagen de ruido */
		background-repeat: repeat; /* Repetir la textura */
		opacity: 0.3; /* Intensidad del ruido */
		pointer-events: none; /* Para no interferir con los elementos de la página */
	
	
	}

		body.is-preload *, body.is-preload *:before, body.is-preload *:after {
			-moz-animation: none !important;
			-webkit-animation: none !important;
			-ms-animation: none !important;
			animation: none !important;
			-moz-transition: none !important;
			-webkit-transition: none !important;
			-ms-transition: none !important;
			transition: none !important;
		}

		body.is-resizing *, body.is-resizing *:before, body.is-resizing *:after {
			-moz-animation: none !important;
			-webkit-animation: none !important;
			-ms-animation: none !important;
			animation: none !important;
			-moz-transition: none !important;
			-webkit-transition: none !important;
			-ms-transition: none !important;
			transition: none !important;
		}

/* Type */


body {
  --sb-track-color: #2f2f2f;
  --sb-thumb-color: #970083;
  --sb-size: 8px;
}

body::-webkit-scrollbar {
  width: var(--sb-size)
}

body::-webkit-scrollbar-track {
  background: var(--sb-track-color);
  border-radius: 5px;
}

body::-webkit-scrollbar-thumb {
  background: var(--sb-thumb-color);
  border-radius: 5px;
  
}

@supports not selector(::-webkit-scrollbar) {
  body {
    scrollbar-color: var(--sb-thumb-color)
                     var(--sb-track-color);
  }
}

	body, input, select, textarea {
		color: #a0a0a1;
		font-family: "Source Sans Pro", Helvetica, sans-serif;
		font-size: 15pt;
		font-weight: 300;
		letter-spacing: 0.025em;
		line-height: 1.65;
	}

		@media screen and (max-width: 1680px) {

			body, input, select, textarea {
				font-size: 11pt;
			}

		}

	a {
		-moz-transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
		-webkit-transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
		-ms-transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
		transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;

		color: #34a58e;
		text-decoration: none;
	}

		a:hover {
			border-bottom-color: transparent;
			color: #34a58e !important;
		}

	strong, b {
		color: #ffffff;
		font-weight: 300;
	}

	em, i {
		font-style: italic;
	}

	p {
		margin: 0 0 2em 0;
	}

	h1, h2, h3, h4, h5, h6 {
		font-family: 'Atomic Marker'; font-weight: normal; font-style: normal;
		color: #ffffff;
		font-weight: 300;
		letter-spacing: 0.1em;
		line-height: 1.5;
		margin: 0 0 1em 0;
		text-transform: uppercase;
	}

		h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
			color: inherit;
			text-decoration: none;
		}

	h1 {
		font-size: 2em;
	}

	h2 {
		font-size: 1.7em;
		text-shadow: 2px 2px 5px rgb(14, 14, 14);
	}

	h3 {
		font-size: 1.1em;
	}

	h4 {
		font-size: 1em;
	}

	h5 {
		font-size: 0.9em;
	}

	h6 {
		font-size: 0.7em;
	}

	@media screen and (max-width: 736px) {

		h2 {
			font-size: 1em;
		}

		h3 {
			font-size: 0.9em;
		}

		h4 {
			font-size: 0.8em;
		}

		h5 {
			font-size: 0.7em;
		}

		h6 {
			font-size: 0.7em;
		}

	}

	sub {
		font-size: 0.8em;
		position: relative;
		top: 0.5em;
	}

	sup {
		font-size: 0.8em;
		position: relative;
		top: -0.5em;
	}

	blockquote {
		border-left: 4px #36383c;
		font-style: italic;
		margin: 0 0 2em 0;
		padding: 0.5em 0 0.5em 2em;
	}

	code {
		background: #34363b;
		border: solid 1px #36383c;
		font-family: "Courier New", monospace;
		font-size: 0.9em;
		margin: 0 0.25em;
		padding: 0.25em 0.65em;
	}

	pre {
		-webkit-overflow-scrolling: touch;
		font-family: "Courier New", monospace;
		font-size: 0.9em;
		margin: 0 0 2em 0;
	}

		pre code {
			display: block;
			line-height: 1.75;
			padding: 1em 1.5em;
			overflow-x: auto;
		}

	hr {
		border: 0;
		border-bottom: solid 1px #36383c;
		margin: 2em 0;
	}

		hr.major {
			margin: 3em 0;
		}

	.align-left {
		text-align: left;
	}

	.align-center {
		text-align: center;
	}

	.align-right {
		text-align: right;
	}

/* Button */

	input[type="submit"],
	input[type="reset"],
	input[type="button"],
	button,
	.button {
		-moz-appearance: none;
		-webkit-appearance: none;
		-ms-appearance: none;
		appearance: none;
		-moz-transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, color 0.2s ease-in-out;
		-webkit-transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, color 0.2s ease-in-out;
		-ms-transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, color 0.2s ease-in-out;
		transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, color 0.2s ease-in-out;
		background-color: transparent;
		border: 0;
		border-radius: 0;
		box-shadow: inset 0 0 0 2px #36383c;
		color: #ffffff !important;
		cursor: pointer;
		display: inline-block;
		font-size: 0.9em;
		font-weight: 300;
		height: 3.05556em;
		letter-spacing: 0.1em;
		line-height: 3.05556em;
		padding: 0 2.5em;
		text-align: center;
		text-decoration: none;
		text-transform: uppercase;
		white-space: nowrap;
	}

		input[type="submit"]:hover,
		input[type="reset"]:hover,
		input[type="button"]:hover,
		button:hover,
		.button:hover {
			box-shadow: inset 0 0 0 2px #34a58e;
			color: #34a58e ;
		}

			input[type="submit"]:hover:active,
			input[type="reset"]:hover:active,
			input[type="button"]:hover:active,
			button:hover:active,
			.button:hover:active {
				background-color: rgba(52, 165, 142, 0.15);
				color: #34a58e ;
			}

		input[type="submit"].icon,
		input[type="reset"].icon,
		input[type="button"].icon,
		button.icon,
		.button.icon {
			padding-left: 1.35em;
		}

			input[type="submit"].icon:before,
			input[type="reset"].icon:before,
			input[type="button"].icon:before,
			button.icon:before,
			.button.icon:before {
				margin-right: 0.5em;
			}

		input[type="submit"].fit,
		input[type="reset"].fit,
		input[type="button"].fit,
		button.fit,
		.button.fit {
			width: 100%;
		}

		input[type="submit"].small,
		input[type="reset"].small,
		input[type="button"].small,
		button.small,
		.button.small {
			font-size: 0.8em;
		}

		input[type="submit"].large,
		input[type="reset"].large,
		input[type="button"].large,
		button.large,
		.button.large {
			font-size: 1.35em;
		}

		input[type="submit"].primary,
		input[type="reset"].primary,
		input[type="button"].primary,
		button.primary,
		.button.primary {
			background-color: #34a58e;
			box-shadow: none;
		}

			input[type="submit"].primary:hover,
			input[type="reset"].primary:hover,
			input[type="button"].primary:hover,
			button.primary:hover,
			.button.primary:hover {
				background-color: #47c5ab;
				color: #ffffff !important;
			}

				input[type="submit"].primary:hover:active,
				input[type="reset"].primary:hover:active,
				input[type="button"].primary:hover:active,
				button.primary:hover:active,
				.button.primary:hover:active {
					background-color: #287e6d;
				}

		input[type="submit"].disabled, input[type="submit"]:disabled,
		input[type="reset"].disabled,
		input[type="reset"]:disabled,
		input[type="button"].disabled,
		input[type="button"]:disabled,
		button.disabled,
		button:disabled,
		.button.disabled,
		.button:disabled {
			pointer-events: none;
			opacity: 0.35;
		}

/* Form */

	form {
		margin: 0 0 2em 0;
	}

		form > :last-child {
			margin-bottom: 0;
		}

		form > .fields {
			display: -moz-flex;
			display: -webkit-flex;
			display: -ms-flex;
			display: flex;
			-moz-flex-wrap: wrap;
			-webkit-flex-wrap: wrap;
			-ms-flex-wrap: wrap;
			flex-wrap: wrap;
			width: calc(100% + 3em);
			margin: -1.5em 0 2em -1.5em;
		}

			form > .fields > .field {
				-moz-flex-grow: 0;
				-webkit-flex-grow: 0;
				-ms-flex-grow: 0;
				flex-grow: 0;
				-moz-flex-shrink: 0;
				-webkit-flex-shrink: 0;
				-ms-flex-shrink: 0;
				flex-shrink: 0;
				padding: 1.5em 0 0 1.5em;
				width: calc(100% - 1.5em);
			}

				form > .fields > .field.half {
					width: calc(50% - 0.75em);
				}

				form > .fields > .field.third {
					width: calc(100%/3 - 0.5em);
				}

				form > .fields > .field.quarter {
					width: calc(25% - 0.375em);
				}

		@media screen and (max-width: 736px) {

			form > .fields {
				width: calc(100% + 3em);
				margin: -1.5em 0 2em -1.5em;
			}

				form > .fields > .field {
					padding: 1.5em 0 0 1.5em;
					width: calc(100% - 1.5em);
				}

					form > .fields > .field.half {
						width: calc(100% - 1.5em);
					}

					form > .fields > .field.third {
						width: calc(100% - 1.5em);
					}

					form > .fields > .field.quarter {
						width: calc(100% - 1.5em);
					}

		}

	label {
		color: #ffffff;
		display: block;
		font-size: 0.9em;
		font-weight: 300;
		margin: 0 0 1em 0;
	}

	input[type="text"],
	input[type="password"],
	input[type="email"],
	input[type="tel"],
	input[type="search"],
	input[type="url"],
	select,
	textarea {
		-moz-appearance: none;
		-webkit-appearance: none;
		-ms-appearance: none;
		appearance: none;
		background: #34363b;
		border: 0;
		border-radius: 0;
		color: #a0a0a1;
		display: block;
		outline: 0;
		padding: 0 1em;
		text-decoration: none;
		width: 100%;
	}

		input[type="text"]:invalid,
		input[type="password"]:invalid,
		input[type="email"]:invalid,
		input[type="tel"]:invalid,
		input[type="search"]:invalid,
		input[type="url"]:invalid,
		select:invalid,
		textarea:invalid {
			box-shadow: none;
		}

		input[type="text"]:focus,
		input[type="password"]:focus,
		input[type="email"]:focus,
		input[type="tel"]:focus,
		input[type="search"]:focus,
		input[type="url"]:focus,
		select:focus,
		textarea:focus {
			box-shadow: inset 0 0 0 2px #34a58e;
		}

	select {
		background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' preserveAspectRatio='none' viewBox='0 0 40 40'%3E%3Cpath d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9 c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='%2336383c' /%3E%3C/svg%3E");
		background-size: 1.25rem;
		background-repeat: no-repeat;
		background-position: calc(100% - 1rem) center;
		height: 2.75em;
		padding-right: 2.75em;
		text-overflow: ellipsis;
	}

		select option {
			color: #ffffff;
			background: #242629;
		}

		select:focus::-ms-value {
			background-color: transparent;
		}

		select::-ms-expand {
			display: none;
		}

	input[type="text"],
	input[type="password"],
	input[type="email"],
	input[type="tel"],
	input[type="search"],
	input[type="url"],
	select {
		height: 2.75em;
	}

	textarea {
		padding: 0.75em 1em;
	}

	input[type="checkbox"],
	input[type="radio"] {
		-moz-appearance: none;
		-webkit-appearance: none;
		-ms-appearance: none;
		appearance: none;
		display: block;
		float: left;
		margin-right: -2em;
		opacity: 0;
		width: 1em;
		z-index: -1;
	}

		input[type="checkbox"] + label,
		input[type="radio"] + label {
			text-decoration: none;
			color: #a0a0a1;
			cursor: pointer;
			display: inline-block;
			font-size: 1em;
			font-weight: 300;
			padding-left: 2.4em;
			padding-right: 0.75em;
			position: relative;
		}

			input[type="checkbox"] + label:before,
			input[type="radio"] + label:before {
				-moz-osx-font-smoothing: grayscale;
				-webkit-font-smoothing: antialiased;
				display: inline-block;
				font-style: normal;
				font-variant: normal;
				text-rendering: auto;
				line-height: 1;
				text-transform: none !important;
				font-family: 'Font Awesome 5 Free';
				font-weight: 900;
			}

			input[type="checkbox"] + label:before,
			input[type="radio"] + label:before {
				background: #34363b;
				content: '';
				display: inline-block;
				font-size: 0.8em;
				height: 2.0625em;
				left: 0;
				line-height: 2.0625em;
				position: absolute;
				text-align: center;
				top: 0;
				width: 2.0625em;
			}

		input[type="checkbox"]:checked + label:before,
		input[type="radio"]:checked + label:before {
			background: #34a58e;
			border-color: #34a58e;
			color: #ffffff;
			content: '\f00c';
		}

		input[type="checkbox"]:focus + label:before,
		input[type="radio"]:focus + label:before {
			box-shadow: 0 0 0 2px #34a58e;
		}

	input[type="radio"] + label:before {
		border-radius: 100%;
	}

	::-webkit-input-placeholder {
		color: #707071 !important;
		opacity: 1.0;
	}

	:-moz-placeholder {
		color: #707071 !important;
		opacity: 1.0;
	}

	::-moz-placeholder {
		color: #707071 !important;
		opacity: 1.0;
	}

	:-ms-input-placeholder {
		color: #707071 !important;
		opacity: 1.0;
	}

/* Icon */

	.icon {
		text-decoration: none;
		border-bottom: none;
		position: relative;
	}

		.icon:before {
			-moz-osx-font-smoothing: grayscale;
			-webkit-font-smoothing: antialiased;
			display: inline-block;
			font-style: normal;
			font-variant: normal;
			text-rendering: auto;
			line-height: 1;
			text-transform: none !important;
			font-family: 'Font Awesome 5 Free';
			font-weight: 400;
		}

		.icon > .label {
			display: none;
		}

		.icon:before {
			line-height: inherit;
		}

		.icon.solid:before {
			font-weight: 900;
		}

		.icon.brands:before {
			font-family: 'Font Awesome 5 Brands';
		}

/* List */

	ol {
		list-style: decimal;
		margin: 0 0 2em 0;
		padding-left: 1.25em;
	}

		ol li {
			padding-left: 0.25em;
		}

	ul {
		list-style: disc;
		margin: 0 0 2em 0;
		padding-left: 1em;
	}

		ul li {
			padding-left: 0.5em;
		}

		ul.alt {
			list-style: none;
			padding-left: 0;
		}

			ul.alt li {
				border-top: solid 1px #36383c;
				padding: 0.5em 0;
			}

				ul.alt li:first-child {
					border-top: 0;
					padding-top: 0;
				}

	dl {
		margin: 0 0 2em 0;
	}

		dl dt {
			display: block;
			font-weight: 300;
			margin: 0 0 1em 0;
		}

		dl dd {
			margin-left: 2em;
		}

/* Actions */

	ul.actions {
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		cursor: default;
		list-style: none;
		margin-left: -1em;
		padding-left: 0;
	}

		ul.actions li {
			padding: 0 0 0 1em;
			vertical-align: middle;
		}

		ul.actions.special {
			-moz-justify-content: center;
			-webkit-justify-content: center;
			-ms-justify-content: center;
			justify-content: center;
			width: 100%;
			margin-left: 0;
		}

			ul.actions.special li:first-child {
				padding-left: 0;
			}

		ul.actions.stacked {
			-moz-flex-direction: column;
			-webkit-flex-direction: column;
			-ms-flex-direction: column;
			flex-direction: column;
			margin-left: 0;
		}

			ul.actions.stacked li {
				padding: 1.3em 0 0 0;
			}

				ul.actions.stacked li:first-child {
					padding-top: 0;
				}

		ul.actions.fit {
			width: calc(100% + 1em);
		}

			ul.actions.fit li {
				-moz-flex-grow: 1;
				-webkit-flex-grow: 1;
				-ms-flex-grow: 1;
				flex-grow: 1;
				-moz-flex-shrink: 1;
				-webkit-flex-shrink: 1;
				-ms-flex-shrink: 1;
				flex-shrink: 1;
				width: 100%;
			}

				ul.actions.fit li > * {
					width: 100%;
				}

			ul.actions.fit.stacked {
				width: 100%;
			}

		@media screen and (max-width: 480px) {

			ul.actions:not(.fixed) {
				-moz-flex-direction: column;
				-webkit-flex-direction: column;
				-ms-flex-direction: column;
				flex-direction: column;
				margin-left: 0;
				width: 100% !important;
			}

				ul.actions:not(.fixed) li {
					-moz-flex-grow: 1;
					-webkit-flex-grow: 1;
					-ms-flex-grow: 1;
					flex-grow: 1;
					-moz-flex-shrink: 1;
					-webkit-flex-shrink: 1;
					-ms-flex-shrink: 1;
					flex-shrink: 1;
					padding: 1em 0 0 0;
					text-align: center;
					width: 100%;
				}

					ul.actions:not(.fixed) li > * {
						width: 100%;
					}

					ul.actions:not(.fixed) li:first-child {
						padding-top: 0;
					}

					ul.actions:not(.fixed) li input[type="submit"],
					ul.actions:not(.fixed) li input[type="reset"],
					ul.actions:not(.fixed) li input[type="button"],
					ul.actions:not(.fixed) li button,
					ul.actions:not(.fixed) li .button {
						width: 100%;
					}

						ul.actions:not(.fixed) li input[type="submit"].icon:before,
						ul.actions:not(.fixed) li input[type="reset"].icon:before,
						ul.actions:not(.fixed) li input[type="button"].icon:before,
						ul.actions:not(.fixed) li button.icon:before,
						ul.actions:not(.fixed) li .button.icon:before {
							margin-left: -0.5rem;
						}

		}

/* Icons */

	ul.icons {
		cursor: default;
		list-style: none;
		padding-left: 0;
	}

		ul.icons li {
			display: inline-block;
			padding: 0 1em 0 0;
		}

			ul.icons li:last-child {
				padding-right: 0;
			}

			ul.icons li .icon {
				color: #505051;
			}

				ul.icons li .icon:before {
					font-size: 1.5em;
				}

/* Table */

	.table-wrapper {
		
		-webkit-overflow-scrolling: touch;
		overflow-x: auto;
	}

	table {
		margin: 0 0 2em 0;
		width: 100%;
	}

		table tbody tr {
			border: solid 1px #36383c;
			border-left: 0;
			border-right: 0;
		}

			table tbody tr:nth-child(2n + 1) {
				background-color: #34363b;
			}

		table td {
			padding: 0.75em 0.75em;
		}

		table th {
			color: #ffffff;
			font-size: 0.9em;
			font-weight: 300;
			padding: 0 0.75em 0.75em 0.75em;
			text-align: left;
		}

		table thead {
			border-bottom: solid 2px #36383c;
		}

		table tfoot {
			border-top: solid 2px #36383c;
		}

		table.alt {
			border-collapse: separate;
		}

			table.alt tbody tr td {
				border: solid 1px #36383c;
				border-left-width: 0;
				border-top-width: 0;
			}

				table.alt tbody tr td:first-child {
					border-left-width: 1px;
				}

			table.alt tbody tr:first-child td {
				border-top-width: 1px;
			}

			table.alt thead {
				border-bottom: 0;
			}

			table.alt tfoot {
				border-top: 0;
			}

/* Panel */

.panel {
    -moz-transform: translateY(-100vh); /* Cambia esto */
    -webkit-transform: translateY(-100vh); /* Cambia esto */
    -ms-transform: translateY(-100vh); /* Cambia esto */
    transform: translateY(-100vh); /* Cambia esto */
    -moz-transition: -moz-transform 0.5s ease;
    -webkit-transition: -webkit-transform 0.5s ease;
    -ms-transition: -ms-transform 0.5s ease;
    transition: transform 0.5s ease;
    background: rgba(36, 38, 41, 0.975);
    top: 3em;
    left: 0;
    max-height: calc(80vh - 3em);
    overflow-y: auto;
    position: fixed;
    width: 100%;
    z-index: 10001;
}

		.panel.active {
			-moz-transform: translateY(1px);
			-webkit-transform: translateY(1px);
			-ms-transform: translateY(1px);
			transform: translateY(1px);
		}

		.panel > .inner {
			margin: 1em auto;
			max-width: 100%;
			width: 75em;
		}

			.panel > .inner.split {
				display: -moz-flex;
				display: -webkit-flex;
				display: -ms-flex;
				display: flex;
			}

				.panel > .inner.split > div {
					margin-left: 4em;
					width: 50%;
				}

				.panel > .inner.split > :first-child {
					margin-left: 0;
				}

		.panel > .closer {
			-moz-transition: opacity 0.2s ease-in-out;
			-webkit-transition: opacity 0.2s ease-in-out;
			-ms-transition: opacity 0.2s ease-in-out;
			transition: opacity 0.2s ease-in-out;
			background-image: url("images/close.svg");
			background-position: center;
			background-repeat: no-repeat;
			background-size: 3em;
			cursor: pointer;
			height: 5em;
			opacity: 0.25;
			position: absolute;
			right: 0;
			top: 0;
			width: 5em;
			z-index: 2;
		}

			.panel > .closer:hover {
				opacity: 1.0;
			}

		@media screen and (max-width: 1280px) {

			.panel {
				padding: 0em 2em 1em 2em ;
			}

				.panel > .inner.split > div {
					margin-left: 3em;
				}

				.panel > .closer {
					background-size: 2.5em;
					background-position: 75% 25%;
				}

		}

		@media screen and (max-width: 980px) {

			.panel > .inner.split {
				-moz-flex-direction: column;
				-webkit-flex-direction: column;
				-ms-flex-direction: column;
				flex-direction: column;
			}

				.panel > .inner.split > div {
					margin-left: 0;
					width: 100%;
				}

		}

		@media screen and (max-width: 736px) {


			.portafoliot {
				display: none;
			}

			.panel {
				-moz-transform: translateY(-100vh);
				-webkit-transform: translateY(-100vh);
				-ms-transform: translateY(-100vh);
				transform: translateY(-100vh);
				bottom: auto;
				top: calc(3em - 10px);
				padding: 0em 2em 1em 2em ;
			}

				.panel.active {
					-moz-transform: translateY(0);
					-webkit-transform: translateY(0);
					-ms-transform: translateY(0);
					transform: translateY(0);
				}

		}

/* Poptrox Popup */

	.poptrox-overlay {
		-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
	}

	.poptrox-popup {
		background: rgba(31, 34, 36, 0.925);
		box-shadow: 0 1em 3em 0.5em rgba(0, 0, 0, 0.25);
		cursor: auto;
	}

		.poptrox-popup:before {
			-moz-transition: opacity 0.2s ease-in-out;
			-webkit-transition: opacity 0.2s ease-in-out;
			-ms-transition: opacity 0.2s ease-in-out;
			transition: opacity 0.2s ease-in-out;
			background-image: -moz-linear-gradient(to left, rgba(31,34,36,0.35), rgba(31,34,36,0) 1em, rgba(31,34,36,0)), -moz-linear-gradient(to right, rgba(31,34,36,0.35), rgba(31,34,36,0) 1em, rgba(31,34,36,0));
			background-image: -webkit-linear-gradient(to left, rgba(31,34,36,0.35), rgba(31,34,36,0) 1em, rgba(31,34,36,0)), -webkit-linear-gradient(to right, rgba(31,34,36,0.35), rgba(31,34,36,0) 1em, rgba(31,34,36,0));
			background-image: -ms-linear-gradient(to left, rgba(31,34,36,0.35), rgba(31,34,36,0) 1em, rgba(31,34,36,0)), -ms-linear-gradient(to right, rgba(31,34,36,0.35), rgba(31,34,36,0) 1em, rgba(31,34,36,0));
			background-image: linear-gradient(to left, rgba(31,34,36,0.35), rgba(31,34,36,0) 1em, rgba(31,34,36,0)), linear-gradient(to right, rgba(31,34,36,0.35), rgba(31,34,36,0) 1em, rgba(31,34,36,0));
			content: '';
			display: block;
			height: 100%;
			left: 0;
			position: absolute;
			top: 0;
			width: 100%;
			z-index: 1;
			opacity: 1;
		}

		.poptrox-popup .closer {
			-moz-transition: opacity 0.2s ease-in-out;
			-webkit-transition: opacity 0.2s ease-in-out;
			-ms-transition: opacity 0.2s ease-in-out;
			transition: opacity 0.2s ease-in-out;
			background-image: url("images/close.svg");
			background-position: center;
			background-repeat: no-repeat;
			background-size: 3em;
			height: 5em;
			opacity: 0;
			position: absolute;
			right: 0;
			top: 0;
			width: 5em;
			z-index: 2;
		}

		.poptrox-popup .nav-previous,
		.poptrox-popup .nav-next {
			-moz-transition: opacity 0.2s ease-in-out;
			-webkit-transition: opacity 0.2s ease-in-out;
			-ms-transition: opacity 0.2s ease-in-out;
			transition: opacity 0.2s ease-in-out;
			background-image: url("images/arrow.svg");
			background-position: center;
			background-repeat: no-repeat;
			background-size: 5em;
			cursor: pointer;
			height: 8em;
			margin-top: -4em;
			opacity: 0;
			position: absolute;
			top: 50%;
			width: 6em;
			z-index: 2;
		}

		.poptrox-popup .nav-previous {
			-moz-transform: scaleX(-1);
			-webkit-transform: scaleX(-1);
			-ms-transform: scaleX(-1);
			transform: scaleX(-1);
			left: 0;
		}

		.poptrox-popup .nav-next {
			right: 0;
		}

		.poptrox-popup .caption {
			padding: 2em 2em 0.1em 2em ;
			background-image: -moz-linear-gradient(to top, rgba(16,16,16,0.45) 25%, rgba(16,16,16,0) 100%);
			background-image: -webkit-linear-gradient(to top, rgba(16,16,16,0.45) 25%, rgba(16,16,16,0) 100%);
			background-image: -ms-linear-gradient(to top, rgba(16,16,16,0.45) 25%, rgba(16,16,16,0) 100%);
			background-image: linear-gradient(to top, rgba(16,16,16,0.45) 25%, rgba(16,16,16,0) 100%);
			bottom: 0;
			cursor: default;
			left: 0;
			position: absolute;
			text-align: left;
			width: 100%;
			z-index: 2;
		}

			.poptrox-popup .caption h2, .poptrox-popup .caption h3, .poptrox-popup .caption h4, .poptrox-popup .caption h5, .poptrox-popup .caption h6 {
				margin: 0 0 0.5em 0;
			}

			.poptrox-popup .caption p {
				color: #ffffff;
				font-size: 0.9em;
			}

		.poptrox-popup .loader {
			-moz-animation: spinner 1s infinite linear !important;
			-webkit-animation: spinner 1s infinite linear !important;
			-ms-animation: spinner 1s infinite linear !important;
			animation: spinner 1s infinite linear !important;
			background-image: url("images/spinner.svg");
			background-position: center;
			background-repeat: no-repeat;
			background-size: contain;
			display: block;
			font-size: 2em;
			height: 2em;
			left: 50%;
			line-height: 2em;
			margin: -1em 0 0 -1em;
			opacity: 0.25;
			position: absolute;
			text-align: center;
			top: 50%;
			width: 2em;
		}

		.poptrox-popup:hover .closer,
		.poptrox-popup:hover .nav-previous,
		.poptrox-popup:hover .nav-next {
			opacity: 0.5;
		}

			.poptrox-popup:hover .closer:hover,
			.poptrox-popup:hover .nav-previous:hover,
			.poptrox-popup:hover .nav-next:hover {
				opacity: 1.0;
			}

		.poptrox-popup.loading:before {
			opacity: 0;
		}

		body.touch .poptrox-popup .closer,
		body.touch .poptrox-popup .nav-previous,
		body.touch .poptrox-popup .nav-next {
			opacity: 1.0 !important;
		}

		@media screen and (max-width: 980px) {

			.poptrox-popup .closer {
				background-size: 3em;
			}

			.poptrox-popup .nav-previous,
			.poptrox-popup .nav-next {
				background-size: 4em;
			}

			.poptrox-popup .caption h2 {
				font-size: 80%;
			}
			
			.poptrox-popup .caption p {
				margin: 0 0 0.5em 0;
				font-size: 80%;
			}
			

		}

		@media screen and (max-width: 736px) {

			.poptrox-popup:before {
				display: none;
			}

			.poptrox-popup .caption h2 {
				font-size: 70%;
			}
			
			.poptrox-popup .caption p {
				margin: 0 0 0.5em 0;
				font-size: 70%;
			}

			.poptrox-popup .closer,
			.poptrox-popup .nav-previous,
			.poptrox-popup .nav-next {
				background-size: 2em;

		
			}

		}


/* Wrapper */

	#wrapper {
		-moz-transition: -moz-filter 0.5s ease, -webkit-filter 0.5s ease, -ms-filter 0.5s ease, -moz-filter 0.5s ease;
		-webkit-transition: -moz-filter 0.5s ease, -webkit-filter 0.5s ease, -ms-filter 0.5s ease, -webkit-filter 0.5s ease;
		-ms-transition: -moz-filter 0.5s ease, -webkit-filter 0.5s ease, -ms-filter 0.5s ease, -ms-filter 0.5s ease;
		transition: -moz-filter 0.5s ease, -webkit-filter 0.5s ease, -ms-filter 0.5s ease, filter 0.5s ease;
		position: relative;
		padding: 4em 0 0em 0;
		min-height: 100vh;
	}

		#wrapper:after {
			pointer-events: none;
			-moz-transition: opacity 0.5s ease, visibility 0.5s;
			-webkit-transition: opacity 0.5s ease, visibility 0.5s;
			-ms-transition: opacity 0.5s ease, visibility 0.5s;
			transition: opacity 0.5s ease, visibility 0.5s;
			background: rgba(19, 19, 19, 0.712);
			content: '';
			display: block;
			height: 100%;
			left: 0;
			opacity: 0;
			position: absolute;
			top: 0;
			visibility: hidden;
			width: 100%;
			z-index: 1;
		}

			body.ie #wrapper:after {
				background: rgba(36, 38, 41, 0.8);
			}

		body.modal-active #wrapper {
			-moz-filter: blur(8px);
			-webkit-filter: blur(8px);
			-ms-filter: blur(8px);
			filter: blur(8px);
		}

			body.modal-active #wrapper:after {
				pointer-events: auto;
				opacity: 1;
				visibility: visible;
				z-index: 10003;
			}

		#wrapper:before {
			-moz-animation: spinner 1s infinite linear !important;
			-webkit-animation: spinner 1s infinite linear !important;
			-ms-animation: spinner 1s infinite linear !important;
			animation: spinner 1s infinite linear !important;
			pointer-events: none;
			-moz-transition: top 0.75s ease-in-out, opacity 0.35s ease-out, visibility 0.35s;
			-webkit-transition: top 0.75s ease-in-out, opacity 0.35s ease-out, visibility 0.35s;
			-ms-transition: top 0.75s ease-in-out, opacity 0.35s ease-out, visibility 0.35s;
			transition: top 0.75s ease-in-out, opacity 0.35s ease-out, visibility 0.35s;
			background-image: url("images/spinner.svg");
			background-position: center;
			background-repeat: no-repeat;
			background-size: contain;
			content: '';
			display: block;
			font-size: 2em;
			height: 2em;
			left: 50%;
			line-height: 2em;
			margin: -1em 0 0 -1em;
			opacity: 0;
			position: fixed;
			text-align: center;
			top: 75%;
			visibility: hidden;
			width: 2em;
		}

		body.is-preload #wrapper:before {
			-moz-transition: opacity 1s ease-out !important;
			-webkit-transition: opacity 1s ease-out !important;
			-ms-transition: opacity 1s ease-out !important;
			transition: opacity 1s ease-out !important;
			-moz-transition-delay: 0.5s !important;
			-webkit-transition-delay: 0.5s !important;
			-ms-transition-delay: 0.5s !important;
			transition-delay: 0.5s !important;
			opacity: 0.25;
			top: 50%;
			visibility: visible;
		}

/* Header */

	body {
		padding: 0em 0em 0em 0em;
	}

	#header {
		
		-moz-transform: translateY(0);
		-webkit-transform: translateY(0);
		-ms-transform: translateY(0);
		transform: translateY(0);
		-moz-transition: -moz-transform 1s ease;
		-webkit-transition: -webkit-transform 1s ease;
		-ms-transition: -ms-transform 1s ease;
		transition: transform 1s ease;
		-moz-user-select: none;
		-ms-user-select: none;
		-webkit-user-select: none;
		background: #222222c2;
		backdrop-filter: blur(10px);
		top: 0;
		height: 3em;
		left: 0;
		line-height: 2.5em;
		padding: 0 2.2em;
		position: fixed;
		user-select: none;
		width: 100%;
		z-index: 10002;
		background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), 
		linear-gradient(90deg, #21A1FF, #FF009E, #21A1FF);
		background-size: 100% 100%, 200% 2px; /* La segunda capa es el doble de ancha para el efecto */
		background-position: 0 0, 0% 100%;
		background-repeat: no-repeat;
	}

	body.modal-active #header {
		-moz-transform: translateY(-100%); 
		-webkit-transform: translateY(-100%);
		-ms-transform: translateY(-100%);
		transform: translateY(-100%);
	} 

	body.is-preload #header {
		-moz-transform: translateY(-5em); /* Mueve el header fuera de la pantalla arriba */
		-webkit-transform: translateY(-5em);
		-ms-transform: translateY(-5em);
		transform: translateY(-5em);
	}

		#header h1 {
			color: #a0a0a1;
			display: inline-block;
			font-size: 1.2em;
			line-height: 1;
			margin: 0.7em;
			vertical-align: middle;
		}

			#header h1 a {
				border: 0;
				color: inherit;
			}

				#header h1 a:hover {
					color: inherit !important;
				}

		#header nav {
			position: absolute;
			right: 0;
			top: 0;
		}

			#header nav > ul {
				list-style: none;
				margin: 0;
				padding: 0;
			}

				#header nav > ul > li {
					display: inline-block;
					padding: 0;
				}

					#header nav > ul > li a {
						-moz-transition: background-color 0.5s ease;
						-webkit-transition: background-color 0.5s ease;
						-ms-transition: background-color 0.5s ease;
						transition: background-color 0.5s ease;
						border: 0;
						color: #ffffff;
						display: inline-block;
						letter-spacing: 0.1em;
						padding: 0 1.65em;
						text-transform: uppercase;
					}

						#header nav > ul > li a.icon:before {
							color: #505051;
							float: right;
							margin-left: 0.75em;
						}

						#header nav > ul > li a:hover {
							color: #ffffff !important;
						}

						#header nav > ul > li a.active {
							background-color: #242629;
						}

	@media screen and (max-width: 736px) {

		body {
			padding: 4em 0 0 0;
		}

		#header {
			-moz-transform: translateY(0);
			-webkit-transform: translateY(0);
			-ms-transform: translateY(0);
			transform: translateY(0);
			bottom: auto;
			height: 3em;
			padding: 0 1em;
			top: 0;
		}

			body.is-preload #header {
				-moz-transform: translateY(-3.4em);
				-webkit-transform: translateY(-3.4em);
				-ms-transform: translateY(-3.4em);
				transform: translateY(-3.4em);
			}

			#header h1 {
				padding: 0.2em 0 0 0;
				font-size: 1em;
			}

			#header nav > ul > li a {
				font-size: 1em;
				padding: 0.1em 1.15em;
			}

			#wrapper {
				padding: 2.5em 0 0 0;
			}

	}

	.logome {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		height: auto;
		width: 2em;
	}

/* Main */

#main {
    /* Tus transiciones de filtro y flexbox se mantienen igual */
    -moz-transition: -moz-filter 0.5s ease, -webkit-filter 0.5s ease, -ms-filter 0.5s ease, filter 0.5s ease; /* Corregido un -moz-filter duplicado */
    -webkit-transition: -moz-filter 0.5s ease, -webkit-filter 0.5s ease, -ms-filter 0.5s ease, filter 0.5s ease; /* Corregido un -webkit-filter duplicado */
    -ms-transition: -moz-filter 0.5s ease, -webkit-filter 0.5s ease, -ms-filter 0.5s ease, filter 0.5s ease; /* Corregido un -ms-filter duplicado */
    transition: -moz-filter 0.5s ease, -webkit-filter 0.5s ease, -ms-filter 0.5s ease, filter 0.5s ease;
    display: -moz-flex;
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    -moz-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}

    /* --- Estilos para article.thumb --- */
    #main .thumb {
        /* Tu transition original, la mantenemos pero ajustaremos las propiedades animadas */
        -moz-transition: opacity 1.0s ease-in-out, transform 0.8s ease-in-out; /* Ajustado a 1.0s para opacidad, 0.8s para transform */
        -webkit-transition: opacity 1.0s ease-in-out, transform 0.8s ease-in-out;
        -ms-transition: opacity 1.0s ease-in-out, transform 0.8s ease-in-out;
        transition: opacity 1.0s ease-in-out, transform 0.8s ease-in-out;
        /* transition-delay: se aplicará por JS a los primeros N */

        pointer-events: auto;
        -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
        
        /* Estado inicial para la animación de entrada */
        opacity: 0; /* Comienza invisible */
        transform: translateY(30px); /* Comienza ligeramente desplazado hacia abajo */
        
        overflow: hidden;
        position: relative;
        border-radius: 10px;

        /* Dimensionamiento y márgenes (tus estilos originales) */
        width: calc(16.66667% - 20px);
        min-height: 15em; 
        margin: 10px;
        box-sizing: border-box;
    }

        /* Cuando el thumb es visible (clase añadida por JS) */
        #main .thumb.visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* Si aún usas is-preload, esto asegura que los thumbs empiecen invisibles */
        body.is-preload #main .thumb {
            pointer-events: none; /* Ya lo tenías, es bueno */
            opacity: 0;
            transform: translateY(30px); /* Mantener consistencia con el estado inicial */
        }

        /* Efecto de gradiente (sin cambios) */
        #main .thumb:after {
            background-image: -moz-linear-gradient(to top, rgba(10,17,25,0.35) 5%, rgba(10,17,25,0) 35%);
            background-image: -webkit-linear-gradient(to top, rgba(10,17,25,0.35) 5%, rgba(10,17,25,0) 35%);
            background-image: -ms-linear-gradient(to top, rgba(10,17,25,0.35) 5%, rgba(10,17,25,0) 35%);
            background-image: linear-gradient(to top, rgba(10,17,25,0.35) 5%, rgba(10,17,25,0) 35%);
            pointer-events: none;
            background-size: cover;
            content: '';
            display: block;
            height: 100%;
            left: 0;
            position: absolute;
            top: 0;
            width: 100%;
        }

    /* --- Estilos para el contenedor de la imagen de fondo (.image) --- */
    #main .thumb > .image {
        -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        border: 0;
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;

        /* Para el lazy loading y la aparición del fondo */
        background-color: #e0e0e0; /* Color de fondo placeholder mientras carga la imagen */
        opacity: 0; /* El fondo (el <a>) empieza invisible */
        transition: opacity 0.5s ease-in-out 0.1s, transform 0.3s ease; /* Opacidad con delay, y tu transform original para el hover */
                                                                    /* El delay en la opacidad es para que aparezca después del thumb */
    }

        /* Cuando la imagen de fondo se ha cargado (clase añadida por JS) */
        #main .thumb > .image.thumb-background-loaded {
            opacity: 1;
        }

        /* Efecto hover: agrandar la imagen (tu estilo original) */
        #main .thumb:hover > .image {
            transform: scale(1.1);
        }

        /* Efecto hover en el thumb (tu estilo original) */
        #main .thumb:hover {
            outline: solid 2px #ffffffd0;
        }

    /* Título y párrafo (sin cambios significativos, solo asegurar que el título está por encima del gradiente) */
    #main .thumb > h2 {
        font-family: "Source Sans Pro", Helvetica, sans-serif;
        pointer-events: none;
        bottom: 1.875em;
        font-size: 0.7em;
        left: 2.1875em;
        margin: 0;
        position: absolute;
        z-index: 1; /* Asegura que el título está sobre el :after (gradiente) */
    }

    #main .thumb > p {
        display: none; /* Sin cambios */
    }

/* Overlay y efectos de content-active (sin cambios) */
#main:after {
    pointer-events: none;
    -moz-transition: opacity 0.5s ease, visibility 0.5s;
    -webkit-transition: opacity 0.5s ease, visibility 0.5s;
    -ms-transition: opacity 0.5s ease, visibility 0.5s;
    transition: opacity 0.5s ease, visibility 0.5s;
    background: rgba(36, 38, 41, 0.25);
    content: '';
    display: block;
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    visibility: hidden;
    width: 100%;
    z-index: 1; /* Este z-index es para el overlay general de #main */
}

    body.ie #main:after {
        background: rgba(36, 38, 41, 0.55);
    }

body.content-active #main {
    -moz-filter: blur(6px);
    -webkit-filter: blur(6px);
    -ms-filter: blur(6px);
    filter: blur(6px);
}

    body.content-active #main:after {
        pointer-events: auto;
        opacity: 1;
        visibility: visible;
    }


/* Media queries para el dimensionamiento de .thumb (sin cambios) */
@media screen and (max-width: 1680px) {
    #main .thumb {
        width: calc(25% - 20px);
    }
}

@media screen and (max-width: 1280px) {
    #main .thumb {
        width: calc(33.33333% - 20px);
    }
}

@media screen and (max-width: 480px) {
    #main .thumb {
        width: calc(50% - 20px);
    }
}

/* Media query para el header en móviles (sin cambios) */
@media screen and (max-width: 736px) {
    body {
        padding: 1em 0 0 0;
    }

    #header {
        height: 2em; /* Corrección: '2em' en lugar de '2m' */
        padding: 0 2.8em;
    }
}
/* Footer */

	#footer .copyright {
		color: #505051;
		font-size: 0.9em;
	}

		#footer .copyright a {
			color: inherit;
		}

		.poptrox-popup .pic {
			overflow: auto;
			position: relative;
			cursor: inherit; /* Asegura que herede el cursor de la imagen */
		  }
		  
		  .zoomed {
			transform: scale(1.5); /* Escala la imagen al 150% (ajusta según necesites) */
			transition: transform 0.3s ease; /* Suaviza la transición del zoom */
		  }


/* Nueva sección de contenido */
#new-content {
	min-height: 100vh;
	padding: 5px 20px;
}

.blank-space {
	background-color: rgba(255,255,255,0.1);
	border-radius: 10px;
	min-height: 80vh;
	
}

/* #header h1 {
	color: #ffffff;
} */

/* Estilos del botón hamburguesa */
.menu-toggle {
    all: unset; /* Restablece todos los estilos heredados */
    position: fixed; /* Fija el botón en la pantalla */
    top: 0.9em; /* Ajusta la separación del techo */
    left: 0.5em; /* Ajusta la separación de la izquierda */
	padding-left: 0.5em;
    background: none;
    border: none;
    cursor: pointer;
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
    z-index: 1100;
}

.menu-toggle:hover {
    box-shadow: none !important;
    color: inherit !important;
}

.menu-toggle span {
    display: block;
    width: 20px;
    height: 3px;
    background-color: white;
    transition: transform 0.3s ease;
}

.menu-toggle:hover span {
    background-color: #90cd02;
}

/* Menú desplegable */
.nav {
    all: unset; /* Restablece todos los estilos heredados */
    font-family: 'Atomic Marker', sans-serif;
    font-weight: normal;
    font-style: normal;
    position: fixed;
    top: 2em;
    left: -100%;
    width: 12em;
    height: 100vh;
    background: rgba(0, 0, 0, 0.397);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-left: 1.0em;
    transition: left 0.3s ease;
    z-index: 1000;
    padding-top: 20px;
    backdrop-filter: blur(10px);

	align-items: center;
}



.nav::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 1px; /* Ancho del borde */
    height: 100%;
    background: linear-gradient(to bottom, #21A1FF, #FF009E); /* Degradado vertical */
}

.menu-toggle:active {
    background-color: #24262900 !important;
}

.nav.open {
    left: 0;
}

.nav-menu {
    list-style: none;
    padding: 0;
    margin: 0; /* Elimina márgenes predeterminados */
}

.nav-menu li {
    margin: 15px 0;
}

.nav-link {
    text-decoration: none;
    color: white;
    font-size: 1.1em;
    text-transform: uppercase;
    transition: color 0.3s ease, transform 0.4s ease; /* Agrega transform a la transición */
    display: inline-block; /* Asegura que transform funcione */
}

.nav-link:hover {
    color: #90cd02 !important;
    transform: translateX(5px);
}

/* Transición suave para los íconos */
.nav-link i {
    transition: color 0.3s ease; /* Asegura que los íconos tengan la misma transición */
}

.nav-link:hover .fa-solid,
.nav-link:hover .fa,
.nav-link:hover .fas {
    color: #ffffff; /* Mismo color para todos los íconos */
}

.poptrox-popup .magnifier  {
	position: absolute;
	width: 150px;
	height: 150px;
	border-radius: 50%;
	background-size: 300%;
	background-repeat: no-repeat;
	pointer-events: none;
	display: none;
	border: 2px solid #fff;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
	z-index: 9000; /* Asegura que esté por encima de otros elementos */
  }

/* Overlay para el menú lateral */
.nav-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.3);
    z-index: 999;
}

.nav.open ~ .nav-overlay {
    display: block;
}

/* Galería de videos moderna */
.video-gallery-section {
  padding: 2rem 0;
  text-align: center;
}
.video-gallery-title {
	font-size: 2.2rem;
	margin-bottom: 1.5rem;
	font-family: 'Atomic Marker', cursive;
	color: #90cd02;
	letter-spacing: 2px;
	text-align: center; /* Centra el texto horizontalmente */
}
.video-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
}
.video-card {
  background: #181818;
  border-radius: 18px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.18);
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(.25,.8,.25,1), box-shadow 0.3s;
  width: 340px;
  max-width: 90vw;
  cursor: pointer;
  position: relative;
}
.video-card:hover {
  transform: translateY(-5px) scale(1.04);
  box-shadow: 0 3px 18px #b3ff01;
}
.video-thumb-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  background: #000;
  overflow: hidden;
}
.video-thumb {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 0 0 18px 18px;
  transition: filter 0.3s;
}
.video-card:hover .video-thumb {
  filter: brightness(1.1) contrast(1.1);
}
.video-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0,0,0,0.7);
  border-radius: 50%;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 2rem;
  pointer-events: none;
  box-shadow: 0 2px 12px rgba(0,0,0,0.25);
}

/* Modal de video */
#video-modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0; top: 0; width: 100vw; height: 100vh;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s cubic-bezier(.4,0,.2,1);
}
#video-modal.show {
  opacity: 1;
  pointer-events: auto;
}
.video-modal-backdrop {
  position: absolute;
  left: 0; top: 0; width: 100vw; height: 100vh;
  background: rgba(10,10,10,0.85);
  backdrop-filter: blur(6px);
  z-index: 1;
}
.video-modal-content {
  position: relative;
  z-index: 2;
  background: #181818;
  border-radius: 18px;
  border: 6.5px solid #202020; /* Borde plomo */
  box-shadow: 0 8px 32px #000;
  padding: 0; /* Quita el espacio extra arriba */
  max-width: 98vw;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.video-modal-iframe {
  width: 80vw;
  max-width: 1070px;
  aspect-ratio: 16/9;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  align-self: center;
  transition: box-shadow 0.18s;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0; /* Asegura que no haya hueco arriba del video */
}
.video-modal-iframe iframe {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 0;
  display: block;
}

.video-modal-close {
  background: none !important;
  border: none !important;
  color: #fff !important;
  font-size: 2.5rem;
  font-weight: bold;
  cursor: pointer;
  position: fixed;
  top: 20px !important;
  right: 20px !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 10001;
  transition: color 0.2s, transform 0.18s, box-shadow 0.18s;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  width: auto;
  height: auto !important;
  min-height: unset !important;
  max-height: none !important;
  line-height: 1 !important;
}
.video-modal-close:hover, .video-modal-close:focus {
  color: #90cd02 !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}
.video-modal-close:active {
  transform: scale(0.92);
}
body.video-modal-active {
  overflow: hidden;
  padding-right: 0.8em;
}
body.video-modal-active #wrapper,
body.video-modal-active .nav {
  filter: blur(6px) grayscale(0.2);
  pointer-events: none;
  user-select: none;
}

/* Título arriba derecha del modal de video, solo texto */
.video-modal-title {
  position: absolute;
  top: -2.5em;
  right: 0.1em;
  left: auto;
  transform: none;
  background: none;
  color: #fff;
  font-size: 0.95em;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  z-index: 10;
  margin: 0;
  text-align: right;
  pointer-events: none;
  font-weight: 200;
}

/* Estilos para la sección otros (blog multimedia) */
.otros-section {
  padding: 2rem 0;
  text-align: center;
}
.otros-title {
  font-size: 2.2rem;
  margin-bottom: 1.5rem;
  font-family: 'Atomic Marker', cursive;
  color: #90cd02;
  letter-spacing: 2px;
}
.otros-gallery {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: center;
  margin-bottom: 2rem;
}
.otros-entry {
  background: #181818;
  border-radius: 16px;
  box-shadow: 0 2px 16px rgba(0,0,0,0.13);
  padding: 1.2rem 1.5rem;
  width: 100%;
  max-width: 500px;
  transition: transform 0.25s, box-shadow 0.25s;
  position: relative;
  overflow: hidden;
}
.otros-entry:hover {
  transform: translateY(-6px) scale(1.03);
  box-shadow: 0 6px 24px rgba(144,205,2,0.13);
}
.otros-note {
  color: #fff;
  font-size: 1.1rem;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 0.7em;
}
.otros-note i {
  color: #90cd02;
  font-size: 1.3em;
}
.otros-video iframe {
  width: 100%;
  min-height: 220px;
  border-radius: 10px;
  background: #000;
}
.otros-mp3 audio {
  width: 100%;
  margin-top: 0.5em;
}
.otros-add-form {
  background: #232323;
  border-radius: 12px;
  padding: 1.2rem 1.5rem;
  margin: 0 auto;
  max-width: 500px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.10);
  display: flex;
  flex-direction: column;
  gap: 0.7em;
  align-items: stretch;
}
.otros-add-form h3 {
  color: #90cd02;
  font-size: 1.1rem;
  margin-bottom: 0.5em;
}
.otros-add-form select,
.otros-add-form input {
  padding: 0.6em 1em;
  border-radius: 6px;
  border: none;
  background: #181818;
  color: #fff;
  font-size: 1em;
  margin-bottom: 0.3em;
}
.otros-add-form button {
  background: #90cd02;
  color: #181818;
  border: none;
  border-radius: 6px;
  padding: 0.7em 1.2em;
  font-size: 1em;
  font-family: inherit;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.otros-add-form button:hover {
  background: #b6e34a;
  color: #232323;
}
@media (max-width: 600px) {
  .otros-entry, .otros-add-form {
    max-width: 98vw;
    padding: 1em 0.5em;
  }
  .otros-video iframe {
    min-height: 160px;
  }
}

/* Botones de filtro de categorías - versión mejorada */
.category-filters {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin: 1.2rem 0 0.7rem 0;
  opacity: 0;
  transform: translateY(-20px);
  transition: opacity 0.7s cubic-bezier(.4,0,.2,1), transform 0.7s cubic-bezier(.4,0,.2,1);
}
.category-filters.visible {
  opacity: 1;
  transform: translateY(0);
}
/* Botones de filtro de categorías con efecto gradiente animado adaptados a .category-btn */
.category-btn {
    position: relative;
    padding: 15px 30px;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    color: white;
    background: #222;
    border: 1px solid #00000000;
    border-radius: 30px;
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.25s cubic-bezier(.4,0,.2,1), color 0.3s, background 0.3s;
    box-shadow: none;
}

/* Efecto gradiente - aplica para hover y active */
.category-btn:hover::before,
.category-btn.active::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, #ff00ff, #00ffff, #ff00ff, #00ffff);
    background-size: 400%;
    z-index: -1;
    border-radius: 30px;
    animation: gradient 8s linear infinite;
}

.category-btn::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    background: #222;
    border-radius: 30px;
    z-index: -1;
}

/* Transformación y sombra - aplica para hover y active */
.category-btn:hover,
.category-btn.active {
    transform: scale(1.05);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

.category-btn:active, 
.category-btn:focus {
    outline: none;
}

.category-btn:not(:hover):not(.active) {
    box-shadow: none !important;
    transition: box-shadow 0s;
}

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

/* Resto de tus estilos... */
.category-btn img {
    width: 20px;
    height: 20px;
    vertical-align: middle;
    margin-right: 8px;
}

.category-filters {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin: 0 auto 18px auto;
    width: 100%;
    flex-wrap: wrap;
}

/* Botones más pequeños y texto centrado verticalmente */
.category-btn {
    font-size: 0.80rem;
    height: 2.2em;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    min-width: 80px;
}

.category-btn img {
    width: 16px;
    height: 16px;
    margin-right: 6px;
}

.close-x {
    display: none; /* Oculto por defecto */
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 4px;
    left: 6px;
    right: auto;
    bottom: auto;
    transform: none;
    background: none;
    color: #ff0033;
    border-radius: 0;
    width: 1em;
    height: 1em;
    font-size: 1em;
    line-height: 1em;
    text-align: center;
    cursor: pointer;
    border: none;
    z-index: 2;
    box-shadow: none;
    padding: 0;
    transition: color 0.18s;
}

/* Mostrar la X solo cuando el botón está activo */
.category-btn.active .close-x {
    display: flex;
}

.close-x:hover {
    color: #ff3366;
}

/* Footer simple copyright al final de la página */
.footer-simple {
    background: #0e0e0e;
    color: #bbb;
    text-align: center;
    padding: 10px 0;
    font-size: 0.75em;
    letter-spacing: 0.02em;
    width: 100%;
    position: static;
    margin: 0;
}

@media (max-width: 600px) {
  .footer-simple {
    font-size: 0.85em;
    padding: 8px 0;
  }
}

/* --- Imagen en el footer junto al texto de bienvenida --- */
.footer-bienvenida-flex {
	display: flex;
	align-items: flex-start;
	
  }
  .footer-bienvenida-flex > div {
	flex: 1 1 0;
	min-width: 0;
  }
  .footer-bienvenida-flex img {
	max-height: 300px;
	max-width: 100%; 
	height: auto; 
	width: auto;
	display: block;
	margin-top: 80px; 
	padding-left: 40px;
  }
  
  @media (max-width: 900px) {
	.footer-bienvenida-flex {
	  flex-direction: column;
	  align-items: stretch;
	  gap: 1.5em;
	}
	.footer-bienvenida-flex img {
	  margin: 0px auto 0; 
	  max-height: 200px; 
	  margin-top: -30px; 
	}
  }
  
  @media (max-width: 480px) {
	.footer-bienvenida-flex img {
	  max-height: 250px; 
	}
  }

/* Animación suave de subida y bajada para la imagen isometric.webp */
.footer-bienvenida-img {
  animation: updown-smooth 8s ease-in-out infinite;
}
@keyframes updown-smooth {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

.custom-modal {
	position: fixed;
	z-index: 99999;
	left: 0; top: 0;
	width: 100vw; height: 100vh;
	background: rgba(0,0,0,0.85);
	display: flex;
	align-items: center;
	justify-content: center;
	backdrop-filter: blur(4px);
	transition: all 0.25s ease-out;
  }
  
  .custom-modal-content {
	background: linear-gradient(145deg, #0c1428, #080f1f);
	color: #fff;
	padding: 1.5em 2em;
	border-radius: 16px;
	box-shadow: 0 8px 30px rgba(0, 60, 150, 0.25);
	text-align: center;
	min-width: 240px;
	max-width: 85vw;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1em;
	border: 1px solid rgba(255,255,255,0.05);
	transform: scale(0.96);
	animation: modalEntrance 0.3s forwards;
  }
  
  @keyframes modalEntrance {
	to {
	  transform: scale(1);
	  opacity: 1;
	}
  }
  
  #custom-modal-message {
	margin-bottom: 0.4em;
	width: 100%;
	font-size: 0.95em;
	line-height: 1.4;
	color: rgba(255,255,255,0.85);
  }
  
  .custom-modal-ok {

	background: linear-gradient(135deg, #0084ff 0%, #0055cc 100%);
	color: white;
	border: none;
	border-radius: 10px;
	font-size: 0.7em;
	font-weight: 600;
	cursor: pointer;
	box-shadow: 0 3px 12px rgba(0, 80, 200, 0.25);
	transition: all 0.2s ease;
	display: inline-block;
	line-height: 1.3;
	min-width: 100px;
	position: relative;
	overflow: hidden;
	z-index: 1;
  }
  
  .custom-modal-ok::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #0055cc 0%, #0084ff 100%);
	opacity: 0;
	transition: opacity 0.2s ease;
	z-index: -1;
  }
  
  .custom-modal-ok:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 15px rgba(0, 90, 220, 0.35);
  }
  
  .custom-modal-ok:hover::before {
	opacity: 1;
  }
  
  .custom-modal-ok:active {
	transform: translateY(0);
	box-shadow: 0 2px 8px rgba(0, 70, 180, 0.3);
  }