/* -----------------------------------------------------------------------------
   Componentes

   Regra não negociável do manual, materializada em código: rótulo de botão
   sobre Intell Green é sempre var(--cor-fundo), nunca branco. Neon sobre branco dá
   1,34:1 e reprova em qualquer critério de contraste; neon sobre o preto
   institucional dá 11,63:1.
   ----------------------------------------------------------------------------- */

.botao {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  padding: var(--e-3) var(--e-5);
  border: 1px solid transparent;
  border-radius: var(--raio);
  font-family: var(--fonte-titulo);
  font-size: var(--t-corpo);
  font-weight: var(--peso-forte);
  letter-spacing: var(--letra-titulo);
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  cursor: pointer;
  transition: transform var(--duracao-rapida) var(--curva),
              background-color var(--duracao-rapida) var(--curva),
              color var(--duracao-rapida) var(--curva);
}

.botao:hover {
  opacity: 1;
  transform: translateY(-2px);
}

.botao:active {
  transform: translateY(0);
}

/* Primário: preenchimento neon com rótulo preto. */
.botao--primario {
  background: var(--intell-green);
  color: var(--preto);
}

.botao--primario:hover {
  background: var(--light-green);
  color: var(--preto);
}

/* Secundário: contorno. Herda a cor de destaque do bloco, então funciona tanto
   sobre fundo escuro quanto sobre fundo claro. */
.botao--secundario {
  background: transparent;
  border-color: var(--destaque);
  color: var(--destaque);
}

.botao--secundario:hover {
  background: var(--destaque);
  color: var(--fundo);
}

/* Discreto: para ação de menor peso, sem competir com o CTA principal. */
.botao--discreto {
  padding-inline: 0;
  background: transparent;
  color: var(--destaque);
}

.botao--discreto:hover {
  transform: translateX(3px);
}

/* --- Cartão ---------------------------------------------------------------- */

.cartao {
  padding: var(--e-5);
  background: var(--fundo-elevado);
  border: 1px solid var(--borda);
  border-radius: var(--raio-g);
}

.cartao__titulo {
  font-size: var(--t-h4);
  margin-bottom: var(--e-3);
}

.cartao__titulo a {
  color: inherit;
  text-decoration: none;
}

/* --- Rótulo de seção -------------------------------------------------------
   Texto curto em caixa alta que antecede o título, para dar contexto sem
   roubar hierarquia. */

.rotulo {
  display: inline-block;
  margin-bottom: var(--e-3);
  font-family: var(--fonte-titulo);
  font-size: var(--t-miudo);
  font-weight: var(--peso-forte);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--destaque);
}

/* --- Formulário ------------------------------------------------------------ */

.campo {
  margin-bottom: var(--e-4);
}

.campo__rotulo {
  display: block;
  margin-bottom: var(--e-2);
  font-size: var(--t-miudo);
  font-weight: var(--peso-medio);
  color: var(--texto-suave);
}

.campo__entrada {
  width: 100%;
  padding: var(--e-3) var(--e-4);
  background: var(--fundo-elevado);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  color: var(--texto);
  font-family: var(--fonte-texto);
  font-size: var(--t-corpo);
  transition: border-color var(--duracao-rapida) var(--curva);
}

.campo__entrada:focus {
  border-color: var(--destaque);
}

.campo__entrada::placeholder {
  color: var(--texto-suave);
  opacity: 0.6;
}

textarea.campo__entrada {
  resize: vertical;
  min-height: 8rem;
  line-height: var(--entrelinha-texto);
}

/* O honeypot precisa sumir da tela sem sumir do DOM: robô que lê o HTML
   preenche mesmo assim, e é essa a intenção. */
.campo--armadilha {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.aviso {
  padding: var(--e-3) var(--e-4);
  border-radius: var(--raio);
  font-size: var(--t-miudo);
}

.aviso--ok {
  background: var(--evo-green);
  color: var(--branco);
}

.aviso--erro {
  background: #7A1F1F;
  color: var(--branco);
}

/* --- Grade ----------------------------------------------------------------- */

.grade {
  display: grid;
  gap: var(--e-5);
}

.grade--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.grade--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }