/* ==========================================================================
   JGE Automação — folha de estilo única
   --------------------------------------------------------------------------
   Organização:
     1. Tokens (cores, espaçamento, tipografia)
     2. Reset e base
     3. Utilitários e acessibilidade
     4. Cabeçalho e navegação
     5. Hero
     6. Seções e títulos
     7. Cards de serviço / tecnologias / números
     8. Localização
     9. Formulário de contato
    10. Rodapé
    11. Responsivo (mobile-first: os @media ampliam para telas maiores)
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   A cor da marca é o roxo #7C3AED. Ele substituiu o magenta original da logo
   (#C4136E) e foi escolhido por ter praticamente a mesma luminância: assim toda
   a relação de contraste do projeto continua valendo sem reajuste.
   ATENÇÃO DE CONTRASTE: #7C3AED sobre o fundo escuro dá apenas 3,40:1, o que
   reprova em WCAG AA para texto pequeno. Por isso ele é usado em
   preenchimentos, bordas, ícones e títulos grandes; para texto pequeno e
   links sobre fundo escuro usamos --marca-claro (6,17:1).
   ========================================================================== */
:root {
  /* Marca */
  --marca: #7C3AED;         /* roxo da marca — botões, preenchimentos, traços */
  --marca-claro: #9E7CF7;   /* links e texto pequeno sobre fundo escuro (AA) */
  --marca-escuro: #5B21B6;  /* hover e estado pressionado */

  /* Superfícies escuras */
  --fundo: #0D0D12;
  --superficie: #16161D;
  --superficie-alta: #1F1F28;
  --borda: #2C2C38;

  /* Texto sobre escuro */
  --texto: #F2F2F5;
  --texto-suave: #A8A8B8;

  /* Seções claras */
  --claro: #FFFFFF;
  --claro-alt: #F5F5F7;
  --texto-escuro: #2B2B2B;      /* cinza-chumbo no lugar do marrom da logo */
  --texto-escuro-suave: #5A5A5A;
  --borda-clara: #E2E2E6;

  /* Tipografia */
  --fonte: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  /* Escala de espaçamento */
  --esp-xs: 0.5rem;
  --esp-sm: 1rem;
  --esp-md: 1.75rem;
  --esp-lg: 3rem;
  --esp-xl: 5rem;

  /* Medidas */
  --largura-max: 1180px;
  --raio: 10px;
  --altura-header: 72px;

  --transicao: 200ms ease;

  /* Padrão de favo de mel usado como textura de fundo (hexágonos de topo
     plano, iguais aos da logo). A opacidade é controlada no elemento. */
  --hex-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='51.96' viewBox='0 0 90 51.96'%3E%3Cg fill='none' stroke='%237C3AED' stroke-width='1.2'%3E%3Cpolygon points='30,0 15,25.98 -15,25.98 -30,0 -15,-25.98 15,-25.98'/%3E%3Cpolygon points='120,0 105,25.98 75,25.98 60,0 75,-25.98 105,-25.98'/%3E%3Cpolygon points='30,51.96 15,77.94 -15,77.94 -30,51.96 -15,25.98 15,25.98'/%3E%3Cpolygon points='120,51.96 105,77.94 75,77.94 60,51.96 75,25.98 105,25.98'/%3E%3Cpolygon points='75,25.98 60,51.96 30,51.96 15,25.98 30,0 60,0'/%3E%3Cpolygon points='75,-25.98 60,0 30,0 15,-25.98 30,-51.96 60,-51.96'/%3E%3Cpolygon points='75,77.94 60,103.92 30,103.92 15,77.94 30,51.96 60,51.96'/%3E%3C/g%3E%3C/svg%3E");
}

/* ==========================================================================
   2. RESET E BASE
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* compensa o cabeçalho fixo ao pular para uma âncora */
  scroll-padding-top: calc(var(--altura-header) + 1rem);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--fonte);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--texto);
  background-color: var(--fundo);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--marca-claro); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 {
  margin: 0 0 var(--esp-sm);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

h1 { font-size: clamp(2.2rem, 6vw, 4rem); }
h2 { font-size: clamp(1.7rem, 4vw, 2.6rem); }
h3 { font-size: clamp(1.1rem, 2.2vw, 1.3rem); letter-spacing: -0.01em; }

p { margin: 0 0 var(--esp-sm); }
p:last-child { margin-bottom: 0; }

/* O navegador põe <address> em itálico por padrão — aqui ele deve ler
   igual ao restante do texto. */
address {
  font-style: normal;
  margin: 0 0 var(--esp-sm);
}

ul { margin: 0; padding: 0; list-style: none; }

/* ==========================================================================
   3. UTILITÁRIOS E ACESSIBILIDADE
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--largura-max);
  margin-inline: auto;
  padding-inline: var(--esp-sm);
}

/* Texto visível apenas para leitores de tela */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Link "pular para o conteúdo" — aparece ao receber foco pelo teclado */
.skip-link {
  position: absolute;
  left: var(--esp-sm);
  top: -100px;
  z-index: 200;
  padding: 0.75rem 1.25rem;
  background: var(--marca);
  color: #fff;
  border-radius: var(--raio);
  font-weight: 600;
  transition: top var(--transicao);
}
.skip-link:focus { top: var(--esp-sm); }

/* Foco visível consistente em todo o site */
:focus-visible {
  outline: 3px solid var(--marca-claro);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Botões */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.9rem 1.9rem;
  border: 2px solid transparent;
  border-radius: var(--raio);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-align: center;
  cursor: pointer;
  transition: background-color var(--transicao), border-color var(--transicao),
              color var(--transicao), transform var(--transicao);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }

/* Branco sobre o roxo da marca = 5,70:1 — aprovado em AA */
.btn--primario { background: var(--marca); color: #fff; }
.btn--primario:hover { background: var(--marca-escuro); }

.btn--secundario { background: transparent; color: var(--texto); border-color: var(--borda); }
.btn--secundario:hover { border-color: var(--marca); color: var(--marca-claro); }

/* Botão para usar dentro de seções claras */
.btn--claro { background: transparent; color: var(--texto-escuro); border-color: #C9C9CF; }
.btn--claro:hover { border-color: var(--marca); color: var(--marca); }

/* Respeita quem pediu menos animação no sistema operacional */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   4. CABEÇALHO E NAVEGAÇÃO
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(13, 13, 18, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--borda);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Essencial no mobile: permite que o menu aberto caia para a linha de baixo
     em vez de disputar espaço com o logo. */
  flex-wrap: wrap;
  gap: var(--esp-sm);
  min-height: var(--altura-header);
}

/* --- Logotipo: símbolo SVG + tipografia, para ficar nítido em qualquer tela --- */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--texto);
  text-decoration: none;
  flex-shrink: 0;
}
.logo:hover { text-decoration: none; }
.logo__simbolo {
  width: 38px;
  height: 38px;
  color: var(--marca); /* o SVG usa currentColor */
  flex-shrink: 0;
}
.logo__texto { display: flex; flex-direction: column; line-height: 1; }
.logo__nome {
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.logo__sub {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  color: var(--texto-suave);
  margin-top: 3px;
}

/* --- Botão hambúrguer (só aparece no mobile) --- */
.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 9px;
  background: transparent;
  border: 1px solid var(--borda);
  border-radius: 8px;
  cursor: pointer;
}
.nav-toggle__barra {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--texto);
  border-radius: 2px;
  transition: transform var(--transicao), opacity var(--transicao);
}
/* Vira um "X" quando o menu está aberto */
.nav-toggle[aria-expanded="true"] .nav-toggle__barra:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__barra:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__barra:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --- Lista de navegação --- */
.nav-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.nav-list a {
  display: block;
  padding: 0.8rem 0.25rem;
  color: var(--texto);
  font-size: 0.95rem;
  font-weight: 600;
  border-bottom: 1px solid var(--borda);
}
.nav-list a:hover { color: var(--marca-claro); text-decoration: none; }

/* Página atual — marcada com aria-current="page" no HTML */
.nav-list a[aria-current="page"] { color: var(--marca-claro); }

/* No mobile o menu é um painel que abre abaixo do cabeçalho */
.site-nav {
  display: none;
  width: 100%;
  padding-bottom: var(--esp-sm);
}
.site-nav.aberto { display: block; }

/* ==========================================================================
   5. HERO
   ========================================================================== */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: calc(100vh - var(--altura-header));
  min-height: calc(100svh - var(--altura-header)); /* evita o "pulo" da barra do navegador no celular */
  padding: var(--esp-xl) 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 60% at 75% 20%, rgba(124, 58, 237, 0.22), transparent 60%),
    linear-gradient(160deg, #14141C 0%, var(--fundo) 55%, #100D14 100%);
}

/* Textura de favo de mel sobre o gradiente */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--hex-pattern);
  opacity: 0.14;
  /* esmaece a textura nas bordas para não competir com o texto */
  -webkit-mask-image: radial-gradient(ellipse 75% 75% at 50% 45%, #000 25%, transparent 78%);
  mask-image: radial-gradient(ellipse 75% 75% at 50% 45%, #000 25%, transparent 78%);
  pointer-events: none;
}

.hero .container { position: relative; z-index: 1; }
.hero__conteudo { max-width: 780px; }

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: var(--esp-sm);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--marca-claro);
}
/* Hexagonozinho como marcador */
.hero__eyebrow::before {
  content: "";
  width: 12px;
  height: 14px;
  background: var(--marca);
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

.hero h1 { margin-bottom: var(--esp-sm); }
.hero h1 .destaque { color: var(--marca-claro); }

.hero__texto {
  max-width: 620px;
  font-size: clamp(1rem, 2.2vw, 1.2rem);
  color: var(--texto-suave);
  margin-bottom: var(--esp-md);
}

.hero__acoes { display: flex; flex-wrap: wrap; gap: var(--esp-sm); }

/* ==========================================================================
   6. SEÇÕES E TÍTULOS
   ========================================================================== */
.section { padding: var(--esp-xl) 0; }

.section--alt { background: var(--superficie); }

/* Seção clara: inverte a paleta de texto */
.section--claro {
  background: var(--claro);
  color: var(--texto-escuro);
}
.section--claro h2,
.section--claro h3 { color: var(--texto-escuro); }
.section--claro p { color: var(--texto-escuro-suave); }
.section--claro .section-header__titulo { color: var(--texto-escuro); }

.section-header {
  max-width: 720px;
  margin-bottom: var(--esp-lg);
}
.section-header--centro {
  margin-inline: auto;
  text-align: center;
}

/* "Sobrescrito" com marcador hexagonal */
.section-header__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.75rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--marca-claro);
}
.section-header__eyebrow::before {
  content: "";
  width: 11px;
  height: 13px;
  background: var(--marca);
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  flex-shrink: 0;
}
/* Em seção clara o roxo puro tem 5,70:1 sobre branco — pode ser texto */
.section--claro .section-header__eyebrow { color: var(--marca); }

.section-header__descricao {
  font-size: 1.05rem;
  color: var(--texto-suave);
}
.section--claro .section-header__descricao { color: var(--texto-escuro-suave); }

/* Bloco centralizado — usado na página de confirmação do formulário */
.section--confirmacao {
  display: grid;
  place-items: center;
  min-height: 60vh;
}
.bloco-centro {
  max-width: 620px;
  margin-inline: auto;
  text-align: center;
}
.bloco-centro .hex-icon { margin-inline: auto; }
.acoes-centro {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-sm);
  justify-content: center;
  margin-top: var(--esp-md);
}

/* ==========================================================================
   7. CARDS
   ========================================================================== */
.grid {
  display: grid;
  gap: var(--esp-md);
  grid-template-columns: 1fr;
}

.card {
  padding: var(--esp-md);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  transition: border-color var(--transicao), transform var(--transicao), background-color var(--transicao);
}
.card:hover {
  border-color: var(--marca);
  transform: translateY(-4px);
}
.section--alt .card { background: var(--superficie-alta); }

.section--claro .card {
  background: var(--claro-alt);
  border-color: var(--borda-clara);
}

.card h3 { margin-bottom: 0.6rem; }
.card p { color: var(--texto-suave); font-size: 0.95rem; margin-bottom: 0; }
.section--claro .card p { color: var(--texto-escuro-suave); }

/* --- Card com foto ilustrativa no topo ---
   A foto ocupa a largura inteira do card (por isso o padding sai do .card e
   passa para o .card__corpo). O hexágono da marca cavalga a borda inferior da
   foto, o que amarra a imagem à identidade visual. */
.card--imagem {
  padding: 0;
  overflow: hidden;
}

.card__midia {
  aspect-ratio: 3 / 2;   /* proporção das fotos geradas: 1200 x 800 */
  overflow: hidden;
  background: var(--superficie-alta);
}
.card__midia img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;     /* preenche o quadro sem distorcer */
  transition: transform 400ms ease;
}
.card--imagem:hover .card__midia img { transform: scale(1.04); }

.card__corpo { padding: var(--esp-md); }

/* --- Link do card para a página completa do serviço ---
   Vai no fim do card. Precisa da margem própria porque ".card p" zera a
   margem inferior de todos os parágrafos do card. */
.card__link {
  margin-top: var(--esp-sm);
  font-weight: 700;
}
.card__link a { color: var(--marca-claro); }
/* Em fundo claro o roxo claro não teria contraste suficiente */
.section--claro .card__link a { color: var(--marca-escuro); }

/* Sobe o hexágono para ele se sobrepor à foto.
   O position/z-index é necessário: o zoom da imagem cria um contexto de
   empilhamento que, sem isso, passaria por cima do ícone. */
.card--imagem .hex-icon {
  position: relative;
  z-index: 1;
  margin-top: -58px;
}

/* --- Ícone em moldura hexagonal (o motivo da marca) --- */
.hex-icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 66px;
  margin-bottom: var(--esp-sm);
  background: linear-gradient(150deg, var(--marca), var(--marca-escuro));
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  color: #fff;
}
.hex-icon svg { width: 26px; height: 26px; }

/* Variante vazada, para as seções claras */
.hex-icon--vazado {
  background: none;
  color: var(--marca);
  position: relative;
}
.hex-icon--vazado::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--marca);
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  opacity: 0.1;
}
.hex-icon--vazado svg { position: relative; }

/* --- Cartão da marca (coluna visual da seção "Quem somos") --- */
.marca-card {
  position: relative;
  display: grid;
  place-items: center;
  gap: var(--esp-md);
  padding: var(--esp-lg) var(--esp-md);
  overflow: hidden;
  text-align: center;
  background: var(--claro-alt);
  border: 1px solid var(--borda-clara);
  border-radius: var(--raio);
}
.marca-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--hex-pattern);
  opacity: 0.07;
  pointer-events: none;
}
.marca-card > * { position: relative; }
.marca-card img {
  width: min(300px, 85%);
  /* a logo horizontal tem fundo branco: o multiply funde esse fundo
     com o cinza-claro do cartão, sem precisar editar o PNG */
  mix-blend-mode: multiply;
}
.marca-card__nota {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texto-escuro-suave);
}

/* --- Parede de logos das tecnologias ---
   As placas são CLARAS de propósito: os logos oficiais dos fabricantes são
   coloridos e foram desenhados para fundo claro. Colocá-los sobre o fundo
   escuro exigiria recolorir, o que quase todo manual de marca proíbe. */
.tec-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--esp-sm);
  margin-bottom: var(--esp-lg);
}

.tec-item {
  display: grid;
  place-items: center;
  min-height: 108px;
  padding: var(--esp-sm);
  background: var(--claro);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  transition: transform var(--transicao), border-color var(--transicao);
}
.tec-item:hover { transform: translateY(-3px); border-color: var(--marca); }

/* max-height normaliza logos de proporções bem diferentes:
   a Siemens é uma marca larga, a do Visual Studio é quase quadrada. */
.tec-item img {
  width: auto;
  max-width: 100%;
  max-height: 44px;
  object-fit: contain;
}

/* Logotipos empilhados (símbolo sobre texto) são quase quadrados. Limitados à
   mesma altura dos horizontais, ficariam com um terço da largura deles.
   Esta altura maior equilibra o peso visual na fileira. */
.tec-item--empilhado img { max-height: 76px; }

/* Para deixar os logos em tons de cinza e coloridos só no hover, descomente:
.tec-item img { filter: grayscale(1); opacity: 0.75; transition: filter var(--transicao), opacity var(--transicao); }
.tec-item:hover img { filter: grayscale(0); opacity: 1; }
*/

.tec-complemento {
  margin-bottom: var(--esp-sm);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

/* --- Badges de tecnologia (itens sem logo, apenas texto) --- */
.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.15rem;
  background: var(--superficie-alta);
  border: 1px solid var(--borda);
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--texto);
}
.badge::before {
  content: "";
  width: 9px;
  height: 11px;
  background: var(--marca);
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  flex-shrink: 0;
}

/* --- Lista com marcador hexagonal --- */
.lista-hex li {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: 0.7rem;
  color: var(--texto-suave);
}
.lista-hex li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 10px;
  height: 12px;
  background: var(--marca);
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}
.section--claro .lista-hex li { color: var(--texto-escuro-suave); }

/* --- Faixa de chamada final --- */
.cta-faixa {
  position: relative;
  padding: var(--esp-xl) 0;
  text-align: center;
  overflow: hidden;
  background: linear-gradient(135deg, var(--marca-escuro) 0%, var(--marca) 100%);
  color: #fff;
}
.cta-faixa::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--hex-pattern);
  filter: brightness(0) invert(1); /* deixa o padrão branco sobre o roxo */
  opacity: 0.11;
  pointer-events: none;
}
.cta-faixa .container { position: relative; z-index: 1; }
.cta-faixa h2 { color: #fff; }
.cta-faixa p {
  max-width: 620px;
  margin-inline: auto;
  margin-bottom: var(--esp-md);
  color: rgba(255, 255, 255, 0.92);
  font-size: 1.05rem;
}
.cta-faixa .btn--primario { background: #fff; color: var(--marca-escuro); }
.cta-faixa .btn--primario:hover { background: var(--claro-alt); }

/* ==========================================================================
   8. LOCALIZAÇÃO
   ========================================================================== */
.mapa-wrapper {
  position: relative;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  overflow: hidden;
  background: var(--superficie-alta);
}
.mapa-wrapper iframe {
  display: block;
  width: 100%;
  height: 380px;
  border: 0;
  /* Suaviza o mapa claro dentro do tema escuro sem prejudicar a legibilidade */
  filter: grayscale(0.35) contrast(0.95);
}

.info-bloco {
  display: flex;
  gap: var(--esp-sm);
  padding: var(--esp-md) 0;
  border-bottom: 1px solid var(--borda);
}
.info-bloco:last-child { border-bottom: 0; }
.info-bloco__icone {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 44px;
  height: 50px;
  background: var(--marca);
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  color: #fff;
}
.info-bloco__icone svg { width: 20px; height: 20px; }
.info-bloco h3 { font-size: 1rem; margin-bottom: 0.3rem; }
.info-bloco p,
.info-bloco address {
  margin: 0;
  font-style: normal;
  color: var(--texto-suave);
  font-size: 0.95rem;
}

/* ==========================================================================
   9. FORMULÁRIO
   ========================================================================== */
.form-grid {
  display: grid;
  gap: var(--esp-sm);
  grid-template-columns: 1fr;
}
.campo--largo { grid-column: 1 / -1; }

.campo label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.campo__obrigatorio { color: var(--marca-claro); }

.campo input,
.campo textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  font-family: inherit;
  font-size: 1rem;
  color: var(--texto);
  background: var(--superficie-alta);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
.campo input::placeholder,
.campo textarea::placeholder { color: #6E6E80; }

.campo input:focus,
.campo textarea:focus {
  outline: none;
  border-color: var(--marca);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.28);
}
/* Estado de erro nativo, mostrado só depois que o usuário interage */
.campo input:not(:placeholder-shown):invalid,
.campo textarea:not(:placeholder-shown):invalid { border-color: #E5484D; }

.campo textarea { resize: vertical; min-height: 150px; }

.form-nota {
  margin-top: var(--esp-sm);
  font-size: 0.85rem;
  color: var(--texto-suave);
}

/* Campo anti-spam: escondido de olhos humanos, preenchido só por robôs */
.honeypot {
  position: absolute;
  left: -9999px;
  opacity: 0;
  height: 0;
  overflow: hidden;
}

/* Bloco lateral de contato direto */
.contato-direto {
  padding: var(--esp-md);
  background: var(--superficie-alta);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
}
.contato-direto h3 { font-size: 1.05rem; }
.contato-direto a { font-weight: 600; word-break: break-word; }

/* ==========================================================================
   10. RODAPÉ
   ========================================================================== */
.site-footer {
  padding: var(--esp-lg) 0 var(--esp-md);
  background: #0A0A0E;
  border-top: 1px solid var(--borda);
}

.footer-grid {
  display: grid;
  gap: var(--esp-md);
  grid-template-columns: 1fr;
  padding-bottom: var(--esp-md);
}

.footer-col h4 {
  margin-bottom: var(--esp-sm);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texto);
}
.footer-col p,
.footer-col address {
  margin: 0 0 0.5rem;
  font-style: normal;
  font-size: 0.9rem;
  color: var(--texto-suave);
  line-height: 1.7;
}
.footer-col li { margin-bottom: 0.5rem; }

/* CNPJ: informação de registro, não de contato — fica um degrau abaixo do
   resto da coluna, com um respiro que a separa da lista de e-mail/telefone. */
.footer-cnpj {
  margin-top: 0.9rem;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: var(--texto-suave);
  opacity: 0.85;
}
.footer-col a { color: var(--texto-suave); font-size: 0.9rem; }
.footer-col a:hover { color: var(--marca-claro); }

.footer-marca .logo { margin-bottom: var(--esp-sm); }
.footer-marca p { max-width: 320px; }

/* Redes sociais */
.redes { display: flex; gap: 0.6rem; margin-top: var(--esp-sm); }
.redes a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  background: var(--superficie-alta);
  border: 1px solid var(--borda);
  border-radius: 50%;
  color: var(--texto-suave);
  transition: background-color var(--transicao), color var(--transicao), border-color var(--transicao);
}
.redes a:hover { background: var(--marca); border-color: var(--marca); color: #fff; }
.redes svg { width: 18px; height: 18px; }

.footer-base {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-top: var(--esp-md);
  border-top: 1px solid var(--borda);
  font-size: 0.82rem;
  color: var(--texto-suave);
}

/* ==========================================================================
   11. RESPONSIVO
   ========================================================================== */

/* --- Tablet --- */
@media (min-width: 600px) {
  .container { padding-inline: var(--esp-md); }
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .tec-grid { grid-template-columns: repeat(3, 1fr); }
  .form-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-base { flex-direction: row; justify-content: space-between; align-items: center; }
  .mapa-wrapper iframe { height: 440px; }
}

/* --- Desktop: o menu vira barra horizontal e o hambúrguer some --- */
@media (min-width: 900px) {
  .nav-toggle { display: none; }

  .site-nav {
    display: block !important; /* neutraliza o estado "fechado" do mobile */
    width: auto;
    padding-bottom: 0;
  }
  .nav-list {
    flex-direction: row;
    align-items: center;
    gap: var(--esp-md);
  }
  .nav-list a {
    padding: 0.4rem 0;
    border-bottom: 2px solid transparent;
  }
  .nav-list a:hover,
  .nav-list a[aria-current="page"] { border-bottom-color: var(--marca); }

  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
  .tec-grid { grid-template-columns: repeat(5, 1fr); }
  .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; }

  /* Layouts de duas colunas */
  .split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--esp-lg);
    align-items: center;
  }
  .split--contato {
    grid-template-columns: 1.5fr 1fr;
    align-items: start;
  }
  .split--mapa {
    grid-template-columns: 1fr 1.3fr;
    align-items: start;
  }
}