/* assets/css/responsive.css */

/* Tablets e Dispositivos Menores (ex: <= 992px) */
@media (max-width: 992px) {
    h1 { font-size: 2.8rem; }
    h2 { font-size: 2.2rem; }

    #hero h1 { font-size: 3rem; }
    #hero p { font-size: 1.2rem; }

    #sobre-nos-home .grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    #sobre-nos-home .about-image {
        order: -1; /* Imagem primeiro em telas menores */
        margin-bottom: 30px;
    }
    #sobre-nos-home h2 { text-align: center; }

    #contato-page .contato-grid {
        grid-template-columns: 1fr;
    }
    .info-contato .mapa-contato {
        height: 250px;
    }
}

/* Mobile (ex: <= 768px) */
@media (max-width: 768px) {
    :root {
        --header-height: 70px;
    }

    h1 { font-size: 2.5rem; }
    h2 { font-size: 2rem; }
    h3 { font-size: 1.6rem; }
    section { padding: 60px 0; }

    /* Menu Mobile */
    #main-nav ul {
        display: none; /* Esconde o menu desktop */
        flex-direction: column;
        position: absolute;
        top: var(--header-height); /* Abaixo do header */
        left: 0;
        width: 100%;
        background-color: var(--cor-secundaria);
        padding: 20px 0;
        box-shadow: 0 5px 10px rgba(0,0,0,0.2);
    }
    #main-nav ul.active { /* Classe adicionada via JS */
        display: flex;
    }
    #main-nav ul li {
        margin: 0;
        width: 100%;
        text-align: center;
    }
    #main-nav ul li a {
        display: block;
        padding: 15px 20px;
        border-bottom: 1px solid var(--cor-borda);
    }
    #main-nav ul li a::after { display: none; } /* Remove sublinhado no mobile */
    #main-nav ul li:last-child a { border-bottom: none; }

    #mobile-menu-toggle {
        display: block; /* Mostra o botão hamburger */
    }
    #main-header .logo-link .logo-img { height: 40px; }
    #main-header.scrolled .logo-img { height: 35px; }


    #hero {
        min-height: 500px;
        padding-top: calc(var(--header-height) + 20px);
        height: auto; /* Altura automática para conteúdo */
    }
    #hero h1 { font-size: 2.5rem; }
    #hero p { font-size: 1.1rem; }
    #hero .hero-buttons {
        display: flex;
        flex-direction: column;
    }
    #hero .hero-buttons .btn {
        margin: 10px 0;
        width: 80%;
        align-self: center;
    }

    #diferenciais .diferenciais-grid,
    #servicos-home .servicos-grid,
    #depoimentos .depoimentos-grid {
        grid-template-columns: 1fr; /* Uma coluna */
    }

    #main-footer .footer-content {
        grid-template-columns: 1fr;
        text-align: center;
    }
    #main-footer .social-links {
        margin-top: 15px;
        justify-content: center;
        display: flex; /* Para centralizar os ícones sociais */
    }
    #main-footer .footer-section.links ul {
        padding-left: 0; /* Remove padding se houver */
    }
}

/* Telas Muito Pequenas (ex: <= 480px) */
@media (max-width: 480px) {
    .container {
        width: 95%;
        padding: 0 15px;
    }
    h1 { font-size: 2rem; }
    h2 { font-size: 1.8rem; }
    #hero h1 { font-size: 2.2rem; }
    .btn { padding: 10px 20px; font-size: 0.9rem; }
    .whatsapp-float { width: 50px; height: 50px; font-size: 24px; bottom: 20px; right: 20px;}
}