/* ============ 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: #FD6500; /* Orange */
    --clr-blackmain: #13252D; /* Black */
	--clr-blackmainmid: #1E3743; /* Aduax Black Mid */ 
    --clr-lightestgray: #FFC2FF; /* Aduax Lightest Gray */
	--clr-yellow: #FFD938; /* Yellow */
	--clr-salmon: #F8B9A0; /* Salmon */
	--clr-beige: #F5F5DC; /* Beige */
	--clr-palepurple: #D0B5FA; /* Palepurple */
	--clr-skyblue: #6CCEF5; /* Skyblue */
	--clr-lime: #D3F268; /* Lime */
	--clr-pink: #FF7AC6; /* Pink */
	--clr-blue: #4A53FF; /* Electric Blue */
}

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

html {
  scroll-behavior: smooth;
}

body {
    font-family: "Inter", sans-serif;
    color: black;
	background-color: var(--clr-orange);
    font-size: 1.5rem;
    line-height: 2rem;
	-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;
}

.inter {
	font-family: 'Inter', sans-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.75rem;
    line-height: 2.25rem;
}

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

.text-s-normal {
	font-size: 1rem;
	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-upprcase {
	text-transform: uppercase;
}

/* ======= iframe monday css ======== */

iframe.monday-form {
    box-shadow: none !important;
    filter: drop-shadow(0 0 0 transparent);
}

.WqZmN,
.x8CgX {
	background-color: #6ccef5 !important;
    box-shadow: none !important;
}


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

.wdt-90 {
	width: 90%;
}

.wdt-80 {
	width: 80%;
}

.wdt-50 {
	width: 50%;
}

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

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

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

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

@media (max-width: 768px) {
	.text-s {
		font-size: 1rem;
        line-height: 1.25rem;
	}
	.text-s-alt {
		font-size: 1rem;
		line-height: 1.5rem;
	}
	.text-m {
		font-size: 1.5rem;
        line-height: 2rem;
	}
	.text-xm {
		font-size: 1.5rem;
		line-height: 1.875rem;
	}
	.text-xm.mob {
		font-size: 1.25rem;
		line-height: 1.5rem;
	}
	
	.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;
	}
	.text-xxxxl {
		font-size: 3rem;
		line-height: 3rem;
	}
	.wdt-90.mob {
		width: 100%;
	}
	.wdt-80.mob {
		width: 100%;
	}
}