.immersive .hero-carousel {
  display: flex;
  flex-direction: column;
  overflow: clip;
}

.hero-track {
  display: grid;
  flex: 1;
  min-height: 0;
  position: relative;
}

.hero-carousel .hero-slide {
  grid-area: 1 / 1;
  height: auto;
  overflow: visible;
  min-width: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .65s ease, visibility 0s .65s;
}

.hero-carousel .hero-slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

.hero-carousel [hidden] {
  display: none !important;
}

.hero-carousel .hero-bottom {
  z-index: 3;
}

.hero-carousel-controls,
.hero-carousel-dots {
  display: flex;
  align-items: center;
  gap: 3px;
}

.hero-carousel-controls {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.hero-carousel-controls button {
  display: grid;
  place-items: center;
  width: 36px;
  height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #191b1a;
  cursor: pointer;
  border-radius: 4px;
}

.hero-carousel-controls button:hover {
  background: #191b1a0c;
}

.hero-carousel-controls button:focus-visible {
  outline: 2px solid #aa4500;
  outline-offset: 2px;
}

.hero-carousel-previous .icon {
  transform: rotate(180deg);
}

.hero-carousel-dot span {
  width: 7px;
  height: 7px;
  border-radius: 20px;
  background: #191b1a45;
  transition: width .3s ease, background .3s ease;
}

.hero-carousel-dot[aria-pressed="true"] span {
  width: 24px;
  background: #aa4500;
}

.hero-carousel-toggle svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero-carousel { transition: background .65s ease; }
.hero-slide:not(.hero-slide-club) { background: #f4f4ef; }
.immersive .hero-carousel.is-club-active { background: #101211; }
.hero-slide-club { color: #f7f5ee; }
.hero-carousel .hero-bottom { transition: color .5s, border-color .5s; }
.immersive .is-club-active .hero-bottom { color: #e8e9e2; border-color: #ffffff24; }
.is-club-active .hero-carousel-controls button { color: #f7f5ee; }
.is-club-active .hero-carousel-controls button:hover { background: #ffffff12; }
.is-club-active .hero-carousel-dot span { background: #ffffff4d; }
.is-club-active .hero-carousel-dot[aria-pressed="true"] span { background: #ff8617; }
.is-club-active .hero-carousel-controls button:focus-visible { outline-color: #ff8617; }
body.hero-club-active .header:not(.header-scrolled) .brand img { filter: brightness(0) invert(1); }
body.hero-club-active .header:not(.header-scrolled) nav a { color: #eeeee7; }
body.hero-club-active .header:not(.header-scrolled) .header-club-btn { background: #ffffff09; border-color: #ffffff38; box-shadow: none; }
@media (max-width: 1000px) { body.hero-club-active .header:not(.header-scrolled) nav a { color: #191b1a; } }

.club-scene { position: absolute; inset: 0 0 -100px; overflow: clip; background: #101211; pointer-events: none; }
.club-scene-grid { position: absolute; inset: -60px; opacity: .25; background-image: linear-gradient(#ffffff10 1px, transparent 1px), linear-gradient(90deg, #ffffff10 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(ellipse, black, transparent 70%); animation: club-grid-drift 22s linear infinite; }
.club-scene-glow { position: absolute; width: 780px; height: 780px; left: 50%; top: 48%; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, #ff86172b, #ff86170a 45%, transparent 70%); animation: club-glow-breathe 6s ease-in-out infinite alternate; }
.club-scene-word { position: absolute; top: 47%; left: 50%; font-family: var(--display); font-weight: 800; font-size: clamp(360px, 48vw, 800px); line-height: .75; letter-spacing: -.03em; color: transparent; -webkit-text-stroke: 1px #ffffff0c; transform: translate(-50%, -50%) rotate(-10deg); animation: club-word-drift 12s ease-in-out infinite alternate; }
.club-orbit { position: absolute; left: 50%; top: 53%; width: min(76vw, 1100px); aspect-ratio: 1; border: 1px solid #ff86171c; border-radius: 50%; transform: translate(-50%, -50%) rotate(0); animation: club-orbit-spin 32s linear infinite; }
.club-orbit::after { content: ''; position: absolute; top: 14%; left: 14%; width: 8px; height: 8px; border-radius: 50%; background: #ff8617; box-shadow: 0 0 24px #ff8617b0; }
.club-orbit-inner { width: min(58vw, 840px); border-style: dashed; border-color: #ffffff0c; animation-direction: reverse; animation-duration: 46s; }
.club-orbit-inner::after { width: 5px; height: 5px; background: #eee9df; }
.club-spark { position: absolute; color: #ff8617; font-size: 52px; line-height: 1; animation: club-spark-turn 14s linear infinite; }
.club-spark-one { left: 12%; top: 26%; }
.club-spark-two { right: 12%; top: 25%; font-size: 30px; animation-direction: reverse; }
.club-spark-three { left: 29%; bottom: 16%; color: #bcbdb3; font-size: 30px; animation-duration: 20s; }

.club-spotlight { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding-block: 112px 45px; }
.club-spotlight-copy { position: relative; z-index: 3; width: 100%; text-align: center; display: flex; flex-direction: column; align-items: center; }
.club-spotlight-brand { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-bottom: 24px; }
.club-spotlight-brand img { width: clamp(180px, 16.5vw, 250px); height: auto; }
.club-spotlight-brand > span { font-size: 9px; font-weight: 600; letter-spacing: .22em; color: #b9bcb2; }
.immersive .club-spotlight-title { font-family: var(--display); font-size: clamp(80px, 8.3vw, 142px); font-weight: 800; line-height: .84; letter-spacing: -.025em; margin: 0; }
.club-title-line { display: block; }
.club-title-prize { color: #ff8617; margin-top: 8px; }
.club-title-period { color: #f7f5ee; }
.club-spotlight-lead { color: #b9bcb2; font-size: clamp(14px, 1.18vw, 17px); line-height: 1.55; margin: 24px 0; max-width: 390px; }
.club-spotlight-actions { display: flex; align-items: center; gap: 28px; }
.club-spotlight-cta { position: relative; overflow: hidden; background: #ff8617; color: #111310; border: 1px solid #ffa249; padding: 17px 24px; box-shadow: 0 8px 36px #ff86171c; transition: background .3s, box-shadow .3s, transform .3s; }
.club-spotlight-cta::after { content: ''; position: absolute; inset: -40% auto -40% -65%; width: 40%; background: linear-gradient(90deg, transparent, #ffffff4d, transparent); transform: skewX(-20deg); animation: club-cta-sheen 4.5s ease-in-out infinite; pointer-events: none; }
.club-spotlight-cta:hover { background: #ffa13b; color: #101211; transform: translateY(-3px); box-shadow: 0 12px 42px #ff86173d; }
.club-spotlight-cta .icon { transition: transform .3s; }
.club-spotlight-cta:hover .icon { transform: translate(3px, -3px); }
.club-spotlight-link { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: #e8e9e2; }
.club-spotlight-link .icon { width: 16px; height: 16px; transition: transform .3s; }
.club-spotlight-link:hover { color: #ff8617; }
.club-spotlight-link:hover .icon { transform: translateY(4px); }
.club-spotlight a:focus-visible { outline: 2px solid #ff8617; outline-offset: 6px; }
.club-spotlight-steps { display: flex; gap: 24px; list-style: none; margin: 32px 0 0; padding: 0; }
.club-spotlight-steps li { display: flex; align-items: center; gap: 7px; font-size: 11px; color: #c5c8bc; white-space: nowrap; }
.club-spotlight-steps li > span { color: #ff8617; font-family: var(--display); font-size: 17px; font-weight: 600; }
.club-prize { position: absolute; z-index: 2; width: 28%; max-width: 410px; top: 34%; pointer-events: none; translate: calc(var(--club-pointer-x, 0) * 1px) calc(var(--club-pointer-y, 0) * 1px); transition: translate .7s ease-out; }
.club-prize-drill { left: -6%; }
.club-prize-kit { right: -6%; top: 40%; width: 29%; }
.club-prize-float { position: relative; animation: club-prize-float 7s ease-in-out infinite; }
.club-prize-kit .club-prize-float { animation-name: club-kit-float; animation-duration: 8s; animation-delay: -2s; }
.club-prize img { display: block; width: 100%; height: auto; filter: drop-shadow(0 25px 28px #0008); }
.club-prize-caption { display: flex; align-items: center; justify-content: center; gap: 7px; width: max-content; margin: 10px auto 0; padding: 8px 12px; border: 1px solid #ffffff24; border-radius: 30px; background: #1d211bd9; color: #c9cebd; font-size: 8px; font-weight: 600; letter-spacing: .13em; }
.club-prize-caption .icon { width: 12px; height: 12px; color: #ff8617; }
.club-scene-note { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); width: 100%; text-align: center; font-size: 9px; color: #858c7f; }

.hero-slide-club .club-reveal { opacity: 0; filter: blur(7px); transform: translate3d(var(--reveal-x, 0px), -24px, 0) rotate(var(--reveal-rotate, 0deg)) scale(.97); transition: opacity .35s ease, transform .45s ease, filter .35s ease; }
.hero-slide-club.is-active .club-reveal { opacity: 1; filter: blur(0); transform: translate3d(0, 0, 0) rotate(0) scale(1); transition: opacity .8s ease var(--enter-delay, 0s), transform 1s cubic-bezier(.16, 1, .3, 1) var(--enter-delay, 0s), filter .9s ease var(--enter-delay, 0s); }
.hero-slide-club .club-scene-note { translate: -50% 0; transform: translate3d(0, -24px, 0); }
.hero-slide-club:not(.is-active) .club-scene *, .hero-slide-club:not(.is-active) .club-prize-float, .hero-slide-club:not(.is-active) .club-spotlight-cta::after { animation-play-state: paused; }

@keyframes club-prize-float { 0%, 100% { transform: translateY(0) rotate(-14deg); } 50% { transform: translateY(-20px) rotate(-9deg); } }
@keyframes club-kit-float { 0%, 100% { transform: translateY(0) rotate(10deg); } 50% { transform: translateY(18px) rotate(5deg); } }
@keyframes club-orbit-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes club-glow-breathe { from { opacity: .55; scale: .9; } to { opacity: 1; scale: 1.15; } }
@keyframes club-spark-turn { to { transform: rotate(360deg); } }
@keyframes club-word-drift { to { transform: translate(-47%, -46%) rotate(-6deg); } }
@keyframes club-grid-drift { to { transform: translateY(64px); } }
@keyframes club-cta-sheen { 0%, 55% { left: -65%; } 85%, 100% { left: 130%; } }

@media (min-width: 651px) { .hero-carousel .hero-wash { top: calc(50% + 24px); } }
@media (min-width: 1000px) and (max-height: 760px) {
  .club-spotlight { padding-top: 103px; padding-bottom: 36px; }
  .club-spotlight-brand { gap: 10px; margin-bottom: 20px; }
  .immersive .club-spotlight-title { font-size: clamp(76px, 7.3vw, 112px); }
  .club-spotlight-lead { margin-block: 20px; }
  .club-spotlight-steps { margin-top: 24px; }
}
@media (max-width: 999px) and (min-width: 651px) {
  .club-spotlight { min-height: 600px; padding-top: 105px; }
  .immersive .club-spotlight-title { font-size: clamp(70px, 9vw, 92px); }
  .club-prize { width: 25%; left: -6%; top: 43%; }
  .club-prize-kit { left: auto; right: -6%; top: 47%; }
  .club-spotlight-lead { max-width: 340px; }
  .club-spotlight-steps { gap: 15px; }
  .club-prize-caption { display: none; }
}
@media (max-width: 650px) {
  .immersive .hero-carousel .hero-bottom { height: 98px; align-items: flex-start; padding-top: 16px; }
  .hero-carousel-controls { bottom: 5px; gap: 8px; }
  .hero-carousel-controls button { width: 40px; height: 40px; }
  .club-spotlight { min-height: 700px; padding-block: 105px 32px; align-items: flex-start; }
  .club-spotlight-brand { gap: 12px; margin-bottom: 24px; }
  .club-spotlight-brand img { width: 185px; }
  .club-spotlight-brand > span { font-size: 7px; letter-spacing: .2em; }
  .immersive .club-spotlight-title { font-size: clamp(57px, 15vw, 85px); line-height: .88; }
  .club-title-prize { margin-top: 4px; }
  .club-spotlight-lead { font-size: 13px; line-height: 1.5; margin: 18px 0; max-width: 290px; }
  .club-spotlight-actions { gap: 14px; flex-direction: column; }
  .club-spotlight-cta { font-size: 13px; padding: 14px 21px; min-height: 48px; }
  .club-spotlight-link { font-size: 12px; }
  .club-spotlight-steps { gap: 12px; margin-top: 25px; }
  .club-spotlight-steps li { gap: 4px; flex-direction: column; font-size: 9px; }
  .club-spotlight-steps li > span { font-size: 15px; }
  .club-prize { top: auto; bottom: 38px; left: -5%; width: 39%; max-width: 180px; }
  .club-prize-kit { left: auto; right: -5%; bottom: 35px; width: 43%; }
  .club-prize-caption { display: none; }
  .club-scene-note { bottom: 6px; max-width: 300px; font-size: 8px; line-height: 1.5; }
  .club-scene { bottom: -110px; }
  .club-scene-glow { width: 620px; height: 620px; top: 62%; }
  .club-orbit { top: 59%; width: 150vw; }
  .club-orbit-inner { width: 115vw; }
  .club-scene-word { top: 70%; font-size: 350px; }
  .club-spark-one { left: 1%; top: 23%; font-size: 30px; }
  .club-spark-two { right: 2%; top: 35%; font-size: 21px; }
  .club-spark-three { left: 46%; bottom: 14%; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-carousel *, .hero-carousel *::before, .hero-carousel *::after { animation: none !important; transition: none !important; }
  .hero-slide-club.is-active .club-reveal { opacity: 1; filter: none; transform: none; }
}

.is-offscreen .club-scene *, .is-offscreen .club-prize-float, .is-offscreen .club-spotlight-cta::after { animation-play-state: paused; }

/* Movimento discreto do hero de produtos, preservando os transforms da rolagem. */
@media (prefers-reduced-motion: no-preference) {
  .immersive #hero-products .hero-product {
    --product-float-distance: -9px;
    animation: hero-product-drift 8.5s ease-in-out infinite;
    animation-play-state: paused;
  }
  .immersive #hero-products .hero-product-left { animation-duration: 7.5s; animation-delay: -2.5s; }
  .immersive #hero-products .hero-product-right { animation-duration: 9.5s; animation-delay: -4.5s; }
  #hero-products .hero-watermark { animation: hero-watermark-drift 12s ease-in-out infinite alternate; animation-play-state: paused; }
  #hero-products .hero-wash { animation: hero-wash-breathe 10s ease-in-out infinite alternate; animation-play-state: paused; }
  .immersive #hero-products.is-active .hero-product,
  #hero-products.is-active .hero-watermark,
  #hero-products.is-active .hero-wash { animation-play-state: running; }

  #hero-products.is-active .hero-copy > * { animation: hero-copy-arrive .8s cubic-bezier(.16, 1, .3, 1) both; }
  #hero-products.is-active .hero-copy > h1 { animation-delay: .1s; }
  #hero-products.is-active .hero-description { animation-delay: .2s; }
  #hero-products.is-active .hero-actions { animation-delay: .3s; }
  #hero-products.is-active .hero-proof { animation-delay: .4s; }
  #hero-products.is-active .product-stage { animation: hero-products-arrive 1.1s cubic-bezier(.16, 1, .3, 1) .15s both; }
  #hero-products .hero-actions .icon { transition: translate .25s ease; }
  #hero-products .hero-actions a:hover .icon { translate: 3px 0; }

  .hero-carousel.is-offscreen #hero-products .hero-product,
  .hero-carousel.is-offscreen #hero-products .hero-watermark,
  .hero-carousel.is-offscreen #hero-products .hero-wash,
  .hero-carousel.is-offscreen #hero-products .hero-copy > *,
  .hero-carousel.is-offscreen #hero-products .product-stage { animation-play-state: paused; }
}

@keyframes hero-copy-arrive {
  from { opacity: 0; translate: 0 14px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes hero-products-arrive {
  from { opacity: 0; translate: 22px 8px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes hero-product-drift {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 var(--product-float-distance); }
}
@keyframes hero-watermark-drift {
  from { translate: 0 0; }
  to { translate: 6px -5px; }
}
@keyframes hero-wash-breathe {
  from { scale: 1; }
  to { scale: 1.012; }
}
@media (max-width: 650px) {
  .immersive #hero-products .hero-product { --product-float-distance: -5px; }
}

/* Let product imagery carry the campaign without decorative motion. */
.hero-slide-club .club-prize-float { animation: none; }
.hero-slide-club .club-reveal,
.hero-slide-club.is-active .club-reveal {
  filter: none;
  transform: none;
  transition: opacity .2s ease;
}
