@font-face {
    font-family:Font-Regular-secondary;
    src: url('../fonts/Roboto-Regular.woff');

}

@font-face {
    font-family:Font-Regular;
    src: url('../fonts/Poppins-Regular.woff');

}
@font-face {
    font-family:Font-Medium;
    src: url('../css/fonts/Poppins-Medium.woff');

}

@font-face {
    font-family:Font-Semibold;
    src: url('../css/fonts/Poppins-SemiBold.woff');

}

@font-face {
    font-family:Font-Bold;
    src: url('../fonts/Poppins-Bold.woff');

}
@font-face {
    font-family:Extra-Bold;
    src: url('../fonts/Poppins-ExtraBold.woff');

}





body {
  opacity: 0;
  animation: fadeIn 2s forwards;
  background: #fff ;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}




:root
{

    --background-navbar:#ffffff;
    --background-navbar-movil:#ffffff;
    --background-menu-movil:#ffffff;   
    --white: #FFFFFF;
    --black: #020202;
    --danger: #FE0202;

    --colorPrincipal:#E30613; /*--- */
    --secondary:#35a8e0; /**/

    --botones-1:#242424;/**  */

    
    --border:#d9d9d9;
    --cintillo-1:#ececec;

    --blue: #2748F7;
    --orange: #FE6637;    
    --nimbus:#EFEFEF;   
    --success: #62B519;
    
    --warning: #FFD800;
}





html {
    font-size: 16px;
}




nav li{
    list-style: none;
}

a {
    font-family:Font-Regular;
    text-decoration: none !important;    
    cursor: pointer;
    color: inherit;
}
p{
    margin-bottom: 8px !important;
}
.h1{
    font-size: 68px !important;
    line-height: 74px;
    font-family: Font-Bold;
  
}

h2, .h2{
    font-size: 50px !important;
    line-height: 58px;
    font-family: Font-Semibold;
    color: #181F2C;
}

h3{
    font-size: 38px !important;
    line-height: 46px;
    font-family: Font-Regular;
    color: #181F2C;
}
.h3{
    font-size: 38px !important;
    line-height: 46px;
    font-family: Font-Regular;
    color: #181F2C;
}
h4{
    font-size: 32px !important;
    line-height: 38px;
    font-family: Font-Regular;
    color: #181F2C;
}
h6, .h6{
    font-size: 28px !important;
    line-height: 34px;
    font-family: Font-Bold;
    color: #181F2C;
}
.p28 {
    font-size: 28px !important;
    line-height: 36px !important;

}
.p21, .p21B, .p21-9 {
    font-size: 21px !important;
    line-height: 29px !important;
}


.p12 {
    font-size: 12px !important;
    line-height: 16px !important;   

}
.p9 {
    font-size: 10px !important;
    line-height: 12px;
}
.F64{
    font-size: 68px !important;
    line-height: 72px;
    font-family: Font-Bold;
}

.F50{
    font-size: 50px !important;
    line-height: 58px;
    font-family: Font-Bold;
}
.a,
p,
ul {
    font-size: 16px !important;
    line-height: 20px;
    font-family: Font-Regular;
    color: #181F2C;

}
ul{
    padding-inline-start: 25px!important;
}
.fw-bold, b{
    font-family: Font-Bold !important;
}

.error{
    color: #8BA1BF;
    font-size: 9px !important;
}

/*******************/


.pad24 {
    padding-top: 24px;
    padding-bottom: 24px;

}

.paddB24 {
    padding-bottom: 24px;
    margin-top:10px;
}

.paddT24 {
    padding-top: 24px;
}

.paddT34 {
    padding-top: 34px;
}
.paddB34 {
    padding-bottom: 34px;
}
.paddT36{
    padding-top: 36px;
   
}
.padd40 {
    padding-top: 40px;
    padding-bottom: 40px;
}
.paddB40 {
    padding-bottom: 40px;
}

.paddT40{
    padding-top: 40px;
}
.padd68 {
    padding-top: 120px;
    padding-bottom: 120px;
}

.paddT68 {
    padding-top: 120px;
}

.paddB68 {
    padding-bottom: 120px;
}

.padd80 {
    padding-top: 80px;
    padding-bottom: 80px;
}

.padT80 {
    padding-top: 80px;
}

.padB80 {
    padding-bottom: 80px;

}
.padB8 {
    padding-bottom: 16px;

}
.text-justify{
    text-align: justify;
}

@media (max-width: 767px) {


    h2, .h1 {
        font-size: 38px !important;
        line-height: 40px !important;

    }

    
    .h2, .h3 {
        font-size: 28px !important;
        line-height: 32px !important;

    }

    h3,h4, .F50 {
        font-size: 21px !important;
        line-height: 29px !important;

    }
   
   

    .F64 {
        font-size: 28px !important;
        line-height: 34px !important;

    }

    h6
     {
        font-size: 16px !important;
        line-height: 20px !important;
    }

    .p28 {
        font-size: 12px !important;
        line-height: 20px !important;
    
    }

    .p21 {
        font-size: 12px !important;
        line-height: 16px !important;
    }

    .p21-9 {
        font-size: 9px !important;
        line-height: 12px !important;
    }

    .p21B, .h6  {
        font-size: 16px !important;
        line-height: 20px !important;
    }

    .p24, .ptitle {
        font-size: 14px !important;
        line-height: 16px !important;
    }
    .p9c {
        font-size: 9px !important;
        line-height: 12px;
    }

    p,
    .a,    
    ul,.p25 {
        font-size: 12px !important;
        line-height: 18px !important;       
    }
    ul{
        padding-inline-start: 20px!important;
    }
.p9 {
    font-size: 8px !important;
    line-height: 12px;
}
    .p5 {
        font-size: 4px !important;
        line-height: 5px !important;
    }

    .section_card {
        max-width: 90% !important;
    }
    .paddM16 {
        padding-top: 16px;
    }
    .paddMB16 {
        padding-bottom: 16px;
    }

    .paddBMovil40 {
        padding-bottom: 40px;
    }

    .padgral {
        padding-top: 40px;
        padding-bottom: 40px;
    }
 .paddT34 {
        padding-top: 16px;
    }
    .paddB34 {
        padding-bottom: 16px;
    }
    .padgral40 {
        padding-top: 24px;
        padding-bottom: 24px;
    }
    .paddB40 {
        padding-bottom: 24px;
    }
    .paddT40{
        padding-top: 24px;
    }
    
    .padd68 {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .paddT68 {
        padding-top: 40px;
    }

    .paddB68 {
        padding-bottom: 40px;
    }

    .padT80 {
        padding-top: 40px;

    }

    .padB80 {
        padding-bottom: 40px;

    }

    .padBM56 {
        padding-bottom: 56px;

    }

    .padd80 {
        padding-top: 40px;
        padding-bottom: 40px;
    }
    .pad40-24{
        padding-top: 24px;
    }
}


/*****botones*******/

.btn_1{
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--botones-1);
    color: var(--white);
    padding: 10px 16px;
    border: 2px solid var(--botones-1);
    border-radius: 45px;
    -webkit-border-radius: 45px;
    -moz-border-radius: 45px;
    -ms-border-radius: 45px;
    -o-border-radius: 45px;
    font-family:Font-Regular;
    transition: .3s ease;
    /* max-height: 40px; */
}
.btn_2{
    display: flex;
    justify-content: center;
    align-items: center;
    background: #ececec;
    color: var(--white);
    padding: 8px 30px;
    border: 2px solid #ececec;
    border-radius: 45px;
    -webkit-border-radius: 45px;
    -moz-border-radius: 45px;
    -ms-border-radius: 45px;
    -o-border-radius: 45px;
    font-family:Font-Regular;
    transition: .3s ease;
    /* max-height: 40px; */
}

.btn_3{  
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--colorPrincipal);
    color: var(--white);
    padding: 10px 16px;
    border: 2px solid var(--colorPrincipal);
    border-radius: 45px;
    -webkit-border-radius: 45px;
    -moz-border-radius: 45px;
    -ms-border-radius: 45px;
    -o-border-radius: 45px;
    font-family:Font-Regular;
    transition: .3s ease;
   
}
.btn_1:hover, .btn_2:hover, .btn_3:hover{
    background: var(--white);
    color: var(--black);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    border: 2px solid var(--black);
    transition: .3s ease;
    -webkit-transition: .3s ease;
    -moz-transition: .3s ease;
    -ms-transition: .3s ease;
    -o-transition: .3s ease;

}

.btn_1 .arrow-container {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url('../images/icons/arrow-right-white.svg');
    margin-left: 5px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom;
    animation:  0.3s ease forwards;
    
  }
  
  .btn_1:hover .arrow-container {
    background-image: url('../images/icons/arrow-right-black.svg') !important; /* Cambia la imagen al hacer hover */
    animation: slideIn 0.3s ease forwards; 
  }

  .arrow-container-card {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url('../images/icons/Arrow-rigth-white.svg');
    margin-left: 5px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom;
    animation:  0.3s ease forwards;
    
    
  }
  
  .arrow-container-card:hover {
    background-image: url('../images/icons/arrow-right-black.svg') !important; /* Cambia la imagen al hacer hover */
    animation: slideIn 0.3s ease forwards; 
  }
  @keyframes slideIn {
    from {
      transform: translateX(100%);
      -webkit-transform: translateX(100%);
      -moz-transform: translateX(100%);
      -ms-transform: translateX(100%);
      -o-transform: translateX(100%);
  }
    to {
      transform: translateX(0);
    }
  }
  

@media (max-width: 600px) {
    .btn_1{
        font-size: 12px;
    }
}
/******fin botones****/
.cintillo{
    background: var(--cintillo-1);

}