/* =========================================================
  Efecto "SCALE" reutilizable
   ========================================================= */
.fx-scale{
  transform:scale(1);
  transition:transform .28s cubic-bezier(.22,1,.36,1);
  will-change:transform;
  -webkit-backface-visibility:hidden; backface-visibility:hidden;
}
.fx-scale:hover,
.fx-scale:focus-visible{ transform:scale(1.04); }
.fx-scale:active{ transform:scale(.98); }
@media (prefers-reduced-motion:reduce){
  .fx-scale{ transition:none !important; }
  .fx-scale:hover,
  .fx-scale:focus-visible,
  .fx-scale:active{ transform:none !important; }
}
/* ================================ Hover Line effect ======================================== */
.line_hover,
.line_hover-2{
	position: relative;
	display: inline-block;
}
.line_hover:hover{
  color: var(--brand-light);
  transition: all 0.5s;
}
.line_hover-2:hover{
  color: var(--brand);
  transition: all 0.5s;
}
.line_hover::after{
	content: '';
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 0;
	height: 2px;
	transition: width 0.5s;
    background-color: var(--brand-light);
}
.line_hover-2::after{
	content: '';
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 0;
	height: 2px;
	transition: width 0.5s;
  background-color: var(--brand);
}
.line_hover:hover::after,
.line_hover-2:hover::after{
	width: 100%;
}