:root{
--vio-0: #FDF3FD; /* lilás bem claro */
--vio-1: #A87CFF; /* roxo/azulado */
--vio-2: #EBBFFF; /* lilás rosado */
--vio-dk: #6E5AD8; /* roxo profundo p/ sombras */
}
/* ===== Container geral ===== */
.glowbox {
isolation: isolate;
overflow: hidden;
border-radius: 999px;
position: relative;
width: 100%;
max-width: 400px;
margin: auto;
--animation-speed: 2s;
}
.glowbox-active .glowbox-animations,
.glowbox-active .glowbox-borders-masker { opacity: 1; }
.glowbox-animations,
.glowbox-borders {
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: 100%;
z-index: 1;
}
.glowbox-animations:before,
.glowbox-borders:before { content: ""; float: left; padding-top: 100%; }
.glowbox-animations:after,
.glowbox-borders:after { clear: both; content: ""; display: block; }
.glowbox-animations {
opacity: 0;
pointer-events: none;
transition: 1s ease opacity;
}
.glowbox-animations * {
height: 100%; left: 0; position: absolute; top: 0; width: 100%;
}
/* ===== Anel giratório/estrelas agora em roxo/azul ===== */
.glowbox-borders,
.glowbox-glow,
.glowbox-stars {
animation: borderTurn var(--animation-speed) infinite linear;
background-image: conic-gradient(
from 0 at 50% 50%,
var(--vio-1) 0deg,
rgba(100,132,139,0) 60deg,
rgba(100,132,139,0) 300deg,
var(--vio-2) 360deg
);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
.glowbox-stars-masker{
-webkit-mask: url("data:image/svg+xml,%3Csvg width='28' height='24' viewBox='0 0 28 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.0534 15.732C13.8444 15.283 14.2848 14.8489 14.7326 15.051C14.8296 15.0959 14.9043 15.1707 14.949 15.268C15.1506 15.717 14.7177 16.1511 14.2698 15.949C14.1728 15.9041 14.0982 15.8293 14.0534 15.732Z' fill='black'/%3E%3Cpath d='M18.8001 13.5093C19.0016 13.0603 18.5687 12.6263 18.1209 12.8283C18.0239 12.8732 17.9492 12.9481 17.9045 13.0453C17.6955 13.4944 18.1358 13.9284 18.5837 13.7264C18.6807 13.6815 18.7553 13.6066 18.8001 13.5093Z' fill='black'/%3E%3Cpath d='M0.949043 2.732C1.15057 2.28297 0.717663 1.84891 0.269836 2.05097C0.172806 2.09587 0.098162 2.17071 0.0533793 2.268C-0.155607 2.71703 0.284759 3.15109 0.732587 2.94903C0.829616 2.90413 0.90426 2.82929 0.949043 2.732Z' fill='black'/%3E%3Cpath d='M26.9489 7.732C27.151 7.28297 26.7169 6.84891 26.2679 7.05097C26.1706 7.09587 26.0958 7.17071 26.0508 7.268C25.8488 7.71703 26.2828 8.15109 26.7319 7.94903C26.8292 7.90413 26.904 7.82929 26.9489 7.732Z' fill='black'/%3E%3Cpath d='M13.0534 5.732C12.8444 5.28297 13.2848 4.84891 13.7326 5.05097C13.8296 5.09587 13.9043 5.17071 13.949 5.268C14.1506 5.71703 13.7177 6.15109 13.2698 5.94903C13.1728 5.90413 13.0982 5.82929 13.0534 5.732Z' fill='black'/%3E%3Cpath d='M10.0534 17.732C9.84439 17.283 10.2848 16.8489 10.7326 17.051C10.8296 17.0959 10.9043 17.1707 10.949 17.268C11.1506 17.717 10.7177 18.1511 10.2698 17.949C10.1728 17.9041 10.0982 17.8293 10.0534 17.732Z' fill='black'/%3E%3Cpath d='M15.0534 21.732C14.8444 21.283 15.2848 20.8489 15.7326 21.051C15.8296 21.0959 15.9043 21.1707 15.949 21.268C16.1506 21.717 15.7177 22.1511 15.2698 21.949C15.1728 21.9041 15.0982 21.8293 15.0534 21.732Z' fill='black'/%3E%3C/svg%3E");
mask: url("data:image/svg+xml,%3Csvg width='28' height='24' viewBox='0 0 28 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.0534 15.732C13.8444 15.283 14.2848 14.8489 14.7326 15.051C14.8296 15.0959 14.9043 15.1707 14.949 15.268C15.1506 15.717 14.7177 16.1511 14.2698 15.949C14.1728 15.9041 14.0982 15.8293 14.0534 15.732Z' fill='black'/%3E%3Cpath d='M18.8001 13.5093C19.0016 13.0603 18.5687 12.6263 18.1209 12.8283C18.0239 12.8732 17.9492 12.9481 17.9045 13.0453C17.6955 13.4944 18.1358 13.9284 18.5837 13.7264C18.6807 13.6815 18.7553 13.6066 18.8001 13.5093Z' fill='black'/%3E%3Cpath d='M0.949043 2.732C1.15057 2.28297 0.717663 1.84891 0.269836 2.05097C0.172806 2.09587 0.098162 2.17071 0.0533793 2.268C-0.155607 2.71703 0.284759 3.15109 0.732587 2.94903C0.829616 2.90413 0.90426 2.82929 0.949043 2.732Z' fill='black'/%3E%3Cpath d='M26.9489 7.732C27.151 7.28297 26.7169 6.84891 26.2679 7.05097C26.1706 7.09587 26.0958 7.17071 26.0508 7.268C25.8488 7.71703 26.2828 8.15109 26.7319 7.94903C26.8292 7.90413 26.904 7.82929 26.9489 7.732Z' fill='black'/%3E%3Cpath d='M13.0534 5.732C12.8444 5.28297 13.2848 4.84891 13.7326 5.05097C13.8296 5.09587 13.9043 5.17071 13.949 5.268C14.1506 5.71703 13.7177 6.15109 13.2698 5.94903C13.1728 5.90413 13.0982 5.82929 13.0534 5.732Z' fill='black'/%3E%3Cpath d='M10.0534 17.732C9.84439 17.283 10.2848 16.8489 10.7326 17.051C10.8296 17.0959 10.9043 17.1707 10.949 17.268C11.1506 17.717 10.7177 18.1511 10.2698 17.949C10.1728 17.9041 10.0982 17.8293 10.0534 17.732Z' fill='black'/%3E%3Cpath d='M15.0534 21.732C14.8444 21.283 15.2848 20.8489 15.7326 21.051C15.8296 21.0959 15.9043 21.1707 15.949 21.268C16.1506 21.717 15.7177 22.1511 15.2698 21.949C15.1728 21.9041 15.0982 21.8293 15.0534 21.732Z' fill='black'/%3E%3C/svg%3E");
mask-repeat: repeat; -webkit-mask-repeat: repeat;
mask-size: auto; -webkit-mask-size: auto;
}
.glowbox-glow { filter: blur(8px); opacity: 0.12; }
.glowbox-borders { animation-name: borderTurnWithTranslate; }
.glowbox-borders-masker {
border-radius: 999px;
content: "";
height: 100%;
inset: 0; left: 0; top: 0;
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask-composite: xor; -webkit-mask-composite: xor; mask-composite: exclude;
opacity: 0;
padding: 1px;
pointer-events: none;
position: absolute;
transition: 1s ease opacity;
width: 100%;
z-index: 1;
}
@keyframes borderTurn { 0%{transform:rotate(0)} 100%{transform:rotate(360deg)} }
@keyframes borderTurnWithTranslate {
0%{ transform: translate(-50%, -50%) rotate(0) }
100%{ transform: translate(-50%, -50%) rotate(360deg) }
}
/* ===== Caixa do botão ===== */
.btn-cta-box{
display:flex; align-items:center; justify-content:center;
gap:20px; padding:10px 20px 10px 10px;
background: linear-gradient(225deg,
rgba(253,243,253,0.24) 5%,
rgba(255,255,255,0.08) 43%,
rgba(255,255,255,0.03) 68%);
border: 1px solid rgba(168,124,255,0.26);
border-radius:100px;
box-shadow: 23.9px 19.78px 82.49px 0px rgba(0,0,0,0.58);
flex-wrap: nowrap;
}
/* ===== Botão (texto) em preto ===== */
.btn-cta{
position:relative; z-index:2; text-align:center;
padding:14px 16px;
background: linear-gradient(
271.55deg,
rgba(168,124,255,0.44) 5.88%,
rgba(168,124,255,0.00) 50.22%,
rgba(235,191,255,0.44) 95.32%
);
border:1px solid rgba(168,124,255,0.55);
border-radius:100px;
letter-spacing:0.8px;
font-family:"Aspekta", sans-serif;
font-weight:600; font-size:15px;
color:#000; /* <<< TEXTO PRETO */
box-shadow:
-4.15px 10.39px 70.01px 0px rgba(110,90,216,0.75),
-2.08px 4.15px 38.22px 0px rgba(96,76,200,0.55),
-5.2px -4px 12.3px -10.4px rgba(253,243,253,0.45) inset;
overflow:hidden;
}
.btn-cta::before{
content:"";
position:absolute; inset:0;
background: linear-gradient(90deg,
var(--vio-0) 0%,
var(--vio-1) 33%,
var(--vio-0) 63%,
var(--vio-2) 92%);
border-radius:100px;
transform: scale(1.1);
opacity:0.8;
transition: transform .3s ease, opacity .3s ease;
z-index:-1;
}
.btn-cta:hover::before{ transform:scale(1); opacity:1; }
/* ===== Ícone ===== */
.arrow-icon{
display:inline-block; width:18px; height:auto;
rotate:-90deg; opacity:1; transition:.5s ease all;
}
.btn-cta-box:hover .arrow-icon{ rotate:-140deg; transition:.5s ease all; }
/* ===== Responsivo ===== */
@media (max-width:480px){
.btn-cta-box{ gap:10px; padding:8px 12px 8px 8px; }
.btn-cta{ font-size:14px; padding:12px 14px; color:#000; }
.arrow-icon{ width:16px; rotate:-90deg; }
}
@media (max-width:320px){
.btn-cta-box{ gap:8px; padding:6px 8px 6px 6px; }
.btn-cta{ font-size:12px; padding:10px 12px; color:#000; }
.arrow-icon{ width:14px; }
}