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

@font-face {
    font-family: 'Colby-StBld';
    src: url('../fonts/Colby-StBld.ttf') format('TrueType');
    font-style: normal;
}


:root {
    --color-01: #C31D12;  /*** COLOR PRINCIPAL ***/
    --color-02: #620C0C;  /*** COLOR SECUNDARIO ***/
    --color-03: #082C3C;  /*** COLOR TERCIARIO ***/
    --color-04: #85c8ff;  /******** LINKS FOOTER ********/
}

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


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

div, section{
    scroll-margin-top: 150px !important;
}

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

.border-16px{
    border-radius: 16px;
}
.border-8px{
    border-radius: 8px;
}




/* 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-titulos{
    font-family: "Colby-StBld", sans-serif;
}



/* 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-03) !important;
}


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




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


.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: #72D6E7 !important;
    text-decoration-color: color-mix(in srgb, #72D6E7 75%, transparent) !important;
}
.link-primary-dark:hover{
    color: color-mix(in srgb, #72D6E7 75%, black) !important;
    text-decoration-color: color-mix(in srgb, #72D6E7 75%, transparent) !important;
}




.btn-primary{
    background-color: var(--color-01);
    color: #fff !important;
    border: thin solid var(--color-01);
}
.btn-primary:hover{
    background-color: color-mix(var(--color-01), black 10%);
    border: thin solid var(--color-01);
}



.queso1, .queso2, .queso3, .queso4, .queso5 {
  animation-duration: 1.5s;
  animation-timing-function: ease-out;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  transform-origin: bottom center; 
}


.queso1 { animation-name: abrir-izq-lejos; }
.queso2 { animation-name: abrir-izq-cerca; }
.queso3 { /* sin rotacion */ }
.queso4 { animation-name: abrir-der-cerca; }
.queso5 { animation-name: abrir-der-lejos; }


@keyframes abrir-izq-lejos {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(-60deg); }
}

@keyframes abrir-izq-cerca {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(-30deg); }
}

@keyframes abrir-der-cerca {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(30deg); }
}

@keyframes abrir-der-lejos {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(60deg); }
}







@media (min-width: 768px){

    html{
        font-size: 16px;
    }
}




@media (min-width: 1200px){

    .imagen-derecha{
        max-height: 820px;
    }
    .imagen-izquierda.nologo{
        bottom: 0px !important;
    }

}