*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Segoe UI',sans-serif;
}

body{
height:100vh;
display:flex;
justify-content:center;
align-items:center;

background:
linear-gradient(
135deg,
#090909,
#111111,
#1b1b1b
);

color:white;
}

.card{

width:400px;

padding:40px;

background:
rgba(255,255,255,.05);

backdrop-filter:blur(20px);

border:
1px solid #D4AF37;

border-radius:25px;

text-align:center;

box-shadow:
0 0 30px rgba(212,175,55,.2);
}

h1{

color:#D4AF37;

font-size:3rem;

margin-bottom:20px;
}

input{

width:100%;

padding:15px;

margin-top:20px;

background:#111;

color:white;

border:
1px solid #D4AF37;

border-radius:12px;
}

button{

width:100%;

padding:15px;

margin-top:20px;

border:none;

border-radius:12px;

background:#D4AF37;

color:black;

font-weight:bold;

cursor:pointer;

transition:.3s;
}

button:hover{

transform:translateY(-3px);

box-shadow:
0 0 20px #D4AF37;
}

#mensaje{

margin-top:20px;

font-weight:bold;
}

.comprobante{
    position:fixed;
    left:-9999px;
    top:0;
    display:block;

    
    background:
    linear-gradient(
    145deg,
    #050505,
    #111111,
    #1a1a1a
    );
    
    border:4px solid #D4AF37;
    
    border-radius:30px;
    
    overflow:hidden;
    
    text-align:center;
    
    color:white;
    
    z-index:-9999;
    
    }
    
    .gold-shine{
    
    position:absolute;
    
    top:-100px;
    
    left:-100px;
    
    width:300px;
    
    height:300px;
    
    background:
    radial-gradient(
    circle,
    rgba(212,175,55,.35),
    transparent
    );
    
    pointer-events:none;
    }
    
    .logo-premium{
    
    width:180px;
    
    margin-bottom:20px;
    }
    
    .comprobante h1{
    
    font-size:42px;
    
    color:#D4AF37;
    
    letter-spacing:4px;
    
    margin-bottom:20px;
    }
    
    .winner-badge{
    
    display:inline-block;
    
    padding:12px 30px;
    
    border:2px solid #D4AF37;
    
    border-radius:50px;
    
    color:#D4AF37;
    
    font-weight:bold;
    
    margin-bottom:30px;
    }
    
    .info-box{
    
    background:
    rgba(255,255,255,.05);
    
    padding:25px;
    
    border-radius:20px;
    
    margin-bottom:25px;
    }
    
    .info-box p{
    
    font-size:24px;
    
    margin:15px 0;
    }
    
    .estado{
    
    display:inline-block;
    
    padding:15px 35px;
    
    background:#D4AF37;
    
    color:black;
    
    font-weight:bold;
    
    font-size:22px;
    
    border-radius:15px;
    }
    

    /* RESPONSIVE */

@media (max-width:768px){

    .card{
    
        width:95%;
    
        padding:25px;
    }
    
    h1{
    
        font-size:2rem;
    }
    
    input{
    
        font-size:16px;
    }
    
    button{
    
        font-size:16px;
    }
    
    .comprobante{
    
        width:95%;
    
        padding:25px;
    }
    }

    .final-mensaje{

        display:none;
        
        margin-top:25px;
        
        text-align:center;
        
        animation:fadeIn .5s ease;
        }
        
        .final-mensaje p{
        
        color:white;
        
        font-size:1rem;
        
        line-height:1.6;
        }
        
        .btn-home{
        
        margin-top:15px;
        
        width:60px;
        
        height:60px;
        
        border:none;
        
        border-radius:50%;
        
        background:#D4AF37;
        
        color:black;
        
        font-size:24px;
        
        cursor:pointer;
        
        transition:.3s;
        }
        
        .btn-home:hover{
        
        transform:scale(1.1);
        }
        
        @keyframes fadeIn{
        
        from{
        opacity:0;
        transform:translateY(15px);
        }
        
        to{
        opacity:1;
        transform:translateY(0);
        }
        
        }

        #btnDescargar{

            display:none;
            
            margin-top:15px;
            
            padding:12px 20px;
            
            border:none;
            
            border-radius:12px;
            
            background:#D4AF37;
            
            color:#000;
            
            font-weight:bold;
            
            cursor:pointer;
            
            transition:.3s ease;
            
            }
            
            #btnDescargar:hover{
            
            transform:scale(1.03);
            
            }