/* ============================================================
   RESPONSIVE CSS — Media Queries para todos os breakpoints
   ============================================================ */

/* ============================================================
   MAX-WIDTH: 1200px (Laptops)
   ============================================================ */
@media (max-width: 1200px) {
    :root {
        --font-size-6xl: 3.5rem;
        --font-size-5xl: 3rem;
        --font-size-4xl: 2.5rem;
        --font-size-3xl: 2rem;
    }
    
    .hero__inner {
        gap: var(--space-2xl);
    }
    
    .site-nav__list {
        gap: 0;
    }
    
    .site-nav__link {
        padding: var(--space-sm) 10px;
        font-size: 13px;
    }
}

/* ============================================================
   MAX-WIDTH: 1024px (Tablets Landscape)
   ============================================================ */
@media (max-width: 1024px) {
    :root {
        --font-size-6xl: 3rem;
        --font-size-5xl: 2.5rem;
        --space-5xl: 6rem;
    }

    .hero__inner {
        grid-template-columns: 1fr;
        text-align: center;
        padding-top: var(--space-2xl);
    }
    
    .hero__content {
        margin: 0 auto;
    }
    
    .hero__buttons {
        justify-content: center;
    }
    
    .hero__stats {
        justify-content: center;
    }
    
    .content-with-image,
    .content-with-image--reverse {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
    }
    
    .content-with-image--reverse > * {
        direction: ltr;
    }
    
    .site-footer__top {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .site-footer__col--brand {
        grid-column: 1 / -1;
        text-align: center;
        max-width: 600px;
        margin: 0 auto;
    }
    
    .site-footer__social {
        justify-content: center;
    }
}

/* ============================================================
   MAX-WIDTH: 991px (Menu Mobile Trigger)
   ============================================================ */
@media (max-width: 991px) {
    .site-nav,
    .site-header__cta {
        display: none;
    }
    
    .menu-toggle {
        display: flex;
    }
}

/* ============================================================
   MAX-WIDTH: 768px (Tablets Portrait)
   ============================================================ */
@media (max-width: 768px) {
    :root {
        --font-size-6xl: 2.5rem;
        --font-size-5xl: 2rem;
        --font-size-4xl: 1.75rem;
        --font-size-3xl: 1.5rem;
        --space-5xl: 4rem;
        --space-4xl: 3rem;
    }
    
    .hero {
        min-height: auto;
        padding-bottom: var(--space-4xl);
    }
    
    .btn {
        width: 100%;
    }
    
    .hero__buttons {
        flex-direction: column;
    }
    
    .site-footer__top {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .article-title {
        font-size: var(--font-size-3xl);
    }
    
    .article-meta {
        flex-direction: column;
        gap: var(--space-sm);
    }
    
    .article-content {
        font-size: var(--font-size-base);
    }
}

/* ============================================================
   MAX-WIDTH: 576px (Smartphones)
   ============================================================ */
@media (max-width: 576px) {
    :root {
        --font-size-6xl: 2rem;
        --font-size-5xl: 1.75rem;
        --font-size-4xl: 1.5rem;
    }
    
    .container {
        padding: 0 var(--space-md);
    }
    
    .hero__stats {
        flex-direction: column;
        gap: var(--space-md);
        align-items: center;
    }
    
    .site-footer__top {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .faq-question {
        padding: var(--space-md);
        font-size: var(--font-size-sm);
    }
    
    .faq-answer-inner {
        padding: 0 var(--space-md) var(--space-md);
    }
    
    .page-404__code {
        font-size: 6rem;
    }
    
    .article-author {
        flex-direction: column;
        text-align: center;
    }
}

/* ============================================================
   MAX-WIDTH: 375px (Small Smartphones)
   ============================================================ */
@media (max-width: 375px) {
    .site-header__logo-img {
        height: 28px;
    }
    
    .hero__title {
        font-size: 1.8rem;
    }
    
    .whatsapp-widget {
        width: 50px;
        height: 50px;
        bottom: 16px;
        right: 16px;
    }
    
    .whatsapp-widget__icon {
        width: 28px;
        height: 28px;
    }
}