section {
  min-height: calc(100svh - var(--nav-h));
  display: grid;
  align-items: center;
}
/* --- SEC1: HERO CURSOS I ACTIVITATS --- */
.hero {
  position: relative;
  overflow: hidden;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;

}

/* Overlay fosc per millorar la llegibilitat del text */
.hero::before {
  content: "";
  z-index: 0;
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.5) 0%,
    rgba(0, 0, 0, 0.8) 100%
  );
}

/* Posicionar el contingut sobre l'overlay */
.hero .container {
  position: relative;
  z-index: 2;
}

/* Estil del glass-box ja definit a quisom.css, el reutilitzem */
.glass-box {
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.37);
  border-radius: 12px;
}

/* Títol */
.hero h1 {
  background-image: linear-gradient(to right, var(--color-gold), #fff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  display: inline-block;
}

/* 📱 HERO Horaris només en mòbil: sense parallax ni “zoom” en scroll */
@media (max-width: 991.98px){
  /* desactiva l’efecte fixed i reencaixa la imatge */
  .hero.parallax-section{
    background-attachment: scroll !important;
    background-position: center top !important;
    background-size: cover !important;
    min-height: 62svh;                         /* alçada còmoda en mòbil */
    padding-block: clamp(48px, 8svh, 96px);    /* aire pel text */
  }

  /* overlay una mica més marcat per llegibilitat */
  .hero.parallax-section::before{
    background: linear-gradient(
      180deg,
      rgba(0,0,0,.65) 0%,
      rgba(0,0,0,.45) 40%,
      rgba(0,0,0,.25) 100%
    );
  }

  /* evita “estirar” el grid intern */
  .hero.parallax-section .row{
    min-height: 0 !important;
  }

  /* lleu reforç del glass-box en pantalles petites */
  .hero.parallax-section .glass-box{
    background: rgba(0,0,0,.32);
    border-color: rgba(255,255,255,.18);
  }
}


/* ---------- SEC2 (Imatges horaris) ---------- */
/* La secció ha de poder contenir el canvas en absolut */
.horaris-sec2{ position: relative; overflow: hidden; }

/* Canvas de fons, sota el contingut */
.auras-canvas{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 0; pointer-events: none;   /* no bloqueja clics a les imatges */
}

/* Contingut per sobre del canvas */
.horaris-sec2 .container{ position: relative; z-index: 1; }

/* cursor de zoom a les miniatures */
.schedule-img{ cursor: zoom-in; }

/* modal a pantalla completa, imatge contenida */
.imglightbox .modal-content{ background:#000; }
.imglightbox .modal-body{ padding:0; position: relative;}
.lightbox-img{
  max-width: 100vw;
  max-height: 90vh;
  width: auto;
  height: auto;
  display:block;
  user-select: none;
  -webkit-user-drag: none;
  cursor: zoom-out; /* clic per tancar */
}
.imglightbox .btn-close{
  z-index: 5;            /* per sobre de la imatge */
  pointer-events: auto;  /* no heretar cap “none” accidental */
}
@media (min-width: 992px){
  .lightbox-img{ max-height: 94vh; }
}

/* ---------- CTA PARALLAX ---------- */

.sec-cta {
  background-image: var(--cta-img) !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-attachment: fixed !important;
  position: relative;
  overflow: hidden;
  min-height: calc(100svh - var(--nav-h));
  color: var(--color-white) !important;
}

.sec-cta .overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.62) 0%,
    rgba(0, 0, 0, 0.38) 100%
  );
}

.sec-cta .container {
  position: relative;
  z-index: 1;
}

/* Títols a la secció CTA */
.sec-cta h2 {
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  color: var(--color-white);
  text-shadow: 0 0 10px rgba(183, 154, 84, 0.45);
}

.sec-cta p {
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  color: var(--color-white);
  text-shadow: 0 0 10px rgba(183, 154, 84, 0.45);
}

/* 📱 CTA parallax només en mòbil: sense parallax ni “zoom” */
@media (max-width: 991.98px){
  .sec-cta.parallax{
    background-attachment: scroll !important;   /* fora parallax en mòbil */
    background-position: center top !important; /* evita retalls agressius */
    background-size: cover !important;
    min-height: 62svh;                          /* alçada còmoda */
    padding-block: clamp(48px, 8svh, 96px);     /* aire pel text/CTA */
  }

  /* overlay una mica més suau per llegibilitat sense enfosquir massa */
  .sec-cta.parallax .overlay{
    background: linear-gradient(
      180deg,
      rgba(0,0,0,.55) 0%,
      rgba(0,0,0,.35) 50%,
      rgba(0,0,0,.20) 100%
    );
  }

  /* assegura stacking correcte del contingut */
  .sec-cta.parallax .container{
    position: relative;
    z-index: 1;
  }
}


/* ---------- Línia daurada sota títols (coherent amb la resta) ---------- */
.gradient-title,
.gradient-title-alt{
  position: relative;
  display: inline-block;
  text-transform: uppercase;
  letter-spacing:.08em;
  font-weight: 700;
}
.gradient-title::after,
.gradient-title-alt::after{
  content:"";
  display:block;
  width: clamp(120px, 32%, 200px);
  height: 4px;
  margin-top: .45rem;
  border-radius: 9999px;
  background: linear-gradient(90deg, var(--color-gold) 0%, rgba(183,154,84,.15) 80%, transparent 100%);
  box-shadow: 0 6px 20px rgba(183,154,84,.28);
  margin-right: auto; /* start */
}
.gradient-title--center::after,
.gradient-title-alt--center::after{ margin-left:auto; margin-right:auto; }
.gradient-title--end::after,
.gradient-title-alt--end::after{   margin-left:auto; margin-right:0; }



/* --- Animacions Fade-in amb Scroll (reutilització) --- */
.fade-section {
  opacity: 0;
  transform: translateY(12px);
  will-change: opacity, transform;
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-section.is-visible {
  opacity: 1;
  transform: translateY(0);
}