@font-face {
    font-family: "lancelot";
    src: url("fonts/lancelot/Lancelot-Regular.ttf");
}

@font-face {
    font-family: "poppins";
    src: url("fonts/poppins/Poppins-Regular.ttf");
}

@font-face {
    font-family: "mrsaint";
    src: url("fonts/MrsSaintDelafield-Regular.ttf");
}

@font-face {
    font-family: "montserrat-black";
    src: url("fonts/montserrat/Montserrat-Black.otf");
}

@font-face {
    font-family: "montserrat-bold";
    src: url("fonts/montserrat/Montserrat-Bold.otf");
}

@font-face {
    font-family: "montserrat-regular";
    src: url("fonts/montserrat/Montserrat-Medium.otf");
}

hr {
    border: 1px solid #ED1E79 !important;
}

.font-lancelot {
    font-family: "lancelot" !important;
}

.font-poppins {
    font-family: "poppins" !important;
}

.montserrat-black {
    font-family: "montserrat-black" !important;
}

.montserrat-bold {
    font-family: "montserrat-bold" !important;
}

.montserrat-regular {
    font-family: "montserrat-regular" !important;
}

.mrsaint {
    font-family: "mrsaint" !important;
}


.text-gold {
    color: #b78020 !important;
}

.bg-gold {
    background-color: #b78020 !important;
}


.text-red {
    color: #a01e38 !important;
}

.bg-red {
    background-color: #a01e38 !important;
}


.text-red2 {
    color: #7c162f !important;
}

.bg-red2 {
    background-color: #7c162f !important;
}



.nav-link {
    width: 150px !important;
    border-bottom: 3px solid transparent !important;
    text-align: center;
}

.nav-link:hover {
    border-bottom: 3px solid #a01e38 !important;
}

.nav-link.active {
    border-bottom: 3px solid #b78020 !important;
}


/* Botones Personalizados */

.btn-gold {
    border: 2px solid #b78020 !important;
    background-color: #b78020 !important;
    color: #FFFFFF !important;
    font-size: 18px;
    border-radius: 0px;
    padding: 12px 25px;
    font-weight: lighter !important;
}

.btn-gold:hover {
    border: 2px solid #7c162f !important;
    background-color: transparent !important;
    color: #a01e38 !important;
    font-size: 18px;
    box-shadow: 5px 5px 5px #a01e38;
}

.item-btn-menu {
    margin: 10px;
    background: rgb(255, 0, 0);
    background: linear-gradient(90deg, rgba(255, 0, 0, 1) 0%, rgba(90, 90, 255, 1) 100%);
    background-size: 300%;
    border-radius: 0px;
    border: none;
    padding: 15px 35px;
    color: #FFFFFF;
    text-decoration: none;
    font-size: 14px;
    transition: all 0.15s ease-out !important;
}

.item-btn-menu:hover {
    animation: gradient-animation 5s ease infinite;
}

@keyframes gradient-animation {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.icon-delete {
    color: #de272c;
    font-size: 16px;
    padding: 8px;
}

.icon-delete:hover {
    color: #a71c1e;
    background-color: #DDDDDD;
    cursor: pointer;
}

.icon-edit {
    color: #b78020;
    font-size: 16px;
    padding: 8px;
}

.icon-edit:hover {
    background-color: #DDDDDD;
    cursor: pointer;
}

/* boton es oficiales */

.btn-vermas {
    width: 120px;
    border-radius: 2rem;
    font-size: 0.9rem;
    padding: 0.5rem 0;
    border: 1.5px solid #2d2829;
    background-color: #2d2829;
    color: white;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-vermas:hover {
    background-color: #494d55;
    border: 1.5px solid #494d55;
    color: white;
}

.btn-verde {
    width: 120px;
    border-radius: 2rem;
    font-size: 0.9rem;
    padding: 0.5rem 0;
    border: 1.5px solid #287f55;
    background-color: #287f55;
    color: white;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-verde:hover {
    background-color: #6cae86;
    border: 1.5px solid #6cae86;
    color: white;
}

/* efectos visuales */



.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.8s ease-out;
}

.fade-in.appear {
    opacity: 1;
    transform: translateY(0);
}