/**
 * Estilos responsivos do tema Mixturas.
 *
 * Abordagem desktop-first com pontos de quebra para tablet e mobile.
 */

/* ============ TABLET (até 992px) ============ */
@media (max-width: 992px) {
    .cards-grid { grid-template-columns: repeat(2, 1fr); }
    .content-area { grid-template-columns: 1fr; }
    .hero__title { font-size: 2.8rem; }
    .site-footer__grid { grid-template-columns: 1fr 1fr; }
}

/* ============ MOBILE (até 768px) ============ */
@media (max-width: 768px) {

    /* Navegação mobile */
    .menu-toggle { display: flex; }

    .main-navigation {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #fff;
        box-shadow: var(--sombra-suave);
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }
    .main-navigation.is-open { max-height: 600px; }
    .main-navigation .primary-menu { flex-direction: column; gap: 0; padding: 10px 20px; }
    .main-navigation .primary-menu li { width: 100%; }
    .main-navigation .primary-menu li a { padding: 12px; border-radius: 0; }

    /* Hero */
    .hero { padding: 80px 0; }
    .hero__title { font-size: 2.2rem; }
    .hero__description { font-size: 1.15rem; }
    .hero__buttons { flex-direction: column; }
    .hero__buttons .btn { width: 100%; }

    /* Seções */
    .section { padding: 56px 0; }
    .section__title { font-size: 1.8rem; }

    /* Grids */
    .cards-grid { grid-template-columns: 1fr; }
    .contact__grid { grid-template-columns: 1fr; }
    .site-footer__grid { grid-template-columns: 1fr; }

    /* Cookies */
    .cookie-banner { flex-direction: column; text-align: center; gap: 12px; }
}

/* ============ MOBILE PEQUENO (até 480px) ============ */
@media (max-width: 480px) {
    body { font-size: 15px; }
    .hero__title { font-size: 1.8rem; }
    .container { padding: 0 16px; }
    .whatsapp-float { width: 50px; height: 50px; font-size: 1.5rem; }
}

/* ============ PREFERÊNCIA POR MENOS MOVIMENTO ============ */
@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
