/* MIEC - Kit da marca PQP Danielle Castilho
   Paleta aprovada: Burgundy #400111 | Crimson #7A0517 | Dourado #C78827 (metalizado) | Warm Sand #D9BCA4 | Off-white #FAF7F2 | Tinta #0D0202
   Fontes: Fraunces 600 (titulos, numeros, frases) + DM Sans 400/700 (texto, etiquetas, CTAs)
   Regras do kit aplicadas:
   - dourado so em filete fino (1-3px), um elemento por tela; nunca como texto sobre fundo claro
   - botao em Crimson, nunca preenchido em dourado
   - sem textura nem sombra em elementos novos sobre fundo claro
   - alinhamento a esquerda; centralizado so em frase curta de impacto */

:root{
  --burg:#400111;
  --crim:#7A0517;
  --gold:#C78827;
  --goldmetal:linear-gradient(100deg,#E2C179 0%,#9B6B2B 38%,#BA8236 70%,#D79C47 100%);
  --sand:#D9BCA4;
  --ink:#0D0202;
  --paper:#FAF7F2;
  --texto:#4a3b3b;
  --linha:rgba(64,1,17,.14);
  --serif:'Fraunces', Georgia, 'Times New Roman', serif;
  --sans:'DM Sans', 'Segoe UI', Arial, sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--sans);
  background:var(--paper);
  color:var(--texto);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}

/* topo: logotipo do MIEC (versao clara) + filete dourado */
.topo{text-align:center;padding:30px 24px 0}
.topo img{width:230px;max-width:58%;height:auto;display:block;margin:0 auto}
.filete{height:2px;width:72px;background:var(--goldmetal);margin:18px auto 0;border:0}

.wrap{max-width:560px;margin:0 auto;padding:30px 24px 72px}
.screen{display:none}
.screen.active{display:block}

h1,h2{font-family:var(--serif);font-weight:600;letter-spacing:-.02em;color:var(--burg);margin:0}
h1{font-size:34px;line-height:1.1;margin:6px 0 12px}
h2{font-size:28px;line-height:1.15;margin:6px 0 14px}
.subtitle{font-size:17px;line-height:1.55;color:var(--texto);margin:0 0 30px}
.muted{font-size:13px;color:#8a7a74}

/* formulario */
label{
  display:block;
  font-size:13px;
  font-weight:500;
  color:var(--texto);
  margin-bottom:18px;
}
input[type=text],input[type=email],input[type=tel],select{
  display:block;width:100%;margin-top:7px;
  padding:13px 14px;
  font-family:var(--sans);font-size:16px;color:var(--ink);
  background:#fff;
  border:1px solid rgba(64,1,17,.2);
  border-radius:6px;
  appearance:none;-webkit-appearance:none;
}
select{
  background-image:linear-gradient(45deg,transparent 50%,var(--burg) 50%),linear-gradient(135deg,var(--burg) 50%,transparent 50%);
  background-position:calc(100% - 20px) 55%,calc(100% - 15px) 55%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
  padding-right:38px;
}
input:focus,select:focus{outline:none;border-color:var(--crim);box-shadow:0 0 0 3px rgba(122,5,23,.14)}

/* consentimento LGPD */
.consentimento{margin:6px 0 22px;padding:14px 16px;border:1px solid var(--linha);border-radius:6px;background:#fff}
.consentimento label{display:flex;gap:12px;align-items:flex-start;margin:0;font-size:12.5px;font-weight:400;line-height:1.55;color:var(--texto);cursor:pointer}
.consentimento input{margin-top:3px;width:17px;height:17px;flex-shrink:0;accent-color:var(--crim)}
.consentimento a{color:var(--crim)}

/* botoes: Crimson, nunca dourado */
button{
  font-family:var(--sans);font-size:15px;font-weight:700;letter-spacing:.04em;
  padding:14px 22px;border-radius:6px;
  border:1px solid rgba(64,1,17,.25);background:transparent;color:var(--burg);cursor:pointer;
}
button.primary{
  width:100%;margin-top:6px;
  background:var(--crim);border-color:var(--crim);color:var(--paper);
}
button.primary:hover:not(:disabled){background:#650413}
button:disabled{opacity:.35;cursor:not-allowed}

/* perguntas */
.progress-row{font-size:11px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:var(--crim);margin-bottom:10px}
.progress-bar{height:2px;background:var(--linha);overflow:hidden;margin-bottom:34px}
#progress-fill{height:100%;width:0;background:var(--goldmetal);transition:width .3s ease}
#q-text{font-family:var(--serif);font-weight:600;font-size:22px;line-height:1.35;letter-spacing:-.01em;margin:0 0 24px;color:var(--burg)}
#q-choices{display:flex;flex-direction:column;gap:11px;margin-bottom:26px}
.choice-btn{
  text-align:left;border-radius:6px;padding:15px 17px;
  font-family:var(--sans);font-size:15.5px;font-weight:400;line-height:1.5;letter-spacing:0;
  background:#fff;border:1px solid rgba(64,1,17,.16);color:var(--texto);
}
.choice-btn:hover{border-color:rgba(64,1,17,.4)}
.choice-btn.selected{border-color:var(--crim);background:rgba(122,5,23,.06);box-shadow:inset 3px 0 0 var(--crim);color:var(--ink)}
#q-scale{margin:10px 0 28px}
#scale-input{width:100%;accent-color:var(--crim)}
.scale-labels{display:flex;justify-content:space-between;gap:10px;margin-top:10px;font-size:12.5px;color:var(--texto)}
.scale-labels span:first-child,.scale-labels span:last-child{max-width:38%}
#scale-val{font-family:var(--serif);font-size:26px;font-weight:600;color:var(--crim)}
.nav-row{display:flex;gap:12px}
.nav-row button{flex:1}

/* tela final + relatorio */
.relatorio{
  display:none;text-align:left;
  margin:30px -8px 0;padding:32px 26px 40px;
  background:#fff;border:1px solid var(--linha);border-radius:6px;
}
.relatorio .rel-nome{text-align:center;font-family:var(--serif);font-size:26px;font-weight:600;letter-spacing:-.01em;color:var(--burg);margin:0}
.relatorio .rel-filete{height:1px;width:56px;background:var(--sand);margin:16px auto 30px}
.relatorio p{font-family:var(--sans);font-size:16.5px;line-height:1.75;margin:0 0 20px;color:var(--texto)}
.relatorio p.destaque{
  font-family:var(--serif);font-size:22px;line-height:1.4;font-weight:600;letter-spacing:-.01em;color:var(--burg);
  border-left:2px solid var(--crim);padding:2px 0 2px 18px;margin:30px 0;
}
.relatorio .rel-assinatura{display:block;width:200px;max-width:60%;height:auto;margin:34px 0 0}
.envio{margin-top:26px;font-size:12.5px;line-height:1.6;color:var(--texto);text-align:left}
.envio .ok{color:#3c5a3a}
.envio .falha{color:var(--crim)}

@media (min-width:700px){
  .topo{padding-top:44px}
  .wrap{padding-top:36px}
  .relatorio{margin-left:-40px;margin-right:-40px;padding:44px 48px 52px}
}
