.mascara{
  visibility: hidden;
  width: 100vw;
  height: 100vh;
  position: fixed;

  inset: 0;
  background: linear-gradient(109deg, rgba(10, 12, 16, 0.99) 15%, rgba(10, 12, 16, 0.7) 50%, rgba(10, 12, 16, 0.493) 85%);
  z-index: 99;

  display: flex;
  align-items: center;
  justify-content: center;
}

.mascara.active {
    visibility: visible;
    
}
 

.resumo-whatsaap {
    width: 350px;
    height: 550px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    background: #553838;
    border: 1px solid #3d2424;
    border-radius: 20px;
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.45);


    transition: transform 0.3s ease;
    transform: translateX(0%);
}