body {
  background: linear-gradient(to bottom right, #010818, #b61cf8);
  color: white;
  overflow-x: hidden;
  font-family: 'Poppins', sans-serif;
  color: #fff;
}


/* --- Títols amb personalitat --- */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Orbitron', sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* --- Degradat en títols destacats --- */
.text-gradient,
h1.text-gradient,
h2.text-gradient {
  background: linear-gradient(90deg, #93fafe, #fc64d3);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* --- Pesos i ajustos visuals --- */
h1, h2 {
  font-weight: 700;
}

h3, h4 {
  font-weight: 500;
}

/* Parallax */
.parallax {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 38vh; /* reduïm alçada perquè no quedi massa alta */
}
/* --- Logotip de capçalera --- */
.logo-creafest {
  width: 500px;         /* mida estàndard d’escriptori */
  max-width: 60vw;      /* es redueix de forma responsiva */
  height: auto;
  filter: drop-shadow(0 0 10px rgba(0,0,0,0.4));
}
/* --- Responsivitat --- */
@media (max-width: 768px) {
  .parallax {
    background-attachment: scroll; /* per suavitzar en mòbil */
    height: 50vh;
  }

  .logo-creafest {
    width: 200px;
  }
}
.text-gradient {
  background: linear-gradient(90deg, #fc64d3, #93fafe);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.link-twitch {
  color: #93fafe;
  font-weight: 600;
  text-decoration: none;
}
.link-twitch:hover { color: #fc64d3; }

/* Timeline (Programa) */
.timeline {
  border-left: 3px solid #93fafe;
  margin: 2rem 0;
  padding-left: 2rem;
  position: relative;
}
.timeline-item {
  margin-bottom: 2rem;
  position: relative;
}
.timeline-item::before {
  content: '';
  position: absolute;
  left: -12px;
  top: 5px;
  width: 20px;
  height: 20px;
  background: #fc64d3;
  border-radius: 50%;
}
.timeline-item .time {
  color: #93fafe;
  font-weight: bold;
}
.timeline-item a {
  color: #93fafe;
  text-decoration: none;
}
.timeline-item a:hover { color: #fc64d3; }

/* Swiper cards */
.homenatgesSwiper .card {
  background-color: rgba(255,255,255,0.05);
  border: none;
  border-radius: 1rem;
  color: white;
  transition: transform 0.3s;
}
.homenatgesSwiper .card:hover { transform: translateY(-5px); }
.swiper { padding-bottom: 50px; }

/* Mapa a pantalla completa */
.mapa-section {
  width: 100%;
  height: 50vh;
  overflow: hidden;
  margin: 0;
  padding: 0;
}
.mapa-section iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* --- Navbar amb degradat i efecte translúcid --- */
.navbar {
  background: linear-gradient(90deg, rgba(1,8,24,0.9), rgba(182,28,248,0.2));
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(147,250,254,0.2);
  transition: background 0.4s ease, box-shadow 0.4s ease;
}
.navbar .nav-logo{
	width: 30%;
}

/* En fer scroll (opcional, si s’aplica via JS) */
.navbar.scrolled {
  background: linear-gradient(90deg, rgba(1,8,24,0.95), rgba(182,28,248,0.4));
  box-shadow: 0 0 10px rgba(252,100,211,0.2);
}

/* Enllaços del menú */
.navbar-nav .nav-link {
  color: #93fafe;
  font-weight: 500;
  letter-spacing: 0.5px;
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
  color: #fc64d3;
  text-shadow: 0 0 6px rgba(252,100,211,0.4);
}




#timer{
	background: linear-gradient(90deg, #93fafe, #fc64d3);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* --- Programa (timeline estilitzat) --- */
.bg-gradient-programa {
  background: linear-gradient(135deg, #010818, #120d24);
}

.text-accent {
  color: #93fafe;
}

.text-gradient {
  background: linear-gradient(90deg, #93fafe, #fc64d3);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.timeline {
  position: relative;
  margin: 0 auto;
  padding: 0 1rem;
  border-left: 3px solid rgba(252,100,211,0.4);
  max-width: 700px;
}

.timeline-item {
  position: relative;
  margin-bottom: 2.5rem;
  padding-left: 2rem;
}

.timeline-item::before {
  content: '';
  position: absolute;
  left: -9px;
  top: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle, #fc64d3 0%, #93fafe 80%);
  box-shadow: 0 0 8px rgba(147,250,254,0.6);
}

.timeline-time {
  font-weight: 700;
  color: #fc64d3;
  margin-bottom: 0.3rem;
  font-size: 1.1rem;
}

.timeline-content h5 {
  margin-bottom: 0.3rem;
}

.timeline-content p a {
  color: #93fafe;
  text-decoration: none;
}

.timeline-content p a:hover {
  color: #fc64d3;
  text-decoration: underline;
}

/* Responsive */
@media (max-width: 576px) {
  .timeline {
    border-left: 2px solid rgba(252,100,211,0.3);
    padding-left: 1.5rem;
  }
  .timeline-item {
    margin-bottom: 2rem;
  }
  .timeline-time {
    font-size: 1rem;
  }
}


/* --- Peu de pàgina --- */
footer {
  background: linear-gradient(to top, #010818, #120d24);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Logos del peu */
.footer-logo {
  max-height: 60px;
  width: auto;
  filter: brightness(0) invert(1) drop-shadow(0 0 6px rgba(252,100,211,0.3));
  transition: transform 0.3s ease, filter 0.3s ease;
}

.footer-logo:hover {
  transform: scale(1.05);
  filter: brightness(1) drop-shadow(0 0 8px rgba(147,250,254,0.6));
}

/* Text secundari */
footer p, 
footer small {
  color: #93fafe;
  letter-spacing: 0.5px;
}

@media (max-width: 768px) {
  .footer-logo {
    max-height: 50px;
    margin-bottom: 1rem;
  }
}

/* --- Personalització del Swiper dels homenatges --- */

/* Color principal (rosat-violeta) per a les fletxes i bullets actius */
:root {
  --swiper-theme-color: #fc64d3;
}

/* Bullets (punts de navegació) */
.swiper-pagination-bullet {
  background: rgba(147, 250, 254, 0.4);  /* to suau, blauet */
  opacity: 1;
  transition: background 0.3s ease, transform 0.3s ease;
}

.swiper-pagination-bullet-active {
  background: #fc64d3;  /* color accent principal */
  transform: scale(1.2);
  box-shadow: 0 0 8px rgba(252, 100, 211, 0.6);
}

/* Fletxes (prev/next) */
.swiper-button-prev,
.swiper-button-next {
  color: #93fafe; /* blau clar per defecte */
  transition: color 0.3s ease, transform 0.3s ease;
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
  color: #fc64d3; /* canvi a rosa accent al hover */
  transform: scale(1.15);
}