/* ============================================================
   UAI. — Avaliações de clientes
   Carrossel da página de detalhe (.av-secao) e página avaliacoes.html
   ============================================================ */

/* ---------- Estrelas ---------- */
.av-estrelas{ position:relative; display:inline-block; line-height:0; vertical-align:middle; }
.av-estrelas-base,
.av-estrelas-cheias{ display:flex; gap:2px; white-space:nowrap; }
.av-estrelas-cheias{ position:absolute; inset:0 auto 0 0; overflow:hidden; }
.av-estrelas svg{ width:15px; height:15px; flex-shrink:0; }
.av-estrelas-base svg{ fill:rgba(244,242,236,0.16); }
.av-estrelas-cheias svg{ fill:var(--on-black); }
.av-estrelas--grande svg{ width:22px; height:22px; }
.av-estrelas--grande .av-estrelas-base,
.av-estrelas--grande .av-estrelas-cheias{ gap:3px; }

/* ---------- Card ---------- */
.av-card{
  display:flex; flex-direction:column; height:100%;
  background:var(--black-2); border:1px solid var(--line-on-black);
  border-radius:12px; overflow:hidden;
}
.av-card-corpo{ display:flex; flex-direction:column; gap:12px; padding:22px; flex:1; }

.av-card-nota{ display:flex; align-items:center; gap:10px; }
.av-card-nota-num{ font-family:var(--font-mono); font-size:12px; color:var(--grey-on-black); }

.av-card-titulo{
  font-family:var(--font-body); font-style:normal; text-transform:none;
  font-size:17px; font-weight:600; line-height:1.35; color:var(--on-black); margin:0;
  letter-spacing:0; text-wrap:pretty;
}
.av-card-texto{ margin:0; font-size:14.5px; line-height:1.65; color:#C9C7BE; }
.av-card--compacto .av-card-texto{
  display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden;
}

.av-card-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin-top:auto; padding-top:4px; }
.av-chip{
  font-family:var(--font-mono); font-size:11px; letter-spacing:0.06em;
  padding:4px 10px; border:1px solid var(--line-on-black-strong); border-radius:999px;
  color:var(--on-black);
}
.av-card-data{ font-size:12.5px; color:var(--grey-on-black); }
.av-verificada{ font-size:12.5px; color:#8CD97E; }

.av-card-autor{
  display:flex; align-items:center; gap:12px;
  padding-top:16px; border-top:1px solid var(--line-on-black);
}
.av-avatar{
  flex-shrink:0; display:grid; place-items:center; width:38px; height:38px; border-radius:50%;
  background:rgba(244,242,236,0.08); border:1px solid var(--line-on-black-strong);
  font-family:var(--font-mono); font-size:12.5px; color:var(--on-black);
}
.av-autor-nome{ display:block; font-size:14.5px; font-weight:600; color:var(--on-black); }
.av-autor-local{ display:block; font-size:13px; color:var(--grey-on-black); }

/* Foto da bike (página de avaliações) */
.av-card-foto{ margin:0; aspect-ratio:4 / 3; background:#0E0E0D; border-bottom:1px solid var(--line-on-black); }
.av-card-foto img{ display:block; width:100%; height:100%; object-fit:cover; }

/* Legenda com o modelo da bike sobre a foto enviada pelo cliente */
.av-card-foto--legenda{ position:relative; }
.av-card-foto--legenda::after{
  content:""; position:absolute; inset:auto 0 0 0; height:45%; pointer-events:none;
  background:linear-gradient(to top, rgba(10,10,10,0.55), transparent);
}
.av-foto-legenda{
  position:absolute; left:12px; bottom:12px; z-index:1; max-width:calc(100% - 24px);
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 12px 6px 6px; border-radius:999px;
  background:rgba(10,10,10,0.78); border:1px solid rgba(244,242,236,0.18);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.av-foto-legenda-rotulo{
  flex-shrink:0; padding:3px 8px; border-radius:999px; background:var(--on-black); color:var(--black);
  font-family:var(--font-mono); font-size:10px; font-weight:500; letter-spacing:0.12em; text-transform:uppercase;
}
.av-foto-legenda-modelo{
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:13px; font-weight:600; color:var(--on-black);
}
.av-card-foto--vazia{
  aspect-ratio:16 / 7;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
  background:
    repeating-linear-gradient(45deg, rgba(244,242,236,0.03) 0 2px, transparent 2px 10px),
    radial-gradient(90% 80% at 50% 40%, rgba(244,242,236,0.06), transparent 70%),
    #0E0E0D;
}
.av-card-foto-icone{ width:80px; color:rgba(244,242,236,0.32); }
.av-card-foto-icone svg{ display:block; width:100%; height:auto; }
.av-card-foto--vazia figcaption{
  font-family:var(--font-mono); font-size:11px; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--grey-on-black); text-align:center; padding:0 16px;
}

/* ---------- Seção carrossel (página de detalhe) ---------- */
.av-secao{ margin-top:72px; padding-top:40px; border-top:1px solid var(--line-on-black); }
.av-secao-head{
  display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap;
  gap:16px 24px; margin-bottom:24px;
}
.av-secao-titulo{ font-size:clamp(30px, 6vw, 44px); margin-top:10px; }

.av-resumo{ display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; }
.av-resumo-media{
  font-family:var(--font-display); font-size:34px; font-weight:900; font-style:italic; line-height:1;
}
.av-resumo-total{ font-size:13px; color:var(--grey-on-black); }

.av-carrossel{ margin:0 -16px; }
.av-trilho{
  display:grid; grid-auto-flow:column; grid-auto-columns:86%;
  gap:12px; padding:2px 16px; overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; scroll-padding:0 16px; scrollbar-width:none;
}
.av-trilho::-webkit-scrollbar{ display:none; }
.av-trilho:focus-visible{ outline:2px solid var(--on-black); outline-offset:4px; border-radius:12px; }
.av-slide{ scroll-snap-align:start; min-width:0; }

.av-controles{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:20px; }
.av-dots{ display:flex; gap:4px; }
.av-dot{
  width:28px; height:28px; padding:0; border:0; background:none; cursor:pointer;
  display:grid; place-items:center;
}
.av-dot::before{
  content:""; width:8px; height:8px; border-radius:999px;
  background:var(--line-on-black-strong); transition:width .2s ease, background .2s ease;
}
.av-dot.is-ativo::before{ width:22px; background:var(--on-black); }
.av-setas{ display:flex; gap:8px; }
.av-seta{
  display:grid; place-items:center; width:44px; height:44px; border-radius:50%;
  border:1px solid var(--line-on-black-strong); background:transparent; color:var(--on-black);
  cursor:pointer; transition:border-color .18s ease, background .18s ease, opacity .18s ease;
}
.av-seta svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; }
.av-seta:hover:not(:disabled){ border-color:var(--on-black); background:rgba(244,242,236,0.06); }
.av-seta:disabled{ opacity:0.3; cursor:default; }

.av-ver-todas{ margin-top:28px; }

@media (min-width:640px){
  .av-carrossel{ margin:0; }
  .av-trilho{ grid-auto-columns:calc((100% - 16px) / 2); gap:16px; padding:2px 0; scroll-padding:0; }
}
@media (max-width:639px){
  .av-ver-todas{ width:100%; justify-content:center; }
}

/* ---------- Página avaliacoes.html ---------- */
.av-page{ padding-bottom:80px; }
.av-wrap{ max-width:1080px; margin:0 auto; padding:0 16px; }

.av-hero{
  padding:110px 0 40px; border-bottom:1px solid var(--line-on-black);
  background:radial-gradient(120% 100% at 50% 0%, rgba(244,242,236,0.06), transparent 70%), var(--black);
}
.av-hero .eyebrow{ color:var(--grey-on-black); }
.av-hero h1{ font-size:clamp(40px, 9vw, 84px); margin:12px 0 14px; }
.av-hero p{ margin:0; max-width:52ch; font-size:16px; line-height:1.6; color:#D7D5CC; }
.av-voltar{
  display:block; width:fit-content; margin-bottom:24px;
  font-family:var(--font-mono); font-size:12px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--grey-on-black); text-decoration:none;
}
.av-voltar:hover{ color:var(--on-black); }

.av-painel{
  display:grid; grid-template-columns:auto 1fr; gap:32px; align-items:center;
  margin-top:32px; padding:28px; background:var(--black-2);
  border:1px solid var(--line-on-black); border-radius:12px;
}
.av-painel-media{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; padding-right:32px; border-right:1px solid var(--line-on-black); }
.av-painel-numero{
  font-family:var(--font-display); font-size:72px; font-weight:900; font-style:italic; line-height:0.9;
}
.av-painel-total{ font-size:13.5px; color:var(--grey-on-black); }

.av-barras{ display:flex; flex-direction:column; gap:6px; }
.av-barra{
  display:grid; grid-template-columns:44px 1fr 28px; align-items:center; gap:12px;
  min-height:32px; padding:2px 8px; margin:0 -8px; border:0; border-radius:6px;
  background:transparent; color:var(--on-black); cursor:pointer; text-align:left;
}
.av-barra:hover:not(:disabled){ background:rgba(244,242,236,0.05); }
.av-barra:disabled{ cursor:default; opacity:0.45; }
.av-barra.is-ativa{ background:rgba(244,242,236,0.08); }
.av-barra-rotulo{ font-family:var(--font-mono); font-size:12.5px; }
.av-barra-trilho{ height:6px; border-radius:999px; background:rgba(244,242,236,0.1); overflow:hidden; }
.av-barra-preenchida{ display:block; height:100%; border-radius:999px; background:var(--on-black); }
.av-barra-qtd{ font-family:var(--font-mono); font-size:12.5px; color:var(--grey-on-black); text-align:right; }

.av-filtros{
  display:flex; gap:8px; margin:28px -16px 0; padding:2px 16px 6px;
  overflow-x:auto; scrollbar-width:none;
}
.av-filtros::-webkit-scrollbar{ display:none; }
.av-filtro{
  flex-shrink:0; display:inline-flex; align-items:center; gap:8px; min-height:42px; padding:8px 16px;
  border:1px solid var(--line-on-black-strong); border-radius:999px; background:transparent;
  color:var(--grey-on-black); font-family:var(--font-body); font-size:14px; cursor:pointer;
  transition:border-color .18s ease, color .18s ease, background .18s ease;
}
.av-filtro:hover{ border-color:var(--on-black); color:var(--on-black); }
.av-filtro.is-ativo{ border-color:var(--on-black); background:var(--on-black); color:var(--black); font-weight:600; }
.av-filtro-qtd{ font-family:var(--font-mono); font-size:11.5px; opacity:0.7; }

.av-filtro-ativo{ margin:16px 0 0; font-size:14px; color:var(--grey-on-black); }
.av-link{
  border:0; background:none; padding:0; color:var(--on-black); font:inherit;
  text-decoration:underline; text-underline-offset:3px; cursor:pointer;
}

.av-grid{ display:grid; grid-template-columns:1fr; gap:16px; margin-top:24px; }

.av-vazio{
  margin-top:24px; padding:40px 24px; text-align:center;
  border:1px dashed var(--line-on-black-strong); border-radius:12px; color:var(--grey-on-black);
}
.av-vazio p{ margin:0 0 16px; }

@media (min-width:640px){
  .av-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .av-filtros{ flex-wrap:wrap; margin:28px 0 0; padding:0; overflow:visible; }
}
@media (min-width:960px){
  .av-hero{ padding:140px 0 56px; }
  .av-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}
@media (max-width:639px){
  .av-painel{ grid-template-columns:1fr; gap:24px; padding:22px; }
  .av-painel-media{
    flex-direction:row; flex-wrap:wrap; align-items:center; gap:8px 14px;
    padding:0 0 22px; border-right:0; border-bottom:1px solid var(--line-on-black);
  }
  .av-painel-numero{ font-size:56px; }
  .av-painel-total{ width:100%; }
}