@property --border-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

/* Animación Fase 1: Giro de 360 grados */
@keyframes traceBeamAnim {
  0% { --border-angle: 0deg; opacity: 1; }
  70% { --border-angle: 360deg; opacity: 1; }
  85%, 100% { --border-angle: 360deg; opacity: 0; }
}

/* Animación Fase 2: Bloqueo del borde alumbrado sólido */
@keyframes solidRingGlowAnim {
  0%, 65% { opacity: 0; transform: scale(0.98); }
  85%, 100% { opacity: 1; transform: scale(1); }
}

.verisure-pill-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  user-select: none;
  text-decoration: none;
  transition: transform 0.25s ease;
}



.verisure-outer-shell {
  position: relative;
  background: #ab192d;
  padding: 0.41rem;
  border-radius: 9999px;
  /*box-shadow:8px 8px 16px #66000e99,-8px -8px 16px #e9355966;*/
}

.verisure-inner-pill {
  position: relative;
  padding: 0.85rem 2.25rem;
  border-radius: 9999px;
  box-shadow:inset -1px -1px #eb2f54,inset -2px -2px 2px #3f000bcc,-1px -1px #eb2f54,-2px -2px 2px #66000ecc;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

/* FASE 1: Trazo Giratorio */
.verisure-border-beam {
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  padding: 2.5px;
  background: conic-gradient(
    from var(--border-angle),
    transparent 0%,
    transparent 55%,
    rgba(255, 255, 255, 0.25) 72%,
    #ffffff 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  pointer-events: none;
  z-index: 3;
}

/* FASE 2: Borde Neón Alumbrado Sólido */
.verisure-solid-ring {
  position: absolute;
  inset: -1px;
  border-radius: 9999px;
  border: 2px solid #ffffff;
  box-shadow: 
    0 0 18px #ff1a3d,
    0 0 8px #ffffff,
    inset 0 0 8px rgba(255, 255, 255, 0.6);
  opacity: 0;
  pointer-events: none;
  z-index: 4;
}

.verisure-pill-btn:hover .verisure-border-beam {
  animation: traceBeamAnim 0.9s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.verisure-pill-btn:hover .verisure-solid-ring {
  animation: solidRingGlowAnim 0.9s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.verisure-text {
  color: #ffffff;
  font-size: 1.125rem;
  font-weight: 700;

  letter-spacing: -0.01em;
}