/* FORÇA O RESET DO COMPORTAMENTO DO SITE */
html, body {
    width: 100% !important;
    overflow-x: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

@media screen and (max-width: 768px) {
    /* 1. MATA O MENU FIXO (O VILÃO) EM TODAS AS PÁGINAS */
    /* Usar 'html body header' é o seletor mais forte para anular a linha 88 do styles.css */
    html body header {
        position: relative !important; 
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        padding: 20px 0 !important;
        background-color: #ffffff !important;
    }

    /* 2. ELIMINA O PADDING DO BODY QUE ESTÁ TRAVADO NO STYLES.CSS:23 e 328 */
    html body {
        padding-top: 0 !important; 
        margin-top: 0 !important;
    }

    /* 3. EMPURRA O CONTEÚDO PARA BAIXO EM TODAS AS PÁGINAS */
    /* Adicionamos todos os IDs e classes que aparecem nos seus arquivos */
    html body main, 
    html body section, 
    html body .hero-wrapper, 
    html body #home, 
    html body #hero-locacao, 
    html body .vendas-container,
    html body .sobre-container,
    html body #contato-container {
        margin-top: 0 !important;
        padding-top: 60px !important; /* Espaço para o título respirar */
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
    }

    /* 4. GARANTE QUE O TÍTULO (H1) FIQUE CENTRALIZADO E VISÍVEL */
    h1 {
        display: block !important;
        visibility: visible !important;
        text-align: center !important;
        width: 100% !important;
        margin: 20px auto !important;
    }

    /* 5. MANTÉM O FOOTER PRETO CENTRALIZADO */
    footer#contato, 
    footer#contato section {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }
}

@media screen and (max-width: 768px) {
    /* 1. Remove o espaço exagerado (60vh) que está empurrando o texto para fora */
    .hero, 
    article.hero,
    #home .hero {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 40px 20px !important; /* Espaço fixo e seguro */
        min-height: auto !important;
        margin-top: 0 !important;
    }

    /* 2. Garante que o container principal não tenha alturas travadas */
    .hero-wrapper, 
    #home {
        height: auto !important;
        min-height: 100vh !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* 3. Ajusta o Header para não ocupar espaço demais */
    header {
        position: relative !important;
        padding: 10px 0 !important;
    }

    /* 4. Ajusta o tamanho dos textos para caberem na tela */
    h1 {
        font-size: 1.6rem !important;
        line-height: 1.2 !important;
        margin: 10px 0 !important;
        text-align: center !important;
    }

    p {
        font-size: 1rem !important;
        line-height: 1.4 !important;
        margin-bottom: 20px !important;
        text-align: center !important;
    }

    /* 5. Ajusta os botões para ficarem um abaixo do outro */
    .hero-buttons {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 10px !important;
        align-items: center !important;
    }

    .hero-buttons a {
        width: 90% !important;
        text-align: center !important;
    }
}



@media screen and (max-width: 768px) {
    /* 1. ZERA QUALQUER ESPAÇO QUE ESTEJA EMPURRANDO O TEXTO PARA BAIXO */
    /* Isso anula o padding: 60vh 5% da linha 121 do styles.css */
    html body #home .hero, 
    html body .hero,
    html body article.hero {
        padding: 20px 5% !important; 
        margin: 0 !important;
        height: auto !important;
        min-height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: center !important;
    }

    /* 2. AJUSTA O CONTAINER PAI PARA NÃO CORTAR O CONTEÚDO */
    html body .hero-wrapper {
        height: auto !important;
        min-height: 100vh !important;
        padding: 0 !important;
        display: block !important;
    }

    /* 3. DIMINUI O TÍTULO PARA ELE NÃO OCUPAR A TELA TODA */
    h1 {
        font-size: 1.5rem !important;
        line-height: 1.2 !important;
        margin: 10px 0 !important;
        text-align: center !important;
        width: 100% !important;
    }

    /* 4. AJUSTA O PARÁGRAFO E BOTÕES */
    p {
        font-size: 1rem !important;
        margin-bottom: 20px !important;
        text-align: center !important;
    }

    .hero-buttons {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
    }

    /* 5. AJUSTA O HEADER PARA NÃO SER UM OBSTÁCULO */
    header {
        position: relative !important;
        height: auto !important;
        padding: 10px 0 !important;
    }
}