/* ToqLink · cartão fidelidade premium (usado em /f e na pré-visualização do /painel) */
.tq-wrap { --brand: #0F4F4A; --accent: #D6A11C; --on: #fff; --on-soft: rgba(255,255,255,.72); }

.tq-card {
  position: relative; overflow: hidden; isolation: isolate;
  aspect-ratio: 1.586; width: 100%; border-radius: 22px; padding: 22px 22px 20px;
  display: flex; flex-direction: column; justify-content: space-between;
  color: var(--on);
  background:
    radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--brand) 70%, #fff 30%) 0%, transparent 55%),
    radial-gradient(90% 120% at 0% 100%, color-mix(in srgb, var(--brand) 60%, #000 40%) 0%, transparent 60%),
    var(--brand);
  box-shadow:
    0 1px 0 rgba(255,255,255,.25) inset,
    0 30px 60px -30px color-mix(in srgb, var(--brand) 80%, #000 20%),
    0 12px 24px -16px rgba(0,0,0,.35);
}
/* textura fina e brilho, como um cartão de metal */
.tq-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5; mix-blend-mode: overlay;
  background-image:
    repeating-linear-gradient(115deg, rgba(255,255,255,.07) 0 1px, transparent 1px 3px),
    linear-gradient(115deg, transparent 35%, rgba(255,255,255,.22) 50%, transparent 65%);
}
.tq-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent);
}
.tq-card.shine::before { animation: tq-shine 1.4s ease-out 1; background-size: 100% 100%, 300% 100%; }
@keyframes tq-shine { from { background-position: 0 0, 100% 0; } to { background-position: 0 0, 0 0; } }

.tq-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tq-brand { display: flex; align-items: center; gap: 11px; min-width: 0; }
.tq-logo {
  width: 42px; height: 42px; border-radius: 12px; flex: none; object-fit: cover;
  display: grid; place-items: center; background: color-mix(in srgb, var(--on) 14%, transparent);
  font: 600 20px/1 var(--tq-font, "Fraunces", Georgia, serif); color: var(--on);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--on) 22%, transparent);
}
img.tq-logo { background: #fff; }
.tq-name { font: 600 18px/1.15 var(--tq-font, "Fraunces", Georgia, serif); letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tq-kicker { font: 700 10.5px/1 Figtree, system-ui, sans-serif; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); white-space: nowrap; }

/* Em cartões estreitos, o nome do negócio tem prioridade sobre a etiqueta */
.tq-card { container-type: inline-size; }
@container (max-width: 330px) { .tq-kicker:not(.keep) { display: none; } .tq-kicker.keep { max-width: 40%; overflow: hidden; text-overflow: ellipsis; } }

.tq-mid { display: flex; align-items: baseline; gap: 8px; }
.tq-count { font: 500 clamp(44px, 15vw, 60px)/.9 var(--tq-font, "Fraunces", Georgia, serif); letter-spacing: -.03em; font-variant-numeric: lining-nums; }
@container (max-width: 1000px) { .tq-count { font-size: clamp(32px, 17cqi, 60px); } }
.tq-of { font: 600 15px/1 Figtree, system-ui, sans-serif; color: var(--on-soft); }

.tq-plan { font: 500 clamp(22px, 9cqi, 32px)/1.05 var(--tq-font, "Fraunces", Georgia, serif); letter-spacing: -.02em; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tq-bot { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.tq-label { display: block; font: 700 9.5px/1 Figtree, system-ui, sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--on-soft); margin-bottom: 5px; }
.tq-member { font: 600 15px/1.1 Figtree, system-ui, sans-serif; letter-spacing: .04em; }
.tq-chip { width: 34px; height: 26px; border-radius: 6px; flex: none;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 70%, #fff 30%), var(--accent) 55%, color-mix(in srgb, var(--accent) 70%, #000 30%));
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); position: relative; }
.tq-chip::after { content: ""; position: absolute; inset: 7px 9px; border: 1px solid rgba(0,0,0,.18); border-radius: 3px; }

/* selos */
.tq-stamps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.tq-stamps.n6 { grid-template-columns: repeat(6, 1fr); }
.tq-stamps.n4 { grid-template-columns: repeat(4, 1fr); }
.tq-stamps i {
  aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; font-style: normal;
  border: 1.5px dashed color-mix(in srgb, var(--brand) 28%, transparent);
  color: color-mix(in srgb, var(--brand) 40%, transparent); font: 600 12px/1 Figtree, sans-serif;
}
.tq-stamps i.on {
  border: 0; color: color-mix(in srgb, var(--accent) 30%, #000 70%);
  background:
    radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--accent) 50%, #fff 50%) 0 18%, transparent 45%),
    linear-gradient(145deg, color-mix(in srgb, var(--accent) 80%, #fff 20%), var(--accent) 50%, color-mix(in srgb, var(--accent) 70%, #000 30%));
  box-shadow: 0 6px 14px -8px color-mix(in srgb, var(--accent) 80%, #000 20%), inset 0 0 0 1px rgba(255,255,255,.35);
}
.tq-stamps i.on svg { width: 46%; height: 46%; }
.tq-stamps i.new { animation: tq-pop .7s cubic-bezier(.2,.9,.3,1.4); }
@keyframes tq-pop { 0% { transform: scale(.2) rotate(-40deg); opacity: 0; } 100% { transform: none; opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .tq-card.shine::before, .tq-stamps i.new { animation: none; }
}

/* Inclinação 3D e reflexo de luz */
.tilt { transform-style: preserve-3d; transition: transform .6s cubic-bezier(.2,.8,.2,1); will-change: transform; }
.tilt.tilt-live { transition: transform .08s linear; }
.tq-glare { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2; opacity: 0; transition: opacity .4s;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 30%), rgba(255,255,255,.42), rgba(255,255,255,0) 55%); mix-blend-mode: soft-light; }
.tilt-live .tq-glare, .tilt-live.tq-card .tq-glare { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .tq-float { animation: tq-float 6s ease-in-out infinite; }
  .tilt-live .tq-float, .tq-float.tilt-live { animation: none; }
}
@keyframes tq-float { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-8px) rotate(1deg); } }