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

html, body{
width:100%;
min-height:100%;
background:#000;
font-family:Arial, Helvetica, sans-serif;
overflow-x:hidden;
}

/* La web completa entra dentro de la pantalla */
.site{
width:100%;
max-width:1536px;
margin:0 auto;
display:grid;
grid-template-columns:20.5078% 51.4323% 28.0599%;
grid-template-rows:6.8359% 38.3789% 19.7266% 35.0586%;
aspect-ratio:1536 / 1024;
background:#000;
}

img{
display:block;
width:100%;
height:100%;
object-fit:cover;
}

.sidebar{
grid-column:1;
grid-row:1 / 3;
}

.topnav{
grid-column:2 / 4;
grid-row:1;
position:relative;
}

.player-box{
grid-column:2;
grid-row:2;
background:#000;
border:1px solid #222;
min-width:0;
min-height:0;
}

/* Este es el espacio real del reproductor */
.player-box iframe,
.player-box video{
width:100%;
height:100%;
border:0;
display:block;
}

.placeholder{
width:100%;
height:100%;
background:#000;
border:1px solid #4a4a4a;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
padding:2vw;
color:#ffd000;
}

.placeholder h1{
font-size:clamp(13px, 2.2vw, 34px);
line-height:1.1;
margin-bottom:.7vw;
}

.placeholder p{
font-size:clamp(9px, 1.1vw, 17px);
color:#fff;
max-width:70%;
}

.right{
grid-column:3;
grid-row:2;
position:relative;
}

.cards{
grid-column:1 / 4;
grid-row:3;
position:relative;
}

.bottom{
grid-column:1 / 4;
grid-row:4;
}

.hot{
position:absolute;
display:block;
z-index:30;
cursor:pointer;
background:transparent;
}

/* Menú superior: coordenadas relativas al topnav completo de 1221x70 */
.inicio{left:1.06%;top:40%;width:5.6%;height:54%;}
.envivo{left:8.60%;top:40%;width:6.9%;height:54%;}
.programacion{left:16.95%;top:37%;width:12.4%;height:59%;}
.realitys{left:29.86%;top:40%;width:7.5%;height:54%;}
.viajes{left:38.90%;top:40%;width:6.0%;height:54%;}
.musica{left:46.70%;top:40%;width:6.75%;height:54%;}
.entrevistas{left:54.90%;top:40%;width:9.7%;height:54%;}
.documentales{left:65.80%;top:40%;width:11.5%;height:54%;}
.quienes{left:78.90%;top:40%;width:10.4%;height:54%;}
.contacto{left:90.20%;top:40%;width:7.8%;height:54%;}

/* Redes superiores al lado de Contacto: links invisibles sobre las imágenes existentes */
.top-youtube{left:75.0%;top:5%;width:2.9%;height:36%;}
.top-instagram{left:78.1%;top:5%;width:2.9%;height:36%;}
.top-facebook{left:81.2%;top:5%;width:2.9%;height:36%;}
.top-x{left:84.3%;top:5%;width:2.9%;height:36%;}
.top-twitch{left:87.4%;top:5%;width:2.9%;height:36%;}
.top-kick{left:90.5%;top:5%;width:2.9%;height:36%;}
.top-whatsapp{left:93.6%;top:5%;width:2.9%;height:36%;}

/* Panel derecho */
.verenvivo{left:7.65%;top:40.82%;width:44.08%;height:15.98%;}
.descargar{left:7.88%;top:59.83%;width:44.08%;height:10.36%;}

.youtube{left:6.96%;top:79.70%;width:8.58%;height:7.99%;}
.instagram{left:17.17%;top:79.70%;width:8.58%;height:7.99%;}
.facebook{left:26.91%;top:79.70%;width:8.58%;height:7.99%;}
.x{left:36.89%;top:79.70%;width:8.58%;height:7.99%;}
.twitch{left:46.63%;top:79.70%;width:8.58%;height:7.99%;}
.kick{left:56.38%;top:79.70%;width:8.58%;height:7.99%;}
.whatsapp{left:66.12%;top:79.70%;width:8.58%;height:7.99%;}

/* Tarjetas */
.card1{left:2.02%;top:0;width:15.43%;height:93.06%;}
.card2{left:18.29%;top:0;width:15.49%;height:93.06%;}
.card3{left:34.31%;top:0;width:15.36%;height:93.06%;}
.card4{left:50.33%;top:0;width:14.58%;height:93.06%;}
.card5{left:65.82%;top:0;width:15.56%;height:93.06%;}
.card6{left:82.10%;top:0;width:15.75%;height:93.06%;}

.footer-legal{
width:100%;
max-width:1536px;
margin:0 auto;
background:#050505;
border-top:2px solid #ffd000;
padding:18px 15px;
text-align:center;
color:#999;
font-size:14px;
}

.footer-links{
display:flex;
justify-content:center;
flex-wrap:wrap;
gap:18px;
margin-bottom:10px;
}

.footer-links a{
color:#ffd000;
text-decoration:none;
font-weight:bold;
font-size:13px;
}

.footer-links a:hover{
text-decoration:underline;
}

.cookie-banner{
position:fixed;
left:20px;
right:20px;
bottom:18px;
z-index:9999;
max-width:760px;
margin:auto;
background:rgba(5,5,5,.97);
border:2px solid #ffd000;
box-shadow:0 0 30px rgba(0,0,0,.8);
border-radius:12px;
padding:16px;
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
color:#fff;
}

.cookie-banner strong{
color:#ffd000;
font-size:16px;
}

.cookie-banner p{
margin:4px 0 0;
font-size:13px;
color:#ddd;
}

.cookie-banner button{
background:#ffd000;
color:#000;
border:0;
border-radius:8px;
padding:12px 16px;
font-weight:900;
cursor:pointer;
white-space:nowrap;
}

@media(max-width:768px){

.site{
width:100vw;
max-width:100vw;
aspect-ratio:1536 / 1024;
}

.placeholder{
padding:6px;
}

.placeholder h1{
font-size:10px;
}

.placeholder p{
display:none;
}

.footer-legal{
font-size:12px;
padding:16px 10px;
}

.footer-links{
flex-direction:column;
gap:8px;
}

.cookie-banner{
left:10px;
right:10px;
bottom:10px;
flex-direction:column;
align-items:flex-start;
padding:14px;
}

.cookie-banner button{
width:100%;
}

}


/* --- AJUSTE FINAL SIN TOCAR EL MENÚ VISUAL --- */

/* Cookies: aparece abajo y desaparece al aceptar */
.cookie-banner{
position:fixed !important;
left:20px !important;
right:20px !important;
bottom:18px !important;
z-index:999999 !important;
max-width:780px !important;
margin:auto !important;
background:rgba(5,5,5,.98) !important;
border:2px solid #ffd000 !important;
box-shadow:0 0 35px rgba(0,0,0,.9) !important;
border-radius:12px !important;
padding:16px !important;
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
gap:16px !important;
color:#fff !important;
}

.cookie-banner.cookie-hidden{
display:none !important;
}

.cookie-banner strong{
color:#ffd000 !important;
font-size:16px !important;
}

.cookie-banner p{
margin:4px 0 0 !important;
font-size:13px !important;
color:#ddd !important;
}

.cookie-banner button{
background:#ffd000 !important;
color:#000 !important;
border:0 !important;
border-radius:8px !important;
padding:12px 16px !important;
font-weight:900 !important;
cursor:pointer !important;
white-space:nowrap !important;
}

/* Footer legal */
.footer-legal{
width:100%;
max-width:1536px;
margin:0 auto;
background:#050505;
border-top:2px solid #ffd000;
padding:18px 15px;
text-align:center;
color:#999;
font-size:14px;
}

.footer-links{
display:flex;
justify-content:center;
flex-wrap:wrap;
gap:18px;
margin-bottom:10px;
}

.footer-links a{
color:#ffd000;
text-decoration:none;
font-weight:bold;
font-size:13px;
}

.footer-links a:hover{
text-decoration:underline;
}

/* Menú: mantener links exactos sin superponer redes arriba */
.top-youtube,
.top-instagram,
.top-facebook,
.top-x,
.top-twitch,
.top-kick,
.top-whatsapp{
display:none !important;
pointer-events:none !important;
}

/* Logos blancos del panel derecho, links invisibles ampliados */
.right .youtube{left:5.0% !important;top:78.0% !important;width:11.5% !important;height:12% !important;z-index:200 !important;}
.right .instagram{left:15.7% !important;top:78.0% !important;width:11.5% !important;height:12% !important;z-index:200 !important;}
.right .facebook{left:26.4% !important;top:78.0% !important;width:11.5% !important;height:12% !important;z-index:200 !important;}
.right .x{left:37.1% !important;top:78.0% !important;width:11.5% !important;height:12% !important;z-index:200 !important;}
.right .twitch{left:47.8% !important;top:78.0% !important;width:11.5% !important;height:12% !important;z-index:200 !important;}
.right .kick{left:58.5% !important;top:78.0% !important;width:11.5% !important;height:12% !important;z-index:200 !important;}
.right .whatsapp{left:69.2% !important;top:78.0% !important;width:11.5% !important;height:12% !important;z-index:200 !important;}

/* Logos blancos inferiores */
.bottom{
position:relative !important;
}
.bottom-youtube{left:36.0%;top:69.0%;width:3.4%;height:10.5%;z-index:200 !important;}
.bottom-instagram{left:40.0%;top:69.0%;width:3.4%;height:10.5%;z-index:200 !important;}
.bottom-facebook{left:44.0%;top:69.0%;width:3.4%;height:10.5%;z-index:200 !important;}
.bottom-x{left:48.0%;top:69.0%;width:3.4%;height:10.5%;z-index:200 !important;}
.bottom-twitch{left:52.0%;top:69.0%;width:3.4%;height:10.5%;z-index:200 !important;}
.bottom-kick{left:56.0%;top:69.0%;width:3.4%;height:10.5%;z-index:200 !important;}
.bottom-whatsapp{left:60.0%;top:69.0%;width:3.4%;height:10.5%;z-index:200 !important;}

@media(max-width:768px){
.cookie-banner{
left:10px !important;
right:10px !important;
bottom:10px !important;
flex-direction:column !important;
align-items:flex-start !important;
padding:14px !important;
}
.cookie-banner button{
width:100% !important;
}
.footer-legal{
font-size:12px;
padding:16px 10px;
}
.footer-links{
flex-direction:column;
gap:8px;
}
}