/* Responsividade sem criar scrolls desnecessários */
/* IMPORTANTE: NÃO ALTERAR BANNER E FOOTER - SOMENTE COMPONENTES INTERNOS */

/* Base responsive rules */
* {
    box-sizing: border-box;
}

img:not(.promo-banner__image-full):not(.footer-banner__image) {
    max-width: 100%;
    height: auto;
}

/* Container padrão para componentes (exceto banner e footer) */
.container:not(.promo-banner__container):not(.footer-banner__container) {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ===== BREAKPOINTS RESPONSIVOS ===== */

/* Extra Large Desktop (1441px+) */
@media (min-width: 1441px) {
    .container:not(.promo-banner__container):not(.footer-banner__container) {
        max-width: 1400px;
        padding: 0 40px;
    }
}

/* Large Desktop (1201px - 1440px) */
@media (min-width: 1201px) and (max-width: 1440px) {
    .container:not(.promo-banner__container):not(.footer-banner__container) {
        max-width: 1200px;
        padding: 0 30px;
    }
}

/* Desktop (993px - 1200px) */
@media (min-width: 993px) and (max-width: 1200px) {
    .container:not(.promo-banner__container):not(.footer-banner__container) {
        max-width: 100%;
        padding: 0 25px;
    }
}

/* Tablet Large (769px - 992px) */
@media (min-width: 769px) and (max-width: 992px) {
    .container:not(.promo-banner__container):not(.footer-banner__container) {
        padding: 0 20px;
    }

    /* Ajustes para componentes específicos */
    .how-it-works__steps {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }

    .why-participate__benefits {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }
}

/* Tablet (481px - 768px) */
@media (min-width: 481px) and (max-width: 768px) {
    .container:not(.promo-banner__container):not(.footer-banner__container) {
        padding: 0 18px;
    }

    /* Grid adjustments para tablet */
    .how-it-works__steps {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
    }

    .why-participate__benefits {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
    }

    /* Typography adjustments */
    h1, .title-section__title {
        font-size: clamp(1.8rem, 4vw, 2.2rem) !important;
    }

    h2, .section-title {
        font-size: clamp(1.5rem, 3.5vw, 1.8rem) !important;
    }
}

/* Mobile Large (376px - 480px) */
@media (min-width: 376px) and (max-width: 480px) {
    .container:not(.promo-banner__container):not(.footer-banner__container) {
        padding: 0 15px;
    }

    /* Single column layout */
    .how-it-works__steps,
    .why-participate__benefits {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    /* Form adjustments */
    .form-section {
        padding: 30px 15px !important;
    }

    /* Button adjustments */
    .btn, button {
        padding: 12px 20px !important;
        font-size: 0.95rem !important;
    }
}

/* Mobile Standard (321px - 375px) */
@media (min-width: 321px) and (max-width: 375px) {
    .container:not(.promo-banner__container):not(.footer-banner__container) {
        padding: 0 12px;
    }

    /* Typography for smaller screens */
    h1, .title-section__title {
        font-size: clamp(1.6rem, 5vw, 2rem) !important;
        line-height: 1.2 !important;
    }

    h2, .section-title {
        font-size: clamp(1.3rem, 4vw, 1.6rem) !important;
    }

    p, .text-content {
        font-size: clamp(0.9rem, 3vw, 1rem) !important;
        line-height: 1.5 !important;
    }
}

/* Mobile Small (320px e menor) */
@media (max-width: 320px) {
    .container:not(.promo-banner__container):not(.footer-banner__container) {
        padding: 0 10px;
    }

    /* Compact layout for very small screens */
    .form-section {
        padding: 20px 10px !important;
    }

    .btn, button {
        padding: 10px 15px !important;
        font-size: 0.9rem !important;
    }

    /* Very compact typography */
    h1, .title-section__title {
        font-size: 1.5rem !important;
        line-height: 1.1 !important;
    }

    h2, .section-title {
        font-size: 1.2rem !important;
    }
}

/* ===== COMPONENT-SPECIFIC RESPONSIVE RULES ===== */

/* Title Component */
.title-section__main-title {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    font-size: clamp(24px, 5vw, 48px) !important;
    padding: 0 20px !important;
    margin: 0 auto 30px auto !important;
    box-sizing: border-box !important;
}

.title-section__container {
    max-width: 1200px !important;
    width: 100% !important;
    padding: 0 20px !important;
    margin: 0 auto !important;
}

@media (max-width: 768px) {
    .title-section {
        padding: 40px 0 !important;
        text-align: center !important;
    }

    .title-section__main-title {
        font-size: clamp(20px, 6vw, 32px) !important;
        padding: 0 15px !important;
    }
}

/* Form Component */
@media (max-width: 992px) {
    .form-section {
        padding: 50px 20px !important;
    }
}

@media (max-width: 768px) {
    .form-section {
        padding: 40px 15px !important;
    }

    .form-section iframe {
        height: 400px !important;
    }
}

/* Step Cards Component */
@media (max-width: 992px) {
    .how-it-works {
        padding: 50px 0 !important;
    }

    .step-card {
        padding: 20px !important;
    }
}

@media (max-width: 768px) {
    .how-it-works {
        padding: 40px 0 !important;
    }

    .step-card {
        padding: 18px !important;
        text-align: center !important;
    }
}

/* Benefits Component */
@media (max-width: 992px) {
    .why-participate {
        padding: 50px 0 !important;
    }

    .benefit-card {
        padding: 20px !important;
    }
}

@media (max-width: 768px) {
    .why-participate {
        padding: 40px 0 !important;
    }

    .benefit-card {
        padding: 18px !important;
        text-align: center !important;
    }
}

/* Regulation Component */
@media (max-width: 768px) {
    .regulation-section {
        padding: 40px 0 !important;
        text-align: center !important;
    }

    .regulation-section__button {
        width: 100% !important;
        max-width: 300px !important;
    }
}

/* FAQ Component */
@media (max-width: 768px) {
    .faq-section {
        padding: 40px 0 !important;
    }

    .faq-item {
        margin-bottom: 15px !important;
    }

    .faq-item__question {
        font-size: 1.1rem !important;
        padding: 15px !important;
    }

    .faq-item__answer {
        padding: 15px !important;
        font-size: 0.95rem !important;
    }
}

/* ===== UTILITY CLASSES FOR RESPONSIVE BEHAVIOR ===== */
.hide-mobile {
    display: block;
}

.show-mobile {
    display: none;
}

.hide-tablet {
    display: block;
}

.show-tablet {
    display: none;
}

.hide-desktop {
    display: block;
}

.show-desktop {
    display: none;
}

@media (max-width: 768px) {
    .hide-mobile {
        display: none !important;
    }

    .show-mobile {
        display: block !important;
    }
}

@media (min-width: 769px) and (max-width: 992px) {
    .hide-tablet {
        display: none !important;
    }

    .show-tablet {
        display: block !important;
    }
}

@media (min-width: 993px) {
    .hide-desktop {
        display: none !important;
    }

    .show-desktop {
        display: block !important;
    }
}

/* ===== SCROLL E OVERFLOW FIXES ===== */
@media (max-width: 768px) {
    body {
        overflow-x: hidden !important;
    }

    .main {
        overflow-x: hidden !important;
        width: 100% !important;
    }

    /* Garantir que nenhum elemento cause scroll horizontal */
    * {
        max-width: 100% !important;
        word-wrap: break-word !important;
    }

    /* Exceções para banner e footer (não alterar) */
    .promo-banner *,
    .footer-banner * {
        max-width: none !important;
    }
}