/* ==========================================================================
   components.css — botões, cards, icon-box, image-box, formulários
   ========================================================================== */

/* --------------------------------------------------------------------------
   Botões
   -------------------------------------------------------------------------- */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-3);
  padding: 10px 50px;
  border-radius: var(--raio-pilula);
  font-size: var(--texto-botao);
  font-weight: var(--peso-forte);
  line-height: 1.3;
  color: var(--nexa-branco);
  text-align: center;
  box-shadow: var(--sombra-botao);
  transition: transform var(--transicao), filter var(--transicao),
              box-shadow var(--transicao);
}

.botao:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow: 0 6px 18px -4px rgba(0, 0, 0, 0.28);
}

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

.botao--primario {
  background-color: var(--nexa-primario);
}

.botao--secundario {
  background-color: var(--nexa-secundario);
}

.botao--claro {
  background-color: var(--nexa-cinza-campo);
  color: var(--nexa-texto);
  border-radius: 30px;
}

.botao--vazado {
  background-color: transparent;
  border: 2px solid currentColor;
  box-shadow: none;
}

.botao-grupo {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-9);
  padding-top: var(--esp-4);
}

@media (max-width: 767px) {
  .botao-grupo {
    flex-direction: column;
    gap: var(--esp-3);
  }

  .botao {
    width: 100%;
    padding-inline: var(--esp-6);
  }
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

.card {
  background-color: var(--nexa-branco);
  border-radius: var(--raio-card);
  box-shadow: var(--sombra-card);
  padding: var(--esp-5) var(--esp-10);
}

.card--estreito {
  padding: var(--esp-5) 1.75rem;
}

.card-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  align-items: stretch;
}

/* --------------------------------------------------------------------------
   Icon-box
   -------------------------------------------------------------------------- */

.icone-box {
  display: flex;
  flex-direction: column;
  gap: 9px;
  height: 100%;
}

.icone-box__icone {
  display: grid;
  place-items: center;
  width: fit-content;
  padding: 7px;
  border-radius: var(--raio-icone);
  background-color: var(--nexa-icone-fundo);
  color: var(--nexa-icone-cor);
}

.icone-box__icone svg {
  width: 35px;
  height: 35px;
  fill: currentColor;
}

.icone-box__titulo {
  font-size: var(--texto-card);
  font-weight: var(--peso-forte);
  color: var(--nexa-texto);
  margin-bottom: 5px;
}

.icone-box__texto {
  font-size: var(--texto-corpo);
  font-weight: var(--peso-normal);
  text-align: justify;
}

/* Variante horizontal — usada no destaque numérico */
.icone-box--horizontal {
  flex-direction: row;
  align-items: center;
  gap: 22px;
}

.icone-box--horizontal .icone-box__icone {
  padding: 6px;
  border-radius: 13px;
  flex-shrink: 0;
}

.icone-box--horizontal .icone-box__icone svg {
  width: 44px;
  height: 44px;
}

.icone-box--horizontal .icone-box__titulo {
  font-size: var(--texto-titulo);
  color: var(--nexa-icone-cor);
  margin-bottom: 0;
}

.icone-box--horizontal .icone-box__titulo small {
  font-size: 18px;
  font-weight: var(--peso-normal);
  color: var(--nexa-texto);
}

@media (max-width: 767px) {
  .icone-box--horizontal {
    flex-direction: column;
    text-align: center;
  }

  .icone-box--horizontal .icone-box__titulo small {
    font-size: 15px;
  }
}

/* --------------------------------------------------------------------------
   Image-box — cards da equipe
   -------------------------------------------------------------------------- */

.pessoa {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--esp-3);
  text-align: center;
  height: 100%;
}

.pessoa__foto {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  object-fit: cover;
  background-color: var(--nexa-icone-fundo);
}

/* Placeholder enquanto as fotos da equipe não chegam */
.pessoa__foto--vazia {
  display: grid;
  place-items: center;
  color: var(--nexa-icone-cor);
  font-size: 2.5rem;
  font-weight: var(--peso-semi);
}

.pessoa__nome {
  font-size: 1.125rem;
  font-weight: var(--peso-semi);
  color: var(--nexa-texto);
}

/* Cor padrão do texto: o verde que eu havia usado não existia no original
   e reprovava em contraste. */
.pessoa__cargo {
  font-size: var(--texto-pequeno);
  font-weight: var(--peso-normal);
  color: var(--nexa-texto);
}

/* --------------------------------------------------------------------------
   Lista com ícone (icon-list)
   -------------------------------------------------------------------------- */

.lista-icone {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lista-icone li {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
}

.lista-icone svg {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  fill: currentColor;
}

/* --------------------------------------------------------------------------
   Card de projeto
   -------------------------------------------------------------------------- */

.projeto {
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
  height: 100%;
}

/* Ano — alinhado à direita, puxado sobre o título (margem negativa
   reproduz o -20px do Elementor) */
.projeto__ano {
  align-self: flex-end;
  font-size: 16px;
  font-weight: var(--peso-semi);
  color: var(--nexa-selo-texto);
  background-color: var(--nexa-selo-fundo);
  border-radius: 30px;
  padding: 4px 12px;
  margin-bottom: -20px;
  font-variant-numeric: tabular-nums;
}

.projeto__nome {
  font-size: var(--texto-projeto);
  font-weight: var(--peso-semi);
  color: var(--nexa-preto);
}

.projeto__meta {
  font-size: var(--texto-pequeno);
  color: var(--nexa-texto);
  font-weight: var(--peso-medio);
  padding-bottom: 8px;
}

.projeto__descricao {
  font-size: var(--texto-corpo);
  flex-grow: 1;
}

.projeto__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-3);
  margin-top: var(--esp-2);
}

.projeto__acoes .botao {
  font-size: 1rem;
  padding: 8px 24px;
}

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

.formulario {
  display: grid;
  gap: var(--esp-4);
}

.campo {
  display: flex;
  flex-direction: column;
}

/* Métricas medidas no original: label 18px/18px com 8px abaixo e 20px à esquerda. */
.campo__label {
  padding: 0 0 8px 20px;
  font-size: 16px;
  line-height: 18px;
  font-weight: var(--peso-normal);
}

/* Campo: 15px/21px com 8px de recuo vertical → 40px de altura, como no original. */
.campo__controle {
  width: 100%;
  padding: 8px 16px;
  border: 1px solid transparent;
  border-radius: var(--raio-campo);
  background-color: var(--nexa-branco);
  box-shadow: var(--sombra-campo);
  font-size: 15px;
  line-height: 21px;
  transition: border-color var(--transicao), box-shadow var(--transicao);
}

.campo__controle::placeholder {
  color: rgba(29, 29, 27, 0.5);
}

.campo__controle:focus {
  outline: none;
  border-color: var(--nexa-primario);
  box-shadow: var(--sombra-campo), 0 0 0 3px rgba(0, 208, 255, 0.35);
}

.campo__controle:user-invalid {
  border-color: #C0392B;
}

textarea.campo__controle {
  padding: 5px 14px;
  min-height: 95px;
  resize: vertical;
}

/* Botão de envio: 24px/24px com 8px de recuo → 40px, como no original.
   Não usa as medidas dos botões de destaque da home. */
.formulario .botao {
  font-size: 24px;
  line-height: 24px;
  font-weight: var(--peso-forte);
  padding: 8px 24px;
  border-radius: 20px;
}

.opcoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-4);
  padding-left: 20px;
}

.opcao {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  font-size: var(--texto-pequeno);
}

.opcao input {
  accent-color: var(--nexa-primario);
  width: 1.05rem;
  height: 1.05rem;
}

/* Honeypot anti-spam — invisível para pessoas, visível para robôs */
.armadilha {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Divisor decorativo
   -------------------------------------------------------------------------- */

/* O original renderiza o divisor a ~833px de largura (20px de altura),
   não à largura do contêiner. */
.divisor {
  display: block;
  width: 100%;
  max-width: 833px;
  height: auto;
  margin: var(--esp-12) auto;
}

/* --------------------------------------------------------------------------
   Projeto em destaque
   Reservado ao projeto em execução: é o único com registro fotográfico,
   o de maior alcance (1.200 beneficiárias) e o financiado por emenda.
   A distinção vem da escala e das fotos, não de ornamento novo.
   -------------------------------------------------------------------------- */

.projeto-destaque {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--esp-8);
  align-items: center;
}

.projeto-destaque .projeto {
  gap: var(--esp-3);
}

/* Selo de projeto ativo: verde, em contraste com o ano azul dos concluídos.
   Aqui ele rotula o estado do projeto, então vem antes do título — não é
   o canto discreto que o ano ocupa nos cards concluídos. */
.projeto__ano--ativo {
  align-self: flex-start;
  margin-bottom: 0;
  color: var(--nexa-verde-aa);
  background-color: var(--nexa-icone-fundo);
}

/* Ação única: não precisa ocupar a coluna inteira, mesmo onde a página
   empilha os botões dos demais cards. */
.projeto-destaque .projeto__acoes {
  flex-direction: row;
  align-items: flex-start;
}

.projeto-destaque .projeto__acoes .botao {
  width: auto;
}

.projeto-destaque .projeto__descricao {
  flex-grow: 0;
}

/* Cursos oferecidos */
.cursos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
  list-style: none;
  margin: var(--esp-1) 0 0;
  padding: 0;
}

.cursos li {
  font-size: var(--texto-pequeno);
  font-weight: var(--peso-medio);
  color: var(--nexa-texto);
  background-color: var(--nexa-cinza-campo);
  border: 1px solid var(--nexa-cinza-linha);
  border-radius: var(--raio-pilula);
  padding: 3px 12px;
}

/* Galeria do projeto */
.galeria {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: var(--esp-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* A primeira foto ocupa a coluna inteira: é o registro da turma, o mais amplo */
.galeria li:first-child {
  grid-row: span 2;
}

.galeria img {
  width: 100%;
  height: 100%;
  min-height: 130px;
  object-fit: cover;
  border-radius: var(--raio-icone);
  background-color: var(--nexa-cinza-campo);
}

@media (max-width: 1024px) {
  .projeto-destaque {
    grid-template-columns: 1fr;
    gap: var(--esp-6);
  }

  .galeria {
    grid-template-rows: none;
  }

  .galeria li:first-child {
    grid-row: auto;
    grid-column: span 2;
  }

  .galeria img {
    min-height: 180px;
  }
}

@media (max-width: 767px) {
  .galeria img {
    min-height: 150px;
  }
}

/* --------------------------------------------------------------------------
   Selos de situação e pendência
   Compartilhados entre o portal da transparência e as páginas de projeto.
   -------------------------------------------------------------------------- */

.selo {
  display: inline-block;
  font-size: var(--texto-pequeno);
  font-weight: var(--peso-semi);
  padding: 4px 14px;
  border-radius: var(--raio-pilula);
}

.selo--execucao {
  color: var(--nexa-verde-aa);
  background-color: var(--nexa-icone-fundo);
}

/* Campo ainda não fornecido pelo Instituto: marcado, nunca em branco. */
.pendente {
  display: inline-block;
  font-size: var(--texto-pequeno);
  font-weight: var(--peso-medio);
  color: #5E480F;
  background-color: #FBF3D6;
  padding: 4px 14px;
  border-radius: var(--raio-pilula);
}