/* =============================================================
   PCDATA Informática e CFTV — Folha de estilos principal
   Arquivo: style.css
   ============================================================= */


/* -------------------------------------------------------------
   FONTES LOCAIS
   ------------------------------------------------------------- */
@font-face {
  font-family: 'AirFlowBTNBold';
  src: url('AirFlowBTNBold.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}


/* -------------------------------------------------------------
   RESET GLOBAL
   Remove margens, espaçamentos e garante que padding e border
   sejam incluídos no tamanho total de todos os elementos
   ------------------------------------------------------------- */
*, *::before, *::after {
  /* Zera a margem externa padrão do navegador em todos os elementos */
  margin: 0;
  /* Zera o espaçamento interno padrão do navegador em todos os elementos */
  padding: 0;
  /* Faz com que largura e altura incluam padding e border (mais fácil de calcular tamanhos) */
  box-sizing: border-box;
}


/* -------------------------------------------------------------
   VARIÁVEIS CSS (Design Tokens)
   Valores reutilizáveis definidos uma vez e usados em todo o CSS.
   Para mudar a cor principal do site, basta alterar aqui.
   ------------------------------------------------------------- */
:root {
  /* Verde muito escuro — usado no fundo da navbar e do footer */
  --green-dark:  #0d4a28;
  /* Verde principal — cor de destaque em botões, ícones e bordas */
  --green:       #1a6b3c;
  /* Verde médio — usado em gradientes */
  --green-mid:   #2ea05a;
  /* Verde claro/menta — usado em textos sobre fundo escuro */
  --green-light: #a8f0c0;
  /* Branco puro */
  --white:       #ffffff;
  /* Fundo levemente esverdeado — usado em seções alternadas */
  --bg-light:    #f4faf6;
  /* Cor principal dos textos (quase preto esverdeado) */
  --text:        #1c2b1c;
  /* Cor de textos secundários/descritivos (cinza esverdeado) */
  --text-muted:  #5a6b5a;
  /* Sombra padrão dos cards */
  --shadow:      0 4px 24px rgba(0, 0, 0, 0.10);
  /* Arredondamento padrão dos cards e elementos */
  --radius:      12px;
  /* Animação padrão para hover e transições */
  --transition:  all 0.3s ease;
}


/* -------------------------------------------------------------
   COMPORTAMENTO DO SCROLL
   Faz a página rolar suavemente ao clicar nos links da navbar
   ------------------------------------------------------------- */
html {
  /* Ativa o scroll suave (animado) ao navegar por âncoras (#sobre, #servicos...) */
  scroll-behavior: smooth;
}


/* -------------------------------------------------------------
   CORPO DA PÁGINA
   Estilo base aplicado a todo o conteúdo visível
   ------------------------------------------------------------- */
body {
  /* Define a fonte principal; usa fontes do sistema como fallback */
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  /* Cor padrão de todos os textos */
  color: var(--text);
  /* Espaçamento entre linhas dos parágrafos */
  line-height: 1.6;
}


/* =============================================================
   BARRA DE NAVEGAÇÃO (NAVBAR)
   ============================================================= */

/* Container principal da navbar */
nav {
  /* Fixa a navbar no topo da tela mesmo ao rolar a página */
  position: fixed;
  /* Gruda no topo da janela */
  top: 0;
  /* Ocupa toda a largura da tela */
  width: 100%;
  /* Altura fixa da navbar */
  height: 68px;
  /* Cor de fundo verde escuro */
  background: var(--green-dark);
  /* Flexbox para alinhar logo e links lado a lado */
  display: flex;
  /* Centraliza verticalmente os itens dentro da navbar */
  align-items: center;
  /* Empurra logo para esquerda e links para direita */
  justify-content: space-between;
  /* Espaçamento interno lateral de 6% */
  padding: 0 6%;
  /* Garante que a navbar fique acima de todos os outros elementos */
  z-index: 1000;
  /* Sombra abaixo da navbar para dar sensação de profundidade */
  box-shadow: 0 2px 20px rgba(0,0,0,0.35);
}

/* Link que envolve o logo (ícone + texto) */
.nav-logo {
  /* Flexbox para alinhar ícone e texto lado a lado */
  display: flex;
  /* Centraliza verticalmente */
  align-items: center;
  /* Espaço entre ícone e texto */
  gap: 10px;
  /* Remove sublinhado do link */
  text-decoration: none;
}

/* Caixa quadrada que envolve o ícone do logo */
.nav-logo-icon {
  /* Largura do quadrado do ícone */
  width: 38px;
  /* Altura do quadrado do ícone */
  height: 38px;
  /* Fundo branco para contrastar com o ícone verde */
  background: var(--white);
  /* Arredonda os cantos */
  border-radius: 8px;
  /* Centraliza o ícone dentro da caixa */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Ícone dentro do logo */
.nav-logo-icon i {
  /* Cor verde escuro para o ícone (contrasta com o fundo branco) */
  color: var(--green-dark);
  /* Tamanho do ícone */
  font-size: 18px;
}

/* Imagem de logo dentro do quadrado */
.nav-logo-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 8px;
}

/* Texto "PCDATA" ao lado do ícone */
.nav-logo-text {
  /* Fonte personalizada */
  font-family: 'AirFlowBTNBold', sans-serif;
  /* Texto branco para aparecer sobre o fundo escuro */
  color: var(--white);
  /* Tamanho do texto do logo */
  font-size: 1.15rem;
  /* Negrito */
  font-weight: 700;
  /* Pequeno espaçamento entre letras */
  letter-spacing: 0.4px;

}

/* Parte "DATA" do logo (dentro de <span>) */
.nav-logo-text span {
  /* Verde claro para destacar a segunda parte do nome */
  color: var(--green-light);
}

/* Lista de links de navegação */
.nav-links {
  /* Remove os marcadores de lista (bolinhas) */
  list-style: none;
  /* Exibe os itens em linha */
  display: flex;
  /* Espaçamento entre cada link */
  gap: 2rem;
}

/* Cada link da navbar */
.nav-links a {
  /* Cor branca semi-transparente (mais suave que branco puro) */
  color: rgba(255,255,255,0.82);
  /* Remove sublinhado */
  text-decoration: none;
  /* Tamanho do texto dos links */
  font-size: 0.95rem;
  /* Semi-negrito */
  font-weight: 500;
  /* Espaço para a borda inferior aparecer sem mover o conteúdo */
  padding-bottom: 4px;
  /* Borda inferior invisível por padrão (aparece no hover) */
  border-bottom: 2px solid transparent;
  /* Animação suave ao passar o mouse */
  transition: var(--transition);
}

/* Efeito ao passar o mouse sobre um link da navbar */
.nav-links a:hover {
  /* Fica branco total no hover */
  color: var(--white);
  /* Aparece uma linha verde clara embaixo do link */
  border-bottom-color: var(--green-light);
}

/* Botão hambúrguer (visível apenas no mobile) */
.hamburger {
  /* Oculto por padrão; aparece em telas menores via media query */
  display: none;
  /* Empilha as três linhas verticalmente */
  flex-direction: column;
  /* Espaço entre as linhas do hambúrguer */
  gap: 5px;
  /* Muda o cursor para mãozinha */
  cursor: pointer;
  /* Remove estilo de botão padrão do navegador */
  background: none;
  border: none;
  /* Pequeno espaçamento para área de clique */
  padding: 4px;
}

/* Cada linha do ícone hambúrguer */
.hamburger span {
  /* Exibe como bloco para ter largura e altura */
  display: block;
  /* Comprimento de cada linha */
  width: 24px;
  /* Espessura de cada linha */
  height: 3px;
  /* Cor branca das linhas */
  background: var(--white);
  /* Arredonda as pontas das linhas */
  border-radius: 3px;
  /* Animação suave */
  transition: var(--transition);
}


/* =============================================================
   SEÇÃO HERO (BANNER PRINCIPAL)
   ============================================================= */

/* Container da seção hero */
#hero {
  /* Ocupa pelo menos a altura inteira da janela do navegador */
  min-height: 100vh;
  /* Gradiente diagonal de verde escuro para verde médio */
  background: linear-gradient(135deg, var(--green-dark) 0%, var(--green) 55%, var(--green-mid) 100%);
  /* Centraliza o conteúdo no meio da tela */
  display: flex;
  align-items: center;
  justify-content: center;
  /* Centraliza o texto */
  text-align: center;
  /* Padding superior grande para não ficar atrás da navbar fixa */
  padding: 110px 6% 70px;
  /* Necessário para o pseudo-elemento ::before ficar posicionado corretamente */
  position: relative;
  /* Esconde qualquer conteúdo que vaze para fora */
  overflow: hidden;
}

/* Camada de brilho sutil sobre o hero (efeito de luz) */
#hero::before {
  /* Necessário para pseudo-elementos aparecerem */
  content: '';
  /* Ocupa todo o espaço do hero */
  position: absolute;
  inset: 0;
  /* Gradiente radial branco muito transparente no canto superior direito */
  background: radial-gradient(ellipse at 60% 40%, rgba(255,255,255,0.04) 0%, transparent 65%);
  /* Não bloqueia cliques do mouse */
  pointer-events: none;
}

/* Div que agrupa todo o texto e botões do hero */
.hero-content {
  /* Fica acima do ::before */
  position: relative;
  z-index: 1;
  /* Limita a largura para o texto não ficar muito largo em telas grandes */
  max-width: 780px;
}

/* Etiqueta pequena acima do título */
.hero-badge {
  /* Exibe como bloco inline para respeitar o padding */
  display: inline-block;
  /* Fundo branco bem transparente */
  background: rgba(255,255,255,0.14);
  /* Texto verde claro */
  color: var(--green-light);
  /* Espaçamento interno */
  padding: 6px 20px;
  /* Totalmente arredondado (pílula) */
  border-radius: 50px;
  /* Texto pequeno */
  font-size: 0.82rem;
  /* Negrito */
  font-weight: 700;
  /* Espaçamento amplo entre letras (estilo de badge) */
  letter-spacing: 1.5px;
  /* Texto em maiúsculas */
  text-transform: uppercase;
  /* Espaço abaixo do badge antes do título */
  margin-bottom: 26px;
  /* Borda sutil */
  border: 1px solid rgba(255,255,255,0.2);
}

/* Título principal H1 do hero */
.hero-content h1 {
  /* clamp: mínimo 2.2rem, ideal 5.5vw, máximo 3.8rem — responsivo automático */
  font-size: clamp(2.2rem, 5.5vw, 3.8rem);
  /* Negrito máximo */
  font-weight: 800;
  /* Texto branco */
  color: var(--white);
  /* Altura de linha compacta para títulos grandes */
  line-height: 1.15;
  /* Espaço abaixo do título */
  margin-bottom: 22px;
}

/* Palavra destacada em verde dentro do H1 */
.hero-content h1 span {
  color: var(--green-light);
}

/* Parágrafo descritivo abaixo do título */
.hero-content p {
  /* Tamanho responsivo entre 1rem e 1.18rem */
  font-size: clamp(1rem, 2vw, 1.18rem);
  /* Branco semi-transparente */
  color: rgba(255,255,255,0.82);
  /* Limita a largura do parágrafo */
  max-width: 580px;
  /* Centraliza horizontalmente e adiciona espaço abaixo */
  margin: 0 auto 40px;
}

/* Container dos dois botões do hero */
.hero-buttons {
  /* Exibe os botões lado a lado */
  display: flex;
  /* Espaço entre os botões */
  gap: 14px;
  /* Centraliza os botões */
  justify-content: center;
  /* Quebra linha se não couber (telas pequenas) */
  flex-wrap: wrap;
}

/* Botão principal (fundo branco, texto verde) */
.btn-primary {
  /* Flexbox para alinhar ícone e texto internamente */
  display: inline-flex;
  align-items: center;
  /* Espaço entre o ícone e o texto do botão */
  gap: 8px;
  /* Fundo branco */
  background: var(--white);
  /* Texto verde escuro */
  color: var(--green-dark);
  /* Espaçamento interno */
  padding: 14px 32px;
  /* Formato de pílula */
  border-radius: 50px;
  /* Remove sublinhado */
  text-decoration: none;
  /* Negrito */
  font-weight: 700;
  /* Tamanho do texto */
  font-size: 0.97rem;
  /* Sombra para dar profundidade */
  box-shadow: 0 4px 20px rgba(0,0,0,0.22);
  /* Animação suave */
  transition: var(--transition);
}

/* Efeito ao passar o mouse no botão principal */
.btn-primary:hover {
  /* Sobe levemente */
  transform: translateY(-3px);
  /* Sombra mais intensa */
  box-shadow: 0 8px 28px rgba(0,0,0,0.28);
}

/* Botão secundário (transparente com borda branca) */
.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* Sem fundo */
  background: transparent;
  /* Texto branco */
  color: var(--white);
  padding: 13px 32px;
  border-radius: 50px;
  /* Borda branca semi-transparente */
  border: 2px solid rgba(255,255,255,0.45);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.97rem;
  transition: var(--transition);
}

/* Efeito ao passar o mouse no botão outline */
.btn-outline:hover {
  /* Leve fundo branco translúcido */
  background: rgba(255,255,255,0.1);
  /* Borda fica branca total */
  border-color: var(--white);
}


/* =============================================================
   PADRÃO COMUM DE TODAS AS SEÇÕES
   ============================================================= */

/* Espaçamento interno padrão de todas as seções */
section {
  padding: 84px 6%;
}

/* Cabeçalho centralizado de cada seção (tag + título + subtítulo) */
.section-header {
  /* Centraliza o texto */
  text-align: center;
  /* Espaço entre o cabeçalho e o conteúdo da seção */
  margin-bottom: 56px;
}

/* Etiqueta acima do título da seção (ex: "O QUE FAZEMOS") */
.section-tag {
  /* Bloco inline para padding funcionar */
  display: inline-block;
  /* Cor verde */
  color: var(--green);
  /* Texto pequeno */
  font-size: 0.82rem;
  /* Negrito */
  font-weight: 700;
  /* Espaçamento largo entre letras */
  letter-spacing: 2px;
  /* Tudo em maiúsculas */
  text-transform: uppercase;
  /* Espaço abaixo da tag */
  margin-bottom: 10px;
}

/* Título H2 de cada seção */
.section-header h2 {
  /* Tamanho responsivo */
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  /* Negrito máximo */
  font-weight: 800;
  /* Cor escura padrão */
  color: var(--text);
  /* Espaço abaixo do título */
  margin-bottom: 12px;
}

/* Subtítulo/descrição abaixo do H2 */
.section-header p {
  /* Cor muted (suave) */
  color: var(--text-muted);
  /* Tamanho legível */
  font-size: 1.03rem;
  /* Limita largura para não ficar muito espalhado */
  max-width: 560px;
  /* Centraliza */
  margin: 0 auto;
}

/* Linha decorativa verde abaixo do título */
.divider {
  /* Largura da linha */
  width: 52px;
  /* Espessura da linha */
  height: 4px;
  /* Cor verde */
  background: var(--green);
  /* Arredonda as pontas */
  border-radius: 2px;
  /* Centraliza e adiciona espaço acima */
  margin: 14px auto 0;
}


/* =============================================================
   SEÇÃO SOBRE NÓS
   ============================================================= */

/* Fundo branco para a seção "Sobre" */
#sobre {
  background: var(--white);
}

/* Grid de duas colunas: texto à esquerda, cards à direita */
.sobre-grid {
  /* Layout de grade */
  display: grid;
  /* Duas colunas de tamanho igual */
  grid-template-columns: 1fr 1fr;
  /* Espaço entre as duas colunas */
  gap: 60px;
  /* Alinha verticalmente ao centro */
  align-items: center;
  /* Limita a largura máxima */
  max-width: 1080px;
  /* Centraliza o grid na página */
  margin: 0 auto;
}

/* Exibe a tag como bloco (para ficar acima do título h3) */
.sobre-text .section-tag {
  display: block;
  margin-bottom: 8px;
}

/* Título da coluna de texto "Sobre" */
.sobre-text h3 {
  /* Tamanho do subtítulo */
  font-size: 1.55rem;
  /* Negrito */
  font-weight: 700;
  /* Verde escuro */
  color: var(--green-dark);
  /* Espaço abaixo */
  margin-bottom: 18px;
  /* Altura de linha para não ficar apertado */
  line-height: 1.3;
}

/* Parágrafos da coluna de texto "Sobre" */
.sobre-text p {
  /* Cor suave */
  color: var(--text-muted);
  /* Tamanho legível */
  font-size: 1.02rem;
  /* Altura de linha generosa para facilitar leitura */
  line-height: 1.85;
  /* Espaço entre os parágrafos */
  margin-bottom: 14px;
}

/* Grid dos 4 cards de valores (Atendimento Rápido, Orçamento...) */
.valores-grid {
  display: grid;
  /* Duas colunas iguais */
  grid-template-columns: 1fr 1fr;
  /* Espaço entre os cards */
  gap: 20px;
}

/* Card individual de valor/diferencial */
.valor-card {
  /* Fundo levemente esverdeado */
  background: var(--bg-light);
  /* Arredondamento padrão */
  border-radius: var(--radius);
  /* Espaçamento interno */
  padding: 24px 20px;
  /* Centraliza conteúdo */
  text-align: center;
  /* Linha verde na parte de baixo do card */
  border-bottom: 3px solid var(--green);
  /* Animação suave */
  transition: var(--transition);
}

/* Efeito ao passar o mouse no card de valor */
.valor-card:hover {
  /* Sobe levemente */
  transform: translateY(-4px);
  /* Adiciona sombra */
  box-shadow: var(--shadow);
}

/* Ícone dentro do card de valor */
.valor-card i {
  /* Tamanho do ícone */
  font-size: 1.8rem;
  /* Cor verde */
  color: var(--green);
  /* Espaço abaixo do ícone */
  margin-bottom: 10px;
}

/* Título do card de valor */
.valor-card h4 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}

/* Descrição do card de valor */
.valor-card p {
  font-size: 0.84rem;
  color: var(--text-muted);
}


/* =============================================================
   SEÇÃO SERVIÇOS
   ============================================================= */

/* Fundo cinza-esverdeado claro para diferenciar da seção anterior */
#servicos {
  background: var(--bg-light);
}

/* Grid responsivo dos cards de serviço */
.servicos-grid {
  display: grid;
  /* Cria automaticamente o número de colunas que couber, mínimo 250px cada */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  /* Espaço entre os cards */
  gap: 26px;
  /* Largura máxima centralizada */
  max-width: 1080px;
  margin: 0 auto;
}

/* Card individual de serviço */
.service-card {
  /* Fundo branco */
  background: var(--white);
  /* Arredondamento padrão */
  border-radius: var(--radius);
  /* Espaçamento interno */
  padding: 36px 26px;
  /* Centraliza conteúdo */
  text-align: center;
  /* Sombra padrão */
  box-shadow: var(--shadow);
  /* Animação suave */
  transition: var(--transition);
  /* Borda superior invisível por padrão (aparece no hover) */
  border-top: 4px solid transparent;
}

/* Efeito ao passar o mouse no card de serviço */
.service-card:hover {
  /* Sobe o card */
  transform: translateY(-8px);
  /* Borda superior verde aparece */
  border-top-color: var(--green);
  /* Sombra mais verde e intensa */
  box-shadow: 0 12px 40px rgba(26, 107, 60, 0.14);
}

/* Círculo que envolve o ícone do serviço */
.service-icon {
  /* Tamanho do círculo */
  width: 70px;
  height: 70px;
  /* Fundo suave */
  background: var(--bg-light);
  /* Formato circular */
  border-radius: 50%;
  /* Centraliza o ícone dentro do círculo */
  display: flex;
  align-items: center;
  justify-content: center;
  /* Centraliza o círculo horizontalmente e adiciona espaço abaixo */
  margin: 0 auto 22px;
  /* Animação suave */
  transition: var(--transition);
}

/* No hover do card, o círculo do ícone fica verde */
.service-card:hover .service-icon {
  background: var(--green);
}

/* Ícone dentro do círculo */
.service-icon i {
  /* Tamanho do ícone */
  font-size: 26px;
  /* Cor verde */
  color: var(--green);
  transition: var(--transition);
}

/* No hover do card, o ícone fica branco (contrasta com o círculo verde) */
.service-card:hover .service-icon i {
  color: var(--white);
}

/* Título do serviço */
.service-card h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 12px;
}

/* Descrição do serviço */
.service-card p {
  color: var(--text-muted);
  font-size: 0.93rem;
  line-height: 1.75;
}


/* =============================================================
   SEÇÃO LOCALIZAÇÃO
   ============================================================= */

/* Fundo branco */
#localizacao {
  background: var(--white);
}

/* Grid com informações à esquerda e mapa à direita */
.localizacao-container {
  display: grid;
  /* Coluna de info menor, coluna do mapa maior */
  grid-template-columns: 1fr 1.6fr;
  /* Espaço entre as colunas */
  gap: 44px;
  /* Alinha ao topo */
  align-items: start;
  max-width: 1080px;
  margin: 0 auto;
}

/* Coluna com os itens de informação (endereço, tel, horário...) */
.localizacao-info {
  /* Empilha os itens verticalmente */
  display: flex;
  flex-direction: column;
  /* Espaço entre cada item de info */
  gap: 22px;
}

/* Cada linha de informação (ícone + texto) */
.info-item {
  /* Ícone e texto lado a lado */
  display: flex;
  /* Espaço entre ícone e texto */
  gap: 16px;
  /* Alinha pelo topo */
  align-items: flex-start;
}

/* Caixinha quadrada com o ícone da informação */
.info-icon {
  /* Tamanho fixo */
  width: 46px;
  height: 46px;
  /* Fundo suave */
  background: var(--bg-light);
  /* Arredondamento suave (não circular) */
  border-radius: 10px;
  /* Centraliza o ícone */
  display: flex;
  align-items: center;
  justify-content: center;
  /* Não encolhe mesmo em telas pequenas */
  flex-shrink: 0;
}

/* Ícone dentro da caixinha de info */
.info-icon i {
  color: var(--green);
  font-size: 19px;
}

/* Título do item de informação (ex: "Endereço") */
.info-text h4 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}

/* Texto e links dentro de cada item de info */
.info-text p,
.info-text a {
  color: var(--text-muted);
  font-size: 0.94rem;
  /* Remove sublinhado dos links */
  text-decoration: none;
  line-height: 1.6;
}

/* Hover nos links de info (telefone, WhatsApp...) */
.info-text a:hover {
  color: var(--green);
}

/* Container do mapa do Google Maps */
.map-wrapper {
  /* Arredondamento nos cantos do mapa */
  border-radius: var(--radius);
  /* Esconde as bordas do iframe que saem para fora */
  overflow: hidden;
  /* Sombra ao redor do mapa */
  box-shadow: var(--shadow);
  /* Altura fixa do mapa */
  height: 360px;
}

/* O iframe do Google Maps em si */
.map-wrapper iframe {
  /* Ocupa toda a largura do container */
  width: 100%;
  /* Ocupa toda a altura do container */
  height: 100%;
  /* Remove borda padrão do iframe */
  border: none;
}


/* =============================================================
   SEÇÃO CONTATO
   ============================================================= */

/* Fundo com gradiente verde (igual ao hero) */
#contato {
  background: linear-gradient(135deg, var(--green-dark), var(--green) 70%, var(--green-mid));
  /* Centraliza o conteúdo */
  text-align: center;
}

/* Tag da seção de contato em verde claro (sobre fundo escuro) */
#contato .section-tag {
  color: var(--green-light);
}

/* Título da seção de contato em branco */
#contato .section-header h2 {
  color: var(--white);
}

/* Subtítulo da seção de contato em branco translúcido */
#contato .section-header p {
  color: rgba(255,255,255,0.78);
}

/* Linha divisória em branco translúcido (sobre fundo escuro) */
#contato .divider {
  background: rgba(255,255,255,0.35);
}

/* Container flexível dos cards de contato */
.contato-cards {
  display: flex;
  /* Espaço entre os cards */
  gap: 24px;
  /* Centraliza horizontalmente */
  justify-content: center;
  /* Quebra linha em telas pequenas */
  flex-wrap: wrap;
  /* Largura máxima centralizada */
  max-width: 860px;
  margin: 0 auto;
}

/* Card individual de contato (telefone ou WhatsApp) */
.contato-card {
  /* Fundo branco bem translúcido (efeito vidro) */
  background: rgba(255,255,255,0.1);
  /* Borda sutil branca */
  border: 1px solid rgba(255,255,255,0.2);
  /* Arredondamento */
  border-radius: var(--radius);
  /* Espaçamento interno generoso */
  padding: 34px 42px;
  /* Largura mínima para não ficar muito estreito */
  min-width: 270px;
  transition: var(--transition);
}

/* Hover no card de contato */
.contato-card:hover {
  /* Fundo levemente mais opaco */
  background: rgba(255,255,255,0.16);
  /* Sobe o card */
  transform: translateY(-4px);
}

/* Ícone grande acima do número (direto filho do card) */
.contato-card > i {
  /* Ícone grande */
  font-size: 2rem;
  /* Verde claro */
  color: var(--green-light);
  /* Exibe como bloco para ficar em linha própria */
  display: block;
  /* Espaço abaixo do ícone */
  margin-bottom: 12px;
}

/* Label pequeno acima do número (ex: "TELEFONE PCDATA") */
.contato-nome {
  /* Texto muito pequeno */
  font-size: 0.8rem;
  /* Negrito */
  font-weight: 700;
  /* Espaçamento entre letras estilo legenda */
  letter-spacing: 1.5px;
  /* Maiúsculas */
  text-transform: uppercase;
  /* Branco translúcido */
  color: rgba(255,255,255,0.65);
  /* Espaço abaixo */
  margin-bottom: 8px;
}

/* Número de telefone/WhatsApp clicável */
.contato-card .numero {
  /* Branco para aparecer bem */
  color: var(--white);
  /* Tamanho grande para fácil leitura */
  font-size: 1.35rem;
  /* Negrito */
  font-weight: 700;
  /* Remove sublinhado */
  text-decoration: none;
  /* Exibe em linha própria */
  display: block;
  transition: var(--transition);
}

/* Hover no número */
.contato-card .numero:hover {
  color: var(--green-light);
}

/* Botão verde do WhatsApp */
.whatsapp-btn {
  /* Flexbox para alinhar ícone e texto */
  display: inline-flex;
  align-items: center;
  /* Espaço entre ícone e texto */
  gap: 7px;
  /* Espaço acima do botão */
  margin-top: 14px;
  /* Verde WhatsApp oficial */
  background: #25d366;
  /* Texto branco */
  color: var(--white);
  /* Espaçamento interno */
  padding: 9px 22px;
  /* Formato de pílula */
  border-radius: 50px;
  /* Tamanho do texto */
  font-size: 0.9rem;
  /* Semi-negrito */
  font-weight: 600;
  /* Remove sublinhado */
  text-decoration: none;
  transition: var(--transition);
}

/* Hover no botão do WhatsApp */
.whatsapp-btn:hover {
  /* Verde um pouco mais escuro */
  background: #1ebe5a;
  /* Cresce levemente */
  transform: scale(1.05);
}


/* =============================================================
   RODAPÉ (FOOTER)
   ============================================================= */
footer {
  /* Fundo verde escuro (mesmo da navbar) */
  background: var(--green-dark);
  /* Texto branco translúcido */
  color: rgba(255,255,255,0.55);
  /* Centraliza o texto */
  text-align: center;
  /* Espaçamento interno */
  padding: 22px 6%;
  /* Texto pequeno */
  font-size: 0.88rem;
}

/* Nome da empresa no footer fica em verde claro */
footer span {
  color: var(--green-light);
}


/* =============================================================
   RESPONSIVIDADE — MEDIA QUERIES
   Adaptações de layout para diferentes tamanhos de tela
   ============================================================= */

/* Telas menores que 860px (tablets e celulares grandes) */
@media (max-width: 860px) {
  /* "Sobre" e "Localização" passam a ter apenas 1 coluna (empilha) */
  .sobre-grid,
  .localizacao-container {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  /* Mapa fica um pouco menor */
  .map-wrapper {
    height: 280px;
  }
}

/* Telas menores que 768px (celulares) */
@media (max-width: 768px) {
  /* Menu de links some e vira menu dropdown vertical */
  .nav-links {
    display: none;
    /* Posiciona o menu logo abaixo da navbar */
    position: absolute;
    top: 68px;
    left: 0;
    /* Largura total da tela */
    width: 100%;
    /* Mesmo fundo da navbar */
    background: var(--green-dark);
    /* Empilha os links verticalmente */
    flex-direction: column;
    padding: 8px 0 16px;
    gap: 0;
  }

  /* Classe adicionada via JavaScript quando o hambúrguer é clicado */
  .nav-links.open {
    display: flex;
  }

  /* Linha separadora entre os itens do menu mobile */
  .nav-links li {
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }

  /* Links ocupam toda a linha e têm área de clique maior */
  .nav-links a {
    display: block;
    padding: 13px 6%;
  }

  /* Botão hambúrguer aparece no mobile */
  .hamburger {
    display: flex;
  }
}

/* Telas menores que 480px (celulares pequenos) */
@media (max-width: 480px) {
  /* Reduz o espaçamento das seções em telas muito pequenas */
  section {
    padding: 60px 5%;
  }

  /* Botões do hero ficam empilhados verticalmente */
  .hero-buttons {
    flex-direction: column;
    align-items: center;
  }

  /* Cards de valores ficam em coluna única */
  .valores-grid {
    grid-template-columns: 1fr;
  }

  /* Cards de contato ocupam largura total */
  .contato-card {
    min-width: unset;
    width: 100%;
  }
}