/* ==========================================================================
   DEPOIMENTOS — prova social
   Cabeçalho em três degraus (estrelas, título, apoio), faixa de pontos com
   check e a grade de depoimentos. Termina em onda sobre o rodapé.
   ========================================================================== */

/* Branca como a garantia acima e a oferta abaixo — sem emenda de cor, sem onda,
   respiro padrão nos dois lados. */
.depoimentos {
    position: relative;
    /* Topo curto para não abrir um vão em volta do cartão da garantia, mais um
       respiro extra pedido: aqui embaixo ele é maior que em cima de propósito,
       porque é deste lado que a sombra do cartão cai. */
    /* O pé carrega sozinho a emenda com a banda roxa: a oferta entra sem topo,
       de propósito, para a foto encostar nas histórias. O extra escala pela
       VIEWPORT e não pela altura desta seção — no celular ela passa de 2300px
       por causa dos cartões empilhados, e uma fração dela viraria um vão. */
    padding: var(--secao-y) var(--gutter)
             calc(var(--secao-y) + clamp(44px, 6.7vw, 96px));
    background: var(--branco);
    text-align: center;
    /* clip só na horizontal: a onda transborda para baixo e é mais larga que a tela */
    overflow-x: clip;
    overflow-y: visible;
}

.depoimentos__inner {
    position: relative;
    /* acima da onda da seção anterior, que avança sobre esta em z-index 2 */
    z-index: 3;
    max-width: 1180px;
    margin: 0 auto;
}

/* ---------- cabeçalho ---------- */
/* Mesma base das outras seções: Baloo 2 leve com a palavra destacada pesada. */
.depoimentos__titulo {
    font-family: 'Baloo 2', sans-serif;
    font-weight: 600;
    font-size: clamp(30px, 3.6vw, 52px);
    line-height: 1.08;
    color: var(--ink);
    letter-spacing: 0.005em;
}

.depoimentos__destaque {
    position: relative;
    display: inline-block;
    font-weight: 800;
    color: var(--sage);
    white-space: nowrap;
}

/* aspect-ratio casa a caixa com o viewBox — ver 09-produtos.css */
.depoimentos__traco {
    position: absolute;
    left: -6%;
    bottom: -0.42em;
    width: 112%;
    height: 0.30em;
    color: var(--terra);
    overflow: visible;
    pointer-events: none;
}

.depoimentos__apoio {
    margin: clamp(14px, 1.6vw, 22px) auto 0;
    font-size: clamp(15px, 1.25vw, 18px);
    line-height: 1.5;
    color: rgba(46, 50, 39, 0.72);
}

/* Nome da marca dentro da frase de apoio: mesmo verde das palavras destacadas
   nos títulos das seções. */
.depoimentos__marca {
    font-weight: 700;
    color: var(--sage);
}

/* ---------- pontos com ícone ---------- */
/* Linha única no desktop, quebra sozinha no mobile: são frases curtas, e uma
   grade fixa deixaria buracos em telas intermediárias. */
.depoimentos__pontos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(16px, 2.4vw, 40px);
    margin: clamp(26px, 3.2vw, 44px) auto 0;
    list-style: none;
}

.depoimentos__pontos li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: clamp(13px, 1.05vw, 15.5px);
    font-weight: 700;
    color: var(--ink);
    text-align: left;
}

/* O check genérico virou um glifo que conta o próprio ponto. Traço pesa menos
   que o disco cheio anterior, então ele volta a ganhar massa dentro de um disco
   sálvia lavado — a faixa mantém o ritmo que tinha. */
.depoimentos__pontos svg {
    width: clamp(32px, 2.6vw, 38px);
    height: clamp(32px, 2.6vw, 38px);
    flex: none;
    padding: clamp(5px, 0.42vw, 6px);
    border-radius: 50%;
    background: color-mix(in srgb, var(--sage) 13%, transparent);
    color: var(--sage);
}

/* ---------- grade ---------- */
.depoimentos__grade {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 30px;
    margin: clamp(38px, 4.6vw, 66px) auto 0;
    list-style: none;
}

/* ---------- cartão ---------- */
/* A foto tem altura fixa e o corpo ocupa o resto: com 1fr no corpo, os quatro
   cartões terminam alinhados mesmo com depoimentos de tamanhos diferentes. */
/* Cartão em off-white: com a seção branca ele precisava de outra superfície
   para continuar existindo como cartão. */
.depoimento {
    display: grid;
    grid-template-rows: auto 1fr;
    overflow: hidden;
    background: var(--offwhite);
    border-radius: clamp(16px, 1.6vw, 22px);
    box-shadow: 0 2px 6px rgba(46, 50, 39, 0.05),
                0 14px 34px rgba(46, 50, 39, 0.11);
}

/* A referência exibe 275x190; os arquivos são 825x570, exatamente 3x isso.
   Amarrar pela proporção em vez de altura fixa dispensa número mágico e não
   recorta a foto em nenhuma largura de cartão — o cover é só rede de segurança. */
.depoimento__foto {
    width: 100%;
    /* height:auto é obrigatório: sem ela vence o atributo height="570" do HTML,
       que entra como dica de apresentação, e o aspect-ratio é ignorado. */
    height: auto;
    aspect-ratio: 825 / 570;
    object-fit: cover;
    display: block;
}

/* Coluna flex porque o cartão já estica na grade (grid-template-rows: auto 1fr):
   o corpo herda a altura sobrando e a assinatura pode ser empurrada para a base. */
.depoimento__corpo {
    display: flex;
    flex-direction: column;
    padding: clamp(16px, 1.5vw, 22px);
    text-align: left;
}

/* ---------- nota ----------
   Só as estrelas: o tutor (avatar e nome) saiu em 2026-09-21 — a assinatura
   do cartão é o cão e a raça, no pé. */
.depoimento__nota { margin-top: 3px; }

.depoimento__nota {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: clamp(12px, 0.95vw, 14px);
    font-weight: 700;
    color: var(--ink);
}

.depoimento__estrelas {
    height: clamp(14px, 1.1vw, 16px);
    width: auto;
    color: var(--terra);
}

/* Era o nome do produto; passou a ser o resumo da história. Como frase, e não
   rótulo, ganhou entrelinha e largura de leitura. */
/* min-height de duas linhas (2 x line-height 1.25 = 2.5em): sem ela um resumo
   que quebra em duas linhas empurra o texto do próprio cartão para baixo e as
   quatro colunas deixam de casar. */
.depoimento__titulo {
    min-height: 2.5em;
    margin-top: clamp(8px, 0.9vw, 12px);
    font-family: 'Baloo 2', sans-serif;
    font-weight: 600;
    font-size: clamp(18px, 1.35vw, 20px);
    line-height: 1.25;
    letter-spacing: 0.005em;
    color: var(--pinho);
    text-wrap: balance;
}

.depoimento__texto {
    margin-top: clamp(8px, 0.9vw, 12px);
    font-size: clamp(15px, 1vw, 16px);
    line-height: 1.55;
    color: rgba(46, 50, 39, 0.78);
}

/* Assinatura da marca: nome do cão + raça, nunca nome do tutor.
   margin-top: auto cola na base do cartão — o padding-top garante o respiro
   mínimo quando o texto é longo e não sobra espaço para o auto distribuir. */
.depoimento__assinatura {
    margin-top: auto;
    padding-top: clamp(12px, 1.3vw, 18px);
    font-size: clamp(12px, 0.95vw, 14px);
    font-weight: 700;
    color: var(--sage-dark);
}