:root {
    --bg: #14130A;
    --bg2: #2E2B0A;
    --card: #2E2B0A;
    --accent: #B4FF00;
    --glow: #8A8A0A;
    --mid: #5C5A0E;
    --deep: #2E2B0A;
    --t2: #C8D87A;
    --bd: rgba(180, 255, 0, .18);
    --line: #4A5A12
}

* {
    box-sizing: border-box;
    margin: 0
}

body {
    background: radial-gradient(900px 500px at 80% -10%, rgba(138, 138, 10, .28), transparent), var(--bg);
    color: #FFFFFF;
    min-height: 100vh
}

a {
    color: inherit;
    text-decoration: none
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    position: sticky;
    top: 0;
    background: rgba(20, 19, 10, .85);
    backdrop-filter: blur(10px);
    z-index: 5;
    border-bottom: 1px solid var(--bd)
}

nav .links {
    display: flex;
    gap: 20px;
    align-items: center;
    color: var(--t2);
    font-size: 14px
}

@media(max-width:720px) {
    nav .links a:not(.btn) {
        display: none
    }
}

.logo {
    font-weight: 800;
    letter-spacing: .04em;
    color: var(--accent)
}

.wrap {
    max-width: 960px;
    margin: auto;
    padding: 0 20px
}

.hero {
    padding: 72px 0 56px
}

.hero h1 {
    font-size: clamp(2.4rem, 9vw, 5.2rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.03em;
    color: #FFFFFF
}

.hero p {
    color: var(--t2);
    max-width: 520px;
    margin: 18px 0 28px;
    line-height: 1.6
}

.sub {
    color: var(--accent);
    font-size: 1.2rem;
    margin-top: 14px;
    text-shadow: 0 0 18px rgba(180, 255, 0, .5)
}

.btn {
    display: inline-block;
    border: 0;
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    padding: 13px 22px;
    border-radius: 999px;
    color: #14130A;
    background: linear-gradient(135deg, var(--accent), var(--glow));
    box-shadow: 0 0 24px rgba(180, 255, 0, .4);
    transition: transform .15s, box-shadow .15s
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 38px rgba(180, 255, 0, .65)
}

.btn:disabled {
    opacity: .5;
    cursor: wait
}

.btn.ghost {
    background: transparent;
    box-shadow: none;
    border: 1px solid var(--bd);
    color: #FFFFFF
}

.row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px
}

.card {
    background: rgba(46, 43, 10, .88);
    border: 1px solid var(--bd);
    border-radius: 20px;
    padding: 20px;
    backdrop-filter: blur(8px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, .4)
}

.card small {
    color: var(--t2)
}

.card b {
    display: block;
    margin-top: 6px;
    font-size: 1.1rem;
    color: #FFFFFF
}

h2 {
    margin: 56px 0 18px;
    font-size: 1.6rem;
    color: var(--accent)
}

ol.how {
    padding-left: 20px;
    color: var(--t2);
    line-height: 2
}

.sel {
    cursor: pointer;
    border: 2px solid var(--bd);
    margin-top: 10px
}

.sel.on {
    border-color: var(--accent);
    box-shadow: 0 0 22px rgba(180, 255, 0, .3)
}

input[type=text],
input[type=tel],
input[type=number] {
    width: 100%;
    padding: 13px;
    margin: 6px 0 4px;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: var(--bg2);
    color: #FFFFFF;
    font: inherit
}

label {
    display: block;
    margin-top: 14px;
    color: var(--t2);
    font-size: 14px
}

.err {
    color: #FCA5A5;
    font-size: 13px;
    margin-top: 4px
}

.modal {
    position: fixed;
    inset: 0;
    background: rgba(20, 19, 10, .92);
    overflow: auto;
    padding: 20px;
    z-index: 10
}

.modal .card {
    max-width: 520px;
    margin: 20px auto;
    position: relative;
}

.modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--bd);
    background: rgba(20, 19, 10, .75);
    color: var(--t2);
    font-size: 24px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .2s ease;
    z-index: 10;
}

.modal-close:hover {
    color: var(--accent);
    border-color: var(--accent);
    background: rgba(180, 255, 0, .15);
    transform: rotate(90deg);
}

.contact-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    margin: 4px;
    border-radius: 999px;
    border: 1px solid var(--bd);
    background: rgba(46, 43, 10, .75);
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 600;
    transition: all .2s ease;
}

.contact-pill:hover {
    border-color: var(--accent);
    color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 0 16px rgba(180, 255, 0, .3);
}

.contact-pill.wa {
    border-color: rgba(37, 211, 102, .3);
}

.contact-pill.wa:hover {
    border-color: #25D366;
    color: #25D366;
    box-shadow: 0 0 16px rgba(37, 211, 102, .35);
}

.contact-pill.ig {
    border-color: rgba(225, 48, 108, .35);
}

.contact-pill.ig:hover {
    border-color: #E1306C;
    color: #FFFFFF;
    box-shadow: 0 0 16px rgba(225, 48, 108, .4);
}

.contact-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
    display: inline-block;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.4));
}



.steps {
    display: flex;
    gap: 6px;
    margin-bottom: 14px
}

.steps i {
    flex: 1;
    height: 4px;
    border-radius: 4px;
    background: var(--line)
}

.steps i.on {
    background: var(--accent)
}

.sum div {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--bd);
    color: var(--t2)
}

.check {
    width: 84px;
    height: 84px;
    margin: 0 auto 16px;
    display: block
}

.check circle {
    stroke: var(--accent);
    stroke-width: 4;
    fill: none;
    stroke-dasharray: 260;
    stroke-dashoffset: 260;
    animation: d .7s forwards
}

.check path {
    stroke: var(--glow);
    stroke-width: 5;
    fill: none;
    stroke-dasharray: 60;
    stroke-dashoffset: 60;
    animation: d .5s .6s forwards
}

@keyframes d {
    to {
        stroke-dashoffset: 0
    }
}

footer {
    margin-top: 72px;
    padding: 28px 20px;
    border-top: 1px solid var(--bd);
    color: var(--t2);
    text-align: center;
    font-size: 14px
}

footer #contact, footer #social {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}


@media(prefers-reduced-motion:reduce) {
    * {
        animation: none !important;
        transition: none !important
    }

    .check circle,
    .check path {
        stroke-dashoffset: 0
    }
}

.hide {
    display: none
}

html {
    scroll-behavior: smooth
}

body {
    font-family: Sora, system-ui, sans-serif
}

/* ── Swiper ── */
.swiper-wrap { position: relative; user-select: none }
.swiper { overflow: hidden; border-radius: 20px; border: 1px solid var(--bd); box-shadow: 0 0 40px rgba(180,255,0,.08) }
.swiper-track { display: flex; transition: transform .45s cubic-bezier(.4,0,.2,1); will-change: transform }
.slide { min-width: 100%; position: relative }
.slide img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block }
.slide-label { position: absolute; bottom: 0; left: 0; right: 0; padding: 18px 24px; background: linear-gradient(transparent, rgba(20,19,10,.85)); color: #fff; font-size: 1.1rem; font-weight: 700; letter-spacing: .02em; text-shadow: 0 2px 8px rgba(0,0,0,.5) }
.sw-btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(20,19,10,.7); border: 1px solid var(--bd); color: var(--accent); width: 44px; height: 44px; border-radius: 50%; cursor: pointer; font-size: 1.8rem; line-height: 1; display: flex; align-items: center; justify-content: center; transition: background .15s, box-shadow .15s; z-index: 2 }
.sw-btn:hover { background: rgba(180,255,0,.15); box-shadow: 0 0 16px rgba(180,255,0,.35) }
.sw-prev { left: 12px }
.sw-next { right: 12px }
.sw-dots { display: flex; justify-content: center; gap: 8px; margin-top: 12px }
.sw-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line); cursor: pointer; transition: background .2s, transform .2s }
.sw-dot.on { background: var(--accent); transform: scale(1.3) }

/* ── Payment cards ── */
.pay-card { display: flex; align-items: center; gap: 16px }
.pay-card > div { display: flex; flex-direction: column; gap: 4px }
.pay-img { width: 88px; height: 60px; object-fit: cover; border-radius: 10px; flex-shrink: 0; border: 1px solid var(--line) }

/* ── Logo ── */
.nav-logo { height: 38px; width: auto; display: block; filter: drop-shadow(0 0 6px rgba(180,255,0,.3)); transition: filter .2s }
.nav-logo:hover { filter: drop-shadow(0 0 12px rgba(180,255,0,.6)) }
.hero-logo { height: clamp(64px, 12vw, 110px); width: auto; margin-bottom: 16px; filter: drop-shadow(0 0 24px rgba(180,255,0,.35)) }

/* ── FAQ Accordion ── */
.faq-list { display: flex; flex-direction: column; gap: 12px }
.faq-item { background: rgba(46, 43, 10, .88); border: 1px solid var(--bd); border-radius: 16px; overflow: hidden; transition: border-color .2s, box-shadow .2s }
.faq-item:hover, .faq-item.open { border-color: rgba(180, 255, 0, .45) }
.faq-item.open { box-shadow: 0 0 24px rgba(180, 255, 0, .12) }
.faq-q { width: 100%; background: transparent; border: 0; padding: 18px 20px; display: flex; justify-content: space-between; align-items: center; gap: 16px; color: #FFFFFF; font: inherit; font-weight: 600; font-size: 1rem; text-align: left; cursor: pointer; transition: color .15s }
.faq-q:hover { color: var(--accent) }
.faq-icon { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(180, 255, 0, .1); color: var(--accent); font-size: 1.25rem; font-weight: 700; flex-shrink: 0; transition: transform .25s ease, background .25s, color .25s; line-height: 1 }
.faq-item.open .faq-icon { transform: rotate(45deg); background: var(--accent); color: #14130A }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease, padding .3s ease; padding: 0 20px; color: var(--t2); line-height: 1.65; font-size: 0.95rem }
.faq-item.open .faq-a { max-height: 250px; padding: 0 20px 20px 20px }

/* ── VIP Ticket Pass & WhatsApp ── */
.vip-wrap { display: flex; flex-direction: column; gap: 18px; text-align: center }
.vip-success-badge { display: flex; flex-direction: column; align-items: center; gap: 6px }
.vip-success-badge h3 { font-size: 1.35rem; color: #FFFFFF; margin-top: 4px }
.vip-success-badge p { color: var(--t2); font-size: 0.95rem; margin: 0 }

.vip-ticket {
    background: linear-gradient(155deg, #1d1b0c 0%, #2c280b 55%, #161509 100%);
    border: 1px solid rgba(180, 255, 0, .4);
    border-radius: 20px;
    box-shadow: 0 16px 45px rgba(0, 0, 0, .55), 0 0 35px rgba(180, 255, 0, .18);
    position: relative;
    overflow: hidden;
    text-align: left;
}

.vip-top {
    padding: 18px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(180, 255, 0, .03);
}

.vip-brand { display: flex; align-items: center; gap: 12px }
.vip-logo { height: 38px; width: auto; filter: drop-shadow(0 0 8px rgba(180, 255, 0, .4)) }
.vip-club { font-size: 11px; font-weight: 800; color: var(--accent); letter-spacing: .08em }
.vip-event { font-size: 14px; font-weight: 800; color: #FFFFFF }
.vip-tag {
    background: rgba(180, 255, 0, .14);
    border: 1px solid var(--accent);
    color: var(--accent);
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    box-shadow: 0 0 12px rgba(180, 255, 0, .25);
}

.vip-divider { position: relative; height: 22px; display: flex; align-items: center }
.notch {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #14130A;
    border: 1px solid rgba(180, 255, 0, .35);
    z-index: 2;
}
.notch-l { left: -12px }
.notch-r { right: -12px }
.vip-dash { width: 100%; border-top: 2px dashed rgba(180, 255, 0, .3); margin: 0 16px }

.vip-content { padding: 18px 20px 22px }
.vip-field { display: flex; flex-direction: column; gap: 4px }
.vip-field small { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--t2); font-weight: 600 }
.vip-field b, .vip-field span { font-size: 13.5px; color: #FFFFFF }
.vip-field-hero b { font-size: 18px; letter-spacing: .04em; color: #FFFFFF; font-weight: 800 }
.vip-code { font-family: monospace; font-size: 16px !important; color: var(--accent) !important; letter-spacing: 1.5px; font-weight: 800 }

.vip-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 16px;
    margin-top: 14px;
}

.vip-status {
    margin-top: 18px;
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(139, 92, 246, .14);
    border: 1px solid rgba(139, 92, 246, .35);
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12.5px;
    color: #e9d5ff;
}
.vip-status-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #a855f7;
    box-shadow: 0 0 10px #a855f7;
    animation: pulseDot 1.5s infinite;
}

.vip-barcode {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid rgba(180, 255, 0, .14);
    text-align: center;
}
.barcode-lines {
    height: 38px;
    background: repeating-linear-gradient(90deg, #B4FF00 0, #B4FF00 2px, transparent 2px, transparent 4px, #B4FF00 4px, #B4FF00 7px, transparent 7px, transparent 9px, #B4FF00 9px, #B4FF00 12px, transparent 12px, transparent 15px, #B4FF00 15px, #B4FF00 16px, transparent 16px, transparent 19px);
    opacity: .8;
}
.barcode-text {
    font-family: monospace;
    font-size: 11px;
    letter-spacing: 2px;
    color: var(--t2);
    margin-top: 6px;
}

/* ── VIP Actions ── */
.vip-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 6px }
.btn-wa {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background: linear-gradient(135deg, #25D366, #128C7E);
    color: #FFFFFF !important;
    padding: 15px 22px;
    border-radius: 16px;
    text-align: left;
    text-decoration: none;
    box-shadow: 0 0 28px rgba(37, 211, 102, .45);
    transition: transform .15s, box-shadow .15s;
    border: 1px solid rgba(255, 255, 255, .2);
}
.btn-wa:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 42px rgba(37, 211, 102, .75);
}
.wa-icon { width: 34px; height: 34px; object-fit: contain; flex-shrink: 0 }
.btn-wa strong { display: block; font-size: 15px; font-weight: 700; line-height: 1.2 }
.btn-wa small { display: block; font-size: 12px; opacity: .92; font-weight: 400; margin-top: 2px }
.vip-btn-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap }

@keyframes pulseDot {
    0%, 100% { opacity: 1; transform: scale(1) }
    50% { opacity: .4; transform: scale(.8) }
}
@keyframes pulseWa {
    0%, 100% { box-shadow: 0 0 24px rgba(37, 211, 102, .4) }
    50% { box-shadow: 0 0 38px rgba(37, 211, 102, .75) }
}
.pulse-wa { animation: pulseWa 2.2s infinite ease-in-out }

@media print {
    body * { visibility: hidden }
    #vip-ticket, #vip-ticket * { visibility: visible }
    #vip-ticket { position: fixed; left: 0; top: 0; width: 100%; max-width: 500px; box-shadow: none; border-color: #000 }
}