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

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

#preloader .loader {
    width: 50px;
    height: 50px;
    border: 8px solid #FF551A;
    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: 'VolksansNr';
    src: url('../assets/fonts/volksans_normal.woff2') format('woff2'),
         url('../assets/fonts/volksans_normal.woff') format('woff'),
    font-style: normal;
    font-display: swap;
}

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

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

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

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

:root {
    --clr-orange: #DAEF86; /* Aduax Orange */
    --clr-blackmain: #13252D; /* Aduax Black */
	--clr-blackmainmid: #1E3743; /* Aduax Black Mid */ 
    --clr-lightestgray: #FFC2FF; /* Aduax Lightest Gray */
    --clr-lightgray: #C9CFD2; /* Aduax Light Gray */
    --clr-midgray: #A0A2A4; /* Aduax Mid Gray */
	--clr-yellow: #FFCE6C; /* Yellow */
	--clr-green: #00896F; /* Green */
	--clr-red: #D86060; /* Red */
	--clr-lightgreen: #00C59F; /* Lightgreen */
	--clr-darkblue: #23212F; /* Darkblue */
	--clr-lime: #DAEF86; /* Lime */
	--clr-pink: #FFC2FF; /* Pink */
}

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

html {
  scroll-behavior: smooth;
}

body {
    font-family: "Space Mono", monospace;
    color: var(--clr-darkblue);
	background-color: var(--clr-lightestgray);
    font-size: 1rem;
    line-height: 1.5rem;
	-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

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;
}

/* ============ 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;
}

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

.signifier-it {
	font-family: SignifierIt, serif;
	-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.spacegrotesk {
	font-family: 'Space Grotesk', 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;
}

.space-mono {
	font-family: 'Space Mono', monospace;
	-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

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

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

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

.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-midgray {
	color: var(--clr-midgray);
}

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

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

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

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

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

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

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

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

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

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

.text-m {
	font-size: 1.75rem;
	line-height: 2rem;
}

.text-l {
	font-size: 2.25rem;
	line-height: 2.5rem;
}

.text-xl {
	font-size: 3rem;
	line-height: 3.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: 5rem;
	line-height: 5rem;
	padding-top: .75rem;
}

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

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

.wdt-90 {
	width: 90%;
}

.wdt-80 {
	width: 80%;
}

.wdt-50 {
	width: 50%;
}

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

@media (max-width: 960px) {

}

@media (max-width: 768px) {
	.text-s {
		font-size: 1rem;
        line-height: 1.25rem;
	}
	.text-m {
		font-size: 1.5rem;
        line-height: 2rem;
	}
	.text-m.mob {
		font-size: 1.25rem;
        line-height: 1.5rem;
	}
	.text-xm.mob {
		font-size: 1.25rem;
		line-height: 1.5rem;
	}
	.text-l {
		font-size: 1.75rem;
		line-height: 2rem;
	}
	
	.text-l.mob {
		font-size: 1.5rem;
		line-height: 1.75rem;
	}

	.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;
	}
	.wdt-90.mob {
	width: 100%;
	}
	.wdt-80.mob {
	width: 100%;
	}
}