body{
    margin:0;

    font-family:'Inter', sans-serif;

    color:white;

    background:
    radial-gradient(circle at top,
    rgba(120,0,0,0.12),
    #050505 45%);
}

/* TOPBAR */

.topbar{

    position:sticky;
    top:0;

    z-index:99999;

    padding:18px 30px;

    background:rgba(10,10,10,0.88);

    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);

    border-bottom:1px solid rgba(255,255,255,0.06);

    box-shadow:
    0 0 30px rgba(0,0,0,0.35);
}

.topbar h1{
    margin:0;

    font-size:20px;

    letter-spacing:2px;

    color:white;
}

/* MOCKUP */

.mockup-container{

    position:relative;

    width:1280px;

    margin:60px auto 180px auto;
}

.mockup{

    width:100%;

    display:block;

    border-radius:18px;

    box-shadow:
    0 0 60px rgba(0,0,0,0.45);
}

/* HOTSPOTS */

.ad-zone{

    position:absolute;

    border:2px solid rgba(255,80,80,0.45);

    background:rgba(255,0,0,0.04);

    border-radius:12px;

    cursor:pointer;

    transition:0.25s ease;
}

.ad-zone:hover{

    background:rgba(255,0,0,0.12);

    border-color:#ff4d4d;

    box-shadow:
    0 0 35px rgba(255,0,0,0.22);

    transform:scale(1.01);

    z-index:999;
}

/* ETIQUETAS */

.ad-zone span{

    position:absolute;

    top:-14px;
    left:12px;

    background:#ff3b3b;

    color:white;

    font-size:11px;

    padding:6px 12px;

    border-radius:30px;

    font-weight:600;

    letter-spacing:1px;

    box-shadow:
    0 0 15px rgba(255,0,0,0.35);
}

/* POSICIONES */

.ad01{
    top:85px;
    left:80px;
    width:970px;
    height:90px;
}

.ad02{
    top:500px;
    left:420px;
    width:300px;
    height:250px;
}

.ad03{
    top:170px;
    right:40px;
    width:300px;
    height:600px;
}

/* POPUP */

.popup{

    position:absolute;

    top:50%;
    left:50%;

    transform:translate(-50%, -50%);

    width:240px;

    padding:20px;

    border-radius:16px;

    background:rgba(15,15,15,0.96);

    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);

    border:1px solid rgba(255,255,255,0.08);

    box-shadow:
    0 0 35px rgba(0,0,0,0.45);

    display:none;

    z-index:9999;

    animation:fadeIn 0.25s ease;
}

.popup h3{

    margin-top:0;

    color:#ff6b6b;

    font-size:18px;

    font-weight:700;

    line-height:1.4;

    text-shadow:
    0 0 10px rgba(255,80,80,0.25);
}

.popup p{

    color:#ffffff;

    font-size:14px;

    margin:8px 0;

    line-height:1.6;

    opacity:1;

    display:block;
}

.ad-zone:hover .popup{
    display:block;
}

@keyframes fadeIn{

    from{
        opacity:0;
        transform:translate(-50%, -45%);
    }

    to{
        opacity:1;
        transform:translate(-50%, -50%);
    }
}

/* PANEL */

.info-panel{

    position:fixed;

    top:90px;
    right:10px;

    width:280px;

    padding:22px;

    border-radius:20px;

    background:rgba(12,12,12,0.95);

    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);

    border:1px solid rgba(255,255,255,0.06);

    box-shadow:
    0 0 40px rgba(0,0,0,0.45);

    z-index:99999;
}

.info-panel h2{

    margin-top:0;

    font-size:24px;

    color:#ff3b3b;
}

.info-box{

    background:#101010;

    border:1px solid rgba(255,255,255,0.05);

    border-radius:14px;

    padding:16px;

    transition:0.25s ease;
}

.info-box.active{

    border-color:#ff3b3b;

    box-shadow:
    0 0 25px rgba(255,0,0,0.18);
}

.info-box h3{

    margin-top:0;

    font-size:16px;

    color:white;
}

.info-box p{

    margin:8px 0;

    font-size:14px;

    color:#bfbfbf;
}

/* STATS */

.stats{

    display:grid;

    grid-template-columns:1fr;

    gap:12px;

    margin-top:20px;
}

.stat{

    background:#161616;

    border-radius:12px;

    padding:14px;

    border:1px solid rgba(255,255,255,0.04);
}

.stat span{

    display:block;

    color:#888;

    font-size:12px;

    margin-bottom:5px;

    text-transform:uppercase;

    letter-spacing:1px;
}

.stat strong{

    font-size:20px;

    color:white;
}

.green{
    color:#3dff98 !important;
}

.orange{
    color:#ffb347 !important;
}

.red{
    color:#ff5c5c !important;
}