/* ==========================================================================
   DEPOIMENTOS - CSS exclusivo da página /depoimentos/ (Depoimentos.php)

   Carregado DEPOIS do css.css global (reset, topo, rodapé, .reveal, fontes,
   .cv-container, .cv-cta). O cabeçalho azul da página (.cv-pg-topo e as
   classes cv-pg-*) mora no css.css GLOBAL porque é compartilhado com as
   outras internas -- não redeclarar aqui.

   Estrutura da página:
       .cv-dp-lista      grade dos 12 cards -- é a página inteira
       (o Est_CTA.php fecha a página, com CSS no global)

   O bloco de abertura (.cv-dp-destaque: um depoimento em corpo maior + a
   faixa de números) foi REMOVIDO em 09/09/2026 a pedido do cliente. Com
   ele saíram ~20 regras daqui; a página passou a ser só a listagem.

   Os tokens abaixo concentram cores, raios e sombras: mexer no visual é
   mexer nos tokens, não em 40 regras espalhadas. Mesma paleta da /contato/.
   ========================================================================== */

/* Os tokens ficam no .cv-dp-lista, unica secao da pagina desde que o bloco
   de destaque foi removido (09/09/2026). */
.cv-dp-lista {
    --dp-azul: #062345;
    --dp-azul-claro: #0b294d;
    --dp-ouro: #d2aa4c;
    --dp-creme: #efe9d3;
    --dp-linha: #e3ddc8;
    --dp-linha-forte: #cfc7ab;
    --dp-texto: #37475c;
    --dp-suave: #7d8899;
    --dp-raio: 16px;
    --dp-raio-g: 22px;
    --dp-sombra: 0 24px 60px rgba(6, 35, 69, .09);
}

/* Rótulo que só o leitor de tela lê (título do bloco de destaque).
   Mesmo padrão do .sr-only da
   home, redeclarado com nome próprio para não depender dela. */
.cv-dp-oculto {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ==========================================================================
   LISTA - título e grade
   ========================================================================== */

.cv-dp-lista {
    padding: 76px 0 84px;
    background: #fff;
}

/* O .cv-titulo global já traz a Afterglow em 54px e a cor azul; aqui só
   centralizamos e ajustamos o espaçamento do miolo da página. */
.cv-dp-h2 {
    margin: 0 0 14px;
    text-align: center;
}

/* O titulo da GRADE precisa de mais respiro que os demais: a barra de
   filtros que antes ocupava o espaco entre ele e os cards foi removida
   (09/09/2026), e com 14px o titulo ficava colado na primeira linha. */
#tit-todos {
    margin-bottom: 44px;
}

/* --------------------------------------------------------------------------
   Grade dos cards

   auto-fill com minmax: 3 colunas no desktop de 1170, 2 no tablet e 1 no
   celular, sem precisar de media query para a contagem. Os breakpoints
   abaixo só ajustam o mínimo.
   -------------------------------------------------------------------------- */

.cv-dp-grade {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    gap: 26px;
    align-items: start;
}

.cv-dp-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 30px 30px 26px;
    background: #fff;
    border: 1px solid var(--dp-linha);
    border-radius: var(--dp-raio-g);
    box-shadow: 0 10px 26px rgba(6, 35, 69, .05);
    transition: transform .25s var(--cv-ease), box-shadow .25s var(--cv-ease),
                border-color .25s var(--cv-ease), opacity .25s var(--cv-ease);
}

/* Sobe 4px no hover, igual aos demais cards do site. */
.cv-dp-card:hover {
    border-color: var(--dp-linha-forte);
    box-shadow: var(--dp-sombra);
    transform: translateY(-4px);
}

/* O selo de area (.cv-dp-card-area) foi REMOVIDO do card em 09/09/2026 a
   pedido do cliente -- junto com ele saiu o .cv-dp-card-area-ico. O array
   $Areas continua no PHP porque as chaves dele ainda alimentam o atributo
   data-area de cada card. */

.cv-dp-card-texto {
    flex: 1 1 auto;
    margin: 12px 0 24px;
    font: 400 15px/1.72 'Aeonik', Arial, sans-serif;
    color: var(--dp-texto);
    quotes: none;
}

.cv-dp-card-assina {
    display: flex;
    align-items: center;
    gap: 13px;
    padding-top: 20px;
    border-top: 1px solid var(--dp-linha);
}

/* Mesmo monograma do destaque, em escala menor e na paleta invertida
   (fundo creme, letra azul): dentro do card ele e apoio, nao protagonista. */
.cv-dp-card-avatar {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    font: 400 17px/1 'Afterglow', Georgia, serif;
    color: var(--dp-azul);
    background: var(--dp-creme);
    border: 2px solid var(--dp-linha-forte);
    border-radius: 50%;
}

/* MESMA caixa, quando ha foto cadastrada no Painel: o overflow recorta o
   retrato no circulo e o object-fit evita que um retrato retangular saia
   esticado. O padding vai a zero -- a foto encosta na moldura. */
.cv-dp-card-avatar--foto {
    overflow: hidden;
    background: var(--dp-creme);
}

.cv-dp-card-avatar--foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* Aviso de "ainda nao ha depoimentos": ocupa o lugar da grade enquanto o
   Painel estiver vazio. Nunca aparece junto dos cards -- e um ou outro. */
.cv-dp-vazio {
    max-width: 640px;
    margin: 8px auto 0;
    font: 400 16px/1.7 'Aeonik', Arial, sans-serif;
    color: var(--dp-texto);
    text-align: center;
}

.cv-dp-card-quem {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* H3 dentro do card: o tamanho vem daqui, não do global -- é nome de
   pessoa, não título de seção. */
.cv-dp-card-nome {
    margin: 0;
    font: 700 16px/1.3 'Aeonik', Arial, sans-serif;
    color: var(--dp-azul);
}

.cv-dp-card-cargo {
    font: 400 13px/1.4 'Aeonik', Arial, sans-serif;
    color: var(--dp-suave);
}

/* --------------------------------------------------------------------------
   Estrelas (destaque e cards)
   -------------------------------------------------------------------------- */

.cv-dp-estrelas {
    display: inline-flex;
    gap: 3px;
}

.cv-dp-estrela {
    display: inline-flex;
}

/* Apagada por padrão; a classe --on acende. Assim uma nota 4 é legível
   de relance, em vez de mostrar só 4 estrelas soltas. */
svg.cv-dp-estrela-ico {
    width: 15px;
    height: 15px;
    color: var(--dp-linha-forte);
    fill: var(--dp-linha-forte);
}

.cv-dp-estrela--on svg.cv-dp-estrela-ico {
    color: var(--dp-ouro);
    fill: var(--dp-ouro);
}

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

   Os mesmos cortes do resto do site: 1199 (tablet, container fluido),
   991, 767 (uma coluna) e 479. O .cv-container global já vira fluido nos
   breakpoints -- aqui só tratamos o que é desta página.
   ========================================================================== */

@media (max-width: 1199px) {

    .cv-dp-lista {
        padding-left: 24px;
        padding-right: 24px;
    }

}

@media (max-width: 991px) {

    .cv-dp-grade {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 20px;
    }

    

}

@media (max-width: 767px) {

    .cv-dp-lista {
        padding-top: 52px;
        padding-bottom: 58px;
    }

    /* Uma coluna: minmax de 300px estouraria em telas de 320px. */
    .cv-dp-grade {
        grid-template-columns: 1fr;
    }

    .cv-dp-h2 {
        font-size: 38px;
        line-height: 1.1;
    }

}

@media (max-width: 479px) {

    .cv-dp-lista {
        padding-left: 16px;
        padding-right: 16px;
    }

    .cv-dp-card {
        padding: 24px 20px 22px;
    }

    

    .cv-dp-h2 {
        font-size: 32px;
    }

}