@import url('https://fonts.googleapis.com/css2?family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap');


:root {
    --color-01: #F8ECDC;  /*** COLOR FONDOS ***/
    --color-02: #8eae7f;  /*** COLOR MATEA ***/
    --color-03: #8b4b4d;  /*** COLOR cafes ***/
    --color-04: #001391;  /******** LINKS ********/
}

*{
  font-family: "Urbanist", sans-serif;
}


html{
    font-size: 14px;
    scroll-behavior: smooth;
}

section{
    scroll-margin-top: 50px !important;
}

/* VARIOS ==========================================
====================================================*/

.border-20px{
    border-radius: 20px;
}

.border-shadow {
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
}



.img-responsive{
    width: 100%;
    height: 100%;
    aspect-ratio: 21 / 9;
    object-fit: cover;
}



.container-nav{
    position: fixed;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%) !important;
    z-index: 100;
}




/* FUENTES ==========================================
====================================================*/

.text-small{
    font-size: 0.9rem;
}
.text-xsmall{
    font-size: 0.64rem;
}



.text-primary{
    color: var(--color-02) !important;
}
.text-secondary{
    color: var(--color-03) !important;
}

.text-dark{
    color: rgba(57, 58, 60, var(--bs-text-opacity)) !important;
}



/* BACKGROUNDS =====================================
====================================================*/

.bg-primary{
    background: var(--color-01) !important;
}
.bg-secondary{
    background: var(--color-02) !important;
}
.bg-tertiary{
    background: var(--color-03) !important;
}


.bg-light-glass{
    background-color: rgba(245, 245, 245, .75);
    backdrop-filter: blur(10px);
    border: thin solid rgba(255, 255, 255);
}


.modal{
    backdrop-filter: blur(10px) brightness(50%) !important;
}



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

.nav-link{
    color: rgba(57, 58, 60, var(--bs-text-opacity)) !important;
}
.nav-link:hover{
    color: var(--color-02) !important;
}


.link-primary{
    color: var(--color-02) !important;
    text-decoration-color: color-mix(in srgb, var(--color-02) 75%, transparent) !important;
}
.link-primary:hover{
    color: color-mix(in srgb, var(--color-02) 75%, black) !important;
    text-decoration-color: color-mix(in srgb, var(--color-02) 90%, transparent) !important;
}




.btn-primary{
    background: var(--color-03);
    border: color-mix(in srgb, var(--color-03) 75%, transparent) !important;
}
.btn-primary:hover{
    background: color-mix(in srgb, var(--color-03) 75%, black) !important;
    border: thin solid #101739;
}



/* TABS ============================================
====================================================*/

.nav-pills .nav-link.active, .nav-pills .show>.nav-link{
    font-weight: 600;
    color: var(--color-01) !important;
    background-color: #8b4b4d !important;
}
.nav-pills .nav-link-te.active, .nav-pills .show>.nav-link{
    font-weight: 600;
    color: var(--color-01) !important;
    background-color: var(--color-02) !important;
}





@media (min-width: 768px){

    html{
        font-size: 16px;
    }

}