/* ============================================================
   PESQUISA DE SATISFAÇÃO · Simple Acc  (design v2, 01/11/2026)
   ------------------------------------------------------------
   ESTRUTURA: a pesquisa da Full Sales (fss.fullsalessystem.com/nps-tutoria):
     fundo chapado, logo centralizado, rótulo pequeno na cor de destaque,
     título grande e pesado, "Preencha a pesquisa abaixo:", formulário sem
     cartão de ~500 px, rótulo acima de cada campo, campos retangulares com
     borda fina na cor de destaque, botão de largura total, rodapé discreto.
     Duas telas: identificação → notas.
   CORES: as da Simple (tokens.css é cópia fiel de
     operacao/aquisicao/funil-de-aplicacao/src/styles/tokens.css; não editar):
     quase preto azulado (--ink-950) e o azul (--blue; --blue-400 em texto).
     Pedido do Daniel: "adulto", sério. Sem brilho, gradiente chamativo,
     grade de pontos, vidro, selo dourado ou bolinhas de progresso.
   TIPO: só Inter (a Sora saiu). Título em 800 com tracking negativo.
   CONFORMIDADE: sem hex cru nem px cru fora dos blocos de tokens.
   ============================================================ */

/* ---------- Tokens locais (o que o funil não tinha) ---------- */
:root {
  color-scheme: dark;

  --red-300: #ff8a98; /* erro legível no fundo escuro */
  --wm-acc: rgba(226, 232, 244, 0.62); /* "ACC" do logo (Wordmark.astro) */

  /* fundo chapado + vinheta muito sutil (navy do brandbook a 50%, só no alto) */
  --fundo: var(--ink-950);
  --vinheta: radial-gradient(ellipse 90% 55% at 50% 0%, rgba(14, 33, 56, 0.5) 0%, rgba(14, 33, 56, 0) 70%);

  /* campos: fundo escuro, borda fina na cor de destaque */
  --campo-bg: rgba(10, 22, 38, 0.72);
  --campo-borda: rgba(47, 107, 255, 0.5);
  --campo-borda-hover: rgba(91, 140, 255, 0.8);
  --campo-borda-neutra: rgba(143, 176, 255, 0.16);
  --campo-divisoria: rgba(47, 107, 255, 0.32);
  --nota-hover: rgba(91, 140, 255, 0.1);

  --raio: 4px;
  --size-topo: 720px;
  --size-form: 500px;
  --size-campo: 48px;
  --size-btn: 52px;
  --size-nota: 48px;
  --size-nota-sm: 44px;
  --size-area: 120px;
  --size-spinner: 16px;
  --size-chevron: 7px;
  --pad-campo-x: 14px;
  --sublinhado: 3px;

  --fs-titulo: clamp(2rem, 1.3rem + 2.8vw, 2.75rem);
  --fs-eyebrow-pg: 1rem;
  --fs-preencha: 1.125rem;
  --fs-preencha-sm: 1rem;
  --fs-rotulo: 0.875rem;
  --fs-pergunta: 0.9375rem;
  --fs-mini: 0.75rem;
  --fs-fim: 1.25rem;
  --lh-titulo: 1.1;
  --lh-fim: 1.4;
  --ls-titulo: -0.03em;
  --ls-mini: 0.02em;
  --measure-fim: 30ch;
  --measure-alerta: 34ch;
  --opacity-apagado: 0.4;
}

/* ============================================================
   RESET (o mesmo do funil)
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}
* {
  margin: 0;
  padding: 0;
}
html {
  -webkit-text-size-adjust: 100%;
}
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body-tight);
  color: var(--text-on-dark);
  background: var(--fundo);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--vinheta);
}
svg {
  display: block;
}
[hidden] {
  display: none !important;
}
button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}
button {
  cursor: pointer;
}
:focus-visible {
  outline: var(--size-rule) solid var(--accent-on-dark);
  outline-offset: var(--size-rule);
}

/* ============================================================
   PÁGINA
   ============================================================ */
.pg {
  position: relative;
  z-index: 1;
  flex: 1 0 auto;
  width: 100%;
  max-width: var(--size-topo);
  margin-inline: auto;
  padding: var(--space-6) var(--container-pad) 0;
}

/* "Modo teste": texto pequeno no canto, só com &teste=1 */
.modo-teste {
  position: absolute;
  top: var(--space-2);
  right: var(--container-pad);
  z-index: 2;
  font-size: var(--fs-mini);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-mini);
  color: var(--text-on-dark-soft);
}

/* ---------- Topo: logo · rótulo · título · "Preencha a pesquisa abaixo:" ---------- */
.topo {
  text-align: center;
}
.wm {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}
.wm svg {
  width: var(--size-wordmark);
  height: auto;
  overflow: visible;
}
.wm text {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wordmark);
}
.wm__a {
  fill: var(--white);
}
.wm__b {
  fill: var(--wm-acc);
}

.topo__textos {
  margin-top: var(--space-4);
}
.topo__eyebrow {
  font-size: var(--fs-eyebrow-pg);
  font-weight: var(--fw-bold);
  line-height: var(--lh-h3);
  color: var(--accent-on-dark);
}
.topo__titulo {
  margin-top: var(--space-05);
  font-size: var(--fs-titulo);
  font-weight: var(--fw-black);
  line-height: var(--lh-titulo);
  letter-spacing: var(--ls-titulo);
  color: var(--white);
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.topo__sub {
  margin-top: var(--space-2);
  font-size: var(--fs-preencha);
  font-weight: var(--fw-bold);
  line-height: var(--lh-h3);
  color: var(--white);
}

/* ============================================================
   FORMULÁRIO · sem cartão, ~500 px, rótulos alinhados à esquerda
   ============================================================ */
.formulario {
  max-width: var(--size-form);
  margin: var(--space-6) auto 0;
  text-align: left;
}
.formulario:empty {
  display: none;
}
.etapa {
  margin-bottom: var(--space-2);
  font-size: var(--fs-mini);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-mini);
  color: var(--text-on-dark-soft);
}
.etapa:focus {
  outline: none;
}

/* "Você já respondeu": texto discreto com borda fina */
.aviso {
  margin-bottom: var(--space-3);
  padding: var(--space-1h) var(--pad-campo-x);
  border: var(--size-hairline) solid var(--border-dark-strong);
  border-radius: var(--raio);
  font-size: var(--fs-small);
  line-height: var(--lh-body-tight);
  color: var(--text-on-dark-muted);
  text-wrap: pretty;
}

.tela {
  animation: aparece var(--dur-slow) var(--ease);
}

/* ---------- Campo: rótulo branco pequeno + caixa retangular ---------- */
.campo + .campo {
  margin-top: var(--space-3);
}
.campo--nota + .campo {
  margin-top: var(--space-4);
}
.campo__rotulo {
  display: block;
  margin-bottom: var(--space-1);
  font-size: var(--fs-rotulo);
  font-weight: var(--fw-semi);
  line-height: var(--lh-body-tight);
  color: var(--white);
  text-wrap: pretty;
}
.campo--nota .campo__rotulo {
  margin-bottom: var(--space-1h);
  font-size: var(--fs-pergunta);
}
.campo__req {
  margin-left: var(--space-0);
  color: var(--text-on-dark-soft);
}
.campo__opc {
  font-weight: var(--fw-medium);
  color: var(--text-on-dark-soft);
}

.campo__input {
  display: block;
  width: 100%;
  min-height: var(--size-campo);
  padding: var(--space-1h) var(--pad-campo-x);
  border: var(--size-hairline) solid var(--campo-borda);
  border-radius: var(--raio);
  background: var(--campo-bg);
  color: var(--white);
  font-size: var(--fs-body); /* 16 px: o iPhone não dá zoom ao tocar */
  line-height: var(--lh-body-tight);
  -webkit-appearance: none;
  appearance: none;
  transition:
    border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}
.campo__input::placeholder {
  color: var(--text-on-dark-soft);
  opacity: 1;
}
.campo__input:hover {
  border-color: var(--campo-borda-hover);
}
.campo__input:focus {
  outline: none;
  border-color: var(--accent-on-dark);
  box-shadow: 0 0 0 var(--size-hairline) var(--accent-on-dark);
}
/* Empresa (só leitura): borda neutra, texto apagado */
.campo__input[readonly] {
  border-color: var(--campo-borda-neutra);
  background: transparent;
  color: var(--text-on-dark-muted);
  cursor: default;
}

/* Seletor: seta desenhada em CSS (sem imagem) */
.campo__sel {
  position: relative;
}
.campo__sel::after {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(var(--pad-campo-x) + var(--space-05));
  width: var(--size-chevron);
  height: var(--size-chevron);
  border-right: var(--size-rule) solid var(--text-on-dark-muted);
  border-bottom: var(--size-rule) solid var(--text-on-dark-muted);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.campo__input--sel {
  padding-right: calc(var(--pad-campo-x) * 3);
  cursor: pointer;
}
.campo__input--sel:invalid {
  color: var(--text-on-dark-soft);
}
.campo__input--sel option {
  color: var(--text-on-dark);
  background: var(--midnight);
}

.campo__input--area {
  min-height: var(--size-area);
  resize: vertical;
}
.campo__contador {
  margin-top: var(--space-05);
  font-size: var(--fs-mini);
  color: var(--text-on-dark-soft);
  text-align: right;
}

/* ---------- Escala de notas: caixas coladas (controle segmentado) ---------- */
.escala {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  border: var(--size-hairline) solid var(--campo-borda);
  border-radius: var(--raio);
  background: var(--campo-bg);
  overflow: hidden;
}
.nota {
  position: relative;
  min-width: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.nota + .nota {
  border-left: var(--size-hairline) solid var(--campo-divisoria);
}
.nota input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.nota__n {
  display: grid;
  place-items: center;
  height: var(--size-nota);
  font-size: var(--fs-body);
  font-weight: var(--fw-semi);
  color: var(--text-on-dark);
  font-variant-numeric: tabular-nums;
  transition:
    background var(--dur) var(--ease),
    color var(--dur) var(--ease);
}
.nota:hover .nota__n {
  background: var(--nota-hover);
}
.nota.is-on .nota__n {
  background: var(--blue);
  color: var(--white);
  font-weight: var(--fw-bold);
}
.nota input:focus-visible + .nota__n {
  outline: var(--size-rule) solid var(--white);
  outline-offset: calc(var(--space-05) * -1);
}
.escala__legenda {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: var(--space-1);
  font-size: var(--fs-mini);
  line-height: var(--lh-body-tight);
  color: var(--text-on-dark-soft);
}
.escala__legenda span:last-child {
  text-align: right;
}

/* ============================================================
   BOTÃO · retangular, azul chapado, largura total
   ============================================================ */
.acoes {
  margin-top: var(--space-5);
}
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-inline);
  width: 100%;
  min-height: var(--size-btn);
  padding: var(--space-1h) var(--space-3);
  border: 0;
  border-radius: var(--raio);
  background: var(--blue);
  color: var(--white);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
  transition:
    background var(--dur) var(--ease),
    opacity var(--dur) var(--ease);
}
.btn:hover {
  background: var(--blue-600);
}
.btn:focus-visible {
  outline: var(--size-rule) solid var(--blue-300);
  outline-offset: var(--size-rule-thick);
}
.btn__seta {
  flex: none;
  width: var(--size-icon);
  height: var(--size-icon);
  stroke-width: 2.4;
  transition: transform var(--dur) var(--ease);
}
.btn:hover:not(:disabled) .btn__seta {
  transform: translateX(var(--space-0));
}
/* Apagado até a tela estar completa */
.btn:disabled {
  background: var(--blue);
  opacity: var(--opacity-apagado);
  cursor: not-allowed;
}
/* Enviando: azul cheio, com o giro no lugar da seta */
.btn.is-loading:disabled {
  opacity: 1;
  cursor: progress;
}
.giro {
  flex: none;
  width: var(--size-spinner);
  height: var(--size-spinner);
  border: var(--size-rule) solid var(--text-on-dark-soft);
  border-top-color: var(--white);
  border-radius: var(--radius-circle);
  animation: gira 800ms linear infinite;
}

.erro {
  margin-top: var(--space-1h);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  line-height: var(--lh-body-tight);
  color: var(--red-300);
  text-wrap: pretty;
}

/* "Voltar": link de texto discreto */
.voltar {
  display: flex;
  align-items: center;
  gap: var(--gap-tight);
  width: fit-content;
  margin: var(--space-2) auto 0;
  padding: var(--space-1) var(--space-1h);
  border: 0;
  background: none;
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--text-on-dark-soft);
  transition: color var(--dur) var(--ease);
}
.voltar:hover {
  color: var(--text-on-dark);
}
.voltar:hover span {
  text-decoration: underline;
  text-underline-offset: var(--sublinhado);
}
.voltar svg {
  width: var(--size-icon-sm);
  height: var(--size-icon-sm);
  stroke-width: 2.4;
}

/* ============================================================
   OBRIGADO · só texto, sem ícone
   ============================================================ */
.fim {
  padding-top: var(--space-5);
  border-top: var(--size-hairline) solid var(--border-dark);
  text-align: center;
  animation: aparece var(--dur-slow) var(--ease);
}
.fim__titulo {
  max-width: var(--measure-fim);
  margin-inline: auto;
  font-size: var(--fs-fim);
  font-weight: var(--fw-bold);
  line-height: var(--lh-fim);
  color: var(--white);
  text-wrap: balance;
}
.fim__titulo:focus {
  outline: none;
}
.fim__sub {
  margin-top: var(--space-1h);
  font-size: var(--fs-body-sm);
  color: var(--text-on-dark-muted);
}

/* ============================================================
   LINK INCOMPLETO
   ============================================================ */
.alerta {
  max-width: var(--measure-alerta);
  margin-inline: auto;
  padding: var(--space-3);
  border: var(--size-hairline) solid var(--border-dark-strong);
  border-radius: var(--raio);
  font-size: var(--fs-body);
  font-weight: var(--fw-semi);
  line-height: var(--lh-body-tight);
  color: var(--text-on-dark);
  text-align: center;
  text-wrap: balance;
}
.sem-js {
  margin-top: var(--space-5);
  color: var(--text-on-dark-muted);
  text-align: center;
}

/* ============================================================
   RODAPÉ
   ============================================================ */
.rodape {
  position: relative;
  z-index: 1;
  padding: var(--space-7) var(--container-pad) var(--space-4);
  font-size: var(--fs-mini);
  letter-spacing: var(--ls-mini);
  color: var(--text-on-dark-soft);
  text-align: center;
}

/* Campo isca (honeypot): fora da tela, invisível para pessoas */
.isca {
  position: absolute;
  left: -9999em;
  top: auto;
  width: var(--size-hairline);
  height: var(--size-hairline);
  overflow: hidden;
}

/* ============================================================
   CELULAR
   ============================================================ */
@media (max-width: 520px) {
  .pg {
    padding-top: var(--space-5);
  }
  .topo__textos {
    margin-top: var(--space-3);
  }
  .topo__sub {
    margin-top: var(--space-1h);
    font-size: var(--fs-preencha-sm);
  }
  .formulario {
    margin-top: var(--space-5);
  }
  .nota__n {
    height: var(--size-nota-sm);
    font-size: var(--fs-body-sm);
  }
  .rodape {
    padding-top: var(--space-6);
  }
}

/* ============================================================
   MOVIMENTO (só um esmaecer na troca de tela)
   ============================================================ */
@keyframes aparece {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes gira {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}