/* ====================================================================
   DID Awards CSS Framework (global)
==================================================================== */

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

/* Variables */
:root{
  --primary-dark:#180b41;--primary-medium:#3c2e7a;--primary-light:#ddddfe;
  --accent-dark:#93093d;--accent-medium:#ff6798;--accent-light:#e80e49;
  --white:#ffffff;--text-primary:#ffffff;--text-secondary:rgba(255,255,255,0.8);
  --text-tertiary:rgba(255,255,255,0.6);--shadow-primary:rgba(24,11,65,0.3);
  --shadow-accent:rgba(255,103,152,0.2);
}

/* Base */
body{
  font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background:linear-gradient(135deg,var(--primary-dark) 0%,var(--primary-medium) 50%,var(--primary-dark) 100%);
  min-height:100vh;color:var(--text-primary);line-height:1.6;font-weight:400;
}
.code-text{ font-family:'Fira Code','Courier New',monospace; }

/* Navbar (unificada) */
.main-navbar{
  background:linear-gradient(135deg,var(--accent-light) 0%,var(--accent-dark) 100%);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  color:#fff;padding:20px 40px;display:flex;justify-content:space-between;align-items:center;
  box-shadow:0 8px 32px var(--shadow-primary);position:sticky;top:0;z-index:1000;
  border-bottom:1px solid rgba(221,221,254,0.1);
}
.navbar-brand{
  font-size:1.75rem;font-weight:700;letter-spacing:-0.02em;
  background:linear-gradient(135deg,var(--primary-light),var(--white));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  font-family:'Fira Code',monospace;
}
.navbar-brand::before{content:'<';color:var(--accent-medium);margin-right:5px;}
.navbar-brand::after{content:'>';color:var(--accent-medium);margin-left:5px;}

.nav-menu{display:flex;list-style:none;gap:30px;align-items:center;}
.nav-menu li{border-radius:8px;transition:all .3s ease;}
.nav-menu li:hover{background:rgba(255,255,255,.1);transform:translateY(-2px);}
.nav-menu li.active{background:rgba(255,255,255,.15);box-shadow:0 4px 12px rgba(255,103,152,.3);}
.nav-menu a{
  color:#fff !important; text-decoration:none; display:inline-block; padding:8px 16px;
  font-weight:500; font-family:'Fira Code',monospace; font-size:.9rem;
}
.nav-menu a:visited{ color:#fff !important; }

/* Secciones / layout */
.page-section{min-height:calc(100vh - 80px);animation:fadeIn .6s cubic-bezier(.16,1,.3,1);}
.content{padding:60px 40px;max-width:1400px;margin:0 auto;}
.section-header{text-align:center;margin-bottom:60px;}
.section-header h2{
  font-size:3rem;font-weight:700;margin-bottom:16px;
  background:linear-gradient(135deg,var(--accent-medium),var(--accent-light));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  font-family:'Fira Code',monospace;
}
.section-header p{font-size:1.2rem;color:var(--text-secondary);max-width:600px;margin:0 auto;}

.hero{
  background:linear-gradient(135deg,var(--accent-light) 0%,var(--accent-dark) 100%);
  color:var(--text-primary);padding:120px 40px;text-align:center;position:relative;overflow:hidden;
}
.hero::before{
  content:'';position:absolute;inset:0;
  background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100" fill="%23ffffff" opacity="0.05"><path d="M0,0v46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1059,4.37,1000,0Z"/></svg>') repeat-x;
  background-size:1000px 100px;animation:wave 20s linear infinite;
}
.hero h1{font-size:4.5rem;font-weight:700;margin-bottom:16px;letter-spacing:-0.04em;position:relative;z-index:2;font-family:'Fira Code',monospace;}
.hero p{font-size:1.25rem;opacity:.9;font-weight:300;position:relative;z-index:2;margin-bottom:30px;}
.hero .hero-cta{margin:10px;}

.news-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:30px;margin:40px 0;perspective:1000px;}
.news-card{position:relative;background:rgba(221,221,254,.08);border:2px solid rgba(221,221,254,.1);border-radius:20px;padding:0;backdrop-filter:blur(10px);transition:all .4s cubic-bezier(0.34, 1.56, 0.64, 1);overflow:hidden;cursor:pointer;will-change:transform;}
.news-card:hover{transform:translateY(-4px);border-color:var(--accent-medium);box-shadow:0 20px 40px var(--shadow-accent);}
.news-card:hover .card-glow{opacity:0.5;}
.news-card .card-glow{position:absolute;inset:-100%;background:conic-gradient(from 180deg at 50% 50%,rgba(255,103,152,0) 0deg,var(--accent-medium) 90deg,rgba(255,103,152,0) 180deg,var(--accent-light) 270deg,rgba(255,103,152,0) 360deg);opacity:0;transition:opacity 0.3s ease;animation:rotate 4s linear infinite;pointer-events:none;z-index:1;}
.news-image{position:relative;width:100%;height:200px;overflow:hidden;z-index:2;}
.news-photo{width:100%;height:100%;object-fit:cover;transition:transform .3s ease;}
.news-video{object-fit:cover;}
.news-card:hover .news-photo{transform:scale(1.05);}
.news-card:hover .news-video{transform:scale(1.08);}
.news-content{position:relative;padding:30px;z-index:2;}
.news-card h3{font-size:1.5rem;margin-bottom:16px;color:var(--accent-medium);font-family:'Fira Code',monospace;}
.news-date{color:var(--text-tertiary);font-size:.9rem;margin-bottom:12px;font-family:'Fira Code',monospace;}
.news-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--accent-medium);
  text-decoration:none;
  font-family:'Fira Code',monospace;
  font-size:.9rem;
  margin-top:16px;
  padding:8px 16px;
  border:1px solid var(--accent-medium);
  border-radius:8px;
  transition:all .3s ease;
}
.news-link:hover{
  background:var(--accent-medium);
  color:#fff;
  transform:translateY(-2px);
}

.vision-section{
  background:rgba(221,221,254,.05);
  border:2px solid rgba(221,221,254,.1);
  border-radius:20px;
  padding:0;
  margin:40px 0;
  backdrop-filter:blur(10px);
  overflow:hidden;
}
.vision-content{
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:0;
  align-items:center;
  min-height:400px;
}
.vision-text{
  padding:50px 40px;
  text-align:left;
}
.vision-text h3{
  font-size:2.2rem;
  margin-bottom:24px;
  color:var(--accent-medium);
  font-family:'Fira Code',monospace;
  background:linear-gradient(135deg,var(--accent-medium),var(--accent-light));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.vision-text p{
  font-size:1.1rem;
  line-height:1.8;
  color:var(--text-secondary);
  margin-bottom:20px;
}
.vision-text p:last-child{
  margin-bottom:0;
}
.vision-mascot{
  padding:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}
.mascot-container{
  position:relative;
  z-index:2;
  text-align:center;
}
.mascot-image{
  max-width:200px;
  height:auto;
  border-radius:20px;
  box-shadow:0 20px 40px rgba(0,0,0,0.2);
  transition:transform 0.3s ease;
}
.mascot-image:hover{
  transform:scale(1.05) rotate(2deg);
}
.mascot-placeholder{
  background:rgba(255,255,255,0.1);
  border:2px dashed rgba(255,255,255,0.3);
  border-radius:20px;
  padding:40px 20px;
  color:rgba(255,255,255,0.8);
  text-align:center;
  backdrop-filter:blur(10px);
}
.mascot-placeholder .material-icons{
  font-size:4rem;
  margin-bottom:16px;
  opacity:0.7;
}
.mascot-placeholder p{
  font-size:1.1rem;
  font-family:'Fira Code',monospace;
  margin:0;
}

.info-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;margin:40px 0;}
.info-card{background:rgba(221,221,254,.08);border:2px solid rgba(221,221,254,.1);border-radius:20px;padding:32px;backdrop-filter:blur(10px);text-align:center;transition:all .3s ease;}
.info-card:hover{transform:translateY(-4px);border-color:var(--accent-medium);}
.info-card .icon{font-size:3rem;margin-bottom:16px;color:var(--accent-medium);}
.info-card h3{font-size:1.5rem;margin-bottom:16px;color:var(--accent-medium);font-family:'Fira Code',monospace;word-break:break-word;hyphens:auto;}

.categories-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;margin:40px 0;}
.category-card{
  background:linear-gradient(135deg,rgba(221,221,254,.1) 0%,rgba(147,9,61,.1) 100%);
  border:2px solid rgba(221,221,254,.2);border-radius:20px;padding:32px;backdrop-filter:blur(10px);transition:all .3s ease;position:relative;overflow:hidden;
}
.category-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,var(--accent-medium),var(--accent-light));opacity:0;transition:opacity .3s ease;z-index:0;}
.category-card > *{position:relative;z-index:1;}
.category-card:hover{transform:translateY(-4px);border-color:var(--accent-medium);box-shadow:0 20px 40px var(--shadow-accent);}
.category-card:hover::before{opacity:.1;}
.category-card h3{font-size:1.3rem;margin-bottom:12px;color:var(--accent-medium);font-family:'Fira Code',monospace;}

/* Botones y formularios */
.btn{
  background:linear-gradient(135deg,var(--accent-medium) 0%,var(--accent-light) 100%);
  color:#fff;border:none;border-radius:16px;font-size:16px;font-weight:600;cursor:pointer;
  transition:all .3s cubic-bezier(.4,0,.2,1);font-family:'Fira Code',monospace;letter-spacing:-.01em;
  box-shadow:0 8px 24px var(--shadow-accent);padding:16px 32px;text-decoration:none;display:inline-block;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 40px var(--shadow-accent);background:linear-gradient(135deg,var(--accent-light) 0%,var(--accent-medium) 100%);}
.btn-secondary{background:linear-gradient(135deg,var(--primary-medium) 0%,var(--primary-dark) 100%);box-shadow:0 8px 24px var(--shadow-primary);}
.btn-secondary:hover{background:linear-gradient(135deg,var(--primary-dark) 0%,var(--primary-medium) 100%);box-shadow:0 16px 40px var(--shadow-primary);}

.form-group{margin-bottom:28px;}
.form-group label{display:block;margin-bottom:12px;font-weight:600;color:#fff;font-size:.95rem;letter-spacing:-.01em;font-family:'Fira Code',monospace;}
.form-group input,.form-group select,.form-group textarea{
  width:100%;padding:16px 20px;border:2px solid rgba(221,221,254,.15);border-radius:16px;font-size:16px;
  font-family:'Fira Code',sans-serif;transition:all .3s cubic-bezier(.4,0,.2,1);
  background:rgba(221,221,254,.08);backdrop-filter:blur(10px);color:#fff;font-weight:400;
}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{
  outline:none;border-color:var(--accent-medium);background:rgba(221,221,254,.12);transform:translateY(-2px);box-shadow:0 12px 32px var(--shadow-accent);
}
/* Estilo específico para el selector de generación */
#generation-select{
  background:linear-gradient(135deg,rgba(60,46,122,.5) 0%,rgba(24,11,65,.5) 100%);
  border:2px solid var(--accent-medium);
  color:#fff;
  font-family:'Fira Code',monospace;
  font-size:1.1rem;
  padding:18px 20px;
  cursor:pointer;
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ff6798' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 15px center;
  background-size:20px;
  padding-right:50px;
}
#generation-select:hover{
  border-color:var(--accent-light);
  background:linear-gradient(135deg,rgba(60,46,122,.6) 0%,rgba(24,11,65,.6) 100%);
  transform:translateY(-2px);
}
#generation-select:focus{
  outline:none;
  border-color:var(--accent-light);
  box-shadow:0 0 0 3px rgba(255,103,152,.2),0 12px 32px var(--shadow-accent);
}
#generation-select option{
  background:var(--primary-dark);
  color:#fff;
  padding:12px;
  font-family:'Fira Code',monospace;
}

/* Votación - Estilo Game Awards con Carrusel */
.candidate-option{
  background:linear-gradient(135deg,rgba(221,221,254,.08) 0%,rgba(147,9,61,.08) 100%);
  border:2px solid rgba(221,221,254,.15);border-radius:24px;padding:0;margin:0;cursor:pointer;transition:all .4s cubic-bezier(.4,0,.2,1);
  position:relative;backdrop-filter:blur(15px);width:100%;min-height:550px;display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 8px 32px rgba(0,0,0,0.2);
}
.candidate-option:hover{
  transform:translateY(-8px) scale(1.03);border-color:var(--accent-medium);box-shadow:0 32px 64px rgba(255,103,152,0.3);
}
.candidate-option.selected{
  border-color:var(--accent-light);box-shadow:0 32px 64px rgba(255,103,152,0.4);
  background:linear-gradient(135deg,rgba(255,103,152,.1) 0%,rgba(147,9,61,.1) 100%);
}
.candidates-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(380px,1fr));gap:32px;padding:40px 0;max-width:1400px;margin:0 auto;
}
.candidate-name{
  font-weight:700;font-size:1.8rem;color:#fff;margin-bottom:8px;letter-spacing:-0.03em;
  text-shadow:0 2px 8px rgba(0,0,0,0.5);font-family:'Fira Code',monospace;
}
.candidate-description{
  color:rgba(255,255,255,0.85);font-size:1rem;margin-top:12px;line-height:1.6;font-weight:400;
  text-shadow:0 1px 4px rgba(0,0,0,0.5);
}
.candidate-image{
  width:120px;height:120px;border-radius:50%;object-fit:cover;margin-right:24px;border:4px solid var(--accent-medium);
  box-shadow:0 12px 32px rgba(255,103,152,0.4);
}
.candidate-project-image{
  width:100%;height:280px;object-fit:cover;border-radius:0;margin:0;box-shadow:none;
}
.candidate-layout{
  display:flex;align-items:center;padding:32px;position:relative;z-index:2;
}
.candidate-info{
  flex:1;
}
.candidate-header{
  position:relative;top:0;left:0;right:0;overflow:hidden;
}
.candidate-content{
  padding:24px;background:linear-gradient(135deg,rgba(24,11,65,0.9) 0%,rgba(60,46,122,0.9) 100%);
  backdrop-filter:blur(10px);
}

/* Mensajes / Loading */
.success-message,.error-message,.info-message{padding:16px 20px;border-radius:12px;margin:20px 0;font-weight:500;border:none;backdrop-filter:blur(10px);}
.success-message{background:rgba(72,187,120,.15);color:#68d391;border-left:4px solid #68d391;}
.error-message{background:rgba(245,101,101,.15);color:#fc8181;border-left:4px solid #fc8181;}
.info-message{background:rgba(99,179,237,.15);color:#90cdf4;border-left:4px solid #90cdf4;}

.loading{text-align:center;padding:40px;}
.spinner{border:4px solid rgba(221,221,254,.1);border-top:4px solid var(--accent-medium);border-radius:50%;width:48px;height:48px;animation:spin 1s linear infinite;margin:24px auto;}

/* Utilities */
.text-center{text-align:center;} .mt-40{margin-top:40px;} .mb-40{margin-bottom:40px;}

/* Animations */
@keyframes fadeIn{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);}}
@keyframes wave{0%{background-position-x:0;}100%{background-position-x:1000px;}}
@keyframes spin{0%{transform:rotate(0);}100%{transform:rotate(360deg);}}
@keyframes float{0%,100%{transform:translateY(0px);}50%{transform:translateY(-10px);}}

/* ====================================================================
   MATERIAL ICONS
==================================================================== */
.material-icons{
  font-size:1.2em;
  vertical-align:middle;
}
.calendar-btn .material-icons{
  font-size:1.3em;
}
.instagram-link .material-icons{
  font-size:1.1em;
}

/* ====================================================================
   NUEVAS SECCIONES PARA ESTRUCTURA GAME AWARDS
==================================================================== */

/* Anuncio de votaciones */
.voting-announcement{
  background:linear-gradient(135deg,var(--primary-medium) 0%,var(--primary-dark) 100%);
  padding:40px 20px;
  text-align:center;
  border-bottom:1px solid rgba(221,221,254,0.1);
}
.announcement-content h2{
  font-size:2.5rem;
  font-weight:700;
  color:var(--accent-medium);
  font-family:'Fira Code',monospace;
  letter-spacing:-0.02em;
  margin:0;
}

/* Cuenta regresiva con shader RGBA */
.countdown-section{
  background:linear-gradient(135deg,var(--accent-light) 0%,var(--accent-dark) 100%);
  padding:60px 20px;
  text-align:center;
  position:relative;
  overflow:hidden;
}

/* Shader RGBA background - applied via JavaScript */
.countdown-section::before{
  content:'';
  position:absolute;
  inset:0;
  background:transparent;
  opacity:0.8;
  mix-blend-mode:multiply;
}
.countdown-container{
  position:relative;
  z-index:2;
}
.countdown-display{
  display:flex;
  justify-content:center;
  gap:40px;
  max-width:800px;
  margin:0 auto;
}
.countdown-item{
  background:rgba(255,255,255,0.1);
  border:2px solid rgba(255,255,255,0.2);
  border-radius:20px;
  padding:30px 20px;
  backdrop-filter:blur(10px);
  min-width:120px;
  transition:all .3s ease;
}
.countdown-item:hover{
  transform:translateY(-4px);
  border-color:var(--primary-light);
  box-shadow:0 20px 40px rgba(221,221,254,0.3);
}
.countdown-number{
  display:block;
  font-size:3rem;
  font-weight:700;
  color:#fff;
  font-family:'Fira Code',monospace;
  line-height:1;
  margin-bottom:8px;
}
.countdown-label{
  font-size:1rem;
  color:rgba(255,255,255,0.8);
  font-family:'Fira Code',monospace;
  text-transform:uppercase;
  letter-spacing:1px;
}

/* Banner principal */
.main-banner{
  background:linear-gradient(rgba(24,11,65,0.8),rgba(60,46,122,0.8)),url('img/keyimg.png');
  background-size:cover;
  background-position:center;
  background-attachment:fixed;
  min-height:80vh;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
}
.banner-content{
  text-align:center;
  color:#fff;
  position:relative;
  z-index:2;
  max-width:800px;
  padding:0 40px;
}
.banner-logo{
  margin-bottom:60px;
}
.logo-brackets{
  font-size:6rem;
  color:var(--accent-medium);
  font-family:'Fira Code',monospace;
  font-weight:700;
}
.logo-text{
  font-size:6rem;
  color:#fff;
  font-family:'Fira Code',monospace;
  font-weight:700;
  margin:0 20px;
}
.logo-awards{
  font-size:2.5rem;
  color:var(--primary-light);
  font-family:'Inter',sans-serif;
  font-weight:600;
  margin-left:30px;
  letter-spacing:-0.02em;
}
.event-date{
  margin-bottom:40px;
}
.event-date h1{
  font-size:4rem;
  font-weight:700;
  color:#fff;
  margin-bottom:16px;
  font-family:'Fira Code',monospace;
}
.event-date p{
  font-size:1.5rem;
  color:rgba(255,255,255,0.9);
  font-weight:400;
  margin:0;
}
.calendar-btn{
  background:linear-gradient(135deg,var(--accent-medium) 0%,var(--accent-light) 100%);
  color:#fff;
  border:none;
  border-radius:16px;
  font-size:1.2rem;
  font-weight:600;
  cursor:pointer;
  transition:all .3s cubic-bezier(.4,0,.2,1);
  font-family:'Fira Code',monospace;
  letter-spacing:-.01em;
  box-shadow:0 8px 24px var(--shadow-accent);
  padding:20px 40px;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.calendar-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 40px var(--shadow-accent);
  background:linear-gradient(135deg,var(--accent-light) 0%,var(--accent-medium) 100%);
}

/* Sección de noticias actualizada */
.news-section{
  padding:80px 0;
  background:linear-gradient(135deg,var(--primary-dark) 0%,var(--primary-medium) 50%,var(--primary-dark) 100%);
}

/* Footer */
.main-footer{
  background:linear-gradient(135deg,var(--primary-dark) 0%,var(--primary-medium) 100%);
  padding:60px 40px 40px;
  border-top:1px solid rgba(221,221,254,0.1);
  text-align:center;
}
.footer-content{
  max-width:1200px;
  margin:0 auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:30px;
}
.footer-logo{
  display:flex;
  align-items:center;
  gap:10px;
}
.footer-logo .logo-brackets{
  font-size:2rem;
  color:var(--accent-medium);
  font-family:'Fira Code',monospace;
  font-weight:700;
}
.footer-logo .logo-text{
  font-size:2rem;
  color:var(--primary-light);
  font-family:'Fira Code',monospace;
  font-weight:700;
}
.footer-social{
  display:flex;
  align-items:center;
}
.instagram-link{
  color:var(--text-primary);
  text-decoration:none;
  font-size:1.2rem;
  font-weight:500;
  padding:12px 24px;
  border:2px solid rgba(221,221,254,0.2);
  border-radius:12px;
  transition:all .3s ease;
  font-family:'Fira Code',monospace;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.instagram-link:hover{
  border-color:var(--accent-medium);
  background:rgba(255,103,152,0.1);
  transform:translateY(-2px);
}

/* Sección de Sponsors */
.sponsors-section{
  background:var(--primary-medium);
  border-top:1px solid rgba(221,221,254,0.1);
  padding:40px 0;
  margin-top:40px;
}
.sponsors-content{
  max-width:1200px;
  margin:0 auto;
  padding:0 40px;
  text-align:center;
}
.sponsors-content h3{
  color:var(--text-primary);
  font-size:1.5rem;
  font-weight:600;
  margin-bottom:30px;
  font-family:'Fira Code',monospace;
}
.sponsors-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:30px;
  align-items:center;
  justify-items:center;
}
.sponsor-item{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(221,221,254,0.05);
  border:1px solid rgba(221,221,254,0.1);
  border-radius:12px;
  transition:all .3s ease;
}
.sponsor-item:hover{
  background:rgba(255,103,152,0.1);
  border-color:var(--accent-medium);
  transform:translateY(-2px);
}
.sponsor-logo{
  max-width:100%;
  height:120px;
  object-fit:contain;
  filter:brightness(0.8);
  transition:filter .3s ease;
}
.sponsor-item:hover .sponsor-logo{
  filter:brightness(1);
}

/* Responsive */
@media (max-width:1024px){
  .content{padding:50px 30px;}
  .banner-content{max-width:700px;padding:0 30px;}
  .logo-brackets,.logo-text{font-size:5rem;}
  .logo-awards{font-size:2.2rem;}
  .event-date h1{font-size:3.5rem;}
  .countdown-display{gap:30px;}
  .countdown-item{padding:25px 18px;min-width:100px;}
}

@media (max-width:768px){
  .main-navbar{padding:16px 20px;flex-direction:column;gap:16px;}
  .nav-menu{gap:16px;flex-wrap:wrap;justify-content:center;}
  .nav-menu a{padding:6px 12px;font-size:0.85rem;}
  
  .content{padding:40px 20px;}
  .section-header h2{font-size:2.5rem;}
  .section-header p{font-size:1.1rem;}
  
  /* Hero y banner */
  .hero{padding:60px 20px;}
  .hero h1{font-size:2.8rem;}
  .main-banner{min-height:70vh;padding:40px 0;}
  .banner-content{max-width:100%;padding:0 20px;}
  .logo-brackets,.logo-text{font-size:3.5rem;}
  .logo-awards{font-size:1.6rem;margin-left:10px;}
  .event-date h1{font-size:2.8rem;}
  .event-date p{font-size:1.1rem;}
  .calendar-btn{font-size:0.95rem;padding:14px 28px;}
  
  /* Anuncios y countdown */
  .announcement-content h2{font-size:1.8rem;}
  .countdown-display{gap:15px;flex-wrap:wrap;}
  .countdown-item{padding:15px 12px;min-width:70px;}
  .countdown-number{font-size:1.8rem;}
  .countdown-label{font-size:0.85rem;}
  
  /* Grids */
  .news-grid,.info-cards,.categories-grid{grid-template-columns:1fr;gap:20px;}
  .news-card{padding:0;}
  .news-content{padding:20px;}
  .news-image{height:180px;}
  .news-photo{height:100%;}
  
  /* Votación */
  .candidate-option{width:100%;margin:8px 0;min-height:450px;}
  .nominee-card{min-height:400px;}
  .candidates-grid{grid-template-columns:1fr;gap:20px;padding:20px 0;}
  .candidate-project-image{height:180px;}
  .candidate-content{margin-top:0;padding:20px;}
  .candidate-layout{padding:20px;flex-direction:column;text-align:center;}
  .candidate-image{width:80px;height:80px;margin:0 0 12px 0;}
  .candidate-name{font-size:1.3rem;}
  .candidate-description{font-size:0.95rem;}
  
  /* Footer */
  .footer-content{flex-direction:column;text-align:center;gap:20px;}
  .footer-logo .logo-brackets,.footer-logo .logo-text{font-size:1.3rem;}
  .instagram-link{font-size:0.9rem;padding:8px 16px;}
  
  /* Sponsors */
  .sponsors-section{padding:30px 0;margin-top:30px;}
  .sponsors-content{padding:0 20px;}
  .sponsors-content h3{font-size:1.2rem;margin-bottom:20px;}
  .sponsors-grid{grid-template-columns:repeat(2,1fr);gap:15px;}
  .sponsor-item{padding:12px;}
  .sponsor-logo{height:90px;}
  
  /* Visión */
  .vision-content{grid-template-columns:1fr;min-height:auto;}
  .vision-text{padding:30px 20px;text-align:center;}
  .vision-text h3{font-size:1.6rem;}
  .vision-text p{font-size:1rem;}
  .vision-mascot{padding:30px 20px;}
  .mascot-image{max-width:150px;}
  
  /* Info cards responsive */
  .info-card h3{font-size:1.4rem;line-height:1.2;word-break:break-word;}
}

@media (max-width:480px){
  .main-navbar{padding:12px 16px;}
  .nav-menu{gap:12px;}
  .nav-menu a{padding:4px 8px;font-size:0.8rem;}
  
  .content{padding:30px 16px;}
  .section-header h2{font-size:2rem;}
  .section-header p{font-size:1rem;}
  
  /* Hero y banner */
  .hero{padding:40px 16px;}
  .hero h1{font-size:2.2rem;}
  .main-banner{min-height:60vh;padding:30px 0;}
  .banner-content{padding:0 16px;}
  .logo-brackets,.logo-text{font-size:2.8rem;}
  .logo-awards{font-size:1.3rem;margin-left:8px;}
  .event-date h1{font-size:2.2rem;}
  .event-date p{font-size:1rem;}
  .calendar-btn{font-size:0.9rem;padding:12px 24px;}
  
  /* Anuncios y countdown */
  .announcement-content h2{font-size:1.5rem;}
  .countdown-display{gap:10px;}
  .countdown-item{padding:12px 8px;min-width:60px;}
  .countdown-number{font-size:1.5rem;}
  .countdown-label{font-size:0.75rem;}
  
  /* News */
  .news-image{height:150px;}
  .news-content{padding:16px;}
  .news-card h3{font-size:1.2rem;}
  .news-link{font-size:0.8rem;padding:6px 12px;}
  
  /* Info cards */
  .info-card{padding:24px;}
  .info-card .icon{font-size:2.5rem;}
  .info-card h3{font-size:1.3rem;line-height:1.3;word-break:break-word;}
  
  /* Visión */
  .vision-text{padding:24px 16px;}
  .vision-text h3{font-size:1.4rem;}
  .vision-text p{font-size:0.95rem;}
  .vision-mascot{padding:24px 16px;}
  .mascot-image{max-width:120px;}
  .mascot-placeholder{padding:30px 15px;}
  .mascot-placeholder .material-icons{font-size:3rem;}
  
  /* Footer */
  .footer-logo .logo-brackets,.footer-logo .logo-text{font-size:1.1rem;}
  .instagram-link{font-size:0.85rem;padding:6px 12px;}
  
  /* Sponsors */
  .sponsors-content{padding:0 16px;}
  .sponsors-content h3{font-size:1.1rem;}
  .sponsors-grid{grid-template-columns:1fr;gap:12px;}
  .sponsor-item{padding:10px;}
  .sponsor-logo{height:80px;}
}

/* ====================================================================
   ESTILOS RESPONSIVOS PARA JUEGO
==================================================================== */

/* Estilos base del juego */
#game-container {
  max-width: 900px;
  margin: 40px auto;
  padding: 30px;
  background: linear-gradient(135deg, rgba(221,221,254,0.1) 0%, rgba(147,9,61,0.1) 100%);
  border: 2px solid rgba(221,221,254,0.2);
  border-radius: 24px;
  backdrop-filter: blur(15px);
}

#gameCanvas {
  border: 3px solid var(--accent-medium);
  border-radius: 12px;
  display: block;
  margin: 0 auto;
  background: linear-gradient(to bottom, #0a0520 0%, #1a0f3a 100%);
  cursor: pointer;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  max-width: 100%;
  height: auto;
}

.game-controls {
  text-align: center;
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.game-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 15px;
  margin-bottom: 20px;
}

.info-box {
  background: rgba(60,46,122,0.5);
  padding: 15px;
  border-radius: 12px;
  border: 1px solid rgba(255,103,152,0.3);
  text-align: center;
}

.info-box label {
  display: block;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.7);
  margin-bottom: 5px;
  font-family: 'Fira Code', monospace;
}

.info-box span {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--accent-medium);
  font-family: 'Fira Code', monospace;
}

.game-instructions {
  background: rgba(255,103,152,0.1);
  border: 2px solid rgba(255,103,152,0.3);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  text-align: center;
}

.game-instructions h3 {
  color: var(--accent-medium);
  margin-bottom: 10px;
  font-family: 'Fira Code', monospace;
}

.game-instructions p {
  color: rgba(255,255,255,0.9);
  margin: 5px 0;
}

/* Responsive para tablets */
@media (max-width: 1024px) {
  #game-container {
    max-width: 95%;
    margin: 30px auto;
    padding: 20px;
  }
  
  #gameCanvas {
    width: 100%;
    height: 300px;
  }
  
  .game-info {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  
  .info-box {
    padding: 12px;
  }
  
  .info-box span {
    font-size: 1.5rem;
  }
  
  .game-controls {
    gap: 10px;
  }
  
  .game-controls .btn {
    padding: 12px 20px;
    font-size: 0.9rem;
  }
}

/* Responsive para móviles */
@media (max-width: 768px) {
  #game-container {
    max-width: 100%;
    margin: 20px auto;
    padding: 15px;
    border-radius: 16px;
  }
  
  #gameCanvas {
    width: 100%;
    height: 250px;
    border-radius: 8px;
  }
  
  .game-info {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 15px;
  }
  
  .info-box {
    padding: 10px;
    border-radius: 8px;
  }
  
  .info-box label {
    font-size: 0.8rem;
  }
  
  .info-box span {
    font-size: 1.3rem;
  }
  
  .game-instructions {
    padding: 15px;
    margin-bottom: 15px;
    border-radius: 8px;
  }
  
  .game-instructions h3 {
    font-size: 1.1rem;
  }
  
  .game-instructions p {
    font-size: 0.9rem;
  }
  
  .game-controls {
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }
  
  .game-controls .btn {
    width: 100%;
    max-width: 200px;
    padding: 10px 16px;
    font-size: 0.85rem;
  }
}

/* Responsive para móviles pequeños */
@media (max-width: 480px) {
  #game-container {
    margin: 15px auto;
    padding: 12px;
  }
  
  #gameCanvas {
    height: 200px;
  }
  
  .game-info {
    gap: 8px;
  }
  
  .info-box {
    padding: 8px;
  }
  
  .info-box label {
    font-size: 0.75rem;
  }
  
  .info-box span {
    font-size: 1.1rem;
  }
  
  .game-instructions {
    padding: 12px;
  }
  
  .game-instructions h3 {
    font-size: 1rem;
  }
  
  .game-instructions p {
    font-size: 0.8rem;
  }
  
  .game-controls .btn {
    padding: 8px 12px;
    font-size: 0.8rem;
  }
  
}

/* ====================================================================
   NUEVOS ESTILOS PARA SECCIÓN INFO MEJORADA
==================================================================== */

/* Sección de Visión Rediseñada */
.vision-section-new{
  position:relative;
  background:linear-gradient(135deg,rgba(60,46,122,0.3) 0%,rgba(24,11,65,0.5) 100%);
  border:2px solid rgba(221,221,254,0.15);
  border-radius:32px;
  padding:0;
  margin:50px 0 80px;
  overflow:hidden;
  backdrop-filter:blur(20px);
}

.vision-bg-pattern{
  position:absolute;
  inset:-50%;
  background:
    linear-gradient(45deg, transparent 48%, rgba(255,103,152,0.05) 49%, rgba(255,103,152,0.05) 51%, transparent 52%),
    linear-gradient(-45deg, transparent 48%, rgba(221,221,254,0.05) 49%, rgba(221,221,254,0.05) 51%, transparent 52%);
  background-size:40px 40px;
  animation:patternMove 20s linear infinite;
  pointer-events:none;
}

@keyframes patternMove{
  0%{transform:translate(0,0);}
  100%{transform:translate(40px,40px);}
}

.vision-content-new{
  position:relative;
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:60px;
  align-items:center;
  padding:60px;
  min-height:500px;
}

.vision-text-new{
  position:relative;
  z-index:2;
}

.vision-icon-float{
  display:inline-block;
  background:linear-gradient(135deg,var(--accent-medium),var(--accent-light));
  width:80px;
  height:80px;
  border-radius:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:30px;
  box-shadow:0 20px 40px rgba(255,103,152,0.4);
  animation:float 3s ease-in-out infinite;
  transform-origin:center;
}

.vision-icon-float .material-icons{
  font-size:3rem;
  color:#fff;
}

.vision-text-new h3{
  font-size:2.8rem;
  margin-bottom:30px;
  color:#fff;
  font-family:'Fira Code',monospace;
  letter-spacing:-0.02em;
  text-shadow:0 4px 12px rgba(0,0,0,0.3);
}

.vision-text-new p{
  font-size:1.15rem;
  line-height:1.9;
  color:rgba(255,255,255,0.9);
  margin-bottom:24px;
  text-align:justify;
}

.vision-text-new p:last-child{
  margin-bottom:0;
}

.vision-mascot-new{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:2;
}

.mascot-card{
  position:relative;
  background:linear-gradient(135deg,rgba(221,221,254,0.1),rgba(255,103,152,0.1));
  border:2px solid rgba(221,221,254,0.3);
  border-radius:30px;
  padding:40px;
  backdrop-filter:blur(10px);
  transition:all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow:0 30px 60px rgba(0,0,0,0.3);
}

.mascot-card:hover{
  transform:scale(1.05) rotate(-2deg);
  border-color:var(--accent-medium);
  box-shadow:0 40px 80px rgba(255,103,152,0.4);
}

.mascot-glow{
  position:absolute;
  inset:-2px;
  background:linear-gradient(135deg,var(--accent-medium),var(--accent-light));
  border-radius:30px;
  opacity:0;
  transition:opacity 0.3s ease;
  z-index:-1;
  filter:blur(20px);
}

.mascot-card:hover .mascot-glow{
  opacity:0.6;
}

.mascot-image-new{
  max-width:280px;
  height:auto;
  border-radius:20px;
  display:block;
  transition:transform 0.3s ease;
}

.mascot-placeholder-new{
  background:rgba(255,255,255,0.05);
  border:2px dashed rgba(255,255,255,0.3);
  border-radius:20px;
  padding:60px 40px;
  color:rgba(255,255,255,0.7);
  text-align:center;
  min-width:280px;
}

.mascot-placeholder-new .material-icons{
  font-size:5rem;
  margin-bottom:20px;
  opacity:0.5;
}

.mascot-placeholder-new p{
  font-size:1.2rem;
  font-family:'Fira Code',monospace;
  margin:0;
}

/* Info Cards Rediseñadas */
.info-cards-new{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:30px;
  margin:60px 0;
  perspective:1000px;
}

.info-card-new{
  position:relative;
  background:linear-gradient(135deg,rgba(221,221,254,0.08),rgba(147,9,61,0.08));
  border:2px solid rgba(221,221,254,0.2);
  border-radius:24px;
  padding:40px 32px;
  text-align:center;
  transition:all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow:hidden;
  cursor:pointer;
  backdrop-filter:blur(15px);
  will-change:transform;
}

.card-glow{
  position:absolute;
  inset:-100%;
  background:conic-gradient(
    from 180deg at 50% 50%,
    rgba(255,103,152,0) 0deg,
    var(--accent-medium) 90deg,
    rgba(255,103,152,0) 180deg,
    var(--accent-light) 270deg,
    rgba(255,103,152,0) 360deg
  );
  opacity:0;
  transition:opacity 0.3s ease;
  animation:rotate 4s linear infinite;
  pointer-events:none;
}

@keyframes rotate{
  0%{transform:rotate(0deg);}
  100%{transform:rotate(360deg);}
}

.info-card-new:hover .card-glow{
  opacity:0.5;
}

.info-card-new:hover{
  border-color:var(--accent-medium);
  box-shadow:0 30px 60px rgba(255,103,152,0.3);
}

.icon-container{
  position:relative;
  width:80px;
  height:80px;
  margin:0 auto 24px;
  background:linear-gradient(135deg,var(--accent-medium),var(--accent-light));
  border-radius:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 15px 30px rgba(255,103,152,0.4);
  transition:all 0.3s ease;
}

.info-card-new:hover .icon-container{
  transform:translateY(-5px) scale(1.1);
  box-shadow:0 20px 40px rgba(255,103,152,0.5);
}

.icon-container .material-icons{
  font-size:2.5rem;
  color:#fff;
}

.info-card-new h3{
  font-size:1.4rem;
  margin-bottom:16px;
  color:var(--accent-medium);
  font-family:'Fira Code',monospace;
  font-weight:600;
  white-space:nowrap;
}

.card-divider{
  width:60px;
  height:3px;
  background:linear-gradient(90deg,var(--accent-medium),var(--accent-light));
  margin:16px auto;
  border-radius:2px;
  transition:width 0.3s ease;
}

.info-card-new:hover .card-divider{
  width:100px;
}

.info-main{
  font-size:1.2rem;
  color:#fff;
  margin-bottom:12px;
  font-weight:600;
}

.info-detail{
  font-size:1rem;
  color:rgba(255,255,255,0.7);
  line-height:1.6;
  margin:0;
}

/* Responsive para nuevos estilos */
@media (max-width:1024px){
  .vision-content-new{
    grid-template-columns:1fr;
    gap:40px;
    padding:50px 40px;
    min-height:auto;
  }
  
  .vision-text-new{
    text-align:center;
  }
  
  .vision-icon-float{
    margin:0 auto 25px;
  }
  
  .vision-text-new h3{
    font-size:2.3rem;
  }
  
  .mascot-card{
    padding:30px;
  }
  
  .mascot-image-new{
    max-width:220px;
  }
}

@media (max-width:768px){
  .vision-section-new{
    border-radius:24px;
    margin:40px 0 60px;
  }
  
  .vision-content-new{
    padding:40px 30px;
    gap:30px;
  }
  
  .vision-icon-float{
    width:60px;
    height:60px;
    margin-bottom:20px;
  }
  
  .vision-icon-float .material-icons{
    font-size:2.2rem;
  }
  
  .vision-text-new h3{
    font-size:1.9rem;
    margin-bottom:24px;
  }
  
  .vision-text-new p{
    font-size:1rem;
    text-align:left;
    margin-bottom:20px;
  }
  
  .mascot-card{
    padding:25px;
  }
  
  .mascot-image-new{
    max-width:180px;
  }
  
  .info-cards-new{
    grid-template-columns:1fr;
    gap:24px;
    margin:50px 0;
  }
  
  .info-card-new{
    padding:35px 28px;
  }
  
  .icon-container{
    width:70px;
    height:70px;
    margin-bottom:20px;
  }
  
  .icon-container .material-icons{
    font-size:2.2rem;
  }
  
  .info-card-new h3{
    font-size:1.3rem;
  }
}

@media (max-width:480px){
  .vision-section-new{
    border-radius:20px;
    margin:30px 0 50px;
  }
  
  .vision-content-new{
    padding:30px 20px;
    gap:25px;
  }
  
  .vision-icon-float{
    width:50px;
    height:50px;
  }
  
  .vision-icon-float .material-icons{
    font-size:1.8rem;
  }
  
  .vision-text-new h3{
    font-size:1.6rem;
    margin-bottom:20px;
  }
  
  .vision-text-new p{
    font-size:0.95rem;
    margin-bottom:16px;
  }
  
  .mascot-card{
    padding:20px;
  }
  
  .mascot-image-new{
    max-width:150px;
  }
  
  .mascot-placeholder-new{
    padding:40px 25px;
    min-width:auto;
  }
  
  .mascot-placeholder-new .material-icons{
    font-size:3.5rem;
  }
  
  .info-cards-new{
    gap:20px;
    margin:40px 0;
  }
  
  .info-card-new{
    padding:30px 24px;
  }
  
  .icon-container{
    width:60px;
    height:60px;
    margin-bottom:18px;
  }
  
  .icon-container .material-icons{
    font-size:2rem;
  }
  
  .info-card-new h3{
    font-size:1.2rem;
  }
  
  .info-main{
    font-size:1.1rem;
  }
  
  .info-detail{
    font-size:0.95rem;
  }
}

/* ===== SECCIÓN DE CATEGORÍAS ===== */
.categories-section {
  margin: 80px 0;
  padding: 0 20px;
}

.category-type-section {
  margin-bottom: 80px;
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.category-type-section.animate {
  opacity: 1;
  transform: translateY(0);
}

.category-type-header {
  display: flex;
  align-items: center;
  margin-bottom: 40px;
  padding: 30px;
  background: linear-gradient(135deg, rgba(255,103,152,0.1) 0%, rgba(147,9,61,0.1) 100%);
  border: 2px solid rgba(255,103,152,0.2);
  border-radius: 24px;
  backdrop-filter: blur(20px);
  position: relative;
  overflow: hidden;
}

.category-type-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
  animation: shimmer 3s infinite;
}

@keyframes shimmer {
  0% { left: -100%; }
  100% { left: 100%; }
}

.category-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, var(--accent-medium) 0%, var(--accent-light) 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 30px;
  position: relative;
  animation: pulse-glow 2s infinite;
}

@keyframes pulse-glow {
  0%, 100% { 
    box-shadow: 0 0 20px rgba(255,103,152,0.3);
    transform: scale(1);
  }
  50% { 
    box-shadow: 0 0 40px rgba(255,103,152,0.6);
    transform: scale(1.05);
  }
}

.category-icon .material-icons {
  font-size: 2.5rem;
  color: #fff;
  animation: icon-float 3s ease-in-out infinite;
}

@keyframes icon-float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-5px); }
}

.category-type-info h3 {
  color: var(--accent-medium);
  font-size: 2.2rem;
  font-family: 'Fira Code', monospace;
  margin-bottom: 8px;
  font-weight: 700;
}

.category-type-info p {
  color: rgba(255,255,255,0.8);
  font-size: 1.1rem;
  margin: 0;
}

.categories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 25px;
  margin-top: 30px;
}

.category-card {
  opacity: 0;
  transform: translateY(30px) scale(0.9);
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  animation: card-float 4s ease-in-out infinite;
}

.category-card.animate {
  opacity: 1;
  transform: translateY(0) scale(1);
}

@keyframes card-float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-3px); }
}

.category-card-inner {
  background: linear-gradient(135deg, rgba(221,221,254,0.08) 0%, rgba(147,9,61,0.08) 100%);
  border: 2px solid rgba(221,221,254,0.15);
  border-radius: 20px;
  padding: 25px;
  height: 100%;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(15px);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.category-card-inner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255,103,152,0.05) 0%, rgba(147,9,61,0.05) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.category-card:hover .category-card-inner {
  border-color: var(--accent-medium);
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 40px rgba(255,103,152,0.2);
}

.category-card:hover .category-card-inner::before {
  opacity: 1;
}

.category-icon-small {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, var(--accent-medium) 0%, var(--accent-light) 100%);
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  position: relative;
  animation: icon-bounce 2s infinite;
}

@keyframes icon-bounce {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.category-icon-small .material-icons {
  font-size: 1.8rem;
  color: #fff;
}

.category-card h4 {
  color: #fff;
  font-size: 1.4rem;
  font-family: 'Fira Code', monospace;
  margin-bottom: 12px;
  font-weight: 600;
  line-height: 1.3;
}

.category-card p {
  color: rgba(255,255,255,0.7);
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0;
}

/* Animaciones de entrada escalonada */
.category-card[data-delay="0"] { animation-delay: 0s; }
.category-card[data-delay="100"] { animation-delay: 0.1s; }
.category-card[data-delay="200"] { animation-delay: 0.2s; }
.category-card[data-delay="300"] { animation-delay: 0.3s; }
.category-card[data-delay="400"] { animation-delay: 0.4s; }
.category-card[data-delay="500"] { animation-delay: 0.5s; }
.category-card[data-delay="600"] { animation-delay: 0.6s; }
.category-card[data-delay="700"] { animation-delay: 0.7s; }

/* Efectos especiales por tipo de categoría */
.category-type-section[data-category="academic"] .category-icon {
  background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
}

.category-type-section[data-category="community"] .category-icon {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
}

.category-type-section[data-category="teacher"] .category-icon {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

/* ====================================================================
   ESTILOS PARA CARRUSEL DE NOMINADOS
==================================================================== */

/* Botones del carrusel */
.carousel-btn:hover {
  background: rgba(255,103,152,0.8) !important;
  transform: translateY(-50%) scale(1.1) !important;
  border-color: var(--accent-light) !important;
  box-shadow: 0 8px 20px rgba(255,103,152,0.4);
}

.carousel-btn:active {
  transform: translateY(-50%) scale(0.95) !important;
}

/* Indicadores del carrusel */
.carousel-indicator:hover {
  transform: scale(1.3) !important;
  border-color: var(--accent-medium) !important;
}

/* Animación de entrada para las cards con carrusel */
.nominee-card {
  animation: fadeInUp 0.6s ease-out;
  min-height: 520px;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Estilos mejorados para candidate-option en votación */
.candidate-option .candidate-content {
  background: linear-gradient(135deg, rgba(24,11,65,0.9) 0%, rgba(60,46,122,0.9) 100%);
  backdrop-filter: blur(10px);
}

.candidate-option.selected .nominee-carousel {
  border: 3px solid var(--accent-light);
  box-shadow: 0 0 30px rgba(255,103,152,0.5);
}

/* Mejorar transiciones del carrusel */
.carousel-slides {
  will-change: transform;
}

.carousel-slide img {
  transition: transform 0.3s ease;
}

.nominee-carousel:hover .carousel-slide img {
  transform: scale(1.05);
}

/* Estilo base para el carrusel - aspecto cuadrado */
.nominee-carousel {
  aspect-ratio: 1 / 1;
  width: 100%;
  height: auto !important;
  max-height: 400px;
}

/* Responsive para carrusel */
@media (max-width: 768px) {
  .nominee-carousel {
    max-height: 300px;
  }
  
  .carousel-btn {
    width: 35px !important;
    height: 35px !important;
    font-size: 18px !important;
  }
  
  .carousel-indicator {
    width: 8px !important;
    height: 8px !important;
  }
}

@media (max-width: 480px) {
  .nominee-carousel {
    max-height: 250px;
  }
  
  .carousel-btn {
    width: 30px !important;
    height: 30px !important;
    font-size: 16px !important;
  }
}

/* Responsive para categorías */
@media (max-width: 768px) {
  .categories-section {
    margin: 60px 0;
    padding: 0 15px;
  }
  
  .category-type-section {
    margin-bottom: 60px;
  }
  
  .category-type-header {
    flex-direction: column;
    text-align: center;
    padding: 25px;
  }
  
  .category-icon {
    margin-right: 0;
    margin-bottom: 20px;
    width: 70px;
    height: 70px;
  }
  
  .category-icon .material-icons {
    font-size: 2rem;
  }
  
  .category-type-info h3 {
    font-size: 1.8rem;
  }
  
  .categories-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .category-card-inner {
    padding: 20px;
  }
  
  .category-card h4 {
    font-size: 1.2rem;
  }
  
  .category-card p {
    font-size: 0.9rem;
  }
}

/* ====================================================================
   BOTÓN VOTA AHORA - ANIMACIONES LLAMATIVAS
==================================================================== */

.vote-now-btn {
  position: relative;
  background: linear-gradient(135deg, var(--accent-medium) 0%, var(--accent-light) 100%);
  color: #fff;
  border: none;
  border-radius: 20px;
  font-size: 2rem;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Fira Code', monospace;
  letter-spacing: 0.5px;
  padding: 30px 60px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 15px;
  box-shadow: 0 20px 60px rgba(255,103,152,0.6);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  animation: pulse-button 2s infinite, float-button 3s ease-in-out infinite;
  overflow: hidden;
  z-index: 1;
}

/* Efecto de brillo animado en el fondo */
.vote-now-btn::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  transform: rotate(45deg);
  animation: shine 3s infinite;
}

/* Anillo de pulso exterior */
.vote-now-btn::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 20px;
  background: linear-gradient(135deg, var(--accent-medium), var(--accent-light));
  z-index: -1;
  opacity: 0.7;
  filter: blur(15px);
  animation: pulse-ring 2s infinite;
}

.vote-now-btn .material-icons {
  font-size: 2.5rem;
  animation: shake-icon 3s ease-in-out infinite;
}

.vote-now-btn:hover {
  transform: translateY(-8px) scale(1.08);
  box-shadow: 0 30px 80px rgba(255,103,152,0.8);
  background: linear-gradient(135deg, var(--accent-light) 0%, var(--accent-medium) 100%);
}

.vote-now-btn:active {
  transform: translateY(-4px) scale(1.02);
}

/* Animación de pulso principal */
@keyframes pulse-button {
  0%, 100% {
    box-shadow: 0 20px 60px rgba(255,103,152,0.6),
                0 0 0 0 rgba(255,103,152,0.7);
  }
  50% {
    box-shadow: 0 25px 70px rgba(255,103,152,0.8),
                0 0 0 20px rgba(255,103,152,0);
  }
}

/* Animación de flotación suave */
@keyframes float-button {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* Animación de brillo deslizante */
@keyframes shine {
  0% {
    left: -100%;
    top: -100%;
  }
  100% {
    left: 100%;
    top: 100%;
  }
}

/* Animación del anillo de pulso */
@keyframes pulse-ring {
  0%, 100% {
    transform: scale(1);
    opacity: 0.7;
  }
  50% {
    transform: scale(1.15);
    opacity: 0.3;
  }
}

/* Animación del icono - shake suave */
@keyframes shake-icon {
  0%, 100% {
    transform: rotate(0deg);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: rotate(-10deg);
  }
  20%, 40%, 60%, 80% {
    transform: rotate(10deg);
  }
}

/* Responsive para el botón Vota Ahora */
@media (max-width: 768px) {
  .vote-now-btn {
    font-size: 1.5rem;
    padding: 24px 48px;
    border-radius: 16px;
  }
  
  .vote-now-btn .material-icons {
    font-size: 2rem;
  }
}

@media (max-width: 480px) {
  .vote-now-btn {
    font-size: 1.2rem;
    padding: 20px 40px;
    border-radius: 14px;
  }
  
  .vote-now-btn .material-icons {
    font-size: 1.8rem;
  }
}