/* ============================================================
   RESPONSIVE.CSS — Mídia Money
   ============================================================ */

/* ── Tablet (≤ 1024px) ─────────────────────────────────────── */
@media (max-width: 1024px) {
    .services-grid      { grid-template-columns: repeat(2, 1fr); }
    .cards-container    { grid-template-columns: repeat(2, 1fr); }
    .support-container  { grid-template-columns: repeat(2, 1fr); }
    .platform-content   { gap: 40px; }
    .platform-image img { height: 340px; }
}

/* ── Mobile (≤ 768px) ──────────────────────────────────────── */
@media (max-width: 768px) {

    .hamburger { display: flex; }
    .btn-navbar-desktop { display: none !important; }

    .navbar-menu {
        position: fixed;
        top: 0; right: 0; bottom: 0;
        width: min(300px, 80vw);
        flex-direction: column;
        align-items: flex-start;
        background: var(--panel);
        border-left: 1px solid var(--border-blue);
        padding: 4.5rem 0 2rem;
        gap: 0;
        z-index: 950;
        overflow-y: auto;
        transform: translateX(110%);
        transition: transform .32s cubic-bezier(.4,0,.2,1);
        box-shadow: -8px 0 40px rgba(0,0,0,.5);
        pointer-events: none;
    }
    .navbar-menu.open {
        transform: translateX(0);
        pointer-events: all;
    }

    .drawer-close {
        display: flex !important;
        position: absolute;
        top: 1rem; right: 1rem;
        width: 34px; height: 34px;
        align-items: center; justify-content: center;
        background: rgba(255,255,255,.08);
        border: 1px solid rgba(255,255,255,.12);
        border-radius: 8px;
        color: rgba(255,255,255,.6);
        font-size: .85rem;
        cursor: pointer;
        z-index: 960;
        transition: all .18s;
    }
    .drawer-close:hover { background: rgba(255,255,255,.15); color: #fff; }

    .navbar-menu a {
        width: 100%;
        padding: 1rem 1.6rem;
        font-size: .95rem;
        font-weight: 500;
        border-bottom: 1px solid rgba(255,255,255,.07);
        color: var(--muted);
        display: block;
        transition: background .18s, color .18s;
    }
    .navbar-menu a:hover { background: rgba(255,255,255,.06); color: var(--text); }
    .navbar-menu a::after { display: none; }

    /* Botões mobile dentro do drawer */
    .navbar-buttons-mobile {
        display: flex;
        flex-direction: column;
        gap: .75rem;
        padding: 1.5rem 1.6rem;
        border-top: 1px solid rgba(255,255,255,.08);
        margin-top: .5rem;
        width: 100%;
    }
    .navbar-buttons-mobile .btn-navbar,
    .navbar-buttons-mobile .btn-navbar-entrar {
        display: flex;
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    .mobile-nav-overlay { display: block; }
    body.menu-open { overflow: hidden; }

    .carousel-btns { flex-direction: column; gap: 10px; }
    .carousel-btn-primary,
    .carousel-btn-secondary { width: 100%; justify-content: center; }
    .carousel-nav-btn { width: 38px; height: 38px; }
    .carousel-nav-btn.prev { left: 12px; }
    .carousel-nav-btn.next { right: 12px; }

    .cards-section     { margin-top: 32px; }
    .cards-container   { grid-template-columns: 1fr; }
    .services-grid     { grid-template-columns: 1fr; }
    .support-container { grid-template-columns: 1fr; }

    .platform-content  { grid-template-columns: 1fr; gap: 36px; }
    .platform-image    { order: -1; }
    .platform-image img { height: 220px; }

    .btn-voltar-fixed  { padding: 14px; border-radius: 50%; }
    .btn-voltar-fixed span,
    .btn-voltar-fixed > *:not(i) { display: none; }
    .btn-voltar-fixed i { font-size: 1.3rem; margin: 0; }
}

/* ── Small mobile (≤ 480px) ─────────────────────────────────── */
@media (max-width: 480px) {
    .carousel-container { height: 60vh; min-height: 360px; }
    .carousel-title     { font-size: clamp(1.6rem, 7vw, 2.4rem); }
    .carousel-desc      { font-size: .9rem; }
    .news-section,
    .services-section,
    .platform-section,
    .support-section,
    .cta-section        { padding: 64px 0; }
    .support-card       { padding: 28px 20px; }
    .card-highlight     { padding: 22px 18px; }
}