.vip-symbols { position:absolute; width:0; height:0; overflow:hidden; }
.vip-page .vip-shell { max-width:1500px; margin-inline:auto; padding:36px clamp(20px,4vw,64px) 70px; }
.vip-intro { padding:clamp(28px,4vw,58px); border:1px solid #5c4a24; border-radius:12px; background:linear-gradient(90deg,rgba(4,11,18,.98),rgba(4,11,18,.84) 58%,rgba(4,11,18,.4)),url('/assets/home-favela-hero.webp') center/cover; }
.vip-page .vip-eyebrow { margin:0 0 12px; color:#ffdb57; font-size:.7rem; letter-spacing:.15em; text-transform:uppercase; font-weight:800; }
.vip-page .vip-intro h1 { margin:0 0 12px; color:#fff; font-size:clamp(2.2rem,5vw,4rem); }
.vip-intro p { color:#afbdc9; line-height:1.7; max-width:700px; }
.vip-intro .vip-lead { color:#ffdb57; font-size:clamp(1.1rem,2vw,1.4rem); font-weight:700; margin:0 0 12px; }
.vip-support-list { display:flex; flex-wrap:wrap; gap:10px 24px; list-style:none; padding:0; margin:24px 0 0; color:#d9e3eb; font-size:.8rem; }
.vip-support-list li::before { content:'✓'; color:#ffdb57; margin-right:8px; }
.vip-plans,.vip-benefits { margin-top:42px; }
.vip-section-heading { display:flex; align-items:center; gap:14px; margin-bottom:22px; }
.vip-section-heading svg { width:32px; height:32px; fill:#8c641c; stroke:#ffdb57; stroke-width:2; flex-shrink:0; }
.vip-page .vip-section-heading h2 { margin:0; font-size:clamp(1rem,2vw,1.4rem); letter-spacing:.06em; text-transform:uppercase; }
.vip-section-heading > span { flex:1; height:1px; background:linear-gradient(90deg,#ddaf39,transparent); }
.vip-plan-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.vip-plan { position:relative; padding:28px 24px 22px; overflow:hidden; border:1px solid #7c622c; border-radius:10px; background:linear-gradient(100deg,rgba(9,14,19,.98),rgba(12,16,22,.86)),url('/assets/maps/favela-do-panda.webp') center/cover; box-shadow:inset 0 1px 0 #f4cf5030; }
.vip-plan-quarter { border-color:#55778b; background-image:linear-gradient(100deg,rgba(7,15,24,.98),rgba(9,20,32,.84)),url('/assets/maps/trinca-ferro.webp'); }
.vip-plan-semester { background-image:linear-gradient(100deg,rgba(20,16,9,.98),rgba(25,18,12,.8)),url('/assets/maps/vidigal.webp'); }
.vip-plan-content { display:grid; grid-template-columns:68px minmax(0,1fr); align-items:center; gap:18px; margin-bottom:22px; }
.vip-plan-emblem { width:68px; height:76px; fill:#8b5d16; stroke:#ffdc6c; stroke-width:1.8; filter:drop-shadow(0 0 12px #ffd34c30); }
.vip-plan-quarter .vip-plan-emblem { fill:#244872; stroke:#aed9ff; filter:drop-shadow(0 0 12px #70bfff30); }
.vip-page .vip-plan h3 { margin:0 0 6px; font-size:clamp(1.2rem,2vw,1.65rem); color:#fff; }
.vip-duration { margin:0; color:#d4dce4; font-size:.65rem; letter-spacing:.04em; text-transform:uppercase; }
.vip-price { display:flex; align-items:center; gap:10px; margin:8px 0 0; color:#ffdb57; }
.vip-price > span { font-size:1.6rem; font-weight:800; }
.vip-price strong { font-size:clamp(2.5rem,4vw,3.6rem); line-height:1; letter-spacing:-.04em; }
.vip-page .vip-buy { display:flex; align-items:center; justify-content:center; gap:12px; min-height:48px; padding:12px 16px; border:1px solid #e5be49; border-radius:6px; background:#070b0e; color:#ffe16b; font-size:.85rem; font-weight:800; text-transform:uppercase; text-decoration:none; transition:background .18s,box-shadow .18s; }
.vip-buy svg { width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.7; }
.vip-buy > span { margin-left:auto; font-size:1.3rem; }
.vip-page .vip-buy:hover { background:#24200e; box-shadow:0 0 20px #ffce3220; }
.vip-price-note { margin:16px auto 0; max-width:960px; text-align:center; color:#9cabb9; font-size:.76rem; line-height:1.7; }
.vip-section-copy { color:#aebdca; margin:-8px 0 20px; font-size:.9rem; }
.vip-benefit-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.vip-benefit { display:flex; align-items:flex-start; gap:16px; padding:24px 20px; border:1px solid #263642; background:#09131f; border-radius:8px; }
.vip-benefit-number { color:#b99b48; font-size:.75rem; font-weight:800; padding-top:4px; }
.vip-page .vip-benefit h3 { margin:0 0 10px; color:#ecf2f7; font-size:.94rem; }
.vip-benefit p { color:#a6b5c3; margin:0; font-size:.82rem; line-height:1.7; }
.vip-coming { display:block; width:fit-content; margin-top:8px; padding:3px 7px; border:1px solid #6d5928; border-radius:4px; color:#f2d271; font-size:.6rem; text-transform:uppercase; }
.vip-purchase { display:grid; grid-template-columns:minmax(0,1fr) minmax(230px,.5fr); gap:24px 48px; margin-top:36px; padding:32px; border:1px solid #6b5526; border-radius:10px; background:linear-gradient(120deg,#171b18,#07121e); scroll-margin-top:110px; }
.vip-page .vip-purchase h2 { font-size:1.6rem; margin:0 0 12px; }
.vip-purchase p:not(.vip-eyebrow) { color:#b9c7d4; font-size:.88rem; line-height:1.7; margin:0; }
.vip-purchase-actions { display:flex; flex-direction:column; justify-content:center; gap:12px; }
.vip-page .vip-form-link { background:#ffdb57; color:#19170a; }
.vip-page .vip-form-link:hover { background:#ffe58b; }
.vip-discord-link { display:flex; align-items:center; justify-content:center; gap:16px; padding:12px; border:1px solid #5865a2; color:#d7ddff; border-radius:6px; font-weight:700; font-size:.84rem; }
.vip-discord-link:hover { background:#5865f220; }
.vip-purchase .vip-activation-note { grid-column:1/-1; padding-top:20px; border-top:1px solid #514627; }
.vip-activation-note strong { color:#ffdb57; }
@media(max-width:1050px) { .vip-plan-content { grid-template-columns:48px minmax(0,1fr); gap:10px; } .vip-plan-emblem { width:48px; height:62px; } .vip-plan { padding:22px 16px; } .vip-benefit-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:760px) { .vip-plan-grid,.vip-benefit-grid,.vip-purchase { grid-template-columns:minmax(0,1fr); } .vip-plan-content { grid-template-columns:72px minmax(0,1fr); gap:22px; } .vip-plan-emblem { width:72px; height:76px; } .vip-plan { padding:26px 24px; } .vip-plan h3 { font-size:1.5rem; } .vip-price strong { font-size:3.4rem; } .vip-purchase { padding:24px; gap:24px; } .vip-section-heading { gap:10px; } .vip-section-heading > span { display:none; } .vip-support-list { flex-direction:column; } }