:root {

    --black: #000000;
    --white: #ffffff;

    --yellow: #ffd600;

    --green: #3fa66b;

    --gray-50: #f8f8f8;
    --gray-100: #f1f1f1;
    --gray-200: #e5e5e5;
    --gray-600: #666666;

    --heading: 'Oswald', sans-serif;
    --body: 'Roboto', sans-serif;

}


* {
    box-sizing: border-box;
}


body {

    margin: 0;

    font-family: var(--body);

    color: #111;

    background: var(--white);

    line-height: 1.6;

}


h1,
h2,
h3,
h4,
h5,
h6 {

    font-family: var(--heading);

    font-weight: 700;

    line-height: 1.15;

}


h1 {

    font-size: clamp(
        2.3rem,
        5vw,
        3.5rem
    );

}


h2 {

    font-size: clamp(
        2rem,
        4vw,
        3rem
    );

}


h3 {

    font-size: 2rem;

}


a {

    color: inherit;

    text-decoration: none;

}


/* =====================================================
HEADER
===================================================== */

.site-header {

    position: sticky;

    top: 0;

    z-index: 1000;

    background: rgba(
        255,
        255,
        255,
        .96
    );

    backdrop-filter: blur(10px);

    border-bottom: 1px solid var(--gray-200);

}


.site-header .navbar {

    min-height: 75px;

}


.logo {

    width: 300px;

    height: 35px;

    object-fit: contain;

}


.nav-link {

    font-weight: 500;

    padding: .6rem 1rem !important;

    position: relative;

}


.nav-link::after {

    content: '';

    position: absolute;

    bottom: 2px;

    left: 50%;

    width: 0;

    height: 3px;

    background: var(--yellow);

    transition: .25s ease;

    transform: translateX(-50%);

}


.nav-link:hover::after {

    width: 60%;

}


.header-social {

    display: flex;

    gap: 15px;

}


.header-social a {

    font-size: 22px;

    transition: .2s ease;

}


.header-social a:hover {

    color: var(--green);

    transform: translateY(-2px);

}


.navbar-toggler {

    border: none;

    font-size: 30px;

}


.navbar-toggler:focus {

    box-shadow: none;

}


/* =====================================================
SCROLL REVEAL
===================================================== */

.reveal {

    opacity: 0;

    transform: translateY(35px);

    transition:
        opacity .7s ease,
        transform .7s ease;

}


.reveal.active {

    opacity: 1;

    transform: translateY(0);

}


/* =====================================================
BOTONES
===================================================== */

.btn-primary-custom {

    background: var(--black);

    color: var(--white);

    border: 2px solid var(--black);

    border-radius: 50px;

    padding: 12px 25px;

    font-weight: 700;

    transition: .25s ease;

}


.btn-primary-custom:hover {

    background: var(--yellow);

    border-color: var(--yellow);

    color: var(--black);

}


/* =====================================================
FOOTER
===================================================== */

.site-footer {

    background: var(--black);

    color: var(--white);

    padding-top: 60px;

}


.site-footer h4 {

    font-size: 1.4rem;

    margin-bottom: 20px;

}


.site-footer ul {

    list-style: none;

    padding: 0;

    margin: 0;

}


.site-footer li {

    margin-bottom: 10px;

}


.site-footer a {

    color: #ddd;

    transition: .2s ease;

}


.site-footer a:hover {

    color: var(--yellow);

}


.footer-social {

    display: flex;

    gap: 15px;

}


.footer-social a {

    font-size: 25px;

}


.footer-bottom {

    margin-top: 50px;

    padding: 20px 0;

    border-top: 1px solid #333;

    color: #aaa;

    font-size: .9rem;

}


/* =====================================================
MOBILE
===================================================== */

@media (max-width: 991px) {

    .logo {

        width: 220px;

        height: auto;

    }


    .header-social {

        margin-top: 15px;

        padding-bottom: 15px;

    }

}


@media (max-width: 576px) {

    .logo {

        width: 190px;

    }

}