*{
        margin:0;
        padding:0;
        box-sizing:border-box;
        font-family: Arial, Helvetica, sans-serif;
    }
      
    body{
        background:#f4f4f4;
    }

    /* HEADER */

    header{
        width:100%;
        height:55px;
        background:#05013a;
        display:flex;
        align-items:center;
        justify-content: flex-end;
        /*justify-content:space-between;*/
        padding:0 20px;
        color:white;
        box-shadow:0 2px 6px rgba(0,0,0,0.2);
    }

    .btn{
        background:none;
        border:none;
        color:white;
        font-size:28px;
        cursor:pointer;
    }

    /* MENU LATERAL */

    .menu-lateral {
        position: fixed;
        top: 0;
        right: -50%;

        width: 50%;
        height: 100vh;
        max-height: 100vh;

        background: linear-gradient(180deg, #05013a 0%, #0d1d73 100%);

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

        /*
        * Permite rolagem vertical quando o conteúdo
        * não couber na altura da tela.
        */
        overflow-y: auto;
        overflow-x: hidden;

        /*
        * Espaço para o conteúdo não ficar colado
        * nas extremidades.
        */
        padding: 70px 20px 30px;

        box-sizing: border-box;

        transition: right .35s ease;

        z-index: 1000;

        scrollbar-width: thin;
        scrollbar-color: rgba(255,255,255,.35) rgba(255,255,255,.05);
    }

    .menu-lateral.ativo {
        right: 0;
    }


    /* Barra de rolagem */
    .menu-lateral::-webkit-scrollbar {
        width: 8px;
    }

    .menu-lateral::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.05);
    }

    .menu-lateral::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.35);
        border-radius: 10px;
    }

    .menu-lateral::-webkit-scrollbar-thumb:hover {
        background: rgba(255, 255, 255, 0.55);
    }


    /* Tablets / telas menores */
    @media (max-width: 768px) {

        .menu-lateral {
            right: -75%;
            width: 75%;

            /*
            * Em telas menores, deixa o conteúdo
            * começar mais próximo do topo.
            */
            justify-content: flex-start;
            padding-top: 80px;
        }
    }


    /* Celulares */
    @media (max-width: 480px) {

        .menu-lateral {
            right: -100%;
            width: 100%;

            justify-content: flex-start;

            padding-top: 80px;
            padding-left: 15px;
            padding-right: 15px;
            padding-bottom: 30px;
        }
    }


    /* Botão fechar */
    .btn-fechar {
        position: absolute;
        top: 20px;
        right: 20px;

        background: none;
        border: none;

        color: #fff;
        font-size: 28px;

        cursor: pointer;

        transition: .3s;

        z-index: 2;
    }


    /* Título */
    .menu-lateral h2 {
        color: #fff;
        font-size: 2rem;
        margin-bottom: 40px;
        font-weight: 600;
        letter-spacing: 1px;
    }


    /* Lista */
    .menu-lateral ul {
        list-style: none;

        padding: 0;
        margin: 0;

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

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

        gap: 18px;
    }


    /* Item */
    .menu-lateral li {
        width: 100%;
    }


    /* Links */
    .menu-lateral a {
        display: block;

        text-decoration: none;
        color: #fff;

        text-align: center;

        font-size: 1.2rem;
        font-weight: 500;

        padding: 15px 25px;

        border-radius: 14px;

        background: rgba(255,255,255,.08);
        border: 1px solid rgba(255,255,255,.12);

        backdrop-filter: blur(6px);

        transition: .3s;

        box-sizing: border-box;
    }
    
/* ======================================================
   LOGOMARCA
====================================================== */

.logo-site {

    margin: 20px 0 0;

    padding: 0;

    text-align: center;

}

.logo-site figure {

    margin: 0;

}

.logo-site figure img {

    width: 260px;

    display: block;

    margin: 0 auto 4px;

}


/* ======================================================
   TÍTULO PRINCIPAL - H1
====================================================== */

.titulo-pagina {

    width: 100%;

    max-width: 850px;

    margin: 0;

    padding: 0 10px;

    color: #05013a;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 15px; /*font-size: 22px;*/

    font-weight: 500; /*font-weight: 700;*/

    line-height: 1.4;

    text-align: center;

    overflow-wrap: break-word;

}


/* ======================================================
   RESPONSIVIDADE
====================================================== */

@media (max-width: 480px) {

    .logo-site figure img {

        width: 210px;

    }

    .titulo-pagina {

        font-size: 12px; /*font-size: 18px;*/


        padding: 0 12px;

    }

}
    /* CONTEÚDO */

    .conteudo{
        width:100%;
        display:flex;
        flex-direction:column;
        align-items:center;
        /*padding:25px;*/ /*padding: 20px 11px;*/ padding: 4px 10px 20px 10px;
        /*gap:25px;*/ gap: 20px;      
    }

    /* CIDADE */

    .cidadeSelecionada{
        background: #f4f4f4;
        color: #05013a;
        padding:12px 20px;
        border-radius:25px;
        cursor:pointer;
        text-align:center;
        font-size:16px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    /*====================================
    ICONES DA CIDADE SELECIONADA
    =====================================*/

    .cidadeSelecionada::before{
        content: "";
        width: 18px;
        height: 18px;
        flex-shrink: 0;

        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2305013a'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5.5z'/%3E%3C/svg%3E");

        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    .cidadeSelecionada::after{
        content: "▼";
        font-size: 10px;
        margin-left: 4px;
    }

    /* PROFISSÃO */

      .caixa-profissao{
        width:100%;
        max-width:400px;
        background:white;
        padding:20px;
        border-radius:12px;
        box-shadow:0 2px 8px rgba(0,0,0,0.1);
      }
      .caixa-profissao h3{
        text-align:center;
        margin-bottom:15px;
        color:#05013a;
      }
      .caixa-profissao select{
        width:100%;
        padding:12px;
        margin-bottom:15px;
        border-radius:8px;
        border:1px solid #ccc;
        font-size:16px;

        /*
            display: flex;
            margin-top: 15px;
        */
        
      }

      /* OVERLAY */
      .overlay{
        position:fixed;
        inset:0;
        background:rgba(0,0,0,0.5);
        display:flex;
        justify-content:center;
        align-items:center;
        z-index:2000;
      }
      .caixa-selecao{
        background:white;
        width:90%;
        max-width:380px;
        padding:25px;
        border-radius:12px;
      }
      .caixa-selecao h2{
        text-align:center;
        margin-bottom:20px;
        color: #05013a;
      }
      .caixa-selecao select,
      .caixa-selecao button{
        width:100%;
        padding:12px;
        margin-top:12px;
        border-radius:8px;
        border:1px solid #ccc;
        font-size:16px;
      }
      .caixa-selecao button{
        background:#05013a;
        color:white;
        border:none;
        cursor:pointer;
      }


    /* lista de clientes */

    #listaClientes {
        display: none;
        flex-direction: column;
        align-items: center;
        gap: 15px;  /*ver aqui*/
        /*margin-top: 20px;*/
        width: 100%;
        padding: 0px 10px;
        box-sizing: border-box;
    }

    .card-atividade, .card-cadastro {
        width: 100%;
        max-width: 400px; /* mantém limite no desktop */
        min-height: 100px;

        border: 1px solid #ccc;
        border-radius: 10px;

        padding: 12px;
        box-sizing: border-box;

        display: flex;
        flex-direction: column;

    }

    .card-atividade {
        background-color: #05013a;

        position: relative;

    }

    /* Nome da atividade */

    .atividade-nome {
        flex: 1;
        min-width: 0;

        font-size: 22px;
        font-weight: bold;
        color: white;

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

    /* rodapé do card: avaliação (esquerda) + redes sociais (direita) */
    .atividade-rodape {
        flex: 1;

        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        gap: 8px;
    }

    /* média e total de avaliações */
    .atividade-avaliacao {
        display: flex;
        align-items: center;
        gap: 5px;
        min-height: 22px;

        font-size: 14px;
        color: #ffffff;
        white-space: nowrap;
    }

    .atividade-avaliacao .avaliacao-total {
        font-size: 12px;
        color: rgba(255, 255, 255, 0.7);
    }

    /* redes sociais */
    .atividade-redes {
        display: flex;
        gap: 12px;
    }

    .atividade-redes a {
        display: flex;
    }

    .atividade-redes img {
        width: 32px;
        height: 32px;
        cursor: pointer;
        transition: transform .2s;
    }

    .atividade-redes img:hover {
        transform: scale(1.1);
    }

    /* =========================
        RESPONSIVIDADE
    ========================= */

    /* tablets */
    @media (max-width: 768px) {
    .atividade-nome {
        font-size: 20px;
    }

    .atividade-redes img {
        width: 30px;
        height: 30px;
    }
    }


    /* celulares */
    @media (max-width: 480px) {
    #listaClientes {
        gap: 12px;
    }

    .card-atividade, .card-cadastro {
        max-width: 400px;
        width: 100%;
        padding: 10px;
    }

    .atividade-nome {
        font-size: 18px;
    }

    .atividade-redes {
        gap: 10px;
    }

    .atividade-redes img {
        width: 28px;
        height: 28px;
    }

    .atividade-avaliacao {
        font-size: 13px;
    }
    }

    /* telas muito pequenas */
    @media (max-width: 360px) {
    .atividade-nome {
        font-size: 16px;
    }

    .atividade-redes img {
        width: 26px;
        height: 26px;
    }

    .atividade-avaliacao {
        font-size: 12px;
    }
    }

    /* ======================================================
    INDICADOR 24 HORAS
    ====================================================== */

    .atividade-24h {

        position: absolute;

        top: 8px;
        right: 10px;

        color: #ff3b30;

        font-size: 14px;
        font-weight: 700;

        line-height: 1;

        white-space: nowrap;

        pointer-events: none;

    }


    /*
    * Quando existir o indicador 24 h,
    * deixa espaço para ele não ficar
    * sobre o nome da atividade.
    */

    .card-atividade.tem-24h .atividade-nome {

        padding-right: 48px;

    }

    /*div para cadastrar-se*/

    .card-cadastro{
        width:100%;
        min-height:100px;
        flex-direction:row; /* força ficar lado a lado */
        display:flex;
        align-items:center;
        justify-content:space-between;

        padding:11px 22px;

        background:#e3f305;
        border:1px solid #d4d400;
        border-radius:10px;

        cursor:pointer;
        transition:.2s;
        margin-bottom:90px;
    }

    @media (max-width: 480px) {
        .card-cadastro {
            padding: 10px;
        }
    }

    .card-cadastro-textos{
        display:flex;
        flex-direction:column;
        justify-content:center;
        align-items:flex-start;
    }

    .card-cadastro-titulo{
        font-size:30px;
        font-weight:700;
        color:#f57c00;
        line-height:1.1;
    }

    .card-cadastro-subtitulo{
        font-size:15px;
        color:#444;
        margin-top:4px;
    }

    .card-cadastro-logo{
        width: 65px;
        height: 65px;
        object-fit:contain;
        flex-shrink:0;
    }


    /* =======================================================
    MODAL    /      ABRIR O MODAL
    ======================================================= */

    .modal-cliente{
        display:none;
        position:fixed;
        inset:0;

        background:rgba(0,0,0,.55);

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

        z-index:9999;
    }


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

    .conteudo-modal{

        width:min(650px,95%);
        max-height:90vh;

        overflow-y:auto;

        background:#fff;

        border-radius:12px;

        box-shadow:0 15px 40px rgba(0,0,0,.25);

        padding:25px;
    }


    /* =======================================================
    TOPO
    ======================================================= */

    .modal-topo{

        display:flex;
        justify-content:flex-end;

        padding-bottom:12px;
        margin-bottom:18px;

        border-bottom:1px solid #e5e5e5;
    }


    .fechar-modal{

        width:38px;
        height:38px;

        border:none;
        border-radius:50%;

        background:#f2f2f2;

        font-size:28px;

        cursor:pointer;

        transition:.2s;
    }

    .fechar-modal:hover{

        background:#dcdcdc;
    }


    /* =======================================================
    NOME
    ======================================================= */

    #clienteNome{

        font-size:28px;
        font-weight:700;

        color:#222;

        margin-bottom:25px;
    }


    /* =======================================================
    TÍTULOS
    ======================================================= */

    .titulo-secao{

        font-size:13px;

        text-transform:uppercase;

        letter-spacing:1px;

        color:#666;

        font-weight:700;

        margin-top:20px;
        margin-bottom:8px;
    }


    /* =======================================================
    DESCRIÇÃO
    ======================================================= */
    /*
    #clienteDescricao{

        color:#444;

        font-size:16px;

        line-height:1.7;
    }
    */
    .descri{

        color:#444;

        font-size:16px;

        line-height:1.7;

        white-space: pre-wrap;
        overflow-wrap: break-word;

    }

    .sem-descri{
        font-size: 14px;
        color: #777;
        padding: 6px 0;
        font-style: italic;
    }

    /* =======================================================
    CONTATO
    ======================================================= */

    #clienteContato {
        display: flex;
        flex-direction: column;
        gap: 10px;
        font-size: 16px;
    }

    #clienteContato div {
        display: flex;
        align-items: center;
        gap: 8px;

        padding: 10px 14px;
        /*background: #f8f8f8;*/
        border-radius: 8px;

        min-width: 0;
    }

    #clienteContato .contato-icone {
        flex: 0 0 24px;
        width: 24px;
        min-width: 24px;

        text-align: center;
        line-height: 1;
    }

    #clienteContato a {
        flex: 1 1 auto;
        min-width: 0;

        color: #0066cc;
        text-decoration: none;
        font-weight: 600;

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

    #clienteContato a:hover {
        text-decoration: underline;
    }


    /* =======================================================
    REDES SOCIAIS
    ======================================================= */

    #clienteRedeSociais img {
        width: 36px;
        height: 36px;

        display: block;
    }

    #clienteRedeSociais a {
        display: flex;
        align-items: center;
        gap: 8px;

        text-decoration: none;
        margin-bottom: 10px;

        min-width: 0;
    }

    #clienteRedeSociais a img {
        width: 32px;
        height: 32px;

        min-width: 32px;
        max-width: 32px;

        flex-shrink: 0;
        object-fit: contain;
    }

    #clienteRedeSociais a span {
        display: flex;
        align-items: center;

        font-size: 14px;
        font-weight: 600;
        line-height: 1.4;

        color: #333;

        min-width: 0;

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

        text-decoration: none;
    }


    /* =======================================================
    CASO AINDA EXISTA .rede-social-copiar
    ======================================================= */
    /*
    #clienteRedeSociais .rede-social-copiar {
        display: flex;
        align-items: center;
        gap: 8px;

        margin-bottom: 10px;
        cursor: pointer;

        min-width: 0;
    }

    #clienteRedeSociais .rede-social-copiar span {
        font-size: 16px;
        font-weight: 600;
        line-height: 1.4;

        min-width: 0;

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

    #clienteRedeSociais .mensagem-copiado {
        display: none;
        font-size: 13px;
        white-space: nowrap;
    }
    */

    #clienteRedeSociais .sem-redes-sociais {
        font-size: 14px;
        color: #777;
        padding: 6px 0;
        font-style: italic;
    }
    

    /* =======================================================
    RESPONSIVO
    ======================================================= */

    @media(max-width:700px) {

        .conteudo-modal {
            width: 96%;
            padding: 18px;
        }

        #clienteNome {
            font-size: 23px;
        }

    }

    /* Modal em tela inteira em celulares */
    @media (max-width: 600px) {
        .conteudo-modal {
            width: 100%;
            height: 100dvh;
            max-height: 100dvh;
            border-radius: 0;
            padding: 18px;
        }
    }

/* ========================
Botão compartilhar 
=============================*/

#btnCompartilhar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;

    width: 100%;
    height: 60px;

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

    padding: 0;
    border: none;
    border-radius: 0;

    background: #04e904a9;
    color: #fff;

    font-size: 16px;
    font-weight: 600;
    cursor: pointer;

    z-index: 900; /* menor que o menu */
}

/*==========================================
ESTRELAS DO BANCO NO INICIO
===========================================*/

.avaliacao-estrelas {
    color: #f5b301;
    font-size: 15px;
    letter-spacing: 1px;
    line-height: 1;
}

.avaliacao-media {
    font-size: 14px;
    font-weight: 700;
    color: #333;
}

.avaliacao-total {
    font-size: 12px;
    color: #777;
}

.avaliacao-sem {
    font-size: 12px;
    color: #888;
    font-style: italic;
}

/*========================================
AVALIAÇÃO
========================================*/

.btn-avaliar,
.btn-enviar-avaliacao {
    margin-top: 16px;
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1rem;
}

.estrelas-avaliacao {
    display: flex;
    gap: 6px;
    font-size: 2rem;
    justify-content: center;
    margin: 12px 0;
}

.estrelas-avaliacao .estrela {
    color: #ccc;
    cursor: pointer;
    transition: color 0.15s;
}

.estrelas-avaliacao .estrela.marcada {
    color: #f5a623;
}

#avaliacaoComentario {
    width: 100%;
    resize: vertical;
    box-sizing: border-box;
    padding: 8px;
    margin-top: 8px;
}

.avaliacao-mensagem {
    min-height: 20px;
    margin-top: 8px;
    font-size: 0.9rem;
}

.avaliacao-mensagem.erro { color: #c0392b; }
.avaliacao-mensagem.sucesso { color: #27ae60; }

/*========================================
RESUMO DE AVALIAÇÕES (acima do botão avaliar)
========================================*/

.avaliacoes-resumo {
    margin-top: 4px;
}

.avaliacoes-vazio {
    color: #777;
    font-size: 14px;
    font-style: italic;
}

.avaliacoes-resumo-cabecalho {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.avaliacoes-resumo-media {
    font-size: 28px;
    font-weight: 700;
    color: #05013a;
}

.avaliacoes-resumo-estrelas {
    color: #f5a623;
    font-size: 18px;
}

.avaliacoes-resumo-total {
    color: #666;
    font-size: 14px;
}

.avaliacoes-resumo-barras {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.avaliacao-barra-linha {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #444;
}

.avaliacao-barra-label {
    width: 34px;
    flex-shrink: 0;
}

.avaliacao-barra-fundo {
    flex: 1;
    height: 8px;
    border-radius: 4px;
    background: #eee;
    overflow: hidden;
}

.avaliacao-barra-preenchida {
    height: 100%;
    background: #f5a623;
    border-radius: 4px;
}

.avaliacao-barra-total {
    width: 24px;
    text-align: right;
    flex-shrink: 0;
    color: #666;
}

/*========================================
LISTA DE COMENTÁRIOS (abaixo do botão avaliar)
========================================*/

.avaliacoes-lista {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.avaliacao-item {
    padding: 10px 14px;
    background: #f8f8f8;
    border-radius: 8px;
}

.avaliacao-item-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}

.avaliacao-item-estrelas {
    color: #f5a623;
    font-size: 14px;
}

.avaliacao-item-data {
    color: #999;
    font-size: 12px;
    white-space: nowrap;
}

.avaliacao-item-comentario {
    color: #333;
    font-size: 14px;
    line-height: 1.5;
    word-break: break-word;
}




/* =======================================================
   ATENDIMENTOS
======================================================= */

#clienteAtendimentos {
    width: 100%;
}


.lista-atendimentos {
    display: inline-flex;
    flex-direction: column;
    gap: 8px;
}


.atendimento-item {
    display: inline-flex;
    align-items: center;

    padding: 8px 12px;

    /*background: #f8f8f8;

    border: 1px solid #e5e5e5;
    border-radius: 8px;*/

    color: #333;

    font-size: 14px;
    font-weight: 600;

    line-height: 1.3;
}


/* Bolinha antes de cada atendimento */


.atendimento-item::before {
    content: "✓";

    color: black;

    font-size: 16px;
    font-weight: 700;

    margin-right: 10px;

    flex-shrink: 0;
}




/* =======================================================
   HORÁRIOS DE FUNCIONAMENTO
======================================================= */

#clienteHorarios {
    width: 100%;
}


.lista-horarios {
    display: flex;
    flex-direction: column;

    gap: 6px;

    width: 100%;
}


.horario-item {
    display: flex;
    align-items: flex-start; /*align-items: center;*/
    justify-content: space-between;

    gap: 15px;

    width: 100%;

    padding: 10px 14px;

    background: #f8f8f8;

    border-radius: 8px;

    box-sizing: border-box;
}


.horario-dia {
    color: #333;

    font-size: 14px;
    font-weight: 600;

    line-height: 1.4;
}


.horario-periodo {
    color: #555;

    font-size: 14px;
    font-weight: 500;

    line-height: 1.4;

    text-align: right;
    white-space: pre-line;
}


/*
 * Funcionamento durante 24 horas.
 */

.horario-24h {
    color: #d93025;

    font-size: 14px;
    font-weight: 700;

    line-height: 1.4;

    white-space: nowrap;
}


/*
 * Dia fechado.
 */

.horario-fechado {
    color: #777;

    font-size: 14px;
    font-weight: 500;

    font-style: italic;

    line-height: 1.4;

    white-space: nowrap;
}


/* =======================================================
   LOCALIZAÇÃO
======================================================= */

#clienteLocalizacao {
    width: 100%;
}


.localizacao-link {
    display: block;

    width: 100%;

    color: inherit;
    text-decoration: none;
}


.localizacao-anuncio {
    width: 100%;

    padding: 12px 14px;

    background: #f8f8f8;

    border: 1px solid transparent;
    border-radius: 8px;

    box-sizing: border-box;

    cursor: pointer;

    transition:
        background .2s,
        border-color .2s;
}


.localizacao-anuncio:hover {
    background: #f2f5fa;

    border-color: #d7dce5;
}


.localizacao-endereco {
    color: #333;

    font-size: 15px;
    font-weight: 600;

    line-height: 1.5;

    overflow-wrap: anywhere;
}


.localizacao-complemento {
    margin-top: 4px;

    color: #555;

    font-size: 14px;

    line-height: 1.5;

    overflow-wrap: anywhere;
}


.localizacao-cidade {
    margin-top: 4px;

    color: #555;

    font-size: 14px;
    font-weight: 500;

    line-height: 1.5;
}


.localizacao-referencia {
    margin-top: 7px;

    color: #666;

    font-size: 13px;

    line-height: 1.5;

    overflow-wrap: anywhere;
}


.localizacao-referencia strong {
    color: #444;
}


.localizacao-maps {
    display: inline-flex;
    align-items: center;

    margin-top: 10px;

    color: #0066cc;

    font-size: 14px;
    font-weight: 600;

    line-height: 1.4;
}


.localizacao-link:hover .localizacao-maps {
    text-decoration: underline;
}


/* =======================================================
   INFORMAÇÃO NÃO DIVULGADA
======================================================= */

/*
 * Usado quando o anunciante não informou:
 *
 * - atendimento
 * - horários
 * - localização
 */

.sem-informacao {
    color: #777;

    font-size: 14px;
    font-style: italic;

    line-height: 1.5;

    padding: 6px 0;
}


/* =======================================================
   RESPONSIVIDADE
======================================================= */

@media (max-width: 600px) {

    /*
     * Atendimento ocupa melhor o espaço
     * disponível em telas pequenas.
     */

    .lista-atendimentos {
        gap: 6px;
    }


    .atendimento-item {
        padding: 7px 10px;

        font-size: 13px;
    }


    /*
     * Horários continuam em duas colunas,
     * mas podem quebrar caso o texto seja longo.
     */

    .horario-item {
        align-items: flex-start;

        gap: 10px;

        padding: 10px 12px;
    }


    .horario-dia {
        flex: 0 0 42%;

        font-size: 13px;
    }


    .horario-periodo,
    .horario-24h,
    .horario-fechado {
        flex: 1;

        font-size: 13px;

        text-align: right;
    }


    /*
     * Localização.
     */

    .localizacao-anuncio {
        padding: 11px 12px;
    }


    .localizacao-endereco {
        font-size: 14px;
    }


    .localizacao-complemento,
    .localizacao-cidade,
    .localizacao-maps {
        font-size: 13px;
    }


    .localizacao-referencia {
        font-size: 12px;
    }

}


/* ==========================================
   INSTALAÇÃO PWA
========================================== */

.aviso-instalar-pwa {
    position: fixed;
    bottom: 0;
    left: 50%;

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

    padding: 25px 20px;
    padding-bottom: calc(
        25px + env(safe-area-inset-bottom)
    );

    background: #ffffff;

    border-radius: 20px 20px 0 0;

    box-shadow: 0 -5px 30px rgba(0,0,0,0.18);

    z-index: 10000;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translate(-50%, 110%);

    transition:
        transform .4s ease,
        opacity .4s ease,
        visibility .4s ease;
}

/* Painel visível */

.aviso-instalar-pwa.visivel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
}

/* Fechar */

.pwa-fechar {
    position: absolute;
    right: 16px;
    top: 10px;

    background: none;
    border: none;

    font-size: 26px;
    color: #777;

    cursor: pointer;
}

/* Conteúdo */

.pwa-conteudo {
    display: flex;
    align-items: center;
    gap: 15px;

    padding-right: 20px;
}

.pwa-logo {
    width: 65px;
    height: 65px;
    object-fit: contain;
    flex-shrink: 0;
}

.pwa-textos h2 {
    font-size: 18px;
    color: #05013a;
    margin-bottom: 6px;
}

.pwa-textos p {
    font-size: 14px;
    color: #555;
    line-height: 1.5;
}

/* Botões */

.pwa-botoes {
    display: flex;
    gap: 12px;
    margin-top: 22px;
}

.pwa-botoes button {
    flex: 1;
    padding: 13px 10px;

    border: none;
    border-radius: 10px;

    font-size: 15px;
    font-weight: 600;

    cursor: pointer;
}

.pwa-cancelar {
    background: #eeeeee;
    color: #333;
}

.pwa-instalar {
    background: #0866f5;
    color: #fff;
}

@media (prefers-reduced-motion: reduce) {
    .aviso-instalar-pwa {
        transition: none;
    }
}


/* =====================================================
   BOTÃO INSTALAR GUIAJOB - MENU LATERAL
===================================================== */

.menu-lateral .btn-instalar-menu {

    display: block;

    width: 100%;

    padding: 15px 25px;

    border-radius: 14px;

    background: rgba(255,255,255,.08);

    border: 1px solid rgba(255,255,255,.12);

    color: #fff;

    text-align: center;

    font-size: 1.2rem;
    font-weight: 500;
    font-family: inherit;

    cursor: pointer;

    transition: .3s;
}

.menu-lateral .btn-instalar-menu:hover {

    background: rgba(255,255,255,.18);

}

/* Respeita o atributo hidden */

.menu-lateral li[hidden] {
    display: none !important;
}