/* ===================================================================
* GLOBAL DYNAMIC FONTS
* ===================================================================
* - This file contains styles for responsive typography.
* - `clamp()` is implemented to ensure scalability across different devices.
* - Minimum, recommended, and maximum sizes are defined based on the screen size.
* * =========================================================== */

/* ----- GENERAL STYLES FOR ALL SCREENS ----- */
/* ----- Titles ----- */
.title {
    font-size: clamp(20px, 3vw, 50px) !important;
}
.large-heading, .large-heading p {
    font-size: clamp(20px, 3vw, 50px) !important;
}
.carousel_title_content, .TitleSeccionModel, .post-text-right > h2, .post-text-left > h2,
.section-title-Button .section-title-Button__content h3 {
    font-size: clamp(18px, 3vw, 32px) !important;
}


/* ----- Sub Titles ----- */
.boxHome .paragraph, .carousel_describe_text p, .carousel_text_content p, .p_banner_cta {
    font-size: clamp(15px, 3vw, 24px) !important;
}
.contenido-box-caracteristic > div > h4 {
    font-size: clamp(18px, 3vw, 28px) !important;
}

/* ----- Text ----- */
p.ParagrphInt, .boxCaracteristics > p {
    font-size: clamp(14px, 3vw, 18px) !important;
}

/* ----- Buttons ----- */
.btn_large, .showcase_xpeng_section .configure-btn-primary, .showcase_xpeng_section .configure-btn,
.section-newletter__content-form__container-cta button, .btn_secondary_lead {
    font-size: clamp(14px, 3vw, 16px) !important;
}


/* ============================================================
 *  🖥️ DESKTOP STYLES (HIGH RESOLUTIONS)
 * ============================================================ */
@media (max-width: 1440px) {
    /* ----- Titles ----- */
    .title {
        font-size: clamp(18px, 3.5vw, 40px) !important;
    }
    .large-heading p {
        font-size: clamp(18px, 3.5vw, 40px) !important;
    }
    .carousel_title_content {
        font-size: clamp(20px, 3.5vw, 25px) !important;
    }
    .TitleSeccionModel, .post-text-right > h2, .post-text-left > h2,
    .section-title-Button .section-title-Button__content h3 {
        font-size: clamp(18px, 4vw, 28px) !important;
    }

    /* ----- Sub Titles ----- */
    .boxHome .paragraph, .carousel_describe_text p, .carousel_text_content p, .p_banner_cta {
        font-size: clamp(15px, 3.5vw, 20px) !important;
    }
    .contenido-box-caracteristic > div > h4 {
        font-size: clamp(18px, 3vw, 25px) !important;
    }

    /* ----- Text ----- */
    p.ParagrphInt, .boxCaracteristics > p {
        font-size: clamp(14px, 3vw, 17px) !important;
    }

    /* ----- Buttons ----- */
    .btn_large, .showcase_xpeng_section .configure-btn-primary, .showcase_xpeng_section .configure-btn,
    .btn_secondary_lead {
        font-size: clamp(14px, 3.5vw, 16px) !important;
    }
}

@media (max-width: 1024px) {
    /* ----- Titles ----- */
    .title {
        font-size: clamp(16px, 3vw, 38px) !important;
    }
    .large-heading p {
        font-size: clamp(16px, 3vw, 38px) !important;
    }
    .carousel_title_content {
        font-size: clamp(25px, 4vw, 30px) !important;
    }
    .TitleSeccionModel,
    .section-title-Button .section-title-Button__content h3 {
        font-size: clamp(18px, 5.56vw, 28px) !important;
    }
    .post-text-right > h2, .post-text-left > h2 {
        font-size: clamp(18px, 4vw, 28px) !important;
    }
    /* ----- Sub Titles ----- */
    .boxHome .paragraph, .carousel_describe_text p, .carousel_text_content p{
        font-size: clamp(15px, 3.5vw, 17px) !important;
    }
    .p_banner_cta {
        font-size: clamp(15px, 1.5vw, 17px) !important;
    }
}


/* ============================================================
 *  📱 MOBILE-SPECIFIC STYLES (SMALL RESOLUTIONS)
 * ============================================================ */
@media (max-width: 768px) {
    /* ----- Titles ----- */
    .title {
        font-size: clamp(20px, 7vw, 30px) !important;
    }
    .large-heading p {
        font-size: clamp(34px, 5vw, 40px) !important;
    }

    /* ----- Sub Titles ----- */
    .boxHome .paragraph {
        font-size: clamp(15px, 7vw, 17px) !important;
    }
    /* ----- Sub Titles ----- */
    .p_banner_cta {
        font-size: clamp(15px, 3.5vw, 18px) !important;
    }

    
}