:root {
  --wa-bg-color: #25d366;
  --wa-bg-hover: #20ba5a;
  --wa-icon-color: #ffffff;
  --wa-shadow: rgba(37, 211, 102, 0.4);

  --wa-size: 3.5rem;
  --wa-icon-size: 2rem;
  --wa-bottom: 1.5rem;
  --wa-right: 1.5rem;
  --wa-z-index: 1000;

  --wa-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --wa-pulse-duration: 2s;
}

body.dark {
  --wa-bg-color: #128c7e;
  --wa-bg-hover: #0d7a6f;
  --wa-shadow: rgba(18, 140, 126, 0.5);
}

.a-Wa-S1 {
  position: fixed;
  bottom: var(--wa-bottom);
  right: var(--wa-right);
  z-index: var(--wa-z-index);

  width: var(--wa-size);
  height: var(--wa-size);

  background-color: var(--wa-bg-color);
  border-radius: 50%;

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

  box-shadow: 
    0 0.25rem 1rem var(--wa-shadow),
    0 0.5rem 2rem rgba(0, 0, 0, 0.15);

  transition: var(--wa-transition);

  cursor: pointer;
  text-decoration: none;

  animation: wa-pulse var(--wa-pulse-duration) infinite;
}

.a-Wa-S1:hover {
  background-color: var(--wa-bg-hover);
  transform: scale(1.1) translateY(-0.125rem);
  box-shadow: 
    0 0.5rem 1.5rem var(--wa-shadow),
    0 0.75rem 2.5rem rgba(0, 0, 0, 0.2);
}

.a-Wa-S1:active {
  transform: scale(0.95);
}

.Wa-S1 {
  font-size: var(--wa-icon-size);
  color: var(--wa-icon-color);
  transition: var(--wa-transition);
}

.a-Wa-S1:hover .Wa-S1 {
  transform: rotate(15deg);
}

@keyframes wa-pulse {
  0%, 100% {
    box-shadow: 
      0 0.25rem 1rem var(--wa-shadow),
      0 0.5rem 2rem rgba(0, 0, 0, 0.15);
  }
  50% {
    box-shadow: 
      0 0.25rem 1rem var(--wa-shadow),
      0 0.5rem 2rem rgba(0, 0, 0, 0.15),
      0 0 0 0.625rem rgba(37, 211, 102, 0.2),
      0 0 0 1.25rem rgba(37, 211, 102, 0.1);
  }
}

@media (max-width: 30rem) {
  :root {
    --wa-size: 3rem;
    --wa-icon-size: 1.75rem;
    --wa-bottom: 1rem;
    --wa-right: 1rem;
  }
}

@media (min-width: 48rem) {
  :root {
    --wa-size: 3.75rem;
    --wa-icon-size: 2.125rem;
    --wa-bottom: 2rem;
    --wa-right: 2rem;
  }

  .a-Wa-S1:hover::before {
    content: "¿Necesitas ayuda?";
    position: absolute;
    right: 4.5rem;
    background-color: var(--wa-bg-color);
    color: var(--wa-icon-color);
    padding: 0.625rem 1rem;
    border-radius: 0.5rem;
    white-space: nowrap;
    font-size: 0.875rem;
    font-weight: 500;
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
    animation: wa-tooltip-slide 0.3s ease-out;
  }
}

@media (min-width: 64rem) {
  :root {
    --wa-size: 4rem;
    --wa-icon-size: 2.25rem;
    --wa-bottom: 2.5rem;
    --wa-right: 2.5rem;
  }
}

@media (min-width: 90rem) {
  :root {
    --wa-bottom: 3rem;
    --wa-right: 3rem;
  }
}

@keyframes wa-tooltip-slide {
  from {
    opacity: 0;
    transform: translateX(0.625rem);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.a-Wa-S1:focus {
  outline: 0.1875rem solid var(--wa-bg-color);
  outline-offset: 0.25rem;
}

@media (prefers-reduced-motion: reduce) {
  .a-Wa-S1,
  .Wa-S1 {
    animation: none;
    transition: none;
  }
}

body.dark .a-Wa-S1 {
  box-shadow: 
    0 0.25rem 1rem var(--wa-shadow),
    0 0.5rem 2rem rgba(0, 0, 0, 0.4);
}

body.dark .a-Wa-S1:hover {
  box-shadow: 
    0 0.5rem 1.5rem var(--wa-shadow),
    0 0.75rem 2.5rem rgba(0, 0, 0, 0.5);
}

@media (min-width: 48rem) {
  body.dark .a-Wa-S1:hover::before {
    background-color: var(--wa-bg-color);
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.5);
  }
}