/* =========================================================================
   JIMIX — estils principals
   Tokens → base → components globals → seccions per pàgina → responsive
   ========================================================================= */

/* ---- Tokens ---- */
:root {
  --canvas: #E7E4DD;
  --page: #F1EFE9;
  --panel: #F6F4EF;
  --hero-illu: #EDEFEA;
  --white: #FFFFFF;

  --ink: #1E1E1E;
  --body: #3A3833;
  --body-soft: #6F6A62;
  --muted: #8C8C8C;

  --red: #D92414;
  --red-bright: #FF5A48;

  --teal: #00A99D;
  --teal-vivid: #00C6B8;
  --teal-light: #3FD6C8;
  --teal-text: #00776E;
  --teal-dark: #0E3B37;
  --teal-footer: #0B2724;
  --on-teal: #062C28;

  --navy: #0C1F3D;
  --gray-surface: #3A3833;
  --footer-dark: #161616;

  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Manrope', sans-serif;
  --font-hand: 'Caveat', cursive;

  --shadow-card-lg: 0 24px 60px -24px rgba(0, 0, 0, .5);
  --shadow-card: 0 10px 26px -20px rgba(0, 0, 0, .4);
  --shadow-frame: 0 30px 60px -26px rgba(0, 0, 0, .5);
  --shadow-cover: 0 34px 60px -22px rgba(0, 0, 0, .7);

  --pad-section: 50px 44px;
  --radius-card: 13px;
  --transition: 180ms ease;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--body);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--ink); margin: 0; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
figure { margin: 0; }
button { font-family: inherit; cursor: pointer; }

.site-main { background: var(--page); }

/* Duotò B/N sobre navy */
.duo { background: var(--navy); overflow: hidden; }
.duo img {
  filter: grayscale(1) contrast(1.16) brightness(1.06);
  mix-blend-mode: screen;
  opacity: .96;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- Utilitats ---- */
.section { padding: var(--pad-section); }
.section--panel { background: var(--panel); }

.section-title {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.2;
}

.section-head { margin-bottom: 30px; }
.section-head--split {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.kicker {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--body-soft);
  margin-bottom: 10px;
}
.kicker--red { color: var(--red); }
.kicker--red-bright { color: var(--red-bright); }
.kicker--bar-red::before {
  content: '';
  display: block;
  width: 38px;
  height: 4px;
  margin-bottom: 12px;
  background: var(--red);
}

.breadcrumb {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, .6);
  margin-bottom: 18px;
}
.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb--dark { color: var(--body-soft); }

.btn {
  display: inline-block;
  padding: 12px 22px;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  border: 0;
  transition: transform var(--transition), opacity var(--transition);
}
.btn:hover { transform: translateY(-2px); opacity: .92; }
.btn--red { background: var(--red); color: #fff; }
.btn--dark { background: var(--ink); color: #fff; }

.quote {
  margin: 24px 0 0;
  padding-left: 18px;
  border-left: 3px solid var(--red);
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 500;
  color: var(--ink);
}

.pill {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 18px;
  font-size: 11px;
  font-weight: 700;
}
.pill--red { background: var(--red); color: #fff; }

/* Chips de filtre */
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  padding: 8px 18px;
  border-radius: 20px;
  border: 1px solid rgba(0, 0, 0, .14);
  background: #fff;
  font-size: 13px;
  font-weight: 600;
  color: var(--body);
  transition: background var(--transition), color var(--transition);
}
.chip.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
.chip--tag { cursor: default; }
.is-filtered-out { display: none !important; }

/* Badges */
.badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.badge--campio { background: var(--red); color: #fff; }
.badge--subcampio { background: var(--ink); color: #fff; }
.badge--or { background: #F2D272; color: #6B4E12; }
.badge--plata { background: #C7CAD1; color: #3A3D44; }
.badge--bronze { background: #E2C08D; color: #5A4318; }
.badge--cat-caricatura { background: #D6EFEC; color: #00776E; }
.badge--cat-comic { background: #E7DDF5; color: #6A4AA0; }
.badge--cat-editorial { background: #EDE7D8; color: #7A6428; }

/* Targetes rotades */
.tilt-card {
  background: #fff;
  padding: 10px;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card-lg);
  transform: rotate(-1.5deg);
}
.tilt-card img { border-radius: 8px; }
.tilt-card--right { transform: rotate(1.5deg); margin-top: 28px; }

/* =========================================================================
   Navbar
   ========================================================================= */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 44px;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 250ms ease, border-color 250ms ease, padding 250ms ease;
}
.navbar.is-scrolled {
  background: var(--panel);
  border-bottom-color: rgba(0, 0, 0, .08);
  padding-top: 14px;
  padding-bottom: 14px;
}

/* Text clar quan la navbar transparent és sobre un hero fosc */
@media (min-width: 641px) {
  .section-home .navbar:not(.is-scrolled) .navbar__logo,
  .section-home .navbar:not(.is-scrolled) .navbar__link,
  .section-deportista .navbar:not(.is-scrolled) .navbar__logo,
  .section-deportista .navbar:not(.is-scrolled) .navbar__link,
  .page-template-page-ilustrador .navbar:not(.is-scrolled) .navbar__logo,
  .page-template-page-ilustrador .navbar:not(.is-scrolled) .navbar__link {
    color: #fff;
  }
}
.section-home .navbar:not(.is-scrolled) .navbar__burger span,
.section-deportista .navbar:not(.is-scrolled) .navbar__burger span,
.page-template-page-ilustrador .navbar:not(.is-scrolled) .navbar__burger span {
  background: #fff;
}

/* El logo sempre en blanc sobre hero fosc (també en mòbil: no és al desplegable) */
.section-home .navbar:not(.is-scrolled) .navbar__logo,
.section-deportista .navbar:not(.is-scrolled) .navbar__logo,
.page-template-page-ilustrador .navbar:not(.is-scrolled) .navbar__logo {
  color: #fff;
}

/* Pàgines sense hero: deixa lloc per a la navbar fixa */
.section-legal .site-main,
.single-obra .site-main {
  padding-top: 86px;
}

/* Usuari loguejat: la navbar baixa sota la barra d'admin de WP
   i els heros fullscreen descompten la seva alçada */
body.admin-bar .navbar { top: 32px; }
body.admin-bar .home-hero,
body.admin-bar .hero-stack,
body.admin-bar .libro-hero { min-height: calc(100vh - 32px); }

@media (max-width: 782px) {
  body.admin-bar .navbar { top: 46px; }
  body.admin-bar .home-hero,
  body.admin-bar .hero-stack,
  body.admin-bar .libro-hero { min-height: calc(100vh - 46px); }
}

.navbar__logo {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--ink);
  text-decoration: none;
}
.logo-dot { color: var(--red); }

.navbar__nav { display: flex; align-items: center; gap: 28px; }
.navbar__link {
  font-size: 14px;
  font-weight: 700;
  color: var(--body);
  text-decoration: none;
  transition: color var(--transition);
}
.navbar__link:hover { color: var(--ink); }
.navbar__link.is-active { color: var(--red); }

.navbar__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 8px;
  background: var(--red);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: transform var(--transition), opacity var(--transition);
}
.navbar__cta:hover { transform: translateY(-2px); opacity: .92; }
.navbar__cta.is-active { background: var(--ink); }
.navbar__cta svg { width: 15px; height: 15px; }

.navbar__burger {
  display: none;
  flex-direction: column;
  gap: 6px;
  padding: 8px 4px;
  background: none;
  border: 0;
}
.navbar__burger span {
  width: 22px;
  height: 2px;
  background: var(--ink);
  transition: transform var(--transition);
}

/* =========================================================================
   Footer
   ========================================================================= */
.footer {
  background: var(--footer-dark);
  color: #b8b4ad;
  padding: 34px 44px;
}

.footer__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding: 14px 0;
}
.footer__row--bottom {
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: 12px;
}

.footer__logo {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: #fff;
}

.footer__legal { display: flex; gap: 22px; }
.footer__legal a {
  font-size: 12px;
  font-weight: 600;
  color: #b8b4ad;
  text-decoration: none;
}
.footer__legal a:hover { color: #fff; }

.footer__social { display: flex; gap: 10px; }
.footer__social a {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  transition: background var(--transition);
}
.footer__social a:hover { background: rgba(255, 255, 255, .12); }

.footer__row--bottom a { color: #b8b4ad; }

/* =========================================================================
   Newsletter
   ========================================================================= */
.newsletter {
  background: var(--ink);
  color: #fff;
  padding: 60px 44px;
  text-align: center;
}

.newsletter__inner { max-width: 560px; margin: 0 auto; }

.newsletter__title {
  color: #fff;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.25;
}
.newsletter__subtitle {
  margin: 10px 0 28px;
  color: rgba(255, 255, 255, .7);
  font-size: 15px;
}

.newsletter__form { display: grid; gap: 12px; text-align: left; }
.newsletter__input {
  padding: 14px 16px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: #2a2a2a;
  color: #fff;
  font-family: var(--font-body);
  font-size: 14px;
}
.newsletter__input::placeholder { color: rgba(255, 255, 255, .45); }

.newsletter__consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 12px;
  color: rgba(255, 255, 255, .65);
}
.newsletter__consent input { margin-top: 3px; }

.newsletter__submit {
  padding: 14px;
  border: 0;
  border-radius: 8px;
  background: var(--red);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  transition: opacity var(--transition);
}
.newsletter__submit:hover { opacity: .9; }

.newsletter__msg { font-size: 13px; color: rgba(255, 255, 255, .8); }

/* =========================================================================
   Bottom-nav mòbil
   ========================================================================= */
.bottom-nav {
  position: sticky;
  bottom: 0;
  z-index: 50;
  display: none;
  height: 56px; /* alçada fixa: els heros mòbils resten exactament aquest valor */
  background: var(--ink);
  border-top: 1px solid rgba(255, 255, 255, .1);
}
.bottom-nav__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 4px;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, .55);
  text-decoration: none;
}
.bottom-nav__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: transparent;
}
.bottom-nav__item.is-active { color: #fff; }
.bottom-nav__item.is-active .bottom-nav__dot { background: var(--red-bright); }

/* =========================================================================
   Stat strip
   ========================================================================= */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding: 34px 44px;
  background: var(--ink);
}

.stat-strip__value {
  display: block;
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  color: #fff;
  line-height: 1.1;
}
.stat-strip__value.is-accent { color: var(--red-bright); }

.stat-strip__label {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* =========================================================================
   Home
   ========================================================================= */
.home-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  background: var(--navy);
}

.hero-scroll {
  position: absolute;
  right: 44px;
  bottom: 34px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 50%;
  color: #fff;
  animation: jimix-bounce 2.2s ease-in-out infinite;
  transition: background var(--transition);
}
.hero-scroll:hover { background: rgba(255, 255, 255, .12); }
.hero-scroll svg { width: 20px; height: 20px; }

@keyframes jimix-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(7px); }
}
.home-hero__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* Vídeo de fons: cobreix tot el hero mantenint 16:9 */
.home-hero__media--video { background: var(--navy); }
.home-hero__media--video iframe,
.home-hero__media--video video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: max(100vw, 177.78vh);
  height: max(100vh, 56.25vw);
  border: 0;
  pointer-events: none;
}

/* Passi de diapositives: imatges apilades amb fos encreuat */
.hero-slideshow img {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.hero-slideshow img.is-visible { opacity: .96; }
.home-hero__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(4, 10, 22, .55), transparent 200px),
    linear-gradient(180deg, rgba(12, 31, 61, .1) 30%, rgba(12, 31, 61, .92));
}
.home-hero__content {
  position: relative;
  padding: 60px 44px 54px;
}
.home-hero__title {
  color: #fff;
  font-size: 78px;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: .96;
}
.home-hero__subtitle {
  margin-top: 16px;
  color: rgba(255, 255, 255, .75);
  font-size: 15px;
  font-weight: 600;
}

.home-explore__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.explore-card {
  display: block;
  background-color: var(--panel);
  border-radius: var(--radius-card);
  overflow: hidden;
  text-decoration: none;
  box-shadow: var(--shadow-card);
  transition: transform var(--transition), box-shadow var(--transition);
}
.explore-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-lg);
}
.explore-card__media { aspect-ratio: 16 / 10; }
.explore-card__media img { width: 100%; height: 100%; object-fit: cover; }
.explore-card__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 22px;
}
.explore-card__foot .kicker { margin-bottom: 4px; }
.explore-card__title { font-size: 30px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.explore-card__btn {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  color: #fff;
  font-size: 18px;
}
.explore-card--red .explore-card__btn { background: var(--red); }
.explore-card--teal .explore-card__btn { background: var(--teal); }
.explore-card--red .kicker { color: var(--red); }
.explore-card--teal .kicker { color: var(--teal-text); }

/* Targeta ampla (Medios): imatge a l'esquerra, peu a la dreta, fons gris fosc */
.explore-card--wide {
  margin-top: 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  background-color: var(--panel);
}
.explore-card--wide .explore-card__title { color: var(--ink); }
.explore-card--wide .explore-card__desc { color: var(--body-soft); }
.explore-card--wide .kicker { color: var(--red); }
.explore-card--wide .explore-card__media {
  aspect-ratio: auto;
  min-height: 140px;
  height: 100%;
}
.explore-card--wide .explore-card__foot {
  align-self: center;
  padding: 20px 30px;
}

.explore-card__desc {
  margin: 6px 0 0;
  font-size: 14px;
  color: var(--body-soft);
  max-width: 480px;
}

.home-news__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.card-novetat {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  text-decoration: none;
  transition: transform var(--transition), box-shadow var(--transition);
}
a.card-novetat:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-lg); }
.card-novetat__thumb {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--canvas);
}
.card-novetat__thumb img { width: 100%; height: 100%; object-fit: cover; }
.card-novetat__body { padding: 16px 18px 18px; }
.card-novetat__title { font-size: 16px; font-weight: 700; margin: 0 0 2px; }
.card-novetat__excerpt { font-size: 13px; color: var(--body-soft); }

/* =========================================================================
   Deportista
   ========================================================================= */
/* Hero fullscreen amb la stat strip enganxada al peu de pantalla */
.hero-stack {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.hero-stack .subhero {
  flex: 1;
  min-height: 0;
}

.subhero {
  position: relative;
  min-height: 380px;
  display: flex;
  align-items: flex-end;
  background: var(--navy);
}
.subhero__media { position: absolute; inset: 0; overflow: hidden; }
.subhero__media img { width: 100%; height: 100%; object-fit: cover; }
.subhero__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(4, 10, 22, .55), transparent 200px),
    linear-gradient(90deg, rgba(12, 31, 61, .95) 20%, rgba(12, 31, 61, .35) 75%);
}
.subhero__content {
  position: relative;
  padding: 46px 44px;
  max-width: 640px;
}
.subhero__content .kicker { color: rgba(255, 255, 255, .7); }
.subhero__title {
  color: #fff;
  font-size: 72px;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1;
}
.subhero__desc {
  margin-top: 14px;
  color: rgba(255, 255, 255, .78);
  font-size: 15px;
}
.subhero__hand {
  font-family: var(--font-hand);
  font-size: 30px;
  font-weight: 600;
  color: var(--red-bright);
  margin: 8px 0 0;
}

.bio-grid {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 48px;
}
.bio-grid__body p { max-width: 640px; }

/* Variant amb imatge a la dreta del text */
.bio-grid--foto {
  grid-template-columns: 280px 1fr 320px;
  align-items: start;
}
.bio-grid__img {
  border-radius: var(--radius-card);
  overflow: hidden;
}
.bio-grid__img img { width: 100%; height: 100%; object-fit: cover; }

.palmares__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.card-palmares {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  background: #fff;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.card-palmares__content { flex: 1; min-width: 0; padding: 16px 18px; }
.card-palmares__img {
  flex: 0 0 45%;
  aspect-ratio: 4 / 3;
  background: var(--canvas);
}
.card-palmares__img img { width: 100%; height: 100%; object-fit: cover; }
.card-palmares__year {
  display: block;
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
  margin-bottom: 8px;
}
.card-palmares__title { font-size: 16px; margin-top: 8px; }
.card-palmares__subtitle {
  margin-top: 4px;
  font-size: 12px;
  color: var(--body-soft);
}

/* Condecoracions personals */
.condecoracions__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.condecoracio {
  background: #fff;
  border-radius: var(--radius-card);
  padding: 24px;
  box-shadow: var(--shadow-card);
}
.condecoracio__icon { display: inline-block; color: var(--red); margin-bottom: 12px; }
.condecoracio__icon svg { width: 26px; height: 26px; }
.condecoracio__year {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.condecoracio__title { font-size: 18px; margin: 4px 0 8px; }
.condecoracio__text { font-size: 14px; color: var(--body-soft); }

/* Trajectòria: timeline a l'esquerra, detall desplegable a la dreta */
.trajectoria__layout {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 4fr);
  gap: 48px;
  align-items: start;
}
.trajectoria__detail-col {
  position: sticky;
  top: 110px;
}

.timeline {
  position: relative;
  max-width: 720px;
  padding-left: 34px;
}
.trajectoria__layout .timeline {
  max-width: none;
  margin: 0;
}
.timeline::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: rgba(0, 0, 0, .15);
}
.timeline-item { position: relative; padding-bottom: 26px; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item__node {
  position: absolute;
  left: -34px;
  top: 8px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--red);
  border: 4px solid var(--panel);
}
.timeline-item--seleccio .timeline-item__node { background: var(--red-bright); }

.timeline-item__card {
  display: flex;
  gap: 18px;
  background: #fff;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.timeline-item__media { flex: 0 0 150px; }
.timeline-item__media img { width: 150px; height: 100%; object-fit: cover; }
.timeline-item__body { padding: 18px 20px; }
.timeline-item__years {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--red);
}
.timeline-item__team { font-size: 20px; margin: 4px 0 6px; }
.timeline-item__desc { font-size: 14px; color: var(--body-soft); }

.timeline-item--seleccio .timeline-item__card { background: var(--red); }
.timeline-item--seleccio .timeline-item__years { color: rgba(255, 255, 255, .85); }
.timeline-item--seleccio .timeline-item__team { color: #fff; }
.timeline-item--seleccio .timeline-item__desc { color: rgba(255, 255, 255, .82); }

/* Ítems desplegables */
.timeline-item--expandible .timeline-item__card {
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition);
}
.timeline-item--expandible .timeline-item__card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-lg);
}
.timeline-item__caret {
  display: inline-block;
  margin-left: 8px;
  color: var(--red);
  transition: transform var(--transition);
}
.timeline-item.is-open .timeline-item__caret { transform: translateX(4px); }
.timeline-item.is-open .timeline-item__card {
  outline: 2px solid var(--red);
  outline-offset: -2px;
}
.timeline-item--seleccio .timeline-item__caret { color: #fff; }
.timeline-item--seleccio.is-open .timeline-item__card { outline-color: #fff; }

/* Panell de detall: llista inline dates + foto */
.timeline-item__detail {
  background: #fff;
  border-radius: var(--radius-card);
  padding: 22px 24px;
  box-shadow: var(--shadow-card-lg);
}
.timeline-item__detail-title {
  font-size: 22px;
  margin-bottom: 8px;
}
.periode {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-top: 1px solid rgba(0, 0, 0, .08);
}
.timeline-item__detail-list .periode:first-child { border-top: 0; }
.periode__info { flex: 1; min-width: 0; }
.periode__dates {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
}
.periode__text {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--body-soft);
}
.periode__foto {
  display: block;
  flex: 0 0 110px;
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  overflow: hidden;
  background: var(--canvas);
  transition: opacity var(--transition);
}
.periode__foto:hover { opacity: .85; }
.periode__foto img { width: 100%; height: 100%; object-fit: cover; }

/* Galeria masonry + lightbox */
.galeria__masonry {
  columns: 3 260px;
  column-gap: 14px;
}
.galeria__link {
  display: block;
  break-inside: avoid;
  margin-bottom: 14px;
}
.galeria__item {
  position: relative;
  border-radius: var(--radius-card);
  transition: transform var(--transition);
}
.galeria__link:hover .galeria__item { transform: translateY(-3px); }
.galeria__item img { width: 100%; height: auto; }
.galeria__item figcaption {
  position: absolute;
  left: 12px;
  bottom: 12px;
  background: rgba(255, 255, 255, .92);
  color: var(--ink);
}

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 8, 8, .93);
}
.lightbox__img {
  max-width: 88vw;
  max-height: 82vh;
  border-radius: 6px;
  box-shadow: var(--shadow-cover);
}
.lightbox__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 26px;
  text-align: center;
  color: rgba(255, 255, 255, .85);
  font-size: 14px;
}
.lightbox__close,
.lightbox__prev,
.lightbox__next {
  position: absolute;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 50%;
  background: transparent;
  color: #fff;
  font-size: 20px;
  line-height: 1;
}
.lightbox__close { top: 24px; right: 24px; }
.lightbox__prev { left: 24px; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 24px; top: 50%; transform: translateY(-50%); }
.lightbox__close:hover,
.lightbox__prev:hover,
.lightbox__next:hover { background: rgba(255, 255, 255, .14); }

/* CTA panells */
.cta-panel {
  text-align: center;
  border-radius: 0;
}
.cta-panel--dark { background-color: var(--ink); }
.cta-panel--canvas { background-color: var(--canvas); }
.cta-panel--canvas .cta-panel__title { color: var(--ink); }
.cta-panel--dark .cta-panel__title { color: #fff; }
.cta-panel__title {
  font-size: 28px;
  max-width: 560px;
  margin: 0 auto 26px;
  line-height: 1.3;
}
.cta-panel .kicker { margin-bottom: 14px; }

/* =========================================================================
   Ilustrador
   ========================================================================= */
.bio-grid--artista .chips--static { margin-top: 24px; }

.portfolio__grid {
  columns: 3 280px;
  column-gap: 20px;
}

.card-obra {
  display: block;
  break-inside: avoid;
  margin-bottom: 20px;
  background: #fff;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  text-decoration: none;
  transition: transform var(--transition), box-shadow var(--transition);
}
.card-obra:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-lg); }
.card-obra__media { background: var(--canvas); }
.card-obra__media img { width: 100%; height: auto; display: block; }
.card-obra__body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
}
.card-obra__title { font-size: 16px; }

/* Projecte destacat (imatge a la dreta, sense rotació) */
.featured-book {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 48px;
  align-items: center;
  background-color: var(--canvas);
}
.featured-book__cover {
  box-shadow: var(--shadow-cover);
  border-radius: 6px;
  overflow: hidden;
}
.featured-book__title { color: var(--ink); font-size: 40px; letter-spacing: -.02em; }
.featured-book__hand {
  font-family: var(--font-hand);
  font-size: 26px;
  color: var(--red);
  margin: 6px 0 12px;
}
.featured-book__desc { color: var(--body); max-width: 560px; }
.featured-book__actions {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 22px;
}
.featured-book__publisher {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--body-soft);
}

/* Procés */
.proces__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.proces__card {
  background: var(--panel);
  border-radius: var(--radius-card);
  padding: 26px;
}
.proces__num {
  display: block;
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 700;
  color: var(--red);
  margin-bottom: 10px;
}
.proces__card h3 { font-size: 18px; margin-bottom: 8px; }
.proces__card p { font-size: 14px; color: var(--body-soft); }

/* =========================================================================
   Libro
   ========================================================================= */
.libro-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
  background-color: var(--canvas);
  background-image:
    linear-gradient(90deg, rgba(231, 228, 221, .92), rgba(231, 228, 221, .6) 65%),
    url(../img/court-bg.jpg);
  background-size: auto, cover;
  background-position: center;
}
.libro-hero__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 120px 44px 56px;
}
.libro-hero__meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 18px;
}
.libro-hero__meta .kicker { margin: 0; }
.libro-hero__title {
  font-size: 66px;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.02;
  margin: 6px 0 16px;
}
.libro-hero__subtitle { font-size: 17px; max-width: 480px; }
.libro-hero__prologue {
  color: var(--red);
  font-weight: 700;
  font-size: 15px;
  margin: 12px 0 24px;
}
.libro-hero__publisher {
  margin-top: 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--teal-text);
}

.libro-hero__panel {
  display: grid;
  place-items: center;
  padding: 120px 44px 56px;
}
/* Portada amb el mateix look que la foto d'"El eterno Jimix": marc blanc + ombra */
.libro-hero__cover {
  width: 400px;
  max-width: 100%;
  background: #fff;
  padding: 12px;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card-lg);
}
.libro-hero__cover img { border-radius: 8px; }

/* A la pàgina Libro les imatges van sense rotació */
.section-libro .tilt-card { transform: none; }

/* El eterno Jimix */
.eterno {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.eterno__media {
  position: relative;
  padding-bottom: 40px;
  max-width: 420px;
  justify-self: center;
}
.eterno__quote {
  position: absolute;
  right: -6px;
  bottom: 0;
  max-width: 300px;
  margin: 0;
  padding: 18px 22px;
  background: var(--ink);
  color: #fff;
  border-radius: var(--radius-card);
  font-family: var(--font-display);
  font-size: 17px;
  box-shadow: var(--shadow-card-lg);
}
.eterno__quotemark {
  display: block;
  color: var(--red-bright);
  font-size: 40px;
  line-height: .6;
  margin-bottom: 8px;
}
.eterno__title { font-size: 52px; letter-spacing: -.02em; margin: 6px 0 18px; }

/* Tres piezas */
.piezas__title { text-align: center; margin-bottom: 34px; }
.piezas__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.piezas__card {
  background: #fff;
  border-radius: var(--radius-card);
  padding: 26px;
  box-shadow: var(--shadow-card);
}
.piezas__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.piezas__num {
  display: block;
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 700;
}
.piezas__num--teal { color: var(--teal); }
.piezas__num--red { color: var(--red); }
.piezas__num--ink { color: var(--ink); }
.piezas__icon svg { width: 28px; height: 28px; }
.piezas__icon--teal { color: var(--teal); }
.piezas__icon--red { color: var(--red); }
.piezas__icon--ink { color: var(--ink); }
.piezas__card h3 { font-size: 18px; margin-bottom: 8px; }
.piezas__card p { font-size: 14px; color: var(--body-soft); }
.piezas__closing {
  max-width: 640px;
  margin: 34px auto 0;
  text-align: center;
}

/* =========================================================================
   Fitxa d'obra
   ========================================================================= */
.obra-single { max-width: 860px; margin: 0 auto; }
.obra-single__head {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 8px 0 16px;
}
.obra-single__title { font-size: 44px; letter-spacing: -.02em; }
.obra-single__desc { max-width: 640px; margin-bottom: 28px; }
.obra-single__imatges { display: grid; gap: 18px; }
.obra-single__imatge {
  display: block;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform var(--transition);
}
.obra-single__imatge:hover { transform: translateY(-3px); }
.obra-single__imatge img { width: 100%; display: block; }
.obra-single__back { margin-top: 32px; }

/* =========================================================================
   Medios de comunicación
   ========================================================================= */
.medios-head {
  padding-top: 130px;
  padding-bottom: 10px;
  max-width: 820px;
}
.medios-head__title {
  font-size: 56px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1;
}
.medios-head__desc { margin-top: 14px; color: var(--body-soft); max-width: 560px; }

.medios__grid {
  columns: 3 300px;
  column-gap: 20px;
}

.card-medio {
  break-inside: avoid;
  margin-bottom: 20px;
  background: #fff;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.card-medio__img {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--canvas);
}
.card-medio__img img { width: 100%; height: 100%; object-fit: cover; }
a.card-medio__img { transition: opacity var(--transition); }
a.card-medio__img:hover { opacity: .9; }

.card-medio__video iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
}
.card-medio__podcast iframe {
  display: block;
  width: 100%;
  border: 0;
}

.card-medio__xxss { padding: 10px 10px 0; }
.card-medio__xxss .instagram-media,
.card-medio__xxss .tiktok-embed,
.card-medio__xxss .twitter-tweet {
  margin: 0 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}
.card-medio__xxss iframe { max-width: 100%; }

.card-medio__external {
  display: inline-block;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--red);
  text-decoration: none;
}
.card-medio__external:hover { text-decoration: underline; }

.card-medio__body { padding: 16px 18px 18px; }
.card-medio__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.badge--medio { background: var(--canvas); color: var(--body); }
.card-medio__title { font-size: 17px; }
.card-medio__font {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 700;
  color: var(--red);
}
.card-medio__desc { margin-top: 8px; font-size: 13px; color: var(--body-soft); }

/* =========================================================================
   Legal
   ========================================================================= */
.legal-content { max-width: 760px; margin: 0 auto; min-height: 50vh; }
.legal-content__body { margin-top: 24px; }

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 900px) {
  .home-explore__grid,
  .explore-card--wide,
  .libro-hero,
  .eterno,
  .featured-book,
  .bio-grid { grid-template-columns: 1fr; }

  .explore-card--wide .explore-card__media { min-height: 0; aspect-ratio: 5 / 4; height: auto; }

  .palmares__grid,
  .proces__grid,
  .home-news__list,
  .condecoracions__grid,
  .piezas__grid { grid-template-columns: 1fr 1fr; }

  .featured-book__cover { order: -1; max-width: 260px; }
}

@media (max-width: 640px) {
  .section { padding: 30px 20px; }
  .navbar { padding: 14px 20px; }

  .navbar__nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--panel);
    border-bottom: 1px solid rgba(0, 0, 0, .08);
  }
  .navbar__nav.is-open { display: flex; }
  .navbar__nav .navbar__link { padding: 14px 20px; border-top: 1px solid rgba(0, 0, 0, .06); }
  .navbar__nav .navbar__cta { margin: 12px 20px 16px; justify-content: center; }
  .navbar__burger { display: flex; }

  .navbar:not(.is-scrolled):not(:has(.navbar__nav.is-open)) { background: transparent; }
  .navbar:has(.navbar__nav.is-open) { background: var(--panel); border-bottom-color: rgba(0, 0, 0, .08); }
  .navbar:has(.navbar__nav.is-open) .navbar__burger span { background: var(--ink); }
  .navbar:has(.navbar__nav.is-open) .navbar__logo { color: var(--ink); }

  .bottom-nav { display: flex; }

  /* La bottom-nav fixa (~56px) tapa el peu del hero: es descompta de l'alçada.
     100svh evita a més el retall per la barra del navegador mòbil. */
  .home-hero,
  .hero-stack,
  .libro-hero {
    min-height: calc(100vh - 56px);
    min-height: calc(100svh - 56px);
  }
  body.admin-bar .home-hero,
  body.admin-bar .hero-stack,
  body.admin-bar .libro-hero {
    min-height: calc(100vh - 102px);
    min-height: calc(100svh - 102px);
  }

  .explore-card__btn { width: 41px; height: 41px; font-size: 16px; }

  .home-hero__content { padding: 40px 20px 90px; }
  .home-hero__title { font-size: 46px; }
  .home-hero__subtitle { font-size: 16px; }
  .hero-scroll { left: 20px; right: auto; bottom: 22px; width: 44px; height: 44px; }

  .subhero { min-height: 300px; }
  .subhero__content { padding: 30px 20px; }
  .subhero__title { font-size: 46px; }
  .subhero__hand { font-size: 24px; }

  .stat-strip { grid-template-columns: 1fr 1fr; padding: 20px; gap: 14px 10px; }
  .stat-strip__value { font-size: 20px; }
  .stat-strip__label { font-size: 9px; letter-spacing: .08em; }

  .bio-grid { gap: 24px; }

  .palmares__grid { grid-template-columns: 1fr; }
  .card-palmares__content {
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: center;
    gap: 6px 14px;
    padding: 14px 16px;
  }
  .card-palmares__year { font-size: 26px; margin: 0; }
  .card-palmares__title { grid-column: 3; margin: 0; font-size: 15px; }
  .card-palmares__subtitle { grid-column: 1 / -1; margin: 0; }
  .card-palmares__img { flex-basis: 38%; }

  .galeria__masonry { columns: 2 130px; column-gap: 10px; }
  .galeria__link { margin-bottom: 10px; }

  .timeline { padding-left: 26px; }
  .trajectoria__layout { grid-template-columns: 1fr; gap: 0; }
  .trajectoria__detail-col { display: none; }
  .timeline-item__node { left: -26px; }
  .timeline-item.is-open .timeline-item__detail { margin-top: 12px; }
  .timeline-item__card { flex-direction: column; }
  .timeline-item__media { flex: none; }
  .timeline-item__media img { width: 100%; height: 150px; }

  .proces__grid,
  .home-news__list,
  .condecoracions__grid,
  .piezas__grid { grid-template-columns: 1fr; }

  .medios__grid,
  .portfolio__grid { columns: 1; }

  .medios-head { padding-top: 100px; }
  .medios-head__title { font-size: 38px; }

  .obra-single__title { font-size: 32px; }

  .libro-hero__text { padding: 100px 20px 34px; }
  .libro-hero__title { font-size: 40px; }
  .libro-hero__panel { padding: 10px 20px 44px; }
  .libro-hero__cover { width: 280px; }

  .eterno__quote { position: static; margin-top: -20px; margin-left: 20px; }
  .eterno__title { font-size: 36px; }

  .featured-book__cover { max-width: 200px; }
  .featured-book__title { font-size: 30px; }

  .footer { padding: 24px 20px; }
  .footer__row { justify-content: center; text-align: center; }

  .newsletter { padding: 44px 20px; }
  .newsletter__title { font-size: 24px; }
}

/* =========================================================================
   Textures per a superfícies de color
   ========================================================================= */

/* Punts de mig to esvaïts des de la cantonada superior dreta (to còmic) */
.bg-dots-fade {
  background-image:
    radial-gradient(circle at 85% 20%, #E7E4DD00 0%, #E7E4DD 55%),
    radial-gradient(rgba(217, 36, 20, .22) 1.6px, transparent 1.6px);
  background-size: auto, 13px 13px;
}

/* Pilota de bàsquet gran única, retallada a la cantonada inferior dreta */
.bg-ball {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='520' viewBox='0 0 520 520'%3E%3Cg fill='none' stroke='%23D92414' stroke-opacity='.13' stroke-width='3' transform='rotate(18 260 260)'%3E%3Ccircle cx='260' cy='260' r='210'/%3E%3Cpath d='M260 50v420M50 260h420M120 105c85 75 85 235 0 310M400 105c-85 75-85 235 0 310'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 115% 130%;
}