/* Definição de Cores e Fonte */
:root {
  --dark-blue-bg: #0c121b;
  --foreground: #f0f8ff;
  --muted-foreground: #a0aec0;
  --accent-blue: #103c64;
  --card-dark: #1e2a3c;
  --input-dark: #2c3e50;
}

body {
  background-color: #000002 !important;
  color: var(--foreground) !important;
  font-family: "Poppins", sans-serif !important;
  font-weight: 300;
}

html {
	scroll-behavior: smooth;
}



/* Classes Customizadas para Cores */
.text-foreground { color: var(--foreground) !important; }
.text-muted-foreground { color: var(--muted-foreground) !important; }
.text-accent-blue {
    color: #a5d4ff;
}

/* Título principal do Hero (Para garantir que seja bold/extrabold) */
.hero-title {
    font-weight: 700 !important; 
}

/* =============================
   BADGES DO HERO — ALINHAMENTO
   ============================= */

/* container que agrupa os badges e centraliza tudo */
.hero-badges {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 1rem;
  flex-wrap: wrap;
}

/* estilo único e definitivo para cada badge */
.hero-subtitle-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 6px;
    border: 1px solid rgba(52, 152, 219, 0.3);
    background-color: rgba(0, 0, 0, 0.2);
    color: #a5d4ff;
    font-size: 12PX;
    font-weight: 600;
    opacity: 0.85;
    line-height: 1;
    box-sizing: border-box;
    vertical-align: middle;
}

/* emoji encapsulado — controla tamanho e margens finas */
.hero-subtitle-badge .emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1em;    /* use 1em para harmonizar com texto */
  line-height: 1;
  height: 1em;
  width: auto;
  /* margens finas quando emoji antes ou depois do texto */
  margin-right: 6px;
}

.hero-subtitle-badge .emoji:last-child {
    margin-right: 14px !important;
}

/* fallback visual para navegadores antigos que não suportam gap em inline-flex */
@supports not (gap: 8px) {
  .hero-subtitle-badge { gap: 0; }
  .hero-subtitle-badge .emoji { margin-right: 6px; }
  .hero-subtitle-badge .emoji:last-child { margin-left: 6px; margin-right: 0; }
}

/* pequenos ajustes opcionais para responsividade */
@media (max-width: 420px) {
  .hero-subtitle-badge { padding: 6px 10px; font-size: 0.82rem; }
  .hero-badges { gap: 10px; }
}




/* Cards e Fundo */
.bg-card-dark { 
    background-color: var(--card-dark) !important; 
    border-color: rgba(52, 152, 219, 0.2) !important;
}

/* Estilo Customizado para Inputs */
.form-control.custom-input {
    background-color: var(--input-dark) !important;
    border: 1px solid var(--input-dark) !important;
    color: var(--foreground) !important;
    font-weight: 300; /* Inputs mais finos */
}
/* Estilos restantes (botões, gradientes, cards) permanecem iguais */
.form-control.custom-input:focus {
    border-color: var(--accent-blue) !important;
    box-shadow: 0 0 0 0.25rem rgba(52, 152, 219, 0.25);
}
.btn-primary.btn-accent {
    background-color: var(--accent-blue) !important;
    border-color: var(--accent-blue) !important;
    color: var(--foreground) !important;
    font-weight: 600 !important;
    transition: all 0.3s ease;
    box-shadow: 0 0 15px rgba(52, 152, 219, 0.5); 
}
.btn-primary.btn-accent:hover {
    background-color: #2980b9 !important;
    border-color: #2980b9 !important;
    transform: scale(1.05);
}
.hero-section {
    background-size: cover;
    background-position: top;
    position: relative;
    padding-bottom: 0rem;
}
.hero-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /*background-image: linear-gradient(rgba(12, 18, 27, 0.95), rgba(12, 18, 27, 0.85)); /* Fundo mais escuro */
    z-index: 1;
}
.hero-section > .container {
    position: relative;
    z-index: 2;
}
.card-gradient-cta {
    background-image: linear-gradient(180deg, rgb(0 39 65) 0%, rgb(0 0 0) 100%);
    border: none;
    backdrop-filter: blur(5px);
}
.card-benefit {
    background-color: var(--card-dark);
    box-shadow: 0 0 10px rgba(52, 152, 219, 0.1);
    transition: transform 0.3s ease;
    border: 1px solid rgba(52, 152, 219, 0.2) !important;
}
.card-benefit:hover {
    transform: translateY(-5px);
}

.lead {
    font-size: 20px;
    font-weight: 300;
}

.display-4 {
    font-size: 42PX;
    line-height: 55px;
}

/* Espaçamento automático entre emoji e texto dentro dos badges */
.hero-subtitle-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-transform: uppercase;
}

/* Mas, para garantir espaçamento perfeito mesmo sem spans separados: */
.hero-subtitle-badge::before,
.hero-subtitle-badge::after {
  content: ""; /* reset */
}

/* Caso o emoji esteja colado no início ou fim do texto, cria margem */
.hero-subtitle-badge {
  word-spacing: 4px; /* adiciona leve espaçamento visual entre palavras e emojis */
}

/* Ajuste fino específico para emojis (🔥📅 etc.) */
.hero-subtitle-badge {
  font-variant-emoji: text;
}

.hero-subtitle-badge span.emoji,
.hero-subtitle-badge i,
.hero-subtitle-badge svg {
  margin-right: 6px; /* se emoji ou ícone vier antes do texto */
}

.hero-subtitle-badge span.emoji:last-child,
.hero-subtitle-badge i:last-child,
.hero-subtitle-badge svg:last-child {
  margin-left: 6px; /* se vier depois */
}


/* =============================
   LOGOS DE CLIENTES
   ============================= */

/* Contêiner principal para centralizar e organizar a lista */
.client-logos {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Lista de logos (sem marcadores) */
.logo-list {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem 0; /* Espaçamento com o texto abaixo */
    gap: 15px; /* Espaçamento entre os círculos */
    flex-wrap: wrap; /* Garante responsividade básica */
    justify-content: center;
}

/* Texto de destaque abaixo dos logos */
.logo-text {
    font-size: 1.15rem;
    font-weight: 300;
    color: var(--foreground);
    text-align: center;
}

.logo-text strong {
    font-weight: 700;
    color: #a5d4ff; /* Cor de destaque similar ao .text-accent-blue */
}

/* Item individual da lista (container para o círculo) */
.logo-item {
    position: relative;
    width: 80px; /* Tamanho base do círculo */
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* Efeito de Hover Animado e Sombra Verde (Glow) para o Botão WhatsApp SVG */

/* Seleciona o elemento <a> que envolve o SVG (para o hover) */
.whatsapp-badge a {
    /* Define o ponto central da transformação */
    display: inline-block; /* Necessário para aplicar transformações */
    transform-origin: center center;
    /* Adiciona transição suave para as transformações e o filtro (sombra) */
    transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out;
}

/* O que acontece ao passar o mouse (hover) */
.whatsapp-badge a:hover {
    /* 1. Efeito de Zoom Sutil */
    transform: scale(1.04);
    
    /* 2. Sombra Verde (Glow) que segue o formato do SVG */
    /* drop-shadow(offset-x, offset-y, blur-radius, color) */
    filter: drop-shadow(0 0 12px rgba(37, 211, 102, 0.9));
}

/* 3. Efeito Opcional: Mudar o Tom de Verde ao Passar o Mouse */
/* (Mantido para um toque extra de animação no preenchimento) */

/* Adiciona transição à cor de preenchimento do bloco verde (path com id="path1") */
.whatsapp-badge a svg.wp-whatsapp-img #path1 {
    transition: fill 0.3s ease-in-out;
}
/* Mudar a cor do bloco verde no hover */
.whatsapp-badge a:hover svg.wp-whatsapp-img #path1 {
    /* Um verde ligeiramente mais claro ou vibrante */
    fill: #00e676; 
}

/* Adiciona transição ao círculo do ícone (path com id="path3") */
.whatsapp-badge a svg.wp-whatsapp-img #path3 {
    transition: fill 0.3s ease-in-out;
}
/* Mudar a cor do círculo no hover */
.whatsapp-badge a:hover svg.wp-whatsapp-img #path3 {
    /* Um verde ligeiramente mais escuro (WhatsApp original) */
    fill: #128c7e; 
}

/* Estilos para a Capa e Botão de Play do Vídeo */

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Fundo escuro sutil sobre a capa */
    display: flex; /* Para centralizar o botão de play */
    justify-content: center;
    align-items: center;
    cursor: pointer; /* Indica que é clicável */
    z-index: 10; /* Garante que fique acima do vídeo */
    opacity: 1;
    transition: opacity 0.5s ease; /* Suaviza o desaparecimento */
}

.video-overlay.hidden {
    opacity: 0;
    pointer-events: none; /* Desabilita cliques quando escondido */
}

.video-poster-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Garante que a imagem cubra toda a área sem distorção */
    position: absolute; /* Para que a imagem fique por baixo do overlay */
    top: 0;
    left: 0;
    z-index: 5;
}

.play-button {
    background-color: rgb(1 23 46 / 70%); /* Azul com transparência */
    border: none;
    border-radius: 50%; /* Botão redondo */
    width: 80px; /* Tamanho do botão */
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4); /* Sombra para profundidade */
    z-index: 15; /* Acima da capa */
    transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.play-button svg {
    fill: #fff; /* Ícone de play branco */
    width: 40px; /* Tamanho do ícone */
    height: 40px;
    margin-left: 5px; /* Ajuste para o triângulo de play */
    transition: fill 0.3s ease-in-out;
}

/* Efeitos de Hover para o Botão de Play */
.play-button:hover {
    transform: scale(1.08); /* Zoom sutil */
    background-color: rgba(0, 12, 24, 0.7); /* Azul um pouco mais intenso */
    box-shadow: 0 6px 20px rgba(1, 48, 99, 0.7); /* Sombra azul para o glow */
}

.play-button:hover svg {
    fill: #e0f2f7; /* Ícone branco ligeiramente mais claro */
}

/* Estilo para o vídeo, garantindo que ele preencha o container */
#vsl-video {
    width: 100%;
    height: 100%;
    display: block; /* Garante que não haja espaço extra */
}

/* Estilo para o Background da Seção de Formulário */
#contact-form-section {
    background: linear-gradient(177deg, #000000 0%, #001b35 100%);
    position: relative;
    overflow: hidden;
    padding-bottom: 20px;
    border-radius: 10px;
}

/* Campos de Formulário dentro do Glassmorphism */
.form-panel .form-control {
    background-color: rgba(255, 255, 255, 0.1); /* Fundo sutilmente transparente */
    border: 1px solid rgba(255, 255, 255, 0.3); /* Borda fina e clara */
    color: #fff; /* Texto digitado em branco */
    padding: 1rem;
}

/* Placeholder do formulário */
.form-panel .form-control::placeholder {
    color: rgba(255, 255, 255, 0.8); /* Placeholder branco suave */
}

/* Foco no campo (remover a sombra padrão e adicionar uma suave) */
.form-panel .form-control:focus {
    background-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 0 0.25rem rgba(0, 123, 255, 0.5); /* Sombra de foco azul */
    border-color: #fff;
    color: #fff;
}

/* Estilo do Ícone de Xis (Garante o alinhamento e tamanho) */
.content-panel .feature-icon svg {
    min-width: 24px;
    margin-top: 5px; /* Ajuste fino para alinhar com o texto */
}

/* Botão de Submit */
.form-panel .btn-primary {
    /* Cor de contraste forte (laranja ou verde do WhatsApp, por exemplo) */
    background-color: #ffc107; 
    border-color: #ffc107;
    color: #000;
}

.form-panel .btn-primary:hover {
    background-color: #e0a800;
    border-color: #e0a800;
}

/* Atualização no seu arquivo CSS (style.css) */

.glass-input.form-select { /* Aplica-se a inputs e selects */
    background-color: rgba(255, 255, 255, 0.1); 
    border: 1px solid rgba(255, 255, 255, 0.3); 
    color: #fff; /* Cor do texto digitado */
    padding: 1rem 1rem;
    border-radius: 0.5rem; /* Garante arredondamento */
    /* Remove a seta padrão do Bootstrap para selects e a seta padrão de foco */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-size: 16px 12px;
}

.glass-input::placeholder {
    color: rgba(255, 255, 255, 0.7); 
}

/* Garante que as opções do select fiquem escuras para serem legíveis */
.glass-input.form-select option {
    background-color: #343a40; /* Fundo escuro para legibilidade das opções */
    color: #fff;
}

/* SEU CSS GERAL */

.glass-input {
    /* ... (outros estilos glassmorphism) ... */
    color: #fff; /* Garante que o texto digitado/selecionado no campo seja branco */
}

/* Correção de Legibilidade para Opções do Select (Crucial para Dark Mode/Glassmorphism) */

/* Aplica cor de fundo escura às opções do dropdown para contrastar com o texto branco */
.glass-input.form-select option {
    /* Use um fundo escuro que não seja preto puro para simular o tema escuro do OS */
    background-color: #343a40 !important; 
    color: #fff !important; /* Garante que o texto dentro do dropdown seja branco */
    /* Você pode precisar de !important para sobrepor estilos padrão do navegador/Bootstrap */
}

/* Opcional: Garante que o texto da opção selecionada dentro da caixa <select> seja branco */
.glass-input.form-select {
    color: #fff; 
}
.btn-from{
background-color: transparent;

border: none;
}

/* =============================
   EFEITO HOVER DO WHATSAPP PARA O BOTÃO DO FORMULÁRIO (Corrigido)
   ============================= */

/* 1. Estilos base para o botão de formulário que usa o SVG/Imagem */
.svg-button-submit {
    /* Garante que o botão atue como bloco para o efeito de transformação */
    display: inline-block; 
    /* Remove a aparência padrão de botão, se houver */
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    /* Aplica a transição para suavizar a animação e o filtro/sombra */
    transition: transform 0.3s ease, filter 0.3s ease;
    /* Inicializa o filtro, garantindo que a transição funcione corretamente */
    filter: drop-shadow(0 0 0 rgba(37, 211, 102, 0)); 
}

/* 2. Aplica o efeito de levitação e o drop-shadow (Glow) ao passar o mouse */
.svg-button-submit:hover {
    transform: translateY(-5px); /* Efeito de levitação (mover 5px para cima) */
    /* Adiciona o Glow Verde, usando filter: drop-shadow para seguir a forma do ícone (círculo) */
    /* Sintaxe: drop-shadow(offset-x offset-y blur-radius color) */
    filter: drop-shadow(0 0 15px rgba(37, 211, 102, 0.9)); 
    z-index: 1000; /* Garante que o elemento fique por cima dos outros ao levitar */
}

/* =============================
   CENTRALIZAÇÃO DO BOTÃO
   ============================= */

/* Centraliza o conteúdo dentro do container do botão do WhatsApp */
.whatsapp-badge {
    text-align: center;
    width: 100%;
    /* padding-top: 20px; */
    padding-bottom: 20px;
}
.card-dark-bg {
    background-color: var(--card-dark); /* Assume que --card-dark está definido no seu :root */
    border: 1px solid rgba(255, 255, 255, 0.1); /* Borda sutil */
    border-radius: 1rem; /* Arredondamento */
}

/* Garante o arredondamento perfeito para as imagens de perfil (se não estiver usando classes do Bootstrap) */
.rounded-circle {
    border-radius: 50% !important;
}

/* Garante que o texto dentro da imagem grande da equipe esteja alinhado (se houver) */
.shadow-lg {
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.4) !important; /* Sombra mais profunda para destaque */
}

.quem-somos p {
    margin-top: 20px;
    color: #fff;
    text-align: justify;
}


/* Garante que os diretores fiquem abaixo da foto da equipe */
.area-diretores {
    height: 270px;
}

/* Remove sobreposição antiga */
.diretores-overlay {
    position: relative !important;
    margin-top: 0 !important;
}

/* Espaçamento entre a imagem da equipe e os diretores */
.quem-somos .row.g-4 {
    margin-top: 2rem;
}

/* === GRADIENTE AZUL ATRÁS DOS DIRETORES === */
.area-diretores .card-dark-bg {
    position: relative;
    overflow: hidden;
    border-radius: 0.75rem;
    background: rgba(0, 14, 28, 0.3);
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.37);
}


/* garante que a imagem continue acima do gradiente */
.area-diretores .card-dark-bg img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

/* a faixa de texto de vidro continua acima */
.diretor-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 1rem;
    z-index: 2;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.35) 80%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0 0 0.75rem 0.75rem;
}

/* texto mais legível */
.diretor-overlay h5 {
    color: #ffffff;
    font-weight: 700;
    margin-bottom: 4px;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}

.diretor-overlay p {
    color: rgba(180, 210, 255, 0.9);
    font-size: 0.9rem;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

.text-muted-foreground {
    color: #ffffff !important;
}

/* ===============================
   FAQ / ACCORDION ESTILIZADO
   =============================== */
.faq-section {
  background: linear-gradient(180deg, #000002 0%, #001b35 100%);
}

.accordion-item.bg-glass {
  background: rgba(20, 30, 50, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.75rem;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.accordion-item.bg-glass:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 20px rgba(52, 152, 219, 0.2);
}

.accordion-button {
  background: transparent !important;
  color: #f0f8ff !important;
  font-weight: 600;
  font-size: 1rem;
  box-shadow: none !important;
  border: none;
  padding: 1.25rem;
  transition: color 0.3s ease;
}

.accordion-button.collapsed {
  color: rgba(255, 255, 255, 0.9);
}

.accordion-button:not(.collapsed) {
  background: rgba(16, 60, 100, 0.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.accordion-body {
  color: rgba(230, 240, 255, 0.9);
  font-weight: 300;
  line-height: 1.6;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 0 0 0.75rem 0.75rem;
  padding: 1.5rem;
}

/* Ícones */
.accordion-button i {
  font-size: 1.2rem;
  opacity: 0.85;
  transition: transform 0.3s ease;
}

.accordion-button:not(.collapsed) i {
  transform: rotate(15deg) scale(1.1);
  color: #a5d4ff;
}

/* === ÍCONE + / – NO ACCORDION (MENOR E BRANCO) === */

/* Remove o ícone padrão do Bootstrap */
.accordion-button::after {
  display: none !important;
}

/* Ícone padrão "+" (fechado) */
.accordion-button::before {
  content: "+";
  font-weight: 600;
  font-size: 1rem; /* reduzido de 1.3rem para equilíbrio */
  color: #ffffff;
  margin-left: auto;
  transition: all 0.25s ease-in-out;
  opacity: 0.85;
  line-height: 1;
}

/* Ícone "–" (quando aberto) */
.accordion-button:not(.collapsed)::before {
  content: "–";
  transform: rotate(180deg);
  color: #ffffff;
  opacity: 1;
}

/* ===== Ajuste definitivo: título alinhado à esquerda + ícone +/– à direita ===== */

/* garante comportamento flex padrão e reset de possíveis conflitos */
.accordion-button {
  display: flex !important;
  align-items: center;
  justify-content: flex-start; /* texto à esquerda */
  gap: 0.75rem;
  padding: 1rem 2.75rem 1rem 1.25rem; /* mais espaço à direita para o +/– absoluto */
  position: relative; /* necessário para posicionar o ::before absoluto */
  background: transparent !important;
  color: inherit;
  text-align: left;
}

/* ícone à esquerda (lucide ou fontawesome) mantém tamanho */
.accordion-button i,
.accordion-button .icon {
  flex: 0 0 auto; /* não cresce */
  width: 1.25rem;
  height: 1.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 0.6rem;
  opacity: 0.95;
}

/* texto do título ocupa o espaço restante e fica alinhado à esquerda */
.accordion-button > *:not(::before) {
  /* não mexemos aqui; the specific span rule below is safer */
}

/* caso tenha texto direto ou tags, force o span de título a ocupar o espaço */
.accordion-button .accordion-title,
.accordion-button span,
.accordion-button h5,
.accordion-button strong {
  flex: 1 1 auto;
  text-align: left;
  margin: 0;
  white-space: normal; /* permite quebra de linha se necessário */
}

/* Remove o ícone-padrão do Bootstrap */
.accordion-button::after {
  display: none !important;
}

/* posiciona o + / – de forma ABSOLUTA à direita (não interferindo no fluxo) */
.accordion-button::before {
  content: "+";
  position: absolute;
  right: 1.05rem; /* distancia do canto direito; ajuste se necessário */
  top: 50%;
  transform: translateY(-50%);
  font-weight: 600;
  font-size: 1rem;
  color: #fff;
  transition: transform .18s ease, opacity .18s ease;
  line-height: 1;
  pointer-events: none; /* não captura cliques */
  opacity: 0.95;
}

/* muda para traço quando aberto */
.accordion-button:not(.collapsed)::before {
  content: "–";
  transform: translateY(-50%) rotate(0deg);
  opacity: 1;
}

/* se usar ícones Lucide à esquerda e quiser que "girem" quando aberto */
.accordion-button i {
  transition: transform .25s ease;
}
.accordion-button:not(.collapsed) i {
  transform: rotate(18deg) scale(1.03);
}

/* pequenas correções responsivas — reduz padding direito em telas pequenas */
@media (max-width: 576px) {
  .accordion-button {
    padding-right: 2rem;
  }
  .accordion-button::before {
    right: 0.85rem;
    font-size: 0.95rem;
  }
}
/* ===== Alinhamento e largura do FAQ ===== */
.faq-section {
  background: linear-gradient(180deg, #000002 0%, #001b35 100%);
}

.faq-wrapper {
  max-width: 850px; /* igual à largura do bloco de baixo */
  width: 100%;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Accordion ocupa a largura da área interna */
.faq-section .accordion {
  width: 100%;
}

/* Itens com borda e arredondamento */
.faq-section .accordion-item {
  border-radius: 0.75rem;
  overflow: hidden;
  background: rgba(20, 30, 50, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* ===== Botão do Accordion ===== */
.accordion-button {
  display: flex !important;
  justify-content: flex-start;
  align-items: center;
  text-align: left;
  padding: 1rem 2.5rem 1rem 1.25rem;
  position: relative;
  background: transparent !important;
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
  gap: 0.75rem;
}

/* Remove o ícone padrão Bootstrap */
.accordion-button::after {
  display: none !important;
}

/* Ícone + / - personalizado */
.accordion-button::before {
  content: "+";
  position: absolute;
  right: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 600;
  font-size: 1rem;
  color: #ffffff;
  transition: all 0.2s ease;
  opacity: 0.85;
}

.fs-15 {
    font-size: 1.3rem;
}

.accordion-button:not(.collapsed)::before {
  content: "–";
  opacity: 1;
}

/* Texto ocupa todo o espaço à esquerda */
.accordion-button span,
.accordion-button strong,
.accordion-button h5 {
  flex: 1;
  text-align: left;
}

/* Corpo do Accordion */
.accordion-body {
  background: rgba(0, 0, 0, 0.3); 
}

/* =============================
   AJUSTES RESPONSIVOS (MEDIA QUERIES)
   ============================= */

/* --- Media Query para Mobile/Tablet (Tamanho de Tela: até 768px) --- */
@media (max-width: 768px) {
    /* Redução de padding no Hero Section */
    .hero-section .container {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    /* Ajuste do Título Principal (h1) */
      .hero-title {
        font-size: 2.2rem !important;
        line-height: 40px;
    }
    
    /* Ajuste do Parágrafo Lead */
    .hero-section .lead {
        font-size: 1rem !important; 
    }

    /* Ajuste do Título da Seção (h2) - usa .fs-3 */
    .text-center.fs-3 {
        font-size: 1.5rem !important; 
    }

    /* Ajuste dos textos em listas de benefícios (.fs-5) */
    .features-section .fs-5,
    .list-unstyled .fs-5 {
        font-size: 1.1rem !important; 
    }
    
    /* Ajuste dos textos nos cards de diretores */
    .area-diretores .card-body p {
        font-size: 0.9rem;
    }

    /* Ajuste do texto no Accordion/FAQ */
    .accordion-button {
        font-size: 0.95rem !important;
        padding: 0.75rem 2rem 0.75rem 1rem !important; /* Diminuindo padding */
    }
    .accordion-body {
        font-size: 0.9rem;
    }
    
    /* Ajuste do texto de +500 Máquinas (logo-text) */
    .logo-text {
        font-size: 1rem;
    }

    .lead {
    font-size: 17px;
    font-weight: 300;
}
#contact-form-section {
    background: linear-gradient(177deg, #000000 0%, #001b35 100%);
    position: relative;
    overflow: hidden;
    padding-bottom: 15px;
}
}

/* --- Otimização para Telefones Pequenos (Tamanho de Tela: até 420px) --- */
@media (max-width: 420px) {
    /* Ajuste do Título Principal (h1) */
    .hero-title {
        font-size: 1.75rem !important; /* Mais redução para telas muito pequenas */
    }
    
    /* Ajuste do Título da Seção (h2) */
    .text-center.fs-3 {
        font-size: 1.3rem !important;
    }
    
    /* Ajuste dos textos em listas de benefícios (fs-5) */
    .features-section .fs-5,
    .list-unstyled .fs-5 {
        font-size: 0.95rem !important; 
    }
}

/* =======================================
   CORREÇÃO E RESPONSIVIDADE DO BOTÃO SVG 
   ======================================= */

/* 1. Containers: Definindo limites e centralização */
/* Aplica-se ao contêiner do link (.whatsapp-badge) e ao botão do form (.svg-button-submit) */
.whatsapp-badge,
.svg-button-submit {
    /* Define a largura máxima (a largura original do SVG) */
    max-width: 325px; 
    /* Garante que ocupe 100% do espaço na coluna */
    width: 100%; 
    /* Centraliza */
    margin-left: auto;
    margin-right: auto;
    /* Adicione um padding vertical, se necessário, para debug */
    padding-top: 5px; 
    padding-bottom: 5px; 
}

/* 2. Link Anchor/Botão: Garante que ocupe todo o espaço do container */
/* Aplica-se ao link <a> e ao botão <button> */
.whatsapp-badge a,
.svg-button-submit {
    /* CRUCIAL: Faz o elemento ocupar a largura do seu contêiner */
    display: block; 
    width: 100%;
    /* Remove espaçamentos que podem estar colapsando o SVG */
    border: none;
    padding: 0;
    line-height: 0; 
}

/* 3. O elemento SVG: A correção principal */
.whatsapp-badge svg,
.svg-button-submit svg {
    /* CRUCIAL: Força o SVG a ser um elemento de bloco para dimensionamento */
    display: block !important; 
    /* Força 100% da largura do contêiner */
    width: 100% !important; 
    /* Permite que a altura seja calculada automaticamente pelo 'viewBox' */
    height: auto !important; 
    /* Garante que o SVG não "encontre" a largura e suma */
    min-width: 100%; 
}

/* ===========================================
   Ajuste das Imagens (Logos/Selos) no Mobile
   =========================================== */

/* 1. Estilos Padrão para as Imagens (Aplica-se a todas as telas, mas é a base) */
/* Se suas imagens não têm classes específicas, use o seletor mais preciso.
   Vou usar .img-certificacao como exemplo. */
.img-certificacao {
    /* Garante que elas ocupem no máximo sua largura original no desktop */
    max-width: 100%;
    height: auto;
    /* Adicione uma margem inferior padrão para separar do conteúdo abaixo */
    margin-bottom: 20px; 
}


/* =========================================================
    AJUSTE MOBILE: DIRETORES (Refinando Posição e Tamanho)
    ========================================================= */

/* Mobile-First: Aplica regras em telas de até 767px de largura */
@media (max-width: 767px) {

  .text-justify {
    padding: 0px 0px 0px 0px !important;
}
    
    /* Outros ajustes que você tinha */
    .faq-section {
        margin-top: -25px;
    }

    .ajuste-mobile-diretores {
    margin-top: -150px;
}

    .row.g-4.position-relative {
        margin-top: -165px !important;
        padding-top: 10px;
        padding-bottom: 20px;
    }
    
    /* 1. Ajuste do Card Interno (Contêiner Principal) */
    /* Define o tamanho e garante que ele seja o ponto de referência (position: relative) */
.area-diretores .card {
        width: 100%;
        max-width: 300px;
        margin: 15px auto !important;
        height: 188px !important;
        position: relative !important;
        overflow: hidden !important;
        padding: 0 !important;
    }

    /* 2. Ajuste da Imagem (Para o Efeito de Overlay) */
    /* Garante que a imagem ocupe 100% do card pai e fique por baixo do texto. */
    .area-diretores .card img {
        position: absolute !important; 
        top: 0 !important; 
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        z-index: 1; /* Fica abaixo do overlay */
    }
    
    /* 3. Ajuste do Overlay/Descrição */
    /* Garante que o texto de sobreposição esteja por cima e ancorado na parte inferior. */
    .diretor-overlay {
        position: absolute !important;
        bottom: 0 !important;
        width: 100% !important;
        height: auto !important; /* Deixa a altura se ajustar ao conteúdo */
        padding: 15px !important; /* Um padding razoável */
        z-index: 2; /* Fica acima da imagem */
        /* OPCIONAL: Adicione um background semitransparente se o texto estiver difícil de ler */
        /* background: rgba(0, 0, 0, 0.6); */
    }

    /* 4. Ajuste do Tamanho da Fonte */
    
    /* Reduz o Título (fs-6 / h5) do Diretor */
    .diretor-overlay h5.fs-6 {
        font-size: 0.55rem !important; /* Tente 1rem (16px) ou um pouco menos */
        margin-bottom: 0.25rem !important; /* Espaçamento pequeno após o título */
    }

    /* Reduz o Subtítulo (small / p) do Cargo */
    .diretor-overlay p.small {
        font-size: 0.55rem !important; /* Tente 0.75rem (12px) */
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

}


@media (max-width: 420px) {
  .hero-title {
    font-size: 1.75rem !important;
 
    margin-bottom: 1.2rem !important;
  }
  .lead,
  .fs-5,
  .features-section .fs-5,
  .list-unstyled .fs-5 {
    font-size: 0.95rem !important;
    margin-bottom: 0.7rem !important;
  }
  .benefit-list li {
    margin-bottom: 0.7rem !important;
    /* Ou ajuste o padding se necessário */
  }
  .hero-section .container {
    padding-top: 1.2rem !important;
    padding-bottom: 1.2rem !important;
  }
}
@media (max-width: 420px) {
  div.content-panel.p-5 {
    padding: 0.5rem !important;
  }
}

.text-justify {
    text-align: justify;
    padding: 30px 30px 30px 0px;
    line-height: 30px;
}


.logos-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    justify-content: flex-start;
}

.logos-linha {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
}

.logo-circulo {
    width: 70px;
    height: 70px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: -20px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    z-index: 2;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.05), 0 0 1px #bbb;
    position: relative;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    padding: 18px;
}

.logo-circulo:last-child {
    margin-right: 0;
}
.quem-somos{
    align-items: center;
}
.logo-circulo img {
    max-width: 38px;
    max-height: 32px;
    filter: brightness(0) invert(1);
}
.margem {
    margin-bottom: 50px;
}

.alinhar {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.btn-aux {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-content: center;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 50px;
}
.frase-lado {
    margin-left: 40px;
    color: #fff;
    font-size: 12px;
    white-space: nowrap;
    line-height: 17px;
    text-align: left;
}

.frase-lado b{
    font-weight: 700;
}

.logo-circulo {
    transition: 
        transform 0.4s cubic-bezier(.25,.8,.25,1), 
        box-shadow 0.35s cubic-bezier(.25,.8,.25,1);
    will-change: transform;
}

.logo-circulo:hover {
    transform: perspective(400px) rotateX(8deg) rotateY(-10deg) scale(1.10);
    box-shadow: 0 16px 30px 0 rgba(0,0,0,0.14), 0 0 1px #aaa;
    z-index: 3;
}

.frase-lado-mobile { 
    display: none; 
}

@media (max-width: 768px) {


    .margem {
    margin-bottom: -20px;
}

    .logos-wrapper {

        flex-direction: column !important;
        align-items: center !important;
    }
    
    .logos-linha {
        justify-content: center !important;
        margin-bottom: 0 !important;
        flex-wrap: wrap !important;
    }
    
    .frase-lado { 
        display: none !important; 
    }
    
    .frase-lado-mobile {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        margin-top: 20px !important;
        margin-left: 0 !important;
        color: #fff !important;
        font-size: 15px !important;
        line-height: 22px !important;
        padding: 0 15px !important;
    }
    
    .frase-lado-mobile b {
        font-weight: 700 !important;
    }
    
    .logo-circulo {
        margin-right: -15px !important;
        width: 70px !important;
        height: 70px !important;
        padding: 12px !important;
    }
    
    .logo-circulo:last-child {
        margin-right: 0 !important;
    }
    
    .logo-circulo img {
        max-width: 28px !important;
        max-height: 24px !important;
    }
}

/* Aplica o layout flex ao container correto do PHP */
.badges-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 1rem;
  flex-wrap: wrap;
  margin-bottom: 50px;
}