/* Diagnóstico de Marca · Gustavo Pera (cópia da página da Ajah)
   Direção: 09-implementacao/01-direcao.md (aprovada em 2026-10-28) */

@font-face {
  font-family: "Newsreader";
  src: url("/assets/fonts/newsreader.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("/assets/fonts/newsreader-italic.woff2") format("woff2");
  font-weight: 400 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/ibm-plex-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --papel: #F5F4F2;
  --transmissao: #000000;
  --causa: #720F0F;
  --estatuto: #474747;
  --legenda: #8A8A8A;

  --serif: "Newsreader", Georgia, serif;
  --mono: "IBM Plex Mono", "Courier New", monospace;

  --titulo: 40px;
  --subtitulo: 24px;
  --pergunta: 21px;
  --texto: 18px;
  --apoio: 20px;
  --rotulo: 12px;
  --botao: 13px;

  --coluna: 640px;
  --margem: 16px;
  --chiado: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.15' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='3' intercept='-1.5'/%3E%3CfeFuncG type='linear' slope='3' intercept='-1.5'/%3E%3CfeFuncB type='linear' slope='3' intercept='-1.5'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (min-width: 768px) {
  :root {
    --titulo: 64px;
    --subtitulo: 32px;
  }
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--papel);
  color: var(--transmissao);
  font: 400 var(--texto)/1.5 var(--serif);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
body.escuro { background: var(--transmissao); }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul { margin: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--causa); outline-offset: 2px; }
.escuro :focus-visible, .tela--escura :focus-visible { outline-color: var(--papel); }
[tabindex="-1"]:focus { outline: none; }

.pular {
  position: absolute;
  left: var(--margem);
  top: -64px;
  z-index: 10;
  padding: 12px 16px;
  background: var(--papel);
  color: var(--transmissao);
  font: 500 var(--botao)/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.pular:focus { top: var(--margem); }

.coluna {
  position: relative;
  z-index: 1;
  max-width: calc(var(--coluna) + 2 * var(--margem));
  margin: 0 auto;
  padding: 0 var(--margem);
}

/* Telas: só a ativa aparece quando há JavaScript */
.js .tela:not(.ativa) { display: none; }
.entrando { animation: entra .15s ease-out; }
@keyframes entra { from { opacity: 0; } }

/* Rótulo mono */
.rotulo {
  font: 500 var(--rotulo)/1.3 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--estatuto);
}
.tela--escura .rotulo { color: var(--legenda); }

/* Botões */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 56px;
  padding: 0 32px;
  border: 0;
  border-radius: 0;
  background: var(--transmissao);
  color: var(--papel);
  font: 500 var(--botao)/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s, color .15s;
}
.botao:hover { background: var(--causa); color: var(--papel); }
.botao:disabled { cursor: progress; }
.botao--claro { background: var(--papel); color: var(--transmissao); }
.botao--claro:hover { background: var(--causa); color: var(--papel); }

.voltar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 8px;
  border: 0;
  background: none;
  color: var(--estatuto);
  font: 500 var(--botao)/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}
.voltar:hover { color: var(--causa); }

@media (min-width: 768px) {
  .botao { width: auto; }
}

/* Telas escuras: abertura, final e 404 */
.tela--escura {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 24px 0 64px;
  background: var(--transmissao);
  color: var(--papel);
  overflow: hidden;
}
.chiado {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: .2;
  mix-blend-mode: screen;
  background-image: var(--chiado);
  pointer-events: none;
}

.topo-escuro {
  display: flex;
  align-items: center;
  gap: 16px;
}
.topo-escuro img { width: 48px; height: 48px; }

.ao-vivo {
  display: inline-block;
  color: var(--papel);
  animation: pisca 2s ease-in-out infinite;
}
@keyframes pisca { 50% { opacity: .15; } }

/* Faixas da transmissão interrompida: só no fundo, nunca sobre a letra */
.faixas {
  position: relative;
  height: 56px;
  margin: 48px calc(50% - 50vw) 24px;
  pointer-events: none;
}
.faixa { position: absolute; display: block; }
.faixa--papel { top: 6px; height: 12px; left: 22%; right: 0; background: var(--papel); opacity: .85; }
.faixa--causa { top: 22px; height: 4px; left: 0; right: 38%; background: var(--causa); }
.faixa--legenda { top: 44px; height: 2px; left: 34%; right: 0; background: var(--legenda); }

.titulo {
  font-weight: 800;
  font-size: var(--titulo);
  line-height: .98;
  letter-spacing: -.02em;
  margin-bottom: 24px;
}
.subtitulo {
  font-weight: 600;
  font-size: var(--subtitulo);
  line-height: 1.15;
  letter-spacing: -.01em;
  margin-bottom: 40px;
}
.bloco-causa {
  padding: 0 .16em;
  background: var(--causa);
  color: var(--papel);
  font-style: italic;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.texto p, .texto ul { margin-bottom: 16px; }
.texto ul { padding: 0; list-style: none; }
.texto li { position: relative; padding-left: 24px; margin-bottom: 8px; }
.texto li::before { content: "•"; position: absolute; left: 4px; }

.recorte {
  margin: 32px 0;
  padding: 24px;
  background: var(--papel);
  color: var(--transmissao);
}
.recorte em, .destaque { font-style: italic; color: var(--causa); }

.fecho { margin-bottom: 40px; }

/* Assinatura do Gustavo: fecha a fala da abertura e a tela final (no lugar do brasão da Ajah) */
.assinatura {
  margin-bottom: 32px;
  font-style: italic;
  font-weight: 500;
  font-size: var(--apoio);
  line-height: 1.3;
  color: var(--papel);
}
.final__texto + .assinatura { margin-top: 24px; }

/* Etapas de perguntas: faixa de transmissão no topo e abertura de seção (número em Causa, nome, divisor) */
.etapa { padding: 0 0 64px; counter-reset: pergunta; }
.etapa__faixa {
  position: relative;
  background: var(--transmissao);
  overflow: hidden;
}
.etapa__faixa-in {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 72px;
  padding-top: 16px;
  padding-bottom: 16px;
}
.etapa__faixa img { width: 40px; height: 40px; }
.etapa__faixa .rotulo { color: var(--legenda); }
.etapa__num {
  margin-top: 48px;
  font-weight: 800;
  font-size: 72px;
  line-height: .9;
  letter-spacing: -.02em;
  color: var(--causa);
}
.etapa__titulo {
  margin-top: 8px;
  font-weight: 600;
  font-size: var(--subtitulo);
  line-height: 1.15;
  letter-spacing: -.01em;
}
.divisor {
  height: 0;
  margin: 24px 0 48px;
  border: 0;
  border-top: 1px solid var(--estatuto);
}
@media (min-width: 768px) {
  .etapa__num { margin-top: 64px; font-size: 96px; }
}

/* Numeração das perguntas por etapa; perguntas escondidas não contam */
.campo:not(#campo-indicacao) { position: relative; padding-left: 40px; counter-increment: pergunta; }
.campo:not(#campo-indicacao) > .pergunta::before {
  content: counter(pergunta, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: .55em;
  font: 500 var(--rotulo)/1 var(--mono);
  letter-spacing: .12em;
  color: var(--estatuto);
}
#campo-indicacao { padding-left: 40px; margin-top: -16px; }
.etapa__topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 48px;
}
.etapa__topo picture { flex: none; }
.etapa__topo img { width: 40px; height: 40px; }
.indicador { text-align: right; }

.apoio {
  font-style: italic;
  font-size: var(--apoio);
  line-height: 1.4;
  color: var(--estatuto);
  margin-bottom: 40px;
}

.campo {
  margin: 0 0 40px;
  padding: 0;
  border: 0;
  min-width: 0;
}
.pergunta {
  display: block;
  float: none;
  width: 100%;
  padding: 0;
  margin-bottom: 12px;
  font-weight: 600;
  font-size: var(--pergunta);
  line-height: 1.25;
}
.marca {
  display: inline-block;
  margin-left: 8px;
  font: 500 var(--rotulo)/1.3 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--estatuto);
  vertical-align: .2em;
  white-space: nowrap;
}
.dica { margin: -4px 0 8px; font-size: 16px; color: var(--estatuto); }

.entrada {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 8px 0;
  border: 0;
  border-bottom: 1px solid var(--estatuto);
  border-radius: 0;
  background: transparent;
  color: var(--transmissao);
  font: 400 var(--texto)/1.5 var(--serif);
  -webkit-appearance: none;
  appearance: none;
}
.entrada:focus-visible { outline-offset: 4px; }
textarea.entrada { min-height: 105px; resize: none; overflow: hidden; }
.entrada[aria-invalid="true"] { border-bottom-color: var(--causa); }

.opcoes { display: grid; gap: 8px; }
.opcao {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 12px 16px;
  border: 1px solid var(--estatuto);
  line-height: 1.3;
  cursor: pointer;
  transition: background-color .15s, color .15s;
}
.opcao:hover { border-color: var(--transmissao); }
.opcao input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
}
.opcao:has(input:checked) { background: var(--transmissao); border-color: var(--transmissao); color: var(--papel); }
.opcao:has(input:focus-visible) { outline: 2px solid var(--causa); outline-offset: 2px; }
.campo[aria-invalid="true"] .opcao { border-color: var(--causa); }

.erro { margin-top: 8px; font-size: 16px; color: var(--causa); }
.erro:empty { display: none; }

.lgpd { margin: 8px 0 0; font-size: 15px; line-height: 1.5; color: var(--estatuto); }
.lgpd a, .link { color: var(--transmissao); text-underline-offset: 3px; }
.lgpd a:hover, .link:hover { color: var(--causa); }

.acoes {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  margin-top: 48px;
}
@media (min-width: 768px) {
  .acoes { flex-direction: row; align-items: center; gap: 24px; }
}
.envio-erro { margin-top: 16px; color: var(--causa); }
.envio-erro:empty { display: none; }

.isca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Tela final */
#final .rotulo { margin-top: 40px; }
.final__titulo {
  margin: 16px 0 16px;
  font-weight: 800;
  font-size: var(--titulo);
  line-height: .98;
  letter-spacing: -.02em;
}
.final__texto { font-size: var(--apoio); line-height: 1.4; }

/* Página de privacidade */
.doc { padding: 24px 0 96px; }
.doc .etapa__topo { justify-content: flex-start; }
.doc .titulo { margin-top: 16px; }
.doc h2 { margin: 40px 0 12px; font-weight: 600; font-size: var(--pergunta); line-height: 1.25; }
.doc p, .doc ul { margin-bottom: 16px; }
.doc ul { padding-left: 24px; }
.doc .voltar { margin-top: 48px; padding-left: 0; }
.doc__data { margin-top: 48px; }

@media (prefers-reduced-motion: reduce) {
  .entrando, .ao-vivo { animation: none; }
  .botao, .opcao { transition: none; }
}