/* ============================================
   RESPONSIVE STYLES
   ============================================ */

/* Tablet */
@media (max-width: 1023px) {
    :root {
        --space-lg: 3rem;
        --space-xl: 5rem;
    }
}

/* Mobile */
@media (max-width: 767px) {
    :root {
        --container-padding: 1.5rem;
        --space-md: 1.5rem;
        --space-lg: 2.5rem;
        --space-xl: 4rem;
    }
    
    .section-title {
        font-size: 1.75rem;
    }
    
    .section-subtitle {
        font-size: 1rem;
    }
    
    /* Buttons */
    .btn {
        padding: 0.875rem 2rem;
        font-size: 0.9375rem;
    }
    
    /* Ajustes gerais de espaçamento */
    section {
        padding: var(--space-lg) 0;
    }
}

/* Small Mobile */
@media (max-width: 480px) {
    :root {
        --container-padding: 1rem;
        --space-md: 1rem;
        --space-lg: 2rem;
        --space-xl: 3rem;
    }
    
    .section-title {
        font-size: 1.5rem;
    }
    
    .section-subtitle {
        font-size: 0.9375rem;
    }
}

/* Cases Section - Carousel for Mobile */
@media (max-width: 767px) {
    .case-card__images {
        position: relative;
        overflow: hidden;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        display: flex;
    }
    
    .case-card__before,
    .case-card__after {
        flex-shrink: 0;
        width: 100%;
        scroll-snap-align: start;
    }
    
    .case-card__images::after {
        content: '';
        position: absolute;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        gap: 6px;
    }
}