```
/* ==========================================================
   MAKETBUS
   Experiência mobile

   Este arquivo é carregado depois dos estilos existentes.
   Todas as alterações ficam restritas a telas de até 900px.
   ========================================================== */

.menu-mobile-botao,
.menu-mobile-fundo{
    display:none;
}

@media(max-width:900px){

    html{
        scroll-padding-top:70px;
    }

    body{
        overflow-x:hidden;
    }

    body.menu-mobile-aberto{
        overflow:hidden;
    }

    .topo{
        position:sticky;
        top:0;
        z-index:1200;
        display:grid;
        grid-template-columns:44px minmax(0, 1fr) auto;
        width:100%;
        height:60px;
        min-height:60px;
        padding:0 14px;
        gap:10px;
        flex-wrap:nowrap;
    }

    .logo{
        min-width:0;
        font-size:21px;
        line-height:1;
    }

    .topo-usuario{
        min-width:0;
        overflow:hidden;
        font-size:13px;
        text-align:right;
        text-overflow:ellipsis;
        white-space:nowrap;
    }

    .menu-mobile-botao{
        display:flex;
        align-items:center;
        justify-content:center;
        flex-direction:column;
        width:44px;
        height:44px;
        padding:0;
        gap:5px;
        border:1px solid #cbd5e1;
        border-radius:9px;
        background:#f1f5f9;
        cursor:pointer;
        -webkit-tap-highlight-color:transparent;
    }

    .menu-mobile-botao span{
        display:block;
        width:21px;
        height:2px;
        border-radius:999px;
        background:#1e3a8a;
        transition:
            transform .2s ease,
            opacity .2s ease;
    }

    .menu-mobile-aberto .menu-mobile-botao span:nth-child(1){
        transform:translateY(7px) rotate(45deg);
    }

    .menu-mobile-aberto .menu-mobile-botao span:nth-child(2){
        opacity:0;
    }

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

    .menu-mobile-botao:focus-visible,
    .menu a:focus-visible{
        outline:3px solid var(--brand-400, #60a5fa);
        outline-offset:2px;
    }

    .container{
        display:block;
        min-height:calc(100vh - 60px);
    }

    .menu{
        position:fixed;
        top:60px;
        bottom:0;
        left:0;
        z-index:1150;
        display:block;
        width:min(84vw, 320px);
        height:calc(100dvh - 60px);
        padding:10px 0 24px;
        overflow-y:auto;
        overscroll-behavior:contain;
        box-shadow:8px 0 24px rgba(0, 0, 0, .24);
        transform:translateX(-105%);
        visibility:hidden;
        transition:
            transform .22s ease,
            visibility .22s ease;
    }

    .menu-mobile-aberto .menu{
        transform:translateX(0);
        visibility:visible;
    }

    .menu ul{
        display:block;
    }

    .menu li{
        display:block;
        width:100%;
        margin:0;
    }

    .menu a{
        display:flex;
        align-items:center;
        width:100%;
        min-height:50px;
        padding:13px 20px;
        border-bottom:1px solid var(--border, #e2e8f0);
        font-size:15px;
    }

    .menu-link-contador{
        display:flex !important;
    }

    .menu-mobile-fundo{
        position:fixed;
        inset:60px 0 0;
        z-index:1100;
        display:block;
        width:100%;
        height:calc(100dvh - 60px);
        padding:0;
        border:0;
        background:rgba(15, 23, 42, .58);
        opacity:0;
        visibility:hidden;
        cursor:pointer;
        transition:
            opacity .22s ease,
            visibility .22s ease;
    }

    .menu-mobile-aberto .menu-mobile-fundo{
        opacity:1;
        visibility:visible;
    }

    main{
        width:100%;
        padding:16px;
    }

    img,
    video{
        max-width:100%;
    }

    input,
    select,
    textarea,
    button{
        font-size:16px;
    }

    input,
    select,
    textarea{
        min-height:44px;
    }

    textarea{
        min-height:110px;
    }

    input[type="file"]{
        display:block;
        width:100%;
        min-width:0;
        max-width:100%;
        min-height:46px;
        padding:5px;
        overflow:hidden;
        font-size:13px;
        line-height:34px;
        text-overflow:ellipsis;
        white-space:nowrap;
    }

    input[type="file"]::file-selector-button{
        min-height:34px;
        margin-right:8px;
        padding:6px 10px;
        border:0;
        border-radius:6px;
        background:#e8eef6;
        color:#1f2937;
        font:inherit;
        font-weight:600;
        cursor:pointer;
    }

    .btn,
    button,
    input[type="submit"]{
        min-height:44px;
    }

    .card,
    .form-container{
        padding:16px;
        border-radius:10px;
    }

    /* Comunidade */

    .comunidade-banner{
        margin:0 0 10px;
        overflow:hidden;
        border-radius:9px;
    }

    .comunidade-banner img{
        display:block;
        width:100%;
        height:auto;
        max-height:none;
        object-fit:contain;
    }

    .comunidade-busca{
        margin:0 0 14px;
    }

    .comunidade-busca-formulario{
        grid-template-columns:minmax(0, 1fr);
        grid-template-areas:
            "busca"
            "filtros"
            "controles";
        gap:9px;
        padding:10px;
    }

    .comunidade-busca-campo input[type="search"]{
        min-height:46px;
        margin:0;
    }

    .comunidade-busca-controles{
        align-items:stretch;
        flex-direction:column;
        width:100%;
        gap:8px;
    }

    .comunidade-busca-controles .comunidade-ordenacao,
    .comunidade-busca-controles .form-acoes,
    .comunidade-busca-controles .comunidade-ordenacao select{
        width:100%;
        max-width:none;
        margin:0;
    }

    .comunidade-busca-controles .form-acoes .btn{
        width:100%;
        min-height:44px;
    }

    .comunidade-filtros-avancados summary{
        min-height:44px;
        padding:9px 10px;
    }

    .comunidade-filtros-avancados .comunidade-filtros{
        grid-template-columns:minmax(0, 1fr);
        padding:10px;
        gap:10px;
    }

    .comunidade-filtro select{
        margin:0;
    }

    .comunidade-conteudo{
        margin-top:12px;
    }

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

    .comunidade-miniatura-card{
        width:100%;
        max-width:560px;
        margin:0 auto;
    }

    .comunidade-miniatura-foto{
        aspect-ratio:16 / 10;
    }

    .comunidade-miniatura-conteudo{
        padding:13px;
    }

    .comunidade-indicadores{
        margin-left:-13px;
        margin-right:-13px;
    }

    .comunidade-paginacao{
        grid-template-columns:1fr;
        gap:10px;
    }

    .comunidade-paginacao-lado,
    .comunidade-paginacao-direita,
    .comunidade-paginacao-centro{
        justify-content:center;
        text-align:center;
    }

    /* Minha Coleção */

    .colecao-resumo{
        grid-template-columns:repeat(3, minmax(0, 1fr));
        gap:8px;
        margin-bottom:14px;
    }

    .colecao-resumo .dashboard-card{
        min-height:0;
        margin:0;
        padding:12px 6px;
        border-radius:9px;
    }

    .colecao-resumo .dashboard-card:hover{
        transform:none;
    }

    .colecao-resumo .dashboard-card .numero{
        font-size:29px;
        line-height:1;
    }

    .colecao-resumo .dashboard-card .titulo{
        margin-top:6px;
        font-size:12px;
        line-height:1.2;
    }

    .colecao-acoes.form-acoes{
        display:grid;
        grid-template-columns:repeat(2, minmax(0, 1fr));
        align-items:stretch;
        gap:8px;
        margin:0;
    }

    .colecao-acoes.form-acoes .btn{
        display:flex;
        align-items:center;
        justify-content:center;
        width:100%;
        min-width:0;
        min-height:44px;
        padding:9px 8px;
        font-size:13px;
        line-height:1.2;
        text-align:center;
    }

    .colecao-acoes + hr{
        margin:18px 0;
    }

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

    .miniatura-card{
        min-height:0;
        padding:13px;
    }

    .miniatura-thumb{
        height:auto;
        aspect-ratio:16 / 10;
        object-fit:cover;
    }

    .miniatura-card h3{
        margin-top:11px;
    }

    .miniatura-card .btn{
        width:100%;
        margin-top:14px;
        text-align:center;
    }

    /* Meu Painel */

    .painel-inicial h1{
        margin-bottom:5px;
    }

    .painel-inicial > .subtitulo{
        margin-bottom:14px;
        font-size:15px;
    }

    .painel-resumo{
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap:8px;
        margin-bottom:14px;
    }

    .painel-resumo .dashboard-card{
        min-height:0;
        margin:0;
        padding:14px 8px;
        border-radius:9px;
    }

    .painel-resumo .dashboard-card:hover{
        transform:none;
    }

    .painel-resumo .dashboard-card .numero{
        font-size:31px;
        line-height:1;
    }

    .painel-resumo .dashboard-card .titulo{
        margin-top:6px;
        font-size:12px;
        line-height:1.2;
    }

    .painel-inicial > .card{
        margin-bottom:10px;
        padding:14px;
    }

    .painel-inicial > .card h3{
        margin-bottom:8px;
        font-size:17px;
    }

    .painel-inicial > .card ul{
        padding-left:20px;
    }

    /* Perfil Público */

    .perfil-publico-header{
        display:grid;
        grid-template-columns:76px minmax(0, 1fr);
        align-items:center;
        gap:12px;
        margin-bottom:16px;
        padding:12px;
    }

    .perfil-publico-avatar{
        display:flex;
        align-items:center;
        justify-content:center;
    }

    .perfil-publico-avatar .avatar{
        width:76px;
        height:76px;
        margin:0;
        border-width:3px;
    }

    .perfil-publico-identidade{
        min-width:0;
    }

    .perfil-publico-identidade h2{
        margin:0 0 5px;
        overflow:hidden;
        font-size:19px;
        text-overflow:ellipsis;
        white-space:nowrap;
    }

    .perfil-publico-identidade > .subtitulo{
        margin:0 0 8px;
        font-size:13px;
        line-height:1.35;
    }

    .perfil-publico-estatisticas{
        display:flex;
        flex-wrap:wrap;
        gap:6px;
    }

    .perfil-publico-estatistica{
        display:inline-flex;
        align-items:center;
        gap:4px;
        padding:5px 8px;
        border-radius:999px;
        background:#eef3f8;
        color:#46576a;
        font-size:12px;
        line-height:1;
    }

    .perfil-publico-estatistica .numero{
        color:#1565c0;
        font-weight:700;
    }

    .perfil-publico-estatistica .titulo{
        margin:0;
    }

    .perfil-publico-header + h2{
        margin-bottom:10px;
    }

    /* Meu Perfil */

    .perfil-privado-card{
        padding:13px;
    }

    .perfil-privado-card > h2{
        margin-bottom:10px;
        font-size:19px;
    }

    .perfil-privado-card > .card-conteudo{
        display:grid;
        grid-template-columns:84px minmax(0, 1fr);
        align-items:start;
        gap:13px;
        margin-top:0;
    }

    .perfil-privado-card .perfil-header{
        min-width:0;
        text-align:center;
    }

    .perfil-privado-card .perfil-header .avatar{
        width:76px;
        height:76px;
        margin:0 auto 7px;
        border-width:3px;
    }

    .perfil-privado-card .perfil-header h2{
        margin:0;
        overflow:hidden;
        font-size:15px;
        line-height:1.2;
        text-overflow:ellipsis;
        white-space:nowrap;
    }

    .perfil-privado-card .perfil-dados{
        min-width:0;
        margin:0;
    }

    .perfil-privado-card .perfil-dados p{
        margin:0 0 7px;
        overflow-wrap:anywhere;
        font-size:13px;
        line-height:1.35;
    }

    .perfil-privado-card .perfil-dados p:last-child{
        margin-bottom:0;
    }

    .perfil-acoes{
        display:grid;
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap:8px;
        margin-top:10px;
    }

    .perfil-acoes .btn{
        display:flex;
        align-items:center;
        justify-content:center;
        width:100%;
        min-width:0;
        padding:9px 7px;
        font-size:13px;
        text-align:center;
    }
}

@media(max-width:480px){

    .topo{
        grid-template-columns:42px minmax(0, 1fr) auto;
        padding:0 10px;
        gap:8px;
    }

    .logo{
        font-size:19px;
        letter-spacing:.5px;
    }

    .topo-usuario{
        max-width:130px;
        font-size:12px;
    }

    main{
        padding:10px;
    }

    h1{
        margin-bottom:14px;
        font-size:24px;
    }

    h2{
        font-size:20px;
    }

    .card,
    .form-container{
        padding:13px;
    }

    .comunidade-cabecalho{
        display:grid;
        grid-template-columns:minmax(0, 1fr) auto;
        align-items:flex-start;
        gap:8px;
    }

    .comunidade-cabecalho h2{
        font-size:19px;
    }

    .comunidade-cabecalho .subtitulo{
        display:none;
    }

    .comunidade-filtros-avancados summary small{
        display:none;
    }

    .perfil-publico-header{
        grid-template-columns:68px minmax(0, 1fr);
        gap:10px;
        padding:11px;
    }

    .perfil-publico-avatar .avatar{
        width:68px;
        height:68px;
    }
}

@media(prefers-reduced-motion:reduce){

    .menu,
    .menu-mobile-fundo,
    .menu-mobile-botao span{
        transition:none !important;
    }
}
```