/* Granza — Responsivo (todos os @media aqui)
   Breakpoints: 1024 / 768 / 480
   Layout pátio industrial: esteira vira coluna, containers
   empilham, faixa diagonal do CTA acompanha o hero. */

@media (max-width: 1024px) {

    .hero.yard-hero {
        grid-template-columns: 1fr;
        padding: 72px 28px 140px;
        gap: 48px;
    }

    .hero-frame.tapume { max-width: 620px; }

    .hero-copy .lead { max-width: 100%; }

    h1 { font-size: 2.2rem; }

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

    /* esteira vira grade 2×2 sem chevrons */
    .conveyor-belt { grid-template-columns: repeat(2, 1fr); gap: 26px; }
    .conveyor-belt::before { display: none; }
    .crate { margin: 0; }

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

    .deck-grid { grid-template-columns: 1fr; gap: 44px; }
    .framed-photo { max-width: 560px; }

    .gates-row { grid-template-columns: 1fr; }

    .weigh-grid { grid-template-columns: 1fr; gap: 44px; }

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

    .tagline-nav { gap: 8px; }
}

@media (max-width: 768px) {

    .menu-toggle { display: block; }

    .tagline-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--terra);
        background-image: linear-gradient(rgba(244, 239, 227, .045) 1px, transparent 1px),
            linear-gradient(90deg, rgba(244, 239, 227, .045) 1px, transparent 1px);
        background-size: 28px 28px;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 10px 28px 18px;
        border-bottom: 6px solid var(--ouro);
    }

    .tagline-nav.open {
        display: flex;
    }

    .tagline-nav a {
        clip-path: none;
        padding: 12px 14px 11px 30px;
        border-left: 4px solid var(--couro);
    }

    .tagline-nav a i { left: 12px; }

    .plate-inner { padding: 12px 20px; }

    .brand-sub { display: none; }

    section { padding: 64px 0; }

    .hero.yard-hero { padding: 56px 20px 130px; }

    /* faixa diagonal menor, sem rotação agressiva */
    .hazard-cta { bottom: 34px; }
    .hazard-stripe { width: 46px; }
    .hazard-text { font-size: 1.02rem; padding: 12px 18px; gap: 9px; }

    .gate-list li { font-size: .9rem; }

    .containers-row { grid-template-columns: 1fr; }

    .conveyor-belt { grid-template-columns: 1fr; }

    .meters { grid-template-columns: 1fr 1fr; gap: 18px; }
    .meter-read { font-size: 2.1rem; }

    .reg-panels { padding: 26px 20px 28px; }

    .accordion-panel { padding-left: 20px; }

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

    .footer-grid { grid-template-columns: 1fr; gap: 30px; padding: 48px 0 36px; }

    .whatsapp-float.plate-wa { right: 16px; bottom: 16px; padding: 11px 14px; }
    .wa-label { display: none; }
}

@media (max-width: 480px) {

    body { font-size: 16px; }

    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.4rem; }

    .container { padding: 0 18px; }

    .hero.yard-hero { padding: 44px 18px 118px; }
    .hero-frame.tapume { transform: none; }
    .asset-tag { left: -6px; font-size: .62rem; }

    .hazard-cta { max-width: 100%; }
    .hazard-stripe { width: 30px; }
    .hazard-text { font-size: .86rem; padding: 11px 12px; }

    .gates-row { gap: 24px; }

    .crate { padding: 20px 16px 22px; }
    .crate-num { font-size: 2rem; }

    .meters { grid-template-columns: 1fr; }

    .scale-controls input { min-width: 0; width: 100%; }
    .scale-controls button { width: 100%; }

    .waybill { padding: 24px 18px 28px; }

    .eyebrow.stencil-label { font-size: .72rem; }

    .footer-bottom p { font-size: .64rem; }
}