/* estilo.css — página de avaliação EXEDU. Nasce medida a 375px. */
:root{
  --mar:#0a1d39; --cy:#38bdf8; --cy-d:#0b77a8;
  --bg:#f4f7fb; --card:#fff; --tx:#0f2038; --mut:#5a6b85; --ln:#dbe3ee;
  --ok:#0f844f; --ok2:#4d7c0f; --am:#9c6907; --vm:#b4232a;
  --r:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--tx);line-height:1.5;
  font:400 16px/1.5 'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  padding-bottom:env(safe-area-inset-bottom)}

/* ---------- topo ---------- */
.topo{background:var(--mar);color:#eaf2ff;padding:22px 20px calc(22px + env(safe-area-inset-top));
  padding-top:calc(22px + env(safe-area-inset-top))}
.marca{display:flex;align-items:center;gap:11px;margin-bottom:16px}
.marca svg{flex:0 0 auto}
.mnome{font:800 19px/1 'Plus Jakarta Sans',sans-serif;letter-spacing:.085em}
.mnome i{color:var(--cy);font-style:normal}
.mass{display:block;font:600 11px/1.25 sans-serif;letter-spacing:.01em;color:#9fb6d6;margin-top:3px}
.mass b{color:var(--cy);font-weight:600}
.ev{font:800 24px/1.2 'Plus Jakarta Sans',sans-serif;letter-spacing:-.01em}
.ev-s{font:400 14px/1.4 sans-serif;color:#a9bfdd;margin-top:5px}

/* ---------- barra de progresso ---------- */
.pg{position:sticky;top:0;z-index:5;background:var(--card);border-bottom:1px solid var(--ln);
  padding:11px 20px;display:flex;align-items:center;gap:12px}
.pg-tr{flex:1;height:6px;border-radius:999px;background:var(--ln);overflow:hidden}
.pg-tr i{display:block;height:100%;border-radius:999px;background:var(--cy-d);transition:width .3s ease;width:0}
.pg-n{font:700 12px/1 sans-serif;color:var(--mut);white-space:nowrap}

/* ---------- etapas ---------- */
main{padding:20px 16px 28px;max-width:640px;margin:0 auto}
.et{display:none}
.et.on{display:block;animation:sobe .28s ease}
@keyframes sobe{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.et.on{animation:none}}
.et-t{font:800 20px/1.25 'Plus Jakarta Sans',sans-serif;margin-bottom:4px}
.et-s{font:400 14px/1.45 sans-serif;color:var(--mut);margin-bottom:18px}

.card{background:var(--card);border:1px solid var(--ln);border-radius:var(--r);
  padding:16px;margin-bottom:12px}
.q{font:700 15px/1.35 sans-serif;margin-bottom:11px}
.q .op{font-weight:400;color:var(--mut);font-size:13px}
.sub{font:600 12px/1.3 sans-serif;color:var(--mut);text-transform:uppercase;letter-spacing:.07em;
  margin:20px 0 9px}

/* ---------- escolha em pílulas ---------- */
.op-l{display:flex;gap:8px;flex-wrap:wrap}
.op-l.col2{display:grid;grid-template-columns:1fr 1fr}
.op-b{flex:1 1 0;min-width:0;min-height:44px;padding:10px 8px;border-radius:10px;cursor:pointer;
  border:1.5px solid var(--ln);background:#fbfcfe;color:var(--tx);
  font:600 14px/1.25 sans-serif;text-align:center;
  display:flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s}
.op-b:hover{border-color:#a9bdd6}
.op-b:focus-visible{outline:3px solid var(--cy);outline-offset:2px}
.op-b.on{background:var(--mar);border-color:var(--mar);color:#fff}
.op-b.on.g{background:var(--ok);border-color:var(--ok)}
.op-b.on.g2{background:var(--ok2);border-color:var(--ok2)}
.op-b.on.a{background:var(--am);border-color:var(--am)}
.op-b.on.r{background:var(--vm);border-color:var(--vm)}
.op-b.on.n{background:#5a6b85;border-color:#5a6b85}

/* nota 1 a 5 */
.nota{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.nota .op-b{flex:none;font-size:18px;font-weight:800}
.nota-l{display:flex;justify-content:space-between;font:400 12px/1.3 sans-serif;color:var(--mut);margin-top:7px}

/* linha item + escala */
.it{padding:13px 0;border-top:1px solid var(--ln)}
.it:first-child{border-top:0;padding-top:2px}
.it-n{font:600 15px/1.3 sans-serif;margin-bottom:9px}
.it-n small{display:block;font:400 12.5px/1.3 sans-serif;color:var(--mut);margin-top:2px}

textarea{width:100%;min-height:120px;padding:12px;border:1.5px solid var(--ln);border-radius:10px;
  font-family:inherit;font-size:16px;line-height:1.5;font-weight:400;color:var(--tx);background:#fbfcfe;resize:vertical}
textarea:focus{outline:none;border-color:var(--cy-d);box-shadow:0 0 0 3px rgba(11,119,168,.15)}

/* ---------- navegação ---------- */
.nav{display:flex;gap:10px;margin-top:20px}
/* Envio que falhou: a mensagem fica ACIMA da navegação, colada no botão que a
   pessoa vai tocar de novo — e o texto diz que as respostas continuam ali. */
.av-err{margin-top:18px;background:#fdeaea;border:1px solid #f0c4c4;border-left:4px solid var(--vm);
  border-radius:10px;padding:12px 14px;font:400 14px/1.45 inherit;color:#7a1a20}

.bt{min-height:48px;padding:12px 20px;border-radius:11px;cursor:pointer;border:1.5px solid transparent;
  font:700 15px/1.2 sans-serif;display:flex;align-items:center;justify-content:center;gap:8px}
.bt:focus-visible{outline:3px solid var(--cy);outline-offset:2px}
.bt-p{flex:1;background:var(--mar);color:#fff}
.bt-p:hover{background:#123055}
.bt-p:disabled{background:#dbe3ee;color:#48586f;cursor:not-allowed}
.bt-s{background:transparent;border-color:var(--ln);color:var(--mut);flex:0 0 auto;padding:12px 16px}
.bt-s:hover{border-color:#a9bdd6;color:var(--tx)}

.pula{display:block;width:100%;margin-top:12px;background:none;border:0;cursor:pointer;
  font:600 13.5px/1.3 sans-serif;color:var(--mut);text-decoration:underline;padding:10px;min-height:44px}
.pula:hover{color:var(--tx)}

/* ---------- fim ---------- */
.fim{text-align:center;padding:36px 8px}
.fim-i{width:72px;height:72px;border-radius:50%;background:#dcf5e8;color:var(--ok);
  display:grid;place-items:center;margin:0 auto 18px}
.fim-t{font:800 22px/1.25 'Plus Jakarta Sans',sans-serif;margin-bottom:8px}
.fim-s{font:400 15px/1.5 sans-serif;color:var(--mut)}

.rodape{text-align:center;padding:22px 20px 30px;font:400 12.5px/1.5 sans-serif;color:var(--mut)}
.rodape b{color:var(--tx);font-weight:700}

@media(min-width:641px){
  .topo{padding:30px 32px}
  main{padding:26px 24px 40px}
  .ev{font-size:30px}
  .card{padding:20px}
}

/* ---------- escolha do curso ---------- */
.busca{width:100%;min-height:48px;padding:12px 14px;margin-bottom:14px;
  border:1.5px solid var(--ln);border-radius:11px;background:var(--card);
  font-family:inherit;font-size:16px;line-height:1.4;font-weight:400;color:var(--tx)}
.busca:focus{outline:none;border-color:var(--cy-d);box-shadow:0 0 0 3px rgba(11,119,168,.15)}
.cs-l{display:flex;flex-direction:column;gap:9px}
.cs{width:100%;text-align:left;background:var(--card);border:1.5px solid var(--ln);
  border-radius:var(--r);padding:14px 15px;cursor:pointer;min-height:44px;
  display:flex;flex-direction:column;gap:4px;transition:border-color .15s,background .15s}
.cs:hover{border-color:var(--cy-d);background:#fbfdff}
.cs:focus-visible{outline:3px solid var(--cy);outline-offset:2px}
.cs-n{font:700 14.5px/1.35 sans-serif;color:var(--tx)}
.cs-d{font:400 13px/1.3 sans-serif;color:var(--mut)}
.vazio{text-align:center;color:var(--mut);font:400 14px/1.5 sans-serif;padding:22px 10px}
.of-av{margin-top:2px}

/* Quem pediu menos movimento no sistema não recebe transição nenhuma. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}


/* =========================================================================
   PERGUNTAS NOVAS — 08/09/2026
   ========================================================================= */

/* ---------- NPS 0 a 10 ----------
   Onze pílulas não dividem 6 colunas sem sobrar buraco: o "10" ocupa duas, o
   que fecha a segunda linha E dá mais peso à ponta boa da escala. A 375px cada
   uma fica com ~47px de largura e 44 de altura — alvo de toque inteiro. */
.nps{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.nps .op-b{flex:none;padding:10px 2px;font:800 16px/1.2 sans-serif}
.nps .op-b:last-child{grid-column:span 2}
.cx-nps{margin-top:14px;padding-top:14px;border-top:1px solid var(--ln)}
/* No desktop cabe a régua inteira numa linha — que é a forma canônica do NPS.
   O `span 2` do "10" precisa ser desfeito junto, senão sobra uma coluna. */
@media(min-width:641px){
  .nps{grid-template-columns:repeat(11,1fr)}
  .nps .op-b:last-child{grid-column:auto}
}

/* rótulo de campo de texto que vem depois de uma escala */
.q-t{margin-top:16px}
textarea.tx-s{min-height:64px}

/* ---------- contato ---------- */
.cx-por{font:400 13.5px/1.45 sans-serif;color:var(--mut);margin:-4px 0 12px}
.cx-f .lb{display:block;font:600 13px/1.3 sans-serif;color:var(--tx);margin:14px 0 6px}
.cx-f .lb:first-child{margin-top:0}
.cx-f .lb .op{font-weight:400;color:var(--mut)}
.in{width:100%;min-height:48px;padding:12px 13px;border:1.5px solid var(--ln);border-radius:10px;
  background:#fbfcfe;color:var(--tx);font-family:inherit;font-size:16px;line-height:1.4;font-weight:400}
.in:focus{outline:none;border-color:var(--cy-d);box-shadow:0 0 0 3px rgba(11,119,168,.15)}
/* O texto do aceite fica À VISTA, não atrás de um link: é ele que faz o
   consentimento ser "informado", e é ele que vai gravado junto do aceite. */
.cx-lgpd{margin-top:16px;padding:11px 12px;background:var(--bg);border-radius:9px;
  font:400 12.5px/1.5 sans-serif;color:var(--mut)}
.cx-anon{margin-top:4px;padding:0 2px;font:400 12.5px/1.5 sans-serif;color:var(--mut)}
.cx-anon b{color:var(--tx);font-weight:700}
.fim-c{margin-top:14px;font:400 14px/1.5 sans-serif;color:var(--mut)}
.fim-c b{color:var(--tx);font-weight:700;word-break:break-word}

/* Quatro pílulas numa linha ("Ótimo · Bom · Regular · Ruim") são o caso mais
   apertado da tela: em aparelho estreito o rótulo maior encostava na borda. */
@media(max-width:400px){
  .op-b{padding:10px 4px;font-size:13.5px}
  .nps{gap:5px}
}