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


:root {
    --color-01: #461339;  /*** COLOR PRINCIPAL ***/
    --color-02: #f5ce21;  /*** COLOR SECUNDARIO ***/
}

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

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

section , div{
    scroll-margin-top: 120px;
}


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


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





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

.text-normal{
    font-size: 1rem;
}
.text-small{
    font-size: 0.8rem;
}
.text-xsmall{
    font-size: 0.64rem;
}



.text-primary{
    color: var(--color-01) !important;
}


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




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

.bg-main{
    background-image: url(../images/background/bg-campofrio.jpg);
    background-size: cover;
    background-position: center center;
}

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


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




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

.btn-primary{
    color: var(--color-01) !important;
    background-color: var(--color-02) !important;
    border: thin solid color-mix(in srgb, var(--color-02), black 15%) !important;
    border-radius: 10px;
}
.btn-primary:hover{
    color: var(--color-01) !important;
    background-color: color-mix(in srgb, var(--color-02) 90%, black) !important;
    border: 1.5px solid color-mix(in srgb, var(--color-02) 80%, white);
}
.btn-primary:active{
    color: var(--color-01) !important;
    border: 1.5px solid color-mix(in srgb, var(--color-02) 75%, white) !important;
}



.btn-secondary{
    color: var(--color-02) !important;
    background-color: var(--color-01) !important;
    border: thin solid color-mix(in srgb, var(--color-01), white 25%) !important;
    border-radius: 10px;
}
.btn-secondary:hover{
    color: var(--color-02) !important;
    background-color: color-mix(in srgb, var(--color-01) 75%, black) !important;
    border: 1.5px solid color-mix(in srgb, var(--color-01) 80%, white);
}
.btn-secondary:active{
    color: var(--color-02) !important;
    border: 1.5px solid color-mix(in srgb, var(--color-01) 75%, white) !important;
}


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





@media (min-width: 768px){

	html{
        font-size: 16px;
    }


}