/* ==========================================================================
   PROVA — barra de notas externas e as avaliações de tutores
   ========================================================================== */

/* ---------- barra de redes ----------
   Faixa escura sangrada, encaixada entre duas seções claras. */
.selos-sociais {
    padding: clamp(18px, 2vw, 28px) var(--gutter);
    background: var(--ink);
    color: var(--offwhite);
}

.selos-sociais__lista {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(28px, 5vw, 84px);
}

.selo-social {
    display: grid;
    justify-items: center;
    gap: clamp(5px, 0.5vw, 8px);
}

/* Os arquivos são o traço em branco puro sobre transparência, feitos para
   fundo escuro. Se esta faixa deixar de ser --ink, eles somem — trocar pela
   versão colorida junto com a cor de fundo. */
.selo-social__marca {
    /* 60px em 1440 (60/1440 = 4.17vw), com piso nos 45px do mobile — a própria
       clamp cobre as duas pontas, sem media query */
    height: clamp(45px, 4.17vw, 60px);
    width: auto;
}

.selo-social__nota {
    font-size: clamp(11.5px, 0.9vw, 13.5px);
    font-weight: 600;
    color: var(--branco);
}

.selo-social__estrelas {
    height: clamp(16px, 1.35vw, 19px);
    width: auto;
    color: var(--estrela);
}

/* ---------- seção ---------- */
.prova {
    position: relative;
    padding: var(--secao-y) var(--gutter);
    background: var(--branco);
    /* clip só na horizontal: a onda transborda para baixo, sobre o FAQ */
    overflow-x: clip;
    overflow-y: visible;
}

.prova .onda { color: var(--branco); }

/* Faunia Duo: sem ficha, as avaliações vêm logo após a dobra de compra, e a
   onda que a fecha desce sobre esta seção — mesma folga no topo que a ficha
   recebe em 21-ficha.css. Depois da regra base de propósito: o `padding`
   dela, de mesma especificidade, venceria se esta viesse antes. */
.prova--apos-compra {
    padding-top: calc(var(--onda-h) * 0.62 + var(--secao-y));
}

.prova__inner { max-width: 1180px; margin: 0 auto; }

/* Mesma regua de .midia__titulo e .ficha__titulo: as aberturas de secao do
   site tem uma voz so — corpo em --ink, destaque em salvia com traco. */
.prova__titulo {
    font-family: 'Baloo 2', sans-serif;
    font-weight: 600;
    font-size: clamp(30px, 3.6vw, 52px);
    line-height: 1.08;
    letter-spacing: 0.005em;
    color: var(--ink);
    text-align: center;
    text-wrap: balance;
}

/* ---------- resumo ---------- */
.prova__resumo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr) minmax(0, 1.1fr);
    align-items: start;
    gap: clamp(26px, 4vw, 60px);
    margin-top: clamp(32px, 4vw, 56px);
}

.prova__media {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: clamp(8px, 0.9vw, 13px);
}

.prova__media-valor {
    font-size: clamp(26px, 2.6vw, 38px);
    font-weight: 800;
    line-height: 1;
    color: var(--pinho);
}

.prova__estrelas { height: clamp(17px, 1.4vw, 21px); width: auto; color: var(--estrela); }

.prova__base {
    font-size: clamp(13px, 1vw, 15px);
    color: rgba(46, 50, 39, 0.6);
}

/* ---------- histograma ---------- */
.prova__barras { display: grid; gap: clamp(6px, 0.6vw, 9px); margin-top: clamp(16px, 1.8vw, 24px); }

.prova__barra {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(8px, 0.9vw, 13px);
    font-size: clamp(12.5px, 0.95vw, 14px);
    color: rgba(46, 50, 39, 0.72);
}

.prova__barra-nota { display: flex; align-items: center; gap: 4px; font-weight: 700; }
.prova__barra-nota svg { width: 1em; height: 1em; color: var(--estrela); }

/* A trilha é o fundo; a parte preenchida vem de --preenchida, escrita no HTML
   porque é dado, não estilo. */
.prova__barra-trilha {
    height: 8px;
    border-radius: 999px;
    background: var(--cinza-selo);
    overflow: hidden;
}

.prova__barra-trilha span {
    display: block;
    width: var(--preenchida);
    height: 100%;
    border-radius: 999px;
    background: var(--sage);
}

.prova__barra-qtd { min-width: 3.5ch; text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- recomendação ---------- */
.prova__recomenda { display: grid; gap: clamp(4px, 0.5vw, 7px); }

.prova__recomenda-valor {
    font-size: clamp(26px, 2.6vw, 38px);
    font-weight: 800;
    line-height: 1;
    color: var(--sage);
}

.prova__recomenda-rotulo {
    font-size: clamp(13px, 1vw, 15px);
    line-height: 1.4;
    color: rgba(46, 50, 39, 0.7);
}

/* ---------- galeria de fotos ---------- */
/* 6 colunas para as 18 avaliações fecharem três linhas exatas. */
.prova__galeria {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: clamp(5px, 0.5vw, 8px);
}

/* Faunia Duo: oito fotos fecham duas linhas de quatro; em seis colunas
   sobrariam duas órfãs na segunda linha. */
.prova__galeria--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.prova__foto {
    display: block;
    padding: 0;
    border-radius: clamp(4px, 0.4vw, 7px);
    overflow: hidden;
    cursor: pointer;
    transition: opacity 180ms ease, scale 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.prova__foto:hover { opacity: 0.82; scale: 1.05; }

/* O quadrado é o contrato das três aparições da foto do tutor — tira, lista e
   miniatura da lente. São fotos de tutor, de proporção imprevisível: sem o
   cover, uma vertical esticaria a linha da grade. O fundo preenche a caixa
   enquanto a imagem não decodifica.
   Fora daqui fica a lente aberta, que usa `contain` para não cortar nada. */
.prova__foto img,
.lente__mini img,
.depo__foto img {
    display: block;
    width: 100%;
    /* obrigatório: o atributo `height` do HTML entra como altura definida e,
       com a largura também definida, o `aspect-ratio` é ignorado — a foto saía
       de 61px de largura por 220px de altura. Os atributos ficam porque são o
       que reserva o espaço antes da imagem chegar. */
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    background: var(--areia);
}

/* ---------- lista de depoimentos ---------- */
.prova__contagem {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-top: clamp(38px, 4.6vw, 66px);
    padding-bottom: clamp(12px, 1.3vw, 18px);
    border-bottom: 1px solid var(--linha);
    font-size: clamp(13px, 1vw, 15px);
    color: rgba(46, 50, 39, 0.6);
}

.depo-lista { display: grid; }

.depo {
    display: grid;
    grid-template-columns: clamp(190px, 19vw, 250px) minmax(0, 1fr) auto;
    gap: clamp(20px, 2.6vw, 40px);
    /* Os dois recuos ficam nomeados porque, no mobile, a nota sai do fluxo e
       ancora neles para cair dentro do cartão do tutor — ver 99-responsive.css.
       --tutor-pad vive aqui, e não no .depo__tutor, para a nota também herdar:
       ela é irmã do cartão, não filha. */
    --depo-y: clamp(24px, 2.8vw, 40px);
    --tutor-pad: clamp(16px, 1.7vw, 24px);
    padding: var(--depo-y) 0;
    border-bottom: 1px solid var(--linha);
}

/* ---------- coluna do tutor ---------- */
.depo__tutor {
    align-self: start;
    padding: var(--tutor-pad);
    border-radius: clamp(12px, 1.2vw, 18px);
    background: var(--cinza-fundo);
    box-shadow: var(--sombra-cartao);
}

.depo__id { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(9px, 1vw, 13px); }

/* Foto de perfil do tutor. Substituiu o círculo de iniciais: 100×100 de
   origem, redonda, e o cinza de fundo cobre o instante antes de carregar. */
.depo__avatar {
    display: block;
    width: clamp(38px, 3.6vw, 48px);
    height: clamp(38px, 3.6vw, 48px);
    border-radius: 50%;
    object-fit: cover;
    background: var(--cinza-selo);
}

.depo__nome { font-size: clamp(13px, 0.95vw, 14.5px); font-weight: 800; color: var(--ink); }

.depo__verificado {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 2px;
    font-size: clamp(11.5px, 0.9vw, 13px);
    color: var(--verde-vivo);
}

/* disco preenchido com o traço vago por dentro — o contorno vazado da versão
   anterior sumia no tamanho de 13px */
.depo__verificado svg { width: 1.15em; height: 1.15em; flex: none; }

.depo__ficha {
    display: grid;
    gap: clamp(7px, 0.75vw, 11px);
    margin-top: clamp(14px, 1.5vw, 20px);
    padding-top: clamp(12px, 1.3vw, 18px);
    border-top: 1px solid var(--linha);
    font-size: clamp(12px, 0.92vw, 13.5px);
}

.depo__ficha div { display: flex; justify-content: space-between; gap: 10px; }
.depo__ficha dt { color: rgba(46, 50, 39, 0.58); }
.depo__ficha dd { font-weight: 600; color: var(--ink); text-align: right; }

/* ---------- corpo ---------- */
.depo__corpo { display: grid; align-content: start; gap: clamp(8px, 0.9vw, 12px); }

.depo__nota { height: clamp(13px, 1.05vw, 15px); width: auto; color: var(--estrela); }

/* Data e "Útil" fecham o cartão na mesma horizontal, como no Mercado Livre.
   Fica fora de .depo__corpo e depois da foto: é o que deixa a ordem virar
   texto - foto - data quando o cartão empilha. */
.depo__rodape {
    grid-column: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    /* puxa para perto da ficha: o row-gap da grade vale para a emenda entre o
       conteúdo e o rodapé, que é grande demais para separar data de tutor. */
    margin-top: calc(-1 * clamp(11px, 1.75vw, 28px));
}

.depo__quando { font-size: clamp(12px, 0.92vw, 13.5px); color: rgba(46, 50, 39, 0.5); }

.depo__util {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0;
    background: none;
    font-size: clamp(12px, 0.92vw, 13.5px);
    color: rgba(46, 50, 39, 0.55);
    cursor: pointer;
    transition: color 180ms ease;
}

.depo__util svg { width: 1.2em; height: 1.2em; flex: none; }
.depo__util:hover { color: var(--ink); }

/* Marcado é estado final: não desmarca e não conta nada. */
.depo__util[aria-pressed="true"] { color: var(--azul-util); }

.depo__util[aria-pressed="true"] svg { fill: currentColor; fill-opacity: 0.16; }

.depo__titulo {
    font-size: clamp(15.5px, 1.2vw, 17px);
    font-weight: 800;
    color: var(--ink);
}

.depo__texto { font-size: clamp(14.5px, 1.08vw, 16px); line-height: 1.55; color: rgba(46, 50, 39, 0.82); }

/* Arredondamento no contêiner, não na mídia: vale para o vídeo, para o
   placeholder e para as fotos reais quando chegarem. */
.depo__foto {
    /* start, e não o stretch padrão da grade: esticado até a altura da linha o
       contêiner ficava 44px mais alto que a mídia, e o canto arredondado dele
       aparecia longe da base do vídeo. */
    align-self: start;
    width: clamp(140px, 14vw, 200px);
    border-radius: clamp(8px, 0.8vw, 12px);
    /* o `overflow` corta a mídia, nunca a sombra — ela é pintada fora da caixa */
    box-shadow: var(--sombra-cartao);
    overflow: hidden;
}

/* Mesmo quadrado das fotos: o vídeo é 16:9 e o cover corta as laterais. */
.depo__video {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    background: var(--areia);
}

.depo__foto > * { border-radius: inherit; }


/* ---------- dobra da lista ----------
   Cinco avaliações à mostra e o resto atrás do botão. Sem JS: o checkbox é o
   estado e o :has() na seção decide o que aparece. Os escondidos saem por
   display: none, então nem entram na árvore de acessibilidade. */
.prova:not(:has(#ver-mais-avaliacoes:checked)) .depo:nth-child(n + 6) { display: none; }

.depo-mais {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: fit-content;
    margin: clamp(24px, 3vw, 40px) auto 0;
    padding: clamp(13px, 1.3vw, 17px) clamp(26px, 2.8vw, 40px);
    border-radius: 999px;
    box-shadow: inset 0 0 0 1.5px var(--sage);
    color: var(--sage);
    font-size: clamp(13px, 1.05vw, 15px);
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 200ms ease, color 200ms ease;
}

.depo-mais:hover { background: var(--sage); color: var(--offwhite); }
.depo-mais svg { width: 1.15em; height: 1.15em; transition: rotate 240ms ease; }

/* aberto: o rótulo troca e a seta aponta de volta para cima */
.prova:not(:has(#ver-mais-avaliacoes:checked)) .depo-mais--fechar,
.prova:has(#ver-mais-avaliacoes:checked) .depo-mais--abrir { display: none; }
.prova:has(#ver-mais-avaliacoes:checked) .depo-mais svg { rotate: 180deg; }


/* ==========================================================================
   LENTE — a avaliação aberta a partir da grade de fotos
   ========================================================================== */

/* Coluna flex com altura teto: o palco encolhe, o rodapé nunca. É isso que
   garante que a tira de miniaturas sempre apareça, em qualquer altura de tela.
   dvh, e não vh: no iOS a barra de endereço entra e sai, e vh mede a tela
   sem ela — a caixa passava do fim da viewport.

   margin: auto é o que centraliza um <dialog> modal e vem da folha do browser;
   o reset universal de 03-base.css o zera. */
.lente {
    margin: auto;
    width: min(1060px, calc(100vw - 2 * var(--margem)));
    max-width: none;
    max-height: calc(100dvh - 2 * var(--margem));
    padding: 0;
    border: 0;
    border-radius: clamp(14px, 1.6vw, 22px);
    background: var(--branco);
    color: var(--ink);
    overflow: hidden;
}

/* O display fica no [open], nunca em .lente. A folha do browser esconde o
   <dialog> fechado com `dialog:not([open]) { display: none }`, e qualquer
   display declarado pelo autor vence essa regra por origem de cascata — a
   caixa passa a ficar visível no fim da página, fora do top layer. */
.lente[open] {
    display: flex;
    flex-direction: column;
}

.lente::backdrop { background: rgba(18, 20, 14, 0.72); }

.lente__palco {
    flex: 1 1 auto;
    /* min-height: 0 é obrigatório: sem ela um item flex não encolhe abaixo do
       conteúdo, e o rodapé é empurrado para fora da caixa. */
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: stretch;
}

/* Fundo escuro na célula da foto: ela raramente preenche a caixa inteira, e
   letterbox claro brigaria com o painel branco ao lado. Quando o que entra é
   vídeo, js/lente-avaliacoes.js põe o poster como imagem de fundo, e o vídeo
   cobre a célula como na lista — o slot nunca fica vazio. */
.lente__foto {
    display: grid;
    place-items: stretch;
    overflow: hidden;
    background: var(--ink) center / cover no-repeat;
    min-height: clamp(300px, 42vh, 520px);
}

.lente__foto video { object-fit: cover; }

/* aspect-ratio: auto é obrigatório aqui. O elemento clonado vem da grade, onde
   é quadrado por aspect-ratio — dentro de uma caixa mais baixa que larga ele
   ganhava a altura da largura e vazava por baixo, empurrando o texto. */
.lente__foto > * {
    width: 100%;
    height: 100%;
    min-height: 0;
    aspect-ratio: auto;
    border-radius: 0;
}

.lente__foto img { object-fit: contain; }

/* `position: relative` é a âncora da nota no mobile, onde ela sai do fluxo e
   vai para o canto superior direito — ver 99-responsive.css. O padding virou
   token porque a nota se encosta na mesma borda e as duas medidas têm de
   andar juntas. */
.lente__painel {
    --lente-pad: clamp(22px, 2.4vw, 34px);
    position: relative;
    display: grid;
    align-content: start;
    gap: clamp(12px, 1.4vw, 20px);
    min-height: 0;
    padding: var(--lente-pad);
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* A ficha vem da coluna do tutor, onde tinha fundo próprio; aqui ela é a
   última linha de um painel branco e só precisa do fio de cima. */
.lente__painel .depo__ficha {
    margin-top: 0;
    padding-top: clamp(12px, 1.3vw, 18px);
}

.lente__fechar {
    position: absolute;
    z-index: 2;
    top: clamp(10px, 1vw, 16px);
    right: clamp(10px, 1vw, 16px);
    display: grid;
    place-items: center;
    width: clamp(34px, 3vw, 42px);
    height: clamp(34px, 3vw, 42px);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    color: var(--ink);
    box-shadow: 0 4px 14px rgba(18, 20, 14, 0.2);
}

.lente__fechar svg { width: 52%; height: 52%; }

/* ---------- tira de miniaturas ---------- */
.lente__rodape {
    flex: none;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(8px, 1vw, 14px);
    padding: clamp(10px, 1.1vw, 16px) clamp(12px, 1.3vw, 18px);
    background: var(--cinza-fundo);
}

.lente__seta {
    display: grid;
    place-items: center;
    width: clamp(30px, 2.6vw, 38px);
    height: clamp(30px, 2.6vw, 38px);
    border-radius: 50%;
    background: var(--branco);
    color: var(--ink);
    box-shadow: 0 2px 8px rgba(18, 20, 14, 0.14);
}

.lente__seta svg { width: 48%; height: 48%; }

.lente__tiras {
    display: flex;
    gap: clamp(6px, 0.6vw, 9px);
    overflow-x: auto;
    scrollbar-width: none;
    scroll-behavior: smooth;
}

.lente__tiras::-webkit-scrollbar { display: none; }

.lente__mini {
    flex: none;
    width: clamp(52px, 5vw, 68px);
    padding: 0;
    border-radius: clamp(5px, 0.5vw, 8px);
    overflow: hidden;
    outline: 2px solid transparent;
    outline-offset: -2px;
    transition: outline-color 180ms ease;
}

.lente__mini[aria-current="true"] { outline-color: var(--sage); }
.lente__mini > * { border-radius: 0; }