/* Avaliacoes do Google na home (component/avaliacoes-google.jsp). Usa os tokens de home.css (:root). */
/* faixa com fundo proprio: padding cheio em cima e embaixo (mesmo ritmo das outras secoes: 112px / 72px no celular) */
.avaliacoes{background:#f1f5f9;padding:112px 0}
/* o FAQ vem com padding-top:0 inline (colado na secao "por que"); depois da faixa ele precisa do respiro normal */
.avaliacoes + .faq{padding-top:112px !important}
.avaliacoes .w{display:grid;grid-template-columns:5fr 7fr;gap:64px;align-items:start}
.avaliacoes .nota{display:flex;align-items:center;gap:16px;margin:28px 0 32px}
.avaliacoes .nota strong{font-size:clamp(64px,7vw,96px);font-weight:800;letter-spacing:-.05em;line-height:.9;font-variant-numeric:tabular-nums}
.avaliacoes .nota .total{display:block;color:var(--muted);font-size:15px;margin-top:6px}
.avaliacoes .acoes{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}

/* estrelas: faixa cinza com a parte preenchida por cima (largura = nota * 20%) */
.estrelas{position:relative;display:inline-block;width:120px;height:22px;
 background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath fill='%23d4d4d8' d='M12 1l3.1 6.6 7.2.8-5.4 4.9 1.5 7.1L12 16.8 5.6 20.4l1.5-7.1L1.7 8.4l7.2-.8z'/%3E%3C/svg%3E") repeat-x left center/24px 22px}
.estrelas span{position:absolute;inset:0 auto 0 0;overflow:hidden;
 background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath fill='%23f59e0b' d='M12 1l3.1 6.6 7.2.8-5.4 4.9 1.5 7.1L12 16.8 5.6 20.4l1.5-7.1L1.7 8.4l7.2-.8z'/%3E%3C/svg%3E") repeat-x left center/24px 22px}
.estrelas.p{width:85px;height:16px;background-size:17px 16px}
.estrelas.p span{background-size:17px 16px}

.avs{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.av{display:flex;flex-direction:column;gap:12px;background:var(--sur);border:1px solid var(--line);border-radius:16px;padding:24px}
.av .quem{display:flex;align-items:center;gap:12px}
.av .quem img,.av .ini{width:40px;height:40px;border-radius:50%;flex:none;object-fit:cover}
.av .ini{display:grid;place-items:center;background:var(--sub);color:var(--ink2);font-weight:700}
.av .nome{display:block;font-weight:700;text-decoration:none;line-height:1.25}
.av a.nome:hover{text-decoration:underline}
.av .quando{display:block;font-size:13px;color:var(--muted)}
.av p{color:var(--ink2);display:-webkit-box;-webkit-line-clamp:7;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;white-space:pre-line}
.av .ler{margin-top:auto;font-size:14px;font-weight:600;color:var(--muted);text-underline-offset:3px}
.av .ler:hover{color:var(--ink)}
.avaliacoes .fonte{grid-column:1/-1;font-size:12px;color:var(--muted);margin-top:-32px}

@media (max-width:960px){
 .avaliacoes .w{grid-template-columns:1fr;gap:40px}
 .avaliacoes .fonte{margin-top:-24px}
}
@media (max-width:600px){
 .avaliacoes{padding:72px 0}
 .avaliacoes + .faq{padding-top:72px !important}
 /* no celular os cards viram uma faixa com rolagem lateral */
 .avs{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin:0 -20px;padding:0 20px 8px;scrollbar-width:none}
 .avs::-webkit-scrollbar{display:none}
 .av{flex:0 0 86%;scroll-snap-align:start}
}