/*
  Tema Reforma Direta — a camada de IDENTIDADE, gerada por `tema:novo`.

      base.css              primitivas da plataforma
      celulas/base-1.css      grade, ritmo, responsivo
      mm-lp-reforma.css        isto aqui

  Nenhuma regra abaixo decide grade, largura, direcao de eixo ou posicao:
  o `ProvaDestrutivaTest` recusa cada uma pelo nome sobre as classes da
  celula. Apagado este arquivo, a pagina fica FEIA e continua de pe.
*/

:root {
  --fundo: #F6F7FB;
  --fundo-alt: #E7EAF4;
  --apoio: #DDE3F5;
  --tinta: #1B2346;
  --tinta-fraca: #4A5272;
  --destaque: #C2401C;
  --destaque-texto: #B03A19;
  --escuro: #1F2A55;
  --destaque-claro: #FF8A63;
  --raio-acao: 999px;
  --raio-caixa: 20px;
  --raio-campo: 12px;

  --display: "Plus Jakarta Sans", Georgia, serif;
  --texto: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --escala-texto: 1;
  --pad: clamp(20px,4.5vw,56px);

  --filete: color-mix(in srgb, var(--tinta) 16%, transparent);
}

body {
  background: var(--fundo);
  color: var(--tinta);
  font-family: var(--texto);
  line-height: 1.65;
}

h1, h2, h3 { font-family: var(--display); font-weight: 800; line-height: 1.12; letter-spacing: -.02em; }
h1 { font-size: calc(clamp(2.1rem, 6vw, 3.6rem) * var(--escala-texto, 1)); }
h2 { font-size: calc(clamp(1.6rem, 3.4vw, 2.4rem) * var(--escala-texto, 1)); }
h3 { font-family: var(--texto); font-weight: 600; font-size: calc(1.02rem * var(--escala-texto, 1)); letter-spacing: 0; }

.apoio {
  font-size: calc(.74rem * var(--escala-texto, 1));
  font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--mm-text-eyebrow-color, var(--destaque-texto));
  margin: 0;
}
.conduz { font-size: calc(1.05rem * var(--escala-texto, 1)); color: var(--mm-text-subtitle-color, var(--tinta-fraca)); margin: 0; }
.item p { color: var(--tinta-fraca); margin: 0; font-size: calc(.94rem * var(--escala-texto, 1)); }
.item h3 { margin: 0; }

/* A superficie alternativa. Sem esta regra `--fundo-alt` seria um
   controle declarado que nao pinta nada — o defeito que o
   `theme:tokens-check` pega. */
#processo { background: var(--fundo-alt); }

.topo { background: var(--fundo); border-bottom: 1px solid var(--filete); }
.marca { font-family: var(--display); font-weight: 800; }
.menu a { font-size: calc(.9rem * var(--escala-texto, 1)); color: var(--tinta-fraca); }
.menu a:hover, .menu a:focus-visible { color: var(--destaque-texto); }

.acao {
  background: var(--mm-cta-primary-default-background, var(--destaque));
  color: var(--mm-cta-primary-default-text, var(--fundo));
  border: 1px solid var(--mm-cta-primary-default-border, var(--destaque));
  border-radius: var(--raio-acao, 3px); padding: 13px 22px;
  font-size: calc(.92rem * var(--escala-texto, 1)); font-weight: 600; text-align: center;
}
.acao:hover, .acao:focus-visible {
  background: var(--mm-cta-primary-hover-background, var(--escuro));
  border-color: var(--mm-cta-primary-hover-border, var(--escuro));
  color: var(--mm-cta-primary-hover-text, var(--mm-cta-primary-default-text, var(--fundo)));
}
.acao--vazada { background: transparent; color: var(--destaque-texto); border-color: var(--filete); }

.passo .marcador { font-family: var(--display); font-size: calc(1.3rem * var(--escala-texto, 1)); color: var(--destaque-texto); line-height: 1; }

.numero b { font-size: calc(2.2rem * var(--escala-texto, 1)); font-weight: 800; line-height: 1; letter-spacing: -.03em; }
.numero span { color: var(--tinta-fraca); font-size: calc(.86rem * var(--escala-texto, 1)); }

.faixa { background: var(--escuro); color: var(--fundo); }
.faixa .numero span { color: color-mix(in srgb, var(--fundo) 72%, transparent); }

.campo label { font-size: calc(.84rem * var(--escala-texto, 1)); font-weight: 600; }
.campo input, .campo textarea { background: var(--fundo); border: 1px solid var(--filete); border-radius: var(--raio-campo, 3px); padding: 12px 14px; }
.campo input:focus, .campo textarea:focus { outline: none; border-color: var(--destaque); }

.rodape { background: var(--escuro); color: var(--fundo); padding-block: clamp(28px, 4vw, 48px); font-size: calc(.88rem * var(--escala-texto, 1)); }
.rodape a { color: var(--fundo); }
.rodape a:hover, .rodape a:focus-visible { text-decoration: underline; }

:focus-visible { outline: 2px solid var(--destaque); outline-offset: 3px; }

/* F-LP5 — o vocabulario universal LIDO pela folha. O `tema:novo` passou a
   declarar menu, niveis e botoes; sem estas regras os campos apareceriam no
   painel e nao mudariam nada na pagina (o `theme:tokens-check` reprova). Toda
   leitura de papel leva reserva: e' o que a folha ja' desenhava. */
.topo { background: var(--p-menu-fundo, var(--p-fundo)); }
.menu a { color: var(--p-menu-texto, var(--p-tinta-fraca)); background: var(--p-menu-fundo-selecao, transparent); }
.menu a:hover, .menu a:focus-visible { color: var(--p-menu-texto-selecao, var(--p-destaque-texto)); background: var(--p-menu-fundo-selecao, transparent); }
.menu a[aria-current] { background: var(--p-menu-fundo-ativo, transparent); color: var(--p-menu-texto-ativo, var(--p-tinta-fraca)); }

h1 { font-family: var(--p-texto-h1-fonte, var(--display)); font-weight: var(--p-texto-h1-peso, 800); }
h2 { font-family: var(--p-texto-h2-fonte, var(--display)); font-weight: var(--p-texto-h2-peso, 800); }
h3 { font-family: var(--p-texto-h3-fonte, var(--texto)); font-weight: var(--p-texto-h3-peso, 600); }
h4 { font-family: var(--p-texto-h4-fonte, var(--texto)); font-weight: var(--p-texto-h4-peso, 600); font-size: var(--p-texto-h4-tamanho, calc(1.15rem * var(--escala-texto, 1))); }
h5 { font-family: var(--p-texto-h5-fonte, var(--texto)); font-weight: var(--p-texto-h5-peso, 600); font-size: var(--p-texto-h5-tamanho, calc(1rem * var(--escala-texto, 1))); }
h6 { font-family: var(--p-texto-h6-fonte, var(--texto)); font-weight: var(--p-texto-h6-peso, 600); font-size: var(--p-texto-h6-tamanho, calc(.88rem * var(--escala-texto, 1))); }
p { font-family: var(--p-texto-p-fonte, var(--texto)); font-weight: var(--p-texto-p-peso, 400); font-size: var(--p-texto-p-tamanho, calc(1rem * var(--escala-texto, 1))); }

.acao { background: var(--p-botao-principal-fundo, var(--p-destaque)); color: var(--p-botao-principal-texto, var(--p-fundo)); border-color: var(--p-botao-principal-borda, var(--p-destaque)); border-width: var(--p-botao-principal-espessura, 1px); border-style: solid; }
.acao:hover, .acao:focus-visible { background: var(--p-botao-principal-selecao-fundo, var(--p-escuro)); color: var(--p-botao-principal-selecao-texto, var(--p-fundo)); border-color: var(--p-botao-principal-selecao-borda, var(--p-escuro)); border-width: var(--p-botao-principal-selecao-espessura, 1px); }
.acao:active, .acao[aria-current] { background: var(--p-botao-principal-ativo-fundo, var(--p-escuro)); color: var(--p-botao-principal-ativo-texto, var(--p-fundo)); border-color: var(--p-botao-principal-ativo-borda, var(--p-escuro)); border-width: var(--p-botao-principal-ativo-espessura, 1px); }
.acao--vazada { background: var(--p-botao-secundario-fundo, transparent); color: var(--p-botao-secundario-texto, var(--p-destaque-texto)); border-color: var(--p-botao-secundario-borda, var(--filete)); border-width: var(--p-botao-secundario-espessura, 1px); border-style: solid; }
.acao--vazada:hover, .acao--vazada:focus-visible { background: var(--p-botao-secundario-selecao-fundo, transparent); color: var(--p-botao-secundario-selecao-texto, var(--p-tinta)); border-color: var(--p-botao-secundario-selecao-borda, var(--p-tinta)); border-width: var(--p-botao-secundario-selecao-espessura, 1px); }
.acao--vazada:active, .acao--vazada[aria-current] { background: var(--p-botao-secundario-ativo-fundo, transparent); color: var(--p-botao-secundario-ativo-texto, var(--p-tinta)); border-color: var(--p-botao-secundario-ativo-borda, var(--p-tinta)); border-width: var(--p-botao-secundario-ativo-espessura, 1px); }

.apoio { text-transform: none; letter-spacing: 0; font-size: calc(.9rem * var(--escala-texto, 1)); }