/**
 * Credenciamento de imprensa — só o miolo.
 *
 * Reset, base e utilitários vêm de `compartilhado/css/base.css`; topo e rodapé
 * de `topo.css` e `rodape.css`. Esta folha entra depois deles e depois do
 * `tokens.css` desta pasta.
 *
 * A página é um DOCUMENTO com um formulário no meio, e o layout parte disso: a
 * coluna fecha em 1120px, e não nos 1560 do container do site, porque aqui a
 * linha longa custa leitura — são 25 regras para ler antes de enviar os dados.
 *
 * Caminhos de imagem sempre relativos (regra do CLAUDE.md).
 */

.cred {
  padding-bottom: clamp(3rem, 6vw, 6rem);
  background: var(--c-fundo);
  color: var(--c-texto);
  font-size: var(--c-texto-corpo);
  line-height: var(--c-lh-corpo);
}

.cred__container {
  width: min(100% - 2 * var(--gutter), 1120px);
  margin-inline: auto;
}

/* ==========================================================================
   abertura
   ========================================================================== */

.cred__abertura {
  padding-block: clamp(2.5rem, 5vw, 5rem) clamp(2rem, 3.5vw, 3.5rem);
  text-align: center;
}

.cred__chapeu {
  margin: 0 0 clamp(0.75rem, 1.2vw, 1.25rem);
  font-size: var(--c-texto-chapeu);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-marca-escura);
}

.cred__titulo {
  margin: 0;
  font-family: var(--fonte-display);
  font-size: var(--c-texto-titulo);
  font-weight: 900;
  /* A condensada do site já vem apertada; 0.9 é o que o desenho pede quando o
     título quebra em duas linhas no celular. */
  line-height: 0.9;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--c-marca);
}

/*
 * O selo não é enfeite: "exclusivo para veículos comerciais" é o primeiro filtro
 * do credenciamento, e quem não é veículo comercial não devia nem preencher.
 * Por isso ele vem antes da intro e com peso de etiqueta, não de legenda.
 */
.cred__selo {
  display: inline-block;
  margin: clamp(1rem, 1.6vw, 1.5rem) 0 0;
  padding: 0.45em 1.1em;
  font-size: var(--c-texto-apoio);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-sobre-marca);
  background: var(--c-marca-escura);
  border-radius: 999px;
}

.cred__intro {
  max-width: 62ch;
  margin: clamp(1.25rem, 2vw, 1.75rem) auto 0;
  color: var(--c-apoio);
  text-wrap: pretty;
}

/* ==========================================================================
   cartão do formulário
   --------------------------------------------------------------------------
   A única superfície branca e elevada da página. É o que separa "o que você
   faz" de "o que você lê" — todo o resto mora direto sobre o creme.
   ========================================================================== */

.form-cartao {
  padding: clamp(1.5rem, 3vw, 3rem);
  background: var(--c-superficie);
  border: 1px solid var(--c-borda);
  border-radius: var(--c-raio);
  box-shadow: var(--c-sombra);
}

.form-cartao__titulo {
  margin: 0;
  font-size: var(--c-texto-secao);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.form-cartao__apoio {
  margin: 0.5em 0 clamp(1.5rem, 2.5vw, 2.25rem);
  font-size: var(--c-texto-apoio);
  color: var(--c-apoio);
}

.form-cartao__nota {
  margin: clamp(1.25rem, 2vw, 1.75rem) 0 0;
  padding-top: clamp(1rem, 1.6vw, 1.5rem);
  border-top: 1px solid var(--c-borda);
  font-size: var(--c-texto-apoio);
  color: var(--c-apoio);
}

/* Estado sem formulário (id ainda não configurado) e fallback de `noscript`. */
.form-cartao__aviso {
  margin: 0;
  padding: clamp(1rem, 2vw, 1.5rem);
  font-size: var(--c-texto-apoio);
  color: var(--c-nao);
  background: var(--c-nao-fundo);
  border: 1px solid currentColor;
  border-radius: var(--c-raio-p);
}

/* ==========================================================================
   formulário do Mautic
   --------------------------------------------------------------------------
   O HTML é injetado por `generate.js` e vem com um `<style>` próprio, que entra
   no DOM DEPOIS desta folha — então empate de especificidade o Mautic ganha.
   Por isso toda regra daqui para baixo é prefixada por `.form-cartao`: sobe de
   (0,1,0) para (0,2,0) e passa a valer sem `!important`.
   ========================================================================== */

.form-cartao .mauticform_wrapper {
  /* O embed trava em 600px e centra; aqui quem manda na largura é o cartão. */
  max-width: none;
  margin: 0;
}

.form-cartao .mauticform-name,
.form-cartao .mauticform-description {
  /* O título e a descrição do form já são o `<h2>` e o apoio do cartão. */
  display: none;
}

/*
 * Duas colunas. A primeira linha (nome completo) e o e-mail atravessam as duas
 * porque são os campos longos; o resto — RG, CPF, veículo, CNPJ, função,
 * evento — cabe em meia linha e emparelha.
 *
 * Ancorado no TIPO do campo e na posição, nunca no `mauticform-field-N`: o
 * número muda toda vez que alguém reordena o formulário no Mautic.
 */
.form-cartao .mauticform-page-wrapper {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 1.6vw, 1.5rem);
}

.form-cartao .mauticform-page-wrapper > .mauticform-row:first-child,
.form-cartao .mauticform-page-wrapper > .mauticform-email,
.form-cartao .mauticform-page-wrapper > .mauticform-textarea,
.form-cartao .mauticform-page-wrapper > .mauticform-button-wrapper {
  grid-column: 1 / -1;
}

.form-cartao .mauticform-row {
  margin-bottom: 0;
}

.form-cartao .mauticform-label {
  display: block;
  margin-bottom: 0.4em;
  font-size: var(--c-texto-apoio);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-texto);
}

.form-cartao .mauticform-row.mauticform-required .mauticform-label:after {
  content: ' *';
  color: var(--c-nao);
}

.form-cartao .mauticform-helpmessage {
  margin-bottom: 0.4em;
  font-size: var(--c-texto-apoio);
  color: var(--c-apoio);
}

.form-cartao .mauticform-input,
.form-cartao .mauticform-selectbox,
.form-cartao .mauticform-textarea {
  width: 100%;
  /* 44px de alvo de toque com folga, e 1rem de corpo para o iOS não dar zoom
     ao focar o campo. */
  min-height: 3rem;
  padding: 0.7em 0.9em;
  font-family: inherit;
  font-size: 1rem;
  color: var(--c-texto);
  background: var(--c-superficie);
  border: 1px solid var(--c-borda);
  border-radius: var(--c-raio-p);
  box-shadow: none;
  transition:
    border-color var(--dur-rapida) var(--ease-padrao),
    box-shadow var(--dur-rapida) var(--ease-padrao);
}

.form-cartao .mauticform-input:hover,
.form-cartao .mauticform-selectbox:hover {
  border-color: var(--c-apoio);
}

.form-cartao .mauticform-input:focus-visible,
.form-cartao .mauticform-selectbox:focus-visible,
.form-cartao .mauticform-textarea:focus-visible {
  outline: 2px solid var(--c-azul);
  outline-offset: 1px;
  border-color: var(--c-azul);
}

/*
 * O Mautic entrega CPF e CNPJ como `type="number"`. Isso já rende setinha de
 * incremento num campo que não é quantidade — e, pior, come o zero à esquerda.
 * Some com a setinha; o campo em si precisa virar texto do lado do Mautic
 * (ver a pendência aberta para a assessoria).
 */
.form-cartao .mauticform-input[type='number'] {
  appearance: textfield;
}

.form-cartao .mauticform-input[type='number']::-webkit-outer-spin-button,
.form-cartao .mauticform-input[type='number']::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
}

.form-cartao .mauticform-errormsg {
  margin-top: 0.35em;
  font-size: var(--c-texto-apoio);
  font-weight: 500;
  color: var(--c-nao);
}

/*
 * As caixas de erro e de sucesso vêm SEMPRE no HTML do Mautic, vazias, e só
 * ganham texto depois do envio. Pintadas o tempo todo, viravam duas tarjas de
 * cor no topo do formulário sem dizer nada — daí o `:empty` sumir com elas.
 */
.form-cartao .mauticform-error:empty,
.form-cartao .mauticform-message:empty {
  display: none;
}

.form-cartao .mauticform-error,
.form-cartao .mauticform-message {
  margin-bottom: clamp(1rem, 1.6vw, 1.5rem);
  padding: 0.9em 1.1em;
  font-size: var(--c-texto-apoio);
  border-radius: var(--c-raio-p);
}

.form-cartao .mauticform-error {
  color: var(--c-nao);
  background: var(--c-nao-fundo);
}

.form-cartao .mauticform-message {
  color: var(--c-pode);
  background: var(--c-pode-fundo);
}

/* O botão do Mautic vem com `btn btn-ghost`, que é o tema de admin dele. */
.form-cartao .mauticform-button-wrapper .mauticform-button,
.form-cartao .mauticform-button-wrapper .mauticform-button.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: 0.8em 2.6em;
  font-family: inherit;
  font-size: var(--c-texto-corpo);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: normal;
  color: var(--c-sobre-marca);
  background: var(--c-marca-escura);
  border: 2px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  transition:
    transform var(--dur-rapida) var(--ease-pop),
    background-color var(--dur-rapida) var(--ease-padrao);
}

.form-cartao .mauticform-button-wrapper .mauticform-button:hover,
.form-cartao .mauticform-button-wrapper .mauticform-button:focus-visible {
  background: var(--c-marca);
  transform: scale(1.02);
}

.form-cartao .mauticform-button-wrapper .mauticform-button:active {
  transform: scale(0.98);
}

.form-cartao .mauticform-button-wrapper .mauticform-button[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

:root[data-contraste='alto'] .form-cartao .mauticform-button-wrapper .mauticform-button {
  border-color: #fff;
}

/* ==========================================================================
   orientações
   ========================================================================== */

.orientacoes {
  margin-top: clamp(3rem, 6vw, 6rem);
}

.cred__secao {
  margin: 0 0 clamp(2rem, 3.5vw, 3rem);
  font-size: var(--c-texto-secao);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.bloco + .bloco {
  margin-top: clamp(2.5rem, 4.5vw, 4.5rem);
}

/*
 * O número do bloco é da fonte do documento ("1)", "2)", "3)") e serve de
 * referência quando a assessoria cita um item por telefone. Fica na sarjeta,
 * fora da coluna de texto, para não empurrar o título.
 */
.bloco__titulo {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 0.6em;
  margin: 0 0 clamp(0.75rem, 1.2vw, 1.1rem);
  font-size: var(--c-texto-bloco);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.bloco__ordem {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9em;
  height: 1.9em;
  font-family: var(--fonte-display);
  font-size: 0.85em;
  font-weight: 900;
  color: var(--c-sobre-marca);
  background: var(--c-marca-escura);
  border-radius: 50%;
}

.bloco__apoio {
  max-width: 62ch;
  margin: 0 0 clamp(1rem, 1.8vw, 1.5rem);
  font-size: var(--c-texto-apoio);
  color: var(--c-apoio);
}

/* Lista de regras corridas — item 1 do documento. */
.regras {
  max-width: 68ch;
  margin: 0;
  padding: 0;
  list-style: none;
}

.regras__item {
  position: relative;
  padding-left: 1.6em;
}

.regras__item + .regras__item {
  margin-top: 0.7em;
}

.regras__item::before {
  content: '';
  position: absolute;
  left: 0;
  /* Meia altura de linha menos meio marcador: alinha com a primeira linha do
     texto, e não com o topo da caixa. */
  top: calc(var(--c-lh-corpo) * 0.5em - 0.2em);
  width: 0.4em;
  height: 0.4em;
  background: var(--c-marca);
  border-radius: 50%;
}

/* ==========================================================================
   critério de profissionais por empresa
   --------------------------------------------------------------------------
   No documento isto é uma lista, mas o conteúdo é TABELA: tipo de veículo →
   equipe que cabe. Quem lê procura a própria linha, não lê as cinco. Um cartão
   por veículo, com a contagem separada do cargo, resolve a consulta de relance.
   ========================================================================== */

.criterios {
  display: grid;
  /* 19rem faz cinco cartões caírem em 3 + 2 na coluna de 1120px, em vez de
     4 + 1 com um órfão na segunda fileira. */
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: clamp(0.75rem, 1.4vw, 1.25rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.criterio {
  padding: clamp(1rem, 1.6vw, 1.4rem);
  background: var(--c-superficie);
  border: 1px solid var(--c-borda);
  border-radius: var(--c-raio-p);
}

.criterio__veiculo {
  margin: 0 0 0.7em;
  padding-bottom: 0.6em;
  border-bottom: 1px solid var(--c-borda);
  font-size: var(--c-texto-cartao);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.criterio__nota {
  display: block;
  margin-top: 0.25em;
  font-size: var(--c-texto-apoio);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--c-apoio);
}

.criterio__funcoes {
  display: grid;
  gap: 0.45em;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--c-texto-apoio);
}

.criterio__funcoes li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.7em;
  align-items: baseline;
}

/* Tabular para as contagens ficarem numa coluna só, mesmo em fonte de largura
   variável. O "01" é como o documento escreve. */
.criterio__contagem {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--c-marca-escura);
}

/* ==========================================================================
   quadro de revista — o que pode e o que não pode entrar
   --------------------------------------------------------------------------
   É a peça central da página. No documento estas regras estavam em lista de
   TRÊS níveis, e ninguém lê três níveis antes de um evento; aqui cada regra
   carrega o próprio veredito.
   ========================================================================== */

.aviso-revista {
  max-width: 68ch;
  margin: 0 0 clamp(1.25rem, 2vw, 1.75rem);
  padding-left: clamp(0.9rem, 1.4vw, 1.25rem);
  border-left: 3px solid var(--c-azul);
  font-weight: 500;
}

.quadro {
  display: grid;
  /*
   * DUAS colunas, e não as três que caberiam: são quatro categorias, e em três
   * colunas "Animais" ficava órfão numa fileira só dele. Em 2×2 o quadro se lê
   * como quadro — que é o ponto — e cada regra ganha uma linha de texto mais
   * confortável.
   */
  grid-template-columns: repeat(auto-fit, minmax(27rem, 1fr));
  /* Cada quadro fica da altura do próprio conteúdo. Esticados, "Animais",
     que tem uma regra só, virava um retângulo com um palmo de vazio ao lado
     de "Equipamentos", que tem três. */
  align-items: start;
  gap: clamp(0.75rem, 1.4vw, 1.25rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.quadro__grupo {
  padding: clamp(1rem, 1.6vw, 1.4rem);
  background: var(--c-superficie);
  border: 1px solid var(--c-borda);
  border-radius: var(--c-raio-p);
}

.quadro__categoria {
  margin: 0 0 0.9em;
  font-size: var(--c-texto-cartao);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.quadro__regras {
  display: grid;
  gap: clamp(0.75rem, 1.2vw, 1rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

/*
 * Cada regra é selo + frase. O selo diz o veredito em TRÊS canais ao mesmo
 * tempo — forma (visto ou cruz), cor e palavra —, porque cor sozinha não
 * distingue nada para quem não separa vermelho de verde.
 */
.veredito {
  display: grid;
  gap: 0.5em;
  padding: 0.9em 1em;
  font-size: var(--c-texto-apoio);
  border-radius: var(--c-raio-p);
  border-left: 3px solid currentColor;
}

.veredito--pode {
  color: var(--c-pode);
  background: var(--c-pode-fundo);
}

.veredito--nao {
  color: var(--c-nao);
  background: var(--c-nao-fundo);
}

.veredito__selo {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.veredito__icone {
  flex: none;
  width: 1.05em;
  height: 1.05em;
}

/* A frase volta ao tom de texto: o colorido é o veredito, não a regra. */
.veredito__texto {
  color: var(--c-texto);
}

/* ==========================================================================
   responsivo
   ========================================================================== */

@media (width < 48rem) {
  /* Uma coluna de campo: em telas estreitas o par lado a lado deixa cada campo
     com menos de 9rem, o que não serve nem para um CPF. */
  .form-cartao .mauticform-page-wrapper {
    grid-template-columns: minmax(0, 1fr);
  }

  .form-cartao .mauticform-button-wrapper .mauticform-button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .form-cartao .mauticform-input,
  .form-cartao .mauticform-selectbox,
  .form-cartao .mauticform-textarea,
  .form-cartao .mauticform-button-wrapper .mauticform-button {
    transition: none;
  }

  .form-cartao .mauticform-button-wrapper .mauticform-button:hover,
  .form-cartao .mauticform-button-wrapper .mauticform-button:focus-visible,
  .form-cartao .mauticform-button-wrapper .mauticform-button:active {
    transform: none;
  }
}