/* Clube de Vantagens de Araras (CVA) — estilos do card e da vitrine.
 *
 * Carregado tanto por /clube quanto pelo preview do painel: o card tem que ser
 * pixel a pixel o mesmo nos dois lugares.
 *
 * Paleta vem da logo (assets/cva-logo.webp): o TEAL é a cor estrutural e o CORAL é o
 * destaque. O amarelo e o azul-claro da logo ficam em detalhe, nunca em bloco
 * grande — logo colorida sobre fundo colorido vira poluição.
 *
 * ⚠️ Os tokens `--sc-*` (herdados do Star Clube) continuam existindo como
 * APELIDOS dos novos. Não é preguiça: eles são usados em clube-card.js,
 * painel.html e admin.html, e mantê-los apontando pra cá faz a virada de
 * identidade acontecer NUM LUGAR SÓ, sem varrer quatro arquivos atrás de
 * `var(--sc-navy)`. Código novo deve usar os nomes `--cva-*`.
 */

:root {
  /* Identidade do clube */
  --cva-teal: #17879B;
  --cva-teal-esc: #0F6274;
  --cva-coral: #F0674A;
  --cva-amarelo: #F7B32B;
  --cva-azul: #4BA3D3;

  /* Marca do Meu Caderninho Digital (faixa e banner do painel) */
  --mcd-navy: #13315C;

  /* Apelidos históricos — ver a nota acima */
  --sc-navy: var(--cva-teal);
  --sc-navy-esc: var(--cva-teal-esc);
  --sc-teal: var(--cva-teal);
  --sc-laranja: var(--cva-coral);
  --sc-magenta: var(--cva-coral);
  --sc-roxo: var(--cva-azul);

  --sc-bg: #FAF7F2;          /* mesmo fundo do claro.css: o clube é parte do site */
  --sc-surface: #FFFFFF;
  --sc-ink: #1A1A1A;
  --sc-muted: #6B6B6B;
  --sc-border: #E6E1D8;
  --sc-radius: 16px;
  --sc-sombra: 0 2px 10px rgba(23, 135, 155, .08);
  --sc-sombra-alta: 0 10px 30px rgba(23, 135, 155, .15);
}

/* ── Card ─────────────────────────────────────────────────────────────────── */

.cc-card {
  background: var(--sc-surface);
  border: 1px solid var(--sc-border);
  border-radius: var(--sc-radius);
  box-shadow: var(--sc-sombra);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow .2s ease, transform .2s ease;
}

.cc-card:hover { box-shadow: var(--sc-sombra-alta); transform: translateY(-2px); }

/* No preview o card não flutua: ele está dentro de um painel, não numa grade. */
.cc-preview:hover { transform: none; }

/* Carrossel */
.cc-carrossel { position: relative; aspect-ratio: 16 / 9; background: #EFEBE4; overflow: hidden; }
.cc-trilho { display: flex; height: 100%; transition: transform .5s ease; }
.cc-slide { position: relative; flex: 0 0 100%; height: 100%; }
.cc-slide-img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Slide de IMAGEM mostra a foto inteira (o card enquadra, não corta) e é
   clicável pra ampliar. O vídeo (thumb 4:3) segue em cover. */
.cc-slide[data-tipo="imagem"] .cc-slide-img { object-fit: contain; cursor: zoom-in; }

/* Slide do Instagram: capa nossa, não embed. O gradiente é o da marca deles —
   o visitante precisa entender pra onde o botão leva antes de tocar. */
.cc-ig-capa {
  width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 18px; text-align: center;
  background: linear-gradient(135deg, #833AB4 0%, #E1306C 55%, #F77737 100%);
  color: #fff;
}
.cc-ig-ico {
  width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .18); border: 2px solid rgba(255, 255, 255, .7);
  font-size: 1.05rem; padding-left: 4px; /* o ▶ é opticamente descentrado */
}
.cc-ig-rot { font-size: .82rem; font-weight: 700; letter-spacing: .01em; }
.cc-ig-btn {
  background: #fff; color: #C1306B; text-decoration: none;
  font-weight: 700; font-size: .82rem;
  padding: 9px 16px; border-radius: 20px;
}
.cc-ig-btn:hover { background: #F4F0F6; }

/* Lightbox: overlay único, criado por JS e anexado ao body. */
.cc-lightbox {
  position: fixed; inset: 0; z-index: 9999; padding: 20px;
  background: rgba(0, 0, 0, .88); cursor: zoom-out;
  display: flex; align-items: center; justify-content: center;
}
.cc-lightbox[hidden] { display: none; }
.cc-lb-img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; }
.cc-lb-fechar {
  position: absolute; top: 12px; right: 18px; z-index: 1;
  background: none; border: none; color: #fff; font-size: 2.2rem; line-height: 1;
  cursor: pointer; padding: 4px 10px;
}
.cc-video { width: 100%; height: 100%; border: 0; display: block; }

.cc-play {
  position: absolute; inset: 0; margin: auto;
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(31, 58, 110, .85); color: #fff;
  border: 2px solid rgba(255, 255, 255, .9);
  font-size: 1.2rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding-left: 4px; /* o glifo ▶ tem peso ótico à esquerda */
  transition: background .15s ease, transform .15s ease;
}
.cc-play:hover { background: var(--sc-magenta); transform: scale(1.06); }

.cc-dots {
  position: absolute; bottom: 8px; left: 0; right: 0;
  display: flex; justify-content: center; gap: 6px;
}
.cc-dot {
  width: 7px; height: 7px; border-radius: 50%; padding: 0;
  border: 1px solid rgba(255, 255, 255, .8);
  background: rgba(255, 255, 255, .35); cursor: pointer;
  transition: background .2s ease, width .2s ease;
}
.cc-dot.on { background: #fff; width: 18px; border-radius: 4px; }

/* Cabeçalho */
.cc-topo { display: flex; align-items: center; gap: 12px; padding: 16px 18px 0; }

.cc-logo {
  width: 52px; height: 52px; border-radius: 12px; flex: 0 0 52px;
  object-fit: contain; background: #fff;
  border: 1px solid var(--sc-border); padding: 4px;
}
/* Ladrilho de iniciais de quem não enviou logo. Desde que a logo virou
   opcional (01/08/2026) isto é o caso COMUM, não a exceção — então tem que
   parecer escolha de design e não espaço vazio: fundo teal cheio, iniciais
   apertadas e centradas. `letter-spacing` negativo porque duas maiúsculas
   soltas boiam dentro do quadro. */
.cc-logo-vazia {
  display: flex; align-items: center; justify-content: center;
  background: var(--sc-navy); color: #fff;
  font-weight: 800; font-size: 1.18rem; letter-spacing: -.03em;
  padding: 0; text-transform: uppercase;
}

.cc-ident { min-width: 0; }
.cc-nome {
  font-size: 1.05rem; font-weight: 800; color: var(--sc-navy);
  margin: 0 0 2px; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Uma empresa pode marcar várias categorias — os selos quebram em linha nova
   quando não cabem, em vez de estourar a largura do card. */
.cc-cats { display: flex; flex-wrap: wrap; gap: 4px; }
.cc-cat {
  display: inline-block; font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--sc-teal); background: rgba(43, 179, 184, .1);
  border-radius: 20px; padding: 3px 9px;
}

/* Benefício em destaque — é o motivo do card existir, então é o elemento de
   maior peso visual depois do nome. */
.cc-selo {
  margin: 14px 18px 0; padding: 11px 14px;
  background: linear-gradient(100deg, var(--sc-magenta), var(--sc-roxo));
  color: #fff; font-weight: 800; font-size: 1.15rem;
  text-align: center; border-radius: 10px; letter-spacing: .01em;
}
.cc-selo-off { background: #9A9A9A; }

.cc-desc {
  margin: 12px 18px 0; color: var(--sc-ink);
  font-size: .9rem; line-height: 1.5;
}

.cc-validade { margin: 10px 18px 0; font-size: .78rem; color: var(--sc-muted); }
.cc-vencido { color: var(--sc-magenta); font-weight: 700; }

/* Endereço — comércio local se escolhe por proximidade, então ele vem antes de
   qualquer link e leva pro Maps. Linha inteira clicável: no celular, alvo
   pequeno é alvo errado. */
.cc-endereco {
  display: block; margin: 12px 18px 0;
  font-size: .82rem; line-height: 1.45;
  color: var(--sc-navy); text-decoration: none;
}
.cc-endereco:hover { text-decoration: underline; }

/* Botão de WhatsApp — verde da própria marca de propósito: aqui o
   reconhecimento vale mais que a paleta do clube, porque é o que faz a pessoa
   entender que vai abrir uma conversa e não uma página. */
.cc-wpp {
  display: flex; align-items: center; gap: 8px;
  margin: 12px 18px 0; padding: 11px 14px;
  background: #25D366; color: #0B3D22;
  border-radius: 10px; text-decoration: none;
  font-weight: 700; font-size: .88rem;
  transition: background .15s ease;
}
.cc-wpp:hover { background: #1EBE5B; }
.cc-wpp-ico { font-size: 1.05rem; line-height: 1; }
/* O número some no card estreito: quem toca não precisa lê-lo, e cortar o
   rótulo pela metade seria pior do que não mostrar. */
.cc-wpp-num { margin-left: auto; font-weight: 600; opacity: .85; white-space: nowrap; }
@media (max-width: 380px) { .cc-wpp-num { display: none; } }

.cc-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 18px 0; }
.cc-link {
  font-size: .78rem; color: var(--sc-navy); text-decoration: none;
  border: 1px solid var(--sc-border); border-radius: 20px; padding: 5px 11px;
  transition: background .15s ease, border-color .15s ease;
}
.cc-link:hover { background: rgba(31, 58, 110, .06); border-color: var(--sc-navy); }

/* Botão principal — branco sobre cor, nunca preto (mesma regra do claro.css). */
.cc-btn {
  margin: 16px 18px 0; padding: 13px;
  background: var(--sc-navy); color: #fff;
  font-weight: 700; font-size: .95rem;
  border: none; border-radius: 10px; cursor: pointer;
  transition: background .15s ease;
}
.cc-btn:hover:not(:disabled) { background: var(--sc-navy-esc); }
.cc-btn:disabled { opacity: .6; cursor: default; }

/* Cupom revelado */
.cc-cupom {
  margin: 16px 18px 0; padding: 14px;
  background: rgba(43, 179, 184, .08);
  border: 1px dashed var(--sc-teal); border-radius: 10px;
}
.cc-cupom-rot {
  display: block; font-size: .68rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--sc-muted); margin-bottom: 6px; font-weight: 700;
}
.cc-cupom-cod { display: flex; align-items: center; gap: 8px; }
.cc-cupom-cod code {
  flex: 1; font-size: 1.15rem; font-weight: 800; color: var(--sc-navy);
  background: #fff; border: 1px solid var(--sc-border); border-radius: 8px;
  padding: 9px 12px; text-align: center; letter-spacing: .06em;
  overflow: hidden; text-overflow: ellipsis;
}
.cc-copiar {
  background: var(--sc-teal); color: #fff; border: none; border-radius: 8px;
  padding: 10px 14px; font-size: .8rem; font-weight: 700; cursor: pointer;
  white-space: nowrap;
}
.cc-copiar:hover { background: #229599; }
.cc-ir {
  display: block; margin-top: 10px; text-align: center;
  background: var(--sc-laranja); color: #fff; text-decoration: none;
  font-weight: 700; font-size: .88rem; padding: 11px; border-radius: 8px;
}
.cc-ir:hover { background: #DD8016; }

.cc-regras { margin: 14px 18px 0; font-size: .8rem; }
.cc-regras summary {
  cursor: pointer; color: var(--sc-navy); font-weight: 700; padding: 4px 0;
}
.cc-regras p {
  margin-top: 8px; color: var(--sc-muted); line-height: 1.55;
  white-space: pre-wrap; /* a empresa digita em linhas; respeitamos */
}

.cc-canal {
  margin: 12px 18px 18px; padding-top: 12px;
  border-top: 1px solid var(--sc-border);
  font-size: .78rem; color: var(--sc-muted);
}
.cc-card > *:last-child { margin-bottom: 18px; }
.cc-canal:last-child { margin-bottom: 14px; }

/* ── Vitrine ──────────────────────────────────────────────────────────────── */

.sc-grid {
  display: grid; gap: 22px;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

@media (max-width: 480px) {
  .sc-grid { grid-template-columns: 1fr; gap: 18px; }
  .cc-selo { font-size: 1.05rem; }
}

/* ── Classificados ─────────────────────────────────────────────────────────
 *
 * Card e vitrine dos anúncios de pessoa física. Vive no mesmo arquivo que o
 * card das empresas de propósito: são a mesma marca e a mesma paleta, e
 * separar em dois CSS faria a identidade divergir na primeira mudança de cor.
 *
 * Prefixo `ca-` (classificado-anúncio) pra não colidir com o `cc-` do card da
 * empresa, que tem outra anatomia — lá o herói é a logo e o cupom, aqui é a
 * foto e o preço.
 */

/* Faixa de destaque: CARROSSEL, e só aqui.
 * São poucos itens (os pagos) e o deslize horizontal cabe no celular. Na
 * listagem abaixo o carrossel seria erro — quem entra num classificado está
 * garimpando e quer bater o olho em muitos itens de uma vez; carrossel esconde
 * o estoque atrás de um gesto. Por isso a listagem é grade.
 * Ocupa o espaço que na vitrine das empresas é do banner do MCD: ali o banner
 * não teria função, porque quem lê classificado é consumidor procurando um
 * sofá, não lojista procurando crediário. */
.ca-destaques { margin: 0 0 28px; }

.ca-destaques-topo {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 12px;
}

.ca-destaques-titulo {
  font-size: 1.05rem; font-weight: 800; color: var(--cva-teal-esc);
  display: flex; align-items: center; gap: 8px; margin: 0;
}

.ca-destaques-trilho {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(190px, 1fr);
  gap: 14px; overflow-x: auto; padding: 4px 4px 12px;
  scroll-snap-type: x mandatory; scrollbar-width: thin;
  /* Sem JS: o deslize nativo já é o comportamento certo no celular, e no
     desktop as setas empurram o scroll. Menos código, mais previsível. */
  -webkit-overflow-scrolling: touch;
}
.ca-destaques-trilho > * { scroll-snap-align: start; }
@media (min-width: 700px) { .ca-destaques-trilho { grid-auto-columns: minmax(230px, 1fr); } }

.ca-seta {
  border: 1px solid var(--sc-border); background: var(--sc-surface);
  color: var(--cva-teal-esc); width: 34px; height: 34px; border-radius: 50%;
  font-size: 1.1rem; line-height: 1; cursor: pointer; display: none;
}
.ca-seta:hover { background: var(--cva-teal); color: #fff; border-color: var(--cva-teal); }
@media (min-width: 700px) { .ca-seta { display: inline-block; } }

/* Grade da listagem: 2 colunas no celular é o padrão do formato — mostra 6
   itens numa tela, contra 1,5 de um carrossel. */
.ca-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 640px) { .ca-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 980px) { .ca-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.ca-card {
  background: var(--sc-surface); border: 1px solid var(--sc-border);
  border-radius: var(--sc-radius); box-shadow: var(--sc-sombra);
  overflow: hidden; display: flex; flex-direction: column;
  transition: box-shadow .2s ease, transform .2s ease;
}
.ca-card:hover { box-shadow: var(--sc-sombra-alta); transform: translateY(-2px); }

/* Destacado ganha borda coral — a diferença precisa ser visível de relance,
   senão o destaque pago não vale o que custa. */
.ca-card.destacado { border-color: var(--cva-coral); box-shadow: 0 0 0 2px rgba(240,103,74,.18), var(--sc-sombra); }

.ca-foto {
  position: relative; width: 100%; aspect-ratio: 4 / 3;
  background: #F0EDE7; cursor: zoom-in; border: 0; padding: 0; display: block;
}
.ca-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ca-sem-foto {
  display: flex; align-items: center; justify-content: center;
  height: 100%; color: var(--sc-muted); font-size: 1.8rem;
}

.ca-nfotos {
  position: absolute; right: 8px; bottom: 8px;
  background: rgba(0,0,0,.62); color: #fff; font-size: .72rem; font-weight: 700;
  padding: 3px 8px; border-radius: 999px; letter-spacing: .02em;
}

.ca-selo {
  position: absolute; left: 8px; top: 8px;
  background: var(--cva-coral); color: #fff; font-size: .68rem; font-weight: 800;
  padding: 4px 9px; border-radius: 999px; text-transform: uppercase; letter-spacing: .04em;
}

.ca-corpo { padding: 12px 12px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }

.ca-preco { font-size: 1.15rem; font-weight: 800; color: var(--cva-teal-esc); line-height: 1.1; }
.ca-preco.combinar { font-size: .95rem; color: var(--sc-muted); font-weight: 700; }

.ca-titulo {
  font-size: .92rem; font-weight: 600; color: var(--sc-ink); line-height: 1.3;
  /* Duas linhas e reticências: título longo não pode empurrar o botão pra
     alturas diferentes em cada card e desalinhar a grade inteira. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

.ca-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: auto; padding-top: 6px; }

.ca-tag {
  font-size: .68rem; font-weight: 700; padding: 3px 7px; border-radius: 6px;
  background: rgba(23,135,155,.10); color: var(--cva-teal-esc);
}
.ca-tag.usado { background: rgba(107,107,107,.12); color: var(--sc-muted); }

.ca-local { font-size: .74rem; color: var(--sc-muted); display: block; }

/* Descrição do anúncio.
   Recortada em 3 linhas pelo mesmo motivo do título: texto livre de tamanho
   variado empurraria o botão de contato pra alturas diferentes em cada card e
   desalinharia a grade. `white-space: pre-line` preserva as quebras que a
   pessoa digitou (lista de itens, estado do produto) sem deixar passar HTML —
   o texto entra por textContent/esc, nunca cru.
   `.aberta` tira o recorte: é o que o "Ler mais" faz. */
.ca-desc {
  font-size: .78rem; color: var(--sc-muted); line-height: 1.45;
  white-space: pre-line; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.ca-desc.aberta {
  display: block; -webkit-line-clamp: none; overflow: visible;
}

.ca-mais {
  align-self: flex-start; background: none; border: 0; padding: 0;
  font-family: inherit; font-size: .75rem; font-weight: 700; cursor: pointer;
  color: var(--cva-teal); text-decoration: underline;
}
.ca-mais:hover { color: var(--cva-teal-esc); }

/* Idade do anúncio. Existe porque não há expiração automática: sem ela a
   vitrine envelheceria em silêncio e o comprador chamaria por item vendido
   há meses. Aqui ele julga sozinho. */
.ca-idade { font-size: .7rem; color: var(--sc-muted); }

.ca-btn {
  margin-top: 8px; width: 100%; border: 0; border-radius: 10px;
  background: var(--cva-teal); color: #fff; font-weight: 700; font-size: .84rem;
  padding: 9px 10px; cursor: pointer; text-align: center; text-decoration: none;
  display: block; transition: background .15s ease;
}
.ca-btn:hover { background: var(--cva-teal-esc); }
.ca-btn.revelado { background: #25D366; }

.ca-vazio {
  grid-column: 1 / -1; text-align: center; padding: 48px 20px;
  color: var(--sc-muted); background: var(--sc-surface);
  border: 1px dashed var(--sc-border); border-radius: var(--sc-radius);
}

/* Lightbox próprio: o do card da empresa está amarrado à delegação de lá. */
.ca-lb {
  position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,.9);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.ca-lb img { max-width: 100%; max-height: 86vh; object-fit: contain; border-radius: 8px; }
.ca-lb-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,.9); border: 0; width: 44px; height: 44px;
  border-radius: 50%; font-size: 1.4rem; cursor: pointer; color: #111;
}
.ca-lb-nav.ant { left: 12px; } .ca-lb-nav.prox { right: 12px; }
.ca-lb-x {
  position: absolute; top: 12px; right: 12px; background: rgba(255,255,255,.9);
  border: 0; width: 40px; height: 40px; border-radius: 50%; font-size: 1.3rem; cursor: pointer; color: #111;
}
.ca-lb-cont { position: absolute; bottom: 16px; left: 0; right: 0; text-align: center; color: #fff; font-size: .8rem; }