/* RESET STYLING */
*, *::before, *::after {margin: 0; padding: 0; box-sizing: border-box;}
*::selection {color: #fff; background-color: var(--c-primary);}
html {scroll-behavior: smooth;}
body {font-family: var(--ff-primary); font-weight: 400; line-height: 1.4; letter-spacing: 0.1px; -webkit-font-smoothing: antialiased;}
h1,h2,h3,h4,h5,h6 {margin: 0; font-weight: 400; line-height: 1;}
h1, h2 {line-height: var(--lh-2xl);}
ul, ol {margin: 0; padding: 0;}
li {list-style: none; font-size: var(--fs-base);}
p {margin: 0; font-size: var(--fs-base); color: var(--c-text);}
a {color: #000; text-decoration: none; font-size: var(--fs-base); display: block; width: fit-content; transition: var(--trans-4);}
p a {display: inline; color: var(--c-primary); text-decoration: underline;}
button {font-family: var(--ff-secondary-400); font-size: var(--fs-xs); line-height: 1.4; background-color: transparent; color: #000; border: none; cursor: pointer; transition: var(--trans-4);}
img, picture {max-width: 100%; height: auto; vertical-align: middle; font-style: italic; font-size: var(--fs-xs);}
svg {vertical-align: middle;}
input, textarea, select {width: 100%; font-family: var(--ff-primary); font-size: var(--fs-xs); color: #000; padding: 0.75rem;}
select {color: var(--c-text); appearance: none;}
input::placeholder, textarea::placeholder {color: var(--c-text);}
input[type="number"]::-webkit-inner-spin-button {appearance: none;}

/* MODIFIER CLASES */
.container {max-width: var(--container-size); margin-inline: auto; padding-inline: var(--container-padding);}
.btn__primary {font-size: var(--fs-xs); text-wrap: nowrap; background-color: var(--c-primary); color: #fff; padding: 8px 13px 8px 14px; border: 1px solid transparent; border-radius: 6.25rem;}
.btn__primary:hover {background-color: transparent; color: var(--c-primary); border-color: var(--c-primary);}
.btn__primary.light {background-color: #fff; color: #000;}
.btn__primary.light:hover {background-color: transparent; color: #fff; border-color: #fff;}
.btn__primary.dark {background-color: var(--c-primary-drk-900);}
.btn__primary.dark:hover {background-color: transparent; color: var(--c-primary-drk-900);}
.border__btm {position: relative; width: fit-content;}
.border__btm::before {position: absolute; bottom: -4px; left: 0; width: 0; height: 2px; background-color: var(--c-primary); content: '';}
.border__btm:hover::before {width: 80%; transition: width var(--trans-6);}

/* Scrollbar */
:where(.scroll, .scroll__p > p) {overflow-y: auto; padding-right: 15px;}
:where(.scroll, .scroll__p > p)::-webkit-scrollbar {width: 6px;}
:where(.scroll, .scroll__p > p)::-webkit-scrollbar-track {width: 8px; border-radius: 8px; background-color: #fff; visibility: hidden;}
:where(.scroll, .scroll__p > p)::-webkit-scrollbar-thumb {border-radius: 8px; background-color: var(--c-text); visibility: hidden;}
:where(.scroll, .scroll__p > p):hover::-webkit-scrollbar-track {visibility: visible;}
:where(.scroll, .scroll__p > p):hover::-webkit-scrollbar-thumb {visibility: visible;}
@supports not selector(::-webkit-scrollbar) {
    :where(.scroll, .scroll__p > p) {overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--c-text) #fff;}
}

/* FONT FAMILIES */
@font-face {
    font-family: 'General Sans';
    font-weight: 400 800;
    font-display: swap; 
    src: url('../fonts/GeneralSans-Variable.ttf');
}

@font-face {
    font-family: 'Buenos Aires 400';
    src: url('../fonts/BuenosAires/BuenosAires-Regular.woff2') format('woff2'),
         url('../fonts/BuenosAires/BuenosAires-Regular.woff') format('woff');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Buenos Aires 600';
    src: url('../fonts/BuenosAires/BuenosAires-SemiBold.woff2') format('woff2'),
    url('../fonts/BuenosAires/BuenosAires-SemiBold.woff') format('woff');
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Buenos Aires 700';
    src: url('../fonts/BuenosAires/BuenosAires-Bold.woff2') format('woff2'),
         url('../fonts/BuenosAires/BuenosAires-Bold.woff') format('woff');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Recoleta 400';
    src: url('../fonts/Recoleta/Recoleta-Regular.otf');
    font-weight: 400;
    font-display: swap;
}

/* VARIABLES */
:root {
    /* Container Max-Width */
	--container-max: 1920px;
    --container-size: 1280px;
    --container-size-lg: 1120px;
    --container-size-md: 900px;
    --container-padding: 15px; /* Container Left-Right Padding */
    /* Font Families */
    --ff-primary: 'General Sans', system-ui, sans-serif; 
    --ff-secondary-400: 'Buenos Aires 400', system-ui, sans-serif; 
    --ff-secondary-600: 'Buenos Aires 600', system-ui, sans-serif; 
    --ff-secondary-700: 'Buenos Aires 700', system-ui, sans-serif; 
    --ff-tertiary: 'Recoleta 400', system-ui, sans-serif; 
    /* Font-Sizes */
    --fs-2xl: clamp(2.25rem, 1.4464rem + 3.5714vw, 4.125rem);      /* 36px - (360/1200) - 66px */
    --fs-xl: clamp(1.75rem, 1.2946rem + 2.0238vw, 2.8125rem);      /* 28px - (360/1200) - 45px */
    --fs-lg: clamp(1.5rem, 1.1786rem + 1.4286vw, 2.25rem);         /* 24px - (360/1200) - 36px */
    --fs-md: clamp(1.25rem, 1.1161rem + 0.5952vw, 1.5625rem);      /* 20px - (360/1200) - 25px */
    --fs-sm: clamp(1rem, 0.9464rem + 0.2381vw, 1.125rem);     	   /* 16px -  (360/991) - 18px */
    --fs-base: clamp(0.875rem, 0.8037rem + 0.317vw, 1rem);         /* 14px -  (360/991) - 16px */
    --fs-xs: clamp(0.8125rem, 0.7768rem + 0.1585vw, 0.875rem);     /* 16px -  (360/991) - 18px */
    --fs-2xs: 0.75rem;
    /* Line Heights */
    --lh-2xl: 66px;
    --lh-xl: 56px;
    --lh-lg: 35px;
    --lh-md: 28px;
    --lh-sm: 24px;
    --lh-none: 1;
    /* Colors */
    --c-primary: #2E6FE8;
    --c-primary-drk: #1D44C0;
    --c-primary-drk-900: #2439F2;
    --c-dark: #292929;
    --c-text: #8B8B8B;
    /* Transitions */
    --trans-4: 0.4s ease-in;
    --trans-6: 0.6s ease-in;
    --trans-10: 1s ease-in;
    /* Filters */
    --fltr-primary: brightness(0) saturate(100%) invert(35%) sepia(50%) saturate(2007%) hue-rotate(199deg) brightness(98%) contrast(92%);
    /* Shadows */
    --shdw-lght: 0 2px 10px 0 rgba(0, 0, 0, 10%);
    --shdw-nrml: 0 4px 5px 0 rgba(0, 0, 0, 15%);
	/* Border Radius */
	--br-section: 1.25rem;
	/* Margin */
	--mx-section: 1.875rem;
}

/* Responsive Variable */
@media only screen and (max-width: 1200px) {
    :root {
        --container-size: var(--container-size-lg);
        --lh-2xl: 62px;
        --lh-xl: 54px;
    }
}

@media only screen and (max-width: 991px) {
    :root {
        --container-size: var(--container-size-md);
        --lh-2xl: 54px;
        --lh-xl: 50px;
        --lh-lg: 32px;
		--mx-section: 1.5rem;
    }
}

@media only screen and (max-width: 767px) {
    :root {
        --lh-2xl: 48px;
        --lh-xl: 46px;
        --lh-lg: 30px;
        --lh-md: 26px;
    }
}

@media only screen and (max-width: 575px) {
    :root {
        --lh-2xl: 44px;
        --lh-xl: 40px;
        --lh-lg: 28px;
        --lh-md: 24px;
        --lh-sm: 22px;
		--br-section: 1rem;
		--mx-section: 1.25rem;
    }
    .btn__primary {padding: 6px 10px;}
}

@media only screen and (max-width: 360px) {
    :root {
		--container-padding: 0.75rem;
		--br-section: 0.75rem;
		--mx-section: 1rem;
	}
}

/* PRIVATE VARIABLES */
header {--_c-lght: #0000001A;}
.countries, .features, .payments, .main {--_c-primary-5: #4671FD12; --_c-bg: #f4f4ff; --_c-lghtst: #EBEBEB;}
body {--_c-sky-lght: #F6F4F0;}
.features {--_c-gray: #999999;}
.payments, .services {--_c-lghtr: #F8F8FB;}
.destinations, .faq {--_c-dark: #393939;}
.main, .faq, .checkout {--_c-black-700: #252525;}
.install {--_c-black-600: #363636;}
.checkout {--_c-lght-gray: #BBBBBE;}
.checkout {--_c-wht-gray: #DFDFDF;}
.checkout {--_c-sky-gray: #9A9A9A;}