/* =========================================================
   MOBILE.CSS
   Ajustes exclusivos para celulares e telas pequenas
   NÃO altera o layout desktop
========================================================= */


/* =========================================================
   SEGURANÇA GERAL
========================================================= */

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

img {
    max-width: 100%;
}


/* =========================================================
   TABLET / CELULAR
========================================================= */

@media (max-width: 768px) {


    /* =====================================================
       NAVBAR
    ===================================================== */

    .navbar {
        width: 100%;
        min-height: 52px;
        padding: 8px 12px;
        box-sizing: border-box;

        display: flex;
        align-items: center;
        justify-content: space-between;

        gap: 8px;
    }

    .toggle-sidebar {
        flex-shrink: 0;
    }

    .nav-logo {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);

        display: flex;
        align-items: center;
        justify-content: center;
    }

    .nav-logo img {
        max-width: 48px;
        max-height: 42px;
        object-fit: contain;
    }

    .nav-whatsapp {
        margin-left: auto;
        white-space: nowrap;

        font-size: 11px;
    }


    /* =====================================================
       HERO / CABEÇALHO
    ===================================================== */

    .topo {
        width: 100%;
        box-sizing: border-box;

        padding: 28px 16px 24px;

        text-align: center;
    }

    .topo .logo {
        margin-bottom: 12px;
    }

    .topo .logo img {
        width: 80px;
        max-width: 80px;
        height: auto;
    }

    .topo h1 {
        font-size: 30px;
        line-height: 1.15;

        margin: 8px 0;
    }

    .topo > p {
        font-size: 13px;
        line-height: 1.5;

        margin: 0 auto 22px;
        max-width: 320px;
    }


    /* =====================================================
       ESTATÍSTICAS DO TOPO
    ===================================================== */

    .estatisticas {
        width: 100%;
        max-width: 360px;

        margin: 0 auto;

        display: grid;
        grid-template-columns: repeat(3, 1fr);

        gap: 8px;
    }

    .estatisticas .info {
        min-width: 0;
        width: 100%;

        box-sizing: border-box;

        padding: 16px 6px;
    }

    .estatisticas .info span {
        font-size: 20px;
    }

    .estatisticas .info small {
        font-size: 9px;
    }


    /* =====================================================
       BANNER
    ===================================================== */

    .hero {
        width: 100%;
        box-sizing: border-box;

        padding: 0;
    }

    .banner-principal {
        width: 100%;
        min-height: auto;

        box-sizing: border-box;

        display: flex;
        flex-direction: column;

        padding: 32px 20px 28px;

        border-radius: 18px 18px 0 0;

        overflow: hidden;
    }


    /* =====================================================
       CONTEÚDO DO BANNER
    ===================================================== */

    .banner-info {
        width: 100%;
        max-width: 100%;

        box-sizing: border-box;

        display: flex;
        flex-direction: column;
        align-items: flex-start;

        text-align: left;
    }

    .banner-tag {
        max-width: 100%;

        font-size: 10px;

        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .banner-info h2,
    #bannerTitulo {
        width: 100%;

        font-size: 32px;
        line-height: 1.08;

        margin: 14px 0 10px;

        word-break: normal;
        overflow-wrap: anywhere;
    }

    .banner-info p,
    #bannerDescricao {
        width: 100%;

        font-size: 13px;
        line-height: 1.45;

        margin-bottom: 18px;

        overflow-wrap: anywhere;
    }


    /* =====================================================
       BOTÕES DO BANNER
    ===================================================== */

    .bannerAbrir,
    #bannerAbrir {
        max-width: 100%;

        min-height: 48px;

        padding: 12px 20px;

        box-sizing: border-box;

        white-space: nowrap;
    }

    .bannerAnterior,
    .bannerProximo,
    #bannerAnterior,
    #bannerProximo {
        min-width: 30px;
        min-height: 30px;
    }


    /* =====================================================
       ÁREA DA IMAGEM DO BANNER
    ===================================================== */

    .banner-imagem {
        width: 100%;
        max-width: 100%;

        margin: 22px 0 0;

        display: flex;
        justify-content: center;
        align-items: center;

        box-sizing: border-box;
    }

    .banner-imagem img,
    #bannerImagem {
        display: block;

        width: 100%;
        max-width: 320px;

        height: auto;

        max-height: 330px;

        object-fit: cover;

        border-radius: 18px;
    }


    /* =====================================================
       INDICADORES
    ===================================================== */

    #bannerIndicadores,
    .banner-indicadores {
        max-width: 100%;

        display: flex;
        flex-wrap: nowrap;

        justify-content: center;
        align-items: center;

        gap: 5px;

        overflow: hidden;

        margin-top: 14px;
    }

    #bannerIndicadores span,
    .banner-indicadores span {
        flex: 0 0 auto;

        width: 7px;
        height: 7px;
    }


    /* =====================================================
       PESQUISA
    ===================================================== */

    .pesquisa {
        width: 100%;
        box-sizing: border-box;

        padding: 16px 12px;
    }

    .barra-filtros {
        width: 100%;

        display: flex;

        gap: 8px;

        overflow-x: auto;
        overflow-y: hidden;

        padding: 4px 2px 10px;

        box-sizing: border-box;

        scrollbar-width: none;

        -webkit-overflow-scrolling: touch;
    }

    .barra-filtros::-webkit-scrollbar {
        display: none;
    }

    .barra-filtros .filtro {
        flex: 0 0 auto;

        white-space: nowrap;

        min-height: 42px;

        padding: 10px 16px;

        font-size: 12px;
    }

    .pesquisa-box {
        width: 100%;
        box-sizing: border-box;
    }

    .pesquisa-box input {
        width: 100%;
        box-sizing: border-box;

        min-height: 46px;

        font-size: 14px;
    }


    /* =====================================================
       NOVIDADES
    ===================================================== */

    .pagina {
        width: 100%;
        max-width: 100%;

        box-sizing: border-box;

        overflow: hidden;
    }

    .pagina-header {
        padding: 20px 16px;
    }

    .pagina-header h1 {
        font-size: 24px;
        line-height: 1.2;
    }

    .pagina-header p {
        font-size: 13px;
        line-height: 1.5;
    }


    /* =====================================================
       CARROSSEL
    ===================================================== */

    #listaNovidades {
        max-width: none;

        touch-action: pan-y;

        will-change: transform;
    }

    .card {
        flex-shrink: 0;
    }


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

    .container,
    main,
    section {
        max-width: 100%;
        box-sizing: border-box;
    }


    /* =====================================================
       ESTATÍSTICAS / PAINÉIS INTERNOS
       Evita cards de desktop saírem da tela
    ===================================================== */

    .estatisticas-niveis,
    .nivel-estatisticas,
    .cards-estatisticas,
    .estatisticas-grid {
        width: 100%;
        max-width: 100%;

        box-sizing: border-box;

        display: grid;

        grid-template-columns: repeat(3, minmax(0, 1fr));

        gap: 8px;
    }

    .estatisticas-niveis > *,
    .nivel-estatisticas > *,
    .cards-estatisticas > *,
    .estatisticas-grid > * {
        min-width: 0;
        max-width: 100%;

        box-sizing: border-box;
    }


    /* =====================================================
       QUALQUER GRID DE 3 COLUNAS
       Impede estouro horizontal
    ===================================================== */

    .grid {
        max-width: 100%;
        box-sizing: border-box;
    }


    /* =====================================================
       MODAL
       Não deixa o conteúdo ultrapassar o celular
    ===================================================== */

    .modal,
    #modalReceita {
        box-sizing: border-box;

        width: 100%;
        max-width: 100%;

        padding: 12px;
    }

    .modal-conteudo,
    .modal-content {
        width: 100%;
        max-width: 100%;

        max-height: calc(100vh - 24px);

        box-sizing: border-box;

        overflow: hidden;
    }

    .modal-conteudo iframe,
    .modal-content iframe,
    #iframeReceita {
        width: 100%;
        max-width: 100%;

        box-sizing: border-box;
    }


    /* =====================================================
       BOTÕES
    ===================================================== */

    button {
        max-width: 100%;
        box-sizing: border-box;
    }


    /* =====================================================
       PREVENÇÃO CONTRA ELEMENTOS ABSOLUTOS
       SAINDO DA TELA
    ===================================================== */

    .hero *,
    .topo *,
    .pesquisa *,
    .pagina {
        max-width: 100%;
    }

}


/* =========================================================
   CELULARES PEQUENOS
========================================================= */

@media (max-width: 390px) {

    .topo {
        padding-left: 12px;
        padding-right: 12px;
    }

    .topo h1 {
        font-size: 27px;
    }

    .nav-whatsapp {
        font-size: 9px;
    }

    .estatisticas {
        gap: 6px;
    }

    .estatisticas .info {
        padding: 13px 4px;
    }

    .estatisticas .info span {
        font-size: 18px;
    }

    .estatisticas .info small {
        font-size: 8px;
    }

    .banner-principal {
        padding: 26px 16px 24px;
    }

    .banner-info h2,
    #bannerTitulo {
        font-size: 28px;
    }

    .banner-info p,
    #bannerDescricao {
        font-size: 12px;
    }

    .banner-imagem img,
    #bannerImagem {
        max-width: 280px;
        max-height: 290px;
    }

}


/* =========================================================
   CELULARES MUITO PEQUENOS
========================================================= */

@media (max-width: 340px) {

    .nav-whatsapp {
        display: none;
    }

    .nav-logo {
        position: static;

        transform: none;

        margin: 0 auto;
    }

    .estatisticas {
        gap: 4px;
    }

    .estatisticas .info span {
        font-size: 17px;
    }

    .banner-info h2,
    #bannerTitulo {
        font-size: 25px;
    }

    .banner-imagem img,
    #bannerImagem {
        max-width: 250px;
    }

}
/* =========================================================
   SIDEBAR MOBILE — CORREÇÃO
========================================================= */

@media (max-width: 768px) {

    /* SIDEBAR FECHADA */

    .sidebar {
        position: fixed !important;

        top: 0 !important;
        left: 0 !important;

        width: 280px !important;
        max-width: 82vw !important;
        height: 100vh !important;

        z-index: 10001 !important;

        box-sizing: border-box;

        overflow-y: auto;
        overflow-x: hidden;

        transform: translateX(-100%) !important;

        transition:
            transform 0.3s ease !important;
    }


    /* SIDEBAR ABERTA */

    .sidebar.aberta {
        transform: translateX(0) !important;
    }


    /* OVERLAY */

    .sidebar-overlay {
        position: fixed !important;

        top: 0 !important;
        left: 0 !important;

        width: 100vw !important;
        height: 100vh !important;

        z-index: 10000 !important;

        background: rgba(0, 0, 0, 0.45);

        opacity: 0;
        visibility: hidden;

        pointer-events: none;

        transition:
            opacity 0.3s ease,
            visibility 0.3s ease;
    }


    /* OVERLAY ATIVO */

    .sidebar-overlay.ativo {
        opacity: 1 !important;

        visibility: visible !important;

        pointer-events: auto !important;
    }


    /* BOTÃO DO MENU */

    .toggle-sidebar {
        position: relative;

        z-index: 10002 !important;
    }

}