:root{
  --bg: #0b0f1a;
  --bg-soft: #0f1524;
  --fg: #e6eaf3;
  --muted: #a9b3c7;
  --accent: #18d1a1;   /* ajuste para a paleta da MTR */
  --accent-2: #6cc7ff; /* ajuste para a paleta da MTR */
  --stroke: #1e2639;
  --card: #0f1422;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:Poppins,system-ui,Segoe UI,Roboto,Arial,sans-serif; color:var(--fg);
  background:radial-gradient(1200px 800px at 80% -10%, rgba(24,209,161,.08), transparent 60%),
             linear-gradient(180deg, #0a0e18, #0c1221 60%, #0a0f1c);
  overflow-x:hidden; scroll-behavior:smooth;
}
a{color:var(--accent); text-decoration:none}
a:hover{filter:brightness(1.08)}

header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(140%) blur(8px);
  background:rgba(11,15,26,.55);
  border-bottom:1px solid var(--stroke);
}
.container{max-width:1200px; margin:0 auto; padding:0 20px}
.nav{display:flex; align-items:center; justify-content:space-between; height:64px}
.brand{display:flex; gap:12px; align-items:center}
.brand-logo{
  width:36px; height:36px; border-radius:10px;
  /* Removed background and text styling as it's now an image */
  display:grid; place-items:center;
}
.nav a{color:var(--muted); margin-left:18px; font-weight:500}
.nav a:hover{color:var(--fg)}

/* Menu sanduíche */
.hamburger-menu {
  display: none; /* Escondido por padrão, visível apenas em telas menores */
  cursor: pointer;
  font-size: 24px;
  color: var(--fg);
}

.mobile-nav {
  display: none; /* Escondido por padrão */
  flex-direction: column;
  background: var(--bg-soft);
  position: absolute;
  top: 64px; /* Abaixo do header */
  left: 0;
  width: 100%;
  border-bottom: 1px solid var(--stroke);
  padding-bottom: 10px;
}

.mobile-nav a {
  padding: 10px 20px;
  color: var(--fg);
  text-align: center;
  width: 100%;
  border-bottom: 1px solid var(--stroke);
}

.mobile-nav a:last-child {
  border-bottom: none;
}

.mobile-nav.active {
  display: flex; /* Mostra o menu quando ativo */
}

/* Esconder menu desktop em telas menores e mostrar o sanduíche */
@media (max-width: 768px) {
  .nav nav {
    display: none; /* Esconde a navegação desktop */
  }
  .hamburger-menu {
    display: block; /* Mostra o ícone do menu sanduíche */
  }
  .nav {
    justify-content: space-between; /* Ajusta o alinhamento quando o menu desktop some */
  }
}

.hero{position:relative; min-height:60vh; display:grid; grid-template-columns: 1.1fr 1fr; gap:28px; align-items:center;}
@media (max-width: 980px){ .hero{grid-template-columns:1fr; padding-top:20px; min-height:auto} }
.hero-copy{padding:40px 0 80px}

.hero-image{
  border-radius: 20px; /* Moldura arredondada */
  overflow: hidden; /* Garante que a imagem respeite o border-radius */
  max-width: 400px; /* Limita a largura máxima da imagem */
  max-height: 400px; /* Define a altura para tornar a imagem quadrada */
  object-fit: contain; /* Garante que a imagem seja redimensionada para caber, sem cortar */
  margin: 0 auto; /* Centraliza a imagem */
}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px; padding:6px 10px;
  border:1px solid var(--stroke); color:var(--muted); border-radius:999px;
  font-size:12px; letter-spacing:.4px
}
.eyebrow .dot{width:8px; height:8px; border-radius:50%; background:var(--accent)}
h1{font-size: clamp(34px, 5vw, 56px); margin:14px 0 10px; line-height:1.05}
.subtitle{color:var(--muted); font-size: clamp(16px, 2vw, 18px)}
.cta-row{display:flex; gap:14px; flex-wrap:wrap; margin-top:24px}
.btn{
  padding:12px 18px; border-radius:12px; border:1px solid var(--stroke);
  background:var(--bg-soft); color:var(--fg); font-weight:600;
}

.btn .fa-brands.fa-whatsapp {
  color: inherit; /* Herda a cor do texto do botão */
}
.btn.primary{background:linear-gradient(135deg,var(--accent), var(--accent-2)); color:#061017; border:none}
.btn:hover{filter:brightness(1.06)}

section{padding:80px 0; border-top:1px solid var(--stroke)}

/* Estilos específicos para a seção "Sobre" se necessário */
#sobre .cards {
  grid-template-columns: repeat(3, 1fr); /* 3 colunas para Missão, Visão, Valores */
}

@media (max-width: 980px){
  #sobre .cards{
    grid-template-columns:1fr; /* Em telas menores, volta para 1 coluna */
  }
}
h2{font-size: clamp(26px, 3.2vw, 36px); margin:0 0 10px}
.lead{color:var(--muted); max-width:740px}
.cards{margin-top:30px; display:grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap:16px}
@media (max-width: 980px){ .cards{grid-template-columns:1fr} }
.card{
  border-radius:10px; /* Arredondamento mais sutil */
  padding:2px; /* Padding para a borda do gradiente */
  max-width: 100%; /* Permite que o card ocupe a largura disponível */
  background: transparent; /* Começa transparente */
  border: 2px solid transparent; /* Borda transparente */
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease, border 0.3s ease;
}
.card h3{margin:0 0 6px; font-size:18px}
.card p{margin:0; color:var(--muted); font-size:14px}
.card:hover, .card.active {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
  background: linear-gradient(135deg, #36a0ff, var(--accent-2)); /* Gradiente azul para o contorno */
  border: 2px solid transparent; /* Borda transparente para o background-clip */
  background-clip: padding-box; /* Garante que o background respeite o border-radius */
  background-origin: border-box; /* Garante que o background comece na borda */
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 20px;
}

@media (max-width: 768px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }
}

/* Remover regras específicas de alinhamento para .contact-card .card-content,
   pois o alinhamento geral será tratado por .card-content */

/* Remover regras específicas de alinhamento para .contact-card .card-content,
   pois o alinhamento geral será tratado por .card-content */

.contact-card .card-content p {
  margin-bottom: 8px;
}

.contact-card .card-content i {
  margin-right: 8px;
  color: var(--accent-2); /* Cor azul para os ícones de contato */
  font-size: 1.2em;
}

.contact-card .card-content .btn {
  margin-top: 15px;
  max-width: 200px; /* Diminui a largura máxima do botão */
}

.contact-grid .card {
  max-width: none; /* Permite que o cartão do formulário ocupe a largura disponível no grid */
}

form{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:20px}
form .full{grid-column:1/-1}
input, textarea{
  width:100%; background:#0a1120; border:1px solid var(--stroke); color:var(--fg);
  padding:12px 12px; border-radius:12px; outline:none
}
textarea{min-height:120px; resize:vertical}

footer{padding:30px 0; color:var(--muted); text-align:center; border-top:1px solid var(--stroke)}

.project-card-image {
  width: 100%; /* A imagem preenche a largura disponível no card-content */
  height: 150px; /* Altura menor para proporção retangular */
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 20px; /* Mais espaço entre a imagem e o título */
}

@media (max-width: 768px) {
  .project-card-image {
    height: 100%; /* Ajusta a altura da imagem para ser igual à largura */
    aspect-ratio: 1/1; /* Garante que a imagem seja quadrada */
  }
}

/* Botão flutuante do WhatsApp */
.whatsapp-float {
  position: fixed;
  width: 60px;
  height: 60px;
  bottom: 40px;
  right: 40px;
  background-color: #25d366;
  color: #FFF;
  border-radius: 50px;
  text-align: center;
  font-size: 30px;
  box-shadow: 2px 2px 3px #999;
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: center;
}

.whatsapp-float i {
  margin-top: 2px;
}

@media (max-width: 768px) {
  .whatsapp-float {
    width: 50px;
    height: 50px;
    bottom: 20px;
    right: 20px;
    font-size: 25px;
  }
}

.card-content {
  background: var(--card);
  padding: 18px;
  border-radius: 8px; /* Ligeiramente menor que o border-radius do .card */
  height: 100%; /* Garante que o conteúdo preencha o card */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start; /* Alinha itens à esquerda */
}

.card-content h3,
.card-content p {
  margin: 0; /* Remover margens padrão */
  text-align: left; /* Alinhar texto à esquerda */
}

.card-icon {
  font-size: 3em;
  color: var(--accent); /* Cor verde-água */
  margin-bottom: 10px; /* Espaçamento entre o ícone e o título */
}