/* Ferrugem — Responsivo (todos os @media aqui)
   Breakpoints: 1024 / 768 / 480 — layout "cartaz de show" */

@media (max-width: 1024px) {
    .nav { gap: 1.05rem; }
    .nav a { font-size: 0.85rem; }

    h1 { font-size: 2.35rem; }
    .hero-badges { padding-right: 0; }
    .seal { width: 128px; bottom: 9.5rem; }

    .records-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: 1fr 1fr; }

    .countdown { justify-content: flex-start; }
    .cd-units { flex-wrap: wrap; }
}

@media (max-width: 768px) {
    .menu-toggle { display: block; }

    .nav {
        position: fixed;
        top: var(--header-h);
        right: 0;
        flex-direction: column;
        align-items: flex-start;
        background: var(--palco-3);
        width: min(300px, 84vw);
        height: calc(100vh - var(--header-h));
        padding: 1.8rem 1.5rem;
        gap: 0.4rem;
        border-left: 3px solid var(--ambar);
        box-shadow: -14px 0 34px rgba(0, 0, 0, 0.55);
        transform: translateX(100%);
        transition: transform 0.3s ease;
    }
    .nav.open { transform: translateX(0); }
    .nav a { border-bottom: 1px dashed var(--vinho); padding: 0.8rem 0.2rem; width: 100%; }

    .hero { min-height: 92vh; }
    .hero-inner { padding-bottom: 5.5rem; }
    h1 { font-size: 2rem; }
    .hero .lead { font-size: 1.05rem; }

    /* selo desce para o fluxo abaixo dos badges */
    .seal {
        position: static;
        display: block;
        margin: 1.8rem auto 0;
    }

    .eq { height: 34px; }

    .story-grid { grid-template-columns: 1fr; gap: 3rem; }
    .story-photo { max-width: 520px; margin: 2.4rem auto 0; transform: rotate(-1deg); }

    .records-grid { grid-template-columns: 1fr; max-width: 460px; margin-left: auto; margin-right: auto; }

    .release-grid { grid-template-columns: 1fr; gap: 2.6rem; }

    .timeline-item { padding: 1.1rem 1.6rem 1.1rem 2rem; }
    .timeline-item::after { display: none; }

    .fans-grid { grid-template-columns: 1fr; max-width: 480px; margin-left: auto; margin-right: auto; }
    .fan:nth-child(even) { transform: rotate(-0.8deg); }

    .contact-grid { grid-template-columns: 1fr; gap: 2.4rem; }

    .accordion-panel { padding-left: 1.2rem; }

    h2 { font-size: 1.55rem; }
    .footer-grid { grid-template-columns: 1fr; gap: 1.9rem; }

    .wa-label { display: none; }
    .whatsapp-float { padding: 0.9rem; }

    .tab { font-size: 0.88rem; padding: 0.65rem 1.1rem; }
    .countdown { padding: 1.5rem 1.4rem; }
    .cd-unit { min-width: 62px; }
}

@media (max-width: 480px) {
    .container { width: 94%; }

    h1 { font-size: 1.72rem; }
    .brand-name { font-size: 1.12rem; }

    .hero { min-height: 88vh; }
    .hero-inner { padding-bottom: 4.6rem; }
    .poster-kicker { font-size: 0.72rem; letter-spacing: 0.14em; }
    .hero-badges { gap: 0.45rem; }
    .hero-badges li { font-size: 0.78rem; }

    .seal { width: 116px; }

    .cd-units { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem; width: 100%; }
    .cd-unit { min-width: 0; }

    .timeline-item { padding: 1rem 1.2rem 1rem 1.8rem; }
    .timeline-item::before { width: 12px; background-size: 12px 22px; }

    .contact-card { padding: 1.6rem 1.4rem 1.6rem 1.9rem; }
    .contact-card::before { width: 12px; }

    .btn { width: 100%; text-align: center; }

    .release-photo { transform: none; }
    .release-photo:last-child { transform: none; }
    .fan { transform: none; }
}

/* Movimento respeitado para quem pede menos animação */
@media (prefers-reduced-motion: reduce) {
    .eq span, .seal-rot, .brand-disc, .ticker-track, .countdown, .whatsapp-float::before {
        animation: none;
    }
    .disc { animation: none; }
    html { scroll-behavior: auto; }
    .reveal { opacity: 1; transform: none; }
    .reveal.visible { transition: none; }
}