/* ==========================================================================
   paginas.css - estilos das paginas internas
   (demandas, contato, obrigado, o-que-voce-quer-fazer)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Faixa padrao das paginas internas
   -------------------------------------------------------------------------- */
.pagina-interna {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 80px 0;
  background-image: url("../assets/imagens/textura-faixa.png");
  background-repeat: repeat;
}

.pagina-interna__voltar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 24px;
  font-family: var(--fonte-titulo);
  font-size: 14px;
  font-weight: 600;
  color: var(--cor-clara);
  transition: color var(--transicao);
}

.pagina-interna__voltar:hover,
.pagina-interna__voltar:focus-visible {
  color: var(--cor-secundaria);
}

.pagina-interna__titulo {
  font-family: var(--fonte-titulo);
  font-size: 26px;
  font-weight: 800;
  color: var(--cor-clara);
}

.pagina-interna__subtitulo {
  max-width: 720px;
  margin-top: 8px;
  font-family: var(--fonte-texto);
  font-size: 16px;
  color: var(--cor-clara);
  opacity: 0.85;
}

/* --------------------------------------------------------------------------
   2. Formulario de demandas
   -------------------------------------------------------------------------- */
.formulario-demanda {
  display: flex;
  flex-direction: column;
  gap: 22px;
  width: 100%;
  margin-top: 28px;
}

.formulario-demanda__linha {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.formulario-demanda__linha--completa {
  grid-template-columns: 1fr;
}

.formulario-demanda .campo__rotulo {
  color: var(--cor-clara);
}

.formulario-demanda .campo__ajuda {
  color: rgba(224, 226, 230, 0.75);
}

.formulario-demanda .campo__controle {
  padding: 15px 24px 17px;
  background-color: #F6F7FA;
  border: 1px solid #EAECF1;
  border-radius: 6px;
  color: #0D1427;
}

.formulario-demanda .campo__erro {
  color: #FFC9C2;
}

/* Endereco: seletor + campo dependente (bairro OU comunidade).
   Classes proprias, para nao mexer em .campo, .campo__controle
   nem na grade .formulario-demanda__linha, que ja funcionam. */
.formulario-demanda .campo--endereco,
.formulario-demanda .campo--endereco-detalhe {
  min-width: 0;
}

/* Escondido de verdade: .campo usa display:flex e venceria o [hidden]
   do navegador, deixando um espaco vazio na coluna. */
.formulario-demanda .campo--endereco-detalhe[hidden] {
  display: none;
}

.formulario-demanda__rodape {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.formulario-demanda .botao {
  padding: 17px 28px 16px;
  font-family: var(--fonte-texto);
  font-weight: 500;
  border-radius: 8px;
}


/* Botao Anexar arquivos */
.formulario-demanda .campo-arquivo__botao {
  background-color: var(--cor-secundaria);
  color: #FFFFFF;
  border-color: var(--cor-secundaria);
}

.formulario-demanda .campo-arquivo__botao svg {
  color: #FFFFFF;
  stroke: currentColor;
}

.formulario-demanda .campo-arquivo__botao:hover,
.formulario-demanda .campo-arquivo__botao:focus-visible {
  background-color: var(--cor-secundaria-esc);
  border-color: var(--cor-secundaria-esc);
  color: #FFFFFF;
}

/* --------------------------------------------------------------------------
   3. Pagina de agradecimento
   -------------------------------------------------------------------------- */
.agradecimento {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  text-align: center;

  /* Sobe todo o bloco para ficar visualmente mais centralizado */
  transform: translateY(-80px);
}

.agradecimento__icone {
  width: 96px;
  height: 96px;
  margin: 0 auto 24px;
  color: var(--cor-secundaria);
  fill: currentColor;
}

.agradecimento__icone svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.agradecimento__titulo {
  font-family: var(--fonte-titulo);
  font-size: 40px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--cor-clara);
}

.agradecimento__texto {
  margin-top: 16px;
  font-family: var(--fonte-texto);
  font-size: 18px;
  color: var(--cor-clara);
}

.agradecimento__protocolo {
  display: inline-block;
  padding: 10px 18px;
  margin-top: 22px;
  font-family: var(--fonte-titulo);
  font-size: 16px;
  font-weight: 700;
  color: var(--cor-escura);
  background-color: var(--cor-clara);
  border-radius: 8px;
}

.agradecimento__acoes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-top: 32px;
}

/* --------------------------------------------------------------------------
   4. Pagina de contato
   -------------------------------------------------------------------------- */
.contato__grade {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 32px;
}

.card-contato {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 32px 24px;
  text-align: center;
  background-color: var(--cor-branco);
  border-radius: var(--raio-card);
  box-shadow: var(--sombra-card);
}

.card-contato__icone {
  width: 56px;
  height: 56px;
  color: var(--cor-primaria);
  fill: currentColor;
}

.card-contato__icone svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.card-contato__titulo {
  font-family: var(--fonte-titulo);
  font-size: 18px;
  font-weight: 700;
  color: var(--cor-primaria);
}

.card-contato__texto {
  font-family: var(--fonte-texto);
  font-size: 16px;
  color: var(--cor-texto);
}

.card-contato__link {
  font-family: var(--fonte-titulo);
  font-size: 16px;
  font-weight: 600;
  color: var(--cor-secundaria);
  transition: color var(--transicao);
}

.card-contato__link:hover,
.card-contato__link:focus-visible {
  color: var(--cor-secundaria-esc);
}

/* --------------------------------------------------------------------------
   5. Pagina "O que voce quer fazer"
   -------------------------------------------------------------------------- */
.escolha {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 60px 0;
  background-color: var(--cor-escura);
  background-image: url("../assets/imagens/fundo-escolha.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.escolha__titulo {
  font-family: var(--fonte-titulo);
  font-size: 70px;
  font-weight: 700;
  text-align: center;
  color: #FBCC17;
}

.escolha__subtitulo {
  margin-top: 10px;
  font-family: var(--fonte-texto);
  font-size: 47px;
  font-weight: 400;
  text-align: center;
  color: var(--cor-clara);
}

.escolha__opcoes {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 79px;
  margin-top: 48px;
}

.escolha__botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 360px;
  height: 262px;
  padding: 16px;
  font-family: var(--fonte-titulo);
  font-size: 52px;
  font-weight: 700;
  line-height: 73px;
  text-align: center;
  color: #1B4792;
  fill: #1B4792;
  background-color: #E4E4E4;
  border-radius: 31px;
  transition: transform var(--transicao), background-color var(--transicao);
}

.escolha__botao:hover,
.escolha__botao:focus-visible {
  background-color: var(--cor-branco);
  transform: translateY(-6px);
}

.escolha__botao[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.escolha__nota {
  margin-top: 28px;
  font-family: var(--fonte-texto);
  font-size: 14px;
  text-align: center;
  color: var(--cor-clara);
  opacity: 0.8;
}

/* --------------------------------------------------------------------------
   6. Paginas de projeto (materias)
   Classes novas, usadas somente em paginas/projetos/*.html.
   Reaproveitam os tokens, os botoes e o rodape ja existentes.
   -------------------------------------------------------------------------- */
.materia-topo {
  /* A faixa passou a conter somente a logo: a altura e a logo + respiro. */
  padding: clamp(30px, 6vw, 42px) 0;
  text-align: center;
  background-color: var(--cor-primaria);
  background-image: url("../assets/imagens/textura-faixa.png");
  background-repeat: repeat;
}

.materia-topo__interno {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.materia-topo__logo {
  width: 320px;
  max-width: 80%;
}

.materia-topo__titulo {
  max-width: 900px;
  font-family: var(--fonte-titulo);
  font-size: 38px;
  font-weight: 800;
  line-height: 1.15em;
  color: var(--cor-branco);
}

.materia-topo__resumo {
  max-width: 760px;
  font-family: var(--fonte-titulo);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.5em;
  color: var(--cor-clara);
}

.materia {
  padding: 20px 0 80px;
  background-color: var(--cor-cinza-fundo);
}

.materia__interno {
  max-width: 860px;
}

.materia__capa {
  width: 100%;
  margin-top: 0;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 14px;
  box-shadow: var(--sombra-card);
}

/* O H1 saiu da faixa azul e passou a ficar depois da foto, ja dentro da
   secao clara. A cor branca herdada do topo ficaria ilegivel aqui, entao
   ele usa a mesma cor que os subtitulos desta secao ja usam. */
.materia__interno .materia-topo__titulo {
  margin-top: 30px;
  color: var(--cor-primaria);
}

.materia__corpo {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-top: 40px;
}

.materia__texto {
  font-family: var(--fonte-texto);
  font-size: 17px;
  line-height: 1.7em;
  color: var(--cor-texto);
}

.materia__subtitulo {
  margin-top: 18px;
  font-family: var(--fonte-titulo);
  font-size: 24px;
  font-weight: 800;
  line-height: 1.25em;
  color: var(--cor-primaria);
}

.materia__topicos {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.materia__topico {
  padding: 18px 22px;
  font-family: var(--fonte-texto);
  font-size: 16px;
  line-height: 1.6em;
  color: var(--cor-texto);
  background-color: var(--cor-branco);
  border-left: 4px solid var(--cor-secundaria);
  border-radius: 0 12px 12px 0;
}

.materia__topico b {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  color: var(--cor-primaria);
}

.materia__assinatura {
  margin-top: 6px;
  font-family: var(--fonte-titulo);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.4em;
  color: var(--cor-secundaria);
}

.materia__navegacao {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 44px;
}

/* Chamada final, no mesmo espirito da faixa da pagina inicial */
.materia-cta {
  padding: 60px 0;
  background-color: var(--cor-primaria);
}

.materia-cta__interno {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
}

.materia-cta__texto-bloco {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 620px;
}

.materia-cta__titulo {
  font-family: var(--fonte-titulo);
  font-size: 30px;
  font-weight: 800;
  line-height: 1.15em;
  color: var(--cor-branco);
}

.materia-cta__descricao {
  font-family: var(--fonte-texto);
  font-size: 17px;
  line-height: 1.5em;
  color: var(--cor-clara);
}

.materia-cta__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* O link de voltar herda o estilo ja existente, so muda o alinhamento aqui */
.materia-topo .pagina-interna__voltar {
  align-self: flex-start;
  margin-bottom: 0;
}