/* Alterações para o headerEvento */

.headerEvento .tituloEvento a,
.footerEvento .tituloEvento a{
    color: var(--corevento);    
}

.headerEvento .tituloEvento a:hover,
.footerEvento .tituloEvento a:hover{
    color: var(--coreventoc);
}

.headerEvento nav > a::before,
.headerEvento nav > a::after{
    background-color: var(--corevento);
}

.headerEvento nav > a svg{
    display: block;
}

.headerEvento nav > a svg *{
    stroke: var(--cinza128) !important;
}

.headerEvento nav > a:hover{
    color: var(--corevento);
}

.headerEvento nav > a:hover::before{
    height: 0.2rem;
}

.headerEvento nav > a:hover svg *{
    stroke: var(--corevento) !important;
}

.headerEvento .botaoMenu:hover > div{
    background-color: var(--corevento);
}

.headerEvento #fecharMenuHeader:hover{
    color: var(--corevento);    
}

.footerEvento nav > a:hover{
    color: var(--corevento);
}

#pagEventoAtiva{
    color: var(--corevento);
}

#pagEventoAtiva svg *{
    stroke: var(--corevento) !important;
}


/* --------------------------------- */


/* Geral */

.titulo{
    color: var(--corevento);    
}

.titulo svg *{
    stroke: var(--corevento);
}


/* --------------------------------- */


/* Banner Evento */

.bannerEvento{
    width: 100%;
    height: 100svh;
    background-color: var(--cinza40);
    position: relative;
}

.bannerEvento .imgBanner{
    transition: opacity 2s;
}

.bannerEvento .textos{
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    padding: 3rem 5%;
    z-index: 2;
}

.bannerEvento .fade{
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    z-index: 1;
    height: 80%;
    background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.7));
}

.bannerEvento .data{
    color: white;
}

.bannerEvento .nomes{
    margin: 0.3rem 0 0.5rem 0;
    color: var(--coreventocc);
}


/* --------------------------------- */


/* Seção Data */

.secData{
    container: secData / inline-size;
    position: relative;
}

.secData .divisao{
    display: flex;
    position: relative;
    gap: 2rem;
    z-index: 1;
}

.secData .divisao .divAgenda{
    width: 100%;
}

.divContagem{
    border-right: 1px solid var(--corborda);
    padding-right: 2rem;
}

.contagemRegressiva, .contagemRegressiva .l1, .contagemRegressiva .l2{
    display: flex;
    gap: 0.5rem;
}

.contagemRegressiva *{
    text-align: center;
}

.contagemRegressiva .quad{
    width: 6rem;
    padding: 1rem 0;
    border-radius: var(--radiuspadrao);
    box-shadow: var(--shadowpadrao);
    background-color: white;
}

.contagemRegressiva .numeral{
    color: var(--corevento);
}

.contagemRegressiva .inter{
    height: 6rem;
    display: flex;
    align-items: center;
    color: var(--cinza128);
}

.dadosAgenda{
    list-style: none;
    display: grid;  
    gap: 0.5rem;
    margin-top: 1rem;
}

.dadosAgenda li > span{
    color: var(--corevento);
}

.dadosAgenda .linhaLimite{
    border-top: 1px solid var(--corborda);
    margin-top: 0.2rem;
    padding-top: 0.7rem;
}

.dadosAgenda .linhaLimite span{
    color: var(--corevento);
}

@container secData (max-width: 1250px){

    .secData .divisao{
        flex-direction: column;
        gap: 1.5rem;
    }

    .divContagem{
        border-right: none;
        border-bottom: 1px solid var(--corborda);
        padding: 0 0 1.5rem 0;
    }

}

@container secData (max-width: 450px){

    .contagemRegressiva{
        flex-direction: column;
    }

    .contagemRegressiva > .inter{
        display: none;
    }

    .contagemRegressiva .quad{
        width: 50%;
    }

}


/* --------------------------------- */


/* Seção história */

.secHistoria{
    container: secHistoria / inline-size;
    box-shadow: var(--shadowpadraocima);
    background-color: var(--cinza250);
}

.secHistoria .divisao{
    display: flex;    
    align-items: flex-start;
    gap: 1.5rem;
    margin-top: 1rem;
}

.secHistoria .slides{
    padding: 0.5rem;
    box-shadow: var(--shadowpadrao);
    border-radius: var(--radiuspadrao);  
    background-color: white;  
}

.secHistoria .slidesh .slides{
    width: 50%;
    flex-shrink: 0;
}

.secHistoria .slidesv .slides{
    width: 34rem;
    flex-shrink: 0;
}

.secHistoria .historia p{
    margin-top: 0.5rem;
}

.secHistoria .slides .areaSlides{
    position: relative;
    width: 100%;    
    border-radius: var(--radiuspadrao);
    overflow: hidden;
    user-select: none; 
    touch-action: pan-y;
    background-color: var(--cinza245);   
}

.secHistoria .slidesh .areaSlides,
.secHistoria .slidesh .fila img{
    aspect-ratio: 1.6 / 1;
}

.secHistoria .slidesv .areaSlides,
.secHistoria .slidesv .fila img{
    aspect-ratio: 1 / 1.2;
}

.secHistoria .slides .fila{
    height: 100%;
    display: flex;
    align-items: flex-start;
    transition: transform 0.5s;
    user-select: none;
}

.secHistoria .slides .fila img{
    user-select: none;
}

.secHistoria .slides .contador{
    position: absolute;
    top: 1rem;
    right: 0;
    background-color: rgba(0,0,0,0.3);
    border-radius: var(--radiuspadrao) 0 0 var(--radiuspadrao);
    color: white;
    padding: 0.5rem;
    z-index: 1;
}

.secHistoria .slides .contador *{
    color: white;
}

.secHistoria .slides .desc{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 0.5rem;
    min-height:5.5rem;
}

.secHistoria .slides .areaLegenda *{
    text-align: center;    
}

.secHistoria .slides .legenda{
    color: var(--corevento);
}

.secHistoria .slides button{
    font-size: 1.5rem;
    padding: 0.5rem;
    display: flex;
    align-items: center;
}

.secHistoria .slides button svg{
    height: 1.2rem;
}

.secHistoria .slides button svg *{
    stroke: var(--cinza128);
    stroke-width: 12px;
}

.secHistoria .slides button:hover svg *{
    stroke: var(--corevento);
}

.secHistoria .slides .setaEsquerda{
    visibility: hidden;
}

@container secHistoria (max-width: 1200px){

    .secHistoria .slidesh .slides,
    .secHistoria .slidesv .slides{    
        width: 50%;
    }
}


@container secHistoria (max-width: 750px){

    .secHistoria .divisao{
        flex-direction: column;
        gap: 1rem;
    }

    .secHistoria .slidesh .slides,
    .secHistoria .slidesv .slides{    
        width: 100%;
    }
}

@container secHistoria (max-width: 450px){  

    .secHistoria .slides{
        padding: 0.5rem;
    }

    .secHistoria .slides .areaSlides{
        margin-bottom: 0.5rem;
    }

    .secHistoria .slides .desc{   
        gap: 0.5rem;
    }

    .secHistoria .slides .contador{
        transform-origin: right;
        transform: scale(85%);    
        top: 0.8rem;       
        padding: 0.2rem;
    }

    .secHistoria .slides button svg{
        height: 0.8rem;
    }
}


/* --------------------------------- */


/* Seção Presentes */

.secPresentes{ 
    box-shadow: var(--shadowinsetcima);    
}

.tracosFundo{
    background-image: url("../img/bases/tracosfundo.svg");
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

.secPresentes .compPresentes{
    margin: 1.5rem 0;
}

.pagPresentes .naoEncontrado,
.pagPresentes .btnCarregarMais{
    display: none;    
}


/* --------------------------------- */


/* Seção acomodações */

.secAcomodacoes{
    box-shadow: var(--shadowpadraocima);
    background-color: var(--cinza250);
}

.secAcomodacoes .componentesGrid{
    margin: 1.5rem 0;
    gap: 1rem 1.5rem;
}

.secAcomodacoes .componente{
    background-color: white;
    box-shadow: var(--shadowpadrao);
}

.secAcomodacoes .componente:hover{
    transform: scale(105%);
}

.secAcomodacoes .componente .imagem{
    width: 6rem;
    aspect-ratio: 1 / 1;
    flex-shrink: 0;
    border: 1px solid var(--corborda);
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.5s;
}

.secAcomodacoes .componente .endereco{
    margin: 0.3rem 0 0 0;
}

.secAcomodacoes .componente .mais{
    margin-top: 0.5rem;
    color: var(--cinza128);
}

.secAcomodacoes .componente .redes{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.7rem;
}

.secAcomodacoes .componente .rede{
    height: 1.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.5s;
}

.secAcomodacoes .componente .rede img{
    height: 100%;
}

.secAcomodacoes .componente .imagem:hover, 
.secAcomodacoes .componente .rede:hover{
    transform: scale(110%);
}

.secAcomodacoes .componente .voucher{
    border-top: 1px solid var(--corborda);
    margin-top: 1rem;
    padding-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.secAcomodacoes .componente .voucher P{
    font-size: 95%;
    color: var(--dourado);
}


/* --------------------------------- */


/* Seção Mural */

.secMural{
    box-shadow: var(--shadowinsetcima);  
}

.secMural .componentesGrid{
    margin: 1.5rem 0;
    gap: 2.5rem 1.5rem;
}

.secMural .componentesGrid > div:last-child{
    display: none;
}

.secMural .nota{
    margin-top: 0.5rem;
}

.secMural .componente{
    background-color: white;
    position: relative;
    padding: 1.5rem 1.5rem 5rem 1.5rem;
    position: relative;
    filter: drop-shadow(var(--shadowpadrao));
    border-radius: 15px;
}

.secMural .componente::before{
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 1.5rem 1.5rem 0 1.5rem;
    border-color: var(--cinza250) transparent transparent transparent;
    bottom: -1.4rem;
    right: 1.2rem;
    transform: skewX(40deg);    
}

.secMural .mensagem::before, .secMural .mensagem::after{
    content: '"';
    color: var(--cinza128);
}

.secMural .flutuante{
    position: absolute;
    left: 1.5rem;
    right: 1.5rem;
    bottom: 1.5rem;
    border-top: 1px solid var(--corborda);
    padding-top: 0.7rem;
}

.secMural .data{
    color: var(--cinza160);
    margin-top: 0.3rem;
}

.secMural .autor{    
    color: var(--ciano);
    display: inline-flex;
    align-items: center;
}

@container containerGrid (max-width: 1200px){

    .secMural .componentesGrid > div:last-child{
        display: block;
    }
    
}

@container containerGrid (max-width: 650px){

    .secMural .componente{
        padding: 1.5rem;
    }

    .secMural .flutuante{        
        position: static;        
        padding-top: 1rem;
        margin-top: 1rem;
    } 
}


/* --------------------------------- */


/* Página Presentes */

.pagPresentes .topo{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.pagPresentes .topo .direita{
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.pagPresentes .topo button{
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--azul);
    border-bottom: 1px solid var(--cianoc);
    padding-bottom: 0.5rem;
}

.pagPresentes .topo button span{
    color: var(--azul);
    transition: color 0.5s;
}

.pagPresentes .topo button svg{
    height: 1.2rem;
}

.pagPresentes .topo button svg *{
    stroke: var(--azul);
}

.pagPresentes .topo .botaoFiltrar{
    display: none;
}

.pagPresentes .titulo{
    margin: 0;
}

.pagPresentes .inputPesquisa{
    margin-bottom: 1.5rem;
}

.pagPresentes .linhaTags{
    display: none;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0;
}

.pagPresentes .linhaTags .tag{
    color: white;
    font-size: 90%;
    padding: 0.3rem;
    background-color: var(--azul);
    border-radius: var(--radiuspadrao);
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.pagPresentes .linhaTags .tag button{
    color: white;
    font-size: 90%;
}

.pagPresentes .linhaTags .tag button:hover{
    color: var(--douradoc);
}

.pagPresentes .areaDividida{
    display: grid;
    grid-template-columns: 20rem auto;
    gap: 1.5rem;
}

.pagPresentes .secFiltros{
    border-radius: var(--radiuspadrao);
    padding: 1.5rem;
    background-color: white;
    box-shadow: var(--shadowpadrao);
    transition: left 0.5s;
}

.pagPresentes .meramente{
    color: var(--cinza160);
    margin-top: 0.5rem;
    font-size: 90%;
}

.secAberto{
    left: 0;
}

.secFechado{
    left: -100%;
}

.pagPresentes .secFiltros .toposec{
    border-bottom: 1px solid var(--corborda);
    padding-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pagPresentes .secFiltros .subtit{    
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--corevento);
}

.pagPresentes .secFiltros .fecharSec{
    color: var(--azul);
    transition: color 0.5s;
    display: none;
}

.pagPresentes .secFiltros .fecharSec:hover{
    color: var(--azulc);
}

.pagPresentes .secFiltros .subtit svg{
    height: 1.2rem;
}

.pagPresentes .secFiltros .subtit svg *{
    stroke: var(--corevento);
}

.pagPresentes .compPresentes{
    margin-bottom: 1.5rem;
}

.compMenu{
    display: grid;
    gap: 0.5rem;
    margin-top: 1.5rem;
}

.compMenu .nome{
    color: var(--corevento);
}

.menuRadios{
    list-style: none;
    display: grid;
    gap: 0.5rem;
}

.menuRadios .item{
    border: 1px solid var(--corborda);
    padding: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: var(--radiuspadrao);
    transition: border 0.5s, color 0.5s, background 0.5s;
    cursor: pointer;
}

.menuRadios .item::before{
    content: "✓";
    color: var(--cianoc);
    opacity: 0;
    transition: opacity 0.5s;
}

.menuRadios .item:hover{
    color: var(--cianoc);
    background-color: white;
    border: 1px solid var(--cianoc);
}

.menuRadios .item:hover::before{
    opacity: 0.5;
}

.menuRadios .item:hover label{
    color: var(--cianoc);
}

.menuRadios .escolhido, .menuRadios .escolhido:hover{
    color: var(--azul);
    border: 1px solid var(--azul);
    background-color: var(--cianocc);    
}

.menuRadios .escolhido::before, .menuRadios .escolhido:hover::before{
    color: var(--azul);
    opacity: 1;
}

.pagPresentes .divOrdenacao{
    position: relative;
}

.pagPresentes .divOrdenacao .fundoMenuOrdenacoes{
    position: fixed;
    inset: 0;
    background-color: white;
    opacity: 0;
    z-index: 2;
    display: none;
}

.pagPresentes .divOrdenacao .menuRadios{
    background-color: var(--cinza250);
    position: absolute;
    right: 0;
    top: 1.8rem;
    z-index: 3;
    gap: 0;
    border: 1px solid var(--ciano);
    width: 12rem;
    border-radius: var(--radiuspadrao);
    overflow: hidden;
    display: none;
}

.pagPresentes .divOrdenacao .menuRadios .item{
    border-radius: 0;
    border-left: none;
    border-right: none;
}

.pagPresentes .divOrdenacao .menuRadios .item:last-child{
    border-bottom: none;
}



/* --------------------------------- */

/* Componente presentes */

.containerPresentes{
    container: presentes / inline-size;
}

.compPresentes{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.compPresentes .componente{
    width: 100%;
    border-radius: var(--radiuspadrao);
    box-shadow: var(--shadowpadrao);
    background-color: white;
    position: relative;
    padding: 0.5rem 0.5rem 3.2rem 0.5rem;
    transition: transform 0.5s;
    overflow: hidden;    
}

.compPresentes .faixaVendido{
    background-color: var(--vermelhoe);
    color: white;
    position: absolute;
    z-index: 1;
    padding: 0.5rem;
    border-radius: 5px 0 0 5px;
    top: 1.5rem;
    right: 0.5rem;
}

.compPresentes .componente:hover{
    transform: scale(105%);
}

.compPresentes .componente .areaImg{
    width: 100%;
    aspect-ratio: 1.4 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radiuspadrao);  
}

.compPresentes .componente .areaImg img{
    transition: opacity 0.5s;
    opacity: 0.9;
}

.compPresentes .componente .areaImg:hover img{
    opacity: 1;    
}

.compPresentes .componente .areaDados{
    padding: 1rem;
}

.compPresentes .componente .preco{
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--corevento);
}

.compPresentes .componente .preco svg{
    height: 1.5rem;
}

.compPresentes .componente .preco svg *{
    stroke: var(--corevento);
}

.compPresentes .componente .reserva{
    border-top: 1px solid var(--corborda);
    margin-top: 0.5rem;
    padding-top: 0.5rem;
}

.compPresentes .componente .absoluto{
    position: absolute;
    left: 1.5rem;
    right: 1.5rem;
    bottom: 1rem;
}

.compPresentes .componente .comprados{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
    border-top: 1px solid var(--corborda);
    padding-top: 0.5rem;
    margin-top: 0.5rem;
}

@container presentes (max-width: 1200px){

    .compPresentes{
        grid-template-columns: repeat(2, 1fr);
    }
}

@container presentes (max-width: 650px){

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

    .compPresentes .componente{        
        padding: 0.5rem;    
    }

    .compPresentes .componente .absoluto{
        position: static;
        margin-top: 1rem;     
    }

    .compPresentes .componente .preco{
        margin: 0.5rem 0;
    }

}


/* --------------------------------- */


/* Página checkout */

.pagCheckout{
    container: pagCheckout / inline-size;
}

.pagCheckout .secCheckout{
    margin: 1.5rem 0;
    display: grid;
    grid-template-columns: 25rem auto;
    gap: 1.5rem;
}

.secCheckout .fotoProd{
    width: 100%;
    border-radius: var(--radiuspadrao);
}

.secCheckout .pimagem{
    margin-top: 1rem;
    color: var(--cinza160);
    font-size: 85%;
}

.secCheckout .preco{
    margin: 0.2rem 0 0.5rem 0;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--corevento);
}

.secCheckout .preco svg{
    height: 1.5rem;
}

.secCheckout .preco svg *{
    stroke: var(--corevento);
}

.secCheckout .disponibilidade{
    color: var(--laranja);
}

.secCheckout .containerCampos{
    margin-top: 1rem;
}

.secCheckout .gridCampos{
    margin-bottom: 1rem;
}

.secCheckout .containerCampos .subt{
    color: var(--ciano);
    border-top: 1px solid var(--corborda);
    padding-top: 1rem;
}

.secCheckout .containerCampos .frase{
    margin: 1rem 0;
}

.secCheckout .total, .secCheckout .total *{
    text-align: right;
}

.secCheckout .total{
    margin: 1rem;
}

.secCheckout .inputJuridico{
    display: none;
}

.pagCheckout .notamp{
    margin: 1.5rem 0;
}

@container pagCheckout (max-width: 950px){

    .pagCheckout .secCheckout{
        grid-template-columns: 1fr;   
    }
}


/* --------------------------------- */


/* Página confirmar presença */

.pagPresenca .subtForm{
    border-top: 1px solid var(--corborda);
    margin-top: 1rem;
    padding-top: 1rem;
}

.pagPresenca .divPresencas{
    display: none;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1.5rem;
}

.pagPresenca .divFlex{
    width: 100%;
    display: flex;
    gap: 0.5rem;
}

.pagPresenca .elementosDireita{
    border-top: 1px solid var(--corborda);
    margin-top: 1rem;
    padding-top: 1rem;
}

.pagPresenca .pLimite span{
    color: var(--corevento);
}

.pagPresenca .membro{
    width: 100%;
    display: flex;
    align-items: flex-end;
    gap: 1rem;
}

.pagPresenca .containerMembros{
    container: membros / inline-size;
}

.pagPresenca .membro .labelInput{
    width: 100%;
}

.pagPresenca .membro .selecaoTipo{
    width: 30%;
}

.pagPresenca .membro button{
    height: 2.5rem;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

@container membros (max-width: 950px){

    .pagPresenca .membro .selecaoTipo{
        width: 60%;
    }
}

@container membros (max-width: 650px){

    .pagPresenca .membro{
        flex-direction: column;
        align-items: flex-start;
        border-bottom: 1px solid var(--corborda);
        padding-bottom: 1rem;
    }

    .pagPresenca .membro:last-child{
        border-bottom: none;
        padding-bottom: 0;
    }

    .pagPresenca .membro .selecaoTipo{
        width: 100%;
    }

}

/* --------------------------------- */


/* Páginas compra aprovada e recusada e pendente */

.pagCompraRetorno .tituloAprovado{
    color: var(--verde);
}

.pagCompraRetorno .tituloAprovado svg *{
    stroke: var(--verde);
}

.pagCompraRetorno .tituloRecusado{
    color: var(--vermelho);
}

.pagCompraRetorno .tituloRecusado svg *{
    stroke: var(--vermelho);
}

.pagCompraRetorno .tituloPendente{
    color: var(--laranja);
}

.pagCompraRetorno .tituloPendente svg *{
    stroke: var(--laranja);
}

.containerBotoes{
    container: botoes / inline-size;
}

.containerBotoes .componentesBotoes{
    display: flex;
    align-items: center;
    gap: 1rem;
}

.containerBotoes .componente{
    padding: 1rem;
    background-color: white;
    border-radius: var(--radiuspadrao);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: transform 0.5s, border 0.5s, color 0.5s; 
}

.containerBotoes .componente:hover{
    transform: scale(105%);
}

.containerBotoes .botoesAdicionais{
    margin-bottom: 1.5rem;
}

.containerBotoes .aAzul{
    border: 1px solid var(--azul);
    color: var(--azul);
}

.containerBotoes .aAzul:hover{
    border: 1px solid var(--azulc);
    color: var(--azulc);
}

.containerBotoes .aCiano{
    border: 1px solid var(--ciano);
    color: var(--ciano);
}

.containerBotoes .aCiano:hover{
    border: 1px solid var(--cianoc);
    color: var(--cianoc);
}

.containerBotoes .aRosa{
    border: 1px solid var(--rosa);
    color: var(--rosa);
}

.containerBotoes .aRosa:hover{
    border: 1px solid var(--rosac);
    color: var(--rosac);
}

.containerBotoes .aVerde{
    border: 1px solid var(--verde);
    color: var(--verde);
}

.containerBotoes .aVerde:hover{
    border: 1px solid var(--verdec);
    color: var(--verdec);
}

.containerBotoes .componente svg,
.containerBotoes .componente img{
    height: 2rem;
}

.pagCompraRetorno .textodesc{
    width: min(40rem, 100%);
    margin-bottom: 1rem;
}

.pagCompraRetorno .nota{
    margin-top: 1rem;
    width: min(40rem, 100%);
}

@container botoes (max-width: 650px){

    .containerBotoes .componentesBotoes{
        display: grid;
        grid-template-columns: 1fr;
    }
}


/* --------------------------------- */


@media screen and (max-width: 1200px){

    .pagPresentes .topo{
        flex-direction: column;
        align-items: flex-start;       
        gap: 1.5rem;
    }

    .pagPresentes .topo .botaoFiltrar{
        display: flex;
    }

    .pagPresentes .areaDividida{
        grid-template-columns: 1fr;
    }

    .pagPresentes .secFiltros{
        position: fixed;
        width: 100%;
        top: 0;  
        bottom: 0;
        z-index: 2;
        padding: 2.5rem;
        overflow: auto;
    }

    .pagPresentes .secFiltros .fecharSec{  
        display: inline-flex;
    }

    .pagPresentes .divOrdenacao .menuRadios{
        right: auto;
        left: 0;
    }

    .pagPresentes .linhaTags{
        display: flex;
    }

}


/* --------------------------------- */


@media screen and (max-width: 950px){

    .bannerEvento .textos{        
        padding: 2rem 5%;      
    }

    #pagEventoAtiva{
        color: var(--cinza100);
    }

    #pagEventoAtiva svg *{
        stroke: var(--cinza100) !important;
    }

}