/* ============ Loader ============ */

#preloader {
    position: fixed;
    width: 100%;
    height: 100%;
    background: black;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 0.5s ease, visibility 0.5s;
}

body.darkmode #preloader {
  	background: black;
}

#preloader .loader {
    width: 50px;
    height: 50px;
    border: 8px solid black;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* Animación de carga */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Ocultar preloader después de cargar */
.fade-out {
    opacity: 0;
    visibility: hidden;
}

/* Animación de fade-in al cargar */
body {
    opacity: 0;
    transition: opacity 0.6s ease-in;
}

/* Mostrar la página completamente cargada */
body.loaded {
    opacity: 1;
}

/* ============ Fonts ============ */

@font-face {
    font-family: 'NeurialRg';
    src: url('../assets/fonts/neurialgrotesk-regular.woff2') format('woff2'),
         url('../assets/fonts/neurialgrotesk-regular.woff') format('woff'),
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'NeurialMd';
    src: url('../assets/fonts/neurialgrotesk-medium.woff2') format('woff2'),
         url('../assets/fonts/neurialgrotesk-medium.woff') format('woff'),
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SchaboCond';
    src: url('../assets/fonts/schabo-condensed.woff2') format('woff2'),
         url('../assets/fonts/schabo-condensed.woff') format('woff'),
    font-style: normal;
    font-display: swap;
}

/* ============ Variables ============ */

:root {
    --clr-yellow: #FFE600; /* Yellow */
	--clr-gray: #999999; /* Gray */
}

/* ============ Base Styles ============ */

html {
  	scroll-behavior: smooth;
	background: #000 !important;
}

body {
    font-family: "Work Sans", sans-serif;
    color: var(--clr-yellow);
	background: black;
    font-size: 1rem;
    line-height: 1.25rem;
	-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
	overflow-x: hidden;
	position: relative;
    width: 100%;
	overscroll-behavior-x: none;
	transition: background 0.4s ease-in-out, color 0.4s ease-in-out, opacity 0.4s ease-in-out;
}

body.darkmode {
	color: white;
	background: #101010;
}

svg {
	fill: currentColor;
	display: block;
	width: 100%;
	height: auto;
}

a {
    color: inherit;
    text-decoration: none;
}

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

ul, ol {
    list-style: none;
    margin: 0;
    padding: 0;
}
li {
    margin: 0;
    padding: 0;
}

button {
    all: unset;
    display: inline-block;
    cursor: pointer;
}


button:focus {
    outline: none;
}

@supports (-webkit-touch-callout: none) {
    button {
        appearance: none;
        -webkit-appearance: none;
    }
}

.icon {
    width: 1.5rem;
    height: 1.5rem;
    fill: currentColor;
}

.icon.light {
    color: var(--clr-blackmain);
}

.icon.small {
	width: 1rem;
	height: 1rem;
}

.icon.mid {
    width: 3rem;
    height: 3rem;
}

.icon.menu-btn {
	width: 2.5rem;
    height: 2.5rem;
}

.icon.big {
	width: 6rem;
    height: 6rem;
}

.img-radius {
	border-radius: 1rem;
}

.img-radius-inside {
	border-radius: .5rem;
}

.blured-bg {
	backdrop-filter: blur(4px);
}

embla {
	overflow: hidden;
}

.embla__viewport {
	overflow: hidden;
	width: 100%;
	scroll-padding-left: 4rem; /* Para navegadores modernos */
  	padding-left: 4rem; /* Alinea visualmente el contenido */
	scroll-padding-right: 4rem; /* Para navegadores modernos */
  	padding-right: 4rem; /* Alinea visualmente el contenido */
}

.embla__viewport.simple-slider {
	scroll-padding-left: 0; /* Para navegadores modernos */
  	padding-left: 0; /* Alinea visualmente el contenido */
	scroll-padding-right: 0; /* Para navegadores modernos */
  	padding-right: 0; /* Alinea visualmente el contenido */
}

.embla__container {
	display: flex;
	gap: 1.5rem;
}

.embla__viewport, .embla__container, .embla__slide {
  user-select: none !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
}

/* Permite selección en botones y enlaces */
.txt-btn, .txt-btn * {
  user-select: text !important;
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
}

.hidden {
	display: none;
}


/* Estilos del switch */
.darkmode-switch {
	position: relative;
	display: inline-block;
	width: 50px;
	height: 24px;
}

.darkmode-switch input {
	opacity: 0;
	width: 0;
	height: 0;
}

.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	transition: 0.3s;
	border-radius: 24px;
	border: black solid 1px;
}

.slider:before {
	position: absolute;
	content: "";
	height: 18px;
	width: 18px;
	left: 2px;
	bottom: 2px;
	background-color: black;
	transition: 0.3s;
	border-radius: 50%;
}

/* Checked (activo) */
.darkmode-switch input:checked + .slider {
	border: white solid 1px;
}

.darkmode-switch input:checked + .slider:before {
	transform: translateX(26px);
	background-color: white;
}

/* ============ Font Styles ============ */

.text-rg {
	font-family: VolksansRg, sans-serif;
	-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.text-nrml {
	font-family: VolksansNr, sans-serif;
	-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.outfit {
	font-family: 'Outfit', sans-serif;
	-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.schabo {
	font-family: 'SchaboCond', sans-serif;
	-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.text-m-wdth {
	width: 42rem;
}

.text-upper {
	text-transform: uppercase;
}

.text-upper.wdth-s {
	width: 34rem;
}

.text-black {
	font-weight: 900;
}

.text-xbold {
	font-weight: 800;
}

.text-bold {
	font-weight: 700;
}

.text-semibold {
	font-weight: 600;
}

.text-medium {
	font-weight: 500;
}

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

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

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

.text-spacing-s {
	letter-spacing: 0.2rem;
}

.text-dark {
	color: white;
}

.text-light {
	color: var(--clr-blackmain);
}

.text-orange {
	color: var(--clr-orange);
}

.text-green {
	color: var(--clr-orange);
}

.text-lightgray {
	color: var(--clr-lightgray);
}

.text-gray {
	color: var(--clr-gray);
}

.text-darkgreen {
	color: var(--clr-darkblue);
}

.text-yellow {
	color: var(--clr-yellow);
}

.text-uppers {
	text-transform: uppercase;
}

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

.line-hgth-s {
	line-height: 1rem;
}

.text-xxxs {
	font-size: .75rem;
	line-height: 1.5rem;
}

.text-xxs {
	font-size: .875rem;
	line-height: 1rem;
}

.text-xs {
	font-size: 1rem;
	line-height: 1rem;
}

.text-s {
	font-size: 1.5rem;
    line-height: 1.75rem;
}

.text-s-normal {
	font-size: 1.25rem;
	line-height: 1.5rem;
}

.text-xm {
	font-size: 2rem;
	line-height: 2.5rem;
}

.text-xm.margin-s {
	margin: 1rem 0;
}

.text-m {
	font-size: 2.75rem;
    line-height: 3.25rem;
}

.text-l {
	    font-size: 3.25rem;
    line-height: 3.75rem;
}

.text-xl {
	font-size: 4rem;
    line-height: 4.5rem;
}

.text-xl.low {
	line-height: 2.5rem;
}

.text-xl-alt {
	font-size: 3rem;
	line-height: 4rem;
}

.text-xxl {
	font-size: 3.5rem;
	line-height: 4rem;
}

.text-xxxl {
	font-size: 4.5rem;
	line-height: 3.5rem;
}

.text-xxxxl {
	font-size: 6.5rem;
	line-height: 6.5rem;
	padding-top: 1rem;
}

.text-xxxxxl {
	font-size: 10rem;
	line-height: 9rem;
}

.text-xxxxxl.mrgn-bttm-s {
	margin-bottom: -1.5rem;
}

.text-upprcase {
	text-transform: uppercase;
}

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

/* ============ Widths Styles ============ */

.wdt-90 {
	width: 90%;
}

.wdt-80 {
	width: 80%;
}

.wdt-50 {
	width: 50%;
}

/* ============ @Medias ============ */

@media (max-width: 1670px) {
	.text-xxxxxl {
		font-size: 7rem;
		line-height: 7rem;
		padding-top: .75rem;
	}
}

@media (max-width: 1440px) {
	.text-xxxxl {
		font-size: 5.5rem;
		line-height: 5.5rem;
		padding-top: .75rem;
	}
}

@media (max-width: 1280px) {
	.text-xxxxl {
		font-size: 5rem;
        line-height: 5.25rem;
        padding-top: .75rem;
	}
	.text-xxxxxl {
		font-size: 6rem;
		line-height: 5.5rem;
	}
}

@media (max-width: 1080px) {
	.text-l {
		font-size: 2rem;
		line-height: 2.25rem;
	}
	.text-xxxxl {
        font-size: 4rem;
        line-height: 4.25rem;
        padding-top: .75rem;
    }
	.text-xxxxxl {
        font-size: 6rem;
        line-height: 5rem;
    }
}

@media (max-width: 960px) {
	.text-l {
		font-size: 1.75rem;
		line-height: 2rem;
	}
}

@media (max-width: 860px) {
	.hide-item-mob-860 {
		display: none;
	}
}


@media (max-width: 768px) {
	.hidden {
		display: flex;
	}
	.hide-item-mob-768 {
		display: none;
	}
	.hide-item-mob-768.menu-active {
        display: block;
        position: absolute;
        bottom: 1rem;
        left: 1rem;
    }
	.hide-item-mob-768.menu-active-right {
        display: block;
        position: absolute;
        bottom: 1rem;
        right: 1rem;
    }
	.text-s-normal {
		font-size: 1rem;
		line-height: 1.25rem;
	}
	.text-s {
		font-size: 1rem;
        line-height: 1.25rem;
	}
	.text-m {
		font-size: 1.5rem;
        line-height: 2rem;
	}
	.text-xm.mob {
		font-size: 1.25rem;
		line-height: 1.5rem;
	}
	
	.text-l.mob {
		font-size: 1.5rem;
		line-height: 1.75rem;
	}
	
	.text-l.hide-menu-mob {
        display: none !important;
    }

	.text-xl {
		font-size: 2.5rem;
		line-height: 3rem;
	}
	
	.text-xl.mob {
		font-size: 2rem;
		line-height: 2.5rem;
	}

	.text-xl.low {
		line-height: 2.5rem;
	}
		
	.text-xl-alt {
		font-size: 2.5rem;
		line-height: 3rem;
	}
	
	.text-xl-alt.mob {
		font-size: 2rem;
		line-height: 2.5rem;
	}
	
	.text-xxl {
		font-size: 2.5rem;
		line-height: 3rem;
	}
	.text-xxxl.mob {
		font-size: 3.5rem;
	}
	.text-xxxl {
		font-size: 3rem;
		line-height: 2.5rem;
	}
	.text-xxxxl {
		font-size: 3rem;
		line-height: 3rem;
	}
	.text-xxxxxl {
        font-size: 4rem;
        line-height: 3.5rem;
    }
	.wdt-90.mob {
		width: 100%;
	}
	.wdt-80.mob {
		width: 100%;
	}
	.text-spacing-s {
		letter-spacing: 0.1rem;
		font-size: .85rem;
		line-height: 1rem;
	}
	.text-xxxl.center-mob {
        text-align: center;
    }
	.text-upper.wdth-s {
    	width: 96%;
	}
}

@media (max-width: 480px) {
	.text-xxxxxl {
        font-size: 2.5rem;
        line-height: 2.5rem;
    }
	.text-spacing-s {
        letter-spacing: 0.05rem;
        font-size: .85rem;
        line-height: 1rem;
    }
}