/* REMOVIDO: Media query específica para 600px */
/* O menu hamburguer agora é controlado pela media query de 768px *//* ===================================================================
   NOVO: EFEITO DE SCROLL NO HEADER
   Header mais compacto quando rola a página
   =================================================================== */
header.scrolled {
  padding: 8px 0;
  background: rgba(10, 10, 10, 0.95);
  box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.9);
}

/* ===================================================================
   MENU HAMBURGUER - SEMPRE VISÍVEL EM MOBILE
   Botão de menu para dispositivos móveis
   =================================================================== */
.menu-toggle {
  display: none;
  position: fixed !important;   /* CORREÇÃO: Important para garantir posição fixa */
  top: 15px !important;         /* CORREÇÃO: Important para manter no topo */
  right: 20px !important;       /* CORREÇÃO: Important para manter à direita */
  background: #000 !important;  /* CORREÇÃO: Cor sólida para garantir visibilidade */
  border: 2px solid #00bfff !important;
  border-radius: 5px !important;
  cursor: pointer;
  padding: 0 !important;
  width: 40px !important;
  height: 40px !important;
  z-index: 999999 !important;   /* CORREÇÃO: Z-index máximo absoluto */
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  transform: translateZ(0);     /* CORREÇÃO: Force hardware acceleration */
  -webkit-transform: translateZ(0); /* CORREÇÃO: Safari compatibility */
  box-shadow: 0 2px 5px rgba(0,0,0,0.3) !important; /* CORREÇÃO: Sombra para destacar */
}

.menu-toggle span {
  display: block !important;
  width: 24px !important;
  height: 2px !important;
  background: #00bfff !important;
  margin: 5px auto !important;
  transition: all 0.3s ease;
  border-radius: 2px;
  pointer-events: none;
}

/* Menu overlay para mobile */
.mobile-menu-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.98);
  z-index: 9999;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.mobile-menu-overlay.active {
  display: block;
}

.mobile-menu-content {
  padding: 80px 20px 40px;
  text-align: center;
  min-height: 100vh;
}

.mobile-menu-content ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mobile-menu-content ul li {
  margin: 15px 0;
  display: block;
}

.mobile-menu-content ul li a {
  color: white;
  text-decoration: none;
  font-size: 1.3rem;
  font-weight: 500;
  padding: 15px 30px;
  display: inline-block;
  border: 2px solid transparent;
  border-radius: 30px;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 1px;
  background: rgba(255, 255, 255, 0.05);
  -webkit-tap-highlight-color: transparent;
}

.mobile-menu-content ul li a:active,
.mobile-menu-content ul li a:hover {
  background: rgba(0, 191, 255, 0.2);
  border-color: #00bfff;
  color: #00bfff;
}

/* Botão de fechar */
.close-menu {
  position: fixed;
  top: 15px;
  right: 20px;
  background: rgba(0, 0, 0, 0.9);
  border: 2px solid #00bfff;
  color: #00bfff;
  font-size: 1.8rem;
  cursor: pointer;
  padding: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  z-index: 10001;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  line-height: 1;
  font-family: Arial, sans-serif;
}

/* Animação do hamburguer */
.menu-toggle.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.menu-toggle.active span:nth-child(2) {
  opacity: 0;
}

.menu-toggle.active span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}/* ===================================================================
   CONTAINER DO RECAPTCHA - COMPACTO
   Estilização do Google reCAPTCHA
   =================================================================== */
.g-recaptcha {
  display: flex;
  justify-content: center;
  margin: 5px 0;                /* CORREÇÃO: Margem reduzida */
  transform: scale(0.85);       /* CORREÇÃO: Escala reduzida */
  transform-origin: center;
}

/* Labels flutuantes (se quiser implementar) */
.form-group {
  position: relative;
  margin-bottom: 15px;          /* CORREÇÃO: Margem reduzida */
}

/* Ícones nos campos (opcional) */
.form-icon {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.6);
  font-size: 1.2em;
}/* ===================================================================
   HERO SECTION PARA PÁGINAS INTERNAS
   Área de destaque para páginas que não são a home
   =================================================================== */
.conteudo-principal .hero {
  background: rgba(0, 0, 0, 0.7); /* Fundo escuro semi-transparente */
  padding: 40px;                /* Espaçamento interno */
  margin: 20px auto 40px;       /* Margens com espaço inferior */
  border-radius: 15px;          /* Bordas arredondadas */
  max-width: 800px;             /* Largura máxima */
  width: 90%;                   /* Largura responsiva */
  text-align: center;           /* Conteúdo centralizado */
  box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.5); /* Sombra pronunciada */
}

/* Suporte a backdrop-filter para hero de páginas internas */
@supports (backdrop-filter: blur(10px)) {
  .conteudo-principal .hero {
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
}

.conteudo-principal .hero h1 {
  font-family: 'Playfair Display', serif;
  font-size: 2.5em;
  color: #00bfff;
  margin-bottom: 20px;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);
}

.conteudo-principal .hero p {
  font-size: 1.3em;
  color: #f4f4f9;
  margin-bottom: 25px;
}

.conteudo-principal .hero .cta-button {
  background: linear-gradient(45deg, #00bfff, #008cba);
  color: white;
  padding: 15px 35px;
  border-radius: 10px;
  text-decoration: none;
  display: inline-block;
  transition: all 0.3s ease;
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.4);
}

.conteudo-principal .hero .cta-button:hover {
  transform: scale(1.05);
  box-shadow: 0px 6px 20px rgba(0, 0, 0, 0.6);
}/* ===================================================================
   IMPORTAÇÃO DE FONTES
   Importa fontes do Google Fonts para uso no site
   - Inter: fonte sans-serif moderna para textos gerais
   - Playfair Display: fonte serif elegante para títulos
   =================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600&display=swap');

/* ===================================================================
   RESET CSS GLOBAL
   Remove margens e paddings padrões dos navegadores
   Box-sizing: border-box inclui padding e border no tamanho total
   =================================================================== */
* {
  margin: 0;           /* Remove margem padrão de todos elementos */
  padding: 0;          /* Remove padding padrão de todos elementos */
  box-sizing: border-box; /* Inclui padding e border no width/height */
}

/* ===================================================================
   VARIÁVEIS CSS (CSS Custom Properties)
   Define cores e valores reutilizáveis em todo o CSS
   Facilita manutenção e garante consistência visual
   =================================================================== */
:root {
  --primary-blue: #0066cc;      /* Azul primário para elementos principais */
  --accent-cyan: #00d4ff;        /* Ciano para destaques e acentos */
  --dark-bg: #0a0a0a;           /* Fundo escuro quase preto */
  --dark-secondary: #1a1a1a;     /* Fundo escuro secundário */
  --text-light: #f8f9fa;        /* Texto claro para fundos escuros */
  --text-gray: #a8a8a8;         /* Texto cinza para informações secundárias */
  --glass-bg: rgba(255, 255, 255, 0.1);    /* Fundo vidro transparente */
  --glass-border: rgba(255, 255, 255, 0.2); /* Borda vidro transparente */
}

/* ===================================================================
   ESTILOS BASE DO BODY
   Define aparência padrão para todas as páginas
   =================================================================== */
body {
  /* Define família de fontes com fallbacks para compatibilidade */
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  color: #333;                  /* Cor de texto padrão cinza escuro */
  /* Background com gradiente — WebP otimizado com fallback JPG */
  background: linear-gradient(135deg, rgba(30, 60, 114, 0.4), rgba(42, 82, 152, 0.4)), url('./../imagens/background.jpg');
  background: linear-gradient(135deg, rgba(30, 60, 114, 0.4), rgba(42, 82, 152, 0.4)), image-set(url('./../imagens/background.webp') type('image/webp'), url('./../imagens/background.jpg') type('image/jpeg'));
  background-size: cover;       /* Imagem cobre todo o fundo */
  background-repeat: no-repeat; /* Não repete a imagem */
  background-position: center;  /* Centraliza a imagem */
  background-attachment: fixed; /* Imagem fixa durante scroll */
  display: flex;                /* Container flexível */
  flex-direction: column;       /* Direção vertical dos elementos */
  align-items: center;          /* Centraliza conteúdo horizontalmente */
  padding-top: 70px;            /* Espaço para header fixo */
  line-height: 1.6;             /* Altura de linha para legibilidade */
  min-height: 100vh;            /* Altura mínima = altura da viewport */
}

/* ===================================================================
   ESTILOS ESPECÍFICOS PARA PÁGINA HOME
   Sobrescreve estilos do body para a página inicial
   =================================================================== */
body.home {
  color: white;                 /* Texto branco para contraste com fundo */
  /* Background com gradiente — WebP otimizado com fallback JPG */
  background: linear-gradient(135deg, rgba(30, 60, 114, 0.4), rgba(42, 82, 152, 0.4)), url('./../imagens/background.jpg');
  background: linear-gradient(135deg, rgba(30, 60, 114, 0.4), rgba(42, 82, 152, 0.4)), image-set(url('./../imagens/background.webp') type('image/webp'), url('./../imagens/background.jpg') type('image/jpeg'));
  background-size: cover;       /* Imagem cobre todo o fundo */
  background-repeat: no-repeat; /* Não repete a imagem */
  background-position: center;  /* Centraliza a imagem */
  background-attachment: fixed; /* Imagem fixa durante scroll */
  display: flex;                /* CORREÇÃO: Mudado de block para flex */
  flex-direction: column;       /* Organiza conteúdo verticalmente */
  padding-top: 70px;            /* Espaço para header fixo */
  padding-bottom: 0;            /* Sem padding inferior */
  min-height: 100vh;            /* Altura mínima da viewport */
  overflow-y: visible;          /* CORREÇÃO: Permite visualizar todo conteúdo */
}

/* ===================================================================
   WRAPPER DA PÁGINA HOME
   Container principal que organiza o conteúdo da home
   =================================================================== */
.home-wrapper {
  min-height: auto;             /* CORREÇÃO: Altura automática */
  display: flex;                /* Container flexível */
  flex-direction: column;       /* Direção vertical */
  justify-content: flex-start;  /* CORREÇÃO: Alinha no início */
  align-items: center;          /* Centraliza horizontalmente */
  padding: 40px 0 0 0;          /* CORREÇÃO: Padding apenas no topo */
  margin-bottom: 0;             /* Sem margem inferior */
  flex: 1 0 auto;               /* CORREÇÃO: Cresce mas não encolhe */
  width: 100%;                  /* CORREÇÃO: Largura total para desktop */
}

/* ===================================================================
   HEADER FIXO - MODERNIZADO
   Cabeçalho que permanece no topo durante scroll
   =================================================================== */
header {
  position: fixed;              /* Posição fixa na viewport */
  top: 0;                       /* Colado no topo */
  left: 0;                      /* Início da esquerda */
  right: 0;                     /* Até o final da direita */
  width: 100%;                  /* Largura total */
  background: rgba(10, 10, 10, 0.9); /* NOVO: Fundo mais escuro e elegante */
  padding: 12px 0;              /* CORREÇÃO: Padding reduzido para visual mais slim */
  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.8); /* CORREÇÃO: Sombra mais suave e profunda */
  z-index: 900;                 /* CORREÇÃO: Z-index menor que o menu hamburguer */
  border-bottom: 1px solid rgba(0, 191, 255, 0.1); /* NOVO: Linha sutil azul na base */
  transition: all 0.3s ease;    /* NOVO: Transição suave para efeitos */
}

/* Suporte a backdrop-filter para efeito premium */
@supports (backdrop-filter: blur(10px)) {
  header {
    background: rgba(10, 10, 10, 0.7);    /* CORREÇÃO: Mais transparente com blur */
    backdrop-filter: blur(20px) saturate(180%); /* NOVO: Blur forte com saturação */
    -webkit-backdrop-filter: blur(20px) saturate(180%); /* Prefixo Safari */
  }
}

/* ===================================================================
   NAVEGAÇÃO PRINCIPAL - MODERNIZADA
   Container do menu de navegação
   =================================================================== */
nav {
  width: 100%;                  /* Largura total */
  max-width: 1400px;            /* Largura máxima aumentada */
  margin: 0 auto;               /* Centraliza horizontalmente */
  padding: 0 40px;              /* Padding lateral aumentado */
  display: flex;                /* Flexbox para melhor controle */
  align-items: center;          /* Alinha verticalmente */
  justify-content: center;      /* CORREÇÃO: Volta a centralizar o menu */
  position: relative;           /* Para posicionamento dos filhos */
}

/* ===================================================================
   LOGO/IMAGEM NO CANTO SUPERIOR ESQUERDO
   Logotipo Caciola como link para home
   =================================================================== */
.nav-logo {
  position: absolute;           /* Posicionamento absoluto */
  left: 40px;                   /* Alinhado à esquerda */
  top: 50%;                     /* Centralizado verticalmente */
  transform: translateY(-50%);  /* Ajuste vertical perfeito */
  transition: all 0.3s ease;    /* Transição suave */
  z-index: 10;                  /* Fica acima do menu */
  display: block;               /* NOVO: Display block para imagem */
}

/* NOVO: Estilo para a imagem do logo */
.nav-logo img {
  height: 45px;                 /* Altura fixa para o logo */
  width: auto;                  /* Largura automática mantendo proporção */
  display: block;               /* Remove espaço extra da imagem */
  transition: all 0.3s ease;    /* Transição suave */
  filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5)); /* Sombra sutil */
}

/* Hover do logo */
.nav-logo:hover img {
  transform: scale(1.05);       /* Leve aumento no hover */
  filter: drop-shadow(2px 2px 8px rgba(0, 191, 255, 0.4)); /* Sombra azul no hover */
}

/* REMOVIDO: Estilos de texto e efeitos que não se aplicam mais */
/* Os pseudo-elementos ::before e ::after foram removidos pois não funcionam com imagens */-decoration: none;        /* Remove sublinhado */
  letter-spacing: 1px;          /* Espaçamento elegante */
  position: relative;           /* Para efeitos */
  transition: all 0.3s ease;    /* Transição suave */
  margin-right: 40px;           /* Espaço até o menu */
  white-space: nowrap;          /* Não quebra linha */
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5); /* Sombra sutil */
}

/* NOVO: Efeito de brilho no nome */
.nav-logo::before {
  content: '';
  position: absolute;
  top: 0;
  left: -10%;
  width: 120%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 191, 255, 0.4), transparent);
  transform: skewX(-25deg);
  opacity: 0;
  transition: all 0.6s ease;
}

/* NOVO: Hover do logo */
.nav-logo:hover {
  color: #00bfff;
  transform: scale(1.05);
}

.nav-logo:hover::before {
  opacity: 1;
  animation: shimmer 0.6s ease;
}

/* NOVO: Animação de brilho */
@keyframes shimmer {
  0% { left: -100%; }
  100% { left: 100%; }
}

/* NOVO: Ícone musical decorativo (opcional) */
.nav-logo::after {
  content: '♪';
  position: absolute;
  right: -25px;
  top: -5px;
  font-size: 1rem;
  color: #00bfff;
  opacity: 0.6;
  animation: float 3s ease-in-out infinite;
}

/* NOVO: Animação flutuante do ícone */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

/* ===================================================================
   LISTA DE NAVEGAÇÃO - MODERNIZADA
   Organização dos itens do menu
   =================================================================== */
nav ul {
  list-style: none;             /* Remove marcadores de lista */
  display: flex;                /* Layout flexível horizontal */
  justify-content: center;      /* Centraliza itens */
  align-items: center;          /* Alinha verticalmente */
  gap: 5px;                     /* CORREÇÃO: Gap mínimo entre itens */
  flex-wrap: wrap;              /* Permite quebra de linha em telas pequenas */
  margin: 0;                    /* Remove margem */
  padding: 0;                   /* Remove padding */
  position: relative;           /* NOVO: Para efeito de indicador */
}

/* ===================================================================
   ITENS DO MENU
   Reset de estilos dos itens de lista
   =================================================================== */
nav ul li {
  margin: 0;                    /* Remove margem */
  padding: 0;                   /* Remove padding */
}

/* ===================================================================
   LINKS DO MENU - MODERNIZADOS
   Estilização dos links de navegação
   =================================================================== */
nav ul li a {
  color: rgba(255, 255, 255, 0.9); /* CORREÇÃO: Cor mais suave */
  text-decoration: none;        /* Remove sublinhado */
  font-weight: 500;             /* Peso médio da fonte */
  font-size: 0.95rem;           /* CORREÇÃO: Tamanho levemente reduzido */
  padding: 10px 24px;           /* CORREÇÃO: Padding horizontal aumentado */
  border-radius: 8px;           /* CORREÇÃO: Bordas menos arredondadas, mais modernas */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* NOVO: Transição mais suave */
  display: block;               /* Comportamento de bloco */
  white-space: nowrap;          /* Não quebra linha no texto */
  position: relative;           /* NOVO: Para efeitos de pseudo-elementos */
  letter-spacing: 0.5px;        /* NOVO: Espaçamento sutil entre letras */
  text-transform: uppercase;    /* NOVO: Texto em maiúsculas */
}

/* NOVO: Efeito de linha inferior animada */
nav ul li a::after {
  content: '';
  position: absolute;
  bottom: 8px;
  left: 24px;
  right: 24px;
  height: 2px;
  background: #00bfff;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.3s ease;
}

/* ===================================================================
   HOVER DOS LINKS DO MENU - MODERNIZADO
   Efeito ao passar o mouse sobre os links
   =================================================================== */
nav ul li a:hover {
  color: #00bfff;               /* MANTÉM: Cor azul ciano */
  background: rgba(0, 191, 255, 0.08); /* CORREÇÃO: Fundo mais sutil */
  transform: translateY(0);     /* CORREÇÃO: Remove movimento vertical */
}

/* NOVO: Ativa a linha inferior no hover */
nav ul li a:hover::after {
  transform: scaleX(1);
}

/* NOVO: Estado ativo/página atual */
nav ul li a.active {
  color: #00bfff;
  background: rgba(0, 191, 255, 0.1);
}

nav ul li a.active::after {
  transform: scaleX(1);
}

/* ===================================================================
   SEÇÃO HERO (BOAS-VINDAS)
   Área principal de destaque na home
   =================================================================== */
.hero {
  display: flex;                /* Container flexível */
  flex-direction: column;       /* Organiza conteúdo verticalmente */
  justify-content: center;      /* Centraliza verticalmente */
  align-items: center;          /* Centraliza horizontalmente */
  text-align: center;           /* Texto centralizado */
  padding: 50px 40px;           /* CORREÇÃO: Padding restaurado para desktop */
  background: rgba(0, 0, 0, 0.7); /* Fundo preto semi-transparente */
  border-radius: 15px;          /* Bordas arredondadas */
  margin: 0 auto 40px;          /* CORREÇÃO: Margem inferior restaurada para desktop */
  width: 95%;                   /* Largura aumentada */
  max-width: 800px;             /* Largura máxima aumentada */
  box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.5); /* Sombra pronunciada */
  animation: fadeInUp 1s ease-in-out; /* Animação de entrada */
}

/* ===================================================================
   SUPORTE A BACKDROP-FILTER NO HERO
   Efeito glass morphism quando disponível
   =================================================================== */
@supports (backdrop-filter: blur(10px)) {
  .hero {
    background: rgba(0, 0, 0, 0.6);       /* Mais transparente com blur */
    backdrop-filter: blur(10px);          /* Desfoque do fundo */
    -webkit-backdrop-filter: blur(10px);  /* Prefixo Safari */
  }
}

/* ===================================================================
   TÍTULO PRINCIPAL DO HERO
   Estilização do H1 na seção hero
   =================================================================== */
.hero h1 {
  font-family: 'Playfair Display', serif; /* Fonte serif elegante */
  font-size: 2.5em;             /* Tamanho grande */
  margin-bottom: 25px;          /* Espaço inferior */
  color: #00bfff;               /* Cor azul ciano */
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8); /* Sombra no texto */
}

/* ===================================================================
   PARÁGRAFO DO HERO
   Texto descritivo na seção hero
   =================================================================== */
.hero p {
  font-size: 1.4em;             /* Tamanho aumentado */
  color: #f4f4f9;               /* Cor clara */
  margin-bottom: 25px;          /* Espaço inferior */
}

/* ===================================================================
   BOTÃO CTA (CALL-TO-ACTION) DO HERO
   Botão principal de ação
   =================================================================== */
.hero .cta-button {
  background: linear-gradient(45deg, #00bfff, #008cba); /* Gradiente azul */
  color: white;                 /* Texto branco */
  font-size: 1.2em;             /* Tamanho aumentado */
  padding: 15px 35px;           /* Espaçamento interno generoso */
  border-radius: 10px;          /* Bordas arredondadas */
  text-decoration: none;        /* Remove sublinhado */
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7); /* Sombra no texto */
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.4); /* Sombra do botão */
  transition: all 0.3s ease;    /* Animação suave */
  display: inline-block;        /* Comportamento inline-block */
}

/* ===================================================================
   HOVER DO BOTÃO CTA DO HERO
   Efeito ao passar o mouse
   =================================================================== */
.hero .cta-button:hover {
  transform: scale(1.05);       /* Aumenta 5% */
  box-shadow: 0px 6px 20px rgba(0, 0, 0, 0.6); /* Sombra mais forte */
}

/* ===================================================================
   CONTAINER PRINCIPAL
   Organiza o conteúdo principal da página
   =================================================================== */
.container {
  display: flex;                /* Container flexível */
  flex-direction: column;       /* Direção vertical */
  align-items: center;          /* Centraliza horizontalmente */
  gap: 30px;                    /* CORREÇÃO: Gap restaurado para desktop */
  width: 90%;                   /* Largura responsiva */
  max-width: 1200px;            /* Largura máxima */
  padding-top: 0;               /* Sem padding superior */
  padding-bottom: 50px;         /* CORREÇÃO: Padding inferior restaurado para desktop */
  margin: 0 auto;               /* Centraliza horizontalmente */
  flex: 1 0 auto;               /* CORREÇÃO: Cresce mas não encolhe */
}

/* ===================================================================
   SEÇÃO DE COMENTÁRIOS
   Container dos depoimentos rotativos
   =================================================================== */
.comentarios {
  background: rgba(255, 255, 255, 0.15); /* Fundo branco transparente */
  border-radius: 15px;          /* Bordas arredondadas */
  padding: 25px 40px;           /* CORREÇÃO: Padding vertical reduzido */
  width: 95%;                   /* Largura aumentada */
  max-width: 1000px;            /* Largura máxima aumentada */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Sombra sutil */
  margin: auto auto 10px;       /* CORREÇÃO: Margem inferior mínima de apenas 10px */
  position: relative;           /* Para posicionamento dos filhos */
  display: flex;                /* Container flexível */
  flex-direction: column;       /* Organiza verticalmente */
}

/* ===================================================================
   SUPORTE A BACKDROP-FILTER NOS COMENTÁRIOS
   Efeito glass morphism quando disponível
   =================================================================== */
@supports (backdrop-filter: blur(10px)) {
  .comentarios {
    backdrop-filter: blur(10px);          /* Desfoque do fundo */
    -webkit-backdrop-filter: blur(10px);  /* Prefixo Safari */
  }
}

/* ===================================================================
   TÍTULO DA SEÇÃO DE COMENTÁRIOS
   =================================================================== */
.comentarios h2 {
  font-family: 'Playfair Display', serif; /* Fonte serif elegante */
  color: white;                 /* Texto branco */
  font-size: 1.8rem;            /* CORREÇÃO: Tamanho reduzido */
  margin-bottom: 20px;          /* CORREÇÃO: Espaço inferior reduzido */
  text-align: center;           /* Centralizado */
  flex-shrink: 0;               /* Não permite que encolha */
  padding: 0 10px;              /* Padding lateral para evitar overflow */
  line-height: 1.2;             /* Altura de linha ajustada */
}

/* ===================================================================
   CONTAINER DOS COMENTÁRIOS
   Área onde os comentários são exibidos
   =================================================================== */
.comentarios-container {
  position: relative;           /* Para posicionamento absoluto dos filhos */
  overflow: hidden;             /* Esconde conteúdo que excede */
  width: 100%;                  /* Largura total */
  height: 80px;                 /* CORREÇÃO: Altura fixa reduzida para eliminar linha vazia */
  border-radius: 10px;          /* Bordas arredondadas */
  background: transparent;      /* CORREÇÃO: Fundo transparente */
  padding: 0;                   /* CORREÇÃO: Remove padding para evitar problemas de arredondamento */
  border: none;                 /* CORREÇÃO: Remove qualquer borda */
}

/* ===================================================================
   COMENTÁRIO INDIVIDUAL
   Cada depoimento/comentário
   =================================================================== */
.comentario {
  background: rgba(255, 255, 255, 0.9); /* Fundo branco quase opaco */
  color: #333;                  /* Texto cinza escuro */
  border-radius: 10px;          /* Bordas arredondadas */
  padding: 20px 25px;           /* CORREÇÃO: Padding reduzido */
  width: 100%;                  /* CORREÇÃO: Largura total sem cálculo */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); /* Sombra pronunciada */
  display: none;                /* Escondido por padrão */
  opacity: 0;                   /* Transparente por padrão */
  transition: opacity 0.5s ease-in-out; /* Transição suave de opacidade */
  align-items: center;          /* CORREÇÃO: Centraliza verticalmente */
  justify-content: flex-start;  /* Alinha conteúdo à esquerda */
  margin: 0;                    /* Sem margem */
  height: 100%;                 /* CORREÇÃO: Altura total simples */
  overflow: hidden;             /* Esconde excesso de conteúdo */
  position: absolute;           /* Posicionamento absoluto */
  top: 0;                       /* CORREÇÃO: Sem offset no topo */
  left: 0;                      /* CORREÇÃO: Sem offset na esquerda */
  box-sizing: border-box;       /* CORREÇÃO: Inclui padding no cálculo */
}

/* ===================================================================
   COMENTÁRIO ATIVO
   Estado visível do comentário
   =================================================================== */
.comentario.active {
  display: flex;                /* Torna visível como flex */
  opacity: 1;                   /* Totalmente opaco */
}

/* ===================================================================
   AUTOR DO COMENTÁRIO
   Nome/identificação de quem fez o comentário
   =================================================================== */
.autor {
  flex: 0 0 180px;              /* CORREÇÃO: Largura reduzida */
  padding-right: 25px;          /* CORREÇÃO: Espaço reduzido */
  text-align: left;             /* Alinhado à esquerda */
  font-size: 1em;               /* CORREÇÃO: Tamanho padrão */
  align-self: center;           /* CORREÇÃO: Alinha verticalmente ao centro */
}

/* ===================================================================
   NOME DO AUTOR EM NEGRITO
   =================================================================== */
.autor strong {
  color: #007BFF;               /* Cor azul */
  font-weight: 600;             /* Peso semi-bold */
}

/* ===================================================================
   MENSAGEM DO COMENTÁRIO
   Conteúdo principal do depoimento
   =================================================================== */
.mensagem {
  flex: 1;                      /* Ocupa espaço restante */
  text-align: left;             /* Alinhado à esquerda */
  color: #333;                  /* Cor cinza escuro */
  font-size: 1em;               /* CORREÇÃO: Tamanho padrão */
  line-height: 1.4;             /* CORREÇÃO: Altura de linha compacta */
  overflow: hidden;             /* Esconde excesso */
  padding-right: 15px;          /* CORREÇÃO: Espaço reduzido */
  display: block;               /* CORREÇÃO: Display block padrão */
  align-self: center;           /* CORREÇÃO: Alinha verticalmente ao centro */
}

/* ===================================================================
   PARÁGRAFO DA MENSAGEM
   =================================================================== */
.mensagem p {
  margin: 0;                    /* Remove margem */
  padding: 0;                   /* Remove padding */
  width: 100%;                  /* Largura total */
  word-wrap: break-word;        /* Quebra palavras longas */
  line-height: inherit;         /* Herda altura de linha do pai */
}

/* ===================================================================
   CUSTOMIZAÇÃO DA SCROLLBAR DA MENSAGEM (WEBKIT)
   Para navegadores baseados em Chromium
   =================================================================== */
.mensagem::-webkit-scrollbar {
  width: 4px;                   /* Largura fina da scrollbar */
}

.mensagem::-webkit-scrollbar-track {
  background: rgba(0,0,0,0.1);  /* Fundo claro da track */
  border-radius: 2px;           /* Bordas arredondadas */
}

.mensagem::-webkit-scrollbar-thumb {
  background: rgba(0,123,255,0.5); /* Thumb azul semi-transparente */
  border-radius: 2px;           /* Bordas arredondadas */
}

.mensagem::-webkit-scrollbar-thumb:hover {
  background: rgba(0,123,255,0.7); /* Thumb mais opaco no hover */
}

/* ===================================================================
   SEÇÃO DE DESTAQUES MUSICAIS
   Container para músicas em destaque
   =================================================================== */
.destaques {
  text-align: center;           /* Conteúdo centralizado */
  margin-bottom: 50px;          /* Espaço inferior */
  width: 100%;                  /* Largura total */
}

/* ===================================================================
   CARD DE MÚSICA EM DESTAQUE
   =================================================================== */
.destaques .card-musica {
  width: calc(100% - 40px);     /* Largura com margens */
  max-width: 600px;             /* Largura máxima */
  padding: 30px;                /* Espaçamento interno */
  background: rgba(0, 0, 0, 0.7); /* Fundo escuro transparente */
  border-radius: 15px;          /* Bordas arredondadas */
  box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.5); /* Sombra forte */
  margin: 0 auto 20px;          /* Centraliza com margem inferior */
  text-align: center;           /* Conteúdo centralizado */
  transition: all 0.3s ease;    /* Animação suave */
  position: relative;           /* Para posicionamento */
  top: -20px;                   /* Levemente elevado */
}

/* ===================================================================
   SUPORTE A BACKDROP-FILTER NO CARD DE MÚSICA
   =================================================================== */
@supports (backdrop-filter: blur(10px)) {
  .destaques .card-musica {
    background: rgba(0, 0, 0, 0.6);       /* Mais transparente */
    backdrop-filter: blur(10px);          /* Desfoque do fundo */
    -webkit-backdrop-filter: blur(10px);  /* Prefixo Safari */
  }
}

/* ===================================================================
   HOVER DO CARD DE MÚSICA
   =================================================================== */
.destaques .card-musica:hover {
  transform: scale(1.02);       /* Aumenta 2% */
  box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.6); /* Sombra mais forte */
}

/* ===================================================================
   IMAGEM DO CARD DE MÚSICA
   =================================================================== */
.destaques .card-musica img {
  width: 100%;                  /* Largura total do container */
  max-width: 250px;             /* Largura máxima */
  margin-bottom: 15px;          /* Espaço inferior */
  border-radius: 10px;          /* Bordas arredondadas */
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3); /* Sombra sutil */
}

/* ===================================================================
   TÍTULO DO CARD DE MÚSICA
   =================================================================== */
.destaques .card-musica h3 {
  font-family: 'Playfair Display', serif; /* Fonte serif */
  font-size: 1.8em;             /* Tamanho grande */
  margin-bottom: 15px;          /* Espaço inferior */
  color: #00bfff;               /* Cor azul ciano */
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5); /* Sombra no texto */
}

/* ===================================================================
   PLAYER DE ÁUDIO NO CARD DE MÚSICA
   =================================================================== */
.destaques .card-musica audio {
  width: 90%;                   /* Largura responsiva */
  max-width: 400px;             /* Largura máxima */
  margin: 15px auto;            /* Centralizado com margens */
}

/* ===================================================================
   LISTA DE MÚSICAS
   Container da grade de músicas
   =================================================================== */
.musicas-lista {
  margin-bottom: 50px;          /* Espaço inferior */
  width: 100%;                  /* Largura total */
}

/* ===================================================================
   CONTAINER DA GRADE DE MÚSICAS
   Layout em grid/flex
   =================================================================== */
.musicas-container {
  display: flex;                /* Layout flexível */
  flex-wrap: wrap;              /* Permite quebra de linha */
  gap: 20px;                    /* Espaçamento entre itens */
  justify-content: center;      /* Centraliza itens */
}

/* ===================================================================
   ITEM INDIVIDUAL DE MÚSICA
   Card de cada música
   =================================================================== */
.musica-item {
  background: rgba(255, 255, 255, 0.95); /* CORREÇÃO: Fundo branco semi-transparente */
  border-radius: 15px;          /* Bordas arredondadas */
  padding: 20px;                /* Espaçamento interno */
  text-align: center;           /* Conteúdo centralizado */
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); /* CORREÇÃO: Sombra mais pronunciada */
  width: calc(20% - 16px);      /* 5 colunas com gap */
  min-width: 200px;             /* Largura mínima */
  box-sizing: border-box;       /* Inclui padding no tamanho */
  transition: all 0.3s ease;    /* Animação suave */
}

/* ===================================================================
   HOVER DO ITEM DE MÚSICA
   =================================================================== */
.musica-item:hover {
  transform: translateY(-5px);  /* Move 5px para cima */
  box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.2); /* Sombra mais forte */
}

/* ===================================================================
   IMAGEM DO ITEM DE MÚSICA
   =================================================================== */
.musica-item img {
  width: 100%;                  /* Largura total do container */
  border-radius: 10px;          /* Bordas arredondadas */
  margin-bottom: 10px;          /* Espaço inferior */
}

/* ===================================================================
   TÍTULO DO ITEM DE MÚSICA
   =================================================================== */
.musica-item h3 {
  margin-bottom: 10px;          /* Espaço inferior */
  color: #333;                  /* Cor cinza escuro */
  font-size: 1rem;              /* Tamanho padrão */
}

/* ===================================================================
   PLAYER DE ÁUDIO DO ITEM DE MÚSICA
   =================================================================== */
.musica-item audio {
  width: 100%;                  /* Largura total do container */
  margin-top: 10px;             /* Espaço superior */
}

/* ===================================================================
   SEÇÃO DE BIOGRAFIA
   =================================================================== */
.biografia {
  /* CORREÇÃO: Removido o background próprio, agora usa o background global */
  padding: 60px 20px;           /* Espaçamento interno */
  color: white;                 /* Texto branco */
  width: 100%;                  /* Largura total */
}

/* ===================================================================
   CONTAINER DA BIOGRAFIA
   =================================================================== */
.biografia-container {
  max-width: 800px;             /* Largura máxima para leitura */
  margin: 0 auto;               /* Centraliza */
  text-align: center;           /* Texto centralizado */
  padding: 40px;                /* Espaçamento interno */
  background: rgba(0, 0, 0, 0.7); /* Fundo escuro transparente */
  border-radius: 15px;          /* Bordas arredondadas */
  box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.5); /* Sombra */
}

/* ===================================================================
   SUPORTE A BACKDROP-FILTER NA BIOGRAFIA
   =================================================================== */
@supports (backdrop-filter: blur(10px)) {
  .biografia-container {
    background: rgba(0, 0, 0, 0.6);       /* Mais transparente */
    backdrop-filter: blur(10px);          /* Desfoque do fundo */
    -webkit-backdrop-filter: blur(10px);  /* Prefixo Safari */
  }
}

/* ===================================================================
   TÍTULO DA BIOGRAFIA
   =================================================================== */
.biografia h2 {
  font-family: 'Playfair Display', serif; /* Fonte serif */
  font-size: 2.5em;             /* Tamanho grande */
  margin-bottom: 20px;          /* Espaço inferior */
  color: #00bfff;               /* Cor azul ciano */
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8); /* Sombra no texto */
}

/* ===================================================================
   PARÁGRAFOS DA BIOGRAFIA
   =================================================================== */
.biografia p {
  font-size: 1.2em;             /* Tamanho aumentado */
  line-height: 1.8;             /* Altura de linha espaçosa */
  margin-bottom: 20px;          /* Espaço entre parágrafos */
}

/* ===================================================================
   BODY DA PÁGINA DE CONTATO
   Estilos específicos para a página de contato
   =================================================================== */
body.contato-page {
  display: flex;                /* Layout flexível */
  flex-direction: column;       /* Direção vertical */
  padding-top: 70px;            /* Espaço para header fixo */
  padding-bottom: 0;            /* CORREÇÃO: Sem padding inferior */
  text-align: center;           /* Conteúdo centralizado */
  margin: 0;                    /* Remove margens */
  color: #333;                  /* Texto cinza escuro */
  min-height: 100vh;            /* Altura mínima da viewport */
  max-height: 100vh;            /* NOVO: Altura máxima da viewport */
  overflow: hidden;             /* NOVO: Previne scroll */
}

/* ===================================================================
   SEÇÃO DE CONTATO
   Container do formulário de contato - MODERNIZADO E COMPACTO
   =================================================================== */
.contato {
  background: rgba(0, 0, 0, 0.7); /* Fundo escuro semi-transparente */
  max-width: 550px;             /* CORREÇÃO: Largura reduzida */
  width: 90%;                   /* CORREÇÃO: Largura responsiva ajustada */
  margin: 2vh auto;             /* CORREÇÃO: Margem vertical mínima */
  padding: 30px 35px;           /* CORREÇÃO: Padding reduzido */
  border-radius: 20px;          /* Bordas arredondadas */
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5); /* Sombra dramática */
  text-align: center;           /* Conteúdo centralizado */
  flex: 0 1 auto;               /* CORREÇÃO: Não expande demais */
  position: relative;           /* Para efeitos de posicionamento */
  overflow: hidden;             /* Para efeitos de borda */
}

/* Efeito de borda gradiente */
.contato::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, #00bfff, #008cba);
  opacity: 0.1;
  z-index: -1;
}

/* Suporte a backdrop-filter para efeito glass */
@supports (backdrop-filter: blur(10px)) {
  .contato {
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
}

/* ===================================================================
   TÍTULO DA SEÇÃO DE CONTATO - MODERNIZADO E COMPACTO
   =================================================================== */
.contato h2 {
  font-family: 'Playfair Display', serif; /* Fonte serif elegante */
  font-size: 2.2em;             /* CORREÇÃO: Tamanho reduzido */
  color: #00bfff;               /* Cor azul ciano vibrante */
  margin-bottom: 10px;          /* CORREÇÃO: Espaço reduzido */
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8); /* Sombra no texto */
  position: relative;           /* Para pseudo-elemento */
}

/* Linha decorativa abaixo do título */
.contato h2::after {
  content: '';
  position: absolute;
  bottom: -8px;                 /* CORREÇÃO: Mais próximo do título */
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 3px;
  background: linear-gradient(90deg, transparent, #00bfff, transparent);
  border-radius: 2px;
}

/* ===================================================================
   PARÁGRAFO DA SEÇÃO DE CONTATO - MODERNIZADO E COMPACTO
   =================================================================== */
.contato p {
  font-size: 1.1em;             /* CORREÇÃO: Tamanho reduzido */
  color: #f4f4f9;               /* Cor clara para contraste */
  margin-bottom: 20px;          /* CORREÇÃO: Espaço reduzido */
  line-height: 1.5;             /* CORREÇÃO: Altura de linha reduzida */
  opacity: 0.9;                 /* Leve transparência */
}

/* ===================================================================
   FORMULÁRIO - MODERNIZADO E COMPACTO
   Layout do formulário
   =================================================================== */
form {
  display: flex;                /* Layout flexível */
  flex-direction: column;       /* Direção vertical */
  gap: 15px;                    /* CORREÇÃO: Espaçamento reduzido */
  margin-top: 5px;              /* CORREÇÃO: Margem mínima */
}

/* ===================================================================
   CAMPOS DO FORMULÁRIO - MODERNIZADOS E COMPACTOS
   Estilos para inputs, selects e textareas
   =================================================================== */
input, select, textarea {
  width: 100%;                  /* Largura total do container */
  padding: 12px 18px;           /* CORREÇÃO: Padding reduzido */
  border: 2px solid transparent; /* Borda transparente */
  border-radius: 12px;          /* Bordas arredondadas */
  font-size: 1em;               /* CORREÇÃO: Tamanho padrão */
  background: rgba(255, 255, 255, 0.1); /* Fundo transparente */
  color: white;                 /* Texto branco */
  transition: all 0.3s ease;    /* Animação suave */
  font-family: inherit;         /* Herda fonte do body */
  backdrop-filter: blur(5px);   /* Efeito de blur */
  -webkit-backdrop-filter: blur(5px); /* Prefixo Safari */
}

/* CORREÇÃO: Textarea com altura reduzida */
textarea {
  min-height: 80px;             /* NOVO: Altura mínima menor */
  max-height: 100px;            /* NOVO: Altura máxima limitada */
  resize: vertical;             /* NOVO: Permite redimensionar apenas vertical */
}

/* Placeholder com cor clara */
input::placeholder, 
textarea::placeholder {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.95em;
}

/* Estilo especial para select */
select {
  cursor: pointer;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.6)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 20px;
  padding-right: 45px;
}

/* Opções do select */
select option {
  background: #1a1a1a;
  color: white;
}

/* ===================================================================
   FOCO NOS CAMPOS DO FORMULÁRIO - MODERNIZADO
   Estado quando o campo está ativo/selecionado
   =================================================================== */
input:focus, select:focus, textarea:focus {
  border-color: #00bfff;        /* NOVO: Borda azul ciano */
  outline: none;                /* Remove outline padrão */
  background: rgba(255, 255, 255, 0.15); /* NOVO: Fundo mais claro no foco */
  box-shadow: 0 0 0 3px rgba(0, 191, 255, 0.1); /* NOVO: Anel de foco */
  transform: translateY(-2px);  /* NOVO: Leve elevação */
}

/* NOVO: Hover nos campos */
input:hover, select:hover, textarea:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(0, 191, 255, 0.3);
}

/* ===================================================================
   BOTÕES - MODERNIZADOS E COMPACTOS
   Estilo padrão para todos os botões
   =================================================================== */
button {
  padding: 14px 30px;           /* CORREÇÃO: Padding reduzido */
  background: linear-gradient(135deg, #00bfff, #008cba); /* Gradiente diagonal */
  color: white;                 /* Texto branco */
  border: none;                 /* Remove borda */
  border-radius: 50px;          /* Bordas totalmente arredondadas (pill) */
  font-size: 1.1em;             /* CORREÇÃO: Tamanho reduzido */
  font-weight: 600;             /* Peso semi-bold */
  cursor: pointer;              /* Cursor de mão */
  transition: all 0.3s ease;    /* Animação suave */
  font-family: inherit;         /* Herda fonte do body */
  text-transform: uppercase;    /* Texto em maiúsculas */
  letter-spacing: 1px;          /* Espaçamento entre letras */
  position: relative;           /* Para efeito de overflow */
  overflow: hidden;             /* Para efeito de onda */
  margin-top: 5px;              /* CORREÇÃO: Margem reduzida */
}

/* Efeito de onda no clique */
button::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

button:active::before {
  width: 300px;
  height: 300px;
}

/* ===================================================================
   HOVER DOS BOTÕES - MODERNIZADO
   =================================================================== */
button:hover {
  transform: translateY(-3px);  /* CORREÇÃO: Elevação maior */
  box-shadow: 0 10px 25px rgba(0, 191, 255, 0.4); /* CORREÇÃO: Sombra colorida */
  background: linear-gradient(135deg, #008cba, #00bfff); /* NOVO: Inverte gradiente */
}

/* NOVO: Estado ativo do botão */
button:active {
  transform: translateY(-1px);
  box-shadow: 0 5px 15px rgba(0, 191, 255, 0.4);
}

/* ===================================================================
   BOTÃO CTA (CALL-TO-ACTION) PADRÃO
   Usado em várias páginas
   =================================================================== */
.cta-button {
  display: inline-block;        /* Comportamento inline-block */
  padding: 12px 25px;           /* Espaçamento interno */
  font-size: 1.2em;             /* Tamanho aumentado */
  background: linear-gradient(45deg, #007BFF, #0056b3); /* Gradiente azul */
  color: white;                 /* Texto branco */
  text-decoration: none;        /* Remove sublinhado */
  border-radius: 8px;           /* Bordas arredondadas */
  transition: all 0.3s ease;    /* Animação suave */
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); /* Sombra sutil */
}

/* ===================================================================
   HOVER DO BOTÃO CTA
   =================================================================== */
.cta-button:hover {
  background: linear-gradient(45deg, #0056b3, #007BFF); /* Inverte gradiente */
  transform: scale(1.05);       /* Aumenta 5% */
}

/* ===================================================================
   RODAPÉ
   Footer do site
   =================================================================== */
footer {
  width: 100%;                  /* Largura total */
  text-align: center;           /* Conteúdo centralizado */
  padding: 20px 15px;           /* Espaçamento interno */
  background: #333;             /* Fundo cinza escuro */
  color: white;                 /* Texto branco */
  position: relative;           /* CORREÇÃO: Mudado de static para relative */
  font-size: 0.9em;             /* Tamanho reduzido */
  z-index: 999;                 /* Fica acima de outros elementos */
  margin-top: auto;             /* Empurra para o final da página */
  line-height: 1.5;             /* Altura de linha */
  flex-shrink: 0;               /* CORREÇÃO: Não permite que o rodapé encolha */
}

/* ===================================================================
   ANIMAÇÕES
   Definições de keyframes para animações
   =================================================================== */
@keyframes fadeInUp {
  from {
    opacity: 0;                 /* Começa transparente */
    transform: translateY(20px); /* Começa 20px abaixo */
  }
  to {
    opacity: 1;                 /* Termina opaco */
    transform: translateY(0);   /* Termina na posição normal */
  }
}

/* ===================================================================
   CORREÇÃO FORÇADA PARA MOBILE - MENU HAMBURGUER
   Aplicada após todas as outras regras para garantir prioridade
   =================================================================== */
@media screen and (max-width: 768px) {
  /* ESCONDE MENU DESKTOP COMPLETAMENTE */
  nav ul#navMenu {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    position: absolute !important;
    left: -9999px !important;
  }
  
  /* FORÇA EXIBIÇÃO DO BOTÃO HAMBURGUER */
  button.menu-toggle,
  .menu-toggle {
    display: block !important;
    display: -webkit-flex !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: fixed !important;
    top: 15px !important;
    right: 20px !important;
    width: 40px !important;
    height: 40px !important;
    z-index: 2147483647 !important; /* Máximo z-index possível */
    background-color: #000 !important;
    border: 2px solid #00bfff !important;
    border-radius: 5px !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    -webkit-transform: translateZ(1px) !important;
    transform: translateZ(1px) !important;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.5) !important;
  }
  
  /* FORÇA EXIBIÇÃO DAS LINHAS DO HAMBURGUER */
  button.menu-toggle span,
  .menu-toggle span {
    display: block !important;
    width: 24px !important;
    height: 2px !important;
    background-color: #00bfff !important;
    margin: 4px 0 !important;
    border-radius: 2px !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}

/* ===================================================================
   MENSAGENS DE ENVIO DO FORMULÁRIO
   Feedback visual após envio
   =================================================================== */
.goodSend, .badSend {
  position: relative;           /* Posicionamento relativo */
  max-width: 90%;               /* Largura máxima responsiva */
  text-align: center;           /* Conteúdo centralizado */
  margin: 0 auto;               /* Centraliza horizontalmente */
  background: rgba(240, 240, 240, 0.9); /* Fundo cinza claro transparente */
  border-radius: 10px;          /* Bordas arredondadas */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Sombra */
  padding: 20px;                /* Espaçamento interno */
}

/* ===================================================================
   MENSAGEM DE ERRO INTERNA
   =================================================================== */
.badSendInterna {
  position: relative;           /* Posicionamento relativo */
  max-width: 90%;               /* Largura máxima responsiva */
  text-align: center;           /* Conteúdo centralizado */
  color: rgb(75, 74, 74);       /* Cor cinza escuro */
  font-size: 120%;              /* Tamanho aumentado 20% */
  line-height: 180%;            /* Altura de linha espaçosa */
  margin: 0 auto;               /* Centraliza horizontalmente */
  background: rgba(240, 240, 240, 0.9); /* Fundo cinza claro transparente */
  border-radius: 10px;          /* Bordas arredondadas */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Sombra */
  padding: 20px;                /* Espaçamento interno */
}

/* ===================================================================
   TÍTULO DA MENSAGEM DE SUCESSO
   =================================================================== */
.goodSend h2 {
  color: #007BFF;               /* Cor azul para sucesso */
}

/* ===================================================================
   TÍTULO DA MENSAGEM DE ERRO
   =================================================================== */
.badSend h2 {
  color: #e72222;               /* Cor vermelha para erro */
}

/* ===================================================================
   CLASSE UTILITÁRIA - CENTRALIZADO
   =================================================================== */
.centralizado {
  text-align: center;           /* Centraliza texto */
}

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

/* ===================================================================
   TABLETS E TELAS MÉDIAS (MAX 768PX)
   =================================================================== */
@media (max-width: 768px) {
  /* Header responsivo */
  header {
    padding: 10px 0;
  }
  
  nav {
    padding: 0 20px;
    min-height: 50px;
    display: flex;