/* ==========================================================================
   Secao 08, avaliacoes do Google. Dono: agente GOOGLE.
   Esquerda: cartao escuro com o G, 5.0 enorme, estrelas que enchem uma a uma, contador e botao.
   Direita: uma fileira de cartoes reais passando (a ficha so mostra 5 textos sem login; ver NOTAS-google.md).
   Sem JS ou em movimento reduzido: a fileira vira uma faixa rolavel com snap, tudo visivel.
   ========================================================================== */
.rev{
  overflow-x:clip;
  --bleed:max(var(--gutter),calc((100vw - var(--wrap-w)) / 2)); /* quanto a fileira sangra ate a borda da tela */
  --card-w:340px; --card-h:350px;
  transition:padding-bottom .5s var(--ease-out);
  --yellow:#FBBC05; /* amarelo das estrelas do Google: indica a fonte, nao e cor da marca */
}
.rev__grid{
  display:grid; grid-template-columns:minmax(340px,410px) minmax(0,1fr);
  grid-template-areas:"sum head" "sum row"; align-items:start;
  column-gap:clamp(32px,4vw,56px); row-gap:clamp(24px,3vw,40px);
}
.rev__h{ grid-area:head; align-self:end; max-width:15em }

/* ---------------------------------------------------------------- cartao da nota */
.rev__sum{
  grid-area:sum; align-self:stretch; position:relative; overflow:hidden; isolation:isolate;
  display:flex; flex-direction:column; justify-content:space-between; gap:36px;
  padding:clamp(28px,3vw,44px); background:var(--profundo); color:#fff; box-shadow:var(--sombra);
}
.rev__sum::before{ /* o grafismo das juntas de azulejo, bem quieto */
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:linear-gradient(rgba(221,219,212,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(221,219,212,.06) 1px,transparent 1px);
  background-size:76px 76px; background-position:-1px -1px;
  -webkit-mask-image:radial-gradient(120% 90% at 100% 100%,#000 0,transparent 72%); mask-image:radial-gradient(120% 90% at 100% 100%,#000 0,transparent 72%);
}
.rev__src{ display:flex; align-items:center; gap:12px; font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--pedra) }
.rev__gbig{ width:34px; height:34px; flex:0 0 auto }
.rev__big{ display:grid; justify-items:start }
.rev__score{
  font-size:clamp(112px,10.4vw,156px); font-weight:600; line-height:.84; letter-spacing:-.07em; font-variant-numeric:tabular-nums;
  margin-left:-.04em;
}
.rev__stars{ display:flex; gap:6px; margin-top:22px }
.st{ position:relative; display:block; width:32px; height:32px }
.st svg{ position:absolute; inset:0; width:100%; height:100% }
.st .b{ color:rgba(221,219,212,.22) }
.st .f{ color:var(--yellow); transform-origin:50% 55% }
.rev__count{ margin-top:20px; font-size:clamp(20px,1.7vw,24px); font-weight:500; letter-spacing:-.025em; line-height:1.2 }
.rev__count b{ font-weight:600; font-variant-numeric:tabular-nums }
.rev__place{ margin-top:6px; font-size:14.5px; color:var(--pedra) }

/* entrada: o cartao sobe, a fileira entra pela direita (so com JS; o JS marca .is-seen) */
.js .rev__sum[data-rev-in],.js .rev__row[data-rev-in]{ transition:opacity .9s var(--ease-out), transform 1.1s var(--ease-out) }
.js .rev__sum[data-rev-in]:not(.is-seen){ opacity:0; transform:translateY(34px) }
.js .rev__row[data-rev-in]:not(.is-seen){ opacity:0; transform:translateX(64px) }
.js .rev__row[data-rev-in]{ transition-delay:.12s }
@media (prefers-reduced-motion:reduce){ .js .rev__sum[data-rev-in],.js .rev__row[data-rev-in]{ opacity:1 !important; transform:none !important } }

/* as estrelas enchem uma a uma (so quando ha JS; sem JS ficam cheias) */
.js .rev__stars .st .f{ clip-path:inset(0 100% 0 0); transform:scale(.55) rotate(-24deg); transition:clip-path .5s var(--ease-out), transform .7s var(--ease-out) }
.js .rev__stars.is-in .st .f{ clip-path:inset(0 0 0 0); transform:none; transition-delay:calc(var(--i) * 170ms + 120ms) }
@media (prefers-reduced-motion:reduce){ .js .rev__stars .st .f{ clip-path:none; transform:none } }

/* ---------------------------------------------------------------- fileira de cartoes */
.rev__row{
  grid-area:row; position:relative; z-index:2; min-width:0; margin-right:calc(-1 * var(--bleed));
  overflow-x:auto; padding:6px 0 30px; scroll-snap-type:x proximity; scrollbar-width:thin; scrollbar-color:var(--rejunte) transparent;
}
.rev__row:focus-visible{ outline-offset:-3px }
.rev__track{ display:flex; width:max-content; padding-left:2px; will-change:transform }
.rev__group{ display:flex; align-items:stretch; gap:20px; padding-right:20px; flex:0 0 auto }

/* marquee ligado pelo JS: a faixa corta no eixo X e deixa a sombra e o cartao aberto passarem no eixo Y */
.rev__row.is-marquee{ overflow-x:clip; overflow-y:visible; padding:6px 0 0; scroll-snap-type:none; touch-action:pan-y; cursor:grab }
.rev__row.is-marquee.is-drag{ cursor:grabbing; user-select:none; -webkit-user-select:none }
.rev__row.is-marquee .rev__track{ padding-left:48px; height:var(--rev-h,auto) }
.rev__row.is-marquee::before{ /* esmaece o cartao que sai pela esquerda */
  content:""; position:absolute; z-index:4; left:0; top:-30px; bottom:-30px; width:48px; pointer-events:none;
  background:linear-gradient(90deg,var(--pedra) 18%,rgba(221,219,212,0));
}

.rev__card{
  flex:0 0 var(--card-w); width:var(--card-w); min-height:var(--card-h); scroll-snap-align:start; display:flex; flex-direction:column; gap:14px; padding:26px 26px 14px;
  box-shadow:var(--sombra-sm); transition:transform .45s var(--ease-out), box-shadow .45s;
}
.rev__card:hover{ transform:translateY(-6px); box-shadow:0 30px 50px -28px rgba(28,28,27,.5) }
.rev__who{ display:flex; align-items:center; gap:12px }
.rev__av{
  display:grid; place-items:center; flex:0 0 auto; width:44px; height:44px; border-radius:50%; background:var(--grafite); color:#fff;
  font-size:17px; font-weight:600; letter-spacing:-.02em; transition:transform .45s var(--ease-out);
}
.rev__card:hover .rev__av{ transform:scale(1.08) }
.rev__nm{ display:grid; min-width:0; flex:1; line-height:1.25 }
.rev__nm b{ font-size:16px; font-weight:600; letter-spacing:-.015em }
.rev__nm span{ font-size:13.5px; color:var(--texto2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.rev__g{ width:22px; height:22px; flex:0 0 auto; align-self:flex-start }
.rev__meta{ display:flex; align-items:center; gap:10px; margin-top:-2px }
.rev__st{ display:inline-flex; gap:2px; color:var(--yellow) }
.rev__st .i{ width:16px; height:16px }
.rev__when{ font-size:13.5px; color:var(--texto2) }
.rev__txt{ font-size:15.5px; line-height:1.6; color:var(--grafite); overflow-wrap:anywhere }
.js .rev__txt{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:5; line-clamp:5; overflow:hidden }
.rev__more{
  align-self:flex-start; margin:auto 0 0 -2px; display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 2px;
  border:0; background:none; font-size:15px; font-weight:600; text-decoration:underline; text-underline-offset:4px;
}
.rev__more[hidden]{ display:none }
.rev__more .i{ width:16px; height:16px; transition:transform .35s var(--ease-out) }
.rev__more[aria-expanded="true"] .i{ transform:rotate(180deg) }

/* enquanto um cartao esta aberto a secao ganha respiro embaixo (o cartao cresce por cima da faixa) */
.rev.has-open{ padding-bottom:calc(var(--sec-y) + 120px) }

/* cartao aberto: cresce so ele (a faixa tem altura fixa), por cima do que vem embaixo; texto longo rola por dentro */
.rev__card.is-open{ align-self:flex-start; position:relative; z-index:5; transform:none; box-shadow:0 36px 64px -30px rgba(28,28,27,.62) }
.js .rev__card.is-open .rev__txt{ display:block; -webkit-line-clamp:unset; line-clamp:unset; max-height:300px; overflow-y:auto; padding-right:8px; overscroll-behavior:contain }
.rev__txt.is-scroll:not(.at-end){ -webkit-mask-image:linear-gradient(#000 calc(100% - 44px),transparent); mask-image:linear-gradient(#000 calc(100% - 44px),transparent) }
.rev__card.is-open .rev__txt{ scrollbar-width:thin; scrollbar-color:var(--rejunte) transparent }

/* ---------------------------------------------------------------- celular e tablet */
@media (max-width:1023px){
  .rev__grid{ grid-template-columns:minmax(0,1fr); grid-template-areas:"head" "sum" "row" }
  .rev__h{ max-width:none }
  .rev__sum{ gap:30px }
  .rev__row{ margin-inline:calc(-1 * var(--gutter)); padding-left:var(--gutter) }
  .rev__row.is-marquee{ padding-left:0 }
  .rev__row.is-marquee .rev__track{ padding-left:var(--gutter) }
  .rev__row.is-marquee::before{ width:var(--gutter) }
}
@media (max-width:520px){
  .rev{ --card-w:300px; --card-h:320px }
  .rev__card{ padding:22px 22px 12px }
  .rev__stars{ margin-top:18px }
  .rev__sum .btn{ width:100% }
  .js .rev__card.is-open .rev__txt{ max-height:250px }
}