@use './fonts/utils' as u;

%openSans-font {
  font-family: "Open Sans";
  @include u.fontsProperties;
}

%VFSans-font {
  font-family: "VFSans";
  @include u.fontsProperties;
}

%animateHidden {
  opacity: 0;
  transform: scale(0.95) translateX(50px);
  visibility: hidden;
  transition: transform 1s cubic-bezier(0.165, 0.84, 0.44, 1),
    opacity 1s cubic-bezier(0.165, 0.84, 0.44, 1),
    visibility 1s cubic-bezier(0.165, 0.84, 0.44, 1),
    -webkit-transform 1s cubic-bezier(0.165, 0.84, 0.44, 1);
}

@mixin showAccion($time) {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition-delay: $time;
}

%animateShow {
  @include showAccion(400ms);
}

%animateShowOther {
  @include showAccion(600ms);
}

%img-absolute {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  object-fit: cover;
}

%link-pink{
  a{
    color: #991e66;
    &:hover{
      color: #d22b8d;
    }
  }
}
%link-blue{
  a{
    color:#23c4ff;
    &:hover{
      color:#caf1ff;
    }
  }
}

%custom-redactor-white{
   color: var(--a-blanco);
   h2,h3,h4,h5{
    color: var(--a-blanco);
   }
  h1 {
    font-size: 35px !important;
  }
  h2 {
    font-size: 30px !important;
  }
  
  h3 {
    font-size: 25px !important;
  }
  
  h4 {
    font-size: 20px !important;
  }
  
  @media (max-width: 991.98px) {
    h1 {
      font-size: 35px !important;
    }
    h2 {
      font-size: 30px !important;
    }
    h3 {
      font-size: 25px !important;
    }
    h4 {
      font-size: 20px !important;
    }
  }
  p{
    margin-bottom: 0.5rem;
  }
}

%custom-redactor{
 h1 {
   font-size: 35px !important;
 }
 h2 {
   font-size: 30px !important;
 }
 
 h3 {
   font-size: 25px !important;
 }
 
 h4 {
   font-size: 20px !important;
 }
 
 @media (max-width: 991.98px) {
   h1 {
     font-size: 35px !important;
   }
   h2 {
     font-size: 30px !important;
   }
   h3 {
     font-size: 25px !important;
   }
   h4 {
     font-size: 20px !important;
   }
 }
 p{
   margin-bottom: 0.5rem;
 }
 strong{
  font-weight: 900;
 }
}