/* ============================================================
   OPINIÕES — as estrelas do original estavam em #F49537 sobre
   #F5E8D8 (1,89:1, falha de contraste) e a nota era transmitida
   só por cor. Aqui: --c-estrela (4,14:1) + texto para leitores
   de tela + origem da avaliação.
   ============================================================ */
.opinioes__nota {
  display: inline-flex; align-items: center; gap: var(--sp-sm);
  margin-top: var(--sp-md); font-size: var(--fs-lead);
}
.opinioes__nota strong { font-size: var(--fs-display-md); font-family: var(--font-display); color: var(--c-tijolo); }
.opinioes__nota a {
  display: inline-flex; align-items: center;
  min-height: var(--tap-min); padding-inline: var(--sp-2xs);
}

.estrelas { display: inline-flex; color: var(--c-estrela); font-size: 15px; }
/* a fileira de 5 estrelas é uma máscara só (104x18): a largura tem
   de vir da proporção, não de 1em — senão as cinco encolhem dentro
   de um quadrado e viram pontinhos. */
.estrelas .ico { width: auto; height: 1em; }

/* Todos os quatro à vista no desktop e no tablet; 2 x 2 no mobile. */
.depos {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--grid-gap);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 768px) { .depos { grid-template-columns: repeat(4, 1fr); } }

/* Card no modelo entregue (Modelo Opiniões.pdf): aspas e estrelas
   na mesma linha no topo, depoimento centrado, nome embaixo.
   Saíram o avatar, a procedência e o "Ler mais" — não existem no
   modelo e o texto passa a aparecer inteiro. */
.depos {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--grid-gap);
  grid-template-columns: repeat(4, 1fr);
}

/* MOBILE: carrossel em vez de grade.
   Em duas colunas num celular cada quadro ficava com ~130px úteis e
   o depoimento saía com uma palavra por linha. Aqui cada quadro
   ocupa quase a tela inteira e o dedo passa de um para o outro;
   scroll-snap faz parar centralizado, sem JavaScript. */
@media (max-width: 767px) {
  .depos {
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-auto-columns: min(78vw, 330px);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    /* o respiro lateral entra como padding para o primeiro e o
       último quadro pararem centralizados também */
    padding-inline: max(var(--gutter), calc((100vw - min(78vw, 330px)) / 2));
    margin-inline: calc(var(--gutter) * -1);
    scrollbar-width: none;
  }
  .depos::-webkit-scrollbar { display: none; }
  .depos > .depo { scroll-snap-align: center; }
  .depos:focus-visible { outline: 3px solid var(--c-tijolo); outline-offset: 4px; }
}

.depo {
  /* min-width:auto é o padrão de item de grade: a linha de aspas +
     estrelas (133px) virava piso e as duas colunas estouravam a
     tela num aparelho de 280px (Galaxy Fold fechado). */
  min-width: 0;
  display: flex; flex-direction: column;
  gap: var(--sp-lg);
  background: var(--c-creme);
  padding: clamp(18px, 2.2vw, 30px) clamp(14px, 1.8vw, 26px);
  clip-path: var(--shape-card);     /* quadro-v.svg */
  height: 100%;
  text-align: center;
}

.depo__topo {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap;
  gap: var(--sp-xs) var(--sp-md);
}
.depo__aspas { width: 30px; height: 24px; color: var(--c-mostarda); flex: none; }

.depo__texto {
  font-size: clamp(0.8125rem, 0.6rem + 0.5vw, 1rem);
  line-height: 1.5;
  color: var(--c-texto);
  margin-block: auto;
}

.depo__nome {
  font-weight: 700;
  font-size: clamp(0.8125rem, 0.65rem + 0.35vw, 0.9375rem);
  color: var(--c-texto);
}

@media (min-width: 1024px) {
  .depo__avatar { width: 44px; height: 44px; }
}