/* TIPOGRAFIES */
@font-face {
  font-family: 'Aeonik';
  src: url('tipogr/Aeonik-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Aeonik';
  src: url('tipogr/Aeonik-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Aeonik';
  src: url('tipogr/Aeonik-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Aeonik';
  src: url('tipogr/Aeonik-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Orbikular';
  src: url('tipogr/Orbikular-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}


/* RESET i BASE */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Orbikular', sans-serif;
  font-weight: 400;
  background-color: #f8f8f8;
  color: #171717;
}

strong {
  font-weight: 700;
  font-family: 'Orbikular', sans-serif;
}



/* ESTRUCTURA GENERAL (comuna a totes les seccions) */
section {
  padding: 4rem 2rem;    /* mida q separa cada bloc (el 1r rem) */
  max-width: 1100px;
  margin: 0 auto;
}

.h2-custum {
  font-family: 'Aeonik', sans-serif!important;
  font-size: clamp(1.8rem, 4vw, 3rem)!important;
  font-weight: 400!important;
  margin-bottom: 1.5rem!important;         /* espai entre títol i gràfic */
  line-height: 1.2!important;
}

/* CAIXES TEXTOS EXPLICATIUS */
.text-grafic p {
  font-family: 'Orbikular', sans-serif;
  font-weight: 300;
  font-size: 1.2rem;
  line-height: 1.6;
  max-width: 700px;
  margin-bottom: 2rem;
  color: #444;
}

/* a mòbil reduïm el marge lateral de les seccions, pq els gràfics (sankey, radial, chord) tenen molt poc espai disponible */
@media (max-width: 768px) {
  section {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}



/* ==========================================================
/* 00. HERO/PORTADA */
/* ========================================================== */

#hero {
  position: relative;
  width: 100%;
  max-width: 100%;    /* excepció a l'estruct gral, pq la foto portada ocupi tota l'amplada */
  height: 100vh;      /* fallback x navegadors q no entenen svh */   /* alçada real de pantalla visible, sense comptar la barra d'adreces q apareix/desapareix al mòbil (Safari) — amb 100vh la capçalera es podia allargar per sota del que es veia realment */
  overflow: hidden;
  padding: 0;
}

#hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60%;
  background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.7));
}

.hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero-text {
  position: absolute;
  bottom: 10%;
  left: 5%;
  right: 5%;
  color: white;
  z-index: 1;
}

h1 {
  font-family: 'Aeonik', sans-serif;
  font-size: clamp(2.2rem, 6vw, 4.5rem);   /* abans clamp(2.5rem, 8vw, 6rem) -> feia 96px a escriptori ample, massa dominant */
  font-weight: 400;
  line-height: 1.1;
  margin-bottom: 1rem;
}

h1 em {
  font-style: italic;
}

.hero-subtitol {
  font-family: 'Aeonik', sans-serif;
  font-weight: 300;
  font-size: clamp(1rem, 2.5vw, 1.4rem);
  opacity: 0.9;
}

/* al mòbil, el mínim del clamp (2.5rem) era massa gran x pantalles estretes: el text quedava
   pràcticament al límit de la caixa, sense marge, i es veia tallat pels laterals */
@media (max-width: 480px) {
  h1 {
    font-size: clamp(1.8rem, 8vw, 4.5rem);   /* abans clamp(2.1rem, 10vw, 6rem) -> feia 37,5px a l'iPhone estàndard, es volia + petit */
  }

  .hero-text {
    left: 6%;
    right: 6%;
  }
}



/* ========================================================== */
/* 01. XIFRES CLAU */
/* ========================================================== */

#xifres {
  display: flex;
  justify-content: center;
  gap: 4rem;
  padding: 5rem 2rem 2rem 2rem;
  flex-wrap: wrap;
}

.xifra {
  text-align: center;
}

.num {
  display: block;
  font-family: 'Aeonik', sans-serif;
  font-size: clamp(3rem, 8vw, 5rem);
  line-height: 1;
  margin-bottom: 0.5rem;
}

#xifres .label {
  font-family: 'Orbikular', sans-serif;
  font-weight: 300;
  font-size: 1rem;
  text-transform: none;
  letter-spacing: 0.1em;
  opacity: 0.6;
}



/* ========================================================== */
/* 02. TEXT INTRO */
/* ========================================================== */

#intro {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.text-intro {
  max-width: 700px;
  margin: 0.5rem auto;
  text-align: left;
  font-family: 'Orbikular', sans-serif;
  font-weight: 300;
  font-size: 1.2rem;
  line-height: 1.8;
  color: #333;
}

.text-intro p {
  margin-bottom: 1.2rem;
}



/* ========================================================== */
/* 03. MAPA */
/* ========================================================== */

.mapa-layout {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 4rem;      /* separació entre les 2 colm */
  align-items: center;
}

@media (max-width: 768px) {
  .mapa-layout {
    grid-template-columns: 1fr;
  }
}

/* Mapa Datawrapper: min-height, NO height fixa. L'script d'incrustació de Datawrapper
   ajusta l'alçada real de l'iframe dinàmicament (segons el contingut del mapa, que pot
   canviar) — amb una alçada FIXA, si l'iframe necessitava més espai del q li donàvem,
   es desbordava per sota del contenidor i "trepitjava" la secció següent. El min-height
   evita, mentre el mapa encara carrega (abans de rebre l'alçada real), q el contenidor
   es vegi buit/col·lapsat un instant. */
#chart-mapa {
  width: 100%;
  min-height: 500px;
}

@media (max-width: 768px) {
  #chart-mapa {
    min-height: 350px;
  }
}


/* ========================================================== */
/* 04. RÀNQUING ARTISTES (barres radial) */
/* ========================================================== */

#artistes {
  padding-bottom: 0.5rem;
}

#artistes h2 {
  margin-bottom: 0.3rem;
}

.label-radial {
  font-size: 14px;         /* mida etiquetes ats */
  fill: #333;
}

.value-radial {
  font-size: 12px;         /* mida etiquetes valors */
  fill: white;
}

/* pq al mòbil NO surti com un cercle fet amb línies discontínues */
#chart-barres svg {
  display: block;
  margin: 0 auto;   /* centrem l'SVG al contenidor, en lloc d'estirar-lo a tota l'amplada (width:100%): l'SVG ja té width/height explícits des del JS, i estirar-lo desproporciona el text */
}

#chart-barres .bar-radial {
  stroke: none;
}

/* BARRES RADIAL x MÒBIL: etiquetes + petites, pq el cercle també és + petit */
@media (max-width: 768px) {
  .label-radial {
    font-size: 7px;
  }
  .value-radial {
    font-size: 6px;
  }
}



/* ========================================================== */
/* 05. SANKEY */
/* ========================================================== */

#sankey {
  padding-top: 1rem;
  padding-bottom: 3rem;
}

#chart-sankey svg {
  display: block;
  width: 100%;
  height: auto;
}

/* LINKS SANKEY */
.link {
  fill: none;
  stroke: #C8096C;
  transition: stroke-opacity 1.5s ease;
}

/* SANKEY: NOMS FEST */
.label-festival {
  font-size: 12px;
  fill: #333;
}

.node {
  transition: opacity 1.5s ease;
}

.label {
  transition: opacity 1.5s ease;
}


/* SCROLLYTELLING SANKEY: STEPS */
#contenidor-scroll {
  position: sticky!important;
  top: 3.5rem !important;
  width: 100%;
}

#steps {
  position: relative;
  margin-top: -100vh;
  z-index: 10;
  pointer-events: none;
}

.step {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.step-text {
  background: rgba(243, 243, 243, 0.85);
  padding: 15px 20px;
  max-width: 300px;
  font-size: 16px;
  color: #333;
  pointer-events: all;
  text-align: center;
  border: 1px solid #ccc;
  border-radius: 8px;
}

/* pq SANKEY funcioni bé a mòbil: sense scrollytelling, es veu el gràfic sencer directament */
@media (max-width: 768px) {
  .step-text {
    font-size: 12px;
    max-width: 200px;
    padding: 10px 15px;
  }

  #contenidor-scroll {
    position: static;     /* treu el sticky, pq si no el gràfic queda enganxat a dalt mentre es fa scroll dels steps */
  }

  #steps {
    display: none;        /* a mòbil el JS ja mostra el gràfic sencer des del principi, no calen els steps ni l'espai buit que generen (margin-top: -100vh) */
  }

  .label-festival {
    font-size: 8px;
  }

  .label-cantant {
    font-size: 8px;
  }
}



/* ========================================================== */
/* 06. SIMILITUD CARTELLS (chord) */
/* ========================================================== */

#similitud {
  padding-top: 3rem;
}

#similitud h2 {
  margin-bottom: 0.3rem;
}

#chart-chord svg {
  display: block;
  width: 100%;
  height: auto;
}

/* CHORD: NOMS FEST */
.label-chord {
  font-size: 11px;
  fill: #333;
}

/* CHORD x MÒBIL: etiquetes + petites, pq el cercle també és + petit */
@media (max-width: 768px) {
  .label-chord {
    font-size: 6px;
  }
}


/* ========================================================== */
/* 06bis. GOFRE */
/* ========================================================== */
/* el centrat (display:block + margin:0 auto) ja el posa el propi gofre.js sobre l'SVG,
   consistent amb la resta de gràfics -- aquí no cal repetir-ho */



/* ========================================================== */
/* BLOC DESTACAT (calendari + organitzadors/preus + ajuts):
   fons de color a tota la pantalla, sense afectar l'amplada del
   contingut de dins (les section internes continuen amb el seu
   max-width:1100px de sempre, només canvia el color de fons) */
/* ========================================================== */

.bloc-canicula {
  background-color: #83f2d2;
}



/* ========================================================== */
/* 07. CALENDARI */
/* ========================================================== */

#chart-calendari {
  background: transparent;
  height: auto;
}

/* color eix */
#chart-calendari .domain,
#chart-calendari .tick line {
  stroke: #ccc;
}

/* tipogr i color etiquetes */
#chart-calendari .tick text {
  font-family: 'Orbikular', sans-serif;
  font-size: 12px;
  fill: #888;
}



/* ========================================================== */
/* 08. ORGANITZADORS i PREUS (cercles concèntrics) */
/* ========================================================== */

.dues-columnes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

@media (max-width: 768px) {
  .dues-columnes {
    grid-template-columns: 1fr;
  }
}

#chart-organitzadors svg,
#chart-preus svg {
  display: block;
  margin: 0 auto;   /* centrem l'SVG a la columna, en lloc d'estirar-lo (width:100%): l'SVG ja té width/height explícits des del JS */
}

/* ONA DE SO: cercle "eco" q es va expandint en bucle. Es manté nítid (opacitat gairebé plena) fins
   gairebé el final i llavors desapareix de cop -> ona seca/neta, no un gruix q es dissol a poc a poc */
.ona-so {
  pointer-events: none;         /* no ha de bloquejar el hover/tooltip del cercle real, que és a sota */
  transform-box: fill-box;      /* pq l'escala es faci des del centre del propi cercle, no des de l'origen de l'SVG */
  transform-origin: center;
  animation: ona-so 0.9s cubic-bezier(0.4, 0, 0.2, 1) infinite;   /* durada real: la sobreescriu el JS per cada gràfic (duradaOna) */
}

/* el pic de creixement (100%) ha d'encaixar amb l'espai reservat als anells a orgPreu.js
   (rScale fa marge x al gruix del propi anell, però no x aquest creixement extra de l'ona;
   per això abans es tallava contra la vora de l'SVG) — reduït de 1.26 a 1.1 pq hi càpiga bé */
@keyframes ona-so {
  0% {
    transform: scale(1);
    opacity: 0.9;
  }
  92% {
    transform: scale(1.06);
    opacity: 0.9;
  }
  100% {
    transform: scale(1.1);
    opacity: 0;
  }
}

/* pq als usuaris q han desactivat les animacions al SO no els polsi el gràfic */
@media (prefers-reduced-motion: reduce) {
  .ona-so {
    display: none;
  }
}

.num-gran {
  font-family: 'Aeonik', sans-serif;
  font-size: clamp(4rem, 10vw, 8rem);
  margin-top: 5rem;
  display: block;
  text-align: center;
}



/* ========================================================== */
/* 09. AJUTS (línia + lollipop beneficiaris) */
/* ========================================================== */

#chart-ajuts {
  background: transparent;
  height: auto;
}

/* color eix */
#chart-ajuts .domain,
#chart-ajuts .tick line {
  stroke: #ccc;
}

/* tipogr i color etiquetes */
#chart-ajuts .tick text {
  font-family: 'Orbikular', sans-serif;
  font-size: 12px;
  fill: #888;
}

@media (max-width: 768px) {
  #chart-ajuts .tick text {
    font-size: 9px;
  }
}

/* lollipop beneficiaris */
#chart-beneficiaris {
  margin-top: 3rem;
}

#chart-beneficiaris .tick text {
  font-size: 14px;
  font-family: 'Orbikular', sans-serif;
  fill: #333;
}

@media (max-width: 768px) {
  #chart-beneficiaris .tick text {
    font-size: 10px;
  }
}

/* eix X del lollipop (marques de referència en €) — provisional, a joc amb el
   calendari/ajuts. Si s'elimina el bloc corresponent a js/beneficiaris.js,
   aquest bloc de CSS es queda sense fer res i també es pot esborrar. 
#chart-beneficiaris .eix-x-ben .domain,
#chart-beneficiaris .eix-x-ben .tick line {
  stroke: #ccc;
}

#chart-beneficiaris .eix-x-ben .tick text {
  font-size: 11px;
  font-family: 'Orbikular', sans-serif;
  fill: #888;
}

@media (max-width: 768px) {
  #chart-beneficiaris .eix-x-ben .tick text {
    font-size: 9px;
  }
} */



/* ========================================================== */
/* SEPARADOR */
/* ========================================================== */

.separador {
  border: none;
  border-top: 1px solid #ccc;
  margin: 2rem auto;
  max-width: 1100px;
}



/* ========================================================== */
/* TOOLTIP (compartit entre chord, org/preu, ajuts i beneficiaris —
   el <div id="tooltip"> viu al final del HTML, després de tots els gràfics) */
/* ========================================================== */

#tooltip {
  position: absolute;
  background: white;
  border: 1px solid #ccc;
  padding: 8px 12px;
  font-size: 14px;
  color: #333;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
  border-radius: 4px;
}


html,
body,
.cd-main-content {
    overflow: visible !important;
    overflow-x: clip !important;
}

.wrap-FICHA-ARTICULO,
.wrap-FICHA-ARTICULO .container,
.wrap-FICHA-ARTICULO .container .row,
.wrap-FICHA-ARTICULO .container .row .col,
.wrap-FICHA-ARTICULO .container .row .col .wrap-FULL {
    overflow: visible !important;
    overflow-x: clip !important;
    height: auto !important;
    max-height: none !important;
}

.wrap-FICHA-ARTICULO .container .row .col .wrap-FULL {
    display: block !important;
}

.wrap-CORP .CORP-center .wrap-logo {
  display: flex !important;
  align-items: center !important;
  overflow: hidden !important;
}

.wrap-HEADER.pinned .wrap-CORP .CORP-center .wrap-logo img {
  height: auto !important;
  width: auto !important; 
  display: block !important;
}