/* ---------- HERO ---------- */
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: top center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;

}

/* Overlay fosc per millorar la llegibilitat del text */
.hero::before {
  content: "";
  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;
}

/* 📱 Només mòbil / tablet: arregla el HERO perquè no faci zoom ni parallax */
@media (max-width: 991.98px){
  /* HERO de Professorat (o qualsevol amb .parallax-section) */
  section.hero.parallax-section{
    background-attachment: scroll !important;  /* desactiva parallax */
    background-position: center top !important;/* mostra la part superior de la foto */
    background-size: cover !important;
    min-height: clamp(380px, 58svh, 640px);     /* alçada còmoda en mòbil */
  }

  /* Si el teu HERO d'inici té cap efecte, mata’l només en mòbil */
  #hero .hero__bg{
    transform: none !important;                 /* evita “zoom” al fer scroll */
  }
  #hero .hero__fx-root{
    display: none !important;                   /* sense efectes de ratolí/touch */
  }
}


/* ---------- GRID PROFESSORS (2 columnes) ---------- */
/* ===== GRID base ===== */
.prof-grid{
  /* s’ajusta a l’alçada del contingut */
  min-height: auto;
  display: block;
  background:#fff; color:#111;
}


/* Targeta sense fons (evitem “rectangle negre”) i que la imatge marqui l’alçada */
.prof-tile{
  position: relative;          /* necessari per a posicionar la imatge */
  margin:0;
  border-radius:14px;
  overflow:hidden;
  background: transparent;
  box-shadow: 0 10px 26px rgba(0,0,0,.10);
  aspect-ratio: 3 / 4;         /* tria el ratio que t’agradi (3/4, 4/5, 1/1…) */
}
.img-tile{
  position: absolute; inset: 0;
  width:100%; height:100%;
  object-fit: cover;           /* ← adéu bandes blanques */
  transition: filter .25s ease, transform .25s ease;
}



/* ===== Tilt 3D sobre la TARGETA sencera ===== */
.tilt-wrap{
  perspective: 900px;             /* profunditat 3D del contenidor */
}
.tilt-item{
  position: relative;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0);
  transform-style: preserve-3d;
  will-change: transform;
  border-radius: 14px;
  transition: transform .18s ease, box-shadow .18s ease;
}
.tilt-wrap:hover .tilt-item{ box-shadow: 0 18px 42px rgba(0,0,0,.16); }
.tilt-wrap:hover .img-tile{ filter: saturate(1.05) contrast(1.03); }

/* Glare/reflex que també es mou amb la targeta */
.tilt-glare{
  position:absolute; inset:0; pointer-events:none; border-radius:14px;
  background:
    radial-gradient(circle at var(--glx,50%) var(--gly,50%),
      rgba(183,154,84, var(--glA, .18)), rgba(183,154,84,0) 55%);
  mix-blend-mode: screen;
  transition: opacity .2s ease;
}

/* Accessibilitat i mòbil: desactiva tilt */
@media (hover: none), (pointer: coarse){
  .tilt-item{ transform: none !important; }
  .tilt-glare{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  .tilt-item{ transform: none !important; transition: none !important; }
  .tilt-glare{ display:none; }
}


/* --- SEC-CTA: crida a l'acció (reutilització) --- */
.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 només en mòbil: sense parallax, millor enquadrament i lectura */
@media (max-width: 991.98px){
  #cta.sec-cta{
    background-attachment: scroll !important;   /* desactiva el parallax */
    background-position: center top !important; /* mostra part superior */
    background-size: cover !important;
    min-height: 62svh;                           /* alçada còmoda */
    padding-block: clamp(48px, 8svh, 96px);      /* espai per al text */
  }
  #cta.sec-cta .overlay{
    /* gradient una mica més marcat en mòbil per contrast */
    background: linear-gradient(
      180deg,
      rgba(0,0,0,.65) 0%,
      rgba(0,0,0,.45) 40%,
      rgba(0,0,0,.25) 100%
    ) !important;
  }
  #cta.sec-cta .container{
    /* centra verticalment sense dependre de background-attachment */
    min-height: 0;
  }
}


/* ---------- 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(--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);
}


/* ---------- Responsive ---------- */
@media (max-width: 767.98px){
  .prof-hero{ min-height: min(100svh, 680px); }
  .prof-body{ padding: .9rem .9rem 1.1rem; }
}

.hero::before { z-index: 0; }
.hero .container { position: relative; z-index: 2; }

@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce){
  .hero .trail-canvas { display:none !important; }
}