/* =======================================
   MOBILE RESPONSIVO - COUNTBUS
   ======================================= */

@media (max-width: 768px) {

    /* ================= HEADER ================= */

    header {
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 1000;
    }

    body {
        padding-top: 80px;
    }

    .nav-row {
        justify-content: space-between;
        align-items: center;
    }

    .brand-logo {
        height: 35px;
    }

    /* ================= HAMBURGER ================= */

    .menu-toggle {
        display: block;
        font-size: 1.8rem;
        cursor: pointer;
        color: var(--text-main);
        background: none;
        border: none;
    }

    /* ================= NAV LINKS ================= */

    .nav-links {
        position: fixed;
        top: 70px;
        right: -100%;
        width: 70%;
        height: calc(100vh - 70px);
        background: var(--surface-color);
        flex-direction: column;
        padding: 2rem;
        gap: 1.5rem;
        transition: right 0.3s ease;
        display: flex;
        z-index: 999;
    }

    .nav-links.active {
        right: 0;
    }

    .nav-links a {
        font-size: 1.2rem;
    }

    /* ================= HERO ================= */

    .hero {
        height: auto;
        padding: 4rem 1rem 3rem;
    }

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

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

    .hero-btns {
        flex-direction: column;
        gap: 1rem;
    }

    .btn {
        width: 100%;
    }

    /* ================= GRID FIX ================= */

    .problem-solution-grid,
    .about-content,
    .event-block,
    .event-block.reverse {
        grid-template-columns: 1fr;
    }

    .event-block.reverse {
        grid-template-columns: 1fr;
    }

    .about-image {
        display: none;
    }

    .problem-result,
    .solution-conclusion {
        display: none !important;
    }

    /* ================= EVENTOS FIX REAL ================= */

    /* REMOVE QUALQUER LIXO QUE QUEBRA LAYOUT */
    .event-gallery1,
    .event-gallery2 {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    /* MOSTRA TODAS AS IMAGENS */
    .event-gallery1 img,
    .event-gallery2 img {
        display: block !important;
        width: 100%;
        height: auto;
        object-fit: cover;
    }

    /* REMOVE ESSA REGRA BUGADA (IMPORTANTE) */
    .event-gallery1 img:nth-child(1),
    .event-gallery2 img:nth-child(1) {
        display: none !important;
    }

    .event-block,
    .event-block.reverse {
        display: flex;
        flex-direction: column;
    }

    /* ================= HOW ================= */

    .how-container {
        flex-direction: column;
    }

    .how-step {
        margin-left: 1.5rem;
        padding: 1.5rem;
    }

    .step-label {
        font-size: 1.2rem;
        word-break: break-word;
    }

    .step-sub {
        font-size: 1rem;
    }

    .process-image {
        width: 100%;
    }

    /* ================= CARDS ================= */

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

    .cards-grid .card:nth-child(n+6) {
        display: none;
    }

    /* ================= FOOTER ================= */

    .footer-wrapper {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}