/*
 * 13/11/2026 (testado e aprovado por ele): a BORDA do «Cadastrar meu clã / Pré-visualizar página» nos botões
 * de home-botoes.css — os 4 cantos chanfrados, aro fino claro, entalhe escuro e o vidro por dentro, com um recuo pequeno
 * no meio das laterais. Mesmas cores (--hb-*) de home-botoes.css.
 * Camadas (todas com o mesmo recorte, cada uma um pouco menor):
 *   o próprio botão = aro metálico · ::before = entalhe escuro · ::after = vidro (miolo + reflexo)
 * Desfazer = tirar o <link> deste arquivo em pages/home.blade.php.
 */
.pg-jc .pg-jc-botao--vermelho, .pg-jc .pg-jc-botao--escuro, .pg-jc .pg-jc-status,
.pg-turbo2 .pg-turbo2__botao,
.pg-8460 :is(.pg-499fc3a, .pg-f86bd08, .pg-2b927b4) .pg-botao__plane {
    --c: 10px;   /* chanfro */
    --n: 3px;    /* recuo do meio das laterais */
    position: relative;
    isolation: isolate;
    border: 0 !important;
    border-radius: 0 !important;
    background: linear-gradient(180deg, var(--hb-aro1) 0%, var(--hb-aro2) 45%, var(--hb-aro3) 100%) !important;
    box-shadow: none !important;
    clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% 32%, calc(100% - var(--n)) 38%, calc(100% - var(--n)) 62%,
        100% 68%, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 68%,
        var(--n) 62%, var(--n) 38%, 0 32%, 0 var(--c));
}
.pg-8460 :is(.pg-499fc3a, .pg-f86bd08, .pg-2b927b4) .pg-botao__plane { --c: 7px; --n: 2px; position: absolute; }
.pg-8460 :is(.pg-499fc3a, .pg-f86bd08, .pg-2b927b4) .pg-botao__instance { border-radius: 0 !important; overflow: visible; }

.pg-jc .pg-jc-botao--vermelho::before, .pg-jc .pg-jc-botao--escuro::before, .pg-jc .pg-jc-status::before,
.pg-turbo2 .pg-turbo2__botao::before,
.pg-8460 :is(.pg-499fc3a, .pg-f86bd08, .pg-2b927b4) .pg-botao__plane::before,
.pg-jc .pg-jc-botao--vermelho::after, .pg-jc .pg-jc-botao--escuro::after, .pg-jc .pg-jc-status::after,
.pg-turbo2 .pg-turbo2__botao::after,
.pg-8460 :is(.pg-499fc3a, .pg-f86bd08, .pg-2b927b4) .pg-botao__plane::after {
    content: "";
    position: absolute;
    pointer-events: none;
    --k: calc(var(--c) - 1px);
    clip-path: polygon(var(--k) 0, calc(100% - var(--k)) 0, 100% var(--k), 100% calc(100% - var(--k)), calc(100% - var(--k)) 100%,
        var(--k) 100%, 0 calc(100% - var(--k)), 0 var(--k));
}
/* entalhe escuro entre o aro e o vidro */
.pg-jc .pg-jc-botao--vermelho::before, .pg-jc .pg-jc-botao--escuro::before, .pg-jc .pg-jc-status::before,
.pg-turbo2 .pg-turbo2__botao::before,
.pg-8460 :is(.pg-499fc3a, .pg-f86bd08, .pg-2b927b4) .pg-botao__plane::before {
    inset: 1.5px calc(1.5px + var(--n));
    z-index: -2;
    background: color-mix(in srgb, var(--hb-aro3) 25%, #000);
}
/* vidro */
.pg-jc .pg-jc-botao--vermelho::after, .pg-jc .pg-jc-botao--escuro::after, .pg-jc .pg-jc-status::after,
.pg-turbo2 .pg-turbo2__botao::after,
.pg-8460 :is(.pg-499fc3a, .pg-f86bd08, .pg-2b927b4) .pg-botao__plane::after {
    inset: 3.5px calc(3.5px + var(--n));
    --k: calc(var(--c) - 2px);
    z-index: -1;
    background:
        linear-gradient(105deg, transparent 55%, rgba(255, 255, 255, calc(var(--hb-reflexo, .28) / 2)) 62%, transparent 72%),
        linear-gradient(180deg, rgba(255, 255, 255, var(--hb-reflexo, .28)) 0%, rgba(255, 255, 255, calc(var(--hb-reflexo, .28) / 3.5)) 48%, rgba(255, 255, 255, 0) 49%),
        linear-gradient(180deg, var(--hb-a) 0%, var(--hb-b) 100%);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--hb-aro1) 60%, transparent);
}