body{
background:radial-gradient(circle at top,#0a0f1c,#000);
color:#fff;
font-family:'Poppins',sans-serif;
overflow-x:hidden;
}

/* HERO */

.hero-updates{
text-align:center;
padding:80px 20px 30px 20px;
}

.hero-updates h1{
font-size:42px;
color:#00ffff;
margin-bottom:10px;
text-shadow:0 0 20px rgba(0,255,255,.4);
}

.hero-updates p{
color:#94a3b8;
max-width:600px;
margin:auto;
font-size:16px;
}

/* ANIMACIONES */

.fade-in{
opacity:0;
transform:translateY(30px);
animation:fadeUp 1s ease forwards;
}

@keyframes fadeUp{
to{
opacity:1;
transform:translateY(0);
}
}

/* CAJAS */

.update-box{

background:linear-gradient(
145deg,
rgba(15,23,42,.9),
rgba(2,6,23,.9)
);

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

box-shadow:
0 10px 40px rgba(0,0,0,.7),
0 0 20px rgba(0,255,255,.05);

border-radius:18px;

padding:30px;

margin-top:40px;

transition:.35s;

position:relative;

overflow:hidden;
}

.update-box:hover{
transform:translateY(-6px);
box-shadow:
0 20px 50px rgba(0,0,0,.8),
0 0 30px rgba(0,255,255,.25);
}

/* GLOW LINE */

.update-box::before{

content:"";

position:absolute;

top:0;
left:0;

width:100%;
height:2px;

background:linear-gradient(90deg,#00ffff,transparent);

opacity:.5;

}

/* TITULOS */

.update-box h2{
color:#00ffff;
margin-bottom:12px;
font-size:24px;
}

.update-box p{
color:#cbd5e1;
line-height:1.6;
}

/* VERSION TAG */

.version-tag{

display:inline-block;

padding:6px 14px;

border-radius:30px;

background:rgba(0,255,255,.08);

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

color:#00ffff;

font-size:13px;

margin-bottom:14px;

font-weight:600;

}

/* FUTURE TAG */

.future-release{

background:rgba(255,0,255,.08);
border:1px solid rgba(255,0,255,.4);
color:#ff00ff;

}

/* LISTAS */

.update-box ul{
margin-top:10px;
padding-left:20px;
}

.update-box li{
margin-bottom:8px;
color:#d1d5db;
}

/* SEPARADOR */

.section-divider{
border:none;
border-top:2px dashed rgba(0,255,255,.3);
margin:70px 0;
}

/* FOOTER SPACE */

.main-content{
padding:40px;
max-width:1000px;
margin:auto;
}

/* ========================= */
/* 🌞 MODO CLARO - UPDATES */
/* ========================= */

/* FONDO */
body.light{
background:#f8fafc;
color:#111;
}

/* HERO */
body.light .hero-updates h1{
color:#0099cc;
text-shadow:0 0 10px rgba(0,153,204,.2);
}

body.light .hero-updates p{
color:#555;
}

/* CAJAS */
body.light .update-box{
background:#ffffff;
border:1px solid rgba(0,0,0,.08);
box-shadow:0 10px 30px rgba(0,0,0,.08);
}

body.light .update-box:hover{
box-shadow:
0 12px 35px rgba(0,0,0,.12),
0 0 15px rgba(0,188,212,.15);
}

/* LINEA SUPERIOR */
body.light .update-box::before{
background:linear-gradient(90deg,#00bcd4,transparent);
opacity:.6;
}

/* TITULOS */
body.light .update-box h2{
color:#0099cc;
}

body.light .update-box p{
color:#444;
}

/* VERSION TAG */
body.light .version-tag{
background:rgba(0,188,212,.08);
border:1px solid rgba(0,188,212,.3);
color:#00bcd4;
}

/* FUTURE TAG */
body.light .future-release{
background:rgba(255,0,255,.08);
border:1px solid rgba(255,0,255,.3);
color:#cc00cc;
}

/* LISTAS */
body.light .update-box li{
color:#444;
}

/* SEPARADOR */
body.light .section-divider{
border-top:2px dashed rgba(0,188,212,.3);
}