/* =====================================================================
   Portfólio · Botões
   ===================================================================== */

.btn {
    --btn-fundo: transparent;
    --btn-cor: var(--branco);
    --btn-borda: var(--linha-forte);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    min-height: 3rem;
    padding: .7rem 1.35rem;
    border: 1px solid var(--btn-borda);
    border-radius: var(--raio);
    background: var(--btn-fundo);
    color: var(--btn-cor);
    font-weight: 600;
    font-size: .98rem;
    line-height: 1.2;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition: border-color .25s, color .25s, transform .2s var(--saida);
}
.btn:hover { color: var(--btn-cor); }
.btn:active { transform: translateY(1px); }

/* Preenchimento que entra da esquerda no hover */
.btn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--btn-varre, var(--branco));
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .45s var(--saida);
}
.btn:hover::before { transform: scaleX(1); transform-origin: left; }

.btn-primario {
    --btn-fundo: var(--vermelho-forte);
    --btn-borda: var(--vermelho-forte);
    --btn-varre: #ff4d57;
}
.btn-contorno:hover { --btn-cor: var(--preto); border-color: var(--branco); }

.btn-pequeno { min-height: 2.4rem; padding: .45rem .95rem; font-size: .9rem; }