/* ==========================================================
   Sociedad Valiente - Premium Dark Theme
   Color principal: #CCFF34
========================================================== */

:root{
  --bg:#000;
  --bg2:#090909;
  --card:#111;
  --card2:#161616;
  --primary:#CCFF34;
  --primary-soft:rgba(204,255,52,.14);
  --text:#fff;
  --muted:#bfbfbf;
  --border:rgba(204,255,52,.15);
  --shadow:0 20px 60px rgba(0,0,0,.45);
  --radius:22px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:Poppins,sans-serif;
  background:
    radial-gradient(circle at top right,rgba(204,255,52,.08),transparent 30%),
    radial-gradient(circle at bottom left,rgba(204,255,52,.05),transparent 40%),
    var(--bg);
  color:var(--text);
  line-height:1.8;
}

a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}

#progress-bar{
 position:fixed;top:0;left:0;height:4px;width:0;
 background:var(--primary);
 box-shadow:0 0 20px var(--primary);
 z-index:9999;
}

.hero{
 min-height:100vh;
 display:flex;
 align-items:center;
 justify-content:center;
 text-align:center;
 position:relative;
 overflow:hidden;
 padding:60px 20px;
}

.hero:before{
 content:"";
 position:absolute;
 width:700px;height:700px;
 border-radius:50%;
 background:radial-gradient(circle,var(--primary-soft),transparent 70%);
 filter:blur(30px);
}

.hero-content{position:relative;z-index:2;max-width:900px}
.logo{width:800px}
.badge{
 display:inline-block;
 padding:10px 22px;
 border:1px solid var(--border);
 border-radius:999px;
 color:var(--primary);
 background:rgba(255,255,255,.03);
}
.hero h1{
 font-size:clamp(3rem,7vw,5rem);
 margin:20px 0;
}
.hero p{
 color:var(--muted);
 max-width:700px;
 margin:auto;
 font-size:1.1rem;
}
.update{margin-top:30px;color:#8d8d8d}

.container{
 width:min(1400px,94%);
 margin:auto;
 display:grid;
 grid-template-columns:280px 1fr;
 gap:40px;
 padding:80px 0;
}

.sidebar{
 position:sticky;
 top:25px;
 height:max-content;
 background:linear-gradient(180deg,#101010,#090909);
 border:1px solid var(--border);
 border-radius:var(--radius);
 padding:25px;
 box-shadow:var(--shadow);
}
.sidebar h3{
 color:var(--primary);
 margin-bottom:20px;
 text-transform:uppercase;
 letter-spacing:2px;
 font-size:.95rem;
}
.sidebar nav{display:flex;flex-direction:column;gap:8px}
.sidebar a{
 padding:12px 15px;
 border-left:3px solid transparent;
 color:#d9d9d9;
 transition:.25s;
}
.sidebar a:hover,
.sidebar a.active{
 color:var(--primary);
 border-left-color:var(--primary);
 background:rgba(204,255,52,.08);
}

.content{display:flex;flex-direction:column;gap:28px}

.card{
 position:relative;
 overflow:hidden;
 background:linear-gradient(180deg,var(--card),var(--card2));
 border:1px solid var(--border);
 border-radius:var(--radius);
 padding:38px;
 box-shadow:var(--shadow);
 transition:.35s;
}
.card:before{
 content:"";
 position:absolute;
 top:0;left:0;
 width:100%;
 height:3px;
 background:linear-gradient(90deg,var(--primary),transparent);
}
.card:hover{
 transform:translateY(-8px);
 border-color:rgba(204,255,52,.45);
 box-shadow:0 0 30px rgba(204,255,52,.15);
}
.icon{
 width:60px;height:60px;
 border-radius:16px;
 display:flex;
 align-items:center;
 justify-content:center;
 background:var(--primary);
 color:#000;
 font-size:28px;
 margin-bottom:20px;
}
.card h2{
 color:var(--primary);
 margin-bottom:18px;
 font-size:2rem;
}
.card p,.card li{color:#d6d6d6}
.card ul{margin-left:20px}

.mail{
 display:inline-block;
 margin-top:15px;
 padding:12px 18px;
 border-radius:10px;
 background:var(--primary);
 color:#000;
 font-weight:700;
 transition:.25s;
}
.mail:hover{
 transform:translateY(-3px);
 box-shadow:0 0 20px rgba(204,255,52,.35);
}

footer{
 margin-top:70px;
 border-top:1px solid var(--border);
 text-align:center;
 padding:50px 20px;
 color:#8e8e8e;
 background:#050505;
}

#topButton{
 position:fixed;
 right:25px;
 bottom:25px;
 width:58px;height:58px;
 border:none;
 border-radius:50%;
 background:var(--primary);
 color:#000;
 font-size:22px;
 cursor:pointer;
 opacity:0;
 pointer-events:none;
 transition:.3s;
}

::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-thumb{
 background:var(--primary);
 border-radius:20px;
}
::-webkit-scrollbar-track{background:#050505}

.hidden{
 opacity:0;
 transform:translateY(60px);
 transition:all .8s;
}
.show{
 opacity:1;
 transform:none;
}

@media (max-width:1024px){
 .container{grid-template-columns:1fr}
 .sidebar{
   position:relative;
   top:auto;
 }
}

@media (max-width:768px){
 .hero{min-height:75vh}
 .card{padding:26px}
 .hero h1{font-size:2.6rem}
 .sidebar nav{
   display:grid;
   grid-template-columns:1fr 1fr;
 }
}

@media (max-width:560px){
 .sidebar nav{grid-template-columns:1fr}
 .logo{width:500px}
}