/* =========================================================
   RESPONSIVE — AXIS TRANSPORTE
   ========================================================= */

/* NOTEBOOK / TABLET */
@media (max-width: 1100px) {
    :root {
        --container-gutter: 32px;
        --section-space: 96px;
    }

    .header__nav { gap: 22px; }
    .header__brand img { width: 215px; }

    .solutions__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .service-card:nth-child(3) { border-left: 1px solid #555; }

    .fleet__layout {
        grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
        gap: 48px;
    }

    .fleet__content h2 { font-size: clamp(3rem, 4.5vw, 4.5rem); }

    .solutions__footer {
        grid-template-columns: 1fr;
        gap: 26px;
    }
    .solutions__footer > div {
        grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
    }
}

/* TABLET / MENU MOBILE */
@media (max-width: 900px) {
    :root {
        --header-height: 82px;
        --container-gutter: 28px;
        --section-space: 84px;
    }

    .header { background: #242224; }

    .header__container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        height: var(--header-height);
    }

    .header__brand {
        position: relative;
        z-index: 120;
        flex: 0 1 auto;
        min-width: 0;
    }

    .header__brand img {
        width: min(215px, 48vw);
        max-width: 100%;
        height: auto;
    }

    .header__toggle {
        position: relative;
        z-index: 120;
        display: block;
        flex: 0 0 auto;
        margin-left: auto;
    }

    .header__nav {
        position: fixed;
        inset: 0;
        z-index: 110;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: safe center;
        gap: 0;
        width: 100%;
        height: 100vh;
        height: 100dvh;
        padding: calc(var(--header-height) + 24px) var(--container-gutter) 32px;
        background: #242224;
        overflow-y: auto;
        visibility: hidden;
        pointer-events: none;
        transform: translateX(100%);
        transition: transform 350ms ease, visibility 350ms ease;
    }

    .header__nav.is-open {
        visibility: visible;
        pointer-events: auto;
        transform: translateX(0);
    }

    .header__menu-label {
        display: block;
        margin-bottom: 14px;
        color: var(--color-orange);
        font-size: 0.65rem;
        font-weight: 900;
        letter-spacing: 0.18em;
        text-transform: uppercase;
    }

    .header__nav-number {
        display: inline-block;
        flex: 0 0 24px;
        color: var(--color-orange);
        font-size: 0.65rem;
        font-weight: 900;
        letter-spacing: 0;
    }

    .header__nav > a:not(.button) {
        display: flex;
        align-items: center;
        gap: 18px;
        width: 100%;
        min-height: 60px;
        padding: 10px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
        color: var(--color-white);
        font-size: clamp(1.2rem, 4vw, 1.7rem);
        font-weight: 900;
        letter-spacing: -0.03em;
    }

    .header__nav > a:not(.button)::after { display: none; }
    .header__nav > a:not(.button):hover { color: var(--color-orange); }

    .header__nav > .button {
        display: inline-flex;
        width: 100%;
        min-height: 60px;
        margin-top: 26px;
        padding: 16px 20px;
        justify-content: space-between;
        text-align: left;
        font-size: 0.8rem;
        letter-spacing: 0.06em;
    }

    .hero { min-height: 760px; }

    .hero__background {
        background:
            linear-gradient(90deg, rgba(16, 16, 17, 0.94), rgba(16, 16, 17, 0.52)),
            url("../Assets/hero-axis-truck.jpg") 62% center / cover no-repeat;
    }

    .hero__content { width: 100%; min-width: 0; }
    .hero__title {
        max-width: 100%;
        font-size: clamp(2.8rem, 8vw, 5rem);
        line-height: 0.98;
        overflow-wrap: normal;
    }

    .about__grid,
    .fleet__layout,
    .cta__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 48px;
    }

    .solutions__heading {
        flex-direction: column;
        align-items: flex-start;
        gap: 28px;
    }

    .solutions__footer > div {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }
    .solutions__footer-link { white-space: normal; }

    .fleet__visual { min-height: 520px; }

    .differentials__heading {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }

    .differentials__panel { grid-template-columns: minmax(0, 1fr); }

    .differential-card {
        min-height: 300px;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    }
    .differential-card:last-child { border-bottom: 0; }
    .differential-card h3 { margin-top: 70px; }

    .footer__main {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 52px;
    }
    .footer__brand { grid-column: 1 / -1; }
    .footer__bottom {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }
    .footer__bottom span:last-child { text-align: left; }
}

/* MOBILE */
@media (max-width: 620px) {
    :root {
        --header-height: 72px;
        --container-gutter: 20px;
        --section-space: 72px;
    }

    .header__brand img { width: min(170px, 48vw); }

    .header__nav {
        padding: calc(var(--header-height) + 20px) var(--container-gutter) 28px;
    }
    .header__nav > a:not(.button) { min-height: 54px; }

    .hero { min-height: 740px; }
    .hero__container { padding-bottom: 132px; }
    .hero__title {
        font-size: clamp(2.25rem, 10vw, 3.5rem);
        letter-spacing: -0.045em;
    }
    .hero__description { max-width: 100%; font-size: 0.95rem; }
    .hero__actions {
        flex-direction: column;
        align-items: stretch;
        max-width: 340px;
    }

    .hero__strip-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px 16px;
        min-height: 104px;
        padding-block: 16px;
    }
    .hero__strip span {
        min-width: 0;
        min-height: auto;
        padding: 0;
        border-right: 0;
        font-size: 0.65rem;
    }

    .section-heading h2,
    .fleet__content h2,
    .differentials__heading h2 {
        font-size: clamp(2.25rem, 10vw, 3.4rem);
        overflow-wrap: break-word;
    }
    .about__lead { font-size: 1.2rem; }

    .solutions__grid { grid-template-columns: minmax(0, 1fr); }
    .service-card,
    .service-card:nth-child(3) {
        min-height: 260px;
        border-left: 1px solid #555;
    }
    .service-card__icon { margin: 34px 0 22px; }

    .fleet__top { align-items: flex-start; gap: 20px; }
    .fleet__section-number { text-align: right; }
    .fleet__content { padding-block: 0; }
    .fleet__description { margin-top: 26px; }
    .fleet__types { grid-template-columns: minmax(0, 1fr); margin-top: 30px; }
    .fleet__types > div:nth-child(odd) { margin-right: 0; }
    .fleet__visual { min-height: 360px; }
    .fleet__accent { top: -12px; left: -12px; width: 62px; height: 62px; }
    .fleet__image-caption { min-width: 185px; padding: 18px 22px; }

    .cta { padding-block: 72px; }
    .cta h2 { font-size: clamp(2.35rem, 10vw, 4rem); overflow-wrap: break-word; }
    .cta .button { width: 100%; min-width: 0; }

    .footer__main {
        grid-template-columns: minmax(0, 1fr);
        gap: 42px;
        padding-bottom: 52px;
    }
    .footer__brand { grid-column: auto; }
    .footer__contact > a[href^="mailto:"] { overflow-wrap: anywhere; }
}

/* MOBILE PEQUENO */
@media (max-width: 420px) {
    :root { --container-gutter: 16px; }
    .header__brand img { width: min(150px, 46vw); }
    .hero__title { font-size: clamp(2.1rem, 9.5vw, 3rem); }
    .fleet__top { flex-direction: column; }
    .fleet__section-number { text-align: left; }
    .fleet__visual { min-height: 320px; }
    .fleet__image-caption { min-width: 165px; padding: 16px 18px; }
    .footer__logo { width: 210px; }
}

/* ACESSIBILIDADE */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .header__nav { transition: none; }
}