/* ===========================================================================
   ESTILO GLOBAL: FONTE, BASE, CONTAINER, CABEÇALHO (DESKTOP, CÓPIA PRESA NO TOPO
   E CELULAR), RODAPÉ, VOLTAR AO TOPO E AVISOS DO PÉ DA JANELA.
   OS VALORES SÃO OS DO SITE ANTIGO (TEMA HOUZEZ + BOOTSTRAP 3), MEDIDOS NA CASCATA.
   CADA PÁGINA TEM O SEU CSS (MESMO NOME DO .php), CARREGADO DEPOIS DESTE.
   FAIXAS DO BOOTSTRAP 3: 1200, 992 E 768; O TEMA AINDA ESTREITA O CONTAINER EM 767 E 481.
   =========================================================================== */

/* SÓ A 400: É O ÚNICO PESO QUE O SITE ANTIGO CARREGA. */
@font-face {
    font-family: 'Encode Sans Condensed';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/encode-sans-condensed-400-latin.woff2') format('woff2');
}

:root {
    --verde-marca: #016701;
    --verde: #256c4a;

    /* NOMES QUE OS CSS DE COMPONENTE (PAINÉIS, BLOG, ALERTA, FORMULÁRIO) USAM. */
    --cor-destaque: var(--verde);
    --titulo: #000;
    --texto: #000;
    --fundo-claro: #ededed;
    --sombra: 0 4px 5px rgba(0, 0, 0, .15);

    /* A ROBOTO NUNCA É CARREGADA NO SITE ANTIGO: NA TELA SAI A SANS-SERIF DO SISTEMA. IGUAL AQUI. */
    --fonte: "Roboto", sans-serif;
    --fonte-titulo: 'Encode Sans Condensed', sans-serif;
}

/* PÁGINA EM QUE O SITE ANTIGO NÃO CARREGA A ENCODE ($semEncode NO header.php): O TÍTULO
   DECLARADO NELA CAI NA SANS-SERIF DO SISTEMA, E AQUI TAMBÉM. */
.sem-encode {
    --fonte-titulo: sans-serif;
}

/* ---- BASE (BOOTSTRAP 3 + HOUZEZ) -------------------------------------------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: 10px;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
    margin: 0;
    background-color: #fff;
    font-family: var(--fonte);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.42857143;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

@media (max-width: 767px) {
    body { font-size: 12px; }
}

a {
    background-color: transparent;
    color: #022a3b;
    text-decoration: none;
    transition: all .5s ease-out;
}

a:hover {
    color: #023f71;
}

a:focus {
    color: #f17478;
}

img {
    max-width: 100%;
    height: auto;
    border: 0;
    vertical-align: middle;
}

h1, h2, h3, h4, h5, h6 {
    color: inherit;
    font-family: inherit;
    font-weight: 500;
    line-height: 1.1;
}

h1, h2, h3 { margin: 20px 0 10px; }
h4, h5, h6 { margin: 10px 0; }

h1 { font-size: 36px; }
h2 { font-size: 30px; }
h3 { font-size: 24px; }
h4 { font-size: 18px; }
h5 { font-size: 14px; }
h6 { font-size: 12px; }

p {
    margin: 0 0 10px;
    font-size: 16px;
    font-weight: 300;
    line-height: 24px;
}

ul,
ol {
    margin-top: 0;
    margin-bottom: 10px;
}

strong,
b {
    font-weight: 500;
}

button,
input,
select,
textarea {
    margin: 0;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

button {
    overflow: visible;
    text-transform: none;
    cursor: pointer;
    transition: all .5s ease-out;
}

/* GLIFO EM SVG: ALTURA DE 1em E A MESMA DESCIDA DA FONTE DE ÍCONE (256/1792). */
.icone {
    display: inline-block;
    width: auto;
    height: 1em;
    vertical-align: -.142857em;
}

/* FONT AWESOME 6 DESCE 64/512 DO EM; A FLATICON NÃO DESCE; A ICOMOON DESCE 64/1024. */
.icone--fa { vertical-align: -.125em; }
.icone--fl { vertical-align: 0; }
.icone--im { vertical-align: -.0625em; }

/* TEXTO SÓ PARA LEITOR DE TELA (RÓTULO DE CAMPO QUE A TELA MOSTRA COMO PLACEHOLDER). */
.so-leitor {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* TRECHO QUE RECEBE O FOCO AO CLICAR NUMA ÂNCORA (site.js): SEM O CONTORNO DO NAVEGADOR. */
[tabindex="-1"]:focus {
    outline: 0;
}

.pular-para-conteudo {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100000;
    padding: 10px 15px;
    background: var(--verde-marca);
    color: #fff;
}

.pular-para-conteudo:focus {
    left: 0;
    color: #fff;
}

/* ---- CONTAINER E LINHA (GRADE DO BOOTSTRAP 3) -------------------------------- */

.container {
    margin-right: auto;
    margin-left: auto;
    padding-right: 15px;
    padding-left: 15px;
}

@media (min-width: 768px)  { .container { width: 750px; } }
@media (min-width: 992px)  { .container { width: 970px; } }
@media (min-width: 1200px) { .container { width: 1170px; } }
@media (max-width: 767px)  { .container { width: 480px; } }
@media (max-width: 481px)  { .container { width: 100%; } }

.linha {
    margin-right: -15px;
    margin-left: -15px;
}

.container::before,
.container::after,
.linha::before,
.linha::after {
    content: " ";
    display: table;
}

.container::after,
.linha::after {
    clear: both;
}

/* ---- FOTO INDISPONÍVEL ------------------------------------------------------------
   O AVISO QUE ENTRA NO LUGAR DA FOTO QUE NÃO EXISTE (VER samiSiteFotoIndisponivel()). */

.foto-indisponivel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 175px;
    background-color: #ededed;
    color: #777;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    text-align: center;
}

.foto-indisponivel .icone {
    color: #ccc;
    font-size: 38px;
}

/* O display: flex DE CIMA VENCERIA O hidden. */
.foto-indisponivel[hidden] {
    display: none;
}

/* ---- CABEÇALHO DO DESKTOP ------------------------------------------------------
   FAIXA VERDE: LOGO À ESQUERDA, MENU FLUTUANDO À DIREITA. ENTRE 992 E 1199px O MENU
   NÃO CABE AO LADO DA LOGO E DESCE PARA A LINHA DE BAIXO, COMO NO SITE ANTIGO. */

.cabecalho {
    position: relative;
    background-color: var(--verde-marca);
}

.cabecalho div {
    transition: all .2s ease-out 0s;
}

.cabecalho__esquerda {
    float: left;
    width: 100%;
}

.cabecalho__logo {
    float: left;
    margin-top: 10px;
    line-height: 0;
}

/* O LOGO VEM DO PAINEL, EM QUALQUER TAMANHO: CABE NA CAIXA DO LOGO DO SITE ANTIGO (280x66), SEM
   DISTORCER E CENTRADO NA ALTURA DELA. O DA L TEDESCO TEM EXATAMENTE ESSE TAMANHO. */
.cabecalho__logo a {
    display: flex;
    align-items: center;
    height: 66px;
}

.cabecalho__logo img {
    width: auto;
    height: auto;
    max-width: 280px;
    max-height: 66px;
}

.menu {
    display: block;
    float: right;
    margin: 0;
}

/* O RECUO DE 40px É O PADRÃO DA LISTA, QUE O TEMA NUNCA ZERA. */
.menu__lista {
    margin: 0;
    padding-left: 40px;
    list-style: none;
    font-size: 0;
    font-weight: 400;
}

.menu__item {
    position: relative;
    display: inline-block;
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    line-height: 14px;
    text-align: center;
    text-transform: capitalize;
}

.menu__link {
    display: inline-block;
    padding: 0 15px;
    border: 1px solid transparent;
    border-top: 0;
    border-bottom: 0;
    color: #fff;
    line-height: 90px;
}

@media (min-width: 992px) and (max-width: 1199px) {
    .menu__link { padding: 0 9px; }
}

.menu__link:hover {
    background-color: transparent;
    color: #ecf1ee;
}

.menu__link:active {
    color: #256c4a;
}

/* ITEM COM SUBMENU ABERTO: O RÓTULO FICA CINZA. */
.menu__item--pai:hover > .menu__link {
    color: #ccc;
}

.menu__seta {
    float: right;
    margin-left: 10px;
}

/* "CLIENTE ONLINE": FUNDO BRANCO E TEXTO VERDE, TAMBÉM NO HOVER. */
.menu__item--destaque {
    background-color: #fff;
}

.menu__item--destaque > .menu__link,
.menu__item--destaque:hover > .menu__link {
    color: var(--verde-marca);
}

/* SUBMENU: FAIXA CINZA DA LARGURA DA JANELA, PRESA 90px ABAIXO DO TOPO DA JANELA. */
.submenu {
    position: fixed;
    top: 90px;
    left: 0;
    z-index: 10;
    display: none;
    width: 100%;
    margin: 0;
    padding: 10px 0;
    list-style: none;
    background-color: #989292;
    box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
    font-size: 0;
    font-weight: 400;
    text-align: center;
    transition: all .2s ease-out 0s;
}

/* NO SITE ANTIGO O SUBMENU SURGE EM 0,2s (A TRANSIÇÃO DO TEMA QUANDO O ITEM GANHA .active). */
.menu__item:hover > .submenu {
    display: block;
    animation: submenu-surge .2s ease-out;
}

@keyframes submenu-surge {
    from { opacity: 0; }
    to { opacity: 1; }
}

.submenu__item {
    position: relative;
    display: inline-block;
    margin: 0;
    padding: 0 10px;
    font-size: 14px;
    font-weight: 500;
    line-height: 18px;
    text-align: center;
}

.submenu__link,
.submenu__link:hover,
.submenu__link:focus {
    display: block;
    padding: 13px 15px;
    background: none;
    color: #fff;
}

.submenu__link .icone {
    display: block;
    margin: 0 auto;
    font-size: 30px;
}

/* CÓPIA DO CABEÇALHO QUE DESCE PRESA NO TOPO (site.js). SÓ NO DESKTOP. */
.cabecalho-fixo {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    display: none;
    width: 100%;
    background-color: var(--verde-marca);
    box-shadow: 0 2px 2px rgba(0, 0, 0, .2);
}

@media (max-width: 991px) {
    .cabecalho,
    .cabecalho-fixo { display: none !important; }
}

/* ---- CABEÇALHO DO CELULAR (ATÉ 991px) ------------------------------------------ */

.cabecalho-movel {
    display: none;
    min-height: 60px;
    background-color: var(--verde-marca);
}

@media (max-width: 991px) {
    .cabecalho-movel { display: block; }
}

.cabecalho-movel::before,
.cabecalho-movel::after {
    content: " ";
    display: table;
}

.cabecalho-movel::after {
    clear: both;
}

.cabecalho-movel > .container {
    position: relative;
}

.cabecalho-movel__menu {
    float: left;
    width: 25%;
    line-height: 60px;
}

.cabecalho-movel__botao {
    position: relative;
    top: 1px;
    display: inline-block;
    width: 18px;
    height: 18px;
    padding: 0;
    border: 0;
    background: none;
    color: #f9f3f3;
    font-size: 20px;
    line-height: 18px;
    vertical-align: baseline;
}

.cabecalho-movel__logo {
    float: left;
    width: 50%;
    line-height: 55px;
    text-align: center;
}

/* O RECUO DE 40px E O font-size 0 SÃO DA LISTA EM VOLTA DA LOGO NO SITE ANTIGO. */
.cabecalho-movel__recuo {
    margin: 0;
    padding-left: 40px;
    font-size: 0;
}

.cabecalho-movel__imagem {
    float: left;
    margin-bottom: 14px;
    line-height: 55px;
}

.cabecalho-movel__imagem img {
    width: auto;
    max-width: 100%;
    max-height: 80px;
}

/* MENU ABERTO: DESCE 20px APARECENDO, LOGO ABAIXO DA FAIXA VERDE. */
.menu-movel {
    position: absolute;
    top: 80px;
    left: 0;
    z-index: 999;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    transition: all .2s ease-out 0s;
}

.cabecalho-movel__botao.aberto + .menu-movel {
    top: 60px;
    opacity: 1;
    visibility: visible;
}

.menu-movel__lista {
    position: relative;
    margin: 0;
    padding-left: 0;
    list-style: none;
    background-color: rgba(255, 255, 255, .95);
    box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
}

/* A SETINHA BRANCA QUE APONTA PARA O BOTÃO. */
.menu-movel__lista::before {
    content: '';
    position: absolute;
    top: -12px;
    left: 2px;
    z-index: 2;
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-bottom-color: #fff;
}

@media (max-width: 767px) {
    .menu-movel__lista::before { left: 18px; }
}

.menu-movel__sub {
    position: relative;
    display: none;
    margin: 0;
    padding-left: 0;
    list-style: none;
}

.menu-movel__item {
    position: relative;
    width: 100%;
    margin: 0;
    border-top: 1px solid #f5f5f5;
    font-size: 12px;
    font-weight: 500;
    line-height: 12px;
}

.menu-movel__item:first-child {
    border: 0;
}

.menu-movel__item:hover {
    background-color: #515252;
}

.menu-movel__link {
    display: inline-block;
    width: 100%;
    padding: 14px 18px;
    color: #959595;
}

.menu-movel__item:hover > .menu-movel__link,
.menu-movel__item.aberto > .menu-movel__link {
    color: #fff;
}

.menu-movel__item.aberto > .menu-movel__link {
    background-color: #256c4a;
}

.menu-movel__sub .menu-movel__link,
.menu-movel__sub .menu-movel__link:hover {
    background-color: #ccc;
    color: #fff;
}

/* "CLIENTE ONLINE": FUNDO BRANCO E TEXTO VERDE MESMO NO HOVER E ABERTO, COMO NO SITE ANTIGO. */
.menu-movel__item.menu-movel__item--destaque {
    background-color: #fff;
}

.menu-movel__item > .menu-movel__link--destaque,
.menu-movel__item:hover > .menu-movel__link--destaque {
    color: var(--verde-marca);
}

/* A SETA DE ABRIR O SUBMENU COBRE A LINHA INTEIRA DO ITEM, COMO NO SITE ANTIGO. */
.menu-movel__abrir {
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    width: 100%;
    height: 40px;
    padding: 0 18px 0 0;
    border: 0;
    background: none;
    color: #959595;
    font-size: 14px;
    line-height: 40px;
    text-align: right;
    transition: none;
}

/* ENTRE 768 E 991px O SITE ANTIGO APLICA NO MENU DO CELULAR AS REGRAS DO SUBMENU DO DESKTOP
   (O MENU É UMA CÓPIA COM O MESMO id): ITENS CENTRADOS E O SUBMENU VIRA A FAIXA CINZA PRESA
   90px ABAIXO DO TOPO DA JANELA, COM O ÍCONE GRANDE EM CIMA DO TEXTO. ABRE NO HOVER E NA SETA. */
@media (min-width: 768px) and (max-width: 991px) {
    .menu-movel__lista > .menu-movel__item { text-align: center; }

    .menu-movel__sub {
        position: fixed;
        top: 90px;
        left: 0;
        z-index: 10;
        width: 100%;
        padding: 10px 0;
        background: #989292;
        text-align: center;
    }

    .menu-movel__item:hover > .menu-movel__sub { display: block; }

    .menu-movel__sub .menu-movel__item {
        display: inline-block;
        padding: 0 10px;
        border: 0;
        text-align: center;
    }

    .menu-movel__sub .menu-movel__link { display: block; }

    .menu-movel__sub .icone {
        display: block;
        margin: 0 auto;
        color: #fff;
        font-size: 30px;
    }
}

.menu-movel__item:hover > .menu-movel__abrir,
.menu-movel__item.aberto > .menu-movel__abrir {
    color: #fff;
}

.menu-movel__aberto,
.menu-movel__item.aberto .menu-movel__fechado {
    display: none;
}

.menu-movel__item.aberto .menu-movel__aberto {
    display: inline-block;
}

/* ---- VOLTAR AO TOPO ----------------------------------------------------------------- */

.voltar-topo {
    position: fixed;
    right: 30px;
    bottom: 30px;
    z-index: 999;
    display: none;
    width: 40px;
    height: 40px;
    padding: 0 15px;
    border: 0;
    border-radius: 4px;
    background-color: #5b5b5b;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.42857;
    text-align: center;
    white-space: nowrap;
    touch-action: manipulation;
}

.voltar-topo.visivel {
    display: inline-block;
}

.voltar-topo:hover {
    opacity: .8;
}

/* ---- RODAPÉ ------------------------------------------------------------------------- */

.rodape__principal {
    padding: 50px 0 20px;
    background-color: #ededed;
}

@media (max-width: 767px) {
    .rodape__principal { padding: 45px 0 15px; }
}

.rodape__coluna {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

@media (min-width: 768px) {
    .rodape__coluna { float: left; }
    .rodape__coluna--logo { width: 25%; }
    .rodape__coluna--sobre { width: 41.66666667%; }
    .rodape__coluna--contato { width: 33.33333333%; }
}

.rodape__bloco {
    margin-bottom: 30px;
}

/* A COLUNA DA LOGO TEM UM TÍTULO VAZIO NO SITE ANTIGO: SOBRA SÓ A MARGEM DELE. */
.rodape__coluna--logo .rodape__bloco {
    margin-top: 20px;
}

/* O LOGO DO RODAPÉ (DO PAINEL) NA CAIXA DO SITE ANTIGO (280x66), SEM DISTORCER. */
.rodape__coluna--logo img {
    width: auto;
    height: auto;
    max-width: min(280px, 100%);
    max-height: 66px;
}

.rodape__titulo {
    margin: 0 0 20px;
    color: #000;
    font-family: inherit;
    font-size: 16px;
    font-weight: 500;
    line-height: 16px;
}

.rodape__texto {
    margin: 0;
    color: #000;
    font-size: 14px;
    font-weight: 300;
    line-height: 20px;
}

.rodape__texto .icone {
    position: relative;
    top: 1px;
    margin-right: 10px;
}

.rodape a {
    color: #000;
}

.rodape a:hover {
    opacity: .6;
}

.rodape__contatos {
    margin: 0 0 10px;
    padding-left: 0;
    list-style: none;
}

.rodape__contatos li {
    margin-bottom: 6px;
    padding-left: 25px;
    color: #000;
    font-size: 14px;
    font-weight: 300;
    line-height: 20px;
}

.rodape__contatos .icone {
    margin-right: 10px;
    margin-left: -25px;
}

/* A FILEIRA TEM A ALTURA DE UMA LINHA MESMO SEM REDE CADASTRADA (footer.php). */
.rodape__redes {
    min-height: 20px;
    margin: 0 0 10px;
    padding-left: 40px;
    list-style: none;
    font-size: 0;
}

.rodape__redes li {
    display: inline-block;
    margin: 0 7px 0 0;
    padding-left: 25px;
    color: #000;
    font-size: 18px;
    font-weight: 300;
    line-height: 20px;
}

.rodape__redes a:hover {
    color: #506dab;
}

.rodape__lojas {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 10px;
    padding-left: 0;
    list-style: none;
}

.rodape__lojas img {
    width: 135px;
    height: auto;
}

.rodape__creditos {
    width: 100%;
    padding: 15px 0;
    border-top: 1px solid #fff;
    background-color: var(--verde-marca);
}

.rodape__creditos-coluna {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

@media (min-width: 768px) {
    .rodape__creditos-coluna { float: left; width: 50%; margin-left: 25%; }
}

/* NO CELULAR AS DUAS COLUNAS VAZIAS DO SITE ANTIGO (1px DE ALTURA E 15px DE MARGEM CADA)
   EMPILHAM ACIMA E ABAIXO DO TEXTO. */
@media (max-width: 767px) {
    .rodape__creditos-coluna { padding-top: 16px; padding-bottom: 16px; }
}

.rodape__creditos p {
    margin: 0 -15px;
    color: #fff;
    font-size: 11px;
    font-weight: 300;
    line-height: 24px;
    text-align: center;
}

@media (max-width: 767px) {
    .rodape__creditos p { line-height: 20px; }
}

.rodape__creditos a {
    color: #fff;
}

/* ---- WHATSAPP FLUTUANTE ------------------------------------------------------- */

/* BOLHA DO CHAT DO PAINEL (body.tem-chat, footer.php): LOGO ACIMA DO "VOLTAR AO TOPO" (40px, A 30px
   DA DIREITA E DO PÉ, COMO NO SITE ANTIGO), NO MESMO EIXO (CENTRO A 50px DA DIREITA), 12px ACIMA DELE.
   O `body.tem-chat` NA FRENTE VENCE O ESTILO DO PRÓPRIO WIDGET, QUE CHEGA DEPOIS DESTA FOLHA. */
body.tem-chat #sami-chat-raiz {
    right: 20px;
    bottom: 82px;
}

/* ---- AVISOS NO PÉ DA JANELA (COOKIES E INSTALAR O APP) ------------------------
   BARRA ESCURA COM TEXTURA QUE SOBE DO PÉ 1s DEPOIS DE CARREGAR (.aberto, site.js). */

.cookies-aviso {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 999;
    margin: 0;
    padding: .75rem 1.25rem;
    border: 1px solid transparent;
    border-radius: 0;
    background: #212327 url('../img/textura-cookies.webp');
    color: #ecf0f1;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(100%);
    transition: all .5s ease-out;
}

.cookies-aviso.aberto {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 1s;
}

.cookies-aviso a,
.cookies-aviso a:hover,
.cookies-aviso a:focus {
    color: var(--verde-marca);
    text-decoration: underline;
}

.cookies-aviso__botao {
    display: inline-block;
    margin-left: 10px;
    padding: 5px 10px;
    border: 0;
    border-radius: 3px;
    background-color: #256c4a;
    color: #fff;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.42857;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    touch-action: manipulation;
}

.instalar-app {
    padding-right: 45px;
}

.instalar-app__icone {
    margin-right: 10px;
    border-radius: 6px;
    vertical-align: middle;
}

.instalar-app__fechar {
    position: absolute;
    top: 50%;
    right: 12px;
    padding: 0;
    border: 0;
    background: none;
    color: #fff;
    font-size: 24px;
    line-height: 1;
    transform: translateY(-50%);
}

/* ---- FORMULÁRIOS: ISCA E AVISO ------------------------------------------------
   A ISCA (HONEYPOT) FICA FORA DA TELA, SEM display:none (ROBÔ IGNORA CAMPO OCULTO).
   O AVISO É O RESULTADO DO ENVIO SEM JAVASCRIPT (aviso-envio.php). */

.isca {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.aviso {
    margin-top: 15px;
    padding: 15px;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 14px;
}

.aviso--ok {
    border-color: #d6e9c6;
    background-color: #dff0d8;
    color: #3c763d;
}

.aviso--erro {
    border-color: #ebccd1;
    background-color: #f2dede;
    color: #a94442;
}

/* ---- POPUP DO PAINEL ---------------------------------------------------------- */

.popup-painel {
    position: fixed;
    inset: 0;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.popup-painel[hidden] {
    display: none;
}

.popup-painel__fundo {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .6);
}

.popup-painel__caixa {
    position: relative;
    max-width: 400px;
    max-height: 90vh;
}

.popup-painel__caixa img {
    display: block;
    max-width: 100%;
    max-height: 90vh;
    height: auto;
}

.popup-painel__fechar {
    position: absolute;
    top: -14px;
    right: -14px;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--verde-marca);
    color: #fff;
    font-size: 16px;
    line-height: 32px;
}