/* ==========================================================================
   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é.
   ========================================================================== */

/* O topo leva respiro extra porque a onda da seção anterior avança sobre esta.
   A onda tem 216px em 1440 e a curva desce até 87,5% dela — quase 190px. Com
   apenas --secao-y o conteúdo nascia dentro do arco. */
.depoimentos {
    position: relative;
    padding: calc(var(--secao-y) + clamp(60px, 9vw, 130px)) var(--gutter) var(--secao-y);
    background: var(--offwhite);
    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 .onda { color: var(--offwhite); }

.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 ---------- */
/* Margem curta: o Baloo 2 já traz entrelinha própria acima das maiúsculas, e o
   valor anterior somava a ela — as estrelas ficavam soltas do título. */
.depoimentos__estrelas {
    display: block;
    height: clamp(18px, 1.5vw, 22px);
    width: auto;
    margin: 0 auto clamp(2px, 0.3vw, 5px);
    color: var(--terra);
}

/* 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.30em;
    width: 112%;
    aspect-ratio: 280 / 30;
    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);
}

/* ---------- pontos com check ---------- */
/* 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;
}

.depoimentos__pontos svg {
    width: clamp(20px, 1.7vw, 25px);
    height: clamp(20px, 1.7vw, 25px);
    flex: none;
    color: var(--sage);
}

/* ---------- grade ---------- */
.depoimentos__grade {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(14px, 1.8vw, 24px);
    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. */
.depoimento {
    display: grid;
    grid-template-rows: auto 1fr;
    overflow: hidden;
    background: var(--branco);
    border-radius: clamp(16px, 1.6vw, 22px);
    box-shadow: 0 12px 30px rgba(46, 50, 39, 0.06);
}

/* 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;
}

.depoimento__corpo {
    padding: clamp(16px, 1.5vw, 22px);
    text-align: left;
}

.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(12px, 1vw, 14px);
    width: auto;
    color: var(--terra);
}

.depoimento__produto {
    margin-top: clamp(8px, 0.9vw, 12px);
    font-family: 'Baloo 2', sans-serif;
    font-weight: 600;
    font-size: clamp(16px, 1.35vw, 19px);
    line-height: 1.2;
    color: var(--pinho);
}

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

/* Assinatura da marca: nome do cão + raça, nunca nome do tutor. */
.depoimento__assinatura {
    margin-top: clamp(12px, 1.3vw, 18px);
    font-size: clamp(12px, 0.95vw, 14px);
    font-weight: 700;
    color: var(--sage-dark);
}