/* --- CELULARES (Telas menores que 768px) --- */
@media (max-width: 767px) {
    /* 1. ESCONDE O MENU DE NAVEGAÇÃO DO DESKTOP */
    /* Este era o principal causador da quebra de layout */
    .header-loja .container > .maiusculo.pd15 {
        display: none;
    }

    /* 2. USA FLEXBOX PARA ALINHAR LOGO E BOTÃO CORRETAMENTE */
    .header-loja .container > .row {
        display: flex;
        justify-content: space-between; /* Joga um item para cada lado */
        align-items: center; /* Alinha verticalmente no centro */
        height: 100%;
    }

    /* 3. AJUSTA OS CONTAINERS DO LOGO E DO BOTÃO */
    .header-loja .col-xs-3,  /* Container do Logo */
    .header-loja .col-xs-8 {  /* Container do Botão */
        width: auto !important; /* Deixa a largura automática */
        float: none !important; /* Anula o float */
        margin-top: 0 !important; /* Anula a margem negativa */
    }

    /* 4. AJUSTA A APARÊNCIA DOS ELEMENTOS */
    .sustenta_header, .header-loja {
        height: 80px; /* Altura do cabeçalho no celular */
    }
    .header-loja img { /* O logo */
        height: 40px !important;
        margin-top: 0 !important; /* Remove margens desnecessárias */
        margin-bottom: 0 !important;
    }
    .header-loja .bt_grande { /* O botão */
        padding: 10px 8px;
        font-size: 11px;
    }

    /* O resto das correções que já funcionavam */
    .row .col-xs-12[style*="width:25%"] {
        width: 100% !important;
    }
    .detalhe-decorativo { display: none !important; }
    img[src="bg_mold3.png"] { margin-top: -150px; height: 150px; }
    .texto_enorme2 { font-size: 28px; }
    h1 { font-size: 22px; }
    #aniimated-thumbnials a { width: 50% !important; }
    .body_lightbox { width: 90% !important; left: 5% !important; margin-left: 0 !important; top: 50px !important; }



.fix {

    display: none;
}


.splash-left{
    width: auto !important;
    top: 0 !important;
    margin-top: 482px !important;
    float: left !important;
    position: absolute !important;
    left: -10px!important;
    max-height: 100px !important;
}

.splash-right{
    width: auto!important;
    top: 0!important;
    margin-top: 455px!important;
    float: right!important;
    position: absolute!important;
    right: -100px!important;
    max-width: 200px!important;
}  

.flickity-viewport{
    width: 800px !important;
}

/* .negrito_light{
    font-size : 18px !important;
    font-weight: bold !important;
} */

}


/* --- TABLETS (Telas de 768px a 991px) --- */
@media (min-width: 768px) and (max-width: 991px) {
    /* Restaura o menu desktop para tablets */
    .header-loja .container > .maiusculo.pd15 {
        display: block;
        text-align: center;
    }
    .header-loja .container > .maiusculo.pd15 a {
        margin: 0 8px !important; /* Diminui o espaçamento dos links */
    }
    .row .col-xs-12[style*="width:25%"] { width: 50% !important; }
    .detalhe-decorativo { display: none !important; }
    #aniimated-thumbnials a { width: 33.33% !important; }
}

/* --- DESKTOPS (Telas de 992px ou mais) --- */
@media (min-width: 992px) {
    /* Restaura o menu desktop completamente */
    .header-loja .container > .maiusculo.pd15 {
        display: block;
    }
    .row .col-xs-12[style*="width:25%"] {
        width: 25% !important;
    }
}

/* --- AJUSTE FINO PARA MENU EM TELAS MUITO PEQUENAS --- */
@media (max-width: 500px) {
    /* Esconde o menu de navegação do desktop (reforçando a regra) */
    /* .header-loja .container > .maiusculo.pd15 {
        display: none !important;
    } */
    
    /* Se você decidir MOSTRAR o menu em vez de escondê-lo, use o código abaixo e apague o de cima */
    
    .header-loja .container.maiusculo.pd15 > div {
        display: flex;
        flex-direction: line; 
        align-items: center;  
        padding-top: 10px;
        justify-content: space-around;
        width: 100%;
    }
    .header-loja .container.maiusculo.pd15 a {
        margin: 5px 0 !important; 
        font-size: 13px; 
    }
    .sustenta_header, .header-loja {
        height: auto; 
        padding-bottom: 15px;
    }
   
}


/* .negrito_light{
    font-size : 18px !important;
    font-weight: bold !important;
} */