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



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

:root {
	--clr-blue: #0071FF; /* Longda Blue CTA*/
	--clr-marineBlue: #0A2B60; /* Longda Marine Blue */
	--clr-black: #1B222C; /* Longda Black */
	--clr-lightBlue: #D1E0F4; /* Longda Lightblue */
	--clr-lightCoolGray: #EEF2F4; /* Longda Light Cool Gray */
	--clr-lightGray: #9F9F9F; /* Longda Light Gray */
	--clr-midGray: #606060; /* Longda Mid Cool Gray */
	--clr-coolGray: #DBE1E8; /* Longda Cool Gray */
	--clr-midCoolGray: #C8CCD0; /* Longda Mid Cool Gray */
	--clr-lime: #DDF498; /* Longda Lime */
}

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

html {
  scroll-behavior: smooth;
}

body {
    font-family: 'Inter', sans-serif;
    color: var(--clr-black);
	background-color: var(--clr-lightCoolGray);
    font-size: 1.125rem;
    line-height: 1.5rem;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
  	font-weight: normal !important;
}

h1 {
	font-weight: normal !important;
}

h2 {
	font-weight: 500 !important;
	font-size: 2rem;
	line-height: 2.5rem;
}

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 {
    fill: currentColor;
}

.icon.search {
    width: 3rem;
    height: 3rem;
    position: absolute;
    left: .125rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

.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.s-radius {
	border-radius: .5rem;
}

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

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

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

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

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

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

.text-regular {
	font-weight: 400 !important;
}

.text-dark {
	color: white;
}

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

.text-key-card {
	color: white;
	transition: color 0.4s ease-in-out;
}

.text-key-card:hover {
	color: var(--clr-lightBlue);
}

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

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

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

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

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

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

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

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

.text-items-center {
	display: inline-flex;
    align-items: center;
}

.text-gap-xs {
	gap: .25rem;
}

.text-gap-s {
	gap: .5rem;
}

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

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


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

.text-xs.indicator {
	line-height: 3rem;
}

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

.text-s.indicator {
	line-height: 3rem;
}

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

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

.text-m-xnormal {
	font-size: 1.5rem;
	line-height: 1.875rem;
}

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

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

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

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

.text-l {
	font-size: 3rem;
	line-height: 3.5rem;
}

.text-l.alt {
	font-size: 2.75rem;
	line-height: 3rem;
}

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

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

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

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

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

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

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

.text-xxxxl {
	font-size: 6rem;
	line-height: 6rem;
	padding-top: .75rem;
}

.text-5xl {
	font-size: 7.5rem;
	line-height: 6rem;
}

.text-5xl.z-i-3 {
	z-index: 3;
}

.text-under {
	text-decoration: underline;
}

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

.wdt-90 {
	width: 90%;
}

.wdt-80 {
	width: 80%;
}

.wdt-50 {
	width: 50%;
}

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




@media (max-width: 1240px) {
	.text-xm {
		font-size: 1.125rem;
		line-height: 1.5rem;
	}
	.text-m {
		font-size: 2rem;
		line-height: 2.5rem;
	}
	.text-m-xnormal {
		font-size: 1rem;
		line-height: 1.5rem;
	}
	.text-l {
		font-size: 2rem;
		line-height: 2.5rem;
	}
	.text-m-alt {
		font-size: 1.5rem;
		line-height: 2rem;
	}
	.text-xl {
		font-size: 3rem;
		line-height: 3.25rem;
	}
	.text-xxl {
		font-size: 3rem;
		line-height: 3.5rem;
	}
	.text-xxxl {
		font-size: 3.5rem;
		line-height: 3.75rem;
	}
	.text-xxxxl {
		font-size: 4rem;
		line-height: 4rem;
	}
	.text-xxxl.mob-hero {
		font-size: 4rem;
		line-height: 4.5rem;
	}
}

@media (max-width: 1080px) {
	.text-xxl {
        font-size: 2.5rem;
        line-height: 2.75rem;
    }
	.text-xxxxl {
        font-size: 3.5rem;
        line-height: 3.5rem;
    }
}

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

@media (max-width: 768px) {
	body {
		font-family: 'Inter', sans-serif;
		color: var(--clr-black);
		background-color: var(--clr-lightCoolGray);
		font-size: 1rem;
		line-height: 1.5rem;
		font-weight: 400;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		text-rendering: optimizeLegibility;
	}
	h2 {
		font-weight: 500 !important;
		font-size: 1.5rem;
		line-height: 2rem;
	}
	.text-xs {
		font-size: .75rem;
		line-height: 1.25rem;
	}
	.text-s {
		font-size: 1rem;
        line-height: 1.25rem;
	}
	.text-m {
		font-size: 1.5rem;
        line-height: 2rem;
	}
	.text-m-alt {
		font-size: 1.5rem;
		line-height: 2rem;
	}
	.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: 2rem;
		line-height: 2.5rem;
	}
	
	.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: 2rem;
        line-height: 2.5rem;
    }
	.text-xxxl.mob {
		font-size: 3.5rem;
	}
	.text-xxxl {
		font-size: 4rem;
		line-height: 3.5rem;
	}
	.text-xxxl.mob-hero {
        font-size: 2.5rem;
        line-height: 3rem;
    }
	.text-xxxl.mob-hero-alt {
        font-size: 2.25rem;
        line-height: 2.5rem;
    }
	.text-xl-alt-b {
		font-size: 2.5rem;
		line-height: 3rem;
	}
	.text-m-xnormal {
		font-size: 1rem;
		line-height: 1.25rem;
	}
	.wdt-90.mob {
		width: 100%;
	}
	.wdt-80.mob {
		width: 100%;
	}
	.text-gap-s.mob-font-m {
		gap: .5rem;
		font-size: 1.5rem;
	}
}