.frogmi-shortcode-button{
  --frogmi-button-bg:#51BA5C;
  --frogmi-button-text:#FFFFFF;
  --frogmi-button-icon-bg:#FFFFFF;
  --frogmi-button-icon-color:#51BA5C;

  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:50px;
  padding:6px 8px 6px 16px;
  border-radius:999px;
  background:var(--frogmi-button-bg);
  color:var(--frogmi-button-text) !important;
  text-decoration:none !important;
  font-family:inherit;
  font-size:16px;
  font-weight:700;
  line-height:1.2;
  letter-spacing:.01em;
  box-shadow:0 0 0 rgba(0,0,0,0);
  transition:
    transform .48s cubic-bezier(.22,1,.36,1),
    box-shadow .48s cubic-bezier(.22,1,.36,1),
    filter .48s ease;
  will-change:transform;
}

.frogmi-shortcode-button:hover,
.frogmi-shortcode-button:focus-visible{
  color:var(--frogmi-button-text) !important;
  text-decoration:none !important;
  transform:translateY(-2px) scale(1.018);
  box-shadow:0 10px 22px rgba(0,0,0,.15);
  filter:brightness(1.025);
}

.frogmi-shortcode-button__text{
  display:block;
}

.frogmi-shortcode-button__icon{
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  flex:0 0 38px;
  border-radius:50%;
  background:var(--frogmi-button-icon-bg);
  color:var(--frogmi-button-icon-color);
  overflow:hidden;
  transition:
    transform .48s cubic-bezier(.22,1,.36,1),
    box-shadow .48s ease;
}

.frogmi-shortcode-button:hover .frogmi-shortcode-button__icon,
.frogmi-shortcode-button:focus-visible .frogmi-shortcode-button__icon{
  transform:scale(1.035);
  box-shadow:0 4px 10px rgba(0,0,0,.08);
}

.frogmi-shortcode-button__icon svg{
  width:24px;
  height:24px;
  fill:none;
  stroke:currentColor;
  stroke-width:3;
  stroke-linecap:round;
  stroke-linejoin:round;
  transform:translateX(0);
}

.frogmi-shortcode-button:hover .frogmi-shortcode-button__icon svg,
.frogmi-shortcode-button:focus-visible .frogmi-shortcode-button__icon svg{
  animation:frogmiArrowDrift 1.35s ease-in-out infinite;
}

@keyframes frogmiArrowDrift{
  0%,100%{
    transform:translateX(-1.5px);
  }
  50%{
    transform:translateX(3px);
  }
}

@media (prefers-reduced-motion: reduce){
  .frogmi-shortcode-button,
  .frogmi-shortcode-button__icon{
    transition:none;
  }

  .frogmi-shortcode-button:hover .frogmi-shortcode-button__icon svg,
  .frogmi-shortcode-button:focus-visible .frogmi-shortcode-button__icon svg{
    animation:none;
    transform:translateX(1px);
  }
}

@media (max-width:600px){
  .frogmi-shortcode-button{
    min-height:46px;
    padding:5px 7px 5px 14px;
    gap:8px;
    font-size:14px;
  }

  .frogmi-shortcode-button__icon{
    width:34px;
    height:34px;
    flex-basis:34px;
  }

  .frogmi-shortcode-button__icon svg{
    width:21px;
    height:21px;
  }
}


/* Ajuste opcional para compensar un header fijo.
   Agrega esta clase a la sección de destino del ancla si lo necesitas. */
.frogmi-anchor-target{
  scroll-margin-top:90px;
}