/* ============================= */
/* BASE (THEME PRO) */
/* ============================= */

body{
background:var(--bg-main);
color:var(--text-main);
font-family:'Poppins',sans-serif;
overflow-x:hidden;
}

/* ============================= */
/* TITULO PRINCIPAL */
/* ============================= */

.main-content h1{
font-size:42px;
text-align:center;
margin-bottom:60px;

color:var(--accent);

/* 🔥 glow más fino */
text-shadow:0 0 15px var(--accent);

letter-spacing:.5px;
}

/* ============================= */
/* CONTENEDOR */
/* ============================= */

.main-content{
position:relative;
padding-left:10px;
}

/* ============================= */
/* LINEA TIMELINE */
/* ============================= */

.main-content::before{
content:"";
position:absolute;
left:32px;
top:0;
width:3px;
height:100%;

/* 🔥 más elegante */
background:linear-gradient(var(--accent),transparent);

opacity:.2;
}

/* ============================= */
/* TARJETAS */
/* ============================= */

.update{
position:relative;
margin-left:85px;

background:var(--bg-card);
border:1px solid var(--border-color);

border-radius:20px;
padding:35px;
margin-top:45px;

/* 🔥 sombra más suave (mejor en claro) */
box-shadow:0 10px 30px rgba(0,0,0,.15);

backdrop-filter:blur(10px);

transition:.35s ease;
}

/* ============================= */
/* PUNTO TIMELINE */
/* ============================= */

.update::before{
content:"";
position:absolute;
left:-52px;
top:38px;

width:14px;
height:14px;

background:var(--accent);
border-radius:50%;

/* 🔥 glow más limpio */
box-shadow:0 0 12px var(--accent);
}

/* ============================= */
/* HOVER */
/* ============================= */

.update:hover{
transform:translateY(-6px) scale(1.01);
border-color:var(--accent);

/* 🔥 glow mejorado */
box-shadow:0 10px 35px rgba(0,255,255,.15);
}

/* ============================= */
/* TITULO VERSION */
/* ============================= */

.update h2{
font-size:24px;
color:var(--accent);
margin-bottom:15px;
}

/* ============================= */
/* TEXTO */
/* ============================= */

.update p{
line-height:1.7;
font-size:15px;
color:var(--text-secondary);
margin-bottom:12px;
}

/* ============================= */
/* LISTA */
/* ============================= */

.update ul{
margin-top:10px;
padding-left:0;
list-style:none;
}

.update ul li{
position:relative;
padding-left:24px;
margin-bottom:8px;
font-size:15px;
color:var(--text-secondary);
}

/* puntito */

.update ul li::before{
content:"";
position:absolute;
left:0;
top:9px;

width:7px;
height:7px;
border-radius:50%;

background:var(--accent);
box-shadow:0 0 6px var(--accent);
}

/* ============================= */
/* TAG VERSION */
/* ============================= */

.version-tag{
display:inline-block;
padding:6px 14px;
border-radius:14px;
font-size:12px;
font-weight:600;

/* 🔥 mejor contraste */
background:rgba(0,255,255,.12);
border:1px solid var(--accent);
color:var(--accent);

margin-bottom:14px;
}

/* ============================= */
/* CENTER */
/* ============================= */

.update.center{
text-align:center;
}

/* ============================= */
/* ANIMACION */
/* ============================= */

.fade-in{
opacity:0;
transform:translateY(25px);
animation:fadeUp 0.9s forwards ease;
}

@keyframes fadeUp{
from{
opacity:0;
transform:translateY(25px);
}
to{
opacity:1;
transform:translateY(0);
}
}

/* ============================= */
/* RESPONSIVE */
/* ============================= */

@media(max-width:800px){

.main-content{
padding-left:0;
}

.main-content::before{
display:none;
}

.update{
margin-left:0;
}

.update::before{
display:none;
}

.main-content h1{
font-size:30px;
}

}

.badge-update{
  position:relative;
  overflow:hidden;
}

.badge-update::after{
  content:"";
  position:absolute;
  top:0;
  left:-100%;
  width:100%;
  height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.4),transparent);
  animation:shine 2.5s infinite;
}

@keyframes shine{
  to{
    left:100%;
  }
}

.update-title{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}