/* Responsive Styles */

/* Tablets e Desktops Menores */
@media (max-width: 992px) {
    .container {
        max-width: 960px;
        padding: 0 15px;
    }
    h1 { font-size: 2.5rem; }
    h2 { font-size: 2rem; }
    .section-title { font-size: 2.2rem; }

    .main-nav { display: none; } /* Esconde navegação desktop */
    .header-cta { display: none; } /* Esconde CTA do header */
    .mobile-menu-toggle { display: block; } /* Mostra ícone do menu mobile */

    .hero-section .container {
        flex-direction: column;
        text-align: center;
    }
    .hero-content {
        max-width: 100%;
        padding-right: 0;
        margin-bottom: 30px;
    }
    .hero-image {
        max-width: 70%; /* Imagem um pouco menor */
        margin: 0 auto;
    }
    .hero-buttons {
        justify-content: center;
    }

    .services-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
    .features-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
    .blog-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

    .footer-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 25px;
    }
    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }
    .copyright { margin-bottom: 10px; }

    .localidade-content {
        grid-template-columns: 1fr; /* Coluna única */
    }
    .localidade-historia {
        margin-top: 30px;
    }
    .contact-grid {
        grid-template-columns: 1fr; /* Coluna única */
    }
    .contact-form-col {
        margin-top: 30px;
    }
}


/* Celulares Maiores e Tablets em Retrato */
@media (max-width: 768px) {
    .container {
        max-width: 720px;
    }
    h1 { font-size: 2.2rem; }
    h2 { font-size: 1.8rem; }
    .page-title { font-size: 2.3rem; }
    .section-title { font-size: 2rem; }
    .section-subtitle { font-size: 1rem; margin-bottom: 30px; }
    .section-padding { padding: 60px 0; }

    main { padding-top: 60px; } /* Se o header diminuir */
    .logo img { height: 40px; }
    .main-header { padding: 8px 0; }
    .mobile-menu { top: 56px; } /* Se header diminuir */


    .hero-content h1 { font-size: 2.5rem; }
    .hero-content .lead { font-size: 1.1rem; }
    .hero-buttons .btn {
        padding: 10px 20px;
        font-size: 0.9rem;
    }
    .hero-image { max-width: 80%; }

    .services-grid, .features-grid, .blog-grid {
        grid-template-columns: 1fr; /* Coluna única para cards */
        gap: 20px;
    }
    .service-card, .feature-item, .blog-card {
        padding: 25px 20px;
    }
    .service-card h3 { font-size: 1.4rem; }
    .feature-item h3 { font-size: 1.3rem; }
    .blog-content h3 { font-size: 1.3rem; }


    .cta-section h2 { font-size: 1.8rem; }
    .cta-section p { font-size: 1rem; }

    .footer-grid {
        text-align: center; /* Centralizar conteúdo das colunas */
    }
    .footer-col h3::after { /* Centralizar sublinhado do título */
        left: 50%;
        transform: translateX(-50%);
    }
    .social-links { text-align: center; margin-bottom: 20px; }
    .contact-info-footer li { justify-content: center; }
    .contact-info-footer i { margin-top: 2px; } /* Ajuste para centralizar */
    .newsletter-form { flex-direction: column; }
    .newsletter-form input[type="email"] {
        border-radius: var(--border-radius) var(--border-radius) 0 0;
        margin-bottom: -1px; /* Para a borda colar */
    }
    .newsletter-form button {
        border-radius: 0 0 var(--border-radius) var(--border-radius);
    }
}

/* Celulares Pequenos */
@media (max-width: 576px) {
    .container {
        padding: 0 10px;
    }
    h1 { font-size: 1.8rem; }
    h2 { font-size: 1.6rem; }
    .page-title { font-size: 2rem; }
    .section-title { font-size: 1.7rem; }
    .section-subtitle { font-size: 0.9rem; }
    .section-padding { padding: 50px 0; }

    .hero-content h1 { font-size: 2rem; }
    .hero-content .lead { font-size: 1rem; }
    .hero-buttons { flex-direction: column; gap: 10px; }
    .hero-buttons .btn { width: 100%; }
    .hero-image { display: none; } /* Opcional: esconder imagem em telas muito pequenas */

    .btn {
        padding: 10px 18px;
        font-size: 0.9rem;
    }
    .btn-large {
        padding: 12px 25px;
        font-size: 1rem;
    }

    .form-group input, .form-group select, .form-group textarea {
        padding: 10px 12px;
        font-size: 0.95rem;
    }
}