/* ====================================
   MOBILE RESPONSIVENESS FIXES
   Safe overrides for small screens (< 768px)
   ==================================== */

@media (max-width: 767px) {

    /* --- 0. FORCE VISIBILITY (Fix Invisible Sections) --- */
    .scroll-animate {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        visibility: visible !important;
    }

    /* --- 1. GENERAL OVERFLOW FIX --- */
    body,
    html {
        overflow-x: hidden;
        width: 100%;
        max-width: 100%;
    }

    .container {
        padding: 0 16px;
        /* Slightly reduced padding for more space */
    }

    /* --- 2. HERO SECTION TEXT SIZES --- */
    .headline {
        font-size: 28px !important;
        /* Force smaller size */
        line-height: 1.2;
    }

    .sub-headline {
        font-size: 15px !important;
    }

    /* --- 3. CAROUSEL & CARDS (Benefits/Features) --- */
    /* Fix: "flex: 0 0 300px" causes overflow on iPhone SE (320px) */
    .benefit-card {
        flex: 0 0 280px !important;
        /* Reduce width slightly */
        max-width: 85vw;
        /* Never exceed 85% of screen width */
    }

    /* --- 4. COMPARISON TABLE CONTEXT (The Critical Fix) --- */
    /* The header is hidden on mobile, so we add labels to the columns */

    /* Reveal context for "Tradicional" */
    .traditional-col::before {
        content: "🏢 MODELO TRADICIONAL";
        display: block;
        font-size: 13px;
        font-weight: 800;
        color: #ff4d4d;
        margin-bottom: 12px;
        padding-bottom: 8px;
        border-bottom: 1px dashed rgba(255, 77, 77, 0.3);
        text-align: center;
        letter-spacing: 1px;
    }

    /* Reveal context for "AI First" */
    .ai-col::before {
        content: "🚀 MODELO AI FIRST";
        display: block;
        font-size: 13px;
        font-weight: 800;
        color: #00e676;
        margin-bottom: 12px;
        padding-bottom: 8px;
        border-bottom: 1px dashed rgba(0, 230, 118, 0.3);
        text-align: center;
        letter-spacing: 1px;
    }

    .table-row {
        gap: 24px !important;
        /* More separation between the two models */
        margin-bottom: 24px;
        padding: 12px !important;
    }

    /* --- 5. CASES GRID FIX --- */
    /* "minmax(300px, 1fr)" breaks on 320px screens */
    .cases-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .case-card {
        width: 100%;
        box-sizing: border-box;
    }

    /* --- 6. STEPS FIX --- */
    .step-card {
        margin-bottom: 10px;
    }

    /* Hide the step arrow on mobile or rotate it (existing css rotates, but spacing might be odd) */
    .step-arrow {
        margin: 5px 0 !important;
    }

    /* --- 7. FINAL CTA COMPARISON --- */
    /* Same context fix for the final CTA comparison */
    .comparison-column.bad::before {
        content: "❌ OPÇÃO 1";
        display: block;
        text-align: center;
        font-weight: bold;
        color: #ff4d4d;
        margin-bottom: 10px;
    }

    .comparison-column.good::before {
        content: "✅ OPÇÃO 2";
        display: block;
        text-align: center;
        font-weight: bold;
        color: #00e676;
        margin-bottom: 10px;
    }

    /* --- 8. CAROUSEL INFINITE SCROLL FIX --- */
    /* Ensure cards match the exact width expected by the animation calculation */
    .carousel-wrapper .card {
        min-width: 280px !important;
        width: 280px !important;
        flex: 0 0 280px !important;
        margin-right: 16px !important;
        /* Explicit gap */
    }

    /* Override gap in track to ensure it matches calculation */
    .carousel-track {
        gap: 16px !important;
        width: max-content !important;
    }
}