:root {
  --azul-principal: #162447;
  --azul-neon: #00fff5;
  --azul-brillante: #1f4068;
  --gris-oscuro: #232931;
  --blanco: #fff;
  --glass: rgba(25, 40, 66, 0.75);
  --sombra-azul: 0 0 30px 5px #00fff588;
  --trans: all 0.4s cubic-bezier(0.4,0,0.2,1);
  --fuente-main: 'Orbitron', 'Montserrat', Arial, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: var(--fuente-main);
  background: linear-gradient(120deg, #162447 60%, #232931 100%);
  color: var(--blanco);
  min-height: 100vh;
  overflow-x: hidden;
}

/* Loader */
.loader-container {
  position: fixed; z-index: 2000; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; background: #162447; color: #00fff5;
  transition: var(--trans);
}
.loader {
  border: 6px solid #00fff5; border-top: 6px solid #162447; border-radius: 50%; width: 60px; height: 60px; animation: spin 1.1s linear infinite;
  margin-bottom: 1.5rem;
}
@keyframes spin { 100% { transform: rotate(360deg); } }
.loader-hidden { opacity: 0; pointer-events: none; }

nav.navbar {
  position: fixed; top: 0; left: 0; width: 100%; z-index: 100;
  background: rgba(22,36,71,0.92); border-bottom: 2px solid #00fff5;
  display: flex; justify-content: space-between; align-items: center; padding: 0.7rem 2.5vw;
  transition: background 0.5s;
  box-shadow: 0 2px 12px #0a0a0a66;
}
nav.navbar.scrolled { background: #1f4068ee; }
.logo img { height: 48px; filter: drop-shadow(0 0 7px #00fff5); }
.nav-links { display: flex; gap: 2.5vw; list-style: none; }
.nav-links a {
  color: #fff; text-decoration: none; font-weight: bold; font-size: 1.1rem; letter-spacing: 1px;
  padding: 0.5rem 0.7rem; border-radius: 6px; transition: var(--trans); position: relative;
}
.nav-links a::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 2px;
  background: var(--azul-neon); transition: var(--trans);
}
.nav-links a:hover, .nav-links a:focus { color: var(--azul-neon); background: #fff1; }
.nav-links a:hover::after, .nav-links a:focus::after { width: 100%; }

.hero-section {
  min-height: 60vh; position: relative; display: flex; align-items: center; justify-content: center;
  padding-top: 90px; overflow: hidden;
}
.hero-background {
  position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: hidden;
}
.hero-slide {
  position: absolute; inset: 0; width: 100%; height: 100%;
  background-size: cover; background-position: center;
  opacity: 0; filter: blur(9px) brightness(0.7); transition: opacity 1.2s, filter 1.2s;
}
.hero-slide.hero-slide-active { opacity: 1; filter: blur(4px) brightness(0.8); }
.hero-overlay-glass {
  z-index: 2; position: relative; text-align: center; width: 100%; padding: 3.5vw 1vw 3vw;
  background: var(--glass); border-radius: 22px; box-shadow: var(--sombra-azul);
  backdrop-filter: blur(7px); margin: 0 auto; max-width: 660px;
}
.hero-overlay-glass h1 {
  font-size: 3.2rem; letter-spacing: 6px; color: var(--azul-neon); text-shadow: 0 0 18px #00fff599;
}
.hero-slogan { font-size: 1.25rem; margin: 1rem 0 2.2rem; color: #bbf1fb; letter-spacing: 2px;}
.cta-buttons { display: flex; gap: 2rem; justify-content: center; margin: 1.7rem 0; }
.cta-button {
  display: flex; align-items: center; gap: 10px; background: #162447; color: #fff;
  border-radius: 30px; font-size: 1rem; font-family: var(--fuente-main);
  padding: 0.7em 1.6em; border: 2px solid #00fff5;
  text-decoration: none; font-weight: bold; box-shadow: 0 0 16px #00fff599;
  transition: var(--trans);
}
.cta-button:hover, .cta-button:focus {
  background: #00fff5; color: #162447; border-color: #1f4068; box-shadow: 0 0 28px #00fff5;
  transform: scale(1.09) translateY(-2px);
}
.cta-button img { width: 32px; height: 32px; filter: drop-shadow(0 0 4px #00fff5bb); }

.artists-section { text-align: center; margin-top: 3vw; }
.artists-section h2 {
  font-size: 2.5rem; margin: 2.5rem 0 2rem; color: #fff; text-shadow: 0 0 15px #00fff577;
  letter-spacing: 3px;
}
.artist-gallery {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2.4vw 2vw; justify-items: center; padding: 2vw 3vw;
}
.artist {
  background: #23293177; border-radius: 18px; overflow: hidden; box-shadow: 0 4px 28px #1f406888;
  position: relative; width: 100%; max-width: 250px; aspect-ratio: 1;
  transition: box-shadow 0.3s, transform 0.4s;
}
.artist-img {
  width: 100%; height: 100%; object-fit: cover; filter: grayscale(12%) brightness(0.93); transition: filter 0.5s;
}
.artist:hover, .artist:focus-within {
  transform: scale(1.07); box-shadow: 0 0 30px #00fff599, 0 8px 25px #162447;
  z-index: 3;
}
.artist:hover .artist-img, .artist:focus-within .artist-img { filter: grayscale(0%) brightness(1.08) blur(1px); }
.artist-overlay {
  position: absolute; inset: 0; background: rgba(12, 24, 56, 0.86);
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  opacity: 0; transition: opacity 0.45s;
}
.artist:hover .artist-overlay, .artist:focus-within .artist-overlay { opacity: 1; }
.artist-logo {
  max-width: 90px; max-height: 80px; object-fit: contain;
  margin-bottom: 1rem; filter: drop-shadow(0 0 6px #00fff5cc);
}
.artist-overlay a {
  display: flex; align-items: center; justify-content: center; width: 56px; height: 56px;
  background: #00fff5bb; border-radius: 50%; transition: var(--trans); margin-top: 6px;
  box-shadow: 0 0 15px #00fff599;
}
.artist-overlay a:hover, .artist-overlay a:focus { background: #162447; }
.artist-overlay a img { width: 36px; filter: invert(0) drop-shadow(0 0 6px #1f4068); }

.glass-bg {
  background: var(--glass); border-radius: 24px; box-shadow: 0 0 24px #1f406877;
  backdrop-filter: blur(8px);
  margin: 2vw auto; padding: 3vw 2vw; max-width: 860px;
}
.about-section h2 { color: var(--azul-neon); font-size: 2.3rem; letter-spacing: 2px;}
.about-section p { color: #e6f7fa; font-size: 1.17rem; line-height: 1.7; margin-top: 1.7vw;}
.contact-section h2 { color: #fff; font-size: 2rem; margin-bottom: 1rem; }
.contact-section p { color: #c1d3dd; margin-bottom: 2vw;}
iframe { border-radius: 18px; border: 2px solid #1f4068; margin: 0 auto; box-shadow: 0 0 16px #00fff577; }

footer {
  margin-top: 4vw; background: #162447f2; color: #99b0c8;
  text-align: center; padding: 2vw; font-size: 1.08rem; letter-spacing: 1px;
  border-top: 2px solid #1f4068;
}

/* Responsive */
@media (max-width: 900px) {
  .hero-overlay-glass h1 { font-size: 2.2rem; }
  .artist-gallery { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .glass-bg { padding: 5vw 2vw; }
}
@media (max-width: 600px) {
  .navbar { flex-direction: column; padding: 0.4rem 2vw; }
  .logo img { height: 38px; }
  .nav-links { gap: 1.4vw; font-size: 0.95rem;}
  .hero-overlay-glass { padding: 8vw 2vw; }
  .artist { max-width: 95vw; }
  .glass-bg { margin: 6vw 1vw; padding: 8vw 2vw; }
  .about-section h2, .contact-section h2 { font-size: 1.3rem;}
}

::-webkit-scrollbar { width: 8px; background: #232931; }
::-webkit-scrollbar-thumb { background: #00fff5aa; border-radius: 6px; }