/*enlaces*/

a {
  display: inline-block;
  position: relative;
  text-decoration: none;
}
a::after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  border-radius: 5px;
  height: 0.05em;
  bottom: 0;
  left: 0;
  background: currentcolor;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}
a:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}


a.nounderline::after{
 transition: none;
 transform: none;  
 height: 0em; 
}

a.nounderline:hover::after {

  transform: none;

}


.btn{

display: inline-block;
font-weight: 600;
font-size: 1.2rem;
position: relative;
padding: 8px 40px;
background-color: var(--bg-boton);
color: var(--texto-boton);
text-decoration: none;
overflow: hidden;
z-index: 1;

}

.btn span{

    display: block;
    width: 0;
    height: 0;
    background-color: var(--bg-boton-span);
    position: absolute;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s ease 0s, height 0.6s ease 0s;
    z-index: -1;  

}

.btn:hover span{

    width: 520px;
    height: 520px;
    color:--var(--texto-boton-hover);

}


/*menu M*/
.navbar-toggler  {
    outline: none !important;
    border: 0 !important;

    &:focus{
    border: 0 !important;
    box-shadow: none !important;

  }
   
}

.barra{

    height: 4px;
    width: 25px;
    border-radius: 25px;
    margin: 5px;
    background-color: var(--text);
    transform: rotate(0deg);
    transition: all 700ms  ease;


}

.menu-container{
 
    cursor: pointer;
}

.activar .barra2{

    width: 0;


}
.activar .barra1{

    transform: translateY(9px) rotate(45deg);
}

.activar .barra3{

    transform: translateY(-9px) rotate(-45deg);
}



@media only screen and (max-width: 767px){
   .navbar-demo  button.menu-btn {
        position: absolute;
        top: 0;
        right: 0;
        background-color: unset;
        border: 0;
        font-size: 26px;
        display:block;
        padding: 23px;
        color: #fff;
        outline: none;
    } 
    .navbar-demo{
        height:100%;
        z-index: 999;
    }
    .navbar-demo .nav-bar {
        left: -950px;
        background-color: #000000d9;
        transition: 1s;
        height: 100%;
    }

    .navbar-demo.open-nav  .nav-bar{
        left: 0;
        width: 100%;
        transition: left 0.5s;
        height: 100%;
    }

    .navbar-demo .nav-bar ul li a {
         display: block;
         color: #fff;
    }
    .navbar-demo.open-nav button.menu-btn i:before {
        content: '\f00d ';
    }
}




/* Primary Button and variant
   -------------------------- */


.container-tarjeta{
  position: relative;
  display: inline-block;
  height: 250px;
  
}
 

/*--- btn-1 ---*/


.tarjeta {
 
  background-color: var(--bg2);  
  position: relative;
  text-decoration: none;
  background-size: 300%;
  transition: all 0.6s;
}


.tarjeta.variante {
 background-color: var(--bg3);
 }



.capa {
    height: 100%;
  
    background-image: linear-gradient(90deg, transparent 50%, white 50%);
}
.tarjeta:hover {
  color:#000;
  background-position: 100%;
 
}

.tarjeta:active {
  transform: translate(0.5rem, 0.5rem);
  box-shadow: 0px 10px 20px -15px rgba(0, 0, 0, 0.75);
}

.tarjeta .tarjeta-icon{
  position: absolute;
    font-size: 68px;
    color:#8B96A8;
    left: 30px;
    top: 50px;
    max-width: 60px;
}



.tarjeta .tarjeta.footer{

    padding-top: 15px;
}

/* rounded*/

.roundexbtn {

  border-radius:1.2em;
}

.border-icon{

  border:1px solid;
  border-color: var(--texto-boton);
}
.border-icon :hover{

  border:1px solid;
  border-color: var(--texto-boton-hover);
}