body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-family: 'Open Sans', Arial, sans-serif;
    text-wrap: balance;
    background-color: #ffffff;
}

.cancelada {
    opacity: 0.3;
}


.section-image {
    display: none;
    width: 100%;
    height: auto;
}

.section-image.active {
    display: block;
}

.container {
    position: relative;
    width: 100vw;
    height: 60vh;
    /* background-image: g  url('https://especiais.g1.globo.com/politica/promessas/v3/images/aracaju_edvaldo_2021.jpg'); Placeholder image */
    background-size: cover;
    background-position: center center;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    top: 60px;
}

.text-container {
    text-align: center;
    color: white;
    margin-left: 10%;
    margin-right: 10%;
    padding: 20px;
    padding-bottom: 10px;
}


h1 {
     
}
.link{
    color: #232323;
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
}
.prefeito{
    margin: 0;
    font-weight: 300;
    font-size: 3.5rem;
    text-transform: uppercase;
    letter-spacing: 1.5rem; 
    line-height: 3.3rem;
    text-shadow: 4px 3px 5px rgba(0, 0, 0, 1); /* Ajuste os valores conforme necessário */
}
.cidade{
    letter-spacing: 0.5rem;    
    text-shadow: 4px 3px 5px rgba(0, 0, 0, 1); /* Ajuste os valores conforme necessário */
}
.credito-foto{
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 1); /* Ajuste os valores conforme necessário */
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 0.8rem;
}
h3 {
    margin: 0;
    font-weight: 600;
}

.cidade {
    font-size: 2rem;
    padding: 0;
}

p {
    font-weight: 300;
}

.share-container {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    align-items: center;
    color: white;
    text-shadow: 4px 3px 5px rgba(0, 0, 0, 1); /* Ajuste os valores conforme necessário */
}

.share-container img {
    margin-left: 10px;
    width: 24px;
    height: 24px;
}

.credit-container {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    color: white;
    text-shadow: 4px 3px 5px rgba(0, 0, 0, 1); /* Ajuste os valores conforme necessário */
}

.credit-container p {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    top: 10px;
}

.fixed-container {
    position: fixed;
    margin-top: 52px; /* Ajuste para considerar a faixa no topo */
    top: 52px; /* Ajuste para considerar a faixa no topo */
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: white;
    box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.1); /* Sombra projetada para cima */
}

.fixed-container.visible {
    bottom: 0; /* Posição final */
    opacity: 1; /* Visível */
}

.fixed-container.hidden {
    bottom: -100px; /* Volta a ficar fora da viewport */
    opacity: 0; /* Invisível */
}

.fixed-container, .sticker {
    transition: opacity 0.3s ease-in-out, bottom 0.3s ease-in-out;
}

.fixed-container.hidden, .sticker.hidden {
    opacity: 0;
    pointer-events: none; /* Previne interações com elementos invisíveis */
}


.yellow-bar {
    width: 100%;
    background-color: #ffffff;
    color: #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    /* border-bottom: 2px solid #232323; Define a largura e a cor da borda */
}

.yellow-bar a {
    position: relative; /* Necessário para posicionar o pseudo-elemento */
    text-decoration: none; /* Remover o underline padrão */
    color: #bebebe;
    transition: background-color 0.3s, color 0.3s;
}

.yellow-bar a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px; /* Ajuste conforme necessário */
    width: 100%;
    height: 3px; /* Espessura do underline */
    background-color: #bebebe; /* Cor do underline */
    transition: height 0.3s; /* Transição suave para o hover */
}

.yellow-bar a:hover::after {
    height: 4px; /* Espessura do underline ao passar o mouse */
    background-color: #232323; /* Cor do underline */
}

/* .yellow-bar a {
    text-decoration: none;
    color: #232323;
    transition: background-color 0.3s, color 0.3s;
    text-decoration-line: underline;
    text-underline-position:under;
} */

.yellow-bar a:hover {
    color: #232323;
}

.yellow-bar a.active {
    /* background-color: #232323; */
    color: #232323;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 5px;
    padding-top: 5px;
    font-weight: 900;
}

.yellow-bar-inner {
    width: 60vw;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

h3.titulo-score {
    margin-bottom: 5px;
    color: #888;
    font-weight: 700;
}

.scoreboard {
    display: none;
    text-align: center;
    margin-top: 0;
    background-color: white;
    padding-top: 5px;
    padding-bottom: 5px;
    border-bottom: 1px solid #ccc;
    width: 100%;
}

.status-container {
    display: flex;
    justify-content: center;
    margin-bottom: 0px;
}

.status-container div {
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 4px;
    /* color: white; */
    transition: opacity 0.3s;
    margin-right: 10px;
}

.status-container div.active {
    opacity: 1;
}

.status-container div.inactive {
    opacity: 0;
}

.nao-cumpriu {
    margin-top: 10px;
    padding: 10px;
    background-color: #ffffff;
    color: #C0122D;
    cursor: pointer;
    border-radius: 5px;
    font-weight: 700;
    font-size: 0.9rem;
    border: 2px solid #C0122D; /* Define a largura e a cor da borda */
}

.nao-avaliada {
    margin-top: 10px;
    padding: 10px;
    background-color: #ffffff;
    color: #979797;
    cursor: pointer;
    border-radius: 5px;
    font-weight: 700;
    font-size: 0.9rem;
    border: 2px solid #979797; /* Define a largura e a cor da borda */
}

.em-parte {
    margin-top: 10px;
    /* padding: 10px; */
    background-color: #ffffff;
    color: #E08500;
    cursor: pointer;
    border-radius: 5px;
    font-weight: 700;
    font-size: 0.9rem;
    border: 2px solid #E08500; /* Define a largura e a cor da borda */
}

.cumpriu {
    margin-top: 10px;
    /* padding: 10px; */
    background-color: #ffffff;
    color: #658C4C;
    cursor: pointer;
    border-radius: 5px;
    font-weight: 700;
    font-size: 0.9rem;
    border: 2px solid #658C4C; /* Define a largura e a cor da borda */
}

.total {
    margin-top: 10px;
    padding: 10px;
    background-color: #ffffff;
    color: rgb(80, 80, 80);
    cursor: pointer;
    border-radius: 5px;
    font-weight: 700;
    font-size: 0.9rem;
    border: 2px solid #232323; /* Define a largura e a cor da borda */
}

.cancelado {
    margin-top: 10px;
    padding: 10px;
    background-color: #ffffff;
    color: rgb(16, 16, 16);
    cursor: pointer;
    border-radius: 5px;
    font-weight: 700;
    font-size: 0.9rem;
    border: 2px solid rgb(16, 16, 16); /* Define a largura e a cor da borda */

}

.cancelada {
    margin-top: 10px;
    padding: 10px;
    background-color: #ffffff;
    color: rgb(16, 16, 16);
    cursor: pointer;
    border-radius: 5px;
    font-weight: 700;
    font-size: 0.9rem;
    border: 2px solid rgb(16, 16, 16); /* Define a largura e a cor da borda */

}

.update-info {
    font-size: 0.9rem;
    margin-bottom: 15px;
    margin-top: 10px;
    text-align: center;
    color: #888 !important;
}

hr {
    border: none;
    border-top: 1px solid #ccc;
    margin: 5px 0;
}

.metdologia {
    font-size: 1.1rem;
    color: #888;
}

.texto-metodologia {
    font-size: 0.9rem;
    margin: 0;
    padding: 0;
    color: #888;
    line-height: 1.2rem;
}

.promises-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 10px 0;
}

.promises-grid .promise {
    /* width: 1px;
    height: 1px; */
    margin: 3px;
    cursor: pointer;
    padding: 3px;
    border-radius: 0;
}

.promise.nao-cumpriu {
    background-color: #C0122D;
}

.promise.em-parte {
    background-color: #E08500;
}

.promise.cumpriu {
    background-color: #658C4C;
}

.promise.sem-status {
    background-color: #232323;
    width: 4px;
    height: 4px;
    
}

.promises-grid .filtered, .theme-card.filtered, .promise.filtered {
    opacity: 0.3;
    pointer-events: none;
}

.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
    z-index: 3000;
    color: #232323;
}

.modal-content {
    background-color: #f1f1f1;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 50%;
    border-radius: 12px;
}

.modal-evidencia a {
    color: #c4170c; /* Cinza escuro */
    text-decoration: none; /* Sem sublinhado */
    font-weight: 600;
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.methodology {
    padding: 20px;
    background-color: #f9f9f9;
    text-align: center;
}

.methodology h2 {
    /* margin-top: 0; */
}

.methodology p {
    /* margin: 10px 0; */
}

.themes {
    padding: 20px;
    margin-top: 100px;
}

.themes h2 {
    text-align: center;
    margin-bottom: 20px;
    font-size: 2rem;
}

.themes-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.theme-group {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 20px;
}

.theme-group h3 {
    text-align: left;
    margin-top: 20px;
    margin-bottom: 20px;
}

.theme-cards {
    display: flex;
    gap: 24px;
    overflow-x: auto;
}

.theme-card {
    margin-top: 10px;
    margin-bottom: 10px;
    background-color: rgba(240, 240, 240, 0.2); /* 50% opacidade */
    border-radius: 8px;
    width: 300px;
    padding: 15px;
    flex: 0 0 auto;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
}


.theme-card h3 {
    margin-top: 0;
}

.theme-card p {
    margin: 5px 0;
}

.theme-card .status {
    font-weight: bold;
    margin-bottom: 10px;
}

.theme-card button {
    margin-top: 10px;
    padding: 10px;
    border: 1;
    background-color: #ffffff;
    color: rgb(80, 80, 80);
    cursor: pointer;
    border-radius: 5px;
    font-weight: 700;
    font-size: 0.9rem;
}

.theme-card button:hover {
    background-color: #232323;
    color: #ffffff;
}

.theme-card.cumpriu {
    border: transparent;
    border-left: 5px solid #658C4C;
}

.theme-card.em-parte {
    border: transparent;
    border-left: 5px solid #E08500;
}

.theme-card.nao-cumpriu {
    border: transparent;
    border-left: 5px solid #C0122D;
}

.theme-card.sem-status {
    border-left: 5px solid gray;
}

.theme-card.cancelada {
    border-left: 5px solid rgb(16, 16, 16);
}
.promise.cancelada {
    background-color: #f5c6cb; /* Cor de fundo específica para promessas canceladas */
    border-color: #f1b0b7; /* Borda específica para promessas canceladas */
}
.card-status.cancelada {
    color: #721c24; /* Cor do texto específica para o status cancelado */
}
.theme-card:hover {
    box-shadow: 0 8px 8px rgba(0, 0, 0, 0.2);
    transform: translateY(-5px);
}

.theme-card.active, .promise.active {
    opacity: 1;
}

.card-status{
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 10px;
}

.card-status.cumpriu {
    color: #658C4C;
    background-color:transparent;
    border: transparent;
}

.card-status.em-parte {
    color: orange;
    background-color:transparent;
    border: transparent;

}

.card-status.nao-cumpriu-ainda {
    color: #C0122D;
    background-color:transparent;
}

.card-promessa{
    font-weight: 700;
    font-size: 1.2rem;
    padding-top: 20px;
    color: #424242;
    line-height: 1.5rem;
}

.card-resumo{
    font-weight: 400;
    font-size: 1rem;
    color: #828181;
    padding-top: 10px;
    line-height: 1.3rem;
}

.card-evidencia{
    padding-top: 10px;
    padding-bottom: 10px;
    font-weight: 600;
    font-size: 0.9rem; 
    color: #828181;   
    line-height: 1.1rem;
}

.card-btn{
    background-color: #aaa;
    stroke: #232323;
}

.status-container div.active {
    opacity: 1;
}

.status-container div.inactive {
    opacity: 0.3;
}

.intertitulo {
    text-align: left;
    font-size: 1.6rem;
    color: #888;
    font-weight: 600;
}

.filtered {
    opacity: 0.3;
    pointer-events: none;
}
#total-3anosmeio,
#total-1ano, 
#total-posse {
    font-weight: 900;
    font-size: 1.1rem;
}

#cumpriu-3anosmeio,
#cumpriu-1ano,
#cumpriu-posse {
    font-weight: 900;
    font-size: 1.1rem;
}

#em-parte-3anosmeio,
#em-parte-1ano,
#em-parte-posse {
    font-weight: 900;
    font-size: 1.1rem;
}

#nao-cumpriu-3anosmeio,
#nao-cumpriu-1ano, 
#nao-cumpriu-posse {
    font-weight: 900;
    font-size: 1.1rem;
}

.modal-h2{
    font-size: 1rem;
    font-weight: 600;
    color: #888;
    padding-bottom: 5px;
    line-height: 1.2rem;
}

.modal-prometeu{
    font-size: 1.2rem;
    font-weight: 300;
    color: #888;
    padding-bottom: 5px;
    line-height: 1.4rem;
}

.modal-promessa{
    font-size: 1.3rem;
    padding-bottom: 5px;
    margin: 0;
    font-weight: 700;
    color: #424242;
    line-height: 1.6rem;
}

.modal-resumo{
    font-size: 1rem;
    margin: 10;
    font-weight: 400;
    padding-bottom: 5px;
    line-height: 1.4rem;
}

.modal-evidencia{
    font-size: 0.9rem;
    margin: 10;
    font-weight: 200;
    color: #888;
    padding-bottom: 5px;
    line-height: 1.2rem;
}

.modal-aconteceu{
    font-size: 1.2rem;
    font-weight: 300;
    color: #888;
    padding-bottom: 5px;
    line-height: 1.4rem;
}

.modal-status{
    font-size: 1.2rem;
    font-weight: 900;
    color: #232323;
    opacity: 0;
    padding-bottom: 5px;
    line-height: 1.6rem;
}

.modal-justificativa{
    font-size: 1rem;
    margin: 10;
    font-weight: 400;
    color: #424242;
    line-height: 1.6rem;
}

.modal-btn{
    margin-top: 10px;
    margin-bottom: 20px;
    padding: 10px;
    background-color: #ffffff;
    color: rgb(80, 80, 80);
    cursor: pointer;
    border-radius: 5px;
    font-weight: 700;
    font-size: 0.9rem;
    border: 2px solid #232323; /* Define a largura e a cor da borda */
}

.modal-btn:hover{
    margin-top: 10px;
    padding: 10px;
    background-color: #232323;
    color: #ffffff;
    cursor: pointer;
    border-radius: 5px;
    font-weight: 700;
    font-size: 0.9rem;
    border: 2px solid #232323; /* Define a largura e a cor da borda */
}

.sticker {
    position: fixed;
    bottom: 20px; /* Distância do fundo da tela */
    left: 20px; /* Centraliza horizontalmente */
    background-color: #c4170c; /* Cor de fundo */
    color: white; /* Cor do texto */
    padding: 10px 20px; /* Espaçamento interno */
    border-radius: 10px; /* Bordas arredondadas */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra para destaque */
    font-weight: bold; /* Texto em negrito */
    font-size: 1rem; /* Tamanho do texto */
    z-index: 1000; /* Para garantir que fique acima de outros elementos */
    cursor: pointer; /* Cursor de mão para indicar interatividade */
    transition: background-color 0.3s; /* Transição suave para mudanças de cor */
    text-align: center;
}

.sticker:hover {
    background-color: #a80000; /* Cor de fundo ao passar o mouse */
}

.footer-promessas{
    margin-left: 30%;
    margin-right: 30%;
    color: #828181;
}

.creditos{
    text-align: center;
    
}

.tit-credito{
    font-size: 1.rem;
    font-weight: 700;
    text-align: left;
    line-height: 1.5rem;
}
.txt-credito{
 font-size: 1.1rem;
    font-weight: 300;
    line-height: 1.5rem;
    padding-bottom: 10px;

}
@media (max-width: 768px) {
    
    .prefeito {
        margin: 0;
        font-weight: 300;
        font-size: 1.7rem;
        text-transform: uppercase;
        letter-spacing: 0.3rem;
        line-height: 1.6rem;
        text-shadow: 4px 3px 5px rgba(0, 0, 0, 1);
    }
    .cidade {
        letter-spacing: 0.1rem;
        text-shadow: 4px 3px 5px rgba(0, 0, 0, 1);
        font-size: 1.3rem;
        padding: 0;
        margin: 5px;
    }
    .credit-container p {
        writing-mode: vertical-rl;
        transform: rotate(180deg);
        font-size: 0.7rem;
        top: 10px;
    }
.container{
    top: 60px;
}
    .update-info {
        font-size: 0.8rem;
        margin-bottom: 10px;
        margin-top: 5px;
        text-align: center;
        color: #888 !important;
        line-height: 1.1rem;
    }
    .yellow-bar-inner {
        width: 100vw;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    .yellow-bar {
        width: 100%;
        background-color: #ffffff;
        color: #ccc;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 1rem;
    }
    h3.titulo-score {
        margin-bottom: 5px;
        color: #888;
        font-weight: 600;
    }
    h3 {
        display: block;
        font-size: 1em;
        margin-block-start: 0.3em;
        margin-block-end: 0.3em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
        font-weight: bold;
        unicode-bidi: isolate;
    }
    .status-container div {
        cursor: pointer;
        padding: 2px 2px;
        border-radius: 4px;
        /* color: white; */
        transition: opacity 0.3s;
        margin-right: 4px;
    }

    .status-container div {
        cursor: pointer;
        padding: 1px 1px;
        border-radius: 4px;
        /* color: white; */
        transition: opacity 0.3s;
        margin-right: 2px;
    }

    .pipe {
        opacity: 0;
    }
    .theme-card{
        width: 250px;
    }
    .modal-content {
        width: 90%;
        height: auto; /* Altura automática */
        max-height: 90%; /* Limita a altura máxima para 90% */
        overflow-y: auto; /* Adiciona rolagem vertical se o conteúdo for maior que a altura */
    }


    .scoreboard {
        display: none;
        text-align: center;
        margin-top: 0;
        background-color: white;
        padding-top: 2px;
        padding-bottom: 2px;
        border-bottom: 1px solid #ccc;
        width: 100%;
    }
    .methodology {
        padding: 5px;
        background-color: #f9f9f9;
        text-align: center;
        line-height: 1.5rem;
    }
    .theme-group h3 {
        text-align: left;
        margin-top: 10px;
        margin-bottom: 5px;
    }
    .intertitulo {
        text-align: left;
        font-size: 1.1rem;
        color: #888;
        font-weight: 600;
    }
    .card-promessa {
        font-weight: 700;
        font-size: 1rem;
        padding-top: 2px;
        color: #424242;
        line-height: 1.2rem;
    }
    .card-status {
        font-weight: 600;
        font-size: 0.85rem;
        padding-top: 10px;
    }
    .card-resumo {
        font-weight: 400;
        font-size: 0.85rem;
        color: #828181;
        padding-top: 2px;
        line-height: 1.2rem;
    }
    .card-evidencia {
        padding-top: 2px;
        padding-bottom: 5px;
        font-weight: 600;
        font-size: 0.8rem;
        color: #828181;
        line-height: 1rem;
    }
    .theme-card button {
        margin-top: 5px;
        padding: 5px;
        border: 1;
        background-color: #ffffff;
        color: rgb(80, 80, 80);
        cursor: pointer;
        border-radius: 3px;
        font-weight: 700;
        font-size: 0.8rem;
    }
    #total-3anosmeio,
    #total-1ano, 
    #total-posse {
        font-weight: 900;
        font-size: 0.9rem;
    }
    
    
    #cumpriu-3anosmeio,
    #cumpriu-1ano,
    #cumpriu-posse {
        font-weight: 900;
        font-size: 0.9rem;
    }
    
    #em-parte-3anosmeio,
    #em-parte-1ano,
    #em-parte-posse {
        font-weight: 900;
        font-size: 0.9rem;
    }
    
    #nao-cumpriu-3anosmeio,
    #nao-cumpriu-1ano, 
    #nao-cumpriu-posse {
        font-weight: 900;
        font-size: 0.9rem;
    }

    .nao-cumpriu {
        margin-top: 1px;
        padding: 5px;
        background-color: #ffffff;
        color: #C0122D;
        cursor: pointer;
        border-radius: 3px;
        font-weight: 700;
        font-size: 0.8rem;
        border: 1px solid #C0122D; /* Define a largura e a cor da borda */
    }
    
    .em-parte {
        margin-top: 1px;
        /* padding: 10px; */
        background-color: #ffffff;
        color: #E08500;
        cursor: pointer;
        border-radius: 3px;
        font-weight: 300;
        font-size: 0.8rem;
        border: 1px solid #E08500; /* Define a largura e a cor da borda */
    }
    
    .cumpriu {
        margin-top: 1px;
        /* padding: 10px; */
        background-color: #ffffff;
        color: #658C4C;
        cursor: pointer;
        border-radius: 3px;
        font-weight: 700;
        font-size: 0.8rem;
        border: 1px solid #658C4C; /* Define a largura e a cor da borda */
    }
    .nao-avaliada {
        margin-top: 1px;
        /* padding: 10px; */
        background-color: #ffffff;
        color: #979797;
        cursor: pointer;
        border-radius: 3px;
        font-weight: 700;
        font-size: 0.8rem;
        border: 1px solid #979797; /* Define a largura e a cor da borda */
    }
    

    .total {
        margin-top: 1px;
        /* padding: 5px; */
        background-color: #ffffff;
        color: rgb(80, 80, 80);
        cursor: pointer;
        border-radius: 3px;
        font-weight: 700;
        font-size: 0.8rem;
        border: 1px solid #232323; /* Define a largura e a cor da borda */
    }
    .status-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .status-container div {
        flex: 1 1 calc(31.333% - 20px); /* Três botões na linha com espaço de 10px para margin */
    }

    .status-container div.total {
        flex: 1 1 calc(100% - 20px); /* Largura total menos as margens */
        /* margin-top: 10px; */
    }
    .sticker {
        position: fixed;
        /* top: 20px; Distância do fundo da tela */
        bottom: 2px;
        margin-left: 20%;
        margin-right: 20%;
        background-color: #c4170c; /* Cor de fundo */
        color: white; /* Cor do texto */
        padding: 5px 12px; /* Espaçamento interno */
        border-radius: 4px; /* Bordas arredondadas */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra para destaque */
        font-weight: bold; /* Texto em negrito */
        font-size: 0.8rem; /* Tamanho do texto */
        z-index: 1000; /* Para garantir que fique acima de outros elementos */
        cursor: pointer; /* Cursor de mão para indicar interatividade */
        transition: background-color 0.3s; /* Transição suave para mudanças de cor */
        text-align: center;
    }
    .sticker.hidden {
        display: none;
    }
    .footer-promessas{
        margin-left: 3%;
        margin-right: 3%;
        color: #828181;
    }
    
    .creditos{
        text-align: center;
        
    }
    
    .tit-credito,
    .coordination,
    .reporting,
    .design,
    .development{
        font-size: 1.0rem;
        font-weight: 700;
        text-align: left;
        line-height: 1.2rem;

    }

    .txt-credito
    {
     font-size: 0.9rem;
        font-weight: 300;
        line-height: 1.2rem;
        padding-bottom: 10px;
        margin-bottom: 20px;
    }
    

    .text-container {
        text-align: center;
        color: white;
        margin-left: 12px;
        margin-right: 12px;
        padding: 5px;
        padding-bottom: 5px;
    }
    

    .prefeito{
        margin: 0;
        font-weight: 300;
        font-size: 1.5rem;
        text-transform: uppercase;
        letter-spacing: 0.3rem; 
        line-height: 1.6rem;
        text-shadow: 4px 3px 5px rgba(0, 0, 0, 1); /* Ajuste os valores conforme necessário */
    }
    .cidade{
        letter-spacing: 0.3rem;    
        text-shadow: 4px 3px 5px rgba(0, 0, 0, 1); /* Ajuste os valores conforme necessário */
        font-size: 1.1rem;
    }
    .credito-foto{
        text-shadow: 2px 2px 6px rgba(0, 0, 0, 1); /* Ajuste os valores conforme necessário */
        writing-mode: vertical-rl;
        transform: rotate(180deg);
        font-size: 0.8rem;
        margin-top: 45px;
    }    

    .promises-grid {
        display: none; /* Oculta o grid de promessas no mobile */
    }


}