/* Voucher — vouchers digitais dos parceiros nos valores faciais do edital (R$ 80 a R$ 500). */
.vc-sub { margin: -6px 0 18px; font-size: .95rem; color: var(--cvp-suave); max-width: 640px; }
.vc-saldo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 18px; padding: 18px 20px; border-radius: 18px; color: #fff;
  background: radial-gradient(120% 160% at 0% 0%, #ffad33 0%, #f39200 50%, #e07a00 100%); box-shadow: 0 20px 40px -24px rgba(243,146,0,.9); }
.vc-saldo small { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.vc-saldo b { font-size: 1.8rem; font-weight: 800; letter-spacing: -.02em; }
.vc-saldo span { font-size: .9rem; opacity: .95; }
.vc-filtros { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 16px; }
.vc-filtros button { padding: 8px 14px; border-radius: 99px; border: 1.5px solid var(--cvp-linha); background: #fff; color: var(--cvp-tinta-2);
  font-family: inherit; font-size: .84rem; font-weight: 600; line-height: 1.2; cursor: pointer; transition: transform .55s var(--mola), background-color .2s, border-color .2s, color .2s; }
.vc-filtros button:active { transform: scale(.94); }
.vc-filtros button.on { background: var(--cvp-azul); border-color: var(--cvp-azul); color: #fff; }
html[data-tema="escuro"] body .vc-sub { color: rgba(255,255,255,.82); }
html[data-tema="escuro"] body .vc-filtros button:not(.on) { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.25); color: #fff; }
html[data-tema="escuro"] body .vc-filtros button.on { background: var(--cvp-laranja); border-color: var(--cvp-laranja); }

.vc-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; }
.vc-card { background: #fff; border-radius: 20px; overflow: hidden; box-shadow: var(--cvp-sombra-1); display: flex; flex-direction: column; transition: transform .6s var(--mola), box-shadow .25s; }
.vc-card:hover { transform: translateY(-4px); box-shadow: var(--cvp-sombra-2); }
.vc-topo { position: relative; height: 104px; padding: 16px 18px; color: #fff; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; }
.vc-topo::after { content: ""; position: absolute; right: -18px; bottom: -26px; width: 120px; height: 120px; opacity: .16;
  background: url(x.svg) center / contain no-repeat; filter: brightness(0) invert(1); transform: rotate(-12deg); }
.vc-topo b { font-size: 1.45rem; font-weight: 800; letter-spacing: -.02em; }
.vc-topo small { align-self: flex-start; padding: 3px 10px; border-radius: 99px; background: rgba(255,255,255,.22); font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.vc-cat-alimentacao { background: linear-gradient(135deg, #f39200, #e07a00); }
.vc-cat-eletronicos { background: linear-gradient(135deg, #005ca9, #003f78); }
.vc-cat-vestuario { background: linear-gradient(135deg, #3a8fd8, #005ca9); }
.vc-cat-experiencias { background: linear-gradient(135deg, #ffad33, #f39200); }
.vc-cat-mobilidade { background: linear-gradient(135deg, #0a6fc4, #00264a); }
.vc-corpo { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.vc-rot { margin: 0; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cvp-suave); }
.vc-valores { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.vc-valores button { padding: 8px 0; border-radius: 10px; border: 1.5px solid var(--cvp-linha); background: #fff; color: var(--cvp-tinta); cursor: pointer;
  font-family: inherit; font-size: .8rem; font-weight: 700; transition: transform .5s var(--mola), background-color .2s, border-color .2s, color .2s; }
.vc-valores button:hover:not(:disabled) { border-color: #ffd28a; }
.vc-valores button.on { background: var(--cvp-laranja); border-color: var(--cvp-laranja); color: #fff; transform: scale(1.06); }
.vc-valores button:disabled { opacity: .38; cursor: not-allowed; }
.vc-pe { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--cvp-linha); }
.vc-pe span { font-size: .84rem; color: var(--cvp-suave); }
.vc-pe span b { color: var(--cvp-laranja-600); font-size: 1rem; }
.vc-pe .btn { border: 0; cursor: pointer; font-family: inherit; font-size: .86rem; font-weight: 700; padding: 10px 16px; border-radius: 12px;
  background: var(--cvp-azul) !important; color: #fff !important; transition: transform .55s var(--mola), filter .2s; }
.vc-pe .btn:active { transform: scale(.95); }
.vc-pe .btn:disabled { background: #c9d6e5 !important; cursor: not-allowed; }
.vc-vazio { padding: 40px 20px; text-align: center; color: var(--cvp-suave); background: #fff; border-radius: 18px; grid-column: 1 / -1; }

/* janela do código */
.vc-codigo { margin: 6px 0 14px; padding: 18px; border-radius: 16px; border: 2px dashed var(--cvp-laranja); background: var(--cvp-laranja-50); text-align: center; }
.vc-codigo small { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cvp-suave); }
.vc-codigo b { display: block; margin-top: 6px; font-size: 1.6rem; font-weight: 800; letter-spacing: .12em; color: var(--cvp-laranja-600); animation: mola-caixa var(--mola-dur) var(--mola) both; }
@media (max-width: 640px) { .vc-valores { grid-template-columns: repeat(5, 1fr); } .vc-grade { grid-template-columns: 1fr; } }

/* vouchers por valor (sem parceiro): um cartão-presente por valor facial */
.vc-grade:has(.vc-vale) { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.vc-face { position: relative; height: 150px; padding: 16px 18px; color: #fff; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; }
.vc-face::after { content: ""; position: absolute; right: -22px; bottom: -30px; width: 140px; height: 140px; opacity: .18;
  background: url(x.svg) center / contain no-repeat; filter: brightness(0) invert(1); transform: rotate(-12deg); }
.vc-face::before { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 38%); pointer-events: none; }
.vc-face small { align-self: flex-start; padding: 3px 10px; border-radius: 99px; background: rgba(255,255,255,.22); font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.vc-face b { position: relative; z-index: 1; font-size: 2.6rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.vc-face b span { font-size: 1.05rem; font-weight: 700; margin-right: 4px; vertical-align: .9em; letter-spacing: 0; }
.vc-cor-laranja { background: linear-gradient(135deg, #f39200, #e07a00); }
.vc-cor-azul { background: linear-gradient(135deg, #005ca9, #003f78); }
.vc-cor-laranja-claro { background: linear-gradient(135deg, #ffad33, #f39200); }
.vc-cor-marinho { background: linear-gradient(135deg, #0a6fc4, #00264a); }
.vc-cor-azul-claro { background: linear-gradient(135deg, #3a8fd8, #005ca9); }
.vc-vale .vc-pe { margin: 0; padding: 12px 16px 14px; border-top: 0; }
.vc-vale--longe .vc-face { filter: saturate(.55) brightness(.92); }
.vc-vale--longe .vc-pe span b { color: var(--cvp-suave); }