@font-face {
    font-family: "Gilroy";
    src:
        url("../assets/fonts/Gilroy-Bold.woff2") format("woff2"),
        url("../assets/fonts/Gilroy-Bold.woff") format("woff");
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Gilroy";
    src:
        url("../assets/fonts/Gilroy-Black.woff2") format("woff2"),
        url("../assets/fonts/Gilroy-Black.woff") format("woff");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Gilroy";
    src:
        url("../assets/fonts/Gilroy-Regular.woff2") format("woff2"),
        url("../assets/fonts/Gilroy-Regular.woff") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
    --responsive-breakpoint-mobile-min: 320px;
    --responsive-breakpoint-mobile-max: 767px;
    --responsive-breakpoint-tablet-min: 768px;
    --responsive-breakpoint-tablet-max: 1023px;
    --responsive-breakpoint-desktop-min: 1024px;
    --responsive-breakpoint-desktop-max: 1920px;

    /* Primitive values */
    --bg-svg-color: #ffffff;

    /* Colors */
    --dark-gray: #252525;
    --darker-gray: #1b1b1b;
    --light-gray: #444444;
    --base-white: #ffffff;
    --base-black: #000000;

    --main-pink-50: #fcedf1;
    --main-pink-100: #f7c8d4;
    --main-pink-200: #f3adc0;
    --main-pink-300: #ee87a3;
    --main-pink-400: #ea7091;
    --main-pink-500: #e54c75;
    --main-pink-600: #d0456a;
    --main-pink-700: #a33653;
    --main-pink-800: #7e2a40;
    --main-pink-900: #602031;

    --main-yellow-50: #fef8f1;
    --main-yellow-100: #fde9d4;
    --main-yellow-200: #fbdfbf;
    --main-yellow-300: #fad0a1;
    --main-yellow-400: #f9c78f;
    --main-yellow-500: #f7b973;
    --main-yellow-600: #e1a869;
    --main-yellow-700: #af8352;
    --main-yellow-800: #88663f;
    --main-yellow-900: #684e30;

    --main-mistyRose-50: #fefcfa;
    --main-mistyRose-100: #fcf6f0;
    --main-mistyRose-200: #faf2e9;
    --main-mistyRose-300: #f8ece0;
    --main-mistyRose-400: #f6e8d9;
    --main-mistyRose-500: #f4e2d0;
    --main-mistyRose-600: #decebd;
    --main-mistyRose-700: #ada094;
    --main-mistyRose-800: #867c72;
    --main-mistyRose-900: #665f57;

    /* Fonts */
    --font-family-primary: "Gilroy";

    /* Font sizes */
    /* Desktop: */
    --xsm-desktop: 8px;
    --sm-desktop: 12px;
    --base-desktop: 16px;
    --h6-desktop: 20px;
    --h5-desktop: 28px;
    --h4-desktop: 40px;
    --h3-desktop: 52px;
    --h2-desktop: 68px;
    --h1-desktop: 88px;
    /* Movil: */
    --xsm-mobile: 8px;
    --sm-mobile: 12px;
    --base-mobile: 16px;
    --h6-mobile: 18px;
    --h5-mobile: 20px;
    --h4-mobile: 24px;
    --h3-mobile: 28px;
    --h2-mobile: 32px;
    --h1-mobile: 36px;
    /* line-heights */
    /* Desktop: */
    --lh-xsm-desktop: 12px;
    --lh-sm-desktop: 18px;
    --lh-base-desktop: 24px;
    --lh-h6-desktop: 30px;
    --lh-h5-desktop: 40px;
    --lh-h4-desktop: 56px;
    --lh-h3-desktop: 64px;
    --lh-h2-desktop: 80px;
    --lh-h1-desktop: 104px;
    /* Movil: */
    --lh-xsm-mobile: 12px;
    --lh-sm-mobile: 18px;
    --lh-base-mobile: 24px;
    --lh-h6-mobile: 28px;
    --lh-h5-mobile: 28px;
    --lh-h4-mobile: 32px;
    --lh-h3-mobile: 40px;
    --lh-h2-mobile: 40px;
    --lh-h1-mobile: 40px;

    /* spacing, padding, margin */
    --space-none: 0px;
    --space-1: 8px;
    --space-2: 16px;
    --space-3: 24px;
    --space-4: 32px;
    --space-5: 48px;
    --space-6: 64px;
    --space-7: 96px;
    --space-8: 128px;
    --space-9: 160px;

    /* Tokens */
    /* Light theme (default) */
    --main-bg-color: var(--base-white);
    --main-text-color: var(--light-gray);
    --main-boxshadow: 0px 4px 8px rgba(68, 68, 68, 0.1);
    --secundary-text-color: var(--base-white);
    --card-bg-color: var(--main-mistyRose-500);
    --naliia-n-bg-color: var(--main-pink-500);
    --main-icon-color: var(--light-gray);
    --icon-whitecolor: var(--base-white);
    --navbar-border-color: rgba(68, 68, 68, 0.2);
    --navbar-n-naliia-start: var(--main-pink-500);
    --navbar-n-naliia-end: var(--main-yellow-500);
    --main-border: 1px solid rgba(68, 68, 68, 0.2);
    --primarybutton-bgcolor: var(--main-pink-500);
    --primarybutton-txtcolor: var(--base-white);
    --convexCard-bgcolor: linear-gradient(145deg, #fff2df, #dccbbb);
    --convex-shadowbox:
        5px 5px 12px rgba(179, 179, 179, 0.5),
        -5px -5px 12px rgba(255, 255, 255, 0.6);

    --offercard-bgcolor: var(--base-white);

    --pricingcard-bgcolor: var(--dark-gray);
    --pricingcard-secundarybgcolor: var(--main-mistyRose-500);
    --pricingcard-section-bgcolor: var(--dark-gray);
    --pricingcard-sec-car-bgcolor: var(--light-gray);
    --pricingcard-plantype-bgcolor: var(--main-pink-500);
    --pricingcard-plantype-txtcolor: var(--base-white);
    --pricingcard-value-txtcolor: var(--base-white);
    --pricingcard-features-subtitlecolor: var(--main-pink-500);
    --pricingcard-features-txtcolor: var(--base-white);
    --pricingcard-primarytextcolor: var(--light-gray);

    --detailstable-header-primarybgcolor: var(--dark-gray);
    --detailstable-header-txtcolor: var(--base-white);
    --detailstable-primarytxtcolor: var(--light-gray);
    --detailstable-primaryborder: 1px solid rgba(68, 68, 68, 0.2);

    --contactform-convexbgcolor: linear-gradient(145deg, #ffffff, #e6e6e6);
    --input-txtcolor: var(--light-gray);

    --documentation-input-bgcolor: transparent;
    --documentation-input-border: 1px solid rgba(68, 68, 68, 0.5);

    /* spacing, padding, margin */
    --space-none-0: var(--space-none);
    --space-sm-8px: var(--space-1);
    --space-md-16px: var(--space-2);
    --space-lg-24px: var(--space-3);
    --space-xl-32px: var(--space-4);
    --space-2xl-48px: var(--space-5);
    --space-3xl-64px: var(--space-6);
    --space-4xl-96px: var(--space-7);
    --space-5xl-128px: var(--space-8);
    --space-6xl-160px: var(--space-9);

    --padding-none-0: var(--space-none);
    --padding-sm-8px: var(--space-1);
    --padding-md-16px: var(--space-2);
    --padding-lg-24px: var(--space-3);
    --padding-xl-32px: var(--space-4);
    --padding-2xl-48px: var(--space-5);
    --padding-3xl-64px: var(--space-6);
    --padding-4xl-96px: var(--space-7);
    --padding-5xl-128px: var(--space-8);
    --padding-6xl-160px: var(--space-9);

    --margin-none-0: var(--space-none);
    --margin-sm-8px: var(--space-1);
    --margin-md-16px: var(--space-2);
    --margin-lg-24px: var(--space-3);
    --margin-xl-32px: var(--space-4);
    --margin-2xl-48px: var(--space-5);
    --margin-3xl-64px: var(--space-6);
    --margin-4xl-96px: var(--space-7);
    --margin-5xl-128px: var(--space-8);
    --margin-6xl-160px: var(--space-9);

    /* Font-sizes */
    /* Desktop: */
    --font-desktop-xsm: var(--xsm-desktop);
    --font-desktop-sm: var(--sm-desktop);
    --font-desktop-base: var(--base-desktop);
    --font-desktop-h6: var(--h6-desktop);
    --font-desktop-h5: var(--h5-desktop);
    --font-desktop-h4: var(--h4-desktop);
    --font-desktop-h3: var(--h3-desktop);
    --font-desktop-h2: var(--h2-desktop);
    --font-desktop-h1: var(--h1-desktop);
    /* Movil: */
    --font-mobile-xsm: var(--xsm-mobile);
    --font-mobile-sm: var(--sm-mobile);
    --font-mobile-base: var(--base-mobile);
    --font-mobile-h6: var(--h6-mobile);
    --font-mobile-h5: var(--h5-mobile);
    --font-mobile-h4: var(--h4-mobile);
    --font-mobile-h3: var(--h3-mobile);
    --font-mobile-h2: var(--h2-mobile);
    --font-mobile-h1: var(--h1-mobile);

    /* Line-heights */
    /* Desktop: */
    --line-height-desktop-xsm: var(--lh-xsm-desktop);
    --line-height-desktop-sm: var(--lh-sm-desktop);
    --line-height-desktop-base: var(--lh-base-desktop);
    --line-height-desktop-h6: var(--lh-h6-desktop);
    --line-height-desktop-h5: var(--lh-h5-desktop);
    --line-height-desktop-h4: var(--lh-h4-desktop);
    --line-height-desktop-h3: var(--lh-h3-desktop);
    --line-height-desktop-h2: var(--lh-h2-desktop);
    --line-height-desktop-h1: var(--lh-h1-desktop);
    /* Movil: */
    --line-height-mobile-xsm: var(--lh-xsm-mobile);
    --line-height-mobile-sm: var(--lh-sm-mobile);
    --line-height-mobile-base: var(--lh-base-mobile);
    --line-height-mobile-h6: var(--lh-h6-mobile);
    --line-height-mobile-h5: var(--lh-h5-mobile);
    --line-height-mobile-h4: var(--lh-h4-mobile);
    --line-height-mobile-h3: var(--lh-h3-mobile);
    --line-height-mobile-h2: var(--lh-h2-mobile);
    --line-height-mobile-h1: var(--lh-h1-mobile);
}

[data-theme="dark"] {
    /* Dark theme */
    --main-bg-color: var(--dark-gray);
    --main-text-color: var(--base-white);
    --main-boxshadow: 0px 4px 8px rgba(68, 68, 68, 0.1);
    --secundary-text-color: var(--base-white);
    --card-bg-color: var(--main-mistyRose-500);
    --naliia-n-bg-color: var(--main-pink-500);
    --main-icon-color: var(--base-white);
    --icon-whitecolor: var(--base-white);
    --navbar-border-color: rgba(255, 255, 255, 0.2);
    --navbar-n-naliia-start: var(--base-white);
    --navbar-n-naliia-end: var(--base-white);
    --main-border: 1px solid rgba(255, 255, 255, 0.2);
    --primarybutton-bgcolor: var(--main-pink-500);
    --primarybutton-txtcolor: var(--base-white);
    --convexCard-bgcolor: linear-gradient(145deg, #494949, #3d3d3d);
    --convex-shadowbox:
        6px 6px 16px rgba(32, 32, 32, 0.8), -6px -6px 16px rgba(42, 42, 42, 0.7);

    --offercard-bgcolor: var(--dark-gray);

    --pricingcard-bgcolor: var(--darker-gray);
    --pricingcard-secundarybgcolor: var(--light-gray);
    --pricingcard-section-bgcolor: var(--main-pink-500);
    --pricingcard-sec-car-bgcolor: var(--light-gray);
    --pricingcard-plantype-bgcolor: var(--main-pink-500);
    --pricingcard-plantype-txtcolor: var(--base-white);
    --pricingcard-value-txtcolor: var(--base-white);
    --pricingcard-features-subtitlecolor: var(--main-pink-500);
    --pricingcard-primarytextcolor: var(--base-white);

    --detailstable-header-primarybgcolor: var(--light-gray);
    --detailstable-header-txtcolor: var(--base-white);
    --detailstable-primarytxtcolor: var(--base-white);
    --detailstable-primaryborder: 1px solid rgba(255, 255, 255, 0.2);

    --contactform-convexbgcolor: linear-gradient(145deg, #282828, #212121);
    --input-txtcolor: var(--light-gray);

    --documentation-input-bgcolor: var(--light-gray);
    --documentation-input-border: 1px solid rgba(255, 255, 255, 0.5);
}

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

p {
    font-size: var(--font-desktop-base);
    line-height: var(--line-height-desktop-base);
    padding: 0;
    margin: 0;
    color: var(--main-text-color);

    @media (max-width: 767px) {
        font-size: var(--font-mobile-base);
        line-height: var(--line-height-mobile-base);
        padding: 0;
        margin: 0;
    }
}

h1 {
    font-size: var(--font-desktop-h1);
    line-height: var(--line-height-desktop-h1);
    padding: 0;
    margin: 0;
    color: var(--main-text-color);

    @media (max-width: 767px) {
        font-size: var(--font-mobile-h1);
        line-height: var(--line-height-mobile-h1);
        padding: 0;
        margin: 0;
    }
}

h2 {
    font-size: var(--font-desktop-h2);
    line-height: var(--line-height-desktop-h2);
    padding: 0;
    margin: 0;
    color: var(--main-text-color);

    @media (max-width: 767px) {
        font-size: var(--font-mobile-h2);
        line-height: var(--line-height-mobile-h2);
        padding: 0;
        margin: 0;
    }
}

h3 {
    font-size: var(--font-desktop-h3);
    line-height: var(--line-height-desktop-h3);
    padding: 0;
    margin: 0;
    color: var(--main-text-color);

    @media (max-width: 767px) {
        font-size: var(--font-mobile-h3);
        line-height: var(--line-height-mobile-h3);
        padding: 0;
        margin: 0;
    }
}

h4 {
    font-size: var(--font-desktop-h4);
    line-height: var(--line-height-desktop-h4);
    padding: 0;
    margin: 0;
    color: var(--main-text-color);

    @media (max-width: 767px) {
        font-size: var(--font-mobile-h4);
        line-height: var(--line-height-mobile-h4);
        padding: 0;
        margin: 0;
    }
}

h5 {
    font-size: var(--font-desktop-h5);
    line-height: var(--line-height-desktop-h5);
    padding: 0;
    margin: 0;
    color: var(--main-text-color);

    @media (max-width: 767px) {
        font-size: var(--font-mobile-h5);
        line-height: var(--line-height-mobile-h5);
        padding: 0;
        margin: 0;
    }
}

h6 {
    font-size: var(--font-desktop-h6);
    line-height: var(--line-height-desktop-h6);
    padding: 0;
    margin: 0;
    color: var(--main-text-color);

    @media (max-width: 767px) {
        font-size: var(--font-mobile-h6);
        line-height: var(--line-height-mobile-h6);
        padding: 0;
        margin: 0;
    }
}

a,
li,
summary {
    color: var(--main-text-color);
    text-decoration: none;
    font-size: var(--font-desktop-base);
    line-height: var(--line-height-desktop-base);

    @media (max-width: 767px) {
        font-size: var(--font-mobile-base);
        line-height: var(--line-height-mobile-base);
    }
}

.whatsapp-link,
.instagram-link,
.email-link {
    transition: all 0.1s ease-in-out;
}

.whatsapp-link:hover {
    transform: scale(1.1);

    & .whatsapp-icon path {
        fill: #25d366;
    }
}

.instagram-link:hover {
    transform: scale(1.1);

    & .instagram-icon path {
        fill: #d6249f;
    }
}

.email-link:hover {
    transform: scale(1.1);

    & .email-icon path {
        fill: var(--main-pink-500);
    }
}

.button-hover-effect {
    transition: all 0.1s ease;

    &:hover {
        scale: 1.03;
    }
}

.importantButton-hover-animation:hover {
    animation: heartBeat 1.2s infinite;
}