/* NAP — questionário de descoberta
   Identidade Armata Digital (mesmos tokens do armata.digital e dos diagnósticos). */

@font-face{font-family:'Josefin Sans';font-style:normal;font-weight:300 600;font-display:swap;
  src:url("fonts/josefin-sans-600-latin-2.woff2") format('woff2')}
@font-face{font-family:'Nunito Sans';font-style:normal;font-weight:400 800;font-stretch:100%;font-display:swap;
  src:url("fonts/nunito-sans-800-latin-2.woff2") format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 600;font-display:swap;
  src:url("fonts/jetbrains-mono-600-latin-2.woff2") format('woff2')}

:root{
  --ink-900:#11111F; --ink-800:#1A1A2C; --ink-700:#262638;
  --cyan-600:#2CA9C7; --cyan-500:#4EC3E0; --cyan-400:#7BD3E9; --cyan-100:#C9EDF6; --ice-050:#E4F6FA;
  --gray-050:#F6F8FA; --gray-100:#ECF0F4; --gray-200:#DDE3EA; --gray-300:#C4CCD8;
  --gray-500:#828CA0; --gray-600:#626C81; --gray-700:#454D61;
  --green-500:#2E9E6B; --amber-500:#DE9A26; --red-500:#DD4F4F;

  --surface-page:#FFFFFF; --surface-subtle:var(--gray-050);
  --text-title:var(--ink-900); --text-body:#33394A; --text-muted:var(--gray-600);
  --brand:var(--cyan-500); --brand-strong:var(--cyan-600);
  --border:var(--gray-200); --border-strong:var(--gray-300);

  --font-display:"Josefin Sans","Century Gothic",sans-serif;
  --font-body:"Nunito Sans","Segoe UI",sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,monospace;

  --s--1:clamp(.78rem,.76rem + .1vw,.83rem);
  --s-0:1.02rem; --s-1:1.2rem;
  --s-2:clamp(1.35rem,1.2rem + .6vw,1.65rem);
  --s-3:clamp(1.7rem,1.4rem + 1.3vw,2.35rem);
  --s-4:clamp(2.5rem,1.7rem + 4vw,4.6rem);
  --wrap:52rem;
  --shadow-sm:0 1px 2px rgba(17,17,31,.08);
  --shadow-md:0 4px 14px rgba(17,17,31,.10);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--surface-page); color:var(--text-body);
  font-family:var(--font-body); font-size:var(--s-0); line-height:1.62;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  padding-bottom:env(safe-area-inset-bottom);
}
::selection{background:var(--cyan-500); color:var(--ink-900)}
.wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:1.4rem}
.eyebrow{font-family:var(--font-mono); font-size:var(--s--1); letter-spacing:.18em; text-transform:uppercase}

/* ---------- progresso ---------- */
.progress-rail{position:fixed; inset:0 0 auto 0; height:3px; background:rgba(255,255,255,.12); z-index:50}
.progress-bar{height:100%; width:0; background:var(--cyan-500); transition:width .35s cubic-bezier(.2,.7,.3,1)}

/* ---------- masthead ---------- */
.mast{position:relative; background:var(--ink-900); color:#fff; overflow:hidden; isolation:isolate}
.mast canvas{position:absolute; inset:0; width:100%; height:100%; z-index:0; opacity:.75}
/* véu que escurece o mosaico atrás do texto, pra não competir com a leitura */
.mast::after{content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(100deg, var(--ink-900) 32%, rgba(17,17,31,.72) 58%, rgba(17,17,31,.35) 100%)}
.mast .mast-in{position:relative; z-index:1; padding:2.4rem 1.4rem 2.6rem}
.brandbar{display:flex; align-items:center; gap:1.1rem; margin-bottom:1.9rem}
.brandlogo{height:34px; width:auto; display:block}
.brandsep{width:1px; height:26px; background:rgba(255,255,255,.18)}
.clientlogo{height:42px; width:42px; object-fit:contain; background:#fff; border-radius:6px; padding:3px}
.mast .kick{color:var(--cyan-400); margin:0 0 .9rem}
.mast h1{
  font-family:var(--font-display); font-weight:300; text-transform:uppercase;
  font-size:var(--s-4); letter-spacing:.02em; color:#fff; margin:0; line-height:1.05;
}
.mast h1 .cy{color:var(--cyan-500)}
.mast .lede{
  font-family:var(--font-body); font-weight:400; font-size:var(--s-1);
  color:#B9C0D0; max-width:37rem; margin:1rem 0 1.6rem;
}

/* aviso do microfone */
.mic-note{
  display:flex; gap:.9rem; align-items:flex-start; max-width:40rem;
  background:rgba(78,195,224,.08); border:1px solid rgba(78,195,224,.28);
  border-radius:6px; padding:.95rem 1.1rem; margin:0 0 1.8rem;
}
.mic-note p{margin:0; font-size:.95rem; color:#CBD3E0}
.mic-note b{color:#fff}
.mic-note-ico{flex:0 0 auto; width:22px; height:22px; color:var(--cyan-500); margin-top:2px}
.mic-note-ico svg{width:100%; height:100%}

.metaline{
  display:flex; flex-wrap:wrap; gap:.55rem 1.5rem;
  font-family:var(--font-mono); font-size:var(--s--1); color:#8A93A8;
  text-transform:uppercase; letter-spacing:.08em;
  border-top:1px solid rgba(255,255,255,.12); padding-top:1.1rem; max-width:46rem;
}
.metaline b{color:#C3CAD8; font-weight:600}

/* ---------- seções ---------- */
#form{padding-top:2.6rem}
.section-head{display:flex; align-items:baseline; gap:.85rem; margin:2.6rem 0 1.1rem}
#form > .section-head:first-child{margin-top:0}
.section-num{
  flex:0 0 auto; font-family:var(--font-mono); font-size:.72rem; font-weight:600;
  letter-spacing:.06em; color:var(--brand-strong); background:var(--ice-050);
  border:1px solid var(--cyan-100); border-radius:3px; padding:.18rem .45rem;
}
.section-head h2{
  margin:0; font-family:var(--font-display); font-weight:600; text-transform:uppercase;
  font-size:var(--s-2); letter-spacing:.03em; color:var(--text-title); line-height:1.2;
}

/* ---------- pergunta ---------- */
.q{
  background:var(--surface-page); border:1px solid var(--border); border-radius:6px;
  padding:1.3rem 1.35rem; margin-bottom:.85rem; transition:border-color .18s, box-shadow .18s;
}
.q.answered{border-color:var(--cyan-400); box-shadow:var(--shadow-sm)}
.q.recording{border-color:var(--red-500); box-shadow:0 0 0 3px rgba(221,79,79,.1)}
.q-top{display:flex; gap:.6rem; align-items:flex-start; margin-bottom:1rem}
.q-star{color:var(--amber-500); font-size:.95rem; line-height:1.5; flex:0 0 auto}
.q-text{margin:0; font-weight:700; color:var(--text-title); font-size:1.03rem; line-height:1.4}
.q-hint{margin:.35rem 0 0; font-size:.9rem; color:var(--text-muted); font-weight:400; line-height:1.5}

.q-input{display:flex; gap:.7rem; align-items:flex-end}
textarea{
  flex:1; width:100%; min-height:50px; resize:none; padding:.75rem .85rem;
  border:1px solid var(--border); border-radius:4px; background:var(--gray-050);
  font-family:var(--font-body); font-size:1rem; color:var(--text-body); line-height:1.55;
  transition:border-color .15s, background .15s, box-shadow .15s;
}
textarea:focus{outline:none; border-color:var(--cyan-500); background:#fff;
  box-shadow:0 0 0 3px rgba(78,195,224,.22)}
textarea::placeholder{color:var(--gray-500)}

/* microfone */
.mic{
  flex:0 0 auto; width:50px; height:50px; border-radius:4px; border:1px solid var(--ink-800);
  cursor:pointer; background:var(--ink-900); color:#fff; display:grid; place-items:center;
  transition:background .18s, border-color .18s, transform .12s; -webkit-tap-highlight-color:transparent;
}
.mic svg{width:21px; height:21px}
.mic:hover{background:var(--ink-700); border-color:var(--cyan-600)}
.mic:active{transform:scale(.96)}
.mic:focus-visible{outline:none; box-shadow:0 0 0 3px rgba(78,195,224,.45)}
.mic.rec{background:var(--red-500); border-color:var(--red-500); animation:pulse 1.5s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(221,79,79,.45)}50%{box-shadow:0 0 0 10px rgba(221,79,79,0)}}

/* barra de gravação */
.rec-bar{display:none; align-items:center; gap:.8rem; margin-top:.85rem; padding:.7rem .9rem;
  background:#FBE9E9; border:1px solid rgba(221,79,79,.3); border-radius:4px}
.q.recording .rec-bar{display:flex}
.rec-dot{width:8px; height:8px; border-radius:50%; background:var(--red-500); animation:blink 1s infinite; flex:0 0 auto}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
.rec-time{font-family:var(--font-mono); font-weight:600; color:#B93B3B; font-size:.88rem}
.rec-wave{flex:1; display:flex; align-items:center; gap:3px; height:20px}
.rec-wave i{flex:1; max-width:3px; background:var(--red-500); border-radius:1px; height:20%; opacity:.6; animation:wave .9s ease-in-out infinite}
@keyframes wave{0%,100%{height:20%}50%{height:100%}}
.rec-stop{border:none; cursor:pointer; background:var(--ink-900); color:#fff;
  font-family:var(--font-mono); font-size:.75rem; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; padding:.5rem .9rem; border-radius:3px}
.rec-cancel{border:none; cursor:pointer; background:transparent; color:var(--gray-600);
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; padding:.5rem .3rem}

/* status */
.q-status{margin-top:.7rem; font-size:.86rem; color:var(--text-muted); display:none; align-items:center; gap:.5rem}
.q-status.show{display:flex}
.q-status.ok{color:var(--green-500)}
.q-status.err{color:var(--red-500)}
.spin{width:12px; height:12px; border:2px solid var(--gray-300); border-top-color:var(--brand-strong);
  border-radius:50%; animation:spin .7s linear infinite; flex:0 0 auto}
@keyframes spin{to{transform:rotate(360deg)}}
.audio-chip{margin-top:.7rem; display:none}
.audio-chip.show{display:block}
.audio-chip audio{width:100%; max-width:22rem; height:36px}

/* ---------- envio ---------- */
.foot{padding:2.4rem 1.4rem 3rem; text-align:center}
.send-btn{
  width:100%; max-width:22rem; padding:.95rem 1.8rem; border:none; border-radius:4px; cursor:pointer;
  background:var(--cyan-500); color:var(--ink-900);
  font-family:var(--font-mono); font-size:.82rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase;
  box-shadow:0 6px 20px rgba(78,195,224,.35); transition:background .18s, transform .12s, box-shadow .18s;
}
.send-btn:hover{background:var(--cyan-400); transform:translateY(-1px)}
.send-btn:active{transform:translateY(0)}
.send-btn:disabled{opacity:.5; cursor:default; transform:none; box-shadow:none}
.foot-note{margin:.9rem 0 0; font-family:var(--font-mono); font-size:var(--s--1);
  letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); min-height:1.2em}
.foot-note.err{color:var(--red-500)}

/* ---------- rodapé ---------- */
.end{background:var(--ink-900); color:#8A93A8; padding:2.2rem 0}
.end-in{display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap}
.end .brandlogo{height:40px}
.end p{margin:0; font-family:var(--font-mono); font-size:var(--s--1);
  letter-spacing:.06em; text-transform:uppercase; line-height:1.9}
.end a{color:var(--cyan-400); text-decoration:none; border-bottom:1px solid rgba(123,211,233,.35)}
.end a:hover{color:#fff; border-color:#fff}

/* ---------- tela final ---------- */
.done-screen{position:fixed; inset:0; background:var(--ink-900); display:grid; place-items:center;
  padding:1.4rem; z-index:100; overflow:hidden; isolation:isolate}
.done-screen[hidden]{display:none}
.done-screen canvas{position:absolute; inset:0; width:100%; height:100%; z-index:0; opacity:.6}
.done-screen::after{content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(ellipse 60% 55% at 50% 50%, var(--ink-900) 28%, rgba(17,17,31,.82) 55%, rgba(17,17,31,.3) 100%)}
.done-card{position:relative; z-index:1; max-width:32rem; text-align:center; color:#fff}
.done-check{width:56px; height:56px; margin:0 auto 1.4rem; border-radius:4px;
  background:var(--cyan-500); color:var(--ink-900); display:grid; place-items:center}
.done-check svg{width:28px; height:28px}
.done-card .kick{color:var(--cyan-400); margin:0 0 .6rem}
.done-card h2{margin:0 0 .9rem; font-family:var(--font-display); font-weight:300;
  text-transform:uppercase; font-size:var(--s-3); letter-spacing:.02em; color:#fff}
.done-lede{margin:0; color:#B9C0D0; font-size:var(--s-1)}
.done-logo{height:34px; margin:2rem auto 0}

/* ---------- responsivo ---------- */
@media (max-height:700px){
  .mast .mast-in{padding:1.8rem 1.4rem 2rem}
  .brandbar{margin-bottom:1.3rem}
  .mast .lede{margin:.8rem 0 1.2rem}
  .mic-note{margin-bottom:1.3rem}
}
@media (max-width:560px){
  .mast .mast-in{padding:1.9rem 1.4rem 2.1rem}
  .brandlogo{height:29px}
  .clientlogo{height:38px; width:38px}
  .q{padding:1.1rem}
  .mic{width:46px; height:46px}
  .metaline{gap:.4rem 1.1rem}
  .end-in{gap:.9rem}
  .rec-cancel{padding:.5rem 0}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
}