html {
  scroll-behavior: smooth;
}

/* Seções KV — imagem full-width (Como Participar / Prêmios) */
.index-kv-section {
  width: 100%;
  line-height: 0;
  background: var(--color-bg-dark, #050505);
  position: relative;
  z-index: 3;
}

.index-kv-section picture,
.index-kv-section img {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: top;
}

/* Como participar — composição responsiva com elementos independentes */
#como-participar {
  aspect-ratio: 1920 / 900;
  overflow: hidden;
  isolation: isolate;
}

#como-participar .como-participar__background {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#como-participar .como-participar__step,
#como-participar .como-participar__aviao {
  position: absolute;
  z-index: 2;
  line-height: 0;
}

#como-participar .como-participar__aviao {
  pointer-events: none;
}

#como-participar .como-participar__step {
  display: block;
  pointer-events: auto;
  cursor: pointer;
  transform-origin: center center;
  transition: filter 0.25s ease;
  will-change: transform;
}

#como-participar .como-participar__step[hidden] {
  display: none !important;
}

#como-participar .como-participar__step:hover,
#como-participar .como-participar__step:focus-visible {
  filter: brightness(1.2);
  outline: none;
}

#como-participar .como-participar__step img {
  width: 100%;
  max-width: 550px;
  height: auto;
}

#como-participar .como-participar__step--4 img {
  max-width: 465px;
}

#como-participar .como-participar__step--1 {
  top: 13%;
  left: 14.64%;
  width: 28.9%;
  animation: como-participar-step-pulse-1 2.8s ease-in-out infinite;
}

#como-participar .como-participar__step--2 {
  top: 47.78%;
  left: 14.48%;
  width: 28.9%;
  animation: como-participar-step-pulse-2 2.8s ease-in-out infinite;
}

#como-participar .como-participar__step--3 {
  top: 64.44%;
  left: 16.41%;
  width: 28.9%;
  animation: como-participar-step-pulse-3 2.8s ease-in-out infinite;
}

#como-participar .como-participar__step--4 {
  top: 54.22%;
  left: 58.39%;
  width: 28.9%;
  animation: como-participar-step-pulse-4 2.8s ease-in-out infinite;
}

/* Ciclo 2.8s: cada passo pulsa ~0.7s (1 → 0.94 → 1), um após o outro */
@keyframes como-participar-step-pulse-1 {
  0%,
  25%,
  100% {
    transform: scale(1);
  }
  12.5% {
    transform: scale(0.94);
  }
}

@keyframes como-participar-step-pulse-2 {
  0%,
  25%,
  50%,
  100% {
    transform: scale(1);
  }
  37.5% {
    transform: scale(0.94);
  }
}

@keyframes como-participar-step-pulse-3 {
  0%,
  50%,
  75%,
  100% {
    transform: scale(1);
  }
  62.5% {
    transform: scale(0.94);
  }
}

@keyframes como-participar-step-pulse-4 {
  0%,
  75%,
  100% {
    transform: scale(1);
  }
  87.5% {
    transform: scale(0.94);
  }
}

#como-participar .como-participar__aviao {
  top: 19.44%;
  left: 53.07%;
  width: 48%;
  max-width: 900px;
  height: auto;
  z-index: 1;
  animation: lor-aviao-float 4.5s ease-in-out infinite;
  will-change: transform;
}

@keyframes lor-aviao-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-14px);
  }
}

@media (prefers-reduced-motion: reduce) {
  #como-participar .como-participar__aviao,
  #como-participar .como-participar__step {
    animation: none;
  }
}

@media (max-width: 991px) {
  #como-participar {
    aspect-ratio: auto;
    min-height: 0;
    height: auto;
    padding: 10.5rem 0 2.5rem;
    overflow: visible;
    background:
      url("../assets/s-comoparticipar/s-comoparticipar_m.webp") center top / cover no-repeat,
      #050403;
  }

  #como-participar .como-participar__background {
    display: none;
  }

  #como-participar .como-participar__step,
  #como-participar .como-participar__aviao {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    display: block;
    margin: 0 auto;
  }

  #como-participar .como-participar__step[hidden] {
    display: none !important;
  }

  #como-participar .como-participar__step--1,
  #como-participar .como-participar__step--2,
  #como-participar .como-participar__step--3,
  #como-participar .como-participar__step--4 {
    width: min(92vw, 420px);
    margin-bottom: 1.25rem;
  }

  #como-participar .como-participar__step--1 {
    margin-top: 2.5rem;
  }

  #como-participar .como-participar__step--2 {
    margin-top: 1.25rem;
	margin-bottom: -6rem;
  }

  #como-participar .como-participar__step img,
  #como-participar .como-participar__step--4 img {
    max-width: none;
    width: 100%;
  }

  #como-participar .como-participar__aviao {
    width: min(92vw, 420px);
    max-width: none;
    margin: 0.5rem auto 0;
    z-index: 1;
  }
}

/* #como-participar::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.525) 8%,
    transparent 15%
  );
} */

body.index-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}