@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700;900&display=swap');

/* ======================================================= */
/* Reset Universal e Prevenção de Cortes na Tela (Overflow) */
/* ======================================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}


.whatsapp-ceo-button{
    background-color: #ff6600;
    color: #ffffff;
    padding: 15px 10px;
    text-align: center;
    text-decoration: none;
    font-family: arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: bold;
    display: inline-block;
    cursor: pointer;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s, transform 0.3s;
}

.whatsapp-ceo-button:hover {
    background-color: #e65c00;
    transform: translateY(-2px);
} 
















html, body {
  width: 100%;
  background-color: var(--cor-fundo-preto);
    font-family: 'Poppins', sans-serif;
    color: var(--cor-texto);
  overflow-x: hidden; /* Isso previne a barra de rolagem horizontal */
}

@media (max-width: 768px) {
    /* É AQUI DENTRO QUE A MÁGICA ACONTECE! */
    /* Todos os estilos que você colocar aqui só serão aplicados em telas pequenas. */
}

/* Exemplo de um container com 3 itens lado a lado no desktop */
.meu-container-flex {
    display: flex;
    gap: 20px;
}

@media (max-width: 768px) {
    .meu-container-flex {
        flex-direction: column; /* Transforma as colunas em linhas */
    }
}
.minha-galeria-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 colunas iguais */
    gap: 20px;
}

@media (max-width: 768px) {
    .minha-galeria-grid {
        grid-template-columns: 1fr; /* Vira 1 coluna só */
    }
}


/* --- ESTILO DO BOTÃO FIXO DO WHATSAPP --- */

.whatsapp-button {
    /* --- POSICIONAMENTO --- */
    position: fixed;
    bottom: 20px; /* Distância do fundo da página */
    right: 20px;  /* Distância da lateral direita da página */
    z-index: 1000; /* Garante que ele fique sobre todos os outros elementos */

    width: 40px;
    height: 40px;
    background-color: #25D366; 
    color: #FFFFFF; 
    border-radius: 50%; 
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); 
    text-decoration: none;
    
    
    display: flex;
    justify-content: center;
    align-items: center;
    
    
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    animation: fadeInButton 1s ease-out 0.5s forwards;
    opacity: 0; 
}

/* Estilo do ícone dentro do botão */
.whatsapp-button i {
    font-size: 1.5rem; 
}


.whatsapp-button:hover {
    transform: scale(1.1); 
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3); 
}


@keyframes fadeInButton {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}













.form-group-consent {
    display: flex;
    align-items: flex-start; /* Alinha o texto no topo com a caixa */
    margin-top: 20px; /* Espaço acima da caixa */
    margin-bottom: 25px; /* Espaço abaixo da caixa */
}

.form-group-consent input[type="checkbox"] {
    margin-top: 5px;
    margin-right: 10px;
    min-width: 18px;
    min-height: 18px;
    cursor: pointer;
}

.form-group-consent label {
    font-size: 0.9rem;
    color: #666; /* Cor de texto discreta, ajuste se o fundo for escuro */
    line-height: 1.5;
    cursor: pointer;
}

.form-group-consent label a {
    color: #007bff; /* Cor de destaque para os links, ajuste conforme sua paleta */
    text-decoration: underline;
    font-weight: bold;
}

.form-group-consent label a:hover {
    color: #0056b3; 
}









/* --- SEÇÃO "CONHEÇA A FRANQUEADORA" --- */

#conheca {
    /* 1. CONFIGURAÇÃO DA IMAGEM DE FUNDO */
    background-image: url('caminho/para/sua/imagem.jpg'); /* <-- MUITO IMPORTANTE: Substitua pelo caminho da sua imagem */
    background-size: cover; /* Faz a imagem cobrir toda a área da seção */
    background-position: center center; /* Centraliza a imagem */
    background-attachment: fixed; /* Efeito parallax: a imagem fica fixa ao rolar */
    padding: 80px 20px; /* Espaçamento interno (vertical e horizontal) */
    position: relative; /* Essencial para o efeito de sobreposição (overlay) */
    z-index: 1; /* Define o contexto de empilhamento */
}

/* 2. CAMADA DE SOBREPOSIÇÃO (OVERLAY) */
/* Este pseudo-elemento cria uma camada escura entre a imagem e o texto */
#conheca::before {
    content: ''; /* Obrigatório para pseudo-elementos */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Fundo preto com 60% de opacidade */
    z-index: -1; /* Coloca a camada atrás do conteúdo de texto */
}

/* 3. ESTILIZAÇÃO DO CONTEÚDO */
#conheca .container {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

#conheca .section-title {
    color: #ff6600; /* Laranja vibrante */
    font-size: 2.5rem;
    font-weight: bold;
    text-transform: uppercase;
    margin: 0;
    position: relative;
}

/* Linha decorativa abaixo do título */
#conheca .section-title::after {
    content: '';
    display: block;
    width: 80px;
    height: 4px;
    background-color: #ff6600;
    margin: 20px auto 30px auto; /* 20px abaixo do texto, 30px acima do parágrafo */
}

#conheca .metodo-descricao p {
    color: #ffffff; /* Texto branco */
    font-size: 1.1rem;
    line-height: 1.7; /* Melhora a legibilidade */
    margin: 0;
}

/* --- AJUSTES PARA DISPOSITIVOS MÓVEIS (RESPONSIVIDADE) --- */
/* --- AJUSTES PARA DISPOSITIVOS MÓVEIS (RESPONSIVIDADE) --- */
@media (max-width: 768px) {
    #conheca {
        /* * PADDING AJUSTADO: 
         * Diminuímos o espaçamento vertical de 60px para 50px,
         * mantendo o espaçamento lateral em 20px.
         */
        padding: 50px 20px;
        background-attachment: scroll; /* Remove o efeito parallax em celulares para melhor performance */
    }

    #conheca .section-title {
        /* * FONTE DO TÍTULO AJUSTADA: 
         * Diminuímos um pouco mais, de 1.8rem para 1.6rem, 
         * para garantir que não quebre de forma estranha em telas menores.
         */
        font-size: 1.35rem; 
        overflow-wrap: break-word; /* Garante a quebra da palavra se necessário */
    }
    
    /* Linha decorativa abaixo do título */
    #conheca .section-title::after {
        /* * AJUSTE EXTRA: 
         * É uma boa prática diminuir um pouco as margens de elementos
         * decorativos também, para economizar espaço vertical.
         */
        margin: 15px auto 25px auto;
    }

    #conheca .metodo-descricao p {
        /* * FONTE DO PARÁGRAFO AJUSTADA:
         * Diminuímos de 1rem para 0.95rem para um visual mais delicado.
         */
        font-size: 0.70rem;
    }
}
















/* --- Estrutura Geral da Seção Destaque --- */
#secao-destaque {
    position: relative; /* Essencial para o funcionamento do overlay */
    padding: 120px 0; /* Espaçamento interno vertical (topo e base) */
    
    /* --- IMAGEM DE FUNDO --- */
    /* Substitua pelo caminho da sua imagem */
    background-image: url('img/back.jpg'); 
    background-size: cover; /* Faz a imagem cobrir toda a área */
    background-position: center; /* Centraliza a imagem */
    background-attachment: fixed; /* Efeito parallax: a imagem fica fixa ao rolar */
}

/* --- FILTRO ESCURO SOBRE O FUNDO --- */
#secao-destaque::before {
    content: ''; /* Obrigatório para pseudo-elementos */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Fundo preto com 85% de opacidade */
    z-index: 1; /* Garante que o filtro fique acima da imagem de fundo */
}

/* --- Container para alinhar o conteúdo --- */
#secao-destaque .container {
    position: relative;
    z-index: 2;
    max-width: 1200px; /* Largura máxima do conteúdo */
    margin: 0 auto; /* Centraliza o container na página */
    padding: 0 30px; /* Espaçamento lateral para não colar nas bordas */
    
    /* ADIÇÃO 1 (Segura): Garante que nada "vaze" DESTE container específico */
    overflow: hidden;
}

/* --- Estilo da Logo --- */
.logo-secao {
    display: block;
    max-width: 220px;
    height: auto;
    margin-bottom: 40px;

    /* --- ANIMAÇÃO ADICIONADA --- */
    opacity: 0; /* Começa invisível */
    animation: fadeInUp 0.8s ease-out 0.2s forwards;
}

/* --- Estilo do Título Principal --- */
.titulo-secao .linha-1 {
    display: block;
    font-size: 4.5rem;
    font-weight: 600;
    color: #FFFFFF;
    line-height: 1.1;
    text-transform: uppercase;
    text-shadow: 3px 3px 0px rgba(0, 0, 0, 0.3);
    
    /* --- ANIMAÇÃO ADICIONADA --- */
    opacity: 0;
    animation: fadeInUp 0.8s ease-out 0.4s forwards;
}

.titulo-secao .linha-2 {
    display: block;
    /* ADIÇÃO 2 (Segura): Define a fonte fluida e a quebra de palavra */
    font-size: clamp(2.8rem, 12.5vw, 7.5rem); 
    word-break: break-word;
    text-shadow: 3px 3px 0px rgba(0, 0, 0, 0.3);
    font-weight: 900;
    color: #ff6600; 
    line-height: 1;
    text-transform: uppercase;
    opacity: 0;
    animation: fadeInUp 0.8s ease-out 0.6s forwards;
}

/* --- Estilo do Slogan --- */
.slogan {
    font-size: 1.7rem;
    font-weight: 300; /* Fonte leve */
    color: #FFFFFF;
    margin-top: 25px;
    letter-spacing: 1px;
    opacity: 0;
    animation: fadeInUp 0.8s ease-out 0.8s forwards;
}

.slogan strong {
    font-weight: 700; /* Deixa "pessoas" e "empresas" em negrito */
}

/* --- AJUSTES PARA MOBILE (RESPONSIVO) --- */
@media (max-width: 768px) {
    #secao-destaque {
        padding: 80px 0; /* Diminui o espaçamento vertical em telas menores */
        background-attachment: scroll; /* Remove o efeito parallax em mobile para melhor performance */
    }

    .logo-secao {
        max-width: 180px;
        margin-bottom: 30px;
    }
    
    .titulo-secao .linha-1 {
        font-size: 2.5rem;
    }

    /* ADIÇÃO 3 (A MAIS IMPORTANTE): A linha antiga que causava o erro foi REMOVIDA daqui. */
    /* A linha .titulo-secao .linha-2 { font-size: 4rem; } não está mais aqui, permitindo que o clamp() funcione. */

    .slogan {
        font-size: 1.2rem;
    }
}
/* --- ANIMAÇÃO DE ENTRADA (KEYFRAMES) --- */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px); /* Começa 30px abaixo e invisível */
    }
    to {
        opacity: 1;
        transform: translateY(0); /* Termina na posição original e visível */
    }
}












/* --- Estilos da Seção de Rodapé Final --- */
#rodape-final {
  background-color: #000000; /* Um cinza bem escuro, quase preto */
  color: #f0f0f0; /* Um branco suave para o texto */
  padding: 80px 20px;
  text-align: center;
  border-top: 4px solid #FF6600; /* Linha laranja para conectar com a identidade visual */
}

.rodape-conteudo h2 {
  font-size: 2.2rem;
  font-weight: 300; /* Fonte mais leve para um visual sofisticado */
  max-width: 800px;
  margin: 0 auto; /* Centraliza o H2 */
  line-height: 1.5;
}

/* Estilo para as palavras de destaque */
.rodape-conteudo h2 .destaque {
  font-weight: 700; /* Deixa as palavras em negrito */
  color: #FF6600; /* Colore as palavras com o laranja da marca */
}

/* Estilo do Botão de Chamada para Ação */
.btn-franqueado {
  display: inline-block;
  background-color: #FF6600;
  color: #111; /* Texto escuro para contrastar com o botão laranja */
  padding: 15px 35px;
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 5px;
  margin-top: 40px; /* Espaço entre o texto e o botão */
  transition: all 0.3s ease-in-out; /* Efeito suave na transição */
}

.btn-franqueado:hover {
  background-color: #fff; /* Muda a cor de fundo no hover */
  color: #111;
  transform: translateY(-3px); /* Leve elevação do botão */
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

/* Estilos do Copyright */
.copyright {
  margin-top: 70px;
  font-size: 0.9rem;
  color: #888; /* Cor cinza para não chamar muita atenção */
}

/* --- Ajustes para Mobile --- */
/* --- Ajustes para Mobile (VERSÃO MELHORADA) --- */
@media (max-width: 768px) {

    /* 1. AJUSTA O ESPAÇAMENTO GERAL DO RODAPÉ */
    #rodape-final {
        /* Diminui o padding vertical para não ocupar tanto espaço */
        padding: 50px 25px;
    }

    /* 2. REFINA O TÍTULO */
    .rodape-conteudo h2 {
        /* Diminui um pouco mais a fonte para ficar mais elegante */
        font-size: 1.5rem; 
        line-height: 1.4; /* Melhora o espaçamento entre as linhas */
    }

    /* 3. AJUSTA O BOTÃO E SEU ESPAÇAMENTO */
    .btn-franqueado {
        padding: 14px 30px; /* Deixa o botão com um bom tamanho para toque */
        font-size: 0.9rem;
        /* Diminui o espaço entre o texto e o botão */
        margin-top: 30px; 
    }

    /* 4. AJUSTA O COPYRIGHT */
    .copyright {
        /* Diminui drasticamente o espaço acima do copyright */
        margin-top: 50px; 
        font-size: 0.85rem;
    }
}












/* --- Estilos Gerais da Seção Cover --- */
#cover {
  position: relative; /* Necessário para posicionar os filhos (overlay, imagens) */
  height: 100vh; /* Ocupa a altura total da tela */
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: white;
  overflow: hidden; /* Garante que nada saia dos limites da seção */
}

/* --- Camadas de Imagem de Fundo --- */
.image-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* Fica atrás de todo o conteúdo */
}

.background-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Cobre todo o espaço sem distorcer a imagem */
}

/* --- Overlay escuro para melhorar a legibilidade --- */
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6); /* Cor preta com 60% de opacidade */
  z-index: 0; /* Fica acima do fundo, mas abaixo do texto */
}

/* --- Conteúdo de Texto --- */
.cover-content {
  position: relative; /* Garante que o z-index funcione */
  z-index: 1; /* Fica na frente de tudo */
  padding: 20px;
  max-width: 800px; /* Evita que o texto fique muito largo em telas grandes */
}

.titulo-eneagrama {
  margin-bottom: 25px;
}

.titulo-instituto {
  display: block;
  font-size: 2.5rem; /* Tamanho da fonte para "INSTITUTO" */
  font-weight: 300; /* Fonte mais leve */
  letter-spacing: 2px;
}

.titulo-principal {
  display: block;
  font-size: 7rem; /* Tamanho da fonte para "ENEAGRAMA" */
  font-weight: 700; /* Fonte mais forte */
  line-height: 1;
  color: #FFA500; /* Um tom de laranja, ajuste para a cor exata se necessário */
}

.subtitulo-eneagrama {
  font-size: 1.1rem;
  line-height: 1.6;
  max-width: 650px; /* Limita a largura do parágrafo */
  margin: 0 auto; /* Centraliza o parágrafo */
}

/* ------------------------------------------- */
/* --- AJUSTES PARA MOBILE (RESPONSIVO) --- */
/* ------------------------------------------- */
/* Para telas com largura máxima de 768px (tablets e celulares) */
@media (max-width: 768px) {
  .titulo-instituto {
    font-size: 1.8rem; /* Diminui o tamanho da fonte */
  }

  .titulo-principal {
    font-size: 4rem; /* Diminui drasticamente o tamanho da fonte principal */
  }

  .subtitulo-eneagrama {
    font-size: 1rem; /* Diminui um pouco o texto do parágrafo */
    padding: 0 10px; /* Adiciona um respiro nas laterais para não colar na borda */
  }
}

/* Ajustes ainda menores para celulares pequenos */
@media (max-width: 480px) {
    #cover {
        height: auto; /* Altura se ajusta ao conteúdo */
        min-height: 90vh; /* Garante uma altura mínima */
        padding: 40px 0; /* Adiciona um espaçamento vertical */
    }

    .titulo-instituto {
        font-size: 1.5rem;
    }

    .titulo-principal {
        font-size: 3.2rem;
    }

    .subtitulo-eneagrama {
        font-size: 0.9rem;
    }
}








#depoimentos {
    background-color: #000000; /* Fundo preto */
    padding: 80px 0;
    
    /* Correção de sobreposição */
    position: relative;
    z-index: 10;
}

#depoimentos .container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

#depoimentos .section-title {
    text-align: center;
    margin-bottom: 60px;
    color: #FFFFFF;
}

.depoimentos-container {
    display: flex;
    flex-direction: column;
    gap: 80px; /* Espaço grande entre cada depoimento */
}

/* Estilo para cada bloco de depoimento */
.depoimento-bloco {
    display: flex;
    align-items: center;
    gap: 50px;
}

/* --- A MÁGICA DO LAYOUT ALTERNADO --- */
/* Para cada bloco PAR (o 2º, 4º, 6º...), inverte a ordem */
.depoimento-bloco:nth-child(even) {
    flex-direction: row-reverse; /* Inverte a ordem: imagem vem primeiro */
}

.depoimento-texto {
    flex: 1; /* Ocupa o espaço disponível */
    color: #ccc;
}

.depoimento-texto h3 {
    font-size: 2.2rem;
    font-weight: 700;
    color: #FFFFFF;
    margin-bottom: 10px;
}

.depoimento-texto h4 {
    font-size: 1.1rem;
    font-weight: 400;
    color: #FFFFFF;
    margin-bottom: 25px;
    padding-bottom: 8px; /* Espaço para a linha abaixo */
    position: relative;
    display: inline-block; /* Faz a linha se ajustar ao texto */
}

/* Linha laranja abaixo do cargo */
.depoimento-texto h4::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60%; /* Linha com 60% da largura do texto */
    height: 2px;
    background-color: var(--cor-laranja-vivo);
}

.depoimento-texto p {
    font-size: 1rem;
    line-height: 1.7;
}

.depoimento-imagem {
    flex-basis: 40%; /* Define a largura base da coluna da imagem */
    position: relative; /* Necessário para o efeito de degradê */
    overflow: hidden;
    border-radius: 8px; /* Borda arredondada na imagem */
}

.depoimento-imagem img {
    display: block;
    width: 100%;
    height: auto;
}

/* --- EFEITO DE DEGRADÊ NA IMAGEM --- */
.depoimento-imagem::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Degradê da esquerda para a direita (preto para transparente) */
    background: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 50%);
}

/* Para os blocos pares, inverte a direção do degradê */
.depoimento-bloco:nth-child(even) .depoimento-imagem::after {
    background: linear-gradient(to left, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 50%);
}


/* --- RESPONSIVIDADE PARA CELULAR --- */
/* --- RESPONSIVIDADE PARA CELULAR (VERSÃO TOTALMENTE REFEITA E CLEAN) --- */
@media (max-width: 992px) {

    /* 1. AJUSTE GERAL DA SEÇÃO */
    #depoimentos {
        /* Reduz o espaçamento vertical para uma seção mais compacta */
        padding: 60px 0;
    }
    #depoimentos .container {
        /* ADICIONADO: Aumenta o espaço lateral para não ficar "perto da borda" */
        padding: 0 30px;
    }
    #depoimentos .section-title {
        font-size: 1.6rem; /* Diminui o título principal */
        margin-bottom: 50px;
    }

    /* 2. REFORMATAÇÃO DO BLOCO DE DEPOIMENTO */
    .depoimento-bloco,
    .depoimento-bloco:nth-child(even) {
        flex-direction: column; /* Empilha os itens */
        text-align: center;    /* Centraliza todo o conteúdo */
        gap: 40px;             /* Espaço menor entre a foto e o texto */
    }

    .depoimentos-container {
        gap: 60px; /* Espaço entre um depoimento e outro */
    }

    /* ---  DENTRO DE @media (max-width: 992px)  --- */

.depoimento-imagem {
    flex-basis: auto;
    width: 200px;
    height: 200px;
    
    /* A MUDANÇA É APENAS NESTA LINHA: */
    border-radius: 10px; /* De 50% para 10px para cantos arredondados */
    
    margin: 0 auto;
    max-width: none;
    overflow: hidden; /* Garante que a imagem respeite a borda arredondada */
}

/* O resto do seu CSS para mobile continua igual... */

    .depoimento-imagem img {
        /* Garante que a imagem preencha o círculo sem distorcer */
        object-fit: cover;
        height: 100%;
    }

    /* 4. REMOÇÃO DO DEGRADÊ PARA UM VISUAL MAIS CLEAN */
    .depoimento-imagem::after,
    .depoimento-bloco:nth-child(even) .depoimento-imagem::after {
        display: none; /* Remove completamente o degradê no celular */
    }
    
    /* 5. TEXTOS BEM MENORES E MAIS DELICADOS */
    .depoimento-texto h3 { /* Nome da pessoa */
        font-size: 1.0rem;
    }

    .depoimento-texto h4 { /* Cargo/Empresa */
        font-size: 0.6rem;
        font-weight: 400;
        font-style: italic; /* Deixa o cargo em itálico para diferenciar */
        color: #ccc;
        margin-bottom: 20px;
    }

    .depoimento-texto p { /* O depoimento em si */
        font-size: 0.7rem;
        line-height: 1.6;
        text-align: center; /* Centraliza o texto do parágrafo */
    }

    /* Ajuste na linha decorativa para o novo layout */
    .depoimento-texto h4::after {
        width: 40px; /* Linha mais curta e delicada */
        left: 50%;
        transform: translateX(-50%);
    }
}
















#formulario-contato {
    background-color: var(--cor-fundo-preto);
    padding: 80px 0;
    
    /* Correção de sobreposição */
    position: relative;
    z-index: 10;
}

#formulario-contato .container {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
    text-align: center;
}

#formulario-contato .section-title {
    color: var(--cor-texto);
}

#formulario-contato .section-subtitle {
    color: #ccc;
    margin-top: 15px;
    margin-bottom: 50px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.contact-form {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Duas colunas */
    gap: 25px; /* Espaçamento entre os campos */
}

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

/* Faz um campo ocupar a largura total de duas colunas */
.form-group.full-width {
    grid-column: 1 / -1;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #ccc;
}

.form-group input,
.form-group select {
    width: 100%;
    padding: 15px;
    background-color: #1c1c1c;
    border: 1px solid #444;
    border-radius: 5px;
    color: var(--cor-texto);
    font-size: 1rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--cor-laranja-vivo);
    box-shadow: 0 0 0 3px rgba(255, 102, 0, 0.2);
}

.form-group select[disabled] {
    background-color: #333;
    cursor: not-allowed;
}

.submit-btn {
    width: 100%;
    padding: 15px;
    background-color: var(--cor-laranja-vivo);
    color: #FFFFFF;
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.submit-btn:hover {
    background-color: #e05a00; /* Laranja um pouco mais escuro */
}

/* Responsividade do formulário para celular */
/* --- Responsividade do formulário para celular (VERSÃO MELHORADA) --- */
@media (max-width: 768px) {

    /* 1. AJUSTA O ESPAÇAMENTO GERAL DA SEÇÃO */
    #formulario-contato {
        padding: 60px 20px; /* Reduz o padding vertical e garante o lateral */
    }

    /* 2. DIMINUI OS TÍTULOS */
    #formulario-contato .section-title {
        font-size: 1.6rem;
    }
    #formulario-contato .section-subtitle {
        font-size: 0.95rem;
        margin-bottom: 40px; /* Diminui o espaço abaixo do subtítulo */
    }

    /* 3. REFINA O GRID E OS CAMPOS */
    .contact-form {
        grid-template-columns: 1fr; /* Uma coluna, como já estava */
        gap: 20px; /* Diminui um pouco o espaço entre os campos */
    }

    /* No celular, todos os campos ocupam a largura total */
    .form-group.full-width {
        grid-column: auto;
    }

    /* 4. DEIXA OS CAMPOS MAIS DELICADOS */
    .form-group input,
    .form-group select {
        /* Diminui o padding interno para um visual mais leve */
        padding: 14px;
        /* Reduz a fonte do texto DENTRO do campo */
        font-size: 0.95rem;
    }
    
    .form-group label {
        font-size: 0.9rem; /* Diminui um pouco o texto do label */
    }
    
    /* 5. AJUSTA O BOTÃO DE ENVIO */
    .submit-btn {
        padding: 14px; /* Harmoniza o padding com os outros campos */
        font-size: 1rem; /* Diminui a fonte do botão */
    }
}



















#modelo-negocio {
    background-color: #000000; /* Fundo preto como solicitado */
    color: var(--cor-texto);
    padding: 80px 0;
    
    /* Correção de sobreposição */
    position: relative;
    z-index: 10;
}

#modelo-negocio .container {
    max-width: 1200px; 
    margin: 0 auto;
    padding: 0 20px;
    text-align: center;
}

#modelo-negocio .section-title {
    margin-bottom: 60px; /* Mais espaço abaixo do título */
    color: #FFFFFF; /* Título branco como na imagem de referência */
}

/* Container que agrupa os 3 blocos */
.modelos-container {
    display: flex;
    flex-direction: column;
    gap: 40px; /* Espaço entre cada bloco (Operacional, Tático, etc.) */
}

/* Estilo para cada bloco individual */
.modelo-bloco {
    display: flex; /* Coloca imagem e texto lado a lado */
    align-items: center; /* Alinha verticalmente */
    gap: 30px; /* Espaço entre a imagem e o texto */
    background-color: #1c1c1c; /* Um cinza bem escuro para destacar do fundo */
    padding: 30px;
    border-radius: 12px;
    border-left: 4px solid var(--cor-laranja-vivo); /* Detalhe laranja na lateral */
    text-align: left;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.modelo-bloco:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(255, 102, 0, 0.1);
}

/* Container da imagem do gráfico */
.modelo-grafico {
    
}

.modelo-grafico img {
    width: 100%;
    height: auto;
    display: block;
}

/* Container do texto */
.modelo-texto {
    flex: 1; /* Ocupa o resto do espaço */
}

.modelo-texto h3 {
    display: inline-block; /* Faz o fundo se ajustar ao texto */
    background-color: var(--cor-laranja-vivo);
    color: var(--cor-fundo-preto);
    font-size: 1.2rem;
    font-weight: 700;
    padding: 6px 15px;
    border-radius: 5px;
    margin-bottom: 15px;
}

.modelo-texto p {
    font-size: 1rem;
    line-height: 1.6;
    color: #ccc;
}

.modelo-texto .margem-lucro {
    font-weight: 700;
    color: #FFFFFF;
    margin-top: 15px;
}

/* --- Responsividade para Celular (VERSÃO MELHORADA) --- */
@media (max-width: 768px) {
    /* 1. AJUSTE NO PADDING GERAL DA SEÇÃO */
    #modelo-negocio {
        padding: 50px 30px; /* Reduz o espaçamento geral para telas menores */
    }

    /* 2. AJUSTE NO TÍTULO PRINCIPAL */
    #modelo-negocio .section-title {
        font-size: 1.35rem; /* Diminui a fonte do título da seção */
        margin-bottom: 10px;
    }

    /* 3. AJUSTE NOS BLOCOS */
    .modelo-bloco {
        flex-direction: column; /* Empilha a imagem e o texto */
        text-align: center;
        align-items: center;
        gap: 10px; /* Reduz o espaço entre a imagem e o bloco de texto */
        padding: 25px; /* Diminui o padding interno do bloco */
    }

    /* 4. AJUSTE NO TEXTO */
    .modelo-texto {
        margin-top: 0; /* Removemos a margem que não é mais necessária com o 'gap' */
    }

    .modelo-texto h3 {
        /* Diminui um pouco o título laranja para não ficar tão grande */
        font-size: 1.0rem;
    }

    .modelo-texto p {
        /* Ajusta o tamanho do parágrafo para melhor leitura */
        font-size: 0.75rem;
        text-align: center; /* Garante a centralização do texto do parágrafo */
    }
}















#parceiros {
    background-color: var(--cor-fundo-preto);
    padding: 80px 0;
    text-align: center;
    overflow-x: hidden; /* Esconde a barra de rolagem horizontal */
    
    /* Correção de sobreposição */
    position: relative;
    z-index: 10;
}

#parceiros .section-title {
    margin-bottom: 50px;
}

.carrossel-container {
    width: 100%;
    overflow: hidden; 
    position: relative; 
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.carrossel-track {
    display: flex; /* Alinha as imagens em uma única linha */
    align-items: center; /* Centraliza verticalmente */

    
    width: calc(260px * 56);
    
    /* Animação: 28s de duração (1s por imagem), linear e infinita */
    animation: scroll-carrossel 36s linear infinite;
}

.carrossel-track img {
    height: 120px;  /* Altura dos logos */
    width: auto;   /* Largura se ajusta para manter a proporção */
    margin: 0 40px; /* Espaçamento entre os logos */
   /* Efeito monocromático para logos */
    transition: filter 0.3s ease;
}

.carrossel-track:hover img {
    filter: grayscale(0%) brightness(1);
}

/* Pausa a animação quando o mouse está sobre o carrossel */
.carrossel-track:hover {
    animation-play-state: paused;
}


/* --- A Mágica da Animação Infinita --- */

@keyframes scroll-carrossel {
    from {
        transform: translateX(0);
    }
    to {
        /* Move o track para a esquerda pela metade do seu tamanho total.
           Como o track é duplicado, mover -50% corresponde exatamente
           ao comprimento do conjunto original de 28 imagens, criando um loop perfeito. */
        transform: translateX(-50%);
    }
}

/* --- Responsividade para Celular --- */
@media (max-width: 768px) {
    .carrossel-track img {
        height: 80px; /* Logos um pouco menores no celular */
        margin: 0 20px;
    }
}













#galeria-diferenciais {
    width: 100%;
    padding: 80px 0;
    background-color: var(--cor-fundo-preto);
    
    /* Correção de sobreposição */
    position: relative;
    z-index: 10;
}

#galeria-diferenciais .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 10px;
    text-align: center;
}

/* Reutiliza o estilo do título que já temos */
#galeria-diferenciais .section-title {
    margin-bottom: 50px; /* Aumenta o espaço abaixo do título */
}

/* --- Grid 2x2 para as imagens --- */
.grid-galeria {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Cria 2 colunas de tamanho igual */
    gap: 25px; /* Espaçamento entre as imagens */
}

/* Estilo de cada item da galeria */
.item-galeria {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.5);
    
    /* Estado inicial da animação de entrada */
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Estado final da animação (quando o item entra na tela) */
.item-galeria.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* Atraso escalonado da animação para cada item */
.item-galeria:nth-child(2) { transition-delay: 0.1s; }
.item-galeria:nth-child(3) { transition-delay: 0.2s; }
.item-galeria:nth-child(4) { transition-delay: 0.3s; }

.item-galeria img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}



.overlay-galeria {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 30px 20px;
    background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
    color: var(--cor-texto);
    z-index: 2;
    text-align: left;
}

.overlay-galeria h3 {
    font-size: 1.5rem;
    font-weight: 500;
    transform: translateY(10px);
    opacity: 0;
    transition: transform 0.4s ease, opacity 0.4s ease;
}

.item-galeria:hover .overlay-galeria h3 {
    transform: translateY(0);
    opacity: 1;
}

/* --- Responsividade para Celulares --- */
/* --- Responsividade para Celulares (VERSÃO MELHORADA) --- */
/* --- Responsividade para Celulares (VERSÃO COM 2 COLUNAS) --- */
@media (max-width: 768px) {
    /* 1. AJUSTE NO PADDING GERAL DA SEÇÃO */
    #galeria-diferenciais {
        padding: 20px 5px; 
    }

    /* 2. AJUSTE NO TÍTULO PRINCIPAL DA SEÇÃO */
    #galeria-diferenciais .section-title {
        font-size: 1.35rem; /* Mantivemos o título principal menor */
        margin-bottom: 20px;
    }

    /* 3. AJUSTE NO LAYOUT DO GRID PARA 2 COLUNAS */
    .grid-galeria {
        /* A MUDANÇA PRINCIPAL É AQUI: */
        grid-template-columns: repeat(2, 1fr); /* Força 2 colunas no mobile */
        
        /* E aqui, diminuímos o espaço para caber melhor */
        gap: 5px; 
    }

    /* 4. AJUSTE NA FONTE E PADDING DO TEXTO SOBRE A IMAGEM */
    .overlay-galeria {
        /* Diminui drasticamente o padding para não ocupar toda a imagem pequena */
        padding: 10px 5px;
    }

    .overlay-galeria h3 {
        /* Diminui bastante a fonte para caber no espaço menor */
        font-size: 0.8rem;
    }
}

















#metodo-ensino {
    /* --- Layout da Seção --- */
    width: 100%;
    padding: 80px 0; /* Espaçamento vertical, SEM espaçamento lateral */
    background-color: var(--cor-fundo-preto);
    color: var(--cor-texto);
    
    /* Correção de sobreposição */
    position: relative;
    z-index: 10;
}

#metodo-ensino .container {
    /* Centraliza o conteúdo dentro da seção */
    max-width: 1200px;
    margin: 0 auto;
    /* Adiciona um pequeno respiro nas laterais */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* --- Estilo dos Textos --- */

#metodo-ensino .section-title {
    font-size: 2.8rem;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--cor-laranja-vivo);
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* Linha laranja abaixo do título (padrão das outras seções) */
#metodo-ensino .section-title::after {
    content: '';
    display: block;
    width: 80px;
    height: 4px;
    background-color: var(--cor-laranja-vivo);
    margin: 15px auto 0;
    border-radius: 2px;
}

#metodo-ensino .section-subtitle {
    font-size: 1.4rem;
    color: #ccc;
    margin-top: 20px;
    margin-bottom: 30px;
}

#metodo-ensino .metodo-descricao {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #ddd;
    /* Limita a largura do parágrafo para melhor leiturabilidade */
    max-width: 800px; 
    margin-bottom: 50px;
}

/* --- Container da Árvore e Imagens --- */

#metodo-ensino .arvore-container {
    /* O container agora ocupa 100% da largura disponível */
    width: 100%; 
    position: relative; /* Essencial para sobrepor as imagens */
}

/* Imagem da Árvore (base) */
#metodo-ensino .arvore-silhueta {
    /* Define o tamanho do container e fica na camada de baixo */
    width: 100%;
    height: auto;
    display: block; /* Remove espaços extras */
    
    /* Efeito dinâmico 1: Pulso suave */
    animation: pulso-suave 8s ease-in-out infinite;
}

/* Imagem das Escritas (sobreposição) */
#metodo-ensino .arvore-escritas {
    /* Flutua exatamente por cima da imagem da árvore */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2; /* Garante que fique na frente */
    
    /* Efeito dinâmico 2: Brilho sutil */
    animation: brilho-laranja 5s ease-in-out infinite alternate;
}
/* --- RESPONSIVIDADE PARA A SEÇÃO MÉTODO DE ENSINO --- */

@media (max-width: 768px) {

    /* 1. AJUSTA O ESPAÇAMENTO GERAL DA SEÇÃO */
    #metodo-ensino {
        /* Reduz o padding vertical e adiciona nas laterais para não colar na borda */
        padding: 5px 20px;
    }
    
    /* 2. AJUSTA OS TAMANHOS DOS TÍTULOS E TEXTOS */
    #metodo-ensino .section-title {
        /* Diminui o título principal */
        font-size: 1.35rem;
        letter-spacing: 1px; /* Diminui o espaçamento entre letras */
    }

    #metodo-ensino .section-subtitle {
        /* Diminui o subtítulo */
        font-size: 0.85rem;
        margin-bottom: 25px;
    }

    #metodo-ensino .metodo-descricao {
        /* Diminui o texto de descrição para melhor leitura */
        font-size: 0.75rem;
        line-height: 1.6;
        margin-bottom: 40px;
    }

    /* 3. AJUSTE OPCIONAL NAS ANIMAÇÕES */
    /* Descomente as linhas abaixo se sentir que as animações
       estão pesadas ou causam lentidão no celular. */
    /*
    #metodo-ensino .arvore-silhueta,
    #metodo-ensino .arvore-escritas {
        animation: none;
    }
    */
}


/* --- Animações Dinâmicas --- */

/* Animação para a silhueta da árvore */
@keyframes pulso-suave {
    0% {
        transform: scale(1);
        filter: brightness(100%);
    }
    50% {
        transform: scale(1.01);
        filter: brightness(110%);
    }
    100% {
        transform: scale(1);
        filter: brightness(100%);
    }
}

































/* Animação para as escritas */
@keyframes brilho-laranja {
    from {
        /* Sombra laranja sutil */
        filter: drop-shadow(0 0 5px rgba(255, 102, 0, 0.4));
    }
    to {
        /* Sombra laranja um pouco mais intensa */
        filter: drop-shadow(0 0 15px rgba(255, 102, 0, 0.7));
    }
}




























/* Estilo para CADA uma das 3 imagens */
.background-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Garante que a imagem cubra o espaço */
    background-position: center;
}

/* --- AQUI A MÁGICA ACONTECE --- */

/* Camada 1 (base): Fica como está, totalmente visível */
.layer-1 {
    z-index: 1; /* A mais baixa */
}

/* Camada 2 (meio): Ajuste a opacidade para ver a de baixo */
.layer-2 {
    z-index: 2; /* Fica acima da camada 1 */
    opacity: 0.6; /* 60% de opacidade (0 a 1) */
}

/* Camada 3 (topo): Pode ter opacidade e um efeito de mesclagem */
.layer-3 {
    z-index: 3; /* Fica acima de todas */
    opacity: 0.5; /* 50% de opacidade */
    mix-blend-mode: overlay; /* Efeito de mesclagem (como no Photoshop) */
}

/* Animação sutil de zoom (opcional, mas recomendado) */
#cover {
    animation: zoom-suave 20s infinite alternate;
}
#cover {
    position: relative;
    width: 100%;
    height: 100vh; /* Altura da capa ocupando a tela inteira */
    overflow: hidden;
    color: #FFFFFF;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.image-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    
    
    background-image: url('URL_DA_SUA_IMAGEM_AQUI'); 
    
    background-size: cover;
    background-position: center;
    /* Animação sutil de zoom para dar dinamismo */
    animation: zoom-suave 20s infinite alternate;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0.4)); /* Overlay mais escuro na base */
    z-index: 2;
}

.cover-content {
    position: relative;
    z-index: 3;
    padding: 20px;
    max-width: 800px;
    /* Animação de entrada do conteúdo */
    opacity: 0;
    transform: translateY(20px);
    animation: fade-in-up 1.2s ease-out forwards;
}

#cover h1 {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 15px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

.cover-content .subtitle {
    font-size: 1.5rem;
    margin-bottom: 30px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.call-to-action {
    display: inline-block;
    padding: 15px 30px;
    background-color: #FF6600; /* Laranja vivo */
    color: #000000; /* Texto preto para contraste */
    text-decoration: none;
    font-weight: 700;
    border-radius: 5px;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.call-to-action:hover {
    background-color: #ff8533;
    transform: translateY(-3px);
}

/* Animações dinâmicas */
@keyframes zoom-suave {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.1);
    }
}

@keyframes fade-in-up {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* 1. VARIÁVEIS DE COR E CONFIGURAÇÕES GERAIS */
:root {
    --cor-laranja-vivo: #FF6600;
    --cor-fundo-preto: #000000;
    --cor-texto: #FFFFFF;
    --cor-fundo-popup: #1F1F1F;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}




















/* Garante que o fundo da página inteira seja preto */
html, body {
    background-color: var(--cor-fundo-preto);
    font-family: 'Poppins', sans-serif;
    color: #ff6600;
}

/* Classe para travar o scroll quando o popup estiver aberto */
body.popup-aberto {
    overflow: hidden;
}

/* 2. SEÇÃO DE PRODUTOS */
.secao-produtos {
    padding: 60px 5%;
    text-align: center;
    position: relative;
    z-index: 10;
    background-color: #000000; 
}

.secao-produtos h2 {
    font-size: 2.5rem;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.secao-produtos h2::after {
    content: '';
    display: block;
    width: 80px;
    height: 4px;
    background-color: var(--cor-laranja-vivo);
    margin: 10px auto;
    border-radius: 2px;
}

/* Grid que comporta os blocos dos produtos */
.grid-produtos {
     display: flex;                
        overflow-x: auto;             
        scroll-snap-type: x mandatory;  
        gap: 20px;                    
        padding: 20px 20px 20px 20px;    
        margin-left: 10px;           
        margin-right: 10px; 
}

/* Em telas maiores (desktop), força 5 colunas */
@media (min-width: 1200px) {
    .grid-produtos {
        grid-template-columns: repeat(5, 1fr);
    }
}

/* 3. BLOCO DE PRODUTO (CARD) */
.bloco-produto {
    background-color: #222;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out, box-shadow 0.4s ease;
}

.bloco-produto.visivel {
    opacity: 1;
    transform: translateY(0);
}

.bloco-produto:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 30px rgba(0,0,0,0.7), 0 0 15px var(--cor-laranja-vivo);
}

.bloco-produto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.bloco-produto:hover img {
    transform: scale(1.1);
}

.info-produto {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 20%, transparent);
    text-align: left;
}

.info-produto h3 {
    font-size: 1.4rem;
    margin-bottom: 5px;
}

/* 4. POPUP DE DETALHES */
.container-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.container-popup.visivel {
    display: flex;
    opacity: 1;
}

.conteudo-popup {
    background-color: var(--cor-fundo-popup);
    padding: 30px;
    border-radius: 10px;
    border-top: 5px solid var(--cor-laranja-vivo);
    width: 90%;
    max-width: 650px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 10px 40px rgba(0,0,0,0.8);
    transform: scale(0.8);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.container-popup.visivel .conteudo-popup {
    transform: scale(1);
}

.fechar-popup {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 2.5rem;
    color: #888;
    cursor: pointer;
    transition: color 0.3s ease, transform 0.3s ease;
}

.fechar-popup:hover {
    color: var(--cor-laranja-vivo);
    transform: rotate(90deg);
}

#popup-img {
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: top;
    border-radius: 6px;
    margin-bottom: 20px;
}

#popup-titulo {
    font-size: 2rem;
    margin-bottom: 5px;
    color: var(--cor-texto);
}

.popup-sessoes {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--cor-laranja-vivo);
    margin-bottom: 20px;
}

#popup-descricao {
    font-size: 1rem;
    line-height: 1.6;
    color: #ccc;
}

/* --- RESPONSIVIDADE PARA A SEÇÃO DE PRODUTOS (VERSÃO MELHORADA) --- */

@media (max-width: 768px) {

    /* 1. AJUSTES GERAIS DA SEÇÃO */
    .secao-produtos {
        padding: 60px 0; /* Diminui o espaçamento vertical */
    }

    .secao-produtos h2 {
        font-size: 1.35rem; /* Diminui o título principal */
        text-align: left;
        padding-left: 20px;
    }
    .secao-produtos h2::after {
        margin-left: 0;
        margin-right: auto;
    }

    /* 2. AJUSTES NOS CARDS DO CARROSSEL */
    .grid-produtos {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    .grid-produtos::-webkit-scrollbar {
        display: none;
    }
    
    .bloco-produto {
        flex: 0 0 75%; /* Deixa os cards um pouco menores */
        scroll-snap-align: start;
    }
    
    .info