/* ===== PÁGINA INÍCIO - RESPONSIVO - ALINHAMENTO CORRIGIDO ===== */
/* Safe margins e centralização perfeita X-Y para mobile e tablet */

/* Mobile (≤767px): Home Page Optimization */
@media (max-width: 767px) {
    /* Reset de conflitos Tailwind */
    .bg-mesh {
        width: 100% !important;
        overflow-x: hidden !important;
    }
    
    /* Hero Section - Centralizado */
    .bg-mesh > section:first-of-type {
        width: 100% !important;
        padding-left: var(--safe-margin-lr) !important;
        padding-right: var(--safe-margin-lr) !important;
        box-sizing: border-box !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* Hero content wrapper */
    .gsap-hero {
        width: 100% !important;
        max-width: none !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* Hero title */
    .hero-title-premium {
        font-size: 2.5rem !important;
        line-height: 1.3 !important;
        margin: 0 0 1rem 0 !important;
        text-align: center !important;
        width: 100% !important;
    }
    
    /* Hero paragraph */
    .gsap-hero p {
        text-align: center !important;
        width: 100% !important;
        margin: 0 0 1.5rem 0 !important;
    }
    
    /* CTA Buttons - Stack vertically */
    .gsap-hero > div.flex {
        flex-direction: row !important;
        width: 100% !important;
        gap: 0.65rem !important;
        align-items: stretch !important;
    }
    
    .gsap-hero > div.flex > a {
        width: 100% !important;
        text-align: center !important;
    }
    
    /* About Section */
    .bg-mesh > section:nth-of-type(2) {
        width: 100% !important;
        padding: 2rem var(--safe-margin-lr) !important;
        box-sizing: border-box !important;
    }
    
    .bg-mesh > section:nth-of-type(2) > div {
        width: 100% !important;
        max-width: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .bg-mesh > section:nth-of-type(2) .section-title-premium {
        font-size: 1.5rem !important;
        margin: 0 0 1rem 0 !important;
    }
    
    /* Social Action Section */
    .bg-mesh > section:nth-of-type(3) {
        width: 100% !important;
        padding: 2rem var(--safe-margin-lr) !important;
        box-sizing: border-box !important;
    }
    
    /* Social action container */
    .bg-mesh > section:nth-of-type(3) > .max-w-7xl,
    .bg-mesh > section:nth-of-type(3) > div.max-w-7xl {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Grid - 1 column layout */
    .bg-mesh > section:nth-of-type(3) .grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* Section title in social action */
    .bg-mesh > section:nth-of-type(3) .section-title-premium {
        font-size: 1.5rem !important;
        margin: 0 0 1rem 0 !important;
        text-align: center !important;
        width: 100% !important;
    }
    
    /* Glass cards */
    .glass-card {
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 1rem !important;
        width: 100% !important;
    }
    
    /* Underline decoration */
    .bg-mesh > section:nth-of-type(3) .w-24 {
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    /* Override all max-width constraints on mobile */
    .max-w-2xl,
    .max-w-3xl,
    .max-w-4xl,
    .max-w-7xl {
        width: 100% !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* Tablet (768px - 1199px): Optimized Layout */
@media (min-width: 768px) and (max-width: 1199px) {
    /* Hero Section */
    .bg-mesh > section:first-of-type {
        width: 100% !important;
        padding: 2rem 1.5rem !important;
        box-sizing: border-box !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .gsap-hero {
        width: 100% !important;
        max-width: none !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .hero-title-premium {
        font-size: 2.2rem !important;
        line-height: 1.3 !important;
        margin: 0 0 1.5rem 0 !important;
        text-align: center !important;
        width: 100% !important;
    }
    
    .gsap-hero p {
        text-align: center !important;
        width: 100% !important;
        margin: 0 0 1.5rem 0 !important;
    }
    
    /* CTA Buttons - Row layout */
    .gsap-hero > div.flex {
        flex-direction: row !important;
        width: 100% !important;
        gap: 1rem !important;
        justify-content: center !important;
        flex-wrap: wrap !important;
    }
    
    .gsap-hero > div.flex > a {
        width: auto !important;
    }
    
    /* About Section */
    .bg-mesh > section:nth-of-type(2) {
        width: 100% !important;
        padding: 2.5rem 1.5rem !important;
        box-sizing: border-box !important;
    }
    
    .bg-mesh > section:nth-of-type(2) > div {
        width: 100% !important;
        max-width: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .bg-mesh > section:nth-of-type(2) .section-title-premium {
        font-size: 2rem !important;
        margin: 0 0 1.5rem 0 !important;
    }
    
    /* Social Action Section */
    .bg-mesh > section:nth-of-type(3) {
        width: 100% !important;
        padding: 2.5rem 1.5rem !important;
        box-sizing: border-box !important;
    }
    
    .bg-mesh > section:nth-of-type(3) > .max-w-7xl,
    .bg-mesh > section:nth-of-type(3) > div.max-w-7xl {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Grid - 2 column layout */
    .bg-mesh > section:nth-of-type(3) .grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.5rem !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .bg-mesh > section:nth-of-type(3) .section-title-premium {
        font-size: 2rem !important;
        margin: 0 0 1.5rem 0 !important;
        text-align: center !important;
        width: 100% !important;
    }
    
    /* Underline decoration */
    .bg-mesh > section:nth-of-type(3) .w-24 {
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    .glass-card {
        margin: 0 !important;
        border-radius: 1.5rem !important;
        width: 100% !important;
    }
    
    /* Override max-width constraints */
    .max-w-2xl,
    .max-w-3xl,
    .max-w-4xl,
    .max-w-7xl {
        width: 100% !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* Desktop (1200px+): Full width with proper centering */
@media (min-width: 1200px) {
    .bg-mesh > section {
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Allow max-width classes to work on desktop */
    .max-w-4xl {
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    .max-w-7xl {
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    .glass-card {
        border-radius: 2rem !important;
    }
}
