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

body{
    font-family:'Outfit',sans-serif;
    background:#05050a;
    color:white;
    overflow-x:hidden;
}
.hero{
    text-align:center;
    padding:80px 20px 50px;
}

.logo{
    width:170px;
    height:170px;

    object-fit:cover;

    border-radius:50%;

    border:4px solid #a855f7;

    padding:5px;

    background:#0d0d16;

    box-shadow:
        0 0 15px #a855f7,
        0 0 30px #a855f7,
        0 0 50px #ec4899;

    transition:.4s ease;
}

.logo:hover{

    transform:scale(1.05);

    box-shadow:
        0 0 20px #a855f7,
        0 0 40px #a855f7,
        0 0 70px #ec4899,
        0 0 100px #ec4899;
}

.hero h1{

    margin-top:25px;

    font-size:3rem;

    color:white;

    text-shadow:
        0 0 10px #a855f7,
        0 0 25px #a855f7;
}

.subtitle{

    margin-top:15px;

    color:#cfcfe9;

    font-size:1.1rem;
}

.background-glow{
    position:fixed;
    inset:0;
    z-index:-1;

    background:
    radial-gradient(circle at top left,
    rgba(168,85,247,.25),
    transparent 40%),

    radial-gradient(circle at bottom right,
    rgba(236,72,153,.2),
    transparent 40%);
}

.ticket-embed{

    max-width:1100px;

    margin:50px auto;

    background:#2b2d31;

    border-radius:18px;

    overflow:hidden;

    border-left:6px solid #a855f7;

    box-shadow:
        0 0 30px rgba(168,85,247,.2);
}
.ticket-header{

    padding:30px;

    display:flex;

    align-items:center;

    gap:20px;

    background:
    linear-gradient(
        90deg,
        rgba(168,85,247,.15),
        rgba(236,72,153,.15)
    );
}

.ticket-header-icon{

    width:70px;
    height:70px;

    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:35px;

    background:#111118;

    box-shadow:
        0 0 15px #a855f7;
}

.ticket-rule{

    padding:25px;

    border-top:1px solid rgba(255,255,255,.05);

    transition:.3s;
}

.ticket-rule:hover{

    background:rgba(168,85,247,.08);
}
.ticket-info{

    max-width:1100px;

    margin:0 auto 25px;

    padding:20px;

    background:#111118;

    border-radius:15px;

    border:1px solid rgba(168,85,247,.2);

    box-shadow:
        0 0 20px rgba(168,85,247,.15);
}
/* MENU */

.menu-btn{

    position:fixed;

    top:20px;
    left:20px;

    width:55px;
    height:55px;

    border:none;

    border-radius:15px;

    background:#111118;

    color:white;

    font-size:28px;

    cursor:pointer;

    z-index:9999;

    box-shadow:
        0 0 15px rgba(168,85,247,.3);

    transition:.3s;
}

.menu-btn:hover{

    box-shadow:
        0 0 20px #a855f7,
        0 0 40px #ec4899;
}

.sidebar{

    position:fixed;

    top:0;
    left:-300px;

    width:280px;
    height:100vh;

    background:#0b0b14;

    border-right:1px solid rgba(168,85,247,.2);

    transition:.4s;

    z-index:9998;
}

.sidebar.active{

    left:0;
}

.sidebar-header{

    text-align:center;

    padding:30px 20px;

    border-bottom:1px solid rgba(255,255,255,.08);
}

.sidebar-header img{

    width:90px;
    height:90px;

    object-fit:cover;

    border-radius:50%;

    border:3px solid #a855f7;

    box-shadow:
        0 0 15px #a855f7;
}

.sidebar-header h3{

    margin-top:15px;

    color:white;
}

.sidebar a{

    display:block;

    padding:18px 25px;

    color:white;

    text-decoration:none;

    transition:.3s;
}

.sidebar a:hover{

    background:rgba(168,85,247,.15);

    padding-left:35px;
}

/* OVERLAY */

#overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.5);

    backdrop-filter:blur(4px);

    opacity:0;

    pointer-events:none;

    transition:.3s;

    z-index:9997;
}

#overlay.active{

    opacity:1;

    pointer-events:auto;
}

/* MOVER CONTENIDO */

.hero,
main{

    transition:.4s ease;
}

body.menu-open .hero,
body.menu-open main{

    margin-left:280px;
}