/* ===== VARIÁVEIS GLOBAIS (NOVA PALETA DE CORES VERDE) ===== */
:root {
  /* Cores extraídas do novo logotipo M5 */
  --primary-green: #38A169;      /* Verde principal do logo */
  --primary-green-dark: #2F855A;  /* Verde escuro para textos e footer */
  --accent-green: #48BB78;      /* Verde mais claro para hover e destaques */
  
  /* Cores Neutras (mantidas para um look limpo) */
  --background-light: #f8f9fa;  /* Fundo secundário quase branco */
  --background-white: #ffffff;  /* Branco puro */
  --text-dark: #2A433A;         /* Texto principal (tom de verde muito escuro) */
  --text-secondary: #6c757d;    /* Texto secundário (cinza) */
  --text-light: #ffffff;        /* Texto claro (branco) */
  --border-color: #e9ecef;      /* Bordas e divisórias */
  --shadow-light-color: rgba(44, 62, 80, 0.08); /* Sombra mais suave - COR APENAS */
  --shadow-medium-color: rgba(44, 62, 80, 0.15); /* Sombra média - COR APENAS */

   /* Cores para Calculadoras */
  --cor-erro: #d62828; /* Adicionada para mensagens de erro, se não existir */
  --cor-sucesso: var(--primary-green-dark); /* Adicionada para mensagens de sucesso */
  --accent-green-xlight: #e8f5e9; /* Adicionar se não existir */

  /* Tipografia */
  --font-heading: 'Montserrat', sans-serif;
  --font-body: 'Lato', sans-serif;
  
  /* Espaçamentos */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 2rem;
  --spacing-lg: 3rem;
  --spacing-xl: 4rem;
  
  /* Transições */
  --transition-fast: 0.2s ease;
  --transition-medium: 0.3s ease;
  --transition-slow: 0.5s ease;

  /* Variáveis de sombra completas para facilitar o uso */
  --box-shadow-light: 0 5px 15px var(--shadow-light-color);
  --box-shadow-medium: 0 10px 25px var(--shadow-medium-color);
  --box-shadow-card: 0 2px 4px var(--shadow-light-color);
}

/* ===== RESET E BASE ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-dark);
  background-color: var(--background-white);
  overflow-x: hidden;
}

/* ===== TIPOGRAFIA ===== */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: var(--spacing-sm);
  color: var(--text-dark);
}

h1 {
  font-size: 3rem;
  font-weight: 700;
}

h2 {
  font-size: 2.5rem;
}

h3 {
  font-size: 2rem;
}

h4 {
  font-size: 1.5rem;
}

h5 {
  font-size: 1.25rem;
}

h6 {
  font-size: 1rem;
}

p {
  margin-bottom: var(--spacing-sm);
  color: var(--text-secondary);
}

a {
  color: var(--primary-green);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--accent-green);
}

/* ===== LAYOUT GERAL ===== */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-sm);
}

.section {
  padding: var(--spacing-xl) 0;
}

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

/* ===== HEADER ===== */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: var(--primary-green); /* Cor verde do logo aplicada ao header */
  box-shadow: 0 2px 10px var(--shadow-light-color);
  z-index: 1000;
  transition: all var(--transition-medium);
}

.header.scrolled {
  /* Mantém o verde com um pouco de transparência ao rolar */
  background-color: rgba(56, 161, 105, 0.95); /* Usando o valor de --primary-green com alfa */
  backdrop-filter: blur(10px);
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-sm) 0;
}

.logo {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  /* Remove o sublinhado padrão de links */
  text-decoration: none;
}

/* Remove qualquer efeito de hover no logo */
.header .logo:hover {
  background-color: transparent;
}

.header .logo img { /* Especificando para o logo dentro do .header */
  height: 50px;
  width: auto;
  background-color: var(--background-white); /* Fundo branco */
  border-radius: 50%; /* Torna o fundo circular */
  padding: 5px; /* Pequeno respiro interno */
  box-shadow: 0 1px 3px rgba(0,0,0,0.1); /* Opcional: uma leve sombra para destacar mais */
}

.logo-text {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-light); /* Texto do logo em branco */
  letter-spacing: 0.5px; /* Ligeiro espaçamento entre letras, como sugerido */
}

/* Estilizando o <sup> para melhor integração visual */
.header .logo-text sup {
  font-size: 0.65em; /* Tamanho um pouco menor que o texto principal */
  font-weight: 600; /* Pode ser um pouco menos bold que o texto principal */
  vertical-align: super; /* Alinhamento padrão, pode ser ajustado com 'top' se necessário */
  line-height: 0; /* Evita que o sup afete a altura da linha do "Money" */
  margin-left: 1px; /* Pequeno ajuste para aproximar o '5' */
}

/* ===== NAVEGAÇÃO ===== */
.nav {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
}

.nav-menu {
  display: flex;
  list-style: none;
  gap: var(--spacing-md);
  align-items: center; /* FIX: Alinha verticalmente todos os itens do menu no desktop */
}

.nav-link {
  font-weight: 500;
  color: var(--text-light); /* Links de navegação em branco */
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: 5px;
  transition: all var(--transition-fast);
  display: flex; /* FIX: Garante consistência de alinhamento para todos os links */
  align-items: center; /* FIX: Centraliza o conteúdo (texto ou ícone+texto) verticalmente */
}

.nav-link:hover {
  color: var(--text-light); /* Mantém texto branco */
  background-color: rgba(255, 255, 255, 0.15); /* Fundo levemente mais claro no hover */
}

.nav-link-user-icon {
  gap: var(--spacing-xs);
}

.nav-user-icon {
  width: 22px;
  height: 22px;
  stroke-width: 1.5;
  flex-shrink: 0; /* Adicionado para robustez em flexbox, especialmente no Safari */
}

/* Esconde o texto "Login" por padrão em todos os cenários */
.nav-user-text {
  display: none;
}

/* Mostra o texto "Login" APENAS quando o menu mobile estiver ativo */
.header .nav-menu.active .nav-user-text {
  display: inline;
}


.nav-link.active {
  color: var(--text-light); /* Mantém texto branco */
  background-color: rgba(255, 255, 255, 0.2); /* Fundo um pouco mais destacado para o ativo */
  font-weight: 600;
}

.cta-button {
  background-color: var(--primary-green);
  color: var(--text-light);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: 25px;
  font-weight: 600;
  transition: all var(--transition-fast);
  border: none;
  cursor: pointer;
}

.cta-button:hover {
  background-color: var(--primary-green-dark); /* Um tom de verde mais escuro para o hover do botão CTA */
  transform: translateY(-2px);
  box-shadow: 0 5px 15px var(--shadow-medium-color);
}

/* Menu Mobile */
.mobile-menu-toggle {
  display: none;
  flex-direction: column;
  cursor: pointer;
  padding: var(--spacing-xs);
}

.hamburger-line {
  width: 25px;
  height: 3px;
  background-color: var(--text-light); /* Linhas do hambúrguer em branco */
  margin: 3px 0;
  transition: all var(--transition-fast);
}

/* ===== HERO SECTION ===== */
.hero {
  padding: var(--spacing-xl) 0;
  background: linear-gradient(135deg, var(--background-light) 0%, var(--background-white) 100%);
  position: relative; 
}

.hero::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(45deg, transparent 0%, var(--primary-green) 100%);
  opacity: 0.05;
  z-index: 1;
}

.hero-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-xl);
  align-items: center;
  position: relative;
  z-index: 2;
}

.hero-text h1 {
  font-size: 3rem; /* Reduzido para caber em uma linha */
  margin-bottom: var(--spacing-md);
  background: linear-gradient(135deg, var(--primary-green-dark) 0%, var(--primary-green) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.1; /* Ajuste para melhor visualização em uma linha */
}

.hero-text p {
  font-size: 1.25rem;
  margin-bottom: var(--spacing-lg);
  color: var(--text-secondary);
}

.hero-buttons {
  display: flex;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
}

.btn-primary {
  background-color: var(--primary-green);
  color: var(--text-light);
  padding: calc(var(--spacing-sm) - 2px) calc(var(--spacing-lg) - 2px); /* Ajusta padding para acomodar a borda */
  border-radius: 30px;
  font-weight: 600;
  transition: all var(--transition-fast);
  border: 2px solid var(--primary-green); /* Borda verde adicionada */
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.btn-primary:hover {
  background-color: var(--primary-green-dark); /* Verde mais escuro no hover */
  border-color: var(--primary-green-dark); /* Borda também mais escura no hover */
  color: var(--text-light); /* Garante que o texto permaneça branco no hover */
  transform: translateY(-2px); /* Efeito de elevação no hover */
  box-shadow: 0 8px 25px var(--shadow-medium-color); /* Sombra mais pronunciada no hover */
}
.btn-primary:active {
  transform: translateY(1px); /* Leve afundamento ao clicar */
  box-shadow: 0 4px 15px var(--shadow-light-color); /* Sombra um pouco menor */
}

/* Estilo para o botão primário quando desabilitado */
.btn-primary:disabled {
  background-color: var(--background-light, #f0f0f0); /* Fundo cinza claro */
  color: var(--text-secondary, #aaaaaa); /* Texto cinza claro */
  border-color: var(--border-color, #dddddd); /* Borda cinza */
  cursor: not-allowed; /* Cursor indicando que não é clicável */
  box-shadow: none; /* Remove sombra quando desabilitado */
  transform: none; /* Remove qualquer transformação quando desabilitado */
}

.btn-secondary {
  background-color: transparent;
  color: var(--primary-green-dark);
  padding: var(--spacing-sm) var(--spacing-lg);
  border: 2px solid var(--primary-green);
  border-radius: 30px;
  font-weight: 600;
  transition: all var(--transition-fast);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.btn-secondary:hover {
  background-color: var(--primary-green);
  color: var(--text-light);
  transform: translateY(-2px);
}
.btn-secondary:active {
  transform: translateY(1px); /* Leve afundamento ao clicar */
  transform: translateY(-2px);
}

.hero-image {
  text-align: center;
}

.hero-image img {
  max-width: 100%;
  height: auto;
  border-radius: 15px;
  box-shadow: 0 20px 40px var(--shadow-medium-color);
}

/* ===== CARDS E FEATURES ===== */
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing-lg);
  margin-top: var(--spacing-lg);
}
.feature-card-link {
  text-decoration: none;
  color: inherit; /* Herda a cor do texto do pai */
  display: flex; /* Alterado de block para flex */
  flex-direction: column; /* Para empilhar o .feature-card verticalmente */
  height: 100%; /* Faz o link ocupar toda a altura da célula do grid */
  border-radius: 15px; /* Para o hover cobrir o card arredondado */
  transition: background-color var(--transition-fast);
}

.feature-card {
  background-color: var(--background-white);
  padding: var(--spacing-lg);
  border-radius: 15px;
  box-shadow: 0 5px 20px var(--shadow-light-color);
  text-align: center;
  transition: all var(--transition-medium);
  border: 1px solid var(--border-color);
  height: 100%; /* Faz o card preencher toda a altura do link pai */
  display: flex; /* Adicionado para melhor controle do conteúdo interno */
  flex-direction: column; /* Empilha o conteúdo do card verticalmente */
}

.feature-icon {
  width: 60px;
  height: 60px;
  background-color: var(--accent-green-xlight); /* Alterado para verde claro */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--spacing-sm);
  color: var(--text-light);
  font-size: 1.5rem;
  transition: background-color var(--transition-medium), color var(--transition-medium); /* Adicionado para transição suave */
}

.feature-card h3 {
  color: var(--primary-green-dark);
  margin-bottom: var(--spacing-sm);
  transition: color var(--transition-medium); /* Adicionado para transição suave */
}

.feature-card p {
  transition: color var(--transition-medium);
}

.feature-card-link:hover .feature-card {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px var(--shadow-medium-color);
  background-color: var(--primary-green); 
}

.feature-card-link:hover .feature-card h3,
.feature-card-link:hover .feature-card p {
  color: var(--text-light); 
}

.feature-card-link:hover .feature-card .feature-icon {
  background-color: var(--background-white); 
  color: var(--primary-green); 
}

/* ===== SEÇÕES DE CONTEÚDO ===== */
.content-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-xl);
  align-items: center;
}

.content-text h2 {
  color: var(--primary-green-dark);
  margin-bottom: var(--spacing-md);
}

.content-list {
  list-style: none;
  margin-top: var(--spacing-md);
}

.content-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
  padding: var(--spacing-sm);
  background-color: var(--background-light);
  border-radius: 10px;
  transition: all var(--transition-fast);
}

.content-list li:hover {
  transform: translateY(-5px); 
  box-shadow: 0 10px 25px var(--shadow-medium-color); 
}

.content-list li::before {
  content: '✓';
  color: var(--primary-green);
  font-weight: bold;
  font-size: 1.2rem;
  transition: color var(--transition-fast); 
}

/* ===== FORMULÁRIO DE CONTATO ===== */
.contact-form {
  background-color: var(--background-white);
  padding: var(--spacing-lg);
  border-radius: 15px;
  box-shadow: 0 10px 30px var(--shadow-light-color);
}

.form-group {
  margin-bottom: var(--spacing-md);
}

.form-group label {
  display: block;
  margin-bottom: var(--spacing-xs);
  font-weight: 600;
  color: var(--primary-green-dark);
}

.form-control {
  width: 100%;
  padding: var(--spacing-sm);
  border: 2px solid var(--border-color);
  border-radius: 8px;
  font-size: 1rem;
  transition: all var(--transition-fast);
  font-family: var(--font-body);
}

.form-control:focus {
  outline: none;
  border-color: var(--primary-green);
  box-shadow: 0 0 0 3px rgba(56, 161, 105, 0.1);
}

textarea.form-control {
  resize: vertical;
  min-height: 120px;
}

/* ===== FOOTER ===== */
.footer {
  background-color: var(--primary-green-dark);
  color: var(--text-light);
  margin-top: var(--spacing-lg); 
  padding: var(--spacing-xl) 0 var(--spacing-md) 0;
}

.footer-container {
  display: grid;
  /* Colunas: Identidade | Grupo de Links | Navegação Extra */
  grid-template-columns: 2fr 2fr 1fr; /* Aumenta o espaço para o grupo de links */
  align-items: flex-start;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}

.footer-links-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm); /* Espaço entre "Artigos", "Calculadoras", "Testes" */
}

.footer-section {
  min-width: 0; /* Reseta o min-width para o grid funcionar bem */
}

.footer-identidade {
  /* Estilos antigos de flex removidos para o grid funcionar corretamente */
  margin-right: 0;
}

.footer .logo { 
  margin-bottom: var(--spacing-sm);
  display: flex; 
  align-items: center;
  gap: var(--spacing-sm); 
}

.footer .logo img {
  height: 50px;
  background-color: var(--background-white);
  border-radius: 50%;
  padding: 5px;
}

.footer .logo-text {
  color: var(--text-light); 
  font-size: 1.5rem;
  font-weight: 700;
}

.footer .logo-text sup {
  font-size: 0.65em;
  vertical-align: super;
  line-height: 0;
}

.footer-identidade p {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.9rem; 
}

.social-links { /* Alterado de .footer-social para .social-links para consistência e centralização */
  display: flex;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-sm);
  /* justify-content: center; será aplicado na media query mobile */
}

.social-link {
  width: 40px;
  height: 40px;
  background-color: rgba(255, 255, 255, 0.1); 
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}

.social-link svg {
  fill: var(--text-light); 
  transition: fill var(--transition-fast);
}

.social-link:hover {
  background-color: var(--background-white); 
}

.social-link:hover svg {
  fill: var(--primary-green-dark); 
}

.footer-section h3 {
  color: var(--text-light);
  font-size: 1rem; /* Tamanho da fonte reduzido */
  font-weight: 600; /* Peso da fonte ajustado */
  margin-bottom: var(--spacing-sm); /* Margem inferior ajustada */
  text-transform: uppercase; /* Opcional: para um visual mais limpo */
  letter-spacing: 0.5px; /* Opcional: espaçamento entre letras */
}

/* Estilos do Acordeão do Rodapé (agora globais) */
.footer-section h3.footer-titulo {
    cursor: pointer;
    position: relative;
    display: inline-flex; /* Para que o título e a seta fiquem juntos */
    align-items: center;
    transition: color var(--transition-fast);
}

.footer-arrow {
    display: inline-block;
    margin-left: var(--spacing-xs);
    transition: transform 0.3s ease;
    font-size: 0.8em;
}

.footer-section h3.footer-titulo.active .footer-arrow {
    transform: rotate(180deg);
}

.footer-section .footer-links {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease-in-out, padding-top 0.35s ease-in-out;
    list-style: none;
    padding-left: 0;
}

.footer-section .footer-links.active {
    max-height: 500px; /* Um valor alto para permitir a expansão */
    padding-top: var(--spacing-sm); /* Adiciona espaço quando aberto */
}

.footer-links {
  list-style: none;
  padding-left: 0;
}

.footer-links li {
  margin-bottom: var(--spacing-xs);
}

.footer-links a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  transition: color var(--transition-fast);
  font-size: 0.9rem; /* Tamanho da fonte dos links */
}

.footer-links a:hover {
  color: var(--text-light); 
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: var(--spacing-md);
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
}

.footer-bottom p {
  color: rgba(255, 255, 255, 0.8); /* Cinza mais claro, próximo ao branco */
  margin-bottom: 0; /* Remove a margem inferior padrão do parágrafo */
}

/* ===== RESPONSIVIDADE ===== */
@media (max-width: 1023px) { 
  .nav-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--background-white);
    flex-direction: column;
    padding: var(--spacing-md) var(--spacing-sm); /* Adiciona o recuo lateral a todo o menu de uma vez */
    box-shadow: var(--box-shadow-light);
  }
  
  .nav-menu.active {
    display: flex;
  }

  .header .nav-menu.active .nav-link { 
    color: var(--primary-green-dark); 
    padding: var(--spacing-sm) 0; /* Remove o recuo dos itens individuais para que o texto comece na esquerda */
    width: 100%;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
    border-radius: 0; 
  }
  /* FIX: Nenhuma regra extra é necessária aqui, pois .nav-link agora controla o alinhamento de todos os itens. */

  .header .nav-menu.active .nav-link:last-child {
    border-bottom: none;
  }

  .header .nav-menu.active .nav-link:hover {
    background-color: var(--background-light);
    color: var(--accent-green);
  }
  .header .nav-menu.active .nav-link.active { 
    background-color: var(--primary-green-dark);
    color: var(--text-light);
  }
  
  .mobile-menu-toggle {
    display: flex;
  }
  
  .header-content .logo {
    margin-right: auto; 
  }

  .nav { 
    margin-right: var(--spacing-xs); 
    gap: 0; 
  }

  .hero-content {
    grid-template-columns: 1fr;
    text-align: center;
  }
  
  .content-section {
    grid-template-columns: 1fr;
  }
  
  .features-grid {
    grid-template-columns: 1fr;
  }
  
  h1 {
    font-size: 2.5rem;
  }
  
  h2 {
    font-size: 2rem;
  }
  
  .container {
    padding: 0 var(--spacing-sm);
  }

  .calculator-form-container .hero-buttons {
    flex-direction: column; 
    align-items: center; /* Centraliza os botões (que terão width: auto) */
  }

  /* Footer Accordion no Mobile */
  .footer-content {
      flex-direction: column;
  }
  .footer-identidade { 
      margin-right: 0;
      margin-bottom: var(--spacing-lg);
      text-align: center; 
  }
  .footer-identidade .logo,
  .footer-identidade .social-links { /* Centraliza os ícones sociais */
      justify-content: center; 
  }
  .footer-container {
      grid-template-columns: 1fr; /* Coluna única no mobile */
      gap: var(--spacing-lg);
  }

  .footer-links-group {
      /* A direção da flexbox já é 'column', então só ajustamos o gap */
      gap: var(--spacing-lg);
  }

  .footer-section { 
      width: 100%; 
      margin-bottom: var(--spacing-xs);
  }
  /* No mobile, apenas ajustamos o espaçamento e a borda,
     pois o comportamento do acordeão já é global. */
  .footer-section h3.footer-titulo {
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      padding-bottom: var(--spacing-sm);
      margin-bottom: 0;
  }
  .footer-section .footer-links {
      padding-left: var(--spacing-sm); /* Mantém o recuo dos links no mobile */
  }
  .footer-section .footer-links.active {
      padding-top: var(--spacing-sm); /* Garante o espaçamento superior no mobile quando ativo */
  }
  .footer-links li { 
    margin-bottom: 0.25rem; 
  }
}

@media (max-width: 480px) {
  .hero-text h1 {
    font-size: 2rem;
  }
  
  .hero-buttons {
    flex-direction: column;
    align-items: center;
  }
  
  .btn-primary,
  .btn-secondary {
    width: auto; /* Botões genéricos não ocuparão 100% por padrão nesta view */
  }
  /* Garante que os botões da calculadora especificamente tenham seu conteúdo (texto e ícone) centralizado */
  .calculator-form-container .hero-buttons .btn-primary,
  .calculator-form-container .hero-buttons .btn-secondary {
    width: auto; /* Faz o botão se ajustar ao conteúdo */
    /* As propriedades display:flex, align-items:center, e gap
       já são herdadas das regras base de .btn-primary e .btn-secondary.
       justify-content: center; também é herdado e deveria funcionar.
       Se o conteúdo interno ainda estiver à esquerda, o problema é mais profundo
       e pode exigir inspecionar elementos filhos ou conflitos de text-align. */
  }
}

/* ===== ANIMAÇÕES E EFEITOS ===== */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in-up {
  animation: fadeInUp 0.6s ease-out;
}

/* ===== UTILITÁRIOS ===== */
.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--spacing-xs); }
.mb-2 { margin-bottom: var(--spacing-sm); }
.mb-3 { margin-bottom: var(--spacing-md); }
.mb-4 { margin-bottom: var(--spacing-lg); }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--spacing-xs); }
.mt-2 { margin-top: var(--spacing-sm); }
.mt-3 { margin-top: var(--spacing-md); }
.mt-4 { margin-top: var(--spacing-lg); }

/* ===== CORREÇÃO FINAL PARA O CABEÇALHO FIXO ===== */
main {
  padding-top: 80px; 
}

main > .hero {
  padding-top: var(--spacing-xl);
}

/* ===== BOTÃO DE CONTATO RESPONSIVO NO HEADER ===== */
.header .cta-button.fale-conosco-responsivo {
  display: inline-flex;
  align-items: center; 
  gap: var(--spacing-xs); 
  background-color: var(--background-white); 
  color: var(--primary-green-dark); 
}

.header .fale-conosco-responsivo .fale-conosco-icon {
  display: none; 
  line-height: 0; 
}

.header .fale-conosco-responsivo .fale-conosco-icon svg {
  display: block; 
  width: 20px;    
  height: 20px;   
  stroke: currentColor; 
}

.header .cta-button.fale-conosco-responsivo:hover {
  background-color: var(--primary-green-dark); 
  color: var(--text-light);                
}

.header .fale-conosco-responsivo .fale-conosco-text {
  display: inline; 
}

@media (max-width: 1023px) { 
  .header .fale-conosco-responsivo .fale-conosco-icon {
    display: inline-flex; 
  }
  .header .fale-conosco-responsivo .fale-conosco-text {
    display: none; 
  }
  .header .cta-button.fale-conosco-responsivo {
    padding: var(--spacing-sm) var(--spacing-sm); 
    gap: 0; 
  }
}

/* ==========================================================================
   Dropdown Menu Styles
   ========================================================================== */
.nav-menu .nav-item.dropdown {
    position: relative; 
}

.nav-menu .nav-item.dropdown .nav-link .dropdown-arrow {
    font-size: 0.7em; 
    margin-left: 4px;
    vertical-align: middle;
    display: inline-block;
    transition: transform 0.3s ease;
}

.nav-menu .nav-item.dropdown:hover .nav-link .dropdown-arrow {
    transform: rotate(180deg);
}

.nav-menu .dropdown-menu {
    display: none; 
    position: absolute;
    top: 100%; 
    left: 0;
    background-color: var(--background-white, #ffffff); 
    border: 1px solid var(--border-color, #e0e0e0); 
    border-top: none; 
    border-radius: 0 0 var(--border-radius-sm, 6px) var(--border-radius-sm, 6px); 
    box-shadow: 0 4px 12px var(--shadow-medium-color); 
    padding: 8px 0; 
    min-width: 240px; 
    z-index: 1000; 
    list-style: none; 
    margin: 0; 
}

.nav-menu .nav-item.dropdown:hover .dropdown-menu,
.nav-menu .nav-item.dropdown .nav-link:focus + .dropdown-menu, 
.nav-menu .nav-item.dropdown .dropdown-menu:hover { 
    display: block;
}

.nav-menu .dropdown-menu .dropdown-item {
    display: block;
    padding: 10px 20px; 
    color: var(--text-dark, #333333); 
    text-decoration: none;
    font-size: 0.9rem; 
    white-space: nowrap; 
    transition: background-color 0.2s ease, color 0.2s ease;
}

.nav-menu .dropdown-menu .dropdown-item:hover,
.nav-menu .dropdown-menu .dropdown-item:focus {
    background-color: var(--primary-green-xlight, #e8f5e9); 
    color: var(--primary-green-dark, #2e7d32); 
    text-decoration: none;
}

@media (max-width: 1023px) {
    .nav-menu .dropdown-menu {
        position: static; 
        box-shadow: none;
        border: none;
        border-top: 1px solid var(--border-color, #eee); 
        background-color: transparent; 
        width: 100%;
        padding-left: 20px; 
        border-radius: 0; 
        min-width: auto; 
    }

    .nav-menu .dropdown-menu .dropdown-item {
        padding: var(--spacing-sm) var(--spacing-md); 
        color: var(--primary-green-dark); 
        font-size: 1rem; 
    }

    .nav-menu .dropdown-menu .dropdown-item:hover,
    .nav-menu .dropdown-menu .dropdown-item:focus {
        background-color: var(--background-light);
        color: var(--accent-green);
    }
}

/* ==========================================================================
   ESTILOS DA CALCULADORA - CORREÇÃO DEFINITIVA DO FORMULÁRIO
   ========================================================================== */
.calculator-grid-inputs {
  display: grid;
  grid-template-columns: 1fr; /* Padrão UMA coluna (mobile) */
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

/* No mobile, os itens .pergunta-X fluirão naturalmente na única coluna. */


.form-group { 
  margin-bottom: 0; /* O gap do grid já cuida do espaçamento, se for filho direto do grid */
                     /* Se .form-group estiver dentro de .pergunta-item, esta regra pode não ser necessária aqui */
}

.form-group label.form-label { 
  display: block;
  margin-bottom: var(--spacing-xs);
  font-weight: 600; 
  color: var(--primary-green-dark); 
}

.input-wrapper { 
  position: relative;
  display: flex;
  align-items: center;
}

.form-control.erro { 
  border-color: var(--cor-erro) !important; 
  box-shadow: 0 0 0 3px rgba(214, 40, 40, 0.1);
}

.input-symbol { 
  position: absolute;
  color: var(--text-secondary);
  font-weight: 500;
  padding: 0 var(--spacing-sm);
  line-height: calc(var(--spacing-sm) * 2 + 1rem); 
  pointer-events: none; 
}

.input-wrapper.with-symbol-left .input-symbol {
  left: 0;
}
.input-wrapper.with-symbol-right .input-symbol {
  right: 0;
}

.input-wrapper.with-symbol-left .form-control {
  padding-left: calc(var(--spacing-sm) + 25px); 
}
.input-wrapper.with-symbol-right .form-control {
  padding-right: calc(var(--spacing-sm) + 25px); 
}

.campo-erro { 
  color: var(--cor-erro);
  font-size: 0.875rem;
  margin-top: var(--spacing-xs);
  min-height: 1.25rem; 
}

.form-group.disabled-group {
  opacity: 0.6; 
  pointer-events: none; 
}

.form-group.disabled-group .input-wrapper .form-control {
  background-color: var(--background-light, #f8f9fa); 
  color: var(--text-secondary, #6c757d); 
  border-color: var(--border-color, #e9ecef); 
}
.form-group.disabled-group .input-wrapper .input-symbol {
  color: var(--text-secondary, #6c757d); 
}

/* Elementos que só devem aparecer na impressão */
.print-only {
  display: none;
}

/* ===== ESTILOS DE IMPRESSÃO (ADAPTADOS DO SEU ORIGINAL E MELHORADOS) ===== */
@media print {
  body {
    font-size: 10pt; /* Reduzido para compactar */
    color: #000;
    background-color: #fff !important; 
    line-height: 1.2; /* Reduzido para compactar */
    -webkit-print-color-adjust: exact !important; /* Garante que cores de fundo e texto sejam impressas */
    print-color-adjust: exact !important;
  }

  header.header, 
  footer.footer:not(#footer-calc-placeholder), 
  .mobile-menu-toggle,
  .header .cta-button.fale-conosco-responsivo,
  #calculadoraForm .hero-buttons, 
  .no-print {
    display: none !important;
  }

  main {
    padding-top: 0 !important;
  }
  main > .hero { 
      padding-top: 0 !important;
  }

  .section {
    padding: 5px 0 !important; /* Reduzido drasticamente */
    box-shadow: none !important;
    border: none !important;
    margin-bottom: 5px !important; /* Reduzido drasticamente */
  }
  .section-alt {
    background-color: #fff !important;
  }

  .container.printable-content { 
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
  }
  
  body * {
      visibility: hidden;
  }
  .printable-content, .printable-content *,
  .print-only, .print-only * {
      visibility: visible;
  }
  .print-only {
      display: block !important;
  }
  #footer-calc-placeholder, #footer-calc-placeholder * {
    visibility: visible !important;
  }

  .form-group {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    margin-bottom: 2px !important; /* Reduzido margin */
    padding-bottom: 2px !important; /* Reduzido padding */
    border-bottom: 1px solid #eee !important; /* Borda mais sutil */
    font-size: 9pt !important;
  }
  .form-group:last-child {
    border-bottom: none;
  }

  .form-group label.form-label {
    flex-basis: auto !important; /* Ajustado para conteúdo */
    margin-bottom: 0 !important;
    font-weight: normal !important; 
    color: #333 !important;
    margin-right: 1em !important; /* Espaço entre label e valor */
    font-size: 9pt !important;
  }
  .input-wrapper, .campo-erro {
    display: none !important; 
  }
  .form-group::after { 
    content: attr(data-valor);
    font-weight: normal !important; /* Valor não precisa ser bold */
    color: #000 !important; /* Cor preta para o valor */
    text-align: right !important;
    font-size: 9pt !important;
  }
  
  a {
    text-decoration: none !important;
    color: #000 !important;
  }
  a[href]:after { 
    content: ""; 
  }

  /* Ajustes gerais de títulos e parágrafos para impressão */
  h1, h2 { font-size: 14pt !important; }
  h3 { font-size: 12pt !important; }
  h4 { font-size: 10pt !important; }
  h5 { font-size: 9pt !important; }
  h1, h2, h3, h4, h5, h6 {
    color: #000 !important;
    page-break-after: avoid;
    margin-bottom: 0.25em !important; /* Reduzido margin */
  }
  p {
    color: #333 !important; 
    orphans: 3;
    widows: 3;
    font-size: 9pt !important; /* Reduzido font-size para parágrafos */
    margin-bottom: 0.25em !important; /* Reduzido margin */
  }

  /* Título principal da calculadora e subtítulo */
  .printable-content .text-center h2 { font-size: 14pt !important; margin-bottom: 3px !important; }
  .printable-content .text-center p { font-size: 9pt !important; margin-bottom: 10px !important; }

  .print-header-content {
    display: block !important;
    text-align: center;
    margin-bottom: 20px;
    border-bottom: 1px solid #ccc;
    padding-bottom: 5px !important; /* Reduzido padding */
    display: flex !important; /* Logo e texto lado a lado */
    align-items: center !important;
    justify-content: flex-start !important; /* Alinha à esquerda */
    text-align: left !important;
  }
  .print-header-content img {
    max-height: 30px !important; /* Reduzido tamanho do logo */
    margin-bottom: 0 !important;
    margin-right: 10px !important; /* Espaço entre logo e texto */
  }
  .print-header-content p {
    font-size: 1.1em !important; /* Aumentado um pouco para destaque */
    margin: 0 !important;
    color: #000 !important;
  }

  .print-footer-content {
    display: block !important;
    text-align: center;
    margin-top: 30px;
    padding-top: 10px;
    border-top: 1px solid #ccc;
    font-size: 0.8em;
    color: #555;
  }
  .print-footer-content p {
    margin: 3px 0;
    color: #555 !important;
  }

}

/* Estilos para a seção de Termos e Condições */
.termos-condicoes-wrapper {
    background-color: #f8f9fa; 
    color: #6c757d;           
    font-size: 0.8rem;        
    padding: 15px 20px;       
    border-radius: var(--border-radius-md, 6px); 
    margin-top: var(--spacing-xl, 40px); 
    border: 1px solid #e9ecef; 
    line-height: 1.5;
}

.termos-condicoes-wrapper h5 { 
    font-size: 0.95rem;
    color: #495057; 
    margin-top: 0;
    margin-bottom: 10px;
}

.termos-condicoes-wrapper p,
.termos-condicoes-wrapper ul,
.termos-condicoes-wrapper li { 
    color: #6c757d;
    margin-bottom: 0.5em;
}

.termos-condicoes-wrapper ul {
    padding-left: 20px; 
}
/* --- Estilos para Notificações (Toasts) --- */
/* --- Estilos para Notificações (Toasts) --- */
.notification {
    /* Estilos base já são aplicados via JS, aqui podemos adicionar ou sobrescrever */
}

.notification-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.notification-icon svg {
    width: 20px;
    height: 20px;
    stroke-width: 2.5; /* Deixar o traço do ícone um pouco mais grosso */
}

.notification-message {
    flex-grow: 1;
    line-height: 1.4;
    margin-right: 10px; /* Espaço antes do botão de fechar se não usar gap no flex container */
}

.notification-close-btn {
    background: none;
    border: none;
    color: inherit; /* Herda a cor do texto da notificação (branco na maioria dos casos) */
    font-size: 24px; /* Tamanho do 'X' */
    line-height: 1;
    padding: 0; /* Remover padding para melhor alinhamento */
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s ease;
    align-self: flex-start; /* Alinha no topo se o toast tiver múltiplas linhas */
}
.notification-close-btn:hover {
    opacity: 1;
}