/* style.css */

/*
|--------------------------------------------------------------------------
| Variáveis CSS para Cores e Constantes Globais
|--------------------------------------------------------------------------
| Define cores padronizadas e valores fixos que podem ser reutilizados
| por todo o stylesheet, facilitando a manutenção e a consistência visual.
*/
:root {
    --azul-principal: hsl(200, 100%, 40%);     /* Cor azul forte, usada para elementos primários e links */
    --cinza-principal: hsl(220, 5%, 45%);      /* Cinza médio para textos secundários e bordas */
    --azul-claro: hsl(190, 80%, 70%);          /* Azul mais claro, para destaques ou elementos terciários */
    --branco: #FFFFFF;                         /* Cor branca pura */
    --fundo-claro: #F8F8F8;                    /* Um tom de off-white para seções de fundo claro */
    --texto-primario: hsl(220, 10%, 20%);      /* Tom escuro para o texto principal, garantindo legibilidade */
    --verde-cta: hsl(120, 50%, 50%);           /* Verde vibrante para Calls to Action (CTAs) genéricas */
    --verde-vitoria: hsl(120, 70%, 35%);       /* Um verde mais escuro e intenso, ideal para CTAs de WhatsApp */

    --altura-cabecalho: 80px;                  /* Define a altura fixa do cabeçalho */
    --espacamento-secao: 20px 0;               /* Padding vertical padrão para seções */
}

/*
|--------------------------------------------------------------------------
| Reset Básico de Estilos
|--------------------------------------------------------------------------
| Reseta as margens e paddings padrão dos navegadores e define um
| modelo de caixa consistente para todos os elementos, evitando surpresas.
*/
* {
    margin: 0;           /* Remove margens padrão de todos os elementos */
    padding: 0;          /* Remove paddings padrão de todos os elementos */
    box-sizing: border-box; /* Garante que padding e borda sejam incluídos na largura/altura do elemento */
}

html {
    scroll-behavior: smooth; /* Adiciona rolagem suave a todos os links âncora */
}

body {
    font-family: 'Open Sans', sans-serif; /* Define a fonte principal para o corpo do texto */
    line-height: 1.6;        /* Espaçamento entre linhas para melhor legibilidade */
    color: var(--texto-primario); /* Cor de texto padrão, definida na variável */
    background-color: var(--branco); /* Cor de fundo padrão para o corpo da página */
}

a {
    text-decoration: none;   /* Remove o sublinhado padrão dos links */
    color: var(--azul-principal); /* Define a cor dos links */
}

img {
    max-width: 100%;     /* Garante que imagens não ultrapassem a largura do seu contêiner */
    height: auto;        /* Mantém a proporção da imagem ao redimensionar */
    display: block;      /* Remove o espaço extra abaixo das imagens que são inline por padrão */
}

ul {
    list-style: none;    /* Remove os marcadores de lista padrão */
}

/*
|--------------------------------------------------------------------------
| Classes Utilitárias
|--------------------------------------------------------------------------
| Classes genéricas e reutilizáveis para aplicar estilos comuns
| como centralização, cores de fundo e texto, e padding de seções.
*/
.container {
    max-width: 1200px;   /* Largura máxima do conteúdo centralizado */
    margin: 0 auto;      /* Centraliza o contêiner na página */
    padding: 0 16px;     /* Padding lateral para evitar que o conteúdo encoste nas bordas da tela */
}

.texto-centro {
    text-align: center;  /* Alinha o texto ao centro */
}

.fundo-claro {
    background-color: var(--fundo-claro); /* Aplica a cor de fundo claro definida na variável */
}

.fundo-azul-escuro {
    background-color: var(--azul-principal); /* Aplica a cor azul principal como fundo */
}

.texto-branco {
    color: var(--branco); /* Define a cor do texto como branco */
}

.secao-com-padding {
    padding: 30px 0;     /* Padding vertical padrão para seções em telas maiores */
    min-height: calc(100vh - var(--altura-cabecalho)); /* Garante que a seção ocupe a altura restante da viewport */
    display: flex;       /* Habilita o Flexbox para alinhamento de conteúdo */
    flex-direction: column; /* Organiza os itens em uma coluna */
    justify-content: center; /* Centraliza o conteúdo verticalmente */
    align-items: center; /* Centraliza o conteúdo horizontalmente */
    box-sizing: border-box; /* Garante que padding e borda sejam incluídos na altura */
}

/*
|--------------------------------------------------------------------------
| Animação de Fade-in para Seções
|--------------------------------------------------------------------------
| Aplica um efeito de fade-in e slide-up para seções que entram na viewport.
*/
.secao-com-fade {
    opacity: 0;          /* Inicia a seção invisível */
    transform: translateY(20px); /* Move a seção 20px para baixo no início */
    transition: opacity 0.6s ease-out, /* Transição suave para opacidade */
                transform 0.6s ease-out; /* Transição suave para a transformação */
}

.secao-com-fade.visivel {
    opacity: 1;          /* Torna a seção totalmente visível */
    transform: translateY(0); /* Retorna a seção à sua posição original */
}

/*
|--------------------------------------------------------------------------
| Cabeçalho (Header)
|--------------------------------------------------------------------------
| Estilos para o cabeçalho fixo da página, incluindo logo e navegação.
*/
.cabecalho {
    background-color: var(--branco); /* Cor de fundo branca para o cabeçalho */
    padding: 15px 0;     /* Padding vertical para espaçamento interno */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Sombra sutil na parte inferior do cabeçalho */
    position: fixed;     /* Fixa o cabeçalho no topo da viewport */
    width: 100%;         /* Ocupa a largura total da tela */
    top: 0;              /* Alinha ao topo */
    left: 0;             /* Alinha à esquerda */
    z-index: 1000;       /* Garante que o cabeçalho fique acima de outros elementos */
}

.cabecalho .container {
    display: flex;       /* Habilita o Flexbox para alinhar logo e navegação */
    justify-content: space-between; /* Distribui o espaço entre os itens (logo à esquerda, nav à direita) */
    align-items: center; /* Centraliza os itens verticalmente */
    gap: 50px;           /* Espaço mínimo entre o logo e a navegação (flex-wrap cuidará do resto) */
}

.logo img {
    height: 50px;        /* Define a altura do logo */
    width: auto;         /* Mantém a proporção da imagem do logo */
}

.navegacao-principal .lista-navegacao {
    display: flex;       /* Habilita o Flexbox para os itens do menu */
    gap: 25px;           /* Espaçamento entre os itens do menu */
    align-items: center; /* Alinha os itens do menu verticalmente ao centro */
}

.navegacao-principal .lista-navegacao li a {
    color: var(--texto-primario); /* Cor padrão do texto dos links de navegação */
    font-weight: 600;    /* Peso da fonte semi-negrito */
    transition: color 0.3s ease; /* Transição suave da cor ao passar o mouse */
}

.navegacao-principal .lista-navegacao li a:not(.botao):hover {
    color: var(--azul-principal); /* Altera a cor do texto para azul principal no hover, exceto para botões */
}

/*
|--------------------------------------------------------------------------
| Botões Gerais
|--------------------------------------------------------------------------
| Estilos base para todos os botões e suas variações.
*/
.botao {
    display: inline-block; /* Permite definir largura/altura e paddings, mas mantém na linha */
    padding: 12px 25px;  /* Padding interno para o botão */
    border-radius: 5px;  /* Bordas levemente arredondadas */
    font-weight: 700;    /* Texto do botão em negrito */
    text-align: center;  /* Centraliza o texto dentro do botão */
    transition: background-color 0.3s ease, /* Transição suave para cor de fundo */
                color 0.3s ease,         /* Transição suave para cor do texto */
                transform 0.2s ease,     /* Transição suave para leve movimento */
                border-color 0.3s ease;  /* Transição suave para cor da borda */
    white-space: nowrap; /* Impede que o texto do botão quebre em múltiplas linhas */
}

.botao-primario {
    background-color: var(--azul-principal); /* Cor de fundo azul principal */
    color: var(--branco); /* Cor do texto branca */
    border: 2px solid var(--azul-principal); /* Borda sólida com a cor azul principal */
}

.botao-primario:hover {
    background-color: var(--branco); /* Fundo branco no hover */
    color: var(--azul-principal); /* Texto azul principal no hover */
    border-color: var(--azul-principal); /* Borda azul principal no hover */
    transform: translateY(-2px); /* Eleva o botão ligeiramente no hover */
    box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* Sombra sutil no hover */
}

.botao:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}


/* Botão de Call to Action (CTA) - Verde */
.botao-cta {
    background-color: var(--verde-cta); /* Cor de fundo verde para CTA */
    color: var(--branco); /* Cor do texto branca */
    padding: 15px 30px;  /* Padding maior para destaque */
    font-size: 1.1em;    /* Tamanho da fonte ligeiramente maior */
    border-radius: 8px;  /* Bordas mais arredondadas */
    margin-top: 20px;    /* Margem superior para espaçamento */
    border: none;        /* Sem borda */
}

.botao-cta:hover {
    background-color: hsl(120, 60%, 40%); /* Um verde um pouco mais escuro no hover */
    transform: translateY(-3px); /* Eleva o botão um pouco mais no hover */
    box-shadow: 0 5px 15px rgba(0,0,0,0.2); /* Sombra mais pronunciada no hover */
}

/* Botão de WhatsApp Direto - Verde Vibrante */
.botao-whatsapp-direto {
    display: inline-flex; /* Permite alinhar ícone e texto na mesma linha */
    align-items: center; /* Centraliza verticalmente o ícone e o texto */
    background-color: var(--verde-vitoria); /* Cor de fundo verde vibrante */
    color: var(--branco); /* Cor do texto branca */
    padding: 30px 60px;  /* Padding grande para máximo destaque */
    font-size: 1.5em;    /* Tamanho da fonte bem maior */
    border-radius: 8px;  /* Bordas arredondadas */
    margin-top: 25px;    /* Margem superior para espaçamento */
    font-weight: 700;    /* Texto em negrito */
    transition: background-color 0.3s ease, /* Transição suave da cor de fundo */
                transform 0.2s ease,     /* Transição suave do movimento */
                box-shadow 0.3s ease;    /* Transição suave da sombra */
}

.botao-whatsapp-direto i {
    margin-right: 10px;  /* Espaçamento à direita do ícone */
    font-size: 1.3em;    /* Tamanho do ícone ligeiramente maior que o texto */
}

.botao-whatsapp-direto:hover {
    background-color: hsl(120, 80%, 30%); /* Um verde ainda mais escuro no hover */
    transform: translateY(-3px); /* Eleva o botão no hover */
    box-shadow: 0 5px 15px rgba(0,0,0,0.2); /* Sombra mais pronunciada no hover */
}

/* Estilo para o botão desabilitado pelo reCAPTCHA */
.botao-desabilitado {
    opacity: 0.5;        /* Torna o botão translúcido para indicar que está desabilitado */
    cursor: not-allowed; /* Altera o cursor para "não permitido" ao passar o mouse */
    pointer-events: none; /* IMPEDE que o botão seja clicável (muito importante!) */
    /* Você pode adicionar estilos adicionais aqui, se desejar um feedback visual mais forte */
}

/*
|--------------------------------------------------------------------------
| Hero Section
|--------------------------------------------------------------------------
| Estilos para a seção principal de destaque da página.
*/
.hero {
    background: url('img/backgroundfarmaciagpt.png') no-repeat center center; /* Imagem de fundo com centralização */
    background-size: cover;  /* Garante que a imagem cubra toda a área */
    color: var(--branco);    /* Cor do texto branca */
    text-align: center;      /* Centraliza o texto */
    min-height: 100vh;       /* Ocupa a altura total da viewport */
    padding-top: calc(var(--altura-cabecalho) + 60px); /* Padding superior ajustado pela altura do cabeçalho */
    padding-bottom: 60px;    /* Padding inferior */
    display: flex;           /* Habilita o Flexbox para centralizar conteúdo verticalmente */
    align-items: center;     /* Centraliza itens verticalmente */
    justify-content: center; /* Centraliza itens horizontalmente */
    position: relative;      /* Necessário para o overlay ::before */
}

.hero::before {
    content: '';             /* Conteúdo vazio para criar o overlay */
    position: absolute;      /* Posiciona o overlay absolutamente */
    top: 0;                  /* Alinha ao topo */
    left: 0;                 /* Alinha à esquerda */
    right: 0;                /* Alinha à direita */
    bottom: 0;               /* Alinha à base */
    background-color: rgba(0, 0, 0, 0.5); /* Cor preta com 50% de opacidade para escurecer o fundo */
    z-index: 1;              /* Garante que o overlay fique abaixo do conteúdo e acima do background */
}

.conteudo-hero {
    position: relative;      /* Permite que o conteúdo fique acima do overlay */
    z-index: 2;              /* Garante que o conteúdo fique acima do overlay */
    max-width: 800px;        /* Largura máxima do conteúdo hero */
}

.conteudo-hero h1 {
    font-size: 3.2em;        /* Tamanho da fonte grande para o título principal */
    margin-bottom: 20px;     /* Margem inferior */
    font-family: 'Montserrat', sans-serif; /* Fonte personalizada para o título */
    line-height: 1.2;        /* Espaçamento entre linhas reduzido para o título */
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5); /* Sombra para o texto para melhor contraste */
}

.conteudo-hero p {
    font-size: 1.3em;        /* Tamanho da fonte para o parágrafo */
    margin-bottom: 30px;     /* Margem inferior */
    line-height: 1.5;        /* Espaçamento entre linhas */
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5); /* Sombra sutil para o parágrafo */
}

/*
|--------------------------------------------------------------------------
| Estilos de Seções de Conteúdo e Títulos
|--------------------------------------------------------------------------
| Regras gerais para títulos h2 e descrições de seção.
*/
h2 {
    font-family: 'Montserrat', sans-serif; /* Fonte personalizada para títulos de seção */
    font-size: 2.5em;        /* Tamanho da fonte grande para h2 */
    color: var(--azul-principal); /* Cor azul principal para h2 */
    margin-bottom: 20px;     /* Margem inferior */
}

.descricao-secao {
    font-size: 1.15em;       /* Tamanho da fonte para descrições de seção */
    color: var(--cinza-principal); /* Cor cinza para descrições */
    margin-bottom: 30px;     /* Margem inferior */
    max-width: 800px;        /* Largura máxima para melhor legibilidade */
    margin-left: auto;       /* Centraliza o elemento horizontalmente */
    margin-right: auto;      /* Centraliza o elemento horizontalmente */
}

/*
|--------------------------------------------------------------------------
| Seção #software (Funcionalidades)
|--------------------------------------------------------------------------
| Estilos específicos para a seção de funcionalidades do software.
*/
#software .container {
    display: flex;           /* Habilita o Flexbox */
    flex-direction: column;  /* Organiza os itens em coluna */
    justify-content: center; /* Centraliza conteúdo verticalmente */
    align-items: center;     /* Centraliza conteúdo horizontalmente */
    flex-grow: 1;            /* Permite que o contêiner interno use o espaço disponível */
    padding-top: 10px;       /* Padding superior */
    padding-bottom: 10px;    /* Padding inferior */
}

.grade-funcionalidades-software {
    display: grid;           /* Habilita o Grid para layout de cartões */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Colunas responsivas */
    gap: 10px 30px;          /* Espaçamento entre os itens da grade (linhas e colunas) */
    margin-top: 0;           /* Remove margem superior desnecessária */
    width: 100%;             /* Ocupa a largura total do contêiner pai */
    max-width: 1000px;       /* Limita a largura máxima da grade */
}

.item-funcionalidade {
    background-color: var(--branco); /* Cor de fundo branca para o cartão */
    padding: 30px;           /* Padding interno */
    border-radius: 10px;     /* Bordas arredondadas */
    box-shadow: 0 4px 10px rgba(0,0,0,0.08); /* Sombra suave */
    text-align: center;      /* Centraliza o texto */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transições suaves para hover */
    border-top: 5px solid var(--azul-principal); /* Borda superior colorida para destaque */
}

.item-funcionalidade:hover {
    transform: translateY(-5px); /* Eleva o cartão no hover */
    box-shadow: 0 8px 20px rgba(0,0,0,0.15); /* Sombra mais pronunciada no hover */
}

.item-funcionalidade i {
    font-size: 3.5em;        /* Tamanho do ícone */
    color: var(--azul-principal); /* Cor do ícone */
    margin-bottom: 20px;     /* Margem inferior */
}

.item-funcionalidade h4 {
    font-size: 1.4em;        /* Tamanho da fonte para o título da funcionalidade */
    color: var(--texto-primario); /* Cor do texto */
    margin-bottom: 10px;     /* Margem inferior */
}

.item-funcionalidade p {
    font-size: 1em;          /* Tamanho da fonte para o parágrafo */
    color: var(--cinza-principal); /* Cor do texto */
}

/*
|--------------------------------------------------------------------------
| Seção de Benefícios (AJUSTADA PARA FLEXBOX E QUEBRA DE LINHA)
|--------------------------------------------------------------------------
| Estilos específicos para a seção de benefícios, agora usando flexbox
| para que os itens fiquem na mesma linha e quebrem quando necessário.
*/
.grade-beneficios {
    display: flex;                   /* Habilita o Flexbox para organizar os itens em uma linha */
    flex-wrap: wrap;                 /* Permite que os itens quebrem para a próxima linha se não houver espaço */
    justify-content: center;         /* Centraliza os itens horizontalmente na linha */
    gap: 20px;                       /* Espaçamento entre os itens */
    margin-top: 40px;                /* Margem superior */
}

.item-beneficio {
    flex: 1 1 calc(25% - 15px);      /* Base de largura para 4 itens por linha, considerando o gap */
                                     /* (20px de gap entre 4 itens = 3 gaps; 3 * 20px = 60px de gap total.
                                        60px / 4 itens = 15px por item para o cálculo, aproximado.) */
    max-width: 280px;                /* Largura máxima para cada item, para que não fiquem excessivamente largos em telas grandes */
    background-color: var(--branco); /* Cor de fundo branca para o cartão */
    padding: 30px;                   /* Padding interno */
    border-radius: 10px;             /* Bordas arredondadas */
    box-shadow: 0 4px 10px rgba(0,0,0,0.08); /* Sombra suave */
    text-align: center;              /* Centraliza o texto */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transições suaves para hover */
    border-bottom: 5px solid var(--verde-cta); /* Borda inferior colorida para destaque */
}

.item-beneficio:hover {
    transform: translateY(-5px);     /* Eleva o cartão no hover */
    box-shadow: 0 8px 20px rgba(0,0,0,0.15); /* Sombra mais pronunciada no hover */
}

.item-beneficio .icone-grande {
    font-size: 4em;                  /* Tamanho grande para ícones de benefício */
    color: var(--verde-cta);         /* Cor verde para os ícones */
    margin-bottom: 20px;             /* Margem inferior */
}

.item-beneficio h3 {
    font-size: 1.6em;                /* Tamanho da fonte para o título do benefício */
    color: var(--texto-primario);    /* Cor do texto */
    margin-bottom: 15px;             /* Margem inferior */
}

.item-beneficio p {
    font-size: 1.05em;               /* Tamanho da fonte para o parágrafo */
    color: var(--cinza-principal);   /* Cor do texto */
}

/*
|--------------------------------------------------------------------------
| Seção de Depoimentos (Casos de Sucesso)
|--------------------------------------------------------------------------
| Estilos para a galeria de depoimentos, com rolagem horizontal.
*/
.grade-depoimentos {
    display: flex;           /* Habilita o Flexbox para rolagem horizontal */
    overflow-x: auto;        /* Permite rolagem horizontal se o conteúdo exceder */
    scroll-snap-type: x mandatory; /* Habilita "snap" na rolagem horizontal */
    -webkit-overflow-scrolling: touch; /* Melhora a rolagem em dispositivos iOS */
    padding-bottom: 20px;    /* Espaço para a barra de rolagem */
    margin-top: 40px;        /* Margem superior */
}

.item-depoimento {
    flex: 0 0 350px;         /* Define largura fixa para cada depoimento, impedindo encolhimento */
    scroll-snap-align: start; /* Alinha o início do item ao ponto de snap da rolagem */
    background-color: var(--branco); /* Cor de fundo branca para o cartão */
    padding: 30px;           /* Padding interno */
    border-radius: 10px;     /* Bordas arredondadas */
    box-shadow: 0 4px 10px rgba(0,0,0,0.08); /* Sombra suave */
    margin-right: 25px;      /* Espaço entre os depoimentos */
    text-align: left;        /* Alinha o texto à esquerda */
    display: flex;           /* Habilita o Flexbox para organizar conteúdo interno */
    flex-direction: column;  /* Organiza o conteúdo em coluna */
    justify-content: space-between; /* Empurra o autor para o final do card */
    min-height: 200px;       /* Altura mínima para depoimentos para consistência visual */
}

.item-depoimento blockquote {
    font-size: 1.15em;       /* Tamanho da fonte para a citação */
    font-style: italic;      /* Estilo itálico */
    color: var(--texto-primario); /* Cor do texto */
    margin-bottom: 20px;     /* Margem inferior */
    line-height: 1.6;        /* Espaçamento entre linhas */
}

.autor-depoimento {
    font-weight: 700;        /* Texto em negrito */
    color: var(--azul-principal); /* Cor azul para o autor */
    text-align: right;       /* Alinha o nome do autor à direita */
    margin-top: auto;        /* Empurra o elemento para o final do contêiner flex */
}

/*
|--------------------------------------------------------------------------
| Seção Sobre Nós
|--------------------------------------------------------------------------
| Estilos para a seção de informações sobre a empresa.
*/
.conteudo-sobre {
    max-width: 900px;        /* Largura máxima para o conteúdo */
    margin: 0 auto;          /* Centraliza o conteúdo */
    text-align: left;        /* Alinha o texto à esquerda */
    line-height: 1.8;        /* Espaçamento entre linhas para melhor leitura */
}

.conteudo-sobre p {
    margin-bottom: 20px;     /* Margem inferior para parágrafos */
    font-size: 1.05em;       /* Tamanho da fonte */
    color: var(--texto-primario); /* Cor do texto */
}

/*
|--------------------------------------------------------------------------
| Seção de Contato/WhatsApp
|--------------------------------------------------------------------------
| Estilos para a seção de contato e informações de WhatsApp.
*/
.secao-contato-whatsapp .container {
    display: flex;           /* Habilita o Flexbox */
    flex-direction: column;  /* Organiza os filhos em uma coluna */
    justify-content: center; /* Centraliza os filhos verticalmente */
    align-items: center;     /* Centraliza os filhos horizontalmente */
    width: 100%;             /* Ocupa a largura total disponível */
    max-width: 800px;        /* Limita a largura máxima do conteúdo */
    padding: 0 20px;         /* Padding lateral */
    flex-grow: 1;            /* Permite que o contêiner interno use o espaço disponível */
}

#contato-whatsapp h2 {
    color: var(--branco);    /* Cor do título branca */
    margin-bottom: 20px;     /* Margem inferior */
}

.secao-contato-whatsapp p {
    color: var(--branco);    /* Cor do texto branca */
    font-size: 1.1em;        /* Tamanho da fonte */
    max-width: 700px;        /* Largura máxima para o parágrafo */
    margin: 0 auto 30px auto; /* Centraliza e adiciona margem inferior */
}

.info-contato-whatsapp {
    margin-top: 40px;        /* Margem superior */
    background-color: rgba(255, 255, 255, 0.1); /* Fundo semi-transparente */
    padding: 20px 30px;      /* Padding interno */
    border-radius: 8px;      /* Bordas arredondadas */
    display: flex;           /* Habilita o Flexbox para organizar conteúdo interno */
    flex-direction: column;  /* Organiza o conteúdo em coluna */
    align-items: center;     /* Centraliza o conteúdo horizontalmente */
    max-width: 400px;        /* Largura máxima para este bloco */
    margin-left: auto;       /* Centraliza o bloco */
    margin-right: auto;      /* Centraliza o bloco */
}

.info-contato-whatsapp h3 {
    color: var(--branco);    /* Cor do título branca */
    font-size: 1.4em;        /* Tamanho da fonte */
    margin-bottom: 15px;     /* Margem inferior */
}

.info-contato-whatsapp p {
    color: var(--branco);    /* Cor do texto branca */
    font-size: 0.9em;        /* Tamanho da fonte menor */
    margin-bottom: 10px;     /* Margem inferior */
    display: flex;           /* Habilita o Flexbox para alinhar ícone e texto */
    align-items: center;     /* Centraliza verticalmente */
    justify-content: center; /* Centraliza horizontalmente */
    gap: 10px;               /* Espaçamento entre ícone e texto */
}

.info-contato-whatsapp p i {
    font-size: 1.2em;        /* Tamanho do ícone */
}

/*
|--------------------------------------------------------------------------
| Seção de Demonstração (Formulário)
|--------------------------------------------------------------------------
| Estilos para o formulário de demonstração e integração com reCAPTCHA.
*/
.formulario-demonstracao {
    background-color: var(--branco); /* Cor de fundo branca para o formulário */
    padding: 40px;           /* Padding interno */
    border-radius: 10px;     /* Bordas arredondadas */
    box-shadow: 0 5px 15px rgba(0,0,0,0.2); /* Sombra */
    max-width: 600px;        /* Largura máxima do formulário */
    margin: 0 auto;          /* Centraliza o formulário */
    text-align: left;        /* Alinha texto e labels à esquerda */
}

/* NOVO: Estilo para centralizar o widget do reCAPTCHA e dar espaçamento */
/* E REGRAS IMPORTANTES PARA CORRIGIR O TAMANHO DO IFRAME */
.formulario-demonstracao .g-recaptcha {
    margin: 0 auto 20px auto !important; /* Centraliza horizontalmente e adiciona margem inferior, !important para garantir */
    width: fit-content !important; /* Garante que a largura se ajuste ao conteúdo para permitir centralização, !important para garantir */
    display: flex !important; /* Usar flex para centralizar o iframe interno, !important para garantir */
    justify-content: center !important; /* Centraliza o iframe interno horizontalmente, !important para garantir */
    align-items: center !important; /* Centraliza o iframe interno verticalmente, !important para garantir */
    /* REMOVENDO ESTILOS DE ARREDONDAMENTO/SOMBRA DO CONTÊINER */
    border-radius: 0 !important;         /* Garante que não haja borda arredondada */
    overflow: visible !important;        /* Garante que nada seja cortado */
    box-shadow: none !important;         /* Remove qualquer sombra */
}

/* NOVO: Regra mais específica para o iframe real do reCAPTCHA, com !important para sobrescrever atributos */
.formulario-demonstracao .g-recaptcha > div > iframe {
    width: 256px !important;    /* Largura padrão para o modo compact do reCAPTCHA, !important para sobrescrever */
    height: 60px !important;    /* Altura padrão para o modo compact do reCAPTCHA, !important para sobrescrever */
    min-width: 256px !important; /* Garante que a largura mínima seja mantida, !important para sobrescrever */
    min-height: 60px !important; /* Garante que a altura mínima seja mantida, !important para sobrescrever */
    border: none !important;     /* Remove qualquer borda padrão que possa ser aplicada, !important para sobrescrever */
    box-shadow: none !important; /* Remove qualquer sombra padrão, !important para sobrescrever */
}


.formulario-demonstracao label {
    display: block;          /* Transforma o label em um bloco, colocando-o acima do input */
    margin-bottom: 8px;      /* Margem inferior */
    color: var(--texto-primario); /* Cor do texto */
    font-weight: 600;        /* Peso da fonte semi-negrito */
}

.formulario-demonstracao input[type="text"],
.formulario-demonstracao input[type="email"],
.formulario-demonstracao input[type="tel"],
.formulario-demonstracao textarea {
    width: 100%;             /* Ocupa a largura total do contêiner pai */
    padding: 12px;           /* Padding interno */
    margin-bottom: 20px;     /* Margem inferior */
    border: 1px solid #ddd;  /* Borda cinza clara */
    border-radius: 5px;      /* Bordas arredondadas */
    font-size: 1em;          /* Tamanho da fonte */
    color: var(--texto-primario); /* Cor do texto */
}

.formulario-demonstracao textarea {
    resize: vertical;        /* Permite que o usuário redimensione a área de texto verticalmente */
}

.formulario-demonstracao input:focus,
.formulario-demonstracao textarea:focus {
    border-color: var(--azul-principal); /* Muda a cor da borda ao focar */
    outline: none;           /* Remove o outline padrão do navegador */
    box-shadow: 0 0 0 3px rgba(0, 136, 204, 0.2); /* Adiciona uma sombra suave ao focar */
}

.formulario-demonstracao .botao-grande {
    width: 100%;             /* Ocupa a largura total */
    padding: 15px;           /* Padding maior */
    font-size: 1.2em;        /* Tamanho da fonte maior */
    border-radius: 8px;      /* Bordas arredondadas */
}

.feedback-mensagem {
    margin-top: 15px;        /* Margem superior */
    padding: 10px;           /* Padding interno */
    border-radius: 5px;      /* Bordas arredondadas */
    background-color: #f0f0f0; /* Cor de fundo padrão */
    text-align: center;      /* Centraliza o texto */
}

/* Cores específicas para feedback de sucesso/erro (se você quiser) */
.feedback-mensagem[style*="green"] {
    background-color: #e6ffe6; /* Fundo verde claro para sucesso */
    border: 1px solid #c3e6cb; /* Borda verde suave */
}
.feedback-mensagem[style*="red"] {
    background-color: #ffe6e6; /* Fundo vermelho claro para erro */
    border: 1px solid #f5c6cb; /* Borda vermelha suave */
}

/*
|--------------------------------------------------------------------------
| Rodapé (Footer)
|--------------------------------------------------------------------------
| Estilos para o rodapé da página.
*/
.rodape {
    background-color: var(--texto-primario); /* Cor de fundo escura para o rodapé */
    color: var(--branco);    /* Cor do texto branca */
    padding: 20px 0;         /* Padding vertical */
    text-align: center;      /* Centraliza o conteúdo restante */
}

.rodape .grade-rodape {
    display: flex;           /* Habilita o Flexbox */
    justify-content: center; /* Centraliza horizontalmente os itens */
    align-items: center;     /* Centraliza verticalmente os itens */
    padding-bottom: 15px;    /* Padding inferior */
    border-bottom: 1px solid rgba(255,255,255,0.1); /* Linha divisória sutil */
    margin-bottom: 15px;     /* Margem inferior */
}

.coluna-rodape {
    margin: 0 15px;          /* Espaçamento horizontal entre as colunas do rodapé */
}

.coluna-rodape h4 {
    font-size: 1.1em;        /* Tamanho da fonte para títulos de coluna */
    margin-bottom: 10px;     /* Margem inferior */
    color: var(--azul-claro); /* Cor azul clara para os títulos */
}

.coluna-rodape p {
    font-size: 0.9em;        /* Tamanho da fonte para parágrafos */
    color: rgba(255,255,255,0.8); /* Cor do texto branca com opacidade */
    line-height: 1.5;        /* Espaçamento entre linhas */
    margin-bottom: 5px;      /* Margem inferior */
}

.coluna-rodape p i {
    margin-right: 8px;       /* Espaçamento à direita do ícone */
}

/* Removido: Elementos específicos que você pediu para ocultar */
.coluna-rodape ul,
.coluna-rodape .redes-sociais {
    display: none;           /* Oculta completamente esses elementos */
}

.rodape-inferior {
    text-align: center;      /* Centraliza o texto */
    font-size: 0.85em;       /* Tamanho da fonte menor */
    color: rgba(255,255,255,0.6); /* Cor do texto branca com opacidade */
}

.rodape-inferior a {
    display: none;           /* Remove os links de Política de Privacidade e Termos de Uso */
}

/*
|--------------------------------------------------------------------------
| Responsividade (Mobile First - Ajustes para Telas Maiores)
|--------------------------------------------------------------------------
| Regras CSS para adaptar o layout a diferentes tamanhos de tela.
*/

/* Menu Hamburguer */
.menu-alternador {
    display: none;           /* Esconde o botão de menu hamburguer por padrão em desktop */
    background: none;        /* Sem fundo */
    border: none;            /* Sem borda */
    font-size: 1.8em;        /* Tamanho do ícone */
    color: var(--azul-principal); /* Cor do ícone */
    cursor: pointer;         /* Muda o cursor ao passar o mouse */
    padding: 5px;            /* Padding para área de clique */
}

/* Estilos para o menu responsivo */
@media (max-width: 768px) {
    .cabecalho .container {
        flex-wrap: wrap;     /* Permite que os itens quebrem a linha */
        justify-content: center; /* Centraliza logo e botão em mobile */
        text-align: center;  /* Centraliza o texto (se aplicável) */
        padding: 15px 0;     /* Padding para o cabeçalho */
    }

    .navegacao-principal {
        width: 100%;         /* Ocupa toda a largura */
        order: 1;            /* Coloca a navegação abaixo do logo na ordem do flexbox */
        margin-top: 15px;    /* Espaço entre logo e menu */
    }

    .navegacao-principal .lista-navegacao {
        flex-direction: column; /* Itens do menu um abaixo do outro */
        background-color: var(--branco); /* Fundo branco para o menu aberto */
        position: absolute;  /* Posiciona o menu absolutamente */
        top: var(--altura-cabecalho); /* Começa abaixo do cabeçalho */
        left: 0;             /* Alinha à esquerda */
        width: 100%;         /* Ocupa a largura total */
        box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Sombra */
        padding: 20px 0;     /* Padding interno */
        display: none;       /* Esconde o menu por padrão em mobile */
        border-top: 1px solid #eee; /* Borda superior sutil */
    }

    .navegacao-principal .lista-navegacao.ativo {
        display: flex;       /* Mostra o menu quando a classe 'ativo' é adicionada (pelo JS) */
    }

    .navegacao-principal .lista-navegacao li {
        width: 100%;         /* Item de lista ocupa a largura total */
        text-align: center;  /* Centraliza o texto do item */
        margin-bottom: 10px; /* Margem inferior */
    }

    .navegacao-principal .lista-navegacao li:last-child {
        margin-bottom: 0;    /* Remove margem inferior do último item */
    }

    .navegacao-principal .lista-navegacao li a {
        padding: 10px 0;     /* Padding interno para os links */
        display: block;      /* Transforma o link em bloco para ocupar a largura total do li */
        width: 100%;         /* Ocupa a largura total */
    }

    .menu-alternador {
        display: block;      /* Mostra o botão de menu hamburguer */
        position: absolute;  /* Posiciona o botão absolutamente */
        right: 20px;         /* Alinha à direita */
        top: 20px;           /* Alinha ao topo */
    }

    /* Ajustes para o botão "Solicitar Demonstração" no cabeçalho em mobile */
    .navegacao-principal .lista-navegacao .botao-primario {
        display: block;      /* Mostra o botão dentro do menu hamburguer como bloco */
        margin: 10px auto 0 auto; /* Centraliza o botão e adiciona margem superior */
        width: 80%;          /* Ajusta a largura do botão no menu mobile */
        background-color: var(--verde-cta); /* Muda para cor de CTA verde */
        color: var(--branco); /* Cor do texto branca */
        border-color: var(--verde-cta); /* Borda na cor verde */
    }

    .navegacao-principal .lista-navegacao .botao-primario:hover {
        background-color: hsl(120, 60%, 40%); /* Um verde um pouco mais escuro no hover */
        color: var(--branco); /* Cor do texto branca */
        border-color: hsl(120, 60%, 40%); /* Borda na cor verde mais escura */
    }

    h1 { font-size: 2.2em; } /* Reduz o tamanho da fonte para h1 em mobile */
    h2 { font-size: 1.8em; } /* Reduz o tamanho da fonte para h2 em mobile */
    p { font-size: 1em; }    /* Tamanho da fonte padrão para parágrafos em mobile */

    .hero {
        min-height: 80vh;    /* Altura mínima menor em mobile para evitar rolagem excessiva */
        padding-top: calc(var(--altura-cabecalho) + 30px); /* Menos padding superior em mobile */
        padding-bottom: 30px; /* Menos padding inferior em mobile */
    }

    .conteudo-hero h1 {
        font-size: 2.5em;    /* Tamanho da fonte para h1 no hero */
    }

    .conteudo-hero p {
        font-size: 1.1em;    /* Tamanho da fonte para parágrafo no hero */
    }

    .secao-com-padding {
        padding: 60px 0;     /* Reduz o padding vertical das seções em mobile */
        min-height: auto;    /* Não força altura mínima na viewport em mobile, deixa o conteúdo ditar */
        /* Removido display: flex, flex-direction: column, justify-content: center, align-items: center para mobile
           em secao-com-padding, para maior flexibilidade em sub-componentes.
           Se precisar centralizar filhos, aplique flexbox no container interno da seção. */
    }

    /* Ajustes específicos para a seção #software em mobile */
    #software {
        padding-top: var(--altura-cabecalho); /* Mantém o padding para o cabeçalho */
        padding-bottom: 60px; /* Adiciona padding na parte inferior */
    }

    #software .container {
        padding-top: 20px;   /* Padding superior do container */
        padding-bottom: 20px; /* Padding inferior do container */
    }

    .grade-beneficios,
    .grade-funcionalidades-software {
        grid-template-columns: 1fr; /* Uma coluna em mobile para grades */
        gap: 20px;           /* Espaçamento entre itens */
    }
     .grade-beneficios {
        flex-direction: column;      /* Empilha os itens verticalmente em telas pequenas */
        align-items: center;         /* Centraliza os itens empilhados */
    }
    .item-beneficio {
        flex: 1 1 100%;              /* Ocupa a largura total em mobile */
        max-width: 400px;            /* Limita a largura máxima para que não fiquem muito largos em telas um pouco maiores que celular */
    }


    .item-depoimento {
        flex: 0 0 90%;       /* Largura de 90% para depoimentos em mobile */
        margin-right: 15px;  /* Espaço entre depoimentos */
    }

    .formulario-demonstracao {
        padding: 20px;       /* Reduz o padding do formulário */
        max-width: 100%;     /* Permite que o formulário ocupe a largura total no mobile */
    }

    /* O `.formulario-demonstracao .g-recaptcha` já foi ajustado para mobile e desktop acima */

    .grupo-formulario label {
        text-align: left;    /* Garante que os labels não se alinhem ao centro */
    }

    .formulario-demonstracao input[type="text"],
    .formulario-demonstracao input[type="email"],
    .formulario-demonstracao input[type="tel"],
    .formulario-demonstracao textarea {
        max-width: 100%;     /* Garante que inputs ocupem a largura total disponível */
    }

    .rodape .grade-rodape {
        flex-direction: column; /* Empilha as colunas verticalmente em telas pequenas */
        gap: 15px;           /* Espaçamento entre os itens empilhados */
        padding-bottom: 15px; /* Padding inferior */
        margin-bottom: 15px; /* Margem inferior */
    }

    .coluna-rodape {
        margin: 0;           /* Remove margens laterais quando empilhado */
        text-align: center;  /* Centraliza o texto das colunas */
    }

    .info-contato-whatsapp p {
        flex-direction: column; /* Empilha ícones e texto verticalmente em telas pequenas */
        gap: 5px;            /* Espaçamento menor */
    }

    .info-contato-whatsapp p i {
        margin-right: 0;     /* Remove margin-right para layout empilhado */
    }
}

/* Ajustes para telas maiores que 768px (desktop) */
@media (min-width: 769px) {
    .navegacao-principal .lista-navegacao {
        display: flex !important; /* Garante que o menu esteja sempre visível em desktop */
        position: static;    /* Volta à posição estática (fluxo normal do documento) */
        box-shadow: none;    /* Remove sombra do menu */
        padding: 0;          /* Remove padding do menu */
        flex-direction: row; /* Volta a organizar os itens em linha */
    }
    /* Em desktop, o botão de demonstração volta ao seu estilo primário, azul com hover específico */
    .navegacao-principal .lista-navegacao .botao-primario {
        background-color: var(--azul-principal); /* Fundo azul principal */
        color: var(--branco); /* Texto branco */
        border-color: var(--azul-principal); /* Borda azul principal */
        display: inline-block; /* Volta a ser inline-block */
        width: auto;         /* Volta a ter largura automática */
        margin: 0;           /* Remove margens extras */
    }

    .navegacao-principal .lista-navegacao .botao-primario:hover {
        background-color: var(--branco); /* Fundo branco no hover */
        color: var(--azul-principal); /* Texto azul principal no hover */
        border-color: var(--azul-principal); /* Borda azul principal no hover */
    }
}