@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600&family=Cormorant+Garamond:wght@400;500;600&display=swap');

:root {
    --font-title: 'Cinzel', serif;
    --font-text: 'Cormorant Garamond', serif;
    --gold: #8a6a2f;
    --dark: #19130d;
}

.color-gold {
    color: var(--gold) !important;
}

html,
body {
    font-family: 'Cinzel' !important;
    background-color: var(--dark);
    background-color: #F0E0CC !important;
    scroll-behavior: smooth;
}

.fundo {
    background-image: url('../img/fundo-pc.webp');
    background-position: center !important;
    background-size: cover;
    background-color: #F0E0CC !important;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

@media (max-width: 768px) {
    .fundo {
        background-image: url('../img/fundo-cell.webp');
    }
}

.img-perfil {
    width: 100%;
    height: auto;
    max-width: 200px;
}

.img-arabesco {
    width: 100%;
    max-width: 200px;
    height: auto;
}

.btn-link {
    --corte-x: 7px;
    --corte-y: 8px;
    --borda: var(--gold);
    --fundo: #f5eee4;

    width: 100%;
    min-height: 78px;
    position: relative;
    isolation: isolate;
    overflow: hidden;

    text-decoration: none !important;
    color: var(--dark) !important;
    font-weight: bolder !important;

    border: 0 !important;
    border-radius: 0 !important;
    background: var(--borda) !important;

    padding: 10px 24px !important;

    clip-path: polygon(var(--corte-x) 0,
            calc(100% - var(--corte-x)) 0,
            calc(100% - var(--corte-x)) var(--corte-y),
            100% var(--corte-y),
            100% calc(100% - var(--corte-y)),
            calc(100% - var(--corte-x)) calc(100% - var(--corte-y)),
            calc(100% - var(--corte-x)) 100%,
            var(--corte-x) 100%,
            var(--corte-x) calc(100% - var(--corte-y)),
            0 calc(100% - var(--corte-y)),
            0 var(--corte-y),
            var(--corte-x) var(--corte-y));
}

.btn-link::before {
    content: "";
    position: absolute;
    inset: 1px;
    background: var(--fundo);
    clip-path: inherit;
    z-index: -1;
}

.btn-link>* {
    position: relative;
    z-index: 2;
}