/* =========================================================
   TESTE EXPRESS DAS MÁSCARAS
   Arquivo visual. Mesma identidade do Mapa da Oratória de Presença:
   preto, branco e dourado.
   ========================================================= */

@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500&family=Jost:wght@400;500;600;700&display=swap");

:root{
  --bg:#0a0a0a;
  --card:#121212;
  --card-2:#181818;
  --text:#f5f2ea;
  --text-soft:#d9d4c8;
  --muted:#9a958b;
  --line:#2a2824;
  --line-strong:#3a362e;
  --accent:#c9a24b;
  --accent-light:#e8cd85;
  --accent-deep:#8c6d28;
  --soft:rgba(201,162,75,.1);
  --gold-gradient:linear-gradient(135deg,#f3dc9b 0%,#c9a24b 45%,#9b7a2f 100%);
  --sans:"Jost", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --serif:"Cormorant Garamond", Georgia, "Times New Roman", serif;
}

*,*::before,*::after{box-sizing:border-box}

html{background:var(--bg)}

body{
  margin:0;
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  color:var(--text);
  background:
    radial-gradient(1200px 500px at 50% -10%, rgba(201,162,75,.12), transparent 60%),
    var(--bg);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}

::selection{background:var(--accent);color:#0a0a0a}

.wrap{max-width:860px;margin:0 auto;padding:40px 24px 64px}

/* ---------- Tipografia ---------- */

h1,h2,h3{color:var(--text);overflow-wrap:break-word}

h1{
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(2.6rem,7vw,4.2rem);
  line-height:1.02;
  letter-spacing:-.01em;
  margin:16px auto 18px;
  max-width:760px;
}

h3{font-weight:650}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:12px;
  text-transform:uppercase;
  letter-spacing:.22em;
  font-size:.72rem;
  color:var(--accent);
  font-weight:600;
}

.eyebrow::before,
.eyebrow::after{
  content:"";
  width:28px;
  height:1px;
  background:var(--accent);
  opacity:.6;
}

.panel .eyebrow::after,
.card .eyebrow::after,
.combo .eyebrow::after,
.others .eyebrow::after,
.low-mask .eyebrow::after{display:none}

.subtitle{
  font-size:clamp(1.05rem,2.4vw,1.2rem);
  line-height:1.65;
  color:var(--text-soft);
  max-width:680px;
  margin:0 auto;
}

strong{color:var(--text);font-weight:650}

/* ---------- Estrutura ---------- */

.hero{
  padding:24px 0 8px;
  text-align:center;
  animation:rise .5s cubic-bezier(.2,.7,.2,1) both;
}

.panel{
  position:relative;
  background:linear-gradient(180deg,var(--card-2),var(--card));
  border:1px solid var(--line);
  border-radius:20px;
  padding:40px 44px;
  box-shadow:0 30px 80px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.03);
  animation:rise .5s cubic-bezier(.2,.7,.2,1) both;
}

.panel::before{
  content:"";
  position:absolute;
  top:-1px;
  left:12%;
  right:12%;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
}

.intro-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
  margin-top:34px;
  text-align:left;
}

.note{
  position:relative;
  background:#0e0e0e;
  border:1px solid var(--line-strong);
  border-radius:14px;
  padding:18px 20px;
  line-height:1.6;
  color:var(--text-soft);
}

.scale{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:8px;
  margin-top:18px;
}

.scale div{
  text-align:center;
  padding:10px 6px;
  border:1px solid var(--line-strong);
  border-radius:12px;
  font-size:.82rem;
  color:var(--muted);
  background:#0e0e0e;
}

/* ---------- Botões ---------- */

button{
  font:inherit;
  cursor:pointer;
  touch-action:manipulation;
}

.primary,
.ghost{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:54px;
  border-radius:999px;
  padding:14px 26px;
  font-weight:600;
  font-size:1rem;
  letter-spacing:.02em;
  transition:transform .15s ease, box-shadow .2s, border-color .2s, color .2s, opacity .2s;
}

.primary{
  width:100%;
  border:1px solid transparent;
  background:var(--gold-gradient);
  color:#0a0a0a;
  margin-top:10px;
  box-shadow:0 10px 30px rgba(201,162,75,.22);
}

.ghost{
  border:1px solid var(--line-strong);
  background:transparent;
  color:var(--text);
}

.primary:active,
.ghost:active:not(:disabled){transform:scale(.98)}

.primary:focus-visible,
.ghost:focus-visible{
  outline:2px solid var(--accent-light);
  outline-offset:3px;
}

.ghost:disabled{cursor:not-allowed}

@media (hover:hover){
  .primary:hover{box-shadow:0 14px 38px rgba(201,162,75,.35)}
  .ghost:hover:not(:disabled){border-color:var(--accent);color:var(--accent-light)}
}

/* ---------- Questionário ---------- */

#quiz,#result{display:none}

#quiz{max-width:680px;margin:0 auto}

.topline{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
  color:var(--muted);
  font-size:.82rem;
}

.topline span:first-child{
  color:var(--accent);
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  font-size:.74rem;
  font-variant-numeric:tabular-nums;
}

.progress{
  height:3px;
  background:var(--line);
  border-radius:999px;
  overflow:hidden;
  margin-bottom:34px;
}

.progress > div{
  height:100%;
  width:0;
  border-radius:999px;
  background:var(--gold-gradient);
  box-shadow:0 0 12px rgba(201,162,75,.6);
  transition:width .35s cubic-bezier(.2,.7,.2,1);
}

.question{
  font-family:var(--serif);
  font-size:clamp(1.6rem,4.6vw,2.1rem);
  line-height:1.25;
  font-weight:600;
  margin:0 0 26px;
  color:var(--text);
}

.choices{display:grid;gap:10px}

.choice{
  border:1px solid var(--line-strong);
  background:#0e0e0e;
  color:var(--text-soft);
  border-radius:14px;
  padding:14px 16px;
  text-align:left;
  transition:.15s ease;
}

.choice:hover{border-color:var(--accent-deep)}

.choice.selected{
  background:var(--gold-gradient);
  color:#0a0a0a;
  border-color:var(--accent-light);
}

.choice strong{display:inline-block;width:26px}

/* Régua de resposta (cores do preenchimento vêm do JS) */
.slider-card{
  margin-top:10px;
  padding:26px 22px 20px;
  border:1px solid var(--line-strong);
  border-radius:18px;
  background:#0e0e0e;
}

.slider-head{
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:center;
  margin-bottom:22px;
  min-height:44px;
}

.slider-status{
  font-weight:600;
  font-size:1.05rem;
  line-height:1.3;
  color:var(--muted);
}

.slider-value{
  flex:none;
  display:grid;
  place-content:center;
  width:48px;
  height:48px;
  border-radius:50%;
  border:1px solid var(--line-strong);
  font-family:var(--serif);
  font-size:1.6rem;
  font-weight:700;
  color:var(--muted);
  font-variant-numeric:tabular-nums;
}

.range{
  --range-light:#8c6d28;
  --range-dark:#e8cd85;
  display:block;
  width:100%;
  appearance:none;
  -webkit-appearance:none;
  height:8px;
  margin:14px 0;
  border-radius:999px;
  outline:none;
  background:#2e2b26;
  cursor:pointer;
}

.range::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:32px;
  height:32px;
  border-radius:50%;
  background:var(--range-dark);
  border:5px solid #0a0a0a;
  box-shadow:0 0 0 1px var(--accent), 0 4px 16px rgba(201,162,75,.35);
  cursor:grab;
}

.range::-webkit-slider-thumb:active{cursor:grabbing}

.range::-moz-range-thumb{
  width:22px;
  height:22px;
  border-radius:50%;
  background:var(--range-dark);
  border:5px solid #0a0a0a;
  box-shadow:0 0 0 1px var(--accent), 0 4px 16px rgba(201,162,75,.35);
  cursor:grab;
}

.range:focus-visible::-webkit-slider-thumb{
  box-shadow:0 0 0 1px var(--accent), 0 0 0 7px rgba(201,162,75,.3);
}

.range-scale{
  position:relative;
  height:22px;
  margin:4px 16px 0; /* metade do thumb: alinha 1–5 ao centro real das posições */
  color:#6a655a;
  font-size:.78rem;
  font-weight:500;
  font-variant-numeric:tabular-nums;
}

.range-scale span{
  position:absolute;
  top:0;
  transform:translateX(-50%);
  text-align:center;
  min-width:18px;
}

.range-scale span:nth-child(1){left:0%}
.range-scale span:nth-child(2){left:25%}
.range-scale span:nth-child(3){left:50%}
.range-scale span:nth-child(4){left:75%}
.range-scale span:nth-child(5){left:100%}

.range-labels{
  display:flex;
  justify-content:space-between;
  gap:16px;
  margin-top:10px;
  font-size:.8rem;
  color:var(--muted);
}

.range-labels span:last-child{text-align:right}

.nav{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-top:28px;
  padding-top:22px;
  border-top:1px solid var(--line);
}

.nav button{flex:1}
.nav .ghost{flex:0 0 auto;min-width:120px}

/* ---------- Resultado ---------- */

.section-title{
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(2.1rem,5.5vw,3rem);
  line-height:1.08;
  color:var(--accent-light);
  margin:12px 0 14px;
}

.result-lead{
  color:var(--text-soft);
  font-size:1.05rem;
  line-height:1.65;
  margin:0 0 18px;
}

/* O gráfico é desenhado pelo JS com textos escuros: fica sobre um cartão claro */
.radar-wrap{
  background:#f7f4ee;
  border:1px solid var(--accent-deep);
  border-radius:18px;
  padding:18px 14px;
  margin:26px 0 28px;
  box-shadow:0 20px 50px rgba(0,0,0,.45);
}

canvas{width:100%;max-width:620px;height:auto;display:block;margin:0 auto}

.legend{
  text-align:center;
  color:#5f5a52;
  font-size:.86rem;
  line-height:1.55;
  margin:8px auto 0;
  max-width:560px;
}

.cards{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.card{
  border:1px solid var(--line-strong);
  border-top:2px solid var(--accent);
  border-radius:16px;
  padding:24px 22px;
  background:#0e0e0e;
}

.card h3{
  margin:0 0 4px;
  font-family:var(--serif);
  font-size:1.6rem;
  font-weight:600;
  line-height:1.15;
  color:var(--text);
}

.score{
  font-family:var(--serif);
  font-size:3rem;
  font-weight:700;
  line-height:1;
  color:var(--accent-light);
  margin:8px 0 16px;
  font-variant-numeric:tabular-nums;
}

.badge{
  display:inline-block;
  border-radius:999px;
  padding:6px 12px;
  background:var(--soft);
  font-size:.72rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:700;
  margin-bottom:14px;
}

.card p,.combo p,.other-item p,.cta p,.low-mask p{line-height:1.65;color:var(--text-soft)}

.mini-title{
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:var(--accent);
  font-weight:700;
  margin-top:20px;
  padding-top:14px;
  border-top:1px solid var(--line);
}

.mini-title + p{margin-top:6px}

.combo,.others,.cta,.disclaimer{
  margin-top:16px;
  border:1px solid var(--line-strong);
  background:#0e0e0e;
  border-radius:16px;
  padding:24px 22px;
}

.combo:empty,.others:empty{display:none}

.combo h3,.others h3,.low-mask h3{
  font-family:var(--serif);
  font-size:1.55rem;
  font-weight:600;
  line-height:1.2;
  margin:10px 0 10px;
  color:var(--accent-light);
}

.combo{
  background:linear-gradient(135deg,rgba(201,162,75,.12),rgba(201,162,75,.02));
  border-color:rgba(201,162,75,.35);
}

.other-item{
  padding:14px 0;
  border-top:1px solid var(--line);
}

.other-item:first-of-type{border-top:0}
.other-item strong{font-size:1.02rem;color:var(--text)}
.other-item p{margin:6px 0 0}

.cta{
  position:relative;
  margin-top:28px;
  padding:30px 26px;
  background:linear-gradient(160deg,#1b1710,#0e0e0e 70%);
  border:1px solid var(--accent-deep);
}

.cta h3{
  margin:0 0 12px;
  font-family:var(--serif);
  font-size:clamp(1.7rem,4.4vw,2.1rem);
  font-weight:600;
  line-height:1.15;
  color:var(--accent-light);
}

.cta .quote{
  font-family:var(--serif);
  font-style:italic;
  font-size:1.3rem;
  font-weight:500;
  line-height:1.45;
  color:var(--text);
  border-left:2px solid var(--accent);
  padding-left:18px;
  margin:16px 0;
}

.disclaimer{
  font-size:.82rem;
  line-height:1.6;
  color:var(--muted);
  background:transparent;
  border-style:dashed;
}

.actions{
  display:flex;
  gap:10px;
  margin-top:20px;
}

.actions button{flex:1}

.low-mask{
  margin-top:20px;
  padding:26px 24px;
  border:1px solid rgba(201,162,75,.35);
  border-radius:16px;
  background:linear-gradient(135deg,rgba(201,162,75,.12),rgba(201,162,75,.02));
}

.low-mask p{line-height:1.65}

/* ---------- Animações ---------- */

@keyframes rise{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}
}

@media (prefers-reduced-motion:reduce){
  *,*::before{animation:none !important;transition:none !important}
}

/* ---------- Tablet ---------- */

@media (max-width:860px){
  .wrap{padding:28px 18px 48px}
  .panel{padding:34px 30px}
}

/* ---------- Mobile ---------- */

@media (max-width:700px){
  .scale{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
}

@media (max-width:640px){
  .wrap{padding:calc(20px + env(safe-area-inset-top)) 0 calc(24px + env(safe-area-inset-bottom))}

  .hero{padding:12px 20px 0}
  h1{font-size:2.7rem}

  .intro-grid{margin-top:26px}

  /* painéis ocupam a largura toda, sem moldura */
  .panel{
    border:0;
    border-radius:0;
    padding:28px 20px;
    background:transparent;
    box-shadow:none;
  }

  .panel::before{left:0;right:0}

  #intro .panel{padding-top:8px}
  #intro .panel::before{display:none}

  /* Questionário: navegação fixa no rodapé */
  #quiz{
    max-width:none;
    min-height:100vh;
    min-height:100dvh;
    padding-bottom:calc(100px + env(safe-area-inset-bottom));
  }

  .topline{flex-wrap:wrap;row-gap:4px}

  .question{font-size:1.65rem;margin-bottom:22px}

  .slider-card{padding:22px 16px 18px}

  .range{height:10px}

  .range::-webkit-slider-thumb{width:36px;height:36px}

  .nav{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:20;
    margin:0;
    padding:12px 16px calc(12px + env(safe-area-inset-bottom));
    background:rgba(10,10,10,.92);
    -webkit-backdrop-filter:blur(14px);
    backdrop-filter:blur(14px);
    border-top:1px solid var(--line);
  }

  .nav .ghost{min-width:0;padding:12px 20px}
  .nav button{min-height:50px}

  /* Resultado */
  .radar-wrap{padding:12px 6px;margin:22px 0 24px;border-radius:14px}
  .legend{padding:0 8px;font-size:.82rem}

  .card,.combo,.others,.cta,.disclaimer,.low-mask{padding:20px 18px;border-radius:14px}
  .card h3{font-size:1.45rem}
  .score{font-size:2.6rem}
  .cta .quote{font-size:1.15rem;padding-left:14px}

  .actions .ghost{width:100%}
}

@media (max-width:380px){
  h1{font-size:2.3rem}
  .question{font-size:1.45rem}
  .hero,.panel{padding-left:16px;padding-right:16px}
}

/* ---------- Impressão ---------- */

@media print{
  :root{--text:#111;--text-soft:#2b2b2b;--muted:#555;--line:#ddd;--line-strong:#ccc;--accent:#8c6d28;--accent-light:#6e5520}
  html,body{background:#fff !important}
  .panel,.card,.combo,.others,.cta,.low-mask{background:#fff !important;box-shadow:none;break-inside:avoid}
  .panel::before{display:none}
  .actions{display:none}
}