<style>
/* Container do widget */
.elementor-widget-html:has(.nx-cta-core) {
overflow: hidden;
border-radius: 120px;
}

/* Tipografia geral */
.nx-cta-shell * {
transition: 0.6s;
font-size: 19px;
text-transform: uppercase;
font-weight: 600;
font-family: “Sora”, sans-serif;
text-align: center;
}

/* Estrutura externa */
.nx-cta-shell {
position: relative;
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
width: 100%;
height: 100%;
border-radius: 120px;
background: linear-gradient(95deg, #006BFF 0%, #33D6FF 50%, #006BFF 100%);
box-shadow:
0 12px 24px #006BFF66,
0 28px 56px #006BFF4D,
0 50px 100px #006BFF33,
0 70px 140px #006BFF1A;
cursor: pointer;
border: none;
overflow: hidden;
}

/* Núcleo interno */
.nx-cta-core {
position: relative;
display: flex;
align-items: center;
justify-content: flex-start;
padding: 12px 36px;
width: 100%;
height: 100%;
border-radius: 120px;
overflow: hidden;
}

/* Área de ícones */
.nx-cta-icons {
display: flex;
width: 40px;
height: 40px;
align-items: center;
justify-content: center;
position: absolute;
top: 50%;
left: 14px;
transform: translateY(-50%);
border-radius: 50%;
z-index: 3;
}

/* Ponto */
.nx-cta-point {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 7px;
height: 7px;
background: #FFFFFF;
border-radius: 50%;
z-index: 1;
}

/* Seta */
.nx-cta-arrow {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 26px;
height: 26px;
border-radius: 50%;
z-index: 2;
opacity: 0;
color: #050B1A;
}

/* Fundo expansivo */
.nx-cta-expand-bg {
position: absolute;
left: 0;
width: 0%;
height: 85%;
display: flex;
align-items: center;
justify-content: flex-start;
background: #FFFFFF;
border-radius: 120px;
box-shadow:
0 6px 50px #006BFF66,
0 0 12px #006BFF4D,
0 0 14px #006BFF33 inset;
}

/* Texto principal */
.nx-cta-text-main {
margin-left: 26px;
color: #050B1A;
}

/* Texto secundário */
.nx-cta-text-alt {
position: absolute;
color: #121A33;
opacity: 0;
transform: translateX(120%);
}

/* Hover */
.nx-cta-shell:hover .nx-cta-core {
justify-content: center;
padding-left: 24px;
padding-right: 58px;
}

.nx-cta-shell:hover .nx-cta-expand-bg {
width: calc(100% – 42px);
height: 100%;
}

.nx-cta-shell:hover .nx-cta-icons {
left: calc(100% – 38px);
}

.nx-cta-shell:hover .nx-cta-text-main,
.nx-cta-shell:hover .nx-cta-point {
opacity: 0;
}

.nx-cta-shell:hover .nx-cta-text-alt {
opacity: 1;
transform: translateX(0%);
}

.nx-cta-shell:hover .nx-cta-arrow {
opacity: 1;
}

/* Brilho animado */
.nx-cta-shell::before {
content: “”;
background: linear-gradient(12deg, #FFFFFF 15%, #8FB3FF00 70%);
width: 85px;
height: 140%;
position: absolute;
transform: translateX(-50%) skew(-28deg);
bottom: 0%;
pointer-events: none;
user-select: none;
animation: nx-sweep 3.2s infinite ease-in-out;
filter: blur(4px);
}

@keyframes nx-sweep {
0% { left: -12%; opacity: 0; }
22% { opacity: 1; }
50% { left: 112%; opacity: 1; }
53% { opacity: 0; }
100% { left: 112%; opacity: 0; }
}

/* RESPONSIVO (mantido igual) */
@media (max-width: 767px){
.nx-cta-shell *{ font-size:16px; }
.nx-cta-core{ padding:12px 24px; }
.nx-cta-icons{ width:34px; height:34px; }
.nx-cta-text-main{ margin-left:20px; }
}

@media (max-width: 480px){
.nx-cta-shell *{ font-size:15px; }
.nx-cta-core{ padding:10px 20px; }
.nx-cta-icons{ width:32px; height:32px; }
.nx-cta-arrow{ width:22px; height:22px; }
.nx-cta-text-main{ margin-left:18px; }
}
</style>

<a class=”nx-cta-shell” href=”https://seusite.com/checkout”>
<div class=”nx-cta-core”>

<div class=”nx-cta-icons”>
<div class=”nx-cta-point”></div>

<svg class=”nx-cta-arrow” xmlns=”http://www.w3.org/2000/svg” viewBox=”0 0 24 24″>
<path d=”M1.5 13.5h16.266l-6.16 7.281 2.289 1.938L22.965 12l-9.07-10.719-2.29 1.938 6.161 7.281H1.5z” fill=”currentColor”/>
</svg>
</div>

<div class=”nx-cta-text-main”>
Aproveite os Acessos Vitalícios
</div>

<div class=”nx-cta-expand-bg”></div>

<div class=”nx-cta-text-alt”>
A Quantidade É Limitada
</div>

</div>
</a>