@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600&family=Cinzel:wght@500;600;700&family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700;800&display=swap');

/* ============================================================
   QUIZ SERGIO SANTOS - v2 "Ouro & Vidro"
   Mesma identidade do site: preto profundo, ouro, vidro, brilho.
   Mesmos seletores do style antigo - logica intocada.
   ============================================================ */
:root{
  --bg:#04060c; --texto:#eef2f8; --suave:#94a1b6;
  --ouro:#e2b354; --ouro2:#f2d189; --ouro3:#97711f;
  --borda:rgba(148,163,184,.16); --verde:#2fe08a; --vermelho:#ff5f6d;
  --glow:0 0 26px rgba(226,179,84,.28);
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  background:var(--bg);color:var(--texto);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  font-size:16px;line-height:1.65;min-height:100vh;position:relative;
  -webkit-font-smoothing:antialiased;
}
body::before{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;background:
  radial-gradient(900px 460px at 78% -10%,rgba(226,179,84,.14),transparent 62%),
  radial-gradient(700px 400px at 5% 4%,rgba(91,160,255,.07),transparent 60%),
  radial-gradient(1000px 600px at 50% 115%,rgba(226,179,84,.05),transparent 55%)}
body::after{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;background-image:
  linear-gradient(rgba(148,163,184,.04) 1px,transparent 1px),
  linear-gradient(90deg,rgba(148,163,184,.04) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 0%,#000 40%,transparent 100%);
  mask-image:radial-gradient(ellipse 90% 70% at 50% 0%,#000 40%,transparent 100%)}

/* ---------- header ---------- */
.quiz-header{
  position:relative;z-index:1;
  display:flex;align-items:center;gap:14px;
  max-width:720px;margin:0 auto;padding:26px 24px 18px;
}
.quiz-header .logo{
  width:46px;height:46px;flex-shrink:0;
  background:transparent url("data:image/svg+xml,%3Csvg%20viewBox%3D%22-11%20-4.5%20260%20398%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M146%200%20H65%20A65%2078%200%200%200%2065%20156%20H96%20A65%2078%200%200%201%2096%20312%20H16%22%20stroke%3D%22%23c9a35c%22%20stroke-width%3D%229%22%20stroke-linecap%3D%22butt%22%2F%3E%3Cpath%20d%3D%22M146%200%20H65%20A65%2078%200%200%200%2065%20156%20H96%20A65%2078%200%200%201%2096%20312%20H16%22%20transform%3D%22translate%2877%2077%29%22%20stroke%3D%22%23f5f2ea%22%20stroke-width%3D%229%22%20stroke-linecap%3D%22butt%22%2F%3E%3Cpath%20d%3D%22M160.36%20223.11%20A65%2078%200%200%201%20160.36%20244.89%22%20stroke%3D%22%23c9a35c%22%20stroke-width%3D%229%22%20stroke-linecap%3D%22butt%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
  font-size:0;border-radius:0;box-shadow:none;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.5));
}
.quiz-header .nome-advogado{
  font-family:'Cormorant Garamond',serif;font-weight:500;font-size:19px;
  letter-spacing:.3em;text-transform:uppercase;color:#f3efe6;
}
.quiz-header .cargo{
  font-size:8.5px;font-weight:600;letter-spacing:.32em;
  text-transform:uppercase;color:var(--ouro);margin-top:3px;
}

/* ---------- barra de progresso ---------- */
.progress-track{
  position:relative;z-index:1;
  max-width:720px;margin:0 auto 8px;padding:0 24px;
  height:22px;display:flex;align-items:center;
}
.progress-track::before{
  content:'';position:absolute;left:24px;right:24px;height:7px;
  background:rgba(148,163,184,.1);border:1px solid rgba(148,163,184,.12);
  border-radius:999px;
}
.progress-fill{
  position:relative;height:7px;border-radius:999px;max-width:calc(100% - 48px);
  background:linear-gradient(90deg,var(--ouro3),var(--ouro) 55%,var(--ouro2));
  box-shadow:0 0 16px rgba(226,179,84,.55);
  transition:width .5s cubic-bezier(.2,.8,.2,1);
  overflow:hidden;
}
.progress-fill::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);
  animation:brilho-barra 2.4s linear infinite;
}
@keyframes brilho-barra{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
#texto-progresso{
  position:absolute;right:24px;top:-26px;
  font-family:'Space Grotesk','Inter',sans-serif;font-size:12px;font-weight:700;
  color:var(--ouro2);letter-spacing:.08em;font-variant-numeric:tabular-nums;
}

/* ---------- palco ---------- */
#quiz-app{position:relative;z-index:1;max-width:720px;margin:0 auto;padding:18px 24px 70px}

/* ---------- card ---------- */
.quiz-card{
  position:relative;
  background:linear-gradient(165deg,rgba(255,255,255,.05) 0%,rgba(17,24,39,.55) 100%);
  border:1px solid rgba(226,179,84,.26);
  border-radius:24px;
  padding:clamp(28px,5vw,44px);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 40px 90px rgba(0,0,0,.55),var(--glow);
  animation:card-entra .5s cubic-bezier(.2,.8,.2,1);
  overflow:hidden;
}
.quiz-card::before{
  content:'';position:absolute;top:0;left:36px;right:36px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(242,209,137,.85),transparent);
}
@keyframes card-entra{
  from{opacity:0;transform:translateY(26px) scale(.985)}
  to{opacity:1;transform:none}
}
.quiz-card h1{
  font-family:'Space Grotesk','Inter',sans-serif;
  font-size:clamp(1.5rem,4vw,2.1rem);line-height:1.2;letter-spacing:-.01em;
  text-align:center;margin-bottom:14px;
}
.quiz-card h2{
  font-family:'Space Grotesk','Inter',sans-serif;
  font-size:clamp(1.25rem,3.4vw,1.7rem);line-height:1.3;letter-spacing:-.01em;
  margin-bottom:20px;
}
.quiz-card h1 .gold,.selo-qualificado{
  background:linear-gradient(92deg,#fff 0%,var(--ouro2) 40%,var(--ouro) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.quiz-subtitle{color:var(--suave);text-align:center;font-size:1rem;max-width:520px;margin:0 auto 22px}

/* intro */
.quiz-card--intro{text-align:center}
.quiz-intro-icon{
  width:62px;height:96px;margin:0 auto 22px;
  background:transparent url("data:image/svg+xml,%3Csvg%20viewBox%3D%22-11%20-4.5%20260%20398%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M146%200%20H65%20A65%2078%200%200%200%2065%20156%20H96%20A65%2078%200%200%201%2096%20312%20H16%22%20stroke%3D%22%23c9a35c%22%20stroke-width%3D%229%22%20stroke-linecap%3D%22butt%22%2F%3E%3Cpath%20d%3D%22M146%200%20H65%20A65%2078%200%200%200%2065%20156%20H96%20A65%2078%200%200%201%2096%20312%20H16%22%20transform%3D%22translate%2877%2077%29%22%20stroke%3D%22%23f5f2ea%22%20stroke-width%3D%229%22%20stroke-linecap%3D%22butt%22%2F%3E%3Cpath%20d%3D%22M160.36%20223.11%20A65%2078%200%200%201%20160.36%20244.89%22%20stroke%3D%22%23c9a35c%22%20stroke-width%3D%229%22%20stroke-linecap%3D%22butt%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
  font-size:0;
  filter:drop-shadow(0 0 18px rgba(226,179,84,.4));
  animation:flutua-icone 5s ease-in-out infinite;
}
@keyframes flutua-icone{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.quiz-badges{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:6px 0 28px}
.quiz-badges span,.quiz-badge{
  font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ouro2);
  background:rgba(226,179,84,.08);
  border:1px solid rgba(226,179,84,.32);
  border-radius:999px;padding:7px 15px;
}

/* ---------- opcoes ---------- */
.quiz-options{display:flex;flex-direction:column;gap:11px;margin:6px 0 4px}
.quiz-option{
  display:flex;align-items:center;gap:15px;width:100%;text-align:left;
  background:rgba(255,255,255,.028);
  border:1px solid var(--borda);
  border-radius:15px;padding:16px 19px;cursor:pointer;
  color:var(--texto);font-family:inherit;font-size:15.5px;font-weight:600;
  transition:transform .18s,border-color .18s,background .18s,box-shadow .18s;
  animation:opcao-entra .45s cubic-bezier(.2,.8,.2,1) backwards;
  position:relative;
}
.quiz-option:nth-child(1){animation-delay:.05s}
.quiz-option:nth-child(2){animation-delay:.1s}
.quiz-option:nth-child(3){animation-delay:.15s}
.quiz-option:nth-child(4){animation-delay:.2s}
.quiz-option:nth-child(5){animation-delay:.25s}
.quiz-option:nth-child(6){animation-delay:.3s}
@keyframes opcao-entra{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:none}}
.quiz-option::after{
  content:'';width:20px;height:20px;margin-left:auto;flex-shrink:0;
  border:2px solid rgba(148,163,184,.4);border-radius:50%;
  transition:border-color .18s,background .18s,box-shadow .18s;
}
.quiz-option:hover{
  border-color:rgba(226,179,84,.65);
  background:rgba(226,179,84,.07);
  transform:translateX(5px);
  box-shadow:0 10px 26px rgba(0,0,0,.4),0 0 14px rgba(226,179,84,.14);
}
.quiz-option:hover::after{border-color:var(--ouro);background:radial-gradient(circle,var(--ouro) 0 42%,transparent 46%);box-shadow:0 0 10px rgba(226,179,84,.5)}
.quiz-option:focus-visible{outline:2px solid var(--ouro);outline-offset:2px}
.quiz-option-icon{font-size:21px;flex-shrink:0;filter:grayscale(.2)}
.quiz-option-label{flex:1}

/* voltar */
.quiz-voltar{
  margin-top:18px;background:none;border:none;color:var(--suave);
  font-family:inherit;font-size:13.5px;font-weight:600;cursor:pointer;
  padding:8px 12px;border-radius:999px;letter-spacing:.03em;
  transition:color .18s,background .18s;
}
.quiz-voltar:hover{color:var(--ouro2);background:rgba(226,179,84,.08)}

/* ---------- botoes ---------- */
.btn-primary{
  display:block;width:100%;
  background:linear-gradient(140deg,var(--ouro2) 0%,var(--ouro) 45%,var(--ouro3) 100%);
  color:#180f02;font-family:inherit;font-weight:800;font-size:16px;letter-spacing:.02em;
  border:none;border-radius:14px;padding:17px 26px;cursor:pointer;
  box-shadow:var(--glow),inset 0 1px 0 rgba(255,255,255,.45);
  transition:transform .18s,box-shadow .18s,filter .18s;
}
.btn-primary:hover{
  transform:translateY(-2px);filter:brightness(1.07);
  box-shadow:0 0 38px rgba(226,179,84,.5),inset 0 1px 0 rgba(255,255,255,.45);
}
.btn-whatsapp{
  display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  background:linear-gradient(140deg,#3ae68f,#1fa860);
  color:#04160c;font-weight:800;font-size:16px;text-decoration:none;
  border:none;border-radius:14px;padding:17px 26px;cursor:pointer;
  box-shadow:0 0 26px rgba(47,224,138,.32),inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .18s,box-shadow .18s,filter .18s;
}
.btn-whatsapp:hover{transform:translateY(-2px);filter:brightness(1.06);box-shadow:0 0 38px rgba(47,224,138,.45),inset 0 1px 0 rgba(255,255,255,.35)}

/* ---------- formulario ---------- */
.quiz-form{display:flex;flex-direction:column;gap:15px;margin-top:4px}
.quiz-form label{
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--suave);display:flex;flex-direction:column;gap:7px;
}
.quiz-form label .opcional{color:rgba(148,163,184,.55);font-weight:600;letter-spacing:.06em;text-transform:none;font-size:11px}
.quiz-form input{
  width:100%;
  background:rgba(10,16,28,.75);
  border:1px solid rgba(148,163,184,.28);
  color:var(--texto);border-radius:12px;padding:14px 16px;
  font-size:15.5px;font-family:inherit;
  transition:border-color .2s,box-shadow .2s;
}
.quiz-form input::placeholder{color:rgba(148,163,184,.5)}
.quiz-form input:focus{
  outline:none;border-color:rgba(226,179,84,.7);
  box-shadow:0 0 0 3px rgba(226,179,84,.15);
}
.quiz-erro{
  color:var(--vermelho);font-size:13px;font-weight:600;
  background:rgba(255,95,109,.08);border:1px solid rgba(255,95,109,.35);
  border-left:3px solid var(--vermelho);
  border-radius:10px;padding:10px 14px;margin-top:2px;
}

/* ---------- loading ---------- */
.quiz-card--loading{text-align:center;padding:64px 40px}
.spinner{
  width:52px;height:52px;margin:0 auto 22px;border-radius:50%;
  border:3px solid rgba(226,179,84,.16);
  border-top-color:var(--ouro);
  animation:gira .8s linear infinite;
  box-shadow:0 0 22px rgba(226,179,84,.2);
}
@keyframes gira{to{transform:rotate(360deg)}}

/* ---------- resultado ---------- */
.quiz-card--resultado{text-align:center}
.quiz-resultado-icon{font-size:52px;margin-bottom:16px;filter:drop-shadow(0 0 18px rgba(226,179,84,.4))}
.quiz-card--resultado .quiz-subtitle{margin-bottom:26px}

/* ---------- responsivo / acessibilidade ---------- */
@media(max-width:560px){
  .quiz-header{padding:20px 18px 14px}
  #quiz-app{padding:14px 16px 56px}
  .quiz-card{border-radius:20px}
  .quiz-option{padding:14px 15px;font-size:14.5px}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
}