/* ===========================================================
   ENVOA | Formulário — Design Emocional Cinematográfico
   Paleta alinhada à marca: vermelho profundo + dourado premium
   =========================================================== */

/* ---------- PALETA (ENVOA) ---------- */
:root{
  --bg-primary:#0B0B0B;                              /* plano escuro */
  --bg-gradient:linear-gradient(135deg,#140000,#0B0B0B 65%,#1A0000);
  --surface:rgba(20,20,20,.85);                       /* vidro fosco */
  --brand:#640003;                                    /* vermelho Envoa */
  --brand-light:#8B0A06;                              /* vibração/hover */
  --accent:#D4AF37;                                   /* dourado premium */
  --accent-soft:rgba(212,175,55,.18);                 /* contornos leves */
  --text:#EAEAEA;
  --muted:#B5B5B5;
  --radius:16px;
  --shadow:0 12px 36px rgba(0,0,0,.45);
  --transition:.35s ease;
}

/* ---------- BASE ---------- */
*,
*::before,
*::after{box-sizing:border-box}
html,body{
  margin:0;
  padding:0;
  font-family:Inter,system-ui,sans-serif;
  background:var(--bg-gradient);
  color:var(--text);
  overflow-x:hidden;
}


body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: url('assets/img/logo.png') center/40% no-repeat;
  opacity: 0.04;
  filter: grayscale(100%) contrast(110%) blur(1px);
  pointer-events: none;
  z-index: 0;
}
/* ---------- ANIMAÇÕES ---------- */
@keyframes fadeUp{to{transform:translateY(0);opacity:1}}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- BOTÕES ---------- */
.btn,.start-btn,.nav-btn{
  background: var(--accent);
  color: #111;
  padding: 14px 36px;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  transition: all var(--transition);
  box-shadow: 0 10px 36px rgba(212,175,55,0.25);
  cursor: pointer;
}
.btn:hover,.start-btn:hover,.nav-btn:hover{
  transform: translateY(-3px);
  box-shadow: 0 14px 48px rgba(212,175,55,0.35);
}
.nav-btn[disabled]{
  background:#2a2a2a;color:#7a7a7a;cursor:not-allowed;box-shadow:none
}
.btn-loader{
  display:inline-block;width:16px;height:16px;border:2px solid transparent;
  border-top:2px solid #111;border-right:2px solid #111;border-radius:50%;
  animation:spin .6s linear infinite;margin-left:10px;vertical-align:middle
}

/* ---------- SCREENS (INTRO / FINAL) ---------- */
.intro-screen,.thankyou-screen{
  display:flex;justify-content:center;align-items:center;min-height:100vh;
  text-align:center;padding:32px;
  background:
    radial-gradient(circle at 30% 20%, rgba(139,10,6,.35), transparent 55%),
    var(--bg-gradient);
}

.intro-screen {
  position: relative;
  background: radial-gradient(circle at 50% 10%, rgba(212,175,55,0.08), transparent 60%), var(--bg-gradient);
  color: var(--text);
  isolation: isolate;
}
.intro-overlay,.thankyou-screen .intro-overlay{
  background:var(--surface);
  border:1px solid var(--accent-soft);
  border-radius:20px;
  padding:48px 36px;
  box-shadow:var(--shadow);
  max-width:520px;width:100%;
  animation:fadeUp .7s ease forwards;
  opacity:0;transform:translateY(30px);
  backdrop-filter:blur(6px);
}

.accent {
  color: var(--accent);
  font-weight: 600;
}
.intro-overlay h1,.thankyou-screen h1{
  font-size: 1.6rem;
  background: linear-gradient(90deg, #fff, var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 1rem;
  font-weight: 700;
  letter-spacing: 0.2px;
}
.intro-overlay p,.thankyou-screen p{line-height:1.7;color:var(--text)}
.intro-overlay small{
  display: block;
  margin-top: 14px;
  font-size: 0.9rem;
  color: rgba(212,175,55,0.85); /* dourado quente mais visível */
  letter-spacing: 0.3px;
  font-weight: 500;
  opacity: 0.95;
  text-shadow: 0 0 6px rgba(212,175,55,0.25);
}

.start-btn:active,
.btn:active,
.nav-btn:active {
  transform: scale(0.97);
  filter: brightness(0.9);
}

/* ---------- FORMULÁRIO (STEPS) ---------- */
.form-step{
  display:none;flex-direction:column;align-items:center;justify-content:center;
  min-height:100dvh;background:var(--bg-gradient);opacity:0;pointer-events:none;
  transition:opacity var(--transition);padding:0 16px
}
.form-step.active{display:flex;opacity:1;pointer-events:auto}

.form-content{
  background:var(--surface);
  border:1px solid var(--accent-soft);
  padding:40px;border-radius:var(--radius);
  max-width:520px;width:92%;
  box-shadow:var(--shadow);animation:fadeUp .6s ease
}

/* ---------- TIPOGRAFIA DE CAMPOS ---------- */
label{
  display:block;font-size:1.1rem;margin-bottom:10px;
  color:var(--accent);text-align:left;font-weight:600;letter-spacing:.2px
}
input{
  width:100%;padding:14px 2px;font-size:1rem;border:none;
  border-bottom:2px solid rgba(139,10,6,.55);
  background:transparent;color:var(--text);
  transition:border-color var(--transition),box-shadow var(--transition)
}
input:focus{
  outline:none;border-color:var(--accent);
  box-shadow:0 2px 10px rgba(212,175,55,.18)
}
input.input-error{border-bottom-color:#ff6b6b}
.error-msg{color:#ff8585;font-size:.85rem;margin-top:4px;animation:fadeUp .25s ease forwards}

/* ---------- RADIO GROUP ---------- */
/* ===== RADIO GROUP — LINHA DOURADA ENVOA (FINAL) ===== */
.radio-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* opção base */
.radio-group label {
  background: rgba(25, 25, 25, 0.75);
  border: 1px solid rgba(212,175,55,0.25);
  border-radius: var(--radius);
  padding: 14px 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  color: var(--text);
  font-weight: 500;
  letter-spacing: 0.3px;
  transition: all 0.35s ease;
  backdrop-filter: blur(4px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.35);
}

/* hover suave */
.radio-group label:hover {
  border-color: rgba(212,175,55,0.55);
  box-shadow: 0 8px 26px rgba(212,175,55,0.25);
  background: rgba(35,35,35,0.9);
  color: var(--accent);
}

/* efeito ativo (toque/click) */
.radio-group label:active {
  transform: scale(0.97);
  filter: brightness(0.9);
  box-shadow: 0 0 10px rgba(212,175,55,0.25) inset;
}

/* mini selo (opção à esquerda) */
.radio-group .option {
  font-weight: 600;
  background: rgba(212,175,55,0.15);
  color: var(--accent);
  padding: 4px 10px;
  border-radius: 6px;
  margin-right: 12px;
  border: 1px solid rgba(212,175,55,0.3);
  font-size: 0.95rem;
  transition: all 0.35s ease;
}

/* selecionado */
.radio-group label:has(input[type="radio"]:checked)  {
  background: linear-gradient(135deg, rgba(40,40,40,0.9), rgba(15,15,15,0.95));
  border-color: var(--accent);
  box-shadow: 0 0 18px rgba(212,175,55,0.35);
  color: var(--accent);
}

/* selo dourado ativo */
.radio-group label:has(input[type="radio"]:checked) .option {
  background: var(--accent);
  color: #111;
  border-color: transparent;
  box-shadow: 0 0 10px rgba(212,175,55,0.6);
}

/* remover radio nativo */
.radio-group input[type="radio"] {
  display: none;
}


/* ---------- NAVEGAÇÃO ---------- */
.nav-controls{
  display:flex;justify-content:space-between;width:100%;max-width:500px;
  margin-top:20px;padding:10px;background:rgba(15,15,15,.85);
  border-radius:var(--radius);gap:8px;box-shadow:0 5px 20px rgba(0,0,0,.4);
  border:1px solid var(--accent-soft)
}

/* ---------- PROGRESS BAR ---------- */
.progress-wrapper{
  position:sticky;top:0;z-index:20;width:100%;background:#0B0B0B;padding:6px 0;
  border-bottom:1px solid rgba(255,255,255,.06)
}
.progress-bar{
  height:4px;width:0%;
  background:linear-gradient(90deg,var(--accent),#F2D678);
  border-radius:3px;transition:width .4s ease-in-out
}

/* ---------- RESUMO FINAL ---------- */
#resumoDados{
  background:rgba(255,255,255,.04);
  border-radius:var(--radius);
  padding:20px;font-size:1rem;color:var(--text);text-align:left;
  border:1px solid var(--accent-soft)
}
#resumoDados p strong{color:var(--accent)}

/* ---------- AUXILIARES ---------- */
.highlight,.azul{color:var(--brand-light)}
.semi-bold{font-weight:600;color:var(--text)}

/* ---------- MOBILE ---------- */
@media (max-width:600px){
  .intro-overlay,.form-content{padding:32px 20px;border-radius:14px}
  .intro-overlay h1{font-size:1.45rem}
  .form-content label{font-size:1.05rem}
  .nav-btn{font-size:.95rem}
  .start-btn{width:100%;height:48px}
}