/* =========================================================
   Bebidário — feed, awards, comparar e lista de notícias
   ========================================================= */

.comunidade{padding-top:26px;padding-bottom:48px;min-height:56vh}

.com-topo{margin-bottom:20px}
.com-topo h1{font-family:var(--serif);font-size:30px;font-weight:600;letter-spacing:-.02em}
.com-topo p{font-size:13.5px;color:var(--muted);margin-top:8px;max-width:64ch;line-height:1.6}
.com-topo.premios{display:flex;align-items:flex-end;justify-content:space-between;gap:22px;flex-wrap:wrap}
.com-topo.premios > p{flex:1;min-width:280px}
.corte{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--muted);white-space:nowrap}
.corte select{
  height:34px;border-radius:var(--r-sm);border:1px solid var(--line);
  background:var(--surface);padding:0 10px;font-size:13px;cursor:pointer;
}
.corte select:focus{outline:none;border-color:var(--green-3);box-shadow:0 0 0 3px rgba(43,99,73,.12)}

/* ---------- abas ---------- */
.com-abas{
  display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;
  border-bottom:1px solid var(--line);margin-bottom:20px;
}
.com-abas::-webkit-scrollbar{display:none}
.com-abas button{
  border:0;background:none;cursor:pointer;white-space:nowrap;
  padding:10px 14px 12px;margin-bottom:-1px;font-size:13.5px;color:var(--muted);
  border-bottom:2px solid transparent;transition:color .16s,border-color .16s;
}
.com-abas button:hover{color:var(--ink-2)}
.com-abas button[aria-selected="true"]{color:var(--ink);font-weight:600;border-bottom-color:var(--green)}

/* =========================================================
   FEED
   ========================================================= */
.feed-lista{display:flex;flex-direction:column;gap:11px}
.evento{
  display:grid;grid-template-columns:74px minmax(0,1fr);
  background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r);
  overflow:hidden;transition:border-color .16s,box-shadow .18s;
}
.evento:hover{border-color:var(--line);box-shadow:var(--shadow)}
.evento .thumb{height:100%;min-height:74px}
.evento-corpo{padding:11px 14px;min-width:0}
.evento-cabeca{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px;margin-bottom:5px}
.evento-cabeca .avatar{width:21px;height:21px;font-size:9.5px}
.evento-cabeca b{font-weight:600}
.evento-cabeca .acao{color:var(--muted)}
.evento-cabeca a{color:var(--ink);text-decoration:none;font-weight:600}
.evento-cabeca a:hover{color:var(--green)}
.evento-cabeca .quando{margin-left:auto;font-size:11px;color:var(--muted-2);white-space:nowrap}
.evento-meta{font-size:11.5px;color:var(--muted-2)}
.evento p{
  font-size:13px;line-height:1.55;color:var(--ink-2);margin-top:7px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.evento .selo-tipo{
  font-size:9px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  border-radius:var(--r-pill);padding:2px 8px;
}
.selo-tipo.resenha{background:#eef5f0;color:var(--green);border:1px solid #cfe3d6}
.selo-tipo.nota{background:#fdf6e3;color:#8a6a12;border:1px solid #e8dcb8}
.selo-tipo.novidade{background:#eef0f5;color:#40506b;border:1px solid #d5dae4}
.evento .rating{font-size:12px}

/* =========================================================
   AWARDS
   ========================================================= */
.premio{margin-bottom:36px}
.premio-cabeca{
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  padding-bottom:11px;margin-bottom:16px;border-bottom:1px solid var(--line);
}
.premio-cabeca h2{font-family:var(--serif);font-size:21px;font-weight:600;letter-spacing:-.01em}
.premio-cabeca p{font-size:12.5px;color:var(--muted)}

/* pódio: as três primeiras maiores */
.podio{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-bottom:14px}
.podio .lugar{
  position:relative;display:block;background:var(--surface);
  border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden;
  text-decoration:none;color:inherit;transition:.18s;
}
.podio .lugar:hover{border-color:var(--line);box-shadow:var(--shadow);transform:translateY(-2px)}
.podio .thumb{aspect-ratio:16/10}
.podio .corpo{padding:12px 14px}
.podio .medalha{
  position:absolute;top:10px;left:10px;z-index:5;
  width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  font-size:12px;font-weight:700;color:#42350e;background:#e8c85c;
  box-shadow:0 2px 6px rgba(0,0,0,.3);
}
.podio .lugar:nth-child(2) .medalha{background:#d3d6da;color:#3d4247}
.podio .lugar:nth-child(3) .medalha{background:#d3a273;color:#412c14}
.podio h3{font-family:var(--serif);font-size:16px;font-weight:600;line-height:1.24}
.podio .lugar:hover h3{color:var(--green)}
.podio .sub{font-size:11.5px;color:var(--muted);margin-top:3px}
.podio .linha{display:flex;align-items:center;gap:9px;margin-top:9px}
.podio .votos{font-size:11px;color:var(--muted-2)}

/* demais colocados: lista compacta numerada */
.classificacao{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden}
.classificacao li{border-bottom:1px solid var(--line-2)}
.classificacao li:last-child{border-bottom:0}
.classificacao a{display:flex;align-items:center;gap:12px;padding:10px 14px;text-decoration:none;transition:background .14s}
.classificacao a:hover{background:var(--bg-soft)}
.classificacao .pos{
  font-size:12px;font-weight:600;color:var(--muted-2);width:22px;flex:none;
  font-variant-numeric:tabular-nums;
}
.classificacao .thumb{width:38px;height:38px;border-radius:var(--r-sm);flex:none}
.classificacao .info{flex:1;min-width:0}
.classificacao b{display:block;font-size:13.5px;font-weight:600;line-height:1.25}
.classificacao a:hover b{color:var(--green)}
.classificacao small{display:block;font-size:11px;color:var(--muted);margin-top:2px}
.classificacao .direita{flex:none;text-align:right}
.classificacao .votos{display:block;font-size:10.5px;color:var(--muted-2)}

/* por categoria: grade de vencedores */
.vencedores{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.vencedor{
  display:flex;align-items:center;gap:12px;background:var(--surface);
  border:1px solid var(--line-2);border-radius:var(--r);padding:11px 13px;
  text-decoration:none;color:inherit;transition:.16s;
}
.vencedor:hover{border-color:var(--green-3);box-shadow:var(--shadow)}
.vencedor .thumb{width:44px;height:44px;border-radius:var(--r-sm);flex:none}
/* `selo-cat`, nao `cat`: `.cat` no style.css e' o tile de categoria
   da home, e uma etiqueta com esse nome herdava dele fundo branco,
   borda e cantos arredondados — um retangulo cinza atras do rotulo —
   alem de casar com `.cat:hover` e levantar sozinha. */
.vencedor .selo-cat{
  display:block;font-size:9.5px;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted-2);margin-bottom:2px;
}
.vencedor b{display:block;font-size:13.5px;font-weight:600;line-height:1.25}
.vencedor:hover b{color:var(--green)}
.vencedor .rating{margin-top:3px;font-size:11.5px}

.desvio{font-size:11px;color:var(--muted-2)}

/* =========================================================
   COMPARAR
   ========================================================= */
.escolher{margin-bottom:22px}
.escolhidas{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:11px}
.escolhidas:empty{display:none}
.escolhida{
  display:inline-flex;align-items:center;gap:9px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-pill);padding:5px 6px 5px 6px;
}
.escolhida .thumb{width:26px;height:26px;border-radius:50%;flex:none}
.escolhida span{font-size:12.5px;font-weight:500;padding-right:2px}
.escolhida button{
  width:20px;height:20px;border-radius:50%;border:0;background:var(--bg-soft);
  color:var(--muted);cursor:pointer;display:grid;place-items:center;transition:.14s;
}
.escolhida button:hover{background:var(--wine);color:#fff}
.escolhida svg{width:10px;height:10px}

.busca-comparar{position:relative;max-width:420px}
.busca-comparar input{
  width:100%;height:40px;border-radius:var(--r-sm);border:1px solid var(--line);
  background:var(--surface);padding:0 13px;font-size:13.5px;
}
.busca-comparar input:focus{outline:none;border-color:var(--green-3);box-shadow:0 0 0 3px rgba(43,99,73,.12)}
.busca-comparar input:disabled{background:var(--bg-soft);cursor:not-allowed}

.comparacao{overflow-x:auto;border:1px solid var(--line-2);border-radius:var(--r);background:var(--surface)}
.comparacao table{width:100%;border-collapse:collapse;font-size:13px}
.comparacao th,.comparacao td{padding:11px 14px;border-bottom:1px solid var(--line-2);text-align:left;vertical-align:top}
.comparacao tr:last-child th,.comparacao tr:last-child td{border-bottom:0}
.comparacao thead th{background:var(--panel);border-bottom:1px solid var(--line);vertical-align:bottom}
.comparacao .rotulo{
  width:132px;font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted);background:var(--panel);white-space:nowrap;
}
.comparacao .cabeca-bebida{min-width:180px}
.comparacao .cabeca-bebida .thumb{width:100%;aspect-ratio:16/10;border-radius:var(--r-sm);margin-bottom:9px}
.comparacao .cabeca-bebida a{
  font-family:var(--serif);font-size:15px;font-weight:600;line-height:1.25;
  text-decoration:none;display:block;
}
.comparacao .cabeca-bebida a:hover{color:var(--green)}
.comparacao .cabeca-bebida small{display:block;font-size:11px;color:var(--muted);margin-top:3px;font-weight:400}
.comparacao .sem-dado{color:var(--muted-2)}

/* a melhor de cada linha ganha destaque */
.comparacao .melhor{background:#f2f8f4;font-weight:600;color:var(--green)}
.comparacao .barrinha{
  display:block;height:5px;border-radius:var(--r-pill);background:var(--line-2);
  margin-top:5px;overflow:hidden;
}
.comparacao .barrinha i{display:block;height:100%;background:var(--green-3);border-radius:inherit}
.comparacao .notinhas{display:flex;flex-wrap:wrap;gap:5px}
.comparacao .notinhas span{
  font-size:10.5px;padding:2px 8px;border-radius:var(--r-pill);color:#3a3226;
}

@media (max-width:640px){
  /* O X de tirar da comparacao tinha 20x20 — o menor alvo do site
     inteiro. Aqui ele cresce sem engordar a ficha: a area de toque
     vem de um pseudo-elemento invisivel em volta, entao o circulo
     desenhado continua pequeno e discreto. */
  .escolhida button{position:relative;width:26px;height:26px}
  .escolhida button::before{content:'';position:absolute;inset:-9px}
  .escolhida svg{width:12px;height:12px}
  .escolhida{padding:5px 8px 5px 6px}

  /* A tabela ja rola sozinha; no celular ela precisa avisar que rola.
     Sem isto a pessoa ve a primeira coluna e meia e acha que acabou. */
  .comparacao{scroll-snap-type:x proximity}
  .comparacao .cabeca-bebida{scroll-snap-align:start}
  .comparacao th,.comparacao td{padding:11px 12px}
  .comparacao .rotulo{position:sticky;left:0;z-index:1}
  .comparacao table{font-size:13px}

  .com-topo h1{font-size:25px}
  .evento{grid-template-columns:58px minmax(0,1fr)}
  .comparacao .rotulo{width:104px;font-size:10px}
}

/* =========================================================
   CELULAR
   O feed e os awards sao listas de leitura: o que faltava aqui era
   tamanho de letra, nao de botao. Medido a 375px: o carimbo de tempo
   com 9px, a contagem de votos com 10,5.
   ========================================================= */
@media (max-width:768px){
  .evento-cabeca{font-size:13px;gap:9px}
  .evento-cabeca a{display:inline-flex;align-items:center;min-height:40px}
  .evento-cabeca .quando{font-size:11.5px}
  .evento .selo-tipo{font-size:11px;padding:3px 9px}
  .podio .votos,.classificacao .votos{font-size:11.5px}
  .vencedor .selo-cat{font-size:11px}
  .com-topo .corte{font-size:13px}
}