@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');


:root {
    --color-01: #084f97;  /*** COLOR PRINCIPAL ***/
    --color-02: #E3F5FD;  /*** COLOR SECUNDARIO ***/
    --color-03: #7CC4EC;  /*** COLOR TERCIARIO ***/
    --color-04: #575757;  /******** LINKS FOOTER ********/
}

*{
  font-family: "Source Sans 3", sans-serif;
  font-optical-sizing: auto;
}


html{
    font-size: 14px;
    scroll-behavior: smooth;
}

div, section{
    scroll-margin-top: 150px !important;
}

/* VARIOS ==========================================
====================================================*/

.text-copyright{
    color:#575757;
}

.bg-footer{
    background-color:#f5f5f5;
}

.border-16px{
    border-radius: 16px;
}

.border-light{
    border-color: #DCE8EC !important;
}


.carousel-control-prev-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23004481'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
}
.carousel-control-next-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23004481'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}


.ratio-carrousel{
    aspect-ratio: 16 / 9;
}


.overlay{
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, .8), rgba(0, 0, 0, 0) 60%);
    position: absolute;
    z-index: 2;
}




/* FUENTES ==========================================
====================================================*/

.text-small{
    font-size: 0.9rem;
}
.text-xsmall{
    font-size: 0.64rem;
}


.text-primary{
    color: var(--color-01) !important;
}
.text-secondary{
    color: var(--color-02) !important;
}
.text-tertiary{
    color: var(--color-03) !important;
}

.text-footer{
    color: var(--color-04) !important;
}


.text-black{
    color: #10212B !important;
}
.text-dark{
    color: #0d0d0d !important;
}
.text-body{
    color: #0d0d0d !important;
}


.text-light{
    color: #AFC1C7 !important;
}


.text-primary-dark{
    color: #72D6E7 !important;
}



/* BACKGROUNDS =====================================
====================================================*/

.bg-light{
    background: #F7F8F8 !important;
}

.bg-primary{
    background: var(--color-01) !important;
}
.bg-secondary{
    background: var(--color-02) !important;
}
.bg-tertiary{
    background: var(--color-01) !important;
}

.bg-dark-light{
    background: #7CC4EC;
}


.bg-header{
    background: rgba(255, 255, 255, .95);
}

.bg-hero{
    background-image: url(../images/backgrounds/bg-hero-xs.gif);
    background-size: cover;
    background-position: center center;
    height: 750px;
}




/* BOTONES / LINK ==================================
====================================================*/

.nav-link{
    color: #006eb3 !important;
}
.nav-link:hover{
    color: #006eb3 !important;
    text-decoration: underline !important;
}


.link-primary{
    color: var(--color-01) !important;
    text-decoration-color: color-mix(in srgb, var(--color-01) 75%, transparent) !important;
}
.link-primary:hover{
    color: color-mix(in srgb, var(--color-01) 75%, black) !important;
    text-decoration-color: color-mix(in srgb, var(--color-01) 90%, transparent) !important;
}

.link-primary-dark{
    color: var(--color-01) !important;
    text-decoration-color: color-mix(in srgb, var(--color-01) 75%, transparent) !important;
}
.link-primary-dark:hover{
    color: color-mix(in srgb, var(--color-01) 75%, black) !important;
    text-decoration-color: color-mix(in srgb, var(--color-01) 90%, transparent) !important;
}




.btn-primary{
    font-weight:700;
    background-color: #FFFF84;
    color: #084f97 !important;
    border: thin solid #FFFF84;
}
.btn-primary:hover{
    background-color: color-mix(#FFFF84, black 10%);
    border: thin solid #FFFF84;
}

.btn-codigo{
    font-weight:700;
    background-color: #7BFABE;
    color: #084f97 !important;
    border: thin solid #7BFABE;
}

.btn-codigo:hover{
    background-color: color-mix(#7BFABE, black 10%);
    border: thin solid #7BFABE;
}


/* ACCORDION ========================================
====================================================*/


.accordion-button:not(.collapsed) {
    color: var(--color-01) !important;
    font-weight: 600;
    background-color: transparent !important;
    box-shadow: none !important;
}

.accordion-button:focus{
    box-shadow: none;
}

.accordion-button::after{
    background-image: url(../images/iconos/plus.svg) !important;
    background-size: 1rem !important;
}
.accordion-button:not(.collapsed)::after {
    background-image: url(../images/iconos/menos.svg) !important;
}






@media (min-width: 768px){

    html{
        font-size: 16px;
    }


    .bg-hero{
        background-image: url(../images/backgrounds/bg-hero-md.gif);
        background-position: center center;
        height: 400px;
    }
}




@media (min-width: 1200px){

    .bg-hero{
        background-image: url(../images/backgrounds/bg-hero-xl.gif);
        height:520px;
    }

}

