/* ============================================================
   MAVEX — Página de Prospecção
   Estética: Editorial Moderno Escuro + dourado (casa com a logo)
   ============================================================ */

:root{
  /* Cor */
  --color-bg:        #121212;   /* grafite dominante */
  --color-bg-deep:   #0C0C0C;
  --color-surface:   #1A1A1A;
  --color-surface-2: #202020;
  --color-line:      rgba(201,162,39,0.18);
  --color-text:      #F4F1EA;   /* off-white quente */
  --color-text-muted:#9A9286;
  --color-accent:    #C9A227;   /* dourado (casa com a logo) */
  --color-accent-2:  #E6C765;   /* dourado claro p/ brilhos */
  --color-danger:    #E0623D;

  /* Tipo */
  --font-display: 'Archivo', sans-serif;
  --font-body:    'Plus Jakarta Sans', sans-serif;

  /* Medidas */
  --maxw: 760px;
  --radius: 4px;
  --ease-soft: cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

html{ scroll-behavior:smooth; }

body{
  font-family:var(--font-body);
  color:var(--color-text);
  background:var(--color-bg);
  min-height:100vh;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  position:relative;
}

/* ---- Atmosfera de fundo: mesh dourado sutil + monograma gigante ---- */
body::before{
  content:'';
  position:fixed; inset:0;
  background:
    radial-gradient(ellipse at 18% 12%, rgba(201,162,39,0.10) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 88%, rgba(201,162,39,0.06) 0%, transparent 50%),
    var(--color-bg);
  z-index:-2;
}
/* grain */
body::after{
  content:'';
  position:fixed; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:0.035;
  pointer-events:none;
  z-index:-1;
}

/* Monograma gigante de fundo (elemento memorável, assimétrico) */
.watermark{
  position:fixed;
  right:-8%;
  bottom:-12%;
  width:min(70vw, 720px);
  opacity:0.045;
  pointer-events:none;
  z-index:-1;
  filter:grayscale(0.2);
}

/* ============================== HEADER ============================== */
.topbar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem;
  padding:1.1rem clamp(1.2rem, 5vw, 3rem);
  background:linear-gradient(180deg, rgba(18,18,18,0.92), rgba(18,18,18,0.55));
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--color-line);
}
.brand{ display:flex; align-items:center; gap:0.7rem; text-decoration:none; }
.brand img{ width:38px; height:38px; border-radius:50%; display:block; }
.brand .wordmark{
  font-family:var(--font-display); font-weight:700;
  letter-spacing:0.22em; font-size:0.95rem; text-transform:uppercase;
  color:var(--color-text);
}
.brand .wordmark span{ color:var(--color-accent); }

.progress-meta{ display:flex; align-items:center; gap:0.9rem; min-width:0; }
.progress-count{
  font-family:var(--font-display); font-weight:600;
  font-size:0.75rem; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--color-text-muted); white-space:nowrap;
}
.progress-count b{ color:var(--color-accent); }
.progress-track{
  width:clamp(80px, 22vw, 200px); height:3px;
  background:var(--color-surface-2); border-radius:99px; overflow:hidden;
}
.progress-fill{
  height:100%; width:0%;
  background:linear-gradient(90deg, var(--color-accent), var(--color-accent-2));
  border-radius:99px;
  transition:width 0.5s var(--ease-soft);
}

/* ============================== STAGE ============================== */
.stage{
  max-width:var(--maxw);
  margin:0 auto;
  padding:clamp(2.5rem,7vh,5rem) clamp(1.2rem,5vw,2rem) 6rem;
  min-height:calc(100vh - 70px);
  display:flex; flex-direction:column; justify-content:center;
}

.step{ display:none; }
.step.active{ display:block; }

/* índice grande decorativo de cada passo */
.step-index{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(4rem, 14vw, 9rem);
  line-height:0.85; letter-spacing:-0.04em;
  color:transparent;
  -webkit-text-stroke:1.5px rgba(201,162,39,0.25);
  margin-bottom:-0.2em;
  user-select:none;
}

.eyebrow{
  font-family:var(--font-display); font-weight:600;
  font-size:0.78rem; letter-spacing:0.28em; text-transform:uppercase;
  color:var(--color-accent); margin-bottom:1rem;
}

.step h1, .step h2{
  font-family:var(--font-display); font-weight:800;
  letter-spacing:-0.03em; line-height:1.02;
  margin-bottom:1rem;
}
.step h1{ font-size:clamp(2.4rem, 7vw, 4.2rem); }
.step h2{ font-size:clamp(1.9rem, 5vw, 3rem); }

.lead{
  font-size:clamp(1.05rem,2.2vw,1.2rem);
  color:var(--color-text-muted);
  max-width:46ch; margin-bottom:2.4rem;
}

/* ============================== FORM ============================== */
.fields{ display:grid; gap:1.5rem; margin-bottom:2.6rem; }
.field{ display:flex; flex-direction:column; gap:0.5rem; }
.field.span-2{ grid-column:1 / -1; }
@media(min-width:620px){
  .grid-2{ grid-template-columns:1fr 1fr; }
}

label{
  font-size:0.82rem; font-weight:600; letter-spacing:0.04em;
  color:var(--color-text);
}
label .opt{ color:var(--color-text-muted); font-weight:400; }

input, textarea, select{
  font-family:var(--font-body); font-size:1rem;
  color:var(--color-text);
  background:var(--color-surface);
  border:1px solid var(--color-surface-2);
  border-bottom:2px solid var(--color-surface-2);
  border-radius:var(--radius);
  padding:0.85rem 1rem;
  width:100%;
  transition:border-color 0.25s ease, background 0.25s ease;
}
textarea{ resize:vertical; min-height:96px; line-height:1.5; }
input::placeholder, textarea::placeholder{ color:#6c655a; }
input:focus, textarea:focus, select:focus{
  outline:none;
  background:var(--color-surface-2);
  border-bottom-color:var(--color-accent);
}
input.invalid, textarea.invalid{ border-bottom-color:var(--color-danger); }
.error-msg{ font-size:0.78rem; color:var(--color-danger); min-height:1em; }

/* chips de escolha (radio / checkbox estilizados) */
.chips{ display:flex; flex-wrap:wrap; gap:0.6rem; }
.chip{
  position:relative; cursor:pointer;
  font-size:0.9rem; font-weight:500;
  padding:0.6rem 1.05rem;
  border:1px solid var(--color-surface-2);
  border-radius:99px;
  color:var(--color-text-muted);
  transition:all 0.2s ease;
  user-select:none;
}
.chip input{ position:absolute; opacity:0; pointer-events:none; }
.chip:hover{ border-color:var(--color-accent); color:var(--color-text); }
.chip.checked{
  background:linear-gradient(135deg, rgba(201,162,39,0.18), rgba(230,199,101,0.10));
  border-color:var(--color-accent);
  color:var(--color-accent-2);
}

/* ============================== NAV / BOTÕES ============================== */
.nav{ display:flex; align-items:center; gap:1rem; }
.nav .spacer{ flex:1; }

.btn{
  font-family:var(--font-display); font-weight:700;
  letter-spacing:0.08em; text-transform:uppercase; font-size:0.8rem;
  padding:0.95rem 2rem; border-radius:var(--radius);
  cursor:pointer; border:2px solid transparent;
  transition:transform 0.18s ease, box-shadow 0.18s ease, background 0.2s ease, color 0.2s ease;
  display:inline-flex; align-items:center; gap:0.6rem;
}
.btn-primary{
  background:var(--color-accent); color:#171204;
  border-color:var(--color-accent);
  box-shadow:4px 4px 0 rgba(201,162,39,0.28);
}
.btn-primary:hover{ transform:translate(-2px,-2px); box-shadow:6px 6px 0 rgba(201,162,39,0.35); }
.btn-primary:active{ transform:translate(0,0); box-shadow:2px 2px 0 rgba(201,162,39,0.35); }
.btn-primary:disabled{ opacity:0.55; cursor:not-allowed; transform:none; box-shadow:none; }

.btn-ghost{
  background:transparent; color:var(--color-text-muted);
  border-color:transparent; padding-left:0.4rem; padding-right:0.4rem;
}
.btn-ghost:hover{ color:var(--color-text); }

/* ============================== ENTRADA / ANIMAÇÃO ============================== */
@keyframes fadeUp{
  from{ opacity:0; transform:translateY(26px); }
  to{ opacity:1; transform:translateY(0); }
}
.step.active .anim{ opacity:0; animation:fadeUp 0.65s var(--ease-soft) forwards; }
.step.active .anim:nth-child(1){ animation-delay:0.02s; }
.step.active .anim:nth-child(2){ animation-delay:0.10s; }
.step.active .anim:nth-child(3){ animation-delay:0.18s; }
.step.active .anim:nth-child(4){ animation-delay:0.26s; }
.step.active .anim:nth-child(5){ animation-delay:0.34s; }
.step.active .anim:nth-child(6){ animation-delay:0.42s; }

@media (prefers-reduced-motion: reduce){
  .step.active .anim{ animation:none; opacity:1; }
  .progress-fill{ transition:none; }
}

/* ============================== TELA DE BOAS-VINDAS ============================== */
.welcome{ text-align:center; }
.welcome .hero-logo{
  width:clamp(120px, 30vw, 190px); height:auto;
  border-radius:50%;
  margin:0 auto 1.8rem;
  display:block;
  filter:drop-shadow(0 16px 40px rgba(201,162,39,0.22));
  animation:fadeUp 0.8s var(--ease-soft) forwards;
}
.welcome .lead{ margin-left:auto; margin-right:auto; }
.chosen-service{
  display:inline-block;
  font-size:0.78rem; font-weight:600; letter-spacing:0.04em;
  color:var(--color-text-muted);
  padding:0.4rem 1rem; margin-bottom:1.4rem;
  border:1px solid var(--color-line); border-radius:99px;
  background:linear-gradient(135deg, rgba(201,162,39,0.12), rgba(230,199,101,0.06));
}
.chosen-service b{ color:var(--color-accent-2); }
.welcome .nav{ justify-content:center; }
.meta-time{
  margin-top:1.6rem; font-size:0.8rem; color:var(--color-text-muted);
  letter-spacing:0.04em;
}
.meta-time b{ color:var(--color-accent); }

/* ============================== RESUMO ============================== */
.summary{
  display:grid; gap:0; margin-bottom:2.4rem;
  border-top:1px solid var(--color-line);
}
.summary-row{
  display:grid; grid-template-columns:1fr 1.4fr; gap:1rem;
  padding:0.85rem 0.2rem;
  border-bottom:1px solid var(--color-line);
  font-size:0.95rem;
}
.summary-row dt{ color:var(--color-text-muted); font-weight:600; }
.summary-row dd{ color:var(--color-text); word-break:break-word; }
.summary-row .empty{ color:#6c655a; font-style:italic; }

/* ============================== TELA FINAL ============================== */
.done{ text-align:center; display:none; }
.done.active{ display:block; animation:fadeUp 0.7s var(--ease-soft) forwards; }
.done .check{
  width:96px; height:96px; margin:0 auto 1.6rem;
  border-radius:50%; display:grid; place-items:center;
  border:2px solid var(--color-accent);
  box-shadow:0 0 40px rgba(201,162,39,0.25);
}
.done .check svg{ width:44px; height:44px; stroke:var(--color-accent); }

/* ============================== CONSENTIMENTO RGPD ============================== */
.consent{
  display:flex; align-items:flex-start; gap:0.65rem;
  margin:1.4rem 0 0.2rem; cursor:pointer;
  font-size:0.9rem; line-height:1.5; color:var(--color-text-muted);
}
.consent input[type="checkbox"]{
  width:18px; height:18px; margin-top:0.15rem;
  flex:0 0 auto; accent-color:var(--color-accent); cursor:pointer;
}
.consent a{ color:var(--color-accent-2); text-decoration:underline; }

/* ============================== STATUS DE ENVIO ============================== */
.send-status{ font-size:0.85rem; min-height:1.2em; margin-top:0.4rem; }
.send-status.err{ color:var(--color-danger); }
.spinner{
  width:15px; height:15px; border-radius:50%;
  border:2px solid rgba(23,18,4,0.35); border-top-color:#171204;
  animation:spin 0.7s linear infinite; display:inline-block;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

.footnote{
  text-align:center; padding:1.5rem; font-size:0.72rem;
  color:var(--color-text-muted); letter-spacing:0.04em;
}
.footnote b{ color:var(--color-accent); font-family:var(--font-display); letter-spacing:0.18em; }