/*
 * ============================================================
 * styles.css — Diagnostico de IA no Negocio
 * ============================================================
 * REGRA CENTRAL: nenhuma cor, fonte, radius ou espacamento e
 * escrito a mao aqui. Tudo vem de var(--token) de tokens.css.
 * As unicas excepcoes sao valores estruturais (largura de
 * container, altura de barra) que nao sao decisao de marca.
 *
 * ESTRUTURA:
 *   1. Imports
 *   2. Base e palco
 *   3. Acessibilidade (foco)
 *   4. Cartao e cabecalho (barra de progresso)
 *   5. Tela: titulo, subtitulo, dica, contador
 *   6. Campos de texto
 *   7. Opcoes (escolha unica e multipla)
 *   8. Erro
 *   9. Navegacao e botoes
 *  10. Resultado
 *  11. Movimento reduzido
 * ============================================================
 */

@import './reset.css';
@import './tokens.css';


/* ── 2. BASE E PALCO ───────────────────────────────────────── */

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text);
  /* Mesmo radial do hero da sales page e da landing pessoal: branco
   * no centro, escurecendo para as bordas. E o fundo da familia. */
  background: radial-gradient(ellipse at center,
              var(--color-surface) 0%,
              hsl(220, 10%, 95%) 52%,
              hsl(220, 8%, 90%) 100%);
  background-attachment: fixed;
  min-height: 100vh;
}

/*
 * Blobs desfocados de fundo. Os mesmos da bio, da landing pessoal
 * e da sales page: e o que faz a pagina pertencer a familia.
 * position: fixed para nao rolarem junto com o cartao.
 */
.blob {
  position: fixed;
  border-radius: var(--radius-pill);
  pointer-events: none;
  filter: blur(80px);
  background: hsla(240, 100%, 15%, 0.1);
  z-index: 0;
}
.blob--tl { width: 220px; height: 220px; top: -40px;    left: -60px; }
.blob--br { width: 260px; height: 260px; bottom: -60px; right: -60px; }

/*
 * O palco centraliza o cartao. min-height com dvh em vez de vh:
 * no celular, vh conta a barra do navegador e cria rolagem
 * fantasma; dvh acompanha a altura real disponivel.
 */
.palco {
  position: relative;
  z-index: 1; /* acima dos blobs */
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}
@media (min-width: 640px) {
  .palco { padding: var(--space-8); }
}


/* ── 3. ACESSIBILIDADE ─────────────────────────────────────── */

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}


/* ── 4. CARTAO E CABECALHO ─────────────────────────────────── */

.cartao {
  width: 100%;
  max-width: 560px;
  /* Levemente translucido com blur, como o card de perfil da bio e
   * o card do hero da sales page: deixa os blobs vazarem por tras. */
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid hsl(240, 20%, 80%);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-6);
}
@media (min-width: 640px) {
  .cartao { padding: var(--space-8); }
}

/*
 * Marca no topo do cartao.
 *
 * A logo e um retangulo navy recortado pelo SVG via mask, mesma
 * tecnica do header da bio e da sales page: a cor vem do token, nao
 * do arquivo.
 */
.marca {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-6);
}

.marca__logo {
  display: block;
  height: 26px;
  /* Proporcao original do PNG, a mesma usada no header da sales
   * page e da landing pessoal. */
  aspect-ratio: 1652 / 1063;
  background-color: var(--color-primary);
  -webkit-mask-image: url(/assets/images/logo.png);
  mask-image: url(/assets/images/logo.png);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.cabecalho { margin-bottom: var(--space-8); }

.trilho {
  height: 6px;
  background: var(--color-surface-alt);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.trilho__barra {
  height: 100%;
  width: 0;
  background: linear-gradient(135deg, var(--navy-base) 0%, var(--navy-lighter) 100%);
  border-radius: var(--radius-pill);
  transition: width var(--dur-base) var(--ease);
}

.etapa {
  margin-top: var(--space-3);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-muted);
}


/* ── 5. TELA ───────────────────────────────────────────────── */

.tela__titulo {
  font-size: 1.375rem;
  font-weight: 700;
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--color-text);
  text-wrap: balance;
}
@media (min-width: 640px) {
  .tela__titulo { font-size: 1.625rem; }
}

/* A abertura pode respirar mais: e a unica tela sem pergunta. */
.tela__titulo--abertura {
  font-size: 1.5rem;
}
@media (min-width: 640px) {
  .tela__titulo--abertura { font-size: 1.875rem; }
}

.tela__subtitulo {
  margin-top: var(--space-4);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  color: var(--color-text-muted);
}

.tela__dica {
  margin-top: var(--space-3);
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
}

.contador {
  margin-top: var(--space-2);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-muted);
}


/* ── 6. CAMPOS DE TEXTO ────────────────────────────────────── */

.campos {
  margin-top: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.campo { display: flex; flex-direction: column; gap: var(--space-2); }

.campo__label {
  font-size: var(--fs-body-sm);
  font-weight: 600;
  color: var(--color-text);
}

.campo__input {
  width: 100%;
  /* 16px e o minimo que o iOS aceita sem dar zoom no foco.
   * Fonte menor aqui quebraria a experiencia no celular, que e
   * onde a maioria dos leads abre. */
  font-size: var(--fs-body);
  padding: 14px var(--space-4);
  background: var(--input-bg);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  color: var(--color-text);
  transition: border-color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease);
}
.campo__input::placeholder { color: var(--color-text-muted); }
.campo__input:focus {
  background: var(--color-surface);
  border-color: var(--color-primary);
  outline: none;
}
.campo__input:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}


/* ── 7. OPCOES ─────────────────────────────────────────────── */

.opcoes {
  margin-top: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/*
 * O alvo de toque e o cartao inteiro, nao um circulo pequeno.
 * text-align: left porque botao centraliza por padrao e a leitura
 * de uma lista de opcoes precisa de margem esquerda constante.
 */
.opcao {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 56px;
  padding: var(--space-4);
  text-align: left;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-tight);
  transition: border-color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.opcao:hover {
  border-color: var(--color-primary);
  transform: translateY(-1px);
}

/* A marca e um circulo que preenche quando selecionado. Como o
 * botao ja carrega aria-checked, isto e puramente visual. */
.opcao__marca {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  transition: border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}

.opcao--marcada {
  border-color: var(--color-primary);
  background: var(--color-surface-alt);
}
.opcao--marcada .opcao__marca {
  border-color: var(--color-primary);
  /* inset shadow desenha o preenchimento sem elemento extra */
  box-shadow: inset 0 0 0 5px var(--color-primary);
}

.opcao__texto { flex: 1; }


/* ── 7B. HONEYPOT ──────────────────────────────────────────
 * Fora da tela, nao display:none. Alguns robos ignoram o que
 * esta com display:none; o que sai de vista por posicionamento
 * continua "existindo" e e preenchido. Quem usa leitor de tela
 * nao chega aqui por causa do aria-hidden e do tabindex="-1".
 */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}


/* ── 7C. TELA AGRUPADA ─────────────────────────────────────
 * Uma linha por area, com tres opcoes curtas em cada. Substitui
 * as telas individuais das areas nao marcadas como dor.
 */
.agrupada {
  margin-top: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.linha-area {
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}
.linha-area:last-child { border-bottom: none; padding-bottom: 0; }

.linha-area__nome {
  font-size: var(--fs-body-sm);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

/* No celular os tres botoes empilham em coluna unica se nao
 * couberem; a partir de 420px ficam lado a lado. */
.linha-area__opcoes {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
}
@media (min-width: 420px) {
  .linha-area__opcoes { grid-template-columns: repeat(3, 1fr); }
}

.mini {
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font-size: var(--fs-caption);
  font-weight: 500;
  line-height: var(--lh-tight);
  transition: border-color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
.mini:hover { border-color: var(--color-primary); color: var(--color-text); }

.mini--marcada {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-inverse);
  font-weight: 600;
}


/* ── 7D. PROCESSANDO ───────────────────────────────────────
 * Pausa curta entre a ultima pergunta e o resultado.
 */
.processando {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding-block: var(--space-16);
  text-align: center;
}

.processando__anel {
  width: 40px;
  height: 40px;
  border: 3px solid var(--color-surface-alt);
  border-top-color: var(--color-primary);
  border-radius: var(--radius-pill);
  animation: girar 800ms linear infinite;
}

@keyframes girar { to { transform: rotate(360deg); } }

.processando__texto {
  font-size: var(--fs-body-sm);
  color: var(--color-text-muted);
}


/* ── 8. ERRO ───────────────────────────────────────────────── */

.erro {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--destructive-bg);
  border-left: 3px solid var(--destructive);
  border-radius: var(--radius-sm);
  font-size: var(--fs-body-sm);
  /* Token escurecido: o --destructive puro nao passa AA em texto
   * de corpo sobre fundo claro. */
  color: var(--destructive-text);
}


/* ── 9. NAVEGACAO E BOTOES ─────────────────────────────────── */

.nav {
  margin-top: var(--space-8);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
/* Sem o Voltar, o Continuar vai para a direita sozinho. */
.nav > .btn--primario:only-child { margin-left: auto; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 28px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  font-weight: 600;
  transition: background var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}

.btn--primario {
  background: linear-gradient(135deg, var(--navy-base) 0%, var(--navy-lighter) 100%);
  color: var(--color-text-inverse);
}
.btn--primario:hover {
  background: linear-gradient(135deg, var(--navy-lighter) 0%, var(--navy-base) 100%);
  box-shadow: 0 4px 16px rgba(0, 0, 43, 0.25);
  transform: translateY(-2px);
}
.btn--primario:active { transform: translateY(0); }

.btn--texto {
  background: transparent;
  color: var(--color-text-muted);
  padding-inline: var(--space-3);
}
.btn--texto:hover { color: var(--color-text); }

.btn--grande {
  width: 100%;
  padding: var(--space-4) var(--space-8);
  font-size: var(--fs-body);
}


/* ── 10. RESULTADO ─────────────────────────────────────────── */

.resultado { animation: entrar var(--dur-slow) var(--ease) both; }

@keyframes entrar {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.selo {
  display: inline-block;
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-alt);
  border-radius: var(--radius-pill);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.resultado__titulo {
  margin-top: var(--space-4);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-heading);
  text-wrap: balance;
}
@media (min-width: 640px) {
  .resultado__titulo { font-size: 1.875rem; }
}

.resultado__subtitulo {
  margin-top: var(--space-3);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  color: var(--color-text-muted);
}

/* Medidor de maturidade. Sem numero: so o rotulo e a barra. */
.medidor { margin-top: var(--space-8); }
.medidor__label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
}
.medidor__trilho {
  height: 10px;
  background: var(--color-surface-alt);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.medidor__barra {
  height: 100%;
  background: linear-gradient(135deg, var(--navy-base) 0%, var(--navy-lighter) 100%);
  border-radius: var(--radius-pill);
  transition: width var(--dur-slow) var(--ease);
}

/* As 3 areas prioritarias */
.areas { margin-top: var(--space-8); }
.areas__titulo {
  font-size: var(--fs-h3);
  font-weight: 700;
  letter-spacing: var(--tracking-heading);
  margin-bottom: var(--space-4);
}
.areas__grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.area-card {
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-left-width: 3px;
  border-radius: var(--radius-md);
}
/*
 * A cor da borda esquerda sinaliza a faixa. Como a paleta da
 * marca nao tem accent colorido, a diferenca e feita por
 * intensidade de navy, nao por semaforo de cores. A etiqueta de
 * texto ao lado carrega o significado: cor sozinha nunca e o
 * unico portador de informacao (WCAG 1.4.1).
 */
.area-card--alta  { border-left-color: var(--color-primary); }
.area-card--media { border-left-color: var(--color-border-strong); }
.area-card--forte { border-left-color: var(--color-border); }

.area-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}
.area-card__nome {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: var(--lh-tight);
}

.tag {
  flex-shrink: 0;
  padding: 3px var(--space-2);
  border-radius: var(--radius-pill);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.tag--alta  { background: var(--color-primary);      color: var(--color-text-inverse); }
.tag--media { background: var(--color-surface-alt);  color: var(--color-text); }
.tag--forte { background: transparent; border: 1px solid var(--color-border-strong); color: var(--color-text-muted); }

.area-card__linha {
  font-size: var(--fs-caption);
  line-height: var(--lh-body);
  color: var(--color-text-muted);
}
.area-card__resolve {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  font-size: var(--fs-caption);
  line-height: var(--lh-body);
  color: var(--color-text-muted);
}
.area-card__resolve-label {
  display: block;
  font-weight: 700;
  color: var(--color-text);
}

/* Caixa "Por onde comecar": o unico bloco navy da tela, para ser
 * o ponto de maior peso antes do CTA. */
.comecar {
  margin-top: var(--space-8);
  padding: var(--space-6);
  background: linear-gradient(135deg, var(--navy-base) 0%, var(--navy-lighter) 100%);
  border-radius: var(--radius-md);
  color: var(--color-text-inverse);
}
.comecar__titulo {
  font-size: var(--fs-h3);
  font-weight: 700;
  letter-spacing: var(--tracking-heading);
  margin-bottom: var(--space-3);
}
.comecar__texto {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  color: rgba(255, 255, 255, 0.82);
}

.resultado__cta { margin-top: var(--space-8); }

.resultado__nota {
  margin-top: var(--space-4);
  text-align: center;
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
}


/* ── 11. MOVIMENTO REDUZIDO ────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}