/* ═══════════════════════════════════════════════════
   REVOLUX — SORTEIO (Landing Page)
   Hero escuro + wizard interativo em card claro
═══════════════════════════════════════════════════ */

/* ── HERO ── */
.sorteio-hero {
  position: relative;
  min-height: 72vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--nav-h) + 56px) var(--section-px) 64px;
  background:
    radial-gradient(circle at 18% 10%, rgba(199,155,116,0.10), transparent 50%),
    radial-gradient(circle at 85% 90%, rgba(23,83,71,0.5), transparent 55%),
    linear-gradient(160deg, var(--verde-dark) 0%, #0a1a17 65%, #000 130%);
  overflow: hidden;
  text-align: center;
}
.sorteio-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  box-shadow: inset 0 -120px 140px -80px rgba(0,0,0,0.55);
  pointer-events: none;
}
.sorteio-hero-content {
  position: relative;
  z-index: 2;
  max-width: 760px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.sorteio-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 22px;
  border: var(--border-gold-strong);
  background: rgba(199,155,116,0.07);
  color: var(--amadeirado);
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  margin-bottom: 26px;
}
.sorteio-badge svg { flex-shrink: 0; }

.sorteio-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(36px, 5.6vw, 64px);
  font-weight: 400;
  color: var(--bege);
  line-height: 1.08;
  margin-bottom: 20px;
}

/* Alterado para normal em vez de italic */
.sorteio-hero h1 em { font-style: normal; color: var(--amadeirado); }

.sorteio-hero-sub {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.85;
  color: rgba(249,236,204,0.7);
  max-width: 540px;
  margin-bottom: 32px;
}

.sorteio-prize-strip {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 16px 28px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  backdrop-filter: blur(6px);
  border-radius: 8px;
}
.sorteio-prize-strip .prize-icon {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(199,155,116,0.4);
  display: flex; align-items: center; justify-content: center;
  color: var(--amadeirado);
  flex-shrink: 0;
}
.sorteio-prize-strip .prize-text { text-align: left; }
.sorteio-prize-strip .prize-label {
  font-family: var(--font-body);
  font-size: 9.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(249,236,204,0.4);
  margin-bottom: 4px;
}
.sorteio-prize-strip .prize-name {
  font-family: var(--font-display);
  font-size: 17px;
  color: var(--bege);
  font-weight: 500;
}

/* ── IMAGEM DO PRÊMIO (Bordas Suavizadas) ── */
.prize-image {
  margin-top: 10px;
  margin-bottom: 24px;
  display: flex;
  justify-content: center;
  width: 100%;
}

.prize-image img {
  max-width: 100%;
  height: auto;
  
  
  /* Máscara de gradiente radial para esfumar as bordas */
  -webkit-mask-image: radial-gradient(ellipse at center, black 65%, transparent 100%);
  mask-image: radial-gradient(ellipse at center, black 65%, transparent 100%);
}

.sorteio-hero-anchor { margin-top: 36px; }

/* ── ANIMAÇÃO DE PULSO NO BOTÃO DO HERO ── */
@keyframes pulseCTA {
  0% {
    box-shadow: 0 0 0 0 rgba(199, 155, 116, 0.7);
  }
  70% {
    box-shadow: 0 0 0 16px rgba(199, 155, 116, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(199, 155, 116, 0);
  }
}

.sorteio-hero-anchor .btn-primary {
  animation: pulseCTA 2s infinite; /* Aplica o pulso contínuo */
  font-size: 13px; /* Deixa o texto um pouco maior */
  padding: 18px 44px; /* Deixa o botão mais encorpado */
}

.sorteio-hero-anchor .btn-primary:hover {
  animation: none; /* Pausa o pulso quando o mouse passa por cima */
}

/* ═══════════════════════════════════════════════
   SEÇÃO WIZARD — cartão claro flutuando no fundo escuro
═══════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════
   SEÇÃO WIZARD — cartão claro flutuando no fundo escuro
═══════════════════════════════════════════════ */
#participar {
  position: relative;
  padding: 90px var(--section-px) 100px;
  background: var(--verde-deep, #0D2421);
  display: none; /* Oculta a seção inteira por padrão */
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  animation: fadeIn 0.5s ease forwards; /* Animação suave ao aparecer */
}

/* Nova classe que será adicionada via JavaScript ao clicar no botão */
#participar.is-visible {
  display: flex; 
}

.wizard-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
}
.wizard-glow.g1 {
  width: 420px; height: 420px;
  background: rgba(199,155,116,0.14);
  top: -120px; left: -80px;
}
.wizard-glow.g2 {
  width: 380px; height: 380px;
  background: rgba(23,83,71,0.5);
  bottom: -140px; right: -60px;
}

.participar-header {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin: 0 auto 48px;
  text-align: center;
}
.participar-header p.section-label { justify-content: center; }
.participar-header h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.2vw, 44px);
  color: var(--bege);
  margin-bottom: 14px;
  line-height: 1.1;
}

/* Alterado para normal em vez de italic */
.participar-header h2 em { font-style: normal; color: var(--amadeirado); }

.participar-header p.sub {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.8;
  color: rgba(249,236,204,0.6);
}

/* ── CARTÃO DO WIZARD (Mais Minimalista) ── */
.wizard-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 620px;
  background: #FCF6E7;
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.15); /* Sombra mais limpa e suave */
  overflow: hidden;
}

/* ── PROGRESSO ── */
.wizard-progress {
  display: flex;
  align-items: center;
  padding: 34px 36px 12px;
}
.wizard-step-dot-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  flex: 1;
  position: relative;
  transition: transform 0.3s ease;
}
.wizard-step-dot-wrap:hover:not(.is-locked) {
  transform: translateY(-2px);
}
.wizard-step-dot {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(13,48,44,0.15);
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  color: rgba(13,48,44,0.4);
  transition: all 0.3s ease;
  position: relative;
  z-index: 2;
}
.wizard-step-label {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(13,48,44,0.4);
  transition: color 0.3s ease;
  white-space: nowrap;
}
.wizard-progress-line {
  position: absolute;
  top: 18px;
  left: calc(50% + 22px);
  right: calc(-50% + 22px);
  height: 1px;
  background: rgba(13,48,44,0.1);
  z-index: 1;
}
.wizard-step-dot-wrap:last-child .wizard-progress-line { display: none; }

.wizard-step-dot-wrap.is-done .wizard-step-dot {
  background: var(--verde-dark);
  border-color: var(--verde-dark);
  color: var(--bege);
}
.wizard-step-dot-wrap.is-done .wizard-progress-line { background: var(--verde-dark); }
.wizard-step-dot-wrap.is-active .wizard-step-dot {
  background: var(--amadeirado);
  border-color: var(--amadeirado);
  color: var(--verde-dark);
  box-shadow: 0 0 0 4px rgba(199,155,116,0.15);
}
.wizard-step-dot-wrap.is-active .wizard-step-label,
.wizard-step-dot-wrap.is-done .wizard-step-label { color: var(--verde-dark); }
.wizard-step-dot-wrap.is-locked { cursor: not-allowed; }

/* ── VIEWPORT ── */
.wizard-viewport {
  position: relative;
  padding: 34px 44px 40px;
  min-height: 300px;
}

.wizard-panel {
  display: none;
  flex-direction: column;
}
.wizard-panel.is-active { display: flex; }
.wizard-panel.panel-anim { animation: windowIn 0.5s var(--ease-out) both; }

@keyframes windowIn {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.wizard-panel-eyebrow {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--amadeirado-light, #D4AB86);
  margin-bottom: 10px;
}
.wizard-panel h3 {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 500;
  color: var(--verde-dark);
  margin-bottom: 12px;
  line-height: 1.15;
}
.wizard-panel > p.panel-desc {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  color: rgba(13,48,44,0.7);
  margin-bottom: 24px;
}

/* Formulário Minimalista e Interativo */
.wizard-panel .form-group { gap: 8px; }
.wizard-panel .form-group label {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: rgba(13,48,44,0.6);
}
.wizard-panel .form-group input {
  font-family: var(--font-body);
  background: #ffffff;
  border: 1px solid rgba(13,48,44,0.15);
  border-radius: 8px;
  padding: 14px 16px;
  color: var(--verde-dark);
  transition: all 0.3s ease;
}
.wizard-panel .form-group input::placeholder { color: rgba(13,48,44,0.3); }
.wizard-panel .form-group input:focus {
  border-color: var(--amadeirado);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(199,155,116,0.15);
  outline: none;
}
.wizard-panel .lead-form { display: grid; gap: 18px; }

/* Instrução em destaque */
.wizard-instruction {
  padding: 16px 20px;
  border-radius: 8px;
  border: 1px solid rgba(199,155,116,0.2);
  background: rgba(199,155,116,0.05);
  font-family: var(--font-body); /* Alterado para Corbel */
  font-style: normal; /* Alterado para normal */
  font-size: 15px;
  color: var(--verde-dark);
  line-height: 1.5;
  margin-bottom: 24px;
}
.wizard-instruction strong { font-weight: 700; color: var(--amadeirado); }

.wizard-social-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--amadeirado);
  border: 1px solid var(--amadeirado-dim);
  background: #fff;
  padding: 14px 24px;
  border-radius: 8px;
  transition: all 0.3s ease;
  cursor: pointer;
  align-self: flex-start;
}
.wizard-social-cta:hover {
  border-color: var(--amadeirado);
  background: rgba(199,155,116,0.08);
  transform: translateY(-3px);
  box-shadow: 0 6px 15px rgba(0,0,0,0.05);
}

/* Placeholder da foto oficial */
.wizard-official-photo { position: relative; display: block; margin-top: 4px; border-radius: 8px; overflow: hidden; transition: transform 0.3s ease; }
.wizard-official-photo:hover { transform: translateY(-3px); }
.wizard-official-photo .img-placeholder {
  height: 200px;
  border: 1px dashed rgba(13,48,44,0.2);
  background: rgba(13,48,44,0.02);
  color: rgba(13,48,44,0.4);
}
.wizard-official-photo-tag {
  position: absolute;
  top: 12px; left: 12px; z-index: 2;
  background: var(--amadeirado);
  color: var(--verde-dark);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 4px;
}

/* Recap do step 4 */
.wizard-recap {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 28px;
}
.wizard-recap-item {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-body);
  font-size: 14px;
  color: rgba(13,48,44,0.8);
}
.wizard-recap-item .check-dot {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--verde-dark);
  color: var(--bege);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* Checkbox customizado Minimalista */
.confirm-check { display: flex; margin-bottom: 24px; }
.confirm-check-input { position: absolute; opacity: 0; width: 1px; height: 1px; overflow: hidden; }
.confirm-check-label {
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  padding: 16px 20px;
  border: 1px solid rgba(13,48,44,0.15);
  background: #ffffff;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  width: 100%;
}
.confirm-check-label:hover { border-color: var(--amadeirado); background: rgba(199,155,116,0.02); }
.confirm-check-box {
  flex-shrink: 0;
  width: 24px; height: 24px;
  border: 1px solid rgba(13,48,44,0.3);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.3s ease;
}
.confirm-check-box svg { width: 14px; height: 14px; opacity: 0; transform: scale(0.6); transition: opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out); }
.confirm-check-input:checked ~ .confirm-check-label { border-color: var(--amadeirado); background: rgba(199,155,116,0.05); }
.confirm-check-input:checked ~ .confirm-check-label .confirm-check-box { background: var(--amadeirado); border-color: var(--amadeirado); }
.confirm-check-input:checked ~ .confirm-check-label .confirm-check-box svg { opacity: 1; transform: scale(1); }
.confirm-check-input:focus-visible ~ .confirm-check-label { border-color: var(--amadeirado); box-shadow: 0 0 0 3px rgba(199,155,116,0.15); }
.confirm-check-text { font-family: var(--font-body); font-size: 14px; color: rgba(13,48,44,0.7); }
.confirm-check-input:checked ~ .confirm-check-label .confirm-check-text { color: var(--verde-dark); font-weight: 600; }

/* ── NAVEGAÇÃO INFERIOR DO WIZARD ── */
.wizard-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 24px 44px 36px;
  border-top: 1px solid rgba(13,48,44,0.08);
}
.wizard-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(13,48,44,0.5);
  cursor: pointer;
  transition: color 0.3s ease;
  visibility: hidden;
}
.wizard-back.is-visible { visibility: visible; }
.wizard-back:hover { color: var(--verde-dark); }

.wizard-next {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--verde-dark);
  color: var(--bege);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 16px 36px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.wizard-next:hover { background: #0a1f1b; transform: translateY(-2px); box-shadow: 0 10px 25px rgba(13,48,44,0.2); }
.wizard-next:disabled { opacity: 0.3; pointer-events: none; }
.wizard-next.is-final { background: var(--amadeirado); color: var(--verde-dark); }
.wizard-next.is-final:hover { background: #b58963; box-shadow: 0 10px 25px rgba(199,155,116,0.3); }

.wizard-spinner {
  display: none;
  width: 16px; height: 16px;
  border: 2px solid rgba(249,236,204,0.35);
  border-top-color: var(--bege);
  border-radius: 50%;
  animation: wizardSpin 0.7s linear infinite;
}
.wizard-next.wf-loading .wizard-spinner { display: inline-block; }
.wizard-next.wf-loading { pointer-events: none; }
@keyframes wizardSpin { to { transform: rotate(360deg); } }

.wizard-check-icon { display: none; align-items: center; justify-content: center; }
.wizard-next.wf-sent .wizard-check-icon { display: inline-flex; }
.wizard-check-icon svg .wf-check-path { stroke-dasharray: 36; stroke-dashoffset: 36; animation: wfCheckDraw 0.45s ease 0.1s forwards; }
@keyframes wfCheckDraw { from { stroke-dashoffset: 36; } to { stroke-dashoffset: 0; } }
.wizard-next.wf-sent { pointer-events: none; cursor: default !important; }

.wizard-next.wf-shake { animation: wfShake 0.4s ease; }
@keyframes wfShake { 0%,100%{transform:translateX(0);} 20%,60%{transform:translateX(-6px);} 40%,80%{transform:translateX(6px);} }

/* Validação de campos */
.form-group.wf-invalid input { border-color: #dc4545 !important; background-color: rgba(220,69,69,0.05) !important; box-shadow: 0 0 0 3px rgba(220,69,69,0.1) !important; }
.form-group.wf-invalid > label { color: #c73a3a !important; }
.wf-field-error-msg { display: block; font-family: var(--font-body); font-size: 12px; color: #c73a3a; margin-top: 4px; }
.form-group.wf-valid input { border-color: rgba(199,155,116,0.5) !important; }

/* Banner de feedback final */
#sorteio-feedback:empty { display: none; }
.sf-banner {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 16px 20px; margin-top: 20px;
  border-radius: 8px;
  animation: sfFadeUp 0.5s ease forwards;
  font-family: var(--font-body);
  font-size: 14px; line-height: 1.6;
}
@keyframes sfFadeUp { from { opacity:0; transform:translateY(10px);} to { opacity:1; transform:translateY(0);} }
.sf-banner.success {
  background: rgba(199,155,116,0.1);
  border: 1px solid rgba(199,155,116,0.3);
  border-left: 4px solid var(--amadeirado);
}
.sf-banner.success strong { display:block; color: var(--verde-dark); font-weight:700; margin-bottom:4px; }
.sf-banner.success span { color: rgba(13,48,44,0.7); }
.sf-banner.error { background: rgba(220,69,69,0.06); border: 1px solid rgba(220,69,69,0.25); color: #c73a3a; }

.confirmacao-note {
  margin-top: 20px;
  font-family: var(--font-body);
  font-size: 12px;
  color: rgba(13,48,44,0.5);
  line-height: 1.6;
}
.confirmacao-note a { color: var(--amadeirado); text-decoration: none; border-bottom: 1px solid var(--amadeirado-dim); transition: border-color 0.3s;}
.confirmacao-note a:hover { border-color: var(--amadeirado); }

/* ── RESPONSIVE ── */
@media (max-width: 640px) {
  .sorteio-hero { padding: calc(var(--nav-h) + 36px) var(--section-px-sm) 48px; min-height: auto; }
  .sorteio-prize-strip { flex-direction: column; text-align: center; }
  .sorteio-prize-strip .prize-text { text-align: center; }
  #participar { padding: 64px var(--section-px-sm) 72px; }
  .wizard-progress { padding: 24px 20px 12px; }
  .wizard-step-label { display: none; }
  .wizard-viewport { padding: 26px 24px 24px; min-height: 340px; }
  .wizard-nav { padding: 20px 24px 28px; }
  .wizard-panel h3 { font-size: 24px; }
}