@font-face {
  font-family: "Montserrat";
  src: url("./fonts/Montserrat-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("./fonts/Montserrat-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("./fonts/Montserrat-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("./fonts/Montserrat-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Monument Extended";
  src: url("./fonts/MonumentExtended-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Monument Extended";
  src: url("./fonts/MonumentExtended-Ultrabold.otf") format("opentype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("./fonts/Poppins-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("./fonts/Poppins-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("./fonts/Poppins-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: #8fe7ff;
}

body {
  overflow-x: hidden;
}

.floating-navigation {
  position: fixed;
  top: 10px;
  left: 21px;
  z-index: 2000;
  font-family: "Montserrat", sans-serif;
}

.floating-navigation-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 116px;
  min-height: 44px;
  padding: 10px 16px 10px 12px;
  border: 2px solid #0f0664;
  border-radius: 999px;
  background: #ffd21a;
  color: #0f0664;
  font: 400 12px/1 "Monument Extended", sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 4px 4px 0 #0f0664;
}

.floating-navigation-toggle:hover,
.floating-navigation-toggle:focus-visible {
  background: #ff3b8d;
  color: #fff;
}

.floating-navigation-icon { display: grid; gap: 4px; }
.floating-navigation-icon i { display: block; width: 17px; height: 2px; background: currentColor; transition: transform 180ms ease, opacity 180ms ease; }
.floating-navigation.is-open .floating-navigation-icon i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.floating-navigation.is-open .floating-navigation-icon i:nth-child(2) { opacity: 0; }
.floating-navigation.is-open .floating-navigation-icon i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.floating-navigation-menu {
  display: grid;
  gap: 6px;
  width: max-content;
  min-width: 190px;
  margin-top: 12px;
  padding: 12px;
  border: 2px solid #0f0664;
  border-radius: 16px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 6px 6px 0 #0f0664;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px) scale(.97);
  transform-origin: top left;
  transition: opacity 180ms ease, transform 180ms ease;
}

.floating-navigation.is-open .floating-navigation-menu { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); }
.floating-navigation-menu a { padding: 9px 10px; border-radius: 8px; color: #0f0664; font: 400 12px/1.1 "Monument Extended", sans-serif; letter-spacing: .04em; text-decoration: none; text-transform: uppercase; }
.floating-navigation-menu a:hover,
.floating-navigation-menu a:focus-visible { background: #0f0664; color: #ffd21a; }
.floating-navigation-menu a[data-navigation-element="G045"] { transform: translate(5px, 5px); }

@media (max-width: 600px) {
  .floating-navigation { top: 12px; left: 17px; }
  .floating-navigation-toggle { min-height: 40px; padding: 9px 13px 9px 10px; }
}

.reference-frame {
  width: 100vw;
  min-width: 320px;
  margin: 0 auto;
}

.reference-canvas {
  position: relative;
  width: 100%;
    padding-bottom: 0;
  overflow: hidden;
  background: #8fe7ff;
  isolation: isolate;
}

.reference-canvas::before {
  content: "";
  display: block;
  padding-top: 419.31%;
}

#reference-elements {
  position: absolute;
  inset: 0;
}

.reference-element {
  position: absolute;
  left: var(--left);
  top: var(--top);
  width: var(--width);
  height: var(--height);
}

.top-navigation-element {
  translate: 0 -8px;
}

.site-navigation-link {
  cursor: pointer;
}

.external-link-target {
  cursor: pointer;
}

.contact-modal {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: grid;
  place-items: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.contact-modal.is-open { opacity: 1; pointer-events: auto; }
.contact-modal-backdrop { position: absolute; inset: 0; background: rgba(15, 6, 100, .58); }
.contact-modal-card { position: relative; width: min(100%, 460px); padding: 30px; border: 3px solid #0f0664; border-radius: 24px; background: #fff8d8; box-shadow: 8px 8px 0 #0f0664; color: #0f0664; font-family: "Montserrat", sans-serif; }
.contact-modal-card h2 { margin: 0 0 6px; font: 400 28px/1.05 "Monument Extended", sans-serif; text-transform: uppercase; }
.contact-modal-card p { margin: 0 0 20px; font: 500 14px/1.4 "Montserrat", sans-serif; }
.contact-modal-close { position: absolute; top: 10px; right: 14px; border: 0; background: transparent; color: #0f0664; font: 400 28px/1 "Montserrat", sans-serif; cursor: pointer; }
.contact-modal-card form { display: grid; gap: 14px; }
.contact-modal-card label { display: grid; gap: 6px; font: 700 11px/1 "Montserrat", sans-serif; letter-spacing: .04em; text-transform: uppercase; }
.contact-modal-card input,
.contact-modal-card textarea { width: 100%; border: 2px solid #0f0664; border-radius: 9px; padding: 10px 11px; background: #fff; color: #0f0664; font: 400 14px/1.3 "Montserrat", sans-serif; }
.contact-modal-card textarea { resize: vertical; }
.contact-modal-card input:focus-visible,
.contact-modal-card textarea:focus-visible,
.contact-modal-close:focus-visible { outline: 3px solid #ff3b8d; outline-offset: 2px; }
.contact-modal-card form > button { justify-self: start; border: 2px solid #0f0664; border-radius: 999px; padding: 12px 18px; background: #ff3b8d; color: #fff; font: 400 12px/1 "Monument Extended", sans-serif; text-transform: uppercase; cursor: pointer; }
.contact-modal-card form > button:hover { background: #ffd21a; color: #0f0664; }

.faq-modal {
  position: fixed;
  inset: 0;
  z-index: 3100;
  display: grid;
  place-items: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.faq-modal.is-open { opacity: 1; pointer-events: auto; }
.faq-modal-backdrop { position: absolute; inset: 0; background: rgba(15, 6, 100, .64); }
.faq-modal-card {
  position: relative;
  width: min(100%, 620px);
  max-height: min(760px, calc(100dvh - 48px));
  overflow-y: auto;
  padding: 34px;
  border: 3px solid #0f0664;
  border-radius: 28px;
  background: #fff8d8;
  box-shadow: 9px 9px 0 #0f0664;
  color: #0f0664;
  font-family: "Montserrat", sans-serif;
}
.faq-modal-kicker {
  margin: 0 0 5px;
  color: #ff3b8d;
  font: 700 11px/1 "Montserrat", sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.faq-modal-card h2 {
  margin: 0 0 20px;
  font: 800 30px/1 "Monument Extended", sans-serif;
  text-transform: uppercase;
}
.faq-modal-close {
  position: absolute;
  top: 11px;
  right: 15px;
  border: 0;
  background: transparent;
  color: #0f0664;
  font: 400 30px/1 "Montserrat", sans-serif;
  cursor: pointer;
}
.faq-list { display: grid; gap: 9px; }
.faq-item {
  border: 2px solid #0f0664;
  border-radius: 12px;
  background: #fff;
}
.faq-item summary {
  padding: 13px 15px;
  cursor: pointer;
  font: 800 13px/1.25 "Montserrat", sans-serif;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; float: right; color: #ff3b8d; font-size: 18px; line-height: .8; }
.faq-item[open] summary::after { content: "−"; }
.faq-item p {
  margin: 0;
  padding: 0 15px 15px;
  font: 500 13px/1.45 "Montserrat", sans-serif;
}
.faq-item a { color: #ff3b8d; font-weight: 700; text-decoration: underline; }

.site-navigation-link:focus-visible {
  outline: 3px solid #ffd21a;
  outline-offset: 4px;
  border-radius: 3px;
}

.reference-element img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  user-select: none;
}

.como-llegar-map {
  padding: 24px 48px;
  box-sizing: border-box;
  overflow: hidden;
  border-radius: 70px;
  clip-path: inset(2px round 70px);
  background: transparent;
}

.como-llegar-map-border {
  border-radius: 18px;
  overflow: hidden;
  pointer-events: none;
}

.como-llegar-map,
.como-llegar-map iframe {
  pointer-events: auto;
}

.como-llegar-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 76px;
  overflow: hidden;
  clip-path: inset(0 round 76px);
}

.reference-text {
  display: flex;
  align-items: flex-start;
  justify-content: var(--text-align, flex-start);
  color: var(--text-color, #0f0664);
  font-family: var(--text-family, "Poppins"), sans-serif;
  font-size: var(--text-size, 1rem);
  font-weight: var(--text-weight, 400);
  line-height: var(--text-line-height, 1.05);
  letter-spacing: var(--text-spacing, normal);
  text-align: var(--text-align-value, left);
  white-space: pre-line;
  overflow: visible;
}

.reference-text span {
  display: block;
  width: 100%;
}

.reference-text.nowrap {
  white-space: nowrap;
}

.reference-text.tight-accreditation {
  --text-spacing: -0.06em;
}

.reference-text.impact-body {
  --text-line-height: 0.95;
}

.reference-text.impact-title {
  --text-line-height: 1;
}

.reference-text.impact-date {
  --text-line-height: 0.9;
  align-items: center;
}

.reference-text.impact-fixed-lines {
  white-space: pre;
}

.reference-text.grilla-artist {
  --text-line-height: 0.85;
}

.grilla-character {
  transform-origin: center bottom;
}

.grilla-character-left { --grilla-entry-x: -90px; }
.grilla-character-right { --grilla-entry-x: 90px; }

.grilla-character.is-visible {
  animation: grilla-character-entry 900ms cubic-bezier(.22, .61, .36, 1) both;
}

.grilla-character.grilla-character-idle.is-visible {
  animation: grilla-character-sway 5.8s ease-in-out infinite;
}

.impact-illustration {
  transform-origin: center bottom;
}

.impact-illustration-left { --impact-entry-x: -90px; }
.impact-illustration-right { --impact-entry-x: 90px; }

.impact-illustration.is-visible {
  animation: impact-illustration-entry 900ms cubic-bezier(.22, .61, .36, 1) both;
}

.impact-illustration.impact-illustration-idle.is-visible {
  animation: impact-illustration-sway 5.8s ease-in-out infinite;
}

.impact-cloud.impact-illustration-idle.is-visible {
  animation: impact-cloud-sway 7.2s ease-in-out infinite;
}

.impact-cloud[data-element-id="G035"].impact-illustration-idle.is-visible { animation-delay: -1.6s; }
.impact-cloud[data-element-id="G036"].impact-illustration-idle.is-visible { animation-delay: -4.1s; }

.impact-illustration.impact-illustration-static.is-visible {
  animation: none;
}

.impact-bird.is-visible {
  animation: impact-bird-flight 2200ms ease-in-out both;
  will-change: transform, opacity;
}

.impact-bird.impact-bird-idle.is-visible {
  animation: impact-bird-sway-a 6.8s ease-in-out infinite;
}
}

.impact-depth.is-visible {
  animation: impact-depth-entry 1050ms cubic-bezier(.2, .82, .28, 1.25) both;
}

.impact-depth.impact-depth-entry-done.is-visible {
  animation: none;
}

.como-character {
  z-index: 900 !important;
}

.como-character.is-visible {
  animation: como-character-entry 850ms cubic-bezier(.22, .61, .36, 1) both;
}

.como-character.como-character-idle.is-visible {
  animation: como-character-sway 5.4s ease-in-out infinite, como-character-color 12s steps(10, end) infinite;
}

.como-cyclic-color.is-visible {
  animation: como-cyclic-filter 12s steps(10, end) infinite;
}

.reference-text.como-cyclic-color.is-visible {
  animation: como-cyclic-text 12s steps(10, end) infinite;
}

.grilla-artist.is-visible {
  animation: grilla-text-depth 1050ms cubic-bezier(.2, .82, .28, 1.25) both;
}

.grilla-artist.grilla-text-entry-done.is-visible {
  animation: none;
}

.grilla-artist.grilla-text-sequence-vibrate.is-visible {
  animation: grilla-text-vibrate 520ms ease-in-out infinite;
}

.grilla-artist {
  cursor: pointer;
  transition: color 220ms ease, filter 220ms ease, scale 220ms ease, rotate 220ms ease;
}

.grilla-artist.grilla-text-active {
  color: var(--grilla-hover-color, #ff3b8d);
  filter: saturate(1.3) brightness(1.08);
  scale: 1.08;
  rotate: var(--grilla-hover-rotate, 1deg);
  z-index: 860;
}

.grilla-artist:hover {
  animation: grilla-text-hover-vibrate 420ms ease-in-out infinite;
}

.grilla-artist[data-text-id="T008"] { --grilla-hover-color: #ffd21a; --grilla-hover-rotate: -2deg; }
.grilla-artist[data-text-id="T009"] { --grilla-hover-color: #00c7d9; --grilla-hover-rotate: 1.5deg; }
.grilla-artist[data-text-id="T010"] { --grilla-hover-color: #6b5cff; --grilla-hover-rotate: -1.2deg; }
.grilla-artist[data-text-id="T011"] { --grilla-hover-color: #ff6b00; --grilla-hover-rotate: 2deg; }
.grilla-artist[data-text-id="T012"] { --grilla-hover-color: #ff2d95; --grilla-hover-rotate: -1.6deg; }
.grilla-artist[data-text-id="T013"] { --grilla-hover-color: #00c878; --grilla-hover-rotate: 1deg; }

@keyframes grilla-character-entry {
  0% { opacity: 0; transform: translate3d(var(--grilla-entry-x), 12px, 0) scale(.94); }
  72% { opacity: 1; transform: translate3d(-8px, -2px, 0) scale(1.02); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes impact-illustration-entry {
  0% { opacity: 0; transform: translate3d(var(--impact-entry-x), 12px, 0) scale(.94); }
  72% { opacity: 1; transform: translate3d(-8px, -2px, 0) scale(1.02); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes impact-illustration-sway {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-1deg) scale(1); }
  50% { transform: translate3d(5px, -6px, 0) rotate(1.2deg) scale(1.015); }
}

@keyframes impact-cloud-sway {
  0%, 100% { transform: translate3d(-28px, 0, 0) rotate(-2deg) scale(1); }
  50% { transform: translate3d(36px, -16px, 0) rotate(2.5deg) scale(1.09); }
}

@keyframes impact-bird-flight {
  0% { opacity: 0; transform: translate3d(90px, 30px, 0) rotate(6deg); }
  25% { opacity: 1; transform: translate3d(55px, -22px, 0) rotate(2deg); }
  50% { transform: translate3d(20px, 18px, 0) rotate(-2deg); }
  75% { transform: translate3d(-12px, -12px, 0) rotate(1deg); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) rotate(0deg); }
}

@keyframes impact-bird-sine {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  25% { transform: translate3d(0, -15px, 0) rotate(-5deg); }
  50% { transform: translate3d(0, 0, 0) rotate(0deg); }
  75% { transform: translate3d(0, 15px, 0) rotate(5deg); }
}

@keyframes impact-bird-sway-a {
  0%, 100% { transform: translate3d(12px, 0, 0) rotate(2deg); }
  25% { transform: translate3d(-4px, -15px, 0) rotate(6deg); }
  50% { transform: translate3d(-12px, 0, 0) rotate(-1deg); }
  75% { transform: translate3d(-2px, 15px, 0) rotate(-5deg); }
}

@keyframes impact-depth-entry {
  0% { opacity: 0; transform: translate3d(0, 18px, -80px) scale(.82); }
  68% { opacity: 1; transform: translate3d(0, -3px, 0) scale(1.06); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes como-character-entry {
  from { opacity: 0; transform: translate3d(-70px, 10px, 0) scale(.95); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes como-character-sway {
  0%, 100% { transform: translate3d(-3px, 0, 0) rotate(-1deg); }
  50% { transform: translate3d(5px, -6px, 0) rotate(1.2deg); }
}

@keyframes como-character-color {
  from { filter: hue-rotate(0deg) saturate(1.05); }
  to { filter: hue-rotate(360deg) saturate(1.25); }
}

@keyframes como-cyclic-filter {
  from { filter: hue-rotate(0deg) saturate(1.05); }
  to { filter: hue-rotate(360deg) saturate(1.25); }
}

@keyframes como-cyclic-text {
  from { color: #0f0664; }
  to { color: #ff3b8d; }
}

@keyframes grilla-character-sway {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-1deg) scale(1); }
  50% { transform: translate3d(5px, -6px, 0) rotate(1.2deg) scale(1.015); }
}

@keyframes grilla-text-depth {
  0% { opacity: 0; transform: translate3d(0, 18px, -80px) scale(.82); }
  68% { opacity: 1; transform: translate3d(0, -3px, 0) scale(1.06); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes grilla-text-vibrate {
  0%, 100% { transform: translate3d(0, 0, 0); }
  25% { transform: translate3d(-3px, 2px, 0); }
  50% { transform: translate3d(3px, -2px, 0); }
  75% { transform: translate3d(-2px, -1px, 0); }
}

@keyframes grilla-text-hover-vibrate {
  0%, 100% { transform: translate3d(0, 0, 0); }
  25% { transform: translate3d(-3px, 2px, 0); }
  50% { transform: translate3d(3px, -2px, 0); }
  75% { transform: translate3d(-2px, -1px, 0); }
}

.grilla-artist.grilla-text-sequence-vibrate.is-visible:hover {
  animation: grilla-text-hover-vibrate 420ms ease-in-out infinite;
}

.reference-loading {
  position: absolute;
  z-index: 1000;
  inset: 50% auto auto 50%;
  margin: 0;
  transform: translate(-50%, -50%);
  color: #0f0664;
  font-family: "Montserrat", sans-serif;
  font-size: 1rem;
  font-weight: 700;
}

.reference-loading.is-hidden {
  display: none;
}

/* Motion layer derived from the Corel animation recommendations. */
.motion-reveal,
.motion-hero,
.motion-stagger {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition: opacity 700ms ease, transform 700ms cubic-bezier(.22, .61, .36, 1);
}

.motion-hero {
  transform: translate3d(0, -14px, 0);
  transition-duration: 900ms;
}

.hero-group.is-visible {
  animation: hero-entry 900ms cubic-bezier(.22, .61, .36, 1) var(--hero-delay, 0ms) both;
}

.hero-guitarist.is-visible {
  animation: hero-guitarist 1200ms cubic-bezier(.22, .61, .36, 1) var(--hero-delay, 0ms) both;
}

.hero-guitarist-companion.is-visible {
  animation: hero-guitarist 1200ms cubic-bezier(.22, .61, .36, 1) var(--hero-delay, 0ms) both;
}

.hero-right-entry.is-visible {
  animation: hero-right-entry 1200ms cubic-bezier(.22, .61, .36, 1) var(--hero-delay, 0ms) both;
}

.hero-logo.is-visible {
  animation: hero-logo-zoom 1500ms cubic-bezier(.22, .61, .36, 1) var(--hero-delay, 0ms) both,
    hero-logo-float 8s ease-in-out 2.2s infinite;
}

.hero-bird.is-visible {
  animation: hero-bird-flight 2200ms linear 300ms both;
  will-change: transform, opacity;
}

.hero-hover:hover {
  scale: 1.06;
  filter: saturate(1.15) brightness(1.04);
  z-index: 800;
}

.festival-character.is-visible {
  animation: festival-character-entry 900ms cubic-bezier(.22, .61, .36, 1) both;
}

.festival-character.festival-idle.is-visible {
  animation: festival-character-float 7s ease-in-out infinite;
}

.festival-title.festival-title-idle.is-visible {
  animation: festival-title-float 6s ease-in-out infinite;
}

.festival-hover:hover {
  translate: 0 -14px;
  scale: 1.06;
  filter: saturate(1.12) brightness(1.04);
  z-index: 850;
}

.festival-title {
  cursor: pointer;
  transform-origin: center;
  transition: color 260ms ease, filter 260ms ease, scale 260ms ease;
}

.festival-title:hover {
  color: #ff3b8d;
  filter: saturate(1.3) brightness(1.08);
  scale: 1.12;
  z-index: 850;
}

.festival-title-panel {
  transform-origin: center;
  transition: scale 260ms ease, rotate 260ms ease, filter 260ms ease;
}

.festival-title-panel.is-title-hovered {
  scale: 1.08;
  rotate: -1.5deg;
  filter: saturate(1.2) brightness(1.06);
  z-index: 840;
}

.section-title {
  cursor: pointer;
  transition: color 260ms ease, filter 260ms ease, transform 260ms ease;
}

.section-title.is-title-hovered {
  color: var(--section-title-hover-color, #ff3b8d);
  filter: saturate(1.3) brightness(1.08);
  transform: scale(1.1);
  z-index: 850;
}

.section-title-panel {
  transform-origin: center;
  transition: scale 260ms ease, rotate 260ms ease, filter 260ms ease;
}

.section-title-panel.is-title-hovered {
  scale: 1.08;
  rotate: var(--section-title-panel-rotation, -1.2deg);
  filter: saturate(1.25) hue-rotate(var(--section-title-panel-hue, 12deg)) brightness(1.06);
  z-index: 840;
}

.section-title[data-text-id="T015"] { --section-title-hover-color: #ef3d8d; }
.section-title[data-text-id="T014"] { --section-title-hover-color: #ef3d8d; }
.section-title[data-text-id="T030"] { --section-title-hover-color: #ffd21a; }
.section-title[data-text-id="T031"] { --section-title-hover-color: #ffd21a; }
.section-title[data-text-id="T041"] { --section-title-hover-color: #ff3b8d; }
.section-title[data-text-id="T047"] { --section-title-hover-color: #ff3b8d; }
.section-title-panel-T015 { --section-title-panel-hue: 8deg; --section-title-panel-rotation: 1.2deg; }
.section-title-panel-T014 { --section-title-panel-hue: 8deg; --section-title-panel-rotation: 1.2deg; }
.section-title-panel-T030 { --section-title-panel-hue: 28deg; --section-title-panel-rotation: -1deg; }
.section-title-panel-T031 { --section-title-panel-hue: 315deg; --section-title-panel-rotation: 1deg; }
.section-title-panel-T041 { --section-title-panel-hue: 325deg; --section-title-panel-rotation: -1.2deg; }
.section-title-panel-T047 { --section-title-panel-hue: 300deg; --section-title-panel-rotation: 1.2deg; }

.festival-frame.is-visible {
  animation: festival-frame-entry 850ms cubic-bezier(.22, .61, .36, 1) both;
}

.festival-copy.is-visible {
  animation: festival-copy-entry 700ms ease-out both;
}

.reference-text.festival-fixed-lines {
  white-space: pre;
  --text-line-height: 1.32;
}

.festival-highlight.is-visible {
  animation: festival-highlight-entry 650ms ease-out both;
}

.festival-highlight-hover {
  transition: filter 180ms ease, transform 180ms ease;
}

.festival-highlight-hover:hover {
  filter: saturate(1.5) hue-rotate(12deg) brightness(1.08);
  transform: scale(1.05) rotate(1.5deg);
  z-index: 820;
}

.festival-background-hover {
  transform-origin: 50% 50%;
  transition: transform 360ms ease, filter 360ms ease;
}

.festival-background-hover:hover {
  transform: scale(1.015) rotate(-0.4deg);
  filter: saturate(1.12) brightness(1.04);
  z-index: 205;
}

.festival-highlight-sequence {
  transition: filter 260ms ease, transform 260ms ease;
}

.festival-highlight-sequence.festival-highlight-active {
  filter: saturate(1.5) hue-rotate(12deg) brightness(1.08);
  transform: scale(1.02);
  z-index: 820;
}

.festival-highlight-sequence.festival-highlight-active:hover {
  transform: scale(1.05) rotate(1.5deg);
}

.carousel-stage {
  overflow: hidden;
  border-radius: 8% 10% 9% 8%;
  background: #6f859e;
  isolation: isolate;
}

.reference-element .carousel-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  image-orientation: from-image;
  object-fit: cover;
  opacity: 0;
  transform: translate3d(100%, 0, 0);
  transition: opacity 520ms ease, transform 650ms cubic-bezier(.22, .61, .36, 1);
}

.carousel-photo.is-active {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.carousel-button {
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
  transition: transform 220ms ease, filter 220ms ease;
}

.carousel-button:hover,
.carousel-button:focus-visible {
  transform: scale(1.12);
  filter: brightness(1.15) saturate(1.2);
  outline: none;
  z-index: 800;
}

@keyframes festival-character-entry {
  from { opacity: 0; transform: translate3d(-24px, 10px, 0) scale(.97); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes festival-character-float {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50% { transform: translate3d(0, -12px, 0) rotate(-1.5deg); }
}

@keyframes festival-title-float {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(0, -4px, 0) scale(1.018); }
}

@keyframes festival-frame-entry {
  from { opacity: 0; transform: translate3d(18px, 0, 0) scale(.98); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes festival-copy-entry {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes festival-highlight-entry {
  from { opacity: 0; transform: scale(.94); }
  to { opacity: 1; transform: scale(1); }
}

.hero-guitarist.hero-idle.is-visible,
.hero-guitarist-companion.hero-idle.is-visible {
  animation: hero-guitarist-idle 7s ease-in-out infinite;
}

.hero-right-entry.hero-idle.is-visible {
  animation: hero-right-idle 8s ease-in-out infinite;
}

.hero-cloud.hero-idle.is-visible {
  animation: hero-cloud-idle 11s ease-in-out infinite;
}

.hero-cloud[data-element-id="G002"].hero-idle.is-visible { animation-delay: -1.8s; }
.hero-cloud[data-element-id="G008"].hero-idle.is-visible { animation-delay: -5.2s; }

.hero-bird.hero-idle.is-visible {
  animation: hero-bird-sine 6s ease-in-out infinite;
}

.hero-parallax {
  animation: hero-drift 9s ease-in-out infinite alternate;
}

.hero-separator {
  clip-path: inset(0 100% 0 0);
  animation: hero-line-draw 900ms ease-out 700ms forwards;
}

@keyframes hero-entry {
  from { opacity: 0; transform: translate3d(0, -14px, 0) scale(.985); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes hero-guitarist {
  from { opacity: 0; transform: translate3d(-110vw, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes hero-right-entry {
  from { opacity: 0; transform: translate3d(110vw, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes hero-logo-zoom {
  0% { opacity: 0; transform: scale(.08); }
  68% { opacity: 1; transform: scale(1.14); }
  84% { opacity: 1; transform: scale(.97); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes hero-bird-flight {
  0% { opacity: 0; transform: translate3d(125vw, 0, 0) rotate(6deg); }
  8% { opacity: 1; }
  12.5% { transform: translate3d(109vw, -45px, 0) rotate(4deg); }
  25% { transform: translate3d(90vw, -80px, 0) rotate(2deg); }
  37.5% { transform: translate3d(70vw, -45px, 0) rotate(1deg); }
  50% { transform: translate3d(50vw, 0, 0) rotate(0deg); }
  62.5% { transform: translate3d(30vw, 45px, 0) rotate(-1deg); }
  75% { transform: translate3d(15vw, 80px, 0) rotate(-2deg); }
  87.5% { transform: translate3d(5vw, 45px, 0) rotate(-4deg); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) rotate(0deg); }
}

@keyframes hero-guitarist-idle {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50% { transform: translate3d(0, -12px, 0) rotate(-2.5deg); }
}

@keyframes hero-right-idle {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50% { transform: translate3d(0, -12px, 0) rotate(2.5deg); }
}

@keyframes hero-cloud-idle {
    0%, 100% { transform: translate3d(-20px, 0, 0) scale(1); }
    50% { transform: translate3d(28px, -14px, 0) scale(1.08); }
}

@keyframes hero-bird-sine {
    0%, 100% { transform: translate3d(14px, 0, 0) rotate(2deg); }
    25% { transform: translate3d(2px, -15px, 0) rotate(6deg); }
    50% { transform: translate3d(-14px, 0, 0) rotate(-2deg); }
    75% { transform: translate3d(-2px, 15px, 0) rotate(-6deg); }
}

@keyframes hero-bird-orbit {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  12% { transform: translate3d(var(--bird-p1-x), var(--bird-p1-y), 0) rotate(0deg); }
  24% { transform: translate3d(var(--bird-p2-x), var(--bird-p2-y), 0) rotate(-8deg); }
  36% { transform: translate3d(var(--bird-p3-x), var(--bird-p3-y), 0) rotate(-12deg); }
  48% { transform: translate3d(var(--bird-p4-x), var(--bird-p4-y), 0) rotate(-5deg); }
  60% { transform: translate3d(var(--bird-p5-x), var(--bird-p5-y), 0) rotate(4deg); }
  72% { transform: translate3d(var(--bird-p6-x), var(--bird-p6-y), 0) rotate(10deg); }
  84% { transform: translate3d(var(--bird-p7-x), var(--bird-p7-y), 0) rotate(6deg); }
  92% { transform: translate3d(var(--bird-p8-x), var(--bird-p8-y), 0) rotate(2deg); }
}

@keyframes hero-float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -6px, 0); }
}

@keyframes hero-logo-float {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  25% { transform: translate3d(0, -12px, 0) scale(1.018); }
  50% { transform: translate3d(0, -4px, 0) scale(1.03); }
  75% { transform: translate3d(0, 9px, 0) scale(1.012); }
}

@keyframes hero-drift {
  from { transform: translate3d(-2px, 0, 0); }
  to { transform: translate3d(2px, -2px, 0); }
}

@keyframes hero-line-draw {
  to { clip-path: inset(0 0 0 0); }
}

.motion-stagger {
  transition-delay: var(--motion-delay, 0ms);
}

.motion-reveal.is-visible,
.motion-hero.is-visible,
.motion-stagger.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.motion-hover-card,
.motion-cta,
.motion-hover-nav,
.motion-hover-generic {
  transition: transform 260ms ease, filter 260ms ease, color 260ms ease;
  transform-origin: center;
}

.motion-hover-card:hover {
  transform: scale(1.025);
  filter: saturate(1.08) brightness(1.03);
  z-index: 500;
}

.entradas-zoom-target {
  transition: transform 260ms ease, scale 260ms ease, filter 260ms ease;
  transform-origin: center;
}

.entradas-composition {
  position: absolute;
  inset: 0;
  transform-origin: 50% 50%;
  transition: scale 300ms ease, filter 300ms ease;
  animation: entradas-title-vibrate 1.8s ease-in-out infinite, entradas-composition-pulse 2.8s ease-in-out infinite;
  pointer-events: none;
}

.entradas-composition > .reference-element {
  pointer-events: auto;
}

.entradas-composition.is-entradas-hovered {
  scale: 1.04;
  filter: saturate(1.08) brightness(1.03);
}

.entradas-zoom-target.is-entradas-hovered {
  scale: 1.06;
  filter: saturate(1.12) brightness(1.04);
  z-index: 860;
}

.entradas-common-target {
  transition: transform 260ms ease, scale 260ms ease, filter 260ms ease;
  transform-origin: center;
}

.entradas-common-target.is-entradas-common-hover {
  scale: 1.06;
  filter: saturate(1.08) brightness(1.03);
  z-index: 860;
}

.entradas-common-target:hover {
  transform: none !important;
  scale: 1 !important;
  filter: none !important;
}

.entradas-individual-target.is-entradas-individual-hover {
  scale: 1.15;
  filter: saturate(1.4) brightness(1.1) hue-rotate(12deg);
  z-index: 875;
}

.reference-text.entradas-individual-target.is-entradas-individual-hover {
  color: #ff3b8d;
}

.reference-text[data-text-id="T047"] {
  transform-origin: center;
  rotate: -4deg;
}

.reference-text[data-text-id="T047"].is-entradas-individual-hover {
  scale: 1.22;
  rotate: -7deg;
}

.reference-element[data-element-id="G052"].is-entradas-individual-hover {
  filter: saturate(2.2) hue-rotate(155deg) brightness(1.15) contrast(1.12) !important;
}

.reference-text[data-text-id="T047"] span {
  transform-origin: center;
  animation: entradas-text-pulse 2.8s ease-in-out infinite;
  will-change: transform;
}

@keyframes entradas-text-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.07); }
}

@keyframes entradas-composition-pulse {
  0%, 100% { scale: 1; }
  50% { scale: 1.07; }
}

.entradas-flash-text {
  animation: entradas-flash-text 40s steps(20, end) infinite !important;
}

.entradas-flash-curve {
  animation: entradas-flash-curve 40s steps(20, end) infinite !important;
}

@keyframes entradas-flash-text {
  0% { color: #ff1744; }
  5% { color: #00e5ff; }
  10% { color: #7c4dff; }
  15% { color: #00e676; }
  20% { color: #ffea00; }
  25% { color: #ff6d00; }
  30% { color: #d500f9; }
  35% { color: #1de9b6; }
  40% { color: #ff4081; }
  45% { color: #2979ff; }
  50% { color: #76ff03; }
  55% { color: #ff9100; }
  60% { color: #00b8d4; }
  65% { color: #f50057; }
  70% { color: #651fff; }
  75% { color: #c6ff00; }
  80% { color: #ff3d00; }
  85% { color: #00c853; }
  90% { color: #aa00ff; }
  95% { color: #ffd600; }
  100% { color: #ff1744; }
}

@keyframes entradas-flash-curve {
  0% { filter: hue-rotate(0deg) saturate(1.8) brightness(1.08); }
  5% { filter: hue-rotate(18deg) saturate(2) brightness(1.1); }
  10% { filter: hue-rotate(42deg) saturate(2.1) brightness(1.04); }
  15% { filter: hue-rotate(68deg) saturate(1.9) brightness(1.08); }
  20% { filter: hue-rotate(92deg) saturate(2.2) brightness(1.1); }
  25% { filter: hue-rotate(118deg) saturate(2) brightness(1.06); }
  30% { filter: hue-rotate(142deg) saturate(2.2) brightness(1.08); }
  35% { filter: hue-rotate(166deg) saturate(2) brightness(1.08); }
  40% { filter: hue-rotate(188deg) saturate(2.1) brightness(1.06); }
  45% { filter: hue-rotate(210deg) saturate(2.2) brightness(1.08); }
  50% { filter: hue-rotate(232deg) saturate(2) brightness(1.08); }
  55% { filter: hue-rotate(252deg) saturate(2.2) brightness(1.05); }
  60% { filter: hue-rotate(272deg) saturate(2) brightness(1.08); }
  65% { filter: hue-rotate(292deg) saturate(2.1) brightness(1.06); }
  70% { filter: hue-rotate(312deg) saturate(2.2) brightness(1.08); }
  75% { filter: hue-rotate(330deg) saturate(2) brightness(1.06); }
  80% { filter: hue-rotate(348deg) saturate(2.2) brightness(1.08); }
  85% { filter: hue-rotate(365deg) saturate(2) brightness(1.06); }
  90% { filter: hue-rotate(382deg) saturate(2.2) brightness(1.08); }
  95% { filter: hue-rotate(402deg) saturate(2) brightness(1.06); }
  100% { filter: hue-rotate(420deg) saturate(1.8) brightness(1.08); }
}

@keyframes entradas-title-vibrate {
  0%, 100% { transform: translate3d(0, 0, 0); }
  25% { transform: translate3d(-5px, 3.5px, 0); }
  50% { transform: translate3d(5px, -3.5px, 0); }
  75% { transform: translate3d(-3.5px, -2px, 0); }
}

.reference-element.entradas-static,
.reference-element.entradas-static.is-visible,
.reference-element.entradas-static:hover,
.reference-element.entradas-static.is-title-hovered,
.reference-element.entradas-static.is-entradas-hovered {
  animation: none !important;
  transition: none !important;
  transform: none !important;
  scale: 1 !important;
  rotate: 0deg !important;
  filter: none !important;
  opacity: 1 !important;
}

.reference-element.contacto-static,
.reference-element.contacto-static:hover,
.reference-element.contacto-static:focus-visible,
.reference-element.contacto-static.nav-hovered,
.reference-element.contacto-static.nav-curve-hover {
  animation: none !important;
  transition: none !important;
  transform: none !important;
  scale: 1 !important;
  rotate: 0deg !important;
  filter: none !important;
  color: inherit !important;
}

.reference-text.contacto-static {
  color: var(--text-color) !important;
}

.contacto-entry {
  opacity: 0;
  transform: translate3d(0, 42px, 0);
  transition: opacity 750ms ease, transform 750ms cubic-bezier(.22, .61, .36, 1);
}

.contacto-entry.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  animation: contacto-entry-up 850ms cubic-bezier(.22, .61, .36, 1) both;
}

.contacto-nav-entry {
  transition-delay: 500ms;
}

.accreditation-border-static:hover {
  transform: none !important;
  scale: 1 !important;
  rotate: 0deg !important;
  filter: none !important;
}

.accreditation-panel {
  transition: filter 260ms ease;
  pointer-events: auto;
}

.accreditation-panel.is-accreditation-hovered {
  z-index: 860;
}

.accreditation-panel:hover {
  scale: 1 !important;
}

.accreditation-panel-G043.is-accreditation-hovered {
  filter: saturate(1.35) hue-rotate(300deg) brightness(1.06);
}

.accreditation-panel-G042.is-accreditation-hovered {
  filter: saturate(1.4) hue-rotate(72deg) brightness(1.06);
}

.accreditation-panel-G041.is-accreditation-hovered {
  filter: saturate(1.35) hue-rotate(155deg) brightness(1.06);
}

.accreditation-vibrate.is-visible {
  animation: accreditation-vibrate 4.8s ease-in-out infinite;
  will-change: transform;
}

@keyframes accreditation-vibrate {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  25% { transform: translate3d(-2px, 1px, 0) rotate(-0.35deg); }
  50% { transform: translate3d(2px, -1px, 0) rotate(0.35deg); }
  75% { transform: translate3d(-1px, -1px, 0) rotate(-0.2deg); }
}

.accreditation-trigger {
  cursor: pointer;
  transform-origin: center;
  transition: scale 240ms ease, filter 240ms ease, color 240ms ease;
}

.accreditation-trigger-curve.is-accreditation-hovered {
  scale: 1.12;
  filter: saturate(1.3) brightness(1.06);
  z-index: 870;
}

.accreditation-trigger-text.is-accreditation-hovered {
  scale: 1.2;
  filter: saturate(1.35) brightness(1.08);
  z-index: 875;
}

.accreditation-trigger-text[data-text-id="T034"].is-accreditation-hovered { color: #ff3b8d; }
.accreditation-trigger-text[data-text-id="T033"].is-accreditation-hovered { color: #ffd21a; }
.accreditation-trigger-text[data-text-id="T032"].is-accreditation-hovered { color: #00d9e8; }

.motion-cta:hover {
  transform: scale(1.055);
  filter: contrast(1.08) saturate(1.1);
  z-index: 600;
}

.motion-hover-nav:hover {
  transform: scale(1.14);
  filter: saturate(1.45) brightness(1.08);
  z-index: 700;
}

.motion-hover-nav.nav-hovered {
  --text-color: #ff3b8d;
  color: #ff3b8d;
}

.contacto-entry.contacto-nav-entry {
  transition-delay: 500ms;
  animation-delay: 500ms;
}

.contacto-no-hover-zoom:hover {
  transform: none !important;
  scale: 1 !important;
  filter: none !important;
}

.contacto-social {
  transition: filter 240ms ease;
}

.contacto-social:hover {
  filter: saturate(1.7) brightness(1.12) hue-rotate(28deg) !important;
}

.contacto-social[data-element-id="G046"]:hover { filter: saturate(2) brightness(1.12) hue-rotate(300deg) !important; }
.contacto-social[data-element-id="G047"]:hover { filter: saturate(2) brightness(1.1) hue-rotate(100deg) !important; }
.contacto-social[data-element-id="G048"]:hover { filter: saturate(2.2) brightness(1.12) hue-rotate(175deg) !important; }
.contacto-social[data-element-id="G049"]:hover { filter: saturate(2) brightness(1.1) hue-rotate(210deg) !important; }

@keyframes contacto-entry-up {
  from { opacity: 0; transform: translate3d(0, 42px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

.nav-curve-hover {
  transform: scale(1.1);
  filter: saturate(1.5) hue-rotate(12deg) brightness(1.08);
  z-index: 750;
}

.motion-hover-generic:hover {
  transform: scale(1.035);
  filter: saturate(1.12);
  z-index: 650;
}

@media (prefers-reduced-motion: reduce) {
  .motion-reveal,
  .motion-hero,
  .motion-stagger,
  .motion-hover-card,
  .motion-cta,
  .motion-hover-nav,
  .motion-hover-generic,
  .hero-group,
  .hero-guitarist,
  .hero-guitarist-companion,
  .hero-right-entry,
  .hero-guitarist.hero-idle,
  .hero-guitarist-companion.hero-idle,
  .hero-right-entry.hero-idle,
  .hero-cloud.hero-idle,
  .hero-logo,
  .hero-bird,
  .hero-bird.hero-idle,
  .hero-hover,
  .festival-character,
  .festival-idle,
  .festival-title,
  .festival-title-idle,
  .hero-parallax,
  .hero-separator {
    opacity: 1;
    transform: none;
    animation: none;
    clip-path: none;
    transition: none;
  }
}