.com {
    --com-fundo:       var(--fundo, #0A0910);
    --com-tinta:       var(--tinta, #F5F1EA);
    --com-tinta2:      var(--tinta-2, rgba(245, 241, 234, .66));
    --com-tinta3:      var(--tinta-3, rgba(245, 241, 234, .40));
    --com-tinta4:      var(--tinta-4, rgba(245, 241, 234, .16));
    --com-borda:       var(--borda, rgba(245, 241, 234, .12));
    --com-borda-forte: var(--borda-forte, rgba(245, 241, 234, .22));
    --com-destaque:    var(--cor, #FF2D6F);
    --com-ok:          #22C4A8;
    --com-alerta:      #F0A830;
    --com-roxo:        #8B7BFF;
    --com-superficie:  color-mix(in oklab, var(--com-tinta) 4%, transparent);
    --com-superficie2: color-mix(in oklab, var(--com-tinta) 7%, transparent);
    --com-r-g:         var(--r-g, 24px);
    --com-r-m:         var(--r-m, 14px);
    --com-r-p:         var(--r-p, 8px);
    --com-display:     var(--display, 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif);
    --com-fonte:       var(--texto, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif);

    color: var(--com-tinta);
    font-family: var(--com-fonte);
    font-size: 16px;
    line-height: 1.55;
    letter-spacing: -.008em;
    -webkit-font-smoothing: antialiased;
}

.com *, .com *::before, .com *::after { box-sizing: border-box; }

body.com-solo {
    margin: 0;
    min-height: 100vh;
    background:
        radial-gradient(66% 46% at 8% -8%, color-mix(in oklab, var(--com-destaque) 26%, transparent), transparent 68%),
        linear-gradient(178deg, var(--com-fundo) 0%, #05040A 74%);
    background-attachment: fixed;
}

.com-envelope {
    max-width: 1040px;
    margin: 0 auto;
    padding: 0 clamp(16px, 4vw, 28px) 56px;
    position: relative;
    z-index: 1;
}
body.com > .topo + .com-envelope { padding-top: 28px; }

.com-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 22px 0 30px;
}

.com-marca {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--com-display);
    font-weight: 700;
    font-size: 19px;
    letter-spacing: -.03em;
    color: var(--com-tinta);
    text-decoration: none;
}

.com-marca span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--com-destaque);
    box-shadow: 0 0 0 4px color-mix(in oklab, var(--com-destaque) 20%, transparent);
}

.com-menu { display: flex; gap: 3px; flex-wrap: wrap; }

.com-menu a {
    color: var(--com-tinta3);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
    padding: 8px 13px;
    border-radius: 999px;
    border: 1px solid transparent;
    transition: color 200ms, background 200ms, border-color 200ms;
}

.com-menu a:hover { color: var(--com-tinta); background: var(--com-superficie); }

.com-menu a[aria-current='page'] {
    color: var(--com-tinta);
    border-color: var(--com-borda-forte);
    background: var(--com-superficie);
}

.com-cabeca {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    padding: 4px 0 32px;
}

.com-avatar {
    width: 76px;
    height: 76px;
    border-radius: 24px;
    display: grid;
    place-items: center;
    font-family: var(--com-display);
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -.03em;
    color: #0A0910;
    background: linear-gradient(150deg, var(--com-destaque), color-mix(in oklab, var(--com-destaque) 40%, var(--com-alerta)));
    flex: none;
    object-fit: cover;
}

.com-cabeca h1 {
    margin: 0 0 5px;
    font-family: var(--com-display);
    font-size: clamp(26px, 4.6vw, 38px);
    font-weight: 700;
    letter-spacing: -.035em;
    line-height: 1.02;
}

.com-sub { margin: 0; color: var(--com-tinta2); font-size: 14px; }
.com-sub a { color: var(--com-tinta); text-decoration: underline; text-underline-offset: 3px; }

.com-saldo {
    margin-left: auto;
    text-align: right;
    padding: 13px 22px;
    border-radius: var(--com-r-m);
    border: 1px solid var(--com-borda);
    background: var(--com-superficie);
}

.com-saldo b {
    display: block;
    font-family: var(--com-display);
    font-size: 32px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.04em;
    line-height: 1;
    color: var(--com-destaque);
}

.com-saldo small {
    display: block;
    margin-top: 4px;
    color: var(--com-tinta3);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .12em;
}

.com-secao { margin: 0 0 36px; }

.com-secao > h2 {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0 0 14px;
    font-family: var(--com-fonte);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--com-tinta3);
}

.com-secao > h2 small {
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    font-size: 12px;
    color: var(--com-tinta3);
}

.com-numeros {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
    gap: 12px;
}

.com-num {
    background: var(--com-superficie);
    border: 1px solid var(--com-borda);
    border-radius: var(--com-r-g);
    padding: 20px 20px 18px;
    position: relative;
    overflow: hidden;
}

.com-num::after {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: linear-gradient(90deg, var(--com-tom, var(--com-destaque)), transparent 76%);
}

.com-num b {
    display: block;
    font-family: var(--com-display);
    font-size: clamp(30px, 5vw, 40px);
    font-weight: 700;
    letter-spacing: -.04em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.com-num b i {
    font-style: normal;
    font-size: .42em;
    font-weight: 600;
    color: var(--com-tinta3);
    margin-left: 3px;
    letter-spacing: -.01em;
}

.com-num span { display: block; margin-top: 8px; font-size: 13px; color: var(--com-tinta2); line-height: 1.35; }
.com-num em { font-style: normal; color: var(--com-tom, var(--com-destaque)); }

.com-streak {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    border: 1px solid color-mix(in oklab, var(--com-tom) 26%, var(--com-borda));
    border-radius: var(--com-r-g);
    background: linear-gradient(168deg, color-mix(in oklab, var(--com-tom) 11%, transparent) 0%, var(--com-superficie) 60%);
    overflow: hidden;
}

.com-streak-corpo { padding: 24px; display: flex; gap: 20px; align-items: center; }

.com-chama {
    width: 62px;
    height: 62px;
    flex: none;
    border-radius: 20px;
    display: grid;
    place-items: center;
    background: color-mix(in oklab, var(--com-tom) 15%, transparent);
    color: var(--com-tom);
    border: 1px solid color-mix(in oklab, var(--com-tom) 32%, transparent);
}

.com-streak-num {
    font-family: var(--com-display);
    font-size: 48px;
    font-weight: 700;
    letter-spacing: -.05em;
    line-height: .92;
    font-variant-numeric: tabular-nums;
    color: var(--com-tom);
}

.com-streak-num small {
    font-family: var(--com-fonte);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--com-tinta3);
    margin-left: 8px;
}

.com-streak p { margin: 8px 0 0; font-size: 14px; color: var(--com-tinta2); max-width: 42ch; line-height: 1.45; }
.com-streak p b { color: var(--com-tom); font-weight: 650; }

.com-streak-lado {
    padding: 24px;
    border-left: 1px solid var(--com-borda);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
}

.com-dias { display: flex; gap: 7px; }

.com-dia {
    flex: 1;
    text-align: center;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .08em;
    color: var(--com-tinta3);
}

.com-dia i {
    display: block;
    height: 36px;
    margin-bottom: 7px;
    border-radius: 10px;
    border: 1px solid var(--com-borda);
    background: var(--com-superficie);
}

.com-dia.on i {
    background: color-mix(in oklab, var(--com-tom) 40%, transparent);
    border-color: color-mix(in oklab, var(--com-tom) 58%, transparent);
}

.com-dia.parcial i { background: color-mix(in oklab, var(--com-tom) 14%, transparent); }
.com-dia.hoje i { box-shadow: 0 0 0 2px color-mix(in oklab, var(--com-tom) 45%, transparent); }

.com-escudos { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--com-tinta3); line-height: 1.35; }
.com-escudo { color: var(--com-ok); display: inline-flex; flex: none; }
.com-escudo.vazio { color: var(--com-tinta4); }
.com-escudos > span:last-child { margin-left: 4px; }

.com-bau {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    padding: 18px 22px;
    border: 1px solid var(--com-borda);
    border-radius: var(--com-r-g);
    background: var(--com-superficie);
    margin-top: 12px;
}

.com-bau.pronto {
    border-color: color-mix(in oklab, var(--com-alerta) 50%, transparent);
    background: linear-gradient(168deg, color-mix(in oklab, var(--com-alerta) 14%, transparent), var(--com-superficie) 70%);
}

.com-bau-txt { flex: 1 1 250px; min-width: 0; }
.com-bau-txt b { display: block; font-size: 15px; font-weight: 650; letter-spacing: -.015em; }
.com-bau-txt span { font-size: 13px; color: var(--com-tinta2); }

.com-barra {
    height: 6px;
    border-radius: 99px;
    background: var(--com-tinta4);
    overflow: hidden;
    margin-top: 9px;
}

.com-barra i {
    display: block;
    height: 100%;
    border-radius: 99px;
    background: linear-gradient(90deg,
        color-mix(in oklab, var(--com-tom, var(--com-destaque)) 70%, transparent),
        var(--com-tom, var(--com-destaque)));
}

.com-botao {
    appearance: none;
    border: 1px solid var(--com-borda-forte);
    background: var(--com-superficie);
    color: var(--com-tinta);
    font: inherit;
    font-weight: 650;
    font-size: 14px;
    letter-spacing: -.01em;
    padding: 11px 20px;
    border-radius: var(--com-r-p);
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: transform 140ms, background 200ms, border-color 200ms;
}

.com-botao:hover { background: var(--com-superficie2); border-color: var(--com-tinta3); }
.com-botao:active { transform: translateY(1px); }

.com-botao.destaque {
    background: var(--com-alerta);
    border-color: var(--com-alerta);
    color: #191106;
}

.com-botao.destaque:hover { background: color-mix(in oklab, var(--com-alerta) 84%, #fff); }
.com-botao[disabled] { opacity: .42; cursor: not-allowed; }

.com-campo {
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 10px 14px;
    font: inherit;
    font-weight: 500;
    color: var(--com-tinta);
    background: var(--com-superficie);
    border: 1px solid var(--com-borda);
    border-radius: var(--com-r-p);
}

.com-campo.curto { width: 96px; }
.com-campo:focus { border-color: var(--com-destaque); outline: none; }

.com-proxima {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 17px 20px;
    border-radius: var(--com-r-g);
    border: 1px dashed var(--com-borda-forte);
    margin-bottom: 14px;
}

.com-proxima-ico { color: var(--com-destaque); flex: none; }
.com-proxima-txt { flex: 1 1 240px; min-width: 0; }
.com-proxima-txt b { font-size: 15px; font-weight: 650; letter-spacing: -.015em; }
.com-proxima-txt span { display: block; font-size: 13px; color: var(--com-tinta2); }

.com-proxima-pct {
    font-family: var(--com-display);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: 22px;
    letter-spacing: -.03em;
    color: var(--com-destaque);
}

.com-emblemas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(166px, 1fr));
    gap: 12px;
}

.com-emblema {
    border: 1px solid var(--com-borda);
    border-radius: var(--com-r-m);
    background: var(--com-superficie);
    padding: 16px 15px 14px;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.com-emblema-ico {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    background: var(--com-superficie);
    border: 1px solid var(--com-borda);
    color: var(--com-tinta3);
}

.com-emblema b { font-size: 14px; font-weight: 650; letter-spacing: -.015em; }
.com-emblema-desc { font-size: 12px; color: var(--com-tinta2); line-height: 1.4; }
.com-emblema .com-barra { margin-top: auto; }
.com-emblema-passo { font-size: 11px; color: var(--com-tinta3); font-variant-numeric: tabular-nums; }

.com-emblema.tem {
    border-color: color-mix(in oklab, var(--com-tom) 36%, transparent);
    background: linear-gradient(168deg, color-mix(in oklab, var(--com-tom) 12%, transparent), var(--com-superficie) 70%);
}

.com-emblema.tem .com-emblema-ico {
    color: var(--com-tom);
    background: color-mix(in oklab, var(--com-tom) 16%, transparent);
    border-color: color-mix(in oklab, var(--com-tom) 40%, transparent);
}

.com-emblema.falta { opacity: .72; }
.com-emblema.falta b { color: var(--com-tinta2); }

.com-lista-faixas { display: flex; flex-direction: column; gap: 2px; }

.com-faixa {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 11px 14px;
    border-radius: var(--com-r-m);
    border: 1px solid transparent;
}

.com-faixa:nth-child(odd) { background: color-mix(in oklab, var(--com-tinta) 3%, transparent); }
.com-faixa:hover { border-color: var(--com-borda); }

.com-capa {
    width: 46px;
    height: 46px;
    flex: none;
    border-radius: 10px;
    object-fit: cover;
    background: var(--com-superficie2);
    display: grid;
    place-items: center;
    color: var(--com-tinta3);
    border: 1px solid var(--com-borda);
}

.com-faixa-txt { flex: 1; min-width: 0; }

.com-faixa-txt b {
    display: block;
    font-size: 14px;
    font-weight: 650;
    letter-spacing: -.015em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.com-faixa-txt > span {
    display: block;
    font-size: 13px;
    color: var(--com-tinta2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.com-tag {
    display: inline-block;
    font-style: normal;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .09em;
    padding: 2px 7px;
    border-radius: 5px;
    margin-right: 5px;
    vertical-align: 1px;
    color: var(--com-tom);
    background: color-mix(in oklab, var(--com-tom) 14%, transparent);
    border: 1px solid color-mix(in oklab, var(--com-tom) 30%, transparent);
}

.com-aviso { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; flex: none; }
.com-aviso input { position: absolute; opacity: 0; width: 1px; height: 1px; }

.com-aviso i {
    width: 40px;
    height: 23px;
    border-radius: 99px;
    background: var(--com-tinta4);
    border: 1px solid var(--com-borda);
    position: relative;
    transition: background 200ms, border-color 200ms;
    flex: none;
}

.com-aviso i::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--com-tinta3);
    transition: transform 200ms, background 200ms;
}

.com-aviso input:checked + i { background: color-mix(in oklab, var(--com-ok) 30%, transparent); border-color: var(--com-ok); }
.com-aviso input:checked + i::after { transform: translateX(17px); background: var(--com-ok); }
.com-aviso input:focus-visible + i { outline: 2px solid var(--com-destaque); outline-offset: 3px; }
.com-aviso small { font-size: 12px; color: var(--com-tinta3); white-space: nowrap; }

.com-extrato { display: flex; flex-direction: column; }

.com-linha {
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding: 11px 4px;
    border-bottom: 1px solid var(--com-borda);
    font-size: 14px;
}

.com-linha:last-child { border-bottom: 0; }
.com-linha b { flex: 1; font-weight: 550; letter-spacing: -.01em; }
.com-linha time { color: var(--com-tinta3); font-size: 12px; white-space: nowrap; }

.com-delta {
    font-family: var(--com-display);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: -.02em;
    color: var(--com-ok);
    min-width: 56px;
    text-align: right;
}

.com-delta.neg { color: var(--negativo, #FF8A7A); }

.com-vazio {
    padding: 28px 22px;
    border: 1px dashed var(--com-borda);
    border-radius: var(--com-r-g);
    color: var(--com-tinta2);
    font-size: 14px;
    text-align: center;
    line-height: 1.5;
}

.com-vazio a { color: var(--com-destaque); text-decoration: underline; text-underline-offset: 3px; }

.com-recado {
    padding: 13px 17px;
    border-radius: var(--com-r-m);
    font-size: 14px;
    margin: 0 0 14px;
    color: var(--com-tinta);
    border: 1px solid color-mix(in oklab, var(--com-ok) 38%, transparent);
    background: color-mix(in oklab, var(--com-ok) 11%, transparent);
}

.com-recado.ruim {
    border-color: color-mix(in oklab, var(--com-alerta) 42%, transparent);
    background: color-mix(in oklab, var(--com-alerta) 11%, transparent);
}

/* A porta de entrada da comunidade usa a própria linguagem da rádio: a conta
   nasce ao lado de um pequeno VU meter, não dentro de um cartão SaaS genérico. */
.com-entrada {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr);
    gap: clamp(24px, 5vw, 54px);
    margin: 4px 0 38px;
    padding: clamp(24px, 5vw, 48px);
    border: 1px solid color-mix(in oklab, var(--com-destaque) 34%, var(--com-borda));
    border-radius: var(--com-r-g);
    background:
        linear-gradient(145deg, color-mix(in oklab, var(--com-destaque) 14%, transparent), transparent 54%),
        var(--com-superficie);
    overflow: hidden;
    position: relative;
}

.com-entrada::after {
    content: '';
    position: absolute;
    inset: auto -8% -38% 34%;
    height: 70%;
    border: 1px solid color-mix(in oklab, var(--com-destaque) 22%, transparent);
    border-radius: 50%;
    pointer-events: none;
}

.com-entrada-chamada, .com-acessos { position: relative; z-index: 1; }
.com-sobrelinha { margin: 18px 0 10px; color: var(--com-destaque); font-size: 11px; font-weight: 750; letter-spacing: .16em; text-transform: uppercase; }
.com-entrada h1 { margin: 0; max-width: 14ch; font-family: var(--com-display); font-size: clamp(30px, 5vw, 48px); line-height: .98; letter-spacing: -.05em; }
.com-entrada-chamada > p:last-child { max-width: 46ch; margin: 18px 0 0; color: var(--com-tinta2); font-size: 14px; }

.com-sinal { height: 32px; display: flex; align-items: end; gap: 5px; color: var(--com-destaque); }
.com-sinal i { display: block; width: 5px; height: 30%; border-radius: 99px; background: currentColor; animation: com-sinal 1.15s ease-in-out infinite alternate; }
.com-sinal i:nth-child(2) { height: 70%; animation-delay: -.4s; }
.com-sinal i:nth-child(3) { height: 100%; animation-delay: -.8s; }
.com-sinal i:nth-child(4) { height: 48%; animation-delay: -.2s; }
@keyframes com-sinal { to { height: 95%; } }

.com-acessos { display: grid; gap: 12px; }
.com-form-conta { padding: 20px; border: 1px solid var(--com-borda); border-radius: var(--com-r-m); background: color-mix(in oklab, var(--com-fundo) 76%, transparent); display: grid; gap: 12px; }
.com-form-conta h2 { margin: 0 0 2px; font-family: var(--com-display); font-size: 19px; letter-spacing: -.03em; }
.com-form-conta label, .com-foto-form label { color: var(--com-tinta2); font-size: 12px; }
.com-form-conta--entrar { grid-template-columns: 1fr 1fr auto; align-items: end; }
.com-form-conta--entrar h2 { grid-column: 1 / -1; }
.com-form-conta .com-botao { justify-self: start; }

.com-prefixo { display: flex; align-items: center; margin-top: 6px; border: 1px solid var(--com-borda); border-radius: var(--com-r-p); background: var(--com-superficie); }
.com-prefixo:focus-within { border-color: var(--com-destaque); }
.com-prefixo b { padding-left: 13px; color: var(--com-destaque); font-size: 14px; }
.com-prefixo .com-campo { margin: 0; border: 0; background: transparent; padding-left: 4px; }
.com-prefixo .com-campo:focus { border-color: transparent; }

.com-perfil-acoes { margin: 0 0 12px; }
.com-foto-form { display: flex; align-items: end; gap: 12px; flex-wrap: wrap; padding: 16px; border: 1px solid var(--com-borda); border-radius: var(--com-r-m); background: var(--com-superficie); }
.com-foto-form label { flex: 1 1 260px; }
.com-foto-form small { flex: 1 1 180px; color: var(--com-tinta3); }
.com-foto-form input[type='file'] { padding: 8px; }
.com-foto-form input::file-selector-button { border: 0; border-radius: 6px; padding: 7px 10px; margin-right: 10px; background: var(--com-tinta4); color: var(--com-tinta); cursor: pointer; }
.com-check { display: flex; align-items: center; gap: 9px; color: var(--com-tinta2); }
.com-check input { accent-color: var(--com-destaque); width: 17px; height: 17px; }
.com-sair { margin-top: 18px; }
.com-link-perigo { appearance: none; border: 0; padding: 0; background: none; color: #FF7A89; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font: inherit; font-size: 12px; }

.com-filtros { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 22px; }

.com-filtros a {
    font-size: 13px;
    font-weight: 650;
    letter-spacing: -.01em;
    padding: 9px 18px;
    border-radius: 999px;
    text-decoration: none;
    color: var(--com-tinta2);
    border: 1px solid var(--com-borda);
    background: var(--com-superficie);
    transition: color 200ms, border-color 200ms;
}

.com-filtros a:hover { color: var(--com-tinta); border-color: var(--com-borda-forte); }

.com-filtros a[aria-current='true'] {
    color: #0A0910;
    background: var(--com-destaque);
    border-color: var(--com-destaque);
}

.com-podio {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    align-items: end;
}

.com-degrau {
    border: 1px solid var(--com-borda);
    border-radius: var(--com-r-g);
    background: var(--com-superficie);
    padding: 22px 14px 18px;
    text-align: center;
    position: relative;
}

.com-degrau.p1 {
    padding-top: 36px;
    border-color: color-mix(in oklab, #F0A830 42%, transparent);
    background: linear-gradient(168deg, color-mix(in oklab, #F0A830 15%, transparent), var(--com-superficie) 68%);
    order: 2;
}

.com-degrau.p2 { order: 1; }
.com-degrau.p3 { order: 3; }

.com-degrau .com-avatar { width: 56px; height: 56px; font-size: 20px; border-radius: 18px; margin: 0 auto 11px; }
.com-degrau.p1 .com-avatar { width: 70px; height: 70px; font-size: 24px; border-radius: 22px; }

.com-medalha {
    position: absolute;
    top: 11px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .16em;
    color: var(--com-tinta3);
}

.com-degrau.p1 .com-medalha { color: #F0A830; }

.com-degrau b {
    display: block;
    font-size: 15px;
    font-weight: 650;
    letter-spacing: -.02em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.com-degrau-info { display: block; font-size: 12px; color: var(--com-tinta3); margin-top: 3px; }

.com-degrau em {
    display: block;
    margin-top: 10px;
    font-family: var(--com-display);
    font-style: normal;
    font-weight: 700;
    font-size: 22px;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
    color: var(--com-destaque);
}

.com-degrau.eu { outline: 2px solid var(--com-destaque); outline-offset: 3px; }

.com-rank { display: flex; flex-direction: column; gap: 2px; }

.com-rank-linha {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    border-radius: var(--com-r-m);
    border: 1px solid transparent;
}

.com-rank-linha:nth-child(odd) { background: color-mix(in oklab, var(--com-tinta) 3%, transparent); }

.com-rank-linha.eu {
    border-color: color-mix(in oklab, var(--com-destaque) 50%, transparent);
    background: color-mix(in oklab, var(--com-destaque) 12%, transparent);
}

.com-pos {
    width: 34px;
    flex: none;
    text-align: right;
    font-family: var(--com-display);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--com-tinta3);
}

.com-rank-linha.eu .com-pos { color: var(--com-destaque); }
.com-rank-linha .com-avatar { width: 38px; height: 38px; font-size: 15px; border-radius: 12px; }
.com-rank-nome { flex: 1; min-width: 0; }

.com-rank-nome b {
    display: block;
    font-size: 14px;
    font-weight: 650;
    letter-spacing: -.015em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.com-rank-nome > span { font-size: 12px; color: var(--com-tinta3); }

.com-rank-pontos {
    font-family: var(--com-display);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: 17px;
    letter-spacing: -.03em;
    white-space: nowrap;
}

.com-rank-pontos small { font-family: var(--com-fonte); font-weight: 500; font-size: 11px; color: var(--com-tinta3); margin-left: 3px; }

.com-corte { display: flex; align-items: center; gap: 12px; color: var(--com-tinta3); font-size: 11px; text-transform: uppercase; letter-spacing: .14em; padding: 4px 14px 10px; }
.com-corte::before, .com-corte::after { content: ''; flex: 1; height: 1px; background: var(--com-borda); }

.com-rodape {
    margin-top: 44px;
    padding-top: 20px;
    border-top: 1px solid var(--com-borda);
    color: var(--com-tinta3);
    font-size: 12px;
    line-height: 1.6;
    max-width: 70ch;
}

.com-rodape a { color: var(--com-tinta2); text-decoration: underline; text-underline-offset: 3px; }

.com-dados { margin-top: 14px; display: grid; gap: 12px; max-width: 400px; }
.com-dados label { font-size: 13px; color: var(--com-tinta2); }

@media (max-width: 780px) {
    .com-entrada { grid-template-columns: 1fr; }
    .com-form-conta--entrar { grid-template-columns: 1fr; }
    .com-form-conta--entrar h2 { grid-column: auto; }
    .com-streak { grid-template-columns: 1fr; }
    .com-streak-lado { border-left: 0; border-top: 1px solid var(--com-borda); }
    .com-saldo { margin-left: 0; }
    .com-podio { grid-template-columns: 1fr; align-items: stretch; }
    .com-degrau.p1, .com-degrau.p2, .com-degrau.p3 { order: 0; padding-top: 32px; }
    .com-degrau.p1 .com-avatar { width: 56px; height: 56px; font-size: 20px; border-radius: 18px; }
    .com-aviso small { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .com *, .com *::before, .com *::after { transition: none !important; animation: none !important; }
}

.com-chama.pequena { width: 46px; height: 46px; border-radius: 14px; }

.com-capa.tom {
    color: var(--com-tom);
    border-color: color-mix(in oklab, var(--com-tom) 34%, transparent);
    background: color-mix(in oklab, var(--com-tom) 10%, transparent);
}

.com-dados button { justify-self: start; }

summary.com-botao { list-style: none; user-select: none; }
summary.com-botao::-webkit-details-marker { display: none; }
summary.com-botao::marker { content: ''; }

/* ==============================================================
   Comunidade social — a linha horizontal é a frequência compartilhada.
   ============================================================= */
.com-social-hero { display: grid; grid-template-columns: minmax(0, .95fr) minmax(420px, 1.05fr); align-items: center; gap: clamp(34px, 7vw, 80px); padding: 28px 0 54px; }
.com-social-hero h1 { margin: 0; max-width: 12ch; font-family: var(--com-display); font-size: clamp(42px, 7vw, 72px); line-height: .92; letter-spacing: -.06em; }
.com-social-hero > div:first-child > p:last-child { max-width: 48ch; color: var(--com-tinta2); }
.com-frequencia { min-height: 270px; position: relative; display: grid; place-items: center; isolation: isolate; }
.com-frequencia::before { content: ''; position: absolute; width: min(76%, 330px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, color-mix(in oklab, var(--com-destaque) 21%, transparent), transparent 68%); filter: blur(3px); z-index: -1; }
.com-frequencia-linha { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: linear-gradient(90deg,transparent,var(--com-destaque) 24%,var(--com-alerta) 50%,var(--com-ok) 76%,transparent); box-shadow: 0 0 16px color-mix(in oklab,var(--com-destaque) 50%,transparent); }
.com-frequencia > a { position: absolute; left: calc(8% + (var(--i) % 6) * 15%); top: calc(19% + (var(--i) % 2) * 43%); width: 48px; height: 48px; border-radius: 50%; border: 3px solid var(--com-fundo); text-decoration: none; animation: com-flutua 3.2s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -230ms); }
.com-frequencia-avatar { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; display: grid; place-items: center; color: #0a0910; background: var(--com-destaque); font-weight: 800; }
.com-frequencia > strong { position: relative; text-align: center; font-family: var(--com-display); font-size: 64px; line-height: .8; letter-spacing: -.06em; text-shadow: 0 0 28px var(--com-fundo); }
.com-frequencia > strong small { display: block; margin-top: 12px; font-family: var(--com-fonte); font-size: 10px; text-transform: uppercase; letter-spacing: .14em; color: var(--com-tinta2); }
.com-frequencia > p { max-width: 25ch; text-align: center; color: var(--com-tinta3); }
@keyframes com-flutua { to { transform: translateY(-9px); } }

.com-social-grade { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 36px; align-items: start; }
.com-mural > h2, .com-social-lado h2 { margin: 0 0 14px; font-family: var(--com-display); font-size: 19px; letter-spacing: -.03em; }
.com-mural > h2 small { font-family: var(--com-fonte); color: var(--com-tinta3); font-size: 12px; font-weight: 500; margin-left: 8px; }
.com-publicar { display: grid; grid-template-columns: 46px minmax(0,1fr); gap: 13px; padding: 16px; margin-bottom: 14px; border: 1px solid var(--com-borda); border-radius: var(--com-r-g); background: var(--com-superficie); }
.com-publicar .com-avatar, .com-post .com-avatar, .com-online-lista .com-avatar, .com-caixa .com-avatar, .com-conversa > header .com-avatar { width: 46px; height: 46px; border-radius: 15px; font-size: 15px; }
.com-publicar label { min-width: 0; }
.com-publicar textarea, .com-dm-form textarea { width: 100%; resize: vertical; border: 0; outline: 0; padding: 9px 2px; background: transparent; color: var(--com-tinta); font: inherit; line-height: 1.45; }
.com-publicar > div { grid-column: 2; display: flex; justify-content: space-between; align-items: center; }
.com-publicar [data-contador] { font-size: 11px; color: var(--com-tinta3); }
.com-convite-conta { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 18px; margin-bottom: 14px; border: 1px dashed var(--com-borda-forte); border-radius: var(--com-r-g); }
.com-convite-conta p { margin: 0; color: var(--com-tinta2); }
.com-posts { display: grid; gap: 9px; }
.com-novas { width: 100%; margin: 0 0 9px; padding: 9px 14px; border: 1px solid color-mix(in oklab,var(--com-destaque) 42%,var(--com-borda)); border-radius: 999px; background: color-mix(in oklab,var(--com-destaque) 10%,transparent); color: var(--com-destaque); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.com-novas[hidden] { display: none; }
.com-post { display: grid; grid-template-columns: 46px minmax(0,1fr); gap: 13px; padding: 18px; border: 1px solid var(--com-borda); border-radius: var(--com-r-g); background: var(--com-superficie); }
.com-post-corpo { min-width: 0; }
.com-post header { display: flex; justify-content: space-between; gap: 10px; }
.com-post header a { color: var(--com-tinta); text-decoration: none; }
.com-post header b { font-size: 14px; }
.com-post header span, .com-post time { margin-left: 6px; color: var(--com-tinta3); font-size: 11px; }
.com-post p { margin: 7px 0 12px; color: var(--com-tinta2); overflow-wrap: anywhere; }
.com-post-acoes { display: flex; align-items: center; gap: 14px; }
.com-post-acoes > button { border: 0; background: none; color: var(--com-tinta3); display: inline-flex; align-items: center; gap: 6px; padding: 0; cursor: pointer; }
.com-post-acoes > button[aria-pressed='true'] { color: var(--com-destaque); }
.com-post-acoes > button[aria-pressed='true'] svg { fill: currentColor; }
.com-post-acoes details { position: relative; font-size: 11px; color: var(--com-tinta3); }
.com-post-acoes summary { cursor: pointer; }
.com-post-acoes form { position: absolute; z-index: 3; top: 24px; left: 0; display: flex; gap: 6px; padding: 10px; border: 1px solid var(--com-borda); border-radius: 10px; background: #16131e; }
.com-post-acoes input, .com-mais input { min-width: 190px; border: 1px solid var(--com-borda); border-radius: 7px; padding: 8px; background: #0c0a12; color: var(--com-tinta); }
.com-post-acoes form button, .com-mais button { border: 0; background: none; color: #ff7a89; cursor: pointer; }

.com-social-lado { display: grid; gap: 14px; position: sticky; top: 18px; }
.com-social-lado > section { padding: 18px; border: 1px solid var(--com-borda); border-radius: var(--com-r-g); background: var(--com-superficie); }
.com-online-lista { display: grid; }
.com-online-lista a { display: grid; grid-template-columns: 38px minmax(0,1fr) 8px; align-items: center; gap: 10px; padding: 9px 0; color: var(--com-tinta); text-decoration: none; border-top: 1px solid var(--com-borda); }
.com-online-lista a:first-child { border-top: 0; }
.com-online-lista .com-avatar { width: 38px; height: 38px; border-radius: 13px; }
.com-online-lista span { min-width: 0; }
.com-online-lista b, .com-online-lista small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.com-online-lista b { font-size: 13px; }.com-online-lista small { color: var(--com-tinta3); font-size: 11px; }
.com-online-lista i, .com-presenca i { width: 7px; height: 7px; border-radius: 50%; background: var(--com-ok); box-shadow: 0 0 0 4px color-mix(in oklab,var(--com-ok) 14%,transparent); }
.com-regras p { color: var(--com-tinta2); font-size: 13px; }.com-regras a { color: var(--com-destaque); font-size: 12px; }
.com-toast { position: fixed; z-index: 100; right: 20px; bottom: 20px; max-width: 360px; padding: 13px 17px; border-radius: 10px; background: var(--com-ok); color: #071410; font-weight: 700; opacity: 0; transform: translateY(15px); pointer-events: none; transition: .2s; }
.com-toast.visivel { opacity: 1; transform: none; }.com-toast.ruim { background: #ff7a89; color: #1a070b; }

/* Perfil público */
.com-perfil-publico { display: grid; grid-template-columns: 112px minmax(0,1fr) auto; align-items: center; gap: 24px; padding: 26px 0 30px; }
.com-perfil-foto { position: relative; }.com-perfil-foto .com-avatar { width: 112px; height: 112px; border-radius: 34px; font-size: 36px; }
.com-perfil-foto > i { position: absolute; right: -2px; bottom: 5px; width: 18px; height: 18px; border: 4px solid var(--com-fundo); border-radius: 50%; background: var(--com-ok); }
.com-perfil-identidade h1 { margin: 0; font-family: var(--com-display); font-size: clamp(34px,6vw,58px); letter-spacing: -.055em; line-height: .95; }
.com-handle { margin: 7px 0; color: var(--com-tinta3); }.com-bio { margin: 9px 0; max-width: 60ch; color: var(--com-tinta2); }
.com-presenca { display: inline-flex; align-items: center; gap: 8px; color: var(--com-ok); text-decoration: none; font-size: 12px; }
.com-perfil-botoes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: end; }
.com-mais { position: relative; }.com-mais summary { list-style: none; width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--com-borda); border-radius: 50%; cursor: pointer; }.com-mais summary::-webkit-details-marker{display:none}.com-mais[open] { padding: 10px; border: 1px solid var(--com-borda); border-radius: 12px; background: #16131e; }.com-mais form { display: grid; gap: 6px; margin-top: 8px; }
.com-perfil-metricas { display: grid; grid-template-columns: repeat(5,1fr); margin-bottom: 38px; border-top: 1px solid var(--com-borda); border-bottom: 1px solid var(--com-borda); }
.com-perfil-metricas div { padding: 18px; border-left: 1px solid var(--com-borda); }.com-perfil-metricas div:first-child{border-left:0}.com-perfil-metricas b { display:block;font-family:var(--com-display);font-size:27px;letter-spacing:-.04em}.com-perfil-metricas span{color:var(--com-tinta3);font-size:11px}
.com-canais-favoritos { display:flex;gap:9px;flex-wrap:wrap}.com-canais-favoritos a{display:grid;grid-template-columns:8px auto;gap:2px 9px;min-width:150px;padding:13px;border:1px solid color-mix(in oklab,var(--com-tom) 32%,var(--com-borda));border-radius:14px;color:var(--com-tinta);text-decoration:none;background:color-mix(in oklab,var(--com-tom) 7%,transparent)}.com-canais-favoritos i{grid-row:1/3;width:8px;height:8px;margin-top:5px;border-radius:50%;background:var(--com-tom)}.com-canais-favoritos b{font-size:13px}.com-canais-favoritos span{font-size:10px;color:var(--com-tinta3)}
.com-discoteca { display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px}.com-discoteca article{min-width:0}.com-discoteca img,.com-discoteca article>span{width:100%;aspect-ratio:1;border-radius:16px;object-fit:cover;background:var(--com-superficie2);display:grid;place-items:center}.com-discoteca b,.com-discoteca small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.com-discoteca b{margin-top:8px;font-size:12px}.com-discoteca small{color:var(--com-tinta3);font-size:11px}.com-404,.com-porta-fechada{padding:12vh 0}.com-404 h1,.com-porta-fechada h1{font-family:var(--com-display);font-size:clamp(42px,8vw,76px);letter-spacing:-.06em;margin:0 0 20px}.com-porta-fechada p{color:var(--com-tinta2);max-width:52ch}

/* Mensagens */
.com-mensagens { display:grid;grid-template-columns:320px minmax(0,1fr);min-height:650px;border:1px solid var(--com-borda);border-radius:var(--com-r-g);overflow:hidden;background:var(--com-superficie)}
.com-caixa{border-right:1px solid var(--com-borda);overflow:auto}.com-caixa>header{padding:20px;display:flex;align-items:baseline;justify-content:space-between}.com-caixa h1{margin:0;font-family:var(--com-display);font-size:24px}.com-caixa>header a{font-size:11px;color:var(--com-destaque)}.com-caixa>a{display:grid;grid-template-columns:46px minmax(0,1fr) auto;gap:10px;align-items:center;padding:12px 16px;color:var(--com-tinta);text-decoration:none;border-top:1px solid var(--com-borda)}.com-caixa>a[aria-current=page]{background:color-mix(in oklab,var(--com-destaque) 9%,transparent)}.com-caixa>a span{min-width:0}.com-caixa>a b,.com-caixa>a small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.com-caixa>a b{font-size:13px}.com-caixa>a small{font-size:11px;color:var(--com-tinta3)}.com-caixa>a em{display:grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--com-destaque);color:#0a0910;font-style:normal;font-size:10px;font-weight:800}
.com-conversa{display:grid;grid-template-rows:auto minmax(0,1fr) auto;min-width:0;max-height:74vh}.com-conversa>header{display:flex;align-items:center;gap:12px;padding:15px 20px;border-bottom:1px solid var(--com-borda)}.com-conversa>header>div{flex:1}.com-conversa>header a{color:var(--com-tinta);text-decoration:none}.com-conversa>header b,.com-conversa>header span{display:block}.com-conversa>header span{font-size:11px;color:var(--com-tinta3)}.com-conversa>header button{border:0;background:none;color:var(--com-tinta3);cursor:pointer}.com-baloes{padding:22px;overflow:auto;display:flex;flex-direction:column;gap:9px}.com-baloes article{max-width:min(72%,560px);padding:10px 13px;border-radius:16px;background:var(--com-superficie2)}.com-baloes article.minha{align-self:flex-end;background:color-mix(in oklab,var(--com-destaque) 19%,var(--com-superficie2));border-bottom-right-radius:5px}.com-baloes article.dela{align-self:flex-start;border-bottom-left-radius:5px}.com-baloes p{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}.com-baloes time{display:block;margin-top:5px;color:var(--com-tinta3);font-size:9px}.com-baloes details{font-size:9px;color:var(--com-tinta3);margin-top:4px}.com-baloes details form{display:flex;gap:4px}.com-baloes details input{border:1px solid var(--com-borda);background:transparent;color:var(--com-tinta);padding:5px}.com-baloes details button{border:0;background:none;color:#ff7a89}.com-dm-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:15px 20px;border-top:1px solid var(--com-borda)}.com-dm-form textarea{padding:10px 13px;border:1px solid var(--com-borda);border-radius:12px;background:var(--com-superficie)}.com-dm-fechada{margin:0;padding:16px 20px;border-top:1px solid var(--com-borda);color:var(--com-tinta3);font-size:12px}.com-conversa-vazia{place-self:center;text-align:center;color:var(--com-tinta3)}.com-conversa-vazia span{color:var(--com-destaque)}.com-conversa-vazia h2{color:var(--com-tinta);font-family:var(--com-display);margin:10px 0 4px}

@media(max-width:860px){.com-social-hero{grid-template-columns:1fr}.com-frequencia{min-height:220px}.com-social-grade{grid-template-columns:1fr}.com-social-lado{position:static}.com-perfil-publico{grid-template-columns:82px minmax(0,1fr)}.com-perfil-foto .com-avatar{width:82px;height:82px;border-radius:25px}.com-perfil-botoes{grid-column:1/-1;justify-content:start}.com-perfil-metricas{grid-template-columns:repeat(2,1fr)}.com-perfil-metricas div{border-top:1px solid var(--com-borda)}.com-mensagens{grid-template-columns:1fr}.com-caixa{border-right:0;border-bottom:1px solid var(--com-borda);max-height:280px}.com-conversa{min-height:560px}.com-baloes article{max-width:88%}}
@media(max-width:560px){.com-social-hero h1{font-size:43px}.com-frequencia>a{width:40px;height:40px}.com-publicar{grid-template-columns:38px minmax(0,1fr);padding:13px}.com-publicar .com-avatar,.com-post .com-avatar{width:38px;height:38px;border-radius:12px}.com-post{grid-template-columns:38px minmax(0,1fr);padding:14px}.com-post header{display:block}.com-post time{margin-left:0}.com-convite-conta{align-items:flex-start;flex-direction:column}.com-perfil-publico{grid-template-columns:1fr}.com-perfil-identidade h1{font-size:42px}.com-perfil-botoes{grid-column:auto}.com-perfil-metricas{grid-template-columns:1fr 1fr}.com-discoteca{grid-template-columns:repeat(2,minmax(0,1fr))}.com-dm-form{grid-template-columns:1fr}.com-mensagens{border-radius:16px}.com-conversa{max-height:none;min-height:70vh}}

/* Catálogo — um case de selos prensados, não uma loja genérica. */
.com-link-recuperar { color: var(--com-tinta3); font-size: 12px; text-underline-offset: 3px; }
.com-missao-premio { align-self: flex-start; padding: 3px 7px; border-radius: 999px; background: color-mix(in oklab,var(--com-ok) 14%,transparent); color: var(--com-ok); font-size: 10px; letter-spacing: .04em; }
.com-case-faixa { display: grid; grid-template-columns: minmax(190px,auto) minmax(220px,1fr) auto; align-items: center; gap: 22px; padding: 18px 20px; border: 1px solid var(--com-borda); border-radius: var(--com-r-g); background: linear-gradient(110deg,color-mix(in oklab,var(--com-destaque) 8%,transparent),var(--com-superficie)); }
.com-case-faixa>div>b,.com-case-faixa>div>span { display:block; }.com-case-faixa>div>span{color:var(--com-tinta2);font-size:12px;margin-top:3px}.com-case-selos{display:flex;align-items:center;min-height:54px}.com-case-selos .com-selo-emblema{margin-right:-9px;box-shadow:0 0 0 3px var(--com-fundo)}.com-case-vazio{width:52px;height:52px;display:grid;place-items:center;border:1px dashed var(--com-borda-forte);border-radius:50%;color:var(--com-tinta3)}
.com-colecao-hero { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(220px,.55fr); gap:clamp(28px,6vw,80px); align-items:end; padding:clamp(28px,7vw,78px) 0 42px; border-bottom:1px solid var(--com-borda); }
.com-colecao-hero h1{font-family:var(--com-display);font-size:clamp(43px,7vw,78px);line-height:.92;letter-spacing:-.065em;margin:8px 0 18px;max-width:760px}.com-colecao-hero>div>p:last-child{max-width:64ch;color:var(--com-tinta2)}
.com-case-contador{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:14px;padding:20px;border:1px solid var(--com-borda);border-radius:28px;background:var(--com-superficie)}.com-case-contador>b{font-family:var(--com-display);font-size:42px;line-height:.85;letter-spacing:-.05em}.com-case-contador>b small{display:block;margin-top:8px;font-family:var(--com-fonte);font-size:11px;letter-spacing:.03em;color:var(--com-tinta3)}.com-case-contador>p{grid-column:1/-1;margin:0;padding-top:11px;border-top:1px solid var(--com-borda);font-size:12px;color:var(--com-tinta2)}
.com-selo-emblema{position:relative;width:68px;height:68px;flex:none;display:grid;place-items:center;border-radius:50%;color:var(--selo-cor);background:radial-gradient(circle at 36% 30%,color-mix(in oklab,var(--selo-cor) 32%,#17131f),#09080d 62%);border:1px solid color-mix(in oklab,var(--selo-cor) 55%,transparent);box-shadow:inset 0 0 0 5px #09080d,inset 0 0 0 6px color-mix(in oklab,var(--selo-cor) 28%,transparent),0 8px 24px rgba(0,0,0,.3);overflow:hidden}.com-selo-emblema::before{content:'';position:absolute;inset:8px;border-radius:50%;background:repeating-radial-gradient(circle,transparent 0 3px,rgba(255,255,255,.07) 3px 4px)}.com-selo-emblema::after{content:'';position:absolute;inset:-30%;background:linear-gradient(var(--selo-giro),transparent 42%,rgba(255,255,255,.18) 50%,transparent 58%);transform:rotate(var(--selo-giro));}.com-selo-icone{position:relative;z-index:2;width:35px;height:35px;display:grid;place-items:center;border-radius:50%;background:#0a0910;border:1px solid color-mix(in oklab,var(--selo-cor) 45%,transparent)}.com-selo-emblema>small{position:absolute;z-index:3;bottom:4px;padding:0 4px;border-radius:5px;background:#0a0910;color:var(--com-tinta2);font:700 7px/12px var(--com-fonte);letter-spacing:.08em}.com-selo-emblema.mini{width:52px;height:52px}.com-selo-emblema.mini .com-selo-icone{width:28px;height:28px}.com-selo-emblema.raro{box-shadow:inset 0 0 0 5px #09080d,inset 0 0 0 6px var(--selo-cor),0 0 24px color-mix(in oklab,var(--selo-cor) 18%,transparent)}.com-selo-emblema.epico,.com-selo-emblema.rar-epico{filter:saturate(1.25)}.com-selo-emblema.rar-lendario,.com-selo-emblema.rar-mitico{box-shadow:inset 0 0 0 4px #09080d,inset 0 0 0 6px #f9d76e,0 0 30px color-mix(in oklab,var(--selo-cor) 38%,transparent)}
.com-colecoes{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px;padding:24px 0}.com-colecoes a{position:relative;min-width:0;padding:11px 12px;border:1px solid var(--com-borda);border-radius:12px;color:var(--com-tinta2);text-decoration:none;background:var(--com-superficie)}.com-colecoes a::before{content:'';position:absolute;inset:0 auto 0 0;width:2px;background:var(--selo-cor,var(--com-destaque));opacity:.7}.com-colecoes a[aria-current=page]{border-color:color-mix(in oklab,var(--selo-cor,var(--com-destaque)) 48%,var(--com-borda));color:var(--com-tinta)}.com-colecoes b,.com-colecoes span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.com-colecoes b{font-size:11px}.com-colecoes span{font-size:9px;color:var(--com-tinta3);margin-top:2px}
.com-catalogo-cab{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:14px 0}.com-catalogo-cab>div>b,.com-catalogo-cab>div>span{display:block}.com-catalogo-cab>div>span{color:var(--com-tinta3);font-size:11px}
.com-catalogo{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.com-colecionavel{display:grid;grid-template-columns:76px minmax(0,1fr);gap:13px;align-items:center;padding:15px;border:1px solid var(--com-borda);border-radius:18px;background:var(--com-superficie);opacity:.76}.com-colecionavel.adquirido{opacity:1;border-color:color-mix(in oklab,var(--selo-cor) 38%,var(--com-borda));background:linear-gradient(140deg,color-mix(in oklab,var(--selo-cor) 9%,transparent),var(--com-superficie))}.com-colecionavel-txt{min-width:0}.com-colecionavel-txt>span{display:block;color:var(--com-tinta3);font-size:9px;text-transform:uppercase;letter-spacing:.08em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.com-colecionavel h2{font-size:14px;margin:3px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.com-colecionavel p{margin:0;color:var(--com-tinta2);font-size:11px}.com-colecionavel form{grid-column:1/-1}.com-colecionavel form .com-botao{width:100%}.com-colecionavel button:disabled{opacity:.42;cursor:not-allowed}
.com-paginacao{display:flex;justify-content:center;gap:6px;padding:28px}.com-paginacao a{width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--com-borda);border-radius:50%;color:var(--com-tinta2);text-decoration:none}.com-paginacao a[aria-current=page]{background:var(--com-destaque);color:#09080d;border-color:var(--com-destaque)}
.com-vitrine-emblemas>div{display:flex;flex-wrap:wrap;gap:10px}.com-vitrine-emblemas article{display:flex;align-items:center;gap:10px;min-width:190px;padding:9px 13px 9px 9px;border:1px solid var(--com-borda);border-radius:999px;background:var(--com-superficie)}.com-vitrine-emblemas article .com-selo-emblema{width:45px;height:45px}.com-vitrine-emblemas article .com-selo-icone{width:26px;height:26px}.com-vitrine-emblemas article b,.com-vitrine-emblemas article small{display:block}.com-vitrine-emblemas article b{font-size:12px}.com-vitrine-emblemas article small{font-size:9px;color:var(--com-tinta3)}
@media(max-width:900px){.com-colecoes{grid-template-columns:repeat(3,minmax(0,1fr))}.com-catalogo{grid-template-columns:repeat(2,minmax(0,1fr))}.com-case-faixa{grid-template-columns:1fr auto}.com-case-selos{grid-column:1/-1}}
@media(max-width:620px){.com-colecao-hero{grid-template-columns:1fr}.com-colecoes{display:flex;overflow-x:auto}.com-colecoes a{min-width:135px}.com-catalogo{grid-template-columns:1fr}.com-catalogo-cab{align-items:flex-start;flex-direction:column}.com-case-faixa{grid-template-columns:1fr}.com-case-faixa>.com-botao{width:100%}}
.com-recuperar{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,460px);gap:clamp(30px,8vw,110px);align-items:center;min-height:calc(100vh - 190px);padding:50px 0}.com-recuperar h1{margin:8px 0 16px;font-family:var(--com-display);font-size:clamp(44px,7vw,78px);line-height:.92;letter-spacing:-.06em}.com-recuperar>div>p:last-child{max-width:56ch;color:var(--com-tinta2)}.com-recuperar-card{padding:24px;border:1px solid var(--com-borda);border-radius:var(--com-r-g);background:var(--com-superficie)}
@media(max-width:720px){.com-recuperar{grid-template-columns:1fr;min-height:auto}.com-recuperar-card{padding:18px}}