/* === Importa o CSS global com variáveis, fontes, navbar, banner, rodapé === */
@import url('/css/index.css');  /* Importa estilos globais principais do site */
@import url('/css/midiaquire.css'); /* Importa media queries globais */

/* === CONTAINER DO FORMULÁRIO DE CONTATO === */
.conteudo-contato {
  max-width: 00px; /* Limita a largura máxima para evitar containers muito largos */
  margin: 2rem auto 4rem; /* Margem superior e inferior com centralização horizontal */
  padding: 1.5rem 1.5rem; /* Espaço interno ao redor do conteúdo */

  background: linear-gradient(180deg, var(--cor-escura), var(--cor-secundaria)); 
  /* Fundo com degradê vertical */

  color: var(--branco); /* Texto branco para contraste */
  text-align: center; /* Centraliza texto */

  border-radius: 12px; /* Bordas arredondadas */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* Sombra leve para destaque */
  box-sizing: border-box; /* Inclui padding e bordas no cálculo da largura */
}

.conteudo-contato h1 {
  font-size: 2rem; /* Tamanho da fonte do título */
  margin-bottom: 1rem; /* Espaço abaixo do título */
}

.conteudo-contato p {
  font-size: 1.1rem; /* Tamanho da fonte do texto */
  margin-bottom: 1.5rem; /* Espaço abaixo do parágrafo */
  line-height: 1.5; /* Espaçamento entre linhas para facilitar leitura */
}

/* === FORMULÁRIO DE CONTATO === */
.form-contato {
  display: grid; /* Layout em grid para organização */
  grid-template-columns: 1fr 1fr; /* Duas colunas de tamanhos iguais */
  gap: 1rem; /* Espaço entre colunas e linhas */
  text-align: left; /* Alinha textos à esquerda */
  width: 100%; /* Ocupa toda largura do container pai */
  box-sizing: border-box; /* Inclui padding e bordas na largura */
}

.form-contato .campo {
  display: flex; /* Flexbox para organizar label e input verticalmente */
  flex-direction: column; /* Label em cima, input embaixo */
  width: 100%; /* Ocupa toda largura disponível */
  box-sizing: border-box;
}

/* Campo nome ocupa toda a largura do formulário (as duas colunas) */
#nome {
  grid-column: 1 / -1;
}

/* Estilo dos labels */
.form-contato label {
  font-weight: 600; /* Negrito */
  margin-bottom: 0.4rem; /* Espaço abaixo do label */
  color: var(--branco); /* Cor branca */
}

/* Inputs e textarea */
.form-contato input,
.form-contato textarea {
  padding: 0.6rem 1rem; /* Espaçamento interno confortável */
  border-radius: 8px; /* Bordas arredondadas */
  border: 1px solid var(--cinza-claro); /* Borda cinza clara */
  font-size: 1rem; /* Tamanho da fonte legível */
  font-family: var(--fonte-principal); /* Fonte padrão do site */
  background-color: var(--branco); /* Fundo branco */
  color: var(--preto); /* Texto preto */
  width: 100%; /* Ocupa toda largura da célula */
  max-width: 100%; /* Limita largura máxima */
  box-sizing: border-box;
}

/* Altura dos inputs */
.form-contato input {
  height: 40px; /* Altura confortável para digitação */
}

/* Campo telefone fica na coluna da direita, alinhado à direita */
#telefone {
  justify-self: end; /* Alinha campo à direita da célula */
  max-width: 250px; /* Limita a largura para não ficar muito largo */
}

/* Textarea para mensagem */
.form-contato textarea {
  min-height: 100px; /* Altura mínima maior */
  resize: vertical; /* Permite redimensionar só verticalmente */
}

/* Campo mensagem ocupa toda largura (duas colunas) */
.form-contato .campo-full {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
}

/* Botão do formulário */
.form-contato button {
  grid-column: 1 / -1; /* Ocupa toda largura da linha */
  background-color: var(--cor-primaria); /* Cor primária do site */
  color: var(--branco); /* Texto branco */
  border: none; /* Sem borda */
  padding: 0.8rem 1.5rem; /* Espaçamento interno */
  border-radius: 25px; /* Bordas arredondadas */
  font-weight: 600; /* Negrito */
  font-size: 1.1rem; /* Fonte maior */
  cursor: pointer; /* Cursor tipo botão */
  transition: background-color 0.3s ease, transform 0.2s ease; /* Animações suaves */
  justify-self: center; /* Centraliza no grid */
  width: 160px; /* Largura fixa do botão */
  margin-top: 1rem; /* Espaço acima do botão */
}

.form-contato button:hover {
  background-color: var(--cor-primaria-escura); /* Cor mais escura no hover */
  transform: scale(1.05); /* Zoom leve */
}

/* === BOTÃO DO WHATSAPP === */
.btn-whatsapp {
  display: inline-flex; /* Flexbox inline para alinhar ícone e texto */
  align-items: center; /* Centraliza verticalmente */
  justify-content: center; /* Centraliza horizontalmente */
  gap: 0.4rem; /* Espaço entre ícone e texto */
  background-color: #25D366; /* Verde WhatsApp */
  color: white; /* Texto branco */
  font-weight: 600; /* Negrito */
  padding: 0.4rem 1rem; /* Espaçamento interno compacto */
  border-radius: 20px; /* Bordas arredondadas */
  text-decoration: none; /* Remove sublinhado */
  font-size: 0.95rem; /* Fonte menor */
  transition: background-color 0.3s ease, transform 0.2s ease; /* Transições suaves */
  cursor: pointer; /* Cursor clicável */
  width: auto; /* Largura automática conforme conteúdo */
  max-width: fit-content; /* Limita largura ao conteúdo */
  margin-top: 1rem; /* Espaço acima */
}

.btn-whatsapp i {
  font-size: 1.1rem; /* Tamanho do ícone */
}

.btn-whatsapp:hover {
  background-color: #128C4A; /* Verde mais escuro no hover */
  transform: scale(1.05); /* Zoom leve */
}

/* === SEÇÃO DE CONTATOS EXTRA === */
.contatos-extra {
  max-width: 600px; /* Largura máxima do container */
  margin: 0 auto 3rem; /* Centralizado horizontalmente, margem inferior */
  padding: 1.5rem 2rem; /* Espaço interno */
  background: linear-gradient(180deg, var(--cor-escura), var(--cor-secundaria)); /* Fundo degradê */
  color: var(--branco); /* Texto branco */
  border-radius: 12px; /* Bordas arredondadas */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* Sombra leve */
  text-align: center; /* Centraliza texto */
  display: flex; /* Flexbox para layout */
  flex-direction: column; /* Alinha itens verticalmente */
  align-items: center; /* Centraliza itens horizontalmente */
  gap: 1.2rem; /* Espaço entre itens */
  box-sizing: border-box; /* Inclui padding e bordas no cálculo da largura */
}

.contatos-extra h2 {
  width: 100%; /* Ocupa toda largura */
  margin-bottom: 1rem; /* Espaço abaixo */
  font-size: 1.8rem; /* Tamanho do título */
}

.contatos-extra p {
  margin: 0; /* Remove margens padrão */
  font-weight: 500; /* Peso médio */
  white-space: nowrap; /* Não permite quebra de linha */
  padding: 0 0.5rem; /* Espaço interno horizontal */
  border-right: 1px solid var(--branco); /* Linha vertical à direita */
}

.contatos-extra p:last-child {
  border-right: none; /* Remove borda do último elemento */
}

/* === RESPONSIVIDADE === */
@media (max-width: 768px) {
  .conteudo-contato {
    margin: 2rem 1rem 4rem; /* Margens ajustadas para telas menores */
    padding: 1rem 1rem; /* Padding reduzido */
  }

  .conteudo-contato h1 {
    font-size: 1.6rem; /* Título menor no mobile */
  }

  .form-contato {
    grid-template-columns: 1fr; /* Formulário em coluna única */
  }

  #telefone {
    justify-self: stretch; /* Campo telefone ocupa toda largura */
    max-width: 100%; /* Largura total para encaixe */
  }

  .form-contato button {
    width: 100%; /* Botão ocupa toda largura */
    justify-self: stretch; /* Estica para preencher */
  }

  .contatos-extra {
    gap: 1rem; /* Espaço menor entre itens */
    padding: 1rem 1rem; /* Padding reduzido */
  }

  .contatos-extra p {
    border: none; /* Remove bordas para visual limpo */
    white-space: normal; /* Permite quebra de linha no mobile para não sair do container */
  }
}