/* =====================================================================================================================
   AVALIAÇÕES: seção da página inicial (#avaliacoes), formulário (/avaliacao), confirmação e todas as avaliações (/avaliacoes)
   Cores do site: --hex_menu (destaques), --hex-detalhes (botões) e --hex_site (fundo), definidas em include/inicio_pagina.php
   ===================================================================================================================== */



/* ---------------------------------------------------------------------------------------------------------------------
   FONTE: Montserrat em todos os textos e campos das Avaliações (seção da página inicial e páginas de avaliação)
   Os campos de formulário não herdam a fonte por padrão, por isso a regra alcança todos os elementos internos;
   os ícones (Font Awesome) ficam de fora, para não perderem a fonte própria
   --------------------------------------------------------------------------------------------------------------------- */

.avaliacao_pagina,
#avaliacoes,
:is(.avaliacao_pagina, #avaliacoes) *:not(I):not([class*="fa-"]) {
    font-family:            Montserrat, Arial, sans-serif;
}



/* ---------------------------------------------------------------------------------------------------------------------
   CORES: todas derivadas da cor "Menu Selecionado" (--hex_menu) das Configurações do Site, misturada com tons neutros
   (proporções calculadas para que, com a cor padrão #008CFF, os tons fiquem iguais aos originais)
   Ao trocar a cor nas configurações, títulos, textos, bordas, fundos e sombras das Avaliações acompanham a nova cor.
   Ficam fixos apenas: branco, as cores das notas (vermelho a verde) e o vermelho das mensagens de erro (significado próprio)
   --------------------------------------------------------------------------------------------------------------------- */

:root {
    --aval_escuro:          color-mix(in srgb, var(--hex_menu) 16%, #121212);     /* Títulos, nomes, rótulos e valor da nota */
    --aval_texto:           color-mix(in srgb, var(--hex_menu) 12%, #545454);     /* Textos */
    --aval_texto:           black;                                                /* Textos */
    --aval_texto_suave:     color-mix(in srgb, var(--hex_menu) 9%,  #787878);     /* Datas, legendas e textos de ajuda */
    --aval_texto_claro:     color-mix(in srgb, var(--hex_menu) 9%,  #989898);     /* Complementos, como "(opcional)" */
    --aval_borda:           color-mix(in srgb, var(--hex_menu) 7%,  #DADADA);     /* Bordas dos campos e da paginação */
    --aval_borda_tracejada: color-mix(in srgb, var(--hex_menu) 12%, #CECECE);     /* Contorno tracejado da nota e da foto */
    --aval_fundo_preto:     black;                                                /* Barra da nota vazia e foto sem imagem */
    --aval_fundo_campo:     color-mix(in srgb, var(--hex_menu) 2%,  #FCFCFC);     /* Fundo dos campos */
    --aval_fundo_suave:     color-mix(in srgb, var(--hex_menu) 3%,  #FCFCFC);     /* Fundo do quadro da nota */
    --aval_fundo_aviso:     color-mix(in srgb, var(--hex_menu) 8%,  #FFFFFF);     /* Fundo do aviso de e-mail de confirmação */
    --aval_fundo_barra:     color-mix(in srgb, var(--hex_menu) 6%,  #E9E9E9);     /* Barra da nota vazia e foto sem imagem */
    --aval_sombra:          color-mix(in srgb, var(--aval_escuro) 10%, transparent);     /* Sombra dos cards e do formulário */
}


.avaliacao_pagina P {
    opacity: 1;
}


/* ---------------------------------------------------------------------------------------------------------------------
   TÍTULOS, RESUMO E BOTÕES (comuns à seção da página inicial e às páginas de avaliação)
   --------------------------------------------------------------------------------------------------------------------- */

.avaliacoes_topo {
    display:                flex;
    flex-wrap:              wrap;
    justify-content:        space-between;
    align-items:            flex-end;
    gap:                    20px 32px;
}

.avaliacoes_titulo {
    display:                flex;
    flex-direction:         column;
    gap:                    6px;
}

.avaliacoes_subtitulo {
    font-family:            Montserrat, Arial, sans-serif;
    font-size:              13px;
    font-weight:            700;
    letter-spacing:         0.16em;
    text-transform:         uppercase;
    color:                  var(--hex_menu);
}

.avaliacoes_titulo H1,
.avaliacoes_titulo H2,
.avaliacao_lateral H1 {
    margin:                 0;
    font-family:            Montserrat, Arial, sans-serif !important;
    font-size:              clamp(26px, 3.4vw, 36px);
    font-weight:            800;
    line-height:            1.2;
    text-wrap:              balance;
    color:                  var(--aval_escuro);
}

.avaliacoes_titulo P,
.avaliacoes_titulo LI,
.avaliacao_aviso LI, 
#formulario_avaliacao P, 
#formulario_avaliacao SPAN {
    text-align: justify;
    hyphens:    auto;
}

/* Página inicial e páginas de avaliação: subtítulo, título e texto com a mesma tipografia da seção Sobre (style-custom-ag.css) */
#avaliacoes .avaliacoes_subtitulo,
.avaliacao_pagina .avaliacoes_subtitulo {
    font-size:              clamp(1.3rem, 1vw + 0.8rem, 1.7rem);
    font-weight:            600;
    letter-spacing:         2px;
}

#avaliacoes .avaliacoes_titulo H2,
.avaliacao_pagina .avaliacoes_titulo H1,
.avaliacao_pagina .avaliacao_lateral H1 {
    font-size:              clamp(2rem, 1vw + 1rem, 3rem);
    font-weight:            400;
}

#avaliacoes .avaliacoes_vazio {
    font-family:            Montserrat, Arial, sans-serif;
    font-size:              clamp(1.4rem, calc(1.2vw + 0.8rem), 1.75rem);
    line-height:            1.8;
}

.avaliacoes_resumo {
    display:                flex;
    align-items:            center;
    gap:                    16px;
    margin-top:             12px;
}

.avaliacoes_media {
    display:                inline-flex;
    justify-content:        center;
    align-items:            center;
    min-width:              84px;
    padding:                8px 16px;
    border-radius:          8px;
    box-shadow:             0 8px 20px rgba(0, 0, 0, 0.12);
    font-family:            Montserrat, Arial, sans-serif;
    font-size:              34px;
    font-weight:            800;
    line-height:            1;
    font-variant-numeric:   tabular-nums;
}

.avaliacoes_total {
    font-size:              14px;
    line-height:            1.45;
    color:                  var(--aval_texto);
}

.avaliacoes_vazio {
    max-width:              60ch;
    margin:                 10px 0 0;
    font-size:              15px;
    color:                  var(--aval_texto);
}

/* Botão "Avaliar a Kimtel" com o link "Ver todas as avaliações" logo abaixo, centralizado */
.avaliacoes_acoes {
    display:                flex;
    flex-direction:         column;
    align-items:            center;
    gap:                    18px;
}

.avaliacoes_botao,
.avaliacoes_botao:hover,
.avaliacoes_botao:focus {
    display:                inline-flex;
    justify-content:        center;
    align-items:            center;
    min-height:             40px;
    margin-top:             10px;
    padding:                5px 26px;
    border:                 none;
    border-radius:          8px;
    /* box-shadow:             0 10px 22px rgba(var(--rgb-detalhes), 0.28); */
    font-family:            Montserrat, Arial, sans-serif;
    font-size:              15px;
    font-weight:            700;
    text-decoration:        none;
    color:                  var(--cor-texto-detalhes) !important;
    background-color:       var(--hex-detalhes);
    transition:             background-color 0.2s ease, color 0.2s ease;
    cursor:                 pointer;
}

/* HOVER sem deslocamento: fundo na cor de destaque e texto em contraste (calculado em include/inicio_pagina.php) */
.avaliacoes_botao:hover {
    color:                  var(--cor-texto-destaque) !important;
    background-color:       var(--aval_fundo_preto);
}

.avaliacoes_botao:focus-visible,
.avaliacoes_link:focus-visible {
    outline:                3px solid var(--hex_menu);
    outline-offset:         3px;
}

/* Botão secundário: Avalie também no Google */
.avaliacoes_botao.avaliacoes_botao_google,
.avaliacoes_botao.avaliacoes_botao_google:hover,
.avaliacoes_botao.avaliacoes_botao_google:focus {
    gap:                    10px;
    border:                 2px solid var(--hex-detalhes);
    box-shadow:             none;
    color:                  var(--hex-detalhes) !important;
    background-color:       #FFFFFF;
}

.avaliacoes_botao[disabled] {
    opacity:                0.6;
    cursor:                 wait;
}

.avaliacoes_link {
    font-size:              14px;
    font-weight:            600;
    text-decoration:        underline;
    text-underline-offset:  3px;
    color:                  var(--hex-detalhes) !important;
}



/* ---------------------------------------------------------------------------------------------------------------------
   SEÇÃO DA PÁGINA INICIAL: duas linhas de cards em sentidos opostos (animação em avaliacao.js)
   --------------------------------------------------------------------------------------------------------------------- */

/* Sem a margem inferior da seção Imóveis (style-custom-1.css): o espaço até as Avaliações fica próximo ao de Imóveis → Visitados */
SECTION.block.imoveis {
    margin-bottom:          0;
}

/* Espaço inferior = espaço do início da seção Sobre até o seu título (100px, style-custom-ag.css) menos os 8px da área dos cards */
SECTION.avaliacoes {
    display:                flex;
    flex-direction:         column;
    gap:                    30px;
    padding-top:            60px;
    padding-bottom:         92px;
    background:             var(--hex_site);
}

/* Mesma quebra da seção Sobre, que passa a ter 50px de espaço inicial */
@media (max-width: 768px) {
    SECTION.avaliacoes {
        padding-bottom:         42px;
    }
}

.avaliacoes_slides {
    overflow:               hidden;
    display:                flex;
    flex-direction:         column;
    gap:                    16px;
    width:                  100%;
    padding-block:          8px;
}

.avaliacoes_linha {
    display:                flex;
    width:                  100%;
    height:                 250px;
}

.avaliacoes_linha.superior {
    justify-content:        flex-start;
}

.avaliacoes_linha.inferior {
    justify-content:        flex-end;
}

.avaliacoes_modulos {
    display:                flex;
    align-items:            flex-end;
    gap:                    16px;
    width:                  max-content;
    height:                 100%;
    padding-inline:         16px;
    will-change:            transform;
}



/* ---------------------------------------------------------------------------------------------------------------------
   CARD DA AVALIAÇÃO (o conteúdo fica preso ao topo: com a altura reduzida aparecem a foto, o nome e a nota)
   --------------------------------------------------------------------------------------------------------------------- */

.avaliacao_card {
    overflow:               hidden;
    display:                flex;
    flex-direction:         column;
    flex-shrink:            0;
    width:                  300px;
    height:                 100%;
    border-radius:          14px;
    box-shadow:             0 8px 22px var(--aval_sombra);
    background-color:       #FFFFFF;
}

.avaliacao_card_conteudo {
    display:                flex;
    flex-direction:         column;
    gap:                    12px;
    height:                 100%;
    padding:                18px 18px 16px;
    box-sizing:             border-box;
}

.avaliacao_pessoa {
    display:                flex;
    align-items:            center;
    gap:                    12px;
}

.avaliacao_avatar {
    flex:                   0 0 auto;
    display:                inline-flex;
    justify-content:        center;
    align-items:            center;
    width:                  52px;
    height:                 52px;
    border-radius:          50%;
    box-sizing:             border-box;
    font-family:            Montserrat, Arial, sans-serif;
    font-size:              17px;
    font-weight:            700;
    color:                  #FFFFFF;
    object-fit:             cover;
}

.avaliacao_identificacao {
    display:                flex;
    flex:                   1;
    flex-direction:         column;
    min-width:              0;
}

.avaliacao_nome {
    overflow:               hidden;
    font-family:            Montserrat, Arial, sans-serif;
    font-size:              15px;
    font-weight:            700;
    text-overflow:          ellipsis;
    white-space:            nowrap;
    color:                  var(--aval_escuro);
}

.avaliacao_data {
    font-size:              12px;
    color:                  var(--aval_texto_suave);
}

.avaliacao_nota {
    flex:                   0 0 auto;
    min-width:              46px;
    padding:                5px 10px;
    border-radius:          8px;
    font-family:            Montserrat, Arial, sans-serif;
    font-size:              15px;
    font-weight:            800;
    line-height:            1.2;
    text-align:             center;
    font-variant-numeric:   tabular-nums;
}

.avaliacao_texto {
    display:                -webkit-box;
    overflow:               hidden;
    margin:                 0;
    font-size:              13.5px;
    line-height:            1.6;
    color:                  var(--aval_texto);
    line-clamp:             5;
    -webkit-line-clamp:     5;
    -webkit-box-orient:     vertical;
    opacity:                1;
}

/* A cor do assunto segue a cor da nota da avaliação (definida em include/card_avaliacao.php); a cor abaixo é apenas reserva */
.avaliacao_assunto {
    margin-top:             auto;
    font-family:            Montserrat, Arial, sans-serif;
    font-size:              11px;
    font-weight:            700;
    letter-spacing:         0.08em;
    text-transform:         uppercase;
    color:                  var(--hex_menu);
}



/* ---------------------------------------------------------------------------------------------------------------------
   PÁGINAS DE AVALIAÇÃO (/avaliacao, /avaliacao/confirmar e /avaliacoes)
   --------------------------------------------------------------------------------------------------------------------- */

/* Anula a altura fixa global do HEADER (485px, própria da página inicial): aqui o cabeçalho tem só a altura do menu */
#hero.avaliacao_cabecalho {
    height:                 auto !important;
}

/* Menu sempre preto desde o topo (sem a translucidez da página inicial, aplicada por custom-ag.js) */
#hero.avaliacao_cabecalho .navbar {
    background:             #000000 !important;
    backdrop-filter:        none !important;
}

/* Altura mínima de uma tela inteira */
.avaliacao_pagina {
    min-height:             100vh;
    padding-block:          50px 70px;
    background:             var(--hex_site);
}

.avaliacao_formulario_grade {
    display:                grid;
    grid-template-columns:  minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items:            start;
    gap:                    40px;
}

.avaliacao_lateral {
    display:                flex;
    flex-direction:         column;
    gap:                    16px;
}

.avaliacao_lateral P {
    max-width:              52ch;
    margin:                 0;
    font-size:              15px;
    color:                  var(--aval_texto);
    opacity:                1;
}

/* Quadro "Como funciona a publicação": sem a borda colorida à esquerda, com os quatro cantos arredondados */
.avaliacao_aviso {
    display:                flex;
    flex-direction:         column;
    gap:                    8px;
    padding:                18px 20px;
    border-radius:          10px;
    font-size:              13.5px;
    color:                  var(--aval_texto);
    background-color:       #FFFFFF;
}

.avaliacao_aviso B {
    color:                  var(--aval_escuro);
}

.avaliacao_aviso UL {
    display:                flex;
    flex-direction:         column;
    gap:                    6px;
    margin:                 0;
    padding-left:           18px;
}

.avaliacao_formulario {
    position:               relative;
    display:                flex;
    flex-direction:         column;
    gap:                    18px;
    padding:                30px;
    border-radius:          16px;
    box-shadow:             0 16px 36px var(--aval_sombra);
    background-color:       #FFFFFF;
}

.avaliacao_linha {
    display:                grid;
    grid-template-columns:  1fr 1fr;
    gap:                    18px;
}

.avaliacao_campo {
    display:                flex;
    flex-direction:         column;
    gap:                    6px;
}

.avaliacao_rotulo {
    margin:                 0;
    font-family:            Montserrat, Arial, sans-serif;
    font-size:              13px;
    font-weight:            700;
    color:                  var(--aval_escuro);
}

.avaliacao_rotulo I {
    font-style:             normal;
    color:                  #D93025;
}

.avaliacao_rotulo SPAN {
    font-weight:            500;
    color:                  var(--aval_texto_claro);
}

.avaliacao_formulario INPUT[type="text"],
.avaliacao_formulario INPUT[type="tel"],
.avaliacao_formulario INPUT[type="email"],
.avaliacao_formulario SELECT,
.avaliacao_formulario TEXTAREA {
    width:                  100%;
    height:                 auto;
    margin:                 0;
    padding:                11px 13px;
    border:                 1px solid var(--aval_borda);
    border-radius:          8px;
    box-sizing:             border-box;
    font-family:            Montserrat, Arial, sans-serif;
    font-size:              14px;
    color:                  var(--aval_escuro);
    background-color:       var(--aval_fundo_campo);
}

.avaliacao_formulario TEXTAREA {
    min-height:             110px;
    resize:                 vertical;
}

.avaliacao_formulario INPUT:focus,
.avaliacao_formulario SELECT:focus,
.avaliacao_formulario TEXTAREA:focus {
    outline:                2px solid var(--hex_menu);
    outline-offset:         1px;
    background-color:       #FFFFFF;
}

.avaliacao_formulario .com_erro {
    border-color:           #D93025 !important;
}

/* Linha abaixo da Mensagem: somente o contador de caracteres, à direita */
.avaliacao_ajuda {
    display:                flex;
    justify-content:        flex-end;
    gap:                    10px;
    font-size:              12px;
    color:                  var(--aval_texto_claro);
}

.avaliacao_erro {
    font-size:              12.5px;
    font-weight:            500;
    color:                  #D93025;
}

.avaliacao_erro:empty {
    display:                none;
}

.campo_oculto {
    overflow:               hidden;
    position:               absolute;
    left:                   -10000px;
    width:                  1px;
    height:                 1px;
}

/* Barra da nota: preenchimento e cor conforme a nota (definidos em avaliacao.js); valor ao lado e legenda abaixo da barra */
.nota_controle {
    display:                grid;
    grid-template-columns:  minmax(0, 1fr) auto;
    align-items:            center;
    gap:                    8px 18px;
    padding:                16px;
    border:                 1px dashed var(--aval_borda_tracejada);
    border-radius:          12px;
    background-color:       var(--aval_fundo_suave);
}

.nota_barra {
    overflow:               hidden;
    position:               relative;
    height:                 22px;
    border-radius:          12px;
    box-shadow:             inset 0 1px 3px rgba(0, 0, 0, 0.12);
    background-color:       var(--aval_fundo_barra);
    touch-action:           none;
    cursor:                 pointer;
    user-select:            none;
}

.nota_barra:focus-visible {
    outline:                3px solid var(--hex_menu);
    outline-offset:         3px;
}

.nota_preenchimento {
    position:               absolute;
    top:                    0;
    bottom:                 0;
    left:                   0;
    width:                  0;
    border-radius:          12px;
    transition:             width 0.2s ease, background-color 0.2s ease;
}

.nota_divisoes {
    position:               absolute;
    display:                flex;
    inset:                  0;
    pointer-events:         none;
}

.nota_divisoes I {
    flex:                   1;
    border-right:           1px solid rgba(255, 255, 255, 0.65);
}

.nota_divisoes I:last-child {
    border-right:           none;
}

.nota_valor {
    min-width:              48px;
    font-family:            Montserrat, Arial, sans-serif;
    font-size:              26px;
    font-weight:            800;
    line-height:            1.1;
    text-align:             center;
    color:                  var(--aval_escuro);
    font-variant-numeric:   tabular-nums;
}

/* Legenda na linha de baixo, alinhada à barra */
.nota_legenda {
    grid-column:            1;
    font-family:            Montserrat, Arial, sans-serif;
    font-size:              12px;
    font-weight:            400;
    color:                  var(--aval_texto_suave);
}

/* Foto de perfil com prévia (o quadro inteiro aceita arrastar e soltar o arquivo: ver iniciarFotoPerfil em avaliacao.js) */
.foto_area {
    display:                flex;
    align-items:            start;;
    gap:                    16px;
    padding:                14px;
    border:                 2px dashed var(--aval_borda_tracejada);
    border-radius:          12px;
    transition:             background-color 0.15s ease, border-color 0.15s ease;
}

/* Arquivo sendo arrastado sobre o quadro: borda e fundo na cor "Menu Selecionado" */
.foto_area.arrastando {
    border:                 2px dashed var(--hex_menu);
    background-color:       var(--aval_fundo_aviso);
}

.foto_previa {
    width:                  68px;
    height:                 68px;
    font-size:              22px;
    color:                  var(--aval_texto_claro);
    background-color:       var(--aval_fundo_barra);
    background-size:        cover;
    background-position:    center;
}

/* "flex" e "min-width": os textos ocupam o espaço ao lado da prévia e podem encolher, quebrando linha dentro do quadro (sem ultrapassar a borda) */
.foto_textos {
    display:                flex;
    flex:                   1;
    flex-direction:         column;
    gap:                    6px;
    min-width:              0;
    font-size:              12px;
    color:                  var(--aval_texto_suave);
}

.foto_botoes {
    display:                flex;
    gap:                    14px;
}

/* "overflow" e "white-space": anulam a regra geral dos LABEL (style-aux.css: uma linha, com o excesso escondido); o texto quebra linha no celular */
.foto_botao,
.foto_remover {
    overflow:               visible;
    margin:                 0;
    padding:                0;
    border:                 none;
    font-family:            Montserrat, Arial, sans-serif;
    font-size:              13px;
    font-weight:            700;
    white-space:            normal;
    color:                  var(--hex_menu);
    background:             none;
    cursor:                 pointer;
}

.foto_remover {
    color:                  #D93025;
}

.foto_area INPUT[type="file"] {
    overflow:               hidden;
    position:               absolute;
    width:                  1px;
    height:                 1px;
    opacity:                0;
}

.foto_area INPUT[type="file"]:focus-visible + .foto_previa,
.foto_area:focus-within {
    outline:                2px solid var(--hex_menu);
    outline-offset:         2px;
}

/* "overflow" e "white-space": anulam a regra geral dos LABEL (style-aux.css: uma linha, com o excesso escondido), que cortava o texto */
.avaliacao_consentimento {
    overflow:               visible;
    display:                flex;
    align-items:            center;
    gap:                    10px;
    margin:                 0;
    font-size:              13px;
    white-space:            normal;
    color:                  var(--aval_texto);
    cursor:                 pointer;
}

.avaliacao_consentimento INPUT {
    flex:                   0 0 auto;
    width:                  18px;
    height:                 18px;
    margin-top:             2px;
}

.avaliacao_aviso_envio {
    margin:                 0;
    padding:                12px 14px;
    border-radius:          8px;
    font-size:              13px;
    color:                  var(--aval_escuro);
    background-color:       var(--aval_fundo_aviso);
}

.avaliacao_aviso_envio I {
    margin-right:           6px;
    color:                  var(--hex_menu);
}

.avaliacao_mensagem_geral {
    font-size:              13.5px;
    font-weight:            600;
    color:                  #D93025;
}

.avaliacao_mensagem_geral:empty {
    display:                none;
}

/* Resultado do envio e da confirmação */
.avaliacao_resultado {
    display:                flex;
    flex-direction:         column;
    align-items:            center;
    gap:                    14px;
    max-width:              680px;     /* Cabe os dois botões lado a lado ("Ver as avaliações" e "Avalie também no Google") no computador */
    margin:                 0 auto;
    padding:                44px 32px;
    border-radius:          16px;
    box-shadow:             0 16px 36px var(--aval_sombra);
    text-align:             center;
    background-color:       #FFFFFF;
}

/* Mensagem após o envio: ocupa as duas colunas da grade do formulário, ficando centralizada como a da confirmação */
.avaliacao_formulario_grade > .avaliacao_resultado {
    grid-column:            1 / -1;
    width:                  100%;
}

.avaliacao_resultado H1,
.avaliacao_resultado H2 {
    margin:                 0;
    font-family:            Montserrat, Arial, sans-serif !important;
    font-size:              28px;
    font-weight:            800;
    color:                  var(--aval_escuro);
}

.avaliacao_resultado P {
    max-width:              52ch;
    margin:                 0;
    font-size:              15px;
    color:                  var(--aval_texto);
}

.avaliacao_resultado .avaliacao_resultado_detalhe {
    font-size:              13px;
    color:                  var(--aval_texto_suave);
}

/* Ícone do resultado (publicada, indisponível e link inválido): sempre na cor "Detalhes no Site" das Configurações do Site */
.avaliacao_resultado_icone {
    font-size:              56px;
    line-height:            1;
    color:                  var(--hex-detalhes);
}

/* Botões do resultado; o parágrafo (P) que os envolve em avaliacao.php também distribui os botões, mantendo o espaço entre eles */
.avaliacao_resultado_botoes,
.avaliacao_resultado_botoes > P {
    display:                flex;
    flex-wrap:              wrap;
    justify-content:        center;
    align-items:            center;
    gap:                    14px 22px;
    margin-top:             8px;
}

/* Sem o limite de largura dos parágrafos do quadro (.avaliacao_resultado P), para os botões ficarem lado a lado no computador */
.avaliacao_resultado_botoes > P {
    max-width:              none;
    margin:                 0;
}

/* Todas as avaliações: cards lado a lado, sem animação */
.avaliacoes_grade {
    display:                grid;
    grid-template-columns:  repeat(auto-fill, minmax(280px, 1fr));
    gap:                    20px;
    margin-top:             34px;
}

.avaliacoes_grade .avaliacao_card {
    width:                  auto;
    min-height:             220px;
}

.avaliacoes_paginacao {
    display:                flex;
    flex-wrap:              wrap;
    justify-content:        center;
    gap:                    8px;
    margin-top:             36px;
}

.avaliacoes_paginacao A {
    display:                inline-flex;
    justify-content:        center;
    align-items:            center;
    min-width:              40px;
    height:                 40px;
    padding:                0 10px;
    border:                 1px solid var(--aval_borda);
    border-radius:          8px;
    font-family:            Montserrat, Arial, sans-serif;
    font-weight:            700;
    text-decoration:        none;
    color:                  var(--hex-detalhes);
    background-color:       #FFFFFF;
}

.avaliacoes_paginacao A.atual {
    border-color:           var(--hex-detalhes);
    color:                  var(--cor-texto-detalhes);
    background-color:       var(--hex-detalhes);
}

.avaliacoes_paginacao A.desativado {
    opacity:                0.4;
    pointer-events:         none;
}



/* ---------------------------------------------------------------------------------------------------------------------
   TAMANHO DO TEXTO: formulário, mensagem de envio e confirmação (classe "avaliacao_texto_sobre", em avaliacao.php)
   Mesmo tamanho do texto da seção Sobre da página inicial (style-custom-ag.css): de 14px no celular a 17,5px no computador.
   Títulos e o valor da nota mantêm o próprio tamanho; a seção da página inicial e a listagem /avaliacoes não mudam
   --------------------------------------------------------------------------------------------------------------------- */

.avaliacao_texto_sobre {
    --aval_fonte_sobre:     clamp(1.4rem, calc(1.2vw + 0.8rem), 1.75rem);
}

.avaliacao_texto_sobre :is(.avaliacao_lateral P, .avaliacao_aviso, .avaliacao_rotulo, .avaliacao_formulario INPUT, .avaliacao_formulario SELECT,
                           .avaliacao_formulario TEXTAREA, .avaliacao_ajuda, .avaliacao_erro, .nota_legenda, .foto_textos, .foto_textos SMALL, .foto_botao,
                           .foto_remover, .avaliacao_consentimento, .avaliacao_aviso_envio, .avaliacao_mensagem_geral, .avaliacoes_botao,
                           .avaliacoes_link, .avaliacao_resultado P, .avaliacao_resultado .avaliacao_resultado_detalhe) {
    font-size:              var(--aval_fonte_sobre);
}

/* Textos corridos com a mesma entrelinha da seção Sobre */
.avaliacao_texto_sobre :is(.avaliacao_lateral P, .avaliacao_aviso, .avaliacao_consentimento, .avaliacao_aviso_envio, .avaliacao_resultado P) {
    line-height:            1.8;
}



/* ---------------------------------------------------------------------------------------------------------------------
   RESPONSIVIDADE
   --------------------------------------------------------------------------------------------------------------------- */

/* Tablets e computadores: margens laterais do formulário iguais ao espaço entre as colunas (40px = 10px da página + 30px);
   no celular (até 767px) permanece a margem padrão da página */
@media (min-width: 768px) {
    .avaliacao_formulario_grade {
        padding-inline:         30px;
    }
}

@media (max-width: 991px) {
    /* minmax(0, 1fr): impede que o conteúdo do formulário alargue a coluna além da tela (rolagem lateral no celular) */
    .avaliacao_formulario_grade {
        grid-template-columns:  minmax(0, 1fr);
        gap:                    28px;
    }
}

@media (max-width: 767px) {
    /* Espaços menores para a seção travada caber entre o menu do topo e a barra de ícones do rodapé */
    SECTION.avaliacoes {
        padding-top:            24px;
    }

    .avaliacoes_slides {
        gap:                    12px;
    }

    .avaliacoes_linha {
        height:                 230px;
    }

    .avaliacao_card {
        width:                  min(78vw, 300px);
    }

    .avaliacoes_media {
        min-width:              70px;
        font-size:              28px;
    }

    .avaliacao_pagina {
        padding-block:          30px 60px;
    }

    .avaliacao_formulario {
        padding:                22px 18px;
    }

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

    /* Botões do resultado (ex.: "Ver as avaliações" e "Avalie também no Google") um abaixo do outro, com a mesma largura */
    .avaliacao_resultado_botoes,
    .avaliacao_resultado_botoes > P {
        flex-direction:         column;
        align-items:            stretch;
        width:                  100%;
    }

    .avaliacao_resultado_botoes .avaliacoes_botao {
        width:                  100%;
        box-sizing:             border-box;
    }
}