/* ============================================================
   Trabalho Portátil — Responsivo (tema Passaporte do Nômade)
   Breakpoints: 1024 / 768 / 560
   Contrato JS: #menuToggle.active (hamburger→X), #mainNav.open
   (gaveta), .site-header.scrolled.
   ============================================================ */

/* ---- 1024px ---- */
@media (max-width: 1024px) {
    .nav-list { gap: 16px; }

    .nav-list a { font-size: 0.78rem; letter-spacing: 1px; }

    .hero .container { padding: 48px 34px 56px; }

    .hero h1 { font-size: 2.5rem; }

    .content-section h2 { font-size: 1.7rem; }
}

/* ---- 768px: gaveta mobile ---- */
@media (max-width: 768px) {
    html { scroll-padding-top: calc(62px + 16px); }

    .menu-toggle { display: flex; }

    /* gaveta lateral (contrato do main.js: .open) */
    .main-nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: 280px;
        height: 100vh;
        background: var(--navy-2);
        background-image: radial-gradient(rgba(250, 247, 240, 0.07) 1.5px, transparent 1.5px);
        background-size: 26px 26px;
        padding: 84px 30px 30px;
        transition: right var(--transition);
        box-shadow: var(--shadow-lg);
        z-index: 1001;
    }

    .main-nav.open { right: 0; }

    .nav-list {
        flex-direction: column;
        gap: 14px;
    }

    .nav-list a {
        font-size: 0.95rem;
        display: block;
        padding: 10px 4px;
        border-bottom: 1px dashed rgba(250, 247, 240, 0.25);
        border-top: none;
    }

    .nav-list a:hover {
        border-top: none;
        border-bottom-color: var(--mostarda);
        border-bottom-style: solid;
    }

    /* hamburger → X (contrato do main.js: .active) */
    .menu-toggle.active span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .menu-toggle.active span:nth-child(2) { opacity: 0; }

    .menu-toggle.active span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    .hero { padding: 48px 0 78px; }

    .hero .container { padding: 40px 24px 48px; }

    .hero .container::before,
    .hero .container::after { width: 20px; height: 20px; }

    .hero .container::before { left: -11px; }
    .hero .container::after { right: -11px; }

    .hero h1 { font-size: 1.95rem; }

    .hero h1::before { letter-spacing: 2px; font-size: 0.75rem; }

    .hero-subtitle { font-size: 1rem; }

    .hero::after { width: 140px; height: 28px; bottom: 18px; }

    .content-section { padding: 52px 0; }

    .content-section h2 { font-size: 1.5rem; padding: 5px 16px; }

    .content-section h3 { font-size: 1.12rem; }

    .footer-grid { grid-template-columns: 1fr; gap: 22px; }
}

/* ---- 560px ---- */
@media (max-width: 560px) {
    .logo-text { font-size: 1.15rem; }

    .logo-icon { width: 34px; height: 30px; font-size: 1.05rem; }

    .main-nav { width: 82vw; }

    .hero { padding: 36px 0 68px; }

    .hero .container { padding: 34px 18px 42px; }

    .hero h1 { font-size: 1.55rem; }

    .hero h1::before { font-size: 0.66rem; letter-spacing: 1.5px; margin-bottom: 12px; }

    .hero h1::after { width: 150px; }

    .hero-subtitle { font-size: 0.95rem; }

    .hero::after { width: 110px; height: 24px; bottom: 14px; }

    .content-section h2 { font-size: 1.3rem; }

    .content-section h1 { font-size: 1.5rem; }

    .cards-grid, .tips-grid { grid-template-columns: 1fr; }

    .tip-number { width: 46px; height: 46px; font-size: 1.15rem; }

    .cta-section { padding: 52px 0; }

    .cta-button { display: block; width: 100%; max-width: 320px; margin: 0 auto; }

    .whatsapp-float { width: 50px; height: 50px; bottom: 18px; right: 18px; }
}