*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial,sans-serif;
}
body{

    background:
        radial-gradient(circle at top,#173b7a 0%,#08111f 45%,#030712 100%);

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:20px;

}
.panel-mundial{
    width:1400px;
    max-width:95%;

    background:
        linear-gradient(rgba(5,10,25,.60), rgba(5,10,25,.75)),
        url("fondo streaming.jpg");

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

    border-radius:35px;
    position:relative;
    padding:30px;
    overflow:hidden;

    border:1px solid rgba(0,170,255,.25);

  box-shadow:
    0 0 80px rgba(0,160,255,.28),
    0 20px 80px rgba(0,0,0,.45),
    inset 0 0 120px rgba(0,0,0,.45);
        
}

.franja-colombia{
    width:100%;
    height:8px;
    border-radius:20px;
    margin-bottom:15px;

    background:linear-gradient(
        to right,
        #FCD116,
        #003893,
        #CE1126
    );
}

.header-mundial{
    text-align:center;

}.titulo-mundial{

    font-size:64px;
    font-weight:900;

    color:#ffffff;

    letter-spacing:3px;

    text-transform:uppercase;

    text-shadow:
        0 0 10px rgba(255,255,255,.6),
        0 0 30px rgba(0,174,255,.6),
        0 0 60px rgba(0,174,255,.3);

}


.header-mundial::after{

    content:"";

    display:block;

    width:320px;
    height:4px;

    margin:18px auto 25px;

    border-radius:20px;

    background:linear-gradient(
        90deg,
        transparent,
        #00b7ff,
        #6a5cff,
        #00b7ff,
        transparent
    );

    box-shadow:
        0 0 15px #00b7ff,
        0 0 35px rgba(0,183,255,.7);

}
.header-mundial h2{

    color:#6fdcff;

    font-size:22px;

    font-weight:600;

    letter-spacing:5px;

    text-transform:uppercase;

    margin-top:15px;

    animation:none;

    text-shadow:
        0 0 15px rgba(0,180,255,.6);

}





@keyframes girarBalon{
    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }
}

@keyframes flotarCard{
    0%{transform:translateY(0);}
    50%{transform:translateY(-8px);}
    100%{transform:translateY(0);}
}

.container{
    margin-top:10px;

    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:10px;
}

.card{
    width:200px;
    height:175px;

 background:rgba(6,15,35,.65);

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

border-radius:22px;

border:1px solid rgba(0,180,255,.25);

box-shadow:
    0 10px 35px rgba(0,0,0,.35),
    inset 0 1px 1px rgba(255,255,255,.08);
    padding:15px;

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

    animation:flotarCard 4s ease-in-out infinite;

    transition:.3s;
}

.card:hover{

    transform:translateY(-8px);

    border-color:#00b7ff;

    box-shadow:
        0 0 20px rgba(0,183,255,.45),
        0 15px 45px rgba(0,0,0,.45);

}

.logo-streaming{
    width:130px;
    height:50px;
    object-fit:contain;
    margin-bottom:10px;

    background:transparent !important;
}

.netflix .logo-streaming{
    width:160px;
}

.hbo .logo-streaming{
    width:135px;
    height:40px;
}

.prime .logo-streaming{
    width:170px;
}

.disney .logo-streaming{
    width:160px;
}

.paramount .logo-streaming{
    width:145px;
}

.spotify .logo-streaming{
    width:135px;
    height:40px;
}

.crunchyroll .logo-streaming{
    width:145px;
}

.vix .logo-streaming{
    width:145px;
}


.correo-input{

    width:100%;

    padding:11px;

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

    border:1px solid rgba(255,255,255,.15);

    color:#fff;

    border-radius:10px;

    margin-bottom:12px;

    outline:none;

}

.correo-input::placeholder{
    color:#b8c8e6;
}
button{
    width:100%;
    padding:10px;
    color:white;
    border:none;
    border-radius:8px;
    font-weight:bold;
    cursor:pointer;
    transition:.3s;
}

.netflix button{background:#E50914;}
.hbo button{background:#8B2CF5;}
.prime button{background:#008CFF;}
.disney button{background:#003CC5;}
.paramount button{background:#006CFF;}
.spotify button{background:#1DB954;}

.crunchyroll button{background:#F47521;}
.vix button{background:#8A2BE2;}

.netflix{border:1px solid #E50914;}
.hbo{border:1px solid #A855F7;}
.prime{border:1px solid #00A8E1;}
.disney{border:1px solid #4DA6FF;}
.paramount{border:1px solid #4DA6FF;}
.spotify{border:1px solid #1DB954;}

.crunchyroll{border:1px solid #F47521;}
.vix{border:1px solid #8A2BE2;}

@media(max-width:768px){

    .titulo-mundial{
        font-size:34px;
    }

    .card{
        width:100%;
        max-width:320px;
        height:auto;
    }

}

.netflix:hover{
    box-shadow:
    0 0 15px #E50914,
    0 0 30px #E50914,
    0 0 60px #E50914;
}

.hbo:hover{
    box-shadow:
    0 0 15px #A855F7,
    0 0 30px #A855F7,
    0 0 60px #A855F7;
}

.prime:hover{
    box-shadow:
    0 0 15px #00A8E1,
    0 0 30px #00A8E1,
    0 0 60px #00A8E1;
}

.disney:hover{
    box-shadow:
    0 0 15px #006CFF,
    0 0 30px #006CFF,
    0 0 60px #006CFF;
}

.paramount:hover{
    box-shadow:
    0 0 15px #006CFF,
    0 0 30px #006CFF,
    0 0 60px #006CFF;
}

.spotify:hover{
    box-shadow:
    0 0 15px #1DB954,
    0 0 30px #1DB954,
    0 0 60px #1DB954;
}

.crunchyroll:hover{
    box-shadow:
    0 0 15px #F47521,
    0 0 30px #F47521,
    0 0 60px #F47521;
}

.vix:hover{
    box-shadow:
    0 0 15px #8A2BE2,
    0 0 30px #8A2BE2,
    0 0 60px #8A2BE2;
}

button:hover{
    transform:scale(1.05);

    filter:brightness(1.15);

    box-shadow:
    0 0 10px rgba(255,255,255,.5),
    0 0 20px rgba(255,255,255,.4);
}

.btn-salir{

    position:absolute;
    top:20px;
    right:20px;

    width:150px;

    background:#d32f2f;
    color:white;

    border:none;
    border-radius:8px;

    padding:10px;

    font-size:15px;
    font-weight:bold;

    cursor:pointer;

    z-index:9999;
}

#listaUsuariosAsignar{
    max-height:180px;
    overflow-y:auto;
    margin-top:8px;
    border:1px solid #34405c;
    border-radius:8px;
    background:#10141f;
}

.item-usuario{
    padding:10px 15px;
    cursor:pointer;
    border-bottom:1px solid #2f3953;
}

.item-usuario:hover{
    background:#00c853;
    color:white;
}

.modal{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.75);
    justify-content:center;
    align-items:center;
    z-index:9999;
}


.ventana{

    background:#1f2636;
    padding:30px;
    width:400px;
    border-radius:15px;
    text-align:center;
    box-shadow:0 10px 30px rgba(0,0,0,.5);

}


.ventana h2{

    margin-bottom:20px;
    color:#00c853;

}


#textoModal{

    color:white;
    margin-bottom:25px;
    font-size:17px;

}


#cerrarModal{

    background:#00c853;
    color:white;
    border:none;
    padding:12px 25px;
    border-radius:10px;
    cursor:pointer;
    font-weight:bold;

}

/* =========================
   APPLE TV
   ========================= */

.card.apple {
    border: 2px solid #7d7dff;
    box-shadow:
        0 0 8px rgba(125, 125, 255, 0.45),
        0 0 20px rgba(125, 125, 255, 0.22);
}

.card.apple:hover {
    box-shadow:
        0 0 12px rgba(125, 125, 255, 0.65),
        0 0 28px rgba(125, 125, 255, 0.35);
}

.card.apple .logo-streaming {
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.25));
}

.card.apple button {
    background: linear-gradient(135deg, #111111, #3a3a3a);
    color: #ffffff;
    border: 1px solid #777777;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.12);
}

.card.apple button:hover {
    background: linear-gradient(135deg, #222222, #555555);
    color: #ffffff;
    box-shadow: 0 0 14px rgba(255, 255, 255, 0.28);
}

.card.apple input {
    color: #ffffff;
    background: #161b2b;
    border-color: #4b5268;
}