/* ============================================================
   SOLUÇÃO FULL WIDTH (LARGURA TOTAL) - VERSÃO FINAL CORRIGIDA
   Garante que o texto nunca sobreponha a foto e não seja cortado.
   ============================================================ */

/* 1. Containers Flexíveis */
.container,
.pricing-container,
.faq-container,
.bonus-container {
    max-width: 90% !important;
    width: 90% !important;
    margin: 0 auto !important;
}

/* 2. Ajuste do TOPO (Hero) */
@media (min-width: 1024px) {
    .hero-container {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        /* Metade exata */
        gap: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        min-height: 100vh !important;
        /* Altura flexível para não cortar texto */
        padding: 0 !important;
        margin: 0 !important;
        overflow: visible !important;
        /* Garante que nada seja cortado */
    }

    /* Coluna do Texto (Esquerda) */
    .hero-left {
        width: 100% !important;
        padding: 4rem 5% 4rem 8% !important;
        /* Reduzi a margem interna da direita de 10% para 5% */
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: flex-start !important;
        z-index: 10 !important;
        background: #1A3026 !important;
        /* Cor sólida de fundo (verde escuro) */
        min-height: 100vh !important;
    }

    /* Título - Ajustado para permitir que o texto flua melhor */
    .hero-headline {
        font-size: clamp(2rem, 3.2vw, 3.5rem) !important;
        line-height: 1.2 !important;
        max-width: 900px !important;
        /* Aumentado para 900px para caber 'Saia do controle financeiro' */
        margin-bottom: 2rem !important;
        color: #FAF8F5 !important;
        white-space: normal !important;
    }

    /* Esconde as quebras de linha manuais em telas grandes para o texto fluir */
    .hero-headline br {
        display: none !important;
    }

    /* Adiciona uma quebra forçada onde realmente faz sentido no design largo */
    .hero-headline::after {
        content: "";
        display: block;
    }

    /* Logo e Selo */
    .logo {
        margin-bottom: 4rem !important;
    }

    .logo-image {
        height: 210px !important;
        width: auto !important;
    }

    .badge {
        display: inline-flex !important;
        width: auto !important;
        padding: 0.5rem 1.2rem !important;
        margin-bottom: 2.5rem !important;
    }

    .hero-subheadline {
        max-width: 420px !important;
        font-size: 1.05rem !important;
        margin-bottom: 3rem !important;
    }

    /* Indicador Descubra Mais */
    .scroll-indicator {
        position: absolute !important;
        bottom: 3rem !important;
        left: 8% !important;
        z-index: 20 !important;
        display: flex !important;
        transform: none !important;
    }

    /* Coluna da Foto (Direita) */
    .hero-right {
        position: relative !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 100vh !important;
        z-index: 5 !important;
    }

    .hero-image {
        width: 100% !important;
        height: 100% !important;
        position: absolute !important;
        inset: 0 !important;
    }

    .hero-image img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
    }
}

/* Ajuste para 4K */
@media (min-width: 2000px) {
    .hero-headline {
        font-size: 4.5rem !important;
        max-width: 700px !important;
    }
}