.vip-page{
--vip-color:#E9BE55;
--vip-color-rgb:233,190,85;
--vip-detail:#9B7BE8;
--vip-detail-rgb:155,123,232;
width:100%;
min-height:100vh;
padding:45px 0 90px;
background:#0D2329;
color:#fff;
font-family:'Nunito',sans-serif;
}
.vip-ouro{
--vip-color:#E9BE55;
--vip-color-rgb:233,190,85;
--vip-detail:#9B7BE8;
--vip-detail-rgb:155,123,232;
}
.vip-diamante{
--vip-color:#58D8F5;
--vip-color-rgb:88,216,245;
--vip-detail:#9B7BE8;
--vip-detail-rgb:155,123,232;
}
.vip-netherite{
--vip-color:#B07AE8;
--vip-color-rgb:176,122,232;
--vip-detail:#D987B8;
--vip-detail-rgb:217,135,184;
}
.vip-shell{
width:100%;
max-width:1080px;
margin:0 auto;
padding:0 20px;
}
.vip-hero{
position:relative;
background:transparent;
}
.vip-back{
position:relative;
display:inline-flex;
align-items:center;
gap:7px;
margin-bottom:28px;
padding:9px 15px;
color:#fff;
background:var(--vip-detail);
border:0;
border-radius:11px 15px 10px 14px;
font-size:11px;
font-weight:900;
text-decoration:none;
transform:rotate(-.7deg);
transition:transform .18s ease,filter .18s ease,box-shadow .18s ease;
}
.vip-back::after{
content:"";
position:absolute;
inset:-3px 3px 2px -3px;
border:1px solid rgba(var(--vip-detail-rgb),.45);
border-radius:15px 11px 16px 10px;
pointer-events:none;
}
.vip-back:hover{
transform:rotate(.7deg) translateY(-3px);
filter:brightness(1.08);
box-shadow:0 6px 0 rgba(0,0,0,.12);
}
.vip-back:active{
transform:rotate(0) translateY(0);
box-shadow:none;
}
.vip-back svg{
width:14px;
height:14px;
}
.vip-hero-content{
position:relative;
display:grid;
grid-template-columns:minmax(0,1fr) 300px;
gap:40px;
align-items:center;
padding:48px 52px;
background:transparent;
border:2px solid rgba(var(--vip-color-rgb),.7);
border-radius:23px 17px 26px 18px;
}
.vip-hero-content::after{
content:"";
position:absolute;
inset:6px -6px -6px 6px;
border:1px solid rgba(var(--vip-color-rgb),.16);
border-radius:17px 25px 18px 23px;
pointer-events:none;
}
.vip-hero-text{
position:relative;
z-index:2;
}
.vip-kicker{
display:block;
margin-bottom:10px;
color:var(--vip-color);
font-size:10px;
font-weight:900;
letter-spacing:1.8px;
}
.vip-hero-text h1{
max-width:620px;
margin:0;
color:#fff;
font-family:'Fredoka','Nunito',sans-serif;
font-size:45px;
font-weight:700;
line-height:1.08;
letter-spacing:-.6px;
}
.vip-hero-text p{
max-width:570px;
margin:15px 0 0;
color:rgba(255,255,255,.58);
font-size:13px;
font-weight:600;
line-height:1.7;
}
.vip-hero-badge{
position:relative;
z-index:2;
display:flex;
width:300px;
height:250px;
align-items:center;
justify-content:center;
justify-self:end;
border:0;
border-radius:0;
background:transparent;
transform:none;
transition:transform .22s ease;
}
.vip-hero-badge::after{
display:none;
}
.vip-hero-badge:hover{
transform:translateY(-5px) rotate(1deg) scale(1.025);
}
.vip-hero-badge img{
display:block;
width:300px;
height:250px;
max-width:none;
object-fit:contain;
border:0;
border-radius:0;
background:transparent;
transform:rotate(-1deg);
filter:drop-shadow(0 12px 15px rgba(0,0,0,.16));
transition:transform .22s ease;
}
.vip-hero-badge:hover img{
transform:rotate(1deg) scale(1.03);
}
.vip-image-fallback{
color:var(--vip-color);
font-family:'Fredoka','Nunito',sans-serif;
font-size:20px;
font-weight:700;
letter-spacing:3px;
}
.vip-main{
padding:68px 0 0;
}
.vip-heading{
margin-bottom:27px;
text-align:center;
}
.vip-heading>span{
display:block;
margin-bottom:7px;
color:var(--vip-color);
font-size:9px;
font-weight:900;
letter-spacing:1.7px;
}
.vip-heading h2{
margin:0;
color:#fff;
font-family:'Fredoka','Nunito',sans-serif;
font-size:28px;
font-weight:700;
}
.vip-heading p{
max-width:540px;
margin:7px auto 0;
color:rgba(255,255,255,.45);
font-size:12px;
font-weight:600;
line-height:1.6;
}
.vip-tabs{
display:flex;
justify-content:center;
gap:10px;
margin:0 auto 55px;
}
.vip-tab{
position:relative;
min-width:135px;
padding:11px 24px;
color:rgba(255,255,255,.62);
background:transparent;
border:1.5px solid rgba(var(--vip-detail-rgb),.55);
border-radius:11px 15px 10px 14px;
font-family:'Nunito',sans-serif;
cursor:pointer;
transform:rotate(-.5deg);
transition:transform .18s ease,color .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease;
}
.vip-tab:nth-child(2){
border-color:rgba(var(--vip-color-rgb),.55);
border-radius:15px 10px 14px 11px;
transform:rotate(.5deg);
}
.vip-tab:hover{
color:#fff;
transform:rotate(.5deg) translateY(-3px);
box-shadow:0 5px 0 rgba(0,0,0,.1);
}
.vip-tab:nth-child(2):hover{
transform:rotate(-.5deg) translateY(-3px);
}
.vip-tab.active{
color:#102A30;
background:var(--vip-color);
border-color:var(--vip-color);
}
.vip-tab strong{
font-family:'Fredoka','Nunito',sans-serif;
font-size:14px;
font-weight:700;
}
.vip-panel{
display:none;
}
.vip-panel.active{
display:block;
animation:vipFade .25s ease;
}
@keyframes vipFade{
from{
opacity:0;
transform:translateY(5px);
}
to{
opacity:1;
transform:translateY(0);
}
}
.vip-highlights{
display:flex;
width:100%;
max-width:none;
align-items:stretch;
justify-content:center;
margin:0 0 60px;
border-top:1px solid rgba(255,255,255,.08);
border-bottom:1px solid rgba(255,255,255,.08);
}
.vip-highlight{
position:relative;
display:flex;
width:25%;
min-height:105px;
align-items:center;
justify-content:center;
flex-direction:column;
text-align:center;
}
.vip-highlight:not(:last-child)::after{
content:"";
position:absolute;
right:0;
width:1px;
height:38px;
background:rgba(255,255,255,.09);
}
.vip-highlight strong{
color:var(--vip-color);
font-family:'Fredoka','Nunito',sans-serif;
font-size:27px;
font-weight:700;
line-height:1;
}
.vip-highlight small{
margin-top:7px;
color:rgba(255,255,255,.46);
font-size:10px;
font-weight:800;
}
.vip-benefits-block{
width:100%;
max-width:none;
margin:0;
}
.vip-section-title{
display:flex;
align-items:center;
gap:9px;
margin-bottom:20px;
}
.vip-section-title>span{
color:var(--vip-color);
font-size:10px;
}
.vip-section-title h3{
margin:0;
color:#fff;
font-family:'Fredoka','Nunito',sans-serif;
font-size:22px;
font-weight:700;
}
.vip-benefits-list{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:0 40px;
margin:0;
padding:0;
list-style:none;
}
.vip-benefits-list li{
position:relative;
padding:11px 5px 11px 24px;
color:rgba(255,255,255,.65);
border-bottom:1px solid rgba(255,255,255,.055);
font-size:12px;
font-weight:700;
line-height:1.5;
transition:color .18s ease,transform .18s ease;
}
.vip-benefits-list li:hover{
color:rgba(255,255,255,.9);
transform:translateX(3px);
}
.vip-benefits-list li::before{
content:"✓";
position:absolute;
left:0;
top:11px;
color:#27D6B5;
font-size:11px;
font-weight:900;
}
.vip-benefits-list strong{
color:#fff;
font-weight:900;
}
.vip-kits{
width:100%;
max-width:none;
margin:75px 0 0;
padding-top:55px;
border-top:1px solid rgba(255,255,255,.07);
}
.vip-kit-tabs{
display:flex;
justify-content:center;
gap:9px;
margin-bottom:28px;
}
.vip-kit-tab{
position:relative;
min-width:95px;
padding:9px 17px;
color:rgba(255,255,255,.58);
background:transparent;
border:1.5px solid rgba(var(--vip-detail-rgb),.5);
border-radius:10px 14px 9px 13px;
font-family:'Nunito',sans-serif;
font-size:11px;
font-weight:900;
cursor:pointer;
transition:transform .18s ease,color .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease;
}
.vip-kit-tab:nth-child(2){
border-color:rgba(var(--vip-color-rgb),.5);
}
.vip-kit-tab:nth-child(3){
border-color:rgba(var(--vip-detail-rgb),.4);
}
.vip-kit-tab:hover{
color:#fff;
transform:translateY(-3px) rotate(.5deg);
box-shadow:0 5px 0 rgba(0,0,0,.1);
}
.vip-kit-tab.active{
color:#102A30;
background:var(--vip-color);
border-color:var(--vip-color);
}
.vip-kit-content{
display:none;
}
.vip-kit-content.active{
display:block;
animation:vipFade .25s ease;
}
.vip-kit-images{
display:flex;
align-items:center;
justify-content:center;
flex-wrap:wrap;
gap:18px;
}
.vip-kit-images img{
display:block;
width:auto;
max-width:min(100%,700px);
height:auto;
}
.vip-kit-placeholder{
padding:40px 20px;
color:rgba(255,255,255,.3);
background:transparent;
border:1px dashed rgba(var(--vip-color-rgb),.25);
border-radius:13px 17px 12px 15px;
font-size:11px;
font-weight:800;
text-align:center;
}
@media(max-width:750px){
.vip-hero-content{
grid-template-columns:minmax(0,1fr) 210px;
gap:25px;
padding:38px 35px;
}
.vip-hero-text h1{
font-size:38px;
}
.vip-hero-badge{
width:210px;
height:190px;
}
.vip-hero-badge img{
width:210px;
height:190px;
}
.vip-highlights{
display:grid;
grid-template-columns:repeat(2,1fr);
}
.vip-highlight{
width:100%;
}
.vip-highlight:nth-child(2)::after{
display:none;
}
.vip-highlight:nth-child(-n+2){
border-bottom:1px solid rgba(255,255,255,.08);
}
}
@media(max-width:600px){
.vip-page{
padding-top:28px;
padding-bottom:65px;
}
.vip-shell{
padding:0 15px;
}
.vip-back{
margin-bottom:22px;
}
.vip-hero-content{
display:block;
padding:30px 22px;
}
.vip-hero-text h1{
font-size:33px;
}
.vip-hero-text p{
font-size:12px;
}
.vip-hero-badge{
display:none;
}
.vip-main{
padding-top:55px;
}
.vip-heading{
text-align:left;
}
.vip-heading h2{
font-size:24px;
}
.vip-heading p{
margin-left:0;
}
.vip-tabs{
justify-content:flex-start;
margin-bottom:45px;
}
.vip-tab{
min-width:120px;
padding:10px 18px;
}
.vip-highlights{
margin-bottom:48px;
}
.vip-highlight{
min-height:90px;
}
.vip-highlight strong{
font-size:24px;
}
.vip-benefits-list{
grid-template-columns:1fr;
gap:0;
}
.vip-kits{
margin-top:55px;
padding-top:45px;
}
.vip-kit-tabs{
justify-content:flex-start;
overflow-x:auto;
padding-bottom:5px;
}
}
@media(max-width:400px){
.vip-hero-content{
padding:27px 19px;
}
.vip-hero-text h1{
font-size:30px;
}
.vip-tabs{
gap:7px;
}
.vip-tab{
min-width:0;
width:50%;
}
.vip-highlight strong{
font-size:22px;
}
}