.festival-page {
  --section-nav: 3.25rem;
  font-family: "Mona Sans", system-ui, sans-serif;
}
.festival-page .header { font-family: system-ui, sans-serif; }
.festival-nav {
  position: sticky;
  z-index: 4;
  top: var(--header);
  justify-content: center;
  gap: clamp(.5rem, 4vw, 3rem);
  height: var(--section-nav);
  padding-inline: .75rem;
  color: var(--ink);
  background: var(--yellow);
  border-bottom: 2px solid var(--ink);
}
.festival-nav a {
  display: grid;
  place-items: center;
  min-height: 2.75rem;
  text-align: center;
}
.festival-nav a:hover { color: var(--ink); text-decoration: underline; }
.festival-nav a:focus-visible, .festival-about a:focus-visible { outline-color: var(--ink); outline-offset: 1px; }
.festival-page main > section { scroll-margin-top: calc(var(--header) + var(--section-nav)); }
.festival-wrap { width: min(88%, 79rem); margin-inline: auto; }
.festival-kicker {
  font: 800 .72rem/1.45 system-ui, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 0 0 1rem;
}
.festival-about {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--ink);
  background: var(--cream);
  padding-block: clamp(3rem, 9vw, 8rem);
}
.festival-about::before {
  content: "";
  position: absolute;
  inset: 0 0 0 52%;
  z-index: -1;
  background: var(--red);
  clip-path: polygon(24% 0, 100% 0, 100% 100%, 2% 100%, 13% 57%, 0 43%);
}
.festival-about-layout {
  display: grid;
  grid-template-columns: 1.17fr .83fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
}
.festival-about h1, .festival-section-title h2 {
  font: 900 clamp(2.85rem, 8.5vw, 8.25rem)/.97 "Mona Sans Wide", system-ui, sans-serif;
  letter-spacing: -.075em;
  margin: 0;
}
.festival-about h1 { max-width: 7ch; color: var(--green); }
.festival-about h2 {
  font: 900 clamp(1.15rem, 2vw, 1.8rem)/1.15 "Mona Sans Wide", system-ui, sans-serif;
  color: var(--ink);
  letter-spacing: -.045em;
  margin-top: 1.6rem;
}
.festival-about-copy > p:not(.festival-kicker) {
  max-width: 42ch;
  font-size: clamp(1.02rem, 1.6vw, 1.32rem);
  line-height: 1.6;
  margin: .65rem 0 0;
}
.festival-emblem {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  aspect-ratio: 1.05;
  isolation: isolate;
  filter: drop-shadow(.55rem .65rem var(--ink));
}
.festival-emblem::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--green);
  clip-path: polygon(12% 7%, 86% 0, 100% 24%, 92% 83%, 67% 100%, 3% 92%, 0 28%);
}
.festival-emblem-lion { display: block; width: 60%; height: auto; }
.festival-emblem-paw { position: absolute; width: 21%; height: auto; bottom: -1%; right: 2%; transform: rotate(13deg); }
.festival-section-title {
  color: var(--cream);
  padding-block: clamp(2.5rem, 6vw, 5.5rem);
}
.festival-section-title .festival-kicker { color: var(--yellow); }
.festival-chapter {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--chapter-base);
  color: var(--chapter-ink);
}
.chapter-2024 {
  --chapter-base: var(--year-brown);
  --chapter-ink: var(--year-cream);
  --chapter-accent: var(--year-cream);
  --chapter-next: #3f3f3f;
  --chapter-image: url("assets/historia/24-marrom-textura.webp");
  --chapter-direction: -1;
}
.chapter-2025 {
  --chapter-base: var(--year-gray);
  --chapter-ink: #ffffff;
  --chapter-accent: var(--year-rose);
  --chapter-next: var(--red);
  --chapter-image: url("assets/historia/25-papel-textura.webp");
  --chapter-direction: 1;
}
.chapter-2026 {
  --chapter-base: var(--red);
  --chapter-ink: var(--ink);
  --chapter-accent: var(--green);
  --chapter-next: var(--green);
  --chapter-image: url("assets/historia/fundo-2026.webp");
  --chapter-direction: -1;
}
.chapter-backdrop {
  position: absolute;
  z-index: -2;
  inset: -12%;
  background: var(--chapter-image) center / cover no-repeat;
  opacity: .37;
}
.chapter-2025 .chapter-backdrop { opacity: .27; }
.chapter-2026 .chapter-backdrop { opacity: .48; }
.chapter-layout {
  display: grid;
  grid-template-columns: minmax(0,1.35fr) minmax(0,1fr);
  align-items: center;
  gap: clamp(1.5rem, 5vw, 5rem);
  min-height: min(76svh, 46rem);
  padding-block: clamp(2.8rem, 8vw, 7rem);
}
.chapter-2025 .chapter-layout { grid-template-columns: minmax(0,1fr) minmax(0,1.35fr); }
.chapter-2025 .chapter-art { order: 1; }
.chapter-art {
  position: relative;
  min-width: 0;
  margin: 0;
  isolation: isolate;
}
.chapter-art::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -.6rem -.8rem -.9rem -.6rem;
  background: var(--chapter-accent);
  clip-path: polygon(0 5%, 91% 0, 100% 16%, 97% 96%, 5% 100%);
}
.chapter-art img:first-child { display: block; width: 100%; height: auto; box-shadow: .5rem .65rem #151615; }
.chapter-paw { position: absolute; right: -3%; bottom: -12%; width: 17%; height: auto; }
.chapter-copy {
  position: relative;
  background: var(--chapter-base);
  padding: clamp(1.2rem, 3.4vw, 3rem);
  box-shadow: .42rem .5rem #151615;
}
.chapter-2026 .chapter-copy { background: var(--cream); }
.chapter-copy .festival-kicker { color: var(--chapter-accent); }
.chapter-copy h3 {
  font: 900 clamp(1.65rem, 3.1vw, 3.1rem)/1.06 "Mona Sans Wide", system-ui, sans-serif;
  letter-spacing: -.05em;
  margin: 0 0 .85rem;
}
.chapter-copy time { font: 800 .85rem/1.4 system-ui, sans-serif; }
.chapter-copy > p:not(.festival-kicker) { line-height: 1.6; margin: .85rem 0 0; }
.chapter-explore {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  min-height: 2.75rem;
  margin-top: 1.1rem;
  padding: .55rem .75rem;
  background: var(--chapter-accent);
  color: var(--chapter-base);
  font: 800 .72rem/1.3 system-ui, sans-serif;
  letter-spacing: .045em;
  text-transform: uppercase;
  text-decoration: none;
}
.chapter-explore:hover { text-decoration: underline; }
.festival-team { background: var(--green); color: var(--cream); padding-bottom: clamp(3rem, 8vw, 7rem); overflow: hidden; }
.crew-grid {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: clamp(1.6rem, 4vw, 3.5rem) clamp(.85rem, 3vw, 2.5rem);
  list-style: none;
  padding: 0;
  margin: 0;
}
.crew-card {
  --frame-color: var(--cream);
  --frame-ink: var(--green);
  --frame-cut: polygon(7% 3%, 90% 0, 100% 20%, 93% 91%, 69% 100%, 0 92%, 3% 31%);
  min-width: 0;
}
.crew-card:nth-child(4n + 2), .crew-card:nth-child(4n + 4) { margin-top: clamp(.6rem, 2vw, 2rem); }
.crew-card:nth-child(3n + 2) {
  --frame-color: var(--yellow);
  --frame-ink: var(--ink);
  --frame-cut: polygon(0 13%, 26% 1%, 95% 5%, 100% 72%, 81% 98%, 4% 100%);
}
.crew-card:nth-child(3n) {
  --frame-color: var(--red);
  --frame-ink: #fff;
  --frame-cut: polygon(8% 1%, 87% 3%, 100% 29%, 95% 100%, 17% 96%, 0 75%);
}
.crew-frame {
  position: relative;
  isolation: isolate;
  aspect-ratio: 4 / 3;
  filter: drop-shadow(.35rem .46rem var(--ink));
}
.crew-media {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  clip-path: var(--frame-cut);
  background: var(--frame-color);
  color: var(--frame-ink);
}
.crew-media::before {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  opacity: .1;
  clip-path: polygon(0 76%, 100% 8%, 100% 26%, 0 94%);
}
.crew-initials { z-index: 1; font: 900 clamp(1.7rem, 5vw, 4.2rem)/1 "Mona Sans Wide", system-ui, sans-serif; }
.crew-media img { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.crew-media img.is-ready { opacity: 1; }
.crew-card h3 {
  font: 900 clamp(.92rem, 1.9vw, 1.45rem)/1.16 "Mona Sans Wide", system-ui, sans-serif;
  letter-spacing: -.04em;
  margin: .85rem 0 0;
  overflow-wrap: anywhere;
}
.crew-role { font-size: .85rem; margin: .35rem 0 0; }

@media (prefers-reduced-motion: no-preference) {
  .festival-about::before { transform: translateX(calc(-9% * var(--leave,0))); }
  .festival-emblem { transform: translateY(calc(-1.65rem * var(--leave,0))) rotate(calc(-5deg * var(--leave,0))) scale(calc(1 + .08 * var(--leave,0))); }
  .festival-emblem-paw { transform: translateX(calc(1.1rem * var(--leave,0))) rotate(calc(13deg + 19deg * var(--leave,0))); }
  .chapter-backdrop {
    transform: translateY(calc(6% * (1 - var(--enter,1)) - 7% * var(--leave,0))) scale(calc(1.04 + .08 * var(--leave,0)));
  }
  .chapter-art {
    transform: translateX(calc(var(--chapter-direction) * (1.8rem * (1 - var(--enter,1)) + 1.35rem * var(--leave,0))))
      scale(calc(.92 + .08 * var(--enter,1) - .035 * var(--leave,0)));
  }
  .chapter-copy { transform: translateY(calc(1.25rem * (1 - var(--enter,1)))); }
  .festival-chapter::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: auto 0 0;
    height: 31%;
    background: var(--chapter-next);
    clip-path: polygon(0 72%, 73% 0, 100% 34%, 100% 100%, 0 100%);
    transform: translateY(calc(100% * (1 - var(--leave,0))));
  }
  .crew-frame {
    transform: translateY(calc(1.1rem * (1 - var(--enter,1)))) rotate(calc(-5deg * (1 - var(--enter,1))))
      scale(calc(.88 + .12 * var(--enter,1)));
  }
  .crew-card:nth-child(even) .crew-frame { rotate: calc(10deg * (1 - var(--enter,1))); }
}
@media (max-width: 720px) {
  .festival-about-layout, .chapter-layout, .chapter-2025 .chapter-layout { grid-template-columns: minmax(0,1fr); }
  .festival-about h1 { max-width: none; }
  .festival-about::before { inset: 58% 0 0 12%; }
  .festival-emblem { width: min(76%, 20rem); margin-inline: auto; }
  .chapter-layout { min-height: 0; gap: 1.75rem; }
  .chapter-2025 .chapter-art { order: 0; }
  .crew-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

.chapter-2024 .chapter-copy h3 { font-family: var(--year-display); font-weight: 400; }
.chapter-2024 .chapter-copy > p:not(.festival-kicker) {
  font-family: var(--year-copy);
  font-weight: 100;
  font-size: 1.05rem;
}
.chapter-2024 .chapter-copy :is(.festival-kicker, time, .chapter-explore) {
  font-family: var(--year-label);
  font-weight: 600;
}
.chapter-2025 .chapter-copy { border-inline-start: .35rem solid var(--year-red); }
.chapter-2025 .chapter-copy :is(h3, .festival-kicker, .chapter-explore) {
  font-family: var(--year-display);
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.chapter-2025 .chapter-explore { font-size: .94rem; }
.chapter-2025 .chapter-copy :is(p:not(.festival-kicker), time) { font-family: var(--year-copy); }
.chapter-2026 .chapter-copy > p:not(.festival-kicker) { font-family: Altivo, "Mona Sans", system-ui, sans-serif; }
.chapter-2026 .chapter-copy .chapter-explore {
  background: #2e4a2c;
  color: #eee2c9;
  font-family: "Mona Sans", sans-serif;
  font-weight: 400;
  font-size: .86rem;
}