/* ==========================================================
   STEEL BOYS - Brass Band · estil.css
   Paleta:
   --petroli: #0f2f3a   (fons capçalera i secció músics)
   --llauto:  #d4a22a   (color d'accent, el "metall")
   --paper:   #f2f4f3   (fons de la pàgina i de Concerts)
   --neutre:  #e0e2e1   (fons de Xarxes socials i Contacta'ns)
   --tinta:   #1d2a30   (text)
   --coure:   #b8432f   (detalls)
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,700;12..96,800&family=Figtree:wght@400;500;600&display=swap');

:root {
  --petroli: #0f2f3a;
  --petroli-clar: #1a4553;
  --llauto: #d4a22a;
  --paper: #f2f4f3;
  --tinta: #1d2a30;
  --coure: #b8432f;
  --blanc: #ffffff;
  --neutre: #e0e2e1;
  --espai: 5rem; /* espai superior i inferior de cada secció */

  --font-titols: 'Bricolage Grotesque', 'Arial Black', Arial, sans-serif;
  --font-text: 'Figtree', 'Segoe UI', Arial, sans-serif;

  --ample-max: 1100px;
}

/* ---------- Base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--tinta);
  font-family: var(--font-text);
  font-size: 1.05rem;
  line-height: 1.65;
  text-align: center;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

a:focus-visible,
h3:focus-visible {
  outline: 3px solid var(--llauto);
  outline-offset: 4px;
}

h2,
h3,
h4 {
  font-family: var(--font-titols);
  line-height: 1.1;
  margin: 0;
}

/* ---------- Capçalera / menú ---------- */
.fcapcalera {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 0.6rem 4vw;
  background: var(--petroli);
  color: var(--blanc);
  border-bottom: 4px solid var(--llauto);
}

.fcapcalera h3 {
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: color 0.2s;
}

.fcapcalera h3:hover,
.fcapcalera h3.activa {
  color: var(--llauto);
}

/* Botons que són enllaços (Gravacions, Galeria i el menú de la galeria) */
.fcapcalera h3 a {
  text-decoration: none;
}

/* Fletxeta petita que indica que s'obre en una pestanya nova */
.fcapcalera h3 a[target="_blank"]::after {
  content: " ↗";
  font-size: 0.75em;
}

/* Selector d'idioma: les dues banderes */
.idiomes {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-left: 0.4rem;
}

.idiomes a {
  position: relative;
  display: block;
  line-height: 0;
  opacity: 0.6;
  transition: opacity 0.2s, transform 0.2s;
}

.idiomes a:hover,
.idiomes a.actiu {
  opacity: 1;
}

.idiomes a:hover {
  transform: translateY(-2px);
}

/* L'idioma actual té el mateix subratllat de llautó que el menú */
.idiomes a.actiu::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -7px;
  height: 3px;
  border-radius: 2px;
  background: var(--llauto);
}

.idiomes img {
  height: 24px;
  width: auto;
}

/* El títol "STEEL BOYS" ocupa l'espai i empeny el menú a la dreta */
.fcapcalera .marca-nom {
  margin-right: auto;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--llauto);
}

/* Menú: a l'escriptori són els botons en fila; al mòbil és un desplegable (veure més avall) */
.menu {
  display: flex;
  align-items: center;
  gap: clamp(1.1rem, 1.6vw, 2rem);
}

.menu h3 {
  white-space: nowrap;
}

.menu-boto {
  display: none;
}

.logocapcalera {
  height: 52px;
  width: auto;
  margin-right: -1rem;
  cursor: pointer;
}

/* ---------- Imatge principal ---------- */
.fototextcapcalera {
  position: relative;
  overflow: hidden;
  background: var(--petroli);
}

.fototextcapcalera::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15, 47, 58, 0.85) 0%, rgba(15, 47, 58, 0) 60%);
  pointer-events: none;
}

.fotommvv {
  width: 100%;
  height: 78vh;
  min-height: 380px;
  object-fit: cover;
  object-position: center 30%;
}

.titolsobreposat {
  position: absolute;
  left: 6vw;
  right: 6vw;
  bottom: 2.5rem;
  z-index: 2;
  text-align: left;
  color: var(--blanc);
  font-size: clamp(1.6rem, 4.6vw, 3.6rem);
  font-weight: 800;
  line-height: 1.05;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
}

/* ---------- Qui som ---------- */
.quisom-contenidor {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3rem;
  max-width: 1600px;
  margin: 0 auto;
  padding: 5rem 4vw;
}

.quisom-text {
  flex: 1;
  text-align: left;
}

.quisom-text h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  color: var(--petroli);
  margin-bottom: 1.5rem;
}

.quisom-text h2::after {
  content: "";
  display: block;
  width: 72px;
  height: 6px;
  margin-top: 0.8rem;
  background: var(--llauto);
}

.fotoembarcador {
  margin: 0;
  max-width: none;
}

/* Espai entre els tres paràgrafs */
.fotoembarcador + .fotoembarcador {
  margin-top: 1rem;
}

.fotoembarcador2 {
  height: 300px;
  width: auto;
  max-width: 460px;
  object-fit: cover;
  display: block;
  flex-shrink: 0;
  border-radius: 6px;
  box-shadow: 14px 14px 0 var(--llauto);
}

/* ---------- Músics ---------- */
.seccio-musics {
  background: var(--petroli);
  color: #e6eef0;
  padding: 5rem 6vw 6rem;
}

.titolmusics {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  color: var(--blanc);
  margin-bottom: 4rem;
}

.titolmusics::after {
  content: "";
  display: block;
  width: 72px;
  height: 6px;
  margin: 0.8rem auto 0;
  background: var(--llauto);
}

.musics-persona {
  display: grid;
  grid-template-columns: minmax(220px, 300px) 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "foto nom"
    "foto info";
  column-gap: 3.5rem;
  align-items: start;
  max-width: var(--ample-max);
  margin: 0 auto 5rem;
  text-align: left;
}

.musics-persona:last-child {
  margin-bottom: 0;
}

/* Variant amb la foto a la dreta */
.musics-persona.invertit {
  grid-template-columns: 1fr minmax(220px, 300px);
  grid-template-areas:
    "nom foto"
    "info foto";
}

.musics-persona img {
  grid-area: foto;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 6px;
  border-bottom: 6px solid var(--llauto);
  background: var(--petroli-clar);
}

.musics-persona h3 {
  grid-area: nom;
  align-self: end;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  font-weight: 800;
  color: var(--llauto);
  margin-bottom: 1rem;
}

.musics-persona p {
  grid-area: info;
  margin: 0;
  max-width: 62ch;
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto; /* parteix paraules a final de línia (segons l'idioma de la pàgina) perquè no quedin forats grans */
}

/* Els <br> d'aquests textos són salts de línia suaus: els ignorem */
.musics-persona p br {
  display: none;
}

/* ---------- Seccions: concerts i xarxes/contacte ---------- */
/* Cada secció té el seu propi fons i el mateix espai a dalt i a baix */
.seccio {
  padding: var(--espai) 6vw;
}

.seccio h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  color: var(--petroli);
}

.seccio h2::after {
  content: "";
  display: block;
  width: 72px;
  height: 6px;
  margin: 0.8rem auto 1.5rem;
  background: var(--llauto);
}

.seccio p {
  max-width: 680px;
  margin: 0 auto 1.5rem;
}

/* L'últim element de cada secció no deixa marge extra */
.seccio > :last-child {
  margin-bottom: 0;
}

/* ----- Concerts -----
   L'alçada depèn només del contingut de l'HTML.
   Es poden afegir tants paràgrafs, títols (h4) o llistes (ul) com calgui. */
.seccio-concerts {
  background: var(--paper);
  min-height: 18rem; /* si hi ha poc text no queda aixafada; si n'hi ha molt, creix sola */
}

.seccio-concerts p {
  max-width: 820px;
  font-weight: 500;
}

.seccio-concerts p + p {
  margin-top: 1.5rem;
}

.seccio-concerts h4 {
  max-width: 820px;
  margin: 2rem auto 0.8rem;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--coure);
}

/* Mesos (h3) i anys (h2) de la llista de concerts */
.seccio-concerts h3 {
  max-width: 820px;
  margin: 2rem auto 0.6rem;
  font-size: 1.15rem;
  font-weight: 700;
  color: #000;
}

.seccio-concerts h2:not(:first-child) {
  margin-top: 4.5rem;
}

.seccio-concerts ul {
  list-style: none;
  max-width: 820px;
  margin: 0 auto 1.5rem;
  padding: 0;
}

.seccio-concerts li {
  font-weight: 500;
}

.seccio-concerts li + li {
  margin-top: 0.6rem;
}

/* ----- Galeria (galeria.html) ----- */
.seccio-galeria {
  background: var(--paper);
  min-height: 70vh;
}

/* Cada fila té 2 fotos de la mateixa alçada. L'amplada de cadascuna s'ajusta
   a la seva proporció (el script.js ho calcula), així no es retalla cap foto. */
.galeria-fila {
  display: flex;
  gap: 1rem;
  max-width: 1200px;
  margin: 0 auto 1rem;
}

.galeria-fila img {
  display: block;
  flex: 1 1 0;
  min-width: 0;
  height: auto;
  aspect-ratio: 4 / 3;        /* espai reservat mentre la foto es carrega */
  object-fit: cover;
  border-radius: 6px;
  background: var(--neutre);
  box-shadow: 0 6px 18px rgba(15, 47, 58, 0.15);
  cursor: zoom-in;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.galeria-fila img.carregada {
  aspect-ratio: auto;         /* ja carregada: proporció real de la foto */
}

.galeria-fila img:hover {
  transform: scale(1.015);
  box-shadow: 0 10px 26px rgba(15, 47, 58, 0.25);
}

/* Visor: la foto ampliada en clicar-hi */
.visor-obert {
  overflow: hidden;
}

.visor {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 22, 28, 0.94);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}

.visor.oberta {
  opacity: 1;
  visibility: visible;
}

.visor-img {
  max-width: min(92vw, 1400px);
  max-height: 84vh;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.visor button {
  position: absolute;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: var(--blanc);
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.visor button:hover {
  background: var(--llauto);
  color: var(--petroli);
}

.visor-tanca {
  top: 1rem;
  right: 1rem;
}

.visor-ant,
.visor-seg {
  top: 50%;
  margin-top: -24px;
}

.visor-ant {
  left: 1rem;
}

.visor-seg {
  right: 1rem;
}

.visor-compte {
  position: absolute;
  bottom: 1rem;
  left: 0;
  right: 0;
  color: #cfd9dc;
  font-size: 0.9rem;
  text-align: center;
}

/* ----- Xarxes + contacte: una sola franja, dues columnes -----
   Les files (títol, text, icones i document) es comparteixen entre columnes
   (subgrid), així les icones queden sempre a la mateixa alçada. */
.seccio-connecta {
  background: var(--neutre);
}

.connecta-graella {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 4rem;
  max-width: var(--ample-max);
  margin: 0 auto;
}

.connecta-bloc {
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
  align-content: start;
}

.connecta-bloc + .connecta-bloc {
  padding-left: 4rem;
  border-left: 1px solid rgba(15, 47, 58, 0.18);
}

/* Fila d'icones, igual a les dues columnes */
.icones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 1.5rem 2.5rem;
}

.icona {
  min-width: 110px;
  text-align: center;
}

.icona a {
  display: block;
  width: fit-content;
  margin: 0 auto;
}

.seccio a img {
  width: 92px;
  height: 92px;
  object-fit: contain;
  transition: transform 0.2s;
}

.seccio a:hover img {
  transform: translateY(-4px) scale(1.06);
}

/* Icones de xarxes socials (primera columna): més grans que les de contacte.
   La mida s'adapta a l'amplada de la pantalla perquè les tres càpiguen en una fila. */
.connecta-bloc:first-child .icona {
  min-width: 0; /* l'amplada la marca la icona, així no es fan files de 2 + 1 */
}

.connecta-bloc:first-child .icona a img {
  width: clamp(84px, 9vw, 116px);
  height: clamp(84px, 9vw, 116px);
}

.icona h4 {
  margin: 0.8rem 0 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--coure);
}

.icona p {
  margin: 0.2rem auto 0;
  font-size: 0.95rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* Els <br> del text de contacte són salts suaus: el text s'ajusta sol */
.connecta-bloc p br {
  display: none;
}

/* Enllaç al PDF (carta de presentació i rider): discret, sota les icones de contacte */
.connecta-bloc .document {
  margin: 2rem auto 0;
  font-size: 0.92rem;
  font-weight: 500;
}

.connecta-bloc .document a {
  color: rgba(29, 42, 48, 0.72);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color 0.2s;
}

.connecta-bloc .document a:hover {
  color: var(--coure);
}

/* ---------- Peu de pàgina ---------- */
.peu {
  background: var(--petroli);
  color: #cfdde0;
  border-top: 6px solid var(--llauto);
  padding: 4rem 6vw 1.5rem;
  text-align: left;
  font-size: 0.97rem;
}

.peu-graella {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.3fr 0.9fr;
  gap: 2.5rem 3rem;
  max-width: 1200px;
  margin: 0 auto;
}

.peu-logo {
  height: 250px;
  max-width: 100%;
  width: auto;
  margin-bottom: 1.2rem;
}

.peu p {
  margin: 0 0 0.9rem;
  max-width: 34ch;
}

.peu h4 {
  margin: 0 0 1.1rem;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--llauto);
}

.peu a {
  display: block;
  width: fit-content;
  margin-bottom: 0.55rem;
  color: #e6eef0;
  text-decoration: none;
  transition: color 0.2s, transform 0.2s;
}

.peu a:hover {
  color: var(--llauto);
  transform: translateX(3px);
}

.peu-baix {
  max-width: 1200px;
  margin: 3rem auto 0;
  padding-top: 1.3rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  color: #9fb3b9;
  font-size: 0.88rem;
}

.peu-baix p {
  margin: 0;
  max-width: none;
}

@media (max-width: 900px) {
  .peu-graella {
    grid-template-columns: 1fr 1fr;
  }

  .peu-marca {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) {
  .peu {
    padding-top: 3rem;
  }

  .peu-graella {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* ---------- Mòbil i tauleta: menú d'hamburguesa ----------
   La capçalera només mostra el logo, el nom i el botó de les 3 ratlles.
   Els apartats i les banderes surten en un menú desplegable. */
@media (max-width: 1200px) {
  .fcapcalera {
    padding: 0.6rem 5vw;
  }

  .menu-boto {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 46px;
    height: 46px;
    margin-right: -8px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
  }

  .menu-boto span {
    display: block;
    width: 26px;
    height: 3px;
    border-radius: 2px;
    background: var(--blanc);
    transition: transform 0.3s ease, opacity 0.2s ease, background 0.2s ease;
  }

  .menu-boto:hover span,
  .fcapcalera.menu-obert .menu-boto span {
    background: var(--llauto);
  }

  /* Les 3 ratlles es converteixen en una X quan el menú és obert */
  .fcapcalera.menu-obert .menu-boto span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }

  .fcapcalera.menu-obert .menu-boto span:nth-child(2) {
    opacity: 0;
  }

  .fcapcalera.menu-obert .menu-boto span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

  /* El desplegable: surt just a sota de la capçalera, a tota l'amplada */
  .menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.4rem 5vw 1.5rem;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    background: var(--petroli);
    border-bottom: 4px solid var(--llauto);
    box-shadow: 0 16px 30px rgba(0, 0, 0, 0.35);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
  }

  .fcapcalera.menu-obert .menu {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .menu h3 {
    padding: 0.95rem 0;
    font-size: 1.1rem;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .menu h3 a {
    display: block; /* tota la fila és clicable */
  }

  .menu h3::after {
    display: none; /* el subratllat del menú d'escriptori aquí no cal */
  }

  .menu h3.activa {
    padding-left: 0.9rem;
    box-shadow: inset 3px 0 0 var(--llauto);
  }

  .menu .idiomes {
    margin: 1.3rem 0 0;
    gap: 1.2rem;
  }

  .menu .idiomes img {
    height: 28px;
  }
}

/* ---------- Tauleta ---------- */
@media (max-width: 860px) {
  .fcapcalera .marca-nom {
    font-size: 1.25rem;
  }

  .logocapcalera {
    height: 44px;
    margin-right: 0;
  }

  .idiomes img {
    height: 20px;
  }

  .quisom-contenidor {
    flex-direction: column;
    gap: 3rem;
    padding: 3.5rem 6vw;
  }

  .fotoembarcador2 {
    width: 100%;
    max-width: 400px;
    height: auto;
    aspect-ratio: 4 / 3;
    box-shadow: 10px 10px 0 var(--llauto);
  }

  /* Xarxes i contacte: una columna a sobre de l'altra */
  .connecta-graella {
    grid-template-columns: 1fr;
  }

  .connecta-bloc {
    display: block;
    grid-row: auto;
  }

  .connecta-bloc + .connecta-bloc {
    margin-top: 3.5rem;
    padding-top: 3.5rem;
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid rgba(15, 47, 58, 0.18);
  }

  /* Músics: foto, nom i text apilats */
  .musics-persona,
  .musics-persona.invertit {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      "foto"
      "nom"
      "info";
    row-gap: 1rem;
    margin-bottom: 4rem;
  }

  .musics-persona img {
    max-width: 320px;
    margin: 0 auto;
  }

  .musics-persona h3 {
    align-self: start;
    margin: 0.5rem 0 0;
  }
}

/* ---------- Mòbil ---------- */
@media (max-width: 520px) {
  :root {
    --espai: 3.5rem;
  }

  body {
    font-size: 1rem;
  }

  .fotommvv {
    height: 60vh;
  }

  .titolsobreposat {
    bottom: 1.5rem;
  }

  .fcapcalera .marca-nom {
    font-size: 1.05rem;
  }

  .menu h3 {
    font-size: 1.05rem;
  }

  .seccio-musics {
    padding: 3.5rem 6vw 4rem;
  }

  .seccio a img {
    width: 72px;
    height: 72px;
  }

  .galeria-fila {
    gap: 0.5rem;
    margin-bottom: 0.5rem;
  }

  /* Xarxes socials al mòbil: una mica més grans, amb menys espai entre elles perquè hi càpiguen les tres */
  .connecta-bloc:first-child .icones {
    column-gap: 1.2rem;
  }

  .connecta-bloc:first-child .icona a img {
    width: 80px;
    height: 80px;
  }
}

/* ==========================================================
   ANIMACIONS
   (el script.js afegeix la classe "js" a <html> i va marcant
   com a "visible" els elements a mesura que entren a pantalla)
   ========================================================== */

/* Capçalera: ombra quan has fet scroll */
.fcapcalera {
  transition: box-shadow 0.3s;
}

.fcapcalera.compacta {
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.28);
}

/* Menú: subratllat de llautó que creix en passar-hi per sobre o quan és la secció activa */
.menu h3 {
  position: relative;
}

.menu h3::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 3px;
  border-radius: 2px;
  background: var(--llauto);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.menu h3:hover::after,
.menu h3.activa::after {
  transform: scaleX(1);
}

/* Imatge principal: zoom lent a l'entrar i títol que puja */
@keyframes zoomLent {
  from { transform: scale(1.08); }
  to   { transform: scale(1); }
}

@keyframes entraTitol {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}

.fotommvv {
  animation: zoomLent 2.4s ease-out both;
}

.titolsobreposat {
  animation: entraTitol 1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.3s both;
}

/* Aparició en fer scroll: els elements surten suaument en entrar a pantalla */
.js .revela {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: var(--retard, 0s);
}

.js .revela.des-esquerra {
  transform: translateX(-44px);
}

.js .revela.des-dreta {
  transform: translateX(44px);
}

.js .revela.visible {
  opacity: 1;
  transform: none;
}

/* La barreta de llautó sota els títols "es dibuixa" */
.js h2.revela::after {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.35s;
}

.js .titolmusics.revela::after,
.js .seccio h2.revela::after {
  transform-origin: center;
}

.js h2.revela.visible::after {
  transform: scaleX(1);
}

/* ---------- Botó "tornar a dalt" (el crea el script.js) ---------- */
.torna-dalt {
  position: fixed;
  right: 1.2rem;
  bottom: 1.2rem;
  z-index: 90;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: var(--petroli);
  color: var(--llauto);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.25s, transform 0.25s, visibility 0.25s, background 0.2s;
}

.torna-dalt.visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.torna-dalt:hover {
  background: var(--petroli-clar);
}

/* ---------- Accessibilitat ---------- */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }

  .js .revela,
  .js .revela.des-esquerra,
  .js .revela.des-dreta {
    opacity: 1;
    transform: none;
  }

  .js h2.revela::after {
    transform: none;
  }
}