/* =========================================
   MEDIA QUERY: TABLET E MOBILE (max-width: 900px)
   ========================================= */
@media (max-width: 900px) {

    /* HEADER MOBILE */
    .header-fixed {
        padding: 5px 0 !important;
        /* Reduced padding */
    }

    /* HERO SECTION */
    .hero-section {
        margin-top: 35px;
        /* Reduced from 50px */
    }

    .hero-container {
        height: auto;
        min-height: auto;
    }

    .hero-img-desktop {
        display: none;
    }

    .hero-img-mobile {
        display: block;
    }

    .hero-content {
        position: absolute;
        top: 42%;
        /* Lowered down as requested */
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        max-width: 100%;
        padding: 0 20px;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        height: auto;
        box-sizing: border-box;
    }

    .hero-content h1 {
        font-size: 32px;
        /* Matched to benefits-intro h3 */
        line-height: 1.1;
        color: var(--color-white);
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
        width: 100%;
        /* Ensure full width usage */
    }


    .hero-subheadline {
        margin: 5px auto 5px;
        border-left: none;
        padding-left: 0;
        border-bottom: none;
        color: var(--color-white);
        padding-bottom: 0px;
        display: inline-block;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
        font-size: 16px !important;
        font-weight: 400 !important;
        /* Removed bold */
        width: 90%;
        /* Constrain width to prevent overflow */
        line-height: 1.2;
    }

    /* Specific style for Hero Button on Mobile */
    .hero-content .cta-button {
        background-color: #ffffff !important;
        color: var(--color-dusty-pink) !important;
        margin-top: 25px;
        /* Increased slightly more */
    }

    .cta-button,
    .cta-button-white {
        width: 100%;
        max-width: 350px;
        /* Increased slightly to fit single line if needed */
        font-size: 16px;
        /* Slightly reduced font size to ensure single line fits */
        padding: 18px 10px;
        /* Reduced side padding */
        white-space: nowrap;
        /* Force single line */
        text-align: center;
        /* Ensure centered text */
        display: inline-flex;
        justify-content: center;
        align-items: center;
    }

    .cta-button-white {
        background-color: white !important;
        color: var(--color-deep-rose) !important;
    }

    .truth-grid {
        flex-direction: column;
        align-items: center;
    }

    .truth-block {
        width: 100%;
        margin-bottom: 20px;
        padding: 30px 20px;
    }

    .truth-section h3 {
        font-size: 28px;
        padding: 0 16px;
    }

    .particles-container {
        /* Ensure particles don't overflow on mobile */
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }

    /* SESSÃO 3 - SOLUÇÃO (BENEFITS) */
    .benefits-section {
        padding-top: 40px;
        padding-bottom: 60px;
    }

    .floating-petal {
        max-width: 250px;
        opacity: 1;
    }

    .grid-benefits {
        grid-template-columns: 1fr;
        padding: 0 20px;
    }

    .benefits-intro h3 {
        font-size: 32px;
    }

    .benefits-intro p {
        font-size: 16px;
        /* Reduced from default */
        padding: 0 10px;
    }

    /* SESSÃO 4 - SUMMARY */
    .summary-section {
        padding-top: 30px;
        /* Adjust top padding */
    }

    .summary-content-wrapper {
        flex-direction: column;
        text-align: center;
        gap: 5px;
        /* Reduced gap to bring title closer */
    }

    .summary-section h3 {
        text-align: left;
        margin-left: 0;
        margin-right: 0;
        max-width: 100%;
    }

    .summary-image-col {
        margin-bottom: 0;
        /* Removed bottom margin */
        margin-top: 10px;
        /* Added slight top margin */
        padding: 0 20px;
    }

    .summary-text-col {
        padding: 0 20px;
    }

    .summary-list li {
        text-align: left;
    }

    /* SESSÃO 5 - APROVAÇÃO SOCIAL */
    .social-proof-section {
        padding-top: 40px;
        /* Reduced specific padding to bring title up */
        padding-bottom: 60px;
    }

    .social-proof-section h3 {
        line-height: 1.1;
        /* Tighter line spacing */
        font-size: 42px;
        /* Increased back to match others */
        padding: 0 10px;
    }

    /* SESSÃO 6 - GARANTIA 1 */
    .guarantee-section h3 {
        font-size: 42px;
        /* Increased to match others */
        flex-direction: column;
        line-height: 1.1;
    }

    .guarantee-section p {
        font-size: 18px;
        padding: 0 16px;
    }

    /* SESSÃO 7 - TESTIMONIALS  and B&A CAROUSEL */
    .testimonials-section {
        padding-top: 40px;
        /* Reduced top padding */
        padding-bottom: 40px;
        /* Reduced bottom padding */
    }

    .testimonials-section h3 {
        font-size: 42px;
        /* Increased size for mobile */
        line-height: 1.1;
        /* Tighter line spacing */
        margin-bottom: 30px;
        /* Closer to cards */
        padding: 0 15px;
    }

    .ba-card {
        flex: 0 0 95% !important;
        /* increased width */
        width: 95% !important;
        margin-right: 10px;
        scroll-snap-align: center;
    }

    .ba-card img {
        height: auto;
        width: 100%;
        border-radius: 12px;
        /* Smooth corners */
    }

    .carousel-container {
        padding: 0;
        margin: 0 -10px;
        /* Counteract parent padding if needed, or just let it sit full width */
        position: relative;
        overflow: hidden;
        /* Ensure no scrollbars from arrows */
    }

    .before-after-carousel {
        padding: 0 10px;
        /* Inner padding for scroll snap */
        gap: 10px;
    }

    .carousel-btn {
        width: 32px;
        /* Decreased size */
        height: 32px;
        /* Decreased size */
        font-size: 16px;
        /* Smaller icon */
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 20;
        background: #ffffff !important;
        /* Force white background for both */
        border: 1px solid rgba(0, 0, 0, 0.1);
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--color-deep-rose) !important;
        /* Force pink arrow for both */
        padding: 0;
    }

    .ba-prev,
    .prev {
        left: 10px;
    }

    .ba-next,
    .next {
        right: 10px;
    }

    .testimonials-wrapper {
        position: relative;
        padding: 0;
        margin: 0 -10px;
        /* Counteract container padding */
        overflow: hidden;
    }

    .testimonials-grid {
        padding: 0 10px;
        /* Inner padding for scroll snap */
        gap: 10px;
        scroll-snap-type: x mandatory;
        justify-content: start;
        /* Ensure left alignment for scrolling */
    }

    .testimonial-card {
        flex: 0 0 95% !important;
        /* Mobile width */
        width: 95% !important;
        min-width: 0 !important;
        /* Override min-width 350px */
        max-width: none !important;
        margin-right: 10px;
        scroll-snap-align: center;
        box-shadow: 0 4px 15px rgba(233, 30, 99, 0.1);
        /* Lighter shadow for mobile */
    }

    .pricing-grid {
        flex-direction: column;
        align-items: center;
        gap: 40px;
        /* Reduced from 60px */
    }

    .pricing-card {
        width: 100%;
        max-width: 380px;
    }

    .pricing-card.recommended {
        margin-top: 10px;
        /* Reduced from 20px */
        transform: scale(1.02);
    }

    /* SESSÃO 8 - DETAILED GUARANTEE */
    .detailed-guarantee-section {
        padding-top: 60px;
        padding-bottom: 20px;
        /* Reduced to bring next section closer */
    }

    /* SESSÃO 9 - INGREDIENTES */
    .ingredients-section {
        padding-top: 20px;
        padding-bottom: 60px;
        /* Increased to make pink area larger */
    }

    /* SESSÃO 10 - PACOTES */
    .pricing-section {
        padding-top: 20px;
        /* Decreased whitespace above title */
        padding-bottom: 60px;
    }

    .pricing-section h3 {
        font-size: 36px;
        /* Increased from 32px */
        line-height: 1.1;
        margin-bottom: 15px;
        /* Slightly increased margin */
    }

    .offer-badge {
        font-size: 14px;
        padding: 8px 16px;
        margin-bottom: 30px;
        display: inline-block;
        line-height: 1.4;
    }

    .product-image-area {
        padding: 0 !important;
        min-height: auto !important;
        margin-top: -45px;
        /* Extremely close */
        margin-bottom: -45px;
    }

    .product-image-area img {
        width: 96% !important;
        /* Maximize width with tiny gap */
        margin: 0 auto;
        /* Centered horizontally, no vertical margin */
        max-height: 350px !important;
        /* Allow growing */
    }

    .rotating-seal {
        position: relative;
        top: 0;
        right: 0;
        left: 0;
        margin: 40px auto 30px;
        /* Added top margin to space out from button */
        transform: none;
        width: 160px;
        /* Slightly smaller to fit better */
        height: 160px;
    }

    .seal-icon svg {
        width: 24px !important;
        height: 24px !important;
    }

    .guarantee-content-wrapper {
        padding: 0 20px;
        text-align: center;
    }

    .detailed-guarantee-section h3 {
        font-size: 32px;
    }

    .detailed-guarantee-section p {
        font-size: 16px;
    }

    /* SESSÃO 11 - FAQ */
    .faq-section {
        padding-top: 40px;
        /* Reduced from 100px */
        padding-bottom: 60px;
    }

    .faq-container {
        padding: 0 20px;
    }

    .faq-section .cta-button {
        background-color: white !important;
        color: var(--color-deep-rose) !important;
        width: 100%;
        max-width: 350px;
        margin-top: 30px;
    }

    .faq-section h3 {
        font-size: 32px;
    }

    /* FOOTER */
    .footer {
        padding: 40px 20px;
    }

    .disclaimer {
        font-size: 13px;
    }
}

/* SMALLER MOBILE (max-width: 480px) */
@media (max-width: 480px) {
    .header-fixed p {
        font-size: 15px;
        padding: 4px 0;
    }

    .hero-content h1 {
        font-size: 28px;
    }

    .marquee-container {
        padding: 10px 0;
        /* Reduced padding */
    }

    .petal-1 {
        opacity: 1;
        /* Full opacity */
        max-width: 150px;
        /* Reduced size */
    }

    .marquee-content {
        font-size: 14px;
        /* Reduced font size */
    }

    .pricing-card .big-price {
        font-size: 42px;
    }

    .buy-button {
        font-size: 16px;
        padding: 16px;
    }
}