@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600;700&family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --bg: #060607;
  --bg-soft: #0d0d0f;
  --panel: #131315;
  --panel-2: #1c1c1f;
  --border: #2c2124;
  --text: #f5f5f7;
  --text-dim: #9a9aa2;
  --lime: #ff1a3d;
  --pink: #ff5b1f;
  --cyan: #e4e6ea;
  --gold: #ffb020;
  --purple: #7a0e1f;
  --danger: #ff2d4d;
  --radius: 16px;
  --shadow: 0 20px 60px rgba(0,0,0,.6);
  --font-display: 'Rajdhani', sans-serif;
  --font-body: 'Inter', sans-serif;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background: var(--bg);
  background-image:
    radial-gradient(circle at 15% 0%, rgba(255,26,61,.12), transparent 45%),
    radial-gradient(circle at 85% 10%, rgba(255,91,31,.09), transparent 45%),
    repeating-linear-gradient(180deg, rgba(255,26,61,.025) 0px, rgba(255,26,61,.025) 1px, transparent 1px, transparent 3px);
  color: var(--text);
  font-family: var(--font-body);
  min-height:100vh;
  -webkit-font-smoothing: antialiased;
}
a{color:inherit;text-decoration:none;}
img,video{max-width:100%;display:block;}
button{font-family:inherit;cursor:pointer;}
input,textarea,select{font-family:inherit;}

h1,h2,h3,.font-display{font-family: var(--font-display); text-transform:uppercase; letter-spacing:.02em;}

.container{max-width:1080px;margin:0 auto;padding:0 20px;}

/* ---------- Top Nav ---------- */
.navbar{
  position:sticky; top:0; z-index:50;
  background: rgba(6,6,7,.88);
  backdrop-filter: blur(14px);
  border-bottom:1px solid var(--border);
  box-shadow: 0 1px 0 rgba(255,26,61,.25), 0 8px 24px rgba(0,0,0,.4);
}
.navbar-inner{
  max-width:1080px;margin:0 auto;padding:14px 20px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:700;font-size:22px;letter-spacing:.03em;}
.brand-logo{height:32px;width:32px;flex:none;}
.brand .dot{width:10px;height:10px;border-radius:50%;background:var(--lime);box-shadow:0 0 12px var(--lime);}
.brand span.hl{color:var(--lime);}
.nav-links{display:flex;gap:4px;align-items:center;flex-wrap:wrap;}
.nav-links a{
  padding:8px 14px;border-radius:999px;font-size:14px;font-weight:600;color:var(--text-dim);
  transition:.15s;
}
.nav-links a:hover, .nav-links a.active{background:var(--panel-2);color:var(--text);}
.nav-user{display:flex;align-items:center;gap:10px;flex:none;}
.nav-user-link{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;white-space:nowrap;}
.nav-toggle{display:none;background:none;border:1px solid var(--border);border-radius:10px;color:var(--text);width:40px;height:40px;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 20px;border-radius:12px;border:1px solid transparent;
  font-weight:700;font-size:14px;letter-spacing:.01em;transition:.15s;
}
.btn-primary{background:var(--lime);color:#fff;box-shadow:0 0 0 1px rgba(255,26,61,.4), 0 6px 20px rgba(255,26,61,.25);}
.btn-primary:hover{filter:brightness(1.12);transform:translateY(-1px);box-shadow:0 0 0 1px rgba(255,26,61,.6), 0 8px 26px rgba(255,26,61,.45);}
.btn-outline{background:transparent;border-color:var(--border);color:var(--text);}
.btn-outline:hover{border-color:var(--lime);color:var(--lime);box-shadow:0 0 14px rgba(255,26,61,.25);}
.btn-pink{background:var(--pink);color:#fff;}
.btn-pink:hover{filter:brightness(1.1);box-shadow:0 6px 20px rgba(255,91,31,.35);}
.btn-sm{padding:7px 14px;font-size:12.5px;border-radius:10px;}
.btn-block{width:100%;}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none;}

/* ---------- Cards / Panels ---------- */
.panel{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);}
.panel-pad{padding:20px;}

.badge{
  display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;
  font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
}
.badge-lime{background:rgba(255,26,61,.14);color:var(--lime);}
.badge-pink{background:rgba(255,91,31,.14);color:var(--pink);}
.badge-cyan{background:rgba(228,230,234,.12);color:var(--cyan);}
.badge-gold{background:rgba(255,176,32,.14);color:var(--gold);}
.badge-purple{background:rgba(255,26,61,.1);color:#ff6b7f;}

.verified-tick{
  display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;border-radius:50%;background:var(--cyan);color:#08111a;
  font-size:10px;flex:none;
}

.avatar{
  width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:700;color:#fff;flex:none;font-size:16px;
}
.avatar-sm{width:30px;height:30px;font-size:12px;}
.avatar-lg{width:64px;height:64px;font-size:24px;}

/* ---------- Hero (votación) ---------- */
.hero{padding:64px 0 30px;text-align:center;position:relative;}
.hero-badge{width:92px;height:92px;margin:0 auto 18px;filter:drop-shadow(0 0 24px rgba(255,26,61,.35));}
.hero h1{font-size:clamp(40px,8vw,84px);line-height:.95;margin:10px 0;}
.hero .glitch{position:relative; color:var(--text); text-shadow:0 0 40px rgba(255,26,61,.15);}
.hero .glitch span{color:var(--lime); text-shadow:0 0 18px rgba(255,26,61,.65), 0 0 40px rgba(255,26,61,.35);}
.hero-sub{color:var(--text-dim);font-size:17px;max-width:560px;margin:0 auto;}

.pill-banner{
  display:inline-flex;align-items:center;gap:10px;margin:0 auto 18px;
  background:linear-gradient(90deg, rgba(255,26,61,.12), rgba(255,91,31,.12));
  border:1px solid var(--border);padding:8px 18px;border-radius:999px;font-size:13px;font-weight:700;
}
.pulse-dot{width:8px;height:8px;border-radius:50%;background:var(--pink);animation:pulse 1.4s infinite;}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.4;transform:scale(1.5);}}

.anniv-banner{
  display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
  background:linear-gradient(90deg, rgba(255,176,32,.1), rgba(255,26,61,.1));
  border:1px solid var(--border);border-radius:var(--radius);padding:16px 20px;margin:24px 0;
  text-align:center;
}
.anniv-banner strong{color:var(--gold);}
.countdown{display:flex;gap:10px;justify-content:center;}
.countdown div{background:var(--panel-2);border-radius:10px;padding:8px 12px;text-align:center;min-width:56px;}
.countdown b{display:block;font-family:var(--font-display);font-size:20px;color:var(--gold);}
.countdown small{font-size:10px;color:var(--text-dim);text-transform:uppercase;}

/* ---------- Candidates ---------- */
.candidates-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:30px;
}
.candidate-card{
  background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);
  padding:26px 18px;text-align:center;transition:.18s;position:relative;overflow:hidden;
}
.candidate-card:hover{border-color:var(--lime);transform:translateY(-3px);box-shadow:0 0 24px rgba(255,26,61,.3);}
.candidate-card.voted{border-color:var(--lime);box-shadow:0 0 0 1px var(--lime), 0 0 22px rgba(255,26,61,.35);}
.candidate-card.winner{border-color:var(--gold);box-shadow:0 0 34px rgba(255,176,32,.35);}
.candidate-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg, transparent, var(--lime), transparent);
  opacity:0;transition:.2s;
}
.candidate-card:hover::before, .candidate-card.voted::before{opacity:1;}
.candidate-card.winner::before{background:linear-gradient(90deg, transparent, var(--gold), transparent);opacity:1;}
.candidate-avatar{
  width:76px;height:76px;border-radius:50%;margin:0 auto 14px;
  display:flex;align-items:center;justify-content:center;font-family:var(--font-display);
  font-weight:700;font-size:28px;color:#fff;
}
.candidate-name{font-family:var(--font-display);font-weight:700;font-size:19px;margin-bottom:4px;}
.candidate-bar{height:8px;border-radius:999px;background:var(--panel-2);overflow:hidden;margin:12px 0 6px;}
.candidate-bar > div{height:100%;border-radius:999px;transition:width .6s ease;}
.candidate-pct{font-family:var(--font-display);font-size:22px;font-weight:700;}
.crown{position:absolute;top:10px;right:14px;font-size:20px;}

.vote-status{text-align:center;margin-top:22px;color:var(--text-dim);font-size:14px;}

/* ---------- Auth footer / forms ---------- */
.auth-section{margin:60px 0 40px;}
.auth-toggle{
  display:flex;gap:8px;background:var(--panel-2);padding:5px;border-radius:12px;width:fit-content;margin:0 auto 20px;
}
.auth-toggle button{
  background:transparent;border:none;color:var(--text-dim);padding:9px 18px;border-radius:9px;font-weight:700;font-size:13px;
}
.auth-toggle button.active{background:var(--lime);color:#fff;}
.auth-card{max-width:400px;margin:0 auto;}
.field{margin-bottom:14px;}
.field label{display:block;font-size:12.5px;color:var(--text-dim);margin-bottom:6px;font-weight:600;}
.field input,.field textarea,.field select{
  width:100%;padding:11px 13px;border-radius:10px;border:1px solid var(--border);
  background:var(--bg-soft);color:var(--text);font-size:14px;
}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--lime);}
.form-error{background:rgba(255,92,92,.1);border:1px solid rgba(255,92,92,.3);color:#ffb3b3;padding:10px 12px;border-radius:10px;font-size:13px;margin-bottom:14px;display:none;}
.form-msg-ok{background:rgba(255,26,61,.1);border:1px solid rgba(255,26,61,.3);color:var(--lime);padding:10px 12px;border-radius:10px;font-size:13px;margin-bottom:14px;display:none;}

/* ---------- Feed ---------- */
.page-header{padding:34px 0 10px;}
.page-header h1{font-size:34px;margin:4px 0 6px;}
.page-header p{color:var(--text-dim);margin:0;font-size:14px;}

.stories-row{display:flex;gap:14px;overflow-x:auto;padding:16px 0 20px;}
.story-bubble{flex:none;width:74px;text-align:center;}
.story-ring{
  width:64px;height:64px;border-radius:50%;padding:3px;
  background:conic-gradient(from 0deg, var(--lime), var(--pink), var(--cyan), var(--lime));
  margin:0 auto 6px;
}
.story-ring.add{background:var(--panel-2);}
.story-ring-inner{
  width:100%;height:100%;border-radius:50%;background:var(--bg);display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.story-ring-inner img,.story-ring-inner video{width:100%;height:100%;object-fit:cover;}
.story-bubble span{font-size:11px;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;}

.composer{padding:16px;margin-bottom:20px;}
.composer textarea{width:100%;background:transparent;border:none;color:var(--text);font-size:15px;resize:vertical;min-height:54px;}
.composer textarea:focus{outline:none;}
.composer-actions{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--border);padding-top:12px;margin-top:8px;flex-wrap:wrap;gap:10px;}
.composer-tools{display:flex;gap:6px;}
.tool-btn{width:38px;height:38px;border-radius:10px;background:var(--panel-2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--text-dim);font-size:16px;}
.tool-btn:hover{color:var(--lime);border-color:var(--lime);}
.tool-btn.recording{background:rgba(255,92,92,.15);color:var(--danger);border-color:var(--danger);animation:pulse 1s infinite;}
.media-preview{margin-top:10px;position:relative;max-width:280px;}
.media-preview .rm{position:absolute;top:6px;right:6px;background:#000a;border-radius:50%;width:24px;height:24px;border:none;color:#fff;}

.post{padding:16px;margin-bottom:16px;}
.post-head{display:flex;gap:10px;align-items:center;}
.post-author{display:flex;align-items:center;gap:6px;font-weight:700;font-size:14.5px;}
.post-time{color:var(--text-dim);font-size:12px;}
.post-text{margin:12px 0;font-size:14.5px;line-height:1.5;white-space:pre-wrap;}
.post-media{border-radius:12px;overflow:hidden;margin:10px 0;border:1px solid var(--border);}
.post-media img,.post-media video{width:100%;max-height:520px;object-fit:cover;}
.post-actions{display:flex;gap:18px;border-top:1px solid var(--border);padding-top:10px;margin-top:6px;}
.post-action{display:flex;align-items:center;gap:6px;color:var(--text-dim);font-size:13px;background:none;border:none;font-weight:600;}
.post-action:hover{color:var(--lime);}
.post-action.liked{color:var(--pink);}
.comments-box{margin-top:12px;border-top:1px solid var(--border);padding-top:10px;display:none;}
.comment{display:flex;gap:8px;margin-bottom:10px;font-size:13.5px;}
.comment b{margin-right:4px;}
.comment-form{display:flex;gap:8px;margin-top:10px;}
.comment-form input{flex:1;background:var(--bg-soft);border:1px solid var(--border);border-radius:999px;padding:9px 14px;color:var(--text);font-size:13px;}

/* ---------- Grids: vault / eventos / torneos ---------- */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}

.vault-card{overflow:hidden;}
.vault-card .media{aspect-ratio:4/3;background:var(--panel-2);overflow:hidden;}
.vault-card .media img,.vault-card .media video{width:100%;height:100%;object-fit:cover;}
.vault-card .media.vault-audio{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:linear-gradient(135deg, rgba(255,26,61,.1), rgba(255,176,32,.08));padding:16px;}
.vault-card .media.vault-audio .vault-audio-icon{font-size:34px;}
.vault-card .media.vault-audio audio{width:100%;}
.vault-card .body{padding:14px;}
.vault-card .body .badge{margin-bottom:8px;}
.vault-card h3{font-size:15px;margin:0 0 4px;text-transform:none;font-family:var(--font-body);font-weight:700;}
.vault-card p{color:var(--text-dim);font-size:13px;margin:0 0 8px;line-height:1.4;}
.vault-meta{display:flex;justify-content:space-between;align-items:center;font-size:11.5px;color:var(--text-dim);}

.event-card{padding:18px;display:flex;gap:16px;align-items:flex-start;}
.event-date-box{
  flex:none;width:64px;text-align:center;background:var(--panel-2);border-radius:12px;padding:10px 6px;
}
.event-date-box b{display:block;font-family:var(--font-display);font-size:24px;color:var(--lime);}
.event-date-box span{font-size:10.5px;color:var(--text-dim);text-transform:uppercase;}
.event-card.anniv{border-color:var(--gold);background:linear-gradient(135deg, rgba(255,207,77,.08), transparent);}
.event-card.anniv .event-date-box b{color:var(--gold);}

.tournament-card{padding:20px;}
.tournament-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;flex-wrap:wrap;}
.tournament-game{color:var(--text-dim);font-size:13px;margin:2px 0 10px;}
.participants-row{display:flex;gap:-8px;margin-top:10px;}
.participants-row .avatar{margin-right:-10px;border:2px solid var(--panel);}

.empty-state{text-align:center;padding:50px 20px;color:var(--text-dim);}
.empty-state .icon{font-size:40px;margin-bottom:10px;}

.section-title{display:flex;justify-content:space-between;align-items:center;margin:34px 0 16px;}
.section-title h2{font-size:22px;margin:0;}

.footer{
  padding:44px 0 36px;margin-top:40px;text-align:center;color:var(--text-dim);font-size:13px;
  display:flex;flex-direction:column;align-items:center;gap:16px;
  border-top:1px solid var(--border);position:relative;
}
.footer::before{
  content:'';position:absolute;top:-1px;left:50%;transform:translateX(-50%);
  width:140px;height:2px;background:linear-gradient(90deg, transparent, var(--lime), var(--pink), transparent);
}
.footer-brand{display:flex;align-items:center;gap:10px;}
.footer-badge{height:30px;width:auto;filter:drop-shadow(0 0 8px rgba(255,26,61,.3));}
.footer-divider{width:1px;height:24px;background:var(--border);}
.footer-credit{display:flex;align-items:center;gap:9px;color:var(--text-dim);font-size:12.5px;opacity:.85;transition:.15s;}
.footer-credit:hover{opacity:1;}
.surper-logo{height:18px;width:auto;filter:brightness(0) invert(1);opacity:.9;}
.footer-links{display:flex;gap:16px;font-size:12px;}
.footer-links a{color:var(--text-dim);}
.footer-links a:hover{color:var(--lime);}
.footer-copy{font-size:11.5px;color:var(--text-dim);opacity:.55;}

.tab-switch{display:flex;gap:6px;background:var(--panel-2);padding:5px;border-radius:12px;width:fit-content;margin-bottom:18px;}
.tab-switch button{background:transparent;border:none;color:var(--text-dim);padding:8px 16px;border-radius:9px;font-weight:700;font-size:12.5px;}
.tab-switch button.active{background:var(--lime);color:#fff;}

.modal-overlay{
  position:fixed;inset:0;background:rgba(4,6,10,.7);backdrop-filter:blur(4px);
  display:none;align-items:center;justify-content:center;z-index:100;padding:20px;
}
.modal-overlay.open{display:flex;}
.modal{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);max-width:460px;width:100%;padding:24px;max-height:88vh;overflow:auto;}
.modal-close{float:right;background:none;border:none;color:var(--text-dim);font-size:20px;}

.checklist{list-style:none;padding:0;margin:12px 0;}
.checklist li{display:flex;gap:8px;font-size:13.5px;color:var(--text-dim);margin-bottom:6px;}
.checklist li:before{content:"▸";color:var(--lime);}

/* ---------- Modo PC (pantallas grandes) ---------- */
@media (min-width: 1280px){
  .container{max-width:1240px;}
  .navbar-inner{max-width:1240px;}
  .candidates-grid{grid-template-columns:repeat(6,1fr);gap:14px;}
  .grid-3{grid-template-columns:repeat(4,1fr);}
  .hero h1{font-size:clamp(56px,6vw,104px);}
}

/* ---------- Responsive ---------- */
@media (max-width: 860px){
  .candidates-grid{grid-template-columns:repeat(2,1fr);}
  .grid-3{grid-template-columns:repeat(2,1fr);}
}
@media (max-width: 640px){
  .navbar-inner{padding:12px 16px;gap:10px;}
  .nav-links{display:none;position:absolute;top:60px;left:0;right:0;background:var(--bg-soft);flex-direction:column;padding:12px;border-bottom:1px solid var(--border);z-index:60;}
  .nav-links.open{display:flex;}
  .nav-links a{padding:12px 14px;}
  .nav-toggle{display:block;}
  .brand{font-size:18px;gap:8px;}
  .brand-logo{height:28px;width:28px;}
  .container{padding:0 16px;}
  .candidates-grid{grid-template-columns:1fr 1fr;gap:12px;}
  .grid-2{grid-template-columns:1fr;}
  .grid-3{grid-template-columns:1fr;}
  .hero{padding:36px 0 16px;}
  .hero-badge{width:72px;height:72px;}
  .event-card{flex-direction:column;}
  .event-card .event-date-box{align-self:flex-start;}
  .section-title{flex-wrap:wrap;gap:10px;}
  .page-header h1{font-size:26px;}
  .modal{padding:18px;}
  .tournament-head{flex-direction:column;align-items:flex-start;}
  .composer-actions{flex-direction:column;align-items:stretch;}
  .composer-tools{justify-content:center;}
}
@media (max-width: 480px){
  .nav-username{display:none;}
  .footer-links{flex-wrap:wrap;justify-content:center;gap:10px 16px;}
  .countdown div{min-width:48px;padding:6px 8px;}
  .countdown b{font-size:17px;}
}
@media (max-width: 420px){
  .candidates-grid{grid-template-columns:1fr;}
  .brand-text .hl{display:none;}
}