/* =====================================================================
   MAPA DESPERTE - identidade visual
   Paleta e tipografia do brand book da Jornada Desperte.
   Mobile-first: a experiencia foi pensada primeiro para o celular.
   ===================================================================== */

:root{
  --oliva:#6F7F5E;  --oliva-esc:#59684a;
  --areia:#E8DFC8;  --terracota:#B67A58;
  --grafite:#3F4542; --off:#F7F5F1; --branco:#fff;
  --cinza:#8A8F89;  --linha:#E3DDCE;
  --erro:#B4462F;
  --raio:14px;
  --max:640px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  background:var(--off); color:var(--grafite);
  line-height:1.6; -webkit-font-smoothing:antialiased;
  padding:0 0 40px;
}
img{max-width:100%;display:block}
a{color:var(--oliva)}

/* ---------- estrutura ---------- */
.topo{
  background:var(--branco); border-bottom:1px solid var(--linha);
  padding:14px 20px; position:sticky; top:0; z-index:50;
}
.topo-in{
  max-width:var(--max); margin:0 auto;
  display:flex; align-items:center; gap:12px;
}
.topo img{width:34px;height:34px}
.topo span{
  font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  font-weight:600; color:var(--grafite);
}
.wrap{max-width:var(--max);margin:0 auto;padding:28px 20px}

/* ---------- tipografia ---------- */
h1{
  font-family:'EB Garamond',Georgia,serif; font-weight:600;
  font-size:clamp(1.8rem,6vw,2.5rem); line-height:1.16;
  margin-bottom:14px;
}
h1 em{font-style:italic;color:var(--oliva)}
h2{
  font-family:'EB Garamond',Georgia,serif; font-weight:600;
  font-size:1.4rem; line-height:1.25; margin-bottom:10px;
}
.kicker{
  font-size:.68rem; letter-spacing:.26em; text-transform:uppercase;
  font-weight:700; color:var(--terracota); margin-bottom:14px;
}
p{margin-bottom:14px; font-weight:300}
p b,strong{font-weight:600}
.lead{font-size:1.05rem}
.nota{font-size:.86rem; color:var(--cinza)}

/* ---------- caixas ---------- */
.caixa{
  background:var(--branco); border:1px solid var(--linha);
  border-radius:var(--raio); padding:20px; margin-bottom:16px;
}
.caixa.destaque{background:var(--areia);border-color:#dcd2b6}
.caixa h2{margin-bottom:8px}
.caixa ul{margin:0 0 0 18px;font-weight:300}
.caixa li{margin-bottom:7px}
.caixa li:last-child{margin-bottom:0}

.aviso{
  background:#FBEDE9; border:1px solid #F0D4CB; border-left:4px solid var(--erro);
  border-radius:10px; padding:14px 16px; margin-bottom:16px;
  font-size:.92rem; color:#7d4936;
}
.aviso b{color:var(--erro)}
/* Aviso calmo: contextualiza, nao alarma. Usado no disclaimer da devolutiva. */
.aviso.calmo{background:#EDF0E9;border-color:#DDE4D6;border-left-color:var(--oliva);color:#525c48}
.aviso.calmo b{color:var(--oliva-esc)}

/* ---------- formulario ---------- */
.campo{margin-bottom:18px}
label{
  display:block; font-size:.82rem; font-weight:600;
  letter-spacing:.04em; margin-bottom:6px;
}
label .opc{font-weight:400;color:var(--cinza);text-transform:none;letter-spacing:0}
input[type=text],input[type=email],input[type=tel],input[type=number],
input[type=password],select,textarea{
  width:100%; font-family:inherit; font-size:1rem; color:var(--grafite);
  background:var(--branco); border:1.5px solid var(--linha);
  border-radius:10px; padding:13px 14px; transition:border-color .15s;
}
textarea{min-height:130px;resize:vertical;line-height:1.6}
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--oliva);
  box-shadow:0 0 0 3px rgba(111,127,94,.13);
}
.erro-campo{border-color:var(--erro)!important}
.msg-erro{color:var(--erro);font-size:.82rem;margin-top:5px;font-weight:500}
.contador{font-size:.76rem;color:var(--cinza);text-align:right;margin-top:5px}
.contador.perto{color:var(--terracota)}

/* checkbox de consentimento */
.check{display:flex;gap:12px;align-items:flex-start}
.check input{width:22px;height:22px;flex:0 0 22px;margin-top:2px;accent-color:var(--oliva)}
.check label{font-weight:300;font-size:.92rem;letter-spacing:0;margin:0;line-height:1.55}

/* ---------- botoes ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:inherit; font-size:.86rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  padding:16px 32px; border-radius:50px; border:none;
  cursor:pointer; text-decoration:none; transition:all .2s;
  -webkit-tap-highlight-color:transparent;
}
.btn-primario{background:var(--oliva);color:var(--off);width:100%}
.btn-primario:hover:not(:disabled){background:var(--oliva-esc)}
.btn-primario:disabled{opacity:.45;cursor:not-allowed}
.btn-vazado{background:transparent;color:var(--oliva);border:1.5px solid var(--oliva)}
.btn-texto{background:none;color:var(--cinza);padding:12px;text-transform:none;letter-spacing:0;font-weight:500}
.acoes{display:flex;gap:10px;align-items:center;margin-top:22px}
.acoes .btn-primario{flex:1}
.tela h1 em{font-size:.8em}

/* ---------- progresso ---------- */
.progresso{
  position:sticky; top:63px; z-index:40;
  background:var(--off); padding:12px 20px 10px;
  border-bottom:1px solid var(--linha);
}
.progresso-in{max-width:var(--max);margin:0 auto}
.barra{height:6px;background:var(--linha);border-radius:4px;overflow:hidden}
.barra span{
  display:block;height:100%;background:var(--oliva);
  border-radius:4px;transition:width .35s ease;
}
.progresso-txt{
  display:flex;justify-content:space-between;
  font-size:.74rem;color:var(--cinza);margin-top:7px;font-weight:500;
}

/* ---------- perguntas ---------- */
.pergunta{margin-bottom:34px}
.pergunta .enunciado{
  font-family:'EB Garamond',Georgia,serif;
  font-size:1.3rem; line-height:1.35; font-weight:600; margin-bottom:16px;
}
.pergunta .enunciado .num{
  display:inline-block; font-family:'Montserrat',sans-serif; font-size:.7rem;
  font-weight:700; color:var(--terracota); letter-spacing:.08em;
  margin-right:8px; vertical-align:middle;
}
.pergunta .enunciado .opc{font-family:'Montserrat',sans-serif;font-size:.78rem;font-weight:400;color:var(--cinza)}

/* escala de 1 a 5, uma opcao por linha (legivel no celular) */
.opcoes{display:flex;flex-direction:column;gap:8px}
.opcoes button{
  display:flex; align-items:center; gap:14px; text-align:left; width:100%;
  font-family:inherit; font-size:.95rem; color:var(--grafite);
  background:var(--branco); border:1.5px solid var(--linha); border-radius:11px;
  padding:12px 14px; cursor:pointer; transition:all .14s;
  -webkit-tap-highlight-color:transparent;
}
.opcoes button .n{
  flex:0 0 30px; height:30px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--off); border:1.5px solid var(--linha); font-weight:700; font-size:.86rem;
}
.opcoes button:hover{border-color:var(--oliva)}
.opcoes button[aria-checked=true]{background:#EDF0E9;border-color:var(--oliva)}
.opcoes button[aria-checked=true] .n{background:var(--oliva);border-color:var(--oliva);color:var(--off)}

/* revisao antes do envio */
.revisao{padding:6px 20px}
.rev-linha{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 0; border-bottom:1px solid var(--linha); font-size:.95rem;
}
.rev-linha:last-child{border-bottom:none}
.rev-linha .rev-status{margin:2px 0 0}
.rev-linha.incompleta .rev-status{color:var(--erro);font-weight:600}

/* ---------- rodape ---------- */
.rodape{
  max-width:var(--max);margin:34px auto 0;padding:20px;
  border-top:1px solid var(--linha);
  font-size:.78rem;color:var(--cinza);text-align:center;line-height:1.75;
}
.rodape .assinatura{margin-bottom:8px;color:var(--grafite)}
.rodape .assinatura b{
  display:block; font-family:'EB Garamond',Georgia,serif; font-weight:400;
  font-size:1.05rem; letter-spacing:.12em; text-transform:uppercase;
}
.rodape .assinatura i{font-family:'EB Garamond',Georgia,serif;font-size:.98rem}

/* ---------- utilitarios ---------- */
.centro{text-align:center}
.mt{margin-top:22px}
.oculto{display:none!important}
.sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}