/* =========================================================
   Medalha BTICS · Cliente Premium
   Anel metálico ao redor da moeda: aço escovado, bronze,
   prata, ouro e diamante. Tamanho controlado por --s.
   ========================================================= */
.medalha { --s: 220px; position: relative; width: var(--s); height: var(--s); flex: 0 0 auto; border-radius: 50%; isolation: isolate; }
.medalha .m-anel {
    position: absolute; inset: 0; border-radius: 50%;
    background:
        conic-gradient(from 25deg, rgba(255,255,255,.55), rgba(255,255,255,0) 55deg, rgba(0,0,0,.18) 110deg, rgba(255,255,255,.45) 185deg, rgba(255,255,255,0) 240deg, rgba(0,0,0,.2) 300deg, rgba(255,255,255,.55)),
        repeating-radial-gradient(circle at 50% 50%, var(--m1) 0 1px, var(--m2) 1px 2px, var(--m3) 2px 3px),
        var(--m2);
    box-shadow:
        inset 0 0 0 calc(var(--s) * .012) rgba(255,255,255,.45),
        inset 0 0 calc(var(--s) * .05) rgba(0,0,0,.45),
        0 calc(var(--s) * .035) calc(var(--s) * .09) rgba(0,0,0,.55),
        0 0 calc(var(--s) * .18) var(--glow, transparent);
}
.medalha .m-anel::after { /* friso interno ao redor da moeda */
    content: ''; position: absolute; inset: 13.2%; border-radius: 50%;
    box-shadow: 0 0 0 calc(var(--s) * .012) rgba(0,0,0,.35), 0 0 0 calc(var(--s) * .022) rgba(255,255,255,.35);
}
.medalha .m-texto { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 1; pointer-events: none; }
.medalha .m-texto text { font-family: 'Inter', system-ui, sans-serif; font-weight: 800; font-size: 11.2px; letter-spacing: .6px; text-transform: uppercase; }
.medalha .m-texto .luz { fill: rgba(255,255,255,.45); }
.medalha .m-texto .grav { fill: var(--txt, rgba(20,20,20,.62)); }
.medalha .m-moeda {
    position: absolute; inset: 14%; width: 72%; height: 72%; border-radius: 50%; z-index: 2; object-fit: contain;
    filter: drop-shadow(0 calc(var(--s) * .01) calc(var(--s) * .025) rgba(0,0,0,.55));
}
.medalha .m-brilho { position: absolute; inset: 0; border-radius: 50%; z-index: 3; pointer-events: none;
    background: linear-gradient(135deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 38%); mix-blend-mode: screen; }

/* ---------- metais ---------- */
.m-aco      { --m1:#8e969e; --m2:#b9c0c7; --m3:#a3aab2; --txt: rgba(25,30,36,.66); --glow: rgba(185,192,199,.18); }
.m-bronze   { --m1:#7a4a22; --m2:#c07a3c; --m3:#9c6030; --txt: rgba(45,22,6,.68);  --glow: rgba(205,127,50,.25); }
.m-prata    { --m1:#b8c0c8; --m2:#eef2f6; --m3:#d3d9df; --txt: rgba(40,48,58,.62); --glow: rgba(230,236,242,.28); }
.m-ouro     { --m1:#a87810; --m2:#f4cb4c; --m3:#d6a524; --txt: rgba(70,44,0,.66);  --glow: rgba(255,200,60,.35); }
.m-base     { --m1:#1b2e4f; --m2:#2a4472; --m3:#22385e; --txt: rgba(204,214,246,.75); --glow: rgba(0,191,255,.12); }
.m-base .m-texto .luz { fill: rgba(0,0,0,.35); }

/* Aço escovado: fosco, mais escuro, com riscos lineares do escovamento */
.m-aco .m-anel {
    background:
        conic-gradient(from 25deg, rgba(255,255,255,.32), rgba(255,255,255,0) 55deg, rgba(0,0,0,.22) 110deg, rgba(255,255,255,.26) 185deg, rgba(255,255,255,0) 240deg, rgba(0,0,0,.24) 300deg, rgba(255,255,255,.32)),
        repeating-linear-gradient(90deg, rgba(255,255,255,.10) 0 1px, rgba(0,0,0,.08) 1px 2px, rgba(255,255,255,0) 2px 3px),
        repeating-linear-gradient(0deg, rgba(0,0,0,.05) 0 1px, rgba(255,255,255,0) 1px 4px),
        linear-gradient(160deg, #a4abb2, #7d858d 55%, #959ca3);
}
/* Prata: polida, clara e com reflexos fortes */
.m-prata .m-anel {
    background:
        conic-gradient(from 10deg, #ffffff, #c9d0d7 40deg, #f7f9fb 95deg, #aeb6be 150deg, #ffffff 205deg, #c3cad2 260deg, #f2f5f8 315deg, #ffffff),
        #e6ebf0;
}

/* Diamante: facetas, iridescência e brilho girando */
.m-diamante { --txt: rgba(20,40,70,.62); --glow: rgba(160,230,255,.5); }
.m-diamante .m-anel {
    background:
        repeating-conic-gradient(from 0deg, rgba(255,255,255,.55) 0 7.5deg, rgba(255,255,255,0) 7.5deg 15deg),
        conic-gradient(from 0deg, #e8fbff, #b6ecff, #f3d9ff, #ffffff, #c4f1ff, #ffe9f6, #d9f7ff, #e8fbff),
        #dff6ff;
}
.m-diamante .m-anel::before {
    content: ''; position: absolute; inset: 0; border-radius: 50%;
    background: conic-gradient(from 0deg, rgba(255,255,255,0) 0deg, rgba(255,255,255,.95) 18deg, rgba(255,255,255,0) 40deg, rgba(255,255,255,0) 180deg, rgba(255,255,255,.8) 200deg, rgba(255,255,255,0) 222deg);
    -webkit-mask: radial-gradient(circle, transparent 35.5%, #000 36%);
            mask: radial-gradient(circle, transparent 35.5%, #000 36%);
    animation: m-gira 6s linear infinite;
}
.m-diamante .m-faisca { position: absolute; z-index: 4; width: calc(var(--s) * .07); height: calc(var(--s) * .07); pointer-events: none;
    background: radial-gradient(circle, #fff 0 12%, transparent 13%),
                linear-gradient(0deg, transparent 46%, #fff 48% 52%, transparent 54%),
                linear-gradient(90deg, transparent 46%, #fff 48% 52%, transparent 54%);
    filter: drop-shadow(0 0 4px #bff3ff); animation: m-pisca 2.4s ease-in-out infinite; }
.m-diamante .f1 { top: 7%; left: 22%; }
.m-diamante .f2 { top: 70%; left: 86%; animation-delay: .8s; }
.m-diamante .f3 { top: 84%; left: 14%; animation-delay: 1.6s; }
@keyframes m-gira { to { transform: rotate(360deg); } }
@keyframes m-pisca { 0%,100% { opacity: 0; transform: scale(.4) rotate(0); } 50% { opacity: 1; transform: scale(1) rotate(45deg); } }
@media (prefers-reduced-motion: reduce) { .medalha * { animation: none !important; } }

/* Faixas de nível (gamificação) */
.trilha { display: flex; gap: 8px; flex-wrap: wrap; }
.trilha .etapa { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; border: 1px solid #233554; font-size: .78rem; font-weight: 600; color: #8892b0; background: rgba(10,25,47,.6); }
.trilha .etapa i.pt { width: 18px; height: 18px; border-radius: 50%; display: block; background: var(--m2, #233554); box-shadow: inset 0 0 0 2px rgba(255,255,255,.35); }
.trilha .etapa.on { color: #ccd6f6; border-color: rgba(255,255,255,.18); }
.trilha .etapa:not(.on) i.pt { filter: grayscale(1) brightness(.45); }
.trilha .etapa.atual { border-color: #00BFFF; box-shadow: 0 0 0 1px #00BFFF inset; }
.trilha .m-diamante i.pt { background: conic-gradient(#e8fbff, #b6ecff, #f3d9ff, #fff, #c4f1ff, #e8fbff); }