/* ═══════════════════════════════════════════════════
   PAGUE COM SLIDES — Canva
   Paleta extraída do PDF original
   ═══════════════════════════════════════════════════ */

:root{
  /* marca */
  --purple:      #7D2AE7;
  --purple-lit:  #8C52FF;
  --purple-neon: #992AFE;
  --purple-deep: #5E17EB;
  --violet:      #5736FA;
  --blue:        #3432C9;
  --blue-lit:    #138EFF;
  --cyan:        #0ABEDD;
  --cyan-lit:    #29D8F2;
  --green:       #0BA84A;
  --lavender:    #C2CDFF;
  --ink:         #0B0B1E;
  --night:       #000003;
  --white:       #FFFFFF;

  /* ritmo */
  --wrap: 1180px;
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-pill: 999px;

  /* tempo — tudo suave, nada brusco */
  --ease: cubic-bezier(.22,1,.36,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);
  --t-fast: .28s;
  --t-med: .5s;
  --t-slow: .8s;

  --shadow-sm: 0 4px 14px rgba(5,5,30,.18);
  --shadow-md: 0 14px 38px rgba(5,5,30,.28);
  --shadow-lg: 0 28px 68px rgba(5,5,30,.42);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:auto; -webkit-text-size-adjust:100%; }

body{
  font-family:"Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--night);
  color: var(--white);
  line-height:1.55;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
::selection{ background: var(--cyan); color: var(--ink); }

.wrap{ width:min(100% - 48px, var(--wrap)); margin-inline:auto; }
.center{ display:flex; justify-content:center; }
.anchor{ display:block; position:relative; top:-92px; visibility:hidden; }

/* cursor personalizado: some o nativo em telas com ponteiro fino */
@media (hover:hover) and (pointer:fine){
  body.has-cursor,
  body.has-cursor *{ cursor:none !important; }
}

/* ── tipografia comum ─────────────────────────────── */
.eyebrow{
  text-align:center; text-transform:uppercase;
  letter-spacing:.34em; font-size:.78rem; font-weight:700;
  color: rgba(255,255,255,.85);
}
.h2{
  text-align:center; font-weight:800; line-height:1.12;
  font-size: clamp(1.9rem, 4.2vw, 3.15rem);
  margin: 1.1rem auto 0; max-width: 18ch;
  letter-spacing:-.015em;
}
.lede{
  text-align:center; max-width: 46ch; margin:1.4rem auto 0;
  font-size: clamp(1rem, 1.35vw, 1.12rem);
  color: rgba(255,255,255,.9);
}

/* ═══════════ BOTÕES ═══════════ */
.btn{
  --btn-bg: var(--purple);
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  position:relative; isolation:isolate; overflow:hidden;
  padding: .95rem 2.1rem; border-radius: var(--r-pill);
  background: var(--btn-bg); color:#fff;
  font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  font-size:.86rem; white-space:nowrap;
  box-shadow: var(--shadow-sm);
  transition: transform var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease),
              filter var(--t-fast) var(--ease);
}
/* brilho que varre no hover */
.btn::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,.45) 50%, transparent 80%);
  transform: translateX(-120%);
  transition: transform .75s var(--ease);
}
.btn:hover{ transform: translateY(-3px); box-shadow: var(--shadow-md); filter:saturate(1.15); }
.btn:hover::after{ transform: translateX(120%); }
.btn:active{ transform: translateY(-1px) scale(.98); }

.btn--cyan{ --btn-bg: var(--cyan); box-shadow:0 8px 26px rgba(10,190,221,.4); }
.btn--cyan:hover{ box-shadow:0 16px 40px rgba(10,190,221,.55); }
.btn--enter{ padding:.72rem 1.7rem; font-size:.8rem; background:var(--purple); }

/* ripple */
.ripple{
  position:absolute; border-radius:50%; pointer-events:none;
  background: rgba(255,255,255,.55); transform: translate(-50%,-50%) scale(0);
  animation: ripple .65s var(--ease) forwards;
}
@keyframes ripple{ to{ transform:translate(-50%,-50%) scale(9); opacity:0; } }

/* ═══════════ CORTINA DE PRÉVIA ═══════════ */
/* Cobre o site inteiro enquanto a senha não é informada. O conteúdo continua
   no fluxo por baixo — assim o GSAP mede as posições certas ao destravar. */

.gate{
  position:fixed; inset:0; z-index:99999;
  place-items:center; padding:24px;
  background:
    radial-gradient(120% 90% at 80% 20%, rgba(124,42,231,.5) 0%, transparent 60%),
    linear-gradient(120deg, #000003 0%, #0A0A2A 40%, #201E9E 78%, #3432C9 100%);
  transition: opacity .4s var(--ease);
}
.gate.is-open{ opacity:0; pointer-events:none; }

.gate__box{
  width:min(100%, 380px);
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:2.6rem 2rem 2.2rem;
  background: rgba(255,255,255,.06);
  border:1.5px solid rgba(255,255,255,.16);
  border-radius: var(--r-lg);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-lg);
}
.gate__logo{ width:118px; margin-bottom:1.4rem; }
.gate__title{ font-size:1.35rem; font-weight:800; letter-spacing:-.01em; }
.gate__hint{ margin-top:.5rem; margin-bottom:.9rem; font-size:.92rem; color: rgba(255,255,255,.62); max-width:26ch; }

.gate__input{
  width:100%; margin-top:.7rem;
  padding:.9rem 1.1rem; border-radius: var(--r-pill);
  background: rgba(255,255,255,.09);
  border:1.5px solid rgba(255,255,255,.22);
  color:#fff; font:inherit; font-size:1rem; text-align:center;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.gate__input::placeholder{ color: rgba(255,255,255,.4); }
.gate__input:focus{ outline:none; border-color: var(--cyan); background: rgba(255,255,255,.13); }

.gate__btn{
  width:100%; margin-top:1rem;
  padding:.9rem 1.2rem; border-radius: var(--r-pill);
  background: var(--cyan); color:#fff;
  font-weight:800; letter-spacing:.06em; text-transform:uppercase; font-size:.84rem;
  box-shadow: 0 8px 26px rgba(10,190,221,.35);
  transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.gate__btn:hover{ transform: translateY(-2px); background: var(--cyan-lit); }
.gate__btn:active{ transform: translateY(0); }
.gate__btn:disabled{ opacity:.6; cursor:progress; transform:none; }

.gate__error{ margin-top:.9rem; font-size:.86rem; color:#FF8DA1; font-weight:700; }

.gate__ask{
  margin-top:1.3rem; font-size:.84rem; line-height:1.5;
  color: rgba(255,255,255,.5);
}
.gate__ask a{
  color: var(--cyan-lit); font-weight:700;
  border-bottom:1px solid transparent;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.gate__ask a:hover{ color:#fff; border-color:#fff; }

/* chacoalhada na senha errada */
.gate.is-wrong .gate__box{ animation: gateShake .42s var(--ease-soft); }
@keyframes gateShake{
  0%,100%{ transform:none; }
  20%{ transform: translateX(-9px); }
  40%{ transform: translateX(8px); }
  60%{ transform: translateX(-5px); }
  80%{ transform: translateX(3px); }
}

@media (max-width: 480px){
  .gate__box{ padding:2.2rem 1.5rem 1.9rem; }
  .gate__logo{ width:98px; }
}

/* ═══════════ CURSOR ═══════════ */
/* acima da cortina de login (99999): a setinha acompanha o usuário lá também */
#cursor-layer{ position:fixed; inset:0; z-index:100000; pointer-events:none; }
.cursor{
  position:absolute; top:0; left:0; will-change:transform;
  display:flex; align-items:flex-start; gap:2px;
  transition: opacity .35s var(--ease);
}
.cursor__arrow{
  width:30px; height:30px; flex:none;
  color: var(--green);
  filter: drop-shadow(0 3px 7px rgba(0,0,0,.35));
  transition: transform var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
  transform-origin: 20% 12%;
}
.cursor__tag{
  margin-top:16px;
  background: var(--green); color:#fff;
  font-size:.72rem; font-weight:800; letter-spacing:.02em;
  padding:.2rem .6rem; border-radius: var(--r-pill);
  border:2px solid rgba(255,255,255,.95);
  box-shadow: var(--shadow-sm); white-space:nowrap;
  transform-origin: left center;
  transition: transform var(--t-fast) var(--ease);
}
/* estados do cursor do usuário */
.cursor--me.is-hover .cursor__arrow{ transform: scale(1.28) rotate(-8deg); }
.cursor--me.is-down  .cursor__arrow{ transform: scale(.8); }
.cursor--me.is-hidden{ opacity:0; }

/* cursores de outros visitantes */
/* na cortina de login só aparece o "Você" — visitantes ali só confundiriam */
html.pcs-locked .cursor--peer{ display:none; }
.cursor--peer{ opacity:0; }
.cursor--peer.is-live{ opacity:1; }
.cursor--peer .cursor__arrow{ width:26px; height:26px; }
.cursor--peer .cursor__tag{ font-size:.66rem; margin-top:13px; }

/* ═══════════ BARRA DE PROGRESSO ═══════════ */
.scroll-progress{
  position:fixed; top:0; left:0; right:0; height:3px; z-index:1000;
  background: rgba(255,255,255,.08);
}
.scroll-progress i{
  display:block; height:100%; width:0;
  background: linear-gradient(90deg, var(--purple-neon), var(--blue-lit), var(--cyan));
  transform-origin:left;
}

/* ═══════════ NAVBAR ═══════════ */
.nav{
  position:fixed; top:3px; left:0; right:0; z-index:900;
  background: linear-gradient(90deg, var(--purple-lit) 0%, #6E7CF6 38%, #58A8F0 68%, var(--cyan-lit) 100%);
  transition: box-shadow var(--t-med) var(--ease), padding var(--t-med) var(--ease);
}
.nav.is-stuck{ box-shadow: 0 10px 34px rgba(0,0,0,.35); }
.nav__inner{
  width:min(100% - 40px, 1340px); margin-inline:auto;
  display:flex; align-items:center; gap:2rem;
  height:64px;
  transition: height var(--t-med) var(--ease);
}
.nav.is-stuck .nav__inner{ height:56px; }

.nav__logo img{ height:26px; width:auto; transition: transform var(--t-med) var(--ease); }
.nav__logo:hover img{ transform: scale(1.07) rotate(-2deg); }

.nav__links{ position:relative; display:flex; align-items:center; gap:.35rem; margin-right:auto; }
.nav__links a{
  position:relative; z-index:2;
  padding:.5rem .95rem; border-radius: var(--r-pill);
  font-size:.88rem; font-weight:700; color: rgba(255,255,255,.88);
  transition: color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.nav__links a:hover{ color:#fff; transform: translateY(-1px); }
.nav__links a.is-active{ color:#fff; }

/* pílula deslizante */
.nav__pill{
  position:absolute; z-index:1; top:50%; left:0; height:34px; width:0;
  transform: translateY(-50%);
  background: rgba(255,255,255,.22);
  border-radius: var(--r-pill);
  backdrop-filter: blur(4px);
  opacity:0;
  transition: transform .45s var(--ease), width .45s var(--ease), opacity .3s var(--ease);
}
.nav__pill.is-on{ opacity:1; }

.nav__burger{ display:none; width:34px; height:26px; flex-direction:column; justify-content:space-between; }
.nav__burger span{
  display:block; height:3px; border-radius:2px; background:#fff;
  transition: transform var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}
.nav__burger.is-open span:nth-child(1){ transform: translateY(11.5px) rotate(45deg); }
.nav__burger.is-open span:nth-child(2){ opacity:0; }
.nav__burger.is-open span:nth-child(3){ transform: translateY(-11.5px) rotate(-45deg); }

/* ═══════════ HERO ═══════════ */
.hero{
  position:relative; overflow:hidden;
  padding: 148px 0 96px;
  background:
    radial-gradient(120% 90% at 92% 40%, rgba(52,50,201,.85) 0%, transparent 62%),
    linear-gradient(105deg, #000003 0%, #0A0A2A 38%, #201E9E 74%, #3432C9 100%);
}
.hero__glow{ position:absolute; border-radius:50%; filter: blur(110px); pointer-events:none; }
.hero__glow--a{ width:520px; height:520px; top:-140px; right:-60px; background: rgba(124,42,231,.42); }
.hero__glow--b{ width:460px; height:460px; bottom:-180px; left:-120px; background: rgba(19,142,255,.28); }
.hero__inner{ position:relative; z-index:2; }

.hero__top{ position:relative; }
.hero__brand{ text-align:center; width:min(100%, 460px); margin-inline:auto; }
.hero__brandmark{ width:min(46vw, 190px); margin-inline:auto; }
.hero__presents{
  display:block; margin-top:.55rem;
  text-transform:uppercase; letter-spacing:.42em; font-weight:700; font-size:.72rem;
  color: rgba(255,255,255,.92);
}

/* ── LOCKUP: chip "Slides" + cartão de pagamento ──────────────────
   Tudo aqui é medido em `em` do título. Como o título usa clamp(),
   a peça inteira encolhe junto e nunca se desmonta nos breakpoints. */

/* inline-flex: a caixa abraça o chip sem o leading da linha, para o
   `bottom: calc(100% - …)` do cartão medir a partir do topo real do chip */
.hero__title .lockup{ position:relative; display:inline-flex; }
/* o chip fica à frente; o cartão passa por trás dele */
.hero__title .lockup .chip{ position:relative; z-index:1; }

.paylock{
  position:absolute; display:block;
  left: .40em;                      /* em = font-size do título */
  bottom: calc(100% - .46em);       /* o chip cobre .46em da base do cartão */
  width: 3.20em;
  z-index:0;                        /* atrás do chip */
  pointer-events:none;              /* não rouba clique do título */
}

/* cartão "forma de pagamento" */
.paycard{
  display:block; width:100%;
  font-size: .16em;                 /* base interna, ainda em em do título */
  padding: 1.15em 1.4em 3.7em;      /* base folgada: o chip sobrepõe vazio */
  background: var(--blue-lit); border-radius: 1.7em;
  box-shadow: var(--shadow-lg);
  pointer-events:auto;
  transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
.paycard:hover{ transform: translateY(-.4em) rotate(-1.2deg); box-shadow:0 34px 80px rgba(0,0,0,.5); }
.paycard__head{
  display:flex; align-items:center; gap:.6em;
  font-weight:800; font-size:1em; letter-spacing:.01em; line-height:1.3;
}
.paycard__caret{
  width:1.05em; height:.8em; flex:none;
  background: rgba(255,255,255,.75);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.paycard__list{
  display:block; margin-top:.75em; padding-left:.9em;
  border-left:.13em solid rgba(255,255,255,.5);
  font-size:1.33em;
}
.paycard__list > span{
  display:block; font-weight:700; line-height:1.5;
  transition: color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.paycard__list .is-off{ color: rgba(255,255,255,.92); }
.paycard__list .is-off:hover{ transform: translateX(.2em); }
@keyframes pulseIn{ 0%,100%{ transform:none; } 50%{ transform: translateX(.3em); } }

/* etiqueta "Você" — ancorada ao cartão, escala junto */
.youtag{
  position:absolute;
  /* % do .paylock — `em` aqui resolveria no font-size já reduzido abaixo */
  left:84%; top:56%;
  display:flex; align-items:flex-start; gap:.02em;
  font-size:.17em;                  /* em do título */
  pointer-events:auto;
}
.youtag__arrow{ width:1.9em; height:1.9em; color: var(--green); filter: drop-shadow(0 4px 8px rgba(0,0,0,.4)); }
.youtag span{
  margin-top:.35em;
  background: var(--green); color:#fff; font-weight:800; font-size:1em;
  padding:.28em .85em; border-radius:.6em;
  border:.18em solid #fff; transform: rotate(-6deg);
  box-shadow: var(--shadow-md); white-space:nowrap;
}

/* título */
.hero__title{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  /* row-gap reserva a faixa do cartão quando o título quebra em duas linhas;
     em uma linha só (desktop) não tem efeito nenhum */
  gap: 1.58em .28em;
  margin: 1.65em 0 .55em;   /* o topo abre espaço para o cartão do lockup */
  font-size: clamp(3rem, 9.4vw, 7.4rem);
  font-weight:400; line-height:1; letter-spacing:-.02em;
}
.hero__title .chip{
  position:relative;
  padding: .06em .3em .16em;
  background: linear-gradient(135deg, var(--purple-lit), var(--purple-neon));
  border-radius: .18em;
  font-weight:800;
  box-shadow: 0 18px 44px rgba(140,82,255,.5);
  transform: rotate(-2.2deg);
  transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
.hero__title .chip:hover{ transform: rotate(1.5deg) scale(1.04); box-shadow:0 26px 60px rgba(140,82,255,.7); }

.hero__bottom{
  display:grid; grid-template-columns: minmax(240px, 340px) minmax(0, 1fr);
  gap: 3rem; align-items:center;
}
.hero__pitch p{ font-size: clamp(1.05rem, 1.6vw, 1.32rem); color: rgba(255,255,255,.95); }
.hero__pitch .btn{ margin-top:1.6rem; }

/* ── carrossel com snap ── */
.hero__rail{ position:relative; min-width:0; }   /* trava o 1fr do grid */
/* A folga lateral vai até 18px — o mesmo `spaceBetween` dos slides. Passar
   disso começa a mostrar o card vizinho, porque o recorte cresce além do vão.
   Padding e margem negativa se cancelam: a largura dos cards não muda. */
#prize-carousel{ overflow:hidden; padding: 20px 18px 34px; margin: -20px -18px -34px; }

/* Dentro do carrossel a sombra usa spread negativo para caber nos 18px:
   alcance ≈ blur/2 + spread. Na grade de Prêmios, sem recorte, ela é a cheia. */
#prize-carousel .prize{ box-shadow: 0 14px 30px -6px rgba(5,5,30,.34); }
#prize-carousel .prize:hover{ box-shadow: 0 22px 40px -10px rgba(5,5,30,.5); }
/* o snap: cada passo desliza um card inteiro com desaceleracao suave */
#prize-carousel .swiper-wrapper{ transition-timing-function: cubic-bezier(.22,1,.36,1) !important; }
#prize-carousel .swiper-slide{ height:auto; }

/* ═══════════ CARTÃO DE PRÊMIO ═══════════ */
.prize{
  background: var(--lavender); color: var(--ink);
  border-radius: var(--r-lg); overflow:hidden;
  padding: 12px 12px 18px;
  box-shadow: var(--shadow-md);
  transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
.prize__media{ border-radius: var(--r-sm); overflow:hidden; aspect-ratio: 3/2; }
.prize__media img{
  width:100%; height:100%; object-fit:cover;
  transition: transform .9s var(--ease), filter .5s var(--ease);
}
.prize:hover{ transform: translateY(-10px); box-shadow: 0 30px 66px rgba(5,5,30,.5); }
.prize:hover .prize__media img{ transform: scale(1.1); filter: saturate(1.15); }

.prize__name{ margin-top:.85rem; text-align:center; font-weight:600; font-size:1rem; color:#151538; }
.prize__stars{ display:flex; justify-content:center; gap:.16rem; margin-top:.3rem; }
.prize__stars span{
  color: #006EEF; font-size:.9rem; line-height:1;
  transition: transform var(--t-fast) var(--ease);
}
.prize:hover .prize__stars span{ transform: translateY(-3px) scale(1.15); }
.prize:hover .prize__stars span:nth-child(2){ transition-delay:.04s; }
.prize:hover .prize__stars span:nth-child(3){ transition-delay:.08s; }
.prize:hover .prize__stars span:nth-child(4){ transition-delay:.12s; }
.prize:hover .prize__stars span:nth-child(5){ transition-delay:.16s; }

.prize__cta{
  display:block; width:100%; margin-top:.85rem; padding:.62rem 1rem;
  border-radius: var(--r-pill);
  background: var(--purple-deep); color:#fff;
  font-weight:700; font-size:.86rem; text-align:center;
  position:relative; overflow:hidden; isolation:isolate;
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.prize__cta::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background: linear-gradient(135deg, var(--purple-neon), var(--blue-lit));
  opacity:0; transition: opacity var(--t-fast) var(--ease);
}
.prize__cta:hover{ transform: translateY(-2px); box-shadow:0 10px 24px rgba(94,23,235,.5); }
.prize__cta:hover::before{ opacity:1; }

/* ── preço: só existe na versão B, e só na seção Prêmios ── */
.prize__price{ display:none; }

[data-version="b"] #prizes-grid .prize{
  background:#fff;
  text-align:left;
}
[data-version="b"] #prizes-grid .prize__name{
  text-align:left; font-weight:700; font-size:1.02rem;
}
[data-version="b"] #prizes-grid .prize__stars{ justify-content:flex-start; }
[data-version="b"] #prizes-grid .prize__price{
  display:block; margin-top:.55rem;
  /* altura reservada para as duas linhas: o card não pula no hover */
  min-height:2.9rem;
}
[data-version="b"] #prizes-grid .prize__from{
  display:block; color:#3A3A55; font-size:1.02rem; font-weight:700;
  text-decoration: line-through transparent; text-decoration-thickness:2px;
  transition: color var(--t-med) var(--ease),
              font-size var(--t-med) var(--ease),
              text-decoration-color var(--t-med) var(--ease);
}
[data-version="b"] #prizes-grid .prize__pay{
  display:block; color: var(--purple-deep); font-size:1.02rem; font-weight:800;
  opacity:0; transform: translateY(-4px);
  transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease);
}
/* no hover o preço é riscado e o "preço real" aparece.
   `.is-revealed` trava o estado: uma vez revelado, fica assim pela sessão. */
[data-version="b"] #prizes-grid .prize:hover .prize__from,
[data-version="b"] #prizes-grid .prize.is-revealed .prize__from{
  color:#6B6B85; font-size:.82rem;
  text-decoration-color:#6B6B85;
}
[data-version="b"] #prizes-grid .prize:hover .prize__pay,
[data-version="b"] #prizes-grid .prize.is-revealed .prize__pay{
  opacity:1; transform:none;
}
[data-version="b"] #prizes-grid .prize__cta{ margin-top:1rem; }

/* ── seletor de versão no rodapé ── */
.vswitch{
  display:flex; align-items:center; justify-content:center; gap:1rem;
  flex-wrap:wrap; margin-top:2.4rem;
  padding-top:1.8rem; border-top:1px solid rgba(255,255,255,.09);
}
.vswitch__label{ color: rgba(255,255,255,.45); font-size:.82rem; }
.vswitch__ctrl{
  display:flex; gap:.25rem; padding:.25rem;
  background: rgba(255,255,255,.07); border-radius: var(--r-pill);
}
.vswitch__ctrl button{
  padding:.42rem 1rem; border-radius: var(--r-pill);
  font-size:.8rem; font-weight:700; color: rgba(255,255,255,.6);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.vswitch__ctrl button:hover{ color:#fff; background: rgba(255,255,255,.1); }
.vswitch__ctrl button.is-active{ background: var(--cyan); color:#fff; }

/* ═══════════ COMO FUNCIONA ═══════════ */
.steps{
  padding: 104px 0 116px;
  background: linear-gradient(120deg, var(--purple) 0%, var(--violet) 34%, #2C6BF0 66%, var(--cyan) 100%);
}
.steps__grid{
  margin-top: 3.4rem;
  display:grid; grid-template-columns: repeat(4, 1fr); gap:1.5rem;
}
.step{
  position:relative;
  background: rgba(255,255,255,.09);
  border: 1.5px solid rgba(255,255,255,.4);
  border-radius: var(--r-lg);
  padding: 0 1.35rem 1.6rem;
  backdrop-filter: blur(6px);
  transform-style: preserve-3d;
  transition: transform var(--t-med) var(--ease), background var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
.step:hover{ background: rgba(255,255,255,.16); box-shadow: var(--shadow-lg); }
.step__media{
  margin: 0 -1.35rem; height:150px; overflow:hidden;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.step__media img{ width:100%; height:100%; object-fit:cover; transition: transform .9s var(--ease); }
.step:hover .step__media img{ transform: scale(1.08); }
.step__num{
  display:grid; place-items:center;
  /* a <img> é elemento substituído e pinta depois do fundo dos irmãos em
     fluxo normal — sem position+z-index ela cobriria o badge */
  position:relative; z-index:1;
  width:42px; height:42px; margin:-21px 0 1.1rem;
  border-radius:50%; background: var(--cyan); color:#fff;
  font-weight:800; font-size:1.15rem;
  box-shadow: 0 6px 18px rgba(0,0,0,.32);
  transition: transform var(--t-med) var(--ease), background var(--t-med) var(--ease);
}
.step:hover .step__num{ transform: scale(1.15) rotate(8deg); background: var(--cyan-lit); }
.step h3{ font-size:1.22rem; font-weight:800; }
.step p{ margin-top:.8rem; font-size:.98rem; color: rgba(255,255,255,.94); }
.step b{ font-weight:800; }

/* ═══════════ PRÊMIOS ═══════════ */
.prizes{
  position:relative; padding: 104px 0 116px;
  background: linear-gradient(115deg, var(--violet) 0%, var(--purple-neon) 42%, #B45CFE 74%, #CA93FE 100%);
}
.filters{ display:flex; justify-content:center; gap:.6rem; margin-top:2rem; flex-wrap:wrap; }
.filters button{
  padding:.55rem 1.35rem; border-radius: var(--r-pill);
  background: rgba(255,255,255,.16); border:1.5px solid rgba(255,255,255,.42);
  font-weight:700; font-size:.85rem; color:#fff;
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.filters button:hover{ transform: translateY(-2px); background: rgba(255,255,255,.28); }
.filters button.is-active{ background:#fff; color: var(--purple-deep); }

.prizes__grid{
  margin-top: 2.6rem;
  display:grid; grid-template-columns: repeat(4, 1fr); gap:1.6rem;
}
.prizes__grid .prize{
  transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease),
              opacity var(--t-med) var(--ease);
}
.prize.is-filtered{ opacity:0; transform: scale(.9); pointer-events:none; position:absolute; }
.prizes .center{ margin-top: 3.2rem; }

/* ═══════════ FAQ ═══════════ */
.faq{
  padding: 104px 0 110px;
  background: linear-gradient(100deg, #000003 0%, #0C0C33 34%, #232199 72%, #3432C9 100%);
}
.faq__list{ margin: 3rem auto 0; max-width: 820px; display:flex; flex-direction:column; gap:.85rem; }
.qa{
  background: rgba(255,255,255,.06);
  border:1.5px solid rgba(255,255,255,.16);
  border-radius: var(--r-md); overflow:hidden;
  transition: background var(--t-med) var(--ease), border-color var(--t-med) var(--ease), transform var(--t-med) var(--ease);
}
.qa:hover{ background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.34); transform: translateY(-2px); }
.qa.is-open{ background: rgba(255,255,255,.12); border-color: rgba(41,216,242,.6); }
.qa__q{
  width:100%; display:flex; align-items:center; gap:1rem;
  padding:1.15rem 1.4rem; text-align:left;
  font-size:1.04rem; font-weight:700;
}
.qa__ico{
  margin-left:auto; flex:none; width:26px; height:26px; display:grid; place-items:center;
  border-radius:50%; background: var(--cyan); color:#fff; font-size:1.1rem; line-height:1;
  transition: transform var(--t-med) var(--ease), background var(--t-med) var(--ease);
}
.qa.is-open .qa__ico{ transform: rotate(135deg); background: var(--purple-neon); }
.qa__a{ height:0; overflow:hidden; }
.qa__a > div{ padding:0 1.4rem 1.3rem; color: rgba(255,255,255,.86); font-size:.99rem; max-width:66ch; }
.faq__foot{ margin-top:2.6rem; text-align:center; color: rgba(255,255,255,.7); font-size:.95rem; }
.faq__foot a{ color: var(--cyan-lit); font-weight:700; border-bottom:1px solid transparent; transition: border-color var(--t-fast) var(--ease); }
.faq__foot a:hover{ border-color: var(--cyan-lit); }

/* ═══════════ RODAPÉ ═══════════ */
.foot{ background: #050514; padding: 62px 0 30px; }
.foot__inner{ display:grid; grid-template-columns: 1.2fr 1.4fr .8fr; gap:2.4rem; align-items:start; }
.foot__brand img{ height:34px; opacity:.95; }
.foot__brand p{ margin-top:.9rem; color: rgba(255,255,255,.55); font-size:.94rem; max-width:28ch; }
.foot__nav{ display:flex; flex-wrap:wrap; gap:.5rem 1.6rem; }
.foot__nav a{
  font-size:.94rem; color: rgba(255,255,255,.7); position:relative;
  transition: color var(--t-fast) var(--ease);
}
.foot__nav a::after{
  content:""; position:absolute; left:0; bottom:-3px; height:2px; width:100%;
  background: var(--cyan); transform: scaleX(0); transform-origin:right;
  transition: transform var(--t-med) var(--ease);
}
.foot__nav a:hover{ color:#fff; }
.foot__nav a:hover::after{ transform: scaleX(1); transform-origin:left; }
.foot__meta{ display:flex; flex-direction:column; gap:.4rem; color: var(--cyan-lit); font-weight:700; font-size:.94rem; }

/* ── redes sociais ── */
.foot__social{ display:flex; gap:.6rem; margin-top:1rem; }
.foot__social a{
  display:grid; place-items:center;
  width:42px; height:42px; border-radius:50%;
  background: rgba(255,255,255,.08);
  border:1.5px solid rgba(255,255,255,.16);
  color: rgba(255,255,255,.75);
  transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.foot__social a:hover{
  transform: translateY(-3px);
  background: var(--cyan); border-color: var(--cyan); color:#fff;
  box-shadow: 0 10px 24px rgba(10,190,221,.4);
}
.foot__social svg{ width:21px; height:21px; }

/* ═══════════ VOLTAR AO TOPO ═══════════ */
.totop{
  position:fixed; right:26px; bottom:26px; z-index:800;
  width:48px; height:48px; border-radius:50%;
  background: var(--cyan); color:#fff; font-size:1.3rem; font-weight:800;
  box-shadow: var(--shadow-md);
  opacity:0; transform: translateY(18px) scale(.85); pointer-events:none;
  transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease), background var(--t-fast) var(--ease);
}
.totop.is-on{ opacity:1; transform:none; pointer-events:auto; }
.totop:hover{ background: var(--cyan-lit); transform: translateY(-4px); }

/* ═══════════ FLUTUAÇÕES ═══════════ */
@keyframes floatY{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-12px); } }
.float-slow{ animation: floatY 6.5s ease-in-out infinite; }
.float-fast{ animation: floatY 4.2s ease-in-out infinite .6s; }
.paycard:hover, .youtag:hover{ animation-play-state: paused; }

/* ═══════════ REVEAL (estado inicial) ═══════════ */
[data-reveal]{ opacity:0; }

/* ═══════════ RESPONSIVO ═══════════ */
@media (max-width: 1100px){
  .steps__grid{ grid-template-columns: repeat(2, 1fr); }
  .prizes__grid{ grid-template-columns: repeat(2, 1fr); }
  .hero__bottom{ grid-template-columns: 1fr; gap:2.4rem; }
}
@media (max-width: 900px){
  /* em tela de toque o cursor do sistema volta a mandar */
  #cursor-layer{ display:none; }
  body.has-cursor, body.has-cursor *{ cursor:auto !important; }

  .nav__inner{ gap:.9rem; }
  .btn--enter{ padding:.55rem 1.15rem; font-size:.72rem; }
  .nav__logo img{ height:22px; }


  .nav__links{
    position:fixed; inset:64px 0 auto 0;
    flex-direction:column; align-items:stretch; gap:0;
    padding:1rem 1.5rem 1.6rem;
    background: linear-gradient(160deg, var(--purple-lit), var(--cyan-lit));
    box-shadow: var(--shadow-md);
    clip-path: inset(0 0 100% 0);
    transition: clip-path var(--t-med) var(--ease);
  }
  .nav__links.is-open{ clip-path: inset(0 0 0 0); }
  .nav__links a{ padding:.85rem .4rem; font-size:1rem; border-bottom:1px solid rgba(255,255,255,.18); }
  .nav__pill{ display:none; }
  .nav__burger{ display:flex; }
  .btn--enter{ margin-left:auto; margin-right:.9rem; }
  .hero{ padding-top:120px; }
}
@media (max-width: 620px){
  .wrap{ width: calc(100% - 32px); }
  .steps__grid, .prizes__grid{ grid-template-columns: 1fr; }

  /* ── hero no mobile ──────────────────────────────────────────
     O título quebra em duas linhas e o cartão passa a morar ENTRE
     elas — então o respiro de cima (que existe para o cartão acima
     do título no desktop) vira vão morto e sai daqui. */
  .hero{ padding-top: 104px; }
  .hero__title{
    font-size: clamp(2.6rem, 13vw, 4rem);
    gap: .05em .28em;          /* sem o cartão, as linhas voltam a se encostar */
    margin: .30em 0 .45em;     /* sem o vão morto de cima */
  }
  /* No mobile o título quebra em duas linhas e o cartão de pagamento ficaria
     espremido entre elas. Sai de cena: "Pague com" e o chip "Slides" logo abaixo. */
  .paylock{ display:none; }
  .foot__inner{ grid-template-columns: 1fr; }
  .step__media{ height:190px; }
  .totop{ right:16px; bottom:16px; }
}

/* ═══════════ ACESSIBILIDADE ═══════════ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  [data-reveal]{ opacity:1 !important; transform:none !important; }
  #cursor-layer{ display:none; }
  body.has-cursor, body.has-cursor *{ cursor:auto !important; }
}
:focus-visible{ outline:3px solid var(--cyan-lit); outline-offset:3px; border-radius:6px; }