/* FER STYLES */

/* FONTS */
/* exo-2-regular - latin */
@font-face {
	font-family: 'Exo 2';
	font-style: normal;
	font-weight: 400;
	src: url('../fonts/exo-2-v20-latin-regular.eot'); /* IE9 Compat Modes */
	src: local(''),
		 url('../fonts/exo-2-v20-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
		 url('../fonts/exo-2-v20-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
		 url('../fonts/exo-2-v20-latin-regular.woff') format('woff'), /* Modern Browsers */
		 url('../fonts/exo-2-v20-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
		 url('../fonts/exo-2-v20-latin-regular.svg#Exo2') format('svg'); /* Legacy iOS */
}

/* exo-2-700 - latin */
@font-face {
	font-family: 'Exo 2';
	font-style: normal;
	font-weight: 700;
	src: url('../fonts/exo-2-v20-latin-700.eot'); /* IE9 Compat Modes */
	src: local(''),
		 url('../fonts/exo-2-v20-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
		 url('../fonts/exo-2-v20-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
		 url('../fonts/exo-2-v20-latin-700.woff') format('woff'), /* Modern Browsers */
		 url('../fonts/exo-2-v20-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
		 url('../fonts/exo-2-v20-latin-700.svg#Exo2') format('svg'); /* Legacy iOS */
}

/* exo-2-italic - latin */
@font-face {
	font-family: 'Exo 2';
	font-style: italic;
	font-weight: 400;
	src: url('../fonts/exo-2-v20-latin-italic.eot'); /* IE9 Compat Modes */
	src: local(''),
		 url('../fonts/exo-2-v20-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
		 url('../fonts/exo-2-v20-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
		 url('../fonts/exo-2-v20-latin-italic.woff') format('woff'), /* Modern Browsers */
		 url('../fonts/exo-2-v20-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
		 url('../fonts/exo-2-v20-latin-italic.svg#Exo2') format('svg'); /* Legacy iOS */
}

/* exo-2-700italic - latin */
@font-face {
	font-family: 'Exo 2';
	font-style: italic;
	font-weight: 700;
	src: url('../fonts/exo-2-v20-latin-700italic.eot'); /* IE9 Compat Modes */
	src: local(''),
		 url('../fonts/exo-2-v20-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
		 url('../fonts/exo-2-v20-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */
		 url('../fonts/exo-2-v20-latin-700italic.woff') format('woff'), /* Modern Browsers */
		 url('../fonts/exo-2-v20-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */
		 url('../fonts/exo-2-v20-latin-700italic.svg#Exo2') format('svg'); /* Legacy iOS */
}


/* RESET */
/* Box sizing rules */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* Heavy reset */
* {font:inherit;margin:0;padding:0}
/* Remove default margin */
body,
h1,
.entry-content h1,
h2,
.entry-content h2,
h3,
.entry-content h3,
h4,
.entry-content h4,
h5,
.entry-content h5,
h6,
.entry-content h6,
p,
figure,
blockquote,
dl,
dd {
	margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
	list-style: none;
}

/* Set core root defaults */
html:focus-within {
	scroll-behavior: smooth;
}

/* Set core body defaults */
body {
	min-height: 100vh;
	text-rendering: optimizeSpeed;
	line-height: 1.5;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
	text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture {
	max-width: 100%;
	display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
	font: inherit;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
	html:focus-within {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}




/* VARS */
:root {

	/* COLORS */
	--clr-primary:hsl(7, 93%, 62%);
	--clr-secondary:hsl(22, 91%, 66%);
	--clr-tertiary:hsl(33, 93%, 78%);
	--clr-quaternary: hsl(7, 93%, 62%);
	--clr-quaternary-80: hsla(7, 93%, 62%,.6);
	--clr-d-gradient:linear-gradient(135deg, var(--clr-primary) 0%, var(--clr-tertiary) 100%); 
	--clr-primary-black:hsl(0, 0%, 0%);
	--clr-primary-black-10:hsl(0, 0%, 10%);
	--clr-primary-black-20:hsl(0, 0%, 20%);
	--clr-primary-black-30:hsl(0, 0%, 30%);
	--clr-primary-black-31:hsl(0, 0%, 31%);
	--clr-primary-black-32:hsl(0, 0%, 32%);
	--clr-primary-black-33:hsl(0, 0%, 33%);
	--clr-primary-black-34:hsl(0, 0%, 34%);
	--clr-primary-black-35:hsl(0, 0%, 35%);
	--clr-primary-black-36:hsl(0, 0%, 36%);
	--clr-primary-black-37:hsl(0, 0%, 37%);
	--clr-primary-black-38:hsl(0, 0%, 38%);
	--clr-primary-black-39:hsl(0, 0%, 39%);
	--clr-primary-black-40:hsl(0, 0%, 40%);
	--clr-primary-black-41:hsl(0, 0%, 41%);
	--clr-primary-black-42:hsl(0, 0%, 42%);
	--clr-primary-black-43:hsl(0, 0%, 43%);
	--clr-primary-black-44:hsl(0, 0%, 44%);
	--clr-primary-black-45:hsl(0, 0%, 45%);
	--clr-primary-black-46:hsl(0, 0%, 46%);
	--clr-primary-black-47:hsl(0, 0%, 47%);
	--clr-primary-black-48:hsl(0, 0%, 48%);
	--clr-primary-black-49:hsl(0, 0%, 49%);
	--clr-primary-black-50:hsl(0, 0%, 50%);
	--clr-primary-black-60:hsl(0, 0%, 60%);
	--clr-primary-black-65:hsl(0, 0%, 65%);
	--clr-primary-black-70:hsl(0, 0%, 70%);
	--clr-primary-black-71:hsl(0, 0%, 71%);
	--clr-primary-black-72:hsl(0, 0%, 72%);
	--clr-primary-black-73:hsl(0, 0%, 73%);
	--clr-primary-black-74:hsl(0, 0%, 74%);
	--clr-primary-black-75:hsl(0, 0%, 75%);
	--clr-primary-black-76:hsl(0, 0%, 76%);
	--clr-primary-black-77:hsl(0, 0%, 77%);
	--clr-primary-black-78:hsl(0, 0%, 78%);
	--clr-primary-black-79:hsl(0, 0%, 79%);
	--clr-primary-black-80:hsl(0, 0%, 80%);
	--clr-primary-black-85:hsl(0, 0%, 85%);
	--clr-primary-black-90:hsl(0, 0%, 90%);
	--clr-primary-black-95:hsl(0, 0%, 95%);
	--clr-primary-black-00-a2:hsl(0, 0%, 0%, .2);
	--clr-primary-white:hsl(0, 0%, 100%);
	--clr-primary-black-80-a9:hsla(0,0%,80%,.9);
	--clr-primary-black-92-a9:hsla(0,0%,92%,.9);

	
	/* FONT-SIZES */
	--fs-3xs: clamp(0.78rem, calc(0.77rem + 0.03vw), 0.80rem);
	--fs-2xs: clamp(0.94rem, calc(0.92rem + 0.11vw), 1.00rem);
	--fs-xs: clamp(0.913rem, calc(0.908rem + 0.22vw), 1.25rem);
	--fs-s: clamp(1.35rem, calc(1.28rem + 0.37vw), 1.56rem);
	--fs-m: clamp(1.62rem, calc(1.50rem + 0.58vw), 1.95rem);
	--fs-l: clamp(1.94rem, calc(1.77rem + 0.87vw), 2.44rem);
	--fs-xl: clamp(2.33rem, calc(2.08rem + 1.25vw), 3.05rem);
	--fs-2xl: clamp(2.4756rem, 0.4301rem + 5.2277vw, 6.3113rem);
	--fs-3xl: clamp(1.5744rem, 0.0957rem + 7.3932vw, 8.4131rem);

	--fs-primary-heading:var(--fs-s);
	--fs-secondary-heading:calc(.8*var(--fs-2xl));
	--fs-tertiary-heading:var(--fs-xl);
	--fs-quaternary-heading:var(--fs-xs);
	--fs-quinary-heading:var(--fs-xs);
	--fs-senary-heading:var(--fs-2xs);

	/* GENERIC GAPS */
	--space-no: 0px;
	--space-3xs: clamp(0.3125rem, 0.3125rem + 0vw, 0.3125rem);
	--space-2xs: clamp(0.5625rem, 0.5408rem + 0.1087vw, 0.625rem);
	--space-xs: clamp(0.875rem, 0.8533rem + 0.1087vw, 0.9375rem);
	--space-s: clamp(1.125rem, 1.0815rem + 0.2174vw, 1.25rem);
	--space-m: clamp(1.6875rem, 1.6223rem + 0.3261vw, 1.875rem);
	--space-l: clamp(2.25rem, 2.163rem + 0.4348vw, 2.5rem);
	--space-xl: clamp(3.375rem, 3.2446rem + 0.6522vw, 3.75rem);
	--space-2xl: clamp(4.5rem, 4.3261rem + 0.8696vw, 5rem);
	--space-3xl: clamp(6.75rem, 6.4891rem + 1.3043vw, 7.5rem);
	/* ONE-UP PAIRS */
	--space-3xs-2xs: clamp(0.3125rem, 0.2038rem + 0.5435vw, 0.625rem);
	--space-2xs-xs: clamp(0.5625rem, 0.4321rem + 0.6522vw, 0.9375rem);
	--space-xs-s: clamp(0.875rem, 0.7446rem + 0.6522vw, 1.25rem);
	--space-s-m: clamp(1.125rem, 0.8641rem + 1.3043vw, 1.875rem);
	--space-m-l: clamp(1.6875rem, 1.4049rem + 1.413vw, 2.5rem);
	--space-l-xl: clamp(2.25rem, 1.7283rem + 2.6087vw, 3.75rem);
	--space-xl-2xl: clamp(3.375rem, 2.8098rem + 2.8261vw, 5rem);
	--space-2xl-3xl: clamp(4.5rem, 3.4565rem + 5.2174vw, 7.5rem);
	/* TWO-UP PAIRS */
	--space-3xs-xs: clamp(0.3125rem, 0.0951rem + 1.087vw, 0.9375rem);
	--space-2xs-s: clamp(0.5625rem, 0.3234rem + 1.1957vw, 1.25rem);
	--space-xs-m: clamp(0.875rem, 0.5272rem + 1.7391vw, 1.875rem);
	--space-s-l: clamp(1.125rem, 0.6467rem + 2.3913vw, 2.5rem);
	--space-m-xl: clamp(1.6875rem, 0.9701rem + 3.587vw, 3.75rem);
	--space-l-2xl: clamp(2.25rem, 1.2935rem + 4.7826vw, 5rem);
	--space-xl-3xl: clamp(3.375rem, 1.9402rem + 7.1739vw, 7.5rem);
	/* THREE-UP PAIRS */
	--space-3xs-s: clamp(0.3125rem, -0.0136rem + 1.6304vw, 1.25rem);
	--space-2xs-m: clamp(0.5625rem, 0.106rem + 2.2826vw, 1.875rem);
	--space-xs-l: clamp(0.875rem, 0.3098rem + 2.8261vw, 2.5rem);
	--space-s-xl: clamp(1.125rem, 0.212rem + 4.5652vw, 3.75rem);
	--space-m-2xl: clamp(1.6875rem, 0.5353rem + 5.7609vw, 5rem);
	--space-l-3xl: clamp(2.25rem, 0.4239rem + 9.1304vw, 7.5rem);
	/* FOUR-UP PAIRS */
	--space-3xs-m: clamp(0.3125rem, -0.231rem + 2.7174vw, 1.875rem);
	--space-2xs-l: clamp(0.5625rem, -0.1114rem + 3.3696vw, 2.5rem);
	--space-xs-xl: clamp(0.875rem, -0.125rem + 5vw, 3.75rem);
	--space-s-2xl: clamp(1.125rem, -0.2228rem + 6.7391vw, 5rem);
	--space-m-3xl: clamp(1.6875rem, -0.3342rem + 10.1087vw, 7.5rem);
	/* FIVE-UP PAIRS */
	--space-3xs-l: clamp(0.3125rem, -0.4484rem + 3.8043vw, 2.5rem);
	--space-2xs-xl: clamp(0.5625rem, -0.5462rem + 5.5435vw, 3.75rem);
	--space-xs-2xl: clamp(0.875rem, -0.5598rem + 7.1739vw, 5rem);
	--space-s-3xl: clamp(1.125rem, -1.0924rem + 11.087vw, 7.5rem);
	/* SIX-UP PAIRS */
	--space-3xs-xl: clamp(0.3125rem, -0.8832rem + 5.9783vw, 3.75rem);
	--space-2xs-2xl: clamp(0.5625rem, -0.981rem + 7.7174vw, 5rem);
	--space-xs-3xl: clamp(0.875rem, -1.4293rem + 11.5217vw, 7.5rem);
	/* SEVEN-UP PAIRS */
	--space-3xs-2xl: clamp(0.3125rem, -1.3179rem + 8.1522vw, 5rem);
	--space-2xs-3xl: clamp(0.5625rem, -1.8505rem + 12.0652vw, 7.5rem);
	/* EIGHT-UP PAIRS */
	--space-3xs-3xl: clamp(0.3125rem, -2.1875rem + 12.5vw, 7.5rem);
	/* INVERSE */
	--space-3xl-2xl: clamp(5rem, 7.3587rem + -3.0435vi, 6.75rem);
	--space-3xl-xl: clamp(3.75rem, 7.7935rem + -5.2174vi, 6.75rem);
	--space-3xl-l: clamp(2.5rem, 8.2283rem + -7.3913vi, 6.75rem);
	--space-3xl-m: clamp(1.875rem, 8.4457rem + -8.4783vi, 6.75rem);
	--space-3xl-s: clamp(1.25rem, 8.663rem + -9.5652vi, 6.75rem);
	--space-3xl-xs: clamp(0.9375rem, 8.7717rem + -10.1087vi, 6.75rem);
	--space-3xl-2xs: clamp(0.625rem, 8.8804rem + -10.6522vi, 6.75rem);
	--space-3xl-3xs: clamp(0.3125rem, 8.9891rem + -11.1957vi, 6.75rem);
	--space-2xl-xl: clamp(3.75rem, 4.7609rem + -1.3043vi, 4.5rem);
	--space-2xl-l: clamp(2.5rem, 5.1957rem + -3.4783vi, 4.5rem);
	--space-2xl-m: clamp(1.875rem, 5.413rem + -4.5652vi, 4.5rem);
	--space-2xl-s: clamp(1.25rem, 5.6304rem + -5.6522vi, 4.5rem);
	--space-2xl-xs: clamp(0.9375rem, 5.7391rem + -6.1957vi, 4.5rem);
	--space-2xl-2xs: clamp(0.625rem, 5.8478rem + -6.7391vi, 4.5rem);
	--space-2xl-3xs: clamp(0.3125rem, 5.9565rem + -7.2826vi, 4.5rem);
	--space-xl-l: clamp(2.5rem, 3.6793rem + -1.5217vi, 3.375rem);
	--space-xl-m: clamp(1.875rem, 3.8967rem + -2.6087vi, 3.375rem);
	--space-xl-s: clamp(1.25rem, 4.1141rem + -3.6957vi, 3.375rem);
	--space-xl-xs: clamp(0.9375rem, 4.2228rem + -4.2391vi, 3.375rem);
	--space-xl-2xs: clamp(0.625rem, 4.3315rem + -4.7826vi, 3.375rem);
	--space-xl-3xs: clamp(0.3125rem, 4.4402rem + -5.3261vi, 3.375rem);
	--space-l-m: clamp(1.875rem, 2.3804rem + -0.6522vi, 2.25rem);
	--space-l-s: clamp(1.25rem, 2.5978rem + -1.7391vi, 2.25rem);
	--space-l-xs: clamp(0.9375rem, 2.7065rem + -2.2826vi, 2.25rem);
	--space-l-2xs: clamp(0.625rem, 2.8152rem + -2.8261vi, 2.25rem);
	--space-l-3xs: clamp(0.3125rem, 2.9239rem + -3.3696vi, 2.25rem);
	--space-m-s: clamp(1.25rem, 1.8397rem + -0.7609vi, 1.6875rem);
	--space-m-xs: clamp(0.9375rem, 1.9484rem + -1.3043vi, 1.6875rem);
	--space-m-2xs: clamp(0.625rem, 2.0571rem + -1.8478vi, 1.6875rem);
	--space-m-3xs: clamp(0.3125rem, 2.1658rem + -2.3913vi, 1.6875rem);
	--space-s-xs: clamp(0.9375rem, 1.1902rem + -0.3261vi, 1.125rem);
	--space-s-2xs: clamp(0.625rem, 1.2989rem + -0.8696vi, 1.125rem);
	--space-s-3xs: clamp(0.3125rem, 1.4076rem + -1.413vi, 1.125rem);
	--space-xs-2xs: clamp(0.625rem, 0.962rem + -0.4348vi, 0.875rem);
	--space-xs-3xs: clamp(0.3125rem, 1.0707rem + -0.9783vi, 0.875rem);
	--space-2xs-3xs: clamp(0.3125rem, 0.6495rem + -0.4348vi, 0.5625rem);

	/* LINE-HEIHTS */
	--lh-100:1;
	--lh-200:1.2;
	--lh-300:1.4;
	--lh-400:1.6;
	--lh-500:1.8;
	--lh-600:2;
	--lh-700:2.5;
	--lh-800:3;
	--lh-900:3.5;

	/* LETTER SPACINGS */
	--ls-100:.01rem;
	--ls-200:.02rem;
	--ls-300:.03rem;
	--ls-400:.04rem;
	--ls-500:.05rem;
	--ls-600:.06rem;
	--ls-700:.07rem;
	--ls-800:.08rem;
	--ls-900:.09rem;

	/* FONT-FAMILIES */
	--ff-primary: 'Exo 2';
	--ff-body:var(--ff-primary);
	--ff-primary-heading:var(--ff-primary);
	--ff-secondary-heading:var(--ff-primary);
	--ff-tertiary-heading:var(--ff-primary);
	--ff-quaternary-heading:var(--ff-primary);
	--ff-quinary-heading:var(--ff-primary);
	--ff-senary-heading:var(--ff-primary);

	/* FONT-WEIGHTS */
	--fw-regular:400;
	--fw-bold:700;
	--fw-body:var(--fw-regular);
	--fw-primary-heading:var(--fw-bold);
	--fw-secondary-heading:var(--fw-bold);
	--fw-tertiary-heading:var(--fw-bold);
	--fw-quaternary-heading:var(--fw-regular);
	--fw-quinary-heading:var(--fw-bold);
	--fw-senary-heading:var(--fw-bold);

	/* MAX-WIDTHS */
	--mw-100: 26ch;
	--mw-200: 32ch;
	--mw-300: 29.375rem;
	--mw-400: 47.5rem;
	--mw-500: 67.9375rem;
	--mw-600: 78.75rem;
	--mw-700: 90rem;
	--mw-800: 100rem;
	--mw-900: 118.75rem;
	--mw-100-p-xs: min(var(--mw-100),100% - (var(--space-xs) * 2));
	--mw-200-p-xs: min(var(--mw-200),100% - (var(--space-xs) * 2));
	--mw-300-p-xs: min(var(--mw-300),100% - (var(--space-xs) * 2));
	--mw-400-p-xs: min(var(--mw-400),100% - (var(--space-xs) * 2));
	--mw-500-p-xs: min(var(--mw-500),100% - (var(--space-xs) * 2));
	--mw-600-p-xs: min(var(--mw-600),100% - (var(--space-xs) * 2));
	--mw-700-p-xs: min(var(--mw-700),100% - (var(--space-xs) * 2));
	--mw-800-p-xs: min(var(--mw-800),100% - (var(--space-xs) * 2));
	--mw-900-p-xs: min(var(--mw-900),100% - (var(--space-xs) * 2));

	/* BOX-SHADOWS */
	--bs-100: 0 1px 2px var(--clr-primary-black-10);
	--bs-200: 0 2px 3px var(--clr-primary-black-80);
	--bs-300: 0 3px 5px var(--clr-primary-black-60);
	--bs-400: 0 3px 5px var(--clr-primary-black-40);
	--bs-500: 0 5px 8px var(--clr-primary-black-40);
	--bs-600: 0 3px 6px var(--clr-primary-black-60);
	--bs-700: 0 3px 6px var(--clr-primary-black-80);
	--bs-800: 0 5px 8px var(--clr-primary-black-80);
	--bs-900: 0 5px 10px var(--clr-primary-black);

	/* BORDER-RADIUS */
	--br-000: 0;
	--br-100: 3px;
	--br-200: 5px;
	--br-300: 8px;
	--br-400: 10px;
	--br-500: 16px;
	--br-600: 32px;
	--br-700: 64px;
	--br-800: 72px;
	--br-900: 50vmax;
}

/* UTILITY CLASSES */
/* MAX WIDTHS */
.mw-100 > .wrap {margin-inline:auto;width:min(var(--mw-100),100% - (var(--space-m) * 2))}
.mw-200 > .wrap {margin-inline:auto;width:min(var(--mw-200),100% - (var(--space-m) * 2))}
.mw-300 > .wrap {margin-inline:auto;width:min(var(--mw-300),100% - (var(--space-m) * 2))}
.mw-400 > .wrap {margin-inline:auto;width:min(var(--mw-400),100% - (var(--space-m) * 2))}
.mw-500 > .wrap {margin-inline:auto;width:min(var(--mw-500),100% - (var(--space-m) * 2))}
.mw-600 > .wrap {margin-inline:auto;width:min(var(--mw-600),100% - (var(--space-m) * 2))}
.mw-700 > .wrap {margin-inline:auto;width:min(var(--mw-700),100% - (var(--space-m) * 2))}
.mw-800 > .wrap {margin-inline:auto;width:min(var(--mw-800),100% - (var(--space-m) * 2))}
.mw-900 > .wrap {margin-inline:auto;width:min(var(--mw-900),100% - (var(--space-m) * 2))}




/* GENERAL */

.light h1 {
	color:var(--clr-primary-black-40);
}

.dark h1 {
	color:var(--clr-primary-black-80);
}


h1 {
	
	font-size:var(--fs-primary-heading);
	font-style: italic;
	font-weight:var(--fw-primary-heading);
	letter-spacing: var(--ls-500);
	line-height:var(--lh-100);
	margin-bottom:var(--space-l)
}

p {
	font-size:var(--fs-3xs);
}

.light_text {
	font-weight: var(--fw-body);
}

h1 .light_text {font-size:calc(.95 * var(--fs-primary-heading))}

body {
	font-family:var(--ff-primary);
	margin:0;
}

.site-footer {
	position: absolute;
	bottom: 0;
	background-color:transparent;
	text-align: center;
	padding-block:var(--space-xs-l);
	width:100%;
	padding-bottom:var(--space-3xl)
}

.light .site-footer p {
	color:var(--clr-primary-black-50);
}

.dark .site-footer p {
	color:var(--clr-primary-black-70);
}


.site-footer p {
	
	font-style:italic;
}


body.dark {
	--bg-grad-01:var(--clr-primary-black-45);
	/* --clr-gradient-primary:var(--clr-primary-black-40); */
	/* --clr-gradient-secondary:var(--clr-primary-black-20); */
	--clr-main-bg:var(--clr-primary-black-40);
	--clr-btn-border:var(--clr-primary-black-45);
	--clr-btn-bg:var(--clr-primary-black-60);
	--clr-btn-bs:var(--clr-primary-black-46);
	--clr-btn-bs-02:var(--clr-primary-black-00-a2);
	--btn_br:12px 15px 10px 12px;
	--size: clamp(30rem,70vw,80rem);
	--position: 15%;
	--variation: clamp(1rem,3vw,3rem);
	--animation: tunnel_dark;
	--main-shadows: radial-gradient(circle, transparent 30%, var(--clr-primary-black-35) 100%);
}

body.light {
	--bg-grad-01:var(--clr-primary-black-80);
	/* --clr-gradient-primary:var(--clr-primary-black-90); */
	/* --clr-gradient-secondary:var(--clr-primary-black-70); */
	--clr-main-bg:var(--clr-primary-black-90);
	--clr-btn-border:#f2f2f2;
	--clr-btn-bg:var(--clr-primary-black-80);
	--clr-btn-bs:var(--clr-primary-white);
	--clr-btn-bs-02:var(--clr-primary-black-00-a2);
	--btn_br: 11px 12px 8px 10px;
	--size: clamp(30rem,70vw,80rem);
	--position: 15%;
	--variation: clamp(1rem,3vw,3rem);
	--animation: tunnel_dark;
	--main-shadows: radial-gradient(circle, transparent 50%, var(--clr-primary-black-80) 100%);
}

.main {
	--logo_skew:-18deg;
	/* background: radial-gradient(circle, var(--clr-gradient-primary) 10%, var(--clr-gradient-secondary) 100%); */
	background-color: var(--clr-main-bg);
	width: 100vw;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	overflow:hidden;
}

.main:before {
	content:'';
	display:block;
	position: absolute;
	top:0;
	left:0;
	background:var(--main-shadows);
	height:100vh;
	width:100vw;
	z-index:2;
}


.tunnel {
	position: relative;
	width: 100vw;
	height: 100vh;
	perspective: 100vw;
	position: absolute;
}

.circle {
	position: absolute;
	top: 50%;
	left: 50%;
	width: var(--size);
	height: var(--size);
	background: radial-gradient(circle,
		transparent calc(var(--position) - (var(--variation) * 2)),
		transparent calc(var(--position) - (var(--variation) *1)),
		var(--bg-grad-01) var(--position),
		var(--bg-grad-01) calc(var(--position) + (var(--variation) * 1)), 
		transparent calc(var(--position) + (var(--variation) * 2))
	 );
	border-radius: 50%;
	transform: translate(-50%, -50%) scale(1);
	animation: var(--animation) 30s ease-out infinite;
}


/* SVG fijo en la parte superior */
.svg-mask {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	pointer-events: none; /* Evitar interacción */
	z-index:1;
  }
  
  .svg-mask img {
	width:var(--size); /* Tamaño fijo para que no se escale */
	height: var(--size);
	object-fit: cover;
	--size:100%;
	/* animation:rotateObject 120s linear infinite; */
  }


/* BTN LOGO */
.btn_logo {
	touch-action: manipulation;
	position: relative;
	padding: 0;
	width: 83px;
	height: 60px;
	border: 2px solid var(--clr-btn-border); /* light #f2f2f2 */
	/* outline: none; */
	background-color: var(--clr-btn-bg); /* light #f4f5f6 */
	border-radius: var(--btn_br);
	box-shadow: 10px -10px 17.5px var(--clr-btn-bs), 10px -5px 7.5px var(--clr-btn-bs), -10px 0px 15px var(--clr-btn-bs), 3px 10px 12.5px var(--clr-btn-bs-02) /* 0 0 0 .2 */;
	transition: 0.13s ease-in-out;
	cursor: pointer;
	transform: skewX(var(--logo_skew));
	z-index:3;
}

.light .btn_logo {
	
}

.dark .btn_logo {

}


.btn_logo:active {
	box-shadow: none;
}

.btn_logo:active .btn_logo__content {
	box-shadow: none;
}

.btn_logo:active .btn_logo__content .btn_logo__text, .btn_logo:active .btn_logo__content .btn_logo__icon {
	transform: translate3d(0px, 0px, 0px);
}



  
/* LOGO CONTENT */

.btn_logo__content {
	/* --tone:40;
	--color-a: hsl(var(--tone),0%,80%);
	--color-b: hsl(var(--tone),0%,28%);
	--color-c: hsl(var(--tone),0%,95%); */
	padding-top: 1px;
	position: relative;
	display: grid;
	width: 98%;
	height: 100%;
	border-radius: var(--btn_br);
	transition: 0.13s ease-in-out;
	z-index: 1;
	/* white logo */
	/* dark logo */
	/* background: linear-gradient(0deg, var(--color-c) 60%, var(--color-a) 90%, var(--color-a) 80%, var(--color-b) 100%); */
	animation: backgroundChange 1s infinite alternate ease-in-out;
	position: relative;

}

.light .btn_logo__content {
	background: linear-gradient(0deg, #aaa 0%, hsla(0,0%,100%,.7) 100%);
	box-shadow: inset 0px 5px 0px #dfdfdf;

}


.dark .btn_logo__content {
	background: linear-gradient(0deg, var(--clr-primary-black-90) 0%, var(--clr-primary-white) 100%);
	box-shadow:inset 0px 0px 5px var(--clr-primary-black-80-a9);
}


/* FER 04 */

.fer_04 {
	transform: skewX(calc(-1 * var(--logo_skew)));
	min-width: 89px;
	margin-top:4px;
	opacity:.9;
}

.light .fer_04 {
 margin-left:-4px;

}

.dark .fer_04 {
	margin-left:-4px;

}



/* FER 01 */

.fer_01 {
	transform: skewX(calc(-1 * var(--logo_skew)));
	
	margin-top:3px;
	position:absolute;
}

.light .fer_01 {
	margin-left: -5px;
	min-width: 89px;
	mix-blend-mode:difference;
}

.dark .fer_01 {
	margin-left: -6px;
	min-width: 91px;
	mix-blend-mode:screen;
	opacity:.5;
}


@keyframes fer01 {
	0% {
		transform: translateX(0);
	}
	
	20% {
		transform:  translateX(0);
	}
	40% {
		transform: translateX(-85px);
	}
	100% {
		transform:  translateX(-85px);
	}
}

@keyframes fer02 {
	20% {
		transform: skewX(calc(-1* var(--logo_skew))) translateY(0) translateX(0);
	}
	30% {
		transform: skewX(calc(-1* var(--logo_skew))) translateY(0) translateX(0);
	}
	60% {
		transform: skewX(calc(-1* var(--logo_skew))) translateY(0) translateX(45px);
	}
	100% {
		transform: skewX(calc(-1* var(--logo_skew))) translateY(0) translateX(45px);
	}
}


/* Animación del túnel */
@keyframes tunnel_light {
	0% {
	  transform: translate(-50%, -50%) scale(0);
	  opacity: .5;
	}
	15% {
		transform: translate(-50%, -50%) scale(16);
		opacity: .5;
	}	
	80% {
	  transform: translate(-50%, -50%) scale(30);
	  opacity: .3;
	}
	100% {
		transform: translate(-50%, -50%) scale(48);
		opacity: 0;
	}
  }


/* Animación del túnel */
@keyframes tunnel_dark {
	0% {
	  transform: translate(-50%, -50%) scale(0);
	  opacity: 0;
	}
	5% {
		transform: translate(-50%, -50%) scale(7);
		opacity: 0.7;
	}	
	30% {
	  transform: translate(-50%, -50%) scale(11);
	  opacity: 0.3;
	}
	40% {
		transform: translate(-50%, -50%) scale(17);
		opacity: 0;
	}
	100% {
		transform: translate(-50%, -50%) scale(17);
		opacity: 0;
	}
  }
  
  
  .carousel {
	position: relative;
	display: block;
	height: 90px;
	max-width: 400px;
	margin-inline: auto;
	display: flex;
	justify-content: center;
}

  .carousel-text {
    position:absolute;
    opacity: 0;
    animation: fadeInOut 6s infinite;
  }

  /* Primero texto con un retardo de animación */
  .carousel-text:nth-child(1) {
    animation-delay: 0s;
  }

  /* Segundo texto con un retardo de animación */
  .carousel-text:nth-child(2) {
    animation-delay: 3s;
  }

  /* Animación de desvanecimiento */
  @keyframes fadeInOut {
    0%, 100% { opacity: 0; }  /* Inicio y fin invisibles */
    10%, 40% { opacity: 1; }   /* Visible en esta fase */
    50%, 90% { opacity: 0; }   /* Desaparece antes de la transición al siguiente */
  }